/* Qalia, feuille de style du tunnel de vente.
   Genere par scripts/publication/systeme-io-construire-charge-utile.py
   Source : 05-Communication/02-Funnel/01-Tunnel-Qalia-G1-live/page-unique-travail.html
   Ne pas editer ici : editer la source puis relancer le generateur. */
/* ============================================
       Qalia Landing Page | Charte graphique
       Ratio : 60% Bleu Canard / 30% Neutres / 10% Bordeaux
       ============================================ */

    :root {
      /* Couleurs locales V8 → tokens DS v2 (Sprint 11, antipattern DV-5 corrigé)
         - Identité marque (--bleu-canard #1B7E94, --bordeaux #932951) : hex strict, jamais override
         - Surfaces et neutres : tokens DS v2 (athanor, rubedo, nigredo, albedo)
         - Tokens sémantiques (--text-on-brand, --brand-text/-strong/-accent) ajoutés Sprint 11 N+2
         - Overrides par thème dans body[data-theme="X"] et body[data-mode] plus bas */

      /* Tokens DS manquants (S7 2026-07-11, source tokens.css DS v2).
         La page consommait ces variables sans les définir : déclarations invalides
         à la résolution (thème sombre partiellement cassé, pastilles .level sans
         couleur). Valeurs exactes du :root canonique de tokens.css (oklch). */
      --athanor-500: oklch(53% 0.100 220);
      --athanor-700: oklch(38% 0.075 220);
      --athanor-800: oklch(30% 0.055 220);
      --rubedo-50: oklch(96% 0.020 4);
      --rubedo-100: oklch(91% 0.040 4);
      --rubedo-200: oklch(83% 0.070 4);
      --rubedo-300: oklch(73% 0.100 4);
      --rubedo-500: oklch(42% 0.130 4);
      --rubedo-700: oklch(30% 0.100 4);
      --rubedo-800: oklch(24% 0.080 4);
      --citrinitas-500: oklch(74% 0.130 90);
      --citrinitas-700: oklch(54% 0.125 80);
      --citrinitas-800: oklch(42% 0.110 80);
      --nigredo-100: oklch(96% 0 0);
      --nigredo-200: oklch(90% 0 0);
      --nigredo-300: oklch(82% 0 0);
      --nigredo-400: oklch(70% 0 0);
      --nigredo-500: oklch(55% 0 0);
      --nigredo-600: oklch(42% 0 0);
      --nigredo-700: oklch(30% 0 0);
      --nigredo-800: oklch(20% 0 0);
      --nigredo-900: oklch(15% 0 0);
      --albedo-100: oklch(99% 0.005 220);
      --albedo-300: oklch(96% 0.015 220);
      --feedback-success-500: oklch(58% 0.150 145);
      --feedback-success-700: oklch(40% 0.120 145);
      --feedback-error-500: oklch(56% 0.180 25);
      --feedback-error-700: oklch(40% 0.150 25);

      --bleu-canard: #1B7E94;
      --bleu-dark: #156A7D;
      --bleu-light: #2A9DB6;
      --bleu-tint: #d4e8ed;
      --bordeaux: #932951;
      --bordeaux-dark: #7A2244;
      --bordeaux-light: #B33562;
      /* 2026-07-28, sprint 7 : etait #b8346a, soit --bordeaux-light a 5 % de
         luminance pres. Un jeton de plus pour un ecart invisible : on pointe
         sur le palier de la charte. */
      --bordeaux-glow: var(--bordeaux-light);
      --blanc: #ffffff;
      --text-on-brand: #ffffff; /* Texte blanc FIXE sur boutons colores, ne change jamais en dark */
      /* Tokens sémantiques marque (fidèles en tous thèmes - décision identité absolue Romuald 2026-05-12)
         2026-07-27, audit contrastes : --brand-text passe de --bleu-canard à --bleu-dark.
         L'identité n'est pas touchée (les deux sont des Athanor de la charte, et les
         SURFACES gardent --bleu-canard) : c'est l'encre de TEXTE qui s'assombrit, parce
         que #1B7E94 sur les fonds clairs teintés du site tombait à 4,17:1, sous AA.
         Avec --bleu-dark : environ 5,6:1. */
      --brand-text: var(--bleu-dark);
      --brand-text-strong: var(--bleu-dark);
      /* --bordeaux-dark et non --bordeaux : sur les fonds clairs teintés des cartes,
         #932951 tombait à 4,24:1 (2026-07-27). Même famille Rubedo, palier plus sombre. */
      --brand-accent-text: var(--bordeaux-dark);
      /* V9.3 C3 (2026-07-12) : couleur unique des verbatims/citations = Rubedo (voix du sujet transformé, jamais l'Athanor de Qalia) */
      --verbatim-ink: var(--bordeaux);

      /* ── Encres de phase alchimique (2026-07-28) ────────────────────────────
         Doctrine : 01-Doctrine-fondationnelle/01-Symbolique-alchimique-palette.md.
         Mesuré avant : la page n'employait que 2 familles sur 5 (Athanor + neutres),
         Rubedo et Citrinitas à 0 % des surfaces, et le marqueur « Le problème »
         était en Rubedo, c'est-à-dire dans la couleur de l'accomplissement.
         Conformément à l'amendement 4.1 bis de la doctrine, la phase se signale
         par l'ACCENT et non par la surface : on ne repeint pas les sections,
         on leur donne l'encre de leur phase. Chaque encre est choisie pour
         rester lisible sur la surface de sa section dans les 4 thèmes. */
      --phase-athanor: var(--brand-text);        /* Qalia opère : hero, FAQ, histoire */
      --phase-nigredo: var(--nigredo-700);       /* le chaos avant : problème */
      --phase-albedo: var(--gris-600);           /* la mise en ordre : pour qui */
      --phase-citrinitas: var(--citrinitas-800); /* l'éveil : comment ça marche, productions */
      --phase-rubedo: var(--brand-accent-text);  /* l'accomplissement : preuves, tarifs, action */
      --noir: var(--nigredo-900);
      /* 2026-07-27, audit contrastes : --nigredo-500 (55 %) donnait 4,42:1 sur les
         fonds clairs teintés du site (cartes témoignages, panneaux), sous le seuil AA.
         Palier intermédiaire à 50 % : environ 5,4:1 sur ces fonds, 6,0:1 sur blanc.
         L'échelle nigredo n'expose rien entre 55 % et 42 %, d'où la valeur explicite. */
      --gris: oklch(50% 0 0);
      --gris-600: var(--nigredo-600);
      --gris-400: var(--nigredo-400);
      --gris-200: var(--nigredo-200);
      --gris-clair: var(--albedo-300);
      /* Dégradé de marque, SOURCE UNIQUE (2026-07-27, audit contrastes).
         Le même dégradé était recopié à l'identique dans 15 règles : toute
         correction devait être faite 15 fois, donc ne l'était jamais partout.
         La plage s'arrête à --bleu-canard : au-delà (--bleu-light #2A9DB6) le
         texte blanc tombe à 3,18:1, sous le seuil AA. Ici : 6,20:1 à 4,71:1. */
      --gradient-brand: linear-gradient(135deg, var(--bleu-dark), var(--bleu-canard));
      /* Degrade du TITRE, distinct de celui des surfaces (2026-07-30, retour
         fondateur : le degrade du titre hero ne se voit pas). Le degrade de marque
         ci-dessus est volontairement etroit, huit points de clarte, parce que du
         texte BLANC est pose dessus et doit rester au-dessus du seuil AA. Sur un
         titre, ce degrade EST l encre : la contrainte s inverse, c est lui qui doit
         se detacher du sol. D ou une plage trois fois plus large, de l Athanor le
         plus sombre de l echelle au bleu canard de la marque. Les deux arrets
         restent dans la famille Athanor (IDP-14 : deux arrets, jamais sature). */
      --gradient-titre: linear-gradient(135deg, var(--athanor-800), var(--bleu-canard));
      --blanc-casse: var(--albedo-100);
      --succes: var(--feedback-success-700);
      /* Encre de validation : --succes est une couleur de SURFACE (vert sombre).
         Pour du TEXTE, il faut un jeton qui suit le thème. */
      --succes-ink: var(--feedback-success-700);
      --warning: var(--citrinitas-700);
      --erreur: var(--feedback-error-500);
      --succes-light: var(--feedback-success-500);
      --warning-dark: var(--citrinitas-800);
      /* 2026-07-28, sprint 6 : orange retire (IDP-11 le nomme explicitement).
         L'echelle de gravite passe par la famille feedback de la charte. */
      --orange-alerte: var(--erreur);
      --warning-light: var(--citrinitas-500);
      --erreur-dark: var(--feedback-error-700);
      --erreur-light: var(--feedback-error-500);
      --gris-ui: var(--albedo-100);
      --athanor-clair: #2A9DB6; /* ex --teal-vif #4ECDC4, hors charte (IDP-11), substitue le 2026-07-27 */
      --font-main: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
      --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;

      /* ── Golden Ratio Design System (phi = 1.618) ── */

      /* Typography Scale, Mobile-first (Minor Third 1.2)
         Tablet (768px) → Perfect Fourth (1.333)
         Desktop (1024px) → Golden Ratio (1.618)
         Chaque breakpoint rehausse le ratio pour plus de contraste */
      /* 2026-07-28 : 0.694rem donnait 11,1 px et plaçait 371 éléments sous le
         plancher de lisibilité. Le DS fixe son palier caption à 0.764rem (12,2 px).
         0.75rem = 12 px : 371 éléments sous plancher ramenés à 32, aucun débordement
         supplémentaire mesuré, hauteur de page +0,5 %. */
      --fs-caption: 0.75rem;    /* 12px, mentions legales, fine print */
      --fs-small: 0.833rem;     /* ~13px, labels, meta */
      --fs-body: 1rem;           /* 16px, corps de texte (base) */
      --fs-lead: 1.125rem;       /* 18px, paragraphes d'accroche */
      --fs-h4: 1.2rem;           /* ~19px, sous-titres, titres cartes */
      --fs-h3: 1.32rem;          /* ~21px, sous-sections (différencié de h4) */
      --fs-h2: 1.44rem;          /* ~23px, titres de section */
      --fs-h1: 1.728rem;         /* ~28px, hero, titre principal */

      /* Line-heights, Golden Ratio */
      --lh-body: 1.618;          /* phi exact pour le corps */
      --lh-heading: 1.2;         /* serre pour les titres */
      --lh-tight: 1.15;          /* tres serre pour hero/display */
      --lh-copy: 1.5;            /* copy courte : hero, bullets, arguments */

      /* Spacing Scale, Fibonacci (px)
         3, 5, 8, 13, 21, 34, 55, 89 */
      --space-3xs: 0.188rem;  /* 3px = Fib(4) */
      --space-2xs: 0.313rem;  /* 5px = Fib(5) */
      --space-xs: 0.5rem;     /* 8px = Fib(6) */
      --space-sm: 0.813rem;   /* 13px = Fib(7) */
      --space-md: 1.313rem;   /* 21px = Fib(8) */
      --space-lg: 2.125rem;   /* 34px = Fib(9) */
      --space-xl: 3.438rem;   /* 55px = Fib(10) */
      --space-2xl: 5.563rem;  /* 89px = Fib(11) */
      --space-3xl: 7rem;      /* 112px = Zen breathing room */

      /* Zen Architect tokens */
      --enso: cubic-bezier(0.4, 0, 0.2, 1);
      --shadow-tint: 14, 30, 35;
      --shadow-zen: 0 4px 20px rgba(14, 30, 35, 0.05);
      --surface: #f2fbff;

      /* ── Tooltip (design system) : fond --bleu-dark, texte blanc ── */
      /* Charte graphique 2.5 : --bleu-dark #156A7D = fonds sombres officiels */
      /* Neuro S07 : contraste maximal tooltip vs contenu principal */
      /* WCAG AA : ratio 4.7:1 (#156A7D / #fff) conforme seuil 4.5:1 */
      --tooltip-bg: #156A7D;
      --tooltip-color: #ffffff;
      --tooltip-border: 1px solid rgba(27, 126, 148, 0.4);
      --tooltip-shadow: 0 4px 16px rgba(21, 106, 125, 0.3);
      --tooltip-arrow-color: var(--brand-text-strong);

      /* Layout, Golden Ratio */
      --max-width: 1200px;
      --content-width: 742px;   /* 1200 x 0.618 */
      --section-padding: var(--space-2xl) var(--space-md);

      /* Radius tokens (mini-refacto controle, ajout sans usage)
         Disponibles pour usages futurs ciblés et valides en CSS pur uniquement */
      --radius-card: 1rem;
      --radius-pill: 999px;

      /* Shadow tokens (Sprint A) */
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 20px rgba(27, 126, 148, 0.08);
      --shadow-lg: 0 8px 32px rgba(27, 126, 148, 0.12);
      --shadow-brand: 0 4px 14px rgba(27, 126, 148, 0.25);
      --shadow-brand-hover: 0 6px 20px rgba(27, 126, 148, 0.35);

      /* Shadow tokens bordeaux (Sprint 6, tokenisation des rgba(147,41,81) inline)
         Couvre les 18 occurrences hardcodées en CSS et HTML inline */
      --shadow-bordeaux-xs: 0 3px 8px rgba(var(--bordeaux-rgb), 0.20);
      --shadow-bordeaux-sm: 0 2px 8px rgba(var(--bordeaux-rgb), 0.25);
      --shadow-bordeaux-md: 0 4px 16px rgba(var(--bordeaux-rgb), 0.25);
      --shadow-bordeaux-md-mobile: 0 4px 12px rgba(var(--bordeaux-rgb), 0.20);
      --shadow-bordeaux-md-strong: 0 4px 16px rgba(var(--bordeaux-rgb), 0.30);
      --shadow-bordeaux-lg: 0 8px 24px rgba(var(--bordeaux-rgb), 0.25);
      --shadow-bordeaux-lg-hover: 0 8px 24px rgba(var(--bordeaux-rgb), 0.35);
      --shadow-bordeaux-tint: 0 4px 24px rgba(var(--bordeaux-rgb), 0.06);
      --shadow-bordeaux-spread: 0 16px 48px rgba(var(--bordeaux-rgb), 0.10);
      --shadow-bordeaux-glow: 0 0 14px rgba(var(--bordeaux-rgb), 0.25), 0 0 4px rgba(var(--bordeaux-rgb), 0.1);
      --shadow-bordeaux-glow-soft: 0 0 14px rgba(var(--bordeaux-rgb), 0.10), 0 0 4px rgba(var(--bordeaux-rgb), 0.05);
      --shadow-bordeaux-glow-subtle: 0 0 14px rgba(var(--bordeaux-rgb), 0.12), 0 0 4px rgba(var(--bordeaux-rgb), 0.06);

      /* RGB triplets (Sprint C). S7 2026-07-11 : purge des tokens sans usage
         (--border-1/-brand/-muted, --noir-rgb, --z-dropdown/-sticky/-modal/-tooltip).
         --bleu-canard-rgb et --bordeaux-rgb sont CONSOMMÉS (shadows bordeaux, focus lead-magnet). */
      --bleu-canard-rgb: 27, 126, 148;
      --bordeaux-rgb: 147, 41, 81;
    }

    /* ============================================================
       Sprint 11 DS v2 - Overrides par theme (data-theme + data-density)
       Source : tokens.css DS v2 (4 palettes + 3 densites)
       Strategie : redefinir les tokens LOCAUX du tunnel V8 selon le theme
       actif, sans toucher au CSS existant (architecture preservee).
       ============================================================ */

    /* Theme dark : surfaces inversées (--blanc → nigredo-900, --noir → albedo-100, etc.)
       Identité marque PRÉSERVÉE : --bleu-canard et --bordeaux INCHANGÉS (décision Romuald 2026-05-12)
       Contraste WCAG AA pour le texte body via --gris = nigredo-200 (ratio ≥ 7:1) */
    :root[data-theme="dark"] {
      --blanc: var(--nigredo-900);
      /* Sol sombre : le degrade du titre monte en clarte au lieu de descendre.
         Meme famille, memes deux arrets, polarite inversee. L Athanor a 73 % est
         deja la valeur retenue ailleurs dans cette page pour ecrire sur un fond
         fige sombre (voir --pricing-ink). */
      --gradient-titre: linear-gradient(135deg, oklch(73% 0.100 220), var(--bleu-light));
      --blanc-casse: var(--nigredo-800);
      --gris-clair: var(--nigredo-700);
      --gris-ui: var(--nigredo-800);
      --noir: var(--albedo-100);
      --gris: var(--nigredo-200);
      --gris-200: var(--nigredo-700);
      --gris-400: var(--nigredo-300);
      --gris-600: var(--nigredo-100);
      /* --bleu-canard, --bleu-dark, --bleu-light, --bordeaux, --bordeaux-dark, --bordeaux-light : INCHANGES (identite marque preservee) */
      --bleu-tint: var(--athanor-800);
      --bordeaux-glow: var(--rubedo-500);
      --surface: var(--nigredo-900);
      --tooltip-bg: var(--nigredo-700);
      --tooltip-color: var(--albedo-100);
      --tooltip-arrow-color: var(--nigredo-700);
      --shadow-tint: 230, 240, 245;
      --shadow-zen: 0 4px 20px rgba(0, 0, 0, 0.45);
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
      --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.50);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
      --shadow-brand: 0 4px 14px rgba(27, 126, 148, 0.45);
      --shadow-brand-hover: 0 6px 20px rgba(27, 126, 148, 0.55);
      --verbatim-ink: var(--rubedo-300); /* V9.3 C3 : Rubedo clair, lisible sur fond sombre (AAA) */
      /* Encres de marque en thème sombre (2026-07-27, audit contrastes).
         L'identité reste intacte : --bleu-canard, --bleu-dark, --bordeaux ne bougent
         PAS (décision du 2026-05-12 ci-dessus). Seules les encres SÉMANTIQUES de
         TEXTE s'éclaircissent, ce qui est précisément leur raison d'être : sur les
         fonds sombres, #1B7E94 en texte tombait à 3,34:1 et #932951 à 2,01:1.
         Mesuré après correction sur le pire fond sombre de la page (#10262B) :
         --bleu-light 4,94:1 et --rubedo-300 6,28:1. Les SURFACES de marque
         (boutons, aplats) continuent d'utiliser les tokens d'identité. */
      --brand-text: var(--bleu-light);
      --brand-text-strong: var(--bleu-light);
      --brand-accent-text: var(--rubedo-300);
      --succes-ink: oklch(75% 0.130 150); /* vert clair : --succes tombait à 2,03:1 sur fond sombre */
      /* Encres de phase sur fond sombre : mêmes familles, paliers éclaircis. */
      --phase-nigredo: var(--nigredo-300);
      --phase-albedo: var(--gris-400);
      --phase-citrinitas: var(--citrinitas-500);
    }

    /* Theme sepia : palette rubedo-50 confort lecture */
    :root[data-theme="sepia"] {
      --blanc: var(--rubedo-50);
      /* Sol clair creme. --bleu-canard y vaut deja --athanor-700 : sans arret
         propre, le degrade retomberait a un ecart de huit points. */
      --gradient-titre: linear-gradient(135deg, var(--athanor-800), var(--athanor-500));
      --blanc-casse: var(--rubedo-100);
      --gris-clair: var(--rubedo-200);
      --gris-ui: var(--rubedo-50);
      --noir: var(--nigredo-900);
      --gris: var(--nigredo-700);
      --bleu-canard: var(--athanor-700);
      --bleu-dark: var(--athanor-800);
      --bleu-light: var(--athanor-500);
      --bordeaux: var(--rubedo-700);
      --bordeaux-dark: var(--rubedo-800);
      --bordeaux-light: var(--rubedo-500);
      --surface: var(--rubedo-100);
    }

    /* Theme high-contrast : noir et blanc AAA */
    :root[data-theme="high-contrast"] {
      --blanc: oklch(100% 0 0);
      /* Contraste eleve : pas de degrade du tout. Le noir plein, deux fois. */
      --gradient-titre: linear-gradient(135deg, oklch(0% 0 0), oklch(0% 0 0));
      --blanc-casse: oklch(100% 0 0);
      --gris-clair: oklch(100% 0 0);
      --gris-ui: oklch(100% 0 0);
      --noir: oklch(0% 0 0);
      --gris: oklch(0% 0 0);
      --gris-200: oklch(0% 0 0);
      --gris-400: oklch(0% 0 0);
      --gris-600: oklch(0% 0 0);
      --bleu-canard: oklch(0% 0 0);
      --bleu-dark: oklch(0% 0 0);
      --bleu-light: oklch(0% 0 0);
      --bordeaux: oklch(0% 0 0);
      --bordeaux-dark: oklch(0% 0 0);
      --bordeaux-light: oklch(0% 0 0);
      --bordeaux-glow: oklch(0% 0 0);
      --surface: oklch(100% 0 0);
    }

    /* Theme print-mono : niveaux de gris (cf tokens.css print) */
    :root[data-mode="print-mono"] {
      --blanc: oklch(100% 0 0);
      /* Impression : l echelle de gris de la charte, sans teinte. */
      --gradient-titre: linear-gradient(135deg, oklch(20% 0 0), oklch(40% 0 0));
      --blanc-casse: oklch(96% 0 0);
      --gris-clair: oklch(92% 0 0);
      --gris-ui: oklch(100% 0 0);
      --noir: oklch(0% 0 0);
      --gris: oklch(40% 0 0);
      --bleu-canard: oklch(35% 0 0);
      --bleu-dark: oklch(20% 0 0);
      --bordeaux: oklch(40% 0 0);
      --bordeaux-dark: oklch(25% 0 0);
      --surface: oklch(100% 0 0);
    }

    /* Densites : ajustement espacement local via multiplicateur */
    :root[data-density="comfortable"] {
      --space-md: calc(1.313rem * 1.33);
      --space-lg: calc(2.125rem * 1.33);
      --space-xl: calc(3.438rem * 1.33);
      --space-2xl: calc(5.563rem * 1.33);
      --fs-body: 1.12rem;
      --fs-lead: 1.26rem;
    }

    /* Pricing + Footer : sections stay-dark en theme sombre
       Pattern : le pricing/footer V8 est natif sombre (linear-gradient(--noir, #2A2A2A) + texte blanc).
       En dark, on FIGE le fond sombre en hex (immune au var(--noir) qui s'inverse) et préserve --noir/--blanc
       locaux pour les gradients/badges internes. Le rendu reste identique à light theme.
       Décision Romuald 2026-05-12 : laisser comme thème clair (visible et lisible des 2 côtés). */
    body[data-theme="dark"] .pricing,
    body[data-theme="dark"] .footer {
      --noir: #1A1A1A;
      --blanc: #ffffff;
    }
    body[data-theme="dark"] .pricing {
      background: linear-gradient(160deg, #1A1A1A 0%, #2A2A2A 100%) !important;
    }
    body[data-theme="dark"] .footer {
      background: #1A1A1A !important;
    }

    :root[data-density="compact"] {
      --space-md: calc(1.313rem * 0.67);
      --space-lg: calc(2.125rem * 0.67);
      --space-xl: calc(3.438rem * 0.67);
      --space-2xl: calc(5.563rem * 0.67);
      --fs-body: 0.95rem;
      --fs-lead: 1.07rem;
    }

    /* ============================================================
       Sprint 11 DS v2 - Theme Switcher MOL-13 (2 boutons SVG inline)
       Pattern : 2 boutons icon-only (densité + palette) en cycle, hex strict bleu canard pour visibilité
       Décision Romuald 2026-05-12 : pas de Phosphor CDN (échec font path), SVG inline robuste.
       Cycle : palette = auto→light→dark→sepia→high-contrast, densité = standard→comfortable→compact
       ============================================================ */

    .q-visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .q-theme-switcher--icons {
      display: inline-flex;
      align-items: center;
      gap: var(--space-fib-2, 0.25rem);
    }

    .q-theme-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 40px;
      height: 40px;
      padding: 0;
      background: color-mix(in srgb, #1B7E94 8%, transparent);
      color: #1B7E94;
      border: 1.5px solid #1B7E94;
      border-radius: 9999px;
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
      transition: background 200ms cubic-bezier(0.2, 0, 0, 1),
                  border-color 200ms cubic-bezier(0.2, 0, 0, 1),
                  color 200ms cubic-bezier(0.2, 0, 0, 1),
                  transform 200ms cubic-bezier(0.2, 0, 0, 1);
    }
    .q-theme-icon:hover:not(:disabled) {
      background: color-mix(in srgb, #1B7E94 15%, transparent);
      border-color: #156A7D;
      color: #156A7D;
    }
    .q-theme-icon i.ph { font-size: inherit; line-height: 1; }

    .q-theme-icon:hover:not(:disabled) {
      background: var(--gris-clair);
      border-color: var(--brand-text);
      color: var(--brand-text);
    }

    .q-theme-icon:focus-visible {
      outline: 2px solid var(--bleu-canard);
      outline-offset: 2px;
    }

    .q-theme-icon:active:not(:disabled) {
      transform: scale(0.95);
    }

    .q-theme-icon[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }

    @media (prefers-reduced-motion: reduce) {
      .q-theme-icon { transition: none; }
      .q-theme-icon:active:not(:disabled) { transform: none; }
    }

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

    /* Les contrôles de formulaire n'héritent PAS de la police du document : sans
       cette règle, le navigateur leur applique sa police système. Mesuré le
       2026-07-28 : 34 boutons du tunnel (choix du simulateur, onglets, segments)
       s'affichaient en Arial au lieu de Plus Jakarta Sans. */
    button, input, select, textarea {
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    html {
      scroll-behavior: smooth;
      overflow-anchor: none;
      font-size: 16px;
    }

    /* V9.23 : quand Lenis tourne, le defilement lisse natif se tait. Sans cela
       deux moteurs animent la meme page : le navigateur sur les ancres internes
       et les scrollIntoView, Lenis dans sa boucle. La classe `lenis` n est posee
       que par la bibliotheque elle-meme ; si elle ne se charge pas, ou si le
       visiteur demande moins d animations, cette regle ne s applique pas et la
       page garde son defilement lisse natif. */
    html.lenis {
      scroll-behavior: auto;
    }

    body {
      font-family: var(--font-main);
      color: var(--gris);
      background: var(--surface);
      line-height: var(--lh-body);
      -webkit-font-smoothing: antialiased;
    }

    /* ---------- Utility classes (dette CSS Sprint #3 + Sprint #4) ---------- */
    /* Remplace les hex inline les plus frequents par des classes reutilisables */
    .u-color-gris { color: var(--gris); }
    .u-color-noir { color: var(--noir); }
    .u-color-brand { color: var(--brand-text); }
    .u-color-bordeaux { color: var(--brand-accent-text); }
    .u-color-succes { color: var(--succes); }
    /* 2026-07-28, sprint 8 : --athanor-clair (#2A9DB6) posait un Athanor CLAIR sur
       les fonds Athanor TRÈS clairs du tableau tarifaire : 2,75:1, et 1,31:1 sur
       les lignes zébrées. Ces 38 coches marquent ce qui est inclus dans un palier :
       elles doivent se lire. --brand-text suit le thème et s'assombrit en clair. */
    .u-color-teal { color: var(--brand-text); }
    .u-color-blanc { color: var(--text-on-brand, #ffffff); }
    .u-color-erreur { color: var(--erreur); }
    .u-color-gris-600 { color: var(--gris-600); }
    .u-color-gris-400 { color: var(--gris-400); }
    .u-fw-600 { font-weight: 600; }
    .u-fw-700 { font-weight: 700; }
    .u-fs-small { font-size: var(--fs-small); }
    .u-fs-caption { font-size: var(--fs-caption); }
    .u-fs-body { font-size: var(--fs-body); }
    .u-fs-lead { font-size: var(--fs-lead); }
    .u-lh-body { line-height: var(--lh-body); }
    .u-lh-copy { line-height: var(--lh-copy); }
    .u-text-center { text-align: center; }
    .u-bg-brand { background: var(--bleu-canard); }
    .u-bg-bordeaux { background: var(--bordeaux); }
    .u-gradient-bordeaux { background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-glow)); }
    .u-border-brand { border-color: var(--brand-text); }

    /* ---------- Navigation ---------- */
    /* Offset ancres pour compenser la navbar fixe */
    [id="solution"],
    [id="productions"],
    [id="conformite"],
    [id="temoignages"],
    [id="roi"],
    [id="tarifs"],
    [id="faq"] {
      scroll-margin-top: 100px;
    }

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: var(--space-sm) var(--space-md);
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      background: color-mix(in srgb, var(--blanc-casse) 85%, transparent);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid transparent;
      transition: background 0.3s var(--enso), border-color 0.3s var(--enso), box-shadow 0.3s var(--enso);
    }

    .nav.scrolled {
      background: color-mix(in srgb, var(--blanc) 95%, transparent);
      box-shadow: var(--shadow-zen);
    }

    /* Logo header : DM Serif Display (police des titres, charte graphique) */
    .nav-brand {
      font-family: var(--font-display);
      font-size: var(--fs-h4);
      font-weight: 400;
      font-style: italic;
      color: var(--brand-text);
      text-decoration: none;
      justify-self: start;
      letter-spacing: 0.02em;
    }

    .nav-brand .tm {
      font-size: 0.236em; /* golden ratio triple minor (1/phi³) */
      vertical-align: super;
      font-weight: 400;
      color: var(--brand-text);
    }

    .nav-links {
      display: none;
      list-style: none;
      gap: var(--space-lg);
      align-items: center;
      justify-self: center;
    }

    .nav-links a {
      text-decoration: none;
      color: var(--gris);
      font-size: var(--fs-body);
      font-weight: 500;
      transition: color 0.2s var(--enso);
    }

    .nav-links a:hover {
      color: var(--brand-text);
    }

    .nav-cta {
      display: none;
      justify-self: end;
      align-items: center;
      gap: var(--space-fib-3, 0.5rem);
    }

    .nav-cta a {
      display: inline-flex;
      align-items: center;
      box-sizing: border-box;
      min-height: 40px;
      padding: var(--space-xs) var(--space-md);
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      border-radius: 0.75rem;
      text-decoration: none;
      font-size: var(--fs-body);
      font-weight: 600;
      box-shadow: 0 4px 14px rgba(27, 126, 148, 0.25);
      transition: background 0.2s var(--enso), box-shadow 0.2s var(--enso);
    }

    .nav-cta a:hover {
      background: linear-gradient(135deg, var(--bleu-dark), var(--bleu-canard));
      box-shadow: 0 6px 20px rgba(27, 126, 148, 0.35);
    }

    /* ---------- Navigation Mobile - Menu Hamburger ---------- */
    .nav-hamburger {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-sm);
      min-width: 44px;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      justify-self: end;
      grid-column: 3;
      z-index: 1001;
    }

    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--bleu-canard);
      transition: all 0.3s var(--enso);
      border-radius: 2px;
    }

    .nav-hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translateY(10px);
    }

    .nav-hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    .nav-hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translateY(-10px);
    }

    .nav-menu-mobile {
      position: fixed;
      top: 0;
      right: -100%;
      width: 280px;
      height: 100vh;
      background: var(--blanc);
      box-shadow: -4px 0 20px rgba(var(--shadow-tint), 0.1);
      padding: var(--space-2xl) var(--space-lg) var(--space-lg);
      transition: right 0.4s var(--enso);
      z-index: 1000;
      overflow-y: auto;
    }

    .nav-menu-mobile.active {
      right: 0;
    }

    .nav-menu-mobile .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 0;
      list-style: none;
      margin-bottom: var(--space-lg);
    }

    .nav-menu-mobile .mobile-nav-links a {
      display: block;
      padding: var(--space-sm) 0;
      font-size: var(--fs-lead);
      color: var(--gris);
      text-decoration: none;
      transition: color 0.2s var(--enso);
    }

    .nav-menu-mobile .mobile-nav-links a:hover {
      color: var(--brand-text);
    }

    .nav-menu-mobile .mobile-nav-cta a {
      display: block;
      width: 100%;
      padding: var(--space-sm);
      background: var(--bordeaux);
      color: var(--text-on-brand, #ffffff);
      border-radius: 0.75rem;
      text-align: center;
      text-decoration: none;
      font-weight: 600;
      font-size: var(--fs-body);
      transition: background 0.2s var(--enso);
    }

    .nav-menu-mobile .mobile-nav-cta a:hover {
      background: var(--bordeaux-dark);
    }

    .nav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s var(--enso), visibility 0.3s var(--enso);
      z-index: 999;
    }

    .nav-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* ---------- Trust bar ---------- */
    .trust-bar {
      padding: var(--space-xl) var(--space-md);
      background: var(--bleu-canard);
      border-bottom: none;
    }

    .trust-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-lg);
      max-width: var(--max-width);
      margin: 0 auto;
      text-align: center;
    }

    .trust-item {
      padding: var(--space-sm) var(--space-xs);
      position: relative;
    }

    .trust-item .trust-number {
      font-size: var(--fs-h1);
      font-weight: 700;
      color: var(--text-on-brand, #ffffff);
      line-height: var(--lh-heading);
      letter-spacing: -0.02em;
    }

    .trust-item .trust-label {
      font-size: var(--fs-small);
      color: var(--text-on-brand, #ffffff);
      margin-top: var(--space-2xs);
    }

    /* ---------- Animation spirale douleur ---------- */
    .pain-spiral-path {
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      transition: stroke-dashoffset 2s ease-out;
    }
    .pain-spiral-svg.animated .pain-spiral-path {
      stroke-dashoffset: 0;
    }
    .pain-dot {
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .pain-spiral-svg.animated .pain-dot-1 { opacity: 1 !important; transition-delay: 0.6s; }
    .pain-spiral-svg.animated .pain-dot-2 { opacity: 1 !important; transition-delay: 1.1s; }
    .pain-spiral-svg.animated .pain-dot-3 { opacity: 1 !important; transition-delay: 1.6s; }
    .pain-spiral-svg.animated .pain-dot-4 { opacity: 1 !important; transition-delay: 2.1s; }
    /* Fondu doux pour les points de douleur (pas de pop/scale) */

    /* ---------- Avant/Après ---------- */




















    /* ---------- Sticky Mobile CTA ---------- */
    .sticky-cta {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 999;
      padding: var(--space-sm) var(--space-md);
      background: color-mix(in srgb, var(--blanc) 95%, transparent);
      backdrop-filter: blur(12px) saturate(140%); /* V9.10 (Lovable A8) : rendu verre enrichi */
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      box-shadow: 0 -4px 20px rgba(var(--shadow-tint), 0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      transform: translateY(100%);
      transition: transform 0.3s var(--enso);
    }

    .sticky-cta.visible {
      transform: translateY(0);
    }

    .sticky-cta .sticky-price {
      font-size: var(--fs-small);
      color: var(--gris);
      line-height: var(--lh-heading);
    }

    .sticky-cta .sticky-price strong {
      display: block;
      font-size: var(--fs-lead);
      color: var(--noir);
    }

    .sticky-cta .btn {
      white-space: nowrap;
    }

    /* ---------- Utility ---------- */
    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--space-md);
    }

    .section-tag {
      display: inline-block;
      font-size: var(--fs-small);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--phase-athanor);
      background: rgba(27, 126, 148, 0.1);
      border-radius: 0.75rem;
      padding: var(--space-3xs) var(--space-sm);
      margin-bottom: var(--space-sm);
    }

    /* Marqueurs de phase (2026-07-28). Athanor est le défaut ci-dessus ; ces
       modificateurs portent les quatre autres phases. Ils remplacent les styles
       inline qui appliquaient le Rubedo à la section « Problème », soit la
       couleur de l'accomplissement sur la section de la douleur. */
    .section-tag--nigredo    { color: var(--phase-nigredo);    background: rgba(26, 26, 26, 0.08); }
    .section-tag--albedo     { color: var(--phase-albedo);     background: rgba(90, 106, 112, 0.10); }
    .section-tag--citrinitas { color: var(--phase-citrinitas); background: rgba(200, 156, 44, 0.14); }
    .section-tag--rubedo     { color: var(--phase-rubedo);     background: rgba(147, 41, 81, 0.10); }

    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.7s var(--enso), transform 0.7s var(--enso);
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Révélation en cascade des grilles de cartes (50 ms par carte).
       Sous prefers-reduced-motion la transition est désactivée : le délai devient sans effet. */
    .target-grid .fade-in:nth-child(2),
    .trust-grid .fade-in:nth-child(2) { transition-delay: 50ms; }
    .target-grid .fade-in:nth-child(3),
    .trust-grid .fade-in:nth-child(3) { transition-delay: 100ms; }
    .target-grid .fade-in:nth-child(4),
    .trust-grid .fade-in:nth-child(4) { transition-delay: 150ms; }
    .target-grid .fade-in:nth-child(5) { transition-delay: 200ms; }
    .target-grid .fade-in:nth-child(6) { transition-delay: 250ms; }
    .target-grid .fade-in:nth-child(7) { transition-delay: 300ms; }

    /* ---------- Superscript Euro ---------- */
    sup {
      font-size: 0.65em;
      vertical-align: super;
      line-height: 0;
    }

    /* ---------- Typography, Golden Ratio Scale ---------- */
    h1 {
      font-family: var(--font-display);
      font-size: var(--fs-h1);
      font-weight: 400;
      color: var(--noir);
      line-height: var(--lh-tight);
      letter-spacing: -0.02em;
    }

    h1 span {
      background: var(--gradient-titre);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    h2 {
      font-family: var(--font-display);
      font-size: var(--fs-h2);
      font-weight: 400;
      color: var(--brand-text);
      line-height: var(--lh-heading);
      letter-spacing: -0.02em;
      margin-bottom: var(--space-sm);
    }

    h3 {
      font-size: var(--fs-h3);
      font-weight: 600;
      color: var(--noir);
      line-height: var(--lh-heading);
      margin-bottom: var(--space-xs);
    }

    /* V9.10 : equilibre typographique natif. balance repartit les mots des titres
       sur des lignes de longueur comparable (plus de mot orphelin) ; pretty evite
       les orphelins dans les reponses FAQ. Progressive enhancement : ignore par
       les navigateurs qui ne le supportent pas. */
    h1, h2, h3, .kpi-label { text-wrap: balance; }
    .faq-answer p { text-wrap: pretty; }

    p {
      margin-bottom: var(--space-sm);
    }

    strong {
      color: var(--noir);
    }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-block;
      padding: var(--space-sm) var(--space-lg);
      font-size: var(--fs-lead);
      font-weight: 600;
      font-family: var(--font-main);
      border: none;
      border-radius: 0.75rem;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.25s var(--enso), transform 0.15s var(--enso), box-shadow 0.25s var(--enso);
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-primary {
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      /* Glow dosé (amendement DS 2026-07-08) */
      box-shadow: 0 8px 22px -4px rgba(27, 126, 148, 0.42), 0 0 30px rgba(42, 157, 182, 0.28);
    }

    .btn-primary:hover {
      background: linear-gradient(135deg, var(--bleu-dark), var(--bleu-canard));
      box-shadow: 0 12px 30px -6px rgba(27, 126, 148, 0.5), 0 0 42px rgba(42, 157, 182, 0.4);
    }

    /* Tier LG : pricing, sticky, floating, modal, paired buttons (Fibonacci 8/21, ratio 2.63:1) */
    /* N28 touch targets : min-height 44px pour conformite mobile */
    .btn--lg {
      padding: var(--space-xs) var(--space-md);
      font-size: var(--fs-body);
      min-height: 44px;
    }

    .btn-secondary {
      background: transparent;
      color: var(--brand-text);
      border: 2px solid var(--bleu-canard);
    }

    .btn-secondary:hover {
      background: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
    }

    /* HERO : copie exacte de Copie 23 (version stable validee) */
    .hero {
      position: relative;
      /* Base du fond. Les trois halos radiaux sont passes sur .hero::after pour
         pouvoir respirer sans que le reste bouge (retour fondateur 2026-07-30 :
         le fond du hero doit flotter). `isolation` cree le contexte
         d empilement qui permet a cette couche de se glisser SOUS le contenu
         sans qu aucun element du hero ait a etre touche. */
      isolation: isolate;
      background: linear-gradient(160deg, var(--surface) 0%, var(--surface) 55%, var(--bleu-tint) 100%);
      padding: var(--space-2xl) var(--space-md) var(--space-2xl);
      padding-top: calc(var(--space-2xl) + 1.5rem);
      overflow: hidden;
    }

    /* Couche du souffle : les trois halos (amendement DS 2026-07-08), inchanges. */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(ellipse 80% 58% at 50% -14%, rgba(42, 157, 182, 0.34), transparent 62%),
        radial-gradient(ellipse 62% 50% at 94% 4%, rgba(147, 41, 81, 0.18), transparent 60%),
        radial-gradient(ellipse 60% 55% at 2% 28%, rgba(27, 126, 148, 0.26), transparent 60%);
    }

    /* Respiration du fond. Propriete independante `scale`, JAMAIS `transform` :
       plusieurs elements du tunnel s en servent pour se positionner, et
       differemment selon la largeur d ecran ; `scale` se compose au lieu de
       remplacer. L echelle ne fait que croitre depuis 1, donc la couche ne peut
       jamais decouvrir de bord vide, et le hero la recadre de toute facon.
       Amplitude 5 %, cycle de 26 s : un souffle, pas un mouvement. */
    @keyframes heroSouffle {
      0%, 100% { scale: 1; opacity: 1; }
      50%      { scale: 1.05; opacity: 0.9; }
    }

    @media (prefers-reduced-motion: no-preference) {
      .hero::after { animation: heroSouffle 26s ease-in-out infinite; }
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 500px;
      border-radius: 50%;
      border: 1px solid rgba(27, 126, 148, 0.10);
      pointer-events: none;
    }

    .hero .container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-lg);
    }

    /* S7 2026-07-11 : .hero-badge, .hero-badge .dot et @keyframes pulse supprimés (orphelins, 0 usage DOM/JS) */

    /* ── Hero Stagger Reveal ── */
    @keyframes heroReveal {
      from {
        opacity: 0;
        transform: translateY(24px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .hero-stagger {
      opacity: 0;
      animation: heroReveal 0.7s var(--enso) forwards;
    }
    .hero-stagger-1 { animation-delay: 0.1s; }
    .hero-stagger-2 { animation-delay: 0.25s; }
    .hero-stagger-3 { animation-delay: 0.4s; }
    .hero-stagger-4 { animation-delay: 0.55s; }
    .hero-stagger-5 { animation-delay: 0.7s; }
    .hero-stagger-6 { animation-delay: 0.85s; }

    /* S7 2026-07-11 : .hero-scroll-hint + @keyframes fadeSlideUp/bounceHint supprimés (orphelins, 0 usage DOM/JS) */

    @media (prefers-reduced-motion: reduce) {
      .hero-stagger { animation: none; opacity: 1; transform: none; }
      .fade-in { transition: none !important; opacity: 1 !important; transform: none !important; }
      .pain-spiral-path { transition: none; }
      .sim-time-bar { transition: none !important; }
      .comparison-bar .bar-fill { transition: none !important; }
      .sim-step { animation: none !important; }
    }

    .hero h1 span {
      color: var(--brand-text);
    }

    .hero-sub {
      font-size: var(--fs-lead);
      color: var(--gris);
      max-width: 620px;
      line-height: var(--lh-body);
    }

    .hero-cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      align-items: center;
    }

    /* S7 2026-07-11 : .hero-proof supprimée (orpheline, 0 usage DOM/JS) */

    /* ===== Hero 2 colonnes (refonte 2026-07-10, inspiration Lovable, copy All in P2/P3) ===== */
    .hero-grid {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-xl);
      align-items: center;
    }
    @media (min-width: 1024px) {
      .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); }
    }
    /* Rythme vertical nombre d or (Fibonacci 13/21/34) : l ancien hero heritait
       du gap du container, les colonnes ont leur propre echelle explicite. */
    .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
    /* V9.1b (2026-07-11, retour fondateur) : bloc CTA + prix + signature centre
       sous le duo texte/visuel ; CTA simulateur a la meme stature que le CTA demo,
       soulignement dose (amendement DS 2026-07-08 : glow CTA autorise). */
    .hero-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--space-sm);
      margin-top: var(--space-lg);
      width: 100%; /* V9.3 C1 : etait un flex-item shrink-to-fit colle a gauche (grand vide a droite), desormais pleine largeur et centre */
    }
    .hero-bottom .hero-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin: 0; }
    .hero-bottom .hero-founder { justify-content: center; }
    /* V9.10 : de fantome a bouton SOLIDE. Repos : blanc opaque + texte bleu-dark (6,2:1,
       stable sur tout le degrade du hero, l'ancien 27,126,148 tombait a 3,4:1 en bas).
       Hover : inversion franche AVEC color redefinie (cause racine V9.8 : le fond quasi
       blanc heritait du texte blanc de .btn-secondary:hover -> contraste 1,2:1). */
    .hero-cta-sim {
      position: relative;
      border-width: 2px;
      font-weight: 700;
      background: var(--blanc);
      color: var(--bleu-dark);
      box-shadow: 0 0 18px rgba(27, 126, 148, 0.22);
    }
    .hero-cta-sim:hover {
      background: var(--bleu-dark);
      color: var(--text-on-brand, #ffffff);
      box-shadow: 0 0 28px rgba(27, 126, 148, 0.38);
    }
    /* V9.24 : le halo ne pulse plus en `box-shadow`, il pulse en `opacity` sur une
       couche dediee. Une ombre animee est REPEINTE a chaque cadre sur le fil
       principal ; ce bouton est au-dessus du pli, donc il repeignait en
       permanence, la ou se mesurent l affichage et la reactivite. Une opacite,
       le compositeur la porte seul. Meme souffle a l oeil, cout nul. */
    .hero-cta-sim::after {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: 0 0 28px rgba(27, 126, 148, 0.36);
      opacity: 0;
    }
    @keyframes heroSimHalo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
    @media (prefers-reduced-motion: no-preference) {
      .hero-cta-sim { box-shadow: 0 0 14px rgba(27, 126, 148, 0.18); }
      .hero-cta-sim::after { animation: heroSimHalo 2.8s ease-in-out infinite; }
    }
    @media (prefers-reduced-motion: reduce) { .hero-cta-sim, .hero-cta-sim:hover { box-shadow: none; } .hero-cta-sim::after { display: none; } }
    /* H1 calibre pour la colonne (le 68px du hero centre ne tient pas dans 600px) */
    .hero-copy h1 { font-size: clamp(2.2rem, 1.4rem + 2.1vw, 3.3rem); margin: 0 0 var(--space-md); }
    .hero-copy .hero-sub { margin: 0 0 var(--space-md); }
    .hero-copy .hero-cta-row { margin: 0 0 var(--space-2xs); }
    .hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-sm); }
    .hero-chip {
      font-size: var(--fs-caption);
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 999px;
      background: rgba(27, 126, 148, 0.07);
      color: var(--brand-text-strong);
      border: 1px solid rgba(27, 126, 148, 0.18);
      white-space: nowrap;
    }
    .hero-checks {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-2xs) var(--space-md);
      margin: 0 0 var(--space-lg);
      padding: 0;
      max-width: 560px;
    }
    @media (min-width: 640px) { .hero-checks { grid-template-columns: 1fr 1fr; } }
    .hero-checks li {
      display: flex;
      align-items: flex-start;
      gap: var(--space-2xs);
      font-size: var(--fs-small);
      color: var(--gris);
      line-height: var(--lh-body);
    }
    .hero-checks li svg {
      width: 16px; height: 16px;
      color: var(--bleu-canard);
      flex-shrink: 0;
      margin-top: 3px;
    }
    .hero-founder {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      margin-top: var(--space-lg);
      flex-wrap: wrap; /* V9.3 : filet anti-débordement mobile 375px */
      max-width: 100%;
    }
    /* 2026-07-28 : 48 px avec un portrait cadré buste rendait le visage illisible
       (la tête n'occupait que 43 % de l'image). Dérivé recadré sur le visage
       (tête à 62 % du cadre) et diamètre porté à 64 px. Le liseré clair détache
       le disque du dégradé du hero, sur lequel un simple filet bleu se perdait. */
    .hero-founder img {
      border-radius: 50%;
      width: 64px; height: 64px;
      object-fit: cover;
      border: 2px solid var(--bleu-canard);
      box-shadow: 0 0 0 3px var(--blanc);
      flex-shrink: 0;
    }
    .hero-founder span { line-height: 1.45; min-width: 0; flex: 1 1 auto; }

    /* Visuel avant/apres : la preuve du mecanisme avant la conversion */
    .hv-compare {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm);
      max-width: 560px;
      margin: 0 auto;
    }
    .hv-card {
      border-radius: 1rem;
      padding: var(--space-sm) var(--space-sm) var(--space-xs);
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);
    }
    .hv-card--before {
      background: var(--blanc);
      border: 1px solid var(--gris-clair);
      box-shadow: 0 1px 2px rgba(21, 32, 30, 0.05);
    }
    .hv-card--after {
      background: linear-gradient(160deg, var(--blanc) 55%, rgba(27, 126, 148, 0.07));
      border: 1px solid rgba(27, 126, 148, 0.28);
      box-shadow: 0 12px 34px -14px rgba(27, 126, 148, 0.35);
    }
    .hv-head {
      display: flex; align-items: center; gap: var(--space-3xs);
      font-size: var(--fs-caption); font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.07em;
      margin: 0 0 var(--space-2xs);
    }
    .hv-head svg { width: 14px; height: 14px; flex-shrink: 0; }
    .hv-head--alert { color: var(--erreur, #C94040); }
    .hv-head--brand { color: var(--brand-text-strong); }
    .hv-file {
      display: flex; align-items: center; gap: var(--space-3xs);
      font-size: var(--fs-caption);
      color: var(--gris);
      background: var(--gris-clair);
      border: 1px solid rgba(90, 106, 112, 0.14);
      border-radius: 0.5rem;
      padding: 6px 9px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      /* V9.10 : pose desordonnee via custom properties (--r/--x poses par item dans le HTML),
         pour que les animations transform ci-dessous n'ecrasent pas la pose. */
      transform: rotate(var(--r, 0deg)) translateX(var(--x, 0px));
    }
    .hv-file svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.75; }
    .hv-doc {
      display: flex; align-items: center; gap: var(--space-3xs);
      font-size: var(--fs-caption);
      color: var(--noir);
      background: var(--blanc);
      border: 1px solid rgba(27, 126, 148, 0.16);
      border-radius: 0.5rem;
      padding: 6px 9px;
    }
    .hv-doc span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hv-doc .hv-doc-ic { width: 13px; height: 13px; flex-shrink: 0; color: var(--bleu-canard); }
    .hv-doc .hv-doc-ck { width: 13px; height: 13px; flex-shrink: 0; color: var(--succes, #2D6E54); }
    /* V9.10 : contraste anime chaos/methode (les deux sequences demarrent ~1,3 s, quand
       la colonne hero-stagger-4 devient reellement visible ; l'ancienne revelation 0,15-0,75 s
       jouait AVANT que le parent soit opaque : personne ne la voyait).
       SANS Qalia : chute en vrac (delais volontairement desordonnes, leger rebond) puis
       micro-instabilite perpetuelle desynchronisee (immobile 76 % du temps, amplitude
       inferieure ou egale a 0,6 deg / 2 px : lisibilite intacte, pas de fatigue).
       AVEC Qalia : cadence metronomique 0,35 s, glissement qui se range, coche verte en
       deux temps, puis immobilite totale (la methode se lit dans l'immobilite). */
    /* V9.11 (2026-07-30) : boucle perpetuelle du contraste chaos / methode.
       Une seule animation par element porte l apparition, la micro-instabilite et
       la sortie : le transform a une source unique, plus de superposition de deux
       animations qui se disputent la meme propriete.

       SANS Qalia : ordre d apparition 2, 4, 1, 5, 3 et courbes differentes par
       fichier (de la chute seche au flottement mou). Derniere arrivee a 2,22 s.
       Le visiteur ne peut pas anticiper l ordre : c est le propos de la colonne.

       AVEC Qalia : cadence metronomique de 0,25 s, ordre chronologique strict,
       derniere arrivee a 1,42 s. Soit 1,56 fois plus rapide que le chaos.

       Cycle commun de 9 s. Les deux colonnes se vident puis repartent, sans fin. */
    @keyframes hv-file-cycle {
      0%   { opacity: 0; transform: rotate(0deg) translateX(0) translateY(-10px); }
      4%   { opacity: 1; transform: rotate(calc(var(--r, 0deg) * 1.35)) translateX(calc(var(--x, 0px) * 1.35)); }
      7%   { opacity: 1; transform: rotate(var(--r, 0deg)) translateX(var(--x, 0px)); }
      38%  { opacity: 1; transform: rotate(var(--r, 0deg)) translateX(var(--x, 0px)); }
      46%  { opacity: 1; transform: rotate(calc(var(--r, 0deg) + 0.6deg)) translateX(calc(var(--x, 0px) + 2px)) translateY(1px); }
      54%  { opacity: 1; transform: rotate(var(--r, 0deg)) translateX(var(--x, 0px)); }
      86%  { opacity: 1; transform: rotate(var(--r, 0deg)) translateX(var(--x, 0px)); }
      93%  { opacity: 0; transform: rotate(var(--r, 0deg)) translateX(var(--x, 0px)) translateY(6px); }
      100% { opacity: 0; transform: rotate(0deg) translateX(0) translateY(-10px); }
    }
    @keyframes hv-doc-cycle {
      0%    { opacity: 0; transform: translateX(-14px) translateY(-4px); }
      3.3%  { opacity: 1; transform: none; }
      88%   { opacity: 1; transform: none; }
      94%   { opacity: 0; transform: translateX(7px); }
      100%  { opacity: 0; transform: translateX(-14px) translateY(-4px); }
    }
    @keyframes hv-ck-cycle {
      0%, 2%    { opacity: 0; transform: scale(0.4); }
      5%        { opacity: 1; transform: scale(1); }
      88%       { opacity: 1; transform: scale(1); }
      94%, 100% { opacity: 0; transform: scale(0.4); }
    }
    @media (prefers-reduced-motion: no-preference) {
      .hv-compare { --hv-cycle: 9s; }
      .hv-card--before .hv-file {
        opacity: 0;
        animation: hv-file-cycle var(--hv-cycle) var(--ease, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--d, 0s) infinite both;
      }
      .hv-card--after .hv-doc {
        opacity: 0;
        animation: hv-doc-cycle var(--hv-cycle) cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) infinite both;
      }
      .hv-card--after .hv-doc .hv-doc-ck {
        opacity: 0;
        animation: hv-ck-cycle var(--hv-cycle) ease-out var(--d, 0s) infinite both;
      }
      .hv-card--after .hv-doc:nth-of-type(1) { --d: 0.12s; }
      .hv-card--after .hv-doc:nth-of-type(2) { --d: 0.37s; }
      .hv-card--after .hv-doc:nth-of-type(3) { --d: 0.62s; }
      .hv-card--after .hv-doc:nth-of-type(4) { --d: 0.87s; }
      .hv-card--after .hv-doc:nth-of-type(5) { --d: 1.12s; }
      .hv-card--after .hv-foot--ok {
        opacity: 0;
        animation: hv-doc-cycle var(--hv-cycle) ease-out 1.42s infinite both;
      }
    }
    .hv-foot {
      display: flex; align-items: center; gap: var(--space-3xs);
      font-size: var(--fs-caption); font-weight: 600;
      margin: var(--space-2xs) 0 0;
    }
    .hv-foot svg { width: 13px; height: 13px; flex-shrink: 0; }
    .hv-foot--alert { color: var(--erreur, #C94040); }
    .hv-foot--ok { color: var(--succes, #2D6E54); }
    .hv-arrow {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 18px rgba(27, 126, 148, 0.35);
    }
    .hv-arrow svg { width: 18px; height: 18px; }
    @media (max-width: 479px) {
      .hv-compare { grid-template-columns: 1fr; }
      .hv-arrow { position: static; transform: rotate(90deg); margin: calc(var(--space-2xs) * -1) auto; }
    }
    /* V9.1 chantier C10 (2026-07-11) : très larges viewports, le hero exploitait mal
       la largeur (container 1200 px + comparatif compact perdu dans une colonne
       haute) : container élargi et comparatif avant/après agrandi, contenu intact. */
    @media (min-width: 1440px) {
      /* section.hero : specificite superieure a la regle .hero .container (min-width 1024) plus tardive */
      section.hero .container { max-width: 1320px; }
      .hv-compare { max-width: 640px; gap: var(--space-md); }
      .hv-card { padding: var(--space-md) var(--space-md) var(--space-sm); gap: var(--space-xs); }
      .hv-file, .hv-doc { font-size: var(--fs-small); padding: 9px 12px; }
      .hv-head, .hv-foot { font-size: var(--fs-small); }
      .hv-file svg, .hv-doc .hv-doc-ic, .hv-doc .hv-doc-ck, .hv-foot svg { width: 15px; height: 15px; }
    }

    /* hero-enso et hero-enso-kanji supprimes, remplaces par ::before centre */

    .section-illustration {
      max-width: 600px;
      margin: 0 auto var(--space-lg);
      text-align: center;
    }

    .section-illustration svg {
      width: 100%;
      max-width: 400px;
      height: auto;
    }

    .inline-icon {
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }

    /* ============================================
       SECTION 2 : PROBLÈME
       ============================================ */
    .problem {
      padding: var(--space-xl) var(--space-md) var(--space-2xl);
      background: var(--blanc);
    }

    .problem-header {
      text-align: center;
      max-width: var(--content-width);
      margin: 0 auto var(--space-lg);
    }

    .pain-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
      max-width: 900px;
      margin: 0 auto var(--space-lg);
    }

    .pain-card {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-lg); /* 62/38 golden : md(21) */
      border-radius: 1rem;
      background: var(--blanc);
      box-shadow: var(--shadow-zen);
      overflow: hidden;
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
      position: relative;
    }
    /* En-tete sur une seule ligne : carre numerote + titre alignes */
    .pain-card .pain-head {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
    .pain-card .pain-text {
      min-height: 3em;
      line-height: 1.6;
      margin: 0;
    }

    .pain-card::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      opacity: 0;
      transition: opacity 0.4s var(--enso);
      pointer-events: none;
      transform: translate(30%, -30%);
    }

    .pain-card:hover {
      box-shadow: 0 20px 56px rgba(var(--shadow-tint), 0.14);
      transform: translateY(-8px);
    }

    .pain-card:hover::after {
      opacity: 1;
    }

    .pain-card .level {
      flex-shrink: 0;
      width: 52px;
      height: 52px;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: var(--fs-lead);
      color: var(--text-on-brand, #ffffff);
      box-shadow: 0 4px 12px rgba(var(--shadow-tint), 0.15);
      position: relative;
      transition: transform 0.4s var(--enso), box-shadow 0.4s var(--enso);
    }

    .pain-card:hover .level {
      transform: scale(1.08);
      box-shadow: 0 8px 20px rgba(var(--shadow-tint), 0.2);
    }

    .pain-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 0;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, transparent, var(--gris-clair), transparent);
      transition: height 0.6s var(--enso);
    }

    .pain-card:hover::before {
      height: 30%;
    }

    .pain-card.l1 { background: var(--blanc); }
    .pain-card.l1::before { background: linear-gradient(180deg, transparent, var(--warning), transparent); }
    .pain-card.l1 .level { background: linear-gradient(135deg, var(--warning-dark), var(--warning)); box-shadow: 0 4px 16px rgba(212, 160, 32, 0.35); }
    .pain-card.l1::after { background: radial-gradient(circle, rgba(212, 160, 32, 0.10), transparent 70%); }
    .pain-card.l1:hover .level { box-shadow: 0 8px 24px rgba(212, 160, 32, 0.40); }

    .pain-card.l2 { background: var(--blanc); }
    .pain-card.l2::before { background: linear-gradient(180deg, transparent, var(--orange-alerte), transparent); }
    .pain-card.l2 .level { background: linear-gradient(135deg, var(--erreur-dark), var(--erreur)); box-shadow: 0 4px 16px rgba(224, 112, 64, 0.30); }
    .pain-card.l2::after { background: radial-gradient(circle, rgba(224, 112, 64, 0.10), transparent 70%); }
    .pain-card.l2:hover .level { box-shadow: 0 8px 24px rgba(224, 112, 64, 0.35); }

    .pain-card.l3 { background: var(--blanc); }
    .pain-card.l3::before { background: linear-gradient(180deg, transparent, var(--erreur-dark), transparent); }
    .pain-card.l3 .level { background: linear-gradient(135deg, var(--erreur-dark), var(--erreur-light)); box-shadow: 0 4px 16px rgba(201, 64, 64, 0.30); }
    .pain-card.l3::after { background: radial-gradient(circle, rgba(201, 64, 64, 0.10), transparent 70%); }
    .pain-card.l3:hover .level { box-shadow: 0 8px 24px rgba(201, 64, 64, 0.35); }

    .pain-card.l4 { background: var(--blanc); }
    .pain-card.l4::before { background: linear-gradient(180deg, transparent, var(--bordeaux), transparent); }
    .pain-card.l4 .level { background: linear-gradient(135deg, var(--bordeaux-dark), var(--bordeaux-light)); box-shadow: var(--shadow-bordeaux-md-strong); }
    .pain-card.l4::after { background: radial-gradient(circle, rgba(147, 41, 81, 0.12), transparent 70%); }
    .pain-card.l4:hover .level { box-shadow: var(--shadow-bordeaux-lg-hover); }

    .pain-card h3 {
      font-size: var(--fs-lead);
      margin: 0;
      color: var(--brand-text-strong);
    }

    .pain-team-callout {
      max-width: 900px;
      margin: var(--space-lg) auto var(--space-xl);
      padding: var(--space-sm) var(--space-lg);
      background: var(--blanc);
      border-radius: 1rem;
      box-shadow: var(--shadow-zen);
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      position: relative;
      overflow: hidden;
    }
    .pain-team-callout::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--bordeaux), transparent);
      border-radius: 3px 3px 0 0;
      transition: width 0.6s var(--enso);
    }
    .pain-team-callout:hover::after {
      width: 30%;
    }
    .pain-team-callout .team-icon {
      flex-shrink: 0;
      width: 36px; height: 36px;
      border-radius: 0.75rem;
      background: linear-gradient(135deg, var(--bordeaux-dark), var(--bordeaux-light));
      box-shadow: var(--shadow-bordeaux-xs);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pain-card p {
      font-size: var(--fs-body);
      margin-bottom: 0;
      color: var(--gris);
      line-height: var(--lh-body);
    }

    /* Mode cards (EXPRESS, STANDARD, COMPLET) */
    .mode-card {
      background: var(--blanc);
      border-radius: 1.5rem;
      padding: var(--space-xl) var(--space-lg) var(--space-lg); /* 62/38 golden : xl(55)/lg(34) */
      box-shadow: var(--shadow-zen);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
    }

    .mode-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 0;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, transparent, var(--bleu-canard), transparent);
      transition: height 0.6s var(--enso);
    }

    .mode-card:hover {
      box-shadow: 0 16px 48px rgba(var(--shadow-tint), 0.12);
      transform: translateY(-6px);
    }

    .mode-card:hover::before {
      height: 30%;
    }

    .mode-card .mode-badge {
      display: inline-block;
      color: #fff;
      font-weight: 700;
      font-size: var(--fs-small);
      padding: var(--space-3xs) var(--space-xs);
      border-radius: 0.75rem;
      transition: transform 0.4s var(--enso);
    }

    .mode-card:hover .mode-badge {
      transform: scale(1.08);
    }

    .mode-card.express::before { background: linear-gradient(180deg, transparent, var(--succes), transparent); }
    .mode-card.express .mode-badge { background: var(--succes); }
    .mode-card.standard::before { background: linear-gradient(180deg, transparent, var(--bleu-canard), transparent); }
    .mode-card.standard .mode-badge { background: var(--bleu-canard); }
    .mode-card.complet::before { background: linear-gradient(180deg, transparent, var(--bordeaux), transparent); }
    .mode-card.complet .mode-badge { background: var(--bordeaux); }

    /* Info callouts (accent bar animé, cohérent mode-cards) */
    .info-callout {
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
      transition: box-shadow 0.4s var(--enso);
    }
    .info-callout::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 0;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, transparent, var(--bleu-canard), transparent);
      transition: height 0.6s var(--enso);
    }
    .info-callout:hover::before {
      height: 30%;
    }
    .info-callout:hover {
      box-shadow: 0 8px 24px rgba(var(--shadow-tint), 0.08);
    }
    .info-callout--teal::before {
      background: linear-gradient(180deg, transparent, var(--athanor-clair), transparent);
    }
    .info-callout--orange::before {
      /* nom de classe conserve (present dans le HTML) ; la valeur suit la charte */
      background: linear-gradient(180deg, transparent, var(--warning), transparent);
    }
    /* Carte expandable (ChatGPT prerequis) */
    .expandable-card {
      cursor: pointer;
      overflow: hidden;
      /* Ratio 62/38 (golden) : space-md top (21px) / space-sm bottom (13px) */
      padding: var(--space-md) var(--space-lg) var(--space-sm);
      max-height: 62px;
      transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                  padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.4s var(--enso);
    }
    /* Correction 2026-04-27 : ouverture via :hover (PC) ou classe .is-expanded (mobile/clavier).
       :focus-within retire car la card restait ouverte apres clic interne sur PC. */
    .expandable-card:hover,
    .expandable-card.is-expanded {
      /* Restaure le padding mode-card 62/38 a l'ouverture */
      padding: var(--space-xl) var(--space-lg) var(--space-lg);
      max-height: 400px;
      box-shadow: 0 16px 48px rgba(var(--shadow-tint), 0.12);
    }
    .expandable-card .expandable-header {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
    }
    .expandable-card .expandable-chevron {
      margin-left: auto;
      width: 18px;
      height: 18px;
      color: var(--gris);
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
    }
    .expandable-card:hover .expandable-chevron,
    .expandable-card.is-expanded .expandable-chevron {
      transform: rotate(180deg);
      color: var(--brand-text);
    }
    .expandable-card .expandable-body {
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.08s,
                  transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
      margin-top: var(--space-sm);
    }
    .expandable-card:hover .expandable-body,
    .expandable-card.is-expanded .expandable-body {
      opacity: 1;
      transform: translateY(0);
    }

    /* Capability detail cards (PRODUIT, VERIFIE, ACCOMPAGNE, PROTEGE) */
    .cap-card {
      background: var(--blanc);
      border-radius: 1.5rem;
      padding: var(--space-xl) var(--space-lg) var(--space-lg); /* 62/38 golden */
      box-shadow: var(--shadow-zen);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
    }

    .cap-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 0;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, transparent, var(--bleu-canard), transparent);
      transition: height 0.6s var(--enso);
    }

    .cap-card:hover {
      box-shadow: 0 16px 48px rgba(var(--shadow-tint), 0.12);
      transform: translateY(-6px);
    }

    .cap-card:hover::before {
      height: 30%;
    }

    .cap-card .cap-badge {
      display: inline-block;
      color: #fff;
      font-weight: 700;
      font-size: var(--fs-caption);
      padding: var(--space-3xs) var(--space-xs);
      border-radius: 0.75rem;
      transition: transform 0.4s var(--enso);
    }

    .cap-card:hover .cap-badge {
      transform: scale(1.08);
    }

    .cap-card.produit::before { background: linear-gradient(180deg, transparent, var(--bleu-canard), transparent); }
    .cap-card.produit .cap-badge { background: var(--bleu-canard); }
    .cap-card.verifie::before { background: linear-gradient(180deg, transparent, var(--succes), transparent); }
    .cap-card.verifie .cap-badge { background: var(--succes); }
    .cap-card.accompagne::before { background: linear-gradient(180deg, transparent, var(--bordeaux), transparent); }
    .cap-card.accompagne .cap-badge { background: var(--bordeaux); }
    .cap-card.protege::before { background: linear-gradient(180deg, transparent, var(--noir), transparent); }
    .cap-card.protege .cap-badge { background: var(--noir); }

    .shock-stat {
      text-align: center;
      padding: var(--space-xl) var(--space-lg) var(--space-lg); /* 62/38 golden */
      background: linear-gradient(135deg, var(--blanc) 0%, var(--gris-clair) 100%);
      border-radius: 1.5rem;
      max-width: var(--content-width);
      margin: 0 auto;
      box-shadow: var(--shadow-bordeaux-tint);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
    }
    .shock-stat:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-bordeaux-spread);
    }

    .shock-stat::before {
      display: none;
    }

    .shock-stat .number {
      font-size: var(--fs-h2);
      font-weight: 700;
      color: var(--brand-text);
      letter-spacing: -0.02em;
      transition: transform 0.4s var(--enso);
    }
    .shock-stat:hover .number {
      transform: scale(1.08);
    }

    .shock-stat p {
      font-size: var(--fs-body);
      color: var(--noir);
      margin-bottom: 0;
      line-height: var(--lh-body);
    }

    /* ============================================
       SECTION 3 : SOLUTION
       ============================================ */
    .solution {
      padding: var(--section-padding);
      /* V9.3 C1 : voile Athanor dose (facon hero), section resolution. */
      background:
        radial-gradient(ellipse 72% 46% at 50% 0%, rgba(27, 126, 148, 0.08), transparent 60%),
        var(--surface);
    }

    /* ============================================
       SECTION : PROFILS CIBLES
       ============================================ */
    /* N19 anti-habituation : rompre la sequence de 3 sections blanches consecutives */
    .target-grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: 1fr;
      gap: var(--space-md);
      max-width: 1100px;
      margin: 0 auto var(--space-lg);
    }

    .target-grid > .target-card {
      display: flex;
      flex-direction: column;
    }

    .target-card {
      padding: var(--space-xl) var(--space-lg) var(--space-lg);
      border-radius: 1.5rem;
      background: var(--blanc);
      box-shadow: var(--shadow-zen);
      text-align: center;
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
      position: relative;
      overflow: hidden;
      flex: 1;
    }

    .target-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--bleu-canard), transparent);
      border-radius: 0 0 3px 3px;
      transition: width 0.6s var(--enso);
    }

    .target-card:hover {
      box-shadow: 0 20px 56px rgba(27, 126, 148, 0.14);
      transform: translateY(-8px);
    }

    .target-card:hover::before {
      width: 30%;
    }

    .target-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto var(--space-md);
      border-radius: 1rem;
      background: var(--gradient-brand);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(27, 126, 148, 0.25);
      transition: transform 0.4s var(--enso), box-shadow 0.4s var(--enso);
    }

    .target-card:hover .target-icon {
      transform: scale(1.08);
      box-shadow: 0 12px 32px rgba(27, 126, 148, 0.3);
    }

    .target-card h3 {
      color: var(--brand-text-strong);
      font-size: var(--fs-lead);
      margin-bottom: var(--space-xs);
      font-weight: 700;
      min-height: 2.6em;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.3;
    }

    .target-card p {
      font-size: var(--fs-body);
      color: var(--gris);
      margin-bottom: 0;
      line-height: var(--lh-body);
    }

    .target-metiers {
      text-align: center;
      max-width: 700px;
      margin: var(--space-2xl) auto 0; /* espace nombre d or sous le panneau profils */
      padding: var(--space-xl) var(--space-lg) var(--space-lg); /* 62/38 golden */
      background: linear-gradient(135deg, rgba(27, 126, 148, 0.04), rgba(42, 157, 182, 0.06));
      border-radius: 16px;
      font-size: var(--fs-body);
      color: var(--gris);
      box-shadow: var(--shadow-zen);
    }

    /* ============================================
       SECTION V8 : PROFILE ROUTER
       ============================================ */
    .profile-router {
      padding: var(--space-xl) 0 var(--space-lg);
      /* V9.5 item 5 : mesh dose (Athanor / Citrinitas) */
      background:
        radial-gradient(ellipse 60% 45% at 5% 0%, rgba(42, 157, 182, 0.07), transparent 60%),
        radial-gradient(ellipse 55% 45% at 95% 100%, rgba(212, 160, 32, 0.06), transparent 62%),
        var(--blanc-casse);
    }

    /* === V8 : Mode awaiting-selection SUPPRIME (consensus 10/10 personas) ===
       Le contenu est desormais TOUJOURS visible, sans gating prealable.
       Le profile-router devient un outil de personnalisation OPTIONNEL.
       Decision motivee : 10 personas (formateur, coach, directeur OF,
       consultant Qualiopi, auditeur, responsable qualite, ingenieur peda,
       conseiller OPCO, directrice federation, chercheur sciences educ.)
       ont vote a l'unanimite contre le mode awaiting (paywall cognitif,
       inversion contrat de lecture, friction B2B, non-conformite RGAA,
       contradiction indicateurs 1-2-3 RNQ V9 que Qalia pretend incarner).
       Le selection-prompt et toutes les classes associees sont supprimes.
       La classe .gated-content reste comme container neutre sans masquage. */
    .gated-content {
      opacity: 1;
      pointer-events: auto;
    }
    /* S7 2026-07-11 : règle .selection-prompt supprimée (aucun élément .selection-prompt dans le DOM ni le JS) */

    .profile-router-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-md);
      max-width: 900px;
      margin: 0 auto;
    }

    .profile-card {
      position: relative;
      padding: var(--space-sm) var(--space-sm) var(--space-xs);
      border-radius: 1rem;
      background: var(--blanc);
      border: 2px solid var(--gris-clair);
      text-align: center;
      cursor: pointer;
      transition: border-color 0.3s var(--enso), box-shadow 0.3s var(--enso), transform 0.3s var(--enso);
      font-family: inherit;
      font-size: inherit;
      color: inherit;
      outline: none;
    }

    .profile-card:hover {
      border-color: var(--brand-text);
      box-shadow: 0 6px 20px rgba(27, 126, 148, 0.1);
      transform: translateY(-2px);
    }
    .profile-card:hover .profile-card-icon {
      transform: scale(1.08);
    }

    .profile-card:focus-visible {
      border-color: var(--brand-text);
      box-shadow: 0 0 0 3px rgba(27, 126, 148, 0.25);
    }

    .profile-card[aria-pressed="true"] {
      border-color: var(--brand-text);
      background: rgba(27, 126, 148, 0.04);
      box-shadow: 0 6px 20px rgba(27, 126, 148, 0.15);
    }

    .profile-card[aria-pressed="true"] .profile-card-icon {
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
    }

    .profile-card-icon {
      width: 40px;
      height: 40px;
      margin: 0 auto var(--space-2xs);
      border-radius: 0.75rem;
      background: var(--gris-clair);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-text);
      transition: background 0.3s var(--enso), color 0.3s var(--enso), transform 0.4s var(--enso);
    }

    .profile-card h3 {
      font-size: var(--fs-small);
      font-weight: 700;
      color: var(--brand-text-strong);
      margin-bottom: 2px;
      min-height: 2.6em;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.3;
    }

    .profile-card-tags {
      display: block;
      font-size: var(--fs-caption);
      color: var(--gris);
      line-height: 1.3;
      margin-bottom: 4px;
      min-height: 2.6em;
    }

    .profile-card-cat {
      display: block;
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--brand-text);
      opacity: 0.7;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .profile-card p {
      font-size: var(--fs-small);
      color: var(--gris);
      margin: 0;
      line-height: var(--lh-body);
    }

    .profile-card-check {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--gris-clair);
      display: flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      transition: background 0.3s var(--enso), color 0.3s var(--enso);
    }

    .profile-card[aria-pressed="true"] .profile-card-check {
      background: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
    }

    /* Roles transversaux (pills compactes sous la grille) */
    .profile-router-secondary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      margin-top: var(--space-sm);
      flex-wrap: wrap;
    }

    .profile-secondary-label {
      font-size: var(--fs-caption);
      color: var(--gris);
      font-weight: 500;
    }

    .profile-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 2rem;
      border: 1.5px solid var(--gris-clair);
      background: var(--blanc);
      font-family: inherit;
      font-size: var(--fs-caption);
      font-weight: 500;
      color: var(--brand-text-strong);
      cursor: pointer;
      transition: border-color 0.3s var(--enso), background 0.3s var(--enso), transform 0.3s var(--enso), box-shadow 0.3s var(--enso);
      outline: none;
    }

    .profile-pill:hover {
      border-color: var(--brand-text);
      background: rgba(27, 126, 148, 0.03);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(27, 126, 148, 0.08);
    }

    .profile-pill[aria-pressed="true"] {
      border-color: var(--brand-text);
      background: rgba(27, 126, 148, 0.06);
    }

    .profile-pill-check {
      display: inline-flex;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--gris-clair);
      align-items: center;
      justify-content: center;
      color: transparent;
      transition: background 0.3s var(--enso), color 0.3s var(--enso), transform 0.3s var(--enso);
    }

    .profile-pill:hover .profile-pill-check {
      transform: scale(1.12);
    }

    .profile-pill[aria-pressed="true"] .profile-pill-check {
      background: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
    }

    /* Bandeau défaut intelligent (hybride A+B) */
    .cat-default-banner {
      text-align: center;
      margin-top: var(--space-sm);
      padding: var(--space-xs) var(--space-md);
      background: rgba(27, 126, 148, 0.04);
      border: 1.5px dashed rgba(27, 126, 148, 0.2);
      border-radius: 0.75rem;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
      animation: fadeSlideDown 0.3s ease-out;
    }
    .cat-default-banner p {
      font-size: var(--fs-small);
      color: var(--gris);
      margin: 0;
      line-height: var(--lh-body);
    }
    .cat-default-banner a {
      color: var(--brand-text);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid rgba(27, 126, 148, 0.3);
      transition: border-color 0.3s var(--enso);
    }
    .cat-default-banner a:hover {
      border-bottom-color: var(--brand-text);
    }

    /* Sélecteur de catégorie pour profils transversaux */
    .cat-selector {
      text-align: center;
      margin-top: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      background: rgba(27, 126, 148, 0.04);
      border: 1.5px solid rgba(27, 126, 148, 0.15);
      border-radius: 12px;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
      animation: fadeSlideDown 0.3s ease-out;
    }
    @keyframes fadeSlideDown {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .cat-selector-label {
      font-size: var(--fs-small);
      font-weight: 600;
      color: var(--brand-text);
      margin-bottom: var(--space-xs);
    }
    .cat-selector-options {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      justify-content: center;
    }
    .cat-selector-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border: 1.5px solid var(--gris-clair);
      border-radius: 2rem;
      font-size: var(--fs-small);
      color: var(--gris);
      cursor: pointer;
      transition: border-color 0.3s var(--enso), background 0.3s var(--enso),
                  color 0.3s var(--enso), transform 0.3s var(--enso), box-shadow 0.3s var(--enso);
      user-select: none;
    }
    .cat-selector-chip:hover {
      border-color: var(--brand-text);
      color: var(--brand-text);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(27, 126, 148, 0.08);
    }
    .cat-selector-chip input { display: none; }
    .cat-selector-chip small { opacity: 0.7; }
    .cat-selector-chip:has(input:checked) {
      border-color: var(--brand-text);
      background: rgba(27, 126, 148, 0.08);
      color: var(--brand-text);
      font-weight: 600;
    }
    .cat-selector-hint {
      font-size: var(--fs-caption);
      color: var(--gris);
      margin-top: var(--space-2xs);
    }

    /* D-N5 : Tooltip L6313 */
    .tooltip-trigger {
      position: relative;
      display: inline;
    }
    .tooltip-content {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--tooltip-bg);
      color: var(--tooltip-color);
      border: var(--tooltip-border);
      padding: var(--space-xs) var(--space-sm);
      border-radius: 0.75rem;
      font-size: var(--fs-caption);
      line-height: var(--lh-body);
      width: 280px;
      text-align: left;
      box-shadow: var(--tooltip-shadow);
      z-index: 100;
      pointer-events: none;
    }
    .tooltip-content::after {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-bottom-color: var(--tooltip-arrow-color);
    }
    .tooltip-trigger:hover .tooltip-content,
    .tooltip-trigger:focus .tooltip-content {
      display: block;
    }

    /* ============================================
       V8 : TABS CAT. L6313 (lies entre sections)
       ============================================ */
    .cat-tabs {
      display: flex;
      gap: var(--space-xs);
      justify-content: center;
      margin-bottom: var(--space-lg);
      flex-wrap: wrap;
    }

    /* --- CAT-TABS : système 3 états --- */

    /* État 2 : pertinent, non actif (base) */
    /* N28 touch targets : min-height 44px pour conformite mobile */
    .cat-tab {
      padding: var(--space-xs) var(--space-md);
      min-height: 44px;
      border-radius: 2rem;
      border: 2px solid rgba(27, 126, 148, 0.25);
      background: var(--blanc);
      color: var(--brand-text);
      font-size: var(--fs-small);
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.3s var(--enso), background 0.3s var(--enso),
                  color 0.3s var(--enso), box-shadow 0.3s var(--enso), opacity 0.3s var(--enso);
      white-space: nowrap;
      position: relative;
    }

    .cat-tab:hover {
      border-color: var(--brand-text);
      color: var(--brand-text);
      background: rgba(27, 126, 148, 0.04);
    }

    .cat-tab:focus-visible {
      outline: 3px solid var(--bleu-canard);
      outline-offset: 2px;
    }

    /* État 1 : actif (sélectionné) */
    .cat-tab.active {
      background: var(--bleu-canard);
      border-color: var(--brand-text);
      color: var(--text-on-brand, #ffffff);
      box-shadow: 0 2px 8px rgba(27, 126, 148, 0.30);
    }

    .cat-tab .cat-tab-badge {
      display: inline-block;
      font-size: 0.7em;
      padding: 0.1em 0.4em;
      border-radius: 0.5rem;
      background: color-mix(in srgb, var(--blanc) 20%, transparent);
      margin-left: 0.3em;
      vertical-align: middle;
    }

    .cat-tab:not(.active) .cat-tab-badge {
      background: rgba(27, 126, 148, 0.12);
      color: var(--brand-text);
    }

    /* Atténuation visuelle réversible des onglets hors profil
       (convergence consensus personas : formateur, coach, directeur-of, consultant-qualiopi, auditeur)
       Les onglets restent visibles et cliquables pour préserver la découvrabilité multi-catégories
       (~30% d'OF multi-cat) et ne pas saboter le différenciateur "4 catégories L6313 couvertes". */
    /* N23 WCAG : opacity 0.78 = ratio effectif 3.7:1 pour #5A6A70 sur blanc (AA grand texte) */
    .cat-tab.cat-tab--hidden {
      opacity: 0.78;
      border-style: solid;
      border-color: rgba(90, 106, 112, 0.25);
      color: var(--gris);
    }
    .cat-tab.cat-tab--hidden:hover,
    .cat-tab.cat-tab--hidden:focus-visible {
      opacity: 1;
      border-color: rgba(27, 126, 148, 0.4);
      color: var(--brand-text);
    }
    /* Exception : l'onglet "Pour tous" n'est jamais atténué, il est toujours pertinent */
    .cat-tab[data-cat="1,2,3,4"].cat-tab--hidden {
      opacity: 1;
      border-style: solid;
      color: inherit;
    }

    /* ============================================
       FAQ SHORTCUTS CARD - style "STANDARD" card
       (consensus personas : directeur-of + auditeur demandent
        mise en avant des 3 Q d'élimination décideur en tête de panel)
       ============================================ */
    .faq-shortcuts {
      background: var(--blanc);
      border-radius: 1rem;
      box-shadow: 0 4px 18px rgba(27, 126, 148, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
      padding: var(--space-md) var(--space-lg);
      margin: 0 0 var(--space-lg) 0;
      border: 1px solid rgba(27, 126, 148, 0.08);
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .faq-shortcuts:hover {
      box-shadow: 0 8px 28px rgba(27, 126, 148, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    }
    .faq-shortcuts-header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-bottom: var(--space-sm);
      flex-wrap: wrap;
    }
    .faq-shortcuts-badge {
      display: inline-block;
      background: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 0.4rem 0.9rem;
      border-radius: 9999px;
      white-space: nowrap;
    }
    .faq-shortcuts-meta {
      font-size: var(--fs-small);
      color: var(--gris);
      font-weight: 500;
    }
    .faq-shortcuts-intro {
      font-size: var(--fs-body);
      font-weight: 600;
      color: var(--noir);
      margin: 0 0 var(--space-xs) 0;
      line-height: var(--lh-heading); /* S7 : --lh-title n'existait nulle part (déclaration invalide) */
    }
    .faq-shortcuts-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .faq-shortcuts-list li {
      position: relative;
      padding-left: 1.2rem;
      margin: 0.45rem 0;
      font-size: var(--fs-small);
      line-height: var(--lh-body);
    }
    .faq-shortcuts-list li::before {
      content: '\2192'; /* → */
      position: absolute;
      left: 0;
      color: var(--brand-text);
      font-weight: 700;
    }
    .faq-shortcut-link {
      color: var(--brand-text);
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.15s ease, color 0.15s ease;
    }
    .faq-shortcut-link:hover,
    .faq-shortcut-link:focus-visible {
      border-bottom-color: var(--brand-text);
      color: var(--bleu-dark);
      outline: none;
    }
    /* Animation discrète quand une question est déployée via shortcut */
    @keyframes faqHighlight {
      0% { background: rgba(27, 126, 148, 0.08); }
      100% { background: transparent; }
    }
    @media (prefers-reduced-motion: reduce) {
    }

    /* Solution 1 : dot indicator sur onglets pertinents non visités */
    .cat-tab.cat-tab--unvisited:not(.active)::after {
      content: '';
      position: absolute;
      top: 6px;
      right: 6px;
      width: 8px;
      height: 8px;
      background: var(--bleu-canard);
      border-radius: 50%;
      border: 2px solid var(--blanc);
      animation: dotPulse 1.5s ease 2;
    }
    @keyframes dotPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.4); opacity: 0.7; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cat-tab.cat-tab--unvisited:not(.active)::after {
        animation: none;
      }
    }

    .cat-panel {
      animation: catPanelIn 0.3s ease;
      overflow-anchor: none;
    }

    @keyframes catPanelIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .cat-panel-placeholder {
      text-align: center;
      padding: var(--space-xl) var(--space-md) var(--space-lg); /* 62/38 golden */
      background: linear-gradient(135deg, rgba(27,126,148,0.03), rgba(42,157,182,0.06));
      border-radius: 1rem;
      border: 2px solid rgba(27,126,148,0.15);
    }

    .cat-panel-placeholder p {
      color: var(--gris);
      font-size: var(--fs-body);
      margin-bottom: var(--space-sm);
    }

    /* Alignement gauche pour le contenu enrichi dans les placeholders Cat. 2-4 */
    .cat-panel-placeholder .pipeline { text-align: left; }
    .cat-panel-placeholder .pipeline-body { text-align: left; }
    .cat-panel-placeholder .coverage-table { text-align: left; }
    .cat-panel-placeholder .coverage-source { text-align: left; }
    .cat-panel-placeholder .cap-card { text-align: left; }
    .cat-panel-placeholder > div[style*="grid-template-columns:1fr 1fr"] { text-align: left; }

    /* Fix pipeline-step translucide (Cat 3 étape 5 Jury) : opacité sur le contenu, pas sur le num */
    .pipeline-step--muted.visible {
      opacity: 1;
    }
    .pipeline-step--muted .pipeline-body {
      opacity: 0.5;
    }
    .pipeline-step--muted .pipeline-num {
      opacity: 1;
      position: relative;
      z-index: 2;
    }

    /* ============================================
       SECTION 3 : SOLUTION
       ============================================ */
    .solution-header {
      text-align: center;
      max-width: var(--content-width);
      margin: 0 auto var(--space-md);
    }

    .solution-intro {
      text-align: center;
      font-size: var(--fs-lead);
      max-width: 650px;
      margin: 0 auto var(--space-sm);
    }

    .steps-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-lg);
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .step-card {
      text-align: center;
      padding: var(--space-lg) var(--space-lg) var(--space-md); /* 62/38 golden : lg(34)/md(21) */
      background: var(--blanc);
      border-radius: 1.5rem;
      box-shadow: 0 2px 8px rgba(var(--shadow-tint), 0.03);
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      box-shadow: var(--shadow-zen);
    }

    .step-card::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--bleu-canard), transparent);
      border-radius: 3px 3px 0 0;
      transition: width 0.6s var(--enso);
    }

    .step-card p {
      flex: 1;
      line-height: var(--lh-body);
    }

    .step-card:hover {
      box-shadow: 0 12px 32px rgba(27, 126, 148, 0.08);
      transform: translateY(-4px);
    }

    .step-card:hover::before {
      width: 30%;
    }

    .step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      border-radius: 1.5rem;
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      font-size: var(--fs-h2);
      font-weight: 700;
      margin-bottom: var(--space-sm);
      box-shadow: 0 8px 24px rgba(27, 126, 148, 0.25);
      transition: transform 0.4s var(--enso);
    }

    .step-number--valid {
      background: linear-gradient(135deg, var(--succes), var(--succes-light));
      box-shadow: 0 8px 24px rgba(58, 138, 106, 0.25);
    }

    .step-number.u-gradient-bordeaux {
      box-shadow: var(--shadow-bordeaux-lg);
    }

    .step-card:hover .step-number {
      transform: scale(1.1);
      box-shadow: 0 12px 32px rgba(27, 126, 148, 0.35);
    }

    .step-label {
      display: block;
      font-size: var(--fs-caption);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--gris);
      margin-bottom: var(--space-xs);
    }

    .step-connector {
      display: none;
    }

    .step-card h3 {
      color: var(--brand-text-strong);
      font-size: var(--fs-h3);
      font-weight: 600;
      margin-bottom: var(--space-xs);
    }

    .step-card .step-time {
      display: inline-block;
      background: linear-gradient(135deg, rgba(27, 126, 148, 0.08), rgba(42, 157, 182, 0.12));
      color: var(--brand-text);
      font-size: var(--fs-small);
      font-weight: 700;
      padding: var(--space-2xs) var(--space-sm);
      border-radius: 0.75rem;
      margin-top: auto;
      box-shadow: var(--shadow-zen);
      white-space: nowrap;
    }

    /* ============================================
       SECTION 3B : CE QUE FAIT Qalia (PRODUCTIONS)
       ============================================ */
    .productions {
      padding: var(--section-padding);
      background: var(--blanc);
    }

    .productions-header {
      text-align: center;
      max-width: var(--content-width);
      margin: 0 auto var(--space-lg);
    }

    .productions-header p {
      font-size: var(--fs-lead);
      color: var(--gris);
      line-height: var(--lh-body);
    }

    /* Pipeline stepper */
    .pipeline {
      max-width: 1040px;
      margin: 0 auto var(--space-lg);
    }

    .pipeline-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }

    .pipeline-steps::before {
      content: '';
      position: absolute;
      left: 24px;
      top: var(--bar-top, 40px);
      bottom: var(--bar-bottom, 40px);
      width: 2px;
      background: linear-gradient(180deg, var(--bleu-canard), var(--bleu-light), var(--succes));
      border-radius: 2px;
    }

    .pipeline-step {
      display: flex;
      align-items: flex-start;
      gap: var(--space-md);
      padding: var(--space-md) 0;
      position: relative;
      z-index: 1;
    }

    .pipeline-num {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      font-size: var(--fs-body);
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(27, 126, 148, 0.25);
      transition: transform 0.3s var(--enso), box-shadow 0.3s var(--enso);
    }

    .pipeline-step:hover .pipeline-num {
      transform: scale(1.1);
      box-shadow: 0 6px 20px rgba(27, 126, 148, 0.35);
    }

    .pipeline-num.u-gradient-bordeaux {
      box-shadow: var(--shadow-bordeaux-md);
    }

    .pipeline-step:last-child .pipeline-num {
      /* 2026-07-27 : l'arrêt clair --succes-light ne donnait que 4,03:1 avec le
         chiffre blanc. Aplat --succes : 8,76:1. Sur une pastille de 44 px le
         dégradé n'était de toute façon pas perceptible. */
      background: var(--succes);
      box-shadow: 0 4px 16px rgba(58, 138, 106, 0.25);
    }

    .pipeline-body {
      flex: 1;
      min-width: 0;
    }

    .pipeline-body h3 {
      font-size: var(--fs-lead);
      color: var(--brand-text-strong);
      margin-bottom: var(--space-3xs);
      font-weight: 700;
    }

    .pipeline-body p {
      font-size: var(--fs-body);
      color: var(--gris);
      margin-bottom: var(--space-xs);
      line-height: var(--lh-body);
    }

    .pipeline-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.4s var(--enso), opacity 0.4s var(--enso), margin 0.4s var(--enso);
      margin-top: 0;
    }

    .pipeline-tag {
      display: inline-block;
      font-size: var(--fs-caption);
      font-weight: 700;
      letter-spacing: 0.03em;
      padding: var(--space-3xs) var(--space-xs);
      border-radius: 0.75rem;
      /* 2026-07-28, sprint 2 : étiquette d'indicateur RNQ = badge de validation.
         La doctrine assigne le Citrinitas à ce rôle exact (« badges de validation,
         indicateur conforme »). Elle était en Athanor, couleur de l'opérateur. */
      background: rgba(200, 156, 44, 0.14);
      color: var(--phase-citrinitas);
      box-shadow: var(--shadow-zen);
      white-space: nowrap;
    }
    /* Pipeline-tags : affichage simple (sans descriptions inline) */
    /* Transversal pills : tooltip léger au survol */
    .transversal-pill[data-tip] {
      position: relative;
      cursor: help;
    }
    .transversal-pill[data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--tooltip-bg);
      color: var(--tooltip-color);
      border: var(--tooltip-border);
      box-shadow: var(--tooltip-shadow);
      padding: var(--space-xs) var(--space-sm);
      border-radius: 0.5rem;
      font-size: var(--fs-caption);
      font-weight: 400;
      white-space: normal;
      width: max-content;
      max-width: 260px;
      line-height: var(--lh-body);
      text-align: left;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
      z-index: 100;
    }
    .transversal-pill[data-tip]:hover::after {
      opacity: 1;
    }

    /* Pipeline-tag : tooltip au survol (mêmes règles que transversal-pill) */
    .pipeline-tag[data-tip] {
      position: relative;
      cursor: help;
    }
    .pipeline-tag[data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--tooltip-bg);
      color: var(--tooltip-color);
      border: var(--tooltip-border);
      box-shadow: var(--tooltip-shadow);
      padding: var(--space-xs) var(--space-sm);
      border-radius: 0.5rem;
      font-size: var(--fs-caption);
      font-weight: 400;
      white-space: normal;
      width: max-content;
      max-width: 260px;
      line-height: var(--lh-body);
      text-align: left;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
      z-index: 100;
    }
    .pipeline-tag[data-tip]:hover::after {
      opacity: 1;
    }

    /* 2026-07-28, sprint 2 : ces etiquettes marquent les indicateurs TERRAIN
       (I-30/31/32), hors perimetre documentaire de Qalia. Le vert de succes
       disait l'inverse : un neutre dit « hors perimetre » sans fausse promesse,
       et reste dans les cinq familles. Le nom --green est conserve pour ne pas
       toucher au HTML ; sa valeur est desormais Nigredo. */
    .pipeline-tag--green {
      background: rgba(90, 106, 112, 0.10);
      color: var(--phase-albedo);
      border-color: rgba(90, 106, 112, 0.16);
    }

    /* Toggle indicateurs RNQ */
    .pipeline-indicator-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      margin-bottom: var(--space-md);
    }

    .pipeline-indicator-toggle span {
      font-size: var(--fs-small);
      color: var(--gris);
      font-weight: 500;
      transition: color 0.3s var(--enso), font-weight 0.3s var(--enso);
    }

    .pipeline-indicator-toggle span.active {
      color: var(--brand-text);
      font-weight: 700;
    }

    .indicator-switch {
      position: relative;
      width: 48px;
      height: 26px;
      background: var(--gris-clair);
      border-radius: 9999px;
      cursor: pointer;
      border: 2px solid rgba(27, 126, 148, 0.15);
      padding: 0;
      transition: background 0.3s var(--enso), border-color 0.3s var(--enso), box-shadow 0.3s var(--enso);
    }

    .indicator-switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background: var(--blanc);
      border-radius: 50%;
      box-shadow: 0 1px 4px rgba(0,0,0,0.15);
      transition: transform 0.3s var(--enso);
    }

    .indicator-switch.on::after {
      transform: translateX(22px);
    }

    .indicator-switch.on {
      background: var(--bleu-canard);
      border-color: var(--brand-text);
      box-shadow: 0 0 14px rgba(27, 126, 148, 0.45), 0 0 4px rgba(27, 126, 148, 0.2);
    }

    /* Révéler les tags quand toggle activé */
    .pipeline.show-indicators .pipeline-tags {
      max-height: 60px;
      opacity: 1;
      overflow: visible;
      margin-top: var(--space-2xs);
    }

    .pipeline.show-indicators .pipeline-transversal {
      max-height: 200px;
      opacity: 1;
      overflow: visible;
      margin-top: var(--space-md);
      padding: var(--space-sm) var(--space-md);
    }

    /* V9.2 chantier 1 (2026-07-12) : révélation des tableaux de couverture RNQ restaurée.
       La purge S7 avait retiré cette règle (tables alors hors DOM) ; la réintégration
       V9.1 B5 a restauré le HTML sans la règle, laissant les 4 tableaux inaccessibles
       (max-height:0 inline). Styles inline sortis ici, révélation via .show-indicators. */
    .pipeline-coverage-table {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s ease, opacity 0.4s ease;
    }
    .pipeline.show-indicators .pipeline-coverage-table {
      max-height: 5000px;
      opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) {
      .pipeline-coverage-table { transition: none; }
    }

    /* Animation fade-in progressive pour les étapes */
    .pipeline-step {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.5s var(--enso), transform 0.5s var(--enso);
    }

    .pipeline-step.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Pipeline transversal bar (masqué par défaut, révélé par toggle) */
    .pipeline-transversal {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.5s var(--enso), opacity 0.5s var(--enso), margin 0.5s var(--enso), padding 0.5s var(--enso);
      margin-top: 0;
      padding: 0 var(--space-md);
      background: rgba(27, 126, 148, 0.03);
      box-shadow: var(--shadow-zen);
      border-radius: 1rem;
      text-align: center;
    }

    .transversal-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      margin-bottom: var(--space-sm);
    }

    .transversal-line {
      flex: 1;
      max-width: 60px;
      height: 1px;
      background: rgba(27, 126, 148, 0.2);
    }

    .transversal-label {
      font-size: var(--fs-caption);
      font-weight: 700;
      color: var(--gris);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .transversal-items {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-xs);
    }

    .transversal-pill {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-2xs) var(--space-sm);
      border-radius: 0.75rem;
      font-size: var(--fs-caption);
      color: var(--phase-citrinitas);   /* meme role que .pipeline-tag : badge d'indicateur */
      background: var(--blanc);
      box-shadow: var(--shadow-zen);
      font-weight: 500;
    }

    .transversal-pill strong {
      color: var(--brand-text);
      font-weight: 700;
    }

    /* Output pills */



    .output-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-xs);
    }

    .output-pill {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-xs) var(--space-sm);
      background: var(--surface);
      box-shadow: var(--shadow-zen);
      border-radius: 0.75rem;
      font-size: var(--fs-small);
      color: var(--noir);
      font-weight: 500;
      transition: border-color 0.3s var(--enso), box-shadow 0.3s var(--enso);
    }

    .output-pill:hover {
      border-color: var(--brand-text);
      box-shadow: 0 2px 8px rgba(27, 126, 148, 0.1);
    }

    .output-pill svg {
      flex-shrink: 0;
    }
    .output-pill-text {
      display: flex;
      flex-direction: column;
    }
    .output-pill-desc {
      font-size: 0.7rem;
      color: var(--gris);
      font-weight: 400;
      line-height: 1.3;
      margin-top: 1px;
    }

    /* Qualiopi coverage matrix */
    .qualiopi-bar {
      max-width: 960px;
      margin: var(--space-lg) auto 0; /* V9.6 Photo 5 : separation nette du bloc capacites au-dessus */
      padding: var(--space-lg);
      background: linear-gradient(135deg, rgba(27, 126, 148, 0.05), rgba(42, 157, 182, 0.08));
      box-shadow: var(--shadow-zen);
      border: 1px solid rgba(27, 126, 148, 0.18); /* V9.3 C5 : carte de conformité valorisée, toujours visible */
      border-radius: 1.5rem;
    }
    /* V9.3 C5 : synthèse 7 critères · X indicateurs mise en avant (hors toggle) */
    .qualiopi-bar .qualiopi-stat { font-size: var(--fs-body); flex-wrap: wrap; line-height: var(--lh-body); } /* V9.4 E : 2 lignes max */
    .qualiopi-bar .qualiopi-stat strong { color: var(--brand-text-strong); }

    .qualiopi-bar > h3 {
      font-size: var(--fs-lead);
      color: var(--brand-text-strong);
      margin-bottom: var(--space-md);
      text-align: center;
    }

    /* Screen-reader only utility */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .coverage-table {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      margin-bottom: var(--space-md);
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 var(--space-xs);
    }

    .coverage-table tbody {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    .coverage-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-xs);
      padding: var(--space-xs) var(--space-sm);
      border-radius: 1rem;
      background: var(--blanc);
      box-shadow: var(--shadow-zen);
      transition: border-color 0.3s var(--enso);
    }

    .coverage-row:hover {
      border-color: rgba(27, 126, 148, 0.2);
    }

    .coverage-row th,
    .coverage-row td {
      text-align: left;
      font-weight: normal;
    }

    .coverage-criterion {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
    }

    .coverage-badge {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 0.75rem;
      background: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
      font-size: var(--fs-caption);
      font-weight: 700;
    }

    .coverage-name {
      font-size: var(--fs-small);
      font-weight: 700;
      color: var(--noir);
    }

    .coverage-ind {
      font-size: var(--fs-caption);
      color: var(--gris);
      font-weight: 600;
    }

    .coverage-source {
      font-size: var(--fs-small);
      color: var(--brand-text-strong);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: var(--space-2xs);
    }

    .coverage-source svg {
      flex-shrink: 0;
      color: var(--succes);
    }

    .qualiopi-stat {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--fs-body);
      font-weight: 700;
      /* 2026-07-28, sprint 2 : couverture RNQ atteinte = eveil, phase Citrinitas.
         --succes est un vert de feedback systeme, hors symbolique alchimique. */
      color: var(--phase-citrinitas);
      margin-top: var(--space-xs);
      text-align: center;
      justify-content: center;
      width: 100%;
    }

    .qualiopi-stat svg {
      flex-shrink: 0;
    }

    /* ============================================
       SECTION 5 : TÉMOIGNAGES
       ============================================ */
    .testimonials {
      padding: var(--section-padding);
      /* Fond mesh dose (amendement DS 2026-07-08), meme langage que le hero */
      background:
        radial-gradient(ellipse 58% 46% at 90% 2%, rgba(42, 157, 182, 0.09), transparent 60%),
        radial-gradient(ellipse 55% 48% at 4% 100%, rgba(147, 41, 81, 0.05), transparent 62%),
        var(--blanc);
    }

    .testimonials-header {
      text-align: center;
      max-width: 600px;
      margin: 0 auto var(--space-lg);
    }

    /* S7 2026-07-11 : .testimonials-grid supprimée (orpheline). Règles de base carrousel/track
       créées ici en remplacement des styles inline des 4 carrousels HTML (reconstruction de
       cascade : les overrides .t-single gagnent désormais par spécificité, sans !important). */
    .testimonials-carousel {
      overflow: hidden;
      max-width: 1000px;
      margin: 0 auto;
      position: relative;
      padding: var(--space-xs) 0;
    }
    .testimonials-track {
      display: flex;
      gap: var(--space-md);
      align-items: stretch;
    }

    .testimonial-card {
      /* S7 : min/max-width et flex-shrink étaient inline sur les 14 cartes HTML ;
         déplacés ici pour que .t-single .testimonial-card gagne sans !important */
      min-width: 320px;
      max-width: 360px;
      flex-shrink: 0;
      padding: var(--space-lg) var(--space-lg) var(--space-md); /* 62/38 golden : lg(34)/md(21) */
      background: var(--blanc);
      border-radius: 1.5rem;
      box-shadow: var(--shadow-zen);
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      position: relative;
      overflow: hidden;
    }

    .testimonial-card::before {
      content: '\201C';
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      font-size: var(--fs-h1);
      font-family: var(--font-main);
      color: rgba(27, 126, 148, 0.06);
      line-height: var(--lh-tight);
      pointer-events: none;
    }

    .testimonial-card:hover {
      box-shadow: 0 16px 48px rgba(27, 126, 148, 0.1);
      transform: translateY(-4px);
    }

    /* V9.1 chantier C12 (2026-07-11) : voix des citations et verbatims selon la
       charte 2.8 : DM Serif Display italique (variante ital déjà chargée). Le DS v2
       prescrit Caveat pour les quotes web, mais le tunnel est un système charte 2.8 :
       une 3e famille manuscrite romprait la cohérence. Tranché charte. */
    .q-voice { font-family: 'Caveat', cursive; font-style: normal; letter-spacing: 0.01em; }
    .testimonial-card blockquote {
      font-family: 'Caveat', cursive;
      font-size: 1.3rem;
      font-style: normal;
      color: var(--verbatim-ink); /* V9.3 C3 : verbatim unifié Rubedo */
      line-height: var(--lh-body);
      margin-bottom: 0;
      position: relative;
      padding-left: var(--space-md);
      flex: 1;
    }

    .testimonial-card blockquote::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 0;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, transparent, var(--verbatim-ink), transparent); /* V9.3 C3 : trait verbatim Rubedo */
      transition: height 0.6s var(--enso);
    }

    .testimonial-card:hover blockquote::before {
      height: 30%;
    }

    .testimonial-meta {
      display: flex;
      align-items: flex-start;
      gap: var(--space-sm);
      height: 150px;
      overflow: hidden;
      margin-bottom: var(--space-xs);
    }

    .testimonial-avatar {
      width: 44px;
      height: 44px;
      border-radius: 1rem;
      background: var(--gradient-brand);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-on-brand, #ffffff);
      font-weight: 700;
      font-size: var(--fs-body);
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(27, 126, 148, 0.2);
      transition: transform 0.4s var(--enso), box-shadow 0.4s var(--enso);
    }

    .testimonial-card:hover .testimonial-avatar {
      transform: scale(1.06);
      box-shadow: 0 8px 20px rgba(27, 126, 148, 0.28);
    }

    /* Photo réelle : remplacer le SVG par <img> dans .testimonial-avatar (N02, S2) */
    .testimonial-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
    }
    .testimonial-avatar.has-photo {
      background: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .testimonial-meta .name {
      font-weight: 700;
      color: var(--noir);
      font-size: var(--fs-body);
    }

    .testimonial-meta .role {
      font-size: var(--fs-small);
      color: var(--gris);
    }

    .testimonial-impact {
      margin-top: auto;
      padding: var(--space-sm) var(--space-sm);
      background: linear-gradient(135deg, rgba(27, 126, 148, 0.06), rgba(42, 157, 182, 0.1));
      border-radius: 1rem;
      box-shadow: var(--shadow-zen);
      text-align: center;
      transition: transform 0.4s var(--enso);
      height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .testimonial-card:hover .testimonial-impact {
      transform: scale(1.03);
    }

    .testimonial-impact .impact-metric {
      font-size: var(--fs-lead);
      font-weight: 700;
      /* 2026-07-28, sprint 2 : le chiffre d'impact EST l'accomplissement du
         temoin. Phase Rubedo, pas Athanor (qui designe l'outil). */
      color: var(--phase-rubedo);
      letter-spacing: -0.02em;
      line-height: var(--lh-heading);
    }

    .testimonial-impact .impact-label {
      font-size: var(--fs-small);
      color: var(--gris);
      line-height: var(--lh-body);
      margin-top: var(--space-3xs);
    }

    .testimonial-impact .impact-benefit {
      font-size: var(--fs-small);
      font-weight: 600;
      /* 2026-07-28, sprint 2 : le benefice obtenu est un accomplissement, donc
         Rubedo. Le vert de feedback n'appartient a aucune des cinq familles
         alchimiques : il est reserve aux etats systeme, pas au recit. */
      color: var(--phase-rubedo);
      margin: var(--space-3xs) 0 0;
      line-height: var(--lh-body);
    }

    .testimonial-meta .role {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
    }

    .testimonial-meta .role-line {
      font-size: var(--fs-small);
      color: var(--gris);
      display: block;
    }

    .testimonial-links {
      display: flex;
      gap: var(--space-xs);
      margin-top: 0;
      min-height: 32px; /* V9.10 : slot toujours reserve, meme sans lien (position stable entre slides) */
    }

    /* V9.10 : zones FIXES dans la meta. Ordre canonique des 14 cartes :
       nom / role-localisation / categorie / liens (slot reserve minmax 32px).
       Avec ou sans lien, chaque champ garde la meme position d'une slide a l'autre. */
    .testimonial-meta > div:last-child {
      display: grid;
      grid-template-rows: auto auto auto minmax(32px, auto);
      row-gap: var(--space-3xs);
      align-content: start;
    }

    /* N28 touch targets : min 44px sur mobile pour liens icones */
    .testimonial-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 0.75rem;
      background: rgba(27, 126, 148, 0.1);
      color: var(--brand-text);
      transition: background 0.2s, color 0.2s;
    }

    .testimonial-links a:hover {
      background: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
    }

    .testimonial-links a svg {
      width: 13px;
      height: 13px;
    }

    /* ===== Temoignages : presentation citation unique (facon Lovable, 2026-07-08) =====
       Reutilise le DOM existant (une carte par temoignage) : on affiche une seule
       citation a la fois dans une grande carte-scene, avec points de navigation et fleches.
       Le filtrage par onglet categorie reste intact (une scene par cat-panel). */
    .testimonials-carousel.t-single {
      /* S7 : !important retirés, les styles inline du carrousel ont été déplacés
         vers la règle de base .testimonials-carousel (spécificité 0,2,0 > 0,1,0) */
      overflow: visible;
      max-width: 940px;
      padding: 0;
      margin: 0 auto;
    }
    .testimonials-carousel.t-single .t-stage {
      position: relative;
      background:
        radial-gradient(ellipse 62% 78% at 90% -12%, rgba(42, 157, 182, 0.13), transparent 60%),
        radial-gradient(ellipse 55% 70% at 2% 112%, rgba(147, 41, 81, 0.08), transparent 62%),
        var(--blanc);
      border: 1px solid var(--gris-clair);
      border-radius: 1.5rem;
      box-shadow: 0 1px 2px rgba(21, 32, 30, 0.05), 0 24px 60px -30px rgba(21, 32, 30, 0.28);
      padding: var(--space-xl) var(--space-lg) var(--space-lg);
      min-height: 12rem;
      overflow: hidden;
    }
    .testimonials-carousel.t-single .t-quote-mark {
      position: absolute; top: var(--space-md); right: var(--space-lg);
      width: 58px; height: 58px; color: rgba(27, 126, 148, 0.11);
      pointer-events: none;
    }
    .testimonials-carousel.t-single .testimonials-track {
      display: grid;
      transform: none; /* S7 : le JS neutralise déjà l'inline (track.style.transform = '') */
      gap: 0;
    }
    .testimonials-carousel.t-single .testimonial-card {
      grid-area: 1 / 1;
      min-width: 0; max-width: none; width: 100%; /* S7 : gagne par spécificité (0,3,0) sur le 85vw mobile */
      min-height: 0; /* neutralise le min-height 555px de l ancien layout horizontal */
      background: none; border: none; border-radius: 0; box-shadow: none;
      padding: 0; margin: 0; overflow: visible;
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas: "quote quote" "meta pill";
      align-content: space-between; align-items: start; justify-items: start;
      row-gap: var(--space-lg); column-gap: var(--space-md);
      opacity: 0; pointer-events: none; transform: translateY(10px);
      transition: opacity 0.45s var(--enso), transform 0.45s var(--enso);
    }
    .testimonials-carousel.t-single .testimonial-card.is-active {
      opacity: 1; pointer-events: auto; transform: none; z-index: 1;
    }
    .testimonials-carousel.t-single .testimonial-card::before { display: none; }
    .testimonials-carousel.t-single .testimonial-card:hover { transform: none; box-shadow: none; }
    .testimonials-carousel.t-single blockquote {
      grid-area: quote;
      font-family: 'Caveat', cursive; font-style: normal; /* V9.1b : correction fondateur, quotes en Caveat (DS v2), manuscrit sans italique */
      font-size: clamp(1.35rem, 1rem + 1.5vw, 1.95rem); line-height: 1.32;
      letter-spacing: -0.01em; color: var(--noir);
      padding-left: 0; margin: 0; max-width: 42rem;
    }
    .testimonials-carousel.t-single blockquote::before { display: none; }
    .testimonials-carousel.t-single .testimonial-meta {
      grid-area: meta;
      /* Emplacement fixe reserve (canevas) : hauteur constante, identite calee en haut,
         pour que avatar + nom + pastille soient a la meme position sur tous les temoignages. */
      min-height: 8rem;
      height: auto; overflow: visible; margin: 0; align-items: flex-start;
    }
    .testimonials-carousel.t-single .testimonial-avatar {
      width: 52px; height: 52px; border-radius: 50%;
    }
    .testimonials-carousel.t-single .testimonial-impact {
      grid-area: pill; justify-self: end; margin: 0; height: auto;
      padding: var(--space-2xs) var(--space-md); border-radius: 999px;
      background: rgba(27, 126, 148, 0.08); border: 1px solid rgba(27, 126, 148, 0.16);
      box-shadow: none;
    }
    .testimonials-carousel.t-single .testimonial-card:hover .testimonial-impact { transform: none; }
    .testimonials-carousel.t-single .testimonial-impact .impact-metric { font-size: var(--fs-small); }
    .testimonials-carousel.t-single .testimonial-impact .impact-benefit { display: none; }
    .t-controls {
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-md); max-width: 940px; margin: var(--space-md) auto 0;
    }
    .t-dots { display: flex; align-items: center; gap: 6px; }
    .t-dot {
      height: 6px; width: 6px; padding: 0; border: none; border-radius: 999px;
      background: var(--gris-clair); cursor: pointer;
      transition: width 0.3s var(--enso), background 0.3s var(--enso);
    }
    .t-dot.is-active { width: 28px; background: var(--bleu-canard); }
    .t-arrows { display: flex; gap: var(--space-2xs); }
    .t-arrow {
      width: 40px; height: 40px; border-radius: 50%;
      border: 1px solid var(--gris-clair); background: var(--blanc);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--brand-text); cursor: pointer;
      transition: border-color 0.2s var(--enso), background 0.2s var(--enso);
    }
    .t-arrow:hover { border-color: rgba(27, 126, 148, 0.42); background: rgba(27, 126, 148, 0.05); }
    .t-arrow:focus-visible { outline: 2px solid var(--bleu-canard); outline-offset: 2px; }
    .t-arrow svg { width: 18px; height: 18px; }
    /* Mobile : le pied (auteur + pastille resultat) s empile sous la citation */
    @media (max-width: 640px) {
      .testimonials-carousel.t-single .t-stage { padding: var(--space-lg) var(--space-md); }
      .testimonials-carousel.t-single .testimonial-card {
        grid-template-columns: 1fr;
        grid-template-areas: "quote" "meta" "pill";
        row-gap: var(--space-md);
      }
      .testimonials-carousel.t-single .testimonial-impact { justify-self: start; }
      .testimonials-carousel.t-single .t-quote-mark { width: 44px; height: 44px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .testimonials-carousel.t-single .testimonial-card { transition: none; transform: none; }
    }

    /* ============================================
       SECTION 6 : ROI
       ============================================ */
    .roi {
      padding: var(--section-padding);
      background: var(--surface);
    }
    /* V9.10 (Lovable R3) : la synthese finale est le panneau PRIVILEGIE (asymetrie
       saisie/resultat) : degrade blanc vers Athanor pale (sous 0,15, amendement 2026-07-08),
       bordure Athanor 20 %, halo doux. Le regard atterrit sur le benefice et le CTA. */
    #roi .container {
      background: linear-gradient(160deg, var(--blanc) 0%, rgba(27, 126, 148, 0.06) 100%);
      border: 1px solid rgba(27, 126, 148, 0.2);
      border-radius: 2rem;
      padding: var(--space-xl) var(--space-lg);
      box-shadow: 0 0 0 1px rgba(27, 126, 148, 0.05), 0 20px 60px -24px rgba(27, 126, 148, 0.25);
      max-width: 960px;
    }

    .roi-header {
      text-align: center;
      max-width: var(--content-width);
      margin: 0 auto var(--space-lg);
    }

    .roi-header > p {
      font-size: var(--fs-lead);
      color: var(--gris);
      line-height: var(--lh-body);
    }

    /* --- KPI row (2x2 grid) --- */
    .roi-kpis {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-sm);
      max-width: 900px;
      margin: 0 auto var(--space-lg);
    }
    /* V9.10 : #roi devient carte de SYNTHESE. Sa grille de 4 KPIs repetait les chiffres du
       dashboard (4e et 5e occurrences a l'ecran) : masquee visuellement, mais les ids
       roiKpi* restent dans le DOM et PEUPLES par populatePersonalRoi (contrat + tests R2
       lisent le textContent, pas la visibilite). ROI et payback restent enonces dans le
       sous-titre (seule info non visible en tuiles chez les solos, D35). */
    #roi .roi-kpis { display: none; }

    .roi-kpi {
      text-align: center;
      padding: var(--space-lg) var(--space-md) var(--space-md); /* 62/38 golden : lg(34)/md(21) */
      background: var(--blanc);
      border-radius: 1.5rem;
      box-shadow: var(--shadow-zen);
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
    }

    .roi-kpi:hover {
      box-shadow: 0 12px 36px rgba(27, 126, 148, 0.1);
      transform: translateY(-4px);
    }

    .roi-kpi .kpi-number {
      font-size: var(--fs-h2);
      font-weight: 700;
      color: var(--brand-text);
      letter-spacing: -0.03em;
      line-height: var(--lh-tight);
      transition: transform 0.4s var(--enso);
    }

    .roi-kpi:hover .kpi-number {
      transform: scale(1.08);
    }

    .roi-kpi .kpi-label {
      font-size: var(--fs-body);
      color: var(--gris);
      margin-top: var(--space-2xs);
    }

    .roi-kpi .kpi-detail {
      font-size: var(--fs-small);
      color: var(--brand-text-strong);
      margin-top: var(--space-xs);
      font-weight: 600;
    }

    /* ===== ROI V9 (S3 2026-07-11) ===== */
    /* Bloc d'attente ROI unique (#roiFallback) en tête du simulateur :
       fusion de l'ex-section #roi-fallback et de l'ex-teaser #roiFallback.
       computeResults() le masque à la fin de la simulation (aucun JS modifié). */
    .roi-attente {
      margin-bottom: var(--space-xl);
    }
    .roi-attente > .container + .container {
      margin-top: var(--space-lg);
    }
    .roi-fallback-header {
      text-align: center;
      max-width: var(--content-width);
      margin: 0 auto var(--space-lg);
    }
    .roi-fallback-header p {
      font-size: var(--fs-body);
      color: var(--gris);
      line-height: var(--lh-body);
      max-width: 600px;
      margin: var(--space-xs) auto 0;
    }
    .roi-fallback-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--space-md);
      max-width: 860px;
      margin: 0 auto;
    }
    .roi-fallback-card {
      text-align: center;
      padding: var(--space-md);
      background: var(--blanc);
      border-radius: 1rem;
      border: 1px solid var(--gris-clair);
    }
    .roi-fallback-card .kpi-number {
      font-size: 2rem;
      font-weight: 700;
      color: var(--brand-text);
      margin: 0;
      line-height: 1.2;
    }
    .roi-fallback-card .kpi-label {
      font-size: var(--fs-small);
      color: var(--gris);
      margin: var(--space-2xs) 0 0;
    }

    @media (max-width: 600px) {
      .roi-fallback-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
      }
      .roi-fallback-card {
        padding: var(--space-sm);
      }
      .roi-fallback-card .kpi-number {
        font-size: 1.5rem;
      }
      .roi-attente h3 { /* S6 2026-07-11 : suit la rétrogradation h2 -> h3 */
        font-size: var(--fs-h3);
      }
    }

    /* ===== Fusions V9 (S4 2026-07-11) ===== */
    /* V9.3 C2 (2026-07-12) : histoire en colonne unique (verbatim, auteur, recit,
       schema de la quadrature, baseline, tous centres). L'ancien bandeau grid 2
       colonnes (S4.1) avec ciblage nth-child forcait le nouveau contenu dans une
       colonne de 300 px : cause racine du layout casse signale par le fondateur.
       1 regle = 1 source : le grid et ses nth-child sont supprimes. */
    #histoire .container {
      --content-width: min(760px, 100%);
      display: block;
    }
    #histoire h2 { --space-lg: var(--space-sm); }

    /* S4.2 Problème resserré après départ du callout équipe vers #solution */
    section.problem {
      padding: var(--space-lg) var(--space-md) var(--space-xl);
      /* V9.3 C1 : voile Rubedo dose (la douleur), pendant chromatique de la solution. */
      background: radial-gradient(ellipse 66% 42% at 50% 0%, rgba(147, 41, 81, 0.06), transparent 62%);
    }
    .problem .problem-header { margin-bottom: var(--space-md); }
    .problem .pain-grid { margin-bottom: var(--space-md); }

    /* S4.3 Segmented control partagé (sous-bloc modes + section lucidité) */
    .q-seg {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      margin: 0 auto var(--space-md);
    }
    .q-seg-btn {
      padding: var(--space-2xs) var(--space-sm);
      border-radius: 2rem;
      border: 1.5px solid var(--bleu-canard);
      background: transparent;
      color: var(--brand-text);
      font-family: inherit;
      font-size: var(--fs-small);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.3s var(--enso), color 0.3s var(--enso);
    }
    .q-seg-btn[aria-selected="true"] {
      background: var(--bleu-canard);
      color: #fff;
    }
    /* V9.8 : chaque onglet mode dans sa couleur (Standard reste bleu par defaut). */
    #modeTabExpress[aria-selected="true"] { background: var(--succes); border-color: var(--succes); }
    #modeTabComplet[aria-selected="true"] { background: var(--bordeaux); border-color: var(--bordeaux); }
    /* V9.10 : les onglets du parcours revelent leur couleur A LA LECTURE (IntersectionObserver,
       fonctionne au scroll donc sur mobile) et la GARDENT (.q-seg-armed jamais retiree).
       Meme grammaire chromatique que les onglets documents : Express vert succes,
       Standard bleu Athanor, Complet bordeaux Rubedo (clignotement doc-seg-blink reutilise). */
    #modeTabExpress  { --seg-hint: var(--succes); }
    #modeTabStandard { --seg-hint: var(--bleu-canard); }
    #modeTabComplet  { --seg-hint: var(--bordeaux); }
    .q-seg.q-seg-armed .q-seg-btn:not([aria-selected="true"]) {
      background: color-mix(in srgb, var(--seg-hint, #888) 10%, transparent);
      border-color: color-mix(in srgb, var(--seg-hint, #888) 42%, transparent);
      color: var(--seg-hint, var(--gris));
    }
    @media (prefers-reduced-motion: no-preference) {
      .q-seg.q-seg-armed .q-seg-btn.q-seg-hint { animation: doc-seg-blink 0.85s ease-in-out 2 both; }
    }
    .q-seg-btn:focus-visible {
      outline: 2px solid var(--bleu-canard);
      outline-offset: 2px;
    }
    .q-seg-panel { animation: qSegFade 0.25s var(--enso); }
    @keyframes qSegFade { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .q-seg-btn { transition: none; }
      .q-seg-panel { animation: none; }
    }

    /* S4.4 Sous-bloc modes dans #solution (ancre #modes conservée) */
    .sol-modes {
      margin-top: var(--space-xl);
      scroll-margin-top: 100px;
    }
    .sol-modes .q-seg-panel .mode-card {
      max-width: 640px;
      margin: 0 auto;
    }
    .sol-modes h3,
    .lucidite .q-seg-panel h3 {
      font-family: var(--font-display);
      font-size: var(--fs-h3);
      font-weight: 400;
      letter-spacing: -0.02em;
      color: var(--brand-text);
    }

    /* S4.5 Section lucidité (fusion comparaison + nepasfaire) */
    .lucidite {
      padding: var(--space-xl) var(--space-md);
      /* V9.5 item 5 : mesh dose (Rubedo / Athanor) */
      background:
        radial-gradient(ellipse 55% 45% at 92% 0%, rgba(147, 41, 81, 0.07), transparent 60%),
        radial-gradient(ellipse 55% 45% at 8% 100%, rgba(42, 157, 182, 0.06), transparent 62%),
        var(--blanc);
    }
    #lucidite,
    #comparaison,
    #nepasfaire { scroll-margin-top: 100px; }
    /* V9.1 chantier B7 (2026-07-11) : « Ce que Qalia ne fait pas » sur 2 colonnes
       desktop (6 blocs empilés = défilement trop long ; aucun mot retiré). */
    @media (min-width: 900px) {
      .npf-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } /* V9.10 : 4 blocs -> grille 2x2 equilibree (3 colonnes laissait un orphelin) */
    }
    /* V9.1 chantier B9 (2026-07-11) : équilibre de l'offre solo. La carte unique
       flottait seule au-dessus du déclencheur équipe pleine largeur : avantages
       sur 2 colonnes desktop, carte élargie (inline 680 -> 840 px), hauteur réduite. */
    @media (min-width: 900px) {
      .pricing-card .features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--space-md);
        align-items: start;
      }
    }

    /* --- Cycle Qualiopi --- */
    .roi-cycle {
      max-width: 1000px;
      margin: 0 auto var(--space-lg);
      padding: var(--space-xl) var(--space-lg) var(--space-lg); /* 62/38 golden */
      background: var(--blanc);
      border-radius: 1.5rem;
      box-shadow: var(--shadow-zen);
    }

    .roi-cycle h3 {
      text-align: center;
      color: var(--brand-accent-text);
      margin-bottom: var(--space-xs);
      font-size: var(--fs-h4);
      font-weight: 700;
    }

    .roi-cycle > p {
      text-align: center;
      color: var(--gris);
      font-size: var(--fs-body);
      margin-bottom: var(--space-lg);
    }

    .cycle-items {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--space-md);
    }

    .cycle-item {
      background: var(--blanc);
      border-radius: 1.5rem;
      padding: var(--space-xl) var(--space-lg) var(--space-lg); /* 62/38 golden */
      box-shadow: var(--shadow-zen);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
    }

    .cycle-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 0;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, transparent, var(--bordeaux), transparent);
      transition: height 0.6s var(--enso);
    }

    .cycle-item:hover {
      box-shadow: 0 16px 48px rgba(var(--shadow-tint), 0.12);
      transform: translateY(-6px);
    }

    .cycle-item:hover::before {
      height: 30%;
    }

    .cycle-item .cycle-freq {
      display: inline-block;
      font-size: var(--fs-small);
      font-weight: 700;
      color: var(--text-on-brand, #ffffff);
      background: var(--bordeaux);
      padding: var(--space-3xs) var(--space-xs);
      border-radius: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
      margin-bottom: var(--space-2xs);
      transition: transform 0.4s var(--enso);
    }

    .cycle-item:hover .cycle-freq {
      transform: scale(1.08);
    }

    .cycle-item .cycle-text {
      display: block;
      font-size: var(--fs-small);
      color: var(--noir);
      line-height: var(--lh-body);
    }

    .cycle-item .cycle-text strong {
      display: block;
      color: var(--noir);
      font-weight: 700;
      font-size: var(--fs-body);
      margin-bottom: var(--space-3xs);
    }

    .cycle-item .cycle-text br + span,
    .cycle-item .cycle-text br ~ * {
      color: var(--gris);
    }

    .cycle-bottom {
      text-align: center;
      margin-top: var(--space-lg);
      padding: var(--space-md) var(--space-lg) var(--space-sm); /* 62/38 golden : md(21)/sm(13) */
      background: linear-gradient(135deg, rgba(147, 41, 81, 0.04), rgba(147, 41, 81, 0.08));
      border-radius: 16px;
      box-shadow: var(--shadow-zen);
      font-size: var(--fs-lead);
      color: var(--brand-accent-text);
      font-weight: 700;
    }

    .cycle-item--highlight {
      background: rgba(147, 41, 81, 0.04);
      transition: all 0.4s var(--enso);
    }

    .cycle-item--highlight::before {
      height: 30%;
    }

    .cycle-item--highlight .cycle-freq {
      box-shadow: var(--shadow-bordeaux-sm);
    }

    /* --- Comparison bars --- */
    .comparison {
      max-width: 700px;
      margin: 0 auto;
    }

    .comparison > h3 {
      text-align: center;
      margin-bottom: var(--space-xs);
    }

    .comparison-bar {
      margin-bottom: var(--space-md);
    }

    .comparison-bar .label {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-body);
      margin-bottom: var(--space-2xs);
      font-weight: 500;
    }

    .comparison-bar .bar {
      height: 14px;
      border-radius: 0.5rem;
      background: var(--gris-clair);
      overflow: hidden;
    }

    .comparison-bar .bar-fill {
      height: 100%;
      border-radius: 0.5rem;
      width: 0;
      transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .comparison-bar.diy .bar-fill {
      background: linear-gradient(90deg, var(--erreur), var(--bordeaux));
    }
    .comparison-bar.diy.bar-animated .bar-fill { width: 100%; }

    .comparison-bar.ia-generique .bar-fill {
      background: linear-gradient(90deg, var(--erreur), var(--bordeaux));
    }
    .comparison-bar.ia-generique.bar-animated .bar-fill { width: 70%; }

    .comparison-bar.coaching .bar-fill {
      background: linear-gradient(90deg, var(--erreur), var(--bordeaux));
    }
    .comparison-bar.coaching.bar-animated .bar-fill { width: 35%; }

    .comparison-bar.qalia .bar-fill {
      min-width: 0;
      background: linear-gradient(90deg, var(--bleu-canard), var(--bleu-light));
    }
    .comparison-bar.qalia.bar-animated .bar-fill { width: 6%; min-width: 20px; }

    .comparison-bar.qalia .label {
      color: var(--brand-text);
      font-weight: 700;
    }

    .comparison-bar .bar-detail {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: var(--fs-small);
      color: var(--gris);
      margin-top: var(--space-2xs);
    }

    .comparison-bar .bar-detail a {
      color: var(--brand-text);
      text-decoration: underline;
      font-size: var(--fs-caption);
    }

    /* Barre ChatGPT (rouge erreur = conformit\u00e9 non v\u00e9rifi\u00e9e, coh\u00e9rent \u00e9cran/PDF) */
    .comparison-bar.chatgpt .bar-fill {
      background: linear-gradient(90deg, #A83232, #C94040);
    }
    .comparison-bar.chatgpt .label > span:first-child {
      color: var(--erreur);
      font-weight: 600;
    }

    /* Badges conformité sur barres */
    .bar-conformity {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      font-size: var(--fs-caption);
      color: var(--gris);
      margin-top: var(--space-3xs);
    }
    .bar-conformity--success {
      color: var(--succes);
      font-weight: 600;
    }

    .comparison-savings {
      text-align: center;
      margin-top: var(--space-lg);
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden : md(21)/sm(13) */
      background: rgba(27, 126, 148, 0.04);
      border-radius: 1rem;
      box-shadow: var(--shadow-zen);
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
    }

    .comparison-savings:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(27, 126, 148, 0.1);
    }

    .comparison-savings .savings-number {
      font-size: var(--fs-h2);
      font-weight: 700;
      color: var(--brand-text);
      letter-spacing: -0.02em;
      transition: transform 0.4s var(--enso);
    }

    .comparison-savings:hover .savings-number {
      transform: scale(1.08);
    }

    .comparison-savings .savings-text {
      font-size: var(--fs-body);
      color: var(--gris);
      margin-top: var(--space-3xs);
    }

    @media (min-width: 768px) {
      .roi-kpis { grid-template-columns: repeat(2, 1fr); }
      .cycle-items { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
      /* 5 items en 2 cols = 4+1 : centrer le dernier orphelin */
      .cycle-item:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
      .cycle-item .cycle-text br { display: inline; }
    }

    /* ============================================
       SECTION 8 : TARIFS
       ============================================ */
    .pricing {
      padding: var(--section-padding);
      background: linear-gradient(160deg, var(--noir) 0%, #2a2a2a 100%);
      color: var(--text-on-brand, #ffffff);
    }

    .pricing h2 {
      color: var(--text-on-brand, #ffffff);
      text-align: center;
    }

    .pricing-header {
      text-align: center;
      margin-bottom: var(--space-lg);
    }

    .pricing-header p {
      color: var(--text-on-brand, #ffffff);
    }

    .pricing-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      gap: var(--space-sm);
      margin-bottom: var(--space-lg);
      flex-wrap: wrap;
    }

    .pricing-toggle span {
      font-size: var(--fs-body);
      color: color-mix(in srgb, var(--blanc) 90%, transparent);
      font-weight: 500;
      transition: color 0.3s var(--enso);
    }

    .pricing-toggle span.active {
      color: var(--text-on-brand, #ffffff);
      font-weight: 700;
    }

    .toggle-switch {
      position: relative;
      width: 56px;
      height: 30px;
      background: color-mix(in srgb, var(--blanc) 15%, transparent);
      border-radius: 9999px;
      cursor: pointer;
      border: none;
      padding: 0;
      transition: background 0.3s var(--enso), box-shadow 0.3s var(--enso);
    }

    .toggle-switch::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      background: var(--blanc);
      border-radius: 50%;
      transition: transform 0.3s var(--enso);
    }

    .toggle-switch.annual::after {
      transform: translateX(26px);
    }

    .toggle-switch.annual {
      background: var(--bleu-canard);
      box-shadow: 0 0 14px rgba(27, 126, 148, 0.45), 0 0 4px rgba(27, 126, 148, 0.2);
    }

    .pricing-badge-annual {
      display: block;
      width: 100%;
      text-align: center;
      order: -1;
      margin-bottom: var(--space-sm);
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.3s var(--enso), transform 0.3s var(--enso);
    }

    .pricing-toggle.annual .pricing-badge-annual {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .pricing-badge-annual span {
      display: inline-block;
      background: var(--succes);
      color: var(--text-on-brand, #ffffff);
      font-size: var(--fs-small);
      font-weight: 700;
      padding: var(--space-2xs) var(--space-sm);
      border-radius: 0.75rem;
      letter-spacing: 0.02em;
    }

    .pricing-toggle.annual .pricing-badge-annual span {
      background: var(--succes);
      box-shadow: 0 2px 8px rgba(58, 138, 106, 0.3);
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
      max-width: 1000px;
      margin: 0 auto var(--space-lg);
    }

    .pricing-card {
      padding: var(--space-lg) var(--space-lg) var(--space-md); /* 62/38 golden : lg(34)/md(21) */
      border-radius: 1.5rem;
      
      background: color-mix(in srgb, var(--blanc) 4%, transparent);
      transition: border-color 0.3s var(--enso), transform 0.3s var(--enso);
      text-align: center;
    }

    .pricing-card:hover {
      transform: translateY(-4px);
    }

    .pricing-card.popular {
      background: rgba(27, 126, 148, 0.12);
      position: relative;
      box-shadow: 0 0 40px rgba(27, 126, 148, 0.15), var(--shadow-zen);
    }

    .pricing-card.popular::before {
      content: 'Offre de lancement';
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      font-size: var(--fs-caption);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 0.75rem;
    }

    /* Meme retour, meme regle : la carte de l offre est teintee Athanor
       (rgba(27,126,148,.12) sur le fond sombre de la section) et le bouton portait
       le degrade de marque : 2,6:1, sous les 3:1. Le CTA de l offre est le geste
       le plus decisif de la page, c est celui qui doit se detacher le plus. */
    .pricing-card.popular .btn-primary {
      background: var(--text-on-brand, #ffffff);
      color: var(--bleu-dark);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.38), 0 0 26px rgba(42, 157, 182, 0.18);
    }

    .pricing-card.popular .btn-primary:hover {
      background: color-mix(in srgb, var(--text-on-brand, #ffffff) 92%, var(--bleu-canard));
      color: var(--bleu-dark);
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.46), 0 0 34px rgba(42, 157, 182, 0.26);
    }

    .pricing-card .tier-name {
      font-size: var(--fs-h4);
      font-weight: 700;
      color: var(--text-on-brand, #ffffff);
      margin-bottom: var(--space-3xs);
    }

    .pricing-card .price {
      font-size: var(--fs-h2);
      font-weight: 700;
      color: var(--text-on-brand, #ffffff);
      line-height: var(--lh-heading);
    }

    /* Unité golden ratio (€, h, min, /mois, /an)
       Plancher de lisibilité : le ratio 0.618 se multipliait quand le parent
       était déjà en caption (« 77 € HT/mois » du hero tombait à 6,9 px).
       39 unités étaient sous 12 px, dont la mention tarifaire. Le max()
       ne touche que ces cas : au-dessus d'un parent de 19,4 px, 0.618em
       l'emporte et le rendu reste identique. */
    .u { font-size: max(0.618em, 0.75rem); }

    /* Mesure de lecture des notes centrées (source unique).
       Trois notes coulaient sur toute la largeur du conteneur, la pire à
       163 caractères sur UNE ligne de 1040 px (norme de lisibilité 45-75).
       Plafond en ch : il suit la taille de police, donc reste juste aussi
       bien sur une mention en 11 px que sur du corps en 16 px.
       margin-inline auto : ces trois blocs sont centrés, le plafond ne
       les décale donc pas. Ne pas étendre la règle à des blocs alignés
       à gauche sans revérifier leur position. */
    .pipeline-coverage-table > p,
    .shock-stat > p,
    .pricing .container > div > p { max-width: 56ch; margin-inline: auto; }

    .pricing .price-annual {
      display: none;
    }

    .pricing .price-monthly {
      display: block;
    }

    .pricing.annual .price-annual {
      display: block;
    }

    .pricing.annual .price-monthly {
      display: none;
    }

    /* Variantes texte inline pour toggle mensuel/annuel (global via body.billing-annual)
       Permet d'utiliser .price-monthly-txt / .price-annual-txt n'importe ou dans la page
       (pricing, simulateur, sticky CTA, FAQ, final-cta, etc.) */
    .price-annual-txt { display: none; }
    body.billing-annual .price-annual-txt { display: inline; }
    body.billing-annual .price-monthly-txt { display: none; }

    .pricing-card .btn {
      margin-top: var(--space-md);
      width: 100%;
    }

    .pricing-card .features {
      margin-top: var(--space-md);
      text-align: left;
      list-style: none;
      columns: 2;
      column-gap: var(--space-md);
    }

    .pricing-card .features li {
      font-size: var(--fs-small);
      color: var(--text-on-brand, #ffffff);
      padding: var(--space-2xs) 0;
      padding-left: var(--space-md);
      position: relative;
      break-inside: avoid;
    }

    .pricing-card .features li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--succes);
      font-weight: 700;
    }

    .pricing-footer {
      text-align: center;
      color: color-mix(in srgb, var(--blanc) 90%, transparent);
      font-size: var(--fs-caption);
    }

    .pricing-footer a {
      color: var(--text-on-brand, #ffffff);
      text-decoration: underline;
    }

    /* ===== Tarifs V9 (S1 2026-07-11) =====
       Refonte S1 : carte unique compacte, modale ressources Notion, bloc multi-licences
       repliable avec onglets paliers. Tokens et alias existants uniquement. */
    .pricing-feature-more {
      background: none;
      border: none;
      padding: 0;
      color: rgba(42, 157, 182, 1);
      font-size: var(--fs-caption);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }
    /* 2026-07-28, sprint 8 : la section tarifaire porte un degrade SOMBRE fige
       (#1A1A1A -> #2A2A2A !important), identique dans les 4 themes. Ses 266 textes
       sont donc TOUS sur fond sombre (mesure : 0 sur fond clair). Les encres
       semantiques doivent rester "sur sombre" au lieu de suivre le theme, sinon
       --brand-text s assombrit en clair et les 38 coches du tableau comparatif
       tombent a 2,3:1. Meme patron que le re-gel des encres du pied de page. */
    .pricing {
      /* Valeurs LITTERALES : --bleu-light et --rubedo-300 sont eux-memes redefinis
         par theme (noir en contraste eleve), donc inutilisables face a un fond fige. */
      --pricing-ink: oklch(73% 0.100 220);
      --brand-text: var(--pricing-ink);
      --brand-text-strong: oklch(82% 0.075 220);
      --brand-accent-text: oklch(74% 0.115 15);
    }
    .pricing-feature-more:hover { color: var(--pricing-ink); }
    .pricing-feature-more:focus-visible { outline: 2px solid var(--text-on-brand, #ffffff); outline-offset: 2px; }

    .team-fold {
      border: 2px solid var(--bleu-canard);
      border-radius: 16px;
      background: rgba(27, 126, 148, 0.08);
      max-width: var(--max-width);
      margin-left: auto;
      margin-right: auto;
      font-size: var(--fs-small);
      color: color-mix(in srgb, var(--blanc) 90%, transparent);
    }
    .team-fold__trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      padding: var(--space-md) 2rem;
      color: var(--text-on-brand, #ffffff);
      font-size: var(--fs-lead);
      text-align: left;
      border-radius: 14px;
    }
    .team-fold__trigger:focus-visible { outline: 3px solid var(--text-on-brand, #ffffff); outline-offset: 3px; }
    .team-fold__title {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-2xs);
    }
    .team-fold__subtitle {
      color: color-mix(in srgb, var(--blanc) 85%, transparent);
      font-size: var(--fs-body);
    }
    /* V9.1 chantier A4 (2026-07-11) : la regle globale strong { color: var(--noir) }
       rendait le titre du declencheur equipe noir sur le fond sombre de la section
       tarifs (stay-dark). Couleur claire explicite, portee limitee au declencheur. */
    .team-fold__trigger strong { color: var(--text-on-brand, #ffffff); }
    .team-fold__chevron { flex-shrink: 0; transition: transform 0.3s var(--enso); }
    .team-fold__trigger[aria-expanded="true"] .team-fold__chevron { transform: rotate(180deg); }
    .team-fold__panel { padding: 0 2rem var(--space-md); text-align: center; }
    .team-fold__panel[hidden] { display: none; }

    .team-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-2xs);
      margin: var(--space-sm) 0 var(--space-md);
    }
    .team-tab {
      border: 1px solid color-mix(in srgb, var(--blanc) 25%, transparent);
      background: color-mix(in srgb, var(--blanc) 6%, transparent);
      color: color-mix(in srgb, var(--blanc) 85%, transparent);
      border-radius: 9999px;
      padding: var(--space-2xs) var(--space-sm);
      font-size: var(--fs-small);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s var(--enso), color 0.2s var(--enso), border-color 0.2s var(--enso);
    }
    .team-tab[aria-selected="true"] {
      background: var(--bleu-canard);
      border-color: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
    }
    .team-tab:focus-visible { outline: 3px solid var(--text-on-brand, #ffffff); outline-offset: 2px; }
    .team-tabpanel { animation: teamPanelIn 0.35s var(--enso); }
    /* V9.5 item 7 (2026-07-12) : cartes paliers en 2 colonnes (comme la carte Solo) pour reduire la hauteur. */
    @media (min-width: 700px) {
      [data-teamcard] > ul { column-count: 2; column-gap: var(--space-lg); }
      [data-teamcard] > ul > li { break-inside: avoid; }
    }
    .team-tabpanel[hidden] { display: none; animation: none; }
    @keyframes teamPanelIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }

    /* Modale Espace Client Notion : panneau sombre (chips de la carte inchangés) */
    .pricing-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-md);
      background: rgba(21, 32, 30, 0.55);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.28s var(--enso), visibility 0s linear 0.28s;
    }
    .pricing-modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.28s var(--enso);
    }
    .pricing-modal__panel {
      position: relative;
      width: min(560px, 100%);
      max-height: 86vh;
      overflow-y: auto;
      background: linear-gradient(160deg, var(--noir) 0%, #2a2a2a 100%);
      color: var(--text-on-brand, #ffffff);
      border: 1px solid color-mix(in srgb, var(--blanc) 14%, transparent);
      border-radius: 1rem;
      padding: var(--space-lg) var(--space-lg) var(--space-md);
      box-shadow: 0 0 40px rgba(27, 126, 148, 0.15), 0 24px 60px -18px rgba(21, 32, 30, 0.45);
      transform: translateY(14px) scale(0.985);
      transition: transform 0.32s var(--enso);
    }
    .pricing-modal.is-open .pricing-modal__panel { transform: none; }
    .pricing-modal__close {
      position: absolute;
      top: var(--space-sm);
      right: var(--space-sm);
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 50%;
      background: color-mix(in srgb, var(--blanc) 12%, transparent);
      color: var(--text-on-brand, #ffffff);
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .pricing-modal__close:hover { background: rgba(42, 157, 182, 0.25); }
    .pricing-modal__close:focus-visible { outline: 2px solid var(--text-on-brand, #ffffff); outline-offset: 2px; }
    .pricing-modal__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 0.8rem;
      background: color-mix(in srgb, var(--blanc) 8%, transparent);
      margin-bottom: var(--space-xs);
    }
    .pricing-modal__title {
      font-family: var(--font-display);
      font-weight: 400;
      color: var(--text-on-brand, #ffffff);
      font-size: var(--fs-h3);
      line-height: 1.15;
      margin: 0 0 var(--space-xs);
      padding-right: var(--space-lg);
    }
    .pricing-modal__lead {
      font-size: var(--fs-body);
      color: color-mix(in srgb, var(--blanc) 80%, transparent);
      line-height: var(--lh-body);
      margin: 0 0 var(--space-sm);
    }

    @media (prefers-reduced-motion: reduce) {
      .pricing-modal, .pricing-modal__panel { transition: opacity 0.01s linear; }
      .pricing-modal__panel { transform: none; }
      .team-tabpanel { animation: none; }
      .team-fold__chevron { transition: none; }
    }
    @media (max-width: 767px) {
      .team-fold__trigger { font-size: var(--fs-body); padding: var(--space-sm); }
      .team-fold__panel { padding: 0 var(--space-sm) var(--space-sm); }
    }

    /* Cibles tactiles mobile (source unique de la règle des 44 px).
       Mesuré au doigt : ces contrôles tombaient à 27-32 px de haut.
       Les puces et flèches de carrousel (.t-dot, .t-arrow) sont
       VOLONTAIREMENT hors de cette règle : espacées de 12 px, une zone
       étendue à 44 px se chevaucherait et capterait le clic du voisin.
       Leur mise à niveau demande de les espacer, arbitrage de design. */
    @media (max-width: 767px) {
      .sol-mode,
      .profile-pill,
      .doc-seg-btn,
      .cat-tab { min-height: 44px; }
    }

    /* ============================================
       SECTION 9 : FAQ
       ============================================ */
    .faq {
      padding: var(--section-padding);
      background: var(--surface);
    }

    .faq-header {
      text-align: center;
      max-width: 600px;
      margin: 0 auto var(--space-lg);
    }

    .faq-list {
      max-width: var(--content-width);
      margin: 0 auto;
    }

    .faq-category {
      font-size: var(--fs-caption);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--brand-text);
      margin: var(--space-md) 0 var(--space-2xs) 0;
      padding-bottom: var(--space-2xs);
      background: rgba(27, 126, 148, 0.06);
      padding: var(--space-2xs) var(--space-sm);
      border-radius: 0.75rem;
      opacity: 0.8;
    }

    .faq-category:first-child {
      margin-top: 0;
    }

    .faq-item {
      margin-bottom: var(--space-3xs);
      /* Compense la navbar fixe (71px) + respiration (19px) pour scrollIntoView
         déclenché par les liens .faq-shortcut-link. Le navigateur applique cet
         offset automatiquement quand on cible l'élément via scroll programmatique
         ou ancre #id. */
      scroll-margin-top: 90px;
      border-left: 3px solid transparent;
      padding-left: var(--space-xs);
      transition: border-color 0.3s var(--enso);
    }

    .faq-item.open {
      border-left-color: var(--brand-text);
    }

    .faq-question {
      width: 100%;
      background: none;
      border: none;
      border-radius: 0.5rem;
      text-align: left;
      padding: var(--space-sm) var(--space-xs);
      margin: 0 calc(-1 * var(--space-xs));
      font-family: var(--font-main);
      font-size: var(--fs-body);
      font-weight: 600;
      color: var(--noir);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-sm);
      transition: color 0.2s var(--enso), background 0.2s var(--enso);
    }

    .faq-question:hover {
      color: var(--brand-text);
      background: rgba(27, 126, 148, 0.04);
    }

    .faq-question .chevron {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      transition: transform 0.3s var(--enso);
    }

    .faq-item.open .chevron {
      transform: rotate(180deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s var(--enso), padding 0.3s var(--enso);
    }

    .faq-item.open .faq-answer {
      max-height: 2000px;
      padding-bottom: var(--space-sm);
    }

    .faq-answer p {
      color: var(--gris);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
    }

    /* ===== FAQ V9 (S2 2026-07-11) =====
       Groupes repliables par catégorie : en-tête cliquable (h3 conservé),
       badge de comptage, corps masqué par défaut. Alias thème existants
       uniquement (var(--blanc), var(--gris-clair), rgba Athanor), sans surcharge de priorité. */
    .faq-group {
      margin-bottom: var(--space-2xs);
    }
    .faq-group .faq-category {
      margin: 0;
      padding: 0;
      background: none;
      opacity: 1;
    }
    .faq-group-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      width: 100%;
      border: none;
      cursor: pointer;
      text-align: left;
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      color: inherit;
      background: rgba(27, 126, 148, 0.06);
      padding: var(--space-xs) var(--space-sm);
      border-radius: 0.75rem;
      transition: background 0.2s var(--enso);
    }
    .faq-group-toggle:hover {
      background: rgba(27, 126, 148, 0.12);
    }
    .faq-group-toggle:focus-visible {
      outline: 2px solid var(--bleu-canard);
      outline-offset: 2px;
    }
    .faq-group-label {
      flex: 1 1 auto;
    }
    .faq-group-count {
      flex-shrink: 0;
      font-size: var(--fs-caption);
      font-weight: 600;
      letter-spacing: normal;
      text-transform: none;
      color: var(--brand-text);
      background: var(--blanc);
      border: 1px solid var(--gris-clair);
      border-radius: 9999px;
      padding: 2px 10px;
    }
    .faq-group-toggle .chevron {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      transition: transform 0.3s var(--enso);
    }
    .faq-group-toggle[aria-expanded="true"] .chevron {
      transform: rotate(180deg);
    }
    .faq-group-body {
      padding-top: var(--space-2xs);
    }
    .faq-group-body[hidden] {
      display: none;
    }
    .faq-footer-cta {
      max-width: var(--content-width);
      margin: var(--space-md) auto 0;
      text-align: center;
    }
    @media (prefers-reduced-motion: reduce) {
      .faq-group-toggle,
      .faq-group-toggle .chevron {
        transition: none;
      }
    }

    /* ============================================
       SECTION 10 : CTA FINAL
       ============================================ */
    .final-cta {
      padding: var(--space-3xl) var(--space-md);
      background: transparent;
      text-align: center;
    }

    .final-cta .container {
      /* S6 2026-07-11 : mesh sombre dosé (2 radial-gradients Athanor clair / Rubedo, opacités 0,14 et 0,12, amendement DS 2026-07-08) */
      background:
        radial-gradient(ellipse 70% 55% at 12% 18%, rgba(42, 157, 182, 0.14), transparent 70%),
        radial-gradient(ellipse 60% 50% at 88% 82%, rgba(147, 41, 81, 0.12), transparent 70%),
        linear-gradient(160deg, var(--bleu-canard) 0%, var(--bleu-dark) 100%);
      border-radius: 2rem;
      padding: var(--space-3xl) var(--space-lg);
      position: relative;
      overflow: hidden;
      max-width: var(--content-width);
    }

    .final-cta .container::after {
      content: '';
      position: absolute;
      top: 65%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      height: 400px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--blanc) 8%, transparent);
      pointer-events: none;
    }

    .final-cta h2 {
      color: var(--text-on-brand, #ffffff);
      font-size: var(--fs-h2);
      font-family: var(--font-display);
      font-weight: 400;
      font-style: italic;           /* Coupe italique r\u00e9elle (DM Serif Display ital@1) */
      line-height: var(--lh-heading);
      max-width: var(--content-width);
      margin: 0 auto var(--space-sm);
      position: relative;
      z-index: 1;
      letter-spacing: -0.02em;     /* Serrage l\u00e9g\u00e8rement accentu\u00e9 pour l'italique display */
    }

    .final-cta .subtitle {
      font-family: var(--font-main); /* Explicite : Plus Jakarta Sans, jamais de fallback involontaire */
      font-size: var(--fs-lead);
      font-weight: 400;
      line-height: var(--lh-body);   /* phi exact (1.618) pour la lisibilit\u00e9 multi-lignes */
      color: color-mix(in srgb, var(--blanc) 90%, transparent);
      max-width: var(--content-width);
      margin: 0 auto var(--space-lg);
      position: relative;
      z-index: 1;
    }

    /* Retour fondateur 2026-07-30 : bleu sur bleu. Le panneau est un degrade
       Athanor (--bleu-canard vers --bleu-dark) et le bouton portait le degrade de
       marque, soit les MEMES deux couleurs inversees : 1,0:1, sous les 3:1 exiges
       par WCAG 1.4.11 pour la limite d un composant. Le CTA pose sur une surface
       de marque s inverse donc : surface blanche fixe, encre de marque.
       --text-on-brand ne change jamais de theme (c est sa raison d etre), et
       --bleu-dark suit le theme : blanc sur teal en clair et sombre, blanc sur
       noir en contraste eleve, blanc sur gris a l impression. */
    .final-cta .btn-primary {
      position: relative;
      z-index: 1;
      background: var(--text-on-brand, #ffffff);
      color: var(--bleu-dark);
      box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.32);
    }

    .final-cta .btn-primary:hover {
      background: color-mix(in srgb, var(--text-on-brand, #ffffff) 92%, var(--bleu-canard));
      color: var(--bleu-dark);
      box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.42);
    }

    .final-cta .micro-proof {
      margin-top: var(--space-md);
      font-size: var(--fs-caption);
      color: color-mix(in srgb, var(--blanc) 90%, transparent);
    }

    /* ============================================
       SECTION 11 : FOOTER
       ============================================ */
    .footer {
      padding: var(--space-xl) var(--space-md);
      background: var(--noir);
      color: color-mix(in srgb, var(--blanc) 90%, transparent);
      font-size: var(--fs-small);
    }

    .footer .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-sm);
      text-align: center;
    }

    .footer-brand {
      font-family: var(--font-display);
      font-size: var(--fs-h4);
      font-weight: 400;
      font-style: italic;
      color: var(--text-on-brand, #ffffff);
      letter-spacing: 0.02em;
    }

    .footer-brand .tm {
      font-size: 0.236em; /* golden ratio triple minor (1/phi³) */
      vertical-align: super;
      font-weight: 400;
    }

    .footer-baseline {
      font-style: italic;
      color: color-mix(in srgb, var(--blanc) 90%, transparent);
    }

    .footer-links {
      display: flex;
      gap: var(--space-md);
      flex-wrap: wrap;
      justify-content: center;
    }

    .footer-links a {
      color: var(--text-on-brand, #ffffff);
      text-decoration: none;
      transition: color 0.2s var(--enso);
    }

    .footer-links a:hover {
      color: var(--bleu-light);
    }

    .footer-links a:focus-visible {
      color: var(--bleu-light);
      outline-color: color-mix(in srgb, var(--blanc) 90%, transparent);
    }

    /* ============================================
       RESPONSIVE, Golden Ratio progressive scale
       Mobile (base): Minor Third (1.2)
       Tablet (768px): Perfect Fourth (1.333)
       Desktop (1024px): Golden Ratio (1.618)
       ============================================ */

    @media (min-width: 768px) {
      /* Tablet: Perfect Fourth scale (ratio 1.333) */
      :root {
        --fs-h1: 2.369rem;   /* 38px */
        --fs-h2: 1.777rem;   /* 28px */
        --fs-h3: 1.5rem;     /* 24px, entre h2 (28px) et h4 (21px) */
        --fs-h4: 1.333rem;   /* 21px */
        --fs-lead: 1.125rem;  /* 18px */
      }

      /* Nav desktop repoussée à 1024px (8 liens + CTA = trop large pour 768px) */

      .hero { padding: var(--space-2xl) var(--space-md) var(--space-2xl); padding-top: calc(var(--space-2xl) + 3.5rem); }

      .trust-grid { grid-template-columns: repeat(4, 1fr); }

      .pain-grid { grid-template-columns: 1fr 1fr; }


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

      .profile-router-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); }

      .pipeline-steps {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto auto auto auto;
        column-gap: var(--space-xs);
        row-gap: var(--space-2xs);
      }
      .pipeline-steps::before {
        left: var(--bar-left, calc(100% / 12));
        right: var(--bar-right, calc(100% / 12));
        top: 22px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--bleu-canard), var(--bleu-light), var(--succes));
      }
      .pipeline-step {
        display: grid;
        grid-row: 1 / span 4;
        grid-template-rows: subgrid;
        justify-items: center;
        text-align: center;
        padding: 0;
        gap: 0;
        row-gap: var(--space-2xs);
      }
      .pipeline-body {
        display: contents;
      }
      .cat-panel-placeholder .pipeline-body h3,
      .cat-panel-placeholder .pipeline-body p {
        text-align: center;
      }
      .pipeline-body h3 {
        font-size: var(--fs-caption);
        align-self: start;
        padding-top: var(--space-2xs);
        min-height: 2.4em;
      }
      .pipeline-body p {
        font-size: var(--fs-small);
        align-self: start;
        line-height: var(--lh-body);
        padding: 0 var(--space-3xs);
      }
      .pipeline-tags {
        justify-content: center;
        align-self: start;
        padding: 0 var(--space-3xs);
      }
      .pipeline-tag {
        font-size: var(--fs-caption);
        padding: var(--space-3xs) var(--space-2xs);
      }


      .coverage-row {
        grid-template-columns: 160px 140px 1fr;
        gap: var(--space-sm);
        align-items: center;
      }

      /* S7 : doublon .testimonials-carousel { max-width: 1000px; } retiré (déjà dans la règle de base) */

      /* Desktop : transformer la barre sticky en bouton flottant bas-droite */
      .sticky-cta {
        left: auto;
        right: var(--space-lg);
        bottom: var(--space-lg);
        width: auto;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-top: none;
        box-shadow: none;
        padding: 0;
      }
      .sticky-cta .sticky-price { display: none; }
      .sticky-cta .btn {
        box-shadow: 0 4px 24px rgba(27, 126, 148, 0.3);
      }
    }

    @media (min-width: 1024px) {
      /* Desktop: Golden Ratio scale (ratio 1.618) */
      :root {
        --fs-h1: 4.236rem;   /* 68px */
        --fs-h2: 2.618rem;   /* 42px */
        --fs-h3: 2rem;       /* 32px, ratio h2/h3 = 1.31 */
        --fs-h4: 1.618rem;   /* 26px */
        --fs-lead: 1.25rem;   /* 20px */
      }

      /* Nav desktop : 4 liens + CTA, centrage grille */
      .nav-links { display: flex; gap: var(--space-md); }
      .nav-links a { font-size: var(--fs-small); }
      .nav-cta { display: flex; }
      .nav-cta a { font-size: var(--fs-small); padding: var(--space-2xs) var(--space-sm); }
      .nav-hamburger { display: none; }
      .nav-menu-mobile { display: none; }
      .nav-overlay { display: none; }

      .hero { padding: calc(var(--space-2xl) + 5rem) var(--space-md) var(--space-2xl); }
      .hero-sub { font-size: var(--fs-lead); }

      /* Hero 2 colonnes (2026-07-10) : pleine largeur, copy alignee a gauche */
      .hero .container {
        max-width: var(--max-width);
        align-items: flex-start;
        text-align: left;
      }

      /* hero-enso desktop override supprimé */

      .target-grid { gap: var(--space-sm); }
      .target-grid > .target-card {
        padding: var(--space-lg) var(--space-sm) var(--space-md);
      }

      .section-illustration {
        max-width: 820px;
      }

      .section-illustration svg {
        max-width: var(--content-width);
      }

      .steps-grid {
        grid-template-columns: 1fr 32px 1fr 32px 1fr;
        align-items: stretch;
        justify-content: center;
        gap: var(--space-sm);
        max-width: 1180px;
      }
      .step-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--space-lg) var(--space-md) var(--space-md);
        min-width: 0;
        min-height: 340px;
      }
      .step-card h3 {
        min-height: 2.4em;
        display: flex;
        align-items: center;
      }
      .step-card p {
        flex: 1;
        margin-bottom: var(--space-md);
      }
      .step-connector {
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        opacity: 0.35;
        padding: 0 var(--space-3xs);
      }

      .pipeline-steps {
        column-gap: var(--space-sm);
      }
      .pipeline-body h3 { font-size: var(--fs-body); }
      .pipeline-body p { font-size: var(--fs-small); padding: 0 var(--space-2xs); }
      .pipeline-tag { font-size: var(--fs-caption); padding: var(--space-3xs) var(--space-xs); }

      .coverage-row {
        grid-template-columns: 160px 160px 1fr;
        gap: var(--space-sm);
        align-items: center;
      }

      .trust-item .trust-number {
        font-size: var(--fs-h1);
      }

      /* 6 cols virtuelles : chaque item span 2 = 3 par rangée visuelle */
      .cycle-items { grid-template-columns: repeat(6, 1fr); gap: var(--space-sm); }
      .cycle-item { grid-column: span 2; flex-direction: column; text-align: center; border-radius: 16px; padding: var(--space-md) var(--space-sm); }
      /* Reset tablet centering rule (spécificité inférieure → override explicite) */
      .cycle-item:last-child:nth-child(odd) { grid-column: span 2; max-width: none; justify-self: auto; }
      /* 5 items : 3+2, les 2 derniers décalés d'1 col → centrés */
      .cycle-item:nth-child(4) { grid-column: 2 / span 2; }
      .cycle-item:nth-child(5) { grid-column: 4 / span 2; }
      .cycle-item .cycle-text br { display: inline; }
    }

    @media (min-width: 1280px) {
      /* Nav restaurée en taille normale au-delà de 1280px */
      .nav-links { gap: var(--space-lg); }
      .nav-links a { font-size: var(--fs-body); }
      .nav-cta a { font-size: var(--fs-body); padding: var(--space-xs) var(--space-md); }
    }

    @media (min-width: 1440px) {
      .section-illustration {
        max-width: 900px;
      }

      .section-illustration svg {
        max-width: 900px;
      }
    }
    /* ============================================
       ACCESSIBILITE : FOCUS
       ============================================ */

    /* Fallback for older browsers that don't support :focus-visible */
    *:focus:not(:focus-visible) {
      outline: none;
    }

    *:focus-visible {
      outline: 3px solid var(--bleu-canard);
      outline-offset: 2px;
    }

    .btn:focus-visible,
    .nav-cta a:focus-visible {
      outline: 3px solid var(--bordeaux);
      outline-offset: 3px;
    }

    /* Focus visible sur fonds sombres (guarantee, CTA, footer).
       V9.10 : .hero retire de la liste (le hero est CLAIR depuis la refonte : l'outline
       blanc y etait invisible ; retour a l'outline bordeaux de .btn:focus-visible, 6,8:1). */
    .guarantee *:focus-visible,
    .final-cta *:focus-visible,
    .pricing *:focus-visible,
    footer *:focus-visible {
      outline-color: var(--text-on-brand, #ffffff);
    }

    /* ============================================
       ACCESSIBILITE : SKIP LINK
       ============================================ */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 9999;
      padding: var(--space-xs) var(--space-sm);
      background: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
      font-weight: 600;
      text-decoration: none;
      border-radius: 0 0 8px 0;
    }

    .skip-link:focus {
      left: 0;
      outline: 3px solid #fff;
      outline-offset: 2px;
    }

    /* ============================================
       ACCESSIBILITE : HIGH CONTRAST MODE
       ============================================ */
    @media (forced-colors: active) {
      h1 span {
        -webkit-text-fill-color: unset;
        background: none;
        color: LinkText;
      }

      .btn-primary,
      .btn-secondary {
        border: 2px solid ButtonText;
      }

      .section-tag {
        border: 1px solid ButtonText;
      }

      .toggle-switch,
      .sim-billing-switch,
      .sim-time-toggle-btn {
        border: 2px solid ButtonText;
      }

      .toggle-switch::after,
      .sim-billing-switch::after,
      .sim-time-toggle-btn::after {
        background: ButtonText;
      }
    }

    /* Hide native number input spinners */
    .sim-etp-input::-webkit-outer-spin-button,
    .sim-etp-input::-webkit-inner-spin-button,
    .sim-tjm-role-input::-webkit-outer-spin-button,
    .sim-tjm-role-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .sim-etp-input[type=number],
    .sim-tjm-role-input[type=number] { -moz-appearance: textfield; }

    /* ============================================
       SIMULATEUR SOCRATIQUE
       ============================================ */
    .simulator {
      background: var(--surface);
      padding: var(--section-padding);
    }

    .simulator h2 {
      text-align: center;
      color: var(--brand-text);
      margin-bottom: var(--space-xs);
    }

    .simulator .section-subtitle {
      text-align: center;
      color: var(--gris);
      margin-bottom: var(--space-lg);
      font-size: var(--fs-body);
    }

    .sim-box {
      max-width: var(--content-width);
      margin: 0 auto;
      background: var(--blanc);
      border-radius: 1.5rem;
      padding: var(--space-xl) var(--space-lg) var(--space-lg); /* 62/38 golden : xl(55)/lg(34) */
      box-shadow: var(--shadow-zen);
    }

    /* Steps container */
    .sim-step {
      display: none;
      animation: simFadeIn 0.4s var(--enso);
    }

    .sim-step.active {
      display: block;
    }

    @keyframes simFadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Progress bar (segmented numbered) */
    .sim-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: var(--space-lg);
      position: relative;
      scroll-margin-top: 100px;
    }
    .sim-progress-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      flex: 1;
    }
    .sim-progress-step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 16px;
      left: calc(50% + 16px);
      width: calc(100% - 32px);
      height: 2px;
      background: var(--gris-clair);
      transition: background 0.3s var(--enso);
    }
    .sim-progress-step.done:not(:last-child)::after {
      background: var(--bleu-canard);
    }
    .sim-progress-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--fs-small);
      font-weight: 700;
      background: var(--gris-clair);
      color: var(--gris);
      border: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      transition: background 0.3s var(--enso), color 0.3s var(--enso), box-shadow 0.3s var(--enso), transform 0.2s var(--enso);
      position: relative;
      z-index: 1;
    }
    .sim-progress-step.done .sim-progress-num {
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      box-shadow: 0 4px 12px rgba(27, 126, 148, 0.25);
    }
    /* Step courant : bleu canard par d&eacute;faut */
    .sim-progress-step.current .sim-progress-num {
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      box-shadow: 0 4px 16px rgba(27, 126, 148, 0.3);
      transform: scale(1.1);
    }
    /* Douleurs = bordeaux (step 6, data-step="6") */
    .sim-progress-step[data-step="6"].current .sim-progress-num {
      background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-glow));
      box-shadow: var(--shadow-bordeaux-md-strong);
    }
    /* Bilan = vert (step 7, data-step="7") */
    .sim-progress-step[data-step="7"].current .sim-progress-num {
      background: linear-gradient(135deg, var(--succes), var(--succes-light));
      box-shadow: 0 4px 16px rgba(58, 138, 106, 0.3);
    }
    .sim-progress-step[data-step="7"].done .sim-progress-num {
      background: linear-gradient(135deg, var(--succes), var(--succes-light));
      box-shadow: 0 4px 12px rgba(58, 138, 106, 0.25);
    }
    /* Stepper cliquable : étapes déjà visitées */
    .sim-progress-step.done {
      cursor: pointer;
    }
    .sim-progress-step.done:hover .sim-progress-num {
      transform: scale(1.1);
      box-shadow: 0 4px 16px rgba(27, 126, 148, 0.35);
    }
    .sim-progress-step[data-step="7"].done:hover .sim-progress-num {
      box-shadow: 0 4px 16px rgba(58, 138, 106, 0.35);
    }
    .sim-progress-step.skipped {
      display: none;
    }
    .sim-progress-label {
      font-size: var(--fs-caption);
      color: var(--gris);
      margin-top: var(--space-3xs);
      text-align: center;
      white-space: nowrap;
      max-width: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @media (max-width: 600px) {
      .sim-progress-num { width: 24px; height: 24px; font-size: var(--fs-caption); }
      .sim-progress-step:not(:last-child)::after { top: 12px; left: calc(50% + 12px); width: calc(100% - 24px); }
      .sim-progress-label { display: none; }
      .sim-progress-step.current .sim-progress-num { box-shadow: var(--shadow-bordeaux-md-mobile); }

      .profile-router-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
      .profile-card { padding: var(--space-xs) var(--space-xs) var(--space-3xs); } /* 62/38 golden : xs(8)/3xs(4) */
      .profile-card-icon { width: 32px; height: 32px; border-radius: 8px; }
      .profile-card h3 { font-size: var(--fs-caption); }
      .profile-card-tags { font-size: 0.625rem; }
      .profile-card-cat { font-size: 0.5625rem; }
      .profile-router-secondary { gap: 6px; }
      .profile-pill { font-size: 0.625rem; padding: 4px 10px; }
    }

    /* Question labels */
    .sim-question {
      font-size: var(--fs-lead);
      font-weight: 600;
      color: var(--noir);
      margin-bottom: var(--space-2xs);
    }

    .sim-hint {
      font-size: var(--fs-small);
      color: var(--gris);
      margin-bottom: var(--space-md);
    }

    /* Choice buttons (Q1) */
    .sim-choices {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm);
    }

    .sim-choice {
      padding: var(--space-sm);
      border: 1.5px solid var(--gris-clair);
      box-shadow: var(--shadow-zen);
      border-radius: 0.75rem;
      background: var(--blanc);
      cursor: pointer;
      text-align: center;
      font-size: var(--fs-body);
      font-weight: 600;
      color: var(--noir);
      transition: border-color 0.2s var(--enso), background 0.2s var(--enso), box-shadow 0.2s var(--enso), transform 0.15s var(--enso);
    }

    .sim-choice:hover {
      border-color: var(--brand-text);
      background: rgba(27, 126, 148, 0.04);
      transform: translateY(-2px);
    }

    .sim-choice.selected {
      border-color: var(--brand-text);
      background: rgba(27, 126, 148, 0.06);
      color: var(--brand-text);
      box-shadow: 0 0 14px rgba(27, 126, 148, 0.25), 0 0 4px rgba(27, 126, 148, 0.1), var(--shadow-zen);
    }

    .sim-choice small {
      display: block;
      font-size: var(--fs-small);
      font-weight: 400;
      color: var(--gris);
      margin-top: var(--space-3xs);
    }

    /* Étape Qualiopi : accent bordeaux */
    #simStep4 .sim-choice:hover {
      border-color: var(--brand-accent-text);
      background: rgba(128, 0, 0, 0.04);
    }
    #simStep4 .sim-choice.selected {
      border-color: var(--brand-accent-text);
      background: rgba(128, 0, 0, 0.06);
      color: var(--brand-accent-text);
      box-shadow: 0 0 0 1px var(--bordeaux), var(--shadow-zen);
    }

    /* Slider (Q2 & Q3) */
    .sim-slider-wrap {
      margin-bottom: var(--space-xs);
    }

    .sim-slider-value {
      text-align: center;
      font-size: var(--fs-h2);
      font-weight: 700;
      color: var(--brand-text);
      margin-bottom: var(--space-xs);
    }

    .sim-slider-value small {
      font-size: var(--fs-small);
      font-weight: 400;
      color: var(--gris);
    }

    .sim-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 0.75rem;
      background: var(--gris-clair);
      outline: none;
      cursor: pointer;
      box-shadow: 0 0 8px rgba(27, 126, 148, 0.15), inset 0 1px 2px color-mix(in srgb, var(--blanc) 40%, transparent);
      transition: box-shadow 0.3s var(--enso);
    }

    .sim-slider:hover {
      box-shadow: 0 0 12px rgba(27, 126, 148, 0.25), inset 0 1px 2px color-mix(in srgb, var(--blanc) 50%, transparent);
    }

    .sim-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--bleu-canard);
      border: none;
      box-shadow: 0 0 14px rgba(27, 126, 148, 0.45), 0 0 4px rgba(27, 126, 148, 0.2);
      cursor: pointer;
      transition: transform 0.15s var(--enso), box-shadow 0.3s var(--enso);
    }

    .sim-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 0 18px rgba(27, 126, 148, 0.55), 0 0 6px rgba(27, 126, 148, 0.3);
    }

    .sim-slider::-moz-range-thumb {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--bleu-canard);
      border: none;
      box-shadow: 0 0 14px rgba(27, 126, 148, 0.45), 0 0 4px rgba(27, 126, 148, 0.2);
      cursor: pointer;
    }

    .sim-slider-labels {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-caption);
      color: var(--gris);
      margin-top: var(--space-3xs);
    }

    /* Pain choice cards (Q4) */
    .sim-pain-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm);
    }

    .sim-pain-btn {
      padding: var(--space-sm);
      border: 1.5px solid var(--gris-clair);
      box-shadow: var(--shadow-zen);
      border-radius: 0.75rem;
      background: var(--blanc);
      cursor: pointer;
      text-align: center;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 80px;
      transition: border-color 0.2s var(--enso), background 0.2s var(--enso), box-shadow 0.2s var(--enso), transform 0.15s var(--enso);
    }

    .sim-pain-btn:hover {
      border-color: var(--brand-accent-text);
      background: rgba(128, 0, 0, 0.04);
      transform: translateY(-2px);
    }

    .sim-pain-btn:focus-visible {
      outline: 3px solid var(--bordeaux);
      outline-offset: 2px;
    }

    .sim-pain-btn.selected {
      border-color: var(--brand-accent-text);
      background: rgba(128, 0, 0, 0.06);
      box-shadow: var(--shadow-bordeaux-glow), var(--shadow-zen);
    }

    .sim-pain-btn .sim-pain-icon {
      margin-bottom: var(--space-2xs);
      transition: opacity 0.2s var(--enso);
    }
    .sim-pain-btn .sim-pain-icon svg {
      width: 28px;
      height: 28px;
    }
    .sim-pain-btn.selected .sim-pain-icon {
      opacity: 0.5;
    }

    .sim-pain-btn .sim-pain-label {
      font-size: var(--fs-body);
      font-weight: 600;
      color: var(--noir);
      line-height: var(--lh-heading);
    }

    .sim-pain-btn.selected .sim-pain-label {
      color: var(--brand-accent-text);
    }

    /* Navigation buttons */
    .sim-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: var(--space-md);
    }

    .sim-btn-back {
      background: none;
      border: none;
      color: var(--gris);
      font-size: var(--fs-small);
      cursor: pointer;
      padding: var(--space-xs) 0;
      transition: color 0.2s var(--enso);
    }

    .sim-btn-back:hover {
      color: var(--brand-text);
    }

    .sim-btn-back:focus-visible {
      outline: 3px solid var(--bleu-canard);
      outline-offset: 2px;
    }

    .sim-btn-next {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-sm) var(--space-lg);
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      border: none;
      border-radius: 0.75rem;
      font-size: var(--fs-body);
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(27, 126, 148, 0.35), 0 0 20px rgba(27, 126, 148, 0.15);
      transition: background 0.25s var(--enso), transform 0.15s var(--enso), box-shadow 0.25s var(--enso);
    }

    .sim-btn-next:hover:not(:disabled) {
      background: linear-gradient(135deg, var(--bleu-dark), var(--bleu-canard));
      box-shadow: 0 6px 20px rgba(27, 126, 148, 0.45), 0 0 30px rgba(27, 126, 148, 0.2);
      transform: translateY(-2px);
    }

    .sim-btn-next:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .sim-btn-next:focus-visible {
      outline: 3px solid var(--bleu-dark);
      outline-offset: 3px;
    }

    /* Results step */
    .sim-results {
      text-align: center;
    }

    .sim-results-title {
      font-size: var(--fs-lead);
      font-weight: 600;
      color: var(--noir);
      margin-bottom: var(--space-lg);
    }


    .sim-metric {
      padding: var(--space-md) var(--space-sm) var(--space-sm); /* 62/38 golden */
      border-radius: 1rem;
      background: rgba(27, 126, 148, 0.06);
      box-shadow: 0 0 12px rgba(27, 126, 148, 0.12), var(--shadow-zen);
      text-align: center;
      opacity: 0;
      transform: scale(0.92);
      animation: simMetricPop 0.4s ease forwards;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-height: 120px;
    }
    .sim-metric:nth-child(1) { animation-delay: 0.1s; }
    .sim-metric:nth-child(2) { animation-delay: 0.18s; }
    .sim-metric:nth-child(3) { animation-delay: 0.26s; }
    .sim-metric:nth-child(4) { animation-delay: 0.34s; }
    .sim-metric:nth-child(5) { animation-delay: 0.42s; }
    .sim-metric:nth-child(6) { animation-delay: 0.5s; }
    @keyframes simMetricPop {
      from { opacity: 0; transform: scale(0.92); }
      to { opacity: 1; transform: scale(1); }
    }

    .sim-metric-value {
      font-size: var(--fs-h4);
      font-weight: 700;
      color: var(--brand-text);
      line-height: var(--lh-heading);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      word-break: break-word;
    }

    .sim-metric-value small {
      font-size: var(--fs-small);
      font-weight: 500;
      color: var(--brand-text);
      vertical-align: baseline;
    }

    .sim-metric-value small sup {
      font-size: var(--fs-small);
      vertical-align: baseline;
      position: static;
    }

    /* Unites €/AN dans les KPIs : harmonisation golden ratio cross-context.
       Sans cette regle, € (0.618em de fs-h4 = 11.87px) et /an (0.618em de fs-caption = 6.86px)
       affichent un ecart visuel de 73% alors qu'ils sont de meme nature.
       Cible visuelle commune : ~9.5px = un cran en dessous selon phi, harmonise entre contextes. */
    .sim-metric-value .u,
    .sim-metric-value sup.u {
      font-size: 0.5em;         /* 19.2 x 0.5 = 9.6px - clairement subordonne au 924 */
      font-weight: 500;
      vertical-align: super;
      margin-left: 0.1em;
      line-height: 1;
    }
    .sim-metric-label .u {
      font-size: 0.85em;        /* 11.1 x 0.85 = 9.44px - match visuel avec le € au-dessus */
      font-weight: 500;
      opacity: 0.85;
      margin-left: 0.05em;
    }

    .sim-metric-label {
      font-size: var(--fs-caption);
      color: var(--gris);
      margin-top: auto;
      padding-top: var(--space-2xs);
      line-height: var(--lh-heading);
      text-align: center;
    }

    .sim-insight {
      background: rgba(27, 126, 148, 0.06);
      border: 1.5px solid rgba(27, 126, 148, 0.15);
      border-radius: 1rem;
      padding: var(--space-sm) var(--space-md) var(--space-xs); /* 62/38 golden */
      text-align: left;
      margin-bottom: var(--space-md);
      font-size: var(--fs-body);
      color: var(--noir);
      line-height: var(--lh-body);
      box-shadow: 0 0 14px rgba(27, 126, 148, 0.12), 0 0 4px rgba(27, 126, 148, 0.06);
    }

    .sim-results .btn-primary {
      width: 100%;
    }

    .sim-results-restart {
      margin-top: var(--space-sm);
      font-size: var(--fs-small);
      color: var(--brand-text);
      cursor: pointer;
      background: none;
      border: 1px solid var(--bleu-canard);
      border-radius: 0.75rem;
      padding: var(--space-xs) var(--space-md);
      transition: background 0.2s, color 0.2s;
    }
    .sim-results-restart:hover {
      background: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
    }

    .sim-share-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.2s, opacity 0.2s;
    }
    .sim-share-btn:hover {
      transform: scale(1.12);
      opacity: 0.9;
    }

    /* === Hero button : recuperation du bilan complet (ex-bouton imprimante) === */
    /* 2026-04-10 : le bouton PDF etait noye dans un groupe de 3 boutons circulaires egaux */
    /* avec une icone imprimante obsolete et un wording "Telecharger" peu valorisant.      */
    /* Refactor : promotion en hero primary avec libelle "Recevoir mon bilan complet" +    */
    /* icone moderne file-check + sous-libelle informatif. Email/WhatsApp en secondaires.  */
    .sim-report-hero {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-lg);
      background: var(--gradient-brand);
      color: var(--text-on-brand, #ffffff);
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(27, 126, 148, 0.25);
      transition: transform 0.3s var(--enso), box-shadow 0.3s var(--enso);
      max-width: 100%;
      font-family: var(--font-main);
      text-align: left;
    }
    .sim-report-hero:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(27, 126, 148, 0.35);
    }
    .sim-report-hero:focus-visible {
      outline: 2px solid var(--bleu-light);
      outline-offset: 3px;
    }
    .sim-report-hero svg {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      color: var(--text-on-brand, #ffffff);
    }
    .sim-report-hero-label {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1.2;
    }
    .sim-report-hero-label strong {
      font-size: var(--fs-body);
      font-weight: 700;
      color: var(--text-on-brand, #ffffff);
    }
    .sim-report-hero-label small {
      font-size: var(--fs-caption);
      font-weight: 400;
      color: color-mix(in srgb, var(--blanc) 85%, transparent);
      margin-top: 2px;
    }
    /* V9.2 chantier 4 (2026-07-12) : bouton PDF au-dessus du pli, halo dos&eacute; anim&eacute;
       (amendement design 2026-07-08 : glow ma&icirc;tris&eacute; sur CTA cl&eacute;, teinte Athanor, reduced-motion) */
    /* V9.24 : meme correction que sur le CTA du hero. L ombre de base ne bouge
       plus, seul un halo pose sur une couche dediee respire en `opacity`. */
    .sim-report-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: 0 0 30px rgba(27, 126, 148, 0.30);
      opacity: 0;
    }
    @keyframes qaliaPdfHalo { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
    @media (prefers-reduced-motion: no-preference) {
      .sim-report-hero::after { animation: qaliaPdfHalo 2.8s ease-in-out infinite; }
    }
    /* V9.3 C10 : rappel PDF en fin de resultats, encore plus prominent. */
    .sim-pdf-endcta { text-align: center; max-width: 640px; margin: var(--space-lg) auto 0; padding: var(--space-lg) var(--space-md); background: linear-gradient(135deg, rgba(27,126,148,0.06), rgba(42,157,182,0.10)); border: 1px solid rgba(27,126,148,0.22); border-radius: 1.25rem; }
    .sim-pdf-endcta-title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--brand-text-strong); margin: 0 0 var(--space-2xs); }
    .sim-pdf-endcta-sub { font-size: var(--fs-small); color: var(--gris); line-height: var(--lh-body); margin: 0 auto var(--space-md); max-width: 500px; }
    .sim-report-hero--lg { padding: var(--space-md) var(--space-xl); }
    .sim-report-hero--lg svg { width: 32px; height: 32px; }
    .sim-report-hero--lg .sim-report-hero-label strong { font-size: var(--fs-lead); }
    @media (prefers-reduced-motion: reduce) {
      .sim-report-hero { animation: none; }
    }
    .sim-share-secondary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      margin-top: var(--space-sm);
    }
    .sim-share-secondary-label {
      font-size: var(--fs-caption);
      color: var(--gris);
      margin-right: var(--space-2xs);
    }
    /* Classes dediees pour les 2 boutons secondaires (evite styles inline avec var()) */
    .sim-share-btn--email {
      background: var(--bleu-canard);
    }
    .sim-share-btn--whatsapp {
      background: #25D366;
    }
    /* Conteneur sim-share : masque par defaut, affiche via JS */
    .sim-share {
      margin-top: 1rem;
    }

    .sim-pain-response {
      background: linear-gradient(135deg, rgba(27,126,148,0.06), rgba(42,157,182,0.08));
      border: 1px solid rgba(27,126,148,0.12);
      border-radius: 1rem;
      padding: var(--space-sm) var(--space-md) var(--space-xs); /* 62/38 golden */
      margin-bottom: var(--space-sm);
      text-align: left;
    }
    .sim-pain-response h4 {
      font-size: var(--fs-small);
      color: var(--brand-text);
      margin: 0 0 var(--space-xs);
      font-weight: 700;
    }
    .sim-pain-response p {
      font-size: var(--fs-small);
      line-height: var(--lh-body);
      color: var(--noir);
      margin: var(--space-2xs) 0;
    }

    .sim-advice {
      background: rgba(212,160,32,0.08);
      border: 1px solid rgba(212,160,32,0.2);
      border-radius: 1rem;
      padding: var(--space-sm) var(--space-md) var(--space-xs); /* 62/38 golden */
      margin-top: var(--space-sm);
      text-align: left;
    }
    .sim-advice h4 {
      font-size: var(--fs-small);
      color: var(--warning-dark);
      margin: 0 0 var(--space-xs);
      font-weight: 700;
    }
    .sim-advice ul {
      margin: 0;
      padding-left: var(--space-md);
      font-size: var(--fs-small);
      line-height: var(--lh-body);
      color: var(--noir);
    }

    /* Billing toggle in results */
    .sim-billing-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-sm);
      margin-bottom: var(--space-xs);
    }
    .sim-chatgpt-plan {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      margin-bottom: var(--space-md);
      flex-wrap: wrap;
    }
    .sim-chatgpt-plan-label {
      font-size: var(--fs-caption);
      color: var(--gris);
    }
    .sim-chatgpt-plan-btns {
      display: flex;
      gap: var(--space-2xs);
    }
    .sim-chatgpt-btn {
      font-size: var(--fs-caption);
      padding: 4px 10px;
      border: 1.5px solid var(--gris-clair);
      border-radius: 8px;
      background: var(--blanc);
      color: var(--gris);
      cursor: pointer;
      transition: all 0.2s var(--enso);
      font-family: inherit;
    }
    .sim-chatgpt-btn.selected {
      border-color: var(--brand-text);
      color: var(--brand-text);
      background: rgba(27, 126, 148, 0.06);
      font-weight: 600;
    }
    .sim-chatgpt-btn small { font-weight: 400; }
    .sim-chatgpt-btn[data-plan="already"].selected {
      border-color: var(--succes);
      color: var(--succes);
      background: rgba(58, 138, 106, 0.06);
    }
    /* Business masqué en solo (5 postes min.) */
    .sim-chatgpt-btn[data-plan="business"].hidden-solo {
      display: none;
    }

    .sim-billing-label {
      font-size: var(--fs-small);
      color: var(--gris);
      font-weight: 500;
      transition: color 0.2s var(--enso);
    }

    .sim-billing-label.active {
      color: var(--brand-text);
      font-weight: 700;
    }

    .sim-billing-switch {
      position: relative;
      width: 44px;
      height: 24px;
      background: var(--gris-clair);
      border: none;
      border-radius: 24px;
      cursor: pointer;
      transition: background 0.3s var(--enso), box-shadow 0.3s var(--enso);
    }

    .sim-billing-switch::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      background: var(--blanc);
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      transition: transform 0.3s var(--enso);
    }

    .sim-billing-switch.annual {
      background: var(--bleu-canard);
      box-shadow: 0 0 14px rgba(27, 126, 148, 0.45), 0 0 4px rgba(27, 126, 148, 0.2);
    }

    .sim-billing-switch.annual::after {
      transform: translateX(20px);
    }

    /* ===== DASHBOARD GRID ===== */
    .sim-dashboard {
      text-align: left;
    }
    .sim-dashboard-full {
      margin-bottom: var(--space-md);
      opacity: 0;
      transform: translateY(16px);
      animation: simDashFadeIn 0.5s ease forwards;
    }
    .sim-dashboard-full:nth-child(1) { animation-delay: 0s; }
    .sim-dashboard-full:nth-child(2) { animation-delay: 0.08s; }
    .sim-dashboard-full:nth-child(3) { animation-delay: 0.16s; }
    .sim-dashboard-full:nth-child(4) { animation-delay: 0.24s; }
    .sim-dashboard-full:nth-child(5) { animation-delay: 0.32s; }
    .sim-dashboard-full:nth-child(6) { animation-delay: 0.4s; }
    .sim-dashboard-full:nth-child(7) { animation-delay: 0.48s; }
    .sim-dashboard-full:nth-child(8) { animation-delay: 0.56s; }
    .sim-dashboard-full:nth-child(9) { animation-delay: 0.64s; }
    .sim-dashboard-full:nth-child(10) { animation-delay: 0.72s; }
    .sim-dashboard-full:nth-child(n+11) { animation-delay: 0.8s; }
    @keyframes simDashFadeIn {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .sim-dashboard-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-sm);
      margin-bottom: var(--space-md);
      padding: 0;
    }
    .sim-dashboard-charts {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-sm);
      margin-bottom: var(--space-sm);
    }
    .sim-metric-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto var(--space-xs);
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(27, 126, 148, 0.08);
      border-radius: 12px;
    }
    .sim-metric-icon svg {
      width: 24px;
      height: 24px;
    }
    .sim-chart-card {
      background: var(--gris-ui);
      border-radius: 1rem;
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden : md(21)/sm(13) */
    }
    .sim-chart-card canvas {
      max-width: 100%;
      height: auto;
      image-rendering: auto;
    }
    .sim-chart-title {
      font-size: var(--fs-small);
      font-weight: 600;
      color: var(--gris);
      text-align: center;
      margin-bottom: var(--space-sm);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    /* Golden ratio 1/phi (0.618) dans le titre du graph pour €, /mois, /an :
       harmonise avec .sim-metric-value .u et .sim-metric-label .u.
       sup.u = exposant raise, span.u = simplement smaller. */
    .sim-chart-title sup.u {
      font-size: 0.7em;
      vertical-align: super;
      font-weight: 500;
      line-height: 1;
      margin-left: 0.02em;
    }
    .sim-chart-title span.u {
      font-size: 0.78em;
      font-weight: 500;
      opacity: 0.85;
    }
    /* Time chart HTML/CSS bars, style IDENTIQUE aux comparison-bar */
    .sim-time-bars { padding: 0 var(--space-xs); }
    .sim-time-group { margin-bottom: var(--space-md); }
    .sim-time-group.suggested { opacity: 0.75; padding-left: var(--space-sm); border-left: none; background-image: linear-gradient(180deg, rgba(27,126,148,0.15), rgba(42,157,182,0.35)); background-size: 3px 100%; background-repeat: no-repeat; background-position: left; }
    .sim-time-label { font-size: var(--fs-small); font-weight: 600; color: var(--noir); margin-bottom: var(--space-2xs); text-align: left; display: flex; align-items: center; gap: var(--space-2xs); }
    .sim-time-bar-wrap { margin-bottom: var(--space-2xs); }
    .sim-time-bar-header { display: flex; justify-content: space-between; font-size: var(--fs-small); margin-bottom: var(--space-2xs); font-weight: 500; }
    .sim-time-bar-header.market-header { color: var(--noir); }
    .sim-time-bar-header.qalia-header { color: var(--brand-text); font-weight: 700; }
    .sim-time-bar-track { height: 14px; border-radius: 0.5rem; background: var(--gris-clair); overflow: hidden; }
    .sim-time-bar { height: 100%; border-radius: 0.5rem; width: 0; transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .sim-time-bar.market { background: linear-gradient(90deg, var(--erreur), var(--bordeaux)); }
    .sim-time-bar.qalia { background: linear-gradient(90deg, var(--bleu-canard), var(--bleu-light)); }
    .sim-time-value { font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
    .sim-time-tabs { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-sm); }
    .sim-time-tab { padding: var(--space-2xs) var(--space-sm); border-radius: 0.75rem; border: 1px solid rgba(27,126,148,0.3); background: transparent; color: var(--gris); font-size: var(--fs-small); font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; }
    .sim-time-tab.active { background: var(--bleu-canard); color: var(--text-on-brand, #ffffff); border-color: var(--brand-text); }
    .sim-time-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); margin-bottom: var(--space-sm); font-size: var(--fs-small); }
    .sim-time-toggle-label { color: var(--gris); font-weight: 500; transition: color 0.2s; }
    .sim-time-toggle-label.active { color: var(--brand-text); font-weight: 700; }
    .sim-time-toggle-btn { width: 36px; height: 20px; border-radius: 0.75rem; border: none; background: var(--gris-clair); cursor: pointer; position: relative; transition: background 0.2s, box-shadow 0.2s; }
    .sim-time-toggle-btn::after { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--bleu-canard); position: absolute; top: 2px; left: 2px; transition: transform 0.2s; }
    .sim-time-toggle-btn.active { background: rgba(27,126,148,0.2); box-shadow: 0 0 10px rgba(27, 126, 148, 0.35), 0 0 3px rgba(27, 126, 148, 0.15); }
    .sim-time-toggle-btn.active::after { transform: translateX(16px); }
    .sim-chart-legend { display: flex; gap: var(--space-md); justify-content: center; margin-top: var(--space-sm); font-size: var(--fs-small); color: var(--gris); }
    .sim-legend-item { display: flex; align-items: center; gap: var(--space-2xs); }
    .sim-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
    /* Tooltip ? on task labels */
    .sim-task-info-trigger { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(27,126,148,0.12); color: var(--brand-text); font-size: var(--fs-caption); font-weight: 700; cursor: help; position: relative; flex-shrink: 0; }
    .sim-task-info-trigger:hover .sim-task-info-tooltip { display: block; }
    .sim-task-info-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); color: var(--tooltip-color); border: var(--tooltip-border); padding: var(--space-xs) var(--space-sm); border-radius: 0.75rem; font-size: var(--fs-caption); font-weight: 400; white-space: nowrap; z-index: 100; line-height: var(--lh-body); box-shadow: var(--tooltip-shadow); }
    .sim-task-info-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--tooltip-arrow-color); }
    @media (max-width: 600px) { .sim-task-info-tooltip { white-space: normal; min-width: 200px; max-width: 260px; left: 0; transform: none; } .sim-task-info-tooltip::after { left: 8px; transform: none; } }
    /* Role badges on task cards */
    .sim-task-role-badges { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin-left: auto; flex-shrink: 1; max-width: 65%; justify-content: flex-end; }
    .sim-task-role-badge { font-size: 0.7rem; padding: 1px var(--space-2xs); border-radius: 0.75rem; background: rgba(27,126,148,0.08); color: var(--brand-text); font-weight: 600; white-space: nowrap; line-height: 1.4; }
    .sim-task-role-badge--more { background: rgba(27,126,148,0.18); cursor: default; }

    .sim-ia-badge {
      font-size: var(--fs-caption);
      color: var(--gris);
      margin: var(--space-xs) auto var(--space-sm);
      padding: var(--space-2xs) var(--space-sm);
      border: 1px solid rgba(27,126,148,0.15);
      border-radius: 0.75rem;
      display: block;
      text-align: center;
      max-width: max-content;
      background: rgba(27,126,148,0.04);
    }

    .sim-context-recap {
      font-size: var(--fs-small);
      color: var(--gris);
      line-height: var(--lh-body);
      margin-top: var(--space-2xs);
    }

    .sim-roi-summary {
      font-size: var(--fs-small);
      color: var(--gris);
      text-align: center;
      margin-top: var(--space-xs);
      line-height: var(--lh-body);
    }

    .sim-conformity-summary {
      font-size: var(--fs-small);
      font-weight: 600;
      color: var(--brand-text);
      cursor: pointer;
      padding: var(--space-xs) 0;
    }

    .sim-conformity-content {
      font-size: var(--fs-small);
      line-height: var(--lh-body);
      padding: var(--space-sm) 0;
    }

    /* Decision analysis */
    .sim-decision-analysis {
      background: linear-gradient(135deg, rgba(27,126,148,0.04), rgba(42,157,182,0.02));
      border: 1px solid rgba(27,126,148,0.12);
      border-radius: 1rem;
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden */
    }
    .sim-eisenhower {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-xs) var(--space-sm);
      border-radius: 0.75rem;
      font-weight: 700;
      font-size: var(--fs-small);
      margin-bottom: var(--space-sm);
    }
    .sim-eisenhower.faire { background: rgba(58,138,106,0.12); color: var(--succes); border: 1px solid rgba(58,138,106,0.3); }
    .sim-eisenhower.planifier { background: rgba(27,126,148,0.12); color: var(--brand-text); border: 1px solid rgba(27,126,148,0.3); }
    .sim-eisenhower.considerer { background: rgba(212,160,32,0.12); color: var(--warning); border: 1px solid rgba(212,160,32,0.3); }
    .sim-eisenhower.explorer { background: rgba(128,128,128,0.12); color: var(--gris-600); border: 1px solid rgba(128,128,128,0.3); }
    .sim-dur {
      font-size: var(--fs-small);
      line-height: var(--lh-body);
      color: var(--noir);
      margin-bottom: var(--space-sm);
    }
    .sim-dur strong { color: var(--brand-text); }
    .sim-consequences {
      font-size: var(--fs-small);
      line-height: var(--lh-body);
      color: var(--noir);
      padding: var(--space-sm) var(--space-md) var(--space-xs); /* 62/38 golden */
      background: rgba(147, 41, 81, 0.05);
      border: 1.5px solid rgba(147, 41, 81, 0.15);
      border-radius: 1rem;
      box-shadow: var(--shadow-bordeaux-glow-soft);
    }
    .sim-consequences strong { color: var(--brand-accent-text); }

    /* Desktop dashboard (>= 1024px) */
    @media (min-width: 1024px) {
      .sim-dashboard-kpis {
        grid-template-columns: repeat(3, 1fr);
      }
      .sim-dashboard-charts {
        grid-template-columns: 1fr 1fr;
      }
      .sim-box.sim-box-dashboard .sim-metric-value {
        font-size: var(--fs-h2);
      }
      .sim-box.sim-box-dashboard .sim-metric-value small {
        font-size: var(--fs-body);
      }
    }

    /* Tablet (601-1023px) */
    @media (min-width: 601px) and (max-width: 1023px) {
      .sim-dashboard-kpis {
        grid-template-columns: repeat(3, 1fr);
      }
      .sim-dashboard-charts {
        grid-template-columns: 1fr 1fr;
      }
      .sim-box.sim-box-dashboard .sim-metric-value {
        font-size: var(--fs-h4);
      }
      .sim-box.sim-box-dashboard .sim-metric-value small {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-metric {
        min-height: 120px;
      }
      .sim-box.sim-box-dashboard .sim-results-title {
        font-size: var(--fs-lead);
      }
      .sim-box.sim-box-dashboard .sim-verdict {
        font-size: var(--fs-body);
      }
      .sim-box.sim-box-dashboard .sim-qualiopi-alert,
      .sim-box.sim-box-dashboard .sim-team-needs h4,
      .sim-box.sim-box-dashboard .sim-team-needs ul,
      .sim-box.sim-box-dashboard .sim-pain-response h4,
      .sim-box.sim-box-dashboard .sim-pain-response p,
      .sim-box.sim-box-dashboard .sim-advice h4,
      .sim-box.sim-box-dashboard .sim-advice ul {
        font-size: var(--fs-body);
      }
      .sim-box.sim-box-dashboard .sim-section-title {
        font-size: var(--fs-small);
      }
    }

    /* ===== PRINT STYLESHEET ===== */
    @media print {
      /* --- 0. Global print settings, page size set dynamically by JS before print --- */
      @page { margin: 1.5cm 1.5cm 1cm; }
      * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

      /* --- 1. Hide EVERYTHING outside the simulator ---
         BUG FIX: .simulator is nested inside <main> > <div.gated-content> > <section.simulator>.
         Strategy: hide body siblings of main; strip chrome (padding/background) from ancestor chain;
         hide all sibling sections of the simulator inside its wrapper. */
      body > *:not(main) { display: none !important; }
      body > main { display: block !important; padding: 0 !important; margin: 0 !important; background: none !important; min-height: 0 !important; }
      /* Neutralize padding/background on all ancestor wrappers inside main */
      body > main * { background-image: none !important; }
      .gated-content { display: block !important; padding: 0 !important; margin: 0 !important; background: none !important; min-height: 0 !important; max-width: 100% !important; overflow: visible !important; }
      /* Inside the simulator's direct parent, hide every sibling that is not the simulator itself.
         Works for nesting main > .gated-content > .simulator AND main > .simulator */
      .gated-content > *:not(.simulator),
      body > main > *:not(.simulator):not(.gated-content) { display: none !important; }
      body > main > .simulator,
      .gated-content > .simulator,
      body > .simulator { display: block !important; }

      /* --- 2. Show the chain: .simulator > .container > .sim-box --- */
      .simulator { display: block !important; padding: 0 !important; margin: 0 !important; }
      .simulator > .container { display: block !important; max-width: 100% !important; padding: 0 !important; }
      .simulator > *:not(.container):not(.sim-share-modal-overlay) { display: none !important; }
      .simulator > .container > *:not(.sim-box) { display: none !important; }

      /* --- 3. Show only the active step inside sim-box ---
         Using :not(.active) for CSS3 compatibility (avoids compound selector in :not) */
      .sim-box { display: block !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; box-shadow: none !important; border: none !important; }
      .sim-progress { display: none !important; }
      .sim-step { display: none !important; }
      .sim-step.active { display: block !important; position: static !important; width: 100% !important; max-width: 100% !important; opacity: 1 !important; }

      /* --- 4. Force visibility on ALL dashboard elements (counter animations) ---
         .sim-dashboard-full has opacity:0 + animation:forwards by default.
         We must kill animations AND force opacity in one declaration block. */
      .sim-dashboard-full,
      .sim-dashboard-kpis,
      .sim-dashboard-charts,
      .sim-metric,
      .sim-chart-card,
      .sim-decision-analysis,
      .sim-balance,
      .sim-insight,
      .sim-pain-response,
      .sim-verdict,
      .sim-results,
      .sim-dashboard {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
      }

      /* --- 5. Canvas → static image swap --- */
      .print-canvas-img { display: block !important; max-width: 100% !important; height: auto !important; }
      canvas { display: none !important; }

      /* --- 6. Dashboard grid layout for print --- */
      .sim-dashboard-kpis { grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-sm) !important; }
      .sim-dashboard-charts { grid-template-columns: 1fr 1fr !important; }

      /* --- 7. Hide interactive/UI elements not needed in print --- */
      .sim-share,
      .sim-results-restart,
      .sim-billing-toggle,
      .sim-btn-back,
      .sim-btn-next,
      .sim-nav,
      .sim-progress,
      .sim-time-tabs,
      .sim-time-toggle-wrap,
      .sim-chart-legend,
      .sim-share-modal-overlay,
      .sim-role-toggles,
      .sim-roi-legend { display: none !important; }

      /* --- 8. Time bars: ensure static widths render --- */
      .sim-time-bar-track { background: var(--gris-clair) !important; }
      .sim-time-bar { transition: none !important; }
      .sim-time-group { }

      /* --- 9. Print header with hardcoded colors (no CSS var dependency) --- */
      .sim-step.active::before {
        content: 'Rapport ROI Qalia \2014 www.qalia.ai';
        display: block;
        text-align: center;
        font-size: 14pt;
        font-weight: 700;
        color: var(--brand-text);
        padding: var(--space-sm) 0;
        border-bottom: 2px solid #1B7E94;
        margin-bottom: var(--space-md);
      }

      /* --- 10. Print footer watermark --- */
      .sim-step.active::after {
        content: 'G\00e9n\00e9r\00e9 par Qalia \2014 www.qalia.ai \2014 +262 693 303 970 \2014 bonjour@qalia.ai';
        display: block;
        text-align: center;
        font-size: 8pt;
        color: var(--gris-400);
        padding: var(--space-md) 0 var(--space-xs);
        border-top: 1px solid var(--gris-200);
        margin-top: var(--space-lg);
      }

      /* --- 11. Layout adjustments (single continuous page) --- */
      .sim-dashboard-full { margin-bottom: var(--space-sm); }
    }

    /* ROI Chart (legacy compat) */
    .sim-roi-chart {
      margin: var(--space-md) 0;
      padding: var(--space-md);
      background: var(--gris-ui);
      border-radius: 1rem;
    }

    .sim-roi-chart-title {
      font-size: var(--fs-small);
      font-weight: 600;
      color: var(--gris);
      text-align: center;
      margin-bottom: var(--space-sm);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .sim-roi-chart canvas {
      width: 100%;
      height: auto;
      max-height: 280px;
    }

    .sim-roi-legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-md);
      margin-top: var(--space-sm);
    }

    .sim-roi-legend-item {
      display: flex;
      align-items: center;
      gap: var(--space-2xs);
      font-size: var(--fs-small);
      color: var(--gris);
      max-width: 100%;
      flex: 0 1 auto;
    }

    /* S7 2026-07-11 : les blocs correctifs @media (max-width:600px) du 2026-04-27
       (légende ROI, grilles inline, steps-grid) sont FUSIONNÉS dans le bloc mobile
       unique « SPRINT MOBILE avril 2026 » plus bas (1 seul @media 600px correctif). */

    /* S7 2026-07-11 : bloc « labels profils sim-task » 2026-04-27 supprimé.
       Aucune des classes ciblées (.sim-task-label, .sim-task-profile, .sim-task) n'existe
       dans le DOM ni dans le JS (les cartes générées utilisent .sim-task-card / .sim-task-role-badge). */

    .sim-roi-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }

    /* Verdict badge */
    .sim-verdict {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-xs) var(--space-md);
      border-radius: 1.5rem;
      font-weight: 700;
      font-size: var(--fs-body);
      margin-bottom: var(--space-md);
    }

    .sim-verdict.vert {
      background: rgba(58, 138, 106, 0.1);
      color: var(--succes);
      border: 2px solid rgba(58, 138, 106, 0.3);
      box-shadow: 0 0 14px rgba(58, 138, 106, 0.2), 0 0 4px rgba(58, 138, 106, 0.1);
    }

    .sim-verdict.jaune {
      background: rgba(212, 160, 32, 0.1);
      color: var(--warning-dark);
      border: 2px solid rgba(212, 160, 32, 0.3);
      box-shadow: 0 0 14px rgba(212, 160, 32, 0.2), 0 0 4px rgba(212, 160, 32, 0.1);
    }

    .sim-verdict.rouge {
      background: rgba(201, 64, 64, 0.1);
      color: var(--erreur);
      border: 2px solid rgba(201, 64, 64, 0.3);
      box-shadow: 0 0 14px rgba(201, 64, 64, 0.2), 0 0 4px rgba(201, 64, 64, 0.1);
    }

    .sim-verdict-icon {
      font-size: var(--fs-h4);
    }

    /* Bilan annuel */
    .sim-balance {
      background: var(--gris-ui);
      border-radius: 1rem;
      padding: var(--space-sm) var(--space-md) var(--space-xs); /* 62/38 golden */
      margin-bottom: var(--space-md);
      text-align: left;
    }

    .sim-balance-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--space-xs) 0;
      font-size: var(--fs-small);
      color: var(--gris);
    }

    .sim-balance-row strong {
      color: var(--noir);
    }

    .sim-balance-total {
      border-top: none;
      margin-top: var(--space-3xs);
      padding-top: var(--space-sm);
      font-size: var(--fs-body);
      font-weight: 600;
      position: relative;
    }

    .sim-balance-total::before {
      content: '';
      position: absolute;
      top: 0;
      left: 25%;
      width: 50%;
      height: 2px;
      background: var(--gris-clair);
    }

    .sim-balance-total.positif strong {
      color: var(--succes);
    }

    .sim-balance-total.negatif strong {
      color: var(--erreur);
    }

    /* Multi-select pain buttons : checkmark */
    .sim-pain-btn .sim-pain-check {
      display: none;
      position: absolute;
      top: 6px;
      right: 6px;
      width: 18px;
      height: 18px;
      background: var(--bordeaux);
      border-radius: 50%;
      color: var(--text-on-brand, #ffffff);
      font-size: var(--fs-caption);
      line-height: 18px;
      text-align: center;
    }

    .sim-pain-btn.selected .sim-pain-check {
      display: block;
    }

    /* Category labels for profile grid */
    .sim-choices-category-label {
      grid-column: 1 / -1;
      font-size: var(--fs-caption);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--gris);
      padding: var(--space-xs) 0 var(--space-3xs);
      padding-left: var(--space-sm);
      margin-top: var(--space-xs);
    }
    .sim-choices-category-label:first-child { margin-top: 0; }

    /* Profile grid: 3 columns default */
    .sim-choices-profiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-xs);
    }
    .sim-choices-profiles .sim-choice {
      padding: var(--space-sm) var(--space-xs);
      font-size: var(--fs-small);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .sim-choices-profiles .sim-choice small {
      font-size: var(--fs-caption);
      min-height: 2.6em;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Desktop compact: fit each simulator step on one screen (800px viewport) */
    @media (min-width: 1024px) {
      /* --- Simulator header: reduce to ~120px --- */
      .simulator { padding: var(--space-md) var(--space-lg); }
      .simulator > .container > .fade-in { margin-bottom: var(--space-xs) !important; }
      .simulator .section-tag { display: none; }
      .simulator h2 { font-size: var(--fs-h3); margin-bottom: 4px; }
      .simulator .section-subtitle { margin-bottom: var(--space-xs); }
      .simulator > .container > .fade-in > p:nth-child(4) { display: none; }
      .simulator > .container > .fade-in > p:nth-child(5) { display: none; }
      /* --- SimBox: tighter padding --- */
      .sim-box { padding: var(--space-md) var(--space-lg) var(--space-sm); }
      .sim-progress { margin-bottom: var(--space-xs); }
      /* --- Step 1: 5 columns, hide category labels --- */
      .sim-choices-profiles {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-2xs);
      }
      .sim-choices-profiles .sim-choice {
        padding: var(--space-xs) var(--space-2xs);
      }
      .sim-choices-category-label {
        display: none;
      }
      /* --- General step compaction --- */
      .sim-question { margin-bottom: 4px; }
      .sim-hint { margin-bottom: var(--space-xs); }
      .sim-nav { margin-top: var(--space-xs); }
    }

    /* Step profils: sim-box wider */
    .sim-box.sim-box-wide {
      max-width: var(--content-width);
    }

    /* Step 9 dashboard: full width */
    .sim-box.sim-box-dashboard {
      max-width: 1080px;
      width: 100%;
    }
    .sim-box.sim-box-dashboard .sim-metric {
      padding: var(--space-md) var(--space-sm) var(--space-sm); /* 62/38 golden */
    }
    .sim-box.sim-box-dashboard .sim-metric-value {
      font-size: var(--fs-h2);
    }
    .sim-box.sim-box-dashboard .sim-metric-value small {
      font-size: var(--fs-body);
    }
    .sim-box.sim-box-dashboard .sim-metric-label {
      font-size: var(--fs-small);
    }
    .sim-box.sim-box-dashboard .sim-metric {
      min-height: 140px;
    }
    .sim-box.sim-box-dashboard .sim-chart-card {
      padding: var(--space-lg) var(--space-lg) var(--space-md); /* 62/38 golden : lg(34)/md(21) */
    }
    .sim-box.sim-box-dashboard .sim-decision-analysis {
      padding: var(--space-lg) var(--space-lg) var(--space-md); /* 62/38 golden */
    }
    .sim-box.sim-box-dashboard .sim-eisenhower {
      font-size: var(--fs-body);
    }
    .sim-box.sim-box-dashboard .sim-dur,
    .sim-box.sim-box-dashboard .sim-consequences {
      font-size: var(--fs-body);
    }
    .sim-box.sim-box-dashboard .sim-insight {
      font-size: var(--fs-body);
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden */
    }
    .sim-box.sim-box-dashboard .sim-balance {
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden */
    }
    .sim-box.sim-box-dashboard .sim-balance-row {
      font-size: var(--fs-body);
      padding: var(--space-sm) 0;
    }
    .sim-box.sim-box-dashboard .sim-balance-total {
      padding-top: var(--space-md);
      font-size: var(--fs-lead);
    }
    .sim-box.sim-box-dashboard .sim-section-title {
      font-size: var(--fs-body);
      margin: var(--space-lg) 0 var(--space-md);
    }
    .sim-box.sim-box-dashboard .sim-qualiopi-alert {
      font-size: var(--fs-body);
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden */
    }
    .sim-box.sim-box-dashboard .sim-team-needs {
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden */
    }
    .sim-box.sim-box-dashboard .sim-team-needs h4 {
      font-size: var(--fs-body);
    }
    .sim-box.sim-box-dashboard .sim-team-needs ul {
      font-size: var(--fs-body);
    }
    .sim-box.sim-box-dashboard .sim-pain-response {
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden */
    }
    .sim-box.sim-box-dashboard .sim-pain-response h4 {
      font-size: var(--fs-body);
    }
    .sim-box.sim-box-dashboard .sim-pain-response p {
      font-size: var(--fs-body);
    }
    .sim-box.sim-box-dashboard .sim-advice {
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden */
    }
    .sim-box.sim-box-dashboard .sim-advice h4 {
      font-size: var(--fs-body);
    }
    .sim-box.sim-box-dashboard .sim-advice ul {
      font-size: var(--fs-body);
    }
    .sim-box.sim-box-dashboard .sim-results-title {
      font-size: var(--fs-h4);
      margin-bottom: var(--space-md);
    }
    .sim-box.sim-box-dashboard .sim-verdict {
      font-size: var(--fs-lead);
      padding: var(--space-sm) var(--space-lg);
      margin-bottom: var(--space-md);
    }
    .sim-box.sim-box-dashboard .sim-verdict-icon {
      font-size: var(--fs-h2);
    }
    .sim-box.sim-box-dashboard .sim-chart-title {
      font-size: var(--fs-small);
      margin-bottom: var(--space-md);
    }
    .sim-box.sim-box-dashboard .sim-ia-badge {
      font-size: var(--fs-caption);
      margin: var(--space-sm) auto var(--space-md);
    }
    .sim-box.sim-box-dashboard .sim-roi-legend {
      margin-top: var(--space-md);
    }
    .sim-box.sim-box-dashboard .sim-chart-legend {
      margin-top: var(--space-md);
    }
    .sim-box.sim-box-dashboard .sim-context-recap {
      font-size: var(--fs-body);
      margin-top: var(--space-sm);
    }
    .sim-box.sim-box-dashboard .sim-roi-summary {
      font-size: var(--fs-body);
      margin-top: var(--space-md);
    }
    .sim-box.sim-box-dashboard .sim-conformity-summary {
      font-size: var(--fs-body);
      padding: var(--space-sm) 0;
    }
    .sim-box.sim-box-dashboard .sim-conformity-content {
      font-size: var(--fs-body);
      padding: var(--space-md) 0;
    }

    /* Task step styles */
    .sim-task-tag {
      display: inline-flex;
      align-items: center;
      padding: var(--space-2xs) var(--space-sm);
      background: rgba(27, 126, 148, 0.1);
      color: var(--brand-text);
      border-radius: 1.5rem;
      font-size: var(--fs-small);
      font-weight: 600;
    }
    /* Role toggle bar in task step */
    .sim-role-toggles {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      margin-bottom: var(--space-sm);
      padding-bottom: var(--space-sm);
      border-bottom: 1px solid rgba(27,126,148,0.12);
    }
    .sim-role-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-2xs) var(--space-sm);
      border-radius: 1.5rem;
      font-size: var(--fs-small);
      font-weight: 600;
      cursor: pointer;
      border: 1.5px solid var(--bleu-canard);
      transition: background 0.2s, color 0.2s, opacity 0.2s;
      background: rgba(27, 126, 148, 0.1);
      color: var(--brand-text);
    }
    .sim-role-toggle.active {
      background: var(--bleu-canard);
      color: var(--text-on-brand, #ffffff);
    }
    .sim-role-toggle:not(.active) {
      opacity: 0.5;
      border-style: none;
    }
    .sim-role-toggle::before {
      content: '\2713';
      font-size: var(--fs-caption);
      font-weight: 700;
    }
    .sim-role-toggle:not(.active)::before {
      content: '\2715';
    }
    .sim-role-counter {
      display: inline-flex;
      align-items: center;
      padding: var(--space-2xs) var(--space-sm);
      font-size: var(--fs-caption);
      font-weight: 700;
      color: var(--brand-text);
      opacity: 0.7;
      white-space: nowrap;
    }
    .sim-task-check {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-xs) 0;
      font-size: var(--fs-small);
      color: var(--noir);
      cursor: pointer;
    }
    .sim-task-check input[type="checkbox"] {
      accent-color: var(--brand-text);
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .sim-task-check .sim-task-hours {
      font-size: var(--fs-caption);
      color: var(--gris);
      margin-left: auto;
    }
    /* Grille alignée pour les contrôles des task cards (volume, Sans IA, Qalia, gain) */
    .sim-task-grid {
      display: grid;
      grid-template-columns: 130px 140px 105px 1fr;
      gap: var(--space-xs);
      align-items: center;
      font-size: var(--fs-small);
      color: var(--gris);
    }
    .sim-task-grid > span {
      text-align: left;
      white-space: nowrap;
    }
    .sim-task-grid > span:last-child {
      text-align: right;
    }
    .sim-tasks-advanced {
      margin-bottom: var(--space-sm);
    }
    .sim-tasks-advanced summary {
      font-size: var(--fs-small);
      color: var(--brand-text);
      cursor: pointer;
      font-weight: 600;
      padding: var(--space-2xs) 0;
    }

    /* Expert mode slider container */
    .sim-expert-container {
      max-height: 480px;
      overflow-y: auto;
      mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
      padding-right: var(--space-xs);
    }
    .sim-expert-toggle {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--fs-small);
      color: var(--gris);
      margin-bottom: var(--space-sm);
      cursor: pointer;
    }
    .sim-expert-toggle input { accent-color: var(--brand-text); }

    /* Share modal */
    .sim-share-modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 9998;
      justify-content: center;
      align-items: center;
    }
    .sim-share-modal-overlay.active { display: flex; }
    .sim-share-modal {
      background: var(--blanc);
      border-radius: 1.5rem;
      max-width: 520px;
      width: 90%;
      max-height: 85vh;
      overflow-y: auto;
      padding: var(--space-lg) var(--space-lg) var(--space-md); /* 62/38 golden */
      position: relative;
    }
    .sim-share-modal-close {
      position: absolute;
      top: 1rem; right: 1rem;
      background: none;
      border: none;
      font-size: var(--fs-h2);
      cursor: pointer;
      color: var(--gris);
      line-height: var(--lh-tight);
    }
    .sim-share-modal h3 {
      font-size: var(--fs-body);
      margin-bottom: var(--space-sm);
      color: var(--brand-text-strong);
    }
    .sim-share-modal-section {
      margin-bottom: var(--space-md);
    }
    .sim-share-modal-section label {
      font-size: var(--fs-small);
      font-weight: 600;
      color: var(--gris);
      display: block;
      margin-bottom: var(--space-2xs);
    }
    .sim-share-recipient-chips {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
    }
    .sim-share-recipient-chip {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-2xs) var(--space-sm);
      border: 1.5px solid var(--gris-clair);
      border-radius: 1.5rem;
      background: var(--blanc);
      font-size: var(--fs-small);
      color: var(--gris);
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .sim-share-recipient-chip:hover {
      border-color: var(--brand-text);
      color: var(--brand-text);
    }
    .sim-share-recipient-chip.selected {
      background: var(--bleu-canard);
      border-color: var(--brand-text);
      color: var(--text-on-brand, #ffffff);
      font-weight: 600;
    }
    /* S7 2026-07-11 : règles .sim-share-checkbox-group/-label supprimées (classes absentes du DOM et du JS, 3 !important de dette) */
    .sim-share-channel-grid {
      display: flex;
      gap: var(--space-xs);
      flex-wrap: wrap;
    }
    .sim-share-channel-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      flex: 1;
      min-width: 140px;
      min-height: 48px;
      border: none;
      border-radius: 0.75rem;
      font-size: var(--fs-small);
      font-weight: 600;
      color: var(--text-on-brand, #ffffff);
      cursor: pointer;
      transition: opacity 0.2s;
      padding: var(--space-xs) var(--space-sm);
    }
    .sim-share-channel-btn:hover { opacity: 0.88; }
    .sim-share-channel-btn svg { flex-shrink: 0; }
    .sim-share-copy-toggle {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      font-size: var(--fs-small);
      cursor: pointer;
      padding: var(--space-xs) 0;
      color: var(--gris);
    }
    .sim-share-copy-toggle input[type="checkbox"] {
      accent-color: var(--brand-text);
      width: 16px;
      height: 16px;
    }
    @media (max-width: 600px) {
      .sim-share-modal-overlay.active {
        align-items: flex-end;
      }
      .sim-share-modal {
        border-radius: 1.5rem 1.5rem 0 0;
        max-height: 90vh;
        width: 100%;
      }
      .sim-share-channel-btn {
        min-width: 100%;
      }
    }

    /* Dashboard section separators */
    .sim-section-title {
      font-size: var(--fs-small);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--gris);
      padding-bottom: var(--space-xs);
      border-bottom: 1px solid var(--gris-clair);
      margin: var(--space-md) 0 var(--space-sm);
    }
    .sim-section-title:first-child { margin-top: 0; }

    /* Qualiopi alert banner */
    .sim-qualiopi-alert {
      background: rgba(147, 41, 81, 0.06);
      border: 1.5px solid rgba(147, 41, 81, 0.15);
      border-radius: 1rem;
      padding: var(--space-sm) var(--space-md) var(--space-xs); /* 62/38 golden */
      margin-bottom: var(--space-md);
      font-size: var(--fs-small);
      color: var(--noir);
      box-shadow: var(--shadow-bordeaux-glow-subtle);
    }
    .sim-qualiopi-alert strong { color: var(--brand-accent-text); }

    #simRoiAuditNote {
      margin-top: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      background: rgba(var(--bordeaux-rgb), 0.06);
      border: 1.5px solid rgba(var(--bordeaux-rgb), 0.15);
      border-radius: 1rem;
      box-shadow: var(--shadow-bordeaux-glow-soft);
      font-size: var(--fs-small);
      color: var(--noir);
      line-height: var(--lh-body);
      text-align: left;
    }

    /* Audit boost card (proposition augmentée conditionnelle) */
    .sim-audit-boost {
      background: var(--gris-ui);
      border: 1.5px solid rgba(27, 126, 148, 0.2);
      border-radius: 1rem;
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden */
      font-size: var(--fs-body);
      color: var(--noir);
      position: relative;
    }
    .sim-audit-boost-header {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      margin-bottom: var(--space-xs);
    }
    .sim-audit-boost-icon {
      width: 32px;
      height: 32px;
      background: rgba(27, 126, 148, 0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .sim-audit-boost-icon svg { stroke: var(--bleu-canard); }
    .sim-audit-boost strong { color: var(--brand-text); font-size: var(--fs-body); }
    .sim-audit-boost .sim-audit-boost-savings {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-top: var(--space-xs);
      font-size: var(--fs-body);
      font-weight: 700;
      color: var(--brand-text);
      flex-wrap: wrap;
    }
    .sim-audit-boost .sim-audit-boost-savings .sim-audit-arrow {
      font-size: 1.2em;
      opacity: 0.6;
    }
    .sim-audit-boost .sim-audit-boost-detail {
      margin-top: var(--space-xs);
      font-size: var(--fs-small);
      color: var(--gris);
      line-height: 1.5;
    }

    /* Disclaimer bilan */
    .sim-disclaimer {
      font-size: var(--fs-caption);
      color: var(--gris);
      text-align: center;
      line-height: 1.5;
      margin: 0;
      padding: 0 var(--space-md);
    }

    /* Verdict footnote (asterisk disclaimer) */
    .sim-verdict-footnote {
      font-size: var(--fs-caption);
      color: var(--gris);
      text-align: center;
      line-height: 1.4;
      margin: calc(-1 * var(--space-xs)) 0 var(--space-xs);
      padding: 0 var(--space-sm);
      opacity: 0.7;
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

    /* Team needs section */
    .sim-team-needs {
      background: rgba(27, 126, 148, 0.06);
      box-shadow: var(--shadow-zen);
      border-radius: 1rem;
      padding: var(--space-sm) var(--space-md) var(--space-xs); /* 62/38 golden */
      margin-bottom: var(--space-md);
    }
    .sim-team-needs h4 {
      font-size: var(--fs-small);
      color: var(--brand-text);
      margin: 0 0 var(--space-xs);
      font-weight: 700;
    }
    .sim-team-needs ul {
      margin: 0;
      padding-left: var(--space-md);
      font-size: var(--fs-small);
      line-height: var(--lh-body);
    }

    /* Responsive */
    @media (max-width: 640px) {
      .sim-choices-profiles {
        grid-template-columns: repeat(2, 1fr);
      }
      .sim-box.sim-box-wide { max-width: var(--content-width); }
    }
    @media (max-width: 380px) {
      .sim-choices-profiles {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .sim-box {
        padding: var(--space-lg) var(--space-md) var(--space-md); /* 62/38 golden : lg(34)/md(21) */
        border-radius: 16px;
      }

      .sim-choices {
        grid-template-columns: 1fr;
      }

      .sim-pain-grid {
        grid-template-columns: 1fr;
      }


      .sim-metric-value {
        font-size: var(--fs-h2);
      }

      .sim-dashboard-kpis {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
      }

      .sim-dashboard-charts {
        grid-template-columns: 1fr;
      }

      /* Dashboard, complete mobile override */
      .sim-dashboard-full {
        margin-bottom: var(--space-sm);
      }
      .sim-box.sim-box-dashboard .sim-metric-value {
        font-size: var(--fs-h4);
      }
      .sim-box.sim-box-dashboard .sim-metric-value small {
        font-size: var(--fs-caption);
      }
      .sim-box.sim-box-dashboard .sim-metric {
        min-height: 100px;
        padding: var(--space-sm) var(--space-xs) var(--space-xs); /* 62/38 golden */
      }
      .sim-box.sim-box-dashboard .sim-metric-label {
        font-size: var(--fs-caption);
      }
      .sim-box.sim-box-dashboard .sim-metric-icon {
        width: 36px;
        height: 36px;
        border-radius: 0.75rem;
        margin-bottom: var(--space-2xs);
      }
      .sim-box.sim-box-dashboard .sim-metric-icon svg {
        width: 20px;
        height: 20px;
      }
      .sim-box.sim-box-dashboard .sim-results-title {
        font-size: var(--fs-lead);
        margin-bottom: var(--space-sm);
      }
      .sim-box.sim-box-dashboard .sim-verdict {
        font-size: var(--fs-body);
        padding: var(--space-xs) var(--space-md);
        margin-bottom: var(--space-sm);
      }
      .sim-box.sim-box-dashboard .sim-verdict-icon {
        font-size: var(--fs-h4);
      }
      .sim-box.sim-box-dashboard .sim-qualiopi-alert {
        font-size: var(--fs-small);
        padding: var(--space-sm) var(--space-sm) var(--space-xs); /* 62/38 golden */
      }
      .sim-box.sim-box-dashboard .sim-team-needs {
        padding: var(--space-sm) var(--space-sm) var(--space-xs); /* 62/38 golden */
      }
      .sim-box.sim-box-dashboard .sim-team-needs h4 {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-team-needs ul {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-section-title {
        font-size: var(--fs-small);
        margin: var(--space-md) 0 var(--space-sm);
      }
      .sim-box.sim-box-dashboard .sim-decision-analysis {
        padding: var(--space-sm) var(--space-sm) var(--space-xs); /* 62/38 golden */
      }
      .sim-box.sim-box-dashboard .sim-eisenhower {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-balance-row {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-balance-total {
        font-size: var(--fs-body);
      }
      .sim-box.sim-box-dashboard .sim-dur,
      .sim-box.sim-box-dashboard .sim-consequences {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-insight {
        font-size: var(--fs-small);
        padding: var(--space-sm) var(--space-sm) var(--space-xs); /* 62/38 golden */
      }
      .sim-box.sim-box-dashboard .sim-pain-response {
        padding: var(--space-sm) var(--space-sm) var(--space-xs); /* 62/38 golden */
      }
      .sim-box.sim-box-dashboard .sim-pain-response h4,
      .sim-box.sim-box-dashboard .sim-pain-response p {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-advice {
        padding: var(--space-sm) var(--space-sm) var(--space-xs); /* 62/38 golden */
      }
      .sim-box.sim-box-dashboard .sim-advice h4,
      .sim-box.sim-box-dashboard .sim-advice ul {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-chart-card {
        padding: var(--space-sm) var(--space-sm) var(--space-xs); /* 62/38 golden : sm(13)/xs(8) */
      }
      .sim-box.sim-box-dashboard .sim-context-recap {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-conformity-summary {
        font-size: var(--fs-small);
      }
      .sim-box.sim-box-dashboard .sim-conformity-content {
        font-size: var(--fs-small);
      }
    }
    /* ============================================
       CORRECTIFS MOBILE (mars 2026)
       ============================================ */

    /* M1, hero-enso mobile override supprime, le ::before centre est responsive */

    /* M8, Compenser le bandeau sticky en bas (60px + marge) */
    @media (max-width: 767px) {
      body {
        padding-bottom: 72px;
      }
    }

    @media (max-width: 767px) {
      /* M6, Paliers Équipe : monter fs-caption → fs-small (respecte le nombre d'or) */
      /* Les descriptions dans les paliers team utilisent fs-caption inline */
      [style*="fs-caption"][style*="255,255,255,0.65"] {
        font-size: var(--fs-small) !important;
        color: color-mix(in srgb, var(--blanc) 90%, transparent) !important;
      }
    }

    /* R9/M4, Corriger le carrousel témoignages en mobile.
       S7 : !important retirés (cascade reconstruite). La marge négative doit battre
       le margin:0 auto de .t-single (0,2,0) : sélecteur doublé, plus tard dans la source. */
    @media (max-width: 767px) {
      .testimonials-carousel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 0 var(--space-md);
        width: calc(100% + 2 * var(--space-md));
        scrollbar-width: none; /* Firefox : masquer scrollbar native */
      }
      .testimonials-carousel,
      .testimonials-carousel.t-single {
        margin: 0 calc(-1 * var(--space-md));
      }
      .testimonials-carousel::-webkit-scrollbar {
        display: none; /* Chrome/Safari : masquer scrollbar native */
      }
      .testimonials-track {
        padding-right: var(--space-md);
      }
      .testimonial-card {
        min-width: 85vw;
        max-width: 85vw;
        scroll-snap-align: center;
      }
      .testimonial-meta {
        height: auto;
        min-height: 120px;
      }
      .testimonial-impact {
        height: auto;
        min-height: 80px;
      }
    }

    /* ============================================
       SPRINT MOBILE avril 2026 : fixes critiques
       (S7 2026-07-11 : bloc @media 600px correctif UNIQUE, fusion des ex-blocs
       2026-04-27 légende ROI / grilles inline / steps-grid. Les !important
       restants ciblent des styles INLINE : cas légitime, seul moyen de les battre.)
       ============================================ */
    @media (max-width: 600px) {

      /* Ex-bloc 2026-04-27 : légende ROI en 2 colonnes sur mobile */
      .sim-roi-legend {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs) var(--space-sm);
        padding: 0 var(--space-sm);
      }
      .sim-roi-legend-item {
        font-size: var(--fs-caption);
        line-height: 1.35;
        align-items: flex-start;
      }

      /* Ex-bloc 2026-04-27 : grilles 2 colonnes INLINE forcées en 1 colonne
         ([style*="1fr 1fr"] : seul !important bat un style inline) */
      .cap-card > div[style*="1fr 1fr"],
      .cat-panel-placeholder > div[style*="1fr 1fr"],
      .cat-panel > div[style*="1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-sm) !important;
      }
      .cap-card .cap-badge {
        font-size: var(--fs-caption);
      }

      /* Ex-bloc 2026-04-27 : cards Praticien solo / Organisme et équipe (steps-grid) */
      .steps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }
      .step-card {
        width: 100%;
        max-width: 100%;
      }

      /* Fix 1-2 : grilles JS-generated (conformite, empreinte, livrables)
         passent de 2 colonnes a 1 colonne sur mobile.
         Les inline styles utilisent grid-template-columns:1fr 1fr
         que seul !important peut overrider. */
      #simStep9 [style*="grid-template-columns:1fr 1fr"],
      .sim-chart-card [style*="grid-template-columns:1fr 1fr"],
      .info-callout [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* Fix 3 : tableau comparaison 4 colonnes (JS-generated)
         scroll horizontal fluide sur mobile */
      #roiThreeColumns {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: calc(-1 * var(--space-sm));
        margin-right: calc(-1 * var(--space-sm));
        padding: 0 var(--space-sm);
      }
      #roiThreeColumns > div {
        min-width: 380px;
      }
      #roiThreeColumns table {
        font-size: var(--fs-caption);
      }

      /* Fix 5 : pricing features 2 colonnes illisibles sur mobile
         (S7 : !important retiré, même spécificité que la base, plus tard dans la source) */
      .pricing-card .features {
        columns: 1;
      }

      /* Fix 7 : soutenabilite annuelle 3 KPIs (grid HTML inline repeat(3,1fr))
         Passe a 1 colonne sur mobile pour eviter le debordement */
      #simSoutenabiliteGrid {
        grid-template-columns: 1fr !important;
      }
      #simSoutenabiliteGrid > div {
        padding: var(--space-xs) !important;
      }

      /* Fix 7b : flex containers generes par JS dans le dashboard sim */
      .sim-dashboard-full [style*="display:flex"][style*="justify-content:space-around"],
      .sim-dashboard-full [style*="display:flex"][style*="justify-content:space-between"] {
        flex-wrap: wrap !important;
        gap: var(--space-sm) !important;
      }
      .sim-dashboard-full [style*="display:flex"][style*="justify-content:space-around"] > div,
      .sim-dashboard-full [style*="display:flex"][style*="justify-content:space-between"] > div {
        min-width: 45% !important;
        flex: 1 1 45% !important;
      }

      /* Fix 8 : pricing, spacing réduit des features sur mobile.
         (S1 2026-07-11 : la règle span[style*="display:block"] et le Fix 8b de
         l'ancien layout tarifs ont été retirés, chips en modale, bloc équipe en .team-fold)
         (S7 : !important retirés, mêmes spécificités que les bases, plus tard dans la source) */
      .pricing-card .features li {
        padding: var(--space-2xs) 0;
      }
      .pricing-card {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
      }
    }
    /* Ex-bloc 2026-04-27 : légende ROI en 1 colonne sur très petit écran
       (S7 : déplacé APRÈS le bloc 600px fusionné pour préserver l'ordre de cascade) */
    @media (max-width: 380px) {
      .sim-roi-legend {
        grid-template-columns: 1fr;
      }
    }

    /* R9, Desktop : fade-out sur les bords du carrousel (uniquement animés) */
    @media (min-width: 768px) {
      .testimonials-carousel::before,
      .testimonials-carousel::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
        z-index: 2;
        pointer-events: none;
      }
      .testimonials-carousel::before {
        left: 0;
        background: linear-gradient(to right, var(--gris-clair), transparent);
      }
      .testimonials-carousel::after {
        right: 0;
        background: linear-gradient(to left, var(--gris-clair), transparent);
      }
      /* Pas de fade sur les carousels centrés (≤3 cartes) ni en mode citation unique */
      .testimonials-carousel.no-scroll::before,
      .testimonials-carousel.no-scroll::after,
      .testimonials-carousel.t-single::before,
      .testimonials-carousel.t-single::after {
        display: none;
      }
    }

    /* S7 2026-07-11 : règles mortes du legacy multi-cartes supprimées.
       .testimonials-centered et .no-scroll ne sont plus jamais AJOUTÉES par le JS
       (classList.remove uniquement, mode t-single permanent) ; le min-height 555px
       était neutralisé par .t-single .testimonial-card { min-height: 0 }. */

    /* Carrousel documents : physique momentum + infinite loop + centrage */
    .doc-carousel-wrap {
      position: relative;
      max-width: 1000px;
      margin: 0 auto;
    }
    .doc-carousel {
      overflow: hidden;
      padding: var(--space-xs) 0;
      cursor: grab;
    }
    .doc-carousel:active { cursor: grabbing; }
    .doc-carousel-track {
      display: flex;
      gap: var(--space-md);
      padding: 0 var(--space-sm);
      will-change: transform;
    }
    .doc-carousel-track.centered {
      justify-content: center;
    }
    .doc-card {
      min-width: 260px;
      max-width: 300px;
      flex-shrink: 0;
      padding: var(--space-md) var(--space-md) var(--space-sm); /* 62/38 golden : md(21)/sm(13) */
      background: var(--blanc);
      border-radius: 0.75rem;
      border: 1px solid rgba(27,126,148,0.15);
      transition: box-shadow 0.4s var(--enso), transform 0.4s var(--enso);
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      user-select: none;
      -webkit-user-select: none;
    }
    .doc-card:hover {
      box-shadow: 0 8px 24px rgba(27,126,148,0.1);
      transform: translateY(-4px);
      border-color: rgba(27,126,148,0.4); /* V9.10 (Lovable A4) : affordance, la carte cliquable se signale */
    }
    /* V9.10 (Lovable A3) : flip du chip d'icone au survol des cartes cliquables (affordance) */
    .productions .doc-card-title svg { transition: background 0.2s, stroke 0.2s; }
    .productions .doc-card:hover .doc-card-title svg,
    .productions .doc-card:focus-visible .doc-card-title svg {
      background: var(--gradient-brand);
      stroke: var(--text-on-brand, #ffffff);
    }
    .doc-card-title {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
    }
    .productions .doc-card-title strong { font-size: var(--fs-small); line-height: 1.25; white-space: nowrap; } /* V9.7 : titre COMPLET sur 1 ligne, la carte s'elargit */
    .doc-card-title strong {
      color: var(--noir);
      font-size: var(--fs-body);
    }
    .doc-card p {
      font-size: var(--fs-small);
      color: var(--gris);
      line-height: 1.6;
      margin: 0;
      flex: 1;
    }
    .doc-card .doc-badge {
      font-size: var(--fs-caption);
      font-weight: 600;
      margin-top: auto;
      padding-top: var(--space-2xs);
    }
    /* Badges indicateurs RNQ sur les doc-cards (cohérent avec .pipeline-tag) */
    .doc-indicators {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3xs);
      margin-top: var(--space-2xs);
    }
    .doc-indicator {
      display: inline-block;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      padding: 2px var(--space-2xs);
      border-radius: 0.5rem;
      background: rgba(27, 126, 148, 0.10);
      color: var(--brand-text-strong);
      white-space: nowrap;
    }
    .doc-indicator--bordeaux {
      background: rgba(147, 41, 81, 0.10);
      color: var(--brand-accent-text);
    }
    /* Ligne d'ancrage valeur (micro-indication processus) */
    .doc-value {
      font-size: var(--fs-caption);
      color: var(--brand-text);
      font-weight: 600;
      font-style: italic;
      margin-top: var(--space-3xs);
      line-height: 1.4;
    }
    .doc-value--bordeaux {
      color: var(--brand-accent-text);
    }
    /* Séparateur documents transversaux */
    .doc-transversal-sep {
      min-width: 1px;
      flex-shrink: 0;
      width: 1px;
      background: rgba(27, 126, 148, 0.20);
      margin: var(--space-xs) var(--space-3xs);
      border-radius: 0.125rem;
      align-self: stretch;
    }
    .doc-transversal-sep--bordeaux {
      background: rgba(147, 41, 81, 0.20);
    }
    @media (min-width: 768px) {
      .doc-carousel-wrap::before,
      .doc-carousel-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 40px;
        z-index: 2;
        pointer-events: none;
      }
      .doc-carousel-wrap::before {
        left: 0;
        background: linear-gradient(to right, var(--gris-clair), transparent);
      }
      .doc-carousel-wrap::after {
        right: 0;
        background: linear-gradient(to left, var(--gris-clair), transparent);
      }
      .doc-carousel-wrap.no-scroll::before,
      .doc-carousel-wrap.no-scroll::after { display: none; }
    }
    @media (max-width: 767px) {
      .doc-carousel {
        margin: 0 calc(-1 * var(--space-md));
        width: calc(100% + 2 * var(--space-md));
        padding: var(--space-xs) var(--space-md);
      }
      .doc-card {
        min-width: 85vw;
        max-width: 85vw;
      }
    }

    /* ============================================================
       Documents : grille cliquable + modale detail (transposition
       Photos 3/4, decision fondateur 2026-07-08). Le carrousel
       momentum est desactive (voir initDocCarousel : return null) ;
       les cards deviennent une grille statique. Un clic ouvre une
       modale peuplee depuis le contenu EXISTANT de la carte (aucun
       texte reecrit). Le filtrage par cat-panel reste intact.
       Couleurs Qalia uniquement.
       ============================================================ */
    .productions .doc-carousel-wrap { max-width: 1040px; }
    .productions .doc-carousel-wrap::before,
    .productions .doc-carousel-wrap::after { display: none; } /* S7 : !important retiré, gagne par spécificité (0,2,1 > 0,1,1) */
    .productions .doc-carousel {
      overflow: visible;
      cursor: default;
      padding: var(--space-2xs) 0;
    }
    /* Flex centre : les rangees pleines remplissent la largeur, la derniere rangee incomplete se centre */
    .productions .doc-carousel-track {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: stretch;
      gap: var(--space-sm);
      padding: 0;
      transform: none; /* S7 : !important retiré, plus aucun inline concurrent (corps mort initDocCarousel purgé) */
    }
    .productions .doc-transversal-sep { display: none; }
    /* V9.10 : dimensionnement INTRINSEQUE. L'ancien plafond max-width:230px contredisait
       le titre nowrap V9.7 (titres jusqu'a ~282px) : 9 cartes debordaient de 8 a 42px.
       Padding au nombre d'or du DS : 13px vertical / 21px horizontal (couple 62/38),
       proportion haut/bas 13/8 = phi (rythme deja utilise dans la section). */
    .productions .doc-card {
      flex: 0 0 auto;
      min-width: 0;
      max-width: 100%;
      width: auto;
      cursor: pointer;
      position: relative;
      gap: var(--space-2xs);
      padding: var(--space-sm) var(--space-md) var(--space-xs);
    }
    .productions .doc-card:focus-visible {
      outline: 2px solid var(--bleu-canard);
      outline-offset: 3px;
    }
    /* V9.5 3a : icone a gauche, titre a droite sur UNE ligne, aligne a gauche */
    .productions .doc-card-title {
      flex-direction: row;
      align-items: center;
      gap: var(--space-xs);
      text-align: left;
    }
    .productions .doc-card-title svg {
      width: 32px;
      height: 32px;
      padding: 6px;
      flex-shrink: 0;
      border-radius: 0.6rem;
      background: rgba(27, 126, 148, 0.09);
      box-sizing: border-box;
    }
    .productions .doc-card-title svg[stroke="var(--bordeaux)"] {
      background: rgba(147, 41, 81, 0.09);
    }
    /* V9.3 C8 (2026-07-12) : carte minimale (icône + titre + « Voir détails »),
       description et tout le détail bascultés dans la modale au clic. */
    .productions .doc-card > p { display: none; }
    /* Detail masque sur la carte, deplace dans la modale (indicateurs, valeur, portee categorie).
       La portee categorie reste lisible dans la modale (scopeBlock). Le "Voir details" en bas suffit sur la carte. */
    .productions .doc-card .doc-indicators,
    .productions .doc-card .doc-value,
    .productions .doc-card .doc-badge { display: none; }
    .doc-card__more {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: auto;
      padding-top: var(--space-2xs);
      font-size: var(--fs-caption);
      font-weight: 700;
      color: var(--brand-text-strong);
      letter-spacing: 0.01em;
    }
    .productions .doc-card:hover .doc-card__more,
    .productions .doc-card:focus-visible .doc-card__more { text-decoration: underline; }
    @media (max-width: 767px) {
      .productions .doc-carousel {
        margin: 0;
        width: 100%;
        padding: var(--space-2xs) 0;
      }
      .productions .doc-carousel-track {
        gap: var(--space-xs);
      }
      .productions .doc-card { flex: 1 1 46%; min-width: 0; max-width: none; }
      /* V9.10 mobile : cartes etroites, le titre repasse en 2 lignes equilibrees (zero debordement) */
      .productions .doc-card-title strong { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
    }


    /* ===== V9.2 chantier 1 (2026-07-11) : groupes de la grille documents + capacit&eacute;s en slider =====
       Macarons de groupe : symbolique de marque (Athanor = construction, Citrinitas = transmission,
       Rubedo = &eacute;preuve de l'audit). Slider capacit&eacute;s : m&ecirc;me sc&eacute;nographie que les t&eacute;moignages
       (cartes superpos&eacute;es, is-active), reduced-motion respect&eacute;. Cascade sans surcharge forc&eacute;e. */
    .doc-group-head {
      flex: 1 1 100%;
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-top: var(--space-xs);
    }
    .doc-group-head::before,
    .doc-group-head::after {
      content: '';
      height: 1px;
      flex: 1;
      background: var(--gris-200);
    }
    .doc-group-macaron {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-2xs) var(--space-sm);
      border-radius: 2rem;
      font-size: var(--fs-caption);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .doc-group-macaron--ing { color: var(--brand-text); background: rgba(27, 126, 148, 0.1); }
    .doc-group-macaron--salle { color: var(--warning); background: rgba(200, 156, 44, 0.14); }
    .doc-group-macaron--conf { color: var(--brand-accent-text); background: rgba(147, 41, 81, 0.08); }
    body[data-theme="dark"] .doc-group-macaron--salle { color: var(--warning-light); }
    .cap-slider { position: relative; }
    .cap-slider-track { display: grid; }
    .cap-slider-track .cap-card {
      grid-area: 1 / 1;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s var(--enso), visibility 0.35s;
    }
    .cap-slider-track .cap-card.is-active {
      opacity: 1;
      visibility: visible;
    }
    .cap-controls {
      display: flex;
      align-items: center;
      justify-content: center; /* V9.6 Photo 5 : onglets + fleches groupes au centre (fin du vide central) */
      gap: var(--space-md);
      margin-top: var(--space-md);
      flex-wrap: wrap;
    }
    .cap-dots { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
    .cap-dot {
      border: 1px solid var(--gris-200);
      background: none;
      color: var(--gris);
      font-size: var(--fs-caption);
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: var(--space-2xs) var(--space-sm);
      border-radius: 2rem;
      cursor: pointer;
      min-height: 32px;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .cap-dot:hover { border-color: rgba(27, 126, 148, 0.42); color: var(--brand-text); }
    .cap-dot:focus-visible { outline: 2px solid var(--bleu-canard); outline-offset: 2px; }
    .cap-dot.is-active { background: var(--bleu-canard); border-color: var(--bleu-canard); color: var(--text-on-brand, #ffffff); }
    .coverage-annexes {
      margin-top: var(--space-sm);
      display: grid;
      gap: var(--space-2xs);
      text-align: left;
    }
    .coverage-annex {
      font-size: var(--fs-caption);
      color: var(--gris);
      line-height: var(--lh-body);
      background: var(--blanc);
      border: 1px solid var(--gris-clair);
      border-radius: 0.75rem;
      padding: var(--space-xs) var(--space-sm);
      margin: 0;
    }
    .coverage-annex strong { color: var(--noir); }
    @media (prefers-reduced-motion: reduce) {
      .cap-slider-track .cap-card { transition: none; }
      .cap-dot { transition: none; }
    }

    /* V9.3 C2 (2026-07-12) : histoire, auteur du verbatim + quadrature en schema SVG convergent. */
    /* Portrait de l'histoire (2026-07-28). L'avatar rond de 96 px traitait le
       fondateur comme une vignette d'attribution ; dans une section qui raconte
       SON histoire, le portrait est une image à part entière. Composition
       éditoriale : portrait 4:5 à gauche, récit à droite, les deux alignés en
       haut. Le récit garde sa mesure de lecture (environ 60 caractères). */
    .story-portrait {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: var(--space-lg);
      align-items: start;
      margin: var(--space-lg) auto 0;
      text-align: left;
    }
    .story-portrait__media { margin: 0; }
    .story-portrait__media img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      border-radius: var(--radius-card);
      box-shadow: 0 8px 24px rgba(147, 41, 81, 0.18);
    }
    .story-portrait__recit { line-height: var(--lh-body); font-size: var(--fs-body); color: var(--noir); }
    .story-portrait__recit p + p { margin-top: var(--space-sm); }
    .story-author-txt {
      display: block;
      margin-top: var(--space-sm);
      font-size: var(--fs-small);
      color: var(--gris);
      line-height: 1.4;
    }
    .story-author-txt strong { display: block; color: var(--noir); font-size: var(--fs-lead); font-weight: 600; }
    @media (max-width: 767px) {
      /* Une colonne : le portrait passe au-dessus du récit, contenu à une largeur
         qui reste une image et non un bandeau. */
      .story-portrait { grid-template-columns: 1fr; gap: var(--space-md); justify-items: center; }
      .story-portrait__media { max-width: 240px; width: 100%; text-align: center; }
      .story-portrait__recit { text-align: left; }
    }
    .story-quadrature-fig {
      margin: var(--space-md) auto 0;
      max-width: 520px;
      padding: 0;
    }
    .story-quadrature-fig .qd-svg { display: block; width: 100%; height: auto; }
    /* V9.6 A (2026-07-12, Photo 4) : trace du cercle circonscrit + revelation lettre par lettre. */
    /* V9.11 : l Enso ne se termine jamais. Le trait se pose, se tient, puis se
       denoue dans le meme sens avant de repartir : le geste du pinceau tourne en
       boucle. L opacite suit le trace pour que la fermeture ne soit pas un a-coup. */
    @keyframes qd-enso {
      0%   { stroke-dashoffset: 1244; stroke-opacity: 0.14; }
      34%  { stroke-dashoffset: 0;    stroke-opacity: 0.50; }
      58%  { stroke-dashoffset: 0;    stroke-opacity: 0.50; }
      92%  { stroke-dashoffset: -1244; stroke-opacity: 0.14; }
      100% { stroke-dashoffset: -1244; stroke-opacity: 0.14; }
    }
    @keyframes ql-in { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: no-preference) {
      .story-quadrature-fig .qd-circle { animation: qd-enso 9s cubic-bezier(.42,0,.58,1) infinite both; }
      .qd-tagline .ql-char { opacity: 0; }
      .qd-tagline.qd-go .ql-char { animation-name: ql-in; animation-duration: .45s; animation-fill-mode: both; }
    }

    /* V9.3 C6 (2026-07-12) : rangs d'export semantiques (collage direct / diffusion). */
    .export-rows { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 640px; margin: var(--space-xs) auto 0; }
    .export-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2xs); }
    .export-row-label {
      font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.05em;
      font-weight: 700; color: var(--brand-text); white-space: nowrap;
      flex-basis: 100%; margin-bottom: var(--space-3xs, 4px); /* V9.7 : label sur sa ligne, solutions en dessous */
    }
    /* V9.5 item 2 (2026-07-12) : rangee diffusion sur UNE ligne (label + toutes les solutions), alignee a gauche, scroll horizontal si depassement. */
    .export-rows.export-rows--wide { max-width: 100%; }
    .export-row--inline .export-row-label,
    /* V9.4 C (2026-07-12) : contrôle segmenté des 3 groupes de documents (un visible à la fois). */
    .doc-seg { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2xs); margin: 0 auto var(--space-md); }
    .doc-seg-btn {
      padding: var(--space-2xs) var(--space-sm); border-radius: 2rem;
      border: 1.5px solid var(--gris-200); background: transparent;
      color: var(--gris); font-family: inherit; font-size: var(--fs-small); font-weight: 700;
      letter-spacing: 0.02em; cursor: pointer; white-space: nowrap;
      transition: background 0.25s var(--enso), color 0.25s var(--enso), border-color 0.25s var(--enso);
    }
    .doc-seg-btn:hover { border-color: var(--gris-400); color: var(--noir); }
    .doc-seg-btn:focus-visible { outline: 2px solid var(--bleu-canard); outline-offset: 2px; }
    .doc-seg-btn.is-active[data-seg="ing"] { background: var(--bleu-canard); border-color: var(--bleu-canard); color: var(--text-on-brand, #ffffff); }
    .doc-seg-btn.is-active[data-seg="salle"] { background: var(--warning); border-color: var(--warning); color: var(--text-on-brand, #ffffff); }
    .doc-seg-btn.is-active[data-seg="conf"] { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--text-on-brand, #ffffff); }
    .doc-group { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); width: 100%; }
    /* V9.5 3b : indice de clic, les onglets non actifs clignotent 2x dans leur couleur (une seule fois au chargement). */
    .doc-seg-btn[data-seg="ing"] { --seg-hint: var(--bleu-canard); }
    .doc-seg-btn[data-seg="salle"] { --seg-hint: var(--warning); }
    .doc-seg-btn[data-seg="conf"] { --seg-hint: var(--bordeaux); }
    /* V9.7 : les onglets non actifs gardent leur teinte pour rester clairement cliquables. */
    .doc-seg-btn:not(.is-active) { background: color-mix(in srgb, var(--seg-hint, #888) 10%, transparent); border-color: color-mix(in srgb, var(--seg-hint, #888) 42%, transparent); color: var(--seg-hint, var(--gris)); }
    .doc-seg-btn:not(.is-active):hover { background: color-mix(in srgb, var(--seg-hint, #888) 18%, transparent); }
    @media (prefers-reduced-motion: no-preference) {
      .doc-seg-btn.doc-seg-hint { animation: doc-seg-blink 0.85s ease-in-out 2 both; }
    }
    @keyframes doc-seg-blink {
      0%, 100% { background: color-mix(in srgb, var(--seg-hint, #888) 10%, transparent); color: var(--seg-hint, var(--gris)); border-color: color-mix(in srgb, var(--seg-hint, #888) 42%, transparent); }
      50% { background: var(--seg-hint, #888); color: var(--text-on-brand, #ffffff); border-color: var(--seg-hint, #888); }
    }
    @media (max-width: 767px) { .doc-group { gap: var(--space-xs); } }

    /* ----- Modale document (Photo 4), couleurs Qalia ----- */
    .doc-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-md);
      background: rgba(21, 32, 30, 0.55);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.28s var(--enso), visibility 0s linear 0.28s;
    }
    .doc-modal.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.28s var(--enso);
    }
    .doc-modal__panel {
      position: relative;
      width: min(520px, 100%);
      max-height: 86vh;
      overflow-y: auto;
      background: var(--blanc);
      border-radius: 1rem;
      padding: var(--space-lg) var(--space-lg) var(--space-md);
      box-shadow: 0 1px 2px rgba(21,32,30,0.06), 0 24px 60px -18px rgba(21,32,30,0.30);
      transform: translateY(14px) scale(0.985);
      transition: transform 0.32s var(--enso);
    }
    .doc-modal.is-open .doc-modal__panel { transform: none; }
    .doc-modal__close {
      position: absolute;
      top: var(--space-sm);
      right: var(--space-sm);
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 50%;
      background: var(--gris-clair);
      color: var(--noir);
      cursor: pointer;
      transition: background 0.2s ease;
    }
    .doc-modal__close:hover { background: rgba(27,126,148,0.14); }
    .doc-modal__close:focus-visible { outline: 2px solid var(--bleu-canard); outline-offset: 2px; }
    .doc-modal__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 0.8rem;
      background: rgba(27,126,148,0.09);
      box-sizing: border-box;
      margin-bottom: var(--space-xs);
    }
    .doc-modal__icon--bordeaux { background: rgba(147,41,81,0.09); }
    .doc-modal__title {
      font-family: var(--font-display);
      color: var(--noir);
      font-size: var(--fs-h3);
      line-height: 1.15;
      margin: 0 0 var(--space-xs);
      padding-right: var(--space-lg);
    }
    .doc-modal__lead {
      font-size: var(--fs-body);
      color: var(--gris);
      line-height: var(--lh-body);
      margin: 0 0 var(--space-sm);
    }
    .doc-modal__block { margin-top: var(--space-sm); }
    .doc-modal__label {
      display: block;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--brand-text-strong);
      margin-bottom: var(--space-2xs);
    }
    .doc-modal__label--bordeaux { color: var(--brand-accent-text); }
    .doc-modal__chips { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
    /* V9.3 C4 (2026-07-12) : avant/après en 2 encadrés séparés de couleurs différentes. */
    .doc-transform { display: flex; align-items: stretch; gap: var(--space-2xs); margin: 0; }
    .doc-transform__box { flex: 1; border-radius: 0.6rem; padding: var(--space-xs) var(--space-sm); }
    .doc-transform__box p { margin: var(--space-3xs) 0 0; font-size: var(--fs-small); line-height: 1.45; }
    .doc-transform__tag { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
    .doc-transform__box--avant { background: rgba(147, 41, 81, 0.07); }
    .doc-transform__box--avant .doc-transform__tag { color: var(--brand-accent-text); }
    .doc-transform__box--avant p { color: var(--gris); }
    .doc-transform__box--apres { background: rgba(27, 126, 148, 0.09); }
    .doc-transform__box--apres .doc-transform__tag { color: var(--brand-text); }
    .doc-transform__box--apres p { color: var(--noir); font-weight: 600; }
    .doc-transform__arrow { display: flex; align-items: center; color: var(--gris-400); flex-shrink: 0; }
    @media (max-width: 520px) {
      .doc-transform { flex-direction: column; }
      .doc-transform__arrow { transform: rotate(90deg); align-self: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .doc-modal, .doc-modal__panel { transition: opacity 0.01s linear; }
      .doc-modal__panel { transform: none; }
    }

    /* ===== Comparatif : style transposé (amendement DS 2026-07-08), couleurs Qalia ===== */
    .cmp-wrap {
      max-width: 860px;
      margin: var(--space-md) auto 0;
      border: 1px solid var(--gris-clair);
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(21, 32, 30, 0.05), 0 14px 34px -14px rgba(21, 32, 30, 0.14);
      background: var(--blanc);
    }
    .cmp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-body); }
    .cmp-table th, .cmp-table td { padding: var(--space-sm); text-align: left; vertical-align: top; }
    .cmp-table thead th {
      /* 2026-07-27 : le fond était le littéral #F4F8F9, figé sur tous les thèmes,
         alors que --gris suit le thème et devient CLAIR en sombre. L'en-tête
         affichait donc du gris clair sur du blanc cassé : 1,26:1, illisible.
         --blanc-casse suit le thème (albedo en clair, nigredo en sombre). */
      font-weight: 600; color: var(--gris); background: var(--blanc-casse);
      border-bottom: 1px solid var(--gris-clair);
    }
    .cmp-table .cmp-ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; }
    .cmp-table .cmp-col-qalia { background: rgba(27, 126, 148, 0.07); }
    /* 2026-07-27 : --bleu-dark est un token d'IDENTITÉ figé ; sur le fond sombre du
       thème dark l'en-tête tombait à 3,02:1. --brand-text-strong suit le thème. */
    .cmp-table thead th.cmp-col-qalia { color: var(--brand-text-strong); }
    .cmp-table tbody td { border-bottom: 1px solid var(--gris-clair); color: var(--gris); transition: background 0.2s var(--enso); }
    .cmp-table tbody tr:last-child td { border-bottom: none; }
    .cmp-table tbody td:first-child { font-weight: 600; color: var(--noir); }
    .cmp-table tbody td.cmp-col-qalia { color: var(--noir); }
    .cmp-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--noir) 2.5%, transparent); } /* S7 : zébrage neutre compatible thème sombre (ex-#FAFCFC codé en dur) */
    .cmp-table tbody tr:nth-child(even) td.cmp-col-qalia { background: rgba(27, 126, 148, 0.11); }
    @media (max-width: 640px) {
      .cmp-table thead { display: none; }
      .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display: block; width: 100%; }
      .cmp-table tr { border-bottom: 1px solid var(--gris-clair); padding: var(--space-2xs) var(--space-2xs) var(--space-xs); }
      .cmp-table tbody tr:last-child { border-bottom: none; }
      /* S7 : !important retirés, sélecteurs groupés à spécificité >= aux règles de base
         (.cmp-table tbody td 0,1,2 ; zébrage nth-child(even) 0,2,3 ; qalia even 0,3,3),
         le bloc mobile venant plus tard dans la source. */
      .cmp-table td { padding: var(--space-3xs) var(--space-xs); }
      .cmp-table td,
      .cmp-table tbody td,
      .cmp-table tbody tr:nth-child(even) td { border: none; background: transparent; }
      /* DS 02-Typographie § 2.4 : DM Serif Display n'existe qu'en 400. Tout autre poids
       produit un faux gras synthétique qui dégrade les empattements. Ces règles héritaient
       d'un 600 (2026-07-28). */
      .cmp-table td:first-child { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h4); color: var(--noir); padding-top: var(--space-2xs); }
      .cmp-table td[data-cmp]::before {
        content: attr(data-cmp); display: block; font-size: var(--fs-caption);
        text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris); margin-bottom: 2px;
      }
      .cmp-table td.cmp-col-qalia,
      .cmp-table tbody tr:nth-child(even) td.cmp-col-qalia { background: rgba(27, 126, 148, 0.08); border-radius: 0.5rem; margin-top: var(--space-3xs); }
    }

    /* ===== Profils : sélecteur + panneau détail (transposé Photo 2), couleurs Qalia ===== */
    .profils-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-md); align-items: stretch; }
    @media (min-width: 900px) { .profils-layout { grid-template-columns: 0.92fr 1.25fr; gap: var(--space-lg); } }
    .profils-layout #targetGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); height: 100%; }
    .profils-layout .target-card {
      cursor: pointer; text-align: center; padding: var(--space-sm);
      background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: 0.875rem;
      box-shadow: none;
      transition: border-color 0.25s var(--enso), box-shadow 0.25s var(--enso), background 0.25s var(--enso), transform 0.2s var(--enso);
    }
    .profils-layout .target-card::before { display: none; }
    .profils-layout .target-card:hover { transform: none; border-color: rgba(27, 126, 148, 0.42); box-shadow: 0 1px 2px rgba(21, 32, 30, 0.05), 0 8px 20px -10px rgba(21, 32, 30, 0.16); }
    .profils-layout .target-card p { display: none; }
    .profils-layout .target-card h3 { font-size: var(--fs-small); margin: var(--space-2xs) 0 0; padding: 0; color: var(--noir); line-height: var(--lh-heading); }
    .profils-layout .target-card .target-icon { width: 38px; height: 38px; margin: 0 auto var(--space-2xs); border-radius: 0.6rem; box-shadow: none; }
    .profils-layout .target-card:hover .target-icon { transform: none; box-shadow: none; }
    .profils-layout .target-card.pd-active { border-color: var(--bleu-canard); background: rgba(27, 126, 148, 0.06); box-shadow: 0 1px 2px rgba(21, 32, 30, 0.05), 0 8px 20px -10px rgba(27, 126, 148, 0.28); }
    .profils-layout .target-card:focus-visible { outline: 2px solid var(--bleu-canard); outline-offset: 2px; }

    .profils-detail {
      background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: 1rem;
      padding: var(--space-md) var(--space-lg); box-shadow: 0 1px 2px rgba(21, 32, 30, 0.05), 0 18px 44px -20px rgba(21, 32, 30, 0.18);
      /* Contenu resserre pour que le profil le plus dense tienne dans la hauteur de grille,
         ce qui permet a align-items: stretch de rendre le panneau constant quel que soit le profil. */
      display: flex; flex-direction: column; justify-content: center;
    }
    .profils-detail .pd-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: -0.02em; color: var(--noir); margin: 0 0 var(--space-3xs); }
    .profils-detail .pd-pain { color: var(--gris); font-size: var(--fs-small); margin: 0 0 var(--space-sm); line-height: var(--lh-body); }
    .profils-detail .pd-block { margin-bottom: var(--space-sm); }
    .profils-detail .pd-block:last-child { margin-bottom: 0; }
    /* 2026-07-27, audit contrastes : ces deux règles prenaient --bleu-dark, un token
       d'IDENTITÉ figé sur tous les thèmes, au lieu de l'encre sémantique --brand-text-strong
       qui, elle, s'adapte. En thème sombre le texte tombait à 3,0:1 et 3,18:1. */
    .profils-detail .pd-label { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--brand-text-strong); margin: 0 0 var(--space-2xs); }
    .profils-detail .pd-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
    .profils-detail .pd-chip { font-size: var(--fs-caption); padding: 4px 10px; border-radius: 0.6rem; background: rgba(27, 126, 148, 0.08); color: var(--brand-text-strong); border: 1px solid rgba(27, 126, 148, 0.15); }
    .profils-detail .pd-exig { font-size: var(--fs-small); color: var(--noir); line-height: var(--lh-body); margin: 0; }
    .profils-detail .pd-example { background: rgba(27, 126, 148, 0.06); border: 1px solid rgba(27, 126, 148, 0.15); border-radius: 0.75rem; padding: var(--space-sm) var(--space-md); }
    .profils-detail .pd-example .pd-label { margin-bottom: var(--space-3xs); }
    .profils-detail .pd-example .pd-ex-row { display: flex; gap: var(--space-xs); align-items: flex-start; }
    .profils-detail .pd-example svg { width: 16px; height: 16px; color: var(--bleu-canard); flex-shrink: 0; margin-top: 3px; }
    .profils-detail .pd-example p { margin: 0; font-size: var(--fs-small); color: var(--noir); line-height: var(--lh-body); }
    .profils-detail.pd-anim { animation: pdFade 0.28s var(--enso); }
    @keyframes pdFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @media (prefers-reduced-motion: reduce) { .profils-detail.pd-anim { animation: none; } }

    /* ===== Profils unifiés V9 (S5 2026-07-11) ===== */
    /* Trust bar absorbée en pied de hero : bandeau pleine largeur qui compense le
       padding du hero (mêmes tokens à tous les breakpoints), peint au-dessus du
       cercle décoratif ::before ; mesh du hero conservé, fond bleu-canard distinct. */
    .hero .trust-bar {
      position: relative;
      margin: var(--space-2xl) calc(-1 * var(--space-md)) calc(-1 * var(--space-2xl));
    }
    /* Sous-bloc « Votre métier en détail » de la section unifiée #profileRouter */
    .pr-metier-head {
      text-align: center;
      max-width: var(--content-width);
      margin: var(--space-2xl) auto 0;
    }
    .pr-metier-head h3 {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--fs-h3);
      letter-spacing: -0.02em;
      color: var(--noir);
      margin: 0;
    }

    /* ===== Design V9 (S6 2026-07-11) ===== */
    /* Nav : CTA accentué quand la nav est scrollée (glow Athanor dosé, IDP-05 amendé 2026-07-08).
       La transition box-shadow existe déjà sur .nav-cta a. */
    .nav.scrolled .nav-cta a {
      /* V9.10 (Lovable A5) : glow reduit, le halo fort est reserve aux 2 porteurs de
         conversion (CTA hero + panneau synthese), pas au chrome permanent */
      box-shadow: 0 2px 10px rgba(27, 126, 148, 0.28);
    }
    /* Bloc d'attente ROI : les deux h3 du bloc (rétrogradés h2 -> h3, 1 h2 par section) gardent leur rendu de titre de section */
    .roi-attente h3 {
      font-family: var(--font-display);
      font-size: var(--fs-h2);
      font-weight: 400;
      color: var(--brand-text);
      line-height: var(--lh-heading);
      letter-spacing: -0.02em;
      margin-bottom: var(--space-sm);
    }
    @media (prefers-reduced-motion: reduce) {
      .nav-cta a { transition: none; }
    }

    /* ============================================================
       S7 2026-07-11 : densité verticale desktop (cible 13,5 écrans à 1440x900)
       CSS additif pur, contenu INTACT. Scopé min-width:1024px : aucun impact
       mobile (polices et line-heights mobiles intacts par construction).
       Levier principal : tokens Fibonacci réduits d'un cran là où c'est généreux
       (redéfinitions scopées par section, les couplages internes suivent).
       ============================================================ */
    @media (min-width: 1024px) {
      /* Hero : 2xl -> xl (padding section + marges trust-bar couplées), gaps resserrés */
      .hero { --space-2xl: var(--space-xl); }
      .hero .container { gap: var(--space-md); }
      .hero .trust-bar { --space-xl: var(--space-lg); }

      /* Problème : illustration bornée, respiration d'un cran */
      .problem { padding-bottom: var(--space-lg); }
      #problem .section-illustration { margin-bottom: var(--space-md); }
      #problem .section-illustration svg { max-height: 300px; width: auto; }
      .pain-grid { gap: var(--space-sm); margin-bottom: var(--space-sm); }
      .shock-stat { --space-xl: var(--space-lg); --space-lg: var(--space-md); }

      /* Histoire : bandeau resserré */
      .story { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

      /* Solution : xl partout au lieu de 2xl, cartes étapes et modes compactées */
      .solution { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
      .sol-modes { margin-top: var(--space-md); }
      .sol-modes > .fade-in { margin-bottom: var(--space-sm); }
      .sol-modes .mode-card { padding-top: var(--space-lg); padding-bottom: var(--space-md); }
      .step-card { padding-top: var(--space-md); padding-bottom: var(--space-sm); }

      /* Profils : le sous-bloc métiers perd son couloir 2xl */
      .profile-router { padding: var(--space-lg) 0 var(--space-md); }
      .pr-metier-head { margin-top: var(--space-md); }
      .target-metiers { margin-top: var(--space-md); padding-top: var(--space-md); padding-bottom: var(--space-sm); }
      .profils-layout { margin-top: var(--space-sm); }

      /* Productions : section xl, wrapper et cartes resserrés */
      .productions { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
      .productions-header { margin-bottom: var(--space-sm); }
      .productions > .fade-in { margin-top: var(--space-sm); padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
      .productions .doc-card { padding: var(--space-sm) var(--space-sm) var(--space-xs); }

      /* Simulateur : bloc d'attente ROI recollé au simulateur */
      .simulator { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
      .roi-attente { margin-bottom: var(--space-md); }
      .roi-fallback-header { margin-bottom: var(--space-sm); }
      .roi-attente > .container + .container { margin-top: var(--space-sm); }

      /* Témoignages : scène compactée, hauteur méta fluide (cartes superposées en
         grille : la scène suit le max du panel, pas de saut entre témoignages) */
      .testimonials { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
      .testimonials-carousel.t-single .t-stage { padding: var(--space-lg) var(--space-lg) var(--space-md); }
      .testimonials-carousel.t-single .testimonial-meta { height: auto; min-height: 56px; }

      /* Lucidité : zebra table dense (padding vertical des cellules d'un cran) */
      .lucidite { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
      .cmp-table th, .cmp-table td { padding: var(--space-xs) var(--space-sm); }
      .cmp-wrap { margin-top: var(--space-sm); }

      /* Tarifs : section xl, cartes compactées */
      .pricing { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
      .pricing-card { padding-top: var(--space-lg); padding-bottom: var(--space-sm); }

      /* FAQ : section xl */
      .faq { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

      /* CTA final : 3xl -> xl+sm */
      .final-cta { --space-3xl: calc(var(--space-xl) + var(--space-sm)); }

      /* Pied de page */
      .footer { padding-top: var(--space-md); padding-bottom: var(--space-md); }

      /* --- S7 passe 2 : résidus par section (mesures navigateur 1440x900) --- */
      /* Histoire : le padding de section est INLINE et consomme --space-xl : token scopé */
      #histoire { --space-xl: var(--space-lg); }
      /* Problème : illustration bornée, douleurs sur une rangée de 4, headers resserrés */
      #problem .section-illustration svg { max-height: 240px; }
      /* Douleurs sur une rangée de 4 : le scrollWidth excédentaire constant (+36 px)
         est un pseudo-élément décoratif volontairement rogné (overflow:hidden), le
         CONTENU (pain-head 418 -> wrap) tient : vérifié enfant par enfant. */
      .pain-grid { grid-template-columns: repeat(4, 1fr); }
      .pain-card { padding: var(--space-sm); }
      /* V9.1 chantier B6 (2026-07-11) : titres des cartes douleur sur UNE ligne.
         Grille elargie (900 -> 1100 px), carres numerotes reduits (52 -> 44 px),
         gap reduit, police fluide bornee par la mesure des largeurs naturelles
         (« La remise en cause » : 180 px a 20 px ; 144 px a 16 px, dispo mini 158 px). */
      .pain-grid { max-width: 1100px; }
      .pain-card .level { width: 44px; height: 44px; font-size: var(--fs-body); border-radius: 0.75rem; }
      .pain-card .pain-head { gap: var(--space-xs); }
      .pain-card h3 { font-size: clamp(1rem, 1.4vw, 1.25rem); white-space: nowrap; }
      .problem-header { margin-bottom: var(--space-sm); }
      .problem-header h2 { margin-bottom: var(--space-2xs); }
      /* Solution : intro élargie (moins de lignes, texte intact), headers resserrés */
      .solution-header { margin-bottom: var(--space-sm); }
      .solution-header h2 { margin-bottom: var(--space-2xs); }
      .solution-intro { max-width: 780px; margin-bottom: var(--space-xs); }
      .sol-modes .mode-card { padding-top: var(--space-md); }
      /* Profils : la marge du header est INLINE et consomme --space-md : token scopé.
         Le panneau détail (JS) et la grille cible se compriment ensemble (stretch). */
      .profile-router-header { --space-md: var(--space-sm); }
      .profils-detail { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
      .profils-detail .pd-block { margin-top: var(--space-xs); }
      .profils-detail .pd-title { margin-bottom: var(--space-3xs); }
      .profils-detail .pd-pain { margin-bottom: var(--space-2xs); }
      /* Productions */
      .productions-header h2 { margin-bottom: var(--space-2xs); }
      .productions .cat-tabs { margin-bottom: var(--space-sm); }
      /* Simulateur : bloc d'attente */
      .roi-fallback-card { padding: var(--space-sm); }
      .roi-attente .container > p { margin-bottom: var(--space-xs); }
      /* Témoignages */
      #temoignages .section-header { margin-bottom: var(--space-sm); }
      #temoignages .cat-tabs { margin-bottom: var(--space-sm); }
      .testimonials-carousel.t-single .t-stage { padding: var(--space-md) var(--space-lg) var(--space-sm); min-height: 0; }
      /* Lucidité : cellules resserrées d'un cran supplémentaire (le conteneur est
         borné à 700px par un wrapper inline : l'élargissement était sans effet) */
      .cmp-table th, .cmp-table td { padding: var(--space-2xs) var(--space-sm); }
      #lucidite h3 { margin-bottom: var(--space-3xs); }
      #lucidite .q-seg-panel .container > div:first-child { margin-bottom: var(--space-sm); }
      /* Tarifs */
      .pricing-header { margin-bottom: var(--space-sm); }
      .pricing-grid { margin-bottom: var(--space-md); }
      .pricing-card .features { margin-top: var(--space-sm); }
      /* Hero : sous-titre et rangée CTA recollés */
      .hero-copy .hero-sub { margin-bottom: var(--space-sm); }
      .hero-copy h1 { margin-bottom: var(--space-sm); }
      .hero-chips { margin-bottom: var(--space-xs); }
      /* Solution : cartes étapes resserrées (marges, pas les line-heights) */
      .step-card p { margin-bottom: var(--space-xs); }
      .step-card h4, .step-card h3 { margin-bottom: var(--space-2xs); }
      .sol-modes > .fade-in p { margin-top: var(--space-2xs); }
      /* Simulateur : cartes de choix profil compactées (padding, pas les polices) */
      .sim-choices-profiles .sim-choice { padding: var(--space-xs) var(--space-xs); }
      .sim-choices-profiles .sim-choice small { min-height: 0; }
      .sim-question { margin-bottom: var(--space-3xs); }
      .sim-hint { margin-bottom: var(--space-xs); }
      /* --- S7 passe 4 : dernier cran mesuré --- */
      .roi-attente h3 { margin-bottom: var(--space-2xs); }
      .productions-header { margin-bottom: var(--space-2xs); }
      .productions-header .section-subtitle { margin-bottom: var(--space-2xs); }
      .pricing-card .tier-name { margin-bottom: var(--space-2xs); }
      .pricing-card .price { margin-bottom: var(--space-2xs); }
      .profils-layout .target-card { padding: var(--space-xs) var(--space-sm); }
      .testimonials-carousel.t-single .t-controls { margin-top: var(--space-xs); }
      /* --- S7 passe 5 : micro-marges transverses --- */
      .section-tag { margin-bottom: var(--space-2xs); }
      .trust-item { padding: var(--space-2xs) var(--space-xs); }
    }

    /* ===== Correctifs S9b (2026-07-11) =====
       P0 accessibilité : cibles tactiles >= 44 px (mobile ET desktop, le design le supporte),
       déclencheur modale tarifs en chip, pont narratif avant le routeur de profils,
       caption sous le CTA de pied de FAQ. Aucune surcharge forcée de cascade. */
    .team-tab,
    .q-seg-btn {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .faq-group-toggle { min-height: 44px; }
    .pricing-modal__close { width: 44px; height: 44px; }
    .pricing-feature-more {
      display: inline-flex;
      align-items: center;
      padding: 6px 12px;
      border: 1px solid rgba(27, 126, 148, 0.55);
      border-radius: 999px;
      background: rgba(27, 126, 148, 0.12);
      text-decoration: none;
    }
    .pricing-feature-more:hover {
      background: rgba(27, 126, 148, 0.24);
      color: rgba(42, 157, 182, 1);
    }
    .section-bridge {
      text-align: center;
      max-width: 680px;
      margin: 0 auto var(--space-sm);
      font-size: var(--fs-small);
      font-style: italic;
      color: var(--gris);
    }
    .faq-cta-caption {
      margin-top: var(--space-xs);
      font-size: var(--fs-caption);
      color: var(--gris);
    }

  
    /* V9.11 : indice de cliquabilite, pose une seule fois quand la zone entre dans
       le champ de vision. Meme intention que l indice deja en place sur les segments
       de documents, transpose aux cartes de profil et aux onglets de categorie.
       Deux intensites : pleine si le visiteur n a rien choisi, atenuee s il a deja
       selectionne sa categorie (il sait que c est cliquable, insister devient du bruit). */
    @keyframes q-hint-ring {
      0%, 100% { box-shadow: 0 0 0 0 rgba(27, 126, 148, 0); }
      45%      { box-shadow: 0 0 0 4px rgba(27, 126, 148, 0.20); }
    }
    @keyframes q-hint-tab {
      0%, 100% { box-shadow: 0 0 0 0 rgba(27, 126, 148, 0); transform: translateY(0); }
      45%      { box-shadow: 0 0 0 3px rgba(27, 126, 148, 0.22); transform: translateY(-1px); }
    }
    @media (prefers-reduced-motion: no-preference) {
      .target-card.q-hint { animation: q-hint-ring 0.9s ease-in-out 2 both; }
      .cat-tab.q-hint { animation: q-hint-tab 0.8s ease-in-out 2 both; }
      .q-seg-btn.q-hint { animation: q-hint-tab 0.8s ease-in-out 2 both; }
      .target-card.q-hint--doux, .cat-tab.q-hint--doux, .q-seg-btn.q-hint--doux { animation-iteration-count: 1; animation-duration: 0.65s; }
      /* L onglet deja selectionne ne recoit pas l indice : il n y a rien a y decouvrir. */
      .q-seg-btn[aria-selected="true"].q-hint { animation: none; }
      /* L onglet deja actif ne recoit pas l indice : il n y a rien a y decouvrir. */
      .cat-tab.active.q-hint { animation: none; }
    }

    /* V9.12 : les cercles ENTIERS ne peuvent pas montrer un trace en pointilles, il n y
       a pas de depart ni d arrivee. Ils recoivent une respiration d echelle de tres
       basse amplitude (2,2 % et 2,8 %), assez pour que l oeil percoive un souffle, assez
       peu pour ne jamais deranger la lecture. Le TRAIT n est pas touche : ni epaisseur,
       ni couleur, ni opacite, conformement a la consigne.
       Les fleches du carrousel de temoignages restent immobiles : ce sont des commandes,
       une animation permanente y serait du bruit. */
    /* V9.15 : la respiration passe par la propriete INDEPENDANTE `scale`, jamais par
       `transform`. Raison : plusieurs des elements concernes utilisent deja `transform`
       pour leur mise en place, et pas de la meme facon selon la largeur d ecran (la
       pastille de bascule est centree par translate sur grand ecran, tournee de 90 deg
       sur mobile). Animer `transform` remplacerait la propriete entiere et casserait ce
       positionnement. La propriete `scale` se COMPOSE avec `transform`, donc aucune
       collision possible, quel que soit le contexte, present ou futur. */
    /* V9.16 : respiration d OPACITE, indispensable sur un trait de 1 px. L echelle seule
       ne se voit pas a cette finesse : c est le passage du presque invisible au net qui
       fait exister le cercle. L opacite est portee par le pseudo-element, donc la TEINTE
       et l EPAISSEUR du trait restent exactement celles de la charte. */
    @keyframes q-cercle-voile {
      0%, 100% { opacity: 0.45; }
      50%      { opacity: 1; }
    }
    @keyframes q-cercle-souffle {
      0%, 100% { scale: 1; }
      50%      { scale: var(--souffle, 1.022); }
    }
    @media (prefers-reduced-motion: no-preference) {
      /* Moyeu de la quadrature : contrepoint lent a l Enso qui l entoure. */
      .qd-hub-bg {
        transform-box: fill-box;
        transform-origin: center;
        animation: q-cercle-souffle 9s ease-in-out infinite both;
      }
      /* Pastille de bascule entre chaos et methode : cadencee sur le cycle des colonnes.
         Image-cle DEDIEE : cet element est centre par transform translate(-50%, -50%).
         Animer `transform: scale()` seul remplacerait la propriete entiere et ferait
         sauter le centrage, la pastille glissant sur le texte de la colonne de droite.
         La transformation est donc reprise en entier a chaque etape. */
      .hv-arrow { --souffle: 1.028; animation: q-cercle-souffle var(--hv-cycle, 9s) ease-in-out infinite both; }
    }

    /* V9.13 : respiration des deux GRANDS anneaux decoratifs, ceux que l oeil remarque.
       Cadence lente et amplitude faible : sur 500 px, un souffle rapide serait agite,
       pas vivant. Les deux anneaux respirent en decalage (16 s et 13 s, sans multiple
       commun simple) pour que la page ne batte jamais au meme rythme partout.
       Le trait n est pas touche : ni epaisseur, ni couleur. */
    @media (prefers-reduced-motion: no-preference) {
      .hero::before {
        --souffle: 1.09;
        animation: q-cercle-souffle 11s ease-in-out infinite both,
                   q-cercle-voile 11s ease-in-out infinite both;
      }
      .final-cta .container::after {
        --souffle: 1.10;
        animation: q-cercle-souffle 9s ease-in-out infinite both,
                   q-cercle-voile 9s ease-in-out infinite both;
      }
    }

    /* V9.14 : couleur de selection du texte. Le bleu par defaut du navigateur est hors
       charte et trop violent sur les fonds Qalia. Voile Athanor a la place, la couleur
       du texte reste celle du contexte pour que le contraste de lecture soit conserve
       quel que soit le theme. */
    ::selection { background: rgba(27, 126, 148, 0.22); color: inherit; text-shadow: none; }
    ::-moz-selection { background: rgba(27, 126, 148, 0.22); color: inherit; text-shadow: none; }
    body[data-theme="dark"] ::selection,
    body[data-theme="high-contrast"] ::selection { background: rgba(42, 157, 182, 0.34); color: inherit; }
    body[data-theme="dark"] ::-moz-selection,
    body[data-theme="high-contrast"] ::-moz-selection { background: rgba(42, 157, 182, 0.34); color: inherit; }
    body[data-theme="sepia"] ::selection { background: rgba(200, 156, 44, 0.28); color: inherit; }
    body[data-theme="sepia"] ::-moz-selection { background: rgba(200, 156, 44, 0.28); color: inherit; }