/* ============================================================================
   vf-ria.css — COPIE EXACTE du CSS de l'écran « Réponses IA » de l'extension
   ----------------------------------------------------------------------------
   SOURCE UNIQUE :
     /Users/quinton/Downloads/VINTFLOW-TRANSFERT/
       vinted-extension-v0_59_71_BACKUP_avant_pixelperfect/dashboard-api.js
     fonction renderReponsesIa() — lignes 17602 à 18310.
   SOURCE SECONDAIRE (variables + reset + police + padding du conteneur) :
       …/vinted-extension-v0_59_71_BACKUP_avant_pixelperfect/dashboard.html
     lignes 12-39 (:root), 41 (reset), 48-56 (html/body), 6416 (le conteneur).

   renderReponsesIa() injecte TROIS feuilles <style>. Elles sont recopiées ici
   DANS LEUR ORDRE D'INJECTION RÉEL DANS LE DOM (pas dans l'ordre où elles sont
   déclarées dans le fichier) — cf. dashboard-api.js:17971-17974 :

       box.innerHTML = RIA_PHONE_CSS + RIA_WOW_CSS + RIA_HERO_HTML
                     + '<div class="vhl-layout"><div class="vhl-main">'
                     + settingsHtml            // settingsHtml COMMENCE par RIA_CSS
                     + …

     BLOC 1 = <style id="ria-phone-css">   dashboard-api.js, lignes 17854-17901
     BLOC 2 = <style id="vf-ria-wow-css">  dashboard-api.js, lignes 17949-17969
     BLOC 3 = <style id="ria-css">         dashboard-api.js, lignes 17632-17653
              (déclaré en premier dans le fichier, mais injecté en DERNIER
               car il est collé en tête de settingsHtml, à l'intérieur de
               .vhl-main — ligne 17829)

   PORTÉE :
     Le sélecteur #reponses-ia-container de la source devient .vf-ria.
     Les règles du BLOC 3, globales dans l'extension (.vh-sw, .ria-trash, …),
     reçoivent le même préfixe .vf-ria pour ne pas fuir sur le reste du site.
     Le préfixe étant appliqué UNIFORMÉMENT, la hiérarchie de la cascade est
     conservée : chaque sélecteur gagne +0,1,0 de spécificité, donc les
     rapports de force entre règles sont inchangés.
     Les classes .ria-* , .vhl-* et .vh-sw gardent leur nom d'origine.

   BLOC 4 (le plus gros) : dans l'extension, la quasi-totalité des composants
   (pilules de jours, onglets d'état, cartes de mode, menu déroulant maison,
   accordéon des situations, modale de confirmation, bandeau de verrouillage…)
   n'est PAS dans les feuilles <style> : elle est écrite en attributs
   style="…" directement dans le HTML généré. Ces déclarations sont recopiées
   ici, valeur par valeur, sous forme de règles de classe ; le numéro de ligne
   exact est indiqué au-dessus de chaque groupe.
   Le BLOC 4 est placé APRÈS le BLOC 3 volontairement : dans l'extension un
   attribut style="…" bat toutes les feuilles, et les règles du BLOC 3 qui
   doivent quand même gagner (survols, ouverture, etc.) le font soit par
   !important, soit par un sélecteur d'id, soit par une pseudo-classe qui
   ajoute de la spécificité. La cascade obtenue est donc identique.

   ÉTATS : l'extension pilote les états en réécrivant les styles en ligne
   (el.style.background = …). Sur le site, ces états sont exprimés par des
   classes / attributs ; les VALEURS, elles, sont celles de la source :
     .ria-day[data-on="1"]   (attribut data-on déjà posé par la source — ligne 17710)
     .ria-etat-tab.is-active (source : lignes 18033-18035)
     .ria-mode.is-sel        (source : lignes 18045-18046)
     .ria-vouv.is-sel        (source : lignes 18054-18055)
     .ria-dd-opt.is-sel      (source : lignes 17747, 18092-18093)
     .ria-comp-lab.is-sel    (source : lignes 17769, 18067-18068)
     .ria-sit.is-open        (source : lignes 18136, 18157)
     .vf-ria.is-locked       (source : ligne 18202)

   NE RIEN « AMÉLIORER » ICI. Toute valeur doit rester traçable à la source.
   Pour re-synchroniser : rouvrir dashboard-api.js aux lignes indiquées.

   OMISSIONS ASSUMÉES :
     • .vf-ria-hero / .vf-ria-hero::before / ::after / .vf-ria-hero h1 / p ,
       .vf-ria-eyebrow , .vf-ria-train-cta (+ :hover/:active)
       → RIA_HERO_HTML = '' (dashboard-api.js:17970) : le héros a été retiré.
       Les sélecteurs .vf-ria-hero ont donc aussi été retirés de la media query
       prefers-reduced-motion (il ne reste que .vf-ria-card).
       Les @keyframes vfRiaHero / vfRiaShine / vfRiaBreathe sont CONSERVÉS tels
       quels (consigne explicite) même s'ils ne servaient qu'au héros.
     • le bandeau « tes réponses ont été modifiées depuis le site »
       (dashboard-api.js:18300-18307) — hors périmètre demandé.
   ============================================================================ */


/* ############################################################################
   BLOC 0 — socle repris de dashboard.html (indispensable au rendu au pixel)
   ############################################################################ */

/* dashboard.html, :root lignes 12-28 — seules les 7 variables réellement
   utilisées par l'écran Réponses IA sont reprises. Si le site définit déjà
   ces variables AVEC LES MÊMES VALEURS, ce bloc est redondant mais inoffensif. */
.vf-ria{
  --blue:    #3B82F6;
  --bg-card: #161616;
  --bg-mute: #1F1F1F;
  --border:  #2A2A2A;
  --text-1:  #FFFFFF;
  --text-2:  #9CA3AF;
  --text-3:  #6B7280;
}

/* dashboard.html:41 — `* { box-sizing: border-box; margin: 0; padding: 0; }`
   Sans ce reset, les width:100% + padding des champs ne tombent pas juste. */
.vf-ria, .vf-ria *{box-sizing:border-box;margin:0;padding:0}

/* dashboard.html:48-56 (html, body) + dashboard.html:6416 (style en ligne du
   conteneur #reponses-ia-container : padding:18px 22px;max-width:none;width:100%)

   ⚠️ CE PADDING N'EST QUE LE DERNIER NIVEAU (vérifié à l'audit). Dans l'extension,
   #reponses-ia-container est un enfant direct de `<div class="view">`
   (dashboard.html:6416), lui-même dans `.main { padding: 16px 20px 24px }`
   (dashboard.html:479-483). .view n'a AUCUN padding (dashboard.html:485), et — à la
   différence de l'écran Likes — ce conteneur-ci n'est PAS dans un .pageview.
   Le total réel autour du contenu est donc 16+18 / 20+22 / 24+18 = 34 / 42 / 42.
   La page du site doit donc fournir les 16px 20px 24px manquants sur son conteneur
   extérieur ; public/vf-ecran.css le fait déjà avec
       .vf-page.vf-page--full:has(.vf-ria) { padding: 16px 20px 24px; }
   Ne PAS ajouter ces 16/20/24 ici : ils seraient comptés deux fois. */
.vf-ria{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  font-size:14px;
  line-height:1.4;
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:18px 22px;
  max-width:none;
  width:100%;
}


/* ############################################################################
   BLOC 1 — feuille <style id="ria-phone-css">
   dashboard-api.js, lignes 17854-17901 (RIA_PHONE_CSS)
   Grille « réglages à gauche / iPhone à droite » + toute la maquette iPhone.
   ############################################################################ */

.vf-ria .vhl-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:stretch}
.vf-ria .vhl-main{min-width:0}
.vf-ria .vhl-aside{position:relative}
.vf-ria .vhl-phone-sticky{position:sticky;top:18px}
@media (max-width:1100px){.vf-ria .vhl-layout{grid-template-columns:1fr}.vf-ria .vhl-aside{display:none}}
.vf-ria .vhl-phone{position:relative;width:284px;margin:0 auto;background:linear-gradient(135deg,#303236 0%,#1c1e22 42%,#141519 100%);border-radius:56px;padding:12px;box-shadow:0 20px 46px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.05)}
.vf-ria .vhl-screen{position:relative;border-radius:44px;overflow:hidden;background:#0a0a0c;height:600px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.vf-ria .vhl-island{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:76px;height:25px;background:#000;border-radius:15px;z-index:5}
.vf-ria .vhl-phone-status{display:flex;justify-content:space-between;align-items:center;padding:17px 26px 5px;font-size:12px;font-weight:700;color:#fff}
.vf-ria .vhl-ph-hd{display:flex;align-items:center;gap:9px;padding:5px 12px 9px;border-bottom:1px solid #1c1c1f}
.vf-ria .vhl-ph-back{color:#cfcfd4;font-size:21px;line-height:1}
.vf-ria .vhl-ph-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a855f7);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:700;flex:0 0 auto}
.vf-ria .vhl-ph-name{flex:1;font-size:14px;font-weight:700;color:#fff;line-height:1.15}
.vf-ria .vhl-ph-name small{display:block;font-size:10px;color:#22c55e;font-weight:600}
.vf-ria .vhl-ph-info{color:#9aa0ab;display:flex}
.vf-ria .vhl-ph-item{margin:10px;background:#161618;border:1px solid #232326;border-radius:12px;padding:10px}
.vf-ria .vhl-ph-item-top{display:flex;gap:10px;align-items:center}
.vf-ria .vhl-ph-thumb{width:42px;height:42px;border-radius:8px;background:#e9e9ec;display:flex;align-items:center;justify-content:center;font-size:21px;flex:0 0 auto}
.vf-ria .vhl-ph-item-title{flex:1;font-size:12px;color:#fff;font-weight:600;line-height:1.25}
.vf-ria .vhl-ph-item-price{font-size:14px;color:#fff;font-weight:800;white-space:nowrap}
.vf-ria .vhl-ph-actions{display:flex;gap:8px;margin-top:10px}
.vf-ria .vhl-ph-btn{flex:1;text-align:center;font-size:12px;font-weight:700;padding:8px 0;border-radius:8px}
.vf-ria .vhl-ph-btn.outline{background:transparent;border:1px solid #3a3a3e;color:#fff}
.vf-ria .vhl-ph-btn.buy{background:#0AB5C0;color:#fff}
.vf-ria .vhl-ph-body{flex:1;padding:8px 12px 10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:none}
.vf-ria .vhl-ph-body::-webkit-scrollbar{display:none}
.vf-ria .vhl-ph-bub{max-width:80%;padding:9px 12px;border-radius:16px;font-size:12px;line-height:1.4;white-space:pre-wrap}
.vf-ria .vhl-ph-bub.recv{background:#1f1f22;color:#e6e6e8;align-self:flex-start;border-bottom-left-radius:5px}
.vf-ria .vhl-ph-bub.sent{background:#0AB5C0;color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.vf-ria .vhl-ph-sold{align-self:center;font-size:10.5px;color:#22c55e;font-weight:700;background:#11210f;border:1px solid #22c55e44;border-radius:999px;padding:5px 13px;text-align:center}
.vf-ria .vhl-ph-offercard{align-self:flex-end;background:#0f1a1b;border:1.5px solid #0AB5C0;border-radius:14px;padding:9px 13px;max-width:80%;min-width:128px;border-bottom-right-radius:5px}
.vf-ria .vhl-ph-offercard .badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:#2dd4d8;margin-bottom:5px}
.vf-ria .vhl-ph-offercard .price b{font-size:17px;font-weight:800;color:#fff}
.vf-ria .vhl-ph-offercard .price s{font-size:12px;font-weight:600;color:#7a8a8b;margin-left:7px}
/* ⚠️⚠️ CONTENU MASQUÉ PAR DÉFAUT — LIRE AVANT D'INTÉGRER LA PAGE ⚠️⚠️
   La règle ci-dessous (recopiée telle quelle, dashboard-api.js:17892) met TOUS les
   enfants de .vhl-ph-body à opacity:0. Dans l'extension, la fonction playRiaPhone()
   (dashboard-api.js:17982 et suivantes) ajoute la classe .show bulle par bulle : sans
   ce JS, l'écran de l'iPhone reste NOIR ET VIDE, définitivement.
   Deux options côté site, au choix :
     a) porter playRiaPhone() ;
     b) écrire la maquette avec class="vhl-ph-bub recv show" (le .show en dur).
   Ne PAS supprimer la règle : elle porte l'animation de la démo. */
.vf-ria .vhl-ph-body > *{opacity:0;transform:translateY(9px) scale(.98);transition:opacity .4s ease,transform .4s ease}
.vf-ria .vhl-ph-body > *.show{opacity:1;transform:none}
.vf-ria .vhl-ph-typing{align-self:flex-start;background:#1f1f22;border-radius:16px;border-bottom-left-radius:5px;padding:11px 14px;display:flex;gap:5px}
.vf-ria .vhl-ph-typing span{width:7px;height:7px;border-radius:50%;background:#8b8b90;animation:ria-ph-typing 1.3s infinite}
.vf-ria .vhl-ph-typing span:nth-child(2){animation-delay:.18s}
.vf-ria .vhl-ph-typing span:nth-child(3){animation-delay:.36s}
@keyframes ria-ph-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.vf-ria .vhl-ph-input{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #1c1c1f}
.vf-ria .vhl-ph-input .pic{color:#9aa0ab;display:flex}
.vf-ria .vhl-ph-input .field{flex:1;background:#161618;border:1px solid #232326;border-radius:999px;padding:7px 13px;font-size:11px;color:#6b6b70}
.vf-ria .vhl-ph-send{width:26px;height:26px;border-radius:50%;background:#0AB5C0;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.vf-ria .vhl-phone-cap{text-align:center;font-size:11.5px;color:#8b96ad;margin:12px 4px 0;line-height:1.5}


/* ############################################################################
   BLOC 2 — feuille <style id="vf-ria-wow-css">
   dashboard-api.js, lignes 17949-17969 (RIA_WOW_CSS)
   Cartes animées « comme les Likes ». Le héros est omis (RIA_HERO_HTML = '').
   ############################################################################ */

@keyframes vfRiaUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes vfRiaHero{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes vfRiaBreathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes vfRiaShine{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
/* (lignes 17954-17963 : .vf-ria-hero, ::after, ::before, > *, .vf-ria-eyebrow,
    h1, p, .vf-ria-train-cta et ses :hover/:active — NON COPIÉES, héros retiré) */
.vf-ria .vf-ria-card{background:#1A1A1D;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:20px 22px;margin:0 0 14px;box-shadow:0 1px 2px rgba(0,0,0,.4);transition:border-color .15s cubic-bezier(.16,1,.3,1),box-shadow .15s cubic-bezier(.16,1,.3,1),transform .15s cubic-bezier(.16,1,.3,1);animation:vfRiaUp .34s cubic-bezier(.16,1,.3,1) both;}
.vf-ria .vf-ria-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);}
.vf-ria .vf-ria-ctt{font-size:16px;line-height:24px;font-weight:600;color:rgba(255,255,255,.92);}
.vf-ria .vf-ria-cds{font-size:14px;line-height:20px;color:rgba(255,255,255,.6);margin:2px 0 16px;}
@media (prefers-reduced-motion:reduce){.vf-ria .vf-ria-card{animation:none!important}}


/* ############################################################################
   BLOC 3 — feuille <style id="ria-css">
   dashboard-api.js, lignes 17632-17653 (RIA_CSS)
   Injectée EN DERNIER dans le DOM (en tête de settingsHtml, ligne 17829).
   Interrupteurs bleus 46×26, poubelle, survols des pilules et des cartes.
   ############################################################################ */

.vf-ria .vh-sw{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto}
.vf-ria .vh-sw input{opacity:0;width:0;height:0;position:absolute;margin:0}
.vf-ria .vh-sw .vh-sl{position:absolute;inset:0;background:var(--bg-mute);border:1px solid var(--border);border-radius:999px;transition:.2s;cursor:pointer}
.vf-ria .vh-sw .vh-sl:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.vf-ria .vh-sw input:checked + .vh-sl{background:var(--blue);border-color:var(--blue)}
.vf-ria .vh-sw input:checked + .vh-sl:before{transform:translateX(20px)}
.vf-ria .vh-sw input:disabled + .vh-sl{opacity:.5;cursor:not-allowed}
.vf-ria .ria-trash{background:transparent;border:1px solid var(--border);color:var(--text-3);cursor:pointer;padding:6px;border-radius:8px;display:inline-flex;align-items:center;transition:.15s}
.vf-ria .ria-trash:hover{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,.08)}
.vf-ria .ria-day,.vf-ria .ria-etat-tab{transition:background .15s,border-color .15s,color .15s,transform .08s}
.vf-ria .ria-day:hover,.vf-ria .ria-etat-tab:hover{border-color:var(--blue) !important}
.vf-ria .ria-day:active,.vf-ria .ria-etat-tab:active{transform:scale(.95)}
.vf-ria .ria-mode,.vf-ria .ria-vouv,.vf-ria .ria-dd-btn{transition:border-color .15s,box-shadow .15s}
.vf-ria .ria-mode:hover,.vf-ria .ria-vouv:hover,.vf-ria .ria-dd-btn:hover{border-color:var(--blue) !important}
.vf-ria .ria-dd-opt{transition:background .12s}
.vf-ria .ria-dd-opt:hover{background:rgba(59,130,246,.14) !important}
.vf-ria #ria-add-sit:hover,.vf-ria #ria-relance-add:hover{border-color:var(--blue) !important;color:var(--blue) !important}
.vf-ria #ria-save{transition:filter .15s} .vf-ria #ria-save:hover{filter:brightness(1.12)}
.vf-ria .ria-sit-head:hover{background:rgba(59,130,246,.06)}
.vf-ria input[type=range].ria-comp{accent-color:var(--blue);height:6px;cursor:pointer}


/* ############################################################################
   BLOC 4 — styles EN LIGNE de renderReponsesIa() convertis en règles
   Chaque groupe indique la ligne exacte de dashboard-api.js d'où il vient.
   Aucune valeur n'a été arrondie, ajoutée ni supprimée.
   ############################################################################ */

/* ---- Champs de saisie -----------------------------------------------------
   taStyle    → ligne 17628 (textarea, resize:vertical)
   inputStyle → ligne 17630 (input texte, sans resize)
   Utilisés par : ria_mesures / ria_authenticite / ria_photoPortee /
   ria_genphoto_msg / ria_contexte / ria-etat-ta / .ria-sit-resp /
   .ria-sit-ctx / .ria-sit-kw / les messages de relance / ria_relance_unpaid. */
.vf-ria .ria-ta{width:100%;background:var(--bg-mute);color:var(--text-1);border:1px solid var(--border);border-radius:10px;padding:11px;font:inherit;resize:vertical}
.vf-ria .ria-input{width:100%;background:var(--bg-mute);color:var(--text-1);border:1px solid var(--border);border-radius:10px;padding:11px;font:inherit}

/* ---- Titres de section (hors carte) ---------------------------------------
   « Comportement de l'IA » 17838-17839, « Situations personnalisées » 17844-17845,
   « Relance automatique » 17847-17848. Les trois paires sont identiques. */
.vf-ria .ria-section-title{font-size:18px;font-weight:700;margin:30px 0 4px}
.vf-ria .ria-section-sub{color:var(--text-2);font-size:13px;margin-bottom:6px}

/* ---- Jours d'expédition : les 7 pilules ------------------------------------
   conteneur ligne 17707 ; bouton ligne 17710.
   État actif = attribut data-on="1", déjà posé par la source (17710, 18018). */
.vf-ria .ria-days{display:flex;gap:8px;flex-wrap:wrap}
.vf-ria .ria-day{flex:1 1 auto;min-width:64px;padding:11px 6px;border-radius:999px;border:1px solid var(--border);background:var(--bg-mute);color:var(--text-2);font-weight:600;cursor:pointer}
.vf-ria .ria-day[data-on="1"]{border-color:var(--blue);background:var(--blue);color:#fff}

/* ---- État de l'article : les 5 pilules d'onglet ----------------------------
   conteneur ligne 17715 ; bouton ligne 17718 ; libellé + zone de texte 17721.
   Au rendu, c'est la 3e pille (« Très bon état ») qui porte .is-active
   (source : `const a = i === 2;` ligne 17717). Bascule : lignes 18033-18035. */
.vf-ria .ria-etats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.vf-ria .ria-etat-tab{padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:var(--bg-mute);color:var(--text-2);font-weight:600;font-size:13px;cursor:pointer}
.vf-ria .ria-etat-tab.is-active{border-color:var(--blue);background:var(--blue);color:#fff}
.vf-ria #ria-etat-label{font-size:13px;color:var(--text-2);margin-bottom:6px}
.vf-ria #ria-etat-label b{color:var(--text-1)}

/* ---- Mode de réponse : 2 cartes avec la coche bleue ------------------------
   conteneur ligne 17729 ; carte 17725 ; coche 17726 ; titre 17727 ; texte 17728.
   Sélection : lignes 18045-18046 (borderColor + opacity de la coche). */
.vf-ria .ria-modes{display:flex;gap:10px;flex-wrap:wrap}
.vf-ria .ria-mode{flex:1 1 220px;background:var(--bg-mute);border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;position:relative}
.vf-ria .ria-mode.is-sel{border-color:var(--blue)}
.vf-ria .ria-mode-check{position:absolute;top:10px;right:12px;color:var(--blue);opacity:0}
.vf-ria .ria-mode.is-sel .ria-mode-check{opacity:1}
.vf-ria .ria-mode-t{font-weight:700;margin-bottom:4px}
.vf-ria .ria-mode-d{color:var(--text-2);font-size:12.5px;line-height:1.45}

/* ---- Tutoiement / Vouvoiement : 3 cartes -----------------------------------
   conteneur ligne 17738 ; carte 17735 ; titre 17736 ; sous-titre 17737.
   Sélection : lignes 18054-18055. */
.vf-ria .ria-vouvs{display:flex;gap:10px;flex-wrap:wrap}
.vf-ria .ria-vouv{flex:1 1 140px;text-align:center;background:var(--bg-mute);border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer}
.vf-ria .ria-vouv.is-sel{border-color:var(--blue)}
.vf-ria .ria-vouv-t{font-weight:700;color:var(--text-1)}
.vf-ria .ria-vouv.is-sel .ria-vouv-t{color:var(--blue)}
.vf-ria .ria-vouv-s{color:var(--text-3);font-size:12px;margin-top:2px}

/* ---- Menu déroulant maison (ddHtml, lignes 17744-17753) --------------------
   Utilisé deux fois : #ria-langue (10 langues) et #ria-perso-sel (6 tons).
   .ria-dd-menu est masqué par défaut (display:none, ligne 17752) ; le JS le
   passe à `block` à l'ouverture. Option sélectionnée : ligne 17747.
   Description de la personnalité : ligne 17757. */
.vf-ria .ria-dd{position:relative}
.vf-ria .ria-dd-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--bg-mute);color:var(--text-1);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font:inherit;cursor:pointer}
.vf-ria .ria-dd-caret{color:var(--text-3);font-size:12px}
.vf-ria .ria-dd-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:6px;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,0.3);max-height:300px;overflow:auto}
.vf-ria .ria-dd-opt{padding:10px 12px;cursor:pointer;border-radius:8px;font-size:14px;background:transparent;color:var(--text-1)}
.vf-ria .ria-dd-opt.is-sel{background:rgba(59,130,246,0.12);color:var(--blue)}
.vf-ria #ria-perso-desc{color:var(--text-3);font-size:12.5px;margin-top:8px}

/* ---- Comportement : curseur + 5 étiquettes positionnées --------------------
   curseur ligne 17772 ; rail des étiquettes 17773 ; étiquette 17769 ;
   description 17774.
   Positions : source lignes 17766-17768 avec compN = 5 (COMPS, ligne 17622).
     i=0            → left:0;transform:none
     i=compN-1 (4)  → left:auto;right:0;transform:none
     sinon          → left:calc(8px + i/(compN-1) * (100% - 16px));
                      transform:translateX(-50%)
   soit 0.25 / 0.5 / 0.75 pour i = 1 / 2 / 3. Les valeurs ci-dessous sont
   EXACTEMENT les chaînes produites par le gabarit. */
.vf-ria .ria-comp{width:100%;margin-top:4px}
.vf-ria .ria-comp-labs{position:relative;height:16px;margin-top:10px}
.vf-ria .ria-comp-lab{position:absolute;white-space:nowrap;font-size:11.5px;font-weight:400;color:var(--text-3)}
.vf-ria .ria-comp-lab[data-i="0"]{left:0;transform:none}
.vf-ria .ria-comp-lab[data-i="1"]{left:calc(8px + 0.25 * (100% - 16px));transform:translateX(-50%)}
.vf-ria .ria-comp-lab[data-i="2"]{left:calc(8px + 0.5 * (100% - 16px));transform:translateX(-50%)}
.vf-ria .ria-comp-lab[data-i="3"]{left:calc(8px + 0.75 * (100% - 16px));transform:translateX(-50%)}
.vf-ria .ria-comp-lab[data-i="4"]{left:auto;right:0;transform:none}
.vf-ria .ria-comp-lab.is-sel{font-weight:700;color:var(--blue)}
.vf-ria #ria-comp-desc{color:var(--text-3);font-size:12.5px;margin-top:14px}

/* ---- Situations personnalisées : l'accordéon (sitBlock, lignes 17676-17705)
   cadre 17679 ; en-tête 17680 ; nom + numéro 17681 ; actions 17682 ;
   chevron 17684 ; corps 17687 ; libellés 17688 / 17690 / 17693 ; aide 17692 ;
   lignes à interrupteur 17696 et 17700 ; liste vide 18128.
   Ouverture (chevron à 90°, corps visible) : lignes 18136 et 18157. */
.vf-ria .ria-sit{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden}
.vf-ria .ria-sit-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;background:var(--bg-mute)}
.vf-ria .ria-sit-name{font-weight:700;color:var(--text-1)}
.vf-ria .ria-sit-num{color:var(--blue)}
.vf-ria .ria-sit-actions{display:flex;align-items:center;gap:12px}
.vf-ria .ria-sit-chev{color:var(--text-2);display:inline-flex;align-items:center;transition:transform .25s ease;transform:rotate(0deg)}
.vf-ria .ria-sit.is-open .ria-sit-chev{transform:rotate(90deg)}
.vf-ria .ria-sit-body{display:none;padding:14px;border-top:1px solid var(--border)}
.vf-ria .ria-sit.is-open .ria-sit-body{display:block}
.vf-ria .ria-sit-lab{font-size:13px;color:var(--text-2);margin-bottom:4px}
.vf-ria .ria-sit-lab.mt{margin:10px 0 4px}
.vf-ria .ria-sit-hint{font-size:11.5px;color:var(--text-3);margin-top:4px}
.vf-ria .ria-sit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.vf-ria .ria-sit-row > span{color:var(--text-2);font-size:13px}
.vf-ria .ria-sit-empty{color:var(--text-3);font-size:13px;margin-bottom:10px}
/* bouton « + Ajouter une situation » — ligne 17777 (survol : BLOC 3) */
.vf-ria #ria-add-sit{width:100%;background:var(--bg-mute);border:1px dashed var(--border);border-radius:10px;padding:12px;color:var(--text-2);font-weight:600;cursor:pointer}

/* ---- Lignes « libellé + interrupteur » et textes d'aide --------------------
   photos portées IA : ligne 17782 (marge basse 8px) et aide 17786 ;
   relance : ligne 17802 (marge basse 6px) et aide 17806. */
.vf-ria .ria-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.vf-ria .ria-toggle-row.mb6{margin-bottom:6px}
.vf-ria .ria-toggle-row > span{color:var(--text-1);font-weight:600}
.vf-ria .ria-help{color:var(--text-2);font-size:12.5px;margin-bottom:8px}
.vf-ria .ria-help.mb12{margin-bottom:12px}

/* ---- Badge cadenas doré (formule requise) ----------------------------------
   lignes 17783 et 17803 — style en ligne identique aux deux endroits. */
.vf-ria .ria-lock-badge{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#fcd34d;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);padding:2px 9px;border-radius:999px;vertical-align:middle}

/* ---- Relance automatique ---------------------------------------------------
   libellé de liste 17807 ; item 18165 ; numéro 18166 ; ligne 18167 ;
   bouton « + Ajouter un message » 17809 ; titre « Qui relancer ? » 17810 ;
   cibles 17811 (marge basse 6px) et 17815 (marge haute 10px) ;
   sous-bloc IA 17819 ; radios 17820 (avec marge basse) et 17821 ;
   encart « offre non payée » 17822 et son libellé 17823. */
.vf-ria .ria-rel-lab{font-size:13px;color:var(--text-2);margin-bottom:6px}
.vf-ria .ria-rel-item{margin-bottom:8px}
.vf-ria .ria-rel-num{font-size:12px;color:var(--blue);font-weight:700;margin-bottom:3px}
.vf-ria .ria-rel-line{display:flex;gap:8px;align-items:flex-start}
.vf-ria #ria-relance-add{width:100%;background:var(--bg-mute);border:1px dashed var(--border);border-radius:10px;padding:10px;color:var(--text-2);font-weight:600;cursor:pointer;margin-bottom:14px}
.vf-ria .ria-rel-who{font-size:13px;color:var(--text-1);font-weight:700;margin:6px 0 8px}
.vf-ria .ria-rel-target{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.vf-ria .ria-rel-target.mt10{margin-bottom:0;margin-top:10px}
.vf-ria .ria-rel-target > span{color:var(--text-1)}
.vf-ria .ria-rel-target > span > div{color:var(--text-3);font-size:11.5px;font-weight:400}
.vf-ria #ria-relance-ia-sub{margin:8px 0 0 6px;padding-left:12px;border-left:2px solid var(--border)}
.vf-ria .ria-rel-radio{display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:6px;color:var(--text-2);font-size:13px}
.vf-ria .ria-rel-radio.last{margin-bottom:0}
.vf-ria .ria-rel-radio input[type=radio]{accent-color:var(--blue)}
.vf-ria #ria-relance-unpaid-box{margin-top:8px}
.vf-ria .ria-rel-unpaid-lab{font-size:12.5px;color:var(--text-2);margin-bottom:4px}

/* ---- Barre « Sauvegarde automatique activée » — lignes 17850-17851 --------- */
.vf-ria .ria-savebar{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin:6px 0 44px}
.vf-ria #ria-status{color:var(--text-3);font-size:12.5px;display:inline-flex;align-items:center;gap:6px}


/* ############################################################################
   BLOC 5 — bandeau de verrouillage d'abonnement
   dashboard-api.js, fonction _vfLockBanner(), lignes 292-303.
   Posé en PREMIER enfant du conteneur quand _vfBlocks(2) est vrai
   (ligne 18203) ; les autres enfants passent à opacity .4 / pointer-events
   none (ligne 18202), d'où le `opacity:1;pointer-events:auto` en tête du
   cssText du bandeau lui-même (ligne 294) qui le laisse cliquable.
   ############################################################################ */

.vf-ria.is-locked > *{opacity:.4;pointer-events:none}
/* ⚠️ CORRECTIF DE PORTÉE (audit) — nécessaire, sinon le bandeau se grise lui-même.
   Dans l'extension il n'y a PAS de conflit : le JS grise les enfants DÉJÀ présents
   (ligne 18202) PUIS insère le bandeau (ligne 18203), qui n'a donc jamais reçu
   opacity:.4 ; son `opacity:1;pointer-events:auto` en ligne (ligne 294) suffit.
   Traduit en CSS, `.vf-ria.is-locked > *` (0,3,0) BAT `.vf-lock-banner` (0,1,0) :
   le bandeau devenait translucide et son bouton « Voir les formules » incliquable.
   On remonte donc la spécificité du bandeau — AUCUNE valeur n'est modifiée. */
.vf-ria.is-locked > .vf-lock-banner{opacity:1;pointer-events:auto}
.vf-lock-banner{opacity:1;pointer-events:auto;margin:0 0 20px;padding:16px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(251,191,36,.10),rgba(251,191,36,.035));border:1px solid rgba(251,191,36,.35);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vf-lock-ico{width:40px;height:40px;border-radius:10px;background:rgba(251,191,36,.16);display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
.vf-lock-txt{flex:1;min-width:160px}
.vf-lock-t{font-weight:700;font-size:15px;color:var(--text-1)}
.vf-lock-d{font-size:13px;color:var(--text-2);margin-top:3px}
.vf-lock-upgrade{flex:0 0 auto;background:#fbbf24;color:#1a1205;font-weight:700;font-size:13px;border:0;border-radius:10px;padding:9px 16px;cursor:pointer}


/* ############################################################################
   BLOC 6 — modale de confirmation « riaConfirm »
   dashboard-api.js, fonction riaConfirm(), lignes 17657-17666.
   ⚠️ NON scopée sous .vf-ria : dans l'extension le voile est ajouté à
   document.body (ligne 17667), donc HORS du conteneur. Les variables
   --bg-card / --border / --text-1 / --text-2 doivent donc être disponibles
   au niveau de la page ; les valeurs de repli reprises de dashboard.html
   (lignes 15, 16, 18, 20, 21) sont écrites en second argument de var().
   ############################################################################ */

.ria-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px}
.ria-confirm-box{background:var(--bg-card,#161616);border:1px solid var(--border,#2A2A2A);border-radius:14px;padding:22px;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ria-confirm-title{font-size:16px;font-weight:700;color:var(--text-1,#FFFFFF);margin-bottom:8px}
.ria-confirm-msg{color:var(--text-2,#9CA3AF);font-size:14px;line-height:1.5;margin-bottom:20px}
.ria-confirm-actions{display:flex;gap:10px;justify-content:flex-end}
.ria-confirm-actions .rc-cancel{background:var(--bg-mute,#1F1F1F);color:var(--text-1,#FFFFFF);border:1px solid var(--border,#2A2A2A);border-radius:10px;padding:10px 20px;font-weight:600;cursor:pointer}
.ria-confirm-actions .rc-ok{background:#ef4444;color:#fff;border:0;border-radius:10px;padding:10px 20px;font-weight:700;cursor:pointer}

/* ══════════════════════════════════════════════════════════════════════════
   INTERTITRES ET LIGNES DE RELANCE
   ─────────────────────────────────────────────────────────────────────────
   Dans l'extension, ces éléments sont écrits en style inline dans le gabarit
   (dashboard-api.js:17838, 17844, 17847 pour les intertitres ; la liste de
   relance est construite à part). On les remonte en classes ici pour que la
   page du site reste lisible — les VALEURS sont celles de la source.
   ══════════════════════════════════════════════════════════════════════════ */
.vf-ria .ria-h2 { font-size: 18px; font-weight: 700; margin: 30px 0 4px; color: var(--text-1); }
.vf-ria .ria-h2s { color: var(--text-2); font-size: 13px; margin-bottom: 6px; }

.vf-ria .ria-rel-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.vf-ria .ria-rel-row .n {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 9px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .35);
  font-size: 11.5px; font-weight: 800; color: #93C5FD;
}
.vf-ria .ria-rel-row textarea { flex: 1; min-width: 0; }
.vf-ria .ria-rel-row .ria-trash { margin-top: 9px; }


/* ############################################################################
   BLOC 7 — 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 — le mode sombre des BLOCS 0 à 6 est donc
   intouché STRUCTURELLEMENT, sans avoir à le prouver ligne par ligne. Rien
   au-dessus de ce commentaire n'a été modifié.

   MÊME MÉTHODE QUE vf-likes.css (bloc 3), pour que les deux écrans portés se
   ressemblent :
     A. on rebranche les 7 variables locales du BLOC 0 sur les jetons du site —
        cela recouvre à lui seul la grande majorité du fichier (BLOC 4 entier,
        BLOC 3 en partie), sans écrire une règle par composant ;
     B. on reprend une par une les valeurs EN DUR que les variables ne peuvent
        pas atteindre.

   ⚠️ CE QU'ON NE TOUCHE PAS — LE FAUX iPHONE (BLOC 1).
   .vhl-screen, .vhl-island, .vhl-ph-* : ce n'est pas de l'interface VintFlow,
   c'est la REPRODUCTION de la conversation Vinted telle qu'elle s'affiche sur le
   téléphone de l'acheteur — l'équivalent d'une capture d'écran. L'éclaircir
   mentirait sur ce que voit le client, et ferait passer à la moulinette le
   turquoise Vinted #0AB5C0, le vert « vendu » #22c55e et le châssis noir.
   Un châssis sombre sur une page claire est d'ailleurs la convention des
   maquettes d'appareil. Seuls DEUX éléments changent, et pour la même raison :
   ils tombent sur le fond de page, pas dans l'écran du téléphone — l'ombre
   PORTÉE du châssis, et la légende sous le téléphone.

   ⚠️ LES COULEURS DE SENS GARDENT LEUR TEINTE. Le rouge de la poubelle et de
   « Supprimer » reste rouge, l'ambre du cadenas reste ambre, le bleu d'action
   reste bleu : on ne change QUE la luminosité, pour tenir 4,5:1 sur blanc.
   (Le 06/08, un script de tokenisation avait viré au bleu le survol rouge de
   « Se déconnecter » — c'est l'erreur qu'on ne refait pas.)
   ############################################################################ */


/* ===== A. Les 7 variables locales du BLOC 0 rebranchées sur les jetons ======
   ⚠️ CE BLOC EST LE PLUS IMPORTANT DU FICHIER, et il répare un piège :
   le BLOC 0 REDÉCLARE --blue / --bg-card / --bg-mute / --border / --text-1..3
   SUR .vf-ria lui-même. Ces déclarations locales masquent celles que
   global.css pose sur :root[data-theme="light"] — autrement dit, sans le bloc
   ci-dessous, TOUT l'écran Réponses IA resterait noir au milieu d'une page
   claire, jetons du site ou pas. La spécificité (0,3,0) contre (0,1,0) tranche.
   Repli en dur au cas où la page chargerait vf-ria.css sans global.css. */
:root[data-theme="light"] .vf-ria{
  /* Bleu d'action : sert d'APLAT (pilule de jour active, onglet d'état actif,
     interrupteur allumé) ET de TEXTE (numéro de situation, étiquette choisie).
     #3B82F6 ne fait que 3,68:1 sur blanc — échec dans les deux rôles.
     #2563eb tient 5,2:1 sur blanc ET 5,2:1 avec du blanc dessus : une seule
     valeur suffit donc aux deux usages. Même teinte, juste assombrie. */
  --blue:    var(--vf-accent, #2563eb);
  --bg-card: var(--vf-surface, #ffffff);    /* menu déroulant, modale */
  --bg-mute: var(--vf-surface-2, #f1f3f6);  /* champs, pilules, cartes de mode */
  --border:  var(--vf-border, #dfe3ea);     /* en sombre c'est un gris plein :
                                               en clair il faut un gris plein
                                               aussi, sinon plus aucun contour */
  --text-1:  var(--vf-text, #0f1115);
  --text-2:  var(--vf-text-2, #55606f);     /* 6,4:1 — c'est du texte de 13 px */
  --text-3:  var(--vf-text-3, #5f6773);     /* 5,5:1 — aides et libellés en 11,5 px,
                                               aucune tolérance « gros texte » */
}


/* ===== B1. Les cartes (BLOC 2) ============================================
   .vf-ria-ctt et .vf-ria-cds sont écrits en BLANC SEMI-TRANSPARENT
   (rgba(255,255,255,.92) et .60) : aucune variable ne les atteint, et sur fond
   blanc ils seraient purement et simplement INVISIBLES. C'est le premier
   défaut à corriger du fichier. */
:root[data-theme="light"] .vf-ria .vf-ria-card{
  background: var(--vf-surface, #ffffff);
  border-color: var(--vf-border, #dfe3ea);
  /* une ombre noire à 40 % sur fond clair ne fait pas une ombre, elle fait une
     tache : on passe sur du bleu-ardoise très dilué */
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
:root[data-theme="light"] .vf-ria .vf-ria-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);
}
:root[data-theme="light"] .vf-ria .vf-ria-ctt{ color: var(--vf-text, #0f1115); }
:root[data-theme="light"] .vf-ria .vf-ria-cds{ color: var(--vf-text-2, #55606f); }


/* ===== B2. Le faux iPhone — SEULEMENT ce qui déborde sur la page ==========
   L'intérieur de l'écran n'est pas touché (voir l'avertissement en tête). */
/* L'ombre portée tombe, elle, sur le fond clair : rgba(0,0,0,.5) y ferait un
   hématome sous le téléphone. Le liseré `inset` est CONSERVÉ AU CHIFFRE PRÈS —
   il est à l'intérieur du châssis, il appartient à la maquette. */
:root[data-theme="light"] .vf-ria .vhl-phone{
  box-shadow: 0 20px 46px rgba(15, 23, 42, .16),
              0 2px 6px rgba(15, 23, 42, .10),
              inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* La légende est SOUS le téléphone, donc sur la page : #8b96ad n'y donne que
   2,9:1 en 11,5 px. */
:root[data-theme="light"] .vf-ria .vhl-phone-cap{ color: var(--vf-text-2, #55606f); }


/* ===== B3. L'interrupteur 46×26 (BLOC 3) ==================================
   Le curseur rond est en #fff EN DUR. Sur une piste devenue claire
   (--bg-mute = #f1f3f6), un rond blanc sur fond presque blanc disparaît : on ne
   voit plus si l'option est allumée ou éteinte. Deux corrections :
     - la piste ÉTEINTE descend d'un cran de gris ;
     - le rond garde son blanc (il doit rester blanc quand la piste est bleue)
       mais reçoit une ombre et un liseré qui le détachent.
   ⚠️ `input:not(:checked)` et pas `.vh-sl` tout court : une règle plus
   spécifique sur .vh-sl écraserait `input:checked + .vh-sl{background:var(--blue)}`
   (0,4,0) et l'interrupteur ne paraîtrait JAMAIS allumé. */
:root[data-theme="light"] .vf-ria .vh-sw input:not(:checked) + .vh-sl{
  background: var(--vf-surface-3, #e5e8ee);
}
:root[data-theme="light"] .vf-ria .vh-sw .vh-sl:before{
  box-shadow: 0 1px 3px rgba(15, 23, 42, .28), 0 0 0 1px rgba(15, 23, 42, .07);
}


/* ===== B4. Survols et sélections (BLOCS 3 et 4) ==========================
   🔴 COULEUR DE SENS — la poubelle. Le rouge dit « ça supprime » : il garde sa
   teinte et ne devient PAS bleu. #ef4444 ne fait que 3,76:1 sur blanc ; on
   descend à #b91c1c (6,9:1) pour l'icône et #dc2626 pour le contour. */
:root[data-theme="light"] .vf-ria .ria-trash:hover{
  color: var(--vf-danger-ink, #b91c1c);
  border-color: var(--vf-danger, #dc2626);
  background: rgba(220, 38, 38, .08);
}
/* Le `!important` de la source (BLOC 3) est repris : sans lui, rien ne passe. */
:root[data-theme="light"] .vf-ria .ria-dd-opt:hover{
  background: rgba(37, 99, 235, .10) !important;
}
:root[data-theme="light"] .vf-ria .ria-sit-head:hover{
  background: rgba(37, 99, 235, .07);
}
/* Le menu déroulant flotte AU-DESSUS de la page : son ombre doit être douce. */
:root[data-theme="light"] .vf-ria .ria-dd-menu{
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
/* Option choisie : le bleu passe en version « encre » (#1d4ed8, 7,4:1) parce
   qu'il est posé sur un lavis bleu, pas sur du blanc pur. */
:root[data-theme="light"] .vf-ria .ria-dd-opt.is-sel{
  background: var(--vf-accent-wash, rgba(37, 99, 235, .10));
  color: var(--vf-accent-ink, #1d4ed8);
}


/* ===== B5. Les bleus EN TEXTE, en petit corps ============================
   Tous ces éléments héritent de --blue (#2563eb, 5,2:1 : suffisant). On les
   descend quand même à --vf-accent-ink (#1d4ed8, 7,4:1) parce qu'ils sont tous
   en 11,5-13 px : c'est du texte fin, il mérite la marge. */
:root[data-theme="light"] .vf-ria .ria-sit-num,
:root[data-theme="light"] .vf-ria .ria-rel-num,
:root[data-theme="light"] .vf-ria .ria-vouv.is-sel .ria-vouv-t,
:root[data-theme="light"] .vf-ria .ria-comp-lab.is-sel{
  color: var(--vf-accent-ink, #1d4ed8);
}
/* La pastille numérotée des messages de relance : #93C5FD est un bleu pâle
   calibré pour le fond noir — sur le lavis clair il tombe à 1,8:1, le chiffre
   devient illisible. */
:root[data-theme="light"] .vf-ria .ria-rel-row .n{
  background: var(--vf-accent-wash, rgba(37, 99, 235, .10));
  border-color: rgba(37, 99, 235, .35);
  color: var(--vf-accent-ink, #1d4ed8);
}


/* ===== B6. Cadenas et bandeau d'abonnement (BLOCS 4 et 5) ================
   🟠 COULEUR DE SENS — l'ambre dit « verrouillé / il faut un abonnement ».
   Elle reste ambre. #fcd34d sur blanc ne fait que 1,5:1 : la pastille était
   illisible. #92400e sur le lavis ambré donne ~7:1, teinte inchangée. */
:root[data-theme="light"] .vf-ria .ria-lock-badge{
  color: var(--vf-warn-ink, #92400e);
  background: rgba(217, 119, 6, .12);
  border-color: rgba(217, 119, 6, .45);
}
:root[data-theme="light"] .vf-lock-banner{
  background: linear-gradient(180deg, rgba(217, 119, 6, .12), rgba(217, 119, 6, .05));
  border-color: rgba(217, 119, 6, .40);
}
:root[data-theme="light"] .vf-lock-ico{
  background: rgba(217, 119, 6, .16);
}
/* .vf-lock-upgrade N'EST PAS RETEINTÉ, et c'est délibéré : #1a1205 sur #fbbf24
   donne déjà ~11:1, le bouton est parfaitement lisible en clair, et l'ambre est
   ici la couleur de sens du bouton d'abonnement. Le foncer en #d97706 aurait
   au contraire imposé du texte blanc à 3,4:1 — une régression. On lui ajoute
   seulement un liseré ambré pour qu'il se détache du blanc de la page ;
   `box-shadow` et non `border`, pour ne déplacer aucun pixel. */
:root[data-theme="light"] .vf-lock-upgrade{
  box-shadow: 0 0 0 1px rgba(146, 64, 14, .35);
}


/* ===== B7. Modale de confirmation (BLOC 6) ===============================
   ⚠️ NON scopée sous .vf-ria : dans l'extension le voile est posé sur
   document.body. Les var(--bg-card, …) de la source se résolvent déjà en clair
   grâce à global.css ; il ne reste que les trois valeurs en dur. */
/* Le voile reste SOMBRE — un voile s'assombrit, dans les deux thèmes. On le
   dilue seulement (55 % → 40 %) et on le passe en bleu-ardoise. */
:root[data-theme="light"] .ria-confirm-overlay{
  background: rgba(15, 23, 42, .40);
}
:root[data-theme="light"] .ria-confirm-box{
  box-shadow: var(--vf-shadow-lg, 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px rgba(15, 23, 42, .10));
}
/* 🔴 COULEUR DE SENS — le bouton qui confirme la suppression. Rouge il est,
   rouge il reste. #ef4444 avec du texte blanc ne donne que 3,76:1 (échec pour
   du 14 px gras) ; #dc2626 monte à 4,83:1. */
:root[data-theme="light"] .ria-confirm-actions .rc-ok{
  background: var(--vf-danger, #dc2626);
}

/* 🌞 (06/08) Curseur des interrupteurs en mode clair : le bouton blanc sur un
   rail devenu gris très pâle donnait 1,23:1 — la position n'était plus lisible.
   On renforce le seul liseré, sans toucher à l'ombre ni à la géométrie. */
:root[data-theme="light"] .vf-ria .vh-sw .vh-sl:before {
  box-shadow: 0 1px 3px rgba(15, 23, 42, .28), 0 0 0 1px rgba(15, 23, 42, .22);
}