/* =========================================================
   NOVASTREAM — design system
   Base sombre cinéma, accent rouge braise, typo Sora / Inter
   ========================================================= */

:root{
  --bg:            #0a0a10;
  --bg-soft:       #101018;
  --bg-elevated:   #16161f;
  --card:          #1b1b26;
  --card-hover:    #232332;
  --line:          #26262f;

  --text:          #f3f1ec;
  --text-muted:    #9a97a6;
  --text-faint:    #625f6e;

  --ember:         #ff3b4e;
  --ember-dark:    #8c0f22;
  --ember-soft:    rgba(255,59,78,.16);
  --ember-glow:    rgba(255,59,78,.45);

  --gold:          #f2b544;

  --radius-s:      8px;
  --radius-m:      14px;
  --radius-l:      22px;

  --font-display:  "Sora", sans-serif;
  --font-body:     "Inter", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
::selection{ background:var(--ember); color:#fff; }

.container{
  width:100%;
  max-width:1360px;
  margin:0 auto;
  padding:0 clamp(18px,4vw,56px);
}

/* ---------------------------------------------------------
   Barre de navigation
--------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:16px clamp(18px,4vw,56px);
  background:linear-gradient(180deg, rgba(8,8,12,.92) 0%, rgba(8,8,12,.55) 70%, transparent 100%);
  backdrop-filter:blur(6px);
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav.scrolled{
  background:rgba(9,9,13,.88);
  box-shadow:0 1px 0 var(--line);
  padding-top:11px; padding-bottom:11px;
}

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(145deg, var(--ember) 0%, var(--ember-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px var(--ember-glow);
}
.brand-mark svg{ width:19px; height:19px; }
.brand-name{
  font-family:var(--font-display); font-weight:700;
  font-size:1.28rem; letter-spacing:.2px;
}
.brand-name span{ color:var(--ember); }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  position:relative;
  padding:9px 16px;
  border-radius:99px;
  font-size:.92rem; font-weight:500;
  color:var(--text-muted);
  border:1px solid transparent;
  transition:color .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a.is-active{
  color:var(--text);
  background:var(--ember-soft);
  border-color:rgba(255,59,78,.4);
}
.nav-links a.is-outline{
  color:var(--ember);
  border-color:var(--ember);
}
.nav-links a.is-outline:hover{ background:var(--ember-soft); }

.nav-tools{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.search-field{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:99px;
  padding:9px 16px;
  width:220px;
  transition:border-color .2s ease, width .25s ease;
}
.search-field:focus-within{ border-color:var(--ember); width:260px; }
.search-field svg{ width:16px; height:16px; color:var(--text-faint); flex-shrink:0; }
.search-field input{
  background:none; border:none; outline:none; color:var(--text);
  font-size:.88rem; width:100%;
}
.search-field input::placeholder{ color:var(--text-faint); }
.search-results{
  position:fixed; z-index:110; top:66px; right:clamp(150px, 15vw, 250px);
  width:min(360px, calc(100vw - 36px)); max-height:360px; overflow:auto;
  display:none; padding:6px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-elevated); box-shadow:0 18px 38px rgba(0,0,0,.48);
}
.search-results.show{ display:block; }
.search-result{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; color:var(--text); font-size:.84rem; }
.search-result:hover{ background:var(--card); }
.search-result-poster{ width:30px; height:42px; flex:0 0 auto; border-radius:4px; }
.search-result small{ display:block; color:var(--text-faint); margin-top:3px; }
.search-empty{ padding:13px; color:var(--text-muted); font-size:.84rem; }

.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px;
  border-radius:99px;
  font-size:.9rem; font-weight:600;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn::before,
.icon-btn::before,
button:not(.row-nav)::before{
  content:"";
  position:absolute;
  inset:-45% -85%;
  background:linear-gradient(115deg, transparent 30%, rgba(255,78,96,.08) 39%, rgba(255,255,255,.38) 46%, rgba(255,67,93,.78) 51%, rgba(255,255,255,.35) 57%, rgba(255,67,93,.08) 64%, transparent 73%);
  transform:translateX(-78%) rotate(8deg);
  opacity:0;
  pointer-events:none;
  transition:transform .65s ease, opacity .25s ease;
}
.btn:hover::before,
.icon-btn:hover::before,
button:not(.row-nav):hover::before{
  opacity:1;
  transform:translateX(78%) rotate(8deg);
}
.btn::before,
.icon-btn::before,
button:not(.row-nav)::before{display:none}
button:not(.row-nav){ position:relative; overflow:hidden; isolation:isolate; }
@keyframes red-button-reflection{0%,42%{background-position:130% 0}72%,100%{background-position:-130% 0}}
.nav-links a,.admin-nav a{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .22s ease,background .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.nav-links a::after,.admin-nav a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(108deg,transparent 28%,rgba(255,65,88,.3) 47%,rgba(255,167,177,.3) 51%,rgba(255,65,88,.22) 56%,transparent 72%);
  background-size:220% 100%;
}
.nav-links a:hover,.admin-nav a:hover{color:#fff;box-shadow:0 0 18px rgba(255,59,78,.16)}
.nav-links a:hover::after,.admin-nav a:hover::after{opacity:1;animation:red-button-reflection 1.2s ease both}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(135deg, var(--ember), var(--ember-dark));
  color:#fff;
  box-shadow:0 6px 18px var(--ember-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{ box-shadow:0 0 0 1px rgba(255,119,132,.34), 0 11px 30px rgba(255,59,78,.6), 0 0 42px rgba(255,59,78,.25); transform:translateY(-2px); }
.btn-ghost{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-color:var(--line);
}
.btn-ghost:hover{ background:rgba(255,59,78,.11); border-color:rgba(255,59,78,.45); box-shadow:0 0 22px rgba(255,59,78,.22); }
.btn-outline{
  background:transparent; color:var(--text); border-color:var(--line);
}
.btn-outline:hover{ border-color:rgba(255,59,78,.72); color:#fff; background:rgba(255,59,78,.08); box-shadow:0 0 24px rgba(255,59,78,.22), inset 0 0 18px rgba(255,59,78,.08); }
.btn-sm{ padding:7px 14px; font-size:.82rem; }
.btn svg{ width:16px; height:16px; }

.burger{ display:none; }

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  position:relative;
  height:min(76vh, 720px);
  min-height:500px;
  display:flex; align-items:flex-end;
  padding-bottom:clamp(48px,7vw,88px);
  overflow:hidden;
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  padding-bottom:clamp(48px,7vw,88px); opacity:0;
  transform:scale(1.025); transition:opacity .72s ease, transform 1.05s ease;
  pointer-events:none;
}
.hero-slide.is-active{ opacity:1; transform:scale(1); pointer-events:auto; z-index:1; }
.hero-slide-bg{ position:absolute; inset:0; background-position:center; background-size:cover; }
.hero-slide-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--bg) 1%, transparent 48%), linear-gradient(90deg, rgba(8,8,12,.92) 0%, rgba(8,8,12,.62) 40%, rgba(8,8,12,.14) 78%, rgba(8,8,12,.35) 100%);
}
.hero-slide-content{ position:relative; z-index:1; max-width:640px; margin-right:auto; text-align:left; }
.hero-slide-content .hero-desc{margin-right:auto;margin-left:0}
.hero-slide-content .hero-meta,.hero-slide-content .hero-actions{justify-content:flex-start}
.hero-dots{ position:absolute; z-index:3; bottom:28px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.hero-dot{ width:28px; height:4px; padding:0; border:0; border-radius:99px; background:rgba(255,255,255,.28); transition:width .25s ease, background .25s ease; }
.hero-dot.is-active{ width:42px; background:var(--ember); }

/* Profils de visionnage */
.profile-launcher{position:fixed;inset:0;z-index:2500;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 80% 14%,#80334755,transparent 38%),linear-gradient(145deg,#080910f5,#11121cf7);backdrop-filter:blur(16px)}
.profile-launcher[hidden]{display:none}
.profile-launcher-panel{width:min(880px,100%);text-align:center;padding:clamp(25px,6vw,70px);border:1px solid #ffffff15;border-radius:24px;background:#12131ddb;box-shadow:0 30px 100px #0008}
.profile-launcher-panel h1{font-size:clamp(32px,6vw,54px);margin:13px 0}
.profile-launcher-panel .public-lead{margin:0 auto;max-width:none}
.profile-launcher-grid{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:20px;margin:38px 0 25px}
.profile-launcher-card{display:grid;justify-items:center;gap:11px;min-width:112px;padding:12px 14px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--text);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.profile-launcher-card:hover{transform:translateY(-2px);border-color:#ff3b4e88;background:#ffffff08;box-shadow:0 10px 24px #0005}
.profile-launcher-card strong{font-size:13px}.profile-launcher-card small{color:var(--text-muted);font-size:10px;margin-top:-7px}
.profile-launcher-avatar{width:82px;height:82px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#843c62,#323e73);border:2px solid #ffffff25;box-shadow:0 8px 28px #0005;font:700 32px var(--font-display);color:#fff}
.profile-add-card .profile-launcher-avatar{background:#ffffff0a;border-style:dashed;font-weight:400;color:#ff9daa}
.profile-settings-trigger{padding:10px 16px;border:1px solid #ffffff20;border-radius:99px;background:#ffffff08;color:var(--text-muted);transition:all .2s}
.profile-settings-trigger:hover{color:white;border-color:var(--ember);background:var(--ember-soft);transform:translateY(-1px)}
.profile-settings-dialog{width:min(620px,calc(100% - 28px));max-height:min(82vh,760px);overflow:auto;padding:26px;border:1px solid #ffffff20;border-radius:19px;background:#15161f;color:var(--text);box-shadow:0 30px 100px #000b}
.profile-settings-dialog::backdrop{background:#03040ac9;backdrop-filter:blur(8px)}
.profile-settings-head{display:flex;justify-content:space-between;align-items:center}.profile-settings-head h2{font-size:27px;margin-top:5px}
.profile-settings-close{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);font-size:24px;transition:all .2s}.profile-settings-close:hover{background:var(--ember-soft);border-color:var(--ember);transform:translateY(-1px)}
.profile-settings-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin:22px 0 17px}.profile-settings-tabs button{padding:10px 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--text-muted);transition:all .2s}.profile-settings-tabs button:hover,.profile-settings-tabs button.is-active{color:white;border-bottom-color:var(--ember)}
.profile-settings-section[hidden]{display:none}.profile-settings-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.profile-settings-item .profile-launcher-avatar{width:39px;height:39px;font-size:16px;flex:0 0 auto}.profile-settings-item strong{flex:1}.profile-settings-item small{color:var(--text-muted)}.profile-settings-item button{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#ffffff06;color:var(--text);transition:all .2s}.profile-settings-item button:hover{border-color:var(--ember);background:var(--ember-soft)}
.profile-settings-form{display:grid;gap:13px;margin-top:20px;padding:17px;border:1px solid var(--line);border-radius:12px;background:#ffffff04}.profile-settings-form h3{font-size:15px}.profile-settings-form>label:not(.profile-check){display:grid;gap:7px;font-size:12px;color:var(--text-muted)}.profile-settings-form input:not([type=checkbox]){padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#0d0e15;color:var(--text);font:inherit}.profile-check{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-muted)}.profile-check input{accent-color:var(--ember)}.profile-settings-actions{display:flex;gap:10px;flex-wrap:wrap}.profile-settings-form [role=status],.profile-settings-note{color:var(--text-muted);font-size:11px;line-height:1.7;margin:0}.profile-settings-note a{color:#ff9daa;text-decoration:underline}.profile-settings-item button:disabled,.profile-settings-form button:disabled{opacity:.45;cursor:not-allowed}
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
button:not(:disabled){transition:filter .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
button:not(:disabled):not(.profile-launcher-card):not(.profile-settings-close):not(.profile-settings-trigger):not(.hero-dot):not(.row-nav):hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 5px 16px #0004}
button:not(:disabled):not(.row-nav):active,.btn:active{transform:scale(.985);filter:brightness(1.04)}
button:focus-visible,a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
@media(max-width:700px){.hero-slide-content{margin-left:0;margin-right:auto;text-align:left}.profile-launcher-panel{padding:28px 16px}.profile-launcher-grid{gap:8px;margin:26px 0 20px}.profile-launcher-card{min-width:88px;padding:9px}.profile-launcher-avatar{width:65px;height:65px;font-size:26px}.profile-settings-dialog{padding:20px 16px}.profile-settings-item{flex-wrap:wrap}.profile-settings-item strong{min-width:75px}}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 78% 20%, rgba(255,59,78,.20), transparent 60%),
    linear-gradient(100deg, #120b10 0%, #1b1420 38%, #23161c 62%, #150c10 100%);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, var(--bg) 2%, transparent 42%),
             linear-gradient(90deg, rgba(8,8,12,.75) 0%, transparent 55%);
}
.hero-shape{
  position:absolute; right:-6%; top:8%;
  width:56%; height:100%;
  opacity:.9;
}
.hero-content{ position:relative; z-index:2; max-width:640px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--gold); font-weight:600; font-size:.82rem;
  margin-bottom:16px;
}
.hero-eyebrow svg{ width:15px; height:15px; }
.hero-title{
  font-size:clamp(2.4rem, 4.6vw, 3.8rem);
  line-height:1.04;
  font-weight:700;
  margin-bottom:18px;
  letter-spacing:-.5px;
}
.hero-desc{
  color:var(--text-muted);
  font-size:1.02rem; line-height:1.65;
  max-width:520px;
  margin-bottom:26px;
}
.hero-meta{
  display:flex; align-items:center; gap:14px;
  margin-bottom:26px;
  font-size:.86rem; color:var(--text-muted);
}
.hero-meta .tag{
  padding:4px 12px; border:1px solid var(--line); border-radius:99px;
}
.hero-actions{ display:flex; gap:12px; }

/* ---------------------------------------------------------
   Rangées de catégories
--------------------------------------------------------- */
.rows{ padding:20px 0 80px; position:relative; z-index:2; }
.row-block{ margin-bottom:44px; }
.row-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:16px;
}
.row-title{
  font-size:1.28rem; font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.row-title .dash{ width:20px; height:3px; border-radius:3px; background:var(--ember); display:inline-block; }
.row-link{ font-size:.85rem; color:var(--text-muted); display:flex; align-items:center; gap:4px; }
.row-link:hover{ color:var(--ember); }

.row-scroll-wrap{ position:relative; }
.row-scroll{
  display:flex; gap:16px;
  overflow-x:auto; scroll-behavior:smooth;
  padding:4px 4px 12px;
  scrollbar-width:none;
}
.row-scroll::-webkit-scrollbar{ display:none; }

.row-nav{
  position:absolute; top:0; bottom:12px;
  width:52px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg, var(--bg) 10%, transparent);
  border:none; color:var(--text); z-index:5; opacity:0; transition:opacity .2s ease;
}
.row-scroll-wrap:hover .row-nav{ opacity:1; }
.row-nav.next{ right:0; left:auto; transform:scaleX(-1); background:linear-gradient(90deg, var(--bg) 10%, transparent); }
.row-nav svg{ width:20px; height:20px; }

.card{
  position:relative;
  flex:0 0 auto;
  width:186px;
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
  cursor:pointer;
}
.card:hover{
  transform:none;
  box-shadow:0 20px 40px rgba(0,0,0,.48), 0 0 0 1px rgba(255,74,94,.55), 0 0 30px rgba(255,59,78,.3), inset 0 0 24px rgba(255,59,78,.1);
  border-color:rgba(255,96,112,.85);
}
.card-poster::after{
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(112deg, transparent 32%, rgba(255,255,255,.2) 43%, rgba(255,65,88,.55) 49%, rgba(255,255,255,.18) 55%, transparent 67%);
  transform:translateX(-110%); transition:transform .65s ease, opacity .22s ease;
}
.card:hover .card-poster::after{ opacity:1; transform:translateX(110%); }
.card-poster{
  position:relative;
  aspect-ratio:2/3;
  display:flex; align-items:flex-end;
  padding:12px;
  overflow:hidden;
}
.card-poster-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.card-poster > span{z-index:1}
.card-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(10,10,14,.72);
  border:1px solid rgba(255,255,255,.12);
  padding:3px 8px; border-radius:99px;
  font-size:.68rem; font-weight:700; color:var(--gold);
  display:flex; align-items:center; gap:4px;
}
.card-badge svg{ width:11px; height:11px; }
.card-rank{
  position:absolute;
  left:8px;
  bottom:2px;
  z-index:1;
  font-family:var(--font-display);
  font-size:4.2rem;
  line-height:.9;
  font-weight:800;
  color:rgba(255,255,255,.9);
  text-shadow:0 8px 20px rgba(0,0,0,.72);
  -webkit-text-stroke:1px rgba(10,10,16,.5);
}
.card-eps{
  position:absolute; bottom:10px; right:10px;
  background:rgba(10,10,14,.72);
  padding:3px 8px; border-radius:6px;
  font-size:.68rem; color:var(--text);
}
.card-play{
  position:absolute; inset:0; margin:auto; width:46px; height:46px;
  border-radius:50%; background:rgba(255,59,78,.9);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.8);
  transition:opacity .2s ease, transform .2s ease;
}
.card:hover .card-play{ opacity:1; transform:scale(1); }
.card-play svg{ width:18px; height:18px; color:#fff; }
.card-info{ padding:11px 12px 13px; }
.card-info h4{
  font-size:.87rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-info p{
  margin:4px 0 0; font-size:.74rem; color:var(--text-faint);
}
.top-card{ width:210px; }
.top-card .card-poster{ aspect-ratio:16/22; }
.watch-progress{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:2;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
}
.watch-progress i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--ember), var(--gold));
}
.watch-progress + .card-eps,
.card-poster:has(.watch-progress) .card-eps{ bottom:20px; }

/* palettes de vignettes générées (pas d'images réelles) */
.p1{ background:linear-gradient(150deg,#3a1220,#160a12); }
.p2{ background:linear-gradient(150deg,#1a2438,#0c1018); }
.p3{ background:linear-gradient(150deg,#2c1c3a,#120d1a); }
.p4{ background:linear-gradient(150deg,#3a2a10,#160f0a); }
.p5{ background:linear-gradient(150deg,#123328,#0a1614); }
.p6{ background:linear-gradient(150deg,#331630,#120a16); }

/* ---------------------------------------------------------
   Bandeau CTA + footer
--------------------------------------------------------- */
.cta-band{
  margin:0 0 80px;
  border-radius:var(--radius-l);
  padding:clamp(32px,5vw,56px);
  background:linear-gradient(120deg, #1c1018, #150c14 55%, #1a0e12);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.cta-band h3{ font-size:1.5rem; margin-bottom:8px; }
.cta-band p{ color:var(--text-muted); margin:0; max-width:440px; }

.footer{ border-top:1px solid var(--line); padding:44px 0 30px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr);
  gap:32px; margin-bottom:32px;
}
.footer-grid h5{ font-size:.82rem; color:var(--text-muted); margin-bottom:14px; font-weight:600; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul a{ font-size:.86rem; color:var(--text-faint); }
.footer-grid ul a:hover{ color:var(--text); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--text-faint); flex-wrap:wrap; gap:12px;
}

/* ---------------------------------------------------------
   Panneau Admin
--------------------------------------------------------- */
.admin{ display:flex; min-height:100vh; }
.admin-sidebar{
  width:250px; flex-shrink:0;
  background:var(--bg-soft);
  border-right:1px solid var(--line);
  padding:22px 16px;
  display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; height:100vh;
}
.admin-brand{ display:flex; align-items:center; gap:10px; padding:0 8px; }
.admin-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.admin-nav a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:var(--radius-s);
  color:var(--text-muted); font-size:.88rem; font-weight:500;
}
.admin-nav a svg{ width:17px; height:17px; flex-shrink:0; }
.admin-nav a:hover{ background:var(--card); color:var(--text); }
.admin-nav a.is-active{ background:var(--ember-soft); color:var(--text); border:1px solid rgba(255,59,78,.35); }
.admin-nav .group-label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); padding:14px 12px 4px;
}
.admin-user{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:var(--radius-s); background:var(--card);
  border:1px solid var(--line);
}
.admin-user .avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--ember),var(--ember-dark));
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem;
}
.admin-user div p{ margin:0; font-size:.82rem; font-weight:600; }
.admin-user div span{ font-size:.72rem; color:var(--text-faint); }

.admin-main{ flex:1; min-width:0; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 30px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(10,10,16,.85); backdrop-filter:blur(6px); z-index:20;
}
.admin-topbar h2{ font-size:1.15rem; }
.admin-topbar .sub{ color:var(--text-faint); font-size:.82rem; margin-top:2px; }
.admin-content{ padding:28px 30px 60px; }
.admin-view{ display:none; }
.admin-view.active{ display:block; animation:fadeIn .18s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none; } }

.form-page{ max-width:760px; }
.form-section-title{ font-size:.95rem; font-weight:700; margin:26px 0 14px; display:flex; align-items:center; gap:10px; }
.form-section-title .dash{ width:18px; height:3px; border-radius:3px; background:var(--ember); display:inline-block; }

.image-drop{
  display:flex; align-items:center; gap:16px;
  padding:16px; border:1px dashed var(--line); border-radius:var(--radius-m);
  background:var(--bg-elevated);
}
.image-drop .preview{
  width:74px; height:104px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(150deg,#26262f,#151519);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:1px solid var(--line);
}
.image-drop .preview img{ width:100%; height:100%; object-fit:cover; }
.image-drop .preview svg{ width:22px; height:22px; color:var(--text-faint); }
.image-drop .drop-text{ font-size:.82rem; color:var(--text-faint); }
.image-drop input[type=file]{ font-size:.8rem; color:var(--text-muted); }

.source-row{ display:flex; gap:10px; margin-bottom:10px; align-items:center; }
.source-row input{ flex:1; }
.source-row .icon-btn{ flex-shrink:0; }
.add-source-btn{ margin-top:2px; }

.inline-form{ display:flex; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.inline-form input, .inline-form select{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:9px 12px; color:var(--text); font-size:.85rem; font-family:inherit; outline:none;
}
.inline-form input:focus, .inline-form select:focus{ border-color:var(--ember); }

.category-list{ display:flex; flex-wrap:wrap; gap:10px; padding:20px; }
.category-chip{
  display:flex; align-items:center; gap:10px;
  padding:8px 8px 8px 16px; border-radius:99px;
  background:var(--bg-elevated); border:1px solid var(--line); font-size:.85rem; font-weight:600;
}
.trending-admin-intro{ padding:18px 20px 0; color:var(--text-muted); font-size:.86rem; line-height:1.6; }
.trending-selected{ padding:16px 20px; display:grid; gap:9px; }
.trending-admin-item{ display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--bg-elevated); }
.trending-admin-item .trend-position{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--ember-soft); color:var(--ember); font-size:.78rem; font-weight:700; }
.trending-admin-item .trend-name{ flex:1; font-size:.88rem; font-weight:600; }
.trending-admin-item .trend-type{ color:var(--text-faint); font-size:.76rem; }
.trending-picker-wrap{ padding:0 20px 20px; }
.trending-picker-wrap label{ display:block; margin-bottom:7px; color:var(--text-muted); font-size:.8rem; }
.trending-picker-row{ display:flex; gap:10px; }
.trending-picker-row select{ min-width:0; flex:1; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-s); padding:9px 12px; color:var(--text); font-family:inherit; }
.trending-count{ margin-right:auto; align-self:center; color:var(--text-faint); font-size:.8rem; }

.toast{
  position:fixed; bottom:24px; right:24px; z-index:400;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--ember);
  padding:13px 18px; border-radius:var(--radius-s); font-size:.86rem;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:none; }

.admin-modal{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,3,7,.72);backdrop-filter:blur(5px)}
.admin-modal.open{display:flex}.admin-modal-card{width:min(100%,480px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden}.admin-modal-card .icon-btn{font-size:1.2rem}

.placeholder-view{ padding:40px; text-align:center; color:var(--text-muted); }
.placeholder-view svg{ width:34px; height:34px; color:var(--text-faint); margin-bottom:14px; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:20px; position:relative; overflow:hidden;
}
.stat-card .icon{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.stat-card .icon svg{ width:18px; height:18px; }
.stat-card h3{ font-size:1.65rem; margin-bottom:2px; }
.stat-card p.label{ margin:0; color:var(--text-faint); font-size:.82rem; }
.stat-card .delta{ font-size:.76rem; font-weight:600; margin-top:10px; display:flex; align-items:center; gap:4px; }
.delta.up{ color:#4fd18b; }
.delta.down{ color:var(--ember); }

.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m);
  overflow:hidden; margin-bottom:24px;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.panel-head h3{ font-size:1rem; }
.panel-body{ padding:6px 0; }
.catalog-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.01)}
.catalog-search{display:flex;align-items:center;gap:8px;flex:1 1 220px;max-width:360px;padding:0 11px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg-elevated);color:var(--text-faint)}
.catalog-search input{width:100%;padding:9px 0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.85rem}.catalog-filters select{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg-elevated);color:var(--text);font:inherit;font-size:.85rem;outline:0}
.genre-filter-wrap{position:relative}.genre-filter-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:20;width:220px;max-height:250px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card);box-shadow:0 14px 30px rgba(0,0,0,.35)}.genre-filter-menu label{display:flex;gap:9px;align-items:center;padding:7px 8px;border-radius:6px;font-size:.83rem;cursor:pointer}.genre-filter-menu label:hover{background:var(--bg-elevated)}
.genre-badges,.genre-editor{display:flex;flex-wrap:wrap;gap:6px}.genre-badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:99px;background:var(--ember-soft);color:var(--ember);font-size:.7rem;white-space:nowrap}.genre-editor{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg-elevated)}.genre-editor label{display:flex;align-items:center;gap:5px;color:var(--text-muted);font-size:.8rem;cursor:pointer}.trend-toggle.is-trending{color:var(--gold);border-color:rgba(242,181,68,.55);background:rgba(242,181,68,.1);opacity:1;cursor:default}.trend-remove-inline{color:var(--ember);border-color:rgba(255,59,78,.35)}.trend-remove-inline:hover{color:#fff;border-color:var(--ember);background:var(--ember-soft)}.empty-table{padding:30px 20px;color:var(--text-faint);text-align:center}

table{ width:100%; border-collapse:collapse; }
th{
  text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-faint); padding:12px 20px; border-bottom:1px solid var(--line); font-weight:600;
}
td{ padding:13px 20px; font-size:.87rem; border-bottom:1px solid var(--line); }
tr:last-child td{ border-bottom:none; }
.row-thumb{ display:flex; align-items:center; gap:12px; }
.row-thumb .thumb{ width:40px; height:56px; border-radius:6px; flex-shrink:0; }

.pill{ padding:4px 11px; border-radius:99px; font-size:.72rem; font-weight:600; display:inline-block; }
.pill.ok{ background:rgba(79,209,139,.14); color:#4fd18b; }
.pill.pending{ background:rgba(242,181,68,.14); color:var(--gold); }
.pill.off{ background:rgba(154,151,166,.14); color:var(--text-muted); }

.icon-btn{
  width:30px; height:30px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); color:var(--text-muted);
  transition:all .15s ease;
}
.icon-btn:hover{ color:var(--text); border-color:var(--text-muted); }
.icon-btn svg{ width:14px; height:14px; }
.actions-cell{ display:flex; gap:6px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.8rem; color:var(--text-muted); font-weight:500; }
.field input, .field select, .field textarea{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:10px 12px; color:var(--text); font-size:.88rem; font-family:inherit; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ember); }
.field textarea{ resize:vertical; min-height:80px; }
.form-actions{ padding:16px 20px; display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); }

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width:980px){
  .nav-links{ display:none; }
  .burger{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--bg-elevated); color:var(--text); }
  .search-field{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .admin-sidebar{ position:fixed; left:-260px; z-index:200; transition:left .25s ease; box-shadow:0 0 40px rgba(0,0,0,.5); }
  .admin-sidebar.open{ left:0; }
  .admin-menu-btn{ display:flex !important; }
}
@media (min-width:981px){
  .admin-menu-btn{ display:none; }
}
@media (max-width:640px){
  .hero{ height:570px; min-height:0; }
  .hero-slide{ padding:120px 0 64px; align-items:flex-end; }
  .hero-desc{ font-size:.92rem; }
  .hero-meta{ gap:8px; flex-wrap:wrap; }
  .card{ width:150px; }
  .footer-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .form-grid{ grid-template-columns:1fr; }
  .catalog-search{max-width:none;flex-basis:100%}.catalog-filters select{flex:1}.genre-filter-menu{left:0;right:auto}
}