/*
* LES PAGES QUI ENGAGENT — politique de confidentialité et CGV (point 04, D172).
*
* ⚠️⚠️ **UNE PAGE JURIDIQUE SE LIT SANS JAVASCRIPT, ET C'EST LA SEULE CONTRAINTE QUI A DÉCIDÉ DE
* SA FORME.** Le patron du dépôt pour une page multilingue est une table de chaînes en JS
* (`site/bienvenue/mots.js`), et il est **écarté ici** : si le script ne charge pas, la page est
* VIDE. Sur un écran de bienvenue c'est un défaut ; sur la politique de confidentialité c'est le
* relecteur du Chrome Web Store qui voit une page blanche à l'URL obligatoire du formulaire, et
* c'est un motif de refus. Le texte est donc dans le HTML, en dur, une page par langue.
*
* ⚠️ **Cette feuille est le SEUL endroit qui décrit ces six pages.** Si elle ne charge pas non
* plus, elles restent entièrement lisibles — c'est du HTML sémantique, et c'est délibéré : la
* dégradation d'un document qui engage doit être « moins beau », jamais « moins complet ».
*
* ⚠️ Les jetons sont recopiés de `DESIGN.md`, comme le fait `site/connexion/index.html` : le site
* ne partage pas la feuille du panneau (elle vit dans un Shadow DOM et pèse 400 Ko). Les valeurs
* qui comptent ici sont peu nombreuses, et une divergence de teinte sur une page de texte ne
* casse rien — contrairement à une divergence de RÈGLE, qui, elle, est interdite (leçon 35).
*/
:root {
--lg-vert-50: #edf7f1;
--lg-vert-100: #d2e9db;
--lg-vert-500: #3e9e63;
--lg-vert-600: #2f7f4e;
--lg-vert-700: #24633c;
--lg-gris-200: #dde3df;
--lg-gris-300: #c3ccc7;
--lg-gris-600: #6e7c73;
--lg-gris-900: #333b36;
/* Le papier du panneau, pas du blanc — c'est le fond de tout le produit. */
--lg-papier: #f8f5ee;
--lg-blanc: #fffdf8;
--lg-texte: var(--lg-gris-900);
--lg-texte-doux: var(--lg-gris-600);
--lg-titre: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--lg-corps: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@font-face { font-family: "Bricolage Grotesque"; font-weight: 400; font-display: swap;
src: url("../polices/bricolage-grotesque-v9-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap;
src: url("../polices/bricolage-grotesque-v9-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap;
src: url("../polices/bricolage-grotesque-v9-latin-800.woff2") format("woff2"); }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--lg-papier);
color: var(--lg-texte);
font: 16px/1.62 var(--lg-corps);
/*
* ⚠️ `color-scheme: light` en dur. D139 a écarté le mode sombre de la v1 et le panneau le force
* de la même façon : sans ça, un navigateur en thème sombre repeint les champs et les bordures
* par-dessus une palette claire, et le document devient illisible par endroits.
*/
color-scheme: light;
-webkit-text-size-adjust: 100%;
}
.page { max-width: 46rem; margin: 0 auto; padding: 32px 24px 96px; }
/* ── LE BANDEAU ───────────────────────────────────────────────────────────────────────────── */
.haut {
display: flex; flex-wrap: wrap; gap: 16px;
align-items: center; justify-content: space-between;
padding-bottom: 16px; margin-bottom: 32px;
border-bottom: 2px solid var(--lg-gris-200);
}
/*
* ⚠️ C'est un `` depuis le point 45, et ça ne l'était pas : `sert.mjs` servait
* `terrain/index.html` à la racine, donc un lien vers `/` aurait déposé le relecteur du Chrome
* Web Store sur une démo WebGL en plein écran. Il sert maintenant `site/index.html`.
* ⚠️ **Chaque page pointe sur la racine de SA langue** (`/`, `/fr/`, `/es/`) — pas sur `/`, qui
* est la page anglaise. La règle vaut pour les deux éléments : le style tient dans les deux cas.
*/
.marque {
font-family: var(--lg-titre); font-weight: 800; font-size: 20px;
color: var(--lg-vert-700); text-decoration: none; letter-spacing: -0.01em;
}
a.marque:hover { color: var(--lg-vert-600); }
/*
* Le sélecteur de langue. Trois ``, jamais un `