/* ── LEGAL.CSS — pages satellites (noindex, faible trafic) ──
   Couvre : mentions-legales.html, politique-confidentialite.html, merci.html, 404.html
   Aligné sur le langage high-end du site : hero éditorial (cf. page-hero.css),
   cartes bevel (recette .card de domain.css), accents teal lisibles AA dans les 2 thèmes. */

/* ============================================================
   HERO ÉDITORIAL — mentions-légales + politique-confidentialité
   (même famille visuelle que .page-hero : fond ink + glows + eyebrow)
   ============================================================ */
.legal-hero{
  background:var(--ink-fixed);color:white;
  padding:clamp(92px,11vw,144px) clamp(16px,6vw,80px) clamp(60px,7vw,92px);
  position:relative;overflow:hidden;
}
.legal-hero::before{
  content:'';position:absolute;top:-200px;right:-180px;width:600px;height:600px;
  background:radial-gradient(circle,color-mix(in srgb,var(--teal) 22%,transparent) 0%,transparent 60%);
  pointer-events:none;
}
.legal-hero::after{
  content:'';position:absolute;bottom:-160px;left:-120px;width:460px;height:460px;
  background:radial-gradient(circle,color-mix(in srgb,var(--sea) 16%,transparent) 0%,transparent 60%);
  pointer-events:none;
}
.legal-hero-inner{max-width:760px;position:relative;z-index:1;}
.legal-eyebrow{
  display:inline-block;
  font-family:'Outfit',sans-serif;font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.3em;
  /* 70 % et non 90 % (même réglage que page-hero.css) : 4,3:1 seulement à 390 px. */
  color:color-mix(in srgb,var(--sea) 70%,white);
  padding:7px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--teal) 26%,transparent);
  border:1px solid color-mix(in srgb,var(--sea) 38%,transparent);
  margin-bottom:24px;
}
.legal-hero h1{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(2rem,4.6vw,3.4rem);
  letter-spacing:-.03em;line-height:1.02;
  color:white;margin:0 0 18px;text-wrap:balance;
}
.legal-hero p{
  font-family:'Outfit',sans-serif;font-weight:300;
  font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.6;
  color:color-mix(in srgb,#fff 72%,transparent);
  max-width:600px;margin:0;
}

/* ============================================================
   CONTENU — articles en cartes bevel (recette .card de domain.css)
   ============================================================ */
/* div.legal : le <main> englobe aussi le héros (le lien d'évitement mène au H1). */
div.legal{max-width:820px;margin:0 auto;padding:clamp(56px,7vw,96px) clamp(16px,4vw,40px);counter-reset:legalsec;}

.legal-update{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;
  background:color-mix(in srgb,var(--teal) 8%,transparent);
  padding:7px 16px;border-radius:999px;margin-bottom:28px;
  border:1px solid color-mix(in srgb,var(--sea) 22%,transparent);
}

.legal-card{
  counter-increment:legalsec;
  position:relative;
  background:var(--cream);
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--ink-fixed) 6%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 24px color-mix(in srgb,var(--ink-fixed) 5%,transparent);
  padding:clamp(24px,3.5vw,34px) clamp(22px,3vw,36px);
  margin-bottom:18px;
}
.legal-card::before{
  content:counter(legalsec,decimal-leading-zero);
  display:block;
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:.92rem;letter-spacing:.04em;
  margin-bottom:6px;
}
div.legal h2{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.6rem);color:var(--ink);
  line-height:1.15;letter-spacing:-.01em;margin:0 0 14px;
}
div.legal h3{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--ink);margin:18px 0 8px;}
div.legal p,div.legal li{font-size:1rem;color:var(--slate);line-height:1.7;margin-bottom:12px;}
div.legal p{max-width:68ch;}
div.legal p:last-child,div.legal li:last-child{margin-bottom:0;}
div.legal ul{padding-left:22px;margin-bottom:0;}
div.legal li{margin-bottom:8px;}
div.legal a{text-decoration:underline;text-underline-offset:2px;transition:color .2s var(--ease);}
div.legal strong{color:var(--ink);font-weight:600;}

/* Tableau RGPD (politique-confidentialité uniquement) */
.data-table{width:100%;border-collapse:collapse;margin:14px 0 4px;font-size:.9rem;}
.data-table th,.data-table td{text-align:left;padding:11px 13px;border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);}
.data-table thead th{background:color-mix(in srgb,var(--teal) 7%,transparent);color:var(--ink);font-weight:700;border-bottom:1px solid color-mix(in srgb,var(--teal) 18%,transparent);}
.data-table tbody tr:last-child td{border-bottom:0;}
.data-table td{color:var(--muted);line-height:1.55;}
@media(max-width:600px){.data-table{font-size:.82rem;}.data-table th,.data-table td{padding:8px;}}

/* ============================================================
   MERCI.HTML — confirmation centrée (+ réutilisé par 404.html)
   ============================================================ */
main.merci{max-width:720px;margin:0 auto;padding:clamp(64px,10vw,128px) clamp(20px,5vw,40px);text-align:center;}
.merci-icon{width:88px;height:88px;border-radius:50%;background:color-mix(in srgb,var(--sea) 15%,transparent);color:var(--sea);display:inline-flex;align-items:center;justify-content:center;margin-bottom:32px;animation:esfMerciPop .4s var(--ease) both;}
.merci-icon svg{width:44px;height:44px;}
.merci-icon svg polyline{stroke-dasharray:1;stroke-dashoffset:1;animation:esfMerciDraw .5s var(--ease) .18s forwards;}
@keyframes esfMerciPop{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes esfMerciDraw{to{stroke-dashoffset:0;}}
@media(prefers-reduced-motion:reduce){
  .merci-icon{animation:none;transform:none;opacity:1;}
  .merci-icon svg polyline{animation:none;stroke-dashoffset:0;}
}
.merci-eyebrow{
  display:inline-block;font-family:'Outfit',sans-serif;font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.28em;
  padding:6px 15px;border-radius:999px;margin-bottom:22px;
  background:color-mix(in srgb,var(--teal) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--teal) 22%,transparent);
}
.merci h1{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:clamp(2rem,4.5vw,3rem);letter-spacing:-.02em;line-height:1.04;color:var(--ink);margin-bottom:20px;text-wrap:balance;}
.merci p{font-size:clamp(.95rem,1.7vw,1.05rem);color:var(--muted);line-height:1.7;margin-bottom:32px;}
.merci-lede{font-size:clamp(1rem,1.8vw,1.15rem);color:var(--ink);font-weight:500;margin-bottom:12px;line-height:1.55;}
.merci-sub{color:var(--muted);margin-bottom:32px;font-size:.95rem;}
.merci-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:24px;}
.merci-actions a{font-family:'Outfit',sans-serif;font-weight:600;text-decoration:none;border-radius:999px;padding:13px 26px;font-size:.95rem;transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .25s var(--ease),opacity .15s;}
.btn-primary{background:var(--ink-fixed);color:var(--cream-fixed);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 22px color-mix(in srgb,var(--ink-fixed) 20%,transparent);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 14px 30px color-mix(in srgb,var(--ink-fixed) 26%,transparent);}
.btn-primary:active{transform:translateY(0) scale(.98);opacity:.92;}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ink) 32%,transparent);}
.btn-secondary:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);transform:translateY(-2px);}
.btn-secondary:active{transform:translateY(0) scale(.98);opacity:.85;}
.btn-tertiary{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:color-mix(in srgb,var(--teal) 8%,transparent);border:1px solid color-mix(in srgb,var(--teal) 24%,transparent);font-weight:600;font-size:.95rem;}
.btn-tertiary:hover{background:color-mix(in srgb,var(--teal) 14%,transparent);transform:translateY(-2px);}
.btn-tertiary:active{transform:translateY(0) scale(.98);opacity:.9;}
.merci-hint{margin-top:32px;font-size:.9rem;color:var(--muted);max-width:520px;margin-left:auto;margin-right:auto;line-height:1.6;}

/* 404 — réutilise le layout merci ; accent teal (ce n'est pas un succès) */
.merci-icon--alt{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal);}

/* ============================================================
   Accents teal lisibles AA dans les 2 thèmes (cf. lessons 2026-06-01).
   Aucune couleur statique ne passe AA sur cream clair ET carte sombre :
   teal foncé par défaut → bascule --sea en mode sombre.
   ============================================================ */
/* --teal-ink (66 %) et non 85 % : sur les pastilles teintées, 4,37:1 seulement. */
div.legal a,.legal-update,.btn-tertiary,.merci-lede strong{color:var(--teal-ink);}
.legal-card::before{color:color-mix(in srgb,var(--teal) 85%,var(--ink));}
div.legal a:hover{color:color-mix(in srgb,var(--teal) 70%,var(--ink));}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(div.legal a,.legal-update,.btn-tertiary,.merci-lede strong){color:var(--sea);}
  :root:not([data-theme="light"]) .legal-card::before{color:var(--sea);}
  :root:not([data-theme="light"]) div.legal a:hover{color:color-mix(in srgb,var(--sea) 80%,white);}
}
:root[data-theme="dark"] :is(div.legal a,.legal-update,.btn-tertiary,.merci-lede strong){color:var(--sea);}
:root[data-theme="dark"] .legal-card::before{color:var(--sea);}
:root[data-theme="dark"] div.legal a:hover{color:color-mix(in srgb,var(--sea) 80%,white);}


/* Rappel du canal d'urgence sur la page de remerciement : quelqu'un qui vient
   de décrire une expulsion ne doit pas attendre un e-mail. */
.merci-urgence{
  font-size:.92rem;line-height:1.6;color:var(--muted);
  max-width:56ch;margin:14px auto 0;
  padding:12px 18px;border-radius:12px;
  background:color-mix(in srgb,var(--coral) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--coral) 22%,transparent);
}
/* --slate : --muted ne donnait que 4,25:1 sur le voile corail. Sélecteur
   .merci .merci-urgence pour passer devant `.merci p`, qui imposait --muted. */
.merci .merci-urgence{color:var(--slate);}
.merci-urgence a{color:var(--coral-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.merci-urgence a:hover{color:var(--ink);}