/* Pages légales : mentions légales, conditions générales, politique de confidentialité.
   Une colonne de lecture sobre posée sur le fond du jeu (variables et fond de style.css).
   Aucune règle ne sort de ces pages : tout est rangé sous .legal-corps, .legal-haut, .legal et .legal-pied. */

.legal-corps { height: auto; min-height: 100%; }

/* Une seule colonne : 42rem au plus, et toujours au moins 16px de marge de chaque côté (encoche comprise). */
.legal-haut, .legal, .legal-pied {
  --gouttiere: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  width: min(42rem, 100% - 2 * var(--gouttiere));
  margin-inline: auto;
}

/* ——— Haut de page ——— */
.legal-haut { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
.legal-retour {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 400 .85rem/1.2 var(--etiquette, var(--titre)); letter-spacing: .08em;
  color: var(--encre-att); text-decoration: none;
}
.legal-retour:hover { color: var(--serment); }

/* ——— Colonne de lecture ——— */
.legal { padding-block: 1rem 3rem; font-size: 1rem; line-height: 1.65; overflow-wrap: break-word; }
@media (min-width: 40rem) { .legal { font-size: 1.0625rem; } }

.legal-entete { margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--filet); }
.legal-surtitre {
  margin: 0 0 .6rem;
  font: 400 .8rem/1.3 var(--etiquette, var(--titre)); letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-att);
}
.legal h1 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3rem); line-height: 1.05; color: var(--serment); }
.legal-maj { margin: .8rem 0 0; font-size: .9rem; color: var(--encre-att); }
.legal-chapeau { font: italic 500 1.2rem/1.45 var(--titre); color: var(--encre); }

/* Chaque article s'ouvre sur un filet, avec un court trait d'or à gauche. */
.legal h2 {
  margin: 2.75rem 0 1rem; padding-top: 1.25rem;
  font-size: clamp(1.4rem, 1.25rem + .6vw, 1.7rem); line-height: 1.2; color: var(--serment);
  background:
    linear-gradient(var(--serment), var(--serment)) 0 0 / 2.5rem 1px no-repeat,
    linear-gradient(var(--filet), var(--filet)) 0 0 / 100% 1px no-repeat;
}
.legal h3 { margin: 2rem 0 .75rem; font-size: 1.25rem; line-height: 1.25; color: var(--encre); }
.legal section[id] { scroll-margin-top: 1rem; }

.legal p, .legal ul, .legal ol, .legal dl, .legal blockquote { margin: 0 0 1rem; }
.legal p, .legal li, .legal dd { text-wrap: pretty; }
.legal ul, .legal ol { padding-left: 1.4rem; }
.legal li + li { margin-top: .4rem; }
.legal li::marker { color: var(--serment); }
.legal ol > li::marker { font-family: var(--titre); font-weight: 600; }
.legal strong { font-weight: 600; color: var(--encre); }
.legal cite { font-style: italic; }
.legal code { font: .86em/1.4 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; color: var(--serment); overflow-wrap: anywhere; }

.legal a {
  color: var(--serment);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, var(--serment) 45%, transparent);
}
.legal a:hover { text-decoration-color: currentColor; }
.legal a[href^="mailto:"], .legal a[href^="http"] { overflow-wrap: anywhere; }

.legal blockquote {
  margin-inline: 0; padding: .9rem 1.1rem;
  border-left: 2px solid var(--serment); background: rgba(240, 217, 160, .05);
  font: italic 500 1.12rem/1.45 var(--titre);
}
.legal blockquote p { margin: 0; }

.legal dt { margin-top: 1rem; font-weight: 600; color: var(--serment); }
.legal dt:first-child { margin-top: 0; }
.legal dd { margin: .25rem 0 0; padding-left: 1rem; border-left: 1px solid var(--filet); }

/* Encadré d'avertissement (achats fermés pendant l'alpha). */
.legal-avis {
  padding: .9rem 1.1rem;
  border: 1px solid var(--filet); border-left: 3px solid var(--serment);
  background: rgba(240, 217, 160, .06);
}

/* Bloc rempli par le serveur, qui peut contenir des retours à la ligne. */
.legal-bloc { white-space: pre-line; padding-left: 1rem; border-left: 1px solid var(--filet); }

/* ——— Tableaux : ils défilent dans leur propre cadre, jamais la page.
   Les deux voiles « local » glissent avec le contenu et laissent paraître une lueur au bord qui déborde. ——— */
.legal-tableau {
  margin: 0 0 1.25rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--filet);
  background:
    linear-gradient(90deg, var(--fond) 40%, rgba(11, 8, 9, 0)) left center / 1.5rem 100% no-repeat local,
    linear-gradient(270deg, var(--fond) 40%, rgba(11, 8, 9, 0)) right center / 1.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(240, 217, 160, .22), transparent) left center / .6rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(240, 217, 160, .22), transparent) right center / .6rem 100% no-repeat scroll,
    var(--fond);
}
.legal-tableau table { width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.5; }
.legal-tableau.large table { min-width: 36rem; }
.legal th, .legal td { padding: .65rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
.legal thead th { font: 600 1.05rem/1.25 var(--titre); color: var(--serment); white-space: nowrap; }
.legal tbody tr:last-child > * { border-bottom: 0; }

/* ——— Pied de page : les trois pages, puis le retour au jeu ——— */
.legal-pied { padding: 1.25rem 0 max(2rem, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--filet); }
.legal-pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.legal-pied a { display: inline-block; padding: .65rem 0; color: var(--encre-att); text-decoration: none; }
.legal-pied a:hover { color: var(--serment); }
.legal-pied a[aria-current="page"] { color: var(--encre); text-decoration: underline; text-decoration-color: var(--serment); text-underline-offset: .25em; }
.legal-pied p { margin: .25rem 0 0; }

/* Sur téléphone, la césure évite les lignes trouées dans les paragraphes et les tableaux. */
@media (max-width: 30rem) {
  .legal p, .legal li, .legal dd, .legal td { -webkit-hyphens: auto; hyphens: auto; }
  .legal th, .legal td { padding: .55rem .6rem; }
}

/* ——— Impression (pour conserver les conditions) ——— */
@media print {
  .legal-corps { background: #fff; color: #000; }
  .legal-corps::after { display: none; }
  .legal-haut { display: none; }
  .legal, .legal-pied { width: auto; }
  .legal h1, .legal h2, .legal h3, .legal a, .legal code, .legal dt, .legal thead th, .legal strong, .legal-chapeau { color: #000; }
  .legal h2 { background: none; border-top: 1px solid #999; }
  .legal-tableau { overflow: visible; background: none; border-color: #999; }
  .legal-tableau.large table { min-width: 0; }
  .legal th, .legal td { border-color: #bbb; }
  .legal-avis, .legal blockquote { background: none; border-color: #999; }
}

/* Encadré légal (garantie de conformité, annexe à l'article D. 211-3 du Code de la consommation). */
.legal-encadre {
  margin: 1rem 0 1.25rem; padding: 1rem 1.15rem;
  border: 1px solid var(--serment); border-radius: 4px;
  background: rgba(240, 217, 160, .05);
}
.legal-encadre p:last-child { margin-bottom: 0; }