/* ═══════════════════════════════════════════════════════
   RevelleIT · Site vitrine v2 · Swiss Technical
   Direction : typographie monumentale · contrastes tranchés
   Palette brandbook · Plus Jakarta + DM Sans + JetBrains Mono
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --paper: #f4f6f3;
  --paper-alt: #eceee9;
  --chalk: #ffffff;
  --ink: #0b1a14;
  --ink-soft: #132e22;
  --ink-active: #1b4332;

  /* ── Primaires ── */
  /* Le vert du logo n'est pas --primary : c'est une couleur de marque a part,
     appliquee au seul bloc-marque. Elle est aussi en dur dans assets/logo.svg
     et dans la meta theme-color, qui ne peuvent pas lire une variable CSS. */
  --brand-mark: #137c5b;
  --primary: #16795a;
  --primary-hover: #125e46;
  --primary-tint: #e6f5ee;
  --emerald: #34d399;
  --emerald-dim: #10b981;

  /* ── Accent signal ── */
  --amber: #b45309;
  /* Accent des encarts editoriaux (.legal-footer-note). Etait utilise sans
     jamais avoir ete defini : le fond et la bordure tombaient a plat. */
  --accent: #b45309;
  --amber-soft: #fef3c7;
  --amber-deep: #7c2d12;

  /* ── Sémantique ── */
  --success: #047857;
  --danger: #b91c1c;
  --err-fg: #b91c1c; /* 5,54:1 sur --paper-alt, 6,47:1 sur --chalk */
  --err-on: #ffffff; /* encre posee sur --err-fg : 6,47:1 */
  /* Bordure de champ : 3,60:1 sur --chalk, 3,08:1 sur --paper-alt. */
  --field-border: #7c8a86;
  --warning: #f59e0b;
  --info: #1d4ed8;

  /* ── Scores 1→5 (brandbook) ── */
  --score-1: #dc2626;
  --score-2: #ea580c;
  --score-3: #d97706;
  --score-4: #65a30d;
  --score-5: #047857;

  /* ── Indicateurs environnementaux (brandbook) ── */
  --c-tpe: #8b5cf6;
  --c-gwp: #ef4444;
  --c-adpe: #0e7490;
  --c-adpf: #0d9488;
  --c-wu: #0284c7;
  --c-weee: #6b7280;
  --c-score: #ec4899;
  --c-fab: #7c3aed;
  --c-use: #ea580c;

  /* ── Textes & traits ── */
  --text: #0b1a14;
  --text-muted: #5c6b7f;
  /* Calibre sur --paper-alt, le plus sombre des trois fonds ou il sert :
     4,55:1 la, 4,89:1 sur --paper, 5,31:1 sur --chalk (WCAG 1.4.3 AA).
     L'ecart avec --text-muted est faible, c'est la contrainte d'un texte
     de 10 a 12 px sur fond clair : la conformite prime sur la nuance. */
  --text-soft: #646c77;
  --text-paper: #f1f5f9;

  --rule: #0b1a14;
  --rule-soft: #d4d8cf;
  --rule-dim: rgba(11, 26, 20, 0.08);

  /* ── Typo ── */
  --ff-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --ff-body: "DM Sans", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ── Layout ── */
  --col-max: 1440px;
  --gutter: 32px;
  --nav-h: 60px;

  /* ── Radius minimalistes ── */
  --r-sm: 2px;
  --r: 4px;
  --r-md: 6px;

  /* ── Surfaces contrastantes permanentes (identiques light & dark) ── */
  --surface-invert-bg: #0b1a14;
  --surface-invert-bg-alt: #081510;
  --surface-invert-fg: #f1f5f9;
  --surface-invert-fg-muted: #cbd5e1;
  --surface-invert-fg-soft: #94a3b8;
  --surface-invert-border: rgba(255, 255, 255, 0.12);
  --surface-invert-border-soft: rgba(255, 255, 255, 0.08);
  --surface-invert-overlay: rgba(255, 255, 255, 0.04);
  --surface-invert-overlay-hi: rgba(255, 255, 255, 0.06);

  /* ── Focus ring shadow (s'inverse avec le theme) ── */
  --focus-ring-shadow: rgba(0, 0, 0, 0.25);
}

/* ── Dark mode (cohérent brandbook sidebar) ── */
[data-theme="dark"] {
  --paper: #0b1a14;
  --paper-alt: #081510;
  --chalk: #132e22;
  --ink: #f4f6f3;
  --ink-soft: #e6f5ee;
  --ink-active: #d1fae5;

  --primary: #34d399;
  --primary-hover: #6ee7b7;
  --primary-tint: rgba(52, 211, 153, 0.12);

  --amber: #fbbf24;
  --accent: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.12);
  --amber-deep: #f59e0b;

  --text: #f1f5f9;
  --text-muted: #a0b0c4;
  --text-soft: #8091a3; /* ~5.5:1 sur --paper dark (WCAG 1.4.3 AA) */
  --text-paper: #0b1a14;

  --rule: #f4f6f3;
  --rule-soft: #1f4a38;

  --err-fg: #f87171; /* 5,26:1 sur les surfaces sombres */
  --err-on: #0b1a14; /* encre posee sur --err-fg : 6,48:1 */
  --field-border: #568a74; /* 3,66:1 sur --chalk, 4,51:1 sur --paper */
  --rule-dim: rgba(244, 246, 243, 0.08);

  /* Focus ring shadow adapte au fond sombre */
  --focus-ring-shadow: rgba(255, 255, 255, 0.35);

  /* Scores retunes pour respecter 3:1 UI sur fond sombre (WCAG 1.4.11) */
  --score-1: #f87171;
  --score-2: #fb923c;
  --score-3: #fbbf24;
  --score-4: #a3e635;
  --score-5: #34d399;
}

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

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--paper);
  line-height: 1.5;
  overflow-x: hidden;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--ff-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text);
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  z-index: 1000;
}
.skip-link:focus {
  top: 0;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  /* 8px et non 5 : sous 5px le halo tombait exactement dans la bande occupee
     par l'outline (3px a 2px d'offset) et restait invisible. */
  box-shadow: 0 0 0 8px var(--focus-ring-shadow);
  border-radius: 2px;
}

/* Classe utilitaire lecteur d'ecran (pattern WAI standard) */
.sr-only {
  /* Chrome reprend text-transform dans le nom accessible calcule : sans ce
     reset, « (obligatoire) » place dans un label en capitales ressort en
     « (OBLIGATOIRE) » et peut etre epele lettre a lettre. */
  text-transform: none;
  letter-spacing: normal;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════ */
.wrap {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

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

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.rule-soft {
  background: var(--rule-soft);
}

/* Eyebrow & section-tag styles */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tag::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--rule);
}
.tag.nobar::before {
  display: none;
}
.tag .num {
  font-weight: 700;
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--rule-dim);
  transition: background 0.3s;
}
.nav-inner {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.025em;
  color: var(--text);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
}
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Une regle CSS l'emporte toujours sur un attribut de presentation : le
   fill="#137C5B" ecrit dans chaque SVG inline reste donc en repli si la
   feuille ne charge pas, sans avoir a le retirer du balisage. */
.brand-mark svg rect {
  fill: var(--brand-mark);
}
.brand em {
  font-style: normal;
  color: var(--primary);
}
.brand small {
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--rule-soft);
  text-transform: uppercase;
  font-weight: 500;
}

.nav-links {
  display: flex;
  gap: 28px;
  justify-self: center;
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s;
}
.nav-links a:hover {
  color: var(--text);
}

.nav-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition:
    background 0.15s,
    color 0.15s;
}
.theme-btn:hover {
  color: var(--primary);
  background: var(--primary-tint);
}
.theme-btn i {
  width: 15px;
  height: 15px;
}
.theme-btn .sun {
  display: none;
}
[data-theme="dark"] .theme-btn .sun {
  display: block;
}
[data-theme="dark"] .theme-btn .moon {
  display: none;
}

.mobile-btn {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--ff-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--r-sm);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    transform 0.15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn i {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.btn-ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-ink:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-ink {
  background: var(--emerald);
  color: #0b1a14;
  border-color: var(--emerald);
}
[data-theme="dark"] .btn-ink:hover {
  background: var(--emerald-dim);
  border-color: var(--emerald-dim);
}

.btn-line {
  background: transparent;
  color: var(--text);
  border-color: var(--rule);
}
.btn-line:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
[data-theme="dark"] .btn-line:hover {
  color: var(--text-paper);
  background: var(--text);
  border-color: var(--text);
}

.btn-bare {
  background: transparent;
  color: var(--text-muted);
  padding: 10px 8px;
}
.btn-bare:hover {
  color: var(--text);
}

.btn-emerald {
  background: var(--emerald);
  color: #0b1a14;
  border-color: var(--emerald);
}
.btn-emerald:hover {
  background: var(--emerald-dim);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 14px 22px;
  font-size: 0.95rem;
}

/* Arrow animated inside buttons */
.btn .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.btn:hover .arrow {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════
   HERO · Monumental typography
   ═══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: 88px 0 0;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  padding-bottom: 80px;
}

.hero-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-dim);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-meta .left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 18%, transparent);
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 18%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--emerald) 4%, transparent);
  }
}

.hero-title-wrap {
  grid-column: 1 / 10;
  /* Size container : permet de dimensionner le titre en cqi,
     c.-a-d. par rapport a la piste de grille reelle (plafonnee a
     ~1027px par --col-max) et non au viewport : un clamp() en vw
     continue de grossir alors que la colonne est figee, ce qui
     cassait la ligne la plus longue au-dela de ~1250px. */
  container-type: inline-size;
}

.hero-title {
  font-family: var(--ff-display);
  font-weight: 800;
  /* Fallback vw pour navigateurs sans container queries : la piste vaut
     ~71 % du viewport, d'ou 7vw pour rester sous la meme limite. */
  font-size: clamp(2.4rem, 7vw, 6rem);
  /* 9.9cqi : la ligne la plus longue ("Pour votre business.") fait 20
     caracteres et occupe 89 a 90 % de la piste de 320 a 1440px, mesure au
     navigateur. Calibrage derive du precedent (9cqi pour 22 caracteres) :
     9 x 22 / 20. Recalibrer si le libelle du H1 change.
     Borne basse a 1.6rem : a 320px de viewport la piste tombe a 280px. */
  font-size: clamp(1.6rem, 9.9cqi, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--text);
  margin: 0;
}

.hero-title .l {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: lift 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero-title .l:nth-child(1) {
  animation-delay: 80ms;
}
.hero-title .l:nth-child(2) {
  animation-delay: 180ms;
}
.hero-title .l:nth-child(3) {
  animation-delay: 280ms;
}

/* Le point de Plus Jakarta en graisse 800 a une chasse large : apres le
   letter-spacing negatif du titre, il reste un blanc net avant lui, tres
   visible a ce corps. Retrait optique, sans toucher au texte. */
.hero-title .p {
  margin-left: -0.07em;
}

/* Sous-titre descriptif, dans le <h1> pour que le signal SEO porte toujours
   sur "empreinte ecologique / Systeme d'Information" alors que l'accroche
   occupe les deux premieres lignes. Taille en cqi comme le titre, pour que
   le rapport d'echelle entre les deux reste constant a toutes les largeurs. */
.hero-title .sub {
  /* Police de corps : a cette taille, l'interlettrage negatif et la graisse
     800 du titre d'affichage tassent le texte et le rendent illisible. */
  font-family: var(--ff-body);
  /* 2.6cqi tient les 53 caracteres sur une seule ligne des 1027px de piste
     (~707px). En dessous, le repli sur deux lignes est equilibre par
     text-wrap: balance plutot que coupe au hasard. */
  font-size: clamp(1rem, 2.6cqi, 1.9rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--text-muted);
  /* 1.4em, mesure depuis le sous-titre : le soulignement emeraude de la
     ligne 2 descend sous la ligne de base et mangeait l'ecart precedent. */
  margin-top: 1.4em;
  text-wrap: balance;
}
@keyframes lift {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title em {
  font-style: italic;
  color: var(--primary);
  font-weight: 800;
  position: relative;
  display: inline-block;
}
.hero-title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.12em;
  height: 0.18em;
  background: var(--emerald);
  opacity: 0.28;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  animation: stretch 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 700ms forwards;
}
@keyframes stretch {
  to {
    transform: scaleX(1);
  }
}

.hero-side {
  grid-column: 10 / -1;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 20px;
  border-left: 1px solid var(--rule-dim);
}
.hero-lede {
  font-family: var(--ff-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.hero-lede strong {
  color: var(--text);
  font-weight: 600;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: start;
}
.hero-actions .btn {
  width: 100%;
  justify-content: space-between;
}

/* ── Trust row ── */
.hero-trust {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: 40px;
  margin-top: 56px;
  border-top: 1px solid var(--rule-dim);
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 20px 0 0;
  border-right: 1px solid var(--rule-dim);
}
.trust-item:last-child {
  border-right: 0;
  padding-right: 0;
}
.trust-item .k {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.trust-item .v {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.trust-item .m {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════
   HERO VIEWPORT · fenêtre du dashboard en full-bleed
   ═══════════════════════════════════════════════════════ */
.viewport-wrap {
  padding: 0 var(--gutter) 120px;
  max-width: var(--col-max);
  margin: 0 auto;
  position: relative;
}

.viewport {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--chalk);
  overflow: hidden;
  box-shadow:
    0 24px 60px -20px rgba(11, 26, 20, 0.25),
    0 8px 20px -8px rgba(11, 26, 20, 0.1);
  transform-origin: top center;
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  animation: vp-enter 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 500ms forwards;
}
@keyframes vp-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Capture produit (vue Exploration) affichée dans la fenêtre */
.vp-shot {
  display: block;
  width: 100%;
  height: auto;
  border-top: 1px solid var(--rule);
}
.viewport-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 0;
  max-width: 720px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}
.viewport-cap i,
.viewport-cap svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--primary);
}
.viewport-cap strong {
  color: var(--text);
  font-weight: 600;
}
[data-theme="dark"] .viewport {
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.6),
    0 8px 20px -8px rgba(0, 0, 0, 0.4);
}

.vp-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--rule-dim);
}
.vp-chrome .dots {
  display: inline-flex;
  gap: 6px;
}
.vp-chrome .dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--rule-soft);
}
.vp-chrome .url {
  justify-self: center;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--chalk);
  padding: 4px 14px;
  border-radius: 50px;
  border: 1px solid var(--rule-dim);
  /* min() plutot que min-width fixe : a 320 px de viewport, 280 px depassaient
     du conteneur, qui clippait le bloc (WCAG 1.4.10). */
  min-width: min(280px, 100%);
  text-align: center;
}
.vp-chrome .kbd {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  color: var(--text-soft);
}

.vp-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 420px;
}

.vp-sidebar {
  background: var(--surface-invert-bg);
  color: var(--surface-invert-fg);
  padding: 18px 0;
  font-family: var(--ff-body);
}
.vp-sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--surface-invert-overlay-hi);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--surface-invert-fg);
  letter-spacing: -0.02em;
}
.vp-sb-logo span {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  background: var(--emerald);
  color: #0b1a14;
  border-radius: var(--r-sm);
  font-size: 0.76rem;
}
.vp-sb-logo em {
  font-style: normal;
  color: var(--emerald);
}
.vp-sb-ctx {
  margin: 0 10px 10px;
  padding: 4px 10px;
  background: var(--surface-invert-overlay);
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  color: var(--surface-invert-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--r-sm);
}
.vp-sb-nav {
  list-style: none;
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vp-sb-nav li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--surface-invert-fg-muted);
  font-size: 0.78rem;
  font-weight: 500;
}
.vp-sb-nav li i {
  width: 14px;
  height: 14px;
  color: inherit;
}
.vp-sb-nav li .c {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  color: var(--surface-invert-fg-soft);
}
.vp-sb-nav li.active {
  background: #1b4332;
  color: var(--emerald);
  border-left: 2px solid var(--emerald);
  padding-left: 8px;
}

.vp-main {
  padding: 22px 26px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text);
}
[data-theme="dark"] .vp-main {
  background: var(--chalk);
}

.vp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.vp-breadcrumb .sep {
  color: var(--rule-soft);
}
.vp-breadcrumb .current {
  color: var(--text);
  font-weight: 600;
}

.vp-topline {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.vp-title-block h3 {
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.vp-title-block .sub {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.vp-tag-good {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: color-mix(in srgb, var(--score-5) 15%, transparent);
  color: var(--score-5);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 50px;
}
.vp-tag-good i {
  width: 11px;
  height: 11px;
}

.vp-grid {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 14px;
}

.vp-gauge-card {
  background: var(--chalk);
  border: 1px solid var(--rule-dim);
  border-radius: var(--r);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .vp-gauge-card {
  background: var(--paper-alt);
}

.vp-gauge {
  width: 124px;
  height: 124px;
  position: relative;
}
.vp-gauge svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.vp-gauge .bg {
  fill: none;
  stroke: var(--rule-soft);
  stroke-width: 8;
}
.vp-gauge .arc {
  fill: none;
  stroke: var(--score-4);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 314;
  stroke-dashoffset: 63;
  animation: arc-draw 1.8s cubic-bezier(0.3, 0.7, 0.2, 1) 1s backwards;
}
@keyframes arc-draw {
  from {
    stroke-dashoffset: 314;
  }
}
.vp-gauge .c {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vp-gauge .c b {
  font-family: var(--ff-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--score-4);
  letter-spacing: -0.04em;
  line-height: 1;
}
.vp-gauge .c small {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.vp-gauge-card .label {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vp-gauge-card .delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--score-5) 15%, transparent);
  color: var(--score-5);
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 50px;
}

.vp-envs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.vp-env {
  background: var(--chalk);
  border: 1px solid var(--rule-dim);
  border-radius: var(--r);
  padding: 10px 12px;
  position: relative;
  border-left-width: 3px;
  border-left-style: solid;
}
[data-theme="dark"] .vp-env {
  background: var(--paper-alt);
}

.vp-env[data-k="tpe"] {
  border-left-color: var(--c-tpe);
}
.vp-env[data-k="gwp"] {
  border-left-color: var(--c-gwp);
}
.vp-env[data-k="adpe"] {
  border-left-color: var(--c-adpe);
}
.vp-env[data-k="adpf"] {
  border-left-color: var(--c-adpf);
}
.vp-env[data-k="wu"] {
  border-left-color: var(--c-wu);
}
.vp-env[data-k="weee"] {
  border-left-color: var(--c-weee);
}

.vp-env .k {
  font-family: var(--ff-display);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.vp-env .k::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
}
.vp-env[data-k="tpe"] .k::before {
  background: var(--c-tpe);
}
.vp-env[data-k="gwp"] .k::before {
  background: var(--c-gwp);
}
.vp-env[data-k="adpe"] .k::before {
  background: var(--c-adpe);
}
.vp-env[data-k="adpf"] .k::before {
  background: var(--c-adpf);
}
.vp-env[data-k="wu"] .k::before {
  background: var(--c-wu);
}
.vp-env[data-k="weee"] .k::before {
  background: var(--c-weee);
}
.vp-env .v {
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.vp-env .d {
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  color: var(--score-5);
  margin-top: 1px;
}
.vp-env .d.up {
  color: var(--danger);
}

/* ═══════════════════════════════════════════════════════
   MARQUEE INDICATORS · ticker horizontal
   ═══════════════════════════════════════════════════════ */
.marquee {
  padding: 20px 0;
  border-top: 1px solid var(--surface-invert-bg);
  border-bottom: 1px solid var(--surface-invert-bg);
  background: var(--surface-invert-bg);
  color: var(--surface-invert-fg);
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  gap: 48px;
  align-items: center;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee:hover .marquee-track,
.marquee-track.paused {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee-pause {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-invert-overlay);
  color: var(--surface-invert-fg);
  border: 1px solid var(--surface-invert-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.marquee-pause:hover {
  background: var(--surface-invert-overlay-hi);
  border-color: var(--surface-invert-fg-muted);
}
.marquee-pause i {
  width: 14px;
  height: 14px;
}

/* La seconde passe du bandeau est un duplicata visuel porte par un conteneur
   aria-hidden : display:contents le rend transparent a la mise en page. */
.marquee-pass {
  display: contents;
}
.marquee-item {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 0.88rem;
  color: var(--surface-invert-fg);
  white-space: nowrap;
}
.marquee-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  align-self: center;
}
.marquee-item .code {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 0.96rem;
  letter-spacing: -0.01em;
  color: var(--surface-invert-fg);
}
.marquee-item .val {
  color: var(--surface-invert-fg-soft);
  font-variant-numeric: tabular-nums;
}
.marquee-item .delta {
  color: var(--emerald);
  font-weight: 700;
}
.marquee-item .delta.up {
  color: #fca5a5;
}
.marquee-item .sep {
  color: var(--surface-invert-border);
  font-size: 1.1rem;
  align-self: center;
}

/* ═══════════════════════════════════════════════════════
   LEDGER · chiffres monumentaux
   ═══════════════════════════════════════════════════════ */
.ledger {
  padding: 120px 0;
  background: var(--paper-alt);
}

.ledger-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: baseline;
  margin-bottom: 48px;
}
.ledger-head .tag {
  grid-column: 1 / 4;
}
.ledger-head h2 {
  grid-column: 4 / 13;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 900px;
}
.ledger-head h2 em {
  font-style: italic;
  color: var(--primary);
}

.ledger-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ledger-item {
  padding: 36px 28px 32px 0;
  border-right: 1px solid var(--rule-dim);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.ledger-item:last-child {
  border-right: 0;
}
.ledger-item .no {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ledger-big {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.ledger-big .unit {
  font-size: 0.4em;
  color: var(--text-muted);
  font-weight: 700;
  margin-left: 4px;
}
.ledger-item .caption {
  font-family: var(--ff-body);
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.45;
  max-width: 240px;
}
.ledger-item .note {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════
   PERSONAS · empilés éditorial
   ═══════════════════════════════════════════════════════ */
.personas {
  padding: 140px 0 120px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-dim);
}

.personas-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 72px;
}
.personas-head .tag {
  grid-column: 1 / 4;
}
.personas-head h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 14px;
}
.personas-head h2 em {
  font-style: italic;
  color: var(--primary);
}
.personas-head .intro {
  grid-column: 9 / -1;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 28px;
  border-left: 1px solid var(--rule-dim);
}

.persona {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  position: relative;
  transition: background 0.2s ease;
}
.persona:last-of-type {
  border-bottom: 1px solid var(--rule);
}
.persona:hover {
  background: var(--paper-alt);
}

.persona-no {
  font-family: var(--ff-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.persona-body {
  display: grid;
  grid-template-columns: 2.5fr 2fr;
  gap: 48px;
  align-items: start;
}

.persona-main h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.persona-main h3 em {
  font-style: italic;
  color: var(--primary);
}

.persona-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.persona-role::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--primary);
}

.persona-quote {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.6;
  max-width: 540px;
}
.persona-quote::before {
  content: "« ";
  color: var(--primary);
  font-weight: 700;
}
.persona-quote::after {
  content: " »";
  color: var(--primary);
  font-weight: 700;
}

.persona-levers {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}
.persona-levers .lh {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.persona-levers ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.persona-levers li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}
.persona-levers li i {
  width: 14px;
  height: 14px;
  color: var(--primary);
  margin-top: 4px;
}
.persona-levers li strong {
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   METHOD · 4 piliers asymétriques
   ═══════════════════════════════════════════════════════ */
.method {
  padding: 140px 0 120px;
  background: var(--surface-invert-bg);
  color: var(--surface-invert-fg);
  position: relative;
}
.method-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 72px;
}
.method-head .tag {
  grid-column: 1 / 4;
  color: var(--surface-invert-fg-soft);
}
.method-head .tag::before {
  background: var(--surface-invert-fg-soft);
}
.method-head .tag .num {
  color: var(--emerald);
}

.method-head h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--surface-invert-fg);
}
.method-head h2 em {
  font-style: italic;
  color: var(--emerald);
}
.method-head .intro {
  grid-column: 9 / -1;
  color: var(--surface-invert-fg-muted);
  font-size: 1rem;
  line-height: 1.6;
  padding-left: 28px;
  border-left: 1px solid var(--surface-invert-border);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.pillar {
  background: var(--surface-invert-overlay);
  border: 1px solid var(--surface-invert-border-soft);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.pillar:hover {
  background: var(--surface-invert-overlay-hi);
  border-color: rgba(52, 211, 153, 0.3);
}
/* Trois colonnes egales en premiere rangee : les quatre piliers portent
   desormais des volumes de texte comparables, l'ancienne repartition
   5/4/3 etranglait le pilier 03, le plus dense. */
.pillar-01 {
  grid-column: 1 / 5;
  min-height: 340px;
}
.pillar-02 {
  grid-column: 5 / 9;
}
.pillar-03 {
  grid-column: 9 / -1;
}
.pillar-04 {
  grid-column: 5 / -1;
}

.pillar-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.pillar .no {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--emerald);
  letter-spacing: 0.1em;
  font-weight: 600;
}
.pillar .glyph {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-invert-border);
  color: var(--emerald);
  border-radius: var(--r-sm);
}
.pillar .glyph i {
  width: 18px;
  height: 18px;
}

.pillar h3 {
  font-size: 2rem;
  color: var(--surface-invert-fg);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 800;
}

.pillar p {
  font-size: 0.92rem;
  color: var(--surface-invert-fg-muted);
  line-height: 1.55;
  max-width: 360px;
}
/* Le pilier 04 occupe toute la seconde rangee : 360px y laissaient
   une colonne de vide a droite du paragraphe. */
.pillar-04 p {
  max-width: 520px;
}

.pillar ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--surface-invert-border);
}
.pillar li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--surface-invert-fg-muted);
  line-height: 1.45;
}
.pillar li i {
  width: 12px;
  height: 12px;
  color: var(--emerald);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════
   INDICATORS ADEME · grille technique
   ═══════════════════════════════════════════════════════ */
.indicators {
  padding: 140px 0 120px;
  background: var(--paper);
}

.indicators-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 56px;
}
.indicators-head .tag {
  grid-column: 1 / 4;
}
.indicators-head h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.indicators-head h2 em {
  font-style: italic;
  color: var(--primary);
}
.indicators-head .intro {
  grid-column: 9 / -1;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 28px;
  border-left: 1px solid var(--rule-dim);
}

.indic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.indic {
  padding: 32px 28px;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  transition: background 0.2s;
}
.indic:hover {
  background: var(--chalk);
}

.indic-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.indic-code {
  font-family: var(--ff-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--text);
  position: relative;
  padding-left: 18px;
}
.indic-code::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.indic[data-k="tpe"] .indic-code::before {
  background: var(--c-tpe);
}
.indic[data-k="gwp"] .indic-code::before {
  background: var(--c-gwp);
}
.indic[data-k="adpe"] .indic-code::before {
  background: var(--c-adpe);
}
.indic[data-k="adpf"] .indic-code::before {
  background: var(--c-adpf);
}
.indic[data-k="wu"] .indic-code::before {
  background: var(--c-wu);
}
.indic[data-k="weee"] .indic-code::before {
  background: var(--c-weee);
}

.indic-unit {
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  padding: 3px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
}
.indic h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--text);
}
.indic p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}
.indic-split {
  padding-top: 14px;
  border-top: 1px dashed var(--rule-soft);
}
.indic-bar {
  display: flex;
  height: 4px;
  background: var(--rule-soft);
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 6px;
}
.indic-bar .fab {
  background: var(--c-fab);
}
.indic-bar .use {
  background: var(--c-use);
}
.indic-splitlabels {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Score ladder 1→5 */
.score-ladder {
  margin-top: 36px;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}
.score-ladder .lbl {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.score-ladder-bar {
  display: flex;
  gap: 2px;
  height: 32px;
}
.score-ladder-bar .seg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.8rem;
}
.score-ladder-bar .s1 {
  background: var(--score-1);
  color: #fff;
}
.score-ladder-bar .s2 {
  background: var(--score-2);
  color: #0b1a14;
}
.score-ladder-bar .s3 {
  background: var(--score-3);
  color: #0b1a14;
}
.score-ladder-bar .s4 {
  background: var(--score-4);
  color: #0b1a14;
}
.score-ladder-bar .s5 {
  background: var(--score-5);
  color: #fff;
}
/* En dark mode les scores sont re-tunes en teintes claires (WCAG 1.4.11)
   donc texte sombre sur toutes les segments pour garder >= 4.5:1 */
[data-theme="dark"] .score-ladder-bar .s1,
[data-theme="dark"] .score-ladder-bar .s5 {
  color: #0b1a14;
}

.score-ladder-labels {
  display: flex;
  gap: 2px;
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  color: var(--text-muted);
  margin-top: 6px;
}
.score-ladder-labels span {
  flex: 1;
  text-align: center;
}

.score-side {
  max-width: 260px;
  text-align: right;
}
.score-side .k {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.score-side p {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.45;
}
/* Jauge compacte du GreenIT Score, integree dans la score-side */
.score-side .gauge-xl {
  width: 128px;
  height: 128px;
  margin: 6px 0 10px auto;
}
.score-side .gauge-xl .c b {
  font-size: 2.1rem;
}
.score-side .gauge-xl .c small {
  font-size: 0.6rem;
}
/* Note "qualite des donnees" : cross-sell dans la tarification */
.data-quality-note {
  margin-top: 28px;
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}
.data-quality-note i {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════
   PRODUCT TOUR · module composite
   ═══════════════════════════════════════════════════════ */
.tour {
  padding: 140px 0 120px;
  background: var(--paper-alt);
  border-top: 1px solid var(--rule-dim);
  border-bottom: 1px solid var(--rule-dim);
}
[data-theme="dark"] .tour {
  background: var(--paper-alt);
}

.tour-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 56px;
}
.tour-head .tag {
  grid-column: 1 / 4;
}
.tour-head h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.tour-head h2 em {
  font-style: italic;
  color: var(--primary);
}
.tour-head .intro {
  grid-column: 9 / -1;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 28px;
  border-left: 1px solid var(--rule-dim);
}

.tour-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 16px;
}

.tour-block {
  background: var(--chalk);
  border: 1px solid var(--rule-dim);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
[data-theme="dark"] .tour-block {
  background: var(--chalk);
}

.tour-label {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--primary);
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
}
.tour-block h3 {
  font-family: var(--ff-display);
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.tour-block p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Layout mosaic */
.t-chart {
  grid-column: 1 / 9;
  grid-row: 1;
}
.t-gauge {
  grid-column: 9 / -1;
  grid-row: 1 / 3;
}
.t-tree {
  grid-column: 1 / 5;
  grid-row: 2;
}
.t-ci {
  grid-column: 5 / 9;
  grid-row: 2;
}

/* Chart multi-line */
.chart-card svg {
  width: 100%;
  height: 220px;
}
.chart-card polyline {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-grid line {
  stroke: var(--rule-soft);
  stroke-width: 1;
  stroke-dasharray: 2, 4;
}
.chart-proj-rect {
  fill: var(--rule-dim);
}
.chart-proj-label {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  fill: var(--text-muted);
  letter-spacing: 0.15em;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chart-legend .dt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* Gauge card (product tour) */
.gauge-card {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.gauge-xl {
  width: 180px;
  height: 180px;
  position: relative;
  margin: 12px auto 0;
}
.gauge-xl svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.gauge-xl .bg {
  fill: none;
  stroke: var(--rule-soft);
  stroke-width: 10;
}
.gauge-xl .arc {
  fill: none;
  stroke: var(--score-4);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 471;
  stroke-dashoffset: 94;
}
.gauge-xl .c {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gauge-xl .c b {
  font-family: var(--ff-display);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--score-4);
  letter-spacing: -0.05em;
  line-height: 1;
}
.gauge-xl .c small {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.gauge-card .foot {
  padding-top: 18px;
  border-top: 1px solid var(--rule-dim);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
.gauge-card .foot div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.gauge-card .foot .k {
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gauge-card .foot .v {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Tree */
.tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  font-size: 0.84rem;
}
.tree-row {
  display: grid;
  grid-template-columns: 14px 16px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border-radius: var(--r-sm);
}
.tree-row:hover {
  background: var(--paper-alt);
}
.tree-row.selected {
  background: var(--primary-tint);
  border-left: 2px solid var(--primary);
  padding-left: 6px;
}
.tree-row .chev {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}
.tree-row.expanded .chev {
  transform: rotate(90deg);
}
.tree-row i.type {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}
.tree-row .label {
  font-weight: 500;
  color: var(--text);
}
.tree-row .count {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.tree-row .sc {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* Encre sombre et non blanc : les couleurs --score-* sont claires, et
     elles le sont encore plus en thème sombre. Blanc sur --score-4 donnait
     3,09:1 en clair et 1,51:1 en sombre. Ici : 9,3 a 11,9:1. */
  color: var(--surface-invert-bg);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tree-row[data-s="5"] .sc {
  background: var(--score-5);
  /* Seul score assez fonce en thème clair pour reclamer une encre blanche
     (5,48:1) : l'encre sombre n'y donnerait que 3,27:1. En thème sombre il
     s'eclaircit comme les autres et repasse sur l'encre par defaut. */
  color: #fff;
}
[data-theme="dark"] .tree-row[data-s="5"] .sc {
  color: var(--surface-invert-bg);
}
.tree-row[data-s="4"] .sc {
  background: var(--score-4);
}
.tree-row[data-s="3"] .sc {
  background: var(--score-3);
}
.tree-lvl-2 {
  padding-left: 22px;
}
.tree-lvl-3 {
  padding-left: 40px;
}

/* CI icons */
/* 4 colonnes x 2 rangees sur tout le desktop : 8 tuiles empilees par 2
   rallongent beaucoup trop le bloc.
   Le seuil est sur le VIEWPORT et non sur le conteneur, bien que ce soit
   la largeur du bloc qui compte ici : la largeur du bloc tour ne permet
   pas de trancher, elle vaut 291px aussi bien a 1101px de viewport (tour
   en 3 colonnes, cas desktop) qu'a 375px (mobile). Une container query
   traiterait donc les deux de la meme facon. */
.ci-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 6px;
}
@media (max-width: 640px) {
  .ci-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ci-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--rule-dim);
}
.ci-box {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
}
.ci-box i {
  width: 18px;
  height: 18px;
}
/* Correction optique. A boite egale, les glyphes lucide n'occupent pas la
   meme part de leur viewBox : les silhouettes etroites (pc-case et
   smartphone, 14x20) ou plates (laptop, 19x15) tiennent dans 49 %, quand
   monitor (20x18) monte a 63 % et server, layers, router et printer
   (20x20) a 69 %. Sans correction ce second groupe parait d'un cran plus
   gros. On ramene les huit a la meme moyenne geometrique d'encre, ~16.8
   sur 24, en ne touchant qu'a l'echelle : le centrage reste intact. */
.ci-box .lucide-monitor {
  transform: scale(0.89);
}
.ci-box .lucide-layers,
.ci-box .lucide-server,
.ci-box .lucide-router,
.ci-box .lucide-printer {
  transform: scale(0.84);
}
.ci-box[data-t="desktop"] {
  background: #dbeafe;
  color: #2563eb;
}
.ci-box[data-t="laptop"] {
  background: #e0e7ff;
  color: #4f46e5;
}
.ci-box[data-t="mobile"] {
  background: #fce7f3;
  color: #db2777;
}
.ci-box[data-t="server"] {
  background: #fee2e2;
  color: #dc2626;
}
.ci-box[data-t="printer"] {
  background: #fef3c7;
  color: #d97706;
}
.ci-box[data-t="network"] {
  background: #ccfbf1;
  color: #0d9488;
}
/* Serveur virtuel et ecran manquaient au §05·D, qui n'affichait que six
   types sous un titre en annoncant huit. Meme construction que les six
   autres : teinte 100 en fond, teinte 600 pour l'icone. */
.ci-box[data-t="virtual"] {
  background: #ede9fe;
  color: #7c3aed;
}
.ci-box[data-t="screen"] {
  background: #e0f2fe;
  color: #0284c7;
}

.ci-item .lbl {
  font-family: var(--ff-display);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text);
  /* Deux lignes reservees : en 4 colonnes la tuile descend a 83px de
     large (viewport 1307), ou "Serv. virtuel" passe sur deux lignes alors
     que les sept autres libelles tiennent sur une. Sans cette reserve la
     rangee du dessous devient plus haute et les compteurs ne s'alignent
     plus d'une tuile a l'autre. */
  line-height: 1.25;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  text-align: center;
}
.ci-item .n {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════
   COMPARISON · tableau minimaliste
   ═══════════════════════════════════════════════════════ */
.compare {
  padding: 140px 0 120px;
}
.compare-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 56px;
}
.compare-head .tag {
  grid-column: 1 / 4;
}
.compare-head h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.compare-head h2 em {
  font-style: italic;
  color: var(--primary);
}
.compare-head .intro {
  grid-column: 9 / -1;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 28px;
  border-left: 1px solid var(--rule-dim);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  table-layout: fixed;
}
/* Largeurs fixes par colgroup : 28% critere + 3 x 24% solutions.
   Garantit l'alignement des icones et valeurs dans chaque colonne
   independamment du contenu. */
.compare-table .col-crit {
  width: 28%;
}
.compare-table .col-sol {
  width: 24%;
}
.compare-table thead th {
  padding: 20px 14px;
  text-align: center;
  vertical-align: bottom;
  font-family: var(--ff-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.compare-table thead th:first-child {
  text-align: left;
  padding-left: 0;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.compare-table thead th small {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 4px;
}
.compare-table thead th.us {
  color: var(--primary);
}
.compare-table thead th.us::after {
  content: "★" / "";
  position: absolute;
  top: 8px;
  right: 14px;
  color: var(--amber);
  font-size: 0.8rem;
}

.compare-table tbody td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--rule-dim);
  font-size: 0.88rem;
  text-align: center;
  vertical-align: middle;
  color: var(--text-muted);
  font-family: var(--ff-mono);
  overflow-wrap: anywhere;
}
/* RGAA 11.10 : le caractere obligatoire doit etre visible, pas seulement
   porte par l'attribut required. L'asterisque est masque aux lecteurs
   d'ecran, qui recoivent « (obligatoire) » en toutes lettres a la place. */
/* WCAG 3.3.2 : une consigne de saisie doit rester lisible pendant la saisie.
   Dans un placeholder, elle disparait a la premiere frappe. */
.field-hint {
  margin-bottom: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.form-required-note {
  margin-bottom: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.cta-form .form-required-note {
  color: var(--surface-invert-fg-muted);
}
.field label span[aria-hidden],
.check span[aria-hidden] {
  color: var(--err-fg);
  font-weight: 700;
}
.cta-form .field label span[aria-hidden],
.cta-form .check span span[aria-hidden] {
  color: var(--emerald);
}

/* Nom de l'offre porte par le DOM et non par un ::before : en mobile, la
   linearisation du tableau supprime le thead, et l'information disparaissait
   avec les styles (RGAA 10.3). En desktop le thead suffit, on masque. */
.offer-tag {
  display: none;
}

.compare-table tbody th[scope="row"] {
  text-align: left;
  padding-left: 0;
  color: var(--text);
  font-weight: 500;
  font-family: var(--ff-body);
}
.compare-table tbody td.us {
  color: var(--text);
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}
.compare-table td i,
.compare-table td svg {
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
}

/* ─ Bloc compare alternatif pour mobile ─ cache par defaut ─ */
.compare-mobile {
  display: none;
}

.compare-summary {
  padding: 24px;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin-bottom: 20px;
}
.compare-summary .cs-eyebrow {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.cs-scores {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-score {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  gap: 14px;
  align-items: center;
}
.cs-score .cs-name {
  font-family: var(--ff-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.cs-score .cs-bar {
  display: block;
  height: 6px;
  background: var(--rule-soft);
  border-radius: 50px;
  overflow: hidden;
}
.cs-score .cs-bar > span {
  display: block;
  height: 100%;
  background: var(--text-muted);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cs-score.us .cs-bar > span {
  background: var(--primary);
}
.cs-score .cs-value {
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cs-score.us .cs-value {
  color: var(--primary);
}

/* Accordions par critere (natif <details>/<summary>) */
.compare-item {
  border-bottom: 1px solid var(--rule-dim);
}
.compare-item:first-of-type {
  border-top: 1px solid var(--rule);
}
.compare-item:last-of-type {
  border-bottom: 1px solid var(--rule);
}
.compare-item > summary {
  list-style: none;
  padding: 18px 0;
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}
.compare-item > summary::-webkit-details-marker {
  display: none;
}
.compare-item > summary::after {
  content: "+" / "";
  font-family: var(--ff-mono);
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.compare-item[open] > summary::after {
  content: "−" / "";
  color: var(--primary);
}
.compare-versus {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 18px;
}
.compare-versus .vs {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--paper);
}
.compare-versus .vs-label {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.compare-versus .vs-value {
  font-family: var(--ff-body);
  font-size: 0.9rem;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.compare-versus .vs-value i {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.compare-versus .vs-value.no i {
  color: var(--text-muted);
}
.compare-versus .vs-value.mid i {
  color: var(--amber);
}
.compare-versus .vs-value.ok i {
  color: var(--primary);
}
.compare-versus .vs.us {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.compare-versus .vs.us .vs-value {
  font-weight: 700;
  color: var(--text);
}
.compare-table .ok i {
  width: 16px;
  height: 16px;
  color: var(--primary);
}
.compare-table .no i {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}
.compare-table .mid i {
  width: 14px;
  height: 14px;
  color: var(--amber);
}

/* ═══════════════════════════════════════════════════════
   COMPLIANCE STRIP
   ═══════════════════════════════════════════════════════ */
.compliance {
  padding: 80px 0;
  background: var(--surface-invert-bg);
  color: var(--surface-invert-fg);
}
.compliance-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  align-items: center;
}
.compliance-lede {
  grid-column: 1 / 4;
}
.compliance-lede .tag {
  color: var(--surface-invert-fg-soft);
}
.compliance-lede .tag::before {
  background: var(--surface-invert-fg-soft);
}
/* --primary ne tient pas sur le fond inverse (3,34:1) : --emerald y est a 9,32:1. */
.compliance-lede .tag .num {
  color: var(--emerald);
}
.compliance-lede h3 {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  color: var(--surface-invert-fg);
  margin-top: 10px;
  line-height: 1.1;
}

.compliance-badges {
  grid-column: 4 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--surface-invert-border);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  color: var(--surface-invert-fg-muted);
  transition:
    border-color 0.2s,
    color 0.2s;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.cb i {
  width: 13px;
  height: 13px;
  color: var(--emerald);
}
.cb:hover {
  border-color: var(--emerald);
  color: var(--surface-invert-fg);
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS · un à la fois, typographie géante
   ═══════════════════════════════════════════════════════ */
.testimonials {
  padding: 140px 0 120px;
}
.testimonials-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 72px;
}
.testimonials-head .tag {
  grid-column: 1 / 4;
}
.testimonials-head h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.testimonials-head h2 em {
  font-style: italic;
  color: var(--primary);
}
.testimonials-head .intro {
  grid-column: 9 / -1;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 28px;
  border-left: 1px solid var(--rule-dim);
}

.test-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.test {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px solid var(--rule-dim);
  align-items: start;
}
.test:last-child {
  border-bottom: 1px solid var(--rule);
}

.test-no {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  padding-top: 14px;
}

.test-body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 780px;
}
.test-quote {
  font-family: var(--ff-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
.test-quote::before {
  content: "« ";
  color: var(--primary);
}
.test-quote::after {
  content: " »";
  color: var(--primary);
}

.test-author {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  align-items: center;
}
.test-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--emerald));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
[data-theme="dark"] .test-avatar {
  color: #0b1a14;
}
.test-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: -0.015em;
}
.test-role {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.test-meta {
  text-align: right;
  padding-top: 14px;
}
.test-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--primary-tint);
  color: var(--primary);
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  font-weight: 600;
  border-radius: 50px;
  letter-spacing: 0.04em;
}
.test-badge i {
  width: 11px;
  height: 11px;
}
.test-meta .sector {
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   TEAM · éditorial rangée
   ═══════════════════════════════════════════════════════ */
.team {
  padding: 140px 0 120px;
  background: var(--paper-alt);
}
.team-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 72px;
}
.team-head .tag {
  grid-column: 1 / 4;
}
.team-head h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.team-head h2 em {
  font-style: italic;
  color: var(--primary);
}
.team-head .intro {
  grid-column: 9 / -1;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 28px;
  border-left: 1px solid var(--rule-dim);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.founder {
  padding: 40px 28px 36px 0;
  border-right: 1px solid var(--rule-dim);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: background 0.2s;
}
.founder:last-child {
  border-right: 0;
  padding-right: 0;
}
.founder:hover {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.founder-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--emerald) 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}
[data-theme="dark"] .founder-avatar {
  color: #0b1a14;
}

.founder-name {
  font-family: var(--ff-display);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}
.founder-role {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.founder-bio {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}
.founder-socials {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-soft);
}
.founder-socials a {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid var(--rule-soft);
  transition: all 0.15s;
  border-radius: var(--r-sm);
}
.founder-socials a:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-tint);
}
.founder-socials i {
  width: 14px;
  height: 14px;
}

/* ═══════════════════════════════════════════════════════
   PRICING · minimal 3 colonnes
   ═══════════════════════════════════════════════════════ */
.pricing {
  padding: 140px 0 120px;
}
.pricing-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 72px;
}
.pricing-head .tag {
  grid-column: 1 / 4;
}
.pricing-head h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.pricing-head h2 em {
  font-style: italic;
  color: var(--primary);
}
.pricing-head .intro {
  grid-column: 9 / -1;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 28px;
  border-left: 1px solid var(--rule-dim);
}

/* ═══ Tarification · tableau des seules differences ═══
   Enterprise etant un surensemble de Business, un tableau exhaustif
   afficherait 14 lignes identiques pour 4 differenciantes. On ne liste
   donc que ce qui change, et le socle commun est enonce une fois en bas.
   Le tableau reprend le style du comparatif §09 (.compare-table). */
.t-diff thead th {
  padding-top: 34px;
}
/* l'etoile du §09 ferait doublon avec le badge */
.t-diff thead th.us::after {
  content: none;
}
.t-diff .th-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--emerald);
  color: var(--surface-invert-bg);
  font-family: var(--ff-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  white-space: nowrap;
}
.t-diff .cell-note {
  display: block;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 5px;
}
/* Lucide remplace le <i> par un <svg> : cibler l'un sans l'autre laisse
   l'icone heriter de la couleur de la cellule. La croix porte une
   information, elle doit rester lisible (WCAG 1.4.11, 3:1 minimum). */
.t-diff td.no i,
.t-diff td.no svg {
  color: var(--text-muted);
}
.t-diff td.ok i,
.t-diff td.ok svg {
  color: var(--primary);
}

.plans-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 26px;
}
.plans-cta-row .btn {
  justify-content: space-between;
}

.plans-common {
  margin-top: 34px;
  padding: 22px 26px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}
.plans-common h3 {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 14px;
}
.plans-common ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px 26px;
}
.plans-common li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 9px;
  align-items: start;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text);
}
.plans-common li i {
  width: 12px;
  height: 12px;
  color: var(--primary);
  margin-top: 4px;
}

.pricing-note {
  margin-top: 32px;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.pricing-note a {
  color: var(--primary);
  border-bottom: 1px solid var(--primary-tint);
}

/* ═══════════════════════════════════════════════════════
   FAQ · accordions, optimise SEO (FAQPage schema)
   ═══════════════════════════════════════════════════════ */
.faq {
  padding: 140px 0 120px;
  background: var(--paper-alt);
}
.faq-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;
  margin-bottom: 56px;
}
.faq-head .tag {
  grid-column: 1 / 4;
}
.faq-head h2 {
  grid-column: 1 / 9;
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
}
.faq-head h2 em {
  font-style: italic;
  color: var(--primary);
}
.faq-head .intro {
  grid-column: 9 / -1;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding-left: 28px;
  border-left: 1px solid var(--rule-dim);
}

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  max-width: 880px;
}
.faq-item {
  border-bottom: 1px solid var(--rule-dim);
}
.faq-item:last-of-type {
  border-bottom: 1px solid var(--rule);
}
.faq-item > summary {
  list-style: none;
  padding: 24px 0;
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  line-height: 1.3;
}
.faq-item > summary::-webkit-details-marker {
  display: none;
}
.faq-item > summary::after {
  content: "+" / "";
  font-family: var(--ff-mono);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1;
  flex-shrink: 0;
  transition:
    transform 0.2s,
    color 0.2s;
}
.faq-item[open] > summary {
  color: var(--primary);
}
.faq-item[open] > summary::after {
  content: "−" / "";
  color: var(--primary);
}
.faq-item > summary:hover {
  color: var(--primary);
}
.faq-answer {
  padding: 0 0 24px;
  max-width: 780px;
}
.faq-answer p {
  font-family: var(--ff-body);
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text);
}
.faq-answer p + p {
  margin-top: 10px;
}
.faq-answer a {
  color: var(--primary);
  border-bottom: 1px solid var(--primary-tint);
}
.faq-answer strong {
  font-weight: 600;
}
.faq-answer code {
  font-family: var(--ff-mono);
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--chalk);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════
   CTA FORM
   ═══════════════════════════════════════════════════════ */
.cta {
  background: var(--surface-invert-bg);
  color: var(--surface-invert-fg);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      700px 350px at 85% 15%,
      rgba(52, 211, 153, 0.15),
      transparent 60%
    ),
    radial-gradient(
      500px 280px at 10% 85%,
      rgba(180, 83, 9, 0.1),
      transparent 60%
    );
  pointer-events: none;
}
.cta > .wrap {
  position: relative;
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.cta-lede {
  padding-top: 8px;
}
.cta-lede .tag {
  color: var(--emerald);
}
.cta-lede .tag::before {
  background: var(--emerald);
}
.cta-lede h2 {
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--surface-invert-fg);
  margin: 20px 0 24px;
}
.cta-lede h2 em {
  font-style: italic;
  color: var(--emerald);
}
.cta-lede p {
  font-size: 1.05rem;
  color: var(--surface-invert-fg-muted);
  line-height: 1.6;
  margin-bottom: 32px;
}
.cta-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cta-bullets li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.94rem;
  color: var(--surface-invert-fg-muted);
  line-height: 1.5;
}
.cta-bullets li i {
  width: 16px;
  height: 16px;
  color: var(--emerald);
  margin-top: 3px;
}
.cta-bullets li strong {
  color: var(--surface-invert-fg);
  font-weight: 600;
}

/* Form */
.cta-form {
  background: var(--surface-invert-overlay);
  border: 1px solid var(--surface-invert-border-soft);
  padding: 32px;
  /* Le formulaire vit sur une surface inversee (sombre quel que soit
     le theme). Sans cette declaration, les widgets natifs (popup des
     <option>, autofill, scrollbar du textarea) sont rendus en scheme
     clair : texte --surface-invert-fg quasi blanc sur popup blanche,
     donc illisible (RGAA 3.2 / WCAG 1.4.3). */
  color-scheme: dark;
}
.cta-form h3 {
  color: var(--surface-invert-fg);
  font-size: 1.24rem;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.cta-form .note {
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  color: var(--surface-invert-fg-soft);
  margin-bottom: 22px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.field label {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  color: var(--surface-invert-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.field input,
.field textarea,
.field select {
  padding: 11px 12px;
  background: var(--surface-invert-overlay);
  /* 38 % et non 12 : le champ et le formulaire ont le meme fond, la
     bordure est leur seule separation (3,53:1 au lieu de 1,44:1). */
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--r-sm);
  color: var(--surface-invert-fg);
  font-family: var(--ff-body);
  font-size: 0.9rem;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--surface-invert-fg-soft);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--emerald);
  background: var(--surface-invert-overlay-hi);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.14);
}
.field textarea {
  resize: vertical;
  min-height: 90px;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
/* Secours pour les navigateurs qui ignorent color-scheme sur la popup
   (vieux Firefox) : couleurs explicites sur les options. */
.field select option {
  background: var(--surface-invert-bg);
  color: var(--surface-invert-fg);
}

.check {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--surface-invert-fg-muted);
  line-height: 1.45;
  margin: 18px 0;
  cursor: pointer;
}
.check input {
  accent-color: var(--emerald);
  margin-top: 3px;
}
.check a {
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.submit-btn {
  width: 100%;
  padding: 14px 22px;
  background: var(--emerald);
  color: #0b1a14;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background 0.15s,
    transform 0.15s;
}
.submit-btn:hover {
  background: #6ee7b7;
  transform: translateY(-1px);
}
.submit-btn i {
  width: 15px;
  height: 15px;
}

.form-ok {
  display: none;
  padding: 22px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: var(--r-sm);
  text-align: center;
}
.form-ok.visible {
  display: block;
}
.form-ok i {
  color: var(--emerald);
  width: 30px;
  height: 30px;
  margin: 0 auto 8px;
  display: block;
}
.form-ok h3 {
  color: var(--surface-invert-fg);
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.form-ok p {
  color: var(--surface-invert-fg-muted);
  font-size: 0.88rem;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.footer {
  padding: 80px 0 32px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
.foot-brand .brand {
  margin-bottom: 14px;
}
.foot-brand p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 340px;
  margin-bottom: 18px;
}
.foot-partner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 50px;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}
.foot-partner i {
  width: 12px;
  height: 12px;
  color: var(--primary);
}

.foot-col h2 {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.foot-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-col a {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
  transition:
    color 0.15s,
    padding-left 0.15s;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.foot-col a:hover {
  color: var(--primary);
  padding-left: 4px;
}
.foot-col a .new {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--amber);
  background: var(--amber-soft);
  padding: 1px 6px;
  border-radius: 50px;
  letter-spacing: 0.04em;
}

.foot-bot {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.foot-legal {
  display: flex;
  gap: 18px;
}
.foot-legal a:hover {
  color: var(--primary);
}

/* Bandeau de conformite accessibilite (Decret 2019-768 art. 6) */
.a11y-badge {
  display: inline-flex;
}
.a11y-badge a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  transition:
    border-color 0.15s,
    color 0.15s;
}
.a11y-badge a:hover,
.a11y-badge a:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}
.a11y-badge i {
  width: 13px;
  height: 13px;
}

/* Formulaire de signalement a11y (page accessibilite.html) */
.a11y-feedback-form {
  margin: 24px 0;
  padding: 24px;
  background: var(--paper-alt);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.a11y-feedback-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.a11y-feedback-form .field label {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.a11y-feedback-form .field input,
.a11y-feedback-form .field textarea {
  padding: 10px 12px;
  background: var(--chalk);
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 0.92rem;
}
.a11y-feedback-form .field input:focus,
.a11y-feedback-form .field textarea:focus {
  border-color: var(--primary);
}
.a11y-feedback-form .field textarea {
  resize: vertical;
  min-height: 110px;
}
.a11y-feedback-form button {
  align-self: flex-start;
}
.a11y-feedback-form button[aria-busy="true"] {
  opacity: 0.65;
  cursor: progress;
}
.a11y-feedback-form .note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

/* Les retours d'envoi sont ecrits pour le panneau sombre de la home. Ici le
   formulaire est pose sur --paper-alt : sans ces trois regles, le texte
   serait clair sur clair, donc illisible. */
.a11y-feedback-form .form-ok h3,
.a11y-feedback-form .form-error {
  color: var(--text);
}
.a11y-feedback-form .form-ok p {
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .vp-body {
    grid-template-columns: 200px 1fr;
  }
  .vp-grid {
    grid-template-columns: 1fr;
  }

  .pillar-01,
  .pillar-02,
  .pillar-03,
  .pillar-04 {
    grid-column: 1 / -1;
  }

  .t-chart,
  .t-gauge,
  .t-tree,
  .t-ci {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid .founder:nth-child(-n + 2) {
    border-top: 0;
  }
  .team-grid .founder:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }
  .team-grid .founder:nth-child(2n-1) {
    border-right: 1px solid var(--rule-dim);
    padding-right: 28px;
  }

  .cta-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 960px) {
  /* Retirer backdrop-filter en mobile : il cree un containing block
     qui empeche .nav-links.open (position:fixed) de se positionner
     correctement par rapport au viewport */
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
  }
  .nav-links {
    display: none;
  }
  /* Drawer right-aligned, backdrop cliquable, cibles tactiles 44px+ */
  .nav-links.open {
    display: flex;
    position: fixed;
    top: var(--nav-h);
    right: 0;
    bottom: 0;
    width: min(340px, 85vw);
    background: var(--paper);
    border-left: 1px solid var(--rule);
    box-shadow: -12px 0 32px -12px rgba(11, 26, 20, 0.2);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    flex-direction: column;
    gap: 0;
    z-index: 40;
    overflow-y: auto;
    animation: nav-slide 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  @keyframes nav-slide {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  .nav-links.open li {
    list-style: none;
  }
  .nav-links.open a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 8px;
    font-size: 0.96rem;
    min-height: 44px;
    border-bottom: 1px solid var(--rule-dim);
  }
  /* Backdrop semi-opaque quand le menu est ouvert */
  body.nav-open::before {
    content: "";
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 26, 20, 0.4);
    z-index: 39;
    animation: nav-fade 0.2s ease;
  }
  [data-theme="dark"] body.nav-open::before {
    background: rgba(0, 0, 0, 0.55);
  }
  @keyframes nav-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .nav-end .btn-line {
    display: none;
  }
  .mobile-btn {
    display: inline-flex;
  }
  .brand small {
    display: none;
  }
  /* Verrou scroll body quand le menu mobile est ouvert */
  body.nav-open {
    overflow: hidden;
  }

  .hero {
    padding: 48px 0 0;
  }
  .hero-inner {
    padding-bottom: 48px;
  }
  .hero-title-wrap,
  .hero-side {
    grid-column: 1 / -1;
  }
  .hero-side {
    padding-left: 0;
    border-left: 0;
    padding-top: 24px;
    border-top: 1px solid var(--rule-dim);
  }
  .hero-trust {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .trust-item {
    border-right: 0;
    border-bottom: 1px solid var(--rule-dim);
    padding-bottom: 16px;
  }
  .trust-item:nth-child(2n) {
    padding-right: 0;
  }

  .viewport-wrap {
    padding-bottom: 80px;
  }
  .vp-body {
    grid-template-columns: 1fr;
  }
  .vp-sidebar {
    display: none;
  }

  .ledger-head .tag,
  .ledger-head h2 {
    grid-column: 1 / -1;
  }
  .ledger-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ledger-item:nth-child(2n) {
    border-right: 0;
  }
  .ledger-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--rule-dim);
  }

  .personas-head h2,
  .personas-head .intro,
  .method-head h2,
  .method-head .intro,
  .indicators-head h2,
  .indicators-head .intro,
  .tour-head h2,
  .tour-head .intro,
  .compare-head h2,
  .compare-head .intro,
  .testimonials-head h2,
  .testimonials-head .intro,
  .team-head h2,
  .team-head .intro,
  .pricing-head h2,
  .pricing-head .intro {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
  }

  .persona {
    grid-template-columns: 48px 1fr;
    gap: 18px;
    padding: 24px 20px;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    margin-bottom: 14px;
    background: var(--paper);
  }
  .persona:last-of-type {
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0;
  }
  .persona:hover {
    background: var(--paper-alt);
  }
  .persona-no {
    font-size: 2rem;
  }
  .persona-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

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

  /* Mobile : on masque le <table> desktop et on affiche le bloc
     alternatif .compare-mobile (synthese 3 scores + 9 accordions) */
  .compare-table {
    display: none;
  }
  .compare-mobile {
    display: block;
  }

  /* FAQ mobile : head single col + typo reduite */
  .faq {
    padding: 72px 0 56px;
  }
  .faq-head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 32px;
  }
  .faq-head .tag,
  .faq-head h2,
  .faq-head .intro {
    grid-column: 1 / -1;
  }
  .faq-head .intro {
    padding-left: 0;
    border-left: 0;
  }
  .faq-item > summary {
    padding: 18px 0;
    font-size: 1rem;
    gap: 16px;
  }
  .faq-answer {
    padding-bottom: 20px;
  }
  .faq-answer p {
    font-size: 0.92rem;
  }

  .compliance-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .compliance-lede,
  .compliance-badges {
    grid-column: 1 / -1;
  }

  .test {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 0;
  }
  .test-no {
    padding-top: 0;
  }
  .test-meta {
    text-align: left;
    padding-top: 0;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }
  .team-grid .founder {
    border-right: 0;
    padding-right: 0;
  }

  /* .compare-table est masque plus haut au profit de .compare-mobile ;
     le tableau des tarifs n'a pas de pendant, on le reaffiche en blocs :
     un critere par bloc, chaque valeur prefixee du nom de l'offre. */
  .t-diff {
    display: block;
  }
  .t-diff thead {
    display: none;
  }
  .t-diff tbody,
  .t-diff tr,
  .t-diff td {
    display: block;
    width: auto;
  }
  .t-diff tr {
    border-bottom: 1px solid var(--rule-dim);
    padding: 14px 0;
  }
  .t-diff tbody td,
  .t-diff tbody tr td.us {
    border: 0;
    background: none;
    text-align: left;
    padding: 3px 0;
  }
  .t-diff tbody th[scope="row"] {
    font-weight: 600;
    margin-bottom: 4px;
  }
  .t-diff tbody td[data-offer] {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px;
  }
  .t-diff tbody td[data-offer] .offer-tag {
    display: inline;
    font-family: var(--ff-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
  }
  .t-diff tbody td[data-offer] .offer-tag::after {
    content: " · " / "";
  }
  .t-diff tbody td i,
  .t-diff tbody td svg {
    margin: 0;
  }
  .t-diff .cell-note {
    display: inline;
    margin: 0 0 0 6px;
  }

  .plans-cta-row {
    grid-template-columns: 1fr;
  }
  .plans-common ul {
    grid-template-columns: 1fr 1fr;
  }

  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  /* Garder font-size: 100% (herite du root) pour respecter les
     preferences utilisateur, on n'ecrase plus a 14px sur mobile */
  .wrap {
    padding: 0 20px;
  }
  :root {
    --gutter: 20px;
  }

  /* Masquer Prendre RDV dans la nav sur petit mobile : pousse le
     bouton burger hors viewport. Le CTA reste accessible dans le
     drawer et en section hero. */
  .nav-end > .btn-ink.btn-sm {
    display: none;
  }

  .plans-common ul {
    grid-template-columns: 1fr;
  }

  /* font-size mobile : herite du clamp cqi global (calibre sur la largeur
     reelle du conteneur). Le retrait de la ligne courte est en em, donc
     deja proportionnel : plus d'override necessaire ici. */

  /* 4 trust-items (moteurs/architecture/a11y/securite) masques sur mobile :
     empiles en 1 colonne ils creent une zone longue de credentials
     techniques sans progression narrative. L'utilisateur mobile va
     directement Hero -> Chiffres cles. Les 4 infos restent sur desktop
     et sont reprises de maniere plus contextuelle dans Compliance + CGV. */
  .hero-trust {
    display: none;
  }

  /* Marquee cache sur mobile : ticker anime illisible, l'alternative
     textuelle sr-only de la maquette viewport couvre deja les valeurs */
  .marquee {
    display: none;
  }

  /* Viewport dashboard totalement masque sur mobile : le chiffre
     3,8/5 isole sans contexte est source de confusion. Le Hero + 4
     trust items + alternative .sr-only couvrent deja le sens produit. */
  .viewport-wrap {
    display: none;
  }

  .ledger-grid {
    grid-template-columns: 1fr;
  }
  .ledger-item {
    border-right: 0;
    border-bottom: 1px solid var(--rule-dim);
    padding: 28px 20px;
    align-items: center;
    text-align: center;
  }
  .ledger-item:last-child {
    border-bottom: 0;
  }
  .ledger-big {
    font-size: clamp(2.8rem, 14vw, 4rem);
  }
  .ledger-item .caption {
    font-size: 0.92rem;
    font-weight: 600;
    max-width: 280px;
    margin: 0 auto;
  }
  .ledger-item .note {
    font-size: 0.78rem;
  }

  .indic-grid {
    grid-template-columns: 1fr;
  }
  .indic-grid .indic:nth-child(n) {
    border-right: 0;
  }
  /* Inverser la hierarchie mobile : nom complet en tete, code technique
     en secondaire. Le code reste colore via la pastille .indic-code::before */
  .indic {
    padding: 24px 20px;
    gap: 10px;
  }
  .indic h3 {
    order: 1;
    font-size: 1.35rem;
    line-height: 1.15;
  }
  .indic-top {
    order: 2;
  }
  .indic p {
    order: 3;
  }
  .indic-split {
    order: 4;
  }
  .indic-code {
    font-size: 1.1rem;
    padding-left: 16px;
    letter-spacing: 0.04em;
    font-family: var(--ff-mono);
    font-weight: 600;
    color: var(--text-muted);
  }
  .indic-code::before {
    width: 8px;
    height: 8px;
  }

  .foot-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
  .cta-form {
    padding: 22px;
  }

  .foot-bot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════
   PAGES ANNEXES : hero compact, breadcrumb
   ═══════════════════════════════════════════════════════ */
.page-hero {
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      900px 500px at 90% -20%,
      color-mix(in srgb, var(--emerald) 18%, transparent),
      transparent 55%
    ),
    radial-gradient(
      600px 300px at 0% 40%,
      color-mix(in srgb, var(--primary) 10%, transparent),
      transparent 60%
    );
  pointer-events: none;
  z-index: 0;
}
.page-hero > * {
  position: relative;
  z-index: 1;
}
.page-hero.tight {
  padding: 56px 0 44px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
/* Le fil d'ariane est desormais une liste : elle ne doit rien changer a
   l'apparence, et son lien s'aligne sur la cible de 24 px des autres liens
   de navigation (WCAG 2.5.8). */
.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-muted);
  transition: color 0.15s;
}
.breadcrumb a:hover {
  color: var(--primary);
}
.breadcrumb i {
  width: 12px;
  height: 12px;
  color: var(--rule-soft);
}
.breadcrumb span {
  color: var(--text);
  font-weight: 600;
}

.page-hero .tag {
  margin-bottom: 24px;
}

.page-hero h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: 24px;
  max-width: 980px;
}
.page-hero h1 em {
  font-style: italic;
  font-weight: 700;
  color: var(--primary);
  position: relative;
  display: inline-block;
}
.page-hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.18em;
  background: color-mix(in srgb, var(--emerald) 32%, transparent);
  z-index: -1;
  border-radius: 2px;
}

.page-lede {
  font-family: var(--ff-body);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 780px;
  margin-bottom: 20px;
}
.page-lede strong {
  color: var(--text);
  font-weight: 600;
}

.page-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--chalk);
  border: 1px solid var(--rule-dim);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.page-meta i {
  width: 13px;
  height: 13px;
  color: var(--primary);
}
.page-meta strong {
  color: var(--text);
  font-weight: 600;
}

/* Phase jumps (nav interne roadmap) */
.phase-jumps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 40px;
}
.phase-jump {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  padding: 16px 18px;
  background: var(--chalk);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: all 0.2s ease;
  align-items: center;
}
.phase-jump .n {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper-alt);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}
.phase-jump > span:nth-child(2) {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text);
  letter-spacing: -0.015em;
}
.phase-jump small {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.phase-jump:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}
.phase-jump.active {
  background: var(--surface-invert-bg);
  border-color: var(--surface-invert-bg);
  color: var(--surface-invert-fg);
}
.phase-jump.active > span:nth-child(2) {
  color: var(--surface-invert-fg);
}
.phase-jump.active .n {
  background: var(--emerald);
  color: var(--surface-invert-bg);
}
.phase-jump.active small {
  color: var(--surface-invert-fg-soft);
}

/* ═══════════════════════════════════════════════════════
   ROADMAP : timeline verticale
   ═══════════════════════════════════════════════════════ */
.roadmap-timeline {
  padding: 88px 0 112px;
}

.phase-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 40px;
  margin-bottom: 56px;
  scroll-margin-top: 100px;
}
.phase-card:last-child {
  margin-bottom: 0;
}

.phase-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rail-dot {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  z-index: 1;
}
.rail-dot.rail-done {
  background: var(--ink);
  color: var(--emerald);
  border-color: var(--ink);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--emerald) 15%, transparent);
}
.rail-line {
  flex: 1;
  width: 1px;
  min-height: 80px;
  background: var(--rule);
  margin-top: 12px;
}

.phase-content {
  border: 1px solid var(--rule);
  padding: 40px 44px;
  position: relative;
  background: var(--chalk);
}
.phase-now .phase-content {
  border-color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}

.phase-head {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.phase-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.phase-num {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.phase-period {
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  color: var(--text);
  padding: 3px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  letter-spacing: 0.02em;
}
.phase-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border-radius: var(--r-sm);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--paper);
  color: var(--text-muted);
  margin-left: auto;
  border: 1px solid var(--rule-soft);
}
.phase-status i {
  width: 11px;
  height: 11px;
}
.phase-status.done {
  background: color-mix(in srgb, var(--score-5) 15%, transparent);
  color: var(--score-5);
  border-color: transparent;
}

.phase-head h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 16px;
}
.phase-head h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--primary);
}

.phase-goal {
  font-family: var(--ff-body);
  font-size: 1.02rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 760px;
}

.phase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}

.phase-h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.phase-h3 i {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.phase-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phase-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-family: var(--ff-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}
.phase-list li i {
  width: 14px;
  height: 14px;
  color: var(--primary);
  margin-top: 4px;
  flex-shrink: 0;
}
.phase-list.metrics li i {
  color: var(--accent);
}
.phase-list li strong {
  font-weight: 600;
  color: var(--text);
}
.phase-list li code {
  font-family: var(--ff-mono);
  font-size: 0.8rem;
  background: var(--paper);
  padding: 1px 6px;
  border: 1px solid var(--rule-dim);
  border-radius: 2px;
}

.phase-techs {
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.phase-tech-label {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 6px;
}
.phase-tech {
  padding: 4px 11px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono);
  font-size: 0.76rem;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════
   GOVERNANCE (roadmap)
   ═══════════════════════════════════════════════════════ */
.governance {
  padding: 0 0 96px;
}
.governance-card {
  background: var(--surface-invert-bg);
  color: var(--surface-invert-fg);
  padding: 48px 52px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 32px;
  align-items: start;
  border: 1px solid var(--surface-invert-bg);
  position: relative;
  overflow: hidden;
}
.governance-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px 300px at 100% 0%,
    rgba(52, 211, 153, 0.15),
    transparent 65%
  );
  pointer-events: none;
}
.governance-card > * {
  position: relative;
}
.gc-icon {
  width: 72px;
  height: 72px;
  background: var(--emerald);
  color: var(--surface-invert-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
}
.gc-icon i {
  width: 32px;
  height: 32px;
}
.gc-body h3 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  color: var(--surface-invert-fg);
  margin-bottom: 12px;
}
.gc-body p {
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--surface-invert-fg-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 720px;
}
.gc-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--surface-invert-fg-soft);
  letter-spacing: 0.02em;
}
.gc-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gc-meta i {
  width: 13px;
  height: 13px;
  color: var(--emerald);
}

/* ═══════════════════════════════════════════════════════
   LEGAL PAGES (mentions, cgv)
   ═══════════════════════════════════════════════════════ */
.legal-body {
  padding: 72px 0 112px;
}

.legal-container {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 100px;
  padding: 24px 0;
  border-top: 1px solid var(--ink);
}
.legal-toc h2 {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
  font-weight: 600;
}
.legal-toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: toc;
}
.legal-toc li {
  counter-increment: toc;
}
.legal-toc a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: 0.88rem;
  color: var(--text);
  transition:
    color 0.15s,
    padding-left 0.15s;
  line-height: 1.4;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.legal-toc a:hover {
  color: var(--primary);
  padding-left: 4px;
}
.legal-toc a:hover::before {
  color: var(--primary);
}

.legal-article {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
  font-family: var(--ff-body);
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 780px;
}
.legal-article section {
  padding: 0 0 48px 0;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rule-dim);
  scroll-margin-top: 100px;
}
.legal-article section:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.legal-article h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--primary);
  max-width: 520px;
}

.legal-article h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 28px 0 14px;
}

.legal-article p {
  margin-bottom: 18px;
}
.legal-article p:last-child {
  margin-bottom: 0;
}
.legal-article strong {
  color: var(--text);
  font-weight: 600;
}
.legal-article em {
  font-style: italic;
  color: var(--text-muted);
}
.legal-article a {
  color: var(--primary);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  transition: border-color 0.15s;
}
.legal-article a:hover {
  border-bottom-color: var(--primary);
}

.legal-article code {
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  background: var(--paper-alt);
  border: 1px solid var(--rule-dim);
  padding: 1px 7px;
  border-radius: 3px;
  color: var(--text);
}

.legal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 24px 0;
  padding-left: 0;
}
/* Les voies de recours contiennent des URL longues et non secables
   (www.defenseurdesdroits.fr/saisir/delegues, 303 px a la police du bloc).
   Sans cesure, elles fixent la largeur minimale de la colonne de la grille
   et font deborder la page a 320 px (WCAG 1.4.10). */
.legal-list a,
.legal-article a[href^="http"] {
  overflow-wrap: anywhere;
}
.legal-list li {
  position: relative;
  padding-left: 24px;
  line-height: 1.55;
}
.legal-list li::before {
  content: "→" / "";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
  font-family: var(--ff-display);
}

.legal-defs {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px 24px;
  margin: 20px 0 24px 0;
  padding: 20px 0;
  border-top: 1px solid var(--rule-dim);
  border-bottom: 1px solid var(--rule-dim);
}
.legal-defs dt {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.legal-defs dd {
  font-family: var(--ff-body);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.legal-footer-note {
  margin-top: 48px;
  padding: 24px 28px;
  /* 5 % et non 8 : a 8 % le fond teinte faisait tomber le lien a 4,44:1.
     A 5 % tout le contenu de l'encadre repasse au-dessus du seuil. */
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-left: 3px solid var(--accent);
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}
.legal-footer-note i {
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-top: 2px;
}
.legal-footer-note p {
  font-family: var(--ff-body);
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}

/* CTA bar pour pages annexes (roadmap) */
.cta-annex {
  background: var(--surface-invert-bg);
  color: var(--surface-invert-fg);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.cta-annex::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      700px 400px at 85% 15%,
      rgba(52, 211, 153, 0.18),
      transparent 60%
    ),
    radial-gradient(
      500px 280px at 10% 85%,
      rgba(180, 83, 9, 0.1),
      transparent 60%
    );
  pointer-events: none;
}
.cta-annex > .wrap {
  position: relative;
  text-align: center;
}
.cta-annex .tag {
  color: var(--emerald);
  justify-content: center;
  margin: 0 auto 20px;
}
.cta-annex .tag::before {
  background: var(--emerald);
}
.cta-annex h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--surface-invert-fg);
  margin-bottom: 20px;
}
.cta-annex h2 em {
  font-style: italic;
  font-weight: 700;
  color: var(--emerald);
}
.cta-annex p {
  font-family: var(--ff-body);
  font-size: 1.08rem;
  color: var(--surface-invert-fg-muted);
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 36px;
}
.cta-annex .actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-annex .btn-line {
  color: var(--surface-invert-fg);
  border-color: var(--surface-invert-border);
}
.cta-annex .btn-line:hover {
  background: var(--surface-invert-fg);
  color: var(--surface-invert-bg);
  border-color: var(--surface-invert-fg);
}

/* Responsive annexes */
@media (max-width: 1100px) {
  .legal-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .legal-toc {
    position: static;
    padding: 20px 0;
  }
  .legal-toc ol {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .legal-article {
    max-width: none;
  }
}

@media (max-width: 960px) {
  .phase-card {
    grid-template-columns: 56px 1fr;
    gap: 24px;
  }
  .rail-dot {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
    top: 90px;
  }
  .phase-content {
    padding: 28px 24px;
  }
  .phase-now .phase-content {
    box-shadow: 4px 4px 0 var(--ink);
  }
  .phase-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .phase-jumps {
    grid-template-columns: repeat(2, 1fr);
  }

  .governance-card {
    grid-template-columns: 1fr;
    padding: 32px 28px;
  }

  .legal-article {
    padding-top: 20px;
  }
  .legal-defs {
    grid-template-columns: 1fr;
    gap: 4px 0;
    padding: 16px 0;
  }
  .legal-defs dd {
    margin-bottom: 12px;
  }
}

@media (max-width: 640px) {
  .phase-jumps {
    grid-template-columns: 1fr;
  }
  .phase-head > div {
    gap: 8px;
  }
  .phase-status {
    margin-left: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    /* Une duree quasi nulle n'arrete pas une animation infinite : elle la fait
       boucler a la frequence de rafraichissement, ce qui transforme une
       pulsation douce en scintillement. Il faut aussi couper l'iteration. */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto;
  }
  /* html porte scroll-behavior: smooth, de specificite superieure a « * » :
     sans !important sur un selecteur au moins aussi fort, la preference etait
     ignoree pour le defilement. */
  html {
    scroll-behavior: auto !important;
  }
  .hero-title .l {
    opacity: 1;
    transform: none;
  }
  .viewport {
    opacity: 1;
    transform: none;
  }
  .marquee-track {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════
   HIGH CONTRAST PREFERENCE (WCAG 1.4.6 AAA soft)
   ═══════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
  :root {
    --text-muted: #1a1a1a; /* ~16:1 sur --paper clair */
    --text-soft: #2a2a2a; /* ~13:1 */
    --rule-soft: #000000;
  }
  [data-theme="dark"] {
    --text-muted: #f0f0f0;
    --text-soft: #e0e0e0;
    --rule-soft: #ffffff;
  }
}

/* ═══════════════════════════════════════════════════════
   FORCED COLORS · Windows High Contrast (WCAG 1.4.11)
   Pas de forced-color-adjust:none : l'utilisateur a choisi
   les couleurs systeme, on respecte son choix.
   ═══════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
  .nav-links a,
  .footer a,
  .foot-legal a {
    color: LinkText;
  }
  :focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ═══════════════════════════════════════════════════════
   MÉTHODE DE CALCUL · indice de confiance (§ Indicateurs)
   ═══════════════════════════════════════════════════════ */
.calc-method {
  margin: 72px 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--chalk);
  overflow: hidden;
}
.cm-lede {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 32px 48px;
  align-items: start;
  padding: 40px;
}
.cm-eyebrow {
  grid-column: 1 / -1;
  display: block;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.cm-lede h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.cm-lede h3 em {
  font-style: normal;
  color: var(--primary);
}
.cm-lede p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.cm-lede strong {
  color: var(--text);
  font-weight: 600;
}

.cm-conf {
  padding: 40px;
  background: var(--paper-alt);
}
.cm-conf-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.cm-conf-title i,
.cm-conf-title svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
}
.cm-conf-list {
  list-style: none;
  display: grid;
  gap: 2px;
}
.cm-conf-list li {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--rule-dim);
}
.cm-conf-list li:first-child {
  border-top: 0;
}
.cm-k {
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.cm-badge {
  justify-self: end;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
}
.cm-conf-list .lvl-hi .cm-badge {
  color: var(--score-5, #16795a);
}
.cm-conf-list .lvl-mid .cm-badge,
.cm-conf-list .lvl-low .cm-badge {
  color: var(--c-use, #ea580c);
}
.cm-src {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.cm-note {
  margin-top: 20px;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-soft);
  border-left: 2px solid var(--primary);
  padding-left: 12px;
}

/* ═══════════════════════════════════════════════════════
   MCP · ASSISTANT IA
   ═══════════════════════════════════════════════════════ */
.mcp {
  padding: 120px 0;
  background: var(--paper-alt);
}
.mcp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mcp-lede h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 18px 0 20px;
}
.mcp-lede h2 em {
  font-style: normal;
  color: var(--primary);
}
.mcp-lede .intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.mcp-lede .intro strong {
  color: var(--text);
  font-weight: 600;
}
.mcp-points {
  list-style: none;
  display: grid;
  gap: 16px;
}
.mcp-points li {
  display: flex;
  gap: 12px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.mcp-points i,
.mcp-points svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--primary);
}
.mcp-points strong {
  color: var(--text);
  font-weight: 600;
}

.mcp-demo {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--chalk);
  padding: 24px;
  box-shadow: 0 20px 50px -24px rgba(11, 26, 20, 0.28);
}
[data-theme="dark"] .mcp-demo {
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.6);
}
.mcp-chat {
  display: grid;
  gap: 16px;
}
.mcp-msg .who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.mcp-msg.bot .who {
  color: var(--primary);
}
.mcp-msg .who i,
.mcp-msg .who svg {
  width: 13px;
  height: 13px;
}
.mcp-msg.user p {
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 500;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--paper-alt);
  border: 1px solid var(--rule-soft);
}
.mcp-actions {
  list-style: none;
  display: grid;
  gap: 2px;
  counter-reset: none;
}
.mcp-actions li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--rule-dim);
}
.mcp-actions li:first-child {
  border-top: 0;
}
.mcp-actions .rk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--primary);
  /* --text-paper s'inverse avec le thème : clair sur le vert foncé (light),
     foncé sur le vert clair (dark). Garde le ratio >= 4.5:1 (WCAG 1.4.3). */
  color: var(--text-paper);
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 700;
}
.mcp-actions .ac {
  font-size: 0.88rem;
  line-height: 1.45;
}
.mcp-actions .im {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--score-5, #16795a);
}
.mcp-foot {
  margin-top: 14px;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  color: var(--text-soft);
}

/* ═══════════════════════════════════════════════════════
   SIMULATION · capture produit
   ═══════════════════════════════════════════════════════ */
.simulation {
  padding: 120px 0;
  background: var(--paper);
}
.sim-head {
  max-width: 720px;
  margin-bottom: 48px;
}
.sim-head h2 {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 18px 0 18px;
}
.sim-head h2 em {
  font-style: normal;
  color: var(--primary);
}
.sim-head .intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.sim-shot-frame {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--chalk);
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(11, 26, 20, 0.28);
}
[data-theme="dark"] .sim-shot-frame {
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
}
.sim-shot {
  display: block;
  width: 100%;
  height: auto;
}
.sim-shot-frame figcaption {
  padding: 16px 24px;
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-alt);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.sim-shot-frame figcaption strong {
  color: var(--text);
  font-weight: 600;
}
.sim-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.sim-type {
  padding: 24px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  background: var(--chalk);
}
.sim-type i,
.sim-type svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  margin-bottom: 12px;
}
.sim-type h3 {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.sim-type p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .cm-lede,
  .mcp-row {
    grid-template-columns: 1fr;
  }
  .mcp-row {
    gap: 40px;
  }
  .sim-types {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .mcp,
  .simulation {
    padding: 80px 0;
  }
  .cm-lede,
  .cm-conf {
    padding: 28px 22px;
  }
  .mcp-demo {
    padding: 18px;
  }
  .mcp-actions li {
    grid-template-columns: auto 1fr;
  }
  .mcp-actions .im {
    grid-column: 2;
  }
  .viewport-cap {
    text-align: left;
  }
}

/* Bloc conformité : accroche souveraineté sous le titre */
.compliance-lede p {
  margin-top: 14px;
  max-width: 38ch;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--surface-invert-fg);
  opacity: 0.72;
}
.compliance-lede p strong {
  font-weight: 600;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE : correctifs reflow 320px + cibles tactiles
   ═══════════════════════════════════════════════════════ */

/* Reflow (WCAG 1.4.10) : aucun mot ne doit forcer un scroll horizontal.
   « environnementaux » dans le titre §Indicateurs debordait a 320px. */
h1,
h2,
h3 {
  overflow-wrap: break-word;
}
@media (max-width: 380px) {
  h1,
  h2 {
    hyphens: auto;
  }
}

/* L'echelle de score restait sur 2 colonnes en dessous de 360px,
   poussant la jauge hors du viewport. */
@media (max-width: 640px) {
  .score-ladder {
    grid-template-columns: 1fr;
  }
  .score-ladder .score-side {
    justify-self: start;
  }
}

/* Cibles tactiles >= 24x24 (WCAG 2.5.8 AA). Les liens inline dans un
   paragraphe en sont exemptes ; les liens de navigation, non. */
.nav-links a,
.foot-col a,
.foot-legal a {
  display: inline-block;
  min-height: 24px;
  padding: 3px 4px;
  margin: 0 -4px;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
}
.check {
  grid-template-columns: 24px 1fr;
  align-items: start;
}
.check input {
  width: 24px;
  height: 24px;
  margin-top: 0;
}

/* Les colonnes `1fr` d'une grille ne descendent pas sous leur min-content :
   la fiche persona debordait donc a 320px. minmax(0, 1fr) leve ce plancher. */
@media (max-width: 640px) {
  .persona {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .persona-body,
  .persona-main,
  .persona-levers {
    min-width: 0;
  }
}

/* Sommaire des pages legales : liens de navigation, donc soumis a la taille
   de cible minimale (WCAG 2.5.8) contrairement aux liens inline d'un texte. */
.legal-toc a {
  display: inline-block;
  min-height: 24px;
  padding: 3px 4px;
  margin: 0 -4px;
}

/* ═══════════════════════════════════════════════════════
   CAPTURES PRODUIT SUR PETIT ECRAN
   Une capture de 1500px reduite a 350px est illisible. Plutot que de la
   masquer (l'ancien mockup l'etait), on la rend pannable : la zone de
   defilement est explicite, focusable au clavier (WCAG 2.1.1) et nommee.
   Le defilement horizontal reste confine au conteneur, la page ne deborde
   pas (WCAG 1.4.10).
   ═══════════════════════════════════════════════════════ */
.shot-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.shot-scroll:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
}

@media (max-width: 900px) {
  /* La capture Exploration etait masquee sur mobile du temps de l'ancien
     mockup (un score 3,8/5 isole, sans contexte). La vraie capture produit,
     elle, doit rester visible : c'est le premier argument de la page. */
  .viewport-wrap {
    display: block;
  }
  .vp-shot,
  .sim-shot {
    min-width: 880px;
  }
  /* Indice de manipulation. Sur .viewport-cap on vise le <span> et non le <p>,
     qui est en flex : un ::after y partirait sur sa propre ligne. */
  .viewport-cap span::after,
  .sim-shot-frame figcaption::after {
    content: " Faites glisser la capture pour l'explorer.";
    color: var(--text-soft);
  }
}

/* ═══════════════════════════════════════════════════════
   FORMULAIRE DE CONTACT : erreurs, envoi, pot de miel
   ═══════════════════════════════════════════════════════ */

/* Pot de miel : masque a l'oeil et au lecteur d'ecran, mais toujours dans
   le DOM pour qu'un robot le remplisse. Pas display:none, que certains
   robots detectent. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Erreur par champ. Icone + texte : jamais la couleur seule (RGAA 3.1). */
.field-err {
  display: none;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--err-fg);
}
.field-err:not(:empty) {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.field-err:not(:empty)::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: var(--err-fg);
  color: var(--err-on);
  font-size: 0.62rem;
  font-weight: 700;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.check.has-error input {
  border-color: var(--c-gwp);
  outline-color: var(--c-gwp);
}

/* Banniere d'echec global (reseau, 5xx). role="alert" cote HTML. */
.form-error {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--c-gwp);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--c-gwp) 12%, transparent);
  color: var(--surface-invert-fg);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Etat d'envoi */
.submit-btn[aria-busy="true"] {
  opacity: 0.65;
  cursor: progress;
}

/* Le badge accessibilite est desormais un lien vers la declaration : c'est la
   qu'est publie l'etat de conformite reel. Il doit rester visuellement
   identique aux autres badges, mais se comporter comme un lien. */
a.cb {
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
/* La section Conformite est sur fond inverse (--surface-invert-bg) : un
   survol en --primary-tint (vert tres clair en theme light) posait un fond
   clair sous un texte clair, le libelle devenait illisible. On garde donc le
   meme survol que les autres badges (bordure emeraude + texte plein), avec un
   voile translucide qui se compose sur le fond sombre dans les deux themes. */
a.cb:hover,
a.cb:focus-visible {
  border-color: var(--emerald);
  background: color-mix(in srgb, var(--emerald) 14%, transparent);
  color: var(--surface-invert-fg);
}

/* Note de bas de section sur les indicateurs estimes (ADPf, WU). */
/* L'appel de note est un lien vers la note : sans lui, l'asterisque etait
   annonce sans aucun moyen d'atteindre l'explication. */
.fn-ref {
  color: inherit;
  text-decoration: none;
}
.fn-ref:hover sup {
  color: var(--primary);
}

.indic-footnote {
  margin-top: 20px;
  max-width: 78ch;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.indic-footnote strong {
  color: var(--text-muted);
  font-weight: 600;
}
.indic-code sup {
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 1px;
}

/* Échelle ELA à trois niveaux : les libellés vivent dans les segments. */
.score-ladder-bar.three .seg {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.score-ladder-note {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-soft);
}

/* ═══════════════════════════════════════════════════════
   REPLI DES GLYPHES GENERES
   `content: "x" / ""` donne une alternative vide aux glyphes decoratifs
   produits par CSS (RGAA 1.2), qu'aucun aria-hidden ne peut atteindre. Un
   moteur qui ne connait pas la syntaxe a deux valeurs ignore la declaration
   entiere : ce bloc rend alors le glyphe seul, sans alternative, plutot que
   rien du tout.
   ═══════════════════════════════════════════════════════ */
@supports not (content: "x" / "") {
  .compare-table thead th.us::after {
    content: "★";
  }
  .compare-item > summary::after,
  .faq-item > summary::after {
    content: "+";
  }
  .compare-item[open] > summary::after,
  .faq-item[open] > summary::after {
    content: "−";
  }
  .legal-list li::before {
    content: "→";
  }
  .t-diff tbody td[data-offer] .offer-tag::after {
    content: " · ";
  }
}

/* ═══════════════════════════════════════════════════════
   IMPRESSION
   Les sections a fond inverse sortiraient en aplat noir pleine page, et
   l'adresse des liens serait perdue. On repasse tout sur fond blanc et on
   revele les URL des liens externes.
   ═══════════════════════════════════════════════════════ */
@media print {
  :root {
    --paper: #ffffff;
    --paper-alt: #ffffff;
    --chalk: #ffffff;
    --surface-invert-bg: #ffffff;
    --surface-invert-bg-alt: #ffffff;
    --surface-invert-fg: #0b1a14;
    --surface-invert-fg-muted: #333333;
    --surface-invert-fg-soft: #444444;
    --text: #000000;
    --text-muted: #333333;
    --text-soft: #444444;
  }
  body {
    background: #fff;
    color: #000;
  }
  .nav,
  .marquee,
  .mobile-btn,
  .theme-btn,
  .skip-link,
  .cta-form,
  .a11y-feedback-form {
    display: none !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
  .viewport,
  .hero-title .l,
  .pillar,
  .indic,
  .persona,
  .tour-block,
  .ledger-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  h1,
  h2,
  h3 {
    break-after: avoid;
  }
  .faq-item,
  .compare-item {
    break-inside: avoid;
  }
}