*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
:root{--nav-h:62px;
  --red:#e50914;--glow-red:rgba(229,9,20,0.7);
  --gold:#f5c518;--purple:#9d4edd;--glow-purple:rgba(157,78,221,0.6);
  --cyan:#00f5ff;--glow-cyan:rgba(0,245,255,0.5);
  --bg:#000000;--card-bg:#111118;--glass:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);--text:#e8e8e8;--text-dim:#888;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:'Segoe UI',system-ui,sans-serif;color:var(--text)}
*{scrollbar-width:thin;scrollbar-color:rgba(229,9,20,.35) transparent}
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:10px;transition:background .25s}
*::-webkit-scrollbar-thumb:hover{background:rgba(229,9,20,.55)}
*::-webkit-scrollbar-corner{background:transparent}

.screen{position:fixed;inset:0;width:100%;height:100%;display:none;z-index:10}
.screen.active{display:flex}

/* ── INTRO ── */
#intro-screen{background:#000;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
#intro-canvas{position:absolute;inset:0;width:100%;height:100%}
.intro-logo{position:relative;z-index:2;text-align:center;animation:introFadeIn .6s ease-out .5s both}
.intro-logo .i4{font-size:clamp(3rem,10vw,7rem);font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 0 20px var(--glow-red),0 0 40px var(--glow-red),0 0 80px var(--glow-red);animation:logoPulse 2s ease-in-out 1.2s infinite}
.intro-logo .i4 span{color:var(--red)}
.intro-logo .sub{font-size:clamp(.7rem,2vw,1rem);font-weight:300;letter-spacing:.5em;color:rgba(255,255,255,.4);text-transform:uppercase;margin-top:.5rem}
.intro-bar{position:relative;z-index:2;width:180px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:3rem;overflow:hidden}
.intro-bar-fill{height:100%;background:linear-gradient(90deg,var(--red),#ff6b35);box-shadow:0 0 10px var(--glow-red);animation:barFill 3s ease-out .8s forwards;width:0%}
.intro-skip{position:absolute;bottom:2rem;right:2rem;z-index:3;color:rgba(255,255,255,.3);font-size:.8rem;cursor:pointer;padding:.4rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:4px;transition:all .2s;animation:introFadeIn 1s ease-out 2s both}
.intro-skip:hover{color:#fff;border-color:rgba(255,255,255,.3)}

@keyframes introFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes logoPulse{0%,100%{text-shadow:0 0 20px var(--glow-red),0 0 40px var(--glow-red),0 0 80px var(--glow-red)}50%{text-shadow:0 0 30px var(--glow-red),0 0 60px var(--glow-red),0 0 120px var(--glow-red),0 0 160px rgba(229,9,20,.2)}}
@keyframes barFill{to{width:100%}}

/* ── PROFILES ── */
#profile-screen{background:radial-gradient(130% 110% at 50% 0%,#150708,#060405 75%);align-items:center;justify-content:center;flex-direction:column;gap:3rem;overflow:hidden}
#profile-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.profile-title{position:relative;z-index:2;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:400;color:rgba(255,255,255,.85);letter-spacing:.02em}
.profiles-grid{position:relative;z-index:2;display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}
.profile-card{display:flex;flex-direction:column;align-items:center;gap:1rem;cursor:pointer;transform-style:preserve-3d;transition:transform .1s}
.profile-avatar{width:120px;height:120px;border-radius:12px;position:relative;transition:box-shadow .3s,transform .3s;transform-style:preserve-3d}
.profile-avatar::before{content:'';position:absolute;inset:-2px;border-radius:14px;background:linear-gradient(135deg,var(--purple),var(--cyan),var(--red));opacity:0;transition:opacity .3s;z-index:-1;filter:blur(8px)}
.profile-card:hover .profile-avatar{box-shadow:0 0 20px var(--glow-purple),0 0 40px var(--glow-purple),0 0 80px rgba(157,78,221,.3);transform:scale(1.05) translateZ(20px)}
.profile-card:hover .profile-avatar::before{opacity:1}
.profile-avatar-placeholder{width:100%;height:100%;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:3rem;color:rgba(255,255,255,.9)}
.profile-name{font-size:.9rem;font-weight:500;color:rgba(255,255,255,.6);transition:color .3s}
.profile-card:hover .profile-name{color:#fff}
.profile-add .profile-avatar-placeholder{background:rgba(255,255,255,.05);border:2px dashed rgba(255,255,255,.15);font-size:2.5rem}
.profile-add:hover .profile-avatar-placeholder{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.p1 .profile-avatar-placeholder{background:linear-gradient(135deg,#1a1a2e,#16213e);color:#4cc9f0}
.p2 .profile-avatar-placeholder{background:linear-gradient(135deg,#1e0a14,#3d0c1e);color:#f72585}
.p3 .profile-avatar-placeholder{background:linear-gradient(135deg,#0a1628,#0d2137);color:#4361ee}
.p4 .profile-avatar-placeholder{background:linear-gradient(135deg,#0d1a0d,#1a3a1a);color:#06d6a0}
/* profile edit mode */
.profile-edit-mode-btn{position:relative;z-index:3;background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.5);font-size:.75rem;padding:.35rem 1rem;border-radius:6px;cursor:pointer;transition:all .2s;letter-spacing:.06em;text-transform:uppercase}
.profile-edit-mode-btn:hover,.profile-edit-mode-btn.active{border-color:rgba(255,255,255,.6);color:#fff}
.profile-card-actions{position:absolute;top:-8px;right:-8px;display:none;gap:4px;z-index:50;pointer-events:all}
.profile-edit-mode .profile-card-actions{display:flex}
.profile-edit-mode .profile-card:hover .profile-avatar{transform:none;box-shadow:none}
.profile-edit-mode .profile-card:hover .profile-avatar::before{opacity:0}
.profile-edit-mode .profile-card{transform:none !important;cursor:default}
.profile-action-btn{width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;font-size:.65rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.profile-action-btn.edit-btn{background:#4cc9f0;color:#000}
.profile-action-btn.del-btn{background:#e50914;color:#fff}
.profile-action-btn:hover{transform:scale(1.2)}
.profile-card{position:relative}
.profile-avatar-img{width:100%;height:100%;border-radius:12px;object-fit:cover;display:block}
#profile-editor-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.9);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center}
#profile-editor-overlay.open{display:flex}
.profile-editor-box{background:#111118;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:2rem;width:min(540px,90vw);max-height:88vh;overflow-y:auto;display:flex;flex-direction:column;gap:1.4rem}
.profile-editor-title{font-size:1.2rem;font-weight:700;color:#fff}
.profile-editor-label{font-size:.75rem;color:rgba(255,255,255,.45);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.4rem}
.profile-editor-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:.65rem 1rem;color:#fff;font-size:.9rem;outline:none;transition:border-color .2s}
.profile-editor-input:focus{border-color:var(--red)}
.profile-pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:.5rem;max-height:260px;overflow-y:auto;padding:.25rem 0}
.profile-pp-item{width:68px;height:68px;border-radius:10px;object-fit:cover;cursor:pointer;border:2px solid transparent;transition:border-color .2s,transform .2s}
.profile-pp-item:hover{transform:scale(1.05)}
.profile-pp-item.selected{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
.profile-editor-actions{display:flex;gap:.75rem;justify-content:flex-end}
.profile-editor-btn{padding:.55rem 1.4rem;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;border:none;transition:opacity .2s}
.profile-editor-btn.cancel{background:rgba(255,255,255,.08);color:#fff}
.profile-editor-btn.save{background:var(--red);color:#fff}
.profile-editor-btn:hover{opacity:.8}

/* ── MAIN APP ── */
#main-app{flex-direction:column;overflow:hidden;background:var(--bg)}

/* NAVBAR */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;padding:0 3%;gap:2rem;background:#000;border-bottom:1px solid rgba(255,255,255,.07)}
.nav-logo{font-size:1.6rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--red);cursor:pointer;white-space:nowrap;flex-shrink:0;font-style:italic}
.nav-links{display:flex;gap:1.8rem;align-items:center}
.nav-link{font-size:.82rem;color:rgba(255,255,255,.6);cursor:pointer;padding:.25rem 0;transition:color .2s;white-space:nowrap;display:flex;align-items:center;gap:.4rem}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link.active{font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.nav-search-bar{display:flex;align-items:center;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;padding:.25rem .1rem;min-width:230px;transition:border-color .2s}
.nav-search-bar:focus-within{border-color:rgba(255,255,255,.6)}
.nav-search-bar span{display:none}
#search-q{background:none;border:none;outline:none;color:#fff;font-size:.83rem;width:100%;min-width:0;letter-spacing:.02em}
#search-q::placeholder{color:rgba(255,255,255,.25);font-weight:300}
.nav-btn-add{display:flex;align-items:center;gap:.35rem;padding:.4rem .9rem;border-radius:6px;background:var(--red);color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;border:none;transition:opacity .2s;white-space:nowrap}
.nav-btn-add:hover{opacity:.85}
.nav-profile-btn{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#9d4edd,#e50914);display:flex;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;flex-shrink:0}
.nav-btn-backup{width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.82rem;cursor:pointer;color:#fff;transition:all .2s;flex-shrink:0}
.nav-btn-backup:hover{background:rgba(255,255,255,.12)}
.nav-btn-search{display:none}

/* ── SEARCH PANEL ── */
#search-panel{position:fixed;top:var(--nav-h);left:0;right:0;z-index:90;background:rgba(7,7,8,.98);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07);padding:1rem 4%;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
#search-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.search-input-wrap{flex:1;min-width:200px;position:relative}




.search-select{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.6rem .9rem;color:#fff;font-size:.82rem;outline:none;cursor:pointer;transition:border-color .2s;min-width:130px}
.search-select:focus{border-color:var(--red)}
.search-select option{background:#111;color:#fff}
.search-clear{padding:.6rem 1.2rem;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.5);font-size:.82rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.search-clear:hover{border-color:#fff;color:#fff}

/* ── SEARCH RESULTS ── */
#search-results-section{display:none;padding:0 4% 3rem}
#search-results-section.visible{display:block}
.search-results-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem;padding-top:1rem}
.search-results-title{font-size:1.1rem;font-weight:700;color:#fff}
.search-results-count{font-size:.78rem;color:var(--text-dim);background:rgba(255,255,255,.05);padding:.15rem .5rem;border-radius:10px}
.search-results-close{margin-left:auto;padding:.4rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.6);font-size:.78rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.search-results-close:hover{border-color:#fff;color:#fff}
.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(120px,13vw,190px),1fr));gap:1rem}

/* CONTENT SCROLL */
.app-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:3rem;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.app-content::-webkit-scrollbar{width:4px}
.app-content::-webkit-scrollbar-track{background:transparent}
.app-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}

/* HERO */
/* Hero badges row */
.btn-hero{display:inline-flex;align-items:center;gap:.55rem;padding:.65rem 1.8rem;border-radius:6px;font-size:.88rem;font-weight:700;cursor:pointer;border:none;outline:none;transition:all .2s}
.btn-play{background:var(--red);color:#fff}
.btn-play:hover{opacity:.85;transform:translateY(-1px)}
.btn-info{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.btn-info:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}

/* ROWS */
.section{margin-top:1.2rem;padding:0 3%}
.section-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.section-title{font-size:clamp(1.25rem,1.1rem + .9vw,1.9rem);font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.02em;line-height:1;display:flex;align-items:center;gap:.7rem}
.section-title::before{content:'';display:inline-block;width:5px;height:1.05em;background:var(--red);border-radius:3px;box-shadow:0 0 14px rgba(229,9,20,.6)}
.section-count{font-size:.72rem;color:var(--text-dim);background:rgba(255,255,255,.05);padding:.12rem .45rem;border-radius:8px}
.section-see-all{font-size:.75rem;color:var(--red);cursor:pointer;margin-left:auto;opacity:0;transition:opacity .2s}
.section:hover .section-see-all{opacity:1}

/* PLATFORMS */
.platforms-section{padding:1.5rem 3% 0}
.platforms-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.platform-card{height:100px;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid rgba(255,255,255,.06);overflow:hidden;padding:.5rem;position:relative}
.platform-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.6)}
.platform-card svg{max-width:100%;height:auto}
.platform-card-hover-gif{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease;pointer-events:none}
.platform-card:hover .platform-card-hover-gif{opacity:1}
.platform-sub{font-size:.52rem;font-weight:700;letter-spacing:.1em;color:rgba(0,0,0,.3);text-transform:uppercase}
.row-wrapper{position:relative}
.pills-wrapper{position:relative}
.pills-wrapper .row-arrow{top:50%;transform:translateY(-50%);height:80px}
#cat-view .pills-wrapper .row-arrow{height:130px}
.pills-wrapper:hover .row-arrow{display:flex}
.cards-row{display:flex;gap:.8%;overflow-x:auto;overflow-y:visible;padding:2.2rem .6rem 1.8rem;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;will-change:scroll-position;scroll-padding:0 .6rem}
.cards-row::-webkit-scrollbar{display:none}
.row-arrow{position:absolute;top:50%;transform:translateY(-60%);z-index:25;width:38px;height:70px;border:none;cursor:pointer;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);transition:background .2s;display:none;border-radius:4px}
.row-arrow.left{left:3px;border-radius:0 4px 4px 0}
.row-arrow.right{right:3px;border-radius:4px 0 0 4px}
.row-wrapper:hover .row-arrow{display:flex}
.row-arrow:hover{background:rgba(229,9,20,.7)}
.row-arrow.hidden{display:none!important}

/* EMPTY STATE */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;padding:3rem 0;
  color:var(--text-dim);gap:.8rem;
}
.empty-state .es-icon{font-size:2.5rem;opacity:.4}
.empty-state .es-text{font-size:.85rem}
.empty-state .es-btn{
  margin-top:.5rem;padding:.45rem 1.2rem;border-radius:6px;
  background:rgba(229,9,20,.15);border:1px solid rgba(229,9,20,.3);
  color:var(--red);font-size:.8rem;cursor:pointer;transition:all .2s;
}
.empty-state .es-btn:hover{background:rgba(229,9,20,.25)}

/* CARDS */
.card{flex-shrink:0;width:clamp(130px,14vw,200px);position:relative;cursor:pointer;border-radius:8px;transform-style:preserve-3d;perspective:800px;transition:transform .4s cubic-bezier(.23,1,.32,1);z-index:1;backface-visibility:hidden;overflow:visible}
.card:hover{transform:scale(1.08) translateZ(0);z-index:20}
.card-del-x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:rgba(200,0,0,.85);color:#fff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:30;opacity:0;transition:opacity .2s,transform .15s;pointer-events:none;border:none;line-height:1}
.card:hover .card-del-x{opacity:1;pointer-events:auto}
.card-del-x:hover{transform:scale(1.2);background:#ff2222}
.card-inner{border-radius:8px;overflow:hidden;position:relative;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s cubic-bezier(.23,1,.32,1);box-shadow:0 4px 20px rgba(0,0,0,.6);backface-visibility:hidden}
.card:hover .card-inner{box-shadow:0 8px 40px rgba(0,0,0,.8),0 0 20px rgba(157,78,221,.3),0 0 40px rgba(157,78,221,.15)}

/* Card image */
.card-img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:var(--card-bg)}
.card-img.wide-ratio{aspect-ratio:16/9}

/* Card placeholder (no image) */
.card-placeholder{width:100%;aspect-ratio:2/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;font-size:2rem;position:relative;overflow:hidden}
.card-placeholder.wide-ratio{aspect-ratio:16/9}
.card[data-color="purple"] .card-placeholder{background:linear-gradient(135deg,#1a0a2e,#2d1248,#1a0a2e)}
.card[data-color="red"] .card-placeholder{background:linear-gradient(135deg,#1a0a0a,#3d1010,#1a0808)}
.card[data-color="blue"] .card-placeholder{background:linear-gradient(135deg,#0a0a2e,#0d1545,#0a0a28)}
.card[data-color="green"] .card-placeholder{background:linear-gradient(135deg,#0a1a0a,#0d3a12,#081208)}
.card[data-color="orange"] .card-placeholder{background:linear-gradient(135deg,#1a1000,#3d2800,#1a0f00)}
.card[data-color="teal"] .card-placeholder{background:linear-gradient(135deg,#001a1a,#003d3d,#001818)}
.card-placeholder::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");opacity:.6;pointer-events:none;mix-blend-mode:overlay}
.card-placeholder::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 50%,rgba(0,0,0,.3) 100%);pointer-events:none}
.card-ph-icon{font-size:2.5rem;filter:drop-shadow(0 0 10px currentColor);position:relative;z-index:1}
.card-ph-label{font-size:.65rem;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.5);text-transform:uppercase;padding:0 .5rem;text-align:center;position:relative;z-index:1}

.card-glow{position:absolute;inset:0;border-radius:8px;opacity:0;transition:opacity .4s;pointer-events:none;z-index:2}
.card:hover .card-glow{opacity:1}
.card[data-color="purple"] .card-glow{box-shadow:inset 0 0 30px rgba(157,78,221,.3),0 0 30px rgba(157,78,221,.4)}
.card[data-color="red"] .card-glow{box-shadow:inset 0 0 30px rgba(229,9,20,.3),0 0 30px rgba(229,9,20,.4)}
.card[data-color="blue"] .card-glow{box-shadow:inset 0 0 30px rgba(67,97,238,.3),0 0 30px rgba(67,97,238,.4)}
.card[data-color="green"] .card-glow{box-shadow:inset 0 0 30px rgba(6,214,160,.3),0 0 30px rgba(6,214,160,.4)}
.card[data-color="orange"] .card-glow{box-shadow:inset 0 0 30px rgba(255,149,0,.3),0 0 30px rgba(255,149,0,.4)}
.card[data-color="teal"] .card-glow{box-shadow:inset 0 0 30px rgba(0,245,255,.3),0 0 30px rgba(0,245,255,.4)}

.card-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,transparent 100%);padding:.8rem .6rem .6rem;transform:translateY(100%);transition:transform .35s cubic-bezier(.23,1,.32,1);z-index:3}
.card:hover .card-overlay{transform:translateY(0)}
.card-title{font-size:.72rem;font-weight:700;color:#fff;line-height:1.3;margin-bottom:.25rem}
.card-meta{font-size:.62rem;color:var(--text-dim);display:flex;gap:.4rem;align-items:center}
.card-score{color:var(--gold);font-weight:700}
.card-btns{display:flex;gap:.35rem;margin-top:.5rem}
.card-btn{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#fff;cursor:pointer;transition:all .2s}
.card-btn:first-child{background:var(--red);border-color:var(--red);width:30px;height:30px}
.card-btn:hover{transform:scale(1.15);border-color:#fff}
.card-btn.del{border-color:rgba(255,0,0,.4);font-size:.75rem}.card-btn.in-list{background:rgba(6,214,160,.25);border-color:rgba(6,214,160,.5);color:#06d6a0}
.card-btn.del:hover{background:rgba(255,0,0,.4);border-color:#ff4444}

.card-rank{position:absolute;bottom:-.1em;left:-.2em;font-size:clamp(5.5rem,10vw,9.5rem);font-weight:900;color:transparent;-webkit-text-stroke:4px rgba(229,9,20,.95);line-height:1;z-index:2;pointer-events:none;transition:opacity .3s;font-style:italic;letter-spacing:-.06em;paint-order:stroke fill;text-shadow:0 6px 24px rgba(0,0,0,1),0 2px 8px rgba(0,0,0,.9)}
.card:hover .card-rank{opacity:0}


/* ── GENRE PILLS / GENRE CARDS (image + titre) ── */
.genre-pills{
  display:flex;gap:.7rem;flex-wrap:nowrap;
  overflow-x:auto;padding:.2rem .1rem .9rem .1rem;
  -ms-overflow-style:none;scrollbar-width:none;
}
.genre-pills::-webkit-scrollbar{display:none}
#pills-cat.genre-pills{gap:1.1rem;padding:.3rem .1rem 1rem}
#pills-cat .genre-card{width:230px;height:130px;border-radius:12px}
#pills-cat .genre-card-title{font-size:1.05rem}
.genre-card{
  position:relative;flex-shrink:0;
  width:148px;height:80px;
  border-radius:10px;overflow:hidden;
  cursor:pointer;
  border:2px solid rgba(255,255,255,.1);
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.genre-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.55);
}
.genre-card.active{
  border-color:var(--red);
  box-shadow:0 0 0 2px var(--red),0 0 22px var(--glow-red);
}
.genre-card-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:none;
}
.genre-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.75) 100%);
  display:flex;align-items:flex-end;padding:.5rem .65rem;
}
.genre-card-title{
  color:#fff;font-size:.8rem;font-weight:700;
  text-shadow:0 2px 6px rgba(0,0,0,.85);
  letter-spacing:.02em;
}
.genre-card-edit{
  position:absolute;top:5px;right:5px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.68rem;cursor:pointer;
  opacity:0;transition:opacity .2s,background .2s,transform .2s;
  z-index:3;
}
.genre-card:hover .genre-card-edit{opacity:1}
.genre-card-edit:hover{background:var(--red);transform:scale(1.12)}

/* ── SAGAS / COLLECTIONS ── */
.sagas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.4rem}
.saga-card{position:relative;border-radius:14px;overflow:hidden;background:var(--card-bg);border:1px solid var(--border);cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s}
.saga-card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 24px rgba(229,9,20,.45)}
.saga-card-img-wrap{position:relative;width:100%;height:150px;overflow:hidden;background:linear-gradient(135deg,#1a1a2e,#16213e)}
.saga-card-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.saga-card-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.2rem;opacity:.35}
.saga-card-edit{position:absolute;top:.5rem;right:.5rem;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;opacity:0;transition:opacity .2s,background .2s;z-index:3}
.saga-card:hover .saga-card-edit{opacity:1}
.saga-card-edit:hover{background:var(--red)}
.saga-card-del{position:absolute;top:.5rem;left:.5rem;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;opacity:0;transition:opacity .2s,background .2s;z-index:3}
.saga-card:hover .saga-card-del{opacity:1}
.saga-card-del:hover{background:var(--red)}
.saga-card-body{padding:.9rem 1rem 1rem}
.saga-card-title{font-size:1rem;font-weight:800;color:#fff;margin-bottom:.3rem}
.saga-card-count{font-size:.72rem;color:var(--text-dim);display:flex;align-items:center;gap:.35rem;margin-bottom:.7rem}
.saga-thumbs{display:flex;gap:.4rem}
.saga-thumb{width:44px;height:64px;border-radius:5px;overflow:hidden;background:#1a1a2e;flex-shrink:0}
.saga-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.saga-thumb-more{width:44px;height:64px;border-radius:5px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--text-dim);flex-shrink:0}
.saga-card-empty{font-size:.72rem;color:rgba(255,255,255,.25);font-style:italic}
.saga-detail-header{display:flex;gap:1.5rem;align-items:flex-end;margin-bottom:2rem;position:relative;border-radius:16px;overflow:hidden;min-height:220px;padding:1.6rem}
.saga-detail-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;z-index:0;opacity:.55}
.saga-detail-noimg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a2e,#16213e);z-index:0}
.saga-detail-header::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,8,.2)0%,rgba(7,7,8,.95)100%);z-index:0}
.saga-detail-info{position:relative;z-index:1}
.saga-detail-title{font-size:1.8rem;font-weight:900;color:#fff;margin-bottom:.4rem}
.saga-detail-count{font-size:.8rem;color:var(--text-dim)}
.saga-detail-actions{position:relative;z-index:1;display:flex;gap:.6rem;margin-left:auto;flex-wrap:wrap}
.btn-saga-action{padding:.55rem 1.1rem;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.btn-saga-action:hover{background:rgba(255,255,255,.12);border-color:var(--red)}
.saga-picker-search{margin-bottom:.6rem}
.saga-picker-list{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--border);border-radius:8px;padding:.6rem}
.saga-picker-item{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem;border-radius:6px;cursor:pointer;font-size:.82rem}
.saga-picker-item:hover{background:rgba(255,255,255,.05)}
.saga-picker-item.checked{background:rgba(229,9,20,.12)}
.saga-picker-item img{width:28px;height:40px;object-fit:cover;border-radius:3px;background:#1a1a2e;flex-shrink:0}
.saga-picker-item .spi-noimg{width:28px;height:40px;border-radius:3px;background:#1a1a2e;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;opacity:.4}
.saga-picker-item .spi-title{flex:1;color:#eee}
.saga-picker-item .spi-type{font-size:.65rem;color:var(--text-dim)}
.saga-picker-count{font-size:.7rem;color:var(--text-dim);margin-top:.4rem}

/* ── MODAL DETAIL — v2 (glow / 3D / premium) ── */
@keyframes dmHeroZoom{0%{transform:scale(1)}100%{transform:scale(1.1)}}
@keyframes dmContentIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes dmBorderGlow{0%,100%{opacity:.5;filter:hue-rotate(0deg)}50%{opacity:1;filter:hue-rotate(25deg)}}
@keyframes dmBlobDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4%,-6%) scale(1.12)}66%{transform:translate(-5%,4%) scale(.95)}}
@keyframes dmRingSpin{to{transform:rotate(360deg)}}
@keyframes dmModalIn3D{
  0%{opacity:0;transform:translateY(24px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(3,3,5,.96);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:2rem}
.modal-overlay.open{display:flex}
.modal-overlay::before,.modal-overlay::after{display:none}
.modal-box{
  background:linear-gradient(165deg,#15151b,#08080b 70%);
  border:1px solid rgba(255,255,255,.09);border-radius:24px;
  max-width:760px;width:100%;position:relative;overflow:hidden;z-index:1;
  animation:dmModalIn3D .35s cubic-bezier(.16,1,.28,1) both;
  box-shadow:0 30px 70px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04) inset;
  max-height:90vh;overflow-y:auto;scrollbar-width:thin;
}
.modal-box::-webkit-scrollbar{width:5px}
.modal-box::-webkit-scrollbar-track{background:transparent}
.modal-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.modal-box::-webkit-scrollbar-thumb:hover{background:rgba(229,9,20,.55)}
.modal-box{scrollbar-color:rgba(255,255,255,.14) transparent}
.modal-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:6;
  background:rgba(255,255,255,.14);
}

.modal-split{display:flex;flex-direction:column}

.modal-hero{width:100%;aspect-ratio:3/4;background:linear-gradient(135deg,#1a0a2e,#2d1248);display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative;overflow:hidden;flex-shrink:0;perspective:1200px}
.dm-hero-visual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.modal-hero img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;animation:dmHeroZoom 16s ease-out forwards}
.modal-hero::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,transparent 34%,rgba(8,8,11,.85) 78%,#08080b 100%),linear-gradient(to right,rgba(8,8,11,.4),transparent 40%)}
.modal-hero::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);opacity:0;transition:opacity .4s}
.modal-hero:hover::before{opacity:1}

.modal-body{padding:1.9rem 2rem 2.1rem;margin-top:-2.6rem;position:relative;z-index:2}

@media (min-width:840px){
  .modal-box{max-width:1220px}
  .modal-split{flex-direction:row;align-items:stretch}
  .modal-hero{width:46%;flex-shrink:0;aspect-ratio:2/3;align-self:flex-start;max-height:88vh}
  .modal-hero::after{background:linear-gradient(to top,rgba(8,8,11,.5),transparent 32%),linear-gradient(100deg,rgba(8,8,11,.12) 0%,rgba(8,8,11,.55) 62%,#0a0a0e 100%)}
  .modal-body{flex:1;min-width:0;margin-top:0;padding:2.8rem 2.7rem 2.5rem 1.4rem;display:flex;flex-direction:column;justify-content:flex-start}
  .modal-body .modal-title{margin-bottom:1.3rem}
  .modal-body .modal-meta{margin-bottom:1.6rem}
  .modal-body .modal-desc{margin-bottom:auto;padding-bottom:1.6rem}
  .modal-body .dm-footer-row{margin-top:1.6rem}
}

.modal-close{position:absolute;top:1rem;right:1rem;z-index:10;width:40px;height:40px;border-radius:50%;background:rgba(10,10,13,.6);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:#fff;cursor:pointer;transition:background .25s,transform .25s,border-color .25s,box-shadow .25s;backdrop-filter:blur(10px)}
.modal-close:hover{background:rgba(229,9,20,.85);border-color:rgba(255,255,255,.35);transform:scale(1.12) rotate(90deg);box-shadow:0 0 22px var(--glow-red)}

.modal-title{font-size:2.05rem;font-weight:900;margin-bottom:.85rem;line-height:1.1;letter-spacing:-.015em;background:linear-gradient(120deg,#fff,#fff 60%,rgba(255,255,255,.75));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 4px 30px rgba(0,0,0,.7);animation:dmContentIn .55s ease-out .05s both}

.modal-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-bottom:1.25rem}
.modal-rating{display:none;align-items:center;gap:.5rem;padding:.45rem .95rem .45rem .7rem;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(245,197,24,.16),rgba(245,197,24,.04));
  border:1px solid rgba(245,197,24,.4);box-shadow:0 0 22px rgba(245,197,24,.22),inset 0 1px 0 rgba(255,255,255,.08);
  animation:dmContentIn .55s ease-out .1s both;
}
.modal-rating.show{display:inline-flex}
.modal-rating .star{font-size:1.05rem;color:#f5c518;filter:drop-shadow(0 0 6px rgba(245,197,24,.85))}
.modal-rating .val{font-size:1.1rem;font-weight:900;color:#f5c518;letter-spacing:-.02em}
.modal-rating .val small{font-size:.62rem;font-weight:700;color:rgba(245,197,24,.55);margin-left:1px}

.modal-tags{display:flex;gap:.5rem;flex-wrap:wrap;animation:dmContentIn .55s ease-out .14s both}
.modal-tag{position:relative;display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:600;padding:.34rem .8rem .34rem .7rem;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.78);backdrop-filter:blur(6px);transition:background .25s,border-color .25s,transform .2s,box-shadow .25s}
.modal-tag:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.modal-tag.new{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.modal-desc{color:rgba(255,255,255,.7);font-size:.94rem;line-height:1.8;margin-bottom:1.6rem;max-width:62ch;animation:dmContentIn .55s ease-out .2s both}
.modal-btns{display:flex;gap:.75rem;flex-wrap:wrap;animation:dmContentIn .55s ease-out .27s both}

.btn-hero{position:relative;display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.7rem;border-radius:12px;font-size:.87rem;font-weight:700;cursor:pointer;border:none;outline:none;overflow:hidden;transition:transform .28s cubic-bezier(.23,1,.32,1),box-shadow .3s,background .25s,opacity .2s}
.btn-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);transform:translateX(-120%);transition:transform .6s ease}
.btn-hero:hover::after{transform:translateX(120%)}
.btn-hero:active{transform:translateY(0) scale(.97) !important;transition-duration:.1s}
#detail-modal .btn-play{background:linear-gradient(135deg,#ff2b3a,var(--red));color:#fff;box-shadow:0 8px 26px rgba(229,9,20,.45)}
#detail-modal .btn-play:hover{transform:translateY(-4px) scale(1.035);box-shadow:0 18px 42px rgba(229,9,20,.65)}
#detail-modal .btn-info{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px)}
#detail-modal .btn-info:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);transform:translateY(-4px) scale(1.035);box-shadow:0 16px 34px rgba(0,0,0,.5)}

/* ── MODAL FOOTER ROW ── */
.dm-footer-row{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid rgba(255,255,255,.07);gap:1rem;flex-wrap:wrap;animation:dmContentIn .5s ease-out .32s both}
.btn-delete-modal{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem 1rem;border-radius:20px;border:1px solid rgba(229,9,20,.3);
  background:rgba(229,9,20,.08);color:rgba(229,9,20,.85);
  font-size:.78rem;font-weight:600;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s;
  flex-shrink:0;
}
.btn-delete-modal:hover{background:rgba(229,9,20,.22);border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.btn-edit-modal{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem 1rem;border-radius:20px;border:1px solid rgba(76,201,240,.3);
  background:rgba(76,201,240,.08);color:rgba(76,201,240,.9);
  font-size:.78rem;font-weight:600;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .25s;
  flex-shrink:0;
}
.btn-edit-modal:hover{background:rgba(76,201,240,.22);border-color:#4cc9f0;color:#4cc9f0;transform:translateY(-2px)}

/* ── CONFIRM OVERLAY inside modal ── */
.dm-confirm{
  display:none;position:absolute;inset:0;
  background:rgba(7,7,8,.92);backdrop-filter:blur(8px);
  flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;z-index:5;border-radius:16px;
  animation:modalIn .2s ease;
}
.dm-confirm.show{display:flex}
.dm-confirm-icon{font-size:2.5rem}
.dm-confirm-text{font-size:1.05rem;font-weight:700;color:#fff}
.dm-confirm-sub{font-size:.82rem;color:var(--text-dim);text-align:center;max-width:280px}
.dm-confirm-btns{display:flex;gap:.75rem;margin-top:.3rem}
.btn-confirm-yes{padding:.6rem 1.6rem;border-radius:6px;background:var(--red);border:none;color:#fff;font-size:.85rem;font-weight:700;cursor:pointer;box-shadow:0 0 14px var(--glow-red);transition:all .2s}
.btn-confirm-yes:hover{transform:translateY(-1px);box-shadow:0 0 22px var(--glow-red)}
.btn-confirm-no{padding:.6rem 1.4rem;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.85rem;cursor:pointer;transition:all .2s}
.btn-confirm-no:hover{background:rgba(255,255,255,.12)}

/* ── MODAL AJOUT ── */
#add-modal{z-index:300}
.add-box{
  background:linear-gradient(135deg,#111118,#0d0d16);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;
  max-width:560px;width:100%;position:relative;
  animation:modalIn .35s cubic-bezier(.23,1,.32,1);
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  max-height:90vh;overflow-y:auto;
}
.add-box::-webkit-scrollbar{width:4px}
.add-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.add-header{padding:1.5rem 1.5rem 0;display:flex;align-items:center;justify-content:space-between}
.add-header h2{font-size:1.2rem;font-weight:800}
.add-header h2 span{color:var(--red)}
.add-body{padding:1.2rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:1rem}

/* Image upload zone */
.img-upload-zone{
  border:2px dashed rgba(255,255,255,.12);border-radius:10px;
  padding:1.5rem;text-align:center;cursor:pointer;
  transition:all .3s;position:relative;overflow:hidden;
  background:rgba(255,255,255,.02);min-height:140px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
}
.img-upload-zone:hover{border-color:var(--red);background:rgba(229,9,20,.04)}
.img-upload-zone.has-img{padding:0;border-style:solid;border-color:var(--red)}
.img-upload-zone img{width:100%;max-height:200px;object-fit:cover;border-radius:8px;display:block}
.img-upload-zone .uz-icon{font-size:2rem;opacity:.5}
.img-upload-zone .uz-text{font-size:.8rem;color:var(--text-dim)}
.img-upload-zone .uz-hint{font-size:.7rem;color:rgba(255,255,255,.2)}
.img-clear{position:absolute;top:.5rem;right:.5rem;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;color:#fff;z-index:2;display:none}
.has-img .img-clear{display:flex}
#img-file-input{display:none}

/* Video upload zone */
.video-upload-zone{
  border:2px dashed rgba(255,255,255,.1);border-radius:10px;
  padding:1.2rem;text-align:center;cursor:pointer;
  transition:all .3s;position:relative;overflow:hidden;
  background:rgba(255,255,255,.02);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
}
.video-upload-zone:hover{border-color:rgba(157,78,221,.6);background:rgba(157,78,221,.04)}
.video-upload-zone.has-video{border-color:rgba(157,78,221,.7);background:rgba(157,78,221,.06)}
.vz-icon{font-size:1.8rem;opacity:.5}
.vz-text{font-size:.8rem;color:var(--text-dim)}
.vz-hint{font-size:.68rem;color:rgba(255,255,255,.18)}
.vz-file-info{
  display:none;flex-direction:column;align-items:center;gap:.25rem;
}
.has-video .vz-file-info{display:flex}
.has-video .vz-idle{display:none}
.vz-fname{font-size:.78rem;color:#fff;font-weight:600;word-break:break-all;max-width:100%;text-align:center}
.vz-fsize{font-size:.68rem;color:var(--text-dim)}
.vz-clear{position:absolute;top:.4rem;right:.4rem;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);display:none;align-items:center;justify-content:center;font-size:.65rem;cursor:pointer;color:#fff;z-index:2}
.has-video .vz-clear{display:flex}
#video-file-input{display:none}

/* Modal video player */
#dm-video{
  width:100%;height:100%;object-fit:contain;
  background:#000;display:none;
  border-radius:0;
}
.modal-hero.playing{background:#000;font-size:0}
.modal-hero.playing #dm-video{display:block}
.video-badge{
  position:absolute;top:.6rem;left:.6rem;z-index:6;
  background:rgba(157,78,221,.8);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;
  padding:.2rem .5rem;border-radius:4px;text-transform:uppercase;
  box-shadow:0 0 8px rgba(157,78,221,.5);
}

/* Form fields */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{font-size:.75rem;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em}
.form-input,.form-select,.form-textarea{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:.6rem .8rem;color:#fff;font-size:.85rem;font-family:inherit;
  transition:border-color .2s,box-shadow .2s;outline:none;width:100%;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--red);box-shadow:0 0 0 2px rgba(229,9,20,.15)}
.form-select option{background:#111118}
.form-textarea{resize:vertical;min-height:70px;line-height:1.5}
.toggle-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;user-select:none}
.toggle-track{width:44px;height:24px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);position:relative;transition:background .2s,border-color .2s;flex-shrink:0}
.toggle-track.on{background:rgba(229,9,20,.5);border-color:var(--red)}
.toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s,box-shadow .2s;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.toggle-track.on .toggle-thumb{transform:translateX(20px);box-shadow:0 0 6px var(--glow-red)}
.toggle-text{font-size:.85rem;color:rgba(255,255,255,.6);transition:color .2s}
.toggle-track.on + .toggle-text{color:#fff}

/* Color picker */
.color-picker{display:flex;gap:.5rem;flex-wrap:wrap}
.color-chip{
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:all .2s;
}
.color-chip:hover{transform:scale(1.15)}
.color-chip.selected{border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.5)}
.color-chip[data-c="purple"]{background:linear-gradient(135deg,#6a0dad,#9d4edd)}
.color-chip[data-c="red"]{background:linear-gradient(135deg,#8b0000,#e50914)}
.color-chip[data-c="blue"]{background:linear-gradient(135deg,#00008b,#4361ee)}
.color-chip[data-c="green"]{background:linear-gradient(135deg,#006400,#06d6a0)}
.color-chip[data-c="orange"]{background:linear-gradient(135deg,#8b4500,#ff9500)}
.color-chip[data-c="teal"]{background:linear-gradient(135deg,#008080,#00f5ff)}

/* ── SOURCE FIELDS in form ── */
.frembed-gen{display:flex;gap:.85rem;align-items:flex-start;background:rgba(229,9,20,.06);border:1px solid rgba(229,9,20,.2);border-radius:10px;padding:.75rem .9rem;margin-bottom:.7rem}
.frembed-gen-logo{width:30px;height:30px;border-radius:7px;background:rgba(229,9,20,.18);color:#e50914;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.15rem}
.frembed-gen-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem}
.frembed-gen-label{font-weight:700;font-size:.82rem;color:rgba(255,255,255,.9)}
.frembed-gen-hint{font-weight:400;color:rgba(255,255,255,.45);font-size:.78rem}
.frembed-gen-input{margin:0!important}
.frembed-gen-url{font-size:.72rem;color:rgba(229,9,20,.75);font-family:monospace;word-break:break-all;min-height:1em}
.sources-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}
.source-field{display:grid;grid-template-columns:1fr 2fr auto;gap:.4rem;align-items:center}
.source-field .form-input{margin:0}
.btn-add-source{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .9rem;border-radius:6px;border:1px dashed rgba(255,255,255,.15);
  background:transparent;color:rgba(255,255,255,.45);font-size:.78rem;cursor:pointer;transition:all .2s;
}
.btn-add-source:hover{border-color:var(--red);color:var(--red)}
.btn-autosearch{border-color:rgba(96,165,250,.35)!important;color:rgba(96,165,250,.8)!important}
.btn-autosearch:hover{border-color:#60a5fa!important;color:#60a5fa!important;background:rgba(96,165,250,.07)!important}

/* ── DB-Sources modal ── */
#db-sources-modal{z-index:400}
.dbs-box{width:min(760px,96vw);max-height:82vh;display:flex;flex-direction:column;gap:0}
.dbs-info-line{font-size:.82rem;color:rgba(255,255,255,.55);padding:.5rem 0 .8rem;flex-shrink:0}
.dbs-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem;padding-right:.2rem}
.dbs-body::-webkit-scrollbar{width:3px}
.dbs-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.dbs-footer{display:flex;justify-content:flex-end;gap:.7rem;padding-top:1rem;flex-shrink:0;border-top:1px solid rgba(255,255,255,.07);margin-top:.6rem}
.dbs-row{display:flex;align-items:flex-start;gap:.75rem;padding:.6rem .7rem;border-radius:8px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);cursor:pointer;transition:background .15s;user-select:none}
.dbs-row:hover{background:rgba(255,255,255,.06)}
.dbs-row input[type=checkbox]{margin-top:.15rem;accent-color:var(--red);flex-shrink:0;width:15px;height:15px;cursor:pointer}
.dbs-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.dbs-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.dbs-host{font-weight:700;font-size:.82rem;color:#fff}
.dbs-quality{font-size:.75rem;font-weight:700;background:rgba(229,9,20,.2);color:#ff8a8f;padding:.15rem .45rem;border-radius:4px}
.dbs-badge{font-size:.7rem;padding:.12rem .4rem;border-radius:4px;font-weight:600}
.dbs-lang{background:rgba(96,165,250,.15);color:#93c5fd}
.dbs-sub{background:rgba(167,139,250,.15);color:#c4b5fd}
.dbs-size{font-size:.72rem;color:rgba(255,255,255,.45);margin-left:auto}
.dbs-url{font-size:.68rem;color:rgba(255,255,255,.3);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-rm-source{
  width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,0,0,.2);
  background:rgba(255,0,0,.06);color:rgba(255,80,80,.7);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;cursor:pointer;transition:all .2s;flex-shrink:0;
}
.btn-rm-source:hover{background:rgba(255,0,0,.2);color:#ff6666}

/* ── SOURCE PICKER PANEL (drawer latéral) ── */
@keyframes spRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spPanelIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.sp-overlay{
  position:fixed;inset:0;z-index:600;
  background:rgba(3,3,5,.55);
  display:none;align-items:stretch;justify-content:flex-end;
}
.sp-overlay.open{display:flex}
.source-picker-box{
  background:linear-gradient(180deg,#141419,#0c0c11);
  border-left:1px solid rgba(255,255,255,.09);
  width:100%;max-width:420px;height:100%;position:relative;
  display:flex;flex-direction:column;
  animation:spPanelIn .3s cubic-bezier(.23,1,.32,1);
  box-shadow:-20px 0 60px rgba(0,0,0,.85),0 0 60px rgba(229,9,20,.06);
  overflow:hidden;
}
.sp-header{padding:1.5rem 1.6rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.07);position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-shrink:0}
.sp-close-btn{
  width:34px;height:34px;flex-shrink:0;border-radius:9px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:.9rem;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;
}
.sp-close-btn:hover{background:rgba(229,9,20,.25);border-color:var(--red)}
.sp-label{font-size:.68rem;font-weight:800;color:var(--red);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem}
.sp-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:promoBadgePulse 2s ease-in-out infinite}
.sp-film{font-size:1.15rem;font-weight:800;color:#fff}
.sp-desc{font-size:.78rem;color:var(--text-dim);margin-top:.25rem}
.sp-sources-list{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;flex:1;overflow-y:auto}
.sp-sources-list::-webkit-scrollbar{width:3px}
.sp-sources-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.sp-source-btn{
  display:flex;align-items:center;gap:1rem;
  padding:.9rem 1.05rem;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  cursor:pointer;transition:transform .25s cubic-bezier(.23,1,.32,1),background .25s,border-color .25s,box-shadow .25s;
  animation:spRowIn .35s cubic-bezier(.23,1,.32,1) both;
}
.sp-sources-list .sp-source-btn:nth-child(1){animation-delay:.03s}
.sp-sources-list .sp-source-btn:nth-child(2){animation-delay:.07s}
.sp-sources-list .sp-source-btn:nth-child(3){animation-delay:.11s}
.sp-sources-list .sp-source-btn:nth-child(4){animation-delay:.15s}
.sp-sources-list .sp-source-btn:nth-child(5){animation-delay:.19s}
.sp-sources-list .sp-source-btn:nth-child(n+6){animation-delay:.22s}
.sp-source-btn:hover{background:rgba(229,9,20,.1);border-color:rgba(229,9,20,.4);transform:translateX(6px) scale(1.015);box-shadow:0 10px 30px rgba(229,9,20,.15)}
.sp-source-icon{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  transition:transform .3s cubic-bezier(.23,1,.32,1);
}
.sp-source-btn:hover .sp-source-icon{transform:scale(1.1) rotate(-4deg)}
.sp-source-icon.local{background:rgba(157,78,221,.2);color:var(--purple);box-shadow:0 0 10px rgba(157,78,221,.3)}
.sp-source-icon.stream{background:rgba(229,9,20,.15);color:var(--red);box-shadow:0 0 10px rgba(229,9,20,.2)}
.sp-source-icon.direct{background:rgba(0,245,255,.1);color:var(--cyan);box-shadow:0 0 10px rgba(0,245,255,.2)}
.sp-source-info{flex:1;min-width:0}
.sp-source-name{font-size:.88rem;font-weight:700;color:#fff}
.sp-source-sub{font-size:.7rem;color:var(--text-dim);margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-source-arrow{color:rgba(255,255,255,.2);font-size:.9rem;transition:color .25s,transform .25s}
.sp-source-btn:hover .sp-source-arrow{color:var(--red);transform:translateX(3px)}
.sp-footer{padding:.9rem 1.2rem 1.3rem;text-align:center}
.sp-cancel{display:inline-block;font-size:.8rem;color:var(--text-dim);cursor:pointer;transition:color .2s,background .2s;padding:.5rem 1.3rem;border-radius:20px}
.sp-cancel:hover{color:#fff;background:rgba(255,255,255,.06)}

/* ── PLAYER OVERLAY ── */
#player-overlay{
  position:fixed;inset:0;z-index:500;
  background:#000;
  display:none;flex-direction:column;
}
#player-overlay.open{display:flex}
.player-topbar{
  height:52px;flex-shrink:0;
  display:flex;align-items:center;gap:1rem;padding:0 1.5rem;
  background:rgba(0,0,0,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:2;
}
.player-logo{font-size:.9rem;font-weight:900;color:var(--red);text-shadow:0 0 10px var(--glow-red);white-space:nowrap}
.player-divider{width:1px;height:20px;background:rgba(255,255,255,.1)}
.player-film-title{font-size:.9rem;font-weight:700;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-source-tag{font-size:.7rem;padding:.2rem .6rem;border-radius:20px;background:rgba(229,9,20,.2);border:1px solid rgba(229,9,20,.35);color:var(--red);white-space:nowrap}
.player-change-btn{font-size:.75rem;color:rgba(255,255,255,.4);cursor:pointer;white-space:nowrap;transition:color .2s;padding:.3rem .6rem;border-radius:4px;border:1px solid rgba(255,255,255,.08);background:transparent}
.player-change-btn:hover{color:#fff;border-color:rgba(255,255,255,.2)}
.player-close-btn{
  padding:.35rem .9rem;border-radius:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:.78rem;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.player-close-btn:hover{background:rgba(229,9,20,.3);border-color:var(--red)}
.player-body{flex:1;position:relative;background:#000}
#player-iframe{width:100%;height:100%;border:none;display:none}
#player-video-main{width:100%;height:100%;background:#000;display:none;object-fit:contain}

/* Submit */
.btn-submit{
  width:100%;padding:.85rem;border-radius:8px;border:none;
  background:var(--red);color:#fff;font-size:.95rem;font-weight:700;
  cursor:pointer;transition:all .25s;
  box-shadow:0 0 20px var(--glow-red);letter-spacing:.02em;
}
.btn-submit:hover{transform:translateY(-1px);box-shadow:0 0 30px var(--glow-red),0 4px 20px rgba(0,0,0,.5)}
.btn-submit:active{transform:translateY(0)}
.btn-primary{padding:.6rem 1.2rem;border-radius:8px;border:none;background:var(--red);color:#fff;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s}
.btn-primary:hover{background:#c00}
.btn-secondary{padding:.6rem 1.2rem;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}
.btn-secondary:hover{background:rgba(255,255,255,.1)}

/* ══════════════════════════════════════
   PAGE DE TÉLÉCHARGEMENT
══════════════════════════════════════ */
#dl-page{z-index:350;padding:0;align-items:flex-start;justify-content:flex-start;overflow-y:auto;background:rgba(0,0,0,.97)}
.dlp-inner{position:relative;display:flex;width:100%;max-width:1160px;margin:0 auto;padding:3rem 4% 4rem;min-height:100%}
.dlp-close{position:fixed;top:1.1rem;right:1.4rem;background:rgba(255,255,255,.08);border:none;color:#fff;font-size:1.1rem;width:36px;height:36px;border-radius:50%;cursor:pointer;z-index:10;transition:background .2s}
.dlp-close:hover{background:rgba(255,255,255,.18)}

/* Gauche */
.dlp-left{width:240px;flex-shrink:0;padding-top:.5rem;display:flex;flex-direction:column;gap:1.2rem;position:sticky;top:3rem;align-self:flex-start}
.dlp-poster{position:relative;width:100%;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#1a1a2e,#16213e);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.dlp-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.dlp-poster img.ok{opacity:1}
.dlp-poster-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.5rem;opacity:.3}
.dlp-info{display:flex;flex-direction:column;gap:.6rem}
.dlp-title{font-size:1.15rem;font-weight:900;line-height:1.2;margin:0}
.dlp-meta-line{font-size:.78rem;color:rgba(255,255,255,.5)}
.dlp-desc{font-size:.8rem;color:rgba(255,255,255,.6);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}

/* Droite */
.dlp-right{flex:1;padding-left:3rem;display:flex;flex-direction:column;gap:1rem}
.dlp-season-wrap{display:flex;flex-direction:column;gap:.4rem}
.dlp-sel-label{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em}
.dlp-sel{max-width:260px}
.dlp-fetch-btn{display:inline-flex;align-items:center;gap:.7rem;background:var(--red);color:#fff;border:none;border-radius:9px;padding:.85rem 1.4rem;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .2s;align-self:flex-start;box-shadow:0 0 20px var(--glow-red)}
.dlp-fetch-btn:hover{background:#c00}
.dlp-fetch-btn:disabled{opacity:.6;cursor:wait}
.dlp-notice{font-size:.8rem;color:rgba(255,255,255,.45);min-height:1.2em}
.dlp-links-title{font-size:1.2rem;font-weight:800;margin:.5rem 0 0}
.dlp-empty{color:rgba(255,255,255,.35);font-size:.85rem;text-align:center;padding:3rem 0}

/* Grille de cartes */
.dlp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.85rem}
.dlp-card{display:flex;flex-direction:column;gap:.35rem;background:#0e0e11;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:1rem 1.1rem;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,box-shadow .2s;cursor:pointer}
.dlp-card:hover{border-color:rgba(229,9,20,.5);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.5)}
.dlp-card-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem}
.dlp-host-ico{font-size:1.1rem;flex-shrink:0}
.dlp-host-name{font-weight:800;font-size:.92rem}
.dlp-quality{font-size:.7rem;font-weight:800;padding:.18rem .5rem;border-radius:5px;margin-left:auto;white-space:nowrap}
.dlp-q-4k{background:rgba(250,204,21,.2);color:#fde047}
.dlp-q-remux{background:rgba(192,132,252,.2);color:#d8b4fe}
.dlp-q-bd{background:rgba(139,92,246,.2);color:#c4b5fd}
.dlp-q-fhd{background:rgba(96,165,250,.2);color:#93c5fd}
.dlp-q-hd{background:rgba(52,211,153,.2);color:#6ee7b7}
.dlp-q-sd{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.dlp-badge{font-size:.68rem;font-weight:700;padding:.15rem .45rem;border-radius:4px}
.dlp-full{background:rgba(34,197,94,.2);color:#86efac}
.dlp-s{background:rgba(148,163,184,.15);color:#94a3b8}
.dlp-row{font-size:.78rem;color:rgba(255,255,255,.65);display:flex;gap:.35rem}
.dlp-label{color:rgba(255,255,255,.35);flex-shrink:0}

@media(max-width:760px){
  .dlp-inner{flex-direction:column;padding:1.5rem 4% 2rem}
  .dlp-left{width:100%;position:static;flex-direction:row;gap:1rem;align-items:flex-start}
  .dlp-poster{width:110px;flex-shrink:0}
  .dlp-right{padding-left:0}
  .dlp-grid{grid-template-columns:1fr}
}

/* PROMO BANNER (encart carré arrondi éditable) */
@keyframes promoKenBurns{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes promoBadgePulse{0%,100%{box-shadow:0 0 8px rgba(229,9,20,.45)}50%{box-shadow:0 0 20px rgba(229,9,20,.8),0 0 34px rgba(229,9,20,.3)}}
.promo-banner{position:relative;margin:0 4% 3rem;border-radius:22px;overflow:hidden;min-height:340px;border:1px solid rgba(255,255,255,.08);background:#0a0a0c;box-shadow:0 20px 60px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.23,1,.32,1),box-shadow .5s ease,border-color .5s ease}
.promo-banner:hover{transform:scale(1.012);box-shadow:0 28px 80px rgba(0,0,0,.65);border-color:rgba(255,255,255,.16)}
.promo-banner::after{content:'';position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:0;transition:opacity .5s ease;box-shadow:inset 0 0 50px rgba(229,9,20,.22),0 0 60px rgba(229,9,20,.22);z-index:1}
.promo-banner:hover::after{opacity:1}
.promo-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .4s ease;animation:promoKenBurns 22s ease-in-out infinite}
.promo-banner:hover .promo-bg{animation-play-state:paused;transform:scale(1.1);transition:transform 6s ease-out}
.promo-gradient{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.92) 0%,rgba(0,0,0,.65) 45%,rgba(0,0,0,.15) 75%,rgba(0,0,0,0) 100%),linear-gradient(to top,rgba(0,0,0,.55),transparent 40%)}
.promo-content{position:relative;z-index:2;padding:2.4rem 2.6rem;max-width:640px;min-height:340px;display:flex;flex-direction:column;justify-content:center;animation:introFadeIn .8s ease both}
.promo-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--red);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.05em;padding:.35rem .75rem;border-radius:5px;text-transform:uppercase;width:fit-content;margin-bottom:1.1rem;animation:promoBadgePulse 2.6s ease-in-out infinite}
.promo-title{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:900;margin-bottom:.9rem;line-height:1.12;transition:text-shadow .4s}
.promo-banner:hover .promo-title{text-shadow:0 0 24px rgba(255,255,255,.25)}
.promo-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.promo-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:.3rem .7rem;border-radius:20px;font-size:.74rem;font-weight:600;color:rgba(255,255,255,.85);transition:background .3s,border-color .3s,transform .3s}
.promo-chip.score{color:var(--gold)}
.promo-banner:hover .promo-chip{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.22)}
.promo-desc{color:rgba(255,255,255,.6);font-size:.87rem;line-height:1.65;margin-bottom:1.4rem;max-width:520px}
.promo-btn{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:#111;border:none;padding:.7rem 1.4rem;border-radius:30px;font-weight:700;font-size:.85rem;cursor:pointer;width:fit-content;transition:opacity .2s,transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s}
.promo-btn:hover{opacity:1;transform:translateY(-3px) scale(1.05);box-shadow:0 10px 28px rgba(255,255,255,.2)}
.promo-btn:active{transform:translateY(-1px) scale(1.01)}
.promo-edit-btn{position:absolute;top:1rem;right:1rem;z-index:3;width:34px;height:34px;border-radius:9px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .25s,transform .25s,border-color .25s}
.promo-edit-btn:hover{background:rgba(229,9,20,.85);border-color:rgba(255,255,255,.3);transform:scale(1.12) rotate(-6deg)}
#promo-img-file-input{display:none}

/* ── SAISONS & ÉPISODES (fiche) ── */
.dm-season-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.dm-season-tab{padding:.4rem 1rem;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-size:.78rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.dm-season-tab:hover{background:rgba(255,255,255,.12)}
.dm-season-tab.active{background:var(--red);border-color:var(--red);color:#fff}

/* Saisons — cartes affiches (façon "cadre film") */
.dm-season-cards{display:flex;gap:1rem;flex-wrap:nowrap;overflow-x:auto;padding:.3rem .1rem 1.1rem;margin-bottom:.2rem;scrollbar-width:thin}
.dm-season-cards::-webkit-scrollbar{height:6px}
.dm-season-cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
.dm-season-card{flex:0 0 clamp(120px,15vw,170px);cursor:pointer;border-radius:10px;overflow:hidden;position:relative;aspect-ratio:2/3;background:var(--card-bg);border:2px solid rgba(255,255,255,.1);transition:border-color .25s,transform .25s,box-shadow .25s}
.dm-season-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.3)}
.dm-season-card.active{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 6px 24px rgba(229,9,20,.35)}
.dm-season-card-img{width:100%;height:100%;object-fit:cover;display:block}
.dm-season-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.2rem;background:linear-gradient(135deg,#1a0a2e,#2d1248,#1a0a2e);color:rgba(255,255,255,.35)}
.dm-season-card-overlay{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .6rem .55rem;background:linear-gradient(to top,rgba(0,0,0,.92) 10%,rgba(0,0,0,.55) 55%,transparent 100%)}
.dm-season-card-title{font-size:.8rem;font-weight:800;color:#fff;line-height:1.15}
.dm-season-card-meta{display:flex;align-items:center;gap:.4rem;margin-top:.15rem;font-size:.62rem;color:rgba(255,255,255,.6)}
.dm-season-card-year{color:rgba(255,255,255,.6)}
.dm-season-card-eps{color:var(--gold);font-weight:700}
.dm-episodes-list{display:flex;flex-direction:column;gap:.6rem;max-height:420px;overflow-y:auto;padding-right:.3rem}
.dm-episode-row{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);transition:background .2s,border-color .2s}
.dm-episode-row:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.dm-ep-num{width:30px;height:30px;flex-shrink:0;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:rgba(255,255,255,.6)}
.dm-ep-title{flex:1;min-width:0;font-size:.95rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-ep-btns{display:flex;gap:.5rem;flex-shrink:0}
.dm-ep-btn{width:38px;height:38px;border-radius:10px;border:none;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:background .2s,transform .2s}
.dm-ep-btn:hover{transform:scale(1.08)}
.dm-ep-btn.play{background:var(--red)}
.dm-ep-btn.dl:hover{background:rgba(76,201,240,.35)}

/* ── ADD-MODAL: SAISONS & ÉPISODES ── */
#seasons-wrap{display:none}
.season-block{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem;margin-bottom:1rem;background:rgba(255,255,255,.02)}
.season-block-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.season-block-head input{width:80px}
.season-block-head .season-label{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em}
.season-block-head .btn-rm-source{margin-left:auto}
.episode-block{border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:.7rem .8rem;margin-bottom:.7rem;background:rgba(255,255,255,.015)}
.episode-block-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.episode-block-head input{flex:1}
.episode-block-head .ep-num-input{flex:0 0 55px}
.ep-src-label{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.05em;margin:.5rem 0 .35rem}
.ep-img-field{display:flex;align-items:center;gap:.7rem;margin-bottom:.3rem}
.ep-img-thumb{flex:0 0 60px;width:60px;height:60px;border-radius:9px;background:rgba(255,255,255,.05);border:1.5px dashed rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:rgba(255,255,255,.3);background-size:cover;background-position:center;overflow:hidden;cursor:pointer;transition:border-color .2s,background .2s;flex-shrink:0}
.ep-img-thumb:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.ep-img-thumb.has-img{border-style:solid;border-color:var(--red)}
.ep-img-actions{display:flex;flex-direction:column;gap:.35rem}
.ep-img-actions .ep-img-btn{padding:.4rem .8rem;border-radius:7px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);font-size:.72rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.ep-img-actions .ep-img-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.ep-img-actions .ep-img-btn.rm{color:var(--red);border-color:rgba(229,9,20,.3)}
.ep-img-actions .ep-img-btn.rm:hover{background:rgba(229,9,20,.12)}
.dm-ep-thumb{width:120px;height:72px;flex-shrink:0;border-radius:9px;background:rgba(255,255,255,.08);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:rgba(255,255,255,.3)}
.btn-add-ep,.btn-add-season{width:100%;padding:.55rem;border-radius:8px;border:1px dashed rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.6);font-size:.78rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.btn-add-ep:hover,.btn-add-season:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.35)}

/* TOAST */
.toast{position:fixed;bottom:2rem;right:2rem;z-index:400;background:rgba(20,20,30,.95);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--red);border-radius:8px;padding:.8rem 1.2rem;color:#fff;font-size:.85rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,visibility .3s,transform .3s;box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:280px;min-width:200px}
.toast.show{opacity:1;visibility:visible;transform:translateY(0)}
.footer{height:3rem}

/* ── DISCORD BANNER ── */
.discord-banner{margin:2.5rem 3% 0;border-radius:16px;background:linear-gradient(135deg,#5865F2 0%,#4752C4 60%,#3c45a5 100%);padding:2rem 3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;box-shadow:0 8px 40px rgba(88,101,242,.35);overflow:hidden;position:relative}
.discord-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(255,255,255,.08) 0%,transparent 60%);pointer-events:none}
.discord-banner-text{flex:1;min-width:0}
.discord-banner-title{font-size:1.4rem;font-weight:800;color:#fff;margin-bottom:.4rem}
.discord-banner-desc{font-size:.88rem;color:rgba(255,255,255,.8);margin-bottom:.25rem}
.discord-banner-cta{font-size:.88rem;font-weight:700;color:#FEE75C;margin-bottom:1.2rem}
.discord-banner-btn{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:#5865F2;font-size:.88rem;font-weight:800;padding:.6rem 1.4rem;border-radius:8px;border:none;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.discord-banner-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.discord-banner-btn svg{width:20px;height:20px;flex-shrink:0}
.discord-banner-logo{width:100px;height:100px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.discord-banner-logo img{width:70%;height:70%;object-fit:contain}
/* ══════════════════════════════════════
   EXTRAITS — flux vertical style TikTok
══════════════════════════════════════ */
#extraits-view{padding:calc(var(--nav-h) + 1.6rem) 3% 3rem;min-height:60vh}
.extraits-header{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.6rem}
.extraits-title{font-size:1.1rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:.6rem}
.extraits-title::before{content:'';display:inline-block;width:3px;height:1em;background:var(--red);border-radius:2px}
.extraits-count-badge{font-size:.72rem;font-weight:600;color:var(--text-dim);text-transform:none;letter-spacing:0;background:rgba(255,255,255,.06);padding:.15rem .55rem;border-radius:20px}
.extraits-toggle{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:30px;padding:.2rem;gap:.2rem}
.ex-toggle-btn{border:none;background:transparent;color:rgba(255,255,255,.55);font-size:.78rem;font-weight:600;padding:.45rem 1.1rem;border-radius:24px;cursor:pointer;transition:all .2s;white-space:nowrap}
.ex-toggle-btn.active{background:var(--red);color:#fff;box-shadow:0 0 14px var(--glow-red)}
.ex-toggle-btn:hover:not(.active){color:#fff}
.extraits-header .nav-btn-add{margin-left:auto}

.extraits-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:1.4rem;min-height:70vh}
.extraits-feed{width:100%;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.extraits-feed::-webkit-scrollbar{width:0;display:none}
.extrait-slide{position:relative;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.extrait-media{width:100%;height:100%;position:relative;background:#000}
.extrait-media video,.extrait-media iframe{width:100%;height:100%;border:none;object-fit:cover;background:#000}
.extrait-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 22%,transparent 55%,rgba(0,0,0,.85) 100%);pointer-events:none;z-index:2}
.extrait-badge-top{position:absolute;top:1rem;left:1rem;z-index:3;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(229,9,20,.85);padding:.25rem .6rem;border-radius:4px;box-shadow:0 0 10px var(--glow-red)}
.extrait-media-external{cursor:pointer}
.extrait-media[data-yt]{container-type:size;overflow:hidden}
.extrait-media iframe.extrait-yt{position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;--ytw:max(100cqw,calc(100cqh * 16 / 9));width:var(--ytw);height:calc(var(--ytw) * 9 / 16 + 160px);transform:translate(-50%,-50%)}
.extrait-media:has(iframe.extrait-yt) .extrait-play-overlay{display:none}
button.extrait-source-badge{border:0;cursor:pointer;font-family:inherit}
.extrait-thumb{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.extrait-thumb-fallback{display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(160deg,#1a1a22,#000)}
.extrait-play-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.8);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.4rem;z-index:2;padding-left:4px;
  transition:transform .2s,background .2s;
}
.extrait-media-external:hover .extrait-play-overlay{transform:translate(-50%,-50%) scale(1.08);background:rgba(229,9,20,.75)}
.extrait-source-badge{position:absolute;top:1rem;right:3.6rem;z-index:3;font-size:.68rem;font-weight:700;color:#fff;padding:.25rem .6rem;border-radius:20px;backdrop-filter:blur(6px)}
.extrait-source-badge.yt{background:rgba(255,0,0,.55)}
.extrait-source-badge.tt{background:rgba(255,255,255,.14)}
.extrait-owner-actions{position:absolute;top:.8rem;right:.8rem;z-index:4;display:flex;gap:.4rem}
.extrait-owner-btn{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:.68rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.extrait-owner-btn:hover{background:rgba(229,9,20,.7)}
.extrait-info{position:absolute;left:1rem;right:4.2rem;bottom:1.1rem;z-index:3;color:#fff}
.extrait-info-title{font-size:.98rem;font-weight:800;display:flex;align-items:center;gap:.4rem;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.extrait-info-meta{font-size:.74rem;color:rgba(255,255,255,.75);margin-top:.35rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.extrait-info-meta span{background:rgba(255,255,255,.12);padding:.12rem .5rem;border-radius:20px}
.extrait-empty-slide{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-dim);gap:.6rem;padding:2rem;text-align:center}

.extraits-side-actions{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.extraits-empty-state{text-align:center;padding:5rem 2rem;color:var(--text-dim)}
.extraits-empty-state .ees-icon{font-size:3rem;margin-bottom:1rem}
.extraits-empty-state .ees-title{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.5rem}

@media (max-width:720px){
  .extraits-stage{flex-direction:column;gap:1rem;min-height:auto}
  .extraits-side-actions{flex-direction:row}
}

/* ── MODAL AJOUT EXTRAIT ── */
.ex-source-tabs{display:flex;gap:.4rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:.3rem}
.ex-source-tab{flex:1;text-align:center;padding:.55rem .4rem;border-radius:8px;font-size:.76rem;font-weight:700;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.35rem}
.ex-source-tab.active{background:var(--red);color:#fff;box-shadow:0 0 12px var(--glow-red)}
.ex-source-pane{display:none}
.ex-source-pane.active{display:flex;flex-direction:column;gap:.5rem}

/* ══════════════════════════════════════════════════════════════
   CORRECTIFS & AJOUTS (version en ligne)
══════════════════════════════════════════════════════════════ */
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Les boutons héritent de la police du site et n'ont plus le style gris du navigateur */
button{font-family:inherit;color:inherit}
button:disabled{opacity:.55;cursor:not-allowed}
:focus{outline:none}
:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px}
input[type="search"]::-webkit-search-cancel-button{filter:invert(1);opacity:.5;cursor:pointer}
.screen{height:100dvh}

/* La barre de navigation occupe sa place : le contenu ne passe plus dessous */
.navbar{position:relative;flex-shrink:0;padding:0 3%;padding-top:env(safe-area-inset-top);height:calc(var(--nav-h) + env(safe-area-inset-top));gap:1.4rem}
#search-panel{top:calc(var(--nav-h) + env(safe-area-inset-top))}
#extraits-view{padding:1.6rem 3% 3rem}
a.nav-logo{text-decoration:none}
.nav-links{gap:1.2rem;min-width:0}
.nav-link{background:none;border:none;padding:.3rem 0;font-size:.82rem;font-family:inherit}
.nav-link svg{flex-shrink:0}
.nav-search-bar{gap:.45rem;min-width:190px}
.nav-search-icon{color:rgba(255,255,255,.45);flex-shrink:0}
.nav-right{gap:.7rem}

/* Menu burger (mobile) */
.nav-burger{display:none;width:38px;height:38px;border:none;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;padding:0}
.nav-burger span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .25s}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Avatar + menu du compte */
.nav-account{position:relative}
.nav-profile-btn{border:none;width:32px;height:32px;padding:0;overflow:hidden;font-size:.95rem}
.nav-profile-btn img{width:100%;height:100%;object-fit:cover;display:block}
.account-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:150;min-width:250px;background:#121218;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.4rem;box-shadow:0 18px 50px rgba(0,0,0,.7);display:none;flex-direction:column}
.account-menu.open{display:flex;animation:modalIn .18s ease}
.account-menu-head{padding:.6rem .75rem .7rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:.3rem}
.account-menu-profile{font-weight:700;color:#fff;font-size:.9rem}
.account-menu-email{font-size:.72rem;color:var(--text-dim);margin-top:.15rem;word-break:break-all}
.account-menu button,.account-menu-file{display:block;width:100%;text-align:left;background:none;border:none;color:rgba(255,255,255,.85);font-size:.83rem;padding:.6rem .75rem;border-radius:8px;cursor:pointer}
.account-menu button:hover,.account-menu-file:hover{background:rgba(255,255,255,.07);color:#fff}
.account-menu .danger{color:#ff5a64}
.account-menu-file input{display:none}

/* Indicateur de synchronisation */
.sync-indicator{width:9px;height:9px;border-radius:50%;background:#06d6a0;box-shadow:0 0 8px rgba(6,214,160,.6);flex-shrink:0;transition:background .3s}
.sync-indicator[data-state="saving"]{background:var(--gold);box-shadow:0 0 8px rgba(245,197,24,.6)}
.sync-indicator[data-state="error"]{background:var(--red);box-shadow:0 0 8px var(--glow-red)}

/* Écran de chargement */
#loading-screen{background:#000;align-items:center;justify-content:center;flex-direction:column;gap:1.2rem}
.loading-spinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--red);animation:spin .8s linear infinite}
.loading-text{color:var(--text-dim);font-size:.9rem}

/* Écran de connexion */
#auth-screen{background:radial-gradient(ellipse at top,#1a0a12 0%,#000 60%);align-items:flex-start;justify-content:flex-start;overflow-y:auto;padding:1.5rem 1rem}
.auth-box{width:min(420px,100%);background:rgba(17,17,24,.92);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:2.2rem 2rem 1.6rem;box-shadow:0 30px 80px rgba(0,0,0,.7);margin:auto;animation:modalIn .4s ease}
.auth-logo{font-size:1.9rem;font-weight:900;font-style:italic;text-transform:uppercase;color:#fff;text-align:center;letter-spacing:.04em;text-shadow:0 0 18px var(--glow-red)}
.auth-logo span{color:var(--red)}
.auth-title{font-size:1.25rem;font-weight:800;text-align:center;margin:1rem 0 1.4rem}
#auth-form{display:flex;flex-direction:column;gap:1rem}
.auth-password-wrap{position:relative}
.auth-password-wrap .form-input{padding-right:2.8rem}
.auth-eye{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:1rem;opacity:.6;padding:.3rem}
.auth-eye:hover{opacity:1}
.auth-hint{font-size:.72rem;color:var(--text-dim)}
.auth-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.78rem;color:rgba(255,255,255,.7);line-height:1.45;cursor:pointer}
.auth-consent input{margin-top:.15rem;accent-color:var(--red);width:16px;height:16px;flex-shrink:0}
.auth-consent a,.auth-footer a{color:#fff}
.auth-message{font-size:.82rem;min-height:1.1em;color:var(--text-dim);line-height:1.45}
.auth-message.error{color:#ff6b73}
.auth-message.success{color:#06d6a0}
.auth-links{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:1.2rem}
.auth-link{background:none;border:none;color:rgba(255,255,255,.65);font-size:.82rem;cursor:pointer;padding:.25rem}
.auth-link:hover{color:#fff}
.auth-link strong{color:#fff}
.auth-footer{text-align:center;font-size:.72rem;color:var(--text-dim);margin-top:1.4rem}

/* Écran des profils */
.profile-title{font-weight:400;margin:0}
.profile-screen-actions{position:relative;z-index:3;display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.profile-account-email{position:relative;z-index:3;font-size:.75rem;color:var(--text-dim)}
.profile-add .profile-avatar-placeholder{background:rgba(255,255,255,.05);border:2px dashed rgba(255,255,255,.15);font-size:2.5rem}
.profile-add .profile-name{color:rgba(255,255,255,.35)}
#profile-editor-overlay .profile-editor-box{position:relative}
#profile-editor-overlay .modal-close{top:1rem;right:1rem}
.profile-pp-item{padding:0;background:none;overflow:hidden}
.profile-pp-item img{width:100%;height:100%;object-fit:cover;display:block}

/* Boutons devenus de vrais <button> */
.card-btn,.card-del-x,.genre-card-edit,.saga-card-edit,.saga-card-del,.img-clear,.btn-rm-source,.es-btn,.hero-dot,.hero-pause-btn,.extrait-owner-btn,.sp-source-btn,.modal-close,.promo-edit-btn{font-family:inherit;padding:0}
.card-del-x.confirm{opacity:1;pointer-events:auto;background:#ff1f1f;transform:scale(1.15)}
.saga-card-del.confirm{opacity:1;background:var(--red)}
.sp-source-btn{width:100%;text-align:left;color:#fff;font-size:inherit}
.es-btn{padding:.45rem 1.2rem}
.card:focus-visible{outline:2px solid #fff;outline-offset:3px}
.card:focus-visible .card-overlay{transform:translateY(0)}
.card:focus-within .card-del-x{opacity:1;pointer-events:auto}

/* Champs invalides + notes */
.form-input.invalid{border-color:#ff4d57;box-shadow:0 0 0 2px rgba(255,77,87,.2)}
.field-note{font-size:.72rem;color:var(--text-dim)}
.field-note:empty{display:none}

/* Encart promo vide : invitation à le personnaliser */
.promo-banner.promo-empty{min-height:220px}
.promo-banner.promo-empty .promo-content{min-height:220px}
.promo-banner.promo-empty .promo-badge{background:rgba(255,255,255,.12);animation:none}
body:not(.admin) .promo-banner.promo-empty{display:none}

/* Téléphones communauté */
.phones-row{width:100%;display:flex;justify-content:center;align-items:flex-end;gap:1.2rem;flex-wrap:wrap;margin:3rem 0 3.5rem;perspective:1600px;perspective-origin:center}

/* Pages légales + pied de page */
.legal-box{max-width:640px}
.legal-body{gap:.4rem;color:rgba(255,255,255,.78);font-size:.86rem;line-height:1.65}
.legal-body h3{font-size:.95rem;color:#fff;margin:.8rem 0 .3rem}
.legal-body ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem}
.footer{height:auto;padding:2.5rem 3% 2rem;margin-top:2rem;border-top:1px solid rgba(255,255,255,.06);text-align:center}
.footer-links{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-bottom:.6rem}
.footer-links a{color:rgba(255,255,255,.6);font-size:.8rem;text-decoration:none}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-copy{font-size:.72rem;color:rgba(255,255,255,.35)}

/* Toast : jamais hors écran */
.toast{max-width:min(360px,calc(100vw - 2rem));right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom))}

/* Réduction des animations si demandé par le système */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ══ ÉCRANS MOYENS (≤ 1180px) : navigation compacte ══ */
@media (max-width:1480px){
  .nav-link{font-size:0;gap:0;padding:.4rem}
  .nav-link svg{width:18px;height:18px}
  .nav-links{gap:.6rem}
  .nav-search-bar{min-width:150px}
}

/* ══ TABLETTES / MOBILES (≤ 900px) ══ */
@media (max-width:900px){
  .nav-burger{display:flex}
  .navbar{gap:.6rem}
  .nav-logo{font-size:1.25rem}
  .nav-links{position:fixed;top:calc(var(--nav-h) + env(safe-area-inset-top));left:0;bottom:0;width:min(290px,82vw);flex-direction:column;align-items:stretch;gap:.2rem;padding:1rem .8rem;background:#0b0b10;border-right:1px solid rgba(255,255,255,.08);transform:translateX(-105%);transition:transform .28s cubic-bezier(.23,1,.32,1);z-index:120;overflow-y:auto;box-shadow:20px 0 50px rgba(0,0,0,.6)}
  body.menu-open .nav-links{transform:none}
  .nav-link{font-size:.95rem;gap:.8rem;padding:.8rem .9rem;border-radius:10px;width:100%;justify-content:flex-start}
  .nav-link svg{width:18px;height:18px}
  .nav-link.active{background:rgba(229,9,20,.15);color:#fff}
  .nav-search-bar{min-width:0;flex:1}
  .nav-right{flex:1;justify-content:flex-end;min-width:0}
  .platforms-grid{grid-template-columns:repeat(3,1fr)}
  .discord-banner{padding:1.6rem 1.4rem}
  .modal-overlay{padding:1rem}
}

/* ══ TÉLÉPHONES (≤ 600px) ══ */
@media (max-width:600px){
  .nav-btn-add{padding:.45rem .6rem}
  .nav-btn-add-label{display:none}
  .nav-search-bar{max-width:none}
  #search-q{font-size:16px} /* évite le zoom automatique sur iPhone */
  .platforms-section{padding:1rem 3% 0}
  .platforms-grid{gap:.5rem}
  .platform-card{height:64px;border-radius:8px}
  .section{padding:0 4%}
  .cards-row{gap:.7rem;padding:1.2rem .3rem 1.2rem}
  .card{width:clamp(110px,31vw,150px)}
  .card:hover{transform:none}
  .card-rank{font-size:4.2rem;-webkit-text-stroke-width:3px}
  .genre-card{width:118px;height:66px}
  #pills-cat .genre-card{width:160px;height:92px}
  .search-results-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:.7rem}
  .search-results-grid .card{width:100%}
  .row-arrow,.pills-wrapper:hover .row-arrow,.row-wrapper:hover .row-arrow{display:none!important}
  .phones-row{transform:scale(.82);margin:1rem 0;gap:.6rem}
  .phones-row > div{transform:none!important}
  .discord-banner{flex-direction:column;text-align:center;margin:2rem 4% 0}
  .discord-banner-logo{width:72px;height:72px;order:-1}
  .promo-banner{margin:0 4% 2rem;min-height:0;border-radius:16px}
  .promo-content{padding:1.6rem 1.3rem;min-height:300px}
  .promo-banner:hover{transform:none}
  .form-row{grid-template-columns:1fr}
  .source-field{grid-template-columns:1fr auto;}
  .source-field input:first-child{grid-column:1 / -1}
  .add-header{padding:1.1rem 1.1rem 0}
  .add-body{padding:1rem 1.1rem 1.3rem}
  .modal-overlay{padding:0;align-items:flex-end}
  .modal-box,.add-box{max-height:92dvh;border-radius:18px 18px 0 0}
  .modal-hero{aspect-ratio:16/10}
  .modal-body{padding:1.4rem 1.2rem 1.6rem}
  .modal-title{font-size:1.5rem}
  .modal-btns .btn-hero{flex:1 1 auto;justify-content:center}
  .dm-episode-row{padding:.6rem;gap:.6rem}
  .dm-ep-thumb{width:80px;height:48px}
  .player-topbar{padding:0 .7rem;gap:.5rem}
  .player-logo,.player-divider,.player-source-tag{display:none}
  .sagas-grid{grid-template-columns:1fr}
  .saga-detail-header{flex-direction:column;align-items:flex-start}
  .saga-detail-actions{margin-left:0}
  .saga-card-edit,.saga-card-del,.genre-card-edit{opacity:1}
  .profiles-grid{gap:1.2rem}
  .profile-avatar{width:92px;height:92px}
  #profile-screen{gap:2rem;padding:1rem}
  .auth-box{padding:1.8rem 1.2rem 1.3rem}
  .toast{left:1rem;right:1rem;max-width:none}
}

/* Écrans tactiles : pas d'actions cachées derrière le survol */
@media (hover:none){
  .card-del-x{display:none}
  .section-see-all{opacity:1}
  .genre-card-edit,.saga-card-edit,.saga-card-del,.promo-edit-btn{opacity:1}
}
.saga-thumb-noimg{display:flex;align-items:center;justify-content:center;font-size:1.1rem;opacity:.6}
@media (max-width:600px){
  #row-all{padding-left:1.3rem;gap:1.6rem}
  .platform-card img:not(.platform-card-hover-gif){max-height:36px!important;max-width:80%!important}
}

/* ── Remplissage automatique (TMDB) ── */
.title-row{display:flex;gap:.5rem}
.title-row .form-input{flex:1;min-width:0}
.tmdb-fill-btn{flex-shrink:0;border:1px solid rgba(245,197,24,.45);background:rgba(245,197,24,.12);color:var(--gold);font-weight:700;font-size:.78rem;padding:0 .9rem;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .2s}
.tmdb-fill-btn:hover{background:rgba(245,197,24,.22)}
.tmdb-results{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem;padding:.4rem;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(0,0,0,.35);max-height:360px;overflow-y:auto}
.tmdb-results[hidden]{display:none}
.tmdb-result{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:8px;padding:.35rem;cursor:pointer;color:#fff}
.tmdb-result:hover,.tmdb-result:focus-visible{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.tmdb-result img,.tmdb-noimg{width:40px;height:60px;object-fit:cover;border-radius:5px;flex-shrink:0;background:#1a1a2e;display:flex;align-items:center;justify-content:center}
.tmdb-result-info{min-width:0}
.tmdb-result-title{font-weight:700;font-size:.86rem}
.tmdb-result-meta{font-size:.72rem;color:var(--text-dim);margin-top:.15rem}
.tmdb-msg{font-size:.8rem;color:var(--text-dim);padding:.6rem}
.tmdb-close{background:none;border:none;color:var(--text-dim);font-size:.75rem;cursor:pointer;padding:.4rem}
.tmdb-close:hover{color:#fff}
.tmdb-credit{font-size:.68rem;color:rgba(255,255,255,.3);text-align:center}
.bulk-opts{display:flex;flex-direction:column;gap:.55rem;font-size:.85rem;color:rgba(255,255,255,.85)}
.bulk-opts label{display:flex;gap:.6rem;align-items:center;cursor:pointer}
.bulk-opts input{accent-color:var(--red);width:16px;height:16px}
.bulk-track{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:.4rem}
.bulk-bar{height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .3s}
.bulk-report{font-size:.83rem;color:rgba(255,255,255,.85);display:flex;flex-direction:column;gap:.5rem}
.bulk-report:empty{display:none}
.bulk-notfound{color:var(--text-dim);font-size:.78rem}
.bulk-notfound ul{padding-left:1.1rem;margin-top:.3rem;max-height:160px;overflow-y:auto}
@media (max-width:600px){
  .title-row{flex-direction:column}
  .tmdb-fill-btn{padding:.6rem}
}

/* ══════════════════════════════════════
   PAGE D'UN TITRE
══════════════════════════════════════ */
.title-page{position:fixed;left:0;right:0;bottom:0;top:calc(var(--nav-h) + env(safe-area-inset-top));z-index:95;background:#050507;overflow-y:auto;overflow-x:hidden;display:none;-webkit-overflow-scrolling:touch}
.title-page.open{display:block;animation:tpIn .3s ease}
@keyframes tpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tp-backdrop{position:absolute;top:0;left:0;right:0;height:min(100vh,900px);overflow:hidden;pointer-events:none}
.tp-backdrop img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;filter:saturate(1.1)}
.tp-backdrop img.loaded{opacity:.35}
.tp-backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(5,5,7,.96) 0%,rgba(5,5,7,.75) 45%,rgba(5,5,7,.45) 100%),linear-gradient(to bottom,transparent 55%,#050507 100%)}
.tp-wrap{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:1.6rem 3% 3rem}
.tp-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.6rem}
.tp-back{display:flex;align-items:center;gap:.45rem;height:2.6em;padding:0 1.1rem;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:#fff;font-size:.85rem;font-weight:600;letter-spacing:.02em;cursor:pointer;flex-shrink:0;transition:all .2s linear}
.tp-back svg{transition:transform .3s ease;flex-shrink:0}
.tp-back:hover svg{transform:translateX(-4px)}
.tp-back:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.4)}
.tp-title{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:900;letter-spacing:.01em;text-transform:uppercase;line-height:1.1;position:relative;padding-bottom:.45rem}
.tp-title::after{content:'';position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;background:var(--red)}
.tp-year{color:rgba(255,255,255,.75);font-weight:800}
.tp-badge{font-size:.72rem;font-weight:900;letter-spacing:.06em;padding:.3rem .6rem;border-radius:5px;background:#16a34a;color:#fff}
.tp-badge-new{background:var(--red)}
.tp-grid{display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:2.4rem;align-items:start}
.tp-side{display:flex;flex-direction:column;gap:1rem;position:sticky;top:1rem}
.tp-poster{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:2/3;background:#111;box-shadow:0 25px 60px rgba(0,0,0,.7);max-height:62vh}
.tp-poster img{width:100%;height:100%;object-fit:cover;display:block}
.tp-poster-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4rem}
.tp-main-btns{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.tp-big-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-height:92px;border:none;border-radius:10px;color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;transition:transform .2s,filter .2s;padding:.6rem}
.tp-big-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1)}
.tp-big-btn small{font-size:.72rem;font-weight:700;background:rgba(0,0,0,.3);padding:.15rem .5rem;border-radius:4px}
.tp-big-ico{font-size:1.4rem;line-height:1}
.tp-big-play{background:#dc2626}
.tp-big-dl{background:#16a34a}
.tp-big-btn.full{grid-column:1 / -1}
.tp-sub-btns{display:flex;flex-wrap:wrap;gap:.6rem}
.tp-chip-btn{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08);color:#fff;font-size:.85rem;font-weight:600;padding:.6rem 1rem;border-radius:8px;cursor:pointer;transition:background .2s}
.tp-chip-btn:hover{background:rgba(255,255,255,.16)}
.tp-chip-btn.on{background:rgba(6,214,160,.18);border-color:rgba(6,214,160,.5);color:#06d6a0}
.tp-trailer{background:#2563eb;border-color:#2563eb}
.tp-trailer:hover{background:#1d4ed8}
.tp-danger{color:#ff6b73}
.tp-main{display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.tp-h2{font-size:1.2rem;font-weight:800;margin-bottom:.7rem;color:#fff}
.tp-desc{color:rgba(255,255,255,.85);font-size:.98rem;line-height:1.75;max-width:80ch}
.tp-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.2rem 2rem}
.tp-fact-k{font-weight:800;font-size:1.02rem;margin-bottom:.35rem}
.tp-fact-v{color:rgba(255,255,255,.75);font-size:.92rem}
.tp-fact-v small{color:rgba(255,255,255,.5);font-size:.75rem}
.tp-score{color:#fff;font-weight:800;font-size:1.05rem}
.tp-score::first-letter{color:var(--gold)}
.tp-chips{display:flex;flex-wrap:wrap;gap:.55rem}
.tp-genre,.tp-cast{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:8px;background:rgba(30,41,59,.8);border:1px solid rgba(255,255,255,.08);font-size:.84rem;font-weight:600}
.tp-genre::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red)}
.tp-cast{background:rgba(255,255,255,.06);font-weight:500;color:rgba(255,255,255,.85)}
/* Saisons */
.tp-seasons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.tp-season{position:relative;border:2px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;background:#111;cursor:pointer;padding:0;text-align:left;color:#fff;aspect-ratio:2/3;transition:transform .2s,border-color .2s}
.tp-season:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.35)}
.tp-season.active{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 8px 26px rgba(229,9,20,.3)}
.tp-season-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:linear-gradient(135deg,#1a0a2e,#2d1248)}
.tp-season-img img{width:100%;height:100%;object-fit:cover}
.tp-season-current{position:absolute;top:.5rem;right:.5rem;background:var(--red);font-size:.66rem;font-weight:800;padding:.2rem .5rem;border-radius:12px}
.tp-season-info{position:absolute;left:0;right:0;bottom:0;padding:2rem .7rem .6rem;background:linear-gradient(to top,rgba(0,0,0,.95),transparent)}
.tp-season-name{font-weight:800;font-size:.92rem}
.tp-season-meta{display:flex;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.75);margin-top:.15rem}
/* Épisodes */
.tp-episodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.tp-ep{background:rgba(30,30,40,.75);border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.tp-ep:hover{border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.tp-ep.no-source{opacity:.7}
.tp-ep-img{position:relative;aspect-ratio:16/9;background:#1a1a24;display:flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;overflow:hidden}
.tp-ep.no-source .tp-ep-img{cursor:default}
.tp-ep-img img{width:100%;height:100%;object-fit:cover;display:block}
.tp-ep-badge{position:absolute;top:.5rem;left:.5rem;background:#16a34a;font-size:.66rem;font-weight:800;padding:.2rem .5rem;border-radius:5px}
.tp-ep-badge-cur{background:var(--gold);color:#111}
.tp-ep-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);font-size:2rem;opacity:0;transition:opacity .2s}
.tp-ep-img:hover .tp-ep-play-overlay{opacity:1}
.tp-ep-body{padding:.8rem .9rem .7rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.tp-ep-title{font-weight:800;font-size:.98rem}
.tp-ep-meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.75rem;color:rgba(255,255,255,.65)}
.tp-ep-nosrc{color:var(--gold)}
.tp-ep-desc{font-size:.8rem;color:rgba(255,255,255,.75);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-ep.expanded .tp-ep-desc{-webkit-line-clamp:unset;display:block}
.tp-ep-more{align-self:flex-start;background:none;border:none;color:var(--red);font-size:.75rem;cursor:pointer;padding:0}
.tp-ep-actions{display:flex;justify-content:flex-end;gap:.4rem;margin-top:auto;padding-top:.3rem}
.tp-ep-btn{width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);color:#fff;cursor:pointer;font-size:.9rem;transition:background .2s}
.tp-ep-btn:hover{background:rgba(255,255,255,.16)}
.tp-ep-btn.play{background:var(--red);border-color:var(--red)}
.tp-ep-btn.seen.on{background:rgba(6,214,160,.2);border-color:#06d6a0;color:#06d6a0}
.tp-empty{color:var(--text-dim);font-size:.85rem}
/* Lecteur */
.tp-player-section{margin-top:2.6rem;scroll-margin-top:1rem}
.tp-sources{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.tp-sources:empty{display:none}
.tp-source{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:.8rem;font-weight:600;padding:.45rem .9rem;border-radius:20px;cursor:pointer}
.tp-source.active{background:var(--red);border-color:var(--red)}
.tp-player{position:relative;width:100%;aspect-ratio:16/9;max-height:80vh;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 25px 60px rgba(0,0,0,.6)}
.tp-player-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;text-align:center;padding:1rem;background:#0b0b10}
.tp-player-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.tp-player-bg:not([src]){display:none}
.tp-player-idle > :not(.tp-player-bg){position:relative}
.tp-player-play{width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px);border-radius:50%;border:none;background:#dc2626;color:#fff;font-size:clamp(1.6rem,3vw,2.4rem);padding-left:.3rem;cursor:pointer;box-shadow:0 10px 40px rgba(220,38,38,.5);transition:transform .2s}
.tp-player-play:hover:not(:disabled){transform:scale(1.08)}
.tp-player-label{font-size:clamp(1rem,2vw,1.5rem);font-weight:800}
.tp-player-hint{color:rgba(255,255,255,.8);font-size:.92rem;line-height:1.5}
.tp-iframe,.tp-video{position:absolute;inset:0;width:100%;height:calc(100% - 38px);border:none;background:#000}
.tp-player-bar{position:absolute;left:0;right:0;bottom:0;height:38px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 .9rem;background:#0b0b10;font-size:.8rem;color:rgba(255,255,255,.75)}
.tp-player-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-fs-btn{background:none;border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:6px;padding:.25rem .6rem;font-size:.75rem;cursor:pointer;flex-shrink:0}
.tp-similar{margin-top:2.6rem}
.tp-similar .cards-row{padding-top:1rem}

@media (max-width:1000px){
  .tp-grid{grid-template-columns:1fr;gap:1.6rem}
  .tp-side{position:static;max-width:520px;width:100%;margin:0 auto}
  .tp-poster{max-width:300px;width:62%;margin:0 auto}
}
@media (max-width:600px){
  .tp-wrap{padding:1rem 4% 2rem}
  .tp-head{gap:.6rem;margin-bottom:1rem}
  .tp-big-btn{min-height:74px}
  .tp-chip-btn{font-size:.8rem;padding:.55rem .8rem}
  .tp-seasons{display:flex;overflow-x:auto;gap:.7rem;padding-bottom:.4rem}
  .tp-season{flex:0 0 118px}
  .tp-episodes{grid-template-columns:1fr}
  .tp-player{border-radius:8px;aspect-ratio:16/10}
  .tp-facts{grid-template-columns:1fr 1fr;gap:1rem}
}
/* Bandes-annonces : image en pleine luminosité, sans voile ni ombre noire */
.tp-player{box-shadow:none;background:transparent}
.tp-player-idle{background:transparent}
.tp-player-bg{opacity:1}
.tp-player-label,.tp-player-hint{text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.8)}
/* Encart promo ajusté à son image : cadre aux proportions de l'image, image entière, pas de zoom qui rogne */
.promo-banner.promo-fit{min-height:0}
.promo-banner.promo-fit .promo-content{min-height:0;height:100%}
.promo-banner.promo-fit .promo-bg{background-size:cover;background-position:center;animation:none}
.promo-banner.promo-fit:hover .promo-bg{transform:none}
.promo-banner.promo-fit:hover{transform:none}
@media (max-width:600px){
  /* Sur téléphone, le texte a besoin de place : l'image passe au-dessus du texte */
  .promo-banner.promo-fit{aspect-ratio:auto!important;display:flex;flex-direction:column}
  .promo-banner.promo-fit .promo-bg{position:relative;inset:auto;aspect-ratio:var(--promo-ratio,16/9);width:100%}
  .promo-banner.promo-fit .promo-gradient{display:none}
  .promo-banner.promo-fit .promo-content{padding-top:1rem}
}


/* Logo en particules (js : initLogoForge) — le texte reste présent si le canvas n'est pas disponible */
.nav-logo{position:relative;display:inline-block;width:172px;height:40px;line-height:40px}
.nav-logo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nav-logo.forged .nav-logo-text{visibility:hidden}
@media (max-width:900px){.nav-logo{width:140px;height:34px;line-height:34px}}

/* Fond « gros pixels » (js/pixelbg.js) : derrière tout le contenu du site */
#pixel-bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
#main-app > .navbar{z-index:100}
#main-app > .app-content{position:relative;z-index:1;background:transparent}

/* ══════════════════════════════════════
   BANNIÈRE D'ACCUEIL (js/hero.js)
══════════════════════════════════════ */
.hb{position:relative;margin:1.4rem 3% 0;height:clamp(400px,58vh,600px);border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:#0b0b10;box-shadow:0 30px 80px rgba(0,0,0,.55);isolation:isolate}
.hb-layer{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;z-index:0}
.hb-layer.on{opacity:1}
.hb-layer-fill{position:absolute;inset:-40px;background-size:cover;background-position:center;opacity:0;filter:blur(40px) brightness(.45) saturate(1.2)}
.hb-layer-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.hb-layer-img:not([src]){display:none}
.hb-layer.on .hb-layer-img{animation:hbZoom 12s ease-out both}
@keyframes hbZoom{from{transform:scale(1.05)}to{transform:scale(1)}}
/* affiche verticale : entière à droite, sur fond flou */
.hb-layer.portrait .hb-layer-fill{opacity:1}
.hb-layer.portrait .hb-layer-img{left:auto;right:5%;width:auto;max-width:45%;object-fit:contain;animation:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 18%,#000 85%,transparent);mask-image:linear-gradient(to right,transparent,#000 18%,#000 85%,transparent)}
/* dégradés : côté texte sombre, bas fondu, bords doux */
.hb-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(9,9,13,.97) 0%,rgba(9,9,13,.86) 24%,rgba(9,9,13,.5) 46%,rgba(9,9,13,.1) 68%,rgba(9,9,13,0) 82%),
  linear-gradient(0deg,rgba(9,9,13,.9) 0%,rgba(9,9,13,0) 38%),
  radial-gradient(120% 90% at 100% 0%,rgba(9,9,13,0) 60%,rgba(9,9,13,.35) 100%)}
.hb-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:1.1rem;padding:2.5rem 4% 4.5rem 5%;max-width:640px}
.hb-content.hb-in > *{animation:hbIn .6s cubic-bezier(.23,1,.32,1) both}
.hb-content.hb-in > *:nth-child(2),.hb-content.hb-in > *:nth-child(3){animation-delay:.06s}
.hb-content.hb-in > *:nth-child(4){animation-delay:.12s}
.hb-content.hb-in > *:nth-child(5){animation-delay:.18s}
@keyframes hbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hb-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.hb-chips:empty{display:none}
.hb-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .75rem;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:.75rem;font-weight:700;color:#fff;backdrop-filter:blur(6px)}
.hb-chip-score{background:rgba(245,197,24,.12);border-color:rgba(245,197,24,.45);color:var(--gold)}
.hb-logo{display:block;max-width:min(440px,100%);max-height:150px;width:auto;height:auto;object-fit:contain;object-position:left center;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
.hb-logo[hidden],.hb-title[hidden]{display:none}
.hb-title{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:900;line-height:1.02;letter-spacing:-.01em;text-shadow:0 4px 30px rgba(0,0,0,.6);margin:0}
.hb-desc{color:rgba(255,255,255,.85);font-size:clamp(.88rem,1.2vw,1rem);line-height:1.6;max-width:520px;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hb-desc:empty{display:none}
.hb-btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.3rem}
.hb-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.7rem;border-radius:12px;font-size:.95rem;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;border:1px solid transparent}
.hb-btn[hidden]{display:none}
.hb-ico{font-size:1rem;line-height:1}
.hb-btn-play{background:#dc2626;color:#fff}
.hb-btn-play:hover{transform:translateY(-2px)}
.hb-btn-info{background:rgba(20,20,26,.65);border-color:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(8px)}
.hb-btn-info:hover{background:rgba(40,40,50,.8);transform:translateY(-2px)}
/* flèches + gérer */
.hb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.45);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .25s,background .2s;backdrop-filter:blur(6px)}
.hb-prev{left:1rem}
.hb-next{right:1rem}
.hb:hover .hb-arrow{opacity:1}
.hb-arrow:hover{background:var(--red)}
.hb--welcome .hb-arrow{display:none}
.hb-edit{position:absolute;top:1rem;right:1rem;z-index:3;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.5);color:#fff;font-size:.78rem;font-weight:700;padding:.5rem .9rem;border-radius:10px;cursor:pointer;opacity:0;transition:opacity .25s,background .2s;backdrop-filter:blur(6px)}
.hb:hover .hb-edit,.hb-edit:focus-visible{opacity:1}
.hb-edit:hover{background:var(--red)}
/* points + progression + pause */
.hb-controls{position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;border-radius:30px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
.hb-controls:empty{display:none}
.hb-dots{display:flex;align-items:center;gap:.4rem}
.hb-dot{width:7px;height:7px;border-radius:4px;border:none;padding:0;background:rgba(255,255,255,.4);cursor:pointer;transition:width .35s cubic-bezier(.23,1,.32,1),background .3s}
.hb-dot.active{width:30px;background:#fff}
.hb-sep{width:1px;height:14px;background:rgba(255,255,255,.2)}
.hb-progress{width:80px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.hb-progress-fill{height:100%;width:0;background:var(--red);transition:width .1s linear}
.hb-pause{background:none;border:none;color:#fff;font-size:.7rem;letter-spacing:-.1em;cursor:pointer;padding:0 .1rem;min-width:14px}
/* bienvenue (bibliothèque vide) */
.hb--welcome{background:radial-gradient(90% 120% at 85% 10%,rgba(229,9,20,.28),transparent 60%),#0b0b10}
.hb--welcome .hb-edit{display:none}
/* Gestion de la bannière */
.he-box{max-width:620px}
.he-modes{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.he-mode{display:flex;flex-direction:column;gap:.3rem;text-align:left;padding:.9rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.he-mode span{font-size:.75rem;color:var(--text-dim);line-height:1.4}
.he-mode.active{border-color:var(--red);background:rgba(229,9,20,.12)}
#he-manual{display:flex;flex-direction:column;gap:.7rem}
#he-manual[hidden]{display:none}
.he-head{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.05em}
.he-list{display:flex;flex-direction:column;gap:.5rem;max-height:340px;overflow-y:auto}
.he-row{display:flex;align-items:center;gap:.8rem;padding:.5rem;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.he-thumb{width:96px;height:54px;flex-shrink:0;border-radius:6px;background:#1a1a24 center/cover no-repeat}
.he-info{flex:1;min-width:0}
.he-title{font-weight:700;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.he-sub{font-size:.72rem;color:var(--text-dim);margin-top:.15rem}
.he-actions{display:flex;gap:.3rem;flex-shrink:0}
.he-btn{width:30px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font-size:.82rem}
.he-btn:hover:not(:disabled){background:rgba(255,255,255,.15)}
.he-del:hover{background:var(--red)!important}
.he-empty{font-size:.8rem;color:var(--text-dim);padding:.4rem}
.he-results{display:flex;flex-direction:column;gap:.3rem}
.he-result{text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:8px;padding:.55rem .8rem;font-size:.84rem;cursor:pointer}
.he-result:hover{background:rgba(229,9,20,.18);border-color:rgba(229,9,20,.4)}
.he-result span{color:var(--text-dim);font-size:.75rem;margin-left:.3rem}
@media (max-width:900px){
  .hb{margin:1rem 3% 0}
  .hb-arrow{display:none}
  .hb-edit{opacity:1}
}
@media (max-width:600px){
  .hb{margin:.8rem 3% 0;height:auto;min-height:470px;border-radius:16px}
  .hb-layer-img{object-position:center top}
  .hb-layer.portrait .hb-layer-img{right:50%;transform:translateX(50%);max-width:75%}
  .hb-shade{background:linear-gradient(180deg,rgba(9,9,13,.35) 0%,rgba(9,9,13,.2) 30%,rgba(9,9,13,.88) 62%,rgba(9,9,13,.97) 100%)}
  .hb-content{justify-content:flex-end;padding:5rem 5% 4.4rem;gap:.8rem}
  .hb-logo{max-height:90px;max-width:80%}
  .hb-btn{padding:.7rem 1.1rem;font-size:.85rem;flex:1;justify-content:center}
  .he-modes{grid-template-columns:1fr}
  .he-thumb{width:64px;height:40px}
}

/* ══ Mode admin (js/admin.js) ══ */
body:not(.admin) .admin-only{display:none!important}
body:not(.admin) .hb--welcome .hb-btn-play{display:none}
html:not(.localhost) .nav-admin{display:none!important}
.nav-admin{position:relative}
.nav-btn-admin{display:flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s}
.nav-btn-admin:hover{background:rgba(255,255,255,.16)}
.nav-btn-admin.on{background:var(--red);border-color:var(--red)}
.nav-btn-admin.on:hover{opacity:.9}
.admin-box{max-width:400px}
@media (max-width:600px){.nav-btn-admin{padding:.45rem .6rem}}

/* ══ WHAT TO WATCH ══ */

/* Bouton « ajouter à ma liste » des cartes (⊕ qui pivote au survol) */
.card-add{position:absolute;right:8px;bottom:8px;z-index:30;width:40px;height:40px;padding:0;border:none;background:none;cursor:pointer;opacity:0;transition:opacity .2s,transform .3s;outline:none}
.card-add svg{width:100%;height:100%;fill:rgba(0,0,0,.35);stroke:#a1a1aa;transition:fill .3s,stroke .3s;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.card:hover .card-add,.card:focus-within .card-add,.card-add.in-list{opacity:1}
.card-add:hover{transform:rotate(90deg)}
.card-add:hover svg{fill:#27272a}
.card-add:active svg{stroke:#e4e4e7;fill:#52525b;transition-duration:0s}
.card-add.in-list svg{stroke:#06d6a0;fill:rgba(6,214,160,.15)}
.card-add.in-list:hover{transform:none}
.card-add:focus-visible{outline:2px solid #fff;border-radius:50%}
.card-overlay{padding-right:52px}
@media (hover:none){.card-add{opacity:1;width:34px;height:34px}}

/* Bande d'affiches au repos : défilement lent et continu */
.wtw-reel.idle{animation:wtwDrift 60s linear infinite}
@keyframes wtwDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wtw-stage:hover .wtw-reel.idle{animation-play-state:paused}
/* Bouton 3D (Lancer) */
.btn-3d{--button_radius:.75em;--button_color:#e8e8e8;--button_outline_color:#000;font-size:17px;font-weight:bold;border:none;cursor:pointer;border-radius:var(--button_radius);background:var(--button_outline_color);padding:0;font-family:inherit}
.btn-3d-top{display:block;box-sizing:border-box;border:2px solid var(--button_outline_color);border-radius:var(--button_radius);padding:.75em 2.4em;background:var(--button_color);color:var(--button_outline_color);transform:translateY(-.2em);transition:transform .1s ease}
.btn-3d:hover .btn-3d-top{transform:translateY(-.33em)}
.btn-3d:active .btn-3d-top{transform:translateY(0)}
.btn-3d:disabled{cursor:wait;opacity:1}
.btn-3d:disabled .btn-3d-top{transform:translateY(0);opacity:.75}

/* ══════════════════════════════════════
   SAGAS : cartes (js/sagas.js)
══════════════════════════════════════ */
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem}
.sg-card{background:#101014;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s;display:flex;flex-direction:column}
.sg-card:hover{transform:translateY(-4px);border-color:rgba(229,9,20,.45);box-shadow:0 16px 40px rgba(0,0,0,.55)}
.sg-banner{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1a1a2e,#16213e);overflow:hidden}
.sg-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sg-banner-img:not([src]){display:none}
.sg-card:hover .sg-banner-img{transform:scale(1.05)}
.sg-banner-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.35) 45%,transparent 75%)}
.sg-banner-text{position:absolute;left:1rem;right:1rem;bottom:.8rem}
.sg-name{font-size:1.2rem;font-weight:900;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.sg-count{font-size:.8rem;color:rgba(255,255,255,.8);margin-top:.2rem}
.sg-card .saga-card-edit{top:.6rem;right:.6rem}
.sg-card .saga-card-del{top:.6rem;left:.6rem}
.sg-card:hover .saga-card-edit,.sg-card:hover .saga-card-del{opacity:1}
.sg-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.sg-actions{display:flex;gap:.5rem}
.sg-btn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:#fff;font-size:.78rem;font-weight:700;padding:.4rem .8rem;border-radius:7px;cursor:pointer;transition:background .2s}
.sg-btn:hover{background:var(--red);border-color:var(--red)}
.sg-desc{color:rgba(255,255,255,.72);font-size:.82rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.sg-thumbs{display:flex;gap:.45rem;margin-top:auto}
.sg-thumb{width:48px;height:70px;border-radius:6px;overflow:hidden;background:#1a1a24;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;border:1px solid rgba(255,255,255,.08)}
.sg-thumb img{width:100%;height:100%;object-fit:cover}
.sg-more{font-size:.78rem;color:var(--text-dim);font-weight:700}

/* ══════════════════════════════════════
   PAGE D'UNE SAGA
══════════════════════════════════════ */
.sd{position:relative;min-height:60vh;overflow:hidden}
.sd-bg{position:absolute;top:0;left:0;right:0;height:720px;pointer-events:none;z-index:0}
.sd-bg img{width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(2px);transition:opacity .8s}
.sd-bg img.ok{opacity:.22}
.sd-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.85) 100%),linear-gradient(to bottom,transparent 40%,#000 100%)}
.sd-wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:1.8rem 3% 3rem}
.sd-back{background:none;border:none;color:rgba(255,255,255,.65);font-size:.9rem;cursor:pointer;padding:.3rem 0;margin-bottom:1.4rem}
.sd-back:hover{color:#fff}
.sd-top{display:flex;gap:2.2rem;align-items:flex-start}
.sd-poster{position:relative;width:260px;flex-shrink:0;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#1a1a2e,#16213e);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.sd-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.sd-poster img.ok{opacity:1}
.sd-poster-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;opacity:.4}
.sd-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1rem}
.sd-title{font-size:clamp(2rem,4.5vw,3.6rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;margin:0}
.sd-grad{background:linear-gradient(90deg,#e50914,#ff8a8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-meta{display:flex;flex-wrap:wrap;gap:1.2rem;color:rgba(255,255,255,.8);font-size:.95rem}
.sd-meta span + span{padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.2)}
.sd-desc{color:rgba(255,255,255,.75);font-size:1rem;line-height:1.7;max-width:80ch;margin:0}
.sd-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.3rem}
.sd-btn{border:1px solid rgba(255,255,255,.1);background:#2a3140;color:#fff;font-size:.9rem;font-weight:700;padding:.75rem 1.2rem;border-radius:9px;cursor:pointer;transition:background .2s}
.sd-btn:hover{background:#3a4356}
.sd-danger{color:#ff7a80}
.sd-h2{font-size:1.6rem;font-weight:900;margin:3rem 0 1.3rem}
/* Films de la collection */
.sd-films{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.4rem}
.sd-film{background:#0e0e11;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s}
.sd-film:hover{transform:translateY(-4px);border-color:rgba(229,9,20,.45);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.sd-film:not(.in-lib){opacity:.7}
.sd-film:not(.in-lib):hover{opacity:1}
.sd-film-img{position:relative;aspect-ratio:2/2.15;background:#1a1a24;overflow:hidden}
.sd-film-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.sd-film-img img:not([src]){display:none}
.sd-num{position:absolute;top:.9rem;left:.9rem;width:30px;height:30px;border-radius:50%;background:#dc2626;color:#fff;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.sd-rate{position:absolute;top:.9rem;right:.9rem;background:rgba(0,0,0,.65);color:#fff;font-size:.78rem;font-weight:800;padding:.25rem .5rem;border-radius:6px}
.sd-rate::first-letter{color:var(--gold)}
.sd-missing{position:absolute;left:.9rem;bottom:.9rem;background:rgba(0,0,0,.7);color:rgba(255,255,255,.8);font-size:.68rem;font-weight:700;padding:.25rem .55rem;border-radius:6px}
.sd-film-body{padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem}
.sd-film-title{font-weight:800;font-size:1.02rem}
.sd-film-year{font-size:.8rem;color:rgba(255,255,255,.65)}
.sd-film-desc{font-size:.82rem;color:rgba(255,255,255,.68);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Statistiques */
.sd-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem}
.sd-stat{background:#0e0e11;border:1px solid rgba(255,255,255,.07);border-top:1px solid rgba(229,9,20,.35);border-radius:12px;padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.sd-stat-wide{grid-column:1 / -1}
.sd-stat-wide.up{border-color:rgba(34,197,94,.35)}
.sd-stat-wide.down{border-color:rgba(229,9,20,.45)}
.sd-stat-k{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1rem}
.sd-ico{font-weight:900}
.sd-stat-v{font-size:1.55rem;font-weight:900;letter-spacing:-.01em}
.sd-stat-v small{font-size:.9rem;font-weight:800}
.sd-stat-s{font-size:.78rem;color:rgba(255,255,255,.55)}
.sd-ico.g,.sd-stat-v.g{color:#4ade80}
.sd-ico.b,.sd-stat-v.b{color:#60a5fa}
.sd-ico.y,.sd-stat-v.y{color:#facc15}
.sd-ico.p,.sd-stat-v.p{color:#c084fc}
.sd-ico.r,.sd-stat-v.r{color:#f87171}
/* Production */
.sd-prod{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.sd-prod-box{background:#0e0e11;border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.sd-prod-k{font-weight:800;font-size:1rem;margin-bottom:.2rem}
.sd-prod-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.9rem;color:rgba(255,255,255,.85)}
.sd-pill{font-size:.72rem;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);padding:.2rem .5rem;border-radius:5px;white-space:nowrap}
@media (max-width:760px){
  .sd-top{flex-direction:column;align-items:center;text-align:center}
  .sd-poster{width:200px}
  .sd-meta,.sd-actions{justify-content:center}
  .sd-prod{grid-template-columns:1fr}
  .sd-h2{font-size:1.3rem;margin-top:2.2rem}
  .sg-grid{grid-template-columns:1fr}
}

/* Fenêtre d'information */
.info-box{max-width:560px}
.info-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;padding:0;margin:0;max-height:60vh;overflow-y:auto}
.info-list li{display:flex;flex-direction:column;gap:.2rem;padding:.6rem .8rem;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:.85rem}
.info-list li span{color:var(--text-dim);font-size:.78rem}
.info-list li.ok strong{color:#4ade80}
.info-list li.ko strong{color:#f87171}
#sagas-fill-btn{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Compteurs de titres : uniquement sur la page d'accueil */
#tel-view-count,#cat-view-count,#plat-view-count,#sagas-view-count,#extraits-count,#search-results-count{display:none!important}
/* Titres de section : uniquement sur la page d'accueil */
#tel-view-title,#tel-view-sub,#cat-view-title,#plat-view-title,#sagas-view-title,.extraits-title{display:none!important}

/* ══ BARRE DU HAUT AGRANDIE (ordinateur) ══ */
@media (min-width:901px){
  :root{--nav-h:84px}
  .navbar{padding:0 2%;gap:1.6rem}
  .nav-logo{width:240px;height:56px;line-height:56px;font-size:2.2rem}
  .nav-links{gap:1.3rem;flex-shrink:0}
  .nav-link{font-size:1.15rem;gap:.55rem}
  .nav-link svg{width:21px;height:21px}
  .nav-right{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:.9rem}
  .nav-search-bar{flex:0 1 320px;min-width:120px;padding:.35rem .15rem}
  .nav-search-icon{width:20px;height:20px}
  #search-q{font-size:1.1rem}
  .nav-btn-admin{font-size:1.1rem;padding:.6rem 1.25rem;border-radius:8px}
  .nav-profile-btn{width:46px;height:46px;font-size:1.3rem}
}
/* Pas assez de place pour les textes : icônes seules (nom au survol) */
@media (min-width:901px) and (max-width:1800px){
  .nav-link{font-size:0;gap:0;padding:.5rem}
  .nav-link svg{width:24px;height:24px}
  .nav-links{gap:.9rem}
}

/* ══ BARRE DE RECHERCHE (style arrondi) ══ */
.nav-search-bar.search-header{display:flex;align-items:center;justify-content:space-between;text-align:center;border:none;border-bottom:none;padding:0;background:transparent;min-width:0;flex:0 1 auto}
.search-header__input,#search-q.search-header__input{font-family:inherit;font-size:16px;background-color:#0a0a0a;border:solid .5px #525252;color:#646464;padding:.7rem 1rem;border-radius:25px;width:240px;max-width:100%;height:48px;transition:all ease-in-out .5s;margin-right:-2rem;opacity:1;text-align:center;letter-spacing:normal;min-width:0}
.search-header__input:hover,.search-header__input:focus{box-shadow:0 0 1em #00000013}
.search-header__input:focus{outline:none;background-color:#0a0a0aad}
.search-header__input::placeholder{font-weight:100;color:#3a3a3a}
.search-header__input::-webkit-search-cancel-button{display:none}
.search-header__input:focus + .search-header__button{background-color:transparent}
.search-header__button{border:none;background-color:transparent;margin-top:.1em;padding:0;display:flex;align-items:center;flex-shrink:0}
.search-header__button:hover{cursor:pointer}
.search-header__icon{height:1.3em;width:1.3em;fill:#3a3a3a}
@media (max-width:900px){
  .nav-search-bar.search-header{flex:1 1 auto}
  .search-header__input,#search-q.search-header__input{width:100%;height:40px;padding:.5rem 2rem .5rem .8rem;font-size:16px}
}

/* Loupe bien placée à l'intérieur du champ */
.nav-search-bar.search-header{position:relative}
.search-header__input,#search-q.search-header__input{margin-right:0;padding-left:2.6rem;padding-right:2.6rem}
.search-header__button{position:absolute;right:14px;top:50%;transform:translateY(-50%);margin:0;height:auto}
.search-header__icon{fill:#646464}
.search-header__button:hover .search-header__icon{fill:#a3a3a3}
/* Bouton « Remplir auto » des extraits */
.extraits-header .nav-btn-add.ex-autofill-btn{margin-left:.6rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.extraits-header .nav-btn-add.ex-autofill-btn:hover{background:rgba(255,255,255,.16);opacity:1}

/* ══════════════════════════════════════
   EXTRAITS — TÉLÉPHONE « IPHONE » + BOUTONS LATÉRAUX
══════════════════════════════════════ */
.extraits-stage{isolation:isolate;gap:2.2rem}
/* halo aux couleurs de la vidéo */
.extraits-ambient{position:absolute;left:50%;top:50%;width:min(620px,95vw);height:min(80vh,760px);transform:translate(-50%,-50%);
  background:center/cover no-repeat;filter:blur(70px) saturate(1.6);opacity:0;transition:opacity .8s;z-index:-1;pointer-events:none;border-radius:50%}
.extraits-ambient.on{opacity:.38}

.extraits-phone{
  --ph-h:min(80vh,780px);
  position:relative;flex-shrink:0;
  height:var(--ph-h);width:min(88vw,calc(var(--ph-h) * 9 / 19));
  padding:11px;border-radius:58px;
  /* cadre titane */
  background:linear-gradient(145deg,#5b5b63 0%,#2a2a30 18%,#151518 45%,#2c2c32 78%,#62626a 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.22),
    inset 0 0 0 4px #0b0b0d,
    inset 0 2px 6px rgba(255,255,255,.18),
    0 0 0 1px rgba(0,0,0,.8),
    0 40px 90px -20px rgba(0,0,0,.9),
    0 18px 40px rgba(0,0,0,.55),
    0 0 70px rgba(229,9,20,.10);
}
/* boutons physiques */
.ph-btn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#1c1c20,#55555c 60%,#2a2a2f);box-shadow:0 0 2px rgba(0,0,0,.6)}
.ph-action{left:-3px;top:15%;height:4.2%}
.ph-volup{left:-3px;top:23%;height:8.5%}
.ph-voldn{left:-3px;top:33.5%;height:8.5%}
.ph-power{right:-3px;top:26%;height:13%;background:linear-gradient(270deg,#1c1c20,#55555c 60%,#2a2a2f)}
/* écran */
.ph-screen{position:relative;width:100%;height:100%;border-radius:47px;overflow:hidden;background:#000;box-shadow:0 0 0 2px #000;transform:translateZ(0)}
.ph-screen .extraits-feed{border-radius:inherit}
.ph-status{position:absolute;top:0;left:0;right:0;height:52px;z-index:8;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px 0 32px;color:#fff;font-size:.86rem;font-weight:700;letter-spacing:.01em;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ph-time{min-width:46px}
.ph-island{position:absolute;left:50%;top:11px;transform:translateX(-50%);width:31%;height:30px;border-radius:20px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.ph-island::after{content:'';position:absolute;right:12px;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 35% 35%,#3a4a7a,#0c0f1c 60%);box-shadow:0 0 0 1.5px #0e0e12}
.ph-icons{display:flex;align-items:center;gap:5px}
.ph-icons svg{fill:#fff}
.ph-battery{width:25px;height:12px;border:1.5px solid rgba(255,255,255,.55);border-radius:4px;padding:1.5px;position:relative;display:inline-block}
.ph-battery::after{content:'';position:absolute;right:-4px;top:50%;width:2px;height:4px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.55);transform:translateY(-50%)}
.ph-battery span{display:block;height:100%;width:78%;background:#fff;border-radius:2px}
.ph-home{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:36%;height:5px;border-radius:3px;background:rgba(255,255,255,.85);z-index:8;pointer-events:none;box-shadow:0 0 4px rgba(0,0,0,.5)}
.ph-glare{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 28%,transparent 42%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* les éléments de la vidéo passent sous la barre d'état */
.ph-screen .extrait-badge-top{top:58px;left:18px}
.ph-screen .extrait-source-badge{top:58px;right:18px}
.ph-screen .extrait-owner-actions{top:90px;right:18px}
.ph-screen .extrait-info{left:20px;bottom:28px;right:20px}
.ph-screen .extrait-info-title{font-size:1.05rem}
.ph-screen .extrait-gradient{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 20%,transparent 58%,rgba(0,0,0,.88) 100%)}

/* ── boutons latéraux ── */
.extraits-side-actions{gap:1.9rem}
.extraits-side-actions .ex-count{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.1rem;font-size:.66rem;color:var(--text-dim);font-weight:700;white-space:nowrap}

/* cœur */
.ex-like-btn{display:flex;align-items:center;justify-content:center;border-radius:10px;border:none;background-color:transparent;position:relative;width:44px;height:44px;padding:0;cursor:pointer}
.ex-like-btn .ex-heart{width:34px;height:34px;fill:rgba(255,255,255,.88);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));transition:.2s linear}
.ex-like-btn:hover > .ex-heart{transform:scale(1.2)}
.ex-like-btn.liked > .ex-heart{fill:#fd1853;animation:exGrosseur .2s linear;filter:drop-shadow(0 0 10px rgba(253,24,83,.6))}
@keyframes exGrosseur{0%{width:50px;height:50px;fill:#fd1853}100%{width:34px;height:34px;fill:#fd1853}}

/* ma liste + son : l'icône change avec une animation */
.ex-toggle-icon{--color:#ffff00;--size:32px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;
  width:44px;height:44px;padding:0;border:none;background:transparent;user-select:none;fill:var(--color)}
.ex-toggle-icon svg{position:absolute;width:var(--size);height:var(--size);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));animation:exFill .5s}
.ex-toggle-icon .ex-on{display:none}
.ex-save svg{transform-origin:top}
.ex-save.saved .ex-off,.ex-sound.unmuted .ex-off{display:none}
.ex-save.saved .ex-on,.ex-sound.unmuted .ex-on{display:block}
.ex-sound{--color:#a5a5b0}
.ex-sound.unmuted{--color:#fff}
.ex-sound svg{animation-name:exFillRot}
@keyframes exFill{0%{transform:scale(0);opacity:0}50%{transform:scaleY(1.2)}}
@keyframes exFillRot{0%{transform:rotate(0deg) scale(0);opacity:0}50%{transform:rotate(-10deg) scale(1.2)}}

/* volume : barre verticale */
.ex-volume{
  --slider-width:130px;--slider-height:44px;--slider-bg:rgb(82,82,82);--slider-border-radius:9px;
  --level-color:#fff;--icon-color:var(--slider-bg);--icon-size:22px;
  position:relative;width:var(--slider-height);height:var(--slider-width);flex-shrink:0}
.ex-volume .slider{position:absolute;left:50%;top:50%;width:var(--slider-width);height:var(--slider-height);cursor:pointer;display:flex;align-items:center;
  transform:translate(-50%,-50%) rotate(270deg)}
.ex-volume .level{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:100%;height:100%;background:var(--slider-bg);overflow:hidden;
  border-radius:var(--slider-border-radius);cursor:inherit;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.ex-volume .level::-webkit-slider-thumb{-webkit-appearance:none;width:0;height:0;box-shadow:-200px 0 0 200px var(--level-color)}
.ex-volume .level::-moz-range-thumb{width:0;height:0;border-radius:0;border:none;box-shadow:-200px 0 0 200px var(--level-color)}
.ex-volume .volume{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);width:var(--icon-size);height:auto;color:var(--icon-color);pointer-events:none}
.ex-volume .level:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:720px){
  .extraits-phone{--ph-h:min(72vh,680px);padding:8px;border-radius:44px}
  .ph-screen{border-radius:37px}
  .ph-btn{display:none}
  .extraits-side-actions{gap:1.4rem;flex-wrap:wrap;justify-content:center;padding-bottom:1.2rem}

}

/* ══════════════════════════════════════
   NOUS SOUTENIR — carte « verre » inclinée
══════════════════════════════════════ */
.sup-card{width:min(400px,90vw);height:150px;padding:.5rem;background:rgba(198,198,198,.34);border-radius:8px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  border-bottom:3px solid rgba(255,255,255,.44);border-left:2px rgba(255,255,255,.545) outset;box-shadow:-40px 50px 30px rgba(0,0,0,.28);
  transform:skewX(10deg);transition:.4s;overflow:hidden;color:#fff;margin:0 auto;cursor:default}
.sup-card:hover,.sup-card:focus-within{height:430px;transform:skew(0deg)}
.sup-align{padding:1rem;display:flex;flex-direction:row;gap:5px;align-self:flex-start}
.sup-red,.sup-yellow,.sup-green{width:10px;height:10px;border-radius:50%;box-shadow:-5px 5px 5px rgba(0,0,0,.28)}
.sup-red{background-color:#ff605c}
.sup-yellow{background-color:#ffbd44}
.sup-green{background-color:#00ca4e}
.sup-card h1{text-align:center;margin:.6rem 1.3rem 1.3rem;font-size:1.9rem;font-weight:900;color:rgb(218,244,237);text-shadow:-10px 5px 10px rgba(0,0,0,.573)}
.sup-body{padding:0 1.4rem 1.2rem;opacity:0;transition:opacity .3s}
.sup-card:hover .sup-body,.sup-card:focus-within .sup-body{opacity:1;transition-delay:.15s}
.sup-body p{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 1rem;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.sup-check{display:flex;gap:.6rem;align-items:flex-start}
.sup-check span{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:#00ca4e;display:flex;align-items:center;justify-content:center;font-size:.65rem;margin-top:.15rem}
.sup-paypal{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;background:#fff;color:#003087;font-weight:800;padding:.9rem 1.5rem;border-radius:12px;
  text-decoration:none;font-size:.95rem;box-shadow:-10px 12px 20px rgba(0,0,0,.3);transition:transform .2s}
.sup-paypal:hover{transform:scale(1.03)}
.sup-note{text-align:center;margin-top:.9rem;font-size:.75rem;color:rgba(255,255,255,.75)}
/* écrans tactiles : pas de survol, la carte reste ouverte */
@media (hover:none){.sup-card{height:auto;transform:none}.sup-body{opacity:1}}
.ph-screen .extraits-feed{scrollbar-width:none}
/* flèches haut / bas */
.ex-nav-arrows{display:flex;flex-direction:column;gap:.8rem}
.ex-nav-arrow{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--border);color:#fff;font-size:1rem;cursor:pointer;transition:all .2s}
.ex-nav-arrow:hover{background:rgba(229,9,20,.25);border-color:var(--red)}
@media (max-width:720px){.ex-nav-arrows{display:none}}
/* boutons de la bannière : aucune ombre */
.hb-btn,.hb-btn:hover{box-shadow:none!important;text-shadow:none}

/* ══════════════════════════════════════
   COMMUNAUTÉ — connexion, badge ♥, personnalisation, commentaires
══════════════════════════════════════ */
body:not(.is-connected) .connected-only{display:none!important}
body.is-connected .guest-only{display:none!important}
.nav-link.nav-hidden-by-user{display:none!important}

/* badge cœur */
.heart-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#fd1853;
  box-shadow:0 0 0 2px #0b0b0f,0 0 10px rgba(253,24,83,.55);flex-shrink:0}
.heart-badge svg{width:11px;height:11px;fill:#fff}
.heart-inline{color:#fd1853}
.nav-heart-badge{position:absolute;right:-3px;bottom:-3px;z-index:2;pointer-events:none;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
body.is-connected .nav-heart-badge{transform:scale(1)}
body.is-connected .nav-profile-btn{box-shadow:0 0 0 2px #fd1853}

/* bouton Connexion */
.nav-login{position:relative;flex-shrink:0}
.nav-login[hidden]{display:none}
.nav-login-btn{display:flex;align-items:center;gap:.55rem;background:none;border:none;color:#fff;font-weight:800;font-size:.95rem;cursor:pointer;padding:.35rem .5rem;border-radius:30px;transition:background .2s}
.nav-login-btn:hover,.nav-login-btn[aria-expanded="true"]{background:rgba(255,255,255,.07)}
.nav-login-ava{width:30px;height:30px;border-radius:50%;background:#cfd2d8;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;flex-shrink:0}
.nav-login-ava svg{width:24px;height:24px;fill:#8b9099;margin-bottom:-2px}
.nav-login-chev{width:16px;height:16px;transition:transform .2s}
.nav-login-btn[aria-expanded="true"] .nav-login-chev{transform:rotate(180deg)}
.login-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:160;width:320px;max-width:calc(100vw - 24px);background:#131722;border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:1.1rem;box-shadow:0 24px 60px rgba(0,0,0,.75);display:none;flex-direction:column;gap:.75rem}
.login-menu.open{display:flex;animation:modalIn .18s ease}
.login-menu-text{font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.7);padding-bottom:.85rem;border-bottom:1px solid rgba(255,255,255,.08);margin:0}
.login-provider{display:flex;align-items:center;justify-content:center;gap:.8rem;width:100%;border:none;border-radius:10px;padding:.95rem 1rem;font-size:.95rem;font-weight:800;cursor:pointer;
  transition:transform .15s,filter .15s}
.login-provider:hover{transform:translateY(-1px);filter:brightness(1.08)}
.login-provider svg{flex-shrink:0}
.login-provider.discord{background:#5865f2;color:#fff}
.login-provider.google{background:#fff;color:#1f1f1f}
.login-provider.sm{width:auto;padding:.6rem .95rem;font-size:.85rem;gap:.5rem}
.login-provider.sm svg{width:18px;height:18px}
.login-menu-email{background:none;border:none;color:rgba(255,255,255,.55);font-size:.8rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:.2rem}
.login-menu-email:hover{color:#fff}
@media (max-width:2100px){.nav-login-label,.nav-login-chev{display:none}}

/* menu du compte connecté */
.account-menu-pub{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;padding:.5rem .55rem;border-radius:10px;background:rgba(253,24,83,.08);border:1px solid rgba(253,24,83,.22)}
.acc-pub-name{font-weight:800;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu .acc-custom-item{color:#fff;font-weight:700}

/* avatars ronds (commentaires, aperçu) */
.cm-ava{--accent:#e50914;position:relative;width:42px;height:42px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),#1a1a22 140%);box-shadow:0 0 0 2px var(--accent)}
.cm-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cm-ava-letter{font-weight:900;color:#fff;font-size:1.05rem;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.cm-ava-sm{width:26px;height:26px}.cm-ava-sm .cm-ava-letter{font-size:.75rem}
.cm-ava-xl{width:74px;height:74px;box-shadow:0 0 0 3px var(--accent),0 0 24px color-mix(in srgb,var(--accent) 45%,transparent)}.cm-ava-xl .cm-ava-letter{font-size:1.8rem}

/* ── fenêtre Personnaliser ── */
.acct-overlay{position:fixed;inset:0;z-index:1000;background:rgba(3,3,6,.82);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:1.5rem}
.acct-overlay.open{display:flex}
.acct-box{width:min(560px,100%);max-height:calc(100dvh - 3rem);display:flex;flex-direction:column;background:linear-gradient(180deg,#15151d,#0d0d12);
  border:1px solid rgba(255,255,255,.09);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.8);animation:modalIn .22s ease;overflow:hidden}
.acct-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem .9rem}
.acct-head h2{font-size:1.25rem;font-weight:900;color:#fff}
.acct-head h2 span{color:var(--red)}
.acct-scroll{overflow-y:auto;padding:0 1.4rem 1rem;display:flex;flex-direction:column;gap:1.3rem}
.acct-preview{display:flex;align-items:center;gap:1.1rem;padding:1.2rem;border-radius:16px;background:radial-gradient(120% 140% at 0% 0%,rgba(253,24,83,.16),rgba(255,255,255,.03) 60%);border:1px solid rgba(255,255,255,.08)}
.acct-preview-name{display:flex;align-items:center;gap:.5rem;font-size:1.3rem;font-weight:900;word-break:break-word}
.acct-preview-sub{font-size:.78rem;color:var(--text-dim);margin-top:.3rem}
.acct-label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.6rem}
.acct-hint{font-size:.74rem;color:var(--text-dim);margin-top:.45rem;line-height:1.45}
.acct-avatars{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.6rem;max-height:196px;overflow-y:auto;padding:.3rem}
.acct-av{position:relative;background:none;border:none;padding:0;cursor:pointer;border-radius:50%;justify-self:center;transition:transform .15s}
.acct-av .cm-ava{width:48px;height:48px;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.acct-av:hover{transform:scale(1.08)}
.acct-av.selected .cm-ava{box-shadow:0 0 0 3px var(--accent),0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)}
.acct-av-prov{position:absolute;right:-4px;bottom:-4px;z-index:2;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #121218}
.acct-av-prov svg{width:13px;height:13px}
.acct-av-prov.discord{background:#5865f2;color:#fff}
.acct-av-prov.google{background:#fff}
.acct-colors{display:flex;flex-wrap:wrap;gap:.7rem}
.acct-color{width:34px;height:34px;border-radius:50%;border:none;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.08);transition:transform .15s,box-shadow .15s}
.acct-color:hover{transform:scale(1.1)}
.acct-color.selected{box-shadow:0 0 0 3px #0d0d12,0 0 0 5px var(--c)}
.acct-menu-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.5rem}
.acct-tab{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);cursor:pointer;font-size:.86rem;color:#fff;user-select:none}
.acct-tab.locked{opacity:.55;cursor:not-allowed}
.acct-tab input{position:absolute;opacity:0;pointer-events:none}
.acct-tab-switch{position:relative;width:32px;height:18px;border-radius:10px;background:rgba(255,255,255,.18);flex-shrink:0;transition:background .2s}
.acct-tab-switch::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.acct-tab input:checked + .acct-tab-switch{background:var(--red)}
.acct-tab input:checked + .acct-tab-switch::after{transform:translateX(14px)}
.acct-tab input:focus-visible + .acct-tab-switch{outline:2px solid #fff;outline-offset:2px}
.acct-links{display:flex;flex-direction:column;gap:.5rem}
.acct-link{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.acct-link-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.acct-link.discord .acct-link-ico{background:#5865f2;color:#fff}
.acct-link.google .acct-link-ico{background:#fff}
.acct-link-name{flex:1;font-weight:700;color:#fff;font-size:.9rem}
.acct-link-ok{font-size:.78rem;font-weight:800;color:#22c55e}
.acct-link-btn{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-weight:700;font-size:.8rem;padding:.45rem .9rem;border-radius:8px;cursor:pointer}
.acct-link-btn:hover{background:rgba(255,255,255,.14)}
.acct-msg{min-height:0;padding:0 1.4rem;font-size:.8rem;color:var(--text-dim)}
.acct-msg:not(:empty){padding-top:.6rem}
.acct-msg.error{color:#ff6b74}
.acct-actions{display:flex;justify-content:flex-end;gap:.6rem;padding:1rem 1.4rem 1.2rem;border-top:1px solid rgba(255,255,255,.07)}
.acct-cancel{background:none;border:1px solid rgba(255,255,255,.15);color:#fff;font-weight:700;padding:.7rem 1.2rem;border-radius:10px;cursor:pointer}
.acct-cancel:hover{background:rgba(255,255,255,.06)}
.acct-save{width:auto;margin:0;padding:.7rem 1.6rem}
@media (max-width:600px){
  .acct-overlay{padding:0;align-items:flex-end}
  .acct-box{max-height:92dvh;border-radius:20px 20px 0 0}
}

/* ── Commentaires ── */
.tp-comments{margin-top:2.5rem;max-width:980px}
.cm-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;flex-wrap:wrap}
.cm-head .tp-h2{margin:0}
.cm-count{font-size:.78rem;font-weight:800;color:#fff;background:rgba(229,9,20,.85);padding:.15rem .6rem;border-radius:20px}
.cm-sort{margin-left:auto;display:flex;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:30px;padding:.2rem}
.cm-sort button{background:none;border:none;color:rgba(255,255,255,.6);font-size:.78rem;font-weight:700;padding:.35rem .85rem;border-radius:20px;cursor:pointer}
.cm-sort button.active{background:#fff;color:#0b0b0f}

.cm-composer{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:16px;background:rgba(18,20,30,.72);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);margin-bottom:1.2rem;transition:border-color .2s}
.cm-composer:focus-within{border-color:rgba(229,9,20,.55);box-shadow:0 0 0 3px rgba(229,9,20,.12)}
.cm-composer-main{flex:1;min-width:0}
.cm-composer textarea{width:100%;min-height:42px;resize:none;background:transparent;border:none;outline:none;color:#fff;font:inherit;font-size:.95rem;line-height:1.5;padding:.55rem 0}
.cm-composer textarea::placeholder{color:rgba(255,255,255,.4)}
.cm-composer-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.4rem;flex-wrap:wrap}
.cm-hint{font-size:.72rem;color:var(--text-dim)}
.cm-post{background:var(--red);color:#fff;border:none;font-weight:800;font-size:.85rem;padding:.55rem 1.3rem;border-radius:30px;cursor:pointer;transition:transform .15s,opacity .2s}
.cm-post:hover:not(:disabled){transform:translateY(-1px)}
.cm-post:disabled{opacity:.35;cursor:not-allowed}

.cm-login{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.3rem;border-radius:16px;margin-bottom:1.2rem;
  background:linear-gradient(120deg,rgba(88,101,242,.16),rgba(18,20,30,.75) 55%);border:1px solid rgba(255,255,255,.09)}
.cm-login-txt{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem;color:var(--text-dim)}
.cm-login-txt strong{color:#fff;font-size:.98rem}
.cm-login-btns{display:flex;gap:.6rem;flex-wrap:wrap}

.cm-list{display:flex;flex-direction:column;gap:.85rem}
.cm-item{--accent:#e50914;position:relative;display:flex;gap:.95rem;padding:1.1rem 1.2rem;border-radius:16px;background:rgba(18,20,30,.72);border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(10px);overflow:hidden}
.cm-list.anim .cm-item{animation:cmIn .35s ease both}
.cm-item::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:.85}
.cm-item.own{background:rgba(26,20,28,.8);border-color:rgba(253,24,83,.18)}
@keyframes cmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cm-body{flex:1;min-width:0}
.cm-meta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.cm-name{font-weight:800;color:var(--accent);font-size:.95rem;filter:brightness(1.25)}
.cm-meta .heart-badge{width:16px;height:16px}
.cm-meta .heart-badge svg{width:9px;height:9px}
.cm-you{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:rgba(255,255,255,.12);padding:.1rem .45rem;border-radius:5px}
.cm-time{font-size:.74rem;color:var(--text-dim)}
.cm-text{margin:.45rem 0 .7rem;color:rgba(255,255,255,.92);font-size:.95rem;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.cm-actions{display:flex;align-items:center;gap:.4rem}
.cm-like,.cm-del{display:inline-flex;align-items:center;gap:.35rem;background:none;border:none;color:rgba(255,255,255,.6);font-size:.82rem;font-weight:700;padding:.3rem .55rem;border-radius:20px;cursor:pointer;transition:background .15s,color .15s}
.cm-like svg,.cm-del svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.cm-del svg{fill:currentColor;stroke:none}
.cm-like:hover{background:rgba(253,24,83,.12);color:#fd1853}
.cm-like.liked{color:#fd1853}
.cm-like.liked svg{fill:#fd1853;stroke:#fd1853;animation:cmPop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes cmPop{0%{transform:scale(.6)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.cm-del{margin-left:auto;opacity:.6}
.cm-item:hover .cm-del,.cm-del:focus-visible{opacity:1}
.cm-del:hover{background:rgba(255,90,100,.12);color:#ff5a64}
.cm-del.confirm{opacity:1;background:#ff3b47;color:#fff}
.cm-state{padding:1.6rem;text-align:center;color:var(--text-dim);font-size:.9rem;border-radius:16px;background:rgba(18,20,30,.5);border:1px dashed rgba(255,255,255,.1)}
.cm-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.cm-empty-ico{font-size:1.8rem}
.cm-retry,.cm-more{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:.82rem;padding:.5rem 1rem;border-radius:20px;cursor:pointer;margin-left:.4rem}
.cm-more{align-self:center;margin:.3rem 0 0}
.cm-skel{height:96px;border-radius:16px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:cmSkel 1.2s linear infinite}
@keyframes cmSkel{to{background-position:-200% 0}}
@media (max-width:600px){
  .cm-item,.cm-composer{padding:.9rem;gap:.7rem}
  .cm-ava{width:36px;height:36px}
  .cm-sort{margin-left:0}
}
/* barre du haut : la recherche ne s'écrase plus sous le bouton Admin */
@media (min-width:901px){
  .nav-search-bar.search-header{flex:0 1 240px;min-width:150px}
  .nav-search-bar.search-header .search-header__input{width:100%}
}
@media (min-width:901px) and (max-width:1400px){
  .nav-admin .nav-btn-add-label{display:none}
}
@media (min-width:901px) and (max-width:1400px){
  .navbar{gap:1rem}
  .nav-logo{width:180px;height:44px;line-height:44px}
  .nav-links{gap:.35rem}
  .nav-right{gap:.6rem}
  .nav-btn-admin{padding:.6rem .8rem}
}
@media (min-width:901px) and (max-width:1100px){
  .nav-logo{width:140px}
  .nav-search-bar.search-header{min-width:120px}
}
@media (min-width:1401px){.nav-search-bar.search-header{min-width:120px}}
/* téléphone : la connexion passe par le menu de la bulle du profil */
@media (max-width:900px){
  .nav-login-btn{display:none!important}
  .login-menu{position:fixed;top:calc(var(--nav-h) + env(safe-area-inset-top) + 8px);right:12px}
}
@media (max-width:900px){
  .nav-search-bar.search-header #search-q.search-header__input{padding-left:.75rem;padding-right:1.9rem;min-width:0}
  .nav-search-bar.search-header .search-header__button{right:8px}
}

/* ══════════════════════════════════════
   NOUVELLE BARRE DU HAUT : Accueil · Films · Séries · Animation · Explorer
══════════════════════════════════════ */
@media (min-width:901px){
  .nav-links{gap:.35rem;align-items:center}
  .nav-links > .nav-link{height:46px;padding:0 .85rem;border-radius:10px;font-size:1.05rem;font-weight:600;gap:.55rem;color:rgba(255,255,255,.78)}
  .nav-links > .nav-link svg{width:21px;height:21px}
  .nav-links > .nav-link[data-nav="home"]{font-size:0;gap:0;width:46px;padding:0;justify-content:center}
  .nav-links > .nav-link[data-nav="home"] svg{width:23px;height:23px}
  .nav-links > .nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
  .nav-links > .nav-link.active{background:rgba(255,255,255,.09);color:#fff}
}
.nav-explore{position:static}
.nav-explore-btn{display:flex;align-items:center;gap:.55rem;height:46px;padding:0 .9rem;border-radius:10px;border:1px solid transparent;background:none;color:rgba(255,255,255,.78);font-size:1.05rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.nav-explore-chev{transition:transform .2s}
.nav-explore:not(.suppress):hover .nav-explore-btn,.nav-explore.open .nav-explore-btn{background:#16161b;border-color:#3a3a42;color:#fff}
.nav-explore:not(.suppress):hover .nav-explore-chev,.nav-explore.open .nav-explore-chev{transform:rotate(180deg)}
.nav-explore:has(.nav-link.active) .nav-explore-btn{color:#fff;background:rgba(255,255,255,.09)}
.nav-explore-panel{display:none;position:absolute;left:50%;top:calc(100% - 10px);transform:translateX(-50%);z-index:150;width:min(1080px,calc(100vw - 32px));box-sizing:border-box;padding:28px;border-radius:18px;
  background:#030303;border:1px solid #222228;box-shadow:0 30px 80px rgba(0,0,0,.85);grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;align-items:start}
.nav-explore-panel::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-explore:not(.suppress):hover .nav-explore-panel,.nav-explore.open .nav-explore-panel{display:grid;animation:nxIn .18s ease}
@keyframes nxIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.nx-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.nx-head{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6b6862;padding:0 2px 4px}
.nav-explore-panel .nx-card{display:flex;align-items:center;justify-content:flex-start;gap:16px;height:88px;width:100%;box-sizing:border-box;padding:0 20px;border-radius:12px;background:#0a0a0b;
  border:1px solid color-mix(in srgb,var(--nx) 28%,transparent);color:#f4f1ec;text-align:left;cursor:pointer;font-size:16px;font-weight:600;transition:background .15s,border-color .15s}
.nav-explore-panel .nx-card:hover{background:color-mix(in srgb,var(--nx) 9%,#0a0a0b);border-color:color-mix(in srgb,var(--nx) 60%,transparent)}
.nav-explore-panel .nx-card.active{border-color:var(--nx);background:color-mix(in srgb,var(--nx) 10%,#0a0a0b)}
.nav-explore-panel .nx-ico{width:48px;height:48px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--nx);
  background:color-mix(in srgb,var(--nx) 12%,transparent);border:1px solid color-mix(in srgb,var(--nx) 32%,transparent)}
.nav-explore-panel .nx-ico svg{width:22px;height:22px}
.nx-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.nx-title{font-size:16px;font-weight:800;color:#f4f1ec}
.nx-sub{font-size:13px;font-weight:500;color:#8d8982;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .nav-explore-btn{display:none}
  .nav-explore-panel{display:flex!important;flex-direction:column;gap:10px;position:static;transform:none;width:auto;padding:0;border:none;background:none;box-shadow:none;animation:none!important}
  .nav-explore-panel::before{display:none}
  .nx-col{gap:2px}
  .nx-head{padding:12px 10px 4px;font-size:11px}
  .nav-explore-panel .nx-card{height:auto;padding:.6rem .7rem;gap:.8rem;border-color:transparent;background:none}
  .nav-explore-panel .nx-ico{width:34px;height:34px;border-radius:9px}
  .nav-explore-panel .nx-ico svg{width:18px;height:18px}
  .nx-sub{display:none}
  .nx-title{font-size:.95rem;font-weight:600}
}

/* ══════════════════════════════════════
   NOUVELLE PAGE D'ACCUEIL (maquette validée)
══════════════════════════════════════ */
/* Anton (police libre OFL, fichier dans assets/fonts : rien n'est chargé depuis Google) */
@font-face{font-family:'Anton';src:url('../assets/fonts/anton-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--font-display:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif}
.section-title{font-family:var(--font-display);font-weight:400;letter-spacing:.03em;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.5rem)}
.bt-item.nav-hidden-by-user{display:none!important}

/* bannière « À l'affiche » */
.hb-kicker{font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.hb--welcome .hb-kicker{display:none}
.hb-title{font-family:var(--font-display);font-weight:400;letter-spacing:.01em;line-height:.98;font-size:clamp(2.6rem,5.4vw,5.6rem)}
.hb-chip{background:rgba(42,35,48,.85);border-color:rgba(255,255,255,.14)}

/* Top 10 : grands chiffres en contour, à gauche de l'affiche */
#row-all > .card{margin-left:clamp(3.2rem,5.6vw,5.4rem)}
#row-all .card-rank{left:auto;right:100%;margin-right:.08em;bottom:-.08em;font-family:var(--font-display);font-weight:400;font-style:normal;color:#07070a;-webkit-text-stroke:3px #5a5358;z-index:0;font-size:clamp(4.6rem,8.4vw,8.2rem);letter-spacing:-.02em}
#row-all .card:hover .card-rank{opacity:1;-webkit-text-stroke-color:var(--red)}

/* aperçu Extraits */
.home-extraits{display:flex;align-items:center;gap:3.5rem;margin:3.5rem 3% 0;padding:3rem;border-radius:24px;background:#140a0c;border:1px solid #2c1a1e}
.hx-text{flex:0 1 420px;display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.hx-kicker{font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.hx-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,1.6rem + 2vw,3.5rem);line-height:1;text-transform:uppercase;color:#fff}
.hx-desc{margin:0;font-size:1rem;line-height:1.6;color:#cfc9c0}
.hx-btn{align-self:flex-start;height:52px;padding:0 1.6rem;border:none;border-radius:12px;background:var(--red);color:#fff;font-size:1rem;font-weight:800;cursor:pointer;transition:transform .15s}
.hx-btn:hover{transform:translateY(-2px)}
.hx-phones{flex:1;display:flex;gap:1.5rem;justify-content:flex-end}
.hx-phone{width:200px;height:400px;flex-shrink:0;box-sizing:border-box;padding:8px;border-radius:34px;background:#2a2a30;box-shadow:inset 0 0 0 1px #4a4a52}
.hx-screen{position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden;background:#1a1216;display:flex;align-items:center;justify-content:center}
.hx-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.34)}
.hx-empty{font-size:2rem;color:#4a3a40}
.hx-island{position:absolute;left:50%;top:10px;width:60px;height:18px;margin-left:-30px;border-radius:10px;background:#07070a;z-index:2}
.hx-cap{position:absolute;left:0;right:0;bottom:0;padding:2.2rem .9rem .9rem;display:flex;flex-direction:column;gap:.2rem;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:1}
.hx-cap strong{font-size:.9rem;color:#fff}
.hx-cap small{font-size:.72rem;color:#e6e1da}
@media (max-width:1100px){.hx-phone:nth-child(3){display:none}}
@media (max-width:900px){
  .home-extraits{flex-direction:column;align-items:stretch;gap:1.5rem;padding:1.5rem;margin-top:2.5rem}
  .hx-phones{justify-content:center;gap:.8rem}
  .hx-phone{width:140px;height:280px;border-radius:26px;padding:6px}
  .hx-screen{border-radius:21px}
  .hx-phone:nth-child(3){display:none}
  .hx-btn{align-self:stretch}
}

/* derniers avis */
.home-reviews[hidden]{display:none!important}
.home-reviews .section-header{justify-content:space-between}
.hr-login{background:#5865f2;border:none;color:#fff;font-weight:800;font-size:.85rem;padding:.6rem 1rem;border-radius:10px;cursor:pointer}
.hr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.hr-card{--accent:#e50914;display:flex;flex-direction:column;gap:.9rem;text-align:left;padding:1.3rem;border-radius:16px;background:#111116;border:1px solid #24222a;color:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.hr-card:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);transform:translateY(-2px)}
.hr-top{display:flex;align-items:center;gap:.75rem;min-width:0}
.hr-who{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.hr-name{display:flex;align-items:center;gap:.4rem;font-weight:800;color:var(--accent);filter:brightness(1.25)}
.hr-name .heart-badge{width:16px;height:16px}.hr-name .heart-badge svg{width:9px;height:9px}
.hr-on{font-size:.75rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-text{font-size:.95rem;line-height:1.55;color:#e6e1da;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:900px){.hr-grid{grid-template-columns:1fr}}

/* barre d'onglets du bas (téléphone) */
.bottom-tabs{display:none}
@media (max-width:900px){
  .bottom-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;height:calc(64px + env(safe-area-inset-bottom));padding:0 .5rem env(safe-area-inset-bottom);
    background:#0b0b0e;border-top:1px solid #1c1c22;justify-content:space-around;align-items:center}
  .bt-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:64px;height:56px;justify-content:center;border:none;background:none;color:#8d8982;font-size:.68rem;font-weight:700;cursor:pointer}
  .bt-item svg{width:22px;height:22px}
  .bt-item.active{color:var(--red)}
  #appContent{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* petits écrans d'ordinateur : icônes seules (le nom s'affiche au survol) */
@media (min-width:901px) and (max-width:1120px){
  .nav-links > .nav-link{font-size:0;gap:0;padding:0;width:46px;justify-content:center}
  .nav-explore-btn > span{display:none}
  .nav-explore-btn{gap:.3rem;padding:0 .6rem}
}
/* connexion Discord / Google dans le menu de la bulle du profil */
.account-menu:has(.acc-login){min-width:300px}
.acc-login{display:flex;flex-direction:column;gap:.6rem;padding:.8rem .6rem .7rem;margin-bottom:.3rem;border-bottom:1px solid rgba(255,255,255,.08)}
.acc-login .login-menu-text{font-size:.8rem;padding-bottom:.4rem;border-bottom:none}
.account-menu .acc-login .login-provider{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;border:none;border-radius:10px;padding:.8rem .9rem;font-size:.88rem;font-weight:800;text-align:center}
.account-menu .acc-login .login-provider.discord{background:#5865f2;color:#fff}
.account-menu .acc-login .login-provider.google{background:#fff;color:#1f1f1f}
.account-menu .acc-login .login-provider:hover{filter:brightness(1.08);transform:translateY(-1px)}
.account-menu .acc-login .login-menu-email{text-align:center;padding:.2rem;font-size:.78rem;color:rgba(255,255,255,.55);text-decoration:underline;text-underline-offset:3px}
.account-menu .acc-login .login-menu-email:hover{background:none;color:#fff}
/* cartes : plus de cadre blanc au focus ; les boutons (+, ✕) restent au-dessus de l'affiche qui pivote */
.card{transform-style:flat}
.card:focus-visible{outline:none}
.card:focus-visible .card-inner{box-shadow:0 0 0 2px rgba(229,9,20,.85),0 8px 30px rgba(0,0,0,.7)}

/* ══════════════════════════════════════
   SÉLECTION DE PROFIL (nouvelle version)
══════════════════════════════════════ */
.pixel-bg-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
#profile-screen{background:var(--bg);gap:0;justify-content:safe center;align-items:center;flex-direction:column;overflow-y:auto;padding:96px 1.5rem 3rem;box-sizing:border-box}
#profile-screen > *:not(.pixel-bg-canvas){position:relative;z-index:1}
.ps-glow{position:absolute!important;left:50%;top:50%;width:min(900px,120vw);height:560px;transform:translate(-50%,-45%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(229,9,20,.2),rgba(229,9,20,0));pointer-events:none;z-index:0!important}
.ps-head{position:absolute!important;top:0;left:0;right:0;height:96px;display:flex;align-items:center;padding:0 3.5rem}
.ps-logo{font-family:var(--font-display);font-size:36px;letter-spacing:2px;color:#f4f1ec}
.ps-logo span{color:var(--red)}
.ps-intro{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;margin-bottom:3.5rem}
.ps-kicker{font-size:13px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:var(--red)}
#profile-screen .profile-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3.4rem,7.2vw,6.5rem);line-height:.95;letter-spacing:1px;text-transform:uppercase;color:#fff}
.ps-sub{margin:0;font-size:17px;font-weight:500;color:#b9b1ac}

/* cartes de profil */
#profile-screen .profiles-grid{gap:2.5rem;margin-bottom:3.5rem}
#profile-screen .profile-card{gap:1.1rem}
#profile-screen .profile-avatar{width:176px;height:176px;border-radius:30px;box-shadow:0 0 0 1px #2a1a1f;transition:transform .2s,box-shadow .2s}
#profile-screen .profile-avatar::before{display:none}
#profile-screen .profile-avatar-img,#profile-screen .profile-avatar-placeholder{border-radius:30px}
#profile-screen .profile-avatar-placeholder{font-size:4.2rem}
#profile-screen .profile-card:hover .profile-avatar,#profile-screen .profile-card:focus-visible .profile-avatar{transform:scale(1.06);box-shadow:0 0 0 3px var(--red),0 18px 60px rgba(229,9,20,.35)}
#profile-screen .profile-card:focus-visible{outline:none}
#profile-screen .profile-name{font-size:19px;font-weight:800;letter-spacing:1px;color:#8a7f7a}
#profile-screen .profile-card:hover .profile-name{color:#fff}
#profile-screen .profile-add .profile-avatar{box-shadow:none}
#profile-screen .profile-add .profile-avatar-placeholder{background:#0f080a;border:2px dashed #4a3238;color:#b9b1ac;font-size:3.4rem;font-weight:300;box-sizing:border-box}
#profile-screen .profile-add:hover .profile-avatar{box-shadow:none;transform:scale(1.04)}
#profile-screen .profile-add:hover .profile-avatar-placeholder{border-color:var(--red);color:#fff}
#profile-screen .profile-add .profile-name{font-weight:700}

/* mode « Gérer les profils » : crayon par-dessus la photo, ✕ rouge dans le coin */
#profile-screen .profile-edit-mode .profile-card:not(.profile-add) .profile-avatar::after{content:'';position:absolute;inset:0;border-radius:30px;
  background:rgba(7,4,6,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='none' stroke='white' stroke-width='2.5'/%3E%3Cg fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' transform='translate(20 20)'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/g%3E%3C/svg%3E") center/64px no-repeat}
#profile-screen .profile-edit-mode .profile-card{cursor:pointer}
#profile-screen .profile-edit-mode .profile-card:hover .profile-avatar{box-shadow:0 0 0 3px #fff}
#profile-screen .profile-card-actions{top:-10px;right:-10px}
#profile-screen .profile-action-btn.edit-btn{display:none}
#profile-screen .profile-action-btn.del-btn{width:32px;height:32px;font-size:.8rem;box-shadow:0 0 0 3px var(--bg)}
#profile-screen.ps-editing .profile-name{color:#fff}

/* boutons du bas */
#profile-screen .profile-screen-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
#profile-screen .profile-edit-mode-btn{display:inline-flex;align-items:center;gap:.6rem;height:48px;padding:0 1.5rem;border-radius:24px;border:1px solid #4a3238;background:#0f080a;
  color:#d8d0cb;font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
#profile-screen .profile-edit-mode-btn:hover{border-color:var(--red);color:#fff}
#profile-screen .profile-edit-mode-btn.active{background:var(--red);border-color:var(--red);color:#fff;padding:0 2.1rem}
#profile-screen .profile-edit-mode-btn.active svg{display:none}
#profile-screen .profile-account-email{margin-top:1rem;font-size:.8rem;color:#8a7f7a}

@media (max-width:600px){
  #profile-screen{padding:80px 1.25rem 2.5rem}
  .ps-head{height:72px;padding:0 1.25rem}
  .ps-logo{font-size:26px}
  .ps-intro{margin-bottom:2.2rem}
  .ps-sub{font-size:15px}
  #profile-screen .profiles-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.4rem;margin-bottom:2.2rem}
  #profile-screen .profile-avatar{width:132px;height:132px;border-radius:24px}
  #profile-screen .profile-avatar-img,#profile-screen .profile-avatar-placeholder,#profile-screen .profile-edit-mode .profile-card:not(.profile-add) .profile-avatar::after{border-radius:24px}
  #profile-screen .profile-name{font-size:16px}
}
#profile-screen{overflow-x:hidden}
.ps-glow{width:min(900px,100%)}

/* ══════════════════════════════════════
   MODIFIER LE PROFIL (page entière)
══════════════════════════════════════ */
#profile-editor-overlay{background:rgba(3,2,3,.8);backdrop-filter:none;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-y:auto}
#profile-editor-overlay.open{display:flex;animation:modalIn .22s ease}
.pe-head{flex-shrink:0;height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 3.5rem}
.pe-close{width:48px;height:48px;border-radius:50%;border:1px solid #4a3238;background:#0f080a;color:#f4f1ec;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s}
.pe-close:hover{border-color:var(--red)}
.pe-body{flex:1;display:flex;align-items:center;justify-content:center;gap:4.5rem;padding:0 3.5rem 3.5rem}
.pe-preview{width:340px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1.4rem;text-align:center}
.pe-avatar{width:260px;height:260px;border-radius:40px;overflow:hidden;box-shadow:0 0 0 4px var(--red),0 24px 80px rgba(229,9,20,.35);background:#150c0f}
.pe-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pe-avatar-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:6rem}
.pe-name{font-family:var(--font-display);font-size:52px;line-height:1;letter-spacing:1px;text-transform:uppercase;color:#fff;word-break:break-word;max-width:340px}
.pe-hint{font-size:14px;font-weight:600;color:#8a7f7a}
.pe-form{width:min(700px,100%);box-sizing:border-box;padding:2.25rem;border-radius:24px;background:rgba(12,7,9,.94);border:1px solid #2c1a1f;display:flex;flex-direction:column;gap:1.75rem}
.pe-field{display:flex;flex-direction:column;gap:.7rem}
.pe-label-row{display:flex;justify-content:space-between;align-items:baseline}
.pe-label{font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#8a7f7a}
.pe-count{font-size:12px;font-weight:700;color:#6e6460}
.pe-input{height:60px;box-sizing:border-box;padding:0 1.25rem;border-radius:14px;border:2px solid #3a2228;background:#150c0f;color:#fff;font:inherit;font-size:20px;font-weight:700;outline:none;transition:border-color .2s}
.pe-input:focus{border-color:var(--red)}
#profile-editor-overlay .profile-pp-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;max-height:356px;overflow-y:auto;padding:6px;margin:-6px;align-content:start}
#profile-editor-overlay .profile-pp-item{position:relative;width:auto;height:auto;aspect-ratio:1/1;border:none;border-radius:16px;box-shadow:0 0 0 1px #2c1a1f;opacity:.82;transition:transform .15s,opacity .15s,box-shadow .15s}
#profile-editor-overlay .profile-pp-item:hover{opacity:1;transform:scale(1.05)}
#profile-editor-overlay .profile-pp-item.selected{opacity:1;box-shadow:0 0 0 3px var(--red),0 8px 24px rgba(229,9,20,.35)}
#profile-editor-overlay .profile-pp-item.selected::after{content:'';position:absolute;right:4px;bottom:4px;width:22px;height:22px;border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.pe-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.pe-spacer{flex:1}
.pe-delete{display:flex;align-items:center;gap:.5rem;height:48px;padding:0 .9rem;border:none;background:none;color:#ff5a64;font-size:14px;font-weight:800;cursor:pointer;border-radius:24px}
.pe-delete:hover{background:rgba(255,90,100,.1)}
.pe-delete[hidden]{display:none}
#profile-editor-overlay .profile-editor-btn{height:52px;padding:0 1.8rem;border-radius:26px;font-size:14px;font-weight:800;letter-spacing:2px;text-transform:uppercase;opacity:1}
#profile-editor-overlay .profile-editor-btn.cancel{background:#0f080a;border:1px solid #4a3238;color:#d8d0cb}
#profile-editor-overlay .profile-editor-btn.cancel:hover{border-color:#8a7f7a;color:#fff}
#profile-editor-overlay .profile-editor-btn.save{background:var(--red);color:#fff;padding:0 2.2rem}
#profile-editor-overlay .profile-editor-btn.save:hover{filter:brightness(1.1)}
@media (max-width:1100px){
  .pe-body{flex-direction:column;gap:2rem;padding:0 1.5rem 2.5rem}
  .pe-preview{width:auto;flex-direction:row;gap:1.1rem;text-align:left;flex-wrap:wrap;justify-content:center}
  .pe-preview .ps-kicker{width:100%;text-align:center}
  .pe-avatar{width:110px;height:110px;border-radius:26px;box-shadow:0 0 0 3px var(--red),0 14px 40px rgba(229,9,20,.35)}
  .pe-name{font-size:38px}
  .pe-hint{display:none}
}
@media (max-width:600px){
  .pe-head{height:72px;padding:0 1.25rem}
  .pe-form{padding:1.25rem;border-radius:18px}
  #profile-editor-overlay .profile-pp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:44vh}
  .pe-actions{position:sticky;bottom:-1.25rem;margin:0 -1.25rem -1.25rem;padding:1rem 1.25rem;background:#0c0709;border-top:1px solid #2c1a1f;border-radius:0 0 18px 18px}
  .pe-delete{width:100%;justify-content:center}
  .pe-spacer{display:none}
  #profile-editor-overlay .profile-editor-btn{flex:1;padding:0 1rem}
}
/* pendant la modification : on ne garde que le fond « pixels » de la page derrière */
body:has(#profile-editor-overlay.open) #profile-screen > :not(.pixel-bg-canvas){visibility:hidden}
#profile-editor-overlay{background:rgba(3,2,3,.45)}
/* grille des photos : la hauteur vient de l'image carrée (évite les chevauchements sur téléphone) */
#profile-editor-overlay .profile-pp-item{aspect-ratio:auto;display:block;overflow:hidden;min-height:0}
#profile-editor-overlay .profile-pp-item img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block}
#profile-editor-overlay .profile-pp-grid{grid-auto-rows:max-content}

/* ══════════════════════════════════════
   PAGES FILMS / SÉRIES / ANIMATION (nouvelle version)
══════════════════════════════════════ */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#cat-view{padding:0 3% 3rem;min-height:60vh}
.cv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding:2.6rem 0 1.8rem;flex-wrap:wrap}
.cv-head-text{display:flex;flex-direction:column;gap:.6rem}
.cv-kicker{font-size:13px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:var(--red)}
.cv-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3.6rem,7.5vw,7rem);line-height:.9;letter-spacing:1px;text-transform:uppercase;color:#fff}
.cv-tabs{display:flex;gap:4px;padding:5px;border-radius:30px;background:#0f0a0c;border:1px solid #2c1d22}
.cv-tab{height:44px;padding:0 1.4rem;border:none;border-radius:22px;background:none;color:#b9b1ac;font-size:15px;font-weight:800;cursor:pointer;transition:background .2s,color .2s}
.cv-tab:hover{color:#fff}
.cv-tab.active{background:var(--red);color:#fff}
#cat-view #promo-banner-cat{margin:0 0 2.6rem}
.cv-label{font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#8a7f7a;margin-bottom:.9rem}
#cat-view .pills-wrapper{margin-bottom:0}
#cat-view .pills-wrapper .row-arrow{height:96px}
#pills-cat .genre-card{width:190px;height:96px;border-radius:16px;border:none;box-shadow:0 0 0 1px #2c1d22;opacity:.9}
#pills-cat .genre-card:hover{opacity:1;box-shadow:0 0 0 1px #5a3a40,0 10px 26px rgba(0,0,0,.55)}
#pills-cat .genre-card.active{opacity:1;box-shadow:0 0 0 3px var(--red),0 10px 30px rgba(229,9,20,.3)}
#pills-cat .genre-card-title{font-family:var(--font-display);font-weight:400;font-size:1.55rem;letter-spacing:.5px;text-transform:uppercase}
.cv-toolbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:2.2rem 0 1.3rem}
.cv-subtitle{margin:0;font-family:var(--font-display);font-weight:400;font-size:2.3rem;line-height:1;text-transform:uppercase;color:#fff}
.cv-spacer{flex:1}
.cv-select{position:relative;display:flex;align-items:center;gap:.5rem;height:44px;padding:0 .4rem 0 1rem;border-radius:22px;border:1px solid #3a2a2f;background:#0f0a0c;color:#d8d0cb}
.cv-select[hidden]{display:none}
.cv-select:focus-within{border-color:var(--red)}
.cv-select select{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d0cb' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .6rem center/12px no-repeat;
  border:none;outline:none;color:inherit;font:inherit;font-size:14px;font-weight:700;height:100%;padding:0 2rem 0 0;cursor:pointer}
.cv-select select option{background:#121218;color:#fff}
.cv-sort{border-color:#5a2a32;background:#1a0b0f;color:#fff}
.cv-grid{gap:1.8rem 1.25rem}
@media (max-width:700px){
  .cv-head{padding:1.6rem 0 1.2rem;gap:1rem}
  .cv-tabs{width:100%}
  .cv-tab{flex:1;padding:0 .5rem}
  #pills-cat .genre-card{width:140px;height:78px}
  #pills-cat .genre-card-title{font-size:1.15rem}
  .cv-toolbar{padding:1.6rem 0 1rem}
  .cv-subtitle{font-size:1.7rem;width:100%}
  .cv-spacer{display:none}
  .cv-select{height:40px;padding-left:.8rem}
  .cv-select select{font-size:13px}
}
@media (max-width:700px){
  .cv-toolbar{gap:.5rem}
  .cv-select{flex:1 1 calc(50% - .5rem);min-width:0}
  .cv-select select{width:100%;min-width:0;text-overflow:ellipsis}
  .cv-sort{flex-basis:100%}
}

/* ══ Fiche : distribution avec photos (TMDB) ══ */
.tp-cast-row{display:flex;gap:1rem;overflow-x:auto;padding:.3rem .2rem 1rem;scroll-snap-type:x proximity;scrollbar-width:thin}
.tp-actor{flex:0 0 118px;display:flex;flex-direction:column;gap:.45rem;text-decoration:none;color:inherit;scroll-snap-align:start}
.tp-actor-photo{position:relative;width:118px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:#15101a;box-shadow:0 0 0 1px rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}
.tp-actor-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.tp-actor-initials{font-family:var(--font-display);font-size:2rem;color:#4a3a48}
a.tp-actor:hover .tp-actor-photo{transform:translateY(-3px);box-shadow:0 0 0 2px var(--red),0 12px 30px rgba(229,9,20,.3)}
.tp-actor-name{font-size:.86rem;font-weight:800;color:#fff;line-height:1.25}
.tp-actor-role{font-size:.76rem;color:var(--text-dim);line-height:1.3;margin-top:-.2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:600px){.tp-actor{flex-basis:96px}.tp-actor-photo{width:96px}}
/* le « É » de SÉRIES ne touche plus « CATALOGUE » */
.cv-head-text{gap:.9rem}
.cv-title{line-height:1.02;padding-top:.08em}

/* ══════════════════════════════════════
   FICHE D'UN TITRE (nouvelle version)
══════════════════════════════════════ */
.tp-hero{position:relative;height:min(78vh,720px);min-height:580px;overflow:hidden}
.tp-hero .tp-backdrop{position:absolute;inset:0;height:auto}
.tp-hero .tp-backdrop::after{display:none}
.tp-hero .tp-backdrop img.loaded{opacity:.8}
.tp-hero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#050305 0%,rgba(5,3,5,.9) 32%,rgba(5,3,5,.35) 68%,rgba(5,3,5,.1) 100%),linear-gradient(0deg,#050305 0%,rgba(5,3,5,0) 42%)}
.tp-hero .tp-back{position:absolute;left:3.5%;top:1.6rem;z-index:3;height:44px;padding:0 1.1rem;border-radius:22px;background:rgba(10,6,8,.7);border:1px solid #3a2a2f;font-weight:800;backdrop-filter:blur(6px)}
.tp-admin{position:absolute;right:3.5%;top:1.6rem;z-index:3;display:flex;gap:.5rem}
.tp-admin-btn{height:44px;padding:0 1rem;border-radius:22px;background:rgba(10,6,8,.7);border:1px solid #3a2a2f;color:#f4f1ec;font-size:13px;font-weight:800;cursor:pointer;backdrop-filter:blur(6px)}
.tp-admin-btn:hover{border-color:#8a7f7a}
.tp-admin-btn.tp-danger{color:#ff6b74;border-color:#5a2a32}
.tp-hero-inner{position:absolute;left:3.5%;right:3.5%;bottom:3.2rem;z-index:2;display:flex;align-items:flex-end;gap:3rem}
.tp-hero .tp-poster{width:260px;flex-shrink:0;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);max-height:none}
.tp-hero-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.1rem;padding-bottom:.3rem}
.tp-tags{display:flex;gap:.5rem}
.tp-hero .tp-badge{background:var(--red);font-size:12px;letter-spacing:2px;padding:.35rem .7rem}
.tp-hero .tp-badge-new{background:#f4f1ec;color:#0a0608}
.tp-hero .tp-title{margin:0;padding:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,7vw,6.5rem);line-height:.95;letter-spacing:1px;text-transform:uppercase;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.5)}
.tp-hero .tp-title::after{display:none}
.tp-metaline{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;font-size:16px;font-weight:700;color:#d8d0cb}
.tp-meta-score{color:var(--gold)}
.tp-dot{color:#5a4f52}
.tp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.6rem}
.tp-btn{display:inline-flex;align-items:center;gap:.6rem;height:58px;padding:0 1.8rem;border:none;border-radius:14px;color:#fff;font-size:17px;font-weight:800;cursor:pointer;transition:transform .15s,filter .15s}
.tp-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}
.tp-btn:disabled{opacity:.45;cursor:not-allowed}
.tp-btn small{font-size:12px;font-weight:700;opacity:.85;margin-left:.2rem}
.tp-btn-play{background:#dc2626;padding:0 2.1rem}
.tp-btn-dl{background:#16a34a}
.tp-btn-ghost{background:rgba(20,14,16,.8);border:1px solid #4a3a3f;padding:0 1.4rem}
.tp-btn-ghost:hover{border-color:#8a7f7a}
.tp-icon-btn{width:58px;height:58px;border-radius:14px;background:rgba(20,14,16,.8);border:1px solid #4a3a3f;color:#f4f1ec;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,background .15s}
.tp-icon-btn:hover{border-color:#8a7f7a}
.tp-icon-btn.on{background:rgba(34,197,94,.12);border-color:#22c55e;color:#22c55e}

.tp-hero + .tp-wrap{padding-top:1.2rem}
.tp-wrap{display:flex;flex-direction:column;gap:3.2rem}
.tp-wrap .tp-h2{font-family:var(--font-display);font-weight:400;font-size:2.1rem;text-transform:uppercase;letter-spacing:.5px;margin:0 0 1rem}
.tp-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2.5rem;align-items:start}
.tp-intro .tp-desc{font-size:18px;line-height:1.7;color:#d8d0cb}
.tp-intro .tp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.tp-intro .tp-fact{padding:1.1rem 1.25rem;border-radius:16px;background:#0f0a0c;border:1px solid #2c1d22}
.tp-intro .tp-fact-k{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#8a7f7a;margin-bottom:.4rem}
.tp-intro .tp-fact-v{font-size:17px;font-weight:800;color:#fff}
.tp-wrap .tp-similar,.tp-wrap .tp-comments{margin-top:0}

@media (max-width:900px){
  .tp-hero{height:auto;min-height:0;padding-top:4.5rem}
  .tp-hero .tp-backdrop{height:320px;bottom:auto}
  .tp-hero-shade{background:linear-gradient(0deg,#050305 38%,rgba(5,3,5,.2) 100%)}
  .tp-hero-inner{position:relative;left:auto;right:auto;bottom:auto;padding:9rem 1.1rem 0;flex-wrap:wrap;gap:1rem}
  .tp-hero .tp-poster{width:110px;border-radius:12px}
  .tp-hero-text{flex-basis:calc(100% - 130px)}
  .tp-hero .tp-title{font-size:clamp(2.2rem,10vw,3rem)}
  .tp-metaline{font-size:13px;gap:.5rem}
  .tp-actions{width:100%}
  .tp-btn{flex:1 1 auto;justify-content:center;height:52px;padding:0 1rem;font-size:15px}
  .tp-icon-btn{width:52px;height:52px}
  .tp-hero .tp-back{left:1rem;top:1rem;width:44px;padding:0;justify-content:center;font-size:0}
  .tp-admin{right:1rem;top:1rem}
  .tp-intro{grid-template-columns:1fr;gap:1.5rem}
  .tp-intro .tp-desc{font-size:15px}
  .tp-wrap{gap:2.2rem}
  .tp-wrap .tp-h2{font-size:1.6rem}
}
@media (max-width:900px){
  .tp-hero-inner{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:1rem;row-gap:.45rem;align-items:end;padding-top:8.5rem}
  .tp-hero .tp-poster{width:104px;grid-row:1 / span 3;align-self:end}
  .tp-hero-text{display:contents}
  .tp-tags,.tp-hero .tp-title,.tp-metaline{grid-column:2}
  .tp-actions{grid-column:1 / -1;margin-top:1rem;gap:.6rem}
  .tp-actions .tp-btn-play,.tp-actions .tp-btn-dl{flex:1 1 40%}
  .tp-actions .tp-btn-ghost{flex:1 1 auto}
}
/* boutons Films / Séries / Animation : remontés, au milieu du titre */
.cv-head .cv-tabs{align-self:center;margin-top:1.6rem}
@media (max-width:700px){.cv-head .cv-tabs{align-self:stretch;margin-top:0}}

/* ══════════════════════════════════════
   PAGE TÉLÉCHARGEMENTS (nouvelle version)
══════════════════════════════════════ */
#tel-view{padding:0 3% 3rem;min-height:60vh}
.dl-head{display:flex;flex-direction:column;gap:.8rem;padding:2.6rem 0 0}
.dl-kicker{font-size:13px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:#22c55e}
.dl-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,7vw,6.5rem);line-height:1.02;padding-top:.06em;letter-spacing:1px;text-transform:uppercase;color:#fff}
.dl-sub{margin:0;font-size:17px;color:#b9b1ac}
.dl-tools{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:2rem 0 1.6rem}
.dl-tabs{display:flex;gap:4px;padding:5px;border-radius:30px;background:#0f0a0c;border:1px solid #2c1d22}
.dl-tab{height:42px;padding:0 1.25rem;border:none;border-radius:21px;background:none;color:#b9b1ac;font-size:15px;font-weight:800;cursor:pointer;transition:background .2s,color .2s}
.dl-tab:hover{color:#fff}
.dl-tab.active{background:#16a34a;color:#fff}
.dl-search{position:relative;display:flex;align-items:center;width:320px;max-width:100%;height:50px;color:#8a7f7a}
.dl-search svg{position:absolute;left:18px;pointer-events:none}
.dl-search input{width:100%;height:100%;box-sizing:border-box;padding:0 18px 0 46px;border-radius:25px;background:#0f0a0c;border:1px solid #2c1d22;color:#f4f1ec;font:inherit;font-size:15px;outline:none}
.dl-search input:focus{border-color:#16a34a}
.dl-spacer{flex:1}
.dl-views{display:flex;gap:4px;padding:4px;border-radius:12px;background:#0f0a0c;border:1px solid #2c1d22}
.dl-view{width:40px;height:38px;border:none;border-radius:9px;background:none;color:#8a7f7a;display:flex;align-items:center;justify-content:center;cursor:pointer}
.dl-view.active{background:#2a2226;color:#fff}

.dl-list{display:flex;flex-direction:column;gap:.75rem}
.dl-row{display:flex;align-items:center;gap:1.5rem;width:100%;padding:.9rem 1.4rem .9rem .9rem;border-radius:18px;background:#0d090b;border:1px solid #231a1e;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.dl-row:hover{border-color:#2f6b43;background:#0f0c0d;transform:translateY(-1px)}
.dl-row-poster{width:76px;height:114px;flex-shrink:0;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px #2c1d22;display:flex;align-items:center;justify-content:center}
.dl-row-poster img{width:100%;height:100%;object-fit:cover;display:block}
.dl-row-ph{font-size:1.8rem}
.dl-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.dl-row-top{display:flex;align-items:center;gap:.65rem;min-width:0}
.dl-row-type{flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:2px;padding:.2rem .5rem;border-radius:5px;background:#1c1418;border:1px solid #3a2a2f;color:#d8d0cb}
.dl-row-title{font-family:var(--font-display);font-size:1.9rem;line-height:1.05;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-row-meta{font-size:14px;font-weight:600;color:#9a918c}
.dl-row-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.dl-chip{font-size:12px;font-weight:800;padding:.3rem .65rem;border-radius:20px;background:#15201a;border:1px solid #244a31;color:#7ee2a0}
.dl-row-count{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;margin-right:.6rem}
.dl-row-count strong{font-family:var(--font-display);font-weight:400;font-size:2.1rem;line-height:1;color:#22c55e}
.dl-row-count small{font-size:12px;font-weight:700;color:#8a7f7a}
.dl-row-btn{display:inline-flex;align-items:center;gap:.6rem;height:52px;padding:0 1.4rem;border-radius:14px;background:#16a34a;color:#fff;font-size:15px;font-weight:800;flex-shrink:0}
.dl-row:hover .dl-row-btn{filter:brightness(1.1)}
.tel-load-more{display:block;width:100%;margin:1.2rem 0;padding:1rem;border-radius:14px;background:#0d090b;border:1px solid #2f6b43;color:#22c55e;font-size:15px;font-weight:800;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.tel-load-more:hover{background:#0f120e;border-color:#4ade80}

.dl-grid{gap:1.8rem 1.25rem}
.dl-card-badge{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:10px;background:rgba(5,3,5,.85);font-size:12px;font-weight:800;color:#fff;pointer-events:none}
.dl-card-badge span:first-child{color:#22c55e}
.card:hover .dl-card-badge{opacity:0;transition:opacity .2s}

.dl-empty{text-align:center;padding:4rem 2rem;color:var(--text-dim)}
.dl-empty-ico{font-size:2.6rem;color:#22c55e;margin-bottom:.8rem}
.dl-empty-title{font-size:1.05rem;font-weight:800;color:#fff;margin-bottom:.4rem}
.dl-empty-text{font-size:.9rem}

@media (max-width:760px){
  .dl-head{padding-top:1.6rem}
  .dl-sub{font-size:14px}
  .dl-tools{padding:1.2rem 0 1rem;gap:.6rem}
  .dl-tabs{width:100%}
  .dl-tab{flex:1;padding:0 .4rem;font-size:13px}
  .dl-search{width:100%;order:2}
  .dl-spacer{display:none}
  .dl-tools .cv-select{order:3;flex:1}
  .dl-views{order:4}
  .dl-row{gap:.9rem;padding:.6rem .9rem .6rem .6rem}
  .dl-row-poster{width:58px;height:87px}
  .dl-row-title{font-size:1.25rem;white-space:normal}
  .dl-row-type{display:none}
  .dl-row-meta{font-size:12px}
  .dl-row-chips .dl-chip:nth-child(n+4){display:none}
  .dl-row-count,.dl-row-btn span{display:none}
  .dl-row-btn{width:44px;height:44px;padding:0;justify-content:center;border-radius:12px}
}

/* Tendances : chiffres remplis de blanc */
#row-all .card-rank{color:#ffffff;-webkit-text-stroke:3px #5a5358}
#row-all .card:hover .card-rank{color:#ffffff;-webkit-text-stroke-color:var(--red)}

/* ══════════════════════════════════════
   PAGE SAGAS (nouvelle version)
══════════════════════════════════════ */
#sagas-view{padding:0 3% 3rem;min-height:60vh}
.sgp-head{display:flex;flex-direction:column;gap:.8rem;padding:2.6rem 0 0}
.sgp-kicker{font-size:13px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:#e50914}
.sgp-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3.4rem,7.5vw,6.5rem);line-height:1.02;padding-top:.06em;letter-spacing:1px;text-transform:uppercase;color:#fff}
.sgp-sub{margin:0;font-size:17px;color:#b9b1ac}

.sgp-featured{position:relative;margin-top:2.2rem;min-height:440px;border-radius:24px;overflow:hidden;background:#281416;border:1px solid #3a1c22;display:flex;align-items:center}
.sgp-featured[hidden]{display:none}
.sgp-feat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sgp-feat-bg:not([src]){display:none}
.sgp-feat-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0a0608 0%,rgba(10,6,8,.9) 40%,rgba(10,6,8,.25) 100%)}
.sgp-feat-text{position:relative;z-index:1;max-width:580px;padding:2.6rem 3rem;display:flex;flex-direction:column;gap:1rem}
.sgp-feat-badge{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;background:#e50914;color:#fff;padding:.35rem .65rem;border-radius:5px}
.sgp-feat-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,5.2vw,5rem);line-height:.98;text-transform:uppercase;color:#fff}
.sgp-feat-meta{font-size:16px;font-weight:700;color:#d8d0cb}
.sgp-feat-meta span{color:#5a4f52;margin:0 .2rem}
.sgp-feat-desc{margin:0;font-size:15px;line-height:1.6;color:#cfc6c9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sgp-feat-btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.4rem}
.sgp-feat-btns .tp-btn{height:54px}
.sgp-feat-posters{position:absolute;right:2.4rem;bottom:2.2rem;z-index:1;display:flex;gap:.6rem}
.sgp-feat-poster{position:relative;width:78px;aspect-ratio:2/3;border:none;padding:0;border-radius:9px;overflow:hidden;background:#2a1c1f;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);transition:transform .15s,box-shadow .15s}
.sgp-feat-poster:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.7),0 0 0 2px #e50914}
.sgp-feat-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sgp-feat-poster.seen::after{content:'✓';position:absolute;right:4px;bottom:4px;z-index:2;width:18px;height:18px;border-radius:50%;background:#22c55e;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}
.sgp-feat-num{position:absolute;left:6px;top:3px;z-index:2;font-family:var(--font-display);font-size:22px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8)}

.sgp-tools{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:2.2rem 0 1.4rem}
.sgp-search input:focus{border-color:#e50914}
.sgp-admin-btn{height:46px;padding:0 1.1rem;border-radius:23px;border:1px solid #58323a;background:#1a0e10;color:#f5dcdd;font-size:14px;font-weight:800;cursor:pointer}
.sgp-admin-btn:hover{border-color:#e50914}
.sgp-admin-add{background:#e50914;border-color:#e50914;color:#fff}

/* cartes */
#sagas-view .sg-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem}
#sagas-view .sg-card{border-radius:20px;background:#0d0a0b;border-color:#2c1a1e}
#sagas-view .sg-card:hover{border-color:#7a2a32;transform:translateY(-3px)}
#sagas-view .sg-banner{aspect-ratio:auto;height:210px;background:#281416}
#sagas-view .sg-name{font-family:var(--font-display);font-weight:400;font-size:2.1rem;line-height:1;text-transform:uppercase}
#sagas-view .sg-count{font-size:13px;font-weight:700;color:#d8d0cb;margin-top:.35rem}
.sg-stack{position:absolute;right:14px;bottom:14px;z-index:2;display:flex}
.sg-stack-item{position:relative;width:40px;height:60px;margin-left:-12px;border-radius:6px;overflow:hidden;background:#30222a;box-shadow:0 6px 16px rgba(0,0,0,.6),0 0 0 2px #0d0a0b}
.sg-stack-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#sagas-view .sg-body{padding:1rem 1.25rem 1.25rem;gap:.85rem}
#sagas-view .sg-desc{margin:0;font-size:14px;line-height:1.55;color:#b9b1ac;-webkit-line-clamp:2}
.sg-progress{display:flex;flex-direction:column;gap:.4rem}
.sg-progress-top{display:flex;justify-content:space-between;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8a7f7a}
.sg-progress-top .is-on{color:#ff6b73}
.sg-progress-top .is-done{color:#22c55e}
.sg-progress-bar{height:6px;border-radius:3px;background:#2a1a1d;overflow:hidden}
.sg-progress-bar span{display:block;height:100%;border-radius:3px;background:#e50914}
#sagas-view .sg-actions{display:flex;gap:.5rem;margin:0}
#sagas-view .sg-btn{height:44px;border-radius:12px;background:#1c1012;border:1px solid #46262c;font-size:14px;font-weight:800;padding:0 1rem}
#sagas-view .sg-btn:hover{border-color:#e50914}
#sagas-view .sg-btn-go{flex:1}
#sagas-view .sg-btn-list{width:44px;padding:0;font-size:18px}
@media (max-width:900px){
  .sgp-featured{min-height:0;flex-direction:column;align-items:stretch}
  .sgp-feat-shade{background:linear-gradient(0deg,#0a0608 45%,rgba(10,6,8,.15) 100%)}
  .sgp-feat-text{padding:9rem 1.2rem 1.2rem}
  .sgp-feat-posters{display:none}
  .sgp-feat-btns .tp-btn{flex:1;justify-content:center}
  .sgp-search{width:100%}
  .sgp-tools .dl-spacer{display:none}
  #sagas-view .sg-grid{grid-template-columns:1fr}
  #sagas-view .sg-banner{height:170px}
}

/* ══ WHAT TO WATCH (refonte) ══ */
#wtw-view{padding:0 3% 3rem;min-height:60vh}
.wtw-wrap{display:flex;flex-direction:column;gap:2.2rem}
.wtw-head{display:flex;align-items:flex-end;gap:2.5rem;padding-top:2.6rem}
.wtw-head-text{display:flex;flex-direction:column;gap:.8rem;flex:1;min-width:0}
.wtw-kicker{font-size:13px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:var(--red)}
.wtw-h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3.4rem,7.5vw,6.5rem);line-height:1.02;padding-top:.06em;letter-spacing:1px;text-transform:uppercase;color:#fff}
.wtw-sub{margin:0;font-size:17px;color:#b9b1ac}
.wtw-stats{display:flex;gap:10px;padding-bottom:6px}
.wtw-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:84px;border-radius:16px;background:#0f0a0c;border:1px solid #2c1d22}
.wtw-stat b{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1;color:#fff}
.wtw-stat small{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#8a7f7a;margin-top:6px}

.wtw-main{display:grid;grid-template-columns:380px minmax(0,1fr);gap:24px;align-items:stretch}
.wtw-filters{display:flex;flex-direction:column;gap:26px;padding:28px;border-radius:24px;background:#0d0a0c;border:1px solid #241a1e}
.wtw-filters-top{display:flex;justify-content:space-between;align-items:center}
.wtw-filters-title{font-family:var(--font-display);font-size:28px;text-transform:uppercase;letter-spacing:.5px}
.wtw-reset{height:36px;padding:0 14px;border-radius:18px;border:1px solid #3a2a2f;background:transparent;color:#b9b1ac;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:color .2s,border-color .2s}
.wtw-reset:hover{color:#fff;border-color:#6a4a52}
.wtw-group{display:flex;flex-direction:column;gap:12px}
.wtw-label{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#8a7f7a}
.wtw-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:14px;background:#160f12}
.wtw-seg-btn{height:44px;border-radius:10px;border:none;background:transparent;color:#b9b1ac;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:background .2s,color .2s}
.wtw-seg-btn:hover{color:#fff}
.wtw-seg-btn.active{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(229,9,20,.35)}
.wtw-chips{display:flex;flex-wrap:wrap;gap:8px}
.wtw-chip{height:36px;padding:0 14px;border-radius:18px;border:1px solid #2c1d22;background:#120c0e;color:#b9b1ac;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.wtw-chip:hover{color:#fff;border-color:#5a3a42}
.wtw-chip.active{color:#fff;background:#2a0c10;border-color:var(--red)}
.wtw-eras{display:flex;flex-direction:column;gap:6px}
.wtw-era{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 14px;border-radius:12px;border:1px solid #241a1e;background:#120c0e;color:#b9b1ac;font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-align:left;transition:color .2s,border-color .2s,background .2s}
.wtw-era:hover{color:#fff;border-color:#5a3a42}
.wtw-era-dot{width:16px;height:16px;border-radius:50%;box-sizing:border-box;border:2px solid #4a3a3f;flex-shrink:0}
.wtw-era.active{color:#fff;background:#2a0c10;border-color:var(--red)}
.wtw-era.active .wtw-era-dot{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 3px #2a0c10}

.wtw-stage{position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#0a0709;border:1px solid #241a1e;min-width:0}
.wtw-selection{display:flex;align-items:center;gap:10px;padding:22px 28px 0;flex-wrap:wrap}
.wtw-sel-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red)}
.wtw-sel-label{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#d8d0cb}
#wtw-sel-text{font-size:13px;font-weight:700;color:#8a7f7a}
.wtw-viewport{position:relative;flex:1;min-height:400px;margin-top:10px;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.wtw-reel{display:flex;align-items:center;gap:18px;padding:0 18px;will-change:transform}
.wtw-card{flex:0 0 168px;height:252px;border-radius:14px;overflow:hidden;background:#1a1216;box-shadow:0 10px 30px rgba(0,0,0,.6);transition:transform .35s,box-shadow .35s}
.wtw-card img{width:100%;height:100%;object-fit:cover;display:block}
.wtw-card.won{transform:scale(1.3);position:relative;z-index:2;box-shadow:0 0 0 3px var(--red),0 0 50px rgba(229,9,20,.45)}
.wtw-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8a7f7a;font-size:15px}
.wtw-stage.has-reel .wtw-empty{display:none}
.wtw-marker{position:absolute;inset:4px auto 4px 50%;width:28px;transform:translateX(-50%);pointer-events:none;z-index:3}
.wtw-marker::before,.wtw-marker::after{content:'';position:absolute;left:0;border-left:14px solid transparent;border-right:14px solid transparent}
.wtw-marker::before{top:0;border-top:18px solid var(--red)}
.wtw-marker::after{bottom:0;border-bottom:18px solid var(--red)}
.wtw-spin-row{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 28px 30px}
.wtw-launch{display:flex;align-items:center;justify-content:center;gap:14px;width:min(360px,100%);height:76px;border-radius:20px;border:none;background:var(--red);box-shadow:0 7px 0 #7a0710,0 18px 40px rgba(229,9,20,.35);color:#fff;font-family:var(--font-display);font-size:34px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:transform .12s,box-shadow .12s,filter .2s}
.wtw-launch:hover:not(:disabled){filter:brightness(1.08)}
.wtw-launch:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 #7a0710,0 10px 24px rgba(229,9,20,.3)}
.wtw-launch:disabled{cursor:wait;filter:saturate(.6)}
.wtw-launch:disabled svg{animation:wtwTurn 1s linear infinite}
@keyframes wtwTurn{to{transform:rotate(360deg)}}
.wtw-hint{font-size:13px;color:#8a7f7a;text-align:center}
.wtw-msg{color:var(--text-dim);text-align:center;padding:1rem}

.wtw-pick{position:relative;border-radius:24px;overflow:hidden;background:#1a0f13;border:1px solid #3a1c24;animation:hbIn .5s ease both}
.wtw-pick-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px) saturate(1.1);transform:scale(1.06);opacity:.7}
.wtw-pick-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0a0608 0%,rgba(10,6,8,.92) 50%,rgba(10,6,8,.55) 100%)}
.wtw-pick-inner{position:relative;display:flex;gap:44px;padding:40px 48px}
.wtw-pick-poster{flex-shrink:0;width:240px;height:360px;object-fit:cover;border-radius:16px;box-shadow:0 0 0 3px var(--red),0 24px 60px rgba(0,0,0,.7)}
.wtw-pick-body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:760px;min-width:0;padding-top:6px}
.wtw-pick-badge{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;background:var(--red);color:#fff;padding:5px 10px;border-radius:5px}
.wtw-pick-genres{display:flex;gap:8px;flex-wrap:wrap}
.wtw-pick-genres span{height:30px;padding:0 12px;border-radius:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;font-size:13px;font-weight:700;color:#f4f1ec}
.wtw-pick-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.6rem,5vw,4.75rem);line-height:1;padding-top:.05em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.wtw-pick-meta{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:#d8d0cb}
.wtw-pick-meta i{font-style:normal;color:#5a4f52}
.wtw-star{color:#fbbf24}
.wtw-pick-desc{margin:0;font-size:15px;line-height:1.65;color:#cfc6c9;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.wtw-pick-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.wtw-btn{display:inline-flex;align-items:center;gap:10px;height:54px;box-sizing:border-box;padding:0 22px;border-radius:14px;background:rgba(20,12,16,.85);border:1px solid #4a2e38;color:#f4f1ec;font:inherit;font-size:16px;font-weight:800;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.wtw-btn:hover{border-color:var(--red);transform:translateY(-2px)}
.wtw-btn-main{background:#f4f1ec;border-color:#f4f1ec;color:#0a0608;padding:0 26px}
.wtw-btn-main:hover{background:#fff;border-color:#fff;color:#0a0608}
.wtw-btn-ghost{background:transparent}

.wtw-history{display:flex;flex-direction:column;gap:18px}
.wtw-history[hidden]{display:none}
.wtw-history-head{display:flex;align-items:baseline;gap:14px}
.wtw-history-head h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:32px;text-transform:uppercase}
.wtw-history-head span{font-size:13px;color:#8a7f7a}
.wtw-history-row{display:flex;gap:16px;overflow-x:auto;padding:6px 2px;scrollbar-width:thin}
.wtw-hist{flex:0 0 146px;display:flex;flex-direction:column;gap:8px;padding:0;border:none;background:none;color:#f4f1ec;font:inherit;text-align:left;cursor:pointer}
.wtw-hist img{width:146px;height:219px;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.06);transition:transform .25s,box-shadow .25s}
.wtw-hist:hover img{transform:translateY(-4px);box-shadow:0 0 0 2px var(--red)}
.wtw-hist span{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:1100px){
  .wtw-main{grid-template-columns:1fr}
}
@media (max-width:700px){
  .wtw-head{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .wtw-stat{width:100px;height:70px}
  .wtw-filters{padding:20px}
  .wtw-viewport{min-height:260px}
  .wtw-card{flex-basis:120px;height:180px}
  .wtw-launch{height:64px;font-size:28px}
  .wtw-pick-inner{flex-direction:column;gap:24px;padding:24px}
  .wtw-pick-poster{width:160px;height:240px}
  .wtw-btn{height:48px;font-size:15px}
  .wtw-hist{flex-basis:112px}
  .wtw-hist img{width:112px;height:168px}
}

/* ══════════════════════════════════════
   PAGE EXTRAITS (nouvelle version) : à suivre | téléphone | en ce moment
══════════════════════════════════════ */
#extraits-view{padding:0 3% 2.5rem}
.exp-layout{display:grid;grid-template-columns:320px minmax(0,1fr) 340px;gap:2rem;align-items:start;padding-top:2.2rem}
.exp-left,.exp-right{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.exp-kicker{font-size:13px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:var(--red)}
.exp-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3.2rem,6vw,5.6rem);line-height:1.02;padding-top:.06em;letter-spacing:1px;text-transform:uppercase;color:#fff}
.exp-sub{margin:0;font-size:15px;line-height:1.55;color:#b9b1ac}
.exp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:14px;background:#160f12;margin-top:.2rem}
.exp-tabs .ex-toggle-btn{height:44px;border-radius:10px;border:none;background:transparent;color:#b9b1ac;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:background .2s,color .2s;box-shadow:none;padding:0}
.exp-tabs .ex-toggle-btn:hover{color:#fff}
.exp-tabs .ex-toggle-btn.active{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(229,9,20,.35)}
.exp-queue-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:.5rem;font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#8a7f7a}
#exp-pos{font-size:13px;letter-spacing:0;text-transform:none;font-weight:700}
#exp-pos b{color:#f4f1ec}
.exp-queue{display:flex;flex-direction:column;gap:8px}
.exp-queue-empty{font-size:14px;color:#8a7f7a;padding:.6rem 0}
.exp-q{display:flex;align-items:center;gap:14px;width:100%;padding:8px;border-radius:14px;background:#0d0a0c;border:1px solid #1e1518;color:#f4f1ec;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.exp-q:hover{border-color:#5a3a42}
.exp-q.current{background:#1c0b0e;border-color:var(--red)}
.exp-q-img{flex-shrink:0;width:54px;height:80px;border-radius:8px;overflow:hidden;background:#1a1216;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.exp-q-img img{width:100%;height:100%;object-fit:cover;display:block}
.exp-q-txt{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.exp-q-tag{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#6e6460}
.exp-q.current .exp-q-tag{color:var(--red)}
.exp-q-title{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-q-meta{font-size:12px;font-weight:600;color:#8a7f7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* centre : téléphone + actions */
.exp-center{min-width:0}
#extraits-view .extraits-stage{min-height:0;gap:1.6rem}
#extraits-view .extraits-phone{--ph-h:min(calc(100vh - var(--nav-h, 70px) - 5rem),780px)}
#extraits-view .extraits-ambient{background-color:rgba(229,9,20,.35)}
#extraits-view .extraits-ambient:not(.on){opacity:.22;background-image:none}

.extraits-side-actions{gap:14px}
.extraits-side-actions .ex-count{position:static;transform:none;margin:0;font-size:12px;font-weight:800;color:#f4f1ec}
.ex-like-btn,.ex-toggle-icon{flex-direction:column;gap:6px;width:64px;height:auto;min-height:64px;padding:10px 0;border-radius:18px;background:#120c0e;box-shadow:inset 0 0 0 1px #2c1d22;transition:box-shadow .2s,background .2s}
.ex-like-btn:hover,.ex-toggle-icon:hover{box-shadow:inset 0 0 0 1px #5a3a42}
.ex-like-btn .ex-heart{width:28px;height:28px}
.ex-like-btn.liked{box-shadow:inset 0 0 0 1px var(--red)}
.ex-like-btn.liked > .ex-heart{fill:var(--red);filter:drop-shadow(0 0 10px rgba(229,9,20,.6))}
@keyframes exGrosseur{0%{width:40px;height:40px;fill:var(--red)}100%{width:28px;height:28px;fill:var(--red)}}
.ex-toggle-icon{--size:26px}
.ex-toggle-icon svg{position:static}
.ex-save{--color:#f4f1ec}
.ex-save.saved{--color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}

/* volume : réglette fine rouge + bouton son en dessous */
.ex-volume{width:64px;height:150px;border-radius:18px 18px 0 0;background:#120c0e;box-shadow:inset 1px 1px 0 #2c1d22,inset -1px 0 0 #2c1d22;margin-bottom:-14px}
.ex-volume .slider{width:120px;height:32px;top:calc(50% + 4px)}
.ex-volume .level{background:transparent;box-shadow:none;border-radius:0;overflow:visible;--fill:100%}
.ex-volume .level::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--red) var(--fill),#2c1d22 var(--fill))}
.ex-volume .level::-moz-range-track{height:6px;border-radius:3px;background:#2c1d22}
.ex-volume .level::-moz-range-progress{height:6px;border-radius:3px;background:var(--red)}
.ex-volume .level::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.ex-volume .level::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.ex-volume .volume{display:none}
.ex-sound{border-radius:0 0 18px 18px;box-shadow:inset 1px -1px 0 #2c1d22,inset -1px 0 0 #2c1d22}
.ex-sound:hover{box-shadow:inset 1px -1px 0 #2c1d22,inset -1px 0 0 #2c1d22;background:#1a1114}
.ex-sound .ex-count{font-weight:700;color:#b9b1ac}

.ex-nav-arrows{gap:10px;margin-top:6px}
.ex-nav-arrow{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid #3a2a2f;background:#0f0a0c}
.ex-nav-arrow.ex-nav-next{border:none;background:var(--red);box-shadow:0 8px 22px rgba(229,9,20,.4)}
.ex-nav-arrow.ex-nav-next:hover{background:#ff1f2b;border:none}

/* droite : admin + fiche + raccourcis */
.exp-admin{margin:0;justify-content:flex-end;gap:10px}
.exp-admin .nav-btn-add,.exp-admin .nav-btn-add.ex-autofill-btn{margin:0;height:40px;padding:0 14px;border-radius:20px;font-size:13px}
.exp-admin .nav-btn-add.ex-autofill-btn{background:#0f0a0c;border:1px solid #3a2a2f;color:#d8d0cb}
.exp-admin-label{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#6e6460;margin-right:auto}
.exp-now{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:24px;background:#0d0a0c;border:1px solid #241a1e}
.exp-now-label,.exp-keys-title{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#8a7f7a}
.exp-now-empty{margin:0;font-size:14px;color:#8a7f7a}
.exp-now-top{display:flex;gap:16px}
.exp-now-poster{flex-shrink:0;width:110px;height:165px;border-radius:12px;overflow:hidden;background:#1a1216;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.6)}
.exp-now-poster img{width:100%;height:100%;object-fit:cover;display:block}
.exp-now-info{display:flex;flex-direction:column;gap:8px;min-width:0}
.exp-now-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1;padding-top:.05em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.exp-now-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#d8d0cb}
.exp-now-meta i{font-style:normal;color:#5a4f52}
.exp-star{color:#fbbf24}
.exp-now-genres{font-size:13px;font-weight:600;color:#8a7f7a}
.exp-now-desc{margin:0;font-size:14px;line-height:1.6;color:#cfc6c9;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.exp-now-btns{display:flex;flex-direction:column;gap:10px}
.exp-now-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.exp-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 12px;border-radius:14px;border:1px solid #4a2e38;background:#140c10;color:#f4f1ec;font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:border-color .2s,background .2s}
.exp-btn:hover{border-color:var(--red)}
.exp-btn.on{border-color:var(--red);background:#2a0c10}
.exp-btn-main{height:52px;background:#f4f1ec;border-color:#f4f1ec;color:#0a0608;font-size:15px}
.exp-btn-main:hover{background:#fff;border-color:#fff}
.exp-btn-ghost{background:transparent}
.exp-keys{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:18px;background:#0a0709;border:1px solid #1e1518}
.exp-key{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#b9b1ac}
.exp-key kbd{min-width:30px;height:28px;padding:0 8px;box-sizing:border-box;border-radius:7px;background:#1a1215;border:1px solid #3a2a2f;border-bottom-width:3px;display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:12px;font-weight:800;color:#f4f1ec}

@media (max-width:1280px){
  .exp-layout{grid-template-columns:280px minmax(0,1fr) 300px;gap:1.4rem}
}
@media (max-width:1100px){
  .exp-layout{grid-template-columns:minmax(0,1fr)}
  .exp-left{order:0}
  .exp-center{order:1}
  .exp-right{order:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
  .exp-right .exp-admin{grid-column:1/-1}
  .exp-queue{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .exp-q{flex:0 0 240px}
  #extraits-view .extraits-phone{--ph-h:min(78vh,720px)}
  .exp-keys{display:none}
}
@media (max-width:720px){
  .exp-title{font-size:3rem}
  .ex-volume{display:none}
  .ex-sound{border-radius:18px;box-shadow:inset 0 0 0 1px #2c1d22}
  .extraits-side-actions{flex-direction:row;gap:10px}
}

/* Extraits : clic sur la vidéo = pause, on affiche alors le bouton lecture */
.extrait-media-local{cursor:pointer}
.extrait-media-local .extrait-play-overlay{display:none;z-index:3}
.extrait-media.is-paused .extrait-play-overlay,.extrait-media.is-paused:has(iframe.extrait-yt) .extrait-play-overlay{display:flex;z-index:3}

/* ══════════════════════════════════════
   PAGE NOUS SOUTENIR (nouvelle version)
══════════════════════════════════════ */
#support-view{padding:0 3% 3rem;min-height:60vh}
.sp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:4rem;align-items:center;padding-top:3.4rem}
.sp-hero-text{display:flex;flex-direction:column;gap:1.1rem}
.sp-kicker{font-size:13px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:var(--red)}
.sp-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3.6rem,8vw,7rem);line-height:.98;padding-top:.06em;letter-spacing:1px;text-transform:uppercase;color:#fff}
.sp-sub{margin:0;max-width:560px;font-size:18px;line-height:1.6;color:#b9b1ac}
.sp-promises{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.sp-promises li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:#f4f1ec}
.sp-tick{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:#2a0c10;box-shadow:inset 0 0 0 1px var(--red);color:var(--red);display:flex;align-items:center;justify-content:center}

.sp-card{display:flex;flex-direction:column;gap:22px;padding:36px;border-radius:28px;background:#0d0a0c;border:1px solid #3a1c24;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 80px rgba(229,9,20,.12)}
.sp-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sp-card-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:34px;text-transform:uppercase;color:#fff}
.sp-secure{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#8a7f7a}
#support-view .sp-label{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#8a7f7a;margin-bottom:-12px}
#support-view .sp-label::before{display:none}
.sp-amounts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sp-amount{height:58px;border-radius:14px;border:1px solid #2c1d22;background:#120c0e;color:#fff;font-family:var(--font-display);font-size:24px;letter-spacing:.5px;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.sp-amount:hover{border-color:#6a3a44}
.sp-amount:active{transform:scale(.96)}
.sp-amount.active{background:#2a0c10;border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.sp-amount-free{font-size:20px}
.sp-paypal{display:flex;align-items:center;justify-content:center;gap:12px;height:64px;border-radius:16px;background:#fff;color:#003087;font-size:18px;font-weight:800;text-decoration:none;box-shadow:0 14px 30px rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s}
.sp-paypal:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(0,0,0,.5);color:#003087}
.sp-note{text-align:center;font-size:13px;color:#8a7f7a;margin-top:-8px}
.sp-note b{color:#d8d0cb}
.sp-sep{height:1px;background:#241a1e}
.sp-thanks{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.5;color:#b9b1ac}
.sp-thanks svg{flex-shrink:0;color:var(--red)}

.sp-section{display:flex;flex-direction:column;gap:24px;padding-top:4.5rem}
.sp-h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,4vw,3rem);line-height:1.05;padding-top:.05em;text-transform:uppercase;color:#fff}
.sp-h2-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sp-h2-row span{font-size:15px;color:#8a7f7a}
.sp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sp-why{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:22px;background:#0d0a0c;border:1px solid #241a1e}
.sp-why h3{margin:0;font-size:20px;font-weight:800;color:#fff}
.sp-why p{margin:0;font-size:15px;line-height:1.6;color:#b9b1ac}
.sp-why-ico{width:52px;height:52px;border-radius:14px;background:#2a0c10;color:var(--red);display:flex;align-items:center;justify-content:center}
.sp-help{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:20px;background:#0d0a0c;border:1px solid #241a1e;color:#f4f1ec;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,transform .2s}
.sp-help:hover{border-color:#5a3a42;transform:translateY(-2px)}
.sp-help-ico{flex-shrink:0;width:52px;height:52px;border-radius:14px;background:#1c1418;color:#f4f1ec;display:flex;align-items:center;justify-content:center}
.sp-discord{background:#5865f2;color:#fff}
.sp-telegram{background:#229ed9;color:#fff}
.sp-help-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.sp-help-txt b{font-size:18px;font-weight:800}
.sp-help-txt small{font-size:14px;color:#8a7f7a}

.sp-everywhere{position:relative;margin-top:4.5rem;min-height:400px;border-radius:28px;overflow:hidden;background:#0d0a0c;border:1px solid #241a1e;display:flex;align-items:center}
.sp-ev-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;padding:3rem 3.5rem;max-width:620px}
.sp-ev-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,4.5vw,3.5rem);line-height:1;padding-top:.05em;text-transform:uppercase;color:#fff}
.sp-ev-text p{margin:0;font-size:16px;line-height:1.6;color:#b9b1ac}
.sp-ev-phones{position:absolute;right:0;top:0;bottom:0;width:440px;pointer-events:none}
.sp-ev-phone{position:absolute;box-sizing:border-box;border-radius:42px;background:#0c0a0b;box-shadow:0 0 0 2px #2a2427,0 30px 70px rgba(0,0,0,.8)}
.sp-ev-front{right:120px;top:48px;width:250px;height:500px;padding:10px;transform:rotate(-8deg);z-index:2}
.sp-ev-back{right:40px;top:140px;width:200px;height:400px;padding:8px;border-radius:36px;transform:rotate(10deg);opacity:.8}
.sp-ev-screen{width:100%;height:100%;border-radius:33px;overflow:hidden;background:#221418}
.sp-ev-front .sp-ev-screen{background:#1a1216}
.sp-ev-screen video{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1100px){
  .sp-hero{grid-template-columns:1fr;gap:2.5rem}
  .sp-card{max-width:560px}
}
@media (max-width:900px){
  .sp-grid{grid-template-columns:1fr}
  .sp-everywhere{flex-direction:column;align-items:stretch}
  .sp-ev-text{padding:2rem 1.5rem 0}
  .sp-ev-phones{position:relative;width:100%;height:380px}
  .sp-ev-front{right:auto;left:50%;margin-left:-110px;width:210px;height:420px;top:30px}
  .sp-ev-back{display:none}
}
@media (max-width:560px){
  .sp-card{padding:24px}
  .sp-amounts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-paypal{font-size:16px}
}
/* la vidéo promo montre déjà un téléphone : on l'affiche seule, bords fondus */
.sp-ev-phones{display:flex;align-items:center;justify-content:center;width:460px}
.sp-ev-phones video{height:100%;max-height:440px;width:auto;max-width:100%;background:transparent;-webkit-mask-image:radial-gradient(ellipse 70% 65% at center,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 65% at center,#000 55%,transparent 100%)}
@media (max-width:900px){.sp-ev-phones{width:100%;height:auto}.sp-ev-phones video{height:auto;max-height:380px}}

/* ══════════════════════════════════════
   INTRO (nouvelle version) : trait de lumière, lettres qui montent,
   le 4 passe au rouge, TV + barre, zoom et fondu. Jouée une seule fois.
══════════════════════════════════════ */
#intro-screen{--i4d:5.8s;background:#000;align-items:center;justify-content:center;overflow:hidden;cursor:default}
#intro-screen.intro-quick{--i4d:1.6s}
.i4x-floor{position:absolute;left:50%;top:58%;width:min(1100px,120vw);height:520px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(229,9,20,.16),rgba(229,9,20,0));pointer-events:none}
.i4x-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%);pointer-events:none}
.i4x-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;animation:i4exit var(--i4d) cubic-bezier(.6,0,.2,1) both}
.i4x-flare{position:absolute;left:50%;top:50%;width:36vw;height:36vw;max-width:520px;max-height:520px;margin:-22vw 0 0 4vw;border-radius:50%;background:radial-gradient(closest-side,rgba(229,9,20,.45),rgba(229,9,20,0));animation:i4flare var(--i4d) ease-out both;pointer-events:none}
.i4x-logo{position:relative;display:flex;font-family:var(--font-display);font-weight:400;font-size:clamp(4rem,13vw,12rem);line-height:1;letter-spacing:.03em;color:#fff}
.i4x-logo span{display:inline-block;animation:var(--l) var(--i4d) cubic-bezier(.2,.8,.2,1) both}
.i4x-logo .i4x-four{animation:var(--l) var(--i4d) cubic-bezier(.2,.8,.2,1) both,i4four var(--i4d) ease-out both}
.i4x-beam{position:relative;width:min(760px,70vw);height:2px;margin-top:18px;border-radius:1px;background:linear-gradient(90deg,rgba(229,9,20,0),#ff2a36 30%,#fff 50%,#ff2a36 70%,rgba(229,9,20,0));box-shadow:0 0 18px rgba(229,9,20,.9);animation:i4beam var(--i4d) cubic-bezier(.2,.8,.2,1) both}
.i4x-tv{margin-top:26px;padding-left:.7em;font-size:clamp(14px,1.6vw,22px);font-weight:700;letter-spacing:.7em;color:#d8d0cb;animation:i4tv var(--i4d) cubic-bezier(.2,.8,.2,1) both}
.i4x-bar{position:absolute;left:50%;bottom:12vh;width:220px;height:2px;margin-left:-110px;border-radius:1px;background:rgba(255,255,255,.12);overflow:hidden;z-index:2;animation:i4barwrap var(--i4d) linear both}
.i4x-bar span{display:block;width:100%;height:100%;background:#fff;transform-origin:left;animation:i4bar var(--i4d) cubic-bezier(.4,0,.2,1) both}

@keyframes i4l0{0%,8%{opacity:0;transform:translateY(.32em) scale(.96);filter:blur(14px)}22%,100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes i4l1{0%,10%{opacity:0;transform:translateY(.32em) scale(.96);filter:blur(14px)}24%,100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes i4l2{0%,12%{opacity:0;transform:translateY(.32em) scale(.96);filter:blur(14px)}26%,100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes i4l3{0%,14%{opacity:0;transform:translateY(.32em) scale(.96);filter:blur(14px)}28%,100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes i4l4{0%,16%{opacity:0;transform:translateY(.32em) scale(.96);filter:blur(14px)}30%,100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes i4l5{0%,18%{opacity:0;transform:translateY(.32em) scale(.96);filter:blur(14px)}32%,100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes i4l6{0%,20%{opacity:0;transform:translateY(.32em) scale(.96);filter:blur(14px)}34%,100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes i4l7{0%,22%{opacity:0;transform:translateY(.32em) scale(.96);filter:blur(14px)}36%,100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes i4four{0%,38%{color:#fff;text-shadow:none}50%,100%{color:#c8141c;text-shadow:0 0 18px rgba(200,20,28,.22)}}
@keyframes i4beam{0%,3%{transform:scaleX(0);opacity:0}14%{transform:scaleX(1);opacity:1}30%{opacity:.8}46%,100%{transform:scaleX(1.5);opacity:0}}
@keyframes i4flare{0%,38%{opacity:0;transform:scale(.8)}52%,100%{opacity:.18;transform:scale(1)}}
@keyframes i4tv{0%,46%{opacity:0;letter-spacing:1.4em}60%,100%{opacity:1;letter-spacing:.7em}}
@keyframes i4bar{0%,20%{transform:scaleX(0)}78%,100%{transform:scaleX(1)}}
@keyframes i4barwrap{0%,14%{opacity:0}20%,80%{opacity:1}88%,100%{opacity:0}}
@keyframes i4exit{0%,80%{opacity:1;transform:scale(1);filter:blur(0)}94%,100%{opacity:0;transform:scale(1.14);filter:blur(8px)}}

@media (prefers-reduced-motion:reduce){
  .i4x-logo span,.i4x-logo .i4x-four{animation:none;opacity:1}
  .i4x-logo .i4x-four{color:#c8141c}
  .i4x-beam,.i4x-flare{display:none}
  .i4x-tv{animation:none}
  .i4x-stage{animation:introFadeIn .6s ease both}
}

/* Pages Films / Séries / Animation + fiches : aucune ombre noire derrière les boutons et les images
   (on garde seulement l'anneau rouge du focus clavier) */
#cat-view *:not(:focus-visible),#cat-view *::before,#cat-view *::after,
#title-page *:not(:focus-visible),#title-page *::before,#title-page *::after{box-shadow:none!important}
#cat-view .card-add svg,#cat-view .card-ph-icon,#title-page .card-add svg,#title-page .card-ph-icon{filter:none!important}
#cat-view .card:hover .card-inner{box-shadow:none!important}
#cat-view .card:focus-visible .card-inner,#title-page .card:focus-visible .card-inner{box-shadow:0 0 0 2px rgba(229,9,20,.85)!important}

/* ══════════════════════════════════════
   PAGE MA LISTE
══════════════════════════════════════ */
#mylist-view{padding:0 3% 3rem;min-height:60vh}
.ml-head{display:flex;align-items:flex-end;gap:2rem;padding-top:2.6rem;flex-wrap:wrap}
.ml-head-text{display:flex;flex-direction:column;gap:.75rem;flex:1;min-width:0}
.ml-kicker{font-size:13px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:var(--red)}
.ml-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(3.4rem,7.5vw,6.5rem);line-height:1.02;padding-top:.06em;letter-spacing:1px;text-transform:uppercase;color:#fff}
.ml-summary{margin:0;font-size:17px;color:#b9b1ac}
.ml-summary b{color:#f4f1ec}
.ml-seen-count{color:#4ade80;font-weight:700}
.ml-head-btns{display:flex;gap:10px;padding-bottom:6px;flex-wrap:wrap}
.ml-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 20px;border-radius:14px;border:1px solid #3a2a2f;background:#0f0a0c;color:#f4f1ec;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.ml-btn:hover:not(:disabled){border-color:var(--red);transform:translateY(-2px)}
.ml-btn:disabled{opacity:.45;cursor:not-allowed}
.ml-btn-red{background:var(--red);border-color:var(--red);color:#fff}
.ml-btn-red:hover:not(:disabled){background:#ff1f2b}
.ml-btn-main{background:#f4f1ec;border-color:#f4f1ec;color:#0a0608;padding:0 24px}
.ml-btn-main:hover:not(:disabled){background:#fff;border-color:#fff}
#mylist-view.ml-managing .ml-manage{border-color:var(--red);background:#2a0c10}

/* à regarder ensuite */
.ml-feat{position:relative;margin-top:2rem;min-height:340px;border-radius:24px;overflow:hidden;background:#241418;border:1px solid #3a1c24;display:flex;align-items:center}
.ml-feat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.ml-feat-bg.loaded{opacity:1}
.ml-feat-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0a0608 0%,rgba(10,6,8,.9) 45%,rgba(10,6,8,.25) 100%)}
.ml-feat-inner{position:relative;display:flex;align-items:center;gap:36px;padding:2.2rem 2.75rem}
.ml-feat-poster{flex-shrink:0;width:176px;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:#1a1216;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.ml-feat-poster img,.ml-feat-poster .ml-ph{width:100%;height:100%;object-fit:cover;display:flex}
.ml-feat-text{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:620px;min-width:0}
.ml-badge{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;background:var(--red);color:#fff;padding:5px 10px;border-radius:5px}
.ml-feat-title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,4.6vw,4rem);line-height:.98;padding-top:.05em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.ml-feat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#d8d0cb}
.ml-feat-meta i{font-style:normal;color:#5a4f52}
.ml-star{color:#fbbf24}
.ml-feat-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* outils */
.ml-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2.2rem 0 1.6rem}
.ml-tabs{display:flex;gap:4px;padding:5px;border-radius:16px;background:#120c0e;border:1px solid #241a1e}
.ml-tab{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:11px;border:none;background:transparent;color:#b9b1ac;font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,color .2s}
.ml-tab:hover{color:#fff}
.ml-tab.active{background:var(--red);color:#fff}
.ml-tab-n{min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:#241a1e;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.ml-tab.active .ml-tab-n{background:rgba(0,0,0,.25)}
.ml-search{position:relative;display:flex;align-items:center;width:300px;max-width:100%;height:52px;color:#8a7f7a}
.ml-search svg{position:absolute;left:18px}
.ml-search input{width:100%;height:52px;box-sizing:border-box;padding:0 18px 0 46px;border-radius:26px;background:#0f0a0c;border:1px solid #2c1d22;color:#f4f1ec;font:inherit;font-size:15px;outline:none}
.ml-search input:focus{border-color:var(--red)}
.ml-spacer{flex:1}
.ml-switch{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#b9b1ac;cursor:pointer;user-select:none}
.ml-switch input{position:absolute;opacity:0;width:1px;height:1px}
.ml-switch-ui{position:relative;width:42px;height:24px;border-radius:12px;background:#1a1215;box-shadow:inset 0 0 0 1px #3a2a2f;transition:background .2s}
.ml-switch-ui::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#6e6460;transition:transform .2s,background .2s}
.ml-switch input:checked + .ml-switch-ui{background:#2a0c10;box-shadow:inset 0 0 0 1px var(--red)}
.ml-switch input:checked + .ml-switch-ui::after{transform:translateX(18px);background:var(--red)}
.ml-switch input:focus-visible + .ml-switch-ui{outline:2px solid #fff;outline-offset:2px}
.ml-sort select{height:46px;padding:0 38px 0 16px;border-radius:23px;border:1px solid #3a2a2f;background:#0f0a0c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d8d0cb' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;color:#d8d0cb;font:inherit;font-size:14px;font-weight:700;cursor:pointer;-webkit-appearance:none;appearance:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grille */
.ml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px}
.ml-card{position:relative}
.ml-card-open{display:flex;flex-direction:column;gap:10px;width:100%;padding:0;border:none;background:none;color:#f4f1ec;font:inherit;text-align:left;cursor:pointer}
.ml-card-poster{position:relative;display:block;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:#1a1216;box-shadow:0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .2s,transform .2s}
.ml-card-poster img,.ml-card-poster .ml-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ml-ph{display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.ml-card-open:hover .ml-card-poster,.ml-card-open:focus-visible .ml-card-poster{box-shadow:0 0 0 2px var(--red);transform:translateY(-3px)}
.ml-card-open:focus-visible{outline:none}
.ml-card.seen .ml-card-poster::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35)}
.ml-seen{position:absolute;left:10px;top:10px;z-index:1;display:flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:13px;background:#0f2a18;color:#4ade80;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.ml-kind{position:absolute;left:10px;bottom:10px;z-index:1;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:rgba(0,0,0,.6);color:#d8d0cb}
.ml-card-title{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-card-meta{font-size:13px;font-weight:600;color:#8a7f7a;margin-top:-6px}
.ml-remove{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.7);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s,background .2s}
.ml-card:hover .ml-remove,.ml-remove:focus-visible,#mylist-view.ml-managing .ml-remove{opacity:1}
.ml-remove:hover{background:var(--red);border-color:var(--red)}
.ml-noresult{grid-column:1/-1;padding:2.5rem 0;text-align:center;color:#8a7f7a;font-size:15px}
@media (hover:none){.ml-remove{opacity:1}}

/* liste vide */
.ml-empty{display:none;margin-top:2.2rem;min-height:420px;border-radius:28px;border:1px dashed #3a2a2f;background:#0a0709;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:2rem 1.2rem}
#mylist-view.ml-is-empty .ml-empty{display:flex}
#mylist-view.ml-is-empty .ml-tools,#mylist-view.ml-is-empty .ml-grid{display:none}
.ml-empty-art{display:flex;margin-bottom:8px}
.ml-empty-art span{width:74px;height:110px;border-radius:10px;background:#1a1216;border:1px solid #2c1d22}
.ml-empty-art span:first-child{transform:rotate(-10deg) translateX(18px)}
.ml-empty-art span:last-child{transform:rotate(10deg) translateX(-18px)}
.ml-empty-art span:nth-child(2){position:relative;z-index:1;width:84px;height:124px;background:#2a0c10;border-color:var(--red);color:var(--red);display:flex;align-items:center;justify-content:center}
.ml-empty h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:44px;text-transform:uppercase;color:#fff}
.ml-empty p{margin:0;max-width:460px;font-size:16px;line-height:1.6;color:#b9b1ac}
.ml-empty p b{color:#f4f1ec}
.ml-empty-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

@media (max-width:900px){
  .ml-feat-inner{flex-direction:column;align-items:flex-start;gap:20px;padding:1.6rem}
  .ml-feat-poster{width:130px}
  .ml-feat-shade{background:linear-gradient(0deg,#0a0608 40%,rgba(10,6,8,.5) 100%)}
  .ml-spacer{display:none}
  .ml-search{width:100%}
  .ml-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px}
}
#mylist-view.ml-is-empty .ml-head-btns{display:none}

/* ══════════════════════════════════════
   RECHERCHE « SPOTLIGHT »
══════════════════════════════════════ */
/* bouton dans la barre du haut (remplace l'ancien champ) */
.nav-search-bar{display:none!important}
.spot-trigger{display:flex;align-items:center;gap:10px;height:42px;padding:0 10px 0 14px;border-radius:21px;border:1px solid #2c1d22;background:#0f0a0c;color:#b9b1ac;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .2s,color .2s,background .2s;white-space:nowrap}
.spot-trigger:hover{border-color:var(--red);color:#fff;background:#1c0b0e}
.spot-trigger kbd{font:inherit;font-size:11px;font-weight:800;padding:3px 6px;border-radius:5px;background:#2c1d22;color:#b9b1ac;margin-left:14px}
@media (max-width:1180px){.spot-trigger kbd{display:none}}
@media (max-width:900px){.spot-trigger{width:42px;padding:0;justify-content:center}.spot-trigger-label{display:none}}

.spotlight{position:fixed;inset:0;z-index:4000;display:none}
.spotlight.open{display:block}
.spot-backdrop{position:absolute;inset:0;background:rgba(3,2,3,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:spotFade .18s ease both}
.spot-panel{position:relative;width:min(940px,calc(100vw - 32px));max-height:calc(100vh - 120px);margin:96px auto 0;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:#0d0a0c;border:1px solid #3a1c24;box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 90px rgba(229,9,20,.1);animation:spotIn .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes spotFade{from{opacity:0}}
@keyframes spotIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.spotlight:focus{outline:none}
.spot-field{display:flex;align-items:center;gap:16px;min-height:84px;padding:0 28px;border-bottom:1px solid #241a1e;color:var(--red);flex-shrink:0}
.spot-field input{flex:1;min-width:0;height:60px;border:none;background:transparent;color:#fff;font:inherit;font-size:clamp(18px,2.4vw,26px);font-weight:700;outline:none}
.spot-field input::placeholder{color:#6e6460;font-weight:600}
.spot-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.spot-esc{flex-shrink:0;font:inherit;font-size:12px;font-weight:800;padding:5px 9px;border-radius:7px;background:#1a1215;border:1px solid #3a2a2f;border-bottom-width:3px;color:#b9b1ac;cursor:pointer}
.spot-esc:hover{color:#fff}
.spot-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 28px;border-bottom:1px solid #241a1e;flex-shrink:0}
.spot-chip{height:36px;padding:0 14px;border-radius:18px;border:1px solid #2c1d22;background:#120c0e;color:#b9b1ac;font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.spot-chip:hover{color:#fff;border-color:#5a3a42}
.spot-chip.active{background:#2a0c10;border-color:var(--red);color:#fff}
.spot-sep{width:1px;height:22px;background:#2c1d22;margin:0 6px}
.spot-select{height:36px;padding:0 32px 0 14px;border-radius:18px;border:1px solid #2c1d22;background:#120c0e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23b9b1ac' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;color:#b9b1ac;font:inherit;font-size:13px;font-weight:700;cursor:pointer;-webkit-appearance:none;appearance:none;max-width:200px}
.spot-count{margin-left:auto;font-size:13px;font-weight:700;color:#8a7f7a}
.spot-count b{color:#f4f1ec}
.spot-body{overflow-y:auto;min-height:0;flex:1}
.spot-label{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#8a7f7a}
.spot-empty{margin:0;padding:3rem 28px;text-align:center;font-size:15px;color:#8a7f7a}

/* état « rien de tapé » */
.spot-block{display:flex;flex-direction:column;gap:12px;padding:24px 28px 0}
.spot-block:last-child{padding-bottom:26px}
.spot-block-head{display:flex;justify-content:space-between;align-items:baseline}
.spot-link{border:none;background:none;color:#8a7f7a;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.spot-link:hover{color:#fff}
.spot-chips-row{display:flex;gap:8px;flex-wrap:wrap}
.spot-recent,.spot-ghit{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:18px;border:1px solid #2c1d22;background:#120c0e;color:#d8d0cb;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.spot-recent svg{color:#8a7f7a}
.spot-recent:hover,.spot-ghit:hover{border-color:var(--red);color:#fff}
.spot-genres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.spot-genre{position:relative;height:72px;padding:0 16px;border-radius:14px;border:1px solid #241a1e;color:#fff;font-family:var(--font-display);font-size:22px;text-transform:uppercase;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .2s,transform .2s}
.spot-genre:hover{border-color:var(--red);transform:translateY(-2px)}
.spot-genre small{position:absolute;right:14px;bottom:10px;font-family:inherit;font-family:Manrope,system-ui,sans-serif;font-size:12px;font-weight:700;color:rgba(255,255,255,.6)}
.spot-genre.g0{background:#2a0e10}.spot-genre.g1{background:#2a2210}.spot-genre.g2{background:#14202a}.spot-genre.g3{background:#1a0e14}
.spot-genre.g4{background:#10222a}.spot-genre.g5{background:#1c1a14}.spot-genre.g6{background:#2a1020}.spot-genre.g7{background:#1a1a2e}
.spot-latest{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.spot-mini{flex:0 0 100px;height:150px;padding:0;border:none;border-radius:10px;overflow:hidden;background:#1a1216;box-shadow:0 0 0 1px rgba(255,255,255,.06);cursor:pointer;transition:box-shadow .2s,transform .2s}
.spot-mini:hover,.spot-mini:focus-visible{box-shadow:0 0 0 2px var(--red);transform:translateY(-2px);outline:none}
.spot-mini img,.spot-mini .spot-ph,.spot-best-poster img,.spot-best-poster .spot-ph,.spot-row-img img,.spot-row-img .spot-ph{width:100%;height:100%;object-fit:cover;display:flex}
.spot-ph{align-items:center;justify-content:center;font-size:1.6rem}

/* résultats */
.spot-results{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:400px}
.spot-best{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px 24px 24px 28px;border-right:1px solid #241a1e}
.spot-best-poster{width:170px;aspect-ratio:2/3;padding:0;border:none;border-radius:14px;overflow:hidden;background:#1a1216;box-shadow:0 0 0 2px var(--red);cursor:pointer}
.spot-best-title{font-family:var(--font-display);font-size:32px;line-height:1.02;padding-top:.05em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere}
.spot-best-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#d8d0cb}
.spot-best-meta i{font-style:normal;color:#5a4f52}
.spot-star{color:#fbbf24}
.spot-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border:none;border-radius:12px;background:#f4f1ec;color:#0a0608;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.spot-open:hover{background:#fff}
#spotlight mark{background:none;color:var(--red)}
.spot-list{display:flex;flex-direction:column;padding:18px 16px 20px;min-width:0}
.spot-list-label{padding:6px 12px 10px}
.spot-list-label:not(:first-child){padding-top:16px}
.spot-rows{display:flex;flex-direction:column}
.spot-row{display:flex;align-items:center;gap:16px;width:100%;padding:10px 12px;border:none;border-radius:14px;background:transparent;color:#f4f1ec;font:inherit;text-align:left;cursor:pointer}
.spot-row.active{background:#1c0b0e;box-shadow:inset 0 0 0 1px var(--red)}
.spot-row-img{flex-shrink:0;width:48px;height:72px;border-radius:8px;overflow:hidden;background:#1a1216}
.spot-row-txt{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.spot-row-title{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot-row-meta{font-size:13px;font-weight:600;color:#8a7f7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot-kind{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:#1c1418;color:#b9b1ac}
.spot-row-arrow{flex-shrink:0;color:#3a2a2f}
.spot-row.active .spot-row-arrow{color:#f4f1ec}
.spot-genre-hits{padding:0 12px}

.spot-foot{display:flex;align-items:center;gap:18px;min-height:56px;padding:0 28px;border-top:1px solid #241a1e;background:#0a0709;font-size:13px;font-weight:600;color:#8a7f7a;flex-shrink:0;flex-wrap:wrap}
.spot-hint{display:flex;align-items:center;gap:6px}
.spot-hint kbd{font:inherit;padding:2px 7px;border-radius:5px;background:#1a1215;border:1px solid #3a2a2f;color:#d8d0cb;font-weight:800}
.spotlight:not(.spot-idle) .spot-hint-open{display:none}
.spotlight.spot-idle .spot-hint:not(.spot-hint-open){display:none}
.spot-foot-space{flex:1}
.spot-more{display:flex;align-items:center;gap:8px;border:none;background:none;color:#f4f1ec;font:inherit;font-size:13px;font-weight:800;cursor:pointer;padding:8px 0}
.spot-more[hidden]{display:none}
.spot-more:hover{color:var(--red)}

@media (max-width:760px){
  .spot-panel{margin-top:16px;max-height:calc(100vh - 32px);border-radius:20px}
  .spot-field{padding:0 18px;min-height:68px}
  .spot-filters{padding:12px 18px}
  .spot-results{grid-template-columns:1fr}
  .spot-best{flex-direction:row;flex-wrap:wrap;align-items:center;border-right:none;border-bottom:1px solid #241a1e;padding:18px}
  .spot-best .spot-label{width:100%}
  .spot-best-poster{width:90px}
  .spot-best-title{font-size:24px;flex:1;min-width:140px}
  .spot-genres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spot-block{padding:18px 18px 0}
  .spot-foot{padding:10px 18px}
  .spot-hint:not(.spot-hint-open){display:none}
  .spot-hint-open{display:none}
  .spot-count{margin-left:0;width:100%}
}

/* ══════════════════════════════════════
   MENU DU COMPTE (nouvelle version)
══════════════════════════════════════ */
#nav-profile-btn{box-shadow:0 0 0 2px #050305,0 0 0 4px var(--red)}
body.is-connected .nav-account{position:relative}
.account-menu.am2{width:380px;max-width:calc(100vw - 24px);padding:0;border-radius:22px;overflow:hidden;background:#0d0a0c;border:1px solid #3a1c24;box-shadow:0 30px 90px rgba(0,0,0,.75);max-height:calc(100vh - 90px);overflow-y:auto}
.am2 button{font:inherit}
.am-head{display:flex;flex-direction:column;gap:16px;padding:20px 20px 18px;border-bottom:1px solid #241a1e}
.am-me{display:flex;align-items:center;gap:14px}
.am-ava{flex-shrink:0;width:56px;height:56px;border-radius:16px;overflow:hidden;background:#1c2440;display:flex;align-items:center;justify-content:center;font-size:28px}
.am-ava img{width:100%;height:100%;object-fit:cover}
.am-me-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.am-kicker{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#8a7f7a}
.am2 .am-name{font-family:var(--font-display);font-size:26px;line-height:1.05;padding-top:.04em;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am2 .am-sub{font-size:12px;font-weight:600;color:#8a7f7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-chip{flex-shrink:0;height:36px;padding:0 12px;border-radius:18px;border:1px solid #3a2a2f;background:transparent;color:#d8d0cb;font-size:12px!important;font-weight:800;cursor:pointer;transition:border-color .2s,color .2s}
.am-chip:hover{border-color:var(--red);color:#fff}
.am-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.am-switch-label{font-size:12px;font-weight:700;color:#8a7f7a}
.am-others{display:flex;gap:8px}
.am-other,.am-plus{width:38px;height:38px;padding:0;border-radius:12px;border:none;display:flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .15s}
.am-other img{width:100%;height:100%;object-fit:cover}
.am-other:hover,.am-other:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 2px var(--red);outline:none}
.am-plus{border:1px dashed #4a3a3f;background:transparent;color:#b9b1ac}
.am-plus:hover{border-color:var(--red);color:#fff}
.am-login{display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-bottom:1px solid #241a1e;background:#110b0d}
.am-login-text{margin:0;font-size:14px;line-height:1.5;color:#cfc6c9}
.am-login-text b{color:#f4f1ec}
.am-login .heart-inline{color:var(--red)}
.am-provider{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border-radius:12px;border:none;font-size:14px!important;font-weight:800;cursor:pointer;transition:filter .2s,transform .15s}
.am-provider:hover{filter:brightness(1.08);transform:translateY(-1px)}
.am-provider.discord{background:#5865f2;color:#fff}
.am-provider.google{background:#fff;color:#1f1f1f}
.am-pub{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #241a1e;background:#110b0d}
.am-pub .account-menu-pub{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:15px;font-weight:800;margin:0;padding:0;border:none}
.am-pub .acc-pub-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-links{display:flex;flex-direction:column;padding:8px}
.am-link{display:flex;align-items:center;gap:14px;height:50px;padding:0 12px;border-radius:12px;border:none;background:transparent;color:#f4f1ec;font-size:15px!important;font-weight:700;text-align:left;cursor:pointer;transition:background .15s}
.am-link:hover,.am-link:focus-visible{background:#1a1215;outline:none}
.am-link-ico{width:34px;height:34px;border-radius:10px;background:#1a1215;color:#d8d0cb;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.am-link:hover .am-link-ico{background:#2a0c10;color:var(--red)}
.am-link-txt{flex:1}
.am-link-extra{font-size:13px;font-weight:700;color:#8a7f7a}
.am-foot{display:flex;flex-direction:column;padding:8px;border-top:1px solid #241a1e}
.am-logout{display:flex;align-items:center;gap:14px;height:46px;padding:0 20px;border-radius:12px;border:none;background:transparent;color:#f4f1ec;font-size:14px!important;font-weight:700;text-align:left;cursor:pointer}
.am-logout svg{color:#d8d0cb}
.am-logout:hover{background:#1a1215}
.am-foot-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px 6px;flex-wrap:wrap}
.am-small{border:none;background:none;padding:4px 0;color:#8a7f7a;font-size:12px!important;font-weight:700;cursor:pointer}
.am-small:hover{color:#fff}
.am-danger{color:#c55a62}
.am-danger:hover{color:#ff6b73}
@media (max-width:600px){.account-menu.am2{position:fixed;right:12px;left:12px;top:70px;width:auto}}
/* le nouveau menu ne reprend pas les anciens styles des boutons */
.account-menu.am2 button{display:flex;align-items:center;width:auto;text-align:left;border-radius:12px}
.account-menu.am2 .am-chip{justify-content:center;border-radius:18px;padding:0 12px;color:#d8d0cb;background:transparent}
.account-menu.am2 .am-other,.account-menu.am2 .am-plus{justify-content:center;width:38px;padding:0}
.account-menu.am2 .am-provider{justify-content:center;width:100%;padding:0}
.account-menu.am2 .am-provider.discord{background:#5865f2;color:#fff}
.account-menu.am2 .am-provider.google{background:#fff;color:#1f1f1f}
.account-menu.am2 .am-link{width:100%;padding:0 12px;color:#f4f1ec}
.account-menu.am2 .am-link:hover{background:#1a1215}
.account-menu.am2 .am-logout{width:100%;padding:0 20px;color:#f4f1ec}
.account-menu.am2 .am-small{padding:4px 0;background:none;color:#8a7f7a;border-radius:0}
.account-menu.am2 .am-small:hover{color:#fff;background:none}
.account-menu.am2 .am-danger{color:#c55a62}
.account-menu.am2 .am-danger:hover{color:#ff6b73}
.account-menu.am2 .am-name{display:block}
.account-menu.am2 .am-pub .account-menu-pub{background:none;box-shadow:none}
#saga-detail-view .card-ph-icon,#sagas-view .card-ph-icon,.sd-poster-ph{display:none!important}
.cat-load-more-btn{display:block;margin:24px auto 12px;padding:12px 32px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#f4f1ec;border-radius:24px;font-size:15px;cursor:pointer;transition:background .2s}
.cat-load-more-btn:hover{background:rgba(255,255,255,0.15)}
.tp-season-dl-btn{display:block;width:calc(100% - 16px);margin:6px 8px 8px;padding:7px 0;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#f4f1ec;border-radius:10px;font-size:.78rem;cursor:pointer;transition:background .2s;text-align:center}
.tp-season-dl-btn:hover{background:rgba(255,255,255,0.18)}

/* Compléter ma bibliothèque : option « Tout remplacer » */
.bulk-overwrite{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;padding:.75rem .9rem;border-radius:10px;border:1px solid rgba(245,197,24,.35);background:rgba(245,197,24,.06);font-size:.85rem;color:rgba(255,255,255,.85);cursor:pointer}
.bulk-overwrite input{accent-color:var(--red);width:16px;height:16px;margin-top:2px;flex-shrink:0}
.bulk-overwrite b{color:#f5c518}

/* Fiches incomplètes */
.inc-list{display:flex;flex-direction:column;gap:.5rem;max-height:60vh;overflow-y:auto;padding-right:.2rem}
.inc-row{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;width:100%;padding:.7rem .9rem;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#fff;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.inc-row:hover{border-color:var(--red);background:rgba(229,9,20,.06)}
.inc-title{font-weight:800;font-size:.9rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.inc-title small{font-weight:600;font-size:.72rem;color:var(--text-dim)}
.inc-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.inc-tags i{font-style:normal;font-size:.7rem;font-weight:700;padding:.15rem .5rem;border-radius:20px;background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.3);color:#f5c518}

/* 16/10 : boutons réseaux (Telegram / Discord / PayPal) — remplacent les téléphones */
.soc-row{display:flex;justify-content:center;align-items:center;gap:22px;margin:2.2rem 0 2.6rem}
.soc-btn{width:45px;height:45px;display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;position:relative;isolation:isolate;border-radius:7px;cursor:pointer;transition:all .3s;text-decoration:none}
.soc-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:transparent;backdrop-filter:blur(0);letter-spacing:.8px;border-radius:10px;transition:all .3s;border:1px solid rgba(156,156,156,.466)}
.soc-bg{position:absolute;width:100%;height:100%;z-index:-1;border-radius:10px;pointer-events:none;transition:all .3s}
.soc-btn:hover .soc-bg,.soc-btn:focus-visible .soc-bg{transform:rotate(35deg);transform-origin:bottom}
.soc-btn:hover .soc-svg,.soc-btn:focus-visible .soc-svg{border:1px solid rgba(226,226,226,.466);background-color:rgba(204,204,204,.466);backdrop-filter:blur(4px)}
.soc-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* 16/10 : Vérifier les affiches */
.pc-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin:.6rem 0 1rem}.pc-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .2s}
.pc-actions{margin:0 0 1rem}
.pc-list{display:flex;flex-direction:column;gap:.6rem}
.pc-row{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.pc-row.done{opacity:.55}
.pc-row figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.pc-row img{width:64px;height:96px;object-fit:cover;border-radius:6px;background:#111}
.pc-row figcaption{font-size:.65rem;color:var(--text-dim)}
.pc-arrow{color:var(--text-dim);font-weight:800}
.pc-info{display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:0}.pc-info small{color:var(--text-dim);font-size:.75rem}
.pc-info .btn-secondary{align-self:flex-start}
.pc-check input{width:18px;height:18px;accent-color:var(--red)}

/* 16/10 : bouton « Télécharger » des épisodes seulement téléchargeables */
.ep-dl-btn{--main-color:#323232;--bg-color:#eee;--bg-color-sub:#dedede;--font-color:#323232;position:relative;width:150px;height:40px;cursor:pointer;display:flex;align-items:center;border:2px solid var(--main-color);box-shadow:4px 4px var(--main-color);background-color:var(--bg-color);border-radius:10px;overflow:hidden;padding:0;font:inherit;margin-left:auto}
.ep-dl-btn,.ep-dl-btn__icon,.ep-dl-btn__text{transition:all .3s}
.ep-dl-btn__text{transform:translateX(14px);color:var(--font-color);font-weight:700;font-size:.82rem;white-space:nowrap}
.ep-dl-btn__icon{position:absolute;transform:translateX(109px);height:100%;width:39px;background-color:var(--bg-color-sub);display:flex;align-items:center;justify-content:center}
.ep-dl-btn__svg{width:20px;fill:var(--main-color)}
.ep-dl-btn:hover .ep-dl-btn__text,.ep-dl-btn:focus-visible .ep-dl-btn__text{color:transparent}
.ep-dl-btn:hover .ep-dl-btn__icon,.ep-dl-btn:focus-visible .ep-dl-btn__icon{width:148px;transform:translateX(0)}
.ep-dl-btn:active{transform:translate(3px,3px);box-shadow:0 0 var(--main-color)}
.ep-dl-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* 16/10 : cartes d'épisodes inclinables (js/tilted.js, d'après TiltedCard de React Bits) — sans ombre portée */
.tp-ep.tilted-card{position:relative;display:flex;align-items:center;justify-content:center;margin:0;height:210px;background:none;border:none;border-radius:14px;overflow:visible;opacity:1;perspective:800px;outline:none;user-select:none;-webkit-user-select:none;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;transition:none}
.tp-ep.tilted-card:hover{transform:none;border-color:transparent}
.tp-ep.tilted-card.has-stream{cursor:pointer}
.tp-ep.tilted-card[data-active]{z-index:2}
.tp-ep .tilted-card__body{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.tp-ep .tilted-card__face{position:absolute;inset:0;overflow:hidden;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;isolation:isolate;background:#1a1a24}
.tp-ep .tilted-card__img{position:absolute;inset:-14px;aspect-ratio:auto;background:none;cursor:inherit;transform:translate3d(calc(var(--tc-px,0) * -24px),calc(var(--tc-py,0) * -24px),0)}
.tp-ep .tilted-card__img img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tp-ep-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,16,0) 28%,rgba(10,10,16,.6) 62%,rgba(10,10,16,.94));pointer-events:none}
.tp-ep .tilted-card__layer{position:absolute;inset:0;transform:translate3d(calc(var(--tc-px,0) * var(--tc-depth,0) * 1px),calc(var(--tc-py,0) * var(--tc-depth,0) * 1px),0)}
.tp-ep-top{pointer-events:none}
.tp-ep.has-stream:hover .tp-ep-play-overlay{opacity:1}
.tp-ep .tp-ep-play-overlay{background:rgba(10,10,16,.35)}
.tp-ep-front{display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;padding:.8rem .9rem}
.tp-ep-front .tp-ep-title{color:#fff;font-weight:800;font-size:.95rem;line-height:1.25}
.tp-ep-front .tp-ep-actions{margin-top:.2rem;padding-top:0}
.tp-ep .tilted-card__glare{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(farthest-corner circle at var(--tc-gx,50%) var(--tc-gy,50%),rgba(255,255,255,calc(var(--tc-glare,0) * .34)) 0%,rgba(255,255,255,calc(var(--tc-glare,0) * .285)) 18%,rgba(255,255,255,calc(var(--tc-glare,0) * .108)) 36%,rgba(255,255,255,calc(var(--tc-glare,0) * .003)) 54%,rgba(255,255,255,0) 60%)}
.tp-ep .tilted-card__rim{position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.12)}
.tp-ep .tilted-card__edge{position:absolute;inset:0;z-index:7;box-sizing:border-box;padding:1px;border-radius:inherit;pointer-events:none;background:radial-gradient(farthest-side circle at var(--tc-gx,50%) var(--tc-gy,50%),rgba(255,255,255,calc(var(--tc-glare,0) * .85)) 0%,rgba(255,255,255,calc(var(--tc-glare,0) * .43)) 36%,rgba(255,255,255,calc(var(--tc-glare,0) * .02)) 72%,rgba(255,255,255,0) 85%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tp-ep.tilted-card:focus-within .tilted-card__rim{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.tp-ep .tilted-card__caption{position:absolute;top:0;left:0;z-index:3;margin:16px 0 0 14px;padding:5px 9px;border-radius:7px;background:#fff;color:#18181b;font-size:12px;font-weight:600;line-height:16px;white-space:nowrap;opacity:0;pointer-events:none;transform-origin:0 0;border:1px solid rgba(24,24,27,.08)}
@media (prefers-reduced-motion:reduce){.tp-ep .tilted-card__img,.tp-ep .tilted-card__layer{transform:none}}
.footer .soc-row{margin:0 0 1.2rem}

/* 16/10 : EXTRAITS dans une tablette en paysage (les bandes-annonces 16:9 ne sont plus coupées comme dans le téléphone).
   Bord fin uniforme, contour aluminium gris sidéral, caméra au centre du bord haut, boutons sur la tranche ; pas d'ombre
   noire (seulement le halo coloré). Sous 900 px de large on garde le téléphone. */
.tb-cam,.tb-btn,.tb-date{display:none}
@media (min-width:901px){
  #extraits-view .extraits-phone.is-tablet{--ph-h:auto;height:auto;width:min(calc(100% - 96px),980px);aspect-ratio:3/2;padding:15px;border-radius:30px;
    background:linear-gradient(160deg,#6d6e74 0%,#3a3b40 10%,#1b1c1f 22%,#111214 50%,#1b1c1f 78%,#45464c 92%,#7a7b81 100%);
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25),inset 0 0 0 3px #0a0a0c,inset 0 1px 3px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.05),0 0 90px rgba(229,9,20,.12)}
  #extraits-view .extraits-phone.is-tablet .ph-btn,#extraits-view .extraits-phone.is-tablet .ph-island{display:none}
  .is-tablet .tb-cam{display:block;position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;z-index:2;
    background:radial-gradient(circle at 35% 35%,#3c4c7c,#0c0f1c 65%);box-shadow:0 0 0 1px #050506}
  .is-tablet .tb-btn{display:block;position:absolute;height:3px;top:-2px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#77787e,#2c2d31)}
  .is-tablet .tb-top{right:9%;width:7%}
  .is-tablet .tb-vol1{right:-2px;top:9%;width:3px;height:7%;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#2c2d31,#77787e)}
  .is-tablet .tb-vol2{right:-2px;top:18%;width:3px;height:7%;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#2c2d31,#77787e)}
  .is-tablet .ph-screen{border-radius:17px;box-shadow:0 0 0 1px #000}
  .is-tablet .ph-status{height:30px;padding:0 20px;font-size:.74rem;justify-content:flex-start;gap:.55rem;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent)}
  .is-tablet .ph-time{min-width:0}
  .is-tablet .tb-date{display:inline;font-weight:600;opacity:.9;text-transform:capitalize}
  .is-tablet .ph-icons{margin-left:auto;transform:scale(.88);transform-origin:right center}
  .is-tablet .ph-home{width:20%;height:5px;bottom:7px}
  .is-tablet .ph-glare{background:linear-gradient(120deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.025) 30%,transparent 45%)}
  .is-tablet .ph-screen .extrait-badge-top{top:40px;left:18px}
  .is-tablet .ph-screen .extrait-source-badge{top:40px;right:18px}
  .is-tablet .ph-screen .extrait-owner-actions{top:72px;right:18px}
  .is-tablet .ph-screen .extrait-info{left:24px;bottom:26px;right:24px}
  .is-tablet .ph-screen .extrait-info-title{font-size:1.25rem}
  #extraits-view .extraits-stage:has(.is-tablet) .extraits-ambient{width:min(980px,90%);height:min(70vh,640px)}
}
@media (min-width:1201px){ #extraits-view .exp-layout:has(.is-tablet){grid-template-columns:260px minmax(0,1fr) 320px;gap:1.4rem} }

/* 16/10 : pub récompensée « Nous soutenir » + compteur 0/5 (sans ombre portée) */
.ad-support{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:-1rem auto 2.4rem;text-align:center}
.ads-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.4rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(229,9,20,.14);color:#fff;font:inherit;font-weight:800;font-size:.92rem;cursor:pointer;transition:background .25s,border-color .25s,transform .2s}
.ads-btn svg{color:var(--red)}
.ads-btn:hover:not(:disabled){background:var(--red);border-color:rgba(255,255,255,.35)}
.ads-btn:hover:not(:disabled) svg{color:#fff}
.ads-btn:active:not(:disabled){transform:scale(.97)}
.ads-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ads-btn:disabled{cursor:default;opacity:.75}
.ads-progress{display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:800;color:var(--text-dim)}
.ads-dots{display:flex;gap:6px}
.ads-dots i{width:22px;height:6px;border-radius:4px;background:rgba(255,255,255,.12);transition:background .3s}
.ads-dots i.on{background:var(--red)}
.ad-support.done .ads-dots i.on{background:#46d369}
.ad-support.done .ads-btn{background:rgba(70,211,105,.12);border-color:rgba(70,211,105,.4)}
.ad-support.done .ads-btn svg{color:#46d369}
.ads-msg{min-height:1em;font-size:.78rem;color:var(--text-dim)}