/* Design tokens — cf. resources/design-system.html (canevas de travail) et D_004. Neutres promus depuis "brouillon" cette nuit (night-shift, 17-18 août 2026) sur la base des 7 PDFs ajoutés par Max dans resources/ — les mockups y montrent clairement un thème sombre cohérent avec la rampe de gris déjà esquissée dans design-system.html. À CONFIRMER par Max — pas encore une validation actée en conversation, juste une déduction visuelle directe des PDFs. */ :root { /* Thème sombre déclaré au navigateur. Sans ça, Chromium et Samsung Internet appliquent leur mode sombre forcé (force-dark) PAR-DESSUS la page — qui est déjà sombre : images désaturées et assombries deux fois, gris écrasés, rouge délavé. Signalé sur Samsung Internet (téléphone client), 2026-09-24. Doublé par une dans site/snippets/head.php, qui agit dès le parsing du , avant le chargement de cette feuille. */ color-scheme: dark; /* --- couleurs marque (validé) --- */ --tok-color-beige: #EBD7B0; --tok-color-beige-bg: #F2D48B; --tok-color-rouge: #A33E0A; /* Variante plus claire, réservée au texte/accent sur fond sombre (onglet actif, liens, eyebrow, listes numérotées) — le --tok-color-rouge de base reste inchangé pour les fonds de bouton (contraste correct à ~4.6:1 avec le texte beige dessus). En texte, le rouge de base tombe à ~3:1 sur --tok-bg — illisible, d'où cette variante (~5.2:1). Essai contraste 2026-09-19, retour client "manque de contraste" — à valider. */ --tok-color-rouge-vif: #E2590F; /* --- neutres (promus depuis brouillon — cf. note ci-dessus) --- */ --tok-gray-1: #F2F1EE; --tok-gray-2: #E3E1DB; --tok-gray-3: #C7C3BA; --tok-gray-4: #9C978C; --tok-gray-6: #454239; --tok-gray-7: #0F0F0E; /* --- rôles sémantiques thème sombre (déduits des PDFs, pas de token dédié dans design-system.html) --- */ --tok-bg: var(--tok-gray-7); /* validé par Max : #0F0F0E */ --tok-surface: #161512; /* légèrement plus sombre que le fond, cartes/sections alternées */ --tok-bg-navbar: #100F0D; /* fond des 3 segments navbar, plus sombre que --tok-bg — cf. PDF hero Accueil */ --tok-bg-footer: #15130F; /* validé par Max, plus clair que --tok-bg */ --tok-text: var(--tok-gray-2); --tok-text-muted: var(--tok-gray-4); /* --- typographie (validé) --- */ --tok-font-degular: 'Degular', -apple-system, "Segoe UI", Arial, sans-serif; /* --- espacement (validé — valeurs déjà consommées par les composants ci-dessous) --- */ --tok-space-xs: 4px; --tok-space-sm: 8px; --tok-space-lg: 16px; --tok-space-2xl: 32px; --tok-space-4xl: 64px; /* --- navbar (hauteur de référence, cf. semantic.css #navbar) --- */ --tok-navbar-height: 64px; /* --- container / breakpoints (container-max + padding validés, breakpoints = point de départ brouillon) --- */ --tok-container-max: 1440px; --tok-bp-tablet: 768px; --tok-bp-desktop: 1200px; /* --- formes : cisaillement à angle constant (validé) --- */ --tok-shear-ratio: 0.12; /* ~6.84deg — cf. #formes dans design-system.html */ /* --- padding latéral (source unique, tout bloc plein-largeur le consomme : .container, hero, navbar, footer, quote-block — cf. règle "même padding latéral partout sauf mention explicite"). Les media queries ci-dessous ne peuvent pas lire --tok-bp-tablet/--tok-bp-desktop (une @media n'accepte pas de custom property), donc les valeurs 768px/1200px sont dupliquées en dur ici. */ --tok-page-padding-inline: var(--tok-space-lg); } @media (min-width: 768px) { :root { --tok-page-padding-inline: var(--tok-space-2xl); } } @media (min-width: 1200px) { :root { --tok-page-padding-inline: var(--tok-space-4xl); } }