/*
Theme Name: IFMEN
Theme URI: https://ifmen.myfad.org
Author: IFMEN
Description: Thème bloc (FSE) sur mesure pour l'Institut de Formation aux Métiers de l'Enseignement — Dakar, Sénégal. Charte bleu institutionnel et orange, typographie Montserrat / Open Sans, mobile-first et accessible.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ifmen
Tags: education, block-patterns, full-site-editing, blog, custom-colors, custom-logo, accessibility-ready
*/

/* ==========================================================================
   IFMEN — feuille de style du thème
   Le motif directeur : la page de cahier d'école. Une réglure horizontale très
   discrète sur les fonds bleus, et une marge verticale orange qui sert de
   colonne vertébrale aux blocs de texte. Tout le reste reste sobre.
   ========================================================================== */

:root {
	/* Réglure de cahier */
	--ifmen-regle-pas: 2.5rem;
	--ifmen-regle-clair: rgba( 255, 255, 255, 0.075 );
	--ifmen-regle-sombre: rgba( 0, 51, 160, 0.055 );

	/* Filets et rythme */
	--ifmen-filet: var( --wp--preset--color--gris-bord );
	--ifmen-filet-epais: 3px;
	--ifmen-transition: 220ms cubic-bezier( 0.22, 0.61, 0.36, 1 );

	/* Hauteur de la barre collante, utilisée pour le scroll-margin des ancres */
	--ifmen-navbar-h: 4.75rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Les titres restent équilibrés sur 2–3 lignes plutôt que de laisser un mot seul */
h1,
h2,
h3,
.ifmen-hero__titre {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/* Les ancres ne passent pas sous la barre collante */
:target {
	scroll-margin-top: calc( var( --ifmen-navbar-h ) + 1.5rem );
}

/* --------------------------------------------------------------------------
   1. Accessibilité — focus visible et lien d'évitement
   -------------------------------------------------------------------------- */

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var( --wp--preset--color--orange-ifmen );
	outline-offset: 3px;
	border-radius: 2px;
}

/* Sur fond bleu foncé, l'orange reste lisible ; on épaissit légèrement */
.has-bleu-encre-background-color :focus-visible,
.has-bleu-nuit-background-color :focus-visible,
.ifmen-fond-nuit :focus-visible {
	outline-color: var( --wp--preset--color--orange-ifmen );
	outline-offset: 4px;
}

.ifmen-evitement {
	position: absolute;
	left: 1rem;
	top: 0;
	z-index: 999;
	transform: translateY( -120% );
	padding: 0.75rem 1.25rem;
	background: var( --wp--preset--color--bleu-encre );
	color: #fff;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform var( --ifmen-transition );
}

.ifmen-evitement:focus {
	transform: translateY( 0 );
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   2. Le motif : réglure de cahier et marge orange
   -------------------------------------------------------------------------- */

.ifmen-regle {
	position: relative;
	isolation: isolate;
}

.ifmen-regle::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0 calc( var( --ifmen-regle-pas ) - 1px ),
		var( --ifmen-regle-clair ) calc( var( --ifmen-regle-pas ) - 1px ) var( --ifmen-regle-pas )
	);
	/* On estompe la réglure en haut et en bas : elle suggère la page, sans l'imiter */
	-webkit-mask-image: linear-gradient( to bottom, transparent, #000 14%, #000 86%, transparent );
	mask-image: linear-gradient( to bottom, transparent, #000 14%, #000 86%, transparent );
}

/* Variante sur fond clair */
.ifmen-regle--clair::after {
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0 calc( var( --ifmen-regle-pas ) - 1px ),
		var( --ifmen-regle-sombre ) calc( var( --ifmen-regle-pas ) - 1px ) var( --ifmen-regle-pas )
	);
}

/* La marge : filet orange vertical, comme la marge d'un cahier */
.ifmen-marge {
	position: relative;
	padding-left: clamp( 1.125rem, 3vw, 2rem );
}

.ifmen-marge::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 2px;
	background: var( --wp--preset--color--orange-ifmen );
}

/* Surtitre — l'étiquette de fiche pédagogique. Utilisée partout comme repère. */
.ifmen-surtitre {
	display: block;
	margin: 0 0 0.85rem;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bleu-moyen );
}

.ifmen-hero .ifmen-surtitre,
.ifmen-fond-nuit .ifmen-surtitre,
.ifmen-chapeau .ifmen-surtitre,
.has-bleu-encre-background-color .ifmen-surtitre,
.has-bleu-nuit-background-color .ifmen-surtitre {
	color: var( --wp--preset--color--orange-ifmen );
}

/* Idem pour les surtitres posés via le style de bloc « Surtitre » */
.ifmen-hero .is-style-ifmen-surtitre,
.ifmen-fond-nuit .is-style-ifmen-surtitre,
.ifmen-chapeau .is-style-ifmen-surtitre {
	color: var( --wp--preset--color--orange-ifmen );
}

/* --------------------------------------------------------------------------
   3. En-tête — barre d'infos + barre de navigation collante
   -------------------------------------------------------------------------- */

.ifmen-topbar {
	background: var( --wp--preset--color--bleu-encre );
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 0.8125rem;
	line-height: 1.4;
}

.ifmen-topbar a {
	color: rgba( 255, 255, 255, 0.82 );
	text-decoration: none;
	transition: color var( --ifmen-transition );
}

.ifmen-topbar a:hover {
	color: var( --wp--preset--color--orange-ifmen );
}

.ifmen-topbar .ifmen-topbar__campus {
	font-family: var( --wp--preset--font-family--montserrat );
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
}

.ifmen-topbar .ifmen-topbar__campus::after {
	content: " ↗";
	color: var( --wp--preset--color--orange-ifmen );
}

.ifmen-navbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba( 255, 255, 255, 0.94 );
	backdrop-filter: saturate( 180% ) blur( 12px );
	-webkit-backdrop-filter: saturate( 180% ) blur( 12px );
	border-bottom: 1px solid var( --ifmen-filet );
	transition: box-shadow var( --ifmen-transition );
}

/* Ombre portée dès que la page défile (classe posée en JS) */
.ifmen-navbar.est-decolle {
	box-shadow: 0 1px 0 var( --ifmen-filet ), 0 10px 28px -18px rgba( 0, 26, 77, 0.45 );
}

.ifmen-navbar .wp-block-site-logo img {
	width: clamp( 168px, 22vw, 248px );
	height: auto;
	display: block;
}

/* Navigation : soulignement animé, jamais de décoration au repos */
.ifmen-navbar .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.4rem;
	color: var( --wp--preset--color--bleu-nuit );
}

.ifmen-navbar .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var( --wp--preset--color--orange-ifmen );
	transition: right var( --ifmen-transition );
}

.ifmen-navbar .wp-block-navigation-item__content:hover::after,
.ifmen-navbar .current-menu-item > .wp-block-navigation-item__content::after,
.ifmen-navbar .current_page_item > .wp-block-navigation-item__content::after {
	right: 0;
}

.ifmen-navbar .current-menu-item > .wp-block-navigation-item__content,
.ifmen-navbar .current_page_item > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--bleu-ifmen );
}

/* Sous-menus */
.ifmen-navbar .wp-block-navigation__submenu-container {
	border: 1px solid var( --ifmen-filet );
	border-top: var( --ifmen-filet-epais ) solid var( --wp--preset--color--orange-ifmen );
	box-shadow: var( --wp--preset--shadow--pose );
	background: #fff;
	padding-block: 0.35rem;
	min-width: 15rem;
}

.ifmen-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.1rem;
}

.ifmen-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.ifmen-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var( --wp--preset--color--bleu-pale );
}

/* Menu déroulant plein écran sur mobile */
.ifmen-navbar .wp-block-navigation__responsive-container.is-menu-open {
	background: var( --wp--preset--color--bleu-encre );
	padding: clamp( 1.5rem, 6vw, 3rem );
}

.ifmen-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff;
	font-size: 1.375rem;
	font-weight: 700;
	padding-block: 0.55rem;
}

.ifmen-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1.5rem;
}

.ifmen-navbar .wp-block-navigation__responsive-container-close,
.ifmen-navbar .wp-block-navigation__responsive-container-open {
	color: currentColor;
}

.ifmen-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* Le bouton « Candidater » disparaît sous 48em, il est repris dans le menu */
@media ( max-width: 47.999em ) {
	.ifmen-navbar__cta {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   4. Héros
   -------------------------------------------------------------------------- */

.ifmen-hero {
	position: relative;
	isolation: isolate;
	background: var( --wp--preset--color--bleu-encre );
	color: #fff;
	overflow: hidden;
}

/* Le trait diagonal du logo, repris en très grand et très discret.
   z-index négatif + isolation : la nappe passe au-dessus du fond, sous le texte. */
.ifmen-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		112deg,
		rgba( 245, 166, 35, 0.14 ) 0%,
		rgba( 245, 166, 35, 0 ) 34%,
		rgba( 30, 91, 184, 0.22 ) 68%,
		rgba( 30, 91, 184, 0 ) 100%
	);
}

.ifmen-hero__titre {
	font-family: var( --wp--preset--font-family--montserrat );
	font-weight: 800;
	font-size: var( --wp--preset--font-size--affiche );
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: #fff;
	margin: 0 0 1.5rem;
}

.ifmen-hero__titre em {
	font-style: normal;
	color: var( --wp--preset--color--orange-ifmen );
}

.ifmen-hero__chapo {
	font-size: clamp( 1.0625rem, 0.95rem + 0.6vw, 1.3125rem );
	line-height: 1.65;
	color: rgba( 255, 255, 255, 0.86 );
	max-width: 34rem;
	margin: 0 0 2.25rem;
}

.ifmen-hero .wp-block-buttons {
	gap: 0.875rem;
}

/* Bouton secondaire sur fond sombre */
.ifmen-hero .is-style-outline > .wp-block-button__link,
.ifmen-fond-nuit .is-style-outline > .wp-block-button__link {
	border: 1.5px solid rgba( 255, 255, 255, 0.5 );
	color: #fff;
	background: transparent;
}

.ifmen-hero .is-style-outline > .wp-block-button__link:hover,
.ifmen-fond-nuit .is-style-outline > .wp-block-button__link:hover {
	border-color: #fff;
	background: #fff;
	color: var( --wp--preset--color--bleu-encre );
}

/* --------------------------------------------------------------------------
   5. Bandeau chiffres — étiquette au-dessus, chiffre en dessous
   -------------------------------------------------------------------------- */

.ifmen-chiffres {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: 0;
	border-block: 1px solid var( --wp--preset--color--sable-fonce );
	background: var( --wp--preset--color--sable );
}

.ifmen-chiffre {
	padding: clamp( 1.75rem, 4vw, 2.5rem ) clamp( 1.25rem, 3vw, 2rem );
	border-left: 1px solid var( --wp--preset--color--sable-fonce );
}

.ifmen-chiffre:first-child {
	border-left: 0;
}

.ifmen-chiffre__etiquette {
	display: block;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bleu-moyen );
	margin-bottom: 0.6rem;
}

.ifmen-chiffre__valeur {
	display: block;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: clamp( 1.875rem, 1.2rem + 2.4vw, 2.875rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--bleu-encre );
}

.ifmen-chiffre__precision {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var( --wp--preset--color--gris-doux );
}

@media ( max-width: 39.999em ) {
	.ifmen-chiffres {
		grid-template-columns: repeat( 2, 1fr );
	}

	.ifmen-chiffre:nth-child( 2n + 1 ) {
		border-left: 0;
	}

	.ifmen-chiffre:nth-child( n + 3 ) {
		border-top: 1px solid var( --wp--preset--color--sable-fonce );
	}
}

/* --------------------------------------------------------------------------
   6. Fiches formation — filet haut, pas d'ombre au repos
   -------------------------------------------------------------------------- */

/* Les filets viennent d'une ombre portée de 1 px sur chaque fiche : celles qui
   se touchent partagent le même trait, et une cellule vide en fin de grille ne
   laisse aucun rectangle gris derrière elle. */
.ifmen-fiches {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 19rem ), 1fr ) );
	gap: 1px;
	margin: 1px;
}

.ifmen-fiche {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp( 1.5rem, 3vw, 2.125rem );
	background: #fff;
	box-shadow: 0 0 0 1px var( --ifmen-filet );
	text-decoration: none;
	color: inherit;
	transition: background var( --ifmen-transition );
}

/* Le filet haut s'épaissit et se colore au survol : une seule micro-interaction */
.ifmen-fiche::before {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	top: 0;
	height: var( --ifmen-filet-epais );
	background: var( --wp--preset--color--orange-ifmen );
	transition: right var( --ifmen-transition );
}

/* Le lien du titre est étendu à toute la fiche : une seule cible cliquable,
   un seul lien, nommé par le titre. */
.ifmen-fiche__titre a {
	color: inherit;
	text-decoration: none;
}

.ifmen-fiche__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ifmen-fiche:hover,
.ifmen-fiche:has( a:focus-visible ) {
	background: var( --wp--preset--color--gris-clair );
}

.ifmen-fiche:hover::before,
.ifmen-fiche:has( a:focus-visible )::before {
	right: 0;
}

/* Le focus encadre la fiche entière, pas seulement le texte du titre. */
.ifmen-fiche:has( a:focus-visible ) {
	outline: 3px solid var( --wp--preset--color--orange-ifmen );
	outline-offset: -1px;
}

.ifmen-fiche__titre a:focus-visible {
	outline: none;
}

/* Repli pour les navigateurs sans :has() */
@supports not selector( :has( a ) ) {
	.ifmen-fiche__titre a:focus-visible {
		outline: 3px solid var( --wp--preset--color--orange-ifmen );
		outline-offset: 3px;
	}
}

.ifmen-fiche__glyphe {
	width: 2.25rem;
	height: 2.25rem;
	color: var( --wp--preset--color--bleu-moyen );
	flex: none;
}

.ifmen-fiche__glyphe svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ifmen-fiche:hover .ifmen-fiche__glyphe {
	color: var( --wp--preset--color--orange-fonce );
}

.ifmen-fiche__niveau {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bleu-moyen );
}

.ifmen-fiche__titre {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--bleu-nuit );
	margin: 0;
}

.ifmen-fiche__resume {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --wp--preset--color--gris-doux );
	margin: 0;
}

.ifmen-fiche__lire {
	margin-top: auto;
	padding-top: 0.35rem;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.8125rem;
	font-weight: 700;
	color: var( --wp--preset--color--bleu-ifmen );
}

/* Espace insécable : une espace ordinaire en début de `content` est supprimée. */
.ifmen-fiche__lire::after {
	content: "\00a0→";
	display: inline-block;
	transition: transform var( --ifmen-transition );
}

.ifmen-fiche:hover .ifmen-fiche__lire::after {
	transform: translateX( 4px );
}

/* --------------------------------------------------------------------------
   7. Liste « Pourquoi l'IFMEN » — filets, pas de puces décoratives
   -------------------------------------------------------------------------- */

.ifmen-atouts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 20rem ), 1fr ) );
	column-gap: clamp( 2rem, 5vw, 4rem );
	list-style: none;
	margin: 0;
	padding: 0;
}

.ifmen-atout {
	padding: 1.375rem 0;
	border-top: 1px solid var( --ifmen-filet );
}

.ifmen-atout__texte {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.ifmen-atout__texte strong {
	display: block;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--bleu-nuit );
	margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   8. Bandeau Campus numérique
   -------------------------------------------------------------------------- */

.ifmen-fond-nuit {
	background: var( --wp--preset--color--bleu-ifmen );
	color: #fff;
}

.ifmen-fond-nuit :is( h1, h2, h3, h4, h5 ) {
	color: #fff;
}

.ifmen-fond-nuit p {
	color: rgba( 255, 255, 255, 0.86 );
}

.ifmen-fond-nuit a:not( .wp-block-button__link ) {
	color: var( --wp--preset--color--orange-ifmen );
}

.ifmen-campus__url {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: rgba( 255, 255, 255, 0.7 );
	border-bottom: 1px dashed rgba( 255, 255, 255, 0.35 );
	text-decoration: none;
	padding-bottom: 2px;
}

.ifmen-campus__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.ifmen-campus__liste li {
	padding: 0.95rem 0 0.95rem 1.75rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.18 );
	position: relative;
	color: rgba( 255, 255, 255, 0.9 );
	line-height: 1.5;
}

.ifmen-campus__liste li:last-child {
	border-bottom: 1px solid rgba( 255, 255, 255, 0.18 );
}

.ifmen-campus__liste li::before {
	content: "→";
	position: absolute;
	left: 0;
	top: 0.95rem;
	color: var( --wp--preset--color--orange-ifmen );
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. Témoignages
   -------------------------------------------------------------------------- */

.ifmen-temoignages {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 18rem ), 1fr ) );
	gap: 0;
}

.ifmen-temoignage {
	padding: clamp( 1.5rem, 3vw, 2.25rem );
	border-left: 1px solid var( --wp--preset--color--sable-fonce );
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.ifmen-temoignage:first-child {
	border-left: 0;
	padding-left: 0;
}

.ifmen-temoignage__texte {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--bleu-encre );
	margin: 0;
}

.ifmen-temoignage__auteur {
	margin-top: auto;
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-temoignage__auteur b {
	display: block;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bleu-nuit );
}

@media ( max-width: 47.999em ) {
	.ifmen-temoignage {
		border-left: 0;
		border-top: 1px solid var( --wp--preset--color--sable-fonce );
		padding-left: 0;
		padding-right: 0;
	}

	.ifmen-temoignage:first-child {
		border-top: 0;
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   10. Contenu éditorial (pages et articles)
   -------------------------------------------------------------------------- */

.ifmen-prose > * + :is( h2, h3 ) {
	margin-top: clamp( 2.25rem, 5vw, 3.25rem );
}

.ifmen-prose :is( ul, ol ) {
	padding-left: 1.25rem;
}

.ifmen-prose li + li {
	margin-top: 0.4rem;
}

.ifmen-prose li::marker {
	color: var( --wp--preset--color--orange-fonce );
}

/* Encadré d'information — sert aux frais, pièces à fournir, dates */
.ifmen-encadre {
	border: 1px solid var( --ifmen-filet );
	border-top: var( --ifmen-filet-epais ) solid var( --wp--preset--color--bleu-moyen );
	background: var( --wp--preset--color--gris-clair );
	padding: clamp( 1.25rem, 3vw, 1.875rem );
}

.ifmen-encadre--sable {
	background: var( --wp--preset--color--sable );
	border-color: var( --wp--preset--color--sable-fonce );
	border-top-color: var( --wp--preset--color--orange-ifmen );
}

.ifmen-encadre > :first-child {
	margin-top: 0;
}

.ifmen-encadre > :last-child {
	margin-bottom: 0;
}

/* Tableau de repères d'une formation : durée, niveau, modalité… */
.ifmen-reperes {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 11rem ), 1fr ) );
	gap: 0;
	border: 1px solid var( --ifmen-filet );
}

.ifmen-repere {
	padding: 1.125rem 1.25rem;
	border-left: 1px solid var( --ifmen-filet );
}

.ifmen-repere:first-child {
	border-left: 0;
}

.ifmen-repere dt {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bleu-moyen );
	margin-bottom: 0.4rem;
}

.ifmen-repere dd {
	margin: 0;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--bleu-encre );
}

/* Carte : le bouton occupe la place du cadre, sans décalage au chargement */
.ifmen-carte {
	border: 1px solid var( --ifmen-filet );
	background: var( --wp--preset--color--sable );
	min-height: 420px;
	display: grid;
}

.ifmen-carte__declencheur {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 420px;
	padding: 2rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: center;
	transition: background var( --ifmen-transition );
}

.ifmen-carte__declencheur:hover {
	background: var( --wp--preset--color--sable-fonce );
}

.ifmen-carte__action {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--bleu-nuit );
	border-bottom: 2px solid var( --wp--preset--color--orange-ifmen );
	padding-bottom: 3px;
}

.ifmen-carte__note {
	max-width: 30rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-carte iframe {
	min-height: 420px;
}

/* FAQ en accordéon natif */
.ifmen-faq {
	border-top: 1px solid var( --ifmen-filet );
}

.ifmen-faq details {
	border-bottom: 1px solid var( --ifmen-filet );
}

.ifmen-faq summary {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--bleu-nuit );
	transition: color var( --ifmen-transition );
}

.ifmen-faq summary::-webkit-details-marker {
	display: none;
}

.ifmen-faq summary::after {
	content: "+";
	margin-left: auto;
	flex: none;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var( --wp--preset--color--orange-fonce );
	transition: transform var( --ifmen-transition );
}

.ifmen-faq details[ open ] summary::after {
	transform: rotate( 45deg );
}

.ifmen-faq summary:hover {
	color: var( --wp--preset--color--bleu-ifmen );
}

.ifmen-faq__reponse {
	padding: 0 0 1.5rem;
	max-width: 46rem;
}

.ifmen-faq__reponse > :first-child {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   11. Articles / actualités
   -------------------------------------------------------------------------- */

.ifmen-articles .wp-block-post {
	border-top: 1px solid var( --ifmen-filet );
	padding-top: 1.5rem;
}

.ifmen-articles .wp-block-post-title {
	font-size: 1.1875rem;
	line-height: 1.3;
	margin: 0.5rem 0 0.6rem;
}

.ifmen-articles .wp-block-post-title a {
	text-decoration: none;
	color: var( --wp--preset--color--bleu-nuit );
}

.ifmen-articles .wp-block-post-title a:hover {
	color: var( --wp--preset--color--orange-fonce );
}

.ifmen-articles .wp-block-post-date {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bleu-moyen );
}

.ifmen-articles .wp-block-post-excerpt__excerpt {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-articles .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

/* --------------------------------------------------------------------------
   12. Pied de page
   -------------------------------------------------------------------------- */

.ifmen-footer {
	background: var( --wp--preset--color--bleu-encre );
	color: rgba( 255, 255, 255, 0.76 );
	font-size: 0.9375rem;
}

.ifmen-footer :is( h2, h3, h4 ) {
	color: #fff;
}

.ifmen-footer__titre {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--orange-ifmen );
	margin: 0 0 1.125rem;
}

.ifmen-footer p {
	color: rgba( 255, 255, 255, 0.76 );
	line-height: 1.65;
}

.ifmen-footer a {
	color: rgba( 255, 255, 255, 0.85 );
	text-decoration: none;
	transition: color var( --ifmen-transition );
}

.ifmen-footer a:hover {
	color: var( --wp--preset--color--orange-ifmen );
	text-decoration: underline;
}

.ifmen-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ifmen-footer li + li {
	margin-top: 0.55rem;
}

/* Le logo est posé sur une plaque blanche : ses bleus ne passent pas sur fond bleu */
.ifmen-footer__logo {
	display: inline-block;
	background: #fff;
	padding: 0.75rem 1rem;
	margin-bottom: 1.25rem;
}

.ifmen-footer__logo img {
	display: block;
	width: 220px;
	height: auto;
}

.ifmen-footer__bas {
	border-top: 1px solid rgba( 255, 255, 255, 0.16 );
	font-size: 0.8125rem;
	color: rgba( 255, 255, 255, 0.6 );
}

/* --------------------------------------------------------------------------
   13. Bouton WhatsApp flottant
   -------------------------------------------------------------------------- */

.ifmen-whatsapp {
	position: fixed;
	right: clamp( 0.875rem, 3vw, 1.5rem );
	bottom: clamp( 0.875rem, 3vw, 1.5rem );
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem;
	border-radius: 999px;
	background: #25d366;
	color: #04321a;
	box-shadow: 0 6px 22px -6px rgba( 4, 50, 26, 0.5 );
	text-decoration: none;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.875rem;
	font-weight: 700;
	transition: transform var( --ifmen-transition ), box-shadow var( --ifmen-transition );
}

.ifmen-whatsapp svg {
	width: 1.625rem;
	height: 1.625rem;
	flex: none;
}

.ifmen-whatsapp__libelle {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width var( --ifmen-transition );
}

.ifmen-whatsapp:hover,
.ifmen-whatsapp:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 10px 28px -8px rgba( 4, 50, 26, 0.55 );
}

.ifmen-whatsapp:hover .ifmen-whatsapp__libelle,
.ifmen-whatsapp:focus-visible .ifmen-whatsapp__libelle {
	max-width: 9rem;
	padding-right: 0.5rem;
}

/* --------------------------------------------------------------------------
   14. Apparitions au chargement et au défilement
   -------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: no-preference ) {
	.ifmen-entree > * {
		opacity: 0;
		transform: translateY( 14px );
		animation: ifmen-monte 620ms cubic-bezier( 0.22, 0.61, 0.36, 1 ) forwards;
	}

	.ifmen-entree > *:nth-child( 1 ) { animation-delay: 60ms; }
	.ifmen-entree > *:nth-child( 2 ) { animation-delay: 170ms; }
	.ifmen-entree > *:nth-child( 3 ) { animation-delay: 280ms; }
	.ifmen-entree > *:nth-child( 4 ) { animation-delay: 390ms; }

	/* Amélioration progressive : le contenu n'est masqué que si le script est
	   effectivement là pour le révéler. Sans JavaScript — ou si le script
	   échoue — tout reste visible. Le contenu ne dépend jamais du JS. */
	.ifmen-js .ifmen-revele {
		opacity: 0;
		transform: translateY( 16px );
		transition: opacity 560ms ease, transform 560ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
	}

	.ifmen-js .ifmen-revele.est-visible {
		opacity: 1;
		transform: none;
	}
}

@keyframes ifmen-monte {
	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   15. Formulaires (Fluent Forms) — alignés sur la charte
   -------------------------------------------------------------------------- */

.fluentform .ff-el-input--label label,
.ifmen-formulaire label {
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.875rem;
	font-weight: 700;
	color: var( --wp--preset--color--bleu-nuit );
}

.fluentform .ff-el-form-control {
	border: 1px solid var( --ifmen-filet );
	border-radius: 3px;
	padding: 0.8rem 0.9rem;
	font-family: var( --wp--preset--font-family--open-sans );
	font-size: 1rem;
	color: var( --wp--preset--color--gris-texte );
	background: #fff;
	transition: border-color var( --ifmen-transition ), box-shadow var( --ifmen-transition );
}

.fluentform .ff-el-form-control:focus {
	border-color: var( --wp--preset--color--bleu-moyen );
	box-shadow: 0 0 0 3px rgba( 30, 91, 184, 0.15 );
	outline: none;
}

/* Spécificité volontairement élevée : la feuille du plugin impose sinon un
   texte blanc sur l'orange, soit un contraste de 2:1 — sous le seuil WCAG AA. */
.fluentform form button.ff-btn-submit,
.fluentform button.ff-btn-submit.ff_btn_style {
	background: var( --wp--preset--color--orange-ifmen );
	color: var( --wp--preset--color--bleu-encre );
	border: 0;
	border-radius: 3px;
	padding: 1rem 1.75rem;
	font-family: var( --wp--preset--font-family--montserrat );
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var( --ifmen-transition ), color var( --ifmen-transition );
}

.fluentform form button.ff-btn-submit:hover,
.fluentform button.ff-btn-submit.ff_btn_style:hover {
	background: var( --wp--preset--color--orange-fonce );
	color: #fff;
}

.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #c0392b;
}

.fluentform .error-text,
.fluentform .text-danger {
	font-size: 0.875rem;
	color: #c0392b;
}

/* --------------------------------------------------------------------------
   16. Impression
   -------------------------------------------------------------------------- */

@media print {
	.ifmen-topbar,
	.ifmen-navbar,
	.ifmen-whatsapp,
	.ifmen-footer__bas,
	.wp-block-buttons {
		display: none !important;
	}

	.ifmen-regle::after,
	.ifmen-hero::before {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
		font-size: 11pt;
	}

	a::after {
		content: " (" attr( href ) ")";
		font-size: 9pt;
		color: #555;
	}
}