/* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
THÃME CLAIR â V-Storm (23/08/2026)
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
Activé par (posé AVANT le premier rendu par
js/vs-theme.js, sinon la page clignote en sombre au chargement).
â ï¸ POURQUOI CE FICHIER EST LONG : il n'y a PAS de palette unique dans le
dashboard. Chaque page a été écrite avec son propre dialecte de variables
(--ink / --cp-ink / --p-ink / --dimâ¦) et environ 2 200 couleurs sont écrites
EN DUR dans les pages. On redéfinit donc :
1. les 2 palettes globales (style.css et vs-system.css),
2. le dialecte de CHAQUE page,
3. les surfaces en dur du châssis commun (nav, cartes, champsâ¦),
parce qu'un rgba(255,255,255,.04) devient invisible sur du blanc.
â ï¸ RÃGLE : on ne touche JAMAIS au blanc posé SUR du violet (texte des
boutons pleins, logo) â il doit rester blanc dans les deux thèmes.
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
:root[data-theme="clair"] {
color-scheme: light;
/* ââ Palette de référence du thème clair âââââââââââââââââââââââââââââ
Fond légèrement teinté plutôt que blanc pur : moins fatigant, et ça
laisse les cartes blanches ressortir. */
--vsc-bg: #f4f3f9;
--vsc-bg-2: #eceaf4;
--vsc-card: #ffffff;
--vsc-card-2: #faf9fd;
--vsc-card-3: #f2f0f8;
--vsc-hair: rgba(23, 20, 43, .09);
--vsc-hair-2: rgba(23, 20, 43, .16);
--vsc-ink: #17142b;
--vsc-ink-2: #45405c;
/* â ï¸ Ces deux teintes ont été ASSOMBRIES le 23/08 après un second audit,
plus strict (seuil 4:1 au lieu de 3:1) : Ã #6b6584 / #8d87a3 les
étiquettes, en-têtes de tableau et légendes tombaient à 3,4:1 â
lisibles à l'Åil sur une grande police, pénibles en 10-11 px. */
--vsc-ink-3: #5a5474;
--vsc-ink-4: #726c8a;
/* Violet assombri : le #8c66ff de la maison passe en dessous du contraste
minimum sur fond blanc pour du texte. Les aplats gardent le violet clair. */
--vsc-vio: #6a3eef;
--vsc-vio-2: #5a2ee5;
/* â ï¸ Le violet « soft » de la marque (#8c66ff) est un violet de FOND
sombre : posé en TEXTE sur blanc il plafonne à 3,8:1. Les pages qui
s'en servent pour des étiquettes (Compta, Publier) devenaient molles. */
--vsc-vio-soft: #7048e8;
--vsc-vio-tint: rgba(106, 62, 239, .10);
--vsc-vio-tint2: rgba(106, 62, 239, .18);
--vsc-ok: #12854f;
--vsc-ok-soft: rgba(18, 133, 79, .12);
--vsc-warn: #a15c00;
--vsc-warn-soft: rgba(161, 92, 0, .12);
--vsc-err: #c8324f;
--vsc-err-soft: rgba(200, 50, 79, .10);
--vsc-info: #1f6fd0;
--vsc-pop: #4a7000; /* le vert citron est illisible sur blanc */
--vsc-pop-soft: rgba(93, 140, 0, .13);
--vsc-shadow: 0 1px 2px rgba(23,20,43,.05), 0 8px 24px rgba(23,20,43,.07);
--vsc-shadow-pop:0 24px 60px rgba(23,20,43,.18);
/* ââ 1a. Palette globale de style.css âââââââââââââââââââââââââââââââ */
--bg: var(--vsc-bg);
--bg-elevated: var(--vsc-card-2);
--surface: var(--vsc-card);
--surface-hover: var(--vsc-card-3);
--border: var(--vsc-hair);
--border-strong: var(--vsc-hair-2);
--accent: var(--vsc-vio);
--accent-hover: var(--vsc-vio-2);
--accent-light: #7c4ddb;
--accent-glow: rgba(106, 62, 239, .22);
--accent-soft: var(--vsc-vio-tint);
--accent-border: rgba(106, 62, 239, .25);
--text: var(--vsc-ink);
--text-secondary:var(--vsc-ink-2);
--text-muted: var(--vsc-ink-4);
--success: var(--vsc-ok);
--error: var(--vsc-err);
--warning: var(--vsc-warn);
--gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(106,62,239,.10) 0%, transparent 60%);
--gradient-card: linear-gradient(135deg, rgba(106,62,239,.05) 0%, transparent 100%);
--shadow-glow: 0 0 60px rgba(106,62,239,.14);
--shadow-card: var(--vsc-shadow);
--shadow-lg: var(--vsc-shadow-pop);
/* ââ 1b. Palette globale de vs-system.css âââââââââââââââââââââââââââ */
--vs-bg: var(--vsc-bg);
--vs-card: var(--vsc-card);
--vs-card-2: var(--vsc-card-2);
--vs-card-hi: var(--vsc-card-3);
--vs-overlay: rgba(23, 20, 43, .38);
--vs-border: var(--vsc-hair);
--vs-border-hi: var(--vsc-hair-2);
--vs-border-vio: rgba(106, 62, 239, .45);
--vs-violet: var(--vsc-vio);
--vs-violet-2: var(--vsc-vio-2);
--vs-violet-soft: var(--vsc-vio-soft);
--vs-violet-light:#7c4ddb;
--vs-violet-tint: var(--vsc-vio-tint);
--vs-violet-tint2:var(--vsc-vio-tint2);
--vs-text: var(--vsc-ink);
--vs-text-2: var(--vsc-ink-2);
--vs-text-mute: var(--vsc-ink-3);
--vs-text-dim: var(--vsc-ink-4);
--vs-text-faint: #a8a3bb;
--vs-ok: var(--vsc-ok);
--vs-ok-soft: var(--vsc-ok-soft);
--vs-warn: var(--vsc-warn);
--vs-warn-soft: var(--vsc-warn-soft);
--vs-err: var(--vsc-err);
--vs-err-soft: var(--vsc-err-soft);
--vs-info: var(--vsc-info);
--vs-shadow-card: var(--vsc-shadow);
--vs-shadow-pop: var(--vsc-shadow-pop);
--vs-glow-violet: 0 0 0 1px rgba(106,62,239,.30), 0 8px 28px rgba(106,62,239,.18);
--vs-inset-violet:inset 0 0 0 1px rgba(106,62,239,.16), inset 0 24px 48px rgba(106,62,239,.03);
/* ââ 2. Dialectes des pages âââââââââââââââââââââââââââââââââââââââââââ
Mêmes rôles, noms différents selon la page. On les redéfinit tous ici
plutôt que page par page : une seule source pour le thème. */
/* dashboard, colis, notes, publier (variantes --hair2/--ink2 sans tiret) */
--panel: var(--vsc-card);
--panel-2: var(--vsc-card-2);
--hair: var(--vsc-hair);
--hair-2: var(--vsc-hair-2);
--hair2: var(--vsc-hair-2);
--ink: var(--vsc-ink);
--ink-2: var(--vsc-ink-2);
--ink-3: var(--vsc-ink-3);
--ink-4: var(--vsc-ink-4);
--ink2: var(--vsc-ink-2);
--ink3: var(--vsc-ink-3);
--ink4: var(--vsc-ink-4);
--vio: var(--vsc-vio);
--vio-tint: var(--vsc-vio-tint);
--viot: var(--vsc-vio-tint);
--ok: var(--vsc-ok);
--err: var(--vsc-err);
--errs: var(--vsc-err-soft);
--err-soft: var(--vsc-err-soft);
--pop: var(--vsc-pop);
--pop-soft: var(--vsc-pop-soft);
--prim: var(--vsc-vio);
--beta: var(--vsc-vio);
--add: var(--vsc-ok);
--amber: var(--vsc-warn);
--amber-soft: var(--vsc-warn-soft);
--amber-tint: var(--vsc-warn-soft);
--amber-line: rgba(161, 92, 0, .30);
--mint: var(--vsc-ok);
--mint-soft: var(--vsc-ok-soft);
--blue: var(--vsc-info);
--bluet: rgba(31, 111, 208, .12);
--gray: var(--vsc-ink-4);
--pink: #b8397a;
--c: var(--vsc-card);
--sc: var(--vsc-card-2);
--p: var(--vsc-card);
--pc: var(--vsc-card);
--bn-bg: var(--vsc-bg);
/* dashboard-central (messagerie) */
--card: var(--vsc-card);
--card2: var(--vsc-card-2);
--card3: var(--vsc-card-3);
--border-hi: var(--vsc-hair-2);
--dim: var(--vsc-ink-3);
/* â ï¸â ï¸ MON ERREUR, corrigée le 23/08 : `--lime` de la Messagerie NE VAUT
PAS du vert â la page l'a redéfini à #8c66ff, c'est le VIOLET de la
marque, le nom est resté d'une version antérieure. Je l'avais mappé sur
--vsc-pop (olive) : le bouton « Faire une offre » et l'onglet actif
passaient de violet à vert. Ne jamais mapper une variable sur la foi de
son NOM â lire la valeur que la page lui donne. */
--lime: var(--vsc-vio);
--lime-dim: var(--vsc-vio-tint);
--border-lime:rgba(106, 62, 239, .30);
--fav: #c9861a;
--lien: var(--vsc-info);
--lit: var(--vsc-err);
--litige: var(--vsc-err);
--litige-dim: var(--vsc-err-soft);
--litige-bd: rgba(200, 50, 79, .30);
/* dashboard-compta (--cp-*) */
--cp-panel: var(--vsc-card);
--cp-panel2: var(--vsc-card-2);
--cp-hair: var(--vsc-hair);
--cp-hair2: var(--vsc-hair-2);
--cp-ink: var(--vsc-ink);
--cp-ink2: var(--vsc-ink-2);
--cp-ink3: var(--vsc-ink-3);
--cp-ink4: var(--vsc-ink-4);
--cp-vio: var(--vsc-vio);
--cp-pop: var(--vsc-vio-soft);
--cp-amber: var(--vsc-warn);
--cp-amber-tint:var(--vsc-warn-soft);
--cp-amber-line:rgba(161, 92, 0, .30);
--cp-err: var(--vsc-err);
--cp-err-soft: var(--vsc-err-soft);
/* dashboard-billing (--fb-*) â palette OUBLIÃE lors de la 1ʳᵠpasse.
â ï¸ Elle n'était pas visible à l'audit de contraste : les CARTES étaient
déjà blanches (section 3 les cible en dur), seuls les TEXTES restaient
calibrés sombre. Le contrôle fiable est la liste des préfixes :
`grep -oE '\-\-[a-z]{2,4}-[a-z0-9-]+: *#'` sur chaque page,
confrontée aux préfixes présents ici. */
--fb-panel: var(--vsc-card);
--fb-panel-2: var(--vsc-card-2);
--fb-hair: var(--vsc-hair);
--fb-hair-2: var(--vsc-hair-2);
--fb-ink: var(--vsc-ink);
--fb-ink-2: var(--vsc-ink-2);
--fb-ink-3: var(--vsc-ink-3);
--fb-ink-4: var(--vsc-ink-4);
--fb-vio: var(--vsc-vio);
--fb-vio-tint: var(--vsc-vio-tint);
--fb-vio-line: rgba(106, 62, 239, .30);
--fb-pop: var(--vsc-vio-soft);
--fb-pop-tint: var(--vsc-vio-tint);
--fb-blue: var(--vsc-info);
--fb-blue-tint: rgba(31, 111, 208, .12);
--fb-blue-line: rgba(31, 111, 208, .30);
--fb-err: var(--vsc-err);
--fb-err-soft: var(--vsc-err-soft);
/* dashboard-affiliate (--af-*) */
--af-panel: var(--vsc-card);
--af-panel-2: var(--vsc-card-2);
--af-hair: var(--vsc-hair);
--af-hair-2: var(--vsc-hair-2);
--af-ink: var(--vsc-ink);
--af-ink-2: var(--vsc-ink-2);
--af-ink-3: var(--vsc-ink-3);
--af-ink-4: var(--vsc-ink-4);
--af-vio: var(--vsc-vio);
--af-vio-tint: var(--vsc-vio-tint);
--af-vio-line: rgba(106, 62, 239, .30);
--af-pop: var(--vsc-vio-soft);
--af-pop-soft: var(--vsc-vio-tint);
--af-blue: var(--vsc-info);
--af-blue-soft: rgba(31, 111, 208, .12);
/* dashboard-employes (--ge-*) */
--ge-panel: var(--vsc-card);
--ge-panel-2: var(--vsc-card-2);
--ge-card-2: var(--vsc-card-2);
--ge-card-3: var(--vsc-card-3);
--ge-hair: var(--vsc-hair);
--ge-hair-2: var(--vsc-hair-2);
--ge-ink: var(--vsc-ink);
--ge-ink-2: var(--vsc-ink-2);
--ge-ink-3: var(--vsc-ink-3);
--ge-ink-4: var(--vsc-ink-4);
--ge-faint: var(--vsc-ink-4);
--ge-vio: var(--vsc-vio);
--ge-vio-soft: var(--vsc-vio-soft);
--ge-vio-2: var(--vsc-vio-2);
--ge-vio-tint: var(--vsc-vio-tint);
--ge-vio-line: rgba(106, 62, 239, .30);
--ge-pop: var(--vsc-vio-soft);
--ge-pop-soft: var(--vsc-vio-tint);
--ge-blue: var(--vsc-info);
--ge-blue-tint: rgba(31, 111, 208, .12);
--ge-blue-line: rgba(31, 111, 208, .30);
--ge-red: var(--vsc-err);
--ge-red-tint: var(--vsc-err-soft);
--ge-red-border: rgba(200, 50, 79, .28);
/* dashboard-settings (--p-*) */
--p-panel: var(--vsc-card);
--p-hair: var(--vsc-hair);
--p-hair2: var(--vsc-hair-2);
--p-ink: var(--vsc-ink);
--p-ink2: var(--vsc-ink-2);
--p-ink3: var(--vsc-ink-3);
--p-ink4: var(--vsc-ink-4);
--p-err: var(--vsc-err);
--p-err-soft: var(--vsc-err-soft);
/* barre mobile (vs-mobile.css) */
--vsm-bg: var(--vsc-bg);
--vsm-card: var(--vsc-card);
--vsm-ink: var(--vsc-ink);
--vsm-ink-2: var(--vsc-ink-3);
--vsm-hair: var(--vsc-hair);
--vsm-accent: var(--vsc-vio);
--vsm-accent-2: var(--vsc-vio-2);
}
/* âââ 3. Surfaces écrites EN DUR dans le châssis commun ââââââââââââââââââ
Un rgba(255,255,255,.03) est invisible sur du blanc : ces règles ne sont
pas du zèle, sans elles les barres, champs et cartes disparaissent. */
:root[data-theme="clair"] body,
:root[data-theme="clair"] .stage {
background: var(--vsc-bg) !important;
color: var(--vsc-ink);
}
/* Le ciel étoilé n'a aucun sens sur fond clair (points blancs sur blanc). */
:root[data-theme="clair"] .stars { display: none !important; }
/* Barre de navigation haute
â ï¸ OPAQUE, pas translucide. Le .82 d'origine laissait défiler le contenu
DERRIÃRE la barre : « on voit à travers la barre en haut » (Bill, 24/08).
Sur fond sombre ça passait (le contenu sombre se fondait) ; sur du blanc,
chaque carte qui passe dessous se voit. Une barre collante doit masquer. */
:root[data-theme="clair"] .nav,
:root[data-theme="clair"] .dash-topnav {
background: #fff !important;
border-bottom: 1px solid var(--vsc-hair);
}
:root[data-theme="clair"] .pills,
:root[data-theme="clair"] .nav__search,
:root[data-theme="clair"] .seg,
:root[data-theme="clair"] .ghost,
:root[data-theme="clair"] .qtile,
:root[data-theme="clair"] .mini {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair) !important;
}
:root[data-theme="clair"] .ghost:hover,
:root[data-theme="clair"] .seg button.on {
background: var(--vsc-card-3) !important;
color: var(--vsc-ink) !important;
}
/* Onglet actif : pastille sombre sur fond clair (l'inverse du thème sombre) */
:root[data-theme="clair"] .pill.on {
background: var(--vsc-ink) !important;
color: #fff !important;
}
:root[data-theme="clair"] .pill:hover { color: var(--vsc-vio) !important; }
/* Menu profil / popovers */
:root[data-theme="clair"] .pmenu,
:root[data-theme="clair"] .csel-menu,
:root[data-theme="clair"] .modal,
:root[data-theme="clair"] .drw,
:root[data-theme="clair"] .sheet {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair) !important;
box-shadow: var(--vsc-shadow-pop);
color: var(--vsc-ink);
}
:root[data-theme="clair"] .pitem:hover,
:root[data-theme="clair"] .csel-menu .opt:hover {
background: var(--vsc-card-3) !important;
}
/* Champs de saisie */
:root[data-theme="clair"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] textarea,
:root[data-theme="clair"] select {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
color: var(--vsc-ink) !important;
}
:root[data-theme="clair"] input::placeholder,
:root[data-theme="clair"] textarea::placeholder { color: var(--vsc-ink-4) !important; }
/* Cartes et séparateurs génériques */
:root[data-theme="clair"] .panel,
:root[data-theme="clair"] .card,
:root[data-theme="clair"] .box {
background: var(--vsc-card);
border-color: var(--vsc-hair);
box-shadow: var(--vsc-shadow);
}
/* Le bouton plein violet garde son texte blanc â ne pas « corriger ». */
:root[data-theme="clair"] .btn-primary,
:root[data-theme="clair"] .brand,
:root[data-theme="clair"] .planb__btn { color: #fff !important; }
/* Les images et logos ne sont jamais retouchés par le thème. */
:root[data-theme="clair"] img,
:root[data-theme="clair"] canvas { filter: none !important; }
/* âââ 4. Défauts relevés à l'écran sur la Vue d'ensemble âââââââââââââââââ
Trouvés en listant, sur la page rendue, tout texte dont la couleur
calculée est quasi blanche alors que le fond est clair. Méthode Ã
refaire pour chaque page convertie â c'est plus fiable que relire le CSS. */
/* Les grands chiffres des KPI sont peints avec un dégradé blanc â lavande
découpé sur le texte (background-clip). Sur fond blanc, le chiffre
disparaît purement et simplement. â ï¸ Il ne suffit pas de changer color :
tant que -webkit-text-fill-color reste transparent, rien ne s'affiche. */
:root[data-theme="clair"] .kpi__v {
background-image: none !important;
-webkit-text-fill-color: var(--vsc-ink) !important;
color: var(--vsc-ink) !important;
}
/* Onglet actif (Tableau de bord / Statistiques) : il était blanc sur un
violet à 20 % â illisible. On passe le violet en aplat plein. */
:root[data-theme="clair"] .tab2.on {
background: var(--vsc-vio) !important;
color: #fff !important;
}
:root[data-theme="clair"] .tab2.on .lb { color: #fff !important; }
/* Nom du compte dans le menu profil, et panneau des notifications :
textes écrits en blanc en dur. */
:root[data-theme="clair"] .pmenu__id .n,
:root[data-theme="clair"] .vs-notif-head span,
:root[data-theme="clair"] .vs-notif-item .t { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .vs-notif-panel {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair) !important;
box-shadow: var(--vsc-shadow-pop);
}
:root[data-theme="clair"] .vs-notif-item:hover { background: var(--vsc-card-3) !important; }
/* Configuration : le menu déroulant de choix du compte a un fond #16161d
EN DUR â il restait noir, avec des encres devenues sombres dedans.
â ï¸ Trouvé par le balayage « surfaces restées sombres », qui force les
éléments masqués à s'afficher : un menu fermé n'est jamais audité. */
:root[data-theme="clair"] .acctsel__menu {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
box-shadow: var(--vsc-shadow-pop) !important;
}
/* Autres surfaces de CONTENU restées noires (fond écrit en dur), qui ne
s'affichent qu'après un clic : la fenêtre de choix de catégorie (Publier)
et le cadre photo d'un article sans image (Messagerie).
â ï¸ Les VOILES de modale (`.catmodal`, `.prep__bg`, `.qr-modal`, `.mod`,
`.pmodal`) restent volontairement sombres : c'est leur rôle. */
:root[data-theme="clair"] .catbox {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
}
:root[data-theme="clair"] .art__ph { background: var(--vsc-card-3) !important; }
:root[data-theme="clair"] .catbox .chhd span { color: var(--vsc-ink) !important; }
/* Facturation : l'en-tête et le pied de la fenêtre « Changer de plan »
gardaient un fond sombre translucide alors que son corps était blanc. */
:root[data-theme="clair"] .modal__hd,
:root[data-theme="clair"] .modal__ft {
background: var(--vsc-card-2) !important;
border-color: var(--vsc-hair) !important;
}
/* Menu profil : le nom du plan (« Accès illimité ») est en blanc en dur, et
« Se déconnecter » en rouge pâle â deux états qui n'apparaissent qu'une
fois le menu OUVERT. */
:root[data-theme="clair"] .pmenu__plan .pt .a { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .pitem.red,
:root[data-theme="clair"] .bulkdel { color: var(--vsc-err) !important; }
/* Cloche : l'icône était en violet très clair sur une pastille claire. */
:root[data-theme="clair"] .vs-bell {
color: var(--vsc-vio) !important;
background: var(--vsc-vio-tint) !important;
}
/* âââ 5. Intérieur des pages â corrections MESURÃES au contraste ââââââââââ
Chaque règle ci-dessous répare un défaut relevé par un audit de contraste
réel (ratio calculé entre la couleur du texte et son fond effectif), pas
par relecture du CSS. Méthode : injecter le thème sur la page, parcourir
tous les nÅuds de texte visibles, garder ceux dont le ratio est < 3:1.
â ï¸ Refaire cet audit page par page après toute évolution d'écran. */
/* ââ Châssis commun : nav et fond de page ââââââââââââââââââââââââââââââââ
Les liens de nav sont en rgba(255,255,255,.65) EN DUR : invisibles sur
clair. Et le fond du châssis restait sombre SOUS le contenu. */
:root[data-theme="clair"] .dash-topnav a,
:root[data-theme="clair"] .dash-topnav .nav-label,
:root[data-theme="clair"] .navdrop__menu a,
:root[data-theme="clair"] .navdrop__btn,
:root[data-theme="clair"] .dash-topnav-links a,
:root[data-theme="clair"] .navdrop__menu > a { color: var(--vsc-ink-2) !important; }
:root[data-theme="clair"] .dash-topnav a.active,
:root[data-theme="clair"] .dash-topnav a.active .nav-label { color: var(--vsc-vio) !important; }
:root[data-theme="clair"] .navdrop__menu > a:hover {
color: var(--vsc-vio) !important;
background: var(--vsc-card-3) !important;
}
:root[data-theme="clair"] .dash-top-layout,
:root[data-theme="clair"] .dash-top-content { background: var(--vsc-bg) !important; }
/* Boutons sombres en dur (tri, menus déroulants, repli de nav) */
:root[data-theme="clair"] .tbtn,
:root[data-theme="clair"] .bdrop__btn,
:root[data-theme="clair"] .navcollapse {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair) !important;
color: var(--vsc-ink-2) !important;
}
:root[data-theme="clair"] .tbtn *,
:root[data-theme="clair"] .bdrop__btn * { color: inherit !important; }
/* â ï¸ MÃME PIÃGE QUE LES KPI : les titres de page sont peints par un dégradé
découpé sur le texte. Changer `color` ne suffit pas tant que
-webkit-text-fill-color reste transparent â le titre reste invisible. */
:root[data-theme="clair"] .wrap h1,
:root[data-theme="clair"] .head h1 {
background-image: none !important;
-webkit-text-fill-color: var(--vsc-ink) !important;
color: var(--vsc-ink) !important;
}
/* Le violet clair de la maison passe très bien sur fond sombre et disparaît
sur blanc dès qu'il sert de couleur de TEXTE. */
:root[data-theme="clair"] .b,
:root[data-theme="clair"] button.g,
:root[data-theme="clair"] .lk,
:root[data-theme="clair"] a.lk { color: var(--vsc-vio) !important; }
/* ââ Stock âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
:root[data-theme="clair"] .it__p { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .it__ph { background: var(--vsc-card-3) !important; }
:root[data-theme="clair"] .stat__num { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .n { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .seg2 .on,
:root[data-theme="clair"] .tabs .on,
:root[data-theme="clair"] .pill2.on { background: var(--vsc-vio) !important; color: #fff !important; }
:root[data-theme="clair"] .pill2.on *,
:root[data-theme="clair"] .tabs .on * { color: #fff !important; }
/* Pastilles de plateforme : teintes pensées pour du fond sombre. Sur clair,
on assombrit le TEXTE et on opacifie la pastille â sinon on lit du
turquoise pâle sur du lavande pâle. Les couleurs de marque sont gardées,
juste amenées à un niveau lisible. */
:root[data-theme="clair"] .it__plat.vtd { color: #0d6d74 !important; background: rgba(13,109,116,.12) !important; }
:root[data-theme="clair"] .it__plat.lbc { color: #a34608 !important; background: rgba(163,70,8,.12) !important; }
:root[data-theme="clair"] .it__plat.both { color: #5a2ee5 !important; background: rgba(90,46,229,.12) !important; }
:root[data-theme="clair"] .it__noph { color: var(--vsc-ink-4) !important; }
:root[data-theme="clair"] .skuchip { color: var(--vsc-ink-3) !important; background: var(--vsc-card-3) !important; }
/* ââ Messagerie ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
:root[data-theme="clair"] .cv__msg,
:root[data-theme="clair"] .kpi__l,
:root[data-theme="clair"] .msg__t { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .cv__n { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .qr,
:root[data-theme="clair"] .qr--fav,
:root[data-theme="clair"] .via,
:root[data-theme="clair"] .plink { color: var(--vsc-vio) !important; }
/* Le pseudo du compte est posé SUR une pastille violette : il reste blanc. */
:root[data-theme="clair"] .cv__acct .n,
:root[data-theme="clair"] [style*="8c66ff"] .n { color: #fff !important; }
:root[data-theme="clair"] .thr-prof__stars { color: #8a6100 !important; }
/* â ï¸ 27/08/2026 â `.cv__b` / `.cv__hd` RETIRÃS de cette liste, et `.kpi` retiré de la
règle des surfaces plus haut. Ce sont des ENFANTS d'une carte (ou de simples
compteurs), TRANSPARENTS en thème sombre â mesuré. Leur donner à leur tour un fond
blanc opaque dessinait un rectangle blanc franc : à l'intérieur des cartes de
conversation, et autour des compteurs « 1000 conversations / 1 non lue / 6 comptes ».
C'est le « rectangle blanc bizarre » signalé par Bill le 27/08.
RÃGLE : ne poser un fond que sur l'élément qui EST la surface ; un enfant hérite. */
:root[data-theme="clair"] .cv,
:root[data-theme="clair"] .cv.plat-vinted,
:root[data-theme="clair"] .thr,
:root[data-theme="clair"] .thr__hd { background: var(--vsc-card) !important; }
:root[data-theme="clair"] .cv:hover,
:root[data-theme="clair"] .cv.on { background: var(--vsc-card-3) !important; }
:root[data-theme="clair"] .quick button,
:root[data-theme="clair"] .quick .qr { color: var(--vsc-vio) !important; }
:root[data-theme="clair"] .quick .qr,
:root[data-theme="clair"] .quick .qr--fav,
:root[data-theme="clair"] button.qr--fav {
color: #5a2ee5 !important;
background: rgba(90,46,229,.10) !important;
}
:root[data-theme="clair"] .cxl,
:root[data-theme="clair"] .cxl span { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .ftabs button.on { background: var(--vsc-vio) !important; }
/* Boutons pleins violets dont le libellé est écrit en presque-noir (#111406,
hérité de l'époque où le fond était vert citron) : sur violet il faut du
blanc, dans les deux thèmes. */
:root[data-theme="clair"] .cxb--main,
:root[data-theme="clair"] .cxb--main svg { color: #fff !important; }
/* Pastille de pays sur un message : fond gris ardoise en dur (#2a2a33). */
/* Barre de sélection de la messagerie : le bouton « Mettre de côté » est
blanc sur --vio-soft, un violet trop clair pour porter du blanc. */
:root[data-theme="clair"] .selbar__b[data-sa="aside"] { background: var(--vsc-vio) !important; }
:root[data-theme="clair"] .flagb {
background: var(--vsc-card-3) !important;
color: var(--vsc-ink-2) !important;
border-color: var(--vsc-hair-2) !important;
}
:root[data-theme="clair"] .ftabs button.on,
:root[data-theme="clair"] .ftabs button.on * { color: #fff !important; }
/* â ï¸ MÃTHODE QUI A TROUVà CES QUATRE-Là (à refaire pour toute page neuve) :
au lieu de parcourir les ÃLÃMENTS, énumérer toutes les propriétés
personnalisées définies par la page et calculer leur contraste sur blanc.
Celles qui sont claires ET qui ne nomment pas une surface
(bg / card / panel / surface) sont forcément des couleurs de TEXTE
restées calibrées pour le fond sombre. C'est ce balayage qui a sorti
--vio-light, --mute, --fav et --vs-text-faint, qu'aucun audit d'élément
n'avait signalés. */
:root[data-theme="clair"] {
--vio-light: var(--vsc-vio);
--mute: var(--vsc-ink-3);
--fav: #8a6100;
--vs-text-faint: var(--vsc-ink-4);
}
/* Le sous-titre de page : `.head p` le peint en --vio-light sur plusieurs
écrans. Même sans la variable, on le fixe explicitement. */
:root[data-theme="clair"] .head p,
:root[data-theme="clair"] .head .sub { color: var(--vsc-ink-2) !important; }
/* â ï¸â ï¸ PIÃGE DE CASCADE â à VÃRIFIER SUR TOUTE NOUVELLE PAGE.
« Publier » ne définit PAS sa palette sur :root mais sur son conteneur
`.pub-wrap`. Une redéfinition posée sur un CONTENEUR l'emporte, pour tout
son sous-arbre, sur n'importe quelle correspondance faite au niveau :root
â quelle que soit la spécificité du sélecteur :root. Il faut donc remapper
le conteneur lui-même.
â ï¸ LE TEST DOIT ÃTRE MULTILIGNE. Un grep ligne à ligne rate les palettes
dont la première variable est sur la ligne SUIVANTE â c'est ainsi que
`.dash-top-content.aff` (Affiliation) et `.dash-top-content` (Gestion
employé) m'ont échappé au premier balayage. Le bon test cherche tout bloc
`sélecteur { ⦠--x: ⦠}` en mode DOTALL, hors :root :
re.finditer(r'([^{}\n;]{1,120}?)\{([^{}]*--[a-z0-9-]+\s*:[^{}]*)\}', s, re.S)
Résultat sur les 15 écrans : .pub-wrap, .dash-top-content.aff,
.dash-top-content (employés). Les trois sont remappés ci-dessous. */
:root[data-theme="clair"] .pub-wrap {
--panel: var(--vsc-card);
--hair: var(--vsc-hair);
--hair2: var(--vsc-hair-2);
--ink: var(--vsc-ink);
--ink2: var(--vsc-ink-2);
--ink3: var(--vsc-ink-3);
--ink4: var(--vsc-ink-4);
--vio: var(--vsc-vio);
--viot: var(--vsc-vio-tint);
--ok: var(--vsc-ok);
--blue: var(--vsc-info);
--bluet: rgba(31, 111, 208, .12);
--err: var(--vsc-err);
--errs: var(--vsc-err-soft);
}
/* Affiliation et Gestion employé posent LEUR palette sur `.dash-top-content`
(avec ou sans `.aff`) : même piège, même remède. Les valeurs sont celles
du bloc :root plus haut, répétées ici parce qu'une variable redéfinie sur
un conteneur ne peut être corrigée que sur ce conteneur. */
:root[data-theme="clair"] .dash-top-content.aff {
--af-panel: var(--vsc-card); --af-panel-2: var(--vsc-card-2);
--af-hair: var(--vsc-hair); --af-hair-2: var(--vsc-hair-2);
--af-ink: var(--vsc-ink); --af-ink-2: var(--vsc-ink-2);
--af-ink-3: var(--vsc-ink-3); --af-ink-4: var(--vsc-ink-4);
--af-vio: var(--vsc-vio); --af-vio-tint: var(--vsc-vio-tint);
--af-vio-line: rgba(106, 62, 239, .30);
--af-pop: var(--vsc-vio-soft); --af-pop-soft: var(--vsc-vio-tint);
--af-blue: var(--vsc-info); --af-blue-soft: rgba(31, 111, 208, .12);
}
:root[data-theme="clair"] .dash-top-content {
--ge-panel: var(--vsc-card); --ge-panel-2: var(--vsc-card-2);
--ge-card-2: var(--vsc-card-2);--ge-card-3: var(--vsc-card-3);
--ge-hair: var(--vsc-hair); --ge-hair-2: var(--vsc-hair-2);
--ge-ink: var(--vsc-ink); --ge-ink-2: var(--vsc-ink-2);
--ge-ink-3: var(--vsc-ink-3); --ge-ink-4: var(--vsc-ink-4);
--ge-faint: var(--vsc-ink-4);
--ge-vio: var(--vsc-vio); --ge-vio-soft: var(--vsc-vio-soft);
--ge-vio-2: var(--vsc-vio-2); --ge-vio-tint: var(--vsc-vio-tint);
--ge-vio-line: rgba(106, 62, 239, .30);
--ge-pop: var(--vsc-vio-soft); --ge-pop-soft: var(--vsc-vio-tint);
--ge-blue: var(--vsc-info); --ge-blue-tint: rgba(31, 111, 208, .12);
--ge-blue-line: rgba(31, 111, 208, .30);
--ge-red: var(--vsc-err); --ge-red-tint: var(--vsc-err-soft);
--ge-red-border: rgba(200, 50, 79, .28);
}
/* Boutons de partage de l'affiliation. Les verts et bleus de marque
(WhatsApp #1faf54, Telegram #2aabee) ne portent du blanc qu'Ã 2,9:1 et
2,6:1 â c'est vrai aussi sur le thème sombre, mais l'écran clair le rend
flagrant. On garde la teinte de marque, une nuance plus foncée. */
:root[data-theme="clair"] .sbtn.wa { background: #0f8a41 !important; }
:root[data-theme="clair"] .sbtn.tg { background: #1a7fb5 !important; }
:root[data-theme="clair"] .sbtn.mail {
color: var(--vsc-ink-2) !important;
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
}
:root[data-theme="clair"] .sbtn.x { background: #1a1a1f !important; color: #fff !important; }
/* Gestion employé : une permission cochée s'écrit en BLANC sur une simple
teinte violette (--ge-vio-tint), qui devient très pâle en clair. La case
cochée garde le violet plein â c'est elle qui porte le signal. */
:root[data-theme="clair"] .perm.on { color: var(--vsc-vio) !important; }
:root[data-theme="clair"] .perm.on .box { color: #fff !important; }
/* Les trois grands compteurs de Publier sont en #fff EN DUR (pas une
variable) â invisibles sur la carte blanche. */
:root[data-theme="clair"] .cell__v { color: var(--vsc-ink) !important; }
/* â ï¸ La barre d'action flottante `.bar` vit HORS de `.pub-wrap` (elle est
posée sur le pour rester fixe) : elle n'hérite donc pas du remappage
ci-dessus. Son fond rgba(18,18,24,.92) traçait une réglette NOIRE en travers
d'une page blanche. â ï¸ Ce n'est pas un toast passager mais une barre
PERMANENTE : on l'éclaircit donc pour de bon, en remappant ses variables
plutôt qu'en forçant des couleurs â les boutons qu'elle contient suivent
alors d'eux-mêmes, sans règle par bouton à maintenir. */
:root[data-theme="clair"] .bar {
background: rgba(255, 255, 255, .94) !important;
border-color: var(--vsc-hair-2) !important;
box-shadow: 0 18px 44px rgba(23, 20, 43, .16) !important;
--ink: var(--vsc-ink);
--ink2: var(--vsc-ink-2);
--ink3: var(--vsc-ink-3);
--vio: var(--vsc-vio);
--hair2: var(--vsc-hair-2);
--panel: var(--vsc-card);
--card: var(--vsc-card);
}
:root[data-theme="clair"] .bar .info .t { color: var(--vsc-ink) !important; }
/* Compta : la pastille de statut d'une vente prend sa couleur d'une PALETTE JS
(STATUT_COLOR), écrite en ligne â 10 teintes pensées pour du fond sombre,
impossibles à rattraper une par une et amenées à évoluer.
On neutralise donc le TEXTE et on laisse la couleur au point et au liseré :
le codage visuel du statut survit, le libellé redevient lisible. */
:root[data-theme="clair"] .stbadge { color: var(--vsc-ink) !important; }
/* Vue d'ensemble : le nom de la plateforme sous chaque compte est peint à la
couleur de MARQUE (turquoise Vinted, orange Leboncoin). Ces teintes sont
faites pour un fond sombre : 2,6:1 et 2,3:1 sur blanc. On garde la teinte,
on descend la luminosité â exactement comme pour les pastilles du Stock. */
:root[data-theme="clair"] .bacct__hd span { color: #0d6d74 !important; }
:root[data-theme="clair"] .bacct.is-lbc .bacct__hd span { color: #a34608 !important; }
/* Messagerie : les 3 couleurs d'état (--ok / --warn / --err) de la page sont
calibrées pour du fond sombre. L'ambre #ffc857 d'une offre « en attente »
tombe à 1,5:1 sur blanc â le montant restait lisible, pas son statut.
â ï¸ Trouvé seulement au 2áµ passage : il faut une offre EN ATTENTE Ã
l'écran pour que la règle s'applique. Un audit sur une page « au repos »
ne voit jamais les états conditionnels. */
:root[data-theme="clair"] .thr,
:root[data-theme="clair"] .cv,
:root[data-theme="clair"] .wrap,
:root[data-theme="clair"] body {
--ok: var(--vsc-ok);
--warn: #8a6100;
--err: var(--vsc-err);
}
:root[data-theme="clair"] .ibtn.on {
color: #8a6100 !important;
border-color: rgba(138,97,0,.40) !important;
background: rgba(138,97,0,.12) !important;
}
/* Configuration : la légende sous le téléphone de démonstration. */
:root[data-theme="clair"] .preview-cap { color: var(--vsc-ink-2) !important; }
:root[data-theme="clair"] .preview-cap b { color: var(--vsc-vio) !important; }
/* â ï¸ L'ÃCRAN DU TÃLÃPHONE est une MAQUETTE de l'app Vinted, pas une surface
du dashboard : son fond reste noir dans les deux thèmes. Il ne doit donc
PAS hériter des encres claires â sinon on lit du presque-noir sur du noir.
On lui rend un jeu d'encres sombres, localement. */
:root[data-theme="clair"] .phone,
:root[data-theme="clair"] .screen {
--ink: #f4f2fb;
--ink2: #c9c3dd;
--ink-2: #c9c3dd;
--ink3: #9a94b0;
--ink-3: #9a94b0;
--mute: #9a94b0;
color: #e9e7f0;
}
:root[data-theme="clair"] .vo-strike,
:root[data-theme="clair"] .vi-box { color: #9a94b0 !important; }
/* ââ Compta / Publier ââââââââââââââââââââââââââââââââââââââââââââââââââââ */
:root[data-theme="clair"] .pcard__v { color: var(--vsc-vio) !important; }
:root[data-theme="clair"] .catpick__v,
:root[data-theme="clair"] .vssel-val,
:root[data-theme="clair"] .wrap h2,
:root[data-theme="clair"] .drw h2 { color: var(--vsc-ink) !important; }
/* Journal des annonces (dashboard-publier) : lignes .svrow codees en dur en sombre */
:root[data-theme="clair"] .svrow { background: var(--vsc-card-3); border-color: var(--vsc-hair); }
:root[data-theme="clair"] .svrow__t { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .svrow__s { color: var(--vsc-ink-3); }
:root[data-theme="clair"] .tico { color: var(--vsc-vio-soft); }
:root[data-theme="clair"] .jrnpill { color: var(--vsc-ink-3); background: rgba(23,20,43,.07); box-shadow: inset 0 0 0 1px rgba(23,20,43,.14); }
:root[data-theme="clair"] .acctbar__lbl,
:root[data-theme="clair"] .card b,
:root[data-theme="clair"] .sec b { color: var(--vsc-ink-2) !important; }
:root[data-theme="clair"] .head .sub b { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .subhead h2,
:root[data-theme="clair"] .pub-wrap h2 { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .art,
:root[data-theme="clair"] .art.open,
:root[data-theme="clair"] .catpick,
:root[data-theme="clair"] .vssel-trg {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair) !important;
}
:root[data-theme="clair"] .art__hd .nm { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .art__hd .pill { color: var(--vsc-ink-3) !important; background: var(--vsc-card-3) !important; }
:root[data-theme="clair"] .dz,
:root[data-theme="clair"] .dz .s { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .platflags label span { color: var(--vsc-ink-2) !important; }
:root[data-theme="clair"] .platflags label.vtd span,
:root[data-theme="clair"] .platflags label.on span { color: var(--vsc-ink) !important; }
/* ââ Colis âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
:root[data-theme="clair"] .bdx-tab { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .bdx-tab.on,
:root[data-theme="clair"] .bdx-tab.on *,
:root[data-theme="clair"] button.on.bdx-tab { color: #fff !important; background: var(--vsc-vio) !important; }
:root[data-theme="clair"] .bdx-lotbadge { color: #8a5a00 !important; background: rgba(138,90,0,.12) !important; }
:root[data-theme="clair"] .bdx-row button,
:root[data-theme="clair"] .bdx-acct button { color: var(--vsc-ink-2) !important; }
/* â ï¸ MON ERREUR, corrigée le 23/08 : j'avais forcé « Obtenir bordereaux »
en BLANC en croyant à un bouton plein. C'est un bouton fantôme
(fond rgba(255,255,255,.04)) â blanc sur blanc, libellé invisible. */
:root[data-theme="clair"] .btn-pdf,
:root[data-theme="clair"] .btn-pdf * { color: var(--vsc-ink-2) !important; }
:root[data-theme="clair"] .btn-pdf {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
}
:root[data-theme="clair"] .btn-pdf:hover { background: var(--vsc-card-3) !important; }
/* ââ Segments, boutons fantômes et petites pastilles (partout) âââââââââââ */
:root[data-theme="clair"] .seg { background: var(--vsc-card-3) !important; border-color: var(--vsc-hair) !important; }
:root[data-theme="clair"] .seg > button { color: var(--vsc-ink-3) !important; background: transparent !important; }
:root[data-theme="clair"] .seg > button.on,
:root[data-theme="clair"] .seg > button.on * { color: #fff !important; background: var(--vsc-vio) !important; }
:root[data-theme="clair"] .vbtn.ghost,
:root[data-theme="clair"] .btn.ghost,
:root[data-theme="clair"] button.ghost {
color: var(--vsc-ink-2) !important;
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
}
/* â ï¸â ï¸ ÃTATS AU SURVOL â signalés par Bill, et mon audit ne pouvait PAS les
voir : il écarte tout élément dont l'opacité cumulée est < 0,1, or une
infobulle au repos est justement en `opacity:0`. Il faut les rendre
visibles de force pour les tester (cf. la passe « éléments masqués »).
Ici l'infobulle du graphe de la Vue d'ensemble a un fond #1c1c26 EN DUR :
le texte passait à l'encre sombre, la bulle restait noire. */
:root[data-theme="clair"] .tip,
:root[data-theme="clair"] .trend__tip {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
box-shadow: var(--vsc-shadow-pop) !important;
color: var(--vsc-ink) !important;
}
:root[data-theme="clair"] .tip .d,
:root[data-theme="clair"] .trend__tip .d { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .tip .r,
:root[data-theme="clair"] .tip .r b,
:root[data-theme="clair"] .trend__tip .r { color: var(--vsc-ink) !important; }
/* â ï¸ Les pastilles `.sw` gardent leurs couleurs en ligne : ce sont celles des
COURBES du graphe, elles doivent rester identiques pour qu'on relie la
ligne à sa valeur. */
:root[data-theme="clair"] .opt-row .mono { color: #0f7a4d !important; }
:root[data-theme="clair"] .tt .l span { color: #5a2ee5 !important; background: rgba(90,46,229,.10) !important; }
/* ââ Paramètres / Bloc-note ââââââââââââââââââââââââââââââââââââââââââââââ */
:root[data-theme="clair"] .card div[style*="background"],
:root[data-theme="clair"] #mcpCard div,
:root[data-theme="clair"] .acct-line { color: var(--vsc-ink-2) !important; }
:root[data-theme="clair"] #emailLinkList div { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] #emailLinkList div div { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .note { background: var(--vsc-card) !important; border-color: var(--vsc-hair) !important; }
:root[data-theme="clair"] .note__txt { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .note__badge { color: var(--vsc-vio) !important; }
:root[data-theme="clair"] .plday-name { color: var(--vsc-ink-2) !important; }
/* â ï¸ Les pastilles d'initiales `.av` portent du blanc sur une couleur
ATTRIBUÃE PAR COMPTE en JS (ACOL) : certaines de ces couleurs sont trop
claires pour du blanc, et on ne peut pas les assombrir sans changer
l'identité visuelle de chaque compte. On garantit la lisibilité par une
ombre portée, seule solution qui marche quelle que soit la teinte.
â ï¸ L'auditeur de contraste ne sait pas mesurer une ombre : il continuera
de signaler ces pastilles. C'est un faux positif connu. */
:root[data-theme="clair"] .av { text-shadow: 0 1px 2px rgba(0,0,0,.55); }
:root[data-theme="clair"] .nsel__btn,
:root[data-theme="clair"] .nsel__btn span { color: var(--vsc-ink) !important; }
/* Paramètres : les bandeaux de confirmation / d'erreur (vert et rose pâles,
pensés pour du fond sombre). Ils n'apparaissent qu'APRÃS une action. */
:root[data-theme="clair"] .alert.success {
color: var(--vsc-ok) !important;
background: var(--vsc-ok-soft) !important;
border-color: rgba(18, 133, 79, .28) !important;
}
:root[data-theme="clair"] .alert.error {
color: var(--vsc-err) !important;
background: var(--vsc-err-soft) !important;
border-color: rgba(200, 50, 79, .28) !important;
}
/* ââ Facturation / Affiliation âââââââââââââââââââââââââââââââââââââââââââ */
:root[data-theme="clair"] .plan__tag,
:root[data-theme="clair"] .cyhint,
:root[data-theme="clair"] .meter__hd .k,
:root[data-theme="clair"] .meter__hd .v,
:root[data-theme="clair"] .px,
:root[data-theme="clair"] .card .d,
:root[data-theme="clair"] .sechd p,
:root[data-theme="clair"] .card p,
:root[data-theme="clair"] #payBody div,
:root[data-theme="clair"] #meterMax { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .plan__price .eq,
:root[data-theme="clair"] #planEq { color: var(--vsc-vio) !important; }
:root[data-theme="clair"] .wsm .v,
:root[data-theme="clair"] .estbox .v,
:root[data-theme="clair"] #refUrl,
:root[data-theme="clair"] .big { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .slhd .k,
:root[data-theme="clair"] .tabs .tab { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .tabs .tab.on { color: #fff !important; }
:root[data-theme="clair"] .soon,
:root[data-theme="clair"] .df { color: #1256a3 !important; background: rgba(18,86,163,.10) !important; }
/* Sélecteur Mensuel / Trimestriel / Annuel : le violet du segment actif est
écrit en dur (#8c66ff) â trop clair pour porter du blanc. */
:root[data-theme="clair"] .cyseg > button { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .cyseg > button.on { background: var(--vsc-vio) !important; color: #fff !important; }
/* ââ Guide âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
:root[data-theme="clair"] .sg__n,
:root[data-theme="clair"] .prog__hd span { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .sg,
:root[data-theme="clair"] .sg__h { background: var(--vsc-card) !important; }
/* â ï¸ Ces deux-là ne se voient QU'UNE FOIS UN ARTICLE OUVERT â la page
d'accueil du guide est propre. C'est exactement la leçon des « états
profonds » : ouvrir, dérouler, cliquer, sinon on ne teste que la façade. */
:root[data-theme="clair"] .sb__home { color: var(--vsc-ink-2) !important; }
/* Mon serveur : sous-titre des lignes, et le rouge de la page (--red) qui
sert aux actions destructrices. */
:root[data-theme="clair"] .rb__ph .s,
:root[data-theme="clair"] .stage .s { color: var(--vsc-ink-3) !important; }
/* â ï¸ Même principe que l'écran du téléphone : `.cl-load` est l'écran d'attente
DU NAVIGATEUR DISTANT (fond #0b0b11 volontaire). Il garde des encres
claires â la règle générique ci-dessus le repeindrait en sombre sur sombre. */
:root[data-theme="clair"] .cl-load { color: #e9e7f0 !important; }
:root[data-theme="clair"] .cl-load .s { color: #b9b3cf !important; }
/* Mon serveur : le menu de choix de session (#16161f en dur, comme celui de
la Configuration) et les deux couleurs du bandeau d'accueil. */
:root[data-theme="clair"] .sessmenu {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
box-shadow: var(--vsc-shadow-pop) !important;
}
:root[data-theme="clair"] .sessmenu button:hover { background: var(--vsc-card-3) !important; }
:root[data-theme="clair"] .cl-hero p { color: var(--vsc-ink-2) !important; }
:root[data-theme="clair"] .cl-hero p b { color: var(--vsc-vio) !important; }
:root[data-theme="clair"] .cl-etat.off { color: var(--vsc-ink-3) !important; }
/* Libellés de la fenêtre « créer une session » : ils utilisent l'encre la
plus pâle (--ink-4), correcte pour un texte d'appoint mais pas pour
l'étiquette d'un champ qu'on doit lire pour saisir. */
/* â ï¸ Ces fenêtres (`.cl-modal`) sont posées sur le , PAS dans `.stage` :
un sélecteur ancré sur la page ne les atteint pas. Et leur fond #15151f est
écrit en dur â d'où un texte sombre sur un panneau sombre tant que la
SURFACE n'est pas corrigée elle aussi. C'est le rappel qu'il faut toujours
traiter le couple fond + encre, jamais l'encre seule. */
:root[data-theme="clair"] .cl-modal {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
}
:root[data-theme="clair"] .cl-modal h3,
:root[data-theme="clair"] .cl-vide h3 { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .cl-modal .sub { color: var(--vsc-ink-3) !important; }
/* Boutons de la page Mon serveur : `.cl-btn` est un bouton FANTÃME
(fond rgba(255,255,255,.04)) avec un libellé blanc â invisible sur clair.
â ï¸ `.cl-btn--open` est un vrai bouton PLEIN (dégradé violet) : son blanc
reste blanc, d'où le `:not()`. Même piège que « Obtenir bordereaux ». */
:root[data-theme="clair"] .cl-btn:not(.cl-btn--open) {
background: var(--vsc-card-3) !important;
border-color: var(--vsc-hair-2) !important;
color: var(--vsc-ink) !important;
}
:root[data-theme="clair"] .cl-btn--del { color: var(--vsc-err) !important; }
:root[data-theme="clair"] .cl-modal input {
background: var(--vsc-card-3) !important;
border-color: var(--vsc-hair-2) !important;
color: var(--vsc-ink) !important;
}
:root[data-theme="clair"] .cl-modal .row .no {
background: var(--vsc-card-3) !important;
color: var(--vsc-ink-2) !important;
}
:root[data-theme="clair"] .cl-warn {
background: rgba(255, 190, 80, .20) !important;
border-color: rgba(160, 110, 0, .38) !important;
color: #7a5500 !important;
}
:root[data-theme="clair"] .cl-err { color: var(--vsc-err) !important; }
:root[data-theme="clair"] .cl-modal label,
:root[data-theme="clair"] .cl-modal p.sub,
:root[data-theme="clair"] .stage label,
:root[data-theme="clair"] .stage p.sub { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .stage,
:root[data-theme="clair"] body { --red: var(--vsc-err); }
:root[data-theme="clair"] .mono { color: var(--vsc-vio) !important; }
/* âââ 6. Rôles de texte partagés par plusieurs pages ââââââââââââââââââââââ
Quatre classes reviennent partout comme « titre », « secondaire » ou
« étiquette ». Les traiter une fois ici évite de répéter la même règle
dans chaque section â et couvre les écrans pas encore audités. */
:root[data-theme="clair"] .panel .t,
:root[data-theme="clair"] .card .t,
:root[data-theme="clair"] .name,
:root[data-theme="clair"] .email,
:root[data-theme="clair"] .pt { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .panel .d,
:root[data-theme="clair"] .card .d,
:root[data-theme="clair"] .lbl,
:root[data-theme="clair"] .pd,
:root[data-theme="clair"] .panel p,
:root[data-theme="clair"] .wrap > p { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .tag-actif { color: #1256a3 !important; background: rgba(18,86,163,.10) !important; }
:root[data-theme="clair"] .tag-invite { color: #8a5a00 !important; background: rgba(138,90,0,.12) !important; }
:root[data-theme="clair"] .btn-retire { color: #b3223c !important; }
:root[data-theme="clair"] .btn-amber,
:root[data-theme="clair"] .btn-amber span {
color: #8a5a00 !important;
background: rgba(138,90,0,.12) !important;
border-color: rgba(138,90,0,.30) !important;
}
:root[data-theme="clair"] .btn-ghost,
:root[data-theme="clair"] .btn-ghost span { color: var(--vsc-ink-2) !important; }
:root[data-theme="clair"] .btn-ghost {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
}
/* âââ 7. Couleurs écrites EN LIGNE par du JS ââââââââââââââââââââââââââââââ
Le Panel admin (et quelques blocs ailleurs) est construit en innerHTML
avec des style="color:#â¦". Un !important de feuille de style l'emporte
sur un style en ligne SANS !important : on les rattrape donc par
sélecteur d'attribut.
â ï¸ Le :not() est indispensable â le blanc posé sur un fond violet ou
orange en ligne (boutons pleins, dégradés) doit rester blanc. */
:root[data-theme="clair"] [style*="color:#fff"]:not([style*="linear-gradient"]):not([style*="#7a52ff"]),
:root[data-theme="clair"] [style*="color:#e7e0ff"] { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] [style*="color:#8e7ed0"],
:root[data-theme="clair"] [style*="color:#b8afd0"],
:root[data-theme="clair"] [style*="color:#cdbff0"],
:root[data-theme="clair"] [style*="color:#5a5478"] { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] [style*="color:#c4b3ff"],
:root[data-theme="clair"] [style*="color:#c9b8ff"] { color: var(--vsc-vio) !important; }
:root[data-theme="clair"] [style*="color:#ff8a8a"] { color: var(--vsc-err) !important; }
:root[data-theme="clair"] [style*="color:#5be0a0"] { color: var(--vsc-ok) !important; }
:root[data-theme="clair"] .usr-plan {
background: var(--vsc-card) !important;
color: var(--vsc-vio) !important;
border-color: var(--vsc-hair-2) !important;
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
8. LA COQUE MOBILE
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
â ï¸â ï¸ CETTE SECTION A MANQUà AU PREMIER JET, ET LA RAISON VAUT D'ÃTRE ÃCRITE :
mon auditeur tournait dans un iframe de 1500 px. Or la coque ne se monte
QU'EN DESSOUS DE 860 px â elle n'existait donc pas au moment du test, et
les 15 pages sortaient « 0 défaut » en toute bonne foi. Un audit mené à une
seule largeur ne teste qu'un seul des deux dashboards.
Résultat à l'écran : barres noires, et surtout des cartes de menu BLANCHES
avec un libellé BLANC â des rectangles vides.
`vs-mobile.css` a sa PROPRE palette (`--vsm-*`), indépendante du thème
bureau : c'est elle qu'on remappe. On la traite au `:root` pour ne rien
oublier, puis on REND ses valeurs sombres au studio photo â voir plus bas.
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
@media (max-width: 860px) {
:root[data-theme="clair"] {
--vsm-bg: var(--vsc-bg);
--vsm-card: var(--vsc-card);
--vsm-card-2: var(--vsc-card-3);
--vsm-line: var(--vsc-hair);
--vsm-line-2: var(--vsc-hair-2);
--vsm-txt: var(--vsc-ink);
--vsm-dim: var(--vsc-ink-3);
/* â ï¸ L'accent descend de #a78bfa (lavande, pensée pour du noir) au violet
de marque : il sert à la fois d'ENCRE sur fond clair (onglet actif) et
de dégradé sous du blanc (bouton central, avatar). Les deux tiennent
avec un violet foncé ; l'inverse était faux dans un sens sur deux. */
--vsm-accent: var(--vsc-vio);
--vsm-accent-2: var(--vsc-vio-2);
}
/* â Barres haute et basse : le fond est écrit en dur (rgba(10,10,15,â¦)),
aucune variable ne le porte. Elles restent translucides pour garder
l'effet de dépoli au défilement. â */
:root[data-theme="clair"] .vsm-appbar { background: rgba(255, 255, 255, .88) !important; }
:root[data-theme="clair"] .vsm-tabbar { background: rgba(255, 255, 255, .94) !important; }
:root[data-theme="clair"] .vsm-ico:active { background: rgba(23, 20, 43, .07) !important; }
/* Le liseré de la pastille de présence imite le fond de la barre. */
:root[data-theme="clair"] .vsm-ico__dot { border-color: #fff !important; }
/* â Menu plein écran â */
:root[data-theme="clair"] .vsm-drawer {
background: var(--vsc-card) !important;
box-shadow: 0 -20px 60px rgba(23, 20, 43, .22) !important;
}
:root[data-theme="clair"] .vsm-drawer__grab { background: rgba(23, 20, 43, .18) !important; }
:root[data-theme="clair"] .vsm-grp__t { color: var(--vsc-ink-3) !important; }
/* â ï¸ LE DÃFAUT DE LA CAPTURE : `.vsm-mi` prend son fond de `--vsm-card`
(donc blanc une fois remappé) mais son libellé est en `--vsm-txt`, et
l'état actif force `color:#fff` EN DUR â d'où des cartes blanches vides.
Le fond suit la variable, l'encre doit suivre aussi. */
:root[data-theme="clair"] .vsm-mi { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .vsm-mi--big i { color: var(--vsc-ink-3) !important; }
:root[data-theme="clair"] .vsm-mi.is-on {
background: var(--vsc-vio-tint) !important;
border-color: rgba(106, 62, 239, .38) !important;
color: var(--vsc-vio) !important;
}
:root[data-theme="clair"] .vsm-mi--red,
:root[data-theme="clair"] .vsm-mi--red svg { color: var(--vsc-err) !important; }
:root[data-theme="clair"] .vsm-mi--red { border-color: rgba(200, 40, 40, .30) !important; }
/* â ï¸â ï¸ LE STUDIO PHOTO RESTE SOMBRE â ce n'est pas un oubli.
C'est un écran d'appareil photo plein cadre : un fond blanc éblouit dans
la main, fausse le jugement des couleurs de l'article et ferait ressortir
le vêtement d'une façon qui ne correspond pas au rendu de l'annonce.
Même raison que l'écran du téléphone de démonstration en Configuration.
On lui REND donc les valeurs sombres après le remappage global. */
:root[data-theme="clair"] .vsm-studio,
:root[data-theme="clair"] .vsm-photov {
/* â ï¸ 27/08/2026 â ces règles forçaient le studio en SOMBRE dans le thème
clair (correctif du 25/08, quand le studio n'avait pas de version claire).
Bill demande le mode blanc jusque dans la prise de photo : on repeint donc
en clair au lieu de re-forcer le sombre. Le fond de l'APERÃU reste neutre
sombre (règle plus bas) â juger une photo sur du blanc fausse la lecture
de l'exposition. */
--vsm-bg: #f4f3f9;
--vsm-card: #ffffff;
--vsm-card-2: #f0eef8;
--vsm-line: rgba(23,20,43,.12);
--vsm-line-2: rgba(23,20,43,.20);
--vsm-txt: #17142b;
--vsm-dim: #544f6d;
background: #f4f3f9;
color: #17142b;
}
/* â ï¸â ï¸ RENDRE LES VARIABLES NE SUFFIT PAS.
La règle générique « Champs de saisie » (section 3) pose background / border
/ color EN DUR avec !important sur TOUT `input`, `textarea`, `select`. Elle
gagne donc contre `.vsm-studio__sku input { background:none }`, et le champ
« n° stock » devenait un gros bloc BLANC qui débordait de la barre du studio
(signalé par Bill le 25/08, capture à l'appui).
Corollaire à retenir : quand on ré-assombrit une surface, il faut rendre les
variables ET neutraliser les déclarations directes qui la visent. */
/* â ï¸ Les `:not()` sont OBLIGATOIRES, ce n'est pas de la décoration : entre deux
déclarations `!important`, c'est la SPÃCIFICITà qui tranche. La règle générique
vaut (0,4,1) grâce à ses deux `:not()` ; sans eux, la nôtre ne pèse que (0,3,1)
et perd â mesuré en vrai à 390 px : le champ restait blanc. */
:root[data-theme="clair"] .vsm-studio input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .vsm-studio textarea,
:root[data-theme="clair"] .vsm-studio select {
--vsm-card: #ffffff;
--vsm-txt: #17142b;
background: #ffffff;
color: #17142b;
}
/* Le textarea de la feuille « Détail » a, lui, son propre fond sombre. */
:root[data-theme="clair"] .vsm-note textarea {
--vsm-card: #ffffff;
}
:root[data-theme="clair"] .vsm-studio input::placeholder,
:root[data-theme="clair"] .vsm-studio textarea::placeholder {
color: rgba(255, 255, 255, .34) !important;
}
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
9. MODE PERSONNALISATION DE LA VUE D'ENSEMBLE (`vs-board.css` / `vs-stats.css`)
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
â ï¸ Encore une famille d'ÃTATS que l'audit n'ouvrait pas : ces écrans
n'existent que si l'on clique « Personnaliser ». Ils ont leur propre
palette, dont 5 jetons n'étaient mappés NULLE PART â `--panel2`, `--vio2`,
`--vio-tint2`, `--vio-bd`, `--pop-tint`. Ils ne servent qu'ici et dans
`js/vs-stats3.js` (vérifié), donc les mapper au `:root` ne peut rien
déborder ailleurs.
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
:root[data-theme="clair"] {
--panel2: var(--vsc-card-3);
--vio2: var(--vsc-vio-2);
--vio-tint2: rgba(106, 62, 239, .16);
--vio-bd: rgba(106, 62, 239, .42);
--pop-tint: rgba(74, 112, 0, .14);
}
/* La barre du mode personnalisation : son fond est un DÃGRADà écrit en dur
(#1a1a22 â #131319), aucune variable ne le porte. Même raisonnement que la
barre d'action de Publier â elle est permanente tant qu'on personnalise,
donc elle s'éclaircit. */
:root[data-theme="clair"] .edbar {
background: linear-gradient(180deg, #ffffff, var(--vsc-card-2)) !important;
box-shadow: 0 16px 40px rgba(23, 20, 43, .18) !important;
}
/* â ï¸ Le voile du bas des vignettes d'aperçu (« Ajouter des blocs ») fond vers
`rgba(18,18,24,.7)` : sur une vignette claire il posait une bande grise en
travers de chaque aperçu. */
:root[data-theme="clair"] .gcard__prev::after {
background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, .75)) !important;
}
:root[data-theme="clair"] .gcard { background: var(--vsc-card-2) !important; }
/* â ï¸â ï¸ CSS INJECTà PAR JAVASCRIPT â la dernière cachette.
`js/vs-ov.js` construit une feuille de style à la volée : ses règles
n'apparaissent dans AUCUN fichier .css, donc mes balayages de couleurs en
dur (qui lisent les fichiers) ne pouvaient pas les voir, et elles ne
s'appliquent qu'en mode personnalisation. D'où les petits boutons noirs de
chaque bloc sur la capture.
â ï¸ Une feuille injectée arrive APRÃS la nôtre dans l'ordre du document :
seul `!important` la reprend. */
:root[data-theme="clair"] .pcbar button {
background: var(--vsc-card-3) !important;
border-color: var(--vsc-hair-2) !important;
color: var(--vsc-ink-2) !important;
}
:root[data-theme="clair"] .pcbar button:hover { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .pcbar .sz.on { color: var(--vsc-vio) !important; }
/* Renommage d'un onglet : le champ hérite d'un `color:#fff` en dur. */
:root[data-theme="clair"] .tab2 input { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .tab2 .tx:hover {
background: rgba(23, 20, 43, .10) !important;
color: var(--vsc-ink) !important;
}
/* â ï¸â ï¸ LE FOND DE `` LUI-MÃME â trouvé en mobile, mais le défaut est GLOBAL.
`css/style.css` (chargé par les 15 pages) pose `html{background:#08080c}` « pour
éviter tout flash blanc entre deux pages », et `dashboard.html` le redouble en
ligne. Le `body` était bien remappé en clair, `html` non.
Personne ne le voit sur une page pleine â mais dès qu'on TIRE l'écran au-delà du
contenu (l'élastique d'iOS/Android, l'overscroll du trackpad), une bande NOIRE
apparaît en haut et en bas. C'est la surface la plus grande du site et celle
qu'aucun audit d'élément ne regarde, parce qu'elle n'appartient à aucun écran. */
:root[data-theme="clair"] { background: var(--vsc-bg) !important; }
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
10. LES FENÃTRES CONSTRUITES PAR JAVASCRIPT (signalées par Bill, 24/08)
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
â ï¸â ï¸ TROISIÃME FAMILLE D'ANGLE MORT, ET LA PLUS COÃTEUSE.
Ma passe « éléments cachés » force l'affichage de ce qui EXISTE dans le DOM
avec `opacity:0` ou `display:none`. Mais ces fenêtres-là n'existent pas du
tout tant qu'on ne clique pas : le JS les CRÃE au moment de l'ouverture.
Aucun balayage du DOM ne peut les voir. Il faut cliquer pour de vrai.
Résultat chez Bill : « Nouveau modèle » et « Nouveau prompt » entièrement
noires, et la fenêtre « Compte de publication » claire mais dont les noms
de comptes étaient invisibles (blanc sur blanc) â on ne voyait que les
avatars.
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ */
/* â Fenêtres de la Configuration (`.mmodal`, fond #16161f en dur) â */
:root[data-theme="clair"] .mmodal {
background: var(--vsc-card) !important;
border-color: var(--vsc-hair-2) !important;
box-shadow: 0 30px 70px rgba(23, 20, 43, .22) !important;
}
:root[data-theme="clair"] .mmodal__h h4 { color: var(--vsc-ink) !important; }
/* â ï¸ Corollaire connu : une fois la fenêtre blanche, les champs et boutons
posés sur `rgba(255,255,255,.03)` deviennent invisibles à leur tour. */
:root[data-theme="clair"] .fld,
:root[data-theme="clair"] .fta,
:root[data-theme="clair"] .bigseg button {
background: var(--vsc-card-3) !important;
border-color: var(--vsc-hair-2) !important;
}
:root[data-theme="clair"] .bigseg button.on {
background: var(--vsc-vio-tint) !important;
border-color: rgba(106, 62, 239, .40) !important;
}
/* â Fenêtre de choix de Publier (compte, catégorie) : la LIGNE porte un
`color:#fff` en dur, alors que la fenêtre est déjà claire. C'est le cas
le plus traître : la fenêtre a l'air correcte, seul le texte manque. â */
:root[data-theme="clair"] .catrow { color: var(--vsc-ink) !important; }
:root[data-theme="clair"] .catrow:hover { background: var(--vsc-card-3) !important; }
:root[data-theme="clair"] .chsw { border-color: var(--vsc-hair-2) !important; }
/* â Survol d'une carte de compte (Vue d'ensemble) : `#16161d` en dur.
Un état :hover n'apparaît sur AUCUNE capture d'audit â il n'existe que
sous le curseur. C'est la carte noire de la capture de Bill. â */
:root[data-theme="clair"] .acct:hover { background: var(--vsc-card-2) !important; }
/* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
11. SURCOUCHES TRANSLUCIDES BLANCHES â la famille entière, d'un coup
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
Tout le dashboard emploie `rgba(255,255,255,.03 â .10)` pour POSER une
surface légèrement plus claire sur un fond sombre : onglet actif, pastille
éteinte, bouton fantôme, rail d'interrupteur. Sur du blanc, ces couches
ne posent RIEN â elles disparaissent purement et simplement.
â ï¸ Le cas grave n'est pas le bouton discret, c'est l'ÃTAT ACTIF : un
onglet « sélectionné » dont la surbrillance est invisible ne dit plus Ã
personne où il se trouve dans la page.
â ï¸ Ces éléments échappaient à l'audit de contraste (leur TEXTE est
lisible â c'est leur FOND qui manque) et à l'audit des surfaces sombres
(leur fond n'est pas sombre, il est absent). D'où une sonde dédiée :
fond blanc d'opacité < .16, posé sur une surface claire, sans bordure.
La transposition est mécanique : blanc translucide sur sombre
â encre translucide sur clair, à opacité comparable. */
/* Pastilles d'automatisation des cartes de compte (Vue d'ensemble, Stats) */
:root[data-theme="clair"] .tg { background: rgba(23, 20, 43, .05) !important; }
:root[data-theme="clair"] .tg:hover { background: rgba(23, 20, 43, .09) !important; }
/* `.tg.on` est déjà en teinte violette â ne pas y toucher. */
/* Nav latérale de la Configuration : l'entrée COURANTE */
:root[data-theme="clair"] .snav:hover { background: rgba(23, 20, 43, .05) !important; }
:root[data-theme="clair"] .snav.on { background: rgba(23, 20, 43, .07) !important; }
/* Onglets et filtres actifs â Colis et Bloc-note */
:root[data-theme="clair"] .seg button.on,
:root[data-theme="clair"] .hsort button.on,
:root[data-theme="clair"] .viewseg button.on,
:root[data-theme="clair"] .agmode button.on,
:root[data-theme="clair"] .filt.on { background: rgba(23, 20, 43, .08) !important; }
/* Rail d'un interrupteur ÃTEINT : sans fond, on ne voit plus qu'il existe */
:root[data-theme="clair"] .sw { background: rgba(23, 20, 43, .08) !important; }
/* Boutons fantômes au survol */
:root[data-theme="clair"] .btn-ghost:hover,
:root[data-theme="clair"] .btn-pdf:hover,
:root[data-theme="clair"] .undo:hover,
:root[data-theme="clair"] .gbtn.stop:hover,
:root[data-theme="clair"] .btn-reset:hover,
:root[data-theme="clair"] .bacct__cfg:hover,
:root[data-theme="clair"] .acct__cfg:hover,
:root[data-theme="clair"] .histtoggle:hover .histchev { background: rgba(23, 20, 43, .06) !important; }
/* âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
12. SURVOLS PEINTS EN NOIR EN DUR â la famille que RIEN ne peut voir
âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
Les grandes tuiles cliquables du dashboard (carte de compte, raccourci,
mini-chiffre, tuile de stat) s'éclairent au survol en passant à `#16161d`.
Sur un fond blanc, la tuile devient NOIRE sous le curseur et son texte
sombre disparaît. C'est la carte de compte noire des captures de Bill.
â ï¸ POURQUOI AUCUN AUDIT NE POUVAIT LES TROUVER : un `:hover` n'existe
que sous le curseur. Il n'apparaît sur aucune capture, aucune passe DOM
ne le déclenche, et la sonde des surcouches translucides ne le voit pas
non plus (ce n'est pas du blanc translucide, c'est un noir opaque).
La seule méthode qui les sort : grepper les règles `:hover` qui posent
un `background` dont la LUMINANCE est basse.
â ï¸ Faux positifs écartés : les `#2b0207` de la messagerie sont des
couleurs de TEXTE posées sur de l'ambre plein (états « litige ») â elles
restent justes en clair. Ne pas les « corriger ». */
:root[data-theme="clair"] a.mini:hover,
:root[data-theme="clair"] .qtile:hover,
:root[data-theme="clair"] .acct:hover,
:root[data-theme="clair"] a.bacct:hover,
:root[data-theme="clair"] .bacct:hover,
:root[data-theme="clair"] .acct--add:hover,
:root[data-theme="clair"] .bacct--add:hover,
:root[data-theme="clair"] .stat:hover,
:root[data-theme="clair"] .vsw .acct:hover,
:root[data-theme="clair"] .vsw .acct--add:hover,
:root[data-theme="clair"] .vsw .qtile:hover { background: var(--vsc-card-3) !important; }
/* Les deux tuiles « + » gardent leur intention : le survol vire au violet */
:root[data-theme="clair"] .acct--add:hover,
:root[data-theme="clair"] .bacct--add:hover,
:root[data-theme="clair"] .vsw .acct--add:hover { color: var(--vsc-vio) !important; }
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
13. TEXTES PEINTS PAR UN DÃGRADà DÃCOUPà â la famille entière
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
Signalé par Bill (24/08) : « le 69 on le voit à peine ». C'est le grand
compteur de « Total fiches générées » (Statistiques), peint par
`linear-gradient(180deg, #fff 40%, #c4b3ff)` découpé sur le texte. Sur du
blanc, la moitié haute du chiffre est littéralement invisible.
â ï¸â ï¸ POURQUOI MES SONDES NE LE VOYAIENT PAS, ET C'EST STRUCTUREL :
un texte en dégradé découpé a `-webkit-text-fill-color: transparent`. Mes
auditeurs lisaient cette valeur, la trouvaient « transparente », donc
invisible, et l'écartaient comme du contenu masqué â exactement le même
filtre anti-bruit qui m'avait déjà caché les infobulles. Le texte est
pourtant bien à l'écran : il est peint par le `background-image`, que la
sonde ne sait pas mesurer.
**Règle de sonde : `text-fill-color` transparent + `background-clip: text`
ne signifie pas "invisible", ça signifie "peint par le dégradé â Ã
vérifier à la main".** Ne plus jamais l'écarter silencieusement.
â ï¸ Il ne suffit JAMAIS de poser `color` : tant que `-webkit-text-fill-color`
reste transparent, la couleur n'est pas utilisée. Il faut les trois :
couper le dégradé (`background-image: none`), rendre le fill opaque, et
poser `color` pour les navigateurs sans préfixe.
Recensé par `grep -rn "background-clip"` sur tout le dépôt â la leçon des
« 3 générateurs de hashtags qui divergent » : on traite la famille, pas
l'occurrence signalée. `.kpi__v` était déjà couvert (§4), les autres non.
Les pages publiques (landing-v2/3/4) restent sombres : hors périmètre. */
:root[data-theme="clair"] .big .n,
:root[data-theme="clair"] .vsw .big .n,
:root[data-theme="clair"] .metric-value,
:root[data-theme="clair"] .gradient-text {
background-image: none !important;
-webkit-text-fill-color: var(--vsc-ink) !important;
color: var(--vsc-ink) !important;
}
/* Variante texte du sigle (pages publiques) : même procédé, on garde la
couleur de marque plutôt que l'encre â c'est un logo, il reste violet. */
:root[data-theme="clair"] .nav-brand-mark {
background-image: none !important;
-webkit-text-fill-color: var(--vsc-vio) !important;
color: var(--vsc-vio) !important;
}
/* ââ LOGO DE LA BARRE DU HAUT ââââââââââââââââââââââââââââââââââââââââââââ
`assets/logo-light.png` a le « V » en BLANC (il est fait pour un fond
sombre) : sur fond blanc, la première lettre de la marque disparaît, il ne
reste que « STORM ». `assets/logo-dark.png` est exactement le même dessin
avec le V en noir â il existait déjà dans le dépôt, il n'était simplement
jamais servi. Une seule règle couvre les 18 pages : toutes utilisent
`.dash-brand img`.
â ï¸ On ne peut pas changer un attribut `src` en CSS ; `content: url()` sur
une balise ![]()
remplace bien l'image rendue (Chrome/Safari/Firefox). Le
chemin est relatif à CE fichier (css/), d'où le `../`. */
:root[data-theme="clair"] .dash-topnav .dash-brand img,
:root[data-theme="clair"] .dash-brand img {
content: url("../assets/logo-dark.png");
width: 149px;
}
/* Nouveau dessin (28/08) plus large (rocket + texte) : largeur fixee
pour ne pas elargir la barre du haut (auto-largeur suivait le ratio
de l'image, plus plat que l'ancienne, et debordait). */
@media (max-width: 860px) {
:root[data-theme="clair"] .dash-topnav .dash-brand img { width: 114px; }
}
/* ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
14. LIBELLÃS RESTÃS BLANCS SUR LES ÃTATS ACTIFS
ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
â ï¸â ï¸ CE DÃFAUT, C'EST MOI QUI L'AI CRÃÃ, EN §11. En transformant les
surcouches `rgba(255,255,255,.08)` en encre translucide `rgba(23,20,43,.08)`,
j'ai rendu l'onglet actif visible⦠mais son TEXTE était blanc, calibré pour
l'ancien fond sombre. Résultat mesuré en prod : « à imprimer » (Colis) et
« Note » (Bloc-note) en blanc sur un gris à 95 % de clarté â illisibles.
C'est mot pour mot la leçon déjà écrite ce mois-ci : **traiter le COUPLE
fond + encre, jamais l'un sans l'autre.** Changer un fond oblige à relire la
couleur du texte posé dessus, dans les deux sens.
Trouvé par la sonde « texte quasi blanc sur fond clair », relancée sur les
15 pages APRÃS le correctif §11 â pas avant. Une correction de surface se
re-audite ; elle déplace le problème plus souvent qu'elle ne le supprime.
â ï¸ Faux positifs écartés à la mesure, NE PAS « corriger » :
· `.it__dots` (Stock, 470 occurrences) â blanc sur pastille sombre
translucide posée SUR la photo : parfaitement lisible ;
· `.btn-primary`, boutons d'action â fond en dégradé violet (`background-image`),
que la sonde ne lit pas dans `backgroundColor` ;
· `.av` / `.avatar` / `.fav` â initiales sur couleur générée par compte,
déjà documenté. */
:root[data-theme="clair"] .snav.on,
:root[data-theme="clair"] .seg button.on,
:root[data-theme="clair"] .hsort button.on,
:root[data-theme="clair"] .viewseg button.on,
:root[data-theme="clair"] .agmode button.on,
:root[data-theme="clair"] .bdx-tab.on,
:root[data-theme="clair"] .filt.on { color: var(--vsc-ink) !important; }
/* Compteurs des barres de progression (Mission Control) : `` blanc posé
directement sur la carte blanche, sans aucun fond à lui. */
:root[data-theme="clair"] .bmeta,
:root[data-theme="clair"] .bmeta b { color: var(--vsc-ink) !important; }
/* ============================================================
15. TEXTES CALIBRES POUR LE SOMBRE (27/08/2026)
------------------------------------------------------------
Trouves par une sonde de contraste qui OUVRE les blocs caches
dont le parent est visible : les bannieres contextuelles ne
s affichent que dans un etat precis (contexte employe) et
echappaient donc a tous les audits precedents.
â ï¸ Une couleur ecrite EN DUR dans un attribut style= ne peut
pas etre corrigee par une feuille : il faut passer par une
variable cote HTML. Les blocs ci-dessous fournissent la
valeur claire ; le fallback du HTML reste la valeur sombre.
============================================================ */
:root[data-theme="clair"]{
/* Banniere « Tu travailles pour X » (Publier, contexte employe) :
mesure a 1.09:1 sur fond clair â invisible. */
--vs-ban-bg: rgba(46,110,200,.10);
--vs-ban-bd: rgba(46,110,200,.30);
--vs-ban-ink: #234a7d;
--vs-ban-str: #14304f;
/* Boutons de mode des Statistiques (vs-stats3.js) : violet clair
sur violet pale = 1.23:1. */
--vs3-on-bg: rgba(140,102,255,.20);
--vs3-on-ink: #4a2fb0;
--vs3-off-ink: #5a5474;
}
/* « Mon serveur » : le quota etait ecrit en blanc sur une carte blanche. */
:root[data-theme="clair"] .cl-quota .v{ color: var(--vsc-ink-1,#17142b); }
/* Offres : prix barre et note de facturation, encre trop pale (3.08:1). */
:root[data-theme="clair"] .price .was,
:root[data-theme="clair"] .billnote{ color: #5a5474; }
/* Pastille de la cloche : blanc sur rouge vif = 2.97:1 en clair. */
:root[data-theme="clair"] .vs-bell-badge{ background: #cf2036; }
/* Stock : etiquettes d etat, toutes juste sous le seuil (3.76 a 4). */
:root[data-theme="clair"] .it__badge.b-sold{ color:#5b32a8; }
:root[data-theme="clair"] .it__badge.b-online{ color:#0c6b3d; }
:root[data-theme="clair"] .it__repub{ color:#a81b3c; }
/* ------------------------------------------------------------
ZONES VOLONTAIREMENT SOMBRES â contrôles natifs
â ï¸ Le thème clair pose « color-scheme: light » sur la racine.
Le systeme repeint alors les elements NATIFS (curseur de saisie,
surbrillance de selection, barres de defilement, fonds de
champs sur iOS) en clair â y compris DANS le studio photo, qui
reste noir. C est ce qui rend « le mode photo bizarre » sur
telephone alors que tout est correct sur ordinateur : Chrome
bureau ne rend presque aucun de ces controles.
Meme levier que « select { color-scheme: dark } » de style.css.
â ï¸ Ne pas retirer : sans lui le defaut ne se voit QUE sur mobile.
------------------------------------------------------------ */
:root[data-theme="clair"] .vsm-studio,
:root[data-theme="clair"] .vsm-note,
:root[data-theme="clair"] .vsm-photov,
:root[data-theme="clair"] .cl-load{ color-scheme: dark; }
/* ------------------------------------------------------------
ENCRE DES PETITS LIBELLES (27/08/2026)
Mesure : les intitules de champs (N° STOCK, COMPLEMENT, COMPTE,
PUBLIER SUR, TEMPLATE...) et les placeholders sortaient a 4.97:1.
C est au-dessus du seuil AA, mais ils sont rendus en 9-10 px, en
CAPITALES espacees : a cette taille le rendu est pale et fatigant
(« presque illisible » â retour de Bill sur telephone).
Une seule variable porte tout ce petit texte dans le dashboard.
â ï¸ Ne concerne QUE le theme clair : le sombre garde sa valeur.
------------------------------------------------------------ */
:root[data-theme="clair"]{ --vsc-ink-4: #544f6d; } /* 4.97:1 â ~6.9:1 */
/* ------------------------------------------------------------
GRILLES A SEPARATEURS (27/08/2026) â « rectangles blancs chelous »
Mecanisme mesure : .kpis / .minis / .accts / .qa sont des grilles
dont le CONTENEUR fait la couleur des separateurs (rgba(23,20,43,.09))
et dont les CELLULES (.kpi .mini .bacct .qtile) sont pleines, sans
arrondi ni bordure. En sombre, cellule #121218 sur conteneur a peine
teinte = ecart imperceptible : la grille se fond dans la page. En
clair, cellule BLANCHE sur gris a 9 % = 32 points d ecart â bandes
blanches franches. C est exactement ce que Bill voit.
â ï¸ On ne touche PAS aux cellules : le blanc est la surface de
lecture. C est le LIANT qui etait trop marque.
------------------------------------------------------------ */
:root[data-theme="clair"] .kpis,
:root[data-theme="clair"] .minis,
:root[data-theme="clair"] .accts,
:root[data-theme="clair"] .qa { background: rgba(23,20,43,.045); }