/*
Theme Name:   Firalis
Theme URI:    https://www.firalis.com
Description:  Thème enfant du site de marque Firalis (Firalis SAS). Direction visuelle C « Cristal matière » (refonte 0.9.0, docs/85). Autonome : aucune dépendance au thème groupe. Symlink depuis le hub de développement.
Author:       Firalis
Template:     twentytwentyfive
Version:      0.9.3
Text Domain:  firalis
*/

/* ═════════════════════════════════════════════════════════════════════
   SOCLE v2 — direction C « Cristal matière » (lot S-a, 13/11/2026)
   docs/85-refonte-design/30-plan-implementation.md (fait foi), 23-direction-C.md,
   maquette .previews/refonte/directions/C/ ; contrat des composants pour les lots
   de pages : docs/85-refonte-design/lots/s-a.md ; catalogue vivant : /components/.

   ⚠️ FICHIER DU SOCLE (lot S-a). Une page ajoute ses règles dans css/<page>.css
   (classes .fsa-<page>__*). Un besoin de composant partagé passe par le lead.

   Règles de ce fichier :
   1. Couleurs et tailles UNIQUEMENT par variables (couche §0) ; teintes dérivées
      par color-mix(). Rayon 0 partout ; aucune ombre, sauf ce qui flotte.
   2. Chaque bande porte un TON (paper · tint · blue · navy) ; texte, filets, liens,
      boutons et couleurs du treillis en découlent (§2). Jonctions franches ;
      réserves par VOISINAGE DE TON (`.fsa-sec + .fsa-cta`), jamais par position.
   3. Sur-titre : mono une fois par page, dans le hero ; ailleurs le même texte
      devient le « repère de marge » (Plex Sans). Le mono reste aux données.
   4. Aucun texte en CSS (`content:` = décor) ; aucun texte masqué.
   5. Tout est visible sans JS, dans le canevas de l'éditeur (pas de CSS imbriquée)
      et en mouvement réduit.

   Sommaire
     0. Jetons (alias --fsa-*, échelle C, rythme, glyphes)
     1. Base
     2. Tons de bande, jonctions
     3. Grammaire : titres, repère de marge, sur-titre, souligné, chapô, boutons, liens, étiquettes
     4. En-tête navy, rideau (méga-menu), menu mobile
     5. Bandes, têtes de section, grilles
     6. Ouvertures (heros) partagées, fil d'Ariane, sous-onglets, photos
     7. Portes (cartes), features
     8. Données : chiffres, socle de faits, chaîne, statuts, jauge, jalons
     9. Moment fort navy (panneau), processus collant
    10. Registre, définitions, rangées, tableau
    11. Actualités, filtres, pagination
    12. CTA bleu, encadré, figure
    13. Formulaires
    14. Texte long
    15. Pied navy
    16. SVG, marqueur « à valider »
    17. Mouvement : révélations, mouvement réduit
   ═════════════════════════════════════════════════════════════════════ */


/* ═════════════════════════════════════════════════════════════════════
   0. JETONS — seul endroit du fichier où une valeur est écrite
   ═════════════════════════════════════════════════════════════════════ */

/* Variables animées : --fsa-p = progression d'un processus collant (0 → 1), posée par
   site.js ; valeur initiale = image finale (sans JS, canevas, mouvement réduit). */
@property --fsa-p { syntax: '<number>'; inherits: true; initial-value: 1; }

:root {
	/* Marque Firalis (tokens.json → company.firalis*) */
	--fsa-brand: var(--fi-company-firalis);             /* #3F61FE — aplats, treillis, bouton (blanc dessus 4.82:1) */
	--fsa-brand-ink: var(--fi-company-firalis-ink);     /* #0038B0 — SEUL bleu pour du texte sur clair */
	--fsa-brand-light: var(--fi-company-firalis-light); /* #99B4FF — décor ; texte sur navy (8.56:1) */
	--fsa-paper: var(--fi-color-on-brand);              /* blanc */
	--fsa-tint: color-mix(in srgb, var(--fsa-brand) 9%, var(--fsa-paper));   /* ≈ #EEF2FF petits aplats */
	--fsa-mist: color-mix(in srgb, var(--fsa-brand) 5%, var(--fsa-paper));   /* ≈ #F5F7FF */

	/* Famille groupe (tokens.json → color) */
	--fsa-navy: var(--fi-color-ink-2);          /* #0C1B2A en-tête, moment fort, pied */
	--fsa-navy-deep: var(--fi-color-ink);       /* #0A1520 */
	--fsa-ink: var(--fi-color-ink);             /* titres */
	--fsa-text: var(--fi-color-text);           /* courant */
	--fsa-muted: var(--fi-color-muted);         /* 5.73:1 sur papier, 4.96:1 sur teinte */
	--fsa-noise: var(--fi-color-noise);         /* « bruit » du treillis */
	--fsa-line: var(--fi-color-line);
	--fsa-line-strong: var(--fi-color-line-strong);
	--fsa-line-dark: var(--fi-color-line-dark);
	--fsa-surface: var(--fi-color-surface);     /* papier #FCFDFE */
	--fsa-surface-alt: var(--fi-color-surface-alt);
	--fsa-on-dark: var(--fi-color-on-dark);
	--fsa-on-dark-muted: var(--fi-color-on-dark-muted);
	--fsa-on-dark-strong: var(--fi-color-on-dark-strong);
	--fsa-group-a: var(--fi-color-mark-a);
	--fsa-group-b: var(--fi-color-mark-b);
	/* C : la TEINTE de bande est franche (bleu 12 %, ≈ #E8ECFF) ; --fsa-muted 4,96:1,
	   --fsa-brand-ink 8,1:1, --fsa-text 13,5:1. Avant (0.8.0) : bleu 4 % sur surface-alt. */
	--fsa-band: color-mix(in srgb, var(--fsa-brand) 12%, var(--fsa-paper));
	--fsa-line-on-dark-strong: color-mix(in srgb, var(--fsa-line-dark) 55%, var(--fsa-on-dark-muted));
	/* Héritage 0.8.0 (feuilles de page) : filet de scène, point de trame. */
	--fsa-stage-line: color-mix(in srgb, var(--fsa-brand) 14%, var(--fsa-paper));
	--fsa-dot: color-mix(in srgb, var(--fsa-brand) 11%, transparent);
	--fsa-dots: radial-gradient(circle, var(--fsa-dot) 1px, transparent 1.3px) 0 0 / 14px 14px;
	--fsa-hex: radial-gradient(circle, color-mix(in srgb, var(--fsa-brand-light) 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 24px 20.8px,
		radial-gradient(circle, color-mix(in srgb, var(--fsa-brand-light) 22%, transparent) 1.2px, transparent 1.6px) 12px 10.4px / 24px 20.8px;
	--fsa-hex-brand: radial-gradient(circle, color-mix(in srgb, var(--fsa-brand) 60%, transparent) 1.4px, transparent 1.8px) 0 0 / 16px 13.86px,
		radial-gradient(circle, color-mix(in srgb, var(--fsa-brand) 60%, transparent) 1.4px, transparent 1.8px) 8px 6.93px / 16px 13.86px;

	/* Formes C : RAYON 0 partout, AUCUNE ombre (« transparent » et non « none » : les
	   feuilles de page composent « var(--fsa-sh-1), var(--fsa-ring) »). Seul ce qui
	   flotte (dialogue, carte posée) prend --fsa-sh-float. */
	--fsa-r-xs: 0px;
	--fsa-r-s: 0px;
	--fsa-r-m: 0px;
	--fsa-r-l: 0px;
	--fsa-r-xl: 0px;
	--fsa-r-pill: 0px;
	--fsa-sh-1: 0 0 #0000;
	--fsa-sh-2: 0 0 #0000;
	--fsa-sh-3: 0 0 #0000;
	--fsa-ring: 0 0 #0000;
	--fsa-ring-brand: 0 0 #0000;
	--fsa-sh-float: 0 24px 60px -24px color-mix(in srgb, var(--fsa-navy) 45%, transparent);

	/* Mise en page (12 colonnes, conteneur 1240) */
	--fsa-container: var(--fi-container-max);   /* 1240px */
	--fsa-narrow: var(--fi-container-narrow);   /* 760px, colonne de lecture */
	--fsa-gutter: clamp(20px, 4vw, 48px);
	--fsa-col-gap: clamp(16px, 2vw, 32px);      /* gouttière de la trame */
	--fsa-gap: clamp(1rem, 2vw, 2rem);          /* écart des grilles */
	--fsa-section: clamp(4.5rem, 2.8rem + 5.2vw, 7.5rem); /* réserve de bande 72 → 120 px (131 au lot S-a ; passe F : hauteur 0.8.0) */
	--fsa-section-flow: calc(var(--fsa-section) * .5);   /* deux bandes voisines de même ton */
	--fsa-head-gap: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); /* tête de section → contenu */
	--fsa-card-pad: clamp(1.4rem, 2.6vw, 2rem);  /* retrait d'un aplat qui porte du texte */
	--fsa-hdr-h: 72px;
	--fsa-endorse-h: 34px;
	/* Points de rupture (normatifs ; pas de variable possible dans @media) :
	   1080 en-tête → menu mobile · 1023 trame 12 → 1 colonne · 760 téléphone · 600 · 420. */

	/* Familles (theme.json → presets, générés depuis theme.overrides.json) */
	--fsa-font-title: var(--wp--preset--font-family--display); /* Poppins */
	--fsa-font-sans: var(--wp--preset--font-family--sans);     /* IBM Plex Sans */
	--fsa-font-mono: var(--wp--preset--font-family--mono);     /* IBM Plex Mono */

	/* Échelle C (390 → 1440). Poppins 600 pour « Firalis » seul, 500 ailleurs. */
	--fsa-fs-display: clamp(4.25rem, 2.2rem + 7.6vw, 9rem);    /* 68 → 144 */
	--fsa-fs-h1: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem);       /* 44 → 88 */
	--fsa-fs-h1-line: clamp(1.75rem, 1.25rem + 1.9vw, 3rem);   /* ligne sous « Firalis » 28 → 48 */
	--fsa-fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);         /* 32 → 56 */
	--fsa-fs-h2-step: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem); /* titre d'étape 28 → 44 */
	--fsa-fs-h3: clamp(1.25rem, 1.1rem + .55vw, 1.625rem);     /* 20 → 26 */
	--fsa-fs-h4: clamp(1.125rem, 1.06rem + .25vw, 1.25rem);    /* 18 → 20 */
	--fsa-fs-cta: clamp(2.125rem, 1.4rem + 2.6vw, 3.75rem);    /* titre du CTA 34 → 60 (passe F : 76 allongeait chaque page) */
	--fsa-fs-fig: clamp(4.5rem, 1.6rem + 9.4vw, 10.5rem);      /* chiffres du moment fort 72 → 168 */
	--fsa-fs-code: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);    /* code ISO d'un socle 22 → 28 */
	--fsa-fs-std: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);       /* norme d'un registre 24 → 34 */
	--fsa-fs-lead: clamp(1.125rem, 1.02rem + .38vw, 1.375rem); /* chapô 18 → 22 */
	--fsa-fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem);     /* corps 16 → 17 */
	--fsa-fs-kicker: .875rem;    /* repère de marge 14 */
	--fsa-fs-label: .875rem;     /* libellé (passe G) : le repère de marge sans la triade, 14 */
	--fsa-fs-data: .8125rem;     /* donnée mono 13 */
	--fsa-fs-card-title: var(--fsa-fs-h3);
	/* Héritage 0.8.0 (feuilles de page et composants) */
	--fsa-fs-3xs: .5625rem;
	--fsa-fs-2xs: .6875rem;
	--fsa-fs-xs: .75rem;
	--fsa-fs-s: .8125rem;
	--fsa-fs-sm: .875rem;
	--fsa-fs-m: .9375rem;
	--fsa-fs-base: 1rem;
	--fsa-fs-h3-lg: clamp(1.6rem, 1.25rem + 1vw, 2.15rem);
	--fsa-fs-stat: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	--fsa-fs-big: var(--fsa-fs-fig);
	--fsa-fs-btn: .975rem;
	--fsa-fs-tab: .9375rem;
	--fsa-fs-card: .96875rem;
	--fsa-fs-mnav: 1.25rem;
	--fsa-fs-num: 1.6rem;
	--fsa-fs-gauge: clamp(1.5rem, 1.15rem + .9vw, 1.95rem);
	--fsa-fs-prose-h2: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	--fsa-fs-glock: 1.125rem;
	--fsa-fs-glock-unit: .625rem;
	--fsa-fs-svg: 9.5px;

	/* Mouvement */
	--fsa-ease: cubic-bezier(.22, .61, .36, 1);
	--fsa-ease-out: cubic-bezier(.16, 1, .3, 1);
	--fsa-dur: .18s;

	/* Photos : COULEURS NATURELLES (décision du 13/11, doc 30) — aucun étalonnage. Les
	   jetons de firalis-core restent définis pour les feuilles qui les lisent encore. */
	--fsa-photo-tone: none;
	--fsa-photo-tone-deep: none;

	/* Vague du logo : deux tons, traversent le <use href="#fsa-wave"> */
	--fsa-wave-a: var(--fsa-brand);
	--fsa-wave-b: var(--fsa-brand-light);

	/* Glyphes (masques SVG : la couleur vient du fond posé dessous) */
	--fsa-glyph-triad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Ccircle cx='2' cy='9' r='2'/%3E%3Ccircle cx='10' cy='9' r='2'/%3E%3Ccircle cx='6' cy='2' r='2'/%3E%3C/svg%3E");
	--fsa-glyph-hex-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpolygon points='10,1.6 18.4,6.3 18.4,15.7 10,20.4 1.6,15.7 1.6,6.3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='10' cy='11' r='2.2'/%3E%3C/svg%3E");
	--fsa-glyph-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpolygon points='10,0.8 19.2,5.9 19.2,16.1 10,21.2 0.8,16.1 0.8,5.9'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
	:root { --fsa-hdr-h: 64px; }
}


/* ═════════════════════════════════════════════════════════════════════
   1. BASE
   ═════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* Pas de ligatures courantes (docs/77 R-14) : « firalisgroup.com », « certified »… Sur
   tous les éléments : le raccourci « font: » les remet à leur valeur initiale. */
*, *::before, *::after { font-variant-ligatures: no-common-ligatures !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--fsa-hdr-h) + 16px);
}

body {
	margin: 0;
	background: var(--fsa-surface);
	color: var(--fsa-text);
	font-family: var(--fsa-font-sans);
	font-size: var(--fsa-fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Marges : zéro par défaut (spécificité nulle) ; chaque composant pose les siennes. */
:where(p, h1, h2, h3, h4, h5, h6, dl, dd, figure, blockquote, address) { margin-block: 0; }
:where(dd, figure) { margin-inline: 0; }
:where(address) { font-style: normal; }
:where(img, svg, video, canvas) { max-width: 100%; }
:where(img) { height: auto; }
button { font: inherit; color: inherit; }
:where(p) { text-wrap: pretty; }

/* Filet de césure (FIX-1, docs/82-lots/fix-1) : un mot plus large que sa boîte se coupe
   au lieu de sortir de l'écran ; titres : « anywhere » + césure des mots ≥ 16 signes. */
body { overflow-wrap: break-word; }
:is(h1, h2, h3, h4, .fsa-h1, .fsa-h2, .fsa-h3, .fsa-h4, .fsa-display, .fsa-eyebrow, .fsa-kicker, .fsa-feature__t, .fsa-ftr a, .fsa-meta dd) { overflow-wrap: anywhere; }
@supports (hyphenate-limit-chars: 16 7 6) {
	:is(h1, h2, h3, h4, .fsa-h1, .fsa-h2, .fsa-h3, .fsa-h4, .fsa-display, .fsa-feature__t) { hyphens: auto; hyphenate-limit-chars: 16 7 6; }
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fsa-font-title);
	font-weight: 500;
	color: var(--fsa-fg-strong, var(--fsa-ink));
	letter-spacing: -.02em;
	text-wrap: balance;
}

a { color: var(--fsa-link, var(--fsa-brand-ink)); }
a:where(:not([class])) { text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:where(:not([class])):hover { text-decoration-thickness: 2px; }

.wp-site-blocks > * { margin-block: 0; }
.fsa-sections > * { margin-block: 0; }

/* Focus clavier visible, partout, dans la couleur de focus du ton. */
:focus-visible {
	outline: 2px solid var(--fsa-focus, var(--fsa-brand-ink));
	outline-offset: 3px;
	border-radius: 0;
}
/* Le parent imprime un contour au CLIC : il ne reste qu'au clavier. */
:focus:not(:focus-visible) { outline: none; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 300;
	width: auto;
	height: auto;
	margin: 0;
	padding: .7rem 1.1rem;
	clip: auto;
	clip-path: none;
	background: var(--fsa-brand);
	color: var(--fsa-paper);
	font-weight: 500;
	text-decoration: none;
	outline-color: var(--fsa-paper); /* posé sur l'en-tête navy : contour blanc (passe G, audit a11y P2-1) */
}

/* Conteneur 1240 px (trame de 12) */
.fsa-wrap {
	width: min(100% - 2 * var(--fsa-gutter), var(--fsa-container));
	margin-inline: auto;
}
.fsa-wrap--narrow { width: min(100% - 2 * var(--fsa-gutter), var(--fsa-narrow)); }


/* ═════════════════════════════════════════════════════════════════════
   2. TONS DE BANDE, JONCTIONS
   Le ton fixe tout : --fsa-bg, --fsa-fg (-strong, -soft), --fsa-rule (-strong),
   --fsa-link, --fsa-accent, --fsa-btn-bg / -fg, --fsa-focus et les couleurs du
   treillis --fsa-lat-* (nn bruit · no ordre · nf cristal · nb cristal arrière ·
   bond liaison · cb liaison arrière · trace chemin), lues par le cristal (lot S-b).
   Racines : .fsa-sec (papier) · .fsa-sec--alt (teinte, posée par le MOTEUR — ne
   jamais l'écrire) · .fsa-cta / .fsa-on-blue (bleu) · .fsa-hero-inner--navy,
   .fsa-sec--navy, .fsa-panel, .fsa-on-dark (navy). Classes de ton explicites pour
   un élément interne : .fsa-t-paper · .fsa-t-tint · .fsa-t-blue · .fsa-t-navy
   (posent aussi le fond).
   ═════════════════════════════════════════════════════════════════════ */
:root,
.fsa-sec,
.fsa-t-paper {
	--fsa-bg: var(--fsa-surface);
	--fsa-fg: var(--fsa-text);
	--fsa-fg-strong: var(--fsa-ink);
	--fsa-fg-soft: var(--fsa-muted);
	--fsa-rule: var(--fsa-line);
	--fsa-rule-strong: var(--fsa-line-strong);
	--fsa-link: var(--fsa-brand-ink);
	--fsa-accent: var(--fsa-brand);
	--fsa-btn-bg: var(--fsa-brand);
	--fsa-btn-fg: var(--fsa-paper);
	--fsa-btn-hover: initial;
	--fsa-focus: var(--fsa-brand-ink);
	--fsa-lat-nn: var(--fsa-noise);
	--fsa-lat-no: var(--fsa-brand);
	--fsa-lat-nf: var(--fsa-brand);
	--fsa-lat-nb: var(--fsa-brand-light);
	--fsa-lat-bond: var(--fsa-brand);
	--fsa-lat-cb: var(--fsa-brand-light);
	--fsa-lat-trace: var(--fsa-brand-ink);
	--fsa-lat-gnb: color-mix(in srgb, var(--fsa-brand) 55%, var(--fsa-brand-light)); /* glyphe-habit sur clair (css/crystal.css § 5) */
	--fsa-lat-gcb: color-mix(in srgb, var(--fsa-brand) 55%, var(--fsa-brand-light));
}
.fsa-sec--alt,
.fsa-t-tint {
	--fsa-bg: var(--fsa-band);
	--fsa-fg: var(--fsa-text);
	--fsa-fg-strong: var(--fsa-ink);
	--fsa-fg-soft: var(--fsa-muted);
	--fsa-rule: color-mix(in srgb, var(--fsa-brand) 18%, var(--fsa-paper));
	--fsa-rule-strong: color-mix(in srgb, var(--fsa-brand) 32%, var(--fsa-paper));
	--fsa-link: var(--fsa-brand-ink);
	--fsa-accent: var(--fsa-brand);
	--fsa-btn-bg: var(--fsa-brand);
	--fsa-btn-fg: var(--fsa-paper);
	--fsa-btn-hover: initial;
	--fsa-focus: var(--fsa-brand-ink);
	--fsa-lat-nn: color-mix(in srgb, var(--fsa-noise) 55%, var(--fsa-brand));
	--fsa-lat-no: var(--fsa-brand);
	--fsa-lat-nf: var(--fsa-brand);
	--fsa-lat-nb: color-mix(in srgb, var(--fsa-brand-light) 70%, var(--fsa-brand));
	--fsa-lat-bond: var(--fsa-brand);
	--fsa-lat-cb: color-mix(in srgb, var(--fsa-brand-light) 70%, var(--fsa-brand));
	--fsa-lat-trace: var(--fsa-brand-ink);
	--fsa-lat-gnb: color-mix(in srgb, var(--fsa-brand) 55%, var(--fsa-brand-light));
	--fsa-lat-gcb: color-mix(in srgb, var(--fsa-brand) 55%, var(--fsa-brand-light));
}
.fsa-cta,
.fsa-on-blue,
.fsa-t-blue {
	--fsa-bg: var(--fsa-brand);
	--fsa-fg: var(--fsa-paper);
	--fsa-fg-strong: var(--fsa-paper);
	--fsa-fg-soft: var(--fsa-paper);
	--fsa-rule: color-mix(in srgb, var(--fsa-paper) 34%, transparent);
	--fsa-rule-strong: color-mix(in srgb, var(--fsa-paper) 58%, transparent);
	--fsa-link: var(--fsa-paper);
	--fsa-accent: var(--fsa-paper);
	--fsa-btn-bg: var(--fsa-paper);
	--fsa-btn-fg: var(--fsa-navy);
	--fsa-btn-hover: color-mix(in srgb, var(--fsa-paper) 88%, var(--fsa-brand)); /* blanc bleuté, jamais gris */
	--fsa-focus: var(--fsa-paper);
	--fsa-lat-nn: var(--fsa-paper);
	--fsa-lat-no: var(--fsa-paper);
	--fsa-lat-nf: var(--fsa-paper);
	--fsa-lat-nb: color-mix(in srgb, var(--fsa-brand-light) 55%, var(--fsa-paper));
	--fsa-lat-bond: var(--fsa-paper);
	--fsa-lat-cb: color-mix(in srgb, var(--fsa-brand-light) 55%, var(--fsa-paper));
	--fsa-lat-trace: var(--fsa-paper);
	--fsa-lat-gnb: initial;
	--fsa-lat-gcb: initial;
}
.fsa-sec--navy,
.fsa-hero-inner--navy,
.fsa-on-dark,
.fsa-t-navy {
	--fsa-bg: var(--fsa-navy);
	--fsa-fg: var(--fsa-on-dark);
	--fsa-fg-strong: var(--fsa-on-dark-strong);
	--fsa-fg-soft: var(--fsa-on-dark-muted);
	--fsa-rule: var(--fsa-line-dark);
	--fsa-rule-strong: var(--fsa-line-on-dark-strong);
	--fsa-link: var(--fsa-brand-light);
	--fsa-accent: var(--fsa-brand-light);
	--fsa-btn-bg: var(--fsa-brand);
	--fsa-btn-fg: var(--fsa-paper);
	--fsa-btn-hover: initial;
	--fsa-focus: var(--fsa-brand-light);
	--fsa-lat-nn: var(--fsa-on-dark-muted);
	--fsa-lat-no: var(--fsa-brand-light);
	--fsa-lat-nf: var(--fsa-paper);
	--fsa-lat-nb: var(--fsa-brand);
	--fsa-lat-bond: var(--fsa-brand-light);
	--fsa-lat-cb: var(--fsa-brand);
	--fsa-lat-trace: var(--fsa-paper);
	--fsa-lat-gnb: initial;
	--fsa-lat-gcb: initial;
}
/* Une bande pose son fond et sa couleur de texte ; un contexte .fsa-on-* ne fait que
   recolorer (il peut être posé sur un élément sans fond propre). */
.fsa-sec,
.fsa-cta,
.fsa-hero-inner--navy,
.fsa-t-paper,
.fsa-t-tint,
.fsa-t-blue,
.fsa-t-navy { background-color: var(--fsa-bg); color: var(--fsa-fg); }
.fsa-on-dark,
.fsa-on-blue { color: var(--fsa-fg); }

/* Jonctions : FRANCHES entre deux tons (passe F du 13/11). Les « coutures » de la maquette
   (la couleur voisine qui précipite en nœuds au bord d'un aplat bleu ou navy) se lisaient à
   l'écran comme un défaut d'affichage : retirées partout, de la même façon. Le treillis
   reste l'affaire des champs (inc/crystal.php). */
.fsa-cta,
.fsa-sec--navy { position: relative; isolation: isolate; }


/* ═════════════════════════════════════════════════════════════════════
   3. GRAMMAIRE
   ═════════════════════════════════════════════════════════════════════ */

/* Repère de marge (C) : le sur-titre d'une bande, en Plex Sans 500 14, précédé du
   nœud-triade, dans la marge gauche (colonnes 1–3) quand la tête de section a sa
   marge (§5). C'est la forme PAR DÉFAUT de .fsa-eyebrow hors hero ; .fsa-kicker
   l'impose. Aucun texte masqué : le sur-titre existant change de forme seulement. */
.fsa-eyebrow,
.fsa-kicker,
.fi-pagehead .fi-eyebrow {
	display: flex;
	align-items: flex-start;
	align-self: start;
	gap: 10px;
	margin: 0 0 1rem;
	font: 500 var(--fsa-fs-kicker)/1.35 var(--fsa-font-sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--fsa-fg-soft);
}
.fsa-eyebrow::before,
.fsa-kicker::before,
.fi-pagehead .fi-eyebrow::before {
	content: "";
	flex: none;
	width: 12px;
	height: 11px;
	margin-top: calc((1.35em - 11px) / 2); /* centré sur la PREMIÈRE ligne (repère sur 2 lignes, ou étiré en grille) */
	background: var(--fsa-accent);
	-webkit-mask: var(--fsa-glyph-triad) center / contain no-repeat;
	mask: var(--fsa-glyph-triad) center / contain no-repeat;
}
/* Sur-titre MONO : une fois par page, dans le hero (marqueur de la famille groupe),
   casse saisie, sans filet. Automatique dans toute ouverture ; .fsa-eyebrow--mono
   l'impose (à réserver au hero). */
:is(.fsa-hero-inner, .fsa-home__hero, .fsa-hero) .fsa-eyebrow,
.fsa-eyebrow--mono {
	font: 500 var(--fsa-fs-data)/1.35 var(--fsa-font-mono);
	letter-spacing: .02em;
	color: var(--fsa-fg-strong);
	margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
}

/* Souligné du client [[…]] : une rangée de NŒUDS sous les mots (ni couleur, ni gras) ;
   suit les retours à la ligne. Dans le H1, un H2 par page et le titre du CTA. */
.fsa-hl {
	background-image: radial-gradient(circle closest-side, color-mix(in srgb, currentColor 72%, transparent) 0 42%, transparent 60%);
	background-size: clamp(5px, .135em, 11px) clamp(5px, .135em, 11px);
	background-repeat: repeat-x;
	background-position: 0 94%; /* centre à ≈ .21 em sous la ligne de base (Poppins : boîte de 1,4 em) */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* Un titre souligné : de quoi loger la rangée entre deux lignes (passe G, audit design P2-1 :
   avec Poppins, à .98, elle touchait les ascendantes de la ligne suivante). */
:is(.fsa-h1, .fsa-h2, .fsa-moment__title):has(.fsa-hl),
.fsa-hero-inner :is(h1, .fsa-h1):has(.fsa-hl) { line-height: 1.05; }
.fsa-brandword { color: var(--fsa-link); }

/* Titres (classes : un h2 peut prendre .fsa-h1 si la hiérarchie l'exige) */
.fsa-display {
	display: block;
	font: 600 var(--fsa-fs-display)/.86 var(--fsa-font-title);
	letter-spacing: -.035em; /* passe G : réglé sur Poppins (−.045 : « l » et « i » se touchaient) */
	color: var(--fsa-fg-strong);
	margin-left: -.05em;
}
.fsa-h1 { font-size: var(--fsa-fs-h1); line-height: .98; letter-spacing: -.04em; }
.fsa-h2 { font-size: var(--fsa-fs-h2); line-height: 1.06; letter-spacing: -.03em; }
.fsa-h3 { font-size: var(--fsa-fs-h3); line-height: 1.2; letter-spacing: -.012em; }
.fsa-h4 { font-size: var(--fsa-fs-h4); line-height: 1.3; letter-spacing: -.01em; }
.fsa-h2--step { font-size: var(--fsa-fs-h2-step); line-height: 1.08; letter-spacing: -.028em; }
:is(.fsa-h1, .fsa-h2, .fsa-h3, .fsa-h4) { font-family: var(--fsa-font-title); font-weight: 500; color: var(--fsa-fg-strong); text-wrap: balance; }

/* Chapô (Plex 18 → 22) */
.fsa-lead {
	font-size: var(--fsa-fs-lead);
	line-height: 1.5;
	color: var(--fsa-fg);
}
.fsa-small { font-size: var(--fsa-fs-sm); line-height: 1.5; color: var(--fsa-fg-soft); }

/* Donnée mono (codes, dates, références, n°) : Plex Mono 13, casse saisie. */
.fsa-mono,
.fsa-data {
	font: 500 var(--fsa-fs-data)/1.4 var(--fsa-font-mono);
	letter-spacing: .02em;
	text-transform: none;
	color: var(--fsa-fg-soft);
}
/* Un lien dans une donnée (n° NCT d'une fiche) : 44 px au doigt (passe G, audit a11y P2-6). */
@media (max-width: 1080px) {
	dd:is(.fsa-mono, .fsa-data) > a { display: inline-block; padding-block: 7px; }
}

/* Flèche décorative des boutons (<span class="fsa-arr">→</span>) */
.fsa-arr { display: inline-block; transition: translate var(--fsa-dur) var(--fsa-ease-out); }

/* Boutons — <a>/<button> .fsa-btn OU bloc natif core/button (styles « Firalis — … »).
   Rectangle plein, rayon 0, sans ombre ; couleurs DU TON (bleu sur papier, blanc sur
   bleu, bleu sur navy). --ghost : contour. --white : blanc (bande bleue). */
.fsa-btn,
.wp-block-button[class*="is-style-fsa-"] > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .65em;
	min-height: 50px;
	padding: .75rem 1.5rem;
	border: 1px solid var(--fsa-btn-bg);
	border-radius: 0;
	background: var(--fsa-btn-bg);
	color: var(--fsa-btn-fg);
	font: 500 var(--fsa-fs-btn)/1.15 var(--fsa-font-title);
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--fsa-dur) ease, border-color var(--fsa-dur) ease, color var(--fsa-dur) ease;
}
.fsa-btn:hover,
.wp-block-button[class*="is-style-fsa-"]:not(.is-style-fsa-arrow) > .wp-block-button__link:hover {
	background: var(--fsa-btn-hover, color-mix(in srgb, var(--fsa-btn-bg) 86%, var(--fsa-navy)));
	border-color: var(--fsa-btn-hover, color-mix(in srgb, var(--fsa-btn-bg) 86%, var(--fsa-navy)));
	color: var(--fsa-btn-fg);
}
.fsa-btn:hover .fsa-arr,
.wp-block-button__link:hover .fsa-arr { translate: 3px 0; }
.fsa-btn--primary,
.wp-block-button.is-style-fsa-primary > .wp-block-button__link { background: var(--fsa-btn-bg); color: var(--fsa-btn-fg); }
.fsa-btn--ghost,
.wp-block-button.is-style-fsa-ghost > .wp-block-button__link {
	background: transparent;
	border-color: var(--fsa-rule-strong);
	color: var(--fsa-fg-strong);
}
.fsa-btn--ghost:hover,
.wp-block-button.is-style-fsa-ghost > .wp-block-button__link:hover {
	background: transparent;
	border-color: var(--fsa-fg-strong);
	color: var(--fsa-fg-strong);
}
.fsa-btn--white,
.wp-block-button.is-style-fsa-white > .wp-block-button__link {
	--fsa-btn-bg: var(--fsa-paper);
	--fsa-btn-fg: var(--fsa-navy);
	--fsa-btn-hover: color-mix(in srgb, var(--fsa-paper) 88%, var(--fsa-brand));
}
.fsa-btn--sm { min-height: 44px; padding: .55rem 1.15rem; font-size: var(--fsa-fs-m); }
.fsa-btn--block { width: 100%; }

/* Lien d'action secondaire d'un hero (bloc natif « Firalis — arrow link », ou
   .fsa-btn--arrow) : un lien souligné à hauteur de bouton (cible 50 px). */
.fsa-btn--arrow,
.wp-block-button.is-style-fsa-arrow > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 50px;
	padding: .75rem .1rem;
	border: 0;
	background: none;
	color: var(--fsa-link);
	font: 500 var(--fsa-fs-btn)/1.2 var(--fsa-font-sans);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: .3em;
	white-space: nowrap;
	transition: text-decoration-color var(--fsa-dur) ease;
}
.fsa-btn--arrow:hover,
.wp-block-button.is-style-fsa-arrow > .wp-block-button__link:hover {
	background: none;
	border: 0;
	color: var(--fsa-link);
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}
.fsa-btn--arrow .fsa-arr { display: none; }

/* Rangée d'actions */
.fsa-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 14px;
	margin-top: clamp(1.6rem, 2.6vw, 2.25rem);
}
:where(.fsa-actions) > * { margin: 0; }
.wp-block-buttons { gap: 12px 14px; }
@media (max-width: 560px) {
	.fsa-actions > .fsa-btn,
	.fsa-actions > .wp-block-button { flex: 1 1 100%; }
	.fsa-actions > .wp-block-button > .wp-block-button__link { width: 100%; }
	.fsa-actions > .fsa-btn--arrow,
	.fsa-actions > .wp-block-button.is-style-fsa-arrow { flex: 0 1 auto; }
	.fsa-actions > .wp-block-button.is-style-fsa-arrow > .wp-block-button__link { width: auto; }
	.fsa-actions:has(> .fsa-btn--arrow, > .is-style-fsa-arrow) { row-gap: .25rem; }
	.fsa-actions:has(> .fsa-btn--arrow, > .is-style-fsa-arrow) > :is(.fsa-btn, .wp-block-button):not(.fsa-btn--arrow, .is-style-fsa-arrow) { flex: 1 0 auto; }
}
/* Téléphone : un libellé trop long passe à la ligne au lieu de sortir de l'écran. */
@media (max-width: 600px) {
	.fsa-btn,
	.wp-block-button[class*="is-style-fsa-"] > .wp-block-button__link { white-space: normal; text-align: center; }
	.fsa-btn--arrow,
	.wp-block-button.is-style-fsa-arrow > .wp-block-button__link { text-align: left; }
	.fsa-pill { white-space: normal; max-width: 100%; }
}

/* Lien (C) : Plex Sans 500, souligné fin à 45 %, plein au survol. La flèche du
   balisage d'avant (.fsa-arr, décorative) n'est plus montrée sur un lien. */
.fsa-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 24px;
	font: 500 var(--fsa-fs-btn)/1.4 var(--fsa-font-sans);
	color: var(--fsa-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: text-decoration-color var(--fsa-dur) ease;
}
.fsa-link:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.fsa-link .fsa-arr { display: none; }
/* Cible de 44 px au doigt (≤ 1080 px) sans décaler la mise en page. */
@media (max-width: 1080px) {
	a.fsa-link { min-height: 44px; margin-block: -10px; }
	a.fsa-link.fsa-card__more { margin-top: auto; }
	.fsa-split__intro a.fsa-link { margin-top: calc(1.6rem - 10px); }
	.fsa-panel__text > a.fsa-link { margin-top: calc(1.75rem - 10px); }
	.fsa-callout a.fsa-link { margin-top: calc(1.25rem - 10px); }
	.fsa-feature > a.fsa-link { margin-top: calc(1rem - 10px); }
	:is(.fsa-card, .fsa-card__body) > :is(.fsa-meta, .fsa-card__meta, .fsa-card__kv) ~ a.fsa-link { margin-top: -10px; }
}
.fsa-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.75rem; }
/* Au doigt, chaque lien déborde de 10 px en haut et en bas (cible de 44 px) : deux liens
   empilés à moins de 20 px se disputeraient la zone de clic (lot P5, passe F). Une liste
   de liens se pose en .fsa-links (ul.fsa-links > li > a.fsa-link compris). */
@media (max-width: 1080px) {
	.fsa-links { row-gap: 1.25rem; }
}

/* Étiquettes (C « tags ») : carré à filet, LIBELLÉ (Plex Sans 500, casse saisie — passe G,
   arbitrage 2 : le mono reste aux données ; une page qui pose des codes ISO en étiquettes
   les remet en mono chez elle). .fsa-pill (balisage 0.8.0) = .fsa-tag. --solid : aplat
   d'accent (clé) ; --line : pointillé. */
.fsa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fsa-tag,
.fsa-tags > li,
.fsa-pill {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	padding: 5px 9px;
	border: 1px solid var(--fsa-rule-strong);
	border-radius: 0;
	background: transparent;
	font: 500 .8125rem/1.15 var(--fsa-font-sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--fsa-fg-strong);
	white-space: nowrap;
}
.fsa-pill--dot::before {
	content: "";
	width: 8px;
	height: 9px;
	background: var(--fsa-accent);
	-webkit-mask: var(--fsa-glyph-hex) center / contain no-repeat;
	mask: var(--fsa-glyph-hex) center / contain no-repeat;
}
.fsa-pill--solid,
.fsa-tag--solid { background: var(--fsa-accent); border-color: var(--fsa-accent); color: var(--fsa-bg); }
.fsa-pill--solid::before { background: currentColor; }
.fsa-pill--line,
.fsa-tag--line { border-style: dashed; color: var(--fsa-fg-soft); }
.fsa-pill--paper { background: var(--fsa-paper); color: var(--fsa-ink); }
.fsa-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fsa-pill a { color: inherit; text-decoration: none; }
.fsa-pill a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Libellé (passe G, arbitrage 2 du lead) : UN style pour les petits textes qui nomment —
   titres de colonne du pied, libellé des sous-onglets, libellé de carte, légende de figure,
   terme d'une fiche (`dt`). Plex Sans 500 14, casse saisie : le repère de marge sans la triade.
   Le mono reste au sur-titre du hero et aux DONNÉES (.fsa-data : dates, n°, références, codes).
   Une page s'en sert par la classe .fsa-label. */
.fsa-label {
	font: 500 var(--fsa-fs-label)/1.35 var(--fsa-font-sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--fsa-fg-soft);
}
/* Clés d'une chaîne (aplat bleu, mono 11,5) */
.fsa-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.fsa-keys > li { margin: 0; padding: 5px 7px 4px; background: var(--fsa-brand); color: var(--fsa-paper); font: 500 .71875rem/1 var(--fsa-font-mono); }


/* ═════════════════════════════════════════════════════════════════════
   4. EN-TÊTE — UNE masse navy : bandeau d'endossement fondu dans la barre,
   logo (vague + mot blanc), onglets, un bouton plein ; rideaux (méga-menus) ;
   menu mobile. parts/header.html → [fsa_header] (inc/navigation.php).
   ═════════════════════════════════════════════════════════════════════ */

/* Tout l'en-tête colle en haut ; le bandeau remonte hors écran (décalage négatif). */
.fsa-site-header {
	position: sticky;
	top: calc(-1 * var(--fsa-endorse-h));
	z-index: 60;
	background: var(--fsa-navy);
}
.admin-bar .fsa-site-header { top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--fsa-endorse-h)); }

/* Logo officiel sur navy : la vague (bleus d'origine) + le mot passé en blanc. */
.fsa-logo-dark { position: relative; display: block; flex: none; aspect-ratio: 662 / 245; }
.fsa-logo-dark > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.fsa-logo-dark__wave { clip-path: inset(2% 73% 2% 1.5%); }
.fsa-logo-dark__word { clip-path: inset(2% 1.5% 2% 27%); filter: brightness(0) invert(1); }
/* Logo officiel sur clair (fsa_logo(), pages et canevas) : le fichier est transparent. */
.fsa-logo { max-width: none; }

/* Bandeau « Part of Firalis Group » ([firalis_endorsement], firalis-core) */
.fsa-endorse {
	position: relative;
	z-index: 70;
	height: var(--fsa-endorse-h);
	overflow: hidden;
	background: var(--fsa-navy);
	color: var(--fsa-on-dark-muted);
	font-size: var(--fsa-fs-s);
	line-height: 1;
}
.fsa-endorse__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 100%;
	border-bottom: 1px solid var(--fsa-line-dark);
}
.fsa-endorse .fi-endorse {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--fsa-endorse-h);
	color: var(--fsa-on-dark);
	text-decoration: none;
	white-space: nowrap;
}
.fsa-endorse .fi-endorse__name { color: var(--fsa-on-dark-strong); font-weight: 500; }
.fsa-endorse .fi-endorse__arrow { color: var(--fsa-on-dark-muted); transition: translate var(--fsa-dur) var(--fsa-ease-out); }
.fsa-endorse .fi-endorse:hover .fi-endorse__arrow { translate: 3px 0; }
.fsa-endorse .fi-endorse:hover .fi-endorse__text { text-decoration: underline; text-underline-offset: 3px; }
.fsa-endorse .fi-endorse__mark { height: 15px; width: auto; aspect-ratio: 265 / 432; flex: 0 0 auto; }
.fsa-endorse__meta { font: 400 var(--fsa-fs-s)/1 var(--fsa-font-sans); color: var(--fsa-on-dark-muted); white-space: nowrap; }
/* 44 px au doigt pour « Part of Firalis Group » sans changer la hauteur visuelle. */
@media (max-width: 1080px) {
	@supports (overflow: clip) {
		.fsa-endorse { overflow: clip visible; }
		.fsa-endorse .fi-endorse { position: relative; }
		.fsa-endorse .fi-endorse::after { content: ""; position: absolute; inset: 0 0 calc(var(--fsa-endorse-h) - 44px); }
		.fsa-site-header:has(.fsa-hdr.is-stuck) .fsa-endorse .fi-endorse::after { content: none; }
	}
}

/* Barre : position RELATIVE pleine largeur (les rideaux s'y accrochent). */
.fsa-hdr { position: relative; background: var(--fsa-navy); }
.fsa-hdr__in {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--fsa-hdr-h);
}
.fsa-hdr__brand { display: flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
.fsa-hdr__logo { width: 122px; }

/* Onglets (position statique : le rideau prend la largeur de la barre) */
.fsa-tabs { margin-left: auto; align-self: stretch; }
.fsa-tabs__list { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.fsa-tab { display: flex; }
.fsa-tab__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	padding: 0 15px;
	border: 0;
	background: none;
	cursor: pointer;
	font: 500 var(--fsa-fs-tab)/1.15 var(--fsa-font-sans);
	color: var(--fsa-on-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--fsa-dur) ease;
}
/* Repli de la barre (FIX-1 B5) : les libellés sont des textes du client ; quand la barre
   manque de place, un libellé passe sur deux lignes au lieu d'élargir la barre. */
@media (min-width: 1081px) {
	.fsa-tabs, .fsa-tab { min-width: 0; }
	.fsa-tab__link { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
	.fsa-hdr__cta { flex: 0 0 auto; }
}
.fsa-tab__link::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 0;
	height: 2px;
	background: var(--fsa-brand-light);
	scale: 0 1;
	transform-origin: left;
	transition: scale .2s var(--fsa-ease-out);
}
.fsa-tab__link:hover { color: var(--fsa-on-dark-strong); }
.fsa-tab__link:hover::after,
.fsa-tab.is-open > .fsa-tab__link::after,
.fsa-tab.is-current > .fsa-tab__link::after,
.fsa-tab__link[aria-current="page"]::after { scale: 1 1; }
.fsa-tab.is-current > .fsa-tab__link,
.fsa-tab__link[aria-current="page"],
.fsa-tab.is-open > .fsa-tab__link { color: var(--fsa-on-dark-strong); }
.fsa-tab__link:focus-visible { outline-offset: -4px; }
.fsa-chev { width: 9px; height: 6px; flex: 0 0 auto; transition: rotate .2s var(--fsa-ease-out); }
.fsa-tab.is-open .fsa-chev { rotate: 180deg; }
.fsa-hdr__cta { margin-left: 10px; }

/* Rideau (méga-menu) : prolongement navy de la barre, pleine largeur ; intro à gauche,
   entrées à glyphe-habit, colonne de matière en débord à droite. Pas de carte, pas
   d'ombre : un filet le sépare de la barre. Motif « disclosure » (site.js § 1). */
.fsa-dd {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	overflow: hidden;
	background: var(--fsa-navy);
	border-top: 1px solid var(--fsa-line-dark);
	border-bottom: 1px solid var(--fsa-line-on-dark-strong); /* passe G (audit design P1-7) : la fin du rideau se voit, même sur un hero navy */
	visibility: hidden;
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transition: opacity .2s ease, clip-path .32s var(--fsa-ease-out), visibility 0s linear .32s;
}
.fsa-tab.is-open > .fsa-dd,
.no-js .fsa-tab:hover > .fsa-dd,
.no-js .fsa-tab:focus-within > .fsa-dd {
	visibility: visible;
	opacity: 1;
	clip-path: inset(0 0 -64px 0); /* un rideau flotte : son ombre déborde (R2 § 5 r. 1) */
	box-shadow: var(--fsa-sh-float);
	transition: opacity .2s ease, clip-path .32s var(--fsa-ease-out), visibility 0s;
}
.fsa-dd ul { margin: 0; padding: 0; list-style: none; }
.fsa-mega__grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 6.2fr) minmax(0, 2.8fr);
	grid-template-rows: minmax(0, 1fr) auto;
	min-height: 300px;
}
/* « All … » vient APRÈS les entrées dans le DOM (ordre de tabulation, passe G — audit a11y
   P2-8) et reprend sa place au pied de l'intro par la grille. */
.fsa-mega__intro { grid-column: 1; grid-row: 1 / -1; }
.fsa-mega__list { grid-column: 2; grid-row: 1 / -1; }
.fsa-mega__matter { grid-column: 3; grid-row: 1 / -1; }
.fsa-mega__grid > .fsa-dd__foot { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; margin: 0 32px 36px 0; }
.fsa-mega__intro {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 36px 32px 36px 0;
	border-right: 1px solid var(--fsa-line-dark);
}
.fsa-mega__title { font: 500 1.75rem/1.12 var(--fsa-font-title); letter-spacing: -.02em; color: var(--fsa-on-dark-strong); text-wrap: balance; }
.fsa-mega__intro .fsa-link { align-self: flex-start; }
.fsa-mega__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	padding: 20px 0 20px 8px !important;
}
.fsa-dd__item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0 16px;
	padding: 18px 24px;
	color: var(--fsa-on-dark);
	text-decoration: none;
	transition: background-color var(--fsa-dur) ease;
}
.fsa-dd__item:hover,
.fsa-dd__item:focus-visible { background: color-mix(in srgb, var(--fsa-paper) 5%, transparent); }
.fsa-dd__item:hover .fsa-dd__t { text-decoration: underline; text-underline-offset: .25em; }
.fsa-dd__item[aria-current="page"] .fsa-dd__t { color: var(--fsa-brand-light); }
.fsa-dd__ico {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--fsa-brand-light);
}
.fsa-dd__ico svg { width: 30px; height: 30px; }
.fsa-dd__ico > svg:only-child:not([viewBox="0 0 24 24"]) { width: 44px; height: 44px; }
/* Pictogramme filaire d'avant (repli du glyphe-habit) recoloré par le ton. */
.fsa-dd__ico :is(.fsa-s-brand, .fsa-s-ink) { stroke: var(--fsa-brand-light); }
.fsa-dd__ico :is(.fsa-f-brand, .fsa-f-ink) { fill: var(--fsa-brand-light); }
.fsa-dd__ico :is(.fsa-f-tint, .fsa-f-mist, .fsa-f-paper) { fill: none; }
.fsa-dd__ico .fsa-wave { height: 30px; width: auto; }
.fsa-dd__txt { display: block; min-width: 0; }
.fsa-dd__t { display: block; margin-top: 2px; font: 500 1.0625rem/1.3 var(--fsa-font-sans); color: var(--fsa-on-dark-strong); }
.fsa-dd__d { display: block; margin-top: 4px; font-size: .9rem; line-height: 1.45; color: var(--fsa-on-dark-muted); }
.fsa-dd__ext { color: var(--fsa-on-dark-muted); font-weight: 400; }
/* Colonne de matière : le treillis se range vers la droite et déborde jusqu'au bord de
   l'écran. Repli CSS (réseau de nœuds) tant que le lot S-b n'y pose pas un champ. */
.fsa-mega__matter {
	position: relative;
	margin-right: calc(-1 * max(var(--fsa-gutter), (100vw - var(--fsa-container)) / 2));
	border-left: 1px solid var(--fsa-line-dark);
	overflow: hidden;
}
.fsa-mega__matter:empty::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: radial-gradient(circle, var(--fsa-lat-no) 1.3px, transparent 1.8px) 0 0 / 22px 19.05px, radial-gradient(circle, var(--fsa-lat-no) 1.3px, transparent 1.8px) 11px 9.53px / 22px 19.05px;
	opacity: .55;
	rotate: -9deg;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
}
.fsa-mega__matter > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Bouton du menu mobile (un lien role=button : voir inc/navigation.php) */
.fsa-burger {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--fsa-line-dark);
	background: none;
	color: var(--fsa-on-dark-strong);
	cursor: pointer;
}
.fsa-burger svg { width: 20px; height: 14px; }
.fsa-mnav__close svg { width: 18px; height: 18px; }

@media (max-width: 1080px) {
	.fsa-tabs, .fsa-hdr__cta { display: none; }
	.fsa-burger { display: inline-flex; margin-left: auto; }
}
@media (min-width: 601px) and (max-width: 1080px) {
	.fsa-hdr__cta { display: inline-flex; margin-left: auto; }
	.fsa-burger { margin-left: 0; }
}
@media (max-width: 600px) {
	.fsa-hdr__logo { width: 110px; }
	.fsa-endorse__meta { display: none; }
}

/* Menu mobile : plein écran navy, accordéons. Masqué en CSS (pas d'attribut hidden) :
   sans JavaScript, #fsa-mnav:target l'ouvre. */
.fsa-mnav {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: none;
	flex-direction: column;
	background: var(--fsa-navy);
	color: var(--fsa-on-dark);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.fsa-mnav.is-open,
.no-js .fsa-mnav:target { display: flex; }
.fsa-mnav__top {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--fsa-hdr-h);
	padding-inline: var(--fsa-gutter);
	background: var(--fsa-navy);
	border-bottom: 1px solid var(--fsa-line-dark);
}
.fsa-mnav__brand { display: block; }
.fsa-mnav__logo { width: 110px; }
.fsa-mnav__top .fsa-burger { display: inline-flex; }
.fsa-mnav__body { padding: .5rem var(--fsa-gutter) 2rem; }
.fsa-mnav__list { margin: 0; padding: 0; list-style: none; }
.fsa-mnav__list > li { border-bottom: 1px solid var(--fsa-line-dark); }
.fsa-mnav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 56px;
	padding: .9rem 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font: 500 var(--fsa-fs-mnav)/1.2 var(--fsa-font-title);
	letter-spacing: -.015em;
	color: var(--fsa-on-dark-strong);
	text-decoration: none;
}
.fsa-mnav__link .fsa-arr,
.fsa-mnav__link .fsa-chev { color: var(--fsa-brand-light); }
.fsa-mnav__link .fsa-chev { width: 12px; height: 8px; }
.fsa-mnav__link[aria-expanded="true"] .fsa-chev { rotate: 180deg; }
.fsa-mnav__link[aria-current="page"] { color: var(--fsa-brand-light); }
.fsa-mnav__sub { display: grid; gap: 0; margin: 0; padding: 0 0 .75rem; list-style: none; }
.fsa-mnav__sub[hidden] { display: none; }
.fsa-mnav__item {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	padding: .45rem 0;
	color: var(--fsa-on-dark);
	text-decoration: none;
}
.fsa-mnav__item .fsa-dd__ico { width: 36px; height: 36px; }
.fsa-mnav__item .fsa-dd__ico svg { width: 26px; height: 26px; }
.fsa-mnav__item .fsa-dd__t { margin: 0; font-size: var(--fsa-fs-body); font-weight: 400; color: var(--fsa-on-dark); }
.fsa-mnav__item--all { grid-template-columns: minmax(0, 1fr) auto; }
.fsa-mnav__item--all .fsa-dd__t { color: var(--fsa-brand-light); font-weight: 500; }
.fsa-mnav__item--all .fsa-arr { color: var(--fsa-brand-light); }
.fsa-mnav__item[aria-current="page"] .fsa-dd__t { color: var(--fsa-brand-light); font-weight: 500; }
.fsa-mnav__foot { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.fsa-mnav__foot .fsa-btn { width: 100%; }
.fsa-mnav__endorse {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
	color: var(--fsa-on-dark-muted);
	font-size: var(--fsa-fs-m);
	text-decoration: none;
}
.fsa-mnav__endorse strong { color: var(--fsa-on-dark-strong); font-weight: 500; }
.fsa-mnav__mark { height: 18px; width: auto; aspect-ratio: 265 / 432; }
@media (min-width: 1081px) {
	.fsa-mnav.is-open, .no-js .fsa-mnav:target { display: none; }
}
@media (max-width: 1080px) {
	.fsa-mega__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ═════════════════════════════════════════════════════════════════════
   5. BANDES, TÊTES DE SECTION, GRILLES
   ═════════════════════════════════════════════════════════════════════ */
.fsa-sec { padding-block: var(--fsa-section); }
.fsa-sec--tight-top { padding-top: 0; }
.fsa-sec--tight-bottom { padding-bottom: 0; }
/* .fsa-sec--paper : papier imposé (rare) ; .fsa-sec--navy : bande navy pleine largeur. */
.fsa-sec--paper { --fsa-bg: var(--fsa-surface); }

/* Réserves par VOISINAGE DE TON : deux bandes voisines de même ton ne s'additionnent pas
   (la seconde garde la moitié de sa réserve haute). Spécificité basse (:where) : une
   feuille de page qui règle la réserve d'une de ses bandes l'emporte. */
.fsa-sec--flow { padding-top: var(--fsa-section-flow); }
:where(.fsa-sec:not(.fsa-sec--alt, .fsa-sec--navy)) + .fsa-sec:where(:not(.fsa-sec--alt, .fsa-sec--navy, .fsa-sec--tight-top)),
:where(.fsa-sec--alt) + .fsa-sec--alt:where(:not(.fsa-sec--tight-top)) { padding-top: var(--fsa-section-flow); }
/* Après l'ouverture Science (plein cadre navy), la bande claire qui suit prend aussi la
   réserve réduite (invariant de l'archétype 4, doc 85/12 ; posé en double par R&D et
   Quality au lot P3, remonté au socle par la passe F). */
:where(.fsa-hero-inner--navy) + .fsa-sec:where(:not(.fsa-sec--alt, .fsa-sec--navy, .fsa-sec--tight-top)) { padding-top: var(--fsa-section-flow); }

/* Tête de section (C) : repère de marge à gauche (colonnes 1–3 : le sur-titre, et le lien
   « All … » calé sous lui, au pied du titre), titre et chapô à droite (4–12).
   Balisage d'avant inchangé : <div class="fsa-sec-head [--link|--stack]"><div>[sur-titre]
   <h2/></div>[<p class="fsa-lead"/>|<a class="fsa-link"/>]</div> — l'enveloppe du titre
   s'efface (display: contents) et chaque pièce prend sa place dans la trame. */
.fsa-sec-head {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	grid-template-rows: auto auto auto;
	column-gap: var(--fsa-col-gap);
	align-items: start;
	margin-bottom: var(--fsa-head-gap);
}
.fsa-sec-head > div:not([class*="fsa-"]) { display: contents; }
:where(.fsa-sec-head) > * { margin: 0; }
.fsa-sec-head .fsa-eyebrow { grid-column: 1; grid-row: 1; margin: 0; padding-top: .55em; }
.fsa-sec-head :is(h2, .fsa-h2) { grid-column: 2; grid-row: 1 / span 2; max-width: 22ch; }
.fsa-sec-head .fsa-lead { grid-column: 2; grid-row: 3; margin-top: clamp(1rem, 1.8vw, 1.5rem); max-width: 46ch; }
.fsa-sec-head > :is(.fsa-link, .fsa-btn, p:has(> .fsa-link), .wp-block-buttons) { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; margin: 0; }
@media (max-width: 1023px) {
	.fsa-sec-head { grid-template-columns: minmax(0, 1fr) auto; }
	.fsa-sec-head .fsa-eyebrow { grid-column: 1; grid-row: 1; padding-top: 0; margin-bottom: 1rem; }
	.fsa-sec-head > :is(.fsa-link, .fsa-btn, p:has(> .fsa-link), .wp-block-buttons) { grid-column: 2; grid-row: 1; align-self: start; margin: 0 0 1rem; }
	.fsa-sec-head :is(h2, .fsa-h2) { grid-column: 1 / -1; grid-row: 2; }
	.fsa-sec-head .fsa-lead { grid-column: 1 / -1; grid-row: 3; }
}

/* Tête à marge, balisage neuf (lots de pages) :
   <header class="fsa-head"><div class="fsa-head__side"><p class="fsa-eyebrow">…</p>
   <a class="fsa-link">All …</a></div><div class="fsa-head__main"><h2 class="fsa-h2">…</h2>
   <p class="fsa-lead">…</p></div></header> */
.fsa-head {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	column-gap: var(--fsa-col-gap);
	margin-bottom: var(--fsa-head-gap);
}
:where(.fsa-head, .fsa-head__side, .fsa-head__main) > * { margin: 0; }
.fsa-head__side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 18px; padding-top: .55rem; }
.fsa-head__main .fsa-h2 { max-width: 22ch; }
/* Sans repère ni lien dans la marge, le titre part de la colonne 1 (passe G, audit design
   P2-13 : la marge vide se lisait comme un retrait accidentel). */
.fsa-head:not(:has(.fsa-head__side > *)) > .fsa-head__main { grid-column: 1 / -1; }
.fsa-sec-head:not(:has(.fsa-eyebrow, > .fsa-link, > .fsa-btn, > p > .fsa-link, > .wp-block-buttons)) :is(h2, .fsa-h2, .fsa-lead) { grid-column: 1 / -1; }
.fsa-head__main .fsa-lead { margin-top: clamp(1rem, 1.8vw, 1.5rem); max-width: 46ch; }
@media (max-width: 1023px) {
	.fsa-head { grid-template-columns: minmax(0, 1fr); }
	.fsa-head__side { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 0; margin-bottom: 1rem; }
}

/* Trame 12 colonnes (gabarit de composition) : .fsa-cols > .fsa-col-<début>-<fin> */
.fsa-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--fsa-col-gap); row-gap: var(--fsa-gap); }
.fsa-cols > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
	.fsa-col-1-3 { grid-column: 1 / span 3 !important; }
	.fsa-col-4-12 { grid-column: 4 / -1 !important; }
	.fsa-col-1-6 { grid-column: 1 / span 6 !important; }
	.fsa-col-7-12 { grid-column: 7 / -1 !important; }
	.fsa-col-1-5 { grid-column: 1 / span 5 !important; }
	.fsa-col-6-12 { grid-column: 6 / -1 !important; }
}

/* Grilles */
.fsa-grid {
	display: grid;
	gap: clamp(2.5rem, 4vw, 3rem) var(--fsa-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
:where(.fsa-grid) > * { margin: 0; }
.fsa-grid > * { min-width: 0; }
.fsa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fsa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fsa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fsa-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(16rem, (100% - 2 * var(--fsa-col-gap)) / 3)), 1fr)); }
.fsa-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fsa-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fsa-stack { display: grid; gap: var(--fsa-gap); align-content: start; }
:where(.fsa-stack) > * { margin: 0; }
@media (max-width: 1080px) {
	.fsa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.fsa-grid--3, .fsa-grid--7-5, .fsa-grid--5-7 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.fsa-grid--2, .fsa-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Deux colonnes : intro collante (5) + contenu (7). Ancêtres sans overflow: hidden. */
.fsa-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6.5rem);
}
:where(.fsa-split) > * { margin: 0; }
.fsa-split > * { min-width: 0; }
.fsa-split__intro { position: sticky; top: calc(var(--fsa-hdr-h) + 2rem); align-self: start; }
.fsa-split__intro .fsa-h2 { max-width: 14ch; }
.fsa-split__intro .fsa-lead { margin-top: 1.4rem; }
.fsa-split__intro .fsa-link { margin-top: 1.6rem; }
@media (max-width: 960px) {
	.fsa-split { grid-template-columns: minmax(0, 1fr); }
	.fsa-split__intro { position: static; }
	.fsa-split__intro .fsa-h2 { max-width: 20ch; }
}


/* ═════════════════════════════════════════════════════════════════════
   6. OUVERTURES (HEROS) PARTAGÉES, FIL D'ARIANE, SOUS-ONGLETS, PHOTOS
   Le champ cristal (lot S-b) se pose en FOND ABSOLU de son conteneur
   (contrat docs/85/30 § 2) : les conteneurs ci-dessous sont positionnés,
   rognés et n'imposent aucune hauteur au champ.
   ═════════════════════════════════════════════════════════════════════ */

/* Scène (héritage 0.8.0) : plus de cadre ni de dégradé — un aplat du ton, rayon 0. */
.fsa-stage {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: var(--fsa-band);
}
.fsa-stage__motif { position: absolute; inset: 0; z-index: -1; }
.fsa-stage--inner { height: clamp(300px, 30vw, 420px); }
.fsa-stage--navy { background: var(--fsa-navy); }
.fsa-stage--blue { background: var(--fsa-brand); }
.fsa-stage--ghost {
	position: absolute;
	inset: 0 0 0 62%; /* passe G (audit design P2-2) : le tiers droit, hors des titres longs */
	z-index: 0;
	background: none;
	opacity: .55;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
	mask-image: linear-gradient(90deg, transparent, #000 45%);
}
@media (max-width: 1100px) {
	/* Le coin haut-droit seulement (le H1 occupe toute la largeur sous lui). */
	.fsa-stage--ghost {
		inset: 0 0 0 40%;
		opacity: .45;
		-webkit-mask-image: radial-gradient(60% 45% at 100% 0, #000 30%, transparent 75%);
		mask-image: radial-gradient(60% 45% at 100% 0, #000 30%, transparent 75%);
	}
}
@media (max-width: 600px) {
	.fsa-stage--inner { height: 240px; }
}

/* Carte posée sur une scène (fiche d'About, at a glance de l'accueil) : aplat papier à
   filet d'accent, sans ombre ni rayon. */
.fsa-stage-card {
	position: absolute;
	left: clamp(-2.5rem, -2.5vw, -1rem);
	bottom: -2.25rem;
	z-index: 3;
	width: min(20rem, 78%);
	padding: 1.1rem 1.25rem 1.2rem;
	background: var(--fsa-paper);
	border-top: 2px solid var(--fsa-brand);
	color: var(--fsa-text);
}
.fsa-stage-card__value {
	display: flex;
	align-items: baseline;
	gap: .1rem;
	margin-top: .55rem;
	font: 500 var(--fsa-fs-num)/1 var(--fsa-font-title);
	letter-spacing: -.03em;
	color: var(--fsa-ink);
}
.fsa-stage-card__value small { font: 500 var(--fsa-fs-data)/1 var(--fsa-font-mono); color: var(--fsa-muted); }
.fsa-stage-card ul {
	display: grid;
	gap: .45rem;
	margin: .85rem 0 0;
	padding: .8rem 0 0;
	border-top: 1px solid var(--fsa-line);
	list-style: none;
	font-size: var(--fsa-fs-sm);
	line-height: 1.4;
}
.fsa-stage-card li { display: flex; gap: .55rem; }
.fsa-stage-card li::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 9px;
	margin-top: .4em;
	background: var(--fsa-brand);
	-webkit-mask: var(--fsa-glyph-hex) center / contain no-repeat;
	mask: var(--fsa-glyph-hex) center / contain no-repeat;
}

/* Hero intérieur (base) : fil d'Ariane, texte à gauche, visuel à droite. */
.fsa-hero-inner { position: relative; z-index: 2; isolation: isolate; }
.fsa-hero-inner:not(.fsa-hero-inner--navy) { background: var(--fsa-surface); }
.fsa-hero-inner__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding-block: clamp(1.75rem, 3.6vw, 3rem) clamp(3.5rem, 6vw, 5.5rem);
}
:where(.fsa-hero-inner__grid) > * { margin: 0; }
.fsa-hero-inner__grid > * { min-width: 0; }
.fsa-hero-inner :is(h1, .fsa-h1) { font-size: var(--fsa-fs-h1); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.fsa-hero-inner .fsa-lead { margin-top: clamp(1.25rem, 2.2vw, 1.9rem); max-width: 40ch; }
.fsa-hero-inner__art { position: relative; }
@media (max-width: 960px) {
	.fsa-hero-inner__grid { grid-template-columns: minmax(0, 1fr); }
	.fsa-hero-inner__art { margin-top: .5rem; }
	.fsa-hero-inner__art .fsa-stage-card { left: -1rem; right: auto; bottom: -3.5rem; }
}
@media (max-width: 600px) {
	.fsa-hero-inner__grid { padding-bottom: 3rem; }
	.fsa-hero-inner__art .fsa-stage-card { position: relative; left: auto; bottom: auto; width: auto; margin: -2.5rem .75rem 0; }
}

/* Bloc d'aplat en débord droit (C, hero intérieur) : posé en enfant direct de la section
   hero, il porte l'habit de la page ([fsa_crystal habit=… tone="blue"]) ; le texte reste
   sur le papier, colonnes 1–6. <div class="fsa-hero-inner__block fsa-t-blue">…</div> */
.fsa-hero-inner__block {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(50% + 24px);
	right: 0;
	overflow: hidden;
}
@media (max-width: 1023px) {
	.fsa-hero-inner:has(> .fsa-hero-inner__block) { display: flex; flex-direction: column; }
	.fsa-hero-inner__block { position: relative; inset: auto; z-index: 0; order: 2; aspect-ratio: 16 / 9; }
	.fsa-hero-inner:has(> .fsa-hero-inner__block) > .fsa-subtabs { order: 3; }
}
@media (max-width: 760px) {
	.fsa-hero-inner__block { aspect-ratio: 4 / 3; }
}

/* ─── Ouverture CATALOGUE (Products, Bioproduction, Biobank) ─────────────────
   C : texte sur le papier (colonnes 1–6), BLOC BLEU en débord droit portant l'habit de la
   page (ou la photo, couleurs naturelles), tuile-emblème .fsa-sig au pied du bloc,
   sous-onglets collés dessous. Balisage d'avant inchangé : .fsa-stage--band (visuel +
   texte) et figure.fsa-sig deviennent la composition C. */
.fsa-hero-inner--band { --fsa-subtabs-h: 0px; --fsa-sig-h: clamp(150px, 13vw, 190px); }
.fsa-hero-inner--band:has(> .fsa-subtabs) { --fsa-subtabs-h: 64px; }
.fsa-hero-inner--band .fsa-hero-inner__grid {
	display: block;
	position: static;
	min-height: clamp(460px, 42vw, 600px);
	padding-block: clamp(1.75rem, 3.6vw, 3rem) clamp(3.5rem, 6vw, 5.5rem);
}
.fsa-stage--band {
	position: static;
	display: block;
	overflow: visible;
	isolation: auto;
	min-height: 0;
	padding: 0;
	background: none;
}
.fsa-stage--band > .fsa-hero-inner__text { position: relative; z-index: 1; max-width: calc(50% - 1.5 * var(--fsa-col-gap)); }
.fsa-hero-inner--band::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: var(--fsa-subtabs-h);
	left: calc(50% + 24px);
	right: 0;
	background: var(--fsa-brand);
}
.fsa-stage--band > :not(.fsa-hero-inner__text) {
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: var(--fsa-subtabs-h);
	left: calc(50% + 24px);
	right: 0;
	width: auto;
	height: auto;
	overflow: hidden;
	background: var(--fsa-brand);
	-webkit-mask-image: none;
	mask-image: none;
}
.fsa-stage--band > .fsa-visual--photo { bottom: calc(var(--fsa-subtabs-h) + var(--fsa-sig-h)); }
.fsa-stage--band:has(> .fsa-visual--photo) > .fsa-stage__motif { display: none; }
@media (max-width: 960px) {
	.fsa-stage--band > .fsa-visual--photo { display: none; }
	.fsa-stage--band:has(> .fsa-visual--photo) > .fsa-stage__motif { display: block; }
}
/* Tuile-emblème : la chaîne de la carte d'accueil et sa légende, en blanc au pied du bloc. */
.fsa-sig {
	position: relative;
	margin: 0;
	color: var(--fsa-paper);
	--fsa-svg-brand: var(--fsa-paper);
	--fsa-svg-ink: var(--fsa-paper);
	--fsa-svg-light: color-mix(in srgb, var(--fsa-paper) 60%, transparent);
	--fsa-svg-tint: color-mix(in srgb, var(--fsa-paper) 16%, transparent);
	--fsa-svg-mist: transparent;
	--fsa-svg-paper: var(--fsa-brand);
	--fsa-svg-line: color-mix(in srgb, var(--fsa-paper) 45%, transparent);
	--fsa-svg-noise: color-mix(in srgb, var(--fsa-paper) 60%, transparent);
	--fsa-svg-muted: var(--fsa-paper);
	--fsa-focus: var(--fsa-paper);
}
.fsa-hero-inner--band .fsa-sig {
	position: absolute;
	z-index: 1;
	left: calc(50% + 24px);
	right: 0;
	bottom: var(--fsa-subtabs-h);
	min-height: var(--fsa-sig-h);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 48px clamp(28px, 3.4vw, 48px) clamp(22px, 2.6vw, 34px);
	/* Le fondu n'occupe que le retrait haut : tout le contenu de la tuile est sur l'aplat (passe G,
	   audit a11y P1-4 — à 62 %, la 1re ligne d'un éventail passait sur les nœuds du cristal). */
	background: linear-gradient(to top, var(--fsa-brand) calc(100% - 48px), color-mix(in srgb, var(--fsa-brand) 0%, transparent));
}
.fsa-sig__fig { display: block; min-height: 0; padding: 0; background: none; }
.fsa-sig__fig > svg { display: block; width: 100%; max-width: 30rem; height: 96px; overflow: visible; }
.fsa-sig figcaption {
	background-color: var(--fsa-brand); /* déjà bleu plein à cet endroit ; contraste mesurable */
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--fsa-paper) 34%, transparent);
	font: 500 .78rem/1.25 var(--fsa-font-mono);
	letter-spacing: .02em;
	text-transform: none;
	color: var(--fsa-paper);
}
@media (max-width: 1023px) {
	.fsa-hero-inner--band::before { display: none; }
	.fsa-hero-inner--band .fsa-hero-inner__grid { min-height: 0; padding-bottom: 0; }
	.fsa-stage--band { display: flex; flex-direction: column; }
	.fsa-stage--band > .fsa-hero-inner__text { order: 1; max-width: 44rem; padding-bottom: clamp(2rem, 5vw, 3rem); }
	.fsa-stage--band > :not(.fsa-hero-inner__text) {
		position: relative;
		inset: auto;
		order: 2;
		aspect-ratio: 16 / 9;
		margin-inline: calc(-1 * var(--fsa-gutter));
	}
	/* La tuile monte sur le pied du bloc (fondu bleu) : le hero ne s'allonge pas au
	   téléphone. Posé à l'identique par les trois pages Catalogue (lot P2), remonté au
	   socle par la passe F, avec le bloc 16:9 à toute largeur (plus de 4:3 sous 760). */
	.fsa-hero-inner--band .fsa-sig {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		min-height: 0;
		margin-top: clamp(-88px, -12vw, -48px);
		margin-inline: calc(-1 * var(--fsa-gutter));
		padding: clamp(40px, 8vw, 64px) var(--fsa-gutter) 26px;
		background: linear-gradient(to top, var(--fsa-brand) calc(100% - clamp(40px, 8vw, 64px)), color-mix(in srgb, var(--fsa-brand) 0%, transparent));
	}
}
@media (max-width: 760px) {
	.fsa-sig__fig > svg { height: 72px; }
	.fsa-sig__fig text { display: none; }
	/* Le bloc du cristal passe de 16:9 à 2:1 au téléphone (−24 px à 390), la tuile reste montée
	   sur son pied (lot G2, remonté au socle par G1 : même réglage sur les trois pages). */
	.fsa-stage--band > :not(.fsa-hero-inner__text) { aspect-ratio: 2 / 1; }
}
/* Au bureau, le H1 tient dans la colonne de texte (la moitié de la trame, à côté du bloc bleu) :
   avec Poppins, le corps du socle (86 px à 1440) coupait « Bioproduction » en plein mot à
   1024 px et passait « Biobank & clinical studies » sur trois lignes ; il suit la colonne
   (53 px à 1024, 72 px dès 1440). Lot G2, remonté au socle par G1. */
@media (min-width: 1024px) {
	.fsa-hero-inner--band .fsa-hero-inner__text :is(h1, .fsa-h1) { font-size: clamp(3rem, .45rem + 4.5vw, 4.5rem); }
}

/* ─── Ouverture LIEUX (About) : texte 5 + grande figure-schéma 7, sur un aplat teinté. */
.fsa-hero-inner--place .fsa-hero-inner__grid {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: stretch;
}
.fsa-hero-inner--place .fsa-hero-inner__grid > :first-child { align-self: center; }
.fsa-hero-inner--place .fsa-hero-inner__art { display: grid; }
.fsa-hero-inner--place .fsa-stage {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: center;
	min-height: clamp(300px, 30vw, 420px);
	margin: 0;
	padding: clamp(1.25rem, 2.5vw, 2.25rem);
}
.fsa-hero-inner--place .fsa-stage svg { display: block; width: 100%; height: auto; max-height: 18rem; margin-inline: auto; }
@media (min-width: 961px) {
	.fsa-hero-inner--place .fsa-stage > .fsa-schema { position: relative; align-self: stretch; min-height: 14rem; }
	.fsa-hero-inner--place .fsa-stage > .fsa-schema svg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
}
.fsa-hero-inner--place .fsa-stage > figcaption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .25rem 1rem;
	margin-top: 1rem;
	padding-top: .85rem;
	border-top: 1px solid var(--fsa-rule-strong);
	font: 500 var(--fsa-fs-label)/1.35 var(--fsa-font-sans); /* libellé (passe G, arbitrage 2) */
	color: var(--fsa-brand-ink);
}
@media (max-width: 960px) {
	.fsa-hero-inner--place .fsa-hero-inner__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 600px) {
	.fsa-hero-inner--place .fsa-hero-inner__grid { gap: 1.25rem; padding-bottom: 2rem; }
	.fsa-hero-inner--place .fsa-stage { min-height: 0; padding: .75rem; }
	.fsa-hero-inner--place .fsa-stage > figcaption { display: none; }
}

/* ─── Ouverture SCIENCE (R&D, Quality) : un vrai plein cadre navy (ton navy de la bande),
   texte à gauche, scène ou sceaux à droite ; jonction franche avec la bande qui suit. */
.fsa-hero-inner--navy { border-top: 1px solid var(--fsa-line-dark); } /* l'en-tête est navy aussi : un filet les sépare */
.fsa-hero-inner--navy .fsa-hero-inner__grid {
	position: relative;
	padding-block: clamp(1.75rem, 3.6vw, 3rem) clamp(4.5rem, 7vw, 6.5rem);
}
.fsa-hero-inner--navy .fsa-lead { color: var(--fsa-fg); }
.fsa-hero-inner--navy .fsa-stage--inner { height: clamp(300px, 30vw, 440px); background: none; }
.fsa-stage--navy > .fsa-visual--photo { position: absolute; inset: 0; z-index: 0; }
.fsa-stage--navy:has(> .fsa-visual--photo) > .fsa-stage__motif { display: none; }
@media (max-width: 600px) {
	.fsa-hero-inner--navy .fsa-stage--navy > .fsa-visual--photo { display: none; }
	.fsa-hero-inner--navy .fsa-stage--navy:has(> .fsa-visual--photo) > .fsa-stage__motif { display: block; }
	.fsa-hero-inner--navy .fsa-hero-inner__art:has(> .fsa-stage--navy) {
		position: absolute;
		inset: 0 0 auto 34%;
		z-index: -1;
		height: 58%;
		margin: 0;
		opacity: .5;
		-webkit-mask-image: radial-gradient(115% 100% at 100% 0%, #000 25%, transparent 72%);
		mask-image: radial-gradient(115% 100% at 100% 0%, #000 25%, transparent 72%);
	}
	.fsa-hero-inner--navy .fsa-hero-inner__art .fsa-stage { height: 100%; }
}

/* ─── Ouverture ÉDITORIALE (Media, article, Events, Contact, légal, 404) : grand titre
   typographique sur le papier, cristal fantôme sur le tiers droit (enfant direct de la
   section, AVANT .fsa-wrap), filet de pied. */
.fsa-hero-inner--plain { border-bottom: 1px solid var(--fsa-rule); }
.fsa-hero-inner--plain > .fsa-wrap { position: relative; z-index: 1; }
.fsa-hero-inner--plain .fsa-hero-inner__grid { display: block; padding-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.fsa-hero-inner--plain .fsa-hero-inner__grid > * + * { margin-top: clamp(1.1rem, 2vw, 1.6rem); }
.fsa-hero-inner--plain .fsa-hero-inner__grid > .fsa-eyebrow + * { margin-top: 0; }
.fsa-hero-inner--plain :is(h1, .fsa-h1) { max-width: 18ch; }
.fsa-hero-inner--plain .fsa-lead { max-width: 46ch; }

/* Fil d'Ariane ([fsa_crumbs]) */
.fsa-crumbs { padding-top: clamp(1rem, 2vw, 1.5rem); }
.fsa-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 var(--fsa-fs-sm)/1.3 var(--fsa-font-sans);
	color: var(--fsa-fg-soft);
}
.fsa-crumbs li { display: inline-flex; align-items: center; }
/* Le séparateur suit l'élément qui le PRÉCÈDE : à la ligne, une étape ne commence jamais par « / »
   (passe G, demande du lot G2 : Biobank à 390). L'article de Media masque sa dernière étape
   (css/media.css) : l'avant-dernière y perd son séparateur. */
.fsa-crumbs li:not(:last-child)::after { content: "/"; margin-inline: 10px; color: var(--fsa-rule-strong); }
.fsa-media__hero .fsa-crumbs li:nth-last-child(2)::after { content: none; }
.fsa-crumbs a { display: inline-block; padding-block: 6px; color: var(--fsa-fg-soft); text-decoration: none; }
.fsa-crumbs a:hover { color: var(--fsa-fg-strong); text-decoration: underline; text-underline-offset: 3px; }
.fsa-crumbs [aria-current] { color: var(--fsa-fg-strong); }
@media (max-width: 1080px) {
	/* La zone de 44 px déborde sur la grille du hero, posée après : le fil passe au-dessus
	   (passe G, audit a11y P2-6 : « Home » ne gardait que 34 px sur les heros Science). */
	.fsa-crumbs { position: relative; z-index: 1; }
	.fsa-crumbs a { position: relative; padding-block: 13px; margin-block: -11px; }
	.fsa-crumbs a::after { content: ""; position: absolute; inset: 0 min(0px, (100% - 44px) / 2); }
}

/* Sous-onglets ([fsa_subtabs]) : collés au bas du hero ; onglet courant en aplat bleu. */
.fsa-subtabs {
	position: relative;
	z-index: 2;
	border-top: 1px solid var(--fsa-rule);
	border-bottom: 1px solid var(--fsa-rule);
	background: var(--fsa-surface);
}
.fsa-subtabs__in {
	display: flex;
	align-items: stretch;
	min-height: 64px;
	overflow-x: auto;
	scrollbar-width: none;
}
.fsa-subtabs__in::-webkit-scrollbar { display: none; }
.fsa-subtabs__label {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding-right: 22px;
	margin-right: 6px;
	border-right: 1px solid var(--fsa-rule);
	font: 500 var(--fsa-fs-label)/1.35 var(--fsa-font-sans);
	color: var(--fsa-muted);
	white-space: nowrap;
}
.fsa-subtabs__tab {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 20px;
	font: 500 var(--fsa-fs-m)/1.15 var(--fsa-font-sans);
	color: var(--fsa-text);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--fsa-dur) ease, color var(--fsa-dur) ease;
}
.fsa-subtabs__tab:hover { color: var(--fsa-brand-ink); background: color-mix(in srgb, var(--fsa-brand) 6%, transparent); }
.fsa-subtabs__tab[aria-current="page"] { background: var(--fsa-brand); color: var(--fsa-paper); --fsa-focus: var(--fsa-paper); } /* contour blanc sur l'aplat bleu : 4,82:1 (audit a11y P1-3) */
.fsa-subtabs__tab:focus-visible { outline-offset: -4px; }
.fsa-subtabs__cta { margin-left: auto; display: flex; align-items: center; flex: 0 0 auto; padding-left: 24px; }
@media (max-width: 1280px) {
	.fsa-subtabs__label { display: none; }
}
@media (max-width: 1180px) {
	.fsa-subtabs__cta { display: none; }
	.fsa-subtabs__tab { padding-inline: 16px; }
}
/* Téléphone et tablette (passe G, audits design P2-5, a11y P2-2) : la rangée défile d'un bord à
   l'autre de l'écran ; un fondu court dans chaque gouttière dit qu'elle continue (un onglet coupé
   l'est dans le fondu, plus en plein mot) ; un espace de fin laisse le dernier onglet sortir du
   fondu. Jusqu'à 1180 px le conteneur vaut l'écran moins ses gouttières : l'alignement ne bouge pas. */
@media (max-width: 1180px) {
	.fsa-subtabs__in {
		width: auto;
		margin-inline: 0;
		padding-inline: var(--fsa-gutter);
		scroll-padding-inline: var(--fsa-gutter);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fsa-gutter), #000 calc(100% - 32px), transparent);
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--fsa-gutter), #000 calc(100% - 32px), transparent);
	}
	.fsa-subtabs__in::after { content: ""; flex: 0 0 32px; }
}

/* Photos de bande (docs/84 ; fsa_photo_figure(), inc/photos.php) : COULEURS NATURELLES,
   recadrées par le ratio du slot (cover, centre), rayon 0. Sans photo : l'autre visuel
   (l'habit de la page au même ratio, lot S-b). */
.fsa-photo { margin: 0; }
.fsa-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	background: var(--fsa-band);
	filter: none;
}
.fsa-photo--frame { overflow: hidden; border-radius: 0; }


/* ═════════════════════════════════════════════════════════════════════
   7. PORTES (CARTES), FEATURES
   C : « pas de carte, pas d'ombre ». Une PORTE = glyphe-habit (facultatif) + titre
   + phrase + étiquettes + lien étendu, posée sur la bande, sous un filet. La boîte
   n'existe que pour l'appel (--tint, --ask), en aplat franc.
   ═════════════════════════════════════════════════════════════════════ */

/* Portes, balisage neuf : <ul class="fsa-doors"><li class="fsa-door">
   <div class="fsa-door__glyph">[fsa_crystal habit=… tone=…]</div>
   <h3 class="fsa-h3"><a href="…">Titre</a></h3><p>…</p><ul class="fsa-tags">…</ul>
   <span class="fsa-link" aria-hidden="true">Learn more</span></li></ul>
   1 à 4 portes (auto-fit) ; le lien du titre couvre la porte (une seule cible). */
.fsa-doors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 48px var(--fsa-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.fsa-door { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; }
:where(.fsa-door) > * { margin: 0; }
.fsa-door__glyph { position: relative; overflow: hidden; aspect-ratio: 3 / 2; margin: 0 -8px 22px; }
.fsa-door__glyph > :is(svg, .fsa-stage__motif) { position: absolute; inset: 0; width: 100%; height: 100%; }
.fsa-door :is(h3, .fsa-h3) a { color: inherit; text-decoration: none; }
.fsa-door :is(h3, .fsa-h3) a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fsa-door:hover :is(h3, .fsa-h3) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fsa-door:has(:is(h3, .fsa-h3) a:focus-visible) { outline: 2px solid var(--fsa-focus); outline-offset: 6px; }
.fsa-door :is(h3, .fsa-h3) a:focus-visible { outline: none; }
.fsa-door > p { margin-top: 10px; font-size: var(--fsa-fs-card); color: var(--fsa-fg); }
.fsa-door > .fsa-tags { margin-top: 16px; }
.fsa-door > .fsa-link { margin-top: auto; padding-top: 18px; align-self: flex-start; }
.fsa-door > :is(a, button):not(h3 a) { position: relative; z-index: 2; }
@media (max-width: 760px) {
	.fsa-door__glyph { aspect-ratio: 2 / 1; max-width: 360px; }
}

/* .fsa-card (balisage 0.8.0, sections libres « Cards ») = une porte sans glyphe : filet
   de tête, titre, phrase, lien poussé en bas. La grille .fsa-grid > .fsa-card reste
   (alerte « une grille de cartes par page », js/editor.js). */
.fsa-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--fsa-rule-strong);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--fsa-fg);
	transition: box-shadow var(--fsa-dur) ease;
}
:where(.fsa-card) > * { margin: 0; }
.fsa-card :is(h3, .fsa-card__title) {
	margin-top: .85rem;
	font: 500 var(--fsa-fs-card-title)/1.2 var(--fsa-font-title);
	letter-spacing: -.012em;
	color: var(--fsa-fg-strong);
}
.fsa-card > :is(h3, .fsa-card__title):first-child { margin-top: 0; }
.fsa-card--lg :is(h3, .fsa-card__title) { font-size: var(--fsa-fs-h3-lg); line-height: 1.08; letter-spacing: -.025em; }
.fsa-card :where(p) { margin-top: .6rem; color: var(--fsa-fg); font-size: var(--fsa-fs-card); line-height: 1.6; }
.fsa-card :is(h3, .fsa-card__title) a { color: inherit; text-decoration: none; }
.fsa-card__label {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font: 500 var(--fsa-fs-label)/1.35 var(--fsa-font-sans); /* libellé (passe G, arbitrage 2) */
	letter-spacing: 0;
	text-transform: none;
	color: var(--fsa-fg-soft);
}
.fsa-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fsa-card--flat { box-shadow: none; }
/* Appel (« Looking for…? ») : aplat franc, le seul de la rangée. */
.fsa-card--tint { padding: var(--fsa-card-pad); border-top: 0; background: var(--fsa-band); }
.fsa-sec--alt .fsa-card--tint { background: var(--fsa-paper); }

/* Porte à lien : le titre couvre la carte ; au survol, le filet de tête passe à
   l'accent et le titre se souligne (pas de soulèvement, pas d'ombre). */
.fsa-card--link :is(h3, .fsa-card__title) a::after { content: ""; position: absolute; inset: 0; }
.fsa-card--link .fsa-card__foot a { position: relative; z-index: 1; }
.fsa-card--link:hover { box-shadow: inset 0 2px 0 var(--fsa-accent); }
.fsa-card--link:hover :is(h3, .fsa-card__title) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.fsa-card--link:has(:is(h3, .fsa-card__title) a:focus-visible) { outline: 2px solid var(--fsa-focus); outline-offset: 4px; }
.fsa-card--link :is(h3, .fsa-card__title) a:focus-visible { outline: none; }
.fsa-card__more { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

/* Porte à schéma : le schéma posé à même la bande, au-dessus du titre (plus de boîte
   pointillée). */
.fsa-card--fig { padding: 0; }
.fsa-card__fig {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 118px;
	padding: 1.25rem 0 .5rem;
	background: none;
}
.fsa-card__fig > svg { width: 100%; height: 112px; overflow: visible; }
.fsa-card__fig--cover { height: 148px; }
.fsa-card__fig--cover > svg { width: auto; height: 84px; max-width: 80%; }
.fsa-card__fig--bare { min-height: 0; padding: 1.25rem 0 0; justify-content: flex-start; }
.fsa-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 0 0; }
:where(.fsa-card__body) > * { margin: 0; }
.fsa-card--fig .fsa-card__body :is(h3, .fsa-card__title) { margin-top: .7rem; }
.fsa-card--fig .fsa-card__body > :first-child { margin-top: 0; }
.fsa-card__body :where(p) { margin-top: .6rem; }

/* Clé / valeur sous filet (« For », « Areas ») ; méta en colonnes */
.fsa-card__kv { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--fsa-rule); }
.fsa-card__kv dt { margin-bottom: .3rem; }
.fsa-card__kv dd { margin: 0; color: var(--fsa-fg); font-size: var(--fsa-fs-card); line-height: 1.55; }
.fsa-card__meta,
.fsa-meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.4rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--fsa-rule);
}
.fsa-meta--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fsa-meta dt { margin-bottom: .3rem; font: 500 var(--fsa-fs-sm)/1.35 var(--fsa-font-sans); color: var(--fsa-fg-soft); text-transform: none; letter-spacing: 0; }
.fsa-meta dd { margin: 0; font-size: var(--fsa-fs-m); line-height: 1.45; color: var(--fsa-fg); }
@media (max-width: 560px) {
	.fsa-meta { grid-template-columns: 1fr 1fr; }
	.fsa-meta:not(.fsa-meta--2) > div:last-child { grid-column: 1 / -1; }
}
.fsa-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	margin-top: auto;
	padding-top: 1.25rem;
}
@media (max-width: 600px) {
	.fsa-card__foot { flex-direction: column; align-items: flex-start; }
}

/* Porte à glyphe (offres, valeurs) : le glyphe sans boîte, couleur d'accent. */
.fsa-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.fsa-card__ico { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; background: none; }
.fsa-card__ico svg { width: 32px; height: 32px; }
.fsa-card--ico :is(h3, .fsa-card__title) { margin-top: 0; }
.fsa-card--ico .fsa-link { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

/* Le bloc méta est poussé en bas de la porte (aligné d'une porte à sa voisine). */
:is(.fsa-card, .fsa-card__body) > :has(+ :is(.fsa-meta, .fsa-card__meta, .fsa-card__kv)) { margin-bottom: auto; }
:is(.fsa-card, .fsa-card__body) > :is(.fsa-meta, .fsa-card__meta, .fsa-card__kv) ~ :is(.fsa-card__more, .fsa-card__foot, .fsa-link) { margin-top: 0; }

/* Composition ouverte : information NON cliquable (glyphe + titre + phrase), sans fond.
   Au plus trois colonnes. --2 : deux colonnes. */
.fsa-features {
	--fsa-features-gap: var(--fsa-col-gap);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, (100% - 2 * var(--fsa-features-gap)) / 3)), 1fr));
	gap: clamp(2rem, 3.5vw, 3rem) var(--fsa-features-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.fsa-features--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, (100% - var(--fsa-features-gap)) / 2)), 1fr)); }
.fsa-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	justify-items: start;
	min-width: 0;
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--fsa-rule);
}
:where(.fsa-feature) > * { margin: 0; }
.fsa-feature__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .9rem; background: none; }
.fsa-feature__ico svg { width: 32px; height: 32px; }
.fsa-feature__t {
	font: 500 var(--fsa-fs-h4)/1.25 var(--fsa-font-title);
	letter-spacing: -.012em;
	color: var(--fsa-fg-strong);
	text-wrap: balance;
}
.fsa-feature__d { margin-top: .5rem; max-width: 36rem; color: var(--fsa-fg); font-size: var(--fsa-fs-card); line-height: 1.6; }
.fsa-feature > .fsa-link,
.fsa-feature > .fsa-pills { margin-top: 1rem; }
.fsa-feature > .fsa-card__fig--bare { padding: 0; justify-content: flex-start; }
@media (max-width: 600px) {
	.fsa-features { gap: 1.75rem; }
	.fsa-feature:has(> .fsa-feature__ico) { grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; }
	.fsa-feature__ico { grid-row: 1 / span 4; margin: 0; }
	.fsa-feature:has(> .fsa-feature__ico) > :not(.fsa-feature__ico) { grid-column: 2; }
}
/* Appel dans une liste de features : le seul aplat de la rangée. */
.fsa-feature--ask { align-self: start; padding: var(--fsa-card-pad); border-top: 0; background: var(--fsa-band); }
.fsa-sec--alt .fsa-feature--ask { background: var(--fsa-paper); }


/* ═════════════════════════════════════════════════════════════════════
   8. DONNÉES — les chiffres sont de la typographie
   ═════════════════════════════════════════════════════════════════════ */

/* Chiffres (C) : Poppins 500 72 → 168, tabulaires, libellé petit dessous.
   <dl class="fsa-figs"><div><dt>Libellé</dt><dd class="fsa-count">100+</dd></div>…</dl>
   1 ou 2 chiffres. .fsa-count : compteur (site.js), jamais une année ni un code. */
.fsa-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 36px var(--fsa-col-gap); margin: 0; }
.fsa-figs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.fsa-figs dt { margin-top: 10px; max-width: 30ch; font: 400 var(--fsa-fs-m)/1.45 var(--fsa-font-sans); color: var(--fsa-fg); }
.fsa-figs dd { margin: 0; font: 500 var(--fsa-fs-fig)/.82 var(--fsa-font-title); letter-spacing: -.04em; color: var(--fsa-fg-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
	.fsa-figs dd { font-size: clamp(4rem, 18vw, 6rem); }
}

/* Bande de chiffres (0.8.0) : 2 à 4 valeurs, filets verticaux. */
.fsa-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; }
.fsa-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .45rem; padding: 0 var(--fsa-col-gap); border-left: 1px solid var(--fsa-rule); }
.fsa-stat:first-child { padding-left: 0; border-left: 0; }
.fsa-stat dd { margin: 0; font: 500 var(--fsa-fs-stat)/1 var(--fsa-font-title); letter-spacing: -.03em; color: var(--fsa-fg-strong); font-variant-numeric: tabular-nums; }
.fsa-stat dt { font: 400 var(--fsa-fs-sm)/1.4 var(--fsa-font-sans); letter-spacing: 0; text-transform: none; color: var(--fsa-fg-soft); }
.fsa-stat--key dd { color: var(--fsa-link); }
.fsa-stats--lg .fsa-stat dd { font-size: var(--fsa-fs-h2); }
@media (max-width: 860px) {
	.fsa-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
	.fsa-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* Socle de faits (C, bas d'un hero) : filet de tête, en-tête + faits à filets verticaux,
   codes en Poppins. <div class="fsa-plinth"><div class="fsa-plinth__head"><p>…</p>
   <p class="fsa-mono">…</p></div><div class="fsa-plinth__facts"><div><p class="fsa-plinth__code">
   ISO 13485</p><p class="fsa-plinth__lbl">…</p></div>…</div></div> */
.fsa-plinth { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--fsa-col-gap); row-gap: 18px; padding-block: 26px clamp(30px, 3vw, 44px); border-top: 1px solid var(--fsa-rule); }
:where(.fsa-plinth, .fsa-plinth__head, .fsa-plinth__facts > *) > * { margin: 0; }
.fsa-plinth__head > :first-child { font: 500 1rem/1.35 var(--fsa-font-sans); color: var(--fsa-fg-strong); }
.fsa-plinth__head .fsa-mono { display: block; margin-top: 6px; color: var(--fsa-fg-soft); }
.fsa-plinth__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.fsa-plinth__facts > * { padding: 0 var(--fsa-col-gap); border-left: 1px solid var(--fsa-rule); }
.fsa-plinth__code { font: 500 var(--fsa-fs-code)/1.1 var(--fsa-font-title); letter-spacing: -.015em; color: var(--fsa-fg-strong); white-space: nowrap; }
.fsa-plinth__lbl { margin-top: 6px !important; font-size: var(--fsa-fs-m); line-height: 1.4; color: var(--fsa-fg); }
@media (max-width: 1023px) {
	.fsa-plinth { grid-template-columns: minmax(0, 1fr); }
	.fsa-plinth__facts > :first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
	.fsa-plinth__facts { grid-template-columns: minmax(0, 1fr); }
	.fsa-plinth__facts > * { border-left: 0; border-top: 1px solid var(--fsa-rule); padding: 14px 0 0; }
	.fsa-plinth__facts > * + * { margin-top: 14px; }
}

/* Carte de données (« at a glance », 0.8.0) : aplat papier à filet d'accent. */
.fsa-glance { padding: 1.15rem 1.5rem 1.3rem; background: var(--fsa-paper); border-top: 2px solid var(--fsa-brand); color: var(--fsa-text); }
.fsa-glance__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; margin-bottom: 1rem; border-bottom: 1px solid var(--fsa-line); }
.fsa-glance__head .fsa-mono:first-child { color: var(--fsa-ink); display: inline-flex; align-items: center; gap: .55rem; }
.fsa-glance__head .fsa-wave { height: 16px; width: auto; aspect-ratio: 265 / 432; }
@media (max-width: 560px) {
	.fsa-glance { padding: 1rem 1.15rem 1.15rem; }
	.fsa-glance__head .fsa-mono:last-child { display: none; }
}

/* Fiche signalétique : paires libellé / valeur sur une ligne */
.fsa-facts { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; margin: 1.75rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--fsa-rule); }
.fsa-facts > div { display: grid; gap: .3rem; }
.fsa-facts dt { font: 400 var(--fsa-fs-sm)/1.4 var(--fsa-font-sans); letter-spacing: 0; text-transform: none; color: var(--fsa-fg-soft); }
.fsa-facts dd { margin: 0; font: 500 var(--fsa-fs-m)/1.35 var(--fsa-font-title); color: var(--fsa-fg-strong); }

/* Gros chiffre (0.8.0) = chiffre C */
.fsa-big { display: block; margin-left: -.03em; font: 500 var(--fsa-fs-big)/.85 var(--fsa-font-title); letter-spacing: -.04em; color: var(--fsa-fg-strong); font-variant-numeric: tabular-nums; }
.fsa-big + .fsa-mono { margin-top: .9rem; }

/* Jauge (part d'un total) : --fsa-gauge: 17.83% */
.fsa-gauge { margin-top: 2.25rem; }
.fsa-gauge__bar { position: relative; height: 10px; background: var(--fsa-rule); overflow: hidden; }
.fsa-gauge__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fsa-gauge, 0%); background: var(--fsa-accent); transform-origin: 0 50%; }
.fsa-js .fsa-gauge .fsa-gauge__bar::before { transform: scaleX(0); transition: transform 1.2s var(--fsa-ease-out) .2s; }
.fsa-js .fsa-gauge.is-in .fsa-gauge__bar::before { transform: scaleX(1); }
.fsa-gauge__legend { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
:where(.fsa-gauge__legend) > * { margin: 0; }
.fsa-gauge__value { display: block; margin-bottom: .3rem; font: 500 var(--fsa-fs-gauge)/1 var(--fsa-font-title); letter-spacing: -.03em; color: var(--fsa-fg-strong); }
@media (max-width: 560px) {
	.fsa-gauge__legend { flex-direction: column; gap: .5rem; }
}

/* Jalons datés : nœud hexagonal creux (à venir), plein (fait), plein d'accent (en cours). */
.fsa-timeline {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	margin: 2.75rem 0 0;
	padding: 0;
	list-style: none;
}
.fsa-timeline > li { position: relative; margin: 0; padding: 1.75rem 1.25rem 0 0; }
.fsa-timeline > li::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 4px; background: radial-gradient(circle closest-side, var(--fsa-accent) 0 55%, transparent 75%) 0 50% / 9px 4px repeat-x; opacity: .6; }
.fsa-timeline > li::after { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 22px; background: var(--fsa-accent); -webkit-mask: var(--fsa-glyph-hex-ring) center / contain no-repeat; mask: var(--fsa-glyph-hex-ring) center / contain no-repeat; }
.fsa-timeline > li:is(.is-done, .is-now)::after { -webkit-mask-image: var(--fsa-glyph-hex); mask-image: var(--fsa-glyph-hex); }
.fsa-timeline > li.is-now::after { background: var(--fsa-fg-strong); }
.fsa-timeline__y { display: block; font: 500 var(--fsa-fs-num)/1 var(--fsa-font-title); letter-spacing: -.03em; color: var(--fsa-fg-strong); font-variant-numeric: tabular-nums; }
.fsa-timeline__t { display: block; margin-top: .5rem; font-size: var(--fsa-fs-m); line-height: 1.5; color: var(--fsa-fg-soft); }
.fsa-timeline--v { grid-auto-flow: row; grid-auto-columns: auto; margin-top: 0; }
.fsa-timeline--v > li { padding: 0 0 1.5rem 2.25rem; }
.fsa-timeline--v > li::before { top: 26px; bottom: 4px; left: 8px; right: auto; width: 4px; height: auto; background: radial-gradient(circle closest-side, var(--fsa-accent) 0 55%, transparent 75%) 50% 0 / 4px 9px repeat-y; }
.fsa-timeline--v > li:last-child { padding-bottom: 0; }
.fsa-timeline--v > li:last-child::before { display: none; }
@media (max-width: 560px) {
	.fsa-timeline { grid-auto-flow: row; grid-auto-columns: auto; margin-top: 2.25rem; }
	.fsa-timeline > li { padding: 0 0 1.5rem 2.25rem; }
	.fsa-timeline > li::before { top: 26px; bottom: 4px; left: 8px; right: auto; width: 4px; height: auto; background: radial-gradient(circle closest-side, var(--fsa-accent) 0 55%, transparent 75%) 50% 0 / 4px 9px repeat-y; }
	.fsa-timeline > li:last-child { padding-bottom: 0; }
	.fsa-timeline > li:last-child::before { display: none; }
}

/* Chaîne (C) : 2 à 5 nœuds hexagonaux reliés en pointillé de nœuds ; .is-on = nœud plein.
   <ol class="fsa-chain" style="--k:3"><li [class="is-on"]><span class="fsa-chain__dot"></span>
   <span class="fsa-chain__lbl">…</span>[<span class="fsa-chain__det fsa-mono">…</span>]
   [<ul class="fsa-keys">…</ul>]</li>…</ol> — verticale sous 760 px. */
.fsa-chain { --k: 3; position: relative; display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.fsa-chain::before { content: ""; position: absolute; top: 9px; left: 10px; right: calc(100% / var(--k) - 10px); height: 4px; background: radial-gradient(circle closest-side, var(--fsa-accent) 0 55%, transparent 75%) 0 50% / 9px 4px repeat-x; opacity: .7; }
.fsa-chain > li { position: relative; margin: 0; padding-right: var(--fsa-col-gap); }
.fsa-chain__dot { position: relative; display: block; width: 20px; height: 22px; background: var(--fsa-accent); -webkit-mask: var(--fsa-glyph-hex-ring) center / contain no-repeat; mask: var(--fsa-glyph-hex-ring) center / contain no-repeat; }
.fsa-chain > .is-on .fsa-chain__dot { -webkit-mask-image: var(--fsa-glyph-hex); mask-image: var(--fsa-glyph-hex); }
.fsa-chain__lbl { display: block; margin-top: 12px; font: 500 var(--fsa-fs-m)/1.3 var(--fsa-font-sans); color: var(--fsa-fg-strong); }
.fsa-chain__det { display: block; margin-top: 4px; font-size: .75rem; }
@media (max-width: 760px) {
	.fsa-chain { grid-template-columns: minmax(0, 1fr); }
	.fsa-chain::before { display: none; }
	.fsa-chain > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 16px; padding: 0 0 18px; }
	.fsa-chain > li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 26px; bottom: 4px; width: 4px; background: radial-gradient(circle closest-side, var(--fsa-accent) 0 55%, transparent 75%) 50% 0 / 4px 9px repeat-y; opacity: .7; }
	.fsa-chain__dot { grid-row: 1 / span 3; }
	.fsa-chain__lbl { margin-top: 1px; }
	.fsa-chain > li > :not(.fsa-chain__dot) { grid-column: 2; }
}

/* Statut à nœud : plein = certifié, creux (--ring) = accrédité. */
.fsa-status { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fsa-fs-m)/1.2 var(--fsa-font-sans); color: var(--fsa-fg-strong); }
.fsa-status::before { content: ""; flex: none; width: 10px; height: 11px; background: var(--fsa-accent); -webkit-mask: var(--fsa-glyph-hex) center / contain no-repeat; mask: var(--fsa-glyph-hex) center / contain no-repeat; }
.fsa-status--ring::before { width: 12px; height: 13px; -webkit-mask-image: var(--fsa-glyph-hex-ring); mask-image: var(--fsa-glyph-hex-ring); }


/* ═════════════════════════════════════════════════════════════════════
   9. MOMENT FORT NAVY (PANNEAU), PROCESSUS COLLANT
   ═════════════════════════════════════════════════════════════════════ */

/* Panneau navy (0.8.0) : aplat navy, rayon 0, sans ombre ; matière en coin. */
.fsa-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.25rem, 5vw, 4.5rem);
	border-radius: 0;
	background: var(--fsa-navy);
	color: var(--fsa-on-dark);
	box-shadow: none;
}
.fsa-panel::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -4%;
	top: -10%;
	width: 56%;
	height: 120%;
	background: radial-gradient(circle, var(--fsa-lat-no) 1.3px, transparent 1.8px) 0 0 / 22px 19.05px, radial-gradient(circle, var(--fsa-lat-no) 1.3px, transparent 1.8px) 11px 9.53px / 22px 19.05px;
	opacity: .45;
	rotate: -9deg;
	-webkit-mask-image: radial-gradient(110% 85% at 100% 10%, #000 0%, transparent 65%);
	mask-image: radial-gradient(110% 85% at 100% 10%, #000 0%, transparent 65%);
}
.fsa-panel :where(p) { color: var(--fsa-fg); }
/* Un panneau partage la largeur (texte 5/12) : son titre prend le pas « étape » (44 → 28)
   — un mot long (« Commercialisation ») tient sur sa ligne. Le moment fort (§ 9, plein
   cadre) garde le grand titre. */
.fsa-panel :is(h2, .fsa-h2) { font-size: var(--fsa-fs-h2-step); line-height: 1.08; letter-spacing: -.028em; }
.fsa-panel strong { color: var(--fsa-fg-strong); font-weight: 500; }
.fsa-panel__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.fsa-panel__grid--even { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
:where(.fsa-panel__grid) > * { margin: 0; }
.fsa-panel__grid > * { min-width: 0; }
.fsa-panel__text > p { margin-top: 1.4rem; max-width: 34rem; }
.fsa-panel__text > .fsa-link,
.fsa-panel__text > .fsa-links { margin-top: 1.75rem; }
@media (max-width: 960px) {
	.fsa-panel__grid, .fsa-panel__grid--even { grid-template-columns: minmax(0, 1fr); }
	.fsa-panel::after { width: 90%; height: 60%; }
}
/* Panneau qui s'échappe vers un bord de l'écran (enfant DIRECT de .fsa-wrap). */
.fsa-panel--bleed-end { margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50% + clamp(2.25rem, 5vw, 4.5rem)); }
.fsa-panel--bleed-start { margin-left: calc(50% - 50vw); padding-left: calc(50vw - 50% + clamp(2.25rem, 5vw, 4.5rem)); }
.fsa-panel--bleed-start::after { right: auto; left: -4%; scale: -1 1; }
.fsa-panel .fsa-fig,
.fsa-fig--on-dark { background: none; box-shadow: none; }

/* Moment fort (C), balisage neuf : aplat navy PLEINE LARGEUR posé à la fin d'une bande
   (dernier enfant de .fsa-wrap ; --to-end : il touche le bas de la bande), treillis à
   très grande échelle en fond, grille 3 / 9 : repère de marge + titre + chiffres.
   <div class="fsa-moment fsa-t-navy [fsa-moment--to-end]"><div class="fsa-moment__field">
   [fsa_crystal habit=… tone="navy"]</div><div class="fsa-moment__grid"><p class="fsa-eyebrow">…</p>
   <div class="fsa-moment__main"><h2 class="fsa-moment__title">…</h2><dl class="fsa-figs">…</dl>
   </div></div></div>. Il ne compte pas dans le refus bleu/navy (bande « auto ») : éviter
   de le poser dans une bande qui précède un CTA bleu. */
.fsa-moment {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: clamp(4rem, 7vw, 7.5rem);
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}
.fsa-sec .fsa-moment.fsa-moment--to-end { margin-bottom: calc(-1 * var(--fsa-section)); } /* (0,3,0) : bat « :root :where(.is-layout-flow) > :last-child » du cœur */
.fsa-moment__field { position: absolute; inset: 0; z-index: -1; }
.fsa-moment__field:empty {
	background: radial-gradient(circle, var(--fsa-lat-no) 1.3px, transparent 1.8px) 0 0 / 22px 19.05px, radial-gradient(circle, var(--fsa-lat-no) 1.3px, transparent 1.8px) 11px 9.53px / 22px 19.05px;
	opacity: .5;
	-webkit-mask-image: linear-gradient(100deg, transparent 15%, #000 85%);
	mask-image: linear-gradient(100deg, transparent 15%, #000 85%);
}
.fsa-moment__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--fsa-col-gap); min-height: clamp(480px, 46vw, 680px); padding-block: clamp(4.5rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6rem); }
.fsa-moment .fsa-eyebrow { padding-top: 1.1rem; }
.fsa-moment__main { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.fsa-moment__title { font: 500 var(--fsa-fs-h1)/.98 var(--fsa-font-title); letter-spacing: -.035em; color: var(--fsa-fg-strong); max-width: 13ch; }
@media (max-width: 1023px) {
	.fsa-moment__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.fsa-moment .fsa-eyebrow { padding-top: 0; margin-bottom: 1.25rem; }
}

/* Processus collant (C) — GÉNÉRIQUE : un panneau navy collant (navigation des étapes,
   champ qui cristallise jusqu'à --fsa-p) à gauche, les étapes à droite. site.js pose
   aria-current sur le lien de l'étape au centre de l'écran et --fsa-p = (rang + 1) / N
   sur le panneau. 1 étape : ni navigation ni collant (--one, automatique) ; plus de
   7 étapes ou navigation plus haute que l'écran : statique. Sans JS, en mouvement
   réduit, dans le canevas : image finale (--fsa-p = 1), tout visible.
   <div class="fsa-proc" data-fsa-steps><aside class="fsa-proc__aside"><div class="fsa-proc__panel fsa-t-navy">
   <div class="fsa-proc__field">[fsa_crystal … tone="navy"]</div><ol class="fsa-proc__nav">
   <li><a href="#step-id">Titre</a></li>…</ol></div></aside><div class="fsa-proc__steps">
   <section id="step-id" class="fsa-proc__step">…</section>…</div></div>
   Les ancres restent sur les sections d'étape (scroll-margin compris). */
.fsa-proc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.fsa-proc__aside { position: sticky; top: calc(var(--fsa-hdr-h) + 24px); }
.fsa-proc__panel {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: min(calc(100svh - var(--fsa-hdr-h) - 48px), 600px);
	min-height: 420px;
	transition: --fsa-p 1.2s var(--fsa-ease-out);
}
/* --fsa-p est héritée : sa transition fait recalculer tout le champ à chaque image. Au doigt et
   jusqu'à 760 px, l'étape change d'un coup (passe G, audit a11y P1-1). */
@media (pointer: coarse), (max-width: 760px) {
	.fsa-proc__panel { transition: none; }
}
.fsa-proc__field { position: absolute; inset: 0; }
.fsa-proc__field:empty {
	background: radial-gradient(circle, var(--fsa-lat-no) 1.3px, transparent 1.8px) 0 0 / 22px 19.05px, radial-gradient(circle, var(--fsa-lat-no) 1.3px, transparent 1.8px) 11px 9.53px / 22px 19.05px;
	opacity: calc(.2 + .5 * var(--fsa-p));
	-webkit-mask-image: linear-gradient(90deg, #000 calc(var(--fsa-p) * 100%), transparent calc(var(--fsa-p) * 100% + 25%));
	mask-image: linear-gradient(90deg, #000 calc(var(--fsa-p) * 100%), transparent calc(var(--fsa-p) * 100% + 25%));
}
.fsa-proc__nav { position: relative; display: grid; gap: 2px; margin: 0; padding: 22px; list-style: none; background: linear-gradient(to top, var(--fsa-navy) 55%, color-mix(in srgb, var(--fsa-navy) 0%, transparent)); }
.fsa-proc__nav li { margin: 0; }
.fsa-proc__nav a { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 6px 4px; font: 500 var(--fsa-fs-body)/1.25 var(--fsa-font-sans); color: var(--fsa-on-dark-muted); text-decoration: none; transition: color .3s; }
.fsa-proc__nav a::before { content: ""; flex: none; width: 13px; height: 14px; background: currentColor; -webkit-mask: var(--fsa-glyph-hex-ring) center / contain no-repeat; mask: var(--fsa-glyph-hex-ring) center / contain no-repeat; }
.fsa-proc__nav a:hover,
.fsa-proc__nav a[aria-current] { color: var(--fsa-on-dark-strong); }
.fsa-proc__nav a[aria-current]::before { background: var(--fsa-brand-light); -webkit-mask-image: var(--fsa-glyph-hex); mask-image: var(--fsa-glyph-hex); }
.fsa-proc__steps { display: grid; min-width: 0; }
.fsa-proc__step { min-height: 56svh; padding-block: 8px 72px; scroll-margin-top: calc(var(--fsa-hdr-h) + 24px); }
.fsa-proc__step + .fsa-proc__step { border-top: 1px solid var(--fsa-rule); padding-top: 56px; }
.fsa-proc__step :is(h2, .fsa-h2) { font-size: var(--fsa-fs-h2-step); line-height: 1.08; letter-spacing: -.028em; }
.fsa-proc__step > p { margin-top: 18px; max-width: 60ch; }
.fsa-proc__step .fsa-chain { margin-top: 36px; padding-top: 26px; border-top: 1px dashed var(--fsa-rule-strong); }
.fsa-proc__step .fsa-chain::before { top: 35px; }
/* Une étape, ou statique (posé par site.js : .is-static) : le panneau devient l'image. */
.fsa-proc:not(:has(.fsa-proc__step + .fsa-proc__step)) .fsa-proc__aside,
.fsa-proc.is-static .fsa-proc__aside { position: static; }
.fsa-proc:not(:has(.fsa-proc__step + .fsa-proc__step)) .fsa-proc__panel { height: auto; min-height: 0; aspect-ratio: 5 / 4; }
.fsa-proc:not(:has(.fsa-proc__step + .fsa-proc__step)) .fsa-proc__nav { display: none; }
.fsa-proc:not(:has(.fsa-proc__step + .fsa-proc__step)) .fsa-proc__step,
.fsa-proc.is-static .fsa-proc__step { min-height: 0; }
@media (max-width: 1023px) {
	.fsa-proc { grid-template-columns: minmax(0, 1fr); }
	.fsa-proc__aside { position: static; }
	.fsa-proc__panel { height: auto; min-height: 0; aspect-ratio: 16 / 10; margin-bottom: 48px; }
	.fsa-proc__step { min-height: 0; }
}


/* ═════════════════════════════════════════════════════════════════════
   10. REGISTRE, DÉFINITIONS, RANGÉES, TABLEAU — des filets, pas de boîte
   ═════════════════════════════════════════════════════════════════════ */

/* Registre (C) : filet fort en tête, filets de rangée, norme en Poppins 24 → 34 +
   millésime mono, portée en deux registres, statut à nœud. Colonnes par défaut :
   norme · portée · statut ; --fsa-reg-cols pour d'autres (ex. Quality, 6 colonnes).
   Sous 1024 px avec --cols : fiches à libellés (.fsa-register__lbl, cachés au-dessus). */
.fsa-register-card { padding: 0; background: none; border-radius: 0; box-shadow: none; }
.fsa-register { --fsa-reg-cols: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); margin: 0; border-top: 1px solid var(--fsa-fg-strong); }
.fsa-register__head,
.fsa-register__row { display: grid; grid-template-columns: var(--fsa-reg-cols); column-gap: 20px; align-items: start; }
.fsa-register__head { padding-block: 14px; border-bottom: 1px solid var(--fsa-rule); font: 500 var(--fsa-fs-s)/1.3 var(--fsa-font-sans); color: var(--fsa-fg-soft); }
.fsa-register__head > * { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.fsa-register__head > :last-child { text-align: left; }
.fsa-register__row { position: relative; padding-block: 26px; border-bottom: 1px solid var(--fsa-rule); transition: background-color var(--fsa-dur) ease; }
.fsa-register__row:hover { background: color-mix(in srgb, var(--fsa-brand) 4%, transparent); }
.fsa-register__std { font: 500 var(--fsa-fs-h3)/1.1 var(--fsa-font-title); letter-spacing: -.02em; color: var(--fsa-fg-strong); }
/* Registre C (normes) : le code en grand (24 → 34). La taille H3 reste celle des registres à
   colonne étroite (programmes de R&D, kits du catalogue : 10,5 rem). */
.fsa-register--cols .fsa-register__std { font-size: var(--fsa-fs-std); line-height: 1; letter-spacing: -.025em; }
.fsa-register__std small { display: block; margin-top: 8px; font: 500 .78rem/1 var(--fsa-font-mono); letter-spacing: .02em; color: var(--fsa-fg-soft); }
.fsa-register__scope { font-size: var(--fsa-fs-m); line-height: 1.5; color: var(--fsa-fg); }
.fsa-register__scope b,
.fsa-register__scope strong { display: block; font: 600 var(--fsa-fs-card)/1.35 var(--fsa-font-sans); color: var(--fsa-fg-strong); }
.fsa-register__scope span { display: block; margin-top: 6px; font-size: var(--fsa-fs-m); line-height: 1.5; color: var(--fsa-fg); } /* 15 px : seuil de lecture (lot P3, passe F) */
.fsa-register__row > .fsa-pill,
.fsa-register__status { justify-self: start; }
.fsa-register__ref { font: 500 .78rem/1.4 var(--fsa-font-mono); color: var(--fsa-fg-strong); }
.fsa-register__lbl { display: none; }
/* Clé / valeur (collection, identité) : <dl class="fsa-register fsa-register--kv"> */
.fsa-register--kv { --fsa-reg-cols: minmax(0, 3fr) minmax(0, 9fr); }
.fsa-register--kv .fsa-register__row { align-items: baseline; padding-block: 18px; }
.fsa-register--kv dt { margin: 0; font: 500 var(--fsa-fs-sm)/1.4 var(--fsa-font-sans); color: var(--fsa-fg-soft); text-transform: none; letter-spacing: 0; }
.fsa-register--kv dd { margin: 0; color: var(--fsa-fg); line-height: 1.55; }
.fsa-register--kv dd :is(b, strong) { font-weight: 600; color: var(--fsa-fg-strong); }
.fsa-register--kv dd span { display: block; font-size: var(--fsa-fs-sm); color: var(--fsa-fg-soft); }
.fsa-register__note { margin-top: 1rem; font-size: var(--fsa-fs-sm); color: var(--fsa-fg-soft); }
@media (max-width: 1023px) {
	.fsa-register--cols .fsa-register__head { display: none; }
	.fsa-register--cols .fsa-register__row { grid-template-columns: 1fr 1fr; row-gap: 14px; }
	.fsa-register--cols :is(.fsa-register__std, .fsa-register__scope) { grid-column: 1 / -1; }
	.fsa-register--cols .fsa-register__lbl { display: block; margin-bottom: 3px; font: 500 .75rem/1.3 var(--fsa-font-sans); color: var(--fsa-fg-soft); }
}
@media (max-width: 640px) {
	.fsa-register__head { display: none; }
	.fsa-register:not(.fsa-register--cols) .fsa-register__row { grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1rem; }
	.fsa-register:not(.fsa-register--cols) .fsa-register__scope { grid-column: 1 / -1; grid-row: 2; }
	.fsa-register--kv .fsa-register__row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}

/* Liste de définitions (rôles, valeurs) : terme | définition, sous filets */
.fsa-deflist { margin: 0; border-top: 1px solid var(--fsa-rule); }
.fsa-deflist > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: .5rem var(--fsa-col-gap); padding-block: 26px; border-bottom: 1px solid var(--fsa-rule); }
.fsa-deflist dt { font: 500 clamp(1.25rem, 1.1rem + .55vw, 1.5rem)/1.2 var(--fsa-font-title); letter-spacing: -.015em; color: var(--fsa-fg-strong); }
.fsa-deflist dd { margin: 0; color: var(--fsa-fg); line-height: 1.6; }
.fsa-deflist dd p + p { margin-top: .6rem; }
@media (max-width: 760px) {
	.fsa-deflist > div { grid-template-columns: minmax(0, 1fr); }
}

/* Rangées cliquables : titre + phrase + flèche, sous filets */
.fsa-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fsa-rule); }
.fsa-rows > li { margin: 0; border-bottom: 1px solid var(--fsa-rule); }
.fsa-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto;
	gap: .5rem 2rem;
	align-items: center;
	padding: 1.4rem 0;
	color: var(--fsa-fg);
	text-decoration: none;
	transition: background-color var(--fsa-dur) ease, box-shadow var(--fsa-dur) ease;
}
a.fsa-row:hover { background: color-mix(in srgb, var(--fsa-brand) 5%, transparent); box-shadow: -.75rem 0 0 color-mix(in srgb, var(--fsa-brand) 5%, transparent), .75rem 0 0 color-mix(in srgb, var(--fsa-brand) 5%, transparent); }
.fsa-row__t { font: 500 var(--fsa-fs-h4)/1.3 var(--fsa-font-title); letter-spacing: -.012em; color: var(--fsa-fg-strong); }
.fsa-row__d { color: var(--fsa-fg-soft); line-height: 1.55; }
.fsa-row .fsa-arr { color: var(--fsa-accent); font-size: var(--fsa-fs-h4); }
a.fsa-row:hover .fsa-arr { translate: 4px 0; }
a.fsa-row:hover .fsa-row__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width: 700px) {
	.fsa-row { grid-template-columns: minmax(0, 1fr) auto; }
	.fsa-row__d { grid-column: 1; grid-row: 2; }
	.fsa-row .fsa-arr { grid-column: 2; grid-row: 1 / span 2; }
}

/* Tableau : filets seuls ; défile horizontalement au téléphone. */
.fsa-table-wrap { overflow-x: auto; border-top: 1px solid var(--fsa-fg-strong); border-radius: 0; background: none; box-shadow: none; }
.fsa-table { width: 100%; border-collapse: collapse; font-size: var(--fsa-fs-m); line-height: 1.5; }
.fsa-table caption { padding: 1rem 0 0; text-align: left; font-size: var(--fsa-fs-sm); color: var(--fsa-fg-soft); }
.fsa-table th,
.fsa-table td { padding: 1rem 1.25rem 1rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fsa-rule); }
.fsa-table thead th { font: 500 var(--fsa-fs-s)/1.35 var(--fsa-font-sans); letter-spacing: 0; text-transform: none; color: var(--fsa-fg-soft); white-space: nowrap; }
.fsa-table tbody th { font: 500 var(--fsa-fs-base)/1.35 var(--fsa-font-title); color: var(--fsa-fg-strong); }
.fsa-table tbody tr:hover > * { background: color-mix(in srgb, var(--fsa-brand) 4%, transparent); }


/* ═════════════════════════════════════════════════════════════════════
   11. ACTUALITÉS — liste à filets, à la une, filtres, pagination
   ═════════════════════════════════════════════════════════════════════ */
.fsa-news-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.fsa-news-meta time { white-space: nowrap; font: 500 var(--fsa-fs-data)/1.2 var(--fsa-font-mono); color: var(--fsa-fg-soft); }

/* Liste : méta (rubrique, date mono) · titre + résumé · vignette (couleurs naturelles).
   Sans vignette (--no-thumb), la colonne se referme. */
.fsa-news-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fsa-fg-strong); }
.fsa-news-list > li { margin: 0; }
.fsa-news-item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 7fr) minmax(0, 2.6fr);
	gap: 1rem var(--fsa-col-gap);
	align-items: start;
	padding-block: 30px;
	border-bottom: 1px solid var(--fsa-rule);
}
:where(.fsa-news-item) > * { margin: 0; }
.fsa-news-item > * { min-width: 0; }
.fsa-news-item__meta { display: grid; gap: 6px; justify-items: start; font: 500 var(--fsa-fs-sm)/1.3 var(--fsa-font-sans); color: var(--fsa-fg-strong); }
.fsa-news-item__meta time { font: 500 var(--fsa-fs-data)/1.2 var(--fsa-font-mono); color: var(--fsa-fg-soft); }
.fsa-news-item__title { max-width: 34ch; font: 500 clamp(1.25rem, 1.08rem + .6vw, 1.625rem)/1.22 var(--fsa-font-title); letter-spacing: -.015em; color: var(--fsa-fg-strong); text-wrap: balance; }
.fsa-news-item__title a { color: inherit; text-decoration: none; }
.fsa-news-item__title a::after { content: ""; position: absolute; inset: 0; }
.fsa-news-item__title a:focus-visible { outline: none; }
.fsa-news-item:has(.fsa-news-item__title a:focus-visible) { outline: 2px solid var(--fsa-focus); outline-offset: 4px; }
.fsa-news-item:hover .fsa-news-item__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.fsa-news-item__excerpt { margin-top: 10px !important; max-width: 62ch; color: var(--fsa-fg); font-size: var(--fsa-fs-card); line-height: 1.6; }
.fsa-news-item__thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fsa-band); }
.fsa-news-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Sans vignette, le texte prend les colonnes 2 et 3 de la MÊME trame : les titres de tous
   les rangs restent sur un seul axe (2,4 / 9,6 les décalait de ≈ 6 px ; lot P4, passe F). */
@media (min-width: 1024px) {
	.fsa-news-item--no-thumb > :nth-child(n+2) { grid-column: 2 / -1; } /* 1er enfant = méta (ou date) */
}
/* À la une : grand visuel (photo d'article ou vignette composée du lot S-b, graine =
   ID de l'article) + titre plus grand ; filet fort sous elle. */
.fsa-news-item--lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-block: 0 40px; border-bottom: 1px solid var(--fsa-fg-strong); }
.fsa-news-item--lead .fsa-news-item__thumb { aspect-ratio: 16 / 10; }
.fsa-news-item--lead .fsa-news-item__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.12; letter-spacing: -.025em; }
.fsa-news-list:has(> li > .fsa-news-item--lead) { border-top: 0; }
@media (max-width: 1023px) {
	.fsa-news-item,
	.fsa-news-item--no-thumb,
	.fsa-news-item--lead { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
	.fsa-news-item__meta { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 14px; }
	.fsa-news-item__thumb { order: -1; max-width: 22rem; }
	.fsa-news-item--lead .fsa-news-item__thumb { max-width: none; }
}

/* Filtres (All · Press releases · News) : étiquettes carrées ; courant = aplat bleu. */
.fsa-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fsa-filters a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .45rem 1rem;
	border: 1px solid var(--fsa-rule-strong);
	border-radius: 0;
	background: transparent;
	font: 500 var(--fsa-fs-m)/1.2 var(--fsa-font-sans);
	color: var(--fsa-fg);
	text-decoration: none;
	transition: border-color var(--fsa-dur) ease, background-color var(--fsa-dur) ease, color var(--fsa-dur) ease;
}
.fsa-filters a:hover { border-color: var(--fsa-fg-strong); color: var(--fsa-fg-strong); }
.fsa-filters a[aria-current] { background: var(--fsa-brand); border-color: var(--fsa-brand); color: var(--fsa-paper); }

/* Pagination */
.fsa-pagination,
.fsa-pagination.wp-block-query-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.fsa-pagination a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font: 500 var(--fsa-fs-m)/1.3 var(--fsa-font-sans); color: var(--fsa-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: .3em; }
.fsa-pagination a:hover { text-decoration-color: currentColor; }
.fsa-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 0; text-decoration: none; }
.fsa-pagination .page-numbers.current { background: var(--fsa-brand); color: var(--fsa-paper); }


/* ═════════════════════════════════════════════════════════════════════
   12. CTA BLEU, ENCADRÉ, FIGURE
   ═════════════════════════════════════════════════════════════════════ */

/* CTA (C) : aplat BLEU (tone « blue » : le refus bleu/navy s'y fonde), grille 3 / 9 : repère
   de marge à gauche ; titre 34 → 60, ligne, bouton. Dès 1024 px, la ligne et le bouton
   partagent une rangée (texte colonnes 4–9, bouton 10–12, calé au pied du texte), comme
   l'accueil : la bande reste une bande (passe F du 13/11 : le CTA ajoutait 165 à 290 px
   par page). Balisage d'avant inchangé : section.fsa-cta.fsa-on-blue › svg.fsa-cta__wave +
   .fsa-cta__in › (div › sur-titre + h2 + p) + .fsa-cta__side (bouton, lien .fsa-cta__alt).
   Champ cristal (lot S-b) : <div class="fsa-cta__field">[fsa_crystal habit="page"
   context="cta" tone="blue"]</div> en premier enfant de la section ; la vague d'avant et
   la matière CSS se retirent d'elles-mêmes. Hors vague (accueil), le treillis reste EN
   MARGE du texte : il s'efface à 12 % sous le texte et ne se montre plein qu'au bord droit
   (au-dessous de 1024 px, le texte prend toute la largeur : une trame pâle seulement). */
.fsa-cta {
	overflow: clip;
	background-image:
		linear-gradient(90deg, var(--fsa-brand) 32%, color-mix(in srgb, var(--fsa-brand) 0%, transparent) 88%),
		radial-gradient(circle, color-mix(in srgb, var(--fsa-paper) 42%, transparent) 1.4px, transparent 1.9px),
		radial-gradient(circle, color-mix(in srgb, var(--fsa-paper) 42%, transparent) 1.4px, transparent 1.9px);
	background-size: 100% 100%, 26px 22.5px, 26px 22.5px;
	background-position: 0 0, 0 0, 13px 11.25px;
}
.fsa-cta:has(> .fsa-cta__field) { background-image: none; }
.fsa-cta__field { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fsa-cta__field:not(:has(.fsa-lat--wave)) {
	/* Passe G (audit design P2-12) : le titre peut occuper aussi la colonne des boutons (une ligne
	   de plus coûtait 61 px par page) ; le treillis y reste donc voilé en HAUT et ne se montre
	   plein qu'au coin bas-droit, autour du bouton. */
	-webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .12) 64%, #000 95%), linear-gradient(180deg, rgb(0 0 0 / .3) 0, #000 72%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, rgb(0 0 0 / .12) 64%, #000 95%), linear-gradient(180deg, rgb(0 0 0 / .3) 0, #000 72%);
	mask-composite: intersect;
}
.fsa-cta__wave {
	position: absolute;
	z-index: -1;
	right: -4%;
	top: -30%;
	height: 170%;
	width: auto;
	aspect-ratio: 265 / 432;
	--fsa-wave-a: color-mix(in srgb, var(--fsa-paper) 16%, transparent);
	--fsa-wave-b: color-mix(in srgb, var(--fsa-paper) 9%, transparent);
}
.fsa-cta:has(> .fsa-cta__field) > .fsa-cta__wave { display: none; }
.fsa-cta__in {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	column-gap: var(--fsa-col-gap);
	align-items: start;
	padding-block: clamp(3rem, 1.2rem + 4vw, 5.25rem) clamp(2.75rem, 1.1rem + 3.2vw, 4.25rem);
}
.fsa-cta__in > div:not([class*="fsa-"]) { display: contents; }
:where(.fsa-cta__in) > * { margin: 0; }
.fsa-cta__in > * { min-width: 0; }
.fsa-cta__in .fsa-eyebrow { grid-column: 1; grid-row: 1; margin: 0; padding-top: .75rem; }
.fsa-cta__in > :not(.fsa-eyebrow),
.fsa-cta__in > div:not([class*="fsa-"]) > :not(.fsa-eyebrow) { grid-column: 2 / -1; }
.fsa-cta :is(h2, .fsa-h2) { font-size: var(--fsa-fs-cta); line-height: 1.02; letter-spacing: -.03em; color: var(--fsa-fg-strong); max-width: 20ch; }
.fsa-cta .fsa-soft { color: color-mix(in srgb, var(--fsa-paper) 80%, transparent); }
.fsa-cta p:not(.fsa-eyebrow) { margin-top: clamp(1rem, 1.6vw, 1.375rem); max-width: 40ch; font-size: var(--fsa-fs-lead); line-height: 1.5; color: var(--fsa-fg); }
.fsa-cta__side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(1.25rem, 1.8vw, 1.5rem) !important; }
:where(.fsa-cta__side) > * { margin: 0; }
.fsa-cta__side p { margin: 0 !important; font-size: var(--fsa-fs-body); }
/* Dès 1024 px, quand la bande a une ligne de texte : texte colonnes 4–9, boutons 10–12 calés
   au pied du texte ; un lien secondaire (.fsa-cta__alt, liste) passe SOUS le texte, jamais
   sur le treillis. */
@media (min-width: 1024px) {
	.fsa-cta__in:has(> div:not([class*="fsa-"]) > p:not(.fsa-eyebrow)) { grid-template-columns: minmax(0, 3fr) minmax(0, 5.5fr) minmax(0, 3.5fr); }
	.fsa-cta__in:has(> div:not([class*="fsa-"]) > p:not(.fsa-eyebrow)) > div:not([class*="fsa-"]) > p:not(.fsa-eyebrow) { grid-column: 2; }
	.fsa-cta__in:has(> div:not([class*="fsa-"]) > p:not(.fsa-eyebrow)) > .fsa-cta__side { display: contents; }
	.fsa-cta__in:has(> div:not([class*="fsa-"]) > p:not(.fsa-eyebrow)) > .fsa-cta__side > * { grid-column: 2; justify-self: start; margin-top: 1rem; }
	.fsa-cta__in:has(> div:not([class*="fsa-"]) > p:not(.fsa-eyebrow)) > .fsa-cta__side > .fsa-cta__buttons { grid-column: 3; grid-row: 2; align-self: end; margin-top: clamp(1rem, 1.6vw, 1.375rem); } /* un titre long au-dessus ne touche plus le bouton (passe G, audit design P2-12) */
}
.fsa-cta__alt {
	font: 500 var(--fsa-fs-m)/1.4 var(--fsa-font-sans);
	color: var(--fsa-paper);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--fsa-paper) 50%, transparent);
	text-underline-offset: .3em;
}
.fsa-cta__alt:hover { text-decoration-color: var(--fsa-paper); text-decoration-thickness: 2px; }
@media (max-width: 1080px) {
	.fsa-cta__alt { position: relative; }
	.fsa-cta__alt::before { content: ""; position: absolute; inset: min(0px, (100% - 44px) / 2); }
}
@media (max-width: 1023px) {
	.fsa-cta__in { grid-template-columns: minmax(0, 1fr); }
	.fsa-cta__in .fsa-eyebrow { padding-top: 0; margin-bottom: 1rem; }
	.fsa-cta__in > :not(.fsa-eyebrow),
	.fsa-cta__in > div:not([class*="fsa-"]) > :not(.fsa-eyebrow) { grid-column: 1; }
	.fsa-cta { background-image: linear-gradient(180deg, var(--fsa-brand) 45%, color-mix(in srgb, var(--fsa-brand) 0%, transparent) 95%), radial-gradient(circle, color-mix(in srgb, var(--fsa-paper) 42%, transparent) 1.4px, transparent 1.9px), radial-gradient(circle, color-mix(in srgb, var(--fsa-paper) 42%, transparent) 1.4px, transparent 1.9px); }
	.fsa-cta__wave { right: -18%; top: 25%; height: 110%; }
	.fsa-cta__field:not(:has(.fsa-lat--wave)) {
		-webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .1) 40%, rgb(0 0 0 / .22) 100%);
		mask-image: linear-gradient(180deg, rgb(0 0 0 / .1) 40%, rgb(0 0 0 / .22) 100%); /* .32 → .22 : blanc sur bleu ≥ 4,5 partout (audit a11y P2-4) */
	}
}
@media (max-width: 560px) {
	.fsa-cta__side, .fsa-cta__side .fsa-btn { width: 100%; }
}
/* Voisinages sombres que l'ordre libre peut produire (passe G, audit édition P2-2, P2-3) — par
   VOISINAGE, jamais par position :
   — une bande qui finit sur un panneau SOMBRE (un panneau teinté ou papier ne compte pas) ou un
     moment navy, suivie du CTA bleu : au téléphone la
     réserve de 72 px se lisait comme une fente (navy, filet blanc, bleu) ; elle devient un vrai
     palier de papier ;
   — un hero Catalogue suivi du CTA : un filet de papier sépare l'onglet bleu et l'aplat bleu
     (comme le hero bleu de l'accueil). */
@media (max-width: 1023px) {
	.fsa-sec:has(> .fsa-wrap > :is(.fsa-panel:not(.fsa-t-tint, .fsa-t-paper), .fsa-moment):last-child):has(+ .fsa-cta) { padding-bottom: calc(var(--fsa-section) * 1.6); }
}
.fsa-hero-inner--band:has(+ .fsa-cta) { border-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) solid var(--fsa-surface); }

/* Encadré (texte, étude, portrait court) : sous un filet fort, sans boîte ; --tint : aplat. */
.fsa-callout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem clamp(2rem, 5vw, 4rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--fsa-fg-strong);
	border-radius: 0;
	background: none;
	box-shadow: none;
}
:where(.fsa-callout) > * { margin: 0; }
.fsa-callout > * { min-width: 0; }
.fsa-callout--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.fsa-callout--tint { padding: clamp(1.5rem, 3.5vw, 2.5rem); border-top: 0; background: var(--fsa-band); }
.fsa-sec--alt .fsa-callout--tint { background: var(--fsa-paper); }
.fsa-callout :where(p) { color: var(--fsa-fg); }
.fsa-callout :where(p + p, h2 + p, h3 + p, .fsa-h2 + p, .fsa-h3 + p) { margin-top: .8rem; }
.fsa-callout .fsa-link { margin-top: 1.25rem; }
.fsa-callout__media img { display: block; width: 100%; border-radius: 0; filter: none; }
@media (max-width: 860px) {
	.fsa-callout--media { grid-template-columns: minmax(0, 1fr); }
}

/* Figure-schéma : posée à même la bande (plus de boîte pointillée), légende à filet en
   libellé (Plex Sans ; passe G, arbitrage 2). */
.fsa-fig { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.fsa-fig figcaption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .2rem 1rem;
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid var(--fsa-rule);
	font: 500 var(--fsa-fs-label)/1.35 var(--fsa-font-sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--fsa-fg-soft);
}


/* ═════════════════════════════════════════════════════════════════════
   13. FORMULAIRES (styles seulement ; le formulaire est à la page Contact)
   Champs à filet 1 px, rayon 0 ; focus : filet d'accent doublé à l'intérieur.
   Erreur : filet encre 2 px + message à icône (pas de rouge dans le système).
   ═════════════════════════════════════════════════════════════════════ */
.fsa-form { display: grid; gap: 1.25rem; max-width: 46rem; }
:where(.fsa-form) > * { margin: 0; }
.fsa-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fsa-form legend { padding: 0; margin-bottom: .75rem; font: 500 var(--fsa-fs-h4)/1.3 var(--fsa-font-title); color: var(--fsa-fg-strong); }
.fsa-form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
:where(.fsa-form__pair) > * { margin: 0; }
.fsa-form__row { display: grid; gap: .45rem; }
:where(.fsa-form__row) > * { margin: 0; }
.fsa-form label { font: 500 var(--fsa-fs-m)/1.35 var(--fsa-font-sans); color: var(--fsa-fg-strong); }
.fsa-form__req { color: var(--fsa-link); }
.fsa-form__opt { font: 400 var(--fsa-fs-s)/1 var(--fsa-font-sans); color: var(--fsa-fg-soft); }
.fsa-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
	width: 100%;
	min-height: 50px;
	padding: .75rem .95rem;
	border: 1px solid color-mix(in srgb, var(--fsa-muted) 80%, var(--fsa-paper)); /* 3,76:1 sur blanc, 3,2:1 sur teinte (audit a11y P1-5) */
	border-radius: 0;
	background-color: var(--fsa-paper);
	color: var(--fsa-text);
	font: 400 var(--fsa-fs-base)/1.5 var(--fsa-font-sans);
	transition: border-color var(--fsa-dur) ease, box-shadow var(--fsa-dur) ease;
}
.fsa-form textarea { resize: vertical; }
.fsa-form select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--fsa-muted) 50%), linear-gradient(135deg, var(--fsa-muted) 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.fsa-form :is(input, select, textarea):hover { border-color: var(--fsa-ink); }
.fsa-form :is(input, select, textarea):focus-visible { outline: none; border-color: var(--fsa-brand); box-shadow: inset 0 0 0 1px var(--fsa-brand); }
.fsa-form :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--fsa-brand-ink); outline-offset: 2px; box-shadow: none; }
.fsa-form ::placeholder { color: var(--fsa-muted); opacity: 1; }
.fsa-form__hint { font-size: var(--fsa-fs-m); line-height: 1.45; color: var(--fsa-fg-soft); }
.fsa-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--fsa-ink); border-width: 2px; padding: calc(.75rem - 1px) calc(.95rem - 1px); }
.fsa-form select[aria-invalid="true"] { padding-right: calc(2.5rem - 1px); }
.fsa-form__error { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--fsa-fs-m); font-weight: 500; line-height: 1.45; color: var(--fsa-ink); }
.fsa-form__error::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: .08rem;
	background: var(--fsa-ink);
	color: var(--fsa-paper);
	font: 700 var(--fsa-fs-2xs)/1 var(--fsa-font-sans);
}
.fsa-form__error[hidden] { display: none; }
.fsa-form__notice { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.15rem; border-radius: 0; font-size: var(--fsa-fs-base); line-height: 1.5; }
.fsa-form__notice::before { content: ""; flex: 0 0 auto; width: 10px; height: 11px; margin-top: .45em; -webkit-mask: var(--fsa-glyph-hex) center / contain no-repeat; mask: var(--fsa-glyph-hex) center / contain no-repeat; }
.fsa-form__notice--ok { background: var(--fsa-band); color: var(--fsa-brand-ink); box-shadow: inset 3px 0 0 var(--fsa-brand); }
.fsa-form__notice--ok::before { background: var(--fsa-brand); }
.fsa-form__notice--ko { background: var(--fsa-surface-alt); color: var(--fsa-ink); box-shadow: inset 3px 0 0 var(--fsa-ink); }
.fsa-form__notice--ko::before { background: var(--fsa-ink); }
.fsa-form__consent,
.fsa-form__check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; font-size: var(--fsa-fs-m); line-height: 1.5; color: var(--fsa-fg); }
.fsa-form__consent label,
.fsa-form__check label { font: inherit; color: inherit; }
.fsa-form input[type="checkbox"],
.fsa-form input[type="radio"] { width: 24px; height: 24px; margin: 0; accent-color: var(--fsa-brand); } /* WCAG 2.5.8 : 24 px ; le libellé étend la cible */
/* Case à cocher d'un consentement : cible de 44 px (audit : la case native de 24 px était
   « majeure »), case visible de 24 px dessinée en C — carré à filet, aplat d'accent et coche
   blanche une fois cochée. Les marges négatives rendent à la grille sa place de 24 px : la
   mise en page ne bouge pas. Lot P4 (Contact, New customer), remontée au socle (passe F). */
.fsa-form :is(.fsa-form__consent, .fsa-form__check) > input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	margin: -10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.fsa-form :is(.fsa-form__consent, .fsa-form__check) > input[type="checkbox"]::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid color-mix(in srgb, var(--fsa-muted) 80%, var(--fsa-paper));
	background: var(--fsa-paper);
	transition: background-color var(--fsa-dur) ease, border-color var(--fsa-dur) ease;
}
.fsa-form :is(.fsa-form__consent, .fsa-form__check) > input[type="checkbox"]:hover::before { border-color: var(--fsa-ink); }
.fsa-form :is(.fsa-form__consent, .fsa-form__check) > input[type="checkbox"]:checked::before { border-color: var(--fsa-brand); background: var(--fsa-brand); }
.fsa-form :is(.fsa-form__consent, .fsa-form__check) > input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 18.5px;
	top: 14px;
	width: 7px;
	height: 12px;
	border: solid var(--fsa-paper);
	border-width: 0 2px 2px 0;
	rotate: 45deg;
}
.fsa-form :is(.fsa-form__consent, .fsa-form__check) > input[type="checkbox"][aria-invalid="true"]::before { border: 2px solid var(--fsa-ink); }
.fsa-form :is(.fsa-form__consent, .fsa-form__check) > input[type="checkbox"]:focus-visible { outline: none; }
.fsa-form :is(.fsa-form__consent, .fsa-form__check) > input[type="checkbox"]:focus-visible::before { outline: 2px solid var(--fsa-brand-ink); outline-offset: 2px; }
.fsa-form__choices { display: flex; flex-wrap: wrap; gap: 6px; }
.fsa-form__choice { position: relative; }
.fsa-form__choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fsa-form__choice label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .55rem 1rem;
	border: 1px solid var(--fsa-rule-strong);
	border-radius: 0;
	background: var(--fsa-paper);
	font: 400 var(--fsa-fs-m)/1.3 var(--fsa-font-sans);
	color: var(--fsa-text);
	cursor: pointer;
}
.fsa-form__choice input:checked + label { background: var(--fsa-brand); border-color: var(--fsa-brand); color: var(--fsa-paper); }
.fsa-form__choice input:focus-visible + label { outline: 2px solid var(--fsa-brand-ink); outline-offset: 3px; }
.fsa-form__submit { margin-top: .25rem; }
.fsa-form__legal { font-size: var(--fsa-fs-m); line-height: 1.5; color: var(--fsa-fg-soft); }
.fsa-form__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
	.fsa-form__pair { grid-template-columns: minmax(0, 1fr); }
	.fsa-form__submit .fsa-btn { width: 100%; }
}


/* ═════════════════════════════════════════════════════════════════════
   14. TEXTE LONG — articles, pages légales, conditions de vente, section « Text »
   ═════════════════════════════════════════════════════════════════════ */
.fsa-prose { max-width: var(--fsa-narrow); color: var(--fsa-fg); font-size: var(--fsa-fs-body); line-height: 1.7; }
.fsa-prose > * + * { margin-block-start: 1.1em; }
.fsa-prose > :first-child { margin-block-start: 0; }
.fsa-prose > :is(h2, h3, h4) + * { margin-block-start: .6em; }
.fsa-prose > h2 { margin-block-start: 2.2em; font-size: var(--fsa-fs-prose-h2); line-height: 1.15; letter-spacing: -.02em; }
.fsa-prose > h3 { margin-block-start: 1.8em; font-size: var(--fsa-fs-h4); line-height: 1.3; }
.fsa-prose > h4 { margin-block-start: 1.5em; font-size: var(--fsa-fs-body); line-height: 1.35; }
.fsa-prose :is(ul, ol) { padding-left: 1.3em; }
.fsa-prose li + li { margin-top: .4em; }
.fsa-prose li::marker { color: var(--fsa-accent); }
.fsa-prose a { color: var(--fsa-link); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.fsa-prose a:hover { text-decoration-thickness: 2px; }
.fsa-prose strong { color: var(--fsa-fg-strong); font-weight: 600; }
.fsa-prose blockquote { padding: .25rem 0 .25rem 1.25rem; border-left: 2px solid var(--fsa-accent); color: var(--fsa-fg-strong); font-size: var(--fsa-fs-lead); }
.fsa-prose hr { border: 0; border-top: 1px solid var(--fsa-rule); margin-block: 2.5em; }
.fsa-prose figure img { border-radius: 0; }
.fsa-prose figcaption { margin-top: .6rem; font-size: var(--fsa-fs-sm); color: var(--fsa-fg-soft); }
.fsa-prose table { width: 100%; border-collapse: collapse; font-size: var(--fsa-fs-m); }
.fsa-prose :is(th, td) { padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--fsa-rule); text-align: left; vertical-align: top; }
.fsa-prose th { font-weight: 600; color: var(--fsa-fg-strong); }


/* ═════════════════════════════════════════════════════════════════════
   15. PIED — UNE masse navy : colonnes, famille du groupe en lignes de texte à
   mini-vagues (« You are here »), ligne légale. [fsa_footer] (inc/navigation.php).
   ═════════════════════════════════════════════════════════════════════ */
.fsa-ftr { font-size: var(--fsa-fs-m); }
.fsa-ftr a { text-decoration: none; }
.fsa-ftr a:not(.fsa-btn):hover { text-decoration: underline; text-underline-offset: .25em; }
.fsa-ftr ul { margin: 0; padding: 0; list-style: none; }
.fsa-ftr__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
	column-gap: var(--fsa-col-gap);
	row-gap: 40px;
	padding-block: clamp(3.5rem, 5vw, 4.5rem) clamp(2.75rem, 4vw, 3.5rem);
}
.fsa-ftr__logo-link { display: inline-block; }
.fsa-ftr__logo { width: 150px; }
.fsa-ftr__brand :where(p) { margin-top: 18px; max-width: 34ch; color: var(--fsa-on-dark); }
.fsa-ftr__brand address { margin-top: 18px; line-height: 1.55; color: var(--fsa-on-dark-muted); }
.fsa-ftr__brand address .fsa-label { display: block; margin-bottom: 4px; color: var(--fsa-on-dark); }
.fsa-ftr__title { margin-bottom: 12px; color: var(--fsa-on-dark-muted); } /* libellé (.fsa-label, passe G : 14 px, la marge rend les 4 px de plus) */
.fsa-ftr__col li + li { margin-top: 6px; }
.fsa-ftr__col a:not(.fsa-btn) { display: inline-block; padding-block: 3px; color: var(--fsa-on-dark); }
.fsa-ftr__col a[aria-current="page"] { color: var(--fsa-brand-light); }
.fsa-ftr__col--contact { display: grid; align-content: start; justify-items: start; gap: 1rem; }
.fsa-ftr__col--contact .fsa-ftr__title { margin-bottom: 0; }
.fsa-ftr__social { display: inline-flex !important; align-items: center; gap: .6rem; min-height: 44px; }
.fsa-ftr__social svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--fsa-brand-light); }

/* Famille du groupe */
.fsa-fam {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: var(--fsa-col-gap);
	row-gap: 24px;
	align-items: start;
	padding-block: 36px;
	border-top: 1px solid var(--fsa-line-dark);
	color: var(--fsa-on-dark-muted);
}
.fsa-fam__txt { color: var(--fsa-on-dark); }
.fsa-fam__txt > p { margin-top: 14px; }
.fsa-fam__label { display: block; margin-bottom: 2px; font: 500 var(--fsa-fs-label)/1.2 var(--fsa-font-sans); color: var(--fsa-on-dark-muted); } /* libellé (passe G) */
.fsa-fam__links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px !important; font-size: var(--fsa-fs-sm); }
.fsa-fam__links a { color: var(--fsa-brand-light); }
.fsa-glock { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--fsa-on-dark); }
.fsa-glock__mark { height: 28px; width: auto; aspect-ratio: 265 / 432; }
.fsa-glock__name { display: grid; line-height: 1; text-transform: uppercase; }
.fsa-glock__name b { font: 600 var(--fsa-fs-glock)/1 var(--fsa-font-title); letter-spacing: -.01em; color: var(--fsa-on-dark-strong); }
.fsa-glock__name span { margin-top: .2rem; font: 600 var(--fsa-fs-glock-unit)/1 var(--fsa-font-title); letter-spacing: .32em; color: var(--fsa-on-dark-muted); }
.fsa-fam__cos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-left: 1px solid var(--fsa-line-dark); }
.fsa-fam__cos > li { display: flex; flex-direction: column; gap: 8px; padding: 2px 16px; border-right: 1px solid var(--fsa-line-dark); }
.fsa-fam__co { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font: 500 1rem/1.2 var(--fsa-font-title); color: var(--fsa-on-dark-strong); }
a.fsa-fam__co:hover { color: var(--fsa-brand-light); }
.fsa-fam__wave { height: 18px; flex: none; }
.fsa-fam__here { font: 500 .8125rem/1.2 var(--fsa-font-sans); color: var(--fsa-brand-light); } /* libellé (passe G) */
.fsa-fam__back { grid-column: 2; justify-self: start; color: var(--fsa-brand-light); }
/* Sans firalis-core à jour : le bandeau de logos d'avant, en lignes. */
.fsa-fam .fi-endorse-band { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0; padding: 0; list-style: none; }
.fsa-fam .fi-endorse-band__logo { height: 26px; width: auto; filter: brightness(0) invert(1); }

/* Ligne légale */
.fsa-ftr__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 28px;
	padding-block: 20px 26px;
	border-top: 1px solid var(--fsa-line-dark);
	font-size: .84375rem;
	color: var(--fsa-on-dark-muted);
}
:where(.fsa-ftr__legal) > * { margin: 0; }
.fsa-ftr__legal ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.fsa-ftr__legal a { color: var(--fsa-on-dark-muted); }
@media (max-width: 1080px) {
	/* 44 px au doigt pour les liens du pied (30 px sinon). */
	.fsa-ftr__col li + li { margin-top: 0; }
	.fsa-ftr__col a:not(.fsa-btn),
	.fsa-fam__links a,
	.fsa-ftr__legal a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}
@media (max-width: 1023px) {
	.fsa-ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fsa-ftr__brand { grid-column: 1 / -1; }
	.fsa-fam { grid-template-columns: minmax(0, 1fr); }
	.fsa-fam__back { grid-column: 1; }
}
@media (max-width: 760px) {
	/* Une colonne, réserves internes réduites de moitié (passe G, audit design P2-10 : le pied
	   pesait ≈ 1 300 px à 390, 16 % de l'accueil). */
	.fsa-ftr__grid { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding-block: 2.25rem 1.5rem; }
	.fsa-ftr__brand :where(p),
	.fsa-ftr__brand address { margin-top: 12px; }
	.fsa-ftr__title { margin-bottom: 6px; }
	.fsa-ftr__col--contact { gap: .5rem; }
	.fsa-ftr__col--products ul { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 1.25rem; }
	.fsa-ftr__col--products li + li { margin-top: 0; }
	.fsa-fam { padding-block: 18px; row-gap: 12px; }
	.fsa-fam__txt > p { margin-top: 8px; }
	/* Liens du groupe sur une ligne, sociétés sur une rangée : la rangée défile, un fondu à
	   droite le dit ; un espace de fin sort le dernier élément du fondu. */
	.fsa-fam__links,
	.fsa-fam__cos {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	}
	.fsa-fam__links::-webkit-scrollbar,
	.fsa-fam__cos::-webkit-scrollbar { display: none; }
	.fsa-fam__links::after,
	.fsa-fam__cos::after { content: ""; flex: 0 0 28px; }
	.fsa-fam__links { gap: 0 20px; margin-top: 4px !important; }
	.fsa-fam__links > li { flex: none; }
	.fsa-fam__cos { gap: 0 22px; border-left: 0; }
	.fsa-fam__cos > li { flex: none; gap: 0; border-right: 0; padding: 0; }
	.fsa-ftr__legal { padding-block: 12px 16px; }
}


/* ═════════════════════════════════════════════════════════════════════
   16. UTILITAIRES SVG, VAGUES, MARQUEUR « À VALIDER »
   ═════════════════════════════════════════════════════════════════════ */
:where(.fsa-wave) { display: block; aspect-ratio: 265 / 432; height: 1em; width: auto; }
.fsa-wave--group { --fsa-wave-a: var(--fsa-group-a); --fsa-wave-b: var(--fsa-group-b); }
.fsa-wave--on-dark { --fsa-wave-a: var(--fsa-on-dark-strong); --fsa-wave-b: var(--fsa-on-dark-muted); }
.fsa-wave--ghost { --fsa-wave-a: color-mix(in srgb, var(--fsa-paper) 14%, transparent); --fsa-wave-b: color-mix(in srgb, var(--fsa-paper) 8%, transparent); }

/* Schémas en SVG en ligne : couleurs par classe, jamais en attribut (fsa-f-* remplissage,
   fsa-s-* trait). Sur le bloc bleu du hero Catalogue (.fsa-sig) et partout où un contexte
   pose --fsa-svg-*, le schéma passe en blanc. */
.fsa-f-brand { fill: var(--fsa-svg-brand, var(--fsa-brand)); }
.fsa-f-ink { fill: var(--fsa-svg-ink, var(--fsa-brand-ink)); }
.fsa-f-light { fill: var(--fsa-svg-light, var(--fsa-brand-light)); }
.fsa-f-tint { fill: var(--fsa-svg-tint, var(--fsa-tint)); }
.fsa-f-mist { fill: var(--fsa-svg-mist, var(--fsa-mist)); }
.fsa-f-paper { fill: var(--fsa-svg-paper, var(--fsa-paper)); }
.fsa-f-muted { fill: var(--fsa-svg-muted, var(--fsa-muted)); }
.fsa-f-noise { fill: var(--fsa-svg-noise, var(--fsa-noise)); }
.fsa-f-line { fill: var(--fsa-svg-line, var(--fsa-line-strong)); }
.fsa-f-none { fill: none; }
.fsa-s-brand { stroke: var(--fsa-svg-brand, var(--fsa-brand)); }
.fsa-s-ink { stroke: var(--fsa-svg-ink, var(--fsa-brand-ink)); }
.fsa-s-light { stroke: var(--fsa-svg-light, var(--fsa-brand-light)); }
.fsa-s-line { stroke: var(--fsa-svg-line, var(--fsa-line-strong)); }
.fsa-s-noise { stroke: var(--fsa-svg-noise, var(--fsa-noise)); }
.fsa-s-paper { stroke: var(--fsa-svg-paper, var(--fsa-paper)); }
.fsa-stop-brand { stop-color: var(--fsa-svg-brand, var(--fsa-brand)); }
.fsa-stop-light { stop-color: var(--fsa-svg-light, var(--fsa-brand-light)); }
.fsa-stop-noise { stop-color: var(--fsa-svg-noise, var(--fsa-noise)); }
/* Étiquettes de schéma : libellés (Plex Sans ; passe G, arbitrages 2 et 3 — le mono reste aux
   données). Plus étroit que le mono : une étiquette ne sort jamais davantage de sa vue. */
:is(.fsa-card__fig, .fsa-fig, .fsa-schema, .fsa-sig__fig) text {
	font-family: var(--fsa-font-sans);
	font-size: var(--fsa-fs-svg);
	letter-spacing: .2px;
	fill: var(--fsa-svg-muted, var(--fsa-muted));
}
:is(.fsa-card__fig, .fsa-fig, .fsa-schema, .fsa-sig__fig) text.k { fill: var(--fsa-svg-ink, var(--fsa-brand-ink)); font-weight: 500; }

.fsa-nowrap { white-space: nowrap; }

/* Marqueur « à valider » (fsa_pending()) — jamais en production */
.fsa-pending {
	display: inline-flex;
	align-items: center;
	margin-left: .5rem;
	padding: 3px 6px 2px;
	border: 1px dashed currentColor;
	border-radius: 0;
	font: 500 .6875rem/1.2 var(--fsa-font-mono);
	letter-spacing: .02em;
	text-transform: none;
	-webkit-text-fill-color: currentColor;
	color: var(--fsa-fg-soft);
	vertical-align: .35em;
	white-space: nowrap;
}


/* ═════════════════════════════════════════════════════════════════════
   17. MOUVEMENT — révélations au défilement, mouvement réduit
   .fsa-rv (+ .fsa-d1/.fsa-d2/.fsa-d3) ; site.js ajoute .is-in puis retire .fsa-rv.
   Rien n'est masqué sans JavaScript ni dans l'éditeur (seul html.fsa-js masque) ;
   filet de 3 s si site.js ne démarre pas. Le hero ne se révèle jamais.
   ═════════════════════════════════════════════════════════════════════ */
.fsa-js .fsa-rv {
	opacity: 0;
	translate: 0 18px;
	transition: opacity .7s var(--fsa-ease-out), translate .7s var(--fsa-ease-out);
}
.fsa-js .fsa-rv.is-in { opacity: 1; translate: none; }
.fsa-js .fsa-rv.fsa-d1 { transition-delay: .08s; }
.fsa-js .fsa-rv.fsa-d2 { transition-delay: .16s; }
.fsa-js .fsa-rv.fsa-d3 { transition-delay: .24s; }
.fsa-js:not(.fsa-ready) .fsa-rv { animation: fsa-failsafe 0s linear 3s forwards; }
@keyframes fsa-failsafe { to { opacity: 1; translate: none; transform: none; } }
.fsa-js :is(.fsa-hero-inner, .fsa-home__hero) .fsa-rv,
.fsa-js .fsa-rv:is(.fsa-hero-inner, .fsa-home__hero) { opacity: 1; translate: none; transition: none; animation: none; }
.fsa-js :is(.fsa-hero-inner, .fsa-home__hero) .fsa-rv.fsa-rv--wipe { opacity: 1; animation: none; }
/* Panneau qui déborde : il entre en fondu SUR PLACE, son contenu glisse de 24 px. */
.fsa-js .fsa-rv:is(.fsa-panel--bleed-end, .fsa-panel--bleed-start) { translate: none; }
.fsa-js .fsa-rv:is(.fsa-panel--bleed-end, .fsa-panel--bleed-start) > * { transition: translate .7s var(--fsa-ease-out); }
.fsa-js .fsa-panel--bleed-end.fsa-rv:not(.is-in) > * { translate: 24px 0; }
.fsa-js .fsa-panel--bleed-start.fsa-rv:not(.is-in) > * { translate: -24px 0; }
.fsa-js:not(.fsa-ready) .fsa-rv:is(.fsa-panel--bleed-end, .fsa-panel--bleed-start) > * { animation: fsa-failsafe 0s linear 3s forwards; }
/* Révélation en rideau (portes, vignettes, blocs d'aplat) : l'élément se découvre de
   haut en bas au lieu de glisser. <div class="fsa-rv fsa-rv--wipe">
   Avant l'entrée, l'élément est masqué par son OPACITÉ, jamais par son clip-path :
   Chrome applique le clip-path de la cible elle-même au calcul de l'IntersectionObserver,
   et une cible rognée à 100 % n'entrait jamais (portes de l'accueil, passe F du 13/11).
   Le rideau est une animation lancée par .is-in ; site.js retire .fsa-rv à sa fin. */
.fsa-js .fsa-rv.fsa-rv--wipe { opacity: 0; translate: none; transition: none; }
.fsa-js .fsa-rv.fsa-rv--wipe.is-in { opacity: 1; animation: fsa-wipe .9s var(--fsa-ease-out) both; }
.fsa-js .fsa-rv.fsa-rv--wipe.fsa-d1 { animation-delay: .08s; }
.fsa-js .fsa-rv.fsa-rv--wipe.fsa-d2 { animation-delay: .16s; }
.fsa-js .fsa-rv.fsa-rv--wipe.fsa-d3 { animation-delay: .24s; }
@keyframes fsa-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
		animation-duration: .01ms !important;
	}
	.fsa-js .fsa-rv,
	.fsa-js .fsa-rv:is(.fsa-panel--bleed-end, .fsa-panel--bleed-start) > * { opacity: 1; translate: none; clip-path: none; }
	.fsa-js .fsa-rv.fsa-rv--wipe,
	.fsa-js .fsa-rv.fsa-rv--wipe.is-in { opacity: 1; animation: none; clip-path: none; }
	.fsa-js .fsa-gauge .fsa-gauge__bar::before { transform: none; }
	.fsa-proc__panel { --fsa-p: 1 !important; }
}