/* Feuille commune aux trois pages légales — mentions légales, confidentialité,
 * conditions d'utilisation (#169).
 *
 * UNE feuille pour les trois, et non une par page comme le fait le reste du
 * portail (`/jouer/style.css`, `/reservation/reservation.css`...). La règle du
 * dépôt est le nommage par rôle : ces trois pages n'ont qu'une seule et même
 * mise en forme — du texte long à lire — et trois copies d'un même fichier se
 * seraient désynchronisées à la première retouche. C'est exactement le
 * raisonnement qui a sorti les jetons de `pilotage/style.css` vers `base.css`
 * à l'audit du 03/09/2026.
 *
 * Pas de fond de panneau, pas de cartes, pas d'accents de couleur décoratifs :
 * une page légale se lit d'un bout à l'autre, elle ne se survole pas. Tout ce
 * qui attire l'œil ailleurs qu'au fil du texte lui nuit.
 */

.juridique {
  /* Nettement plus étroit que les 68rem de la vitrine : au-delà d'une
     soixantaine de caractères par ligne, l'œil perd le début de la ligne
     suivante. Une page de texte continu n'a pas les mêmes contraintes qu'une
     grille de cartes. */
  --largeur-lecture: 44rem;
}

.contenu-juridique {
  max-width: var(--largeur-lecture);
  /* Marge latérale d'au moins 16px garantie à toute largeur (CLAUDE.md,
     « Interface : PC et téléphone ») — posée ici une seule fois plutôt que
     sur chaque bloc. */
  margin: 0 auto;
  padding: var(--espace-6) var(--espace-4);
  line-height: 1.65;
}

.contenu-juridique h1 {
  margin: 0 0 var(--espace-2);
  font-size: 1.75rem;
}

/* Date de version, juste sous le titre. Une page légale sans date de mise à
   jour ne permet pas de savoir quelle version on a acceptée — c'est la
   première chose que regarde quelqu'un qui conteste. */
.date-version {
  margin: 0 0 var(--espace-6);
  color: var(--texte-att);
  font-size: 0.9rem;
}

.contenu-juridique h2 {
  margin: var(--espace-6) 0 var(--espace-3);
  padding-top: var(--espace-4);
  border-top: 1px solid var(--bordure);
  font-size: 1.15rem;
}

.contenu-juridique h3 {
  margin: var(--espace-5) 0 var(--espace-2);
  font-size: 1rem;
  color: var(--texte-att);
}

.contenu-juridique p,
.contenu-juridique li { margin: 0 0 var(--espace-3); }

.contenu-juridique ul { padding-left: var(--espace-5); }

.contenu-juridique a { color: var(--accent); }
.contenu-juridique a:hover { color: var(--accent-vif); }

/* Encadré d'avertissement — l'expérimentation, le risque matériel, le nom
   publié au classement. Ce qu'un joueur pressé doit voir même en défilant. */
.encadre {
  margin: var(--espace-4) 0;
  padding: var(--espace-4);
  background: var(--fond-panneau);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--rayon-md) var(--rayon-md) 0;
}

.encadre--attention { border-left-color: var(--alerte); }
.encadre > :last-child { margin-bottom: 0; }

/* Tableaux de traitements : à 360px, une grille de quatre colonnes ne tient
   pas. `overflow-x` sur un conteneur dédié — jamais sur le corps de la page,
   qui ne doit pas défiler latéralement (CLAUDE.md). */
.tableau-large {
  overflow-x: auto;
  margin: 0 0 var(--espace-4);
  -webkit-overflow-scrolling: touch;
}

.contenu-juridique table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.contenu-juridique th,
.contenu-juridique td {
  padding: var(--espace-2) var(--espace-3);
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  vertical-align: top;
}

.contenu-juridique th { color: var(--texte-att); font-weight: 600; }

/* Renvois entre les trois pages, en bas de chacune : on arrive rarement sur
   la bonne du premier coup. */
.liens-juridiques {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-4);
  margin-top: var(--espace-6);
  padding-top: var(--espace-4);
  border-top: 1px solid var(--bordure);
  font-size: 0.9rem;
}