/* ============================================================ THÈME CLAIR Ne change AUCUN composant : on ne redéfinit que les jetons. C'est tout l'intérêt d'avoir tout centralisé dans tokens.css. Le thème s'applique par [data-theme="clair"] sur , posé avant le premier affichage par le script en tête de page — sinon on verrait le sombre clignoter avant de basculer. ============================================================ */ :root[data-theme="clair"]{ /* Papier chaud plutôt que blanc froid : la lumière du Sud. */ --bg: #f7f5f0; --bg-leve: #ffffff; --bg-creux: #efece4; --ink: #16150f; --ink-2: #57544a; --ink-3: #6c6a61; /* 5,0:1 sur le papier */ --rule: #e3dfd4; --rule-fort: #8b887e; /* 3,3:1 — seuil des contours de composants */ --focus: #16150f; /* Les trois états, retendus pour un fond clair. */ --etat-verifie: #2f6b45; --etat-verifie-fond: #e8efe9; --etat-hypothese: #7d5a12; --etat-hypothese-fond: #f3ecdb; --etat-non-verifie: #63615a; --etat-non-verifie-fond:#eceae3; /* Sur du papier, 0,07 rendrait une lettre éteinte invisible. */ --lettre-eteinte: .12; } /* ------------------------------------------------------------ Les rares endroits où le fond sombre était supposé. ------------------------------------------------------------ */ /* Le bloc n'est plus « éclairé sur l'encre » : il est posé sur le papier. Une ombre portée remplace la lueur. */ :root[data-theme="clair"] .bloc{ box-shadow:0 1px 2px rgba(22,21,15,.05), 0 18px 40px -28px rgba(22,21,15,.45); }