/* ============================================================ Thème sombre — palette de la page de démonstration ------------------------------------------------------------ Entièrement scopé sous [data-theme="sombre"] : sans cet attribut sur , ce fichier est totalement inerte. home.css n'est pas modifié d'une ligne, donc le retour en arrière consiste à retirer l'attribut (ou ce ). Activation : /?theme=sombre · retour : /?theme=clair ============================================================ */ :root[data-theme="sombre"] { --bg: #06070b; --bg-soft: #0b0e15; --surface: #0e121b; --text: #eef1f7; --muted: #99a1b3; --faint: #6f7788; --border: #1b2029; --border-strong: #2b3240; /* Ambre : l'accent chaud de la démo. Sur fond sombre, le « deep » du survol doit être plus CLAIR, pas plus foncé. */ --accent: #f0b429; --accent-deep: #ffc94f; --accent-tint: rgba(240, 180, 41, 0.10); --ring: 0 0 0 3px rgba(240, 180, 41, 0.35); } /* ------------------------------------------------------------ Champs de saisie et contrôles natifs. Les règles d'origine fixent un FOND via jeton, mais jamais la COULEUR DU TEXTE : elle retombait sur le noir par défaut du navigateur. Sur papier, invisible comme problème ; sur fond sombre, c'est du noir sur noir — les longueurs de la démo « découpe » disparaissaient purement et simplement. `color-scheme: dark` règle en plus tout ce que le navigateur dessine lui-même et que le CSS n'atteint pas : curseurs range, cases à cocher, listes déroulantes, barres de défilement, remplissage automatique. ------------------------------------------------------------ */ :root[data-theme="sombre"] { color-scheme: dark; } :root[data-theme="sombre"] input, :root[data-theme="sombre"] select, :root[data-theme="sombre"] textarea, :root[data-theme="sombre"] button { color: var(--text); } :root[data-theme="sombre"] ::placeholder { color: var(--faint); opacity: 1; /* Firefox applique une opacité par défaut */ } /* Le bouton primaire garde son texte foncé sur l'ambre (voir plus bas) : la règle générique ci-dessus ne doit pas le repasser en clair. */ :root[data-theme="sombre"] button.btn-primary, :root[data-theme="sombre"] button.cookie-btn-primary { color: #16110a; } /* Ambiance : les deux halos de la démo, en CSS plutôt qu'en WebGL — moins cher, et ils se comportent bien au redimensionnement. */ :root[data-theme="sombre"] body { background-color: var(--bg); background-image: radial-gradient(58vw 46vw at 76% 8%, rgba(122, 162, 255, 0.14), transparent 62%), radial-gradient(50vw 42vw at 12% 62%, rgba(240, 180, 41, 0.09), transparent 64%); background-attachment: fixed; } /* ------------------------------------------------------------ Les quelques valeurs codées en dur dans home.css. Toutes supposaient un fond clair et un accent bleu foncé. ------------------------------------------------------------ */ /* Texte blanc sur l'accent : illisible sur de l'ambre. */ :root[data-theme="sombre"] .skip-link, :root[data-theme="sombre"] .skip-link:focus, :root[data-theme="sombre"] .btn-primary, :root[data-theme="sombre"] .btn-primary:hover, :root[data-theme="sombre"] .cookie-btn-primary { color: #16110a; } /* Papier quadrillé du hero : le trait doit être clair, pas sombre. */ :root[data-theme="sombre"] .hero::before { background-image: linear-gradient(rgba(238, 241, 247, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 241, 247, 0.05) 1px, transparent 1px); } /* L'accent bleu inliné en rgba(30, 63, 174, …) à plusieurs endroits. */ :root[data-theme="sombre"] ::selection { background: rgba(240, 180, 41, 0.26); color: #16110a; } :root[data-theme="sombre"] .icon-chip, :root[data-theme="sombre"] .icon-chip.warm { border-color: rgba(240, 180, 41, 0.28); } :root[data-theme="sombre"] .vs-yes { border-color: rgba(240, 180, 41, 0.38); } :root[data-theme="sombre"] .control:focus { box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.20); } /* Ombre portée pensée pour du papier : sur fond sombre elle disparaît, c'est la bordure qui doit porter le relief. */ :root[data-theme="sombre"] .cookie-banner { box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.75); border-color: var(--border-strong); } /* Le bouton primaire gagne une lueur discrète, comme dans la démo. */ :root[data-theme="sombre"] .btn-primary:hover { box-shadow: 0 0 30px rgba(240, 180, 41, 0.28); } /* ============================================================ PAGE DÉMOS et PAGE POLITIQUE ------------------------------------------------------------ demos.css n'a pas de :root : il hérite des jetons de home.css, donc il suit tout seul. politique.css, lui, REDÉFINIT tout le système de design dans son propre :root (c'est un doublon de home.css). Aucun souci malgré tout : `:root[data-theme="sombre"]` est plus spécifique qu'un `:root` simple, donc nos jetons gagnent quel que soit l'ordre de chargement. Restent son jeton propre --legal, et les valeurs codées en dur des deux fichiers. ============================================================ */ :root[data-theme="sombre"] { --legal: #c9cedb; /* corps des textes juridiques — politique.css */ } /* Le papier quadrillé : même motif, trois sélecteurs différents selon la page (hero / page-intro / page-head). */ :root[data-theme="sombre"] .page-intro::before, :root[data-theme="sombre"] .page-head::before { background-image: linear-gradient(rgba(238, 241, 247, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(238, 241, 247, 0.05) 1px, transparent 1px); } /* Onglet actif : texte sur aplat ambre. */ :root[data-theme="sombre"] .onglet.actif { color: #16110a; } /* Anneau de focus et bordure teintée, hérités de l'accent bleu. */ :root[data-theme="sombre"] .controle input:focus { box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.20); } :root[data-theme="sombre"] .demo-message { border-color: rgba(240, 180, 41, 0.32); } /* Découpe optimisée : le trait entre les pièces est un « #fbfbf8 » écrit en dur dans DecoupeDemo.razor — soit des lignes blanches sur fond sombre. Une règle CSS l'emporte sur un attribut de présentation SVG, donc inutile de toucher au C#. La palette des pièces, elle, reste lisible telle quelle : ses huit couleurs sont toutes plus claires que le panneau. */ :root[data-theme="sombre"] .svg-decoupe rect:not(.barre-fond) { stroke: var(--bg); } /* Carte Leaflet : des tuiles OpenStreetMap en plein jour sur une page noire, ça éblouit. On les assombrit SANS les inverser — l'inversion produit un faux mode sombre où les étiquettes deviennent illisibles et les forêts virent au rose. */ :root[data-theme="sombre"] .leaflet-container { background: var(--bg-soft); } :root[data-theme="sombre"] .leaflet-tile-pane { filter: brightness(0.62) saturate(0.78) contrast(1.06); } /* Les deux camions de la démo « tournée ». Le bleu d'origine (#1e3fae) est trop proche du fond sombre pour se lire ; on reprend le duo ambre / bleu doux du reste du site. carte.js retombe sur les valeurs claires si ces jetons ne sont pas définis. */ :root[data-theme="sombre"] { --tournee-a: #f0b429; --tournee-b: #7aa2ff; } /* Les contrôles Leaflet restent en thème clair par défaut. */ :root[data-theme="sombre"] .leaflet-bar a, :root[data-theme="sombre"] .leaflet-control-attribution { background: var(--surface); color: var(--muted); border-color: var(--border); } :root[data-theme="sombre"] .leaflet-control-attribution a { color: var(--accent); }