/* =====================================================================
   vf-ecran.css — mise en page commune aux deux écrans portés depuis
   l'extension Chrome VintFlow vers le site Astro.

   ⚠️ FICHIER DE PORTAGE « COPIE EXACTE ». Toutes les valeurs ci-dessous
   sont RECOPIÉES d'un fichier source, au chiffre près. Rien n'a été
   arrondi, modernisé ni « amélioré ». Pour re-synchroniser plus tard,
   rouvrir les sources indiquées en tête de chaque bloc.

   RACINE DES SOURCES :
     /Users/quinton/Downloads/VINTFLOW-TRANSFERT/
       vinted-extension-v0_59_71_BACKUP_avant_pixelperfect/

   ⚠️ NUMÉROTATION RECALÉE LE 27/07. likes.js a été modifié à 15:47, APRÈS la
   première rédaction de ce fichier : les repères d'origine étaient décalés
   (.vhl-foot annoncé ligne 331 = 356 en réalité ; le témoin 534-535 = 575-576 ;
   le renommage du texte ligne 654 = 695). Le CONTENU, lui, est inchangé : tout a
   été re-comparé règle par règle après la modification, zéro écart de valeur.
   Re-vérifier ces repères avant tout futur diff.

   FICHIERS SOURCES UTILISÉS :
     - likes.js            lignes 65-141 : bloc <style id="vf-likes-css">
                           injecté par _vfInjectLikesCss(), portée
                           #likes-pageview.
     - likes.js            ligne  356    : .vhl-foot
     - likes.js            lignes 575-576: témoin d'auto-enregistrement
                           (styles en attribut style=, pas dans le <style>)
     - dashboard.html      lignes 479-483 : .main
     - dashboard.html      ligne  485    : .view (aucun padding — vérifié)
     - dashboard.html      ligne  788    : .pageview { padding: 24px 28px }
     - dashboard.html      ligne  5327   : <div class="pageview" id="likes-pageview">
                           (c'est CE couplage qui rend .pageview applicable)
     - dashboard.html      lignes 1619-1639 : .toast (le toast que pilote
                           showToast() de dashboard-inline.js:800)
     - dashboard-api.js    lignes 6603-6619 : showToast(), variante dont le
                           style est écrit en JS (toast.style.cssText)

   FICHIER SITE NEUTRALISÉ :
     - src/layouts/DashLayout.astro ligne 160 : .vf-page
     - src/layouts/DashLayout.astro ligne 169 : .vf-page en < 860 px

   JETONS --lk-* : définis dans src/styles/global.css (:root), eux-mêmes
   recopiés de likes.js lignes 66-72. Ce fichier les consomme, il ne les
   redéfinit pas.

   TRANSFORMATIONS APPLIQUÉES — le sélecteur de PORTÉE :
     #likes-pageview .vhl-card   ->  .vf-ecran-card
     .toast                      ->  .vf-toast
   … et UNE addition, parce que le site aplatit une imbrication de l'extension :
     .main + .pageview + .vhl-wrap  ->  .vf-page.vf-page--full
   Les trois paddings sont ADDITIONNÉS (détail et arithmétique au bloc 2). Aucun
   chiffre n'est arrondi : ce sont les valeurs sources, simplement sommées.
   L'ORDRE DES RÈGLES EST CELUI DES SOURCES : plusieurs règles se
   surchargent entre elles, ne pas les réordonner.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) Animation d'entrée des cartes
   Source : likes.js ligne 73 — @keyframes vfLkUp (nom conservé tel quel
   pour que la comparaison avec l'extension reste évidente).
   Note : l'état « invisible » vit UNIQUEMENT dans la keyframe (fill
   `both`). Aucune règle de base ne met opacity:0 — donc si l'animation
   est coupée, le contenu reste visible. C'est ce qui rend la coupure
   `prefers-reduced-motion` du bloc 3 sans danger.
   --------------------------------------------------------------------- */
@keyframes vfLkUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ---------------------------------------------------------------------
   2) .vf-page--full — page pleine largeur
   Neutralise  : .vf-page { max-width: 1080px; margin: 0 auto; padding: 30px 26px 64px; }
                 (DashLayout.astro:160)

   ⚠️⚠️ CORRIGÉ À L'AUDIT — il manquait une COUCHE de padding. La première version
   de ce fichier n'additionnait que deux niveaux (38px 46px 56px). Or l'écran Likes
   de l'extension est imbriqué sur TROIS niveaux, pas deux (vérifié dans
   dashboard.html) :

       .main      { padding: 16px 20px 24px }   dashboard.html:479-483
         .view    { aucun padding }              dashboard.html:485
           .pageview { padding: 24px 28px }      dashboard.html:788   ← OUBLIÉE
             = <div class="pageview" id="likes-pageview">  dashboard.html:5327
             .vhl-wrap { padding: 22px 26px 32px }  likes.js:77

   #likes-pageview PORTE la classe .pageview : ses 24px/28px s'ajoutent bel et bien.
   Les paddings s'additionnent donc ainsi :
       haut   16 + 24 + 22 = 62px
       côtés  20 + 28 + 26 = 74px
       bas    24 + 24 + 32 = 80px
   (l'ancienne valeur 38/46/56 était trop serrée de 24px en haut, 28px sur les
   côtés et 24px en bas — ce n'était pas une « copie exacte »).

   Sur le site, .vf-page joue à lui seul les trois rôles, d'où la somme ci-dessous.

   Le sélecteur est doublé (.vf-page.vf-page--full) UNIQUEMENT pour la
   spécificité : .vf-page est déclaré dans un <style is:global> du layout, dont
   l'ordre de chargement face à ce fichier n'est pas garanti.
   --------------------------------------------------------------------- */
.vf-page.vf-page--full {
  max-width: none;
  margin: 0;
  padding: 62px 74px 80px;
  color: var(--lk-t1);
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ GARDE-FOU AJOUTÉ À L'AUDIT (pas une règle recopiée : la même arithmétique
   lue à l'envers, avec les mêmes chiffres sources).
   a) vf-likes.css contient AUSSI un .vhl-wrap avec son padding 22px 26px 32px
      (likes.js:77). Si une page empile les deux —
      <div class="vf-page vf-page--full"><div class="vf-lk"><div class="vhl-wrap">…
      — ce niveau-là serait compté deux fois. Quand un .vhl-wrap est présent,
      .vf-page--full ne doit donc porter que .main + .pageview :
          16+24 = 40 / 20+28 = 48 / 24+24 = 48
   b) vf-ria.css pose son propre padding 18px 22px sur .vf-ria (le style en ligne de
      #reponses-ia-container, dashboard.html:6416). Ce conteneur-là n'est PAS dans un
      .pageview : il est directement dans .view (dashboard.html:6416). Autour de lui,
      il ne doit donc rester que .main : 16px 20px 24px.
   Aucun chiffre inventé : 16/20/24 = .main, 24/28 = .pageview. */
.vf-page.vf-page--full:has(.vhl-wrap) { padding: 40px 48px 48px; }
.vf-page.vf-page--full:has(.vf-ria)   { padding: 16px 20px 24px; }

/* En dessous de 860 px, on garde la règle mobile DÉJÀ EXISTANTE du site
   (DashLayout.astro:169) : l'extension n'a aucun padding mobile, on ne va donc
   pas en inventer un.
   Les deux lignes suivantes répètent la valeur pour les cas :has() : sans elles,
   les règles :has() ci-dessus (0,3,0) battraient la règle mobile (0,2,0) et le
   padding bureau resterait actif sur téléphone. */
@media (max-width: 860px) {
  .vf-page.vf-page--full { padding: 22px 16px 56px; }
  .vf-page.vf-page--full:has(.vhl-wrap) { padding: 22px 16px 56px; }
  .vf-page.vf-page--full:has(.vf-ria)   { padding: 22px 16px 56px; }
}


/* ---------------------------------------------------------------------
   3) .vf-ecran-card — la carte commune aux deux écrans
   Source : likes.js ligne 102 (#likes-pageview .vhl-card)
   --------------------------------------------------------------------- */
.vf-ecran-card {
  background: var(--lk-s1);
  border: 1px solid var(--lk-bd);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: border-color var(--lk-fast) var(--lk-ease),
              box-shadow   var(--lk-fast) var(--lk-ease),
              transform    var(--lk-fast) var(--lk-ease);
  animation: vfLkUp var(--lk-base) var(--lk-ease) both;
}

/* Survol — source : likes.js ligne 103
   (bordure bleutée + ombre portée + halo bleu + lift de 2px) */
.vf-ecran-card:hover {
  border-color: rgba(59, 130, 246, .4);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45),
              0 0 22px rgba(59, 130, 246, .13);
  transform: translateY(-2px);
}

/* Cascade d'entrée — source : likes.js lignes 104-107.
   L'extension écrit `.vhl-main > .vhl-card:nth-of-type(N)`. Ici le
   conteneur direct varie d'une page à l'autre, donc le combinateur enfant
   `>` est remplacé par un descendant. C'est la SEULE différence de
   sélecteur du fichier ; les délais sont identiques. */
.vf-page--full .vf-ecran-card:nth-of-type(1) { animation-delay: 60ms; }
.vf-page--full .vf-ecran-card:nth-of-type(2) { animation-delay: 120ms; }
.vf-page--full .vf-ecran-card:nth-of-type(3) { animation-delay: 180ms; }
.vf-page--full .vf-ecran-card:nth-of-type(4) { animation-delay: 240ms; }

/* Source : likes.js ligne 141.
   SÛR malgré « réduire les animations » ACTIVÉ sur le Mac du proprio :
   `animation: none` rend simplement la carte à son état naturel
   (opacity 1, pas de translation) — le contenu reste visible et lisible.
   Ne JAMAIS ajouter ici une règle qui masquerait du contenu. */
@media (prefers-reduced-motion: reduce) {
  .vf-ecran-card { animation: none !important; }
}


/* ---------------------------------------------------------------------
   4) .vf-toast — notification flottante (remplace le bandeau permanent)
   Source : dashboard.html lignes 1619-1639 (classe .toast), c'est-à-dire
   l'élément #toast que showToast() de dashboard-inline.js:800 fait
   apparaître en lui ajoutant la classe .show pendant 2400 ms.

   La transition PORTE LE CONTENU (le message n'existe que le temps du
   toast) : elle n'est donc PAS placée sous prefers-reduced-motion —
   conforme à la source, qui ne la coupe pas non plus.
   --------------------------------------------------------------------- */
.vf-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--blue);
  border-radius: 10px;
  padding: 12px 18px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 2000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  display: flex; align-items: center; gap: 8px;
}
.vf-toast.show { opacity: 1; transform: translateY(0); }
.vf-toast .vf-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* VARIANTE — source : dashboard-api.js lignes 6608-6615, où showToast()
   construit un <div id="vh-toast"> et lui pose ce style.cssText en JS
   (pas de classe CSS dans le dépôt). Reproduite telle quelle au cas où
   c'est CE toast-là qui est attendu : il est en HAUT À DROITE, plein
   (bleu, ou rouge si type === 'error'), sans transition, retiré au bout
   de 5000 ms. Les deux existent dans l'extension — choisir, ne pas
   fusionner. */
.vf-toast--api {
  position: fixed; top: 16px; right: 16px; z-index: 99999;
  padding: 10px 14px; border-radius: 6px;
  background: #3B82F6;
  color: white; font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 350px;
}
.vf-toast--api.is-error { background: #EF4444; }


/* ---------------------------------------------------------------------
   5) .vf-saved — témoin « ✓ Enregistré automatiquement »
   Source : likes.js ligne 534 <div class="vhl-foot" style="align-items:center;">
            likes.js ligne 331 .vhl-foot { ... }
            likes.js ligne 535 <span id="vhl-autosave" style="...">

   Dans l'extension c'est une ligne alignée à DROITE (.vhl-foot) qui
   contient un span avec une coche SVG verte. Après 600 ms de debounce, le
   JS (likes.js ligne 654) remplace tout le contenu du span par le texte
   « ✓ Enregistré automatiquement » — la coche devient alors un simple
   caractère, d'où la couleur du SVG donnée séparément ci-dessous.
   --------------------------------------------------------------------- */

/* .vhl-foot (likes.js:331) + le align-items:center posé en attribut style
   sur cette instance précise (likes.js:534) */
.vf-saved-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}

/* le span #vhl-autosave lui-même (likes.js:535) */
.vf-saved {
  font-size: 11.5px;
  color: #8b96ad;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* La coche SVG du témoin (attributs de <svg> à la ligne 535 :
   width/height 13, stroke #22c55e, stroke-width 2.5, fill none,
   linecap/linejoin round). Repris en CSS pour que le SVG du site n'ait
   pas à les redéclarer en attributs. */
.vf-saved svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #22c55e;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══════════════════════════════════════════════════════════════════════════
   AJOUTS PROPRES AU SITE (absents de l'extension, et pourquoi)
   ─────────────────────────────────────────────────────────────────────────
   L'extension édite les réglages du compte qu'elle pilote — elle n'a donc
   pas à en choisir un. Le site, lui, édite un jeu de réglages PAR compte
   Vinted : il lui faut un sélecteur. Le style reprend les tokens de
   l'extension pour ne pas dépareiller.
   ══════════════════════════════════════════════════════════════════════════ */
.vf-ecran-acct {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px; padding: 10px 12px;
  background: var(--lk-s1); border: 1px solid var(--lk-bd); border-radius: 12px;
}
.vf-ecran-acct .lbl {
  margin-right: 4px; font-size: 12px; font-weight: 600; color: var(--lk-t3);
}
.vf-ecran-acct-b {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px;
  background: transparent; border: 1px solid var(--border); border-radius: 9999px;
  font-size: 13px; font-weight: 600; color: var(--lk-t2);
  cursor: pointer; transition: all .2s var(--lk-ease);
}
/* 🚫 Compte suspendu — visible mais jamais compté (07/08).
   Le retirer de la liste laisserait croire qu'il a disparu ; le laisser sans marque
   laisse croire qu'il fonctionne. On le montre, et on dit son état.
   ⚠️ Pas de `transition` sur `color` ni `background` : quand la valeur vient d'un jeton
   de thème, elle se fige au changement de thème (défaut mesuré à 1,04:1 ce soir). */
.vf-ecran-acct-sus {
  margin-left: 2px; padding: 1px 6px; border-radius: 9999px;
  background: rgba(244, 63, 94, .14); color: #fda4af;
  font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .02em;
}
:root[data-theme="light"] .vf-ecran-acct-sus { background: rgba(190, 18, 60, .10); color: #be123c; }
/* Un compte suspendu ne « brille » pas au survol comme un compte utilisable. */
.vf-ecran-acct-b:has(.vf-ecran-acct-sus) { opacity: .72; }

.vf-ecran-acct-b:hover { border-color: rgba(59, 130, 246, .4); color: var(--lk-t1); }
.vf-ecran-acct-b:active { transform: scale(.97); }
.vf-ecran-acct-b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vf-ecran-acct-b.on {
  background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .5); color: #93C5FD;
}
.vf-ecran-acct-b img,
.vf-ecran-acct-b i {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--bg-mute-2); font-style: normal; font-size: 10px; font-weight: 800; color: var(--lk-t2);
}

.vf-ecran-load {
  padding: 40px; text-align: center; font-size: 13px; color: var(--lk-t3);
}
/* Quand la zone porte un SQUELETTE (07/08), elle n'est plus un mot centré au milieu de
   40 px de vide : c'est la forme du contenu à venir, qui occupe la même place que lui. */
.vf-ecran-load:has(.vf-sk) { padding: 0; text-align: left; }

/* Le témoin d'enregistrement automatique a trois états : au repos (il rappelle simplement
   que rien n'est à cliquer), pendant l'envoi, et confirmé. */
.vf-saved.en-cours { color: var(--lk-t3); }
.vf-saved.en-cours svg { opacity: .35; }
.vf-saved.ok svg { opacity: 1; }


/* ══════════════════════════════════════════════════════════════════════════
   MODE CLAIR (ajout du 06/08, purement additif)
   ─────────────────────────────────────────────────────────────────────────
   RÈGLE DE SÛRETÉ : chaque sélecteur ci-dessous commence par
   :root[data-theme="light"]. Tant que <html> ne porte pas cet attribut, AUCUNE
   de ces règles ne peut correspondre — la « copie exacte » du mode sombre
   au-dessus est donc intouchée STRUCTURELLEMENT, sans avoir à la re-prouver
   règle par règle. Rien au-dessus de ce commentaire n'a été modifié, et les
   repères de source restent donc valables pour un futur diff.

   MÊME MÉTHODE que vf-likes.css (bloc 3) et vf-ria.css (bloc 7) :
     A. on rebranche les jetons --lk-* sur les jetons de thème du site ;
     B. on reprend une par une les valeurs en dur qu'aucune variable n'atteint.

   ⚠️ POURQUOI LE POINT A EST VITAL ICI : `.vf-page.vf-page--full` pose
   `color: var(--lk-t1)`, et --lk-t1 vaut rgba(255,255,255,.92). Sans le bloc
   ci-dessous, TOUT le texte des deux écrans serait BLANC SUR BLANC.
   ══════════════════════════════════════════════════════════════════════════ */

/* ===== A. Les jetons --lk-* rebranchés ====================================
   Ils sont déclarés dans global.css sur `:root` (0,1,0) ; ce sélecteur-ci fait
   (0,3,0) et l'emporte donc quel que soit l'ordre de chargement des feuilles.

   ⚠️ VALEURS IDENTIQUES À CELLES DE vf-likes.css (bloc 3-A), volontairement :
   les deux écrans partagent la même coque, ils ne doivent pas dépareiller d'un
   demi-ton. Si l'un des deux fichiers bouge, changer l'autre en même temps.

   La liste porte AUSSI sur les composants eux-mêmes et pas seulement sur la
   page : le témoin d'enregistrement ou la barre de comptes peuvent être rendus
   hors de .vf-page--full selon la page. Redéclarer les mêmes valeurs à deux
   niveaux est sans effet de bord — c'est la même valeur.
   (Le cas .vf-lk est déjà couvert par vf-likes.css, qui pose ses propres
   --lk-* sur .vf-lk : une déclaration portée par l'élément lui-même l'emporte
   toujours sur une valeur héritée du parent, il n'y a donc pas de conflit.) */
:root[data-theme="light"] .vf-page.vf-page--full,
:root[data-theme="light"] .vf-ecran-card,
:root[data-theme="light"] .vf-ecran-acct,
:root[data-theme="light"] .vf-ecran-load,
:root[data-theme="light"] .vf-saved{
  --lk-s1: var(--vf-surface, #ffffff);      /* fond de carte */
  --lk-s2: var(--vf-surface-2, #f1f3f6);    /* fond de champ */
  --lk-s3: var(--vf-surface-3, #e5e8ee);    /* piste d'interrupteur */
  /* En sombre, les bordures sont du BLANC dilué : sur fond clair elles
     disparaissent complètement. On passe sur un gris plein, sinon la carte n'a
     plus aucun contour. */
  --lk-bd:   var(--vf-border, #dfe3ea);
  --lk-bd-2: rgba(15, 23, 42, .14);
  --lk-t1: var(--vf-text, #0f1115);         /* texte principal */
  --lk-t2: var(--vf-text-2, #55606f);       /* 6,4:1 sur blanc */
  /* --lk-t3 sert aux libellés et au message de chargement, en 12-13 px :
     le gris du sombre y donnerait 2,4:1. */
  --lk-t3: var(--vf-text-3, #5f6773);
  /* Bleu d'aplat : #3B82F6 ne fait que 3,68:1 sur blanc, #2563eb en fait 5,2:1.
     Même teinte, juste assombrie. */
  --lk-blue: var(--vf-accent, #2563eb);
  --lk-glow: rgba(37, 99, 235, .25);
}


/* ===== B1. La carte commune ===============================================
   Les couleurs viennent des jetons ci-dessus ; il ne reste que les ombres, qui
   sont en dur. Une ombre noire à 40-45 % sur fond clair ne fait pas une ombre,
   elle fait une tache sale sous la carte. */
:root[data-theme="light"] .vf-ecran-card{
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
:root[data-theme="light"] .vf-ecran-card:hover{
  border-color: rgba(37, 99, 235, .45);
  box-shadow: 0 8px 26px rgba(15, 23, 42, .10),
              0 0 22px rgba(37, 99, 235, .10);
}


/* ===== B2. Les deux toasts ================================================
   ⚠️ Le toast est en position:fixed et peut être rendu hors de la page : il
   n'utilise pas les --lk-*, mais --bg-card / --blue, déjà rebranchés par
   global.css. Reste sa couleur de texte, écrite #FFFFFF EN DUR — sur une carte
   devenue blanche, le message serait invisible. */
:root[data-theme="light"] .vf-toast{
  color: var(--vf-text, #0f1115);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}
/* Variante « api » : aplat plein avec du texte blanc dessus. #3B82F6 sous du
   blanc ne donne que 3,68:1 — échec pour du 13 px. #2563eb donne 5,2:1. */
:root[data-theme="light"] .vf-toast--api{
  background: var(--vf-accent, #2563eb);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .14);
}
/* 🔴 COULEUR DE SENS — le toast d'erreur. Le rouge dit « ça a raté » : il garde
   sa teinte. #EF4444 sous du blanc ne fait que 3,76:1 ; #dc2626 monte à 4,83:1. */
:root[data-theme="light"] .vf-toast--api.is-error{
  background: var(--vf-danger, #dc2626);
}


/* ===== B3. Témoin « ✓ Enregistré automatiquement » ========================
   #8b96ad en 11,5 px sur blanc ne donne que 2,9:1. */
:root[data-theme="light"] .vf-saved{ color: var(--vf-text-2, #55606f); }
/* 🟢 COULEUR DE SENS — la coche VERTE dit « c'est enregistré ». Elle reste
   verte. #22c55e est calibré pour le fond noir : sur blanc il tombe à 1,9:1,
   très en dessous des 3:1 exigés pour un tracé non textuel. #047857 tient
   5,3:1 et reste reconnaissable comme le même vert. */
:root[data-theme="light"] .vf-saved svg{ stroke: var(--vf-success-ink, #047857); }


/* ===== B4. Sélecteur de compte Vinted =====================================
   Fond, bordure et texte au repos viennent des jetons ; restent les états. */
:root[data-theme="light"] .vf-ecran-acct-b:hover{
  border-color: rgba(37, 99, 235, .45);
}
/* Compte actif : #93C5FD est un bleu pâle fait pour le fond noir — sur le lavis
   clair il tombe à 1,8:1 et le nom du compte sélectionné devient illisible.
   On passe au bleu « encre » (#1d4ed8, 7,4:1) : même teinte, lisible. */
:root[data-theme="light"] .vf-ecran-acct-b.on{
  background: var(--vf-accent-wash, rgba(37, 99, 235, .10));
  border-color: rgba(37, 99, 235, .50);
  color: var(--vf-accent-ink, #1d4ed8);
}

/* 🌞 (06/08) ⚠️ PIÈGE DE SPÉCIFICITÉ. La surcharge claire `.vf-toast` (0,3,0)
   l'emportait sur `.vf-toast--api { color: white }` (0,1,0) : le bandeau bleu
   d'information affichait donc du texte presque noir sur bleu foncé.
   Un aplat de couleur garde son texte blanc dans les deux thèmes. */
:root[data-theme="light"] .vf-toast--api { color: #ffffff; }