/* =========================================================
   Les trois pages légales : mentions, données personnelles,
   conditions. Une colonne de lecture, rien d'autre.

   Ces pages sont longues et se lisent vraiment (c'est même
   tout leur intérêt) : la mesure est bornée à 68 caractères,
   l'interligne est plus aéré qu'ailleurs sur le site, et les
   titres respirent pour qu'on retrouve son paragraphe après
   avoir levé les yeux.
   ========================================================= */

.legal{
  max-width:min(720px, 100% - 40px);
  margin:0 auto; padding:40px 0 80px;
  font-size:16.5px; line-height:1.72;
}

/* Le fil des trois pages : on passe de l'une à l'autre sans revenir en arrière. */
.legal-fil{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:28px;
}
.legal-fil a{
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--card);
  color:var(--muted); text-decoration:none;
  font-size:13.5px; font-weight:500;
}
.legal-fil a:hover{color:var(--txt); border-color:rgba(var(--accent-rgb),.45)}
.legal-fil a.on{
  background:var(--accent); border-color:var(--accent); color:#fff;
}

.legal h1{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:clamp(28px, 6vw, 40px); line-height:1.15;
  letter-spacing:-.02em; font-weight:700;
}
.legal-maj{margin-top:10px; color:var(--muted); font-size:14px}

.legal-chapo{
  margin-top:24px; padding:18px 20px;
  background:var(--accent-soft); border-radius:var(--r);
  font-size:16px;
}

/* L'aveu d'une page incomplète : visible, jamais discret. */
.legal-alerte{
  margin-top:24px; padding:16px 20px;
  border:1px solid var(--danger); border-radius:var(--r);
  background:rgba(217,59,43,.06); color:var(--txt); font-size:15px;
}
.legal-alerte code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px;
  background:rgba(17,19,38,.06); padding:1px 5px; border-radius:5px;
}
.a-completer{
  background:rgba(217,59,43,.14); color:var(--danger);
  padding:1px 6px; border-radius:5px; font-weight:600;
}

.legal h2{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:22px; line-height:1.3; font-weight:700;
  margin-top:44px; padding-top:22px;
  border-top:1px solid var(--border);
}
.legal h3{
  font-size:17px; font-weight:600;
  margin-top:26px; color:var(--txt);
}
.legal p{margin-top:14px}
.legal ul{margin:14px 0 0 22px}
.legal li{margin-top:8px}
.legal a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.legal a:hover{text-decoration-thickness:2px}
/* Le fil de navigation est fait de boutons, pas de liens dans un texte : la
   règle générale ci-dessus le soulignait, elle est déclarée après lui. */
.legal .legal-fil a{text-decoration:none}
.legal b{font-weight:600}

.legal-retour{
  margin-top:52px; padding-top:24px;
  border-top:1px solid var(--border);
}

@media (max-width:520px){
  .legal{padding-top:26px; font-size:16px}
  .legal h2{margin-top:34px}
}