/* ============================================================================
   vf-likes.css — COPIE EXACTE du CSS de l'écran « Likes » de l'extension
   ----------------------------------------------------------------------------
   SOURCE UNIQUE :
     /Users/quinton/Downloads/VINTFLOW-TRANSFERT/
       vinted-extension-v0_59_71_BACKUP_avant_pixelperfect/likes.js

   Deux feuilles <style> y sont injectées ; elles sont recopiées ICI DANS LEUR
   ORDRE D'INJECTION RÉEL, car la seconde surcharge volontairement la première :

     BLOC 1 = feuille #vhl-styles   — likes.js, fonction injectStyles() (l. 297),
              contenu de la feuille lignes 302 à 456
              (classes .vhl-* , non scopées dans l'extension)
     BLOC 2 = feuille #vf-likes-css — likes.js, fonction _vfInjectLikesCss() (l. 61),
              contenu de la feuille lignes 65 à 141
              (scopée #likes-pageview, injectée APRÈS)

   ⚠️ NUMÉROTATION : likes.js a été modifié le 27/07 à 15:47, APRÈS la première
   rédaction de ce fichier ; les repères ci-dessus ont été recalés le 27/07 sur le
   fichier tel qu'il est aujourd'hui (l'ancien brief disait 276-432 pour le BLOC 1,
   c'était +26 lignes trop haut). Le CONTENU, lui, est inchangé : re-comparé règle
   par règle après la modification, zéro écart. Re-vérifier ces repères avant tout
   futur diff.

   PORTÉE :
     Le sélecteur #likes-pageview de la source devient .vf-lk.
     Les règles du BLOC 1, globales dans l'extension, sont préfixées du même
     .vf-lk pour ne pas fuir sur le reste du site. Le préfixe étant appliqué
     UNIFORMÉMENT aux deux blocs, la hiérarchie de la cascade est conservée :
     pour chaque sélecteur présent dans les deux feuilles, le BLOC 2 garde la
     même spécificité que le BLOC 1 et gagne parce qu'il vient après —
     exactement comme l'id #likes-pageview le faisait gagner dans l'extension.

   DOM ATTENDU (identique à l'extension : root = #likes-pageview > .vhl-wrap) :
     <div class="vf-lk">          <!-- équivalent de #likes-pageview -->
       <div class="vhl-wrap"> … </div>
     </div>
     ⚠️ .vf-lk et .vhl-wrap doivent être DEUX éléments distincts (imbriqués),
        pas deux classes sur le même élément : tous les sélecteurs du fichier
        sont des sélecteurs de descendance.

   ⚠️ CE FICHIER NE SUFFIT PAS À LA MISE EN PAGE (constat de l'audit).
   Dans l'extension, #likes-pageview porte AUSSI la classe .pageview
   (dashboard.html:5327 → `<div class="pageview" id="likes-pageview">`), et
   .pageview vaut `padding: 24px 28px` (dashboard.html:788). Ce padding-là ne
   vient PAS de likes.js : il n'a donc pas sa place dans ce fichier, qui recopie
   les deux feuilles de likes.js et rien d'autre. Il est repris dans
   public/vf-ecran.css, sur .vf-page--full, avec celui de .main :
       .vf-page.vf-page--full:has(.vhl-wrap) { padding: 40px 48px 48px; }
       (= .main 16/20/24 + .pageview 24/28/24)
   Si une page charge vf-likes.css SANS vf-ecran.css, l'écran sera trop serré de
   24px en haut, 28px sur les côtés et 24px en bas.

   DÉPENDANCE : --lk-blue vaut var(--blue,#3B82F6) — repris tel quel de la
   source. Si le site ne définit pas --blue, le repli #3B82F6 s'applique, ce
   qui donne le même bleu que le dashboard de l'extension.

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

   OMISSIONS ASSUMÉES (audit : éléments retirés du rendu — voir le rapport) :
     • .vf-likes-hero et .vf-hero-*        (héros retiré, _vfInjectLikesHero vide)
     • .vhl-statgrid / .vhl-stat           (bloc statistiques retiré)
     • .vhl-favrow / .vhl-favmeta / .vhl-thumb / .vhl-favname(-link) /
       .vhl-favitems / .vhl-favtime / .vhl-lotbadge / .vhl-tag / .vhl-empty /
       .vhl-prog                           (liste des favoris retirée)
     • .vhl-btn et ses variantes
     • la règle .vhl-wrap > .vhl-h1 , > .vhl-sub {display:none} du BLOC 2
       (la page du site n'affiche pas ce titre-là)
   ============================================================================ */


/* ############################################################################
   BLOC 1 — feuille #vhl-styles   (likes.js, injectStyles(), lignes 302-456)
   Base historique. Surchargée plus bas par le BLOC 2.
   ############################################################################ */

.vf-lk .vhl-wrap{padding:18px 22px;max-width:none;width:100%;margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e8edf5;}
.vf-lk .vhl-h1{font-size:22px;font-weight:800;margin:0 0 2px;}
.vf-lk .vhl-sub{font-size:13px;color:#8b96ad;margin:0 0 18px;}
.vf-lk .vhl-card{background:#161616;border:1px solid #2a2a2a;border-radius:14px;
  padding:18px;margin-bottom:16px;}
.vf-lk .vhl-card-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;}
.vf-lk .vhl-card-head .ic{color:#3B82F6;flex-shrink:0;margin-top:1px;}
.vf-lk .vhl-card-head .tt{font-size:15px;font-weight:700;}
.vf-lk .vhl-card-head .ds{font-size:12px;color:#8b96ad;margin-top:2px;}
.vf-lk .vhl-tbar{display:flex;align-items:center;gap:8px;background:#0e0e0e;
  border:1px solid #2a2a2a;border-bottom:none;border-radius:8px 8px 0 0;
  padding:7px 10px;font-size:11px;color:#8b96ad;}
.vf-lk .vhl-chip{background:#1d2a44;color:#93C5FD;border:1px solid #3B82F655;
  border-radius:14px;padding:3px 10px;font-size:11px;font-weight:600;
  cursor:pointer;}
.vf-lk .vhl-chip:hover{background:#24344f;}
.vf-lk .vhl-ta{width:100%;box-sizing:border-box;background:#0e0e0e;color:#e8edf5;
  border:1px solid #2a2a2a;border-top:none;border-radius:0 0 8px 8px;
  padding:11px;font-size:13px;font-family:inherit;resize:vertical;
  min-height:84px;line-height:1.5;}
.vf-lk .vhl-ta:focus{outline:none;border-color:#3B82F6;}
.vf-lk .vhl-counter{text-align:right;font-size:10px;color:#8b96ad;margin-top:3px;}
.vf-lk .vhl-preview{background:#0e0e0e;border:1px solid #2a2a2a;border-radius:8px;
  padding:9px 11px;margin-top:8px;font-size:12px;color:#a9b4c9;line-height:1.5;}
.vf-lk .vhl-preview .pv-ic{color:#3B82F6;margin-right:5px;}
.vf-lk .vhl-row{display:flex;align-items:center;gap:12px;}
.vf-lk .vhl-row + .vhl-row{margin-top:12px;}
.vf-lk .vhl-lbl{font-size:13px;font-weight:600;}
.vf-lk .vhl-spacer{flex:1;}
.vf-lk .vhl-switch{position:relative;width:44px;height:24px;flex-shrink:0;}
.vf-lk .vhl-switch input{opacity:0;width:0;height:0;}
.vf-lk .vhl-slide{position:absolute;inset:0;background:#2a2a2a;border-radius:24px;
  cursor:pointer;transition:.2s;}
.vf-lk .vhl-slide::before{content:"";position:absolute;width:18px;height:18px;
  left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.vf-lk .vhl-switch input:checked + .vhl-slide{background:#3B82F6;}
.vf-lk .vhl-switch input:checked + .vhl-slide::before{transform:translateX(20px);}
.vf-lk .vhl-seg{display:inline-flex;background:#0e0e0e;border:1px solid #2a2a2a;
  border-radius:8px;overflow:hidden;}
.vf-lk .vhl-seg button{background:none;border:none;color:#8b96ad;font-size:12px;
  font-weight:600;padding:6px 14px;cursor:pointer;}
.vf-lk .vhl-seg button.on{background:#16294a;color:#3B82F6;}
.vf-lk .vhl-range{flex:1;accent-color:#3B82F6;}
.vf-lk .vhl-rangeval{font-size:14px;font-weight:800;color:#3B82F6;min-width:48px;
  text-align:right;}
/* (.vhl-btn et variantes : volontairement non reprises — voir en-tête) */
.vf-lk .vhl-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.vf-lk .vhl-bareme{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;}
.vf-lk .vhl-btier{display:flex;align-items:center;gap:9px;font-size:12px;}
.vf-lk .vhl-btier .t{color:#8b96ad;width:52px;flex-shrink:0;}
.vf-lk .vhl-brange{flex:1;min-width:50px;accent-color:#3b82f6;}
.vf-lk .vhl-bpill{min-width:46px;flex-shrink:0;text-align:center;font-weight:800;
  font-size:12px;color:#60a5fa;background:#0e0e0e;border:1px solid #2a2a2a;
  border-radius:999px;padding:4px 8px;}
/* (.vhl-statgrid / .vhl-stat / .vhl-favrow… / .vhl-tag / .vhl-empty / .vhl-prog :
   volontairement non reprises — sections retirées du rendu) */
.vf-lk .vhl-sectitle{font-size:17px;font-weight:800;margin:28px 0 2px;color:#e8edf5;
  display:flex;align-items:center;gap:8px;}
.vf-lk .vhl-secsub{font-size:12.5px;color:#8b96ad;margin:0 0 14px;line-height:1.5;}
/* Layout 2 colonnes : réglages à gauche, iPhone sticky à droite (façon page négo) */
.vf-lk .vhl-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
.vf-lk .vhl-main{min-width:0}
.vf-lk .vhl-aside{position:relative}
.vf-lk .vhl-phone-sticky{position:sticky;top:18px}
@media (max-width:980px){ .vf-lk .vhl-layout{grid-template-columns:1fr} .vf-lk .vhl-aside{display:none} }
/* iPhone 14 Pro — conversation Vinted (reproduction de l'image 2) */
.vf-lk .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-lk .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-lk .vhl-island{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:76px;height:25px;
  background:#000;border-radius:15px;z-index:5;box-shadow:0 1px 2px rgba(0,0,0,.7)}
.vf-lk .vhl-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:108px;height:5px;
  border-radius:3px;background:rgba(255,255,255,.55);z-index:6}
.vf-lk .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-lk .vhl-ph-hd{display:flex;align-items:center;gap:9px;padding:5px 12px 9px;border-bottom:1px solid #1c1c1f}
.vf-lk .vhl-ph-back{color:#cfcfd4;font-size:21px;line-height:1}
.vf-lk .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-lk .vhl-ph-name{flex:1;font-size:14px;font-weight:700;color:#fff;line-height:1.15}
.vf-lk .vhl-ph-name small{display:block;font-size:10px;color:#22c55e;font-weight:600}
.vf-lk .vhl-ph-info{color:#9aa0ab;display:flex}
.vf-lk .vhl-ph-item{margin:10px;background:#161618;border:1px solid #232326;border-radius:12px;padding:10px}
.vf-lk .vhl-ph-item-top{display:flex;gap:10px;align-items:center}
.vf-lk .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-lk .vhl-ph-item-title{flex:1;font-size:12px;color:#fff;font-weight:600;line-height:1.25}
.vf-lk .vhl-ph-item-price{font-size:14px;color:#fff;font-weight:800;white-space:nowrap}
.vf-lk .vhl-ph-actions{display:flex;gap:8px;margin-top:10px}
.vf-lk .vhl-ph-btn{flex:1;text-align:center;font-size:12px;font-weight:700;padding:8px 0;border-radius:8px}
.vf-lk .vhl-ph-btn.outline{background:transparent;border:1px solid #3a3a3e;color:#fff}
.vf-lk .vhl-ph-btn.buy{background:#0AB5C0;color:#fff}
.vf-lk .vhl-ph-sys{align-self:center;font-size:10px;color:#9aa0ab;background:#161618;border-radius:999px;padding:4px 12px;text-align:center;max-width:92%}
.vf-lk .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}
.vf-lk .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-lk .vhl-ph-offercard .badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;color:#2dd4d8;margin-bottom:5px;letter-spacing:.02em}
.vf-lk .vhl-ph-offercard .price b{font-size:17px;font-weight:800;color:#fff}
.vf-lk .vhl-ph-offercard .price s{font-size:12px;font-weight:600;color:#7a8a8b;margin-left:7px}
.vf-lk .vhl-ph-body{flex:1;padding:8px 12px 10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:none}
.vf-lk .vhl-ph-body::-webkit-scrollbar{display:none}
.vf-lk .vhl-ph-bub{max-width:80%;padding:9px 12px;border-radius:16px;font-size:12px;line-height:1.4;white-space:pre-wrap}
.vf-lk .vhl-ph-bub.recv{background:#1f1f22;color:#e6e6e8;align-self:flex-start;border-bottom-left-radius:5px}
.vf-lk .vhl-ph-bub.sent{background:#0AB5C0;color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.vf-lk .vhl-ph-bub.sent s{opacity:.75;margin-left:5px}
.vf-lk .vhl-ph-time{font-size:9px;color:#6b6b70;margin:0 2px}
.vf-lk .vhl-ph-time.r{align-self:flex-start}
.vf-lk .vhl-ph-time.s{align-self:flex-end}
/* Apparition pilotée en JS (.show) + indicateur « en train d'écrire » */
/* ⚠️⚠️ CONTENU MASQUÉ PAR DÉFAUT — LIRE AVANT D'INTÉGRER LA PAGE ⚠️⚠️
   La règle ci-dessous (recopiée telle quelle, likes.js:445) met TOUS les enfants de
   .vhl-ph-body à opacity:0. Dans l'extension c'est le JS de likes.js qui 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 : porter ce JS, ou écrire la maquette avec
   le .show déjà posé (class="vhl-ph-bub recv show"). Ne PAS supprimer la règle. */
.vf-lk .vhl-ph-body > *{opacity:0;transform:translateY(9px) scale(.98);transition:opacity .4s ease,transform .4s ease}
.vf-lk .vhl-ph-body > *.show{opacity:1;transform:none}
.vf-lk .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-lk .vhl-ph-typing span{width:7px;height:7px;border-radius:50%;background:#8b8b90;animation:vhl-typing 1.3s infinite}
.vf-lk .vhl-ph-typing span:nth-child(2){animation-delay:.18s}
.vf-lk .vhl-ph-typing span:nth-child(3){animation-delay:.36s}
@keyframes vhl-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.vf-lk .vhl-ph-input{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #1c1c1f}
.vf-lk .vhl-ph-input .pic{color:#9aa0ab;display:flex}
.vf-lk .vhl-ph-input .field{flex:1;background:#161618;border:1px solid #232326;border-radius:999px;padding:7px 13px;font-size:11px;color:#6b6b70}
.vf-lk .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-lk .vhl-phone-cap{text-align:center;font-size:11.5px;color:#8b96ad;margin:12px 4px 0;line-height:1.5}


/* ############################################################################
   BLOC 2 — feuille #vf-likes-css (likes.js, _vfInjectLikesCss(), lignes 65-141)
   Injectée APRÈS la précédente dans l'extension : c'est elle qui gagne.
   Ne rien remonter au-dessus du BLOC 1, l'ordre porte le sens.
   ############################################################################ */

/* ===== LIKES — REFONTE PIXEL-PERFECT + WOW (scopé #likes-pageview, non destructif) ===== */
.vf-lk{
  --lk-s1:#1A1A1D; --lk-s2:#202024; --lk-s3:#26262C;
  --lk-bd:rgba(255,255,255,.08); --lk-bd-2:rgba(255,255,255,.12);
  --lk-t1:rgba(255,255,255,.92); --lk-t2:rgba(255,255,255,.60); --lk-t3:rgba(255,255,255,.40);
  --lk-blue:var(--blue,#3B82F6); --lk-glow:rgba(59,130,246,.30);
  --lk-ease:cubic-bezier(.16,1,.3,1); --lk-fast:150ms; --lk-base:340ms;
}
@keyframes vfLkUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes vfLkHero{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes vfLkBreathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes vfLkShine{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
.vf-lk .vhl-wrap{padding:22px 26px 32px;max-width:none;margin:0;color:var(--lk-t1);-webkit-font-smoothing:antialiased;}
/* (la règle qui masquait .vhl-h1 / .vhl-sub n'est pas reprise — voir en-tête) */
/* (HÉROS premium .vf-likes-hero / .vf-hero-* : non repris — héros retiré) */
/* Layout 2 colonnes */
.vf-lk .vhl-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start;}
.vf-lk .vhl-main{min-width:0}
.vf-lk .vhl-aside{position:relative}
.vf-lk .vhl-phone-sticky{position:sticky;top:24px}
@media (max-width:980px){.vf-lk .vhl-layout{grid-template-columns:1fr}.vf-lk .vhl-aside{display:none}}
/* Titres de section */
.vf-lk .vhl-sectitle{display:flex;align-items:center;gap:8px;margin:26px 0 8px;font-size:20px;line-height:28px;font-weight:700;letter-spacing:-.01em;color:var(--lk-t1);}
.vf-lk .vhl-main > .vhl-sectitle:first-of-type{margin-top:0}
.vf-lk .vhl-secsub{margin:0 0 14px;font-size:14px;line-height:20px;color:var(--lk-t2);max-width:680px;}
/* Cartes */
.vf-lk .vhl-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;}
.vf-lk .vhl-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-lk .vhl-main > .vhl-card:nth-of-type(1){animation-delay:60ms}
.vf-lk .vhl-main > .vhl-card:nth-of-type(2){animation-delay:120ms}
.vf-lk .vhl-main > .vhl-card:nth-of-type(3){animation-delay:180ms}
.vf-lk .vhl-main > .vhl-card:nth-of-type(4){animation-delay:240ms}
/* En-tête de carte */
.vf-lk .vhl-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.vf-lk .vhl-card-head .ic{color:var(--lk-blue);flex-shrink:0;margin-top:2px}
.vf-lk .vhl-card-head .tt{font-size:16px;line-height:24px;font-weight:600;color:var(--lk-t1)}
.vf-lk .vhl-card-head .ds{font-size:14px;line-height:20px;color:var(--lk-t2);margin-top:2px}
/* Barre variables + chips */
.vf-lk .vhl-tbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--lk-s2);border:1px solid var(--lk-bd);border-bottom:none;border-radius:8px 8px 0 0;padding:8px 12px;font-size:12px;line-height:16px;color:var(--lk-t2);}
.vf-lk .vhl-chip{background:rgba(59,130,246,.14);color:#93C5FD;border:1px solid rgba(59,130,246,.40);border-radius:9999px;padding:4px 12px;font-size:12px;line-height:16px;font-weight:600;cursor:pointer;transition:background var(--lk-fast) var(--lk-ease),transform var(--lk-fast) var(--lk-ease);}
.vf-lk .vhl-chip:hover{background:rgba(59,130,246,.22)}
.vf-lk .vhl-chip:active{transform:scale(.97)}
/* Textarea */
.vf-lk .vhl-ta{width:100%;box-sizing:border-box;background:var(--lk-s2);color:var(--lk-t1);border:1px solid var(--lk-bd);border-top:none;border-radius:0 0 8px 8px;padding:12px;font-size:14px;line-height:20px;font-family:inherit;resize:vertical;min-height:120px;transition:border-color var(--lk-fast) var(--lk-ease),box-shadow var(--lk-fast) var(--lk-ease);}
.vf-lk .vhl-ta::placeholder{color:var(--lk-t3)}
.vf-lk .vhl-ta:focus{outline:none;border-color:var(--lk-blue);box-shadow:0 0 0 3px rgba(59,130,246,.18);}
/* Compteur + aperçu */
.vf-lk .vhl-counter{text-align:right;font-size:12px;line-height:16px;color:var(--lk-t3);margin-top:4px;}
.vf-lk .vhl-preview{background:var(--lk-s2);border:1px solid var(--lk-bd);border-radius:8px;padding:12px;margin-top:8px;font-size:14px;line-height:20px;color:var(--lk-t2);}
.vf-lk .vhl-preview .pv-ic{color:var(--lk-blue);margin-right:8px}
/* Lignes / labels */
.vf-lk .vhl-row{display:flex;align-items:center;gap:12px;min-height:40px}
.vf-lk .vhl-row + .vhl-row{margin-top:16px}
.vf-lk .vhl-lbl{font-size:14px;line-height:20px;font-weight:600;color:var(--lk-t1)}
.vf-lk #vhl-offer-cfg .vhl-lbl,.vf-lk #vhl-offer-valrow .vhl-lbl{color:var(--lk-t2)}
.vf-lk .vhl-spacer{flex:1}
/* Switch */
.vf-lk .vhl-switch{position:relative;width:44px;height:24px;flex-shrink:0}
.vf-lk .vhl-switch input{opacity:0;width:0;height:0}
.vf-lk .vhl-slide{position:absolute;inset:0;background:var(--lk-s3);border:1px solid var(--lk-bd);border-radius:9999px;cursor:pointer;transition:background var(--lk-fast) var(--lk-ease);}
.vf-lk .vhl-slide::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--lk-fast) var(--lk-ease);}
.vf-lk .vhl-switch input:checked + .vhl-slide{background:var(--lk-blue);border-color:transparent}
.vf-lk .vhl-switch input:checked + .vhl-slide::before{transform:translateX(20px)}
/* iPhone : raffinage (structure préservée) */
.vf-lk .vhl-phone{box-shadow:0 24px 60px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.05);}
@media (prefers-reduced-motion:reduce){.vf-lk .vhl-card{animation:none!important}}


/* ############################################################################
   BLOC 3 — MODE CLAIR (ajout du 06/08, non destructif)
   ----------------------------------------------------------------------------
   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 matcher — le mode sombre au-dessus est donc intouché,
   structurellement, sans avoir à le prouver ligne par ligne.
   Rien n'a été modifié dans les BLOCS 1 et 2.

   DEUX PARTIES :
     A. on rebranche les variables locales --lk-* (BLOC 2) sur les jetons du
        site : cela couvre d'un coup toutes les règles qui les utilisent
        (cartes, textarea, barre de variables, titres, textes, switch…).
     B. on reprend une par une les valeurs EN DUR que le BLOC 2 ne recouvre
        pas — c'est-à-dire les règles du BLOC 1 restées seules (segment,
        curseurs, barème, sous-titre, légende du téléphone) et les ombres.

   ⚠️ CE QU'ON NE TOUCHE PAS : tout l'intérieur du faux iPhone
   (.vhl-screen, .vhl-ph-*, .vhl-island, .vhl-home). Ce n'est pas de
   l'interface VintFlow, c'est la REPRODUCTION d'une conversation Vinted telle
   qu'elle s'affiche sur le téléphone du client : un visuel de démonstration,
   au même titre qu'une capture d'écran. L'éclaircir mentirait sur ce que
   l'acheteur voit, et ferait passer le turquoise Vinted #0AB5C0, le vert
   « vendu » #22c55e et le châssis noir à la moulinette. Seule l'ombre PORTÉE
   du téléphone (l'extérieur) est adoucie, parce qu'elle tombe, elle, sur le
   fond clair de la page.
   ############################################################################ */

/* ===== A. Variables locales du BLOC 2 rebranchées sur les jetons du site =====
   Les jetons basculent tout seuls ; on garde un repli en dur au cas où la page
   chargerait vf-likes.css sans la feuille qui définit les jetons. */
:root[data-theme="light"] .vf-lk{
  --lk-s1:var(--vf-surface,#ffffff);     /* fond des cartes */
  --lk-s2:var(--vf-surface-2,#f1f3f6);   /* champs : barre variables, textarea, aperçu */
  --lk-s3:var(--vf-surface-3,#e5e8ee);   /* rail de l'interrupteur au repos */
  /* En sombre les bordures sont du blanc dilué : sur fond clair elles
     disparaissent purement et simplement. On passe sur une bordure pleine,
     sinon la carte et le textarea n'ont plus de contour du tout. */
  --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);      /* texte secondaire — 4,5:1 tenu sur blanc */
  /* --lk-t3 sert au compteur de caractères et au placeholder : le gris clair
     du sombre donnerait 2,4:1 sur blanc. On descend au gris tertiaire lisible. */
  --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 — c'est le bleu d'action de l'écran
     (icônes de carte, bordure de focus, interrupteur allumé). */
  --lk-blue:var(--vf-accent,#2563eb);
  --lk-glow:rgba(37,99,235,.25);
}

/* ===== B1. Textes restés en dur dans le BLOC 1 ===== */
/* Sous-titre de page : le BLOC 2 ne le recouvre pas, il garderait #8b96ad
   (2,4:1 sur blanc = illisible). */
:root[data-theme="light"] .vf-lk .vhl-sub{color:var(--vf-text-2,#55606f);}
/* Légende sous le téléphone : elle est sur le FOND DE PAGE, pas dans le
   téléphone — c'est pourquoi elle s'éclaircit alors que le mockup, non. */
:root[data-theme="light"] .vf-lk .vhl-phone-cap{color:var(--vf-text-2,#55606f);}
/* Libellé de palier du barème (« 1 jour », « 3 jours »…). */
:root[data-theme="light"] .vf-lk .vhl-btier .t{color:var(--vf-text-2,#55606f);}

/* ===== B2. Ombres — jamais de noir sur fond clair =====
   Une ombre noire à 40-55 % sous une carte blanche ne lit pas comme une ombre,
   elle lit comme une salissure. On garde exactement les mêmes géométries
   (mêmes décalages, mêmes flous) et on ne change que l'encre : bleu-ardoise
   très dilué. */
:root[data-theme="light"] .vf-lk .vhl-card{box-shadow:0 1px 2px rgba(15,23,42,.06);}
:root[data-theme="light"] .vf-lk .vhl-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);
}
/* Halo de focus du textarea : il DOIT rester franchement visible, c'est le
   repère clavier. Même bleu, même opacité, juste la teinte assombrie. */
:root[data-theme="light"] .vf-lk .vhl-ta:focus{box-shadow:0 0 0 3px rgba(37,99,235,.18);}
/* Ombre portée du téléphone : l'objet reste sombre, mais son ombre tombe sur
   le fond clair de la page. On garde le reflet blanc interne (inset) tel quel :
   il court sur le châssis noir, qui ne bouge pas. */
:root[data-theme="light"] .vf-lk .vhl-phone{
  box-shadow:0 24px 60px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.10),
             inset 0 0 0 1px rgba(255,255,255,.05);
}
/* Bouton blanc de l'interrupteur : blanc sur blanc au repos une fois le rail
   éclairci. On lui donne un léger relief pour qu'il reste un objet. */
:root[data-theme="light"] .vf-lk .vhl-slide::before{box-shadow:0 1px 3px rgba(15,23,42,.22);}

/* ===== B3. Puces de variables (« {prénom} », « {article} »…) =====
   Bleu clair #93C5FD codé en dur dans le BLOC 2 : sur une pastille claire il
   devient invisible. Le bleu EN TEXTE s'inverse en clair (il fonce au lieu de
   s'éclaircir) — c'est le seul moyen de garder la même teinte ET la lisibilité. */
:root[data-theme="light"] .vf-lk .vhl-chip{
  background:var(--vf-accent-wash,rgba(37,99,235,.10));
  color:var(--vf-accent-ink,#1d4ed8);
  border-color:rgba(37,99,235,.35);
}
:root[data-theme="light"] .vf-lk .vhl-chip:hover{background:rgba(37,99,235,.18);}

/* ===== B4. Segment (choix exclusif) — règles du BLOC 1 restées seules ===== */
:root[data-theme="light"] .vf-lk .vhl-seg{
  background:var(--vf-surface-2,#f1f3f6);
  border-color:var(--vf-border,#dfe3ea);
}
:root[data-theme="light"] .vf-lk .vhl-seg button{color:var(--vf-text-2,#55606f);}
/* Option active : en sombre c'est un bleu marine plein + texte bleu vif.
   En clair on garde le même couple (fond bleu très dilué + texte bleu), avec
   le bleu de TEXTE assombri pour tenir le contraste sur la pastille claire. */
:root[data-theme="light"] .vf-lk .vhl-seg button.on{
  background:var(--vf-accent-wash,rgba(37,99,235,.10));
  color:var(--vf-accent-ink,#1d4ed8);
}

/* ===== B5. Curseurs et valeurs chiffrées ===== */
/* accent-color pilote la piste et la pastille natives du <input type=range>. */
:root[data-theme="light"] .vf-lk .vhl-range,
:root[data-theme="light"] .vf-lk .vhl-brange{accent-color:var(--vf-accent,#2563eb);}
/* Valeur affichée à droite du curseur : c'est du TEXTE bleu, donc bleu foncé. */
:root[data-theme="light"] .vf-lk .vhl-rangeval{color:var(--vf-accent-ink,#1d4ed8);}
/* Pastille de pourcentage du barème : fond sombre + bleu clair en sombre
   → fond de champ clair + bleu de texte foncé en clair. */
:root[data-theme="light"] .vf-lk .vhl-bpill{
  color:var(--vf-accent-ink,#1d4ed8);
  background:var(--vf-surface-2,#f1f3f6);
  border-color:var(--vf-border,#dfe3ea);
}

/* ══════════════════════════════════════════════════════════════════════════════
   🌞 RATTRAPAGES (06/08/2026, après relecture)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Les libellés « Type », « Valeur » et les deux textes d'aide portaient une
   couleur EN LIGNE (#8b96ad) : aucune feuille ne pouvait les atteindre, et ils
   tombaient à 2,9:1 sur blanc. Le style en ligne a été retiré de favoris.astro ;
   la couleur vient maintenant d'ici, donc elle suit le thème. */
.vf-lk .vhl-aide { color: rgba(255, 255, 255, .55); }
:root[data-theme="light"] .vf-lk .vhl-aide { color: var(--vf-text-2); }

/* Interrupteur ÉTEINT en mode clair : une fois le rail passé en gris très pâle,
   le bouton blanc ne s'en détachait plus que de 1,23:1 — on ne voyait plus dans
   quelle position il était. Un contour franc sur le rail règle ça sans toucher
   à la géométrie ni à l'animation. */
:root[data-theme="light"] .vf-lk .vhl-slide { border: 1px solid rgba(15, 23, 42, .28); }
:root[data-theme="light"] .vf-lk .vhl-slide:before { box-shadow: 0 1px 3px rgba(15, 23, 42, .30); }