*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#060608;--s1:#0c0c10;--s2:#131318;--s3:#1b1b22;--s4:#252530;
  --b1:#0c0c10;--b2:#1b1b22;--b3:#3e3e50;
  --line:rgba(255,255,255,.06);--line2:rgba(255,255,255,.12);
  --t1:#f2f2f6;--t2:#7a7a8c;--t3:#3e3e50;
  --acc:#e8ff47;--acc-rgb:232,255,71;--bg-on-acc:#060608;                                                   --red:#ff3b3b;--green:#22d46a;--blue:#3b8bff;                                                             --ease:cubic-bezier(.4,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);                                   }                                                                                                         html{transition:background-color .18s var(--ease),color .18s var(--ease);}                                html,body{height:100%;height:-webkit-fill-available;width:100%;overflow:hidden;overscroll-behavior-y:none;font-family:'Barlow',sans-serif;background:var(--bg);color:var(--t1);-webkit-font-smoothing:antialiased}
button{font-family:'Barlow',sans-serif;cursor:pointer}

.app{display:flex;flex-direction:column;height:100vh;height:100dvh;height:-webkit-fill-available;overflow:hidden}

/* NAV */
.nav{height:52px;flex-shrink:0;background:var(--s1);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:30}
.nav-logo{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:900;letter-spacing:2px;display:flex;align-items:center;gap:8px}
.nav-mark{width:26px;height:26px;border-radius:6px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:var(--bg);line-height:1;font-family:"Barlow Condensed",sans-serif;letter-spacing:0;padding-top:1px}
.nav-btn{width:34px;height:34px;border-radius:8px;background:var(--s2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--t2);transition:background .15s}
.nav-btn:active{background:var(--s3)}                                                                                                                                                                               /* TICKER */
.ticker-wrap{height:28px;flex-shrink:0;background:var(--s1);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.ticker-wrap::before,.ticker-wrap::after{content:'';position:absolute;top:0;bottom:0;width:20px;z-index:2;pointer-events:none}
.ticker-wrap::before{left:0;background:linear-gradient(to right,var(--s1),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(to left,var(--s1),transparent)}
.ticker{display:flex;align-items:center;height:100%;white-space:nowrap;will-change:transform}
.ticker.anim{animation:scroll var(--dur,40s) linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.t-item{display:inline-flex;align-items:center;gap:5px;padding:0 10px;border-right:1px solid var(--line);font-size:11px;height:100%}
.t-idle{color:var(--t3);letter-spacing:1px;font-size:10px}
.t-live{font-size:7px;font-weight:900;color:var(--red);animation:blink 1.2s infinite}
.t-sc{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;background:var(--acc);color:var(--bg);padding:0 4px;border-radius:3px}
.t-sc-ft{background:var(--s4);color:var(--t2)}
.t-ft{font-size:8px;font-weight:700;letter-spacing:1px;color:var(--t3)}
.t-min{font-size:9px;color:var(--t3)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* SCROLL */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));overscroll-behavior-y:none;overscroll-behavior-x:none}
.scroll::-webkit-scrollbar{display:none}
.page{animation:slide-up .28s var(--ease) both}
.page.slide-left{animation:slide-left .32s cubic-bezier(.25,.46,.45,.94) both}
.page.slide-right{animation:slide-right .32s cubic-bezier(.25,.46,.45,.94) both}
.page.slide-up{animation:slide-up .25s var(--ease) both}
@keyframes slide-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slide-left{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slide-right{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}

/* BAR */
.bar{position:fixed;bottom:0;left:0;right:0;height:calc(56px + env(safe-area-inset-bottom,0px));flex-shrink:0;background:var(--s1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line2);display:grid;grid-template-columns:repeat(5,1fr);/* 5 boutons : Accueil Live Programme Favoris Compte */align-items:start;padding-top:6px;padding-bottom:env(safe-area-inset-bottom,0px);z-index:50;}
.bi{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:7px 4px;transition:opacity .15s}
.bi:active{opacity:.6}
.bi-ico{color:var(--t3);transition:transform .22s var(--spring),color .15s;flex-shrink:0}
.bi-lbl{font-size:8px;font-weight:700;letter-spacing:.5px;color:var(--t3);transition:color .15s;text-transform:uppercase}
.bi.on .bi-ico{transform:scale(1.12);color:var(--acc)}
.bi.on .bi-lbl{color:var(--acc)}

/* CREST */
.crest{border-radius:50%;background:var(--s3);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.crest img{width:100%;height:100%;object-fit:contain;padding:4px}
.crest-lg{width:52px;height:52px}
.crest-md{width:32px;height:32px}
.crest-sm{width:22px;height:22px}
.cp{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;color:var(--t3)}

/* DATE BAR — discret, barre fine dessous */
.date-bar{display:flex;gap:0;overflow-x:auto;padding:2px 14px 0;height:52px;align-items:center;scrollbar-width:none;-webkit-overflow-scrolling:touch;animation:fadeRise .35s var(--ease) both}
.date-bar::-webkit-scrollbar{display:none}
.date-chip{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 10px 4px;cursor:pointer;position:relative;min-width:46px;transition:opacity .2s,transform .15s var(--spring)}
.date-chip:active{transform:scale(.9)}
.date-chip.empty{opacity:.28}
.dc-label{font-size:11px;font-weight:500;color:var(--t3);white-space:nowrap;transition:color .2s}
.dc-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.15);transition:background .2s,transform .2s var(--spring)}
.date-chip.on .dc-label{color:var(--t1);font-weight:700}
.date-chip.on .dc-dot{background:var(--acc);transform:scale(1.4)}
.date-chip.on::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:18px;height:1.5px;border-radius:2px;background:var(--acc);opacity:.8}

/* FILTRE CHAMPIONNATS — même style discret */
.comp-bar{display:flex;gap:4px;overflow-x:auto;padding:8px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line);animation:fadeRise .4s var(--ease) both;animation-delay:.03s}
.comp-bar::-webkit-scrollbar{display:none}
.comp-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;border:1px solid transparent;font-size:11px;font-weight:600;color:var(--t1);cursor:pointer;transition:all .18s var(--ease);white-space:nowrap;background:var(--s2)}
.comp-chip img{width:12px;height:12px;object-fit:contain;opacity:.8;flex-shrink:0;transition:opacity .18s}
.comp-chip span{transition:color .18s}
.comp-chip:active{transform:scale(.93)}
.comp-chip.on{background:var(--acc);border-color:var(--acc);color:var(--bg);font-weight:700}
.comp-chip.on img{opacity:1;filter:brightness(0)}
.comp-chip.dim{opacity:.22;cursor:default;background:transparent}
/* Sélections nationales : elles ne jouent que quelques semaines par an et
   sont placées en tête de barre. Un liseré bleu les distingue des clubs
   sans crier — quand c'est la trêve, ce sont elles qu'on cherche. */
.comp-chip-int{border-color:rgba(58,142,246,.42);background:rgba(58,142,246,.10)}
.comp-chip-int img{opacity:.95}
.comp-chip-int.on{background:var(--acc);border-color:var(--acc)}

/* FEATURED */
.featured{margin:0 14px 12px;border-radius:16px;background:var(--s2);border:1px solid var(--line2);overflow:hidden;cursor:pointer;transition:transform .2s var(--spring),opacity .15s;position:relative;animation:fadeRise .45s var(--ease) both}
.featured:active{opacity:1}
.feat-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(232,255,71,.05),transparent 60%);pointer-events:none}
.feat-top{padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.feat-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.feat-league{font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);display:flex;align-items:center;gap:5px}
.feat-league img{width:13px;height:13px;object-fit:contain;opacity:.45}
.live-pill{display:flex;align-items:center;gap:4px;background:rgba(255,59,59,.1);border:1px solid rgba(255,59,59,.18);border-radius:50px;padding:3px 8px}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--red);animation:blink 1s infinite;flex-shrink:0}
.live-lbl{font-size:8px;font-weight:800;letter-spacing:2px;color:var(--red)}
.feat-ft{font-size:9.5px;font-weight:700;letter-spacing:1.5px;color:var(--t3)}
.feat-time{font-size:11px;font-weight:700;color:var(--blue)}
.feat-match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.feat-team{display:flex;flex-direction:column;align-items:center;gap:10px}
.feat-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;text-align:center;line-height:1.1;color:var(--t1)}
.feat-center{text-align:center}
.feat-score{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:900;line-height:1;letter-spacing:-3px;color:var(--t1)}
.feat-min{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:900;color:var(--red);letter-spacing:.6px;margin-top:5px;font-variant-numeric:tabular-nums}
.feat-foot{display:flex;gap:8px;padding:10px 14px}
.f-btn{flex:1;padding:10px;border-radius:10px;border:none;font-size:13px;font-weight:700;transition:all .16s var(--spring)}
.f-btn:active{transform:scale(.95)}
.f-btn.primary{background:var(--acc);color:var(--bg)}
.f-btn.ghost{background:var(--s3);color:rgba(255,255,255,.6);border:1px solid var(--line2)}
.f-btn.fav-feat{display:flex;align-items:center;justify-content:center;gap:6px}
.f-btn.fav-feat.on{color:var(--acc)}
.f-btn.fav-feat.on svg{stroke:var(--acc)}

/* MATCH CARDS */
/* ── CARTES DE MATCH — plus d'air, hiérarchie plus nette ── */
.mlist{display:flex;flex-direction:column;gap:10px;padding:0 14px}
.mcard{position:relative;background:var(--s1);border-radius:16px;border:1px solid var(--line);overflow:hidden;cursor:pointer;
  transition:transform .18s var(--spring),border-color .2s,box-shadow .2s;
  animation:fadeRise .45s cubic-bezier(.22,.8,.3,1) both}
.mcard:active{transform:scale(.985)}
/* Liseré rouge discret sur les matchs en direct */
.mcard:has(.mc-status.live){border-color:rgba(255,59,59,.22)}
.mcard:has(.mc-status.live)::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--red),transparent);opacity:.85}
.mlist .mcard:nth-child(1){animation-delay:.02s}
.mlist .mcard:nth-child(2){animation-delay:.06s}
.mlist .mcard:nth-child(3){animation-delay:.10s}
.mlist .mcard:nth-child(4){animation-delay:.14s}
.mlist .mcard:nth-child(5){animation-delay:.18s}
.mlist .mcard:nth-child(n+6){animation-delay:.20s}
@keyframes fadeRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.mc-head{display:flex;align-items:center;justify-content:space-between;padding:11px 15px 9px}
.mc-league{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.9px;text-transform:uppercase;min-width:0}
.mc-league img{width:14px;height:14px;object-fit:contain;opacity:.55;flex-shrink:0}
.mc-status{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:3px 9px;border-radius:20px;flex-shrink:0}
.mc-status.live{color:var(--red);background:rgba(255,59,59,.12);border:1px solid rgba(255,59,59,.22)}
.mc-status.ft{color:var(--t3);background:var(--s2);border:1px solid var(--line)}
.mc-status.soon{color:var(--blue);background:rgba(59,139,255,.1);border:1px solid rgba(59,139,255,.2)}

.mc-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:6px 15px 14px}
.mct{display:flex;align-items:center;gap:10px;min-width:0}
.mct.r{justify-content:flex-end}
.mct.r .mct-name{text-align:right}
.mct-name{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-score{font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:900;text-align:center;letter-spacing:-.5px;
  min-width:58px;line-height:1}
.mc-score.live{color:var(--acc)}
.mc-score.ft{color:var(--t1)}
.mc-score.soon{color:var(--t3);font-size:14px;font-weight:700;letter-spacing:1px}

.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 15px;
  border-top:1px solid var(--line);background:rgba(255,255,255,.015)}
.mc-time{font-size:11.5px;color:var(--t3);font-weight:600;display:flex;align-items:center;gap:6px;min-width:0}
.mc-time-live{color:var(--red)}
/* Chrono : chiffres de largeur fixe pour que ça ne saute pas à chaque seconde */
.mc-clock{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:900;letter-spacing:.4px;
  font-variant-numeric:tabular-nums;color:var(--red)}
.mc-ld{width:5px;height:5px;border-radius:50%;background:var(--red);animation:blink 1.4s ease-in-out infinite;flex-shrink:0}
.mc-act{display:flex;align-items:center;gap:8px;flex-shrink:0}
.fav-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--t3);
  transition:transform .2s var(--spring),color .15s;background:none;border:none;cursor:pointer}
.fav-btn.on{color:var(--acc)}
.fav-btn:active{transform:scale(1.35)}
.watch-btn{font-size:11.5px;font-weight:700;padding:7px 15px;border-radius:20px;background:var(--s3);color:var(--t2);
  border:1px solid var(--line);cursor:pointer;transition:transform .15s var(--spring),background .15s,color .15s}
.watch-btn:active{transform:scale(.93)}
.watch-btn.has-stream{background:var(--acc);color:var(--bg);border-color:var(--acc);font-weight:800}

/* SECTIONS */
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:22px 16px 11px;animation:fadeRise .45s cubic-bezier(.22,.8,.3,1) both}
.sec-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:1.2px;display:flex;align-items:center;gap:8px;color:var(--t1)}
.sec-sub{font-size:10.5px;color:var(--t3);font-weight:600}
.dot-red{color:var(--red);font-size:9px;animation:blink 1.4s ease-in-out infinite}
.badge-ft{font-size:9px;font-weight:800;letter-spacing:1.2px;color:var(--t3);background:var(--s2);border:1px solid var(--line);padding:3px 9px;border-radius:20px}
.gap{height:2px}

/* DAY HEADER (schedule) */
.day-header{display:flex;align-items:center;gap:8px;padding:14px 14px 6px}
.day-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.day-full{font-size:11px;color:var(--t3)}
.day-dot{width:5px;height:5px;border-radius:50%;background:var(--acc);flex-shrink:0}

/* SEARCH */
.search-box{margin:10px 14px;display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.search-box:focus-within{border-color:var(--line2)}
.search-box input{background:none;border:none;outline:none;color:var(--t1);font-family:'Barlow',sans-serif;font-size:14px;width:100%}
.search-box input::placeholder{color:var(--t3)}

/* LOADING / EMPTY */
.loading{display:flex;align-items:center;justify-content:center;padding:60px 20px;animation:fadeRise .3s var(--ease) both}
.spinner{width:26px;height:26px;border-radius:50%;border:2px solid var(--s4);border-top-color:var(--acc);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{display:flex;flex-direction:column;align-items:center;padding:50px 20px;color:var(--t3);font-size:13px;text-align:center}

/* TOAST */
/* Au-dessus de TOUT : à 200, il passait sous la fenêtre de connexion
   (400), sous la feuille de paiement et sous le lecteur — « Ajoute une
   majuscule » s'affichait flouté derrière le voile. Il ne capte aucun
   toucher (pointer-events:none), il ne gêne donc rien en étant devant. */
.toast{position:fixed;bottom:calc(68px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(8px);background:var(--s4);border:1px solid var(--line2);border-radius:9px;padding:8px 16px;font-size:12px;font-weight:500;opacity:0;pointer-events:none;z-index:2147483000;transition:all .2s var(--ease);width:max-content;max-width:calc(100vw - 32px);text-align:center;line-height:1.4;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══════════════════════════════════════════════════
   LECTEUR — redesign streaming
   z1 video · z2 fallback · z3 tap · z4 flash · z5 hud · z6 ctrls · z7 close
═══════════════════════════════════════════════════ */
.vp-ov{position:fixed;inset:0;z-index:100;background:#000;display:none;flex-direction:column}
.vp-ov.open{display:flex;animation:vpIn .22s var(--ease) both}
@keyframes vpIn{from{opacity:0}to{opacity:1}}

/* Stage 16:9 */
.vp-stage{width:100%;aspect-ratio:16/9;background:#000;position:relative;overflow:hidden;flex-shrink:0}

/* z1 — vidéo */
.vp-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1;display:none}
.vp-stage video.active{display:block}

/* z2 — fallback no-stream */
.vp-fallback{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0a0a0f 0%,#060608 100%)}
.vp-fallback.hidden{display:none}
.vp-fb-noise{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");opacity:.4;pointer-events:none}
.vp-fb-body{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;padding:0 20px}
.vp-fb-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;width:100%}
.vp-fb-team{display:flex;flex-direction:column;align-items:center;gap:8px}
.vp-fb-team span{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;color:rgba(255,255,255,.35);text-align:center;letter-spacing:.3px}
.vp-fb-vs{display:flex;flex-direction:column;align-items:center;gap:4px}
.vp-fb-score{font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:900;letter-spacing:-2px;color:var(--acc);line-height:1}
.vp-fb-min{font-size:9px;font-weight:800;letter-spacing:2px;color:var(--red);animation:blink 1.2s infinite}
.vp-fb-badge{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:600;letter-spacing:1.5px;color:rgba(255,255,255,.18);text-transform:uppercase;border:1px solid rgba(255,255,255,.07);padding:5px 14px;border-radius:50px}

/* z3 — tap zone */
.vp-tap{position:absolute;inset:0;z-index:3;cursor:pointer}
/* .off supprimé — vp-tap toujours cliquable */

/* z4 — flash */
.vp-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:4;pointer-events:none;display:flex;align-items:center;justify-content:center}
.vp-flash.pop{animation:vpFlash .38s var(--ease) forwards}
@keyframes vpFlash{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}55%{transform:translate(-50%,-50%) scale(1.05);opacity:1}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}
.vp-flash-ring{position:absolute;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15)}
.vp-flash svg{position:relative;z-index:1;color:#fff}

/* z5 — HUD score */
.vp-hud{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:6px 14px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);white-space:nowrap;z-index:5;pointer-events:none;transition:opacity .3s var(--ease)}
.vp-hud.hide{opacity:0}
.vp-hud-side{display:flex;align-items:center;gap:5px}
.vp-hud-r{flex-direction:row-reverse}
.vp-hud-side span{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.2px;color:rgba(255,255,255,.75)}
.vp-hud-mid{display:flex;flex-direction:column;align-items:center;min-width:48px}
.vp-hud-score{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1}
.vp-hud-min{font-size:8px;font-weight:800;color:var(--acc);letter-spacing:1.5px;margin-top:1px}

/* z6 — contrôles */
.vp-ctrls{position:absolute;bottom:0;left:0;right:0;z-index:6;transition:opacity .3s var(--ease)}
.vp-ctrls.hidden{opacity:0;pointer-events:none}
/* gradient sur toute la hauteur bottom */
.vp-ctrls-inner{background:linear-gradient(transparent 0%,rgba(0,0,0,.4) 30%,rgba(0,0,0,.88) 70%,rgba(0,0,0,.97) 100%);padding:40px 14px 12px}

/* barre progression */
.vp-prog{position:relative;padding:10px 0 6px;cursor:pointer;touch-action:none;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.vp-tl,.vp-tr{font-size:9px;font-weight:600;color:rgba(255,255,255,.35);pointer-events:none;flex-shrink:0;min-width:32px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.vp-tr{text-align:right}
.vp-track{position:relative;flex:1;height:2px;border-radius:2px;overflow:visible;transition:height .18s var(--ease)}
.vp-prog:hover .vp-track,.vp-prog.drag .vp-track{height:4px}
.vp-track-bg{position:absolute;inset:0;background:rgba(255,255,255,.15);border-radius:4px}
.vp-track-fill{position:absolute;top:0;left:0;bottom:0;width:0%;background:var(--acc);border-radius:4px;transition:width .8s linear}
.vp-track-fill.snap{transition:none}
.vp-track-dot{position:absolute;top:50%;left:0%;transform:translate(-50%,-50%) scale(0);width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 2px rgba(232,255,71,.4);transition:transform .18s var(--spring);pointer-events:none}
.vp-prog:hover .vp-track-dot,.vp-prog.drag .vp-track-dot{transform:translate(-50%,-50%) scale(1)}

/* boutons contrôles */
.vp-btns{display:flex;align-items:center;gap:6px;padding:0 2px}
.vp-btn{width:44px;height:44px;background:none;border:none;color:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;border-radius:10px;transition:background .12s,transform .15s var(--spring),color .12s}
.vp-btn:active{transform:scale(.78)}
.vp-btn:hover{background:rgba(255,255,255,.08)}
.vp-btn-lg{width:48px;height:48px}
.vp-btn-lg svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.2))}

/* ════════════════════════════════════════════════
   BARRE DU HAUT — la pastille « sources »
   ════════════════════════════════════════════════
   Le sélecteur était une rangée de boutons collée en bas de l'image.
   Avec vingt-quatre sources elle devenait un ruban illisible qu'il
   fallait faire défiler à l'aveugle — et surtout elle recouvrait tout
   le bas du lecteur du diffuseur. Ici il ne reste qu'une pastille ;
   la liste complète s'ouvre dans une feuille, rangée par langue. */
/* Flux classique : la pastille flotte en haut à gauche de l'image, le ×
   reste en haut à droite. right:46px pour s'arrêter avant lui. */
.vp-topbar{position:absolute;top:10px;left:10px;right:46px;z-index:7;
  display:flex;align-items:center;gap:6px;transition:opacity .3s var(--ease)}
.vp-topbar.hidden{opacity:0;pointer-events:none}
.vp-tb-src{margin-right:auto}
.vp-tb-x .vp-tb-lbl{font-size:11.5px}
.vp-tb-btn{height:30px;min-width:30px;padding:0 9px;border-radius:15px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;gap:5px;
  font-family:'Barlow',sans-serif;font-size:11.5px;font-weight:700;line-height:1;
  transition:background .15s,transform .15s var(--spring)}
.vp-tb-btn:active{transform:scale(.9)}
.vp-tb-btn:hover{background:rgba(0,0,0,.72)}
.vp-tb-src{max-width:min(56vw,230px)}
.vp-tb-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-tb-n{font-size:9.5px;font-weight:900;background:var(--acc);color:var(--bg-on-acc);
  border-radius:9px;padding:2px 5px;flex-shrink:0;line-height:1}
.vp-tb-chev{flex-shrink:0;opacity:.55}
/* Plein écran et multi ne viennent ici QUE quand la barre du bas est
   retirée, sinon ils y seraient deux fois. */
.vp-tb-embed{display:none}
.vp-embed .vp-tb-embed{display:flex}
/* Agrandir / Réduire : ordinateur seulement (voir le bloc DESKTOP). */
.vp-tb-pc{display:none}

/* ════════════════════════════════════════════════
   MODE PAGE EXTERNE — on efface notre lecteur
   ════════════════════════════════════════════════
   Le flux d'un diffuseur dlive est une page d'un autre domaine. On ne
   peut ni la mettre en pause, ni régler son son, ni avancer dedans :
   nos commandes ne faisaient donc strictement rien. Mais elles
   couvraient TOUTE la scène — .vp-tap sur toute la surface, la barre
   de progression en plein milieu, le ruban de sources en bas. Résultat
   mesuré : pas un seul point de l'image n'atteignait leur lecteur. Le
   visiteur tombait sur une de leurs pubs sans pouvoir la fermer, et ne
   pouvait pas davantage rétablir le son.
   En mode externe on les retire : les touches vont à leur lecteur. */
.vp-embed .vp-tap{display:none}
.vp-embed .vp-ctrls{display:none}

/* Le voile bleu translucide sur tout le lecteur au moindre appui : c'est
   le surlignage de tap d'Android et/ou une sélection de texte qui
   démarre. Un doigt qui rate un bouton de leur page déclenche l'un ou
   l'autre, et le geste part en sélection au lieu d'aller au lecteur.
   On coupe les deux sur la scène — nous n'y avons rien à sélectionner —
   et `manipulation` retire l'hésitation du navigateur entre « tap » et
   « double-tap pour zoomer ». */
.vp-embed .vp-stage,
.vp-embed #stream-iframe{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation}
/* Le bandeau de score se superposait à la pastille et, surtout, à leur
   habillage. Le score est juste en dessous, dans le panneau du match. */
.vp-embed .vp-hud{display:none}
/* L'éclair « lecture / pause » se déclenche au montage. Sur une page
   externe il annoncerait une commande qu'on n'a pas. */
.vp-embed .vp-flash{display:none}

/* Et on ne laisse plus RIEN flotter par-dessus leur image. Poser notre ×
   en haut à droite le mettait exactement là où leurs pubs posent le
   leur : viser le × de la pub fermait le match. Nos commandes passent
   donc AU-DESSUS de la scène, dans une vraie barre (order:-1). L'image
   entière leur appartient — leur bouton de son et le × de leurs pubs
   compris. */
.vp-embed .vp-close{display:none}
.vp-embed .vp-topbar{
  position:static;order:-1;width:100%;flex-shrink:0;
  background:var(--s1);border-bottom:1px solid var(--line);
  padding:7px 10px;gap:7px;opacity:1;pointer-events:auto}
.vp-embed .vp-tb-btn{background:var(--s3);border-color:var(--line2);
  -webkit-backdrop-filter:none;backdrop-filter:none;height:32px}
.vp-embed .vp-tb-btn:hover{background:var(--s4)}
.vp-embed .vp-tb-x{background:none;border-color:transparent;padding-left:4px;color:var(--t1)}
.vp-embed .vp-tb-src{max-width:min(46vw,210px)}
/* Sur un écran étroit, « Fermer » en toutes lettres vole la place de la
   pastille : la flèche seule suffit. */
@media (max-width:420px){ .vp-embed .vp-tb-x .vp-tb-lbl{display:none} }

/* z7 — bouton fermer */
.vp-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);color:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;z-index:7;transition:background .15s,transform .15s var(--spring),opacity .3s}
.vp-close.hidden{opacity:0;pointer-events:none}
.vp-close:active{transform:scale(.84)}
.vp-close:hover{background:rgba(255,255,255,.12)}

/* ─── Panneau info match ─────────────────────────── */
.vp-panel{flex:1;overflow:hidden;background:var(--bg);display:flex;flex-direction:column;min-height:0}
.vp-panel-top{overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;flex-shrink:0;max-height:100%}
.vp-panel-top::-webkit-scrollbar{display:none}

.vp-panel-head{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 14px 12px;border-bottom:1px solid var(--line);gap:10px}
.vp-comp{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.vp-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;line-height:1.1}
.vp-sub{font-size:11px;color:var(--t2);margin-top:4px}
.vp-panel-x{width:30px;height:30px;border-radius:8px;background:var(--s3);border:1px solid var(--line2);color:var(--t2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s,transform .15s var(--spring)}
.vp-panel-x:active{transform:scale(.84)}
.vp-panel-actions{display:flex;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.vp-act-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border-radius:10px;border:1px solid var(--line2);background:var(--s2);color:rgba(255,255,255,.7);font-size:12px;font-weight:600;transition:background .12s,transform .15s var(--spring)}
.vp-act-btn:active{transform:scale(.93);background:var(--s3)}
.vp-act-btn.on{background:var(--acc);color:var(--bg);border-color:var(--acc)}

/* events buts */
.evs-wrap{padding:14px;display:flex;flex-direction:column;gap:10px}
.evs-title{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--t3)}
.ev-list{display:flex;flex-direction:column;gap:5px}
.ev-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;background:var(--s2);border:1px solid var(--line)}
.ev-min{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:800;color:var(--acc);min-width:28px}
.ev-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex-shrink:0}
.ev-text{font-size:12.5px;font-weight:600;line-height:1.2}
.ev-sub{font-size:10px;color:var(--t2);margin-top:1px}

.gap{height:12px}

/* ═══════════════════════════════════════════════════
   MULTI-STREAM
═══════════════════════════════════════════════════ */

/* Nav btn actif quand multi ouvert */
#btn-multi.active{background:var(--acc);color:var(--bg);border-color:var(--acc)}

/* Overlay plein écran */
.multi-ov{position:fixed;inset:0;z-index:90;background:#000;display:none;flex-direction:column}
.multi-ov.open{display:flex;animation:vpIn .22s var(--ease) both}

/* Grille — layouts dynamiques */
.multi-grid{flex:1;display:grid;gap:1px;background:#111;overflow:hidden;position:relative}
.multi-grid.g0,.multi-grid.g1{grid-template-columns:1fr;grid-template-rows:1fr}
.multi-grid.g2{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.multi-grid.g3{grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr}
.multi-grid.g4{grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr 1fr}

/* Empty state */
.multi-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--t2);font-size:13px;font-weight:500}

/* Slot */
.ms-slot{position:relative;background:#0a0a0a;overflow:hidden}
.ms-slot video{width:100%;height:100%;object-fit:cover;display:block}

/* Fallback no-stream */
.ms-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#0a0a0a}
.ms-score{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;color:var(--acc);letter-spacing:-1px}
.ms-teams{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;text-align:center;padding:0 8px}

/* HUD en bas de chaque slot */
.ms-hud{position:absolute;bottom:32px;left:0;right:0;padding:0 6px;display:flex;align-items:center;justify-content:center;gap:5px;pointer-events:none}
.ms-hud-teams{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:800;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 1px 4px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-hud-sc{color:var(--acc)}
.ms-hud-live{font-size:8px;font-weight:800;letter-spacing:1.5px;color:var(--red);animation:blink 1.2s infinite;flex-shrink:0}
.ms-hud-ft{font-size:8px;font-weight:700;letter-spacing:1.5px;color:var(--t3);flex-shrink:0}

/* Contrôles individuels en bas du slot */
.ms-ctrl{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:2px;padding:4px 6px;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:opacity .2s var(--ease)}
.ms-slot:hover .ms-ctrl,.ms-slot:active .ms-ctrl{opacity:1}
/* Sur mobile toujours visible */
@media (hover:none){.ms-ctrl{opacity:1}}
.ms-btn{width:26px;height:26px;border-radius:6px;border:none;background:rgba(0,0,0,.5);color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:background .15s,transform .15s var(--spring)}
.ms-btn:active{transform:scale(.82)}
.ms-btn.muted{color:var(--red);background:rgba(255,59,59,.15)}
.ms-btn.remove{color:rgba(255,255,255,.5)}
.ms-btn.remove:active{color:var(--red)}

/* Barre bas multi */
.multi-bar{height:52px;flex-shrink:0;background:rgba(6,6,8,.97);border-top:1px solid var(--line);display:flex;align-items:center;padding:0 12px;gap:8px;padding-bottom:env(safe-area-inset-bottom,0)}
.multi-bar-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--s3);color:rgba(255,255,255,.7);font-size:12px;font-weight:600;font-family:'Barlow',sans-serif;cursor:pointer;transition:all .15s var(--spring);flex-shrink:0}
.multi-bar-btn:active{transform:scale(.93)}
.multi-bar-btn.danger{color:var(--red);border-color:rgba(255,59,59,.2);background:rgba(255,59,59,.06)}
.multi-bar-dots{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.multi-dot{width:5px;height:5px;border-radius:50%;background:var(--t3)}

/* Tiroir "ajouter un match" */
.multi-drawer{position:absolute;bottom:52px;left:0;right:0;background:var(--s1);border-top:1px solid var(--line2);border-radius:16px 16px 0 0;max-height:60vh;display:flex;flex-direction:column;transform:translateY(calc(100% + 52px));transition:transform .35s cubic-bezier(.34,1.1,.64,1);z-index:20;overflow:hidden}
.multi-drawer.open{transform:translateY(0)}
.multi-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--line);flex-shrink:0}
.multi-drawer-title{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.multi-drawer-close{width:26px;height:26px;border-radius:6px;border:1px solid var(--line2);background:var(--s3);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.multi-drawer-list{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
.multi-drawer-list::-webkit-scrollbar{display:none}

/* Items dans le tiroir */
.drawer-item{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;gap:10px}
.drawer-item:active{background:var(--s2)}
.drawer-item.is-live{border-left:2px solid var(--red)}
.drawer-item-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.drawer-item-comp{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase}
.drawer-item-match{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-item-right{display:flex;align-items:center;gap:7px;flex-shrink:0}
.drawer-live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1s infinite}
.drawer-ft{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--t3)}
.drawer-time{font-size:11px;font-weight:600;color:var(--blue)}
.drawer-has-stream{font-size:8px;color:var(--green)}

/* Onglets tiroir */
.drawer-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--s1)}
.drawer-tab{flex:1;padding:10px 8px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--t2);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;transition:color .15s,border-color .15s;margin-bottom:-1px}
.drawer-tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.drawer-section-head{padding:8px 16px 5px;font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--t3);text-transform:uppercase;background:var(--s1);position:sticky;top:0;z-index:2}
/* Items chaînes */
.drawer-ch-item{display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);cursor:pointer;gap:10px;transition:background .12s}
.drawer-ch-item:active{background:var(--s2)}
.drawer-ch-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.drawer-ch-name{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.2px}
.drawer-ch-live{font-size:8px;font-weight:800;letter-spacing:1px;color:var(--green);flex-shrink:0}

/* ═══════════════════════════════════════════════════
   PAGE À PROPOS
═══════════════════════════════════════════════════ */
.about-wrap{display:flex;flex-direction:column;gap:12px;padding:16px 14px 8px}

.about-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 0 20px}
.about-logo-big{width:64px;height:64px;border-radius:18px;background:var(--acc);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(232,255,71,.25)}
.about-mark{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:900;color:var(--bg)}
.about-name{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;letter-spacing:3px;text-transform:uppercase}
.about-version{font-size:11px;color:var(--t3);font-weight:500;letter-spacing:1px}

.about-card{background:var(--s1);border-radius:14px;border:1px solid var(--line);padding:16px}
.about-section-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--acc);margin-bottom:10px}
.about-text{font-size:13px;color:var(--t2);line-height:1.65;font-weight:400}
.about-list{display:flex;flex-direction:column;gap:7px;padding-left:14px;margin-top:8px}
.about-list li{font-size:13px;color:var(--t2);line-height:1.6}
.about-source{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--t2)}
.about-source:last-child{border-bottom:none}
.about-source-val{font-weight:600;color:var(--t1)}
.about-support-block{display:flex;align-items:center;justify-content:space-between;background:var(--s1);border:1px solid var(--line2);border-radius:14px;padding:16px;text-decoration:none;cursor:pointer;transition:transform .15s var(--spring),box-shadow .15s}
.about-support-block:active{transform:scale(.97)}
.about-support-left{display:flex;align-items:center;gap:12px}
.about-support-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#ff6b6b,#ff3b3b);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.about-support-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--t1)}
.about-support-sub{font-size:12px;color:var(--t2);margin-top:2px}
.about-support-arrow{color:var(--t3);flex-shrink:0}
.about-footer{text-align:center;font-size:11px;color:var(--t3);padding:12px 0 4px;letter-spacing:.3px}

/* ═══════════════════════════════════════════════════
   ONGLETS DÉTAILS / CHAT
═══════════════════════════════════════════════════ */
.stream-tabs{display:flex;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-shrink:0}
.stream-tab{flex:1;padding:11px 0;background:none;border:none;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);cursor:pointer;position:relative;transition:color .15s var(--ease)}
.stream-tab.on{color:var(--t1)}
.stream-tab.on::after{content:'';position:absolute;left:16%;right:16%;bottom:-1px;height:2px;background:var(--acc);border-radius:2px}

/* ═══════════════════════════════════════════════════
   DÉTAILS — COMPOS + TERRAIN 2D (FlashScore primaire / API backup)
═══════════════════════════════════════════════════ */
.details-section{flex:1;overflow-y:auto;min-height:0;padding-bottom:6px}
.det-source-note{margin:10px 14px 0;padding:6px 10px;border-radius:8px;background:var(--s2);border:1px solid var(--line);font-size:10.5px;color:var(--t3);text-align:center}
.lu-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}
.lu-head-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.lu-formations{font-size:11px;color:var(--t3);font-weight:600}
.lu-loading{display:flex;justify-content:center;padding:24px}

.lu-pitch-wrap{padding:0 10px}
.lu-pitch{position:relative;width:100%;aspect-ratio:2/3;border-radius:12px;overflow:hidden;
  background:repeating-linear-gradient(to bottom,#163a1f 0,#163a1f 10%,#123319 10%,#123319 20%);
  border:1px solid var(--line)}
.lu-pitch-lines{position:absolute;inset:0}
.lu-pitch-lines::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(255,255,255,.18);transform:translateY(-50%)}
.lu-pitch-lines::after{content:'';position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;border:1px solid rgba(255,255,255,.18);border-radius:50%;transform:translate(-50%,-50%)}
.lu-box-home,.lu-box-away{position:absolute;left:50%;transform:translateX(-50%);width:46%;height:12%;border:1px solid rgba(255,255,255,.18)}
.lu-box-home{bottom:0}
.lu-box-away{top:0}

.lu-player{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;width:52px;z-index:2;cursor:pointer;background:none;border:none;padding:0}
.lu-player-avatar{position:relative;width:34px;height:34px}
.lu-player-photo{position:relative;width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--s3);border:1.5px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .15s var(--spring)}
.lu-player:active .lu-player-photo{transform:scale(.9)}
.lu-player-photo img{width:100%;height:100%;object-fit:cover}
.lu-player-photo .lu-pi{font-size:10px;font-weight:800;color:var(--t2)}
.lu-player.away .lu-player-photo{border-color:rgba(59,139,255,.7)}
.lu-player-num{position:absolute;bottom:-3px;right:-3px;background:var(--acc);color:var(--bg);font-size:8px;font-weight:900;line-height:1;padding:2px 3px;border-radius:5px;font-family:'Barlow Condensed',sans-serif}
.lu-player-rating{position:absolute;top:-6px;right:-7px;color:#fff;font-size:9px;font-weight:800;line-height:1;padding:2px 4px;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.5);z-index:2}
.lu-player-name{font-size:8.5px;font-weight:700;color:#fff;text-align:center;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.8);max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lu-badge{position:absolute;top:-4px;left:-6px;width:11px;height:15px;border-radius:2px;z-index:3;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.lu-badge.yellow{background:#f5c518}
.lu-badge.red{background:var(--red)}
.lu-badge.injury{background:var(--s1);border:1px solid var(--red);display:flex;align-items:center;justify-content:center;border-radius:50%;width:14px;height:14px;top:-5px;left:-7px}
.lu-badge.injury svg{width:8px;height:8px;color:var(--red)}
.lu-badge-sub{position:absolute;bottom:-4px;left:-7px;width:16px;height:16px;border-radius:50%;background:var(--s1);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;z-index:3}
.lu-badge-sub svg{width:9px;height:9px}
.lu-badge-sub.out{color:var(--red)}
.lu-badge-sub.in{color:var(--green)}

@keyframes luPulse{
  0%{box-shadow:0 0 0 0 rgba(232,255,71,.65)}
  70%{box-shadow:0 0 0 10px rgba(232,255,71,0)}
  100%{box-shadow:0 0 0 0 rgba(232,255,71,0)}
}
.lu-player.lu-new-event .lu-player-photo{animation:luPulse 1.4s ease-out 2}

.lu-injuries{padding:12px 14px 0}
.lu-injuries-title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin-bottom:7px}
.lu-injury-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;background:var(--s2);border:1px solid var(--line);margin-bottom:6px}
.lu-injury-row svg{color:var(--red);flex-shrink:0}
.lu-injury-name{font-size:12px;font-weight:600;color:var(--t1)}
.lu-injury-reason{font-size:10.5px;color:var(--t3)}

.lu-events{padding:12px 14px 4px;display:flex;flex-direction:column;gap:7px}
.lu-ev-row{display:flex;align-items:center;gap:9px;font-size:12px}
.lu-ev-min{color:var(--t3);font-size:10.5px;font-weight:700;width:26px;flex-shrink:0;text-align:right}
.lu-ev-icon{width:13px;height:17px;border-radius:2px;flex-shrink:0}
.lu-ev-icon.yellow{background:#f5c518}
.lu-ev-icon.red{background:var(--red)}
.lu-ev-icon.sub{width:15px;height:15px;border-radius:50%;background:var(--s3);display:flex;align-items:center;justify-content:center}
.lu-ev-text{color:var(--t1)}
.lu-ev-sub{color:var(--t3);font-size:10.5px}

.lu-benches{padding:4px 14px 14px}
.lu-bench-title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin:8px 0 7px}
.lu-bench-list{display:flex;flex-wrap:wrap;gap:8px}
.lu-bench-player{display:flex;align-items:center;gap:6px;background:var(--s2);border:1px solid var(--line);border-radius:20px;padding:3px 9px 3px 3px;cursor:pointer;border:none;font-family:'Barlow',sans-serif}
.lu-bench-photo{width:22px;height:22px;border-radius:50%;overflow:hidden;background:var(--s3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lu-bench-photo img{width:100%;height:100%;object-fit:cover}
.lu-bench-photo .lu-pi{font-size:8px;font-weight:800;color:var(--t2)}
.lu-bench-name{font-size:11px;font-weight:600;color:var(--t1)}
.lu-bench-num{font-size:9.5px;color:var(--t3)}
.lu-empty{padding:20px 14px;font-size:12px;color:var(--t3);text-align:center}

/* Fiche joueur (bio) */
.player-bio-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:2000;display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(2px)}
.player-bio-card{width:100%;max-width:420px;background:var(--s1);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:20px 20px 28px;display:flex;flex-direction:column;align-items:center;position:relative;animation:bioSlideUp .22s var(--spring)}
@keyframes bioSlideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
.player-bio-close{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:var(--s3);border:none;display:flex;align-items:center;justify-content:center;color:var(--t2)}
.player-bio-photo{width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--s3);border:2px solid var(--acc);margin-bottom:10px;display:flex;align-items:center;justify-content:center}
.player-bio-photo img{width:100%;height:100%;object-fit:cover}
.player-bio-photo .lu-pi{font-size:22px;font-weight:800;color:var(--t2)}
.player-bio-name{font-size:17px;font-weight:800;font-family:'Barlow Condensed',sans-serif;text-align:center}
.player-bio-pos{font-size:12px;color:var(--t3);margin-bottom:14px}
.player-bio-facts{width:100%;display:flex;flex-direction:column;gap:0}
.player-bio-fact{display:flex;justify-content:space-between;padding:9px 4px;border-bottom:1px solid var(--line);font-size:12.5px}
.player-bio-fact:last-child{border-bottom:none}
.player-bio-fact-label{color:var(--t3)}
.player-bio-fact-value{color:var(--t1);font-weight:600}

/* Sous-navigation interne à Détails */
.det-subtabs{display:flex;gap:6px;padding:12px 14px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.det-subtabs::-webkit-scrollbar{display:none}
.det-subtab{flex-shrink:0;padding:6px 14px;border-radius:20px;background:var(--s2);border:1px solid var(--line);color:var(--t3);font-size:11.5px;font-weight:700;cursor:pointer}
.det-subtab.on{background:var(--acc);color:var(--bg);border-color:var(--acc)}
.det-panel{}

/* Panneau Stats du match — barres comparatives */
.det-stats-list{padding:8px 14px 16px;display:flex;flex-direction:column;gap:14px}
.det-stat-row{display:flex;flex-direction:column;gap:5px}
.det-stat-vals{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--t1)}
.det-stat-label{font-size:10.5px;color:var(--t3);text-align:center;text-transform:uppercase;letter-spacing:.4px}
.det-stat-bar{display:flex;height:6px;border-radius:4px;overflow:hidden;background:var(--s3)}
.det-stat-bar-home{background:var(--acc)}
.det-stat-bar-away{background:var(--blue)}

/* Panneau Stats joueurs — classement par catégorie */
.det-players-subtabs{display:flex;gap:6px;padding:0 14px 10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.det-players-subtabs::-webkit-scrollbar{display:none}
.det-players-subtab{flex-shrink:0;padding:6px 13px;border-radius:20px;background:var(--s2);border:1px solid var(--line);color:var(--t3);font-size:11px;font-weight:700;cursor:pointer}
.det-players-subtab.on{background:var(--s3);color:var(--t1);border-color:var(--line2)}
.det-players-list{padding:0 14px 16px;display:flex;flex-direction:column;gap:2px}
.det-player-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left}
.det-player-rank{width:16px;font-size:11px;color:var(--t3);font-weight:700;flex-shrink:0}
.det-player-photo{width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--s3);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.det-player-photo img{width:100%;height:100%;object-fit:cover}
.det-player-photo .lu-pi{font-size:9px;font-weight:800;color:var(--t2)}
.det-player-info{flex:1;min-width:0}
.det-player-name{font-size:12.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.det-player-team{font-size:10.5px;color:var(--t3)}
.det-player-val{font-size:13px;font-weight:800;color:var(--acc);flex-shrink:0;min-width:24px;text-align:right}

/* ═══════════════════════════════════════════════════
   PROFIL — redesign complet (préfixe pf- pour ne pas
   toucher aux anciennes classes .acc- encore présentes
   ailleurs dans ce fichier, laissées inutilisées)
═══════════════════════════════════════════════════ */
.pf-wrap{display:flex;flex-direction:column;gap:18px;padding:28px 16px 48px;max-width:480px;margin:0 auto}

/* Hero */
.pf-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 4px}
.pf-hero-guest{gap:10px;padding:20px 0 8px}
.pf-hero-ball{margin-bottom:2px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.pf-app-name{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:var(--t1)}
.pf-hero-tagline{font-size:13px;color:var(--t3);text-align:center;max-width:240px;line-height:1.4}

.pf-avatar-wrap{position:relative;width:88px;height:88px;margin-bottom:4px}
.pf-avatar-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--s2);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.pf-avatar-initials{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--s3),var(--s2));display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:var(--t1);border:3px solid var(--s2);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.pf-avatar-crown{position:absolute;bottom:-2px;right:-2px;width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--bg-on-acc);display:flex;align-items:center;justify-content:center;border:3px solid var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.4)}

.pf-name-row{display:flex;align-items:center;gap:7px;margin-top:6px}
.pf-name{font-family:'Barlow Condensed',sans-serif;font-size:21px;font-weight:800;color:var(--t1)}

/* ── Pseudo chromé VIP — 6 couleurs, dégradé animé façon "chrome" ── */
@keyframes nameShine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.name-shine{
  background-size:280% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:nameShine 6s ease-in-out infinite;font-weight:800;
}
.name-shine-1{background-image:linear-gradient(90deg,#fff6d8,#ffd76b,#e8a527,#ffd76b,#fff6d8)} /* Or */
.name-shine-2{background-image:linear-gradient(90deg,#f4f8ff,#c9d6e8,#8fa4bd,#e7edf5,#f4f8ff)} /* Chrome */
.name-shine-3{background-image:linear-gradient(90deg,#ffdcd2,#ff6b5e,#c81e3a,#ff6b5e,#ffdcd2)} /* Braise */
.name-shine-4{background-image:linear-gradient(90deg,#dff6ff,#5ec9ff,#2f6bff,#5ec9ff,#dff6ff)} /* Glacier */
.name-shine-5{background-image:linear-gradient(90deg,#f6dcff,#c76bff,#7b2fd6,#c76bff,#f6dcff)} /* Améthyste */
.name-shine-6{background-image:linear-gradient(90deg,#dcffe9,#4bd68f,#0f9d63,#4bd68f,#dcffe9)} /* Émeraude */

/* Couleur de pseudo — pastille discrète à côté du pseudo + panneau dépliable */
.pf-color-toggle{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);background:var(--s2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;transition:transform .15s var(--spring),border-color .15s}
.pf-color-toggle:active{transform:scale(.86)}
.pf-color-toggle-dot{width:11px;height:11px;border-radius:50%;background:conic-gradient(#e8a527,#c81e3a,#7b2fd6,#2f6bff,#0f9d63,#e8a527);display:block}
.pf-color-toggle-1{border-color:var(--gold-3)}
.pf-color-toggle-1 .pf-color-toggle-dot{background:linear-gradient(135deg,#fff6d8,#e8a527)}
.pf-color-toggle-2{border-color:#8fa4bd}
.pf-color-toggle-2 .pf-color-toggle-dot{background:linear-gradient(135deg,#f4f8ff,#8fa4bd)}
.pf-color-toggle-3{border-color:#c81e3a}
.pf-color-toggle-3 .pf-color-toggle-dot{background:linear-gradient(135deg,#ffdcd2,#c81e3a)}
.pf-color-toggle-4{border-color:#2f6bff}
.pf-color-toggle-4 .pf-color-toggle-dot{background:linear-gradient(135deg,#dff6ff,#2f6bff)}
.pf-color-toggle-5{border-color:#7b2fd6}
.pf-color-toggle-5 .pf-color-toggle-dot{background:linear-gradient(135deg,#f6dcff,#7b2fd6)}
.pf-color-toggle-6{border-color:#0f9d63}
.pf-color-toggle-6 .pf-color-toggle-dot{background:linear-gradient(135deg,#dcffe9,#0f9d63)}

@keyframes pfColorPop{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
.pf-color-pop{margin-top:10px;background:var(--s1);border:1px solid var(--line2);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:9px;animation:pfColorPop .2s var(--ease) both;max-width:260px}
.pf-color-pop-title{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);text-align:center}
.pf-color-pop-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.pf-color-swatch{position:relative;aspect-ratio:1;border-radius:10px;border:2px solid var(--line2);cursor:pointer;transition:transform .15s var(--spring);padding:0}
.pf-color-swatch:active{transform:scale(.9)}
.pf-color-swatch.on{border-color:var(--t1)}
.pf-color-swatch.on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pf-color-swatch-1{background:linear-gradient(135deg,#fff6d8,#e8a527)}
.pf-color-swatch-2{background:linear-gradient(135deg,#f4f8ff,#8fa4bd)}
.pf-color-swatch-3{background:linear-gradient(135deg,#ffdcd2,#c81e3a)}
.pf-color-swatch-4{background:linear-gradient(135deg,#dff6ff,#2f6bff)}
.pf-color-swatch-5{background:linear-gradient(135deg,#f6dcff,#7b2fd6)}
.pf-color-swatch-6{background:linear-gradient(135deg,#dcffe9,#0f9d63)}
.pf-color-none{background:var(--s2);border:1.5px dashed var(--line2);border-radius:10px;color:var(--t3);font-size:11px;font-weight:700;padding:8px;text-align:center;cursor:pointer;font-family:'Barlow',sans-serif}
.pf-color-none.on{border-color:var(--t1);color:var(--t1);border-style:solid}

/* ── Photo de profil — réservé VIP ── */
.pf-avatar-upload-btn{
  position:absolute;bottom:-2px;right:-2px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-2,#ffd76b),var(--gold-4,#a8660f));color:#2a1a02;
  display:flex;align-items:center;justify-content:center;border:3px solid var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer;transition:transform .15s var(--spring)
}
.pf-avatar-upload-btn:active{transform:scale(.88)}
.pf-avatar-locked{position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;background:var(--s3);color:var(--t3);display:flex;align-items:center;justify-content:center;border:3px solid var(--bg)}
.pf-edit-btn{width:26px;height:26px;border-radius:50%;background:var(--s2);border:none;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:color .15s,transform .15s var(--spring)}
.pf-edit-btn:active{transform:scale(.88);color:var(--acc)}
.pf-email{font-size:13px;color:var(--t3)}
.pf-uid-chip{margin-top:8px;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;background:var(--s2);border:1px solid var(--line);color:var(--t3);font-size:10.5px;font-family:monospace;cursor:pointer;transition:opacity .15s}
.pf-uid-chip:active{opacity:.6}

/* Pseudo edit */
.pf-pseudo-edit{background:var(--s1);border:1px solid var(--line2);border-radius:16px;padding:14px 16px;animation:slide-up .2s var(--ease) both}
.pf-pseudo-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);display:block;margin-bottom:8px}
.pf-pseudo-row{display:flex;gap:8px;align-items:center}
.pf-pseudo-input{flex:1;background:var(--s2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:var(--t1);font-size:14px;font-family:'Barlow',sans-serif}
.pf-pseudo-input:focus{outline:none;border-color:var(--acc)}
.pf-pseudo-ok{background:var(--acc);color:var(--bg-on-acc);border:none;border-radius:10px;padding:10px 16px;font-weight:800;font-size:13px;cursor:pointer;transition:transform .15s var(--spring)}
.pf-pseudo-ok:active{transform:scale(.94)}
.pf-pseudo-cancel{background:var(--s2);border:none;border-radius:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer}

/* Card générique */
.pf-card{background:var(--s1);border:1px solid var(--line2);border-radius:18px;padding:18px}
.pf-section-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);padding:0 4px;margin-top:4px}

/* VIP — carte dorée, sobre : bordure fine dorée + reflet lent et discret.
   Volontairement sans bordure animée ni halo marqué (trop tape-à-l'œil). */
:root{
  --gold-1:#fff6d8;--gold-2:#ffd76b;--gold-3:#e8a527;--gold-4:#a8660f;
}
.pf-vip-card{
  position:relative;display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:18px;border-radius:18px;overflow:hidden;isolation:isolate;
  transition:transform .18s var(--spring),border-color .25s;
  background:linear-gradient(150deg,#141008 0%,#0f0c06 60%,#12100a 100%);
  border:1px solid rgba(232,165,39,.28);
  box-shadow:0 2px 14px -6px rgba(232,165,39,.18);
}
.pf-vip-card::before{
  content:'';position:absolute;top:0;left:-55%;width:38%;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,230,160,.10),transparent);
  animation:vipShine 7s ease-in-out infinite;
}
@keyframes vipShine{0%{left:-55%}50%{left:125%}100%{left:125%}}
.pf-vip-card:active{transform:scale(.98)}
.pf-vip-card-active{border-color:rgba(232,165,39,.5);box-shadow:0 3px 18px -6px rgba(232,165,39,.3)}
@media (prefers-reduced-motion:reduce){.pf-vip-card::before{animation:none;opacity:0}}
.pf-vip-ico{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(255,215,107,.16),rgba(232,165,39,.10));
  border:1px solid rgba(232,165,39,.3);
  color:var(--gold-2);
}
.pf-vip-info{flex:1;min-width:0}
.pf-vip-title{
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;
  color:var(--gold-2);letter-spacing:.2px;
}
.pf-vip-sub{font-size:11.5px;color:rgba(216,185,120,.75);margin-top:1px}
.pf-vip-arrow{color:rgba(232,165,39,.65);flex-shrink:0}

/* Parrainage */
.pf-ref-card{display:flex;flex-direction:column;gap:14px}
.pf-ref-loading{display:flex;justify-content:center;padding:8px}
.pf-ref-head{display:flex;align-items:center;gap:12px}
.pf-ref-ico{width:40px;height:40px;border-radius:12px;background:var(--s2);color:var(--acc);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pf-ref-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;color:var(--t1)}
.pf-ref-sub{font-size:11.5px;color:var(--t3);margin-top:1px}
.pf-ref-link-row{display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.pf-ref-link-txt{flex:1;min-width:0;font-size:11.5px;color:var(--t2);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-ref-copy-btn{width:30px;height:30px;border-radius:9px;background:var(--acc);color:var(--bg-on-acc);border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:transform .15s var(--spring)}
.pf-ref-copy-btn:active{transform:scale(.88)}
.pf-ref-progress-row{display:flex;align-items:center;justify-content:space-between}
.pf-ref-dots{display:flex;gap:6px}
.pf-ref-dot{width:9px;height:9px;border-radius:50%;background:var(--s3);border:1px solid var(--line2);transition:background .2s,border-color .2s}
.pf-ref-dot.on{background:var(--acc);border-color:var(--acc)}
.pf-ref-progress-txt{font-size:11px;font-weight:700;color:var(--t2)}
.pf-ref-earned{font-size:11.5px;color:var(--green);background:rgba(34,212,106,.1);border-radius:10px;padding:8px 12px;text-align:center;font-weight:600}
.pf-ref-howto-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:none;border:none;color:var(--t3);font-size:11.5px;font-weight:700;cursor:pointer;padding:4px 0}
.pf-ref-howto-btn svg{transition:transform .2s var(--ease)}
.pf-ref-howto{display:flex;flex-direction:column;gap:8px;background:var(--s2);border-radius:12px;padding:12px;margin-top:2px}
.pf-ref-howto-step{display:flex;align-items:flex-start;gap:9px;font-size:11.5px;color:var(--t2);line-height:1.4}
.pf-ref-howto-num{flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--s3);color:var(--t1);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.pf-ref-howto-step b{color:var(--t1)}
.pf-ref-invite-banner{display:flex;align-items:center;gap:9px;background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.3);border-radius:14px;padding:11px 14px;font-size:12px;color:var(--t1);font-weight:600}
.pf-ref-invite-banner svg{color:var(--acc);flex-shrink:0}

/* Liste / actions du compte */
.pf-list{display:flex;flex-direction:column;gap:8px}
.pf-list-item{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;color:var(--t1);font-size:13.5px;font-weight:600;cursor:pointer;transition:transform .15s var(--spring),background .15s;text-align:left;width:100%}
.pf-list-item:active{transform:scale(.98);background:var(--s2)}
.pf-list-item span{flex:1}
.pf-list-chevron{color:var(--t3);flex-shrink:0}
.pf-list-item-danger{color:var(--red)}
.pf-list-item-danger svg:first-child{color:var(--red)}

/* Auth (déconnecté) */
.pf-auth-card{display:flex;flex-direction:column;gap:10px}
.pf-auth-google{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border-radius:12px;border:1px solid var(--line2);background:var(--s2);color:var(--t1);font-size:14px;font-weight:600;cursor:pointer;transition:transform .15s var(--spring)}
.pf-auth-google:active{transform:scale(.97)}
.pf-auth-or{display:flex;align-items:center;gap:10px;color:var(--t3);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.pf-auth-or::before,.pf-auth-or::after{content:'';flex:1;height:1px;background:var(--line)}
.pf-auth-email{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:12px;border:none;background:var(--acc);color:var(--bg-on-acc);font-size:14px;font-weight:800;cursor:pointer;transition:transform .15s var(--spring)}
.pf-auth-email:active{transform:scale(.97)}
.pf-auth-hint{text-align:center;font-size:12px;color:var(--t3);margin-top:2px}
.pf-auth-hint-link{background:none;border:none;color:var(--acc);font-weight:700;font-size:12px;cursor:pointer;padding:0}

.pf-feature{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--line2);border-radius:14px;padding:13px 16px}
.pf-feature svg{flex-shrink:0;color:var(--acc)}
.pf-feature-title{font-size:13px;font-weight:600;color:var(--t1)}
.pf-feature-sub{font-size:11px;color:var(--t3);margin-top:1px}

.pf-footer{text-align:center;font-size:11px;color:var(--t3);padding:8px 0 0}

/* ═══════════════════════════════════════════════════
   ADMIN — ONGLET DLIVE
═══════════════════════════════════════════════════ */
.dlive-admin-wrap{padding:14px 16px 40px;display:flex;flex-direction:column;gap:14px}
.dlive-sync-card{background:var(--s1);border:1px solid var(--line2);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.dlive-sync-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--t3)}
.dlive-sync-row b{color:var(--t1);font-size:13px}
.dlive-sync-btn{margin-top:4px;background:var(--acc);color:var(--bg-on-acc);border:none;border-radius:12px;padding:12px;font-size:13.5px;font-weight:800;cursor:pointer;transition:transform .15s var(--spring)}
.dlive-sync-btn:active{transform:scale(.97)}
.dlive-sync-btn:disabled{opacity:.6}

/* ─── Admin : le domaine de dlive ─────────────────────────────────── */
.dom-card{gap:8px}
.dom-head{display:flex;align-items:center;justify-content:space-between}
.dom-titre{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;
  text-transform:uppercase;letter-spacing:1px}
.dom-etat{font-size:9.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
  border-radius:8px;padding:3px 7px}
.dom-etat.ok{background:rgba(34,212,106,.16);color:var(--green)}
.dom-etat.ko{background:rgba(255,59,59,.16);color:var(--red)}
.dom-actuel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  font-weight:700;color:var(--acc);word-break:break-all;background:var(--b1);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.dom-note{font-size:11.5px;color:var(--t2);line-height:1.5}
.dom-form{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.dom-input{flex:1 1 150px;min-width:0;background:var(--s2);border:1px solid var(--line2);
  border-radius:10px;color:var(--t1);padding:10px 11px;font-size:13.5px;font-family:inherit}
.dom-input:focus{outline:none;border-color:var(--acc)}
.dom-btn{background:var(--acc);color:var(--bg-on-acc);border:none;border-radius:10px;
  padding:10px 14px;font-size:12.5px;font-weight:800;font-family:inherit;
  transition:transform .15s var(--spring)}
.dom-btn:active{transform:scale(.95)}
.dom-btn.ghost{background:var(--s3);color:var(--t1);border:1px solid var(--line2)}
.dom-res{font-size:12px;line-height:1.55;border-radius:10px;padding:10px 11px;margin-top:8px;
  background:var(--s2);color:var(--t2);border:1px solid var(--line)}
.dom-res.ok{background:rgba(34,212,106,.09);border-color:rgba(34,212,106,.3);color:#b7f3cf}
.dom-res.ko{background:rgba(255,59,59,.08);border-color:rgba(255,59,59,.3);color:#ffc0c0}
.dom-res b{color:var(--t1)}
.dom-spin{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.2);
  border-top-color:var(--acc);border-radius:50%;animation:domSpin .7s linear infinite;
  vertical-align:-1px;margin-right:5px}
@keyframes domSpin{to{transform:rotate(360deg)}}
.dom-chip{display:inline-block;font-family:ui-monospace,monospace;font-size:10.5px;
  background:var(--s3);border:1px solid var(--line2);border-radius:7px;padding:2px 6px;
  margin:3px 4px 0 0;cursor:pointer;color:var(--t2)}
.dom-chip.on{background:rgba(var(--acc-rgb),.14);border-color:rgba(var(--acc-rgb),.4);color:var(--acc)}

.dlive-pending-card{background:var(--s1);border:1px solid var(--line2);border-radius:14px;padding:13px;display:flex;flex-direction:column;gap:10px}
.dlive-pending-name{font-size:13px;font-weight:700;color:var(--t1)}
.dlive-pending-candidates{display:flex;flex-direction:column;gap:6px}
.dlive-candidate-btn{display:flex;justify-content:space-between;align-items:center;background:var(--s2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--t1);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,transform .15s var(--spring)}
.dlive-candidate-btn:active{transform:scale(.97);background:var(--s3)}
.dlive-candidate-score{font-size:10.5px;font-weight:800;color:var(--acc);background:rgba(var(--acc-rgb),.15);border-radius:8px;padding:2px 7px;flex-shrink:0;margin-left:8px}
.dlive-ignore-btn{background:none;border:none;color:var(--red);font-size:11.5px;font-weight:600;cursor:pointer;padding:2px;text-align:left}

/* ─── Onglet admin FLS (Football Live Stream API) ─── */
.fls-quota-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--t3)}
.fls-quota-head b{font-size:16px;font-weight:900;font-family:'Barlow Condensed',sans-serif}
.fls-quota-bar{height:6px;border-radius:99px;background:var(--s3);overflow:hidden}
.fls-quota-fill{height:100%;border-radius:99px;transition:width .3s ease}
.fls-quota-legend{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--t3);font-weight:600}
.fls-pending-meta{font-size:11px;color:var(--t3);margin-top:-4px}

/* ═══════════════════════════════════════════════════
   YOUTUBE RÉSUMÉ
═══════════════════════════════════════════════════ */
.yt-section-head{display:flex;align-items:center;gap:7px;padding:14px 14px 10px;border-top:1px solid var(--line)}
.yt-section-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.yt-loading{display:flex;justify-content:center;padding:20px}
.yt-empty{padding:16px 14px;font-size:13px;color:var(--t3);text-align:center}

/* iframe 16:9 */
.yt-iframe-wrap{padding:0 14px 12px}
.yt-iframe-title{font-size:12px;color:var(--t2);line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yt-iframe-container{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#000}
.yt-iframe-container iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

/* Autres résultats */
.yt-others{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}
.yt-thumb{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--s1);transition:background .12s}
.yt-thumb:active{background:var(--s2)}
.yt-thumb-img{width:80px;height:45px;border-radius:6px;flex-shrink:0;background-size:cover;background-position:center;position:relative;overflow:hidden}
.yt-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35)}
.yt-thumb-title{font-size:12px;color:var(--t2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Fallback sans clé */
.yt-noapikey{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 14px}
.yt-noapikey p{font-size:12px;color:var(--t3);text-align:center}
.yt-open-btn{display:flex;align-items:center;gap:7px;padding:10px 18px;border-radius:10px;background:#ff0000;color:#fff;font-size:13px;font-weight:600;text-decoration:none;font-family:'Barlow',sans-serif}

/* Lien "Ouvrir sur YouTube" sous chaque iframe */
.yt-watch-link{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;margin:6px 14px 2px;border-radius:8px;background:rgba(255,0,0,.08);border:1px solid rgba(255,0,0,.15);color:#ff4444;font-size:12px;font-weight:600;text-decoration:none;font-family:'Barlow',sans-serif;transition:background .15s}
.yt-watch-link:active{background:rgba(255,0,0,.16)}

/* Placeholder vidéo bloquée (erreur 153) */
.yt-blocked{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0a0a0a}
.yt-blocked span{font-size:12px;color:var(--t3);text-align:center;padding:0 16px}

/* ═══════════════════════════════════════════════════
   PWA — Bannière installation + Guide iOS
═══════════════════════════════════════════════════ */

/* Bannière */
.pwa-banner{position:fixed;bottom:calc(56px + env(safe-area-inset-bottom,0px));left:10px;right:10px;background:var(--s2);border:1px solid var(--line2);border-radius:14px;display:flex;align-items:center;gap:10px;padding:10px 12px;z-index:80;box-shadow:0 8px 32px rgba(0,0,0,.5);transform:translateY(calc(100% + 80px));opacity:0;transition:transform .4s cubic-bezier(.34,1.1,.64,1),opacity .3s var(--ease);pointer-events:none}
.pwa-banner.show{transform:translateY(0);opacity:1;pointer-events:all}
.pwa-mark{width:36px;height:36px;border-radius:10px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;color:var(--bg);flex-shrink:0;line-height:1}
.pwa-banner-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.pwa-banner-title{font-size:13px;font-weight:700;color:var(--t1)}
.pwa-banner-sub{font-size:11px;color:var(--t3)}
.pwa-banner-btn{padding:7px 14px;border-radius:8px;border:none;background:var(--acc);color:var(--bg);font-size:12px;font-weight:700;font-family:'Barlow',sans-serif;flex-shrink:0;transition:transform .15s var(--spring)}
.pwa-banner-btn:active{transform:scale(.92)}
.pwa-banner-dismiss{width:24px;height:24px;border-radius:6px;border:none;background:var(--s4);color:var(--t3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s}
.pwa-banner-dismiss:active{background:var(--s3)}

/* Guide iOS */
.ios-guide{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s var(--ease)}
.ios-guide.show{opacity:1}
.ios-guide-box{background:var(--s1);border-radius:18px 18px 0 0;width:100%;padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line2)}
.ios-guide-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px}
.ios-guide-steps{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.ios-step{display:flex;align-items:center;gap:12px}
.ios-step-num{width:24px;height:24px;border-radius:50%;background:var(--acc);color:var(--bg);font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Barlow Condensed',sans-serif}
.ios-step span{font-size:14px;color:var(--t2);line-height:1.4}
.ios-guide-close{width:100%;padding:12px;border-radius:12px;border:none;background:var(--acc);color:var(--bg);font-size:14px;font-weight:700;font-family:'Barlow',sans-serif;transition:transform .15s var(--spring)}
.ios-guide-close:active{transform:scale(.97)}

/* Résumé non disponible */
.yt-unavailable{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 20px;text-align:center}
.yt-unavail-title{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--t2)}
.yt-unavail-sub{font-size:12px;color:var(--t3);line-height:1.5;max-width:260px}

/* Bloc installation dans À propos */
.about-install-block{background:linear-gradient(135deg,rgba(232,255,71,.08) 0%,rgba(232,255,71,.03) 100%);border:1px solid rgba(232,255,71,.2);border-radius:14px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.about-install-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--t1)}
.about-install-sub{font-size:13px;color:var(--t2);line-height:1.55;max-width:280px}
.about-install-btn{display:flex;align-items:center;gap:9px;padding:13px 24px;border-radius:12px;border:none;background:var(--acc);color:var(--bg);font-size:14px;font-weight:800;font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:transform .18s var(--spring),box-shadow .18s;box-shadow:0 4px 20px rgba(232,255,71,.3);width:100%}
.about-install-btn:active{transform:scale(.95)}
.about-install-btn:disabled{cursor:default;box-shadow:none}
.about-install-note{font-size:11px;color:var(--t3)}

/* ═══════════════════════════════════════════════════
   THÈMES
═══════════════════════════════════════════════════ */
[data-theme="dark"]{
  --bg:#060608;--s1:#0c0c10;--s2:#131318;--s3:#1b1b22;--s4:#252530;
  --line:rgba(255,255,255,.06);--line2:rgba(255,255,255,.12);
  --t1:#f2f2f6;--t2:#7a7a8c;--t3:#3e3e50;
}
[data-theme="grey"]{
  --bg:#1a1a1f;--s1:#222228;--s2:#2a2a32;--s3:#32323c;--s4:#3a3a46;
  --line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.14);
  --t1:#f0f0f4;--t2:#8888a0;--t3:#55556a;
}
/* Transition fluide au changement de thème */
.theme-transitioning,.theme-transitioning *{
  transition:background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)!important;
}
.theme-transitioning .page,
.theme-transitioning .vp-ov,
.theme-transitioning .multi-ov,
.theme-transitioning .settings-drawer,
.theme-transitioning .ticker,
.theme-transitioning video,
.theme-transitioning img,
.theme-transitioning svg{transition:none!important;}

[data-theme="light"]{
  --bg:#ebebf0;--s1:#ffffff;--s2:#f2f2f7;--s3:#e2e2ea;--s4:#d0d0dc;
  --line:rgba(0,0,0,.10);--line2:rgba(0,0,0,.18);
  --t1:#08080e;--t2:#3a3a55;--t3:#707088;
  --red:#cc2222;--green:#158a45;--blue:#1a5fcc;
}

/* ── Barre nav bas ── */
[data-theme="light"] .bar{ background:var(--s1); border-top-color:var(--line2); }
[data-theme="light"] .bi-ico{ color:var(--t3); }
[data-theme="light"] .bi-lbl{ color:var(--t3); }
[data-theme="light"] .bi.on .bi-ico{ color:var(--acc); filter:none; }
[data-theme="light"] .bi.on .bi-lbl{ color:var(--acc); }

/* ── Nav top ── */
[data-theme="light"] .nav{ background:var(--s1); border-bottom-color:var(--line2); }
[data-theme="light"] .nav-btn{ background:var(--s3); border-color:var(--line2); color:var(--t2); }

/* ── Cards matchs ── */
[data-theme="light"] .mc-score.soon{ color:#3a3a55!important; font-weight:700; }
[data-theme="light"] .mc-score.ft{ color:#3a3a55!important; }
[data-theme="light"] .mcard{ background:var(--s1); border-color:var(--line2); box-shadow:0 1px 4px rgba(0,0,0,.07); }
[data-theme="light"] .featured{ background:var(--s1); border-color:var(--line2); box-shadow:0 2px 8px rgba(0,0,0,.09); }
[data-theme="light"] .mc-status.live{ background:#fde8e8; color:#cc2222; }
[data-theme="light"] .mc-status.ft{ background:var(--s3); color:var(--t2); }
[data-theme="light"] .watch-btn{ background:var(--s3); color:var(--t1); border-color:var(--line2); }
[data-theme="light"] .watch-btn.has-stream{ background:var(--acc); color:var(--bg-on-acc); border-color:transparent; }
[data-theme="light"] .fav-btn{ color:var(--t3); }
[data-theme="light"] .fav-btn.on{ color:var(--acc); }
[data-theme="light"] .f-btn.ghost{ background:var(--s3); color:var(--t1); border-color:var(--line2); }
[data-theme="light"] .badge-ft{ background:var(--s3); color:var(--t2); }

/* ── Filtres / chips ── */
[data-theme="light"] .comp-chip{ background:var(--s3); color:var(--t1); border-color:var(--line2); }
[data-theme="light"] .comp-chip.dim{ color:var(--t3); opacity:.7; }
[data-theme="light"] .comp-chip-int{ background:rgba(58,142,246,.12); border-color:rgba(58,142,246,.35); }
[data-theme="light"] .date-chip .dc-dot{ background:rgba(0,0,0,.15); }

/* ── Lecteur — boutons Sauvegarder/Partager ── */
[data-theme="light"] .vp-act-btn{ background:var(--s2); color:var(--t1); border-color:var(--line2); }
[data-theme="light"] .vp-act-btn.on{ background:var(--acc); color:var(--bg-on-acc); border-color:var(--acc); }
[data-theme="light"] .vp-panel{ background:var(--bg); }
[data-theme="light"] .vp-panel-head{ border-bottom-color:var(--line2); }
[data-theme="light"] .vp-panel-x{ background:var(--s3); border-color:var(--line2); color:var(--t2); }

/* ── À propos — bloc install ── */
[data-theme="light"] .about-install-block{
  background:rgba(0,0,0,.03);
  border-color:var(--line2);
}
[data-theme="light"] .about-card{ background:var(--s1); border-color:var(--line2); }

/* ── Ticker ── */
[data-theme="light"] .ticker-wrap{ background:var(--s1); border-bottom-color:var(--line2); }
[data-theme="light"] .t-sc-ft{ background:var(--s4); color:var(--t2); }

/* ── Settings drawer ── */
[data-theme="light"] .settings-drawer{ border-top-color:var(--line2); }
[data-theme="light"] .settings-row{ border-bottom-color:var(--line2); }
[data-theme="light"] .settings-row-btn{ border-bottom-color:var(--line2); }

/* ═══════════════════════════════════════════════════
   SPLASH SCREEN
═══════════════════════════════════════════════════ */
.splash{position:fixed;inset:0;background:var(--bg);z-index:1000;display:flex;align-items:center;justify-content:center;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.splash.hide{opacity:0;transform:scale(1.04);pointer-events:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.splash-logo{width:80px;height:80px;border-radius:22px;background:var(--acc);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(232,255,71,.3);animation:splash-pop .6s var(--spring) both}
.splash-mark{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:var(--bg);line-height:1}
.splash-name{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;letter-spacing:4px;color:var(--t1);animation:splash-fade .5s .2s var(--ease) both}
.splash-bar{width:120px;height:3px;background:var(--s3);border-radius:2px;overflow:hidden;animation:splash-fade .4s .3s var(--ease) both}
.splash-progress{height:100%;background:var(--acc);border-radius:2px;width:0;transition:width .8s var(--ease)}
@keyframes splash-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes splash-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════════════
   DRAWER PARAMÈTRES
═══════════════════════════════════════════════════ */
/* Grille thèmes */
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.theme-btn{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 6px;border-radius:12px;border:2px solid var(--line);background:var(--s2);cursor:pointer;transition:border-color .15s,background .15s}
.theme-btn.active{border-color:var(--acc)}
.theme-btn span{font-size:11px;font-weight:600;color:var(--t2)}
.theme-btn.active span{color:var(--acc)}
.theme-preview{width:100%;height:48px;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;gap:3px;padding:5px}
.dark-prev{background:#060608}.grey-prev{background:#1a1a1f}.light-prev{background:#f0f0f5}
.prev-nav{height:8px;border-radius:3px;background:rgba(255,255,255,.08);margin-bottom:2px}
.light-prev .prev-nav{background:rgba(0,0,0,.08)}
.prev-card{height:10px;border-radius:3px;background:rgba(255,255,255,.06)}
.light-prev .prev-card{background:rgba(0,0,0,.07)}
.prev-card.s{height:7px;opacity:.6}

/* Grille accents */
.accent-grid{display:flex;gap:14px;margin-bottom:12px}
.accent-btn{width:42px;height:42px;border-radius:12px;background:var(--c);border:3px solid transparent;cursor:pointer;transition:transform .15s var(--spring),border-color .15s}
.accent-btn.active{border-color:var(--t1);transform:scale(1.15)}
.accent-btn:active{transform:scale(.9)}

/* Toggle */
.toggle{width:44px;height:26px;border-radius:13px;background:var(--s4);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.toggle.on{background:var(--acc)}
.toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--spring);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.toggle.on .toggle-thumb{transform:translateX(18px)}
.toggle.on .toggle-thumb{background:var(--bg)}

/* Texte sur couleur accent (adaptatif selon luminance) */
.nav-mark,.splash-mark,.about-mark,.pwa-mark{color:var(--bg-on-acc,var(--bg))}
.about-install-btn,.pwa-banner-btn,.ios-guide-close{color:var(--bg-on-acc,var(--bg))}

/* ═══════════════════════════════════════════════════
   PAGE CLUB
═══════════════════════════════════════════════════ */
.club-ov{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;flex-direction:column}
.club-ov.open{display:flex;animation:clubIn .25s var(--ease) both}
@keyframes clubIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.club-inner{display:flex;flex-direction:column;height:100%}

/* Hero */
.club-hero{flex-shrink:0;background:var(--s1);border-bottom:1px solid var(--line2);padding:calc(env(safe-area-inset-top,0) + 8px) 14px 16px;position:relative}
.club-back{position:absolute;top:calc(env(safe-area-inset-top,0) + 10px);left:14px;width:34px;height:34px;border-radius:9px;background:var(--s3);border:1px solid var(--line2);color:var(--t1);display:flex;align-items:center;justify-content:center;transition:transform .15s var(--spring)}
.club-back:active{transform:scale(.88)}
.club-hero-content{display:flex;align-items:center;gap:14px;margin-top:44px}
.club-hero-crest{width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.club-hero-crest img{width:56px;height:56px;object-fit:contain}
.club-hero-name{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;color:var(--t1);line-height:1}
.club-hero-country{font-size:11px;color:var(--t3);margin-top:4px;font-weight:500}

/* Body */
.club-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 40px}
.club-body::-webkit-scrollbar{display:none}
.club-loading{display:flex;align-items:center;justify-content:center;height:100px}

/* Section */
.cs{margin-bottom:18px}
.cs-title{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);margin-bottom:8px;padding:0 2px}
.cs-empty{font-size:12px;color:var(--t3);padding:10px 2px}
.cs-group{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--acc);text-transform:uppercase;padding:6px 2px 4px}

/* Ligne match */
.cr{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--s1);border-radius:10px;border:1px solid var(--line);margin-bottom:5px}
.cr-loc{font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--t3);width:12px;flex-shrink:0}
.cr-crest{width:20px;height:20px;object-fit:contain;flex-shrink:0}
.cr-crest-fb{width:20px;height:20px;background:var(--s3);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:800;color:var(--t3);flex-shrink:0}
.cr-name{flex:1;font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-score{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:900;color:var(--t2);min-width:36px;text-align:center}
.cr-score.win{color:var(--green)}
.cr-score.loss{color:var(--red)}
.cr-score.draw{color:var(--t2)}
.cr-date{font-size:10px;color:var(--t3);min-width:34px;text-align:right;flex-shrink:0}

/* Ligne classement */
.sr{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;margin-bottom:3px}
.sr.me{background:var(--s2);border:1px solid var(--acc);border-radius:9px}
.sr:not(.me){background:var(--s1);border:1px solid var(--line)}
.sr-pos{width:18px;font-size:11px;font-weight:700;color:var(--t3);text-align:center;flex-shrink:0}
.sr-crest{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.sr-crest-fb{width:18px;height:18px;background:var(--s3);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:800;color:var(--t3);flex-shrink:0}
.sr-name{flex:1;font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-gd{font-size:11px;color:var(--t3);min-width:28px;text-align:right}
.sr-pts{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;color:var(--t1);min-width:26px;text-align:right}
.sr.me .sr-pts{color:var(--acc)}

/* État vide Favoris */
.fav-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 30px;gap:12px;text-align:center}
.fav-empty-icon{color:var(--t3);opacity:.4}
.fav-empty-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--t2)}
.fav-empty-sub{font-size:13px;color:var(--t3);line-height:1.5;max-width:220px}

/* ═══════════════════════════════════════════════════
   PAGE PARAMÈTRES (full screen)
═══════════════════════════════════════════════════ */
.sett-ov{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;flex-direction:column}
.sett-ov.open{display:flex;animation:clubIn .25s var(--ease) both}
.sett-inner{display:flex;flex-direction:column;height:100%}

/* Header */
.sett-head{flex-shrink:0;background:var(--s1);border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0) + 10px) 16px 12px;position:relative}
.sett-back{width:34px;height:34px;border-radius:9px;background:var(--s3);border:1px solid var(--line2);color:var(--t1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s var(--spring)}
.sett-back:active{transform:scale(.88)}
.sett-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--t1)}

/* Body */
.sett-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px 40px}
.sett-body::-webkit-scrollbar{display:none}

/* Sections */
.sett-section{margin-bottom:20px}
.sett-label{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);margin-bottom:7px;padding:0 4px}
.sett-card{background:var(--s1);border-radius:14px;border:1px solid var(--line2);overflow:hidden;padding:4px 0}
.sett-divider{height:1px;background:var(--line);margin:0 16px}

/* Rows */
.sett-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px;width:100%;background:none;border:none;text-align:left;color:var(--t1)}
.sett-row-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.sett-row-left svg{flex-shrink:0;color:var(--t2)}
.sett-row-title{font-size:14px;font-weight:600;color:var(--t1)}
.sett-row-sub{font-size:11px;color:var(--t3);margin-top:1px}
.sett-row-inline{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.sett-btn:active{background:var(--s2)}

/* Apparence card */
.sett-card .theme-grid{padding:12px 16px 4px;gap:10px}
.sett-card .accent-grid{margin-bottom:0}

/* Support */
.sett-support{display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;cursor:pointer;transition:background .15s}
.sett-support:active{background:var(--s2)}
.sett-support-icon{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#ff6b6b,#ff3b3b);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}

/* About */
.sett-about{display:flex;flex-direction:column;align-items:center;padding:20px 16px;gap:6px;text-align:center}
.sett-about-logo{margin-bottom:4px}
.sett-about-name{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:var(--t1)}
.sett-about-version{font-size:11px;color:var(--t3);font-weight:500}
.sett-about-text{font-size:12px;color:var(--t3);line-height:1.5;max-width:240px;margin-top:4px}

/* Footer */
.sett-footer{text-align:center;font-size:11px;color:var(--t3);padding:8px 0 4px}

/* Toggle */
.toggle-switch{width:44px;height:26px;border-radius:13px;background:var(--s4);border:none;cursor:pointer;position:relative;flex-shrink:0;transition:background .2s}
.toggle-switch.on{background:var(--acc)}
.toggle-track{position:absolute;inset:0;border-radius:13px}
.toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--spring),background .2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle-switch.on .toggle-thumb{transform:translateX(18px)}
.toggle-switch.on .toggle-thumb{background:var(--bg-on-acc)}

/* ═══════════════════════════════════════════════════
   PAGE COMPTE
═══════════════════════════════════════════════════ */
.acc-wrap{display:flex;flex-direction:column;gap:16px;padding:20px 14px 40px}
.acc-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0 8px}
.acc-app-name{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:var(--t1)}

/* Card connexion */
.acc-card{background:var(--s1);border-radius:16px;border:1px solid var(--line2);padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.acc-card-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--t1)}
.acc-card-sub{font-size:12px;color:var(--t3);line-height:1.5;max-width:220px}
.acc-google-btn{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:12px;border:1px solid var(--line2);background:var(--s1);color:var(--t1);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,transform .15s var(--spring);width:100%;justify-content:center;margin-top:4px}
.acc-google-btn:active{transform:scale(.97);background:var(--s2)}

/* Features */
.acc-features{display:flex;flex-direction:column;gap:0;background:var(--s1);border-radius:16px;border:1px solid var(--line2);overflow:hidden}
.acc-feature{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.acc-feature:last-child{border-bottom:none}
.acc-feature svg{flex-shrink:0;color:var(--acc)}
.acc-feature-title{font-size:13px;font-weight:600;color:var(--t1)}
.acc-feature-sub{font-size:11px;color:var(--t3);margin-top:1px}
.acc-footer{text-align:center;font-size:11px;color:var(--t3);padding:4px 0}

/* ─── ADMIN PANEL ─────────────────────────────────── */
.acc-admin-trigger{width:100%;padding:10px;background:none;border:1px solid var(--line2);border-radius:8px;color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif}
.adm-panel{padding:0 0 20px}
.adm-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 12px;background:var(--s1);border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:10}
.adm-panel-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;letter-spacing:2px;color:var(--acc);line-height:1}
.adm-panel-subtitle{font-size:11px;color:var(--t3);font-weight:500;margin-top:2px}
.adm-close-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--s2);border:1px solid var(--line2);border-radius:10px;color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.adm-close-btn:active{background:var(--s3)}
.adm-progress-bar{height:3px;background:var(--s3)}
.adm-progress-fill{height:100%;background:var(--acc);transition:width .4s var(--ease);border-radius:0 2px 2px 0}
.adm-date-nav{display:flex;gap:6px;overflow-x:auto;padding:12px 14px 0;scrollbar-width:none}
.adm-date-nav::-webkit-scrollbar{display:none}
.adm-date-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--line2);background:var(--s2);color:var(--t2);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.adm-date-btn.active{background:var(--acc);color:#08080e;border-color:var(--acc)}
.adm-matches-wrap{padding:12px 14px 0}
.adm-comp-header{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);padding:16px 0 6px;border-bottom:1px solid var(--line)}
.adm-comp-count{margin-left:auto;font-size:9px;background:var(--s3);padding:2px 7px;border-radius:10px;color:var(--t3)}
.adm-match{background:var(--s1);border:1px solid var(--line2);border-radius:14px;margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.adm-match.has-stream{border-color:rgba(232,255,71,.3);background:linear-gradient(135deg,var(--s1) 0%,rgba(232,255,71,.02) 100%)}
.adm-match-header{padding:14px;cursor:pointer;transition:background .12s}
.adm-match-header:active{background:var(--s2)}
.adm-match-crests{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px}
.adm-match-crests img{width:36px;height:36px;object-fit:contain}
.adm-match-vs-block{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:60px}
.adm-match-score{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;color:var(--t1);letter-spacing:-1px;line-height:1}
.adm-match-time{font-size:16px;font-weight:700;color:var(--blue);font-family:'Barlow Condensed',sans-serif}
.adm-match-live{font-size:8px;font-weight:800;letter-spacing:2px;color:var(--red);background:rgba(255,59,59,.1);padding:2px 7px;border-radius:20px;animation:blink 1.2s infinite}
.adm-match-fin{font-size:8px;font-weight:800;letter-spacing:2px;color:var(--t3);background:var(--s3);padding:2px 7px;border-radius:20px}
.adm-match-teams{display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;margin-bottom:10px}
.adm-team-name{color:var(--t1)}
.adm-team-sep{color:var(--t3);font-weight:400}
.adm-match-footer-row{display:flex;align-items:center;justify-content:space-between}
.adm-assigned-badge{display:flex;align-items:center;gap:6px;background:rgba(var(--acc-rgb),.08);border:1px solid rgba(var(--acc-rgb),.2);padding:5px 10px;border-radius:20px;font-size:11px;font-weight:700;color:var(--t1)}
.adm-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--ch-color,var(--acc));flex-shrink:0}
.adm-no-stream{font-size:11px;color:var(--t3);font-style:italic}
.adm-chevron{color:var(--t3);transition:transform .2s var(--ease);flex-shrink:0}
.adm-match-form{display:none;flex-direction:column;gap:10px;padding:14px;background:var(--s2);border-top:1px solid var(--line)}
.adm-ch-cat-label{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);margin-top:2px}
.adm-ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:7px}
.adm-ch-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 6px;border-radius:10px;border:1px solid var(--line2);background:var(--s3);cursor:pointer;transition:all .15s var(--spring)}
.adm-ch-btn:active{transform:scale(.93)}
.adm-ch-btn.selected{border-color:var(--ch-color,var(--acc));background:rgba(var(--acc-rgb),.08);box-shadow:0 0 0 1px var(--ch-color,var(--acc))}
.adm-ch-short{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;color:var(--ch-color,var(--t1));line-height:1}
.adm-ch-name{font-size:9px;font-weight:600;color:var(--t2);text-align:center;line-height:1.2}
.adm-ch-btn.selected .adm-ch-name{color:var(--t1)}
.adm-custom-row{display:flex;gap:8px}
.adm-custom{flex:1;padding:10px 12px;background:var(--s3);border:1px solid var(--line2);border-radius:10px;color:var(--t1);font-size:12px;font-family:'Barlow',sans-serif}
.adm-custom:focus{outline:none;border-color:var(--acc)}
.adm-custom-save{padding:10px 14px;background:var(--s4);border:1px solid var(--line2);border-radius:10px;color:var(--t2);font-size:12px;font-weight:700;cursor:pointer}
.adm-form-actions{display:flex;gap:8px}
.adm-save-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;background:var(--acc);border:none;border-radius:10px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:900;text-transform:uppercase;cursor:pointer;color:#08080e;transition:transform .15s var(--spring)}
.adm-save-btn:active{transform:scale(.96)}
.adm-del-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 16px;background:rgba(255,71,87,.08);border:1px solid rgba(255,71,87,.25);border-radius:10px;color:var(--red);cursor:pointer;font-size:12px;font-weight:600;transition:all .15s}
.adm-del-btn:active{transform:scale(.96)}
.adm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 20px;color:var(--t3);font-size:13px;text-align:center}

/* ── COUPE DU MONDE 2026 ── */
.wc-banner{
  display:flex;align-items:center;gap:12px;
  margin:12px 16px 4px;
  padding:14px 16px;
  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
  border-radius:16px;
  border:1px solid rgba(255,215,0,.25);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.wc-banner::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,215,0,.05),transparent);
  pointer-events:none;
}
.wc-flag{font-size:28px;flex-shrink:0;}
.wc-info{flex:1;}
.wc-title{font-size:14px;font-weight:700;color:#FFD700;letter-spacing:.3px;}
.wc-sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px;}
.wc-countdown{text-align:center;flex-shrink:0;}
.wc-days{font-size:22px;font-weight:800;color:#FFD700;line-height:1;}
.wc-label{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.5px;}
.wc-soon{
  font-size:9px;font-weight:700;
  background:rgba(255,215,0,.15);
  color:#FFD700;
  padding:3px 8px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.5px;
  border:1px solid rgba(255,215,0,.3);
  flex-shrink:0;
  align-self:center;
}

/* ── ONBOARDING ── */
.ob-wrap{width:100%;max-width:420px;margin:0 auto;padding:20px 0 40px;display:flex;flex-direction:column;gap:0;}
.ob-logo{width:56px;height:56px;background:var(--acc);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:#fff;margin:0 auto 16px;}
.ob-title{font-size:26px;font-weight:800;text-align:center;color:var(--t1);line-height:1.2;margin-bottom:8px;}
.ob-title span{color:var(--acc);}
.ob-sub{font-size:14px;color:var(--t3);text-align:center;margin-bottom:20px;}
.ob-steps{display:flex;gap:6px;justify-content:center;margin-bottom:24px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--b2);}
.ob-dot.on{background:var(--acc);width:20px;border-radius:4px;}
.ob-section-title{font-size:12px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;}
.ob-comps{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.ob-comp{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--b1);border-radius:12px;border:1.5px solid transparent;cursor:pointer;transition:all .15s;}
.ob-comp.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.08);}
.ob-comp-flag{font-size:20px;flex-shrink:0;}
.ob-comp-name{flex:1;font-size:14px;font-weight:600;color:var(--t1);}
.ob-comp-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--b3);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--acc);font-weight:700;flex-shrink:0;}
.ob-comp.on .ob-comp-check{background:var(--acc);border-color:var(--acc);color:#fff;}
.ob-btn{width:100%;padding:16px;background:var(--acc);color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;margin-top:8px;}
.ob-back{font-size:14px;color:var(--t3);cursor:pointer;margin-bottom:16px;align-self:flex-start;}
.ob-search-wrap{margin-bottom:12px;}
.ob-search{width:100%;padding:14px 16px;background:var(--b1);border:1.5px solid var(--b2);border-radius:12px;color:var(--t1);font-size:15px;box-sizing:border-box;}
.ob-search:focus{outline:none;border-color:var(--acc);}
.ob-team-results{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;max-height:250px;overflow-y:auto;}
.ob-team-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--b1);border-radius:10px;border:1.5px solid transparent;cursor:pointer;}
.ob-team-row.on{border-color:var(--acc);}
.ob-team-row span{flex:1;font-size:14px;font-weight:500;color:var(--t1);}
.ob-check-green{color:#22c55e;font-weight:700;}
.ob-selected-team{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(34,197,94,.1);border-radius:10px;border:1.5px solid #22c55e;margin-bottom:12px;}
.ob-selected-team span{flex:1;font-size:14px;font-weight:600;color:var(--t1);}
.ob-final{align-items:center;text-align:center;}
.ob-done-icon{font-size:64px;margin-bottom:16px;}
.ob-recap{display:flex;flex-direction:column;gap:10px;width:100%;margin:20px 0;}
.ob-recap-item{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--b1);border-radius:10px;}
.ob-recap-ico{font-size:20px;}
.ob-recap-item span{font-size:14px;font-weight:500;color:var(--t1);}
.ob-no-team{display:flex;flex-direction:column;align-items:center;padding:40px 20px;color:var(--t2);}

/* ── DASHBOARD ── */
.db-wrap{padding:12px 16px 20px;display:flex;flex-direction:column;gap:0;}
.db-hero{display:flex;align-items:center;gap:14px;padding:16px;background:var(--b1);border-radius:16px;margin-bottom:16px;position:relative;}
.db-team-crest{width:52px;height:52px;object-fit:contain;border-radius:8px;}
.db-greeting{font-size:12px;color:var(--t3);margin-bottom:2px;}
.db-team-name{font-size:18px;font-weight:800;color:var(--t1);}
.db-team-sub{font-size:11px;color:var(--t3);margin-top:2px;}
.db-edit-btn{position:absolute;right:12px;top:12px;background:var(--b2);border:none;border-radius:8px;padding:6px 8px;cursor:pointer;font-size:13px;}
.db-section-title{font-size:12px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;}
.db-next-match{background:linear-gradient(135deg,var(--b1),var(--b2));border-radius:16px;padding:16px;border:1.5px solid var(--b3);cursor:pointer;position:relative;overflow:hidden;}
.db-next-match.is-live{border-color:rgba(239,68,68,.4);background:linear-gradient(135deg,rgba(239,68,68,.05),var(--b1));}
.db-match-comp{font-size:11px;color:var(--t3);margin-bottom:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.db-match-teams{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.db-mt{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;}
.db-mt img{width:36px;height:36px;object-fit:contain;}
.db-mt span{font-size:12px;font-weight:600;color:var(--t1);text-align:center;}
.db-vs{font-size:18px;font-weight:800;color:var(--t2);padding:0 12px;}
.db-match-time{font-size:12px;color:var(--t3);text-align:center;}
.db-stream-badge{display:inline-block;margin-top:8px;padding:4px 10px;background:rgba(34,197,94,.15);color:#22c55e;border-radius:20px;font-size:11px;font-weight:700;}
.db-no-match{padding:16px;background:var(--b1);border-radius:12px;color:var(--t3);text-align:center;font-size:13px;}
.db-last-match{background:var(--b1);border-radius:12px;padding:12px 16px;cursor:pointer;}
.db-lm-teams{display:flex;align-items:center;gap:8px;justify-content:center;}
.db-lm-teams span{font-size:13px;font-weight:600;color:var(--t1);}
.db-lm-score{font-size:16px;font-weight:800 !important;padding:0 8px;}

/* ── YOUTUBE MODAL IMMERSIF ── */
#yt-modal{
  display:none;
  position:fixed;inset:0;z-index:500;
  flex-direction:column;align-items:center;justify-content:flex-end;
}
#yt-modal.open .ytm-backdrop{ opacity:1; }
#yt-modal.open .ytm-sheet{ transform:translateY(0); }
.ytm-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.85);
  opacity:0;transition:opacity .3s;
  backdrop-filter:blur(4px);
}
.ytm-sheet{
  position:relative;z-index:1;
  width:100%;
  background:var(--s1);
  border-radius:20px 20px 0 0;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.34,1.1,.64,1);
  padding-bottom:env(safe-area-inset-bottom,0);
  overflow:hidden;
}
.ytm-handle{
  width:36px;height:4px;
  background:var(--b3);border-radius:2px;
  margin:10px auto 0;
}
.ytm-header{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px 10px;
}
.ytm-title{
  flex:1;
  font-size:13px;font-weight:600;color:var(--t1);
  line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ytm-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.ytm-yt-btn{
  display:flex;align-items:center;gap:5px;
  padding:6px 10px;
  background:#ff0000;color:#fff;
  border-radius:8px;font-size:11px;font-weight:700;
  text-decoration:none;
}
.ytm-close{
  width:30px;height:30px;
  background:var(--b2);border:none;border-radius:8px;
  color:var(--t2);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ytm-player{
  position:relative;
  width:100%;padding-top:56.25%;
  background:#000;
}
.ytm-player iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:none;
}
.ytm-meta{
  padding:10px 16px 14px;
  display:flex;align-items:center;gap:8px;
}
.ytm-badge{
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:var(--t3);font-weight:500;
}

/* ── YOUTUBE THUMBNAILS GRID ── */
.yt-grid{display:flex;flex-direction:column;gap:10px;padding:0 14px 14px;}
.yt-thumb{display:flex;gap:10px;cursor:pointer;padding:10px;border-radius:12px;border:1px solid var(--line2);background:var(--b1);transition:background .12s;align-items:flex-start;}
.yt-thumb:active{background:var(--b2);}
.yt-thumb-featured{border-color:var(--acc);background:rgba(var(--acc-rgb),.05);}
.yt-thumb-img{width:100px;height:56px;border-radius:8px;flex-shrink:0;background-size:cover;background-position:center;position:relative;overflow:hidden;}
.yt-thumb-featured .yt-thumb-img{width:120px;height:68px;}
.yt-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);}
.yt-thumb-info{flex:1;min-width:0;}
.yt-thumb-badge{font-size:9px;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.yt-thumb-title{font-size:12px;color:var(--t1);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px;}
.yt-thumb-channel{font-size:11px;color:var(--t3);}

/* ── PAGE DASHBOARD ── */
.dash-wrap{padding-bottom:8px}

/* Apparition en cascade — chaque bloc a son propre délai (--d) calculé au render */
@keyframes dashFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.dash-anim{animation:dashFadeUp .52s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.dash-anim{animation:none}.dash-hero-glow{animation:none}}

/* Hero card */
.dash-hero-card{margin:12px 14px 8px;border-radius:20px;background:var(--s2);border:1px solid var(--line2);overflow:hidden;position:relative;padding:20px 18px 16px}
.dash-hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(232,255,71,.07),transparent 65%);pointer-events:none;animation:dashGlowPulse 8s ease-in-out infinite alternate}
@keyframes dashGlowPulse{to{opacity:.6;transform:scale(1.08)}}
.dash-hero-top{display:flex;align-items:center;gap:14px;margin-bottom:18px;position:relative}
.dash-hero-logo{flex-shrink:0}
.dash-hero-text{flex:1;min-width:0}
.dash-hero-greet{font-size:12.5px;font-weight:600;color:var(--t2);line-height:1.3;margin-bottom:1px}
.dash-hero-title{font-size:13px;font-weight:600;color:var(--t2);line-height:1.4}
.dash-hero-brand{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;letter-spacing:2px;color:var(--t1);display:block;line-height:1.1;margin-top:1px}
.dash-hero-date{font-size:11px;color:var(--t3);margin-top:4px;font-weight:500;text-transform:capitalize}

/* Stats row */
.dash-stats-row{display:flex;align-items:center;background:var(--s1);border-radius:12px;border:1px solid var(--line);padding:13px 0;margin-bottom:14px}
.dash-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.dash-stat-val{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;color:var(--t1);line-height:1;display:flex;align-items:center;gap:5px}
.dash-stat-val.live-color{color:var(--red)}
.dash-live-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 1s infinite;flex-shrink:0}
.dash-stat-lbl{font-size:9px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;text-align:center;padding:0 4px}
.dash-stat-sep{width:1px;height:32px;background:var(--line2)}

/* CTA */
.dash-hero-actions{display:flex;gap:8px;position:relative}
.dash-cta{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px;border-radius:11px;border:none;font-family:'Barlow',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .16s var(--spring)}
.dash-cta:active{transform:scale(.95)}
.dash-cta.primary{background:var(--acc);color:var(--bg)}
.dash-cta.ghost{background:var(--s3);color:var(--t1);border:1px solid var(--line2)}

/* Section heads */
.dash-section-head{display:flex;align-items:center;justify-content:space-between;padding:20px 14px 10px}
.dash-section-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--t2);display:flex;align-items:center;gap:6px}
.dash-section-link{background:none;border:none;color:var(--acc);font-size:11.5px;font-weight:700;cursor:pointer;padding:2px 4px;font-family:'Barlow',sans-serif}
.dash-section-link:active{opacity:.6}
.dash-section-sub{font-size:10px;color:var(--t3);display:flex;align-items:center;gap:5px}
.news-spinner{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--s4);border-top-color:var(--acc);animation:spin .7s linear infinite}

/* Aperçu des matchs du jour */
.dash-preview-list{display:flex;flex-direction:column;gap:8px;padding:0 14px}
.dash-preview-row{display:flex;align-items:center;gap:12px;background:var(--s1);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;cursor:pointer;transition:transform .15s var(--spring),background .15s}
.dash-preview-row:active{transform:scale(.98);background:var(--s2)}
.dash-prev-time{display:flex;align-items:center;gap:5px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;color:var(--t3);min-width:46px;flex-shrink:0}
.dash-prev-time.is-live{color:var(--red)}
.dash-prev-teams{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.dash-prev-team{display:flex;align-items:center;gap:7px;min-width:0}
.dash-prev-team img{width:17px;height:17px;object-fit:contain;flex-shrink:0}
.dash-prev-team span{font-size:12.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-prev-score{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;color:var(--t1);text-align:right;line-height:1.35;flex-shrink:0}
.dash-prev-arrow{color:var(--t3);flex-shrink:0}

/* Ce que propose le site */
.dash-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 14px}
.dash-feat{background:var(--s1);border:1px solid var(--line2);border-radius:15px;padding:14px 13px;cursor:pointer;transition:transform .15s var(--spring),border-color .15s}
.dash-feat:active{transform:scale(.97);border-color:var(--acc)}
.dash-feat-ico{font-size:21px;line-height:1;margin-bottom:8px}
.dash-feat-t{font-size:12.5px;font-weight:800;color:var(--t1);margin-bottom:3px}
.dash-feat-d{font-size:10.5px;color:var(--t3);line-height:1.35}

/* Actualités — carrousel horizontal (défilement latéral avec accroche) */
.dash-news-list{
  display:flex;flex-direction:row;gap:12px;
  padding:2px 14px 10px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
  /* Les cartes en bord d'écran s'estompent doucement au lieu d'être coupées net */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
}
.dash-news-list::-webkit-scrollbar{display:none}
.dash-news-loading{display:flex;justify-content:center;padding:24px 0;width:100%}

/* App Android — teaser "en développement" */
.dash-app-card{position:relative;overflow:hidden;margin:20px 14px 0;padding:16px;border-radius:18px;
  background:linear-gradient(150deg,var(--s1),var(--s2));border:1px solid var(--line2)}
.dash-app-glow{position:absolute;top:-70%;right:-20%;width:55%;height:200%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--acc-rgb),.14),transparent);
  animation:dashAppGlow 7s ease-in-out infinite alternate}
@keyframes dashAppGlow{to{transform:translate(-15%,10%) scale(1.15);opacity:.6}}
.dash-app-badge{position:absolute;top:14px;right:14px;z-index:1;
  background:var(--acc);color:var(--bg);font-size:9px;font-weight:900;letter-spacing:.6px;
  text-transform:uppercase;padding:3px 9px;border-radius:20px}
.dash-app-row{position:relative;z-index:1;display:flex;align-items:center;gap:13px}
.dash-app-ico{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.28);color:var(--acc)}
.dash-app-txt{flex:1;min-width:0;padding-right:46px}
.dash-app-t{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;color:var(--t1)}
.dash-app-d{font-size:11.5px;color:var(--t3);line-height:1.4;margin-top:2px}
.dash-app-progress{position:relative;z-index:1;height:4px;border-radius:4px;background:var(--s3);margin-top:14px;overflow:hidden}
.dash-app-progress-fill{height:100%;width:45%;border-radius:4px;background:linear-gradient(90deg,var(--acc),rgba(var(--acc-rgb),.5));
  animation:dashAppProg 2.4s ease-in-out infinite alternate}
@keyframes dashAppProg{from{width:38%}to{width:58%}}
.dash-app-hint{position:relative;z-index:1;font-size:10.5px;color:var(--t3);margin-top:9px;text-align:center;line-height:1.35}
@media (prefers-reduced-motion:reduce){.dash-app-glow,.dash-app-progress-fill{animation:none}}

/* Compétitions scroll */
.dash-comps-scroll{display:flex;gap:7px;overflow-x:auto;padding:0 14px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dash-comps-scroll::-webkit-scrollbar{display:none}
.dash-comp-pill{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;background:var(--s1);border:1px solid var(--line2);cursor:pointer;transition:background .15s,transform .15s var(--spring)}
.dash-comp-pill:active{transform:scale(.93);background:var(--s2)}
.dash-comp-pill img{width:14px;height:14px;object-fit:contain}
.dash-comp-pill span{font-size:11px;font-weight:600;color:var(--t2);white-space:nowrap}

/* News — cartes du carrousel (la mise en page du conteneur est plus haut :
   ce doublon remettait flex-direction:column et annulait le carrousel) */
.news-card{
  display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;
  transition:background .12s,transform .18s var(--spring),border-color .18s;position:relative;
  flex:0 0 268px;width:268px;scroll-snap-align:start;
  animation:newsCardIn .45s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes newsCardIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
/* Décalage progressif : les cartes entrent en cascade vers la droite */
.news-card:nth-child(1){animation-delay:.02s}
.news-card:nth-child(2){animation-delay:.07s}
.news-card:nth-child(3){animation-delay:.12s}
.news-card:nth-child(4){animation-delay:.17s}
.news-card:nth-child(5){animation-delay:.22s}
.news-card:nth-child(n+6){animation-delay:.26s}
.news-card-featured{flex:0 0 300px;width:300px}
@media (prefers-reduced-motion:reduce){
  .news-card{animation:none}
  .dash-news-list{scroll-behavior:auto}
}
.news-card:active{transform:scale(.985);background:var(--s2)}
.news-card-featured{border-color:var(--line2)}
.news-card-img{width:100%;height:124px;background-size:cover;background-position:center;position:relative;flex-shrink:0}
.news-card-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 35%,rgba(0,0,0,.78) 100%)}
.news-card-body{padding:11px 14px 13px;display:flex;flex-direction:column;gap:5px}
.news-card-meta{display:flex;align-items:center;gap:7px}
.news-source{font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--src-color,var(--acc));background:rgba(255,255,255,.06);padding:2px 7px;border-radius:4px;border:1px solid rgba(255,255,255,.08)}
.news-date{font-size:10px;color:var(--t3);font-weight:500}
.news-card-title{font-size:13px;font-weight:700;color:var(--t1);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-right:18px}
.news-title-lg{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;-webkit-line-clamp:2;letter-spacing:.2px;padding-right:0}
.news-card-desc{font-size:11.5px;color:var(--t3);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-arrow{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--t3);flex-shrink:0}
.news-card-featured .news-arrow{display:none}

/* Skeleton */
.news-skeleton-wrap{display:flex;flex-direction:column;gap:8px;padding:0 14px}
.news-skeleton{display:flex;gap:10px;background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:13px;overflow:hidden}
.ns-img{width:70px;height:70px;border-radius:10px;background:var(--s3);flex-shrink:0;animation:shimmer 1.5s infinite}
.ns-body{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.ns-line{height:10px;border-radius:5px;background:var(--s3);animation:shimmer 1.5s infinite}
.ns-line.l1{width:92%}.ns-line.l2{width:72%}.ns-line.l3{width:48%}
@keyframes shimmer{0%,100%{opacity:.35}50%{opacity:.85}}
.news-empty{padding:32px 20px;text-align:center;font-size:13px;color:var(--t3)}
/* ─── BOUTON RÉSUMÉ YOUTUBE ──────────────────────── */
.yt-resume-wrap{
  padding:10px 14px 6px;
}
.yt-resume-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:10px 16px;
  background:rgba(255,0,0,.08);
  border:1px solid rgba(255,60,60,.22);
  border-radius:10px;
  color:#ff4444;
  font-family:'Barlow',sans-serif;
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:background .15s,transform .15s var(--spring);
  letter-spacing:.2px;
}
.yt-resume-btn svg{opacity:.85;flex-shrink:0;}
.yt-resume-btn:active{background:rgba(255,0,0,.14);transform:scale(.97);}

/* ─── FOOTER DE PAGE ─────────────────────────────── */
.page-footer{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:28px 20px 60px;
  margin-top:8px;
  border-top:1px solid var(--line);
}
.pf-logo{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:900;letter-spacing:3px;
  color:var(--t3);opacity:.5;
}
.pf-links{
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:var(--t3);
}
.pf-links span{cursor:pointer;transition:color .15s;}
.pf-links span:hover{color:var(--t2);}
.pf-copy{
  font-size:10px;color:var(--t3);opacity:.5;
  text-align:center;letter-spacing:.3px;
}

/* ─── BOUTON RÉSUMÉ YOUTUBE ──────────────────────── */
.yt-resume-wrap{padding:10px 14px 6px}
.yt-resume-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 16px;background:rgba(255,0,0,.08);border:1px solid rgba(255,60,60,.22);border-radius:10px;color:#ff4444;font-family:'Barlow',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,transform .15s var(--spring)}
.yt-resume-btn svg{opacity:.85;flex-shrink:0}
.yt-resume-btn:active{background:rgba(255,0,0,.14);transform:scale(.97)}

/* ─── FOOTER DE PAGE ─────────────────────────────── */
.page-footer{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px 60px;margin-top:8px;border-top:1px solid var(--line)}
.pf-logo{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:900;letter-spacing:3px;color:var(--t3);opacity:.5}
.pf-links{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--t3)}
.pf-links span{cursor:pointer;transition:color .15s}
.pf-links span:hover{color:var(--t2)}
/* La page histoire, discrète : même discrétion que CGU, mais c'est un
   vrai lien vers une vraie page — elle a son propre monde graphique. */
.pf-histoire{color:inherit;text-decoration:none;transition:color .15s}
.pf-histoire:hover{color:var(--acc)}
.pf-copy{font-size:10px;color:var(--t3);opacity:.5;text-align:center;letter-spacing:.3px}

/* ═══════════════════════════════════════════════════
   PAGES LÉGALES
═══════════════════════════════════════════════════ */
.legal-ov{position:fixed;inset:0;z-index:300;background:var(--bg);display:none;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
.legal-ov.open{display:flex}
.legal-head{flex-shrink:0;background:var(--s1);border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 12px}
.legal-back-btn{width:34px;height:34px;border-radius:9px;background:var(--s3);border:1px solid var(--line2);color:var(--t1);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s var(--spring);cursor:pointer}
.legal-back-btn:active{transform:scale(.88)}
.legal-head-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--t1);flex:1}
.legal-body,.legal-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 40px)}
.legal-body::-webkit-scrollbar,.legal-scroll::-webkit-scrollbar{display:none}
.legal-hero{padding:28px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;border-bottom:1px solid var(--line)}
.legal-hero-icon{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,var(--s3),var(--s4));border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--acc)}
.legal-hero-title{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:var(--t1)}
.legal-hero-date{font-size:11px;color:var(--t3);font-weight:500}
.legal-section{padding:20px 16px 0}
.legal-section-title{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;color:var(--acc);margin-bottom:10px}
.legal-card{background:var(--s1);border-radius:14px;border:1px solid var(--line);overflow:hidden;margin-bottom:16px}
.legal-card-row{padding:14px 16px;border-bottom:1px solid var(--line)}
.legal-card-row:last-child{border-bottom:none}
.legal-card-row-title{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:5px;display:flex;align-items:center;gap:7px}
.legal-card-row-body{font-size:12.5px;color:var(--t2);line-height:1.7}
.legal-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.legal-list-item{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--t2);line-height:1.6}
.legal-list-dot{width:5px;height:5px;border-radius:50%;background:var(--acc);flex-shrink:0;margin-top:7px}
.legal-highlight{background:rgba(var(--acc-rgb),.05);border:1px solid rgba(var(--acc-rgb),.18);border-radius:12px;padding:14px 16px;margin:0 16px 16px;display:flex;gap:10px}
.legal-highlight-icon{flex-shrink:0;color:var(--acc);margin-top:1px}
.legal-highlight-text{font-size:12px;color:var(--t2);line-height:1.65}
.legal-highlight-text strong{color:var(--t1);font-weight:700}
.legal-footer{margin:8px 16px 0;padding:20px 16px;background:var(--s1);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.legal-footer-logo{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;letter-spacing:3px;color:var(--t3)}
.legal-footer-copy{font-size:11px;color:var(--t3);line-height:1.5}
.legal-footer-contact{font-size:11px;color:var(--acc);margin-top:2px;font-weight:600}
/* ═══════════════════════════════════════════════════
   FLOU CARTE GOOGLE — Bientôt disponible
═══════════════════════════════════════════════════ */
.acc-card-soon-wrap{position:relative;border-radius:16px;overflow:hidden}
.acc-card-blurred{filter:blur(4px);pointer-events:none;user-select:none;opacity:.55}
.acc-card-soon-badge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(6,6,8,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:16px;padding:20px;text-align:center;pointer-events:none}
.acc-soon-icon{font-size:30px;line-height:1}
.acc-soon-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--t1)}
.acc-soon-sub{font-size:12px;color:var(--t3);line-height:1.5;max-width:200px}

/* ═══════════════════════════════════════════════════
   ADMIN — Stats row + éléments manquants
═══════════════════════════════════════════════════ */
.adm-stats-row{display:flex;margin:0 14px 12px;background:var(--s1);border-radius:14px;border:1px solid var(--line2);overflow:hidden}
.adm-stat-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;border-right:1px solid var(--line)}
.adm-stat-item:last-child{border-right:none}
.adm-stat-val{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;color:var(--t1);line-height:1}
.adm-stat-lbl{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.adm-form-actions{display:flex;gap:8px}

/* ═══════════════════════════════════════════════════
   PUBLICITÉ — Emplacements AdSense
═══════════════════════════════════════════════════ */
.ad-slot{margin:0 14px 8px;padding:6px 10px 8px;border-radius:12px;background:var(--s1);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px;min-height:68px}
.ad-label{font-size:8px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);opacity:.45;align-self:flex-start}
.ad-slot ins{width:100%;flex:1}

/* ═══════════════════════════════════════════════════
   LECTEUR — Source switcher + redesign panel
═══════════════════════════════════════════════════ */
/* ─── La feuille des sources ────────────────────────────────────────
   Elle remonte du bas par-dessus tout le lecteur, y compris en plein
   écran. Les sources y sont rangées par langue : avec deux douzaines
   de diffuseurs, un ruban horizontal obligeait à défiler à l'aveugle
   pour trouver le français. */
.vp-sheet{position:absolute;inset:0;z-index:60;display:none}
.vp-sheet.open{display:block}
.vp-sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:vpShBg .18s ease both}
.vp-sheet-card{position:absolute;left:0;right:0;bottom:0;max-height:min(72%,540px);
  background:var(--s1);border-top:1px solid var(--line2);border-radius:18px 18px 0 0;
  display:flex;flex-direction:column;box-shadow:0 -12px 40px rgba(0,0,0,.6);
  padding-bottom:env(safe-area-inset-bottom);animation:vpShUp .26s var(--ease) both}
@keyframes vpShBg{from{opacity:0}to{opacity:1}}
@keyframes vpShUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.vp-sheet-grab{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin:8px auto 2px;flex-shrink:0}
.vp-sheet-head{display:flex;align-items:baseline;gap:9px;padding:6px 14px 10px;
  border-bottom:1px solid var(--line);flex-shrink:0}
.vp-sheet-title{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:900;
  text-transform:uppercase;letter-spacing:1px}
.vp-sheet-sub{font-size:11.5px;color:var(--t2);flex:1}
.vp-sheet-x{width:28px;height:28px;border-radius:50%;border:none;background:var(--s3);
  color:var(--t2);display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center}
.vp-sheet-x:active{transform:scale(.88)}
.vp-sheet-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 8px 16px}

.vp-lang-head{display:flex;align-items:center;gap:7px;padding:13px 8px 5px;
  font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--t2)}
.vp-lang-head i{font-style:normal;font-size:14px;line-height:1}
.vp-lang-n{margin-left:auto;letter-spacing:0;color:var(--t3);font-weight:700}

.vp-srow{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:12px;
  border:1px solid transparent;background:none;color:var(--t1);text-align:left;
  font-family:'Barlow',sans-serif;transition:background .13s,border-color .13s}
.vp-srow:active{transform:scale(.985)}
.vp-srow:hover{background:rgba(255,255,255,.05)}
.vp-srow.on{background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.35)}
.vp-srow.locked{opacity:.6}
.vp-srow-num{width:27px;height:27px;border-radius:9px;background:var(--s3);display:flex;
  align-items:center;justify-content:center;font-size:11.5px;font-weight:900;flex-shrink:0;color:var(--t2)}
.vp-srow.on .vp-srow-num{background:var(--acc);color:var(--bg-on-acc)}
.vp-srow.vip .vp-srow-num{background:rgba(232,165,39,.2);color:#e8a527}
/* Une seule ligne par source : vingt-quatre lignes sur deux niveaux
   feraient un écran et demi de défilement. C'est le nom qui se coupe si
   la place manque, pas le numéro du diffuseur. */
.vp-srow-txt{flex:1;min-width:0;display:flex;align-items:baseline;gap:7px}
.vp-srow-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.vp-srow-meta{font-size:10.5px;color:var(--t2);white-space:nowrap;flex-shrink:0}
.vp-srow-tag{font-size:9px;font-weight:900;letter-spacing:.5px;border-radius:7px;padding:3px 6px;
  flex-shrink:0;background:var(--s3);color:var(--t2)}
.vp-srow-tag.vip{background:rgba(232,165,39,.22);color:#e8a527}
.vp-srow-tag.now{background:rgba(var(--acc-rgb),.18);color:var(--acc)}

/* ─── Le pied de la feuille : le mode brut ─────────────────────────── */
.vp-sheet-pied{border-top:1px solid var(--line);padding:10px;flex-shrink:0}
.vp-brut{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;
  border-radius:12px;border:1px solid var(--line2);background:var(--s2);
  color:var(--t1);text-align:left;font-family:'Barlow',sans-serif}
.vp-brut:active{transform:scale(.99)}
.vp-brut-txt{flex:1;min-width:0}
.vp-brut-txt b{display:block;font-size:13px;font-weight:700}
.vp-brut-txt i{display:block;font-style:normal;font-size:11px;color:var(--t2);
  margin-top:2px;line-height:1.45}
.vp-brut-inter{flex-shrink:0;width:42px;height:24px;border-radius:12px;background:var(--s4);
  position:relative;transition:background .18s}
.vp-brut-inter::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:var(--t2);transition:transform .18s var(--spring),background .18s}
.vp-brut.on{border-color:rgba(255,59,59,.4);background:rgba(255,59,59,.07)}
.vp-brut.on .vp-brut-inter{background:rgba(255,59,59,.3)}
.vp-brut.on .vp-brut-inter::after{transform:translateX(18px);background:var(--red)}

/* ═══════════════════════════════════════════════════════════════
   LE CONSEIL « BLOQUEUR »
   ═══════════════════════════════════════════════════════════════
   Constat à l'usage : avec un bloqueur actif, les lecteurs des
   diffuseurs répondent parfaitement ; sans, leur calque de pub se pose
   par-dessus leur propre lecteur et plus rien n'est cliquable. On ne
   peut pas filtrer à leur place — aucun navigateur ne permet de
   contrôler ce que charge une page d'un autre domaine. On explique
   donc, et seulement à ceux qui n'ont rien. */
.conseil{margin:0 16px 14px;border:1px solid rgba(255,59,59,.38);border-radius:14px;
  padding:13px 14px;background:rgba(255,59,59,.07);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:conseilEntre .4s var(--ease) both}
@keyframes conseilEntre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.conseil-t{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.conseil-ico{color:var(--red);font-size:14px;line-height:1;flex-shrink:0}
.conseil-t b{font-size:13.5px;font-weight:800;color:#ffc9c9;letter-spacing:-.01em}
.conseil p{font-size:12.5px;line-height:1.6;color:var(--t2);margin:0 0 11px}
.conseil p b{color:var(--t1);font-weight:700}
.conseil-bt{display:flex;gap:8px;flex-wrap:wrap}
.conseil-a,.conseil-b{border-radius:9px;padding:9px 14px;font-size:12px;font-weight:800;
  font-family:'Barlow',sans-serif;border:1px solid transparent;
  transition:transform .15s var(--spring)}
.conseil-a:active,.conseil-b:active{transform:scale(.95)}
.conseil-a{background:var(--acc);color:var(--bg-on-acc)}
.conseil-b{background:none;border-color:var(--line2);color:var(--t2)}

/* ─── La feuille « comment bloquer » ─────────────────────────────── */
.aide-intro{font-size:13px;line-height:1.6;color:var(--t2);padding:12px 8px 4px}
.aide-bloc{display:flex;gap:12px;padding:16px 8px;border-top:1px solid var(--line)}
.aide-num{width:26px;height:26px;border-radius:50%;background:var(--acc);
  color:var(--bg-on-acc);font-size:13px;font-weight:900;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;font-family:'Barlow Condensed',sans-serif}
.aide-corps{flex:1;min-width:0}
.aide-corps b{display:block;font-size:14.5px;font-weight:800;margin-bottom:5px;
  letter-spacing:-.01em}
.aide-tag{display:inline-block;font-size:8.5px;font-weight:900;letter-spacing:.7px;
  text-transform:uppercase;background:rgba(34,212,106,.18);color:var(--green);
  border-radius:6px;padding:2px 6px;margin-left:5px;vertical-align:1px}
.aide-corps p{font-size:13px;line-height:1.62;color:var(--t2);margin:0 0 9px}
.aide-pas{margin:0 0 10px;padding-left:18px;font-size:12.5px;line-height:1.75;color:var(--t2)}
.aide-pas b{display:inline;font-size:inherit;color:var(--t1);font-weight:700;margin:0}
.aide-copie{display:flex;align-items:center;gap:8px;background:var(--b1);
  border:1px solid var(--line2);border-radius:10px;padding:8px 8px 8px 11px;margin-bottom:9px}
.aide-copie code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--acc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aide-cp{flex-shrink:0;background:var(--s3);border:1px solid var(--line2);border-radius:8px;
  color:var(--t1);font-size:11px;font-weight:800;padding:7px 11px;font-family:'Barlow',sans-serif;
  transition:background .15s,transform .15s var(--spring)}
.aide-cp:active{transform:scale(.93)}
.aide-cp.fait{background:var(--green);border-color:var(--green);color:#04210f}
.aide-note{font-size:11.5px!important;color:var(--t3)!important}
.aide-lien{display:inline-block;font-size:12px;font-weight:800;color:var(--acc);
  text-decoration:none;border:1px solid rgba(var(--acc-rgb),.35);border-radius:9px;
  padding:8px 13px;transition:background .15s}
.aide-lien:active{background:rgba(var(--acc-rgb),.12)}
.aide-pied{font-size:11.5px;line-height:1.65;color:var(--t3);padding:16px 8px 4px;
  border-top:1px solid var(--line)}

/* Panel match redesign */
.vp-panel-match{flex:1;min-width:0}

/* Admin — badge numéro sur ch-btn */
.adm-ch-btn{position:relative}
.adm-ch-badge{position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;background:var(--acc);color:#08080e;font-size:9px;font-weight:900;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;line-height:1}

/* Admin — status sources sélectionnées */
.adm-src-status{padding:8px 2px 4px;display:flex;flex-direction:column;gap:6px}
.adm-src-count{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.3px}
.adm-src-pills{display:flex;flex-wrap:wrap;gap:5px}
.adm-src-pill{font-size:10px;font-weight:600;color:var(--t1);background:rgba(var(--acc-rgb),.1);border:1px solid rgba(var(--acc-rgb),.2);padding:3px 9px;border-radius:20px;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}

/* Admin — stats row fix */
.adm-stats-row{display:flex;margin:0 14px 0;background:var(--s1);border-radius:14px;border:1px solid var(--line2);overflow:hidden}
.adm-stat-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;border-right:1px solid var(--line)}
.adm-stat-item:last-child{border-right:none}
.adm-stat-val{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:900;color:var(--t1);line-height:1}
.adm-stat-lbl{font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.adm-form-actions{display:flex;gap:8px}

/* Programme — pub espacée */
.ad-slot{margin:12px 14px;padding:6px 10px 8px;border-radius:12px;background:var(--s1);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px;min-height:68px}
.ad-label{font-size:8px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);opacity:.45;align-self:flex-start}
.ad-slot ins{width:100%;flex:1}

/* Flou carte Google */
.acc-card-soon-wrap{position:relative;border-radius:16px;overflow:hidden}
.acc-card-blurred{filter:blur(4px);pointer-events:none;user-select:none;opacity:.55}
.acc-card-soon-badge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(6,6,8,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:16px;padding:20px;text-align:center;pointer-events:none}
.acc-soon-icon{font-size:30px;line-height:1}
.acc-soon-title{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--t1)}
.acc-soon-sub{font-size:12px;color:var(--t3);line-height:1.5;max-width:200px}

/* ═══════════════════════════════════════════════════
   ADMIN — Test sources + status dots
═══════════════════════════════════════════════════ */
/* Status dot sur le badge assigné */
.adm-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:background .3s}
.adm-status-dot:not(.ok):not(.fail):not(.partial):not(.checking){background:var(--t3)}
.adm-status-dot.checking{background:var(--t3);animation:pulse-dot 1s infinite}
.adm-status-dot.ok{background:var(--green);box-shadow:0 0 6px rgba(34,212,106,.5)}
.adm-status-dot.fail{background:var(--red);box-shadow:0 0 6px rgba(255,59,59,.4)}
.adm-status-dot.partial{background:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,.4)}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}

/* Bouton tester */
.adm-src-status-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.adm-check-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;border:1px solid var(--line2);background:var(--s3);color:var(--t2);font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.adm-check-btn:active{transform:scale(.93);background:var(--s4)}

/* Pills de sources avec statut */
.adm-src-pill{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--t1);background:rgba(var(--acc-rgb),.08);border:1px solid rgba(var(--acc-rgb),.2);padding:3px 9px;border-radius:20px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;transition:all .2s}
.adm-src-pill.ok{background:rgba(34,212,106,.1);border-color:rgba(34,212,106,.3);color:var(--green)}
.adm-src-pill.fail{background:rgba(255,59,59,.08);border-color:rgba(255,59,59,.25);color:var(--red)}
.adm-src-pill.checking{opacity:.6}
.pill-status{font-weight:900;flex-shrink:0}

/* ── Card admin — teinte statut source ── */
.adm-match[data-status="checking"]{
  border-color:rgba(255,255,255,.12);
  animation:card-pulse .9s ease-in-out infinite;
}
@keyframes card-pulse{0%,100%{opacity:1}50%{opacity:.7}}

.adm-match[data-status="ok"]{
  border-color:rgba(34,212,106,.45);
  background:linear-gradient(135deg,rgba(34,212,106,.07) 0%,var(--s1) 60%);
  box-shadow:0 0 0 1px rgba(34,212,106,.15);
}
.adm-match[data-status="fail"]{
  border-color:rgba(255,59,59,.45);
  background:linear-gradient(135deg,rgba(255,59,59,.08) 0%,var(--s1) 60%);
  box-shadow:0 0 0 1px rgba(255,59,59,.15);
}
.adm-match[data-status="partial"]{
  border-color:rgba(245,158,11,.45);
  background:linear-gradient(135deg,rgba(245,158,11,.07) 0%,var(--s1) 60%);
  box-shadow:0 0 0 1px rgba(245,158,11,.15);
}

/* ── Boutons de chaînes — teinte statut test ── */
.adm-ch-btn[data-src-status="checking"]{
  opacity:.55;
}
.adm-ch-btn[data-src-status="ok"]{
  border-color:rgba(34,212,106,.6)!important;
  background:rgba(34,212,106,.12)!important;
  box-shadow:0 0 0 1px rgba(34,212,106,.3)!important;
}
.adm-ch-btn[data-src-status="ok"] .adm-ch-short{
  color:#22c55e!important;
}
.adm-ch-btn[data-src-status="fail"]{
  border-color:rgba(255,59,59,.5)!important;
  background:rgba(255,59,59,.1)!important;
  box-shadow:0 0 0 1px rgba(255,59,59,.25)!important;
  opacity:.75;
}
.adm-ch-btn[data-src-status="fail"] .adm-ch-short{
  color:var(--red)!important;
}

/* ═══════════════════════════════════════════════════
   TV DIRECT
═══════════════════════════════════════════════════ */

/* ── Section TV dans Live ── */
.tv-section{ margin:6px 0 4px }
.tv-section-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 8px
}
.tv-section-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--t3); display:flex; align-items:center; gap:6px
}

/* ── Pills groupes scrollables ── */
.tv-groups-row{
  display:flex; gap:8px; overflow-x:auto;
  padding:0 14px 14px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch
}
.tv-groups-row::-webkit-scrollbar{ display:none }

/* Carte fine horizontale style streaming */
.tv-group-pill{
  flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px 10px 10px;
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:50px;
  cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .16s var(--spring), background .12s;
  /* ombre légère pour montrer que c'est clicable */
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  white-space:nowrap;
  min-width:0;
}
/* accent couleur sur le bord gauche */
.tv-group-pill::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom, var(--gcolor), transparent);
  border-radius:50px 0 0 50px;
}
/* léger fond coloré */
.tv-group-pill::after{
  content:''; position:absolute; inset:0;
  background:var(--gcolor); opacity:.05; pointer-events:none;
  border-radius:50px;
}
.tv-group-pill:active{
  transform:scale(.93);
  background:var(--s2);
}

.tv-pill-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gcolor); flex-shrink:0;
  box-shadow:0 0 6px var(--gcolor);
  animation:blink 1.8s infinite;
}
.tv-pill-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.3px;
  color:var(--t1);
}
.tv-pill-count{
  font-size:10px; font-weight:700;
  color:var(--gcolor);
  background:transparent;
  border:1px solid var(--gcolor);
  opacity:.7;
  padding:1px 7px; border-radius:20px;
  flex-shrink:0;
}

/* ── Overlay page groupe TV ── */
.tv-group-ov{
  position:fixed; inset:0; z-index:210;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.22,1,.36,1);
  background:var(--bg);
  --gcolor:var(--acc);
  --ggrad:135deg,#222,#444;
}
.tv-group-ov.open{ transform:translateX(0) }

/* ── Le bandeau compact ────────────────────────────────────────────
   Il n'apparaît qu'une fois la bannière escamotée. Sans lui, le seul
   bouton de retour partait avec elle et on se retrouvait coincé. */
.tvg-bar{
  position:absolute; top:0; left:0; right:0; z-index:6;
  display:flex; align-items:center; gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 9px) 16px 11px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.tvg-bar.on{ opacity:1; pointer-events:auto; transform:none }
.tvg-bar-retour{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  background:var(--s2); border:1px solid var(--line2); color:var(--t1);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .15s var(--spring);
}
.tvg-bar-retour:active{ transform:scale(.86) }
.tvg-bar-nom{
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px; font-weight:900; text-transform:uppercase; letter-spacing:.6px;
  color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Le corps, seul élément qui défile ──────────────────────────── */
.tv-group-body{
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.tv-group-body::-webkit-scrollbar{ display:none }

/* ── La bannière ───────────────────────────────────────────────────
   Elle défile AVEC la grille, mais plus lentement (--para) et en
   s'effaçant. Avant, un bloc de couleur pleine, coupé net : c'est ce
   à-plat qui faisait « page de test ». */
.tvg-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:calc(env(safe-area-inset-top,0px) + 76px) 22px 34px;
}
.tvg-lavis{
  position:absolute; left:0; right:0; top:-30%; bottom:-10%;
  z-index:-3; opacity:.92;
  transform:translate3d(0,var(--para,0px),0);
  will-change:transform;
}
/* Deux halos qui respirent, décalés : ils donnent de la profondeur au
   dégradé, qui sinon reste un simple aplat. */
.tvg-bulle{
  position:absolute; z-index:-2; border-radius:50%;
  filter:blur(46px); pointer-events:none; opacity:.55;
  transform:translate3d(0,var(--para,0px),0);
}
.tvg-bulle-a{
  width:62vw; height:62vw; max-width:300px; max-height:300px;
  top:-18%; right:-14%;
  background:radial-gradient(circle,rgba(255,255,255,.45),transparent 66%);
  animation:tvgRespire 11s ease-in-out infinite;
}
.tvg-bulle-b{
  width:70vw; height:70vw; max-width:340px; max-height:340px;
  bottom:-34%; left:-22%;
  background:radial-gradient(circle,rgba(0,0,0,.42),transparent 68%);
  animation:tvgRespire 15s ease-in-out infinite reverse;
}
@keyframes tvgRespire{
  0%,100%{ transform:translate3d(0,var(--para,0px),0) scale(1) }
  50%    { transform:translate3d(0,calc(var(--para,0px) + 14px),0) scale(1.12) }
}
/* Le fondu vers le fond : la bannière se termine sur la page au lieu
   de s'arrêter sur une ligne droite. */
.tvg-voile{
  position:absolute; left:0; right:0; bottom:0; height:82px; z-index:-1;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}
.tvg-retour{
  position:absolute; z-index:2;
  top:calc(env(safe-area-inset-top,0px) + 14px); left:16px;
  width:38px; height:38px; border-radius:12px;
  background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s, transform .15s var(--spring);
}
.tvg-retour:active{ transform:scale(.86); background:rgba(0,0,0,.45) }
.tvg-hero-in{ position:relative; z-index:1; will-change:opacity,transform }
.tvg-sur{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:800; letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-bottom:7px;
}
.tvg-titre{
  margin:0; font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(34px,10.5vw,50px); font-weight:900;
  text-transform:uppercase; letter-spacing:-.5px; line-height:.92;
  color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.tvg-meta{
  display:flex; align-items:center; gap:7px; margin-top:10px;
  font-size:11.5px; font-weight:600; color:rgba(255,255,255,.8);
}
.tvg-pt{
  width:6px; height:6px; border-radius:50%; background:#fff; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,255,255,.55);
  animation:tvgOnde 2s ease-out infinite;
}
@keyframes tvgOnde{ to{ box-shadow:0 0 0 9px rgba(255,255,255,0) } }

/* ── La grille de chaînes ──────────────────────────────────────────
   Deux colonnes de cartes plutôt qu'une liste de lignes : les noms se
   ressemblent tous (« beIN Sports 1, 2, 3 »), c'est le format carte —
   et le code court en filigrane — qui les rend distinguables d'un
   coup d'œil. */
.tvg-grille{
  display:grid; grid-template-columns:repeat(2,1fr); gap:11px;
  padding:4px 14px calc(env(safe-area-inset-bottom,0px) + 90px);
}
@media (min-width:620px){
  .tvg-grille{ grid-template-columns:repeat(3,1fr); gap:13px; padding-left:20px; padding-right:20px }
}
@media (min-width:920px){
  .tvg-grille{ grid-template-columns:repeat(4,1fr); max-width:1080px; margin:0 auto }
}

.tvg-carte{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:0;
  min-height:132px; padding:13px 14px 12px;
  text-align:left; cursor:pointer;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--gcolor) 30%, var(--line2));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--gcolor) 19%, transparent), transparent 64%),
    var(--s1);
  animation:tvgEntre .48s cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--delai,0ms);
  transition:transform .18s var(--spring), border-color .2s, box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.tvg-carte::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(90% 70% at 50% 110%, color-mix(in srgb, var(--gcolor) 45%, transparent), transparent 70%);
  transition:opacity .25s;
}
.tvg-carte:active{
  transform:scale(.955);
  border-color:color-mix(in srgb, var(--gcolor) 68%, transparent);
  box-shadow:0 8px 26px -10px color-mix(in srgb, var(--gcolor) 70%, transparent);
}
.tvg-carte:active::after{ opacity:1 }
@media (hover:hover){
  .tvg-carte:hover{ border-color:color-mix(in srgb, var(--gcolor) 55%, transparent) }
  .tvg-carte:hover::after{ opacity:.55 }
}
@keyframes tvgEntre{
  from{ opacity:0; transform:translateY(16px) scale(.97) }
  to  { opacity:1; transform:none }
}

/* Le code court, énorme et à peine visible : c'est la signature de la
   carte, ce qui fait qu'on repère « M4 » sans lire. */
.tvg-filigrane{
  position:absolute; z-index:-1; right:-4px; bottom:-18px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:74px; font-weight:900; line-height:.8; letter-spacing:-3px;
  color:var(--gcolor); opacity:.1;
  pointer-events:none; user-select:none;
  /* Il s'efface vers le haut : sans ce fondu il passait derrière le nom
     de la chaîne et les deux se disputaient la lecture. */
  -webkit-mask-image:linear-gradient(to top, #000 28%, transparent 92%);
  mask-image:linear-gradient(to top, #000 28%, transparent 92%);
}
.tvg-haut{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.tvg-code{
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px; font-weight:900; letter-spacing:.8px; text-transform:uppercase;
  color:var(--gcolor);
  background:color-mix(in srgb, var(--gcolor) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--gcolor) 34%, transparent);
  border-radius:7px; padding:3px 7px; line-height:1;
}
.tvg-direct{
  display:flex; align-items:center; gap:4px;
  font-size:8.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  color:var(--t3);
}
.tvg-direct i{
  width:5px; height:5px; border-radius:50%; background:var(--red);
  animation:blink 1.4s infinite; flex-shrink:0;
}
.tvg-nom{
  margin-top:auto; padding-top:14px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px; font-weight:900; text-transform:uppercase;
  letter-spacing:.2px; line-height:1.05; color:var(--t1);
}
.tvg-pied{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:9px;
}
.tvg-sources{ font-size:10px; font-weight:600; color:var(--t3) }
.tvg-lire{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--gcolor) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--gcolor) 40%, transparent);
  color:var(--gcolor);
  transition:background .18s, color .18s, transform .18s var(--spring);
}
.tvg-carte:active .tvg-lire{ background:var(--gcolor); color:#fff; transform:scale(1.1) }

.tvg-vide{
  grid-column:1/-1; text-align:center;
  padding:46px 24px; border-radius:18px;
  border:1px dashed var(--line2); background:var(--s1);
}
.tvg-vide-t{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:.5px;
  color:var(--t2);
}
.tvg-vide p{ margin:8px 0 0; font-size:12.5px; color:var(--t3); line-height:1.6 }

/* Sur un appareil qui demande moins de mouvement, on garde la mise en
   page et on retire tout ce qui bouge. */
@media (prefers-reduced-motion:reduce){
  .tvg-carte{ animation:none }
  .tvg-bulle{ animation:none }
  .tvg-pt{ animation:none }
  .tvg-direct i{ animation:none }
}

/* ── Admin tabs ── */
.adm-tabs{
  display:flex; background:var(--s2); border-bottom:1px solid var(--line2);
}
.adm-tab{
  flex:1; padding:11px 8px;
  font-family:'Barlow',sans-serif; font-size:12px; font-weight:600;
  color:var(--t3); background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent; transition:color .15s;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.adm-tab.active{ color:var(--acc); border-bottom-color:var(--acc) }

/* ── Admin TV rows ── */
.tvadm-group-header{
  display:flex; align-items:center; gap:8px; padding:12px 14px 6px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--t3);
}
.tvadm-group-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
}

/* ═══════════════════════════════════════════════════
   FULLSCREEN CSS
   • Modal = tout l'écran, fond noir
   • Vidéo = 16:9 centré, barres noires autour
═══════════════════════════════════════════════════ */

/* Modal : plein écran, fond noir, centré */
.vp-ov.vp-fullscreen {
  z-index: 500;
  background: #000;
  justify-content: center;
  align-items: center;
}

/* Stage : 16:9 centré — ne prend pas tout l'écran */
.vp-ov.vp-fullscreen .vp-stage {
  flex: none;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

/* Vidéo : barres noires si pas 16:9 */
.vp-ov.vp-fullscreen .vp-stage video {
  object-fit: contain;
  background: #000;
}

/* Cache le panneau info */
.vp-ov.vp-fullscreen .vp-panel {
  display: none !important;
}

/* ── Plein écran d'une page externe : TOUT l'écran ────────────────────
   Le 16:9 centré est bon pour une vidéo : les barres noires valent mieux
   qu'une image déformée. Pour une page de diffuseur, c'est l'inverse.
   Mesuré : dans la scène normale, leur page ne reçoit que 412×232 px.
   Leur lecteur, leur barre de son et le × de leurs pubs sont dessinés
   pour un écran, pas pour une bande de 232 px — à cette taille les
   boutons deviennent minuscules, voire sortent du cadre. On leur donne
   donc la hauteur entière : environ trois fois et demie plus de surface,
   et leurs commandes redeviennent visables du doigt.
   La barre reste une vraie bande au-dessus, jamais posée sur l'image :
   c'est précisément ce qui mettait notre × sur le leur. */
.vp-ov.vp-fullscreen.vp-embed{justify-content:flex-start;align-items:stretch}
.vp-ov.vp-fullscreen.vp-embed .vp-stage{
  flex:1 1 auto;width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:auto}
.vp-ov.vp-fullscreen.vp-embed .vp-topbar{padding-top:calc(7px + env(safe-area-inset-top))}


/* ════════════════════════════════════════════════
   GATE PUB
════════════════════════════════════════════════ */



/* Handle */



/* Info rows */

/* Warning */

/* Bouton principal */

/* Annuler */

/* ── Card Telegram dashboard ── */
.dash-telegram-card{
  display:flex; align-items:center; gap:12px;
  margin:0 14px 14px;
  padding:13px 14px;
  background:linear-gradient(135deg,#1a8fd1 0%,#0088cc 100%);
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s var(--spring), filter .15s;
  box-shadow:0 4px 16px rgba(0,136,204,.3);
}
.dash-telegram-card:active{ transform:scale(.97); filter:brightness(.95) }

.dash-tg-icon{
  width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.dash-tg-text{ flex:1; min-width:0 }
.dash-tg-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:#fff; line-height:1;
}
.dash-tg-sub{
  font-size:11px; color:rgba(255,255,255,.75);
  margin-top:3px; font-weight:500;
}
.dash-tg-arrow{ color:rgba(255,255,255,.6); flex-shrink:0 }

/* ── Card Soutenir dashboard ── */
.dash-support-card{
  display:flex; align-items:center; gap:12px;
  margin:-4px 14px 14px;
  padding:13px 14px;
  background:linear-gradient(135deg,#ff1744 0%,#d50000 100%);
  border-radius:14px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s var(--spring), filter .15s;
  box-shadow:0 4px 16px rgba(255,23,68,.35);
}
.dash-support-card:active{ transform:scale(.97); filter:brightness(.95) }

.dash-sup-icon{
  width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.dash-sup-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:#fff; line-height:1;
}

/* ── Admin Panel Card (dashboard) ── */
.dash-admin-card{
  display:flex; align-items:center; gap:12px;
  margin:-4px 14px 14px;
  padding:13px 14px;
  background:linear-gradient(135deg,rgba(60,60,80,.85) 0%,rgba(30,30,50,.95) 100%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  cursor:pointer;
  transition:transform .15s var(--spring), filter .15s;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.dash-admin-card:active{ transform:scale(.97); filter:brightness(.95) }
.dash-admin-card-icon{
  width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--acc);
}
.dash-admin-card-text{ flex:1; min-width:0 }
.dash-admin-card-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px; font-weight:800; text-transform:uppercase;
  letter-spacing:.3px; color:var(--t1); line-height:1;
}
.dash-admin-card-sub{
  font-size:12px; color:var(--t2); margin-top:3px; line-height:1.4;
}
/* ── Badge LIVE + barre pulsante lecteur ── */
.vp-live-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;font-weight:900;letter-spacing:1.5px;
  color:var(--acc);padding:2px 7px;border-radius:20px;
  border:1px solid rgba(232,255,71,.35);
  background:rgba(232,255,71,.07);white-space:nowrap;
}
.vp-live-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--acc);flex-shrink:0;
  animation:live-dot-beat 2s ease-in-out infinite;
}
@keyframes live-dot-beat{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.55);opacity:.4}
}
.vp-prog.is-live .vp-track-fill{
  background:var(--acc);
  animation:live-bar-beat 2s ease-in-out infinite;
}
@keyframes live-bar-beat{
  0%,100%{opacity:1;box-shadow:0 0 0px rgba(232,255,71,0)}
  50%{opacity:.55;box-shadow:0 0 6px rgba(232,255,71,.5)}
}

/* ── Manifesto card dashboard ── */
.dash-manifesto-card{
  margin:20px 14px 16px;
  padding:20px 18px 18px;
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
.dash-manifesto-bg-glow{
  position:absolute;top:-30px;right:-30px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,255,71,.1) 0%,transparent 70%);
  pointer-events:none;
}
.dash-manifesto-header{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
.dash-manifesto-emoji{
  width:46px;height:46px;border-radius:13px;
  background:rgba(232,255,71,.1);border:1px solid rgba(232,255,71,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.dash-manifesto-label{
  font-size:10px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--acc);margin-bottom:3px;
}
.dash-manifesto-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:900;text-transform:uppercase;
  letter-spacing:.3px;color:var(--t1);line-height:1.1;
}
.dash-manifesto-divider{
  height:1px;background:var(--line2);margin-bottom:14px;
}
.dash-manifesto-text{
  font-size:13px;color:var(--t2);line-height:1.65;
  margin-bottom:16px;
}
.dash-manifesto-text strong{color:var(--t1);font-weight:700}

.dash-manifesto-tags{
  display:flex;flex-wrap:wrap;gap:7px;
}
.dash-manifesto-tag{
  font-size:11px;font-weight:700;
  color:var(--acc);
  background:rgba(232,255,71,.08);
  border:1px solid rgba(232,255,71,.2);
  padding:4px 10px;border-radius:20px;
}

/* ── Card pub explication ── */
.dash-ads-card{
  margin:0 14px 16px;
  padding:20px 18px 18px;
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
.dash-ads-card::before{
  content:''; position:absolute; top:-30px; right:-30px;
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle,rgba(59,139,255,.1) 0%,transparent 70%);
  pointer-events:none;
}
.dash-ads-header{
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.dash-ads-emoji{
  width:46px; height:46px; border-radius:13px;
  background:rgba(59,139,255,.1); border:1px solid rgba(59,139,255,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.dash-ads-label{
  font-size:10px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:#3b8bff; margin-bottom:3px;
}
.dash-ads-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px; font-weight:900; text-transform:uppercase;
  letter-spacing:.3px; color:var(--t1); line-height:1.1;
}

/* Bloc premium */
.dash-ads-premium-row{
  display:flex; align-items:center; gap:12px;
  margin-top:14px; padding:12px 14px;
  background:linear-gradient(135deg,rgba(232,255,71,.06),rgba(232,255,71,.02));
  border:1px solid rgba(232,255,71,.18);
  border-radius:12px;
}
.dash-ads-premium-icon{ font-size:20px; flex-shrink:0 }
.dash-ads-premium-text{ flex:1; min-width:0 }
.dash-ads-premium-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px; font-weight:900; text-transform:uppercase;
  color:var(--t1); line-height:1;
}
.dash-ads-premium-sub{
  font-size:11px; color:var(--t3); margin-top:3px;
}
.dash-ads-premium-badge{
  font-size:9px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--acc);
  border:1px solid rgba(232,255,71,.3);
  background:rgba(232,255,71,.08);
  padding:4px 8px; border-radius:20px; flex-shrink:0;
}



/* ═══════════════════════════════════════════════════
   SYSTÈME VIP
═══════════════════════════════════════════════════ */

/* ── Animation bordure dorée tournante ── */
@keyframes vip-border-spin{
  0%  { transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}
@keyframes vip-shimmer{
  0%  { opacity:.5; }
  50% { opacity:1; }
  100%{ opacity:.5; }
}

/* ── Card VIP dans Compte ── */
.vip-card{
  position:relative;overflow:hidden;
  padding:13px 14px;border-radius:14px;
  background:#0f0d05;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  cursor:pointer;
  transition:transform .18s var(--spring);
  isolation:isolate;
}
.vip-card:active{transform:scale(.98)}

/* Bordure animée */
.vip-card-border{
  position:absolute;inset:-1px;border-radius:15px;z-index:-1;
  background:conic-gradient(from var(--a,0deg),
    transparent 0deg,
    rgba(200,168,40,.15) 60deg,
    rgba(212,180,50,.9) 120deg,
    rgba(200,168,40,.15) 180deg,
    transparent 240deg
  );
  animation:vip-border-spin 4s linear infinite;
}
.vip-card::after{
  content:'';position:absolute;inset:1px;border-radius:13px;
  background:#0f0d05;z-index:-1;
}
.vip-card-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0;position:relative;z-index:1}
.vip-crown{
  width:34px;height:34px;border-radius:9px;
  background:rgba(200,168,40,.1);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#c8a828;
}
.vip-card-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:#d4b84a;
}
.vip-card-sub{font-size:11px;color:rgba(200,168,40,.4);margin-top:1px}
.vip-badge{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
  padding:5px 9px;border-radius:20px;
  background:rgba(200,168,40,.08);
  border:1px solid rgba(200,168,40,.18);
  color:rgba(200,168,40,.65);font-size:10px;font-weight:700;
  white-space:nowrap;position:relative;z-index:1;
}
.vip-card.vip-active .vip-card-title{color:#e8c84a}
.vip-card.vip-active .vip-card-border{
  background:conic-gradient(from var(--a,0deg),
    transparent 0deg,
    rgba(200,168,40,.3) 60deg,
    rgba(212,180,50,1) 120deg,
    rgba(200,168,40,.3) 180deg,
    transparent 240deg
  );
}

/* ── Overlay VIP ── */
.vip-ov{
  position:fixed;inset:0;z-index:400;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
  visibility:hidden;pointer-events:none;
}
.vip-ov.open{transform:translateX(0);visibility:visible;pointer-events:all}

.vip-ov-head{
  flex-shrink:0;background:var(--s1);
  border-bottom:1px solid rgba(200,168,40,.12);
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;
}
.vip-ov-back{
  width:32px;height:32px;border-radius:9px;
  background:var(--s3);border:1px solid var(--line2);
  color:var(--t2);display:flex;align-items:center;justify-content:center;
  transition:transform .15s var(--spring);flex-shrink:0;
}
.vip-ov-back:active{transform:scale(.87)}
.vip-ov-logo{
  width:28px;height:28px;border-radius:8px;
  background:rgba(200,168,40,.1);
  display:flex;align-items:center;justify-content:center;
  color:#c8a828;flex-shrink:0;
}
.vip-ov-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:2px;
  color:#d4b84a;
}

.vip-ov-scroll{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
}
.vip-ov-scroll::-webkit-scrollbar{display:none}

/* Hero */
.vip-hero{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:36px 20px 26px;overflow:hidden;
}
.vip-hero-aura{
  position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:280px;height:280px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(212,184,74,.13),transparent);
  animation:vipAura 6s ease-in-out infinite alternate;
}
@keyframes vipAura{to{opacity:.55;transform:translateX(-50%) scale(1.18)}}
.vip-hero-icon{
  position:relative;z-index:1;
  width:64px;height:64px;border-radius:19px;
  background:linear-gradient(145deg,rgba(212,184,74,.16),rgba(200,168,40,.06));
  border:1px solid rgba(200,168,40,.28);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.vip-hero-icon svg{position:relative;z-index:1;color:#d4b84a}
.vip-hero-title{
  position:relative;z-index:1;
  font-family:'Barlow Condensed',sans-serif;
  font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:2.5px;
  color:#d4b84a;margin-bottom:6px;
}
.vip-hero-sub{position:relative;z-index:1;font-size:13px;color:var(--t3);letter-spacing:.3px}
.vip-hero-price-tag{
  position:relative;z-index:1;margin-top:14px;
  font-size:11.5px;color:rgba(212,184,74,.8);
  background:rgba(200,168,40,.08);border:1px solid rgba(200,168,40,.22);
  padding:7px 15px;border-radius:20px;
}
.vip-hero-price-tag span{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;color:#d4b84a}

/* Liste d'avantages détaillée */
.vip-perks-list{
  display:flex;flex-direction:column;gap:8px;
  margin:0 16px 22px;
}
.vip-perk-row{
  display:flex;align-items:flex-start;gap:13px;
  background:var(--s1);border:1px solid var(--line);border-radius:14px;
  padding:14px;
}
.vip-perk-ico{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:rgba(200,168,40,.08);
  display:flex;align-items:center;justify-content:center;
  color:#c8a828;
}
.vip-perk-txt{flex:1;min-width:0}
.vip-perk-t{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:2px}
.vip-perk-d{font-size:11.5px;color:var(--t3);line-height:1.4}

/* Plans */
.vip-plans{
  display:flex;flex-direction:column;gap:10px;
  padding:0 16px;margin-bottom:14px;
}

/* Plan actif — sobre, bordure dorée fixe (plus de conic-gradient tournant) */
.vip-plan-card{
  position:relative;overflow:hidden;
  border-radius:16px;padding:20px 18px 18px;
  background:var(--s1);border:1px solid var(--line2);
  transition:transform .15s var(--spring);
}
.vip-plan-active{
  background:linear-gradient(160deg,#151106 0%,#0f0d05 100%);
  border-color:rgba(200,168,40,.35);
  box-shadow:0 4px 20px -10px rgba(212,184,74,.3);
}
.vip-plan-ribbon{
  display:inline-block;margin-bottom:12px;
  font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:#d4b84a;background:rgba(200,168,40,.12);
  padding:4px 10px;border-radius:20px;
  border:1px solid rgba(200,168,40,.25);
}
.vip-plan-reassure{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:12px;font-size:10px;color:rgba(212,184,74,.6);
}

/* Alternative gratuite (parrainage) */
.vip-alt-card{
  display:flex;align-items:center;gap:13px;
  margin:0 16px 8px;padding:15px;
  background:var(--s1);border:1px dashed var(--line2);border-radius:14px;
}
.vip-alt-ico{font-size:22px;line-height:1;flex-shrink:0}
.vip-alt-t{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:2px}
.vip-alt-d{font-size:11.5px;color:var(--t3);line-height:1.4}

/* Plan bientôt */
.vip-plan-soon{opacity:.45;pointer-events:none}

.vip-plan-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.vip-plan-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
  color:var(--t2);
}
.vip-plan-active .vip-plan-name{color:#d4b84a}
.vip-plan-avail{
  font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:#d4b84a;background:rgba(200,168,40,.1);
  padding:3px 8px;border-radius:20px;
  border:1px solid rgba(200,168,40,.2);
}
.vip-plan-soon-badge{
  display:flex;align-items:center;gap:4px;
  font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--t3);background:var(--s3);
  padding:3px 8px;border-radius:20px;
}
.vip-plan-soon-badge svg{opacity:.6}

.vip-plan-price-row{
  display:flex;align-items:baseline;gap:3px;margin-bottom:7px;
}
.vip-plan-price{
  font-family:'Barlow Condensed',sans-serif;
  font-size:44px;font-weight:900;line-height:1;
  color:var(--t2);
}
.vip-plan-active .vip-plan-price{color:#d4b84a}
.vip-plan-period{font-size:14px;color:var(--t3);font-weight:500}

.vip-plan-desc{font-size:11px;color:var(--t3);line-height:1.5;margin-bottom:12px}
.vip-plan-active .vip-plan-desc{color:rgba(200,168,40,.5)}

.vip-plan-btn-wrap{margin-top:4px}
.vip-plan-btn{
  width:100%;padding:12px;border-radius:10px;
  background:rgba(200,168,40,.1);border:1px solid rgba(200,168,40,.25);
  color:#d4b84a;
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;
  text-align:center;
  transition:background .15s;
}
.vip-plan-active:active .vip-plan-btn{background:rgba(200,168,40,.18)}

/* Statut VIP actif */
.vip-status-active{
  display:flex;align-items:center;gap:12px;
  padding:14px;margin-bottom:12px;
  background:#0f0d05;border-radius:13px;
  position:relative;overflow:hidden;isolation:isolate;
}
.vip-status-ring{
  position:absolute;inset:-1px;border-radius:14px;z-index:-1;
  background:conic-gradient(from var(--a,0deg),transparent 0deg,rgba(212,180,50,.9) 120deg,transparent 240deg);
  animation:vip-border-spin 4s linear infinite;
}
.vip-status-ring::after{
  content:'';position:absolute;inset:1px;border-radius:13px;background:#0f0d05;z-index:-1;
}
.vip-status-crown{
  width:38px;height:38px;border-radius:10px;
  background:rgba(200,168,40,.1);
  display:flex;align-items:center;justify-content:center;
  color:#c8a828;flex-shrink:0;position:relative;
}
.vip-status-title{
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:900;
  text-transform:uppercase;color:#d4b84a;
}
.vip-status-exp{font-size:11px;color:rgba(200,168,40,.4);margin-top:2px}
.vip-status-check{
  margin-left:auto;
  width:26px;height:26px;border-radius:50%;
  background:rgba(200,168,40,.1);border:1px solid rgba(200,168,40,.2);
  display:flex;align-items:center;justify-content:center;
  color:#c8a828;flex-shrink:0;position:relative;
}
.vip-perks{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.vip-perk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2)}

/* Séparateur "Renouveler / Nouvelle clé" affiché sous le bloc VIP actif */
.vip-renew-divider{
  display:flex;align-items:center;gap:10px;
  margin:14px 16px 4px;
  font-size:10px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.8px;
}
.vip-renew-divider::before,.vip-renew-divider::after{
  content:'';flex:1;height:1px;background:var(--line);
}

/* Clé VIP */
.vip-key-block{
  margin:8px 16px 8px;padding:14px;
  background:var(--s1);border-radius:12px;border:1px solid var(--line);
}
.vip-key-label{
  font-size:10px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;
}
.vip-key-row{display:flex;gap:7px;align-items:stretch}
.vip-key-input{
  flex:1;padding:10px 11px;
  background:var(--s2);border:1px solid var(--line2);border-radius:9px;
  color:var(--t1);font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
}
.vip-key-input:focus{outline:none;border-color:rgba(200,168,40,.3)}
.vip-key-submit{
  padding:10px 16px;border-radius:9px;
  background:rgba(200,168,40,.1);border:1px solid rgba(200,168,40,.2);
  color:#d4b84a;font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:900;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  -webkit-appearance:none;appearance:none;
  min-height:44px;min-width:80px;
  transition:background .15s,transform .15s var(--spring);
  touch-action:manipulation;
}
.vip-key-submit:active{transform:scale(.93);background:rgba(200,168,40,.18)}

/* ── Bouton PayPal dans plan VIP ── */
.vip-paypal-btn{
  width:100%;border-radius:10px;overflow:hidden;
  min-height:44px;
}




/* ═══════════════════════════════════════════════════
   GATE PUBLICITAIRE
═══════════════════════════════════════════════════ */

/* Overlay */
.ad-gate{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .18s var(--ease);
}
.ad-gate.open{opacity:1;pointer-events:all}

/* Flou background — rapide et smooth */
.ad-gate-bg{
  position:absolute;inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  transition:opacity .18s var(--ease);
}
.ad-gate.open .ad-gate-bg{opacity:1}

/* Card */
.ad-gate-card{
  position:relative;z-index:1;
  width:100%;max-width:320px;
  background:var(--s1);
  border-radius:20px;
  border:1px solid var(--line2);
  overflow:hidden;
  transform:scale(.9) translateY(16px);
  opacity:0;
  transition:transform .3s cubic-bezier(.34,1.2,.64,1), opacity .22s var(--ease);
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
}
.ad-gate.open .ad-gate-card{transform:scale(1) translateY(0);opacity:1}

/* Header */
.ag-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 0;
}
.ag-header-left{display:flex;align-items:center;gap:6px}
.ag-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--acc);
  animation:blink 1.4s infinite;
  flex-shrink:0;
}
.ag-label{
  font-size:9px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--t3);
}
.ag-close{
  width:26px;height:26px;border-radius:8px;
  background:var(--s3);border:1px solid var(--line);
  color:var(--t3);display:flex;align-items:center;justify-content:center;
  transition:background .12s,transform .15s var(--spring);
}
.ag-close:active{transform:scale(.85)}

/* Titre */
.ag-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:900;
  text-transform:uppercase;letter-spacing:.3px;
  color:var(--t1);line-height:1.1;
  padding:12px 16px 6px;
}
.ag-sub{
  font-size:12px;color:var(--t3);
  line-height:1.6;padding:0 16px 14px;
}

/* Règles */
.ag-rules{
  display:flex;flex-direction:column;gap:0;
  margin:0 14px 14px;
  background:var(--s2);border-radius:12px;
  border:1px solid var(--line);
  overflow:hidden;
}
.ag-rule{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;font-size:11px;font-weight:600;
  border-bottom:1px solid var(--line);
}
.ag-rule:last-child{border-bottom:none}
.ag-rule-ico{
  width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ag-ok{color:var(--t2)}
.ag-ok .ag-rule-ico{background:rgba(34,212,106,.12);color:var(--green)}
.ag-warn{color:var(--t3)}
.ag-warn .ag-rule-ico{background:rgba(255,59,59,.1);color:var(--red)}
.ag-warn .ag-rule-ico svg{stroke:var(--red)}

/* Bouton CTA */
.ag-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:0 14px 10px;
  padding:14px;border-radius:13px;
  background:var(--acc);color:var(--bg-on-acc);
  font-family:'Barlow Condensed',sans-serif;
  font-size:17px;font-weight:900;
  text-transform:uppercase;letter-spacing:.5px;
  text-decoration:none;
  transition:transform .15s var(--spring),opacity .15s;
}
.ag-btn:active{transform:scale(.97);opacity:.9}

/* Footer VIP */
.ag-footer{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:0 14px 14px;cursor:pointer;
}
.ag-free-badge{
  display:flex;align-items:center;gap:3px;
  font-size:9px;font-weight:900;letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(200,168,40,.7);
  background:rgba(200,168,40,.1);border:1px solid rgba(200,168,40,.2);
  padding:2px 7px;border-radius:20px;
  flex-shrink:0;
}
.ag-footer-txt{
  font-size:11px;color:var(--t3);
  transition:color .15s;
}
.ag-footer:active .ag-footer-txt{color:var(--t2)}

/* ═══════════════════════════════════════════════════
   ADMIN VIP — CLÉS
   ═══════════════════════════════════════════════════ */
.adm-vip-gen-block{
  margin:14px 14px 0;
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:14px;
  padding:14px;
}
.adm-vip-gen-title{
  display:flex;align-items:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t2);
  margin-bottom:12px;
}
.adm-vip-gen-row{
  display:flex;gap:8px;
}
.adm-vip-select{
  background:var(--s2);border:1px solid var(--line2);
  color:var(--t1);border-radius:10px;
  padding:0 10px;font-size:13px;font-weight:600;
  height:40px;cursor:pointer;flex-shrink:0;
  -webkit-appearance:none;appearance:none;
  min-width:110px;
}
.adm-vip-keys-list{
  padding:10px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.adm-vip-key-row{
  background:var(--s1);
  border:1px solid var(--line2);
  border-radius:14px;
  padding:12px 14px;
  transition:opacity .2s;
}
.adm-vip-key-row.disabled{
  opacity:.5;
}
.adm-vip-key-row.used{
  border-color:rgba(0,200,120,.25);
}
.adm-vip-key-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:8px;
}
.adm-vip-key-code{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:900;letter-spacing:1.5px;
  color:var(--acc);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.adm-vip-key-code:active{opacity:.7}
.vip-key-status{
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;flex-shrink:0;
}
.vip-key-status-active{
  color:#22d46a;background:rgba(34,212,106,.12);border:1px solid rgba(34,212,106,.25);
}
.vip-key-status-used{
  color:#a259ff;background:rgba(162,89,255,.12);border:1px solid rgba(162,89,255,.25);
}
.vip-key-status-off{
  color:var(--t3);background:var(--s2);border:1px solid var(--line);
}
.adm-vip-key-meta{
  display:flex;flex-wrap:wrap;gap:10px;
  font-size:11px;color:var(--t3);
  margin-bottom:10px;
}
.adm-vip-key-actions{
  display:flex;gap:7px;
}
.adm-vip-copy-btn{
  display:flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;
  background:rgba(200,168,40,.1);
  color:rgba(200,168,40,.9);
  border:1px solid rgba(200,168,40,.2);
  border-radius:10px;padding:7px 12px;
  cursor:pointer;flex-shrink:0;
}
.adm-vip-copy-btn:active{transform:scale(.93)}

/* ═══════════════════════════════════════════════════
   ANIMATION ACTIVATION VIP PREMIUM
   ═══════════════════════════════════════════════════ */
.vip-act-overlay{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background:rgba(0,0,0,.55);
  width:100%;height:100%;
  animation:vipActIn .35s cubic-bezier(.34,1.56,.64,1) both;
  position:relative;overflow:hidden;
}
@keyframes vipActIn{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:scale(1)}
}
.vip-act-crown{
  position:relative;z-index:2;
  width:96px;height:96px;
  background:radial-gradient(circle,rgba(200,168,40,.22),transparent 70%);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
  animation:vipCrownPulse 1.2s ease-in-out infinite;
}
.vip-act-crown svg{
  color:#d4b84a;
  filter:drop-shadow(0 0 16px rgba(212,184,74,.8));
  animation:vipCrownBounce .5s .15s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes vipCrownBounce{
  from{transform:scale(0) rotate(-20deg);opacity:0}
  to{transform:scale(1) rotate(0deg);opacity:1}
}
@keyframes vipCrownPulse{
  0%,100%{box-shadow:0 0 20px rgba(200,168,40,.2)}
  50%{box-shadow:0 0 40px rgba(200,168,40,.45)}
}
.vip-act-title{
  position:relative;z-index:2;
  font-family:'Barlow Condensed',sans-serif;
  font-size:38px;font-weight:900;letter-spacing:2px;
  color:#e8c84a;
  text-shadow:0 0 30px rgba(232,200,74,.5);
  animation:vipActTextIn .4s .25s cubic-bezier(.34,1.56,.64,1) both;
  line-height:1;
}
.vip-act-sub{
  position:relative;z-index:2;
  font-size:15px;font-weight:600;color:var(--t2);
  margin-top:6px;
  animation:vipActTextIn .4s .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes vipActTextIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.vip-act-perks{
  position:relative;z-index:2;
  margin-top:28px;
  display:flex;flex-direction:column;gap:10px;
}
.vip-act-perk{
  display:flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;color:var(--t2);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:10px 18px;
  animation:vipActTextIn .35s calc(.45s + var(--i,.1s)) both;
}
.vip-act-perk:nth-child(1){--i:.0s}
.vip-act-perk:nth-child(2){--i:.07s}
.vip-act-perk:nth-child(3){--i:.14s}
.vip-act-perk span{color:#e8c84a;font-size:16px}

/* ═══════════════════════════════════════════════════
   COMPTE — CONNECTÉ
   ═══════════════════════════════════════════════════ */
.acc-avatar{
  position:relative;
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,rgba(200,168,40,.3),rgba(200,168,40,.08));
  border:2px solid rgba(200,168,40,.25);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;overflow:visible;
}
.acc-avatar-img{
  width:72px;height:72px;border-radius:50%;object-fit:cover;
}
.acc-avatar-initials{
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px;font-weight:900;color:#d4b84a;
}
.acc-avatar-vip{
  position:absolute;bottom:-2px;right:-2px;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,#c8a828,#e8c84a);
  display:flex;align-items:center;justify-content:center;
  color:#000;border:2px solid var(--bg);
}
.acc-user-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;font-weight:900;letter-spacing:.5px;color:var(--t1);
}
.acc-user-email{font-size:12px;color:var(--t3);margin-top:2px}
.acc-vip-banner{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(200,168,40,.12),rgba(200,168,40,.06));
  border:1px solid rgba(200,168,40,.25);border-radius:12px;
  padding:11px 14px;font-size:13px;font-weight:700;color:#d4b84a;
}
.acc-info-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--t2);width:100%;
}
.acc-info-label{font-weight:700;color:var(--t3);flex-shrink:0}
.acc-info-val{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.acc-signout-btn{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,59,59,.07);border:1px solid rgba(255,59,59,.15);
  color:var(--red);border-radius:10px;
  padding:9px 14px;font-size:12px;font-weight:700;
  cursor:pointer;width:100%;justify-content:center;
  transition:background .15s,transform .15s;
}
.acc-signout-btn:active{transform:scale(.97);background:rgba(255,59,59,.12)}

/* ═══════════════════════════════════════════════════
   COMPTE — NON CONNECTÉ
   ═══════════════════════════════════════════════════ */
.acc-auth-card{
  background:var(--s1);border:1px solid var(--line2);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;gap:12px;
}
.acc-auth-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:900;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t1);
}
.acc-auth-sub{font-size:12px;color:var(--t3);margin-top:-4px}
.acc-auth-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:12px;border-radius:11px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;
  cursor:pointer;transition:transform .15s,opacity .15s;
}
.acc-auth-btn:active{transform:scale(.97)}
.acc-auth-btn-primary{
  background:var(--acc);color:#000;border:none;
}
.acc-google-btn-real{
  background:var(--s2);border:1px solid var(--line2);color:var(--t1);
}
.acc-auth-login-row{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--t3);
}
.acc-auth-link{
  font-size:12px;font-weight:700;color:var(--acc);background:none;border:none;
  cursor:pointer;padding:0;
}

/* ═══════════════════════════════════════════════════
   MODAL AUTH
   ═══════════════════════════════════════════════════ */
.auth-ov{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.auth-ov.open{opacity:1;pointer-events:all}
.auth-modal{
  width:100%;max-width:480px;
  background:var(--s1);border-radius:20px 20px 0 0;
  border-top:1px solid var(--line2);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  max-height:92vh;display:flex;flex-direction:column;
}
.auth-ov.open .auth-modal{transform:translateY(0)}
.auth-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.auth-modal-logo{
  display:flex;align-items:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:900;letter-spacing:1px;color:var(--t1);
}
.auth-modal-close{
  width:32px;height:32px;border-radius:50%;
  background:var(--s2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--t2);
}
.auth-modal-close:active{transform:scale(.9)}
.auth-modal-scroll{overflow-y:auto;padding:16px;flex:1}
.auth-tabs{
  display:flex;gap:4px;background:var(--s2);border-radius:10px;padding:3px;
  margin-bottom:18px;
}
.auth-tab{
  flex:1;padding:8px;border-radius:8px;border:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;
  color:var(--t3);background:none;cursor:pointer;transition:all .15s;
}
.auth-tab.active{background:var(--s1);color:var(--t1);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.auth-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-label{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.auth-input-wrap{position:relative}
.auth-input{
  width:100%;padding:11px 13px;
  background:var(--s2);border:1px solid var(--line2);border-radius:10px;
  color:var(--t1);font-size:14px;
  transition:border-color .15s;box-sizing:border-box;
}
.auth-input:focus{outline:none;border-color:rgba(var(--acc-rgb),.5)}
.auth-input-wrap .auth-input{padding-right:40px}
.auth-eye{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--t3);cursor:pointer;
  display:flex;align-items:center;padding:4px;
}
.auth-submit{
  width:100%;padding:13px;border-radius:11px;border:none;
  background:var(--acc);color:#000;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;
  cursor:pointer;transition:transform .15s,opacity .15s;
  margin-bottom:10px;
}
.auth-submit:active{transform:scale(.97)}
.auth-forgot{
  width:100%;background:none;border:none;
  font-size:12px;color:var(--t3);cursor:pointer;
  padding:4px 0 10px;text-align:center;
}
.auth-forgot:active{color:var(--t2)}
.auth-divider{
  display:flex;align-items:center;gap:10px;margin:4px 0 12px;
  font-size:11px;color:var(--t3);
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-google-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px;border-radius:11px;
  background:var(--s2);border:1px solid var(--line2);
  color:var(--t1);
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;
  cursor:pointer;transition:transform .15s,background .15s;
  margin-bottom:4px;
}
.auth-google-btn:active{transform:scale(.97);background:var(--s1)}

/* ═══════════════════════════════════════════════════════
   COMPTE — HERO CONNECTÉ
═══════════════════════════════════════════════════════ */
.acc-hero-connected{
  display:flex;align-items:center;gap:14px;
  padding:20px 16px 4px;
}
.acc-avatar-wrap{
  position:relative;flex-shrink:0;
  width:60px;height:60px;
}
.acc-avatar-photo{
  width:60px;height:60px;border-radius:50%;
  object-fit:cover;display:block;
  border:2px solid rgba(200,168,40,.3);
}
.acc-avatar-initials{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,rgba(200,168,40,.2),rgba(200,168,40,.06));
  border:2px solid rgba(200,168,40,.25);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;
  font-size:24px;font-weight:900;color:#d4b84a;
}
.acc-avatar-vip-dot{
  position:absolute;bottom:-2px;right:-2px;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,#c8a828,#f0d060);
  border:2px solid var(--bg);
  display:flex;align-items:center;justify-content:center;
  color:#000;
}
.acc-hero-info{
  flex:1;min-width:0;
}
.acc-display-name-row{
  display:flex;align-items:center;gap:7px;
}
.acc-display-name{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:900;color:var(--t1);
  letter-spacing:.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acc-edit-pseudo-btn{
  background:none;border:none;
  color:var(--t3);cursor:pointer;
  display:flex;align-items:center;padding:3px;
  flex-shrink:0;
  transition:color .15s;
}
.acc-edit-pseudo-btn:active{color:var(--acc)}
.acc-email-txt{
  font-size:11px;color:var(--t3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acc-uid-row{
  display:flex;flex-direction:column;gap:3px;margin-top:8px;
  font-size:10px;color:var(--t3);cursor:pointer;
  background:var(--s2);border:1px solid var(--line);border-radius:10px;
  padding:7px 10px;width:fit-content;max-width:100%;
}
.acc-uid-row:active{opacity:.6}
.acc-uid-label{font-weight:800;color:var(--t2);font-size:9.5px;text-transform:uppercase;letter-spacing:.5px}
.acc-uid-val{font-family:monospace;font-size:11px;color:var(--t1);word-break:break-all}

/* ── Onglet Admins (panel admin) ── */
.adm-users-my-id{
  margin:0 16px 14px;padding:12px 14px;
  background:var(--s1);border:1px solid var(--line2);border-radius:14px;
}
.adm-users-my-id-label{font-size:11px;color:var(--t3);margin-bottom:5px}
.adm-users-my-id-val{
  font-family:monospace;font-size:12.5px;color:var(--acc);cursor:pointer;
  word-break:break-all;
}
.adm-users-readonly-note{
  margin:0 16px 14px;padding:12px 14px;font-size:12px;color:var(--t3);
  background:var(--s1);border:1px solid var(--line2);border-radius:14px;text-align:center;
}

/* ── Edit pseudo ── */
.acc-pseudo-edit-block{
  margin:0 16px;padding:12px 14px;
  background:var(--s1);border:1px solid var(--line2);border-radius:12px;
  flex-direction:column;gap:8px;
}
.acc-pseudo-label{
  font-size:10px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.6px;
}
.acc-pseudo-row{display:flex;gap:6px;align-items:center}
.acc-pseudo-input{
  flex:1;padding:9px 11px;
  background:var(--s2);border:1px solid var(--line2);border-radius:9px;
  color:var(--t1);font-size:14px;
}
.acc-pseudo-input:focus{outline:none;border-color:rgba(var(--acc-rgb),.5)}
.acc-pseudo-save-btn{
  padding:9px 13px;border-radius:9px;
  background:var(--acc);color:#000;border:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:900;cursor:pointer;
  flex-shrink:0;
}
.acc-pseudo-save-btn:active{transform:scale(.94)}
.acc-pseudo-cancel-btn{
  width:34px;height:34px;border-radius:9px;
  background:var(--s2);border:1px solid var(--line);
  color:var(--t3);display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.acc-pseudo-cancel-btn:active{transform:scale(.9)}

/* ── VIP banner ── */
.acc-vip-active-banner{
  display:flex;align-items:center;gap:8px;
  margin:0 16px;padding:10px 14px;border-radius:11px;
  background:linear-gradient(135deg,rgba(200,168,40,.12),rgba(200,168,40,.05));
  border:1px solid rgba(200,168,40,.22);
  font-size:13px;font-weight:700;color:#d4b84a;
}

/* ── Signout ── */
.acc-signout-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  width:calc(100% - 32px);margin:4px 16px 0;
  padding:11px;border-radius:11px;
  background:rgba(255,59,59,.07);border:1px solid rgba(255,59,59,.14);
  color:var(--red);font-size:13px;font-weight:700;
  cursor:pointer;transition:background .15s,transform .15s;
}
.acc-signout-btn:active{transform:scale(.97);background:rgba(255,59,59,.13)}

/* ═══════════════════════════════════════════════════════
   COMPTE — NON CONNECTÉ
═══════════════════════════════════════════════════════ */
.acc-hero-ball{
  width:60px;height:60px;border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.acc-hero-tagline{
  font-size:12px;color:var(--t3);text-align:center;
  margin-top:4px;max-width:240px;line-height:1.5;
}
.acc-auth-card{
  background:var(--s1);border:1px solid var(--line2);border-radius:16px;
  padding:16px;display:flex;flex-direction:column;gap:10px;
}
.acc-btn-google{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:12px;border-radius:11px;
  background:var(--s2);border:1px solid var(--line2);color:var(--t1);
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;
  cursor:pointer;transition:transform .15s,background .15s;
}
.acc-btn-google:active{transform:scale(.97);background:var(--s1)}
.acc-auth-or{
  display:flex;align-items:center;gap:10px;
  font-size:11px;color:var(--t3);
}
.acc-auth-or::before,.acc-auth-or::after{
  content:'';flex:1;height:1px;background:var(--line);
}
.acc-btn-email{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:12px;border-radius:11px;
  background:var(--acc);color:#000;border:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;
  cursor:pointer;transition:transform .15s,opacity .15s;
}
.acc-btn-email:active{transform:scale(.97);opacity:.9}
.acc-auth-hint{
  text-align:center;font-size:12px;color:var(--t3);
}
.acc-auth-hint-link{
  background:none;border:none;padding:0;
  font-size:12px;font-weight:700;color:var(--acc);cursor:pointer;
}

/* ═══════════════════════════════════════════════════════
   MODAL AUTH — REDESIGN
═══════════════════════════════════════════════════════ */
.auth-modal-tabs{
  display:flex;gap:3px;
  background:var(--s2);border-radius:10px;padding:3px;
  margin-bottom:14px;
}
.auth-modal-tab{
  flex:1;padding:9px 4px;border-radius:8px;border:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;
  color:var(--t3);background:none;cursor:pointer;
  transition:all .15s;
}
.auth-modal-tab.on{
  background:var(--s1);color:var(--t1);
  box-shadow:0 1px 5px rgba(0,0,0,.25);
}
.auth-form-fields{display:flex;flex-direction:column;gap:11px;margin-bottom:13px}
.auth-form-field{display:flex;flex-direction:column;gap:5px}
.auth-form-label{
  font-size:10px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.6px;
}
.auth-form-input-wrap{position:relative}
.auth-form-input{
  width:100%;padding:11px 42px 11px 13px;box-sizing:border-box;
  background:var(--s2);border:1px solid var(--line2);border-radius:10px;
  color:var(--t1);font-size:14px;
  transition:border-color .15s;
}
.auth-form-field > .auth-form-input{padding-right:13px}
.auth-form-input:focus{outline:none;border-color:rgba(var(--acc-rgb),.5)}
.auth-form-eye{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--t3);
  cursor:pointer;display:flex;align-items:center;padding:4px;
  transition:color .15s;
}
.auth-form-eye:active{color:var(--t1)}
.auth-form-submit{
  width:100%;padding:13px;border:none;border-radius:11px;
  background:var(--acc);color:#000;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;
  cursor:pointer;transition:transform .15s,opacity .15s;
  margin-bottom:2px;
}
.auth-form-submit:active{transform:scale(.97)}
.auth-form-forgot{
  width:100%;background:none;border:none;
  font-size:12px;color:var(--t3);cursor:pointer;
  padding:4px 0 8px;text-align:center;
}
.auth-form-forgot:active{color:var(--t2)}
.auth-form-or{
  display:flex;align-items:center;gap:10px;
  font-size:11px;color:var(--t3);margin:2px 0;
}
.auth-form-or::before,.auth-form-or::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-form-google{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:12px;border-radius:11px;
  background:var(--s2);border:1px solid var(--line2);color:var(--t1);
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.3px;
  cursor:pointer;transition:transform .15s,background .15s;
}
.auth-form-google:active{transform:scale(.97);background:var(--s1)}
.auth-form-switch{
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:12px;color:var(--t3);
  padding:6px 0 2px;
}
.auth-form-switch-btn{
  background:none;border:none;padding:0;
  font-size:12px;font-weight:700;color:var(--acc);cursor:pointer;
}

/* ═══════════════════════════════════════════════════════
   BOUTON PAYPAL VIP
═══════════════════════════════════════════════════════ */
.vip-plan-paypal-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:13px 16px;border-radius:11px;border:none;
  background:linear-gradient(135deg,#003087,#009cde);
  color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,156,222,.22);
  transition:transform .15s,box-shadow .15s,opacity .15s;
}
.vip-plan-paypal-btn:active{
  transform:scale(.96);
  box-shadow:0 2px 8px rgba(0,156,222,.12);
  opacity:.93;
}
/* PayPal devient la voie secondaire : moins criard que le bouton
   carte, pour que le choix par défaut soit celui qui ne demande pas
   de créer un compte. */
.vip-plan-paypal-btn{
  background:var(--s2);
  border:1px solid var(--line2);
  color:var(--t2);
  box-shadow:none;
  font-size:13.5px;
}
.vip-plan-paypal-btn:active{box-shadow:none}

/* ═══════════════════════════════════════════════════════
   PAIEMENT PAR CARTE — bouton principal
   Le visiteur n'a rien à créer : carte, Apple Pay ou Google Pay,
   sur une page hébergée par Stripe. D'où la place dominante.
   ═══════════════════════════════════════════════════════ */
.vip-pay-main{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:15px 16px;border-radius:12px;border:none;
  background:linear-gradient(135deg,#d4b84a,#f0d878);
  color:#171200;
  font-family:'Barlow Condensed',sans-serif;
  font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(212,184,74,.24);
  transition:transform .15s,box-shadow .15s,opacity .15s;
}
.vip-pay-main:active{transform:scale(.96);box-shadow:0 2px 9px rgba(212,184,74,.14)}
.vip-pay-main:disabled{opacity:.6;cursor:default;transform:none}

.vip-pay-marques{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin:9px 0 2px;
}
.vip-marque{
  font-size:9.5px;font-weight:800;letter-spacing:.6px;
  color:var(--t3);background:var(--s2);
  border:1px solid var(--line);border-radius:5px;
  padding:3px 7px;line-height:1;
}

.vip-pay-sep{
  display:flex;align-items:center;gap:10px;
  margin:12px 0 10px;
  font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--t3);
}
.vip-pay-sep::before,.vip-pay-sep::after{
  content:'';flex:1;height:1px;background:var(--line);
}

.vip-pay-err{
  margin-top:10px;padding:9px 11px;border-radius:9px;
  background:rgba(255,59,59,.08);border:1px solid rgba(255,59,59,.28);
  color:#ff9a9a;font-size:11.5px;line-height:1.4;text-align:center;
}

/* ═══════════════════════════════════════════════════════
   RETOUR DE PAIEMENT
   ═══════════════════════════════════════════════════════ */
.paie-ov{
  position:fixed;inset:0;z-index:4000;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.paie-ov.open{display:flex}
.paie-card{
  width:100%;max-width:360px;
  background:var(--s1);border:1px solid var(--line2);border-radius:18px;
  padding:26px 22px 18px;text-align:center;
  box-shadow:0 26px 70px -18px rgba(0,0,0,.85);
}
.paie-ico{
  width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  background:rgba(212,184,74,.14);border:1px solid rgba(212,184,74,.42);
  color:#d4b84a;font-size:24px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.paie-t{
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;
  color:var(--t1);
}
.paie-d{font-size:12.5px;color:var(--t2);line-height:1.5;margin-top:7px}
.paie-cle{
  margin-top:16px;padding:14px 10px;border-radius:12px;
  background:#1a1408;border:1px solid #c8a828;
  font-family:'JetBrains Mono',monospace;
  font-size:16px;font-weight:800;letter-spacing:2.5px;color:#d4b84a;
  word-break:break-all;-webkit-user-select:all;user-select:all;
}
.paie-btn{
  width:100%;margin-top:14px;padding:13px;border:none;border-radius:11px;
  background:linear-gradient(135deg,#d4b84a,#f0d878);color:#171200;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;
  cursor:pointer;transition:transform .15s;
}
.paie-btn:active{transform:scale(.96)}
.paie-fermer{
  width:100%;margin-top:8px;padding:11px;border:none;background:none;
  color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;
}

/* ═══════════════════════════════════════════════════════
   BOUTON NOTIFICATION DE BUT
═══════════════════════════════════════════════════════ */
.goal-notif-btn{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line2);
  background:var(--s2);color:var(--t3);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .12s;
  flex-shrink:0;
}
.goal-notif-btn:active{ transform:scale(.88); }
.goal-notif-btn.on{
  background:rgba(232,255,71,.12);
  border-color:rgba(232,255,71,.35);
  color:var(--acc);
}
[data-theme="light"] .goal-notif-btn.on{
  background:rgba(100,120,0,.1);
  border-color:rgba(100,120,0,.3);
}

/* ═══════════════════════════════════════════════════════
   PSEUDO EDIT BLOCK
═══════════════════════════════════════════════════════ */
.acc-pseudo-edit-block{
  background:var(--s2);border:1px solid var(--line2);border-radius:14px;
  padding:14px 16px;margin:0 0 12px;
}
.acc-pseudo-label{
  display:block;font-size:11px;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;
}
.acc-pseudo-row{
  display:flex;gap:8px;align-items:center;
}
.acc-pseudo-input{
  flex:1;background:var(--s3);border:1.5px solid var(--line2);border-radius:9px;
  color:var(--t1);font-size:14px;font-weight:600;padding:9px 12px;
  outline:none;transition:border-color .15s;
}
.acc-pseudo-input:focus{ border-color:var(--acc); }
.acc-pseudo-save-btn{
  background:var(--acc);color:var(--bg-on-acc);border:none;border-radius:9px;
  padding:9px 16px;font-size:13px;font-weight:800;cursor:pointer;
  transition:opacity .15s;flex-shrink:0;
}
.acc-pseudo-save-btn:disabled{ opacity:.5; }
.acc-pseudo-cancel-btn{
  background:var(--s3);color:var(--t3);border:1.5px solid var(--line2);
  border-radius:9px;padding:9px 10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s;
}
.acc-pseudo-cancel-btn:hover{ background:var(--line2); }

/* ── Publicité Propellerads — placeholder ── */
.ad-prop-slot{margin:8px 12px;border-radius:12px;background:var(--s1);border:1px solid var(--line);overflow:hidden;min-height:60px;display:flex;flex-direction:column}
.ad-prop-label{font-size:8px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);opacity:.45;padding:5px 10px 2px;align-self:flex-start}
.ad-prop-inner{flex:1;min-height:50px;display:flex;align-items:center;justify-content:center}
/* ═══════════════════════════════════════════════════════
   CHAT EN DIRECT
═══════════════════════════════════════════════════════ */
.chat-section{
  display:flex;flex-direction:column;width:100%;
  border-top:1px solid var(--line);
  flex:1;min-height:0;overflow:hidden;
}
.chat-head{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px 10px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.chat-head-title{
  display:flex;align-items:center;gap:6px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;
  color:var(--t1);flex:1;
}
.chat-head-count{
  font-size:10px;color:var(--t3);font-weight:600;
}
.chat-count{ font-size:10px;color:var(--t3);font-weight:600; }
.chat-live-dot{
  display:inline-block;
  width:7px;height:7px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(255,59,59,.5);
  animation:chatLiveDotPulse 1.8s infinite;
  flex-shrink:0;
}
@keyframes chatLiveDotPulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,59,.45)}
  70%{box-shadow:0 0 0 6px rgba(255,59,59,0)}
  100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}
}
.chat-messages{
  flex:1;overflow-y:auto;
  padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;
  scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar{display:none}
.chat-loading{display:flex;align-items:center;justify-content:center;padding:20px}
.chat-empty{
  text-align:center;font-size:12px;color:var(--t3);
  padding:20px;flex:1;display:flex;align-items:center;justify-content:center;
}
/* Messages */
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:85%}
.chat-msg-me{align-self:flex-end;align-items:flex-end}
.chat-msg-inner{display:flex;flex-direction:column;gap:2px}
.chat-msg-pseudo{
  font-size:10px;font-weight:700;color:var(--acc);
  padding:0 6px;letter-spacing:.2px;
}
.chat-msg-bubble{
  background:var(--s2);border:1px solid var(--line);
  border-radius:14px 14px 14px 4px;
  padding:7px 11px;
  font-size:13px;color:var(--t1);line-height:1.4;
  word-break:break-word;
}
.chat-msg-me .chat-msg-bubble{
  background:rgba(var(--acc-rgb),.15);
  border-color:rgba(var(--acc-rgb),.25);
  border-radius:14px 14px 4px 14px;
  color:var(--t1);
}
.chat-msg-time{
  font-size:9px;color:var(--t3);
  padding:0 6px;
}
/* Input */
#chat-logged-in{width:100%;box-sizing:border-box}
.chat-input-wrap{
  border-top:1px solid var(--line);
  padding:8px 10px;flex-shrink:0;
  background:var(--bg);
  position:relative; display:flex; align-items:center; gap:7px;
  width:100%;box-sizing:border-box;
}
.chat-input-row{
  display:flex;align-items:center;gap:7px;
}
.chat-input{
  flex:1;padding:9px 40px 9px 13px;
  background:var(--s2);border:1px solid var(--line2);border-radius:22px;
  color:var(--t1);font-size:13px;
  transition:border-color .15s;
}
.chat-input:disabled{opacity:.6}
.chat-input:focus{outline:none;border-color:rgba(var(--acc-rgb),.45)}
.chat-cooldown-badge{
  position:absolute; right:52px; top:50%; transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  background:var(--s1);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:var(--t2);
  pointer-events:none;
}
.chat-send-btn{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--acc);border:none;color:#000;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .15s,opacity .15s;
}
.chat-send-btn:active{transform:scale(.88)}
.chat-send-btn:disabled{opacity:.4}
/* Login hint */
.chat-login-hint{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--t3);padding:4px 0;
}
.chat-login-btn{
  background:none;border:none;padding:0;
  font-size:12px;font-weight:700;color:var(--acc);cursor:pointer;
  margin-left:auto;
}

/* ── Chat reply bar ── */
.chat-reply-bar{
  display:none;align-items:center;gap:8px;
  padding:7px 10px;
  background:var(--s2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.chat-reply-bar-line{
  width:3px;height:100%;min-height:32px;border-radius:3px;
  background:var(--acc);flex-shrink:0;
}
.chat-reply-bar-content{flex:1;min-width:0}
.chat-reply-bar-pseudo{
  font-size:11px;font-weight:700;color:var(--acc);
}
.chat-reply-bar-text{
  font-size:11px;color:var(--t3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-reply-bar-x{
  background:none;border:none;color:var(--t3);cursor:pointer;
  display:flex;align-items:center;padding:4px;flex-shrink:0;
}
.chat-reply-bar-x:active{color:var(--t1)}

/* ── Chat reply icon (swipe hint) ── */
.chat-msg-swipe-wrap{
  display:flex;align-items:center;gap:0;
  transition:none;position:relative;
}
.chat-reply-ico{
  position:absolute;left:-28px;
  color:var(--acc);opacity:0;
  pointer-events:none;
  display:flex;align-items:center;
  transition:opacity .15s;
}
.chat-msg-swipe-wrap[style*="translateX"] .chat-reply-ico{opacity:1}

/* ── Chat reply reference dans la bulle ── */
.chat-msg-reply-ref{
  background:rgba(var(--acc-rgb),.08);
  border-left:2px solid var(--acc);
  border-radius:6px;
  padding:4px 8px;margin-bottom:4px;
  max-width:100%;
}
.chat-msg-reply-pseudo{
  font-size:10px;font-weight:700;color:var(--acc);
}
.chat-msg-reply-text{
  font-size:11px;color:var(--t3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── Chat Admin badge ── */
.chat-msg-pseudo-admin{
  color:#f59e0b !important;
  font-weight:800;
}
/* Badge VIP dans le chat — ton doré, distinct du badge Admin (orange) */
.chat-vip-badge{
  display:inline-flex;align-items:center;gap:3px;
  background:rgba(232,165,39,.13);
  border:1px solid rgba(232,165,39,.32);
  color:var(--gold-2,#ffd76b);
  font-size:9px;font-weight:800;letter-spacing:.3px;
  padding:1px 5px;border-radius:20px;
  vertical-align:middle;margin-left:4px;
  text-transform:uppercase;
}
/* Le dégradé animé doit s'appliquer au pseudo seul, pas au badge qui suit */
.chat-msg-pseudo{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.chat-pseudo-name{display:inline-block}

.chat-admin-badge{
  display:inline-flex;align-items:center;gap:3px;
  background:rgba(245,158,11,.15);
  border:1px solid rgba(245,158,11,.3);
  color:#f59e0b;
  font-size:9px;font-weight:800;letter-spacing:.3px;
  padding:1px 5px;border-radius:20px;
  vertical-align:middle;margin-left:4px;
  text-transform:uppercase;
}
.chat-msg-me .chat-msg-pseudo-admin{
  text-align:right;
}

/* ── Chat ban button ── */
.chat-ban-btn{
  background:none;border:none;
  font-size:13px;cursor:pointer;
  opacity:.4;padding:2px 4px;
  transition:opacity .15s;
  flex-shrink:0;
}
.chat-ban-btn:active{opacity:1}
.chat-msg-inner:hover .chat-ban-btn{opacity:.7}

/* ═══════════════════════════════════════════════════
   FORCE DU MOT DE PASSE
   ═══════════════════════════════════════════════════ */
.pwd-strength-wrap{display:flex;align-items:center;gap:8px;margin-top:8px}
.pwd-strength-track{
  flex:1;height:5px;border-radius:3px;background:var(--s2);
  border:1px solid var(--line);overflow:hidden;
}
.pwd-strength-fill{
  height:100%;width:0%;border-radius:3px;
  background:#e5484d;transition:width .25s ease,background .25s ease;
}
.pwd-strength-label{
  font-size:11px;font-weight:800;letter-spacing:.3px;min-width:64px;text-align:right;
}
.pwd-rules-list{
  display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:9px;
}
.pwd-rule{
  font-size:10.5px;font-weight:700;color:var(--t3);
  padding:3px 9px 3px 7px;border-radius:20px;background:var(--s2);
  border:1px solid var(--line);display:flex;align-items:center;gap:4px;
  transition:all .2s;
}
.pwd-rule::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--t3);
  flex-shrink:0;transition:all .2s;
}
.pwd-rule.ok{
  color:#3ec972;background:rgba(62,201,114,.1);border-color:rgba(62,201,114,.3);
}
.pwd-rule.ok::before{background:#3ec972}
.pwd-rule.manque{color:var(--red);background:rgba(255,59,59,.12);border-color:rgba(255,59,59,.55);
  animation:pwdSecoue .42s cubic-bezier(.36,.07,.19,.97)}
.pwd-rule.manque::before{background:var(--red)}
@keyframes pwdSecoue{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-4px)}
  40%,80%{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){ .pwd-rule.manque{animation:none} }

/* ═══════════════════════════════════════════════════
   POPUP CODE DE VÉRIFICATION EMAIL
   ═══════════════════════════════════════════════════ */
.verif-code-ov{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.verif-code-ov.open{opacity:1;pointer-events:all}
.verif-code-modal{
  width:100%;max-width:360px;background:var(--s1);border:1px solid var(--line2);
  border-radius:20px;padding:28px 24px;text-align:center;
  transform:scale(.92);transition:transform .25s cubic-bezier(.32,.72,0,1);
}
.verif-code-ov.open .verif-code-modal{transform:scale(1)}
.verif-code-icon{font-size:34px;margin-bottom:10px}
.verif-code-title{
  font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:900;
  color:var(--t1);letter-spacing:.3px;margin-bottom:6px;
}
.verif-code-sub{font-size:12.5px;color:var(--t2);line-height:1.6;margin-bottom:20px}
.verif-code-sub b{color:var(--acc)}
.verif-code-input{
  width:100%;background:var(--s2);border:1px solid var(--line2);border-radius:12px;
  padding:14px;text-align:center;font-size:26px;font-weight:900;letter-spacing:10px;
  color:var(--t1);font-family:monospace;margin-bottom:6px;
}
.verif-code-input:focus{outline:none;border-color:rgba(var(--acc-rgb),.5)}
.verif-code-error{
  min-height:16px;font-size:11.5px;font-weight:700;color:#e5484d;margin-bottom:12px;
}
.verif-code-submit{
  width:100%;background:var(--acc);color:#000;border:none;border-radius:12px;
  padding:13px;font-size:14px;font-weight:900;font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.5px;text-transform:uppercase;cursor:pointer;margin-bottom:10px;
}
.verif-code-submit:disabled{opacity:.6}
.verif-code-resend{
  width:100%;background:none;border:none;color:var(--t2);font-size:12.5px;font-weight:700;
  cursor:pointer;padding:8px;margin-bottom:4px;
}
.verif-code-resend:disabled{color:var(--t3);cursor:default}
.verif-code-cancel{
  width:100%;background:none;border:none;color:var(--t3);font-size:11.5px;
  cursor:pointer;padding:6px;text-decoration:underline;
}

/* ── Popup de bannissement chat (durée) ── */
.chat-ban-modal .verif-code-sub{margin-bottom:18px}
.chat-ban-options{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;
}
.chat-ban-opt{
  background:var(--s2);border:1px solid var(--line2);border-radius:11px;
  padding:12px 8px;font-size:12.5px;font-weight:700;color:var(--t1);
  cursor:pointer;transition:background .15s;
}
.chat-ban-opt:active{background:var(--s1)}
.chat-ban-opt.danger{
  grid-column:1 / -1;
  color:#e5484d;background:rgba(229,72,77,.08);border-color:rgba(229,72,77,.25);
}



/* ═══════════════════════════════════════════════════════════════
   DESKTOP (≥1024px) — coque à trois colonnes
   ───────────────────────────────────────────────────────────────
   Le design mobile n'est pas touché : les trois blocs bureau
   (.dk-rail / .dk-head / .dk-side) sont masqués en dessous de
   1024px, et la coque mobile (.nav / .ticker-wrap / .bar) est
   masquée au-dessus. Aucune règle mobile n'est modifiée.

   Grille :  rail │ en-tête (pleine largeur)
             rail │ contenu │ colonne de droite
   ═══════════════════════════════════════════════════════════════ */

/* Invisibles tant qu'on n'est pas sur grand écran */
.dk-rail,.dk-head,.dk-side{display:none}

@media (min-width:1024px){

  html,body{overflow:hidden}

  .app{
    display:grid;
    grid-template-columns:228px minmax(0,1fr) 300px;
    grid-template-rows:58px minmax(0,1fr);
    grid-template-areas:
      "rail head head"
      "rail main side";
    height:100vh;height:100dvh;
  }

  /* La coque mobile disparaît entièrement */
  .nav,.ticker-wrap,.bar{display:none!important}
  #ptr-pill{display:none!important}      /* pull-to-refresh : sans objet */

  /* ─────────────────────────────────────────────────────────────
     RAIL DE GAUCHE
     ───────────────────────────────────────────────────────────── */
  .dk-rail{
    grid-area:rail;
    display:flex;flex-direction:column;
    min-height:0;
    padding:14px 12px 12px;
    background:var(--s1);
    border-right:1px solid var(--line2);
  }

  .dk-brand{
    display:flex;align-items:center;gap:9px;
    padding:4px 8px 16px;cursor:pointer;
    font-family:'Barlow Condensed',sans-serif;
    font-size:18px;font-weight:900;letter-spacing:1.6px;
    color:var(--t1);
  }
  .dk-brand img{object-fit:contain;display:block;flex-shrink:0}
  .dk-brand:hover{opacity:.85}

  .dk-nav{display:flex;flex-direction:column;gap:2px}
  .dk-nav .bi{
    flex-direction:row;justify-content:flex-start;align-items:center;
    gap:12px;width:100%;padding:10px 12px;border-radius:11px;
    position:relative;color:var(--t2);
    transition:background .15s,color .15s;
  }
  .dk-nav .bi .bi-ico{color:inherit;transform:none;flex-shrink:0}
  .dk-nav .bi .bi-lbl{
    font-size:12.5px;letter-spacing:.2px;text-transform:none;
    font-weight:700;color:inherit;
  }
  .dk-nav .bi:hover{background:var(--s2);color:var(--t1)}
  .dk-nav .bi.on{background:var(--s2);color:var(--acc)}
  .dk-nav .bi.on .bi-ico,
  .dk-nav .bi.on .bi-lbl{color:var(--acc);transform:none}
  .dk-nav .bi.on::before{
    content:'';position:absolute;left:-12px;top:50%;
    transform:translateY(-50%);
    width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--acc);
  }
  /* Pastille « x en direct » sur l'entrée Live */
  .dk-nav-badge{
    margin-left:auto;display:none;align-items:center;gap:4px;
    font-size:9.5px;font-weight:900;letter-spacing:.3px;
    color:var(--red);background:rgba(229,72,77,.12);
    border:1px solid rgba(229,72,77,.28);
    border-radius:20px;padding:2px 7px;
  }
  .dk-nav-badge.on{display:inline-flex}
  .dk-nav-badge::before{
    content:'';width:5px;height:5px;border-radius:50%;background:var(--red);
    animation:blink 1.4s ease-in-out infinite;
  }

  .dk-rail-sep{height:1px;background:var(--line);margin:14px 4px}

  /* Carte promo VIP */
  .dk-vip{
    background:linear-gradient(150deg,rgba(232,165,39,.16),rgba(232,165,39,.05));
    border:1px solid rgba(232,165,39,.28);
    border-radius:14px;padding:13px 13px 12px;cursor:pointer;
    transition:border-color .15s,transform .15s var(--spring);
  }
  .dk-vip:hover{border-color:rgba(232,165,39,.55);transform:translateY(-1px)}
  .dk-vip-tag{
    display:inline-block;font-size:8.5px;font-weight:900;letter-spacing:.6px;
    color:#1a1305;background:var(--gold-2,#ffd76b);
    border-radius:5px;padding:2px 6px;margin-bottom:8px;
  }
  .dk-vip-title{
    font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:900;
    color:var(--gold-2,#ffd76b);line-height:1.1;margin-bottom:5px;
  }
  .dk-vip-txt{font-size:10.5px;line-height:1.45;color:var(--t2)}
  .dk-vip-price{
    margin-top:9px;font-size:11px;font-weight:800;color:var(--gold-2,#ffd76b);
  }
  .dk-vip.is-active{
    background:linear-gradient(150deg,rgba(34,212,106,.14),rgba(34,212,106,.04));
    border-color:rgba(34,212,106,.3);
  }
  .dk-vip.is-active .dk-vip-tag{background:var(--green,#22d46a);color:#04220f}
  .dk-vip.is-active .dk-vip-title,
  .dk-vip.is-active .dk-vip-price{color:var(--green,#22d46a)}

  /* Bas du rail */
  .dk-rail-foot{margin-top:auto;padding-top:14px}
  .dk-rail-btn{
    display:flex;align-items:center;gap:11px;width:100%;
    padding:10px 12px;border-radius:11px;
    background:none;border:none;cursor:pointer;
    color:var(--t2);font-family:'Barlow',sans-serif;
    font-size:12.5px;font-weight:700;
    transition:background .15s,color .15s;
  }
  .dk-rail-btn:hover{background:var(--s2);color:var(--t1)}
  .dk-rail-btn svg{flex-shrink:0}
  .dk-rail-copy{
    padding:10px 12px 0;font-size:9.5px;color:var(--t3);letter-spacing:.2px;
  }

  /* ─────────────────────────────────────────────────────────────
     EN-TÊTE
     ───────────────────────────────────────────────────────────── */
  .dk-head{
    grid-area:head;
    display:flex;align-items:center;gap:16px;
    padding:0 24px;
    background:var(--s1);
    border-bottom:1px solid var(--line2);
  }
  .dk-head-titles{min-width:0;flex-shrink:0}
  .dk-head-title{
    font-family:'Barlow Condensed',sans-serif;
    font-size:21px;font-weight:900;letter-spacing:.4px;
    color:var(--t1);margin:0;line-height:1.1;
    white-space:nowrap;
  }
  .dk-head-sub{
    font-size:10.5px;color:var(--t3);font-weight:600;margin-top:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  .dk-search{
    margin-left:auto;
    display:flex;align-items:center;gap:9px;
    width:268px;height:36px;padding:0 11px;
    background:var(--s2);border:1px solid var(--line2);border-radius:10px;
    transition:border-color .15s;
  }
  .dk-search:focus-within{border-color:var(--acc)}
  .dk-search svg{color:var(--t3);flex-shrink:0}
  .dk-search input{
    flex:1;min-width:0;background:none;border:none;outline:none;
    color:var(--t1);font-family:'Barlow',sans-serif;font-size:12.5px;
  }
  .dk-search input::placeholder{color:var(--t3)}
  .dk-kbd{
    flex-shrink:0;font-size:9px;font-weight:800;color:var(--t3);
    background:var(--s3);border:1px solid var(--line);
    border-radius:5px;padding:2px 5px;letter-spacing:.3px;
  }

  .dk-head-btn{
    display:flex;align-items:center;gap:7px;height:36px;padding:0 13px;
    background:var(--s2);border:1px solid var(--line2);border-radius:10px;
    color:var(--t1);font-family:'Barlow',sans-serif;
    font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
    transition:border-color .15s,background .15s;
  }
  .dk-head-btn:hover{border-color:var(--acc);background:var(--s3)}
  .dk-head-btn svg{flex-shrink:0;color:var(--acc)}

  .dk-avatar{
    display:flex;align-items:center;gap:8px;height:36px;padding:0 11px 0 5px;
    background:var(--s2);border:1px solid var(--line2);border-radius:20px;
    cursor:pointer;transition:border-color .15s;
  }
  .dk-avatar:hover{border-color:var(--acc)}
  .dk-avatar-img{
    width:26px;height:26px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--acc);color:var(--bg-on-acc,var(--bg));
    font-size:10.5px;font-weight:900;letter-spacing:.2px;
    background-size:cover;background-position:center;overflow:hidden;
  }
  .dk-avatar-img img{width:100%;height:100%;object-fit:cover;display:block}
  .dk-avatar-name{
    font-size:12px;font-weight:700;color:var(--t1);
    max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dk-avatar.is-vip .dk-avatar-img{background:var(--gold-2,#ffd76b);color:#1a1305}

  /* ─────────────────────────────────────────────────────────────
     CONTENU
     ───────────────────────────────────────────────────────────── */
  .scroll{
    grid-area:main;
    padding:20px 24px 48px;
    overscroll-behavior:contain;
  }

  /* Les listes de matchs passent en grille : plus de colonne unique
     de 375px perdue au milieu d'un écran de 1920. */
  .mlist{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
    align-items:start;gap:11px;padding:0 2px;
  }
  /* Sur la page Live, le titre de section est émis à l'intérieur du
     .mlist : en grille il occupait une cellule et décalait les cartes.
     Il doit toujours prendre la ligne entière. */
  .ad-prop-slot,.mlist>.sec-head,.mlist>.gap{grid-column:1/-1}

  .sec-head{padding:16px 2px 9px}
  .dash-wrap{padding:0 0 22px}
  .dash-hero-card{margin:0 2px 13px}
  .dash-manifesto-card,.dash-support-card,
  .dash-ads-card,.dash-admin-card{margin-left:2px;margin-right:2px}

  .mcard{transition:background .15s,transform .15s var(--spring),border-color .15s}
  .mcard:hover{background:var(--s2);border-color:var(--line2);transform:translateY(-1px)}
  .news-card:hover{background:var(--s2);transform:translateY(-2px)}


  /* ─────────────────────────────────────────────────────────────
     COLONNE DE DROITE
     ───────────────────────────────────────────────────────────── */
  .dk-side{
    grid-area:side;
    display:flex;flex-direction:column;gap:10px;min-height:0;
    padding:14px 14px 14px 0;
  }
  .dk-panel{
    display:flex;flex-direction:column;min-height:0;
    background:var(--s1);border:1px solid var(--line2);border-radius:14px;
    overflow:hidden;
  }
  .dk-panel-scores{flex:1 1 42%;min-height:160px}
  .dk-panel-tv{flex:1 1 58%}
  .dk-panel-head{
    display:flex;align-items:center;gap:7px;flex-shrink:0;
    padding:11px 13px;border-bottom:1px solid var(--line);
    font-family:'Barlow Condensed',sans-serif;
    font-size:13px;font-weight:900;letter-spacing:.9px;
    text-transform:uppercase;color:var(--t1);
  }
  .dk-panel-head svg{color:var(--t3);flex-shrink:0}
  .dk-panel-count{
    margin-left:auto;font-family:'Barlow',sans-serif;
    font-size:9.5px;font-weight:800;letter-spacing:.3px;
    color:var(--t3);text-transform:none;
  }
  .dk-live-dot{
    width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0;
    animation:blink 1.4s ease-in-out infinite;
  }
  .dk-panel-body{flex:1;min-height:0;overflow-y:auto;padding:5px}
  .dk-panel-empty{
    padding:20px 12px;text-align:center;
    font-size:11px;color:var(--t3);font-weight:600;
  }

  /* Une ligne de score */
  .dk-score{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:4px 8px;padding:8px 9px;border-radius:10px;cursor:pointer;
    transition:background .15s;
  }
  .dk-score:hover{background:var(--s2)}
  .dk-score-top{
    grid-column:1/-1;display:flex;align-items:center;gap:6px;
    font-size:9px;font-weight:800;letter-spacing:.3px;color:var(--t3);
    text-transform:uppercase;margin-bottom:3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .dk-score-min{
    margin-left:auto;color:var(--red);flex-shrink:0;
    display:flex;align-items:center;gap:4px;
  }
  .dk-score-min::before{
    content:'';width:4px;height:4px;border-radius:50%;background:var(--red);
    animation:blink 1.4s ease-in-out infinite;
  }
  .dk-score-ft{margin-left:auto;color:var(--t3);flex-shrink:0}
  .dk-score-row{
    display:flex;align-items:center;gap:7px;min-width:0;
    font-size:12px;font-weight:700;color:var(--t1);
  }
  .dk-score-row img{
    width:15px;height:15px;object-fit:contain;flex-shrink:0;
  }
  .dk-score-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dk-score-goals{
    font-family:'Barlow Condensed',sans-serif;
    font-size:14px;font-weight:900;color:var(--t1);
    justify-self:end;line-height:1.15;
  }
  .dk-score.is-fin .dk-score-row,
  .dk-score.is-fin .dk-score-goals{color:var(--t2)}

  /* Une chaîne TV */
  .dk-chan{
    display:flex;align-items:center;gap:9px;
    padding:8px 9px;border-radius:10px;cursor:pointer;
    transition:background .15s;
  }
  .dk-chan:hover{background:var(--s2)}
  .dk-chan-badge{
    width:30px;height:24px;border-radius:7px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:9.5px;font-weight:900;letter-spacing:.2px;
    border:1px solid;
  }
  .dk-chan-name{
    flex:1;min-width:0;font-size:12px;font-weight:700;color:var(--t1);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dk-chan-play{color:var(--t3);flex-shrink:0;display:flex}
  .dk-chan:hover .dk-chan-play{color:var(--acc)}
  .dk-chan-group{
    padding:9px 10px 5px;font-size:9px;font-weight:900;letter-spacing:.7px;
    text-transform:uppercase;color:var(--t3);
  }

  /* Sur grand écran la recherche vit dans l'en-tête : le champ de la
     page Recherche ferait doublon. */
  .search-box{display:none}
}

/* ─ 1360px et plus : un peu plus d'air ─ */
@media (min-width:1360px){
  .app{grid-template-columns:244px minmax(0,1fr) 322px}
  .scroll{padding:24px 32px 56px}
  .dk-head{padding:0 32px}
  .mlist{grid-template-columns:repeat(auto-fill,minmax(348px,1fr));gap:12px}
}

/* ─ 1520px et plus : colonne de droite élargie (comme la maquette) ─ */
@media (min-width:1520px){
  .app{grid-template-columns:256px minmax(0,1fr) 372px}
  .dk-search{width:320px}
}

@media (min-width:1800px){
  .scroll{padding:28px 44px 64px}
  .mlist{grid-template-columns:repeat(auto-fill,minmax(372px,1fr));gap:14px}
}


/* ── Défilement du panneau sur mobile / tablette ──────────────────
   Avant : chaque bloc du panneau avait son propre ascenseur
   (.vp-panel-top, .details-section, #chat-section) pendant que
   .vp-panel lui-même coupait le débordement. Résultat mesuré à
   412×900 sur une chaîne TV : .vp-panel-top prenait 312px sur les
   621px du panneau, gardait flex-shrink:0, et comme les onglets
   Détails / Chat sont masqués dans ce cas, plus RIEN ne défilait —
   tout ce qui dépassait (carte conseil, buts, résumé) était
   inatteignable. Sur un match, l'inverse : .vp-panel-top mangeait
   toute la hauteur et .details-section tombait à 0px.

   Ici on fait l'inverse, et c'est le comportement naturel d'une page
   mobile : UN SEUL ascenseur, celui du panneau. Les blocs internes
   reprennent leur hauteur réelle et s'enchaînent. La vidéo reste
   accrochée en haut (.vp-stage est flex-shrink:0), on descend sous
   elle comme sur n'importe quelle appli de direct.
   ≥1024px garde la disposition colonne du bloc DESKTOP plus bas. */
@media (max-width:1023px){
  .vp-panel{
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .vp-panel::-webkit-scrollbar{display:none}

  /* Plus de hauteur imposée ni d'ascenseur imbriqué : les blocs
     prennent la place qu'il leur faut, le panneau fait défiler. */
  .vp-panel-top{max-height:none;overflow:visible;flex:0 0 auto}
  .details-section{flex:0 0 auto;overflow:visible;min-height:0}
  .chat-section{flex:0 0 auto;overflow:visible;min-height:0}

  /* La bascule Détails / Chat reste accessible même descendu. */
  .stream-tabs{position:sticky;top:0;z-index:5;background:var(--bg)}

  /* Le fil du chat garde son ascenseur à lui : sans borne il
     pousserait la zone de saisie hors de portée à chaque message. */
  .chat-messages{flex:0 0 auto;max-height:55vh;overflow-y:auto}

  /* ── Quand le chat est à l'écran ──────────────────────────────
     Un chat ne se lit pas comme un article : la barre de saisie doit
     rester collée en bas, pas se retrouver sous le titre du match.
     Le panneau redevient donc une colonne fixe, le chat prend la
     hauteur restante, et l'en-tête du match se contente d'un tiers de
     la place — avec son propre ascenseur s'il est trop long. */
  .vp-panel.vp-chat{overflow:hidden}
  .vp-panel.vp-chat .vp-panel-top{
    flex:0 1 auto;min-height:0;max-height:38%;overflow-y:auto;
  }
  .vp-panel.vp-chat .chat-section{flex:1 1 auto;min-height:0;overflow:hidden}
  .vp-panel.vp-chat .chat-messages{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
  /* L'encart « réservé aux VIP » remplace la conversation : il occupe
     la place qu'elle aurait prise, centré. */
  .vp-panel.vp-chat .chat-verrou{flex:1 1 auto;min-height:0;overflow-y:auto}
}

/* ═══════════════════════════════════════════════════════
   CHAT VERROUILLÉ — l'invitation à passer VIP
   ═══════════════════════════════════════════════════════ */
.chat-verrou{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:26px 22px;gap:2px;
}
.chat-verrou-ico{
  width:46px;height:46px;border-radius:50%;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(212,184,74,.12);border:1px solid rgba(212,184,74,.4);
  color:#d4b84a;
}
.chat-verrou-t{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t1);
}
.chat-verrou-d{
  font-size:12.5px;line-height:1.6;color:var(--t2);
  margin:8px 0 0;max-width:30em;
}
.chat-verrou-bt{
  margin-top:18px;width:100%;max-width:280px;
  padding:13px 18px;border:none;border-radius:11px;
  background:linear-gradient(135deg,#d4b84a,#f0d878);color:#171200;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;
  cursor:pointer;box-shadow:0 5px 18px rgba(212,184,74,.2);
  transition:transform .15s,box-shadow .15s;
}
.chat-verrou-bt:active{transform:scale(.96);box-shadow:0 2px 8px rgba(212,184,74,.12)}
.chat-verrou-p{margin-top:12px;font-size:11.5px;color:var(--t3)}
.chat-verrou-lien{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--acc);font-size:11.5px;font-weight:700;text-decoration:underline;
}


/* ═══════════════════════════════════════════════════════════════
   DESKTOP — LECTEUR DE MATCH (≥1024px)
   Une fenêtre centrée sur fond assombri : la barre du lecteur en haut,
   l'image dessous, le panneau (détails / chat) sur toute la hauteur à
   droite. Elle s'ouvre en PETIT ; le bouton « Agrandir » de la barre
   la fait grandir jusqu'à remplir l'écran, le plein écran reste à part.

   C'est une grille, plus une rangée flex. En rangée, la barre d'un flux
   dlive (width:100%, order:-1, faite pour passer AU-DESSUS de l'image
   sur mobile) devenait un troisième élément de la ligne : elle poussait
   l'image hors de l'écran à droite, le panneau avec, et la fenêtre
   s'affichait coupée en deux. En grille, chaque bloc a sa case.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:1024px){

  /* On calcule la HAUTEUR de l'image et on en déduit la largeur : le
     lecteur (16/9) et le panneau ont ainsi toujours la même hauteur.
     --vph-grand : la fenêtre remplit l'écran. 104px = marges du fond +
     la barre du lecteur au-dessus de l'image.
     --vph-petit : la taille d'ouverture, posée au milieu. */
  .vp-ov{
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    padding:28px;
    --vp-side:340px;
    --vph-grand:min( calc((100vw - var(--vp-side) - 90px) * 9 / 16),
                     calc(100vh - 104px),
                     664px );
    --vph-petit:min( var(--vph-grand), 54vh, 420px );
    --vph:var(--vph-petit);
    --vpw:calc(var(--vph) * 16 / 9);
  }
  .vp-ov.vp-grand{--vph:var(--vph-grand)}

  .vp-ov.open:not(.vp-fullscreen){
    display:grid;
    grid-template-columns:var(--vpw) var(--vp-side);
    grid-template-rows:auto var(--vph);
    align-content:center;justify-content:center;
    /* Le passage petit ↔ grand glisse au lieu de sauter. */
    transition:grid-template-columns .42s cubic-bezier(.16,1,.3,1),
               grid-template-rows .42s cubic-bezier(.16,1,.3,1);
  }

  .vp-ov.open:not(.vp-fullscreen) .vp-stage{
    grid-column:1;grid-row:2;
    width:auto;height:auto;min-width:0;min-height:0;
    max-height:none;aspect-ratio:auto;flex:none;
    border-radius:16px 0 0 16px;
    box-shadow:0 24px 70px -20px rgba(0,0,0,.9);
  }

  .vp-ov.open:not(.vp-fullscreen) .vp-panel{
    grid-column:2;grid-row:1 / span 2;
    width:auto;height:auto;min-height:0;max-height:none;flex:none;
    background:var(--s1);
    border:1px solid var(--line2);border-left:none;
    border-radius:0 16px 16px 0;
    overflow:hidden;
    /* Le panneau prend la hauteur de la fenêtre, jamais l'inverse. Sans
       ça, sa hauteur de contenu (compos, chat) agrandissait la première
       rangée de la grille et la fenêtre s'étirait vers le bas. */
    contain:size;
  }

  /* Flux classique : la barre flotte sur l'image, dans la même case
     qu'elle — plus au coin de l'écran entier comme avant. */
  .vp-ov.open:not(.vp-fullscreen) .vp-topbar{
    grid-column:1;grid-row:2;align-self:start;
    position:relative;top:auto;left:auto;right:auto;
    margin:10px 58px 0 10px;min-width:0;z-index:7;
  }
  /* Page externe : une vraie barre au-dessus de l'image, jamais dessus
     (sinon notre × retombe sur celui de leurs pubs). */
  .vp-ov.vp-embed.open:not(.vp-fullscreen) .vp-topbar{
    grid-row:1;margin:0;width:auto;align-self:stretch;
    border:1px solid var(--line2);border-right:none;border-bottom-color:var(--line);
    border-radius:16px 0 0 0;
  }
  .vp-ov.vp-embed.open:not(.vp-fullscreen) .vp-stage{border-radius:0 0 0 16px}

  /* En haut, l'info du match prend juste la place qu'il lui faut :
     avec flex:1 elle laissait un grand trou entre les boutons et les
     onglets Détails / Chat. Elle ne rétrécit plus (dans la petite
     fenêtre, les compos l'écrasaient jusqu'à couper « En direct »),
     mais ne dépasse pas 45 % : le reste va aux détails et au chat. */
  .vp-panel-top{max-height:45%;flex:0 0 auto;overflow-y:auto}
  #stream-tabs{flex:0 0 auto}

  /* Détails et chat occupent la hauteur restante, avec leur propre scroll */
  .details-section{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
  .chat-section{flex:1 1 auto;min-height:0}
  .chat-messages{max-height:none}

  /* Une seule croix : celle du lecteur, posée sur la vidéo.
     Celle du panneau faisait doublon juste à côté. */
  .vp-close,#vp-close{
    position:absolute;top:12px;right:12px;z-index:120;
    width:36px;height:36px;border-radius:50%;
    background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .vp-close:hover,#vp-close:hover{background:rgba(0,0,0,.75)}
  .vp-panel-x{display:none}

  /* Le bouton Agrandir / Réduire n'existe que sur ordinateur, hors
     plein écran. Il affiche l'action qu'il fera. */
  .vp-tb-pc{display:flex}
  .vp-tb-pc .ico-reduire{display:none}
  .vp-ov.vp-grand .vp-tb-pc .ico-agrandir{display:none}
  .vp-ov.vp-grand .vp-tb-pc .ico-reduire{display:block}
  .vp-ov.vp-fullscreen .vp-tb-pc{display:none}

  /* Terrain : plus compact, la colonne est étroite */
  .lu-pitch{aspect-ratio:2/2.6}

  /* Mode plein écran : on reprend tout l'espace. En colonne : la barre
     d'un flux dlive passe au-dessus de l'image, pas à côté. */
  .vp-ov.vp-fullscreen{padding:0;background:#000;backdrop-filter:none}
  .vp-ov.vp-fullscreen.open{flex-direction:column}
  .vp-ov.vp-fullscreen .vp-stage{
    width:100vw;height:100vh;max-height:100vh;aspect-ratio:auto;border-radius:0;
  }
  .vp-ov.vp-fullscreen.vp-embed .vp-stage{width:100%;height:auto}
  .vp-ov.vp-fullscreen .vp-panel{display:none}
}

/* Écrans larges : fenêtre plus généreuse */
@media (min-width:1360px){
  .vp-ov{--vp-side:400px}
}
@media (min-width:1600px){
  .vp-ov{--vp-side:440px;
    --vph-grand:min( calc((100vw - var(--vp-side) - 90px) * 9 / 16),
                     calc(100vh - 104px),
                     799px );
    --vph-petit:min( var(--vph-grand), 54vh, 460px );
  }
}

/* ─ Confort de lecture PC : survol sur les éléments cliquables ─
   (uniquement là où il y a un vrai pointeur, jamais sur tactile) */
@media (hover:hover) and (pointer:fine){
  .mcard:hover,.dash-preview-row:hover,.dash-feat:hover,
  .news-card:hover,.pf-list-item:hover,.dash-comp-pill:hover{
    border-color:var(--acc);transform:translateY(-1px);
  }
  .mcard,.dash-preview-row,.dash-feat,.news-card,.pf-list-item,.dash-comp-pill{
    transition:border-color .15s,transform .15s,background .15s;
  }
  .vp-src-btn:hover{background:rgba(255,255,255,.14)}
  .dash-section-link:hover{text-decoration:underline}
  /* Barres de défilement discrètes, cohérentes avec le thème sombre */
  *::-webkit-scrollbar{width:10px;height:10px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:var(--s3);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
  *::-webkit-scrollbar-thumb:hover{background:var(--line2);background-clip:padding-box}
}

/* ─ Carrousel actualités : adaptations grand écran ─ */
@media (min-width:1024px){
  .dash-news-list{padding-left:4px;padding-right:4px;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 40px),transparent 100%);
  }
  .news-card{flex:0 0 300px;width:300px}
  .news-card-featured{flex:0 0 330px;width:330px}
}
@media (hover:hover) and (pointer:fine){
  .news-card:hover{transform:translateY(-3px);border-color:var(--acc)}
  /* Barre de défilement visible au survol du carrousel, discrète sinon */
  .dash-news-list:hover{scrollbar-width:thin}
}

/* ═══════════════════════════════════════════════════
   SIGNALEMENTS — formulaire utilisateur
═══════════════════════════════════════════════════ */
.pf-prio-tag{background:rgba(232,165,39,.14);border:1px solid rgba(232,165,39,.3);color:var(--gold-2,#ffd76b);font-size:9px;font-weight:800;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;flex:0 0 auto}

.fb-ov{position:fixed;inset:0;z-index:2200;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;padding:0}
.fb-card{width:100%;max-width:480px;max-height:92vh;overflow-y:auto;background:var(--s1);border:1px solid var(--line2);border-radius:20px 20px 0 0;padding:20px 18px 26px;animation:fbUp .24s var(--spring) both}
@keyframes fbUp{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.fb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.fb-head-title{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:900;color:var(--t1)}
.fb-close{width:28px;height:28px;border-radius:50%;background:var(--s3);border:none;color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer}

.fb-prio{display:flex;align-items:center;gap:8px;background:rgba(232,165,39,.1);border:1px solid rgba(232,165,39,.28);border-radius:12px;padding:9px 12px;margin-bottom:14px;font-size:11.5px;color:var(--gold-2,#ffd76b);font-weight:600}
.fb-prio svg{flex-shrink:0}

.fb-types{display:flex;gap:7px;margin-bottom:16px}
.fb-type-btn{flex:1;padding:10px 4px;border-radius:12px;background:var(--s2);border:1.5px solid var(--line);color:var(--t2);font-size:12px;font-weight:700;cursor:pointer;font-family:'Barlow',sans-serif;transition:border-color .15s,background .15s}
.fb-type-btn.on{border-color:var(--acc);background:var(--s3);color:var(--t1)}

.fb-label{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin:0 0 7px}
.fb-label-hint{text-transform:none;letter-spacing:0;font-weight:600;opacity:.7}
.fb-input,.fb-textarea{width:100%;background:var(--s2);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;color:var(--t1);font-size:13.5px;font-family:'Barlow',sans-serif;margin-bottom:15px}
.fb-input:focus,.fb-textarea:focus{outline:none;border-color:var(--acc)}
.fb-textarea{resize:vertical;line-height:1.5;min-height:96px}

.fb-shots{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.fb-shot{position:relative;width:72px;height:72px;border-radius:11px;overflow:hidden;border:1px solid var(--line2);flex-shrink:0}
.fb-shot img{width:100%;height:100%;object-fit:cover;display:block}
.fb-shot-del{position:absolute;top:2px;right:2px;width:19px;height:19px;border-radius:50%;background:rgba(0,0,0,.75);border:none;color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fb-shot-add{width:72px;height:72px;border-radius:11px;background:var(--s2);border:1.5px dashed var(--line2);color:var(--t3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700;cursor:pointer;flex-shrink:0;font-family:'Barlow',sans-serif}

.fb-submit{width:100%;background:var(--acc);color:var(--bg);border:none;border-radius:13px;padding:14px;font-size:14.5px;font-weight:800;cursor:pointer;transition:transform .15s var(--spring)}
.fb-submit:active{transform:scale(.97)}
.fb-submit:disabled{opacity:.55}
.fb-foot{text-align:center;font-size:10.5px;color:var(--t3);margin-top:11px;line-height:1.4}

/* ═══════════════════════════════════════════════════
   ADMIN — onglet Retours
═══════════════════════════════════════════════════ */
.adm-tab-dot{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:5px;border-radius:20px;background:var(--red);color:#fff;font-size:9px;font-weight:900;vertical-align:middle}

.fba-wrap{padding:14px 14px 40px;display:flex;flex-direction:column;gap:11px}
.fba-filters{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.fba-filters::-webkit-scrollbar{display:none}
.fba-filter{flex-shrink:0;padding:7px 14px;border-radius:20px;background:var(--s2);border:1px solid var(--line);color:var(--t3);font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Barlow',sans-serif}
.fba-filter.on{background:var(--acc);color:var(--bg);border-color:var(--acc)}

.fba-card{background:var(--s1);border:1px solid var(--line2);border-radius:15px;padding:14px}
.fba-done{opacity:.55}
.fba-top{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.fba-type{font-size:10.5px;font-weight:800;color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent);border:1px solid color-mix(in srgb,var(--tc) 32%,transparent);padding:3px 9px;border-radius:20px}
.fba-vip{font-size:9px;font-weight:900;letter-spacing:.4px;color:var(--gold-2,#ffd76b);background:rgba(232,165,39,.14);border:1px solid rgba(232,165,39,.32);padding:2px 7px;border-radius:20px}
.fba-date{margin-left:auto;font-size:10.5px;color:var(--t3)}
.fba-title{font-size:14px;font-weight:800;color:var(--t1);margin-bottom:6px;line-height:1.3}
.fba-text{font-size:12.5px;color:var(--t2);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.fba-shots{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.fba-shots img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--line2);cursor:zoom-in}
.fba-meta{display:flex;gap:5px;flex-wrap:wrap;font-size:10.5px;color:var(--t3);margin-top:11px}
.fba-actions{display:flex;gap:7px;margin-top:12px}
.fba-btn{flex:1;padding:9px;border-radius:10px;background:var(--s2);border:1px solid var(--line2);color:var(--t1);font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Barlow',sans-serif}
.fba-btn-ok{background:rgba(34,212,106,.12);border-color:rgba(34,212,106,.3);color:var(--green,#22d46a)}
.fba-btn-del{flex:0 0 auto;padding:9px 14px;color:var(--red);border-color:rgba(229,72,77,.3);background:rgba(229,72,77,.08)}

@media (min-width:1024px){
  .fb-ov{align-items:center;padding:28px}
  .fb-card{border-radius:20px;max-height:86vh}
  .fba-wrap{max-width:760px;margin:0 auto}
}

/* ── Sources VIP dans le sélecteur du lecteur ── */
.vp-src-btn.vp-src-vip{
  background:linear-gradient(135deg,rgba(232,165,39,.18),rgba(232,165,39,.08));
  border-color:rgba(232,165,39,.45);color:var(--gold-2,#ffd76b)
}
.vp-src-btn.vp-src-vip.active{background:linear-gradient(135deg,#e8a527,#c98c17);color:#1a1305;border-color:#e8a527}
.vp-src-btn.vp-src-locked{opacity:.62}
.vp-src-badge{font-size:11px;line-height:1}
.vp-src-q{font-size:8.5px;font-weight:900;letter-spacing:.4px;background:rgba(232,165,39,.25);
  color:var(--gold-1,#fff6d8);border-radius:7px;padding:1px 5px}
.vp-src-btn.vp-src-vip.active .vp-src-q{background:rgba(0,0,0,.22);color:#1a1305}

/* ── Case "source VIP" dans le panel admin ── */
.adm-vip-check{display:flex;align-items:center;gap:9px;margin:9px 0 4px;padding:9px 11px;border-radius:11px;
  background:rgba(232,165,39,.07);border:1px solid rgba(232,165,39,.22);cursor:pointer}
.adm-vip-check input{width:16px;height:16px;accent-color:#e8a527;flex-shrink:0;cursor:pointer}
.adm-vip-check span{font-size:11.5px;font-weight:600;color:var(--gold-2,#ffd76b);line-height:1.35}

/* ═══════════════════════════════════════════════════
   CONSOLE DE DÉBOGAGE INTÉGRÉE (admins / ?debug=1)
═══════════════════════════════════════════════════ */
.dbg-fab{
  position:fixed;right:14px;bottom:88px;z-index:3000;
  width:42px;height:42px;border-radius:50%;
  background:var(--s2);border:1px solid var(--line2);color:var(--t2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.45);opacity:.75;
  transition:opacity .15s,transform .15s var(--spring)
}
.dbg-fab:active{transform:scale(.9)}
.dbg-fab:hover{opacity:1}
/* Pastille rouge dès qu'une erreur ou un avertissement est capturé */
.dbg-fab.dbg-has-err{opacity:1;border-color:var(--red);color:var(--red)}
.dbg-fab.dbg-has-err::after{
  content:'';position:absolute;top:1px;right:1px;width:10px;height:10px;
  border-radius:50%;background:var(--red);border:2px solid var(--bg);
  animation:blink 1.4s ease-in-out infinite
}

.dbg-ov{position:fixed;inset:0;z-index:3001;background:rgba(0,0,0,.78);
  display:flex;align-items:flex-end;justify-content:center}
.dbg-panel{width:100%;max-width:760px;height:72vh;display:flex;flex-direction:column;
  background:#0a0a0c;border:1px solid var(--line2);border-radius:16px 16px 0 0;overflow:hidden}
.dbg-head{display:flex;align-items:center;gap:7px;padding:11px 12px;
  border-bottom:1px solid var(--line);background:var(--s1);flex-shrink:0}
.dbg-title{flex:1;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:900;
  text-transform:uppercase;letter-spacing:1px;color:var(--t1)}
.dbg-btn{background:var(--s3);border:1px solid var(--line2);color:var(--t1);
  font-size:11px;font-weight:700;padding:6px 11px;border-radius:8px;cursor:pointer;
  font-family:'Barlow',sans-serif}
.dbg-btn:active{opacity:.6}
.dbg-close{padding:6px 10px;color:var(--t3)}

.dbg-body{flex:1;overflow-y:auto;padding:8px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px;line-height:1.45;-webkit-overflow-scrolling:touch}
.dbg-line{display:flex;gap:7px;padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.045);
  word-break:break-word}
.dbg-time{color:var(--t3);flex-shrink:0;opacity:.6}
.dbg-txt{flex:1;white-space:pre-wrap;color:var(--t2)}
.dbg-error .dbg-txt{color:#ff6b6b}
.dbg-warn  .dbg-txt{color:#f5c518}
.dbg-info  .dbg-txt{color:#7fd4ff}
.dbg-empty{padding:26px 0;text-align:center;color:var(--t3);font-size:12px}

/* Sur grand écran, le panneau flotte au centre */
@media (min-width:1024px){
  .dbg-ov{align-items:center;padding:28px}
  .dbg-panel{border-radius:16px;height:76vh}
  .dbg-fab{bottom:24px}
}

/* ═══════════════════════════════════════════════════
   ADMIN — ID activateur + recherche utilisateur
═══════════════════════════════════════════════════ */
/* Ligne "Activée par" sous une clé VIP utilisée */
.adm-vip-key-user{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.avku-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3)}
.avku-uid{background:var(--s3);border:1px solid var(--line2);color:var(--acc);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  padding:3px 8px;border-radius:7px;cursor:pointer;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avku-uid:active{opacity:.6}
.avku-mail{font-size:10.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Adresse masquée : on la dit absente plutôt que de laisser un trou,
   sinon un admin croit à un bug d'affichage et cherche ailleurs. */
.avku-mail-off{font-style:italic;opacity:.65}

/* Bloc de recherche */
.adm-lookup-block{background:var(--s1);border:1px solid var(--line2);border-radius:14px;
  padding:14px;margin:0 14px 12px}
.adm-lookup-input{flex:1;min-width:0;background:var(--s2);border:1px solid var(--line2);
  border-radius:10px;padding:10px 12px;color:var(--t1);font-size:12.5px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.adm-lookup-input:focus{outline:none;border-color:var(--acc)}
.adm-lookup-result{margin-top:12px}
.adm-lk-loading{display:flex;justify-content:center;padding:16px 0}
.adm-lk-hint{font-size:11.5px;color:var(--t3);text-align:center;padding:10px 0}
.adm-lk-err{font-size:12px;color:var(--red);text-align:center;padding:12px 0;font-weight:600}

.adm-lk-card{background:var(--s2);border:1px solid var(--line2);border-radius:12px;padding:13px}
.adm-lk-head{display:flex;align-items:center;justify-content:space-between;gap:9px;
  margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.adm-lk-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;
  color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-lk-vip{flex-shrink:0;font-size:9px;font-weight:900;letter-spacing:.5px;
  color:var(--gold-2,#ffd76b);background:rgba(232,165,39,.14);
  border:1px solid rgba(232,165,39,.32);padding:3px 9px;border-radius:20px}
.adm-lk-novip{flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--t3);
  background:var(--s3);border:1px solid var(--line);padding:3px 9px;border-radius:20px}
.adm-lk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 0;font-size:12px;border-bottom:1px solid rgba(255,255,255,.04)}
.adm-lk-row:last-of-type{border-bottom:none}
.adm-lk-row span{color:var(--t3);flex-shrink:0}
.adm-lk-row b{color:var(--t1);font-weight:600;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.adm-lk-keys{margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.adm-lk-keys-t{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);margin-bottom:7px}
.adm-lk-key{display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:5px 0;font-size:11px}
.adm-lk-key code{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--acc);font-size:10.5px}
.adm-lk-key span{color:var(--t3);font-size:10.5px;flex-shrink:0}
.adm-lk-admin-bt{display:block;width:100%;margin-top:12px;padding:10px 12px;border-radius:10px;
  font-size:12.5px;font-weight:800;cursor:pointer;color:var(--acc);
  background:rgba(var(--acc-rgb,200,245,42),.08);border:1px solid rgba(var(--acc-rgb,200,245,42),.3)}
.adm-lk-admin-bt:disabled{opacity:.5;cursor:default}
.adm-lk-admin-ok{margin-top:12px;text-align:center;font-size:12px;font-weight:800;color:var(--green,#2ecc71)}


/* ═══════════════════════════════════════════════════════════════
   DESKTOP — SURCOUCHES (≥1024px)
   Les overlays étaient pensés pour un écran de 375px : en plein
   écran sur 1920px ils devenaient illisibles (une colonne de texte
   perdue au milieu du vide). Ici on les rend soit en fenêtre
   centrée, soit en tiroir latéral. Le mobile n'est pas touché.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:1024px){

  /* ─ Paramètres & fiche club : fenêtre centrée ─ */
  .sett-ov,.club-ov{
    background:rgba(0,0,0,.78);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    align-items:center;justify-content:center;padding:32px;
  }
  .sett-ov.open,.club-ov.open{flex-direction:row}
  .sett-inner,.club-inner{
    width:min(780px,100%);height:min(88vh,100%);
    background:var(--bg);
    border:1px solid var(--line2);border-radius:18px;overflow:hidden;
    box-shadow:0 30px 80px -24px rgba(0,0,0,.9);
  }
  .sett-body,.club-body{padding-left:26px;padding-right:26px}
  .sett-body::-webkit-scrollbar,.club-body::-webkit-scrollbar{display:block;width:10px}

  /* Colonne de lecture confortable plutôt qu'un texte étiré */
  .sett-body>*{max-width:620px;margin-left:auto;margin-right:auto}

  /* ─ Chaînes TV & VIP : tiroir latéral droit (l'animation
       translateX existante devient un vrai slide-in de tiroir) ─ */
  .tv-group-ov,.vip-ov{
    left:auto;width:min(640px,100%);
    border-left:1px solid var(--line2);
    box-shadow:-24px 0 70px -22px rgba(0,0,0,.85);
  }

  /* ─ Multi-stream : vraie grille 2×2 au lieu d'un empilement ─ */
  .multi-grid.g2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
  .multi-grid.g3,.multi-grid.g4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .multi-drawer{
    left:auto;right:0;width:440px;
    max-height:calc(100vh - 52px);
    border-radius:16px 0 0 0;border-left:1px solid var(--line2);
  }

  /* ─ Fiche joueur : petite fenêtre centrée ─ */
  .player-bio-ov{align-items:center;justify-content:center;padding:32px}
}

/* ═══════════════════════════════════════════════════════════════════════
   ANNONCES — la carte en tête de l'accueil (annonces.js)

   Elle doit se voir avant tout le reste : un liseré de lumière tourne
   autour, un halo respire derrière, un reflet balaie la surface de temps
   en temps. Chaque type d'annonce a sa couleur (--tc), que tout reprend :
   liseré, halo, étiquette, bouton d'envoi.

   Les couleurs vives passent mal sur fond clair : le thème clair a ses
   propres teintes, plus sombres, pour rester lisibles.
   ═══════════════════════════════════════════════════════════════════════ */

@property --ann-a{syntax:'<angle>';inherits:false;initial-value:0deg}

[data-tag="annonce"]  {--tc:#e8ff47;--tc-rgb:232,255,71}
[data-tag="nouveaute"]{--tc:#5ec9ff;--tc-rgb:94,201,255}
[data-tag="important"]{--tc:#ff5b5b;--tc-rgb:255,91,91}
[data-tag="match"]    {--tc:#22d46a;--tc-rgb:34,212,106}
[data-tag="evenement"]{--tc:#c76bff;--tc-rgb:199,107,255}
[data-theme="light"] [data-tag="annonce"]  {--tc:#6a7800;--tc-rgb:106,120,0}
[data-theme="light"] [data-tag="nouveaute"]{--tc:#0a73b8;--tc-rgb:10,115,184}
[data-theme="light"] [data-tag="important"]{--tc:#c81e1e;--tc-rgb:200,30,30}
[data-theme="light"] [data-tag="match"]    {--tc:#11803f;--tc-rgb:17,128,63}
[data-theme="light"] [data-tag="evenement"]{--tc:#8430cf;--tc-rgb:132,48,207}

/* ── La carte ─────────────────────────────────────────────────────── */
.ann{position:relative;margin:12px 14px 12px;border-radius:22px;padding:1.5px;isolation:isolate}
/* Le liseré : un dégradé conique qui tourne, vu à travers 1,5 px. */
.ann::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:conic-gradient(from var(--ann-a),
    rgba(var(--tc-rgb),.95),rgba(var(--tc-rgb),.06) 20%,rgba(255,255,255,.18) 34%,
    rgba(var(--tc-rgb),.06) 50%,rgba(var(--tc-rgb),.8) 68%,rgba(var(--tc-rgb),.06) 86%,rgba(var(--tc-rgb),.95));
  animation:annTour 7s linear infinite}
/* Le halo : le même dégradé, flouté derrière la carte. */
.ann::after{content:'';position:absolute;inset:6px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--ann-a),rgba(var(--tc-rgb),.55),transparent 30%,rgba(var(--tc-rgb),.4) 60%,transparent 85%,rgba(var(--tc-rgb),.55));
  filter:blur(22px);opacity:.45;animation:annTour 7s linear infinite,annRespire 4.5s ease-in-out infinite}
@keyframes annTour{to{--ann-a:360deg}}
@keyframes annRespire{0%,100%{opacity:.3;transform:scale(.98)}50%{opacity:.55;transform:scale(1.02)}}

.ann-cadre{position:relative;z-index:1;border-radius:20.5px;overflow:hidden;padding:16px 16px 12px;
  background:
    radial-gradient(120% 85% at 0% 0%,rgba(var(--tc-rgb),.14),transparent 55%),
    radial-gradient(80% 60% at 100% 100%,rgba(var(--tc-rgb),.06),transparent 60%),
    var(--s2)}
[data-theme="light"] .ann-cadre{background:
    radial-gradient(120% 85% at 0% 0%,rgba(var(--tc-rgb),.10),transparent 55%),var(--s1)}
.ann-lueur{position:absolute;width:240px;height:240px;top:-130px;right:-90px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--tc-rgb),.24),transparent 66%);animation:annFlotte 9s ease-in-out infinite alternate}
@keyframes annFlotte{to{transform:translate(-40px,30px) scale(1.15)}}
/* Le reflet qui balaie la carte toutes les quelques secondes. */
.ann-reflet{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.075) 48%,rgba(255,255,255,.02) 54%,transparent 62%);
  transform:translateX(-130%);animation:annBalaye 8s cubic-bezier(.5,0,.3,1) 1.4s infinite}
[data-theme="light"] .ann-reflet{background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.75) 48%,transparent 62%)}
@keyframes annBalaye{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* ── En-tête ── */
.ann-tete{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ann-avatar{position:relative;width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--s3)}
.ann-avatar img{width:24px;height:24px;object-fit:contain;position:relative;z-index:1}
.ann-avatar-anneau{position:absolute;inset:-2.5px;border-radius:50%;
  background:conic-gradient(from var(--ann-a),var(--tc),transparent 35%,var(--tc) 62%,transparent 88%,var(--tc));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.2px),#000 calc(100% - 2px));
  animation:annTour 3.2s linear infinite}
.ann-qui{flex:1;min-width:0}
.ann-nom{display:flex;align-items:center;gap:4px;font-weight:800;font-size:14px;color:var(--t1);white-space:nowrap}
.ann-certif{fill:var(--tc);flex-shrink:0;filter:drop-shadow(0 0 4px rgba(var(--tc-rgb),.5))}
.ann-certif-v{fill:none;stroke:var(--bg);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ann-quand{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--t2);margin-top:1px}
.ann-epingle{font-size:10px}
.ann-tag{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:5px 10px 5px 8px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--tc);
  background:rgba(var(--tc-rgb),.12);border:1px solid rgba(var(--tc-rgb),.32);box-shadow:0 0 18px -6px rgba(var(--tc-rgb),.6)}
.ann-tag-ico{font-size:12px;line-height:1}
.ann-nouveau{position:absolute;top:-12px;left:26px;z-index:2;padding:2px 6px;border-radius:6px;
  font-size:8.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;background:var(--red);color:#fff;
  animation:annPulse 1.8s ease-out infinite}
@keyframes annPulse{0%{box-shadow:0 0 0 0 rgba(255,59,59,.55)}100%{box-shadow:0 0 0 9px rgba(255,59,59,0)}}

/* ── Contenu ── */
.ann-titre{position:relative;margin:0 0 7px;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:23px;line-height:1.08;letter-spacing:.1px;color:var(--t1)}
.ann-texte{position:relative;overflow:hidden;font-size:14.5px;line-height:1.55;color:var(--t1);opacity:.85;overflow-wrap:anywhere}
.ann-texte.coupe{max-height:7.75em;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.ann-texte a{color:var(--tc);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.ann-suite{position:relative;background:none;border:0;padding:6px 0 0;color:var(--tc);font:inherit;font-weight:800;font-size:13px;cursor:pointer}

/* ── Les pouces ── */
.ann-reac{position:relative;display:flex;align-items:center;gap:8px;margin-top:15px}
.ann-reac-vide{flex:1}
.ann-bt{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 12px;
  border-radius:999px;background:var(--s3);border:1px solid var(--line2);color:var(--t2);
  font:inherit;font-weight:800;font-size:14px;cursor:pointer;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .25s,border-color .25s,color .25s,transform .18s var(--spring),box-shadow .3s}
[data-theme="light"] .ann-bt{background:var(--s2)}
.ann-bt:active{transform:scale(.9)}
.ann-pouce{display:inline-flex;position:relative;z-index:1}
.ann-pouce svg{display:block}
.ann-pouce-bas svg{transform:rotate(180deg)}
.ann-pouce-trait{fill:transparent;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;transition:fill .25s}
.ann-bt-up.on{color:#22d46a;background:rgba(34,212,106,.14);border-color:rgba(34,212,106,.5);box-shadow:0 0 22px -6px rgba(34,212,106,.7)}
.ann-bt-down.on{color:#ff4d4d;background:rgba(255,77,77,.13);border-color:rgba(255,77,77,.46);box-shadow:0 0 22px -6px rgba(255,77,77,.6)}
[data-theme="light"] .ann-bt-up.on{color:#11803f}
[data-theme="light"] .ann-bt-down.on{color:#c81e1e}
.on>.ann-pouce .ann-pouce-trait{fill:currentColor}
.ann-bt-com:active{color:var(--t1)}

/* Le chiffre qui roule */
.ann-cpt{position:relative;display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;
  font-variant-numeric:tabular-nums;vertical-align:middle}
.ann-roule{display:flex}
.ann-roule>span{display:block;height:1.2em}
.ann-roule.monte{flex-direction:column;animation:annMonte .44s cubic-bezier(.3,1.45,.5,1) both}
.ann-roule.descend{flex-direction:column-reverse;animation:annDescend .44s cubic-bezier(.3,1.45,.5,1) both}
@keyframes annMonte{from{transform:translateY(0)}to{transform:translateY(-1.2em)}}
@keyframes annDescend{from{transform:translateY(-1.2em)}to{transform:translateY(0)}}

/* Le pouce vert bondit, le rouge secoue la tête, un retrait se tasse. */
.ann-bondit .ann-pouce{animation:annBond .62s cubic-bezier(.3,1.6,.45,1)}
.ann-secoue .ann-pouce{animation:annSecoue .6s ease-out}
.ann-relache .ann-pouce{animation:annRelache .32s ease-out}
@keyframes annBond{0%{transform:none}22%{transform:scale(.68) rotate(10deg)}55%{transform:scale(1.5) rotate(-18deg) translateY(-4px)}78%{transform:scale(.94) rotate(4deg)}100%{transform:none}}
@keyframes annSecoue{0%{transform:none}18%{transform:scale(1.3) translateY(3px) rotate(-14deg)}38%{transform:scale(1.15) rotate(12deg)}58%{transform:rotate(-8deg)}78%{transform:rotate(4deg)}100%{transform:none}}
@keyframes annRelache{50%{transform:scale(.78)}100%{transform:none}}
.ann-bondit{animation:annHalo .6s ease-out}
@keyframes annHalo{0%{box-shadow:0 0 0 0 rgba(34,212,106,.45)}100%{box-shadow:0 0 0 12px rgba(34,212,106,0),0 0 22px -6px rgba(34,212,106,.7)}}

/* L'onde et les étincelles, créées puis retirées par annEclat(). */
.ann-onde{position:absolute;left:21px;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  border:2px solid currentColor;pointer-events:none;animation:annOnde .6s ease-out forwards}
@keyframes annOnde{from{transform:scale(.4);opacity:.9}to{transform:scale(4.2);opacity:0}}
.ann-etincelle{position:absolute;left:21px;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:currentColor;pointer-events:none;z-index:2;animation:annJaillit .72s cubic-bezier(.15,.75,.3,1) both}
.ann-etincelle.etoile{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:0;
  clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}
.ann-etincelle.chute{animation-name:annChute;animation-duration:.8s}
@keyframes annJaillit{0%{transform:translate(0,0) scale(.4);opacity:1}60%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(0);opacity:0}}
@keyframes annChute{0%{transform:translate(0,0) scale(.5);opacity:1}55%{transform:translate(var(--x),var(--y)) scale(1);opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 16px)) scale(.3);opacity:0}}

/* La jauge pour / contre */
.ann-jauge{position:relative;height:3px;margin-top:11px;border-radius:3px;overflow:hidden;background:rgba(255,77,77,.6);transition:background .4s}
.ann-jauge.vide{background:var(--line2)}
.ann-jauge-vert{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#16b457,#22d46a);
  box-shadow:0 0 8px rgba(34,212,106,.6);transition:width .7s cubic-bezier(.3,1.3,.5,1),opacity .4s}
.ann-jauge.vide .ann-jauge-vert{opacity:0}

/* ── Aperçu des commentaires ── */
.ann-apercu{position:relative;margin-top:12px;padding-top:9px;border-top:1px solid var(--line)}
.ann-mini{display:flex;align-items:flex-start;gap:9px;padding:6px 0;cursor:pointer;animation:annNeuf .45s cubic-bezier(.22,.9,.3,1) both}
.ann-mini-corps{flex:1;min-width:0;font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ann-mini-corps .ann-pseudo{font-size:12.5px}
.ann-mini-corps .ann-badge{transform:scale(.9);transform-origin:left center}
.ann-mini-texte{color:var(--t1);opacity:.8;margin-left:6px}
.ann-voir-tout{display:inline-flex;align-items:center;gap:2px;background:none;border:0;padding:6px 0 2px;
  color:var(--t2);font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.ann-premier{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:14px;
  border:1.5px dashed rgba(var(--tc-rgb),.38);background:rgba(var(--tc-rgb),.05);color:var(--tc);
  font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:background .2s,transform .18s var(--spring)}
.ann-premier:active{transform:scale(.97);background:rgba(var(--tc-rgb),.1)}
.ann-premier-ico{display:inline-flex}

/* ── Avatars et pseudos ── */
.ann-av{position:relative;width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--av,#5ec9ff);color:#0a0a0f;font-size:12px;font-weight:800;letter-spacing:.2px}
.ann-av.petit{width:26px;height:26px;font-size:10px}
.ann-av.vip{box-shadow:0 0 0 2px var(--s1),0 0 0 3.5px #ffd76b,0 0 12px rgba(255,215,107,.45)}
.ann-av.admin{box-shadow:0 0 0 2px var(--s1),0 0 0 3.5px #f59e0b}
.ann-cadre .ann-av.vip{box-shadow:0 0 0 2px var(--s2),0 0 0 3.5px #ffd76b,0 0 12px rgba(255,215,107,.45)}
.ann-av.fantome{background:var(--s3);color:var(--t3)}
.ann-pseudo{font-weight:800;font-size:13px;color:var(--t1)}
.ann-pseudo-admin{color:#f59e0b}
.ann-badge{margin-left:5px}
/* Thème clair : le doré du badge et les dégradés pastel des pseudos VIP
   se dissolvent dans le blanc. On les assombrit, ici seulement. */
[data-theme="light"] .ann-badge.chat-vip-badge{color:#8a5a00;background:rgba(232,165,39,.18);border-color:rgba(176,120,10,.42)}
[data-theme="light"] :is(.ann-cadre,.ann-panneau) .name-shine{filter:brightness(.6) saturate(1.7)}

/* ── Les annonces précédentes ── */
.ann-autres{margin:0 14px 14px}
.ann-autres-tete{margin:0 2px 8px;font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--t2)}
.ann-autres-liste{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
.ann-autres-liste::-webkit-scrollbar{display:none}
.ann-petite{flex:0 0 72%;max-width:260px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;
  padding:12px 13px;border-radius:16px;text-align:left;background:var(--s2);border:1px solid var(--line2);
  border-left:3px solid var(--tc);color:var(--t1);font:inherit;cursor:pointer;transition:transform .2s var(--spring)}
.ann-petite:active{transform:scale(.97)}
.ann-petite-tag{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--tc)}
.ann-petite-titre{font-weight:700;font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ann-petite-pied{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--t2)}

/* Un point rouge sur « Accueil » quand une annonce n'a pas été vue. */
.bi.ann-point{position:relative}
.bi.ann-point::after{content:'';position:absolute;top:5px;left:calc(50% + 5px);width:8px;height:8px;border-radius:50%;
  background:var(--red);box-shadow:0 0 0 2px var(--s1);animation:annPulse 2s ease-out infinite}

/* ═══ La feuille de commentaires ═══════════════════════════════════════ */
.ann-feuille{position:fixed;inset:0;z-index:9000;pointer-events:none}
.ann-feuille.ouverte{pointer-events:auto}
.ann-voile{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .32s}
.ann-feuille.ouverte .ann-voile{opacity:1}
.ann-panneau{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:90vh;max-height:90dvh;
  background:var(--s1);border-radius:24px 24px 0 0;border-top:1px solid var(--line2);box-shadow:0 -24px 60px rgba(0,0,0,.45);
  transform:translateY(105%);transition:transform .46s cubic-bezier(.32,1.2,.5,1)}
.ann-feuille.ouverte .ann-panneau{transform:translateY(0)}
.ann-poignee-zone{flex-shrink:0;display:flex;justify-content:center;padding:10px 0 8px;cursor:grab;touch-action:none}
.ann-poignee{width:40px;height:4.5px;border-radius:3px;background:var(--line2)}
.ann-panneau-corps{flex:1;min-height:120px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 16px 12px}
body.ann-bloque .scroll{overflow:hidden}

.ann-f-post{position:relative;padding:2px 0 14px;border-bottom:1px solid var(--line)}
.ann-fermer{position:absolute;top:0;right:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--s3);border:1px solid var(--line2);color:var(--t2);cursor:pointer}
.ann-f-tag{padding-right:40px;margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tc)}
.ann-f-titre{padding-right:40px;margin-bottom:6px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:21px;line-height:1.1;color:var(--t1)}
.ann-f-texte{max-height:28vh;overflow-y:auto;font-size:14px;line-height:1.55;color:var(--t1);opacity:.85;overflow-wrap:anywhere}
.ann-f-texte a{color:var(--tc)}
.ann-f-post .ann-bt{height:34px;font-size:13px}
.ann-f-barre{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 0 8px;background:var(--s1)}
.ann-f-compte{font-weight:800;font-size:13.5px;color:var(--t1)}
.ann-tri{display:flex;padding:3px;border-radius:999px;background:var(--s2);border:1px solid var(--line)}
.ann-tri button{border:0;background:none;padding:5px 11px;border-radius:999px;color:var(--t2);font:inherit;font-weight:700;font-size:12px;cursor:pointer;transition:background .22s,color .22s}
.ann-tri button.on{background:var(--t1);color:var(--bg)}

.ann-fil{padding-top:2px}
.ann-bloc{padding:8px 0}
/* Pas d'overflow:hidden ici : il rognait l'anneau VIP de l'avatar et les
   étincelles du like. On ne coupe que pendant la suppression (.sortie),
   le temps que la hauteur se replie. */
.ann-com{display:flex;align-items:flex-start;gap:10px;
  transition:height .3s ease,opacity .28s ease,transform .3s ease,margin .3s ease}
.ann-com.neuf{animation:annNeuf .55s cubic-bezier(.22,.9,.3,1) both}
.ann-com.neuf .ann-com-bulle{animation:annSurligne 1.8s ease-out}
.ann-com.sortie{opacity:0;transform:translateX(-26px) scale(.96);overflow:hidden}
@keyframes annNeuf{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes annSurligne{0%,30%{box-shadow:0 0 0 2px rgba(var(--tc-rgb),.55),0 0 18px rgba(var(--tc-rgb),.3)}100%{box-shadow:0 0 0 0 rgba(var(--tc-rgb),0)}}
.ann-com-corps{flex:1;min-width:0}
.ann-com-tete{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.ann-com-quand{margin-left:7px;font-size:11px;color:var(--t2)}
.ann-com-bulle{display:inline-block;max-width:100%;padding:8px 11px;border-radius:4px 15px 15px 15px;
  background:var(--s2);border:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--t1);
  white-space:pre-wrap;overflow-wrap:anywhere}
.ann-com.moi .ann-com-bulle{background:rgba(var(--tc-rgb),.07);border-color:rgba(var(--tc-rgb),.2)}
.ann-com-fantome .ann-com-bulle{font-style:italic;color:var(--t2);background:transparent;border-style:dashed}
.ann-mention{color:var(--blue);font-weight:700}
.ann-com-actions{display:flex;align-items:center;gap:1px;margin-top:3px}
.ann-cbt{position:relative;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 8px;border:0;border-radius:999px;
  background:none;color:var(--t2);font:inherit;font-weight:700;font-size:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .2s,background .2s,transform .15s var(--spring)}
.ann-cbt:active{transform:scale(.88)}
.ann-cbt .ann-pouce svg{width:15px;height:15px}
.ann-cbt .ann-onde,.ann-cbt .ann-etincelle{left:15px}
.ann-cbt-up.on{color:#22d46a}
.ann-cbt-down.on{color:#ff4d4d}
[data-theme="light"] .ann-cbt-up.on{color:#11803f}
[data-theme="light"] .ann-cbt-down.on{color:#c81e1e}
.ann-cbt .ann-cpt:empty{display:none}
.ann-repondre{height:30px;padding:0 8px;border:0;background:none;color:var(--t2);font:inherit;font-weight:700;font-size:12px;cursor:pointer}
.ann-repondre:active{color:var(--t1)}
.ann-suppr{margin-left:auto;height:28px;padding:0 9px;border:0;border-radius:999px;background:none;color:var(--t3);
  font:inherit;font-weight:800;font-size:11.5px;cursor:pointer;display:inline-flex;align-items:center;transition:background .2s,color .2s}
.ann-suppr.confirme{background:rgba(255,59,59,.15);color:var(--red);animation:annConfirme .32s var(--spring)}
@keyframes annConfirme{0%{transform:scale(.8)}100%{transform:none}}

/* Les réponses : un trait part sous l'avatar du commentaire. */
.ann-reponses{display:flex;flex-direction:column;gap:9px;margin:8px 0 0 15px;padding-left:14px;border-left:2px solid var(--line2)}
.ann-plus-rep{display:flex;align-items:center;gap:8px;border:0;background:none;padding:2px 0;color:var(--t2);font:inherit;font-weight:700;font-size:12.5px;cursor:pointer}
.ann-plus-rep-trait{width:18px;height:1.5px;background:var(--line2)}

.ann-fil-vide{padding:34px 10px 26px;text-align:center;color:var(--t2)}
.ann-fil-vide-ico{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--tc-rgb),.1);color:var(--tc);animation:annRespireIco 2.6s ease-in-out infinite}
@keyframes annRespireIco{50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(var(--tc-rgb),.06)}}
.ann-fil-vide-t{font-weight:800;font-size:15px;color:var(--t1)}
.ann-fil-vide-s{font-size:13px;margin-top:3px}

/* ── La saisie ── */
.ann-saisie{flex-shrink:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--s1)}
.ann-saisie-ligne{display:flex;align-items:flex-end;gap:9px}
.ann-saisie-ligne>.ann-av{margin-bottom:7px}
.ann-champ-cadre{position:relative;flex:1;background:var(--s2);border:1px solid var(--line2);border-radius:20px;transition:border-color .2s,box-shadow .2s}
.ann-champ-cadre:focus-within{border-color:rgba(var(--tc-rgb),.65);box-shadow:0 0 0 3px rgba(var(--tc-rgb),.13)}
#ann-champ{display:block;width:100%;box-sizing:border-box;max-height:110px;padding:10px 40px 10px 14px;border:0;background:none;
  resize:none;outline:none;color:var(--t1);font:inherit;font-size:15px;line-height:1.4}
#ann-champ::placeholder{color:var(--t2)}
.ann-reste{position:absolute;right:13px;bottom:10px;font-size:11px;font-weight:700;color:var(--t2)}
.ann-reste.bas{color:var(--red)}
.ann-envoyer{position:relative;flex-shrink:0;width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;
  background:var(--tc);color:#0a0a0f;cursor:pointer;box-shadow:0 4px 16px -4px rgba(var(--tc-rgb),.7);
  transition:transform .2s var(--spring),opacity .2s,box-shadow .2s}
[data-theme="light"] .ann-envoyer{color:#fff}
.ann-envoyer:not(:disabled):active{transform:scale(.88)}
.ann-envoyer:disabled{opacity:.35;cursor:default;box-shadow:none}
.ann-envoyer svg{transition:opacity .2s}
.ann-envoyer.part svg{animation:annPart .55s ease-in both}
.ann-envoyer.attend svg{opacity:0}
.ann-attente{position:absolute;font-weight:900;font-size:14px}
@keyframes annPart{0%{transform:none}45%{transform:translate(16px,-16px) scale(.5);opacity:0}46%{transform:translate(-16px,16px) scale(.5);opacity:0}100%{transform:none;opacity:1}}
.ann-rep-puce{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding:6px 6px 6px 12px;
  border-radius:12px;background:var(--s2);font-size:12.5px;color:var(--t2);animation:annNeuf .3s ease-out}
.ann-rep-puce b{color:var(--blue)}
.ann-rep-puce button{width:26px;height:26px;border-radius:50%;border:0;background:var(--s3);color:var(--t2);display:grid;place-items:center;cursor:pointer}
.ann-connexion{width:100%;height:46px;border:0;border-radius:14px;background:var(--tc);color:#0a0a0f;font:inherit;font-weight:800;font-size:14.5px;cursor:pointer}
[data-theme="light"] .ann-connexion{color:#fff}

/* ═══ Panneau admin ═══════════════════════════════════════════════════ */
.ann-adm{padding:4px 14px 0}
.ann-adm-bloc{margin-bottom:14px;padding:16px;border-radius:18px;background:var(--s2);border:1px solid var(--line2)}
.ann-adm-titre{margin-bottom:12px;font-weight:800;font-size:15px;color:var(--t1)}
.ann-adm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ann-adm-tag{padding:7px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--s3);color:var(--t1);
  font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;transition:all .22s var(--spring)}
.ann-adm-tag.on{color:var(--tc);background:rgba(var(--tc-rgb),.15);border-color:var(--tc);transform:scale(1.05)}
.ann-adm-lbl{display:flex;justify-content:space-between;margin:12px 2px 6px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--t2)}
.ann-adm-lbl span{letter-spacing:0;font-weight:700}
.ann-adm-champ{display:block;width:100%;box-sizing:border-box;padding:11px 13px;border-radius:12px;border:1px solid var(--line2);
  background:var(--s1);color:var(--t1);font:inherit;font-size:14.5px;outline:none;transition:border-color .2s}
.ann-adm-champ:focus{border-color:var(--acc)}
.ann-adm-zone{min-height:110px;resize:vertical;line-height:1.5}
.ann-adm-epingle{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13.5px;font-weight:600;color:var(--t1);cursor:pointer}
.ann-adm-epingle input{position:absolute;opacity:0;pointer-events:none}
.ann-adm-bascule{position:relative;width:40px;height:23px;border-radius:999px;background:var(--s4);transition:background .22s;flex-shrink:0}
.ann-adm-bascule::after{content:'';position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--spring)}
.ann-adm-epingle input:checked+.ann-adm-bascule{background:var(--acc)}
.ann-adm-epingle input:checked+.ann-adm-bascule::after{transform:translateX(17px)}
.ann-adm-apercu{pointer-events:none}
.ann-adm-apercu .ann{margin:4px 0 0}
.ann-adm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.ann-adm-annuler{height:44px;padding:0 16px;border-radius:14px;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font:inherit;font-weight:700;cursor:pointer}
.ann-adm-publier{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border:0;border-radius:14px;
  background:var(--acc);color:var(--bg-on-acc);font:inherit;font-weight:800;font-size:15px;cursor:pointer;overflow:hidden;
  transition:transform .2s var(--spring),opacity .2s,background .3s}
.ann-adm-publier:not(:disabled):active{transform:scale(.95)}
.ann-adm-publier:disabled{opacity:.4;cursor:default}
.ann-adm-publier.envoi svg{animation:annPart .8s ease-in infinite}
.ann-adm-publier.fait{background:var(--green);color:#fff}
.ann-adm-publier.fait svg{display:none}
.ann-adm-publier.fait .ann-adm-publier-txt{font-size:0}
.ann-adm-publier.fait .ann-adm-publier-txt::after{content:'Publiée ✓';font-size:15px}
.ann-adm-vide{padding:10px 2px;color:var(--t2);font-size:13.5px}
.ann-adm-ligne{margin-bottom:8px;padding:12px;border-radius:14px;background:var(--s1);border:1px solid var(--line);border-left:3px solid var(--tc)}
.ann-adm-ligne-haut{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--t2)}
.ann-adm-ligne-tag{font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tc)}
.ann-adm-ligne-ep{font-weight:700}
.ann-adm-ligne-date{margin-left:auto}
.ann-adm-ligne-titre{margin:6px 0;font-weight:800;font-size:15px;color:var(--t1)}
.ann-adm-ligne-stats{display:flex;gap:12px;font-size:12.5px;font-weight:700;color:var(--t2)}
.ann-adm-ligne-bts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ann-adm-ligne-bts button{height:32px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:var(--s2);color:var(--t1);
  font:inherit;font-weight:700;font-size:12.5px;cursor:pointer}
.ann-adm-ligne-bts button.danger{color:var(--red);border-color:rgba(255,59,59,.3)}

/* ── Bureau : la feuille devient une fenêtre centrée ── */
@media (min-width:1024px){
  .ann{margin:0 2px 14px}
  .ann-autres{margin:0 2px 16px}
  .ann-petite{flex-basis:240px}
  .ann-panneau{left:50%;right:auto;top:50%;bottom:auto;width:580px;max-height:84vh;border-radius:24px;border:1px solid var(--line2);
    opacity:0;transform:translate(-50%,-46%) scale(.96);transition:transform .38s cubic-bezier(.3,1.25,.5,1),opacity .25s}
  .ann-feuille.ouverte .ann-panneau{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .ann-poignee-zone{visibility:hidden;padding:6px 0 2px}
  .ann-saisie{border-radius:0 0 24px 24px}
  .ann-panneau-corps{padding:0 22px 12px}
  .dk-nav .bi.ann-point::after{top:50%;left:auto;right:14px;transform:translateY(-50%)}
  .ann-bt:hover{border-color:var(--t3)}
  .ann-cbt:hover,.ann-repondre:hover{color:var(--t1)}
}

@media (prefers-reduced-motion:reduce){
  .ann::before,.ann::after,.ann-avatar-anneau,.ann-lueur,.ann-reflet,.ann-nouveau,.bi.ann-point::after,.ann-fil-vide-ico{animation:none}
  .ann-reflet{display:none}
  .ann-panneau{transition:opacity .2s}
}

/* ═══════════════════════════════════════════════════════════════════════
   PAIEMENT — boucliers « Sécurisé », bouton Bitcoin, feuille de paiement
   (paiement.js)
   ═══════════════════════════════════════════════════════════════════════ */
.vip-pay-ligne{display:flex;align-items:stretch;gap:7px}
.vip-pay-ligne[hidden]{display:none}
.vip-pay-ligne+.vip-pay-ligne{margin-top:8px}
.vip-pay-ligne>.vip-pay-main,.vip-pay-ligne>.vip-plan-paypal-btn,.vip-pay-ligne>.vip-pay-btc{flex:1;min-width:0;width:auto}
/* Le bouclier : petit, vert, lisible — on veut qu'il rassure, pas qu'il
   concurrence le bouton de paiement. */
.vip-pay-sur{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:62px;padding:0 4px;border-radius:12px;border:1px solid rgba(34,212,106,.32);background:rgba(34,212,106,.08);
  color:#22d46a;font:inherit;font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;
  transition:background .2s,border-color .2s}
.vip-pay-sur:active{background:rgba(34,212,106,.16)}
[data-theme="light"] .vip-pay-sur{color:#11803f;border-color:rgba(17,128,63,.35);background:rgba(17,128,63,.07)}

.vip-pay-btc{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 16px;border-radius:11px;
  border:1px solid rgba(247,147,26,.45);background:rgba(247,147,26,.09);color:#f7931a;
  font-family:'Barlow Condensed',sans-serif;font-size:13.5px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;
  transition:transform .15s,background .2s}
.vip-pay-btc:active{transform:scale(.96);background:rgba(247,147,26,.16)}
.vip-pay-btc-logo{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f7931a;color:#fff;
  font-family:system-ui,sans-serif;font-size:14px;font-weight:800;line-height:1}
[data-theme="light"] .vip-pay-btc{color:#b3620a}

/* ── La feuille ── */
.paie-feuille{position:fixed;inset:0;z-index:9100;pointer-events:none}
.paie-feuille.ouverte{pointer-events:auto}
.paie-voile{position:absolute;inset:0;background:rgba(0,0,0,.58);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .3s}
.paie-feuille.ouverte .paie-voile{opacity:1}
.paie-panneau{position:absolute;left:0;right:0;bottom:0;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;
  background:var(--s1);border-radius:24px 24px 0 0;border-top:1px solid var(--line2);box-shadow:0 -24px 60px rgba(0,0,0,.45);
  transform:translateY(105%);transition:transform .42s cubic-bezier(.32,1.15,.5,1)}
.paie-feuille.ouverte .paie-panneau{transform:translateY(0)}
.paie-poignee{flex-shrink:0;width:40px;height:4.5px;border-radius:3px;background:var(--line2);margin:10px auto 6px}
.paie-corps{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:6px 18px calc(22px + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){
  .paie-panneau{left:50%;right:auto;top:50%;bottom:auto;width:520px;max-height:86vh;border-radius:22px;border:1px solid var(--line2);
    opacity:0;transform:translate(-50%,-46%) scale(.97);transition:transform .32s cubic-bezier(.3,1.2,.5,1),opacity .22s}
  .paie-feuille.ouverte .paie-panneau{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .paie-poignee{visibility:hidden}
}

/* ── Fiche « pourquoi c'est sûr » ── */
.paie-sur-tete{display:flex;align-items:center;gap:13px;margin:4px 0 16px}
.paie-sur-bouclier{flex-shrink:0;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  color:#22d46a;background:rgba(34,212,106,.12);border:1px solid rgba(34,212,106,.3)}
[data-theme="light"] .paie-sur-bouclier{color:#11803f}
.paie-sur-titre{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:21px;line-height:1.1;color:var(--t1)}
.paie-sur-sous{margin-top:3px;font-size:13px;line-height:1.4;color:var(--t2)}
.paie-sur-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.paie-sur-liste li{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--s2);border:1px solid var(--line)}
.paie-sur-ico{flex-shrink:0;font-size:19px;line-height:1.2}
.paie-sur-liste b{display:block;font-size:14px;color:var(--t1);margin-bottom:2px}
.paie-sur-liste span{display:block;font-size:13px;line-height:1.5;color:var(--t2)}
.paie-sur-ok{width:100%;height:48px;margin-top:16px;border:0;border-radius:14px;background:var(--t1);color:var(--bg);
  font:inherit;font-weight:800;font-size:15px;cursor:pointer}

/* ── Bitcoin ── */
.btc{--btc:#f7931a}
.btc-tete{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.btc-logo{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--btc);color:#fff;
  font-family:system-ui,sans-serif;font-size:26px;font-weight:800;box-shadow:0 6px 20px -6px rgba(247,147,26,.7)}
.btc-tete>div:nth-child(2){flex:1;min-width:0}
.btc-titre{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;line-height:1.1;color:var(--t1)}
.btc-sous{font-size:13px;color:var(--t2);margin-top:2px}
.btc-bouclier{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;
  color:#22d46a;background:rgba(34,212,106,.1);border:1px solid rgba(34,212,106,.3)}
[data-theme="light"] .btc-bouclier{color:#11803f}

.btc-etapes{margin:0 0 16px;padding:0;list-style:none;counter-reset:e;display:flex;flex-direction:column;gap:10px}
.btc-etapes li{counter-increment:e;position:relative;padding:0 0 0 38px;font-size:13.5px;line-height:1.45;color:var(--t2)}
.btc-etapes li::before{content:counter(e);position:absolute;left:0;top:-2px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(247,147,26,.14);color:var(--btc);font-weight:800;font-size:13px}
.btc-etapes b{color:var(--t1)}

.btc-lbl{display:block;margin:14px 2px 6px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--t2)}
.btc-lbl span{text-transform:none;letter-spacing:0;font-weight:600}
.btc-champ{display:block;width:100%;box-sizing:border-box;height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);
  background:var(--s2);color:var(--t1);font:inherit;font-size:15px;outline:none}
.btc-champ:focus{border-color:var(--btc)}
.btc-note{margin:6px 2px 0;font-size:12px;color:var(--t3);line-height:1.4}
[data-theme="light"] .btc-note{color:var(--t2)}
.btc-erreur{margin-top:12px;padding:10px 12px;border-radius:11px;background:rgba(255,59,59,.09);border:1px solid rgba(255,59,59,.3);color:#ff8f8f;font-size:13px}
[data-theme="light"] .btc-erreur{color:#b01c1c}

.btc-principal{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;height:50px;margin-top:16px;
  border:0;border-radius:14px;background:var(--btc);color:#fff;text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(247,147,26,.75);transition:transform .15s,opacity .2s}
.btc-principal:active{transform:scale(.97)}
.btc-principal:disabled{opacity:.55}
.btc-secondaire{display:block;width:100%;height:44px;margin-top:10px;border:1px solid var(--line2);border-radius:13px;background:var(--s2);
  color:var(--t2);font:inherit;font-weight:700;font-size:13.5px;cursor:pointer}

/* Le montant : l'élément le plus important de l'écran. */
.btc-montant{position:relative;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px;width:100%;
  padding:16px 12px 34px;border-radius:16px;border:1.5px solid rgba(247,147,26,.5);background:rgba(247,147,26,.07);cursor:pointer;color:var(--t1)}
.btc-montant-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:28px;font-weight:800;letter-spacing:.5px}
.btc-montant-unite{font-weight:800;font-size:16px;color:var(--btc)}
.btc-copie{position:absolute;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--btc)}
.btc-montant .btc-copie{left:50%;bottom:10px;transform:translateX(-50%)}
.btc-montant.copie,.btc-adresse.copie{border-color:#22d46a}
.copie .btc-copie{color:#22d46a}
.btc-chrono{margin:8px 0 2px;text-align:center;font-size:12.5px;font-weight:700;color:var(--t2);font-variant-numeric:tabular-nums}
.btc-chrono.bientot{color:#f7931a}
.btc-chrono.fini{color:var(--t3)}
.btc-chrono.ok{color:#22d46a}

.btc-qr-bloc{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px;border-radius:16px;background:var(--s2);border:1px solid var(--line)}
.btc-qr{flex-shrink:0;width:132px;height:132px;border-radius:10px;background:#fff;padding:6px;box-sizing:border-box;display:grid;place-items:center}
.btc-qr svg{width:100%;height:100%;display:block}
.btc-qr-attente{width:40px;height:40px;border-radius:50%;border:3px solid #e5e5e5;border-top-color:#f7931a;animation:btcTourne .8s linear infinite}
@keyframes btcTourne{to{transform:rotate(360deg)}}
.btc-qr-absent{font-size:11px;line-height:1.35;text-align:center;color:#555}
.btc-qr-legende{font-size:13px;line-height:1.45;color:var(--t2)}
.btc-qr-legende b{color:var(--t1)}

.btc-adresse{position:relative;display:block;width:100%;padding:13px 90px 13px 14px;border-radius:13px;border:1px solid var(--line2);
  background:var(--s2);text-align:left;cursor:pointer;color:var(--t1)}
.btc-adresse-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.5;word-break:break-all;letter-spacing:.3px}
.btc-adresse .btc-copie{right:12px;top:50%;transform:translateY(-50%)}

.btc-attention{margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(247,147,26,.08);border:1px solid rgba(247,147,26,.3);
  font-size:13px;line-height:1.5;color:var(--t2)}
.btc-attention>b{display:block;color:var(--t1);margin-bottom:4px}
.btc-attention ul{margin:0;padding-left:18px}
.btc-attention li+li{margin-top:4px}
.btc-attention li b{color:var(--t1)}

.btc-statut{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px;border-radius:14px;background:var(--s2);border:1px solid var(--line)}
.btc-statut b{display:block;font-size:14px;color:var(--t1)}
.btc-statut span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--t2)}
.btc-point{flex-shrink:0;width:12px;height:12px;margin-top:3px;border-radius:50%}
.btc-point.attente{background:#f7931a;animation:btcPulse 1.6s ease-out infinite}
.btc-point.vu{background:#22d46a;animation:btcPulseV 1.6s ease-out infinite}
.btc-point.expire{background:var(--t3)}
@keyframes btcPulse{0%{box-shadow:0 0 0 0 rgba(247,147,26,.55)}100%{box-shadow:0 0 0 10px rgba(247,147,26,0)}}
@keyframes btcPulseV{0%{box-shadow:0 0 0 0 rgba(34,212,106,.55)}100%{box-shadow:0 0 0 10px rgba(34,212,106,0)}}

/* Le guide replié */
.btc-guide{margin-top:16px;border-radius:14px;border:1px solid var(--line);background:var(--s2);overflow:hidden}
.btc-guide summary{list-style:none;cursor:pointer;padding:14px 40px 14px 14px;position:relative;font-weight:800;font-size:14px;color:var(--t1)}
.btc-guide summary::-webkit-details-marker{display:none}
.btc-guide summary::after{content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--t2);border-bottom:2px solid var(--t2);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.btc-guide[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.btc-guide>*:not(summary){margin-left:14px;margin-right:14px}
.btc-guide h4{margin:14px 14px 4px;font-size:14px;color:var(--t1)}
.btc-g-ex{margin-top:0;margin-bottom:6px;font-size:12px;color:var(--t3)}
.btc-guide ol{margin-top:4px;padding-left:20px;font-size:13px;line-height:1.55;color:var(--t2)}
.btc-guide ol li+li{margin-top:6px}
.btc-guide p{font-size:13px;line-height:1.55;color:var(--t2)}
.btc-guide b{color:var(--t1)}
.btc-guide .btc-secondaire{width:auto;margin:6px 14px 14px}

/* La clé, une fois payé */
.btc-reussi{text-align:center;padding:8px 0 0}
.btc-reussi-ico{width:64px;height:64px;margin:4px auto 12px;border-radius:50%;display:grid;place-items:center;background:#22d46a;color:#fff;
  font-size:32px;font-weight:900;box-shadow:0 10px 30px -10px rgba(34,212,106,.8)}
.btc-reussi p{font-size:14px;color:var(--t2);margin:6px 0 14px}
.btc-cle{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:800;letter-spacing:1px;padding:14px;border-radius:14px;
  border:1.5px dashed rgba(34,212,106,.55);background:rgba(34,212,106,.07);color:var(--t1);user-select:all}

@media (prefers-reduced-motion:reduce){.btc-point,.btc-qr-attente{animation:none}.paie-panneau{transition:opacity .2s}}

/* ═══════════════════════════════════════════════════════════════════
   PAGE VIP — verre liquide et glace
   Un univers à part du reste du site : pas de jaune, peu de doré.
   Du verre dépoli, des reflets froids, trois gouttes de lumière qui
   dérivent derrière. Tout est animé par transform ou opacity, et les
   animations s'arrêtent quand la page est fermée.
   ═══════════════════════════════════════════════════════════════════ */
.vip-ov{
  --vx-txt:#eef3fb;
  --vx-txt2:rgba(226,236,250,.66);
  --vx-txt3:rgba(226,236,250,.40);
  --vx-glace:#d9eaff;
  --vx-glace-rgb:185,216,255;
  --vx-lilas-rgb:176,160,255;
  --vx-ligne:rgba(255,255,255,.09);
  background:#04050a;color:var(--vx-txt);overflow:hidden;isolation:isolate;
}
.vip-ov:not(.open) *,.vip-ov:not(.open) *::before,.vip-ov:not(.open) *::after{animation-play-state:paused!important}

/* ── Le fond ── */
.vx-fond{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.vx-goutte{position:absolute;border-radius:50%;will-change:transform}
.vx-goutte.g1{width:120vw;height:120vw;max-width:760px;max-height:760px;top:-38%;left:-30%;
  background:radial-gradient(closest-side,rgba(var(--vx-glace-rgb),.42),rgba(var(--vx-glace-rgb),.12) 55%,transparent);
  animation:vxDerive1 22s ease-in-out infinite alternate}
.vx-goutte.g2{width:100vw;height:100vw;max-width:640px;max-height:640px;top:18%;right:-45%;
  background:radial-gradient(closest-side,rgba(var(--vx-lilas-rgb),.34),rgba(var(--vx-lilas-rgb),.09) 55%,transparent);
  animation:vxDerive2 27s ease-in-out infinite alternate}
.vx-goutte.g3{width:90vw;height:90vw;max-width:560px;max-height:560px;bottom:-30%;left:-20%;
  background:radial-gradient(closest-side,rgba(120,220,230,.24),rgba(120,220,230,.06) 55%,transparent);
  animation:vxDerive3 31s ease-in-out infinite alternate}
@keyframes vxDerive1{to{transform:translate3d(18%,12%,0) scale(1.12)}}
@keyframes vxDerive2{to{transform:translate3d(-26%,-10%,0) scale(.9)}}
@keyframes vxDerive3{to{transform:translate3d(20%,-14%,0) scale(1.15)}}
/* Une trame très fine casse l'effet « aplat numérique » des dégradés. */
.vx-grain{position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:3px 3px}

/* ── L'en-tête ── */
.vx-tete{position:relative;z-index:3;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
  transition:background .3s,border-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent}
.vx-tete.pose{background:rgba(8,10,18,.55);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--vx-ligne)}
.vx-retour{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--vx-txt);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform .2s var(--spring),background .2s}
.vx-retour:active{transform:scale(.88);background:rgba(255,255,255,.12)}
.vx-tete-titre{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:4px;
  color:var(--vx-txt2);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.vx-tete.pose .vx-tete-titre{opacity:1;transform:none}
.vx-tete-vide{width:38px}

.vx-scroll{position:relative;z-index:1;margin-top:calc(-58px - env(safe-area-inset-top,0px));
  padding-top:calc(58px + env(safe-area-inset-top,0px))}
.vx-scroll>*{max-width:520px;margin-left:auto;margin-right:auto}

/* ── Le verre ──
   Un léger dégradé blanc, du flou derrière, un liseré qui capte la
   lumière en haut à gauche et un reflet qui suit le doigt. */
.vx-verre{position:relative;isolation:isolate;border-radius:24px;
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 60%,rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.04),0 24px 50px -30px rgba(0,0,0,.95)}
.vx-verre::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.45),rgba(255,255,255,.07) 32%,rgba(255,255,255,.02) 62%,rgba(var(--vx-glace-rgb),.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.vx-verre::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  opacity:0;transition:opacity .4s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(var(--vx-glace-rgb),.14),transparent 45%)}
.vx-verre.reflet::after{opacity:1}

/* ── L'ouverture ── */
.vx-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px 8px}
.vx-orbe{position:relative;width:96px;height:96px;display:grid;place-items:center;margin-bottom:22px;
  animation:vxEntre .9s cubic-bezier(.16,1,.3,1) both}
.vx-orbe-anneau{position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(var(--vx-glace-rgb),0),rgba(var(--vx-glace-rgb),.85),rgba(var(--vx-lilas-rgb),.6),rgba(120,220,230,.5),rgba(var(--vx-glace-rgb),0) 70%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));
  mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));
  animation:vxTourne 7s linear infinite}
.vx-orbe-verre{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse 46% 26% at 40% 20%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(circle at 50% 120%,rgba(var(--vx-glace-rgb),.45),transparent 60%),
    radial-gradient(circle at 50% 50%,rgba(var(--vx-glace-rgb),.10),rgba(var(--vx-lilas-rgb),.14));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -14px 26px rgba(var(--vx-lilas-rgb),.25),inset 0 8px 18px rgba(255,255,255,.08),
    0 18px 50px -10px rgba(var(--vx-glace-rgb),.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:vxFlotte 5.5s ease-in-out infinite}
.vx-orbe-ico{position:relative;filter:drop-shadow(0 2px 10px rgba(var(--vx-glace-rgb),.55));animation:vxFlotte 5.5s ease-in-out infinite}
@keyframes vxTourne{to{transform:rotate(360deg)}}
@keyframes vxFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes vxEntre{from{opacity:0;transform:translateY(16px) scale(.92);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

.vx-surtitre{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:6px;text-transform:uppercase;
  color:var(--vx-txt3);padding-left:6px;animation:vxEntre .9s .08s cubic-bezier(.16,1,.3,1) both}
.vx-titre{margin:2px 0 8px;font-family:'Barlow Condensed',sans-serif;font-size:76px;line-height:.95;font-weight:900;letter-spacing:6px;
  padding-left:6px;animation:vxEntre .9s .14s cubic-bezier(.16,1,.3,1) both}
/* Le reflet qui traverse le mot : un dégradé glacé qui glisse. */
.vx-titre-txt{background:linear-gradient(100deg,#b9c9e6 0%,#ffffff 22%,#cfe2ff 38%,#9fb0dc 52%,#ffffff 68%,#bcd3ff 84%,#b9c9e6 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:vxGlisse 6s ease-in-out infinite}
@keyframes vxGlisse{0%{background-position:100% 0}100%{background-position:-120% 0}}
.vx-accroche{margin:0 0 20px;font-size:15px;color:var(--vx-txt2);animation:vxEntre .9s .2s cubic-bezier(.16,1,.3,1) both}

/* Textes qui changent selon que l'utilisateur est VIP ou non. */
.vip-ov .vx-si-vip{display:none}
.vip-ov.est-vip .vx-si-vip{display:inline}
.vip-ov.est-vip .vx-si-non{display:none}

.vx-pastille{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:9px 16px;border-radius:999px;font-size:12px;color:var(--vx-txt2);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:vxEntre .9s .26s cubic-bezier(.16,1,.3,1) both}
.vx-pastille b{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;color:#fff;letter-spacing:.5px}
.vx-pastille i{width:3px;height:3px;border-radius:50%;background:var(--vx-txt3)}

/* Statut VIP actif */
.vx-statut{width:100%;margin-top:18px;animation:vxEntre .7s cubic-bezier(.16,1,.3,1) both}
.vip-ov .vip-status-active{display:flex;align-items:center;gap:12px;padding:14px 16px;margin:0;border-radius:20px;text-align:left;
  background:linear-gradient(150deg,rgba(var(--vx-glace-rgb),.14),rgba(255,255,255,.03));
  border:1px solid rgba(var(--vx-glace-rgb),.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.vip-ov .vip-status-crown{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.vip-ov .vip-status-title{color:#fff;letter-spacing:1.5px}
.vip-ov .vip-status-exp{color:var(--vx-txt2)}
.vip-ov .vip-status-check{margin-left:auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--vx-glace-rgb),.18);color:#fff}

/* ── Les avantages, repliables ── */
.vx-avantages{width:100%;margin-top:22px;animation:vxEntre .9s .32s cubic-bezier(.16,1,.3,1) both}
.vx-basculer{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;border-radius:18px;
  color:var(--vx-txt);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);text-align:left;
  transition:background .25s,border-color .25s,transform .2s var(--spring)}
.vx-basculer:active{transform:scale(.98)}
.vx-avantages.ouvert .vx-basculer{background:rgba(255,255,255,.07);border-color:rgba(var(--vx-glace-rgb),.24)}
.vx-mini{display:flex;flex-shrink:0}
.vx-mini svg{width:26px;height:26px;padding:6px;margin-left:-7px;border-radius:50%;
  fill:none;stroke:var(--vx-glace);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  background:#0c1020;border:1px solid rgba(255,255,255,.12);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.vx-mini svg:first-child{margin-left:0}
.vx-avantages.ouvert .vx-mini svg{transform:translateY(-2px)}
.vx-mini svg:nth-child(2){transition-delay:.03s}.vx-mini svg:nth-child(3){transition-delay:.06s}
.vx-mini svg:nth-child(4){transition-delay:.09s}.vx-mini svg:nth-child(5){transition-delay:.12s}.vx-mini svg:nth-child(6){transition-delay:.15s}
.vx-basculer-txt{flex:1;min-width:0;font-size:13.5px;font-weight:700}
.vx-masquer{display:none}
.vx-avantages.ouvert .vx-voir{display:none}
.vx-avantages.ouvert .vx-masquer{display:inline}
.vx-chevron{flex-shrink:0;color:var(--vx-txt2);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.vx-avantages.ouvert .vx-chevron{transform:rotate(180deg)}

/* Ouverture en hauteur sans connaître la hauteur : la grille passe
   de 0fr à 1fr, le navigateur interpole. */
.vx-repli{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
.vx-avantages.ouvert .vx-repli{grid-template-rows:1fr}
.vx-repli-in{min-height:0;overflow:hidden}
.vx-liste{list-style:none;margin:10px 0 0;padding:6px 16px;text-align:left}
.vx-av{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid var(--vx-ligne);
  opacity:0;transform:translateY(12px);filter:blur(4px);
  transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1),filter .5s ease}
.vx-av:first-child{border-top:0}
.vx-avantages.ouvert .vx-av{opacity:1;transform:none;filter:none;transition-delay:calc(.12s + var(--i) * .065s)}
.vx-av-ico{position:relative;width:38px;height:38px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.22),rgba(255,255,255,.04) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08)}
.vx-av-ico svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Un éclat passe sur chaque icône quand la liste s'ouvre. */
.vx-av-ico::after{content:'';position:absolute;inset:-40%;transform:translateX(-120%) rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.vx-avantages.ouvert .vx-av-ico::after{animation:vxEclat 1.1s calc(.35s + var(--i) * .065s) ease both}
@keyframes vxEclat{to{transform:translateX(120%) rotate(20deg)}}
.vx-av div b{display:block;font-size:14px;font-weight:700;color:var(--vx-txt);margin:1px 0 3px}
.vx-av div span{display:block;font-size:12.5px;line-height:1.45;color:var(--vx-txt2)}
.vx-note{margin:10px 4px 0;font-size:11.5px;color:var(--vx-txt3);text-align:center}

/* ── Entrée au défilement ── */
.vx-surgit{opacity:0;transform:translateY(26px) scale(.985);filter:blur(5px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .8s ease}
.vx-surgit.la{opacity:1;transform:none;filter:none}

/* ── L'offre ── */
.vx-offre{margin:26px 16px 0;padding:20px 18px 18px}
.vx-offre-haut{display:flex;align-items:center;justify-content:space-between}
.vx-etiq{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--vx-glace);
  padding:5px 10px;border-radius:999px;background:rgba(var(--vx-glace-rgb),.10);border:1px solid rgba(var(--vx-glace-rgb),.22)}
.vx-offre-duree{font-size:11px;color:var(--vx-txt3);letter-spacing:.5px}
.vx-prix{display:flex;align-items:baseline;gap:2px;margin:14px 0 4px}
.vx-prix b{font-family:'Barlow Condensed',sans-serif;font-size:64px;line-height:.9;font-weight:900;color:#fff;letter-spacing:-1px}
.vx-prix-dev{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:#fff}
.vx-prix-per{font-size:14px;color:var(--vx-txt2);margin-left:6px}
.vx-prix-note{margin:0 0 18px;font-size:12px;color:var(--vx-txt3)}

.vx-payer{display:flex;flex-direction:column;gap:10px}
.vx-ligne{display:flex;gap:8px;align-items:stretch}
.vx-ligne[hidden]{display:none}
.vx-bt{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:9px;height:50px;border-radius:15px;
  font-size:14.5px;font-weight:700;letter-spacing:.2px;position:relative;overflow:hidden;
  transition:transform .2s var(--spring),background .2s,opacity .2s}
.vx-bt:active{transform:scale(.97)}
.vx-bt:disabled{opacity:.6}
/* Le bouton principal : un bloc de glace, avec un reflet qui passe de
   temps en temps pour attirer l'œil sans clignoter. */
.vx-bt-plein{color:#0a0f1d;border:0;
  background:linear-gradient(180deg,#ffffff 0%,#e6f0ff 55%,#cddfff 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px rgba(120,150,220,.25),0 10px 28px -12px rgba(var(--vx-glace-rgb),.8)}
.vx-bt-plein::after{content:'';position:absolute;top:0;bottom:0;width:45%;left:-60%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:vxLueur 4.5s 1.2s ease-in-out infinite}
@keyframes vxLueur{0%{left:-60%}35%,100%{left:130%}}
.vx-bt-verre{color:var(--vx-txt);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.vx-bt-verre:active{background:rgba(255,255,255,.1)}
.vx-btc{font-weight:900;font-size:17px;color:#ffd08a}
.vx-sur{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;border-radius:15px;
  font-size:9.5px;font-weight:700;letter-spacing:.3px;color:#9fe3c0;
  background:rgba(60,210,140,.07);border:1px solid rgba(60,210,140,.22);transition:transform .2s var(--spring)}
.vx-sur:active{transform:scale(.94)}
.vx-marques{margin:-2px 0 4px;font-size:10.5px;letter-spacing:.3px;color:var(--vx-txt3);text-align:center}
.vip-ov .vx-err{margin-top:2px}
.vx-rassure{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--vx-ligne);display:flex;flex-direction:column;gap:6px}
.vx-rassure li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--vx-txt2)}
.vx-rassure li::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:var(--vx-glace);box-shadow:0 0 8px rgba(var(--vx-glace-rgb),.8)}

/* ── Parrainage ── */
.vx-parrain{display:flex;align-items:center;gap:14px;margin:22px 20px 0;padding:4px 0}
.vx-parrain-ico{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  border:1px dashed rgba(255,255,255,.22)}
.vx-parrain-ico svg{width:18px;height:18px;fill:none;stroke:var(--vx-glace);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vx-parrain div b{display:block;font-size:13.5px;color:var(--vx-txt);margin-bottom:2px}
.vx-parrain div span{display:block;font-size:12px;color:var(--vx-txt2);line-height:1.4}

/* ── Clé ── */
.vx-cle{padding:28px 16px 8px}
.vx-cle-lbl{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--vx-txt3);margin:0 4px 10px}
.vx-cle-bloc{display:flex;gap:8px}
.vx-cle-champ{flex:1;min-width:0;height:48px;padding:0 14px;border-radius:14px;outline:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:1px;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:border-color .2s,background .2s}
.vx-cle-champ::placeholder{color:rgba(226,236,250,.28)}
.vx-cle-champ:focus{border-color:rgba(var(--vx-glace-rgb),.55);background:rgba(255,255,255,.07)}
.vx-cle-bt{height:48px;padding:0 18px;border-radius:14px;font-size:14px;font-weight:700;color:#fff;
  background:rgba(var(--vx-glace-rgb),.16);border:1px solid rgba(var(--vx-glace-rgb),.32);transition:transform .2s var(--spring)}
.vx-cle-bt:active{transform:scale(.95)}

@media (min-width:900px){
  .vx-titre{font-size:92px}
}
@media (prefers-reduced-motion:reduce){
  .vip-ov *,.vip-ov *::before,.vip-ov *::after{animation:none!important;transition-duration:.01s!important}
  .vx-surgit{opacity:1;transform:none;filter:none}
}