/* ═══════════════════════════════════════════════════════════════════
   BLOCKX — ALGORITHME (ex-Scanner) PREMIUM
   Couche de refonte de l'outil. Chargée APRÈS blockx.css :
   elle gagne sur le design system de base, sans le contredire.

   Recalée sur la DA du 18/08 : le BLEU #38bdf8 est la teinte de
   l'Algorithme (« le Scanner, l'algorithme, la donnée »), l'OR
   #f0b429 le prestige, le violet ne subsiste que sur le X du
   wordmark. Les anciens violets « Obsidian » sont retirés — la
   progression des cartes monte ardoise → bleu → bleu roi → OR,
   plus jamais violet/magenta. Titres et chiffres en Bricolage
   Grotesque, données en mono, tabular-nums partout.
   L'échelle de PALIERS (radar → call → runner → diamond → nuclear)
   reste le langage visuel : le palier colore le badge, la bordure,
   la barre de perf et le filtre.

   Tout est scopé sous #scanner : aucune fuite vers le reste de l'app.
   ═══════════════════════════════════════════════════════════════════ */

#scanner{
  /* ── Paliers : une teinte = un niveau de signal ───────────────────
     Chaque palier a DEUX teintes : la couleur de marque (traits, fonds)
     et une « encre » vérifiée à 4.5:1 sur le fond de carte, pour tout
     ce qui est du texte. Le violet #9945FF ne passe qu'à 4.3:1 en petit
     corps : c'est la seule raison d'être de cette seconde variable. */
  --t-radar:#8a8a99;   --t-radar-ink:#9a9aa8;   --t-radar-soft:rgba(138,138,153,.12);  --t-radar-line:rgba(138,138,153,.30);
  --t-call:#38bdf8;    --t-call-ink:#7dd3fc;    --t-call-soft:rgba(56,189,248,.13);    --t-call-line:rgba(56,189,248,.38);
  --t-runner:#34d399;  --t-runner-ink:#34d399;  --t-runner-soft:rgba(52,211,153,.12);  --t-runner-line:rgba(52,211,153,.34);
  --t-diamond:#2dd4bf; --t-diamond-ink:#2dd4bf; --t-diamond-soft:rgba(45,212,191,.12); --t-diamond-line:rgba(45,212,191,.36);
  --t-nuclear:#f0b429; --t-nuclear-ink:#f0b429; --t-nuclear-soft:rgba(240,180,41,.13); --t-nuclear-line:rgba(240,180,41,.42);

  /* Palier courant — réassigné par [data-tier] sur chaque carte */
  --tier:var(--t-radar);
  --tier-ink:var(--t-radar-ink);
  --tier-soft:var(--t-radar-soft);
  --tier-line:var(--t-radar-line);

  /* ── Surfaces du scanner (légèrement plus profondes que l'app) ─── */
  --scn-bg:#08080c;
  --scn-surface:#0d0d13;
  --scn-raised:#12121a;
  --scn-line:rgba(255,255,255,.07);
  --scn-line-2:rgba(255,255,255,.13);
  --scn-text:#f2f2f7;
  --scn-text-2:#a2a2b0;
  --scn-text-3:#8b8b99;

  --scn-ease:cubic-bezier(.16,1,.3,1);
  --scn-r:14px;
}

/* Cartes : chaque palier réassigne le trio de variables. Tout le reste
   de la carte lit --tier, donc une seule ligne suffit à la recolorer. */
#scanner [data-tier="radar"]  {--tier:var(--t-radar);  --tier-ink:var(--t-radar-ink);  --tier-soft:var(--t-radar-soft);  --tier-line:var(--t-radar-line);}
#scanner [data-tier="call"]   {--tier:var(--t-call);   --tier-ink:var(--t-call-ink);   --tier-soft:var(--t-call-soft);   --tier-line:var(--t-call-line);}
#scanner [data-tier="runner"] {--tier:var(--t-runner); --tier-ink:var(--t-runner-ink); --tier-soft:var(--t-runner-soft); --tier-line:var(--t-runner-line);}
#scanner [data-tier="diamond"]{--tier:var(--t-diamond);--tier-ink:var(--t-diamond-ink);--tier-soft:var(--t-diamond-soft);--tier-line:var(--t-diamond-line);}
#scanner [data-tier="nuclear"]{--tier:var(--t-nuclear);--tier-ink:var(--t-nuclear-ink);--tier-soft:var(--t-nuclear-soft);--tier-line:var(--t-nuclear-line);}

/* ═══ 1. COQUE — le scanner est la page, pas une boîte ══════════════
   L'ancien outil vivait dans un grand rectangle bordé, calé à gauche,
   coiffé d'un bandeau-titre qui mangeait un tiers d'écran. Les trois
   disparaissent : une colonne centrée posée sur le fond de l'app, et
   le contenu commence là où l'œil arrive. La nav de l'app est fixe
   (68px desktop / 60px mobile) : la coque reprend cette clearance. */

section#scanner{background:var(--bx-bg)!important;}
#scanner .scanner-section.scn-shell{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  max-width:1180px;
  margin:0 auto;
  padding:calc(68px + 1.5rem) 2.2rem 4.5rem!important;
}
#scanner .scanner-section.scn-shell::before{display:none!important;}

/* ═══ 2. BARRE DE COMMANDE ══════════════════════════════════════════
   Une seule ligne de chrome pour tout l'outil : l'état de l'algorithme
   à gauche, les vues au centre, la preuve chiffrée et l'action à
   droite. Sticky sous la nav — dans une longue liste, le contrôle
   reste sous la main. */

#scanner .scn-bar{
  position:sticky;
  top:calc(68px + .6rem);
  z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.1rem;
  padding:.5rem .6rem .5rem 1rem;
  background:rgba(14,14,20,.88);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--bx-line-strong);
  border-radius:14px;
}

/* ── Identité + état ── */
#scanner .scn-id{display:flex;align-items:center;gap:.8rem;min-width:0;}
#scanner .scn-pulse{
  position:relative; flex-shrink:0;
  width:8px; height:8px; border-radius:50%;
  color:var(--bx-violet); background:currentColor;
}
#scanner .scn-pulse[data-state="ok"]{color:var(--bx-up);}
#scanner .scn-pulse[data-state="err"]{color:var(--bx-down);}
#scanner .scn-pulse::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  animation:scnPing 2.6s var(--scn-ease) infinite;
}
@keyframes scnPing{
  0%  {box-shadow:0 0 0 0 currentColor; opacity:.5;}
  75% {box-shadow:0 0 0 8px transparent; opacity:0;}
  100%{box-shadow:0 0 0 8px transparent; opacity:0;}
}
#scanner .scn-id-txt{display:flex;flex-direction:column;gap:.18rem;min-width:0;}
#scanner .scn-id-name{
  font-family:'Bricolage Grotesque','Space Grotesk',var(--bx-font,'Inter',sans-serif);
  font-size:1.08rem; font-weight:800; letter-spacing:-.02em;
  color:var(--scn-text); line-height:1;
}
#scanner .scn-id-state{
  font-size:.72rem; color:var(--scn-text-3); line-height:1.2;
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:46ch;
}
#scanner .scn-pulse[data-state="err"]~.scn-id-txt .scn-id-state{color:var(--bx-down);}

/* ── Vues ──
   position/height/z-index explicites : un sélecteur global
   `nav:not(#mainNav)` (CSS d'une page embarquée) impose sticky + 72px
   à tout <nav> — on le neutralise ici. */
#scanner .scn-views{
  display:flex; gap:2px;
  position:relative; height:auto; z-index:auto;
  padding:3px;
  /* !important : la couche claire legacy peint tout nav:not(#mainNav)
     en blanc !important — sans ça le rail sortait blanc dans l'app. */
  background:var(--bx-inset,#0a0a10)!important;
  border:1px solid var(--scn-line)!important;
  border-radius:12px;
}
/* L'encre qui GLISSE sous la vue active (posée par switchTab) —
   c'est elle qui rend le changement de catégorie vivant. */
#scanner .scn-views-ink{
  position:absolute; top:3px; bottom:3px; left:3px; width:0;
  border-radius:9px;
  background:var(--scn-raised);
  box-shadow:inset 0 0 0 1px var(--t-call-line),0 1px 0 rgba(0,0,0,.35);
  transition:left .38s cubic-bezier(.34,1.56,.64,1),width .38s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
#scanner .scn-view{
  appearance:none; border:0; margin:0;
  position:relative; z-index:1;
  background:transparent;
  color:var(--scn-text-2);
  font-family:var(--bx-font,'Inter',sans-serif);
  font-size:.86rem; font-weight:650; line-height:1;
  padding:.62rem 1.15rem;
  border-radius:9px;
  cursor:pointer;
  transition:color .15s,background .15s,transform .1s;
}
#scanner .scn-view:hover{color:var(--scn-text);}
#scanner .scn-view:active{transform:translateY(1px);}
#scanner .scn-view.active{
  background:var(--scn-raised);
  color:var(--scn-text);
  box-shadow:inset 0 0 0 1px var(--scn-line-2),0 1px 0 rgba(0,0,0,.35);
}
/* Quand l'encre est posée, elle porte la surface : les boutons redeviennent nus */
#scanner .scn-views.has-ink .scn-view.active{background:transparent;box-shadow:none;}
#scanner .scn-view:focus-visible{outline:2px solid var(--t-call);outline-offset:2px;}

/* ── Preuve + action ── */
#scanner .scn-side{display:flex;align-items:center;gap:.65rem;}
#scanner .scn-proof{
  display:flex; align-items:center; gap:.5rem;
  font-size:.73rem; color:var(--scn-text-3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#scanner .scn-proof b{
  font-family:'Bricolage Grotesque','Space Grotesk',var(--bx-font,'Inter',sans-serif);
  font-weight:800;font-size:.95rem;color:var(--scn-text);letter-spacing:-.01em;
}
#scanner .scn-proof-dot{width:3px;height:3px;border-radius:50%;background:var(--scn-text-3);opacity:.6;flex-shrink:0;}
#scanner .scn-refresh{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0!important;
  border-radius:9px!important;
  background:transparent!important;
  border:1px solid var(--scn-line)!important;
  color:var(--scn-text-2)!important;
  cursor:pointer;
  transition:border-color .16s,color .16s,background .16s,transform .1s;
}
#scanner .scn-refresh:hover{
  border-color:var(--t-call-line)!important;
  color:var(--scn-text)!important;
  background:var(--t-call-soft)!important;
}
#scanner .scn-refresh:active{transform:translateY(1px);}
#scanner .scn-refresh.is-spinning svg{animation:scnSpin .7s cubic-bezier(.4,.1,.2,1) 1;}
@keyframes scnSpin{to{transform:rotate(360deg);}}

/* (Le §3 vit après les media queries de la barre — voir RANGÉE DE CONTEXTE.) */

/* ── Barre de commande : responsive ── */
@media(max-width:920px){
  #scanner .scn-proof{display:none;}
}
@media(max-width:760px){
  #scanner .scanner-section.scn-shell{padding:calc(60px + 1rem) 1rem 3rem!important;}
  #scanner .scn-bar{
    top:calc(60px + .5rem);
    flex-wrap:wrap;
    gap:.6rem;
    padding:.55rem .65rem;
  }
  #scanner .scn-id{order:1;flex:1;min-width:0;}
  #scanner .scn-side{order:2;}
  #scanner .scn-views{
    order:3; flex:1 0 100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #scanner .scn-views::-webkit-scrollbar{display:none;}
  #scanner .scn-view{flex:1 0 auto;min-height:40px;}
  #scanner .scn-refresh{width:40px;height:40px;}
}
@media(prefers-reduced-motion:reduce){
  #scanner .scn-pulse::after{animation:none;}
  #scanner .scn-refresh.is-spinning svg{animation:none;}
}

/* Détections : plus de rangée de filtres — la liste suit directement la
   barre de commande, elle reprend donc son propre espacement. */
#scanner #panelLive{margin-top:1.1rem;}

/* ═══ 4. RANGÉE DE CONTEXTE — filtrer sans réfléchir ════════════════
   Un seul système pour l'Historique : rails segmentés (période, algo),
   recherche, tri. Mêmes surfaces que la barre de commande — l'outil
   parle d'une seule voix. */

#scanner .scn-lens{
  display:flex; align-items:center; gap:.55rem;
  flex-wrap:wrap;
  margin:1.05rem 0 1.1rem!important;
  padding:0!important;
  border:none!important;
}
#scanner .scn-lens-rail{
  display:flex; align-items:center; gap:2px;
  padding:3px;
  background:var(--bx-inset,#0a0a10);
  border:1px solid var(--scn-line);
  border-radius:11px;
}
#scanner .sf-chip{
  appearance:none; margin:0;
  display:inline-flex; align-items:center; gap:.42rem;
  min-height:32px;
  padding:0 .8rem!important;
  border:none!important; border-radius:8px!important;
  background:transparent!important;
  color:var(--scn-text-2)!important;
  font-family:var(--bx-font,'Inter',sans-serif)!important;
  font-size:.76rem!important; font-weight:600!important;
  line-height:1; white-space:nowrap;
  cursor:pointer;
  transition:color .15s,background .15s,transform .1s,opacity .15s;
}
#scanner .sf-chip svg{width:12px;height:12px;flex-shrink:0;opacity:.8;}
#scanner .sf-chip:hover{color:var(--scn-text)!important;}
#scanner .sf-chip:active{transform:translateY(1px);}
#scanner .sf-chip.active,
#scanner .sf-chip.on{
  background:var(--scn-raised)!important;
  color:var(--scn-text)!important;
  box-shadow:inset 0 0 0 1px var(--scn-line-2),0 1px 0 rgba(0,0,0,.35)!important;
}
#scanner .sf-chip:focus-visible{outline:2px solid var(--t-call);outline-offset:2px;}
/* Niveau vide : on le dit avant le clic plutôt qu'après. */
#scanner .sf-chip.is-empty{opacity:.42;}
#scanner .sf-chip.is-empty:hover{opacity:.75;}
/* Compteur par niveau — posé par scnUpdateTierCounts */
#scanner .sf-chip .sf-n{
  font-size:.68rem; font-weight:700;
  color:var(--scn-text-3);
  font-variant-numeric:tabular-nums;
  margin-left:.3rem;
}
#scanner .sf-chip.active .sf-n{color:var(--t-call-ink);}
/* KOL : hors rail, garde une bordure de chip autonome */
#scanner .sf-kol{
  border:1px solid var(--scn-line)!important;
  border-radius:9px!important;
  min-height:38px;
}
#scanner .sf-kol.kol-active{
  border-color:var(--t-call-line)!important;
  background:var(--t-call-soft)!important;
  color:#fff!important;
}
#scanner .sf-count{
  font-size:.73rem; color:var(--scn-text-3);
  margin-left:auto; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ── Recherche ── */
#scanner .scn-search{
  position:relative; display:flex; align-items:center;
  flex:1 1 220px; min-width:200px; max-width:340px;
}
#scanner .scn-search>svg{
  position:absolute; left:11px;
  width:13px; height:13px;
  color:var(--scn-text-3); pointer-events:none;
}
#scanner .scn-search input{
  width:100%; min-height:38px;
  background:var(--scn-surface);
  border:1px solid var(--scn-line);
  border-radius:10px;
  padding:0 2rem 0 2.05rem;
  color:var(--scn-text);
  font-family:var(--bx-font,'Inter',sans-serif);
  font-size:.78rem;
  outline:none;
  box-sizing:border-box;
  transition:border-color .16s,background .16s;
}
#scanner .scn-search input::placeholder{color:var(--scn-text-3);}
#scanner .scn-search input:focus{
  border-color:var(--t-call-line);
  background:var(--scn-raised);
}
#scanner .scn-search-x{
  position:absolute; right:6px;
  display:none; align-items:center; justify-content:center;
  width:26px; height:26px;
  border:none; border-radius:7px;
  background:transparent; color:var(--scn-text-3);
  cursor:pointer;
  transition:color .15s,background .15s;
}
#scanner .scn-search input:not(:placeholder-shown)~.scn-search-x{display:flex;}
#scanner .scn-search-x:hover{color:var(--scn-text);background:rgba(255,255,255,.06);}

/* ── Tri ── */
#scanner .scn-lens-right{display:flex;align-items:center;gap:.55rem;margin-left:auto;}
#scanner .scn-sortwrap{position:relative;}
#scanner .scn-sort-btn{
  border:1px solid var(--scn-line)!important;
  border-radius:9px!important;
  background:var(--scn-surface)!important;
  min-height:38px;
}
#scanner .scn-sort-btn:hover{border-color:var(--scn-line-2)!important;}
#scanner .scn-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:200px; padding:4px;
  background:var(--scn-raised);
  border:1px solid var(--scn-line-2);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  z-index:120;
  animation:scnMenuIn .16s var(--scn-ease);
}
@keyframes scnMenuIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
#scanner .scn-menu-opt{
  appearance:none; margin:0;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  width:100%; text-align:left;
  padding:.55rem .7rem;
  border:none; border-radius:8px;
  background:transparent;
  color:var(--scn-text-2);
  font-family:var(--bx-font,'Inter',sans-serif);
  font-size:.78rem; font-weight:600; line-height:1;
  cursor:pointer;
  transition:background .13s,color .13s;
}
#scanner .scn-menu-opt:hover{background:rgba(255,255,255,.05);color:var(--scn-text);}
#scanner .scn-menu-opt.active{color:var(--scn-text);}
#scanner .scn-menu-opt.active::after{
  content:'✓';
  font-size:.78rem;
  color:var(--bx-violet-hover,#a962ff);
}

/* ── Volet dates précises ── */
#scanner .scn-dates{
  display:flex; align-items:flex-end; gap:.7rem; flex-wrap:wrap;
  margin:-.35rem 0 1rem;
  padding:.7rem .85rem;
  background:var(--scn-surface);
  border:1px solid var(--scn-line);
  border-radius:12px;
  animation:scnMenuIn .16s var(--scn-ease);
}
#scanner .scn-dates-f{
  display:flex; flex-direction:column; gap:.32rem;
  font-size:.68rem; font-weight:600; color:var(--scn-text-3);
}
#scanner .scn-dates-f input{
  min-height:34px; padding:0 .6rem;
  background:var(--bx-inset,#0a0a10);
  border:1px solid var(--scn-line);
  border-radius:8px;
  color:var(--scn-text);
  font-family:var(--bx-font,'Inter',sans-serif);
  font-size:.75rem;
  color-scheme:dark;
  outline:none;
  transition:border-color .16s;
}
#scanner .scn-dates-f input:focus{border-color:var(--bx-violet-line,rgba(153,69,255,.35));}
#scanner .scn-dates-clear{
  border:1px solid var(--scn-line)!important;
  border-radius:8px!important;
  min-height:34px;
}

/* ── Ligne de synthèse de l'historique ── */
#scanner .scn-hist-meta{
  font-size:.73rem; color:var(--scn-text-3);
  margin:-.35rem 0 .95rem;
  font-variant-numeric:tabular-nums;
}
#scanner .scn-hist-meta:empty{display:none;}

/* ── Contexte : responsive ── */
@media(max-width:860px){
  #scanner .scn-lens-hist .scn-search{flex:1 0 100%;max-width:none;}
  #scanner .scn-lens-right{margin-left:0;flex-wrap:wrap;}
  #scanner .scn-lens-hist .scn-lens-rail{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #scanner .scn-lens-hist .scn-lens-rail::-webkit-scrollbar{display:none;}
}

/* ═══ 5. GRILLE + ENTRÉE EN SCÈNE ═══════════════════════════════════ */

#scanner .scn-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(336px,1fr));
  gap:1.05rem;
  padding:0;
}
#scanner .scn-grid>.scn-card{
  animation:scnCardIn .5s var(--scn-ease) both;
  animation-delay:calc(var(--i,0) * 38ms);
}
@keyframes scnCardIn{
  from{opacity:0; transform:translateY(16px) scale(.965);}
  to  {opacity:1; transform:none;}
}
@media(max-width:760px){
  #scanner .scn-grid{grid-template-columns:1fr;gap:.75rem;}
}

/* ═══ 6. LA FICHE DE CALL ═══════════════════════════════════════════
   Gabarit « surface peinte » : la fiche n'est plus une boîte sombre à
   filet, c'est un bloc de couleur. Identité en haut à gauche, multiple
   écrit en grand en haut à droite, l'adresse et la piste de jalons
   ferment le bas — le tout sur un dégradé.
   La teinte EST la donnée : ardoise tant que le call n'a pas doublé,
   bleue dès la première médaille (×2). Rien d'autre ne colore la
   carte ; à l'intérieur tout est blanc translucide, l'or restant
   réservé au palier NUCLEAR et aux médailles. */

#scanner .scn-card{
  position:relative;
  display:flex; flex-direction:column; gap:.6rem;
  min-height:176px;
  padding:1.2rem 1.2rem 1.05rem;
  background:
    radial-gradient(125% 105% at 84% -8%,rgba(56,189,248,.16),transparent 60%),
    linear-gradient(152deg,#151b2b 0%,#101422 52%,#090b13 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  color:#fff;
  transition:transform .18s var(--scn-ease),border-color .18s,box-shadow .25s;
}
#scanner .scn-card:hover{
  border-color:rgba(255,255,255,.2);
  transform:translateY(-3px);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.8);
}
/* Palier franchi (×2 = première médaille) : la carte s'allume en bleu.
   `:has` plutôt qu'une classe posée en JS — le rafraîchissement live
   ajoute déjà `data-medal` sur le multiple, la teinte suit toute
   seule quand un call décolle sous les yeux de l'utilisateur. */
#scanner .scn-card:has(.scn-perf-x[data-medal]){
  background:
    radial-gradient(135% 115% at 88% -10%,rgba(104,174,255,.75),transparent 58%),
    linear-gradient(152deg,#2d67d4 0%,#1c4ab8 46%,#0a2668 100%);
  border-color:rgba(255,255,255,.16);
}
#scanner .scn-card:has(.scn-perf-x[data-medal]):hover{border-color:rgba(255,255,255,.3);}
/* … et elle continue de monter avec la médaille : un ×14 ne doit pas
   être peint comme un ×2. La progression suit la DA — bleu, bleu roi,
   puis l'OR du prestige (×10) et l'or blanc (légende). Plus jamais de
   violet/magenta : c'était la palette d'avant la DA du 18/08. */
#scanner .scn-card:has(.scn-perf-x[data-medal="silver"]){
  background:
    radial-gradient(135% 115% at 88% -10%,rgba(94,140,255,.8),transparent 58%),
    linear-gradient(152deg,#2f55e2 0%,#1e3ac0 46%,#0c1a66 100%);
}
#scanner .scn-card:has(.scn-perf-x[data-medal="gold"]){
  background:
    radial-gradient(135% 115% at 88% -10%,rgba(255,205,92,.85),transparent 58%),
    linear-gradient(152deg,#d99b16 0%,#a86f08 46%,#4a2e02 100%);
}
#scanner .scn-card:has(.scn-perf-x[data-medal="legend"]){
  background:
    radial-gradient(135% 115% at 88% -10%,rgba(255,236,170,.9),transparent 58%),
    linear-gradient(152deg,#f0b429 0%,#c07f0a 46%,#5c3a03 100%);
}

/* ── Tête : identité + multiple ── */
#scanner .scn-card-head{display:flex;align-items:flex-start;gap:.7rem;}
#scanner .scn-ava{
  position:relative; flex-shrink:0;
  width:42px; height:42px; border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
  background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
#scanner .scn-ava span{
  font-size:.56rem; font-weight:800; letter-spacing:.05em;
  color:rgba(255,255,255,.72);
}
#scanner .scn-ava img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
#scanner .scn-card-who{min-width:0;flex:1;display:flex;flex-direction:column;gap:.18rem;}
#scanner .scn-card-sym{
  font-family:'Bricolage Grotesque','Space Grotesk',var(--bx-font,'Inter',sans-serif);
  font-size:1.16rem; font-weight:800; letter-spacing:-.02em;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#scanner .scn-card-meta{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
#scanner .scn-card-when{
  font-size:.68rem; color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}
#scanner .scn-verdict{
  appearance:none; margin:0; flex-shrink:0;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.36rem .62rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.13);
  color:#fff;
  font-family:var(--bx-font,'Inter',sans-serif);
  font-size:.68rem; font-weight:700; line-height:1; letter-spacing:.05em;
  transition:background .16s,transform .1s;
}
#scanner .scn-verdict svg{width:11px;height:11px;flex-shrink:0;opacity:.85;}
#scanner .scn-verdict b{font-weight:800;font-variant-numeric:tabular-nums;}
#scanner button.scn-verdict{cursor:pointer;}
#scanner button.scn-verdict:hover{background:rgba(255,255,255,.24);}
#scanner button.scn-verdict:active{transform:translateY(1px);}
#scanner .scn-verdict:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* NUCLEAR : la seule exception de teinte — l'or du prestige */
#scanner .scn-verdict.is-nuclear{
  border-color:rgba(232,193,90,.5);
  background:rgba(232,193,90,.18);
  color:#f4dc9c;
}
#scanner button.scn-verdict.is-nuclear:hover{background:rgba(232,193,90,.28);}

/* ── Performance : le multiple est le héros ──
   Blanc plein, pas de vert/rouge : sur une carte peinte la couleur de
   performance se battrait avec le fond. C'est la teinte de la carte
   qui dit si le call a payé ; un multiple sous 1 se contente de pâlir. */
#scanner .scn-perf-x{
  flex-shrink:0;
  display:flex; align-items:center; gap:.35rem;
  font-family:'Bricolage Grotesque','Space Grotesk',var(--bx-font,'Inter',sans-serif);
  font-size:1.85rem; font-weight:800; letter-spacing:-.03em; line-height:1.05;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
#scanner .scn-perf-x.is-down{color:rgba(255,255,255,.55);}
#scanner .scn-perf-x .scn-medal{display:inline-flex;}
#scanner .scn-perf-x .scn-medal svg{width:15px;height:15px;}
#scanner .scn-perf-x[data-medal="bronze"] .scn-medal{color:var(--bx-bronze,#c08a5a);}
#scanner .scn-perf-x[data-medal="silver"] .scn-medal{color:var(--bx-silver,#aab4c4);}
#scanner .scn-perf-x[data-medal="gold"] .scn-medal,
#scanner .scn-perf-x[data-medal="legend"] .scn-medal{color:var(--bx-gold,#e8c15a);}
#scanner .scn-route{
  font-size:.73rem; font-weight:500;
  color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#scanner .scn-route b{color:rgba(255,255,255,.86);font-weight:650;}
#scanner .scn-route-arr{opacity:.5;margin:0 .12rem;}

/* ── Bas de carte : l'adresse puis la piste ── */
#scanner .scn-card-foot{
  margin-top:auto;
  display:flex; flex-direction:column; gap:.6rem;
  padding-top:.35rem;
}

/* ── Piste de jalons : ×2 · ×5 · ×10 (échelle log) ── */
#scanner .scn-track{
  position:relative;
  height:9px; border-radius:999px;
  background:rgba(255,255,255,.2);
  margin:0 1px;
}
#scanner .scn-track-fill{
  position:absolute; top:0; bottom:0; left:0;
  min-width:8px;
  border-radius:5px;
  background:#fff;
  transition:width .6s var(--scn-ease);
}
#scanner .scn-track-dot{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.5);
  border:0;
  transition:background .3s;
}
/* Un jalon franchi est posé SUR le remplissage blanc : il s'encre au
   lieu de s'éclairer, sinon il disparaîtrait dans la barre. */
#scanner .scn-track-dot.hit{background:rgba(8,26,70,.45);}

/* ── L'action : copier l'adresse ──
   Plus un bouton encadré : l'adresse elle-même est le bouton, comme
   sur la maquette. Le mot « Copier » n'apparaît qu'au survol et sert
   d'accusé de réception après le clic. */
#scanner .scn-copy{
  appearance:none; margin:0; padding:0; border:0; background:none;
  align-self:flex-start; max-width:100%;
  display:flex; align-items:center; gap:.42rem;
  color:rgba(255,255,255,.58);
  cursor:pointer;
  transition:color .16s,transform .1s;
}
#scanner .scn-copy svg{width:12px;height:12px;flex-shrink:0;opacity:.85;}
#scanner .scn-copy code{
  font-family:var(--bx-mono,'JetBrains Mono','Space Mono',monospace);
  font-size:.72rem;
  color:inherit;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#scanner .scn-copy i{
  font-style:normal;
  font-family:var(--bx-font,'Inter',sans-serif);
  font-size:.66rem; font-weight:650;
  opacity:0;
  transition:opacity .16s;
  white-space:nowrap;
}
#scanner .scn-copy:hover{color:#fff;}
#scanner .scn-copy:hover i{opacity:.7;}
#scanner .scn-copy:active{transform:translateY(1px);}
#scanner .scn-copy:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px;}
#scanner .scn-copy:focus-visible i{opacity:.7;}
/* Confirmation sur place — pas de toast dans un coin */
#scanner .scn-copy.ok{color:#fff;}
#scanner .scn-copy.ok i{opacity:1;}

/* ── L'action : ouvrir le token sur la plateforme favorite ──
   Posée sous la piste, en verre blanc : sur une carte peinte le violet
   de marque ne se lit plus, seul le blanc translucide tient. */
#scanner .scn-trade{
  display:flex; align-items:center; gap:.55rem;
  width:100%; min-height:40px; margin-top:.15rem;
  padding:0 .8rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.1);
  color:#fff;
  text-decoration:none;
  transition:border-color .16s,background .16s,transform .1s;
}
#scanner .scn-trade img{
  width:16px; height:16px; flex-shrink:0;
  border-radius:5px; object-fit:cover;
}
#scanner .scn-trade span{
  flex:1; text-align:left;
  font:650 .72rem/1 var(--bx-font,'Inter',sans-serif);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#scanner .scn-trade svg{
  width:13px; height:13px; flex-shrink:0;
  color:rgba(255,255,255,.75);
}
#scanner .scn-trade:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.32);
}
#scanner .scn-trade:active{transform:translateY(1px);}
#scanner .scn-trade:focus-visible{outline:2px solid #fff;outline-offset:2px;}

/* ── Charger plus (historique) ── */
#scanner .scn-more-wrap{grid-column:1/-1;text-align:center;padding:1.2rem 0 .3rem;}
#scanner .scn-more{
  appearance:none; margin:0;
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:40px; padding:0 1.3rem;
  border:1px solid var(--scn-line);
  border-radius:10px;
  background:var(--scn-surface);
  color:var(--scn-text-2);
  font:600 .8rem var(--bx-font,'Inter',sans-serif);
  cursor:pointer;
  transition:border-color .16s,color .16s,transform .1s;
}
#scanner .scn-more span{font-size:.72rem;color:var(--scn-text-3);font-variant-numeric:tabular-nums;}
#scanner .scn-more:hover{border-color:var(--t-call-line);color:var(--scn-text);}
#scanner .scn-more:active{transform:translateY(1px);}
/* Chargement de la page suivante : le bouton reste en place, inerte. */
#scanner .scn-more.is-loading{opacity:.55;cursor:progress;transform:none;}

/* ═══ 6bis. PERFORMANCE — ce que l'algorithme rapporte (bx-perf-) ═══
   L'ancien ecran est le screen 1 du dossier DA, note 0/10
   (docs/da/screen1-anti-modele.png) : « L'algorithme, chiffre » suivi
   d'un sous-titre explicatif, trois chiffres empiles dans un cadre
   centre a 720px, cinq barres violettes, trois medailles et une note de
   bas de bloc. Tout est repris ici :

   · Aucun titre, aucun sous-titre, aucune note de pied. L'onglet
     s'appelle deja Performance (DA §5 et §8).
   · DEUX teintes (DA §3) : BLEU #38bdf8 / encre #04202e, la teinte du
     Scanner — la mesure ; OR #f0b429 / encre #2e1d00, le prestige — la
     tranche ×10 et plus et le meilleur call. Le reste est ardoise.
     Aucun halo, aucune ombre coloree, aucune dilution a 15 %.
   · La repartition est mise en scene au lieu d'etre listee : cinq
     colonnes qui montent, la mesure a cote et non au-dessus.
   · Le geste, propre a cet ecran : un curseur MAGNETIQUE accroche la
     colonne la plus proche du pointeur et la lecture suit. Un appui la
     garde, un second la relache. Le badge se retourne (§15), la ligne
     du classement se tire (§16), ici le curseur accroche. */

#scanner .bx-perf{
  --pf-b:#38bdf8;  --pf-bk:#04202e;
  --pf-o:#f0b429;  --pf-ok:#2e1d00;
  max-width:1080px; margin:1.35rem auto 0;
  display:flex; flex-direction:column; gap:1rem;
}
#scanner .bx-perf-chrome{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
#scanner .bx-perf-chrome .scn-lens-rail{margin:0;}
#scanner .bx-perf .scn-dates{margin:0;}
#scanner .bx-perf-empty{font-size:.82rem;color:var(--scn-text-3);margin:0;padding:.35rem 0;}

/* ── La mesure : l'anneau porte la teinte, le chiffre reste en encre ── */
#scanner .bx-perf-top{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:1rem; align-items:stretch;
}
#scanner .bx-perf-mes{
  display:flex; align-items:center; gap:1.35rem;
  padding:1.3rem 1.4rem;
  border-radius:18px;
  background:color-mix(in oklab,var(--pf-b) 8%,var(--scn-surface));
  border:2px solid color-mix(in oklab,var(--pf-b) 30%,transparent);
}
#scanner .bx-perf-ring{position:relative;width:124px;height:124px;flex:none;color:var(--pf-b);}
#scanner .bx-perf-ring svg{width:100%;height:100%;display:block;}
#scanner .bx-perf-ring #wrRingArc{transition:stroke-dashoffset 1.1s var(--scn-ease);}
#scanner .bx-perf-ring-in{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; text-align:center;
}
#scanner .bx-perf-ring-in b{
  font-family:'Bricolage Grotesque','Space Grotesk',var(--bx-font,'Inter',sans-serif);
  font-size:2rem; font-weight:800; letter-spacing:-.03em; line-height:1;
  color:var(--scn-text); font-variant-numeric:tabular-nums;
}
#scanner .bx-perf-ring-in span{font-size:.8125rem;font-weight:600;color:var(--scn-text-3);}
#scanner .bx-perf-facts{display:flex;flex-direction:column;gap:1rem;margin:0;min-width:0;}
#scanner .bx-perf-facts dt{font-size:.8125rem;font-weight:600;color:var(--scn-text-3);margin:0 0 .2rem;}
#scanner .bx-perf-facts dd{
  margin:0; font-size:1.35rem; font-weight:800; letter-spacing:-.02em;
  font-family:'Bricolage Grotesque','Space Grotesk',var(--bx-font,'Inter',sans-serif);
  color:var(--scn-text); font-variant-numeric:tabular-nums; line-height:1.1;
}

/* ── La repartition : cinq colonnes, pas cinq lignes ── */
#scanner .bx-perf-chart{
  margin:0; padding:1.05rem 1.2rem 1rem;
  border-radius:18px;
  background:var(--scn-surface); border:1px solid var(--scn-line);
  display:flex; flex-direction:column; gap:.9rem;
}
#scanner .bx-perf-read{
  font-size:.9375rem; color:var(--scn-text-3); min-height:1.4em;
  font-variant-numeric:tabular-nums;
}
#scanner .bx-perf-read b{
  font-family:'Bricolage Grotesque','Space Grotesk',var(--bx-font,'Inter',sans-serif);
  font-size:1.3rem;font-weight:800;color:var(--scn-text);letter-spacing:-.02em;
}
#scanner .bx-perf-read span{color:var(--scn-text-2);font-weight:600;}
#scanner .bx-perf-bars{
  flex:1; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:.55rem; align-items:end; min-height:186px;
}
#scanner .bx-perf-bar{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  justify-self:center; width:100%; max-width:78px;
  height:100%; justify-content:flex-end;
  padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--bx-font,'Inter',sans-serif);
}
#scanner .bx-perf-bar-n{
  font-size:.9375rem; font-weight:700; color:var(--scn-text-2);
  font-variant-numeric:tabular-nums; transition:color .16s;
}
#scanner .bx-perf-bar-col{
  width:100%; max-width:78px; flex:1; display:flex; align-items:flex-end;
  border-radius:8px; background:rgba(255,255,255,.04);
  overflow:hidden; outline:2px solid transparent; outline-offset:0;
  transition:outline-color .16s,transform .16s var(--scn-ease);
}
#scanner .bx-perf-bar-col i{
  display:block; width:100%; height:0; border-radius:8px;
  background:var(--pf-b);
  transition:height .8s var(--scn-ease);
}
#scanner .bx-perf-bars.in .bx-perf-bar:nth-child(2) .bx-perf-bar-col i{transition-delay:.06s;}
#scanner .bx-perf-bars.in .bx-perf-bar:nth-child(3) .bx-perf-bar-col i{transition-delay:.12s;}
#scanner .bx-perf-bars.in .bx-perf-bar:nth-child(4) .bx-perf-bar-col i{transition-delay:.18s;}
#scanner .bx-perf-bars.in .bx-perf-bar:nth-child(5) .bx-perf-bar-col i{transition-delay:.24s;}
#scanner .bx-perf-bar.is-gold .bx-perf-bar-col i{background:var(--pf-o);}
#scanner .bx-perf-bar-l{
  font-size:.8125rem; font-weight:600; color:var(--scn-text-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:color .16s;
}
/* Le curseur accroche : la colonne tenue se cercle et se souleve. Aucune
   colonne ne s'assombrit — une teinte qu'on delave devient sale (DA §3). */
#scanner .bx-perf-bar.on .bx-perf-bar-col{outline-color:var(--pf-b);transform:translateY(-3px);}
#scanner .bx-perf-bar.is-gold.on .bx-perf-bar-col{outline-color:var(--pf-o);}
#scanner .bx-perf-bar.on .bx-perf-bar-n,#scanner .bx-perf-bar.on .bx-perf-bar-l{color:var(--scn-text);}
#scanner .bx-perf-bar:focus-visible{outline:2px solid var(--pf-b);outline-offset:3px;border-radius:10px;}

/* ── Comparaison V2 / V3 (mode « Les deux ») ── */
#scanner .bx-perf-cmp{
  padding:1.05rem 1.2rem 1.15rem;
  background:var(--scn-surface); border:1px solid var(--scn-line);
  border-radius:18px;
}
#scanner .bx-perf-cmp h3,#scanner .bx-perf-best h3{
  margin:0 0 .85rem; font-size:.8125rem; font-weight:700;
  letter-spacing:.02em; color:var(--scn-text-3);
}
#scanner .bx-perf-cmp-row{
  display:grid; grid-template-columns:11.5rem repeat(3,1fr);
  align-items:baseline; gap:.7rem;
  padding:.65rem 0; border-bottom:1px solid var(--scn-line);
}
#scanner .bx-perf-cmp-row:last-child{border-bottom:none;}
#scanner .bx-perf-cmp-name{
  display:flex; flex-direction:column; gap:.15rem;
  font-size:.9375rem; font-weight:750; color:var(--scn-text);
}
#scanner .bx-perf-cmp-name i{font-style:normal;font-size:.8125rem;font-weight:600;color:var(--scn-text-3);}
#scanner .bx-perf-cmp-v{
  display:flex; flex-direction:column; gap:.15rem;
  font-size:1.1rem; font-weight:750; color:var(--scn-text);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
#scanner .bx-perf-cmp-v i{font-style:normal;font-size:.8125rem;font-weight:600;color:var(--scn-text-3);letter-spacing:0;}

/* ── Meilleurs calls : le premier en aplat, les deux autres en surface ── */
#scanner .bx-perf-best-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem;
}
#scanner .bx-perf-call{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:.2rem .7rem;
  align-items:center;
  padding:.95rem 1.05rem; border-radius:15px;
  background:var(--scn-raised); border:1px solid var(--scn-line);
}
#scanner .bx-perf-call.r1{background:var(--pf-o);border-color:var(--pf-o);color:var(--pf-ok);}
#scanner .bx-perf-call.r2,#scanner .bx-perf-call.r3{border-left:2px solid var(--pf-o);}
#scanner .bx-perf-call-rk{
  grid-row:span 2; display:grid; place-items:center;
  width:30px; height:30px; border-radius:9px;
  background:color-mix(in oklab,var(--scn-text) 9%,transparent); color:var(--scn-text-2);
  font-size:.9375rem; font-weight:750; font-variant-numeric:tabular-nums;
}
#scanner .bx-perf-call.r1 .bx-perf-call-rk{background:var(--pf-ok);color:var(--pf-o);}
#scanner .bx-perf-call-sym{
  font-size:.9375rem; font-weight:700; color:var(--scn-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#scanner .bx-perf-call.r1 .bx-perf-call-sym{color:var(--pf-ok);}
#scanner .bx-perf-call-x{
  grid-column:2; font-size:1.65rem; font-weight:800; letter-spacing:-.03em;
  font-family:'Bricolage Grotesque','Space Grotesk',var(--bx-font,'Inter',sans-serif);
  color:var(--scn-text); font-variant-numeric:tabular-nums; line-height:1.05;
}
#scanner .bx-perf-call.r1 .bx-perf-call-x{color:var(--pf-ok);}
#scanner .bx-perf-call-mc{
  grid-column:2; font-size:.8125rem; font-weight:600; color:var(--scn-text-3);
  font-variant-numeric:tabular-nums;
}
#scanner .bx-perf-call.r1 .bx-perf-call-mc{color:var(--pf-ok);opacity:.78;}

@media(max-width:900px){
  #scanner .bx-perf-top{grid-template-columns:1fr;}
  #scanner .bx-perf-best-grid{grid-template-columns:1fr;}
  #scanner .bx-perf-cmp-row{grid-template-columns:1fr 1fr;gap:.5rem .7rem;}
  #scanner .bx-perf-cmp-name{grid-column:1 / -1;}
}
@media(max-width:560px){
  #scanner .bx-perf-mes{flex-direction:column;align-items:flex-start;gap:1rem;}
  #scanner .bx-perf-facts{flex-direction:row;gap:1.6rem;}
  #scanner .bx-perf-bars{gap:.35rem;min-height:150px;}
  #scanner .bx-perf-bar-l{font-size:.75rem;}
}
@media(prefers-reduced-motion:reduce){
  #scanner .bx-perf-bar-col i,#scanner .bx-perf-ring #wrRingArc{transition:none;}
}

/* Boutons « Vider » : destructifs, donc discrets au repos et rouges au survol */
#scanner .btn-reset{
  min-height:32px; padding:0 .75rem!important;
  border-radius:9px!important;
  background:var(--scn-surface)!important;
  border:1px solid var(--scn-line)!important;
  color:var(--scn-text-3)!important;
  font-family:var(--bx-font,'Inter',sans-serif)!important;
  font-size:.73rem!important; font-weight:600!important;
  cursor:pointer;
  transition:color .16s,border-color .16s,background .16s;
}
#scanner .btn-reset:hover{
  color:#ff5c5c!important;
  border-color:rgba(255,92,92,.35)!important;
  background:rgba(255,92,92,.07)!important;
}
body.bx-light #scanner .btn-reset:hover{color:#c62828!important;border-color:rgba(198,40,40,.35)!important;background:rgba(198,40,40,.06)!important;}
#scanner .btn-reset:focus-visible{outline:2px solid #ff5c5c;outline-offset:2px;}

/* (.hist-algo est stylé par le système .sf-chip du §4 — le legacy
   .hist-act/.hist-act-main a quitté le markup.) */
#scanner .hist-v3badge{
  border-radius:6px!important;
  font-family:var(--bx-font,'Inter',sans-serif)!important;
  font-size:.6rem!important; font-weight:700!important;
  padding:.1rem .38rem!important;
  margin-left:.35rem;
}
#scanner .hist-v3badge.keep{color:var(--t-runner-ink)!important;background:var(--t-runner-soft)!important;border:1px solid var(--t-runner-line)!important;}
#scanner .hist-v3badge.drop{color:var(--scn-text-3)!important;background:rgba(255,255,255,.04)!important;border:1px solid var(--scn-line)!important;}
#scanner .hist-v3badge.none{color:var(--scn-text-3)!important;background:none!important;border:1px solid var(--scn-line)!important;}

/* ═══ 7. ÉTATS — attente, vide, erreur ══════════════════════════════
   Un seul gabarit calme, posé sur le fond nu : titre 15px, sous-texte
   13px qui explique ce qui va se passer. Jamais d'emoji, jamais de
   boîte en pointillés. */

#scanner .scn-hold{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:4.5rem 1.5rem;
  text-align:center;
}
#scanner .scn-hold-ring{
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--scn-line-2);
  border-top-color:var(--bx-violet);
  animation:scnSpin .85s linear infinite;
  margin-bottom:.4rem;
}
#scanner .scn-hold-t{font-size:.95rem;font-weight:650;color:var(--scn-text);}
#scanner .scn-hold-s{font-size:.8rem;color:var(--scn-text-3);max-width:46ch;line-height:1.55;}
@media(prefers-reduced-motion:reduce){#scanner .scn-hold-ring{animation:none;}}

/* Gabarit legacy — encore utilisé par le rapport « 0 signal » du mode debug */
#scanner .empty-state,
#scanner .hist-empty{
  padding:4rem 1.5rem!important;
  text-align:center;
  border:1px dashed var(--scn-line)!important;
  border-radius:var(--scn-r);
  background:var(--scn-surface);
}
#scanner .empty-title{
  font-size:1rem; font-weight:600;
  color:var(--scn-text-2)!important;
  margin-bottom:.35rem;
}
#scanner .empty-sub{font-size:.78rem;color:var(--scn-text-3)!important;}
#scanner .loading-state{padding:4rem 1.5rem!important;}
#scanner .spinner{
  border-color:var(--scn-line)!important;
  border-top-color:var(--t-call)!important;
}

/* Squelettes de chargement — la grille garde sa place, pas de saut. */
#scanner .scn-skel{
  height:392px;
  border-radius:var(--scn-r);
  border:1px solid var(--scn-line);
  background:linear-gradient(100deg,var(--scn-surface) 30%,var(--scn-raised) 50%,var(--scn-surface) 70%);
  background-size:220% 100%;
  animation:scnSkel 1.5s ease-in-out infinite;
}
@keyframes scnSkel{from{background-position:180% 0}to{background-position:-80% 0}}

/* ═══ 8. TOAST DE COPIE ═════════════════════════════════════════════ */

.scn-toast{
  position:fixed; left:50%; bottom:28px;
  transform:translate(-50%,16px);
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem;
  border-radius:11px;
  background:#12121a;
  border:1px solid rgba(46,226,122,.35);
  color:#f2f2f7;
  font-family:'Inter',sans-serif; font-size:.8rem; font-weight:600;
  box-shadow:0 12px 32px rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .2s,transform .28s cubic-bezier(.16,1,.3,1);
  z-index:9999;
}
.scn-toast.show{opacity:1;transform:translate(-50%,0);}
.scn-toast svg{width:15px;height:15px;color:#2ee27a;flex-shrink:0;}

/* ═══ 9. MODE CLAIR ═════════════════════════════════════════════════
   Le scanner sur blanc. Les tokens locaux --scn-* basculent, le reste
   de la palette vient de --bx-* (déjà clair sous body.bx-light) ; on
   ne reprend ici que les fonds et voiles codés en dur — voiles blancs
   devenus voiles d'encre, verre de la barre, rail de l'anneau. */

body.bx-light #scanner{
  --scn-bg:#f4f4f8;
  --scn-surface:#ffffff;
  --scn-raised:#f2f2f7;
  --scn-line:rgba(16,16,38,.1);
  --scn-line-2:rgba(16,16,38,.18);
  --scn-text:#15151f;
  --scn-text-2:#4c4c60;
  --scn-text-3:#6c6c7a;
  /* --t-call-* en clair : le bleu de l'Algorithme, foncé pour tenir sur blanc */
  --t-call:#0284c7;
  --t-call-ink:#0369a1;
  --t-call-soft:rgba(2,132,199,.08);
  --t-call-line:rgba(2,132,199,.32);
}

/* Barre de commande : verre clair */
body.bx-light #scanner .scn-bar{
  background:rgba(252,252,254,.9);
  border-color:var(--scn-line-2);
}
body.bx-light #scanner .scn-view.active{
  box-shadow:inset 0 0 0 1px var(--scn-line-2),0 1px 0 rgba(16,16,38,.05);
}

/* Voiles blancs → voiles d'encre */
body.bx-light #scanner .scn-menu-opt:hover{background:rgba(16,16,38,.05);}
body.bx-light #scanner .scn-search-x:hover{background:rgba(16,16,38,.06);}
body.bx-light #scanner .bx-perf-bar-col{background:rgba(16,16,38,.06);}
body.bx-light #scanner .scn-dates-f input{color-scheme:light;}

/* Anneau de réussite : rail de fond en encre légère (l'attribut SVG
   embarque un blanc transparent, le CSS le repasse) */
body.bx-light #scanner .bx-perf-ring svg circle:first-of-type{stroke:rgba(16,16,38,.09);}

/* La fiche de call ne suit plus le thème : c'est une surface peinte,
   son intérieur reste blanc sur fond ardoise ou bleu en clair comme en
   sombre. Les anciennes surcharges claires (.scn-track, .scn-verdict
   NUCLEAR, .scn-copy.ok) sont donc retirées — elles repeignaient du
   texte sombre sur un fond sombre. */

/* Toast (échec de copie) */
body.bx-light .scn-toast{background:#fff;color:#15151f;border-color:rgba(13,155,92,.4);box-shadow:0 12px 32px rgba(22,22,48,.18);}
body.bx-light .scn-toast svg{color:#0d9b5c;}

/* ═══ 9bis. CHANGEMENT DE VUE — le panneau entre en scène ═══════════
   Posé par switchTab : la vue qui arrive glisse et se révèle, au lieu
   d'apparaître d'un bloc. */
#scanner .scn-panel-in{animation:scnPanelIn .38s var(--scn-ease);}
@keyframes scnPanelIn{
  from{opacity:0; transform:translateY(12px);}
  to  {opacity:1; transform:none;}
}

/* ═══ 10. RESPONSIVE ════════════════════════════════════════════════ */

@media(max-width:1100px){
  #scanner .scn-kpis{width:100%;}
  #scanner .scn-kpi{flex:1;min-width:0;}
}
@media(max-width:760px){
  #scanner .scanner-section{padding:1.4rem 1rem 3rem!important;}
  #scanner .scanner-header{align-items:flex-start!important;}
  #scanner .scanner-title-pro{font-size:1.45rem!important;}
  #scanner .scanner-grid{grid-template-columns:1fr!important;gap:.9rem!important;}
  /* Défilement horizontal contenu : jamais la page entière */
  #scanner .s-tabs-pill{
    display:flex; width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #scanner .s-tabs-pill::-webkit-scrollbar{display:none;}
  #scanner .s-tab{flex:0 0 auto;min-height:44px;}
  #scanner .scanner-filters{
    flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:.75rem!important;
  }
  #scanner .scanner-filters::-webkit-scrollbar{display:none;}
  #scanner .sf-chip{flex:0 0 auto;min-height:44px;}
  #scanner .sf-count{display:none;}
  /* Cibles tactiles ≥ 44×44 sur toutes les actions de carte */
  #scanner .tc-social-btn{width:44px!important;height:44px!important;}
  #scanner .tc-pnl-btn{min-height:44px;padding:0 1.1rem!important;}
  #scanner .tc-copy-btn{width:44px;height:44px;}
  #scanner .scn-refresh{min-height:44px;}
  #scanner .tc-footer{padding:.6rem .9rem .7rem!important;}
}

/* ═══ 11. MOUVEMENT RÉDUIT ══════════════════════════════════════════ */

@media(prefers-reduced-motion:reduce){
  #scanner .scanner-grid .tc-card{animation:none;}
  #scanner .tc-card:hover{transform:none!important;}
  #scanner .tc-card:hover .tc-img{transform:none;}
  #scanner .scn-tier::after,
  #scanner .status-dot::after,
  #scanner .tc-recent-badge::before,
  #scanner .scn-skel{animation:none!important;}
  #scanner .tc-progress-fill{transition:none!important;}
  .scn-toast{transition:opacity .15s;}
}