/* ═══════════════════════════════════════════════════════════
   PAGES LÉGALES — mentions légales, politique de confidentialité
   S'appuie sur les tokens de styles.css ; page statique, sans
   défilement lissé ni animation. En-tête en carte pastel (comme
   les étapes), puis une carte blanche par section, sommaire collant.
   Même toile blanche que le site, texte en encre partout.
   ═══════════════════════════════════════════════════════════ */

body.legal { background: var(--bone); }
html:has(body.legal) { scroll-behavior: smooth; }

/* ── barre du haut : même dessin que le dock, toujours visible ── */
.legal-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--gutter);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--frost);
}
.legal-bar .dock-wordmark { font-size: 19px; }
.legal-back { font-size: 15px; color: var(--lime); }
.legal-back:hover { color: var(--indigo-hover); }

.legal-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 5vh, 56px) var(--gutter) 96px;
}

/* ── en-tête : carte pastel (le ruban étalé), texte en encre ── */
.legal-hero {
  --a: var(--step-1a); --b: var(--step-1b); --c: var(--step-1c); --d: var(--step-1d);
  position: relative; overflow: hidden;
  border-radius: 28px;
  padding: clamp(36px, 6vw, 72px) clamp(28px, 5vw, 64px);
  color: var(--ink);
  background:
    radial-gradient(70% 90% at 100% 100%, var(--d) 0%, transparent 70%),
    radial-gradient(60% 80% at 88% 0%, var(--c) 0%, transparent 70%),
    radial-gradient(70% 100% at 0% 100%, var(--b) 0%, transparent 75%),
    linear-gradient(135deg, var(--a) 0%, var(--b) 60%, var(--c) 100%);
}
.legal-hero.is-privacy { --a: var(--step-3a); --b: var(--step-3b); --c: var(--step-3c); --d: var(--step-3d); }
.legal-hero > * { position: relative; }
.legal-hero .legal-kicker { color: rgba(var(--ink-rgb), 0.72); margin-bottom: 18px; }
.legal-hero h1 {
  font-size: clamp(38px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.035em;
  max-width: 11em;
}
.legal-hero .legal-lead {
  margin-top: 20px; max-width: 34em;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45;
  color: rgba(var(--ink-rgb), 0.82);
}
.legal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.legal-chip {
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink); border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(255, 255, 255, 0.5);
}
/* grand chiffre en filigrane, comme le numéro des cartes d'étapes */
.legal-mark {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: -0.18em;
  font-size: clamp(120px, 20vw, 260px); line-height: 1; font-weight: 300;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.72);   /* reflet blanc sur le pastel, comme le numéro des étapes */
  pointer-events: none; user-select: none;
}

/* ── corps : sommaire collant | cartes ── */
.legal-body {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px; margin-top: 40px; align-items: start;
}
.legal-toc { position: sticky; top: 88px; }
.legal-toc p { margin-bottom: 14px; }
.legal-toc ol { list-style: none; border-left: 1px solid var(--frost); }
.legal-toc a {
  display: flex; gap: 10px;
  padding: 6px 0 6px 16px; margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 14px; line-height: 1.35; color: var(--ash);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.legal-toc a span { font-feature-settings: "tnum" on; color: var(--lilac); transition: color .2s var(--ease-out); }
.legal-toc a:hover, .legal-toc a.is-active { color: var(--ink); border-left-color: var(--lime); }
.legal-toc a:hover span, .legal-toc a.is-active span { color: var(--lime); }

.legal-cards { display: flex; flex-direction: column; gap: 16px; }
.legal-card {
  scroll-margin-top: 80px;
  background: #fff;
  border: 1px solid var(--frost);
  border-radius: 20px;
  padding: clamp(24px, 3.4vw, 40px);
  font-size: 17px; line-height: 1.6;
}
.legal-card h2 {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.02em;
  margin-bottom: 20px;
}
/* numéro de section : pastille lilas, chiffre indigo */
.legal-num {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: #eeedff; color: var(--lime);
  font-size: 15px; font-weight: 500; letter-spacing: 0;
  font-feature-settings: "tnum" on;
}
.legal-card p { color: rgba(var(--ink-rgb), 0.82); }
.legal-card p + p { margin-top: 12px; }
.legal-card strong { font-weight: 500; color: var(--ink); }
.legal-card a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-card a:hover { color: var(--indigo-hover); }

.legal-card ul { margin: 14px 0; }
.legal-card ul:last-child { margin-bottom: 0; }
.legal-card li { position: relative; padding-left: 22px; color: rgba(var(--ink-rgb), 0.82); }
.legal-card li + li { margin-top: 8px; }
.legal-card li::before {
  content: ''; position: absolute; left: 3px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
}

/* fiche d'identité : registre libellé | valeur, filets fins */
.legal-dl { display: grid; grid-template-columns: 200px 1fr; }
.legal-dl dt, .legal-dl dd { padding: 11px 0; border-top: 1px solid var(--frost); }
.legal-dl dt:first-of-type, .legal-dl dd:first-of-type { border-top: 0; padding-top: 0; }
.legal-dl dt { font-weight: 500; color: var(--ink); }
.legal-dl dd { margin: 0; color: rgba(var(--ink-rgb), 0.82); }

/* tuiles : sous-traitants, droits, durées */
.legal-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px; margin: 16px 0;
}
.legal-tiles:last-child { margin-bottom: 0; }
.legal-tile {
  padding: 16px 18px; border-radius: 14px;
  background: var(--white); border: 1px solid var(--frost);
  font-size: 15px; line-height: 1.45; color: rgba(var(--ink-rgb), 0.74);
}
.legal-tile strong { display: block; margin-bottom: 4px; font-size: 16px; }
.legal-tile .legal-big {
  display: block; margin-bottom: 2px;
  font-size: 30px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 300; color: var(--lime);
}

/* encadré : à retenir, contact pour exercer ses droits */
.legal-note {
  margin-top: 18px; padding: 16px 20px; border-radius: 14px;
  background: #eeedff; color: var(--ink) !important;
}

/* ce qu'on n'utilise pas : étiquettes barrées sobrement */
.legal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.legal-tag {
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--frost); background: var(--white);
  font-size: 14px; color: var(--ash);
}
.legal-tag::before { content: '✕'; margin-right: 8px; color: var(--flow-deep-3); }

.legal-date { margin-top: 28px; text-align: center; }

/* pied de page : la barre .footer-bottom du site (styles.css), telle quelle */
.legal-foot { padding: 0 var(--gutter) 48px; }
.legal-foot .footer-bottom { margin-top: 0; }
.legal-foot .footer-legal a[aria-current="page"] { color: var(--ink); }

@media (max-width: 960px) {
  .legal-body { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
  .legal-toc { display: none; }
}
@media (max-width: 640px) {
  .legal-hero { border-radius: 22px; }
  .legal-card { font-size: 16px; border-radius: 18px; }
  .legal-card h2 { gap: 12px; }
  .legal-num { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
  .legal-dl { grid-template-columns: 1fr; }
  .legal-dl dd { border-top: 0; padding-top: 0; }
  .legal-dl dt:first-of-type { padding-top: 0; }
}