/* ============================================================
   BAAKALAI · PAGES LÉGALES
   Mentions légales, CGU, Confidentialité, DPA.

   Fichier séparé et non un ajout à site.css, pour une raison
   pratique : site.css porte un marqueur de version dans son URL
   (`site.css?v=...`) qu'il faut réincrémenter sur les trois pages
   marketing à chaque modification, sinon un visiteur passé dans
   les 4 heures précédentes voit l'ancienne feuille avec le
   nouveau HTML. Un fichier neuf n'a jamais été mis en cache par
   personne, il évite ce piège entièrement.

   Ces pages sont du texte long. Tout ici sert la lecture :
   mesure de ligne courte, interligne large, hiérarchie sobre.
   ============================================================ */

/* ─── Page ───────────────────────────────────────────────── */
.legal-page {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
}

/* La nav est fixe et haute, le contenu démarre en dessous. */
.legal-head {
  padding: 140px 40px 56px;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
}

.legal-head .kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-deep);
}

.legal-head h1 {
  margin-top: var(--s-4);
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 600;
}

.legal-head .meta {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--grey-500);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
}

/* ─── Corps ──────────────────────────────────────────────── */
.legal-body {
  padding: 64px 40px 120px;
}

/* 68ch environ : au-delà, l'oeil perd la ligne suivante sur un
   texte dense qu'on lit rarement deux fois. */
.legal-prose {
  max-width: 68ch;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--grey-900);
}

.legal-prose h2 {
  margin: var(--s-12) 0 var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: var(--ink);
}
.legal-prose > h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }

.legal-prose h3 {
  margin: var(--s-8) 0 var(--s-3);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.legal-prose p { margin-bottom: var(--s-4); }
.legal-prose ul, .legal-prose ol { margin: 0 0 var(--s-4) var(--s-5); }
.legal-prose li { margin-bottom: var(--s-2); }
.legal-prose strong { font-weight: 600; color: var(--ink); }

.legal-prose a {
  color: var(--primary-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-prose a:hover { color: var(--primary); }

/* ─── Tableaux (sous-traitants, durées de conservation) ──── */
/* Un tableau large ne doit jamais faire déborder la page : il
   défile dans son propre conteneur. */
.legal-table-wrap {
  overflow-x: auto;
  margin: var(--s-6) 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.legal-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.55;
}
.legal-table th,
.legal-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.legal-table th {
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-700);
  white-space: nowrap;
}
.legal-table tr:last-child td { border-bottom: none; }

/* ─── Encarts ────────────────────────────────────────────── */
/* Ce qui manque encore : identité de l'éditeur tant que la
   société n'est pas immatriculée. Visible, pas caché. */
.legal-note {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--warning);
  background: var(--warning-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--grey-900);
}
.legal-note strong { color: var(--ink); }

.legal-callout {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--primary);
  background: var(--primary-softer);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 14.5px;
  line-height: 1.65;
}

/* Marqueur des valeurs à compléter à l'immatriculation. Il doit
   se voir à l'oeil nu : une page légale avec un trou qui passe
   inaperçu est pire qu'une page absente. */
.legal-todo {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-sm);
  background: var(--warning-soft);
  border: 1px dashed var(--warning);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: #8A4B00;
  white-space: nowrap;
}

/* ─── Sommaire ───────────────────────────────────────────── */
.legal-toc {
  max-width: 68ch;
  margin: 0 auto var(--s-12);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--paper-2);
}
.legal-toc h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey-500);
  margin-bottom: var(--s-3);
}
.legal-toc ol {
  margin: 0;
  padding-left: var(--s-5);
  font-size: 14px;
  line-height: 1.9;
  color: var(--grey-700);
}
.legal-toc a { color: inherit; text-decoration: none; }
.legal-toc a:hover { color: var(--primary-deep); text-decoration: underline; }

/* ─── Bascule de langue ──────────────────────────────────── */
/* Le français fait foi. L'anglais est une traduction de
   courtoisie, l'encart au-dessus du texte anglais le dit. */
[data-legal-lang] { display: none; }
[data-legal-lang].is-active { display: block; }

/* ─── Pied de page propre aux pages légales ──────────────── */
.legal-footer {
  padding: 40px;
  border-top: 1px solid var(--border);
  background: var(--paper-2);
  font-size: 13.5px;
  color: var(--grey-500);
}
.legal-footer .inner {
  max-width: 68ch;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: center;
  justify-content: space-between;
}
.legal-footer a { color: var(--grey-700); text-decoration: none; }
.legal-footer a:hover { color: var(--primary-deep); text-decoration: underline; }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }

/* ─── Petits écrans ──────────────────────────────────────── */
@media (max-width: 720px) {
  .legal-head { padding: 112px 20px 40px; }
  .legal-body { padding: 44px 20px 80px; }
  .legal-footer { padding: 32px 20px; }
  .legal-prose { font-size: 15px; }
  .legal-footer .inner { justify-content: flex-start; }

  /* site.css masque la bascule de langue dans la nav sur mobile,
     où la place manque. Sur les pages marketing c'est sans
     conséquence. Ici, c'est le SEUL moyen d'atteindre la version
     anglaise : on la garde, et on retire plutôt les liens de
     navigation, qui eux sont accessibles depuis le pied de page. */
  .nav .lang-toggle { display: inline-flex; }
  .legal-page .nav .links { display: none; }
}