/* ==========================================================================
   Correctifs transversaux (téléphone + quelques finitions PC).
   Chargée EN DERNIER sur toutes les pages : les feuilles *-v2 posent leurs
   règles avec le même poids, seule la position dans la cascade les départage.
   ========================================================================== */

/* Menu du compte : il s'ouvre depuis l'avatar (zoom + léger flou), ses cases arrivent en cascade, et il se referme plus vite qu'il ne s'ouvre. */
body .user-dropdown {
    transform-origin: calc(100% - 24px) 0; transform: translateY(-10px) scale(.86); filter: blur(6px); opacity: 0; visibility: hidden;
    transition: opacity .18s ease, transform .26s cubic-bezier(.4, 0, 1, 1), filter .18s ease, visibility 0s linear .26s;
}
body .user-dropdown.active {
    transform: none; filter: none; opacity: 1; visibility: visible;
    transition: opacity .22s ease, transform .6s cubic-bezier(.16, 1.15, .3, 1), filter .3s ease, visibility 0s;
}
body .user-dropdown.active > * { animation: ddArrive .55s cubic-bezier(.16, 1, .3, 1) backwards; }
body .user-dropdown.active > :nth-child(2) { animation-delay: .05s; }
body .user-dropdown.active > :nth-child(3) { animation-delay: .09s; }
body .user-dropdown.active > :nth-child(4) { animation-delay: .13s; }
body .user-dropdown.active > :nth-child(5) { animation-delay: .17s; }
body .user-dropdown.active > :nth-child(6) { animation-delay: .21s; }
body .user-dropdown.active > :nth-child(n+7) { animation-delay: .25s; }
@keyframes ddArrive { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { body .user-dropdown, body .user-dropdown.active { transition: opacity .15s; filter: none; } body .user-dropdown.active > * { animation: none; } }

/* Effectif : le bouton Discord est de la couleur de Discord */
body .modal-discord-btn { background: #5865F2; box-shadow: 0 8px 24px rgba(88, 101, 242, .4); }
body .modal-discord-btn:hover { background: #4752c4; box-shadow: 0 14px 32px rgba(88, 101, 242, .5); }

/* Jeux : filtre avec une pastille qui glisse d'un choix à l'autre */
body .jx-filtres { position: relative; display: flex; gap: 0; padding: .35rem; border-radius: 999px; background: var(--background-secondary); width: max-content; max-width: 100%; overflow: visible; }
body .jx-filtres .jx-filtre { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; color: var(--text-secondary); opacity: 1; transition: color .3s ease; }
body .jx-filtres .jx-filtre:hover { color: var(--text-primary); }
body .jx-filtres .jx-filtre.actif { color: #fff; }
body .jx-filtres .jx-filtre-ind { position: absolute; z-index: 0; top: .35rem; bottom: .35rem; left: 0; width: 0; border-radius: 999px; background: var(--primary-color); box-shadow: 0 6px 18px -6px rgba(76, 141, 255, .7);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), width .5s cubic-bezier(.22, 1, .36, 1); }

/* Boutons de section : jamais en dessous du contenu sans être lisibles */
body .cm-secbtn { background: rgba(9, 12, 20, .94); }

@media (max-width: 768px) {
    :root { --footer-height: calc(92px + env(safe-area-inset-bottom, 0px)); }

    /* Cause des pages « qui dépassent » : une colonne `1fr` s'élargit au contenu le plus large (cartes, onglets, grilles) ; `minmax(0,1fr)` la borne à l'écran. */
    body .commu-layout, body .commu-layout.sans-side { grid-template-columns: minmax(0, 1fr); }
    body .commu-layout > *, body .bt-salle > * { min-width: 0; }
    body .bt-salle { grid-template-columns: minmax(0, 1fr); }

    /* ── Barre du bas : verre liquide, flottante ── */
    body .mbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 2300; padding: 6px 4px; border-radius: 30px; transform: none; will-change: auto;
        background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .1) 100%), rgba(20, 26, 46, .34);
        -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.12); backdrop-filter: blur(20px) saturate(190%) brightness(1.12);
        border: 1px solid rgba(255, 255, 255, .22);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 24px rgba(255, 255, 255, .06), 0 16px 38px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3); }
    body .mbar-ic { width: 50px; }
    body .mbar-i.actif .mbar-ic { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 12px rgba(0, 0, 0, .25); }
    body .mbar-i.actif .mbar-ic .material-symbols-outlined { color: #fff; }
    body .mbar-i.actif .mbar-av { border-color: #fff; }
    body .mbar-discord .mbar-ic { background: rgba(88, 101, 242, .35); }
    body .mbar-l { text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }

    /* Menu de section : le voile ne recouvre pas la barre du bas */
    body .cm-secfond { z-index: 2190; }

    /* ── Pied de page : plus haut que large, « VOGARIA » en lettres droites empilées, liens centrés ── */
    body .site-footer, body .pf2 { min-height: 540px; margin-bottom: 14px; }
    body .pf2 { margin-top: 2.5rem; }
    body .site-footer::after, body .pf2::after { writing-mode: vertical-rl; text-orientation: upright; font-size: 92px; line-height: 1; letter-spacing: .02em; top: 50%; left: 50%; bottom: auto; transform: translate(-50%, -50%); }
    body .footer-inner, body .pf2-bas { flex-direction: column; justify-content: center; align-items: center; text-align: center; }
    body .footer-links, body .pf2-legal { justify-content: center; flex-wrap: wrap; }

    /* ── Fenêtres : toujours entières dans l'écran ── */
    body .st-modal-fond { align-items: center; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
    body .st-modal { max-width: 100%; box-sizing: border-box; max-height: calc(100dvh - 2rem); }

    /* ── Onglets (classements, giveaways) : une grille de pastilles au lieu de deux rangées de texte ── */
    body .rl-tabs, body .gw-onglets { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .35rem; padding: .35rem; border: 0; border-radius: 22px; background: var(--background-secondary); }
    body .rl-tab, body .gw-onglet { justify-content: center; padding: .7rem .4rem; border-radius: 16px; font-size: .9rem; }
    body .rl-tab.active, body .gw-onglet.active { background: var(--primary-color); color: #fff; }

    /* ── Boutique : catégories qui passent à la ligne, scène à la largeur de l'écran ── */
    body .bt-cats { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; overflow: visible; border-radius: 22px; }
    body .bt-cat-ind { display: none; }
    body .bt-cat { flex: 1 1 auto; justify-content: center; padding: .6rem .8rem; }
    body .bt-cat.actif { background: var(--background-secondary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
    body .bt-sp { border-radius: 28px; }
    body .bt-sp-corps { padding: 0 1rem 1.2rem; }

    /* ── Profil : les boutons d'action en grille ── */
    body .pf-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: .5rem; align-self: stretch; }
    body .pf-actions .pf-btn { justify-content: center; }
    body .pf-actions .pf-btn.primary, body .pf-actions .pf-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* ── Documents : la description prend toute la largeur ── */
    body .doc-carte.doc-carte p { grid-column: 1 / -1; grid-row: 2; margin-top: .5rem; }

    /* ── Jeux : le filtre tient dans l'écran ── */
    body .jx-filtres { width: 100%; box-sizing: border-box; justify-content: space-between; }
    body .jx-filtres .jx-filtre { flex: 1 1 auto; padding: .6rem .25rem; font-size: .76rem; text-align: center; }
}

/* ==========================================================================
   Jeux : cartes teintées par catégorie, panneau de jeu plus doux
   ========================================================================== */
body .jx-carte { --acc: #6aa5ff; border: 0; border-radius: 28px; padding: 1.4rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 16%, var(--background-secondary)), var(--background-secondary) 64%);
    animation: jxCarteIn .6s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease; }
body .jx-carte[data-cat="Quotidien"] { --acc: #f5b94a; }
body .jx-carte[data-cat="Stratégie"] { --acc: #6aa5ff; }
body .jx-carte[data-cat="Réflexion"] { --acc: #a78bfa; }
body .jx-carte[data-cat="Hasard"] { --acc: #ff6b8b; }
@keyframes jxCarteIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
body .jx-carte::before { background: radial-gradient(160px 110px at 88% -8%, color-mix(in srgb, var(--acc) 34%, transparent), transparent 72%); }
body .jx-carte:hover { border: 0; transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 26px 46px -24px color-mix(in srgb, var(--acc) 70%, #000); }
body .jx-carte:active { transform: scale(.98); transition-duration: .08s; }
body .jx-carte .icone-tuile { width: 56px; height: 56px; border-radius: 19px; background: color-mix(in srgb, var(--acc) 22%, transparent); }
body .jx-carte .icone-tuile .material-symbols-outlined { color: var(--acc); }
body .jx-carte .jx-cat { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); border-radius: 999px; padding: .2rem .65rem; }
body .jx-carte .jx-jouer { color: var(--acc); }
@media (min-width: 900px) { body .jx-vedette { grid-column: span 2; } }
body .jx-panneau { border: 0; border-radius: 32px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    background: radial-gradient(640px 240px at 50% -60px, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 72%), var(--background-secondary); }
body .jx-retour { padding: .55rem 1rem .55rem .7rem; border-radius: 999px; background: var(--background-secondary); transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .2s; }
body .jx-retour:hover { transform: translateX(-3px); }
body .jx-boutons .st-btn { border-radius: 999px; }
@media (max-width: 768px) { body .jx-panneau { padding: 1.5rem 1rem; border-radius: 26px; } body .jx-carte { padding: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { body .jx-carte { animation: none; } }

/* ==========================================================================
   Lot 2 : finitions demandées après essai sur téléphone
   ========================================================================== */
@media (max-width: 768px) {
    /* Profil : en colonne, `flex: 1 1 260px` devenait une HAUTEUR de 260px (le grand vide sous les puces) */
    body .pf-hero-body .pf-identity { flex: 0 0 auto; width: 100%; }

    /* Le bouton de section reste sous la barre du haut, au-dessus du contenu qui défile */
    body .cm-secbtn { z-index: 990; }
    body .gv-nav { position: static; }

    /* Onglets en pilule (profil RP, gestion d'entreprise, giveaways, classements) : grille propre, plus de trait qui traîne */
    body .onglet-ind, body .pp-ind { display: none !important; }
    body .pp-onglets, body .gv-secs, body .gv-sous { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .35rem; border-radius: 22px; overflow: visible; }
    body .pp-onglet, body .gv-sec, body .gv-sous button { justify-content: center; border-radius: 16px; }
    body .pp-onglet.actif, body .gv-sec.actif { background: var(--primary-color); color: #fff; }
    body .gv-cmd { grid-column: 1 / -1; justify-content: center; }

    /* Sommaire de l'accueil Communauté : la description commence à gauche, sur toute la largeur */
    body .cm-grid .cm-card, body .cm-grid:hover .cm-card:hover, body .cm-grid:not(:hover) .cm-card:first-child { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: .9rem; row-gap: .55rem; }
    body .cm-grid .cm-card::before { display: none; }
    body .cm-grid .cm-card > .cm-icon { grid-column: 1; grid-row: 1; }
    body .cm-grid .cm-card h3, body .cm-grid .cm-card:hover h3 { grid-column: 2; grid-row: 1; }
    body .cm-grid .cm-card::after { grid-column: 3; grid-row: 1; }
    body .cm-grid .cm-card p, body .cm-grid .cm-card:hover p { grid-column: 1 / -1; grid-row: 2; }

    /* Panier : une feuille basse qui épouse son contenu, au-dessus de la barre du bas */
    body .bt-panier-drawer { top: auto; right: .6rem; left: .6rem; bottom: calc(var(--footer-height) - 4px); width: auto; max-height: 58vh; border-radius: 26px; transform: translateY(120%); }
    body .bt-panier-overlay.ouvert .bt-panier-drawer { transform: none; }
    body .bt-panier-drawer-tete { padding: 1rem 1.2rem; }
    body .bt-panier-drawer-corps { padding: .9rem 1.2rem; }
    body .bt-panier-drawer-pied { padding: 1rem 1.2rem; }

    /* Pied de page : plus compact ; « VOGARIA » debout, collé à gauche, sur toute la hauteur */
    body .site-footer { min-height: 300px; }
    body .pf2 { min-height: 0; padding-bottom: 2rem; }
    body .pf2-haut { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
    body .pf2-marque { grid-column: 1 / -1; }
    body .site-footer::after, body .pf2::after { top: .8rem; bottom: .8rem; left: .5rem; height: auto; transform: none; font-size: 17vw; line-height: .9; letter-spacing: 0;
        text-align: justify; text-align-last: justify; text-justify: inter-character; display: block; }
    body .pf2-haut, body .pf2-bas, body .footer-inner { padding-left: 14vw; }
}
@media (min-width: 1081px) { .mbar-bulle { display: none; } }

/* ==========================================================================
   Barre du bas, version « verre liquide » : une bulle de verre qui glisse vers la page ouverte
   ========================================================================== */
@media (max-width: 768px) {
    body .mbar { padding: 7px 6px; border-radius: 34px; isolation: isolate;
        background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .08)), rgba(16, 20, 36, .18);
        -webkit-backdrop-filter: blur(16px) saturate(210%) brightness(1.18) contrast(1.05); backdrop-filter: blur(16px) saturate(210%) brightness(1.18) contrast(1.05);
        border: 0;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .18), inset 0 12px 20px -12px rgba(255, 255, 255, .35), 0 22px 44px -10px rgba(0, 0, 0, .6); }
    /* Reflet : un éclat diagonal qui traverse la barre */
    body .mbar::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
        background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .12) 100%); }
    body .mbar-i { position: relative; z-index: 2; }
    body .mbar-i.actif .mbar-ic { background: none; box-shadow: none; }
    body .mbar-ic .material-symbols-outlined { color: rgba(255, 255, 255, .82); }
    body .mbar-i.actif .mbar-ic .material-symbols-outlined { color: #fff; }
    body .mbar-i.actif .mbar-l { color: #fff; }
    body .mbar-l { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
    /* La bulle : verre plus clair, relief marqué, rebond à l'arrivée */
    body .mbar-bulle { position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 28px; pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .16));
        -webkit-backdrop-filter: blur(6px) saturate(160%) brightness(1.25); backdrop-filter: blur(6px) saturate(160%) brightness(1.25);
        box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7), inset -1px -1px 0 rgba(255, 255, 255, .25), inset 0 -8px 14px -8px rgba(255, 255, 255, .4), 0 8px 18px -6px rgba(0, 0, 0, .55);
        transition: transform .62s cubic-bezier(.34, 1.45, .5, 1), width .62s cubic-bezier(.34, 1.45, .5, 1); }
}

/* ── Écrans squelettes (assets/js/skeleton.js) ── */
.sk-bloc { display: grid; gap: 1rem; width: 100%; max-width: 640px; margin: 0 auto; padding: 1.4rem 1.2rem; box-sizing: border-box; text-align: left; }
.sk-rang { display: flex; align-items: center; gap: 1rem; }
.sk-rang > span { flex: 1; display: grid; gap: .55rem; }
.sk-rond, .sk-l { display: block; position: relative; overflow: hidden; background: rgba(255, 255, 255, .07); }
.sk-rond { flex: none; width: 52px; height: 52px; border-radius: 18px; }
.sk-l { height: 13px; border-radius: 7px; }
.sk-rond::after, .sk-l::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .13) 50%, transparent 80%); transform: translateX(-100%); animation: skBrille 1.4s ease-in-out infinite; }
@keyframes skBrille { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk-rond::after, .sk-l::after { animation: none; } }

/* ==========================================================================
   Jeux : l'intérieur des parties au même langage que le reste du site
   (surfaces arrondies sans cadre, titres serrés, retours au toucher). Le gameplay n'est pas touché.
   ========================================================================== */
body .jx-titre { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 700; letter-spacing: -.04em; }
body .jx-sous { font-size: 1rem; max-width: 46ch; margin-inline: auto; }
body .jx-entete .icone-tuile { width: 56px; height: 56px; border-radius: 19px; }
body .jx-badge, body .jx-tour, body .jx-historique .puce { border: 0; background: var(--background-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
body .jx-changer-diff { border: 0; background: var(--background-card); }
body .jx-defi-carte { border-radius: 26px; background: var(--background-card); padding: 1.1rem 1.4rem; }

/* Choix de difficulté : quatre grandes tuiles teintées */
body .jx-diff-grille { gap: .8rem; }
body .jx-diff-carte { --t: #60a5fa; border: 0; border-radius: 26px; padding: 1.5rem 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    background: linear-gradient(165deg, color-mix(in srgb, var(--t) 20%, var(--background-card)), var(--background-card) 70%); transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
body .jx-diff-carte.diff-facile { --t: #4ade80; border-top: 0; } body .jx-diff-carte.diff-normal { --t: #60a5fa; border-top: 0; }
body .jx-diff-carte.diff-difficile { --t: #f59e0b; border-top: 0; } body .jx-diff-carte.diff-impossible { --t: #f87171; border-top: 0; }
body .jx-diff-carte:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 40px -24px var(--t); }
body .jx-diff-carte:active { transform: scale(.97); transition-duration: .08s; }
body .jx-diff-carte .material-symbols-outlined { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 19px; background: color-mix(in srgb, var(--t) 22%, transparent); font-size: 1.8rem; }
body .jx-diff-nom { font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }

/* Plateaux et touches */
body .jx-plateau-m { grid-template-columns: repeat(3, min(88px, 24vw)); grid-template-rows: repeat(3, min(88px, 24vw)); gap: .55rem; }
body .jx-case-m { border: 0; border-radius: 24px; background: var(--background-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .25s, box-shadow .3s; }
body .jx-case-m:not(:disabled):hover { transform: translateY(-3px); background: color-mix(in srgb, var(--primary-color) 14%, var(--background-card)); box-shadow: 0 14px 28px -16px var(--primary-color); }
body .jx-case-m:not(:disabled):active { transform: scale(.94); }
body .jx-p4-grille { border-radius: 28px; padding: .9rem; background: linear-gradient(160deg, #2549b8, #16307f); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35), 0 24px 40px -24px #1e3a8a; max-width: 100%; box-sizing: border-box; }
body .jx-p4-case { width: min(42px, 9.6vw); height: min(42px, 9.6vw); }
body .jx-p4-pion { width: 84%; height: 84%; }
body .jx-p4-ligne { gap: .3rem; } body .jx-p4-grille > .jx-p4-ligne + .jx-p4-ligne { margin-top: .3rem; }
body .jx-p4-cols .st-btn { border-radius: 14px; width: min(42px, 9.6vw); }
body .jx-lettre { border: 0; border-radius: 15px; background: var(--background-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .2s; }
body .jx-lettre:not(:disabled):hover { transform: translateY(-2px); background: color-mix(in srgb, var(--primary-color) 16%, var(--background-card)); }
body .jx-mot { font-family: inherit; font-weight: 700; }
body .jx-tuile { border-radius: 14px; }
body .jx-quiz-opt { border: 0; border-radius: 20px; padding: 1rem 1.2rem; background: var(--background-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .2s; }
body .jx-quiz-opt:hover:not(:disabled) { transform: translateX(4px); background: color-mix(in srgb, var(--primary-color) 12%, var(--background-card)); }
body .jx-quiz-lettre { border: 0; background: rgba(255, 255, 255, .1); }
body .jx-quiz-opt.bonne { background: rgba(74, 222, 128, .14); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .6); }
body .jx-quiz-opt.mauvaise { background: rgba(248, 113, 113, .14); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .6); }
body .jx-rps-btn { border: 0; border-radius: 26px; background: var(--background-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); transition: transform .4s cubic-bezier(.16, 1, .3, 1), background .2s; }
body .jx-rps-btn:hover:not(:disabled) { transform: translateY(-5px); background: color-mix(in srgb, var(--primary-color) 14%, var(--background-card)); }
body .jx-rps-btn:active { transform: scale(.95); }
body .jx-rps-tuile { border: 0; background: var(--background-card); border-radius: 26px; }
body .jx-machine { border-radius: 30px; background: linear-gradient(160deg, #161d33, #0b1020); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 40px -24px #000; }
body .jx-rouleau { border: 0; border-radius: 20px; background: var(--background-card); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4); }
body .jx-de, body .jx-carte-jeu, body .jx-carte-dos { border-radius: 18px; }
body .jx-input { border: 0; border-radius: 20px; background: var(--background-card); box-shadow: inset 0 0 0 1px var(--border-color); padding: .9rem 1.2rem; transition: box-shadow .25s; }
body .jx-input:focus { outline: 0; box-shadow: 0 0 0 2px var(--primary-color); }
body .jx-jauge { height: 12px; background: var(--background-card); }
body .jx-banniere { border-radius: 26px; border-left: 0; }
body .jx-banniere.gagne { box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .5); } body .jx-banniere.perdu { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); } body .jx-banniere.egalite { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .5); }
body .jx-recompense { border-radius: 999px; }
body .jx-statbar { border-radius: 26px; }
@media (max-width: 768px) { body .jx-lettre { width: 9.4vw; height: 11vw; min-width: 34px; } body .jx-lettres { max-width: 100%; } body .jx-rps-btn { width: 29vw; } body .jx-machine { padding: .8rem; } body .jx-rouleau { width: 22vw; height: 22vw; max-width: 76px; max-height: 76px; } }

@media (max-width: 768px) {
    body .pf2 { padding: 2rem 1.2rem 1.2rem 1.2rem; }
    body .site-footer { padding: 1.6rem 1.2rem 1.2rem; min-height: 260px; }
    body .pf2-bas { margin-top: 1.4rem; padding: .8rem 0 0; }
}

/* ==========================================================================
   Lot 3
   ========================================================================== */

/* « VOGARIA » en filigrane : uniquement sur l'accueil (le pied de page enrichi .pf2), jamais sur les autres pages */
body .site-footer::after { display: none; }
@media (max-width: 768px) { body .site-footer { min-height: 0; } body .site-footer .footer-inner, body .site-footer { padding-left: 1.2rem; } }

/* Chargement : le contour de l'écusson se dessine, puis le V */
.sk-logo { display: grid; place-items: center; padding: 2.4rem 1rem; }
.sk-logo svg { overflow: visible; }
.sk-fond { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .08); stroke-width: 2.5; }
.sk-trait, .sk-v { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sk-trait { stroke: #8a8f9c; stroke-width: 3; animation: skTrait 2.8s cubic-bezier(.5, 0, .2, 1) infinite; }
.sk-v { stroke: #e9ecf4; stroke-width: 5; animation: skV 2.8s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes skTrait { 0% { stroke-dashoffset: 1; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes skV { 0%, 40% { stroke-dashoffset: 1; opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 1; } 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sk-trait, .sk-v { animation: none; stroke-dashoffset: 0; } }

/* Boutons qui glissent : la pastille (assets/js/skeleton.js) remplace le fond du choix actif */
.gl-on { position: relative; }
.gl-ind { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none; background: var(--primary-color); box-shadow: 0 8px 20px -8px rgba(76, 141, 255, .8);
    transition: transform .55s cubic-bezier(.34, 1.35, .5, 1), width .55s cubic-bezier(.34, 1.35, .5, 1), height .4s ease, opacity .2s; }
.gl-on > *:not(.gl-ind) { position: relative; z-index: 1; }
.gl-on > .on, .gl-on > .active, .gl-on > .actif, .gl-on > [aria-selected="true"] { background: transparent !important; box-shadow: none !important; color: #fff; }

/* Bouton du menu de section : une pastille de verre avec l'icône de la page, deux lignes, un chevron rond */
@media (max-width: 768px) {
    body .cm-secbtn { gap: .85rem; min-height: 60px; padding: .5rem .7rem .5rem .6rem; border-radius: 22px; border: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)), rgba(10, 13, 22, .94);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 30px -12px rgba(0, 0, 0, .7);
        transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
    body .cm-secbtn:active { transform: scale(.97); }
    body .cm-secbtn .cm-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(135deg, rgba(76, 141, 255, .45), rgba(120, 90, 255, .35)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
    body .cm-secbtn .cm-ic .material-symbols-outlined { color: #fff; font-size: 1.35rem; }
    body .cm-secbtn .cm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    body .cm-secbtn .cm-tx small { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
    body .cm-secbtn .cm-tx b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body .cm-secbtn .cm-fl { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: transform .5s cubic-bezier(.34, 1.4, .5, 1), background .2s; }
    body .cm-secbtn .cm-fl .material-symbols-outlined { color: var(--text-primary) !important; font-size: 1.25rem; }
    body .cm-secbtn[aria-expanded="true"] .cm-fl { transform: rotate(180deg); background: var(--primary-color); }
}

/* ==========================================================================
   Barre du bas : verre liquide. Le fond est réfracté (lentille aux bords, comme iOS 26) sur Chrome/Edge ;
   ailleurs, un flou doux. Reflets, bord lumineux et bulle de sélection par-dessus.
   ========================================================================== */
@media (max-width: 768px) {
    body .mbar { padding: 7px 7px; border-radius: 36px; background: rgba(255, 255, 255, .045);
        -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(1.12); backdrop-filter: blur(10px) saturate(190%) brightness(1.12);
        box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35), inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .7), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .35), inset 0 0 22px 2px rgba(255, 255, 255, .07), 0 20px 40px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25); }
    html.lg-lens body .mbar { -webkit-backdrop-filter: url(#vg-lens) saturate(190%) brightness(1.1); backdrop-filter: url(#vg-lens) saturate(190%) brightness(1.1); }
    body .mbar::before { background: linear-gradient(110deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .14) 100%); mix-blend-mode: soft-light; }
    body .mbar-bulle { border-radius: 30px; top: 4px; bottom: 4px;
        background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .2));
        -webkit-backdrop-filter: blur(3px) saturate(220%) brightness(1.3); backdrop-filter: blur(3px) saturate(220%) brightness(1.3);
        box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .55), inset 1.5px 1.5px 1.5px -.5px rgba(255, 255, 255, .95), inset -1px -1px 1px -.5px rgba(255, 255, 255, .5), inset 0 -10px 14px -10px rgba(255, 255, 255, .5), 0 10px 22px -8px rgba(0, 0, 0, .6); }
    html.lg-lens body .mbar-bulle { -webkit-backdrop-filter: url(#vg-lens-s) saturate(220%) brightness(1.25); backdrop-filter: url(#vg-lens-s) saturate(220%) brightness(1.25); }
    body .mbar-ic .material-symbols-outlined { color: rgba(255, 255, 255, .9); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
    body .mbar-l { color: rgba(255, 255, 255, .85); font-weight: 600; }
}

/* ==========================================================================
   Jeux v3 : chaque partie est une « console » (bandeau de titre, plateau, barre d'actions)
   ========================================================================== */
body .jx-panneau { padding: 0; overflow: hidden; text-align: center; background: var(--background-secondary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 80px -50px rgba(0, 0, 0, .9); }
body .jx-panneau > * { margin-inline: clamp(1rem, 4vw, 2.6rem); }
body .jx-panneau > .jx-entete { margin: 0 0 1.2rem; padding: 1.3rem clamp(1rem, 4vw, 2.6rem); justify-content: flex-start; text-align: left; gap: 1rem;
    background: linear-gradient(120deg, color-mix(in srgb, var(--primary-color) 26%, var(--background-card)), var(--background-card) 70%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); }
body .jx-panneau > .jx-entete .icone-tuile { width: 52px; height: 52px; border-radius: 18px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
body .jx-panneau > .jx-entete .icone-tuile .material-symbols-outlined { color: #fff; }
body .jx-panneau > .jx-entete .jx-titre { font-size: clamp(1.4rem, 3vw, 2rem); }
body .jx-panneau > .jx-contexte { margin-top: 0; }
body .jx-panneau > .jx-zone { padding: 1.2rem; border-radius: 28px; background: var(--background-card); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .25); }
body .jx-panneau > .jx-boutons { margin: 1.4rem 0 0; padding: 1.1rem clamp(1rem, 4vw, 2.6rem) 1.3rem; background: var(--background-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
body .jx-panneau > :last-child:not(.jx-boutons) { margin-bottom: 1.8rem; }
body .jx-panneau .jx-boutons .st-btn:not(.partage):not(.secondaire) { background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color) 90%, #fff), var(--primary-color)); box-shadow: 0 12px 24px -12px var(--primary-color), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* Défi quotidien : la série en grand, trois tuiles, le défi du jour en carte */
body .jx-streak-badge { display: inline-flex; align-items: center; gap: .3rem; margin: .8rem auto 0; padding: .5rem 1.4rem .5rem 1rem; border-radius: 999px; background: radial-gradient(circle at 20% 30%, rgba(255, 170, 40, .45), rgba(255, 120, 20, .12)); font-size: 2.6rem; box-shadow: 0 0 40px -6px rgba(255, 150, 30, .55), inset 0 0 0 1px rgba(255, 170, 60, .35); }
body .jx-streak-badge .material-symbols-outlined { font-size: 3rem; color: #ffa326; animation: jxFlamme 1.8s ease-in-out infinite; }
@keyframes jxFlamme { 50% { transform: scale(1.12) rotate(-4deg); } }
body .jx-stats-daily { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1.2rem clamp(1rem, 4vw, 2.6rem); }
body .jx-stats-daily .bloc { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: 1rem .5rem; border-radius: 24px; background: var(--background-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
body .jx-stats-daily .bloc .material-symbols-outlined { color: var(--primary-color); font-size: 1.6rem; }
body .jx-stats-daily .bloc b { font-size: 1.6rem; letter-spacing: -.03em; }
body .jx-stats-daily .bloc span:last-child { font-size: .76rem; color: var(--text-secondary); }
body .jx-defi-carte { justify-content: flex-start; gap: 1.2rem; padding: 1.3rem 1.5rem; background: linear-gradient(120deg, color-mix(in srgb, #a78bfa 30%, var(--background-card)), var(--background-card) 75%); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .3); }
body .jx-defi-carte .icone-tuile { width: 68px; height: 68px; border-radius: 22px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
body .jx-defi-carte .icone-tuile .material-symbols-outlined { font-size: 2.2rem; color: #fff; }
body .jx-defi-nom { font-size: 1.4rem; font-weight: 700; letter-spacing: -.03em; }

/* ==========================================================================
   Lot 4
   ========================================================================== */

/* Police : les boutons et champs reprennent la police du site (les navigateurs imposent la leur par défaut) */
button, input, select, textarea { font-family: inherit; }
body .cm-secbtn { font-family: inherit; }

/* Pas d'ombre de défilement sous la barre fixe : le bouton de section défile avec la page */
@media (max-width: 768px) {
    body .cm-secbtn { position: relative; top: auto; }
}

/* Barre du bas : une barre pleine, aux couleurs du site (fini le verre) */
@media (max-width: 768px) {
    html body .mbar, html.lg-lens body .mbar { left: 12px; right: 12px; padding: 6px; border-radius: 26px; background: var(--background-secondary);
        -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--border-color);
        box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05); }
    html body .mbar::before { display: none; }
    html body .mbar-bulle, html.lg-lens body .mbar-bulle { top: 6px; bottom: 6px; border-radius: 20px; background: rgba(76, 141, 255, .2);
        -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(76, 141, 255, .45); }
    html body .mbar-ic .material-symbols-outlined { color: var(--text-secondary); filter: none; }
    html body .mbar-i.actif .mbar-ic .material-symbols-outlined { color: #8fc1ff; }
    html body .mbar-l { color: var(--text-secondary); text-shadow: none; font-weight: 600; }
    html body .mbar-i.actif .mbar-l { color: var(--text-primary); }
    html body .mbar-i.actif .mbar-ic { background: none; box-shadow: none; }
    html body .mbar-discord .mbar-ic { background: rgba(88, 101, 242, .25); }
}

/* Tout rond qui tourne du site devient l'écusson qui se dessine puis s'efface */
.spinner, .loading-spinner, .btn-spinner, .lt-spinner, .cs-spinner {
    display: inline-block; width: 44px; height: 48px; border: 0 !important; border-radius: 0 !important; animation: none !important; background: none center / contain no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'><path d='M50 6 L91 19 V54 C91 79 72 96 50 104 C28 96 9 79 9 54 V19 Z' fill='none' stroke='%238a8f9c' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' pathLength='1' stroke-dasharray='1' stroke-dashoffset='1'><animate attributeName='stroke-dashoffset' values='1;0;0;-1;-1' keyTimes='0;.45;.6;.95;1' dur='2.2s' repeatCount='indefinite'/></path></svg>");
}
button .spinner, button .loading-spinner, .btn-spinner { width: 18px; height: 20px; vertical-align: middle; }

/* Chargement plein écran (skeleton.js) : plus grand, le tracé se défait pour recommencer */
.sk-logo svg { width: 156px; height: 172px; }
.sk-v { display: none; }
.sk-trait { stroke-dashoffset: 1; animation: skTrait2 2.4s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes skTrait2 { 0% { stroke-dashoffset: 1; } 45% { stroke-dashoffset: 0; } 58% { stroke-dashoffset: 0; } 96% { stroke-dashoffset: -1; } 100% { stroke-dashoffset: -1; } }

/* Jeux : le texte d'XP ne déborde plus de sa pastille */
body .jx-statbar { flex-wrap: wrap; }
body .jx-niveau { flex-wrap: wrap; min-width: 0; }
body .jx-xp-txt { white-space: nowrap; }
@media (max-width: 768px) { body .jx-niveau { width: 100%; } body .jx-xp-track { flex: 1 1 80px; min-width: 60px; } }

/* Changement de page : la page glisse (de droite vers la gauche en avançant, l'inverse en reculant) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtSort .38s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: vtEntre .5s cubic-bezier(.16, 1, .3, 1) both; }
html[data-vt="gauche"]::view-transition-old(root) { animation-name: vtSortG; }
html[data-vt="gauche"]::view-transition-new(root) { animation-name: vtEntreG; }
@keyframes vtSort { to { opacity: 0; transform: translateX(-9%); } }
@keyframes vtEntre { from { opacity: 0; transform: translateX(9%); } }
@keyframes vtSortG { to { opacity: 0; transform: translateX(9%); } }
@keyframes vtEntreG { from { opacity: 0; transform: translateX(-9%); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* Immobilier : l'icône d'un bouton dans un écran vide garde sa taille */
.im-vide > .material-symbols-outlined { font-size: 3rem; color: var(--primary-color); }
.im-vide .im-btn { flex: none; width: auto; max-width: 100%; white-space: nowrap; }
.im-vide .im-btn .material-symbols-outlined { font-size: 1.3rem; color: #fff; }
.im-btn { white-space: nowrap; }

/* Jeux : la salle plein écran défile jusqu'au bout, au-dessus de la barre du bas */
@media (max-width: 768px) { body #jxPlay:not([hidden]) { z-index: 995; padding-bottom: calc(var(--footer-height) + 1.5rem); } }

/* Derniers ronds qui tournent : même écusson qui se dessine */
.pf-spin, .fill-status::before {
    display: inline-block; border: 0 !important; border-radius: 0 !important; animation: none !important; background: none center / contain no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'><path d='M50 6 L91 19 V54 C91 79 72 96 50 104 C28 96 9 79 9 54 V19 Z' fill='none' stroke='%238a8f9c' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' pathLength='1' stroke-dasharray='1' stroke-dashoffset='1'><animate attributeName='stroke-dashoffset' values='1;0;0;-1;-1' keyTimes='0;.45;.6;.95;1' dur='2.2s' repeatCount='indefinite'/></path></svg>");
}
.pf-spin { width: 20px; height: 22px; } .fill-status::before { width: 15px !important; height: 17px !important; }
/* icônes « refresh/sync » qui tournaient : elles pulsent à la place */
.spin, .cv-edit-statut.en-cours .material-symbols-outlined { animation: vgPulse 1.1s ease-in-out infinite !important; }
@keyframes vgPulse { 50% { opacity: .35; transform: scale(.85); } }

/* Boutons Discord : la couleur de la marque, partout */
body .nav-login-btn, body .mobile-login-btn, body .pp-lien[href*="discord.gg"] { background: #5865F2 !important; border-color: #5865F2 !important; color: #fff !important; }
body .nav-login-btn:hover, body .mobile-login-btn:hover, body .pp-lien[href*="discord.gg"]:hover { background: #4752c4 !important; border-color: #4752c4 !important; color: #fff !important; }
body .nav-login-btn .material-symbols-outlined, body .mobile-login-btn .material-symbols-outlined, body .pp-lien[href*="discord.gg"] .material-symbols-outlined { color: #fff !important; }

/* Petite étiquette « Section RolePlay » : icône + texte, comme sur les autres pages */
.en-kicker, .cx-kick { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--primary-color); }
.en-kicker .material-symbols-outlined, .cx-kick .material-symbols-outlined { font-size: 1.15rem; }

/* ═══ Retours d'octobre : fermeture des panneaux, pastilles qui glissent, barres de défilement, notifications ═══ */

/* Panneau retiré de la page : sa copie joue la sortie (assets/js/skeleton.js) */
.vg-ghost-out { animation: vgSort .2s ease forwards !important; transition: none !important; }
.vg-ghost-out > * { animation: vgSortBoite .2s cubic-bezier(.4, 0, 1, 1) forwards !important; }
@keyframes vgSort { to { opacity: 0; } }
@keyframes vgSortBoite { to { opacity: 0; transform: translateY(12px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .vg-ghost-out, .vg-ghost-out > * { animation-duration: .01ms !important; } }

/* Plus aucune barre de défilement : on défile toujours, rien ne se dessine sur les bords arrondis */
html, body, * { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* Pastilles qui glissent : variantes douces pour les menus (dossiers du Vmail, échelle des grades) */
.vx-rail > .gl-ind, .rgl-echelle > .gl-ind { border-radius: 16px; background: color-mix(in srgb, var(--primary-color) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 55%, transparent); }
.vx-rail > .gl-ind { border-radius: 14px; box-shadow: none; }
.vx-rail > .vx-dossier.actif, .rgl-echelle > .rgl-niveau.actif { background: transparent !important; box-shadow: none !important; }
.sg-chips > .gl-ind, .ef-chips > .gl-ind { background: linear-gradient(135deg, #3a6fd8, #4c8dff); box-shadow: 0 10px 22px -10px #4c8dff; }
.sg-chips > .sg-chip, .ef-chips > .ef-chip { transition: color .25s; }

/* Notifications : la barre du décompte fait le tour du cadre, collée aux bords et aux arrondis, sans jamais se refermer */
body .toast-notif .toast-notif-progress { position: absolute; inset: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: none; opacity: 1; transform: rotate(180deg); overflow: visible; pointer-events: none; animation: none; }
body .toast-notif .toast-notif-progress rect { fill: none; stroke: var(--toast-accent); stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 95 1000; animation: toastTour var(--toast-duration, 5s) linear forwards; }
body .toast-notif:hover .toast-notif-progress rect { animation-play-state: paused; }
@keyframes toastTour { to { stroke-dashoffset: 95; } }

/* Vmail : plein écran, et un peu de vie */
main:has(.vx-shell) .commu-banner { display: none; }
.vx-shell { height: calc(100dvh - var(--nav-height, 64px) - var(--footer-height, 60px) - 2.2rem); min-height: 480px; border-radius: 26px; }
.vx-ligne { animation: vxEntre .4s cubic-bezier(.16, 1, .3, 1) backwards; }
.vx-ligne:nth-child(2) { animation-delay: 30ms; } .vx-ligne:nth-child(3) { animation-delay: 60ms; } .vx-ligne:nth-child(4) { animation-delay: 90ms; } .vx-ligne:nth-child(5) { animation-delay: 120ms; } .vx-ligne:nth-child(n+6) { animation-delay: 150ms; }
.vx-lecture > :not(.vx-vide-lecture) { animation: vxLit .38s cubic-bezier(.16, 1, .3, 1) backwards; }
.vx-vide-lecture { animation: vxLit .5s cubic-bezier(.16, 1, .3, 1) backwards; }
.vx-ecrire:active { transform: scale(.97); }
@keyframes vxEntre { from { opacity: 0; transform: translateX(-14px); } }
@keyframes vxLit { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 720px) { .vx-shell { height: calc(100dvh - var(--nav-height, 64px) - var(--footer-height, 60px) - 1.2rem); } }
@media (prefers-reduced-motion: reduce) { .vx-ligne, .vx-lecture > *, .vx-vide-lecture { animation: none; } }
.rgl-echelle.gl-on { position: sticky; } @media (max-width: 900px) { .rgl-echelle.gl-on { position: relative; } }

/* Page chargée dans un cadre de l'espace staff (?embed=1) : ni barre de navigation, ni pied de page, ni menu latéral */
html.vg-embed { --nav-height: 0px; --footer-height: 0px; }
html.vg-embed .navbar, html.vg-embed .site-footer, html.vg-embed .mbar, html.vg-embed .commu-side, html.vg-embed .cm-secbtn, html.vg-embed .cm-secfond { display: none !important; }
html.vg-embed body { padding-bottom: 0 !important; }

/* Vmail : plein écran (ces règles passent devant vmail.css, chargée après), bouton Écrire uni */
main .vx-shell { height: calc(100dvh - var(--nav-height, 64px) - var(--footer-height, 60px) - 1.5rem) !important; min-height: 480px; }
main .vx-ecrire { background: var(--primary-color) !important; box-shadow: none !important; }
main .vx-ecrire:hover { filter: brightness(1.1); transform: none; }
/* Fermeture des panneaux staff : animation explicite, assez longue pour se voir */
body .st-modal-fond.st-fermeture { animation: vgSort .24s ease forwards !important; pointer-events: none; }
body .st-modal-fond.st-fermeture .st-modal { animation: vgSortBoite .24s cubic-bezier(.4, 0, 1, 1) forwards !important; }
html.vg-embed body .commu-layout { grid-template-columns: minmax(0, 1fr) !important; display: block !important; }
html.vg-embed .commu-layout > main { max-width: none !important; width: 100% !important; margin: 0 !important; }

/* Gestion d'entreprise : la pastille glisse d'une section / sous-section à l'autre */
.gv-secs > .gl-ind { border-radius: 999px; background: var(--primary-color); }
.gv-sous > .gl-ind { border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 2px var(--primary-color); }
.gv-secs > .gv-sec.actif { background: transparent !important; color: #fff; }
.gv-sous > button.actif { box-shadow: none !important; }
.gv-secs > .gv-sec, .gv-sous > button { position: relative; z-index: 1; transition: color .25s; }

/* NAV TABLETTE : deux niveaux seulement (barre du bas / bureau), plus de burger intermédiaire */
@media (min-width: 769px) and (max-width: 1080px) {
    :root { --footer-height: calc(92px + env(safe-area-inset-bottom, 0px)); }
    /* ── Barre du bas : verre liquide, flottante ── */
        body .mbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 2300; padding: 6px 4px; border-radius: 30px; transform: none; will-change: auto;
            background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .1) 100%), rgba(20, 26, 46, .34);
            -webkit-backdrop-filter: blur(20px) saturate(190%) brightness(1.12); backdrop-filter: blur(20px) saturate(190%) brightness(1.12);
            border: 1px solid rgba(255, 255, 255, .22);
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -1px 1px rgba(255, 255, 255, .12), inset 0 0 24px rgba(255, 255, 255, .06), 0 16px 38px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3); }
    body .mbar-ic { width: 50px; }
    body .mbar-i.actif .mbar-ic { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 12px rgba(0, 0, 0, .25); }
    body .mbar-i.actif .mbar-ic .material-symbols-outlined { color: #fff; }
    body .mbar-i.actif .mbar-av { border-color: #fff; }
    body .mbar-discord .mbar-ic { background: rgba(88, 101, 242, .35); }
    body .mbar-l { text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
    body .mbar { padding: 7px 6px; border-radius: 34px; isolation: isolate;
            background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .08)), rgba(16, 20, 36, .18);
            -webkit-backdrop-filter: blur(16px) saturate(210%) brightness(1.18) contrast(1.05); backdrop-filter: blur(16px) saturate(210%) brightness(1.18) contrast(1.05);
            border: 0;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .18), inset 0 12px 20px -12px rgba(255, 255, 255, .35), 0 22px 44px -10px rgba(0, 0, 0, .6); }
    /* Reflet : un éclat diagonal qui traverse la barre */
        body .mbar::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
            background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, .12) 100%); }
    body .mbar-i { position: relative; z-index: 2; }
    body .mbar-i.actif .mbar-ic { background: none; box-shadow: none; }
    body .mbar-ic .material-symbols-outlined { color: rgba(255, 255, 255, .82); }
    body .mbar-i.actif .mbar-ic .material-symbols-outlined { color: #fff; }
    body .mbar-i.actif .mbar-l { color: #fff; }
    body .mbar-l { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
    /* La bulle : verre plus clair, relief marqué, rebond à l'arrivée */
        body .mbar-bulle { position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 28px; pointer-events: none;
            background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .16));
            -webkit-backdrop-filter: blur(6px) saturate(160%) brightness(1.25); backdrop-filter: blur(6px) saturate(160%) brightness(1.25);
            box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7), inset -1px -1px 0 rgba(255, 255, 255, .25), inset 0 -8px 14px -8px rgba(255, 255, 255, .4), 0 8px 18px -6px rgba(0, 0, 0, .55);
            transition: transform .62s cubic-bezier(.34, 1.45, .5, 1), width .62s cubic-bezier(.34, 1.45, .5, 1); }
    body .mbar { padding: 7px 7px; border-radius: 36px; background: rgba(255, 255, 255, .045);
            -webkit-backdrop-filter: blur(10px) saturate(190%) brightness(1.12); backdrop-filter: blur(10px) saturate(190%) brightness(1.12);
            box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35), inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .7), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .35), inset 0 0 22px 2px rgba(255, 255, 255, .07), 0 20px 40px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25); }
    html.lg-lens body .mbar { -webkit-backdrop-filter: url(#vg-lens) saturate(190%) brightness(1.1); backdrop-filter: url(#vg-lens) saturate(190%) brightness(1.1); }
    body .mbar::before { background: linear-gradient(110deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .14) 100%); mix-blend-mode: soft-light; }
    body .mbar-bulle { border-radius: 30px; top: 4px; bottom: 4px;
            background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .07) 55%, rgba(255, 255, 255, .2));
            -webkit-backdrop-filter: blur(3px) saturate(220%) brightness(1.3); backdrop-filter: blur(3px) saturate(220%) brightness(1.3);
            box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .55), inset 1.5px 1.5px 1.5px -.5px rgba(255, 255, 255, .95), inset -1px -1px 1px -.5px rgba(255, 255, 255, .5), inset 0 -10px 14px -10px rgba(255, 255, 255, .5), 0 10px 22px -8px rgba(0, 0, 0, .6); }
    html.lg-lens body .mbar-bulle { -webkit-backdrop-filter: url(#vg-lens-s) saturate(220%) brightness(1.25); backdrop-filter: url(#vg-lens-s) saturate(220%) brightness(1.25); }
    body .mbar-ic .material-symbols-outlined { color: rgba(255, 255, 255, .9); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
    body .mbar-l { color: rgba(255, 255, 255, .85); font-weight: 600; }
    html body .mbar, html.lg-lens body .mbar { left: 12px; right: 12px; padding: 6px; border-radius: 26px; background: var(--background-secondary);
            -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--border-color);
            box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05); }
    html body .mbar::before { display: none; }
    html body .mbar-bulle, html.lg-lens body .mbar-bulle { top: 6px; bottom: 6px; border-radius: 20px; background: rgba(76, 141, 255, .2);
            -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(76, 141, 255, .45); }
    html body .mbar-ic .material-symbols-outlined { color: var(--text-secondary); filter: none; }
    html body .mbar-i.actif .mbar-ic .material-symbols-outlined { color: #8fc1ff; }
    html body .mbar-l { color: var(--text-secondary); text-shadow: none; font-weight: 600; }
    html body .mbar-i.actif .mbar-l { color: var(--text-primary); }
    html body .mbar-i.actif .mbar-ic { background: none; box-shadow: none; }
    html body .mbar-discord .mbar-ic { background: rgba(88, 101, 242, .25); }
}

/* « Roleplay » : le bleu du site, uni (le dégradé vers l'accent le ternissait) */
body .nav-link-rp, body .nav-link-rp:hover, body .nav-link-rp.active,
body .mobile-menu a.nav-link-rp, body .mobile-link-rp {
    background: none !important; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: var(--primary-color); color: var(--primary-color) !important;
}

/* Menu latéral en rangée (≤ 900 px) : l'indicateur vertical glissant (hauteur fixe) devenait un bloc bleu géant. On le coupe, le lien actif porte son propre fond. */
@media (max-width: 900px) {
    body .commu-side .cs-ind { display: none !important; }
    body .commu-side .cs-link.active, body .commu-side .cs-link.active:hover { background: var(--primary-color) !important; color: #fff; box-shadow: 0 6px 16px -8px rgba(76, 141, 255, .7) !important; }
    body .commu-side .cs-link { flex: none; }
}