/* Le Martini Club · système de design commun (site, Duels, pages légales).
   Chargé en dernier sur chaque page : deux polices, une échelle de tailles, des champs et des boutons identiques partout. */
:root{
 --cond:Jost,"Futura","Century Gothic",system-ui,sans-serif; /* titres, étiquettes, boutons : même police que titelive.me */
 --ser:Jost,"Futura","Century Gothic",system-ui,sans-serif;  /* texte courant, champs */
 --t-xs:12px; --t-s:14px; --t-ui:16px; --t-body:17px;
 --t-lead:clamp(18px,1.6vw,22px); --t-h3:clamp(24px,2.3vw,33px); --t-h2:clamp(32px,3.6vw,52px); --t-h1:clamp(36px,7.8vw,112px);
 --disp:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif; /* titres : didone élégant, esprit affiches Bond */
 --wrapw:1280px; --gut:20px; /* largeur du contenu et marges : comme titelive.me */
 --ctl-h:52px; --ctl-r:999px;
 --r-s:999px; --r-ctl:18px; --r-card:28px; --r:28px; --rb:999px; --pill:999px; /* coins : pastilles, commandes, cartes */
}
html body{font-family:var(--ser);font-size:var(--t-body)}

/* =====================================================================
   RÈGLES GLOBALES — calquées sur l’accueil, appliquées à TOUTES les pages
   (site, fiches, Duels, pages légales). Aucune page ne doit y déroger.
   ===================================================================== */
/* H1 : grand titre de page (comme « Personnages », « Les 25 films ») */
html body h1:not(.vh){font:500 var(--t-h1)/.86 var(--cond)!important;text-transform:uppercase!important;font-style:italic!important;letter-spacing:-.01em!important;color:var(--fg)!important}
html body h1:not(.vh)::first-letter{color:var(--acc)}
/* H2 : titre de section (comme « À la une ») */
html body h2:not(.half h2):not(.vh){font:500 var(--t-h2)/1 var(--cond)!important;text-transform:uppercase!important;font-style:italic!important;letter-spacing:-.005em!important;color:var(--fg)!important}
html body h2:not(.half h2):not(.vh)::first-letter{color:var(--acc)}
/* H3 : titre de carte (comme les titres des actus) */
html body h3:not(.vh){font:500 var(--t-h3)/1.08 var(--cond)!important;text-transform:uppercase!important;font-style:normal!important;letter-spacing:.005em!important;color:var(--fg)!important}
/* Paragraphes : texte courant, et chapeau (texte d’introduction) */
html body p{font-family:var(--ser)!important;font-size:var(--t-body)!important;line-height:1.6!important;font-style:normal}
html body :is(p.lead,p.intro,p.sub,.hero p.lead,.top>p,.cx>p:first-of-type,.pq){font-size:var(--t-lead)!important;line-height:1.5!important}


/* ---------- Champs de saisie : même hauteur, même police, mêmes coins ---------- */
html body :is(input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=tel],input:not([type]),select){
 height:var(--ctl-h)!important;padding:0 18px!important;font:400 var(--t-body)/1.2 var(--ser)!important;border-radius:var(--ctl-r)!important;box-sizing:border-box;max-width:100%}
html body textarea{min-height:120px;padding:14px 18px!important;font:400 var(--t-body)/1.5 var(--ser)!important;border-radius:var(--ctl-r)!important;box-sizing:border-box}
html body .pwr input{padding-right:88px!important}
html body :is(input,select,textarea)::placeholder{font-family:var(--ser);font-size:var(--t-body)}
html body .eye{height:36px!important;padding:0 12px!important;font:500 var(--t-xs)/1 var(--cond)!important;letter-spacing:.14em!important;border-radius:8px!important}

/* ---------- Boutons : une seule taille ---------- */
html body :is(.btn,button.big,button.ghost,a.ghost,.choice button,.box button:not(.eye):not(.x):not(.lb-x)){
 min-height:var(--ctl-h)!important;padding:0 24px!important;font:500 var(--t-ui)/1 var(--cond)!important;letter-spacing:.16em!important;text-transform:uppercase;
 border-radius:var(--ctl-r)!important;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box}
html body .btn svg{width:18px;height:18px}

/* ---------- Étiquettes et petits textes ---------- */
html body :is(.kick,.ovl){font-size:var(--t-s)!important;letter-spacing:.36em!important}
html body :is(.jl,.d7l,label.l){font:500 var(--t-s)/1 var(--cond)!important;letter-spacing:.2em!important;text-transform:uppercase}
html body small{font-size:var(--t-s)}

/* ---------- Duels : mêmes couleurs que le site, en thème sombre comme en thème clair ---------- */
body.dp{--bg:#08080b;--bgr:8,8,11;--fg:#efe7d6;--strong:#f3ead7;--fg2:#cfc6b0;--mut:#9d9482;--acc:#e5414f;--accr:229,65,79;--accfg:#17120a;--surf:#0b0b0e}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="light"] body.dp{--bg:#f5efe3;--bgr:245,239,227;--fg:#1c1517;--strong:#120c0e;--fg2:#4b4038;--mut:#7c7064;--acc:#c41d2c;--accr:196,29,44;--accfg:#fffaf3;--surf:#fffaf2;
 --card:#fffaf2;--line:rgba(196,29,44,.26);--ink:#fffaf2;--red:#c41d2c;--yes:#c41d2c;--no:#a3121f;--shadow:0 18px 44px rgba(60,40,30,.14);background-color:var(--bg);color:var(--fg)}
:root[data-theme="light"] body.dp :is(h1,h2,h3,p,.ovl,.sub,.stamp){text-shadow:none!important}
:root[data-theme="light"] body.dp b,:root[data-theme="light"] body.dp strong{color:var(--strong)}
:root[data-theme="light"] body.dp .sx .bs{color:rgba(28,21,23,.18)}
:root[data-theme="light"] body.dp .half small{color:#ff5d6a}
/* Membres (page du propriétaire) en thème clair : cartes claires, textes lisibles */
:root[data-theme="light"] body.dp #list li.mc{background:radial-gradient(420px 240px at 100% 0,rgba(196,29,44,.09),transparent 70%),linear-gradient(160deg,#fffaf2,#f8f1e5)!important;border-color:rgba(196,29,44,.26);box-shadow:0 10px 30px rgba(60,40,30,.08)}
:root[data-theme="light"] body.dp #list li.mc:hover{box-shadow:0 16px 40px rgba(196,29,44,.16),0 0 0 1px rgba(196,29,44,.2)}
:root[data-theme="light"] body.dp #list li img,:root[data-theme="light"] body.dp #list li .ph{box-shadow:0 0 0 5px rgba(196,29,44,.1),0 8px 22px rgba(60,40,30,.18)}
:root[data-theme="light"] body.dp .pb{color:#7c7064;border-color:rgba(124,112,100,.4)}
:root[data-theme="light"] body.dp .pb.y{color:#2f7a3d;border-color:rgba(47,122,61,.45);background:rgba(47,122,61,.07)}
:root[data-theme="light"] body.dp .act .n,:root[data-theme="light"] body.dp .fbl:hover{color:var(--acc)}
:root[data-theme="light"] body.dp .ed input{background:#fffaf2}

/* Boutons principaux de Duels (« Lancer la mission », « Reprendre le tri »…) : même bouton plein que sur le site */
html body button.big{background:var(--acc)!important;color:var(--accfg)!important;border:0!important}
/* Cartes et blocs : tous au même arrondi */
html body :is(.box,.panel,.card,.stat,.steps>div,#list li.mc,.chg-box,.savebox,.pcard,.fact,.pn a,.score,.mnote,.kills,.pfacts,.yt,.duels,.empty,.pfacts,.cookie,#setup){border-radius:var(--r-card)!important}
/* Cartes des membres : toutes de la même hauteur, boutons alignés en bas */
html body #list{align-items:stretch!important}
html body #list li.mc{height:100%}
html body #list li.mc .act{margin-top:auto}

/* =====================================================================
   PETITES ANIMATIONS (partout, légères ; coupées si « réduire les animations »)
   ===================================================================== */
@keyframes mcUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mcWig{25%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}100%{transform:none}}
@keyframes mcSweep{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(220%) skewX(-20deg)}}
@keyframes mcLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mcFloat{50%{transform:translateY(-4px) rotate(-6deg)}}
/* Apparition au défilement */
.rv{opacity:0;transform:translateY(18px)}
.rv.rv-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--rvd,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--rvd,0ms)}
/* Titres : le trait sous les titres de section se dessine */
.h2{position:relative}
.h2::after{content:"";position:absolute;left:0;bottom:-1px;width:120px;height:2px;background:var(--acc);transform-origin:left;transform:scaleX(0)}
.h2.rv-in::after,.h2:not(.rv)::after{animation:mcLine .9s cubic-bezier(.2,.8,.2,1) .25s forwards}
/* Grands titres : entrée douce au chargement */
html body h1{animation:mcUp .8s cubic-bezier(.2,.8,.2,1) both}
/* Boutons : léger soulèvement + reflet qui passe ; icône qui bouge */
html body :is(.btn,button.big,button.ghost,a.ghost,.act button,.tabs button){position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background-color .3s,color .3s,border-color .3s}
html body :is(.btn,button.big,button.ghost,a.ghost,.act button)::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%) skewX(-20deg);pointer-events:none}
html body :is(.btn,button.big,button.ghost,a.ghost,.act button):hover::after{animation:mcSweep .8s ease}
html body :is(.btn,button.big,button.ghost,a.ghost,.act button):hover{transform:translateY(-2px)}
html body :is(.btn,button.big,button.ghost,a.ghost,.act button):active{transform:translateY(0) scale(.97)}
html body :is(.btn,button.ghost,a.ghost) svg{transition:transform .3s}
html body :is(.btn,button.ghost,a.ghost):hover svg{animation:mcWig .55s ease}
/* Cartes et vignettes : soulèvement, images qui zooment doucement */
html body :is(.card,.pcard,.poster,.stat,.steps>div,.box,.fact,.pn a,.casc li){transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
html body :is(.card,.pcard,.poster,.stat,.steps>div,.pn a):hover{transform:translateY(-4px)}
html body :is(.fact,.casc li):hover{transform:translateX(3px);border-color:rgba(var(--accr,229,65,79),.55)}
html body :is(.card .im,.poster img,.gal img,.pcard .ph img){transition:transform .8s cubic-bezier(.2,.8,.2,1)}
html body :is(.card:hover .im,.poster:hover img,.gal button:hover img){transform:scale(1.06)}
/* Barre du haut : icônes qui bougent au survol, logo qui trinque */
#tvnav a.l svg,#tvnav .acc svg,#tvnav .thm svg{transition:transform .3s}
#tvnav a.l:hover svg,#tvnav .thm:hover svg{animation:mcWig .55s ease}
#tvnav .logo img{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
#tvnav .logo:hover img{transform:rotate(-4deg) scale(1.05)}
/* Liens dans le texte : soulignement qui se dessine */
html body :is(.prose,p) a:not(.btn){text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s}
html body :is(.prose,p) a:not(.btn){background-size:100% 1px}
html body :is(.prose,p) a:not(.btn):hover{background-size:0 1px;background-position:100% 100%}
/* Étoiles : petit rebond au survol */
html body .sx{transition:transform .2s}
html body .sx:hover{transform:scale(1.18) rotate(-6deg)}
/* Tampon « Top secret » qui respire, tasse du café qui flotte */
html body .stamp{transition:transform .4s}
html body .stamp:hover{transform:rotate(-2deg) scale(1.05)}
#d7foot .bmc .cup svg{animation:mcFloat 3.2s ease-in-out infinite}
/* Champs : légère mise en avant à la saisie */
html body :is(input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea){transition:border-color .25s,box-shadow .25s,transform .25s}
html body :is(input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea):focus{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){
 .rv{opacity:1!important;transform:none!important}
 html body *,html body *::before,html body *::after{animation:none!important;transition:none!important}
}

/* =====================================================================
   LIQUID GLASS — partout : surfaces translucides et floutées, reflet en haut,
   bord lumineux, ombre douce. Thème sombre et thème clair.
   ===================================================================== */
:root{
 --g-tint:rgba(22,18,22,.42);            /* teinte du verre */
 --g-tint2:rgba(30,24,28,.55);           /* verre plus dense (barre du haut, fenêtres) */
 --g-sheen:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,0) 60%,rgba(255,255,255,.04) 100%);
 --g-edge:rgba(255,255,255,.14);
 --g-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(255,255,255,.04),0 12px 34px rgba(0,0,0,.32);
 --g-blur:blur(22px) saturate(170%);
 --g-red:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),rgba(229,65,79,.86);
}
:root[data-theme="light"]{
 --g-tint:rgba(255,252,246,.52);
 --g-tint2:rgba(255,252,246,.66);
 --g-sheen:linear-gradient(160deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.25) 40%,rgba(255,255,255,0) 62%,rgba(255,255,255,.3) 100%);
 --g-edge:rgba(255,255,255,.75);
 --g-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.35),0 12px 34px rgba(90,50,30,.12);
 --g-red:linear-gradient(160deg,rgba(255,255,255,.38),rgba(255,255,255,0) 55%),rgba(196,29,44,.88);
}
/* Le fond : des halos un peu plus présents, pour que le verre ait quelque chose à flouter */
.amb i{opacity:calc(var(--o) * 1.5)!important}

/* Barre du haut, sous-menu, flèches, retour en haut, bandeau de cookies, fenêtres */
html body #tvnav{background:var(--g-sheen),var(--g-tint2)!important;-webkit-backdrop-filter:var(--g-blur)!important;backdrop-filter:var(--g-blur)!important;border-bottom:1px solid var(--g-edge)!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.18)}
html body #tvnav .tvsub{background:transparent!important;border-top-color:var(--g-edge)!important}
html body :is(#tvnav .tvsub .grp,.fnav,#tvup,#tvdock>*,#tvck,#tvnav .acc,#tvnav .thm,.modal .box,.lb-x,.lb-a){background:var(--g-sheen),var(--g-tint)!important;-webkit-backdrop-filter:var(--g-blur)!important;backdrop-filter:var(--g-blur)!important;border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow)!important}
html body #tvnav .tvsub a.l.on{background:var(--g-sheen),rgba(var(--accr,229,65,79),.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}

/* Cartes, blocs, encadrés */
html body :is(.card,.pcard,.fact,.score,.mnote,.kills,.pfacts,.pn a,.casc li,.box,.panel,.stat,.steps>div,#list li.mc,.empty,.yt,#d7foot .bmc,.res li,.chg-box,.savebox,#tvst .in,.legal .card,.wrap>.card){
 background:var(--g-sheen),var(--g-tint)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow)!important}
html body :is(.card,.pcard,.box,.panel,.stat,.steps>div,#list li.mc,.pn a):hover{box-shadow:var(--g-shadow),0 20px 50px rgba(var(--accr,229,65,79),.18)!important;border-color:rgba(var(--accr,229,65,79),.45)!important}
/* Les cartes à photo gardent leur image nette : seul le texte est sur verre */
html body .card .im,html body .pcard .ph{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Boutons : verre clair pour les secondaires, verre rouge pour les principaux */
html body :is(.btn.ghost,button.ghost,a.ghost,.act button:not(.y),.tabs button:not(.on),.pfilt button:not(.on),.choice button:not(.yes)){
 background:var(--g-sheen),var(--g-tint)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow)!important}
html body :is(.btn:not(.ghost),button.big,.act button.y,.topl:not(.off),.tabs button.on,.pfilt button.on,.choice button.yes){
 background:var(--g-red)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.12),0 10px 26px rgba(var(--accr,229,65,79),.32)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html body :is(.btn.ghost,button.ghost,a.ghost,.act button:not(.y)):hover{background:var(--g-sheen),rgba(var(--accr,229,65,79),.14)!important;color:var(--fg)!important}

/* Champs de saisie en verre */
html body :is(input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=tel],select,textarea){
 background:var(--g-sheen),var(--g-tint)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.12)!important}
html body :is(input,select,textarea):focus{border-color:rgba(var(--accr,229,65,79),.6)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.12),0 0 0 4px rgba(var(--accr,229,65,79),.16)!important}

/* Petites pastilles (étiquettes, statut, numéro d'agent) */
html body :is(.pb,#list .ag,.tag,.kick+.date){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root{--g-tint:rgba(22,18,22,.86);--g-tint2:rgba(22,18,22,.92)}
 :root[data-theme="light"]{--g-tint:rgba(255,252,246,.94);--g-tint2:rgba(255,252,246,.96)}
}
/* Petit lecteur de musique : cadre en verre, étiquette « Lecture » en verre */
html body .ost{border:1px solid var(--g-edge)!important;border-radius:var(--r-card)!important;box-shadow:var(--g-shadow)!important;padding:5px;background:var(--g-sheen),var(--g-tint)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html body .ost iframe{border-radius:calc(var(--r-card) - 5px)}
html body .ost .snd{background:var(--g-sheen),var(--g-tint2)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--g-edge)!important;border-radius:var(--r-s)!important;color:var(--acc)!important;left:11px!important;top:11px!important}

/* =====================================================================
   ANGLES ARRONDIS — boutons, champs, onglets et pastilles en pilule ; cartes très arrondies
   ===================================================================== */
html body :is(.btn,button.big,button.ghost,a.ghost,.act button,.tabs button,.pfilt button,.pfilt input,.choice button,.topl,.eye,.undo,.rb,#tvnav a.l,#tvnav .acc,#tvnav .tvsub .grp,#tvnav .tvsub a.l,#tvnav .tvsub button.l,.h2 a,.tag,.pb,#list .ag,.date,.tlc,.lb-x,.snd,input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input[type=number],input[type=tel],select){border-radius:var(--pill)!important}
html body textarea{border-radius:var(--r-ctl)!important}
html body :is(.card,.pcard,.fact,.score,.mnote,.kills,.pfacts,.pn a,.box,.panel,.stat,.steps>div,#list li.mc,.empty,.yt,#d7foot .bmc,.chg-box,.savebox,#tvst .in,.modal .box,.ost,#tvck,.duels,.poster,.gal button,.pport,.fgrid .pst,.vid,.vid .th,.casc li,.res li,.half,.era){border-radius:var(--r-card)!important}
/* Boutons du compte et du thème : ronds */
html body #tvnav .thm,html body #tvnav .out{border-radius:50%!important}
/* Bouton du compte : nom toujours lisible (Safari) */
html body #tvnav .acc span{color:var(--fg)!important;-webkit-text-fill-color:currentColor;position:relative;z-index:1}
html body #tvnav .acc{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* =====================================================================
   CALQUE TITELIVE.ME — mêmes graisses,
   mêmes tailles de blocs (contenu 1 280 px, marges 20 px, cartes 28 px)
   ===================================================================== */
html body{--cond:Jost,"Futura","Century Gothic",system-ui,sans-serif;--ser:Jost,"Futura","Century Gothic",system-ui,sans-serif;font-family:var(--ser);line-height:1.5}
#tvnav,#tvprog,#tvup,.amb,#d7foot{--cond:Jost,"Futura","Century Gothic",system-ui,sans-serif;--ser:Jost,"Futura","Century Gothic",system-ui,sans-serif}
/* Titres : très gras, serrés, sans majuscules forcées ni italique */
html body h1:not(.vh){font:800 var(--t-h1)/.92 var(--cond)!important;letter-spacing:-.055em!important;text-transform:none!important;font-style:normal!important}
html body h2:not(.half h2):not(.vh){font:800 var(--t-h2)/1 var(--cond)!important;letter-spacing:-.045em!important;text-transform:none!important;font-style:normal!important}
html body h3:not(.vh){font:800 var(--t-h3)/.98 var(--cond)!important;letter-spacing:-.05em!important;text-transform:none!important;font-style:normal!important}
html body p{line-height:1.5!important}
html body :is(p.lead,p.intro,p.sub,.hero p.lead,.top>p,.cx>p:first-of-type,.pq){font-size:var(--t-lead)!important;line-height:1.5!important}
/* Boutons : 18 px, graisse 600, sans majuscules (comme les boutons de titelive.me) */
html body :is(.btn,button.big,button.ghost,a.ghost,.choice button,.box button:not(.eye):not(.x):not(.lb-x),.act button,.topl){font:600 18px/1 var(--cond)!important;letter-spacing:-.01em!important;text-transform:none!important}
/* Barre du haut et sous-menu : 15,5 px, graisse 600 */
html body #tvnav :is(a.l,.acc,.tvsub a.l,.tvsub button.l){font:600 15.5px/1 var(--cond)!important;letter-spacing:-.01em!important;text-transform:none!important}
/* Petites étiquettes : majuscules discrètes */
html body :is(.kick,.ovl,.tag,.date,.pb,#list .ag,.h2 a,.fact small,.pcard small,.jl,.d7l,.crumbs){font-family:var(--cond)!important;font-weight:600!important;letter-spacing:.06em!important}
/* Largeur des blocs : 1 280 px de contenu, 20 px de marge */
html body :is(.wrap,#tvnav .in,#d7foot .in){max-width:calc(var(--wrapw) + 2 * var(--gut))!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important;box-sizing:border-box}
html body #d7foot .in{max-width:var(--wrapw)!important;padding:0!important}
html body #d7foot{padding-left:max(var(--gut),calc(50vw - var(--wrapw) / 2))!important;padding-right:max(var(--gut),calc(50vw - var(--wrapw) / 2))!important}
/* Pages de lecture (mentions, confidentialité…) : 820 px comme sur titelive.me */
html body.legal{padding-left:0!important;padding-right:0!important}
html body.legal .wrap:not(#z){max-width:calc(820px + 2 * var(--gut))!important}
/* Grilles : 16 px d'écart ; cartes : 10 px de marge intérieure autour de l'image, 18 px en bas */
html body :is(.grid,.pgrid,.posters,.gal,.stats,.steps,#list){gap:16px!important}
html body :is(.card,.pcard){padding:10px 10px 18px!important}
html body .card .im{border-radius:20px!important;overflow:hidden}
html body .pcard .ph{border-radius:20px!important;overflow:hidden}
html body .card .tx,html body .pcard .pc{padding-left:12px!important;padding-right:12px!important}
/* Noms, chiffres et titres de cartes : même graisse serrée que titelive.me */
html body :is(.pcard b,.poster .cap b,#d7foot .br,#d7foot .bmc .tx b,.score .v,.kills .kn b,.stat strong,.pn b,.fnav b,#list .id b,.res li b,.era h3){font-family:var(--cond)!important;font-weight:800!important;font-style:normal!important;text-transform:none!important;letter-spacing:-.04em!important}
html body :is(.pfilt button,.tabs button,.genctl button){font:600 15.5px/1 var(--cond)!important;letter-spacing:-.01em!important;text-transform:none!important}
/* Encarts « Bientôt » et « Cette page en chiffres » : pleine largeur, mêmes styles que le reste */
html body .grid>.empty,html body .empty{grid-column:1/-1;width:100%;text-align:left;padding:28px 30px!important;border-style:solid!important}
html body .empty p{margin:0!important;max-width:none}
html body .empty h3{color:var(--fg)!important;margin:0 0 6px!important}
html body #tvst .in{max-width:none!important;width:100%;text-align:left;padding:24px 30px!important;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 32px}
html body #tvst .tvst-t{grid-column:1/-1;margin:0 0 8px!important;font:600 var(--t-s) var(--cond)!important;letter-spacing:.06em!important;text-transform:uppercase;color:var(--mut)!important}
html body #tvst ul{display:flex!important;gap:48px!important;grid-column:1}
html body #tvst li{gap:6px!important}
html body #tvst b{font:800 var(--t-h2)/1 var(--cond)!important;letter-spacing:-.045em!important;font-style:normal!important}
html body #tvst small{font:600 var(--t-xs) var(--cond)!important;letter-spacing:.06em!important;text-transform:uppercase}
html body #tvst p{grid-column:1/-1;font-style:normal!important}
html body #tvst button{grid-column:2;grid-row:2;justify-self:end;font:600 15.5px var(--cond)!important;color:var(--mut)}
@media (max-width:640px){html body #tvst .in{grid-template-columns:1fr}html body #tvst button{grid-column:1;grid-row:auto;justify-self:start}}
/* Pied de page : mêmes styles que le reste */
html body #d7foot .br{font:800 var(--t-h3)/1 var(--cond)!important;letter-spacing:-.05em!important}
html body #d7foot .bmc .tx b{font:800 var(--t-h3)/1.05 var(--cond)!important;letter-spacing:-.05em!important;text-transform:none!important}
html body #d7foot .bmc .tx span,html body #d7foot p{font:400 var(--t-body)/1.5 var(--ser)!important}
html body #d7foot nav a{font:600 15.5px/1 var(--cond)!important;letter-spacing:-.01em!important;text-transform:none!important}
html body #d7foot .cp{font:600 var(--t-xs)/1.5 var(--cond)!important;letter-spacing:.06em!important}
html body #d7foot .bmc a[href*="buymeacoffee.com/titelive"]{min-height:52px;padding:0 24px!important;font:600 18px/1 var(--cond)!important;letter-spacing:-.01em!important;text-transform:none!important}

/* =====================================================================
   POLICES « JAMES BOND » — deux seulement :
   Bodoni Moda (titres, noms, chiffres) + Jost, géométrique façon Futura (texte, boutons, menus)
   ===================================================================== */
html body{font-family:var(--ser);letter-spacing:.005em}
html body h1:not(.vh){font:700 var(--t-h1)/.95 var(--disp)!important;letter-spacing:-.02em!important;text-transform:none!important;font-style:normal!important}
html body h1:not(.vh)::first-letter{font-style:italic}
html body h2:not(.half h2):not(.vh){font:700 var(--t-h2)/1.02 var(--disp)!important;letter-spacing:-.015em!important;text-transform:none!important;font-style:normal!important}
html body h3:not(.vh){font:600 var(--t-h3)/1.08 var(--disp)!important;letter-spacing:-.01em!important;text-transform:none!important;font-style:normal!important}
html body :is(.pcard b,.poster .cap b,#d7foot .br,#d7foot .bmc .tx b,.score .v,.kills .kn b,.stat strong,.pn b,.fnav b,#list .id b,.res li b,.era h3,#tvst b){font-family:var(--disp)!important;font-weight:700!important;font-style:normal!important;letter-spacing:-.01em!important;text-transform:none!important}
/* Boutons, menus, étiquettes : Jost en capitales espacées, comme les génériques */
html body :is(.btn,button.big,button.ghost,a.ghost,.choice button,.box button:not(.eye):not(.x):not(.lb-x),.act button,.topl,#d7foot .bmc a[href*="buymeacoffee.com/titelive"]){font:600 15px/1 var(--cond)!important;letter-spacing:.14em!important;text-transform:uppercase!important}
html body #tvnav :is(a.l,.acc,.tvsub a.l,.tvsub button.l){font:500 14px/1 var(--cond)!important;letter-spacing:.12em!important;text-transform:uppercase!important}
html body :is(.pfilt button,.tabs button,.genctl button,#d7foot nav a){font:500 14px/1 var(--cond)!important;letter-spacing:.12em!important;text-transform:uppercase!important}
html body :is(.kick,.ovl,.tag,.date,.pb,#list .ag,.h2 a,.fact small,.pcard small,.jl,.d7l,.crumbs,#tvst .tvst-t,#tvst small,#d7foot .cp){font-family:var(--cond)!important;font-weight:500!important;letter-spacing:.2em!important;text-transform:uppercase}
/* Pied de page centré : verre à martini, nom, texte, liens en pastilles, crédit */
html body #d7foot .in{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:22px!important}
html body #d7foot .in>div:not(.bmc):not(.cp){display:flex;flex-direction:column;align-items:center;max-width:680px}
html body #d7foot .bmc{width:100%;text-align:left}
html body #d7foot .br{display:block;margin:8px 0 12px!important}
html body #d7foot .br::before{content:"";display:block;margin:0 auto 14px;width:46px;height:62px;background:var(--acc,#e5414f);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 180' fill='none' stroke='black' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 32H118L64 100Z'/%3E%3Cpath d='M64 100V168M34 172H94M76 12L50 68'/%3E%3Ccircle cx='50' cy='68' r='9' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 180' fill='none' stroke='black' stroke-width='10' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 32H118L64 100Z'/%3E%3Cpath d='M64 100V168M34 172H94M76 12L50 68'/%3E%3Ccircle cx='50' cy='68' r='9' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;animation:mcGlass 4s ease-in-out infinite;transform-origin:50% 100%}
html body #d7foot p{margin:0 0 8px!important;max-width:680px}
html body #d7foot nav{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:10px!important}
html body #d7foot nav a{border:1px solid var(--g-edge)!important;border-radius:999px;padding:12px 20px!important;background:var(--g-sheen),var(--g-tint);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow)}
html body #d7foot nav a:hover{padding-left:20px!important;color:var(--acc)!important;border-color:rgba(var(--accr,229,65,79),.5)!important}
html body #d7foot .cp{width:100%;flex-direction:column;align-items:center;justify-content:center!important;gap:12px!important;text-align:center}

/* Mobile : la déconnexion est dans les pastilles en bas à droite, la barre du haut garde de la place */
@media (max-width:900px){html body #tvnav .out{display:none!important}}
/* Cartes élargies pour combler la dernière ligne : image recadrée, même hauteur que les autres */
html body .gfill :is(.ph,.im) img,html body .gfill>img{object-fit:cover;width:100%}
/* Blocs d’infos d’une fiche : hauteur selon le contenu, pas de grand vide */
html body .facts{align-items:start}

/* Largeurs calées sur titelive.me : accueil et listes 1 280 px, fiches et articles 1 000 px, pages légales 820 px ; 20 px de marge */
html body.detail :is(main.wrap,header .wrap,.page.wrap,article.wrap,.wrap.art,#tvst):not(#z){max-width:calc(1000px + 2 * var(--gut))!important}
/* Pages Compte et Connexion de Duels : largeur de lecture (1 000 px), comme les fiches */
html body.dp:is(:has(#joinf),:has(#sinf),:has(.cx)) .wrap:not(#z){max-width:calc(1000px + 2 * var(--gut))!important}
/* Affiches de films : toutes de la même taille, alignées */
html body .posters>*{grid-column:auto!important}
html body .pcard.gfill .ph{aspect-ratio:auto}
/* Interprètes d’une fiche : liste compacte ; blocs d’infos de même hauteur */
html body .facts{align-items:stretch!important}
html body .fact .ia{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--g-edge)}
html body .fact .ia:first-of-type{border-top:0;padding-top:2px}
html body .fact .ia small.fn{display:block;margin:0!important;font-size:var(--t-xs)!important;color:var(--mut)}
/* Cartes de critiques : note sur 10 sur l’image */
html body .card.crit .im{position:relative}
html body .card.crit .note{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:baseline;gap:3px;padding:8px 14px;border-radius:999px;background:var(--g-sheen),var(--g-tint2);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge);color:var(--mut);font:500 var(--t-s)/1 var(--cond)}
html body .card.crit .note b{font:700 26px/1 var(--disp);color:var(--fg)}
/* Duels, notation : lignes en verre aérées, titres élégants, petites animations */
html body #ratel li:nth-child(n){padding:16px 26px!important;margin-bottom:10px;border-radius:var(--r-card)!important;background:var(--g-sheen),var(--g-tint)!important;border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow)!important;animation:mcUp .55s cubic-bezier(.2,.8,.2,1) both;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
html body #ratel li:nth-child(2){animation-delay:.04s}html body #ratel li:nth-child(3){animation-delay:.08s}html body #ratel li:nth-child(4){animation-delay:.12s}html body #ratel li:nth-child(5){animation-delay:.16s}html body #ratel li:nth-child(n+6){animation-delay:.2s}
html body #ratel li:nth-child(n):hover{transform:translateX(6px);border-color:rgba(var(--accr,229,65,79),.5)!important;box-shadow:var(--g-shadow),0 14px 34px rgba(var(--accr,229,65,79),.18)!important}
html body #ratel .tt{font:600 var(--t-h3)/1.1 var(--disp)!important;text-transform:none!important;letter-spacing:-.01em!important}
html body #ratel .sx .on{transition:width .25s ease}
html body #ratel .sx:active{transform:scale(.85)}
@media (max-width:640px){html body #ratel li:nth-child(n){padding:14px 18px!important}}
/* Classements (général, rapport, tops) : lignes en verre aérées, jamais collées aux bords, petites animations */
html body :is(#genl,#res,.res) li:nth-child(n){padding:18px 28px!important;margin-bottom:10px;border-radius:var(--r-card)!important;background:var(--g-sheen),var(--g-tint)!important;border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow)!important;animation:mcUp .55s cubic-bezier(.2,.8,.2,1) both;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
html body :is(#genl,#res,.res) li:nth-child(2){animation-delay:.04s}html body :is(#genl,#res,.res) li:nth-child(3){animation-delay:.08s}html body :is(#genl,#res,.res) li:nth-child(4){animation-delay:.12s}html body :is(#genl,#res,.res) li:nth-child(n+5){animation-delay:.16s}
html body :is(#genl,#res,.res) li:nth-child(n):hover{transform:translateX(6px)!important;border-color:rgba(var(--accr,229,65,79),.5)!important;box-shadow:var(--g-shadow),0 14px 34px rgba(var(--accr,229,65,79),.18)!important}
html body :is(#genl,#res,.res) li .bar{border-radius:999px;overflow:hidden}
html body :is(#genl,#res,.res) li .bar i{border-radius:999px;transform-origin:left;animation:mcLine 1.1s cubic-bezier(.2,.8,.2,1) .2s both}
@media (max-width:640px){html body :is(#genl,#res,.res) li:nth-child(n){padding:14px 18px!important}}
/* « La saga en chiffres » (Stats) et encadrés d’infos : cartes identiques, même hauteur, mêmes marges */
html body #facts{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important;grid-auto-rows:1fr;align-items:stretch!important;gap:16px!important}
html body #facts>.fact{grid-column:auto!important;height:100%;padding:24px 26px!important;justify-content:flex-start;gap:10px!important;transform:none!important}
html body #facts>.fact:hover{transform:translateY(-3px)!important}
html body #facts .fact strong{font:700 var(--t-h2)/1 var(--disp)!important;text-transform:none!important;letter-spacing:-.01em!important;color:var(--acc)}
html body #facts .fact span{font:400 var(--t-ui)/1.5 var(--ser)!important}
html body .fact:hover{transform:none}
/* Note sur 10 des critiques : pastille pleine, bien lisible sur n’importe quelle image */
html body .card.crit .note{background:var(--acc)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid rgba(255,255,255,.35)!important;color:#fff!important;padding:7px 14px 7px 15px!important;box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)!important;font:600 15px/1 var(--cond)!important;letter-spacing:.02em}
html body .card.crit .note b{font:700 26px/1 var(--cond)!important;color:#fff!important;letter-spacing:-.02em}
/* Largeur maximale identique partout : pas de marge en plus sur les pages de Duels (20 px de marge, comme le reste) */
html body.dp{padding-left:0!important;padding-right:0!important}
html body.dp .hero{margin-inline:0!important;padding-inline:0!important}
/* Bond 26 dans le menu : pastille rouge comme Duels */
html body #tvnav a.l.b26{border:1px solid rgba(var(--accr,229,65,79),.55)!important;color:var(--acc)!important;margin-left:4px}
html body #tvnav a.l.b26:hover{background:var(--acc)!important;color:#fff!important;border-color:var(--acc)!important}
/* Tri des critiques */
html body .ctri{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 26px}
html body .ctri small{font:500 var(--t-s)/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-right:4px}
html body .ctri button{min-height:44px;padding:0 18px;border-radius:999px;cursor:pointer;font:500 14px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);background:var(--g-sheen),var(--g-tint);border:1px solid var(--g-edge);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);transition:background .25s,color .25s,transform .25s}
html body .ctri button:hover{transform:translateY(-2px)}
html body .ctri button.on{background:var(--g-red);color:#fff;border-color:rgba(255,255,255,.28)}
html body .ctri .sep{width:1px;height:26px;background:var(--g-edge);margin:0 6px}
/* Largeur maximale réduite : 1 000 px partout (comme les pages de critiques de titelive.me), pages légales 820 px */
:root{--wrapw:1000px}
html body :is(.wrap,#tvnav .in):not(#z){max-width:calc(var(--wrapw) + 2 * var(--gut))!important}
html body #d7foot .in:not(#z){max-width:var(--wrapw)!important}
html body #d7foot:not(#z){padding-left:max(var(--gut),calc(50vw - var(--wrapw) / 2))!important;padding-right:max(var(--gut),calc(50vw - var(--wrapw) / 2))!important}
html body.legal .wrap:not(#z){max-width:calc(820px + 2 * var(--gut))!important}
/* Barre du haut tenue dans 1 000 px : liens serrés, petites icônes */
@media (min-width:901px){
 html body #tvnav a.l svg{display:inline-block!important;width:15px!important;height:15px!important;opacity:.85}
 html body #tvnav a.l{gap:5px!important}
 html body #tvnav :is(a.l,.acc){padding:9px 11px!important;font-size:13.5px!important;letter-spacing:.09em!important}
 html body #tvnav .links{gap:0!important}
 html body #tvnav .acc span{max-width:110px}
}
@media (min-width:901px){
 html body #tvnav .out{display:none!important} /* la déconnexion reste dans les pastilles en bas à droite */
 html body #tvnav :is(a.l,.acc){padding:9px 9px!important;letter-spacing:.06em!important}
 html body #tvnav .acc.logged:has(img) span{display:none}
 html body #tvnav .acc.logged:has(img){padding:4px!important;border-radius:50%!important}
 html body #tvnav .acc.logged img{margin:0!important}
 html body #tvnav .links{overflow:visible!important}
}
/* Cartes d’articles : image toujours à 10 px du bord (zoom à l’intérieur), titres à taille de carte */
html body .card .im{transform:none!important;transition:filter .5s!important;background-size:cover}
html body .card:hover .im{filter:brightness(1.08) saturate(1.08)}
html body .grid .card:not(.big) h3{font-size:clamp(22px,2vw,26px)!important;line-height:1.12!important}
html body .card .tx{padding:18px 16px 8px!important}
/* Bouton thème et pastilles rondes : icônes toujours bien contrastées */
html body #tvnav .thm,html body #tvdock>*{color:#f3ead7!important}
html body #tvnav .thm svg,html body #tvdock>* svg{width:20px!important;height:20px!important;stroke-width:2.2}
html body #tvnav .thm:hover{background:var(--acc)!important;color:#fff!important}
:root[data-theme="light"] body #tvnav .thm,:root[data-theme="light"] body #tvdock>*{color:#1c1517!important}
html body #tvdock #tvdout{color:#ff5b68!important}
:root[data-theme="light"] body #tvdock #tvdout{color:#c41d2c!important}
/* Bouton du compte (photo) : cercle parfait, même taille que le bouton thème */
html body #tvnav .acc.logged:has(img){width:42px!important;height:42px!important;min-width:42px;padding:0!important;display:grid!important;place-items:center;border-radius:50%!important;flex:none}
html body #tvnav .acc.logged:has(img) img{width:34px!important;height:34px!important;border-radius:50%!important;object-fit:cover;margin:0!important;display:block}
html body #tvnav .acc.logged:has(img) svg{display:none}
/* Cartes des membres : pseudonyme, nom et prénom, film préféré ; boutons lisibles en entier */
html body #list .id{display:flex;flex-direction:column;gap:4px;min-width:0}
html body #list .id .rn{font:500 var(--t-ui)/1.3 var(--ser);color:var(--fg2)}
html body #list .id .fav{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;font:400 var(--t-s)/1.4 var(--ser);color:var(--mut)}
html body #list .id .fav i{font-style:normal;color:var(--acc)}
html body #list .id .fav b{color:var(--fg);font-weight:600}
html body #list .id small{font-size:var(--t-xs)!important;color:var(--mut)}
html body #list li.mc .act>button{font-size:13px!important;letter-spacing:.06em!important;padding:0 10px!important;text-overflow:clip!important}
html body #list li.mc .act>button::before{margin-right:.4em!important}
/* Tops : sélecteur des membres en grille régulière, cartes de même taille, verre, noms en casse normale */
html body .pick{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px!important}
html body .pick button{width:100%;min-height:72px;justify-content:flex-start;gap:14px!important;padding:10px 18px 10px 10px!important;border-radius:999px!important;background:var(--g-sheen),var(--g-tint)!important;border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--fg)!important;font:700 19px/1.15 var(--disp)!important;text-transform:none!important;letter-spacing:-.01em!important;text-align:left;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;animation:mcUp .5s cubic-bezier(.2,.8,.2,1) both}
html body .pick button:hover{transform:translateY(-3px)!important;border-color:rgba(var(--accr,229,65,79),.5)!important}
html body .pick button.on{background:var(--g-red)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important}
html body .pick button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .pick img,html body .pick i{width:50px!important;height:50px!important;flex:none;border:2px solid var(--acc)!important}
html body .pick button.on :is(img,i){border-color:#fff!important}
html body .pick small{font:500 var(--t-xs)/1 var(--cond)!important;letter-spacing:.18em!important;color:var(--mut);opacity:1!important;margin-bottom:5px!important}
html body .pick button.on small{color:rgba(255,255,255,.85)}
/* Boutons des formulaires (Enregistrer…) : même bouton que partout, jamais écrasé */
html body :is(.ed,.savebox,.chg-box,form) :is(button,.btn):not(.eye):not(.x){min-height:52px!important;padding:0 26px!important;font:600 15px/1 var(--cond)!important;letter-spacing:.14em!important;text-transform:uppercase!important;border-radius:999px!important;white-space:nowrap}
html body #list li.mc .ed .act{display:flex!important;flex-wrap:wrap;gap:10px;border-top:0;padding-top:4px}
html body #list li.mc .ed .act>button{flex:0 0 auto;font-size:15px!important;letter-spacing:.14em!important;padding:0 26px!important}
/* Cartes des membres : boutons à la hauteur standard, film préféré à taille de texte */
html body #list li.mc .act>*{min-height:52px!important;display:flex!important;align-items:center;justify-content:center}
html body #list .id .fav b{font:600 var(--t-ui)/1.3 var(--ser)!important;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--fg)!important;letter-spacing:0!important}
html body .ed .e2c{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){html body .ed .e2c{grid-template-columns:1fr}}
html body .ed input[type=file]{height:auto!important;padding:12px 16px!important}
/* Tops : comparaison de deux classements */
html body .cmp select{display:inline-block;width:auto;min-width:200px;height:44px!important;margin:0 4px;vertical-align:middle}
html body .cmp-score{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:20px 24px;border-radius:var(--r-card);background:var(--g-sheen),var(--g-tint);border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
html body .cmp-score>b{font:700 72px/1 var(--disp);color:var(--acc);letter-spacing:-.03em}
html body .cmp-score>b small{font-size:.45em;margin-left:2px}
html body .cmp-score span{display:flex;flex-direction:column;gap:4px;color:var(--fg2)}
html body .cmp-score strong{font:700 var(--t-h3)/1.1 var(--disp);color:var(--fg)}
html body .cmp-gap h3{margin:18px 0 10px!important;font-size:var(--t-lead)!important}
html body .cmp-gap ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}
html body .cmp-gap li{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:var(--r-ctl);background:var(--g-sheen),var(--g-tint);border:1px solid var(--g-edge)}
html body .cmp-gap li b{font:700 19px/1.15 var(--disp)}
html body .cmp-gap li span{font-size:var(--t-s);color:var(--mut)}
html body .cmp-tab{margin-top:18px;display:flex;flex-direction:column;gap:4px}
html body :is(.cmp-h,.cmp-r){display:grid;grid-template-columns:40px minmax(0,1fr) 70px 70px;gap:10px;align-items:center;padding:10px 18px;border-radius:999px}
html body .cmp-h{font:500 var(--t-xs)/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
html body .cmp-r{background:var(--g-sheen),var(--g-tint);border:1px solid var(--g-edge);animation:mcUp .45s cubic-bezier(.2,.8,.2,1) both}
html body .cmp-r span:first-child{font:700 18px/1 var(--disp);color:var(--acc)}
html body .cmp-r span:nth-child(2){font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .cmp-r span:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}
html body .cmp-r.eq{border-color:rgba(47,160,70,.45)}html body .cmp-r.eq span:last-child{color:#4cbb6c}
html body .cmp-r.mid span:last-child{color:#d4a24c}
html body .cmp-r.far{border-color:rgba(var(--accr,229,65,79),.5)}html body .cmp-r.far span:last-child{color:var(--acc)}
/* Barre du haut : un petit espace entre chaque pastille (elles ne se touchent plus) */
@media (min-width:901px){html body #tvnav .links{gap:4px!important}html body #tvnav .in{gap:6px!important}html body #tvnav :is(a.l,.acc){padding:9px 10px!important}}
/* Bond 26 : isolé du reste du menu (séparateur + espace), plus encore que Duels */
@media (min-width:901px){
 html body #tvnav a.l.b26{position:relative;margin-left:22px!important;margin-right:10px!important;overflow:visible!important}
 html body #tvnav a.l.b26::before{content:"";position:absolute;left:-13px;top:50%;width:1px;height:24px;transform:translateY(-50%);background:var(--g-edge)}
 html body #tvnav a.l.b26::after{display:none!important}
}
/* Tri des critiques : deux groupes segmentés sur une ligne (trier à gauche, filtrer à droite) */
html body .ctri{display:flex!important;justify-content:space-between;align-items:center;gap:12px!important;flex-wrap:wrap;margin:0 0 26px}
html body .ctri .seg{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--g-sheen),var(--g-tint);border:1px solid var(--g-edge);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html body .ctri .seg button{min-height:42px!important;padding:0 18px!important;border:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--fg2)!important;font:500 14px/1 var(--cond)!important;letter-spacing:.12em!important;text-transform:uppercase;border-radius:999px!important;transform:none!important}
html body .ctri .seg button:hover{color:var(--fg)!important;background:rgba(var(--accr,229,65,79),.12)!important}
html body .ctri .seg button.on{background:var(--g-red)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(var(--accr,229,65,79),.3)!important}
@media (max-width:640px){html body .ctri .seg{width:100%}html body .ctri .seg button{flex:1;padding:0 8px!important}}
/* Note des critiques : pastille blanche, chiffre rouge très contrasté, plus grande */
html body .card.crit .note{background:#fff!important;color:#17120a!important;border:0!important;padding:8px 16px 8px 17px!important;box-shadow:0 8px 22px rgba(0,0,0,.55)!important;font:700 16px/1 var(--cond)!important;opacity:1!important;filter:none!important}
html body .card.crit .note b{font:800 32px/1 var(--cond)!important;color:#c41d2c!important;-webkit-text-fill-color:#c41d2c!important;opacity:1!important}
html body .card.crit .note,html body .card .im .tag{z-index:3!important;position:absolute}
html body.dp .wrap.cx>.box{max-width:none!important;width:100%}
/* Mots importants : toujours en gras et plus clairs que le texte, partout */
html body :is(p,li,span,small,label,td) :is(b,strong){font-weight:700!important;color:var(--strong,#f3ead7)!important;-webkit-text-fill-color:currentColor}
:root[data-theme="light"] body :is(p,li,span,small,label,td) :is(b,strong){color:#120c0e!important}
html body .who b{font:700 var(--t-h3)/1.1 var(--disp)!important;font-style:normal!important;text-transform:none!important;letter-spacing:-.01em!important}
/* Le verre du pied de page bouge exactement comme celui du logo */
@keyframes mcGlass{0%,100%{transform:none}50%{transform:translateY(-5px) rotate(-6deg)}}
/* Critique (copie de titelive.me) */
html body .cscore{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px;padding:18px 22px;border-radius:var(--r-card);background:var(--g-sheen),var(--g-tint);border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
html body .cscore .cn{display:flex;align-items:baseline;gap:4px}
html body .cscore .cn b{font:700 64px/1 var(--disp)!important;color:var(--acc)!important}
html body .cscore .cn i{font-style:normal;font:500 20px var(--cond);color:var(--mut)}
html body .cgs{display:flex;gap:18px;flex:1;min-width:200px}
html body .cg{flex:1;display:flex;flex-direction:column;gap:6px}
html body .cg small{font:500 var(--t-xs)/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
html body .cg b{font:700 22px/1 var(--disp)!important}html body .cg b i{font-style:normal;font-size:.6em;color:var(--mut)}
html body .cgb{height:6px;border-radius:999px;background:rgba(var(--accr,229,65,79),.15);overflow:hidden}html body .cgb i{display:block;height:100%;background:var(--acc);border-radius:999px;transform-origin:left;animation:mcLine 1s cubic-bezier(.2,.8,.2,1) .3s both}
html body .capp{padding:8px 16px;border-radius:999px;background:var(--g-red);color:#fff;font:600 14px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
html body .cquote{margin:clamp(30px,5vw,56px) 0 0;padding:26px 30px;border-left:4px solid var(--acc);border-radius:var(--r-card);background:var(--g-sheen),var(--g-tint);font:600 var(--t-h3)/1.25 var(--disp);font-style:italic}
html body .cquote small{display:block;margin-top:10px;font:500 var(--t-s) var(--cond);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
html body .pm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){html body .pm{grid-template-columns:1fr}}
html body .pmb{padding:24px 26px;border-radius:var(--r-card);background:var(--g-sheen),var(--g-tint);border:1px solid var(--g-edge);box-shadow:var(--g-shadow)}
html body .pmb h3{margin:0 0 12px!important;font-size:var(--t-lead)!important}
html body .pmb.plus h3{color:#4cbb6c!important}html body .pmb.moins h3{color:var(--acc)!important}
html body .pmb ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
html body .pmb ul ul{margin-top:6px;gap:4px}
html body .pmb li{line-height:1.5;color:var(--fg2)}
html body .pmb.plus>ul>li::marker{color:#4cbb6c}html body .pmb.moins>ul>li::marker{color:var(--acc)}
html body .cleg{margin-top:10px!important;color:var(--mut);font-style:italic!important}

/* Menu avec icônes : tout tient dans 1 000 px */
@media (min-width:901px){
 html body #tvnav :is(a.l,.acc):not(#z){padding:9px 7px!important;letter-spacing:.035em!important}
 html body #tvnav .links a.l svg{width:14px!important;height:14px!important}
 html body #tvnav .acc:not(.logged) span{font-size:12.5px}
}
/* Rangée des 25 films : défilement horizontal seulement (pas d’ascenseur vertical), place pour le survol */
html body .rail{overflow-x:auto!important;overflow-y:hidden!important;padding:14px 4px 18px!important;margin-top:-14px;scrollbar-width:thin}
html body .rail::-webkit-scrollbar{height:6px}html body .rail::-webkit-scrollbar:vertical{display:none;width:0}
/* Titres sur les affiches : toujours blancs (posés sur l’image sombre), en thème clair aussi */
html body .poster .cap b{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.8)}
/* Blocs toujours sombres (encart Duels de l’accueil, fenêtres, affiches) : texte et gras clairs, même en thème clair */
html body :is(.duels,.modal,.half,.poster .cap) :is(p,span,li){color:#e6ddc8!important}
html body :is(.duels,.modal,.half,.poster .cap) :is(b,strong){color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Holocène (Bond 26) : logo et vert du site Holocène & L’Arche */
html body #tvnav a.l.b26{color:#1f9d64!important;border-color:rgba(63,224,154,.55)!important;gap:8px}
html body #tvnav a.l.b26 svg.h6{display:block!important;width:20px!important;height:20px!important;flex:none}
html body #tvnav a.l.b26 svg.h6 .r1{transform-origin:32px 32px;animation:h6r 9s linear infinite}
html body #tvnav a.l.b26 svg.h6 .r2{transform-origin:32px 32px;animation:h6r 6s linear infinite reverse}
@keyframes h6r{to{transform:rotate(360deg)}}
html body #tvnav a.l.b26:hover{background:#3FE09A!important;color:#0b1a14!important;border-color:#3FE09A!important}
:root:not([data-theme="light"]) body #tvnav a.l.b26{color:#3FE09A!important}
@media (prefers-reduced-motion:reduce){html body #tvnav a.l.b26 svg.h6 circle{animation:none!important}}
/* Holocène : tout au bout de la barre, séparé, en vert plein bien lisible */
html body #tvnav a.l.b26{order:99;margin-left:18px!important;margin-right:0!important;background:#0f3b2b!important;color:#5ff0b0!important;border:1px solid #3FE09A!important;box-shadow:0 6px 18px rgba(31,157,100,.35),inset 0 1px 0 rgba(255,255,255,.18)!important;font-weight:600!important}
html body #tvnav a.l.b26::before{left:-11px!important;height:28px!important;background:var(--g-edge)!important;display:block!important;content:""}
:root[data-theme="light"] body #tvnav a.l.b26{background:#1f9d64!important;color:#fff!important;border-color:#1f9d64!important}
html body #tvnav a.l.b26 svg.h6 circle:first-child{stroke:currentColor;stroke-opacity:.45}
html body #tvnav a.l.b26 svg.h6 .r2{stroke:#cfe6ff}
:root[data-theme="light"] body #tvnav a.l.b26 svg.h6 .r1,:root[data-theme="light"] body #tvnav a.l.b26 svg.h6 circle:last-child{stroke:#fff;fill:#fff}
:root[data-theme="light"] body #tvnav a.l.b26 svg.h6 circle:last-child{stroke:none}
html body #tvnav a.l.b26:hover{background:#3FE09A!important;color:#0b1a14!important}
@media (max-width:900px){html body #tvnav a.l.b26{order:2;margin-left:4px!important}html body #tvnav a.l.b26::before{display:none!important}}