/* ═══════════ Filum — site vitrine ═══════════ */
:root {
  --dark: #0B1220;
  --dark2: #0F172A;
  --ink: #1E293B;
  --sub: #475569;
  /* ── LA PALETTE, DESCENDUE D'UN CRAN ──────────────────────────────────────────
     Le site comptait 132 manquements au seuil AA en mode clair, tous antérieurs
     au mode sombre : les onglets inactifs à 2,56, les coches vertes à 2,27, le
     blanc sur pastille ambre à 2,15. Ce n'étaient pas des cas isolés mais CINQ
     couleurs, chacune employée des dizaines de fois.

     La correction garde la TEINTE et descend la LUMINOSITÉ d'un ou deux crans sur
     la même gamme : la marque ne change pas, elle s'assombrit. Chaque valeur a été
     choisie sur le calcul, pas à l'œil — et vérifiée sur les DEUX fonds où elle
     sert, le blanc et le teinté, parce qu'un cran suffisant sur l'un ne l'est pas
     toujours sur l'autre.

       --faint    #94A3B8 -> #5B6B82   2,56 -> 5,43 (blanc) et 4,95 (teinté)
       --indigo   #6366F1 -> #4F46E5   4,47 -> 6,29
       --violet   #8B5CF6 -> #7C3AED   4,23 -> 5,70
       --emerald  #10B981 -> #047857   2,54 -> 5,48
       --amber    #F59E0B -> #B45309   2,15 -> 5,02

     --faint ne prend PAS slate-500 (#64748B), qui passe sur blanc (4,76) mais
     échoue sur fond teinté (4,34) — or il sert aux deux. La valeur retenue est
     entre slate-500 et slate-600, et c'est délibéré.

     --indigo-deep descend d'autant, sinon il rejoignait --indigo et la gamme se
     réduisait à une seule marche. */
  --faint: #5B6B82;
  /* Le meme role, sur les BANDES SOMBRES. --faint vaut pour les fonds clairs ; l'employer
     sur le pied de page l'a fait tomber a 3,45 des que la palette est descendue. Un token
     par surface, sinon l'un des deux est toujours sacrifie. */
  --faint-sombre: #94A3B8;
  --line: #E2E8F0;
  --indigo: #4F46E5;
  --indigo-deep: #4338CA;
  --violet: #7C3AED;
  --emerald: #047857;
  --amber: #B45309;
  --tint: #F1F5F9;
  --bg: #FFFFFF;
  --radius: 16px;
  --shadow: 0 10px 40px -12px rgba(15, 23, 42, .25);
  --shadow-lg: 0 30px 80px -20px rgba(15, 23, 42, .45);

  /* SURFACES ET TEINTES — posees pour le mode sombre.
     Une carte n'est pas le fond de la page : sur fond clair les deux sont blancs, ce qui
     laissait ecrire #fff partout sans que la distinction se voie. Sur fond sombre elle
     devient structurante — c'est elle qui fait qu'une carte se detache. */
  --indigo-text: #4F46E5; /* indigo LISIBLE sur lavis — --indigo-deep reste pour le bouton blanc */
  --danger: #B91C1C;
  /* LA MESURE DE LECTURE. Elle existait en quatre valeurs — 62ch, 64ch, 66ch dans les
     classes de chapo, plus deux attributs style= inline — pour un seul et meme role :
     la largeur confortable d'une colonne de prose. Aucune raison ne les distinguait.
     Une valeur, un nom, et l'ecart cesse de se reinstaller. */
  --mesure: 66ch;
  --strong: #0B1220; /* encre d'emphase — NE PAS confondre avec --dark, fond de bande */
  --surface: #FFFFFF;
  --wash-indigo-a: #EEF2FF;
  --wash-indigo-b: #F5F3FF;
  --wash-emerald-a: #ECFDF5;
  --wash-emerald-b: #F0FDF4;
  --wash-rose-a: #FEF2F2;
  --wash-rose-b: #FFF7ED;
  --badge-amber-bg: #FEF3C7;  --badge-amber-fg: #B45309;  --badge-amber-line: #FDE68A;
  --badge-indigo-bg: #E0E7FF; --badge-indigo-fg: #4F46E5; --badge-indigo-line: #C7D2FE;
  --cta-a: #4F46E5; --cta-b: #8B5CF6; --cta-c: #6D28D9;
  --badge-emerald-bg: #D1FAE5; --badge-emerald-fg: #047857; --badge-emerald-line: #A7F3D0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 780px; }

/* ─── Apparitions au défilement ─── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; } .d5 { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .thread-pulse, .thread-draw { animation: none !important; }
}

/* ─── Boutons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 12px;
  font-weight: 600; font-size: 15px; cursor: pointer; border: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, var(--indigo-deep), var(--violet));
  color: #fff; box-shadow: 0 8px 24px -8px rgba(99, 102, 241, .6);
}
.btn-primary:hover { box-shadow: 0 14px 34px -8px rgba(99, 102, 241, .75); }
.btn-ghost { background: rgba(255,255,255,.07); color: #E2E8F0; border: 1px solid rgba(255,255,255,.18); }
.btn-ghost:hover { background: rgba(255,255,255,.13); }
.btn-light { background: #fff; color: var(--indigo-deep); box-shadow: 0 8px 24px -10px rgba(0,0,0,.4); }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* ─── Navigation ─── */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .25s ease, box-shadow .25s ease;
}
#nav.scrolled { background: rgba(11, 18, 32, .85); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; padding: 6px;
  background: linear-gradient(135deg, var(--indigo-deep), var(--violet));
  box-shadow: 0 4px 14px -4px rgba(99,102,241,.7);
}
.brand-name { font-weight: 800; font-size: 19px; color: #fff; letter-spacing: -.02em; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: #CBD5E1; font-size: 14.5px; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: #fff; }
/* Un bouton posé dans .nav-links héritait de la couleur des LIENS (#CBD5E1) : la règle
   est plus spécifique que .btn-primary, et lui reprenait son blanc — contraste sous le
   seuil AA sur le bout violet du dégradé. Les boutons vivent désormais dans .nav-right,
   mais la garde reste : elle coûte une ligne et referme le piège pour de bon. */
.nav-links a.btn { color: inherit; }

/* Bascule de langue : discrète, mais toujours visible — y compris sur mobile, où le reste
   de la navigation disparaît. Un lecteur anglophone ne doit jamais avoir à la chercher. */
.nav-right { display: flex; align-items: center; gap: 14px; margin-left: 20px; }
.lang-switch {
  color: #94A3B8; font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
  padding: 5px 9px; border: 1px solid rgba(203, 213, 225, .28); border-radius: 7px;
  transition: color .15s, border-color .15s, background .15s;
}
/* CIBLE TACTILE. La bascule mesure 39x32 : conforme au minimum AA (24x24) mais penible
   au pouce. On etend la ZONE ATTEIGNABLE par un pseudo-element, sans toucher a la taille
   dessinee : agrandir le bouton aurait deplace toute la barre de navigation. */
.lang-switch { position: relative; }
.lang-switch::after { content: ""; position: absolute; inset: -6px -5px; }
.lang-switch:hover { color: #fff; border-color: rgba(203, 213, 225, .6); background: rgba(255, 255, 255, .06); }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }
  .nav-right { margin-left: auto; }
  /* TROIS ÉLÉMENTS NE TIENNENT PAS DANS CETTE BARRE. Depuis que « Essayer la démo » s'y
     ajoute, la mesure donne un débordement de +48 px à 861 et +37 à 360 — et la barre étant
     en position fixe, aucune barre de défilement n'apparaît pour aller chercher ce qui est
     sorti. Le bouton poussé dehors était « Demander une démo », c'est-à-dire l'appel
     principal du site.
     On n'en garde donc qu'un sur petit écran, et c'est « Essayer la démo » : la page vers
     laquelle il mène porte elle-même de quoi nous écrire. */
  .nav-right .btn-demo ~ .btn-primary { display: none; }
}

/* ─── Héros ─── */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 70% -10%, #1E1B4B 0%, var(--dark) 55%);
  color: #fff; padding: 150px 0 0;
}
.hero-glow {
  position: absolute; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(99,102,241,.22), transparent 70%);
  top: -300px; left: 50%; transform: translateX(-50%); pointer-events: none;
}
.hero-inner { text-align: center; position: relative; }
.hero-kicker {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #A5B4FC;
  border: 1px solid rgba(165,180,252,.3); border-radius: 999px; padding: 7px 16px;
  background: rgba(99,102,241,.1);
}
.hero h1 {
  font-size: clamp(40px, 6.5vw, 72px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.05; margin: 26px 0 22px;
}
.grad {
  background: linear-gradient(100deg, #818CF8, #A78BFA 45%, #34D399);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { max-width: 660px; margin: 0 auto; color: #B6C2D6; font-size: 18px; }
.hero-sub strong { color: #E0E7FF; }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

.hero-thread { max-width: 860px; margin: 54px auto 0; }
.thread-draw { stroke-dasharray: 940; stroke-dashoffset: 940; animation: draw 2.2s ease forwards .3s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.thread-pulse { filter: drop-shadow(0 0 6px #A5B4FC); }
.thread-nodes circle { transition: r .2s ease; }

.hero-shot { margin: 60px auto -120px; max-width: 920px; position: relative; z-index: 2; }
.browser-frame {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: var(--shadow-lg);
  background: #0F172A;
}
.browser-bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 16px;
  background: #1E293B; border-bottom: 1px solid rgba(148,163,184,.15);
}
.browser-bar span { width: 11px; height: 11px; border-radius: 50%; background: #334155; }
.browser-bar span:nth-child(1) { background: #F87171; }
.browser-bar span:nth-child(2) { background: #FBBF24; }
.browser-bar span:nth-child(3) { background: #34D399; }
.browser-bar em { margin-left: 12px; font-style: normal; font-size: 12.5px; color: #94A3B8; }

/* ─── Chiffres ─── */
.stats { background: var(--dark2); color: #fff; padding: 170px 0 64px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.stat { text-align: center; }
.stat-num {
  display: block; font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(100deg, #818CF8, #A78BFA); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { display: block; margin-top: 10px; color: #94A3B8; font-size: 14.5px; max-width: 300px; margin-inline: auto; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: 1fr; } .stats { padding-top: 150px; } }

/* ─── Sections ─── */
.section { padding: 96px 0; }
.section-dark { background: var(--dark2); color: #fff; }
.section-tint { background: var(--tint); }
.kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--indigo);
}
.section-dark .kicker { color: #A5B4FC; }
.section h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.025em; margin: 10px 0 18px; line-height: 1.15; }
.section-sub { color: var(--sub); font-size: 17px; max-width: 640px; }
.section-dark .section-sub { color: #94A3B8; }
.section-note { margin-top: 18px; color: var(--sub); font-style: italic; font-size: 15px; }

/* ─── Le renversement ─── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
.col-card { border-radius: var(--radius); padding: 30px 32px; }
.col-before { background: var(--tint); }
.col-after { background: linear-gradient(160deg, var(--wash-indigo-a), var(--wash-indigo-b)); box-shadow: var(--shadow); }
.col-card h3 { font-size: 18px; margin-bottom: 14px; }
.col-after h3 { color: var(--indigo-text); }
.col-card ul { list-style: none; }
.col-card li { padding: 8px 0 8px 28px; position: relative; color: var(--sub); font-size: 15px; }
.col-before li::before { content: "–"; position: absolute; left: 6px; color: var(--faint); font-weight: 700; }
.col-after li::before { content: "✓"; position: absolute; left: 2px; color: var(--indigo); font-weight: 700; }
.col-after li strong { color: var(--ink); }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ─── Graphe interactif ─── */
.graph-explorer { margin-top: 44px; }
.graph-nodes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gnode {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: #CBD5E1; font: 600 14.5px "Inter", sans-serif;
  transition: all .2s ease;
}
.gnode:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.gnode.active { background: linear-gradient(135deg, var(--indigo-deep), var(--violet)); color: #fff; border-color: transparent; box-shadow: 0 8px 24px -8px rgba(99,102,241,.7); }
.gnode-risk.active { background: linear-gradient(135deg, #B45309, #D97706); box-shadow: 0 8px 24px -8px rgba(217,119,6,.6); }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-slate { background: #94A3B8; } .dot-indigo { background: #818CF8; }
.dot-violet { background: #A78BFA; } .dot-emerald { background: #34D399; } .dot-amber { background: #FBBF24; }

.graph-panel {
  margin: 30px auto 0; max-width: 820px; min-height: 240px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 34px 38px;
  animation: fadeIn .35s ease;
}
.graph-panel h3 { font-size: 24px; margin-bottom: 4px; }
.graph-panel .gp-ex { color: #A5B4FC; font-size: 14px; font-style: italic; margin-bottom: 14px; }
.graph-panel p { color: #B6C2D6; font-size: 15.5px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gp-chips span {
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: rgba(99,102,241,.16); color: #C7D2FE; border: 1px solid rgba(99,102,241,.3);
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ─── Tour du produit ─── */
.tour { display: grid; grid-template-columns: 300px 1fr; gap: 30px; margin-top: 44px; align-items: start; }
.tour-tabs { display: flex; flex-direction: column; gap: 8px; }
.ttab {
  text-align: left; padding: 13px 18px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  transition: all .18s ease; font-family: "Inter", sans-serif;
}
.ttab strong { display: block; font-size: 14.5px; color: var(--ink); }
.ttab span { display: block; font-size: 12.5px; color: var(--faint); margin-top: 1px; }
.ttab:hover { background: var(--tint); }
.ttab.active { background: linear-gradient(160deg, var(--wash-indigo-a), var(--wash-indigo-b)); border-color: #C7D2FE; box-shadow: 0 6px 18px -8px rgba(99,102,241,.35); }
.ttab.active strong { color: var(--indigo-text); }
.tour-stage { position: sticky; top: 90px; }
.tour-stage .browser-frame { cursor: zoom-in; transition: transform .2s ease; }
.tour-stage .browser-frame:hover { transform: translateY(-3px); }
.tour-stage img { transition: opacity .25s ease; }
.tour-stage img.fading { opacity: 0; }
.tour-stage figcaption { margin-top: 14px; color: var(--sub); font-size: 15px; }
.tour-hint { margin-top: 4px; color: var(--faint); font-size: 12.5px; }
@media (max-width: 960px) {
  .tour { grid-template-columns: 1fr; }
  .tour-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 8px; }
  .ttab { min-width: 210px; }
  .tour-stage { position: static; }
}

/* ─── Les trois modules ─── */
.module-row {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px;
  align-items: center; margin-top: 64px;
}
.module-flip .module-figure { order: 2; }
.module-figure { margin: 0; }
.module-figure .browser-frame { cursor: zoom-in; transition: transform .2s ease; }
.module-figure .browser-frame:hover { transform: translateY(-3px); }
.module-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.badge-amber { background: var(--badge-amber-bg); color: var(--badge-amber-fg); border: 1px solid var(--badge-amber-line); }
.badge-indigo { background: var(--badge-indigo-bg); color: var(--badge-indigo-fg); border: 1px solid var(--badge-indigo-line); }
.badge-emerald { background: var(--badge-emerald-bg); color: var(--badge-emerald-fg); border: 1px solid var(--badge-emerald-line); }
.module-text h3 { font-size: 23px; letter-spacing: -.02em; margin-bottom: 12px; line-height: 1.25; }
.module-text > p { color: var(--sub); font-size: 15px; }
.module-points { list-style: none; margin-top: 16px; }
.module-points li { padding: 6px 0 6px 28px; position: relative; color: var(--sub); font-size: 14.5px; }
.module-points li::before { content: "✓"; position: absolute; left: 2px; color: var(--indigo); font-weight: 700; }
.module-case {
  margin-top: 16px; padding: 12px 16px; border-left: 3px solid var(--indigo);
  background: var(--wash-indigo-a); border-radius: 0 10px 10px 0;
  color: var(--ink); font-size: 13.5px;
}
@media (max-width: 960px) {
  .module-row { grid-template-columns: 1fr; gap: 24px; margin-top: 52px; }
  .module-flip .module-figure { order: 0; }
}

/* ─── Cartes IA ─── */
.cards-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
.gcard {
  background: var(--surface); border-radius: var(--radius); padding: 28px 30px;
  box-shadow: var(--shadow); position: relative;
  transition: transform .2s ease;
}
.gcard:hover { transform: translateY(-4px); }
.gnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 14px;
}
.n1 { background: var(--violet); } .n2 { background: var(--indigo); }
.n3 { background: var(--emerald); } .n4 { background: var(--amber); }
.gcard h3 { font-size: 17px; margin-bottom: 6px; }
.gcard p { color: var(--sub); font-size: 14.5px; }
@media (max-width: 720px) { .cards-4 { grid-template-columns: 1fr; } }

/* ─── Cartes conformité ─── */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.ccard {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 28px 30px;
  transition: transform .2s ease, background .2s ease;
}
.ccard:hover { transform: translateY(-4px); background: rgba(255,255,255,.08); }
.ccard h3 { font-size: 17px; margin-bottom: 8px; color: #E0E7FF; }
.ccard p { color: #94A3B8; font-size: 14.5px; }
.ccard p em { color: #C7D2FE; font-style: normal; font-weight: 600; }
.ccard p strong { color: #E0E7FF; }
.ccard code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; color: #C7D2FE;
  background: rgba(99, 102, 241, .16); padding: 1px 6px; border-radius: 5px;
}
@media (max-width: 860px) { .cards-3 { grid-template-columns: 1fr; } }

/* ─── Bandeau de preuve (qualification opérationnelle) ─── */
.proof {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 34px; padding: 26px 30px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(99, 102, 241, .14), rgba(139, 92, 246, .10));
  border: 1px solid rgba(199, 210, 254, .18);
}
.proof-num { text-align: center; }
.proof-num strong {
  display: block; font-size: 40px; font-weight: 800; line-height: 1;
  background: linear-gradient(100deg, #A5B4FC, #6EE7B7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-num span { display: block; margin-top: 8px; color: #94A3B8; font-size: 13.5px; }
@media (max-width: 720px) { .proof { grid-template-columns: 1fr; gap: 24px; } }

/* ─── L'aveu — ce que le logiciel ne peut PAS certifier ─── */
.honesty {
  margin-top: 34px; padding: 28px 32px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid var(--amber);
  background: rgba(255, 255, 255, .04);
}
.honesty h3 { font-size: 18px; color: #FDE68A; margin-bottom: 12px; }
.honesty p { color: #94A3B8; font-size: 14.5px; }
.honesty p + p { margin-top: 12px; }
.honesty strong { color: #E0E7FF; }
.honesty em { color: #C7D2FE; font-style: normal; font-weight: 600; }

/* ─── Périmètre : le fait / ne fait pas, en regard ─── */
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
.scope-col { border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); }
.scope-yes { background: linear-gradient(160deg, var(--wash-emerald-a), var(--wash-emerald-b)); }
.scope-no { background: linear-gradient(160deg, var(--wash-rose-a), var(--wash-rose-b)); }
.scope-col h3 {
  font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 18px;
}
.scope-yes h3 { color: #047857; }
.scope-no h3 { color: var(--danger); }
.scope-col ul { list-style: none; }
.scope-item { padding: 9px 0; border-top: 1px solid rgba(15, 23, 42, .07); }
.scope-item:first-child { border-top: 0; padding-top: 0; }
.scope-item strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.scope-item span { display: block; font-size: 13.5px; color: var(--sub); line-height: 1.5; }
.scope-out {
  margin-top: 28px; padding: 18px 22px;
  border-radius: var(--radius); border-left: 3px solid var(--amber);
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 14.5px; color: var(--sub);
}
.scope-out strong { color: var(--danger); margin-right: 8px; }
@media (max-width: 860px) { .scope { grid-template-columns: 1fr; } }

/* ─── Téléchargements directs ─── */
/* Pas de formulaire, pas d'adresse à laisser : c'est le geste qui rend la promesse
   « lisez-la avant de vous engager » crédible. Un mur de capture de leads la démentirait. */
.telechargements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.dl {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease;
}
.dl:hover { transform: translateY(-3px); border-color: var(--indigo); }
.dl-ico {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--indigo); color: #fff; font-size: 16px; font-weight: 700;
}
.dl-mail .dl-ico { background: var(--slate-ico, #64748B); }

/* Les mêmes boutons, posés sur la section sombre de la conformité. */
.telechargements-un { grid-template-columns: minmax(0, 520px); margin-top: 32px; }
/* Cinq documents de conformité : trois colonnes, la seconde rangée en compte deux. */
.telechargements-sombre { grid-template-columns: repeat(3, 1fr); margin-top: 22px; }
@media (max-width: 980px) { .telechargements-sombre { grid-template-columns: 1fr; } }
.dl-mail .dl-ico { font-size: 18px; }
.dl-sombre {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); box-shadow: none;
}
.dl-sombre:hover { border-color: #A5B4FC; background: rgba(255, 255, 255, .1); }
.dl-sombre .dl-txt strong { color: #E0E7FF; }
.dl-sombre .dl-txt em { color: #94A3B8; }
.dl-txt { display: block; }
.dl-txt strong { display: block; font-size: 15px; color: var(--ink); }
.dl-txt em { display: block; font-style: normal; font-size: 13px; color: var(--sub); margin-top: 2px; }
@media (max-width: 860px) { .telechargements { grid-template-columns: 1fr; } }

/* ─── Tableau positionnement ─── */
.table-wrap { margin-top: 40px; overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
/* LA LARGEUR MINIMALE APPARTIENT AU TABLEAU COMPARATIF, PAS À TOUTES LES TABLES.
   Posée sur le sélecteur générique, elle s'appliquait aussi à la table des identifiants de
   la page de démonstration — qui, elle, n'a pas d'enveloppe .table-wrap en overflow-x.
   Mesuré à 390 px : la page débordait de 339 px et la colonne « Rôle » commençait à x=371,
   hors écran. L'accommodation mobile plus bas (masquage de la 3e colonne) était écrite et
   sans effet : la largeur minimale l'annulait. */
.table-wrap table { min-width: 680px; }
th, td { padding: 15px 18px; font-size: 14px; text-align: center; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
thead th { background: var(--dark2); color: #fff; font-weight: 600; font-size: 13px; }
td { color: var(--faint); }
td:first-child { color: var(--ink); font-weight: 500; }
td em { color: var(--faint); font-size: 12.5px; }
td.ok { color: var(--emerald); font-weight: 700; }
.filum-row td { background: var(--wash-indigo-a); }
.filum-row td:first-child { color: var(--indigo-text); font-weight: 800; }

/* ─── FAQ ─── */
.faq { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow);
  padding: 0 26px; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0;
  font-weight: 600; font-size: 16px; position: relative; padding-right: 40px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 400; color: var(--indigo); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--sub); font-size: 15px; padding-bottom: 22px; }

/* ─── CTA final ─── */
.cta-final {
  background: linear-gradient(120deg, var(--cta-a), var(--cta-b) 60%, var(--cta-c));
  color: #fff; text-align: center; padding: 96px 0;
}
.cta-final h2 { font-size: clamp(28px, 4.5vw, 46px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.cta-final .ital { font-style: italic; opacity: .9; }
.cta-note { margin-top: 20px; color: rgba(255,255,255,.75); font-size: 15px; }

/* ─── Pied ─── */
footer { background: var(--dark); color: #94A3B8; padding: 60px 0; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 14.5px; }
.footer-contact a { color: #A5B4FC; font-weight: 600; }
.footer-contact a:hover { text-decoration: underline; }
.footer-legal { font-size: 12.5px; color: var(--faint-sombre); }

/* ─── Lightbox ─── */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: rgba(2, 6, 23, .92); padding: 4vh 4vw; cursor: zoom-out;
}
.lightbox.open { display: flex; animation: fadeIn .2s ease; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: var(--shadow-lg); }
.lightbox-close {
  position: absolute; top: 22px; right: 28px; z-index: 101;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  color: #fff; width: 42px; height: 42px; border-radius: 50%;
  font-size: 17px; cursor: pointer; transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

/* ══════════════════════════════════════════════════════════════════════════════
   PAGES SECONDAIRES — étude de cas, validation continue, position IA, démo
   ══════════════════════════════════════════════════════════════════════════════

   POURQUOI CE BLOC EXISTE. Ces règles vivaient dans un <style> propre à chaque page, écrit
   par le générateur. Quatre blocs, 8 Ko, quinze couleurs de plus que celles d'ici dont
   sept redéclarées à l'identique — et la même règle #nav copiée-collée QUATRE fois. Le
   même composant y portait quatre noms (.cas-chapo, .vc-chapo, .ia-chapo, .demo-chapo) et
   ses valeurs avaient déjà divergé sans que personne l'ait décidé : 62ch, 64ch, 66ch.

   Les sélecteurs sont donc REGROUPÉS ici. Les noms de classes ne changent pas : ce
   déplacement ne doit rien modifier au rendu, et une passe qui refait tout à la fois ne se
   prouve plus. Là où une valeur diffère réellement, elle est écrite à part — avec la
   raison quand il y en a une, et l'aveu quand il n'y en a pas.

   ─────────────────────────────────────────────────────────────────────────────
   LA PALETTE SECONDAIRE, ET L'ÉCART QU'ELLE RÉVÈLE

   Ces pages emploient une palette VOISINE de celle du site sans lui être identique :
   #E6E7F0 ici contre --line: #E2E8F0 là, pour le rôle de bordure ; #F1F2F7 contre
   --tint: #F1F5F9, pour le même fond discret. L'écart n'a pas été décidé, il s'est
   installé. Il est conservé tel quel dans cette passe — qui ne change rien visuellement —
   et NOMMÉ pour qu'il cesse d'être invisible. L'unifier est une décision d'un seul mot,
   qui ne peut se prendre qu'une fois l'écart posé sous les yeux.
   ────────────────────────────────────────────────────────────────────────────── */
:root {
  --line-2: #E6E7F0;    /* bordure des pages secondaires — cf. --line: #E2E8F0 */
  --tint-2: #F1F2F7;    /* fond discret                  — cf. --tint: #F1F5F9 */
  --surface-2: #F4F5FB; /* fond de code                  — sans équivalent principal */
  /* --sub-2 etait de la derive : #64748B, entre --sub et --faint, sans role propre,
     et insuffisant sur fond teinte (4,34). Il rejoint --sub. */
  --sub-2: #475569;
  --indigo-2: #4338CA;  /* accent                        — cf. --indigo-deep: #4F46E5 */
  --indigo-pale: #ECEAFD;
  --amber-2: #B45309;   /* alerte                        — cf. --amber: #F59E0B */
  --emerald-2: #047857;
  --emerald-pale: #E2F3EC;
  --ink-2: #334155;
  --violet-pale: #C7C5F5;
  --nav-opaque: rgba(11, 18, 32, .92);
}

/* LA BARRE DE NAVIGATION. Elle est dessinée pour un héros SOMBRE : ses liens sont clairs
   et son fond ne s'opacifie qu'au défilement, par script.js. Les pages secondaires n'ont
   pas de héros sombre et ne chargent pas ce script — sans cette règle, leurs liens sont
   illisibles sur fond clair. Constaté en lisant le rendu, pas le code.

   Une seule déclaration, portée par un attribut du <body>, là où il y en avait quatre. */
body[data-page="secondaire"] #nav { background: var(--nav-opaque); backdrop-filter: blur(14px); }

/* ── Le héros des pages secondaires ── */
.cas-hero, .vc-hero, .ia-hero, .demo-hero { padding: 128px 0 40px; }
/* La page de démonstration enchaîne sur un bloc d'identifiants : elle respire moins bas. */
.demo-hero { padding-bottom: 32px; }

.cas-hero h1, .vc-hero h1, .ia-hero h1, .demo-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.15; margin: 12px 0 16px;
}
/* La mesure du titre suit la longueur réelle de chacun : « Entrez, c'est ouvert. »
   n'appelle pas la même largeur que « L'IA dans Filum — trois points d'appel ». */
.cas-hero h1 { max-width: 20ch; }
.vc-hero h1, .demo-hero h1 { max-width: 22ch; }
.ia-hero h1 { max-width: 24ch; }

.cas-surtitre, .vc-surtitre, .ia-surtitre, .demo-surtitre {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--indigo-2);
}

.cas-chapo, .vc-chapo, .ia-chapo, .demo-chapo { font-size: 1.05rem; color: var(--sub); }
.cas-chapo, .vc-chapo, .ia-chapo, .demo-chapo { max-width: var(--mesure); }
/* COLONNE DE LECTURE — a ne pas confondre avec .container-narrow (780px), qui est une
   largeur de MISE EN PAGE. Ici il s'agit de la MESURE : un nombre de caracteres par
   ligne. C'est pourquoi l'unite est le ch et non le pixel — 66 caracteres restent 66
   caracteres quelle que soit la taille du texte, ce qu'une valeur en pixels ne tient pas. */
.container-lecture { max-width: var(--mesure); }
/* Un texte CENTRE se lit plus etroit qu'un texte aligne a gauche : l'oeil doit retrouver
   le debut de la ligne suivante sans point d'appui. D'ou une mesure a part, et assumee. */
.lead-centre { max-width: 56ch; margin: 14px auto 26px; }
.ia-chapo strong, .demo-chapo strong { color: var(--strong); }

/* ── Les compteurs de tête (étude de cas et validation continue) ── */
.cas-chiffres, .vc-chiffres { display: flex; flex-wrap: wrap; gap: 28px; margin: 30px 0 8px; }
.cas-chiffre b, .vc-chiffre b { display: block; font-size: 1.7rem; color: var(--indigo-2); line-height: 1.1; }
.cas-chiffre span, .vc-chiffre span { font-size: .82rem; color: var(--sub-2); }

/* ── Étude de cas : les défauts trouvés ── */
.defaut { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line-2); }
.defaut-etape { font: 700 .75rem/1.6 ui-monospace, Consolas, monospace; color: var(--indigo-2); background: var(--indigo-pale); border-radius: 6px; height: fit-content; text-align: center; padding: 3px 0; }
.defaut-corps h3 { margin: 0 0 6px; font-size: 1.02rem; }
.defaut-conseq { margin: 0 0 8px; color: var(--sub); font-size: .93rem; }
.defaut-trait { margin: 0; color: var(--ink-2); font-size: .9rem; }
.defaut-trait strong { color: var(--emerald-2); }
.cas-acquis li { margin-bottom: 9px; color: var(--sub); }

/* ── Validation continue : les gardes ── */
.garde { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line-2); }
.garde-rang { font: 700 1.15rem/1 ui-monospace, Consolas, monospace; color: var(--indigo-2); background: var(--indigo-pale); border-radius: 999px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.garde-corps h3 { margin: 0 0 10px; font-size: 1.12rem; }
.garde-q { margin: 0 0 12px; color: var(--ink-2); font-size: .96rem; font-style: italic; border-left: 3px solid var(--violet-pale); padding-left: 12px; }
.garde-quoi { margin: 0 0 10px; color: var(--sub); font-size: .94rem; }
.garde-attrape { margin: 0 0 10px; color: var(--sub); font-size: .92rem; }
.garde-attrape strong { color: var(--amber-2); }
.garde-effet { margin: 0; color: var(--ink-2); font-size: .92rem; }
.vc-limites li { margin-bottom: 11px; color: var(--sub); }

/* ── Position IA : les points d'appel et les verrous ── */
.ia-appel { border: 1px solid var(--line-2); border-radius: 14px; padding: 22px 24px; margin-bottom: 14px; background: var(--bg); }
.ia-appel h3 { margin: 0 0 14px; font-size: 1.05rem; }
.ia-ligne { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 8px 0; }
.ia-ligne dt { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sub-2); padding-top: 2px; }
.ia-ligne dd { margin: 0; font-size: .93rem; color: var(--sub); }
.ia-verrou dd strong, .ia-ligne dd strong { color: var(--strong); }
.ia-appel .ia-verrou dt { color: var(--emerald-2); }
.ia-appel .ia-verrou dd { color: var(--ink-2); }
.verrou { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line-2); }
.verrou-puce { width: 36px; height: 36px; border-radius: 999px; background: var(--emerald-pale); color: var(--emerald-2); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.verrou h3 { margin: 0 0 8px; font-size: 1.08rem; }
.verrou .v-quoi { margin: 0 0 8px; color: var(--ink-2); font-size: .95rem; }
.verrou .v-pourquoi { margin: 0 0 8px; color: var(--sub-2); font-size: .9rem; }
.verrou .v-ou { margin: 0; color: var(--indigo-2); font-size: .86rem; }
.qr { border-top: 1px solid var(--line-2); padding: 18px 0; }
.qr h3 { margin: 0 0 6px; font-size: .98rem; color: var(--strong); }
.qr p { margin: 0; color: var(--sub); font-size: .93rem; }

/* ── Limites et avertissements : même composant, deux noms hérités ── */
.limite, .avert { border-left: 3px solid var(--amber-2); padding: 4px 0 4px 16px; margin-bottom: 22px; }
.limite h3, .avert h3 { margin: 0 0 6px; font-size: 1rem; color: var(--strong); }
.limite p, .avert p { margin: 0; color: var(--sub); font-size: .93rem; }

/* ── Démonstration : identifiants publiés ── */
.demo-cta { margin: 26px 0 6px; }
.demo-note { font-size: .86rem; color: var(--sub-2); margin: 0; }
.demo-cles { border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg); padding: 6px 24px 18px; margin: 26px 0 8px; }
.demo-cles h2 { font-size: 1.05rem; margin: 18px 0 4px; }
.demo-cles p.sous { margin: 0 0 14px; color: var(--sub-2); font-size: .9rem; }
table.demo-comptes { width: 100%; border-collapse: collapse; font-size: .92rem; }
/* L'en-tete de cette table n'est pas un bandeau : c'est un intitule discret pose sur la
   carte. Sans cette remise a zero, il heritait du fond sombre de « thead th » — pense
   pour le tableau comparatif de l'accueil — et son texte y tombait a 2,36. */
table.demo-comptes thead th { background: transparent; }
table.demo-comptes th { text-align: left; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sub-2); font-weight: 700; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line-2); }
table.demo-comptes td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--tint-2); color: var(--sub); }
table.demo-comptes td.ident { font-family: ui-monospace, Consolas, monospace; color: var(--strong); font-weight: 600; }
.demo-mdp { font-family: ui-monospace, Consolas, monospace; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 8px; color: var(--strong); }

@media (max-width: 640px) {
  .defaut { grid-template-columns: 1fr; gap: 6px; }
  .defaut-etape { display: inline-block; padding: 3px 10px; }
  .garde { grid-template-columns: 1fr; gap: 10px; }
  .ia-ligne, .verrou { grid-template-columns: 1fr; gap: 6px; }
  table.demo-comptes th:last-child, table.demo-comptes td:last-child { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODE SOMBRE
   ══════════════════════════════════════════════════════════════════════════════

   LA DÉCISION QUI COMMANDE TOUT LE RESTE. Ce site ne se contente pas d'être clair : il
   ALTERNE. Le héros est sombre, les sections de preuve sont sombres, et c'est ce rythme
   qui découpe la page. Inverser bêtement l'écraserait — tout deviendrait sombre, et les
   bandes qui structurent la lecture disparaîtraient dans un aplat.

   Le rythme est donc conservé en RETOURNANT SON SENS. En clair, une section sombre
   s'enfonce sous une page blanche. En sombre, on ne peut pas s'enfoncer sous un fond déjà
   presque noir : les sections sombres se SOULÈVENT au-dessus de la page, et les cartes se
   soulèvent au-dessus des sections. Trois plans, comme avant, empilés dans l'autre sens.

        clair :  page #FFFFFF  >  section #0F172A  >  carte #FFFFFF
        sombre : page #0E1017  <  section #171A25  <  carte #1B1F2C

   CE QUI NE BASCULE PAS, ET POURQUOI. Le bouton clair du héros reste blanc : il est posé
   sur un fond sombre dans les deux modes, et le retourner l'y ferait disparaître. Les
   pastilles décoratives ambre gardent leur couleur — ce sont des points de repère, pas des
   surfaces. Et le dégradé de l'appel final garde ses trois teintes riches : il porte du
   texte blanc, et l'éclaircir rendrait ce texte illisible.

   TROIS RÔLES POUR UN JETON. --indigo-deep servait à la fois de texte sur bouton blanc, de
   texte sur pastille claire et de teinte de dégradé. Impossible de le basculer sans en
   casser un : la pastille a reçu son propre --badge-indigo-fg, le dégradé ses --cta-*.
   L'écrasement était invisible tant qu'il n'existait qu'un seul mode.

   PAS DE BASCULE MANUELLE. Le site suit la préférence du système et rien d'autre. Un
   sélecteur de thème demande un état à conserver, donc un stockage, donc une bannière de
   consentement dans plusieurs juridictions — beaucoup de surface pour un réglage que le
   système expose déjà.
   ────────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Les trois plans */
    --bg: #0E1017;
    --dark: #171A25;   /* le héros et les bandes de preuve, SOULEVÉS au lieu d'enfoncés */
    --dark2: #171A25;
    --surface: #1B1F2C; /* les cartes, au-dessus des bandes */
    --tint: #151821;
    --line: #272B38;

    /* Le texte. --faint reste lisible : c'est lui qui porte les mentions de bas de carte,
       et le descendre sous #7F899F les ferait disparaître à la première lumière du jour. */
    --ink: #E7E9F2;
    --sub: #A9B1C4;
    --faint: #8A93A8;
    --faint-sombre: #8A93A8;

    /* Les accents s'éclaircissent : posés sur un fond sombre, leurs valeurs claires
       n'atteignent plus le contraste d'un texte de corps. */
    --indigo: #8D90F8;
    --violet: #A78BFA;
    --emerald: #34D399;
    --amber: #FBBF24;

    /* Les teintes de fond deviennent des VOILES : sur clair elles étaient des lavis
       presque blancs, sur sombre elles doivent rester des lavis presque noirs, sinon
       elles crèvent la page. */
    --wash-indigo-a: #1C1E36;
    --wash-indigo-b: #211E38;
    --wash-emerald-a: #10261F;
    --wash-emerald-b: #122A22;
    --wash-rose-a: #2A1A1C;
    --wash-rose-b: #2B2018;

    --badge-amber-bg: #33260F;  --badge-amber-fg: #FBBF24;  --badge-amber-line: #4A380F;
    --badge-indigo-bg: #23244A; --badge-indigo-fg: #A5A8FB; --badge-indigo-line: #33356B;
    --badge-emerald-bg: #10312A; --badge-emerald-fg: #34D399; --badge-emerald-line: #17493C;

    /* L'ombre portée ne se voit presque pas sur un fond sombre : la profondeur vient du
       soulèvement des surfaces et du filet. On la garde plus dense et plus courte, pour
       le décollement, sans compter dessus. */
    /* LES RÔLES SÉPARÉS. Trois jetons servaient chacun à deux choses, ce qui ne se
       voyait pas tant qu'un seul mode existait : --dark était le fond des bandes ET
       l'encre des passages en gras ; --indigo-deep était le texte du bouton blanc ET
       le texte sur lavis clair. Basculer l'un cassait l'autre — le détecteur de texte
       invisible l'a montré avant la mise en ligne, sur 39 éléments d'une seule page. */
    --strong: #F2F4FA;      /* l'emphase s'éclaircit ; --dark, lui, reste un fond */
    --indigo-text: #A5A8FB; /* lisible sur lavis sombre ; --indigo-deep reste riche */
    --danger: #FCA5A5;      /* le rouge des mises en garde, remonté pour fond sombre */

    /* LE TEXTE POSÉ SUR UN APLAT D'ACCENT ne suit PAS l'accent. Les accents ont été
       éclaircis pour rester lisibles EN TANT QUE TEXTE sur fond sombre ; le blanc qui
       se posait dessus est alors passé à 1,7 de contraste. Sur un aplat clair, on
       écrit sombre — c'est l'inverse du réflexe, et c'est ce que le calcul impose. */
    --on-accent: #0E1017;
    --slate-ico: #9AA4B8;

    --shadow: 0 10px 30px -14px rgba(0, 0, 0, .75);
    --shadow-lg: 0 26px 60px -24px rgba(0, 0, 0, .85);

    /* Palette des pages secondaires — mêmes rôles, mêmes noms. */
    --line-2: #272B38;
    --tint-2: #151821;
    --surface-2: #20242F;
    --sub-2: #98A1B5;
    --indigo-2: #A5A8FB;
    --indigo-pale: #24244C;
    --amber-2: #FBBF24;
    --emerald-2: #34D399;
    --emerald-pale: #10312A;
    --ink-2: #C3CAD8;
    --violet-pale: #45428F;
  }

  /* Le héros : son dégradé partait d'un indigo profond vers --dark. Les deux ayant
     remonté, il garde sa courbe et son rôle de bande d'ouverture. */
  .hero { background: radial-gradient(1200px 600px at 70% -10%, #232063 0%, var(--dark) 55%); }

  /* Le filet des bandes sombres. En clair, une section sombre se détache par sa couleur
     seule. En sombre, l'écart avec la page est plus mince : un filet le rend franc. */
  .stats, .section-dark { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

  /* Une carte blanche sur page blanche se lisait par son ombre. Soulevée sur fond sombre,
     elle se lit par son filet — l'ombre seule ne suffirait plus. */
  .gcard, .dl, .faq details, table { border: 1px solid var(--line); }

  /* Les captures d'écran sont des images CLAIRES, et elles le resteront : ce sont des
     enregistrements du produit, pas des éléments de décor. On les pose sur un cadre qui
     assume le contraste au lieu de le subir, et on ne les assombrit surtout pas — une
     capture retouchée dans un dossier commercial est une capture qui ne prouve rien. */
  .shot, .shot img, .lightbox img { border-color: var(--line); }

  /* Les aplats d'accent portent une encre sombre en mode sombre — voir --on-accent. */
  /* Seules les pastilles réellement REMPLIES d'un accent reçoivent l'encre sombre.
     .proof-num strong en est exclu : c'est du texte PEINT PAR UN DÉGRADÉ
     (background-clip: text; color: transparent). Lui imposer une couleur écrase le
     transparent, tue le dégradé et rend le chiffre invisible sur la page — et le
     détecteur de texte invisible ne l'aurait pas vu, puisqu'il ignore les fonds en
     dégradé. Trouvé en relisant la feuille, pas en mesurant. */
  .dl-ico, .gnum { color: var(--on-accent); }
  /* La pastille de courriel n'est pas remplie d'un accent mais d'un gris moyen, qui ne
     donne le contraste ni au blanc ni au noir. On la remonte pour qu'elle le donne. */
  .dl-mail .dl-ico { background: var(--slate-ico); }

}