/* ===================================================================
   Pages légales — mise en page de lecture longue
   ===================================================================
   Ces pages n'ont rien du one-pager : pas de mascotte, pas de
   jauge, pas de canvas. Seulement du texte, long, et lisible.

   Elles partagent themes.css (les couleurs, donc le thème braise /
   Azrael y bascule comme sur le reste du site) et n'ajoutent ici que
   la mise en colonne. Si une couleur change un jour, elle change
   partout : il n'y a qu'un seul endroit où les taxes.
   =================================================================== */

.legal-page {
  /* le fond et le texte viennent de styles.css (body) */
  min-height: 100vh;
  padding-bottom: 5rem;
}

/* ---------- Bandeau ------------------------------------------- */

.legal-head {
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  padding: 1.4rem 0;
}

.legal-head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}

.legal-head a {
  color: var(--cream-dim); text-decoration: none;
  font-size: .9rem; letter-spacing: .04em;
}
.legal-head a:hover { color: var(--gold); }

.legal-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--cream) !important; font-weight: 700;
}
.legal-brand img { width: 34px; height: 34px; display: block; }

/* ---------- Colonne de lecture -------------------------------- */

.legal-wrap { max-width: 74ch; margin: 0 auto; padding: 3rem 0 0; }

.legal-wrap h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.1;
  margin: 0 0 .6rem; color: var(--cream);
}
.legal-wrap .legal-date {
  margin: 0 0 2.5rem; color: var(--dim-65); font-size: .85rem;
  letter-spacing: .06em;
}

.legal-wrap h2 {
  font-size: 1.15rem; margin: 2.6rem 0 .9rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
  color: var(--gold);
}
.legal-wrap h3 { font-size: 1rem; margin: 1.6rem 0 .6rem; color: var(--cream); }

.legal-wrap p, .legal-wrap li {
  color: var(--cream-dim); font-size: .97rem; line-height: 1.75;
}
.legal-wrap p { margin: 0 0 1rem; }
.legal-wrap ul, .legal-wrap ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.legal-wrap li { margin-bottom: .5rem; }
.legal-wrap strong { color: var(--cream); }

.legal-wrap a { color: var(--gold); }

/* ---------- Encadré « à compléter » --------------------------- */
/* Tout ce que je n'ai pas pu remplir sans inventer une information
   légale. Le repère est visible, pas discret : laisser un espace vide
   silencieusement serait pire qu'une page manifestement inachevée. */

.legal-todo {
  background: var(--gold-10);
  border: 1px solid var(--gold-30);
  border-radius: var(--radius);
  padding: 1rem 1.2rem; margin: 0 0 2rem;
}
.legal-todo p {
  margin: 0; color: var(--cream); font-size: .92rem; line-height: 1.6;
}
.legal-todo strong { color: var(--gold); }

.legal-a-completer {
  background: var(--cream-08);
  border-left: 3px solid var(--gold-45);
  padding: .1rem .8rem; margin: 0 0 1rem;
  border-radius: 0 4px 4px 0;
}
.legal-a-completer p {
  margin: 0; color: var(--gold); font-size: .95rem;
}

/* ---------- Sommaire ----------------------------------------- */

.legal-sommaire {
  background: var(--panel-bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
  margin-bottom: 2.5rem;
}
.legal-sommaire h2 {
  margin: 0 0 .8rem; padding: 0; border: 0; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim-65);
}
.legal-sommaire ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.legal-sommaire li { break-inside: avoid; margin-bottom: .35rem; }
.legal-sommaire a { font-size: .9rem; }

/* ---------- Retour ------------------------------------------- */

.legal-retour { margin: 3.5rem 0 0; text-align: center; }
.legal-retour a { font-size: .9rem; letter-spacing: .05em; }

/* ---------- Pied --------------------------------------------- */

.legal-foot {
  max-width: 74ch; margin: 3rem auto 0; padding-top: 2rem;
  border-top: 1px solid var(--line);
  color: var(--dim-65); font-size: .8rem; line-height: 1.7;
}

@media (max-width: 640px) {
  .legal-wrap { padding-top: 2rem; }
  .legal-sommaire ol { columns: 1; }
}