/* ============================================
   KhalGalerie v6 — Premium Design System
   ============================================ */

/* ---------- CSS Variables / Theme ---------- */
:root {
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    /* Direction D « editorial » (maquette _header_redesign/preview.html#cD),
       mais a l'echelle de l'ecran : 7.5vh, comme avant la refonte. En px fixes
       la barre garderait la meme hauteur physique quelle que soit la
       definition, donc paraitrait deux fois plus fine sur un 4K que sur un
       1080p. 7.5vh = les 66 px de la maquette a 880 px de zone utile. */
    --header-h: 7.5vh;
    --mobile-nav-h: 58px;
    /* Barre d'info du live. Passee de 32 a 46px : elle tient desormais sur DEUX
       lignes (donnees courtes en haut, titre en bas). Cette variable pilote
       aussi le haut du chat mobile, donc le decalage suit tout seul. */
    --live-info-h: 46px;
    --chat-w: 38vw; /* Point 4 : largeur de la colonne chat en mode paysage (ajustable au drag) */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --transition: 0.15s ease;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.16);
    --rubis-1: #1e40af; --rubis-2: #3b82f6; --rubis-3: #93c5fd;
    --rubis-red: #e74c3c;
    --gradient-rubis: linear-gradient(135deg, var(--rubis-1), var(--rubis-2));
    --gradient-accent: linear-gradient(135deg, #1e40af, #3b82f6);
}

[data-theme="dark"] {
    --bg-primary: #050a18; --bg-secondary: #0a1128;
    --bg-card: rgba(10,20,48,0.7); --bg-card-hover: rgba(16,30,64,0.8);
    --bg-input: rgba(8,14,32,0.8); --bg-deep: rgba(6,10,24,0.6);
    --border: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.14);
    --text-primary: #f0f0f5; --text-secondary: #9898b4; --text-muted: #5e5e80;
    --accent: #3b82f6; --accent-hover: #60a5fa; --accent-glow: rgba(59,130,246,0.2);
    --success: #34d399; --success-bg: rgba(52,211,153,0.1);
    --error: #f87171; --error-bg: rgba(248,113,113,0.1);
    --warning: #fbbf24; --warning-bg: rgba(251,191,36,0.08);
    --header-bg: rgba(8,8,26,0.8); --overlay: rgba(0,0,0,0.65);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.5);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
    --glow-purple: 0 0 30px var(--accent-glow, rgba(59,130,246,0.15));
    --glow-red: 0 0 20px rgba(231,76,60,0.1);
    /* Header D : 3 gris propres a la barre. Ils ne suivent PAS la couleur
       d'accent choisie par l'utilisateur (applyThemeColor) — c'est le principe
       de la direction : le header ne prend pas la parole. */
    --hd-nav: #5e5e80; --hd-nav-hover: #b9b9d0; --hd-nav-on: #fff; --hd-num: #cfcfe0;
    --hd-rule: rgba(255,255,255,.05);
    /* Fondu du header : opaque en haut, totalement eteint en bas de barre. */
    --hd-fade-1: rgba(3,2,10,.62); --hd-fade-2: rgba(3,2,10,.24);
    --hd-cog: rgba(255,255,255,.28);
}

[data-theme="light"] {
    --bg-primary: #f4f2f7; --bg-secondary: #eae6f0;
    --bg-card: rgba(255,255,255,0.85); --bg-card-hover: rgba(249,247,252,0.9);
    --bg-input: rgba(240,236,245,0.8); --bg-deep: rgba(235,230,242,0.6);
    --border: rgba(0,0,0,0.07); --border-hover: rgba(0,0,0,0.14);
    --text-primary: #1a1a2e; --text-secondary: #555570; --text-muted: #8888a0;
    --accent: #2563eb; --accent-hover: #1d4ed8; --accent-glow: rgba(37,99,235,0.15);
    --success: #10b981; --success-bg: rgba(16,185,129,0.1);
    --error: #ef4444; --error-bg: rgba(239,68,68,0.1);
    --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.08);
    --header-bg: rgba(244,242,247,0.85); --overlay: rgba(0,0,0,0.3);
    --glow-purple: 0 0 20px var(--accent-glow, rgba(37,99,235,0.1));
    --glow-red: 0 0 15px rgba(239,68,68,0.08);
    /* Header D en clair : memes ROLES, valeurs inversees (cf. bloc dark) */
    --hd-nav: #8888a0; --hd-nav-hover: #4a4a63; --hd-nav-on: #14141f; --hd-num: #2c2c40;
    --hd-rule: rgba(0,0,0,.07);
    --hd-fade-1: rgba(255,255,255,.78); --hd-fade-2: rgba(255,255,255,.3);
    --hd-cog: rgba(0,0,0,.24);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Sprint live-ux : inflation de police FIGEE. Par defaut le moteur mobile applique
   sa propre mise a l'echelle du texte (font boosting) et la recalcule quand la
   largeur d'un bloc change — le chat revenait du plein ecran avec des lettres
   enormes, de facon intermittente. 100% = on garde la taille demandee, point.
   Ne touche PAS au zoom d'accessibilite, qui reste entierement disponible. */
html,body{height:100%;font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{user-select:none;-webkit-user-select:none}
body::before{content:'';position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:
    radial-gradient(ellipse 80% 60% at 20% 10%, var(--accent-glow) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, var(--accent-glow) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, var(--accent-glow) 0%, transparent 60%);
    pointer-events:none}
iframe,.live-player,.chat-box,input,textarea,select{user-select:auto;-webkit-user-select:auto}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}
/* Perf images (01/08/2026) : les <img> lourds passent en <picture> (source webp +
   repli png). display:contents retire le <picture> du flux de mise en page, donc
   c'est l'<img> qui reste l'enfant flex/grid direct — geometrie inchangee. */
picture{display:contents}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--accent-glow);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

.pack-row,.btn-primary,.btn-secondary,.btn-spin,.event-card,.events-tab,.preset-btn,.rubis-display,.btn-twitch-login{will-change:transform}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* ---------- Icons ---------- */
.icon{display:inline-flex;flex-shrink:0;vertical-align:middle}
.icon-xs{width:14px;height:14px}.icon-sm{width:18px;height:18px}.icon-nav{width:20px;height:20px}
.icon-md{width:24px;height:24px}.icon-lg{width:32px;height:32px}.icon-xl{width:48px;height:48px}
.icon-title{width:36px;height:36px;color:var(--accent);filter:drop-shadow(0 0 8px var(--accent-glow))}

.rubis-icon-xs,.rubis-icon-sm,.rubis-icon-md,.rubis-icon-lg,.rubis-icon-xl{object-fit:contain;flex-shrink:0}
.rubis-icon-xs{width:auto;height:30px}.rubis-icon-sm{width:auto;height:35px}.event-card-commun[data-event-currency="aura"] .contribute-input-group .rubis-icon-sm{height:50px}.event-card-commun[data-event-currency="aura"] .progress-current .rubis-inline,.event-card-commun[data-event-currency="aura"] .user-contrib .rubis-inline,.event-card-commun[data-event-currency="aura"] .top-amount .rubis-inline{height:28px;width:auto;vertical-align:-6px}
.rubis-icon-md{width:28px;height:44px}.rubis-icon-lg{width:40px;height:64px}.rubis-icon-xl{width:64px;height:100px}
.rubis-inline{width:10px;height:16px;vertical-align:-2px;display:inline-block;flex-shrink:0;object-fit:contain}

/* ---------- Buttons ---------- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:none;border-radius:var(--radius-md);background:var(--gradient-rubis);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.9rem;cursor:pointer;transition:transform .12s,box-shadow .12s;box-shadow:0 4px 16px var(--accent-glow);position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);opacity:0;transition:opacity .12s}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 28px var(--accent-glow)}
.btn-primary:hover::after{opacity:1}
.btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 10px var(--accent-glow)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-secondary);font-family:var(--font-display);font-weight:500;font-size:.9rem;cursor:pointer;transition:color .12s,border-color .12s,background .12s,box-shadow .12s}
.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}

/* ============================================
   LOGIN — refonte « salle du trésor » v2 carte centrée (17/07/2026)
   Marque or/rubis du header (logo couronné + wordmark lw-g/lw-l) centrée en
   haut, carte de connexion au CENTRE, tuiles features en ailes symétriques
   (empilées sous la carte en-dessous de 1150px). Fond : aurora CSS instantanée
   + mur de clips allégé (fade-in par image, cache localStorage 30 min côté JS),
   statut live rendu server-side. Markup + JS inline : includes/login.php.
   ============================================ */
.login-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:hidden;background:
    radial-gradient(ellipse 90% 70% at 72% 16%,#0a1128 0%,rgba(10,17,40,0) 60%),
    radial-gradient(ellipse 75% 60% at 18% 88%,#120b20 0%,rgba(18,11,32,0) 58%),
    #04070f}
/* Couche 1 : aurora (zéro réseau, visible instantanément pendant que les clips chargent) */
.login-aurora{position:absolute;inset:-22%;z-index:1;pointer-events:none;transform:translate3d(calc(var(--mx,0)*24px),calc(var(--my,0)*18px),0);animation:loginFadeIn 1.4s ease both}
.login-aurora i{position:absolute;border-radius:50%;will-change:transform;animation:loginAurora 30s ease-in-out infinite alternate}
.login-aurora .la1{width:58vw;height:58vw;left:-6%;top:-10%;background:radial-gradient(circle,rgba(59,130,246,.17),transparent 65%);animation-duration:33s}
.login-aurora .la2{width:50vw;height:50vw;right:-8%;top:26%;background:radial-gradient(circle,rgba(240,180,41,.13),transparent 64%);animation-duration:41s;animation-delay:-12s}
.login-aurora .la3{width:54vw;height:54vw;left:20%;bottom:-16%;background:radial-gradient(circle,rgba(231,76,60,.10),transparent 62%);animation-duration:36s;animation-delay:-22s}
@keyframes loginAurora{from{transform:translate3d(-4%,2%,0) scale(1)}to{transform:translate3d(5%,-4%,0) scale(1.16)}}
@keyframes loginFadeIn{from{opacity:0}to{opacity:1}}
/* Couche 2 : mur de clips — décor pur, fade-in par image via .on (posée au load JS) */
.login-clips-wall{position:absolute;inset:-70px;z-index:2;display:flex;gap:6px;padding:0 4px;opacity:.41;pointer-events:none;overflow:hidden;transform:rotate(-5deg) scale(1.18) translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-10px),0);transform-origin:center center}
.login-clips-col{flex:1;display:flex;flex-direction:column;gap:6px;animation:clipsScrollUp 55s linear infinite;will-change:transform}
.login-clips-col.down{animation-name:clipsScrollDown}
@keyframes clipsScrollUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
@keyframes clipsScrollDown{0%{transform:translateY(-50%)}100%{transform:translateY(0)}}
.login-clip-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.025);flex-shrink:0}
.login-clip-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.05);transition:opacity .9s ease,transform 1.4s ease}
.login-clip-thumb img.on{opacity:1;transform:none}
/* Couche 3 : scrim recentré — bandes haut/bas + voile central derrière le contenu */
.login-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;background:
    linear-gradient(180deg,rgba(4,7,15,.78) 0%,rgba(4,7,15,.42) 30%,rgba(4,7,15,.42) 64%,rgba(4,7,15,.8) 100%),
    radial-gradient(ellipse 68% 62% at 50% 47%,rgba(4,7,15,.5) 0%,rgba(4,7,15,.12) 52%,rgba(4,7,15,.55) 100%)}
/* Couche 4 : braises (aura) */
.login-particles{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.login-particle{position:absolute;border-radius:50%;opacity:0;animation:loginParticle 9s ease-in-out infinite}
.login-particle.p1{width:4px;height:4px;background:#f0b429;box-shadow:0 0 8px rgba(240,180,41,.8);left:8%;top:82%;animation-delay:0s;animation-duration:8s}
.login-particle.p2{width:3px;height:3px;background:#f97316;box-shadow:0 0 6px rgba(249,115,22,.8);left:22%;top:92%;animation-delay:1.6s;animation-duration:10s}
.login-particle.p3{width:5px;height:5px;background:#e74c3c;box-shadow:0 0 9px rgba(231,76,60,.7);left:37%;top:86%;animation-delay:.7s;animation-duration:9s}
.login-particle.p4{width:3px;height:3px;background:#ffd769;box-shadow:0 0 6px rgba(255,215,105,.9);left:52%;top:94%;animation-delay:2.4s;animation-duration:11s}
.login-particle.p5{width:4px;height:4px;background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,.7);left:64%;top:88%;animation-delay:.3s;animation-duration:8.5s}
.login-particle.p6{width:5px;height:5px;background:#f0b429;box-shadow:0 0 10px rgba(240,180,41,.7);left:76%;top:84%;animation-delay:3.1s;animation-duration:12s}
.login-particle.p7{width:3px;height:3px;background:#e74c3c;box-shadow:0 0 6px rgba(231,76,60,.8);left:88%;top:90%;animation-delay:1.1s;animation-duration:9.5s}
.login-particle.p8{width:4px;height:4px;background:#f97316;box-shadow:0 0 8px rgba(249,115,22,.7);left:95%;top:80%;animation-delay:2s;animation-duration:10.5s}
.login-particle.p9{width:3px;height:3px;background:#ffd769;box-shadow:0 0 7px rgba(255,215,105,.8);left:15%;top:75%;animation-delay:4.2s;animation-duration:11.5s}
.login-particle.p10{width:4px;height:4px;background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,.6);left:45%;top:78%;animation-delay:5s;animation-duration:9s}
@keyframes loginParticle{0%{transform:translate(0,0) scale(0);opacity:0}12%{opacity:.85;transform:translate(6px,-40px) scale(1)}55%{opacity:.5;transform:translate(-8px,-160px) scale(.9)}100%{opacity:0;transform:translate(4px,-300px) scale(.2)}}
/* Scène : marque en haut, carte au CENTRE, features en ailes ; margin:auto = centrage
   sûr + scroll interne si viewport court */
.login-stage{position:relative;z-index:10;height:100%;overflow-y:auto;overflow-x:hidden;display:flex;scrollbar-width:none}
.login-stage::-webkit-scrollbar{display:none}
.login-inner{margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,460px) minmax(0,1fr);grid-template-areas:"brand brand brand" "fl1 card fr1" "fl2 card fr2" ". under .";column-gap:44px;row-gap:16px;align-items:center;width:100%;max-width:1240px;padding:40px 48px}
/* Zone marque (haut, centrée) */
.login-brand-zone{grid-area:brand;justify-self:center;text-align:center;margin-bottom:14px}
.login-brand{display:inline-flex;align-items:center;gap:18px;text-align:left;animation:loginFadeUp .7s .1s both}
.login-brand-logo{height:84px;width:auto;flex-shrink:0;filter:drop-shadow(0 6px 24px rgba(240,180,41,.28)) drop-shadow(0 2px 10px rgba(231,76,60,.25));animation:loginLogoBob 6s ease-in-out infinite}
@keyframes loginLogoBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}
.login-wordmark{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,4.2vw,3.3rem);letter-spacing:-.02em;line-height:1;white-space:nowrap;display:flex;align-items:baseline}
.login-wordmark .lw-g,.login-wordmark .lw-solo{background:linear-gradient(125deg,#ffd769,#f0b429 65%);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-wordmark .lw-l{color:var(--rubis-red)}
.login-brand-tag{margin-top:8px;font-size:.98rem;color:var(--text-secondary);font-weight:500}
.login-brand-tag b{color:var(--text-primary);font-weight:700}
.login-pitch{margin-top:16px;font-size:1.02rem;color:var(--text-secondary);font-weight:500;animation:loginFadeUp .7s .25s both}
.login-rotator{display:grid;justify-items:center;overflow:hidden;height:1.5em;margin-top:2px}
.login-rotator span{grid-area:1/1;height:1.5em;display:flex;align-items:center;font-weight:700;color:#ffd769;opacity:0;animation:loginRotate 14s infinite}
.login-rotator span:nth-child(2){animation-delay:3.5s}
.login-rotator span:nth-child(3){animation-delay:7s}
.login-rotator span:nth-child(4){animation-delay:10.5s}
@keyframes loginRotate{0%{opacity:0;transform:translateY(85%)}3%{opacity:1;transform:translateY(0)}25.5%{opacity:1;transform:translateY(0)}29%{opacity:0;transform:translateY(-85%)}100%{opacity:0}}
.login-live-chip{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:9px 17px;border-radius:999px;background:rgba(7,12,28,.62);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.86rem;color:var(--text-secondary);font-weight:600;animation:loginFadeUp .7s .4s both}
.login-live-chip .llc-dot{width:9px;height:9px;border-radius:50%;background:#3f4660;flex-shrink:0}
.login-live-chip b{color:var(--text-primary);font-weight:700}
.login-live-chip .llc-live{color:#ff8a7a;font-weight:800;letter-spacing:.05em}
.login-live-chip.is-live{border-color:rgba(231,76,60,.4);box-shadow:0 0 26px rgba(231,76,60,.14)}
.login-live-chip.is-live .llc-dot{background:#e74c3c;box-shadow:0 0 10px rgba(231,76,60,.9);animation:loginLivePulse 1.6s ease-in-out infinite}
@keyframes loginLivePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}}
/* Features : display:contents au desktop -> les tuiles se placent dans la grille */
.login-features{list-style:none;display:contents}
.login-feat{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:rgba(7,14,34,.58);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .18s,border-color .18s,background .18s;animation:loginFadeUp .6s both;width:100%;max-width:352px}
.login-feat:nth-child(1){animation-delay:.5s}.login-feat:nth-child(2){animation-delay:.58s}.login-feat:nth-child(3){animation-delay:.66s}.login-feat:nth-child(4){animation-delay:.74s}.login-feat:nth-child(5){animation-delay:.82s}
.login-feat:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16);background:rgba(11,20,46,.7)}
/* Placements en ailes : UNIQUEMENT en layout large (les areas n'existent pas dans
   la grille empilée). + Échelle fluide en vh : à 900px de haut = valeurs nominales,
   compression progressive jusqu'à ~600px de haut SANS scroll (tout tient dans la page). */
@media (min-width:1000px){
    .login-feat.lf-aura{grid-area:fl1;align-self:end;justify-self:end}
    .login-feat.lf-pred{grid-area:fr1;align-self:end;justify-self:start}
    .login-feat.lf-br{grid-area:fl2;align-self:start;justify-self:end}
    .login-feat.lf-jeux{grid-area:fr2;align-self:start;justify-self:start}
    .login-feat.lf-shop{grid-area:under;max-width:none;margin-top:2px}
    .login-inner{padding:clamp(10px,3vh,40px) 48px;row-gap:clamp(6px,1.4vh,16px)}
    .login-brand-zone{margin-bottom:clamp(3px,1.2vh,14px)}
    .login-brand{gap:clamp(10px,1.8vh,18px)}
    .login-brand-logo{height:clamp(44px,8.6vh,84px)}
    .login-wordmark{font-size:clamp(1.8rem,5.4vh,3.3rem)}
    .login-brand-tag{margin-top:clamp(3px,.8vh,8px);font-size:clamp(.78rem,1.6vh,.98rem)}
    .login-pitch{margin-top:clamp(5px,1.2vh,16px);font-size:clamp(.8rem,1.6vh,1.02rem)}
    .login-live-chip{margin-top:clamp(6px,1.2vh,14px);padding:clamp(5px,.9vh,9px) 17px;font-size:clamp(.72rem,1.35vh,.86rem)}
    .login-card{padding:clamp(14px,3.2vh,36px) 34px clamp(10px,2.2vh,26px)}
    .login-card-over{font-size:clamp(.56rem,1.1vh,.68rem)}
    .login-card h2{margin-top:clamp(4px,.9vh,10px);font-size:clamp(1.05rem,2.4vh,1.5rem)}
    .login-card-sub{margin-top:clamp(3px,.7vh,7px);font-size:clamp(.74rem,1.4vh,.88rem)}
    .btn-twitch-login{margin-top:clamp(10px,2vh,24px);padding:clamp(9px,1.6vh,16px) 20px;font-size:clamp(.86rem,1.65vh,1rem)}
    .login-perks{margin-top:clamp(8px,1.6vh,20px);gap:clamp(5px,.9vh,10px)}
    .login-perk{font-size:clamp(.66rem,1.25vh,.8rem)}
    .login-sep{margin:clamp(8px,1.6vh,20px) 0 clamp(5px,1.1vh,13px)}
    .login-note{font-size:clamp(.7rem,1.3vh,.82rem)}
    .login-feat{padding:clamp(7px,1.3vh,14px) clamp(10px,1.6vh,16px)}
    .login-feat-ic{width:clamp(28px,3.9vh,40px);height:clamp(28px,3.9vh,40px)}
    .login-feat-ic img{height:clamp(18px,2.6vh,26px)}
    .login-feat-ic svg{width:clamp(15px,2vh,21px);height:clamp(15px,2vh,21px)}
    .login-feat-tt{font-size:clamp(.76rem,1.5vh,.93rem)}
    .login-feat-dd{font-size:clamp(.64rem,1.25vh,.79rem)}
}
/* Variante ailes étroites (1000-1149px, ex. laptop 1366 en scaling 125%) */
@media (min-width:1000px) and (max-width:1149px){
    .login-inner{grid-template-columns:minmax(0,1fr) minmax(360px,410px) minmax(0,1fr);column-gap:28px;padding-left:32px;padding-right:32px}
    .login-feat{max-width:300px}
    .login-card{padding-left:26px;padding-right:26px}
}
.login-feat-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.login-feat-ic img{height:26px;width:auto}
.login-feat-ic svg{width:21px;height:21px}
.login-feat-ic.fi-aura{background:rgba(249,115,22,.14)}
.login-feat-ic.fi-pred{background:rgba(59,130,246,.13);color:#60a5fa}
.login-feat-ic.fi-br{background:rgba(240,180,41,.13);color:#f0b429}
.login-feat-ic.fi-jeux{background:rgba(155,89,182,.15);color:#bb6bd9}
.login-feat-ic.fi-shop{background:rgba(231,76,60,.12)}
.login-feat-tt{font-family:var(--font-display);font-weight:700;font-size:.93rem;color:var(--text-primary)}
.login-feat-dd{font-size:.79rem;color:var(--text-secondary);margin-top:3px;line-height:1.4}
/* Carte connexion — au centre */
.login-side{grid-area:card;display:flex;align-items:center;justify-content:center}
.login-card{position:relative;z-index:10;width:100%;text-align:center;background:rgba(6,11,26,.8);border:1px solid rgba(255,255,255,.09);border-radius:26px;padding:36px 34px 26px;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:0 24px 90px rgba(0,0,0,.65),0 0 80px rgba(240,180,41,.05);animation:loginCardIn .8s .3s cubic-bezier(.16,1,.3,1) both}
@keyframes loginCardIn{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.login-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(150deg,rgba(240,180,41,.35),transparent 38%,transparent 62%,rgba(231,76,60,.3));z-index:-1;pointer-events:none;opacity:.55}
.login-card::after{content:'';position:absolute;top:0;left:26px;right:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#f0b429 28%,#ffd769 50%,#f0b429 72%,transparent);opacity:.8;box-shadow:0 0 20px rgba(240,180,41,.5)}
.login-card-over{font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.26em;color:#f0b429;animation:loginFadeUp .6s .45s both}
.login-card h2{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--text-primary);margin-top:10px;letter-spacing:-.01em;animation:loginFadeUp .6s .55s both}
.login-card-sub{font-size:.88rem;color:var(--text-secondary);margin-top:7px;line-height:1.5;animation:loginFadeUp .6s .65s both}
.btn-twitch-login{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;margin-top:24px;padding:16px 20px;background:linear-gradient(135deg,#6441a5,#9146ff);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-display);font-weight:700;font-size:1rem;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 6px 28px rgba(100,65,165,.4),inset 0 1px 0 rgba(255,255,255,.18);animation:loginFadeUp .6s .75s both;position:relative;overflow:hidden}
.btn-twitch-login:hover{transform:translateY(-3px);box-shadow:0 10px 40px rgba(145,70,255,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-twitch-login:active{transform:translateY(0)}
.btn-twitch-login::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transition:left .5s}
.btn-twitch-login:hover::after{left:100%}
.login-perks{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px;text-align:left;animation:loginFadeUp .6s .85s both}
.login-perk{display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:var(--text-secondary);line-height:1.45}
.login-perk svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}
.login-perk .pk-green{color:#34d399}.login-perk .pk-gold{color:#f0b429}.login-perk .pk-red{color:#e74c3c}
.login-sep{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);margin:20px 0 13px;animation:loginFadeIn .6s .95s both}
.login-note{color:var(--text-muted);font-size:.82rem;animation:loginFadeIn .6s .95s both}
@keyframes loginFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
/* Crédit — Aymen + popup réseaux */
.login-credit-wrap{position:relative;display:inline-block}
.login-credit{color:rgba(240,180,41,.75);text-decoration:none;font-weight:700;transition:color .2s,text-shadow .2s;cursor:pointer}
.login-credit:hover{color:#ffd769;text-shadow:0 0 12px rgba(240,180,41,.45)}
.login-social-popup{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;background:rgba(9,14,30,.94);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:160px;box-shadow:0 12px 48px rgba(0,0,0,.6),0 0 20px rgba(240,180,41,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:opacity .25s,transform .25s}
.login-credit-wrap:hover .login-social-popup,.login-credit-wrap.show .login-social-popup{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.login-social-popup::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:rgba(255,255,255,.08)}
.login-social-link{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.5);text-decoration:none;font-size:.82rem;font-weight:600;padding:9px 14px;border-radius:8px;transition:color .15s,background .15s}
.login-social-link:hover{background:rgba(255,255,255,.06)}
.login-social-link svg{width:18px;height:18px;flex-shrink:0;transition:color .15s;color:rgba(255,255,255,.35)}
.login-social-link span{flex:1}
.login-social-link.social-twitch:hover{color:#9146ff}
.login-social-link.social-twitch:hover svg{color:#9146ff}
.login-social-link.social-discord:hover{color:#5865f2}
.login-social-link.social-discord:hover svg{color:#5865f2}
.login-social-link.social-github:hover{color:#e6edf3}
.login-social-link.social-github:hover svg{color:#e6edf3}
/* Responsive login */
@media (max-width:999px){
    .login-inner{display:flex;flex-direction:column;gap:0;max-width:640px;padding:36px 24px 48px}
    .login-brand-zone{margin-bottom:0}
    .login-side{width:100%;max-width:480px;margin-top:20px}
    .login-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;width:100%}
    .login-feat{max-width:none;justify-self:stretch;align-self:stretch}
    .login-feat.lf-shop{grid-column:1/-1;margin-top:0}
}
@media (max-width:920px){
    .login-inner{padding:34px 20px 52px}
    .login-brand{flex-direction:column;text-align:center;gap:12px}
    .login-brand-logo{height:60px}
    .login-wordmark{font-size:2.3rem;justify-content:center}
    .login-brand-tag{margin-top:6px;font-size:.9rem}
    .login-pitch{font-size:.94rem}
    .login-live-chip{font-size:.8rem}
    .login-card{padding:32px 24px 24px}
    .login-feat{padding:12px 13px}
    .login-feat-dd{font-size:.75rem}
    .login-clips-wall{opacity:.16}
    .login-scrim{background:linear-gradient(180deg,rgba(4,7,15,.85) 0%,rgba(4,7,15,.5) 30%,rgba(4,7,15,.62) 70%,rgba(4,7,15,.85) 100%)}
}
@media (max-width:520px){
    .login-features{grid-template-columns:1fr}
    .login-feat.lf-shop{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
    .login-aurora i,.login-clips-col,.login-particle,.login-brand-logo,.login-rotator span,.login-live-chip.is-live .llc-dot{animation-play-state:paused!important}
    .login-rotator span:first-child{opacity:1;transform:none}
}
@keyframes rubisFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ============================================
   HEADER — direction D « editorial, zero chrome »
   (maquette : _header_redesign/preview.html#cD)

   Principe : ni bordure, ni flou. La nav est en petites capitales espacees
   avec un trait dore qui glisse sous l'onglet actif, et les soldes sont des
   chiffres nus. Le contenu ne passe jamais sous la barre (.main-content est
   fixed et commence a --header-h).

   Retours Aymen 05/08 (passe 2) :
   - le mot « GalereLand » et la taille d'origine du picto reviennent ;
   - le fond n'est plus totalement absent : un FONDU part du haut et s'eteint
     completement au bas de la barre — assez pour asseoir les boutons, assez
     peu pour garder l'impression que la barre flotte ;
   - Aura et Rubis grossissent ;
   - un anneau crante tourne autour de l'avatar (clic = compte / reglages).
   Un decor anime (nappes qui derivent + scene SVG par page au survol) a ete
   essaye puis ABANDONNE le meme jour a la demande d'Aymen : la barre reste
   sobre. Ne pas le reproposer.
   ============================================ */
.main-header{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding:0 26px;background:linear-gradient(180deg,var(--hd-fade-1) 0%,var(--hd-fade-2) 58%,transparent 100%);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none;transition:transform .2s ease}
.header-left,.header-right,.main-nav{position:relative;z-index:1}
.header-left{display:flex;align-items:center}
.logo-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-primary)}
.logo-rubis{flex-shrink:0}
.logo-link .logo-img{opacity:.95;transition:opacity .18s}
.logo-link:hover .logo-img{opacity:1}
/* Wordmark CSS (remplace Logo-Text.png) — variante Royal or+rubis. */
.logo-wordmark{display:inline-flex;font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1;white-space:nowrap;align-items:baseline}
.logo-wordmark .lw-g{background:linear-gradient(125deg,#ffd769,#f0b429 65%);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-wordmark .lw-l{color:var(--rubis-red)}
/* Etat du direct — pastille qui bat, masquee hors live (cf. _applyLive) */
.header-live{display:none;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ff7a6b;white-space:nowrap;-webkit-user-select:none;user-select:none}
.header-live.is-live{display:flex}
.header-live i{width:6px;height:6px;border-radius:50%;background:#ff4d4d;animation:hdrPulseDot 1.6s infinite}
@keyframes hdrPulseDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,77,77,.6)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(255,77,77,0)}}
/* Wallet Aura + Rubis — chiffres nus, plus de pastille */
.wallet{display:flex;align-items:center;gap:20px;background:none;border:none;border-radius:0;overflow:visible}
.wallet:hover{border-color:transparent;box-shadow:none}
.wallet-slot{display:flex;align-items:center;gap:6px;padding:0;height:auto;cursor:pointer;font-weight:700;font-size:13px;color:var(--hd-num);background:none;border:none;font-family:var(--font-body);font-variant-numeric:tabular-nums;transition:color .18s}
.wallet-slot:hover{color:var(--text-primary);background:none;box-shadow:none}
.wallet-slot+.wallet-slot{border-left:none}
.wallet-aura:hover,.wallet-rubis:hover{box-shadow:none}
.header-right .wallet,[data-theme="light"] .header-right .wallet{background:none;border-color:transparent}
/* Badge notif dans le menu avatar */
.dd-notif-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:700;align-items:center;justify-content:center}
/* Segment Thème (Paramètres) */
.theme-mode-seg{display:inline-flex;background:var(--bg-deep);border:1px solid var(--border);border-radius:999px;padding:3px}
.theme-mode-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:none;background:none;border-radius:999px;color:var(--text-secondary);font-family:var(--font-body);font-weight:600;font-size:.82rem;cursor:pointer;transition:background .15s,color .15s}
.theme-mode-btn .icon{width:14px;height:14px}
.theme-mode-btn.active{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-sm)}
.logo-text{font-family:var(--font-display);font-weight:700;font-size:1.15rem}
/* Nav D : petites capitales espacees, aucun fond, aucune pastille.
   L'onglet actif n'est signale QUE par sa couleur pleine + le trait dore. */
.main-nav{display:flex;gap:26px;position:relative}
.nav-link{position:relative;display:flex;align-items:center;padding:5px 0;border:none;border-radius:0;background:none;box-shadow:none;color:var(--hd-nav);font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:color .18s}
.nav-link:hover{color:var(--hd-nav-hover);background:none;box-shadow:none}
/* Zone de survol elargie et INVISIBLE (07/08/2026, demande d'Aymen : « il faut passer
   sa souris sur le texte et c'est trop petit »). Le libelle ne fait que 11px de haut,
   la cible etait donc minuscule.
   Pseudo-element en position:absolute -> il DEBORDE du bouton sans rien changer a la
   mise en page : .nav-link garde exactement les memes offsetLeft/offsetWidth, donc le
   trait dore (.nav-ink, positionne par _navInk) reste cale sous le libelle, et la
   hauteur de .main-nav ne bouge pas.
   -13px de chaque cote = la moitie du gap de 26px : les zones des onglets voisins sont
   jointives, sans recouvrement (pas de zone morte entre deux onglets, pas de vol de
   survol non plus). */
.nav-link::before{content:'';position:absolute;left:-13px;right:-13px;top:-14px;bottom:-14px}
/* Desktop : le gap de .main-nav est en vh (2.95vh), il grandit donc avec la hauteur
   d'ecran. Un debord fixe en px se recouvrirait sur un ecran court et laisserait une
   zone morte sur un ecran haut : on prend TOUJOURS la moitie du gap, les zones des
   onglets voisins restent exactement jointives partout. */
.main-header .nav-link::before{left:-1.475vh;right:-1.475vh;top:-2.2vh;bottom:-2.2vh}
@media(min-width:901px) and (max-width:1220px){.main-header .nav-link::before{left:-.85vh;right:-.85vh}}
.nav-link.active{color:var(--hd-nav-on);background:none;box-shadow:none}
/* Le picto de la page apparait au SURVOL de son onglet, dans sa couleur.
   Il est en position ABSOLUE dans l'ecart qui precede l'onglet : la nav ne
   bouge donc pas d'un pixel quand il entre ou sort — c'est ce qui rend le
   mouvement fluide plutot que sautillant.
   Desktop seulement, gratuitement : .nav-link est display:none sous 900 px,
   et le @media (hover:hover) ecarte les ecrans tactiles. */
.nav-link .icon-nav{display:none}
@media (hover:hover){
    /* Le picto part a DROITE de l'onglet, couche a 70 deg, et vient se poser EN FOND
       du libelle en se redressant et en grandissant (07/08/2026, demande d'Aymen).
       Le deplacement se fait sur `left` (100% -> 50%) plutot que sur un translateX en
       pixels : la distance a parcourir depend de la largeur de l'onglet, qui va de
       « Jeux » a « Battle Royal ». En pourcentage du conteneur, le picto atterrit
       toujours pile au centre, quel que soit le libelle.
       Le translateX du transform suit (0 -> -50%) pour recentrer le picto sur lui-meme. */
    .nav-link .icon-nav{
        display:block;position:absolute;left:100%;top:50%;z-index:0;
        width:max(15px,1.9vh);height:max(15px,1.9vh);margin-left:.55vh;
        color:var(--nav-c,var(--hd-nav-hover));opacity:0;pointer-events:none;
        transform:translateX(0) translateY(-50%) scale(.55) rotate(70deg);
        transition:opacity .2s ease-out,left .34s cubic-bezier(.22,.9,.28,1),
                   margin-left .34s cubic-bezier(.22,.9,.28,1),
                   transform .34s cubic-bezier(.22,.9,.28,1);
    }
    .nav-link:hover .icon-nav{
        left:50%;margin-left:0;opacity:.28;
        transform:translateX(-50%) translateY(-50%) scale(3.4) rotate(0deg);
    }
    /* Le libelle repasse devant : sans ca le picto agrandi lui roulerait dessus. */
    .nav-link > span{position:relative;z-index:1}
}
/* Une couleur par page — c'est ce qui fait vivre la barre au passage de la
   souris sans rien ajouter de permanent. */
.nav-link[data-page="live"]{--nav-c:#ff4d5e}
.nav-link[data-page="events"]{--nav-c:#a855f7}
.nav-link[data-page="objectifs"]{--nav-c:#3b82f6}
.nav-link[data-page="battle-royal"]{--nav-c:#f0b429}
.nav-link[data-page="jeux"]{--nav-c:#22d3ee}
.nav-link[data-page="boutique"]{--nav-c:#e74c3c}
.nav-link[data-page="gamemaster"]{--nav-c:#7dd3fc}
@media (prefers-reduced-motion:reduce){
    .nav-link .icon-nav{transition:opacity .17s ease-out}
    .nav-link:hover .icon-nav,.nav-link .icon-nav{transform:translateY(-50%)}
}
/* Le trait dore. Sa position/largeur est posee par _navInk() (app.js) :
   il suit l'onglet survole et revient sur l'actif au mouseleave. */
.nav-ink{position:absolute;left:0;bottom:-2px;width:0;height:1.5px;border-radius:2px;background:linear-gradient(90deg,#ffd769,#f0b429);box-shadow:0 0 10px rgba(240,180,41,.6);pointer-events:none;transition:left .3s cubic-bezier(.3,.9,.3,1),width .3s cubic-bezier(.3,.9,.3,1)}
.nav-ink.no-anim{transition:none}
/* Les deux seules animations de la barre : le glissement du trait et le
   battement de la pastille. On les coupe si le systeme demande du calme —
   le trait se pose alors d'un coup, la pastille reste allumee. */
@media (prefers-reduced-motion:reduce){.nav-ink{transition:none}.header-live i{animation:none}}
.header-right{display:flex;align-items:center;gap:20px}

/* Notification system */
.notif-btn{position:relative;width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;background:var(--bg-card);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s,transform .2s,box-shadow .2s}
.notif-btn:hover{background:var(--bg-card-hover);color:var(--accent);transform:scale(1.12);box-shadow:0 0 12px var(--accent-glow)}
.notif-btn:hover svg{animation:bellShake .4s ease-in-out}
@keyframes bellShake{0%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.notif-badge{position:absolute;top:-2px;right:-2px;background:#ef4444;color:#fff;font-size:.65rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notif-panel{position:fixed;top:var(--header-h);right:12px;width:380px;max-height:calc(100vh - var(--header-h) - 20px);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:500;overflow-y:auto;padding:0}
.notif-panel.hidden{display:none}
.notif-header{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:space-between}
.notif-section{padding:12px 16px;border-bottom:1px solid var(--border)}
.notif-section:last-child{border:none}
.notif-section-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px;font-weight:600}
/* ═══════════════════════════════════════════════════════════════════════
   Annonces & sondages — refonte 1.69
   Une seule carte (.notif-card) rendue à l'identique dans les trois
   contextes : panneau de la cloche, pop-up centré, bandeau haut de page.
   Le ton (.nt--*) pilote toute la colorimétrie via --nt / --nt-soft / --nt-line.
   Les classes .notif-ann / .notif-poll sont conservées : pwa.css s'en sert
   pour la cascade d'apparition du panneau.
   ═══════════════════════════════════════════════════════════════════════ */
.nt--info   {--nt:#3b82f6;--nt-soft:rgba(59,130,246,.14);--nt-line:rgba(59,130,246,.34)}
.nt--success{--nt:#34d399;--nt-soft:rgba(52,211,153,.14);--nt-line:rgba(52,211,153,.34)}
.nt--warn   {--nt:#fbbf24;--nt-soft:rgba(251,191,36,.14);--nt-line:rgba(251,191,36,.34)}
.nt--alert  {--nt:#f87171;--nt-soft:rgba(248,113,113,.15);--nt-line:rgba(248,113,113,.36)}
.nt--event  {--nt:#a78bfa;--nt-soft:rgba(167,139,250,.16);--nt-line:rgba(167,139,250,.38)}

.notif-card{position:relative;background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-md);padding:13px 14px 13px 17px;margin-bottom:10px;overflow:hidden;transition:border-color var(--transition),transform var(--transition)}
.notif-card:last-child{margin-bottom:0}
.notif-card:hover{border-color:var(--nt-line,var(--border-hover))}
/* Liseré vertical : la seule zone franchement colorée de la carte */
.notif-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--nt,var(--accent)),transparent 130%)}
.notif-card.is-unread{background:var(--bg-card);border-color:var(--nt-line,var(--border-hover))}

.notif-card-head{display:flex;align-items:flex-start;gap:10px}
.notif-card-icon{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:var(--nt-soft,var(--accent-glow));color:var(--nt,var(--accent));display:flex;align-items:center;justify-content:center}
.notif-card-icon svg{width:17px;height:17px;display:block}
.notif-card-heading{flex:1;min-width:0}
.notif-card-title{font-family:var(--font-display);font-size:.95rem;font-weight:700;line-height:1.3;margin:1px 0 0;color:var(--text-primary);word-break:break-word}
.notif-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:5px}
.notif-card-time{font-size:.72rem;color:var(--text-muted)}
.notif-card-close{flex-shrink:0;width:24px;height:24px;border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1.15rem;line-height:1;border-radius:6px;transition:color var(--transition),background var(--transition)}
.notif-card-close:hover{color:var(--text-primary);background:var(--bg-card-hover)}
.notif-card-body{font-size:.88rem;line-height:1.55;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;margin-top:9px}
.notif-card-head + .notif-card-body{margin-left:42px}

/* Pastilles d'état : ton, obligatoire, épinglé, compte à rebours */
.notif-chip{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:var(--nt-soft,var(--accent-glow));color:var(--nt,var(--accent));white-space:nowrap}
.notif-chip svg{width:11px;height:11px}
.notif-chip--muted{background:var(--bg-card-hover);color:var(--text-muted)}
.notif-chip--live{background:rgba(248,113,113,.14);color:var(--error)}
.notif-chip--count{font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}

/* Actions */
.notif-card-actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.notif-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 16px;border-radius:9px;font-family:inherit;font-size:.83rem;font-weight:700;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:transform var(--transition),filter var(--transition),background var(--transition),border-color var(--transition)}
.notif-act--main{background:var(--nt,var(--accent));color:#08111f;box-shadow:0 4px 14px -6px var(--nt,var(--accent))}
.notif-act--main:hover{filter:brightness(1.08);transform:translateY(-1px)}
.notif-act--ghost{background:transparent;color:var(--text-secondary);border-color:var(--border)}
.notif-act--ghost:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-card-hover)}
.notif-act:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.notif-act--main:focus-visible,.notif-act--ghost:focus-visible,.notif-opt:focus-visible{outline:2px solid var(--nt,var(--accent));outline-offset:2px}

/* ── Sondage ─────────────────────────────────────────────────────────── */
.notif-poll-desc{font-size:.82rem;line-height:1.5;color:var(--text-muted);margin:8px 0 0 42px;white-space:pre-wrap}
.notif-poll-opts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.notif-opt{position:relative;display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;cursor:pointer;font-family:inherit;font-size:.86rem;text-align:left;color:var(--text-primary);overflow:hidden;transition:border-color var(--transition),background var(--transition)}
.notif-opt:hover{border-color:var(--nt-line,var(--border-hover));background:var(--bg-card-hover)}
.notif-opt.is-selected{border-color:var(--nt,var(--accent));background:var(--nt-soft,var(--accent-glow))}
.notif-opt.is-mine{border-color:var(--nt,var(--accent))}
.notif-opt[disabled]{cursor:default}
.notif-opt[disabled]:hover{background:var(--bg-card);border-color:var(--border)}
.notif-opt.is-mine[disabled]:hover{border-color:var(--nt,var(--accent))}
/* La barre de résultat EST le fond de l'option (pas une barre séparée) */
.notif-opt-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--nt-soft,var(--accent-glow));border-right:1px solid var(--nt-line,transparent);transition:width .55s cubic-bezier(.22,1,.36,1)}
.notif-opt.is-lead .notif-opt-fill{background:var(--nt-soft,var(--accent-glow));filter:brightness(1.35)}
.notif-opt > *:not(.notif-opt-fill){position:relative;z-index:1}
.notif-opt-mark{flex-shrink:0;width:17px;height:17px;border:2px solid var(--border-hover);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color var(--transition),background var(--transition)}
.notif-opt-mark--box{border-radius:5px}
.notif-opt-mark svg{width:10px;height:10px;opacity:0;transform:scale(.6);transition:opacity var(--transition),transform var(--transition)}
.notif-opt.is-selected .notif-opt-mark,.notif-opt.is-mine .notif-opt-mark{border-color:var(--nt,var(--accent));background:var(--nt,var(--accent));color:#08111f}
.notif-opt.is-selected .notif-opt-mark svg,.notif-opt.is-mine .notif-opt-mark svg{opacity:1;transform:scale(1)}
.notif-opt-emoji{flex-shrink:0;font-size:1rem;line-height:1}
.notif-opt-label{flex:1;min-width:0;line-height:1.35;word-break:break-word}
.notif-opt-pct{flex-shrink:0;font-size:.8rem;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.notif-opt-votes{flex-shrink:0;font-size:.72rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.notif-poll-custom{width:100%;padding:9px 12px;margin-top:7px;background:var(--bg-input);border:1px solid var(--border);border-radius:9px;color:var(--text-primary);font-size:.85rem;font-family:inherit;transition:border-color var(--transition)}
.notif-poll-custom:focus{outline:none;border-color:var(--nt,var(--accent))}
.notif-poll-custom--inline{margin:-2px 0 2px 26px;width:calc(100% - 26px)}
.notif-poll-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.notif-poll-stat{display:flex;align-items:center;gap:7px;font-size:.75rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.notif-poll-hint{font-size:.75rem;color:var(--text-muted);margin-top:8px}
.notif-poll-mine{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 11px;background:var(--nt-soft,var(--accent-glow));border-radius:9px;font-size:.8rem;color:var(--text-secondary)}
.notif-poll-mine b{color:var(--text-primary);font-weight:700}
.notif-poll-mine svg{flex-shrink:0;width:15px;height:15px;color:var(--nt,var(--accent))}
.notif-poll-stat svg{flex-shrink:0;width:13px;height:13px}

/* ── Message admin (même carte, ton neutre) ──────────────────────────── */
.notif-admin-msg{background:var(--bg-deep);padding:12px;border-radius:var(--radius-sm);border-left:3px solid var(--accent)}
.notif-admin-msg p{margin-bottom:10px;font-size:.9rem;line-height:1.5;white-space:pre-wrap}

/* ── Pop-up centré ───────────────────────────────────────────────────── */
.notif-ov{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,6,18,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:notifOvIn .22s ease}
.notif-ov-box{width:100%;max-width:460px;max-height:calc(100vh - 40px);overflow-y:auto;background:var(--bg-secondary);border:1px solid var(--border-hover);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:6px;animation:notifBoxIn .3s cubic-bezier(.22,1,.36,1)}
.notif-ov-box .notif-card{background:transparent;border:none;margin:0;padding:14px 14px 14px 18px}
.notif-ov-box .notif-card:hover{border-color:transparent}
@keyframes notifOvIn{from{opacity:0}to{opacity:1}}
@keyframes notifBoxIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.notif-ov,.notif-ov-box{animation:none}.notif-opt-fill{transition:none}}

/* ── Bandeau haut de page ────────────────────────────────────────────── */
.notif-banners{position:fixed;top:var(--header-h);left:0;right:0;z-index:420;display:flex;flex-direction:column;gap:1px;pointer-events:none}
.notif-banner{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--bg-secondary);border-bottom:1px solid var(--nt-line,var(--border));box-shadow:var(--shadow-sm);animation:notifBannerIn .32s cubic-bezier(.22,1,.36,1)}
.notif-banner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--nt,var(--accent))}
.notif-banner{position:relative}
.notif-banner-icon{flex-shrink:0;color:var(--nt,var(--accent));display:flex}
.notif-banner-icon svg{width:16px;height:16px}
.notif-banner-text{flex:1;min-width:0;font-size:.84rem;line-height:1.35;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-banner-text b{font-weight:700}
.notif-banner .notif-act{height:28px;padding:0 12px;font-size:.78rem}
@keyframes notifBannerIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.notif-banner{animation:none}}

/* ── Ajustements du panneau de la cloche ─────────────────────────────── */
/* --bg-card est translucide (0.7) : sur la page live, le chat Twitch se lisait
   à travers le panneau. Fond opaque + flou de repli, et on descend sous le
   bandeau quand il y en a un (hauteur mesurée en JS dans --nt-banner-h). */
.notif-panel{width:400px;background:var(--bg-secondary);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);top:calc(var(--header-h) + var(--nt-banner-h,0px))}
.notif-section{padding:12px 14px}
.notif-section-title{display:flex;align-items:center;gap:7px}
.notif-section-count{margin-left:auto;font-size:.7rem;font-weight:700;color:var(--text-muted);background:var(--bg-deep);border-radius:999px;padding:1px 7px}
.notif-empty{padding:34px 20px;text-align:center;color:var(--text-muted);font-size:.86rem;line-height:1.6}
.notif-empty svg{width:30px;height:30px;opacity:.35;margin-bottom:10px;display:block;margin-left:auto;margin-right:auto}
@media(max-width:500px){.notif-panel{width:auto}.notif-card-head + .notif-card-body,.notif-poll-desc{margin-left:0}.notif-ov-box{max-width:none}}
@media(max-width:500px){.notif-panel{left:8px;right:8px;width:auto}}
.theme-toggle{position:relative;width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;background:var(--bg-card);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s,transform .25s,box-shadow .25s}
.theme-toggle:hover{background:var(--bg-card-hover);color:var(--accent);transform:rotate(25deg) scale(1.12);box-shadow:0 0 14px var(--accent-glow)}
[data-theme="dark"] .theme-icon-moon{display:none}
[data-theme="light"] .theme-icon-sun{display:none}
[data-theme="light"] .header-right .notif-btn,[data-theme="light"] .header-right .theme-toggle{background:rgba(0,0,0,.05)}
[data-theme="light"] .header-right .notif-btn:hover,[data-theme="light"] .header-right .theme-toggle:hover{background:rgba(0,0,0,.1)}
[data-theme="light"] .header-right .rubis-display{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.rubis-display{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border);cursor:pointer;font-weight:600;font-size:.9rem;color:var(--text-primary);transition:border-color .12s,box-shadow .12s,transform .12s;font-family:var(--font-body)}
.rubis-display:hover{border-color:var(--rubis-red);box-shadow:0 0 16px rgba(231,76,60,.2);transform:translateY(-1px)}
/* D : l'avatar seul ouvre le menu (le pseudo et le chevron sortent de la
   barre — le pseudo reste en tete du menu deroulant).
   Autour de lui, un anneau crante tourne lentement : c'est le signal « clic =
   compte / reglages ». Au survol il s'allume en or et accelere. */
.user-menu{position:relative;display:flex;align-items:center}
.user-btn{display:flex;align-items:center;gap:0;padding:0;border-radius:50%;border:none;background:none;cursor:pointer;color:var(--text-primary);font-family:var(--font-body)}
.user-btn:hover{background:none}
/* CENTRAGE DE L'ANNEAU.
   Les cotes sont en vh (cf. bloc « HEADER — cotes ... EN VH »), donc fractionnaires :
   on ne peut plus compter sur une parite de pixels. L'avatar est donc centre par le
   MEME mecanisme que l'anneau — absolu + translate(-50%,-50%) sur la meme boite —
   et non par le flux flex : les deux partagent exactement le meme calcul de centre.
   Regle a garder : il faut du JEU entre le fond de dent et le bord de la photo. Le
   rayon de fond vaut 24.6/64 de la boite ; a 5vh de boite pour 3.18vh d'avatar il
   reste 0.32vh (3 px en 1080p, 6.5 px en 4K). En dessous de ~2 px la moindre
   imprecision saute aux yeux — et a 36/28 px l'anneau mordait meme sur la photo. */
.user-cog{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto}
.user-cog .user-avatar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:none;box-shadow:0 0 0 0 rgba(255,255,255,0);transition:box-shadow .18s}
.user-btn:hover .user-avatar{border-color:transparent;box-shadow:0 0 0 2px rgba(240,180,41,.35)}
[data-theme="light"] .user-btn:hover .user-avatar{box-shadow:0 0 0 2px rgba(240,180,41,.5)}
.user-name{display:none;font-weight:500;font-size:.88rem}
.user-chevron{display:none;transition:transform var(--transition)}
.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px;min-width:220px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s;-webkit-backdrop-filter:blur(20px)}
.user-dropdown.show{opacity:1;backdrop-filter:blur(20px)}
.user-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-user-header{display:flex;align-items:center;gap:10px;padding:10px 12px 8px}
.dropdown-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.dropdown-user-info{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.dropdown-display-name{font-size:.88rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-username{font-size:.74rem;color:var(--text-muted)}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.dropdown-link{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);font-size:.88rem;color:var(--text-secondary);cursor:pointer;border:none;background:none;width:100%;font-family:var(--font-body);text-align:left;transition:color .1s,background .1s;text-decoration:none}
.dropdown-link:hover{background:var(--bg-card-hover);color:var(--text-primary)}
.logout-link:hover{color:var(--error)}

/* ============================================
   MOBILE NAV
   ============================================ */
/* D en mobile : meme parti pris que le header — pas de fond, juste un flou et
   un filet d'un pixel. L'onglet actif passe en blanc plein (plus de bleu). */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;height:calc(58px + env(safe-area-inset-bottom));background:transparent;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--hd-rule);padding:0 0 env(safe-area-inset-bottom);justify-content:stretch;transition:transform .2s ease}
/* La maquette pose 8 px, mais elle ne montre que 5 onglets — la barre reelle en
   porte 7. clamp() garde les 8 px des qu'il y a la place (>= 421 px de large) et
   descend juste ce qu'il faut en dessous : « OBJECTIFS » ne se fait couper sur
   aucune largeur de 320 a 900 px (mesure faite onglet par onglet). */
.mobile-nav-link{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px;border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:clamp(6px,1.9vw,8px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-body);border-radius:0;transition:color .2s}
.mobile-nav-link.active{color:var(--hd-nav-on)}
.mobile-nav-link .icon-nav{width:17px;height:17px}
.mobile-nav-link span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================
   MAIN CONTENT & PAGE SLIDER
   ============================================ */
.main-content{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
.page-slider{min-height:100%;height:100%;position:relative}
.page-panel{min-height:100%;padding:24px 24px 40px;max-width:1200px;margin:0 auto}
.no-animations *{transition-duration:0s !important;animation-duration:0s !important}

.page-loading{display:flex;justify-content:center;align-items:center;min-height:300px}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.page-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.page-title{font-family:var(--font-display);font-size:1.6rem;font-weight:700;line-height:1.2}
.page-desc{color:var(--text-secondary);font-size:.9rem;margin-top:4px}

/* ============================================
   LIVE PAGE
   ============================================ */
.page-panel[data-page="live"]{padding:0;max-width:none;min-height:0;height:calc(100vh - var(--header-h));overflow:hidden;box-sizing:border-box}
.live-page{height:100%}
.live-container{display:grid;grid-template-columns:1fr 340px;gap:0;height:100%;overflow:hidden}
.live-player-wrap{display:flex;flex-direction:column;min-height:0;background:#000;overflow:hidden}
.live-player{position:relative;width:100%;flex:1;min-height:0;background:#000;border-radius:0;overflow:hidden}
.live-info-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 16px;background:var(--bg-card);border:1px solid var(--border);border-top:none;flex-shrink:0}
.live-badge{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.85rem}
.live-badge.live-on{color:#ef4444}
.live-channel{color:var(--text-secondary);font-size:.82rem;font-weight:500}

.live-chat-wrap{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-left:none;overflow:hidden;border-radius:0;min-height:0}
.chat-header{display:flex;align-items:center;gap:8px;padding:8px 16px;font-weight:600;font-size:.9rem;border-bottom:1px solid var(--border);flex-shrink:0}
.chat-slot{flex:1;min-height:0;position:relative;overflow:hidden}

.chat-box{position:fixed;z-index:93;overflow:hidden}
.chat-box[data-mode="live"]{}
.chat-box[data-mode="hidden"]{position:fixed !important;bottom:0 !important;right:0 !important;left:auto !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden;pointer-events:none;opacity:0.01;z-index:-1}

.live-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);flex-shrink:0}
.live-dot-on{background:#ef4444;animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}

/* ============================================
   PERSISTENT STREAM BOX
   ============================================ */
.stream-box{position:fixed;z-index:95;display:flex;flex-direction:column;overflow:hidden;border-radius:0;background:#000;transition:box-shadow .3s}

.stream-box[data-mode="live"]{border-radius:0;box-shadow:none;border:none}
.stream-box[data-mode="live"] .stream-bar{display:none}
.stream-box[data-mode="live"] .rh{display:none}
.stream-box[data-mode="live"] .stream-audio-overlay{display:none}

.stream-box[data-mode="mini"]{bottom:16px;right:16px;width:320px;height:220px;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-lg),var(--glow-purple)}
.stream-box[data-mode="mini"] .stream-bar{display:flex}
.stream-box[data-mode="mini"] .rh{display:block}
.stream-box[data-mode="mini"] .stream-audio-overlay{display:none}

.stream-box[data-mode="audio"]{bottom:16px;right:16px;width:220px;height:auto;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.stream-box[data-mode="audio"] .stream-bar{display:flex}
/* Sprint live-ux : height:0 donnait une surface NULLE a Twitch, qui met en pause
   dans ce cas — le mode "audio seulement" coupait donc precisement le son qu'il
   est cense preserver. On sort le cadre du champ a taille reelle, comme le mode
   hidden : la lecture continue, rien ne s'affiche. */
.stream-box[data-mode="audio"] .stream-frame{position:absolute;left:-10000px;top:0;width:320px;height:180px;opacity:0;overflow:hidden;pointer-events:none}
.stream-box[data-mode="audio"] .rh{display:none}
.stream-box[data-mode="audio"] .stream-audio-overlay{display:flex;position:relative;padding:16px;gap:8px;color:var(--text-muted);font-size:.85rem;flex-direction:column;align-items:center}

/* Sprint live-ux : le player etait replie en 1x1 px. Twitch MET EN PAUSE quand
   sa surface devient minuscule — c'etait la cause du "le live se coupe quand je
   change de page". On le sort du champ a taille reelle : la lecture continue,
   le son aussi, et rien ne s'affiche. La vraie mise en pause reste le bouton
   Fermer, qui appelle explicitement player.pause(). */
.stream-box[data-mode="hidden"]{position:fixed !important;top:0 !important;left:-10000px !important;right:auto !important;bottom:auto !important;width:320px !important;height:180px !important;overflow:hidden;pointer-events:none;z-index:-1}
.stream-box[data-mode="hidden"] .stream-bar{display:none}
.stream-box[data-mode="hidden"] .rh{display:none}

.stream-bar{display:none;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);cursor:grab;flex-shrink:0;background:var(--bg-card)}
.stream-bar:active{cursor:grabbing}
.stream-bar-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.82rem}
.stream-bar-channel{color:var(--text-secondary);font-weight:500}
.stream-bar-btns{display:flex;gap:4px}
.sbtn{width:28px;height:28px;border:none;border-radius:50%;background:var(--bg-input);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .1s,background .1s}
.sbtn:hover{background:var(--bg-card-hover);color:var(--text-primary)}

.stream-box:not(.muted) .mini-icon-mute{display:none}
.stream-box.muted .mini-icon-vol{display:none}
.stream-box[data-mode="audio"] #btnAudio{background:var(--accent-glow);color:var(--accent)}
.stream-frame{flex:1;background:#000;min-height:0;position:relative}
#twitchEmbedTarget{width:100%;height:100%}
#twitchEmbedTarget iframe{width:100%!important;height:100%!important}
.stream-frame iframe{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;border:none}

/* Offline overlay */
.offline-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;background:#000;display:flex;align-items:center;justify-content:center}
.offline-overlay.hidden{display:none}
.offline-img{width:100%;height:100%;object-fit:cover}

/* --- Custom Twitch Chat --- */
.custom-chat{display:flex;flex-direction:column;height:100%;background:var(--bg-card);position:relative}
.cc-messages{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain}
.cc-msg{font-size:.82rem;line-height:1.5;word-wrap:break-word;padding:4px 8px;border-radius:4px;transition:background .1s;position:relative;-webkit-user-select:text;user-select:text}
.cc-msg:hover{background:var(--bg-input)}
.cc-msg-row{display:inline}
/* Mention highlight */
.cc-msg.cc-mention{background:rgba(230,126,34,0.12);border-left:3px solid #e67e22;padding-left:6px}
[data-theme="light"] .cc-msg.cc-mention{background:rgba(230,126,34,0.1)}
/* Reply context */
.cc-reply-ctx{font-size:.72rem;color:var(--text-muted);margin-bottom:2px;padding-left:4px;border-left:2px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:background .15s;border-radius:2px}
.cc-reply-ctx:hover{background:var(--bg-input);color:var(--text-secondary)}
.cc-reply-arrow{color:var(--text-muted);margin-right:2px}
/* Real badge images */
.cc-badge-img{width:18px;height:18px;vertical-align:middle;margin-right:2px;border-radius:2px}
/* Legacy emoji badges (fallback) */
.cc-badge{display:inline-flex;font-size:.65rem;margin-right:2px;vertical-align:middle}
.cc-name{font-weight:700;font-size:.82rem;margin-right:4px}
.cc-name::after{content:': '}
/* Point 3 : heure discrete devant les badges */
.cc-time{display:inline;color:var(--text-muted);font-size:.66rem;opacity:.55;margin-right:5px;font-variant-numeric:tabular-nums;vertical-align:middle;white-space:nowrap}
.cc-text{color:var(--text-primary);word-break:break-word}
.cc-emote{display:inline-block;height:1.8em;vertical-align:middle;margin:0 1px}
/* Reply button (appears on hover) */
.cc-reply-btn{display:none;position:absolute;right:6px;top:2px;width:20px;height:20px;border:none;border-radius:4px;background:var(--bg-card-hover);color:var(--text-muted);cursor:pointer;font-size:.75rem;line-height:1;transition:background .1s,color .1s;padding:0}
.cc-msg:hover .cc-reply-btn{display:flex;align-items:center;justify-content:center}
.cc-reply-btn:hover{background:var(--accent);color:#fff}
/* Reply bar */
.cc-reply-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg-input);border-top:1px solid var(--border);font-size:.78rem;color:var(--text-secondary);gap:8px}
.cc-reply-bar.hidden{display:none}
.cc-reply-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-reply-close{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1.1rem;padding:0 4px;line-height:1}
.cc-reply-close:hover{color:var(--text-primary)}
/* Load more */
.cc-load-more{text-align:center;padding:6px;border-bottom:1px solid var(--border);flex-shrink:0}
.cc-load-more.hidden{display:none}
.cc-load-btn{border:none;background:none;color:var(--accent);cursor:pointer;font-size:.78rem;font-weight:600;font-family:var(--font-body);padding:4px 12px;border-radius:var(--radius-sm);transition:background .1s}
.cc-load-btn:hover{background:var(--bg-input)}
/* Input */
.cc-input-wrap{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--border);flex-shrink:0}
.cc-input{flex:1;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.85rem;font-family:var(--font-body);outline:none;transition:border-color .15s;min-height:22px;max-height:80px;overflow-y:auto;word-break:break-word;-webkit-user-select:text;user-select:text;white-space:pre-wrap;line-height:1.4}
.cc-input:focus{border-color:var(--accent)}
.cc-input:empty::before{content:attr(data-placeholder);color:var(--text-muted);pointer-events:none}
.cc-input img.cc-emote{height:1.4em;vertical-align:middle;margin:0 1px;display:inline}
.cc-send{width:36px;height:36px;border:none;border-radius:var(--radius-sm);background:var(--gradient-rubis);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .12s}
.cc-send:hover{transform:scale(1.05)}

.cc-emote-btn{width:36px;height:36px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s;padding:0}
.cc-emote-btn:hover{color:var(--accent);background:var(--bg-input)}
/* Channel Points button */
.cc-cp-btn{width:36px;height:36px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s;padding:0}
.cc-cp-btn:hover{color:#a78bfa;background:var(--bg-input)}

.cc-emote-picker{position:fixed;height:280px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;flex-direction:column;z-index:200;box-shadow:var(--shadow-lg);animation:epSlideUp .15s ease}
.cc-emote-picker.hidden{display:none}
@keyframes epSlideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.cc-ep-header{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--border)}
.cc-ep-search{flex:1;padding:5px 10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.8rem;font-family:var(--font-body);outline:none}
.cc-ep-search:focus{border-color:var(--accent)}
.cc-ep-close{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1.2rem;padding:0 4px;line-height:1}
.cc-ep-close:hover{color:var(--text-primary)}
.cc-ep-tabs{display:flex;gap:2px;padding:4px 8px;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;flex-shrink:0;scrollbar-width:none;-ms-overflow-style:none}
.cc-ep-tabs::-webkit-scrollbar{display:none}
.cc-ep-tab{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:.72rem;font-weight:600;font-family:var(--font-body);padding:3px 8px;border-radius:var(--radius-sm);transition:background .1s,color .1s;white-space:nowrap;flex-shrink:0}
.cc-ep-tab:hover{background:var(--bg-input);color:var(--text-primary)}
.cc-ep-tab.active{background:var(--accent);color:#fff}
.cc-ep-grid{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px;display:grid;grid-template-columns:repeat(auto-fill, minmax(36px, 1fr));gap:2px;align-content:start}
.cc-ep-emote{width:36px;height:36px;border:none;border-radius:4px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;transition:background .1s}
.cc-ep-emote:hover{background:var(--bg-input)}
.cc-ep-emote img{max-width:28px;max-height:28px;object-fit:contain}
.cc-ep-empty{grid-column:1/-1;text-align:center;color:var(--text-muted);font-size:.8rem;padding:20px 0}
.cc-ep-group-header{grid-column:1/-1;font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;padding:6px 2px 2px;border-bottom:1px solid var(--border);margin-bottom:2px;display:flex;align-items:center;justify-content:space-between}
.cc-ep-gm-link{font-size:.65rem;font-weight:600;color:var(--accent);text-decoration:none;text-transform:none;letter-spacing:0;padding:2px 8px;border:1px solid var(--accent);border-radius:var(--radius-sm);transition:background .15s,color .15s}
.cc-ep-gm-link:hover{background:var(--accent);color:#fff}

.cc-msg-highlight{animation:msgHighlight 1.5s ease}
@keyframes msgHighlight{0%{background:var(--accent-glow)}100%{background:transparent}}

.cc-system-msg{display:flex;align-items:flex-start;gap:6px;padding:6px 10px;font-size:.78rem;color:var(--text-muted);background:rgba(229,192,123,0.08);border-left:3px solid #e5c07b;border-radius:4px}
.cc-system-msg.cc-event-msg{background:var(--accent-glow);border-left-color:var(--accent);color:var(--text-secondary)}
.cc-system-icon{flex-shrink:0;font-size:.9rem;line-height:1.4}
.cc-system-text{line-height:1.4;word-break:break-word}
.cc-input-container{flex:1;position:relative;min-width:0}
.cc-input-container .cc-input{width:100%}
.cc-scroll-bottom{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);padding:4px 14px;border-radius:20px;background:var(--accent);color:#fff;border:none;font-size:.75rem;cursor:pointer;z-index:5;box-shadow:var(--shadow-md)}
.cc-scroll-bottom.hidden{display:none}
.cc-mention-list{position:absolute;bottom:100%;left:0;right:0;max-height:160px;overflow-y:auto;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);z-index:50}
.cc-mention-list.hidden{display:none}
.cc-mention-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:.82rem;transition:background .1s}
.cc-mention-item:hover,.cc-mention-item.active{background:var(--bg-card-hover)}
.spinner-sm{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto}
.cc-ep-error{color:var(--text-muted);font-size:.78rem;line-height:1.5;padding:20px 16px}
.theme-color-row{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0}
.theme-color-btn{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:transform .12s;padding:0;position:relative}
.theme-color-btn:hover{transform:scale(1.15)}
.theme-color-btn.active{border-color:#fff;box-shadow:0 0 10px currentColor}
.theme-color-btn.active::after{content:'\2713';position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.65rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,0.5)}

.stream-audio-overlay{display:none}
.rh{position:absolute;width:20px;height:20px;z-index:10;display:none;background:transparent;border:none;outline:none}
.rh-tl{top:0;left:0;cursor:nwse-resize}.rh-tr{top:0;right:0;cursor:nesw-resize}
.rh-bl{bottom:0;left:0;cursor:nesw-resize}.rh-br{bottom:0;right:0;cursor:nwse-resize}

.mini-restore-btn{position:fixed;z-index:89;bottom:80px;right:20px;display:flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);box-shadow:var(--shadow-md);color:var(--text-secondary);font-family:var(--font-display);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .25s;opacity:0;transform:translateY(10px)}
.mini-restore-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}
.mini-restore-btn.hidden{display:none}
.mini-restore-btn.show{opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}

/* ============================================
   EVENTS / CARDS GRID
   ============================================ */
.events-tabs{display:flex;gap:6px;margin-bottom:20px}
.events-tab{display:flex;align-items:center;gap:6px;padding:9px 20px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-weight:600;font-size:.9rem;cursor:pointer;transition:color .12s,border-color .12s,background .12s,box-shadow .12s}
.events-tab:hover{border-color:var(--border-hover);color:var(--text-primary);transform:translateY(-1px)}
.events-tab.active{background:var(--gradient-rubis);border-color:transparent;color:#fff;box-shadow:0 4px 20px var(--accent-glow)}
.events-tab-content.hidden{display:none}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.event-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:14px;transition:transform .15s,border-color .15s,box-shadow .15s;overflow:hidden}
.event-banner{margin:-20px -20px 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;max-height:140px}
.event-banner img{width:100%;height:100%;object-fit:cover;display:block}
.event-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md),var(--glow-purple);transform:translateY(-3px)}
.event-icon-wrap{width:48px;height:48px;border-radius:var(--radius-md);background:var(--accent-glow);display:flex;align-items:center;justify-content:center;transition:background .15s,box-shadow .15s}
.event-card:hover .event-icon-wrap{background:var(--accent-glow);box-shadow:0 0 16px var(--accent-glow)}
.event-icon-svg{color:var(--accent)}
.event-info{flex:1}
.event-title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:4px}
.event-desc{font-size:.78rem;color:var(--text-muted);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.event-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.4}
.event-action{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--border)}
.event-cost{display:flex;align-items:center;gap:6px;font-weight:700;font-size:1.05rem;color:var(--rubis-red)}
.event-input{margin-top:8px}
.event-input label{display:block;font-size:.78rem;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.event-input input,.event-input textarea,.event-input select{width:100%;padding:8px 10px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius-sm);font-size:.84rem;font-family:inherit}
.event-input input:focus,.event-input textarea:focus,.event-input select:focus{outline:none;border-color:var(--accent)}
.event-input textarea{height:60px;resize:vertical}
.event-card-commun{position:relative}
.event-reached{border-color:var(--success);box-shadow:0 0 20px rgba(52,211,153,0.12)}
.reached-banner{display:flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(16,185,129,.15);color:var(--success);border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;width:fit-content;position:absolute;top:12px;left:12px;z-index:3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.event-commun-header{display:flex;gap:14px;align-items:flex-start}
.progress-section{margin-top:4px}
.progress-bar-wrap{height:10px;background:var(--bg-input);border-radius:5px;overflow:hidden}
.progress-bar{height:100%;background:var(--gradient-rubis);border-radius:5px;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px var(--accent-glow)}
.progress-complete{background:linear-gradient(135deg,var(--success),#10b981);box-shadow:0 0 12px rgba(52,211,153,.3)}
.progress-info{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem}
.progress-current{display:flex;align-items:center;gap:4px;font-weight:600}
.progress-goal{color:var(--text-muted)}
.progress-pct{margin-left:auto;font-weight:600;color:var(--accent)}
.progress-meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:.8rem;color:var(--text-muted);flex-wrap:wrap}
.user-contrib{display:inline-flex;align-items:center;gap:3px;color:var(--accent)}
.top-contributors{background:var(--bg-input);border-radius:var(--radius-md);padding:12px;margin-top:4px}
.top-title{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.85rem;margin-bottom:8px}
.top-empty{color:var(--text-muted);font-size:.82rem}
.top-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.85rem}
.top-avatar{width:22px;height:22px;border-radius:50%}
.top-name{flex:1;font-weight:500}
.top-amount{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--rubis-red)}
.event-contribute{padding-top:12px;border-top:1px solid var(--border)}
.contribute-input-group{display:flex;align-items:center;gap:8px}
.contribute-input{flex:1;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.9rem;font-family:var(--font-body);outline:none;transition:border-color .15s,box-shadow .15s}
.contribute-input:focus{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.contribute-presets{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}.event-card-commun[data-event-currency="aura"] .contribute-presets{display:grid;grid-template-columns:repeat(3,1fr)}
.preset-btn{padding:5px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:.82rem;font-weight:500;cursor:pointer;transition:color .12s,border-color .12s,box-shadow .12s,transform .12s;font-family:var(--font-body)}
.preset-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px var(--accent-glow);transform:translateY(-1px)}
.preset-all{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}

/* ============================================
/* === Aura Exchange Card === */

/* ============================================
   HISTORY PANEL (shared boutique + wheel style)
   ============================================ */
.history-panel{position:fixed;top:var(--header-h);right:0;width:340px;height:calc(100vh - var(--header-h));background:var(--bg-card);border-left:1px solid var(--border);z-index:100;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:slideInRight .25s ease}
.history-panel.hidden{display:none}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.hp-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}
.hp-header h3{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:.95rem;margin:0}
.hp-close{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:1.2rem;padding:4px 8px;border-radius:var(--radius-sm);transition:color .1s,background .1s}
.hp-close:hover{color:var(--error);background:var(--error-bg)}
.hp-list{flex:1;overflow-y:auto;padding:8px}
.hp-empty{text-align:center;color:var(--text-muted);padding:24px;font-size:.85rem}
.hp-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-sm);transition:background .1s}
.hp-item:hover{background:var(--bg-input)}
.hp-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hp-icon-solo{background:rgba(251,191,36,0.12);color:#fbbf24}
.hp-icon-commun{background:rgba(52,211,153,0.12);color:#34d399}
.hp-icon-roue{background:var(--accent-glow);color:var(--accent)}
.hp-info{display:flex;flex-direction:column;flex:1;min-width:0}
.hp-title{font-weight:600;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-type{color:var(--text-muted);font-size:.72rem}
.hp-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.hp-amount{display:flex;align-items:center;gap:3px;font-weight:600;font-size:.8rem;color:var(--error)}
.hp-time{color:var(--text-muted);font-size:.7rem}

/* WHEEL / ROUE — MOVED to pages/roue/style.css (sprint 1.15) */

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--text-muted)}
.empty-state .icon-xl{width:64px;height:64px;margin-bottom:16px;opacity:.4}

/* ============================================
   TOAST
   ============================================ */
.toast-container{position:fixed;top:72px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-md);font-size:.88rem;transform:translateX(120%);transition:all .3s ease;max-width:360px}
.toast-show{transform:translateX(0)}
.toast-hide{transform:translateX(120%);opacity:0}
.toast-success .toast-icon{color:var(--success)}
.toast-error .toast-icon{color:var(--error)}
.toast-warning .toast-icon{color:var(--warning)}
.toast-info .toast-icon{color:var(--accent)}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:var(--overlay);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:opacity .2s,visibility 0s linear 0s}
/* 09/08/2026 — une modale fermee restait CLIQUABLE : `pointer-events:none`
   est herite, mais un enfant qui le rouvre (l'apercu GM des objectifs le
   fait sur sa banniere, pour le recadrage) redevenait une cible. Resultat :
   un clic fantome en haut a droite de l'ecran ouvrait le recadrage de la
   derniere modale ouverte. `visibility:hidden` sort tout le sous-arbre du
   hit-test ET du focus clavier ; le !important ferme la porte au reste. */
.modal-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s linear .2s}
.modal-overlay.hidden *{pointer-events:none!important}
.modal-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px;max-width:440px;width:90%;box-shadow:var(--shadow-lg),var(--glow-purple)}
.modal-card:has(.contrib-modal){max-width:520px;width:95%;max-height:85vh;overflow-y:auto}
.modal-card:has(#stripeCheckoutWrap){max-width:520px;max-height:90vh;overflow-y:auto}
/* Modal max-width = min(800, viewport-w-margin, viewport-h-réservé * 16/9) ←
   garantit que la stage 16:9 + le chrome modale tient sans scroll vertical. */
.modal-card:has(#mepStage){max-width:min(800px,calc(100vw - 32px),calc((100vh - 180px) * 16 / 9));width:100%;max-height:95vh;overflow-y:auto;padding:14px}
@media (max-width:600px){.modal-card:has(#mepStage){padding:10px;max-width:calc(100vw - 12px)}}
.mep-r:hover{background:rgba(59,130,246,.35) !important}
.mep-r-nw:hover,.mep-r-ne:hover,.mep-r-sw:hover,.mep-r-se:hover{transform:scale(1.2);background:#60a5fa !important}
/* Sprint event7 : backdrop-filter de la modal-overlay = laggy desktop (Chrome
   re-blur l'écran entier sur chaque mouvement). On le désactive pendant que
   le positionneur est affiché → drag fluide à 60fps. */
.modal-overlay:has(#mepStage){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,12,28,.85)}
#mepMedia{will-change:left,top,width,height;transform:translateZ(0)}
/* File upload box hover (zone "Clique pour choisir un fichier") */
.me-upload-box{border:1.5px dashed var(--border);border-radius:10px;padding:24px;text-align:center;cursor:pointer;background:rgba(255,255,255,.02);transition:border-color .15s,background .15s,transform .1s}
.me-upload-box:hover{border-color:#3b82f6;background:rgba(59,130,246,.08)}
.me-upload-box:active{transform:scale(.98)}
.modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;border-radius:50%;background:var(--bg-input);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .1s,background .1s}
.modal-close:hover{background:var(--error-bg);color:var(--error)}
.modal-body h3{font-family:var(--font-display);font-size:1.2rem;margin-bottom:12px}
.modal-body p{color:var(--text-secondary);margin-bottom:8px;line-height:1.5}
.modal-note{font-size:.82rem;color:var(--text-muted)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* ============================================
   EVENT 12 — DESSINER SUR LE STREAM (modale canvas)
   ============================================ */
/* Modale large : la stage 16:9 + toolbar + footer tiennent SANS scroll. Le 3e
   terme du min() borne la largeur pour que la hauteur totale (stage 16:9 + ~250px
   de chrome) tienne dans la fenêtre → pas de scrollbar. */
.modal-card:has(#dreStage){max-width:min(920px,calc(100vw - 24px),calc((100vh - 250px) * 16 / 9));width:100%;max-height:96vh;overflow:hidden;padding:18px}
/* Pas de croix : la modale se ferme via "Annuler" / clic backdrop / Échap.
   On masque le bouton de fermeture générique de .modal-card pour cet event. */
.modal-card:has(#dreStage) .modal-close{display:none}
/* backdrop-filter = laggy pendant le dessin (Chrome re-blur tout l'écran). */
.modal-overlay:has(#dreStage){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,12,28,.9)}

.dre-root{display:flex;flex-direction:column;gap:14px}
.dre-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dre-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary)}
.dre-close{width:34px;height:34px;flex-shrink:0;border:none;border-radius:50%;background:var(--bg-input);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .12s,background .12s}
.dre-close:hover{background:var(--error-bg);color:var(--error)}

.dre-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0a0a18;border:1px solid var(--border);touch-action:none;user-select:none;-webkit-user-select:none}
.dre-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;-webkit-user-drag:none;pointer-events:none}
.dre-bg-empty{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.85rem}
.dre-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:1}

.dre-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between}
.dre-colors{display:flex;flex-wrap:wrap;gap:7px}
.dre-swatch{width:27px;height:27px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:var(--sw);padding:0;cursor:pointer;position:relative;transition:transform .1s,border-color .1s,box-shadow .1s}
.dre-swatch:hover{transform:scale(1.14)}
.dre-swatch.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}
.dre-swatch-custom{background:conic-gradient(from 0deg,#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#0a84ff,#5e5ce6,#bf5af2,#ff3b30);overflow:hidden;display:flex;align-items:center;justify-content:center}
.dre-swatch-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}

.dre-tools{display:flex;align-items:center;gap:8px}
.dre-size{display:flex;align-items:center;gap:10px;min-width:170px}
.dre-size-slot{width:54px;height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dre-size-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.25);transition:width .08s,height .08s,background .08s}
.dre-tool-btn{width:38px;height:38px;flex-shrink:0;border-radius:10px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.dre-tool-btn:hover{color:var(--text-primary);border-color:var(--accent)}
.dre-tool-btn.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}
.dre-tool-btn:disabled{opacity:.4;cursor:not-allowed}
.dre-tool-danger:hover{color:var(--error);border-color:var(--error)}

.dre-range{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;background:var(--bg-input);outline:none;cursor:pointer}
.dre-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer}
.dre-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer}

.dre-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px}
.dre-duration{flex:1;min-width:200px;display:flex;flex-direction:column;gap:7px}
.dre-dur-label{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-muted)}
.dre-dur-label b{margin-left:auto;color:var(--text-primary);font-size:.92rem;font-weight:700}
.dre-cost{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;padding:9px 16px;border-radius:10px;background:var(--accent-glow);border:1px solid var(--accent);white-space:nowrap}
.dre-actions{display:flex;gap:8px}
.dre-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-family:var(--font-display);font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid transparent;transition:transform .1s,box-shadow .12s,color .12s}
.dre-btn-ghost{background:var(--bg-input);border-color:var(--border);color:var(--text-secondary)}
.dre-btn-ghost:hover{color:var(--text-primary)}
.dre-btn-primary{background:var(--gradient-rubis);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}
.dre-btn-primary:hover:not(:disabled){transform:translateY(-1px)}
.dre-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

@media(max-width:600px){
    .modal-card:has(#dreStage){padding:12px;max-width:calc(100vw - 10px)}
    .dre-swatch{width:24px;height:24px}
    .dre-tool-btn{width:34px;height:34px}
    .dre-toolbar{gap:10px}
    .dre-cost{width:100%;text-align:center}
    .dre-actions{flex:1}
    .dre-btn{flex:1;justify-content:center}
}

/* ============================================
   EVENT 8 — MESSAGE VOCAL (enregistreur micro)
   ============================================ */
.modal-card:has(.voe-root){max-width:min(520px,calc(100vw - 24px));width:100%;max-height:96vh;overflow:hidden;padding:22px}
.modal-card:has(.voe-root) .modal-close{display:none}

.voe-root{display:flex;flex-direction:column;gap:16px}
.voe-header{display:flex;align-items:center;justify-content:center}
.voe-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary)}
.voe-hint{font-size:.82rem;line-height:1.45;color:var(--text-muted);text-align:center}

.voe-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 12px;border-radius:14px;background:#0a0a18;border:1px solid var(--border)}
.voe-mic{width:84px;height:84px;border-radius:50%;border:1px solid var(--accent);background:var(--accent-glow);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,box-shadow .15s,background .15s,color .15s}
.voe-mic:hover{transform:scale(1.05)}
.voe-mic.rec{background:var(--error-bg);border-color:var(--error);color:var(--error);animation:voePulse 1.4s ease-out infinite}
@keyframes voePulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}70%{box-shadow:0 0 0 16px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.voe-timer{font-family:var(--font-display);font-weight:700;font-size:1.8rem;color:var(--text-primary);font-variant-numeric:tabular-nums}
.voe-state{font-size:.82rem;color:var(--text-muted);text-align:center}
.voe-preview{width:100%;margin-top:4px}

.voe-footer{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--border);padding-top:16px}
.voe-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.voe-dur{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--text-secondary)}
.voe-clock{display:inline-flex;color:var(--text-muted)}
.voe-cap{color:var(--text-muted)}
.voe-cost{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;padding:9px 16px;border-radius:10px;background:var(--accent-glow);border:1px solid var(--accent);white-space:nowrap}
.voe-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.voe-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-family:var(--font-display);font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid transparent;transition:transform .1s,box-shadow .12s,color .12s}
.voe-btn-ghost{background:var(--bg-input);border-color:var(--border);color:var(--text-secondary)}
.voe-btn-ghost:hover{color:var(--text-primary)}
.voe-btn-primary{background:var(--gradient-rubis);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}
.voe-btn-primary:hover:not(:disabled){transform:translateY(-1px)}
.voe-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

@media(max-width:600px){
    .modal-card:has(.voe-root){padding:14px}
    .voe-cost{flex:1;text-align:center}
    .voe-actions{width:100%}
    .voe-btn{flex:1;justify-content:center}
}

/* ============================================
   EVENT 6 — ZOOM CAMÉRA (positionneur 16:9)
   ============================================ */
.modal-card:has(#zoeStage){max-width:min(920px,calc(100vw - 24px),calc((100vh - 230px) * 16 / 9));width:100%;max-height:96vh;overflow:hidden;padding:18px}
.modal-card:has(#zoeStage) .modal-close{display:none}
.modal-overlay:has(#zoeStage){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,12,28,.9)}

.zoe-root{display:flex;flex-direction:column;gap:14px}
.zoe-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zoe-title{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary)}
.zoe-lvl{font-family:var(--font-display);font-weight:700;color:var(--accent);background:var(--accent-glow);border:1px solid var(--accent);border-radius:8px;padding:4px 10px;font-size:.9rem;white-space:nowrap}

.zoe-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0a0a18;border:1px solid var(--border);touch-action:none;user-select:none;-webkit-user-select:none}
.zoe-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;-webkit-user-drag:none;pointer-events:none}
.zoe-bg-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.85rem}

/* Le box-shadow géant assombrit tout le stage SAUF l'intérieur du rectangle. */
.zoe-rect{position:absolute;box-sizing:border-box;cursor:move;touch-action:none;border:2px solid #fff;border-radius:2px;box-shadow:0 0 0 9999px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6) inset;will-change:left,top,width,height}
.zoe-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;font-weight:700;font-size:.92rem;text-shadow:0 1px 4px rgba(0,0,0,.9);pointer-events:none}
.zoe-h{position:absolute;background:transparent;touch-action:none}
.zoe-h-n{top:-9px;left:18px;right:18px;height:18px;cursor:ns-resize}
.zoe-h-s{bottom:-9px;left:18px;right:18px;height:18px;cursor:ns-resize}
.zoe-h-e{right:-9px;top:18px;bottom:18px;width:18px;cursor:ew-resize}
.zoe-h-w{left:-9px;top:18px;bottom:18px;width:18px;cursor:ew-resize}
.zoe-h-nw,.zoe-h-ne,.zoe-h-sw,.zoe-h-se{width:24px;height:24px;border-radius:50%;background:var(--accent);border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5);transition:transform .1s}
.zoe-h-nw:hover,.zoe-h-ne:hover,.zoe-h-sw:hover,.zoe-h-se:hover{transform:scale(1.18)}
.zoe-h-nw{top:-12px;left:-12px;cursor:nwse-resize}
.zoe-h-ne{top:-12px;right:-12px;cursor:nesw-resize}
.zoe-h-sw{bottom:-12px;left:-12px;cursor:nesw-resize}
.zoe-h-se{bottom:-12px;right:-12px;cursor:nwse-resize}

.zoe-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px}
.zoe-duration{flex:1;min-width:200px;display:flex;flex-direction:column;gap:7px}
.zoe-dur-label{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--text-muted)}
.zoe-dur-label b{margin-left:auto;color:var(--text-primary);font-size:.92rem;font-weight:700}
.zoe-cost{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff;padding:9px 16px;border-radius:10px;background:var(--accent-glow);border:1px solid var(--accent);white-space:nowrap}
.zoe-actions{display:flex;gap:8px}

@media(max-width:600px){
    .modal-card:has(#zoeStage){padding:12px;max-width:calc(100vw - 10px)}
    .zoe-cost{width:100%;text-align:center}
    .zoe-actions{flex:1}
    .zoe-actions .dre-btn{flex:1;justify-content:center}
}

/* ============================================
   SETTINGS MODAL
   ============================================ */
.settings-card{max-width:480px}
.settings-body h3{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:1.2rem;margin-bottom:20px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.setting-row:last-child{border-bottom:none}
.setting-label{font-weight:500;font-size:.92rem}
.setting-desc{color:var(--text-muted);font-size:.78rem;margin-top:2px}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;border-radius:24px;background:var(--bg-input);border:1px solid var(--border);transition:all .25s}
.toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:2px;bottom:2px;border-radius:50%;background:var(--text-muted);transition:all .25s}
.toggle-switch input:checked+.toggle-slider{background:var(--accent-glow);border-color:var(--accent)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);background:var(--accent)}

/* ============================================
   COOKIE BANNER
   ============================================ */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--bg-card);border-top:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 -4px 24px rgba(0,0,0,.4)}
.cookie-text{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text-secondary);flex:1}
.btn-cookie-accept{padding:12px 28px;border:none;border-radius:var(--radius-md);background:var(--gradient-rubis);color:#fff;font-family:var(--font-display);font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap;min-width:120px;min-height:48px;transition:transform .12s,box-shadow .12s;box-shadow:0 4px 16px var(--accent-glow)}
.btn-cookie-accept:hover{transform:translateY(-1px);box-shadow:0 6px 24px var(--accent-glow)}

/* ============================================
   COMPACT MODE
   ============================================ */

body.compact .event-card{padding:14px;gap:10px}
body.compact .pack-row{padding:12px}
body.compact .page-header{margin-bottom:20px;padding-bottom:14px}
body.compact .page-panel{padding:20px 16px 30px}
body.compact .page-title{font-size:1.3rem}
body.compact .events-grid{gap:12px}
body.compact .event-banner{max-height:100px}
body.compact .top-row{padding:6px 0}
body.compact .setting-row{padding:12px 0}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
    .main-nav{display:none}
    :root{--header-h:50px}
    .mobile-nav{display:flex}
    .br-join-wrap{padding:6px 10px;gap:8px;margin-bottom:30px}
    .main-content{bottom:var(--mobile-nav-h)}
    .page-panel[data-page="live"]{height:100%;overflow:hidden;padding:0}
    .live-page{display:none}
    .stream-box[data-mode="live"]{top:var(--header-h);left:0;right:0;width:100%!important;height:56.25vw!important;z-index:95}
    .stream-box[data-mode="live"] .stream-frame{position:absolute;top:0;left:0;right:0;bottom:0}
    .stream-box[data-mode="live"] .stream-frame iframe{width:100%;height:100%}
    .chat-box[data-mode="live"]{top:calc(var(--header-h) + 56.25vw + var(--live-info-h));left:0;right:0;bottom:var(--mobile-nav-h);width:100%!important;z-index:93}
    /* Sprint live-ux : clavier maison ouvert -> le chat cede exactement --kb-h
       par le BAS et recupere la barre d'info par le HAUT (inutile pendant qu'on
       tape). La nav du bas s'efface. Le player et l'entete ne bougent pas d'un
       pixel : leur boite est identique clavier ouvert ou ferme. */
    body.kgk-open .chat-box[data-mode="live"]{top:calc(var(--header-h) + 56.25vw);bottom:var(--kb-h)}
    body.kgk-open #mobileLiveInfo{display:none!important}
    .chat-box[data-mode="live"] .custom-chat{height:100%;display:flex;flex-direction:column}
    .chat-box[data-mode="live"] .cc-messages{flex:1;min-height:0}
    .chat-box[data-mode="live"] .cc-input-wrap{flex-shrink:0}
    .cc-msg:hover{background:transparent}
    .cc-msg:hover .cc-reply-btn{display:none}
    .cc-reply-btn{display:none!important}
    /* Cibles tactiles >=44px */
    .cc-send,.cc-emote-btn,.cc-cp-btn{width:44px;height:44px}
    .cc-scroll-bottom{bottom:64px}
    /* Swipe-droite pour repondre : fleche revelee + etat arme (couleurs du theme) */
    .cc-msg.cc-swiping{user-select:none;-webkit-user-select:none}
    .cc-msg.cc-swiping::before{content:'\21A9';position:absolute;left:-24px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--text-muted);opacity:.65}
    .cc-msg.cc-swipe-armed::before{color:var(--accent);opacity:1}
    .cc-msg.cc-swipe-armed{background:var(--accent-glow)}
    body.kb-open .mobile-nav{transform:translateY(100%)}
    body.kb-open #mobileLiveInfo{display:none!important}
    body.kb-open{overflow:hidden!important;position:fixed!important;width:100%;height:100%;top:0;left:0;margin:0}
    body.kb-open .main-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:300!important;transform:none!important}
    body.kb-open .stream-box[data-mode="live"]{position:fixed!important;top:var(--header-h)!important;left:0!important;right:0!important;width:100%!important;height:56.25vw!important;z-index:200!important;transform:none!important}
    body.kb-open .chat-box[data-mode="live"]{position:fixed!important;left:0!important;right:0!important;z-index:94;display:flex;flex-direction:column}
    body.kb-open .chat-box[data-mode="live"] .cc-messages{flex:1;min-height:0;overflow-y:auto}
    body.kb-open .chat-box[data-mode="live"] .cc-input-wrap{flex-shrink:0}
    .stream-box[data-mode="mini"]{bottom:calc(70px + env(safe-area-inset-bottom));right:10px;width:240px;height:175px}
    .stream-box[data-mode="audio"]{bottom:calc(70px + env(safe-area-inset-bottom));right:10px}
    .mini-restore-btn{bottom:calc(70px + env(safe-area-inset-bottom));right:10px}
    .events-grid{grid-template-columns:1fr}
    /* .wheels-dual — MOVED (sprint 1.15) */
    /* #wheelStd,#wheelPrem — MOVED (sprint 1.15) */
    .history-panel{width:100%}
    .cookie-banner{flex-direction:column;padding:20px;gap:14px}
    .cookie-text{font-size:.85rem}
    .btn-cookie-accept{width:100%;padding:16px;font-size:1rem;min-height:54px}
    .cc-emote-picker{left:0!important;right:0!important;width:100%!important;position:fixed!important;bottom:calc(56px + env(safe-area-inset-bottom))!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0;height:45vh!important}
    body.kb-open .cc-emote-picker{bottom:0!important}
}

@media(max-width:600px){
    .page-panel{padding:16px 14px 30px}
    .page-title{font-size:1.3rem}
    .header-left .logo-text{display:none}
    .pack-row{padding:12px}
    .pack-amount{font-size:1.2rem}
    .pack-price{font-size:1rem}
    /* #wheelStd,#wheelPrem — MOVED (sprint 1.15) */
    .stream-box[data-mode="mini"]{width:200px;height:153px;bottom:calc(64px + env(safe-area-inset-bottom))}
    .mini-restore-btn{bottom:calc(64px + env(safe-area-inset-bottom))}
    .pack-badge{font-size:.65rem;padding:2px 8px}
    .modal-card{padding:24px 20px}
    /* login : responsive géré dans la section LOGIN (refonte 17/07/2026) */
}

@media(max-width:400px){
    .cp-rate{padding:10px 14px;gap:8px}.cp-rate-points{font-size:.9rem}
}

.cc-context-menu{position:fixed;z-index:300;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden;min-width:150px;animation:ucPop .12s ease}
.cc-context-menu.hidden{display:none}
.cc-ctx-item{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:.88rem;color:var(--text-primary);cursor:pointer;border:none;background:none;width:100%;font-family:var(--font-body);text-align:left;-webkit-tap-highlight-color:transparent}
.cc-ctx-item:active{background:var(--bg-card-hover)}
.cc-ctx-item+.cc-ctx-item{border-top:1px solid var(--border)}
.cc-ctx-icon{font-size:1rem;flex-shrink:0}

.mobile-live-info{position:fixed;top:calc(var(--header-h) + 56.25vw);left:0;right:0;display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);z-index:94;height:var(--live-info-h);box-sizing:border-box;font-size:.8rem}
.mobile-live-info .live-viewers{color:#ef4444;font-weight:600;display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
/* Barre d'info enrichie : duree du direct + categorie.
   Ces deux-la ne se compriment jamais (flex-shrink:0) — c'est le TITRE qui cede
   la place, lui seul est tronque. Sur un ecran etroit, mieux vaut perdre la fin
   d'un titre que l'information chiffree. La categorie disparait sous 380px, ou
   il n'y a plus de place pour quoi que ce soit d'autre. */
.mobile-live-info .live-uptime{color:var(--text-muted);font-weight:600;flex-shrink:0;font-variant-numeric:tabular-nums}
/* La categorie est la SEULE a accepter de retrecir (flex:0 1 auto + min-width:0).
   En flex-shrink:0 elle refusait de se compresser et passait a la ligne des que
   le compteur et la duree s'allongeaient (« 12,4k » + « 14h07 ») : la barre
   partait sur TROIS lignes et debordait de sa hauteur. Elle se tronque
   desormais, et le nombre de lignes est garanti a deux. */
.mobile-live-info .live-game{color:var(--text-secondary);font-weight:500;flex:0 1 auto;min-width:0;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* DEUX LIGNES : les donnees courtes et chiffrees (direct / spectateurs / duree /
   categorie) restent groupees en haut, le titre passe seul en dessous ou il a
   toute la largeur. Sur une seule ligne de 390px il ne restait qu'une dizaine de
   caracteres de titre — autant ne pas l'afficher. */
/* DEUX LIGNES GARANTIES par la STRUCTURE, pas par le CSS seul.
   Tentative precedente : tout a plat + flex-wrap, en comptant sur flex-shrink
   pour comprimer la categorie. Ca ne marche pas — flexbox decide des retours a
   la ligne sur la taille de BASE des elements, puis compresse a l'interieur de
   chaque ligne. Un element large passe donc a la ligne au lieu de retrecir, et
   la barre partait sur trois lignes des que le compteur et la duree
   s'allongeaient.
   Ici .mli-top est une rangee qui NE SE COUPE JAMAIS (pas de wrap) : la
   categorie y retrecit et se tronque. Le titre, lui, occupe la seconde ligne. */
.mobile-live-info{flex-wrap:wrap;align-content:center;row-gap:0;line-height:1.15;overflow:hidden}
.mobile-live-info .mli-top{display:flex;align-items:center;gap:8px;flex:0 0 100%;min-width:0;overflow:hidden}
/* La rangee ne se coupe pas, mais le TEXTE du badge, si : « EN DIRECT »
   passait sur deux lignes des que la place manquait, et deformait la barre. */
.mobile-live-info .live-badge{flex-shrink:0;white-space:nowrap}
.mobile-live-info .live-uptime,
.mobile-live-info .live-viewers{white-space:nowrap}
.mobile-live-info .live-title{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
/* DEUX LIGNES : le titre occupe seul la seconde.
   ATTENTION A L'ORDRE — cette regle DOIT suivre celle du dessus : elles ont la
   meme specificite, la derniere l'emporte. Placee avant, elle etait sans effet
   et tout restait sur une ligne, titre tronque a une dizaine de caracteres. */
.mobile-live-info .live-title{flex:0 0 100%;font-size:.72rem}



/* ===== POINT 4 : mode paysage plein écran (vidéo gauche + chat droite redimensionnable) =====
   Activé par JS (body.is-live-landscape) quand on est sur le live ET que le téléphone est
   en paysage (orientation:landscape + hauteur <=500px). Tout le chrome est masqué : la vidéo
   prend la gauche (letterbox via fond noir si le ratio ne remplit pas), le chat la droite. */
body.is-live-landscape{overflow:hidden}
body.is-live-landscape .main-header,
body.is-live-landscape .mobile-nav,
body.is-live-landscape #mobileLiveInfo,
body.is-live-landscape .cookie-banner,
body.is-live-landscape .live-page{display:none!important}
body.is-live-landscape .stream-box[data-mode="live"]{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:0!important;width:calc(100% - var(--chat-w))!important;height:100%!important;z-index:95;background:#000}
body.is-live-landscape .stream-box[data-mode="live"] .stream-frame{position:absolute;inset:0}
body.is-live-landscape .stream-box[data-mode="live"] .stream-frame iframe{width:100%;height:100%}
body.is-live-landscape .chat-box[data-mode="live"]{position:fixed!important;top:0!important;right:0!important;left:auto!important;bottom:0!important;width:var(--chat-w)!important;height:100%!important;z-index:96}
/* Sprint live-ux : en paysage le clavier maison se cale dans la colonne chat
   (jamais par-dessus la video) et le chat retrecit d'autant. La largeur de la
   colonne ne change pas -> aucun reflow de l'iframe. */
body.is-live-landscape.kgk-open .chat-box[data-mode="live"]{bottom:var(--kb-h)!important;height:auto!important}
body.is-live-landscape .chat-box[data-mode="live"] .custom-chat{height:100%;display:flex;flex-direction:column}
body.is-live-landscape .chat-box[data-mode="live"] .cc-messages{flex:1;min-height:0}
/* L'emote picker s'aligne sur la colonne chat (sinon il prendrait toute la largeur) */
body.is-live-landscape .cc-emote-picker{left:auto!important;right:0!important;width:var(--chat-w)!important;bottom:0!important;height:60vh!important;border-radius:var(--radius-lg) 0 0 0}
/* Poignée de redimensionnement, centrée sur la frontière vidéo/chat */
.live-landscape-divider{display:none}
body.is-live-landscape .live-landscape-divider{display:block;position:fixed;top:0;bottom:0;right:calc(var(--chat-w) - 8px);width:16px;z-index:97;cursor:col-resize;touch-action:none;-webkit-tap-highlight-color:transparent}
body.is-live-landscape .live-landscape-divider::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:4px;height:54px;border-radius:3px;background:var(--text-muted);opacity:.5;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
body.is-live-landscape .live-landscape-divider.dragging::before{opacity:.95;background:var(--accent)}
/* Pendant le drag : la vidéo ne capte plus le pointeur (sinon l'iframe avale le mouvement) */
body.resizing-chat{cursor:col-resize;-webkit-user-select:none;user-select:none}
body.resizing-chat .stream-frame{pointer-events:none}

/* ===== LOW PERFORMANCE MODE ===== */
body.low-perf,body.low-perf *{animation:none!important;transition:none!important}
body.low-perf .stream-box[data-mode="mini"],body.low-perf .stream-box[data-mode="audio"]{display:none!important}
body.low-perf .mini-restore-btn{display:none!important}
body.low-perf *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.low-perf .login-bg{background:var(--bg-primary)!important}
body.low-perf .login-bg::before,body.low-perf .login-bg::after{display:none!important}
body.low-perf .login-clips-wall,body.low-perf .login-particles,body.low-perf .login-aurora{display:none!important}
/* Header D : la seule animation permanente de la barre est la pastille du
   direct. En mode eco on la fige (elle reste rouge, donc lisible), et la nav
   du bas retrouve un fond opaque puisque le flou est coupe plus haut. */
body.low-perf .header-live i{animation:none!important}
body.low-perf .mobile-nav{background:var(--bg-primary)!important}
body.low-perf .gartic-confetti,body.low-perf .gartic-sparkles,body.low-perf .gartic-stars{display:none!important}
body.low-perf .notif-btn:hover svg{animation:none!important}
body.low-perf .event-card:hover,body.low-perf .jeux-card:hover,body.low-perf .boutique-card:hover{transform:none!important}
body.low-perf .gartic-overlay{backdrop-filter:none!important;background:rgba(0,0,0,.85)!important}
/* body.low-perf .wheel-result-card — MOVED (sprint 1.15) */
body.low-perf *:hover{box-shadow:none!important}

/* ===== GAME MODE ===== */
body.game-mode .main-content{padding:0!important;max-width:100%!important}
body.game-mode .page-slider{padding:0!important}
body.game-mode .jeux-page{max-width:100%;padding:0}
body.game-mode #jeux-game{position:fixed;inset:0;z-index:9999;background:var(--bg-primary)}

/* ===== PIXEL ART BUTTONS ===== */
.gartic-opt{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:0;font-weight:600;font-size:.82rem;cursor:pointer;color:#d0d0e0;background:#2a2a3e;outline:2px solid rgba(0,0,0,.3);outline-offset:-2px;box-shadow:3px 3px 0 0 rgba(0,0,0,.4),inset -2px -2px 0 0 rgba(0,0,0,.2),inset 2px 2px 0 0 rgba(255,255,255,.06);transition:transform 60ms,box-shadow 60ms;font-family:inherit;white-space:nowrap;text-align:center;justify-content:center}
.gartic-opt:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 0 rgba(0,0,0,.4),inset -2px -2px 0 0 rgba(0,0,0,.2),inset 2px 2px 0 0 rgba(255,255,255,.06);color:#fff;background:#35355a}
.gartic-opt:active{transform:translate(3px,3px);box-shadow:0 0 0 0 transparent}
.gartic-opt.selected{background:var(--accent,#6c5ce7);color:#fff;outline-color:var(--accent,#6c5ce7)}
.gartic-opt.selected:hover{background:var(--accent);transform:none;box-shadow:3px 3px 0 0 rgba(0,0,0,.4)}

/* ===== JEUX HUB ===== */
.jeux-page{max-width:900px;margin:0 auto;padding:20px}
.jeux-page-header{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.jeux-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.jeux-card{background:var(--bg-card);border:2px solid var(--border);border-radius:0;padding:28px;text-align:center;cursor:pointer;transition:transform 60ms,box-shadow 60ms;box-shadow:4px 4px 0 0 rgba(0,0,0,.4);outline:2px solid rgba(0,0,0,.2);outline-offset:-2px}
.jeux-card:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 0 rgba(0,0,0,.4);border-color:var(--accent)}
.jeux-card:active{transform:translate(4px,4px);box-shadow:0 0 0 0 transparent}
.jeux-card-icon{margin-bottom:14px}
.jeux-card-svg{width:48px;height:48px;color:var(--accent)}
.jeux-card-name{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.jeux-card-desc{font-size:.82rem;color:var(--text-muted);line-height:1.4}
.jeux-card-soon{opacity:.45;cursor:default;pointer-events:none}

/* ===== SHARED HEADER ===== */
.gartic-game-header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:48px;background:rgba(0,0,0,.6);border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;gap:10px}
.gartic-hbtn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);border-radius:0;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .08s;font-family:inherit;box-shadow:2px 2px 0 0 rgba(0,0,0,.3);white-space:nowrap}
.gartic-hbtn:hover{background:rgba(255,255,255,.1);color:#fff;transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.3)}
.gartic-hbtn-danger{background:rgba(255,68,97,.12);border-color:rgba(255,68,97,.35);color:#ff4461}
.gartic-hbtn-danger:hover{background:rgba(255,68,97,.22);color:#ff6b81}
.gartic-header-center{display:flex;align-items:center;gap:14px;flex:1;justify-content:center;min-width:0;overflow:hidden}
.gartic-header-round{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.4);flex-shrink:0;letter-spacing:.5px;text-transform:uppercase}
.gartic-header-timer{font-size:1.3rem;font-weight:800;min-width:36px;text-align:center;color:rgba(255,255,255,.2)}
.gt-ok{color:#4efe85}.gt-warn{color:#ffd700}.gt-danger{color:#ff4461;animation:timerPulse .5s infinite alternate}.gt-inf{color:#d951ff}
@keyframes timerPulse{from{opacity:1}to{opacity:.5}}
.gartic-header-title{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;color:rgba(255,255,255,.45);flex-shrink:0}
.gartic-header-title svg{color:var(--accent)}
.gartic-header-hint{font-size:.95rem;letter-spacing:4px;color:#d951ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== SHARED SIDEBAR ===== */
.gartic-sidebar{width:320px;flex-shrink:0;display:flex;flex-direction:column;background:rgba(0,0,0,.3);border-left:1px solid rgba(255,255,255,.06);overflow-y:auto}
.gartic-section-label{font-size:.65rem;font-weight:700;color:rgba(255,255,255,.25);padding:8px 10px 4px;display:flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.5px}
.gartic-section-label svg{color:var(--accent)}

/* Camera frame */
.gartic-cam-frame{width:100%;aspect-ratio:16/9;background:rgba(0,0,0,.45);border-bottom:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0}
.gartic-cam-label{font-size:.6rem;color:rgba(255,255,255,.12);letter-spacing:1px;text-transform:uppercase}

/* Word panel */
.gartic-word-panel{border-bottom:1px solid rgba(255,255,255,.06)}
#gartic-word-choices{display:flex;flex-direction:column;gap:5px;padding:4px 10px 10px}
.gartic-word-btn{padding:10px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:0;cursor:pointer;font-size:.82rem;font-weight:700;transition:all .08s;text-align:center;font-family:inherit;box-shadow:2px 2px 0 0 rgba(0,0,0,.3);text-transform:uppercase;letter-spacing:.5px}
.gartic-word-btn:hover{background:var(--accent);border-color:var(--accent);transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.3)}
.gartic-word-custom{display:flex;gap:4px}
.gartic-word-custom input{flex:1;padding:7px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:0;font-size:.78rem;font-family:inherit}
.gartic-word-custom input:focus{outline:none;border-color:var(--accent)}
.gartic-word-custom-ok{width:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:0;cursor:pointer;transition:all .08s;flex-shrink:0}
.gartic-word-custom-ok:hover{background:var(--accent);border-color:var(--accent)}

/* ===== GARTIC SETUP ===== */
.gartic-setup{display:flex;flex-direction:column;height:100%;min-height:100vh}
.gartic-setup-body{display:flex;flex:1;min-height:0}
.gartic-setup-left{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.gartic-setup-form{max-width:480px;width:100%}
.gartic-setup-section{background:var(--bg-card);border:1px solid var(--border);border-radius:0;padding:14px;margin-bottom:8px;box-shadow:3px 3px 0 0 rgba(0,0,0,.2)}
.gartic-setup-label{font-size:.8rem;font-weight:600;color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.gartic-setup-label svg{color:var(--accent);flex-shrink:0}
.gartic-setup-opts{display:flex;gap:6px;flex-wrap:wrap}
.gartic-setup-input{width:100%;padding:8px;background:var(--bg-input);border:1px solid var(--border);color:var(--text-primary);border-radius:0;font-size:.82rem;margin-top:6px;font-family:inherit}
.gartic-setup-input:focus{outline:none;border-color:var(--accent)}
.gartic-launch-btn{width:100%;padding:14px;font-size:.95rem;font-weight:700;margin-top:16px;background:var(--accent,#6c5ce7)!important;color:#fff!important;outline-color:var(--accent)!important;box-shadow:4px 4px 0 0 rgba(0,0,0,.45)!important}
.gartic-launch-btn:hover{transform:translate(2px,2px)!important;box-shadow:2px 2px 0 0 rgba(0,0,0,.45)!important}

/* ===== GARTIC GAME ===== */
.gartic-game{display:none;flex-direction:column;position:fixed;inset:0;z-index:10000;background:#0d1117}
.gartic-game-body{flex:1;display:flex;overflow:hidden;min-height:0}

/* Canvas area */
.gartic-game-left{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.gartic-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:8px;min-height:0;transition:background .8s}
.gartic-canvas-wrap canvas{background:transparent;border:2px solid rgba(255,255,255,.05);cursor:crosshair;display:block;max-width:100%;max-height:100%}
.gartic-canvas-wrap.waiting canvas{opacity:.12;pointer-events:none}
.gartic-waiting{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;z-index:2;color:rgba(255,255,255,.25);font-size:.82rem;letter-spacing:2px;text-transform:uppercase}
.gartic-canvas-wrap.waiting .gartic-waiting{display:flex}

/* ===== SIDEBAR TOOLS ===== */
.gartic-sidebar-tools{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06);transition:background .8s}
.gartic-tools-row{display:flex;gap:3px;margin-bottom:3px;justify-content:center}
.gartic-tool{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:0;cursor:pointer;color:rgba(255,255,255,.4);transition:all .06s;box-shadow:2px 2px 0 0 rgba(0,0,0,.2)}
.gartic-tool:hover{background:rgba(255,255,255,.1);color:#fff;transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.2)}
.gartic-tool.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:2px 2px 0 0 rgba(0,0,0,.3)}
.gartic-tool svg{width:14px;height:14px}

/* Colors: same size as tools (38px), 6 per row, 2 rows = 12 */
.gartic-colors-grid{display:grid;grid-template-columns:repeat(6,38px);gap:3px;margin:6px 0;justify-content:center}
.gartic-color{width:38px;height:38px;border-radius:0;border:2px solid rgba(255,255,255,.06);cursor:pointer;transition:all .06s;position:relative;box-shadow:1px 1px 0 0 rgba(0,0,0,.2)}
.gartic-color:hover{border-color:rgba(255,255,255,.4)}
.gartic-color.active{border-color:#fff;box-shadow:0 0 8px rgba(255,255,255,.3)}

/* Size bar: dot-min | slider | dot-max */
.gartic-size-bar{display:flex;align-items:center;gap:8px;margin-top:6px;padding:4px 0}
.gartic-size-dot-hint{background:#fff;border-radius:50%;flex-shrink:0;opacity:.4}
.gartic-size-bar input[type=range]{flex:1;accent-color:var(--accent);height:4px}

/* ===== LEADERBOARD ===== */
.gartic-lb{flex:1;display:flex;flex-direction:column;min-height:0;transition:background .8s}
.gartic-lb-row{display:flex;align-items:center;gap:5px;padding:3px 10px;font-size:.78rem;color:rgba(255,255,255,.55)}
.gartic-lb-rank{font-weight:700;min-width:20px}
.gartic-lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gartic-lb-pts{font-weight:700;color:var(--accent)}
.gartic-lb-empty{font-size:.72rem;color:rgba(255,255,255,.15);padding:4px 10px;font-style:italic;text-transform:uppercase;letter-spacing:.3px}

/* ===== OVERLAYS ===== */
.gartic-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px;animation:gOverIn .35s ease-out}
@keyframes gOverIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.gartic-overlay-card{background:linear-gradient(170deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);border:2px solid rgba(255,255,255,.08);border-radius:0;padding:32px;text-align:center;max-width:400px;width:100%;box-shadow:8px 8px 0 0 rgba(0,0,0,.5),0 0 60px rgba(0,0,0,.4);position:relative;overflow:hidden;animation:gCardIn .4s ease-out}
@keyframes gCardIn{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.gartic-ov-btn{padding:12px 24px;border-radius:0!important;font-weight:700;cursor:pointer;font-size:.88rem;margin-top:18px;width:100%;background:var(--accent)!important;color:#fff!important;outline-color:var(--accent)!important;box-shadow:3px 3px 0 0 rgba(0,0,0,.4)!important;position:relative;z-index:2}
.gartic-ov-btn:hover{transform:translate(1px,1px)!important;box-shadow:2px 2px 0 0 rgba(0,0,0,.4)!important}
.gartic-ov-word{font-size:.92rem;color:rgba(255,255,255,.5);margin:14px 0;padding:10px 16px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);display:block;position:relative;z-index:2}
.gartic-ov-word strong{color:var(--accent);font-size:1.05rem;letter-spacing:1px}

/* === FOUND MODAL: sparkles + stars + glow === */
.gartic-ov-found{overflow:hidden}
.gartic-ov-found .gartic-overlay-card{border-color:rgba(255,215,0,.2)}
.gartic-ov-found-icon{margin-bottom:8px;position:relative;z-index:2;animation:gBounce .6s ease-out}
@keyframes gBounce{0%{transform:scale(0) rotate(-20deg)}50%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.gartic-ov-found-name{font-size:1.25rem;font-weight:800;color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.6),0 0 40px rgba(255,215,0,.3),0 2px 0 rgba(0,0,0,.3);margin-bottom:6px;animation:gGlow 1.5s infinite alternate;position:relative;z-index:2}
@keyframes gGlow{from{text-shadow:0 0 10px rgba(255,215,0,.3),0 2px 0 rgba(0,0,0,.3)}to{text-shadow:0 0 30px rgba(255,215,0,.7),0 0 60px rgba(255,215,0,.3),0 2px 0 rgba(0,0,0,.3)}}

/* Sparkle particles background */
.gartic-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.gartic-sparkles::before,.gartic-sparkles::after{content:'';position:absolute;width:100%;height:100%;background-image:radial-gradient(2px 2px at 20% 30%,#ffd700,transparent),radial-gradient(2px 2px at 50% 20%,#fff,transparent),radial-gradient(2px 2px at 80% 60%,#ffd700,transparent),radial-gradient(1.5px 1.5px at 10% 80%,#4efe85,transparent),radial-gradient(1.5px 1.5px at 70% 90%,#d951ff,transparent),radial-gradient(2px 2px at 40% 70%,#3498db,transparent),radial-gradient(1px 1px at 90% 15%,#fff,transparent),radial-gradient(2px 2px at 60% 45%,#ff4461,transparent);animation:gSparkle 3s linear infinite}
.gartic-sparkles::after{animation-delay:1.5s;animation-duration:2.5s;opacity:.6}
@keyframes gSparkle{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-40px);opacity:0}}

/* Flying star particles */
.gartic-stars{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.gartic-star{position:absolute;color:#ffd700;font-size:1.2rem;animation:gStarFly 2s ease-out forwards;opacity:0}
.gartic-star.s1{left:10%;top:80%;animation-delay:.1s}
.gartic-star.s2{left:30%;top:90%;animation-delay:.3s;color:#ff4461;font-size:1rem}
.gartic-star.s3{left:50%;top:85%;animation-delay:.2s;color:#4efe85}
.gartic-star.s4{left:70%;top:88%;animation-delay:.4s;color:#d951ff;font-size:.9rem}
.gartic-star.s5{left:85%;top:82%;animation-delay:.15s;color:#3498db}
.gartic-star.s6{left:20%;top:92%;animation-delay:.5s;font-size:1.4rem}
@keyframes gStarFly{0%{transform:translateY(0) scale(0) rotate(0);opacity:0}20%{opacity:1;transform:translateY(-20px) scale(1.2) rotate(45deg)}100%{transform:translateY(-180px) scale(0) rotate(360deg);opacity:0}}

/* === TIMEOUT MODAL: shake + pulse === */
.gartic-ov-timeout .gartic-overlay-card{border-color:rgba(255,68,97,.2);background:linear-gradient(170deg,#2a0a0a 0%,#1a0520 50%,#1a1a2e 100%)}
.gartic-ov-timeout-shake{margin-bottom:10px;animation:gShake .5s ease-out,gPulseRed 2s infinite alternate;position:relative;z-index:2}
@keyframes gShake{0%{transform:rotate(0)}15%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@keyframes gPulseRed{from{filter:drop-shadow(0 0 8px rgba(255,68,97,.3))}to{filter:drop-shadow(0 0 20px rgba(255,68,97,.6))}}
.gartic-ov-timeout-title{font-size:1.3rem;font-weight:800;color:#ff4461;margin-bottom:4px;position:relative;z-index:2;text-shadow:0 0 20px rgba(255,68,97,.4),0 2px 0 rgba(0,0,0,.3);letter-spacing:1px}
/* Timeout red scan line effect */
.gartic-ov-timeout .gartic-overlay-card::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,68,97,.03) 3px,rgba(255,68,97,.03) 4px);animation:gScanDown 3s linear infinite;pointer-events:none}
@keyframes gScanDown{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* === END SCREEN === */
.gartic-ov-end-title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:1.2rem;font-weight:800;margin-bottom:14px;color:#ffd700;position:relative;z-index:2;text-shadow:0 0 15px rgba(255,215,0,.3)}
.gartic-end-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid rgba(255,255,255,.05);position:relative;z-index:2}
.gartic-end-rank{font-weight:700;min-width:26px;text-align:center}
.gartic-end-name{flex:1;font-weight:600;text-align:left}
.gartic-end-pts{color:var(--accent);font-weight:700}

/* ===== CONFIRM MODAL ===== */
.gartic-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:10002;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s}
.gartic-confirm-box{background:var(--bg-card);border:2px solid var(--border);border-radius:0;padding:26px;text-align:center;max-width:340px;width:100%;box-shadow:5px 5px 0 0 rgba(0,0,0,.5)}
.gartic-confirm-icon{margin-bottom:10px}
.gartic-confirm-msg{font-size:.95rem;font-weight:600;margin-bottom:18px;color:var(--text-primary)}
.gartic-confirm-btns{display:flex;gap:8px}
.gartic-confirm-btns .btn-secondary,.gartic-confirm-btns .btn-primary{flex:1;padding:9px;border-radius:0;font-weight:600;cursor:pointer;font-size:.85rem;font-family:inherit;border:1px solid var(--border);box-shadow:2px 2px 0 0 rgba(0,0,0,.3)}
.gartic-confirm-btns .btn-secondary{background:var(--bg-input);color:var(--text-secondary)}
.gartic-confirm-btns .btn-secondary:hover{background:rgba(255,255,255,.08);transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.3)}
.gartic-confirm-yes{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.gartic-confirm-yes:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(0,0,0,.3)!important}
.gartic-confirm-danger{background:#c0392b!important;border-color:#c0392b!important}

@media(max-width:900px){
    .gartic-setup-body{flex-direction:column}
    .gartic-sidebar{width:100%;max-width:320px;align-self:center}
    .gartic-header-hint{max-width:160px}
    .gartic-colors-grid{grid-template-columns:repeat(6,32px)}
    .gartic-color{width:32px;height:32px}
}

/* =====================================================
   UTILITAIRES PAGE
   ===================================================== */
.utils-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:20px}
.utils-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:28px 24px;cursor:pointer;transition:all .2s;text-align:center}
.utils-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.utils-card-icon{font-size:40px;margin-bottom:12px}
.utils-card-name{font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;color:var(--text-primary);margin-bottom:6px}
.utils-card-desc{font-size:.82rem;color:var(--text-muted);line-height:1.4}

/* =====================================================
   HUMEUR VIEWERS
   ===================================================== */

/* ====== AURA CURRENCY ====== */
.aura-display{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border);cursor:pointer;font-weight:600;font-size:.9rem;color:var(--text-primary);transition:border-color .12s,box-shadow .12s;font-family:var(--font-body)}
.header-right .aura-display{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
[data-theme="light"] .header-right .aura-display{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.aura-display:hover{border-color:rgba(255,120,30,.4);box-shadow:0 0 16px rgba(255,120,30,.2)}
.aura-icon-sm{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(255,120,30,.6))}
.aura-count{color:#ff8c1a}
.aura-count.negative,.rubis-count.negative{color:#ff4d4d}

/* Aura welcome toast only — no popup needed */

/* Aura watchtime bonus popup */
.aura-bonus-toast{position:fixed;bottom:80px;right:20px;background:var(--bg-card);border:1px solid rgba(255,120,30,.3);border-radius:14px;padding:12px 20px;display:flex;align-items:center;gap:10px;z-index:9998;animation:slideUp .3s,fadeOut .3s 2.5s forwards;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.aura-bonus-toast img{width:24px;height:24px}
.aura-bonus-toast span{font-family:'Outfit',sans-serif;font-weight:600;color:#ff8c1a;font-size:.9rem}

@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-10px)}}

/* ========== Contact Modal ========== */
.ct-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:420px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);animation:fadeScale .2s ease}
@keyframes fadeScale{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.ct-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700;font-size:1rem}
.ct-close{border:none;background:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer}
.ct-body{padding:16px 20px;overflow-y:auto;flex:1}
.ct-choices{display:flex;flex-direction:column;gap:8px}
.ct-choice{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--bg-deep);cursor:pointer;color:var(--text-primary);font-size:.9rem;font-weight:500;font-family:inherit;text-align:left;transition:.15s}
.ct-choice:hover{border-color:var(--accent);background:var(--accent-glow)}
.ct-ch-icon{font-size:1.3rem;display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0}
.ct-ch-icon svg{width:22px;height:22px}
.ct-divider{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--border)}
.ct-thread{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-deep);cursor:pointer;color:var(--text-primary);font-family:inherit;margin-bottom:4px;transition:.12s;text-align:left}
.ct-thread:hover{border-color:var(--accent)}
.ct-th-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
.ct-th-icon svg{width:16px;height:16px}
.ct-th-info{display:flex;align-items:center;gap:6px;flex:1}
.ct-th-status{font-size:.78rem;font-weight:600}
.ct-unread{background:var(--accent);color:#fff;font-size:.65rem;padding:1px 6px;border-radius:10px;font-weight:700}
.ct-toggle-closed{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:none;background:none;color:var(--text-muted);font-size:.75rem;cursor:pointer;font-family:inherit;border-top:1px solid var(--border);margin-top:12px;transition:color .15s}
.ct-toggle-closed:hover{color:var(--text-primary)}
.ct-closed-notice{padding:10px 14px;text-align:center;font-size:.78rem;color:var(--text-muted);border-top:1px solid var(--border);margin-top:8px}
.ct-compose-title{font-weight:700;font-size:1rem;margin-bottom:12px}
.ct-textarea{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-family:inherit;font-size:.88rem;resize:vertical}
.ct-textarea:focus{border-color:var(--accent);outline:none}
.ct-compose-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.ct-btn-send{padding:9px 20px;border:none;border-radius:10px;background:var(--gradient-accent);color:#fff;font-weight:600;cursor:pointer;font-family:inherit;font-size:.85rem}
.ct-btn-cancel{padding:9px 16px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:.85rem}
.ct-btn-cancel:hover{border-color:var(--accent)}
.ct-back{margin-bottom:10px}
.ct-thread-view{display:flex;flex-direction:column;gap:10px}
.ct-thread-msgs{max-height:40vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px}
.ct-msg{display:flex;flex-direction:column}
.ct-msg-user{align-items:flex-end}.ct-msg-admin{align-items:flex-start}
.ct-msg-bubble{padding:10px 14px;border-radius:14px;font-size:.88rem;max-width:85%;line-height:1.5;word-break:break-word}
.ct-msg-user .ct-msg-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.ct-msg-admin .ct-msg-bubble{background:var(--bg-deep);border:1px solid var(--border);border-bottom-left-radius:4px}
.ct-msg-time{font-size:.65rem;color:var(--text-muted);margin-top:2px;padding:0 4px}
.ct-reply{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.ct-reply .ct-textarea{flex:1;resize:none}
.ct-reply .ct-btn-send{flex-shrink:0;align-self:flex-end}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* === Coming Soon Overlay === */
.coming-soon-wrap{position:relative;height:calc(100vh - 120px);overflow:hidden}
.coming-soon-content{filter:grayscale(1) brightness(.4);opacity:.3;pointer-events:none;user-select:none;position:absolute;inset:0;overflow:hidden}
.coming-soon-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;pointer-events:none}
.coming-soon-title{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:#facc15;text-align:center;letter-spacing:2px;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.coming-soon-char{width:400px;height:auto;margin:6px 0;filter:drop-shadow(0 4px 24px rgba(0,0,0,.6))}
.coming-soon-sub{font-family:var(--font-display);font-weight:600;font-size:1rem;color:#fff;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.coming-soon-extra{font-size:.9rem;color:rgba(255,255,255,.7);text-align:center;margin-top:8px;min-height:24px;transition:opacity .3s}
@media(max-width:600px){.coming-soon-char{width:120px}.coming-soon-title{font-size:1rem}.coming-soon-sub{font-size:.88rem}}

/* Objectifs info button */
.btn-info-commun{padding:8px 14px;font-size:.8rem;display:flex;align-items:center;gap:5px}
.btn-info-commun .icon{width:14px;height:14px}
.contribute-btns{display:flex;gap:8px;align-items:center}
.eim-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);max-width:440px;width:90vw;overflow:hidden;box-shadow:var(--shadow-lg);animation:fadeScale .2s ease}
.eim-banner{max-height:160px;overflow:hidden}.eim-banner img{width:100%;display:block;object-fit:cover}
.eim-body{padding:20px}
.eim-title{font-size:1.15rem;font-weight:700;margin-bottom:10px}
.eim-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.6;margin-bottom:18px;white-space:pre-wrap}
.eim-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.so-ep-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:6px}
.so-tiers-bar{margin-bottom:8px;position:relative}
.so-tiers-bar .progress-bar-wrap{height:22px;border-radius:var(--radius-sm);overflow:visible}
.so-tier-marker{position:absolute;top:0;bottom:0;width:2px;transform:translateX(-1px);z-index:2}
.so-tier-line{width:2px;height:100%;background:var(--bg-primary);opacity:.8}
.so-tier-costs{position:relative;height:18px;margin-bottom:4px}
.so-tier-cost{position:absolute;transform:translateX(-50%);font-size:.64rem;color:var(--text-muted);opacity:.7;white-space:nowrap;bottom:0}
.so-tier-cost.so-tier-reached{color:var(--accent);opacity:1}
.so-tier-labels{position:relative;height:48px;margin-top:4px}
.so-tier-text{position:absolute;transform:translateX(-50%) rotate(-35deg);transform-origin:top center;font-size:.68rem;font-weight:700;color:var(--text-muted);white-space:nowrap;top:0}
.so-tier-text.so-tier-reached{color:var(--accent)}
/* Chat links */
.cc-link{color:var(--accent);text-decoration:none;cursor:pointer;transition:opacity .15s}
.cc-link:hover{opacity:.8;text-decoration:underline}

/* QG header buttons */
.gm-header-btns{display:flex;gap:8px;margin-left:auto}
.gm-alert-btn,.gm-plus-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .15s}
.gm-alert-btn{background:#ef4444}
.gm-alert-btn:hover{transform:scale(1.1);opacity:.9}
.gm-plus-btn{background:#22c55e}
.gm-plus-btn:hover{transform:scale(1.1);opacity:.9}

/* Top contributors button */
.btn-top-all{font-size:.7rem;padding:2px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--accent);cursor:pointer;margin-left:auto;transition:all .15s}
.btn-top-all:hover{background:var(--accent);color:#fff}
.gm-btn-more{font-size:.78rem;padding:6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--accent);cursor:pointer;transition:all .15s}
.gm-btn-more:hover{background:var(--accent);color:#fff}
.contrib-modal{min-width:400px;max-width:95vw}
.contrib-tabs{display:flex;gap:4px;margin-bottom:12px}
.contrib-tab{flex:1;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-deep);color:var(--text-secondary);cursor:pointer;font-size:.82rem;font-weight:600;text-align:center;transition:all .15s}
.contrib-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.contrib-list{max-height:55vh;overflow-y:auto;padding-right:4px}
.contrib-row{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--border);font-size:.82rem}
.contrib-row img{width:28px;height:28px;border-radius:50%;flex-shrink:0}
.contrib-row .contrib-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contrib-row .contrib-val{color:var(--accent2);font-weight:700;flex-shrink:0;margin-left:auto}
.contrib-row .contrib-details{font-size:.7rem;color:var(--text-muted);flex-shrink:0}
.contrib-row .contrib-time{font-size:.7rem;color:var(--text-muted);flex-shrink:0;margin-left:8px}

/* QG Banner upload */
.gm-banner-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;border:2px dashed var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;background:var(--bg-deep);font-size:.82rem;color:var(--text-muted);text-align:center}
.gm-banner-upload:hover{border-color:var(--accent);background:rgba(59,130,246,.05);color:var(--accent)}

/* Pack shortcut grid */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pack-shortcut{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 8px;border:2px solid var(--border);border-radius:var(--radius-md);background:var(--bg-deep);cursor:pointer;transition:all .2s;text-align:center;gap:4px}
.pack-shortcut:hover{border-color:var(--accent);background:rgba(59,130,246,.08);transform:translateY(-2px)}
.pack-shortcut:active{transform:translateY(0)}
.pack-shortcut-amount{font-size:1.4rem;font-weight:800;font-family:var(--font-display);color:var(--text-primary);display:flex;align-items:center;gap:6px}
.pack-shortcut-amount .rubis-icon-pack{width:20px;height:32px}
.pack-shortcut-bonus{font-size:.72rem;color:var(--accent2);font-weight:600;background:rgba(168,85,247,.1);padding:1px 8px;border-radius:10px}
.pack-shortcut-price{font-size:.88rem;font-weight:700;color:var(--accent);margin-top:2px}
@media(max-width:500px){.packs-grid{grid-template-columns:repeat(2,1fr)}}



.mib-content{display:flex;align-items:center;gap:12px;padding:12px 20px;background:linear-gradient(135deg,rgba(59,130,246,.95),rgba(168,85,247,.95));border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.4);backdrop-filter:blur(10px)}
.mib-icon{font-size:1.4rem}
.mib-text{color:#fff;font-size:.9rem;white-space:nowrap}
.mib-btns{display:flex;gap:6px;margin-left:8px}
.mib-btn{padding:6px 16px;font-size:.8rem;border-radius:var(--radius-sm)}
@media(max-width:600px){.mib-content{flex-wrap:wrap;justify-content:center;gap:8px;padding:10px 14px}.mib-text{white-space:normal;text-align:center;font-size:.82rem}}

/* ============================================
   HEADER — cotes de la direction D, EN VH

   Les cotes de la maquette D sont cales sur une barre de 66 px. En gardant
   --header-h a 7.5vh (la valeur d'avant la refonte), 66 px correspondent a une
   zone utile de 880 px : 1vh = 8.8 px de reference. Chaque cote de la maquette
   est donc simplement divise par 8.8.

   POURQUOI pas des px fixes : en px, la barre garde la meme hauteur physique
   quelle que soit la definition, donc sur un 4K elle PARAIT deux fois plus fine
   que sur un 1080p. Toute la barre — hauteur, marges, polices, icones, avatar,
   engrenage — doit suivre la hauteur d'ecran, comme avant la refonte.
   Logo et mot reprennent d'ailleurs leurs valeurs d'origine exactes (6vh / 2.2vh).

   Le mobile (<=900 px) reste en px fixes : c'etait deja le cas avant, et sur
   telephone la hauteur d'ecran ne dit rien de la finesse d'affichage.
   ============================================ */
.main-header{padding:0 2.95vh}
.main-header .logo-link{gap:1vh}
.main-header .logo-img{height:6vh;width:auto;object-fit:contain}
.main-header .logo-wordmark{font-size:2.2vh;margin-left:.1vh}
.main-header .main-nav{gap:2.95vh}
.main-header .nav-link{gap:0;padding:.57vh 0;font-size:max(10px,1.25vh)}
.main-header .nav-ink{height:max(1.5px,.17vh)}
.main-header .header-right{gap:2.27vh}
.wallet{gap:2.27vh}
.main-header .wallet-slot{gap:.8vh;padding:0;font-size:max(12px,1.59vh);height:auto;box-sizing:border-box}
/* Aura et Rubis grossis (retour Aymen). Rubis.png est un gemme etroit
   (190x330) la ou Aura est presque carre (400x460) : a hauteur egale le rubis
   parait plus maigre, d'ou le leger surplus.
   filter:none — hors du header la flamme porte un drop-shadow orange (regle
   .aura-icon-sm plus haut) qui bave sur le chiffre. */
.main-header .aura-icon-sm{width:auto;height:2.61vh;opacity:.95;object-fit:contain;filter:none}
.main-header .rubis-icon-sm{width:auto;height:2.73vh;opacity:.95;object-fit:contain}
.main-header .header-live{font-size:max(9.5px,1.19vh);gap:.68vh}
.main-header .header-live i{width:.68vh;height:.68vh}
.main-header .user-btn{gap:0;padding:0}
.main-header .user-cog{width:5vh;height:5vh}
.main-header .user-avatar{width:3.18vh;height:3.18vh}
.main-header .logo-rubis{width:3.18vh;height:3.18vh}
/* Le bouton d'installation PWA s'injecte dans .header-right (pwa-ui.js) :
   on le ramene a l'echelle de la barre, sinon la pastille orange de 36 px
   ecrase tout le reste. */
.main-header .pwa-header-install-btn{width:2.95vh;height:2.95vh}
.main-header .pwa-header-install-btn svg{width:1.59vh;height:1.59vh}
/* Entre 901 et 1220 px de LARGE, logo + mot + 7 onglets en capitales + soldes ne
   tiennent plus a l'echelle pleine : on resserre. Toujours en vh — c'est une
   contrainte de largeur, pas une raison de figer la hauteur. */
@media(min-width:901px) and (max-width:1220px){
    .main-header{padding:0 1.8vh}
    .main-header .logo-link{gap:.8vh}
    .main-header .logo-img{height:4.7vh}
    .main-header .logo-wordmark{font-size:1.7vh}
    .main-header .main-nav{gap:1.7vh}
    .main-header .nav-link{font-size:max(9.5px,1.14vh);letter-spacing:.09em}
    /* L'ecart entre onglets tombe a 1.7vh : le picto doit y tenir sans mordre
       sur l'onglet precedent. */
    .main-header .nav-link .icon-nav{width:max(12px,1.45vh);height:max(12px,1.45vh);margin-right:.25vh}
}
/* Fenetre a la fois etroite ET basse : l'ecart entre onglets descend sous la
   taille minimale lisible du picto, qui mordrait sur l'onglet precedent. On le
   retire plutot que de le laisser deborder — on retombe simplement sur la nav
   en texte seul. */
@media(min-width:901px) and (max-width:1220px) and (max-height:900px){
    .nav-link .icon-nav{display:none}
    .main-header .header-right{gap:1.5vh}
    .wallet{gap:1.5vh}
    .main-header .wallet-slot{gap:.68vh;font-size:max(11.5px,1.48vh)}
    .main-header .aura-icon-sm{height:2.16vh}
    .main-header .rubis-icon-sm{height:2.27vh}
    .main-header .user-cog{width:4.3vh;height:4.3vh}
    .main-header .user-avatar{width:2.75vh;height:2.75vh}
}
/* Sous 1010 px le mot ne rentre plus sans ecraser la nav : le picto reprend
   la main tout seul (il reste identifiable, et la nav est prioritaire). */
@media(min-width:901px) and (max-width:1010px){
    .main-header .logo-wordmark{display:none}
    .header-live{display:none!important}
}
@media(max-width:900px){
    .main-header{padding:0 14px;height:50px}
    .main-header .logo-link{gap:6px}
    .main-header .logo-img{height:26px}
    .main-header .logo-wordmark{font-size:.98rem;margin-left:0}
    .main-header .header-right{gap:13px}
    .wallet{gap:13px}
    .main-header .wallet-slot{gap:5px;padding:0;font-size:12.5px;height:auto}
    .main-header .aura-icon-sm{height:18px}
    .main-header .rubis-icon-sm{height:19px}
    .main-header .user-cog{width:38px;height:38px}
    .main-header .user-avatar{width:24px;height:24px}
    .main-header .logo-rubis{width:22px;height:22px}
    /* La maquette mobile de D ne garde que soldes + avatar a droite ;
       l'etat du direct est deja porte par la page Live. */
    .header-live{display:none!important}
}
/* Tres petits telephones : le mot sort, le picto suffit (la barre doit rester
   lisible avant d'etre complete). */
@media(max-width:400px){
    .main-header .logo-wordmark{display:none}
}

/* =============================================
   PLUS ULTRA — Objectifs react avec mode bonus
   Sprint 1.29 (11/05/2026)
   ============================================= */

/* ---- Toggle "Mode Plus Ultra" dans les modals GM ---- */
.gm-ultra-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: .88rem;
    font-weight: 700;
    font-family: var(--font-display, inherit);
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s ease;
    box-sizing: border-box;
}
.gm-ultra-toggle:hover {
    background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(245,158,11,.08));
    border-color: rgba(251,191,36,.5);
    color: #fbbf24;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251,191,36,.15);
}
.gm-ultra-toggle.on {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #fbbf24;
    color: #1a1a1a;
    box-shadow: 0 4px 20px rgba(251,191,36,.4), 0 0 0 2px rgba(251,191,36,.2);
    text-shadow: none;
}
.gm-ultra-toggle.on:hover {
    background: linear-gradient(135deg, #fcd34d, #fbbf24);
    transform: translateY(-1px);
}
.gm-ultra-toggle-star {
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(251,191,36,.6));
}
.gm-ultra-toggle.on .gm-ultra-toggle-star {
    filter: drop-shadow(0 0 6px rgba(255,255,255,.8));
    animation: _ultraStarSpin 3s ease-in-out infinite;
}
@keyframes _ultraStarSpin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.15); }
}

/* ---- Bouton "+ Palier Ultra" dans le modal ---- */
.gm-ultra-add-tier {
    padding: 6px 14px;
    border: 1px dashed rgba(251,191,36,.4);
    border-radius: 8px;
    background: rgba(251,191,36,.05);
    color: #fbbf24;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.gm-ultra-add-tier:hover {
    background: rgba(251,191,36,.15);
    border-color: #fbbf24;
    border-style: solid;
}

/* ---- Separateur chevron entre les 2 barres ---- */
.ultra-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 6px;
    animation: _ultraSepPulse 1.8s ease-in-out infinite;
}
.ultra-separator svg {
    filter: drop-shadow(0 0 6px rgba(251,191,36,.6));
}
@keyframes _ultraSepPulse {
    0%, 100% { transform: translateY(0); opacity: .7; }
    50% { transform: translateY(3px); opacity: 1; }
}

/* ---- Barre Ultra (doree avec shine) ---- */
.so-tiers-bar-ultra {
    position: relative;
    animation: _ultraBarReveal .6s cubic-bezier(.4, 0, .2, 1);
    z-index: 999;
}
@keyframes _ultraBarReveal {
    0% { opacity: 0; transform: translateY(-8px) scaleY(.6); }
    60% { opacity: 1; transform: translateY(2px) scaleY(1.05); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

.progress-bar-ultra {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 45%, #fde047 55%, #fbbf24 65%, #f59e0b 100%);
    background-size: 200% 100%;
    box-shadow:
        0 0 14px rgba(251,191,36,.5),
        0 0 30px rgba(251,191,36,.25),
        inset 0 1px 0 rgba(255,255,255,.3);
    animation: _ultraBarShine 2.5s linear infinite;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
@keyframes _ultraBarShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.progress-bar-ultra::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: _ultraBarSweep 3s ease-in-out infinite;
}
@keyframes _ultraBarSweep {
    0% { transform: translateX(-100%); }
    50%, 100% { transform: translateX(200%); }
}
.progress-bar-ultra.progress-ultra-complete {
    background: linear-gradient(90deg, #fbbf24, #fde047, #fbbf24);
    background-size: 200% 100%;
    animation: _ultraBarShine 1.5s linear infinite;
    box-shadow:
        0 0 20px rgba(251,191,36,.7),
        0 0 40px rgba(251,191,36,.4);
}

/* ---- Tiers Ultra (labels, costs, markers) ---- */
.so-tier-cost-ultra {
    color: rgba(251,191,36,.5) !important;
    font-weight: 600;
}
.so-tier-cost-ultra.so-tier-reached-ultra {
    color: #fbbf24 !important;
    opacity: 1 !important;
    text-shadow: 0 0 6px rgba(251,191,36,.4);
}
.so-tier-text-ultra {
    color: rgba(251,191,36,.55) !important;
    font-weight: 700;
}
.so-tier-text-ultra.so-tier-reached-ultra {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(251,191,36,.5);
}
.so-tier-marker-ultra .so-tier-line-ultra {
    background: var(--bg-primary);
    opacity: .8;
}
.so-tiers-bar-ultra.so-tier-reached .so-tier-line-ultra {
    background: #fbbf24;
    box-shadow: 0 0 6px #fbbf24;
}

.so-tiers-bar-normal-done .progress-bar {
    opacity: .85;
}

/* ---- Bandeau "Plus Ultra Debloque !" (dore opaque, texte noir) ---- */
.reached-banner-ultra-unlocked {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1a1a1a !important;
    border: 1px solid #fbbf24 !important;
    box-shadow:
        0 4px 20px rgba(251,191,36,.5),
        0 0 40px rgba(251,191,36,.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    animation: _ultraBannerUnlock .6s cubic-bezier(.4, 0, .2, 1), _ultraBannerPulse 2.4s ease-in-out infinite .6s;
}
.reached-banner-ultra-unlocked svg { stroke: #1a1a1a; }
@keyframes _ultraBannerUnlock {
    0% { opacity: 0; transform: translateY(-14px) scale(.9); }
    60% { opacity: 1; transform: translateY(2px) scale(1.05); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes _ultraBannerPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(251,191,36,.5), 0 0 40px rgba(251,191,36,.25); }
    50% { box-shadow: 0 4px 28px rgba(251,191,36,.7), 0 0 50px rgba(251,191,36,.4); }
}

/* ---- Bandeau "Plus Ultra Atteint !" (arc-en-ciel) ---- */
.reached-banner-ultra-done {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7, #ef4444) !important;
    background-size: 300% 100% !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    box-shadow:
        0 4px 20px rgba(255,255,255,.2),
        0 0 40px rgba(251,191,36,.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
    font-weight: 800 !important;
    animation: _rainbowBannerSlide 4s linear infinite, _ultraBannerUnlock .6s cubic-bezier(.4, 0, .2, 1);
}
.reached-banner-ultra-done svg { stroke: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
@keyframes _rainbowBannerSlide {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ---- Cercle obj-circle en mode Plus Ultra ---- */
.obj-circle-text-ultra {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(251,191,36,.6) !important;
}
.obj-circle-ultra-done .obj-circle-text {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: _rainbowBannerSlide 3s linear infinite;
}

/* ---- Card arc-en-ciel (OPTION A : bordure animee permanente) ---- */
.event-card-ultra-done {
    position: relative;
    border: 2px solid transparent !important;
    background-clip: padding-box;
    animation: _ultraCardGlow 6s ease-in-out infinite;
}
.event-card-ultra-done::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7, #ef4444);
    background-size: 300% 100%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: _rainbowBannerSlide 4s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes _ultraCardGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(251,191,36,.2), 0 0 40px rgba(168,85,247,.1); }
    25% { box-shadow: 0 0 24px rgba(239,68,68,.25), 0 0 50px rgba(245,158,11,.15); }
    50% { box-shadow: 0 0 28px rgba(34,197,94,.25), 0 0 60px rgba(59,130,246,.15); }
    75% { box-shadow: 0 0 24px rgba(168,85,247,.25), 0 0 50px rgba(251,191,36,.15); }
}

.event-card-ultra-done.event-reached {
    border-color: transparent !important;
    box-shadow: none;
}

/* =============================================
   PLUS ULTRA FIX V2 - gap + themes gold & rainbow
   ============================================= */
.ultra-separator { margin: -4px 0 -2px !important; padding: 0; }
.ultra-separator svg { width: 14px !important; height: 14px !important; }
.so-tiers-bar-ultra { margin-top: 0 !important; }

.event-card-ultra-unlocked {
    border: 2px solid #fbbf24 !important;
    background: linear-gradient(135deg, rgba(251,191,36,.06), rgba(245,158,11,.03));
    box-shadow: 0 0 24px rgba(251,191,36,.18) !important;
}
.event-card-ultra-unlocked .event-title {
    color: #fbbf24 !important;
    text-shadow: 0 0 10px rgba(251,191,36,.3);
}
.event-card-ultra-unlocked .obj-circle-text {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(251,191,36,.5) !important;
}
@keyframes _ultraPulseGlow {
    from { filter: drop-shadow(0 0 5px rgba(251,191,36,.5)); }
    to   { filter: drop-shadow(0 0 14px rgba(251,191,36,.95)); }
}
.event-card-ultra-unlocked .btn-contribute {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #1a1a1a !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(251,191,36,.3) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
.event-card-ultra-unlocked .btn-contribute:hover {
    background: linear-gradient(135deg, #fcd34d, #fbbf24) !important;
    box-shadow: 0 6px 20px rgba(251,191,36,.5) !important;
    transform: translateY(-1px);
}

.event-card-ultra-done {
    background: linear-gradient(135deg, rgba(251,191,36,.05), rgba(168,85,247,.04), rgba(59,130,246,.04)) !important;
}
.event-card-ultra-done .event-title {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7, #ef4444);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: _rainbowBannerSlide 4s linear infinite;
}
.event-card-ultra-done .obj-circle-text {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
    color: transparent !important;
    animation: _rainbowBannerSlide 3s linear infinite;
}
@keyframes _circleRainbow {
    0%   { stroke: #ef4444; filter: drop-shadow(0 0 10px rgba(239,68,68,.8)); }
    16%  { stroke: #f59e0b; filter: drop-shadow(0 0 10px rgba(245,158,11,.8)); }
    33%  { stroke: #fbbf24; filter: drop-shadow(0 0 10px rgba(251,191,36,.8)); }
    50%  { stroke: #22c55e; filter: drop-shadow(0 0 10px rgba(34,197,94,.8)); }
    66%  { stroke: #3b82f6; filter: drop-shadow(0 0 10px rgba(59,130,246,.8)); }
    83%  { stroke: #a855f7; filter: drop-shadow(0 0 10px rgba(168,85,247,.8)); }
    100% { stroke: #ef4444; filter: drop-shadow(0 0 10px rgba(239,68,68,.8)); }
}
.event-card-ultra-done .btn-contribute {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7) !important;
    background-size: 300% 100% !important;
    color: #fff !important;
    border: none !important;
    animation: _rainbowBannerSlide 3s linear infinite !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 20px rgba(255,255,255,.12) !important;
}

/* =============================================
   PLUS ULTRA FIX V3 - cercle + preset + shake
   ============================================= */
.event-card-ultra-unlocked .obj-circle-done svg circle:nth-child(2) {
    stroke: #34d399 !important;
    filter: drop-shadow(0 0 6px rgba(52,211,153,.5)) !important;
    animation: none !important;
}
.event-card-ultra-unlocked .obj-circle svg circle:last-child {
    filter: drop-shadow(0 0 10px rgba(251,191,36,.7)) !important;
    animation: _ultraPulseGlow 2s infinite alternate !important;
}

.event-card-ultra-unlocked .obj-circle-text,
.event-card-ultra-unlocked .obj-circle-text-done,
.event-card-ultra-unlocked .obj-circle-done .obj-circle-text {
    color: #fbbf24 !important;
    text-shadow: 0 0 8px rgba(251,191,36,.5) !important;
}

.event-card-ultra-unlocked .preset-btn:hover {
    background: rgba(251,191,36,.1) !important;
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
    box-shadow: 0 6px 15px rgba(251,191,36,.3) !important;
    transform: translateY(-3px) scale(1.05);
}

.event-card-ultra-done .obj-circle svg circle:nth-child(2),
.event-card-ultra-done .obj-circle svg circle:last-child {
    stroke: #fbbf24 !important;
    animation: _circleRainbow 3s linear infinite !important;
    filter: none !important;
}
.event-card-ultra-done .obj-circle svg circle:last-child {
    animation-delay: -1.5s !important;
}
.event-card-ultra-done .obj-circle-text,
.event-card-ultra-done .obj-circle-text-done {
    color: transparent !important;
    text-shadow: none !important;
}

.event-card-ultra-done .preset-btn:hover {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #fbbf24, #22c55e, #3b82f6, #a855f7) !important;
    background-size: 300% 100% !important;
    border-color: transparent !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
    animation: _rainbowBannerSlide 3s linear infinite !important;
    transform: translateY(-3px) scale(1.05);
}

/* ---- SHAKE PROGRESSIF ---- */
@keyframes _ultraShake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(calc(-1 * var(--shake-x, 0px)), var(--shake-y, 0px)) rotate(calc(-1 * var(--shake-r, 0deg))); }
    20% { transform: translate(var(--shake-x, 0px), calc(-1 * var(--shake-y, 0px))) rotate(var(--shake-r, 0deg)); }
    30% { transform: translate(calc(-1 * var(--shake-x, 0px)), calc(-1 * var(--shake-y, 0px))) rotate(0); }
    40% { transform: translate(var(--shake-x, 0px), var(--shake-y, 0px)) rotate(calc(-1 * var(--shake-r, 0deg))); }
    50% { transform: translate(calc(-0.5 * var(--shake-x, 0px)), 0) rotate(var(--shake-r, 0deg)); }
    60% { transform: translate(calc(0.5 * var(--shake-x, 0px)), var(--shake-y, 0px)) rotate(0); }
    70% { transform: translate(0, calc(-1 * var(--shake-y, 0px))) rotate(calc(-0.5 * var(--shake-r, 0deg))); }
    80% { transform: translate(calc(-1 * var(--shake-x, 0px)), 0) rotate(calc(0.5 * var(--shake-r, 0deg))); }
    90% { transform: translate(var(--shake-x, 0px), calc(0.5 * var(--shake-y, 0px))) rotate(0); }
}
.event-card-ultra-unlocked {
    animation: _ultraShake 0.4s linear infinite;
}
.event-card-ultra-done {
    animation: _ultraCardGlow 6s ease-in-out infinite, _ultraShake 0.32s linear infinite;
}

/* ========================================================================
   Sprint 1.35 watch-time — Modal recap au retour (AuraSystem.showWatchRecapModal)
   ======================================================================== */
.watch-recap-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    animation: wrmFadeIn 0.25s ease-out;
}
.watch-recap-overlay.wrm-closing {
    animation: wrmFadeOut 0.25s ease-in forwards;
}
.watch-recap-modal {
    background: linear-gradient(160deg, #1f1730 0%, #2a1a3d 100%);
    border: 2px solid #ff8c1a;
    border-radius: 18px;
    padding: 28px 32px;
    max-width: 460px;
    width: 92vw;
    box-shadow: 0 20px 60px rgba(255, 140, 26, 0.35), 0 0 0 1px rgba(255, 140, 26, 0.15);
    color: #f1ebe1;
    text-align: center;
    animation: wrmPop 0.35s cubic-bezier(.2, 1.4, .5, 1);
}
.wrm-header {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 8px;
}
.wrm-aura-icon {
    width: 48px; height: 48px;
    filter: drop-shadow(0 0 12px rgba(255, 140, 26, 0.7));
    animation: wrmIconPulse 2.2s ease-in-out infinite;
}
.wrm-header h2 {
    margin: 0;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #ffb35a, #ff5c00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1.35;
    text-align: left;
}
.wrm-header h2 strong {
    background: linear-gradient(135deg, #fff0c8, #ffd28a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}
.wrm-detail {
    display: flex; flex-direction: column; gap: 10px;
    margin: 12px 0 18px;
    text-align: left;
}
.wrm-line {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 140, 26, 0.08);
    border-left: 3px solid #ff8c1a;
    border-radius: 8px;
    padding: 10px 14px;
}
.wrm-icon { font-size: 1.25rem; }
.wrm-text { flex: 1; font-size: 0.95rem; color: #f1ebe1; font-weight: 600; }
.wrm-meta { font-size: 0.82rem; color: #a09487; }
.wrm-total {
    font-size: 2.1rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ffd28a, #ff5c00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 16px 0 20px;
    text-shadow: 0 0 24px rgba(255, 140, 26, 0.4);
    letter-spacing: 1px;
}
.wrm-close-btn {
    background: linear-gradient(135deg, #ff8c1a, #ff5500);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 14px rgba(255, 85, 0, 0.4);
}
.wrm-close-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 85, 0, 0.55);
}
.wrm-close-btn:active {
    transform: translateY(0) scale(0.98);
}
@keyframes wrmFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wrmFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes wrmPop {
    0%   { transform: scale(0.85) translateY(20px); opacity: 0; }
    60%  { transform: scale(1.03) translateY(-3px); opacity: 1; }
    100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
@keyframes wrmIconPulse {
    0%, 100% { transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 0 12px rgba(255, 140, 26, 0.7)); }
    50%      { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 20px rgba(255, 140, 26, 1)); }
}
@media (max-width: 520px) {
    .watch-recap-modal { padding: 22px 20px; }
    .wrm-header h2 { font-size: 1.2rem; }
    .wrm-total { font-size: 1.8rem; }
}


/* ============================================================
   Sprint 1.58 quickbuy — modal "Il te manque X rubis"
   (raccourci recharge express, ouvert sur insufficient_rubis)
   ============================================================ */
/* Carte élargie (l'Embedded Checkout Stripe est moins empilé donc moins haut)
   + hauteur bornée au viewport avec scroll interne : la carte ne déborde plus
   jamais en haut/bas (le flex centré de .modal-overlay clippe sinon le haut). */
.modal-card:has(.qb-modal) { max-width: 640px; width: 96%; max-height: min(92vh, 92dvh); overflow-y: auto; padding: 24px 28px; }
@media (max-width: 640px) {
    .modal-card:has(.qb-modal) { width: 100%; max-width: calc(100vw - 12px); padding: 18px 12px; max-height: calc(100dvh - 16px); border-radius: 16px; }
}
.qb-modal { text-align: center; }
.qb-head { margin-bottom: 4px; }
.qb-gem {
    width: auto; height: 52px; object-fit: contain; margin: 0 auto 6px; display: block;
    filter: drop-shadow(0 6px 18px rgba(231,76,60,.5));
    animation: qbGemPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes qbGemPop { from { transform: scale(.35) rotate(-14deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.qb-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-primary); margin: 0 0 4px; }
.qb-missing {
    color: var(--rubis-red); font-weight: 800; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(231,76,60,.35);
}
.qb-sub { font-size: .8rem; color: var(--text-secondary); margin: 0 0 4px; }
.qb-amount-row {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    margin: 12px 0 10px; padding: 12px 16px;
    background: var(--bg-deep); border: 1px solid var(--border); border-radius: 14px;
}
.qb-label { font-size: .7rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); }
.qb-input-wrap { display: flex; align-items: baseline; gap: 8px; }
.qb-input-wrap input {
    width: 140px; text-align: center; font-size: 1.5rem; font-weight: 800;
    font-variant-numeric: tabular-nums; padding: 8px 10px;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-primary); outline: none; transition: border-color .15s, box-shadow .15s;
    font-family: var(--font-display);
}
.qb-input-wrap input:focus { border-color: var(--rubis-red); box-shadow: 0 0 0 3px rgba(231,76,60,.18); }
.qb-input-wrap input[readonly] { opacity: .6; pointer-events: none; }
.qb-unit { font-size: .85rem; font-weight: 600; color: var(--text-secondary); }
.qb-price { font-size: .95rem; color: var(--text-secondary); min-height: 1.3em; }
.qb-price strong { color: var(--text-primary); font-size: 1.05rem; }
.qb-cgv {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; padding: 10px 12px;
    background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px;
    cursor: pointer; font-size: .74rem; color: var(--text-secondary); line-height: 1.5; text-align: left;
}
.qb-cgv input { margin-top: 3px; flex-shrink: 0; }
.qb-cgv a { color: var(--accent); }
.qb-checkout { margin-top: 12px; }
.qb-loading { text-align: center; padding: 20px; }
.qb-loading p { font-size: .85rem; color: var(--text-muted); margin-top: 8px; }
.qb-actions { justify-content: center; gap: 12px; margin-top: 12px; }
/* Pré-montage furtif : le wrap reste EN FLUX (largeur réelle → l'iframe Stripe
   se met en page correctement et charge en arrière-plan) mais hauteur 0 et
   invisible. Retirer la classe = révélation instantanée du formulaire déjà
   chargé. Partagé avec #stripeCheckoutWrap (boutique), d'où les !important
   qui neutralisent son margin-top inline. */
.qb-stealth { height: 0 !important; overflow: hidden !important; opacity: 0; pointer-events: none; margin: 0 !important; padding: 0 !important; border: 0 !important; }
/* Mode paiement : une fois le checkout révélé, on compacte le haut du modal
   pour laisser la hauteur au formulaire Stripe (récap 1 ligne à la place du
   bloc montant + CGV, déjà acceptées à ce stade). */
.qb-recap { display: none; }
.qb-paying .qb-amount-row, .qb-paying .qb-cgv, .qb-paying .qb-sub { display: none; }
.qb-paying .qb-gem { height: 30px; margin-bottom: 2px; animation: none; }
.qb-paying .qb-title { font-size: .95rem; margin-bottom: 2px; }
.qb-paying .qb-recap {
    display: inline-block; margin: 4px auto 0; padding: 5px 14px;
    background: var(--bg-deep); border: 1px solid var(--border); border-radius: 999px;
    font-size: .85rem; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.qb-paying .qb-actions { margin-top: 10px; }
/* ── Sprint 1.61 chatmod M-2 : outils de modération dans le chat ─────────
   Icônes hover (staff), messages purgés (CLEARCHAT/CLEARMSG, visibles par
   tous), lignes système sanctions, mini-modal raison (warn). */
.cc-mod-btns{display:none;align-items:center;gap:2px;margin-right:4px;flex-shrink:0}
@media (hover:hover){.cc-msg:hover .cc-mod-btns{display:inline-flex}}
.cc-mod-btn{background:none;border:none;padding:2px;border-radius:5px;cursor:pointer;color:var(--text-muted);display:inline-flex;line-height:1}
.cc-mod-btn:hover{background:rgba(255,255,255,.08)}
.cc-mod-ban:hover,.cc-mod-del:hover{color:#ff4461}
.cc-mod-to:hover{color:#ff7a3d}
.cc-mod-warn:hover{color:#ffb347}
.cc-msg-purged{opacity:.55}
.cc-purged-text{color:var(--text-muted);font-style:italic}
.cc-mod-sysmsg .cc-system-text{color:#ff7a3d;font-size:.78rem}
.cc-ctx-sep{height:1px;background:rgba(255,255,255,.08);margin:4px 6px}
.cc-ctx-mod .cc-ctx-icon{color:#ff7a3d}
.cc-ctx-danger,.cc-ctx-danger .cc-ctx-icon{color:#ff4461}
.cc-mm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:9500;padding:16px}
.cc-mm-card{width:100%;max-width:340px;background:#14161d;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px}
.cc-mm-title{font-weight:800;color:var(--text-primary);margin-bottom:4px}
.cc-mm-hint{font-size:.78rem;color:var(--text-muted);margin-bottom:10px}
.cc-mm-input{width:100%;padding:9px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.3);color:var(--text-primary);font-size:.85rem;outline:none}
.cc-mm-input:focus{border-color:rgba(255,179,71,.6)}
.cc-mm-btns{display:flex;gap:8px;margin-top:12px}
.cc-mm-btn{flex:1;padding:9px;border-radius:9px;font-weight:700;font-size:.82rem;cursor:pointer;border:1px solid transparent}
.cc-mm-cancel{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--text-secondary)}
.cc-mm-ok{background:rgba(255,179,71,.15);border-color:rgba(255,179,71,.5);color:#ffb347}

/* ── Sprint 1.62 chatmod M-3 : user card (clic pseudo, staff) ── */
.cc-name-mod{cursor:pointer}
.cc-name-mod:hover{text-decoration:underline}
.cc-uc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:9400;padding:16px}
.cc-uc-card{position:relative;width:100%;max-width:400px;max-height:86vh;overflow-y:auto;background:#14161d;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px}
.cc-uc-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text-muted);font-size:1.3rem;cursor:pointer;line-height:1;padding:4px}
.cc-uc-close:hover{color:var(--text-primary)}
.cc-uc-loading{display:flex;justify-content:center;padding:30px}
.cc-uc-err{text-align:center;color:var(--text-muted);padding:24px 8px;font-size:.85rem}
.cc-uc-err a{color:#3ec5ff}
.cc-uc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cc-uc-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.06)}
.cc-uc-avatar-ph{display:block}
.cc-uc-dn{font-size:1.05rem;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-uc-login{font-size:.78rem;color:var(--text-muted)}
.cc-uc-login a{color:#3ec5ff;text-decoration:none}
.cc-uc-badge{padding:2px 9px;border-radius:12px;font-size:.62rem;font-weight:800;letter-spacing:.04em}
.cc-uc-badge-ban{background:rgba(255,68,97,.14);border:1px solid rgba(255,68,97,.45);color:#ff4461}
.cc-uc-badge-to{background:rgba(255,122,61,.14);border:1px solid rgba(255,122,61,.45);color:#ff7a3d}
.cc-uc-meta{display:grid;gap:3px;font-size:.8rem;color:var(--text-secondary);padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);margin-bottom:12px}
.cc-uc-meta strong{color:var(--text-primary)}
.cc-uc-note{color:var(--text-muted);font-size:.74rem}
.cc-uc-sanction{color:#ff7a3d;font-size:.8rem}
.cc-uc-actions{margin-bottom:12px}
.cc-uc-reason{width:100%;padding:8px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.3);color:var(--text-primary);font-size:.82rem;outline:none;margin-bottom:8px}
.cc-uc-reason:focus{border-color:rgba(62,197,255,.5)}
.cc-uc-btnrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;align-items:center}
.cc-uc-btn{padding:7px 11px;border-radius:8px;font-size:.75rem;font-weight:700;cursor:pointer;border:1px solid transparent}
.cc-uc-btn:hover{filter:brightness(1.2)}
.cc-uc-warn{background:rgba(255,179,71,.12);border-color:rgba(255,179,71,.45);color:#ffb347}
.cc-uc-tob{background:rgba(255,122,61,.12);border-color:rgba(255,122,61,.4);color:#ff7a3d}
.cc-uc-ban{background:rgba(255,68,97,.12);border-color:rgba(255,68,97,.4);color:#ff4461}
.cc-uc-unban{background:rgba(78,254,133,.1);border-color:rgba(78,254,133,.35);color:#4efe85}
.cc-uc-custom{width:110px;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.3);color:var(--text-primary);font-size:.78rem;outline:none}
.cc-uc-hist-title{font-size:.78rem;font-weight:700;color:var(--text-secondary);margin-bottom:6px}
.cc-uc-hist-row{font-size:.75rem;color:var(--text-secondary);padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);display:flex;gap:5px;flex-wrap:wrap;align-items:baseline}
.cc-uc-hist-row:last-child{border-bottom:none}
.cc-uc-hist-row strong{color:var(--text-primary)}
.cc-uc-hist-act{font-weight:700;color:#ff7a3d}
.cc-uc-hist-age{margin-left:auto;color:var(--text-muted);font-size:.68rem;white-space:nowrap}

/* ── Sprint 1.62 chatmod M-4 : palette de commandes (/ dans l'input) ── */
.cc-cp{position:absolute;left:8px;right:8px;bottom:100%;margin-bottom:6px;background:#14161d;border:1px solid rgba(255,255,255,.12);border-radius:12px;max-height:260px;overflow-y:auto;z-index:60;box-shadow:0 -6px 24px rgba(0,0,0,.45)}
.cc-cp.hidden{display:none}
.cc-cp-title{font-size:.66rem;color:var(--text-muted);padding:7px 12px 4px;letter-spacing:.03em;text-transform:uppercase}
.cc-cp-item{padding:7px 12px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.cc-cp-item:hover,.cc-cp-item.active{background:rgba(62,197,255,.1)}
.cc-cp-item.active{border-left:2px solid #3ec5ff}
.cc-cp-usage{font-size:.82rem;font-weight:700;color:var(--text-primary);font-family:ui-monospace,Consolas,monospace}
.cc-cp-desc{font-size:.72rem;color:var(--text-muted)}
.cc-cp-hint{padding:9px 12px;display:flex;flex-direction:column;gap:2px}

/* ── Sprint 1.63 chatmod M-6 : overlay outil Sondage (/poll depuis le chat) ── */
.cc-st-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9300;padding:14px}
.cc-st-panel{width:100%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;background:#101321;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden}
.cc-st-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07);font-size:.82rem;font-weight:700;color:var(--text-secondary)}
.cc-st-close{background:none;border:none;color:var(--text-muted);font-size:1.3rem;cursor:pointer;line-height:1;padding:2px 6px}
.cc-st-close:hover{color:var(--text-primary)}
.cc-st-body{overflow-y:auto;padding:14px}
/* === Sprint 1.62 express-pay — paiement 1-clic (quickbuy v2) === */
.qb-express { margin-top: 12px; }
.qb-x-btn {
    position: relative; width: 100%; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 18px 10px; border-radius: 14px;
    background: linear-gradient(160deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
    color: #241703; font-family: var(--font-display);
    box-shadow: 0 0 0 1px rgba(253,230,138,.55), 0 6px 22px rgba(251,191,36,.28), 0 3px 10px rgba(0,0,0,.35);
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.qb-x-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(253,230,138,.8), 0 8px 28px rgba(251,191,36,.4), 0 3px 10px rgba(0,0,0,.35); }
.qb-x-btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
.qb-x-btn:disabled { filter: grayscale(.55) brightness(.75); cursor: not-allowed; }
.qb-x-bolt { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.qb-x-main { font-size: 1rem; font-weight: 800; letter-spacing: .2px; }
.qb-x-main strong { font-size: 1.08rem; }
.qb-x-card { font-size: .72rem; font-weight: 700; opacity: .78; letter-spacing: .4px; }
.qb-x-btn.qb-x-loading .qb-x-bolt { animation: qbXPulse .55s ease-in-out infinite; }
@keyframes qbXPulse { 0%, 100% { transform: translateY(-50%) scale(1); } 50% { transform: translateY(-50%) scale(1.35); } }
.qb-x-note { margin-top: 6px; font-size: .72rem; color: var(--text-muted); }
.qb-paying .qb-express { display: none; }
/* === Sprint 1.63 modal maison — Payment Element + bouton payer or === */
.qb-pay-btn { background: linear-gradient(160deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%); color: #241703; font-weight: 800; border: none; }
.qb-pay-btn:hover:not(:disabled) { filter: brightness(1.07); }
.qb-pay-btn:disabled { filter: grayscale(.55) brightness(.75); cursor: not-allowed; }
.qb-pay-btn.qb-x-loading { animation: qbPayPulse 1s ease-in-out infinite; }
@keyframes qbPayPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.qb-alt { margin-top: 8px; text-align: center; }
.qb-alt a { font-size: .75rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.qb-alt a:hover { color: var(--text-secondary); }
#qbElBox { text-align: left; }

/* ============================================
   Hub du live (bouton chat, remplace points de chaine)
   ============================================ */
.cc-hub{position:fixed;z-index:205;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:epSlideUp .15s ease;overflow:hidden}
.cc-hub.hidden{display:none}
.cc-hub-view.hidden{display:none}
.cc-hub-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.cc-hub-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--text-primary)}
.cc-hub-close{border:none;background:none;color:var(--text-muted);font-size:1.35rem;cursor:pointer;line-height:1;padding:2px 6px}
.cc-hub-close:hover{color:var(--text-primary)}
.cc-hub-head-btns{display:flex;align-items:center;gap:6px}
.cc-hub-cp{border:none;background:none;cursor:pointer;padding:5px;border-radius:var(--radius-sm);display:flex;align-items:center}
.cc-hub-cp:hover{background:var(--bg-input)}
.cc-hub-body{display:flex;flex:1;min-height:0}
.cc-hub-main{flex:1;overflow-y:auto;padding:12px;min-width:0;overscroll-behavior:contain}
.cc-hub-side{width:192px;flex-shrink:0;border-left:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,rgba(231,76,60,.09),rgba(231,76,60,.02))}
.cc-hub-sec{margin-bottom:10px;padding:10px;border-radius:var(--radius-md);border:1px solid var(--border)}
.cc-hub-sec:last-child{margin-bottom:0}
.cc-hub-sec-evt{background:linear-gradient(180deg,rgba(251,191,36,.08),rgba(251,191,36,.02));border-color:rgba(251,191,36,.18)}
.cc-hub-sec-evt .cc-hub-sec-title>span{color:#fbbf24}
.cc-hub-sec-obj{background:linear-gradient(180deg,rgba(59,130,246,.1),rgba(59,130,246,.02));border-color:rgba(59,130,246,.2)}
.cc-hub-sec-obj .cc-hub-sec-title>span{color:#60a5fa}
.cc-hub-sec-title{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:8px;font-weight:700}
.cc-hub-sec-link{border:none;background:none;color:var(--accent);font-size:.72rem;cursor:pointer;padding:0;text-transform:none;letter-spacing:0;font-weight:600}
.cc-hub-sec-link:hover{color:var(--accent-hover)}
.cc-hub-loading{display:flex;justify-content:center;padding:14px}
.cc-hub-empty{padding:10px;font-size:.8rem;color:var(--text-muted);text-align:center}
/* Objectifs : banniere + % */
/* Objectifs : vignettes carrees, meme grille que les events (09/08/2026) */
.cc-hub-objs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cc-hub-obj{display:block;position:relative;aspect-ratio:1/1;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background-color:var(--bg-card);background-size:cover;background-position:center;overflow:hidden;padding:0;text-align:left;transition:border-color .15s,transform .15s}
.cc-hub-obj:hover{border-color:#60a5fa;transform:translateY(-1px)}
.cc-hub-obj.reached{border-color:rgba(52,211,153,.5)}
.cc-hub-obj-pct{position:absolute;left:0;right:0;top:12px;text-align:center;font-size:1.5rem;line-height:1;font-weight:800;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.95);font-family:var(--font-display)}
.cc-hub-obj.reached .cc-hub-obj-pct{color:var(--success)}
.cc-hub-obj-ov{position:absolute;left:0;right:0;bottom:7px;padding:0 7px}
.cc-hub-obj-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.72rem;font-weight:700;color:#fff;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.cc-hub-obj-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.14)}
.cc-hub-obj-bar>span{display:block;height:100%;background:var(--gradient-rubis)}
.cc-hub-obj.reached .cc-hub-obj-bar>span{background:var(--success)}
/* Events : grille de cards carrees, banniere en fond */
.cc-hub-evts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.cc-hub-evt-card{position:relative;aspect-ratio:1/1;border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--bg-card);background-size:cover;background-position:center;overflow:hidden;padding:0;cursor:pointer;transition:border-color .15s,transform .15s}
.cc-hub-evt-card:hover{border-color:#fbbf24;transform:translateY(-1px)}
.cc-hub-evt-init{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%);font-size:1.7rem;font-weight:800;font-family:var(--font-display)}
.cc-hub-evt-ov{position:absolute;left:0;right:0;bottom:0;padding:6px 7px;display:flex;flex-direction:column;gap:3px;text-align:left}
.cc-hub-evt-name{font-size:.72rem;font-weight:700;color:#fff;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.cc-hub-evt-costs{display:flex;gap:7px;flex-wrap:wrap}
.cc-hub-cost{display:flex;align-items:center;gap:3px;font-size:.7rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85)}
.cc-hub-cost img{width:13px;height:13px;object-fit:contain}
/* Vue detaillee objectif */
.cc-hub-back{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:.8rem;margin-bottom:10px;padding:0;font-weight:600}
.cc-hub-back:hover{color:var(--text-primary)}
.cc-hub-dt-banner{height:110px;border-radius:var(--radius-sm);background-size:cover;background-position:center;margin-bottom:10px;border:1px solid var(--border)}
.cc-hub-dt-title{font-size:1.05rem;font-weight:800;margin-bottom:4px;color:var(--text-primary);font-family:var(--font-display)}
.cc-hub-dt-desc{font-size:.82rem;color:var(--text-secondary);margin-bottom:10px;white-space:pre-wrap;line-height:1.5}
.cc-hub-dt-row{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.cc-hub-dt-pct{font-size:2rem;font-weight:800;line-height:1;color:var(--text-primary);font-family:var(--font-display)}
.cc-hub-dt-pct.reached{color:var(--success)}
.cc-hub-dt-nums{font-size:.85rem;color:var(--text-secondary)}
.cc-hub-dt-bar{height:8px;background:var(--bg-input);border-radius:4px;overflow:hidden;margin-bottom:10px}
.cc-hub-dt-bar>span{display:block;height:100%;background:var(--gradient-rubis);border-radius:4px}
.cc-hub-dt-meta{font-size:.76rem;color:var(--text-muted);margin-bottom:12px}
.cc-hub-dt-go{width:100%}
/* Bloc de contribution du detail objectif (Hub). Ces classes n'avaient JAMAIS
   ete stylees : l'image de monnaie s'affichait donc a sa taille naturelle
   (rubis geant) et le champ + les presets etaient bruts. */
.cc-hub-ct{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.cc-hub-ct-row{display:flex;align-items:center;gap:8px}
.cc-hub-ct-row img{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.cc-hub-ct-row input{flex:1;min-width:0;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:.9rem;outline:none}
.cc-hub-ct-row input:focus{border-color:var(--accent)}
.cc-hub-ct-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cc-hub-ct-presets button{padding:9px 4px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-weight:700;font-size:.8rem;cursor:pointer;transition:border-color .15s}
.cc-hub-ct-presets button:hover{border-color:var(--accent)}
.cc-hub-ct-presets button:active{background:var(--bg-card-hover)}
/* Le bloc message vocal vient de pages/objectifs/style.css, qui n'est charge
   qu'en preload asynchrone hors de la page Objectifs : filet de securite pour
   qu'il ne s'affiche jamais brut dans le Hub. */
.cc-hub-ct .tts-contrib-section{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm)}
.cc-hub-ct .tts-contrib-section.hidden{display:none}
.cc-hub-ct .tts-contrib-header{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-secondary)}
.cc-hub-ct .tts-contrib-header svg{width:16px;height:16px;flex-shrink:0}
.cc-hub-ct .tts-message-wrap{position:relative}
.cc-hub-ct .tts-message-input{width:100%;box-sizing:border-box;min-height:60px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:.82rem;resize:vertical;outline:none}
.cc-hub-ct .tts-char-counter{position:absolute;right:8px;bottom:6px;font-size:.68rem;color:var(--text-muted)}
/* Rail lateral recharge express (fond teinte rubis) */
.cc-hub-side-title{display:flex;align-items:center;gap:6px;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--rubis-red);font-weight:700}
.cc-hub-qb{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cc-hub-qb-btn{padding:9px 4px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-weight:700;font-size:.8rem;cursor:pointer;transition:border-color .15s}
.cc-hub-qb-btn:hover{border-color:var(--rubis-red)}
.cc-hub-qb-custom{display:flex;gap:6px}
.cc-hub-qb-custom input{flex:1;min-width:0;padding:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.8rem}
.cc-hub-qb-go{padding:8px 12px;background:var(--gradient-rubis);border:none;border-radius:var(--radius-sm);color:#fff;font-weight:700;font-size:.8rem;cursor:pointer}
/* Colonne « gagner sa monnaie » du hub du live (12/08/2026) : remplace la
   grille de recharge chez un createur dont la monnaie ne s'achete pas. Deux
   equations + un bouton, meme gabarit que la grille qu'elle remplace. */
.cc-hub-earn{display:flex;flex-direction:column;gap:6px}
.cc-hub-earn-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.82rem}
.cc-hub-earn-row b{font-weight:700}
.cc-hub-earn-row i{font-style:normal;color:var(--text-muted)}
.cc-hub-earn-row span{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-family:var(--font-display)}
.cc-hub-earn-row .rubis-icon-sm{width:auto;height:16px}
.cc-hub-earn-btn{display:block;margin-top:8px;text-align:center;text-decoration:none}
/* Mobile : bottom sheet plein ecran, events en premier, recharge en bas */
@media(max-width:900px){
    .cc-hub{left:0!important;right:0!important;width:100%!important;bottom:calc(56px + env(safe-area-inset-bottom))!important;height:72vh!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
    .cc-hub-body{flex-direction:column;overflow-y:auto}
    .cc-hub-main{overflow:visible;flex:none}
    .cc-hub-side{width:auto;border-left:none;border-top:1px solid var(--border)}
}
/* Paysage plein ecran : colonne chat */
body.is-live-landscape .cc-hub{left:auto!important;right:0!important;width:var(--chat-w)!important;bottom:0!important;height:75vh!important;border-radius:var(--radius-lg) 0 0 0}
body.is-live-landscape .cc-hub-body{flex-direction:column;overflow-y:auto}
body.is-live-landscape .cc-hub-main{overflow:visible;flex:none}
body.is-live-landscape .cc-hub-side{width:auto;border-left:none;border-top:1px solid var(--border)}

/* ═══════════════════════════════════════════════════════════════════
   Boutons icône du header (09/08/2026)
   ═══════════════════════════════════════════════════════════════════
   - cloche  : historique des notifications push, à gauche des soldes
   - engrenage : réglages, dernier élément de la barre (il vivait avant
     en anneau tournant autour de l'avatar — retiré à la demande d'Aymen)
   Cotes en vh comme tout le header en desktop (cf. bloc « direction D » :
   en px fixes la barre paraît deux fois plus fine sur un 4K), en px sous
   901 px où le header est lui-même en px. */
.hdr-icon-btn{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:3.9vh;height:3.9vh;padding:0;border:none;border-radius:50%;background:none;color:var(--hd-nav,rgba(255,255,255,.62));cursor:pointer;transition:color .18s,background .18s}
.hdr-icon-btn svg{width:2.5vh;height:2.5vh;display:block}
.hdr-icon-btn:hover{color:var(--hd-nav-on,#fff);background:rgba(255,255,255,.07)}
[data-theme="light"] .hdr-icon-btn:hover{background:rgba(0,0,0,.06)}
.hdr-icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* L'engrenage tourne d'un quart de tour au survol : le seul rappel de
   l'ancien anneau, sans animation permanente. */
.hdr-cog-btn svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.hdr-cog-btn:hover svg{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.hdr-cog-btn:hover svg{transform:none}}
/* Mobile : la barre gagne 2 boutons (cloche + engrenage) sur 50 px de haut et
   ~330 px utiles. On resserre l'ecart de .header-right pour que soldes +
   avatar + les 2 boutons tiennent encore sur un 320 px. */
@media(max-width:900px){
    .hdr-icon-btn{width:30px;height:30px}
    .hdr-icon-btn svg{width:18px;height:18px}
    .main-header .header-right{gap:9px}
    .main-header .wallet{gap:9px}
}
@media(max-width:400px){
    .hdr-icon-btn{width:28px;height:28px}
    .hdr-icon-btn svg{width:17px;height:17px}
    .main-header .header-right{gap:7px}
    .main-header .wallet{gap:7px}
}

/* Contenu du panneau « Notifications reçues » */
.ph-empty{padding:26px 18px;text-align:center;font-size:.84rem;color:var(--text-muted);line-height:1.5}
.ph-item{display:block;padding:12px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.ph-item:last-child{border-bottom:none}
a.ph-item:hover{background:var(--bg-input)}
.ph-top{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.ph-title{flex:1;min-width:0;font-size:.86rem;font-weight:700;color:var(--text-primary);line-height:1.3}
.ph-time{flex:0 0 auto;font-size:.68rem;color:var(--text-muted);white-space:nowrap}
.ph-body{font-size:.79rem;color:var(--text-secondary);line-height:1.45;margin:0}
.ph-cat{display:inline-block;margin-top:6px;padding:1px 8px;border-radius:99px;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-glow);color:var(--accent)}