/* ==========================================================================
   Ash — feuille de style du site
   --------------------------------------------------------------------------
   Reprend le design system de l'app (app/unistyles.ts) : encre bleu-nuit sur
   papier froid, un seul vert, aucun rouge d'alarme. La séparation visuelle
   passe par des ombres douces et des surfaces blanches, jamais par des filets.

   Le site alterne deux fonds, comme l'app alterne ses deux thèmes : la nuit
   pour les moments où l'envie monte (hero, appel final), le papier pour tout
   ce qui relève du progrès quotidien.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------ */

:root {
  /* Papier */
  --paper: #f9fafb;
  --surface: #ffffff;
  --sunken: #f3f4f6;

  /* Encre */
  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #6b7280;

  /* Nuit */
  --night: #0b1120;
  --night-surface: #151c2c;
  --night-sunken: #1e2637;
  --night-line: #273044;
  --night-ink: #f3f4f6;
  --night-ink-2: #9ca3af;

  /* Vert de progression — l'unique couleur d'accent */
  --accent: #4ade80;
  --accent-soft: #dcfce7;
  --accent-deep: #15803d;

  /* Rythme — la gouttière absorbe l'encoche en paysage sans casser les fonds
     pleine largeur : c'est le contenu qui rentre, pas la section. */
  --gutter: max(clamp(1.25rem, 5vw, 2.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --measure: 68ch;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;

  /* Ombres — l'équivalent web des ombres Unistyles de l'app */
  --shadow-card: 0 2px 12px rgb(17 24 39 / 0.05);
  --shadow-raised: 0 6px 20px rgb(17 24 39 / 0.09), 0 1px 2px rgb(17 24 39 / 0.04);
  --shadow-float: 0 24px 60px -12px rgb(17 24 39 / 0.22);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La barre est collante : les ancres doivent s'arrêter en dessous. */
  scroll-padding-top: 5.5rem;
  /* Le site est clair par choix, pas par défaut : on le déclare pour que les
     surfaces natives (barres de défilement, contrôles) suivent. */
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* Pas de délai de 300 ms au tap, et un flash de contact assorti au vert de
   l'app plutôt que le gris translucide par défaut de Safari. */
a, button, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(74 222 128 / 0.2);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Utilitaires ------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), 1160px);
  margin-inline: auto;
}

.wrap--narrow { width: min(100% - (var(--gutter) * 2), 760px); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--radius-s) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.lede {
  max-width: 56ch;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  color: var(--ink-2);
}

/* ---------- Boutons ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.875rem 1.5rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-raised);
}
.btn--primary:hover { background: #1f2937; box-shadow: var(--shadow-float); }

.btn--on-night {
  background: var(--night-ink);
  color: var(--night);
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.6);
}
.btn--on-night:hover { background: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgb(17 24 39 / 0.16);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgb(17 24 39 / 0.34); }

.btn--ghost-night {
  background: transparent;
  color: var(--night-ink);
  box-shadow: inset 0 0 0 1.5px rgb(243 244 246 / 0.24);
}
.btn--ghost-night:hover { box-shadow: inset 0 0 0 1.5px rgb(243 244 246 / 0.5); }

.btn__apple { width: 20px; height: 20px; flex: none; }

.btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn__stack small { font-size: 0.6875rem; font-weight: 500; opacity: 0.72; letter-spacing: 0.02em; }
.btn__stack span { font-size: 1.0625rem; font-weight: 600; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2rem;
}

.cta-note {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}
.night .cta-note { color: var(--night-ink-2); }

/* ---------- Navigation -------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(11 17 32 / 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgb(39 48 68 / 0.7);
  color: var(--night-ink);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--night-ink);
}
.brand svg { width: 30px; height: 30px; border-radius: 8px; flex: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
  margin-right: 0.5rem;
  list-style: none;
  font-size: 0.9375rem;
}
.nav__links a {
  text-decoration: none;
  color: var(--night-ink-2);
  font-weight: 500;
  transition: color 0.15s var(--ease);
}
.nav__links a:hover { color: var(--night-ink); }

.nav__cta {
  min-height: 2.5rem;
  padding: 0.4rem 1.125rem;
  font-size: 0.9375rem;
  border-radius: 999px;
  background: var(--night-ink);
  color: var(--night);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.15s var(--ease);
}
.nav__cta:hover { background: #fff; }

/* Le sélecteur de langue reste dans la barre quand les ancres disparaissent. */
.nav .lang { margin-left: 0.25rem; }

@media (max-width: 860px) {
  .nav__inner { gap: 0.75rem; }
  .nav__links { display: none; }
  .nav .lang { margin-left: auto; }
}

@media (max-width: 400px) {
  .nav__inner { gap: 0.5rem; }
  .brand { font-size: 1rem; }
  .nav__cta { padding-inline: 0.875rem; }
}

/* Sélecteur de langue */
.lang {
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  border-radius: 999px;
  background: rgb(30 38 55 / 0.9);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang a {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--night-ink-2);
  text-transform: uppercase;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.lang a:hover { color: var(--night-ink); }
.lang a[aria-current="true"] { background: var(--night-ink); color: var(--night); }

/* ---------- Sections ---------------------------------------------------- */

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.night {
  background: var(--night);
  color: var(--night-ink);
}
.night h1, .night h2, .night h3 { color: var(--night-ink); }
.night .lede, .night p { color: var(--night-ink-2); }
.night .eyebrow { color: var(--accent); }

.section__head { max-width: 52ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head h2 { font-size: clamp(1.875rem, 1.4rem + 2.1vw, 3rem); }

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

/* La lueur verte : le seul ornement du site, et il porte du sens — c'est la
   couleur de progression de l'app, posée derrière l'écran d'accueil. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto 30%;
  height: 90vh;
  background: radial-gradient(50% 50% at 50% 50%, rgb(74 222 128 / 0.16), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(74 222 128 / 0.35), transparent);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 920px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero h1 {
  font-size: clamp(2.25rem, 1.35rem + 4vw, 4rem);
  letter-spacing: -0.035em;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--night-line);
  list-style: none;
  font-size: 0.9375rem;
  color: var(--night-ink-2);
}
.hero__proof li { display: flex; align-items: center; gap: 0.5rem; }
.hero__proof svg { width: 17px; height: 17px; flex: none; color: var(--accent); }

/* ---------- Cadre téléphone -------------------------------------------- */

.phone {
  position: relative;
  width: min(100%, 320px);
  margin-inline: auto;
  aspect-ratio: 1206 / 2622;
  padding: 10px;
  border-radius: 50px;
  background: linear-gradient(160deg, #2b3547, #0f1626 55%);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 41px;
  background: var(--paper);
}
.phone--lg { width: min(100%, 360px); }
.phone--sm { width: min(100%, 260px); }

.phone-duo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.75rem, 3vw, 2rem);
}
.phone-duo .phone:first-child { transform: rotate(-3deg); }
.phone-duo .phone:last-child { transform: rotate(3deg); }

/* ---------- Bandeau de repères ----------------------------------------- */

.strip {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  background: var(--sunken);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.strip > div {
  padding: 1.75rem 1.5rem;
  background: var(--surface);
}
.strip dt {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.strip dd {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* ---------- Blocs alternés --------------------------------------------- */

.feature {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature__media { order: -1; }
}
.feature + .feature { margin-top: clamp(4rem, 9vw, 7rem); }

.feature h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem); }

.feature__list {
  margin-top: 1.75rem;
  list-style: none;
  display: grid;
  gap: 1rem;
}
.feature__list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.875rem;
  align-items: start;
  color: var(--ink-2);
}
.feature__list b { color: var(--ink); font-weight: 600; }
.feature__list svg {
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.125rem;
  color: var(--accent-deep);
  flex: none;
}

/* ---------- Grille de fonctionnalités ---------------------------------- */

.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  list-style: none;
}
.card {
  padding: 1.75rem;
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-bottom: 1.125rem;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.card__icon svg { width: 1.375rem; height: 1.375rem; }
.card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.card p { font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- Chronologie de récupération -------------------------------- */

.timeline {
  position: relative;
  list-style: none;
  display: grid;
  gap: 0;
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(5.5rem, 8rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.5rem 0;
  border-top: 1px solid rgb(17 24 39 / 0.08);
}
.timeline li:last-child { border-bottom: 1px solid rgb(17 24 39 / 0.08); }
.timeline__when {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
  padding-top: 0.0625rem;
}
.timeline__what { color: var(--ink-2); }
.timeline__what b { color: var(--ink); font-weight: 600; }

@media (max-width: 560px) {
  .timeline li { grid-template-columns: 1fr; gap: 0.375rem; }
}

/* ---------- Offre ------------------------------------------------------- */

.plans {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
.plan {
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.plan--premium {
  background: var(--night);
  color: var(--night-ink);
  box-shadow: var(--shadow-float);
}
.plan--premium p { color: var(--night-ink-2); }
.plan__tag {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan--premium .plan__tag { background: rgb(74 222 128 / 0.16); color: var(--accent); }
.plan h3 { font-size: 1.5rem; margin-bottom: 0.625rem; }
.plan__items {
  margin-top: 1.5rem;
  list-style: none;
  display: grid;
  gap: 0.75rem;
  font-size: 0.9375rem;
}
.plan__items li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--ink-2);
}
.plan--premium .plan__items li { color: var(--night-ink-2); }
.plan__items svg { width: 1.25rem; height: 1.25rem; margin-top: 0.1875rem; color: var(--accent-deep); }
.plan--premium .plan__items svg { color: var(--accent); }

/* ---------- FAQ --------------------------------------------------------- */

.faq { display: grid; gap: 0.75rem; }
.faq details {
  background: var(--surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 0.75rem; height: 0.75rem;
  flex: none;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details > div {
  padding: 0 1.5rem 1.5rem;
  color: var(--ink-2);
  max-width: var(--measure);
}
.faq details > div p + p { margin-top: 0.875rem; }
.faq a { color: var(--accent-deep); text-underline-offset: 3px; }

/* ---------- Appel final ------------------------------------------------- */

.final {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(4.5rem, 10vw, 8rem);
}
.final::before {
  content: "";
  position: absolute;
  inset: auto 0 -60% 0;
  height: 100%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(74 222 128 / 0.18), transparent 70%);
  pointer-events: none;
}
.final > * { position: relative; }
.final h2 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem); }
.final .lede { margin-inline: auto; }
.final .cta-row { justify-content: center; }

/* ---------- Pied de page ------------------------------------------------ */

.footer {
  background: var(--night);
  color: var(--night-ink-2);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.9375rem;
  border-top: 1px solid var(--night-line);
}
.footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.footer h2 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--night-ink);
  margin-bottom: 1rem;
}
.footer ul { list-style: none; display: grid; gap: 0.625rem; }
.footer a { text-decoration: none; transition: color 0.15s var(--ease); }
.footer a:hover { color: var(--night-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--night-line);
  font-size: 0.875rem;
}
.footer__note { max-width: 62ch; margin-top: 1rem; font-size: 0.8125rem; line-height: 1.6; }

/* ---------- Pages de contenu (légal, support) --------------------------- */

.doc { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); }
.doc__head { margin-bottom: 3rem; }
.doc__head h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }
.doc__meta { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-3); }

.prose { max-width: var(--measure); }
.prose h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 1.375rem;
  scroll-margin-top: 6rem;
}
.prose h3 { margin-top: 2rem; margin-bottom: 0.625rem; font-size: 1.0625rem; }
.prose p + p, .prose ul + p, .prose p + ul, .prose ul + ul { margin-top: 1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.prose li { color: var(--ink-2); }
.prose p { color: var(--ink-2); }
.prose a { color: var(--accent-deep); text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }

.prose table {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.prose thead th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--sunken);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.prose thead th:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.prose thead th:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.prose tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgb(17 24 39 / 0.08);
  color: var(--ink-2);
  vertical-align: top;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.callout {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.callout h2 { margin-top: 0; }
.callout p { margin-top: 0.5rem; }

.toc {
  margin: 2rem 0 0;
  padding: 1.5rem;
  border-radius: var(--radius-m);
  background: var(--sunken);
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
  counter-reset: toc;
}
.toc li { counter-increment: toc; color: var(--ink-2); }
.toc li::before { content: counter(toc) ". "; color: var(--ink-3); }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 404 --------------------------------------------------------- */

.err {
  min-height: 70vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1.25rem;
  padding-block: 4rem;
}
.err__code {
  font-size: clamp(3.5rem, 2rem + 7vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--accent-deep);
  line-height: 1;
}

/* ---------- Champs à compléter avant mise en ligne ---------------------- */
/* Même convention que mentions-legales.html du site Refacto Studio : ce qui
   reste à renseigner est visible, pas noyé dans le texte. */
.todo {
  padding: 0.05em 0.4em;
  border-radius: 4px;
  background: #fef3c7;
  color: #78350f;
  font-size: 0.9375em;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Sur les pages de contenu, l'encadré suit la même mesure que le texte :
   un bloc plus large que le corps casse la colonne de lecture. */
.doc .callout { max-width: var(--measure); }