/* ============================================================
   MENTALEMENT 1V1 — Design System v2
   Concept : "Cinéma Club Privé" — Aéré · Fluide · Premium
   Espacements généreux · Ombres profondes · Rayons modernes
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ── TOKENS ── */
:root {
    /* Surfaces */
    --bg:       #030305;
    --bg2:      #07070b;
    --surface:  #0c0c13;
    --surface2: #111119;
    --surface3: #16161f;
    --surface4: #1c1c27;

    /* Bordures */
    --border:   rgba(255,255,255,0.048);
    --border2:  rgba(255,255,255,0.085);
    --border3:  rgba(255,255,255,0.13);

    /* Accent */
    --accent:        #c8965c;
    --accent-rgb:    200,150,92;
    --accent-bright: #e8b07a;
    --accent2:       #e8b07a;
    --accent-dim:    rgba(200,150,92,0.09);
    --glow:          rgba(200,150,92,0.24);
    --glow2:         rgba(200,150,92,0.08);

    /* Texte */
    --text:       #f0f0f8;
    --text-soft:  #7a7e8c;
    --text-muted: #35384a;

    /* États */
    --success: #2fc97a;
    --danger:  #e84c4c;
    --star:    #f0a732;

    /* Gradient filtre */
    --filter-gradient: linear-gradient(160deg, rgba(200,150,92,0.07) 0%, transparent 55%);

    /* Typos */
    --font-d: 'Outfit', sans-serif;
    --font-b: 'Manrope', sans-serif;

    /* Rayons — généreux et cohérents */
    --r-xs:  6px;
    --r-sm:  10px;
    --r:     14px;
    --r-md:  18px;
    --r-lg:  22px;
    --r-xl:  28px;
    --r-pill: 100px;

    /* Ombres */
    --shadow-sm:  0 2px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
    --shadow-md:  0 8px 28px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
    --shadow-lg:  0 20px 56px rgba(0,0,0,.65), 0 6px 16px rgba(0,0,0,.35);
    --shadow-xl:  0 40px 100px rgba(0,0,0,.8), 0 12px 32px rgba(0,0,0,.4);
    --shadow-glow: 0 0 32px rgba(var(--accent-rgb),.22), 0 8px 24px rgba(0,0,0,.4);

    /* Espacement */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --card-h: 292px;
}

/* Thèmes couleur */
body.theme-midnight { --accent:#6b8cff;--accent-rgb:107,140,255;--accent-bright:#8aa4ff;--accent2:#9ab0ff;--accent-dim:rgba(107,140,255,.09);--glow:rgba(107,140,255,.22);--glow2:rgba(107,140,255,.07);--filter-gradient:linear-gradient(160deg,rgba(107,140,255,.07) 0%,transparent 55%); }
body.theme-cyber    { --accent:#00e887;--accent-rgb:0,232,135;--accent-bright:#22f29a;--accent2:#44f5a8;--accent-dim:rgba(0,232,135,.09);--glow:rgba(0,232,135,.22);--glow2:rgba(0,232,135,.07);--filter-gradient:linear-gradient(160deg,rgba(0,232,135,.07) 0%,transparent 55%); }
body.theme-crimson  { --accent:#e85555;--accent-rgb:232,85,85;--accent-bright:#f07070;--accent2:#f08080;--accent-dim:rgba(232,85,85,.09);--glow:rgba(232,85,85,.22);--glow2:rgba(232,85,85,.07);--filter-gradient:linear-gradient(160deg,rgba(232,85,85,.07) 0%,transparent 55%); }

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none; }
*::-webkit-scrollbar { display:none; }
* { -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; }
html { scroll-behavior:smooth; }

/* Transitions thématiques uniquement sur les éléments qui en bénéficient */
* { transition-property:color,background-color,border-color,box-shadow;transition-duration:0s; }
.stats-box,.stat-val,.section-label,.card-badge,.right-tab.active,.btn-add,
.cal-card.cal-soon::before,.filter-btn,.filter-btn::after,.right-tab,
.user-pill,.navbar-stats,.badge-en-cours,.badge-vue,.badge-a-voir {
    transition:color .45s ease,background-color .45s ease,border-color .45s ease,box-shadow .45s ease;
}

body {
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-b);
    margin:0; padding:0;
    min-height:100vh;
    /* Grain cinéma subtil */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
    background-repeat:repeat;
}

/* ── KEYFRAMES ── */
@keyframes cardIn    { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes scaleIn   { from{opacity:0;transform:scale(.93) translateY(6px)} to{opacity:1;transform:none} }
@keyframes slideUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes shimmer   { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulseSoft { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes glowPulse { 0%,100%{box-shadow:0 0 20px rgba(var(--accent-rgb),.15)} 50%{box-shadow:0 0 40px rgba(var(--accent-rgb),.35)} }

/* ══════════════════════════════════════════
   LOADING
══════════════════════════════════════════ */
#loading-overlay {
    position:fixed;inset:0;background:var(--bg);display:flex;
    align-items:center;justify-content:center;z-index:9999;
    flex-direction:column;gap:var(--space-5);
}
#loading-overlay::before {
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:600px;height:600px;
    background:radial-gradient(ellipse,rgba(var(--accent-rgb),.055) 0%,transparent 64%);
    pointer-events:none;
}
.loader {
    width:36px;height:36px;
    border:1.5px solid var(--border2);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin .75s linear infinite;
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
#hero-screen { display:none;min-height:100vh;background:var(--bg);position:relative;overflow:hidden; }

#hero-screen::before {
    content:'';position:absolute;top:-28%;left:50%;transform:translateX(-50%);
    width:1100px;height:900px;
    background:
        radial-gradient(ellipse 60% 50% at 30% 40%,rgba(var(--accent-rgb),.08) 0%,transparent 70%),
        radial-gradient(ellipse 50% 40% at 70% 60%,rgba(107,60,20,.09) 0%,transparent 70%);
    pointer-events:none;z-index:0;
}
#hero-screen::after {
    content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent 5%,rgba(var(--accent-rgb),.2) 35%,rgba(var(--accent-rgb),.32) 50%,rgba(var(--accent-rgb),.2) 65%,transparent 95%);
}

.hero-nav {
    max-width:1200px;margin:0 auto;padding:36px 52px;
    display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;
}
.hero-logo {
    font-family:var(--font-d);font-weight:900;font-size:1.05em;
    letter-spacing:-.5px;color:var(--text);
    display:flex;align-items:center;gap:10px;
}
.hero-logo::before {
    content:'';display:inline-block;width:7px;height:7px;
    background:var(--accent);border-radius:50%;
    box-shadow:0 0 12px var(--glow);
    animation:pulseSoft 2.5s ease infinite;flex-shrink:0;
}
.hero-logo span { color:var(--accent); }

.hero-body {
    max-width:1200px;margin:0 auto;padding:88px 52px 108px;
    display:grid;grid-template-columns:1fr 440px;gap:88px;
    align-items:center;position:relative;z-index:2;
}
.hero-text-col { display:flex;flex-direction:column;align-items:flex-start; }

.hero-badge {
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(var(--accent-rgb),.08);
    border:1px solid rgba(var(--accent-rgb),.22);
    border-radius:var(--r-pill);
    padding:7px 18px;font-size:.6em;font-weight:700;
    color:var(--accent);font-family:var(--font-d);
    letter-spacing:1.8px;text-transform:uppercase;
    margin-bottom:36px;
    box-shadow:0 0 0 1px rgba(var(--accent-rgb),.06),inset 0 1px 0 rgba(255,255,255,.04);
    animation:slideUp .7s cubic-bezier(.16,1,.3,1) both;animation-delay:.1s;
}
.hero-title {
    font-family:var(--font-d);font-weight:900;
    font-size:clamp(2.8em,5vw,4.6em);line-height:1;
    margin-bottom:28px;color:var(--text);letter-spacing:-2.5px;
    animation:slideUp .7s cubic-bezier(.16,1,.3,1) both;animation-delay:.2s;
}
.hero-title span { color:transparent;-webkit-text-stroke:1.5px var(--accent); }
.hero-title em   { font-style:normal;color:var(--accent);-webkit-text-stroke:0; }
.hero-sub {
    font-size:1em;color:var(--text-soft);line-height:1.8;max-width:480px;
    margin-bottom:48px;font-weight:300;letter-spacing:.01em;
    animation:slideUp .7s cubic-bezier(.16,1,.3,1) both;animation-delay:.3s;
}
.hero-cta {
    display:flex;gap:14px;flex-wrap:wrap;
    animation:slideUp .7s cubic-bezier(.16,1,.3,1) both;animation-delay:.4s;
}

.btn-hero-primary {
    background:var(--accent);color:#fff;border:none;
    border-radius:var(--r-md);padding:16px 40px;
    font-family:var(--font-d);font-weight:700;font-size:.84em;
    cursor:pointer;letter-spacing:.4px;
    transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease;
    box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(255,255,255,.15);
    position:relative;overflow:hidden;
}
.btn-hero-primary::after {
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 52%);
    pointer-events:none;
}
.btn-hero-primary:hover  { transform:translateY(-3px) scale(1.03);box-shadow:0 0 48px rgba(var(--accent-rgb),.38),var(--shadow-lg); }
.btn-hero-primary:active { transform:scale(.97); }

.btn-hero-secondary {
    background:rgba(255,255,255,.04);color:var(--text-soft);
    border:1px solid var(--border2);
    border-radius:var(--r-md);padding:16px 40px;
    font-family:var(--font-d);font-weight:600;font-size:.84em;
    cursor:pointer;transition:all .22s ease;letter-spacing:.3px;
    backdrop-filter:blur(8px);
}
.btn-hero-secondary:hover {
    border-color:var(--border3);color:var(--text);
    background:rgba(255,255,255,.07);
    transform:translateY(-1px);
    box-shadow:var(--shadow-sm);
}

/* Éventail de posters */
.hero-visual {
    position:relative;height:480px;
    display:flex;align-items:center;justify-content:center;
    animation:slideUp .7s cubic-bezier(.16,1,.3,1) both;animation-delay:.25s;
}
.hero-preview { position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center; }

.hero-poster {
    position:absolute;border-radius:var(--r);overflow:hidden;
    box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.07);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s,opacity .4s;
    cursor:pointer;
}
.hero-poster img { width:100%;height:100%;object-fit:cover;display:block; }
.hero-poster:nth-child(1) { width:120px;height:175px;top:50%;left:50%;transform:translate(-158px,-50%) rotate(-8deg);z-index:1;opacity:.5; }
.hero-poster:nth-child(2) { width:142px;height:206px;top:50%;left:50%;transform:translate(-92px,-50%) rotate(-4deg);z-index:2;opacity:.75; }
.hero-poster:nth-child(3) { width:168px;height:244px;top:50%;left:50%;transform:translate(-84px,-50%) rotate(0deg);z-index:5;box-shadow:0 36px 80px rgba(0,0,0,.8),0 0 0 1px rgba(var(--accent-rgb),.22),0 0 64px rgba(var(--accent-rgb),.13); }
.hero-poster:nth-child(4) { width:142px;height:206px;top:50%;left:50%;transform:translate(30px,-50%) rotate(4deg);z-index:2;opacity:.75; }
.hero-poster:nth-child(5) { width:120px;height:175px;top:50%;left:50%;transform:translate(82px,-50%) rotate(8deg);z-index:1;opacity:.5; }
.hero-poster:nth-child(6) { display:none; }
.hero-poster:hover { z-index:10;box-shadow:var(--shadow-xl),0 0 0 1px rgba(var(--accent-rgb),.3);opacity:1 !important; }
.hero-poster:nth-child(1):hover { transform:translate(-158px,-56%) scale(1.09) rotate(0deg) !important; }
.hero-poster:nth-child(2):hover { transform:translate(-92px,-56%) scale(1.09) rotate(0deg) !important; }
.hero-poster:nth-child(3):hover { transform:translate(-84px,-56%) scale(1.09) !important; }
.hero-poster:nth-child(4):hover { transform:translate(30px,-56%) scale(1.09) rotate(0deg) !important; }
.hero-poster:nth-child(5):hover { transform:translate(82px,-56%) scale(1.09) rotate(0deg) !important; }

/* Features */
.hero-features {
    max-width:1200px;margin:0 auto;padding:0 52px 88px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
    animation:slideUp .7s cubic-bezier(.16,1,.3,1) both;animation-delay:.5s;
    position:relative;z-index:2;
}
.hero-feature {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:32px 28px;
    display:flex;align-items:flex-start;gap:18px;
    transition:border-color .25s,transform .25s,box-shadow .25s;
    position:relative;overflow:hidden;
}
.hero-feature::before {
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.25),transparent);
    opacity:0;transition:opacity .25s;
}
.hero-feature:hover {
    border-color:rgba(var(--accent-rgb),.2);
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}
.hero-feature:hover::before { opacity:1; }
.hero-feature-icon  { font-size:1.5em;flex-shrink:0;margin-top:2px; }
.hero-feature-title { font-family:var(--font-d);font-weight:700;font-size:.88em;margin-bottom:7px;color:var(--text); }
.hero-feature-desc  { font-size:.74em;color:var(--text-soft);line-height:1.75;font-weight:300; }

/* ══════════════════════════════════════════
   AUTH
══════════════════════════════════════════ */
#auth-screen {
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:var(--bg);padding:var(--space-5);
    animation:fadeIn .3s ease;position:relative;overflow:hidden;
}
#auth-screen::before {
    content:'';position:absolute;top:-20%;left:50%;transform:translateX(-50%);
    width:800px;height:800px;
    background:radial-gradient(ellipse,rgba(var(--accent-rgb),.055) 0%,transparent 62%);
    pointer-events:none;
}

.auth-box {
    width:100%;max-width:420px;
    background:var(--surface);
    border:1px solid var(--border2);
    border-radius:var(--r-xl);
    padding:52px 44px;
    position:relative;
    animation:scaleIn .4s cubic-bezier(.16,1,.3,1) both;
    box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-box::before {
    content:'';position:absolute;top:0;left:14%;right:14%;height:1px;
    background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.85;
}
.auth-logo { font-family:var(--font-d);font-weight:900;font-size:1.6em;letter-spacing:-1px;margin-bottom:6px;color:var(--text); }
.auth-logo span { color:var(--accent); }
.auth-sub { font-size:.76em;color:var(--text-muted);margin-bottom:36px;letter-spacing:.01em; }

.auth-tabs {
    display:flex;background:var(--bg2);
    border-radius:var(--r-sm);padding:4px;
    margin-bottom:28px;gap:4px;border:1px solid var(--border);
}
.auth-tab {
    flex:1;padding:11px;border-radius:var(--r-xs);
    border:none;background:transparent;color:var(--text-muted);
    font-family:var(--font-d);font-size:.67em;font-weight:700;
    cursor:pointer;transition:all .2s ease;letter-spacing:.6px;
}
.auth-tab.active {
    background:var(--surface3);color:var(--text);
    box-shadow:var(--shadow-sm);
}

.field { margin-bottom:16px; }
.field label {
    display:block;font-size:.58em;font-weight:700;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:1.6px;margin-bottom:9px;font-family:var(--font-d);
}
.field input {
    width:100%;background:var(--bg2);border:1px solid var(--border);
    border-radius:var(--r-sm);padding:14px 16px;color:var(--text);
    font-family:var(--font-b);font-size:.88em;outline:none;
    transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1),var(--shadow-sm);
    background:rgba(var(--accent-rgb),.025);
}
.field input::placeholder { color:var(--text-muted); }

.btn-primary {
    width:100%;padding:15px;
    background:var(--accent);border:none;
    border-radius:var(--r-sm);color:#fff;
    font-family:var(--font-d);font-weight:700;font-size:.8em;
    letter-spacing:.6px;cursor:pointer;
    transition:opacity .2s,transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
    margin-top:10px;
    box-shadow:0 0 28px rgba(var(--accent-rgb),.26),var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.12);
    position:relative;overflow:hidden;
}
.btn-primary::before {
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 52%);
    pointer-events:none;
}
.btn-primary:hover  { opacity:.9;transform:translateY(-1px);box-shadow:0 0 40px rgba(var(--accent-rgb),.34),var(--shadow-lg); }
.btn-primary:active { opacity:.75;transform:scale(.98); }
.btn-primary:disabled { opacity:.32;cursor:not-allowed;box-shadow:none;transform:none; }

.auth-err {
    background:rgba(232,76,76,.07);border:1px solid rgba(232,76,76,.22);
    border-radius:var(--r-sm);padding:11px 15px;
    font-size:.77em;color:var(--danger);margin-bottom:14px;display:none;
}
.auth-ok {
    background:rgba(47,201,122,.07);border:1px solid rgba(47,201,122,.2);
    border-radius:var(--r-sm);padding:11px 15px;
    font-size:.77em;color:var(--success);margin-bottom:14px;display:none;
}

/* ══════════════════════════════════════════
   APP SCREEN
══════════════════════════════════════════ */
#app-screen {
    display:none;
    padding:var(--space-6) var(--space-5) var(--space-8);
    animation:fadeIn .3s ease;position:relative;
}
#app-screen::before {
    content:'';position:fixed;top:0;left:0;right:0;height:520px;
    background:var(--filter-gradient);pointer-events:none;z-index:0;
    transition:background .6s ease;
}
#app-screen > * { position:relative;z-index:1; }

/* ── NAVBAR ── */
.top-bar { max-width:1500px;margin:0 auto var(--space-5); }

.navbar-main {
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--space-5);padding:18px 0 15px;
    border-bottom:1px solid var(--border);
}
.navbar-filters {
    display:flex;align-items:center;gap:2px;
    padding:13px 0 6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.navbar-filters::-webkit-scrollbar { display:none; }

.logo {
    font-family:var(--font-d);font-weight:900;font-size:1.12em;
    letter-spacing:-.5px;color:var(--text);
    display:flex;align-items:center;gap:9px;
}
.logo::before {
    content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;
    box-shadow:0 0 10px var(--glow);animation:pulseSoft 2.5s ease infinite;flex-shrink:0;
}
.logo span { color:var(--accent); }
.logo sub {
    font-size:.34em;color:var(--text-muted);font-weight:400;
    margin-left:7px;vertical-align:middle;
    font-family:var(--font-b);letter-spacing:2.5px;text-transform:uppercase;
}

/* Stats pill navbar */
.navbar-stats {
    display:flex;align-items:center;
    background:rgba(255,255,255,.025);
    border:1px solid var(--border);
    border-radius:var(--r-pill);
    padding:9px 4px;cursor:pointer;
    transition:border-color .25s,background .25s,box-shadow .25s;
    backdrop-filter:blur(12px);
}
.navbar-stats:hover {
    border-color:rgba(var(--accent-rgb),.32);
    background:rgba(255,255,255,.045);
    box-shadow:var(--shadow-sm);
}
.navbar-stat {
    display:flex;flex-direction:column;align-items:center;
    gap:2px;padding:0 24px;
}
.navbar-stat-val {
    font-family:var(--font-d);font-size:1.1em;font-weight:800;
    color:var(--accent);line-height:1;letter-spacing:-.5px;
    transition:color .45s ease,transform .2s;
}
.navbar-stat-val.counting { transform:scale(1.12); }
.navbar-stat-label {
    font-size:.43em;font-weight:700;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:1.4px;
    font-family:var(--font-d);margin-top:2px;
}
.navbar-stat-sep { width:1px;height:28px;background:var(--border); }

.header-right { display:flex;align-items:center;gap:var(--space-2); }

/* User pill */
.user-pill {
    display:flex;align-items:center;gap:9px;
    background:rgba(255,255,255,.035);
    border:1px solid var(--border2);
    border-radius:var(--r-pill);
    padding:6px 18px 6px 6px;
    font-size:.73em;font-weight:600;cursor:pointer;
    transition:border-color .2s,background .2s,box-shadow .2s;
    backdrop-filter:blur(10px);
}
.user-pill:hover {
    border-color:rgba(var(--accent-rgb),.38);
    background:rgba(255,255,255,.06);
    box-shadow:var(--shadow-sm);
}
.user-avatar {
    width:30px;height:30px;border-radius:50%;
    background:rgba(var(--accent-rgb),.12);
    border:1.5px solid rgba(var(--accent-rgb),.45);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-d);font-size:.74em;font-weight:800;
    color:var(--accent);
    box-shadow:0 0 12px rgba(var(--accent-rgb),.15);
}

/* ── STATS BOX ── */
.stats-box {
    display:flex;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:22px 28px;margin-bottom:var(--space-5);
    cursor:pointer;position:relative;overflow:hidden;
    transition:border-color .28s,box-shadow .28s,transform .28s;
    box-shadow:var(--shadow-sm);
}
.stats-box::before {
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),transparent);
    opacity:.32;
}
.stats-box:hover {
    border-color:rgba(var(--accent-rgb),.22);
    box-shadow:var(--shadow-md);
    transform:translateY(-1px);
}
.stat-item { flex:1;padding:0 24px;border-right:1px solid var(--border); }
.stat-item:first-child { padding-left:0; }
.stat-item:last-child  { border-right:none; }
.stat-val {
    font-family:var(--font-d);font-size:2.1em;font-weight:900;
    color:var(--accent);line-height:1;letter-spacing:-1.5px;
}
.stat-label {
    font-size:.51em;text-transform:uppercase;color:var(--text-muted);
    font-weight:700;margin-top:5px;letter-spacing:1.8px;font-family:var(--font-d);
}
.stat-bar { margin-top:11px;height:2px;background:rgba(255,255,255,.05);border-radius:10px;overflow:hidden; }
.stat-bar-fill {
    height:100%;
    background:linear-gradient(90deg,var(--accent),var(--accent-bright));
    border-radius:10px;
    transition:width .9s cubic-bezier(.4,0,.2,1);opacity:.7;
}

/* ── SEARCH ── */
.search-container {
    display:flex;align-items:center;
    background:var(--surface);
    border:1px solid var(--border2);
    border-radius:var(--r-lg);
    padding:7px 12px;
    position:relative;margin-bottom:var(--space-4);
    transition:border-color .2s,box-shadow .2s;
    box-shadow:var(--shadow-sm);
}
.search-container:focus-within {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.09),var(--shadow-md);
}
.search-icon { color:var(--text-muted);padding:0 10px;font-size:1em; }
.search-container input {
    flex:1;background:transparent;border:none;color:var(--text);
    outline:none;padding:11px 6px;font-family:var(--font-b);font-size:.88em;
}
.search-container input::placeholder { color:var(--text-muted); }

.stat-dropdown {
    background:rgba(255,255,255,.045);color:var(--text-soft);
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    padding:9px 12px;font-size:.67em;font-weight:600;
    margin-right:7px;cursor:pointer;outline:none;
    font-family:var(--font-b);transition:border-color .18s;
}
.stat-dropdown:focus { border-color:var(--accent); }

.search-type-toggle {
    display:flex;align-items:center;gap:4px;
    margin-right:8px;flex-shrink:0;
}
.stype-btn {
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    color:var(--text-muted);
    font-size:.85em;cursor:pointer;
    transition:background .2s,border-color .2s,color .2s,transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.stype-btn:hover:not(.active) {
    color:var(--text-soft);
    border-color:var(--border2);
    background:rgba(255,255,255,.07);
}
.stype-btn.active {
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    box-shadow:0 0 14px rgba(var(--accent-rgb),.3),inset 0 1px 0 rgba(255,255,255,.12);
}
.stype-btn:active { transform:scale(.92); }

.btn-add {
    background:var(--accent);color:#fff;border:none;
    border-radius:var(--r-sm);
    padding:11px 22px;font-weight:700;font-size:.72em;
    cursor:pointer;font-family:var(--font-d);letter-spacing:.4px;
    transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,opacity .18s;
    white-space:nowrap;
    box-shadow:0 0 18px rgba(var(--accent-rgb),.22),var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-add:hover { opacity:.9;transform:scale(1.05);box-shadow:var(--shadow-glow); }
.btn-add:active { opacity:.75;transform:scale(.97); }

#suggestions {
    position:absolute;top:calc(100% + 10px);left:0;width:100%;
    background:var(--surface2);
    border-radius:var(--r-lg);
    display:none;z-index:200;
    border:1px solid var(--border2);overflow:hidden;
    box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.03);
    backdrop-filter:blur(20px);
}

/* ── CONTROLS ── */
.controls-row {
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:var(--space-5);flex-wrap:wrap;gap:var(--space-3);
}
.filter-bar { display:flex;gap:4px;flex-wrap:wrap; }

.filter-btn {
    background:transparent;border:none;color:var(--text-muted);
    padding:13px 24px;border-radius:var(--r-sm);
    font-size:.8em;font-weight:700;cursor:pointer;
    transition:color .22s,background .18s,transform .12s;
    font-family:var(--font-d);white-space:nowrap;
    position:relative;letter-spacing:.4px;
}
.filter-btn::after {
    content:'';position:absolute;bottom:5px;left:50%;
    transform:translateX(-50%) scaleX(0);
    width:55%;height:1.5px;background:var(--accent);border-radius:2px;
    transition:transform .28s cubic-bezier(.34,1.56,.64,1),background .45s;
}
.filter-btn.active { color:var(--accent); }
.filter-btn.active::after { transform:translateX(-50%) scaleX(1); }
.filter-btn:hover:not(.active) { color:var(--text);background:rgba(255,255,255,.05); }
.filter-btn:active { transform:scale(.93);transition:transform .07s; }

.sort-pill {
    background:var(--surface2);border:1px solid var(--border);
    color:var(--text-muted);padding:9px 16px;
    border-radius:var(--r-pill);
    font-size:.64em;font-weight:600;
    display:flex;align-items:center;gap:7px;
    transition:border-color .2s,color .2s,box-shadow .2s;
}
.sort-pill:hover { border-color:var(--border2);color:var(--text-soft);box-shadow:var(--shadow-sm); }
.sort-select { background:transparent;border:none;color:var(--text-soft);font:inherit;outline:none;cursor:pointer; }

/* ── SECTION LABELS ── */
.section-label {
    font-size:.53em;font-weight:800;color:var(--text-muted);
    margin:40px 0 18px;text-transform:uppercase;letter-spacing:2.8px;
    display:flex;align-items:center;gap:14px;font-family:var(--font-d);
}
.section-label::after { content:'';flex:1;height:1px;background:var(--border); }
.section-count {
    background:var(--surface2);color:var(--text-muted);
    padding:3px 11px;border-radius:var(--r-pill);
    font-size:.9em;border:1px solid var(--border);
}

.section-wrap {
    border-radius:var(--r-lg);padding:16px;
    margin-bottom:10px;animation:slideUp .3s ease both;
}
.section-wrap-encours { background:rgba(var(--accent-rgb),.028);border:1px solid rgba(var(--accent-rgb),.08); }
.section-wrap-avoir   { background:rgba(232,76,76,.025);border:1px solid rgba(232,76,76,.07); }
.section-wrap-avenir  { background:rgba(var(--accent-rgb),.025);border:1px solid rgba(var(--accent-rgb),.1); }
.section-wrap-vue     { background:rgba(47,201,122,.022);border:1px solid rgba(47,201,122,.065); }

/* ── GRID ── */
.grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:18px;margin-bottom:8px;
}

/* ══════════════════════════════════════════
   CARDS — pièce maîtresse
══════════════════════════════════════════ */
.card {
    background:var(--surface);
    border-radius:var(--r-lg);
    overflow:hidden;cursor:grab;
    position:relative;
    border:1px solid var(--border);
    transition:transform .32s cubic-bezier(.34,1.56,.64,1),border-color .22s,box-shadow .32s;
    animation:cardIn .4s cubic-bezier(.16,1,.3,1) both;
    box-shadow:var(--shadow-sm);
}
.card::before {
    content:'';position:absolute;inset:0;border-radius:var(--r-lg);
    background:radial-gradient(ellipse at 50% 92%,rgba(var(--accent-rgb),.1) 0%,transparent 65%);
    opacity:0;transition:opacity .32s;z-index:1;pointer-events:none;
}
.card:hover {
    transform:translateY(-9px) scale(1.023);
    border-color:rgba(var(--accent-rgb),.52);
    box-shadow:0 24px 56px rgba(0,0,0,.58),0 0 0 1px rgba(var(--accent-rgb),.1),0 0 44px rgba(var(--accent-rgb),.07);
    will-change:transform;
}
.card:hover::before { opacity:1; }

.card img {
    width:100%;height:var(--card-h);object-fit:cover;display:block;
    transition:transform .48s cubic-bezier(.25,.46,.45,.94),opacity .35s;
    opacity:0;pointer-events:none;
}
.card img.loaded { opacity:1; }
.card:hover img { transform:scale(1.07); }

.card .img-placeholder {
    width:100%;height:var(--card-h);
    background:linear-gradient(160deg,var(--surface2) 0%,var(--surface3) 100%);
    position:absolute;top:0;left:0;
    display:flex;align-items:center;justify-content:center;
    font-size:2em;opacity:.1;
}

.card-overlay {
    position:absolute;bottom:0;left:0;right:0;
    padding:80px 15px 15px;
    background:linear-gradient(to top,rgba(3,3,5,1) 0%,rgba(3,3,5,.96) 38%,rgba(3,3,5,.55) 68%,transparent 100%);
    pointer-events:none;z-index:2;
}
.card-title { font-family:var(--font-d);font-size:.82em;font-weight:700;line-height:1.28;letter-spacing:-.2px;margin-top:6px; }
.card-rating { display:inline-flex;align-items:center;gap:3px;color:var(--star);font-size:.65em;font-weight:700;margin-top:3px; }
.card-type   { font-size:.58em;font-weight:500;color:rgba(255,255,255,.35);margin-top:2px; }

.card-badge {
    display:inline-flex;align-items:center;
    padding:3px 9px;border-radius:var(--r-xs);
    font-size:.51em;font-weight:800;letter-spacing:.7px;
    text-transform:uppercase;font-family:var(--font-d);
}
.badge-en-cours { background:rgba(var(--accent-rgb),.13);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.32); }
.badge-a-voir   { background:rgba(232,76,76,.11);color:var(--danger);border:1px solid rgba(232,76,76,.3); }
.badge-vue      { background:rgba(47,201,122,.1);color:var(--success);border:1px solid rgba(47,201,122,.24); }

.card-ep-next {
    position:absolute;top:11px;right:11px;
    background:rgba(0,0,0,.78);color:rgba(255,255,255,.88);
    padding:4px 9px;border-radius:var(--r-xs);
    font-size:.51em;font-weight:700;
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.08);z-index:3;
}

.card-actions {
    position:absolute;bottom:13px;right:13px;
    display:flex;gap:5px;
    opacity:0;transform:translateY(7px);
    transition:opacity .22s,transform .22s;
    pointer-events:all;z-index:10;
}
.card:hover .card-actions { opacity:1;transform:none; }

.qa-btn {
    width:30px;height:30px;
    border-radius:var(--r-xs);
    border:1px solid rgba(255,255,255,.1);
    background:rgba(3,3,5,.9);
    backdrop-filter:blur(12px);
    color:rgba(255,255,255,.78);
    font-size:11px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .18s,border-color .18s,transform .15s,box-shadow .15s;
}
.qa-btn:hover {
    background:var(--accent);border-color:var(--accent);color:#fff;
    transform:scale(1.18);
    box-shadow:0 4px 12px rgba(var(--accent-rgb),.35);
}

/* Drag */
.drag-handle {
    position:absolute;top:9px;left:9px;
    width:26px;height:26px;
    background:rgba(0,0,0,.7);
    border-radius:var(--r-xs);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .2s;cursor:grab;
    font-size:11px;color:rgba(255,255,255,.55);z-index:20;
}
.card:hover .drag-handle { opacity:1; }
.card.dragging { opacity:.3;transform:scale(.93);cursor:grabbing !important;border-color:var(--accent); }
.card.drag-over { border-color:var(--accent);border-style:dashed;transform:scale(1.032); }

/* Compact + List */
.grid.compact { grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px; }
.grid.compact .card img { height:178px; }
.grid.compact .card .img-placeholder { height:178px; }
.grid.compact .card-title { font-size:.72em; }

.list-view .grid { display:flex;flex-direction:column;gap:8px; }
.list-view .card { display:flex;flex-direction:row;align-items:center;border-radius:var(--r); }
.list-view .card img { width:52px;height:74px;flex-shrink:0;border-radius:0;opacity:1!important; }
.list-view .card .img-placeholder { width:52px;height:74px;font-size:.95em;position:relative; }
.list-view .card-overlay { position:relative;background:none;padding:0 16px;flex:1;display:flex;align-items:center;justify-content:space-between;z-index:auto; }
.list-view .card-badge { position:relative;top:auto;left:auto;margin-right:10px;flex-shrink:0; }
.list-view .card-ep-next { position:relative;top:auto;right:auto;background:var(--surface2); }
.list-view .card-actions { position:relative;bottom:auto;right:auto;opacity:1;transform:none; }
.list-view .drag-handle { display:none; }
.list-view .card:hover { transform:translateX(4px) scale(1);box-shadow:none; }
.list-view .card::before { display:none; }
.list-view .card-type { display:none; }

/* Skeleton */
.skeleton { background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);background-size:200% 100%;animation:shimmer 1.6s infinite;border-radius:var(--r-xs); }
.skeleton-card { border-radius:var(--r-lg);height:var(--card-h); }

/* Empty state */
.empty-state { text-align:center;padding:72px var(--space-5);color:var(--text-muted); }
.empty-state .big { font-size:2.6em;margin-bottom:14px;opacity:.12; }
.empty-state p { font-size:.84em;font-weight:300; }

/* ── MAIN LAYOUT ── */
.main-container { max-width:1500px;margin:0 auto;display:grid;grid-template-columns:1fr 358px;gap:52px; }

/* ── PANEL DROIT ── */
.right-header { font-family:var(--font-d);font-size:.56em;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:2.4px;margin-bottom:16px; }

.right-tab {
    flex:1;background:transparent;
    border:1px solid var(--border);color:var(--text-muted);
    padding:10px;border-radius:var(--r-sm);
    font-size:.62em;font-weight:700;cursor:pointer;
    font-family:var(--font-d);letter-spacing:.3px;
    transition:border-color .2s,color .2s,background .2s,box-shadow .2s;
}
.right-tab.active {
    background:var(--accent);color:#fff;
    border-color:var(--accent);
    box-shadow:0 4px 22px rgba(var(--accent-rgb),.3);
}
.right-tab:hover:not(.active) { border-color:rgba(var(--accent-rgb),.32);color:var(--text); }

/* ── CALENDAR ── */
.cal-card {
    background:var(--surface);
    border-radius:var(--r);
    padding:13px 16px;margin-bottom:9px;
    border:1px solid var(--border);
    display:flex;align-items:center;gap:14px;
    transition:border-color .22s,transform .22s,box-shadow .22s;
    position:relative;overflow:hidden;
    box-shadow:var(--shadow-sm);
}
.cal-card:hover {
    border-color:rgba(var(--accent-rgb),.32);
    transform:translateX(3px);
    box-shadow:var(--shadow-md);
}
.cal-card.cal-soon { border-color:rgba(var(--accent-rgb),.22);background:rgba(var(--accent-rgb),.022); }
.cal-card.cal-soon::before { content:'';position:absolute;left:0;top:0;bottom:0;width:2.5px;background:var(--accent);border-radius:0 2px 2px 0; }
.cal-date { font-size:.53em;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.4px;font-family:var(--font-d); }
.cal-name { font-size:.79em;font-weight:600;color:var(--text);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cal-days { font-size:.54em;color:var(--text-muted);margin-top:2px;font-weight:500; }
.cal-days.cal-soon-text { color:var(--accent);font-weight:700; }

/* ── FRIENDS ── */
.friends-search { display:flex;gap:8px;margin-bottom:16px; }
.friends-search input {
    flex:1;background:var(--surface2);
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    padding:10px 14px;color:var(--text);
    font-family:var(--font-b);font-size:.84em;
    outline:none;transition:border-color .2s,box-shadow .2s;
}
.friends-search input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.09); }
.friends-search button {
    background:var(--accent);border:none;
    border-radius:var(--r-sm);
    padding:10px 17px;color:#fff;
    font-family:var(--font-d);font-weight:700;font-size:.7em;
    cursor:pointer;white-space:nowrap;
    transition:opacity .2s,transform .2s,box-shadow .2s;
    box-shadow:0 0 14px rgba(var(--accent-rgb),.2);
}
.friends-search button:hover { opacity:.87;transform:translateY(-1px);box-shadow:0 0 22px rgba(var(--accent-rgb),.3); }

.friend-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:12px 15px;margin-bottom:9px;
    display:flex;align-items:center;gap:12px;
    transition:border-color .22s,transform .22s,box-shadow .22s;
    cursor:pointer;
}
.friend-card:hover {
    border-color:rgba(var(--accent-rgb),.32);
    transform:translateX(3px);
    box-shadow:var(--shadow-sm);
}
.friend-avatar {
    width:36px;height:36px;border-radius:50%;
    background:rgba(var(--accent-rgb),.1);
    border:1.5px solid rgba(var(--accent-rgb),.4);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-d);font-size:.78em;font-weight:800;
    color:var(--accent);flex-shrink:0;
    box-shadow:0 0 10px rgba(var(--accent-rgb),.12);
}
.friend-name { font-size:.84em;font-weight:600;flex:1; }
.friend-count { font-size:.62em;color:var(--text-muted); }
.friend-remove {
    width:22px;height:22px;border-radius:50%;
    border:1px solid rgba(232,76,76,.22);
    background:transparent;color:var(--danger);
    font-size:9px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .2s,background .2s;
}
.friend-card:hover .friend-remove { opacity:1; }
.friend-remove:hover { background:rgba(232,76,76,.1); }
.friends-empty { text-align:center;padding:24px 10px;color:var(--text-muted);font-size:.78em;font-weight:300; }
.friends-section-title { font-family:var(--font-d);font-size:.56em;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;margin:18px 0 10px; }

/* ── ACTIVITY ── */
.activity-item { display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--border); }
.activity-item:last-child { border-bottom:none; }
.activity-avatar {
    width:32px;height:32px;border-radius:50%;
    background:rgba(var(--accent-rgb),.09);
    border:1.5px solid rgba(var(--accent-rgb),.38);
    display:flex;align-items:center;justify-content:center;
    font-size:.72em;font-weight:800;color:var(--accent);
    flex-shrink:0;font-family:var(--font-d);
}
.activity-text { font-size:.79em;flex:1;line-height:1.48; }
.activity-time { font-size:.62em;color:var(--text-muted);white-space:nowrap; }

/* ── MODAL ── */
.modal {
    position:fixed;inset:0;
    background:rgba(0,0,0,.86);
    display:none;justify-content:center;align-items:center;
    z-index:1000;
    backdrop-filter:blur(22px) saturate(.55);
    padding:var(--space-5);
}
.modal-content {
    background:var(--surface);width:100%;max-width:630px;
    max-height:92vh;
    border-radius:var(--r-xl);
    border:1px solid var(--border2);
    overflow-y:auto;position:relative;
    animation:scaleIn .28s cubic-bezier(.16,1,.3,1);
    box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.04);
}
.close-btn {
    position:absolute;top:14px;right:14px;z-index:100;
    cursor:pointer;color:rgba(255,255,255,.58);
    font-weight:700;font-size:.66em;
    background:rgba(0,0,0,.58);
    padding:6px 14px;border-radius:var(--r-pill);
    border:1px solid rgba(255,255,255,.09);
    font-family:var(--font-d);letter-spacing:.5px;
    transition:background .18s,color .18s,box-shadow .18s;
}
.close-btn:hover { background:var(--danger);color:#fff;box-shadow:0 4px 14px rgba(232,76,76,.3); }

/* ── SEASONS ── */
.season-row { display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .15s; }
.season-row:last-child { border-bottom:none; }
.season-row:hover { opacity:.82; }
.season-arrow { color:var(--text-muted);font-size:.72em;transition:transform .2s;width:12px; }
.season-arrow.open { transform:rotate(90deg); }
.season-name { flex:1; }
.season-name-title { font-size:.86em;font-weight:600; }
.season-name-sub { font-size:.62em;color:var(--text-muted);margin-top:1px; }
.season-bar-wrap { width:96px;height:2.5px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden; }
.season-bar-fill { height:100%;background:linear-gradient(90deg,var(--success),#5ef0a8);border-radius:10px;transition:width .6s cubic-bezier(.4,0,.2,1); }
.season-count { font-size:.72em;font-weight:700;color:var(--text-soft);min-width:36px;text-align:right; }
.season-in-progress { background:rgba(var(--accent-rgb),.1);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.28);border-radius:var(--r-xs);padding:2px 8px;font-size:.55em;font-weight:800;font-family:var(--font-d); }

/* ── EPISODES ── */
.ep-list { display:none;padding:0 7px 12px; }
.ep-row {
    display:flex;align-items:center;gap:11px;padding:10px 14px;
    margin-bottom:4px;background:rgba(255,255,255,.018);
    border-radius:var(--r-sm);cursor:pointer;
    transition:background .16s,box-shadow .16s;
    border:1px solid transparent;
}
.ep-row:hover { background:rgba(255,255,255,.04);box-shadow:var(--shadow-sm); }
.ep-row.checked { background:rgba(47,201,122,.045);border-color:rgba(47,201,122,.12); }
.ep-check-icon {
    width:18px;height:18px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;
    font-size:8px;color:transparent;flex-shrink:0;
    transition:background .2s,border-color .2s;
}
.ep-row.checked .ep-check-icon { background:var(--success);border-color:var(--success);color:#030305; }
.ep-num  { font-family:var(--font-d);font-size:.62em;font-weight:700;color:var(--text-muted);width:32px;flex-shrink:0; }
.ep-name { flex:1;font-size:.8em;font-weight:500; }
.ep-row.checked .ep-name { text-decoration:line-through;color:var(--text-muted); }
.ep-duration { font-size:.62em;color:var(--text-muted);flex-shrink:0; }

/* ── STARS ── */
.star { font-size:1.55em;cursor:pointer;position:relative;display:inline-block;color:rgba(255,255,255,.065);transition:transform .14s; }
.star:hover { transform:scale(1.3); }
.star::before { content:'★';position:absolute;top:0;left:0;width:0;overflow:hidden;color:var(--star); }
.star.full::before { width:100%; }
.star.half::before { width:50%; }

/* ── TAGS ── */
.tag-pill { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-xs);font-size:.57em;font-weight:700;margin-right:4px;font-family:var(--font-d);text-transform:uppercase;letter-spacing:.5px; }
.tag-anime  { background:rgba(107,140,255,.1);color:#7ea0ff; }
.tag-marvel { background:rgba(232,76,76,.1);color:#e85555; }
.tag-movie  { background:rgba(240,167,50,.09);color:var(--star); }
.tag-series { background:rgba(47,201,122,.09);color:var(--success); }

/* ── TOAST ── */
.toast {
    position:fixed;bottom:28px;left:50%;
    transform:translateX(-50%) translateY(56px);
    background:var(--surface3);
    border:1px solid var(--border2);
    border-radius:var(--r-pill);
    padding:12px 26px;font-size:.73em;font-weight:600;color:var(--text);
    z-index:2000;
    transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .26s;
    opacity:0;pointer-events:none;
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow-lg);
}
.toast.show { transform:translateX(-50%) translateY(0);opacity:1; }

/* ── SETTINGS ── */
.settings-section { margin-bottom:24px; }
.settings-title { font-family:var(--font-d);font-size:.58em;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.7px;margin-bottom:13px; }
.settings-field { margin-bottom:12px; }
.settings-field label { display:block;font-size:.58em;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.3px;margin-bottom:7px;font-family:var(--font-d); }
.settings-field input { width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;color:var(--text);font-family:var(--font-b);font-size:.88em;outline:none;transition:border-color .2s,box-shadow .2s; }
.settings-field input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.09); }
.btn-settings-save {
    background:var(--accent);color:#fff;border:none;
    border-radius:var(--r-sm);padding:11px 24px;
    font-weight:700;font-size:.72em;cursor:pointer;
    font-family:var(--font-d);letter-spacing:.4px;
    transition:opacity .2s,transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
    box-shadow:0 0 18px rgba(var(--accent-rgb),.22);
}
.btn-settings-save:hover { opacity:.88;transform:translateY(-1px);box-shadow:0 0 28px rgba(var(--accent-rgb),.3); }
.settings-ok  { background:rgba(47,201,122,.07);border:1px solid rgba(47,201,122,.2);border-radius:var(--r-sm);padding:10px 14px;font-size:.77em;color:var(--success);margin-top:10px;display:none; }
.settings-err { background:rgba(232,76,76,.07);border:1px solid rgba(232,76,76,.2);border-radius:var(--r-sm);padding:10px 14px;font-size:.77em;color:var(--danger);margin-top:10px;display:none; }

/* ── COLOR PICKER ── */
.color-swatch { width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.1);transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s;display:inline-block; }
.color-swatch:hover,.color-swatch.active { transform:scale(1.45);border-color:white;box-shadow:0 0 12px rgba(255,255,255,.22); }
.color-picker-wrap { display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:9px; }

/* ── CONTEXT MENU ── */
#ctx-menu {
    position:fixed;
    background:var(--surface2);
    border:1px solid var(--border2);
    border-radius:var(--r);
    padding:6px;min-width:188px;z-index:9999;
    box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.04);
    animation:scaleIn .13s cubic-bezier(.34,1.56,.64,1);
    transform-origin:top left;backdrop-filter:blur(22px);
}
.ctx-item { display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:var(--r-sm);font-size:.74em;font-weight:600;color:var(--text-muted);cursor:pointer;transition:background .13s,color .13s;font-family:var(--font-d); }
.ctx-item:hover { background:var(--surface3);color:var(--text); }
.ctx-item.danger { color:var(--danger); }
.ctx-item.danger:hover { background:rgba(232,76,76,.1);color:#f07070; }
.ctx-divider { height:1px;background:var(--border);margin:5px 0; }

/* ── SAGA CARD ── */
.saga-card { position:relative; }
.saga-card::after { content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(var(--accent-rgb),.08) 0%,transparent 56%);border-radius:var(--r-lg);pointer-events:none; }
.saga-card:hover { border-color:rgba(var(--accent-rgb),.48) !important; }
.saga-badge-br { font-size:.5em;font-weight:800;font-family:var(--font-d);letter-spacing:.5px;padding:3px 9px;border-radius:var(--r-xs);background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.13);color:#fff; }

/* ── SORT DROPDOWN ── */
.sort-option { padding:8px 13px;font-size:.72em;font-weight:600;color:var(--text-muted);border-radius:var(--r-sm);cursor:pointer;font-family:var(--font-d);transition:background .13s,color .13s;position:relative; }
.sort-option:hover { background:var(--surface3);color:var(--text); }
.sort-option.active { color:var(--text); }
.sort-option.active::before { content:'';position:absolute;left:0;top:22%;height:56%;width:2px;background:var(--accent);border-radius:2px; }
.sort-divider { height:1px;background:var(--border);margin:5px 0; }

/* ── PARAMS PANEL ── */
#params-panel {
    position:fixed;
    background:var(--surface2);
    border:1px solid var(--border2);
    border-radius:var(--r-lg);
    padding:20px;min-width:218px;z-index:99999;
    box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.03);
    animation:scaleIn .16s ease;transform-origin:top right;
    backdrop-filter:blur(22px);
}

/* ── SECURITY / MISC ── */
.pwd-strength { height:3px;border-radius:10px;margin-top:7px;transition:width .3s,background .3s;width:0%; }
.pwd-hint  { font-size:.62em;color:var(--text-muted);margin-top:4px; }
.field-err { font-size:.62em;color:var(--danger);margin-top:4px;display:none; }
.field input.invalid { border-color:var(--danger)!important; }
.field input.valid   { border-color:var(--success)!important; }

.session-warning {
    position:fixed;top:22px;left:50%;transform:translateX(-50%);
    background:var(--surface2);border:1px solid var(--accent);
    border-radius:var(--r-lg);padding:20px 28px;
    z-index:3000;display:none;
    box-shadow:var(--shadow-lg);text-align:center;min-width:320px;
    backdrop-filter:blur(18px);
}
.session-warning p { font-size:.82em;margin:0 0 12px;color:var(--text-soft); }
.session-warning strong { color:var(--accent); }

/* Suggestion */
.search-filters { display:flex;gap:7px;padding:12px 15px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:rgba(255,255,255,.016); }
.search-filter-btn { background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:5px 12px;border-radius:var(--r-pill);font-size:.63em;font-weight:600;cursor:pointer;font-family:var(--font-b);transition:all .18s; }
.search-filter-btn.active { background:var(--accent);color:#fff;border-color:var(--accent); }
.suggestion-item { padding:12px 15px;cursor:pointer;display:flex;align-items:center;gap:13px;border-bottom:1px solid rgba(255,255,255,.03);transition:background .14s;position:relative; }
.suggestion-item:hover { background:rgba(255,255,255,.045); }
.already-added-badge { position:absolute;top:10px;right:13px;font-size:.55em;font-weight:700;color:var(--success);background:rgba(47,201,122,.1);border:1px solid rgba(47,201,122,.22);border-radius:var(--r-xs);padding:2px 8px;font-family:var(--font-d); }
.suggestion-section-title { padding:9px 15px 4px;font-size:.56em;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.7px;font-family:var(--font-d); }

textarea {
    width:100%;background:rgba(255,255,255,.018);
    border:1px solid var(--border);border-radius:var(--r-sm);
    padding:13px 14px;color:var(--text);margin-top:7px;
    font-family:var(--font-b);font-size:.86em;
    resize:vertical;min-height:80px;outline:none;
    transition:border-color .2s,box-shadow .2s;
}
textarea:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); }

.field-label { font-size:.58em;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;font-family:var(--font-d); }
.recommend-badge { background:rgba(var(--accent-rgb),.1);color:var(--accent);padding:3px 9px;border-radius:var(--r-xs);font-size:.57em;font-weight:700;font-family:var(--font-d); }

#config-banner { background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.2);border-radius:var(--r);padding:14px 18px;margin-bottom:24px;font-size:.8em;color:var(--accent);display:none; }

#list-search-wrap { position:relative;margin-bottom:18px; }
#list-search-wrap input {
    width:100%;background:var(--surface);border:1px solid var(--border2);
    border-radius:var(--r);padding:10px 15px;color:var(--text);
    font-family:var(--font-b);font-size:.84em;outline:none;
    transition:border-color .2s,box-shadow .2s;
}
#list-search-wrap input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); }

#genre-filter {
    background:var(--surface2);color:var(--text-soft);
    border:1px solid var(--border);
    border-radius:var(--r-pill);
    padding:7px 14px;font-size:.64em;font-weight:600;
    cursor:pointer;outline:none;font-family:var(--font-b);
    transition:border-color .2s;
}
#genre-filter:focus { border-color:var(--accent); }

/* ── NAVBAR STICKY MOBILE ── */
@media (max-width:768px) {
    .top-bar {
        position:sticky;top:0;z-index:80;
        background:var(--bg);
        /* Pas de will-change sur iOS Safari — crée un stacking context */
    }
}

/* ── SWIPE HANDLE MOBILE ── */
@media (max-width:768px) {
    .modal-content::before {
        content:'';display:block;
        width:38px;height:4px;
        background:rgba(255,255,255,.18);
        border-radius:4px;margin:13px auto 0;flex-shrink:0;
    }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width:1024px) {
    .hero-body { grid-template-columns:1fr;gap:52px;text-align:center;padding:64px 36px 88px; }
    .hero-text-col { align-items:center; }
    .hero-visual { height:350px; }
    .hero-sub { max-width:560px; }
    .hero-features { padding:0 36px 64px;gap:16px; }
}

@media (max-width:768px) {
    body { padding:0; }
    #app-screen { padding:16px 14px 94px; }
    .top-bar { margin-bottom:16px;flex-wrap:wrap;gap:10px; }
    .logo { font-size:1.04em; }
    .header-right { gap:7px; }
    .user-pill { padding:5px 11px 5px 5px; }
    .main-container { grid-template-columns:1fr;gap:0; }
    .right-side {
        display:block;position:fixed;bottom:0;left:0;right:0;
        background:var(--bg2);border-top:1px solid var(--border2);
        z-index:100;padding:0 14px 12px;
        max-height:55vh;overflow-y:auto;
    }
    .right-side > div:first-child { position:sticky;top:0;background:var(--bg2);padding-top:10px;padding-bottom:4px;z-index:2; }
    .right-tab { font-size:.61em;padding:9px 6px; }
    .stats-box { padding:14px 16px;flex-wrap:wrap; }
    .stat-item { flex:1 1 45%;padding:9px 12px;border-right:none;border-bottom:1px solid var(--border);min-width:0; }
    .stat-item:nth-child(odd) { border-right:1px solid var(--border); }
    .stat-item:last-child,.stat-item:nth-last-child(2):nth-child(odd) { border-bottom:none; }
    .stat-val { font-size:1.65em; }
    .search-container { padding:7px 10px; }
    .search-container input { font-size:.88em;padding:10px 6px; }
    .stat-dropdown { font-size:.64em;padding:9px 8px; }
    .btn-add { padding:11px 16px;font-size:.71em;min-height:44px; }
    .controls-row { flex-direction:column;align-items:flex-start;gap:10px; }
    .filter-bar { display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:4px;width:100%;-webkit-overflow-scrolling:touch; }
    .filter-btn { padding:10px 16px;font-size:.73em;white-space:nowrap;min-height:40px; }
    .grid { grid-template-columns:repeat(2,1fr);gap:10px; }
    .grid.compact { grid-template-columns:repeat(3,1fr); }
    .card img { height:200px; }
    .card .img-placeholder { height:200px; }
    .skeleton-card { height:200px; }
    .card-title { font-size:.76em; }
    .card-actions { opacity:1;transform:none; }
    .qa-btn { width:32px;height:32px; }
    .list-view .card img { width:46px;height:64px; }
    .modal-content { border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:96vh;margin-top:auto;width:100%;max-width:100%!important; }
    .modal { align-items:flex-end!important; }
    .auth-box { padding:34px 26px;border-radius:var(--r-lg); }
    .section-label { font-size:.57em; }
    .cal-card { padding:10px 13px; }
    .friends-search { flex-direction:column; }
    .friends-search button { width:100%;min-height:44px; }
    #compact-btn { display:none; }
    .hero-features { grid-template-columns:1fr;border-radius:var(--r);padding:0 18px 52px;gap:12px; }
    .hero-body { padding:52px 22px 68px; }
    .hero-nav { padding:26px 22px; }
    .hero-visual { height:290px; }
    .hero-poster:nth-child(1) { width:92px;height:134px;transform:translate(-117px,-50%) rotate(-8deg); }
    .hero-poster:nth-child(2) { width:110px;height:160px;transform:translate(-66px,-50%) rotate(-4deg); }
    .hero-poster:nth-child(3) { width:130px;height:188px;transform:translate(-65px,-50%) rotate(0deg); }
    .hero-poster:nth-child(4) { width:110px;height:160px;transform:translate(22px,-50%) rotate(4deg); }
    .hero-poster:nth-child(5) { width:92px;height:134px;transform:translate(62px,-50%) rotate(8deg); }
    #params-panel { position:fixed;top:auto;bottom:0;left:0;right:0;border-radius:var(--r-lg) var(--r-lg) 0 0;min-width:unset;max-height:62vh;overflow-y:auto;transform-origin:bottom center; }
}

@media (max-width:400px) {
    .grid { grid-template-columns:repeat(2,1fr); }
    .stat-item { flex:1 1 100%;border-right:none; }
}

/* ── TOAST MOBILE ── */
@media (max-width:768px) {
    .toast { bottom:calc(55vh + 14px); }
}

/* ── ACCESSIBILITÉ ── */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    .toast,.modal,#loading-overlay { transition:opacity .15s ease !important; }
}

:focus-visible {
    outline:2px solid var(--accent) !important;
    outline-offset:3px !important;
    border-radius:4px;
}
:focus:not(:focus-visible) { outline:none; }

/* Les champs déjà encadrés par un conteneur stylé (search bar, inputs, textarea)
   gèrent leur propre indicateur de focus via border-color/box-shadow.
   Le outline générique créerait un double contour mal aligné par-dessus. */
.search-container input:focus-visible,
.field input:focus-visible,
.friends-search input:focus-visible,
.settings-field input:focus-visible,
#list-search-wrap input:focus-visible,
textarea:focus-visible {
    outline:none !important;
}