/* ============================================================================
   legal.css — les pages légales (confidentialité, cookies, remboursement).
   Chargée comme un lot par `tl_page_head($titre, $desc, $chemin, ['legal'])`.

   Une seule feuille pour les trois pages : elles ont la même forme (un titre,
   une date, des sections numérotées, quelques tableaux). Les couleurs viennent
   toutes des tokens du site — rien n'est écrit en dur, sinon la page se
   désynchronise le jour où la DA bouge.

   ⚠ Aucune largeur fixe : mesuré à 375 px, `document.documentElement.scrollWidth`
   doit rester égal à `clientWidth`. Les tableaux défilent DANS leur enveloppe
   (`.lg-tw`), jamais en poussant la page.
   ========================================================================== */

/* .lg-head et .lg-ul vivent desormais dans ui.css, avec .u-head et .u-ul :
   c etait exactement le meme en-tete et exactement la meme liste. */
.lg-maj{margin-top:18px;font:500 12px/1.6 var(--mono);letter-spacing:.04em;color:var(--dim-2)}
.lg-intro{margin-top:16px;max-width:66ch;font-size:var(--lead);line-height:1.65;color:var(--dim)}

/* Encadré d'avertissement : ce que la page NE dit pas, ou ce qui demande une
   action de la personne. Le filet rose à gauche suffit — pas de bordure. */
.lg-note{margin-top:26px;padding:18px 20px;border-radius:var(--hm-rayon);
  background:rgba(255,255,255,.045);box-shadow:var(--hm-relief);
  border-left:3px solid var(--rose-2);max-width:74ch}
.lg-note p{margin:0;color:var(--dim);font-size:15px;line-height:1.7}
.lg-note p+p{margin-top:10px}
.lg-note strong{color:var(--txt)}

/* ⚠ NE PAS REMETTRE `max-width:none` NI UN PADDING HORIZONTAL NUL ICI.
   `.lg-body` porte aussi la classe `.wrap`, dont tout le role est de borner la
   colonne (`max-width:var(--wrap)`) et de garder une gouttiere
   (`padding:0 var(--gut)`). Les deux declarations ci-dessous les annulaient :
   sur un ecran de 1920, le texte des six pages legales partait sur 1905 px,
   colle au bord gauche, pendant que le titre restait centre. C'est ce qui
   rendait ces pages illisibles.
   On ne regle donc que le rythme vertical, et on laisse `.wrap` faire son
   travail horizontal. */
.lg-body{padding-top:40px;padding-bottom:96px}
.lg-sec{margin-top:52px;max-width:78ch}
.lg-sec:first-child{margin-top:0}
/* Le titre de section et le texte courant prennent les tokens de ui.css :
   une seule valeur pour les pages legales ET les pages de boutique. */
.lg-sec h2{font-size:var(--u-h2);letter-spacing:-.02em;margin-bottom:14px}
.lg-sec h3{font-size:18px;margin:26px 0 8px;color:var(--txt)}
.lg-sec p{margin:0 0 12px;color:var(--dim);line-height:1.75;font-size:var(--u-txt)}
.lg-sec p:last-child{margin-bottom:0}
.lg-sec strong{color:var(--txt);font-weight:600}
.lg-sec a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.lg-sec a:hover{color:var(--txt)}


/* ⚠ `min-width:0` sur l'enveloppe : sans lui la table impose sa largeur
   intrinsèque au parent flex/grid et c'est la PAGE qui défile. */
.lg-tw{margin:18px 0 6px;min-width:0;overflow-x:auto;border-radius:var(--hm-rayon);
  background:rgba(255,255,255,.035);box-shadow:var(--hm-relief);
  -webkit-overflow-scrolling:touch}
.lg-t{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.lg-t th,.lg-t td{padding:12px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.07)}
.lg-t tr:last-child td{border-bottom:0}
.lg-t th{font:600 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim-2);white-space:nowrap}
.lg-t td{color:var(--dim);line-height:1.6}
.lg-t td:first-child{color:var(--txt);font-weight:600}
.lg-t code{font-family:var(--mono);font-size:12.5px;color:var(--dim-2);overflow-wrap:anywhere}

.lg-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.lg-links a{padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;
  color:var(--txt);background:rgba(255,255,255,.045);box-shadow:var(--hm-relief);
  text-decoration:none}
.lg-links a:hover{background:rgba(255,255,255,.08)}

@media (max-width:640px){
  .lg-sec{margin-top:40px}
  /* Meme piege que plus haut : le raccourci effacerait la gouttiere de .wrap,
     et sur telephone le texte toucherait le bord de l ecran. */
  .lg-body{padding-top:30px;padding-bottom:72px}
}