/* V-Storm · Publier — additif au design (publier.css, cantonné à .vspub). La coquille (nav, thème, mobile) = feuilles du dashboard. */
.vspub{font:400 14px/1.45 Inter,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.vspub .wrap{max-width:none;padding:0 0 140px}
/* comptes : vraie photo de profil + logo plateforme */
.vspub .accw{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}.vspub .accw .accav{width:18px;height:18px;border-radius:50%;object-fit:cover;flex:none}.vspub .accw svg{flex:none;vertical-align:middle}
.vspub .tg svg{width:14px;height:14px;flex:none}
/* bandeaux (contexte employé, trous de numérotation, quota IA, astuce téléphone) */
.vspub .note{padding:11px 14px;font-size:12.5px;line-height:1.55;color:var(--ink2);display:block}
.vspub .note b{color:var(--ink)}.vspub .note a{color:var(--vi)}
.vspub .note.warn{border-color:rgba(232,181,60,.45);background:rgba(232,181,60,.09)}.vspub .note.bad{border-color:var(--rl);background:var(--rt)}.vspub .note.soft{color:var(--ink3)}.vspub .note.info{border-color:var(--vl);background:var(--vt)}
.vspub .note .nx{float:right;margin-left:10px;background:none;border:0;color:var(--ink3);cursor:pointer;font:700 12.5px Inter}.vspub .note .nx:hover{color:var(--ink)}
/* barre d'action : état « en cours » */
.vspub .vspin{width:13px;height:13px;border-radius:50%;border:2px solid var(--vl);border-top-color:var(--vi);display:inline-block;vertical-align:-2px;animation:vsp .8s linear infinite;margin-right:4px}@keyframes vsp{to{transform:rotate(360deg)}}
/* sélecteur avec recherche (dans le menu) */
.vspub .menu .pk-h{padding:8px 10px 4px;display:flex;flex-direction:column;gap:2px}.vspub .menu .pk-h b{font-size:13px}.vspub .menu .pk-h small{font-size:11.5px;color:var(--ink3)}
.vspub .menu .pk-q{margin:4px 6px 6px;width:calc(100% - 12px);height:32px;border:1px solid var(--ln);border-radius:9px;background:var(--pn2);color:var(--ink);padding:0 10px;font:500 13px Inter;outline:none}.vspub .menu .pk-q:focus{border-color:var(--vl)}
.vspub .menu .pk-l{max-height:min(52vh,420px);overflow:auto}
.vspub .menu .pk-f{display:flex;align-items:center;gap:8px;padding:8px 6px 4px;border-top:1px solid var(--ln);margin-top:4px}.vspub .menu .pk-f .bt{height:30px}
.vspub .menu .pk-bc{display:flex;align-items:center;gap:6px;padding:2px 8px 6px;font:600 12px Inter;color:var(--ink3);flex-wrap:wrap}.vspub .menu .pk-bc i{color:var(--ink4);font-style:normal}
.vspub .menu .mo .sw{width:14px;height:14px;border-radius:4px;border:1px solid var(--ln);flex:none}
.vspub .menu .mo .accav{flex:none}
/* modale (confirmation, planification) */
.vspub .vmd{position:fixed;inset:0;z-index:120;background:rgba(10,10,15,.45);display:flex;align-items:safe center;justify-content:center;padding:16px;overflow-y:auto}
.vspub .vmd-box{width:100%;max-width:440px;background:var(--pn);border:1px solid var(--ln);border-radius:16px;padding:18px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:12px}
.vspub .vmd-box h3{font-size:16px;font-weight:800;letter-spacing:-.02em;margin:0}.vspub .vmd-box p{font-size:13.5px;line-height:1.5;color:var(--ink2);margin:0}.vspub .vmd-box p b{color:var(--ink)}.vspub .vmd-box a{color:var(--vi)}
.vspub .vmd-r{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.vspub .vmd-or{text-align:center;font:600 11px Inter;color:var(--ink4);letter-spacing:.1em;text-transform:uppercase}
/* fiche : plateformes + doutes du pilote */
.vspub .prow{display:flex;align-items:center;gap:10px;min-height:36px}.vspub .prow+.prow{margin-top:6px}.vspub .prow.off{opacity:.55}
.vspub .ptg{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;cursor:pointer;min-width:120px}.vspub .ptg input{width:16px;height:16px;accent-color:var(--vi)}
.vspub .alw{border:1px solid var(--vl);background:var(--vt);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}.vspub .alw b{font-size:13.5px}.vspub .alw ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink2);line-height:1.5}
.vspub .alr{display:flex;gap:8px;flex-wrap:wrap}.vspub .alr .fi{flex:1;min-width:200px}
.vspub .hl2 .bt{margin-left:auto}
/* ancien compositeur : nœuds de compatibilité (invisibles) */
#vsCompat{display:none!important}
/* modales héritées encore utilisées (ordre des photos, plateformes) — habillées aux tokens */
.vspub .catmodal{position:fixed;inset:0;z-index:118;background:rgba(10,10,15,.45);display:none;align-items:safe center;justify-content:center;padding:16px;overflow-y:auto}.vspub .catmodal.on{display:flex}
.vspub .catbox{width:100%;max-width:560px;background:var(--pn);border:1px solid var(--ln);border-radius:16px;box-shadow:var(--sh);display:flex;flex-direction:column;max-height:88vh;overflow:hidden}
.vspub .chhd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--ln);font-weight:800;font-size:15px}
.vspub .chx{width:30px;height:30px;border-radius:9px;border:1px solid var(--ln);background:var(--pn);color:var(--ink3);cursor:pointer}.vspub .chx:hover{color:var(--ink)}
.vspub .catlist{overflow:auto;padding:8px}
.vspub .ordfam{display:flex;gap:6px;flex-wrap:wrap;padding:12px 16px 0}.vspub .ordfam button{height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--ln);background:var(--pn);color:var(--ink3);font:600 12.5px Inter;cursor:pointer}.vspub .ordfam button.on{background:var(--vt);border-color:var(--vl);color:var(--ink)}
.vspub .ordlist{padding:10px 16px;overflow:auto}.vspub .ordrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--ln);font-size:13px}.vspub .ordrow .n{width:22px;height:22px;border-radius:7px;border:1px solid var(--ln);display:grid;place-items:center;font:700 11px Inter;color:var(--ink3);flex:none}.vspub .ordrow .t{flex:1}.vspub .ordrow .ar{display:flex;gap:4px}.vspub .ordrow .ar button{width:26px;height:26px;border-radius:7px;border:1px solid var(--ln);background:var(--pn);color:var(--ink3);cursor:pointer}.vspub .ordrow .ar button:disabled{opacity:.35}
.vspub .ordfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--ln);font-size:12.5px;color:var(--ink3)}
.vspub .ordchips{display:flex;gap:6px;flex-wrap:wrap;padding:6px 16px}.vspub .ordchip{height:26px;padding:0 9px;border-radius:999px;border:1px dashed var(--ln);background:none;color:var(--ink3);font:600 12px Inter;cursor:pointer}
.vspub .catback{height:30px;padding:0 10px;border-radius:9px;border:1px solid var(--ln);background:var(--pn);color:var(--ink2);font:600 12.5px Inter;cursor:pointer}
.vspub .plrow{display:flex;align-items:center;gap:12px;padding:12px 8px;border-top:1px solid var(--ln)}.vspub .plrow:first-child{border-top:0}.vspub .plrow__n{flex:1;display:flex;flex-direction:column}.vspub .plrow__n b{font-size:13.5px}.vspub .plrow__n span{font-size:12px;color:var(--ink3)}
.vspub .plrow .etat{font:600 11px Inter;padding:3px 8px;border-radius:999px;border:1px solid var(--ln);color:var(--ink3)}.vspub .plrow .etat.on{color:var(--gr);border-color:rgba(15,157,99,.4)}.vspub .plrow .etat.co{color:var(--vi);border-color:var(--vl)}
.vspub .plcompte{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 54px;font-size:13px}.vspub .plcompte button{margin-left:auto;height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--ln);background:none;color:var(--ink3);font:600 12px Inter;cursor:pointer}
.vspub .plform{padding:6px 8px 12px 54px;display:flex;flex-direction:column;gap:8px}.vspub .plform .hint{font-size:12px;color:var(--ink3);line-height:1.5}.vspub .plform .hint a{color:var(--vi)}.vspub .plform code{font:600 11px "JetBrains Mono",monospace;background:var(--pn2);padding:1px 4px;border-radius:4px}
.vspub .plform .inp,.vspub .inp{height:36px;border:1px solid var(--ln);border-radius:9px;background:var(--pn2);color:var(--ink);padding:0 10px;font:500 13px Inter;outline:none;width:100%}.vspub .inp:focus{border-color:var(--vl)}
.vspub .btn{height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--ln);background:var(--pn);color:var(--ink2);font:600 13px Inter;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.vspub .btn-primary{background:var(--vt);border-color:var(--vl);color:var(--vi)}.vspub .btn:disabled{opacity:.5}
/* tiroir hérité (templates/pilote, si encore ouvert par un ancien chemin) */
.vspub .drw-ov{position:fixed;inset:0;z-index:117;background:rgba(10,10,15,.45);display:none}.vspub .drw-ov.on{display:block}
.vspub .drw{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--pn);border-left:1px solid var(--ln);display:flex;flex-direction:column}
.vspub .drw__hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ln)}.vspub .drw__hd h3{font-size:15px;font-weight:800;flex:1;margin:0}.vspub .drw__hd .ic{display:none}.vspub .drw__x{width:30px;height:30px;border-radius:9px;border:1px solid var(--ln);background:var(--pn);color:var(--ink3);cursor:pointer}
.vspub .drw__bd{flex:1;overflow:auto;padding:14px 16px;font-size:13px}.vspub .drw__hint{font-size:12.5px;color:var(--ink3);line-height:1.5}
/* localisation Leboncoin : modale posée sur body par le fond (hors wrapper) */
.plm-ov{position:fixed;inset:0;z-index:121;background:rgba(10,10,15,.45);display:flex;align-items:safe center;justify-content:center;padding:16px;overflow-y:auto;font-family:Inter,sans-serif}
.plm{width:100%;max-width:440px;background:var(--vs-card,#15151d);border:1px solid var(--vs-border,rgba(196,179,255,.14));border-radius:16px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:10px;color:var(--vs-text,#f4f2fb)}
.plm-t{font-size:16px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}.plm-t svg{width:18px;height:18px}.plm-s{font-size:13px;color:var(--vs-text-mute,#9a94b0);line-height:1.5}
.plm-dt{height:38px;border:1px solid var(--vs-border,rgba(196,179,255,.14));border-radius:10px;background:rgba(255,255,255,.04);color:inherit;padding:0 12px;font:500 13.5px Inter;outline:none;width:100%}
.plm-btns{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}.plm-cancel,.plm-go{height:36px;padding:0 14px;border-radius:10px;font:600 13px Inter;cursor:pointer;border:1px solid var(--vs-border,rgba(196,179,255,.14));background:none;color:inherit}.plm-go{background:rgba(140,102,255,.14);border-color:rgba(140,102,255,.42);color:#c4b3ff}
:root[data-theme="clair"] .plm{background:#fff;color:#16161f;border-color:#e8e8f0}:root[data-theme="clair"] .plm-s{color:#64647a}:root[data-theme="clair"] .plm-go{color:#6d3ff0}
/* anciens toasts (si un module hérité en émet) */
.toast-wrap{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:130;display:flex;flex-direction:column;gap:8px}
#toasts .toast{position:static;transform:none;opacity:0;transition:opacity .2s}#toasts .toast.show{opacity:1}
/* thème clair du dashboard : ses règles !important génériques ne doivent pas repeindre le design */
:root[data-theme="clair"] .vspub .pill.on{background:var(--vt)!important;color:var(--vi)!important}
:root[data-theme="clair"] .vspub .pill:hover{color:var(--ink)!important}
:root[data-theme="clair"] .vspub .seg{background:var(--pn2)!important;border-color:var(--ln)!important}
:root[data-theme="clair"] .vspub .seg>button{color:var(--ink3)!important;background:transparent!important}
:root[data-theme="clair"] .vspub .seg>button.on,:root[data-theme="clair"] .vspub .seg>button.on *{color:var(--ink)!important;background:var(--pn)!important}
:root[data-theme="clair"] .vspub .head h1{color:var(--ink)!important}
:root[data-theme="clair"] .vspub .head .sub,:root[data-theme="clair"] .vspub .rvr .sub{color:var(--ink3)!important}
:root[data-theme="clair"] .vspub .tg{background:var(--pn)!important}:root[data-theme="clair"] .vspub .tg:hover{background:var(--pn2)!important}:root[data-theme="clair"] .vspub .tg.on{background:var(--vt)!important}
:root[data-theme="clair"] .vspub .pt,:root[data-theme="clair"] .vspub .panel p,:root[data-theme="clair"] .vspub .wrap h2,:root[data-theme="clair"] .vspub .wrap>p{color:inherit!important}
/* responsive */
@media(max-width:720px){.vspub .prow{flex-wrap:wrap}.vspub .vmd-box{padding:14px}}
/* thème clair : la règle générique « champs de saisie » du dashboard (input:not(...) !important) ne doit pas encadrer les cellules du tableur */
html[data-theme="clair"] .vspub.vspub input.ed,html[data-theme="clair"] .vspub.vspub textarea.ed,html[data-theme="clair"] .vspub.vspub label.pr input,html[data-theme="clair"] .vspub.vspub form.cof input{background:transparent!important;border-color:transparent!important;color:var(--ink)!important}
html[data-theme="clair"] .vspub.vspub input.ed:hover,html[data-theme="clair"] .vspub.vspub textarea.ed:hover{border-color:var(--ln)!important}html[data-theme="clair"] .vspub.vspub input.ed:focus,html[data-theme="clair"] .vspub.vspub textarea.ed:focus{border-color:var(--vl)!important;background:var(--pn)!important}
html[data-theme="clair"] .vspub.vspub input.fi,html[data-theme="clair"] .vspub.vspub textarea.fi,html[data-theme="clair"] .vspub.vspub input.pk-q,html[data-theme="clair"] .vspub.vspub form.cof input{background:var(--pn2)!important;border-color:var(--ln)!important;color:var(--ink)!important}html[data-theme="clair"] .vspub.vspub input.fi:focus,html[data-theme="clair"] .vspub.vspub textarea.fi:focus,html[data-theme="clair"] .vspub.vspub input.pk-q:focus{border-color:var(--vl)!important}
html[data-theme="clair"] .vspub.vspub label.pr{background:var(--pn)!important}
/* tuiles photo : flèches ‹ › (ordre, tactile) au milieu des bords ; rotation en bas à droite */
.vspub .pic .mvb{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:8px;border:1px solid var(--ln);background:var(--pn);color:var(--ink2);padding:0;font:700 15px/1 Inter;display:grid;place-items:center;opacity:0;transition:opacity .12s;z-index:1;cursor:pointer}
.vspub .pic .mvb.l{left:7px}.vspub .pic .mvb.r{right:7px}.vspub .pic:hover .mvb{opacity:1}.vspub .pic .mvb:disabled{opacity:0!important}
.vspub .fpg .pic .mvb{opacity:1}
@media(hover:none){.vspub .pic .mvb,.vspub .pic .x,.vspub .pic .rt{opacity:1}}
/* au-dessus de la barre du dashboard (sticky, z-index 100) */
.vspub .rv{z-index:140}.vspub .scr{z-index:144}.vspub .cop{z-index:145}.vspub #fscr,.vspub #jscr{z-index:146!important}.vspub .fd{z-index:147}.vspub .menu{z-index:160}.vspub .abar{z-index:130}.vspub .toast{z-index:170}.vspub .vmd{z-index:190}.vspub .catmodal{z-index:185}.vspub .drw-ov{z-index:180}
/* relecture : la colonne de miniatures défile, la grande photo est une vraie image */
.vspub .ths{overflow-y:auto;scrollbar-width:thin;padding-right:2px}
.vspub .ths button{position:relative;overflow:hidden}
.vspub .ths button img,.vspub .phb img,.vspub .pic .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.vspub .phb{overflow:hidden}.vspub .phb span{z-index:1}
.vspub .rvbig{overflow:hidden}.vspub .rvbig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.vspub .rvbig .lb{position:absolute;bottom:10px;left:50%;transform:translateX(-50%)}
@media(max-width:720px){.vspub .abar,.vspub .toast{bottom:84px}
/* Relecture sur téléphone : photo, bande de miniatures, puis la question — en colonne qui défile (la grille du design écrasait la galerie à 25 px et la photo recouvrait la question). */
.vspub .rvb{display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.vspub .gal{display:flex;flex-direction:column;gap:10px;flex:none;min-height:auto;padding:12px}
.vspub .rvbig{aspect-ratio:4/5;width:100%;max-height:46vh;flex:none;min-height:auto}
.vspub .ths{flex-direction:row;overflow-x:auto;overflow-y:hidden;flex:none;height:76px;min-height:76px;padding:0 0 4px}
.vspub .ths button{width:52px;height:68px;flex:none}
.vspub .rvr{flex:none;overflow:visible}}
/* Réglage par défaut : 2 colonnes sur grand écran, 1 colonne sur téléphone (le style en ligne empêchait l'empilement). */
.vspub .cfg{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.vspub .cfg{grid-template-columns:1fr}}

/* 28/10/2026 — Bill : « on peut pas descendre les photos ». La bande de miniatures tenait sur une
   seule colonne de 64 px : 18 photos = 1384 px dans 809 px de haut, donc la moitie etait hors ecran
   et rien ne disait qu'elle defilait. Au-dela de 9 photos on passe la bande sur DEUX colonnes (tout
   tient sans defiler), et quand il faut quand meme defiler la barre est visible. */
.vspub .gal.twocol{grid-template-columns:minmax(0,1fr) 140px}
.vspub .gal.twocol .ths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.vspub .gal.twocol .ths button{width:100%}
.vspub .ths{scrollbar-width:thin;scrollbar-color:var(--ink3) transparent;overscroll-behavior:contain}
.vspub .ths::-webkit-scrollbar{width:7px}
.vspub .ths::-webkit-scrollbar-track{background:transparent}
.vspub .ths::-webkit-scrollbar-thumb{background:var(--ink3);border-radius:4px;border:2px solid transparent;background-clip:content-box}
@media(max-width:720px){.vspub .gal.twocol{grid-template-columns:1fr}.vspub .gal.twocol .ths{display:flex;grid-template-columns:none}.vspub .gal.twocol .ths button{width:52px}}

/* 28/10/2026 — Bill : « je vois encore des traits comme s'il devait y avoir une image derrière ».
   Les hachures diagonales viennent de la maquette, où elles REMPLACAIENT les photos. En vrai elles
   se voient tout autour d'une photo portrait dans un cadre carre, et pendant le chargement de
   chaque vignette : ca donne l'impression d'une image cassee. On les remplace par un fond plat. */
.vspub .rvbig{background-image:none;background-color:var(--pn2)}
.vspub .ths button,.vspub .phb,.vspub .pic .im,.vspub .ms .th2,.vspub .je .th3{background-image:none;background-color:var(--ph)}

/* 28/10/2026 — Bill : « faut pouvoir afficher les images en gros à l'écran ».
   Visionneuse plein ecran, ouverte depuis une photo de la fiche. */
.vspub .phv{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center}
.vspub .phv.hide{display:none!important}
.vspub .phv img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:10px;transition:transform .15s}
.vspub .phv-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center}
.vspub .phv-nv{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.45);color:#fff;font-size:26px;line-height:1;display:grid;place-items:center}
.vspub .phv-nv.l{left:16px}.vspub .phv-nv.r{right:16px}
.vspub .phv-x:hover,.vspub .phv-nv:hover{background:rgba(255,255,255,.18)}
.vspub .phv-lb{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:600 12.5px Inter,sans-serif;color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vspub .fd .pic .im{cursor:zoom-in}
@media(max-width:720px){.vspub .phv img{max-width:96vw;max-height:78vh}.vspub .phv-nv{width:40px;height:40px;margin-top:-20px}}

/* ── Colonne « Plateformes » (29/10/2026) ────────────────────────────────────────
   Un coup d'œil suffit pour savoir où part l'article : les vrais logos, côte à côte.
   Pas de lettre, pas de pastille de couleur. */
.vspub .c-pl{display:inline-flex;align-items:center;justify-content:center;width:100%}
.vspub .plst{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:8px;
  background:var(--pn2);border:1px solid var(--ln);line-height:0}
.vspub .plst svg{display:block}
.vspub .plst.vide{color:var(--ink4);font-size:12px;font-weight:600;line-height:1;padding:4px 8px;background:none;border-style:dashed}

/* ── Bouton « Pilote auto » (29/10/2026) : il dit ce que le pilote fait ───────── */
.vspub .mort{display:inline-flex;align-items:center;gap:7px}
.vspub .mort:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink4)}
.vspub .bt .n.ok{color:var(--gr);opacity:1}

/* Journal — serie en cours de publication (29/10/2026). Bill : « ça met brouillon,
   faudrait plutot en cours de publication et en haut du journal ou tu vois la
   publication avancer en temps reel ». */
.vspub .jst.en{color:var(--vi);border-color:var(--vl);background:var(--vt)}
.vspub .jst.en::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px;animation:vsjpulse 1.1s ease-in-out infinite}
@keyframes vsjpulse{0%,100%{opacity:1}50%{opacity:.22}}
.vspub .jd.jd-en{display:flex;align-items:center;gap:8px;color:var(--vi)}
.vspub .jd .jdn{font:600 11px/1 'JetBrains Mono',ui-monospace,monospace;background:var(--vt);border:1px solid var(--vl);border-radius:999px;padding:3px 7px}
.vspub .je.je-en{background:color-mix(in oklab,var(--vi) 5%,transparent)}
.vspub .jprog{height:3px;border-radius:99px;background:var(--ln);overflow:hidden;margin:7px 0 3px;max-width:260px}
.vspub .jprog i{display:block;height:100%;border-radius:99px;background:var(--vi);transition:width .45s ease}

/* ── Taille du colis : le choix doit se VOIR, dans les deux thèmes ──
   Le .seg standard pose un fond --pn sur un panneau --pn → sur fond blanc
   comme sur fond sombre le bouton actif ne se distinguait quasiment pas.
   Ici l'actif prend la teinte violette du produit (tokens --vio/--viot). */
.vspub .segco{background:transparent}
.vspub .segco button.on{background:var(--viot);color:var(--vio);box-shadow:inset 0 0 0 1px var(--vio);font-weight:700}
:root[data-theme="clair"] .vspub .segco{background:transparent!important}
:root[data-theme="clair"] .vspub .segco>button.on,:root[data-theme="clair"] .vspub .segco>button.on *{background:var(--viot)!important;color:var(--vio)!important}