/* ——— LES PAGES LEGALES, DANS LA CHARTE DU SITE ———
   Leur texte n'est pas touche : il est repris tel qu'il est en ligne, bascule
   francais/anglais comprise. Seule la mise en forme change, pour qu'elles ne
   ressemblent plus a un document etranger au site. */

/* LA FEUILLE D'ORIGINE RESTE CHARGEE -- c'est elle qui porte la bascule francais/anglais,
   des regles en frere-suivant qu'on ne peut pas recopier sans risque. Mais elle contraint
   le document entier : une colonne de 44 rem centree, et une marge laterale a elle. La
   barre de navigation et le pied du site s'y trouvaient enfermes. On rend au corps de page
   sa pleine largeur ; le texte, lui, garde la sienne par .etroit. */
body { max-width: none; padding: 0; margin: 0; }

.legal { padding-block: 60px 76px; position: relative; }

.legal header {
  padding: 0 0 26px;
  border-bottom: 1px solid var(--bord);
  margin-bottom: 8px;
  position: relative;
}
.legal .icone { display: none; }

.legal .jeu {
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--doux);
  margin: 0 0 12px;
}
.legal h1 {
  font-family: var(--titre);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.1;
  color: var(--or-clair);
  margin: 0 0 10px;
}
.legal .date { font-size: 13px; color: var(--doux); margin: 0; }
.legal .date a { color: var(--or); }

.legal h2 {
  font-family: var(--corps);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--or);
  margin: 2.4em 0 .6em;
}
.legal p, .legal li { font-size: 15px; color: var(--texte); line-height: 1.7; }
.legal p { margin: .6em 0; }
.legal ul { padding-left: 20px; margin: .6em 0 1em; }
.legal li { margin-bottom: .4em; }
.legal li::marker { color: var(--mousse); }
.legal a { color: var(--or); }
.legal a:hover { color: var(--or-clair); }

/* le pied du document d'origine : on le reduit a une ligne discrete, le vrai pied
   de page du site le suit */
.legal > footer {
  margin-top: 3em;
  padding-top: 16px;
  border-top: 1px solid var(--bord);
  font-size: 13px;
  color: var(--doux);
}
.legal > footer p { font-size: 13px; color: var(--doux); }

/* les deux drapeaux restent en haut a droite, mais dans le cadre du document */
.legal .drapeaux {
  position: absolute;
  top: 2px;
  right: 0;
  display: flex;
  gap: 10px;
  z-index: 2;
}
.legal .drapeaux label { opacity: .4; }
.legal .drapeaux label:hover { opacity: .85; }