/* ============================================================
   OufMatch — Vitrine : layout & sections
   S'appuie sur les variables de tokens.css. Aucun build, aucun CDN.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

/* Conteneur centré standard */
.wrap {
  width: 100%;
  max-width: var(--maxw-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Rythme vertical des sections */
.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.bg-paper  { background: var(--paper); }
.bg-sand   { background: var(--sand); }
.bg-night  { background: var(--night); color: var(--fg-inverse); }
.bg-night h1, .bg-night h2, .bg-night h3 { color: var(--fg-inverse); }
.bg-night p { color: rgba(250,246,239,0.82); }

/* En-tête de section centré */
.section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: var(--s-7); }
.section-head p { color: var(--fg-muted); font-size: var(--fs-lead); margin-top: var(--s-3); }

/* Liens "boutons" — réutilise .btn de tokens.css en <a> */
a.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
a.btn:hover { color: var(--night); }
.btn-ghost { color: var(--night); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------------- Cadre décoratif latéral (desktop ≥1024px, façon Gallicus) ---------------- */
.frame { display: none; }
@media (min-width: 1024px) {
  .frame { display: block; pointer-events: none; }
  .frame__rail { position: fixed; top: 0; bottom: 0; width: 2px; background: var(--line-strong); z-index: 60; }
  .frame__rail--left  { left: 50px; }
  .frame__rail--right { right: 50px; }
  /* Barres horizontales fixes : la ligne du haut épouse le bas de la nav, celle du bas le pied de fenêtre */
  .frame__bar { position: fixed; left: 0; right: 0; height: 2px; background: var(--line-strong); z-index: 60; }
  .frame__bar--top    { top: var(--nav-h); }
  .frame__bar--bottom { bottom: 0; }
  .frame__node {
    position: fixed; width: 32px; height: 32px; border-radius: 999px;
    background: var(--cream); border: 1.5px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    z-index: 61; box-shadow: var(--sh-sm);
  }
  .frame__node img { width: 20px; height: 20px; }
  /* Icônes statiques, posées pile sur le croisement rail × barre horizontale (bas uniquement) */
  .frame__node--bl { left: 35px; bottom: 0; }
  .frame__node--br { right: 35px; bottom: 0; }
}

/* ---------------- Séparateurs de section + nœuds de croisement (desktop) ---------------- */
.divider { position: relative; height: 0; border-top: 2px solid var(--line); }
.divider__node { display: none; }
@media (min-width: 1024px) {
  .divider__node {
    position: absolute; top: 0; width: 30px; height: 30px; border-radius: 999px;
    background: var(--cream); border: 1.5px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); z-index: 63;
  }
  .divider__node img { width: 18px; height: 18px; }
  .divider__node--l { left: 51px; transform: translate(-50%, -50%); }
  .divider__node--r { right: 51px; transform: translate(50%, -50%); }
}

/* Comète de progression qui descend les rails avec le scroll (desktop) */
.rail-comet { display: none; }
@media (min-width: 1024px) {
  .rail-comet {
    display: block;
    position: fixed; width: 12px; height: 12px; border-radius: 999px;
    background: var(--coral); box-shadow: 0 0 0 5px var(--tint-coral), var(--sh-coral);
    z-index: 64; pointer-events: none; transition: top 90ms linear;
  }
  .rail-comet--l { left: 51px; transform: translate(-50%, -50%); }
  .rail-comet--r { right: 51px; transform: translate(50%, -50%); }
}

/* Bouton ghost sur fond sombre (CTA night) */
.btn-ghost--dark { background: transparent; color: var(--cream); border-color: rgba(250,246,239,0.55); }
.btn-ghost--dark:hover { background: var(--cream); color: var(--night); border-color: var(--cream); }

/* ---------------- NAV ---------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--night);
  border-bottom: 1px solid rgba(250,246,239,0.12);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.brand__word { font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--night); }
.brand__word .ouf { font-weight: 800; }
.brand__word .match { font-weight: 600; }
.nav .brand__word { color: var(--cream); }
.nav__links { display: flex; align-items: center; gap: var(--s-6); }
.nav__links a:not(.btn) { color: rgba(250,246,239,0.82); font-weight: 600; font-size: var(--fs-body-sm); }
.nav__links a:not(.btn):hover { color: var(--sun); }
/* Nav en 3 zones : logo à gauche · liens centrés sur la page · actions à droite (desktop) */
.nav__menu { display: contents; }
.nav__actions { display: flex; align-items: center; gap: var(--s-4); }
@media (min-width: 861px) {
  .nav .wrap { max-width: 100%; padding-inline: clamp(20px, 4vw, 48px); }
  .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .nav__links { justify-self: center; }
  .nav__actions { justify-self: end; }
}
/* Bouton ghost « Se connecter » adapté au fond sombre de la nav */
.nav .btn-ghost { background: transparent; color: var(--cream); border-color: rgba(250,246,239,0.55); }
.nav .btn-ghost:hover { background: var(--cream); color: var(--night); border-color: var(--cream); }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--cream); margin: 5px 0; border-radius: 2px; }

/* ---------------- HERO (mot OUF géant posé en bas) ---------------- */
.hero {
  position: relative;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding-block: clamp(16px, 3.5vh, 44px) 0;
}
.hero h1 { font-size: var(--fs-display); margin: var(--s-4) 0 0; }
.accent { color: var(--coral); }
.hero .wrap { position: relative; z-index: 3; margin-top: auto; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5); margin-top: var(--s-7); }
.trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: var(--fs-body-sm); font-weight: 600; }
.trust .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--mint); }

/* Bouton CTA : écart serré sous les bullets (titre rapproché), air libre en dessous jusqu'au OUF */
.hero .cta-row { justify-content: center; margin-top: var(--s-7); margin-bottom: auto; position: relative; z-index: 3; }

/* Mot OUF géant — dégradé de marque, posé au ras du bas, entièrement visible */
.hero__ouf { width: 100%; text-align: center; line-height: 0.70; position: relative; z-index: 2; pointer-events: none; user-select: none; }
.hero__ouf span {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: min(37vw, 48vh);           /* borné par la largeur ET la hauteur → toujours entier */
  letter-spacing: -0.015em;
  margin-bottom: -0.03em;               /* pose le bas des lettres au ras du bord sans le rogner */
  background: linear-gradient(98deg, var(--coral) 0%, var(--sun) 42%, var(--mint) 72%, var(--berry) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Déco flottante du hero (mini-cartes produit + taches) — desktop uniquement */
.hd-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
@media (min-width: 1025px) {
  /* Hero = exactement un écran (hauteur fixe → jamais de scroll pour voir le bas du OUF) */
  .hero { height: calc(100svh - var(--nav-h)); min-height: 0; justify-content: flex-start; }
  /* Chaque section remplit la hauteur de l'écran, contenu centré verticalement */
  .section {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 1024px) {
  .hd-layer { display: none; }
  .hero__ouf span { font-size: min(44vw, 33vh); }   /* mot adapté au mobile */
}

/* Taches organiques de fond */
.hd-blob { position: absolute; border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%; opacity: .5; filter: blur(2px); z-index: 0; }

/* Avatars (cercle coloré + silhouette) */
.hd-ava { position: absolute; display: grid; place-items: center; border-radius: 999px; box-shadow: var(--sh-md); background: var(--bg, var(--tint-coral)); }
.hd-ava svg { width: 62%; height: 62%; }

/* Mini-cartes type UI produit */
.hd-card { position: absolute; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 14px 16px; }
.hd-card .bar { display: block; height: 9px; border-radius: 999px; background: #E7E3DC; }
.hd-score { font-family: var(--font-display); font-weight: 800; color: var(--cream); background: var(--coral); border-radius: 999px; padding: 3px 10px; font-size: 14px; line-height: 1.2; }

/* Carte profil */
.hd-card--profile { width: 230px; display: flex; align-items: center; gap: 12px; }
.hd-card--profile .hd-ava { position: static; width: 44px; height: 44px; box-shadow: none; }
.hd-card--profile .lines { flex: 1; display: grid; gap: 7px; }
.hd-card--profile .lines .bar.n { width: 78%; height: 10px; background: #D9D4CC; }
.hd-card--profile .lines .bar.s { width: 52%; }

/* Carte classement */
.hd-card--rank { width: 250px; display: grid; gap: 11px; }
.hd-card--rank .rtitle { font-family: var(--font-display); font-weight: 800; color: var(--night); font-size: 14px; margin-bottom: 2px; }
.hd-rrow { display: flex; align-items: center; gap: 10px; }
.hd-rrow .hd-ava { position: static; width: 28px; height: 28px; box-shadow: none; }
.hd-rrow .bar { flex: 1; }
.hd-rrow .hd-score { font-size: 12px; padding: 2px 8px; }
.hd-rrow.top .bar { background: var(--tint-coral); }

/* Carte rapport */
.hd-card--report { width: 210px; display: grid; gap: 9px; }
.hd-card--report .rhead { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; color: var(--night); font-size: 13px; }
.hd-check { width: 22px; height: 22px; border-radius: 999px; background: var(--mint); display: grid; place-items: center; }
.hd-check svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hd-card--report .bar.r1 { width: 100%; } .hd-card--report .bar.r2 { width: 86%; } .hd-card--report .bar.r3 { width: 64%; }

/* Pile de CV */
.hd-cv { position: absolute; width: 128px; height: 158px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-md); padding: 16px 14px; display: grid; gap: 9px; align-content: start; }
.hd-cv .bar { height: 8px; border-radius: 999px; background: #E7E3DC; }
.hd-cv .bar.t { width: 60%; height: 11px; background: #D9D4CC; }
.hd-cv .bar.x { width: 84%; } .hd-cv .bar.y { width: 70%; } .hd-cv .bar.z { width: 90%; }

/* ---------------- GRILLES ---------------- */
.grid { display: grid; gap: var(--s-5); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.feature h3 { margin: var(--s-3) 0 var(--s-2); }
.feature p { color: var(--fg-muted); font-size: var(--fs-body-sm); margin: 0; }
.feature .ic {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--tint-coral);
}
.feature .ic svg { width: 24px; height: 24px; stroke: var(--coral); }

/* ---------------- ÉTAPES (pipeline) ---------------- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 64px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--coral); color: var(--cream);
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  display: grid; place-items: center;
}
.step h3 { margin: 0 0 var(--s-2); }
.step p { color: var(--fg-muted); margin: 0; }

/* ---------------- PREUVE / CHIFFRES ---------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 52px); color: var(--coral); line-height: 1; }
.stat .lbl { color: var(--fg-muted); font-size: var(--fs-body-sm); margin-top: var(--s-2); }

/* Points de soulagement — cartes en quinconce reliées par un trait vertical central */
.reliefs { position: relative; max-width: 980px; margin: 0 auto; }
.reliefs::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 24px; bottom: 24px; width: 2px; background: var(--night); }
.r-row { position: relative; display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.r-row + .r-row { margin-top: var(--s-6); }
.r-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 999px; background: var(--coral); box-shadow: 0 0 0 5px var(--tint-coral); z-index: 1; }
.r-card { grid-column: 1; display: flex; align-items: center; gap: var(--s-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: var(--s-5) var(--s-6); }
.r-row:nth-child(even) .r-card { grid-column: 3; flex-direction: row-reverse; text-align: right; }
.r-card__img { flex: 0 0 88px; width: 88px; }
.r-card__img svg { width: 100%; height: auto; filter: drop-shadow(0 6px 12px rgba(32,34,58,0.10)); }
.r-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.15; margin: 0 0 6px; color: var(--night); }
.r-card p { color: var(--fg-muted); margin: 0; font-size: var(--fs-body); }
/* Glissé latéral au scroll : carte gauche depuis la gauche, carte droite depuis la droite */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .r-row.reveal { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal-on .r-row.reveal:nth-child(odd)  { transform: translateX(-46px); }
  .reveal-on .r-row.reveal:nth-child(even) { transform: translateX(46px); }
  .reveal-on .r-row.reveal.is-visible { transform: none; opacity: 1; }
}
@media (max-width: 820px) {
  .reliefs::before, .r-node { display: none; }
  .r-row { grid-template-columns: 1fr; }
  .r-card, .r-row:nth-child(even) .r-card { grid-column: 1; flex-direction: row; text-align: left; }
}

/* ---------------- TARIFS ---------------- */
.price { text-align: center; position: relative; display: flex; flex-direction: column; padding-top: var(--s-6); }
.price__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--coral); }
.price__amount { font-family: var(--font-display); font-weight: 800; font-size: 48px; color: var(--night); margin: var(--s-2) 0 0; line-height: 1; }
.price__unit { color: var(--fg-muted); font-size: var(--fs-caption); }
.price__bonus { margin: var(--s-3) auto 0; }
.price__sep { height: 1px; background: var(--line); margin: var(--s-4) auto; width: 60%; }
.price__euro { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--night); line-height: 1; }
.price__per { color: var(--fg-muted); font-size: var(--fs-meta); margin-top: 4px; }
.price__save { color: var(--mint-deep); font-weight: 700; font-size: var(--fs-body-sm); margin-top: var(--s-2); }
.price__cta { margin-top: auto; padding-top: var(--s-5); }
/* Cartes mises en avant */
.price--popular { border-color: var(--coral); box-shadow: var(--sh-coral); }
.price--value   { border-color: var(--berry); box-shadow: 0 4px 14px rgba(108,92,231,0.28); }
.price__ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream);
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.price__ribbon--popular { background: var(--coral); }
.price__ribbon--value   { background: var(--berry); }
@keyframes ribbon-pop {
  0%   { transform: translateX(-50%) scale(1) rotate(0); }
  40%  { transform: translateX(-50%) scale(1.12) rotate(-3deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0); }
}

/* ---------------- FAQ (native details, zéro JS) ---------------- */
.faq { max-width: var(--maxw-prose); margin-inline: auto; }
.faq details {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-3);
}
.faq summary {
  cursor: pointer; list-style: none; font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-h4); color: var(--night);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; color: var(--coral); line-height: 1; transition: transform var(--t-base) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--fg-muted); margin: var(--s-3) 0 0; }

/* ---------------- CTA final ---------------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 640px; margin: 0 auto var(--s-5); }
.cta-band .cta-row { justify-content: center; }

/* ---------------- FOOTER ---------------- */
.footer { padding-block: var(--s-8) var(--s-6); }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-6); }
.footer .brand__word { color: var(--cream); }
.footer__col h3 { color: var(--cream); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); margin: 0 0 var(--s-3); }
.footer__col a { display: block; color: rgba(250,246,239,0.78); font-size: var(--fs-body-sm); margin-bottom: var(--s-2); }
.footer__col a:hover { color: var(--sun); }
.footer__legal { border-top: 1px solid rgba(250,246,239,0.14); padding-top: var(--s-5); font-size: var(--fs-meta); color: rgba(250,246,239,0.62); }
.footer__legal a { color: var(--sun); text-decoration: underline; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 860px) {
  .grid-3, .grid-2, .stats { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .nav__menu { display: none; }
  .nav__menu.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--night); border-bottom: 1px solid rgba(250,246,239,0.12);
    padding: var(--s-5) var(--gutter); z-index: 50;
  }
  .nav__menu.open .nav__links { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .nav__menu.open .nav__actions { gap: var(--s-3); margin-top: var(--s-2); }
  .nav__toggle { display: block; }
}

@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

/* Illustration « pile de CV » (section Comment ça marche) */
.process-visual { display: flex; justify-content: center; margin: var(--s-3) auto var(--s-6); }
.process-visual svg { width: min(330px, 80%); height: auto; }

/* ============================================================
   Interactions & animations
   ============================================================ */

/* Survol — les cartes prennent un léger relief, comme les boutons */
.card { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
  /* Packs tarifs — survol plus marqué : la carte se soulève et grandit, le prix s'allume, le ruban tressaute */
  .price { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
  .price:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--sh-lg); }
  .price__amount { transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease); }
  .price:hover .price__amount { color: var(--coral); transform: scale(1.08); }
  .price:hover .price__ribbon { animation: ribbon-pop 0.5s var(--ease); }
  .btn-ghost:hover,
  .btn-ghost--dark:hover { transform: translateY(-2px); }
  a.btn:active,
  .btn:active { transform: translateY(0); }
}

/* Survol plus joueur sur les cartes Fonctionnalités : l'icône s'allume et rebondit */
.feature { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.feature .ic { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .25s var(--ease); }
.feature .ic svg { transition: stroke .25s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .feature:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--coral); }
  .feature:hover .ic { transform: scale(1.12) rotate(-6deg); background: var(--coral); }
  .feature:hover .ic svg { stroke: var(--cream); }
}

/* Entrée du hero au chargement, en cascade */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ouf-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .hero .wrap > * { animation: ouf-rise .7s var(--ease) both; }
  .hero .wrap > *:nth-child(1) { animation-delay: .05s; }
  .hero .wrap > *:nth-child(2) { animation-delay: .14s; }
  .hero .wrap > *:nth-child(3) { animation-delay: .23s; }
  .hero .wrap > *:nth-child(4) { animation-delay: .32s; }
  .hero .wrap > *:nth-child(5) { animation-delay: .41s; }
  .hero > .cta-row { animation: ouf-rise .7s var(--ease) both; animation-delay: .28s; }
  .hero__ouf { animation: ouf-rise .9s var(--ease) both; animation-delay: .40s; }
}

/* ---------------- PAGES LÉGALES (mentions, confidentialité, CGU) ---------------- */
.legal { max-width: 760px; }
.legal h1 { font-family: var(--font-display); font-weight: 800; color: var(--night); font-size: clamp(30px, 5vw, 42px); line-height: 1.1; margin: 0; }
.legal__date { color: var(--fg-muted); font-size: var(--fs-body-sm); margin-top: var(--s-3); }
.legal h2 { font-family: var(--font-display); font-weight: 800; color: var(--night); font-size: 22px; margin: var(--s-7) 0 var(--s-2); }
.legal p, .legal li { color: var(--fg-muted); font-size: var(--fs-body); line-height: 1.75; }
.legal p { margin: var(--s-2) 0; }
.legal ul { padding-left: 1.25em; margin: var(--s-2) 0; display: grid; gap: 6px; }
.legal a { color: var(--coral); text-decoration: underline; }
.legal strong { color: var(--night); font-weight: 700; }

/* Apparition au scroll — activée par JS (.reveal-on). Sans JS, tout reste visible. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal-on .reveal.is-visible { opacity: 1; transform: none; }
}

/* Accessibilité — réduit le mouvement si demandé */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}