/* Le Martini Club · feuille de style commune (même langage visuel que Duels) */
:root{color-scheme:dark;--bg:#08080b;--bg2:#0d0d11;--fg:#efe7d6;--fg2:#cfc6b0;--mut:#9d9482;--strong:#f3ead7;--acc:#e5414f;--accfg:#17120a;--red:#c8202f;--line:rgba(229,65,79,.32);--line2:rgba(229,65,79,.45);--card:linear-gradient(160deg,rgba(229,65,79,.08),rgba(8,8,11,.78));--ph:#141016;--ph2:#1e171b;--navbg:rgba(10,8,10,.88);--panel:rgba(10,10,14,.75);--veil0:rgba(8,8,11,.35);--veil1:rgba(8,8,11,.7);--photo:.75;--tsh:0 2px 14px rgba(0,0,0,.9);--h1sh:0 8px 40px rgba(0,0,0,.6);--glow:rgba(229,65,79,.22);--cond:"Barlow Condensed","Arial Narrow",sans-serif;--ser:Spectral,Georgia,serif;--wrap:1180px;--r:22px;--rb:12px}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--ser);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.cond{font-family:var(--cond);text-transform:uppercase}
b,strong{font-weight:700;color:var(--strong)}

/* ===== Navigation ===== */

/* ===== Titres et étiquettes ===== */
.kick{display:flex;align-items:center;gap:12px;color:var(--acc);font:500 clamp(12px,1.3vw,15px)/1 var(--cond);text-transform:uppercase;letter-spacing:.36em;margin:0 0 14px}
.kick i{flex:1;max-width:120px;height:1px;background:linear-gradient(90deg,var(--acc),transparent)}
.h1{font:500 clamp(48px,9vw,120px)/.86 var(--cond);text-transform:uppercase;font-style:italic;letter-spacing:-.01em;margin:0;color:var(--fg);text-shadow:var(--h1sh)}
.h1::first-letter{color:var(--acc)}
.h2{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid rgba(229,65,79,.35)}
.h2 h2{margin:0;font:500 clamp(30px,4vw,48px)/1 var(--cond);text-transform:uppercase;font-style:italic;letter-spacing:-.005em}
.h2 h2::first-letter{color:var(--acc)}
.h2 a{flex:none;font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.18em;color:var(--acc);text-decoration:none;white-space:nowrap}
.h2 a:hover{text-decoration:underline}
.tag{display:inline-block;font:500 12px/1 var(--cond);text-transform:uppercase;letter-spacing:.2em;color:var(--accfg);background:var(--acc);border-radius:8px;padding:6px 9px}
.date{font:500 13px/1 var(--cond);text-transform:uppercase;letter-spacing:.16em;color:var(--mut)}
.strip{height:12px;margin:clamp(26px,4vw,44px) 0;background:repeating-linear-gradient(90deg,var(--acc) 0 12px,transparent 12px 26px);opacity:.28;border-radius:2px}
section.blk{margin:clamp(44px,7vw,84px) 0}

/* ===== Boutons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--rb);background:var(--acc);color:var(--accfg);font:500 clamp(15px,1.5vw,18px)/1 var(--cond);text-transform:uppercase;letter-spacing:.16em;padding:16px 24px;text-decoration:none;cursor:pointer;transition:transform .18s,box-shadow .25s,filter .2s,background .25s,color .25s}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 8px 26px rgba(229,65,79,.35)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid rgba(229,65,79,.45)}
.btn.ghost:hover{background:var(--acc);color:var(--accfg);border-color:var(--acc);filter:none}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ===== Accueil : en-tête ===== */
.hero{position:relative;isolation:isolate;padding:clamp(70px,14vh,150px) 0 clamp(40px,7vh,80px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,var(--veil0),var(--veil1) 60%,var(--bg)),url(/martini-club/duels/m.jpg?v=2) 50% 22%/cover no-repeat;opacity:var(--photo)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 85% 10%,var(--glow),transparent 70%)}
.hero .logo{width:min(560px,82vw);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.hero p.lead{font-size:clamp(17px,2vw,23px);line-height:1.5;color:var(--fg2);max-width:640px;margin:26px 0 30px;text-shadow:var(--tsh)}

/* ===== Cartes d'articles ===== */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 14px 40px rgba(229,65,79,.16)}
.card .im{aspect-ratio:16/9;background:var(--ph) center/cover no-repeat;position:relative}
.card .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(8,8,11,.75))}
.card .im .tag{position:absolute;left:14px;bottom:14px;z-index:1}
.card .tx{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font:500 clamp(22px,2.2vw,27px)/1.08 var(--cond);text-transform:uppercase;letter-spacing:.005em;color:var(--fg)}
.card p{margin:0;font-size:15.5px;line-height:1.5;color:var(--fg2)}
.card p b{color:var(--acc)}
.card.big{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr}
.card.big .im{aspect-ratio:auto;min-height:340px}
.card.big .im::after{background:linear-gradient(90deg,transparent 60%,rgba(13,10,13,.9))}
.card.big .tx{padding:clamp(24px,3vw,40px);justify-content:center;gap:14px}
.card.big h3{font-size:clamp(30px,3.4vw,46px);line-height:1}
.card.big p{font-size:clamp(16px,1.5vw,19px)}
@media (max-width:760px){.card.big{grid-template-columns:1fr}.card.big .im{min-height:0;aspect-ratio:16/9}.card.big .im::after{background:linear-gradient(180deg,transparent 50%,rgba(8,8,11,.75))}}

/* ===== Vide ===== */
.empty{border:1px dashed rgba(229,65,79,.45);border-radius:var(--r);padding:clamp(28px,4vw,48px);text-align:center;color:var(--fg2)}
.empty h3{margin:0 0 8px;font:500 26px/1 var(--cond);text-transform:uppercase;color:var(--acc)}
.empty p{margin:0 auto;max-width:520px}

/* ===== Films ===== */
.era{margin:0 0 34px}
.era h3{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font:500 22px/1 var(--cond);text-transform:uppercase;letter-spacing:.1em;color:var(--fg)}
.era h3 small{font-size:14px;letter-spacing:.2em;color:var(--mut)}
.posters{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.poster{position:relative;display:block;text-decoration:none;color:inherit;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--ph);aspect-ratio:2/3;transition:transform .25s,border-color .25s,box-shadow .25s}
.poster img{width:100%;height:100%;object-fit:cover}
.poster .cap{position:absolute;inset:auto 0 0 0;padding:34px 12px 12px;background:linear-gradient(180deg,transparent,rgba(8,8,11,.94) 60%)}
.poster .cap b{display:block;font:500 17px/1.05 var(--cond);text-transform:uppercase;color:var(--fg)}
.poster .cap span{font:500 12px/1 var(--cond);letter-spacing:.18em;color:var(--acc)}
.poster .n{position:absolute;top:8px;left:10px;font:italic 500 34px/1 var(--cond);color:transparent;-webkit-text-stroke:1px rgba(239,231,214,.75);text-shadow:0 2px 10px rgba(0,0,0,.6)}
.poster:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 14px 34px rgba(229,65,79,.2)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,170px);gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--acc) transparent}
.rail .poster{scroll-snap-align:start}

/* ===== Fiche film ===== */
.fhero{position:relative;isolation:isolate;padding:clamp(60px,10vh,120px) 0 clamp(30px,5vh,60px)}
.fhero .bg{position:absolute;inset:0;z-index:-1;background:center 30%/cover no-repeat;opacity:.5}
.fhero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--veil0),var(--veil1) 55%,var(--bg))}
.fgrid{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(24px,4vw,56px);align-items:end}
.fgrid .pst{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.7);aspect-ratio:2/3;background:var(--ph)}
.fgrid .pst img{width:100%;height:100%;object-fit:cover}
.ftitle{font:500 clamp(44px,7vw,96px)/.9 var(--cond);text-transform:uppercase;font-style:italic;margin:0 0 10px}
.ftitle::first-letter{color:var(--acc)}
.fsub{font:500 clamp(14px,1.4vw,17px)/1.3 var(--cond);text-transform:uppercase;letter-spacing:.2em;color:var(--mut);margin:0 0 22px}
.fsub b{color:var(--acc);font-weight:500}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.fact{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:12px 16px}
.fact small{display:block;font:500 12px/1 var(--cond);text-transform:uppercase;letter-spacing:.2em;color:var(--acc);margin-bottom:6px}
.fact span{font-size:16px;line-height:1.35}
@media (max-width:700px){.fgrid{grid-template-columns:1fr}.fgrid .pst{max-width:220px}}
.fcols{display:grid;grid-template-columns:1fr 340px;gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.fcols{grid-template-columns:1fr}}
.prose{font-size:clamp(17px,1.6vw,19px);line-height:1.7;color:var(--fg2)}
.prose p{margin:0 0 1.1em}
.prose h2{font:500 clamp(26px,3vw,34px)/1.1 var(--cond);text-transform:uppercase;color:var(--fg);margin:1.6em 0 .6em}
.prose h2::first-letter{color:var(--acc)}
.prose ul{padding-left:1.2em;margin:0 0 1.2em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--acc)}
.prose blockquote{margin:1.4em 0;padding:16px 22px;border-left:3px solid var(--acc);background:rgba(229,65,79,.07);border-radius:0 16px 16px 0;color:var(--fg)}
.prose a{color:var(--acc)}
.prose b{color:var(--strong)}
.score{border:1px solid var(--acc);border-radius:var(--r);background:var(--card);padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.score .v{font:italic 500 72px/.9 var(--cond);color:var(--fg)}
.score .v small{font-size:28px;color:var(--mut)}
.score .ap{font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.2em;color:var(--acc)}
.score h4{margin:0;font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.24em;color:var(--mut)}
.score .btn{width:100%}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.gal button{padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--ph);aspect-ratio:16/9}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal button:hover img{transform:scale(1.05)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pn a{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:16px;padding:16px 18px;text-decoration:none;background:var(--card);transition:border-color .25s}
.pn a:hover{border-color:var(--acc)}
.pn a small{font:500 12px/1 var(--cond);text-transform:uppercase;letter-spacing:.2em;color:var(--acc)}
.pn a b{font:500 22px/1.05 var(--cond);text-transform:uppercase}
.pn a.r{text-align:right}

/* ===== Article ===== */
.art{max-width:780px;margin:0 auto}
.art .h1{font-size:clamp(38px,6vw,72px);line-height:.95;margin:14px 0 18px}
.art .chapo{font-size:clamp(19px,2vw,23px);line-height:1.5;color:var(--fg);margin:0 0 26px}
.art .chapo b{color:var(--acc)}
.art figure{margin:0 0 30px}
.art figure img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.art figcaption{font-size:14px;color:var(--mut);margin-top:8px;font-style:italic}
.srcs{margin-top:34px;border-top:1px solid rgba(229,65,79,.3);padding-top:18px}
.srcs h4{margin:0 0 10px;font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.24em;color:var(--acc)}
.srcs ul{margin:0;padding-left:1.1em;font-size:15px;color:var(--fg2)}
.srcs a{color:var(--fg2)}

/* ===== Vidéos ===== */
.vids{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.vid{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.vid .th{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--ph) center/cover no-repeat;transition:border-color .25s,transform .25s}
.vid .th::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(8,8,11,.15),rgba(8,8,11,.55))}
.vid .pl{position:absolute;left:50%;top:50%;z-index:1;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--acc);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .25s}
.vid .pl svg{width:26px;height:26px;margin-left:4px;fill:var(--accfg)}
.vid:hover .th{border-color:var(--acc);transform:translateY(-3px)}
.vid:hover .pl{transform:scale(1.1)}
.vid b{font:500 20px/1.15 var(--cond);text-transform:uppercase;color:var(--fg)}
.vid .date{font-size:12px}
.modal{position:fixed;inset:0;z-index:100;background:rgba(5,5,7,.92);display:grid;place-items:center;padding:clamp(12px,4vw,40px)}
.modal .box{width:min(1100px,100%);position:relative}
.modal iframe,.modal img{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r);background:#000}
.modal img{aspect-ratio:auto;max-height:86vh;object-fit:contain}
.modal .x{position:absolute;top:-50px;right:0;background:none;border:1px solid rgba(229,65,79,.5);color:var(--fg);border-radius:var(--rb);font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.16em;padding:10px 14px;cursor:pointer}
.modal .x:hover{background:var(--acc);color:var(--accfg)}

/* ===== Bandeau Duels ===== */
.duels{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--acc);border-radius:var(--r);padding:clamp(28px,4vw,56px);background:linear-gradient(120deg,rgba(13,10,13,.95) 30%,rgba(13,10,13,.55)),url(/uploads/films/goldfinger/goldfinger-scene-02.jpg) center/cover no-repeat}
.duels .h1{font-size:clamp(60px,10vw,130px)}
.duels p{max-width:560px;color:var(--fg2);font-size:clamp(16px,1.6vw,19px);margin:18px 0 26px}
.stamp{position:absolute;right:clamp(18px,4vw,50px);top:clamp(18px,4vw,44px);transform:rotate(-9deg);border:4px double #ff3d4d;color:#ff3d4d;background:rgba(10,10,13,.86);font:700 clamp(15px,2vw,24px)/1 var(--cond);text-transform:uppercase;letter-spacing:.2em;padding:10px 16px;border-radius:10px;text-shadow:0 0 14px rgba(255,61,77,.5);box-shadow:0 10px 28px rgba(0,0,0,.6)}
@media (max-width:620px){.stamp{position:static;display:inline-block;margin-bottom:18px}}

/* ===== Divers ===== */
.crumbs{font:500 13px/1 var(--cond);text-transform:uppercase;letter-spacing:.2em;color:var(--mut);margin:0 0 18px}
.crumbs a{color:var(--acc);text-decoration:none}
.page{padding-top:clamp(34px,6vh,70px)}
.intro{font-size:clamp(17px,1.8vw,21px);color:var(--fg2);max-width:700px;margin:18px 0 0}
.yt{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:18px 22px;margin-bottom:26px}
.yt img{width:64px;height:64px;border-radius:50%;border:1px solid var(--acc)}
.yt div{flex:1;min-width:200px}
.yt div>b{display:block;font:500 24px/1 var(--cond);text-transform:uppercase}
.yt span{font-size:15px;color:var(--fg2)}
.skel{background:linear-gradient(90deg,var(--ph) 25%,var(--ph2) 50%,var(--ph) 75%);background-size:200% 100%;animation:sk 1.4s infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.fade{animation:fd .6s both}
@keyframes fd{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ===== Îlots toujours sombres (photos, bandeau Duels, lecteur) ===== */
.poster .cap b{color:#efe7d6}
.duels,.modal{--fg:#efe7d6;--fg2:#cfc6b0;--strong:#f3ead7;--mut:#9d9482;--acc:#e5414f;--accfg:#17120a;color:var(--fg)}
.duels .btn{background:var(--acc);color:var(--accfg)}

/* ===== Logo : version claire / sombre ===== */

/* ===== Bouton de thème ===== */

/* ===== Thème clair : papier crème, encre, rouge dossier ===== */
:root[data-theme="light"]{color-scheme:light;--bg:#f5efe3;--bg2:#fbf7ef;--fg:#1c1517;--fg2:#4b4038;--mut:#7c7064;--strong:#120c0e;--acc:#c41d2c;--accfg:#fffaf3;--line:rgba(196,29,44,.26);--line2:rgba(196,29,44,.42);--card:linear-gradient(160deg,rgba(196,29,44,.06),#fffaf2 70%);--ph:#e8dfd0;--ph2:#f1e9dc;--navbg:rgba(248,243,234,.9);--panel:rgba(255,250,242,.82);--veil0:rgba(245,239,227,.45);--veil1:rgba(245,239,227,.86);--photo:.9;--tsh:none;--h1sh:none;--glow:rgba(196,29,44,.14)}
:root[data-theme="light"] .card{box-shadow:0 1px 0 rgba(28,21,23,.04),0 10px 30px rgba(60,40,30,.07)}
:root[data-theme="light"] .card:hover{box-shadow:0 16px 40px rgba(196,29,44,.16)}
:root[data-theme="light"] .card.big .im::after{background:linear-gradient(90deg,transparent 65%,rgba(255,250,242,.6))}
:root[data-theme="light"] .hero .logo{filter:none}
:root[data-theme="light"] .fgrid .pst{box-shadow:0 24px 60px rgba(60,40,30,.25)}
:root[data-theme="light"] .empty{border-color:rgba(196,29,44,.4)}
:root[data-theme="light"] .poster .n{-webkit-text-stroke:1px rgba(255,250,242,.9)}
/* Pied de page (fourni par Duels, couleurs codées en dur) */
:root[data-theme="light"] #d7foot{color:#6f6458}
:root[data-theme="light"] #d7foot::before{background:linear-gradient(90deg,transparent,#c41d2c 30%,#c41d2c 70%,transparent)}
:root[data-theme="light"] #d7foot .br,:root[data-theme="light"] #d7foot nav a,:root[data-theme="light"] #d7foot .bmc .tx b{color:#1c1517}
:root[data-theme="light"] #d7foot .br b,:root[data-theme="light"] #d7foot nav a:hover{color:#c41d2c}
:root[data-theme="light"] #d7foot p,:root[data-theme="light"] #d7foot .bmc .tx span{color:#6f6458}
:root[data-theme="light"] #d7foot p b{color:#1c1517}
:root[data-theme="light"] #d7foot .cp{color:#8a7e70}
:root[data-theme="light"] #d7foot .bmc{background:linear-gradient(160deg,rgba(196,29,44,.07),#fffaf2 70%)!important;border-color:rgba(196,29,44,.35);box-shadow:0 10px 30px rgba(60,40,30,.08)!important}
:root[data-theme="light"] #d7foot .bmc a{background:#c41d2c;color:#fffaf3}
:root[data-theme="light"] #d7foot .bmc .cup{color:#c41d2c}
html{transition:background-color .3s}

/* ===== Visionneuse de photos ===== */
.lb{position:fixed;inset:0;z-index:200;background:rgba(5,5,7,.95);display:flex;flex-direction:column;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) clamp(14px,3vw,30px) 12px}
.lb-n{font:500 15px/1 var(--cond);letter-spacing:.2em;color:#cfc6b0}
.lb-x{background:none;border:1px solid rgba(229,65,79,.55);color:#efe7d6;border-radius:12px;font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.16em;padding:11px 15px;cursor:pointer}
.lb-x:hover{background:#e5414f;color:#17120a;border-color:#e5414f}
.lb-st{flex:1;min-height:0;display:grid;place-items:center;padding:0 clamp(12px,6vw,88px) calc(14px + env(safe-area-inset-bottom,0px))}
.lb-st img{max-width:none;object-fit:contain;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-st img.in-r{animation:lbr .3s ease-out}.lb-st img.in-l{animation:lbl .3s ease-out}
@keyframes lbr{from{opacity:.2;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes lbl{from{opacity:.2;transform:translateX(-40px)}to{opacity:1;transform:none}}
.lb-a{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(229,65,79,.6);background:rgba(10,10,13,.75);color:#efe7d6;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.lb-a svg{width:24px;height:24px}
.lb-a:hover{background:#e5414f;color:#17120a;transform:translateY(-50%) scale(1.06)}
.lb-a.prev{left:clamp(8px,2vw,24px)}.lb-a.next{right:clamp(8px,2vw,24px)}
@media (max-width:700px){.lb-a{width:44px;height:44px;top:auto;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:none}.lb-a:hover{transform:none}.lb-a.prev{left:calc(50% - 56px)}.lb-a.next{right:calc(50% - 56px)}.lb-st{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* ===== Fond animé : ronds lumineux qui dérivent ===== */

/* ===== Compteur de vues (bas de page) ===== */
#tvst{margin:clamp(44px,7vw,80px) auto 0}
#tvst .in{max-width:560px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:22px 24px;text-align:center}
#tvst h3{margin:0 0 14px;font:500 13px/1 var(--cond);text-transform:uppercase;letter-spacing:.3em;color:var(--mut)}
#tvst ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#tvst li{display:flex;flex-direction:column;gap:4px}
#tvst b{font:italic 500 clamp(34px,5vw,46px)/1 var(--cond);font-variant-numeric:tabular-nums;color:var(--fg)}
#tvst small{font:500 12px/1 var(--cond);text-transform:uppercase;letter-spacing:.24em;color:var(--acc)}
#tvst p{margin:14px 0 0;font-size:13px;font-style:italic;color:var(--mut)}
#tvst button{margin-top:10px;background:none;border:0;padding:0;color:var(--mut);font:400 13px var(--ser);text-decoration:underline;cursor:pointer}
#tvst button:hover{color:var(--acc)}
/* Bandeau d'accord pour les statistiques */
#tvck{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:150;width:min(580px,calc(100vw - 32px));display:flex;gap:14px 18px;align-items:center;flex-wrap:wrap;padding:16px 18px;border:1px solid var(--line2);border-radius:var(--r);background:var(--navbg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.35);color:var(--fg);font:400 14.5px/1.5 var(--ser)}
#tvck p{margin:0;flex:1 1 260px;color:var(--fg2)}
#tvck b{display:block;font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.22em;color:var(--acc);margin-bottom:6px}
#tvck a{color:inherit}
#tvck .bt{display:flex;gap:8px}
#tvck button{font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.16em;padding:12px 16px;border-radius:var(--rb);border:1px solid var(--line2);background:transparent;color:var(--fg);cursor:pointer}
#tvck button[data-c=yes]{background:var(--acc);border-color:var(--acc);color:var(--accfg)}

/* ===== Bande-son des fiches (mini-lecteur) ===== */
#tvost{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 8px;border:1px solid var(--line2);border-radius:18px;background:var(--navbg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.35);max-width:calc(100vw - 32px)}
#tvost .v{width:120px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;flex:none}
#tvost iframe{width:100%;height:100%;border:0;display:block}
#tvost .t{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:170px}
#tvost small{font:500 11px/1 var(--cond);text-transform:uppercase;letter-spacing:.24em;color:var(--acc)}
#tvost b{font:500 17px/1.1 var(--cond);text-transform:uppercase;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tvost .tg{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--acc);color:var(--accfg);display:grid;place-items:center;cursor:pointer;transition:transform .2s}
#tvost .tg svg{width:18px;height:18px;fill:currentColor}
#tvost .tg:hover{transform:scale(1.08)}
#tvost.on .t small::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--acc);vertical-align:middle;animation:ostp 1.2s ease-in-out infinite}
@keyframes ostp{50%{opacity:.25}}
body:has(#tvck) #tvost{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 150px)}
@media (max-width:620px){#tvost .v{width:86px}#tvost .t{max-width:120px}#tvost b{font-size:15px}#tvost .tg{width:40px;height:40px}}
body:has(#tvost){padding-bottom:96px}

/* ===== Fondu doux entre les photos d'en-tête et le fond (les ronds lumineux passent dessous sans coupure) ===== */
.hero::before,.fhero .bg{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.55) 75%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.55) 75%,transparent 100%)}
.fhero .bg{inset:0 0 -120px 0;filter:blur(2px)}
.fhero .bg::after{background:linear-gradient(180deg,var(--veil0),var(--veil1) 70%,transparent)}
.hero::before{bottom:-80px}

/* ===== Barre de lecture et retour en haut ===== */

/* ===== Flèches fixes : film précédent / suivant ===== */
.fnav{position:fixed;top:50%;z-index:60;display:flex;align-items:center;gap:0;transform:translateY(-50%);text-decoration:none;color:var(--fg);padding:10px;border-radius:999px;border:1px solid var(--line2);background:var(--navbg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.3);transition:background .25s,color .25s,border-color .25s,padding .3s}
.fnav svg{width:22px;height:22px;flex:none}
.fnav span{display:flex;flex-direction:column;gap:3px;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s ease}
.fnav small{font:500 11px/1 var(--cond);text-transform:uppercase;letter-spacing:.2em;color:var(--acc)}
.fnav b{font:500 17px/1 var(--cond);text-transform:uppercase}
.fnav.prev{left:max(10px,env(safe-area-inset-left,0px))}
.fnav.next{right:max(10px,env(safe-area-inset-right,0px));flex-direction:row-reverse;text-align:right}
.fnav:hover,.fnav:focus-visible{border-color:var(--acc)}
.fnav:hover span,.fnav:focus-visible span{max-width:260px}
.fnav.prev:hover,.fnav.prev:focus-visible{padding-right:20px}.fnav.next:hover,.fnav.next:focus-visible{padding-left:20px}
@media (max-width:1300px){.fnav{padding:8px;opacity:.9}.fnav svg{width:18px;height:18px}.fnav:hover span,.fnav:focus-visible span{max-width:0}.fnav.prev:hover,.fnav.next:hover,.fnav.prev:focus-visible,.fnav.next:focus-visible{padding:8px}.fnav.prev{left:4px}.fnav.next{right:4px}}

/* ===== Cascades et décompte ===== */
.casc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.casc li{position:relative;padding:14px 18px 14px 48px;border:1px solid var(--line);border-radius:16px;background:var(--card);font-size:clamp(16px,1.5vw,18px);line-height:1.5;color:var(--fg2)}
.casc li::before{content:"";position:absolute;left:18px;top:19px;width:14px;height:14px;background:var(--acc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%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 24 24'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat}
.kills{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:22px;padding:18px 22px;border:1px solid var(--acc);border-radius:var(--r);background:var(--card)}
.kills .kn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:none}
.kills .kn b{font:italic 500 64px/.85 var(--cond);color:var(--acc)}
.kills .kn small{font:500 13px/1 var(--cond);text-transform:uppercase;letter-spacing:.2em;color:var(--fg)}
.kills p{flex:1 1 260px;margin:0;font-size:14.5px;line-height:1.5;color:var(--mut)}
.kills p a{color:var(--fg2)}

/* ===== Notes des membres (fiche) ===== */
.fcols aside{display:flex;flex-direction:column;gap:16px}
.mnote{border:1px solid var(--line2);border-radius:var(--r);background:var(--card);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.mnote h4{margin:0;font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.24em;color:var(--mut)}
.mnote p{margin:0;font-size:15px;line-height:1.5;color:var(--fg2)}
.mnote p b{color:var(--strong)}
.mnote a{color:var(--acc)}
.mnote .btns .btn{flex:1;padding:13px 16px;font-size:15px}
.mst{display:flex;gap:4px}
.mst .sx{position:relative;width:40px;height:40px;font-size:38px;line-height:40px;text-align:center}
.mst .bs{color:var(--line2)}
.mst .on{position:absolute;left:0;top:0;height:100%;overflow:hidden;color:#f5b301;pointer-events:none}
.mst button{position:absolute;top:0;width:50%;height:100%;padding:0;border:0;background:none;cursor:pointer}.mst .l{left:0}.mst .r{right:0}
.mst .sx:hover .bs{color:rgba(245,179,1,.45)}
.mnote .gen{margin-top:6px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.mnote .gv{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mnote .gv b{font:italic 500 56px/.9 var(--cond);color:var(--fg)}
.mnote .gv small{font:500 20px/1 var(--cond);color:var(--mut)}
.mnote .gv .st{color:#f5b301;font-size:22px;letter-spacing:2px}
.mnote .rk b{font:italic 500 22px/1 var(--cond);color:var(--acc)}
/* « Le classer dans Duels » ne déborde plus */
.score .btn{letter-spacing:.1em;white-space:normal;text-align:center;line-height:1.15}

/* ===== Compte dans la barre du haut ===== */
.mnote a.btn{color:var(--accfg)}.mnote a.btn.ghost{color:var(--fg)}.mnote a.btn.ghost:hover{color:var(--accfg)}
/* Flèches parfaitement centrées : l'espace du titre n'existe qu'à l'ouverture */
.fnav:hover,.fnav:focus-visible{gap:12px}
@media (max-width:1300px){.fnav:hover,.fnav:focus-visible{gap:0}}
.fnav svg,.lb-a svg{display:block}
.yt span b{display:inline;font:inherit;font-weight:700;text-transform:none;color:var(--strong)}

/* ---------- Personnages ---------- */
.pfilt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 34px}
.pfilt button{font:500 15px/1 var(--cond);text-transform:uppercase;letter-spacing:.14em;color:var(--fg2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:11px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pfilt button i{font-style:normal;color:var(--mut);margin-left:4px}
.pfilt button:hover{border-color:var(--acc)}
.pfilt button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.pfilt button.on i{color:rgba(255,255,255,.8)}
.pfilt input{flex:1 1 220px;min-width:0;font:400 16px/1.2 inherit;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:11px 18px;outline:none}
.pfilt input:focus{border-color:var(--acc)}
.pcat{margin:0 0 54px}
.pcat .cnt{font:500 15px/1 var(--cond);letter-spacing:.2em;color:var(--mut)}
.pgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);transition:transform .25s,border-color .25s,box-shadow .25s}
.pcard[hidden]{display:none}
.pcard:hover{transform:translateY(-3px);border-color:rgba(229,65,79,.6);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.pcard .ph{display:block;aspect-ratio:4/3;background:var(--ph);overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .5s}
.pcard.ap .ph img{object-position:center 18%}
.pcard:hover .ph img{transform:scale(1.05)}
.pcard .pc{display:flex;flex-direction:column;gap:5px;padding:13px 15px 15px}
.pcard small{font:500 12px/1 var(--cond);text-transform:uppercase;letter-spacing:.2em;color:var(--acc)}
.pcard b{font:500 23px/1.05 var(--cond);text-transform:uppercase;font-style:italic;color:var(--fg)}
.pcard .pc>span{font-size:14px;line-height:1.35;color:var(--mut)}
.pnone{color:var(--mut);font-size:18px}
.pgrid2{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.pport{padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--ph);cursor:zoom-in;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.pport img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.pport.ap{aspect-ratio:2/3}.pport.ap img{object-position:center top}
.pkick{margin:0 0 10px;font:500 14px/1 var(--cond);text-transform:uppercase;letter-spacing:.24em;color:var(--acc)}
.pq{margin:6px 0 22px;font-size:clamp(18px,1.9vw,22px);line-height:1.45;color:var(--fg2)}
.fact .fn{font:500 13px/1 var(--cond);letter-spacing:.12em;color:var(--mut)}
.fact a{color:inherit;text-decoration-color:rgba(229,65,79,.6)}
.fact a:hover{color:var(--acc)}
.pbody{display:grid;grid-template-columns:1fr minmax(260px,340px);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(30px,5vw,56px)}
.pfacts{border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:18px;background:var(--panel);padding:20px 22px}
.pfacts h4{margin:0 0 12px;font:500 15px/1 var(--cond);text-transform:uppercase;letter-spacing:.22em;color:var(--acc)}
.pfacts ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.pfacts li{font-size:16px;line-height:1.5;color:var(--fg2);padding-left:18px;position:relative}
.pfacts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
@media (max-width:820px){.pbody{grid-template-columns:1fr}}
@media (max-width:700px){.pgrid2{grid-template-columns:1fr}.pport{max-width:260px}.pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.pcard b{font-size:19px}.pcard .pc{padding:10px 12px 12px}}