/* ============================================================ Charte Maths LSA — pendant sombre ------------------------------------------------------------ La charte claire est un papier crème encré de bleu-noir, avec l'ocre pour ponctuer. Le sombre en prend le contrepied littéral : le crème devient l'encre, le papier devient la nuit. La chaleur reste — le fond tire sur le brun, pas sur le bleu — pour que ce soit la même identité vue de nuit, et non une autre charte. Les couleurs sémantiques — bleu, prune, sarcelle, olive, brique — sont éclaircies : les versions claires, prévues pour du texte sur crème, deviennent illisibles sur fond sombre. Cette feuille est chargée après style.css et après le style embarqué des fiches, ce qui lui permet de redéfinir les variables sans !important. Elle vit dans src/ et non dans le dépôt du site : une mise à jour depuis Git ne peut pas l'effacer. Suivant le réglage du système. Pour forcer l'un ou l'autre, poser data-theme="dark" ou "light" sur . ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #17150f; /* la nuit remplace le papier */ --panel: #1f1c15; --ink: #ece5d6; /* le crème devient l'encre */ --ink-soft: #aca492; --card-ink: #e2dbca; --rule: #332e23; --rule-soft: #5b5342; --ochre: #d8a44b; /* éclairci pour tenir sur fond sombre */ --ochre-soft: #6d4f16; --ochre-bg: #241c0e; --blue: #83a6de; --plum: #c495c4; --teal: #6fbda9; --olive: #a9c476; --brick: #e0827a; --shadow: 0 18px 44px -22px rgba(0,0,0,.85); --shadow-soft: 0 10px 28px -18px rgba(0,0,0,.7); } /* --- Les valeurs écrites en dur, que les variables ne couvrent pas --- */ /* Le halo du haut de page, blanc sur clair : il doit se retourner, sans quoi il éclaircit une zone censée rester sombre. */ :root:not([data-theme="light"]) body { background-image: radial-gradient(125% 80% at 50% -10%, rgba(216,164,75,.07), rgba(216,164,75,0) 60%); } /* L'ocre foncé du survol devient plus clair que l'ocre de repos : sur fond sombre, un survol doit éclairer, pas assombrir. */ :root:not([data-theme="light"]) a:hover, :root:not([data-theme="light"]) .list li a ~ a:hover { color: #eec27c; } /* Bandeau, sections alternées et pied de page : mêmes voiles, mais tirés du fond sombre au lieu du papier. */ :root:not([data-theme="light"]) .header, :root:not([data-theme="light"]) header.header { background: rgba(23,21,15,.88); } :root:not([data-theme="light"]) .section.alt { background: linear-gradient(180deg, rgba(31,28,21,.75), rgba(31,28,21,.4)); } :root:not([data-theme="light"]) .footer, :root:not([data-theme="light"]) footer { background: rgba(31,28,21,.6); } /* Filigranes ocre : à peine plus marqués, la nuit les avalait. */ :root:not([data-theme="light"]) .hero-deco { color: rgba(216,164,75,.10); } :root:not([data-theme="light"]) .table-calendar tr:hover td { background: rgba(216,164,75,.07); } /* Bouton de retour en haut : pastille ocre, donc texte sombre. */ :root:not([data-theme="light"]) .to-top { color: #17150f; } :root:not([data-theme="light"]) .to-top:hover { background: #eec27c; color: #17150f; } /* Voile de la modale : plus dense, le contraste avec la page est moindre. */ :root:not([data-theme="light"]) .modal-backdrop, :root:not([data-theme="light"]) .modal::backdrop { background: rgba(0,0,0,.66); } /* Les PDF et images n'ont pas de version sombre : un léger retrait évite qu'une page blanche ne brûle les yeux au milieu du sombre. */ :root:not([data-theme="light"]) img:not([src$=".svg"]) { filter: brightness(.94); } } /* Bascule explicite, si un jour vous ajoutez un bouton. */ :root[data-theme="dark"] { --paper:#17150f; --panel:#1f1c15; --ink:#ece5d6; --ink-soft:#aca492; --card-ink:#e2dbca; --rule:#332e23; --rule-soft:#5b5342; --ochre:#d8a44b; --ochre-soft:#6d4f16; --ochre-bg:#241c0e; --blue:#83a6de; --plum:#c495c4; --teal:#6fbda9; --olive:#a9c476; --brick:#e0827a; --shadow:0 18px 44px -22px rgba(0,0,0,.85); --shadow-soft:0 10px 28px -18px rgba(0,0,0,.7); }