/* ============================================================================
   Les pages légales : /mentions-legales/, /confidentialite/, /conditions-utilisation/.
   Elles portent la barre et le pied de la vitrine, que dessinent base.css et page.css.
   Cette feuille ne règle que ce qui leur est propre : l'en-tête de la page, le passage
   d'une page légale à l'autre, le sommaire d'une page longue, et un texte suivi mis en
   page pour se lire d'une traite.
   ============================================================================ */

/* La barre de la vitrine est fixe : la page commence sous elle. */
.legal { padding-block: 124px 96px; }
@media (max-width: 720px) { .legal { padding-block: 100px 64px; } }

.legal__colonne { max-width: 780px; margin-inline: auto; }

.legal__titre { font-size: clamp(2rem, 3.6vw, 2.75rem); letter-spacing: -0.028em; }
.legal__chapo { margin-top: 18px; }
.legal__date { margin-top: 12px; font-size: .86rem; color: var(--color-gray-text); }

/* Le passage d'une page légale à l'autre. La page ouverte prend le rouge de la marque. */
.legal__pages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; list-style: none; }
.legal__pages a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
  font-weight: 500;
  color: var(--color-gray-text);
  box-shadow: inset 0 0 0 1px var(--color-gray-border);
  transition: color .2s, box-shadow .2s, background-color .2s;
}
.legal__pages a:hover { color: var(--color-dark); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.legal__pages a[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* Le sommaire d'une page longue : deux colonnes quand la largeur le permet. */
.legal__sommaire {
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--color-gray-border);
}
.legal__sommaire h2 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.legal__sommaire ol { margin-top: 10px; list-style: none; columns: 2 15rem; column-gap: 32px; }
.legal__sommaire li { break-inside: avoid; padding-block: 4px; font-size: .93rem; line-height: 1.45; }

/* Le texte, posé sur une feuille blanche comme les cartes de la vitrine. */
.legal__texte {
  margin-top: 28px;
  padding: 52px 56px;
  background: #fff;
  border: 1px solid var(--color-gray-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 720px) { .legal__texte { padding: 32px 22px; border-radius: 16px; } }

/* La barre fixe couvrirait le titre visé par un lien du sommaire : on le garde en dessous. */
.legal__texte h2 { margin: 52px 0 14px; font-size: clamp(1.3rem, 2vw, 1.5rem); line-height: 1.2; scroll-margin-top: 96px; }
.legal__texte h2:first-child { margin-top: 0; }
.legal__texte h3 { margin: 32px 0 10px; font-size: 1.08rem; line-height: 1.3; letter-spacing: -.01em; }
.legal__texte p,
.legal__texte li { font-size: 1rem; line-height: 1.75; color: var(--color-gray-text); }
.legal__texte p + p,
.legal__texte p + ul,
.legal__texte ul + p { margin-top: 14px; }
.legal__texte ul { display: grid; gap: 10px; list-style: none; }
.legal__texte li { position: relative; padding-left: 22px; }
.legal__texte li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Les liens du sommaire et du texte : soulignés, et rouges au survol, comme les guides. */
.legal__sommaire a,
.legal__texte a {
  color: var(--color-dark);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, .25);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color .2s, text-decoration-color .2s;
}
.legal__sommaire a:hover,
.legal__texte a:hover { color: var(--color-primary); text-decoration-color: currentColor; }