/* =========================================================
   Maison Innée — Pages juridiques (mentions, confidentialité, cookies)
   Réutilise styles.css (header sticky, footer, .container,
   .title-initial + fleur doublée). Classes préfixées « legal- ».
   Typographie fidèle aux maquettes Figma :
     H1 (titre page) = Montserrat 36 / 500  · #0F1117
     H2 (sections)   = Montserrat 22 / 500  · #2D231D
     Corps           = Roboto 16 / 400      · #564438 (beige-900)
   Mise en page aérée et lisible : mesure limitée, marges généreuses.
   Breakpoints alignés sur styles.css : 1279 / 1023 / 767.
   ========================================================= */

.legal { background: var(--color-neutre-50); }

/* Conteneur centré, mesure confortable pour la lecture d'un texte long. */
.legal__inner {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ----- Titre de page (H1) ----- */
.legal__title {
  font-family: var(--font-display);
  font-weight: 600; /* semibold, uniforme avec les autres titres du site */
  font-size: clamp(1.75rem, 2.6vw, 2.25rem); /* 28 → 36 */
  line-height: 1.15;
  color: #0F1117;
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* ----- Corps du texte ----- */
.legal__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;          /* aéré et parfaitement lisible */
  color: var(--color-beige-900);
}
.legal__body p { margin-bottom: 16px; }
.legal__body p:last-child { margin-bottom: 0; }

/* Paragraphe d'introduction (chapô) */
.legal__lead { margin-bottom: clamp(24px, 3vw, 32px); }

/* ----- Sous-titres de section (H2 : « 1. … », « 2. … ») ----- */
.legal__h2 {
  font-family: var(--font-display);
  font-weight: 600; /* semibold, uniforme avec les autres titres du site */
  font-size: 1.375rem; /* 22 */
  line-height: 1.3;
  color: #2D231D;
  margin-top: clamp(32px, 4vw, 44px);
  margin-bottom: 12px;
}
.legal__h2:first-child { margin-top: 0; }

/* Sous-question / intertitre léger (ex. « Pourquoi collectons-nous ces données ? ») */
.legal__subhead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem; /* 17 */
  line-height: 1.35;
  color: var(--color-neutre-500);
  margin-top: 20px;
  margin-bottom: 8px;
}

/* ----- Listes à puces ----- */
.legal__list {
  list-style: disc;
  margin: 0 0 16px;
  padding-left: 24px;
}
.legal__list li { margin-bottom: 8px; line-height: 1.6; }
.legal__list li:last-child { margin-bottom: 0; }
.legal__list li::marker { color: var(--color-beige-400); }

/* Libellé en tête d'item « Terme : … » — emphase discrète pour la lisibilité */
.legal__body strong { font-weight: 600; color: var(--color-neutre-500); }

/* Liens inline (ex. pages d'aide navigateurs) */
.legal__body a {
  color: var(--color-beige-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--tr-med);
}
.legal__body a:hover,
.legal__body a:focus-visible { color: var(--color-beige-500); }

/* Liste de liens horizontale (navigateurs) */
.legal__inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 767px) {
  .legal__title { margin-bottom: 24px; }
  .legal__h2 { margin-top: 32px; }
}