/* ========================================================================== SECTORWEB — mode sombre Le design clair n'utilise jamais de blanc pur : papier #f7f5f0, vélin #f0ede6, encre #262626. Le mode sombre suit le même principe à l'envers — pas de noir pur, mais des gris chauds relevés, et un blanc cassé pour le texte. Le thème s'applique sur , posé au chargement par le script en ligne de l'en-tête (préférence enregistrée, sinon réglage du système). ========================================================================== */ :root[data-theme="dark"]{ color-scheme:dark; /* Surfaces — du plus bas au plus haut */ --page-bg:#201f1c; /* fond de page */ --vellum:#252320; /* panneaux en creux */ --canvas:#2a2825; /* cartes et surfaces surélevées */ --gridline:#3a3733; /* filets */ /* Texte — blanc cassé chaud, jamais #fff */ --ink:#ece8e0; --graphite:#d2cec5; --slate:#aaa69c; --pebble:#9a968d; --ash:#8e8a81; --stone:#6b675f; --mist:#5a5750; /* Signal — légèrement éclairci pour tenir sur fond sombre */ --ember:#ff6a2b; --ember-glow:rgba(255,106,43,.20); --ember-wash:rgba(255,106,43,.12); /* Ombres — le noir à 3 % ne se voit plus, on remonte et on ajoute un liseré */ --sh-card:rgba(0,0,0,.36) 0 24px 32px -12px,rgba(0,0,0,.26) 0 8px 16px -4px,rgba(255,255,255,.045) 0 0 0 1px; --sh-lift:rgba(0,0,0,.46) 0 40px 48px -20px,rgba(0,0,0,.3) 0 16px 24px -12px,rgba(255,255,255,.055) 0 0 0 1px; } /* ---------- les sept règles qui codaient une couleur en dur ---------- */ /* Barres translucides : la valeur reprenait le papier clair. */ :root[data-theme="dark"] .nav{ background:rgba(32,31,28,.86) } :root[data-theme="dark"] .mbar{ background:rgba(32,31,28,.94) } /* Survols de boutons : on éclaircit au lieu d'assombrir. */ :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .wp-block-button.is-style-primary .wp-block-button__link:hover{ background:#ff7d45 } :root[data-theme="dark"] .btn-dark{ color:var(--page-bg) } :root[data-theme="dark"] .btn-dark:hover{ background:#fff; color:var(--page-bg) } /* Pastilles actives : fond clair, donc texte sombre — l'inverse du clair. */ :root[data-theme="dark"] .tab.on, :root[data-theme="dark"] .chip.on, :root[data-theme="dark"] .cat-rail a.on, :root[data-theme="dark"] .pager .on{ color:var(--page-bg) } /* Logo : orange sur fond clair, blanc cassé sur fond sombre. On reprend --ink, le même blanc chaud que le texte — un #fff pur jurerait avec le reste de la page, comme le noir pur jurerait en mode clair. */ :root[data-theme="dark"] .mark{ background-color:var(--ink) } /* Encart d'alerte : le fond pêche devient un brun chaud. */ :root[data-theme="dark"] .callout.warn{ background:#2e211a; border-color:rgba(255,106,43,.35) } /* ---------- bascule clair / sombre ---------- */ .theme-toggle{ width:32px; height:32px; border-radius:var(--r-pill); border:1px solid var(--gridline); background:var(--canvas); color:var(--slate); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .15s,color .15s; } .theme-toggle:hover{ border-color:var(--ember); color:var(--ember) } .theme-toggle svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round } .theme-toggle .sun{ display:none } :root[data-theme="dark"] .theme-toggle .sun{ display:block } :root[data-theme="dark"] .theme-toggle .moon{ display:none } /* Le bouton de la barre ne tient plus sous 600 px : celui du menu prend le relais, avec son libellé. */ .theme-toggle--menu{ display:none; width:auto; height:auto; gap:10px; padding:12px 16px; margin-top:14px; align-self:flex-start; font-family:var(--f-mono); font-size:13px; } .theme-toggle--menu .lb{ line-height:1 } @media(max-width:600px){ .nav-right .theme-toggle{ display:none } .theme-toggle--menu{ display:inline-flex } }