/* ==========================================================================
   HUNGRY JAZZ — PAGES LÉGALES
   --------------------------------------------------------------------------
   Mentions légales, confidentialité, cookies. Peu de règles : le texte vient
   de `prose.css`, le hero de `hero-page.css`. Il ne reste ici que ce qui est
   propre à ces pages — le bloc d'informations sur l'éditeur, le sommaire, et
   un titre ramené à une taille lisible.

   Aucune valeur nouvelle : uniquement des jetons de `tokens.css`.
   ========================================================================== */

/* Un titre de page légale est une étiquette administrative, pas une affiche.
   « Politique de confidentialité » au corps d'un titre de page occuperait
   deux lignes de 7 rem pour ne rien dire de plus. */
.legale__h1 {
  font-size: clamp(1.875rem, 4.2vw, 3.75rem);
  max-width: 22ch;
}

.legale__maj {
  margin-top: var(--sp-s);
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-ink-muted);
}

/* La colonne de lecture, centrée comme celle d'un article : même besoin, même
   réponse. Une page légale se lit en entier quand on la lit vraiment. */
.legale {
  max-width: 68ch;
  margin-inline: auto;
}

/* ==========================================================================
   LES INFORMATIONS SUR L'ÉDITEUR
   --------------------------------------------------------------------------
   Une liste de définitions, et pas un tableau : ce sont des paires
   intitulé/valeur, pas des données à comparer entre elles. Les lecteurs
   d'écran annoncent alors correctement « Siège social : … ».
   ========================================================================== */
.legale__liste {
  margin: 0 0 var(--sp-l);
  border-top: var(--bd-rule) solid var(--c-ink);
}

.legale__ligne {
  display: grid;
  gap: var(--sp-3xs);
  padding-block: var(--sp-s);
  border-bottom: var(--bd-hair) solid var(--c-rule-soft);
}
@media (min-width: 48em) {
  .legale__ligne {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--sp-m);
    align-items: baseline;
  }
}

.legale__terme {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.legale__valeur { margin: 0; }
.legale__valeur p + p { margin-top: var(--sp-3xs); }

/* ==========================================================================
   LE SOMMAIRE
   --------------------------------------------------------------------------
   Une page légale se consulte plus qu'elle ne se lit : on y cherche un point
   précis. Il n'apparaît qu'à partir de trois sections — en dessous, il ferait
   perdre plus de temps qu'il n'en fait gagner.
   ========================================================================== */
.legale__sommaire {
  padding: var(--sp-s);
  border: var(--bd-rule) solid var(--c-ink);
  margin-bottom: var(--sp-l);
}

.legale__sommaire-titre {
  font-family: var(--f-cond);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--sp-2xs);
}

.legale__sommaire ol {
  margin: 0;
  padding-left: 1.3em;
}
.legale__sommaire li + li { margin-top: var(--sp-3xs); }
.legale__sommaire a {
  text-decoration: underline;
  text-underline-offset: .25em;
  /* La cible reste confortable sans casser le rythme de la liste. */
  display: inline-block;
  padding-block: 4px;
}

.legale__attente {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  max-width: 28ch;
}