.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  :root{
    /* DA CineBrawl — noir chaud éditorial + un seul accent : le rouge brawl */
    --bg:#141114; --card:#1E1A1F; --card2:#282229;
    --txt:#F1EDE6; --muted:#9C948B; --line:#766D7B; --label:#B4A99C;
    --accent:#D2333F; --accent2:#E0564E; --good:#D2333F;
    --blue:#4A8CF0; --blue2:#5AA0FF;
    /* dégradé signature « brawl » : rouge → bleu (dualité de l'affiche du tournoi) */
    --duo:linear-gradient(135deg,var(--accent) 0%,#8a3fb0 52%,var(--blue) 100%);
    --duo-h:linear-gradient(90deg,var(--accent) 0%,#8a3fb0 50%,var(--blue) 100%);
    --serif:'Playfair Display',Georgia,'Times New Roman',serif;
    --sans:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
    --shadow:0 18px 50px -12px rgba(0,0,0,.75);
    /* tokens de mouvement (ui-ux-pro-max) — micro-interactions 150–300ms, sortie plus rapide que l'entrée */
    --dur-fast:180ms; --dur-mid:260ms; --dur-exit:140ms;
    --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);
    /* tailles d'icônes SVG tokenisées */
    --icon-sm:16px; --icon-md:20px; --icon-lg:24px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  /* Icônes SVG inline (jeu cohérent, stroke 2px, hérite de currentColor) — remplace les emojis structurels */
  .ico{width:var(--icon-md);height:var(--icon-md);display:inline-block;vertical-align:-.18em;flex:0 0 auto;
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .ico.sm{width:var(--icon-sm);height:var(--icon-sm)} .ico.lg{width:var(--icon-lg);height:var(--icon-lg)}
  /* Nombres qui varient : chiffres à chasse fixe → pas de saut de largeur */
  .tb,.heartbtn,.libcount,.duelsub,.match,.brsub,.commby,.tag{font-variant-numeric:tabular-nums}
  /* Focus clavier visible et cohérent (ui-ux-pro-max §1) */
  :focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:8px}
  button:focus:not(:focus-visible){outline:none}
  /* Respecte prefers-reduced-motion (ui-ux-pro-max §1/§7) */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
  }
  html,body{margin:0;height:100%}
  body{
    font-family:var(--sans);
    /* halos rouge (haut-gauche) + bleu (haut-droite) : profondeur bicolore, cohérente avec le logo rouge→bleu */
    background:
      radial-gradient(1150px 700px at 18% -12%,rgba(210,51,63,.14) 0%,transparent 55%),
      radial-gradient(1050px 660px at 98% 2%,rgba(74,140,240,.11) 0%,transparent 55%),
      radial-gradient(900px 620px at 88% 112%,rgba(210,51,63,.08) 0%,transparent 55%),
      var(--bg);
    background-attachment:fixed;
    color:var(--txt);min-height:100%;
    /* ancré en HAUT (flex-start) : le centrage vertical laissait un grand vide au-dessus des écrans courts */
    display:flex;align-items:flex-start;justify-content:center;padding:18px;
  }
  .app{width:100%;max-width:460px;margin:0 auto}
  .brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px}
  .brand .dot{width:12px;height:12px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 18px var(--accent)}
  .brand h1{font-size:22px;margin:0;letter-spacing:-.3px;font-weight:800}
  .brand h1 span{background:linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .screen{display:none;animation:fade .35s ease}
  .screen.active{display:block}
  /* garantit qu'un SEUL écran s'affiche, même si un ID force un display (spécificité) */
  .screen:not(.active){display:none !important}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .panel{background:linear-gradient(180deg,#241f26 0%,var(--card) 40%);border:1px solid var(--line);
    border-radius:22px;padding:24px 20px;box-shadow:var(--shadow),inset 0 1px 0 #ffffff0d}
  .lead{color:var(--muted);text-align:center;font-size:15px;line-height:1.5;margin:6px 0 16px}
  .platforms{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 18px}
  .pill{font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid #ffffff22}
  .pf-canal{background:#1d1d1d;color:#fff}
  .pf-disney{background:#0b1e63;color:#cfe0ff}
  .pf-hbo{background:#2a1357;color:#e6d6ff}
  .pf-para{background:#062a63;color:#cfe2ff}
  .pf-prime{background:#063246;color:#bdecff}
  .field{margin:8px 0 4px}
  .field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600}
  .field textarea,.field input{width:100%;background:#191519;border:1px solid var(--line);color:var(--txt);
    border-radius:12px;padding:12px 14px;font-size:14px;outline:none;font-family:inherit;resize:vertical}
  .field textarea{min-height:74px}
  .field textarea:focus,.field input:focus{border-color:var(--accent)}
  .examples{font-size:11.5px;color:#8B8279;margin:8px 2px 0;line-height:1.6}
  .examples b{color:#9C948B;font-weight:600}
  .hint{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center;line-height:1.5}
  details.adv{margin-top:12px}
  details.adv summary{cursor:pointer;font-size:12px;color:var(--muted);list-style:none}
  details.adv summary::-webkit-details-marker{display:none}
  .btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;cursor:pointer;font-weight:800;font-size:16px;
    color:#fff;padding:15px;border-radius:14px;margin-top:14px;
    background:var(--duo);
    box-shadow:0 12px 26px -12px var(--accent),0 12px 26px -12px var(--blue);transition:transform .12s,filter .12s}
  .btn .ico{width:19px;height:19px} .btn.sm .ico{width:16px;height:16px}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn.ghost{background:linear-gradient(#221d23,#221d23) padding-box,var(--duo) border-box;box-shadow:none;color:var(--txt);border:1.5px solid transparent}
  .btn.sm{font-size:14px;padding:12px}

  .progress{height:6px;background:#2B252B;border-radius:999px;overflow:hidden;margin:0 4px 16px}
  .progress>i{display:block;height:100%;width:0;border-radius:999px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s ease}
  .step{font-size:12px;color:var(--muted);text-align:center;margin-bottom:10px;letter-spacing:.4px}

  .qcard{background:linear-gradient(180deg,#241f26 0%,var(--card) 40%);border:1px solid var(--line);
    border-radius:22px;padding:28px 22px;box-shadow:var(--shadow),inset 0 1px 0 #ffffff0d;
    text-align:center;animation:fade .3s ease}
  .qemoji{font-size:38px;margin-bottom:10px}
  .qtext{font-size:22px;font-weight:800;letter-spacing:-.3px;line-height:1.3;margin:0 0 8px}
  .qsub{font-size:12.5px;color:var(--muted);margin:0 0 20px}
  .answers{display:grid;gap:11px}
  .answers button{border:1px solid var(--line);background:var(--card2);color:var(--txt);
    font-size:16px;font-weight:700;padding:15px;border-radius:14px;cursor:pointer;
    transition:transform .1s,background .15s,border-color .15s;text-align:left;
    display:flex;align-items:center;gap:10px}
  .answers button .ico{font-size:18px}
  .answers button:active{transform:scale(.98)}
  .answers button:hover{border-color:var(--accent2)}
  .answers button.sel{border-color:var(--good);background:#2A181C}
  .answers button.sel::after{content:"✓";margin-left:auto;color:var(--good);font-weight:900}
  .qskip{margin-top:14px;text-align:center}
  .qskip a{color:var(--accent2);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none}

  .stage{perspective:1000px}
  .movie{background:linear-gradient(180deg,#241f26 0%,var(--card) 30%);border:1px solid var(--line);
    border-radius:22px;overflow:hidden;box-shadow:var(--shadow),inset 0 1px 0 #ffffff0d;
    transition:transform .3s ease,opacity .3s ease}
  .movie{touch-action:pan-y}   /* laisse le scroll vertical, capte le glissement horizontal */
  .movie.out-left{transform:translateX(-120%) rotate(-12deg);opacity:0}
  .movie.out-right{transform:translateX(120%) rotate(12deg);opacity:0}
  .poster{height:340px;display:flex;align-items:flex-end;justify-content:flex-start;
    padding:14px;position:relative;color:#fff;overflow:hidden}
  .poster .ptitle{font-size:26px;font-weight:900;line-height:1.05;
    text-shadow:0 3px 16px rgba(0,0,0,.85);max-width:88%;position:relative;z-index:2}
  .poster .pyear{position:absolute;top:14px;left:14px;background:#000a;backdrop-filter:blur(4px);
    padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;z-index:3}
  .poster .prate{position:absolute;top:14px;right:14px;background:#000a;backdrop-filter:blur(4px);
    padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;color:#D8B15B;z-index:3}
  .pinfo{position:absolute;top:14px;left:14px;z-index:4;width:44px;height:44px;border-radius:50%;
    background:#000b;backdrop-filter:blur(4px);border:1.5px solid #ffffff77;color:#fff;font-size:19px;font-weight:800;
    font-style:italic;font-family:var(--serif);line-height:1;cursor:pointer;padding:0;
    display:flex;align-items:center;justify-content:center}
  .pinfo:hover{border-color:var(--accent2);color:var(--accent2);background:#000d}
  .pinfo:active{transform:scale(.94)}
  .duelposter .pinfo,.gtile .pinfo{width:44px;height:44px;font-size:16px;top:5px;left:5px}

  /* --- duel : toute la carte est cliquable --- */
  .duelc.duelsel{cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
  .duelc.duelsel:hover{border-color:var(--good);background:#17251d}
  .duelc.duelsel:active{transform:scale(.98)}
  .duelhint{margin-top:auto;padding-top:7px;text-align:center;font-size:11px;color:var(--good);font-weight:800}

  /* --- galerie multi-sélection (comme une galerie photo) --- */
  .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:9px;padding:2px 0 14px}
  .gtile{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--card2);
    border:2px solid transparent;transition:border-color .12s,transform .1s,box-shadow .15s}
  .gtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .gtile:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px #000d}
  .gtile:active{transform:scale(.97)}
  .gtile .ggrad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#000d);pointer-events:none}
  .gtile .gtitle{position:absolute;left:7px;right:7px;bottom:6px;font-size:11.5px;font-weight:700;line-height:1.2;z-index:2;
    color:#fff;text-shadow:0 2px 8px #000;pointer-events:none}
  .gtile .gcheck{position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:50%;background:#0009;
    border:2px solid #ffffff88;z-index:3;display:flex;align-items:center;justify-content:center;font-size:13px;
    font-weight:900;color:transparent;pointer-events:none}
  .gtile.gsel{border-color:var(--good);box-shadow:0 0 0 2px #E0564E55,0 10px 24px -10px #E0564E}
  .gtile.gsel .gcheck{background:var(--good);color:#FFF7F5;border-color:transparent}
  .gtile.gsel img{filter:brightness(.8)}
  .galempty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:13px;padding:34px 10px}
  /* État vide réutilisable : icône + titre + sous-texte + CTA */
  .emptybox{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;color:var(--muted);padding:44px 18px}
  .emptybox .ico{width:46px;height:46px;opacity:.55;color:var(--accent2);stroke-width:1.6}
  .emptybox .et{font-size:15.5px;font-weight:800;color:var(--txt);letter-spacing:-.2px}
  .emptybox .es{font-size:13px;line-height:1.55;max-width:290px}
  .emptybox .btn{margin-top:4px;width:auto;padding:11px 18px}
  /* Bande-annonce inline (fiche ULTRA détaillée) : bouton play sur le backdrop → iframe YouTube */
  .megahead .megaplay{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(210,51,63,.92);color:#fff;display:flex;align-items:center;justify-content:center;z-index:3;
    box-shadow:0 12px 30px -6px rgba(210,51,63,.7),inset 0 1px 0 rgba(255,255,255,.32);
    transition:transform .18s var(--ease-out),background .18s var(--ease-out)}
  .megahead .megaplay:hover{transform:scale(1.08);background:var(--accent2)}
  .megahead .megaplay svg{width:26px;height:26px;fill:#fff;margin-left:3px}
  .megahead .megatrailer{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:2}
  #gallery .topbar{position:sticky;top:0;z-index:6;background:transparent;padding:8px 0;margin-bottom:2px}
  .pf-any{background:#2A2128;color:#bde5ff;border-color:#3b82f655}
  .poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  .poster .grad{position:absolute;inset:0;z-index:2;
    background:linear-gradient(180deg,#0000 38%,#000c)}
  .pbody{padding:16px 18px 6px}
  .meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:10px}
  .tag{font-size:11.5px;font-weight:700;color:var(--muted);background:#191519;
    border:1px solid var(--line);padding:5px 10px;border-radius:999px}
  .where{font-size:12px;color:var(--muted);margin:2px 0 6px;display:flex;align-items:center;
    gap:6px;flex-wrap:wrap}
  .synopsis{font-size:14px;color:#D2CBC1;line-height:1.5;margin:8px 0 4px;min-height:42px}
  .matchline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
  .match{font-size:12px;font-weight:700;color:#FFF7F5;background:linear-gradient(135deg,#E0564E,#C22B38);
    padding:5px 11px;border-radius:999px;white-space:nowrap}
  .match b{font-weight:900}
  .reason{font-size:12.5px;color:var(--accent2);font-style:italic;font-weight:600;line-height:1.3}
  .choices{padding:8px 14px 16px;display:grid;gap:9px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .choices button{border:1px solid var(--line);background:var(--card2);color:var(--txt);
    font-size:13.5px;font-weight:700;padding:13px 10px;border-radius:13px;cursor:pointer;
    line-height:1.25;transition:transform .1s,background .15s,border-color .15s}
  .choices button:active{transform:scale(.97)}
  .c-watch{grid-column:1 / -1;background:linear-gradient(135deg,#8E2230,#E0564E)!important;
    border:none!important;color:#FFF7F5!important;font-size:15px!important;font-weight:900!important;
    box-shadow:0 12px 24px -10px #E0564E}
  .c-like:hover{border-color:var(--good)}
  .c-dislike:hover{border-color:var(--accent)}
  .c-idk{opacity:.85}
  .c-idk:hover{border-color:var(--muted)}

  .final-badge{text-align:center;font-size:13px;color:var(--good);font-weight:800;
    letter-spacing:1px;text-transform:uppercase;margin:0 0 6px}
  .final .poster{height:380px}
  .where-big{display:flex;align-items:center;gap:8px;justify-content:center;margin:14px 0 4px;flex-wrap:wrap}
  .where-big span{font-size:12.5px;color:var(--muted)}
  .center{text-align:center}
  .loader{text-align:center;color:var(--muted);padding:40px;font-size:14px}
  .spin{width:34px;height:34px;border:3px solid #332D34;border-top-color:var(--accent);
    border-radius:50%;margin:0 auto 14px;animation:rot 1s linear infinite}
  @keyframes rot{to{transform:rotate(360deg)}}
  .footer{text-align:center;font-size:11px;color:#6E6660;margin-top:16px}
  .chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 4px}
  .chip{font-size:11px;color:#D2CBC1;background:#22253c;border:1px solid var(--line);
    padding:4px 9px;border-radius:999px}

  /* --- détails enrichis --- */
  .credits{font-size:12.5px;color:#BCB3A8;line-height:1.45;margin:0 0 8px}
  .podwatch{margin:12px auto 2px;justify-content:center;min-height:44px;padding:0 18px;font-size:13.5px}
  .podwatch .ico{fill:currentColor;stroke:none}

  /* --- top 3 final --- */
  .alts-title{font-size:13px;color:var(--muted);text-align:center;margin:18px 0 8px;font-weight:700;
    letter-spacing:.3px}
  .alts{display:grid;gap:10px}
  .alt{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
    border-radius:16px;padding:10px;cursor:pointer;transition:border-color .15s,transform .15s,background .15s,box-shadow .15s}
  .alt:hover{border-color:var(--accent2);background:#272129;transform:translateY(-2px);box-shadow:0 10px 22px -14px #000c}
  .alt:active{transform:scale(.99)}
  .altposter{width:54px;height:78px;border-radius:10px;flex:0 0 auto;position:relative;overflow:hidden}
  .altposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .altinfo{min-width:0}
  .altt{font-size:14px;font-weight:800;line-height:1.2}
  .alty{font-weight:500;color:var(--muted);font-size:12px}
  .altpf{margin:5px 0 4px}
  .altswap{font-size:12px;color:var(--accent2);font-weight:700}

  /* --- mes listes --- */
  .libhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .libhead h2{font-size:17px;margin:0;font-weight:800;letter-spacing:-.2px}
  .libcount{font-size:12px;color:var(--bg);background:var(--accent2);border-radius:999px;
    padding:1px 8px;margin-left:4px;font-weight:800}
  .liblink{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline}
  .liblist{display:grid;gap:9px;margin-top:8px}
  .librow{display:flex;gap:11px;align-items:center;background:#1E191E;border:1px solid var(--line);
    border-radius:14px;padding:8px 10px}
  .librow.dragging{opacity:.6;border-color:var(--accent2);background:#251a20}
  .librow.tournlaunch{cursor:pointer;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
  .librow.tournlaunch:hover,.librow.tournlaunch:focus-visible{border-color:var(--accent2);background:#241d24;
    transform:translateY(-2px);box-shadow:0 10px 22px -14px #000c}
  .libgrip{flex:0 0 auto;color:#6E6660;font-size:14px;letter-spacing:-3px;cursor:grab;touch-action:none;
    padding:0 2px;user-select:none;-webkit-user-select:none}
  .libgrip:active{cursor:grabbing}
  .libposter{width:42px;height:60px;border-radius:8px;flex:0 0 auto;position:relative;overflow:hidden}
  .libposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .libinfo{min-width:0;flex:1}
  .libt{font-size:13.5px;font-weight:700;line-height:1.2}
  .libpf{margin-top:4px}
  .libdel{background:#332D34;border:none;color:var(--muted);width:44px;height:44px;border-radius:11px;
    cursor:pointer;font-size:13px;flex:0 0 auto;transition:background .15s,color .15s}
  .libdel:hover{background:#3a1622;color:var(--accent)}
  .libempty{font-size:13px;color:var(--muted);text-align:center;padding:14px 6px}

  /* --- peaufinage thème sombre --- */
  body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .movie{animation:cardIn .42s cubic-bezier(.22,1,.36,1)}
  @keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
  .choices button{transition:transform .1s,background .15s,border-color .15s,box-shadow .15s}
  .c-like:hover{background:#2A181C;box-shadow:0 6px 18px -10px var(--good)}
  .c-dislike:hover{background:#2a1622;box-shadow:0 6px 18px -10px var(--accent)}
  .btn{letter-spacing:.2px}
  .btn:hover{filter:brightness(1.06);box-shadow:0 14px 30px -10px var(--accent);transform:translateY(-1px)}
  .btn.ghost:hover{box-shadow:0 8px 22px -12px var(--accent),0 8px 22px -12px var(--blue)}
  .tag{transition:border-color .15s}
  .poster .ptitle{letter-spacing:-.3px}

  /* --- barre du haut (découverte) --- */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 12px}
  .tb{background:linear-gradient(#211c22,#211c22) padding-box,var(--duo) border-box;border:1.5px solid transparent;color:var(--txt);font-weight:700;font-size:13px;
    padding:8px 12px;border-radius:999px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;
    justify-content:center;gap:6px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
  .tb:active{transform:scale(.96)}
  .tb:hover{transform:translateY(-1px);box-shadow:-7px 5px 18px -10px rgba(210,51,63,.6),7px 5px 18px -10px rgba(74,140,240,.6)}
  .tb-acc{background:var(--duo);border:1.5px solid transparent;color:#fff;box-shadow:0 8px 18px -10px var(--accent),0 8px 18px -10px var(--blue)}
  .tb-step{font-size:12px;color:var(--muted)}

  /* ===== Switcher Galerie / Fiches — pastille segmentée flottante en verre, surlignage glissant
     (DA & animation inspirées de « Spatial Product Showcase », 21st.dev) ===== */
  .viewswitch{position:relative;z-index:5;display:none;align-items:center;gap:2px;padding:4px;border-radius:999px;
    background:rgba(18,15,18,.72);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
    box-shadow:0 12px 30px -14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.16)}
  .viewswitch.show{display:inline-flex;animation:vswIn .3s var(--ease-out)}
  @keyframes vswIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  /* le switcher vit au CENTRE de la topbar (galerie & fiches) — jamais superposé à un autre bouton */
  .vswslot{flex:1;display:flex;justify-content:center;min-width:0}
  /* mobile étroit : Filtres en icône seule, switcher compact, drapeau+VPN intacts → zéro chevauchement */
  @media (max-width:599px){
    .tblbl{display:none}
    .vswbtn{padding:0 10px;font-size:12px;height:36px}
    .locflag{padding:5px 7px}
    .vpnpill{padding:7px 9px;font-size:10.5px}
  }
  @media (max-width:420px){
    .viewswitch .vswbtn span{display:none}
    .viewswitch .vswbtn{padding:0 9px}
  }
  /* surlignage « island » qui glisse d'un onglet à l'autre (position/largeur posées en JS) */
  .vswpill{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:999px;z-index:0;
    background:linear-gradient(180deg,rgba(224,86,78,.95),rgba(194,43,56,.96));
    box-shadow:0 8px 20px -8px var(--accent),inset 0 1px 0 rgba(255,255,255,.30);
    transition:transform .42s cubic-bezier(.5,1.25,.4,1),width .42s cubic-bezier(.5,1.25,.4,1)}
  .vswbtn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-width:0;height:38px;padding:0 14px;border:none;background:none;cursor:pointer;font-family:inherit;
    font-weight:800;font-size:13px;letter-spacing:.2px;color:var(--muted);border-radius:999px;
    transition:color .3s var(--ease-out)}
  .vswbtn .ico{width:16px;height:16px}
  .vswbtn[hidden]{display:none}   /* le 3e segment « Listes » reste masqué hors mode tournoi */
  .vswbtn.on{color:#fff}
  .vswbtn:not(.on):hover{color:var(--txt)}
  /* compact : seul le segment sélectionné montre son libellé ; les autres = icône seule → le toggle ne recouvre aucun bouton */
  .vswbtn:not(.on) span{display:none}
  .vswbtn:not(.on){padding:0 10px}
  .vswbtn .ico{display:inline-block}
  /* entrée « blur-in » du contenu au changement de vue */
  @keyframes viewEnter{from{opacity:0;filter:blur(10px);transform:translateY(16px)}to{opacity:1;filter:blur(0);transform:none}}
  .viewenter{animation:viewEnter .5s var(--ease-out)}
  /* Fond radial réactif au mode (BackgroundGradient de « Spatial Product Showcase ») : bleu = Galerie, rouge = Fiches.
     Deux couches en fondu croisé, derrière tout le contenu ; le bleu reprend l'accent du logo (rouge→bleu). */
  #modeglow{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  #modeglow .glow{position:absolute;inset:0;opacity:0;transition:opacity 1.2s cubic-bezier(.16,1,.3,1)}
  #modeglow .glow-gal{background:radial-gradient(760px 560px at 6% 40%,rgba(90,160,255,.15),transparent 60%)}
  #modeglow .glow-cards{background:radial-gradient(820px 600px at 94% 60%,rgba(224,86,78,.17),transparent 60%)}
  body.mode-gallery #modeglow .glow-gal{opacity:1}
  body.mode-cards #modeglow .glow-cards{opacity:1}

  /* ===== Toasts (confirmations / erreurs) — pilule en verre, haut-centre, empilable ===== */
  #toastwrap{position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:200;
    display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:92vw}
  .toast{pointer-events:auto;display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:14px;cursor:pointer;
    background:rgba(30,25,30,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid rgba(255,255,255,.10);box-shadow:0 16px 40px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);
    color:var(--txt);font-size:13.5px;font-weight:700;letter-spacing:.1px;max-width:100%;animation:toastIn .3s var(--ease-out)}
  .toast .ico{flex:0 0 auto}
  .toast.ok .ico{color:var(--good)}
  .toast.err{border-color:#D2333F55} .toast.err .ico{color:var(--accent)}
  .toast.out{animation:toastOut .24s var(--ease-in) forwards}
  @keyframes toastIn{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.97)}}

  /* Pilules plateformes cliquables → page « où regarder » du titre */
  .pfwrap{display:inline-flex;gap:6px;flex-wrap:wrap;text-decoration:none;border-radius:8px}
  /* le survol ne teinte QUE la pilule survolée (pas toute la rangée) — voir .pf-link:hover */
  .pfnone{font-size:11px;padding:5px 10px;color:var(--muted);background:#211d22;border:1px dashed #3A333A;border-radius:99px;
    display:inline-flex;align-items:center;font-weight:600}
  /* Bande-annonce inline (fiche détaillée) */
  .dtrailerbox{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin-top:14px;background:#000;
    border:1px solid rgba(255,255,255,.08)}
  .dtrailerbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  /* Bande-annonce plein écran (lecteur intégré) */
  .trsheet{position:relative;width:min(980px,94vw);max-width:94vw}
  #trailermodal .dclose{position:absolute;top:-42px;right:0;z-index:2;background:rgba(30,25,30,.8);border:1px solid var(--line)}
  .trwrap{position:relative;aspect-ratio:16/9;width:100%;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 90px -20px #000}
  .trwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .trnone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--muted)}
  .duelact{display:flex;gap:8px;margin-top:auto;padding-top:9px}
  .duelact .duelinfo{flex:1;height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;padding:0 8px}
  /* Podium : affiche HD + description complète + bande-annonce intégrée */
  .podposter img{image-rendering:auto}
  .pdline{text-align:center;font-size:13px;font-weight:700;color:var(--muted);margin:2px 0 8px;font-variant-numeric:tabular-nums}
  .final .synopsis.center{max-height:none;-webkit-line-clamp:unset;display:block;font-size:14px;line-height:1.6}
  .podtr{margin:14px 0 4px}
  .podtrbtn{position:relative;width:100%;aspect-ratio:16/9;border:none;border-radius:14px;overflow:hidden;cursor:pointer;
    background-size:cover;background-position:center;box-shadow:0 16px 40px -18px #000}
  .podtrbtn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,10,.15),rgba(8,6,10,.55))}
  .podtrplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:58px;height:58px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;background:var(--duo);color:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.7)}
  .podtrplay .ico{width:26px;height:26px;margin-left:3px}
  .podtrlbl{position:absolute;left:12px;bottom:10px;z-index:1;color:#fff;font-weight:800;font-size:13px;letter-spacing:.3px;text-shadow:0 2px 8px #000}

  /* Reveal-on-hover des affiches de la galerie : léger zoom (effet Ken Burns) + le titre remonte */
  .gtile img{transition:transform .4s var(--ease-out),filter .3s var(--ease-out)}
  .gtile:hover img{transform:scale(1.08)}
  .gtile .gtitle{transition:transform .3s var(--ease-out)}
  .gtile:hover .gtitle{transform:translateY(-2px)}

  /* ===== Navigation principale : barre d'onglets en bas (mobile) → pilule flottante en haut (desktop).
     DOM unique, bascule 100% CSS via les breakpoints (900px = mobile↔desktop). ===== */
  #bottomnav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;
    display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;max-width:96vw;
    background:rgba(18,15,18,.82);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
    border:1px solid rgba(255,255,255,.10);box-shadow:0 16px 40px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14)}
  .navtab{flex:0 0 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;
    background:none;border:none;cursor:pointer;color:var(--muted);font-family:inherit;font-weight:700;font-size:13px;
    padding:8px 14px;border-radius:999px;min-width:44px;min-height:44px;transition:color .18s var(--ease-out),background .18s var(--ease-out)}
  .navtab .ico{width:19px;height:19px}
  .navtab .navlbl{white-space:nowrap}
  .navtab.on{color:#fff;background:var(--duo);box-shadow:0 6px 16px -8px var(--accent),0 6px 16px -8px var(--blue)}
  .navtab:not(.on):hover{color:var(--txt)}
  /* mobile étroit : 5 onglets — le libellé ne s'affiche que sur l'onglet actif (la pilule reste identique) */
  @media (max-width:599px){
    .navtab{padding:8px 12px}
    .navtab:not(.on) .navlbl{display:none}
  }
  @media (max-width:899px){
    body.has-bottomnav .app{padding-bottom:80px}                     /* le contenu ne passe plus sous la pilule */
    body.has-bottomnav.selcta-on .app{padding-bottom:158px}          /* + place pour le CTA flottant « Valider » */
  }
  @media (min-width:900px){
    #bottomnav{bottom:auto;top:14px}
    body.has-bottomnav .app{padding-top:72px}                        /* la pilule du haut ne recouvre jamais la topbar */
    /* la barre collante (galerie / listes) se colle SOUS la pilule de nav, pas sous elle, pendant le défilement */
    body.has-bottomnav #gallery .topbar, body.has-bottomnav .libbar{top:78px}
  }
  /* CTA « Valider la sélection » : pilule flottante unique, rattachée au <body> (aucun ancêtre transformé),
     donc position:fixed vraie → toujours 100% visible, ancrée juste au-dessus de la barre de nav */
  #selCta{position:fixed;left:50%;transform:translateX(-50%);z-index:44;display:none;align-items:center;justify-content:center;gap:9px;
    width:auto;min-width:220px;max-width:min(400px,92vw);margin:0;
    bottom:calc(80px + env(safe-area-inset-bottom))}
  #selCta.show{display:flex;animation:selCtaIn .3s var(--ease-out)}
  @keyframes selCtaIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}
  @media (min-width:900px){ #selCta{bottom:22px} }
  /* ===== Barre « Ajouter à l'écran d'accueil » ===== */
  #installbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));z-index:46;
    display:flex;align-items:center;gap:10px;padding:9px 10px 9px 15px;border-radius:14px;max-width:92vw;
    background:rgba(30,25,30,.9);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid rgba(255,255,255,.10);box-shadow:0 16px 40px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);
    animation:toastIn .3s var(--ease-out)}
  #installbar>span{font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;white-space:nowrap}
  #installbar .ib-go{background:radial-gradient(130% 175% at 28% 0%,#E0564E 0%,#C22B38 100%);border:none;color:#fff;font-weight:800;
    font-size:12.5px;padding:8px 14px;border-radius:10px;cursor:pointer}
  #installbar .ib-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:4px 7px;line-height:1}
  @media (min-width:900px){ #installbar{bottom:auto;top:72px} }
  /* ===== Pull-to-refresh : indicateur ===== */
  #ptr{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-120%);z-index:44;width:38px;height:38px;border-radius:50%;
    display:none;align-items:center;justify-content:center;margin-top:8px;
    background:rgba(30,25,30,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 20px -8px #000;transition:transform .15s var(--ease-out)}
  #ptr.show{display:flex}
  /* ===== Swipe-to-delete : les lignes de liste captent le geste horizontal, le scroll vertical reste natif ===== */
  .librow.swipedel{touch-action:pan-y;will-change:transform}

  /* --- toggles déjà vu / à voir --- */
  .cardtop{position:relative}
  .toggles{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:4}
  .tg{display:flex;align-items:center;gap:6px;background:#0009;backdrop-filter:blur(6px);
    border:1px solid #ffffff33;color:#fff;font-size:11.5px;font-weight:700;padding:7px 10px;border-radius:999px;cursor:pointer}
  .tg span{display:inline}
  .tg.on{background:linear-gradient(135deg,#8E2230,#E0564E);border-color:transparent;color:#FFF7F5}
  .tg:active{transform:scale(.96)}

  /* --- actions du bas --- */
  .c-no{background:#241620!important;border:1px solid #4a2030!important;color:#ff9bb0!important;font-weight:800!important;padding:15px!important;font-size:15px!important}
  .c-no:hover{border-color:var(--accent)!important;background:#2a1622!important}
  .c-add{background:linear-gradient(135deg,#8E2230,#E0564E)!important;border:none!important;color:#FFF7F5!important;
    font-weight:900!important;padding:15px!important;font-size:15px!important;box-shadow:0 12px 24px -10px #E0564E}
  .c-add.added{filter:saturate(.6) brightness(.92)}
  .moreinfo{width:100%;background:#1E191E;border:1px solid var(--line);color:var(--accent2);font-weight:700;
    font-size:12.5px;padding:9px;border-radius:11px;cursor:pointer;margin-top:4px}
  .moreinfo:hover{border-color:var(--accent2)}

  /* --- pills sélecteur plateformes --- */
  .pfpick{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  .pfpick .pill{cursor:pointer;opacity:.5;filter:grayscale(.4);transition:opacity .15s,filter .15s,box-shadow .15s}
  .pfpick .pill.on{opacity:1;filter:none;box-shadow:0 0 0 2px var(--accent2)}

  /* --- modal fiche détaillée --- */
  .modal{position:fixed;inset:0;background:rgba(4,3,5,.52);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:none;
    align-items:flex-end;justify-content:center;z-index:50;padding:0}
  .modal.open{display:flex;animation:fade .25s ease}
  /* Liquid glass : les modales flottantes (fiche, plateformes, connexion…) partagent ce verre dépoli translucide */
  .sheet{position:relative;background:linear-gradient(180deg,rgba(42,36,43,.80),rgba(20,17,20,.76));
    -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
    border:1px solid rgba(255,255,255,.10);border-radius:24px 24px 0 0;
    width:100%;max-width:460px;max-height:92vh;overflow:auto;padding:20px 18px 22px;
    box-shadow:0 -24px 60px -12px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16)}
  @media(min-width:480px){ .modal{align-items:center} .sheet{border-radius:24px} }
  .dclose{position:absolute;top:12px;right:12px;background:#191519;border:1px solid var(--line);color:var(--muted);
    width:44px;height:44px;border-radius:12px;cursor:pointer;font-size:14px;z-index:2}
  /* --- bandeau de consentement (annonces) --- */
  .ckbar{position:fixed;left:0;right:0;bottom:0;z-index:88;padding:12px;
    background:linear-gradient(180deg,rgba(26,22,27,.92),rgba(14,12,15,.97));
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.10);
    padding-bottom:calc(12px + env(safe-area-inset-bottom));animation:ckIn .3s var(--ease-out)}
  @keyframes ckIn{from{transform:translateY(100%)}to{transform:none}}
  @media(prefers-reduced-motion:reduce){ .ckbar{animation:none} }
  .ckbar[hidden]{display:none}
  body.has-bottomnav .ckbar{bottom:calc(64px + env(safe-area-inset-bottom))}
  .ckin{max-width:760px;margin:0 auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .cktxt{flex:1;min-width:220px}
  .cktxt b{font-size:13px;font-weight:800;display:block;margin-bottom:2px}
  .cktxt p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.45}
  .ckbtns{display:flex;gap:8px;align-items:center;flex:0 0 auto;flex-wrap:wrap}
  .ckbtns .btn{margin:0;min-height:40px;padding:0 16px;font-size:12.5px;width:auto}
  /* --- pied de page : attribution TMDB (obligatoire) + liens légaux --- */
  .sitefoot{margin:34px 2px 8px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
  .tmdbattr{font-size:10.5px;color:var(--muted);line-height:1.5;margin:0 auto;max-width:520px}
  .tmdbattr a{color:#8fbfe0;text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
  .tmdbattr a:hover{text-decoration:underline}
  .footlinks{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:10px 0 0;
    font-size:11px;color:#4a4450}
  .footlink{background:none;border:0;padding:8px 4px;min-height:36px;color:var(--muted);font-family:inherit;font-size:11px;
    font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
  .footlink:hover{color:var(--accent2);text-decoration:underline}
  /* --- mentions légales / confidentialité / crédits --- */
  .legalsheet{max-width:520px}
  .legaltabs{display:flex;gap:6px;margin:10px 0 12px;flex-wrap:wrap}
  .legaltab{flex:0 0 auto;min-height:34px;padding:0 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:11.5px;
    background:var(--card2);border:1px solid var(--line);color:var(--muted);font-family:inherit}
  .legaltab:hover{border-color:var(--accent2);color:var(--txt)}
  .legaltab.on{background:var(--duo-h);border-color:transparent;color:#fff}
  .legalbody{font-size:12.5px;color:#BCB3A8;line-height:1.6;max-height:52vh;overflow:auto}
  .legalbody h4{color:var(--txt);font-size:13.5px;margin:14px 0 4px;font-family:var(--serif)}
  .legalbody h4:first-child{margin-top:0}
  .legalbody p{margin:0 0 8px}
  .legalbody ul{margin:0 0 8px;padding-left:18px}
  .legalbody li{margin-bottom:4px}
  .legalbody a{color:#8fbfe0}
  .legalbody code{background:#241f27;padding:1px 5px;border-radius:4px;font-size:11.5px}
  /* --- visite guidée : le concept en 5 slides --- */
  .apptitle-action{font:inherit;letter-spacing:inherit;text-transform:inherit;text-shadow:inherit;background:none;border:0;
    color:inherit;padding:2px;cursor:pointer;display:inline-block}
  .toursheet{max-width:440px;padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:92vh}
  .tourvis{position:relative;height:186px;flex:0 0 auto;overflow:hidden;
    background:linear-gradient(140deg,#241b22,#141020);display:flex;align-items:center;justify-content:center}
  .tourbody{padding:16px 20px 4px;overflow:auto}
  .tourstep{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    background:var(--duo-h);-webkit-background-clip:text;background-clip:text;color:transparent}
  .tourtitle{font-family:var(--serif);font-size:21px;font-weight:800;line-height:1.2;margin:5px 0 7px}
  .tourtext{font-size:13.5px;color:#BCB3A8;line-height:1.55;margin:0}
  .tourlist{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
  .tourlist li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--txt);line-height:1.45}
  .tourlist li b{color:#fff;font-weight:800}
  .tourlist .tico{flex:0 0 20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;
    background:#241a20;border:1px solid var(--line);font-size:11px;margin-top:1px}
  .tourdots{display:flex;gap:6px;justify-content:center;padding:14px 0 10px;flex:0 0 auto}
  .tourdot{width:7px;height:7px;border-radius:50%;background:#3A333A;cursor:pointer;padding:0;border:0;
    transition:background .2s var(--ease-out),width .2s var(--ease-out)}
  .tourdot.on{width:20px;border-radius:99px;background:var(--duo-h)}
  .tournav{display:flex;gap:10px;padding:0 20px 18px;flex:0 0 auto}
  .tournav .btn{flex:1;margin:0}
  .tournav .btn.ghost[disabled]{opacity:.35;pointer-events:none}
  /* mini-maquettes des slides (pas d'image externe : tout est dessiné en CSS) */
  .tvrow{display:flex;gap:7px;align-items:center;justify-content:center}
  .tvcard{width:52px;height:76px;border-radius:8px;background:linear-gradient(160deg,#332D34,#0c0d18);
    border:1px solid #ffffff14;position:relative;overflow:hidden;flex:0 0 auto}
  .tvcard.sel{border-color:var(--accent);box-shadow:0 0 0 2px #D2333F55}
  .tvcard.blue{border-color:var(--blue);box-shadow:0 0 0 2px #4A8CF055}
  .tvcard img,.tvgrid span img{width:100%;height:100%;object-fit:cover;display:block}
  .tvvs{font-family:var(--serif);font-weight:900;font-size:15px;
    background:var(--duo-h);-webkit-background-clip:text;background-clip:text;color:transparent}
  .tvpill{font-size:9px;font-weight:800;padding:3px 7px;border-radius:99px;background:#2A2128;border:1px solid #3b82f655;color:#bde5ff}
  .tvbar{height:5px;border-radius:99px;background:#241f27;overflow:hidden;width:74px}
  .tvbar i{display:block;height:100%;background:var(--duo-h)}
  .tvgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:212px}
  .tvgrid span{aspect-ratio:2/3;border-radius:5px;background:linear-gradient(160deg,#3a2f3a,#14111a);border:1px solid #ffffff10}
  .tvgrid span.on{border-color:var(--accent2)}
  .tvcol{display:flex;flex-direction:column;gap:8px;align-items:center}
  /* --- confirmation d'action (remplace confirm()/alert()) --- */
  .cfsheet{max-width:380px;text-align:center;padding:26px 22px 20px;border-radius:24px}
  @media(max-width:479px){ .modal.cfmodal{align-items:center;padding:18px} .cfsheet{border-radius:24px} }
  .cficon{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(#1b171c,#1b171c) padding-box,var(--duo) border-box;border:1.5px solid transparent}
  .cficon .ico{width:24px;height:24px}
  .cficon.danger{background:#2A181C;border:1.5px solid #D2333F88;color:#F3ABA4}
  .cftitle{font-family:var(--serif);font-size:19px;font-weight:800;line-height:1.25}
  .cfmsg{font-size:13.5px;color:var(--muted);line-height:1.5;margin:8px 0 18px}
  .cfrow{display:flex;gap:10px}
  .cfrow .btn{flex:1;margin:0}
  .cfrow .btn.danger{background:linear-gradient(135deg,#8E2230,var(--accent))}
  .dtop{display:flex;gap:14px;margin-bottom:14px}
  .dposter{width:96px;height:140px;border-radius:12px;flex:0 0 auto;position:relative;overflow:hidden}
  .dposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .dhead{min-width:0;padding-right:30px}
  .dtitle{font-size:20px;font-weight:900;line-height:1.15}
  /* Connexion : séparateur "ou" + message d'erreur */
  .authdiv{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase}
  .authdiv span{flex:1;height:1px;background:var(--line)}
  .autherr{background:#2A181C;border:1px solid #D2333F55;color:#F3CBC6;font-size:12.5px;font-weight:700;
    padding:9px 12px;border-radius:10px;margin-bottom:12px}
  .authnote{font-size:11.5px;color:var(--muted);margin:0 0 14px}
  .dot{font-size:12px;color:var(--muted);font-style:italic;margin-top:2px}
  .dmeta{font-size:12.5px;color:#BCB3A8;margin-top:8px}
  .drates{display:flex;align-items:center;gap:10px;margin-top:8px}
  .drate{font-size:13px;font-weight:800;color:#D8B15B}
  .drate small{color:var(--muted);font-weight:600}
  .dimdb{font-size:12px;font-weight:800;color:#f5c518;text-decoration:none;border:1px solid #f5c51855;
    padding:3px 8px;border-radius:7px}
  .dpf{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
  .dinfo{font-size:13px;color:#D2CBC1;margin:6px 0;line-height:1.45}
  .dinfo b{color:var(--txt)}
  .dsyn{font-size:14px;color:#D2CBC1;line-height:1.55;margin:12px 0}
  .dtoggles{display:flex;gap:9px;margin:6px 0 12px}
  .dtoggles .tg{flex:1;justify-content:center;background:#252026;color:var(--txt);border-color:var(--line)}
  .dtoggles .tg.on{background:linear-gradient(135deg,#8E2230,#E0564E);color:#FFF7F5;border-color:transparent}
  .dtrailer{display:block;text-align:center;text-decoration:none;margin-top:8px}

  /* --- duel de tournoi --- */
  .vs-q{text-align:center;font-size:18px;font-weight:800;margin:4px 0 14px}
  .vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;position:relative}
  .vs-or{position:absolute;left:50%;top:80px;transform:translateX(-50%);
    background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:900;font-size:12px;
    padding:6px 9px;border-radius:999px;z-index:3;box-shadow:0 6px 16px -6px var(--accent)}
  .vs-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;
    transition:border-color .15s,transform .1s;display:flex;flex-direction:column}
  .vs-card:hover{border-color:var(--good)}
  .vs-card:active{transform:scale(.98)}
  .vsposter{height:190px;position:relative;display:flex;align-items:flex-end;padding:10px;color:#fff}
  .vsposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .vsposter .grad{position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#000c)}
  .vstitle{position:relative;z-index:2;font-size:16px;font-weight:900;text-shadow:0 2px 12px #000}
  .vsmeta{font-size:11.5px;color:var(--muted);padding:9px 10px 0}
  .vspf{padding:6px 10px 0;display:flex;gap:5px;flex-wrap:wrap}
  .vsinfo{margin:8px 10px 0;background:#1E191E;border:1px solid var(--line);color:var(--accent2);
    font-size:11.5px;font-weight:700;padding:7px;border-radius:9px;cursor:pointer}
  .vspick{margin:8px 10px 12px;background:linear-gradient(135deg,#8E2230,#E0564E);border:none;color:#FFF7F5;
    font-weight:900;font-size:13px;padding:11px;border-radius:11px;cursor:pointer}

  /* --- page de critères --- */
  .tbgrp{display:flex;gap:8px;align-items:center}
  /* Filtre = onglet en superposition par-dessus l'écran courant */
  /* scrim léger : on garde les films visibles derrière ; padding → le panneau « flotte » et laisse voir les films sur les bords */
  .critoverlay{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;background:rgba(8,6,8,.32);
    padding:10px;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom));animation:fade .2s ease}
  .critoverlay.open{display:flex}
  /* Liquid glass : verre dépoli translucide qui flotte au-dessus des films (blur + saturate laissent transparaître les affiches floutées) */
  #crithost{position:relative;display:flex;flex-direction:column;max-height:100%;max-width:680px;width:100%;margin:0 auto;
    border-radius:26px;overflow:hidden;
    background:linear-gradient(180deg,rgba(44,38,45,.66),rgba(18,15,18,.60));
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 30px 80px -20px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.16)}
  /* reflet spéculaire en haut, pour l'aspect « liquide » */
  #crithost::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;z-index:0;
    background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0))}
  #crithost>*{position:relative;z-index:1}
  #crithost>.critwrap{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;
    background:transparent;border:none;box-shadow:none;border-radius:0}   /* le verre du panneau transparaît */
  .critwrap{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 16px 8px;box-shadow:var(--shadow)}
  .crith{font-size:20px;margin:0 0 2px;font-weight:900}
  .crith small{color:var(--muted);font-weight:600;font-size:13px}
  .critsub{font-size:12.5px;color:var(--muted);margin:0 0 14px;line-height:1.5}
  .critsec{margin:0 0 14px}
  .critlab{font-size:12px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px}
  .chips2{display:flex;flex-wrap:wrap;gap:8px}
  .chipc{min-height:40px;padding:9px 14px;border-radius:999px;border:1.5px solid transparent;
    background:linear-gradient(var(--card2),var(--card2)) padding-box,var(--duo) border-box;
    color:var(--txt);font-size:13.5px;font-weight:700;cursor:pointer;transition:transform .12s,box-shadow .15s}
  .chipc:hover{transform:translateY(-1px);box-shadow:-6px 4px 16px -11px rgba(210,51,63,.6),6px 4px 16px -11px rgba(74,140,240,.6)}
  .chipc:active{transform:scale(.96)}
  /* Filtres compacts : deux sliders côte à côte (note / durée), graduations sous chaque piste */
  .critrow2x{display:flex;gap:16px}
  .crithalf{flex:1;min-width:0}
  .crithalf .raterange{margin:0 4px 2px}
  .ticks{display:flex;justify-content:space-between;font-size:9.5px;font-weight:700;color:var(--muted);
    margin:2px 8px 0;font-variant-numeric:tabular-nums;pointer-events:none}
  .critwrap.compact{padding:10px 12px 4px}
  .critwrap.compact .critlab2{margin:7px 0 4px}
  .critwrap.compact .chipc{min-height:28px;padding:4px 9px;font-size:11.5px}
  .critwrap.compact .seg{margin:8px 0 5px}
  .critwrap.compact .segb{padding:5px 12px;font-size:12px}
  .critwrap.compact #critActor{padding:8px 12px;font-size:13px}
  .critwrap.compact .dualrange{height:24px;margin:0 8px 2px}
  .critwrap.compact .critchips{margin:0 0 4px}
  .critwrap.compact .raterange input[type=range]{height:5px}
  .chipc.on{background:linear-gradient(135deg,#2C171B,#2A181C);border-color:var(--good);color:#F3CBC6}
  .chipc.on::before{content:"✓ ";color:var(--good);font-weight:900}
  .chipc.pill.on{box-shadow:0 0 0 2px var(--accent2)}
  /* Puce plateforme sélectionnée = logo (le nom s'affiche au survol via [data-tip]) */
  .chipc.chiplogo{padding:5px 10px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}
  .chipc.chiplogo::before{content:none}
  .chipc.chiplogo img{width:26px;height:26px;border-radius:7px;object-fit:contain;background:#fff;padding:2px;display:block}
  #critActor,#tournSearch,#galSearchInput{width:100%;background:#191519;border:1px solid var(--line);color:var(--txt);border-radius:12px;
    padding:12px 14px;font-size:14px;outline:none}
  #critActor:focus,#tournSearch:focus,#galSearchInput:focus{border-color:var(--accent)}
  .galsearch{margin:0 0 10px;display:flex;gap:8px;align-items:stretch}
  .galsearch #galSearchInput{flex:1 1 auto;min-width:0}
  .galsortsel{flex:0 0 auto;background:#191519;border:1px solid var(--line);color:var(--txt);border-radius:12px;
    padding:0 30px 0 12px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;
    -webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239C948B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;
    transition:border-color .15s var(--ease-out)}
  .galsortsel:hover{border-color:var(--accent2)}
  .galsortsel:focus{border-color:var(--accent);outline:none}
  .critclear{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;text-decoration:underline;padding:6px 2px}
  /* --- slider années à 2 curseurs --- */
  .dualrange{position:relative;height:36px;margin:0 10px 4px}
  .dualrange input[type=range]{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;
    -webkit-appearance:none;appearance:none;background:none;pointer-events:none;height:0;outline:none;margin:0}
  .dualrange input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;
    width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));
    border:2px solid #ffffff55;cursor:pointer;box-shadow:0 4px 10px -3px #000}
  .dualrange input[type=range]::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;
    background:var(--accent);border:2px solid #ffffff55;cursor:pointer}
  .dualrange input[type=range]:focus-visible::-webkit-slider-thumb,
  .raterange input[type=range]:focus-visible::-webkit-slider-thumb{
    box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent2)}
  .dualrange input[type=range]:focus-visible::-moz-range-thumb,
  .raterange input[type=range]:focus-visible::-moz-range-thumb{
    box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent2)}
  .drtrack{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;height:6px;border-radius:999px;background:#2B252B}
  .drfill{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
  /* --- pop-up plateformes --- */
  .provlist{display:flex;flex-direction:column;gap:6px;max-height:56vh;overflow:auto}
  .provrow{display:flex;align-items:center;gap:10px;background:#1E191E;border:1px solid var(--line);border-radius:12px;
    padding:11px 13px;min-height:44px;width:100%;color:var(--txt);font-family:inherit;text-align:left;cursor:pointer;font-weight:700;font-size:14px;transition:border-color .12s,background .12s}
  .provrow:hover{border-color:var(--accent2)}
  .provrow.on{border-color:var(--good);background:#2A181C}
  .provrow .pcheck{margin-left:auto;color:var(--good);font-weight:900;opacity:0}
  .provrow.on .pcheck{opacity:1}
  .provlogo{width:30px;height:30px;border-radius:8px;object-fit:contain;background:#fff;padding:2px;flex:0 0 auto}
  .provlogoph{background:#2A2530}
  .provrowname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vpn-more{font-size:11px;padding:5px 9px;background:#252026;color:var(--accent2);border:1px solid var(--line);
    border-radius:999px;font-weight:800;cursor:pointer}
  .vpn-more:hover{border-color:var(--accent2)}
  /* pilule VPN : ouvre la liste des pays (aucune redirection externe) */
  .vpnpill{font-size:11px;padding:4px 9px;background:#33161B;color:#ECA8A1;border:1px solid #E0564E55;
    border-radius:999px;font-weight:700;cursor:pointer;transition:border-color .15s var(--ease-out);display:inline-flex;align-items:center;gap:5px}
  .vpnpill:hover{border-color:var(--accent2)}
  /* logo de plateforme : fond blanc pour les logos transparents, taille compacte */
  .pflogo{height:18px;width:auto;max-width:64px;border-radius:4px;background:#fff;padding:1px 2px;object-fit:contain;vertical-align:middle;display:inline-block}
  .pf-logo{padding:4px 8px}
  .pf-logo .pflogo{height:20px}
  .vpncc{font-size:10.5px;font-weight:800;background:#0003;border-radius:999px;padding:1px 6px;min-width:16px;text-align:center}
  .pfgrp{display:inline-flex;align-items:center;gap:4px;margin-right:8px}
  .dinfo-pf{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
  /* liste des pays regroupée PAR PLATEFORME (modale VPN) */
  .provgrp{padding:9px 2px;border-bottom:1px solid var(--line)}
  .provgrp:last-child{border-bottom:none}
  .provgrp-h{display:flex;align-items:center;gap:8px;font-size:13.5px}
  .provgrp-h .pflogo{height:22px}
  .provgrp-n{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--muted);background:#2A2530;border-radius:999px;padding:2px 8px}
  .provgrp-c{margin-top:4px;color:var(--muted);font-size:12.5px;line-height:1.5;padding-left:2px}
  /* --- fiche ultra-détaillée « Je regarde » --- */
  .megahead{position:relative;height:210px;background:#191519 center/cover no-repeat}
  .megahead .mgrad{position:absolute;inset:0;background:linear-gradient(180deg,#0003 20%,var(--card) 96%)}
  .megahead .dclose{z-index:3}
  .megabody{padding:0 18px 22px;margin-top:-46px;position:relative;z-index:2}
  .megatitle{font-size:24px;font-weight:900;line-height:1.1;text-shadow:0 3px 14px #000}
  .megatag{font-size:13px;color:var(--accent2);font-style:italic;margin:3px 0 0}
  .megameta{font-size:12.5px;color:#BCB3A8;margin:8px 0 2px}
  .megasec{font-size:11.5px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 7px}
  .megacast{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;font-size:12.5px;color:#D2CBC1}
  .megacast b{color:var(--txt);font-weight:700}
  .recstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .rectile{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--card2)}
  .rectile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .rectile .rt{position:absolute;left:5px;right:5px;bottom:4px;font-size:10px;font-weight:700;z-index:2;color:#fff;
    text-shadow:0 1px 6px #000;line-height:1.15}
  .rectile .rg{position:absolute;inset:0;background:linear-gradient(180deg,#0000 55%,#000c)}
  .critcta{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;padding:12px 2px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(18,15,18,0),rgba(18,15,18,.88) 46%);margin-top:6px}
  .critcount{font-weight:700;opacity:.85}

  /* --- accessibilité / finition --- */
  button:focus-visible, input:focus-visible, .chipc:focus-visible, a:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
  @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }
  .skeleton{background:linear-gradient(100deg,#1E1A1F 30%,#2B252B 50%,#1E1A1F 70%);background-size:200% 100%;
    animation:sk 1.2s linear infinite;border-radius:12px}
  @keyframes sk{to{background-position:-200% 0}}
  /* Skeleton de chargement du catalogue (remplace le spinner nu, ui-ux-pro-max §3) */
  .galsk{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px 0}
  .galsk .sk{aspect-ratio:2/3;border-radius:12px}

  /* --- accueil : hub d'actions --- */
  #intro{position:relative}
  .flagbtn{position:absolute;top:10px;right:6px;z-index:6;font-size:24px;line-height:1;background:var(--card);
    border:1px solid var(--line);border-radius:12px;padding:7px 11px;min-height:44px;cursor:pointer;box-shadow:var(--shadow)}
  .flagbtn:hover{border-color:var(--accent2)}
  /* Bouton compte (accueil, haut-gauche) : icône silhouette par défaut ; avatar/initiale une fois connecté */
  .acctbtn{position:absolute;top:10px;left:6px;z-index:6;min-width:44px;min-height:44px;line-height:1;background:var(--card);
    border:1px solid var(--line);border-radius:12px;padding:0;cursor:pointer;box-shadow:var(--shadow);
    display:flex;align-items:center;justify-content:center;color:var(--txt);font-weight:800;font-size:13px;overflow:hidden}
  .acctbtn:hover{border-color:var(--accent2)}
  .acctbtn.on{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff}
  .acctbtn.syncerr{box-shadow:0 0 0 2px #f0a500, var(--shadow)}
  .acctbtn .ico{width:20px;height:20px}
  .home{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;padding:10px 0 6px;text-align:center}
  .logowrap{margin-bottom:18px}
  /* Logo PNG réellement transparent : aucun masque ou mode de fusion requis. */
  .brandrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 0}
  .brandlogo{width:64px;height:64px;flex:0 0 auto;display:block;object-fit:contain;
    filter:drop-shadow(0 7px 16px rgba(91,61,255,.22));pointer-events:none}
  /* Sections de l'accueil : « Cette semaine » + « Sagas cultes » */
  .homesec{width:100%;max-width:640px;display:flex;align-items:baseline;gap:9px;margin:14px 2px 7px;text-align:left}
  .homesec h2{font-size:17px;font-weight:800;margin:0;letter-spacing:.2px;white-space:nowrap}
  .homesec .hsub{color:var(--muted);font-size:12px;font-weight:600}
  @media(max-width:599px){ .homesec .hsub{display:none} }   /* mobile : le titre seul, sur une ligne */
  /* Rangées films/séries : affiches COLLÉES (gap 0, coins arrondis aux extrémités), titre en overlay */
  .hscroll{width:100%;max-width:640px;display:flex;gap:0;overflow-x:auto;padding:2px 0 8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    min-height:169px}                          /* réserve la hauteur d'une affiche → pas de décalage quand elle arrive (CLS) */
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll.sagarow{gap:10px;padding:2px 2px 10px;min-height:100px}   /* tuiles sagas/acteurs plus courtes */
  /* Rail : flèches gauche/droite pour parcourir chaque rangée d'accueil */
  .hrail{position:relative;width:100%;max-width:640px;margin:0 auto}
  .hrail .hscroll{max-width:none}
  .hnav{position:absolute;top:0;bottom:8px;width:44px;border:none;cursor:pointer;z-index:6;
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:800;
    opacity:0;transition:opacity .18s var(--ease-out);-webkit-tap-highlight-color:transparent;padding:0}
  .hnav .hnavc{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
    background:rgba(20,17,20,.82);border:1px solid var(--line);box-shadow:0 4px 14px -4px rgba(0,0,0,.6)}
  .hnav.prev{left:0;justify-content:flex-start;background:linear-gradient(90deg,var(--bg) 26%,transparent)}
  .hnav.next{right:0;justify-content:flex-end;background:linear-gradient(270deg,var(--bg) 26%,transparent)}
  .hnav.show{opacity:.9}                       /* visible dès qu'il reste du contenu à parcourir (desktop ET mobile) */
  .hnav.hide{opacity:0;pointer-events:none}
  .hrail:hover .hnav.show{opacity:1}
  .hnav:hover .hnavc{background:var(--accent);border-color:transparent;transform:scale(1.08)}
  @media(prefers-reduced-motion:reduce){ .hnav,.hnav .hnavc{transition:none} }
  .htile{flex:0 0 106px;scroll-snap-align:start;cursor:pointer;position:relative}
  .htile .hp{width:106px;aspect-ratio:2/3;border-radius:0;overflow:hidden;background:var(--card2);position:relative}
  .htile:first-child .hp{border-radius:12px 0 0 12px}
  .htile:last-child .hp{border-radius:0 12px 12px 0}
  .htile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s var(--ease-out)}
  .htile:hover img{transform:scale(1.07)}
  .hgrad{position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(180deg,transparent,rgba(8,6,8,.88));pointer-events:none}
  .hname{position:absolute;left:7px;right:7px;bottom:6px;font-size:10.5px;font-weight:700;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px #000}
  /* Fiche SAGA : héro + listes chronologiques */
  .sagahead{position:relative;height:150px;background-size:cover;background-position:center 25%;background-color:#1E191E;border-radius:22px 22px 0 0}
  .sagattl{position:absolute;left:16px;right:56px;bottom:10px;z-index:1}
  .sagattl h2{font-family:var(--serif);font-size:26px;font-weight:800;margin:0;letter-spacing:0;text-shadow:0 2px 10px #000}
  .sagattl span{font-size:12px;color:#E8DFD5;font-weight:600;text-shadow:0 1px 6px #000}
  .sagabody{padding:2px 14px 16px}
  .sgrow{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:14px;cursor:pointer;min-height:56px;
    transition:background .15s var(--ease-out)}
  .sgrow:hover{background:#241E24}
  .sgrow:active{transform:scale(.99)}
  .sgidx{width:20px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:800;font-size:12px;flex:0 0 auto}
  .sgrow .libposter{width:40px;height:58px;flex:0 0 auto}
  .sginfo{flex:1;min-width:0}
  .sgt{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sgsub{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
  .sgchev{color:var(--muted);font-size:18px;font-weight:700;flex:0 0 auto}
  /* pilule plateforme cliquable (fiche film) : vers la plateforme elle-même */
  .pf-link{text-decoration:none;cursor:pointer;
    transition:border-color .15s var(--ease-out),color .15s var(--ease-out),background .15s var(--ease-out),transform .12s var(--ease-out)}
  /* Survol : SEULE la pilule sous le curseur se teinte, aux couleurs de sa marque (--pfc). */
  .pf-link:hover,.pf-link:focus-visible{transform:translateY(-1px);
    border-color:var(--pfc,var(--accent2));color:var(--pfc,var(--accent2));
    background:color-mix(in srgb,var(--pfc,var(--accent2)) 16%,#211d22)}
  .pf-link .pfgo{opacity:0;margin-left:4px;font-size:9px;transition:opacity .15s var(--ease-out)}
  .pf-link:hover .pfgo{opacity:.85}
  /* HUB TOURNOI : héro mosaïque + jauge de tableau + chips sources */
  .thub{max-width:640px;margin:0 auto;padding-bottom:8px}
  .thubhead{position:relative;border-radius:20px;overflow:hidden;background:var(--card);border:1px solid var(--line);min-height:116px}
  .thubbg{position:absolute;inset:0;display:flex;opacity:.5}
  .thubbg img{flex:1;min-width:0;object-fit:cover;height:100%}
  .thubttl{position:relative;z-index:1;padding:30px 16px 12px}
  .thubttl h2{font-family:var(--serif);font-size:24px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px;letter-spacing:0;text-shadow:0 2px 8px #000;min-width:0}
  .thubttl h2 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .thubmeta{font-size:12.5px;color:#E8DFD5;font-weight:600;margin-top:3px;text-shadow:0 1px 5px #000;font-variant-numeric:tabular-nums}
  .srcchips{display:flex;gap:8px;flex-wrap:wrap}
  .srcchips .chipc,.secrow .chipc{display:inline-flex;align-items:center;gap:6px;min-height:36px}
  .secrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 2px 4px}
  /* GRILLES de tuiles de tournoi — même langage visuel dans « Mes tournois » et « Communauté » */
  .tgrid,.ttgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
  .ttgrid{margin-bottom:6px}
  /* Tuile CARRÉE : mosaïque d'affiches en 1/1, nom + méta toujours visibles sous l'image */
  .ttile{position:relative;text-align:left;background:var(--card2);border:1px solid var(--line);border-radius:16px;
    overflow:hidden;cursor:pointer;box-shadow:0 14px 30px -22px #000;
    transition:transform .2s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
  .ttile:hover,.ttile:focus-visible{transform:translateY(-3px);border-color:var(--accent2);
    box-shadow:-8px 10px 26px -14px rgba(210,51,63,.5),8px 10px 26px -14px rgba(74,140,240,.5)}
  .ttile.cur{border-color:#D2333F66}
  .ttile .cttop{position:relative;aspect-ratio:1/1;background:linear-gradient(140deg,#241b22,#141020)}
  /* minmax(0,1fr) obligatoire : « 1fr » a un minimum « auto », les affiches déborderaient et masqueraient le nom */
  .ttile .ctmosaic{position:absolute;inset:0;display:grid;overflow:hidden;
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;margin:0;pointer-events:none}
  .ttile .ctmosaic img{width:100%;height:100%;object-fit:cover;margin:0;border:none;border-radius:0}
  .ttile .cttop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(8,6,10,.6))}
  /* spécificité renforcée : « .commposters .ctph » (plus bas dans la feuille) dimensionne les vignettes en 34x50 */
  .ttile .cttop .ctph{position:absolute;inset:0;width:auto;height:auto;border:0;background:none;border-radius:0;
    display:flex;align-items:center;justify-content:center;color:#6a6480}
  .ttile .cttop .ctph .ico{width:28px;height:28px}
  .ttile .ctover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    padding:10px;text-align:center;background:linear-gradient(180deg,rgba(12,9,14,.82),rgba(12,9,14,.9));
    opacity:0;transition:opacity .2s var(--ease-out)}
  /* Souris : le survol révèle le calque (et un seul clic ouvre).
     Tactile : rien au survol — c'est le 1er appui qui pose .tap (le 2e ouvre). Sans ce
     garde-fou, le :hover « colle » après un tap sur mobile et le calque ne se referme plus. */
  @media(hover:hover) and (pointer:fine){ .ttile:hover .ctover{opacity:1} }
  .ttile.tap .ctover{opacity:1}
  .tapmore{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:9.5px;font-weight:800;
    letter-spacing:.3px;text-transform:uppercase;color:#fff;opacity:.75;pointer-events:none}
  @media(hover:hover) and (pointer:fine){ .tapmore{display:none} }
  .ttile .ctovres{margin-top:4px;font-size:10.5px;font-weight:800;padding:6px 10px;border-radius:999px;cursor:pointer;
    background:#191519;border:1px solid var(--line);color:var(--txt);display:inline-flex;align-items:center;gap:5px}
  .ttile .ctovres:hover{border-color:var(--accent2)}
  .ttile .tthe{position:absolute;top:8px;left:8px;z-index:3;margin:0;font-size:11px;padding:5px 9px;min-height:0}
  .ttile .ctname{padding:9px 11px 1px}
  .ttile .ctsub{padding:0 11px 10px}
  .ttile .ctsub .ico{fill:currentColor;stroke:none;vertical-align:-.1em}
  .tcactions{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:3}
  .tclock{cursor:default;color:var(--accent2)}
  .tcbtn{width:34px;height:34px;border-radius:11px;background:#241a20cc;border:1px solid var(--line);color:var(--txt);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .tcbtn:hover{border-color:var(--accent2)}
  .tcdel:hover{border-color:var(--accent);color:#ECA8A1}
  /* Tuile « Voir tout » : dernière case d'une catégorie qui déborde de 2 lignes → ouvre la vue complète */
  .ttmore{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1/1;
    background:#191519;border:1.5px dashed var(--line);color:var(--muted);text-align:center}
  .ttmore:hover,.ttmore:focus-visible{border-color:var(--accent2);color:var(--accent2)}
  .ttmoreN{font-family:var(--serif);font-size:22px;font-weight:800}
  .ttmoreLbl{font-size:11px;font-weight:700}
  .tcempty{color:var(--muted);display:inline-flex;padding:14px 0}
  /* tournoi communautaire : sélection figée */
  .tlocked{display:flex;align-items:center;gap:8px;margin:12px 0 2px;padding:9px 12px;border-radius:12px;
    font-size:12.5px;font-weight:600;color:#BCB3A8;background:#1E1A20;border:1px solid var(--line)}
  .tlocked .ico{flex:0 0 auto;color:var(--accent2)}
  .librow.rolocked{cursor:default}
  .tcnew{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;
    background:linear-gradient(#1b171c,#1b171c) padding-box,var(--duo) border-box;color:var(--txt);font-weight:800;font-size:13px;
    aspect-ratio:1/1;border-radius:16px;cursor:pointer;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
  .tcnew:hover{transform:translateY(-3px);box-shadow:-6px 4px 16px -10px rgba(210,51,63,.55),6px 4px 16px -10px rgba(74,140,240,.55)}
  .sagatile{flex:0 0 150px;position:relative;height:88px;border-radius:14px;overflow:hidden;cursor:pointer;
    border:1px solid var(--line);background:var(--card2);scroll-snap-align:start;
    transition:transform .2s var(--ease-out),border-color .2s var(--ease-out)}
  .sagatile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(1.1)}
  .sagatile.person img{object-position:center 22%;opacity:.8}
  .sagatile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,10,.02),rgba(10,8,10,.8))}
  .sagatile span{position:absolute;left:10px;right:8px;bottom:8px;z-index:1;font-weight:800;font-size:13px;text-shadow:0 2px 8px #000;text-align:left;display:block}
  .sagatile:hover{transform:translateY(-3px);border-color:var(--accent2)}
  /* tuiles « tournois de la semaine » : grandes cartes avec mosaïque d'affiches 2×2 + pastille Jouer */
  .commtile{flex:0 0 230px;scroll-snap-align:start;cursor:pointer;text-align:left;background:var(--card2);
    border:1px solid var(--line);border-radius:18px;padding:0;overflow:hidden;
    transition:transform .2s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
  .commtile:hover{transform:translateY(-4px);border-color:var(--accent2);box-shadow:-8px 10px 26px -14px rgba(210,51,63,.5),8px 10px 26px -14px rgba(74,140,240,.5)}
  .commtile .cttop{position:relative;aspect-ratio:16/10;background:linear-gradient(140deg,#241b22,#141020)}
  .commtile .ctmosaic{position:absolute;inset:0;display:grid;overflow:hidden;
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;margin:0}
  .commtile .ctmosaic img{width:100%;height:100%;object-fit:cover;margin:0;border:none;border-radius:0}
  .commtile .cttop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,6,10,.66))}
  .commtile .cttop .ctph{position:absolute;inset:0;width:auto;height:auto;border:0;background:none;border-radius:0;
    display:flex;align-items:center;justify-content:center;color:#6a6480}
  .commtile .cttop .ctph .ico{width:30px;height:30px}
  .commtile .ctplay{position:absolute;right:9px;bottom:9px;z-index:1;width:36px;height:36px;border-radius:50%;
    background:var(--duo);display:flex;align-items:center;justify-content:center;color:#fff;
    box-shadow:0 8px 18px -6px rgba(0,0,0,.6)}
  .commtile .ctplay .ico{width:18px;height:18px;margin-left:2px}
  /* survol / tap : voile détaillé (nom + catégorie + détails + Jouer) */
  .commtile .ctover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:4px;
    padding:12px 13px;text-align:center;opacity:0;transition:opacity .2s var(--ease-out);
    background:linear-gradient(160deg,rgba(20,16,32,.92),rgba(8,6,12,.95))}
  @media(hover:hover) and (pointer:fine){ .commtile:hover .ctover{opacity:1} }
  .commtile.tap .ctover{opacity:1}
  .ctovname{font-family:var(--serif);font-weight:800;font-size:15px;line-height:1.2}
  .ctovsub{font-size:11.5px;color:var(--accent2);font-weight:800}
  .ctovmeta{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .ctovplay{margin-top:6px;align-self:center;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:#fff;
    background:var(--duo);padding:6px 14px;border-radius:999px}
  .ctname{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:9px 12px 1px}
  .ctsub{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;padding:0 12px 11px;font-variant-numeric:tabular-nums}
  .logo-img{max-width:230px;width:58vw;height:auto;display:block;filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
  .logo-fallback{display:none}
  .btn-start{font-size:22px;padding:20px;border-radius:18px;letter-spacing:.5px;margin-top:0;width:100%;max-width:320px}
  .introsmall{display:flex;gap:10px;margin-top:12px;width:100%;max-width:320px}
  .introsmall .btn{margin:0;flex:1}
  .homecards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:350px;margin-top:2px}
  .homecard{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;text-align:left;background:var(--card);border:1px solid var(--line);
    border-radius:18px;padding:15px 16px;cursor:pointer;color:var(--txt);box-shadow:var(--shadow);
    transition:border-color .2s var(--ease-out),transform .2s var(--ease-out),background .2s var(--ease-out),box-shadow .2s var(--ease-out);font-family:inherit}
  /* halo radial qui suit le curseur — porté de « Spotlight Cards » (21st.dev), teinté à l'accent rouge de l'appli */
  .homecard::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;
    transition:opacity .3s var(--ease-out);
    background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),rgba(224,86,78,.22),rgba(224,86,78,.06) 42%,transparent 72%)}
  .homecard:hover::before{opacity:1}
  .homecard>*{position:relative;z-index:1}   /* le contenu reste au-dessus du halo */
  .homecard:hover{border-color:var(--accent2);background:#272129;transform:translateY(-2px);box-shadow:var(--shadow),0 14px 30px -18px #000}
  .homecard:active{transform:translateY(0) scale(.985)}
  .homecard.primary{background:linear-gradient(135deg,#2E191D,#211318);border-color:#D2333F55}
  .homecard:hover .hc-arrow{transform:translateX(3px);color:var(--accent2)}
  .hc-ico{font-size:27px;flex:0 0 auto}
  .hc-txt{flex:1;min-width:0}
  .hc-txt b{font-size:16px;font-weight:800}
  .hc-txt small{display:block;color:var(--muted);font-size:12px;line-height:1.42;margin-top:3px}
  .hc-arrow{color:var(--muted);font-size:22px;font-weight:700;flex:0 0 auto;transition:transform .2s var(--ease-out),color .2s var(--ease-out)}

  /* --- filtres compacts (tout visible) --- */
  #crithost>.critwrap{padding:14px 14px 4px}
  .crithead{display:flex;align-items:center;justify-content:space-between}
  .critlab2{font-size:11px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.4px;margin:10px 0 6px}
  .critwrap .chipc{min-height:34px;padding:6px 11px;font-size:12.5px}
  .critwrap .chipc.on::before{content:"✓ "}
  .critrow{display:flex;gap:16px;flex-wrap:wrap}
  .critrow>div{flex:1;min-width:130px}
  .critrow2{display:flex;gap:12px;align-items:flex-end;margin-top:4px}
  .critcta{position:sticky;bottom:0;display:flex;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--bg);border-top:1px solid var(--line)}
  .tg.red.on{background:linear-gradient(135deg,#5a1020,#a11d3a)!important;color:#ffd9e2!important}

  /* --- CTA lancer le tournoi (cartes) --- */
  /* au-dessus de la barre de navigation quand elle est en bas (mobile) — jamais de boutons superposés */
  @media(max-width:899px){ body.has-bottomnav .launch-cta{bottom:calc(80px + env(safe-area-inset-bottom))} }
  .launch-cta{position:sticky;bottom:10px;margin:12px 0 0;width:100%;
    background:linear-gradient(135deg,#8E2230,#D2333F);box-shadow:0 12px 28px -10px #8E2230}

  /* --- listes : barre retour collée + bouton tournoi --- */
  #library{display:flex;flex-direction:column;height:100%}
  .libbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:10px 4px;background:transparent;border-bottom:none}
  .libbartitle{font-weight:800;font-size:15px}
  .libscroll{flex:1;overflow:auto;padding-top:12px}
  .libadd{background:linear-gradient(#241b22,#241b22) padding-box,var(--duo) border-box;border:1.5px solid transparent;color:#ece7ee;font-weight:800;font-size:12px;
    min-width:44px;height:36px;border-radius:10px;cursor:pointer;flex:0 0 auto;margin-right:6px}
  .libadd.in{background:#2C171B;border:1.5px solid var(--good);color:#ECA8A1}
  .libadd:hover{box-shadow:-5px 3px 12px -8px rgba(210,51,63,.6),5px 3px 12px -8px rgba(74,140,240,.6)}

  /* --- arbre de tournoi --- */
  /* Hauteur DÉFINIE indispensable : sans elle, .brstage (flex:1) s'effondre à 0px car .app n'a
     pas de hauteur fixe (corps centré). Le SVG en position:absolute devient alors invisible et
     « Vue d'ensemble » calcule un viewBox infini. On force donc la hauteur du viewport. */
  #bracket{display:flex;flex-direction:column;height:calc(100vh - 36px);height:calc(100dvh - 36px);padding:0;overflow:hidden}
  .brbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 8px;border-bottom:1px solid var(--line)}
  .brtitle{font-weight:800;font-size:14px;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brctrls{display:flex;gap:8px}
  .tb:disabled{opacity:.35;cursor:default}
  /* Scène « esport néon » : fond quasi-noir, connecteurs lumineux rouge/bleu (inspiré du bracket néon) */
  .brstage{flex:1 1 auto;min-height:42vh;position:relative;overflow:hidden;touch-action:none;
    background:radial-gradient(1100px 620px at 50% -8%,#141026 0%,#0a0812 45%,#050409 100%);
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .brstage,.brstage *{user-select:none;-webkit-user-select:none}
  #brsvg text{user-select:none;-webkit-user-select:none}
  #brsvg{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
  #brsvg:active{cursor:grabbing}
  #brG{transform-origin:0 0}
  .brrlabel{fill:#b9b2d6;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
  .brlink{fill:none;stroke:#2a2740;stroke-width:2}
  .brlink.br-a{stroke:var(--accent);stroke-width:2.4;filter:drop-shadow(0 0 3px rgba(210,51,63,.95)) drop-shadow(0 0 6px rgba(210,51,63,.5))}
  .brlink.br-b{stroke:var(--blue);stroke-width:2.4;filter:drop-shadow(0 0 3px rgba(74,140,240,.95)) drop-shadow(0 0 6px rgba(74,140,240,.5))}
  .brlink.hi{stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 9px rgba(150,190,255,.7))}
  .brnode{cursor:pointer}
  .brbox{fill:#100e1c;stroke:#3a3556;stroke-width:1.5}
  .brtt{fill:#f3f4fb;font-size:13px;font-weight:700}
  .brsub{fill:#9C948B;font-size:11px}
  .brnode.st-alive .brbox{fill:#151327;stroke:#46608f}
  .brnode.st-win .brbox{fill:#241021;stroke:#E0564E;stroke-width:2;filter:drop-shadow(0 0 6px rgba(210,51,63,.7))}
  .brnode.st-win .brtt{fill:#ffd6dc}
  .brnode.st-out .brbox{fill:#0d0b16;stroke:#221f33;opacity:.5}
  .brnode.st-out .brtt,.brnode.st-out .brsub{fill:#6a6480}
  .brnode.st-live .brbox{fill:#1a1030;stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 0 8px rgba(255,255,255,.85)) drop-shadow(0 0 16px rgba(120,150,255,.6))}
  .brnode.st-live .brtt{fill:#fff}
  .brnode.st-bye .brbox,.brnode.st-tbd .brbox{fill:#171317;stroke-dasharray:4 4;stroke:#332D34;opacity:.6}
  .brnode.st-bye .brtt,.brnode.st-tbd .brtt{fill:#6E6660}
  .brnode.advance .brbox{animation:pop .5s ease}
  .brnode.brswap{cursor:grab}
  .brgrip{fill:#6E6660;font-size:13px;font-weight:700;pointer-events:none;letter-spacing:-2px}
  .brnode.dragging{cursor:grabbing}
  .brnode.dragging .brbox{opacity:.5;stroke:var(--accent2)}
  .brnode.dropok .brbox{fill:#301519;stroke:var(--accent);stroke-width:2.5}
  @keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
  .brnode image{clip-path:inset(0 round 8px)}
  .brnotxt{font-size:9.5px;font-weight:700;fill:#e8dfd5}   /* repli si le film n'a pas d'affiche */
  .brnode.st-out image{opacity:.4;filter:grayscale(.65)}   /* films éliminés : affiche grisée */
  .brnode.st-win image,.brnode.st-live image{opacity:1}
  .brduel{border-top:1px solid var(--line);background:var(--card);padding:12px 12px calc(12px + env(safe-area-inset-bottom));max-height:52vh;overflow:auto;flex:0 0 auto}
  .duelvs{align-self:center;font-weight:900;color:var(--accent2);font-size:15px}
  .duelrow2{display:flex;align-items:stretch;gap:12px}
  .duelc{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--card2);border:1px solid var(--line);
    border-radius:18px;padding:10px;gap:0;box-shadow:0 16px 34px -22px #000}
  .duelposter{width:100%;height:clamp(180px,26vh,300px);border-radius:13px;position:relative;overflow:hidden;background:#191519;flex:0 0 auto}
  .duelposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .duelbody{display:flex;flex-direction:column;gap:6px;padding:9px 3px 8px;flex:1 1 auto;min-height:0}
  .duelt{font-weight:800;font-size:16.5px;line-height:1.15}
  .duelsub{font-size:12.5px;color:var(--muted);font-weight:600}
  .dueltags{display:flex;flex-wrap:wrap;gap:5px}
  .duelpf{display:flex;flex-wrap:wrap;gap:4px}
  .duelcred{font-size:11.5px;color:#BCB3A8;line-height:1.4}
  .duelsyn{font-size:12px;color:#C6BEB3;line-height:1.45;max-height:110px;overflow:hidden}
  .brduel .duelchoose{flex:0 0 auto;text-align:center;margin-top:auto}
  .duelact{display:flex;gap:6px;margin-top:auto;padding-top:4px}
  .duelinfo{background:linear-gradient(#1E191E,#1E191E) padding-box,var(--duo) border-box;border:1.5px solid transparent;color:#ece7ee;font-weight:800;font-size:11.5px;
    padding:0 10px;border-radius:9px;cursor:pointer}
  .duelchoose{flex:1;background:var(--duo);border:none;color:#FFF7F5;font-weight:900;
    font-size:13.5px;padding:11px;border-radius:9px;cursor:pointer}

  /* --- onglets internes des listes --- */
  .libtabs{display:flex;gap:8px;padding:10px 0 4px}
  .libtab{flex:1;background:#1E191E;border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:13px;
    padding:10px;border-radius:11px;cursor:pointer}
  .libtab.on{background:var(--duo);border:none;color:#fff}
  /* --- recherche / tri / note des listes --- */
  .libtools{display:flex;gap:8px;padding:6px 0 8px}
  .libsearch{flex:1;min-width:0;background:#191519;border:1px solid var(--line);color:var(--txt);border-radius:10px;
    padding:9px 12px;font-size:13px;outline:none}
  .libsearch:focus{border-color:var(--accent)}
  .libsortsel{background:#191519;border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:9px 8px;font-size:12.5px;max-width:42%}
  /* Note personnelle : même famille visuelle que les autres champs du site (accent rouge/bleu), plus de doré */
  .libnote{background:#191519;border:1.5px solid var(--line);color:var(--txt);border-radius:9px;
    padding:6px 8px;font-size:12.5px;font-weight:800;cursor:pointer;transition:border-color .15s var(--ease-out)}
  .libnote:hover{border-color:var(--accent2)}
  .libnote:focus{outline:none;border-color:var(--accent)}
  .libtile{display:flex;flex-direction:column;gap:6px}
  .libtilebar{display:flex;align-items:center;gap:6px}
  .libtilebar .libnote{flex:1;min-width:0}
  .libtileact{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:#191519;border:1.5px solid var(--line);
    color:var(--txt);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    transition:border-color .15s var(--ease-out),color .15s var(--ease-out)}
  .libtileact:hover{border-color:var(--accent2);color:var(--accent2)}
  .libtileact.in{border-color:var(--good);color:var(--good)}

  /* --- adaptation automatique aux grands écrans (tablette / ordinateur) --- */
  @media(min-width:800px){
    .app{max-width:940px}
    .panel{max-width:600px;margin-left:auto;margin-right:auto}
    .stage{max-width:500px;margin:0 auto}
    #cards .topbar{max-width:500px;margin-left:auto;margin-right:auto;margin-bottom:12px}
    .launch-cta{max-width:500px;margin-left:auto;margin-right:auto}
    .homecards{max-width:460px}
    .apptitle{font-size:58px}
    .critwrap,.critcta{max-width:840px;margin-left:auto;margin-right:auto;width:100%}
    #crithost>.topbar{max-width:840px;margin:0 auto 10px}
    #libhost{max-width:720px;margin:0 auto;width:100%}
    #trhost{max-width:640px;margin:0 auto}
    .brduel .duelrow2{max-width:980px;margin:0 auto}
    #bracket.mode-duel .duelposter{height:min(42vh,420px)}
    .sheet{max-width:560px}
  }
  @media(min-width:1280px){
    .app{max-width:1220px}
    .gal{gap:11px}
  }

  /* ================= DA CineBrawl — couche éditoriale (festival, pas streaming) ================= */
  /* Typographie d'affiche : serif expressive pour les titres de films, tournois et sections */
  .ptitle,.qtext,.dtitle,.megatitle,.duelt,.vstitle,.crith,.libhead h2,.altt,.final-badge,.vs-q{font-family:var(--serif);letter-spacing:0}
  .brtt{font-family:var(--serif)}
  .brrlabel{font-family:var(--serif);font-style:italic;letter-spacing:.6px}
  .duelhdr{font-family:var(--serif);font-style:italic;font-size:14.5px}
  /* Masthead éditorial */
  .apptitle{font-family:var(--sans);font-weight:900;font-style:normal;text-transform:uppercase;letter-spacing:-1.5px;
    font-size:clamp(32px,11vw,52px);color:var(--txt);text-shadow:0 12px 38px rgba(210,51,63,.28)}
  .apptitle .t2{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;
    color:var(--accent);padding-left:2px}
  .tagline{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:3px;color:var(--muted);margin-top:9px}
  /* Key light haut-gauche : les surfaces de premier plan sont plus claires que le fond */
  /* .sheet exclu : il a désormais son propre verre translucide (sinon var(--card) opaque masquerait le backdrop-filter) */
  .panel,.qcard,.movie,.homecard,.duelc,.vs-card,.critwrap,.librow,.alt{
    background:linear-gradient(150deg,#26202677 0%,#1B171B00 62%),var(--card)}
  .homecard{border-top-color:#3E363C}
  .panel,.movie,.qcard{border-top-color:#3B343B}
  /* CTA : dégradé signature rouge → bleu (dualité brawl) */
  .btn:not(.ghost){background:var(--duo);
    box-shadow:0 14px 30px -14px rgba(210,51,63,.55),0 14px 30px -14px rgba(74,140,240,.5);color:#FFF7F5}
  .tb-acc{background:var(--duo);border:1.5px solid transparent}
  .c-add,.duelchoose,.vspick{background:var(--duo)!important;color:#FFF7F5!important}
  .launch-cta{background:var(--duo);box-shadow:0 14px 30px -14px rgba(210,51,63,.5),0 14px 30px -14px rgba(74,140,240,.45)}
  /* Palette contenue : pastilles plateformes neutralisées (métadonnée, pas décor) */
  .pf-canal,.pf-disney,.pf-hbo,.pf-para,.pf-prime,.pf-any{background:#262026;color:#CFC6BC;border-color:#3A333A}
  /* Libellés de sections : neutre chaud, pas d'accent gaspillé */
  .critlab,.critlab2{color:var(--label)}
  .brnode.st-live .brbox{fill:#1a1030}
  /* Le % de compatibilité redevient éditorial : encre sur papier sombre, accent en liseré */
  .match{background:#2A181C;color:#F3CBC6;border:1px solid #D2333F55}
  @media(max-width:380px){
    .brandrow{gap:6px}
    .brandlogo{width:48px;height:48px}
  }

  /* --- infobulles (hover desktop + title natif) --- */
  [data-tip]{position:relative}
  @media(hover:hover){
    [data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
      background:#262026;border:1px solid var(--line);color:var(--txt);font-size:11.5px;font-weight:600;font-style:normal;
      font-family:var(--sans);padding:7px 11px;border-radius:9px;width:max-content;max-width:230px;white-space:normal;
      text-align:center;line-height:1.4;z-index:95;box-shadow:var(--shadow);pointer-events:none}
  }
  /* --- badge pays + VPN (haut droite) --- */
  .locbadge{display:flex;gap:6px;align-items:center;flex:0 0 auto;margin-left:auto}
  .locflag{padding:6px 9px;display:flex;align-items:center}
  .vpnpill{font-size:11.5px;font-weight:800;letter-spacing:.4px;padding:8px 11px;opacity:.65}
  .vpnpill.on{opacity:1;background:var(--duo);border:none;color:#FFF7F5}
  /* --- commutateur Genres / Ambiances --- */
  .seg{display:flex;gap:0;background:#191519;border:1px solid var(--line);border-radius:11px;padding:3px;margin:0 0 8px;width:max-content}
  .segb{border:none;background:none;color:var(--muted);font-weight:800;font-size:12.5px;padding:8px 15px;border-radius:8px;cursor:pointer;font-family:var(--sans)}
  .segb.on{background:#2C171B;color:#F3CBC6;border:1px solid #D2333F55}
  /* --- slider de note --- */
  .raterange{display:flex;align-items:center;gap:12px;margin:2px 6px 6px}
  .raterange input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:#2B252B;outline:none}
  .raterange input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
    background:radial-gradient(130% 175% at 28% 0%,#E0564E,#B32735);border:2px solid #ffffff44;cursor:pointer}
  .raterange input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid #ffffff44;cursor:pointer}
  .rateval{font-family:var(--serif);font-style:italic;font-size:15px;color:#fff;min-width:40px;text-align:right;text-transform:none}
  /* --- communauté --- */
  .commcat{font-family:var(--serif);font-size:19px;font-weight:800;margin:20px 2px 10px;color:var(--txt);letter-spacing:.2px}
  .commcat:first-child{margin-top:4px}
  /* .commposters ne sert plus que de conteneur de mosaïque (.ctmosaic) dans les tuiles carrées */
  .commposters{display:flex;flex:0 0 auto}
  .commposters img{object-fit:cover;border-radius:6px}
  .heartbtn{margin-left:auto;flex:0 0 auto;background:linear-gradient(#191519,#191519) padding-box,var(--duo) border-box;border:1.5px solid transparent;color:var(--txt);
    border-radius:11px;padding:8px 11px;font-weight:800;font-size:12.5px;cursor:pointer}
  .heartbtn.on{color:#F3CBC6;background:#2A181C;border:1.5px solid #D2333F88}
  .heartbtn.on .ico{fill:currentColor}
  .flagimg{display:inline-block}

  /* ================= REWORK Tournois · Communauté · Listes (ui-ux-pro-max) =================
     Un seul langage : segmented control en verre (comme le switcher), cartes à élévation unifiée,
     entrée en cascade 35ms/ligne, cibles tactiles 44pt, hiérarchie titre serif / méta muted. */
  .libtabs{display:flex;gap:2px;padding:4px;margin:10px 0 6px;border-radius:999px;width:100%;
    background:rgba(18,15,18,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.14)}
  .libtab{flex:1;background:none;border:none;color:var(--muted);font-weight:800;font-size:13px;font-family:inherit;
    padding:10px;min-height:42px;border-radius:999px;cursor:pointer;transition:color .2s var(--ease-out),background .2s var(--ease-out)}
  .libtab.on{background:var(--duo);color:#fff;box-shadow:0 6px 16px -8px var(--accent),0 6px 16px -8px var(--blue)}
  .libtab:not(.on):hover{color:var(--txt)}
  /* lignes de liste : cartes uniformes, poster plus présent, actions rondes 44pt */
  .librow{border-radius:16px;padding:10px 12px;gap:12px;
    transition:border-color .18s var(--ease-out),transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background .18s var(--ease-out)}
  .librow:hover{border-color:var(--accent2);transform:translateY(-2px);box-shadow:0 12px 26px -16px #000d}
  .libposter{width:48px;height:70px;border-radius:10px;box-shadow:0 6px 14px -8px #000}
  .libt{font-size:14px}
  .libadd,.libdel{width:44px;height:44px;min-width:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s,border-color .15s}
  .libadd{background:#241a20;border:1px solid #4a2030;color:#F3CBC6;font-size:13px;cursor:pointer}
  .libadd:hover{border-color:var(--accent2)}
  .libadd.in{background:#17251d;border-color:#2f5c41;color:#9fe0b5}
  /* entrée en cascade des lignes (limite 12 — au-delà, instantané) */
  @keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .liblist>*{animation:rowIn .32s var(--ease-out) both}
  .liblist>*:nth-child(1){animation-delay:0ms}.liblist>*:nth-child(2){animation-delay:35ms}
  .liblist>*:nth-child(3){animation-delay:70ms}.liblist>*:nth-child(4){animation-delay:105ms}
  .liblist>*:nth-child(5){animation-delay:140ms}.liblist>*:nth-child(6){animation-delay:175ms}
  .liblist>*:nth-child(7){animation-delay:210ms}.liblist>*:nth-child(8){animation-delay:245ms}
  .liblist>*:nth-child(n+9){animation-delay:270ms}
  /* Communauté : le cœur en pilule (les anciennes cartes « éventail » ont laissé place aux tuiles carrées .ttile) */
  .heartbtn{min-height:38px;border-radius:999px;padding:8px 13px;font-variant-numeric:tabular-nums;
    transition:background .15s,color .15s,border-color .15s,transform .15s}
  .heartbtn:hover{border-color:var(--accent2);transform:translateY(-1px)}
  /* barres d'outils des trois onglets : rangée aérée, recherche en pilule */
  .libbar{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
  .libsearch{border-radius:999px;padding:10px 16px}
  .libsortsel{border-radius:999px;padding:9px 12px}
  .libtools{padding:2px 0 10px}

  /* --- sélecteur d'acteurs / réalisateurs (autocomplétion + puces) --- */
  .critchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
  .critchips:empty{display:none}
  .pchip{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#2a1c4d,#3a1d3a);
    border:1px solid var(--accent2);color:#fff;font-size:12.5px;font-weight:700;padding:6px 6px 6px 11px;border-radius:999px}
  .pchip .pemo{font-size:13px}
  .pchip button{background:#0007;border:none;color:#fff;width:19px;height:19px;border-radius:50%;cursor:pointer;
    font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .pchip button:hover{background:var(--accent)}
  .critsearchwrap{position:relative}
  .critsuggest{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;background:var(--card2);
    border:1px solid var(--line);border-radius:13px;overflow:hidden auto;max-height:268px;display:none;
    box-shadow:0 20px 44px -14px #000}
  .critsuggest.open{display:block}
  .sugg{display:flex;align-items:center;gap:11px;padding:9px 11px;cursor:pointer;border-bottom:1px solid var(--line)}
  .sugg:last-child{border-bottom:none}
  .sugg:hover,.sugg.act{background:#2a2f4d}
  .suggimg{width:36px;height:36px;border-radius:9px;background:#191519 center/cover no-repeat;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--muted)}
  .suggmeta{min-width:0}
  .suggname{font-size:13.5px;font-weight:700;line-height:1.2}
  .suggsub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .suggempty{padding:11px;font-size:12.5px;color:var(--muted);text-align:center}

  /* --- arbre de tournoi : deux modes d'affichage --- */
  /* « Tout voir » : le duel disparaît, l'arbre occupe presque tout l'écran */
  #bracket.mode-overview .brduel{display:none}
  #bracket.mode-overview .brstage{flex:1 1 auto;min-height:0}
  /* « Duel » : le duel s'affiche en grand (~75 %), l'arbre se réduit (~25 %) */
  #bracket.mode-duel .brstage{flex:0 0 24%;min-height:0}
  #bracket.mode-duel .brduel{flex:1 1 auto;max-height:none}
  #bracket.mode-duel .duelposter{height:min(38vh,380px)}
  #bracket.mode-duel .duelt{font-size:18px}

  /* ============ DUALITÉ ROUGE ↔ BLEU (port vanilla des composants 21st.dev SearchBar + GlowButton) ============
     Le rouge et le bleu du logo (pellicule vs pellicule, éclair au centre) irriguent tout le site :
     halos qui balaient sur les CTA, focus « vivant » sur les recherches, duel rouge contre bleu. */

  /* — Barres de recherche : bord dégradé rouge→violet→bleu au focus, halo qui respire, légère prise de volume — */
  #critActor,#tournSearch,#galSearchInput,.libsearch{
    transition:transform .25s var(--ease-out),box-shadow .3s var(--ease-out),border-color .2s}
  #critActor:focus,#tournSearch:focus,#galSearchInput:focus,.libsearch:focus{
    border-color:transparent;
    background:linear-gradient(#191519,#191519) padding-box,
      linear-gradient(90deg,#D2333F,#7a4fd0 50%,#4A8CF0) border-box;
    transform:scale(1.012)}
  @media(prefers-reduced-motion:no-preference){
    #critActor:focus,#tournSearch:focus,#galSearchInput:focus,.libsearch:focus{animation:duoBreathe 2.8s ease-in-out infinite}
  }
  @keyframes duoBreathe{
    0%,100%{box-shadow:-10px 8px 30px -14px rgba(210,51,63,.55), 10px 8px 30px -14px rgba(74,140,240,.55)}
    50%{box-shadow:-10px 8px 34px -12px rgba(74,140,240,.55), 10px 8px 34px -12px rgba(210,51,63,.55)}
  }
  /* suggestions : entrée en cascade façon spring (SearchBar 21st) */
  .critsuggest .sugg{animation:sugIn .26s var(--ease-out) both}
  .critsuggest .sugg:nth-child(2){animation-delay:.045s}.critsuggest .sugg:nth-child(3){animation-delay:.09s}
  .critsuggest .sugg:nth-child(4){animation-delay:.135s}.critsuggest .sugg:nth-child(5){animation-delay:.18s}
  .critsuggest .sugg:nth-child(6){animation-delay:.225s}.critsuggest .sugg:nth-child(n+7){animation-delay:.27s}
  @keyframes sugIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}

  /* — Boutons primaires : double OMBRE rouge/bleu (suit l'arrondi — aucune plaque derrière le bouton) — */
  .btn:not(.ghost),.launch-cta{transition:box-shadow .3s var(--ease-out),transform .15s var(--ease-out)}
  .btn:not(.ghost):hover,.launch-cta:hover{
    box-shadow:-9px 7px 24px -9px rgba(210,51,63,.55), 9px 7px 24px -9px rgba(74,140,240,.55)}
  @media(prefers-reduced-motion:no-preference){
    .btn:not(.ghost):hover,.launch-cta:hover{animation:duoShadow 2.6s ease-in-out infinite alternate}
  }
  @keyframes duoShadow{
    from{box-shadow:-9px 7px 24px -9px rgba(210,51,63,.55), 9px 7px 24px -9px rgba(74,140,240,.55)}
    to{box-shadow:-9px 7px 24px -9px rgba(74,140,240,.55), 9px 7px 24px -9px rgba(210,51,63,.55)}
  }
  /* nav : l'onglet actif porte une ombre duale discrète (pas de plaque) */
  #bottomnav .navtab.on{box-shadow:-6px 4px 14px -7px rgba(210,51,63,.45), 6px 4px 14px -7px rgba(74,140,240,.45)}

  /* — Duel : ROUGE contre BLEU (comme les deux pellicules du logo) — */
  .brduel .duelrow2 .duelc:first-child:hover{border-color:#D2333F99;background:#2A181C;box-shadow:0 0 28px -8px rgba(210,51,63,.55)}
  .brduel .duelrow2 .duelc:last-child:hover{border-color:#4A8CF099;background:#161d2b;box-shadow:0 0 28px -8px rgba(74,140,240,.55)}
  .duelvs{font-size:16px;background:linear-gradient(180deg,#ff4d4d,#5aa0ff);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

  /* — Marque : « Brawl » en dégradé rouge→bleu (même dans le thème serif qui l'annulait) — */
  .apptitle .t2{background:linear-gradient(100deg,#ff4d4d 12%,#D2333F 35%,#7a4fd0 62%,#5aa0ff 92%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

  /* — Switch Galerie/Fiches : la pilule vit la dualité (Galerie = bleu, Fiches = rouge, comme le fond) — */
  #viewswitch .vswpill{transition:transform .3s var(--ease-out),width .3s var(--ease-out),background .35s var(--ease-out)}
  #viewswitch:not(.is-cards) .vswpill{background:linear-gradient(135deg,#27497e,#4A8CF0)}
  #viewswitch.is-cards .vswpill{background:linear-gradient(135deg,#8E2230,#D2333F)}

  /* ===== Résultats agrégés d'un tournoi communautaire (podium + bracket consensus + classement) ===== */
  #commresults .libbar{background:transparent;border-bottom:none}
  /* ===== Leaderboard : classement par taux de victoire ===== */
  #leaderboard .libbar{background:transparent;border-bottom:none}
  .lbbtn{flex:0 0 auto;min-height:44px;padding:0 14px;border-radius:12px;cursor:pointer;font-weight:800;font-size:12.5px;
    display:inline-flex;align-items:center;gap:6px;color:var(--txt);
    background:linear-gradient(#191519,#191519) padding-box,var(--duo) border-box;border:1.5px solid transparent;
    transition:box-shadow .2s var(--ease-out),transform .15s var(--ease-out)}
  .lbbtn:hover{transform:translateY(-1px);box-shadow:-6px 4px 16px -10px rgba(210,51,63,.55),6px 4px 16px -10px rgba(74,140,240,.55)}
  /* bascule « la communauté » / « mes choix » */
  .lbscope{display:flex;gap:4px;margin:14px 0 0;padding:4px;border-radius:14px;background:var(--card2);border:1px solid var(--line)}
  .lbsc{flex:1;min-height:38px;border-radius:10px;cursor:pointer;font-weight:800;font-size:12.5px;font-family:inherit;
    background:none;border:0;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;
    transition:color .15s var(--ease-out),background .2s var(--ease-out)}
  .lbsc:hover{color:var(--txt)}
  .lbsc.on{background:var(--duo-h);color:#fff}
  .lbsc .ico{width:14px;height:14px}
  /* filtres par catégorie du classement */
  .lbfilters{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap;align-items:center}
  .lbsel{flex:1;min-width:130px;min-height:38px;padding:0 30px 0 12px;border-radius:10px;font-size:12.5px;font-weight:700;
    background:var(--card2);border:1px solid var(--line);color:var(--txt);font-family:inherit;cursor:pointer;
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239C948B' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center}
  .lbsel:hover{border-color:var(--accent2)}
  .lbclear{flex:0 0 auto;min-height:38px;padding:0 12px;border-radius:999px;cursor:pointer;font-weight:800;font-size:11.5px;
    background:#2A181C;border:1px solid #D2333F88;color:#F3CBC6;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
  .lbclear:hover{border-color:var(--accent)}
  .lbtabs{display:flex;gap:6px;margin:14px 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .lbtab{flex:0 0 auto;min-height:38px;padding:0 14px;border-radius:999px;cursor:pointer;font-weight:700;font-size:12.5px;
    background:var(--card2);border:1px solid var(--line);color:var(--muted);font-family:inherit;
    transition:color .15s var(--ease-out),border-color .15s var(--ease-out)}
  .lbtab:hover{border-color:var(--accent2);color:var(--txt)}
  .lbtab.on{background:var(--duo-h);border-color:transparent;color:#fff}
  .lblist{display:flex;flex-direction:column;gap:6px}
  .lbrow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:14px;
    background:var(--card2);border:1px solid var(--line)}
  .lbrk{flex:0 0 26px;text-align:center;font-weight:900;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
  .lbrk.top{color:#E7B54B}
  .lbposter{flex:0 0 34px;height:50px;border-radius:7px;border:1px solid var(--line);background-size:cover;background-position:center}
  .lbav{flex:0 0 34px;height:50px;border-radius:7px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    background:linear-gradient(140deg,#241b22,#161320);font-size:16px}
  .lbinfo{min-width:0;flex:1}
  .lbname{font-family:var(--serif);font-weight:800;font-size:14.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lbbar{height:6px;border-radius:99px;background:#241f27;overflow:hidden;margin:5px 0 4px}
  .lbbar i{display:block;height:100%;background:var(--duo-h);border-radius:99px}
  .lbsub{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:4px}
  .lbsub .ico{width:11px;height:11px;fill:currentColor;stroke:none}
  .lbpct{flex:0 0 auto;font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;
    background:var(--duo-h);-webkit-background-clip:text;background-clip:text;color:transparent}
  .crhead{text-align:center;margin:4px 4px 14px}
  .crhead h2{font-family:var(--serif);font-size:24px;margin:0}
  .crsub{color:var(--muted);font-size:12.5px;font-weight:700;margin-top:4px}
  .crposter{aspect-ratio:2/3;border-radius:10px;background-size:cover;background-position:center;border:1px solid var(--line)}
  /* podium */
  .crpodium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:6px 0 4px}
  .crpod{display:flex;flex-direction:column;align-items:center;gap:5px;width:30%;max-width:130px}
  .crpod .crposter{width:100%}
  .crpod.pod1{width:38%;max-width:160px}
  .crpod.pod2,.crpod.pod3{opacity:.94;padding-bottom:6px}
  .crmedal{font-size:22px;line-height:1}
  .crposter.gold{border:2px solid #E7B54B;box-shadow:0 10px 30px -10px rgba(231,181,75,.55)}
  .crpodname{font-size:12px;font-weight:800;text-align:center;line-height:1.2;max-width:100%}
  .crpodpct{font-size:12px;font-weight:900;color:var(--accent2);font-variant-numeric:tabular-nums}
  .crsec{font-family:var(--serif);font-size:15px;font-weight:700;margin:20px 2px 10px;color:var(--txt)}
  /* bracket consensus : colonnes d'affiches, perdants grisés */
  .crhint{font-size:11px;color:var(--muted);margin:0 2px 6px}
  .crtoggle{float:right;background:none;border:1px solid var(--line);color:var(--accent2);font-size:10.5px;font-weight:800;
    border-radius:99px;padding:4px 11px;cursor:pointer;font-family:inherit}
  .crbracket{position:relative;display:flex;gap:26px;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
  .croverlay{position:absolute;top:0;left:0;pointer-events:none;z-index:0;overflow:visible}
  .crlink{fill:none;stroke-width:2.4}
  .crlink.cl-a{stroke:var(--accent);filter:drop-shadow(0 0 3px rgba(210,51,63,.85))}
  .crlink.cl-b{stroke:var(--blue);filter:drop-shadow(0 0 3px rgba(74,140,240,.85))}
  .crbracket.lines-off .croverlay{display:none}
  .crcol{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-around;gap:8px;flex:0 0 auto}
  .crnode{position:relative;width:52px;cursor:pointer;transition:transform .15s var(--ease-out)}
  .crnode .crposter{width:100%}
  /* Jauge de face-à-face : remplit l'affiche par le bas jusqu'au % du film, en teinte translucide */
  .crg{position:absolute;inset:0;border-radius:8px;overflow:hidden;pointer-events:none;display:flex;
    align-items:flex-end;justify-content:center}
  .crgfill{position:absolute;left:0;right:0;bottom:0;transition:height .5s var(--ease-out);
    border-top:1.5px solid currentColor;
    background:linear-gradient(180deg,color-mix(in srgb,currentColor 46%,transparent),color-mix(in srgb,currentColor 16%,transparent))}
  .crg.w{color:var(--accent)}            /* le film qui passe : rouge */
  .crg.l{color:var(--blue)}              /* celui qui sort : bleu */
  .crg.est .crgfill{border-top-style:dashed}   /* estimation (pas encore de vrai face-à-face) */
  .crgpct{position:relative;z-index:1;font-size:10.5px;font-weight:900;color:#fff;margin-bottom:3px;
    font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #000,0 0 8px #000}
  @media(prefers-reduced-motion:reduce){ .crgfill{transition:none} }
  .crnode:hover{transform:translateY(-2px)}
  .crnode.out .crposter{opacity:.4;filter:grayscale(.6)}   /* on grise l'affiche, pas la jauge (le % doit rester lisible) */
  .crnode.champ .crposter{border:2px solid #E7B54B;box-shadow:0 8px 22px -8px rgba(231,181,75,.6)}
  .crnode.sel .crposter{border:2px solid #fff;box-shadow:0 0 0 2px rgba(255,255,255,.25),0 8px 22px -8px rgba(255,255,255,.5)}
  .crnode.empty{visibility:hidden}
  /* répartition d'un duel */
  .crmatch{margin:4px 2px 2px}
  .crmtitle{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:9px;text-align:center}
  .crmatchrow{display:flex;align-items:center;gap:10px}
  .crmside{display:flex;align-items:center;gap:9px;flex:1;min-width:0;cursor:pointer}
  .crmside .crposter.sm{width:30px;flex:0 0 auto}
  .crmside span{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crmpct{font-weight:900;font-size:15px;flex:0 0 auto;font-variant-numeric:tabular-nums}
  .crsplit{display:flex;height:10px;border-radius:99px;overflow:hidden;margin:8px 0;background:#241f27}
  .crsplit .sa{background:linear-gradient(90deg,#8E2230,var(--accent))}
  .crsplit .sb{background:linear-gradient(90deg,var(--blue),#27497e)}
  .crmnote{font-size:10.5px;color:var(--muted);text-align:center;margin-top:6px;font-style:italic}
  /* Encarts publicitaires (discrets, clairement étiquetés) */
  .adslot:empty,.adbox:empty{display:none}
  .adbox{margin:16px 0;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;min-height:0}
  .adlbl{display:block;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#A8A0B5;margin:0 0 5px 4px}
  /* Hauteur réservée : l'annonce arrive après le rendu. Sans ce plancher, elle pousserait
     le contenu déjà lu vers le bas au moment où elle s'affiche (saut de mise en page). */
  .adbox .adsbygoogle{display:block;min-height:100px}
  @media(min-width:600px){ .adbox .adsbygoogle{min-height:120px} }
  /* insights */
  .crtips{display:flex;flex-direction:column;gap:8px}
  .crtip{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:12px;
    padding:10px 13px;font-size:13px;line-height:1.5;color:#e7ded4}
  /* classement % victoires */
  .crlist{display:flex;flex-direction:column;gap:8px}
  .crrow{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:8px 12px 8px 8px;cursor:pointer}
  .crrow:hover{border-color:var(--accent2)}
  .crrk{font-family:var(--serif);font-size:15px;font-weight:800;color:var(--muted);width:20px;text-align:center;flex:0 0 auto;font-variant-numeric:tabular-nums}
  .crrow .crposter.sm{width:36px;flex:0 0 auto;border-radius:7px}
  .crinfo{flex:1;min-width:0}
  .crname{font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .crbar{height:6px;border-radius:99px;background:#241f27;margin-top:6px;overflow:hidden}
  .crbar>i{display:block;height:100%;border-radius:99px;background:var(--duo-h)}
  .crpct{font-size:13.5px;font-weight:900;color:var(--accent2);flex:0 0 auto;font-variant-numeric:tabular-nums}