/* ═══════════════════════════════════════════════════════════════════════════
   GERFAUT — pages légales (mentions légales, politique de confidentialité)

   Ces pages sont des documents : une colonne, pas de mise en page. Elles se
   greffent sur styles.css, dont elles reprennent les jetons de couleur, les
   familles de caractères, le pied de page et le trait oblique. Rien n'est
   redéfini ici de ce qui existe déjà là-bas.

   La largeur de lecture est bornée à 44rem, soit environ 70 signes par ligne.
   Au-delà, l'œil perd la ligne suivante en revenant à la marge gauche.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le reste du site vit sur --paper ; un document se lit mieux sur le fond le
   plus clair, réservé ailleurs aux sections de contenu. */
.legal-page {
  background: var(--white);
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */

.legal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
  padding: 25px clamp(25px, 6.25vw, 75px);
  border-bottom: 1px solid var(--line);
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: 12.5px;
}
.legal-brand span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* .slash tire sa couleur de currentColor : on la force en ambre sans toucher
   à la règle partagée. */
.legal-brand .slash { color: var(--accent); }
.legal-brand:hover span { color: var(--accent); }

.legal-back {
  font-family: var(--mono);
  font-size: 13.75px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Colonne de lecture ──────────────────────────────────────────────────── */

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(50px, 8vw, 87.5px) clamp(25px, 6.25vw, 40px)
    clamp(75px, 10vw, 125px);
  font-size: 17px;
  line-height: 1.65;
}

.legal-eyebrow {
  margin: 0 0 12.5px;
  font-family: var(--mono);
  font-size: 13.75px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal h1 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 45px);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.legal-lede {
  margin: 0;
  font-size: 18.75px;
  color: var(--muted);
  text-wrap: pretty;
}

.legal-rule {
  height: 3px;
  width: 72.5px;
  background: var(--accent);
  margin: 25px 0 47.5px;
}

.legal h2 {
  margin: 47.5px 0 12.5px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21.25px;
  letter-spacing: -.01em;
}

.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 18px; }
.legal li { margin-bottom: 6px; }

/* Le soulignement ambre reprend la façon dont l'accent signale un lien
   ailleurs sur le site, sans emprunter le survol des liens de navigation. */
.legal a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.legal a:hover { color: var(--muted); }

/* Numéros et identifiants en chasse fixe : un SIRET ou un téléphone se relit
   et se recopie, il ne se lit pas comme du texte courant. */
.legal-num {
  font-family: var(--mono);
  font-size: .94em;
}

.legal-maj {
  margin: 50px 0 0;
  font-family: var(--mono);
  font-size: 13.75px;
  letter-spacing: .06em;
  color: var(--muted);
}

/* ── Listes de définitions (identité, hébergeur) ─────────────────────────── */

.legal dl {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 6px 20px;
}
.legal dt {
  padding-top: 4.5px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal dd { margin: 0; }

/* ── Tableau des traitements ─────────────────────────────────────────────── */

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 25px;
  font-size: 15.94px;
}
.legal th {
  text-align: left;
  padding: 0 12.5px 8px 0;
  border-bottom: 1px solid var(--muted);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12.19px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal td {
  padding: 11.5px 12.5px 11.5px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal tr td:last-child,
.legal tr th:last-child { padding-right: 0; }

/* ── Étroit ──────────────────────────────────────────────────────────────── */

@media (max-width: 34rem) {
  .legal dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .legal dt { padding-top: 15px; }

  /* Un tableau à quatre colonnes ne tient pas sur un téléphone : chaque ligne
     devient un bloc, et l'intitulé de colonne repasse au-dessus de sa valeur
     via l'attribut data-label porté par chaque cellule. */
  .legal table,
  .legal tbody,
  .legal tr,
  .legal td {
    display: block;
    width: 100%;
  }
  .legal thead { display: none; }
  .legal tr {
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
  }
  .legal td {
    border: 0;
    padding: 2.5px 0;
  }
  .legal td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 11.25px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
}