/* ═══════════════════════════════════════════════════════════════════════════
   THÈME CLAIR — V-Storm (23/08/2026)
   ───────────────────────────────────────────────────────────────────────────
   Activé par <html data-theme="clair"> (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; }

/* ⚠️ 31/10/2026 (Bill : « plein d'endroits avec des rectangles blancs, ça fait
   dégueulasse ») — LA REGLE CI-DESSUS PEIGNAIT EN BLANC DES CHAMPS CONCUS TRANSPARENTS.
   Beaucoup de champs de V-Storm ne sont pas des boites : ce sont des zones de saisie
   POSEES DANS une pilule deja stylee (la loupe + le fond teinte + le bord arrondi sont
   portes par le conteneur, et l'input lui-meme est `background:none; border:0`).
   Mesure en direct sur « Rechercher une annonce » du Journal : conteneur `.fld`
   rgb(242,240,248), input force a rgb(255,255,255) avec 0px de bord → un rectangle
   blanc franc au milieu d'une pilule grise.
   On rend donc leur transparence a TOUS ces champs d'un coup. La liste vient du CSS
   lui-meme : ce sont les conteneurs qui declarent deja `background:none` sur leur input
   (`git grep` sur les feuilles du site), pas une liste devinee a l'oeil.
   Les champs autonomes (ceux qui portent leur propre bord) gardent le fond blanc.
   ⚠️ Les deux :not() ne sont PAS decoratifs : la regle globale plus haut en porte deux,
   ce qui lui donne une specificite de (0,4,1). Sans eux, cette regle-ci valait (0,3,1)
   et PERDAIT malgre son !important — teste en direct, le champ restait blanc. */
:root[data-theme="clair"] .amt input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .bn-search input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .box textarea,
:root[data-theme="clair"] .ddsrch input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .dstep input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .ed textarea,
:root[data-theme="clair"] .field input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .fld input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .fld select,
:root[data-theme="clair"] .hsearch input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .hsrch input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .med textarea,
:root[data-theme="clair"] .mp-delai input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .pr input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .rpop__in input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .sb__srch input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .search input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .selpill input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .selpill select,
:root[data-theme="clair"] .srch input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .stp input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .tagadd input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .vs-stepper input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="clair"] .vsm-studio__sku input:not([type="checkbox"]):not([type="radio"]) {
  background: transparent !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 <body> 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 <body>, 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 `<html>` 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 */
/* 31/10/2026 (Bill : « on voit que le nom des couleurs ») — CETTE REGLE REPEIGNAIT
   TOUTES LES PASTILLES DE COULEUR EN GRIS. `.sw` sert a DEUX choses dans V-Storm :
   l'interrupteur on/off (pas de couleur en ligne) ET la pastille de couleur des
   legendes de graphe et du nuancier de Publier, qui porte sa teinte en style EN LIGNE.
   Avec `!important`, le gris de l'interrupteur gagnait meme contre le style en ligne :
   en theme clair, le nuancier « Couleur(s) » de Publier n'affichait plus que des noms,
   et les legendes des courbes perdaient aussi leur couleur. Le commentaire plus haut
   dans ce fichier disait deja que ces pastilles doivent garder leur couleur.
   On ne peut pas cibler les interrupteurs par [role="switch"] : plusieurs n'en ont pas
   (notifNews, maskSwitch, swBeta, aff-toggle...). On exprime donc la vraie regle :
   une pastille qui porte une couleur en ligne la garde, les autres prennent le gris. */
:root[data-theme="clair"] .sw:not([style*="background"]) { 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 <img> 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,
:root[data-theme="clair"] .vsm-appbar__logo img {
  content: url("../assets/logo-dark.png");
  width: 149px;
}
/* Appbar mobile (hauteur 30px) : largeur proportionnelle — le width:149px ci-dessus etire le logo (ratio 2.49 force en 4.97). */
:root[data-theme="clair"] .vsm-appbar__logo img { width: auto; }
/* 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) : `<b>` 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); }


/* ------------------------------------------------------------
   TEXTES PASTEL SUR FOND CLAIR (01/11/2026) - audit de contraste
   Ces pastilles d'info gardaient en theme clair la couleur pensee
   pour le fond sombre. Posees sur du blanc elles tombaient a
   1,4-1,9:1 : le texte etait la, mais illisible.
   Le theme sombre n'est pas touche.
   ------------------------------------------------------------ */
:root[data-theme="clair"] .pcard__warn{ color:#8a5a00 }      /* 1,4:1 -> 6,4:1 */
:root[data-theme="clair"] .bdx-dl.ok{ color:#0f7a56 }        /* 1,9:1 -> 5,5:1 */
:root[data-theme="clair"] .bdx-dl.urgent{ color:#8a5a00 }
:root[data-theme="clair"] .bdx-dl.late{ color:#b3203a }

/* Survols ecrits en blanc en dur (Stock) : invisibles sur fond clair. */
:root[data-theme="clair"] .freset:hover{ color:var(--vsc-ink) }
:root[data-theme="clair"] .abtn--ghost{ background:rgba(23,20,43,.04) }
:root[data-theme="clair"] .abtn--ghost:hover{ color:var(--vsc-ink); background:rgba(23,20,43,.09) }

/* ------------------------------------------------------------
   CENTRE D'AIDE - BARRE DU HAUT (01/11/2026)
   aide.html garde le dialecte des pages publiques sur sa barre :
   `.nav{--text:#F3F3F8}`. Le theme clair rendait deja la barre
   BLANCHE (plus haut) mais pas son encre : « Tarifs »,
   « Ressources » et « Se deconnecter » etaient ecrits en blanc
   sur blanc - invisibles (1,1:1).
   On ne remappe PAS --text sur .nav : le menu deroulant
   .nav-dd-menu est volontairement sombre (#0f0f16), ses liens
   doivent rester clairs.
   ------------------------------------------------------------ */
:root[data-theme="clair"] .nav .nav-txt,
:root[data-theme="clair"] .nav .nav-dd-btn { color: var(--vsc-ink-2); }
:root[data-theme="clair"] .nav .nav-txt:hover,
:root[data-theme="clair"] .nav .nav-txt.active,
:root[data-theme="clair"] .nav .nav-dd-btn:hover,
:root[data-theme="clair"] .nav .nav-dd.open .nav-dd-btn,
:root[data-theme="clair"] .nav .nav-dd-btn.active { background: rgba(23,20,43,.06); color: var(--vsc-ink); }

/* Meme traitement du logo que la barre du dashboard : le « V » blanc
   de logo-light.png disparait sur fond blanc. */
:root[data-theme="clair"] .nav .brand img.logo { content: url(../assets/logo-dark.png); }