/* LA CHARTE — source unique des jetons de design du produit public. Chargée par la coque `site` ET par les cinq parcours de découverte. ⚠️ POURQUOI CE FICHIER EXISTE. Le 25 août, les cinq parcours ont rejoint la palette du site (Boris : « aligner le design sur l'existant de l'appli »). Leurs pages étant AUTONOMES — leur propre ``, pas de coque Rails — les valeurs y avaient été RECOPIÉES, et un banc surveillait la dérive. Une garde vaut mieux qu'un oubli, mais elle ne vaut pas une source unique : elle constate l'écart après coup, elle ne l'empêche pas. Ce fichier l'empêche. ⚠️ IL NE CONTIENT QUE DES JETONS, JAMAIS UNE RÈGLE. C'est ce qui le rend chargeable partout sans risque : aucun nom de classe n'en sort, donc rien ne peut entrer en collision avec la mise en page d'une page hôte. La tentation inverse — charger `/site/styles.css` dans les parcours — ferait entrer 880 lignes de grilles, d'en-tête et de cartes éditoriales dans des pages qui n'en utilisent aucune. ⚠️ ET IL SE CHARGE EN PREMIER. Une feuille hôte peut redéclarer un jeton pour son propre usage ; à égalité de spécificité, c'est la dernière qui gagne. L'ordre est donc porteur de sens : la charte pose, la page ajuste. Ce que les parcours ajoutent chez eux, et qui n'a rien à faire ici : les deux polarités des guides (`--lumiere`, `--ombre`) et les couleurs de famille de scénario. Ce sont des sémantiques de parcours, pas de charte. */ :root { --ink: #17131b; --ink-2: #29212d; --paper: #f5f1e9; --paper-2: #ebe4d7; --white: #fffdf8; --violet: #82246f; --violet-deep: #4e173f; --violet-pale: #ead9e5; --solar: #efb83f; --coral: #cf5279; --green: #39785a; --blue: #376a82; --line: rgba(23, 19, 27, .18); --muted: #6e6570; --shadow: 0 24px 70px rgba(35, 22, 37, .12); --radius: 18px; /* ── LA COLONNE DU SITE, ET SA GOUTTIÈRE ──────────────────────────────────── Ces deux valeurs vivaient en CINQ endroits, sous trois formes différentes : `.shell` et `.narrow` (100% - 40px), la requête à 560 px (100% - 28px), l'en-tête (clamp 18/4vw/68) et le pied (clamp 22/5vw/72). Résultat mesuré au navigateur à 1600 px : le logo débordait de 139 px à GAUCHE du contenu, le bouton « Entrer » de 138 px à DROITE, et le pied de 130 px des deux côtés. Trois gouttières pour une seule page. ⚠️ LA GOUTTIÈRE EST UNE VARIABLE ET NON UNE FORMULE RECOPIÉE, parce que les bandeaux et le contenu ne l'emploient pas de la même façon : le contenu se BORNE (`min`), les bandeaux se REMPLISSENT et poussent leur contenu vers l'intérieur (`max(...)`). Deux calculs, une seule décision. */ --site-largeur: 1180px; --site-gouttiere: 20px; /* --serif nomme le rôle « titres », pas la classification : c'est Roboto Slab, un slab serif. Le nom de variable est conservé pour ne pas toucher aux ~90 usages. */ --serif: "Roboto Slab", Georgia, "Times New Roman", serif; --sans: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }