/* ═══════════════════════════════════════════════════════════════════════
   Pages de contenu de www (scanner-adresse, alertes-dpe, methodologie).

   Même peau que la page d'accueil : les blocs 1 à 5 et l'en-tête sont
   RECOPIÉS de landing/index.html (dont les tokens sont eux-mêmes recopiés
   de src/app/globals.css). La page d'accueil garde son CSS en ligne, pour
   son premier rendu : un changement de token ou d'en-tête se reporte dans
   les deux fichiers. Le bloc 8, en fin de fichier, est propre à ces pages.

   Fichier servi en cache immuable 30 jours (nginx.conf) : chaque page le
   charge avec un ?v= à incrémenter à chaque modification.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --bg:            #16191A;   /* --background */
  --bg-subtle:     #1E2122;   /* --background-subtle : Tarifs, pied de page */
  --bg-muted:      #242728;   /* --background-muted : entête de tableau, piste d'onglets */
  --bg-elevated:   #2C2F30;   /* --background-elevated : carte Pro */
  --surface:       #1D2122;   /* --surface : cartes, lignes de tableau */
  --surface-2:     #212526;   /* --surface-secondary : barre de fenêtre */
  --surface-3:     #262A2B;   /* --surface-group : fond de graphe */

  --text:          #E1E5E4;   /* --text-primary */
  --text-2:        #B2BAB8;   /* --text-secondary */
  --text-muted:    #8E9795;   /* --text-muted */
  --text-dim:      #737C7A;   /* --text-disabled */
  --text-faint:    #5B6362;   /* --text-faint : croix, numéros d'étape */

  --accent:        #00FF88;   /* MATIÈRE : aplat, point, coche, barre */
  --accent-rgb:    0 255 136;
  --accent-dim:    #00E077;
  --accent-on:     #04140C;   /* encre SUR le vert */
  --accent-ink:    #5CFFB4;   /* le vert quand il porte du TEXTE */
  --accent-wash:   #194030;
  --accent-line:   #146441;
  --green-line:    #5CFFB4;   /* traits fins, filets, dégradé du logo */

  --blue:          #0A84FF;   /* MATIÈRE : emprises, barres */
  --blue-ink:      #40A0FF;   /* le bleu en TEXTE (4,44:1 sinon) */
  --red-ink:       #FDA4AF;
  --warn-ink:      #FF9A5C;
  --warn-wash:     #3D2E24;
  --warn-line:     #653D26;

  --border-subtle: #2A2F30;
  --border:        #333839;
  --border-strong: #3F4546;

  /* Colonne de contenu : même largeur que la barre de navigation, pour que
     le corps de page tombe exactement sur les bords du bandeau collant. */
  --col:           1300px;
  /* Gouttière latérale du corps de page. Elle passe à 16 px sous 960 px pour
     rejoindre les bords de la barre de navigation (`.header-shell`, padding
     0 16px) : en dessous, le contenu se lisait plus étroit que le bandeau
     posé au-dessus de lui. Elle est en variable parce que plusieurs sections
     portent leur padding en style inline, hors de portée des media queries. */
  --gut:           40px;

  --card-border:   transparent;
  --shadow-card:   0 1px 2px rgb(0 0 0 / .5), 0 14px 34px rgb(0 0 0 / .4);
  --shadow-panel:  0 2px 8px rgb(0 0 0 / .55), 0 28px 70px rgb(0 0 0 / .5);
  --glow-text:     rgba(92, 255, 180, .42);
  --spots:         1;         /* dégradés radiaux verts, dans les deux thèmes */
  --glass-fill:    rgb(29 33 34 / .72);
  --glass-line:    rgb(255 255 255 / .09);
  --overlay:       255 255 255;
}

:root[data-theme="light"] {
  --bg: #FFFFFF; --bg-subtle: #FAFAFA; --bg-muted: #F4F4F5; --bg-elevated: #EBEBED;
  --surface: #FFFFFF; --surface-2: #F7F9F8; --surface-3: #F1F3F2;

  --text: #111113; --text-2: #2D2D32; --text-muted: #5C5C64;
  --text-dim: #A8A8AF; --text-faint: #C2C9D1;

  --accent: #00FF88; --accent-rgb: 0 255 136; --accent-dim: #00E077; --accent-on: #04140C;
  /* Le vert de marque fait 1,4:1 sur blanc et #16A34A seulement 3,3:1 :
     trop peu pour du 11 px bold. L'encre verte passe donc à #15803D (5,0:1),
     et #16A34A reste réservé aux TRAITS, où 3:1 suffit. */
  --accent-ink: #15803D;
  --accent-wash: #E8FFF3; --accent-line: #B6F5D5; --green-line: #16A34A;

  --blue: #0066CC; --blue-ink: #0066CC; --red-ink: #BE123C;
  --warn-ink: #C2410C; --warn-wash: #FFF2E8; --warn-line: #FFD2B0;

  --border-subtle: #F1F3F2; --border: #EAECEB; --border-strong: #DADEDC;

  --card-border: #EAECEB;
  --shadow-card: none;
  --shadow-panel: 0 8px 32px rgb(11 13 12 / .10);
  --glow-text: transparent;
  /* Les taches vertes vivent aussi en clair (Théo, 08/08/2026) : éteintes,
     la page perdait sa couleur de marque au thème clair. Le glow TEXTE,
     lui, reste sombre uniquement. */
  --spots: 1;
  --glass-fill: rgb(255 255 255 / .72); --glass-line: rgb(17 17 19 / .07);
  --overlay: 0 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. RESET ET BASE
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent); }
:root[data-theme="light"] a:hover { color: var(--green-line); }
button { font: inherit; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--accent); color: var(--accent-on);
  padding: 12px 18px; border-radius: 10px; font-weight: 700;
}
.skip:focus { left: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHIE
   ═══════════════════════════════════════════════════════════════════════ */
.h1 { font-weight:800;font-size:68px;line-height:1.03; letter-spacing: -.035em; margin: 0 0 18px; text-wrap: balance; }
.h1 .h1__soft { font-weight: 400; color: var(--text-2); }
/* Le titre du héros nomme les quatre outils : 60 px pour tenir sur deux
   lignes dans la colonne élargie, sans tomber à trois. Les paliers de
   .h1 declares plus bas reprennent la main sous 1180 px. */
.h1--hero { font-size: 60px; }
.h2 { font-weight:800;font-size:42px;line-height:1.1; letter-spacing: -.03em; margin: 0 0 16px; text-wrap: balance; }
.h2--scene { font-size: 46px; line-height: 1.08; }
.h2--cta { font-size: 50px; line-height: 1.06; }
.h3 { font-weight:800;font-size:27px;line-height:1.15; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
.h3--card { font-size: 26px; line-height: 1.2; }
/* Échelle B du design system : corps de lecture 14 medium, atténué 13,
   petits contextes 12. Aucune phrase sous 12 px ; le 10 px ne sert qu'aux
   badges compacts et aux légendes de graphe. Rien en graisse 400. */
.lead { font-weight:500;font-size:17px;line-height:1.6; color: var(--text-muted); margin: 0 0 24px; text-wrap: pretty; }
.lead--lg { font-size: 18px; }
.body { font-weight:500;font-size:15px;line-height:1.65; color: var(--text-muted); margin: 0 0 18px; text-wrap: pretty; }
.small { font-weight:500;font-size:13px;line-height:1.5; color: var(--text-muted); }
.micro { font-weight:500;font-size:12px;line-height:1.4; color: var(--text-dim); }
/* Réservé aux badges et légendes de graphe, jamais à une phrase. */
.nano { font-weight:600;font-size:10px;line-height:1.2; color: var(--text-dim); }
.quote { font-weight:400;font-size:34px;line-height:1.35; color: var(--text); letter-spacing: -.02em; margin: 0; text-wrap: pretty; text-indent: -.42em; }
.num { font-weight:800;font-size:46px;line-height:1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* Caption unique du design system : 11 px bold uppercase, tracking .08em. */
.eyebrow { font-weight:700;font-size:11px;line-height:1.45; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 16px; display: block; }
/* Séparateur des kickers de scène : nom de l'outil, boulette verte, promesse. */
.eyebrow__dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin: 0 5px; vertical-align: 2px; }
.eyebrow--accent { color: var(--accent-ink); }
.eyeline { display: block; height: 1px; width: 34px; margin-top: 7px; background: var(--green-line); transform-origin: 0 50%; }
.eyeline--center { margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   4. MISE EN PAGE
   ═══════════════════════════════════════════════════════════════════════ */
section { padding: 80px var(--gut); position: relative; }
.wrap { max-width: var(--col); margin: 0 auto; }
/* Le héros tient au moins les deux tiers de l'écran : sous cette hauteur il
   se lit comme un bandeau, pas comme une entrée. Le min-height est en svh
   pour ne pas sauter quand la barre d'URL mobile se rétracte, et l'air
   interne est en clamp indexé sur la hauteur : sur un portable court, les
   valeurs plancher rendent exactement l'espacement d'avant, et rien ne sort
   de l'écran. Sur grand écran, le bloc se centre dans la place qui reste. */
.wrap--hero { max-width: 1080px; min-height: 62svh; display: flex; flex-direction: column; justify-content: center; }
.wrap--pricing { max-width: 1040px; }
.wrap--quote { max-width: 940px; }
.wrap--faq { max-width: 880px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 40px; align-items: center; }
.grid-2--flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: 44px; }
.stack { display: flex; flex-direction: column; gap: 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   5. COMPOSANTS
   ═══════════════════════════════════════════════════════════════════════ */
/* Le logo est un fichier, jamais du texte remis en forme : même wordmark que
   l'application (source public/brand/), en deux encres selon le thème. */
.logo { display: inline-block; height: 24px; width: auto; vertical-align: middle; }
.logo--sm { height: 18px; }
:root .logo--light, :root[data-theme="light"] .logo--dark { display: none; }
:root[data-theme="light"] .logo--light { display: inline-block; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; white-space: nowrap; border-radius: 12px;
  font-weight:700;font-size:16px;line-height:1; padding: 18px 28px; min-height: 44px;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: var(--accent-on); }
.btn--primary:hover { color: var(--accent-on); box-shadow: 0 12px 34px rgb(var(--overlay) / .18); }
.btn--ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border-strong); font-weight: 600; }
.btn--ghost:hover { color: var(--text); background: rgb(var(--overlay) / .05); border-color: var(--accent-line); }
.btn--sm { font-size: 13.5px; padding: 11px 16px; border-radius: 10px; }
.btn--block { display: flex; width: 100%; font-size: 15px; padding: 16px; }

.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 20px; box-shadow: var(--shadow-card); }
.lift { transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
.lift:hover { transform: translateY(-3px); border-color: var(--accent-line); }

/* Cartes d'argument : une illustration, un titre, et de quoi comprendre.
   La vignette reprend la tuile à coins arrondis des illustrations, pour que
   l'emplacement tienne debout avant même que les images existent. */
.args { max-width: var(--col); margin: 52px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
/* Cartes horizontales : l'illustration tient la gauche, le texte respire à
   droite. En quatre colonnes, chaque paragraphe tombait sur sept lignes. */
.arg { background: var(--surface); border: 1px solid var(--card-border); border-radius: 20px; padding: 22px 26px 22px 20px;
  box-shadow: var(--shadow-card); display: flex; align-items: flex-start; gap: 18px; min-width: 0; }
.arg__illu { width: 116px; height: 116px; flex: none; margin: -6px 0 -6px -8px; display: block; }
.arg__illu img { width: 100%; height: 100%; object-fit: contain; display: block; }
.arg__corps { min-width: 0; padding-top: 6px; }
.arg__t { font-weight: 800; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; color: var(--text); margin: 0 0 8px; }
.arg__p { margin: 0; font-weight: 500; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.arg__p b { font-weight: 700; color: var(--text-2); }

/* La carte monte, s'ouvre légèrement de face, et se pose sans rebond sec.
   L'illustration arrive juste après, plus vive et avec un dépassement, pour
   qu'on ait l'impression que l'objet tombe DANS la carte déjà là. */
.args { perspective: 900px; }
.args[data-anim].is-in { animation: none; opacity: 1; }
.args[data-anim] .arg { opacity: 0; }
.args[data-anim].is-in .arg { animation: argIn .78s cubic-bezier(.19,1.02,.28,1) both; animation-delay: calc(var(--i, 0) * 105ms); }
.args[data-anim].is-in .arg__illu img { animation: illuIn .74s cubic-bezier(.34,1.42,.5,1) both; animation-delay: calc(var(--i, 0) * 105ms + 170ms); }
@keyframes argIn {
  0%   { opacity: 0; transform: translate3d(0, 26px, 0) scale(.972) rotateX(7deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes illuIn {
  0%   { opacity: 0; transform: scale(.62) rotate(-11deg) translateY(10px); }
  100% { opacity: 1; transform: scale(1) rotate(0) translateY(0); }
}
/* Au survol, l'objet s'anime seul : la carte ne bouge pas, ce qui évite le
   décalage de lecture, mais le regard est attiré. */
@media (hover: hover) {
  .arg__illu img { transition: transform .5s cubic-bezier(.22,1.1,.36,1); }
  .arg:hover .arg__illu img { transform: scale(1.07) rotate(-3deg) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .args[data-anim].is-in .arg,
  .args[data-anim].is-in .arg__illu img { animation: none; opacity: 1; transform: none; }
  .arg:hover .arg__illu img { transform: none; }
}
.scene__cta { max-width: var(--col); margin: 30px auto 0; display: flex; justify-content: center; }


/* FAQ ------------------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 1px; background: var(--border-subtle); border-radius: 14px; overflow: hidden; border: 1px solid var(--card-border); }
.faq-item { background: var(--surface); padding: 20px 22px; }
.faq-item summary { font-weight:600;font-size:15px;line-height:1.4; color: var(--text); display: flex; justify-content: space-between; gap: 14px; min-height: 24px; }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-plus { color: var(--accent-ink); flex: none; display: inline-block; transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item p { font-weight:500;font-size:14px;line-height:1.7; color: var(--text-muted); margin: 14px 0 0; text-wrap: pretty; }
/* Dépliage animé des questions : hauteur interpolée vers auto quand le
   navigateur le sait (Chrome 129+, sinon ouverture instantanée, sans casse). */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size .3s cubic-bezier(.2,.7,.2,1), content-visibility .3s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}


/* En-tête et navigation -------------------------------------------------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; background: linear-gradient(90deg, var(--green-line), var(--accent)); transform-origin: 0 50%; transform: scaleX(0); }
/* En-tête : le vocabulaire de la barre latérale de l'application, pivoté à
   l'horizontale. Panneau détaché des bords, coins de 20 px, items en pilules,
   actif en aplat accent. Le verre est propre à la landing : le design system
   l'a retiré de l'app, mais une page publique le supporte. Jamais
   d'`isolation:isolate` ici, ça casse le flou sur Safari 17. */
.header-shell { position: sticky; top: 12px; z-index: 60; padding: 0 16px; }
header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1300px; margin: 0 auto; padding: 9px 10px 9px 20px;
  border-radius: 20px; border: 1px solid var(--glass-line);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  transition: box-shadow .3s ease;
}
header.is-condensed { box-shadow: var(--shadow-panel); }
header nav { display: flex; align-items: center; gap: 2px; }
header nav a, .nav-drop__btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: 12px;
  font-weight: 600; font-size: 13px; line-height: 1;
  color: var(--text-muted); white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
header nav a svg, .nav-drop__btn svg { width: 15px; height: 15px; flex: none; opacity: .8; }
header nav a:hover, .nav-drop__btn:hover { color: var(--text); background: rgb(var(--overlay) / .06); }
header nav a.nav-active, .nav-drop__btn.nav-active { color: var(--accent-on); background: var(--accent); }
header nav a.nav-active svg, .nav-drop__btn.nav-active svg { opacity: 1; }

/* Menu Fonctionnalités : les quatre outils sous un seul item, en panneau
   détaché. Ouvert au survol et au focus clavier, ou au clic (tactile). */
.nav-drop { position: relative; }
.nav-drop__btn { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.nav-drop__btn .nav-drop__caret { width: 11px; height: 11px; opacity: .6; transition: transform .18s ease; }
.nav-drop__panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 316px; padding: 7px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-panel);
  opacity: 0; visibility: hidden; z-index: 70;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
/* Pont invisible entre le bouton et le panneau, sinon le survol se coupe. */
.nav-drop:hover::after, .nav-drop.is-open::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.nav-drop:hover .nav-drop__panel, .nav-drop:focus-within .nav-drop__panel, .nav-drop.is-open .nav-drop__panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s;
}
.nav-drop:hover .nav-drop__caret, .nav-drop.is-open .nav-drop__caret { transform: rotate(180deg); }
.nav-drop__panel a { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: 12px; white-space: normal; }
.nav-drop__panel a svg { width: 16px; height: 16px; margin-top: 1px; color: var(--accent-ink); opacity: 1; }
.nav-drop__panel b { display: block; font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--text); }
.nav-drop__panel i { display: block; font-style: normal; font-weight: 500; font-size: 11.5px; line-height: 1.4; color: var(--text-dim); margin-top: 2px; }
.nav-drop__panel a.nav-active b, .nav-drop__panel a.nav-active i, .nav-drop__panel a.nav-active svg { color: var(--accent-on); }
.header-right { display: flex; gap: 8px; align-items: center; }
.link-login { font-weight:500;font-size:13.5px;line-height:1; color: var(--text-muted); white-space: nowrap; }
.link-login:hover { color: var(--text); }

/* Un seul bouton : soleil en sombre (ce vers quoi on bascule), lune en clair. */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 0; cursor: pointer; border-radius: 999px;
  background: transparent; color: var(--text-muted);
  transition: background .18s ease, color .18s ease;
}
.theme-toggle:hover { background: var(--bg-muted); color: var(--text); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }

/* Halos verts, dans les deux thèmes : --spots règle leur présence par thème. */
.spot { position: absolute; pointer-events: none; opacity: var(--spots); }
section:has(> .spot) { overflow-x: clip; }
html, body { overflow-x: clip; }
.spot--hero { top: -260px; left: 50%; transform: translateX(-50%); width: 1100px; height: 700px; background: radial-gradient(closest-side, rgb(0 255 136 / .10), transparent 72%); }
.spot--quote { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 820px; height: 420px; background: radial-gradient(ellipse at center, rgb(0 255 136 / .07), transparent 68%); }
.spot--cta { inset: 0; background: radial-gradient(70% 100% at 50% 100%, rgb(0 255 136 / .10), transparent 70%); }
.key-figure-glow { text-shadow: 0 0 20px var(--glow-text); }

.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--glass-fill); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 -1px 0 var(--border);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. ANIMATIONS (recopiées de la page d'accueil), coupées par
   prefers-reduced-motion. Différence voulue : le masquage avant apparition
   ne vaut que si le script a tourné (classe .js posée par pages.js).
   Sans script, ou pour un robot qui lit le HTML, tout est visible.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes riseIn { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
.js [data-anim] { opacity: 0; }
.js [data-anim].is-in { animation: riseIn .7s cubic-bezier(.2,.75,.2,1) both; }
.js .args[data-anim].is-in { animation: none; opacity: 1; }
.args:not([data-anim]) .arg, :root:not(.js) .args .arg { opacity: 1; }
.eyeline { transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.75,.2,1); }
.is-in .eyeline, .eyeline.is-in, :root:not(.js) .eyeline { transform: scaleX(1); }
/* Le haut de page s'anime au chargement, en CSS seul, avec des retards
   courts : le titre est l'élément LCP. */
.hero-in { animation: riseIn .72s cubic-bezier(.2,.75,.2,1) backwards; animation-delay: var(--d, 0s); }
.spot--hero { animation: spotBloom 1.5s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes spotBloom {
  from { opacity: 0; transform: translateX(-50%) scale(.88); }
  to   { opacity: var(--spots); transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-anim], .js [data-anim].is-in { animation: none; opacity: 1; }
  .hero-in { animation: none; }
  .spot--hero { animation: none; opacity: var(--spots); transform: translateX(-50%); }
  .eyeline { transform: scaleX(1); transition: none; }
  .btn:hover, .lift:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. RESPONSIVE (paliers de la page d'accueil)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) { .h1 { font-size: 54px } }
@media (max-width: 960px) {
  html { scroll-padding-top: 64px; }
  header { padding: 12px 18px; }
  header nav { display: none; }
  :root { --gut: 16px; }
  .mobile-cta { display: block; }
  footer { padding-bottom: 132px !important; }
}
@media (max-width: 768px) {
  .h1 { font-size: 38px; line-height: 1.06; }
  .h2 { font-size: 28px; }
  .h3 { font-size: 21px; }
  section { padding-top: 56px; padding-bottom: 56px; }
  .lead, .lead--lg { font-size: 16px; }
  .hero-cta .btn { width: 100%; }
  .hero-cta { flex-direction: column; }
  .link-login { display: none; }
  header { gap: 10px; }
  .header-right { gap: 8px; }
  .btn--sm { padding: 10px 12px; font-size: 12.5px; }
  .theme-toggle { width: 44px; height: 44px; padding: 0; background: transparent; }
  header a[aria-label] { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; }
  .args { grid-template-columns: minmax(0, 1fr); }
  .arg { padding: 18px 20px 18px 14px; gap: 14px; }
  .arg__illu { width: 88px; height: 88px; margin: -4px 0 -4px -6px; }
  .arg__t { font-size: 15px; }
  .faq-item summary { min-height: 44px; align-items: center; }
  footer a, .footer-grid a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 420px) {
  .h1 { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   8. PROPRE AUX PAGES DE CONTENU
   Une colonne de lecture unique (--page), plus étroite que la barre de
   navigation : ces pages se lisent, elles ne se parcourent pas en scènes.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --page: 1080px; }
.wrap--page { max-width: var(--page); margin: 0 auto; }

/* Fil d'Ariane : il tient lieu de retour à l'accueil sur mobile, où la
   barre de navigation disparaît. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 28px; padding: 0; list-style: none;
  font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--text-faint); }

/* Tête de page : la tuile du module (celle de la barre latérale de l'app),
   puis l'eyebrow, le titre et le chapô. */
/* Le halo déborde vers le haut, derrière la barre de navigation : coupé au
   bord de la section, il traçait une ligne nette sous l'en-tête. Le
   débordement horizontal reste coupé (section:has(> .spot)). */
.page-hero { padding: 36px var(--gut) 8px; }
.page-hero__tile { width: 52px; height: 52px; margin: 0 0 18px; }
.page-hero .h1 { font-size: 52px; max-width: 24ch; }
/* Le nom de l'outil tient la première ligne, la promesse passe dessous :
   le titre se lit comme celui de l'accueil, en deux temps. */
.page-hero .h1__soft { display: block; }
.page-hero .lead { max-width: 64ch; }
.page-hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 6px 0 0; }
.page-hero__resa { font-weight: 500; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 0; max-width: 46ch; }

/* « En bref » : les faits clés en rangées libellé / valeur. C'est le bloc
   qu'un assistant de recherche reprend tel quel : une affirmation par
   rangée, vérifiable, sans adjectif. */
.facts { margin: 44px 0 0; padding: 8px 26px; }
.facts dl { margin: 0; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); }
.facts dt, .facts dd { margin: 0; padding: 15px 0; border-top: 1px solid var(--border-subtle); }
.facts dt:first-of-type, .facts dt:first-of-type + dd { border-top: 0; }
.facts dt { font-weight: 700; font-size: 11px; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding-top: 17px; padding-right: 18px; }
.facts dd { font-weight: 500; font-size: 14px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.facts dd b { font-weight: 700; color: var(--text); }

.facts__titre { margin: 16px 0 2px; }

/* Sommaire des pages longues : une ligne de pastilles, au défilement
   horizontal sur mobile plutôt que sur quatre lignes. */
.toc { margin: 8px 0 0; }
.toc ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); font-weight: 600; font-size: 13px; line-height: 1; color: var(--text-2);
  transition: border-color .2s ease, background .2s ease, color .2s ease; }
.toc a:hover { color: var(--text); border-color: var(--accent-line); background: rgb(var(--overlay) / .04); }

/* Intro de section : eyebrow, titre, une phrase. */
.sec { padding: 72px var(--gut) 0; }
.sec--last { padding-bottom: 80px; }
.sec__intro { max-width: 70ch; }
.sec__intro .h2, .prose .h2 { font-size: 36px; }
.sec__intro .body { margin: 0; }
.sec .args { max-width: none; margin-top: 32px; }

/* Étapes : numéro en pastille (celle des scènes de l'accueil), titre, texte. */
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; counter-reset: etape; }
.step { counter-increment: etape; display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; }
.step::before { content: counter(etape); display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 9px; background: var(--accent-wash); color: var(--accent-ink);
  font-weight: 800; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.step__t { display: block; font-weight: 800; font-size: 15px; line-height: 1.35; letter-spacing: -.01em; color: var(--text); margin: 4px 0 6px; }
.step__p { margin: 0; font-weight: 500; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }

/* Texte courant de la méthodologie : sous-titres, paragraphes, listes à
   coche. Jamais centré. */
.prose { max-width: 74ch; }
.prose h3 { font-weight: 800; font-size: 18px; line-height: 1.3; letter-spacing: -.015em; color: var(--text); margin: 34px 0 10px; }
.prose p { font-weight: 500; font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0 0 14px; text-wrap: pretty; }
.prose p b, .prose li b { font-weight: 700; color: var(--text-2); }
.ticks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 24px; font-weight: 500; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ticks--non li::before { background: transparent; border: 1.5px solid var(--text-dim); width: 8px; height: 8px; top: .58em; }

/* Tableau des sources : tête de tableau du design system, rangées au filet
   le plus léger. Sous 768 px chaque rangée devient une fiche. */
.src { margin: 28px 0 0; overflow: hidden; padding: 0; }
.src table { width: 100%; border-collapse: collapse; text-align: left; }
.src th { font-weight: 800; font-size: 12px; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2);
  background: rgb(var(--overlay) / .05); padding: 12px 18px; border-bottom: 1px solid var(--border); }
.src td { vertical-align: top; padding: 14px 18px; border-top: 1px solid var(--border-subtle);
  font-weight: 500; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.src tbody tr:first-child td { border-top: 0; }
.src td:first-child { font-weight: 700; color: var(--text); width: 24%; }
.src td:last-child { width: 18%; font-variant-numeric: tabular-nums; }

/* Voir aussi : les pages voisines, en tuiles cliquables. */
.near { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; }
.near a { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; color: inherit; }
.near a:hover { color: inherit; }
.near img { width: 40px; height: 40px; flex: none; }
.near b { display: block; font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--text); }
.near span span { display: block; font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--text-muted); margin-top: 4px; text-wrap: pretty; }

/* Appel final, repris du bas de la page d'accueil. */
.cta-band { padding: 88px var(--gut) 92px; overflow: hidden; }
.cta-band__in { position: relative; max-width: 760px; margin: 0 auto; }
.cta-band .h2 { text-align: center; }
.cta-band .lead { max-width: 56ch; margin: 0 auto 28px; text-align: left; }
.cta-band .hero-cta { display: flex; gap: 12px; justify-content: center; }

/* Ligne de sources : le seul endroit où les fichiers sont nommés. */
.sources-line { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut) 56px; }
.sources-line p { margin: 0; padding-top: 18px; border-top: 1px solid var(--border-subtle); }

@media (max-width: 960px) {
  .near { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .page-hero { padding-top: 20px; }
  .page-hero .h1 { font-size: 36px; }
  .page-hero__act .btn { width: 100%; }
  .facts { padding: 4px 18px; margin-top: 32px; }
  .facts dl { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding: 14px 0 0; border-top: 1px solid var(--border-subtle); }
  .facts dd { padding: 4px 0 14px; border-top: 0; }
  .facts dt:first-of-type { border-top: 0; }
  .sec { padding-top: 56px; }
  .sec__intro .h2, .prose .h2 { font-size: 26px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { padding: 18px; }
  .prose p { font-size: 14.5px; }
  .src thead { display: none; }
  .src table, .src tbody, .src tr, .src td { display: block; width: auto !important; }
  .src tr { padding: 14px 18px; border-top: 1px solid var(--border-subtle); }
  .src tbody tr:first-child { border-top: 0; }
  .src td { padding: 0; border: 0; }
  .src td + td { margin-top: 4px; }
  .src td:last-child { color: var(--text-muted); font-size: 12.5px; }
  /* La tête de tableau disparaît sur mobile : la fiche nomme elle-même sa
     dernière colonne. */
  .src td:last-child::before { content: "Mise à jour\00a0: "; }
  .cta-band { padding: 64px var(--gut) 72px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs { margin-bottom: 12px; }
  .toc ol { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc a { min-height: 44px; white-space: nowrap; }
}
@media (max-width: 420px) {
  .page-hero .h1 { font-size: 31px; }
}