/* =============================================================================
   SEO by Belentia — maquette A (v3). base.css + motion.css, puis ces ajouts.
   Une seule couleur d'outil : --accent. Blanc partout, violet en touches.
   v3 affinée : + scroll.css ; bloc « v3 affinée » en fin de feuille.
   ========================================================================== */
:root {
  --accent: #7C3AED;
  --accent-hover: #6D28D9;
  --accent-soft: #F3EEFE;   /* teinte 8 % du violet, écrite en dur */
  --accent-6: #F6F2FE;      /* teinte 6 % — bandeaux et carte mise en avant */
  --accent-ring: rgba(124, 58, 237, .35);

  /* Sévérités — les trois couleurs fonctionnelles du rapport, rien de plus. */
  --sev-crit-ink: #B42318;  --sev-crit-bg: #FEF3F2;
  --sev-warn-ink: #B54708;  --sev-warn-bg: #FFFAEB;
  --sev-info-ink: #5B6472;  --sev-info-bg: #F2F4F7;
}

/* ------------------------------ 0. Socle -------------------------------- */
body { font-size: 18px; }

.h1, h1 { line-height: 1.05; }
.h1--xl { font-size: 54px; }
.h2, h2 { font-size: 34px; line-height: 1.15; }

/* Eyebrow gris, capitales espacées, précédé d'un point de 6 px de la couleur de
   l'outil. `.section-head .eyebrow` (0,2,0) l'emporte sur `.section-head p`. */
.eyebrow,
.section-head .eyebrow {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: #6B7280;
  letter-spacing: .1em;
}
.eyebrow::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.hero .eyebrow,
.section-head--center .eyebrow { margin-inline: auto; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .ticks-row { justify-content: center; }

/* Secondaire neutre : bord gris, texte encre ; au survol, le bord prend la
   couleur de l'outil. Aucun bouton noir, aucun contour violet au repos. */
.btn--secondary {
  background: var(--canvas);
  color: var(--ink);
  border-color: #D9DCE3;
}
.btn--secondary:hover {
  background: var(--canvas);
  border-color: var(--accent);
  color: var(--ink);
}

.center { text-align: center; }
.stack-2 > * + * { margin-top: var(--space-2); }
/* Lien de repli : en ligne, pour que la flèche suive le dernier mot. */
.link-inline { display: inline; }
.link-inline svg { display: inline; vertical-align: -3px; margin-left: 4px; }

/* Ligne de faits à coches. */
.ticks-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.ticks-row--center { justify-content: center; }
.ticks-row li { display: flex; align-items: center; gap: var(--space-1); }
.ticks-row svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--accent); }

/* Pastilles de sévérité — les trois libellés du produit. */
.sev {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.sev--crit { background: var(--sev-crit-bg); color: var(--sev-crit-ink); }
.sev--warn { background: var(--sev-warn-bg); color: var(--sev-warn-ink); }
.sev--info { background: var(--sev-info-bg); color: var(--sev-info-ink); }

/* ------------------------- 1. Navigation collante ------------------------ */
.nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--canvas); }
}

/* --------------------------------- 2. Hero ------------------------------- */
.hero { padding-block: 80px 72px; text-align: center; }
.hero__inner { max-width: 1000px; margin-inline: auto; }
.hero .lead { max-width: 660px; margin-inline: auto; }

/* Le champ d'audit : 62 px de haut, bouton intégré à droite. */
.audit-field {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 660px;
  margin-inline: auto;
  height: 62px;
  padding: 6px 6px 6px 20px;
  background: var(--canvas);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  transition: border-color var(--t) var(--ease);
}
.audit-field:hover { border-color: #AEB3BF; }
.audit-field:focus-within {
  border-color: var(--accent);
  outline: 3px solid var(--accent-ring);
  outline-offset: 1px;
}
.audit-field input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
}
.audit-field input::placeholder { color: var(--muted); }
.audit-field input:focus { outline: none; }
.audit-field .btn { flex: 0 0 auto; }

/* --------------------- 3. Démonstration animée du hero ------------------- */
.demo-zone { max-width: 940px; margin: var(--space-5) auto 0; }
/* L'étiquette du curseur se pose sous le champ : la ligne de faits lui laisse
   la place, sinon elle la recouvre quand le tour est figé (mouvement réduit). */
.demo-zone .ticks-row { margin-top: var(--space-5); }

.demo {
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: left;
}
.demo__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-3);
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.demo__dots { display: flex; gap: 6px; flex: 0 0 auto; }
.demo__dots span { width: 10px; height: 10px; border-radius: 50%; background: #DDE1E8; }
.demo__url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--canvas);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo__stamp { flex: 0 0 auto; }

.demo__body { padding: var(--space-3); }

.demo__scan { border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); }
.demo__scan-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  font-size: 15px;
  color: var(--muted);
}
.demo__scan-row b { color: var(--ink); font-weight: 600; }
.track {
  display: block;                   /* <span> : sans cela, la hauteur ne prend pas */
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  background: #EDEFF3;
  overflow: hidden;
}
.track__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: #9CA3AF;
  transform-origin: left center;
  transform: scaleX(var(--v, 1));
  transition: transform 900ms var(--ease);
}

.demo__grid {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-3);
}

.demo__score { display: grid; justify-items: center; gap: 10px; }
.demo__score .chip { align-self: center; }
.demo-ring { position: relative; display: grid; place-items: center; width: 152px; height: 152px; }
.demo-ring svg { width: 152px; height: 152px; transform: rotate(-90deg); }
.demo-ring circle { fill: none; stroke-width: 10; }
.demo-ring__track { stroke: var(--line); }
.demo-ring__bar {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 78.42;         /* 76 / 100 — état final, visible sans JS */
  transition: stroke-dashoffset 1100ms var(--ease);
}
.demo-ring__center { position: absolute; display: grid; justify-items: center; gap: 2px; }
.demo-ring__value {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.demo-ring__max { font-size: 13px; font-weight: 600; color: var(--muted); }
.demo-ring__label {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.cbars { display: grid; gap: 10px; }
.cbar__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 15px;
  color: var(--text);
}
.cbar__v { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cbar__u { font-weight: 500; color: var(--muted); }
.cbar__track { display: block; height: 7px; margin-top: 5px; border-radius: 999px; background: #EDEFF3; overflow: hidden; }
.cbar__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--v, 1));
  transition: transform 800ms var(--ease);
}
.cbars__rest { margin-top: 10px; font-size: 14px; color: var(--muted); }

.demo__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}
.demo__counts b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.demo__findings { margin-top: var(--space-2); display: grid; }
.demo-find {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: 11px;
  border-top: 1px solid var(--line);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.demo-find.is-off { opacity: 0; transform: translate3d(0, 10px, 0); }
.demo-find > span:last-child { display: block; min-width: 0; }
.demo-find__t { display: block; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.demo-find__p { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); word-break: break-word; }

.demo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 14px;
  color: var(--muted);
  text-align: left;
}
.replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--canvas);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.replay:hover { color: var(--accent); border-color: var(--accent); }
.replay svg { width: 15px; height: 15px; }

/* ---------------------- 4. Ce que vous obtenez (tuiles) ------------------- */
.tile { height: 100%; }
.tile .h3 { margin-top: var(--space-2); }

/* ------------------------- 5. Comment ça marche -------------------------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.steps__line {
  position: absolute;
  top: 22px;
  left: 8%;
  width: 84%;
  height: 2px;
  color: var(--accent);
  opacity: .32;
  pointer-events: none;
}
.step { position: relative; }
.step__n {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--canvas);
  border: 1px solid var(--line);
  outline: 5px solid var(--canvas);
  color: var(--ink);
  font-family: var(--font-title); font-weight: 700; font-size: 17px;
}
.section--soft .step__n { outline-color: var(--soft); }
.step__t { margin-top: var(--space-3); font-family: var(--font-title); font-weight: 700; font-size: 20px; color: var(--ink); }
.step__d { margin-top: 6px; color: var(--text); }
.step__demo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
  padding: 8px 14px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--canvas);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
}
.step__demo svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted); }

/* --------------------- 6. Explorateur des vérifications ------------------ */
.checkstrip { margin-bottom: var(--space-5); }
.checkstrip .chip { align-self: center; font-size: 14px; padding: 7px 14px; white-space: nowrap; }
/* Le kit coupe le masque en mouvement réduit : la bande s'arrêterait alors net
   sur un mot. On garde le fondu, qui n'est pas une animation. */
@media (prefers-reduced-motion: reduce) {
  .checkstrip {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
}

.explorer {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--canvas);
}
.explorer__rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--line);
}
.explorer__foot {
  margin-top: auto;
  padding: var(--space-3) var(--space-2) var(--space-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
/* Le kit met [data-autocycle] en barre horizontale : on garde la colonne. */
.explorer .explorer__tabs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  padding: var(--space-1);
  border-right: 0;
  border-bottom: 0;
}
.explorer .exp-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  min-height: 48px;
  margin-bottom: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.explorer .exp-tab:hover { background: var(--soft); color: var(--ink); }
.explorer .exp-tab[aria-selected="true"] { background: #F2F3F5; color: var(--accent); }
.explorer .autocycle__bar { left: 12px; right: 12px; bottom: 5px; }
.exp-tab__label { flex: 1 1 auto; min-width: 0; }
.exp-tab__end { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }
.exp-tab__on { width: 18px; height: 18px; color: var(--accent); opacity: 0; }
.exp-tab[aria-selected="true"] .exp-tab__on { opacity: 1; }
.exp-tab__n {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.exp-tab[aria-selected="true"] .exp-tab__n { color: var(--accent); }

.explorer__panel { padding: var(--space-3) var(--space-4) var(--space-4); }
.explorer__note { font-size: 15px; color: var(--muted); }
.vcheck { padding-block: var(--space-3); }
.vcheck + .vcheck { border-top: 1px solid var(--line); }
.check__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.check__title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.check__why { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--text); max-width: 68ch; }
.explorer__more {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* -------------------------------- 7. Pour qui ---------------------------- */
.case { height: 100%; gap: var(--space-3); }
.case__list { display: grid; gap: var(--space-2); }
.case__item { display: flex; align-items: flex-start; gap: var(--space-2); }
.case__item > span:last-child { display: block; min-width: 0; font-size: 16px; color: var(--ink); font-weight: 600; line-height: 1.45; }
.case__do {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text);
}
.case__do b { color: var(--ink); font-weight: 600; }

/* ------------------------- 8. Le rapport, en vrai ------------------------ */
/* Les deux colonnes partent du même bord haut : la colonne de droite est plus
   haute, un centrage laisserait un grand vide au-dessus de la capture. */
#exemples .split { align-items: start; }

.browser {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--canvas);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-2);
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}
.browser__view { max-height: 460px; overflow: hidden; }
.browser__view img { width: 100%; display: block; }

.paper {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--canvas);
}
.paper__view { max-height: 520px; overflow: hidden; }
.paper img { width: 100%; display: block; }
.paper__cap { padding: 10px var(--space-2); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
/* La colonne de droite est deux fois plus courte : on la centre au lieu de
   laisser un trou blanc sous les trois bénéfices. */
#exemples .split > .stack-4 { align-self: center; }

/* --------------------------------- 9. Tarifs ----------------------------- */
.plan { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); height: 100%; }
.plan__price { display: flex; align-items: baseline; gap: var(--space-1); }
.plan__amount { font-family: var(--font-title); font-weight: 700; font-size: 36px; line-height: 1.1; color: var(--ink); }
.plan__amount--sm { font-size: 26px; }
.plan__unit { font-size: 16px; color: var(--muted); }
.plan .ticks { margin-top: var(--space-1); }
.plan .btn { margin-top: auto; }
.plan__foot { font-size: 15px; color: var(--muted); }
.plans .plan__foot { min-height: 45px; }

/* La carte mise en avant : fond 6 %, bord 2 px, chip, prix 44 px. */
.plan--featured {
  background: #F8F5FE;              /* teinte 5 % du violet */
  border: 2px solid var(--accent);
}
.plan--featured .plan__amount { font-size: 44px; }
@supports not (color: color-mix(in srgb, #000 6%, #fff)) {
  .plan--featured { background: var(--soft); }
}

.scope {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.scope__list { margin-top: var(--space-2); display: grid; gap: 10px; }
.scope__list li { display: flex; gap: var(--space-2); font-size: 16px; color: var(--text); }
.scope__list li::before { content: "—"; color: var(--muted); }

.notice {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.notice b { color: var(--ink); font-weight: 600; }
.notice + .notice { margin-top: var(--space-2); }

/* ------------------------------ 10. Vos données -------------------------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.fact { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.fact > div { min-width: 0; }
.fact__t { font-family: var(--font-title); font-weight: 700; font-size: 18px; color: var(--ink); }
.fact__d { margin-top: 4px; font-size: 16px; color: var(--text); }

/* ------------------------------ 11. Bandeau final ------------------------ */
.cta-band {
  padding: var(--space-8) var(--space-4);
  border-radius: 24px;
  background: #FAF7FE;              /* teinte 4 % du violet */
  text-align: center;
}
@supports not (color: color-mix(in srgb, #000 6%, #fff)) {
  .cta-band { background: var(--soft); }
}
.cta-band .audit-field { margin-top: var(--space-4); }

/* ------------------------------ 12. Strip outils ------------------------- */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.tool {
  display: block;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  color: var(--text);
}
.tool:hover { text-decoration: none; border-color: var(--line-strong); }
.tool__n { display: block; font-family: var(--font-title); font-weight: 700; font-size: 17px; color: var(--ink); }
.tool__d { display: block; margin-top: 2px; font-size: 15px; color: var(--muted); }
.tool[aria-current="page"] { border-color: var(--accent); }
.tool[aria-current="page"] .tool__n { color: var(--accent); }

/* ------------------ Emplacements d'images et prompts --------------------- */
.img-slot {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: var(--space-3);
  text-align: center;
  background: #EEF0F4;
  border: 1px dashed #C9CDD6;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.slots { border-top: 1px solid var(--line); background: var(--canvas); }
.slots > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.slots > summary::-webkit-details-marker { display: none; }
.slots > summary:hover { color: var(--accent); }
.slots[open] > summary svg { transform: rotate(180deg); }
.slots > summary svg { flex: 0 0 20px; transition: transform var(--t) var(--ease); }
.slots__body { padding-bottom: var(--space-6); }
.slot { padding-block: var(--space-3); border-top: 1px solid var(--line); }
.slot__id { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--ink); }
.slot__meta { margin-top: 4px; font-size: 15px; color: var(--muted); }
.slot__meta b { color: var(--text); font-weight: 600; }
.slot__prompt {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------- Blog / article ----------------------------- */
.featured { align-items: center; }
.featured__cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-1);
  font-size: 15px;
  color: var(--muted);
}
.post-meta span + span::before { content: "· "; color: var(--line-strong); }
.try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.try__text { max-width: 58ch; }
.article { max-width: 720px; margin-inline: auto; }
.article__cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent); }
.back-link svg { width: 16px; height: 16px; }
.sm-prose { font-size: 18px; line-height: 1.7; color: var(--text); }
.sm-prose > * + * { margin-top: var(--space-3); }
.sm-prose h2 {
  margin-top: var(--space-6);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
}
.sm-prose ul { display: grid; gap: var(--space-2); }
.sm-prose li { display: flex; gap: var(--space-2); }
.sm-prose li::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 11px; border-radius: 50%; background: #9CA3AF; }
.sm-prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sm-prose figure > * + * { margin-top: var(--space-1); }
.sm-prose figcaption { font-size: 15px; color: var(--muted); }
.practice {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* -------------------------------- Mobile -------------------------------- */
@media (max-width: 1024px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3.plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer__rail { border-right: 0; border-bottom: 1px solid var(--line); }
  .explorer__foot { display: none; }
  .explorer .explorer__tabs {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 0;
    scrollbar-width: none;
  }
  .explorer .explorer__tabs::-webkit-scrollbar { display: none; }
  .explorer .exp-tab { flex: 0 0 auto; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .steps__line { display: none; }
  .demo__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); justify-items: start; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .h1--xl { font-size: 34px; }
  .h2, h2 { font-size: 26px; }
  .hero { padding-block: 48px 56px; }
  .audit-field {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 8px;
    gap: 8px;
  }
  .audit-field input { height: 46px; padding-inline: 12px; }
  .audit-field .btn { width: 100%; }
  .demo-zone { margin-top: var(--space-4); }
  .demo__body { padding: var(--space-2); }
  .demo__bar { padding: 10px var(--space-2); }
  .demo__stamp { display: none; }
  .demo-ring, .demo-ring svg { width: 124px; height: 124px; }
  .demo-ring__value { font-size: 32px; }
  /* Sur un téléphone, l'étiquette du curseur recouvrirait le bouton primaire :
     le curseur suffit, le geste reste lisible. */
  .demo-zone .tour__label { display: none; }
  .demo__counts { gap: 6px var(--space-3); font-size: 14px; }
  .explorer__panel { padding: var(--space-2) var(--space-3) var(--space-3); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .tools { grid-template-columns: minmax(0, 1fr); }
  .cta-band { padding: var(--space-6) var(--space-3); border-radius: 18px; }
  .plan { padding: var(--space-3); }
  .plan--featured .plan__amount { font-size: 38px; }
  .ticks-row { gap: var(--space-1) var(--space-3); font-size: 14px; }
  .sm-prose { font-size: 17px; }
  .sm-prose h2 { font-size: 22px; margin-top: var(--space-5); }
  .try { padding: var(--space-3); }
  .try .btn { width: 100%; }
  .browser__view { max-height: 300px; }
}
/* =============================================================================
   v3 affinée (22/09/2026) — moins de violet, aucune ombre, rythme blanc / gris
   très clair, défilement qui inspire confiance. Tout le reste est la v3.
   ========================================================================== */
/* Surfaces neutres : pastilles d'icônes et chips non sémantiques. */
.card__icon { background: #F2F3F5; color: var(--accent); }
.chip { background: #F2F3F5; color: #4B5563; }
.ticks__mark { background: #F2F3F5; }

/* Aucune ombre : les survols passent par le bord et un léger déplacement. */
.card:hover,
.guide-card:hover,
.hover-lift:hover { box-shadow: none; }
.hover-lift:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.more__panel { box-shadow: 0 1px 2px rgba(17, 24, 39, .05); }
.tour__cursor { filter: none; }
.tour__label { box-shadow: 0 1px 2px rgba(17, 24, 39, .05); }
.tour .is-tour-hover,
.tour .is-tour-active {
  box-shadow: none;
  outline: 3px solid var(--accent-ring);
  outline-offset: 2px;
}

/* Coches du kit (faits de confiance) : pastille grise, trait couleur de l'outil. */
.check__ring { fill: #F2F3F5; }
.plan--featured .check__ring { fill: var(--canvas); }
.ticks li > .check,
.ticks-row li > .check,
.fact > .check { flex: 0 0 auto; margin: 0; }
.ticks li > .check { width: 24px; height: 24px; margin-top: 1px; }
.ticks-row li > .check { width: 20px; height: 20px; }
.fact > .check { width: 26px; height: 26px; margin-top: 1px; }

/* Scène épinglée de l'accueil : le panneau d'audit réel reste en place sous
   la nav pendant que ses trois constats entrent, en cascade de 120 ms. Les
   barres, l'anneau et les compteurs sont remplis par la démonstration du
   curseur, comme en v3. Sans JS ou en mouvement réduit, la scène est dépliée
   et le panneau est complet. */
.demo-scene { max-width: 940px; margin-inline: auto; }
.scene.demo-scene { height: auto; }
.has-scroll .scene.demo-scene:not(.is-static) { height: auto; min-height: var(--scene-length, 150vh); }
@media (max-width: 720px) {
  .has-scroll .scene.demo-scene:not(.is-static) { min-height: var(--scene-length-m, 140vh); }
}
.demo-pin { margin-top: var(--space-4); }
.has-scroll .demo-scene:not(.is-static) .demo-pin {
  position: sticky;
  top: var(--pin-top, 80px);
  z-index: 1;
}
.has-scroll .demo-scene:not(.is-static) .demo-find {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--j, 0) * 120ms);
}
.has-scroll .demo-scene.is-found .demo-find { opacity: 1; transform: none; }
.demo__foot { max-width: 940px; margin-inline: auto; }

/* ---- Retouches après contrôle (22/09/2026) ---- */
/* Exploration terminée : barre fine de 4 px, couleur de l'outil (un des
   chiffres clés du rapport), sur piste gris clair. */
.track { height: 4px; background: #E6E8EE; }
.track__fill { background: var(--accent); }
/* Étapes : cercle blanc cerné de gris, chiffre couleur de l'outil ; ligne grise. */
.step__n { border-color: #E6E8EE; color: var(--accent); }
.steps__line { color: #E6E8EE; opacity: 1; }
/* Pass Pro : fond 5 %, bord et bouton ; la chip redevient neutre. */
.plan--featured .chip { background: #F2F3F5; color: var(--ink); }

/* Pied de la démonstration : la légende, puis « Rejouer la démonstration »
   (v3) ; « Pause » n'apparaît que pendant que le curseur tourne. */
.demo__ctrls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo__ctrls .tour__controls { position: static; display: inline-flex; gap: 8px; }
.demo__ctrls .tour__btn[hidden] { display: none; }
.replay,
.demo__ctrls .tour__btn {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #D9DCE3;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: none;
}
.replay:hover,
.demo__ctrls .tour__btn:hover { color: var(--ink); border-color: var(--accent); }

/* Durées du kit ramenées dans la fourchette 400–700 ms, déplacements de 16 px. */
.has-scroll [data-split] .split-text__item {
  transition: transform .6s var(--scroll-ease), opacity .6s var(--scroll-ease);
  transition-delay: calc(var(--split-delay, 0ms) + var(--i, 0) * var(--split-stagger, 45ms));
}
.has-scroll [data-split="lines"] { --split-stagger: 70ms; }
.has-scroll [data-split]:not(.is-in) .split-text__item { transform: translate3d(0, 16px, 0); opacity: 0; }
.has-scroll [data-wipe] { transition: clip-path .7s var(--scroll-ease-wipe) var(--wipe-delay, 0ms); }
.has-scroll [data-wipe] > :is(img, svg, picture, video, .wipe__media) {
  transition: transform .8s var(--scroll-ease) var(--wipe-delay, 0ms);
}
.has-scroll [data-wipe]:not(.is-in) > :is(img, svg, picture, video, .wipe__media) { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .has-scroll [data-split] .split-text__item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .has-scroll [data-wipe],
  .has-scroll [data-wipe] > * { transition: none !important; }
}

/* Captures automatiques : la barre de lecture (pleine sur une capture de
   toute la page) serait lue comme une bordure d'en-tête. */
.is-capture .read-progress { display: none; }