/* ============================================================================
   ACAFT — composants du thème blocs (piste B « Escadrille », session 11).
   Complète theme.json : tout ce que les tokens ne savent pas exprimer.
   Rappels AA (décision n° 24) : #FFDD8E JAMAIS en texte sur fond clair ;
   texte jaune uniquement sur les marines ; texte sur photo sous voile ≥ 0,72.
   ========================================================================== */

/* ─── 1. Accessibilité & liens ─────────────────────────────────────────── */

/* Texte réservé aux lecteurs d'écran (WordPress ne le fournit pas au thème :
   sans cette règle, les libellés cachés des blocs — read-more, navigation —
   s'affichent en clair) */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primaire);
	display: block;
	font-size: 1rem;
	padding: 15px 23px 14px;
	left: 5px;
	top: 5px;
	z-index: 100000;
	text-decoration: none;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--primaire);
	outline-offset: 2px;
	border-radius: 4px;
}
.is-style-section-marine :focus-visible,
.is-style-section-marine-sombre :focus-visible,
.acaft-entete :focus-visible,
.acaft-pied :focus-visible,
.acaft-heros :focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 3px;
}

/* Défilement doux vers les ancres (15/08/2026). Les liens d'ancre du site
   (tuile « Vols de parrainage » du hub → #vols, sommaires de fiches) sautaient
   d'un coup : on ne voyait pas où l'on avait atterri. `scroll-margin-top`
   décolle la cible du bord haut pour que son titre reste lisible. L'en-tête
   n'est pas collant : rien d'autre à compenser. Neutralisé en mouvement
   réduit (bloc de fin de fichier). */
html {
	scroll-behavior: smooth;
}
:target {
	scroll-margin-top: var(--wp--preset--spacing--40, 32px);
}

/* ─── 2. Utilitaires charte ────────────────────────────────────────────── */

/* Surligneur jaune : aplat décoratif SOUS du texte marine (jamais du texte jaune) */
.marque-jaune {
	background: linear-gradient(transparent 62%, var(--wp--preset--color--accent) 62%, var(--wp--preset--color--accent) 94%, transparent 94%);
}
/* Variante sous texte blanc (héros) : voile jaune atténué */
.marque-jaune-doux {
	background: linear-gradient(transparent 68%, rgba(255, 221, 142, 0.45) 68%, rgba(255, 221, 142, 0.45) 96%, transparent 96%);
}

.acaft-surtitre {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Motif chevrons (aile du logo) en fond de section — décor, opacité 7 % */
.a-chevrons,
.a-chevrons-gauche,
.a-chevrons-haut {
	background-image: var(--wp--custom--chevrons);
	background-repeat: no-repeat;
}
.a-chevrons        { background-position: right -80px center; background-size: 520px; }
.a-chevrons-gauche { background-position: left -100px center; background-size: 460px; }
.a-chevrons-haut   { background-position: right -70px top -30px; background-size: 380px; }

/* Dégradé marine signature (piste « Amplitude » généralisée, 14/07) : le
   header ET toutes les sections marine partagent custom.degradeMarine —
   HORIZONTAL (90°) exprès : à chaque abscisse la couleur est identique de
   part et d'autre de la jonction header/bandeau, la démarcation disparaît
   quelle que soit la hauteur des éléments (un dégradé diagonal par élément
   ne peut pas se raccorder). Le fond uni primaire (backgroundColor du
   header, variation section-marine) reste en secours ; le dernier arrêt
   #27436E est un éclaircissement décoratif du primaire (hors palette, stop
   de dégradé uniquement). */
.acaft-entete,
.is-style-section-marine {
	background-image: var(--wp--custom--degrade-marine);
}
/* La barre de menu portait son propre fond primaire uni (backgroundColor du
   bloc navigation) : sur le dégradé du header, elle flottait en rectangle
   plus clair. Barre rendue transparente (!important : la classe de preset du
   cœur en pose un). Les cartes de sous-menu ne dépendent PAS de ce fond :
   elles tiennent leurs couleurs de l'overlay du bloc (base/contrast) ; le
   panneau mobile ouvert garde son primaire-sombre propre (règle dédiée
   plus bas). */
.acaft-entete .wp-block-navigation.has-primaire-background-color {
	background-color: transparent !important;
}
/* Composition avec les chevrons : une seule background-image par élément —
   sans ces règles, l'utilitaire chevrons écraserait le dégradé (géométries
   des utilitaires reprises à l'identique, dégradé en couche de fond). */
.is-style-section-marine.a-chevrons,
.is-style-section-marine.a-chevrons-gauche,
.is-style-section-marine.a-chevrons-haut {
	background-repeat: no-repeat;
}
.is-style-section-marine.a-chevrons {
	background-image: var(--wp--custom--chevrons), var(--wp--custom--degrade-marine);
	background-position: right -80px center, center;
	background-size: 520px, auto;
}
.is-style-section-marine.a-chevrons-gauche {
	background-image: var(--wp--custom--chevrons), var(--wp--custom--degrade-marine);
	background-position: left -100px center, center;
	background-size: 460px, auto;
}
.is-style-section-marine.a-chevrons-haut {
	background-image: var(--wp--custom--chevrons), var(--wp--custom--degrade-marine);
	background-position: right -70px top -30px, center;
	background-size: 380px, auto;
}

/* Bandeau « ample » (en-tête du hub, 14/07) : même dégradé partagé, chevrons
   agrandis (opacité 0,10 — variante chevronsAmples de theme.json) sous le
   même patron multi-couches que le fond hangar de la connexion. */
.acaft-bandeau-ample {
	background-image:
		var(--wp--custom--chevrons-amples),
		var(--wp--custom--degrade-marine);
	background-repeat: no-repeat;
	background-position: right -90px center, center;
	background-size: 680px, auto;
}

/* ─── 3. Styles de blocs enregistrés (functions.php) ───────────────────── */

/* Le voile jaune du titre doit épouser le TEXTE, ligne à ligne : il lui faut
   donc une boîte inline. Il était posé jusqu'au 16/08 sur le titre lui-même
   (display:inline) — au prix d'un titre qui échappe au layout contraint de
   WordPress. Banc de mesure du 16/08 (problème n° 20), colonne 720px attendue
   à 280→1000 : le titre inline rendait 280→1128 en 1re ligne et 0→70 en 2e.
   Les marges calculées ne rattrapaient que la 1re ligne, et rien à droite.
   Le voile passe donc sur un <span> interne posé AU RENDU (functions.php) :
   le titre redevient un bloc, WP le contraint normalement (mesuré 280→910 et
   280→576), et box-decoration-break donne son voile à chaque ligne.
   Le voile est déclaré une fois en variable, les sections marine l'atténuent. */
.is-style-titre-marque {
	--acaft-voile: var(--wp--preset--color--accent);
}
.is-style-section-marine .is-style-titre-marque,
.is-style-section-marine-sombre .is-style-titre-marque {
	--acaft-voile: rgba(255, 221, 142, 0.32);
}
.is-style-titre-marque > .acaft-marque-texte,
.is-style-titre-marque:not(:has(> .acaft-marque-texte)) {
	padding: 0 4px;
	background: linear-gradient(transparent 64%, var(--acaft-voile) 64%, var(--acaft-voile) 96%, transparent 96%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* Titre enveloppé = bloc : il retombe sous le layout de WordPress, qui lui
   appliquait jusque-là RIEN (un inline ignore max-width et marges auto). Deux
   conséquences à neutraliser pour garder EXACTEMENT la géométrie d'avant :

   1) marges verticales — la respiration est déjà donnée par l'élément qui le
      précède (règle « *:has(+ .is-style-titre-marque) » plus bas, posée
      justement parce que le titre était inline) ;
   2) largeur — contraint comme un bloc ordinaire, le titre d'une section
      (patterns missions/chiffres/actualités) sautait à 280 px alors que les
      colonnes qu'il coiffe commencent à 70 px : 210 px trop à droite. En
      inline il tombait à 24 px, soit 46 px trop à GAUCHE — l'alignement
      n'a en réalité jamais été juste. On le cale donc sur la largeur du
      contenu large, seule position alignée sur ce qu'il annonce.
      Mesures du 16/08 sur l'accueil à 1280 px. */
.is-style-titre-marque:has(> .acaft-marque-texte) {
	margin-block: 0;
	max-width: none;
	margin-inline: 0 !important;
}
/* Titre de section : même largeur que le contenu alignwide qu'il coiffe. */
.wp-block-group.is-layout-constrained > .is-style-titre-marque:has(> .acaft-marque-texte) {
	max-width: var(--wp--style--global--wide-size, 1140px);
	margin-inline: auto !important;
}
.wp-block-post-content > .is-style-titre-marque:has(> .acaft-marque-texte) {
	--acaft-colonne: var(--wp--style--global--content-size, 720px);
	max-width: var(--acaft-colonne);
	margin-inline: auto !important;
}
.page-template-page-large .wp-block-post-content > .is-style-titre-marque:has(> .acaft-marque-texte),
.page-template-page-pleine .wp-block-post-content > .is-style-titre-marque:has(> .acaft-marque-texte) {
	--acaft-colonne: var(--wp--style--global--wide-size, 1140px);
}

/* Repli sans span — l'éditeur de blocs charge cette même feuille
   (add_editor_style) mais aucun filtre de rendu n'y tourne : on y retrouve le
   traitement inline d'avant le 16/08, recalé sur la colonne par des marges
   calculées ; !important requis car la règle de layout WP pose margin auto
   !important. En dessous de la largeur de colonne, max() ramène la marge à 0. */
.is-style-titre-marque:not(:has(> .acaft-marque-texte)) {
	display: inline;
}
.wp-block-post-content > .is-style-titre-marque:not(:has(> .acaft-marque-texte)) {
	--acaft-colonne: var(--wp--style--global--content-size, 720px);
	margin-left: max(0px, calc((100% - var(--acaft-colonne)) / 2)) !important;
	margin-right: max(0px, calc((100% - var(--acaft-colonne)) / 2)) !important;
}
/* Gabarits à colonne large : page-large et page-pleine contraignent le
   contenu à 1140px (= wide-size, à garder synchrones avec les templates). */
.page-template-page-large .wp-block-post-content > .is-style-titre-marque:not(:has(> .acaft-marque-texte)),
.page-template-page-pleine .wp-block-post-content > .is-style-titre-marque:not(:has(> .acaft-marque-texte)) {
	--acaft-colonne: var(--wp--style--global--wide-size, 1140px);
}

/* Titres de pages (14/07) : le surligneur signature sur les h1 des bandeaux
   marine — gabarits (post-title, query-title, h1 des gabarits 404/index) ET
   en-têtes de fiches posés dans les contenus (patterns entete-fiche /
   fiche-documentation) : le sélecteur contextuel « h1 enfant direct d'une
   section marine » couvre les deux sans toucher la BDD. Deux pièces :
   1) le BANDEAU cale sa zone de contenu sur la colonne par un padding
      calculé — indispensable car le h1 passe display:inline (surlignage par
      ligne) : un inline ignore max-width et une marge ne s'applique qu'à sa
      première ligne, les titres longs repliés retombaient au bord du
      viewport (constaté sur un titre d'article de 2 lignes) ;
   2) le H1 inline reçoit le voile jaune atténué sous texte blanc — géométrie
      de .marque-jaune-doux, décor conforme à la règle AA de l'accent. */
.is-style-section-marine:has(> h1.wp-block-post-title),
.is-style-section-marine:has(> h1.wp-block-query-title),
.is-style-section-marine:has(> h1.wp-block-heading) {
	--acaft-colonne: 820px; /* colonne des bandeaux page/article et des patterns de fiches (utilisés sur page-large comme page-pleine) */
	--acaft-rp: var(--wp--style--root--padding-left, 24px);
	padding-inline: max(var(--acaft-rp), calc((100% - var(--acaft-colonne)) / 2));
}
/* Bandeau posé DANS un contenu (fiches) : sa base de pourcentage est la zone
   de contenu du post-content (le bandeau alignfull déborde par des marges
   négatives de la valeur du padding racine) — compenser d'autant (mesuré le
   14/07 : gabarit base 1280, en-contenu base 1232 pour un viewport 1280). */
.wp-block-post-content > .is-style-section-marine:has(> h1.wp-block-heading) {
	padding-inline: max(var(--acaft-rp), calc((100% - var(--acaft-colonne)) / 2 + var(--acaft-rp)));
}
/* Bandes à colonne standard (constrained sans contentSize) : les quatre
   gabarits d'archives — actualités, archives, recherche, 404. */
.blog .is-style-section-marine:has(> h1),
.archive .is-style-section-marine:has(> h1),
.search .is-style-section-marine:has(> h1),
.error404 .is-style-section-marine:has(> h1) {
	--acaft-colonne: var(--wp--style--global--content-size, 720px);
}
.is-style-section-marine > h1.wp-block-post-title,
.is-style-section-marine > h1.wp-block-query-title,
.is-style-section-marine > h1.wp-block-heading {
	display: inline;
	padding: 0 4px;
	background: linear-gradient(transparent 68%, rgba(255, 221, 142, 0.45) 68%, rgba(255, 221, 142, 0.45) 96%, transparent 96%);
}
/* Le h1 passé inline ne reçoit plus le blockGap du bandeau (une marge
   verticale est sans effet sur un inline) : la respiration au-dessus du
   titre se redonne par l'élément qui le précède (fil d'ariane, surtitre) —
   24px, un cran au-dessus du blockGap 16px d'origine, demande lisibilité
   du 14/07. Sans effet sur les bandeaux où le h1 est premier enfant. */
.is-style-section-marine > *:has(+ h1.wp-block-post-title),
.is-style-section-marine > *:has(+ h1.wp-block-query-title),
.is-style-section-marine > *:has(+ h1.wp-block-heading) {
	margin-block-end: var(--wp--preset--spacing--30, 24px);
}
/* …et leurs marges VERTICALES sont ignorées de même (inline) : le titre
   collait au bloc précédent. La respiration est reportée sur ce dernier. */
.wp-block-post-content > *:has(+ .is-style-titre-marque) {
	margin-bottom: var(--wp--preset--spacing--50);
}
/* Même échappée pour les iframes posées à la racine du contenu (HelloAsso
   sur /don/, forum) ou en enfant direct d'un groupe (embeds Drive du welcome
   pack et des fiches centre) : inline par défaut → passées bloc, les marges
   auto du layout contraint reprennent la main et les centrent sur la colonne.
   L'iframe du forum vit dans son wrapper w3all (jamais enfant direct d'un
   groupe) : non concernée. */
.wp-block-post-content > iframe,
.wp-block-post-content .wp-block-group > iframe {
	display: block;
}
/* Le forum (wrapper w3all du shortcode, page /forum/) s'étend sur toute la
   largeur de l'écran — même mécanique que l'alignfull natif en racine
   padding-aware (demande du 18/08 ; l'habillage interne du phpBB garde sa
   colonne Volare de 1202px, c'est voulu). Les !important et le width:auto
   sont OBLIGATOIRES : la vue du plugin émet
   style="width:100%;min-width:100%;margin:0;padding:0;" EN INLINE sur le
   wrapper — seul !important bat un style inline, et sans width:auto la boîte
   (100% du content-box du parent) glisserait à gauche en laissant un liseré
   à droite. */
.wp-block-post-content > .w3all_wrap_phpbb_forum_shortcode_div_class {
	max-width: none;
	width: auto !important;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
}
.is-style-encadre {
	background: var(--wp--preset--color--accent-pale);
	border: 1px solid var(--wp--custom--bordure-encadre, #F0DCA8);
	border-radius: var(--wp--custom--rayon);
	padding: var(--wp--preset--spacing--40);
}
.is-style-encadre h3 {
	text-transform: uppercase;
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	font-weight: 500;
}

.is-style-pastille,
.is-style-pastilles a {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primaire);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 4px 12px;
	border-radius: 999px;
}
.is-style-pastilles a {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--bordure, #E5EAF2);
	text-transform: none;
	letter-spacing: normal;
}
.is-style-pastilles a:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* ─── 4. Composants ────────────────────────────────────────────────────── */

/* Les blocs racine des gabarits (en-tête / contenu / pied) se touchent :
   sans cette règle, le blockGap racine (1rem) dessine un liseré blanc entre
   le header marine et le premier bandeau de CHAQUE page (constat 11/07) */
.wp-site-blocks > * { margin-block-start: 0; }

/* En-tête */
.acaft-marque { display: inline-flex; align-items: center; }
.acaft-marque img { display: block; width: 172px; height: auto; }

/* Navigation : 15 px (8 entrées réelles + bouton doivent tenir à 1280 —
   la maquette n'en montrait que 5), survol/page courante = trait jaune 3px.
   Le trait BALAIE de gauche à droite (retour utilisateur 14/07 : même
   progressivité que les titres des cartes documentaires) : fond uni
   dimensionné par background-size — l'ex-box-shadow inset apparaissait d'un
   bloc. Page courante : trait plein d'emblée, rien ne déclenche l'animation. */
.acaft-entete .wp-block-navigation {
	font-size: 0.9375rem;
}
.acaft-entete .wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none;
	padding-bottom: 2px;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-size: 0 3px;
	background-position: 0 100%;
	transition: background-size 0.25s ease;
}
.acaft-entete .wp-block-navigation a:where(:not(.wp-element-button)):hover {
	background-size: 100% 3px;
}
.acaft-entete .wp-block-navigation a[aria-current="page"] {
	color: #FFFFFF;
	background-size: 100% 3px;
}
/* Libellés parents sans lien (« L'association », « Espace adhérent ») : ils
   basculent leur sous-menu comme le chevron (assets/js/acaft-navigation.js) —
   même main de clic que les liens voisins (un <a> sans href n'en a pas). */
.acaft-entete .wp-block-navigation-item__content:not([href]) {
	cursor: pointer;
}
/* Sous-menus desktop : carte blanche détachée de la barre, ouverture animée.
   Scopé desktop (constat 12/07) : dans le volet mobile le cœur déplie les
   sous-menus à plat (position static, fond transparent) sans réinitialiser
   ombre ni arrondi — l'accordéon maison (section suivante) y gère tout.
   Mécanique : le cœur cache la carte par height:0 + width:0 + overflow:hidden
   (état non transitionnable en sortie). On REDÉFINIT donc les DEUX états sous
   .acaft-entete : la carte garde sa géométrie réelle, seuls opacity/transform/
   visibility changent — entrée ET sortie deviennent animables, et on reste
   robuste aux variations du cœur (6.7.1 local vs 7.0.1 en ligne) : les trois
   déclencheurs d'ouverture du cœur sont recopiés à l'identique plus bas. */
@media (min-width: 800px) {
	/* État FERMÉ (et socle commun). La transition posée ici est celle de la
	   FERMETURE : visibility retardée de 0.18s = la carte reste survolable
	   pendant le fondu (tolérance de sortie, anti-scintillement). */
	.acaft-entete .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		height: auto;
		width: auto;
		min-width: 220px;
		overflow: visible;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.18s ease, transform 0.18s ease,
			visibility 0s linear 0.18s;
		padding: 8px;
		gap: 2px;
		border-radius: var(--wp--custom--rayon);
		border: 1px solid var(--wp--preset--color--bordure);
		box-shadow: var(--wp--preset--shadow--ombre);
	}
	/* Niveau 3 (aucun dans le menu actuel — prévu par prudence) : le volet
	   s'ouvre à droite (left:100 %, section « Sens d'ouverture ») → il glisse
	   en X ; le pont anti-interstice de ce niveau est déjà fourni par le cœur.
	   Même spécificité que l'état fermé : DOIT rester après lui. */
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		transform: translateX(-8px);
	}
	/* Niveau 2 : carte décollée de la barre de 8 px… */
	.acaft-entete .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		top: calc(100% + 8px);
	}
	/* …et pont invisible comblant l'interstice barre → carte (sinon le survol
	   se perd en chemin). Inerte carte fermée : le ::before hérite du
	   visibility:hidden. Niveau 2 seulement — le cœur a le sien au niveau 3. */
	.acaft-entete .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -9px;
		height: 9px;
	}
	/* État OUVERT : les trois déclencheurs du cœur, recopiés à l'identique
	   (survol — règle séparée plus bas, gardée (hover:hover) comme au cœur
	   7.0.1 ; focus-within — inactif avec nos réglages open-on-hover-click,
	   conservé par symétrie avec le cœur ; bouton chevron aria-expanded=true
	   = ouverture clavier Tab → Entrée, gérée par le view.js du cœur).
	   min-width redéclaré : sans lui, le min-width:200px de l'état ouvert du
	   cœur (0,5,0) battrait nos 220px et la carte sauterait à l'ouverture.
	   Transition = celle de l'OUVERTURE : visibility immédiate, easing
	   d'entrée du volet mobile (acaft-volet-item). */
	.acaft-entete .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
	.acaft-entete .wp-block-navigation .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		min-width: 220px;
		opacity: 1;
		visibility: visible;
		transform: none;
		z-index: 3; /* au-dessus d'une carte voisine encore en train de se fondre */
		transition: opacity 0.2s ease,
			transform 0.28s cubic-bezier(0.22, 0.8, 0.36, 1),
			visibility 0s;
	}
	/* Le déclencheur SURVOL, gardé (hover:hover) comme au cœur 7.0.1 (constat
	   13/07 sur le staging en ligne — le 6.7.1 local ne l'a pas) : sur écran
	   tactile ≥ 800 px, pas de :hover collant après un tap — l'ouverture passe
	   par le chevron (règle aria ci-dessus). Mêmes déclarations qu'au-dessus. */
	@media (hover: hover) {
		.acaft-entete .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
			min-width: 220px;
			opacity: 1;
			visibility: visible;
			transform: none;
			z-index: 3;
			transition: opacity 0.2s ease,
				transform 0.28s cubic-bezier(0.22, 0.8, 0.36, 1),
				visibility 0s;
		}
	}

	/* Liens de la carte : pilules arrondies (rayon 8 = 16 de la carte − 8 de
	   padding, rayons concentriques), survol au fond seul — sobre, sans
	   liseré (retiré sur retour utilisateur du 13/07). Les background-image:
	   none ne sont PAS décoratifs : ils neutralisent le trait de survol jaune
	   que la barre (règles « Navigation » ci-dessus) hériterait dans la
	   carte. aria-current : corrige aussi le blanc-sur-blanc du header
	   (color:#FFF) — pilule accent-pale + graisse. Sélecteur pilule à
	   (0,5,1) : le cœur 7.0.1 pose son padding .5em 1em à (0,5,0) —
	   constat 13/07, absent du 6.7.1 local. */
	.acaft-entete .wp-block-navigation .has-child > .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
		display: block; /* défait le flex du cœur : sans lui le span du libellé est blockifié et le surligneur s'étalerait sur toute la pilule */
		border-radius: 8px;
		padding: 9px 14px;
		transition: background-color 0.18s ease, color 0.18s ease;
	}
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		display: inline; /* le surligneur épouse le texte, ligne à ligne (comme titre-marque) */
		background-image: linear-gradient(transparent 62%, var(--wp--preset--color--accent) 62%, var(--wp--preset--color--accent) 94%, transparent 94%);
		background-repeat: no-repeat;
		background-size: 0 100%;
		background-position: 0 0;
		transition: background-size 0.25s ease;
	}
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container a:where(:not(.wp-element-button)):hover {
		background-color: var(--wp--preset--color--surface);
		background-image: none;
		color: var(--wp--preset--color--primaire);
	}
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container a[aria-current="page"] {
		color: var(--wp--preset--color--primaire);
		background-color: var(--wp--preset--color--accent-pale);
		background-image: none;
		font-weight: 600;
	}
	/* Le petit accent jaune, façon maison : le surligneur des titres
	   (.marque-jaune) posé sous le libellé au survol et sur la page courante.
	   Porté par le SPAN inline du libellé : le trait épouse le texte (et
	   surligne par ligne s'il replie, comme titre-marque) — décor sous texte
	   marine, conforme à la règle AA de l'accent. Remplace l'ex-liseré
	   latéral (retour utilisateur 13/07). BALAYÉ de gauche à droite par
	   background-size (retour utilisateur 14/07 — même patron que le
	   surligneur des titres de cartes, section 4), seule voie animable d'un
	   fond en dégradé ; le dégradé et la taille 0 vivent sur la règle de
	   base du span ci-dessus. */
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container a:where(:not(.wp-element-button)):hover .wp-block-navigation-item__label,
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container a[aria-current="page"] .wp-block-navigation-item__label {
		background-size: 100% 100%;
	}
	/* L'anneau de focus jaune du header (.acaft-entete :focus-visible) est
	   illisible sur la carte blanche : retour au marine à l'intérieur. */
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible {
		outline-color: var(--wp--preset--color--primaire);
	}

	/* Chevron : pivote à l'ouverture (0.25s ease = chevron du volet mobile).
	   Deux déclencheurs seulement — survol et aria-expanded : avec nos
	   réglages, focus-within n'ouvre pas la carte (open-on-hover-click), un
	   chevron pivoté carte fermée mentirait. Restreint au 1er niveau : les
	   chevrons imbriqués pointent à droite (rotate(-90deg) du cœur). NB : le
	   survol ne bascule pas aria-expanded (constat 6.7.1) — la rotation au
	   survol est donc portée ici ; si le cœur 7.0.1 pose lui-même 180deg sur
	   aria-expanded=true, même valeur, redondance inoffensive. */
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-icon svg {
		transition: transform 0.25s ease;
	}
	.acaft-entete .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}
	@media (hover: hover) {
		.acaft-entete .wp-block-navigation .wp-block-navigation__container > .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-icon svg {
			transform: rotate(180deg);
		}
	}
}

/* Desktop, mouvement réduit : mêmes états, déplacements et fondus coupés.
   Les sélecteurs d'état ouvert sont repris tels quels : une garde plus courte
   perdrait l'arbitrage de spécificité contre leurs transitions (le chevron
   pivote encore, instantanément : l'état reste signifié, sans mouvement). */
@media (min-width: 800px) and (prefers-reduced-motion: reduce) {
	.acaft-entete .wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
	.acaft-entete .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
	.acaft-entete .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
	.acaft-entete .wp-block-navigation .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transform: none;
		transition: none;
	}
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-icon svg,
	.acaft-entete .wp-block-navigation .has-child > .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
		transition: none;
	}
}

/* Mouvement réduit, toutes largeurs : les traits de survol de la navigation
   (barre 3px et surligneur des sous-menus) apparaissent instantanément —
   les états restent, seul le balayage est coupé (même garde que les titres
   de cartes, fin de fichier). */
@media (prefers-reduced-motion: reduce) {
	.acaft-entete .wp-block-navigation a:where(:not(.wp-element-button)),
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		transition: none;
	}
}

/* ── Volet mobile : panneau marine, entrée animée, sous-menus en accordéon ──
   (12/07, v2 après retour responsable : tous les sous-menus ouverts = volet
   illisible.) Le cœur force les sous-menus OUVERTS dans l'overlay
   (visibility/opacity/position:static) : on les replie par défaut et on
   réutilise sa mécanique NATIVE, sans JS maison — le bouton chevron (que le
   cœur masque dans l'overlay, réaffiché ici) bascule aria-expanded via l'API
   d'interactivité, et le sélecteur frère [aria-expanded=true] ~ ul déplie.
   Tout est scopé .is-menu-open (n'existe que volet ouvert, < 800 px) : le
   desktop garde carte blanche + survol intacts. ⚠️ Les couleurs d'overlay du
   bloc (overlayBackgroundColor/TextColor du pattern header) habillent AUSSI
   les cartes de sous-menu desktop (comportement du cœur, constat 12/07) :
   elles restent donc base/contrast (= la carte), et le marine du panneau
   mobile est forcé ici — !important requis contre les classes utilitaires
   .has-*-color du conteneur, elles-mêmes en !important. */

/* La justification droite de la barre est héritée par le volet via
   --navigation-layout-justification-setting, posée par le cœur SUR le <ul>
   (.items-justified-right) — la surcharge doit cibler le <ul>, pas un
   ancêtre ; items et sous-menus héritent du flex-start. */
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	gap: 0;
	width: 100%;
}

/* Panneau plein écran */
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--primaire-sombre) !important;
	color: var(--wp--preset--color--base) !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40)
		calc(var(--wp--preset--spacing--60) + env(safe-area-inset-bottom, 0px));
	overscroll-behavior: contain;
}
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--70);
	animation: acaft-volet-fondu 0.25s ease-out both;
}
@keyframes acaft-volet-fondu {
	from { opacity: 0; }
}
@keyframes acaft-volet-item {
	from { opacity: 0; transform: translateY(14px); }
}

/* Bouton fermer : pastille assortie aux chevrons */
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--40);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
}

/* Items en rangée (libellé + chevron), le sous-menu passe à la ligne */
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	flex-flow: row wrap;
	align-items: center;
	width: 100%;
}
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation__submenu-container {
	flex-basis: 100%;
}

/* Premier niveau : Space Grotesk, filets discrets, entrée en cascade */
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	padding-block: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	animation: acaft-volet-item 0.4s cubic-bezier(0.22, 0.8, 0.36, 1) both;
}
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.04s; }
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.08s; }
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.12s; }
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.16s; }
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.2s; }
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(7) { animation-delay: 0.24s; }
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+8) { animation-delay: 0.28s; }
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	padding-block: 10px;
}

/* Chevrons : pastilles rondes, pivotent à l'ouverture (le cœur les masque
   dans l'overlay avec un sélecteur à 4 classes — celui-ci en a 5) */
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* La rotation à l'ouverture est portée par le SVG (le cœur pose rotate(180deg)
   sur lui quand aria-expanded=true — pivoter AUSSI le bouton ferait 360°) */
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg {
	width: 16px;
	height: auto;
	transition: transform 0.25s ease;
}
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon[aria-expanded="true"] {
	background: rgba(255, 221, 142, 0.14);
	border-color: rgba(255, 221, 142, 0.4);
}

/* Sous-menus : repliés par défaut, dépliés par le chevron ; liseré accent */
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	margin: 0;
	padding: 0 0 0 18px;
	border-left: 2px solid rgba(255, 221, 142, 0.35);
	transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease,
		margin 0.3s ease, visibility 0s linear 0.4s;
}
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	max-height: 60rem;
	opacity: 1;
	visibility: visible;
	margin: 2px 0 10px;
	transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease 0.06s,
		margin 0.3s ease, visibility 0s;
}
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--attenue);
	padding-block: 9px;
}
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item,
	.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-container,
	.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon,
	.acaft-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg {
		animation: none;
		transition: none;
	}
}

/* Sens d'ouverture des sous-menus (constat 11/07) : la barre étant justifiée
   à droite, le cœur aligne les panneaux à droite et ouvre le 3e niveau vers
   la GAUCHE (anti-débordement global). Nos entrées à sous-menus sont au début
   de la barre : on rétablit le sens naturel — niveau 2 au bord gauche de son
   entrée, niveau 3 en volet à DROITE — sauf le dernier item de la barre
   (proche du bord droit), qui garde l'alignement anti-débordement du cœur.
   Scopé desktop : sous 800 px, l'overlay mobile déplie sans positionnement. */
@media (min-width: 800px) {
	.acaft-entete .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		left: 0;
		right: auto;
	}
	.acaft-entete .wp-block-navigation .wp-block-navigation__container > .has-child:last-child > .wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}
	.acaft-entete .wp-block-navigation .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		left: 100%;
		right: auto;
	}
}

/* Burger jusqu'à 800 px (le défaut du bloc est 600 px — la maquette casse à 800) */
@media (min-width: 600px) and (max-width: 799.98px) {
	.acaft-entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.acaft-entete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Bouton du header : pilule plus compacte que le bouton standard */
.acaft-cta .wp-block-button__link { padding: 10px 22px; }

/* Héros : colonne de texte limitée (maquette : 880 px), chevrons bas-droite */
.acaft-heros-inner { max-width: 880px; }
.acaft-heros { position: relative; }
.acaft-heros::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--chevrons) no-repeat right -60px bottom -40px;
	background-size: 420px;
	pointer-events: none;
	z-index: 1;
}

/* Cartes (actualités) */
.acaft-carte {
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.acaft-carte:hover { transform: translateY(-4px); }
.acaft-carte img { filter: contrast(1.05) saturate(1.1); }
/* Image posée à la main en tête de carte (portraits du bureau) : affleurante,
   pleine largeur — même patron que la couverture des cartes documentaires. */
.acaft-carte .wp-block-image { margin: 0; }
.acaft-carte .wp-block-image img { display: block; width: 100%; height: auto; }
.acaft-carte .wp-block-post-title { font-size: 1.1875rem; }
/* Survol du titre : surligneur signature animé — règle commune à toutes les
   cartes du site, portée par le bloc « surligneur des titres de cartes »
   (section tuiles/cartes documentaires). */
.acaft-carte .wp-block-read-more {
	font-weight: 600;
	text-decoration: none;
}
.acaft-carte .wp-block-read-more:hover { text-decoration: underline 3px var(--wp--preset--color--accent); }

/* Boutons : survol léger (couleurs AA inchangées) */
.wp-element-button {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--ombre);
}
/* Variante « contour » : bleu sur clair, blanc sur marine (hérite currentColor) */
.is-style-outline .wp-block-button__link,
.is-style-outline.wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: var(--wp--preset--color--primaire);
}
.is-style-section-marine .is-style-outline .wp-block-button__link,
.is-style-section-marine-sombre .is-style-outline .wp-block-button__link,
.acaft-heros .is-style-outline .wp-block-button__link {
	color: #FFFFFF;
}
.acaft-heros .is-style-outline .wp-block-button__link:hover,
.is-style-section-marine .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.14);
}

/* Liste de catégories en pilules */
.acaft-cats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.acaft-cats li { margin: 0; }
.acaft-cats a {
	display: inline-block;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--bordure, #E5EAF2);
	border-radius: 999px;
	padding: 6px 16px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	font-size: 0.9375rem;
}
.acaft-cats a:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }

/* Pagination de listes */
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
	display: inline-block;
	border-radius: 999px;
	padding: 6px 14px;
	text-decoration: none;
}
.wp-block-query-pagination a:hover { background: var(--wp--preset--color--surface); }
.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--primaire);
	color: #FFFFFF;
}

/* Pied de page */
.acaft-pied .wp-block-heading {
	color: var(--wp--preset--color--accent); /* texte jaune sur marine sombre : 11,83:1 AA */
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.acaft-pied ul { list-style: none; padding: 0; }
.acaft-pied li { margin: 0 0 8px; font-size: 0.9375rem; }
/* Trait de survol balayé de gauche à droite, comme la navigation du header
   (retour utilisateur 14/07) — 2px, dimensionné par background-size. */
.acaft-pied a {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-size: 0 2px;
	background-position: 0 100%;
	transition: background-size 0.25s ease;
}
.acaft-pied a:hover { background-size: 100% 2px; }
.acaft-pied-bas {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.875rem;
}

/* Méta d'article (bandeau marine) */
.acaft-meta { font-size: 0.9375rem; color: var(--wp--preset--color--attenue); }
.acaft-meta a { color: var(--wp--preset--color--attenue); }

/* Chiffres clés (pattern « L'association en chiffres ») */
.acaft-chiffre {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 700;
	line-height: 1;
	margin-bottom: 8px;
}

/* Chapeau d'article (patterns « Article ») */
.acaft-chapeau {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.4;
	color: var(--wp--preset--color--primaire);
}

/* Sommaire d'article ou de fiche : carte claire à filet jaune */
.acaft-sommaire {
	background: var(--wp--preset--color--surface);
	border-left: 6px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--rayon);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
.acaft-sommaire .wp-block-heading {
	font-size: 0.9375rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: var(--wp--preset--spacing--20);
}
.acaft-sommaire ol { margin: 0; padding-left: 20px; }
.acaft-sommaire li { margin-bottom: 8px; }
.acaft-sommaire a { font-weight: 600; }

/* Carte de connexion (page login) : carte blanche posée sur une section
   marine — les couleurs de la variation (texte surface, titres blancs)
   doivent être ramenées aux couleurs sur fond clair à l'intérieur */
.acaft-carte-connexion,
.acaft-carte-connexion p {
	color: var(--wp--preset--color--contrast);
}
.acaft-carte-connexion .wp-block-heading {
	color: var(--wp--preset--color--primaire);
}
.acaft-carte-connexion a {
	color: var(--wp--preset--color--primaire);
}
.acaft-carte-connexion .acaft-surtitre {
	color: var(--wp--preset--color--contrast-2);
}

/* Onglets de la carte de connexion (complément 13/07/2026) : deux liens
   « Connexion | Mot de passe oublié » rendus côté serveur — l'état actif est
   statique dans chaque vue de la page 37 ([acaft_connexion_vue]), aucun JS. */
.acaft-onglets {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	border-bottom: 1px solid var(--wp--preset--color--bordure);
	margin-bottom: var(--wp--preset--spacing--30);
}
.acaft-carte-connexion .acaft-onglet {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	text-decoration: none;
	color: var(--wp--preset--color--contrast-2);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-weight: 500;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.acaft-carte-connexion .acaft-onglet:hover {
	color: var(--wp--preset--color--primaire);
	border-bottom-color: var(--wp--preset--color--attenue);
}
.acaft-carte-connexion .acaft-onglet:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaire);
	outline-offset: 2px;
	border-radius: 4px;
}
.acaft-carte-connexion .acaft-onglet.est-actif {
	color: var(--wp--preset--color--primaire);
	border-bottom-color: var(--wp--preset--color--primaire);
	font-weight: 600;
}

/* Fond « hangar » de la section de connexion (maquette B, remarque V2 :
   fond typé aviation) : photo sous le dégradé marine de la maquette,
   chevrons conservés en surimpression. S'ajoute à is-style-section-marine,
   dont le fond uni reste en secours le temps du chargement de la photo. */
.acaft-fond-hangar {
	background-image:
		var(--wp--custom--chevrons),
		linear-gradient(180deg, rgba(28, 48, 82, 0.82) 0%, rgba(20, 36, 62, 0.88) 100%),
		url("../images/login-fond-aviation-1200.jpg");
	background-repeat: no-repeat;
	background-position: right -80px center, center, center;
	background-size: 520px, cover, cover;
}

/* Formulaires WP Members (session 15) : connexion + demande de reset
   (div#wpmem_login), édition de profil et nouveau mot de passe (div#wpmem_reg,
   rangées .my-row-wrapper posées par acaft-site). Markup du plugin :
   fieldset > legend + label + div.div_text > input, div.button_div
   (case « se souvenir » + submit .buttons), div.link-text. */
div#wpmem_login,
div#wpmem_reg {
	/* la feuille WP Members (generic-no-float) bride ses conteneurs à 75 % :
	   pleine largeur de la carte, sur toutes les tailles d'écran */
	width: 100%;
}
div#wpmem_login .div_text,
div#wpmem_login .button_div,
div#wpmem_login .link-text,
div#wpmem_reg .div_text,
div#wpmem_reg .div_select,
div#wpmem_reg .div_textarea,
div#wpmem_reg .button_div {
	width: 100%;
}
div#wpmem_login fieldset,
div#wpmem_reg fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
div#wpmem_login legend,
div#wpmem_reg legend {
	/* redondante avec les titres de la page : masquée visuellement, lue par les
	   lecteurs d'écran. left:-9999px ancre l'absolu HORS écran : sans lui, la
	   legend (width:100% posé par la feuille WP Members) étire scrollWidth. */
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
}
div#wpmem_login label,
div#wpmem_reg label,
.my-row-wrapper label {
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	font-size: 0.9375rem;
	margin: 16px 0 6px;
}
div#wpmem_login input[type="text"],
div#wpmem_login input[type="password"],
div#wpmem_login input[type="email"],
div#wpmem_reg input[type="text"],
div#wpmem_reg input[type="password"],
div#wpmem_reg input[type="email"],
div#wpmem_reg input[type="tel"],
div#wpmem_reg input[type="url"],
div#wpmem_reg input[type="date"],
div#wpmem_reg input[type="file"],
div#wpmem_reg select,
div#wpmem_reg textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}
div#wpmem_login input:focus-visible,
div#wpmem_reg input:focus-visible,
div#wpmem_reg select:focus-visible,
div#wpmem_reg textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--primaire);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primaire);
}
div#wpmem_login .button_div,
div#wpmem_reg .button_div {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
div#wpmem_login .button_div label,
div#wpmem_reg .button_div label {
	display: inline;
	margin: 0;
	font-family: inherit;
	font-weight: 400;
}
div#wpmem_login input[type="checkbox"],
div#wpmem_reg input[type="checkbox"] { width: auto; }
div#wpmem_login input.buttons,
div#wpmem_reg input.buttons {
	/* pilule jaune du thème (paire AA accent/primaire 10,03:1 — theme.json elements.button) */
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primaire);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 700;
	font-size: 1rem;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 12px 26px;
	cursor: pointer;
	margin-left: auto;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
div#wpmem_login input.buttons:hover,
div#wpmem_reg input.buttons:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--ombre);
}
div#wpmem_login .link-text {
	margin-top: 16px;
	font-size: 0.9375rem;
}

/* Photo de profil : cadre borné (15/08/2026). WP Members rend l'aperçu du
   champ image en <img src="[taille d'origine]"> sans aucune contrainte
   (class-wp-members-forms.php, vue « edit ») : une photo de 4000 px défonçait
   le formulaire, et l'aperçu variait d'un membre à l'autre. Cadre fixe,
   recadrage centré — même patron que le trombinoscope de l'annuaire
   (.member_avatar img). #user_avatar_img est l'id posé par WP Members ;
   la page « Mon profil » affiche la même photo via [wpmem_field user_avatar]
   dans une fiche (blocs tableau .acaft-fiche-profil depuis le 18/08/2026,
   TablePress avant). */
#user_avatar_img,
.entry-content .acaft-fiche-profil img {
	display: block;
	width: 200px;
	height: 200px;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--wp--custom--rayon, 16px);
	border: 1px solid var(--wp--preset--color--bordure, #E5EAF2);
	background: var(--wp--preset--color--surface, #F4F7FB);
}
/* L'aperçu vide du formulaire (avant tout téléversement) n'a pas de source :
   inutile de réserver un cadre pour rien. */
#user_avatar_img:not([src]),
#user_avatar_img[src=""] { display: none; }

/* Case « Retirer ma photo » (ACAFT_Membres::inserer_retrait_photo) : ligne
   simple sous le champ photo, la case reste devant son libellé. */
div#wpmem_reg label.acaft-retrait-photo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 10px;
	font-family: var(--wp--preset--font-family--labeur);
	font-weight: 400;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast-2, #4B5563);
	cursor: pointer;
}
/* Messages WP Members (erreur de connexion, confirmation de reset…) —
   sélecteur div.wpmem_msg : la feuille du plugin (generic-no-float) s'imprime
   APRÈS celle du thème et, à spécificité égale (.wpmem_msg), écrasait la carte
   (text-align:center, width:75 %, border 1px gris par-dessus le liseré,
   padding 20px 0, rayon 3px — constat au navigateur du 18/08). L'élément
   ajouté gagne sans !important, quel que soit l'ordre d'impression. */
div.wpmem_msg {
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	/* patron .is-style-encadre (jaune charte), demande du 18/08 */
	background: var(--wp--preset--color--accent-pale);
	border: 1px solid var(--wp--custom--bordure-encadre, #F0DCA8);
	border-radius: var(--wp--custom--rayon);
	padding: 14px 18px;
	margin: 0 0 20px;
}
div.wpmem_msg p { margin: 0; }
/* Le lien du message (« Mot de passe oublié ? ») passe sur sa propre ligne */
div.wpmem_msg a {
	display: block;
	margin-top: 6px;
	width: fit-content;
}

/* Pop-up de Limit Login Attempts (« il vous reste X tentatives », compte
   verrouillé) : le plugin injecte son style EN DUR (fond jaune pâle, ombre
   dure, texte gris) dans un <style> ajouté à l'affichage, donc après cette
   feuille — préfixe body pour gagner en spécificité sans !important. Même
   langage que .wpmem_msg ci-dessus ; position/centrage du plugin conservés. */
body .llar_notification_login_page {
	width: min(420px, calc(100vw - 32px));
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--labeur);
	font-size: 1rem;
	line-height: 1.55;
	text-align: left;
	border-left: 6px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--rayon);
	padding: 18px 42px 18px 20px;
	box-shadow: 0 18px 40px rgba(10, 18, 33, 0.28);
}
body .llar_notification_login_page h4 {
	/* le plugin pose un h4 blanc (invisible sur fond clair) */
	color: var(--wp--preset--color--contrast);
	margin: 0 0 10px;
}
body .llar_notification_login_page .close-button {
	top: 6px;
	right: 10px;
	font-size: 22px;
	color: var(--wp--preset--color--contrast-2, #4B5563);
	padding: 4px;
}

/* Formulaires WPForms du front (contact, welcome pack, vols, dépôts…) —
   tour visuel 12/07 : ils restaient au style par défaut du plugin (champs
   étroits, bouton gris) ; même habillage que les formulaires WP Members
   ci-dessus. Préfixe div.wpforms-container-full .wpforms-form pour égaler
   la spécificité de la feuille du plugin (la nôtre est chargée après).
   Le téléphone (intl-tel-input) garde son padding gauche posé en inline. */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 500;
	font-size: 0.9375rem;
	margin: 0 0 6px;
}
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
div.wpforms-container-full .wpforms-form .wpforms-field-description {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-2);
}
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form input[type="date"],
div.wpforms-container-full .wpforms-form input[type="file"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	height: auto;
}
div.wpforms-container-full .wpforms-form input:focus-visible,
div.wpforms-container-full .wpforms-form select:focus-visible,
div.wpforms-container-full .wpforms-form textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--primaire);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primaire);
}
div.wpforms-container-full .wpforms-form input[type="checkbox"],
div.wpforms-container-full .wpforms-form input[type="radio"] {
	width: auto;
}
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form input[type="submit"] {
	/* pilule jaune du thème (paire AA accent/primaire 10,03:1) */
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primaire);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 700;
	font-size: 1rem;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: 12px 26px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form input[type="submit"]:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primaire);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--ombre);
}

/* Tuiles de navigation (hub) : carte cliquable sobre */
.acaft-tuile {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--rayon);
	box-shadow: var(--wp--preset--shadow--ombre);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.acaft-tuile:hover { transform: translateY(-4px); }
.acaft-tuile .wp-block-heading { font-size: 1.1875rem; }
.acaft-tuile p { font-size: 0.9375rem; color: var(--wp--preset--color--contrast-2); margin: 6px 0 0; }

/* TOUTE la tuile est cliquable — le lien du titre est étiré sur la carte par
   un pseudo-élément (un seul lien, sémantique et a11y intactes ; survoler la
   tuile déclenche du coup le surligneur du titre). Contrepartie assumée : la
   description n'est plus sélectionnable à la souris.
   15/08/2026 : règle GÉNÉRALISÉE de la variante `.acaft-tuile-lien`
   (/liens-utiles/, 14/07) à toutes les tuiles — sur le hub, seul le titre
   des 6 tuiles de « Votre espace » était cliquable. Vérifié avant
   généralisation : les 6 tuiles du hub (5628) et les 11 de /liens-utiles/
   (5157) ne portent qu'UN lien chacune, aucun ne passe sous la surface.
   `.acaft-tuile-lien` reste un alias inerte (contenus historiques).
   18/08/2026 : étendue aux DEUX autres familles de cartes (demande
   utilisateur — comportement /liens-utiles/ partout). Vérifié sur l'export
   de bascule (contenus-bascule.json, les 109 contenus) : les 44 cartes-doc
   portent 2 liens vers la MÊME cible (couverture + titre) ou aucun (3 cartes
   « à venir », qui restent inertes faute de titre-lien) ; les cartes
   d'actualités rendent titre + « Lire l'article » vers la même cible ; les
   cartes du bureau (aucun lien, titres en heading) ne matchent pas les
   sélecteurs. Les liens qui passent sous la surface (couverture, read-more)
   visent donc toujours la cible du titre — et le survol de n'importe quel
   point de la carte, read-more et couverture compris, déclenche le
   surligneur du titre via le lien étiré. */
.acaft-tuile,
.acaft-carte,
.acaft-carte-doc { position: relative; }
.acaft-tuile .wp-block-heading a::after,
.acaft-carte-doc .wp-block-heading a::after,
.acaft-carte .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Cartes de la bibliothèque documentaire (/documents/ + les 5 index de
   fiches) : même carte sobre que les tuiles du hub, couverture affleurante
   en tête (patron .acaft-carte), texte dans un groupe intérieur rembourré. */
.acaft-carte-doc {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--rayon);
	box-shadow: var(--wp--preset--shadow--ombre);
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.acaft-carte-doc:hover { transform: translateY(-4px); }
.acaft-carte-doc .wp-block-image { margin: 0; }
.acaft-carte-doc .wp-block-image img { display: block; width: 100%; height: auto; }
.acaft-carte-doc .wp-block-heading { font-size: 1.1875rem; }
.acaft-carte-doc p { font-size: 0.9375rem; }

/* Surligneur des titres de cartes — règle commune (généralisée le 14/07 :
   cartes documentaires, tuiles du hub, cartes d'actualités). Le titre est
   un LIEN sans soulignement natif : au survol/focus, le surligneur
   signature (.marque-jaune) balaie le libellé de gauche à droite —
   l'animation passe par background-size, seule voie animable d'un fond en
   dégradé (celui du header reste statique à dessein). Remplace l'ex-hover
   box-shadow inset des tuiles et cartes d'actualités. */
.acaft-carte-doc .wp-block-heading a,
.acaft-tuile .wp-block-heading a,
.acaft-carte .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(transparent 62%, var(--wp--preset--color--accent) 62%, var(--wp--preset--color--accent) 94%, transparent 94%);
	background-repeat: no-repeat;
	background-size: 0 100%;
	background-position: 0 0;
	transition: background-size 0.25s ease;
}
.acaft-carte-doc .wp-block-heading a:hover,
.acaft-carte-doc .wp-block-heading a:focus-visible,
.acaft-tuile .wp-block-heading a:hover,
.acaft-tuile .wp-block-heading a:focus-visible,
.acaft-carte .wp-block-post-title a:hover,
.acaft-carte .wp-block-post-title a:focus-visible {
	background-size: 100% 100%;
}

/* Visionneuse de galerie (assets/js/acaft-lightbox.js) : overlay plein écran
   au-dessus de tout, image contenue, pastilles rondes assorties au volet
   mobile (44px mini, survol jaune). L'overlay n'existe qu'après un premier
   clic sur une vignette de galerie [gallery]. */
body.acaft-visionneuse-ouverte { overflow: hidden; }

/* Le display:grid ci-dessous écraserait le display:none de l'attribut hidden
   (styles auteur > UA) : on le rétablit explicitement, sinon l'overlay fermé
   resterait affiché au-dessus de la page. */
.acaft-visionneuse[hidden] { display: none; }

.acaft-visionneuse {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto 1fr;
	align-items: center;
	gap: 4px;
	padding: 8px;
	background: rgba(20, 36, 62, 0.94); /* primaire-sombre voilé */
	color: var(--wp--preset--color--base);
	overscroll-behavior: contain;
	animation: acaft-volet-fondu 0.18s ease-out both;
}

.acaft-visionneuse-barre {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}
.acaft-visionneuse-compteur {
	margin-right: auto;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--attenue);
	font-variant-numeric: tabular-nums;
}
.acaft-visionneuse-telecharger {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.acaft-visionneuse-telecharger:hover { color: var(--wp--preset--color--accent); }

.acaft-visionneuse-fermer,
.acaft-visionneuse-prec,
.acaft-visionneuse-suiv {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.acaft-visionneuse-fermer { font-size: 1.125rem; }
.acaft-visionneuse-fermer:hover,
.acaft-visionneuse-prec:hover,
.acaft-visionneuse-suiv:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primaire);
}
.acaft-visionneuse :focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.acaft-visionneuse-scene {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 10px;
	margin: 0;
	height: 100%;
	min-width: 0;
}
.acaft-visionneuse-image {
	max-width: 92vw;
	max-height: 82vh;
	object-fit: contain;
	border-radius: var(--wp--custom--rayon);
	box-shadow: var(--wp--preset--shadow--ombre-forte);
	transition: opacity 0.18s ease;
}
.acaft-visionneuse.est-en-chargement .acaft-visionneuse-image { opacity: 0.35; }
.acaft-visionneuse-legende {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--attenue);
	text-align: center;
}
.acaft-visionneuse-legende:empty { display: none; }
.acaft-visionneuse.est-en-erreur .acaft-visionneuse-legende::before {
	content: "Impossible de charger cette photo.";
	color: var(--wp--preset--color--accent);
}
.acaft-visionneuse.est-en-erreur .acaft-visionneuse-legende { display: block; }

@media (max-width: 600px) {
	.acaft-visionneuse { grid-template-columns: 1fr 1fr; }
	.acaft-visionneuse-scene { grid-column: 1 / -1; grid-row: 2; }
	.acaft-visionneuse-prec { grid-row: 3; justify-self: start; }
	.acaft-visionneuse-suiv { grid-row: 3; justify-self: end; }
	.acaft-visionneuse-image { max-height: 74vh; }
}

@media (prefers-reduced-motion: reduce) {
	.acaft-visionneuse,
	.acaft-visionneuse-image {
		animation: none;
		transition: none;
	}
}

/* ─── 5. Héritage ancien site ──────────────────────────────────────────────
   Règles reprises du CSS Customizer (post 97, refonte/annexes/donnees/
   custom-css-prod.css) encore nécessaires aux shortcodes maison et aux
   contenus. Le reste (Mesmerize, SiteOrigin, Muli, soulignés PNG, glsr, pum,
   page-id-37/2342) est ABANDONNÉ — voir ETAT.md session 11. */

/* Galeries héritées du shortcode [gallery] (gala, hommages) — tour visuel
   12/07 : ce markup (.gallery > .gallery-item) n'a AUCUN style dans un thème
   blocs, les vignettes s'empilaient en colonne. Grille fluide calée sur la
   taille des miniatures (150px), coins arrondis du design system. */
.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	/* Marge haute : rien ne sépare la galerie du bloc qui précède (vécu sur
	   gala : la vidéo YouTube collait aux photos). */
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--40);
}
.entry-content .gallery .gallery-item {
	margin: 0;
}
.entry-content .gallery .gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--rayon);
}

/* WPForms : descriptions de champs (couleur relevée #666→#4B5563 pour AA) */
.wpforms-field-description,
.wpforms-field-number-slider-hint { color: #4B5563 !important; }

/* Sélecteur de date des formulaires au-dessus de tout */
.flatpickr-calendar.open { z-index: 9999999999 !important; }

/* Afficheurs d'entrées WPForms (plugin acaft-site) — modernisés en session 20
   (mandat du 13/07/2026, INVERSE la « fidélité au rendu d'origine » de la 05) :
   le layout float historique devient une pile de cartes ; les DONNÉES rendues
   par class-affichage-entries.php sont inchangées. */
.wrapper { width: 100%; display: block; }
.entries { display: grid; gap: var(--wp--preset--spacing--20, 16px); }
.entry-details {
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--bordure, #E5EAF2);
	border-radius: var(--wp--custom--rayon, 16px);
	padding: var(--wp--preset--spacing--30, 24px);
	margin: 0;
}
span.label { display: none; font-weight: bold; margin-right: 5px; }
.header-row {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--20, 16px);
	margin-bottom: var(--wp--preset--spacing--20, 16px);
	padding: 8px 0;
	border: 0;
	color: var(--wp--preset--color--contrast-2, #4B5563);
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.8125rem;
}
span.details,
span.column-label {
	display: block;
	margin: 4px 0;
	text-align: left;
}
span.column-label { text-align: center; }
.clearfix { overflow: auto; }

/* Statuts des échéances (ex-couleurs inline de corps_irme — session 20) :
   sémantique conservée, teintes accordées à la charte (mêmes tons que le
   plugin vols-observation : attente #A66B1F · échu #8C2F39 · valide #2F6B4F) */
.acaft-statut-texte { font-weight: 600; }
.acaft-statut-attente { color: #A66B1F; }
.acaft-statut-echu { color: #8C2F39; }
.acaft-statut-valide { color: #2F6B4F; }

/* Tableau de bord des vols (GraphMachine, plugin acaft-site) */
.boxpaul {
	transition: box-shadow 0.3s;
	width: auto;
	margin: 0 0 2%;
	border: 1px solid var(--wp--preset--color--bordure, #E5EAF2);
	border-radius: var(--wp--custom--rayon, 16px);
	background: var(--wp--preset--color--base, #FFFFFF);
}
.boxpaul:hover { box-shadow: var(--wp--preset--shadow--ombre, 0 12px 32px rgba(20, 36, 62, 0.14)); }
.chartpaul { height: 500px; }
.disable-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* Boutons et vignettes du HUB (contenus existants) */
.hub_button { border-width: 2px !important; }
.hub_button a { font-weight: bold !important; }
.hub_photo h3 { font-size: 14px; text-align: center; }
.documents-navigation { padding: 0; margin: 0; font-size: 1.1em; }

/* Images et iframes responsives posées dans les contenus */
.respoacaft { width: 75%; height: auto; }
.responsive-acaft { position: relative; padding-bottom: 0%; padding-top: 100%; margin-bottom: 0; overflow: auto; }
.responsive-acaft iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Bandeau Welcome Pack (dégradé vers le jaune charte) */
.welcome-pack { background-image: linear-gradient(to right bottom, var(--wp--preset--color--base, #FFFFFF) 55%, var(--wp--preset--color--accent-pale, #FFF6E3)); }

/* Ex-clignotants (session 20 : animation supprimée — accessibilité ; les
   contenus historiques porteurs gardent une simple emphase) */
.blink { color: var(--wp--preset--color--primaire, #1C3052); font-size: 30px; font-weight: bold; line-height: 100%; }
.blink2 { font-weight: 600; }

/* Fil d'ariane historique (contenus qui portent encore la classe) */
.acaft_ariane { font-size: 0.9375rem; color: var(--wp--preset--color--contrast-2); }

/* ─── Retouches opportunistes de la session 20 (recette visuelle membre) ─── */

/* Bloc recherche (gabarit 404 + page de résultats) : le rendu cœur restait
   brut (bordures #000/#949494) — aligné sur les champs du design system */
.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--bordure, #E5EAF2);
	border-radius: 8px;
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--labeur);
	color: var(--wp--preset--color--contrast, #1F2937);
}
.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primaire, #1C3052);
}

/* Astérisques « requis » des formulaires (WPForms + WP Members) :
   rouge accordé à la charte (ton des statuts annulé/erreur) */
.wpforms-required-label,
#wpmem_reg .req { color: #8C2F39 !important; }

/* Fiches du profil membre (18/08/2026) : les 3 grilles TablePress de la page
   « Mon profil » (tables 24/25/26 — dernier usage vivant du plugin) sont
   remplacées par des blocs tableau natifs portant cette classe. Habillage à
   la carte du thème (patron .acaft-carte/.acaft-tuile : fond base, ombre au
   repos, rayon charte) plutôt qu'au tableau strié : libellés en texte
   secondaire demi-gras, filets horizontaux seuls, pas de survol (contenu non
   interactif). Le cadre photo 200 px est étendu à ces fiches par la règle
   « Photo de profil » plus haut. En mobile, le libellé s'empile au-dessus de
   la valeur. */
.entry-content .acaft-fiche-profil {
	background: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--bordure, #E5EAF2);
	border-radius: var(--wp--custom--rayon, 16px);
	box-shadow: var(--wp--preset--shadow--ombre, 0 12px 32px rgba(20, 36, 62, 0.14));
	padding: var(--wp--preset--spacing--10, 8px) var(--wp--preset--spacing--30, 24px);
	overflow: hidden;
}
.entry-content .acaft-fiche-profil table {
	width: 100%;
	border-collapse: collapse;
	color: var(--wp--preset--color--contrast, #1F2937);
}
.acaft-fiche-profil td {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--bordure, #E5EAF2);
	padding: 0.75rem 0;
	vertical-align: top;
}
.acaft-fiche-profil tr:first-child td { border-top: 0; }
.acaft-fiche-profil td:first-child {
	width: 38%;
	padding-right: var(--wp--preset--spacing--20, 16px);
	color: var(--wp--preset--color--contrast-2, #4B5563);
	font-weight: 600;
	font-size: 0.9375rem;
}
@media (max-width: 600px) {
	.acaft-fiche-profil td { display: block; }
	.acaft-fiche-profil td:first-child {
		width: auto;
		padding: 0.75rem 0 0;
		font-size: 0.875rem;
	}
	.acaft-fiche-profil td:last-child {
		border-top: 0;
		padding: 0.125rem 0 0.75rem;
	}
}

/* Bouton « Suivre sur Instagram » du flux (accueil + hub) : bleu du plugin
   #408bd1 → marine charte */
.sbi_follow_btn a { background: var(--wp--preset--color--primaire, #1C3052) !important; }
.sbi_follow_btn a:hover,
.sbi_follow_btn a:focus { background: var(--wp--preset--color--primaire-sombre, #14243E) !important; box-shadow: none !important; }

/* ─── Chargement et transitions (15/08/2026) ──────────────────────────────
   Le site paraissait figé : rien ne se passait entre le clic sur un lien et
   l'arrivée de la page, ni entre l'envoi d'un formulaire et sa réponse.
   Trois briques, toutes neutralisées en mouvement réduit (bloc suivant) :
   1. fondu croisé entre pages — API View Transitions du navigateur, ZÉRO JS,
      simplement ignorée là où elle n'existe pas ;
   2. barre de progression — animée ICI, en CSS ; le script assets/js/acaft-chargement.js
      ne fait que poser les classes (voir l'avertissement au-dessus de la barre) ;
      fondu des images — assets/js/acaft-chargement.js ;
   3. état « en cours » des boutons d'envoi (.acaft-attente), réutilisé par
      le plugin acaft-vols-observation sur ses boutons AJAX. */

@view-transition {
	navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.18s;
}

/* Barre de progression : juste sous la visionneuse (99999), au-dessus du reste.
   Invisible tant qu'inactive ; le script ne pose QUE des classes.

   ⚠️ Tout le mouvement passe par `transform` (16/08/2026, problème n° 22). La
   première version animait `width` depuis un `setInterval` : les deux vivent
   sur le fil principal, que la navigation confisque dès le clic — la barre se
   figeait au bout de deux ou trois crans. Une animation de `transform` est
   composée par le GPU : elle continue d'avancer pendant que le navigateur
   travaille. Ne jamais revenir à `width`, `left` ou `background-position` ici.

   La progression est asymptotique et PUREMENT CSS : paliers calibrés pour que
   le mouvement reste perceptible longtemps (~11 px/s en fin de course sur une
   fenêtre de 1400 px) sans jamais atteindre 100 % — c'est l'arrivée de la page
   qui la termine, jamais l'animation. */
.acaft-progression {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99998;
	width: 100%;
	height: 3px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--wp--preset--color--primaire, #1C3052), var(--wp--preset--color--accent, #FFDD8E));
	opacity: 0;
	pointer-events: none;
}
.acaft-progression.est-active {
	opacity: 1;
	will-change: transform, opacity;
	animation: acaft-progression-avance 26s linear forwards;
}
/* Reprise sur la page qui ARRIVE : même animation prise en cours de route
   (délai négatif = elle démarre déjà avancée, ici ~74 %). Le fondu croisé
   entre documents fige forcément la barre de la page qui part — un instantané
   ne s'anime pas ; c'est ce relais qui rend la continuité. */
.acaft-progression.est-reprise {
	animation-delay: -7s;
}
/* Fin de course : à cet instant la page est là et le fil principal est libre,
   une transition ordinaire suffit. `est-active` reste posée (elle porte le
   opacity: 1 d'où part le fondu). */
.acaft-progression.est-terminee {
	animation: none;
	transform: scaleX(1);
	opacity: 0;
	transition: transform 0.22s ease-out, opacity 0.3s ease 0.2s;
}
@keyframes acaft-progression-avance {
	0%   { transform: scaleX(0.02); }
	2%   { transform: scaleX(0.28); } /* 0,5 s */
	8%   { transform: scaleX(0.52); } /* 2 s   */
	27%  { transform: scaleX(0.74); } /* 7 s   */
	62%  { transform: scaleX(0.88); } /* 16 s  */
	100% { transform: scaleX(0.96); } /* 26 s  */
}

/* Bouton verrouillé pendant un envoi. Deux rendus : les <button> et <a>
   reçoivent une pastille rotative ; les <input type="submit"> (formulaires
   WP Members) n'acceptent AUCUN pseudo-élément — d'où le balayage de fond. */
.acaft-attente {
	cursor: progress;
	pointer-events: none;
}
button.acaft-attente::after,
a.acaft-attente::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 10px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: acaft-rotation 0.7s linear infinite;
}
input.acaft-attente {
	background-image: repeating-linear-gradient(-45deg, rgba(20, 36, 62, 0.16) 0 10px, transparent 10px 20px);
	background-size: 28px 28px;
	animation: acaft-balayage 0.7s linear infinite;
}
@keyframes acaft-rotation {
	to { transform: rotate(360deg); }
}
@keyframes acaft-balayage {
	to { background-position: 28px 0; }
}

/* Fondu des images à l'arrivée. La classe `acaft-js` n'est posée QUE par le
   script : sans JavaScript, aucune image n'est jamais masquée. Le héros et
   les images prioritaires sont exclus côté script (ne pas retarder le LCP). */
html.acaft-js img.acaft-image-attente {
	opacity: 0;
}
html.acaft-js img.acaft-image-attente.est-chargee {
	opacity: 1;
	transition: opacity 0.35s ease;
}

/* ─── Surligneurs au doigt : posés d'un coup (16/08/2026, problème n° 23) ───
   Signalement utilisateur : au clic sur un lien du menu mobile, le voile jaune
   n'a pas le temps de finir son balayage — la page se fige d'abord.

   C'est la même racine que la barre de progression (n° 22), sans le même
   remède. Ces surligneurs sont dimensionnés par `background-size`, seule voie
   animable d'un fond en dégradé — et `background-size` n'est PAS une propriété
   composée : contrairement à `transform`, elle a besoin du fil principal à
   chaque image, précisément ce que la navigation confisque dès l'appui. Sur
   les voiles qui épousent le texte ligne à ligne, aucune réécriture en
   `transform` n'est possible (un pseudo-élément ne sait pas suivre un texte
   qui replie) : le balayage ne PEUT pas aboutir sur tactile.

   On le retire donc là où il ne peut qu'échouer. Au doigt, le surligneur se
   pose entier et instantanément — jamais peint à mi-course. `:active` double
   `:hover` pour que le retour parte du toucher et non du survol simulé (que
   iOS n'applique parfois qu'au relâchement). Les écrans à souris, où le survol
   précède le clic de très loin, gardent le balayage intact. */
@media (hover: none) {
	.acaft-entete .wp-block-navigation a:where(:not(.wp-element-button)),
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
	.acaft-pied a,
	.acaft-carte-doc .wp-block-heading a,
	.acaft-tuile .wp-block-heading a,
	.acaft-carte .wp-block-post-title a {
		transition: none;
	}
	.acaft-entete .wp-block-navigation a:where(:not(.wp-element-button)):active {
		background-size: 100% 3px;
	}
	.acaft-entete .wp-block-navigation .wp-block-navigation__submenu-container a:where(:not(.wp-element-button)):active .wp-block-navigation-item__label {
		background-size: 100% 100%;
	}
	.acaft-pied a:active {
		background-size: 100% 2px;
	}
	.acaft-carte-doc .wp-block-heading a:active,
	.acaft-tuile .wp-block-heading a:active,
	.acaft-carte .wp-block-post-title a:active {
		background-size: 100% 100%;
	}
}

/* Mouvement réduit : cartes et boutons du thème (garde manquante relevée
   par l'audit de la session 20 ; tuiles du hub et cartes documentaires
   ajoutées avec le composant carte-doc, liens du pied avec le balayage du
   14/07 — les états restent, sans mouvement : le surligneur du titre
   apparaît instantanément) */
@media (prefers-reduced-motion: reduce) {
	.acaft-carte,
	.acaft-carte-doc,
	.acaft-tuile,
	.wp-element-button,
	.acaft-carte-doc .wp-block-heading a,
	.acaft-tuile .wp-block-heading a,
	.acaft-carte .wp-block-post-title a,
	.acaft-pied a {
		transition: none;
	}
	.acaft-carte:hover,
	.acaft-carte-doc:hover,
	.acaft-tuile:hover,
	.wp-element-button:hover {
		transform: none;
	}

	/* Compléments du 15/08/2026 : défilement, transitions de page, barre de
	   progression, pastilles d'attente et fondu des images. Le site reste
	   PLEINEMENT utilisable — seul le mouvement disparaît (le script sort de
	   lui-même en mouvement réduit ; ces règles sont la ceinture). */
	html {
		scroll-behavior: auto;
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}
	.acaft-progression {
		display: none;
	}
	button.acaft-attente::after,
	a.acaft-attente::after,
	input.acaft-attente {
		animation: none;
	}
	html.acaft-js img.acaft-image-attente {
		opacity: 1;
		transition: none;
	}
}

/* ─── Bandeau cookies Complianz (18/08/2026) ──────────────────────────────
   Habillage charte du bandeau : le gros (couleurs, pilules, rayons, textes,
   retrait du voile soft-cookiewall) vit dans les réglages Complianz posés par
   la tâche runner 126 et sort dans le CSS généré (uploads/complianz/css/,
   versionné ?v=banner_version). Ici : uniquement ce que ces réglages ne
   savent pas exprimer. Le CSS généré est injecté APRÈS cette feuille —
   d'où le préfixe div.cmplz-cookiebanner qui départage à la spécificité,
   pas à l'ordre. */

div.cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent {
	font-family: var(--wp--preset--font-family--labeur);
}
div.cmplz-cookiebanner .cmplz-title,
div.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-family: var(--wp--preset--font-family--titres);
	font-weight: 700;
}
div.cmplz-cookiebanner .cmplz-title {
	color: var(--wp--preset--color--base);
	font-size: 1.05rem;
}

/* « Préférences » se présente en lien, pas en bouton (fond et bordure blancs
   posés par les réglages) ; « Enregistrer les préférences » partage la même
   palette settings → on lui rend la pilule contour marine du bouton Refuser */
div.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
div.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
div.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	border-color: var(--wp--preset--color--base);
}

/* L'ombre par défaut (noire, deux couches, encore assombrie au survol) jure
   sur la carte marine : une seule ombre marine, stable au survol */
div.cmplz-cookiebanner.cmplz-show,
div.cmplz-cookiebanner.cmplz-show:hover {
	box-shadow: 0 14px 40px rgba(20, 36, 62, 0.35);
}

/* Carte marine (18/08, variante choisie en séance) : Complianz code EN DUR un
   fond de catégorie gris clair, un « Toujours activé » vert foncé et un
   chevron sombre — illisibles sur #14243E */
div.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: rgba(255, 255, 255, 0.08);
}
div.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
	color: var(--wp--preset--color--accent);
}
div.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open {
	filter: invert(1);
}

/* Interrupteur coché : piste jaune → le pommeau blanc des réglages y serait
   invisible, on le passe en marine sur ce seul état */
div.cmplz-cookiebanner .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::after {
	background: var(--wp--preset--color--primaire-sombre);
}

/* La glissade d'entrée (module bottom-right-slide) part de bottom:-50vh :
   sans animation il faut REPOSER bottom:0, sinon le bandeau reste hors écran */
@media (prefers-reduced-motion: reduce) {
	#cmplz-cookiebanner-container div.cmplz-cookiebanner {
		animation: none;
		bottom: 0;
	}
}

/* En pleine largeur mobile, la carte touche le bas de l'écran : les coins
   bas arrondis y ouvriraient deux jours sur le fond */
@media (max-width: 768px) {
	div.cmplz-cookiebanner {
		border-radius: 16px 16px 0 0;
	}
}

/* ─── Libellés de tuile à deux longueurs (19/08/2026) ──────────────────────
   La tuile « Vols de parrainage » de la grille « Votre espace » porte, dans
   son titre, DEUX libellés en base : `.acaft-lib-long` (ordinateur) et
   `.acaft-lib-court` (« Vols d’Obs », téléphone). Par défaut, seul le long
   s'affiche ; la bascule se fait dans le bloc mobile ci-dessous.
   Motif : à 375px le titre long passait sur 2 lignes et, les hauteurs de
   ligne étant partagées en grille, il étirait la tuile « Forum » voisine.
   Relevé à la police RÉELLE (Space Grotesk 700, 17px) : « Vols d’Obs » mesure
   85,25px pour 122px utiles à 375px, 114px à 360px et 94px à 320px — une
   seule ligne aux trois formats, y compris le plus étroit.
   Cette règle-ci n'est VOLONTAIREMENT pas close par `.page-id-5628` : le
   canevas de l'éditeur de blocs, qui charge cette feuille (add_editor_style),
   ne porte pas la classe de page ; sans elle, la rédaction verrait les deux
   libellés collés. Ces deux classes n'existent nulle part ailleurs sur le
   site (vérifié le 19/08). */
.acaft-lib-court {
	display: none;
}

/* ─── Hub et accueil densifiés en mobile (19/08/2026) ─────────────────────
   Sur téléphone, le hub demandait une longue descente : les 6 tuiles de
   « Votre espace » s'empilaient une par une (la grille du cœur retombe à une
   colonne dès que la piste de 20rem ne tient plus) et les 3 dernières
   actualités allongeaient encore le bas de page. Densification demandée :
   tuiles sur 2 colonnes et titre seul, actualités ramenées aux 2 dernières.
   Étendu le même jour à la page d'ACCUEIL (page 5), qui referme sa colonne
   d'actualités sur les 2 dernières elle aussi — et à cela SEULEMENT : elle
   ne porte pas de tuiles « Votre espace », les quatre autres règles de ce
   bloc restent donc propres au hub.
   Trois garde-fous :
   — TOUT vit sous max-width 600px (le seuil déjà employé deux fois plus haut
     dans ce fichier, et celui auquel le cœur empile ses grilles) : la version
     ordinateur reste STRICTEMENT inchangée ;
   — rien n'est retiré du contenu, ni de la base : les 6 descriptions et le
     3ᵉ article restent dans le HTML, seulement masqués à l'affichage ;
   — portée close par `.page-id-5628` (hub) et `.home.page-id-5` (accueil) :
     les mêmes `.acaft-tuile` servent sur /liens-utiles/ (5157) et l'annuaire,
     et la même boucle d'articles sert sur /articles/, qui ne doivent pas
     bouger. */
@media (max-width: 600px) {
	/* Surclasse la grille générée par le cœur pour ce groupe
	   (`repeat(auto-fill, minmax(min(20rem, 100%), 1fr))`, spécificité 0,1,0)
	   sans !important. `minmax(0, 1fr)` et non `1fr` : une piste `1fr` garde
	   un minimum `auto`, si bien qu'un titre trop long élargirait la colonne
	   et ferait déborder la page en largeur. */
	.page-id-5628 .entry-content .is-layout-grid:has(> .acaft-tuile) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Titre seul : la description est masquée. Le lien étiré du titre
	   (a::after, inset 0) n'est pas touché — la tuile reste cliquable
	   entière, et le blockGap de 8px disparaît avec le paragraphe. */
	.page-id-5628 .acaft-tuile p { display: none; }

	/* Resserrement mesuré (mesures faites à la police réelle, Space Grotesk
	   700). En 2 colonnes la tuile fait 156px à 375px de large ; le
	   rembourrage de 24px posé EN LIGNE par l'éditeur ne laisserait que 108px
	   au titre, pour 105px au mot le plus long (« Documents ») — et 100px
	   seulement sur un écran de 360px, où le titre déborderait. À 16px de
	   rembourrage et 17px de corps, le mot le plus long tient jusqu'aux
	   écrans de 320px. Le !important est la seule voie contre un style
	   en ligne. */
	.page-id-5628 .acaft-tuile {
		padding: var(--wp--preset--spacing--20) !important;
	}
	.page-id-5628 .acaft-tuile .wp-block-heading {
		font-size: 1.0625rem;
	}

	/* Actualités : on garde les 2 dernières, sur le hub comme sur l'accueil.
	   Le `n+3` couvre aussi le cas où la boucle passerait un jour à 4
	   articles. Un sélecteur plus étroit serait inutile : le HTML anonyme de
	   l'accueil ne porte qu'UNE seule `.wp-block-query` (relevé du 19/08 —
	   3 `li`, aucun autre bloc requête dans la page). `.home` en tête du
	   scope de l'accueil ferme la règle à la page 5 SERVIE COMME accueil : si
	   la page d'accueil du site changeait un jour, la 5 redeviendrait une
	   page ordinaire et retrouverait d'elle-même ses 3 articles. */
	.page-id-5628 .wp-block-query .wp-block-post-template > li:nth-child(n+3),
	.home.page-id-5 .wp-block-query .wp-block-post-template > li:nth-child(n+3) {
		display: none;
	}

	/* Bascule des deux libellés de la tuile « Vols de parrainage » (voir le
	   bloc « Libellés de tuile à deux longueurs » plus haut). Le titre tient
	   ainsi sur UNE ligne, et la ligne de grille qu'il partage avec « Forum »
	   retrouve une hauteur uniforme (53px au lieu de 72px, mesuré à 375px). */
	.page-id-5628 .acaft-lib-long {
		display: none;
	}
	.page-id-5628 .acaft-lib-court {
		display: inline;
	}

	/* Les tuiles d'une même rangée sont étirées à la hauteur de la plus haute
	   (comportement normal d'une grille) : leur contenu se centre plutôt que
	   de rester collé en haut. Cela absorbe « Ma cotisation », qui passe
	   encore sur 2 lignes à 320px. `align-content` sur un bloc en flux est
	   ignoré par les navigateurs anciens — au pire, l'alignement haut
	   d'aujourd'hui. */
	.page-id-5628 .acaft-tuile {
		align-content: center;
	}
}

/* ─── Tuiles « vols de parrainage » densifiées en mobile (19/08/2026) ──────
   La section « Vols de parrainage » du hub s'ouvre sur deux grandes
   tuiles-boutons émises par le shortcode [acaft_accueil] du plugin
   acaft-vols-observation. Calibrées pour l'ordinateur (380 × 297px,
   rembourrage 45/30/40, pictogramme 52px), elles occupaient à elles seules
   818px de descente sur un écran de 375px — plus que les 6 tuiles de
   « Votre espace » réunies. Densification demandée par le responsable :
   elles restent EMPILÉES (pas de passage côte à côte) et gardent leurs
   descriptions ; seules les dimensions se resserrent. Mesuré au rendu réel :
   la tuile tombe de 297px à 199,6px et la section, titre compris, de 818px à
   581px à 375px de large (606px à 360px).

   Deux points demandent l'explication :

   — SPÉCIFICITÉ. Le plugin pose son propre CSS dans un <style> placé APRÈS
     cette feuille, en `#acaft-accueil-1 a.acaft-hero-btn` (1,1,1) et tout en
     !important : une surcharge à classes seules PERD, même en !important
     (vérifié). Il faut donc un identifiant dans le sélecteur. Mais le numéro
     d'instance n'est pas stable — ACAFT_Shortcodes_Navigation le tire d'un
     compteur partagé par TOUS ses shortcodes ([acaft_retour],
     [acaft_banniere_vols]…), et un seul d'entre eux posé plus haut dans la
     page ferait passer le bloc à `acaft-accueil-2`.
     `:is([id^="acaft-accueil-"], #acaft-accueil-1)` emprunte la spécificité
     de son argument le plus fort — l'identifiant — tout en filtrant par
     l'attribut : (1,3,1), gagnant, et indépendant du numéro d'instance.

   — PORTÉE. `.page-id-5628` ferme la règle au hub. Le même [acaft_accueil]
     sert aussi la page « Accueil vols » (7549), où ces deux tuiles SONT le
     contenu de la page : elles y gardent leur pleine taille. Au-delà de
     600px, rien n'est touché : l'affichage ordinateur est inchangé. */
@media (max-width: 600px) {
	.page-id-5628 :is([id^="acaft-accueil-"], #acaft-accueil-1) .acaft-hero-container {
		gap: 14px !important;
	}

	.page-id-5628 :is([id^="acaft-accueil-"], #acaft-accueil-1) .acaft-hero-container > a.acaft-hero-btn {
		padding: 24px 20px 22px !important;
		border-radius: 14px !important;
	}

	.page-id-5628 :is([id^="acaft-accueil-"], #acaft-accueil-1) .acaft-hero-btn svg {
		width: 36px !important;
		height: 36px !important;
		margin-bottom: 12px !important;
	}

	.page-id-5628 :is([id^="acaft-accueil-"], #acaft-accueil-1) .acaft-hero-container a.acaft-hero-btn .acaft-hero-title {
		font-size: 17px !important;
		line-height: 1.25 !important;
		margin-bottom: 6px !important;
	}

	.page-id-5628 :is([id^="acaft-accueil-"], #acaft-accueil-1) .acaft-hero-container a.acaft-hero-btn .acaft-hero-desc {
		font-size: 13px !important;
		line-height: 1.4 !important;
	}

	.page-id-5628 :is([id^="acaft-accueil-"], #acaft-accueil-1) .acaft-hero-container a.acaft-hero-btn .acaft-hero-counter {
		margin-top: 12px !important;
		padding: 5px 14px !important;
		gap: 6px !important;
	}

	.page-id-5628 :is([id^="acaft-accueil-"], #acaft-accueil-1) .acaft-hero-container a.acaft-hero-btn .acaft-hero-counter-num {
		font-size: 18px !important;
	}

	.page-id-5628 :is([id^="acaft-accueil-"], #acaft-accueil-1) .acaft-hero-container a.acaft-hero-btn .acaft-hero-counter-label {
		font-size: 11.5px !important;
	}
}

/* ─── Confort et stabilité mobiles (19/08/2026) ────────────────────────────
   Trois correctifs issus de l'audit mobile du 19/08 (mesures PSI prod +
   relevés DOM au format 375 px). Chacun est indépendant des autres. */

/* 1. Glissade du bandeau cookies : en `transform`, plus en `bottom`.
   Complianz (module bottom-right-slide) pose `bottom:-50vh` puis anime vers
   `bottom:0` sur 1 s — or `bottom` est une propriété de MISE EN PAGE : chaque
   image de l'animation compte comme un décalage. Mesuré le 19/08 sur la prod :
   ~26 micro-décalages par chargement, CLS 0,089 sur TOUTES les pages (0,133
   sur /adhesion/), alors que le staging mesurait CLS 0 en juillet — c'est la
   glissade, posée le 18/08, qui l'a introduit.
   `transform` est composé par le GPU : même glissade à l'œil, zéro décalage.
   On ne remplace QUE `animation-name` : la durée (1 s) et `forwards` du
   raccourci Complianz restent en vigueur. `bottom` est reposé à 0 pour que la
   carte parte de sa position finale (le déplacement vient du transform seul).
   Spécificité : #id + div + classe > la règle #id + classe de Complianz. */
@keyframes acaft-bandeau-glissade {
	from { transform: translateY(calc(100% + 12px)); }
	to   { transform: translateY(0); }
}
#cmplz-cookiebanner-container div.cmplz-cookiebanner {
	bottom: 0;
	animation-name: acaft-bandeau-glissade;
}
/* Desktop : la carte flotte à 10 px du bord (Complianz pose bottom:10px hors
   mobile) — on lui rend cette assise, le transform faisant seul la glissade. */
@media (min-width: 769px) {
	#cmplz-cookiebanner-container div.cmplz-cookiebanner {
		bottom: 10px;
	}
}

/* 2. Cible tactile du bouton burger : 24×24 → 44×44.
   Le bouton du cœur n'a aucun padding : sa zone cliquable valait le trait
   dessiné (24 px), moitié moins que la cible tactile de référence (44 px) sur
   le contrôle le PLUS utilisé du site en mobile. Le padding agrandit la zone,
   la marge négative la reprend dans le flux : le trait ne bouge pas d'un pixel.
   `content-box` protège le calcul si un reset border-box passe par là. */
.acaft-entete .wp-block-navigation__responsive-container-open {
	box-sizing: content-box;
	padding: 10px;
	margin: -10px;
}

/* ─── Animations accueil — version D (19/08/2026) ──────────────────────────
   Portage de la maquette « version D hybride » validée par le responsable
   (refonte/maquettes/accueil-anim-20260818/version-d-hybride.html) : keyframes,
   easings et durées sont repris tels quels. Le script assets/js/acaft-anim-accueil.js
   ne fait que poser des classes et injecter le décor de trajectoire — AUCUN
   contenu de page ne porte de classe d'animation (une modification de contenu
   devrait être rejouée à la main en production).

   Invariant de la section : aucun état initial masquant en CSS pur. Toutes les
   règles `opacity: 0` / translation vivent derrière `html.acaft-anim`, classe
   posée AVANT PEINTURE par le filet de functions.php — et seulement là :
     • sans JavaScript → classe absente → page complète, rien de caché ;
     • en mouvement réduit → classe absente (le filet la refuse) → tout est
       figé dans son état final, y compris la trajectoire, tracée d'un coup ;
     • hors page d'accueil → classe absente (filet conditionné à is_front_page).
   Le bloc `prefers-reduced-motion` de fin de section est une simple ceinture
   (réglage changé en cours de session, sans rechargement).

   Tout le mouvement passe par `transform`, `opacity` et `background-size` :
   aucune propriété de mise en page, donc aucun décalage cumulé (CLS). */

:root {
	--acaft-entree: cubic-bezier(0.22, 0.8, 0.36, 1);
	--acaft-vol: cubic-bezier(0.45, 0.05, 0.25, 1);
}

/* ── 1. Trajectoire d'avion : décor injecté dans le héros ──────────────────
   Le SVG occupe toute la boîte du bandeau, viewBox 1000 × 300 en
   `xMidYMax meet` : x = 500 tombe TOUJOURS à mi-largeur, y = 300 TOUJOURS sur
   le bord bas — le disque d'origine reste donc tangent à la limite
   bandeau / section suivante à toute échelle, et `meet` interdit tout rognage.
   La courbe monte du bas-centre vers (938, 60), au niveau du surtitre ; elle
   traverse la fin du H1, à .45 d'opacité (voulu).
   Ce qui est écrit ici est l'état STATIQUE : trajectoire entièrement tracée,
   avion posé sur sa pointe. C'est exactement ce que voit un visiteur en
   mouvement réduit — l'animation, elle, est ajoutée par `.acaft-anim`. */
.acaft-heros-piste {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin-inline: auto;
	width: min(100%, 1600px);
	height: 100%;
	z-index: 1;
	pointer-events: none;
	--acaft-avion-ech: 0.75;
}
/* Paliers d'échelle : la silhouette garde ≈ 38 px à l'écran de 360 à 1440 px
   de large ; ses traits sont en `non-scaling-stroke` (jamais épaissis). */
@media (max-width: 1180px) { .acaft-heros-piste { --acaft-avion-ech: 0.9; } }
@media (max-width: 980px)  { .acaft-heros-piste { --acaft-avion-ech: 1.1; } }
@media (max-width: 820px)  { .acaft-heros-piste { --acaft-avion-ech: 1.35; } }
@media (max-width: 620px)  { .acaft-heros-piste { --acaft-avion-ech: 1.8; } }
@media (max-width: 440px)  { .acaft-heros-piste { --acaft-avion-ech: 2.6; } }

.acaft-piste-masque {
	stroke-dasharray: 503;
	stroke-dashoffset: 0;
}
/* Disque d'origine : cy = −5 dans le repère local, son bas touche donc y = 300
   quelle que soit l'échelle. */
.acaft-piste-origine {
	transform-box: view-box;
	transform-origin: 0 0;
	transform: translate(500px, 300px) scale(var(--acaft-avion-ech, 1));
}
.acaft-piste-avion {
	transform-box: view-box;
	transform-origin: 0 0;
	/* La pointe de la courbe atterrit là où le voile marine est le plus léger
	   (.72) : halo sombre pour que la silhouette y reste lisible. */
	filter: drop-shadow(0 1px 2px rgba(10, 20, 40, 0.6));
	transform: translate(938px, 60px) rotate(-24.6deg) scale(var(--acaft-avion-ech, 1));
}
/* Le texte du héros repasse au-dessus du décor. Règle de BASE (hors
   `.acaft-anim`) : la trajectoire est injectée en mouvement réduit aussi.
   Effet de bord assumé : les chevrons de `.acaft-heros::after` (z-index 1,
   opacité 7 %) passent désormais SOUS le texte au lieu de le survoler — la
   nuance n'est pas perceptible, et c'est le bon ordre. */
.acaft-heros > .wp-block-cover__inner-container {
	z-index: 2;
}

/* ── 2. Entrée du héros au chargement (~0,66 s) ────────────────────────────
   Animations et non transitions : une animation `both` se TERMINE toujours,
   même si le script d'accueil n'arrivait jamais — le héros ne peut pas rester
   masqué. Les quatre enfants du bloc sont, dans l'ordre : surtitre, H1,
   paragraphe d'intro, groupe de boutons. */
@keyframes acaft-entree-heros {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
html.acaft-anim .acaft-heros-inner > * {
	animation: acaft-entree-heros 0.42s var(--acaft-entree) both;
}
html.acaft-anim .acaft-heros-inner > :nth-child(2) { animation-delay: 0.08s; }
html.acaft-anim .acaft-heros-inner > :nth-child(3) { animation-delay: 0.16s; }
html.acaft-anim .acaft-heros-inner > :nth-child(4) { animation-delay: 0.24s; }

/* Surligneur doux du H1 : tracé de gauche à droite, une fois le titre posé.
   `background-repeat` doit être redit — la règle d'origine (section 2) emploie
   le raccourci `background`, qui remet la répétition à `repeat` : un fond
   dimensionné à 50 % s'y répéterait au lieu de se dévoiler. */
@keyframes acaft-trace-douce {
	from { background-size: 0 100%; }
	to   { background-size: 100% 100%; }
}
html.acaft-anim .acaft-heros .marque-jaune-doux {
	background-repeat: no-repeat;
	animation: acaft-trace-douce 0.8s var(--acaft-entree) 0.46s both;
}

/* Trajectoire : le trait se révèle par un masque (1,2 s), l'avion suit
   EXACTEMENT sa pointe. Le masque porte l'easing ; les 26 positions de l'avion
   ont été échantillonnées sur la même Bézier AVEC cet easing déjà appliqué,
   d'où son timing linéaire. Ne pas retoucher une image-clé isolément. */
@keyframes acaft-piste-fondu {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes acaft-piste-trace {
	to { stroke-dashoffset: 0; }
}
html.acaft-anim .acaft-heros-piste {
	animation: acaft-piste-fondu 0.6s ease both;
}
html.acaft-anim .acaft-piste-masque {
	stroke-dashoffset: 503;
	animation: acaft-piste-trace 1.2s var(--acaft-vol) 0.15s forwards;
}
html.acaft-anim .acaft-piste-avion {
	animation: acaft-piste-vol 1.2s linear 0.15s both;
}
@keyframes acaft-piste-vol {
	0% { opacity: 0; transform: translate(500.0px, 300.0px) rotate(-5.5deg) scale(var(--acaft-avion-ech, 1)); }
	4% { transform: translate(503.6px, 299.6px) rotate(-6.8deg) scale(var(--acaft-avion-ech, 1)); }
	8% { opacity: 1; transform: translate(510.3px, 298.7px) rotate(-9.3deg) scale(var(--acaft-avion-ech, 1)); }
	12% { transform: translate(520.8px, 296.6px) rotate(-12.7deg) scale(var(--acaft-avion-ech, 1)); }
	16% { transform: translate(536.0px, 292.6px) rotate(-16.9deg) scale(var(--acaft-avion-ech, 1)); }
	20% { transform: translate(556.7px, 285.4px) rotate(-21.4deg) scale(var(--acaft-avion-ech, 1)); }
	24% { transform: translate(584.0px, 273.3px) rotate(-25.9deg) scale(var(--acaft-avion-ech, 1)); }
	28% { transform: translate(618.2px, 255.2px) rotate(-29.6deg) scale(var(--acaft-avion-ech, 1)); }
	32% { transform: translate(658.6px, 230.9px) rotate(-32.2deg) scale(var(--acaft-avion-ech, 1)); }
	36% { transform: translate(701.7px, 202.9px) rotate(-33.5deg) scale(var(--acaft-avion-ech, 1)); }
	40% { transform: translate(743.1px, 175.3px) rotate(-33.8deg) scale(var(--acaft-avion-ech, 1)); }
	44% { transform: translate(779.6px, 151.0px) rotate(-33.3deg) scale(var(--acaft-avion-ech, 1)); }
	48% { transform: translate(810.5px, 131.1px) rotate(-32.4deg) scale(var(--acaft-avion-ech, 1)); }
	52% { transform: translate(836.3px, 115.0px) rotate(-31.4deg) scale(var(--acaft-avion-ech, 1)); }
	56% { transform: translate(857.6px, 102.3px) rotate(-30.3deg) scale(var(--acaft-avion-ech, 1)); }
	60% { transform: translate(875.3px, 92.2px) rotate(-29.3deg) scale(var(--acaft-avion-ech, 1)); }
	64% { transform: translate(889.8px, 84.1px) rotate(-28.4deg) scale(var(--acaft-avion-ech, 1)); }
	68% { transform: translate(901.8px, 77.8px) rotate(-27.5deg) scale(var(--acaft-avion-ech, 1)); }
	72% { transform: translate(911.6px, 72.8px) rotate(-26.8deg) scale(var(--acaft-avion-ech, 1)); }
	76% { transform: translate(919.4px, 68.8px) rotate(-26.2deg) scale(var(--acaft-avion-ech, 1)); }
	80% { transform: translate(925.6px, 65.8px) rotate(-25.7deg) scale(var(--acaft-avion-ech, 1)); }
	84% { transform: translate(930.4px, 63.5px) rotate(-25.3deg) scale(var(--acaft-avion-ech, 1)); }
	88% { transform: translate(933.9px, 61.9px) rotate(-25.0deg) scale(var(--acaft-avion-ech, 1)); }
	92% { transform: translate(936.2px, 60.8px) rotate(-24.8deg) scale(var(--acaft-avion-ech, 1)); }
	96% { transform: translate(937.6px, 60.2px) rotate(-24.7deg) scale(var(--acaft-avion-ech, 1)); }
	/* 100 % réaffirme `opacity: 1` : sans lui, la reprise de la valeur
	   sous-jacente (0) ferait disparaître l'avion à l'arrivée. */
	100% { opacity: 1; transform: translate(938.0px, 60.0px) rotate(-24.6deg) scale(var(--acaft-avion-ech, 1)); }
}

/* Micro-parallaxe de la photo : le script n'écrit QUE `transform`. L'échelle
   est posée ici, avant peinture, pour qu'aucun saut de cadrage ne se voie au
   démarrage du script. 1,12 donne 6 % de marge en haut et en bas — exactement
   la descente maximale (6 % de la hauteur du héros) : aucun bord n'apparaît. */
html.acaft-anim .acaft-heros > .wp-block-cover__image-background {
	transform: scale(1.12);
	will-change: transform;
}

/* ── 3. Révélations au défilement ──────────────────────────────────────────
   `.acaft-reveler` est posée par le script sur les morceaux qu'il a repérés
   (titres, colonnes, cartes d'actualités, boutons) : rien de tel n'existe dans
   le contenu, et si le script ne tournait pas, aucun élément ne porterait cet
   état initial. Cascade de 70 ms à l'intérieur d'une même section, une seule
   fois (le script cesse d'observer une section révélée). */
html.acaft-anim .acaft-reveler {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s ease, transform 0.55s var(--acaft-entree);
}
html.acaft-anim .acaft-reveler.est-visible {
	opacity: 1;
	transform: none;
}

/* Surligneur jaune des titres de section : même tracé que le survol du thème,
   déclenché à l'entrée dans le champ (180 ms après le titre). Le voile lui-même
   (couleur, géométrie, box-decoration-break) reste défini en section 3. */
html.acaft-anim .acaft-reveler .acaft-marque-texte {
	background-repeat: no-repeat;
	background-size: 0 100%;
	transition: background-size 0.75s var(--acaft-entree);
}
html.acaft-anim .acaft-reveler.est-trace .acaft-marque-texte {
	background-size: 100% 100%;
}

/* Chiffres clés comptés : chasse fixe le temps du décompte, sinon la largeur
   du nombre danse à chaque image. */
html.acaft-anim .acaft-chiffre {
	font-variant-numeric: tabular-nums;
}

/* ── 4. Bandeau d'adhésion final ───────────────────────────────────────────
   Le titre monte d'un bloc derrière un masque : il garde `.acaft-reveler`
   (donc le même observateur et la même cascade) mais délègue le mouvement à
   l'enveloppe posée par le script. Le rembourrage bas, repris en marge
   négative, laisse passer les jambages sans rien décaler. */
html.acaft-anim .acaft-titre-masque {
	opacity: 1;
	transform: none;
	transition: none;
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
html.acaft-anim .acaft-titre-masque > .acaft-ligne {
	display: block;
	transform: translateY(125%);
	transition: transform 0.85s var(--acaft-entree);
}
html.acaft-anim .acaft-titre-masque.est-visible > .acaft-ligne {
	transform: none;
}

/* Micro-pulse d'ombre du bouton d'adhésion — une seule fois. */
@keyframes acaft-pulse {
	from { box-shadow: 0 0 0 0 rgba(255, 221, 142, 0.55); }
	to   { box-shadow: 0 0 0 24px rgba(255, 221, 142, 0); }
}
html.acaft-anim .acaft-pulse {
	animation: acaft-pulse 1.1s ease-out 1;
}

/* ── 5. Mouvement réduit : ceinture ────────────────────────────────────────
   `.acaft-anim` n'est jamais posée en mouvement réduit : ces règles ne servent
   qu'au réglage changé en cours de session, sans rechargement. Tout est figé
   dans son état final — la page reste complète, la trajectoire entièrement
   tracée et l'avion posé sur sa pointe. */
@media (prefers-reduced-motion: reduce) {
	html.acaft-anim .acaft-heros-inner > *,
	html.acaft-anim .acaft-reveler,
	html.acaft-anim .acaft-titre-masque > .acaft-ligne {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	html.acaft-anim .acaft-heros .marque-jaune-doux,
	html.acaft-anim .acaft-reveler .acaft-marque-texte {
		background-size: 100% 100% !important;
		animation: none !important;
		transition: none !important;
	}
	html.acaft-anim .acaft-heros > .wp-block-cover__image-background {
		transform: none !important;
		will-change: auto;
	}
	html.acaft-anim .acaft-heros-piste {
		opacity: 1 !important;
		animation: none !important;
	}
	html.acaft-anim .acaft-piste-masque {
		stroke-dashoffset: 0 !important;
		animation: none !important;
	}
	html.acaft-anim .acaft-piste-avion {
		opacity: 1 !important;
		animation: none !important;
		transform: translate(938px, 60px) rotate(-24.6deg) scale(var(--acaft-avion-ech, 1)) !important;
	}
	html.acaft-anim .acaft-pulse {
		animation: none !important;
	}
}