/*
Theme Name: IFMEN
Theme URI: https://ifmen.sn
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 marine et orange tirée du logo, typographie Archivo / Source Sans 3 / IBM Plex Mono, grille de 1280 px à gouttière de 56 px.
Version: 2.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
   Refonte visuelle 2026. Le motif directeur vient du logo : un carré partagé
   par une diagonale, orange sur marine. On le retrouve dans les coins des
   bannières, dans les visuels de fiches et dans les panneaux graphiques qui
   tiennent la place des photos manquantes. Aucun rayon, sauf 2 px sur les
   boutons ; les séparations sont des filets d'un pixel, jamais des ombres.
   ========================================================================== */

:root {
	/* Gouttière de la grille. Une seule variable pilote l'alignement de
	   l'en-tête, des bannières et de tout le contenu (voir theme.json). */
	--ifmen-gouttiere: 56px;

	/* Conteneur : 1280 px de large, gouttière comprise. */
	--ifmen-conteneur: 73rem;

	/* Grille de repères des fonds graphiques */
	--ifmen-repere-pas: 54px;
	--ifmen-repere-trait: rgba( 255, 255, 255, 0.05 );

	/* Filets */
	--ifmen-filet: var( --wp--preset--color--bordure );
	--ifmen-filet-doux: var( --wp--preset--color--bordure-douce );
	--ifmen-filet-pierre: #e2dfd8; /* séparateur du bandeau de témoignage */
	--ifmen-filet-accent: 3px;

	/* Orange assombri pour le survol des boutons (cf. « Interactions ») */
	--ifmen-orange-survol: #dc6f14;

	/* Orange assombri réservé au TEXTE sur fond clair : #F4801F ne donne que
	   2,4:1 sur blanc, sous le seuil WCAG AA. Les filets et aplats décoratifs
	   gardent l'orange de marque exact. */
	--ifmen-orange-texte: #ae550a;

	/* Voile de lisibilité de la bannière Admission. La maquette prévoit
	   #C25F0C, qui ne donne que 4,25:1 avec le blanc ; celui-ci monte à 5,5:1. */
	--ifmen-orange-voile: #a8500a;

	--ifmen-transition: 160ms ease;

	/* Hauteur de l'en-tête collant, pour le scroll-margin des ancres */
	--ifmen-navbar-h: 88px;
}

@media ( max-width: 1279.98px ) {
	:root {
		--ifmen-gouttiere: 32px;
	}
}

@media ( max-width: 767.98px ) {
	:root {
		--ifmen-gouttiere: 20px;
		--ifmen-navbar-h: 68px;
	}
}

*,
*::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 longs restent équilibrés ; les paragraphes évitent les orphelines */
h1,
h2,
h3,
.ifmen-hero__titre {
	text-wrap: balance;
}

p,
li,
figcaption {
	text-wrap: pretty;
}

/* Les ancres ne passent pas sous l'en-tête collant */
: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--bleu-marque );
	outline-offset: 3px;
	border-radius: 2px;
}

/* Sur les fonds marine, le bleu de marque ne se détache pas : on passe à l'orange */
.ifmen-fond-nuit :focus-visible,
.ifmen-hero :focus-visible,
.ifmen-atouts :focus-visible,
.ifmen-footer :focus-visible,
.ifmen-topbar :focus-visible,
.has-marine-background-color :focus-visible,
.has-marine-profond-background-color :focus-visible {
	outline-color: var( --wp--preset--color--orange-pale );
	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--marine-profond );
	color: #fff;
	font-family: var( --wp--preset--font-family--archivo );
	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. Éléments récurrents de la charte
   -------------------------------------------------------------------------- */

/* Sur-titre : filet orange de 28 px puis étiquette monospace en capitales.
   Le filet est porté par un pseudo-élément, l'étiquette reste un seul nœud. */
.ifmen-surtitre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.71875rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --ifmen-orange-texte );
}

.ifmen-surtitre::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: var( --wp--preset--color--orange-marque );
}

/* Sur fond marine, l'orange pâle est parfaitement lisible (8,4:1) */
.ifmen-hero .ifmen-surtitre,
.ifmen-fond-nuit .ifmen-surtitre,
.ifmen-chapeau .ifmen-surtitre,
.ifmen-atouts-section .ifmen-surtitre,
.has-marine-background-color .ifmen-surtitre,
.has-marine-profond-background-color .ifmen-surtitre {
	color: var( --wp--preset--color--orange-pale );
}

.ifmen-hero .ifmen-surtitre {
	gap: 12px;
	margin-bottom: 26px;
}

.ifmen-hero .ifmen-surtitre::before {
	width: 34px;
}

/* Les styles d'éléments de theme.json (`:root :where(h2)`) ont la même
   spécificité qu'un sélecteur de classe : seul l'ordre des feuilles les
   sépare. Les titres qui portent une de nos classes utilitaires sont donc
   qualifiés par leur balise, pour ne pas dépendre de cet ordre. */
h2.ifmen-etiquette,
h3.ifmen-etiquette,
h4.ifmen-etiquette {
	font-size: 0.71875rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.1em;
}

h2.ifmen-fiche__titre,
h3.ifmen-fiche__titre,
h4.ifmen-fiche__titre {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h3.ifmen-etape__titre {
	font-size: 1.1875rem;
}

h2.ifmen-surtitre,
h3.ifmen-surtitre {
	font-size: 0.71875rem;
	font-weight: 400;
	letter-spacing: 0.14em;
}

/* Étiquette monospace sans filet — barres de chiffres, cartes, dates */
.ifmen-etiquette {
	display: block;
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.71875rem;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-etiquette--orange {
	color: var( --ifmen-orange-texte );
}

/* Lien d'action : soulignement orange de 2 px, flèche accolée */
.ifmen-lien-action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --wp--preset--color--bleu-marque );
	text-decoration: none;
	border-bottom: 2px solid var( --wp--preset--color--orange-marque );
	padding-bottom: 5px;
	transition: color var( --ifmen-transition );
}

.ifmen-lien-action::after {
	content: "→";
	color: var( --wp--preset--color--orange-marque );
	transition: transform var( --ifmen-transition );
}

.ifmen-lien-action:hover {
	color: var( --wp--preset--color--orange-marque );
}

.ifmen-lien-action:hover::after {
	transform: translateX( 3px );
}

.ifmen-lien-action--petit {
	font-size: 0.96875rem;
	white-space: nowrap;
}

/* Lien sortant : la flèche oblique du libellé remplace la flèche horizontale */
.ifmen-lien-action--externe::after {
	content: none;
}

/* La marge du cahier, conservée pour les pages intérieures déjà en place */
.ifmen-marge {
	position: relative;
	padding-left: 24px;
}

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

/* Grille de repères : la trame de fond des aplats marine.
   Remplace l'ancienne réglure de cahier, sur le même nom de classe. */
.ifmen-regle {
	position: relative;
	isolation: isolate;
}

.ifmen-regle::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient( var( --ifmen-repere-trait ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --ifmen-repere-trait ) 1px, transparent 1px );
	background-size: var( --ifmen-repere-pas ) var( --ifmen-repere-pas );
}

/* Panneau graphique : tient la place des photos non encore fournies.
   Reprend la géométrie du logo — un aplat marine coupé par une diagonale. */
.ifmen-graphique {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var( --wp--preset--color--marine );
}

.ifmen-graphique::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient( var( --ifmen-repere-trait ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --ifmen-repere-trait ) 1px, transparent 1px );
	background-size: var( --ifmen-repere-pas ) var( --ifmen-repere-pas );
}

.ifmen-graphique::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var( --wp--preset--color--bleu-marque );
	clip-path: polygon( 58% 0, 100% 0, 100% 100%, 20% 100% );
}

.ifmen-graphique--orange::after {
	background: var( --wp--preset--color--orange-marque );
	clip-path: polygon( 44% 0, 100% 0, 100% 100%, 6% 100% );
}

.ifmen-graphique--inverse {
	background: var( --wp--preset--color--orange-marque );
}

.ifmen-graphique--inverse::after {
	background: var( --wp--preset--color--marine );
	clip-path: polygon( 34% 0, 100% 0, 100% 100%, 0 100% );
}

/* --------------------------------------------------------------------------
   3. En-tête — bandeau utilitaire + barre de navigation
   -------------------------------------------------------------------------- */

.ifmen-topbar {
	background: var( --wp--preset--color--marine );
	color: rgba( 255, 255, 255, 0.72 );
	font-size: 0.84375rem;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.ifmen-topbar p {
	margin: 0;
	color: inherit;
}

.ifmen-topbar a {
	color: inherit;
	text-decoration: none;
	transition: color var( --ifmen-transition );
}

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

.ifmen-topbar__separateur {
	opacity: 0.35;
	margin: 0 0.5rem;
}

/* Le lien Campus : puce ronde orange de 6 px puis libellé blanc */
.ifmen-topbar .ifmen-topbar__campus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-weight: 600;
}

.ifmen-topbar .ifmen-topbar__campus::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --wp--preset--color--orange-marque );
}

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

.ifmen-navbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	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 -20px rgba( 19, 27, 78, 0.4 );
}

/* Une seule rangée à toutes les largeurs : le logo et la gouttière de
   navigation se resserrent au lieu de passer à la ligne. 46 px et 30 px sont
   les valeurs de la maquette, atteintes dès 1280 px. */
.ifmen-navbar__rangee {
	flex-wrap: nowrap !important;
	gap: clamp( 1rem, 2vw, 2.5rem );
}

.ifmen-navbar__droite {
	gap: clamp( 0.75rem, 1.6vw, 1.875rem );
}

.ifmen-navbar .wp-block-site-logo {
	flex: none;
}

.ifmen-navbar .wp-block-site-logo img {
	height: clamp( 32px, 3.6vw, 46px );
	width: auto;
	max-width: none;
	display: block;
}

/* Navigation : l'élément actif porte un soulignement orange de 2 px */
.ifmen-navbar .wp-block-navigation {
	gap: clamp( 0.875rem, 2.35vw, 1.875rem );
}

@media ( max-width: 1279.98px ) {
	.ifmen-navbar .wp-block-navigation {
		font-size: 0.875rem;
	}
}

/* Sept entrées de premier niveau ne tiennent pas sur une ligne sous 1024 px.
   On avance donc le menu hamburger, que WordPress ne déclenche qu'à 600 px :
   ces deux règles ramènent le comportement de base sur la plage 600–1023 px. */
@media ( min-width: 600px ) and ( max-width: 1023.98px ) {
	.ifmen-navbar .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
		position: fixed;
		width: auto;
	}

	.ifmen-navbar .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}
}

.ifmen-navbar .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 3px;
	color: var( --wp--preset--color--encre-doux );
	transition: color var( --ifmen-transition );
}

.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-marque );
	transition: right var( --ifmen-transition );
}

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

.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,
.ifmen-navbar .current-menu-ancestor > .wp-block-navigation-item__content::after {
	right: 0;
}

/* Sous-menus : filet haut orange, pas de rayon */
.ifmen-navbar .wp-block-navigation__submenu-container {
	border: 1px solid var( --ifmen-filet );
	border-top: var( --ifmen-filet-accent ) solid var( --wp--preset--color--orange-marque );
	border-radius: 0;
	box-shadow: var( --wp--preset--shadow--barre );
	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--pierre );
}

/* Menu déroulant plein écran sur mobile.
   WordPress impose un fond blanc au panneau ouvert par
   `.wp-block-navigation:not(.has-background) …is-menu-open:not(.disable-default-overlay)`,
   soit cinq classes. Un sélecteur plus court perdait la partie : le panneau
   restait blanc alors que les entrées passaient en blanc — un écran vide.
   D'où les six classes ci-dessous, qui ne dépendent pas de l'ordre des
   feuilles. Ne pas raccourcir ces sélecteurs. */
.ifmen-navbar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) {
	background-color: var( --wp--preset--color--marine-profond );
	color: #fff;
	padding: clamp( 1.5rem, 6vw, 3rem );
}

.ifmen-navbar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) .wp-block-navigation-item__content {
	color: #fff;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.375rem;
	font-weight: 700;
	padding-block: 0.55rem;
}

/* Les sous-menus deviennent de simples retraits : ni cadre, ni filet orange. */
.ifmen-navbar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	min-width: 0;
}

.ifmen-navbar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.0625rem;
	font-weight: 400;
	color: rgba( 255, 255, 255, 0.78 );
	padding: 0.35rem 0;
}

.ifmen-navbar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: transparent;
	color: #fff;
}

/* La barre de bureau est alignée à droite ; le panneau plein écran, lui, se lit
   à gauche comme le reste du site. Les variables sont celles du bloc
   Navigation, qu'on redéfinit plutôt que de lutter contre. */
.ifmen-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1.5rem;
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	align-items: flex-start;
}

.ifmen-navbar .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) .wp-block-navigation__submenu-container {
	padding-left: 1.25rem;
	padding-right: 0;
}

.ifmen-navbar .wp-block-navigation__responsive-container-close,
.ifmen-navbar .wp-block-navigation__responsive-container-open {
	color: var( --wp--preset--color--marine );
}

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

/* Bouton « Candidater » de l'en-tête : plus compact que le bouton courant */
.ifmen-navbar__cta .wp-block-button__link {
	font-size: 0.90625rem;
	letter-spacing: 0.02em;
	padding: 13px 24px;
}

/* --------------------------------------------------------------------------
   4. Héros de la page d'accueil
   -------------------------------------------------------------------------- */

.ifmen-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 600px;
	display: grid;
	align-content: center;
	padding-block: 3rem;
	background: var( --wp--preset--color--marine );
	color: #fff;
}

.ifmen-hero__fond {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ifmen-hero__fond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% 30%;
	display: block;
}

/* Voile de lisibilité : opaque à gauche, transparent à droite pour dégager
   les visages. Ne pas réduire ces opacités sans revérifier les contrastes. */
.ifmen-hero__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		#131b4e 0%,
		rgba( 19, 27, 78, 0.93 ) 38%,
		rgba( 19, 27, 78, 0.62 ) 62%,
		rgba( 19, 27, 78, 0.22 ) 100%
	);
}

/* Le conteneur porte la gouttière : sa largeur maximale inclut donc les
   56 px de chaque côté, pour retomber sur les 1280 px de la maquette. */
.ifmen-hero__contenu {
	position: relative;
	width: 100%;
	max-width: calc( var( --ifmen-conteneur ) + 2 * var( --ifmen-gouttiere ) );
	margin-inline: auto;
	padding-inline: var( --ifmen-gouttiere );
}

.ifmen-hero__bloc {
	max-width: 760px;
}

.ifmen-hero__titre {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 4.625rem;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0;
}

.ifmen-hero__titre em {
	font-style: italic;
	font-weight: 600;
	color: var( --wp--preset--color--orange-clair );
}

.ifmen-hero__chapo {
	font-size: 1.21875rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.82 );
	max-width: 610px;
	margin: 26px 0 0;
}

.ifmen-hero .wp-block-buttons {
	margin-top: 38px;
	gap: 14px;
}

/* 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.4 );
	color: #fff;
	background: transparent;
	font-weight: 600;
	padding: 15.5px 28px;
}

.ifmen-hero .is-style-outline > .wp-block-button__link:hover,
.ifmen-fond-nuit .is-style-outline > .wp-block-button__link:hover {
	border-color: rgba( 255, 255, 255, 0.7 );
	background: rgba( 255, 255, 255, 0.08 );
	color: #fff;
}

/* Sur l'accueil, tous les écarts sont explicites — comme dans la maquette, où
   chaque bloc porte sa propre marge. On neutralise donc le blockGap de
   l'éditeur, que les marges déclarées ci-dessous reprennent à leur compte. */
.ifmen-accueil :where( .wp-block-group ) > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   5. Barre de chiffres — chevauche le héros de 56 px
   -------------------------------------------------------------------------- */

.ifmen-chiffres {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	position: relative;
	z-index: 2;
	background: #fff;
	box-shadow: var( --wp--preset--shadow--barre );
}

/* Le chevauchement du héros. Deux classes plutôt qu'une : la remise à zéro des
   marges que WordPress émet pour les mises en page « flow » a la même
   spécificité qu'un sélecteur de classe simple, et passerait devant. */
.ifmen-accueil .ifmen-chiffres {
	margin-block-start: -56px;
}

.ifmen-chiffre {
	padding: 34px 30px;
	border-right: 1px solid var( --ifmen-filet-doux );
}

.ifmen-chiffre:last-child {
	border-right: 0;
}

.ifmen-chiffres dt,
.ifmen-chiffres dd {
	margin: 0;
}

.ifmen-chiffre__etiquette {
	display: block;
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.71875rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-chiffre__valeur {
	display: block;
	margin-top: 8px;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1.1;
	color: var( --wp--preset--color--bleu-marque );
}

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

/* --------------------------------------------------------------------------
   6. En-tête de section — titre à gauche, lien d'action à droite
   -------------------------------------------------------------------------- */

.ifmen-tete-section {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 44px;
}

.ifmen-tete-section h2 {
	margin: 0;
}

.ifmen-tete-section > div:first-child {
	max-width: 42rem;
}

/* Sous-titre de pôle : sépare les deux familles de parcours — métiers de
   l'enseignement, métiers techniques et numériques — à l'intérieur d'une même
   suite de grilles. Filet orange à gauche, comme l'encart d'accréditation,
   pour marquer la coupure sans peser autant qu'un en-tête de section. */
.ifmen-tete-pole {
	margin: 56px 0 20px;
	padding-left: 14px;
	border-left: var( --ifmen-filet-accent ) solid var( --wp--preset--color--orange-marque );
	line-height: 1.25;
	color: var( --wp--preset--color--marine );
}

.ifmen-tete-pole:first-child {
	margin-top: 0;
}

h3.ifmen-tete-pole {
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   7. Section « Qui sommes-nous » — mosaïque graphique
   -------------------------------------------------------------------------- */

.ifmen-presentation {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 70px;
	align-items: start;
}

.ifmen-presentation h2 {
	margin: 0;
}

.ifmen-presentation p {
	color: var( --wp--preset--color--gris-texte );
}

/* Encart d'accréditation : filet gauche bleu de 3 px sur fond pierre */
.ifmen-encart {
	margin-top: 28px;
	padding: 20px 24px;
	background: var( --wp--preset--color--pierre );
	border-left: var( --ifmen-filet-accent ) solid var( --wp--preset--color--bleu-marque );
	font-size: 1rem;
	font-weight: 600;
	color: var( --wp--preset--color--bleu-marque );
}

.ifmen-encart--orange {
	border-left-color: var( --wp--preset--color--orange-marque );
	color: var( --wp--preset--color--gris-texte );
	font-weight: 400;
}

.ifmen-encart--creme {
	background: var( --wp--preset--color--creme-alerte );
	border-left-color: var( --wp--preset--color--orange-marque );
	color: var( --wp--preset--color--gris-texte );
	font-weight: 400;
}

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

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

/* Mosaïque : trois panneaux graphiques, en attente des photos officielles */
.ifmen-mosaique {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 230px 170px;
	gap: 14px;
}

.ifmen-mosaique > :first-child {
	grid-column: 1 / -1;
}

/* La grande case porte la photo de la façade ; les deux petites gardent le
   panneau graphique tant que les photos d'intérieur manquent. Le rapport de la
   case (2,33) est celui du recadrage produit par content/build-images.py, donc
   « cover » ne rogne presque rien. */
.ifmen-mosaique__photo {
	display: block;
	overflow: hidden;
}

.ifmen-mosaique__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   8. Fiches formation
   -------------------------------------------------------------------------- */

.ifmen-fiches {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
	align-items: stretch;
}

.ifmen-fiche {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var( --ifmen-filet );
	transition: border-color var( --ifmen-transition ), transform var( --ifmen-transition );
}

.ifmen-fiche:hover,
.ifmen-fiche:has( a:focus-visible ) {
	border-color: var( --wp--preset--color--bordure-champ );
	transform: translateY( -2px );
}

/* Visuel graphique de 132 px, marqué par le pictogramme de la discipline */
.ifmen-fiche__visuel {
	height: 132px;
	flex: none;
	display: flex;
	align-items: flex-end;
	padding: 16px;
}

.ifmen-fiche__glyphe {
	width: 40px;
	height: 40px;
	color: #fff;
	flex: none;
}

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

.ifmen-fiche__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 20px 24px;
}

.ifmen-fiche__niveau {
	display: block;
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.65625rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ifmen-orange-texte );
}

.ifmen-fiche__titre {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--encre );
	margin: 12px 0 0;
}

/* Le lien du titre est étendu à toute la fiche : une seule cible cliquable,
   nommée par le titre. Cf. README §5 sur wpautop. */
.ifmen-fiche__titre a {
	color: inherit;
	text-decoration: none;
}

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

.ifmen-fiche__resume {
	flex: 1;
	margin: 10px 0 0;
	font-size: 0.90625rem;
	line-height: 1.55;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-fiche__modalite {
	display: block;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var( --ifmen-filet-doux );
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-fiche__lire {
	display: block;
	margin-top: 18px;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 0.875rem;
	font-weight: 700;
	color: var( --wp--preset--color--bleu-marque );
}

/* 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 {
	color: var( --wp--preset--color--orange-marque );
}

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

/* 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--bleu-marque );
	outline-offset: 2px;
}

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

@supports not selector( :has( a ) ) {
	.ifmen-fiche__titre a:focus-visible {
		outline: 3px solid var( --wp--preset--color--bleu-marque );
		outline-offset: 3px;
	}
}

.ifmen-vide {
	color: var( --wp--preset--color--gris-doux );
}

/* Barre de filtres de la page Formations */
.ifmen-filtres {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	border-bottom: 1px solid var( --ifmen-filet );
	margin-bottom: 32px;
}

.ifmen-filtres__liste {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ifmen-filtre {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var( --wp--preset--color--bordure-champ );
	border-radius: 100px;
	font-size: 0.90625rem;
	color: var( --wp--preset--color--gris-texte );
	text-decoration: none;
	transition: background var( --ifmen-transition ), color var( --ifmen-transition ), border-color var( --ifmen-transition );
}

.ifmen-filtre:hover {
	border-color: var( --wp--preset--color--bleu-marque );
	color: var( --wp--preset--color--bleu-marque );
}

.ifmen-filtre[ aria-current="true" ],
.ifmen-filtre.est-actif {
	background: var( --wp--preset--color--bleu-marque );
	border-color: var( --wp--preset--color--bleu-marque );
	color: #fff;
}

.ifmen-filtres__compte {
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.71875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gris-doux );
}

/* --------------------------------------------------------------------------
   9. « Ce qui fait la différence » — grille à filets sur fond marine
   -------------------------------------------------------------------------- */

.ifmen-atouts-section {
	background: var( --wp--preset--color--marine );
	color: #fff;
}

.ifmen-atouts-section h2 {
	color: #fff;
	margin: 0 0 52px;
}

/* Les filets naissent de la gouttière : un fond clair de 1 px sous les cellules. */
.ifmen-atouts {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1px;
	background: rgba( 255, 255, 255, 0.14 );
	list-style: none;
	margin: 0;
	padding: 0;
}

.ifmen-atout {
	background: var( --wp--preset--color--marine );
	padding: 32px 30px 34px;
}

.ifmen-atout__numero {
	display: block;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--orange-marque );
}

.ifmen-atout__titre {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 16px 0 0;
}

.ifmen-atout__texte {
	margin: 10px 0 0;
	font-size: 0.96875rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.7 );
}

/* Repli pour l'ancien balisage `<strong>` + texte, encore possible en base */
.ifmen-atout__texte strong {
	display: block;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   10. Campus numérique
   -------------------------------------------------------------------------- */

.ifmen-campus {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 64px;
	align-items: center;
}

.ifmen-campus h2 {
	margin: 0;
}

.ifmen-campus__liste {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.ifmen-campus__liste li {
	position: relative;
	padding-left: 30px;
	font-size: 1rem;
	line-height: 1.5;
	color: var( --wp--preset--color--encre-doux );
}

.ifmen-campus__liste li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var( --wp--preset--color--bleu-marque );
	color: #fff;
	font-size: 0.6875rem;
	line-height: 1;
}

/* Écran d'ordinateur : cadre épais sans bord bas, puis deux barres de socle */
.ifmen-campus__cadre {
	background: var( --wp--preset--color--pierre );
	padding: 38px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ifmen-campus__ecran {
	width: 100%;
	border: 10px solid var( --wp--preset--color--encre-doux );
	border-bottom-width: 0;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

.ifmen-campus__vue {
	height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 32px;
}

/* Trois filets suggèrent une liste de cours, sans imiter une capture d'écran */
.ifmen-campus__vue span {
	display: block;
	height: 10px;
	background: rgba( 255, 255, 255, 0.16 );
}

.ifmen-campus__vue span:nth-child( 1 ) { width: 58%; }
.ifmen-campus__vue span:nth-child( 2 ) { width: 84%; }
.ifmen-campus__vue span:nth-child( 3 ) { width: 40%; }

.ifmen-campus__pied {
	width: 112%;
	height: 14px;
	background: var( --wp--preset--color--encre-doux );
	border-radius: 0 0 8px 8px;
}

.ifmen-campus__socle {
	width: 60%;
	height: 5px;
	background: var( --wp--preset--color--marine );
	border-radius: 0 0 4px 4px;
}

.ifmen-campus__url {
	display: inline-block;
	margin-top: 0.5rem;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 0.875rem;
	font-weight: 700;
	color: var( --wp--preset--color--gris-doux );
	border-bottom: 1px dashed var( --wp--preset--color--bordure-champ );
	text-decoration: none;
	padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   11. Les dates à retenir
   -------------------------------------------------------------------------- */

.ifmen-dates {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
}

.ifmen-date {
	display: flex;
	flex-direction: column;
	min-height: 186px;
	padding: 26px 24px 30px;
	background: #fff;
	border-top: var( --ifmen-filet-accent ) solid var( --wp--preset--color--bleu-marque );
}

.ifmen-date__valeur {
	display: block;
	margin-top: 14px;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--bleu-marque );
}

.ifmen-date__titre {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.09375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --wp--preset--color--encre );
	margin: 12px 0 0;
}

.ifmen-date__texte {
	flex: 1;
	margin: 8px 0 0;
	font-size: 0.90625rem;
	line-height: 1.55;
	color: var( --wp--preset--color--gris-doux );
}

/* --------------------------------------------------------------------------
   12. Témoignage en bandeau
   -------------------------------------------------------------------------- */

.ifmen-temoignage-bandeau {
	display: grid;
	grid-template-columns: 1fr 258px;
	gap: 56px;
	align-items: center;
	background: var( --wp--preset--color--pierre );
	padding: 48px 52px;
}

.ifmen-temoignage__citation {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.6875rem;
	font-weight: 500;
	line-height: 1.38;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--encre );
	margin: 0;
}

.ifmen-temoignage__signature {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
	font-style: normal;
}

/* Monogramme : tient la place du portrait tant qu'aucune photo n'est fournie */
.ifmen-temoignage__monogramme {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var( --wp--preset--color--marine );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ifmen-temoignage__nom {
	display: block;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1rem;
	font-weight: 700;
	color: var( --wp--preset--color--encre );
}

.ifmen-temoignage__role {
	display: block;
	margin-top: 2px;
	font-size: 0.90625rem;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-temoignage__chiffre {
	border-left: 1px solid var( --ifmen-filet-pierre );
	padding-left: 40px;
}

.ifmen-temoignage__chiffre b {
	display: block;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--bleu-marque );
}

.ifmen-temoignage__chiffre p {
	margin: 10px 0 0;
	font-size: 0.96875rem;
	line-height: 1.55;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-temoignage__chiffre .ifmen-lien-action {
	margin-top: 22px;
	font-size: 0.9375rem;
}

/* Ancienne grille de trois témoignages, conservée pour les pages intérieures */
.ifmen-temoignages {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 18rem ), 1fr ) );
	gap: 0;
}

.ifmen-temoignage {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 0 36px;
	border-left: 1px solid var( --ifmen-filet-pierre );
}

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

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

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

.ifmen-temoignage__auteur b {
	display: block;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1rem;
	font-weight: 700;
	color: var( --wp--preset--color--encre );
}

/* --------------------------------------------------------------------------
   13. Bandeau d'appel à candidature
   -------------------------------------------------------------------------- */

.ifmen-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var( --wp--preset--color--orange-marque );
}

.ifmen-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: repeating-linear-gradient(
		135deg,
		rgba( 255, 255, 255, 0.14 ) 0 2px,
		transparent 2px 14px
	);
}

/* Sur l'orange de marque, le blanc ne donne que 2,6:1. Tout le texte de ce
   bandeau passe donc en marine profond, seul couple lisible (6,1:1). */
.ifmen-cta__contenu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 60px;
	padding-block: 72px;
}

.ifmen-cta__texte {
	max-width: 640px;
}

.ifmen-cta .ifmen-etiquette {
	font-size: 0.71875rem;
	color: var( --wp--preset--color--marine-profond );
	letter-spacing: 0.14em;
	opacity: 0.85;
}

.ifmen-cta h2 {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: var( --wp--preset--color--marine-profond );
	margin: 16px 0 0;
}

.ifmen-cta p:not( .ifmen-etiquette ) {
	margin: 16px 0 0;
	font-size: 1.09375rem;
	line-height: 1.6;
	color: rgba( 19, 27, 78, 0.86 );
}

.ifmen-cta .wp-block-buttons {
	flex: none;
	flex-direction: column;
	gap: 12px;
}

.ifmen-cta .wp-block-button__link {
	background: var( --wp--preset--color--marine );
	color: #fff;
	padding: 18px 32px;
	text-align: center;
	justify-content: center;
	width: 100%;
}

.ifmen-cta .wp-block-button__link:hover {
	background: var( --wp--preset--color--marine-profond );
	color: #fff;
}

.ifmen-cta .is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1.5px solid rgba( 19, 27, 78, 0.6 );
	color: var( --wp--preset--color--marine-profond );
	font-weight: 600;
	padding: 16.5px 32px;
}

.ifmen-cta .is-style-outline > .wp-block-button__link:hover {
	background: rgba( 19, 27, 78, 0.08 );
	border-color: var( --wp--preset--color--marine-profond );
	color: var( --wp--preset--color--marine-profond );
}

/* --------------------------------------------------------------------------
   14. Bannière des pages intérieures
   -------------------------------------------------------------------------- */

/* Le gabarit est monté en couches, du fond vers l'avant : aplat + grille de
   repères sur le conteneur, un ou deux coins diagonaux et la trame dans
   `__decor`, enfin le dégradé de lisibilité. Le tout en z-index négatif sous un
   `isolation: isolate`, pour rester derrière le texte sans le décrocher.

   Chaque page a sa déclinaison, choisie par la classe `page-<slug>` du body
   (cf. `ifmen_classe_body_slug`). Les valeurs par défaut sont celles d'À propos. */
.ifmen-banniere,
.ifmen-fond-nuit,
.ifmen-chapeau {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 270px;
	display: grid;
	align-content: center;
	background-color: var( --wp--preset--color--marine );
	background-image:
		linear-gradient( var( --ifmen-repere-trait ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --ifmen-repere-trait ) 1px, transparent 1px );
	background-size: var( --ifmen-repere-pas ) var( --ifmen-repere-pas );
	color: #fff;
}

.ifmen-banniere__decor {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none;
	pointer-events: none;
}

.ifmen-banniere__coin {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: var( --ifmen-coin-largeur, 460px );
}

.ifmen-banniere__coin--arriere {
	background: var( --wp--preset--color--orange-marque );
	clip-path: polygon( 40% 0, 100% 0, 100% 100%, 0 100% );
}

.ifmen-banniere__coin--avant {
	background-color: var( --wp--preset--color--bleu-marque );
	background-image: repeating-linear-gradient(
		135deg,
		rgba( 255, 255, 255, 0.1 ) 0 3px,
		transparent 3px 16px
	);
	clip-path: polygon( 62% 0, 100% 0, 100% 100%, 22% 100% );
}

/* Dégradé de lisibilité, par-dessus les coins. Ne pas réduire ces opacités
   sans revérifier le contraste du texte blanc. */
.ifmen-banniere__decor::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		96deg,
		#1b2560 0%,
		rgba( 27, 37, 96, 0.95 ) 46%,
		rgba( 27, 37, 96, 0 ) 78%
	);
}

.ifmen-banniere__contenu {
	position: relative;
	width: 100%;
	max-width: calc( var( --ifmen-conteneur ) + 2 * var( --ifmen-gouttiere ) );
	margin-inline: auto;
	padding-inline: var( --ifmen-gouttiere );
}

.ifmen-banniere :is( h1, .wp-block-post-title ) {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 2.875rem;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 12px 0 0;
}

.ifmen-banniere__soustitre {
	max-width: 560px;
	margin: 12px 0 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.8 );
}

.ifmen-banniere .wp-block-post-excerpt__excerpt {
	max-width: 560px;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.8 );
}

.ifmen-banniere .wp-block-buttons {
	margin-top: 28px;
}

/* Fil d'Ariane */
.ifmen-fil {
	font-size: 0.84375rem;
	line-height: 1.4;
	color: rgba( 255, 255, 255, 0.6 );
	margin: 0;
}

.ifmen-fil ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ifmen-fil li {
	display: flex;
	align-items: center;
}

.ifmen-fil a {
	color: inherit;
	text-decoration: none;
}

.ifmen-fil a:hover {
	color: #fff;
	text-decoration: underline;
}

.ifmen-fil__separateur {
	color: var( --wp--preset--color--orange-marque );
	margin: 0 0.4rem;
}

/* — Déclinaison Formations : le bleu passe derrière, l'orange devant — */
.page-formations .ifmen-banniere {
	--ifmen-coin-largeur: 520px;
}

.page-formations .ifmen-banniere__coin--arriere {
	background: var( --wp--preset--color--bleu-marque );
	clip-path: polygon( 30% 0, 100% 0, 100% 100%, 0 100% );
}

.page-formations .ifmen-banniere__coin--avant {
	background-color: var( --wp--preset--color--orange-marque );
	background-image: repeating-linear-gradient(
		135deg,
		rgba( 255, 255, 255, 0.12 ) 0 3px,
		transparent 3px 16px
	);
	clip-path: polygon( 70% 0, 100% 0, 100% 100%, 34% 100% );
}

.page-formations .ifmen-banniere__decor::after {
	background: linear-gradient(
		96deg,
		#1b2560 0%,
		rgba( 27, 37, 96, 0.95 ) 46%,
		rgba( 27, 37, 96, 0 ) 80%
	);
}

/* — Déclinaison Admission : marine et orange inversés. C'est la page de
     conversion, elle doit se distinguer des pages informatives.
     Le dégradé de lisibilité est un orange plus sombre que le `#C25F0C` de la
     maquette : celui-ci ne donnait que 4,25:1 avec le blanc, sous le seuil AA
     pour le sous-titre de 17 px. Cf. l'écart n° 1 du dossier. — */
/* Le voile de lisibilité est ici l'aplat de fond, et l'orange de marque est
   ramené par un dégradé sur la droite — au lieu de l'inverse. Le résultat est
   identique à l'œil, mais le fond réellement derrière le texte devient celui
   de l'élément : `deploy/qa.py` peut alors mesurer le contraste, ce qu'un
   calque posé par-dessus lui interdisait. */
.page-admission .ifmen-banniere {
	--ifmen-coin-largeur: 600px;
	--ifmen-repere-trait: rgba( 255, 255, 255, 0.1 );
	background-color: var( --ifmen-orange-voile );
	background-image:
		linear-gradient( var( --ifmen-repere-trait ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --ifmen-repere-trait ) 1px, transparent 1px ),
		linear-gradient( 96deg, rgba( 244, 128, 31, 0 ) 55%, var( --wp--preset--color--orange-marque ) 85% );
	background-size: var( --ifmen-repere-pas ) var( --ifmen-repere-pas ),
		var( --ifmen-repere-pas ) var( --ifmen-repere-pas ), auto;
}

.page-admission .ifmen-banniere__coin--arriere {
	display: none;
}

.page-admission .ifmen-banniere__coin--avant {
	background-color: var( --wp--preset--color--marine );
	clip-path: polygon( 26% 0, 100% 0, 100% 100%, 0 100% );
}

/* Plus de voile en calque : l'aplat de fond joue ce rôle (voir ci-dessus). */
.page-admission .ifmen-banniere__decor::after {
	content: none;
}

.page-admission .ifmen-fil {
	color: rgba( 255, 255, 255, 0.78 );
}

.page-admission .ifmen-fil__separateur {
	color: #fff;
}

.page-admission .ifmen-banniere__soustitre {
	max-width: 600px;
	color: rgba( 255, 255, 255, 0.92 );
}

/* — Déclinaison Contact : plus basse, un seul coin orange — */
.page-contact .ifmen-banniere {
	--ifmen-coin-largeur: 400px;
	min-height: 230px;
}

.page-contact .ifmen-banniere__coin--arriere {
	display: none;
}

.page-contact .ifmen-banniere__coin--avant {
	background-color: var( --wp--preset--color--orange-marque );
	background-image: repeating-linear-gradient(
		135deg,
		rgba( 255, 255, 255, 0.12 ) 0 3px,
		transparent 3px 16px
	);
	clip-path: polygon( 48% 0, 100% 0, 100% 100%, 0 100% );
}

.page-contact .ifmen-banniere__decor::after {
	background: linear-gradient(
		96deg,
		#1b2560 0%,
		rgba( 27, 37, 96, 0.95 ) 52%,
		rgba( 27, 37, 96, 0 ) 82%
	);
}

/* Anciennes classes de fond sombre, encore posées par quelques gabarits */
.ifmen-fond-nuit :is( h1, h2, h3, h4, h5 ) {
	color: #fff;
}

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

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

/* --------------------------------------------------------------------------
   15. Mise en page des pages intérieures
   -------------------------------------------------------------------------- */

/* Corps de page : la gouttière est portée par le conteneur, les enfants
   s'alignent sur les 1168 px de la grille. */
.ifmen-corps {
	background: var( --wp--preset--color--blanc );
	padding: 64px var( --ifmen-gouttiere ) 88px;
}

.ifmen-corps > * {
	max-width: var( --ifmen-conteneur );
	margin-inline: auto;
}

/* Les titres de section des pages intérieures sont à 30 px, contre 41 px sur
   l'accueil (cf. l'échelle typographique du dossier de remise). Les titres qui
   servent d'étiquette — les cartes mission et vision — gardent leur taille. */
.ifmen-corps h2:not( .ifmen-etiquette ):not( .ifmen-surtitre ) {
	font-size: 1.875rem;
}

.ifmen-corps--large > * {
	max-width: var( --ifmen-conteneur );
}

/* Colonne de lecture : 720 px, alignée sur la gouttière comme le titre de la
   bannière plutôt que centrée dans le vide. */
.ifmen-corps > .ifmen-colonne {
	max-width: 720px;
	margin-inline: 0;
}

/* Admission et Contact tiennent toute la grille : leur mise en page est en
   deux colonnes, pas en colonne de lecture. */
.page-admission .ifmen-corps > .ifmen-colonne,
.page-contact .ifmen-corps > .ifmen-colonne {
	max-width: var( --ifmen-conteneur );
	margin-inline: auto;
}

/* La carte d'accès occupe la hauteur prévue par la maquette */
.page-contact .ifmen-carte,
.page-contact .ifmen-carte__declencheur,
.page-contact .ifmen-carte iframe {
	min-height: 400px;
}

/* — Sommaire latéral (page À propos) — */
.ifmen-avec-sommaire {
	display: grid;
	grid-template-columns: 236px 1fr;
	gap: 56px;
	align-items: start;
}

.ifmen-avec-sommaire > .ifmen-colonne {
	max-width: 720px;
	margin-inline: 0;
}

.ifmen-lateral {
	position: sticky;
	top: calc( var( --ifmen-navbar-h ) + 24px );
}

.ifmen-sommaire__titre {
	margin: 0;
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-sommaire ol {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	border-left: 1px solid var( --ifmen-filet );
}

.ifmen-sommaire li {
	margin-left: -1px;
	border-left: 2px solid transparent;
}

.ifmen-sommaire a {
	display: block;
	padding: 9px 0 9px 16px;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var( --wp--preset--color--gris-texte );
	text-decoration: none;
	transition: color var( --ifmen-transition );
}

.ifmen-sommaire a:hover {
	color: var( --wp--preset--color--bleu-marque );
}

.ifmen-sommaire li.est-actif {
	border-left-color: var( --wp--preset--color--orange-marque );
}

.ifmen-sommaire li.est-actif a {
	color: var( --wp--preset--color--bleu-marque );
	font-weight: 600;
}

.ifmen-encart-lateral {
	margin-top: 28px;
	padding: 22px 20px;
	background: var( --wp--preset--color--pierre );
}

.ifmen-encart-lateral__titre {
	margin: 0;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1rem;
	font-weight: 700;
	color: var( --wp--preset--color--encre );
}

.ifmen-encart-lateral__texte {
	margin: 8px 0 0;
	font-size: 0.90625rem;
	line-height: 1.55;
	color: var( --wp--preset--color--gris-doux );
}

/* — Chapô de page intérieure — */
.ifmen-chapo {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.3125rem;
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--encre-doux );
	margin: 0;
}

/* — Deux cartes côte à côte : mission (marine) et vision (pierre) — */
.ifmen-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ifmen-bloc-marine {
	background: var( --wp--preset--color--marine );
	color: #fff;
	padding: 32px 28px 34px;
}

.ifmen-bloc-marine .ifmen-etiquette {
	color: var( --wp--preset--color--orange-pale );
}

.ifmen-bloc-marine p:not( .ifmen-etiquette ) {
	margin: 14px 0 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.9 );
}

.ifmen-bloc-pierre {
	background: var( --wp--preset--color--pierre );
	padding: 32px 28px 34px;
	border-top: var( --ifmen-filet-accent ) solid var( --wp--preset--color--orange-marque );
}

.ifmen-bloc-pierre p:not( .ifmen-etiquette ) {
	margin: 14px 0 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var( --wp--preset--color--encre-doux );
}

/* — Liste de valeurs numérotées — */
.ifmen-valeurs {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.ifmen-valeurs li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid var( --ifmen-filet-doux );
}

.ifmen-valeurs__numero {
	padding-top: 3px;
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.8125rem;
	color: var( --ifmen-orange-texte );
}

.ifmen-valeurs b {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.09375rem;
	font-weight: 700;
	color: var( --wp--preset--color--encre );
}

.ifmen-valeurs span {
	font-size: 1.03125rem;
	line-height: 1.6;
	color: var( --wp--preset--color--gris-doux );
}

/* — Agréments — */
.ifmen-agrements {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

.ifmen-agrement {
	flex: 1 1 12rem;
	border: 1px solid var( --ifmen-filet );
	padding: 22px 24px;
}

.ifmen-agrement__nom {
	margin: 0;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--bleu-marque );
}

.ifmen-agrement p:not( .ifmen-agrement__nom ) {
	margin: 6px 0 0;
	font-size: 0.90625rem;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-agrement--pierre {
	border: 0;
	background: var( --wp--preset--color--pierre );
}

.ifmen-agrement--pierre p {
	margin: 0;
	font-size: 0.90625rem;
	line-height: 1.5;
	color: var( --wp--preset--color--gris-doux );
}

/* — Équipe : texte + panneau graphique — */
.ifmen-equipe {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	margin-top: 20px;
	align-items: start;
}

.ifmen-equipe__visuel {
	height: 190px;
}

/* — Liste à puces rondes bleues, partagée par plusieurs pages — */
.ifmen-liste-cochee,
.ifmen-campus__liste {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ifmen-liste-cochee li {
	position: relative;
	padding-left: 30px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var( --wp--preset--color--encre-doux );
}

.ifmen-liste-cochee li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var( --wp--preset--color--bleu-marque );
	color: #fff;
	font-size: 0.6875rem;
	line-height: 1;
}

/* — Page Admission : contenu + colonne latérale de 340 px — */
.ifmen-admission {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 56px;
	align-items: start;
}

.ifmen-etapes {
	margin-top: 24px;
}

.ifmen-etape {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px solid var( --ifmen-filet-doux );
}

/* Numéro volontairement très clair : il ordonne sans capter l'attention. */
.ifmen-etape__numero {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 2.125rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #e3e1db;
}

.ifmen-etape__titre {
	margin: 0;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --wp--preset--color--encre );
}

.ifmen-etape p {
	margin: 7px 0 0;
	font-size: 1.03125rem;
	line-height: 1.6;
	color: var( --wp--preset--color--gris-doux );
}

.ifmen-lateral-blocs {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ifmen-bloc-marine .ifmen-liste-tirets {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.ifmen-liste-tirets li {
	position: relative;
	padding-left: 20px;
	font-size: 1rem;
	line-height: 1.45;
	color: rgba( 255, 255, 255, 0.88 );
}

.ifmen-liste-tirets li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var( --wp--preset--color--orange-marque );
}

.ifmen-bloc-borde {
	border: 1px solid var( --ifmen-filet );
	padding: 26px 24px 28px;
}

.ifmen-bloc-borde p:not( .ifmen-etiquette ),
.ifmen-bloc-clair p:not( .ifmen-etiquette ) {
	margin: 14px 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var( --wp--preset--color--gris-texte );
}

.ifmen-bloc-clair {
	background: var( --wp--preset--color--pierre );
	padding: 26px 24px 28px;
}

/* — Page Contact : quatre cartes de coordonnées — */
.ifmen-coordonnees {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
}

.ifmen-coordonnee {
	min-height: 150px;
	padding: 26px 24px 30px;
	background: var( --wp--preset--color--pierre );
	border-top: var( --ifmen-filet-accent ) solid var( --wp--preset--color--bleu-marque );
}

.ifmen-coordonnee__valeur {
	display: block;
	margin-top: 14px;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	color: var( --wp--preset--color--encre );
}

.ifmen-coordonnee__valeur a {
	color: inherit;
	text-decoration: none;
}

.ifmen-coordonnee__valeur a:hover {
	color: var( --wp--preset--color--bleu-marque );
}

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

.ifmen-contact-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: start;
}

/* — Bandeau de conseil, en bas des pages Formations et fiche formation — */
.ifmen-bandeau-conseil {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
	margin-top: 56px;
	padding: 38px 44px;
	background: var( --wp--preset--color--pierre );
}

.ifmen-bandeau-conseil__titre {
	margin: 0;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--encre );
}

.ifmen-bandeau-conseil__texte {
	margin: 8px 0 0;
	font-size: 1.03125rem;
	line-height: 1.5;
	color: var( --wp--preset--color--gris-doux );
}

/* Bouton bleu autonome (hors bloc Bouton) */
.ifmen-bouton-bleu {
	flex: none;
	display: inline-block;
	padding: 16px 28px;
	border-radius: 2px;
	background: var( --wp--preset--color--bleu-marque );
	color: #fff;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 0.96875rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background var( --ifmen-transition );
}

.ifmen-bouton-bleu:hover {
	background: var( --wp--preset--color--marine );
	color: #fff;
}

/* Bouton contour sur fond clair */
.ifmen-bouton-contour {
	display: inline-block;
	padding: 15.5px 26px;
	border: 1.5px solid var( --wp--preset--color--bordure-champ );
	border-radius: 2px;
	color: var( --wp--preset--color--bleu-marque );
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var( --ifmen-transition ), background var( --ifmen-transition );
}

.ifmen-bouton-contour:hover {
	border-color: var( --wp--preset--color--bleu-marque );
	background: var( --wp--preset--color--pierre );
	color: var( --wp--preset--color--bleu-marque );
}

.ifmen-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 36px;
}

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

.ifmen-prose > * + :is( h2, h3 ) {
	margin-top: 44px;
}

.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-marque );
}

/* Les liens dans le corps du texte restent soulignés : la couleur seule ne
   suffit pas à les signaler (WCAG 1.4.1). Ailleurs, le soulignement est ôté. */
.ifmen-prose p a,
.ifmen-prose li a,
.entry-content p a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* Encadré d'information — frais, pièces à fournir, dates */
.ifmen-encadre {
	border: 1px solid var( --ifmen-filet );
	border-top: var( --ifmen-filet-accent ) solid var( --wp--preset--color--bleu-marque );
	background: var( --wp--preset--color--pierre );
	padding: 28px 30px;
}

.ifmen-encadre-sable,
.ifmen-encadre--sable {
	border: 1px solid var( --ifmen-filet );
	border-top: var( --ifmen-filet-accent ) solid var( --wp--preset--color--orange-marque );
	background: var( --wp--preset--color--pierre );
	padding: 28px 30px;
}

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

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

/* 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: 18px 20px;
	border-left: 1px solid var( --ifmen-filet );
}

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

.ifmen-repere dt {
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gris-doux );
	margin-bottom: 0.5rem;
}

.ifmen-repere dd {
	margin: 0;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--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--pierre );
	min-height: 400px;
	display: grid;
}

.ifmen-carte__declencheur {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 400px;
	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--pierre-fonce );
}

.ifmen-carte__action {
	display: inline-block;
	padding: 13px 24px;
	background: #fff;
	border: 1px solid var( --wp--preset--color--bordure-champ );
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1rem;
	font-weight: 700;
	color: var( --wp--preset--color--bleu-marque );
}

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

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

/* 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: 20px 0;
	cursor: pointer;
	list-style: none;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--encre );
	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( --ifmen-orange-texte );
	transition: transform var( --ifmen-transition );
}

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

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

.ifmen-faq__reponse {
	padding: 0 0 24px;
	max-width: 45rem;
}

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

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

.ifmen-articles .wp-block-post {
	background: #fff;
	border: 1px solid var( --ifmen-filet );
	padding: 20px 20px 24px;
}

.ifmen-articles .wp-block-post-title {
	font-size: 1.125rem;
	line-height: 1.25;
	margin: 12px 0 10px;
}

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

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

.ifmen-articles .wp-block-post-date {
	font-family: var( --wp--preset--font-family--plex-mono );
	font-size: 0.65625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --ifmen-orange-texte );
}

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

.ifmen-articles .wp-block-post-featured-image {
	margin: -20px -20px 0;
}

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

/* --------------------------------------------------------------------------
   17. Pied de page
   -------------------------------------------------------------------------- */

.ifmen-footer {
	background: var( --wp--preset--color--marine-profond );
	color: rgba( 255, 255, 255, 0.68 );
	font-size: 0.96875rem;
}

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

/* Le bloc « Colonnes » de WordPress répartit en flex, ce qui écrase la dernière
   colonne quand la gouttière est large. Une grille tient les proportions
   1,5 / 1 / 1 / 1,2 de la maquette. */
.ifmen-footer .wp-block-columns {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 48px;
}

.ifmen-footer .wp-block-column {
	flex-basis: auto !important;
}

.ifmen-footer__titre {
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 20px;
}

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

.ifmen-footer__mention {
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.45 ) !important;
}

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

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

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

.ifmen-footer li + li {
	margin-top: 11px;
}

.ifmen-footer__campus {
	color: var( --wp--preset--color--orange-clair ) !important;
}

/* Le pied de page utilise la version du logo dont la mention est en blanc :
   elle se pose directement sur le marine, sans la plaque claire que réclamait
   la version à mention bleue. L'en-tête, sur fond blanc, garde celle-là. */
.ifmen-footer__logo {
	display: inline-block;
	margin-bottom: 22px;
}

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

.ifmen-footer .is-style-outline > .wp-block-button__link,
.ifmen-footer__bouton {
	display: inline-block;
	margin-top: 22px;
	padding: 12px 22px;
	border: 1.5px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 2px;
	background: transparent;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 0.90625rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background var( --ifmen-transition ), border-color var( --ifmen-transition );
}

.ifmen-footer .is-style-outline > .wp-block-button__link:hover,
.ifmen-footer__bouton:hover {
	background: rgba( 255, 255, 255, 0.08 );
	border-color: rgba( 255, 255, 255, 0.6 );
	color: #fff;
}

.ifmen-footer__bas {
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
	font-size: 0.84375rem;
	color: rgba( 255, 255, 255, 0.5 );
}

.ifmen-footer__bas p {
	color: rgba( 255, 255, 255, 0.5 );
}

/* --------------------------------------------------------------------------
   18. 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: #0f7a41; /* vert WhatsApp assombri : 5,4:1 avec le libellé blanc */
	color: #fff;
	box-shadow: 0 6px 22px -6px rgba( 4, 50, 26, 0.5 );
	text-decoration: none;
	font-family: var( --wp--preset--font-family--archivo );
	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;
}

/* --------------------------------------------------------------------------
   19. 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;
	}
}

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

.fluentform .ff-el-input--label label,
.ifmen-formulaire label {
	font-family: var( --wp--preset--font-family--source-sans );
	font-size: 0.84375rem;
	font-weight: 600;
	color: var( --wp--preset--color--gris-texte );
}

.fluentform .ff-el-form-control {
	min-height: 48px;
	border: 1px solid var( --wp--preset--color--bordure-champ );
	border-radius: 0;
	padding: 0.75rem 0.9rem;
	font-family: var( --wp--preset--font-family--source-sans );
	font-size: 0.96875rem;
	color: var( --wp--preset--color--gris-texte );
	background: #fff;
	transition: border-color var( --ifmen-transition ), box-shadow var( --ifmen-transition );
}

/* #9A9EAE ne donne que 2,7:1 sur blanc : le texte indicatif est assombri. */
.fluentform .ff-el-form-control::placeholder {
	color: #6c7185;
	opacity: 1;
}

.fluentform .ff-el-form-control:focus {
	border-color: var( --wp--preset--color--bleu-marque );
	box-shadow: 0 0 0 3px rgba( 43, 57, 144, 0.12 );
	outline: none;
}

/* Couleurs des boutons d'envoi : Fluent Forms émet pour chaque formulaire une
   feuille plus spécifique que celle du thème. La source de vérité est donc
   `content/build-formulaires.py` (orange pour la candidature, bleu pour le
   contact) ; ce qui suit ne sert que de repli et fixe la forme du bouton. */
.fluentform form button.ff-btn-submit,
.fluentform button.ff-btn-submit.ff_btn_style {
	background: var( --wp--preset--color--orange-marque );
	color: var( --wp--preset--color--marine-profond );
	border: 0;
	border-radius: 2px;
	padding: 17px 30px;
	font-family: var( --wp--preset--font-family--archivo );
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var( --ifmen-transition );
}

.fluentform form button.ff-btn-submit:hover,
.fluentform button.ff-btn-submit.ff_btn_style:hover {
	background: var( --ifmen-orange-survol );
	color: var( --wp--preset--color--marine-profond );
}

.fluentform .ff-el-form-control:is( select ) {
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, #8a8fa3 50% ),
		linear-gradient( 135deg, #8a8fa3 50%, transparent 50% );
	background-position: calc( 100% - 19px ) calc( 50% + 2px ), calc( 100% - 13px ) calc( 50% + 2px );
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

/* Bloc de formulaire encadré (pré-inscription, page Admission) */
.ifmen-formulaire--encadre {
	background: var( --wp--preset--color--pierre );
	padding: 52px 56px 56px;
}

/* Deux colonnes, comme la maquette. Les formulaires sont définis en une seule
   colonne dans Fluent Forms : la répartition se fait ici, ce qui évite de
   toucher à la structure des champs — et donc aux tests fonctionnels. */
@supports selector( :has( * ) ) {
	/* Fluent Forms enveloppe tous les groupes dans un `fieldset` : la grille
	   est donc posée aux deux niveaux, pour fonctionner quelle que soit la
	   profondeur retenue par le plugin. */
	.ifmen-formulaire--grille form.frm-fluent-form,
	.ifmen-formulaire--grille form.frm-fluent-form > fieldset {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px 24px;
		align-items: start;
	}

	.ifmen-formulaire--grille form.frm-fluent-form > fieldset {
		grid-column: 1 / -1;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.ifmen-formulaire--grille .ff-el-group {
		margin-bottom: 0;
		min-width: 0;
	}

	/* Champs longs, consentement et bouton : toute la largeur. Le groupe
	   « nom » aussi — il contient déjà Prénom et Nom côte à côte, qui se
	   partagent alors les deux colonnes. */
	.ifmen-formulaire--grille .ff-el-group:has( textarea ),
	.ifmen-formulaire--grille .ff-el-group:has( input[ type="checkbox" ] ),
	.ifmen-formulaire--grille .ff-el-group:has( button ),
	.ifmen-formulaire--grille .ff-name-field-wrapper,
	.ifmen-formulaire--grille .ff_submit_btn_wrapper,
	.ifmen-formulaire--grille .ff-message-success,
	.ifmen-formulaire--grille .ff-errors-in-stack {
		grid-column: 1 / -1;
	}

	/* Formulaire de contact : le sélecteur d'objet tient toute la largeur. */
	.ifmen-formulaire--select-large .ff-el-group:has( select ) {
		grid-column: 1 / -1;
	}
}

.fluentform textarea.ff-el-form-control {
	min-height: 120px;
	line-height: 1.6;
}

.fluentform .ff-el-form-check-label {
	font-size: 0.96875rem;
	line-height: 1.5;
	color: var( --wp--preset--color--gris-texte );
}

.fluentform input[ type="checkbox" ] {
	width: 18px;
	height: 18px;
	border: 1.5px solid var( --wp--preset--color--bordure-champ );
	border-radius: 0;
	accent-color: var( --wp--preset--color--bleu-marque );
}

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

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

/* --------------------------------------------------------------------------
   21. Comportement responsive
   Le design est arrêté à 1280 px ; ces paliers reprennent les règles du
   dossier de remise.
   -------------------------------------------------------------------------- */

/* 1024 – 1279 px */
@media ( max-width: 1279.98px ) {
	.ifmen-hero {
		min-height: 480px;
	}

	.ifmen-hero__titre {
		font-size: 3.25rem;
	}

	.ifmen-fiches,
	.ifmen-dates {
		grid-template-columns: repeat( 2, 1fr );
	}

	.ifmen-presentation {
		gap: 44px;
	}

	.ifmen-campus {
		gap: 44px;
	}

	/* Bannières intérieures : 220 px de haut, titre à 36 px */
	.ifmen-banniere {
		--ifmen-coin-largeur: 340px;
		min-height: 220px;
	}

	.page-formations .ifmen-banniere { --ifmen-coin-largeur: 380px; }
	.page-admission .ifmen-banniere  { --ifmen-coin-largeur: 430px; }
	.page-contact .ifmen-banniere    { --ifmen-coin-largeur: 300px; min-height: 190px; }

	.ifmen-banniere :is( h1, .wp-block-post-title ) {
		font-size: 2.25rem;
	}

	.ifmen-cta h2 {
		font-size: 2.125rem;
	}
}

/* 768 – 1023 px */
@media ( max-width: 1023.98px ) {
	.ifmen-presentation,
	.ifmen-campus {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	/* Plus de chevauchement sous 1024 px : la barre passe simplement dessous. */
	.ifmen-accueil .ifmen-chiffres {
		margin-block-start: 0;
	}

	.ifmen-chiffres {
		grid-template-columns: repeat( 2, 1fr );
		box-shadow: none;
		border: 1px solid var( --ifmen-filet-doux );
	}

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

	.ifmen-chiffre:nth-child( n + 3 ) {
		border-top: 1px solid var( --ifmen-filet-doux );
	}

	.ifmen-atouts {
		grid-template-columns: repeat( 2, 1fr );
	}

	.ifmen-temoignage-bandeau {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 36px 32px;
	}

	.ifmen-temoignage__chiffre {
		border-left: 0;
		border-top: 1px solid var( --ifmen-filet-pierre );
		padding-left: 0;
		padding-top: 28px;
	}

	.ifmen-mosaique {
		grid-template-rows: 200px 150px;
	}

	.ifmen-footer .wp-block-columns {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	/* Le sommaire d'À propos disparaît : la page se lit en une colonne. */
	.ifmen-lateral {
		display: none;
	}

	.ifmen-avec-sommaire {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* La colonne latérale d'Admission passe sous le contenu principal. */
	.ifmen-admission {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.ifmen-lateral-blocs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.ifmen-coordonnees {
		grid-template-columns: repeat( 2, 1fr );
	}

	.ifmen-contact-duo,
	.ifmen-equipe,
	.ifmen-duo {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ifmen-formulaire--encadre {
		padding: 36px 32px 40px;
	}

	.ifmen-cta__contenu {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		padding-block: 56px;
	}

	.ifmen-cta .wp-block-buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* Moins de 768 px */
@media ( max-width: 767.98px ) {
	.ifmen-hero {
		min-height: 420px;
		padding-block: 2.5rem;
	}

	.ifmen-hero__fond img {
		object-position: 60% 30%;
	}

	/* Le dégradé passe en vertical : le texte reste lisible sur toute la largeur.
	   Ces opacités gardent le blanc au-dessus de 4,5:1 même sur la partie la
	   plus claire de la photo — ne pas les baisser sans revérifier. */
	.ifmen-hero__voile {
		background: linear-gradient(
			180deg,
			rgba( 19, 27, 78, 0.78 ) 0%,
			rgba( 19, 27, 78, 0.86 ) 55%,
			rgba( 19, 27, 78, 0.93 ) 100%
		);
	}

	.ifmen-hero__titre {
		font-size: 2.125rem;
		line-height: 1.08;
	}

	.ifmen-hero__chapo {
		font-size: 1.0625rem;
		margin-top: 18px;
	}

	.ifmen-hero .wp-block-buttons {
		margin-top: 28px;
		width: 100%;
	}

	.ifmen-fiches,
	.ifmen-dates,
	.ifmen-chiffres,
	.ifmen-atouts {
		grid-template-columns: 1fr;
	}

	.ifmen-chiffre,
	.ifmen-chiffre:nth-child( 2n ) {
		border-right: 0;
		border-top: 1px solid var( --ifmen-filet-doux );
	}

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

	/* La mosaïque garde sa composition — un panneau large, deux dessous — au
	   lieu de s'empiler en trois bandes pleine largeur : tant qu'elle attend ses
	   photos, trois panneaux vides de 170 px occupaient les deux tiers d'un
	   écran de téléphone sans rien apprendre au visiteur. */
	.ifmen-mosaique {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 150px 110px;
		gap: 10px;
	}

	.ifmen-footer .wp-block-columns {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.ifmen-corps {
		padding: 40px var( --ifmen-gouttiere ) 56px;
	}

	.ifmen-coordonnees,
	.ifmen-lateral-blocs {
		grid-template-columns: 1fr;
	}

	.ifmen-valeurs li,
	.ifmen-etape {
		grid-template-columns: 32px 1fr;
		gap: 14px;
	}

	.ifmen-etape__numero {
		font-size: 1.5rem;
	}

	.ifmen-bandeau-conseil {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		padding: 26px 22px 30px;
		margin-top: 40px;
	}

	.ifmen-bouton-bleu,
	.ifmen-bouton-contour {
		width: 100%;
		min-height: 48px;
		text-align: center;
	}

	.ifmen-formulaire--encadre {
		padding: 24px 20px 28px;
	}

	@supports selector( :has( * ) ) {
		.ifmen-formulaire--grille form.frm-fluent-form,
		.ifmen-formulaire--grille form.frm-fluent-form > fieldset {
			grid-template-columns: 1fr;
		}
	}

	.ifmen-tete-section {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-bottom: 32px;
	}

	.ifmen-temoignage-bandeau {
		padding: 28px 22px;
	}

	.ifmen-temoignage__citation {
		font-size: 1.3125rem;
	}

	.ifmen-temoignage {
		border-left: 0;
		border-top: 1px solid var( --ifmen-filet-pierre );
		padding: 24px 0 0;
	}

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

	.ifmen-campus__cadre {
		padding: 20px;
	}

	.ifmen-campus__vue {
		height: 200px;
		padding: 22px;
	}

	.ifmen-cta h2 {
		font-size: 1.75rem;
	}

	.ifmen-cta .wp-block-buttons {
		flex-direction: column;
		width: 100%;
	}

	.ifmen-cta .wp-block-button {
		width: 100%;
	}

	/* Boutons pleine largeur, cible tactile de 48 px minimum */
	.wp-block-buttons .wp-block-button,
	.wp-block-buttons .wp-block-button__link {
		width: 100%;
		min-height: 48px;
		text-align: center;
		justify-content: center;
	}

	.ifmen-reperes,
	.ifmen-repere {
		border-left: 0;
	}

	.ifmen-repere + .ifmen-repere {
		border-top: 1px solid var( --ifmen-filet );
	}

	.ifmen-banniere,
	.page-contact .ifmen-banniere {
		--ifmen-coin-largeur: 170px;
		min-height: 170px;
	}

	.ifmen-banniere :is( h1, .wp-block-post-title ) {
		font-size: 1.75rem;
		line-height: 1.14;
	}

	.ifmen-banniere__soustitre,
	.ifmen-banniere .wp-block-post-excerpt__excerpt {
		font-size: 1rem;
	}

	/* Le bandeau utilitaire se réduit à l'e-mail */
	.ifmen-topbar__adresse,
	.ifmen-topbar__separateur {
		display: none;
	}

	.ifmen-navbar .wp-block-site-logo img {
		height: 36px;
	}
}

/* --------------------------------------------------------------------------
   22. Impression
   -------------------------------------------------------------------------- */

@media print {
	/* Le logo du pied de page a sa mention en blanc : invisible sur le papier,
	   où les fonds ne s'impriment pas. Le texte juste en dessous nomme déjà
	   l'établissement. */
	.ifmen-topbar,
	.ifmen-navbar,
	.ifmen-whatsapp,
	.ifmen-footer__logo,
	.ifmen-footer__bas,
	.wp-block-buttons {
		display: none !important;
	}

	.ifmen-regle::after,
	.ifmen-graphique::before,
	.ifmen-graphique::after,
	.ifmen-banniere__decor,
	.ifmen-cta::before,
	.ifmen-hero__fond {
		display: none !important;
	}

	.ifmen-banniere {
		background: none !important;
		color: #000;
		min-height: 0;
	}

	.ifmen-banniere :is( h1, .wp-block-post-title ),
	.ifmen-banniere__soustitre,
	.ifmen-fil {
		color: #000 !important;
	}

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

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