/* Les trois pages legales (src/legal.js) : mentions, conditions, confidentialite.

   Marine plat, sans arene : docs/identite.md reserve l arene a ce qui se joue, et
   un document qui engage se lit, il ne se joue pas. Pas d or non plus en dehors
   des liens survoles : il n y a ici ni prix, ni rarete.

   Une seule colonne, calee sur une longueur de ligne lisible, parce que ces pages
   se lisent d un bout a l autre et pas en diagonale.

   Pas d import de marque.css : l enveloppe de src/auth.js la pose deja en <link>
   juste avant cette feuille. L importer une seconde fois couterait un aller-retour
   avant le premier pixel. */

.legal-tete { max-width: 74ch; margin: 0 auto; padding: 22px 20px 0; }
.legal-tete .retour { display: inline-block; }
.legal-tete img { display: block; height: 60px; width: auto; }

.legal { max-width: 74ch; margin: 0 auto; padding: 8px 20px 48px; }

.legal h1 { margin: 0 0 .35em; }
.legal .resume { color: var(--texte-faible); font-size: 17px; margin: 0 0 2.2em; }

.legal h2 {
  font-size: clamp(20px, 2.6vw, 24px);
  margin: 2.4em 0 .7em; padding-top: 1.1em;
  border-top: 1px solid var(--marine-bord);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.6em; }

.legal p, .legal li { line-height: 1.68; }
.legal ul { margin: 0 0 1em; padding-left: 1.3em; }
.legal li { margin-bottom: .5em; }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; color: var(--texte);
  background: var(--marine-clair); border: 1px solid var(--marine-bord);
  border-radius: 6px; padding: 1px 6px;
}

/* La fiche d identite des mentions legales : des paires, pas un tableau.
   Deux colonnes des qu il y a la place, une seule sur un telephone. */
.fiche { margin: 0; }
.fiche > div {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 12px 0; border-bottom: 1px solid var(--marine-bord);
}
.fiche dt { color: var(--texte-faible); font-size: 14px; }
.fiche dd { margin: 0; color: var(--texte); }

/* Les tableaux de la page de confidentialite. Sur un telephone ils defilent
   lateralement dans leur propre boite plutot que d elargir la page.
   La largeur minimale posee sur les deux sections est ce qui les fait defiler :
   sans elle, quatre colonnes s ecrasent a 60 px et le texte tombe en colonne de
   un mot. Mesure le 18/09/2026 sur un ecran de 375 px. */
.tableau {
  display: block; overflow-x: auto; width: 100%;
  border-collapse: collapse; margin: 0 0 1.6em; font-size: 15px;
}
.tableau th, .tableau td { min-width: 8.5rem; }
.tableau th, .tableau td {
  text-align: left; vertical-align: top; padding: 11px 14px;
  border-bottom: 1px solid var(--marine-bord);
}
.tableau th { color: var(--texte); font-weight: 800; font-size: 14px; white-space: nowrap; }
.tableau thead tr { border-bottom: 2px solid var(--marine-bord); }
.tableau tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.tableau .mention { display: block; font-size: 13px; }

.legal .date { margin-top: 2.6em; color: var(--texte-faible); font-size: 14px; }

.legal-pied {
  max-width: 74ch; margin: 0 auto; padding: 24px 20px 48px;
  border-top: 1px solid var(--marine-bord);
  color: var(--texte-faible); font-size: 15px;
}
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 12px; }
.legal-nav [aria-current='page'] { color: var(--texte); font-weight: 800; }
.legal-pied p { margin: 0; }

@media (min-width: 620px) {
  .fiche > div { grid-template-columns: 15rem 1fr; gap: 16px; align-items: baseline; }
  .tableau { display: table; }
  .tableau th, .tableau td { min-width: 0; }
}