/* ══════════════════════════════════════════════════════════════════════
   chrome.css — l'habillage permanent de l'app.
   ─────────────────────────────────────────────────────────────────────
   Barre du haut, tiroir de navigation, menu profil, bandeaux d'annonce
   et d'invitation, popups, aide de page, réactions emoji, avatars.
   Autrement dit : tout ce qui est présent quel que soit l'écran.

   Ces règles vivaient dans le <style> de base.html. Elles en sortent
   pour être mises en cache par le navigateur (base.html est rendu à
   chaque requête) et pour que le thème se règle dans des fichiers, pas
   au milieu du HTML.

   Les rayons et les ombres passent par les tokens de theme.css : ne
   réintroduis pas de valeur en dur ici, sinon le prochain réglage
   d'élévation devra repasser sur ce fichier.
   ══════════════════════════════════════════════════════════════════════ */


/* ── Barre du haut ─────────────────────────────────────────────── */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 56px; padding: 0 1rem 0 .6rem;
    /* Dégradé très court plutôt qu'un aplat : le navy s'éclaircit d'un
       cheveu vers le haut, ce qui donne une barre posée sur la page au
       lieu d'un bloc peint. */
    background: linear-gradient(180deg, #16294a 0%, var(--navy) 100%);
    /* Le liseré or faisait 2px pleins : un trait de cette épaisseur
       date immédiatement une interface. Ramené à 1px et adouci, il
       reste la signature du club sans souligner la barre. L'ombre
       prend le relais pour détacher le bandeau du contenu. */
    border-bottom: 1px solid rgba(201, 168, 76, .38);
    box-shadow: var(--sh-2);
    /* Le contenu passe sous l'encoche/la barre d'état sur iPhone. */
    padding-top: env(safe-area-inset-top);
    position: sticky; top: 0; z-index: 150;
    /* Rien ne doit sortir du bandeau : sans ça, un contenu plus large
       que l'écran pousse la page entière en débordement horizontal —
       visible sur mobile, où la marge de manœuvre est nulle.
       `min-height` et non `height` : sur téléphone la barre gagne une
       SECONDE ligne pour la chip du live (cf. plus bas), et une hauteur
       figée l'aurait tout simplement rognée. */
    overflow: hidden;
}
/* Le bloc de droite était `flex: none` : il ne se comprimait donc
   jamais et poussait tout le reste hors du bandeau. */
.tb-right { min-width: 0; }
@media (max-width: 700px) {
    /* La barre passe sur DEUX lignes : marque + actions, puis la chip du
       live en bandeau pleine largeur. `row-gap: 0` pour que le bandeau
       soit collé sous la première ligne, sans filet d'air. */
    .topbar { gap: .4rem; row-gap: 0; padding: 0 .5rem 0 .3rem;
        flex-wrap: wrap; }
    /* Rien ne concerne `.tb-live-slot` ici : sa règle de base
       `display: flex` est déclarée plus bas dans cette même feuille et,
       à spécificité égale, la dernière l'emporte — media query ou non.
       Sa mise en bandeau est donc posée juste après elle. */
}
.tb-left { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.tb-burger { background: none; border: none; cursor: pointer; padding: .5rem .55rem;
    display: flex; flex-direction: column; gap: 4px; border-radius: var(--r-sm); }
.tb-burger:hover { background: rgba(255,255,255,.12); }
.tb-burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }
.tb-brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: #fff; min-width: 0; }
.tb-brand img { width: 30px; height: 30px; object-fit: contain; flex: none; border-radius: var(--r-xs); }
.tb-brand-name { font-family: 'DM Serif Display', serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji'; font-size: 1.05rem; white-space: nowrap; }
.tb-ver { font-size: .62rem; opacity: .55; flex: none; }
@media (max-width: 560px) { .tb-brand-name, .tb-ver { display: none; } }

.tb-right { display: flex; align-items: center; gap: .5rem; flex: none; }
.tb-stats {
    display: inline-flex; align-items: center; gap: .3rem; text-decoration: none;
    color: rgba(255,255,255,.8); font-size: .85rem; font-weight: 600;
    padding: .35rem .7rem; border-radius: var(--r-full);
}
.tb-stats:hover { background: rgba(255,255,255,.12); color: #fff; }
.tb-stats.active { background: rgba(201,168,76,.25); color: #fff; }
@media (max-width: 480px) { .tb-stats-t { display: none; } }

/* Compteur de kotis : raccourci vers /kotis, à gauche de « Mes Stats ». */
.tb-kotis {
    display: inline-flex; align-items: center; gap: .3rem; text-decoration: none;
    color: rgba(255,255,255,.85); font-size: .85rem; font-weight: 700;
    padding: .35rem .7rem; border-radius: var(--r-full); flex: none;
    background: rgba(201,168,76,.18); border: 1px solid rgba(201,168,76,.4);
}
.tb-kotis:hover { background: rgba(201,168,76,.34); color: #fff; }
.tb-kotis.active { background: rgba(201,168,76,.45); color: #fff; }
.tb-kotis-v { font-variant-numeric: tabular-nums; }

.tb-profile-btn {
    display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.1);
    border: none; border-radius: var(--r-full); padding: .28rem .7rem .28rem .3rem; cursor: pointer;
    color: #fff; font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none;
}
.tb-profile-btn:hover { background: rgba(255,255,255,.2); }
.tb-profile-btn.active { background: rgba(255,255,255,.24); }
.tb-profile-btn img, .tb-avatar-ph { width: 30px; height: 30px; border-radius: 50%;
    object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
    background: var(--navy-mid); flex: none; }
.tb-profile-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .tb-profile-name { display: none; } }

/* ── Tiroir de navigation (overlay, ouvert au clic) ────────────── */
.drawer {
    position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 84vw;
    /* height/padding/gap/align/border explicites : on annule l'ancienne
       règle globale `nav { height:56px; ... }` qui s'appliquerait sinon
       à ce <nav> et l'écraserait à 56px de haut. */
    height: 100vh; padding: 0; gap: 0; align-items: stretch; border: none;
    background: linear-gradient(180deg, #16294a 0%, var(--navy) 55%);
    /* Le liseré or de la barre du haut se prolonge sur le bord du
       tiroir : les deux surfaces navy se lisent comme un seul bloc. */
    border-right: 1px solid rgba(201, 168, 76, .22);
    z-index: 300; display: flex; flex-direction: column;
    transform: translateX(-100%);
    /* 0,20 s et pas --dur-3 (0,32 s) : le tiroir est un TRANSIT, on l'ouvre
       pour aller ailleurs. À 0,32 s on attend l'animation. --dur-3 reste
       pour les modales, où l'apparition est le propos. */
    transition: transform var(--dur-2) var(--ease);
    /* Promotion en couche de composition : sans elle, chaque image du
       glissement repeint l'ombre portée sur toute la largeur balayée. */
    will-change: transform;
    box-shadow: var(--sh-3);
    /* Encoche et barre gestuelle sur iPhone. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
.drawer.open { transform: translateX(0); }
.drawer-backdrop {
    position: fixed; inset: 0; z-index: 290; background: rgba(8,16,32,.58);
    /* PAS de backdrop-filter ici. Un flou sur un voile plein écran oblige le
       navigateur à re-flouter toute la page derrière à CHAQUE image du
       fondu — sur une longue liste (réservations, dispos) l'ouverture
       devient saccadée. Le voile à 45 % suffit à faire reculer le contenu.  */
    opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease);
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }
/* La croix de fermeture est placée À GAUCHE, calée sur la position du
   ☰ de la barre du haut : après ouverture, elle se retrouve sous le
   curseur, on referme d'un clic sans bouger la souris. */
.drawer-head { display: flex; align-items: center; justify-content: flex-start;
    gap: .35rem; padding: .55rem .6rem .6rem; flex: none; }
.drawer-title { font-family: 'DM Serif Display', serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji'; color: #fff; font-size: 1.15rem; }
.drawer-close { background: none; border: none; color: #fff; line-height: 1;
    font-size: 1.25rem; cursor: pointer; padding: .5rem .55rem; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center; }
.drawer-close:hover { background: rgba(255,255,255,.12); }
.drawer-scroll { flex: 1; overflow-y: auto; padding: 0 0 1rem; }

.d-group { padding: .35rem 0; margin-top: .45rem; border-top: 1px solid rgba(255,255,255,.07); }
.d-group:first-child { border-top: none; margin-top: 0; }
.d-glabel { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em;
    color: rgba(255,255,255,.42); font-weight: 800; padding: .4rem 1rem .25rem; }
.d-item { display: flex; align-items: center; gap: .7rem; text-decoration: none;
    color: rgba(255,255,255,.76); padding: .55rem .8rem; font-size: .9rem; font-weight: 600;
    margin: 1px .5rem; border-radius: var(--r-sm);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.d-item:hover { background: rgba(255,255,255,.10); color: #fff; }
/* L'entrée active : fond or discret + pastille or au ras du bord
   gauche. Le `box-shadow: inset` d'avant traversait toute la hauteur et
   se retrouvait rogné par le nouveau rayon. */
.d-item.active { color: #fff; background: rgba(201,168,76,.20); position: relative; }
.d-item.active::before {
    content: ""; position: absolute; left: -.5rem; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 0 3px 3px 0;
    background: var(--gold);
}
.d-ic { flex: none; width: 22px; text-align: center; font-size: 1.1rem; }
.d-t { flex: 1; min-width: 0; }
.d-bal { flex: none; background: var(--gold-lt, #e8cc84); color: #4a3a10;
    font-size: .7rem; font-weight: 800; padding: .05rem .45rem; border-radius: var(--r-full); }
/* Compteur « à traiter » (nouvelles commandes de la boutique) : rouge plein,
   le tiroir est navy dans les deux thèmes. */
.d-new { flex: none; background: #dc2626; color: #fff;
    font-size: .7rem; font-weight: 800; padding: .05rem .45rem; border-radius: var(--r-full); }
.d-new + .d-bal { margin-left: .3rem; }
.d-logout { color: #fca5a5; }
.d-logout:hover { background: rgba(220,38,38,.28); color: #fff; }

/* ── Nav desktop ── */
nav {
    background: linear-gradient(180deg, #16294a 0%, var(--navy) 100%);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 56px;
    border-bottom: 1px solid rgba(201, 168, 76, .38);
    box-shadow: var(--sh-2);
    position: relative;
    z-index: 100;
}

.nav-brand {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.nav-brand a {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
}

.nav-brand img {
    height: 28px;
    width: auto;
}

.nav-brand .brand-name {
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    font-family: 'DM Serif Display', serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    white-space: nowrap;
}

.nav-brand .brand-ver {
    color: rgba(255, 255, 255, .35);
    font-size: .62rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.nav-links > a {
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    font-weight: 500;
    font-size: .875rem;
    padding: .4rem .75rem;
    border-radius: var(--r-sm);
    transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
    white-space: nowrap;
}

.nav-links > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.nav-links > a.active {
    color: #fff;
    background: rgba(201, 168, 76, .22);
}

/* Lien « Kotis » : solde en tout petit au-dessus du libellé, pour
   l'avoir sous les yeux sans alourdir la barre. */
.nav-links > a.nav-kotis {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    padding-top: .18rem;
    padding-bottom: .18rem;
}

.nav-kotis .nk-bal {
    font-size: .72rem;
    font-weight: 800;
    color: var(--gold-lt, #e8cc84);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* ── Profile menu ── */
.profile-menu {
    position: relative;
    display: inline-block;
}

/* Photo de profil dans le bouton du menu (remplace l'icône 👤). */
.profile-btn-photo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 1.5px solid rgba(255, 255, 255, .35);
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .7rem;
    border-radius: var(--r-xs);
    cursor: pointer;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .65);
    font-weight: 500;
    font-size: .875rem;
    font-family: 'DM Sans', sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    transition: color .2s, background .2s;
    white-space: nowrap;
}

.profile-btn:hover {
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .1);
}

.profile-btn.profile-open {
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .12);
}

.profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--s-fff);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-3);
    min-width: 180px;
    z-index: 300;
    overflow: hidden;
}

.profile-dropdown.show {
    display: block;
}

.profile-dropdown a {
    display: block;
    padding: .6rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: .875rem;
    transition: background .15s;
}

.profile-dropdown a:hover {
    background: rgba(15, 34, 64, .06);
}

.profile-dropdown a.active {
    background: rgba(201, 168, 76, .18);
    color: var(--accent);
    font-weight: 700;
}

.profile-dropdown .divider {
    height: 1px;
    background: var(--border);
    margin: .25rem 0;
}

.profile-dropdown .dropdown-section-label {
    padding: .4rem 1rem .15rem;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.profile-dropdown .logout-link {
    color: var(--red) !important;
}

.profile-dropdown .logout-link:hover {
    background: var(--danger-bg);
}

/* ── Hamburger ── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .4rem;
    border-radius: var(--r-xs);
    flex-shrink: 0;
    transition: background .2s;
}

.nav-hamburger:hover {
    background: rgba(255, 255, 255, .1);
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, .8);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}

.nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile ── */
@media (max-width: 640px) {
    nav {
        padding: 0 1rem;
        height: 52px;
    }

    .nav-hamburger {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 52px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--navy);
        border-bottom: 2px solid var(--gold);
        padding: .5rem .75rem .75rem;
        gap: .1rem;
        z-index: 200;
        box-shadow: var(--sh-3);
    }

    .nav-links.open {
        display: flex;
    }

    nav a {
        padding: .65rem .75rem;
        font-size: .95rem;
    }
}

/* ── Bandeau d'annonce ── */
.ann-banner {
    background: var(--info-bg);
    color: var(--info-fg);
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-bottom: 1px solid var(--info-border);
    font-size: .88rem;
    font-weight: 500;
    animation: annSlide .35s ease;
}

@keyframes annSlide {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.ann-banner-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.ann-banner-title {
    font-weight: 700;
    margin-right: .3rem;
}

.ann-banner-msg {
    flex: 1;
    white-space: pre-wrap;
}

.ann-banner-close {
    /* Dérivé de la couleur du bandeau plutôt que blanc en dur : en sombre,
       un rond blanc sur un bandeau bleu nuit sautait aux yeux. */
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: .95rem;
    line-height: 1;
    color: var(--info-fg);
    flex-shrink: 0;
    transition: background .15s;
}

.ann-banner-close:hover {
    background: color-mix(in srgb, currentColor 26%, transparent);
}

/* ── Bandeau défis à relever ── */
/* Notifications discrètes des nouveautés (onglet resté ouvert).
   Remontées AU-DESSUS du bouton d'aide (FAB en bas-droite, ~46px + 1rem)
   pour ne pas être masquées par lui. */
/* z-index volontairement SOUS le menu de navigation (drawer 300 /
   backdrop 290) : une notif ne doit jamais recouvrir le menu ouvert. */
.news-toasts { position: fixed; right: 1rem; bottom: 4.75rem; z-index: 280;
    display: flex; flex-direction: column; gap: .45rem; align-items: flex-end;
    pointer-events: none; max-width: min(26rem, calc(100vw - 2rem)); }
.news-toast { pointer-events: auto; position: relative; display: block;
    background: var(--navy); color: #fff; text-decoration: none; width: 100%;
    padding: .55rem .75rem; border-radius: var(--r-md); line-height: 1.35;
    box-shadow: var(--sh-3);
    opacity: 0; transform: translateY(8px);
    transition: opacity .25s, transform .25s; }
.news-toast.in { opacity: 1; transform: translateY(0); }
.news-toast.has-link { cursor: pointer; }
.news-toast.has-link:hover { background: var(--navy-mid); }
.nt-head { display: flex; align-items: center; gap: .5rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    opacity: .85; margin-bottom: .15rem; }
.nt-kind { font-weight: 800; }
.nt-time { margin-left: auto; opacity: .85; white-space: nowrap; }
.nt-close { flex: none; background: rgba(255,255,255,.14); border: none;
    color: #fff; width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
    font-size: .8rem; line-height: 1; display: flex; align-items: center;
    justify-content: center; padding: 0; }
.nt-close:hover { background: rgba(255,255,255,.3); }
.nt-text { font-size: .84rem; font-weight: 600; }
.news-toast.has-link .nt-text { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); }
.nt-go { font-size: .68rem; opacity: .8; margin-top: .1rem; }
@media (max-width: 640px) {
    .news-toasts { left: 1rem; right: 1rem; bottom: 4.75rem; align-items: stretch;
        max-width: none; }
}

/* Live : grande chip DANS le topbar (au centre), couleurs Twitch au
   repos, rouge pulsé en direct. Cliquable vers la page du live. */
.tb-live-slot { display: flex; justify-content: center; min-width: 0; flex: 0 1 auto; }
.tb-live { display: inline-flex; align-items: center; gap: .45rem; min-width: 0;
    max-width: 100%; text-decoration: none; color: #fff; white-space: nowrap;
    background: linear-gradient(135deg, #9146ff, #7d2ff5);
    padding: .3rem .75rem; border-radius: var(--r-full); font-size: .82rem;
    box-shadow: 0 2px 10px rgba(145,70,255,.35); }
.tb-live:hover { filter: brightness(1.08); }
/* Score seul : VERT, comme les bandeaux de réservation. Le violet
   Twitch et le rouge du direct annoncent une captation — ils ne doivent
   pas apparaître là où il n'y a rien à regarder. */
.tb-live.score { background: linear-gradient(135deg, #15803d, #166534);
    box-shadow: 0 2px 10px rgba(21,128,61,.35); }
.tb-live.score.on { background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 2px 10px rgba(22,163,74,.4);
    animation: tbLivePulse 1.8s ease-in-out infinite; }
.tb-live.on { background: linear-gradient(135deg, #e11d48, #9f1239);
    box-shadow: 0 2px 10px rgba(225,29,72,.4);
    animation: tbLivePulse 1.8s ease-in-out infinite; }
@keyframes tbLivePulse { 0%,100% { opacity: 1 } 50% { opacity: .82 } }
.tb-live-dot { flex: none; font-size: 1rem; }
.tb-live-txt { display: inline-flex; align-items: baseline; gap: .35rem; min-width: 0; }
.tb-live-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: .92; }
.tb-live-go { flex: none; font-weight: 800; opacity: .95;
    background: rgba(255,255,255,.22); border-radius: var(--r-full); padding: .1rem .55rem;
    font-size: .74rem; }
/* Pas de live en cours : le conteneur ne doit RIEN occuper, sinon il
   dessine un bandeau vide sur téléphone (bordure et fond compris).
   Le gabarit ne laisse aucun blanc à l'intérieur quand il est vide, et
   `syncLive()` le remet à `innerHTML = ''` — `:empty` s'applique donc
   dans les deux cas. */
.tb-live-slot:empty { display: none; }
/* Bandeau étroit : on garde l'essentiel (pastille + état), on masque le
   titre et le bouton pour ne pas déborder le topbar de 56px. */
@media (max-width: 760px) { .tb-live-title, .tb-live-go { display: none; } }
/* Téléphone : la chip sort de la première ligne et devient un BANDEAU
   pleine largeur, collé sous la barre de menu.
   Elle ne tenait pas à côté de la marque et du bloc de droite (kotis,
   stats, avatar) — la barre se mettait à rogner son contenu. La masquer
   réglait le débordement mais privait le téléphone de l'information la
   plus vivante du site ; sur sa propre ligne, elle a même plus de place
   qu'avant, donc le titre du live revient.
   Les marges négatives annulent le padding de la barre pour que le
   bandeau aille d'un bord à l'autre.
   DOIT rester APRÈS `.tb-live-slot { display: flex }` : à spécificité
   égale c'est l'ordre qui tranche, pas la media query. */
@media (max-width: 700px) {
    .tb-live-slot { order: 3; flex: 0 0 100%; width: 100%;
        margin: 0 -.5rem 0 -.3rem; padding: .32rem .5rem;
        border-top: 1px solid rgba(255,255,255,.16);
        background: rgba(0,0,0,.22); }
    .tb-live { max-width: 100%; }
    /* La place est revenue : le titre du live redevient lisible. Le
       bouton « Regarder » reste masqué, toute la chip est cliquable. */
    .tb-live-title { display: inline; }
}

.prov-inbox { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    margin: 0 auto 1rem; max-width: 1200px; padding: .7rem 1rem;
    background: var(--danger-bg); border: 1px solid var(--danger-border);
    border-radius: var(--r-md); }
.prov-inbox-ic { font-size: 1.4rem; }
.prov-inbox-msg { flex: 1; min-width: 12rem; font-size: .9rem; color: var(--danger-fg); }
.prov-inbox-msg strong { color: var(--danger-fg); }
.prov-inbox-note { color: var(--danger-fg); font-style: italic; }
.prov-inbox-actions { display: flex; gap: .4rem; }
.prov-yes, .prov-no { border: none; border-radius: var(--r-sm); padding: .4rem .75rem;
    font-weight: 800; font-size: .82rem; cursor: pointer; font-family: 'DM Sans', sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji'; }
.prov-yes { background: var(--danger); color: #fff; }
.prov-no { background: var(--surface); color: var(--danger-fg); border: 1px solid var(--danger-border); }

/* ── Bandeau invitations match en attente ── */
.invite-banner {
    background: var(--warn-bg);
    color: var(--warn-fg);
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-bottom: 1px solid var(--warn-border);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    transition: filter .15s;
}

.invite-banner:hover {
    filter: brightness(1.03);
}

.invite-banner-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.invite-banner-msg {
    flex: 1;
}

.invite-banner-msg strong {
    font-weight: 700;
}

.invite-banner-cta {
    background: #854d0e;
    color: #fff;
    padding: .35rem .75rem;
    border-radius: var(--r-xs);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Popup modal ── */
.ann-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 34, 64, .55);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: annFade .2s ease;
}

@keyframes annFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ann-popup {
    background: var(--s-fff);
    border-radius: var(--r-lg);
    max-width: 480px;
    width: calc(100% - 2rem);
    padding: 1.6rem 1.5rem 1.25rem;
    box-shadow: var(--sh-4);
    animation: annPopIn .3s cubic-bezier(.36, 1.2, .55, 1.05);
}

@keyframes annPopIn {
    from {
        transform: scale(.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.ann-popup-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
}

.ann-popup-icon {
    font-size: 1.8rem;
}

.ann-popup-title {
    font-family: 'DM Serif Display', serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    font-size: 1.3rem;
    color: var(--accent);
    flex: 1;
}

.ann-popup-msg {
    font-size: .95rem;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    margin-bottom: 1.25rem;
}

.ann-popup-footer {
    display: flex;
    justify-content: flex-end;
}

.ann-popup-btn {
    padding: .6rem 1.4rem;
    border: none;
    border-radius: var(--r-sm);
    background: var(--navy);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    cursor: pointer;
    transition: opacity .15s;
}

.ann-popup-btn:hover {
    opacity: .88;
}

/* ── Aide page (bouton flottant + modale) ── */
.page-help-fab {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 8500;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    color: #fff;
    border: none;
    font-size: 1.25rem;
    font-weight: 800;
    font-family: 'DM Sans', sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    cursor: pointer;
    box-shadow: var(--sh-3);
    transition: transform .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-help-fab:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-4);
}

.page-help-fab:active {
    transform: scale(.95);
}

.page-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 34, 64, .55);
    z-index: 9100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: annFade .2s ease;
}

.page-help-overlay.open {
    display: flex;
}

.page-help-modal {
    background: var(--s-fff);
    border-radius: var(--r-lg);
    max-width: 540px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.4rem 1.5rem 1.2rem;
    box-shadow: var(--sh-4);
    animation: annPopIn .3s cubic-bezier(.36, 1.2, .55, 1.05);
}

.page-help-modal h3 {
    font-family: 'DM Serif Display', serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    font-size: 1.25rem;
    color: var(--accent);
    margin-bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.page-help-body {
    font-size: .92rem;
    color: var(--text);
    line-height: 1.55;
}

.page-help-body p {
    margin-bottom: .65rem;
}

.page-help-body ul {
    margin: .25rem 0 .85rem 1.2rem;
}

.page-help-body li {
    margin-bottom: .3rem;
}

.page-help-body strong {
    color: var(--accent);
}

.page-help-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.page-help-close {
    padding: .55rem 1.3rem;
    border: none;
    border-radius: var(--r-sm);
    background: var(--navy);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    cursor: pointer;
    transition: opacity .15s;
}

.page-help-close:hover {
    opacity: .88;
}

@media (max-width: 640px) {
    .page-help-fab {
        bottom: .85rem;
        right: .85rem;
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }

    .page-help-modal {
        max-height: 90vh;
        padding: 1.1rem 1.1rem 1rem;
    }

    .page-help-modal h3 {
        font-size: 1.1rem;
    }

    .page-help-body {
        font-size: .88rem;
    }
}

/* ── Réactions emoji ── */
.rxn-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    margin-top: .5rem;
}

.rxn-pill {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .15rem .45rem;
    border-radius: var(--r-full);
    border: 1.5px solid var(--border);
    background: var(--s-fff);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all .12s;
    font-family: 'DM Sans', sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    line-height: 1.2;
}

.rxn-pill:hover {
    border-color: var(--accent-mid);
    transform: translateY(-1px);
}

.rxn-pill.me {
    background: rgba(201, 168, 76, .18);
    border-color: var(--gold);
    color: var(--accent);
}

.rxn-pill .rxn-emoji { font-size: .95rem; }
.rxn-pill .rxn-count { font-variant-numeric: tabular-nums; opacity: .8; }

.rxn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px dashed var(--border);
    background: var(--s-fff);
    color: var(--muted);
    font-size: .85rem;
    cursor: pointer;
    transition: all .12s;
    font-family: 'DM Sans', sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
}

.rxn-add:hover {
    border-color: var(--accent-mid);
    color: var(--accent-mid);
    border-style: solid;
}

.rxn-picker {
    position: absolute;
    background: var(--s-fff);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: .5rem;
    box-shadow: var(--sh-3);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    z-index: 9500;
    animation: annPopIn .18s ease;
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
}

.rxn-picker-row.rxn-row-scroll {
    max-height: 110px;
    overflow-y: auto;
}

.rxn-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
}

.rxn-picker-label {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: .1rem;
}

.rxn-picker button.rxn-emoji-btn {
    background: none;
    border: none;
    padding: .25rem .35rem;
    font-size: 1.15rem;
    cursor: pointer;
    border-radius: var(--r-xs);
    transition: background .1s, transform .1s;
    line-height: 1;
}

.rxn-picker button.rxn-emoji-btn:hover {
    background: var(--bg);
    transform: scale(1.15);
}

.rxn-picker .rxn-custom-row {
    display: flex;
    gap: .25rem;
    align-items: center;
}

.rxn-picker .rxn-custom-input {
    flex: 1;
    border: 1.5px solid var(--border);
    border-radius: var(--r-xs);
    padding: .3rem .5rem;
    font-size: 1rem;
    outline: none;
    font-family: inherit;
}

.rxn-picker .rxn-custom-input:focus { border-color: var(--accent-mid); }

.rxn-picker .rxn-custom-btn {
    background: var(--navy-mid);
    color: #fff;
    border: none;
    border-radius: var(--r-xs);
    padding: .3rem .55rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}

.rxn-picker .rxn-custom-btn:hover { opacity: .85; }
.rxn-picker .rxn-custom-btn:disabled { opacity: .4; cursor: not-allowed; }

.rxn-picker.below { margin-top: .35rem; }
.rxn-picker.above { margin-bottom: .35rem; }

@media (max-width: 640px) {
    .rxn-pill { font-size: .78rem; padding: .12rem .4rem; }
    .rxn-pill .rxn-emoji { font-size: .9rem; }
    .rxn-add { width: 24px; height: 24px; font-size: .8rem; }
}

/* ── Avatar joueur (photo + bulle de statut) ── */
.pl-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    color: #fff;
    font-family: 'DM Serif Display', serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
    font-weight: 700;
    flex-shrink: 0;
    overflow: visible;
    cursor: default;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    vertical-align: middle;
}

.pl-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.pl-avatar-initials {
    display: block;
    line-height: 1;
}

/* Badge épinglé n°1 superposé en bas à droite de l'avatar */
.pl-pin-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 45%;
    height: 45%;
    min-width: 14px;
    min-height: 14px;
    border-radius: 50%;
    background: var(--surface, #fff);
    box-shadow: 0 0 0 1.5px var(--gold, #c79a3a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60%;
    line-height: 1;
    overflow: hidden;
    pointer-events: none;
}
.pl-pin-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Tooltip de badges au survol d'un nom de joueur */
.pl-badge-tip {
    position: fixed;
    z-index: 9999;
    background: var(--navy);
    color: #fff;
    border-radius: var(--r-sm);
    padding: 8px 10px;
    box-shadow: var(--sh-3);
    display: none;
    pointer-events: none;
    max-width: 230px;
}
.pl-badge-tip .pbt-name { font-size: 13px; font-weight: 700; padding-bottom: 2px; }
.pl-badge-tip .pbt-company { padding: 2px 0 4px; }
.pl-badge-tip .pbt-grade { font-size: 11px; font-weight: 600; color: var(--gold, #e8c25a);
    padding-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.pl-badge-tip .pbt-grade-ic { display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; font-size: 13px; flex: 0 0 auto; }
.pl-badge-tip .pbt-grade-ic img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.pl-badge-tip .pbt-status { font-size: 12px; font-style: italic; opacity: .9;
    padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.18); }
.pl-badge-tip .pbt-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.pl-badge-tip .pbt-ic { font-size: 16px; width: 20px; text-align: center; flex: 0 0 auto; }
.pl-badge-tip .pbt-ic img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.pl-badge-tip .pbt-nm { font-size: 12px; font-weight: 600; }

/* ── Toggle « Coachless » (pages joueur + paire) ──
   Se pose sur le fond navy de la `.stats-card` : couleurs en blanc
   translucide, vert quand le filtre est actif. */
.coach-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: .6rem; padding: .25rem .7rem .25rem .35rem;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-full);
    background: rgba(255, 255, 255, .08); color: #fff;
    font-size: .74rem; font-weight: 700; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.coach-toggle:hover { background: rgba(255, 255, 255, .16); }
.ct-switch {
    width: 26px; height: 15px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .22);
    position: relative; flex: 0 0 auto; transition: background .15s;
}
.ct-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 11px; height: 11px; border-radius: 50%; background: #fff;
    transition: transform .15s;
}
.coach-toggle.on {
    background: rgba(16, 185, 129, .28); border-color: rgba(16, 185, 129, .6);
}
.coach-toggle.on .ct-switch { background: #10b981; }
.coach-toggle.on .ct-switch::after { transform: translateX(11px); }

/* Popup de déblocage de badge(s) */
.badge-pop-ov {
    position: fixed; inset: 0; z-index: 10000;
    /* Flou retiré : il était là avant la refonte, mais il a le même coût que
       celui du tiroir — re-flouter toute la page à chaque image — et cette
       popup s'ouvre par-dessus les mêmes écrans chargés. */
    background: rgba(8,16,32,.66);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.badge-pop {
    background: var(--surface, #fff); color: var(--text);
    border-radius: var(--r-lg); padding: 22px; max-width: 360px; width: 100%;
    max-height: 85vh; overflow-y: auto;
    text-align: center; box-shadow: var(--sh-4);
    border: 2px solid var(--gold, #c79a3a);
    animation: badgePopIn .35s cubic-bezier(.2,.8,.3,1.2);
}
@keyframes badgePopIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.badge-pop h3 { margin: 0 0 4px; font-size: 19px; }
.badge-pop .bp-sub { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.badge-pop .bp-item { display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 8px; }
.badge-pop .bp-visu { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%;
    background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.badge-pop .bp-visu img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.badge-pop .bp-nm { font-weight: 700; font-size: 15px; }
.badge-pop .bp-ds { font-size: 12px; color: var(--muted); }
.badge-pop .bp-pt { font-size: 12px; color: var(--gold, #c79a3a); font-weight: 700; margin-top: 2px; }
.badge-pop .bp-close { margin-top: 8px; background: var(--navy); color: #fff; border: none;
    border-radius: var(--r-sm); padding: 10px 22px; font-size: 15px; cursor: pointer; }

/* Tailles — width/height + min/max pour stabilité dans les flex containers */
.pl-avatar-xs { width: 22px; height: 22px; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; font-size: .6rem; }
.pl-avatar-sm { width: 30px; height: 30px; min-width: 30px; min-height: 30px; max-width: 30px; max-height: 30px; font-size: .74rem; }
.pl-avatar-md { width: 42px; height: 42px; min-width: 42px; min-height: 42px; max-width: 42px; max-height: 42px; font-size: 1rem; }
.pl-avatar-lg { width: 64px; height: 64px; min-width: 64px; min-height: 64px; max-width: 64px; max-height: 64px; font-size: 1.4rem; }

/* Bulle de statut — petit indicateur visuel */
.pl-avatar.has-bubble::after {
    content: "💬";
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--gold);
    color: #fff;
    font-size: .55rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'DM Sans', sans-serif, 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji';
}

.pl-avatar-lg.has-bubble::after {
    width: 18px;
    height: 18px;
    font-size: .7rem;
    top: 0;
    right: 0;
}

/* NB : il n'y a plus de bulle de statut au survol de l'avatar. Le texte
   du statut est affiché par le tooltip général `.pl-badge-tip` (nom +
   entreprise + grade + statut + badges) monté plus bas sur tout
   .pl-avatar[data-uid] et les liens /scores/player/… — une bulle
   dédiée au statut seul faisait doublon. Seul l'indicateur 💬
   (.has-bubble ci-dessus) subsiste pour signaler qu'il y a un statut. */

/* Estampe entreprise d'un invité externe (chip texte coloré).
   --ext-c = couleur de l'entreprise ; toujours visible dans les tournois. */
.ext-company-chip {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .64rem; font-weight: 700; line-height: 1;
    padding: .12rem .4rem; border-radius: var(--r-full);
    white-space: nowrap; vertical-align: middle;
    /* La couleur vient de la DONNÉE (l'entreprise la choisit) : telle quelle
       elle peut tomber à 2,8:1. On la tire vers la couleur du texte, ce qui
       garantit la lisibilité tout en gardant la teinte reconnaissable — et
       comme --text s'inverse, la puce suit le thème sans réglage séparé. */
    color: color-mix(in srgb, var(--ext-c, #4b5563) 62%, var(--text));
    background: color-mix(in srgb, var(--ext-c, #4b5563) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ext-c, #4b5563) 45%, transparent);
}

@media (max-width: 640px) {
    .pl-avatar-xs { width: 22px; height: 22px; min-width: 22px; min-height: 22px; max-width: 22px; max-height: 22px; font-size: .6rem; }
    .pl-avatar-sm { width: 28px; height: 28px; min-width: 28px; min-height: 28px; max-width: 28px; max-height: 28px; font-size: .72rem; }
    .pl-avatar-md { width: 38px; height: 38px; min-width: 38px; min-height: 38px; max-width: 38px; max-height: 38px; font-size: .9rem; }
    .pl-avatar-lg { width: 56px; height: 56px; min-width: 56px; min-height: 56px; max-width: 56px; max-height: 56px; font-size: 1.25rem; }
}
    </style>

/* Badge "pluie" pour terrains extérieurs — affiché à côté de
   l'info météo. Rouge = pluie le jour-même, orange = pluie la
   veille, vert (sec) = aucun risque dans la fenêtre forecast. */
.rain-badge {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .68rem;
    font-weight: 700;
    padding: 0 .35rem;
    border-radius: var(--r-full);
    border: 1px solid transparent;
    white-space: nowrap;
    margin-left: .2rem;
    line-height: 1.5;
}
.rain-badge.red {
    background: rgba(239, 68, 68, .12);
    color: var(--danger-fg);
    border-color: rgba(239, 68, 68, .4);
}
.rain-badge.orange {
    background: rgba(249, 115, 22, .12);
    color: var(--warn-fg);
    border-color: rgba(249, 115, 22, .4);
}
.rain-badge.dry {
    background: rgba(16, 185, 129, .12);
    color: var(--success-fg);
    border-color: rgba(16, 185, 129, .4);
}
/* Variante compacte pour les cellules de calendrier serrées. */
.rain-badge.compact {
    padding: 0 .25rem;
    font-size: .6rem;
    margin-left: .1rem;
}