/* ==========================================================================
   Latinea — pages légales (mentions légales, politique de confidentialité)
   Feuille partagée par les deux pages : même gabarit, même mise en page.
   Les jetons viennent de site.css ; les valeurs reprises ici (paliers,
   voiles, filets) le sont telles quelles des autres feuilles de page —
   aucune valeur nouvelle n'est créée.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête de page — sans photo
   Même gabarit que les pages Cours, Équipe, Événements et Contact, mais sans
   média ni voiles : le fond est le dégradé de section du socle, halo calé
   en haut à gauche comme sur la page Contact.
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --position-halo: 24% 20%;
  background: var(--degrade-section);
  padding:
    calc(var(--hauteur-entete) + clamp(56px, 8vw, 120px))
    var(--espace-horizontal)
    clamp(40px, 5vw, 72px);
  border-bottom: 1px solid rgba(242, 235, 221, .08);
}

.page-hero__eyebrow {
  margin-bottom: 26px;
}

.page-hero__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(34px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   2. Corps du texte
   Une seule colonne, largeur de lecture bornée en ch : la ligne reste
   confortable quelle que soit la largeur de l'écran.
   -------------------------------------------------------------------------- */
.legal {
  --position-halo: 24% 20%;
  background: var(--degrade-section);
  padding: clamp(60px, 8vw, 128px) var(--espace-horizontal);
}

.legal__body {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
  max-width: 56ch;
}

/* Chaque rubrique est posée sur un filet, comme les blocs de coordonnées
   de la page Contact. */
.legal-block {
  border-top: 1px solid rgba(242, 235, 221, .12);
  padding-top: 26px;
}

/* Intitulé de rubrique. Famille, graisse et interlettrage viennent du socle
   (h1–h6) ; sur mobile, le palier typographique du socle prend la main sur
   la taille, comme pour tous les h2 du site. */
.legal-block__title {
  margin: 0;
  font-size: 21px;
}

.legal-block p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(242, 235, 221, .7);
}

/* Les coordonnées de l'association et du lieu des cours : mêmes réglages
   que l'adresse du studio sur la page Contact. */
.legal-block p.legal-block__address {
  font-size: 17px;
  line-height: 1.7;
  color: var(--creme);
}

.legal-link {
  border-bottom: 1px solid rgba(242, 235, 221, .3);
}

/* --------------------------------------------------------------------------
   3. Responsive
   La colonne est déjà unique sur les trois formats : seuls les paliers de
   respiration changent. Bornes reprises du socle, aucun nouveau seuil.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .legal-block {
    padding-top: 22px;
  }
}