/* ==========================================================================
   Parchomancia — feuille de style principale
   1. Tokens & reset          6. Hero              11. Formulaires
   2. Utilitaires             7. Sections accueil  12. Tableaux & classement
   3. Décor de fond           8. Actualités        13. Boutique & compte
   4. Boutons                 9. Pied de page      14. Responsive
   5. En-tête & navigation   10. Pages internes
   ========================================================================== */

/* 1. Tokens & reset ------------------------------------------------------ */

:root {
    --ink:         #07060c;
    --ink-2:       #0c0a14;
    --ink-3:       #12101d;

    --surface:     rgba(255, 255, 255, .035);
    --surface-2:   rgba(255, 255, 255, .06);
    --border:      rgba(233, 199, 130, .14);
    --border-soft: rgba(255, 255, 255, .08);

    --gold:        #e5b45c;
    --gold-light:  #f7dfa5;
    --gold-deep:   #a9782a;
    --violet:      #8b6bff;
    --teal:        #2fd4bd;
    --danger:      #ff6b6b;
    --success:     #4ade80;

    --text:        #ebe7f3;
    --muted:       #9c95b2;
    --muted-2:     #6f6884;

    --radius-sm:   10px;
    --radius:      16px;
    --radius-lg:   24px;

    --shadow:      0 18px 50px rgba(0, 0, 0, .45);
    --shadow-gold: 0 12px 40px rgba(229, 180, 92, .18);

    --font-display: 'Cinzel', Georgia, serif;
    --font-body:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --container:   1220px;
    --header-h:    136px;

    --ease:        cubic-bezier(.22, .78, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Décor de fond permanent : l'illustration reste fixe pendant le défilement
   et sert de texture d'ambiance à tout le site. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(180deg, rgba(7, 6, 12, .92) 0%, rgba(7, 6, 12, .86) 45%, rgba(7, 6, 12, .96) 100%),
        url('../img/page-bg.png') center / cover no-repeat;
    pointer-events: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 .6em;
    letter-spacing: .01em;
}

p { margin: 0 0 1em; }

a {
    color: var(--gold);
    text-decoration: none;
    transition: color .2s var(--ease);
}

a:hover { color: var(--gold-light); }

img { max-width: 100%; display: block; }

button { font: inherit; cursor: pointer; }

::selection { background: rgba(229, 180, 92, .3); color: #fff; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--gold-deep), #5e4212);
    border-radius: 99px;
    border: 3px solid var(--ink-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* 2. Utilitaires --------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.section { padding: 110px 0; position: relative; }

.section--features { padding-top: 90px; }

.section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
}

.section__head--left { text-align: left; margin-inline: 0; }

.section__eyebrow {
    display: inline-block;
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 18px;
    position: relative;
    padding-left: 34px;
}

.section__eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.section__head--left .section__eyebrow { padding-left: 0; }
.section__head--left .section__eyebrow::before { display: none; }

.section__title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    background: linear-gradient(135deg, #fff 10%, var(--gold-light) 55%, var(--gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .4em;
}

.section__lead {
    color: var(--muted);
    font-size: 1.06rem;
    margin: 0;
}

.nowrap { white-space: nowrap; }

.empty {
    color: var(--muted-2);
    font-style: italic;
    padding: 28px;
    text-align: center;
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius);
}

/* Révélation au défilement. Conditionnée à la classe posée par le script : si
   le JavaScript ne s'exécute pas, le contenu reste visible au lieu de rester
   bloqué à opacity: 0. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }

    /* Deux exceptions assumées. Ces respirations sont de faible amplitude, sans
       clignotement ni défilement, et constituent une signature visuelle du
       site : elles doivent se voir sur toutes les machines. Windows Server et
       les téléphones en mode économie annoncent souvent « mouvement réduit »
       par défaut, ce qui les faisait disparaître sans que personne l'ait
       demandé. L'interrupteur du pied de page reste le vrai moyen de tout
       couper. */
    .parcho__relic  { animation-duration: 7s !important; }
    .site-footer__logo { animation-duration: 9s !important; }
    .scroll-rank { animation-duration: 1.15s !important; }
    .scroll-rank__seal { animation-duration: .7s !important; }
    .scroll-rank--1 .scroll-rank__seal { animation-duration: 3.6s !important; }
    .scroll-row { animation-duration: .7s !important; }
    .vote-hall__mote { animation-duration: 7s !important; }
}

/* Deux niveaux distincts, à ne pas confondre.

   is-lowfx : posé automatiquement quand la mesure de framerate d'app.js
   détecte un rendu logiciel (VM, bureau à distance, accélération matérielle
   coupée). Il ne retire que ce qui coûte vraiment cher au processeur — flous,
   grain, canvas de particules. Les animations de transformation, elles, sont
   gratuites : elles restent, sinon le site paraît mort d'une machine à l'autre.

   is-noanim : posé uniquement par l'interrupteur du pied de page. Là, c'est un
   choix explicite de l'utilisateur, donc tout mouvement s'arrête. */
.is-lowfx .grain,
.is-lowfx .hero__particles { display: none; }

.is-noanim .parcho__relic,
.is-noanim .scroll-rank,
.is-noanim .scroll-rank__seal,
.is-noanim .scroll-row,
.is-noanim .vote-hall__mote,
.is-noanim .site-footer__logo,
.is-noanim .hero__title-line,
.is-noanim .hero__badge,
.is-noanim .hero__badge-dot,
.is-noanim .hero__subtitle,
.is-noanim .hero__actions,
.is-noanim .hero__stats,
.is-noanim .countdown,
.is-noanim .hero__scroll span,
.is-noanim .status-pill.is-online .status-pill__dot {
    animation: none;
}

/* Le dégradé animé du titre repose sur un background-position : sans
   l'animation il faut le recadrer, sinon le texte part en hors-champ. */
.is-noanim .hero__title-line--gold { background-position: 25% center; }

.is-lowfx .btn--ghost,
.is-lowfx .site-header,
.is-lowfx .site-header.is-stuck,
.is-lowfx .site-nav,
.is-lowfx .user-menu__dropdown,
.is-lowfx .flash,
.is-lowfx .hero__badge,
.is-lowfx .hero__stat,
.is-lowfx .scroll-card,
.is-lowfx .news-card__category,
.is-lowfx .scroll-top {
    backdrop-filter: none;
}

.is-lowfx .pack__coin { filter: none; }

/* Sans flou, ces surfaces translucides ont besoin d'un fond plus dense pour
   rester lisibles au-dessus de l'illustration. */
.is-lowfx .site-header.is-stuck { background: rgba(8, 7, 14, .95); }
.is-lowfx .hero__stat { background: rgba(9, 7, 16, .88); }
.is-lowfx .user-menu__dropdown,
.is-lowfx .flash { background: rgba(12, 10, 20, .99); }

/* 3. Décor de fond ------------------------------------------------------- */

/* Halos d'ambiance, peints en dégradés radiaux plutôt qu'avec des div floutées
   animées. Un filter: blur(110px) remis à l'échelle en boucle produisait des
   artefacts très visibles selon l'écran et la carte graphique : bord du flou
   rogné par l'overflow du parent, bandes qui rampent sur les panneaux à faible
   profondeur de couleur, texture réétirée par le compositeur. Les rayons sont
   en vw, donc le rendu est le même sur un 1366 et sur un ultra-large. */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(62vw 62vw at 6% -10%,  rgba(185, 132, 40, .20), transparent 60%),
        radial-gradient(54vw 54vw at 106% 36%, rgba(91, 63, 196, .20),  transparent 60%),
        radial-gradient(50vw 50vw at 32% 112%, rgba(19, 113, 95, .17),  transparent 60%);
}


.grain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 4. Boutons ------------------------------------------------------------- */

.btn {
    --btn-padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: var(--btn-padding);
    border-radius: 99px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
    white-space: nowrap;
}

.btn svg { width: 17px; height: 17px; }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--sm  { --btn-padding: 9px 18px; font-size: .88rem; }
.btn--lg  { --btn-padding: 16px 34px; font-size: 1.02rem; }
.btn--full { width: 100%; }

.btn--gold {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-deep));
    color: #241703;
    box-shadow: var(--shadow-gold);
}

.btn--gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
    transform: translateX(-130%);
    transition: transform .7s var(--ease);
}

.btn--gold:hover::after { transform: translateX(130%); }
.btn--gold:hover { box-shadow: 0 16px 46px rgba(229, 180, 92, .34); }

.btn--ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--gold-light);
    backdrop-filter: blur(8px);
}

.btn--ghost:hover {
    background: var(--surface-2);
    border-color: var(--gold);
    color: #fff;
}

.btn--dark {
    background: rgba(0, 0, 0, .35);
    border-color: var(--border-soft);
    color: var(--text);
}

.btn--dark:hover { border-color: var(--gold); color: var(--gold-light); }

.btn--danger {
    background: rgba(255, 107, 107, .12);
    border-color: rgba(255, 107, 107, .35);
    color: #ff9c9c;
}

.btn--danger:hover { background: rgba(255, 107, 107, .22); color: #fff; }

.btn:disabled, .btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* 5. En-tête & navigation ------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease), height .3s var(--ease);
    border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
    --header-h: 112px;
    background: rgba(8, 7, 14, .9);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 100%;
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    flex-shrink: 0;
    height: 100%;
    padding: 2px 2px 2px 0;
    margin-left: -18px;
}

.brand__logo {
    /* Remplit presque toute la barre, sans déborder (header overflow:hidden). */
    height: calc(var(--header-h) - 4px);
    max-height: none;
    width: auto;
    max-width: min(360px, 52vw);
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .4)) drop-shadow(0 0 16px rgba(229, 180, 92, .16));
    transition: transform .35s var(--ease), filter .35s var(--ease), height .3s var(--ease), max-width .3s var(--ease);
}

.brand:hover .brand__logo {
    transform: translateY(-1px) scale(1.03);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 22px rgba(229, 180, 92, .3));
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.site-nav > a {
    padding: 10px 17px;
    border-radius: 99px;
    color: var(--muted);
    font-weight: 600;
    font-size: 1.14rem;
    letter-spacing: .015em;
    position: relative;
    transition: color .2s var(--ease), background .2s var(--ease);
}

.site-nav > a:hover { color: var(--text); background: var(--surface); }

.site-nav > a.is-active { color: var(--gold-light); }

.site-nav > a.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 18px;
    padding-left: 18px;
    border-left: 1px solid var(--border-soft);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--muted);
}

.status-pill b { color: var(--text); }

.status-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted-2);
    flex-shrink: 0;
}

.status-pill.is-online { color: #86efac; border-color: rgba(74, 222, 128, .25); }
.status-pill.is-online .status-pill__dot {
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
    animation: pulse 2.2s infinite;
}

.status-pill.is-offline { color: #fca5a5; border-color: rgba(255, 107, 107, .22); }
.status-pill.is-offline .status-pill__dot { background: var(--danger); }

@keyframes pulse {
    to { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
}

/* Menu utilisateur */
.user-menu { position: relative; }

.user-menu__trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 13px 5px 5px;
    border-radius: 99px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--text);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.user-menu__trigger:hover { border-color: var(--gold); background: var(--surface-2); }

.user-menu__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    color: #241703;
    font-weight: 700;
    font-size: .85rem;
}

.user-menu__name { font-size: .9rem; font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

.user-menu__caret { width: 10px; height: 7px; color: var(--muted); transition: transform .25s var(--ease); }

.user-menu.is-open .user-menu__caret { transform: rotate(180deg); }

.user-menu__dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 232px;
    padding: 10px;
    border-radius: var(--radius);
    background: rgba(14, 12, 22, .97);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}

.user-menu.is-open .user-menu__dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.user-menu__points {
    display: block;
    padding: 10px 14px;
    margin-bottom: 6px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(229, 180, 92, .16), transparent);
    border: 1px solid var(--border);
    font-weight: 700;
    color: var(--gold-light);
}

.user-menu__points small {
    display: block;
    font-weight: 400;
    font-size: .72rem;
    color: var(--muted);
    letter-spacing: .04em;
}

.user-menu__dropdown a {
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: .9rem;
    font-weight: 500;
    transition: background .18s var(--ease), color .18s var(--ease);
}

.user-menu__dropdown a:hover { background: var(--surface-2); color: var(--text); }
.user-menu__dropdown a.is-staff { color: var(--violet); }
.user-menu__dropdown a.is-danger { color: #fca5a5; }

/* Bouton hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-light);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Messages flash */
.flash-stack {
    position: fixed;
    top: calc(var(--header-h) + 16px);
    right: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: rgba(14, 12, 22, .96);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    animation: flashIn .45s var(--ease) both;
}

.flash p { margin: 0; font-size: .92rem; flex: 1; }

.flash__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 700;
}

.flash--success { border-color: rgba(74, 222, 128, .3); }
.flash--success .flash__icon { background: rgba(74, 222, 128, .18); color: var(--success); }

.flash--error { border-color: rgba(255, 107, 107, .3); }
.flash--error .flash__icon { background: rgba(255, 107, 107, .18); color: var(--danger); }

.flash--info { border-color: rgba(233, 199, 130, .32); }
.flash--info .flash__icon { background: rgba(229, 180, 92, .18); color: var(--gold-light); }

.flash__close {
    background: none;
    border: 0;
    color: var(--muted-2);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 2px;
}

.flash__close:hover { color: var(--text); }

.flash.is-leaving { animation: flashOut .3s var(--ease) forwards; }

@keyframes flashIn {
    from { opacity: 0; transform: translateX(40px) scale(.96); }
}

@keyframes flashOut {
    to { opacity: 0; transform: translateX(40px) scale(.96); }
}

/* 6. Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    padding: 80px 0 120px;
    overflow: hidden;
}

/* Paysage du Monde des Douze. Les dégradés superposés assombrissent le haut
   et les bords pour que le titre reste lisible sur l'illustration. */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 6, 12, .9) 0%, rgba(7, 6, 12, .55) 30%, rgba(7, 6, 12, .35) 55%, rgba(7, 6, 12, .96) 100%),
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(7, 6, 12, .55), transparent 75%),
        url('../img/hero-bg.png') center bottom / cover no-repeat;
    pointer-events: none;
}

/* Raccord entre l'illustration et la section suivante. */
.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(180deg, transparent, var(--ink));
    pointer-events: none;
}

.hero__particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero__glow {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 900px;
    height: 500px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(229, 180, 92, .16), transparent 68%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    border-radius: 99px;
    background: var(--surface);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--gold-light);
    margin-bottom: 34px;
    animation: fadeUp .8s var(--ease) both;
}

.hero__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold);
    animation: pulse 2.4s infinite;
}

.hero__title {
    font-size: clamp(2.5rem, 7vw, 5.2rem);
    font-weight: 900;
    line-height: 1.04;
    margin-bottom: 28px;
    letter-spacing: -.01em;
}

.hero__title-line {
    display: block;
    animation: fadeUp .9s var(--ease) both;
}

.hero__title-line:nth-child(1) {
    color: #fff;
    animation-delay: .1s;
}

.hero__title-line--gold {
    background: linear-gradient(120deg, var(--gold-deep) 0%, var(--gold-light) 40%, #fff6dd 52%, var(--gold) 70%, var(--gold-deep) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fadeUp .9s var(--ease) .22s both, shimmer 7s linear 1.2s infinite;
}

@keyframes shimmer {
    to { background-position: 220% center; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
}

.hero__subtitle {
    max-width: 640px;
    color: var(--muted);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    margin-bottom: 40px;
    animation: fadeUp .9s var(--ease) .34s both;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    animation: fadeUp .9s var(--ease) .46s both;
}

.hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 64px;
    animation: fadeUp .9s var(--ease) .58s both;
}

.hero__stat {
    min-width: 150px;
    padding: 20px 26px;
    border-radius: var(--radius);
    /* Posé sur l'illustration : il faut un fond plus opaque que les autres
       cartes du site pour rester lisible. */
    background: rgba(9, 7, 16, .62);
    border: 1px solid var(--border);
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

.hero__stat:hover {
    transform: translateY(-4px);
    background: rgba(9, 7, 16, .78);
    border-color: var(--gold);
}

.hero__stat b {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold-light);
    line-height: 1.1;
}

.hero__stat span {
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.hero__stat--status.is-online b { color: var(--success); }
.hero__stat--status.is-offline b { color: var(--danger); }

/* Compte à rebours */
.countdown { margin-top: 58px; animation: fadeUp .9s var(--ease) .58s both; }

.countdown__label {
    font-size: .76rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

.countdown__units { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.countdown__unit {
    min-width: 96px;
    padding: 18px 12px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(229, 180, 92, .1), transparent);
    border: 1px solid var(--border);
}

.countdown__unit b {
    display: block;
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--gold-light);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.countdown__unit span {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.hero__scroll {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 14px;
    display: grid;
    place-items: start center;
    padding-top: 8px;
}

.hero__scroll span {
    width: 3px;
    height: 7px;
    border-radius: 2px;
    background: var(--gold);
    animation: scrollDot 1.9s var(--ease) infinite;
}

@keyframes scrollDot {
    0%   { opacity: 0; transform: translateY(0); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(15px); }
}

/* 7. Sections de l'accueil ---------------------------------------------- */

/* Taux */
.rates {
    padding: 34px 0;
    border-block: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(229, 180, 92, .05), transparent);
}

.rates__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    text-align: center;
}

.rate { padding: 10px; border-right: 1px solid var(--border-soft); }
.rate:last-child { border-right: 0; }

.rate b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.85rem;
    color: var(--gold-light);
    line-height: 1.1;
}

.rate span {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.rate--accent b { color: var(--teal); }

/* Piliers */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 20px;
}

.feature {
    position: relative;
    padding: 34px 30px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid var(--border-soft);
    overflow: hidden;
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(229, 180, 92, .1), transparent 45%);
    opacity: 0;
    transition: opacity .4s var(--ease);
    pointer-events: none;
}

.feature:hover {
    transform: translateY(-6px);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.feature:hover::before { opacity: 1; }

.feature__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(229, 180, 92, .2), rgba(229, 180, 92, .04));
    border: 1px solid var(--border);
    color: var(--gold-light);
}

.feature__icon svg { width: 26px; height: 26px; }

.feature h3 { font-size: 1.22rem; margin-bottom: .5em; color: #fff; }

.feature p { color: var(--muted); font-size: .95rem; margin-bottom: 18px; }

.feature__tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 99px;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold);
    background: rgba(229, 180, 92, .1);
    border: 1px solid var(--border);
}

/* Parchomancie */
.section--parcho {
    background:
        radial-gradient(900px circle at 82% 45%, rgba(139, 107, 255, .1), transparent 62%),
        linear-gradient(180deg, transparent, rgba(12, 10, 20, .7), transparent);
}

.parcho {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: center;
}

.parcho__text > p { color: var(--muted); font-size: 1.04rem; }

.parcho__list {
    list-style: none;
    padding: 0;
    margin: 32px 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.parcho__list li {
    padding-left: 34px;
    position: relative;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.55;
}

.parcho__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    box-shadow: 0 0 14px rgba(229, 180, 92, .35);
}

.parcho__list li::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 10px;
    width: 4px;
    height: 7px;
    border: solid #241703;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.parcho__list b {
    display: block;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.04rem;
    margin-bottom: 2px;
}

.parcho__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Le parchemin flotte au-dessus de la fiche descriptive. L'ancien chevauchement
   valait -46 px fixes alors que l'illustration, elle, se redimensionne : sur les
   colonnes étroites la fiche finissait par toucher les rouleaux. Une marge
   positive et proportionnée garantit l'écart quelle que soit la largeur, et le
   flottement ne fait que l'éloigner davantage. */
.parcho__relic {
    margin: 0 0 clamp(6px, 1.6vw, 18px);
    width: min(100%, 400px);
    position: relative;
    animation: float 7s ease-in-out infinite;
}

.parcho__relic::before {
    content: '';
    position: absolute;
    inset: 12% 12% 18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 196, 92, .45), transparent 68%);
    filter: blur(40px);
    z-index: -1;
}

.parcho__relic img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
}

.scroll-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 34px 32px;
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(38, 30, 18, .95), rgba(12, 10, 20, .95));
    border: 1px solid var(--border);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
    /* Le flottement est porté par l'illustration au-dessus, pas par la fiche. */
    backdrop-filter: blur(6px);
}

@keyframes float {
    50% { transform: translateY(-14px); }
}

/* Même respiration, amplitude réduite pour les petits éléments. */
@keyframes floatSoft {
    50% { transform: translateY(-7px); }
}

.scroll-card__label {
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
}

.scroll-card h4 {
    font-size: 1.5rem;
    margin: 8px 0 24px;
    color: #fff;
}

.scroll-card__stats {
    display: grid;
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 22px;
}

.scroll-card__stats div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 15px;
    background: rgba(10, 8, 16, .85);
    font-size: .88rem;
}

.scroll-card__stats span { color: var(--muted-2); }
.scroll-card__stats b { color: var(--text); font-weight: 600; }
.scroll-card__stats b.is-legendary { color: var(--gold-light); }

.scroll-card__bar {
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
    margin-bottom: 10px;
}

.scroll-card__bar span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
}

.scroll-card small { color: var(--muted-2); font-size: .78rem; }

/* Classes */
.classes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.class-card {
    --class-color: var(--gold);
    position: relative;
    padding: 24px 14px 20px;
    border-radius: var(--radius);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    transition: transform .35s var(--ease), border-color .35s var(--ease);
    cursor: default;
}

.class-card:hover {
    transform: translateY(-7px);
    border-color: var(--class-color);
}

.class-card__aura {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 130px;
    height: 130px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--class-color);
    filter: blur(44px);
    opacity: .18;
    transition: opacity .35s var(--ease);
}

.class-card:hover .class-card__aura { opacity: .45; }

.class-card__initial {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--class-color);
    background: rgba(0, 0, 0, .35);
    border: 1px solid currentColor;
}

.class-card__art {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45));
    transition: transform .35s var(--ease);
}

.class-card:hover .class-card__art { transform: translateY(-4px) scale(1.06); }

.class-card h3 {
    position: relative;
    font-size: .98rem;
    margin-bottom: 2px;
    color: #fff;
}

.class-card__count {
    position: relative;
    font-size: .72rem;
    color: var(--muted-2);
}

.class-card--feca     { --class-color: #6fc3f5; }
.class-card--osamodas { --class-color: #7dd87d; }
.class-card--enutrof  { --class-color: #d9b24c; }
.class-card--sram     { --class-color: #9b7ce0; }
.class-card--xelor    { --class-color: #62d6d6; }
.class-card--ecaflip  { --class-color: #e07b4f; }
.class-card--eniripsa { --class-color: #f28fb5; }
.class-card--iop      { --class-color: #e05b5b; }
.class-card--cra      { --class-color: #8fd15a; }
.class-card--sadida   { --class-color: #a3c96a; }
.class-card--sacrieur { --class-color: #c94f4f; }
.class-card--pandawa  { --class-color: #c8b79a; }

/* Colonnes actualités / classement */
.split {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 44px;
    align-items: start;
}

.split__main .news-list {
    display: grid;
    gap: 18px;
    margin-bottom: 30px;
}

.split__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.panel {
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid var(--border-soft);
    overflow: hidden;
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-soft);
}

.panel__head h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.panel__head a { font-size: .82rem; color: var(--muted); }
.panel__head a:hover { color: var(--gold); }

.panel__body { padding: 20px 22px; }

.podium { list-style: none; margin: 0; padding: 8px; }

.podium__row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 13px;
    border-radius: var(--radius-sm);
    transition: background .2s var(--ease);
}

.podium__row:hover { background: var(--surface); }

.podium__rank {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted);
    background: rgba(255, 255, 255, .05);
}

.podium__rank--1 { background: linear-gradient(135deg, #f7dfa5, #c08c22); color: #241703; }
.podium__rank--2 { background: linear-gradient(135deg, #e4e7eb, #97a0aa); color: #1b1d22; }
.podium__rank--3 { background: linear-gradient(135deg, #e0a679, #a05f2c); color: #221208; }

.podium__identity { flex: 1; min-width: 0; line-height: 1.25; }
.podium__identity b { display: block; font-size: .94rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__identity small { font-size: .76rem; color: var(--muted-2); }
.podium__identity .class-tag { font-weight: 500; }
.podium__identity .class-tag img { width: 16px; height: 16px; }

.podium__level {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gold);
    white-space: nowrap;
}

/* Étapes */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 38px 30px 32px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    transition: border-color .35s var(--ease), transform .35s var(--ease);
}

.step:hover { border-color: var(--border); transform: translateY(-5px); }

.step__number {
    position: absolute;
    top: -22px;
    left: 30px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: #241703;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    box-shadow: var(--shadow-gold);
}

.step h3 { font-size: 1.18rem; margin: 14px 0 .5em; color: #fff; }
.step p { color: var(--muted); font-size: .94rem; }
.step a { font-size: .88rem; font-weight: 600; }

/* Appel à l'action */
.cta {
    padding: 100px 0 120px;
    text-align: center;
    background:
        radial-gradient(700px circle at 50% 100%, rgba(229, 180, 92, .14), transparent 68%);
}

.cta__inner {
    max-width: 700px;
    margin-inline: auto;
}

.cta h2 {
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    background: linear-gradient(135deg, #fff, var(--gold-light) 60%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cta p { color: var(--muted); font-size: 1.1rem; margin-bottom: 34px; }

.cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 8. Actualités ---------------------------------------------------------- */

.news-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid var(--border-soft);
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.news-card:hover {
    transform: translateY(-5px);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.news-card__link { display: flex; color: inherit; }

.news-card__media {
    position: relative;
    flex: 0 0 210px;
    min-height: 152px;
    background:
        linear-gradient(135deg, rgba(229, 180, 92, .16), rgba(139, 107, 255, .1)),
        var(--ink-3);
    background-size: cover;
    background-position: center;
}

.news-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: rgba(8, 7, 14, .82);
    border: 1px solid var(--border);
    color: var(--gold-light);
    backdrop-filter: blur(6px);
}

.news-card__category--mise-a-jour { color: #9ec5ff; border-color: rgba(158, 197, 255, .3); }
.news-card__category--evenement   { color: #c4a5ff; border-color: rgba(196, 165, 255, .3); }
.news-card__category--maintenance { color: #ffb38a; border-color: rgba(255, 179, 138, .3); }
.news-card__category--communaute  { color: #8ee8d5; border-color: rgba(142, 232, 213, .3); }

.news-card__pin {
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--gold);
    font-size: 1.05rem;
    filter: drop-shadow(0 0 6px rgba(229, 180, 92, .6));
}

.news-card__body { padding: 22px 26px; flex: 1; min-width: 0; }

.news-card__body time {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.news-card__body h3 {
    font-size: 1.2rem;
    margin: 7px 0 .5em;
    color: #fff;
    transition: color .25s var(--ease);
}

.news-card:hover .news-card__body h3 { color: var(--gold-light); }

.news-card__body p { color: var(--muted); font-size: .92rem; margin-bottom: 12px; }

.news-card__more { font-size: .85rem; font-weight: 600; color: var(--gold); }

/* Grille de la page actualités */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 22px;
}

.news-grid .news-card__link { flex-direction: column; }
.news-grid .news-card__media { flex: none; min-height: 178px; }

/* Article */
.article {
    max-width: 800px;
    margin-inline: auto;
}

.article__cover {
    height: 320px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(229, 180, 92, .18), rgba(139, 107, 255, .12)),
        var(--ink-3);
    background-size: cover;
    background-position: center;
    margin-bottom: 40px;
    border: 1px solid var(--border-soft);
}

.article__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .84rem;
    color: var(--muted-2);
    margin-bottom: 20px;
}

.article__meta .news-card__category { position: static; }

.article__title { font-size: clamp(1.9rem, 4vw, 2.9rem); color: #fff; }

.article__body {
    font-size: 1.05rem;
    color: #cfc9dd;
    line-height: 1.8;
}

.article__body h2, .article__body h3 { color: var(--gold-light); margin-top: 1.7em; }
.article__body h2 { font-size: 1.6rem; }
.article__body h3 { font-size: 1.28rem; }

.article__body ul, .article__body ol { padding-left: 1.3em; }
.article__body li { margin-bottom: .5em; }

.article__body a { text-decoration: underline; text-underline-offset: 3px; }

.article__body blockquote {
    margin: 1.6em 0;
    padding: 18px 26px;
    border-left: 3px solid var(--gold);
    background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--muted);
    font-style: italic;
}

.article__body code {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid var(--border-soft);
    font-size: .9em;
    color: var(--gold-light);
}

.article__footer {
    margin-top: 56px;
    padding-top: 30px;
    border-top: 1px solid var(--border-soft);
}

/* 9. Pied de page -------------------------------------------------------- */

.site-footer {
    margin-top: 40px;
    padding-top: 70px;
    border-top: 1px solid var(--border-soft);
    background: linear-gradient(180deg, transparent, rgba(6, 5, 11, .9));
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 44px;
    padding-bottom: 54px;
}

.site-footer__logo {
    width: min(280px, 100%);
    height: auto;
    display: block;
    margin-bottom: 18px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(229, 180, 92, .2));
    /* Durée décalée par rapport au parchemin pour que les deux respirations
       ne se synchronisent pas. */
    animation: floatSoft 9s ease-in-out infinite;
}

.site-footer__brand p { color: var(--muted-2); font-size: .9rem; max-width: 340px; }

.social { display: flex; gap: 10px; margin-top: 18px; }

.social a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--muted);
    transition: all .25s var(--ease);
}

.social a:hover {
    color: var(--gold-light);
    border-color: var(--gold);
    transform: translateY(-3px);
}

.social svg { width: 19px; height: 19px; }

.site-footer__col { display: flex; flex-direction: column; gap: 9px; }

.site-footer__col h4 {
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

.site-footer__col a { color: var(--muted); font-size: .92rem; }
.site-footer__col a:hover { color: var(--gold-light); }

.site-footer__status p {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.site-footer__status p.is-online { color: var(--success); }
.site-footer__status p.is-online .status-pill__dot { background: var(--success); }
.site-footer__status p.is-offline { color: var(--danger); }
.site-footer__status p.is-offline .status-pill__dot { background: var(--danger); }

.site-footer__status ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.site-footer__status li { font-size: .86rem; color: var(--muted-2); }
.site-footer__status li span { color: var(--text); font-weight: 600; }

.site-footer__legal {
    padding: 22px 24px 30px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.site-footer__legal p { margin: 0; font-size: .78rem; color: var(--muted-2); }

/* Interrupteur des effets, pour les postes où le décor animé passe mal. */
.fx-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 99px;
    background: none;
    border: 1px solid var(--border-soft);
    color: var(--muted-2);
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}

.fx-toggle svg { width: 15px; height: 15px; }
.fx-toggle:hover { color: var(--gold-light); border-color: var(--border); }
.fx-toggle[aria-pressed="true"] { color: var(--gold-light); border-color: var(--border); }

/* Retour en haut */
.scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(14, 12, 22, .9);
    border: 1px solid var(--border);
    color: var(--gold);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: all .3s var(--ease);
}

.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { background: var(--gold); color: #241703; }
.scroll-top svg { width: 15px; height: 15px; }

/* 10. Pages internes ----------------------------------------------------- */

.page-head {
    padding: 78px 0 52px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--ink-2);
}

.page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 6, 12, .74) 0%, rgba(7, 6, 12, .5) 45%, var(--ink) 100%),
        radial-gradient(700px circle at 50% 10%, rgba(229, 180, 92, .16), transparent 62%),
        url('../img/page-bg.png') center 42% / cover no-repeat;
    pointer-events: none;
}

.page-head > .container { position: relative; z-index: 1; }

.page-head h1 {
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    background: linear-gradient(135deg, #fff, var(--gold-light) 62%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .3em;
}

.page-head p { color: var(--muted); max-width: 620px; margin-inline: auto; }

.page-body { padding: 56px 0 90px; }

.breadcrumb {
    display: flex;
    gap: 8px;
    font-size: .82rem;
    color: var(--muted-2);
    margin-bottom: 18px;
    justify-content: center;
}

.breadcrumb a { color: var(--muted); }

/* Carte générique */
.card {
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid var(--border-soft);
    padding: 30px;
}

.card__title {
    font-size: 1.15rem;
    color: #fff;
    margin-bottom: 1em;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
}

/* Onglets / filtres */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 30px;
}

.chip {
    padding: 8px 17px;
    border-radius: 99px;
    font-size: .86rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    transition: all .22s var(--ease);
}

.chip:hover { color: var(--text); border-color: var(--border); }

.chip.is-active {
    color: #241703;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-color: transparent;
    font-weight: 600;
}

.filters__spacer { flex: 1; }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 44px;
}

.pagination a, .pagination span {
    min-width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding-inline: 12px;
    border-radius: 11px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    transition: all .22s var(--ease);
}

.pagination a:hover { color: var(--text); border-color: var(--gold); }

.pagination .is-current {
    color: #241703;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-color: transparent;
}

.pagination .is-disabled { opacity: .35; pointer-events: none; }

/* 11. Formulaires -------------------------------------------------------- */

.auth-wrap {
    min-height: calc(100vh - var(--header-h));
    display: grid;
    place-items: center;
    padding: 60px 24px 90px;
}

.auth-card {
    width: 100%;
    max-width: 470px;
    padding: 42px 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(20, 17, 30, .96), rgba(10, 8, 16, .96));
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.auth-card--wide { max-width: 620px; }

.auth-card__head { text-align: center; margin-bottom: 30px; }

.auth-card__crest {
    width: min(240px, 70vw);
    height: auto;
    aspect-ratio: 2 / 1;
    margin: 0 auto 16px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(229, 180, 92, .3));
}

.auth-card__head h1 { font-size: 1.85rem; color: #fff; margin-bottom: .3em; }
.auth-card__head p { color: var(--muted); font-size: .93rem; margin: 0; }

.auth-card__footer {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border-soft);
    text-align: center;
    font-size: .9rem;
    color: var(--muted);
}

.form { display: flex; flex-direction: column; gap: 18px; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field > label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--muted);
}

.field > label .req { color: var(--gold); }

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="url"],
.field input[type="search"],
.field select,
.field textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font: inherit;
    font-size: .95rem;
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}

.field textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 0 3px rgba(229, 180, 92, .13);
}

.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239c95b2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 38px;
}

.field__hint { font-size: .78rem; color: var(--muted-2); }

.field__error { font-size: .8rem; color: #fca5a5; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: rgba(255, 107, 107, .5); }

.field--check {
    flex-direction: row;
    align-items: flex-start;
    gap: 11px;
}

.field--check input[type="checkbox"] {
    appearance: none;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: all .2s var(--ease);
}

.field--check input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-color: transparent;
}

.field--check input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    margin: 2px auto;
    border: solid #241703;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.field--check label { font-size: .88rem; color: var(--muted); font-weight: 400; cursor: pointer; }

/* 12. Tableaux & classement --------------------------------------------- */

.table-wrap {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
}

.table { width: 100%; border-collapse: collapse; }

.table th {
    padding: 14px 18px;
    text-align: left;
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold);
    background: rgba(0, 0, 0, .35);
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}

.table td {
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .045);
    font-size: .92rem;
    color: var(--muted);
}

.table tbody tr { transition: background .2s var(--ease); }
.table tbody tr:hover { background: rgba(229, 180, 92, .045); }
.table tbody tr:last-child td { border-bottom: 0; }

.table td strong, .table td b { color: var(--text); font-weight: 600; }

.table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

.table__rank {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-weight: 700;
    font-size: .84rem;
    color: var(--muted);
    background: rgba(255, 255, 255, .05);
}

.table__rank--1 { background: linear-gradient(135deg, #f7dfa5, #c08c22); color: #241703; }
.table__rank--2 { background: linear-gradient(135deg, #e4e7eb, #97a0aa); color: #1b1d22; }
.table__rank--3 { background: linear-gradient(135deg, #e0a679, #a05f2c); color: #221208; }

.class-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--text);
}

.class-tag::before { display: none; }

.class-tag img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
}

.class-tag--feca     { --class-color: #6fc3f5; }
.class-tag--osamodas { --class-color: #7dd87d; }
.class-tag--enutrof  { --class-color: #d9b24c; }
.class-tag--sram     { --class-color: #9b7ce0; }
.class-tag--xelor    { --class-color: #62d6d6; }
.class-tag--ecaflip  { --class-color: #e07b4f; }
.class-tag--eniripsa { --class-color: #f28fb5; }
.class-tag--iop      { --class-color: #e05b5b; }
.class-tag--cra      { --class-color: #8fd15a; }
.class-tag--sadida   { --class-color: #a3c96a; }
.class-tag--sacrieur { --class-color: #c94f4f; }
.class-tag--pandawa  { --class-color: #c8b79a; }

.level-bar {
    position: relative;
    width: 84px;
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.level-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
}

.ladder-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 34px;
    align-items: start;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.badge--success { background: rgba(74, 222, 128, .15); color: #86efac; }
.badge--warning { background: rgba(229, 180, 92, .15); color: var(--gold-light); }
.badge--danger  { background: rgba(255, 107, 107, .15); color: #fca5a5; }
.badge--muted   { background: rgba(255, 255, 255, .06); color: var(--muted); }
.badge--violet  { background: rgba(139, 107, 255, .16); color: #c4b1ff; }

/* Histogramme des classes */
.distribution { display: flex; flex-direction: column; gap: 11px; padding: 20px 22px; }

.distribution__row { display: grid; grid-template-columns: 78px 1fr 40px; align-items: center; gap: 11px; font-size: .84rem; }

.distribution__row span:first-child { color: var(--muted); }

.distribution__bar {
    height: 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}

.distribution__bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--class-color, var(--gold-deep)), var(--gold-light));
    transition: width 1s var(--ease);
}

.distribution__row b { text-align: right; color: var(--text); font-size: .82rem; }

/* 13. Boutique & espace membre ------------------------------------------ */

/* Packs de rechargement */
.packs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.pack {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 18px 18px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 120% 70% at 50% 0%, rgba(229, 180, 92, .11), transparent 70%),
        linear-gradient(168deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
    border: 1px solid var(--border-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    text-align: center;
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* Filet doré sur l'arête haute de la carte. */
.pack::before {
    content: '';
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(247, 223, 165, .5), transparent);
}

.pack:hover {
    transform: translateY(-6px);
    border-color: var(--border);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .09);
}

.pack--featured {
    border-color: rgba(233, 199, 130, .45);
    background:
        radial-gradient(ellipse 120% 75% at 50% 0%, rgba(229, 180, 92, .22), transparent 72%),
        linear-gradient(168deg, rgba(229, 180, 92, .1), rgba(255, 255, 255, .02));
    box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.pack--featured::before {
    left: 10%;
    right: 10%;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

/* Blason en filigrane au pied des paliers mis en avant. */
.pack--featured::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 118px;
    background: url('../img/emblem.png') center bottom / 104px no-repeat;
    opacity: .055;
    pointer-events: none;
}

.pack__flag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 13px;
    border-radius: 99px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #241703;
    box-shadow: 0 6px 18px rgba(229, 180, 92, .35);
}

.pack__coin {
    display: block;
    color: var(--gold);
    filter: drop-shadow(0 3px 10px rgba(229, 180, 92, .4));
}

.pack__coin svg { width: 26px; height: 26px; }

.pack__price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin: 8px 0 18px;
    background: linear-gradient(135deg, #fff 8%, var(--gold-light) 52%, var(--gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pack__price small {
    font-size: .92rem;
    margin-left: 3px;
    -webkit-text-fill-color: rgba(233, 199, 130, .7);
}

.pack__lines {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
    font-size: .8rem;
    text-align: left;
}

.pack__lines > div { display: flex; align-items: baseline; gap: 6px; }

/* Pointillés de conduite entre le libellé et la valeur, comme sur une
   carte de prix : l'œil suit la ligne même sur des cartes étroites. */
.pack__lines > div::before {
    content: '';
    order: 1;
    flex: 1;
    border-bottom: 1px dotted rgba(255, 255, 255, .22);
    transform: translateY(-4px);
}

.pack__lines dt { order: 0; color: var(--muted-2); white-space: nowrap; }
.pack__lines dt i { font-style: normal; font-weight: 600; color: var(--teal); }

.pack__lines dd {
    order: 2;
    margin: 0;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pack__lines .is-bonus dd { color: var(--teal); font-weight: 600; }
.pack__lines .is-empty dd { color: var(--muted-2); }

.pack__total {
    position: relative;
    margin: auto 0 14px;
    padding: 12px 10px 13px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .34);
    border: 1px solid var(--border-soft);
}

.pack__total b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.32rem;
    line-height: 1.15;
    color: var(--gold-light);
    font-variant-numeric: tabular-nums;
}

.pack__total span {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.pack--featured .pack__total {
    background: rgba(0, 0, 0, .42);
    border-color: rgba(233, 199, 130, .3);
}

.pack__pay {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 3px 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .3);
    color: var(--muted);
    font: inherit;
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s var(--ease), background .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease);
}

.pay svg { width: 16px; height: 16px; }
.pay:hover { transform: translateY(-2px); color: #fff; }

.pay--card svg   { color: #6f9bf0; }
.pay--paypal svg { color: #8fb4ee; }
.pay--crypto svg { color: var(--gold); }

.pay--card:hover   { border-color: rgba(111, 155, 240, .5); background: rgba(47, 99, 201, .22); }
.pay--paypal:hover { border-color: rgba(143, 180, 238, .5); background: rgba(34, 68, 127, .32); }
.pay--crypto:hover { border-color: rgba(233, 199, 130, .5); background: rgba(229, 180, 92, .16); }

.packs__note {
    margin: 22px 0 0;
    font-size: .82rem;
    color: var(--muted-2);
}

@media (max-width: 1080px) { .packs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .packs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .packs { grid-template-columns: repeat(2, 1fr); } }

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 20px;
}

.shop-item {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid var(--border-soft);
    overflow: hidden;
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.shop-item:hover { transform: translateY(-5px); border-color: var(--border); box-shadow: var(--shadow); }

.shop-item--featured { border-color: var(--border); }

.shop-item__media {
    position: relative;
    height: 150px;
    display: grid;
    place-items: center;
    font-size: 3rem;
    background:
        radial-gradient(circle at 50% 40%, rgba(229, 180, 92, .18), transparent 65%),
        rgba(0, 0, 0, .25);
    border-bottom: 1px solid var(--border-soft);
}

.shop-item__flag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: #241703;
}

.shop-item__body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }

.shop-item__body h3 { font-size: 1.08rem; color: #fff; margin-bottom: .4em; }
.shop-item__body p { font-size: .88rem; color: var(--muted); flex: 1; }

.shop-item__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 16px;
}

.shop-item__price {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold-light);
}

.shop-item__price small { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); display: block; }

.shop-item form { display: flex; flex-direction: column; gap: 10px; }

.shop-item select {
    width: 100%;
    padding: 9px 13px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .4);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font: inherit;
    font-size: .88rem;
}

/* Espace membre */
.account-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    position: sticky;
    top: calc(var(--header-h) + 24px);
}

.account-nav a {
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: .92rem;
    font-weight: 500;
    transition: all .2s var(--ease);
}

.account-nav a:hover { background: var(--surface-2); color: var(--text); }

.account-nav a.is-active {
    background: linear-gradient(135deg, rgba(229, 180, 92, .18), transparent);
    color: var(--gold-light);
    border-left: 2px solid var(--gold);
}

.account-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 28px 32px;
    border-radius: var(--radius-lg);
    background: linear-gradient(120deg, rgba(229, 180, 92, .12), rgba(139, 107, 255, .06));
    border: 1px solid var(--border);
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.account-hero__avatar {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: #241703;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    box-shadow: var(--shadow-gold);
}

.account-hero__identity { flex: 1; min-width: 180px; }
.account-hero__identity h1 { font-size: 1.5rem; margin-bottom: .1em; color: #fff; }
.account-hero__identity p { margin: 0; font-size: .86rem; color: var(--muted); }

.account-hero__points { text-align: right; }
.account-hero__points b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.9rem;
    color: var(--gold-light);
    line-height: 1;
}
.account-hero__points span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

.char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 16px;
}

.char-card {
    padding: 22px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    transition: all .3s var(--ease);
    position: relative;
    overflow: hidden;
}

.char-card:hover { transform: translateY(-4px); border-color: var(--border); }

.char-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }

.char-card__sigil {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--class-color, var(--gold));
    background: rgba(0, 0, 0, .35);
    border: 1px solid currentColor;
}

.char-card__art {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
}

.char-card__name { font-size: 1.02rem; color: #fff; margin: 0; font-family: var(--font-display); }
.char-card__class { font-size: .78rem; color: var(--muted-2); }

.char-card__stats { display: flex; flex-direction: column; gap: 7px; }

.char-card__stat { display: flex; justify-content: space-between; font-size: .84rem; }
.char-card__stat span { color: var(--muted-2); }
.char-card__stat b { color: var(--text); }

.game-panel__lead {
    color: var(--muted);
    font-size: .92rem;
    margin: 0 0 22px;
}

/* 14. Responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
    .split, .ladder-layout { grid-template-columns: 1fr; }
    .split__aside, .account-nav { position: static; }
    .classes { grid-template-columns: repeat(4, 1fr); }
    .rates__grid { grid-template-columns: repeat(3, 1fr); }
    .rate:nth-child(3n) { border-right: 0; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 900px) {
    .nav-toggle { display: flex; }

    .site-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 18px 24px 26px;
        background: rgba(8, 7, 14, .98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        transform: translateY(-14px);
        opacity: 0;
        visibility: hidden;
        transition: all .28s var(--ease);
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }

    .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }

    .site-nav > a { padding: 13px 16px; font-size: 1rem; }
    .site-nav > a.is-active::after { display: none; }

    .site-nav__actions {
        margin: 14px 0 0;
        padding: 16px 0 0;
        border-left: 0;
        border-top: 1px solid var(--border-soft);
        flex-wrap: wrap;
    }

    .user-menu { width: 100%; }
    .user-menu__trigger { width: 100%; justify-content: flex-start; }
    .user-menu__dropdown { position: static; opacity: 1; visibility: visible; transform: none; display: none; margin-top: 8px; width: 100%; }
    .user-menu.is-open .user-menu__dropdown { display: flex; }

    .parcho { grid-template-columns: 1fr; gap: 44px; }
    .steps { grid-template-columns: 1fr; gap: 34px; }
    .account-layout { grid-template-columns: 1fr; }
    .section { padding: 76px 0; }
    .news-card__link { flex-direction: column; }
    .news-card__media { flex: none; min-height: 168px; }
}

@media (max-width: 640px) {
    .container { padding-inline: 18px; }
    .site-header,
    .site-header.is-stuck {
        --header-h: 104px;
    }
    .brand__logo {
        max-width: min(220px, 62vw);
    }
    .classes { grid-template-columns: repeat(2, 1fr); }
    .rates__grid { grid-template-columns: repeat(2, 1fr); }
    .rate { border-right: 0; }
    .site-footer__grid { grid-template-columns: 1fr; }
    .form__row { grid-template-columns: 1fr; }
    .auth-card { padding: 32px 24px; }
    .flash-stack { left: 16px; right: 16px; max-width: none; }
    .hero__stats { gap: 10px; }
    .hero__stat { min-width: calc(50% - 5px); padding: 16px; }
    .account-hero { flex-direction: column; align-items: flex-start; text-align: left; }
    .account-hero__points { text-align: left; }
    .table th, .table td { padding: 11px 12px; font-size: .86rem; }
    .table .is-hideable { display: none; }
}

/* 11. Vote ---------------------------------------------------------------- */

.vote { max-width: 880px; }

.vote-stats,
.vote-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.vote-tiers { margin: 18px 0 0; }

.vote-stat,
.vote-tier {
    text-align: center;
    padding: 22px 16px;
}

.vote-stat span,
.vote-tier span,
.vote-tier small {
    display: block;
    color: var(--muted);
    font-size: .82rem;
}

.vote-stat b,
.vote-tier b {
    display: block;
    margin-top: 6px;
    font-family: Cinzel, serif;
    font-size: 1.7rem;
    color: var(--gold-light);
}

.vote-tier.is-active {
    border-color: rgba(229, 180, 92, .55);
    box-shadow: 0 0 0 1px rgba(229, 180, 92, .25);
}

.vote-card { margin-top: 4px; }

.vote-lead {
    color: var(--muted);
    margin: 0 0 18px;
}

.vote-lead strong { color: var(--gold-light); }

.vote-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vote-hint {
    color: var(--muted-2);
    font-size: .9rem;
    margin: 16px 0 0;
}

.vote-timer {
    font-family: Cinzel, serif;
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--gold-light);
    letter-spacing: .06em;
    margin: 0;
}

.vote-claim { margin-top: 18px; }

.vote-wait { color: var(--muted); margin: 0 0 12px; }

.account-hero__vote {
    display: inline-block;
    margin-top: 8px;
    color: var(--gold-light);
    font-size: .82rem;
}

@media (max-width: 720px) {
    .vote-stats,
    .vote-tiers { grid-template-columns: 1fr; }
}

/* 12. Classement des votes — parchemins ---------------------------------- */

.hall-switch {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 28px;
}

.hall-switch a {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .88rem;
    letter-spacing: .04em;
}

.hall-switch a.is-active {
    color: #241703;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-color: transparent;
}

.vote-hall { position: relative; overflow: hidden; }

.vote-hall__you {
    text-align: center;
    color: var(--muted);
    margin: 0 0 28px;
}

.vote-hall__you b { color: var(--gold-light); font-family: var(--font-display); }

.vote-hall__motes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.vote-hall__mote {
    position: absolute;
    bottom: 8%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold-light);
    opacity: 0;
    animation: voteMote 7s ease-in infinite;
}

.vote-hall__mote:nth-child(1)  { left: 8%;  animation-delay: .2s; }
.vote-hall__mote:nth-child(2)  { left: 18%; animation-delay: 1.4s; width: 3px; height: 3px; }
.vote-hall__mote:nth-child(3)  { left: 27%; animation-delay: 2.6s; }
.vote-hall__mote:nth-child(4)  { left: 36%; animation-delay: .8s; width: 4px; height: 4px; }
.vote-hall__mote:nth-child(5)  { left: 46%; animation-delay: 3.1s; }
.vote-hall__mote:nth-child(6)  { left: 54%; animation-delay: 1.1s; width: 3px; height: 3px; }
.vote-hall__mote:nth-child(7)  { left: 63%; animation-delay: 2.2s; }
.vote-hall__mote:nth-child(8)  { left: 72%; animation-delay: .4s; width: 4px; height: 4px; }
.vote-hall__mote:nth-child(9)  { left: 80%; animation-delay: 3.6s; }
.vote-hall__mote:nth-child(10) { left: 88%; animation-delay: 1.8s; width: 3px; height: 3px; }
.vote-hall__mote:nth-child(11) { left: 14%; animation-delay: 4.2s; }
.vote-hall__mote:nth-child(12) { left: 92%; animation-delay: 2.9s; }

@keyframes voteMote {
    0%   { transform: translateY(12px); opacity: 0; }
    18%  { opacity: .75; }
    100% { transform: translateY(-220px); opacity: 0; }
}

.vote-podium {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(12px, 2vw, 28px);
    margin: 10px 0 42px;
    padding: 0;
}

.scroll-rank {
    width: min(240px, 30vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: voteUnroll 1.15s var(--ease) both;
    animation-delay: var(--d, 0s);
}

.scroll-rank--1 { width: min(280px, 34vw); z-index: 1; }
.scroll-rank--empty { width: min(420px, 92vw); margin: 10px auto 0; }

.scroll-rank__roll {
    width: 92%;
    height: 16px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, #fff4d4 0%, #e4c48a 38%, #a9783a 72%, #6d4520 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 5px 0 #5a3818;
    position: relative;
    z-index: 2;
}

.scroll-rank__roll--foot {
    margin-top: -6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        0 8px 16px rgba(0, 0, 0, .35);
}

.scroll-rank__sheet {
    width: 82%;
    margin: -7px 0;
    padding: 26px 16px 30px;
    text-align: center;
    color: #3b2914;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 28%),
        repeating-linear-gradient(180deg, transparent, transparent 21px, rgba(120, 78, 28, .07) 22px),
        linear-gradient(165deg, #f8edd2 0%, #ecd7a6 48%, #d8bc88 100%);
    box-shadow:
        inset 0 0 0 1px rgba(120, 78, 28, .22),
        0 18px 28px rgba(0, 0, 0, .28);
    position: relative;
    z-index: 1;
}

.scroll-rank--1 .scroll-rank__sheet {
    padding-top: 34px;
    padding-bottom: 40px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .34), transparent 26%),
        repeating-linear-gradient(180deg, transparent, transparent 21px, rgba(120, 78, 28, .07) 22px),
        linear-gradient(165deg, #fff6df 0%, #f3ddb0 46%, #e4c78a 100%);
}

.scroll-rank__seal {
    width: 58px;
    height: 58px;
    margin: -8px auto 12px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #fff8ee;
    background:
        radial-gradient(circle at 32% 28%, #ff8d7a, #c4342c 46%, #7a1418 78%);
    box-shadow:
        inset 0 -6px 0 rgba(0, 0, 0, .18),
        0 7px 0 #5c1014;
    animation: sealStamp .7s var(--ease) both;
    animation-delay: calc(var(--d, 0s) + .55s);
}

.scroll-rank--1 .scroll-rank__seal {
    width: 70px;
    height: 70px;
    font-size: 1.35rem;
    background:
        radial-gradient(circle at 32% 28%, #fff1c2, #e5b45c 42%, #a9782a 78%);
    color: #3a2508;
    box-shadow:
        inset 0 -6px 0 rgba(90, 50, 8, .25),
        0 7px 0 #6d4a12;
    animation-name: sealStamp, sealBreath;
    animation-duration: .7s, 3.6s;
    animation-delay: calc(var(--d, 0s) + .7s), calc(var(--d, 0s) + 1.4s);
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}

.scroll-rank__sheet b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.25;
    word-break: break-word;
}

.scroll-rank--1 .scroll-rank__sheet b { font-size: 1.28rem; }

.scroll-rank__sheet em {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: .86rem;
    letter-spacing: .04em;
    color: #7a5a2e;
}

.scroll-rank.is-you .scroll-rank__sheet {
    box-shadow:
        inset 0 0 0 2px rgba(139, 107, 255, .55),
        0 18px 28px rgba(0, 0, 0, .28);
}

.scroll-rank--empty .btn { margin-top: 16px; }

@keyframes voteUnroll {
    0%   { transform: scaleY(.08); }
    68%  { transform: scaleY(1.04); }
    100% { transform: none; }
}

@keyframes sealStamp {
    0%   { transform: translateY(-36px) scale(1.35); opacity: 0; }
    62%  { transform: translateY(3px) scale(.9); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

@keyframes sealBreath {
    0%, 100% { box-shadow: inset 0 -6px 0 rgba(90, 50, 8, .25), 0 7px 0 #6d4a12, 0 0 0 0 rgba(229, 180, 92, .35); }
    50%      { box-shadow: inset 0 -6px 0 rgba(90, 50, 8, .25), 0 7px 0 #6d4a12, 0 0 22px 4px rgba(229, 180, 92, .45); }
}

.scroll-list {
    list-style: none;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scroll-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 8px 18px 8px 10px;
    color: #3b2914;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .2), transparent 18%),
        linear-gradient(180deg, #f6e7c4, #e6cfa4);
    border-radius: 8px 14px 14px 8px;
    box-shadow:
        inset 0 0 0 1px rgba(120, 78, 28, .18),
        0 8px 16px rgba(0, 0, 0, .22);
    position: relative;
    transform-origin: left center;
    animation: rowUnfurl .7s var(--ease) both;
    animation-delay: var(--d, 0s);
}

.scroll-row::before,
.scroll-row::after {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff4d4, #a9783a 70%, #6d4520);
}

.scroll-row::before { left: -4px; }
.scroll-row::after  { right: -4px; }

.scroll-row__rank {
    width: 36px;
    height: 36px;
    margin-left: 8px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: .85rem;
    color: #fff8ee;
    background: radial-gradient(circle at 32% 28%, #d7b48a, #8d5a32);
}

.scroll-row b {
    font-family: var(--font-display);
    font-size: .98rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scroll-row em {
    font-style: normal;
    font-weight: 700;
    color: #7a5a2e;
}

.scroll-row.is-you {
    box-shadow:
        inset 0 0 0 2px rgba(139, 107, 255, .55),
        0 8px 16px rgba(0, 0, 0, .22);
}

@keyframes rowUnfurl {
    0%   { transform: scaleX(.2); opacity: .35; }
    100% { transform: none; opacity: 1; }
}

@media (max-width: 720px) {
    .vote-podium { flex-direction: column; align-items: center; }
    .scroll-rank,
    .scroll-rank--1 { width: min(320px, 92vw); }
    .scroll-row b { white-space: normal; }
}