/* legal.css — mise en forme des pages reglementaires
 *
 * Feuille separee, chargee uniquement par mentions-legales.html et
 * confidentialite.html. Aucune modification de styles.css: les variables de
 * theme sont reutilisees telles quelles, donc la page suit automatiquement
 * l'identite visuelle du site.
 */

.legal-page {
  padding: clamp(1.75rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--color-bg-main);
}

/* Longueur de ligne limitee: un texte juridique en pleine largeur de
   container (1200 px) est illisible. 68ch reste confortable. */
.legal-page .container > * {
  max-width: 68ch;
}

.legal-page h1 {
  margin: 0.35em 0 0.75em;
}

.legal-page h2 {
  margin-top: 2.25em;
  margin-bottom: 0.5em;
  padding-top: 1.1em;
  border-top: 1px solid var(--color-border-soft);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  color: var(--color-primary);
}

.legal-page h3 {
  margin-top: 1.5em;
  margin-bottom: 0.4em;
  font-size: 1.02rem;
  color: var(--color-text-primary);
}

.legal-page p,
.legal-page li {
  color: var(--color-text-secondary);
}

/* line-height uniquement sur les paragraphes: la puce ::before de .list-clean
   est positionnee en absolu a top:0.56rem, calee sur l'interlignage d'origine.
   La modifier sur les <li> desaligne la puce de la premiere ligne. */
.legal-page p {
  line-height: 1.7;
}

.legal-page p {
  margin: 0 0 0.9em;
}

/* Ne surcharger QUE la marge basse. `.list-clean` de styles.css gere deja
   la puce (un carre bleu en ::before, avec list-style:none) et le
   padding-left de 1.1rem qui lui reserve la place. Redefinir list-style ou
   padding-left ici superpose une seconde puce et fait chevaucher le texte. */
.legal-page ul.list-clean {
  margin: 0 0 1.2em;
}

.legal-page strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.legal-page a {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal-page a:hover,
.legal-page a:focus-visible {
  color: var(--color-primary-hover);
}

.legal-page .breadcrumb {
  margin-bottom: 1.5rem;
}

.legal-updated {
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Les valeurs a completer par Remi doivent sauter aux yeux en relecture,
   et ne jamais passer inapercues si la page part en ligne trop tot. */
.legal-page .legal-todo {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 4px;
  background: rgba(219, 79, 58, 0.12);
  color: var(--color-accent-red);
  font-weight: 600;
  font-size: 0.92em;
}