/*
 * Feuille de style du site public (docs/index.html, support.html,
 * suppression-compte.html). Les pages légales, elles, portent leur style en
 * ligne : elles sont générées par scripts/build-legal-html.mjs et doivent
 * rester lisibles même servies seules, sans ce fichier.
 *
 * Les couleurs et les polices ne sont pas choisies ici : ce sont celles de
 * src/constants/theme.ts (Palette, Colors, Fonts). Toute retouche de
 * l’identité part de là, pas d’ici. En particulier :
 *
 *   - les neutres sont les gris `stone`, tirés d’un souffle vers le violet.
 *     Le crème et le sable ont été sortis de la palette : c’est le couple
 *     vert + crème qui donnait à l’application l’air de toutes les autres
 *     applications de randonnée ;
 *   - le violet porte les fonds doux (pastilles, vignettes), jamais une
 *     information ;
 *   - la famille `wood` ne sert qu’à deux choses, le liseré d’un badge et le
 *     relief — d’où les courbes de niveau et la crête du profil, ici.
 *
 * Un seul écart assumé : le bandeau d’ouverture est sombre dans les deux
 * thèmes. C’est le seul endroit où le site hausse la voix.
 */

/* --- Jetons -------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --ground: #F7F6F9;        /* Palette.stone50 — fond de page, jamais blanc */
  --surface: #FFFFFF;
  --surface-soft: #EEEDF2;  /* Palette.stone100 */
  --border: #E3E1EA;        /* Palette.stone200 */
  --ink: #1E1E1E;
  --ink-soft: #4A4854;
  --ink-muted: #65636E;     /* Colors.light.textSecondary */
  --green: #175D42;         /* Colors.light.tint — le seul vert admis sous un texte */
  --green-accent: #5FC49A;  /* Colors.light.accent — tracés, marqueurs, jamais de texte */
  --soft: #F1EEFA;          /* Colors.light.softSurface */
  --on-soft: #46298F;       /* Colors.light.onSoftSurface */
  --brand-w: #46298F;
  --crest: #6B4E35;         /* Colors.light.terrainCrest */
  --crest-soft: #E6D8C7;    /* Colors.light.terrainSoft */
  --tint-violet: #F0EAFA;   /* Colors.light.backgroundTint */
  --tint-vert: #E9F3EE;     /* Colors.light.backgroundTintAlt */
  --on-accent: #FFFFFF;
  --shadow: 0 2px 12px rgba(30, 30, 40, .05);
  --shadow-lift: 0 10px 30px rgba(30, 30, 40, .10);
  --head-bg: rgba(247, 246, 249, .85);

  /* Bandeau d’ouverture — identique dans les deux thèmes. */
  --band: #0F0F13;
  --band-2: #17161D;
  --band-text: #F1F1F4;
  --band-muted: #A3A1AC;
  --band-border: rgba(241, 241, 244, .13);
  --band-green: #5FC49A;    /* en sombre, c’est le vert clair qui porte le texte */
  --band-on-green: #07231A; /* Colors.dark.tintText */
  --band-crest: #C2A181;    /* Palette.wood300 — couleur des courbes de niveau */
  --band-crest-soft: #3A2E23;

  --display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --measure: 34rem;   /* ~65 caractères de texte courant */
  --page: 68rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Thème sombre du système — sauf si le visiteur a explicitement choisi clair. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #131316;
    --surface: #1B1B20;
    --surface-soft: #212128;
    --border: #2E2E38;
    --ink: #F1F1F4;
    --ink-soft: #C9C7D2;
    --ink-muted: #A3A1AC;
    --green: #5FC49A;
    --green-accent: #5FC49A;
    --soft: #221C33;
    --on-soft: #A78BFA;
    --brand-w: #A78BFA;
    --crest: #C2A181;
    --crest-soft: #3A2E23;
    --tint-violet: #1B1630;
    --tint-vert: #0F201A;
    --on-accent: #07231A;
    --shadow: 0 2px 12px rgba(0, 0, 0, .35);
    --shadow-lift: 0 10px 30px rgba(0, 0, 0, .5);
    --head-bg: rgba(19, 19, 22, .85);
  }
}

/* Choix explicite du visiteur — doit l’emporter dans les deux sens. */
:root[data-theme="dark"] {
  --ground: #131316;
  --surface: #1B1B20;
  --surface-soft: #212128;
  --border: #2E2E38;
  --ink: #F1F1F4;
  --ink-soft: #C9C7D2;
  --ink-muted: #A3A1AC;
  --green: #5FC49A;
  --green-accent: #5FC49A;
  --soft: #221C33;
  --on-soft: #A78BFA;
  --brand-w: #A78BFA;
  --crest: #C2A181;
  --crest-soft: #3A2E23;
  --tint-violet: #1B1630;
  --tint-vert: #0F201A;
  --on-accent: #07231A;
  --shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, .5);
  --head-bg: rgba(19, 19, 22, .85);
}

/* --- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--ground);
  /* Les deux coins dilués du fond de marque de l’application : violet en haut
     à droite, vert en bas à gauche. Un fond se remarque quand il manque. */
  background-image:
    radial-gradient(58% 48% at 100% 0%, var(--tint-violet) 0%, transparent 72%),
    radial-gradient(58% 52% at 0% 100%, var(--tint-vert) 0%, transparent 72%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.25rem); letter-spacing: -.02em; }
h3 { font-size: 1.0625rem; }

p { margin: 0; color: var(--ink-soft); }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

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

/*
 * `padding-inline` et non `padding` : la même balise porte souvent `.wrap` et
 * une autre classe qui règle le rythme vertical (`section`, `.page`). Avec le
 * raccourci, `.wrap` — une classe — écrasait le rembourrage vertical de
 * `section` — un élément — et toutes les sections se retrouvaient collées.
 */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.measure { max-width: var(--measure); }

.eyebrow {
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 60;
  background: var(--surface);
  color: var(--ink);
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}

/* --- En-tête ------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--head-bg);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
  padding-block: 1.1rem;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              padding .35s var(--ease);
}

.site-head--inner {
  max-width: var(--page);
  margin: 0 auto;
  width: 100%;
  padding-inline: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/*
 * L’en-tête précède le bandeau dans le flux : le rendre transparent ne
 * laissait pas voir le bandeau mais le fond de page, clair — et le mot-symbole
 * en couleur claire disparaissait dessus. Il porte donc le fond du bandeau
 * tant qu’on est dessus, et bascule sur le fond de page une fois passé.
 */
body.has-hero .site-head {
  background: var(--band);
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-block: 1.4rem;
}
body.has-hero .site-head .wordmark { color: var(--band-text); }
body.has-hero .site-head .wordmark .w { color: #A78BFA; }
body.has-hero .site-head .site-nav a { color: var(--band-muted); }
body.has-hero .site-head .site-nav a:hover { color: var(--band-text); }

body.has-hero .site-head.is-solid {
  background: var(--head-bg);
  border-bottom-color: var(--border);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  padding-block: .85rem;
}
body.has-hero .site-head.is-solid .wordmark { color: var(--ink); }
body.has-hero .site-head.is-solid .wordmark .w { color: var(--brand-w); }
body.has-hero .site-head.is-solid .site-nav a { color: var(--ink-muted); }
body.has-hero .site-head.is-solid .site-nav a:hover { color: var(--ink); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.02em;
  transition: color .35s var(--ease);
}
.wordmark img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
  transition: transform .4s var(--ease);
}
.wordmark:hover img { transform: rotate(-6deg) scale(1.06); }
.wordmark .w { color: var(--brand-w); transition: color .35s var(--ease); }

.site-nav {
  display: flex;
  gap: 1.35rem;
  flex-wrap: wrap;
  font-size: .9375rem;
}
.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  position: relative;
  transition: color .25s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.35rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .wordmark:hover img { transform: none; }
  .site-nav a::after { transition: none; }
}

/* --- Bandeau d’ouverture ------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--band);
  color: var(--band-text);
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(3rem, 2rem + 4vw, 5rem);
}

/* Les courbes de niveau, calculées au chargement (script d’index.html). */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero-canvas.is-drawn { opacity: 1; }

/* Voile : les courbes restent sous le texte, jamais en concurrence avec lui. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(68% 58% at 10% 40%, rgba(15, 15, 19, .93) 0%, rgba(15, 15, 19, 0) 70%),
    linear-gradient(to bottom, rgba(15, 15, 19, 0) 55%, rgba(15, 15, 19, .8) 100%);
  pointer-events: none;
}

.hero .eyebrow { color: var(--band-muted); }
.hero h1 { color: var(--band-text); }
.hero h1 .accent { color: var(--band-green); }
.hero .lead {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem);
  color: var(--band-muted);
  margin-top: 1.35rem;
  max-width: 36rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease),
              background .25s var(--ease);
}
.btn svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }

/* Sur le bandeau sombre, les rôles s’inversent comme dans le thème sombre de
   l’application : c’est le vert clair qui porte le texte. */
.btn-primary {
  background: var(--band-green);
  color: var(--band-on-green);
  box-shadow: 0 6px 24px rgba(95, 196, 154, .20);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(95, 196, 154, .30);
}
.btn-primary:hover svg { transform: translateX(3px); }

.btn-ghost {
  border-color: var(--band-border);
  color: var(--band-text);
  background: rgba(241, 241, 244, .04);
}
.btn-ghost:hover {
  border-color: var(--band-green);
  color: var(--band-green);
  background: rgba(95, 196, 154, .08);
}

/* Sur fond de page (bandeau d’appel final, pages intérieures). */
.on-ground .btn-primary {
  background: var(--green);
  color: var(--on-accent);
  box-shadow: var(--shadow);
}
.on-ground .btn-primary:hover { box-shadow: var(--shadow-lift); }
.on-ground .btn-ghost {
  border-color: var(--border);
  color: var(--ink);
  background: var(--surface);
}
.on-ground .btn-ghost:hover { border-color: var(--green); color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .btn:hover svg { transform: none; }
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 1.4rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .32rem .75rem;
  border: 1px solid var(--band-border);
  border-radius: 999px;
  font-size: .8125rem;
  color: var(--band-muted);
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--band-green);
  opacity: .8;
}

/* --- Profil altimétrique ------------------------------------------------- */

.profile {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(2rem, 1rem + 4vw, 3.5rem);
}

/* Crête brune, comme dans l’application depuis le 2026-09-24 : c’est la
   couleur des courbes de niveau des cartes topographiques, et elle distingue
   d’un coup d’œil une coupe de terrain d’un élément d’interface. */
.profile .line {
  fill: none;
  stroke: var(--band-crest);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile .fill { fill: url(#under); }
.profile .stop-sol-haut { stop-color: var(--band-crest); stop-opacity: .22; }
.profile .stop-sol-bas { stop-color: var(--band-crest); stop-opacity: 0; }

.profile .sun { fill: var(--band-crest); opacity: .22; }
/* Le sommet est une information : il prend le vert des marqueurs, jamais le
   violet, qui ne porte rien dans la palette. */
.profile .marker-ring { fill: none; stroke: var(--band-green); stroke-width: 1.5; opacity: .45; }
.profile .marker { fill: var(--band-green); }
.profile .base { stroke: var(--band-border); stroke-width: 1; }

@media (prefers-reduced-motion: no-preference) {
  .profile .line {
    stroke-dasharray: 1700;
    stroke-dashoffset: 1700;
    animation: draw 2.2s var(--ease) .5s forwards;
  }
  .profile .fill,
  .profile .marker { opacity: 0; animation: fade 1s ease 1.9s forwards; }
  .profile .sun { opacity: 0; animation: fade-sun 1s ease 1.9s forwards; }
  .profile .marker-ring { opacity: 0; animation: fade-ring 1s ease 1.9s forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes fade-sun { to { opacity: .22; } }
@keyframes fade-ring { to { opacity: .45; } }

/* --- Bande de chiffres --------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  background: var(--band-border);
  border: 1px solid var(--band-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stats div {
  background: var(--band);
  padding: 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.stats dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--band-muted);
  order: 2;
}
.stats dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--band-text);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  order: 1;
  line-height: 1.1;
}

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

section { padding-block: clamp(4rem, 2.5rem + 5vw, 7rem); }
.hero + section { padding-top: clamp(4.5rem, 3rem + 6vw, 8rem); }
.section-head { display: flex; flex-direction: column; gap: .85rem; max-width: var(--measure); }
.section-body { margin-top: 2.75rem; }

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

/* Révélation au défilement. Le masquage n’existe que si le script a tourné :
   sans JavaScript, tout est visible d’emblée. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-2 { transition-delay: .08s; }
.js .reveal-3 { transition-delay: .16s; }
.js .reveal-4 { transition-delay: .24s; }
.js .reveal-5 { transition-delay: .32s; }
.js .reveal-6 { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Grille de fonctions ------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 1rem;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
/* Un filet vert apparaît en tête de carte au survol — le seul mouvement. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--green) 30%, var(--border));
}
.card:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
  .card::before { transition: none; }
}

.card p { font-size: .9375rem; }
/* Pastille : fond doux violet, texte violet profond — le couple `softSurface`
   / `onSoftSurface` de l’application. */
.card .tag {
  align-self: flex-start;
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-soft);
  background: var(--soft);
  padding: .25rem .6rem;
  border-radius: 999px;
}

/* --- Bloc sécurité ------------------------------------------------------- */

.band {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  box-shadow: var(--shadow);
}
.band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.75rem;
  margin-top: 2.25rem;
}
.band-grid h3 { margin-bottom: .35rem; }
.band-grid p { font-size: .9375rem; }

.callout {
  background: var(--soft);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.35rem;
  margin-top: 2.25rem;
  border-left: 3px solid var(--green);
}
.callout p { color: var(--ink); font-size: .9375rem; }

/* --- Listes de faits ----------------------------------------------------- */

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.facts li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .9375rem;
  color: var(--ink-soft);
}
.facts svg { width: 1.25rem; height: 1.25rem; margin-top: .22rem; color: var(--green); }
.facts strong { color: var(--ink); font-weight: 600; }

.sources { display: grid; gap: 0; margin: 0; padding: 0; }
.sources div {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: .25rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.sources div:first-child { border-top: 1px solid var(--border); }
.sources dt { font-weight: 600; color: var(--ink); font-size: .9375rem; }
.sources dd { margin: 0; color: var(--ink-soft); font-size: .9375rem; }
@media (max-width: 40rem) {
  .sources div { grid-template-columns: 1fr; }
}

/* --- Questions ----------------------------------------------------------- */

.faq { display: grid; gap: .5rem; max-width: 48rem; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding-inline: 1.35rem;
  transition: border-color .3s var(--ease);
}
.faq details:hover,
.faq details[open] { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.faq summary {
  cursor: pointer;
  padding-block: 1.05rem;
  font-weight: 600;
  font-size: .9375rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details p { padding-bottom: 1.25rem; font-size: .9375rem; max-width: var(--measure); }
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

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

.cta {
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.cta .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.cta h2 { max-width: 20ch; }
.cta p { margin-top: .6rem; max-width: 32rem; }

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

.site-foot {
  border-top: 1px solid var(--border);
  padding-block: 2.75rem 3.5rem;
  font-size: .875rem;
  color: var(--ink-muted);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.site-foot p { color: var(--ink-muted); font-size: .875rem; }
.site-foot .note { margin-top: 1.75rem; max-width: 40rem; }

/* --- Pages intérieures --------------------------------------------------- */

.page { padding-block: clamp(2.5rem, 1rem + 4vw, 4rem) 1rem; }
.page h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); }
.page .lead { margin-top: 1.1rem; font-size: 1.0625rem; max-width: var(--measure); }
.page section { padding-block: 2.5rem 0; }
.page h2 { font-size: 1.3rem; margin-bottom: .75rem; }
.page p + p { margin-top: .85rem; }
.page ul { padding-left: 1.15rem; margin: 1rem 0 0; color: var(--ink-soft); }
.page li { margin-bottom: .5rem; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .9rem;
  align-items: start;
  color: var(--ink-soft);
  margin: 0;
}
.steps li::before {
  content: counter(step);
  font-family: var(--display);
  font-weight: 600;
  font-size: .875rem;
  color: var(--on-soft);
  background: var(--soft);
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
}