:root {
    --bg: #0a0a0c;
    --bg-card: rgba(255,255,255,0.03);
    --bg-card-hover: rgba(255,255,255,0.06);
    --accent: #dc143c;
    --accent-light: #ff3355;
    --accent-dark: #a01028;
    --accent-glow: rgba(220,20,60,0.25);
    --accent-subtle: rgba(220,20,60,0.08);
    --text: #ffffff;
    --text-mid: rgba(255,255,255,0.6);
    --text-dim: rgba(255,255,255,0.32);
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --radius: 12px;
    --radius-sm: 8px;
    --ease: cubic-bezier(0.4,0,0.2,1);
    --ease-out: cubic-bezier(0.34,1.56,0.64,1);
    --font-title: "Bebas Neue",system-ui,sans-serif;
    --font-body: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* FOCUS-VISIBLE — accessibilité clavier cohérente */
:focus{outline:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px;border-radius:6px}
.nav-link:focus-visible,.bouton-lien:focus-visible,.auth-link:focus-visible,.nav-drawer-link:focus-visible,.lang-trigger:focus-visible,.lang-menu .lang-btn:focus-visible,.lang-switch .lang-btn:focus-visible,input:focus-visible{outline:none}

body{font-family:var(--font-body);color:var(--text);min-height:100vh;min-height:100dvh;overflow-x:hidden;background:var(--bg);position:relative}

/* ============================================
   BACKGROUND LAYERS
   ============================================ */

.blob-bg{position:fixed;inset:0;z-index:-5;overflow:hidden;pointer-events:none;will-change:transform}
.blob{position:absolute;border-radius:50%;filter:blur(120px);will-change:transform;opacity:0.7}
.blob-1{width:500px;height:500px;background:rgba(220,20,60,0.10);top:-20%;left:-10%;animation:bd1 16s ease-in-out infinite alternate}
.blob-2{width:400px;height:400px;background:rgba(220,20,60,0.06);bottom:-15%;right:-10%;animation:bd2 20s ease-in-out infinite alternate}
.blob-3{width:350px;height:350px;background:rgba(220,20,60,0.04);top:40%;left:55%;animation:bd3 22s ease-in-out infinite alternate}
@keyframes bd1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(20%,30%) scale(1.1)}}
@keyframes bd2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-20%,-20%) scale(1.15)}}
@keyframes bd3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-15%,10%) scale(0.9)}}

#particles-bg{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:1;will-change:transform}

.vignette{position:fixed;inset:0;pointer-events:none;z-index:50;box-shadow:inset 0 0 100px rgba(0,0,0,0.35);opacity:0;transition:opacity 0.6s,box-shadow 0.6s}
.vignette.on{opacity:1}
.vignette.forte{opacity:1;box-shadow:inset 0 0 180px rgba(0,0,0,0.6)}

.curseur-lumiere{position:fixed;width:450px;height:450px;border-radius:50%;background:radial-gradient(circle,rgba(220,20,60,0.04) 0%,transparent 65%);pointer-events:none;z-index:-1;transform:translate(-50%,-50%);opacity:0;will-change:left,top;transition:opacity 0.4s}
.curseur-lumiere.visible{opacity:1}

/* ============================================
   SPLASH
   ============================================ */

.splash-screen{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity 0.5s ease,background 1s ease}
.splash-screen.sun-rising{background:transparent}
.splash-screen.done{opacity:0;pointer-events:none}
.splash-logo{font-family:var(--font-title);font-size:5.5rem;letter-spacing:12px;font-weight:400;color:var(--accent);line-height:1;display:flex;flex-wrap:wrap;justify-content:center;gap:1px}
.splash-logo .letter{display:inline-block;opacity:0;animation:glitch-in 0.7s forwards}

@keyframes glitch-in{
    0%{opacity:0;transform:translateY(-20px);color:#fff;text-shadow:-2px 0 #ff0040,2px 0 #00ffff;filter:blur(3px)}
    30%{opacity:1;transform:translateY(3px) skewX(6deg);filter:blur(0)}
    60%{transform:translateY(-2px) skewX(-3deg);text-shadow:1px 0 #ff0040,-1px 0 #00ffff}
    100%{opacity:1;transform:none;color:var(--accent);text-shadow:none;filter:none}
}
.splash-logo.stable .letter{animation:none;opacity:1;transform:none;color:var(--accent);text-shadow:none}

/* ============================================
   NAVBAR
   ============================================ */

.navbar{
    position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:500;
    width:calc(100% - 8px);max-width:none;height:60px;
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:8px 20px;
    background:linear-gradient(180deg,rgba(20,20,24,0.62) 0%,rgba(10,10,12,0.55) 100%);
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:999px;
    box-shadow:
        0 12px 36px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.02) inset,
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 0 28px rgba(220,20,60,0.04);
    transition:transform 0.3s ease,box-shadow 0.4s ease,border-color 0.3s ease;
}
.navbar::before{
    content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);
    border-radius:1px;pointer-events:none;
}
.navbar:hover{
    border-color:rgba(255,255,255,0.13);
    box-shadow:
        0 16px 44px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 1px 0 rgba(255,255,255,0.09) inset,
        0 0 44px rgba(220,20,60,0.07);
}
.navbar.nav-hidden{transform:translateX(-50%) translateY(-110%)}

.nav-left{display:flex;align-items:center;gap:8px;padding-left:2px;flex-shrink:0}

/* BURGER (mobile only) */
.nav-burger{display:none;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;transition:background 0.2s,border-color 0.2s,transform 0.2s}
.nav-burger:hover{border-color:rgba(220,20,60,0.4);background:rgba(220,20,60,0.08)}
.nav-burger:active{transform:scale(0.95)}
.nav-burger span{display:block;width:16px;height:1.5px;border-radius:1px;background:currentColor;transition:transform 0.25s var(--ease),opacity 0.2s}
.nav-burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
@media(max-width:767px){
    .nav-burger{display:flex}
}

/* DRAWER (mobile menu) */
.nav-drawer{position:fixed;top:96px;left:8px;right:8px;z-index:550;display:flex;flex-direction:column;gap:4px;padding:8px;background:rgba(10,10,12,0.92);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,0.1);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,0.55),0 0 24px rgba(220,20,60,0.06);transform-origin:top center;opacity:0;pointer-events:none;transform:translateY(-8px) scale(0.98);transition:opacity 0.22s var(--ease),transform 0.22s var(--ease)}
.nav-drawer:not([hidden]){opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.nav-drawer-link{display:flex;align-items:center;justify-content:flex-start;width:100%;padding:14px 18px;border-radius:12px;background:transparent;border:none;color:rgba(255,255,255,0.55);font-family:var(--font-body);font-size:0.92rem;font-weight:600;letter-spacing:0.5px;cursor:pointer;transition:color 0.22s ease-out,background 0.22s ease-out,transform 0.15s ease-out}
.nav-drawer-link:hover,.nav-drawer-link:focus-visible{color:var(--accent-light);background:rgba(255,255,255,0.05);outline:none}
.nav-drawer-link:active{transform:scale(0.98)}
.nav-drawer-link.active{color:var(--accent);background:rgba(220,20,60,0.12)}
.nav-logo{height:32px;width:auto;display:block;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 0 8px rgba(220,20,60,0.15));transition:transform 0.3s var(--ease-out),filter 0.3s ease}
.nav-logo:hover{transform:scale(1.08) rotate(-4deg);filter:drop-shadow(0 0 14px rgba(220,20,60,0.4))}

/* NAV CENTER — menus alignés à gauche après le logo */
.nav-center{display:none}
@media(min-width:768px){
    .nav-center{
        display:flex;align-items:center;gap:28px;
        margin-left:32px;margin-right:auto;
    }
}
.nav-link{
    background:none;border:none;cursor:pointer;
    color:rgba(255,255,255,0.55);
    font-family:var(--font-body);font-size:0.84rem;font-weight:500;letter-spacing:0.4px;
    padding:8px 4px;position:relative;
    transition:color 0.22s ease-out;
}
.nav-link::after{
    content:"";position:absolute;left:50%;bottom:2px;
    width:0;height:2px;border-radius:1px;
    background:var(--accent);
    transform:translateX(-50%);
    transition:width 0.3s ease-out,box-shadow 0.3s ease-out;
}
.nav-link:hover,.nav-link:focus-visible{color:var(--accent-light);outline:none}
.nav-link:hover::after,.nav-link:focus-visible::after{width:18px}
.nav-link.active{color:#fff}
.nav-link.active::after{width:18px;box-shadow:0 0 8px var(--accent-glow)}

.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* LANG SELECT (navbar) — premium pill + floating panel */
.lang-select{position:relative;display:flex;align-items:center}
.lang-trigger{
    display:inline-flex;align-items:center;justify-content:center;
    height:36px;min-width:46px;padding:0 14px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    color:var(--accent);
    font-family:var(--font-body);font-size:0.72rem;font-weight:700;letter-spacing:1.8px;
    border-radius:999px;
    cursor:pointer;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:color 0.2s var(--ease),background 0.2s var(--ease),border-color 0.2s var(--ease),box-shadow 0.25s var(--ease),transform 0.15s var(--ease);
}
.lang-trigger:hover,.lang-select.open .lang-trigger{
    color:var(--accent-light);
    border-color:rgba(220,20,60,0.4);
    background:rgba(220,20,60,0.1);
    box-shadow:0 0 18px rgba(220,20,60,0.22);
}
.lang-trigger:active{transform:scale(0.96)}

.lang-menu{
    position:absolute;top:calc(100% + 12px);right:0;z-index:600;
    display:flex;flex-direction:column;gap:2px;
    min-width:112px;padding:6px;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    box-shadow:
        0 18px 40px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.02) inset,
        0 1px 0 rgba(255,255,255,0.06) inset;
    opacity:0;transform:translateY(-4px) scale(0.96);pointer-events:none;
    transform-origin:top right;
    transition:opacity 0.2s ease-out,transform 0.2s ease-out;
}
.lang-select.open .lang-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.lang-menu .lang-btn{
    display:flex;align-items:center;justify-content:center;width:100%;
    padding:9px 16px;border-radius:12px;
    background:transparent;border:none;
    color:rgba(255,255,255,0.45);
    font-family:var(--font-body);font-size:0.72rem;font-weight:700;letter-spacing:1.8px;
    cursor:pointer;
    transition:color 0.2s var(--ease),background 0.2s var(--ease),box-shadow 0.25s var(--ease),transform 0.15s var(--ease);
    animation:none;
}
.lang-menu .lang-btn:hover:not(.active){color:#fff;background:rgba(255,255,255,0.05)}
.lang-menu .lang-btn:active{transform:scale(0.97)}
.lang-menu .lang-btn.active{
    color:var(--accent);
    background:rgba(220,20,60,0.15);
    box-shadow:0 0 14px rgba(220,20,60,0.22);
    text-shadow:none;animation:none;
}

/* LANG SWITCH (profil — 3 boutons inline) */
.lang-switch{
    display:flex;align-items:center;gap:0;
    background:rgba(0,0,0,0.42);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:999px;
    padding:3px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.35);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.lang-btn{
    background:transparent;border:none;
    color:rgba(255,255,255,0.42);
    font-family:var(--font-body);font-size:0.68rem;font-weight:700;letter-spacing:1.5px;
    padding:6px 12px;border-radius:999px;
    cursor:pointer;position:relative;min-width:34px;text-align:center;
    transition:color 0.3s var(--ease),background 0.35s var(--ease),box-shadow 0.35s var(--ease),text-shadow 0.3s var(--ease),transform 0.2s var(--ease);
}
.lang-btn:hover:not(.active){
    color:rgba(255,255,255,0.85);
    background:rgba(255,255,255,0.05);
}
.lang-btn:active{transform:scale(0.94)}
.lang-btn.active{
    color:#fff;
    background:linear-gradient(180deg,rgba(220,20,60,0.55) 0%,rgba(160,16,40,0.6) 100%);
    box-shadow:
        0 2px 10px rgba(220,20,60,0.35),
        0 0 0 1px rgba(255,90,120,0.28) inset,
        0 -1px 1px rgba(0,0,0,0.25) inset;
    text-shadow:0 0 8px rgba(255,80,110,0.55);
    animation:lang-pulse 0.45s var(--ease-out);
}
@keyframes lang-pulse{0%{transform:scale(0.88)}55%{transform:scale(1.06)}100%{transform:scale(1)}}

.nav-login{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);color:var(--text-mid);font-family:var(--font-body);font-size:0.74rem;font-weight:600;letter-spacing:1px;padding:7px 16px;border-radius:999px;cursor:pointer;transition:border-color 0.2s,color 0.2s,background 0.25s,transform 0.2s}
.nav-login:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle);transform:translateY(-1px)}
.nav-login:active{transform:translateY(0)}
.nav-login svg{flex-shrink:0}

.audio-controls{display:flex;gap:4px}
.audio-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:var(--text-mid);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color 0.2s,border-color 0.2s,background 0.2s,opacity 0.2s,transform 0.2s}
.audio-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-subtle);transform:translateY(-1px)}
.audio-btn:active{transform:translateY(0)}
.audio-btn.muted{opacity:0.35}
.audio-btn.muted:hover{opacity:0.6}

@media(max-width:640px){
    .navbar{top:8px;width:calc(100% - 16px);padding:5px 8px 5px 14px;height:54px;gap:8px}
    .nav-left{padding-left:0}
    .nav-logo{height:40px}
    .nav-right{gap:6px}
    .lang-switch{padding:2px}
    .lang-btn{padding:4px 8px;font-size:0.62rem}
    .lang-trigger{height:32px;min-width:40px;padding:0 12px;font-size:0.68rem;letter-spacing:1.4px}
    .lang-menu{min-width:96px;padding:5px;border-radius:14px}
    .lang-menu .lang-btn{padding:8px 12px;font-size:0.68rem;letter-spacing:1.4px;border-radius:10px}
    .nav-login{padding:6px 10px;font-size:0.68rem;gap:4px}
    .audio-btn{width:30px;height:30px}
    .audio-btn svg{width:14px;height:14px}
}
@media(max-width:480px){
    .nav-login{padding:6px 8px;gap:0}
    .nav-login span{display:none}
    .nav-login svg{width:16px;height:16px}
}

/* ============================================
   SCREENS
   ============================================ */

.ecran{padding:60px 28px;padding-top:120px;max-width:540px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;text-align:center;position:relative}
.ecran.clip-in{animation:clip-in 0.5s var(--ease) both;z-index:10}
@keyframes clip-in{from{clip-path:circle(0% at var(--cx,50%) var(--cy,50%));opacity:0.3}to{clip-path:circle(150% at var(--cx,50%) var(--cy,50%));opacity:1}}

.ecran-choix{gap:36px;max-width:960px}
.ecran-accueil{gap:32px}

.section-label-visible{opacity:1!important;animation:none!important}
.marque-ligne-visible{opacity:1!important;width:56px!important;animation:none!important}
.marque-sub-visible{opacity:1!important;animation:none!important}

.liste-categories{display:flex;flex-direction:row;gap:24px;width:90vw;max-width:920px}

.carte-categorie{
    flex:1;min-height:320px;padding:0;border-radius:20px;
    border:1px solid rgba(255,255,255,0.08);background:rgba(17,17,17,0.9);
    color:var(--text);cursor:pointer;font-family:inherit;text-align:center;
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
    transition:transform 0.35s var(--ease),border-color 0.3s,box-shadow 0.4s;
}
.carte-categorie:hover,.carte-categorie:focus-visible{
    border-color:rgba(220,20,60,0.35);
    box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(220,20,60,0.15),0 0 50px rgba(220,20,60,0.1);
    transform:translateY(-8px) scale(1.04);
    outline:none;
}
.carte-categorie:active{transform:scale(0.97)!important}

.carte-cat-icon,.carte-cat-desc,.carte-categorie .carte-mode-fleche{display:none}

.carte-cat-titre{font-family:var(--font-title);font-size:4rem;font-weight:400;letter-spacing:10px;line-height:1;color:var(--text);transition:color 0.3s,text-shadow 0.3s}
.carte-categorie:hover .carte-cat-titre,.carte-categorie:focus-visible .carte-cat-titre{color:var(--accent);text-shadow:0 0 30px var(--accent-glow)}

@media(max-width:480px){.liste-categories{flex-direction:column}.carte-categorie{min-height:200px}}

.ecran-choix .stagger-1{opacity:0}
.ecran-choix .stagger-2{opacity:0}
.ecran-choix.revealed .stagger-1{animation:card-enter 0.5s 0.5s var(--ease) forwards}
.ecran-choix.revealed .stagger-2{animation:card-enter 0.5s 0.65s var(--ease) forwards}

.hero{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:8px}

.marque{font-family:var(--font-title);font-size:5.5rem;letter-spacing:12px;font-weight:400;color:var(--text);line-height:1;display:flex;flex-wrap:wrap;justify-content:center;gap:1px;cursor:default;text-shadow:0 3px 12px rgba(0,0,0,0.5);opacity:0;transition:opacity 0.45s var(--ease)}
.hero.revealed .marque{opacity:1}
#accueil-titre,#serie-titre{opacity:1}
h2.marque{opacity:1;font-size:3.2rem;letter-spacing:7px}
.marque-sm{font-size:3.8rem;letter-spacing:8px;white-space:nowrap}

.lettre-hover{
    display:inline-block;
    transition:color 0.3s ease;
    cursor:default;
}
.lettre-hover:hover{
    color:var(--accent);
}

/* GLITCH ENTRY SUR LE TITRE ACCUEIL */
.marque .lettre-hover.glitch-entry{
    opacity:0;
    animation:glitch-in 0.5s forwards;
}

/* GLITCH EXIT */
.marque .lettre-hover.glitch-exit{
    animation:glitch-out 0.4s forwards;
}
@keyframes glitch-out{
    0%{opacity:1;transform:none;color:var(--text);filter:none}
    30%{transform:skewX(8deg) translateY(-3px);color:var(--accent);text-shadow:-2px 0 #ff0040,2px 0 #00ffff}
    60%{transform:skewX(-5deg) translateY(5px);filter:blur(2px);opacity:0.7}
    100%{opacity:0;transform:translateY(20px) scaleY(0.5);filter:blur(4px);color:#fff;text-shadow:-3px 0 #ff0040,3px 0 #00ffff}
}

.lettre-hover.espace{pointer-events:none;width:0.3em}

.marque-ligne{width:56px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);border-radius:2px;opacity:0}
.hero.revealed .marque-ligne{animation:line-in 0.6s 0.1s var(--ease) forwards}

.marque-sub{font-size:0.75rem;color:var(--text);letter-spacing:5px;text-transform:uppercase;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,0.6);opacity:0}
.hero.revealed .marque-sub{animation:fade-up 0.5s 0.25s var(--ease) forwards}

.section-label{font-size:0.72rem;color:var(--text);letter-spacing:5px;text-transform:uppercase;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,0.6);opacity:0;margin-bottom:-8px}
.ecran-accueil.revealed .section-label{animation:fade-up 0.4s 0.4s var(--ease) forwards}
.ecran-choix.revealed .section-label{animation:fade-up 0.4s 0.4s var(--ease) forwards}
@keyframes line-in{from{opacity:0;width:0}to{opacity:1;width:48px}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

h2{font-family:var(--font-title);font-size:2rem;color:var(--text);font-weight:400;letter-spacing:3px;line-height:1.1}
h3{font-family:var(--font-title);font-size:1.2rem;color:var(--accent);font-weight:400;letter-spacing:3px;text-transform:uppercase}
p{line-height:1.6;color:var(--text-mid);max-width:460px;font-size:0.92rem}
p strong{color:var(--text);font-weight:600}
.aide{font-size:0.82rem;color:var(--text-mid);letter-spacing:0.5px;text-shadow:0 1px 4px rgba(0,0,0,0.4)}
.label-discret{font-size:0.8rem;color:var(--text-mid);letter-spacing:3px;text-transform:uppercase;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,0.5)}

.titre-cinema{position:relative;overflow:hidden;display:inline-block}
.titre-cinema.reveal::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:sweep 0.7s ease-out forwards;pointer-events:none}
@keyframes sweep{from{left:-70%}to{left:130%}}

.titre-mode{font-family:var(--font-title);font-size:3rem;letter-spacing:6px;font-weight:400;color:var(--text);line-height:1}
.mode-header{display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:12px}
.mode-desc{font-size:0.88rem;color:var(--text-dim);max-width:380px}

/* ============================================
   MODE CARDS — CLEAN + TILT + HOLO
   ============================================ */

.liste-modes{display:flex;flex-direction:column;gap:16px;width:100%;max-width:500px;perspective:800px}

.ecran-accueil .stagger-1{animation:card-enter 0.5s 0.1s var(--ease) both}
.ecran-accueil .stagger-2{animation:card-enter 0.5s 0.2s var(--ease) both}
.ecran-accueil .stagger-3{animation:card-enter 0.5s 0.3s var(--ease) both}
@keyframes card-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.carte-mode{
    width:100%;height:220px;padding:0;border-radius:16px;
    border:1px solid rgba(255,255,255,0.1);background:rgba(17,17,17,0.9);
    color:var(--text);cursor:pointer;font-family:inherit;text-align:left;
    display:flex;align-items:flex-end;justify-content:space-between;
    position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform;
    transition:transform 0.35s var(--ease),border-color 0.3s,box-shadow 0.4s,height 0.35s var(--ease);
}
.carte-mode:hover,.carte-mode:focus-visible{
    height:240px;
    border-color:rgba(220,20,60,0.2);
    box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(220,20,60,0.1),0 0 40px rgba(220,20,60,0.06);
    z-index:2;
    outline:none;
}
.carte-mode:active{transform:scale(0.98)!important}

/* Image noir et blanc */
.carte-mode-bg{position:absolute;inset:0;background-image:var(--card-img);background-size:cover;background-position:center;filter:grayscale(100%) brightness(0.35);transition:filter 0.5s,transform 0.5s;z-index:0}
.carte-mode:hover .carte-mode-bg{filter:grayscale(100%) brightness(0.3);transform:scale(1.05)}

/* Image couleur — révélée par le curseur */
.carte-mode-color{
    position:absolute;inset:0;
    background-image:var(--card-img);background-size:cover;background-position:center;
    filter:brightness(0.85) saturate(1.3);z-index:1;
    -webkit-mask-image:radial-gradient(circle 140px at var(--mx,-200px) var(--my,-200px),black 0%,rgba(0,0,0,0.6) 40%,transparent 100%);
    mask-image:radial-gradient(circle 140px at var(--mx,-200px) var(--my,-200px),black 0%,rgba(0,0,0,0.6) 40%,transparent 100%);
    pointer-events:none;
    transition:transform 0.5s;
}
.carte-mode:hover .carte-mode-color{transform:scale(1.05)}

/* Gradient overlay pour lisibilité */
.carte-mode-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.4) 45%,rgba(0,0,0,0.1) 100%);z-index:2;pointer-events:none}

/* Texte couleur au curseur */
.carte-mode-contenu{
    display:flex;flex-direction:column;gap:6px;position:relative;z-index:3;padding:22px 26px;
    background:linear-gradient(90deg,transparent,transparent);
    -webkit-background-clip:text;background-clip:text;
}
.carte-mode-titre-wrap{position:relative;display:inline-block}
.carte-mode-titre{font-family:var(--font-title);font-size:2.5rem;font-weight:400;letter-spacing:5px;line-height:1;color:rgba(255,255,255,0.7);text-shadow:0 2px 12px rgba(0,0,0,0.6);transition:color 0.3s}
.carte-mode:hover .carte-mode-titre{color:rgba(255,255,255,0.85)}
.carte-mode-titre-color{position:absolute;inset:0;font-family:var(--font-title);font-size:2.5rem;font-weight:400;letter-spacing:5px;line-height:1;color:var(--accent);text-shadow:0 0 20px var(--accent-glow);-webkit-mask-image:radial-gradient(circle 120px at var(--mx,-200px) var(--my,-200px),black 0%,rgba(0,0,0,0.5) 40%,transparent 100%);mask-image:radial-gradient(circle 120px at var(--mx,-200px) var(--my,-200px),black 0%,rgba(0,0,0,0.5) 40%,transparent 100%);pointer-events:none}
.carte-mode-desc{font-size:0.86rem;color:rgba(255,255,255,0.45);line-height:1.4;text-shadow:0 1px 6px rgba(0,0,0,0.6);transition:color 0.3s}
.carte-mode:hover .carte-mode-desc{color:rgba(255,255,255,0.7)}
.carte-mode-badge{font-size:0.66rem;font-weight:700;letter-spacing:1.5px;color:var(--text-dim);background:rgba(255,255,255,0.06);padding:5px 12px;border-radius:6px;text-transform:uppercase;width:fit-content;margin-top:3px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:color 0.3s,background 0.3s,border-color 0.3s;border:1px solid rgba(255,255,255,0.06)}
.carte-mode:hover .carte-mode-badge{color:var(--accent);background:rgba(220,20,60,0.1);border-color:rgba(220,20,60,0.2)}

.carte-mode-fleche{position:relative;z-index:3;font-size:2.6rem;color:rgba(255,255,255,0.25);transition:color 0.3s,transform 0.3s;line-height:1;padding:22px 26px 22px 0;align-self:center}
.carte-mode:hover .carte-mode-fleche{color:var(--accent);transform:translateX(5px)}

/* ============================================
   BUTTONS
   ============================================ */

.bouton-principal,.bouton-secondaire{width:100%;max-width:360px;padding:16px 28px;font-size:0.88rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;border:none;border-radius:var(--radius);cursor:pointer;font-family:inherit;position:relative;overflow:hidden;transition:transform 0.2s var(--ease),box-shadow 0.3s,background 0.2s}

.bouton-principal{background:var(--accent);color:#fff;box-shadow:0 2px 0 var(--accent-dark),0 4px 16px var(--accent-glow)}
.bouton-principal:hover{background:var(--accent-light);transform:translateY(-1px);box-shadow:0 3px 0 var(--accent-dark),0 8px 24px var(--accent-glow)}
.bouton-principal:active{transform:translateY(1px);box-shadow:0 1px 0 var(--accent-dark)}

.bouton-secondaire{background:rgba(10,10,12,0.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-mid);border:1px solid var(--border-hover)}
.bouton-secondaire::after{content:"";position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--accent);transition:width 0.4s var(--ease)}
.bouton-secondaire:hover{color:var(--text);border-color:rgba(255,255,255,0.2)}
.bouton-secondaire:hover::after{width:100%}
.bouton-secondaire:active{transform:scale(0.98)}

.bouton-lien{background:none;border:none;color:var(--text-mid);font-family:inherit;font-size:0.76rem;letter-spacing:3px;text-transform:uppercase;cursor:pointer;padding:10px 20px;transition:color 0.25s ease-out;position:relative}
.bouton-lien::after{content:"";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:0;height:1px;background:var(--accent);transition:width 0.3s ease-out}
.bouton-lien:hover,.bouton-lien:focus-visible{color:var(--accent);outline:none}
.bouton-lien:hover::after,.bouton-lien:focus-visible::after{width:60%}

.ripple-effect{position:absolute;border-radius:50%;background:rgba(255,255,255,0.2);transform:scale(0);animation:ripple 0.6s ease-out forwards;pointer-events:none;z-index:10}
@keyframes ripple{0%{transform:scale(0);opacity:0.4}100%{transform:scale(4);opacity:0}}

/* ============================================
   CONFIG — REDESIGN
   ============================================ */

.ecran-config{gap:24px;justify-content:flex-start;padding-top:130px}

/* STEPS */
.config-steps{display:flex;flex-direction:column;gap:0;width:100%;max-width:440px}

.config-step{display:flex;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--border);position:relative}
.config-step:last-child{border-bottom:none}

.step-num{display:none}

.bloc-config{width:100%;display:flex;flex-direction:column;gap:12px;align-items:center;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;border:none}
.bloc-config label{font-weight:600;font-size:0.76rem;letter-spacing:3px;text-transform:uppercase;color:var(--accent)}

/* CAPSULE SELECTOR */
.selecteur-capsule{display:flex;align-items:center;gap:0;background:rgba(10,10,12,0.5);border:1px solid var(--border-hover);border-radius:50px;padding:4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.btn-plus,.btn-moins{width:52px;height:52px;border-radius:50%;border:none;background:transparent;color:var(--text);font-size:1.5rem;font-weight:600;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;transition:background 0.2s,color 0.2s,transform 0.2s}
.btn-plus:hover,.btn-moins:hover{background:var(--accent);color:#fff;transform:scale(1.08)}
.btn-plus:active,.btn-moins:active{transform:scale(0.92)}

.valeur-affichee{font-family:var(--font-title);font-size:3.5rem;font-weight:400;min-width:90px;text-align:center;color:var(--accent);line-height:1;transition:transform 0.2s var(--ease-out);position:relative}
.valeur-affichee.pulse{transform:scale(1.15)}

/* BOTTOM FIXED */
.config-bottom{position:sticky;bottom:0;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 0 24px;background:linear-gradient(to top,var(--bg) 60%,transparent);z-index:5}

#liste-prenoms,#encheres-liste-prenoms{display:flex;flex-direction:column;gap:8px;width:100%}
#liste-prenoms input,#encheres-liste-prenoms input{animation:input-enter 0.35s var(--ease) both}
@keyframes input-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#liste-prenoms input,#encheres-liste-prenoms input,#devinette-input{width:100%;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-hover);background:rgba(10,10,12,0.7);color:var(--text);font-size:0.9rem;font-family:inherit;transition:border-color 0.3s,box-shadow 0.3s}
#devinette-input{max-width:340px;text-align:center;font-weight:600}
input::placeholder{color:var(--text-dim)}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}

/* ============================================
   GAME ELEMENTS
   ============================================ */

.ecran-centree{gap:24px}

/* SCENE ICONS */
.scene-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--accent-subtle);color:var(--accent);margin-bottom:6px;animation:icon-in 0.5s 0.1s var(--ease-out) both}
.scene-icon svg{width:28px;height:28px}
.scene-icon-lg{width:76px;height:76px;border-radius:20px}
.scene-icon-lg svg{width:34px;height:34px}
.scene-icon-danger{background:rgba(229,57,53,0.1);color:#e53935}
.scene-icon-warning{background:rgba(255,193,7,0.1);color:#ffc107}
.scene-icon-victory{background:rgba(220,20,60,0.12);color:var(--accent);animation:icon-in 0.5s 0.1s var(--ease-out) both,victory-icon-glow 2s ease-in-out infinite alternate}
@keyframes icon-in{from{opacity:0;transform:scale(0.5) translateY(10px)}to{opacity:1;transform:none}}
@keyframes victory-icon-glow{from{box-shadow:none}to{box-shadow:0 0 24px var(--accent-glow)}}

/* CARTE SECRETE (reveal du mot) */
.carte-secrete{perspective:800px;width:100%;max-width:400px}
.carte-secrete-inner{transform-style:preserve-3d;animation:secret-flip 0.7s var(--ease)}
@keyframes secret-flip{0%{transform:rotateY(-90deg);opacity:0}50%{opacity:1}100%{transform:rotateY(0)}}

.grand-nom{font-family:var(--font-title);font-size:3.5rem;font-weight:400;color:var(--accent);letter-spacing:5px;line-height:1;animation:name-in 0.6s var(--ease-out)}
@keyframes name-in{from{opacity:0;transform:scale(0.7)}to{opacity:1;transform:scale(1)}}

@property --ba{syntax:"<angle>";initial-value:0deg;inherits:false}
.grand-mot{
    font-family:var(--font-title);font-size:2.2rem;font-weight:400;color:var(--text);
    padding:36px 28px;border-radius:var(--radius);width:100%;max-width:400px;
    word-break:break-word;letter-spacing:2px;position:relative;
    border:1.5px solid transparent;
    background:linear-gradient(rgba(10,10,12,0.85),rgba(10,10,12,0.85)) padding-box,conic-gradient(from var(--ba),var(--accent),var(--accent-light),var(--accent),rgba(255,255,255,0.15),var(--accent)) border-box;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
    animation:border-spin 5s linear infinite;
}
@keyframes card-flip{0%{opacity:0;transform:perspective(800px) rotateY(-60deg) scale(0.9)}100%{opacity:1;transform:none}}
@keyframes border-spin{to{--ba:360deg}}

/* RESULTAT DIVIDER */
.resultat-divider{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:4px 0}
.resultat-role-label{font-size:0.7rem;color:var(--text-dim);letter-spacing:3px;text-transform:uppercase;font-weight:600}

/* JOUEURS LISTE (discussion) */
.joueurs-liste{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:420px}
.joueur-chip{font-size:0.82rem;padding:7px 14px;background:rgba(10,10,12,0.6);border:1px solid var(--border-hover);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:20px;color:var(--text-mid);font-weight:500;animation:chip-in 0.3s var(--ease) both}
@keyframes chip-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:none}}

/* BTN GROUP */
.btn-group{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}

.progress-dots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-width:280px}
.progress-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.1);transition:background 0.3s,transform 0.3s,box-shadow 0.3s}
.progress-dot.fait{background:var(--accent);opacity:0.5}
.progress-dot.actuel{background:var(--accent);transform:scale(1.4);box-shadow:0 0 8px var(--accent-glow);animation:dot-beat 1.2s ease-in-out infinite alternate}
@keyframes dot-beat{from{transform:scale(1.4)}to{transform:scale(1.6);box-shadow:0 0 14px var(--accent-glow)}}

/* VOTE */
.liste-vote{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px}
.btn-vote{width:100%;padding:18px 20px;border-radius:var(--radius);border:1px solid var(--border-hover);background:rgba(10,10,12,0.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text);font-size:0.95rem;font-weight:600;font-family:inherit;cursor:pointer;position:relative;overflow:hidden;transition:transform 0.2s,background 0.2s,border-color 0.2s;animation:vote-in 0.3s var(--ease) backwards}
@keyframes vote-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.btn-vote:hover{background:var(--accent);border-color:var(--accent);transform:translateX(3px)}
.btn-vote:active{transform:translateX(3px) scale(0.98)}
.btn-vote:nth-child(1){animation-delay:0s}.btn-vote:nth-child(2){animation-delay:.04s}.btn-vote:nth-child(3){animation-delay:.08s}.btn-vote:nth-child(4){animation-delay:.12s}.btn-vote:nth-child(5){animation-delay:.16s}.btn-vote:nth-child(6){animation-delay:.2s}.btn-vote:nth-child(7){animation-delay:.24s}.btn-vote:nth-child(8){animation-delay:.28s}.btn-vote:nth-child(9){animation-delay:.32s}.btn-vote:nth-child(10){animation-delay:.36s}.btn-vote:nth-child(11){animation-delay:.4s}.btn-vote:nth-child(12){animation-delay:.44s}

/* RESULTAT */
.halo-resultat{position:absolute;top:50%;left:50%;width:500px;height:500px;border-radius:50%;transform:translate(-50%,-50%) scale(0);pointer-events:none;opacity:0;z-index:-1;filter:blur(40px)}
.halo-resultat.bon{background:radial-gradient(circle,var(--accent) 0%,transparent 70%);animation:halo 0.7s var(--ease)}
.halo-resultat.mauvais{background:radial-gradient(circle,#e53935 0%,transparent 70%);animation:halo 0.7s var(--ease)}
@keyframes halo{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}40%{opacity:0.8;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.ecran.secousse{animation:shake 0.4s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}

/* RECAP */
.recapitulatif{width:100%;max-width:440px;display:flex;flex-direction:column;gap:8px}
.ligne-recap{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(10,10,12,0.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-sm);border-left:3px solid var(--text-dim);animation:recap-in 0.3s var(--ease) backwards}
@keyframes recap-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ligne-recap:nth-child(1){animation-delay:.04s}.ligne-recap:nth-child(2){animation-delay:.08s}.ligne-recap:nth-child(3){animation-delay:.12s}.ligne-recap:nth-child(4){animation-delay:.16s}.ligne-recap:nth-child(5){animation-delay:.2s}.ligne-recap:nth-child(6){animation-delay:.24s}.ligne-recap:nth-child(7){animation-delay:.28s}.ligne-recap:nth-child(8){animation-delay:.32s}
.ligne-recap.role-undercover,.ligne-recap.role-espion,.ligne-recap.role-mrwhite{border-left-color:var(--accent)}
.ligne-recap.role-civil{border-left-color:var(--text-dim)}
.ligne-recap .nom-joueur{font-weight:600;font-size:0.9rem}
.ligne-recap .role-joueur{font-size:0.68rem;text-transform:uppercase;letter-spacing:2px;font-weight:700}
.ligne-recap.role-undercover .role-joueur,.ligne-recap.role-espion .role-joueur,.ligne-recap.role-mrwhite .role-joueur{color:var(--accent)}
.ligne-recap.role-civil .role-joueur{color:var(--text-dim)}
.ligne-recap.elimine{opacity:0.35;text-decoration:line-through}

/* REGLES */
.bloc-regles{width:100%;max-width:460px;padding:22px;background:rgba(10,10,12,0.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:var(--radius);border:1px solid var(--border);border-left:3px solid var(--accent);text-align:left;display:flex;flex-direction:column;gap:8px}
.bloc-regles p{text-align:left}

/* OEUVRES — MEME PRINCIPE QUE MODE CARDS */
.liste-oeuvres{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;max-width:500px}
.liste-oeuvres .carte-oeuvre:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:2/1}

.carte-oeuvre{
    aspect-ratio:1/1;padding:0;border-radius:16px;
    border:1px solid rgba(255,255,255,0.1);background:rgba(17,17,17,0.9);
    color:var(--text);cursor:pointer;font-family:inherit;text-align:left;
    display:flex;align-items:flex-end;
    position:relative;overflow:hidden;
    transition:transform 0.35s var(--ease),border-color 0.3s,box-shadow 0.4s;
}
.carte-oeuvre:hover,.carte-oeuvre:focus-visible{
    transform:translateY(-4px) scale(1.03);
    border-color:rgba(220,20,60,0.2);
    box-shadow:0 16px 48px rgba(0,0,0,0.5),0 0 0 1px rgba(220,20,60,0.1),0 0 30px rgba(220,20,60,0.05);
    z-index:2;
    outline:none;
}
.carte-oeuvre:active{transform:scale(0.97)!important}

.carte-oeuvre-bg{position:absolute;inset:0;background-image:var(--card-img);background-size:cover;background-position:var(--img-pos,center);filter:grayscale(100%) brightness(0.35);transition:filter 0.5s,transform 0.5s;z-index:0}
.carte-oeuvre:hover .carte-oeuvre-bg{filter:grayscale(100%) brightness(0.28);transform:scale(1.06)}

.carte-oeuvre-color{
    position:absolute;inset:0;
    background-image:var(--card-img);background-size:cover;background-position:var(--img-pos,center);
    filter:brightness(0.85) saturate(1.3);z-index:1;
    -webkit-mask-image:radial-gradient(circle 100px at var(--mx,-200px) var(--my,-200px),black 0%,rgba(0,0,0,0.6) 40%,transparent 100%);
    mask-image:radial-gradient(circle 100px at var(--mx,-200px) var(--my,-200px),black 0%,rgba(0,0,0,0.6) 40%,transparent 100%);
    pointer-events:none;transition:transform 0.5s;
}
.carte-oeuvre:hover .carte-oeuvre-color{transform:scale(1.06)}

.carte-oeuvre-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.35) 50%,rgba(0,0,0,0.1) 100%);z-index:2;pointer-events:none}

.carte-oeuvre-contenu{position:relative;z-index:3;padding:14px 16px;width:100%}
.carte-oeuvre-titre-wrap{position:relative;display:inline-block}
.carte-oeuvre-titre{font-family:var(--font-title);font-size:1.5rem;font-weight:400;letter-spacing:3px;line-height:1;color:rgba(255,255,255,0.75);text-shadow:0 2px 10px rgba(0,0,0,0.6);transition:color 0.3s}
.carte-oeuvre:hover .carte-oeuvre-titre{color:rgba(255,255,255,0.9)}
.carte-oeuvre-titre-color{position:absolute;inset:0;font-family:var(--font-title);font-size:1.5rem;font-weight:400;letter-spacing:3px;line-height:1;color:var(--accent);text-shadow:0 0 16px var(--accent-glow);-webkit-mask-image:radial-gradient(circle 100px at var(--mx,-200px) var(--my,-200px),black 0%,rgba(0,0,0,0.5) 40%,transparent 100%);mask-image:radial-gradient(circle 100px at var(--mx,-200px) var(--my,-200px),black 0%,rgba(0,0,0,0.5) 40%,transparent 100%);pointer-events:none}

/* SLOT */
.slot-container{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;margin:12px 0;position:relative}

/* 8. CADRE AVEC LEDS */
.slot-container::before{content:"";position:absolute;inset:-8px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));z-index:0;box-shadow:0 0 30px var(--accent-glow);transition:box-shadow 0.3s}
.slot-container.spinning::before{animation:cadre-vibrate 0.08s linear infinite;box-shadow:0 0 50px var(--accent-glow),0 0 100px rgba(220,20,60,0.15)}

/* 7. VIBRATION DU CADRE */
@keyframes cadre-vibrate{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,-1px)}}

.slot-leds{position:absolute;inset:-8px;border-radius:18px;z-index:0;pointer-events:none;overflow:hidden}
.slot-led{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:0.15;transition:opacity 0.1s;box-shadow:0 0 6px var(--accent-glow)}
.slot-led.on{opacity:1;box-shadow:0 0 10px var(--accent),0 0 20px var(--accent-glow)}

.slot-fenetre{position:relative;width:100%;height:220px;overflow:hidden;border-radius:12px;background:linear-gradient(180deg,#000 0%,#120a04 15%,#120a04 85%,#000 100%);z-index:1;box-shadow:inset 0 4px 20px rgba(0,0,0,0.8)}
.slot-fenetre::before,.slot-fenetre::after{content:"";position:absolute;left:0;right:0;height:55px;z-index:3;pointer-events:none}
.slot-fenetre::before{top:0;background:linear-gradient(180deg,var(--bg),transparent)}
.slot-fenetre::after{bottom:0;background:linear-gradient(0deg,var(--bg),transparent)}

/* 5. MOTION BLUR */
.slot-defilement{display:flex;flex-direction:column;align-items:center;will-change:transform;transition:filter 0.5s}
.slot-defilement.blur{filter:blur(3px)}

.slot-item{height:55px;display:flex;align-items:center;justify-content:center;font-family:var(--font-title);font-size:1.3rem;font-weight:400;color:var(--text);text-align:center;padding:0 12px;width:100%;letter-spacing:2px;line-height:1;flex-shrink:0;transition:color 0.3s,text-shadow 0.3s}
.slot-item.selected{color:var(--accent);text-shadow:0 0 15px var(--accent-glow),0 0 30px rgba(220,20,60,0.2);animation:sel-pulse 0.6s ease-in-out infinite alternate}
@keyframes sel-pulse{from{transform:scale(1)}to{transform:scale(1.08);text-shadow:0 0 20px var(--accent-glow),0 0 40px rgba(220,20,60,0.3)}}

/* 3. BARRES LUMINEUSES LATERALES */
.slot-bars{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:12px;overflow:hidden}
.slot-bar-l,.slot-bar-r{position:absolute;top:0;bottom:0;width:3px}
.slot-bar-l{left:0;background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:0;animation:none}
.slot-bar-r{right:0;background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:0;animation:none}
.spinning .slot-bar-l,.spinning .slot-bar-r{opacity:1;animation:bar-pulse 0.15s ease-in-out infinite alternate}
.spinning .slot-bar-r{animation-delay:0.075s}
@keyframes bar-pulse{from{opacity:0.3;box-shadow:0 0 8px var(--accent-glow)}to{opacity:1;box-shadow:0 0 20px var(--accent),0 0 40px var(--accent-glow)}}

.slot-pointeur{position:absolute;top:50%;left:0;right:0;height:55px;transform:translateY(-50%);border-top:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);pointer-events:none;z-index:2;box-shadow:0 0 20px var(--accent-glow);transition:box-shadow 0.3s}
.slot-pointeur.flash{box-shadow:0 0 50px var(--accent-glow),0 0 100px rgba(220,20,60,0.4)}
.slot-pointeur::before,.slot-pointeur::after{content:"";position:absolute;top:50%;width:0;height:0;transform:translateY(-50%)}
.slot-pointeur::before{left:-1px;border-left:8px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}
.slot-pointeur::after{right:-1px;border-right:8px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}

.slot-flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(220,20,60,0.5) 0%,transparent 70%);z-index:4;opacity:0;border-radius:12px;animation:sf 0.6s ease-out forwards;pointer-events:none}
@keyframes sf{0%{opacity:0.8}100%{opacity:0}}

/* 4. PARTICULES A L'ARRET */
.slot-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);z-index:6;pointer-events:none;box-shadow:0 0 6px var(--accent);animation:spark-fly 0.7s ease-out forwards}
@keyframes spark-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0)}}

/* 6. NOM EN GRAND APRES ARRET */
.slot-reveal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;animation:reveal-bg 1.2s ease-out forwards}
.slot-reveal-name{font-family:var(--font-title);font-size:3.5rem;letter-spacing:6px;color:var(--accent);text-shadow:0 0 30px var(--accent-glow),0 0 60px rgba(220,20,60,0.2);animation:reveal-name 1.2s var(--ease-out)}
@keyframes reveal-bg{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes reveal-name{0%{opacity:0;transform:scale(0.3)}20%{opacity:1;transform:scale(1.15)}35%{transform:scale(0.98)}50%{transform:scale(1)}75%{transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}

/* SUIVI */
.tableau-suivi{width:100%;max-width:440px;display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ligne-suivi{display:flex;flex-direction:column;gap:6px;padding:14px 18px;background:rgba(10,10,12,0.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-sm);border:1px solid var(--border);text-align:left;transition:border-color 0.2s,box-shadow 0.3s}
.ligne-suivi.actif{border-color:rgba(220,20,60,0.2);box-shadow:0 0 0 1px var(--accent-subtle)}
.ligne-suivi-tete{display:flex;justify-content:space-between;align-items:baseline}
.ligne-suivi-nom{font-weight:600;font-size:0.9rem;color:var(--text)}
.ligne-suivi-budget{font-family:var(--font-title);font-weight:400;color:var(--accent);font-size:1.2rem;letter-spacing:1px;transition:color 0.3s}
.ligne-suivi-budget.fauche{color:var(--text-dim);text-decoration:line-through}
.ligne-suivi-team{display:flex;flex-wrap:wrap;gap:4px}
.tag-perso{font-size:0.72rem;padding:3px 8px;background:var(--accent-subtle);color:var(--accent);border:1px solid rgba(220,20,60,0.15);border-radius:4px;font-weight:600;animation:tag-in 0.3s var(--ease-out) backwards}
@keyframes tag-in{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:none}}
.team-vide{font-size:0.8rem;color:var(--text-dim);font-style:italic}

/* ATTRIBUTION */
.liste-acquereurs{display:flex;flex-direction:column;gap:8px;width:100%}
.btn-acquereur{width:100%;padding:14px 18px;border-radius:var(--radius);border:1px solid var(--border-hover);background:rgba(10,10,12,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text);font-size:0.9rem;font-weight:600;font-family:inherit;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;transition:transform 0.2s,border-color 0.2s,background 0.2s}
.btn-acquereur:hover:not(:disabled){border-color:rgba(220,20,60,0.3);transform:translateX(3px)}
.btn-acquereur:disabled{opacity:0.3;cursor:not-allowed}
.btn-acquereur.selectionne{border-color:var(--accent);background:var(--accent-subtle)}
.btn-acquereur-budget{font-family:var(--font-title);font-size:1.1rem;color:var(--accent);font-weight:400;letter-spacing:1px}
.boutons-rapides{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap;justify-content:center}
.btn-rapide{padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-hover);background:transparent;color:var(--text-mid);font-size:0.82rem;font-weight:700;font-family:inherit;cursor:pointer;position:relative;overflow:hidden;transition:all 0.2s}
.btn-rapide:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px)}
.btn-rapide:active{transform:scale(0.95)}

/* FIN */
.equipes-finales{width:100%;max-width:460px;display:flex;flex-direction:column;gap:12px}
.equipe-finale{padding:20px 22px;background:rgba(10,10,12,0.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius);border:1px solid var(--border);border-left:3px solid var(--accent);text-align:left;animation:recap-in 0.3s var(--ease) backwards}
.equipe-finale:nth-child(1){animation-delay:.08s}.equipe-finale:nth-child(2){animation-delay:.16s}.equipe-finale:nth-child(3){animation-delay:.24s}.equipe-finale:nth-child(4){animation-delay:.32s}
.equipe-finale-tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.equipe-finale-nom{font-family:var(--font-title);font-size:1.4rem;font-weight:400;letter-spacing:2px}
.equipe-finale-budget{font-size:0.78rem;color:var(--text-dim)}
.equipe-finale-persos{display:flex;flex-wrap:wrap;gap:5px}
.equipe-finale-persos .tag-perso{font-size:0.8rem;padding:4px 10px}

/* CONFETTI */
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.confetti-piece{position:absolute;top:-20px;animation:cf linear forwards}
.confetti-piece.star{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.confetti-piece.streamer{border-radius:2px!important}
@keyframes cf{0%{transform:translateY(0) rotate(0deg);opacity:1}80%{opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
.confetti-piece:nth-child(odd){animation-name:cfs}
@keyframes cfs{0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:1}25%{transform:translateY(25vh) translateX(25px) rotate(180deg)}50%{transform:translateY(50vh) translateX(-15px) rotate(360deg)}75%{transform:translateY(75vh) translateX(20px) rotate(540deg);opacity:1}100%{transform:translateY(100vh) translateX(-10px) rotate(720deg);opacity:0}}

.victoire-texte{animation:vz 0.8s var(--ease-out)!important}
@keyframes vz{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2)}80%{transform:scale(0.97)}100%{transform:scale(1);opacity:1}}
.victoire-gradient{background:linear-gradient(90deg,var(--accent) 0%,#ffd700 25%,#fff 50%,#ffd700 75%,var(--accent) 100%)!important;background-size:200% auto!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;animation:gs 3s linear infinite,vz 0.8s var(--ease-out)!important}
.victoire-gradient .lettre-hover{-webkit-text-fill-color:transparent!important}
@keyframes gs{0%{background-position:0% center}100%{background-position:200% center}}

.ghost-trail{position:fixed;font-family:var(--font-title);color:var(--accent);pointer-events:none;z-index:1000;opacity:0.4;animation:gf 0.5s ease-out forwards}
@keyframes gf{to{transform:translateY(-30px) scale(0.7);opacity:0}}

/* ============================================
   AUTH PAGES
   ============================================ */

.auth-form{display:flex;flex-direction:column;gap:18px;width:100%;max-width:400px}
.auth-field{display:flex;flex-direction:column;gap:6px;text-align:left}
.auth-field label{font-size:0.74rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}
.auth-field input{width:100%;padding:16px 18px;border-radius:var(--radius-sm);border:1px solid var(--border-hover);background:rgba(10,10,12,0.7);color:var(--text);font-size:0.9rem;font-family:inherit;transition:border-color 0.3s,box-shadow 0.3s}
.auth-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}
.auth-form .bouton-principal{max-width:none;width:100%}

.auth-links{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;width:100%;max-width:400px}
.auth-link{background:none;border:none;color:var(--text-mid);font-family:inherit;font-size:0.82rem;cursor:pointer;padding:4px 8px;transition:color 0.22s ease-out;letter-spacing:0.5px;position:relative}
.auth-link::after{content:"";position:absolute;left:8px;right:8px;bottom:2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform 0.3s ease-out}
.auth-link:hover,.auth-link:focus-visible{color:var(--accent);outline:none}
.auth-link:hover::after,.auth-link:focus-visible::after{transform:scaleX(1)}

.auth-error{color:#e53935;font-size:0.82rem;font-weight:600;min-height:1.2em;text-align:center;max-width:400px;width:100%;letter-spacing:0.3px;animation:fade-up 0.3s var(--ease)}

#ecran-login .bouton-secondaire,#ecran-register .bouton-secondaire,#ecran-forgot .bouton-secondaire,#ecran-profil .bouton-secondaire{max-width:400px;width:100%}

/* PROFIL */

.profil-avatar{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(220,20,60,0.08);border:2px solid rgba(220,20,60,0.2);color:var(--accent);margin-bottom:10px;transition:border-color 0.3s,box-shadow 0.3s}
.profil-avatar:hover{border-color:var(--accent);box-shadow:0 0 24px var(--accent-glow)}

.profil-stats{display:flex;gap:32px;margin:20px 0}
.profil-stat{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:80px}
.profil-stat-val{font-family:var(--font-title);font-size:2.5rem;font-weight:400;color:var(--accent);letter-spacing:2px;line-height:1;min-width:32px;display:inline-block}
.profil-stat-label{font-size:0.72rem;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;font-weight:600}
.profil-stat-val.loading{background:linear-gradient(90deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.12) 50%,rgba(255,255,255,0.06) 100%);background-size:200% 100%;animation:skel-pulse 1.2s ease-in-out infinite;color:transparent;border-radius:6px;text-shadow:none}
@keyframes skel-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* PROFIL SECTIONS */
.profil-sections{display:flex;flex-direction:column;gap:18px;width:100%;max-width:420px;margin-top:4px}
.profil-section{display:flex;flex-direction:column;gap:8px;padding:18px 0 4px;border-top:1px solid var(--border)}
.profil-section-title{font-family:var(--font-body);font-size:0.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:6px;text-align:left;width:100%}

.profil-action{display:flex;flex-direction:column;padding:0;border:1px solid var(--border-hover);background:rgba(10,10,12,0.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:border-color 0.2s,background 0.2s;font-family:inherit;color:var(--text);width:100%;text-align:left}
.profil-action:hover{border-color:rgba(220,20,60,0.25);background:rgba(10,10,12,0.8)}
.profil-action-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;width:100%}
.profil-action-label{font-size:0.86rem;color:var(--text);font-weight:500}
.profil-action-arrow{color:var(--text-dim);font-size:1.3rem;line-height:1;transition:transform 0.25s,color 0.2s}
.profil-action.open .profil-action-arrow{transform:rotate(90deg);color:var(--accent)}
.profil-action-btn{cursor:pointer;border:1px solid var(--border-hover)}
.profil-action-btn:hover .profil-action-arrow{color:var(--accent);transform:translateX(3px)}

.profil-action-expand{padding:0 16px 14px;display:flex;flex-direction:column;gap:10px;animation:profil-expand 0.3s var(--ease) both}
@keyframes profil-expand{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.profil-action-expand input{width:100%;padding:11px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-hover);background:rgba(0,0,0,0.4);color:var(--text);font-family:inherit;font-size:0.88rem;transition:border-color 0.2s,box-shadow 0.2s}
.profil-action-expand input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}

.profil-confirm-text{font-size:0.82rem;color:var(--text-mid);line-height:1.5}

.profil-action-btns{display:flex;gap:8px}
.btn-mini{flex:1;padding:9px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-hover);background:transparent;color:var(--text-mid);font-family:inherit;font-size:0.74rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:color 0.2s,border-color 0.2s,background 0.2s,transform 0.15s}
.btn-mini:hover{border-color:var(--text);color:var(--text)}
.btn-mini:active{transform:scale(0.97)}
.btn-mini-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-mini-primary:hover{background:var(--accent-light);border-color:var(--accent-light);color:#fff}
.btn-mini-danger{background:#e53935;border-color:#e53935;color:#fff}
.btn-mini-danger:hover{background:#f04942;border-color:#f04942;color:#fff}

.profil-row{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border:1px solid var(--border);background:rgba(10,10,12,0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius-sm);margin-top:2px}
.profil-row-label{font-size:0.86rem;color:var(--text-mid);font-weight:500}

.lang-switch-inline{padding:2px;gap:2px}
.lang-switch-inline .lang-btn{padding:5px 11px;font-size:0.68rem}

.profil-toggle{width:44px;height:24px;border-radius:24px;background:rgba(255,255,255,0.08);border:1px solid var(--border-hover);position:relative;cursor:pointer;transition:background 0.25s,border-color 0.25s;padding:0;flex-shrink:0}
.profil-toggle-dot{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text-mid);transition:transform 0.25s,background 0.25s,box-shadow 0.25s}
.profil-toggle.on{background:var(--accent-subtle);border-color:rgba(220,20,60,0.4)}
.profil-toggle.on .profil-toggle-dot{transform:translateX(20px);background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}

.profil-toast-success{color:#4caf50;font-size:0.84rem;font-weight:600;min-height:1.2em;text-align:center;max-width:400px;width:100%;opacity:0;transform:translateY(-4px);transition:opacity 0.25s,transform 0.25s}
.profil-toast-success.visible{opacity:1;transform:translateY(0)}
#profil-error{max-width:400px}

/* LEADERBOARD */
.leaderboard{display:flex;flex-direction:column;gap:8px;width:100%;max-width:440px}
.lb-row{display:flex;align-items:center;gap:14px;padding:12px 18px;background:rgba(10,10,12,0.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius-sm);border-left:3px solid var(--text-dim);text-align:left;animation:recap-in 0.3s var(--ease) backwards}
.lb-row:nth-child(1){border-left-color:#ffd700}
.lb-row:nth-child(2){border-left-color:#c0c0c0}
.lb-row:nth-child(3){border-left-color:#cd7f32}
.lb-row.me{box-shadow:0 0 0 1px var(--accent) inset,0 0 22px rgba(220,20,60,0.15)}
.lb-row:nth-child(1){animation-delay:.04s}.lb-row:nth-child(2){animation-delay:.08s}.lb-row:nth-child(3){animation-delay:.12s}.lb-row:nth-child(4){animation-delay:.16s}.lb-row:nth-child(5){animation-delay:.2s}.lb-row:nth-child(6){animation-delay:.24s}.lb-row:nth-child(7){animation-delay:.28s}.lb-row:nth-child(8){animation-delay:.32s}.lb-row:nth-child(9){animation-delay:.36s}.lb-row:nth-child(10){animation-delay:.4s}
.lb-rank{font-family:var(--font-title);font-size:1.5rem;color:var(--accent);min-width:30px;letter-spacing:1px;line-height:1}
.lb-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lb-name{font-weight:600;font-size:0.92rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-games{font-size:0.68rem;color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase;font-weight:600}
.lb-wr{font-family:var(--font-title);font-size:1.25rem;color:var(--accent);letter-spacing:1px;line-height:1}
.lb-skel{display:flex;flex-direction:column;gap:8px;width:100%;max-width:440px}
.lb-skel-row{height:58px;border-radius:var(--radius-sm);border:1px solid var(--border);background:linear-gradient(90deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.09) 50%,rgba(255,255,255,0.04) 100%);background-size:200% 100%;animation:skel-pulse 1.4s ease-in-out infinite}

/* PROFIL HISTORY */
.profil-history{display:flex;flex-direction:column;gap:6px;width:100%}
.hist-row{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(10,10,12,0.5);border:1px solid var(--border);border-radius:10px;border-left:3px solid var(--accent);font-size:0.8rem;animation:recap-in 0.3s var(--ease) backwards}
.hist-row.lost{border-left-color:#666}
.hist-mode{color:var(--text-mid);font-weight:600;letter-spacing:0.5px}
.hist-result{font-family:var(--font-title);font-size:0.78rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;padding:3px 10px;border-radius:999px}
.hist-row.won .hist-result{color:var(--accent);background:rgba(220,20,60,0.15)}
.hist-row.lost .hist-result{color:var(--text-dim);background:rgba(255,255,255,0.04)}
.profil-history-empty{font-size:0.82rem;color:var(--text-dim);text-align:center;padding:14px 0}

/* GLOBAL TOAST */
.global-toast{
    position:fixed;bottom:28px;left:50%;z-index:1000;
    padding:12px 22px;
    background:rgba(10,10,12,0.9);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:999px;
    color:rgba(255,255,255,0.92);
    font-family:var(--font-body);font-size:0.82rem;font-weight:500;letter-spacing:0.5px;
    box-shadow:0 14px 38px rgba(0,0,0,0.5),0 0 24px rgba(220,20,60,0.1);
    opacity:0;pointer-events:none;
    transform:translateX(-50%) translateY(20px);
    transition:opacity 0.3s var(--ease),transform 0.35s var(--ease-out);
}
.global-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* CONFIRM MODAL */
.confirm-modal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;animation:fadein 0.2s ease}
.confirm-box{background:rgba(15,15,18,0.95);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px 26px;max-width:380px;width:90%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,0.6),0 0 30px rgba(220,20,60,0.08);display:flex;flex-direction:column;gap:18px;animation:popin 0.25s var(--ease-out)}
.confirm-text{font-size:0.95rem;color:var(--text);line-height:1.5;max-width:none}
.confirm-btns{display:flex;flex-direction:column;gap:10px;align-items:center;width:100%}
.confirm-btns .bouton-principal,.confirm-btns .bouton-secondaire{max-width:none;width:100%}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes popin{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}

/* OFFLINE BANNER */
.offline-banner{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(229,57,53,0.18);border:1px solid rgba(229,57,53,0.35);color:#ff7e7a;font-size:0.78rem;font-weight:600;letter-spacing:0.5px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,0.4);animation:slidein 0.3s var(--ease-out)}
@keyframes slidein{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ============================================
   RESULT TOGGLE (qui a gagné ?) + TOAST
   ============================================ */

.result-toggle{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 24px;background:rgba(10,10,12,0.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-hover);border-radius:var(--radius);max-width:360px;width:100%;animation:fade-up 0.4s var(--ease) both}
.result-toggle .aide{margin-bottom:2px}
.result-toggle-btns{display:flex;gap:10px;width:100%;justify-content:center}
.result-btn{flex:1;max-width:120px;padding:11px 18px;border-radius:var(--radius-sm);border:1px solid var(--border-hover);background:transparent;color:var(--text-mid);font-family:inherit;font-size:0.82rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:color 0.2s,border-color 0.2s,background 0.2s,transform 0.15s}
.result-btn:hover{border-color:var(--accent);color:var(--accent)}
.result-btn:active{transform:scale(0.96)}
.result-btn.selected{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 12px var(--accent-glow)}

.toast-error{color:#e53935;font-size:0.84rem;font-weight:600;letter-spacing:0.3px;min-height:1.2em;text-align:center;max-width:400px;width:100%;opacity:0;transform:translateY(-4px);transition:opacity 0.25s,transform 0.25s}
.toast-error.visible{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}#particles-bg,.splash-screen,.blob-bg,.curseur-lumiere{display:none}}
@media(pointer:coarse){.curseur-lumiere{display:none}}