/* =====================================================================
   Wu'Cube — thème sombre inspiré des plannings esport
   ===================================================================== */

:root {
    --wc-bg: #0a0a0c;
    --wc-bg-soft: #0f0f14;
    --wc-surface: #14141a;
    --wc-surface-2: #1b1b23;
    --wc-surface-3: #22222c;
    --wc-border: #26262f;
    --wc-border-soft: #1e1e26;
    --wc-text: #f5f5f7;
    --wc-muted: #9a9aa7;
    --wc-muted-2: #6c6c78;
    --wc-accent: var(--bs-primary, #ffc107);
    --wc-accent-soft: rgba(255, 193, 7, .14);
    --wc-live: #ff3b3b;
    --wc-radius: 14px;
    --wc-radius-sm: 10px;
    --wc-nav-h: 78px;
    --wc-shadow: 0 18px 50px -20px rgba(0, 0, 0, .8);
    --wc-font: 'Inter', system-ui, -apple-system, sans-serif;
    --wc-display: 'Rajdhani', 'Inter', sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--wc-nav-h) + 16px); }
/* Réserve en permanence la place de la scrollbar verticale : ainsi, quand un menu
   déroulant allonge la page et fait apparaître/disparaître la scrollbar, la largeur
   utile ne change pas -> plus de léger décalage horizontal des boutons (Connexion,
   Inscription, HUH) ni du reste du contenu centré. */
html { scrollbar-gutter: stable; }

html { overflow-x: clip; } /* filet de sécurité : aucun débordement horizontal au niveau du viewport (n'altère pas position:sticky) */
body.wc-body {
    background: var(--wc-bg);
    color: var(--wc-text);
    font-family: var(--wc-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Pas d'overflow-x ici : il forcerait overflow-y:auto sur le body, qui en
       ferait un conteneur de scroll et casserait la navbar « position: sticky ».
       Le débordement horizontal est déjà contenu par html { overflow-x: clip }. */
    /* Curseur personnalisé : bâton de WuKong (variante nuit par défaut) */
    cursor: url('../img/souris-nuit.png') 8 5, auto;
}
/* Variante jour (mode clair) */
html.wc-light body.wc-body { cursor: url('../img/souris-jour.png') 8 5, auto; }
/* Le bâton reste affiché PARTOUT — même sur les éléments qui définissent leur
   propre cursor:pointer (boutons, liens, marque, toggle jour/nuit…). Sélecteur à
   forte spécificité (html body.wc-body …) pour passer devant ces règles.
   Exceptions : champs de saisie (curseur texte) et lightbox (zoom). */
html body.wc-body :not(input):not(textarea):not([contenteditable="true"]):not(.wc-lightbox) {
    cursor: inherit;
}
/* Curseur texte uniquement sur les champs de saisie (pour voir le point d'insertion) */
input, textarea, [contenteditable="true"] { cursor: text; }

body.wc-body::before {
    /* subtle esport backdrop */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1200px 600px at 80% -10%, var(--wc-accent-soft), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(120, 90, 255, .08), transparent 55%),
        var(--wc-bg);
}

h1, h2, h3, h4, .wc-display {
    font-family: var(--wc-display);
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.1;
}

a { color: var(--wc-accent); transition: color .2s ease; }
a:hover { color: #fff; }

.wc-accent { color: var(--wc-accent); }

.wc-section { padding: clamp(2.5rem, 6vw, 5rem) 1rem; }

.wc-section-head { text-align: center; margin-bottom: 2.5rem; }
.wc-section-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    text-transform: uppercase;
    margin: 0;
}
.wc-section-title::after {
    content: "";
    display: block;
    width: 64px; height: 4px;
    margin: .8rem auto 0;
    background: var(--wc-accent);
    border-radius: 4px;
}
.wc-section-sub { color: var(--wc-muted); margin-top: .75rem; }

/* ---------- Buttons ---------- */
.btn { font-family: var(--wc-display); font-weight: 600; letter-spacing: .4px; border-radius: var(--wc-radius-sm); transition: filter .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.btn:active { transform: translateY(1px); }

.wc-btn-accent {
    background: var(--wc-accent);
    color: #14141a;
    border: 2px solid var(--wc-accent);
    text-transform: uppercase;
}
.wc-btn-accent:hover {
    color: #14141a;
    background: var(--wc-accent);
    border-color: var(--wc-accent);
    filter: brightness(1.05);   /* léger éclaircissement, sans halo qui donne l'impression de « grossir » */
}
/* Garde-fou : aucun changement de taille au survol des boutons Connexion / Inscription */
.wc-btn-ghost:hover, .wc-btn-accent:hover { transform: none; }

.wc-btn-ghost {
    background: transparent;
    color: var(--wc-text);
    border: 2px solid var(--wc-border);
    text-transform: uppercase;
}
.wc-btn-ghost:hover { color: #fff; border-color: var(--wc-accent); }

/* Bouton secondaire : transparent + bordure jaune, se remplit au survol */
.wc-btn-outline-accent {
    background: transparent;
    color: var(--wc-accent);
    border: 2px solid var(--wc-accent);
    text-transform: uppercase;
}
.wc-btn-outline-accent:hover {
    background: var(--wc-accent);
    color: #14141a;
    border-color: var(--wc-accent);
}

.wc-btn-lunar {
    display: inline-flex; align-items: center; gap: .5rem;
    background: linear-gradient(135deg, #6c5ce7, #4834d4);
    color: #fff;
    border: none;
    text-transform: uppercase;
    box-shadow: 0 8px 24px -10px rgba(108, 92, 231, .9);
}
.wc-btn-lunar:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 10px 26px -10px rgba(108, 92, 231, 1); }
.wc-btn-lunar i { font-size: 1.05em; }

/* Bouton « Rejoindre le Discord » (blurple) */
.wc-btn-discord {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #5865f2; color: #fff; border: none; text-transform: uppercase;
    box-shadow: 0 8px 24px -10px rgba(88, 101, 242, .9);
}
.wc-btn-discord:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 10px 26px -10px rgba(88, 101, 242, 1); }
.wc-btn-discord i { font-size: 1.1em; }

/* ---------- Navbar ---------- */
/* Le <nav> est enveloppé dans un <header> qui ne fait que la hauteur de la barre :
   il bornait le « position: sticky » du nav (qui disparaissait au scroll).
   display:contents efface la boîte du header -> le bloc de blocage du sticky
   devient #app (toute la page), donc la navbar reste visible au scroll. */
#app > header { display: contents; }

.wc-nav {
    position: sticky; top: 0; z-index: 1030;
    min-height: var(--wc-nav-h);
    display: flex; align-items: center;
    background: rgba(10, 10, 12, .55);
    border-bottom: 1px solid transparent;
    transition: background .3s ease, min-height .3s ease, border-color .3s ease, backdrop-filter .3s ease;
    backdrop-filter: blur(10px);
}
.wc-nav.scrolled {
    min-height: 60px;
    background: rgba(10, 10, 12, .9);
    border-bottom-color: var(--wc-border);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}
.wc-nav .container { display: flex; align-items: center; gap: 1rem; }

.wc-brand { display: inline-flex; align-items: center; gap: .6rem; }
.wc-brand-logo { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); transition: width .3s ease, height .3s ease, transform .8s cubic-bezier(.16,1,.3,1), filter .3s ease; will-change: transform; }
.wc-nav.scrolled .wc-brand-logo { width: 34px; height: 34px; }
.wc-brand-text {
    font-family: var(--wc-display);
    font-weight: 700; font-size: 1.5rem; letter-spacing: 1px;
    color: var(--wc-text); text-transform: uppercase;
}
.wc-brand-text .wc-accent { color: var(--wc-accent); }

.wc-nav-links { gap: .25rem; align-items: center; }
.wc-nav-link {
    color: var(--wc-muted) !important;
    font-family: var(--wc-display);
    font-weight: 600; font-size: 1.02rem; letter-spacing: .5px;
    text-transform: uppercase;
    padding: .5rem .9rem !important;
    position: relative;
}
.wc-nav-link::after {
    content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .3rem;
    height: 2px; background: var(--wc-accent);
    transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.wc-nav-link:hover, .wc-nav-link.active { color: #fff !important; }
.wc-nav-link:hover::after, .wc-nav-link.active::after { transform: scaleX(1); }

.wc-nav-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.wc-user-nav { gap: .4rem; }

/* Desktop : la zone d'actions et ses boutons gardent une taille fixe.
   Ainsi, le déploiement des onglets secondaires au survol ne les comprime
   plus et ne les fait plus « grossir » (plus de repli du texte). */
@media (min-width: 992px) {
    .wc-nav-actions { flex: 0 0 auto; }
    .wc-nav-actions > * { flex: 0 0 auto; }
    .wc-nav-actions .btn { white-space: nowrap; }
}

/* Navbar (desktop) : barre toujours visible, le logo tourne au survol */
@media (min-width: 992px) {
    .wc-brand { cursor: pointer; }
    .wc-nav-links {
        flex-wrap: nowrap !important; white-space: nowrap;
        margin-left: 1.25rem;
    }

    /* Rotation du logo WuCoin au survol de la navbar */
    .wc-brand:hover .wc-brand-logo,
    .wc-nav:has(.wc-collapse:hover) .wc-brand-logo,
    .wc-nav:focus-within .wc-brand-logo {
        transform: rotate(360deg);
        filter: drop-shadow(0 0 12px var(--wc-accent));
    }
}

.wc-dropdown {
    background: var(--wc-surface-2);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-sm);
    box-shadow: var(--wc-shadow);
    padding: .4rem;
}
.wc-dropdown .dropdown-item { color: var(--wc-muted); border-radius: 8px; padding: .5rem .75rem; }
.wc-dropdown .dropdown-item:hover, .wc-dropdown .dropdown-item.active { background: var(--wc-accent-soft); color: #fff; }

/* Utilisateur connecté : tête du skin + pseudo */
.wc-user-toggle { gap: .5rem; }
.wc-user-head {
    width: 30px; height: 30px; border-radius: 7px;
    image-rendering: pixelated;            /* tête Minecraft nette, non floutée */
    border: 1px solid var(--wc-border);
    background: var(--wc-surface-2);
    object-fit: cover; flex: 0 0 auto;
}
.wc-user-name { font-weight: 600; }

/* Onglets secondaires : masqués par défaut, révélés au survol de la navbar (desktop ≥ 992px) */
@media (min-width: 992px) {
    .wc-nav-extra {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateX(-8px);
        pointer-events: none;
        flex: 0 0 auto;
        transition: max-width .35s ease, opacity .25s ease, transform .35s ease;
    }
    .wc-nav-extra .wc-nav-link { white-space: nowrap; }
    /* Au survol de la navbar (logo, liens ou barre), focus clavier, ou onglet de la page courante */
    .wc-brand:hover ~ .wc-collapse .wc-nav-extra,
    .wc-collapse:hover .wc-nav-extra,
    .wc-nav:focus-within .wc-nav-extra,
    .wc-nav-extra:has(.active) {
        max-width: 14rem;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* Mega-menu Événements (style lolesports) */
.wc-megamenu {
    width: min(340px, 92vw);
    padding: 0;
    overflow: hidden;
}
/* Desktop : panneau ancré directement SOUS l'onglet « Événements ».
   En « display static » (pas de Popper), la position est 100 % maîtrisée en CSS :
   le menu est en position absolue relative à l'onglet, donc il suit la navbar
   (sticky) au scroll — aucun décalage ni tremblement. */
@media (min-width: 992px) {
    .wc-mega-item { position: relative; }
    .wc-megamenu.dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        width: min(340px, calc(100vw - 32px));
        margin-top: .5rem;
    }
}
.wc-megamenu-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .85rem 1rem;
    border-bottom: 1px solid var(--wc-border);
    background: var(--wc-surface-3, var(--wc-surface-2));
}
.wc-megamenu-title {
    font-family: var(--wc-display); text-transform: uppercase;
    letter-spacing: .5px; font-size: .85rem; font-weight: 700; color: var(--wc-text);
}
.wc-megamenu-title i { color: var(--wc-accent); margin-right: .35rem; }
.wc-megamenu-all { font-size: .8rem; color: var(--wc-accent); text-decoration: none; white-space: nowrap; }
.wc-megamenu-all:hover { text-decoration: underline; }
.wc-megamenu-empty { color: var(--wc-muted); padding: 1.25rem 1rem; margin: 0; text-align: center; }

/* Timeline / roadmap des événements (style esport) */
.wc-timeline {
    list-style: none; margin: 0;
    padding: .9rem 1.1rem .4rem;
    max-height: 70vh; overflow-y: auto;
}
.wc-tl-item {
    position: relative;
    display: grid; grid-template-columns: 24px 1fr; column-gap: .85rem;
    padding: 0 0 1.15rem;
}
.wc-tl-item:last-child { padding-bottom: .25rem; }
/* Trait de liaison vertical entre deux marqueurs */
.wc-tl-item::before {
    content: ""; position: absolute;
    left: 12px; top: 22px; bottom: -2px; width: 2px;
    background: var(--wc-border); transform: translateX(-50%);
}
.wc-tl-item:last-child::before { display: none; }

.wc-tl-marker {
    position: relative; z-index: 1;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    border: 2px solid var(--wc-border);
    background: var(--wc-surface-2);
    color: #fff; font-size: .82rem; line-height: 1;
}

/* Passé : validé (grisé + coché) */
.wc-tl-item.is-done .wc-tl-marker {
    background: var(--wc-border); border-color: var(--wc-border); color: var(--wc-text);
}
.wc-tl-item.is-done::before    { background: var(--wc-border); }
.wc-tl-item.is-done .wc-tl-title { color: var(--wc-muted); font-weight: 600; }
.wc-tl-item.is-done .wc-tl-sub   { opacity: .65; }

/* En cours : rond rouge pulsé */
.wc-tl-item.is-live .wc-tl-marker {
    border-color: #ef4444; background: transparent;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .15);
}
.wc-tl-item.is-live .wc-tl-marker::after {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, .85);
    animation: wc-tl-pulse 1.8s ease-in-out infinite;
}
@keyframes wc-tl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.65); opacity: .6; } }

/* À venir : rond vide */
.wc-tl-item.is-soon .wc-tl-marker { background: transparent; }

.wc-tl-body { display: flex; flex-direction: column; gap: .05rem; padding-top: .02rem; }
.wc-tl-title {
    font-family: var(--wc-display); font-weight: 700; font-size: .92rem;
    color: var(--wc-text); line-height: 1.15;
}
.wc-tl-sub {
    font-size: .68rem; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase; color: var(--wc-muted);
}

/* Repli des anciens événements (on garde les 5 plus récents) */
.wc-timeline:not(.is-expanded) .wc-tl-old { display: none; }
.wc-tl-toggle { list-style: none; margin: 0 0 .55rem; }
.wc-tl-more {
    display: inline-flex; align-items: center; gap: .55rem; width: 100%;
    background: var(--wc-surface-2); border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-sm); padding: .45rem .7rem;
    color: var(--wc-muted); font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: all .2s ease; text-align: left;
}
.wc-tl-more:hover { border-color: var(--wc-accent); color: var(--wc-text); }
.wc-tl-more-plus {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--wc-accent); color: #14141a; font-weight: 800; line-height: 1; font-size: .9rem;
}
.wc-tl-more-plus::before { content: "+"; }
.wc-timeline.is-expanded .wc-tl-more-plus::before { content: "\2212"; } /* signe − */
.wc-tl-more-hide { display: none; }
.wc-timeline.is-expanded .wc-tl-more-show { display: none; }
.wc-timeline.is-expanded .wc-tl-more-hide { display: inline; }

/* Pied « En savoir plus » */
.wc-megamenu-foot {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .7rem 1.1rem .85rem;
    border-top: 1px solid var(--wc-border);
    background: var(--wc-surface-3, var(--wc-surface-2));
}
.wc-megamenu-foot-label {
    font-family: var(--wc-display); font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px; color: var(--wc-muted);
    margin-bottom: .15rem;
}
.wc-megamenu-foot-link {
    color: var(--wc-text); text-decoration: none; font-weight: 600; font-size: .88rem;
    padding: .12rem 0; transition: color .15s ease;
}
.wc-megamenu-foot-link:hover { color: var(--wc-accent); }

/* Burger (animé) */
.wc-burger {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--wc-border); border-radius: 10px;
    background: var(--wc-surface-2);
    position: relative; cursor: pointer;
    margin-left: auto;
}
.wc-burger span {
    position: absolute; left: 11px; right: 11px; height: 2px;
    background: var(--wc-text); border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.wc-burger span:nth-child(1) { top: 15px; }
.wc-burger span:nth-child(2) { top: 21px; }
.wc-burger span:nth-child(3) { top: 27px; }
.wc-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.wc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wc-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- IP copy ---------- */
.wc-ip {
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--wc-surface-2);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-sm);
    padding: .55rem .9rem;
    font-family: var(--wc-display); font-weight: 600;
    cursor: pointer; transition: all .3s ease;
    user-select: none;
}
.wc-ip:hover { border-color: var(--wc-accent); transform: translateY(-1px); }
.wc-ip:hover .wc-ip-icon { color: var(--wc-accent); }
/* Après l'apparition (reveal), on rétablit la transition douce « all » pour le survol */
.wc-ip[data-wc-reveal].is-visible { transition: all .3s ease; }
.wc-ip-label { background: var(--wc-accent); color: #14141a; border-radius: 6px; padding: .1rem .45rem; font-size: .8rem; }
.wc-ip-value { letter-spacing: .5px; }
.wc-ip-icon { color: var(--wc-muted); transition: color .3s ease; }
.wc-ip.copied .wc-ip-icon::before { content: "\F26B"; } /* bi-check-lg */
.wc-ip.copied { border-color: #2ecc71; }

/* ---------- Hero ---------- */
.wc-hero {
    position: relative;
    min-height: clamp(460px, 80vh, 760px);
    display: flex; align-items: center;
    margin-top: calc(var(--wc-nav-h) * -1);
    padding-top: var(--wc-nav-h);
    overflow: hidden;
}
/* Calque image animé (Ken Burns + parallax via background-position en JS) */
.wc-hero-bg {
    position: absolute; inset: 0;
    background: var(--wc-hero-img) 50% 4% / cover no-repeat;
    z-index: 0;
    transform: scale(1.04);
    transform-origin: center top; /* le zoom garde la tête de Wukong ancrée en haut */
    animation: wc-kenburns 30s ease-in-out infinite alternate;
    will-change: transform, background-position;
    transition: background-position .4s cubic-bezier(.22,1,.36,1);
}
@keyframes wc-kenburns {
    from { transform: scale(1.04); }
    to   { transform: scale(1.12); }
}
.wc-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(90deg, rgba(10,10,12,.96) 0%, rgba(10,10,12,.75) 45%, rgba(10,10,12,.35) 100%),
        linear-gradient(0deg, var(--wc-bg) 2%, transparent 40%);
}

/* Mascotte WuKong (chibi) — ancrée à la carte, passe par-dessus son bord supérieur */
.wc-hero-mascot {
    position: absolute; z-index: -1;
    left: 50%; top: clamp(-134px, -12.5vw, -110px); bottom: auto;
    width: clamp(150px, 15vw, 188px); height: auto;
    pointer-events: none; user-select: none;
    filter: drop-shadow(0 0 26px rgba(255, 193, 7, .35)) drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
    animation: wc-mascot-float 6s ease-in-out infinite;
    will-change: transform;
}
@keyframes wc-mascot-float {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1.2deg); }
    50%      { transform: translateX(-50%) translateY(-14px) rotate(1.2deg); }
}

/* Indicateur de défilement : nuage doré + traînée (en bas de l'écran) */
.wc-scrollcloud {
    --wc-scroll-x: 0px;   /* position horizontale (px) calculée en JS, déjà bornée */
    --wc-scroll-pct: 0%;  /* largeur de la traînée */
    position: fixed; left: 0; bottom: 0; width: 100%; height: 0;
    z-index: 1031; pointer-events: none;
    /* Pas d'overflow:hidden ici : le conteneur a height:0, ça masquerait le nuage.
       Le débordement horizontal est évité en bornant la position en JS (clientWidth). */
}
.wc-scrollcloud-trail {
    position: absolute; left: 0; bottom: 0; height: 4px; width: var(--wc-scroll-pct);
    background: linear-gradient(90deg, rgba(255, 193, 7, 0) 0%, rgba(246, 200, 76, .5) 55%, #ffc107 100%);
    box-shadow: 0 0 10px rgba(255, 193, 7, .9), 0 0 22px rgba(255, 193, 7, .55);
    border-radius: 0 3px 3px 0;
}
.wc-scrollcloud-img {
    position: absolute; left: 0; bottom: 0; width: 46px; height: auto;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 0 9px rgba(255, 193, 7, .85)) drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
    animation: wc-scrollcloud-bob 3s ease-in-out infinite;
    will-change: transform;
}
/* Bascule jour / nuit du nuage indicateur */
.wc-scrollcloud-light { display: none; }
.wc-light .wc-scrollcloud-dark { display: none; }
.wc-light .wc-scrollcloud-light { display: block; }
/* En mode jour, la traînée passe au rose pour rester cohérente avec le nuage */
.wc-light .wc-scrollcloud-trail {
    background: linear-gradient(90deg, rgba(248, 184, 204, 0) 0%, rgba(244, 143, 163, .55) 55%, #f48fa3 100%);
    box-shadow: 0 0 10px rgba(244, 143, 163, .9), 0 0 22px rgba(244, 143, 163, .55);
}
.wc-light .wc-scrollcloud-img {
    filter: drop-shadow(0 0 9px rgba(244, 143, 163, .85)) drop-shadow(0 3px 5px rgba(0, 0, 0, .25));
}
@keyframes wc-scrollcloud-bob {
    0%, 100% { transform: translateX(var(--wc-scroll-x)) translateY(12%) rotate(-2.5deg); }
    50%      { transform: translateX(var(--wc-scroll-x)) translateY(calc(12% - 5px)) rotate(2.5deg); }
}

.wc-hero-inner { position: relative; z-index: 2; }
.wc-hero-grid {
    display: grid;
    grid-template-columns: 1fr;   /* carte live déplacée dans les stats -> hero sur une colonne */
    gap: 2.5rem; align-items: center;
}
.wc-hero-content { max-width: 640px; }

/* Rangée stats + carte live : carte live au milieu, cartes stats à leur taille naturelle
   (centrées verticalement par rapport à la carte live, plus grande). */
.wc-stats-live { align-items: center; }

/* Ligne à mots tournants */
.wc-hero-rotator {
    display: flex; align-items: center; gap: .55rem;
    font-family: var(--wc-display); font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    font-size: clamp(1rem, 2.4vw, 1.5rem);
    margin: 0 0 .9rem; color: var(--wc-text);
}
.wc-hero-rotator > i { color: var(--wc-accent); }
.wc-rotator { display: inline-block; position: relative; min-height: 1.4em; overflow: hidden; vertical-align: bottom; }
.wc-rotator-word {
    display: block; color: var(--wc-accent); white-space: nowrap;
    animation: wc-rotator-in .65s cubic-bezier(.33, 1, .68, 1);
    will-change: transform, opacity, filter;
}
/* Le mot sortant quitte le flux : le mot entrant reste seul, calé à gauche,
   donc aucun saut horizontal — les deux glissent dans la même colonne. */
.wc-rotator-word.is-out {
    position: absolute; top: 0; left: 0; width: 100%;
    animation: wc-rotator-out .55s cubic-bezier(.32, 0, .67, 0) forwards;
}
@keyframes wc-rotator-in {
    0%   { transform: translateY(100%); opacity: 0; filter: blur(4px); }
    55%  { opacity: 1; }
    100% { transform: translateY(0);    opacity: 1; filter: blur(0); }
}
@keyframes wc-rotator-out {
    0%   { transform: translateY(0);     opacity: 1; filter: blur(0); }
    100% { transform: translateY(-100%); opacity: 0; filter: blur(4px); }
}

/* Carte « live » du hero */
.wc-hero-card {
    position: relative;
    background: rgba(20, 20, 28, .72);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    box-shadow: var(--wc-shadow);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .9rem;
}
.wc-hero-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.wc-hero-card-status {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--wc-display); font-weight: 600; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .4px; color: var(--wc-muted);
}
.wc-hero-card-status.is-online { color: #2ecc71; }
.wc-hero-card-status.is-offline { color: var(--wc-live); }
.wc-hero-card-status .wc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(46,204,113,.18); animation: wc-pulse 2s infinite; }
.wc-hero-card-coin { width: 30px; height: 30px; }
.wc-hero-card-online { display: flex; align-items: baseline; gap: .5rem; }
.wc-hero-card-online-num { font-family: var(--wc-display); font-weight: 800; font-size: 2.2rem; color: var(--wc-text); line-height: 1; }
.wc-hero-card-online-label { color: var(--wc-muted); font-size: .85rem; }
.wc-hero-card-top {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; border-radius: var(--wc-radius-sm);
    background: var(--wc-surface-2); border: 1px solid var(--wc-border);
    text-decoration: none; transition: border-color .18s ease, transform .18s ease;
}
.wc-hero-card-top:hover { border-color: var(--wc-accent); transform: translateY(-2px); }
.wc-hero-card-rank { font-family: var(--wc-display); font-weight: 700; font-size: .8rem; color: #d4a017; white-space: nowrap; }
.wc-hero-card-avatar { width: 28px; height: 28px; border-radius: 5px; image-rendering: pixelated; }
.wc-hero-card-pname { font-weight: 600; color: var(--wc-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-hero-card-elo { font-family: var(--wc-display); font-weight: 800; color: var(--wc-accent); }
.wc-hero-card-event {
    display: flex; flex-direction: column; gap: .2rem;
    padding: .6rem .7rem; border-radius: var(--wc-radius-sm);
    background: var(--wc-surface-2); border: 1px solid var(--wc-border);
    position: relative;
}
.wc-hero-card-event.is-live { border-color: var(--wc-live); }
.wc-hero-card-event-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--wc-muted); }
.wc-hero-card-event-label i { color: var(--wc-accent); }
.wc-hero-card-event-title { font-weight: 600; color: var(--wc-text); }
.wc-hero-card-event-cd { position: absolute; top: .6rem; right: .7rem; font-family: var(--wc-display); font-weight: 700; font-size: .85rem; color: var(--wc-accent); }
.wc-hero-card-event-when { font-family: var(--wc-display); font-weight: 600; font-size: .82rem; color: var(--wc-accent); }
.wc-hero-card-event-when i { margin-right: .25rem; }
.wc-hero-card-event--empty .wc-hero-card-event-title { color: var(--wc-muted); font-weight: 600; font-size: .95rem; }
.wc-hero-card-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    font-family: var(--wc-display); font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
    font-size: .85rem; color: var(--wc-accent); text-decoration: none;
    margin-top: .35rem; padding-top: .85rem; border-top: 1px solid var(--wc-border);
    transition: gap .18s ease;
}
.wc-hero-card-cta:hover { gap: .7rem; }
.wc-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--wc-surface-2); border: 1px solid var(--wc-border);
    border-radius: 100px; padding: .35rem .9rem;
    font-family: var(--wc-display); font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase; font-size: .9rem; color: var(--wc-muted);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
/* Capsule colorée selon l'état du serveur (ressort mieux) */
.wc-eyebrow:has(.wc-status-dot.is-offline) {
    background: rgba(231, 76, 60, .14); border-color: rgba(231, 76, 60, .5); color: #ff9b8f;
}
.wc-eyebrow:has(.wc-status-dot.is-online) {
    background: rgba(46, 204, 113, .12); border-color: rgba(46, 204, 113, .45); color: #7fe3a6;
}
.wc-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wc-muted); }
.wc-status-dot.is-online { background: #2ecc71; box-shadow: 0 0 0 4px rgba(46,204,113,.2); animation: wc-pulse 2s infinite; }
.wc-status-dot.is-offline { background: var(--wc-live); box-shadow: 0 0 0 4px rgba(231,76,60,.22); }

.wc-hero-title {
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    text-transform: uppercase;
    margin: 1.1rem 0 .6rem;
    color: #f4f5fb;                              /* clair dans les 2 modes : le hero est une illustration sombre */
    text-shadow: 0 2px 16px rgba(0, 0, 0, .4);   /* lisibilité par-dessus l'image */
}
/* Titre : couleur statique (animation de glint retirée) */
.wc-title-char { color: inherit; }
.wc-hero-subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: #e3e3e8; margin-bottom: 1.5rem; }
.wc-ip-hero { margin-bottom: 1.5rem; font-size: 1.1rem; }
.wc-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Stats ---------- */
.wc-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.wc-stat {
    background: linear-gradient(180deg, var(--wc-surface-2), var(--wc-surface));
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 2rem 1.5rem; text-align: center;
    position: relative; overflow: hidden; isolation: isolate;
    transition: transform .25s ease, border-color .25s ease;
}
.wc-stat::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--wc-accent); transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.wc-stat:hover { transform: translateY(-4px); border-color: var(--wc-accent); }
.wc-stat:hover::before { transform: scaleX(1); }
.wc-stat-icon { font-size: 1.8rem; color: var(--wc-accent); }
.wc-stat-num { font-family: var(--wc-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; margin: .5rem 0 .25rem; }
.wc-stat-label { color: #d6d7dd; text-transform: uppercase; letter-spacing: 1px; font-size: .85rem; font-weight: 600; }
html.wc-light .wc-stat-label { color: var(--wc-text); }

/* ---------- Tabs ---------- */
.wc-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.wc-tab {
    background: var(--wc-surface-2); border: 1px solid var(--wc-border);
    color: var(--wc-muted); border-radius: 100px;
    padding: .5rem 1.2rem;
    font-family: var(--wc-display); font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    cursor: pointer; transition: all .2s ease;
}
.wc-tab:hover { color: #fff; border-color: var(--wc-accent); }
.wc-tab.active { background: var(--wc-accent); color: #14141a; border-color: var(--wc-accent); }
.wc-tab.active:hover { color: #14141a; }

/* ---------- Match cards ---------- */
.wc-news {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem;
}
/* Events du planning : cartes centrées */
.wc-events {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem;
}
.wc-events .wc-match-card { flex: 0 1 320px; }
.wc-match-card {
    background: linear-gradient(180deg, var(--wc-surface-2), var(--wc-surface));
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 1.4rem;
    position: relative; overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.wc-match-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--wc-accent); transform: scaleY(0); transform-origin: top; transition: transform .3s ease;
}
.wc-match-card:hover { transform: translateY(-5px); border-color: var(--wc-accent); box-shadow: var(--wc-shadow); }
.wc-match-card:hover::before { transform: scaleY(1); }
.wc-match-card.is-hidden { display: none; }

.wc-match-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.wc-tag {
    font-family: var(--wc-display); font-weight: 600; font-size: .78rem; letter-spacing: 1px; text-transform: uppercase;
    padding: .25rem .6rem; border-radius: 6px;
    background: var(--wc-surface-3); color: var(--wc-muted); border: 1px solid var(--wc-border);
}
.wc-tag-tournoi { color: var(--wc-accent); border-color: var(--wc-accent); }
.wc-tag-live { color: #ff5a8a; border-color: #ff5a8a; }
.wc-tag-event { color: #6c8cff; border-color: #6c8cff; }

.wc-badge-live, .wc-badge-soon {
    font-family: var(--wc-display); font-weight: 700; font-size: .78rem; letter-spacing: 1px;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .6rem; border-radius: 6px;
}
.wc-badge-live { background: var(--wc-live); color: #fff; }
.wc-badge-soon { background: var(--wc-surface-3); color: var(--wc-muted); border: 1px solid var(--wc-border); }
.wc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: wc-pulse 1.4s infinite; }

.wc-match-title { font-size: 1.3rem; margin: 0; }
.wc-match-mode { color: var(--wc-muted); font-size: .9rem; }

.wc-match-teams {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin: 1.2rem 0; padding: 1rem 0;
    border-top: 1px solid var(--wc-border-soft); border-bottom: 1px solid var(--wc-border-soft);
}
.wc-team { font-family: var(--wc-display); font-weight: 600; font-size: 1.05rem; text-align: center; flex: 1; }
.wc-vs { color: var(--wc-accent); font-family: var(--wc-display); font-weight: 700; font-size: .9rem; }

.wc-match-foot { display: flex; justify-content: space-between; color: var(--wc-muted); font-size: .9rem; }
.wc-match-foot i { color: var(--wc-accent); margin-right: .3rem; }

/* ---------- News ---------- */
.wc-news-card {
    display: flex; flex-direction: column;
    flex: 0 1 360px;            /* largeur de carte ; centrées via .wc-news */
    background: var(--wc-surface); border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius); overflow: hidden;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.wc-news-card:hover { transform: translateY(-5px); border-color: var(--wc-accent); box-shadow: var(--wc-shadow); }
.wc-news-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.wc-news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.wc-news-card:hover .wc-news-img img { transform: scale(1.06); }
.wc-news-body { padding: 1.2rem 1.3rem .5rem; flex: 1; }
.wc-news-title { font-size: 1.25rem; margin: 0 0 .5rem; }
.wc-news-title a { color: var(--wc-text); }
.wc-news-title a:hover { color: var(--wc-accent); }
.wc-news-excerpt { color: var(--wc-muted); font-size: .94rem; margin: 0; }
.wc-news-foot { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.3rem; border-top: 1px solid var(--wc-border-soft); color: var(--wc-muted); font-size: .85rem; }
.wc-news-link { font-family: var(--wc-display); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.wc-news-link i { transition: transform .2s ease; }
.wc-news-link:hover i { transform: translateX(4px); }

/* ---------- Footer ---------- */
.wc-footer { background: var(--wc-bg-soft); border-top: 1px solid var(--wc-border); padding: 3rem 1rem 1.5rem; }
.wc-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.wc-footer-desc { color: var(--wc-muted); margin: 1rem 0; max-width: 38ch; }
.wc-footer-title { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 1px; color: var(--wc-text); margin-bottom: 1rem; }
.wc-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.wc-footer-links a { color: var(--wc-muted); }
.wc-footer-links a:hover { color: var(--wc-accent); }

.wc-socials { display: flex; gap: .6rem; }
.wc-social {
    width: 42px; height: 42px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wc-surface-2); border: 1px solid var(--wc-border);
    color: var(--wc-text); font-size: 1.2rem;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.wc-social:hover { transform: translateY(-3px); background: var(--wc-social, var(--wc-accent)); border-color: var(--wc-social, var(--wc-accent)); color: #fff; }
/* TikTok : couleur de marque quasi-blanche → garder l'icône sombre au survol pour qu'elle reste visible */
.wc-social:hover .bi-tiktok { color: #111118; }

.wc-footer-bottom { text-align: center; color: var(--wc-muted-2); border-top: 1px solid var(--wc-border-soft); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .88rem; }
.wc-footer-bottom p { margin: 0; }

/* ---------- Easter-egg « HUH » (navbar, tout en haut à droite) ---------- */
.wc-huh {
    --wc-huh-scale: 1;
    display: inline-flex; align-items: center; flex: none; margin-left: .4rem;
    background: none; border: 0; padding: 0; line-height: 0; cursor: pointer;
    transform: scale(var(--wc-huh-scale));
    transform-origin: center;                                    /* grossit autour de son centre : reste à sa place (ne « descend » pas) */
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);   /* léger rebond à chaque palier */
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .4));
    -webkit-tap-highlight-color: transparent;
}
.wc-huh img { width: 32px; height: 32px; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.wc-huh:hover { filter: drop-shadow(0 0 13px rgba(255, 193, 7, .55)); }
.wc-huh:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 4px; border-radius: 10px; }
.wc-huh.is-pop { animation: wc-huh-pop .3s ease; }
@keyframes wc-huh-pop {
    0%   { transform: scale(var(--wc-huh-scale)); }
    45%  { transform: scale(calc(var(--wc-huh-scale) * 1.2)) rotate(-7deg); }
    70%  { transform: scale(calc(var(--wc-huh-scale) * .96)) rotate(4deg); }
    100% { transform: scale(var(--wc-huh-scale)); }
}

/* Feu d'artifice d'emotes (overlay plein écran, généré en JS) */
.wc-huh-fx { position: fixed; inset: 0; z-index: 3000; pointer-events: none; overflow: hidden; }
.wc-huh-particle {
    position: fixed; opacity: 0;
    transform: translate(-50%, -50%) scale(.4);
    will-change: transform, opacity;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4));
    animation: wc-huh-burst 1.2s cubic-bezier(.16, .7, .3, 1) forwards;
}
@keyframes wc-huh-burst {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(.35) rotate(0); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .wc-huh { transition: none; }
    .wc-huh.is-pop { animation: none; }
}

/* ---------- Reveal on scroll ---------- */
[data-wc-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--wc-delay, 0s); }
[data-wc-reveal].is-visible { opacity: 1; transform: none; }

@keyframes wc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* =====================================================================
   Intégration des pages internes / plugins (CSS uniquement)
   ===================================================================== */
.content, main.content { color: var(--wc-text); }

.card {
    background: var(--wc-surface) !important;   /* repli si color-mix non supporté */
    background: color-mix(in srgb, var(--wc-surface) 82%, transparent) !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: var(--wc-radius) !important;
    color: var(--wc-text);
    /* Léger voile (verre dépoli) : le motif de fond transparaît à peine, le texte reste lisible */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.card-header, .card-footer { background: var(--wc-surface-2) !important; border-color: var(--wc-border) !important; color: var(--wc-text); }
.card-title { font-family: var(--wc-display); }

.list-group-item { background: var(--wc-surface) !important; border-color: var(--wc-border) !important; color: var(--wc-text); }

.table { color: var(--wc-text); --bs-table-bg: transparent; --bs-table-color: var(--wc-text); border-color: var(--wc-border); }
.table > :not(caption) > * > * { border-color: var(--wc-border-soft); }
.table thead th { font-family: var(--wc-display); text-transform: uppercase; letter-spacing: .5px; color: var(--wc-muted); }

.form-control, .form-select {
    background: var(--wc-surface-2); border: 1px solid var(--wc-border); color: var(--wc-text);
}
.form-control:focus, .form-select:focus { background: var(--wc-surface-2); color: var(--wc-text); border-color: var(--wc-accent); box-shadow: 0 0 0 .2rem var(--wc-accent-soft); }
.form-control::placeholder { color: var(--wc-muted-2); }

.page-title, .content h1, .content h2 { font-family: var(--wc-display); text-transform: uppercase; }

.breadcrumb { background: var(--wc-surface-2); border: 1px solid var(--wc-border); border-radius: var(--wc-radius-sm); padding: .6rem 1rem; }
.breadcrumb-item, .breadcrumb-item a { color: var(--wc-muted); }

.pagination { gap: .3rem; flex-wrap: wrap; }
.pagination .page-link {
    background: var(--wc-surface-2); border-color: var(--wc-border); color: var(--wc-text);
    border-radius: var(--wc-radius-sm); min-width: 2.4rem; text-align: center;
    font-family: var(--wc-display); font-weight: 600;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pagination .page-link:hover { background: var(--wc-accent-soft); border-color: var(--wc-accent); color: var(--wc-text); }
.pagination .page-link:focus { box-shadow: 0 0 0 .2rem var(--wc-accent-soft); }
.pagination .page-item.active .page-link { background: var(--wc-accent); border-color: var(--wc-accent); color: #14141a; }
.pagination .page-item.disabled .page-link { background: var(--wc-surface-2); border-color: var(--wc-border); color: var(--wc-muted-2, var(--wc-muted)); opacity: .55; }

.alert { border-radius: var(--wc-radius-sm); border: 1px solid var(--wc-border); }

.badge.bg-secondary { background: var(--wc-surface-3) !important; }

/* Classement : icônes de rangs (référencées via CSS background si besoin côté plugin) */
.wc-rank-icon { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 991.98px) {
    .wc-burger { display: block; }
    .wc-collapse { width: 100%; }
    .wc-nav-links { flex-direction: column; align-items: stretch; gap: .2rem; margin: 1rem 0; }
    .wc-nav-link { padding: .8rem 1rem !important; border-radius: 8px; }
    .wc-nav-link::after { display: none; }
    .wc-nav-link:hover, .wc-nav-link.active { background: var(--wc-surface-2); }
    .wc-nav-actions { flex-wrap: wrap; margin: 0 0 1rem; }
    .wc-nav-actions .btn { flex: 1 1 auto; justify-content: center; }
    .wc-collapse { background: rgba(10,10,12,.98); border: 1px solid var(--wc-border); border-radius: var(--wc-radius); padding: .5rem 1rem; margin-top: .75rem; }

    /* Vitrine : carte live empilée sous le texte */
    .wc-hero-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .wc-hero-card { max-width: 420px; }
    .wc-hero-mascot { display: none; }
}

@media (max-width: 767.98px) {
    .wc-stats { grid-template-columns: 1fr; }
    .wc-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .wc-hero-content { max-width: 100%; }
    .wc-hero-card { max-width: none; }
    .wc-hero-overlay { background: linear-gradient(0deg, var(--wc-bg) 6%, rgba(10,10,12,.55) 70%, rgba(10,10,12,.7) 100%); }
}

/* Respect de la préférence « animations réduites » */
@media (prefers-reduced-motion: reduce) {
    .wc-hero-bg { animation: none; transform: scale(1.06); }
    .wc-rotator-word, .wc-rotator-word.is-out { animation: none; }
    .wc-hero-mascot { animation: none; }
    .wc-scrollcloud-img { animation: none; }
    .wc-flower { animation: none; }
}

/* =====================================================================
   Pages internes (boutique / maps / classement / règlement)
   ===================================================================== */
.card-img-top {
    border-top-left-radius: var(--wc-radius);
    border-top-right-radius: var(--wc-radius);
    object-fit: cover;
}

/* Galerie de maps */
.wc-map-card { position: relative; overflow: hidden; cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.wc-map-card:hover { transform: translateY(-4px); border-color: var(--wc-accent); }
.wc-map-card .card-img-top { aspect-ratio: 16 / 9; width: 100%; }
.wc-map-name {
    font-family: var(--wc-display); font-weight: 600;
    letter-spacing: .5px; text-transform: uppercase; font-size: .95rem;
}
/* Indice « aperçu » (loupe) au survol, par-dessus TOUTE l'image (couvre la vignette
   entière quel que soit son ratio). On l'ancre sur .wc-map-thumb via inset:0. */
.wc-map-card .wc-map-thumb { position: relative; }
.wc-map-card .wc-map-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(10, 10, 12, .38)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
        center / 42px no-repeat;
    opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.wc-map-card:hover .wc-map-thumb::after,
.wc-map-card:focus-visible .wc-map-thumb::after { opacity: 1; }

/* Lightbox d'aperçu des maps */
body.wc-noscroll { overflow: hidden; }
.wc-lightbox {
    position: fixed; inset: 0; z-index: 4000;
    display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.wc-lightbox.is-open { display: flex; }
.wc-lightbox-backdrop {
    position: absolute; inset: 0; background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(4px); cursor: zoom-out;
}
.wc-lightbox-fig {
    position: relative; z-index: 1; margin: 0;
    max-width: min(960px, 92vw); display: flex; flex-direction: column; align-items: center;
}
.wc-lightbox-img {
    max-width: 100%; max-height: 80vh; width: auto; height: auto;
    border-radius: var(--wc-radius); border: 2px solid var(--wc-border);
    box-shadow: var(--wc-shadow); background: var(--wc-surface-2);
}
.wc-lightbox-cap {
    margin-top: .9rem; color: #fff; font-family: var(--wc-display);
    text-transform: uppercase; letter-spacing: .5px; font-weight: 600; font-size: 1.05rem;
}
.wc-lightbox-close {
    position: absolute; top: -14px; right: -14px; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    border: 2px solid var(--wc-border); background: var(--wc-surface);
    color: var(--wc-text); font-size: 1.4rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color .18s ease, border-color .18s ease;
}
.wc-lightbox-close:hover { color: var(--wc-accent); border-color: var(--wc-accent); }

/* Bannière en tête de la Boutique */
.wc-shop-banner {
    display: block; width: 100%;
    /* Cadrage réglé via l'outil /banner-tool.html */
    height: 435px; max-height: 435px; object-fit: cover;
    object-position: 50% 38%;
    border-radius: var(--wc-radius); border: 1px solid var(--wc-border);
    margin-bottom: 1.6rem;
}
/* Bannières de la home (WuKong) : la tête est en haut de l'image -> on cadre vers le HAUT
   et on laisse un peu plus de hauteur pour bien voir les personnages. */
.wc-home-banner {
    object-position: center 18%;
    max-height: clamp(200px, 32vw, 400px);
}

/* Onglet « Cadeaux » de la boutique */
.wc-gift {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem); padding: 1rem .5rem;
}
.wc-gift-img {
    width: clamp(170px, 28vw, 270px); height: auto; flex: none;
    /* L'illustration est un buste (bord net en bas) : on fond le bas en transparence
       pour qu'elle se fonde dans la carte au lieu de paraître « coupée ». */
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.wc-gift-text { flex: 1 1 320px; max-width: 480px; }
.wc-gift-title {
    font-family: var(--wc-display); text-transform: uppercase; letter-spacing: .5px;
    color: var(--wc-text); margin-bottom: .6rem;
}
.wc-gift-note { color: var(--wc-muted); font-size: .9rem; margin-top: .6rem; }

/* Onglets de la boutique (sous-menus) */
.wc-shop-tabs {
    display: flex; flex-wrap: wrap; gap: .5rem;
    border: none; margin-bottom: 1.6rem;
}
.wc-shop-tabs .nav-link {
    border: 2px solid var(--wc-border); border-radius: var(--wc-radius-sm);
    background: var(--wc-surface-2); color: var(--wc-muted);
    font-family: var(--wc-display); font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px; font-size: .9rem;
    padding: .55rem 1.1rem; transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.wc-shop-tabs .nav-link:hover { color: var(--wc-text); border-color: var(--wc-accent); }
.wc-shop-tabs .nav-link.active {
    background: var(--wc-accent); color: var(--wc-on-accent, #1a1306);
    border-color: var(--wc-accent);
}
/* Onglet actif (fond accent) : garder un texte foncé lisible au survol */
.wc-shop-tabs .nav-link.active:hover { color: var(--wc-on-accent, #1a1306); }

/* Visuel produit : affiché en entier (totems verticaux inclus) */
.wc-product-img {
    height: 240px; width: 100%;
    object-fit: contain; padding: 1rem;
    background: var(--wc-surface-2);
}

/* Description dépliable (« Voir plus » / « Voir moins ») */
.wc-product-desc-inner {
    margin: .25rem 0 1rem; padding: .9rem 1rem;
    background: var(--wc-surface-2); border: 1px solid var(--wc-border-soft);
    border-radius: var(--wc-radius-sm); color: var(--wc-muted);
    font-size: .92rem; line-height: 1.55;
}
.wc-product-desc-inner strong { color: var(--wc-text); }
.wc-product-desc-inner ul { padding-left: 1.1rem; }
.wc-seemore { align-self: center; }
.wc-seemore .wc-seemore-less { display: none; }
.wc-seemore[aria-expanded="true"] .wc-seemore-more { display: none; }
.wc-seemore[aria-expanded="true"] .wc-seemore-less { display: inline; }

/* =====================================================================
   Plugin wustats — classement temps réel (pagination/recherche/saisons
   natifs). On habille ses classes aux couleurs du thème (jour/nuit).
   ===================================================================== */
.wustats-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--wc-text);
    --bs-table-hover-bg: var(--wc-accent-soft);
    --bs-table-hover-color: var(--wc-text);
    --bs-table-border-color: var(--wc-border);
    color: var(--wc-text); margin: 0;
}
.wustats-table thead th {
    font-family: var(--wc-display); text-transform: uppercase;
    letter-spacing: .5px; font-size: .85rem; color: var(--wc-muted);
    border-bottom: 2px solid var(--wc-border); white-space: nowrap;
}
.wustats-table td, .wustats-table th { border-color: var(--wc-border-soft); }
.wustats-row td { vertical-align: middle; }

.wustats-avatar {
    width: 32px; height: 32px; border-radius: 6px;
    image-rendering: pixelated; flex: none;
    border: 1px solid var(--wc-border-soft);
}
.wustats-elo { font-family: var(--wc-display); font-weight: 700; color: var(--wc-accent); }
.wustats-rank-icon {
    width: 26px; height: 26px; object-fit: contain;
    vertical-align: middle; margin-right: .4rem; flex: none;
}
.wustats-player-link { color: var(--wc-text); font-weight: 600; text-decoration: none; }
.wustats-player-link:hover { color: var(--wc-accent); }

.wustats-medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    font-family: var(--wc-display); font-weight: 700; color: #1a1306;
}
.wustats-gold   { background: linear-gradient(145deg, #ffe28a, #f5b400); color: #1a1306; }
.wustats-silver { background: linear-gradient(145deg, #eef1f5, #b9c2cc); color: #1a1306; }
.wustats-bronze { background: linear-gradient(145deg, #e9a877, #c87a3f); color: #1a1306; }
.wustats-top-1 td, .wustats-top-2 td, .wustats-top-3 td { font-weight: 600; }
/* Léger fond or / argent / bronze sur le Top 3 (harmonisé avec le Top 10 de la Home).
   On surcharge --bs-table-bg pour rester compatible avec le survol Bootstrap. */
.wustats-top-1 > td { --bs-table-bg: rgba(245, 180, 0, .13); }
.wustats-top-2 > td { --bs-table-bg: rgba(185, 194, 204, .13); }
.wustats-top-3 > td { --bs-table-bg: rgba(200, 122, 63, .14); }

/* Recherche + saison */
.wustats-search-wrap .form-control,
.wustats-season-wrap .form-select {
    background: var(--wc-surface-2); color: var(--wc-text);
    border: 2px solid var(--wc-border); border-radius: var(--wc-radius-sm);
}
.wustats-search-wrap .form-control:focus,
.wustats-season-wrap .form-select:focus {
    border-color: var(--wc-accent); box-shadow: none;
}
.wustats-search-wrap .form-control::placeholder { color: var(--wc-muted-2); }
.wustats-search-suggestions,
.wustats-search-wrap [data-wustats-player-suggestions] {
    background: var(--wc-surface); border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-sm); overflow: hidden;
}
.wustats-search-suggestions .list-group-item {
    background: transparent; color: var(--wc-text); border-color: var(--wc-border-soft);
}
.wustats-search-suggestions .list-group-item:hover {
    background: var(--wc-accent-soft); color: var(--wc-accent);
}

/* Règlement */
.wc-legal h2 {
    font-size: 1.35rem; text-transform: uppercase; color: var(--wc-accent);
    margin: 2rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--wc-border);
}
.wc-legal h2:first-child { margin-top: 0; }
.wc-legal p { color: var(--wc-muted); margin-bottom: .85rem; }
.wc-legal strong { color: var(--wc-text); }
.wc-legal ul { color: var(--wc-muted); margin-bottom: 1rem; }
.wc-legal li { margin-bottom: .35rem; }

/* =====================================================================
   Palmarès — vainqueurs All-Stars + top 10 des saisons passées
   ===================================================================== */
/* Motif décoratif réutilisable : têtes de singes en damier, glissant en diagonale (haut-gauche -> bas-droite).
   --monkey-tile = taille de répétition à l'écran (et distance de boucle, pour un défilement continu). */
@keyframes wc-monkey-slide {
    from { background-position: 0 0; }
    to   { background-position: var(--monkey-tile, 240px) var(--monkey-tile, 240px); }
}

/* 1) Fond des 3 cartes de stats (derrière l'icône / le chiffre / le label) */
.wc-stat::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    --monkey-tile: 190px;
    background: url('../img/emotes/singes-pattern.webp') repeat;
    background-size: var(--monkey-tile);
    opacity: .08;
    filter: grayscale(1) contrast(.82);   /* noir et blanc + un peu moins de contraste */
    animation: wc-monkey-slide 30s linear infinite;
}

/* 2) Fond de page (Classement, Maps) — calque fixe, très discret, derrière le contenu */
.wc-page-monkey-bg {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    --monkey-tile: 260px;
    background: url('../img/emotes/singes-pattern.webp') repeat;
    background-size: var(--monkey-tile);
    opacity: .08;
    filter: grayscale(1) contrast(.82);   /* noir et blanc + un peu moins de contraste */
    animation: wc-monkey-slide 40s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .wc-stat::after, .wc-page-monkey-bg { animation: none; }
}

.wc-palmares-subtitle {
    font-family: var(--wc-display); text-transform: uppercase;
    letter-spacing: .5px; font-size: 1.1rem; color: var(--wc-text);
    margin: 2.25rem 0 1.1rem; display: flex; align-items: center; justify-content: center; gap: .55rem;
}
.wc-palmares-subtitle i { color: var(--wc-accent); }

.wc-allstars {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
}
.wc-allstars .wc-allstar-card { flex: 0 1 240px; }
.wc-allstar-card {
    position: relative; display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: .35rem; padding: 1.5rem 1.2rem 1.3rem;
    background: var(--wc-surface); border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius); overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wc-allstar-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--wc-accent), transparent);
}
.wc-allstar-card:hover { transform: translateY(-5px); border-color: var(--wc-accent); box-shadow: var(--wc-shadow); }
.wc-allstar-trophy {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%; margin-bottom: .35rem;
    background: var(--wc-accent-soft); color: var(--wc-accent); font-size: 1.5rem;
}
.wc-allstar-edition { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--wc-muted); }
.wc-allstar-winner { font-family: var(--wc-display); font-weight: 700; font-size: 1.15rem; color: var(--wc-text); }
.wc-allstar-players { font-size: .85rem; color: var(--wc-muted); }
.wc-allstar-mvp { font-size: .82rem; color: var(--wc-accent); margin-top: .25rem; }
.wc-allstar-mvp i { font-size: .75rem; }

/* Séparateur gris foncé peu opaque (avant « Top 10 des saisons passées ») */
.wc-sep { border: 0; height: 2px; width: 100%; margin: 2.4rem 0 2rem; background: linear-gradient(90deg, transparent, var(--wc-muted-2), transparent); opacity: .35; }
.wc-season-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.1rem; }
.wc-season-tab {
    font-family: var(--wc-display); font-weight: 600; letter-spacing: .4px;
    padding: .45rem 1rem; border-radius: var(--wc-radius-sm);
    background: var(--wc-surface-2); border: 1px solid var(--wc-border);
    color: var(--wc-muted); cursor: pointer; transition: all .18s ease;
}
.wc-season-tab:hover { color: var(--wc-accent); border-color: var(--wc-accent); }
.wc-season-tab.active { background: var(--wc-accent); border-color: var(--wc-accent); color: var(--wc-on-accent, #14141a); }

.wc-season-panel { display: none; }
.wc-season-panel.active { display: block; }
.wc-season-period { color: var(--wc-muted); margin-bottom: 1rem; font-size: .9rem; }
.wc-season-period i { color: var(--wc-accent); }

.wc-top10 {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;          /* remplit la colonne de gauche (1→5) puis celle de droite (6→10) */
    gap: .5rem .9rem;
}
.wc-top10-row {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .8rem; background: var(--wc-surface);
    border: 1px solid var(--wc-border-soft); border-radius: var(--wc-radius-sm);
}
.wc-top10-pos {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--wc-display); font-weight: 700; font-size: .85rem;
    background: var(--wc-surface-3); color: var(--wc-muted);
}
.wc-top10-rank-1 .wc-top10-pos { background: linear-gradient(145deg, #ffe28a, #f5b400); color: #1a1306; }
.wc-top10-rank-2 .wc-top10-pos { background: linear-gradient(145deg, #eef1f5, #b9c2cc); color: #1a1306; }
.wc-top10-rank-3 .wc-top10-pos { background: linear-gradient(145deg, #e9a877, #c87a3f); color: #1a1306; }
/* Léger fond or / argent / bronze sur les 3 premières lignes (comme le classement) */
.wc-top10-row.wc-top10-rank-1 { background: linear-gradient(90deg, rgba(245, 180, 0, .14), rgba(245, 180, 0, .03)); border-color: rgba(245, 180, 0, .40); }
.wc-top10-row.wc-top10-rank-2 { background: linear-gradient(90deg, rgba(185, 194, 204, .14), rgba(185, 194, 204, .03)); border-color: rgba(185, 194, 204, .42); }
.wc-top10-row.wc-top10-rank-3 { background: linear-gradient(90deg, rgba(200, 122, 63, .16), rgba(200, 122, 63, .03)); border-color: rgba(200, 122, 63, .42); }
.wc-top10-avatar {
    width: 32px; height: 32px; border-radius: 6px; flex: none;
    image-rendering: pixelated; border: 1px solid var(--wc-border-soft);
}
.wc-top10-name { font-weight: 600; color: var(--wc-text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-top10-elo { font-family: var(--wc-display); font-weight: 700; color: var(--wc-accent); flex: none; }

@media (max-width: 575.98px) {
    .wc-top10 { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}

/* ---------- Podium 3D (Top 3 de la saison) ---------- */
.wc-podium {
    display: flex; align-items: flex-end; justify-content: center;
    gap: clamp(.5rem, 2vw, 1.6rem);
    margin: .5rem auto 2rem; padding: 1rem 0 0;
    min-height: 320px;
}
.wc-podium.is-empty { display: none; }
.wc-podium-spot {
    display: flex; flex-direction: column; align-items: center;
    width: clamp(120px, 22vw, 200px);
    position: relative;
}
.wc-podium-figure {
    position: relative; width: 100%;
    display: flex; align-items: flex-end; justify-content: center;
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .45));
}
.wc-podium-canvas { display: block; height: 100% !important; width: auto !important; max-width: 100%; position: relative; z-index: 2; }
.wc-podium-figure.is-ready .wc-podium-fallback { opacity: 0; visibility: hidden; }
.wc-podium-fallback {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    height: 96%; width: auto;            /* render crafty.gg (déjà lissé) */
    z-index: 1;                          /* derrière le canvas : le skin animé reste au-dessus */
    transition: opacity .4s ease; pointer-events: none;
}
.wc-podium-base {
    width: 100%; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .7rem .5rem .9rem;
    background: linear-gradient(180deg, var(--wc-surface-2), var(--wc-surface));
    border: 1px solid var(--wc-border); border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.wc-podium-rank {
    font-family: var(--wc-display); font-weight: 700; font-size: 1.4rem;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: -28px; margin-bottom: .2rem;
    border: 2px solid var(--wc-bg);
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .6);
}
/* Médaille / coupe personnalisée du podium (remplace le badge numéroté) */
.wc-podium-medal {
    width: 52px; height: 52px; object-fit: contain;
    margin-top: -42px; margin-bottom: .2rem;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
    pointer-events: none;
}
.wc-podium--1 .wc-podium-medal { width: 64px; height: 64px; margin-top: -50px; }
.wc-podium-name {
    font-weight: 700; color: var(--wc-text); max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wc-podium-elo { font-family: var(--wc-display); font-weight: 700; color: var(--wc-accent); font-size: .95rem; }
.wc-podium-elo:empty { display: none; }

/* Hauteurs des marches : le 1er domine, ordre visuel 2 · 1 · 3 */
.wc-podium--1 { order: 2; }
.wc-podium--2 { order: 1; }
.wc-podium--3 { order: 3; }
.wc-podium--1 .wc-podium-base { min-height: 132px; }
.wc-podium--2 .wc-podium-base { min-height: 96px; }
.wc-podium--3 .wc-podium-base { min-height: 72px; }
.wc-podium--1 .wc-podium-figure { height: clamp(190px, 30vw, 280px); }
.wc-podium--2 .wc-podium-figure,
.wc-podium--3 .wc-podium-figure { height: clamp(150px, 24vw, 230px); }
.wc-podium--1 .wc-podium-rank { background: linear-gradient(145deg, #ffe28a, #f5b400); color: #1a1306; }
.wc-podium--2 .wc-podium-rank { background: linear-gradient(145deg, #eef1f5, #b9c2cc); color: #1a1306; }
.wc-podium--3 .wc-podium-rank { background: linear-gradient(145deg, #e9a877, #c87a3f); color: #1a1306; }
.wc-podium--1 .wc-podium-base { border-color: rgba(245, 180, 0, .45); }
.wc-podium--2 .wc-podium-base { border-color: rgba(185, 194, 204, .45); }
.wc-podium--3 .wc-podium-base { border-color: rgba(200, 122, 63, .45); }

@media (max-width: 575.98px) {
    .wc-podium { gap: .25rem; min-height: 260px; }
    .wc-podium-spot { width: clamp(96px, 31vw, 130px); }
}

/* ---------- Champ de fleurs interactif (bas de page) ---------- */
.wc-flowerfield {
    /* --wc-flower-rise : de combien le « plafond » du champ remonte au-dessus
       de la bande basse (les fleurs peuvent donc être projetées jusque vers
       « Dernières news »). Le bas reste en place, le haut s'étend vers le haut
       (margin-top négatif) et le champ passe DERRIÈRE les cartes (z-index:-1). */
    --wc-flower-rise: clamp(280px, 40vw, 680px);
    position: relative; width: 100%;
    height: calc(clamp(300px, 30vw, 460px) + var(--wc-flower-rise));
    margin-top: calc(-1 * var(--wc-flower-rise));
    overflow: hidden;
    pointer-events: none; z-index: -1;
}
.wc-flowercloud {
    /* Plus de masque : les fleurs remplissent librement la bande, contenues
       seulement par overflow:hidden du champ. */
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 100%;
}
/* Position/rotation entièrement pilotées par le moteur physique (JS) :
   left/top = 0, tout passe par transform: translate(...). */
.wc-flower {
    position: absolute; left: 0; top: 0;
    width: var(--size, 36px); height: var(--size, 36px);
    background: var(--img-nuit, var(--img)) center / contain no-repeat;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3));
    will-change: transform;
}
html.wc-light .wc-flower { background-image: var(--img); }

/* Zone de répulsion sous la souris : aplat de couleur unie (accent), pleine
   opacité. Apparition progressive (fondu + léger zoom) à l'entrée dans le champ. */
.wc-flowercursor {
    position: fixed; top: 0; left: 0; z-index: 2;
    border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%) scale(.4);
    opacity: 0; transition: opacity .28s ease, transform .28s ease;
    background: #ffd98a;
}
.wc-flowercursor.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
html.wc-light .wc-flowercursor { background: #fbd3dc; }

@media (max-width: 767.98px) {
    .wc-flowerfield { --wc-flower-rise: clamp(220px, 55vw, 420px); height: calc(clamp(170px, 40vw, 260px) + var(--wc-flower-rise)); }
    .wc-flowercursor { display: none; }
}

/* Avatar + pseudo réutilisable (partial elements.player) */
.wc-player { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.wc-avatar {
    width: 26px; height: 26px; border-radius: 6px; flex: none;
    image-rendering: pixelated; border: 1px solid var(--wc-border-soft);
    background: var(--wc-surface-2);
}
.wc-player-name {
    font-weight: 600; color: var(--wc-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Joueur cliquable -> page de stats */
.wc-player-link { text-decoration: none; color: inherit; cursor: pointer; }
.wc-player-link:hover .wc-player-name,
.wc-player-link:hover .wc-top10-name { color: var(--wc-accent); text-decoration: underline; }
.wc-player-link:hover .wc-avatar,
.wc-player-link:hover .wc-top10-avatar { border-color: var(--wc-accent); }
/* Bloc avatar+pseudo cliquable du Top 10 */
.wc-top10-id { display: flex; align-items: center; gap: .7rem; flex: 1 1 auto; min-width: 0; }
a.wc-top10-id { text-decoration: none; color: inherit; }

/* Roster (All-Stars / Drafts) */
.wc-roster { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.wc-roster > li { display: flex; }
.wc-allstar-card .wc-roster > li,
.wc-draft-card .wc-roster > li {
    width: 100%; padding: .35rem .55rem;
    background: var(--wc-surface-2); border: 1px solid var(--wc-border-soft);
    border-radius: var(--wc-radius-sm);
}
.wc-allstar-card .wc-player { width: 100%; }

/* Vainqueurs WuCup */
.wc-cups { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.wc-cup-card {
    display: flex; flex-direction: column; gap: .55rem;
    padding: 1.2rem; border-radius: var(--wc-radius);
    background: var(--wc-surface); border: 1px solid var(--wc-border);
}
.wc-cup-edition { font-family: var(--wc-display); font-weight: 700; font-size: 1.1rem; color: var(--wc-text); }
.wc-cup-podium { display: flex; flex-direction: column; gap: .4rem; }
.wc-cup-line { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--wc-text); }
.wc-cup-line i { font-size: 1.1rem; }
.wc-cup-gold i { color: #f5b400; }
.wc-cup-silver i { color: #c2cad4; }
.wc-cup-line .wc-cup-score { margin-left: auto; font-family: var(--wc-display); font-weight: 700; color: var(--wc-muted); }
.wc-cup-semi-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .5px;
    color: var(--wc-muted); margin-top: .3rem;
}
.wc-cup-semi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.wc-cup-semi li { display: flex; align-items: center; gap: .5rem; color: var(--wc-muted); }
.wc-cup-semi .wc-cup-score { margin-left: auto; font-family: var(--wc-display); }

/* Vainqueurs des Drafts */
.wc-drafts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.wc-draft-card {
    padding: 1rem 1.1rem; border-radius: var(--wc-radius);
    background: var(--wc-surface); border: 1px solid var(--wc-border);
}
.wc-draft-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.wc-draft-name { font-family: var(--wc-display); font-weight: 700; color: var(--wc-text); }
.wc-draft-size {
    flex: none; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--wc-accent); border: 1px solid var(--wc-accent); border-radius: 999px; padding: .1rem .55rem;
}

/* Voir plus (WuCups & Drafts) */
.wc-palmares-more-wrap { display: flex; justify-content: center; margin-top: 1.6rem; }

/* =====================================================================
   Mode jour — palette Version 2 (crème / rouge / sakura)
   ===================================================================== */
html.wc-light {
    /* Palette jour adoucie : beige pastel chaud au lieu du blanc pur (moins agressif). */
    --wc-bg: #f0e7d6;
    --wc-bg-soft: #e8dcc7;
    --wc-surface: #f7f0e2;       /* cartes : beige crème, plus de blanc pur */
    --wc-surface-2: #eee3d0;
    --wc-surface-3: #e5d8c1;
    --wc-border: #d9c7ac;
    --wc-border-soft: #e6dac4;
    --wc-text: #2a1614;
    --wc-muted: #8a6a64;
    --wc-muted-2: #b29a94;
    --wc-accent: #c41f1c;
    --wc-accent-soft: rgba(196, 31, 28, .12);
    --wc-live: #e0322f;
    --wc-shadow: 0 18px 50px -22px rgba(140, 19, 19, .35);
    /* couleur de texte posée sur l'accent (rouge) : blanc en mode jour */
    --wc-on-accent: #ffffff;
    /* couleur de texte au survol sur surfaces claires */
    --wc-hover-text: #c41f1c;
}

/* Backdrop sakura plutôt que le halo violet sombre */
html.wc-light body.wc-body::before {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(248, 175, 178, .55), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(196, 31, 28, .07), transparent 55%),
        var(--wc-bg);
}

/* Patch des couleurs codées en dur pour le mode jour */
html.wc-light a:hover { color: var(--wc-hover-text); }
html.wc-light .wc-btn-accent,
html.wc-light .wc-btn-accent:hover { color: var(--wc-on-accent); }
html.wc-light .wc-btn-ghost:hover { color: var(--wc-hover-text); }
html.wc-light .wc-nav-link:hover,
html.wc-light .wc-nav-link.active { color: var(--wc-hover-text) !important; }
html.wc-light .wc-dropdown .dropdown-item:hover,
html.wc-light .wc-dropdown .dropdown-item.active { color: var(--wc-hover-text); }
html.wc-light .wc-ip-label { color: var(--wc-on-accent); }
html.wc-light .wc-tab.active { color: var(--wc-on-accent); }
html.wc-light .wc-tab:hover { color: var(--wc-hover-text); }
/* Onglets actifs (fond accent) : conserver le texte sur-accent au survol */
html.wc-light .wc-tab.active:hover,
html.wc-light .wc-shop-tabs .nav-link.active:hover { color: var(--wc-on-accent); }
html.wc-light .pagination .page-item.active .page-link { color: var(--wc-on-accent); }
html.wc-light .wc-badge-live,
html.wc-light .wc-live-dot { color: #fff; }
html.wc-light .wc-social:hover { color: #fff; }

/* Barre de navigation translucide claire */
html.wc-light .wc-nav { background: rgba(246, 240, 237, .65); }
html.wc-light .wc-nav.scrolled {
    background: rgba(246, 240, 237, .92);
    box-shadow: 0 10px 30px -18px rgba(140, 19, 19, .25);
}
html.wc-light .wc-brand-logo { filter: drop-shadow(0 2px 6px rgba(140, 19, 19, .25)); }
@media (max-width: 991.98px) {
    html.wc-light .wc-collapse { background: rgba(247, 240, 226, .98); }
}

/* Cartes plus douces en mode jour */
html.wc-light .card { box-shadow: 0 12px 30px -22px rgba(140, 19, 19, .3); }

/* Hero : visuel Wukong Combat en mode jour.
   L'image est légèrement zoomée (130%) et ancrée à droite (100%) : combinés,
   le personnage glisse vers le centre de l'écran et sa tête n'est plus
   masquée par la carte « live » de droite. */
html.wc-light .wc-hero-bg {
    background-image: var(--wc-hero-img-light);
    background-size: 130% auto;
    background-position: 100% 4%;
}
html.wc-light .wc-hero-card { background: rgba(247, 240, 226, .9); }

/* Bouton de bascule jour/nuit */
.wc-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border: 2px solid var(--wc-border); border-radius: var(--wc-radius-sm);
    background: var(--wc-surface-2); color: var(--wc-text);
    cursor: pointer; font-size: 1.1rem; line-height: 1;
    transition: filter .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.wc-theme-toggle:hover { border-color: var(--wc-accent); color: var(--wc-accent); }
.wc-theme-toggle .bi-sun-fill { display: none; }
.wc-theme-toggle .bi-moon-stars-fill { display: inline-block; }
html.wc-light .wc-theme-toggle .bi-sun-fill { display: inline-block; }
html.wc-light .wc-theme-toggle .bi-moon-stars-fill { display: none; }

/* =====================================================================
   Plugin wustats — overrides prioritaires
   Le CSS du plugin est chargé APRÈS celui du thème et utilise des
   sélecteurs [data-bs-theme="dark"] (plus spécifiques) + un mode sombre
   indépendant de notre bascule jour/nuit (html.wc-light). On force donc
   nos couleurs de marque via !important, basées sur var(--wc-accent) pour
   rester cohérentes en mode jour ET nuit.
   ===================================================================== */
.wustats-elo,
.wustats-elo-big,
[data-bs-theme="dark"] .wustats-elo,
[data-bs-theme="dark"] .wustats-elo-big,
.dark .wustats-elo,
.dark .wustats-elo-big {
    color: var(--wc-accent) !important;
}
.wustats-player-link:hover { color: var(--wc-accent) !important; }
.wustats-mvp-badge,
.wustats-mvp-badge a { color: var(--wc-accent) !important; }

/* Titre dégradé violet du plugin → typo de marque */
.wustats-header h1,
[data-bs-theme="dark"] .wustats-header h1,
.dark .wustats-header h1 {
    background: none !important;
    -webkit-text-fill-color: var(--wc-text) !important;
    color: var(--wc-text) !important;
}
.wustats-subtitle { color: var(--wc-muted) !important; }

/* Survol de ligne + top 3 aux couleurs du thème */
.wustats-row:hover,
[data-bs-theme="dark"] .wustats-row:hover,
.dark .wustats-row:hover {
    background-color: var(--wc-accent-soft) !important;
}

/* Cartes de stats (profil joueur / match) */
.wustats-stat-card,
[data-bs-theme="dark"] .wustats-stat-card,
.dark .wustats-stat-card {
    background: var(--wc-surface-2) !important;
    border-color: var(--wc-border) !important;
}
.wustats-stat-card-value, .wustats-stat-value,
[data-bs-theme="dark"] .wustats-stat-card-value,
[data-bs-theme="dark"] .wustats-stat-value,
.dark .wustats-stat-card-value,
.dark .wustats-stat-value { color: var(--wc-text) !important; }
.wustats-stat-card-label, .wustats-stat-label { color: var(--wc-muted) !important; }

/* En-tête de table : la bordure dure du plugin → bordure douce du thème */
.wustats-table th { border-bottom-color: var(--wc-border) !important; }

/* Lien « retour au classement » au-dessus de la fiche joueur */
.wustats-back-wrap { margin: 0 0 1rem; }
.wustats-back-link {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--wc-display); font-weight: 600; letter-spacing: .3px;
    padding: .5rem .95rem; border-radius: var(--wc-radius-sm);
    background: var(--wc-surface-2); border: 1px solid var(--wc-border);
    color: var(--wc-muted); text-decoration: none;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.wustats-back-link:hover {
    color: var(--wc-accent); border-color: var(--wc-accent);
    background: var(--wc-accent-soft); transform: translateX(-3px);
}
.wustats-back-link i { font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; }

/* Sélecteur de saison (fiche joueur) */
.wustats-season-form { display: flex; align-items: center; gap: .5rem; }
.wustats-season-label {
    font-family: var(--wc-display); font-weight: 600; font-size: .85rem;
    text-transform: uppercase; letter-spacing: .4px; color: var(--wc-muted);
    margin: 0; white-space: nowrap;
}
.wustats-season-label i { color: var(--wc-accent); }
.wustats-season-form .form-select { min-width: 150px; }

/* =====================================================================
   Interactions « à découvrir » (easter-eggs discrets)
   ===================================================================== */

/* --- Onde de choc (double-clic) : gros anneau doré --- */
.wc-smash {
    position: fixed; z-index: 1030; pointer-events: none;
    width: 0; height: 0; border-radius: 50%;
    border: 5px solid rgba(255, 193, 7, .95);
    box-shadow: 0 0 30px rgba(255,193,7,.7), inset 0 0 30px rgba(255,193,7,.5);
    transform: translate(-50%, -50%);
    animation: wc-smash 0.5s cubic-bezier(.15,.7,.3,1) forwards;
}
html.wc-light .wc-smash { border-color: rgba(196,31,28,.9); box-shadow: 0 0 30px rgba(196,31,28,.6), inset 0 0 30px rgba(196,31,28,.4); }
@keyframes wc-smash {
    0%   { width: 0; height: 0; opacity: 1; border-width: 6px; }
    100% { width: 620px; height: 620px; opacity: 0; border-width: 1px; }
}

/* --- Wukong qui traverse sur son nuage (inactivité) --- */
.wc-passing-monkey {
    position: fixed; left: -160px; bottom: 8px; z-index: 1029;
    width: clamp(70px, 9vw, 120px); height: auto;
    pointer-events: none; opacity: 0; will-change: transform, opacity;
    filter: drop-shadow(0 0 16px rgba(255,193,7,.45)) drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
.wc-passing-monkey.is-go { animation: wc-passing 7s linear forwards; }
@keyframes wc-passing {
    0%   { transform: translateX(0) translateY(0) rotate(-3deg); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translateX(45vw) translateY(-14px) rotate(2deg); }
    92%  { opacity: 1; }
    100% { transform: translateX(calc(100vw + 200px)) translateY(0) rotate(-2deg); opacity: 0; }
}

/* --- Mascotte WuKong cliquable (injectée sur la page Support) --- */
.wc-support-mascot { text-align: center; margin: 2.5rem auto 1rem; }
.wc-support-mascot-hint { color: var(--wc-muted); font-size: .9rem; margin: .6rem 0 0; }
.wc-mascot {
    display: inline-block; width: clamp(110px, 22vw, 170px);
    padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.4));
    animation: wc-mascot-bob 5.5s ease-in-out infinite;
    transition: transform .18s ease;
}
.wc-mascot img {
    width: 100%; height: auto; user-select: none; pointer-events: none;
    /* Fond fondu en bas pour ne pas voir la découpe de l'emote. */
    -webkit-mask: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.wc-mascot:hover { transform: translateY(-4px) scale(1.04); }
.wc-mascot.is-bonk { animation: none; transform: scale(.9) rotate(-6deg); }
@keyframes wc-mascot-bob {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(-10px) rotate(1.5deg); }
}
/* Emote qui jaillit dans une direction aléatoire (--ex / --ey posés en JS) */
.wc-emote-pop {
    position: fixed; z-index: 1031; pointer-events: none;
    width: 56px; height: 56px;
    background: center / contain no-repeat;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.45));
    animation: wc-emote-pop 1s ease-out forwards;
}
@keyframes wc-emote-pop {
    0%   { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
    25%  { transform: translate(calc(-50% + var(--ex, 0px) * .3), calc(-50% + var(--ey, 0px) * .3)) scale(1.15); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--ex, 0px)), calc(-50% + var(--ey, -90px))) scale(.9); opacity: 0; }
}

/* --- Lit Bedwars caché (footer) --- */
.wc-footer-bottom { position: relative; }
.wc-bed {
    background: none; border: 0; padding: 4px; margin-left: .6rem; cursor: pointer;
    opacity: .35; vertical-align: middle; line-height: 0;
    transition: opacity .2s ease, transform .12s ease;
}
.wc-bed:hover { opacity: .85; }
.wc-bed.is-hit { transform: scale(.9) translateY(2px); }
.wc-bed.is-broken { opacity: 0; pointer-events: none; }
.wc-bed-img { display: block; width: 34px; height: auto; image-rendering: pixelated; }
/* éclats de bloc projetés à la destruction */
.wc-bed-chip {
    position: fixed; z-index: 1030; width: 8px; height: 8px; pointer-events: none;
    will-change: transform, opacity; animation: wc-bed-chip .7s ease-out forwards;
}
@keyframes wc-bed-chip {
    0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--cx, 0), var(--cy, -60px)) rotate(var(--cr, 180deg)); opacity: 0; }
}

/* --- Nuage de scroll cliquable + indice au survol --- */
.wc-scrollcloud[data-wc-scrolltop] { pointer-events: none; }
.wc-scrollcloud[data-wc-scrolltop] .wc-scrollcloud-img { pointer-events: auto; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.wc-scrollcloud[data-wc-scrolltop]:hover .wc-scrollcloud-img {
    transform: translateY(-3px) scale(1.18);
    filter: drop-shadow(0 0 14px rgba(255,193,7,1)) drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
/* Bulle « ↑ Haut » qui apparaît au survol du nuage */
.wc-scrollcloud-hint {
    position: absolute; left: 0; bottom: 54px; z-index: 1;
    display: inline-flex; align-items: center; gap: .15rem;
    padding: .2rem .5rem; border-radius: 999px; white-space: nowrap;
    font-family: var(--wc-display); font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .4px;
    background: var(--wc-accent); color: var(--wc-on-accent, #14141a);
    box-shadow: 0 4px 10px -2px rgba(0,0,0,.5);
    opacity: 0; transform: translate(6px, 6px) scale(.85); transform-origin: left bottom;
    transition: opacity .18s ease, transform .18s ease; pointer-events: none;
}
.wc-scrollcloud[data-wc-scrolltop]:hover .wc-scrollcloud-hint,
.wc-scrollcloud[data-wc-scrolltop]:focus-visible .wc-scrollcloud-hint {
    opacity: 1; transform: translate(6px, 0) scale(1);
}

/* --- Tilt 3D léger des cartes --- */
.wc-news, .wc-events { perspective: 900px; }
.wc-news-card, .wc-match-card { transform-style: preserve-3d; will-change: transform; }

/* --- WuCoin clicker (bas du règlement) --- */
.wc-coinclicker {
    max-width: 720px; margin: 3rem auto 1rem;
    display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: stretch; justify-content: center;
    padding: 1.4rem 1.2rem; border: 1px dashed var(--wc-border);
    border-radius: var(--wc-radius); background: var(--wc-surface);
}
.wc-coinclicker-main { flex: 1 1 280px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.wc-coinclicker-btn {
    background: none; border: 0; padding: 0; cursor: pointer; line-height: 0;
    transition: transform .08s ease;
}
.wc-coinclicker-btn img { width: 92px; height: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.wc-coinclicker-btn:active { transform: scale(.92); }
.wc-coinclicker-btn.is-spin img { animation: wc-coin-spin .5s ease; }
@keyframes wc-coin-spin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.wc-coinclicker-count { margin-top: .8rem; font-family: var(--wc-display); font-weight: 700; }
.wc-coinclicker-count b { color: var(--wc-accent); font-size: 1.3rem; }
.wc-coinclicker-label { color: var(--wc-muted); font-size: .85rem; margin-top: .15rem; }
.wc-coinclicker-label b { color: var(--wc-accent); }
.wc-coinclicker-me { margin-top: .7rem; font-size: .85rem; color: var(--wc-text); }
.wc-coinclicker-me b { color: var(--wc-accent); }

/* Mini-classement hebdo à côté du clicker */
.wc-clicker-board {
    flex: 1 1 300px; text-align: left;
    background: var(--wc-surface-2); border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius-sm); padding: 1rem 1.1rem;
}
.wc-clicker-board-title { font-family: var(--wc-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .9rem; margin-bottom: .7rem; }
.wc-clicker-board-title i { color: var(--wc-accent); margin-right: .35rem; }
.wc-clicker-top { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.wc-clicker-row { display: flex; align-items: center; gap: .55rem; background: var(--wc-surface-3); border-radius: 8px; padding: .3rem .55rem; }
.wc-clicker-row.is-first { box-shadow: inset 0 0 0 1px var(--wc-accent); }
.wc-clicker-rank { font-family: var(--wc-display); font-weight: 800; color: var(--wc-muted); width: 1.8rem; }
.wc-clicker-row.is-first .wc-clicker-rank { color: var(--wc-accent); }
.wc-clicker-face { width: 24px; height: 24px; border-radius: 5px; image-rendering: pixelated; }
.wc-clicker-name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-clicker-clicks { font-family: var(--wc-display); font-weight: 700; color: var(--wc-accent); }
.wc-clicker-empty { color: var(--wc-muted-2); font-size: .85rem; font-style: italic; padding: .3rem 0; }
.wc-clicker-record { border-top: 1px solid var(--wc-border); padding-top: .6rem; font-size: .82rem; color: var(--wc-muted); }
.wc-clicker-record i { color: var(--wc-accent); margin-right: .3rem; }
.wc-clicker-record b { color: var(--wc-text); }
.wc-clicker-ago { color: var(--wc-muted-2); }
.wc-coin-fly {
    position: fixed; z-index: 1031; width: 26px; height: 26px; pointer-events: none;
    background: center / contain no-repeat; will-change: transform, opacity;
    animation: wc-coin-fly .9s ease-out forwards;
}
@keyframes wc-coin-fly {
    0%   { transform: translate(-50%, -50%) scale(.6); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--cx,0)), calc(-50% + var(--cy,-90px))) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wc-passing-monkey, .wc-mascot, .wc-smash, .wc-emote-pop,
    .wc-bed-chip, .wc-coin-fly { animation: none !important; }
}

/* =====================================================================
   Intégration bedwars-hero (remplace l'ancien .wc-hero)
   - même gabarit que l'ancien hero (sous la navbar sticky)
   - « POUR LA COMMUNAUTÉ » suit le mode jour/nuit (--wc-accent)
   ===================================================================== */
.bw-hero {
    /* Plein écran, taille CONSTANTE : on aligne sur le 100dvh de bw-hero.css pour qu'il n'y ait
       plus de conflit de hauteur (donc plus d'effet de "grandissement" au refresh). */
    height: 100vh;
    height: 100dvh;
    min-height: 560px;
    margin-top: calc(var(--wc-nav-h) * -1);         /* full-bleed sous la navbar translucide */
    /* « Brume » colorée déplacée du milieu vers le BAS du hero (derrière les pieds de Steve). */
    background: radial-gradient(ellipse 90% 70% at 50% 108%, #1b2a4a 0%, #0c1322 55%, #070b14 100%);
}
/* Personnage MORT -> la brume du bas passe au ROUGE (même position, surcharge le bleu ci-dessus). */
.bw-hero.bw-hero--dead {
    background: radial-gradient(ellipse 90% 70% at 50% 108%, #6e1717 0%, #2a0c0c 55%, #070b14 100%);
}
.bw-hero__title {
    padding-top: 0;
    transform: translateY(-74%);                     /* remonté */
    /* Scale doux : ~84px en 2K (parfait) et descend vers ~65px en 1920 pour tenir sur 2 lignes. */
    font-size: clamp(2.5rem, 3.4vw, 5.25rem);
    max-width: 66%;                                  /* élargi : le grand "COMMUNAUTÉ" tient (sinon rogné par le clip-path) */
    /* Apparition : ouverture en volet vers le BAS (révélation haut -> bas) */
    animation: wcHeroReveal .85s cubic-bezier(.2, .85, .25, 1) both;
}
@keyframes wcHeroReveal {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
    .bw-hero__title { animation: none; }
}
.bw-hero__title em { color: var(--wc-accent); }      /* accent qui matche le jour/nuit */

/* CTA serveur (IP + boutons) sortis du hero, centrés juste en dessous */
.wc-cta-section { padding-top: 1.5rem; }             /* rapproche les boutons du hero (écart prévisible) */
.wc-hero-cta {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 1rem; margin-bottom: 2.2rem;
}
/* la puce IP gardait une marge basse de l'ancien layout vertical -> la décalait vers le haut
   par rapport au bouton Discord. On l'annule pour un alignement parfait dans la rangée. */
.wc-hero-cta .wc-ip-hero { margin-bottom: 0; }
.wc-hero-cta .wc-hero-actions { margin: 0; align-items: center; }