/* ============================================================
   Tempods — feuille de style
   Architecture : tokens -> base -> typographie -> composants -> responsive
   Palette : navy (encre) + un seul accent teal + neutres.
   Aucun !important. Un seul jeu de tokens. 3 breakpoints.
   ============================================================ */

/* ============================================================
   1. TOKENS — système sémantique (inspiré Material 3)
   Les anciens noms (--bg, --accent, --fs-h3, etc.) restent disponibles
   comme alias des nouveaux. Le nouveau code utilise les noms sémantiques.
   ============================================================ */
:root {
  /* -------- Couleur : surfaces et on-colors (light context) -------- */
  --color-surface:                    #f6f8fa;  /* fond de page */
  --gradient-hero-surface: linear-gradient(180deg, #f2f7f7 0%, #ebf3f3 100%); /* gris-cyan doux : items du menu mobile */
  --gradient-hero-radial: radial-gradient(ellipse 95% 78% at 50% 40%, #f4f8f8 0%, #e8f1f0 55%, #d8e9e6 100%); /* fond héros mobile : centre clair, pourtour légèrement teal */
  --color-surface-container:          #eef1f5;  /* zones secondaires teintées */
  --color-surface-container-high:     #ffffff;  /* cartes, panneaux */

  --color-outline:                    #ced5e0;  /* trait fort */
  --color-outline-variant:            #e3e7ee;  /* trait doux */

  --color-on-surface:                 #1c2433;  /* texte courant */
  --color-on-surface-variant:         #586173;  /* texte adouci */
  --color-on-surface-faint:           #8b93a3;  /* texte très adouci */

  /* -------- Couleur : surfaces et on-colors (dark / inverse context) -------- */
  --color-inverse-surface:            #0c1322;  /* navy primaire (sections sombres) */
  --color-inverse-surface-bright:     #15203a;  /* navy moins profond */
  --color-inverse-on-surface:         #ffffff;
  --color-inverse-on-surface-variant: #aeb8c8;
  --color-inverse-on-surface-faint:   #828da0;
  --color-inverse-outline:            rgba(255,255,255,.12);
  --color-inverse-surface-tint:       rgba(255,255,255,.045);

  /* -------- Couleur : primaire de marque (teal) -------- */
  --color-primary:                    #0d8b94;  /* teal sobre — couleur d'accent principale */
  --color-primary-bright:             #19b3bd;  /* teal vif (focus, sur fonds sombres) */
  --color-primary-container:          #e6f3f4;  /* teal très clair (fonds pastilles) */
  --color-on-primary-container:       #0a6b72;  /* teal foncé pour texte sur primary-container */

  /* -------- Typographie : famille et échelle sémantique -------- */
  --font-family-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-display-lg:    clamp(2.6rem, 5.2vw, 4rem);       /* H1 héros */
  --font-headline-xl:   clamp(1.9rem, 3.4vw, 2.7rem);     /* H2 sections */
  --font-headline-md:   1.25rem;                          /* H3 cartes (20px) */
  --font-body-lead:     clamp(1.05rem, 1.3vw, 1.18rem);   /* paragraphes d'accroche */
  --font-body-md:       1.0625rem;                        /* texte courant (17px) */
  --font-body-sm:       .9375rem;                         /* petit texte (15px) */
  --font-label-md:      .8125rem;                         /* annotations (13px) */
  --font-label-caps:    .78rem;                           /* kickers majuscules (12.5px) */
  --font-stat-lg:       clamp(2.4rem, 3.6vw, 3.2rem);     /* grands chiffres de dashboard (x2, 88%, 62%, 5%) */

  /* -------- Rythme et layout — RÈGLE D'OR : valeurs figées --------
     96 px entre deux <section> (total visuel). 48 px entre sous-blocs.
     Material 3 densité « Medium » (recommandée pour vitrine B2B sobre),
     ratio 1:2, pas de clamp responsive. */
  --layout-section-gap:    48px;  /* padding-top ET padding-bottom de chaque <section> → 96px total entre 2 sections */
  --layout-subsection-gap: 48px;  /* margin-top entre sous-blocs à l'intérieur d'une même <section> */
  --layout-container-max: 1180px;
  --layout-nav-h: 72px;

  /* -------- Rayons -------- */
  --radius-btn:   10px;
  --radius-card:  16px;
  --radius-panel: 22px;
  --radius-pill:  999px;

  /* -------- Espacement interne carte --------
     Écart vertical entre la rangée picto (icône / chiffre / pastille) et le
     bloc texte (titre + paragraphe) qui suit. Une seule règle pour le site. */
  --space-card-header:         16px; /* cartes de contenu principales */
  --space-card-header-compact: 10px; /* cartes internes aux schémas */

  /* -------- Élévation (ombres) -------- */
  --elevation-1: 0 1px 2px rgba(12,19,34,.05), 0 3px 8px rgba(12,19,34,.04);
  --elevation-2: 0 6px 16px rgba(12,19,34,.07), 0 14px 34px rgba(12,19,34,.06);
  --elevation-3: 0 24px 56px rgba(12,19,34,.13);
  --elevation-card:       0 10px 24px -22px rgba(15,23,42,.12);
  --elevation-card-hover: 0 10px 24px -22px rgba(15,23,42,.12);
  --elevation-frame:      0 10px 24px -22px rgba(15,23,42,.12);

  /* -------- Mouvement -------- */
  --motion-ease: cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   2. BASE
   ============================================================ */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--layout-nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;                 /* défense anti scroll horizontal mobile */
  /* Scrollbar teal Tempods — propriété standard (Firefox + Chrome/Edge/Safari récents) */
  scrollbar-color: var(--color-primary) transparent;
  scrollbar-width: thin;
}

/* Scrollbar WebKit — Chrome / Edge / Safari (fallback pour anciens navigateurs) */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 7px;
  border: 2px solid transparent;
  background-clip: padding-box;     /* visuellement plus fin, sans coller aux bords */
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-bright);
  background-clip: padding-box;
}

/* Respect inconditionnel de l'attribut HTML `hidden`.
   Pratique standard (HTML5 Boilerplate, Bootstrap, Tailwind Reset).
   Sans cette règle, tout composant avec `display: grid`/`flex`/`block` défini
   en CSS écrase la règle browser `[hidden] { display: none }` et le
   composant reste visible même quand le JS le met en hidden=true.
   Bug réel survenu sur .contact-error : le toaster d'erreur s'affichait
   en permanence au lieu d'être déclenché par échec du POST formulaire. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-body-md);
  line-height: 1.5;
  color: var(--color-on-surface);
  background: var(--color-surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 200;
  padding: 12px 18px; border-radius: var(--radius-btn);
  background: var(--color-inverse-surface); color: #fff; font-weight: 600;
  transition: top .2s var(--motion-ease);
}
.skip-link:focus { top: 16px; }

main { padding-top: var(--layout-nav-h); }
section { position: relative; padding: var(--layout-section-gap) 0; }
/* Classe d'espacement entre sous-blocs à l'intérieur d'une même <section>.
   À utiliser à la place des `style="margin-top:56px"` inline. Valeur
   contrôlée par le token --layout-subsection-gap. */
.subsection-gap { margin-top: var(--layout-subsection-gap); }
/* Hero — fond #E9F0F0 (gris-cyan très clair, teinte signature) sur les
   bords pour porter le wireframe ; le spotlight central pousse vers
   --color-surface (#f6f8fa) plus lumineux pour la zone de lecture.
   Le clearColor + fog du shader sont alignés sur #E9F0F0 côté JS. */
.hero { background: #E9F0F0; }
/* Hairline 1px à la jonction hero ↔ #probleme — renforce la lecture de
   la rupture entre les deux sections (le shift de teinte seul peut être
   trop subtil avec le shader qui bouge). */
#probleme { border-top: 1px solid var(--color-outline-variant); }
.container { width: min(var(--layout-container-max), 100% - 48px); margin-inline: auto; }

/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */
h1, h2, h3 { margin: 0 0 .5em; color: var(--color-inverse-surface); font-weight: 700; }
h1 { font-size: var(--font-display-lg); line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; }
h2 { font-size: var(--font-headline-xl); line-height: 1.13; letter-spacing: -.02em;  text-wrap: balance; }
h3 { font-size: var(--font-headline-md); line-height: 1.3;  letter-spacing: -.012em; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.section-kicker::before, .eyebrow::before {
  content: ""; display: inline-block; vertical-align: baseline;
  width: 14.1px; height: 13px; margin-right: 7px;
  transform: translateY(1.5px);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20113%20104%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M50.31%200%2038.91%201.7C34.68%202.79%2030.71%204.31%2026.98%206.26%2018.48%2010.71%2011.85%2016.86%207.11%2024.73%202.37%2032.59%200%2041.62%200%2051.81%200%2062.12%202.37%2071.24%207.11%2079.18%2011.85%2087.1%2018.48%2093.29%2026.98%2097.74%2030.71%2099.69%2034.68%20101.21%2038.91%20102.3L50.31%20104%2050.31%2076.94%2050.12%2076.9C48.14%2076.35%2046.3%2075.53%2044.62%2074.44%2041.24%2072.24%2038.61%2069.21%2036.72%2065.35%2034.84%2061.48%2033.9%2057.03%2033.9%2052%2033.9%2046.97%2034.84%2042.52%2036.72%2038.65%2038.61%2034.79%2041.24%2031.76%2044.62%2029.56%2046.3%2028.47%2048.14%2027.65%2050.12%2027.1L50.31%2027.06ZM62.69%200%2074.09%201.7C78.32%202.79%2082.29%204.31%2086.02%206.26%2094.52%2010.71%20101.15%2016.86%20105.89%2024.73%20110.63%2032.59%20113%2041.62%20113%2051.81%20113%2062.12%20110.63%2071.24%20105.89%2079.18%20101.15%2087.1%2094.52%2093.29%2086.02%2097.74%2082.29%2099.69%2078.32%20101.21%2074.09%20102.3L62.69%20104%2062.69%2076.94%2062.88%2076.9C64.86%2076.35%2066.7%2075.53%2068.38%2074.44%2071.76%2072.24%2074.39%2069.21%2076.28%2065.35%2078.16%2061.48%2079.1%2057.03%2079.1%2052%2079.1%2046.97%2078.16%2042.52%2076.28%2038.65%2074.39%2034.79%2071.76%2031.76%2068.38%2029.56%2066.7%2028.47%2064.86%2027.65%2062.88%2027.1L62.69%2027.06Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20113%20104%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M50.31%200%2038.91%201.7C34.68%202.79%2030.71%204.31%2026.98%206.26%2018.48%2010.71%2011.85%2016.86%207.11%2024.73%202.37%2032.59%200%2041.62%200%2051.81%200%2062.12%202.37%2071.24%207.11%2079.18%2011.85%2087.1%2018.48%2093.29%2026.98%2097.74%2030.71%2099.69%2034.68%20101.21%2038.91%20102.3L50.31%20104%2050.31%2076.94%2050.12%2076.9C48.14%2076.35%2046.3%2075.53%2044.62%2074.44%2041.24%2072.24%2038.61%2069.21%2036.72%2065.35%2034.84%2061.48%2033.9%2057.03%2033.9%2052%2033.9%2046.97%2034.84%2042.52%2036.72%2038.65%2038.61%2034.79%2041.24%2031.76%2044.62%2029.56%2046.3%2028.47%2048.14%2027.65%2050.12%2027.1L50.31%2027.06ZM62.69%200%2074.09%201.7C78.32%202.79%2082.29%204.31%2086.02%206.26%2094.52%2010.71%20101.15%2016.86%20105.89%2024.73%20110.63%2032.59%20113%2041.62%20113%2051.81%20113%2062.12%20110.63%2071.24%20105.89%2079.18%20101.15%2087.1%2094.52%2093.29%2086.02%2097.74%2082.29%2099.69%2078.32%20101.21%2074.09%20102.3L62.69%20104%2062.69%2076.94%2062.88%2076.9C64.86%2076.35%2066.7%2075.53%2068.38%2074.44%2071.76%2072.24%2074.39%2069.21%2076.28%2065.35%2078.16%2061.48%2079.1%2057.03%2079.1%2052%2079.1%2046.97%2078.16%2042.52%2076.28%2038.65%2074.39%2034.79%2071.76%2031.76%2068.38%2029.56%2066.7%2028.47%2064.86%2027.65%2062.88%2027.1L62.69%2027.06Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.section-kicker, .eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: var(--font-label-caps);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-on-primary-container);
}
/* La puce ::before est calée sur la ligne de base (vertical-align: baseline).
   Le centrage des heads centres vient de text-align: center sur .section-head.center. */
/* Respiration spécifique entre l'eyebrow et le H1 du hero */
.hero-copy .eyebrow { margin-bottom: 24px; }

.hero-lead, .section-copy { color: var(--color-on-surface-variant); }
.hero-lead {
  font-size: var(--font-body-lead); line-height: 1.5;
  /* Lead du hero — couleur foncée intermédiaire (entre on-surface-variant
     et l'encre du H1) et poids 500 : plus de présence pour la proposition
     de valeur, sans casser la hiérarchie avec le H1. */
  color: #3d4658;
  font-weight: 500;
}
.section-copy { font-size: var(--font-body-md); line-height: 1.5; }
.section-copy strong { color: var(--color-on-surface); }
.accent-text { color: var(--color-on-primary-container); }

.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }
/* Modifier --wide : élargit le bloc à 880 px pour que les H2 longs (~95 ch)
   passent de 4 à 3 lignes sans réécriture. À utiliser avec parcimonie,
   uniquement quand un titre dépasse 90 caractères et que le copy ne peut pas
   être raccourci. */
.section-head--wide { max-width: 960px; }

/* ===== Titre de SOUS-PARTIE (niveau 2) — cf. RESTRUCTURATION-hierarchie.md
   Règle : 1er titre d'une <section> = chapitre (kicker à marque + grand h2) ;
   les titres suivants dans la même section = sous-partie : marque Tempods
   retirée du kicker, h2 plus petit. La hiérarchie redevient lisible. ===== */
/* Chapitre centré (niveau 1) : grand titre, pour un différenciateur net.
   Ciblé sur .section-head (centré pleine largeur) ; les titres en colonne
   étroite (#probleme .split, #pourquoi, #aipilot) gardent --font-headline-xl. */
.section-head:not(.section-head--sub) .section-title { font-size: clamp(2.4rem, 4.4vw, 3.4rem); }
/* Sous-partie (niveau 2) : icône signature CONSERVÉE, kicker en gris (le teal
   reste réservé aux chapitres), titre plus petit. */
.section-head--sub .section-kicker { margin-bottom: 8px; color: var(--color-on-surface-variant); }
.section-head--sub .section-title { font-size: 1.5rem; font-weight: 600; }

/* Titre doctrine « Miroir / Moteur / Mesure » : autorisé à occuper toute la
   largeur du conteneur pour tenir sur 2 lignes (2 phrases = ~1016px, conteneur
   1180px). Les NBSP intra-phrase (HTML) empêchent toute coupure au milieu d'une
   phrase ; la coupure ne tombe qu'entre deux phrases. Sur viewport étroit, le
   titre retombe proprement en 3 lignes. */
#approche .section-head:not(.section-head--sub) { max-width: none; }

/* ============================================================
   4. BOUTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  font-size: var(--font-body-sm); font-weight: 600; letter-spacing: -.01em;
  transition: background .18s var(--motion-ease), border-color .18s var(--motion-ease),
              transform .18s var(--motion-ease), box-shadow .18s var(--motion-ease);
}
.btn-small { min-height: 42px; padding: 0 16px; }
.btn-primary { background: var(--color-inverse-surface); color: #fff; }
.btn-primary:hover { background: var(--color-inverse-surface-bright); transform: translateY(-1px); box-shadow: var(--elevation-2); }
.btn-secondary { background: var(--color-surface-container-high); color: var(--color-inverse-surface); border-color: var(--color-outline); }
.btn-secondary:hover { border-color: var(--color-inverse-surface); transform: translateY(-1px); }

/* ============================================================
   5. UTILITAIRES
   ============================================================ */
/* ============================================================
   .reveal — animations de scroll-in, avec filet de sécurité scellé
   ============================================================
   FONCTIONNEMENT NORMAL :
   - À l'état initial, l'élément est invisible (opacity:0, translateY:20px).
   - Le JS (initRevealAnimations) ajoute la classe .in via IntersectionObserver
     quand l'élément entre dans le viewport → transition douce vers opacity:1.

   FILET DE SÉCURITÉ SCELLÉ (ne touche jamais sans comprendre) :
   - Une animation CSS `reveal-failsafe` est armée avec un délai de 2.5s.
   - Si le JS s'exécute normalement (cas standard), il ajoute .in qui annule
     l'animation (`animation: none`) et la transition prend le relais.
   - Si le JS est cassé, n'est pas chargé, plante au milieu, ou si une init
     précédente throw une exception (ce qui s'est déjà produit) → après 2.5s,
     l'animation kick in et FORCE le contenu à devenir visible.
   - Sans ce filet, n'importe quelle régression JS rend la page vide
     (tout reste à opacity:0 sauf le hero qui a son override dédié).
   - Documenté dans SIGNATURE_GRAPHIQUE.md § Filet de sécurité contenu. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--motion-ease), transform .6s var(--motion-ease);
  animation: reveal-failsafe .6s var(--motion-ease) 2.5s forwards;
}
.reveal.in {
  opacity: 1;
  transform: none;
  animation: none;  /* ← annule le filet de sécurité quand JS a réussi */
}
@keyframes reveal-failsafe {
  to { opacity: 1; transform: none; }
}
/* Si JS désactivé dans le navigateur, on garde la page immédiatement lisible */
.no-js .reveal { opacity: 1; transform: none; transition: none; animation: none; }

/* ============================================================
   6. NAVIGATION
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: rgba(246,248,250,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-outline-variant);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: var(--layout-nav-h);
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 30px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a {
  position: relative; padding: 10px 0;
  font-size: var(--font-body-sm); font-weight: 500; color: var(--color-on-surface-variant);
  transition: color .18s var(--motion-ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--color-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s var(--motion-ease);
}
.nav-links a:hover { color: var(--color-inverse-surface); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; }

.menu-btn {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-high);
  cursor: pointer;
  transition: background .15s var(--motion-ease), border-color .15s var(--motion-ease);
}
.menu-btn:hover { background: var(--color-surface-container); border-color: var(--color-outline); }
.menu-btn span {
  display: block;
  width: 20px; height: 2px;
  margin: 0;
  background: var(--color-on-surface);
  border-radius: 2px;
  transition: transform .22s var(--motion-ease), opacity .15s var(--motion-ease);
}
/* État ouvert : croix élégante */
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-panel {
  display: none;
  position: fixed; left: 14px; right: 14px;
  top: calc(var(--layout-nav-h) + 8px);
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--color-surface-container-high);
  border: 1px solid var(--color-outline-variant);
  box-shadow: var(--elevation-3);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .22s var(--motion-ease),
              transform .22s var(--motion-ease),
              visibility .22s;
  gap: 8px; /* écart entre items quand affiché en grid via la media query mobile */
}
.mobile-panel.open { opacity: 1; visibility: visible; transform: none; }
.mobile-panel a {
  display: flex; align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-outline-variant);
  background: var(--gradient-hero-surface);
  color: var(--color-on-surface);
  font-size: var(--font-body-md);
  font-weight: 600;
  transition: all .18s var(--motion-ease);
}
.mobile-panel a:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
/* Le dernier item (CTA « Évaluer un cas d'usage ») garde son allure de bouton primaire navy, dans la même grammaire de carte */
.mobile-panel a:last-child {
  margin-top: 4px;
  background: var(--color-inverse-surface);
  border-color: var(--color-inverse-surface);
  color: var(--color-inverse-on-surface);
  justify-content: center;
  font-weight: 700;
}
.mobile-panel a:last-child:hover {
  background: var(--color-inverse-surface-bright);
  border-color: var(--color-inverse-surface-bright);
  color: var(--color-inverse-on-surface);
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: min(90vh, 840px);
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  /* FILET ULTIME : fond clair garanti sous le canvas WebGL. Si le canvas est
     vide/transparent (perte de contexte GPU, avant 1er rendu), c'est cette
     couleur — la teinte du mesh #E9F0F0 — qui apparait, JAMAIS du noir. */
  background-color: #E9F0F0;
}
.hero-mesh {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  filter: blur(44px);
  transform: scale(1.32);
}
/* Quand le shader WebGL est actif (classe ajoutée par JS sur succès),
   on retire le blur + scale du fallback Canvas 2D — le shader rend déjà
   un mesh fluide, le blur le détruirait. */
.hero-mesh--shader {
  filter: none;
  transform: none;
}
/* En mode hero centré : combinaison de deux voiles superposés.
   1. Spotlight radial central — opaque au centre (le texte respire sur
      du surface uni), fade progressif vers les bords (le wireframe reste
      visible comme un cadre topographique).
   2. Fade vertical bas — transition douce vers la section suivante. */
.hero--centered::after {
  /* Spotlight central uniquement : pousse vers --color-surface (#f6f8fa)
     pour offrir une zone de lecture claire au-dessus du wireframe.
     Pas de fade bas : le bas du hero reste à sa couleur naturelle
     #E9F0F0, la distinction avec #probleme (#f6f8fa) est portée par
     la hairline + le delta de teinte naturel. */
  background:
    radial-gradient(ellipse 55% 45% at center,
      rgba(246, 248, 250, 0.92) 0%,
      rgba(246, 248, 250, 0.78) 35%,
      rgba(246, 248, 250, 0.40) 70%,
      transparent 100%) !important;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--color-surface) 0%, rgba(246,248,250,.95) 45%,
      rgba(246,248,250,.62) 72%, rgba(246,248,250,.32) 100%),
    linear-gradient(180deg,
      transparent 58%, rgba(246,248,250,.48) 100%);
}
.hero .container { position: relative; z-index: 2; }

.hero-grid {
  display: grid; grid-template-columns: 1.05fr .82fr;
  gap: 56px; align-items: center;
}
.hero-grid > * { min-width: 0; }
.hero-copy { max-width: 620px; }
.hero h1 { margin-bottom: 20px; }
.hero-lead { max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 26px; }

/* Modifier --centered : hero sur une seule colonne, contenu centré, carte
   décision de droite masquée (markup conservé pour restauration facile).
   On retire le min-height généreux du hero classique (840px) — sans la
   carte de droite, le contenu seul ne le justifie plus. Padding vertical
   contrôlé à la place. */
.hero--centered { min-height: auto; padding-block: clamp(92px, calc(11vh + 20px), 148px); }
.hero--centered .hero-grid { grid-template-columns: 1fr; }
.hero--centered .hero-copy {
  max-width: 920px; margin-inline: auto; text-align: center;
}
.hero--centered .hero-lead { max-width: 680px; margin-inline: auto; }
.hero--centered .hero-actions { justify-content: center; }
.hero--centered .trust-row { justify-content: center; }

/* Animation d'entrée échelonnée — eyebrow descend du haut, puis H1, lead,
   boutons, trust-row remontent en cascade douce. ~0.8s par élément, délais
   200ms entre chacun. Le tout sous garde prefers-reduced-motion : pour
   les utilisateurs qui désactivent les animations, rien ne bouge. */
@keyframes hero-fade-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  /* On désactive le .reveal du wrapper pour ne pas masquer les enfants
     pendant qu'ils s'animent. */
  .hero--centered .hero-copy.reveal { opacity: 1; transform: none; transition: none; }
  .hero--centered .eyebrow {
    opacity: 0; animation: hero-fade-down .8s ease-out forwards;
  }
  .hero--centered h1 {
    opacity: 0; animation: hero-fade-up .8s ease-out .2s forwards;
  }
  .hero--centered .hero-lead {
    opacity: 0; animation: hero-fade-up .8s ease-out .4s forwards;
  }
  .hero--centered .hero-actions {
    opacity: 0; animation: hero-fade-up .8s ease-out .6s forwards;
  }
  .hero--centered .trust-row {
    opacity: 0; animation: hero-fade-up .8s ease-out .8s forwards;
  }
}

.trust-row { display: flex; flex-wrap: wrap; gap: 18px; }
.trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--font-body-sm); font-weight: 500; color: var(--color-on-surface-variant);
}
.check {
  display: inline-grid; place-items: center;
  width: 21px; height: 21px; border-radius: 999px;
  background: #ffffff;
  color: var(--color-on-primary-container);  /* ✓ teal foncé */
  border: 1px solid var(--color-primary);    /* anneau teal pour décoller du fond hero clair */
  font-size: 12px; font-weight: 700;          /* exception assumée : centrage de glyphe ✓ dans cercle 21×21 */
}

/* ============================================================
   8. SECTIONS SOMBRES
   ============================================================ */
.dark-section {
  background: linear-gradient(180deg, var(--color-inverse-surface-bright), var(--color-inverse-surface));
  color: var(--color-inverse-on-surface);
  position: relative;
}
.dark-section h1, .dark-section h2, .dark-section h3 { color: var(--color-inverse-on-surface); }
.dark-section p, .dark-section .section-copy { color: var(--color-inverse-on-surface-variant); }
.dark-section .section-copy strong, .dark-section strong { color: var(--color-inverse-on-surface); }
.dark-section .section-kicker { color: var(--color-primary-bright); }

/* Exception au rythme vertical — .dark-section porte +30px de padding
   par côté en plus du standard. Total = 48 + 30 = 78px de chaque côté,
   donc 126px entre le contenu d'une dark-section et le contenu d'une
   section voisine claire (au lieu de 96px). Justification : les sections
   sombres portent du contenu « scène » (le moteur Tempods, aipilot) qui
   mérite plus d'espace visuel pour respirer et marquer la rupture.
   Documenté dans SIGNATURE_GRAPHIQUE.md. */
.dark-section { padding-block: calc(var(--layout-section-gap) + 30px); }

/* Pourquoi maintenant */
.why-executive-panel {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px clamp(32px, 4vw, 56px); align-items: start;
}
.why-executive-panel > * { min-width: 0; }
.why-copy h2 { margin-bottom: 18px; }
.why-copy .section-copy { margin-bottom: 14px; }

.why-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card {
  padding: 24px; border-radius: var(--radius-card);
  background: var(--color-inverse-surface-tint); border: 1px solid var(--color-inverse-outline);
}
.stat-number {
  display: block; margin-bottom: 10px;
  font-size: var(--font-stat-lg); font-weight: 700;
  line-height: 1; letter-spacing: -.03em; color: var(--color-inverse-on-surface);
}
.stat-card h3 { margin-bottom: 6px; font-size: var(--font-body-md); }
.stat-card p { margin: 0; font-size: var(--font-body-sm); line-height: 1.5; }

/* --- Variantes look des chiffres (ajout localisé, le reste reste tel quel) --- */
.stat-number--mark em   { font-style: italic; font-weight: 700; }
.stat-number--accent    { color: var(--color-primary-bright); }
.stat-number--alert     { color: #C10086; }   /* magenta de marque (logo) — voir SIGNATURE_GRAPHIQUE.md */
.stat-unit              { font-size: .56em; font-weight: 700; margin-left: .1em; letter-spacing: 0; }  /* em relatif au chiffre parent, intentionnel */
/* Cadre adouci : filet magenta discret, plus de lueur (la carte ne « crie »
   plus, surtout isolée en mobile). Le chiffre magenta suffit à signaler l'alerte. */
.stat-card--alert {
  border-color: rgba(193, 0, 134, .40);
  background: rgba(193, 0, 134, .03);
}

.why-decision-rail {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: 28px; align-items: start;
  padding: 28px; border-radius: var(--radius-panel);
  background: var(--color-inverse-surface-tint); border: 1px solid var(--color-inverse-outline);
}
.why-decision-rail > * { min-width: 0; }
.why-rail-head span {
  display: inline-block; margin-bottom: 12px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(25,179,189,.14); color: var(--color-primary-bright);
  font-size: var(--font-label-md); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
.why-rail-head strong {
  display: block; margin-bottom: 8px;
  font-size: var(--font-headline-md); color: var(--color-inverse-on-surface); letter-spacing: -.02em;
}
.why-rail-head p { margin: 0; font-size: var(--font-body-sm); }

.why-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-content: start; }
.why-steps article {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: var(--radius-card);
  background: rgba(255,255,255,.04); border: 1px solid var(--color-inverse-outline);
}
.why-step-head { display: flex; align-items: center; gap: 12px; }
.why-step-badge {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(25,179,189,.14);
  border: 1px solid rgba(25,179,189,.32);
  color: var(--color-primary-bright);
}
.why-step-badge :is(i, svg) { width: 18px; height: 18px; }
.why-step-num {
  font-size: var(--font-label-md); font-weight: 700;
  letter-spacing: .08em; color: var(--color-primary-bright);
}
.why-steps strong {
  margin: 0; color: var(--color-inverse-on-surface);
  font-size: var(--font-headline-md); line-height: 1.3; font-weight: 700; letter-spacing: -.012em;
}
.why-steps small {
  margin: 0; color: var(--color-inverse-on-surface-variant);
  font-size: var(--font-body-sm); line-height: 1.5;
}
.why-step-focus {
  background: rgba(25,179,189,.12);
  border-color: rgba(25,179,189,.45);
}

.source-line {
  grid-column: 1 / -1; margin: 0; text-align: center;
  font-size: var(--font-label-md); color: var(--color-inverse-on-surface-faint);
}
.source-line a {
  color: var(--color-primary-bright);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: currentColor;
  transition: opacity var(--motion-ease);
}
.source-line a:hover { opacity: .8; }

/* ============================================================
   9. MEDIA CARDS ET SCHEMAS
   ============================================================ */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.split > * { min-width: 0; }

.graphic-shell {
  position: relative; isolation: isolate;
  padding: clamp(18px, 2.8vw, 32px) clamp(18px, 2.6vw, 32px);
  border-radius: 30px;
  border: 1px solid rgba(148,163,184,.36);
  background:
    radial-gradient(circle at 50% 14%, rgba(13,139,148,.07), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  box-shadow: var(--elevation-frame);
}
/* (la bordure intérieure ::before a été retirée — gabarit allégé, comme .fmap / .emap) */
.graphic-shell > * { position: relative; z-index: 1; }

/* ============================================================
   Pastille de titre — composant partagé par tous les schémas
   (.fmap, .emap, .graphic-shell). Source de vérité unique.
   ============================================================ */
.schema-pill {
  display: inline-flex; align-items: center;
  gap: 11px;
  padding: 10px 22px;
  border: 1px solid rgba(168,204,211,.76);
  border-radius: var(--radius-pill);
  background: #ffffff;
  box-shadow: 0 8px 18px -22px rgba(15,23,42,.28);
}
.schema-pill-dot {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-primary);
}
.schema-pill-t {
  margin: 0; color: var(--color-inverse-surface);
  font-size: var(--font-label-md); line-height: 1.1;
  font-weight: 700; letter-spacing: .045em;
  text-transform: uppercase; white-space: nowrap;
}
/* Conteneur centreur (.emap et .graphic-shell) */
.schema-pill-host {
  display: flex; justify-content: center;
  margin-bottom: 22px;
}
/* Cas particulier : dans .fmap, la pastille est ancrée en haut du cadre carré. */
.fmap > .schema-pill {
  position: absolute; top: 6.8%; left: 15.8%; right: 15.8%;
  min-height: 6.6%;
  display: flex; justify-content: center;
  z-index: 4;
}

/* ============================================================
   10. CARTES DE CONTENU
   ============================================================ */
.doctrine-card, .market-card, .usecase-card,
.deliverable-card, .step {
  padding: 26px; border-radius: var(--radius-card);
  background: var(--color-surface-container-high); border: 1px solid var(--color-outline-variant);
  box-shadow: var(--elevation-card);
}
/* Typo cartes de section principales : titre 17px, corps 15px (échelle « compact carte ») */
.doctrine-card h3, .market-card h3, .usecase-card h3,
.deliverable-card h3, .step h3 {
  font-size: var(--font-body-md);
}
.doctrine-card p, .market-card p, .usecase-card p,
.deliverable-card p, .step p {
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-sm);
}

/* Doctrine */
.doctrine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Header de carte : pictogramme à gauche, numéro à droite. Le tout sur une même ligne. */
.doctrine-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-card-header);
}
/* Cas où .doctrine-index est utilisé seul (sans wrapper .doctrine-head)
   en haut d'une carte — ex. cartes Miroir / Moteur / Mesure de #approche.
   Même règle d'espacement que les autres pictos. */
.doctrine-card > .doctrine-index { margin-bottom: var(--space-card-header); }
.doctrine-icon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.doctrine-icon :is(i, svg) { width: 20px; height: 20px; }
.doctrine-index {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(168,204,211,.62);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container); font-weight: 700;
}
.doctrine-card h3 { margin-bottom: 8px; }

/* Variante « mantra » — cartes Miroir / Moteur / Mesure (#approche).
   Hiérarchie typographique : grand mot (devise) → tagline italique teal → corps.
   Pas de fond ni de cadre : triptyque texte pur séparé par des hairlines
   verticales gris doux. Cas éditorial documenté dans SIGNATURE_GRAPHIQUE.md. */
.doctrine-grid:has(.doctrine-card--mantra) { gap: 0; }
.doctrine-card--mantra {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px clamp(16px, 2vw, 28px);
}
.doctrine-card--mantra + .doctrine-card--mantra {
  border-left: 1px solid var(--color-outline-variant);
}
.doctrine-card--mantra .mantra-word {
  margin: 0 0 12px;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--color-inverse-surface);
}
.doctrine-card--mantra .mantra-tagline {
  margin: 0 0 var(--space-card-header);
  font-size: var(--font-headline-md);
  font-weight: 600;
  color: var(--color-on-primary-container);
  letter-spacing: -.01em;
}
.doctrine-card--mantra > p:last-child { margin: 0; }
/* Mobile : pile verticale, hairlines deviennent horizontales (haut) */
@media (max-width: 720px) {
  .doctrine-card--mantra { padding: 24px 0; }
  .doctrine-card--mantra + .doctrine-card--mantra {
    border-left: none;
    border-top: 1px solid var(--color-outline-variant);
  }
}

/* Methode */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 30px; }
/* Variante 4 colonnes pour la cascade « Passage à l'échelle » (Prouver/Stabiliser/Gouverner/Étendre).
   Les media queries plus bas (tablette → 2 cols, mobile → 1 col) restent appliquées
   via le sélecteur .process de base. */
.process--four { grid-template-columns: repeat(4, 1fr); }
.process .step {
  border-radius: 20px;
  border: 1px solid rgba(203,219,227,.92);
  box-shadow: var(--elevation-card);
}
.process .step:hover { box-shadow: var(--elevation-card-hover); }
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-card-header); }
.step-badge {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(168,204,211,.62);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container); font-weight: 700; font-size: var(--font-body-sm);
}
.step-eyebrow {
  font-size: var(--font-label-md); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-on-primary-container);
}
.step h3 { margin-bottom: 8px; }

/* Panneau aipilot */
/* Panneau aipilot : layout 2 colonnes (texte / cascade d'écrans).
   Vit dans la section dédiée .dark-section#aipilot — c'est elle qui porte le fond
   navy, plus besoin de plateau intermédiaire. */
.aipilot-panel {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  color: var(--color-inverse-on-surface);
}
.aipilot-panel-head { margin: 0; }
.aipilot-panel-head .section-kicker { color: var(--color-primary-bright); }
.aipilot-panel-head h2 { font-size: var(--font-headline-xl); color: var(--color-inverse-on-surface); margin-bottom: 18px; }
.aipilot-panel-head p { margin: 0 0 14px; color: var(--color-inverse-on-surface-variant); max-width: 36ch; }
.aipilot-panel-head p:last-child { margin-bottom: 0; }

.aipilot-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  /* plateau retiré : transparent, juste un container de positionnement */
}
.aipilot-screen {
  position: absolute; margin: 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--color-inverse-outline);
  /* Exception assumée : sur fond navy, l'ombre claire commune est invisible.
     Ombre noire dédiée pour décoller du fond sombre. */
  box-shadow: 0 22px 44px -16px rgba(0,0,0,.65);
}
.aipilot-screen img { display: block; width: 100%; height: auto; }
/* Cascade diagonale haut-gauche → bas-droite, écrans à taille égale (70 % du stage),
   offsets 10 %/8 % par étape. Total horizontal = 30 % + 70 % = 100 % → la cascade
   touche le bord droit du stage, marge droite = marge gauche du container. */
.aipilot-screen.sc-1 { width: 70%; left:  0%; top:  0%; z-index: 1; transform: rotate(-1deg); }
.aipilot-screen.sc-2 { width: 70%; left: 10%; top:  8%; z-index: 2; transform: rotate(-1deg); }
.aipilot-screen.sc-3 { width: 70%; left: 20%; top: 16%; z-index: 3; transform: rotate( 1deg); }
.aipilot-screen.sc-4 { width: 70%; left: 30%; top: 24%; z-index: 4; transform: rotate( 1deg); }


@media (max-width: 1024px) {
  /* Tablette : retour à 1 colonne, texte au-dessus, stage en dessous.
     On garde 2 écrans visibles (sc-1 Contexte + sc-2 Pratiques) — la cascade
     complète à 4 écrans devient trop dense dans une largeur tablette. */
  .aipilot-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .aipilot-panel-head p { max-width: none; }
  .aipilot-screen.sc-3,
  .aipilot-screen.sc-4 { display: none; }
}
@media (max-width: 680px) {
  /* Mobile : on n'affiche que la vue Pratiques (sc-2) en plein cadre */
  .aipilot-stage {
    aspect-ratio: auto;
    display: block;
  }
  .aipilot-screen.sc-1,
  .aipilot-screen.sc-3,
  .aipilot-screen.sc-4 { display: none; }
  .aipilot-screen.sc-2 {
    position: relative; width: 100%;
    left: 0; top: 0;
    transform: none;
  }
}

/* Marches */
.market-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Variante 4 colonnes pour le panneau « Alignement dirigeant » (CEO/CFO/COO/DSI).
   Les media queries ci-dessous (tablette → 2 cols, mobile → 1 col) restent
   appliquées via le sélecteur .market-grid de base. */
.market-grid--four { grid-template-columns: repeat(4, 1fr); }
.market-card { display: flex; flex-direction: column; }
.market-card p { flex: 1; }
/* Label de rôle (CEO / CFO / COO / DSI…) : style « mini-kicker » — même
   grammaire que .section-kicker (uppercase teal letter-spaced) avec un
   simple bullet teal en-tête, plus de pilule à fond plein. */
.market-label {
  display: block; margin-bottom: 12px;
  font-size: var(--font-label-caps); font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-on-primary-container);
}
.market-label::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
  margin-right: 8px;
  vertical-align: middle; transform: translateY(-1px);
}
.market-card h3 { margin-bottom: 8px; }
.market-card strong {
  display: block; margin: 18px 0 4px;
  color: var(--color-inverse-surface);
  font-size: var(--font-label-caps);
  letter-spacing: .06em; text-transform: uppercase;
}
.market-card span { color: var(--color-on-surface-variant); font-size: var(--font-body-sm); }

/* Cas d'usage — peau alignée site (pastille teal + hairlines + labels mini-kicker teal) */
.usecase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.icon-badge {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: var(--space-card-header);
  border-radius: var(--radius-btn);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.icon-badge :is(i, svg) { width: 22px; height: 22px; }
.usecase-detail {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--color-outline-variant);
}
.usecase-detail li {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--color-outline-variant);
}
.usecase-detail li > span:last-child {
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-sm);
}
.detail-label {
  color: var(--color-on-primary-container);
  font-size: var(--font-label-caps);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Livrables */
.deliverables-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.deliverable-card h3 { margin-bottom: 8px; }

/* Panneau « échelle de maturité » : fond légèrement teinté, encadré.
   Donne une identité visuelle distincte au 2e triptyque pour qu'il ne
   se lise plus comme un doublon du premier. */
.maturity-panel {
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-panel);
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  box-shadow: var(--elevation-card);
}
.maturity-panel > h3 {
  font-size: var(--font-headline-md);
  letter-spacing: -.012em;
}

/* Carte focale du 2e triptyque (« Première preuve » — point d'entrée Tempods).
   Bord teal, 1px ; ombre neutre commune (le bord seul marque le focal). */
.deliverable-card--focal {
  border-color: rgba(13, 139, 148, .55);
  box-shadow: var(--elevation-card);
}

/* FAQ — accordion en liste verticale avec hairlines.
   Utilise <details>/<summary> natifs (accessible clavier + ARIA gratuits).
   Indicateur "+" qui tourne 45° pour devenir "×" à l'ouverture. */
.faq-list {
  display: grid; gap: 0;
  margin: 24px auto 0;
  max-width: 800px;
  border-top: 1px solid var(--color-outline-variant);
}
.faq-item {
  border-bottom: 1px solid var(--color-outline-variant);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-size: var(--font-body-md); font-weight: 700;
  color: var(--color-inverse-surface);
  line-height: 1.35;
  transition: color var(--motion-ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-on-primary-container); }
.faq-item summary::after {
  content: "+";
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  font-size: 18px; font-weight: 400; line-height: 1;
  transition: transform .25s var(--motion-ease), background .25s var(--motion-ease);
}
.faq-item[open] summary::after {
  transform: rotate(45deg); /* "+" devient "×" */
}
.faq-item p {
  margin: 0 0 20px;
  padding-right: 44px;
  color: var(--color-on-surface-variant);
  font-size: var(--font-body-sm);
  line-height: 1.5;
}

/* Frictions — liste */
.friction-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.friction-item {
  padding: 14px 16px; border-radius: var(--radius-btn);
  background: var(--color-surface-container-high); border: 1px solid var(--color-outline-variant);
  font-size: var(--font-body-sm); font-weight: 500; color: var(--color-on-surface);
}

/* ============================================================
   11. RISK ENGINE
   ============================================================ */
.risk-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.risk-chip {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-radius: var(--radius-btn);
  background: var(--color-surface-container); font-size: var(--font-body-sm); font-weight: 500; color: var(--color-on-surface);
}
.risk-chip :is(i, svg) { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-on-primary-container); }

/* ============================================================
   12. LE FONDATEUR
   ============================================================ */
.founder {
  display: grid; grid-template-columns: 210px 1fr;
  gap: clamp(32px, 5vw, 60px); align-items: start;
  padding: clamp(32px, 4vw, 56px); border-radius: var(--radius-panel);
  background: var(--color-surface-container-high); border: 1px solid var(--color-outline-variant); box-shadow: var(--elevation-frame);
}
.founder > * { min-width: 0; }
.founder-aside { display: flex; flex-direction: column; gap: 14px; }
.founder-portrait {
  width: 100%; height: 250px;
  object-fit: cover; object-position: center top;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-outline-variant); box-shadow: var(--elevation-card);
}
.founder-id { text-align: center; }
.founder-id strong { display: block; color: var(--color-inverse-surface); font-size: var(--font-body-md); }
.founder-id span { color: var(--color-on-surface-variant); font-size: var(--font-body-sm); }
.founder-body h2 { margin-bottom: 16px; }
.founder-body .section-copy { margin-bottom: 14px; }
.founder-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.founder-fact {
  padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--color-primary-container); color: var(--color-on-primary-container);
  font-size: var(--font-label-md); font-weight: 600;
}

/* ============================================================
   13. APPEL A L'ACTION
   ============================================================ */
/* CTA panel — card navy centrée dans la section #contact */
/* Section #contact = .dark-section (fond navy plein-largeur), plus de
   .cta-panel flottante. Le contenu (kicker, H2, lead, questions, form,
   légal) s'affiche directement sur le dark. */
#contact h2 { font-size: var(--font-headline-xl); margin-bottom: 0; text-align: center; }
.cta-lead {
  margin: 0;
  font-size: var(--font-body-lead);
  color: var(--color-inverse-on-surface-variant);
  line-height: 1.5;
  text-align: center;
}
.cta-copy { display: grid; gap: 24px; }
.cta-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cta-question {
  padding: 18px; border-radius: var(--radius-card);
  background: var(--color-inverse-surface-tint); border: 1px solid var(--color-inverse-outline);
}
.cta-question p { margin: 0 0 8px; color: var(--color-inverse-on-surface-variant); font-size: var(--font-body-sm); }
.cta-question strong { color: var(--color-primary-bright); font-size: var(--font-body-sm); }
.cta-closing { display: grid; gap: 16px; }
.cta-proof-line { margin: 0; text-align: center; }
.cta-proof-line strong { color: var(--color-inverse-on-surface); font-size: var(--font-headline-md); line-height: 1.4; }
.cta-closing .hero-actions { margin: 0; align-items: center; }
.cta-assurance { margin: 0; color: var(--color-inverse-on-surface-variant); font-size: var(--font-body-md); text-align: center; }
/* Submit button blanc-sur-navy dans #contact (override du primaire teal global) */
#contact .btn-primary { background: #fff; color: var(--color-inverse-surface); }
#contact .btn-primary:hover { background: var(--color-surface-container); }
.cta-secondary-link {
  display: inline-flex; align-items: center;
  color: var(--color-inverse-on-surface); font-weight: 600; font-size: var(--font-body-sm);
  border-bottom: 1px solid var(--color-primary-bright); padding-bottom: 2px;
  transition: color .18s var(--motion-ease);
}
.cta-secondary-link:hover { color: var(--color-primary-bright); }

/* ===== Section contact : split 2 colonnes (questions | formulaire) =====
   Patron de conversion : persuasion à gauche, action à droite. Supprime
   l'effet « T » de l'ancien empilement (3 cartes en rangée + form dessous). */
.cta-split {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px;
  align-items: start; text-align: left;
}
.cta-split-left  { display: flex; flex-direction: column; gap: 14px; }
.cta-split-right { display: flex; flex-direction: column; gap: 14px; }
.cta-split-left .cta-questions { grid-template-columns: 1fr; gap: 14px; }
.cta-split-left .cta-proof-line { text-align: left; margin-top: 6px; }
.cta-split-right .contact-block { margin: 0; max-width: none; }
.cta-split-right .contact-block > p { text-align: left; margin: 0 0 20px; max-width: none; }
.cta-split-right .cta-assurance,
.cta-split-right .contact-legal { text-align: left; }
/* En dessous de 900px : on réempile (questions puis formulaire) */
@media (max-width: 900px) {
  .cta-split { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   14. PIED DE PAGE
   ============================================================ */
/* Pied de page complet : 4 colonnes desktop (marque + 3 colonnes de liens),
   barre légale en bas avec mentions copyright + liens juridiques. */
.footer { padding: 64px 0 32px; border-top: 1px solid var(--color-outline-variant); }
.footer .container { max-width: var(--layout-container-max); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
}
.footer-brand .brand-logo { margin-bottom: 16px; }
.footer-brand .footer-signature {
  display: block;
  font-size: var(--font-body-sm);
  color: var(--color-on-surface-variant);
  line-height: 1.5;
  max-width: 280px;
}
.sig-dot { color: var(--color-primary); font-weight: 700; }

.footer-col h4 {
  font-size: var(--font-label-caps);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-on-surface);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; font-size: var(--font-body-sm); }
.footer-col a {
  color: var(--color-on-surface);
  transition: color .15s var(--motion-ease);
}
.footer-col a:hover { color: var(--color-on-primary-container); }
.footer-col .footer-inline {
  display: inline-flex; align-items: center; gap: 6px;
}

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--color-outline-variant);
  font-size: var(--font-body-sm); color: var(--color-on-surface-variant);
}
.footer-bottom .footer-legal-links {
  display: flex; gap: 20px; flex-wrap: wrap;
}
.footer-bottom a:hover { color: var(--color-on-primary-container); }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 680px) {
  .footer-grid { gap: 28px; padding-bottom: 32px; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: flex-start; }
}

/* ============================================================
   15. RETOUR EN HAUT
   ============================================================ */
.back-to-top {
  /* Aligné horizontalement sur .accessibility-toggle : même bottom, même taille, même style. */
  position: fixed;
  right:  max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 80;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-primary); color: #fff; border: none;
  box-shadow: 0 8px 24px rgba(13,139,148,.35);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s var(--motion-ease),
              transform .28s cubic-bezier(.34,1.56,.64,1),
              background .22s var(--motion-ease);
}
.back-to-top:hover { background: var(--color-on-primary-container); }
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top.visible:hover { transform: translateY(-2px); }
.back-to-top:focus-visible {
  outline: 3px solid rgba(13,139,148,.35);
  outline-offset: 4px;
}
.back-to-top :is(i, svg) { width: 20px; height: 20px; }

/* ============================================================
   16. RESPONSIVE — tablette
   ============================================================ */
@media (max-width: 1200px) {
  /* Bascule barre -> burger : seuil relevé à 1200px. Les 7 entrées + le CTA
     ne tiennent proprement qu'au-delà (mesuré au pixel sur la police Geist).
     Sous ce seuil, le menu burger prend le relais — plus pro sur petit écran. */
  .nav-links, .nav-actions { display: none; }
  .menu-btn { display: flex; }
  .mobile-panel { display: grid; } /* base = display:none ; ici on l'active */
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy, .hero-lead { max-width: none; }

  .why-executive-panel { grid-template-columns: 1fr; }
  .why-decision-rail { grid-template-columns: 1fr; gap: 22px; }

  .split { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder-aside { max-width: 240px; margin-inline: auto; }

  .doctrine-grid, .market-grid, .process,
  .deliverables-grid, .risk-list { grid-template-columns: repeat(2, 1fr); }

  .cta-questions { grid-template-columns: 1fr; }
}

/* ============================================================
   17. RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 680px) {
  /* Mobile : pas d'animation — fond dégradé statique calme (variante B).
     Le canvas est masqué ici ET l'animation est coupée dans le JS (batterie). */
  .hero { min-height: auto; background: var(--gradient-hero-radial); }
  .hero-mesh { display: none; }
  .hero::after { display: none; }
  /* Héros plus compact en mobile : -30px en haut et -30px en bas (PC inchangé). */
  .hero--centered { padding-block: clamp(62px, calc(11vh - 10px), 118px); }

  .hero-actions .btn { width: 100%; }

  /* Titres : redescendus en mobile (les clamp() plafonnent trop haut < 680px).
     Desktop et tablette restent inchangés. Hiérarchie préservée :
     héros > chapitre centré > h2 colonne étroite. */
  h1 { font-size: 2.1rem; }                                                     /* héros ~34px (était ~42) */
  .section-head:not(.section-head--sub) .section-title { font-size: 1.95rem; }  /* chapitre ~31px (était ~38) */
  .doctrine-card--mantra .mantra-word { font-size: 1.65rem; }                   /* Miroir/Moteur/Mesure ~26px : sous le titre */

  .why-proof-grid, .why-steps,
  .doctrine-grid, .market-grid, .process, .usecase-grid,
  .deliverables-grid, .risk-list, .friction-list { grid-template-columns: 1fr; }

  .usecase-detail li { grid-template-columns: 1fr; gap: 2px; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   18. RESPONSIVE — petit mobile
   ============================================================ */
@media (max-width: 420px) {
  .container { width: min(var(--layout-container-max), 100% - 32px); }
  .cta-panel { padding: 24px; }
  .doctrine-card, .market-card, .usecase-card,
  .deliverable-card, .step { padding: 22px; }

  /* Très petits écrans : on resserre encore d'un cran. */
  h1 { font-size: 1.95rem; }                                                    /* héros ~31px */
  h2 { font-size: 1.7rem; }                                                     /* h2 étroits ~27px */
  .section-head:not(.section-head--sub) .section-title { font-size: 1.8rem; }   /* chapitre ~29px */
  .doctrine-card--mantra .mantra-word { font-size: 1.5rem; }                    /* Miroir/Moteur/Mesure ~24px : sous le titre */
}

/* ============================================================
   19. MOUVEMENT REDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   20. RENFORCEMENTS VISUELS
   ============================================================ */


.metric span::before {
  content: "\2713"; margin-right: 7px;
  color: var(--color-on-primary-container); font-weight: 700;
}


.deliverable-icon {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: var(--space-card-header);
  border-radius: var(--radius-btn);
  background: var(--color-primary-container); color: var(--color-on-primary-container);
}
.deliverable-icon :is(i, svg) { width: 21px; height: 21px; }


/* ============================================================
   21. SIGNATURE GRAPHIQUE — schema hub-and-spoke (gabarit)
   ============================================================ */

.fmap {
  --teal: var(--color-primary);
  --teal-light: var(--color-primary-container);
  --line-strong: #a8ccd3;
  --shadow:      var(--elevation-frame);
  --shadow-card: var(--elevation-card);
  --radius-xl: 34px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  position: relative; isolation: isolate;
  width: min(100%, 560px); margin-inline: auto;
  aspect-ratio: 1 / 1;
  /* Test : contour conservé, fond transparent.
     La forme du grand cadre reste lisible (trait extérieur 1px), mais
     le plateau ne porte plus de fond blanc — le schéma respire sur le
     gris très clair de la section. Si validé, mettre à jour
     SIGNATURE_GRAPHIQUE.md (la règle « grand cadre » garde le contour
     mais perd le fond blanc). */
  border: 1px solid rgba(148,163,184,.36);
  border-radius: var(--radius-xl);
  background: transparent;
  box-shadow: none;
  overflow: visible;
  container-type: inline-size;
}
/* (la bordure intérieure ::before a été retirée — gabarit allégé) */
.fmap-wires {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.fmap-line {
  fill: none; stroke: var(--line-strong); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.fmap-node {
  fill: var(--teal); stroke: #ffffff; stroke-width: 5;
  filter: drop-shadow(0 3px 6px rgba(13,139,148,.14));
}
/* (.fmap-pill / .fmap-dot / .fmap-pill-t supprimés — voir .schema-pill commun) */
.fmap-side, .fmap-src {
  position: absolute; display: flex; align-items: center;
  border: 1px solid rgba(203,219,227,.92);
  border-radius: var(--radius-lg);
  background: #ffffff;
  box-shadow: var(--shadow-card);
  z-index: 3;
}
.fmap-side {
  width: 25.2%; min-height: 12.2%;
  padding: 1.5% 1.6%; gap: clamp(7px,1.4cqw,14px);
}
.fmap-side--lt { left: 7.1%; top: 20.2%; }
.fmap-side--lm { left: 7.1%; top: 35.3%; }
.fmap-side--lb { left: 7.1%; top: 50.4%; }
.fmap-side--rt { right: 7.1%; top: 20.2%; }
.fmap-side--rm { right: 7.1%; top: 35.3%; }
.fmap-side--rb { right: 7.1%; top: 50.4%; }
.fmap-badge {
  width: clamp(30px,5.6cqw,52px); aspect-ratio: 1; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid rgba(168,204,211,.62);
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--color-on-primary-container);
}
.fmap-badge svg { width: 52%; height: 52%; stroke: currentColor; }
.fmap-side p {
  margin: 0; color: var(--color-inverse-surface);
  font-size: var(--font-label-md); line-height: 1.4;     /* exception géométrique : carte étroite */
  font-weight: 500; letter-spacing: -.02em;
}
.fmap-hub {
  position: absolute; top: 32%; left: 38.2%; width: 23.6%;
  aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 12px rgba(13,139,148,.05), 0 12px 28px -28px rgba(15,23,42,.32);
  z-index: 5;
}
/* Médaillon : la grosse ligne teal (ancien ::before, scale .91) est RETIRÉE.
   On conserve le filet fin ::after (scale 1.02) — c'est lui que rejoignent les
   fils du schéma, donc rien ne se décroche. */
.fmap-hub::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(168,204,211,.75); transform: scale(1.02);
}
/* Texte courbé en capitales (FRICTION en haut, OPÉRATIONNELLE en bas) + icône
   centrale. Le SVG remplit le hub ; le texte est en unités viewBox (échelle
   automatique avec le cercle). */
.fmap-hub-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;
}
.fmap-hub-word {
  fill: var(--color-inverse-surface); font-weight: 600;
  font-family: var(--font-family-sans);
}
.fmap-hub-icon {
  width: 26px; height: 26px; color: var(--color-primary); z-index: 2;
}
.fmap-src {
  top: 72.2%; width: 19.4%; min-height: 21.2%;
  flex-direction: column; justify-content: flex-start; text-align: center;
  padding: 2.1% 1.6% 1.8%; gap: clamp(6px,0.9cqw,12px);
}
.fmap-src--1 { left: 8%; }
.fmap-src--2 { left: 30.2%; }
.fmap-src--3 { left: 52.4%; }
.fmap-src--4 { left: 74.6%; }
.fmap-src .fmap-badge {
  width: clamp(31px,5.8cqw,54px);
  margin-bottom: clamp(4px,0.5cqw,8px);
}
.fmap-src-t {
  margin: 0; color: var(--color-inverse-surface);
  font-size: var(--font-body-sm); line-height: 1.2;  /* exception géométrique : carte source étroite (19,4 %) */
  font-weight: 700; letter-spacing: -.012em;
}
.fmap-rule {
  width: 36px; height: 2px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.fmap-src p {
  margin: 0; color: var(--color-inverse-surface);
  font-size: var(--font-label-md); line-height: 1.4;  /* exception géométrique : carte source étroite */
  font-weight: 400; letter-spacing: -.01em;
}

/* ---- .fmap responsive : sous 680px on passe en flux empilé (Grid) ---- */
@media (max-width: 680px) {
  .fmap {
    aspect-ratio: auto;
    width: 100%;
    padding: 22px 16px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
    container-type: normal;       /* on quitte les unités cqw, on passe en px */
  }
  /* Les connecteurs SVG n'ont plus de sens en flux vertical : on les neutralise.
     !important assumé : la règle globale `img, svg, video { display: block }`
     a la même valeur en cascade et cause des conflits ; on tranche net. */
  .fmap > .fmap-wires,
  .fmap .fmap-wires,
  svg.fmap-wires {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
  }

  .fmap > .schema-pill {
    position: static; inset: auto;
    grid-column: 1 / -1;
    justify-self: center;
    width: auto; min-height: 0;
    padding: 8px 18px;
    margin: 0 0 4px;
  }
  .fmap > .schema-pill .schema-pill-t { font-size: var(--font-label-md); white-space: normal; }

  .fmap-side {
    position: static; inset: auto;
    width: auto; min-height: 0;
    padding: 10px 12px;
    gap: 10px;
  }
  .fmap-side .fmap-badge { width: 34px; }
  .fmap-side p { font-size: var(--font-label-md); line-height: 1.4; letter-spacing: -.02em; }

  /* Le hub : centré sur sa propre ligne, dimensions fixes en pixels.
     `position: relative` est CRUCIAL — sinon les pseudos ::before/::after
     (qui sont position:absolute; inset:0) se rattachent à .fmap et
     forment des ellipses géantes sur toute la hauteur du conteneur. */
  .fmap-hub {
    position: relative; inset: auto;
    grid-column: 1 / -1;
    justify-self: center;
    width: 120px; height: 120px;          /* médaillon : assez de circonférence pour des capitales courbées lisibles ; sans la grosse ligne teal, il reste bien plus léger qu'avant (140px plein) */
    aspect-ratio: auto;
    margin: 10px 0 6px;
    box-shadow: 0 0 0 8px rgba(13,139,148,.05), 0 10px 24px -26px rgba(15,23,42,.32);
  }
  .fmap-hub-icon { width: 28px; height: 28px; }

  .fmap-src {
    position: static; inset: auto;
    width: auto; min-height: 0;
    flex-direction: column; align-items: center;
    padding: 14px 10px 12px; gap: 6px;
  }
  .fmap-src .fmap-badge { width: 36px; margin-bottom: 2px; }
  .fmap-src-t { font-size: var(--font-body-sm); }
  .fmap-src p { font-size: var(--font-label-md); line-height: 1.4; }
  .fmap-rule { width: 28px; }
}

/* ============================================================
   22. SCHEMA INTERFACE -> MOTEUR (gabarit etendu)
   ============================================================ */
.emap {
  --teal: var(--color-primary);
  --teal-light: var(--color-primary-container);
  --line-strong: #a8ccd3;
  --shadow: var(--elevation-frame);
  --shadow-card: var(--elevation-card);
  --radius-xl: 30px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  position: relative; isolation: isolate;
  width: 100%; max-width: 1000px; margin-inline: auto;
  /* Cadre (« plateau ») retiré : .emap est un schéma linéaire sans dépendance
     de layout au cadre. On gagne en légèreté et on supprime l'espace vide. */
  padding: 0;
  container-type: inline-size;
}
/* (la bordure intérieure ::before a été retirée — gabarit allégé, comme .fmap) */
.emap > * { position: relative; z-index: 1; }
/* (.emap-head / .emap-pill / .emap-dot / .emap-pill-t supprimés — voir .schema-pill / .schema-pill-host commun) */
.emap-screen {
  width: min(62%, 460px); margin: 0 auto;
  background: #ffffff; border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.emap-screen-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: #f7f9fb;
  border-bottom: 1px solid var(--color-outline-variant);
}
.emap-screen-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--color-primary-container); color: var(--color-on-primary-container);
  font-size: var(--font-label-caps); font-weight: 600;
}
.emap-screen-chip :is(i, svg) { width: 14px; height: 14px; }
.emap-screen-tabs { display: flex; gap: 6px; }
.emap-screen-tabs span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-outline); }
.emap-screen-body { padding: 16px 18px 20px; display: grid; gap: 8px; }
.emap-screen-line { height: 8px; border-radius: 4px; background: var(--color-primary-container); }
.emap-screen-line.short { width: 70%; opacity: .7; }
/* Connecteur en branche à 3 axes — même langage que le schéma frictions :
   trait FIN (1,5px) et CLAIR (#a8ccd3, --line-strong), coudes ARRONDIS
   (border-radius), pastilles teal. Jambes alignées EXACTEMENT sur les centres
   des 3 colonnes via calc (le 28px = les 2 gouttières de 14px). */
.emap-flow {
  position: relative; width: 100%; height: 46px; margin: 8px 0 16px;
  --line: var(--line-strong);              /* #a8ccd3 — identique aux fils du schéma frictions */
  --barY: 18px;                            /* niveau de la barre horizontale */
  --drop: 22px;                            /* longueur des descentes */
  --c1: calc((100% - 28px) / 6);           /* centre colonne 1 */
  --c3: calc(100% - (100% - 28px) / 6);    /* centre colonne 3 */
  --r: 12px;                               /* rayon des coudes */
}
.emap-flow span { position: absolute; }
.emap-flow-stem {
  top: 0; left: 50%; transform: translateX(-50%);
  width: 1.5px; height: var(--barY); background: var(--line); border-radius: 2px;
}
/* coude gauche : barre horizontale (bord haut) + descente arrondie à col1 (bord gauche) */
.emap-flow-elbow--l {
  top: var(--barY); left: var(--c1); width: calc(50% - var(--c1)); height: var(--drop);
  border-top: 1.5px solid var(--line);
  border-left: 1.5px solid var(--line);
  border-top-left-radius: var(--r);
}
/* coude droit : symétrique */
.emap-flow-elbow--r {
  top: var(--barY); left: 50%; width: calc(var(--c3) - 50%); height: var(--drop);
  border-top: 1.5px solid var(--line);
  border-right: 1.5px solid var(--line);
  border-top-right-radius: var(--r);
}
/* descente centrale (sous le nœud) */
.emap-flow-mid {
  top: var(--barY); left: 50%; transform: translateX(-50%);
  width: 1.5px; height: var(--drop); background: var(--line); border-radius: 2px;
}
.emap-flow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-primary); border: 2px solid #fff; box-sizing: content-box;
  transform: translate(-50%, -50%);
}
.emap-flow-dot--hub { top: var(--barY); left: 50%; }
.emap-flow-dot--1 { top: calc(var(--barY) + var(--drop)); left: var(--c1); }
.emap-flow-dot--2 { top: calc(var(--barY) + var(--drop)); left: 50%; }
.emap-flow-dot--3 { top: calc(var(--barY) + var(--drop)); left: var(--c3); }
.emap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.emap-node {
  background: #ffffff; border: 1px solid rgba(203,219,227,.92);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 16px 18px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.emap-badge {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(168,204,211,.62);
  background: var(--color-primary-container); color: var(--color-on-primary-container);
  margin-bottom: var(--space-card-header-compact);
}
.emap-badge :is(i, svg) { width: 19px; height: 19px; }
.emap-node-t {
  margin: 0 0 6px; color: var(--color-inverse-surface);
  font-size: var(--font-body-md); line-height: 1.3;
  font-weight: 700; letter-spacing: -.012em;
}
.emap-node p:not(.emap-node-t) {
  margin: 0; color: var(--color-on-surface-variant);
  font-size: var(--font-body-sm); line-height: 1.5;
}
@media (max-width: 680px) {
  .emap { padding: 0; }
  .emap-grid { grid-template-columns: 1fr; }
  .emap-screen { width: 100%; }
  /* 1 colonne : le branchement à 3 axes n'a plus de sens -> simple tige centrale. */
  .emap-flow { height: 32px; }
  .emap-flow-elbow--l, .emap-flow-elbow--r,
  .emap-flow-dot--1, .emap-flow-dot--3 { display: none; }
  .emap-flow-mid { height: 16px; }
}



/* ============================================================
   23. FORMULAIRE DE CONTACT
   ============================================================ */
/* Sub-plateau autour du formulaire — un cran plus clair que le fond
   dark de la section (color-inverse-surface-bright vs surface), pour
   que la zone du form se détache visuellement. Max-width 720 px pour
   contraindre la largeur (sinon le form s'étalerait sur 1180 px du
   container). Centré. Padding intérieur confortable et adaptatif. */
.contact-block {
  margin: 24px auto 0;
  max-width: 720px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--color-inverse-surface-bright);
  border: 1px solid var(--color-inverse-outline);
  border-radius: var(--radius-panel);
}
.contact-block > p {
  color: var(--color-inverse-on-surface-variant);
  margin: 0 auto 24px;
  max-width: 580px;
  text-align: center;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Mobile : 1 colonne pour que les labels longs (« Email professionnel »,
   « Entreprise / Organisation ») tiennent sur une ligne et que les champs
   aient une vraie largeur de saisie. Placée ICI (après la règle de base)
   pour que la cascade fonctionne — sinon la base définie plus bas écraserait
   la version mobile à spécificité égale. */
@media (max-width: 680px) {
  .contact-form { grid-template-columns: 1fr; gap: 12px; }
}
/* Note « * Champs obligatoires » au-dessus des fields */
.contact-required-note {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: var(--font-label-md);
  color: var(--color-inverse-on-surface-faint);
  font-style: italic;
}
/* Astérisque rouge sur les labels de champs requis */
.contact-field .req {
  color: #ff7a8a; /* rouge clair lisible sur navy */
  font-weight: 700;
  margin-left: 2px;
}
.contact-field { display: grid; gap: 6px; min-width: 0; }
.contact-field--full { grid-column: 1 / -1; }
.contact-field label {
  font-size: var(--font-label-md);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-inverse-on-surface-variant);
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-btn);
  background: var(--color-inverse-surface-tint);
  border: 1px solid var(--color-inverse-outline);
  color: var(--color-inverse-on-surface);
  font: inherit;
  font-size: var(--font-body-sm);
  transition: border-color .18s var(--motion-ease), background .18s var(--motion-ease);
}
.contact-field textarea {
  resize: vertical;
  min-height: 88px;
  font-family: inherit;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--color-inverse-on-surface-faint);
  /* Force le placeholder à suivre le font-size dynamique de son input parent —
     sans ça, le widget a11y « A+ » ne grossit pas le texte d'exemple sur
     Chrome/Safari. Avec inherit explicite, le re-calcul se fait à chaque
     changement de font-size inline. */
  font-size: inherit;
  font-family: inherit;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--color-primary-bright);
  background: rgba(255,255,255,.06);
}

.contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 6px;
}
.contact-actions button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }

.contact-legal {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--font-label-md);
  color: var(--color-inverse-on-surface-faint);
  text-align: center;  /* centré pour équilibre visuel sous le formulaire */
}
/* Lien « En savoir plus » → même peau que les liens .source-line
   (sources McKinsey / BCG) : teal bright, souligné fin, opacité hover. */
.contact-legal a {
  color: var(--color-primary-bright);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: currentColor;
  transition: opacity var(--motion-ease);
}
.contact-legal a:hover { opacity: .8; }

.contact-success {
  margin: 18px 0 0;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: rgba(25,179,189,.12);
  border: 1px solid rgba(25,179,189,.45);
}
.contact-success p {
  margin: 0;
  color: var(--color-inverse-on-surface);
  font-size: var(--font-body-md);
  line-height: 1.5;
}

/* Composant alert inline — affiché UNIQUEMENT si le POST Formspree échoue.
   Pattern Material 3 : icône à gauche dans pastille teintée + corps texte
   (titre + message) à droite. Bordure douce coral, fond saturé subtil,
   ombre de profondeur pour le décollement sur le formulaire navy.

   Note : la règle universelle `[hidden] { display: none !important; }`
   définie en tout début de fichier garantit que `display: grid` ci-dessous
   n'écrase PAS l'attribut HTML `hidden`. Sans cette règle, le toaster
   s'afficherait en permanence au lieu d'être masqué jusqu'au déclenchement
   par le JS. Piège classique scellé. */
.contact-error {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 16px 18px;
  border-radius: var(--radius-card);
  background: rgba(255, 100, 120, .08);
  border: 1px solid rgba(255, 100, 120, .35);
  box-shadow: 0 4px 16px rgba(255, 100, 120, .08);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
}
.contact-error-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 100, 120, .18);
  color: #ff9aab;
}
.contact-error-icon :is(svg, i) {
  width: 22px; height: 22px;
}
.contact-error-body { min-width: 0; }
.contact-error-title {
  margin: 0 0 4px;
  font-size: var(--font-body-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-inverse-on-surface);
  line-height: 1.3;
}
.contact-error-text {
  margin: 0;
  color: var(--color-inverse-on-surface-variant);
  font-size: var(--font-body-sm);
  line-height: 1.5;
}
.contact-error-text a {
  color: #ff9aab;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.contact-error-text a:hover { color: #ffb3c0; }
@media (max-width: 480px) {
  .contact-error { grid-template-columns: 1fr; }
  .contact-error-icon { width: 36px; height: 36px; }
}

/* ============================================================
   21. PAGES LÉGALES (confidentialité, mentions)
   ============================================================ */
.legal-doc { padding: 96px 0 64px; }
.legal-doc .container { max-width: 760px; }
.legal-doc h1 { font-size: var(--font-headline-xl); margin-bottom: 12px; }
.legal-doc .legal-meta {
  font-size: var(--font-body-sm); color: var(--color-on-surface-variant);
  margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--color-outline-variant);
}
.legal-doc h2 {
  font-size: var(--font-headline-md);
  margin: 48px 0 14px;
  letter-spacing: -.01em;
}
.legal-doc h3 {
  font-size: var(--font-body-md);
  margin: 24px 0 8px;
  color: var(--color-on-surface);
}
.legal-doc p, .legal-doc li { color: var(--color-on-surface-variant); }
.legal-doc ul { margin: 8px 0 16px; padding-left: 22px; }
.legal-doc ul li { margin-bottom: 6px; }
.legal-doc strong { color: var(--color-on-surface); }
.legal-doc a { color: var(--color-on-primary-container); text-decoration: underline; text-underline-offset: 3px; }
.legal-doc a:hover { color: var(--color-primary); }
.legal-doc .legal-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 56px;
  font-size: var(--font-body-sm); color: var(--color-on-surface-variant);
}
.legal-doc .legal-back:hover { color: var(--color-on-primary-container); }
@media (max-width: 680px) {
  .legal-doc { padding: 104px 0 48px; }  /* 72px nav + 32px de respiration */
  .legal-doc h2 { margin-top: 36px; }
}

/* Placeholder visuel pour les "À COMPLÉTER" — magenta secondaire de marque
   (visible dans le logo : #C10086). Pas un token de production : signal de dev. */
.legal-todo {
  display: inline-block;
  padding: 1px 8px; border-radius: 4px;
  background: rgba(193, 0, 134, .10);
  color: #C10086;
  font-size: .85em; font-weight: 600;
  letter-spacing: .01em;
}

/* ============================================================
   22. ACCESSIBILITÉ — bouton + panneau flottants
   Couleurs tirées de nos tokens sémantiques (--color-*).
   Toggle bas-gauche, panneau au-dessus avec taille texte, contraste,
   réduction animations, soulignement liens, reset. localStorage.
   ============================================================ */
.accessibility-toggle {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left:   max(20px, env(safe-area-inset-left));
  z-index: 9999;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: grid; place-items: center;
  border: none;
  box-shadow: 0 8px 24px rgba(13,139,148,.35);
  cursor: pointer;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              background .22s var(--motion-ease),
              box-shadow .22s var(--motion-ease);
}
.accessibility-toggle:hover,
.accessibility-toggle[aria-expanded="true"] {
  background: var(--color-on-primary-container);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(13,139,148,.45);
}
.accessibility-toggle:focus-visible {
  outline: 3px solid rgba(13,139,148,.35);
  outline-offset: 4px;
}
.accessibility-toggle-icon {
  width: 23px;
  height: 23px;
  display: block;
  flex-shrink: 0;
}

/* Bouton de fermeture (×) du panneau a11y — coin haut-droit, discret au repos,
   teal accent au hover. data-a11y-action="toggle-accessibility" → ferme. */
.accessibility-close {
  position: absolute;
  top: 16px; right: 16px;  /* aligné sur le padding du panel + rangée du titre */
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--color-outline-variant);
  border-radius: 50%;
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  font-size: 26px; line-height: 1;
  font-weight: 400;
  cursor: pointer;
  transition: all .15s var(--motion-ease);
}
.accessibility-close:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.accessibility-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.accessibility-panel {
  position: fixed;
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 64px);
  left:   max(20px, env(safe-area-inset-left));
  z-index: 9998;
  width: min(320px, calc(100vw - 40px));
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-3);
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.96);
  transform-origin: bottom left;
  transition: opacity .24s var(--motion-ease), transform .24s var(--motion-ease);
}
.accessibility-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.accessibility-panel h3 {
  font-size: 1.125rem; font-weight: 700;  /* 18px — légèrement plus présent que body-md (17px) */
  line-height: 1.25; margin: 0 0 18px;
  min-height: 44px;                       /* la rangée du titre fait la même hauteur que le bouton × */
  padding-right: 56px;                    /* réserve l'espace du bouton de fermeture (44px + 12px gap) */
  display: flex; align-items: center;     /* centre verticalement le titre dans sa rangée */
  color: var(--color-on-surface);
  letter-spacing: -.015em;
}
.accessibility-panel > p {
  font-size: var(--font-label-md); color: var(--color-on-surface-variant);
  line-height: 1.5; margin: 0 0 12px;
}

.accessibility-options { display: grid; gap: 8px; }

.accessibility-text-control {
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface);
}
.accessibility-text-control-head {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--font-label-md); font-weight: 800;
}
.accessibility-icon {
  width: 18px; flex-shrink: 0;
  color: var(--color-primary);
  font-size: 13px; text-align: center;
}

.accessibility-size-buttons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-top: 10px;
}
.accessibility-size-btn {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  font-family: inherit; font-size: var(--font-label-md); font-weight: 800;
  cursor: pointer;
  transition: all .18s var(--motion-ease);
}
.accessibility-size-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
}
.accessibility-size-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(13,139,148,.22);
}

.accessibility-option {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: inherit; font-size: var(--font-label-md); font-weight: 700;
  cursor: pointer;
  transition: all .18s var(--motion-ease);
}
.accessibility-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
}
.accessibility-option.active {
  border-color: var(--color-primary);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.accessibility-reset {
  margin-top: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;                              /* aligné sur les cartes d'options (.accessibility-text-control) */
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface);                 /* même blanc que les cartes d'options */
  color: var(--color-on-surface-variant);
  font-family: inherit; font-size: var(--font-label-md); font-weight: 700;
  cursor: pointer;
  transition: color .18s var(--motion-ease), background .18s var(--motion-ease), border-color .18s var(--motion-ease);
}
.accessibility-reset:hover {
  background: var(--color-primary-container);
  border-color: var(--color-primary);
  color: var(--color-on-primary-container);
}
.accessibility-reset:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================================
   MODE CONTRASTE RENFORCÉ — architecture
   ============================================================
   Référence officielle : SIGNATURE_GRAPHIQUE.md § Accessibilité.

   PRINCIPE : on ne recolore PAS sauvagement tous les span / a. Les blocs
   et boutons gardent leur logique propre. Pour un composant à fond foncé
   nécessitant texte clair, on ajoute la classe .a11y-inverse.

   .a11y-inverse — CONTRAT :
   - Classe utilitaire universelle (peut s'appliquer à n'importe quel élément)
   - En mode contraste renforcé : force background navy + text blanc + border navy
   - Tous ses descendants héritent du blanc (via la règle `.a11y-inverse *`)

   QUAND L'APPLIQUER :
   - Tout CTA stylé en bouton, peu importe sa balise (`<a>`, `<button>`, `<div>`)
   - Tout composant qui doit rester foncé-sur-blanc en contraste renforcé
   - Composants connus aujourd'hui :
       • header nav CTA              ← <a class="btn btn-primary a11y-inverse">
       • hero CTA                    ← <a class="btn btn-primary a11y-inverse">
       • mobile-panel CTA            ← <a class="a11y-inverse">  (PAS de .btn !)
       • formulaire submit           ← <button class="btn btn-primary a11y-inverse">

   COMMENT LES RÈGLES SE PROTÈGENT MUTUELLEMENT :
   - Les règles de recoloring (liens, dark-section, …) ajoutent toutes
     `:not(.a11y-inverse)` à leurs sélecteurs.
   - La règle `.a11y-inverse { ...!important }` est placée APRÈS les règles
     génériques (button, .btn), donc en cas d'égalité de spécificité, elle
     gagne par source-order.
   - La règle `.a11y-inverse * { color: #fff !important }` protège les
     descendants directs/indirects.

   NOTE FONDAMENTALE : avant d'ajouter une nouvelle règle dans cette section,
   se demander : « est-ce que cette règle pourrait écraser .a11y-inverse ? »
   Si oui → ajouter `:not(.a11y-inverse)` au sélecteur. */
html.a11y-high-contrast {
  --a11y-bg: #ffffff;
  --a11y-panel: #ffffff;
  --a11y-text: #050816;
  --a11y-muted: #1f2937;
  --a11y-border: #64748b;
  --a11y-accent: #006d73;
  --a11y-accent-dark: #004c51;
  --a11y-accent-soft: rgba(0, 109, 115, .16);
}

html.a11y-high-contrast body {
  color: #050816;
  background: #ffffff;
}

/* Texte courant : hérite, ne force pas */
html.a11y-high-contrast p,
html.a11y-high-contrast li,
html.a11y-high-contrast label,
html.a11y-high-contrast small,
html.a11y-high-contrast strong,
html.a11y-high-contrast em {
  color: inherit;
}

/* Liens textuels uniquement (pas les boutons).
   `.a11y-inverse` est inclus dans les exceptions : c'est la classe utilitaire
   « ce composant a son propre traitement contrasté, ne le touche pas ». À mettre
   sur tout CTA stylé en bouton qui n'utilise pas la classe `.btn` (ex. lien du
   mobile-panel). Sans cette exception, ces CTAs deviennent teal sur fond foncé. */
html.a11y-high-contrast a:not(.btn):not(.button):not([role="button"]):not(.a11y-inverse) {
  color: #006d73;
}

/* Boutons : ne jamais recolorer brutalement, hériter de leur parent */
html.a11y-high-contrast button,
html.a11y-high-contrast .btn,
html.a11y-high-contrast .button,
html.a11y-high-contrast [role="button"] {
  color: inherit;
}
html.a11y-high-contrast button *,
html.a11y-high-contrast .btn *,
html.a11y-high-contrast .button *,
html.a11y-high-contrast [role="button"] * {
  color: inherit !important;
  fill: currentColor;
  stroke: currentColor;
}

/* Utilitaire pour les boutons à fond foncé et texte clair */
html.a11y-high-contrast .a11y-inverse {
  background: #051225 !important;
  color: #ffffff !important;
  border-color: #051225 !important;
}
/* Exception : le bouton submit du formulaire #contact est déjà BLANC-sur-navy
   en mode normal (contraste WCAG AAA à 17:1, donc déjà maximal). L'appliquer
   `.a11y-inverse` le forcerait en navy-sur-navy = invisible sur le formulaire
   navy. On préserve donc le blanc + texte navy en mode contraste renforcé.
   La spécificité (1,2,0) bat la règle générique .a11y-inverse (0,2,0). */
html.a11y-high-contrast #contact .btn-primary.a11y-inverse {
  background: #ffffff !important;
  color: #051225 !important;
  border-color: #ffffff !important;
}
html.a11y-high-contrast .a11y-inverse *,
html.a11y-high-contrast .a11y-inverse span,
html.a11y-high-contrast .a11y-inverse strong,
html.a11y-high-contrast .a11y-inverse i,
html.a11y-high-contrast .a11y-inverse svg {
  color: #ffffff !important;
  fill: currentColor;
  stroke: currentColor;
}

html.a11y-underline-links a:not(.btn):not(.nav-actions a):not(.brand) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* High-contrast sur tous les contextes sombres (.dark-section couvre
   #pourquoi + #aipilot + #contact maintenant) : sans cet override,
   le texte qui héritait de `color: inherit` devient noir-sur-navy =
   illisible. On force le blanc pur. Le kicker et les liens prennent un
   teal vif pour rester accentués tout en restant lisibles sur navy. */
html.a11y-high-contrast .dark-section,
html.a11y-high-contrast .dark-section :is(h1, h2, h3, h4, p, li, small, strong, em, span, b) {
  color: #ffffff !important;
}
html.a11y-high-contrast .dark-section .section-kicker {
  color: #7ce8ee !important;
}
html.a11y-high-contrast .dark-section a:not(.btn):not(.button):not([role="button"]):not(.a11y-inverse) {
  color: #7ce8ee !important;
}

/* Placeholders du formulaire de contact en mode contraste renforcé :
   sans override explicite, ils héritent du gris-faint illisible sur fond
   navy. On les force en blanc semi-transparent pour les distinguer du
   texte saisi (blanc plein) tout en restant lisibles. */
html.a11y-high-contrast .contact-field input::placeholder,
html.a11y-high-contrast .contact-field textarea::placeholder {
  color: rgba(255, 255, 255, .82) !important;
  opacity: 1 !important;
}

/* Boutons à fond coloré + icône/texte clair (always-on, floating, ou
   actifs) : sans cet override, le `color: inherit` du high-contrast
   les force en noir-sur-couleur-foncée = illisible. */
html.a11y-high-contrast :is(
  .back-to-top,
  .accessibility-toggle,
  .accessibility-size-btn.active
) {
  color: #ffffff !important;
}
html.a11y-high-contrast :is(
  .back-to-top,
  .accessibility-toggle,
  .accessibility-size-btn.active
) * {
  color: #ffffff !important;
  fill: currentColor; stroke: currentColor;
}
/* Back-to-top : teal high-contrast, PAS navy. La règle initiale forçait #051225
   (navy) — invisible sur les sections sombres #pourquoi et #aipilot (déjà navy).
   Le bouton étant positionné fixe par-dessus toute la page, il doit rester
   visible sur fond clair ET fond foncé. Teal = couleur de marque, contraste
   garanti partout. Cohérent avec .accessibility-toggle (côté gauche) qui
   utilise déjà cette teinte. */
html.a11y-high-contrast .back-to-top { background: #006d73 !important; }
html.a11y-high-contrast .accessibility-toggle { background: #006d73 !important; }
html.a11y-high-contrast .accessibility-size-btn.active {
  background: #006d73 !important;
  border-color: #006d73 !important;
}

/* Mode "réduire les animations" : neutralise toutes les animations et
   transitions au minimum perceptible (0.001ms). Activé via le widget a11y. */
html.a11y-reduce-motion { scroll-behavior: auto; }
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* Mobile : widget a11y et bouton back-to-top en taille compacte */
@media (max-width: 600px) {
  .accessibility-toggle {
    width: 42px; height: 42px;
    bottom: 14px; left: 14px;
  }
  .back-to-top {
    width: 42px; height: 42px;
    bottom: 14px; right: 14px;
  }
  .accessibility-panel {
    bottom: 66px; left: 14px;
    width: min(310px, calc(100vw - 28px));
    padding: 14px;
  }
}