/* ArenaLive CM — feuille de style principale de l'application.
 *
 * Ce fichier était jusqu'ici un bloc de style intégré à index.html.
 * Il en a été extrait tel quel, sans une seule modification de règle : même
 * contenu, même ordre, donc exactement la même cascade qu'avant.
 *
 * Il reste chargé APRÈS arena-ui.css, comme auparavant.
 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0D0F14;--bg2:#13161E;--bg3:#1A1E2A;
  --gold:#F5A623;--gold2:#e8951f;--purple:#7C3AED;
  --green:#10B981;--red:#EF4444;--blue:#3B82F6;--cyan:#06B6D4;--orange:#F97316;
  --text:#E8E6E1;--text2:#9CA3AF;--text3:#6B7280;
  --border:rgba(255,255,255,0.08);--card:rgba(255,255,255,0.04);
  --r:12px;--rl:20px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;overflow-x:clip}
h1,h2,h3,h4{font-family:'Syne',sans-serif}
a{color:inherit;text-decoration:none}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(13,15,20,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);height:64px}
.nav.scrolled{background:rgba(13,15,20,.99)}
.nav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:0 1.25rem;height:100%}
.logo{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:800;display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;flex-shrink:0}
.logo-gold{color:var(--gold)}
.nav-links{display:flex;gap:2px;flex:1}
.nl{padding:6px 10px;border-radius:8px;font-size:.82rem;font-weight:500;color:var(--text2);cursor:pointer;transition:all .2s;white-space:nowrap;user-select:none}
.nl:hover{color:var(--text);background:var(--card)}
.nav-right{display:flex;gap:7px;margin-left:auto;align-items:center;flex-shrink:0}
.user-pill{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:30px;padding:5px 13px 5px 7px;cursor:pointer;transition:all .2s}
.user-pill:hover{border-color:var(--gold)}
.user-av{width:28px;height:28px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#000;flex-shrink:0}
.user-name{font-size:.78rem;font-weight:600;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-rank{font-size:.67rem;color:var(--text2)}
.pts-pill{display:flex;align-items:center;gap:5px;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);border-radius:20px;padding:4px 10px;font-size:.76rem;font-weight:700;color:var(--gold);cursor:pointer;white-space:nowrap}
.pts-pill:hover{background:rgba(245,166,35,.18)}

/* ── NAV GROUPS (Phase 1 — architecture par intention : Jouer / Compétition / Communauté / Profil) ──
   Purement présentationnel : chaque lien appelle goPage('<id existant>'), aucune page ni route n'est créée. */
.nav-group{position:relative}
.nav-group-trigger{display:flex;align-items:center;gap:4px}
.nav-group-trigger:after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4.5px solid currentColor;opacity:.55;margin-left:1px;transition:transform .15s ease}
.nav-group.open .nav-group-trigger:after{transform:rotate(180deg)}
.nl.active{color:var(--gold);background:rgba(245,166,35,.08)}
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:210}
.nav-group.open .nav-dropdown{opacity:1;visibility:visible;transform:none}
.ndl{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:.82rem;color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .15s}
.ndl:hover{background:var(--card);color:var(--text)}
.ndl.active{color:var(--gold)}
.ndl .ndl-ic{font-size:.9rem;width:1.1rem;text-align:center;flex-shrink:0}
@media(hover:hover){.nav-group:hover .nav-dropdown{opacity:1;visibility:visible;transform:none}.nav-group:hover .nav-group-trigger:after{transform:rotate(180deg)}}

/* ── BOTTOM NAV — quatre intentions, toutes accessibles en un geste ── */
/* V109 — barre flottante : décollée du bord (et de la barre d'accueil du
   téléphone), légèrement translucide avec flou, entrée en glissant. */
.bottom-nav{display:none;position:fixed;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));z-index:205;background:rgba(19,22,30,.78);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.45);padding:4px 6px;transition:transform .28s ease,opacity .28s ease;animation:bnIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes bnIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* Se masque en défilant vers le bas (plus d'espace pour lire le contenu),
   revient dès qu'on remonte, même de quelques pixels — comportement standard
   des barres de navigation mobiles. Piloté par updateBottomNavOnScroll() plus
   bas ; ne s'applique qu'à la bottom nav (display:none hors mobile, donc sans
   effet sur desktop). */
.bottom-nav.bn-hidden{transform:translateY(140%);opacity:0}
@media(prefers-reduced-motion:reduce){.bottom-nav{transition:none;animation:none}.bn-item .bn-ic{transition:none}}
.bn-row{display:flex;justify-content:space-around;align-items:stretch;max-width:640px;margin:0 auto}
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;color:var(--text2);font-family:'Inter',sans-serif;font-size:.62rem;font-weight:600;padding:6px 4px;flex:1;cursor:pointer;border-radius:10px;transition:color .15s}
.bn-item .bn-ic{font-size:1.15rem;line-height:1;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.bn-item.active{color:var(--gold)}
.bn-item.active .bn-ic{transform:translateY(-2px) scale(1.08)}
.bn-item:active{background:var(--card)}

/* ── GROUP TABS (fil d'onglets entre pages sœurs d'un même groupe : Compétition, Communauté) ── */
.group-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 1.1rem}
.gt-tab{background:var(--card);border:1px solid var(--border);color:var(--text2);padding:6px 13px;border-radius:30px;cursor:pointer;font-size:.79rem;font-weight:500;font-family:'Inter',sans-serif;transition:all .2s}
.gt-tab.active{background:var(--gold);color:#000;border-color:var(--gold);font-weight:700}
.gt-tab:hover:not(.active){color:var(--text);border-color:rgba(255,255,255,.18)}

/* NOTIF */
.notif-btn{position:relative;background:var(--bg3);border:1px solid var(--border);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:all .2s;flex-shrink:0}
.notif-btn:hover{border-color:var(--gold)}
.notif-badge{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font-size:.55rem;font-weight:700;min-width:16px;height:16px;border-radius:10px;display:none;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--bg)}
.notif-badge.show{display:flex}
.notif-panel{position:fixed;top:70px;right:1.25rem;width:340px;max-height:480px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);z-index:300;display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:nIn .2s ease}
.notif-panel.open{display:flex}
@keyframes nIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.notif-header{padding:.85rem 1.1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.notif-header h4{font-size:.88rem;font-weight:700}
.notif-list{overflow-y:auto;flex:1}
.notif-item{display:flex;gap:.6rem;padding:.7rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .2s;align-items:flex-start}
.notif-item:hover{background:var(--card)}
.notif-item.unread{background:rgba(245,166,35,.04)}
.notif-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.notif-text{flex:1;min-width:0}
.notif-msg{font-size:.79rem;line-height:1.5;font-weight:500}
.notif-time{font-size:.67rem;color:var(--text3);margin-top:2px}
.notif-empty{padding:2rem;text-align:center;color:var(--text2);font-size:.82rem}

/* MOB */
/* Bouton ☰ mobile — agrandi à une cible tactile de 44×44px (norme d'accessibilité
   iOS/Material ; les 3 traits nus sur fond transparent d'origine mesuraient
   environ 34×28px et étaient difficiles à viser précisément) et doté d'un fond
   + bordure comme .notif-btn juste à côté, pour que le bouton se voie
   clairement comme tel plutôt que comme 3 traits flottants. */
.hb{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;cursor:pointer;padding:0;flex-shrink:0;transition:border-color .2s}
.hb:active{border-color:var(--gold)}
.hb span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px}
.mob-backdrop{display:none;position:fixed;inset:64px 0 0 0;background:rgba(0,0,0,.42);z-index:198;opacity:0;transition:opacity .25s ease}
.mob-backdrop.open{display:block;opacity:1}
.mob-menu{position:fixed;top:64px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);padding:.5rem 1rem 1rem;z-index:199;display:flex;flex-direction:column;gap:4px;max-height:80vh;overflow-y:auto;transform:translateY(-14px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s ease,opacity .22s ease,visibility .25s}
.mob-menu.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.mob-menu .nl{font-size:.9rem;padding:9px 14px}
.mob-menu-handle{width:38px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 6px}
.mob-menu-header{display:flex;justify-content:flex-end;margin:-4px -6px 2px 0}
.mob-menu-close{background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.2rem;padding:4px 9px;line-height:1}

/* GAME PLAYER */
.game-player-overlay{position:fixed;inset:0;z-index:1000;background:#000;display:none;flex-direction:column}
.game-player-overlay.open{display:flex}
.game-topbar{height:52px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.75rem;padding:0 1rem;flex-shrink:0}
.game-topbar h3{font-size:.9rem;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-timer{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;color:var(--gold)}
.game-cost-badge{background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.25);border-radius:20px;padding:3px 10px;font-size:.76rem;font-weight:700;color:var(--gold)}
/* Bouton plein écran du lecteur de jeu — générique, ajouté à tous les
   jeux internes (pas seulement le billard) : agrandit la zone de jeu via
   l'API Fullscreen native du navigateur, aucune dépendance externe. Masqué
   automatiquement (voir toggleGameFullscreen()) sur les navigateurs qui ne
   supportent pas l'API sur un élément quelconque (ex. Safari iOS). */
.game-fs-btn{background:none;border:1px solid var(--border);color:var(--text2);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:.85rem;line-height:1;flex-shrink:0;display:flex;align-items:center}
.game-fs-btn:hover{border-color:var(--gold);color:var(--gold)}
.game-iframe-wrap{flex:1;position:relative;overflow:hidden}
.game-iframe-wrap iframe{width:100%;height:100%;border:none;position:absolute;inset:0}
.game-player-overlay.awaiting-proof .game-iframe-wrap iframe{pointer-events:none}
.game-player-overlay.awaiting-proof .game-iframe-wrap::after{content:'📸 Résultat déclaré — preuve en attente';position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;background:rgba(8,10,18,.9);border:1px solid var(--gold);color:var(--gold);padding:7px 12px;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.game-bottombar{background:var(--bg2);border-top:1px solid var(--border);padding:.75rem 1rem;display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;flex-shrink:0}
.game-bottombar-info{flex:1;font-size:.78rem;color:var(--text2);min-width:0}
.arena-live-call{position:fixed;z-index:1100;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:calc(100vw - 24px);padding:8px;background:#111827f5;color:#fff;border:1px solid #ffffff2b;border-radius:16px;box-shadow:0 12px 40px #0009;backdrop-filter:blur(12px)}
.arena-live-call__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.arena-live-call strong{padding:0 4px;font-size:.82rem}.arena-live-call button{min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:#334155;color:#fff;font:800 .78rem system-ui;cursor:pointer}.arena-live-call button.danger{background:#991b1b}.arena-live-call button:focus-visible{outline:3px solid #facc15;outline-offset:2px}
@media(max-width:420px){.arena-live-call{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));max-width:none}.arena-live-call__row{display:grid;grid-template-columns:minmax(0,1fr) auto auto}.arena-live-call strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(orientation:landscape) and (max-height:420px){.arena-live-call{right:max(6px,env(safe-area-inset-right));bottom:max(6px,env(safe-area-inset-bottom));padding:5px}.arena-live-call button{min-height:36px;padding:5px 9px}}
/* Correctif — téléphone tourné en paysage : hauteur d'écran très réduite,
   donc on compacte l'entête/pied du lecteur de jeu externe pour laisser un
   maximum de hauteur au jeu lui-même (aucun changement en portrait/desktop). */
@media (orientation:landscape) and (max-height:500px){
  .game-topbar{height:34px;gap:.5rem;padding:0 .6rem}
  .game-topbar h3{font-size:.75rem}
  .game-topbar>button{font-size:.72rem;padding:2px}
  .game-timer{font-size:.85rem}
  .game-cost-badge{padding:2px 7px;font-size:.68rem}
  .game-fs-btn{padding:3px 7px;font-size:.75rem}
  .game-bottombar{padding:.35rem .6rem;gap:.4rem}
  .game-bottombar-info{display:none}
  /* Le bouton "Poster mon score" (et tout autre bouton du pied) restait à
     sa taille normale (padding 10px 20px) même une fois l'entête compacté
     — sur une hauteur de paysage très réduite, ça repoussait encore trop
     de hauteur utile hors du jeu. Compacté ici sans toucher .bp/.bg
     ailleurs dans le site (portrait/desktop). */
  .game-bottombar .bp,.game-bottombar .bg{padding:.4rem .75rem;font-size:.72rem}
}
@media (orientation:landscape) and (max-height:560px){
  .game-player-overlay.billard-focus .game-hud{display:none!important}
  .game-player-overlay.billard-focus .game-iframe-wrap{position:absolute;inset:0;width:100%;height:100%}
}

/* CONFIRM DEBIT MODAL */
.debit-confirm{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:1.75rem;width:100%;max-width:380px;animation:mIn .2s ease}
.debit-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.85rem}
.debit-row:last-child{border-bottom:none}
.debit-label{color:var(--text2)}

/* CHATBOT */
.chatbot-btn{position:fixed;bottom:1.5rem;left:1.5rem;z-index:400;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 4px 20px rgba(124,58,237,.4);transition:all .2s}
.chatbot-btn:hover{transform:scale(1.08);box-shadow:0 8px 30px rgba(124,58,237,.5)}
/* V98 — la bulle d'aide garde sa place, mais ne gêne plus : elle glisse hors
   de l'écran pendant qu'on descend la page, revient dès qu'on remonte ou
   qu'on s'arrête (arena-app.js), et disparaît derrière une fenêtre, le menu,
   les notifications ou un jeu. */
.chatbot-btn.cb-hidden,
body:has(.moverlay.open) .chatbot-btn,body:has(.mob-menu.open) .chatbot-btn,body:has(.notif-panel.open) .chatbot-btn,body:has(.game-player-overlay.open) .chatbot-btn{transform:translateX(-160%);opacity:0;pointer-events:none}
.chatbot-btn{transition:transform .25s ease,opacity .25s ease,box-shadow .2s}
.chatbot-btn .cb-badge{position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff;font-size:.55rem;font-weight:700;min-width:16px;height:16px;border-radius:10px;display:none;align-items:center;justify-content:center;padding:0 3px}
.chatbot-btn .cb-badge.show{display:flex}
.chatbot-panel{position:fixed;bottom:5.5rem;left:1.5rem;width:330px;max-height:480px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);z-index:400;display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:nIn .2s ease}
.chatbot-panel.open{display:flex}
.cb-header{background:linear-gradient(135deg,var(--purple),var(--blue));padding:.85rem 1rem;display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.cb-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.cb-title{flex:1}
.cb-title h4{font-size:.88rem;font-weight:700;color:#fff}
.cb-title p{font-size:.7rem;color:rgba(255,255,255,.7)}
.cb-messages{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.cb-msg{max-width:85%;padding:.55rem .8rem;border-radius:12px;font-size:.8rem;line-height:1.5}
.cb-msg.bot{background:var(--bg3);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:3px}
.cb-msg.user{background:var(--purple);color:#fff;align-self:flex-end;border-bottom-right-radius:3px}
.cb-quick{padding:.5rem .75rem;display:flex;flex-wrap:wrap;gap:.35rem;border-top:1px solid var(--border);flex-shrink:0}
.cb-quick-btn{background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:.72rem;font-weight:500;cursor:pointer;color:var(--text2);transition:all .2s;font-family:'Inter',sans-serif}
.cb-quick-btn:hover{border-color:var(--purple);color:var(--purple)}
.cb-input-wrap{padding:.6rem .75rem;border-top:1px solid var(--border);display:flex;gap:.4rem;flex-shrink:0}
.cb-input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:7px 12px;color:var(--text);font-family:'Inter',sans-serif;font-size:.8rem}
.cb-input:focus{outline:none;border-color:var(--purple)}
.cb-send{background:var(--purple);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;color:#fff}

/* BTNS */
.bp{background:var(--gold);color:#000;font-weight:600;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:.875rem;transition:all .2s;white-space:nowrap}
.bp:hover:not(:disabled){background:var(--gold2);transform:translateY(-1px)}
.bp:disabled{opacity:.45;cursor:not-allowed;transform:none}
.bp.lg{padding:13px 26px;font-size:1rem;border-radius:10px}
.bg{background:transparent;color:var(--text);border:1px solid var(--border);padding:10px 20px;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.875rem;font-weight:500;transition:all .2s;white-space:nowrap}
.bg:hover{background:var(--card)}
.bg.lg{padding:13px 26px;font-size:1rem;border-radius:10px}
.btn-game{background:transparent;color:var(--gold);border:1px solid var(--gold);padding:7px 14px;border-radius:8px;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .2s;font-family:'Inter',sans-serif}
.btn-game:hover{background:var(--gold);color:#000}
.btn-danger{background:rgba(239,68,68,.12);color:var(--red);border:1px solid rgba(239,68,68,.2);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:.8rem;font-family:'Inter',sans-serif;transition:all .2s}
.btn-premium{background:linear-gradient(135deg,var(--purple),#4f46e5);color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:700;font-family:'Inter',sans-serif;transition:all .2s}
.btn-premium:hover{opacity:.9;transform:translateY(-1px)}

/* FORM */
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:.72rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.38rem}
.fg input,.fg select,.fg textarea{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-family:'Inter',sans-serif;font-size:.875rem;transition:border-color .2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--gold)}
.fg input.err,.fg select.err{border-color:var(--red)!important}
.ferr{font-size:.72rem;color:var(--red);margin-top:.25rem;display:none}.ferr.show{display:block}
.fg select option{background:var(--bg2)}
.fg textarea{resize:vertical;min-height:75px}

/* PAGES */
.page{display:none;padding-top:64px}.page.active{display:block}
.ph{padding:3.5rem 1.25rem 2rem;background:linear-gradient(180deg,var(--bg2),var(--bg));border-bottom:1px solid var(--border)}
.ph h1{font-size:clamp(1.75rem,5vw,3rem);margin:.5rem 0}
.ph p{color:var(--text2);max-width:500px;margin-top:.5rem;font-size:.9rem}
.ph .group-tabs{margin-top:1rem}
.container{max-width:1280px;margin:0 auto}
.sec{padding:3.5rem 1.25rem}.sec-dark{background:var(--bg2)}
.sh{text-align:center;margin-bottom:2.25rem}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.sh h2{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:800}
.sh p{color:var(--text2);max-width:440px;margin:.5rem auto 0;line-height:1.7;font-size:.9rem}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:7rem 1.25rem 4rem}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.15}
.o1{width:500px;height:500px;background:var(--purple);top:-100px;right:-100px;animation:flt 8s ease-in-out infinite}
.o2{width:400px;height:400px;background:var(--gold);bottom:-150px;left:-100px;animation:flt 10s ease-in-out infinite reverse}
@keyframes flt{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.05)}}
.hero-content{position:relative;z-index:1;max-width:660px}
.hero-badge{display:inline-block;background:rgba(245,166,35,.15);border:1px solid rgba(245,166,35,.3);color:var(--gold);padding:5px 12px;border-radius:20px;font-size:.75rem;font-weight:600;margin-bottom:1rem}
.hero-title{font-size:clamp(2.2rem,6vw,4.2rem);font-weight:800;line-height:1.06;margin-bottom:1rem}
.gt{background:linear-gradient(135deg,var(--gold),#FF6B35);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:.95rem;color:var(--text2);line-height:1.7;max-width:500px;margin-bottom:1.75rem}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem}
.launch-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:10px;padding:.5rem .9rem;font-size:.77rem}
.ldot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.step{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:1.5rem 1.3rem;position:relative;transition:all .2s}
.step:hover{border-color:rgba(245,166,35,.3);transform:translateY(-4px)}
.snum{font-family:'Syne',sans-serif;font-size:3rem;font-weight:800;color:rgba(245,166,35,.1);position:absolute;top:.75rem;right:1rem}
.sicon{font-size:1.5rem;margin-bottom:.55rem}
.step h3{font-size:.92rem;font-weight:700;margin-bottom:.25rem}
.step p{font-size:.81rem;color:var(--text2);line-height:1.6}

/* JEUX */
.games-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.gtab{background:var(--card);border:1px solid var(--border);color:var(--text2);padding:6px 13px;border-radius:30px;cursor:pointer;font-size:.8rem;font-weight:500;font-family:'Inter',sans-serif;transition:all .2s}
.gtab.active{background:var(--gold);color:#000;border-color:var(--gold)}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem}
.gc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:all .25s;display:flex;flex-direction:column;cursor:pointer}
.gc:hover{transform:translateY(-4px);border-color:rgba(245,166,35,.4);box-shadow:0 12px 35px rgba(0,0,0,.4)}
.gimg{height:90px;display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative}
.g-type-badge{position:absolute;top:7px;right:7px;padding:2px 7px;border-radius:20px;font-size:.59rem;font-weight:700}
.g-play-direct{background:rgba(16,185,129,.25);color:var(--green)}
.g-redirect{background:rgba(249,115,22,.25);color:#fb923c}
.ginfo{padding:.9rem;flex:1;display:flex;flex-direction:column;gap:.35rem}
.ginfo h3{font-size:.87rem;font-weight:700}
.gmeta{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.gtag{background:rgba(124,58,237,.2);color:#a78bfa;border:1px solid rgba(124,58,237,.3);padding:2px 7px;border-radius:20px;font-size:.67rem;font-weight:600}
.gcost{background:rgba(245,166,35,.1);color:var(--gold);border:1px solid rgba(245,166,35,.2);padding:2px 7px;border-radius:20px;font-size:.67rem;font-weight:700}

/* TOURNOIS */
.fbar{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.25rem}
.fb{background:var(--card);border:1px solid var(--border);color:var(--text2);padding:6px 14px;border-radius:30px;cursor:pointer;font-size:.8rem;font-weight:500;font-family:'Inter',sans-serif;transition:all .2s}
.fb:hover,.fb.active{background:var(--gold);color:#000;border-color:var(--gold)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:.9rem}
.tc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:all .25s}
.tc:hover{transform:translateY(-3px);border-color:rgba(245,166,35,.25)}
.tch{padding:.9rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.tgbadge{display:inline-block;padding:2px 8px;background:rgba(124,58,237,.2);color:#a78bfa;border-radius:20px;font-size:.67rem;font-weight:600;margin-bottom:.25rem}
.ttitle{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700}
.tstatus{padding:2px 8px;border-radius:20px;font-size:.66rem;font-weight:700;white-space:nowrap;flex-shrink:0}
.s-open{background:rgba(16,185,129,.2);color:var(--green)}.s-complet{background:rgba(239,68,68,.2);color:var(--red)}
.s-gray{background:rgba(148,163,184,.2);color:#94a3b8}.s-purple{background:rgba(124,58,237,.2);color:#a78bfa}.s-blue{background:rgba(59,130,246,.2);color:var(--blue)}.s-green{background:rgba(16,185,129,.2);color:var(--green)}
.tc.tc-readonly{opacity:.6}
.tcb{padding:.9rem}
.tst{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.25rem;margin-bottom:.8rem}
.tsv{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;color:var(--gold);text-align:center}
.tsl{font-size:.66rem;color:var(--text3);text-align:center;margin-top:1px}
.progw{background:var(--bg3);border-radius:4px;height:4px;margin-bottom:.55rem}
.progf{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--purple),var(--gold))}
/* Phase 4 — carte tournoi simplifiée : détails secondaires repliés */
.tst-key{margin-bottom:.65rem}
.tc-details{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.tc-details.open{grid-template-rows:1fr;margin-top:.15rem}
.tc-details-inner{overflow:hidden;min-height:0}
.tc-details-toggle{display:block;width:100%;background:none;border:none;color:var(--text2);font-size:.72rem;font-family:'Inter',sans-serif;cursor:pointer;padding:.2rem 0 .55rem;text-align:left}
.tc-details-toggle:hover{color:var(--gold)}

/* CLASSEMENT */
.rtabs{display:flex;gap:.45rem;margin-bottom:1.1rem;flex-wrap:wrap}
.rtab{background:var(--card);border:1px solid var(--border);color:var(--text2);padding:6px 14px;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.8rem;font-weight:500;transition:all .2s}
.rtab.active{background:var(--gold);color:#000;border-color:var(--gold)}
.lboard{display:flex;flex-direction:column;gap:.4rem}
.lrow{display:flex;align-items:center;gap:.7rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:.8rem .9rem;transition:all .2s}
.lrow:hover{background:var(--bg2)}.lrow.t1{border-color:rgba(245,166,35,.5);background:rgba(245,166,35,.05)}.lrow.t2{border-color:rgba(148,163,184,.3)}.lrow.t3{border-color:rgba(180,83,9,.3)}.lrow.me{border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.05);cursor:pointer}
.lpos{font-family:'Syne',sans-serif;font-size:.92rem;font-weight:800;min-width:28px;text-align:center}
.linf{flex:1;min-width:0}.lname{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lclan{font-size:.68rem;color:var(--text2)}
.lrank{padding:2px 8px;border-radius:20px;font-size:.65rem;font-weight:600}
.lpts{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;color:var(--gold);white-space:nowrap}
.me-badge{font-size:.6rem;background:rgba(59,130,246,.2);color:var(--blue);padding:1px 6px;border-radius:10px;margin-left:3px}

/* CLANS */
.cpr{display:flex;align-items:center;gap:.7rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:.8rem .9rem;cursor:pointer;transition:all .2s;margin-bottom:.45rem}
.cpr:hover{border-color:rgba(245,166,35,.3);background:var(--bg3)}
.clans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem}
.clan-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:1.1rem;transition:all .2s}
.clan-card:hover{border-color:rgba(245,166,35,.3);transform:translateY(-3px)}.clan-card.my-clan{border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.03)}

/* CHAT */
.chat-layout{display:grid;grid-template-columns:280px 1fr;gap:1rem;min-height:420px}
@media(max-width:760px){.chat-layout{grid-template-columns:1fr;min-height:0}} /* V120 : une colonne = pas de hauteur imposée, la liste fait sa taille */
.chat-rooms-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:.9rem;display:flex;flex-direction:column;gap:.6rem}
.chat-room-item{display:flex;align-items:center;gap:.55rem;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.55rem .65rem;cursor:pointer;transition:all .15s}
.chat-room-item:hover{border-color:rgba(245,166,35,.3)}.chat-room-item.active{border-color:var(--gold);background:rgba(245,166,35,.06)}
.chat-thread-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);display:flex;flex-direction:column;min-height:420px}
.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;max-height:420px}
.chat-bubble{max-width:75%;padding:.5rem .75rem;border-radius:12px;font-size:.82rem;background:var(--bg3)}
.chat-bubble.mine{align-self:flex-end;background:rgba(245,166,35,.18);border:1px solid rgba(245,166,35,.3)}
.chat-bubble-meta{font-size:.62rem;color:var(--text3);margin-top:2px}
.chat-input-row{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}
.chat-input-row input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem;color:var(--text);font-size:.85rem}
.chat-bubble-actions{display:inline-flex;gap:.4rem;margin-left:.5rem;cursor:pointer}
.chat-bubble-actions span{opacity:.55;transition:opacity .15s}
.chat-bubble-actions span:hover{opacity:1}
.chat-voice-msg{display:flex;align-items:center}
#chatVoiceBtn.recording{background:var(--red);color:#fff;border-color:var(--red);animation:chatRecPulse 1s infinite}
@keyframes chatRecPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* DÉFI */
.defi-wrap{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid rgba(245,166,35,.2);border-radius:var(--rl);padding:1.75rem}
.drule{display:flex;align-items:center;gap:.55rem;font-size:.8rem;color:var(--text2);background:var(--card);padding:.5rem .8rem;border-radius:7px}
.empty-defi{text-align:center;padding:2.25rem;background:var(--bg2);border:1px dashed var(--border);border-radius:var(--rl)}

/* PROFIL */
.profile-hero{background:linear-gradient(135deg,var(--bg2),var(--bg3));border-bottom:1px solid var(--border);padding:2.75rem 1.25rem 1.75rem}
.profile-hero-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}
.profile-big-av{width:72px;height:72px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:800;color:#000;flex-shrink:0;border:3px solid rgba(245,166,35,.3)}
.profile-meta{flex:1;min-width:200px}
.profile-meta h1{font-size:clamp(1.3rem,4vw,1.9rem);margin-bottom:.25rem}
.prank-b{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:20px;font-size:.76rem;font-weight:600;border:1px solid;margin-bottom:.65rem}
.pstats-row{display:flex;gap:1.25rem;flex-wrap:wrap;margin-bottom:.65rem}
.pstat{text-align:center}
.pstat-val{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;color:var(--gold)}
.pstat-label{font-size:.67rem;color:var(--text2);margin-top:1px}
.prog-track{background:var(--bg3);border-radius:4px;height:6px}
.prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--purple),var(--gold));transition:width .8s ease}
.prog-lbl{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text2);margin-bottom:2px}
.profile-body{max-width:1280px;margin:0 auto;padding:1.75rem 1.25rem;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.pcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem}
.pcard h3{font-size:.9rem;font-weight:700;margin-bottom:.85rem}
.prow{display:flex;justify-content:space-between;align-items:center;padding:.48rem 0;border-bottom:1px solid var(--border);font-size:.81rem}
.prow:last-child{border-bottom:none}
.prow-label{color:var(--text2)}.prow-val{font-weight:600;text-align:right;word-break:break-word;max-width:60%}

/* PACKS POINTS */
.packs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;margin-bottom:1.25rem}
.pack-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1rem;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.pack-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.pack-card.featured{border-color:var(--gold);background:rgba(245,166,35,.06)}
.pack-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--gold);color:#000;font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.pack-name{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:800;margin-bottom:.25rem}
.pack-pts{font-size:1.4rem;font-weight:800;color:var(--gold);font-family:'Syne',sans-serif;margin:.2rem 0}
.pack-price{font-size:.78rem;color:var(--text2)}

/* PREMIUM */
.premium-hero{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(245,166,35,.08));border:1px solid rgba(124,58,237,.3);border-radius:var(--rl);padding:2rem;text-align:center;margin-bottom:1.25rem}
.premium-price{font-family:'Syne',sans-serif;font-size:2.5rem;font-weight:800;color:var(--gold);margin:.5rem 0}
.premium-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--purple),var(--gold));color:#fff;padding:3px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:.5rem}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.compare-col{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1rem}
.compare-col.premium-col{border-color:rgba(124,58,237,.4);background:rgba(124,58,237,.06)}
.compare-item{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;font-size:.8rem}
.ci-icon{font-size:.85rem;flex-shrink:0}

/* PARRAINAGE */
.parrain-link-wrap{background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:.75rem 1rem;display:flex;align-items:center;gap:.6rem;margin:.75rem 0}
.parrain-link-text{flex:1;font-family:monospace;font-size:.8rem;color:var(--gold);word-break:break-all}

/* PRÉSENCE */
.presence-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.p-online{background:var(--green)}.p-dispo{background:var(--cyan)}.p-attente{background:var(--gold)}.p-partie{background:var(--orange)}.p-indispo{background:var(--red)}.p-offline{background:var(--text3)}
.joueurs-list{display:flex;flex-direction:column;gap:.45rem}
.joueur-row{display:flex;align-items:center;gap:.65rem;padding:.65rem .85rem;background:var(--bg3);border:1px solid var(--border);border-radius:9px;transition:all .2s}
.joueur-row:hover{border-color:rgba(245,166,35,.3)}
.joueur-av-sm{width:28px;height:28px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#000;flex-shrink:0}

/* FAQ */
.faq-item{background:var(--bg3);border:1px solid var(--border);border-radius:9px;margin-bottom:.5rem;overflow:hidden}
/* Informations directement sur l'accueil : deux grands accordéons natifs,
   fermés par défaut et fidèles aux couleurs ArenaLive. */
.home-info-stack{display:grid;gap:.85rem}
.home-info-accordion{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid rgba(245,166,35,.24);border-radius:var(--rl);overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.22)}
.home-info-accordion summary{list-style:none;display:flex;align-items:center;gap:.8rem;padding:1rem 1.15rem;cursor:pointer;user-select:none;color:var(--text);font-family:'Syne',sans-serif;font-weight:750}
.home-info-accordion summary::-webkit-details-marker{display:none}
.home-info-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,58,237,.3),rgba(245,166,35,.22));border:1px solid rgba(245,166,35,.25);font-size:1.15rem;flex:0 0 auto}
.home-info-title{flex:1;font-size:clamp(.9rem,2.5vw,1.05rem)}
.home-info-arrow{color:var(--gold);font-size:.78rem;transition:transform .2s ease}
.home-info-accordion[open] .home-info-arrow{transform:rotate(180deg)}
.home-info-content{border-top:1px solid var(--border);padding:1rem;background:rgba(8,10,18,.35)}
.home-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.home-info-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1rem;min-width:0}
.home-info-card .hic-icon{font-size:1.35rem;margin-bottom:.45rem}
.home-info-card h3{font-size:.84rem;margin-bottom:.35rem;color:var(--text)}
.home-info-card p{font-size:.76rem;line-height:1.6;color:var(--text2)}
.home-faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-faq-grid .home-info-card:first-child{grid-column:1/-1;border-color:rgba(245,166,35,.38);background:linear-gradient(135deg,rgba(245,166,35,.1),var(--card))}
@media(max-width:800px){.home-info-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.home-info-grid,.home-faq-grid{grid-template-columns:1fr}.home-faq-grid .home-info-card:first-child{grid-column:auto}.home-info-accordion summary{padding:.85rem}.home-info-content{padding:.75rem}}
.faq-q{padding:.85rem 1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.85rem;user-select:none}
.faq-q:hover{background:rgba(255,255,255,.03)}
.faq-a{padding:0 1rem;max-height:0;overflow:hidden;font-size:.82rem;color:var(--text2);line-height:1.7;transition:all .3s}
.faq-a.open{max-height:300px;padding:.65rem 1rem .85rem}
.faq-arrow{transition:transform .3s;flex-shrink:0}
.faq-arrow.open{transform:rotate(180deg)}

/* MODAL */
/* Une modale passe AU-DESSUS de tout ce qui est déjà à l'écran.

   Le défaut corrigé : le lecteur de jeu est en z-index 1000, les modales
   étaient en 500. Un joueur qui cliquait « ✕ Quitter » pendant une partie
   déclenchait bien la fenêtre de sortie — mais elle s'affichait DERRIÈRE
   l'écran noir du jeu. De son point de vue le bouton était mort, et il
   était enfermé dans la partie. Le même piège guettait devant le widget
   d'appel (1100), le bandeau de fin de partie (1150) et l'accueil du
   premier lancement (1200) : le correctif ponctuel « game-evidence-open »
   ne réglait qu'un seul de ces cas.

   La règle vaut désormais partout : au-dessus de toutes ces couches, en
   dessous des seules notifications (9999) et du bandeau de mise à jour
   (10000), qui doivent rester visibles quoi qu'il arrive. */
.moverlay{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px);z-index:1300;display:none;align-items:center;justify-content:center;padding:1rem}
.moverlay.open{display:flex}
.mbox{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:1.65rem;width:100%;max-width:440px;max-height:92vh;overflow-y:auto;animation:mIn .25s ease}
.mbox.wide{max-width:540px}
@keyframes mIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem}
.mhead h3{font-size:1.05rem;font-weight:800}
.mclose{background:none;border:none;color:var(--text2);font-size:1.3rem;cursor:pointer;line-height:1}
.mclose:hover{color:var(--text)}
.mfoot{display:flex;gap:.5rem;margin-top:1.1rem;justify-content:flex-end;flex-wrap:wrap}
.gl{display:flex;align-items:center;gap:.8rem;background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:.8rem .95rem;color:var(--text);transition:all .2s;font-weight:500;margin-bottom:.45rem}
.gl:hover{border-color:var(--gold);color:var(--gold)}
.info-box{background:rgba(245,166,35,.07);border:1px solid rgba(245,166,35,.2);border-radius:8px;padding:.65rem .85rem;font-size:.77rem;color:var(--text2);margin-bottom:.85rem;line-height:1.6}
.warn-box{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2);border-radius:8px;padding:.65rem .85rem;font-size:.77rem;color:#FCA5A5;margin-bottom:.85rem;line-height:1.6}
.success-box{background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.2);border-radius:8px;padding:.65rem .85rem;font-size:.77rem;color:#6EE7B7;margin-bottom:.85rem;line-height:1.6}
.pay-opts{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.5rem}
.popt{flex:1;min-width:75px;background:var(--bg3);border:2px solid var(--border);border-radius:8px;padding:.55rem;cursor:pointer;text-align:center;transition:all .2s;font-size:.74rem;font-weight:600}
.popt:hover,.popt.sel{border-color:var(--gold);color:var(--gold)}

/* UPLOAD */
.upload-zone{border:2px dashed var(--border);border-radius:10px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg3)}
.upload-zone:hover{border-color:var(--gold);background:rgba(245,166,35,.05)}
.upload-zone.dragging{border-color:var(--gold);background:rgba(245,166,35,.08)}
.upload-preview{width:100%;max-height:200px;border-radius:8px;object-fit:contain;margin-top:.75rem;display:none}
.upload-progress{width:100%;background:var(--bg3);border-radius:4px;height:5px;margin-top:.65rem;overflow:hidden;display:none}
.upload-progress-bar{height:100%;background:linear-gradient(90deg,var(--purple),var(--gold));border-radius:4px;transition:width .3s}

/* BADGES */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.66rem;font-weight:600;white-space:nowrap}
.b-green{background:rgba(16,185,129,.15);color:var(--green)}.b-red{background:rgba(239,68,68,.15);color:var(--red)}.b-gold{background:rgba(245,166,35,.15);color:var(--gold)}.b-blue{background:rgba(59,130,246,.15);color:var(--blue)}.b-gray{background:rgba(255,255,255,.06);color:var(--text2)}.b-cyan{background:rgba(6,182,212,.15);color:var(--cyan)}.b-purple{background:rgba(124,58,237,.15);color:#a78bfa}.b-orange{background:rgba(249,115,22,.15);color:var(--orange)}
.prem-badge{background:linear-gradient(135deg,var(--purple),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;font-size:.72rem}

/* ES */
.es{text-align:center;padding:2.25rem 1rem;color:var(--text2)}.es .ei{font-size:2.25rem;margin-bottom:.55rem;opacity:.5}.es .et{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.35rem}.es p{font-size:.81rem;line-height:1.6;max-width:270px;margin:0 auto .7rem}

/* TOAST */
.toast{position:fixed;bottom:5.5rem;right:1.5rem;z-index:9999;border-radius:10px;padding:.85rem 1.25rem;font-size:.83rem;font-weight:500;transform:translateY(80px);opacity:0;transition:all .3s;pointer-events:none;max-width:310px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.toast.show{transform:translateY(0);opacity:1}
.pwa-update{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));z-index:10000;width:min(560px,calc(100% - 1.5rem));transform:translate(-50%,calc(100% + 2rem));opacity:0;pointer-events:none;display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;background:linear-gradient(135deg,#171b2d,#211b10);border:1px solid rgba(245,166,35,.5);border-radius:14px;box-shadow:0 16px 45px rgba(0,0,0,.55);transition:transform .25s ease,opacity .25s ease}
.pwa-update.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.pwa-update-copy{flex:1;min-width:0}.pwa-update-copy strong{display:block;font-size:.82rem}.pwa-update-copy small{display:block;color:var(--text2);font-size:.68rem;margin-top:2px;line-height:1.35}
.pwa-update button{flex:0 0 auto;padding:.55rem .8rem;white-space:normal}
.t-success{background:#065f46;border:1px solid var(--green);color:#d1fae5}.t-error{background:#7f1d1d;border:1px solid var(--red);color:#fee2e2}.t-info{background:var(--bg2);border:1px solid var(--border);color:var(--text)}

/* COUNTDOWN */
.countdown{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.cd-unit{background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:.6rem .9rem;text-align:center;min-width:55px}
.cd-val{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;color:var(--gold);display:block}
.cd-label{font-size:.65rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}

/* FOOTER */
.footer{background:var(--bg2);border-top:1px solid var(--border);padding:2.75rem 1.25rem 1.75rem}
.fg-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.75rem;margin-bottom:1.75rem}
.fb-brand p{font-size:.81rem;color:var(--text2);line-height:1.6;max-width:240px;margin-top:.55rem}
.fsoc{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.85rem}
.fsl{background:var(--card);border:1px solid var(--border);padding:3px 9px;border-radius:20px;font-size:.68rem;font-weight:600;color:var(--text2);transition:all .2s;cursor:pointer}
.fsl:hover{color:var(--gold);border-color:var(--gold)}
.fl h4{font-size:.75rem;font-weight:700;margin-bottom:.55rem;text-transform:uppercase;letter-spacing:.05em}
.fl a,.fl span{display:block;font-size:.8rem;color:var(--text2);margin-bottom:.35rem;transition:color .2s;cursor:pointer}
.fl a:hover,.fl span:hover{color:var(--gold)}
.pbadge{display:inline-block;background:var(--card);border:1px solid var(--border);border-radius:5px;padding:2px 7px;font-size:.68rem;font-weight:600;margin-bottom:.35rem}
.fbot{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.74rem;color:var(--text3);flex-wrap:wrap;gap:.5rem}

/* RESPONSIVE */
@media(max-width:900px){.fg-grid{grid-template-columns:1fr 1fr}.profile-body{grid-template-columns:1fr}.profile-hero-inner{flex-direction:column;align-items:flex-start;gap:1.25rem}.compare-grid{grid-template-columns:1fr}}
@media(max-width:640px){.nav-links{display:none}#navRight{display:none}.hb{display:flex}.nav-inner{gap:.5rem;padding:0 .85rem}.logo{font-size:.95rem;gap:3px}.fg-grid{grid-template-columns:1fr;gap:1.1rem}.steps,.ggrid,.tgrid,.clans-grid{grid-template-columns:1fr}.sec,.ph{padding:2.75rem 1rem}.ph{padding-bottom:1.25rem}.ph+.sec{padding-top:1.25rem}.hero{padding:5.5rem 1rem 3rem}.hero-title{font-size:2rem}.mbox{padding:1.25rem}.notif-panel{right:.5rem;left:.5rem;width:auto}.chatbot-panel{left:.5rem;right:.5rem;width:auto}.packs-grid{grid-template-columns:1fr 1fr 1fr}
  /* Phase 1 — bottom nav visible sur mobile ; le bandeau haut ne garde que le logo, la pastille KP et la cloche (le bouton "compte" complet passe dans l'onglet Profil de la bottom nav + le menu ☰ secondaire) */
  .bottom-nav{display:block}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .chatbot-btn{bottom:calc(84px + env(safe-area-inset-bottom));width:46px;height:46px;font-size:1.25rem;left:1rem}
}
@media(max-width:420px){
  .tch{flex-wrap:wrap}.ttitle{overflow-wrap:anywhere}.tstatus{white-space:normal}
  .tst{gap:.15rem}.tsv{font-size:.78rem}.tsl{font-size:.6rem}
  .fbar{gap:.35rem}.fb{padding:6px 10px}
  .pwa-update{align-items:flex-start;flex-wrap:wrap;bottom:calc(80px + env(safe-area-inset-bottom))}.pwa-update button{width:100%}
  .packs-grid{grid-template-columns:1fr 1fr}
}
/* Le lecteur de jeu (plein écran, z-index:1000) recouvre déjà toute la viewport, bottom nav incluse (z-index:205) — aucune règle supplémentaire nécessaire pour garder la zone de jeu prioritaire pendant une partie. */

/* Phase 9 — sélecteur de pays avec recherche (ISO 3166-1 complet) */
.cty-picker{position:relative}
.cty-input{width:100%;padding:.6rem .75rem;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.85rem;cursor:pointer}
.cty-input:focus{outline:none;border-color:var(--gold);cursor:text}
.cty-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow-y:auto;background:var(--bg2);border:1px solid var(--border);border-radius:8px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.cty-opt{padding:.65rem .8rem;font-size:.83rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cty-opt:hover,.cty-opt:active{background:var(--bg3)}
.cty-dial{color:var(--text3);font-size:.72rem;flex-shrink:0}
.cty-empty{padding:.75rem;font-size:.8rem;color:var(--text3);text-align:center}
@media(max-width:640px){.cty-dropdown{max-height:45vh}.cty-opt{padding:.8rem .85rem;font-size:.88rem}}

/* ArenaLive 2.0 — aide, missions et mode économie de données */
.platform-guide{background:linear-gradient(135deg,rgba(124,58,237,.11),rgba(245,166,35,.07));border:1px solid rgba(167,139,250,.22);border-radius:var(--rl);padding:1.1rem;margin-bottom:1.2rem}
.platform-guide h3{font-size:.95rem;margin-bottom:.45rem}.platform-guide p{font-size:.8rem;color:var(--text2);line-height:1.65}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;margin-top:.85rem}
.guide-step{background:rgba(13,15,20,.55);border:1px solid var(--border);border-radius:10px;padding:.8rem;font-size:.77rem;line-height:1.5}
.game-rule-snippet{font-size:.69rem;color:var(--text2);line-height:1.45;padding:.45rem .55rem;background:rgba(255,255,255,.025);border-radius:7px;margin-top:.15rem}
.missions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem}
.mission-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:1rem}
.mission-card.done{border-color:rgba(16,185,129,.42);background:rgba(16,185,129,.04)}
.mission-progress{height:6px;border-radius:4px;background:var(--bg3);overflow:hidden;margin:.65rem 0 .35rem}.mission-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--gold));border-radius:4px}
.rank-controls{display:flex;gap:.55rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:1.1rem}
.rank-scope{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;color:var(--text);font-family:'Inter',sans-serif;font-size:.79rem}
.low-data-toggle{border:1px solid rgba(6,182,212,.3);color:var(--cyan);background:rgba(6,182,212,.07);border-radius:8px;padding:7px 10px;cursor:pointer;font-size:.76rem;font-family:'Inter',sans-serif}
body.low-data *,body.low-data *::before,body.low-data *::after{animation:none!important;transition:none!important;backdrop-filter:none!important}
body.low-data .hero-bg,body.low-data .orb{display:none!important}
body.low-data .gc:hover,body.low-data .tc:hover{transform:none!important;box-shadow:none!important}
@media(max-width:640px){.guide-grid,.missions-grid{grid-template-columns:1fr}.game-bottombar{padding:.55rem}.game-bottombar-info{flex-basis:100%}.rank-controls{align-items:stretch}.rank-scope{width:100%}}
@media(max-width:768px){input:not([type="range"]),select,textarea{font-size:16px!important}}

/* Refonte responsive : aucune largeur fixe ne doit pousser l'interface hors écran. */
img,video,canvas,svg,iframe{max-width:100%}
.page,.sec,.ph,.nav-inner,.hero-inner,.chat-layout,.chat-rooms-panel,.chat-thread-panel{min-width:0}
button,.nl,.ndl,.gt-tab{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(max-width:640px){
  .bn-item{min-width:0;min-height:48px;padding:6px 2px;font-size:clamp(.57rem,2.7vw,.66rem)}
  .bn-item .bn-ic{font-size:1.2rem}
  .hb,.notif-btn,.mob-menu-close{min-width:44px;min-height:44px}
  .hero{min-height:100svh;min-height:100dvh;padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
  .hero-actions{display:grid;grid-template-columns:1fr;width:100%;max-width:420px}
  .hero-actions .bp,.hero-actions .bg{width:100%;white-space:normal;min-height:48px}
  .group-tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding-bottom:3px}
  .group-tabs::-webkit-scrollbar{display:none}.gt-tab{flex:0 0 auto;min-height:44px}
  .chat-layout{gap:.7rem}.chat-thread-panel{min-height:52dvh}.chat-messages{max-height:52dvh;padding:.75rem}.chat-bubble{max-width:88%;overflow-wrap:anywhere}
  .chat-input-row{padding:.6rem;align-items:stretch}.chat-input-row input{min-width:0}.chat-input-row button{min-width:44px;white-space:normal;padding:.6rem .75rem}
  .modal{max-height:calc(100dvh - 1rem);overflow-y:auto}
  .game-player-overlay{height:100dvh}
  .game-topbar{height:auto;min-height:44px;padding:max(.35rem,env(safe-area-inset-top)) .55rem .35rem}
  .game-topbar h3{min-width:0}.game-topbar>div{gap:.35rem!important}
  #gameUser{display:none}.game-cost-badge{font-size:.65rem}
  .game-bottombar{padding-bottom:max(.55rem,env(safe-area-inset-bottom))}
  .notif-panel{max-height:calc(100dvh - 82px)}
}
@media(max-width:350px){
  .logo{font-size:.86rem}.nav-inner{padding:0 .55rem}.bn-item{font-size:.55rem}
  .sec,.ph{padding-left:.75rem;padding-right:.75rem}.hero-title{font-size:1.7rem}
  .game-topbar h3{font-size:.69rem}.game-cost-badge{display:none}
}
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:5rem}.bottom-nav{padding-top:2px}.bn-item{min-height:40px;padding:3px 2px}
  .bn-item .bn-ic{font-size:1rem}.game-topbar{min-height:38px}.chat-messages{max-height:48dvh}
}
/* V96 — actions d'un jeu : uniquement ce que le jeu propose (arena-game-modes.js).
   Deux colonnes ; un nombre impair de boutons met le premier sur toute la largeur. */
.gactions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin-top:.55rem}
.gactions.odd>.gact:first-child{grid-column:1/-1}
.gact.gact-wide{grid-column:1/-1}
.gact{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.25rem .35rem;min-width:0;min-height:36px;padding:6px 6px;border-radius:9px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-family:'Inter',sans-serif;font-size:.72rem;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.gact small{font-size:.66rem;font-weight:600;opacity:.8}
.gact:hover{border-color:rgba(245,166,35,.55);transform:translateY(-1px)}
.gact.primary{background:var(--gold);border-color:var(--gold);color:#111;font-family:'Syne',sans-serif;font-weight:800}
.gact.primary small{color:#111;opacity:.75}
.gact.primary:hover{filter:brightness(1.05)}
.gc .gactions{margin-top:auto;padding-top:.55rem}
.room-code-input{width:100%;box-sizing:border-box;text-transform:uppercase;font-size:1.65rem;text-align:center;letter-spacing:.35em;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-family:'Syne',sans-serif;font-weight:800}
.room-code-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,166,35,.18)}
/* V96 — « Comment jouer » toujours présent sur la carte, discret sous les actions. */
.game-howto-link{margin-top:.4rem;background:none;border:0;padding:4px 0;color:var(--text3);font-family:'Inter',sans-serif;font-size:.7rem;cursor:pointer;text-align:center;width:100%;transition:color .2s}
.game-howto-link:hover{color:var(--gold)}

/* ═══════════════════════════════════════════════════════════════════════
   V97 — MOUVEMENT ET EXPÉRIENCE VISUELLE
   Calme et cinématique à l'arrivée · rapide en navigation · spectaculaire
   seulement pour une victoire. Tout est CSS ; tout s'éteint en
   prefers-reduced-motion (et arena-motion.js n'anime rien en mode
   données réduites).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero : deux colonnes, entrée séquencée ── */
.hero{min-height:min(100vh,860px);padding:6.5rem 1.25rem 3.5rem}
.hero-inner{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.5rem;align-items:center}
.hero-content{max-width:600px}
.hero-title{margin-bottom:1rem}
.hero-title>span{display:inline-block}
.hero-pills{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;margin-top:1rem}
.hero-in{opacity:0;transform:translateY(18px);will-change:opacity,transform}
.hero.is-ready .hero-in{animation:heroIn .62s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--hi,0)*110ms)}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-actions .bp.lg,.hero-actions .bg.lg{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.hero-actions .bp.lg:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(245,166,35,.28)}

/* ── L'Afrique, en filigrane. Une lente lueur la traverse ; le Cameroun pulse. ── */
.hero-africa{position:absolute;right:-2%;top:50%;width:min(58vw,720px);height:auto;transform:translateY(-50%);opacity:.75;pointer-events:none}
.hero-africa .af-fill{fill:url(#afSweep);stroke:rgba(245,166,35,.22);stroke-width:1.2;stroke-linejoin:round}
.hero-africa .af-wax{fill:url(#afWax);opacity:.16}
.hero-africa-shape{animation:africaBreathe 12s ease-in-out infinite;transform-origin:50% 50%}
@keyframes africaBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.012)}}
.hero-africa .af-cm{fill:#F5A623;filter:drop-shadow(0 0 6px rgba(245,166,35,.9))}
.hero-africa .af-cm-ring{fill:none;stroke:#F5A623;stroke-width:1.5;opacity:.8;transform-origin:150px 232px;animation:cmPulse 2.6s ease-out infinite}
@keyframes cmPulse{0%{transform:scale(.4);opacity:.9}70%{transform:scale(2.2);opacity:0}100%{transform:scale(2.2);opacity:0}}
/* le balayage lumineux : on décale le dégradé lentement */
#afSweep{animation:none}
.hero-africa .af-fill:first-of-type{animation:afSweepMove 9s ease-in-out infinite alternate}
@keyframes afSweepMove{from{filter:brightness(.9)}to{filter:brightness(1.25)}}

/* ── La composition flottante ── */
.hero-scene{position:relative;display:block;width:100%;max-width:440px;height:400px;justify-self:end}
.hs-card{position:absolute;background:linear-gradient(160deg,rgba(26,30,42,.92),rgba(19,22,30,.88));border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:.85rem .95rem;box-shadow:0 22px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(8px);color:var(--text);font-size:.78rem;will-change:transform}
.hs-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 60%);pointer-events:none}
/* Positions en pixels dans une scène de 440×400 : les cartes se chevauchent
   volontairement comme un collage, chacune sur son plan (z-index). */
.hs-profile{left:0;top:8px;width:290px;display:flex;align-items:center;gap:.7rem;z-index:2;animation:hsFloat 9s ease-in-out infinite}
.hs-table{right:0;top:100px;width:220px;z-index:1;animation:hsFloat 11s ease-in-out infinite reverse}
.hs-rank{left:0;top:196px;width:240px;z-index:3;animation:hsFloat 10s ease-in-out infinite 1.5s}
.hs-online{right:8px;top:344px;display:flex;align-items:center;gap:.6rem;z-index:4;animation:hsFloat 8.5s ease-in-out infinite .7s}
@keyframes hsFloat{0%,100%{margin-top:0}50%{margin-top:-9px}}
.hs-av{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#7C3AED,#F5A623);display:grid;place-items:center;font-family:'Syne',sans-serif;font-weight:800;color:#fff;flex:0 0 auto}
.hs-grow{flex:1;min-width:0}
.hs-name{font-weight:700;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-sub{color:var(--text3);font-size:.68rem}
.hs-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);margin-top:.35rem;overflow:hidden}
.hs-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#7C3AED,#F5A623);animation:hsBar 2.4s cubic-bezier(.2,.8,.2,1) .9s both}
@keyframes hsBar{from{width:0}}
.hs-kp{font-family:'Syne',sans-serif;font-weight:800;color:var(--gold);white-space:nowrap}
.hs-kp small{font-size:.6rem;color:var(--text3)}
.hs-live{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--text2);margin-bottom:.5rem}
.hs-board{position:relative;aspect-ratio:1;width:100%;border-radius:10px;background:#0b1224;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;padding:3px;box-sizing:border-box}
.hs-board i{border-radius:6px;opacity:.9}
.hs-board .c0{background:#7f1d1d}.hs-board .c1{background:#14532d}.hs-board .c2{background:#1e3a8a}.hs-board .c3{background:#78350f}
.hs-board b{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px #000}
.hs-board .p0{background:#ef4444;left:18%;top:20%;animation:hsPawn 6s ease-in-out infinite}
.hs-board .p1{background:#22c55e;right:22%;top:44%;animation:hsPawn 7s ease-in-out infinite 2s}
.hs-board .p2{background:#3b82f6;left:44%;bottom:16%;animation:hsPawn 8s ease-in-out infinite 1s}
@keyframes hsPawn{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-6px)}}
.hs-turn{margin-top:.5rem;text-align:center;font-weight:700;font-size:.72rem;color:#4ade80}
.hs-title{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.hs-row{display:grid;grid-template-columns:1.2rem 1fr auto;gap:.45rem;align-items:center;padding:.3rem .4rem;border-radius:8px}
.hs-row span{color:var(--text3);font-weight:700}
.hs-row em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-row b{font-family:'Syne',sans-serif}
.hs-row.me{background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.25)}
.hs-row.me b{color:#4ade80}
.hs-avs{display:flex}
.hs-avs i{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg2);background:linear-gradient(135deg,#0e7490,#7C3AED);display:grid;place-items:center;font-size:.6rem;font-weight:800;font-style:normal;color:#fff;margin-left:-8px}
.hs-avs i:first-child{margin-left:0}
.hs-online b{font-family:'Syne',sans-serif;color:var(--gold)}
.hs-online .hs-online-total{display:block;font-size:.68rem;color:var(--text2);margin-top:.1rem}
.hs-online .hs-online-total:empty{display:none}
.hs-card.is-link{cursor:pointer;pointer-events:auto}
.hs-card.is-link:hover{border-color:rgba(245,166,35,.45)}
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:1rem;justify-items:stretch}
  .hero-content{max-width:none}
  /* Tablette : la scène passe sous le texte, centrée, un peu réduite. */
  .hero-scene{justify-self:center;height:340px;max-width:440px;transform:scale(.85);transform-origin:top center;margin-top:.5rem}
  .hero-africa{right:-32%;top:18%;width:100vw;opacity:.4;transform:none}
}
@media(max-width:640px){
  .hero{min-height:auto;padding:5.5rem 1rem 2.25rem}
  .hero-title{font-size:clamp(1.9rem,9vw,2.5rem);overflow-wrap:anywhere}
  /* Téléphone (priorité mobile) : la composition devient une rangée
     compacte — ton profil et les joueurs en ligne — juste sous les boutons.
     La table et le classement, trop larges pour un pouce, n'apparaissent pas.
     La carte et le Cameroun restent en filigrane derrière le titre. */
  .hero-scene{display:flex;gap:.6rem;height:auto;max-width:none;transform:none;margin-top:.9rem;justify-self:stretch}
  .hs-card{position:static;animation:none;flex:1;min-width:0;padding:.7rem .75rem}
  .hs-profile{width:auto;flex:1.6;gap:.55rem}
  .hs-profile .hs-kp{display:none}
  .hs-online{flex-direction:column;align-items:flex-start;gap:.35rem;font-size:.72rem}
  .hs-table,.hs-rank{display:none}
  .hero-africa{right:-50%;top:12%;width:150vw;opacity:.28;transform:none}
  /* Zones tactiles : 44 px minimum. */
  .gact{min-height:44px;font-size:.78rem}
  .game-howto-link{min-height:40px}
  .launch-pill{font-size:.74rem;padding:.5rem .8rem}
}

/* ── Apparition au scroll (une seule fois) ── */
[data-reveal]:not(.is-in)>*{opacity:0}
[data-reveal].is-in>*{animation:revealUp .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
[data-reveal="one"]:not(.is-in){opacity:0}
[data-reveal="one"]:not(.is-in)>*{opacity:1}
[data-reveal="one"].is-in{animation:revealUp .5s cubic-bezier(.2,.7,.2,1) both}
[data-reveal="one"].is-in>*{animation:none}
@keyframes revealUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ── Données vivantes ── */
.is-counting{color:var(--gold)}
.al-glow{animation:alGlow 1.1s ease-out 1}
@keyframes alGlow{0%{box-shadow:0 0 0 0 rgba(245,166,35,.0)}25%{box-shadow:0 0 0 6px rgba(245,166,35,.28),0 0 24px rgba(245,166,35,.55)}100%{box-shadow:0 0 0 0 rgba(245,166,35,0)}}
.al-flip-new{animation:revealUp .4s ease-out both}
.al-bar>span{transition:width .9s cubic-bezier(.2,.8,.2,1)}

/* ── Célébrations (victoire, niveau, défi, gain) — rares ── */
.al-celebrate{position:fixed;inset:0;z-index:99999;pointer-events:none;overflow:hidden}
.al-celebrate .al-flash{position:absolute;left:50%;top:38%;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(245,166,35,.9) 30%,rgba(245,166,35,0) 70%);transform:translate(-50%,-50%);animation:alFlash .7s ease-out both}
@keyframes alFlash{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(60);opacity:0}}
.al-celebrate b{position:absolute;top:34%;border-radius:2px;transform:translate(-50%,-50%) rotate(var(--r));animation:alConfetti var(--d) cubic-bezier(.15,.6,.4,1) var(--dl) both}
@keyframes alConfetti{0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(.4);opacity:0}12%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),42vh) rotate(calc(var(--r) + 420deg)) scale(1);opacity:0}}

/* ── Écran de chargement d'un jeu ── */
.game-iframe-wrap{position:relative}
.al-gameloader{position:absolute;inset:0;z-index:5;display:none;place-items:center;background:radial-gradient(ellipse at 50% 30%,#1a1730,#0D0F14 70%);transition:opacity .35s ease}
.al-gameloader.is-on{display:grid}
.al-gameloader.is-done{opacity:0}
.al-gameloader-inner{text-align:center;max-width:360px;padding:1rem;animation:heroIn .4s ease-out both}
.al-gameloader-icon{width:84px;height:84px;border-radius:24px;margin:0 auto 1rem;display:grid;place-items:center;font-size:2.4rem;box-shadow:0 18px 44px rgba(0,0,0,.5);position:relative;animation:loaderBreathe 1.6s ease-in-out infinite}
.al-gameloader-icon::before{content:'';position:absolute;inset:-8px;border-radius:30px;border:2px solid rgba(245,166,35,.35);border-top-color:#F5A623;animation:loaderSpin 1.1s linear infinite}
@keyframes loaderBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
.al-gameloader-name{font-family:'Syne',sans-serif;font-weight:800;font-size:1.25rem}
.al-gameloader-sub{color:var(--text2);font-size:.82rem;margin-top:.2rem}
.al-gameloader-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin:1rem auto .8rem;max-width:260px}
.al-gameloader-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#7C3AED,#F5A623);transition:width 2.4s cubic-bezier(.1,.7,.3,1)}
.al-gameloader-tip{font-size:.76rem;color:var(--text3);line-height:1.5}

/* ── Cartes premium ── */
.gc{position:relative;background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),var(--bg2);border:1px solid rgba(255,255,255,.07);box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.gc::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(245,166,35,.55),rgba(124,58,237,.35) 45%,rgba(255,255,255,0) 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s ease;pointer-events:none}
.gc:hover{transform:translateY(-4px);border-color:rgba(245,166,35,.25);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(245,166,35,.12)}
.gc:hover::before{opacity:1}
.gimg{height:104px;font-size:2.7rem;text-shadow:0 8px 22px rgba(0,0,0,.5);overflow:hidden}
.gimg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,rgba(255,255,255,0) 6px 18px);pointer-events:none}
.gimg::after{content:'';position:absolute;left:-60%;top:-40%;width:50%;height:180%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.16),rgba(255,255,255,0));transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
.gc:hover .gimg::after{left:120%}
.g-type-badge{backdrop-filter:blur(4px);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);color:#fff}
.g-type-badge.g-play-direct{background:rgba(16,185,129,.28);border-color:rgba(74,222,128,.35)}

/* ── Pied de page vivant ── */
.footer{position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#009639 0 33%,#CE1126 33% 66%,#FCD116 66%);opacity:.9}
.footer-live[hidden]{display:none}.footer-live{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin-bottom:2rem}
.footer-live div{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:.8rem .9rem;text-align:center}
.footer-live b{display:block;font-family:'Syne',sans-serif;font-size:1.25rem;color:var(--gold)}
.footer-live small{color:var(--text3);font-size:.7rem}
.footer-cm{display:inline-flex;align-items:center;gap:.5rem}
.footer-cm i{display:inline-flex;width:22px;height:15px;border-radius:2px;overflow:hidden;box-shadow:0 1px 3px #000a}
.footer-cm i::before{content:'';flex:1;background:#009639}.footer-cm i::after{content:'';flex:1;background:#FCD116}
.footer-cm i span{flex:1;background:#CE1126;display:grid;place-items:center;color:#FCD116;font-size:8px;line-height:1}
.footer-top{position:fixed;right:1rem;bottom:5.2rem;width:40px;height:40px;border-radius:12px;background:var(--bg3);border:1px solid var(--border);color:var(--text);cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;z-index:90;font-size:1rem}
.footer-top.show{opacity:1;transform:none}
.fbot{align-items:center}

@media(prefers-reduced-motion:reduce){
  .hero-in,.hero.is-ready .hero-in{opacity:1;transform:none;animation:none}
  .hero-africa-shape,.af-cm-ring,.hs-card,.hs-board b,.hs-bar i,[data-reveal].is-in>*,[data-reveal="one"].is-in,.al-gameloader-icon,.al-gameloader-icon::before{animation:none!important}
  [data-reveal]:not(.is-in)>*,[data-reveal="one"]:not(.is-in){opacity:1}
  .gimg::after{display:none}
}
/* V98 — ta place au classement, dans la barre (bureau) et sur l'onglet (téléphone). */
.nav-rank{color:var(--gold);font-weight:700}
.bn-item{position:relative}
.bn-badge{position:absolute;top:2px;right:calc(50% - 26px);min-width:22px;height:16px;padding:0 5px;border-radius:9px;background:var(--gold);color:#111;font-style:normal;font-size:.56rem;font-weight:900;line-height:16px;text-align:center;box-shadow:0 2px 6px #0008}

/* V107 — Premium : badge ★ discret, cadres, page Premium, statistiques. */
.pstar{display:inline-block;margin-left:5px;color:var(--gold);font-size:.85em;line-height:1;vertical-align:baseline;text-shadow:0 0 6px rgba(245,166,35,.55)}
.pstar.sm{font-size:.78em;margin-left:4px}
.tpremium{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(245,166,35,.16);color:var(--gold);font-size:.62rem;font-weight:800;vertical-align:middle;letter-spacing:.02em}
.prem-list{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.4rem}
.prem-item{display:flex;gap:.7rem;align-items:flex-start;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:.85rem .9rem}
.prem-ic{flex:0 0 auto;min-width:36px;height:36px;border-radius:10px;background:rgba(245,166,35,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;padding:0 6px}
.prem-t{font-weight:700;font-size:.84rem;margin-bottom:2px}.prem-d{font-size:.74rem;color:var(--text2);line-height:1.5}
.prem-bonus{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
/* V107 — classement épuré + profil public */
.lb-head{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--text2);margin:0 0 .5rem}
.lb-me{background:rgba(59,130,246,.15);color:var(--blue);border:1px solid rgba(59,130,246,.35);border-radius:999px;padding:3px 10px;font-size:.7rem;font-weight:700;cursor:pointer}
.lrow{cursor:pointer}.lrow:hover{border-color:rgba(245,166,35,.45);transform:translateX(2px)}.lrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lrow.flash{box-shadow:0 0 0 2px var(--blue)}
.lb-av{border-radius:50%}
.pp-hero{display:flex;align-items:center;gap:.9rem;margin-bottom:.8rem}
.pp-meta{flex:1;min-width:0}.pp-name{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-sub{font-size:.74rem;color:var(--text2);margin-top:2px}
.pp-pts{text-align:right;flex:0 0 auto}.pp-pts b{display:block;font-family:'Syne',sans-serif;font-size:1.15rem;color:var(--gold)}.pp-pts span{font-size:.64rem;color:var(--text3)}
.pp-line{font-size:.78rem;color:var(--text2);padding:.45rem 0;border-top:1px solid var(--border)}
.pp-stats{display:flex;flex-wrap:wrap;gap:.5rem;padding:.6rem 0;border-top:1px solid var(--border)}
.pp-stats>div{flex:1 1 90px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.55rem .6rem;text-align:center}
.pp-stats b{display:block;font-family:'Syne',sans-serif;font-size:1rem}.pp-stats span{font-size:.64rem;color:var(--text3)}
.pp-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}.pp-actions .bp,.pp-actions .bg{font-size:.8rem}
.pp-chip{display:inline-flex;align-items:center;padding:.5rem .8rem;border-radius:10px;background:var(--bg2);border:1px solid var(--border);font-size:.78rem;color:var(--text2)}
.pp-chip.ok{color:var(--green);border-color:rgba(16,185,129,.35)}
.stat-sec{margin-top:.8rem;padding-top:.6rem;border-top:1px solid var(--border)}.stat-sec h4{font-size:.8rem;margin:0 0 .45rem}
.stat-table{display:flex;flex-direction:column;gap:.3rem}
.stat-row{display:grid;grid-template-columns:1.4fr 1fr 1fr .9fr;gap:.4rem;font-size:.74rem;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem;align-items:center}
.stat-row>span:first-child{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.prem-list{grid-template-columns:1fr}.stat-row{grid-template-columns:1.3fr 1fr 1fr;font-size:.7rem}.stat-row>span:nth-child(4){display:none}.lrow{padding:.65rem .7rem;gap:.55rem}}
/* V108 — communauté WhatsApp (sobre), fiche au-dessus des couches fixes, lignes cliquables */
.wa-communaute{display:flex;align-items:center;gap:.6rem;margin-top:.85rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text2);font-size:.78rem;text-decoration:none;transition:border-color .2s,color .2s}
.wa-communaute:hover{border-color:rgba(37,211,102,.45);color:var(--text)}
.wa-communaute .wa-ic{display:inline-flex;width:26px;height:26px;border-radius:8px;align-items:center;justify-content:center;background:rgba(37,211,102,.12);color:#25d366;flex:0 0 auto}
.wa-communaute .wa-fleche{margin-left:auto;color:var(--text3);font-size:1rem}
.moverlay.au-dessus{z-index:99500}
.joueur-row.cliquable{cursor:pointer}.joueur-row.cliquable:hover{border-color:rgba(245,166,35,.45)}
/* V108 — navigation : menu profil accroché à l'avatar, cinq destinations en bas */
.nav-group-right .nav-dropdown-right{left:auto;right:0;min-width:230px}
.nav-group-right.deconnecte .nav-dropdown{display:none}
.nav-group-right .user-pill{cursor:pointer}
.nav-group-right .nav-group-trigger:after{display:none}
.ndl-sortie{color:var(--red);border-top:1px solid var(--border);margin-top:4px;padding-top:9px}
a.ndl,a.nl{text-decoration:none}
.nav-links .nav-group .nl{display:flex;align-items:center;gap:5px}
@media(max-width:640px){.bn-item{font-size:clamp(.56rem,2.6vw,.64rem)}}

/* ── V112 — Passeport gamer : le parcours (clan → ville → pays → Afrique) et
   les titres. Même ligne sur le profil, en tête du classement (compacte,
   étape active surlignée) et sur la fiche publique (sans clic). ── */
.pc-eyebrow{font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:.35rem;opacity:.9}
.pc-ligne{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .6rem}
.pc-step{display:inline-flex;align-items:baseline;gap:.3rem;background:var(--bg3);border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-size:.76rem;color:var(--text2);line-height:1.2;white-space:nowrap}
.pc-step b{font-family:'Syne',sans-serif;font-size:.9rem;color:var(--text)}
.pc-step small{font-size:.66rem;color:var(--text3)}
.pc-step em{font-style:normal;color:var(--text2)}
.pc-step.pc-lien{cursor:pointer;transition:border-color .2s,background .2s}
.pc-step.pc-lien:hover,.pc-step.pc-lien:focus-visible{border-color:var(--gold);background:rgba(245,166,35,.08);outline:none}
.pc-step.actif{border-color:rgba(245,166,35,.55);background:rgba(245,166,35,.12);color:var(--text)}
.pc-step.pc-vide{border-style:dashed;color:var(--text3)}
.pc-ligne.compact .pc-step{padding:4px 9px;font-size:.72rem}
.pc-ligne.compact{margin:0}
.pc-titres{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem}
.pc-titre{font-size:.7rem;font-weight:600;color:var(--gold);background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.28);border-radius:8px;padding:3px 8px}
.pc-titre.vide{color:var(--text3);background:transparent;border-style:dashed;border-color:var(--border);font-weight:400}
.lb-parcours{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .75rem;padding:.6rem .75rem;background:var(--bg2);border:1px solid var(--border);border-radius:12px}
.lb-parcours-lbl{font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);font-weight:700}
.pp-hero+.pc-ligne,.pp-line+.pc-ligne{margin:.1rem 0 .5rem}

/* ── V112 — la barre du haut accueille le bouton audio (à côté de la cloche).
   Ces règles vivent ici, en fin de cascade, pour passer devant les largeurs
   fixes de .notif-btn / .hb / .logo définies plus haut. ── */
/* Tablette en portrait (641–960 px) : la barre du haut garde ses liens mais se
   resserre, pour que l'ajout du bouton audio ne pousse rien hors de l'écran. */
@media(min-width:641px) and (max-width:960px){
  .nav-inner{gap:.55rem;padding:0 .9rem}
  .logo{font-size:1.02rem}
  .nl{padding:6px 7px;font-size:.78rem}
  .nav-right{gap:5px}
  .audio-btn,.notif-btn{width:40px;height:40px}
  .nav-right .bg,.nav-right .bp{padding:8px 11px;font-size:.78rem}
}
/* Petits téléphones (≤ 480 px), joueur connecté : logo, pastille K-Points
   (l'éclair suffit, « KP » disparaît), boutons ronds et ☰ se resserrent pour
   que le bouton audio tienne dans la barre sans pousser le menu hors champ. */
@media(max-width:480px){
  .nav-inner{gap:.3rem;padding:0 .6rem}
  .logo{font-size:.82rem;gap:3px}
  .nav-right{gap:4px}
  .pts-pill{padding:4px 7px;font-size:.7rem;gap:3px}
  .pts-pill .pts-unit{display:none}
  .audio-btn,.notif-btn,.hb{width:38px;height:38px;min-width:38px;min-height:38px}
}

/* ── V115 — économie sans mise : modes de tournoi, transparence, soldes ── */
.tmode{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:.62rem;font-weight:800;vertical-align:middle;letter-spacing:.02em}
.tmode-gratuit{background:rgba(34,197,94,.14);color:var(--green)}
.tmode-sponso{background:rgba(59,130,246,.16);color:var(--cyan)}
.tmode-premium{background:rgba(245,166,35,.16);color:var(--gold)}
.ttransp{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:.55rem .7rem;margin-bottom:.55rem}
.ttransp-t{font-size:.7rem;font-weight:800;color:var(--gold);margin-bottom:.3rem;letter-spacing:.04em;text-transform:uppercase}
.ttransp-row{display:flex;justify-content:space-between;gap:.6rem;font-size:.7rem;color:var(--text2);padding:.18rem 0;border-top:1px dashed var(--border)}
.ttransp-row:first-of-type{border-top:0}
.ttransp-row span{flex:0 0 38%;color:var(--text3)}
.ttransp-row strong{color:var(--text);text-align:right;font-weight:600;min-width:0}
.pstat-pc .pstat-val{color:var(--gold)}

/* ── V116 — catalogue illustré (17.9 → 17.14) ─────────────────────────── */
/* La couverture : une vraie image, recadrée en « cover », ratio constant. */
.gcover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg3)}
.gcover>svg,.gcover>img,.gcover-img{display:block;width:100%;height:100%;object-fit:cover}
.gcover-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.6rem}
.gcover::after{content:'';position:absolute;left:-60%;top:-40%;width:50%;height:180%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0));transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
.gc:hover .gcover::after{left:120%}
.gcover-off{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;letter-spacing:.08em}
/* Les statuts : deux au plus, en haut à gauche, lisibles sur toute image. */
.gcover-chips{position:absolute;left:8px;top:8px;right:8px;display:flex;flex-wrap:wrap;gap:4px;pointer-events:none}
.gstatut{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.62rem;font-weight:800;letter-spacing:.02em;color:#fff;background:rgba(8,10,18,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(4px)}
.gs-nouveau{background:rgba(245,166,35,.85);color:#111;border-color:transparent}
.gs-tournoi{background:rgba(124,58,237,.85);border-color:transparent}
.gs-populaire{background:rgba(220,38,38,.8);border-color:transparent}
.gs-maintenance{background:rgba(100,116,139,.9);border-color:transparent}
.gs-une{background:var(--gold);color:#111;border-color:transparent}
.gc-maint .gcover>*{filter:grayscale(.6) brightness(.7)}
.gdesc{font-size:.72rem;color:var(--text2);line-height:1.5;margin-top:2px}
.gtag-cat{background:rgba(255,255,255,.06);color:var(--text2)}
/* La carte mise en avant : pleine largeur, image plus large. */
.gc-une{grid-column:1/-1}
.gcover-une{aspect-ratio:16/7}
.gc-une .ginfo h3{font-size:1.15rem}
.gc-une .gdesc{font-size:.8rem}
@media(min-width:700px){
  .gc-une{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .gcover-une{aspect-ratio:auto;height:100%;min-height:230px}
}
/* La grille : deux colonnes sur téléphone, plus au fur et à mesure. */
.ggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media(min-width:560px){.ggrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}}
@media(min-width:900px){.ggrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.95rem}}
@media(min-width:1240px){.ggrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:359px){.ggrid{grid-template-columns:1fr}}
@media(max-width:559px){
  .gc .ginfo{padding:.65rem .6rem}
  .gc .ginfo h3{font-size:.8rem}
  .gc .gdesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .gactions{grid-template-columns:1fr}
  .gactions.odd>.gact:first-child{grid-column:auto}
}
/* Les catégories : une ligne qui défile sur téléphone, sans retour à la ligne. */
.games-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin-bottom:.9rem;max-width:100%}
.games-tabs::-webkit-scrollbar{display:none}
.gtab{flex:0 0 auto;min-height:36px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.gcover::after{display:none}}
.gact-plus{font-weight:500;color:var(--text2)}

/* ── V116 — le lecteur immersif ──────────────────────────────────────── */
.game-player-overlay{height:100vh;height:100dvh;background:#000}
.game-hud{position:relative;z-index:3;display:flex;align-items:center;gap:.5rem;min-height:44px;padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(13,15,20,.98),rgba(13,15,20,.92));border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.hud-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font-size:1.25rem;line-height:1;flex-shrink:0}
.hud-btn:hover,.hud-btn:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
.hud-back span{font-size:1.6rem;margin-top:-3px}
.hud-title{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.hud-title h3{font-family:'Inter',sans-serif;font-size:.9rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;line-height:1.15}
.hud-sub{font-size:.66rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-right{display:flex;align-items:center;gap:.45rem;flex-shrink:0}
.hud-right .game-timer{font-size:.9rem;padding:0 2px}
.game-menu{position:absolute;right:max(8px,env(safe-area-inset-right));top:calc(100% + 4px);width:min(300px,calc(100vw - 16px));background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);padding:.4rem;display:flex;flex-direction:column;gap:2px;z-index:5}
.game-menu[hidden]{display:none}
.game-menu button{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:none;border:none;border-radius:9px;padding:.65rem .7rem;color:var(--text);font:600 .84rem 'Inter',sans-serif;cursor:pointer;min-height:44px}
.game-menu button:hover,.game-menu button:focus-visible{background:rgba(255,255,255,.06);outline:none}
.game-menu button.bp{background:var(--gold);color:#111;justify-content:center;margin:.2rem 0}
.game-menu button.danger{color:#fca5a5}
.game-menu-note{font-size:.72rem;color:var(--text2);line-height:1.45;padding:.4rem .6rem .5rem;border-bottom:1px solid var(--border);margin-bottom:.2rem}
.game-menu-note:empty{display:none}
.game-iframe-wrap{flex:1;position:relative;overflow:hidden;min-height:0}
.game-rotate{display:none;position:absolute;inset:0;z-index:4;background:rgba(13,15,20,.92);align-items:center;justify-content:center;padding:1.2rem;text-align:center}
.game-rotate-card{display:flex;flex-direction:column;gap:.5rem;align-items:center;max-width:300px;color:var(--text)}
.game-rotate-card span{font-size:.8rem;color:var(--text2)}
.game-rotate-icon{font-size:2.6rem;animation:al-rotate 1.6s ease-in-out infinite}
@keyframes al-rotate{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
@media(orientation:portrait) and (max-width:900px){.game-player-overlay.open[data-orientation="paysage"] .game-rotate:not(.dismissed){display:flex}}
@media(prefers-reduced-motion:reduce){.game-rotate-icon{animation:none}}
@media(orientation:landscape) and (max-height:500px){.game-hud{min-height:36px;padding-top:2px;padding-bottom:2px}.hud-btn{width:32px;height:32px}.hud-sub{display:none}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── V116 — cartes minimalistes et accueil direct ─────────────────────── */
.gc-mini{border-radius:16px}
.gc-mini .gcover{aspect-ratio:4/3;cursor:pointer}
.gc-cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .6rem .5rem;background:linear-gradient(180deg,rgba(13,15,20,0),rgba(13,15,20,.82) 70%);pointer-events:none}
.gc-cap h3{font-family:'Inter',sans-serif;font-size:.84rem;font-weight:800;letter-spacing:-.01em;color:#fff;margin:0;line-height:1.15;text-shadow:0 1px 6px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-sub{display:block;font-size:.62rem;color:rgba(255,255,255,.78);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-act{display:flex;gap:.35rem;padding:.45rem}
.gc-act .gact{min-height:38px;padding:5px 8px;border-radius:10px;flex:1;font-size:.78rem}
.gc-act .gact-more{flex:0 0 38px;font-size:1.1rem;font-weight:800;padding:0}
.gc-off .gcover{filter:grayscale(.5)}
.ggrid-mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media(min-width:560px){.ggrid-mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}}
@media(min-width:900px){.ggrid-mini{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-games-more{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.home-games-more .bg,.home-games-more .bp{min-height:46px}
.sh-compact{margin-bottom:.9rem}
.sh-compact h2{font-size:1.25rem}
.sec-jeux-accueil{padding-top:1.4rem!important}
@media(max-width:640px){
  /* L'accroche se fait courte pour que les jeux arrivent tout de suite. */
  .hero{padding:4.6rem 1rem 1.25rem}
  .hero-badge{display:none}
  .hero-title{font-size:clamp(1.6rem,8vw,2.1rem);margin-bottom:.5rem}
  .hero-desc{font-size:.88rem;margin-bottom:.8rem}
  .hero-scene,.hero-pills{display:none}
  .sec-jeux-accueil{padding-top:.9rem!important;padding-bottom:1.4rem!important}
  .gc-act .gact small{display:none}
}
.notif-go{color:var(--gold);font-weight:700}.notif-lien:hover .notif-go{text-decoration:underline}

/* V116 — mentions @jeu / @salon / @tournoi / @joueur dans les messages */
.al-mention{display:inline-flex;align-items:center;gap:.2rem;background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.35);color:var(--gold);border-radius:999px;padding:0 .5rem;font:700 .8rem 'Inter',sans-serif;cursor:pointer;vertical-align:baseline;line-height:1.5}
.al-mention:hover{background:rgba(245,166,35,.24)}
.al-mention-salon{color:var(--cyan);border-color:rgba(6,182,212,.4);background:rgba(6,182,212,.12)}
.al-mention-joueur{color:var(--green);border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.12)}

/* ── V116 — pied de page en trois colonnes ─────────────────────────────── */
.fg-grid-3{grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
.fl-contact{margin-top:1.1rem}
.fl-contact h4{margin-bottom:.4rem}
@media(max-width:900px){.fg-grid-3{grid-template-columns:1.3fr 1fr 1fr;gap:1.2rem}}
@media(max-width:640px){
  .fg-grid-3{grid-template-columns:1fr 1fr;gap:1.2rem}
  .fg-grid-3 .fb-brand{grid-column:1/-1}
  .fb-brand p{max-width:none}
}
@media(max-width:359px){.fg-grid-3{grid-template-columns:1fr}}
.fl-contact .pbadge{display:inline-block;width:auto;margin:0 .35rem .3rem 0}

/* V116 — partie rapide depuis une discussion */
.chat-play-btn{flex:0 0 auto;font-size:1rem;padding:.4rem .6rem;min-height:40px;border-color:rgba(245,166,35,.4);color:var(--gold)}

/* ── V117 — « Nous serons de retour bientôt » (arena-retour.js) ───────── */
/* Le voile d'une carte en pause : le logo et la promesse, jamais « désactivé ». */
.gcover-off{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,20,.35),rgba(13,15,20,.78));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:.66rem;font-weight:800;color:#fff;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:.4rem}
.gcover-off img{width:28px;height:28px;border-radius:8px;box-shadow:0 6px 16px rgba(245,166,35,.3)}
.gc-off .gcover>svg,.gc-off .gcover>img.gcover-img,.gc-maint .gcover>svg,.gc-maint .gcover>img.gcover-img{filter:grayscale(.55) brightness(.75)}
.gact.gact-retour{background:rgba(245,166,35,.12);color:var(--gold);border:1px solid rgba(245,166,35,.35);font-weight:700}
/* La fenêtre et l'encart : même dessin que /maintenance. */
.retour-bientot{text-align:center;padding:.4rem .2rem .2rem}
.retour-logo{display:block;width:72px;height:72px;margin:0 auto .5rem;border-radius:20px;box-shadow:0 14px 34px rgba(245,166,35,.22);animation:retourPulse 3.2s ease-in-out infinite}
@keyframes retourPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.retour-brand{font-weight:800;font-size:1.05rem;letter-spacing:-.2px;margin-bottom:.8rem}
.retour-brand small{color:var(--gold);font-size:.7em;font-weight:800;margin-left:.2rem;vertical-align:top}
.retour-eyebrow{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);border-radius:999px;padding:.25rem .7rem;margin-bottom:.6rem}
.retour-titre{font-size:1.25rem;font-weight:800;line-height:1.2;margin:0 0 .45rem}
.retour-texte{color:var(--text2);font-size:.88rem;line-height:1.55;margin:0}
.retour-dots{display:inline-flex;gap:6px;margin:.8rem 0 .1rem}
.retour-dots i{width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:.35;animation:retourBlink 1.4s infinite}
.retour-dots i:nth-child(2){animation-delay:.2s}.retour-dots i:nth-child(3){animation-delay:.4s}
@keyframes retourBlink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.retour-page{max-width:480px;margin:1.5rem auto;background:var(--card,rgba(255,255,255,.04));border:1px solid var(--border);border-radius:20px;padding:1.4rem 1.2rem}
@media(prefers-reduced-motion:reduce){.retour-logo,.retour-dots i{animation:none}}
body.low-data .retour-logo,body.low-data .retour-dots i{animation:none}

/* ── V117 — trouver un adversaire (matchmaking) ─────────────────────── */
.mm-box{text-align:center;padding:.2rem 0 .4rem}
.mm-cover{width:min(100%,260px);margin:0 auto .6rem;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--bg3)}
.mm-cover>svg,.mm-cover>img{display:block;width:100%;height:100%;object-fit:cover}
.mm-radar{position:relative;width:64px;height:64px;margin:-52px auto .3rem;pointer-events:none}
.mm-radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:mmPing 2.4s ease-out infinite}
.mm-radar i:nth-child(2){animation-delay:.8s}.mm-radar i:nth-child(3){animation-delay:1.6s}
@keyframes mmPing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.mm-titre{font-size:1.05rem;font-weight:800;margin:.4rem 0 .3rem}
.mm-texte{color:var(--text2);font-size:.84rem;line-height:1.5;margin:0 0 .6rem}
.mm-stats{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;font-size:.78rem;color:var(--text2)}
.mm-stats b{color:var(--text)}
.mm-note{font-size:.7rem;color:var(--text3);margin-top:.5rem}
@media(prefers-reduced-motion:reduce){.mm-radar i{animation:none;opacity:.5;transform:none}}
body.low-data .mm-radar i{animation:none;opacity:.5;transform:none}

/* ── V117 — passeport : fair-play, adversaires, cadeaux ─────────────── */
.pp-fairplay{position:relative;padding-bottom:.7rem}
.pp-fairplay b{color:var(--text)}
.pp-fp-bar{position:absolute;left:0;right:0;bottom:.3rem;height:3px;border-radius:2px;background:rgba(255,255,255,.08);display:block}
.pp-fp-bar>i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold),#22c55e)}
.pp-adv{padding:.55rem 0 .2rem;border-top:1px solid var(--border)}
.pp-adv-t{font-size:.7rem;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}
.pp-adv-list{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}
.pp-adv-list::-webkit-scrollbar{display:none}
.pp-adv-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:.3rem .6rem .3rem .3rem;color:var(--text);font:inherit;font-size:.74rem;cursor:pointer;min-height:36px}
.pp-adv-chip:hover{border-color:var(--gold)}
.pp-adv-nom{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pp-adv-score{font-size:.7rem;color:var(--text3)}
.pp-adv-score b{font-weight:800}
.cadeaux-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}
.cadeau{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:.5rem .2rem;cursor:pointer;text-align:center;position:relative;min-height:74px}
.cadeau input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cadeau:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 2px rgba(245,166,35,.25)}
.cadeau.trop-cher{opacity:.45}
.cadeau-emoji{font-size:1.5rem;line-height:1}
.cadeau-nom{font-size:.66rem;font-weight:700;line-height:1.1}
.cadeau-prix{font-size:.62rem;color:var(--gold);font-weight:800}
.chat-gift-btn{margin-left:.25rem}

/* ── V117 — catalogue : recherche, favoris ──────────────────────────── */
.games-search{margin:-.3rem 0 .9rem}
.games-search input{width:100%;min-height:44px;border-radius:12px;border:1px solid var(--border);background:var(--bg2);color:var(--text);padding:.6rem .9rem;font:inherit;font-size:.9rem}
.games-search input:focus{outline:2px solid var(--gold);outline-offset:1px}
.fav-btn.on{color:var(--gold)}
/* ── V117 — publicité encadrée (17.20) : toujours identifiée, jamais un bouton de jeu ── */
.pub-carte{text-decoration:none;color:inherit;display:block;border-color:rgba(245,166,35,.35)}
.pub-carte .gcover{aspect-ratio:16/10}
.pub-fallback{background:linear-gradient(135deg,#1f2937,#374151)}
.gs-pub{background:rgba(245,166,35,.92);color:#111;border-color:transparent}
.pub-texte{font-size:.7rem;color:var(--text2);padding:.45rem .55rem;line-height:1.4;min-height:38px}
.pub-bandeau{display:flex;gap:.7rem;align-items:center;text-decoration:none;color:inherit;background:var(--bg2);border:1px solid rgba(245,166,35,.3);border-radius:12px;padding:.55rem .7rem;margin:.6rem 0;grid-column:1/-1}
.pub-bandeau .pub-img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.pub-corps{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.78rem}
.pub-corps strong{font-size:.86rem}
.pub-corps span:not(.pub-tag){color:var(--text2);font-size:.74rem}
.pub-tag{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.al-postgame-inner .pub-bandeau{margin:.6rem 0 0}
/* V117 — le pseudo du passeport ne se coupe plus (il passe à la ligne) ; la colonne des points reste étroite. */
.pp-name{white-space:normal;overflow-wrap:anywhere;line-height:1.15}
.pp-pts{max-width:36%}.pp-pts span{display:block;line-height:1.15}

/* ── V118 — agenda, vidéo récompensée, vérification du numéro, suivis, clans ── */
.evt-titre{font-size:.72rem;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin:1.1rem 0 .5rem}
.evt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:.7rem}
.evt-card{display:flex;gap:.7rem;align-items:flex-start;background:var(--card,rgba(255,255,255,.04));border:1px solid var(--border);border-radius:14px;padding:.75rem .85rem;min-width:0}
.evt-card[role=button]{cursor:pointer}.evt-card[role=button]:hover{border-color:rgba(245,166,35,.4)}
.evt-card.en-cours{border-color:rgba(34,197,94,.4)}
.evt-ic{width:44px;height:44px;border-radius:12px;background:rgba(245,166,35,.12);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:0 0 auto}
.evt-img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:var(--bg3)}
.evt-corps{min-width:0;flex:1}
.evt-quand{font-size:.68rem;color:var(--gold);font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.evt-nom{font-weight:800;font-size:.92rem;margin:.1rem 0;overflow-wrap:anywhere}
.evt-meta{font-size:.72rem;color:var(--text3)}
.evt-desc{font-size:.76rem;color:var(--text2);margin-top:.3rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-rec{display:flex;gap:.8rem;align-items:center;background:var(--bg2);border:1px solid rgba(245,166,35,.3);border-radius:14px;padding:.8rem .9rem;margin:1rem 0}
.video-rec-ic{font-size:1.6rem;flex:0 0 auto}
.video-rec .bp,.video-rec .bg{flex:0 0 auto}
.video-rec-player{display:block;width:100%;max-height:60vh;border-radius:12px;background:#000}
@media(max-width:520px){.video-rec{flex-wrap:wrap}.video-rec .bp,.video-rec .bg{flex:1 1 100%}}
.verif-code{display:flex;gap:.4rem;justify-content:center;margin:.4rem 0}
.verif-code span{width:40px;height:50px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;color:var(--gold)}
.suivi-row{display:flex;align-items:center;gap:.6rem;background:var(--bg3);border-radius:10px;padding:.55rem .7rem}
#ppSuivreBtn.on{border-color:var(--gold);color:var(--gold)}
.clan-infos{font-size:.8rem;color:var(--text2);margin-bottom:.6rem}
.clan-infos b{color:var(--text)}
.clan-annonce{margin-top:.45rem;background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.25);border-radius:10px;padding:.55rem .7rem;font-size:.82rem;color:var(--text);line-height:1.45;white-space:pre-wrap}
.clan-annonce small{display:block;color:var(--text3);margin-top:.2rem;font-size:.68rem}

/* ── V118 — la conversation à côté (ordinateur, tablette) ou par-dessus (téléphone) ── */
.chat-back{display:none;flex:0 0 auto;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:1.4rem;line-height:1;font-weight:800;cursor:pointer;padding:0 0 3px}
@media(max-width:760px){
  .chat-layout .chat-thread-panel{display:none}
  .chat-layout.thread-open .chat-thread-panel{display:flex;position:fixed;inset:0;z-index:1150;height:100dvh;min-height:0;border-radius:0;border:0;background:var(--bg2);animation:convIn .22s ease-out;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .chat-layout.thread-open .chat-thread-panel .chat-messages{flex:1;max-height:none;min-height:0}
  .chat-back{display:inline-flex;align-items:center;justify-content:center}
  body.thread-open .bottom-nav,body.thread-open .chatbot-btn{display:none!important}
}
@keyframes convIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.chat-layout.thread-open .chat-thread-panel{animation:none}}

/* ── V118 — le chat dès l'accueil ──────────────────────────────────────── */
.sh-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.sh-row>div{min-width:0}
.sh-link{color:var(--text2);text-decoration:none;font-size:.85rem;font-weight:600;white-space:nowrap;padding-bottom:.4rem}
.sh-link:hover{color:var(--gold)}
.home-chat{background:var(--card,rgba(255,255,255,.04));border:1px solid var(--border);border-radius:18px;padding:1rem 1.1rem;margin-bottom:.9rem}
.home-chat-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a78bfa}
.home-chat-head h3{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:800;margin:.25rem 0 .15rem;overflow-wrap:anywhere}
.home-chat-head p{color:var(--text2);font-size:.86rem;margin:0 0 .7rem;line-height:1.5}
.home-chat-msgs{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.8rem}
.home-chat-msg{display:flex;gap:.45rem;align-items:baseline;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.45rem .65rem;font-size:.8rem;min-width:0}
.home-chat-msg b{flex:0 0 auto;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-chat-msg span{flex:1;min-width:0;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-chat-msg small{flex:0 0 auto;color:var(--text3);font-size:.66rem}
.home-chat-btn{min-height:46px}
.home-chat-btn small{font-weight:500;opacity:.8}
@media(max-width:520px){.sh-row{flex-direction:column;align-items:flex-start;gap:.2rem}.sh-link{padding-bottom:0}.home-chat-btn{width:100%}}
/* V118 — niveau du micro dans la barre d'appel */
.arena-live-call__level{position:relative;width:44px;height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden;flex:0 0 auto}
.arena-live-call__level::after{content:'';position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--lvl,0));background:linear-gradient(90deg,#22c55e,#f5a623);transition:transform .12s linear}

/* ═══ V120 — Communauté simplifiée : deux onglets, un « + », Invitations en tête ═══ */
.cm-top{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem}
.cm-tabs{display:flex;flex:1;gap:.35rem;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:.3rem}
.cm-tab{flex:1;min-height:46px;border:0;border-radius:11px;background:transparent;color:var(--text2);font:700 .9rem/1 'Inter',sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;transition:background .18s,color .18s}
.cm-tab:hover{color:var(--text)}
.cm-tab.active{background:var(--gold);color:#1a1206;box-shadow:0 4px 14px rgba(245,166,35,.28)}
.cm-tab:focus-visible,.cm-plus:focus-visible,.cm-invit .bp:focus-visible,.cm-invit .bg:focus-visible{outline:3px solid rgba(245,166,35,.55);outline-offset:2px}
.cm-count{display:inline-block;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--bg3);color:var(--text);font-style:normal;font-size:.68rem;font-weight:900;line-height:20px;text-align:center}
.cm-tab.active .cm-count{background:rgba(0,0,0,.18);color:#1a1206}
.cm-count.gold{background:var(--gold);color:#1a1206}
/* Les deux boutons ronds : 📥 invitations (badge orange = nombre en attente) et + */
.cm-round{width:50px;height:50px;flex:0 0 auto;position:relative;border-radius:50%;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:1.25rem;cursor:pointer;display:grid;place-items:center;transition:transform .15s,border-color .15s}
.cm-round:hover{transform:scale(1.05);border-color:rgba(245,166,35,.45)}
.cm-round:active{transform:scale(.96)}
.cm-inbox.has{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,166,35,.18)}
.cm-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--gold);color:#1a1206;font-style:normal;font-size:.66rem;font-weight:900;line-height:20px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.cm-badge[hidden]{display:none}
.cm-plus{border:0;background:var(--gold);color:#1a1206;font:900 1.7rem/1 'Syne',sans-serif;box-shadow:0 6px 18px rgba(245,166,35,.35)}
/* Le panneau Invitations (dans la fenêtre générique) */
.cm-invits{display:flex;flex-direction:column;gap:.5rem;max-height:min(62vh,560px);overflow:auto;padding:2px}
.cm-invits .es{padding:.6rem 0}
.cm-invit{background:var(--bg2);border:1px solid var(--border);border-radius:13px;padding:.7rem .8rem;transition:opacity .25s,transform .25s}
.cm-invit.cm-ok{opacity:0;transform:translateX(18px)}
.cm-invit.cm-bye{opacity:0;transform:translateX(-18px)}
.cm-invit[aria-busy="true"]{opacity:.7}
.cm-invit-row{display:flex;align-items:center;gap:.65rem;min-width:0}
.cm-invit-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-invit-txt b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-invit-txt span{font-size:.78rem;color:var(--text2)}
.cm-invit-actions{display:flex;gap:.45rem;margin-top:.6rem;flex-wrap:wrap}
.cm-invit-actions .bp,.cm-invit-actions .bg{flex:1 1 120px;min-height:44px;font-size:.85rem;padding:.55rem .8rem}
.cm-invit-more{flex:0 0 auto;min-height:40px;min-width:40px;padding:.4rem .6rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:.78rem;cursor:pointer;white-space:nowrap}
.cm-invit-more:hover{color:var(--text);border-color:rgba(245,166,35,.4)}
.cm-av{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--bg3);color:var(--gold);font-weight:900;font-size:.95rem;overflow:hidden}
.cm-av.has-emblem{background:none}
.cm-av svg{width:100%;height:100%;display:block}
/* Panneau Amis : sections, lignes, pastilles */
.cm-sec-titre{display:flex;align-items:center;gap:.4rem;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:.55rem .4rem .3rem;font-weight:700}
.cm-sec-titre .cm-count{min-width:18px;height:18px;line-height:18px;font-size:.62rem}
.cm-ami{min-height:56px}
.cm-ami .cm-av{width:36px;height:36px;font-size:.85rem}
.cm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text3);vertical-align:0}
.cm-dot.on{background:#22c55e;box-shadow:0 0 6px #22c55e}
.cm-chev{color:var(--text3);font-size:1.2rem;padding-right:.2rem}
.cm-duel{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.55rem .65rem;margin-bottom:.4rem}
.cm-duel-txt{display:flex;flex-direction:column;min-width:0}
.cm-duel-txt b{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-duel-txt span{font-size:.68rem;color:var(--text3)}
.cm-duel-act{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cm-mini{font-size:.7rem;padding:.4rem .6rem;min-height:36px}
.cm-muted{font-size:.7rem;color:var(--text3)}
.cm-chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:.2rem .4rem}
.cm-chip{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:.4rem .7rem;font-size:.75rem;cursor:pointer;min-height:36px}
.cm-es-actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.7rem}
.cm-es-actions .bp,.cm-es-actions .bg{min-height:44px}
/* Menu « + » et sélecteur d'ami */
.cm-plus-list{display:flex;flex-direction:column;gap:.45rem}
.cm-plus-item{display:flex;align-items:center;gap:.8rem;width:100%;min-height:58px;padding:.6rem .8rem;border:1px solid var(--border);border-radius:12px;background:var(--bg2);color:var(--text);text-align:left;cursor:pointer;font-family:'Inter',sans-serif}
.cm-plus-item:hover{border-color:rgba(245,166,35,.45)}
.cm-plus-item:disabled{opacity:.7;cursor:default}
.cm-plus-item span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.cm-plus-item b{font-size:.9rem}
.cm-plus-item small{font-size:.72rem;color:var(--text2)}
.cm-plus-ic{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:rgba(245,166,35,.15);display:grid;place-items:center;font-size:1.2rem}
/* Tirer pour actualiser (mobile) */
.cm-pull{height:0;overflow:hidden;text-align:center;font-size:.75rem;color:var(--text2);transition:height .2s}
.cm-pull.on{height:28px;line-height:28px}
/* Badge du menu de bureau */
.cm-nav-badge{display:inline-block;min-width:18px;height:18px;padding:0 5px;margin-left:.4rem;border-radius:9px;background:var(--gold);color:#111;font-style:normal;font-size:.62rem;font-weight:900;line-height:18px;text-align:center;vertical-align:middle}
@media(max-width:640px){
  .cm-invit-actions .bp,.cm-invit-actions .bg{flex:1 1 40%}
  .cm-invit-more span{display:none}
  .cm-tab{font-size:.86rem}
}
/* Mode jour : le beige et le noir du site, l'orange pour ce qui se touche */
html[data-theme="light"] .cm-tabs{background:#fff;border-color:rgba(60,42,16,.14)}
html[data-theme="light"] .cm-count{background:rgba(60,42,16,.08);color:#1B1712}
html[data-theme="light"] .cm-round{background:#fff;border-color:rgba(60,42,16,.16)}
html[data-theme="light"] .cm-plus{background:var(--gold);border:0}
html[data-theme="light"] .cm-invit,html[data-theme="light"] .cm-plus-item,html[data-theme="light"] .cm-duel{background:#fff;border-color:rgba(60,42,16,.12)}
html[data-theme="light"] .cm-av{background:rgba(60,42,16,.08);color:#b06a05}
html[data-theme="light"] .cm-chip{background:#fff}