/* ============================================================
   PAGES LÉGALES - gabarit unique
   cgv.html · politique-de-confidentialite.html · mentions-legales.html
   Colonne de lecture centrée, sections numérotées toutes ouvertes (aucun
   élément dépliable), fiche d'identité (<dl>).
   Variables locales scopées à .legal-page (jamais sur :root).
   ============================================================ */

.legal-page {
  --legal-width: 756px;
  --legal-rule: color-mix(in srgb, var(--color-wood) 42%, var(--color-cream)); /* filets, dérivés du brun bois */

  width: 100%;
  max-width: var(--container-max-width-wide);   /* même conteneur que les autres pages : le fil d'Ariane est sur la gouttière commune */
  margin-inline: auto;
  padding: var(--page-top-gap) var(--container-padding-x) 64px;
  color: var(--color-ink);
}

.legal-page .breadcrumb { margin-bottom: 24px; }
/* Colonne de lecture centrée : seul le document est étroit, pas la page */
.legal-page > .legal-document { max-width: var(--legal-width); margin-inline: auto; }

/* Liens dans le texte : braise soulignée (contraste ≥ 4,5:1 sur kraft). */
.legal-page a:not(.btn):not(.breadcrumb__link) {
  color: var(--color-ember);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-page a:not(.btn):not(.breadcrumb__link):hover { color: var(--color-ember-dark); }

/* ---------- En-tête du document ---------- */
.legal-document__header { padding-bottom: 24px; border-bottom: 1px solid var(--legal-rule); }
.legal-document__title {
  margin: 0 0 16px;
  font-size: var(--fs-page-title);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-forest);
}
.legal-document__intro { margin: 0; max-width: 620px; font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text-muted); }
.legal-document__brand { font-weight: 600; color: var(--color-wood); }

/* Bandeau « document provisoire » : les textes juridiques ne sont jamais présentés comme définitifs. */
.legal-draft {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--color-ember);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: var(--color-surface-dim);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.legal-draft strong { color: var(--color-ink); }

/* ---------- Sections ---------- */
.legal-section { padding: 20px 0 28px; border-bottom: 1px solid var(--legal-rule); }
.legal-section__title { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--color-ink); }
.legal-section > .legal-section__title { margin-bottom: 16px; }
.legal-section__number { flex: none; }
/* Le titre reçoit le focus par script quand on arrive par une ancre (legal.js) : pas de cadre autour (élément non interactif). */
.legal-section__title:focus, .legal-section__title:focus-visible { outline: none; }

.legal-section__text { margin: 0 0 12px; max-width: 660px; font-size: var(--fs-base); line-height: 1.6; }
.legal-section__text:last-child { margin-bottom: 0; }

.legal-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; max-width: 660px; }
.legal-list__item { position: relative; padding-left: 20px; font-size: var(--fs-base); line-height: 1.55; }
.legal-list__item::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-wood); }

/* ---------- Fiche d'identité (<dl>) : zébrée, deux colonnes ---------- */
.identity-list { margin: 0; }
.identity-list__row { display: grid; grid-template-columns: 238px 1fr; gap: 16px; padding: 8px 12px; border-radius: var(--r-badge); font-size: 15px; line-height: 1.45; }
.identity-list__row:nth-child(odd) { background: var(--color-surface-dim); }
.identity-list__label { margin: 0; font-weight: 600; }
.identity-list__value { margin: 0; overflow-wrap: anywhere; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .legal-page { padding-bottom: 48px; }
  .identity-list__row { grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; }
  .identity-list__label { font-size: var(--fs-xs); opacity: 0.8; }
  .identity-list__value { font-size: var(--fs-base); }
  .legal-section__title { font-size: 18px; }
}