/* =========================================================================
   NÉCROME — site public
   =========================================================================
   Palette et grille : docs/necrom-design-system.md. Depuis la refonte
   « atmosphère » demandée par l'utilisateur, le violet n'est plus seulement
   l'ambiance de fond : il porte aussi les auras, les lueurs et les éclairs.
   L'ambre reste l'accent des ACTIONS (boutons, liens, chiffres).

   Le panel admin garde style.css : les deux ne se croisent jamais.
   ========================================================================= */

/* --- jetons ------------------------------------------------------------- */
:root {
    --nec-void:   #0D0912;
    --nec-crypt:  #171021;
    --nec-stone:  #241A33;
    --nec-ash:    #A39BB0;
    --nec-bone:   #EDE7E0;
    --nec-ember:  #D9923A;
    --nec-alive:  #4E9E6A;
    --nec-gone:   #B5503F;
    --nec-violet: #9B4DE0;   /* aura, lueurs, éclairs — jamais sur un bouton */
    --nec-magenta:#D14BB5;
    --nec-ogrine: #05B0BE;   /* la couleur de l'icône Ogrine */

    --nec-display: "Cinzel", "Times New Roman", serif;
    --nec-text:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

    --t-hero:  clamp(2.5rem, 6vw, 4.5rem);
    --t-h1:    clamp(2rem, 4vw, 3rem);
    --t-h2:    clamp(1.5rem, 3vw, 2.125rem);
    --t-h3:    1.25rem;
    --t-body:  1rem;
    --t-small: .875rem;
    --t-label: .75rem;

    /* --s-5 était utilisé (parrainage) sans être défini : la marge tombait à 0. */
    --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px;  --s-12: 48px; --s-16: 64px;
    --s-24: 96px; --s-32: 128px;

    --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 14px; --r-pill: 999px;

    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 4px 16px rgba(0,0,0,.45);
    --sh-3: 0 16px 48px rgba(0,0,0,.55);
    --sh-glow: 0 0 24px rgba(217,146,58,.28);
    --sh-aura: 0 0 40px rgba(155,77,224,.35);

    --e-out: cubic-bezier(.22,1,.36,1);
    --d-fast: 120ms; --d-base: 220ms; --d-slow: 400ms;

    --largeur: 1200px;
    --gouttiere: clamp(16px, 4vw, 40px);
    --barre-h: 72px;                 /* la barre de navigation seule */
    --entete-h: var(--barre-h);      /* barre + bandeau, cf. « Bandeau d'annonce » */
    /* Ce que le haut de chaque page laisse au-dessus de son contenu pour
       l'en-tête. Sur ordinateur, la valeur historique (hauteur de l'en-tête,
       en plus de l'en-tête lui-même) ; sur téléphone 0, cf. « Mobile ». */
    --entete-decalage: var(--entete-h);
    /* Gouttières qui respectent l'encoche d'un téléphone en paysage
       (viewport-fit=cover dans la balise viewport). */
    --gouttiere-g: max(var(--gouttiere), env(safe-area-inset-left, 0px));
    --gouttiere-d: max(var(--gouttiere), env(safe-area-inset-right, 0px));
}

/* --- socle -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--nec-void);
    color: var(--nec-bone);
    font-family: var(--nec-text);
    font-size: var(--t-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--nec-ember); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
    font-family: var(--nec-display);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 var(--s-4);
}
:focus-visible { outline: 2px solid var(--nec-ember); outline-offset: 2px; border-radius: var(--r-sm); }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere-g) var(--gouttiere-d); }
/* Un attribut `hidden` doit TOUJOURS masquer : sans cette règle, toute classe
   qui pose un `display` (flex, grid…) l'emporte sur lui. C'est ce qui laissait
   les deux filtres du classement (équipe et Kolizeum) visibles sur tous les
   onglets. */
[hidden] { display: none !important; }
.conteneur-large { max-width: 1400px; }
.lisible { max-width: 65ch; }
.centre { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Texte doré animé : reflet qui passe, pour les titres de section clés. */
.dore {
    background: linear-gradient(100deg, #b87a2c 0%, #f2c675 35%, #d9923a 50%, #f7d894 65%, #b87a2c 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: reflet 7s linear infinite;
}
@keyframes reflet { from { background-position: 220% 0; } to { background-position: -20% 0; } }

/* --- en-tête ------------------------------------------------------------ */
/* Sur ordinateur l'en-tête est DANS le flux (il défile avec la page) : il
   était prévu fixe, mais une règle `body > .entete { position: relative }`
   l'avait remis dans le flux depuis l'arrivée du décor animé, et c'est cet
   état que le site montre depuis — on le garde tel quel. Le z-index, lui,
   était tombé à 1, sous <main> : le menu du téléphone s'ouvrait DERRIÈRE le
   contenu, invisible et impossible à toucher. Sur téléphone, l'en-tête reste
   collé en haut de l'écran (cf. « Mobile »). */
.entete {
    position: relative; z-index: 100;
    display: flex; align-items: center;
    height: var(--barre-h);
    background: linear-gradient(180deg, rgba(13,9,18,.45), rgba(13,9,18,0));
    border-bottom: 1px solid transparent;
    transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.entete.pose { background: rgba(13,9,18,.9); backdrop-filter: blur(10px); border-bottom-color: var(--nec-stone); }
.entete > .conteneur { display: flex; align-items: center; gap: var(--s-6); }

.marque { display: block; white-space: nowrap; }
.marque picture { display: block; }
.marque img { height: 40px; width: auto; filter: drop-shadow(0 0 10px rgba(155,77,224,.35)); transition: filter var(--d-base); }
.marque:hover img { filter: drop-shadow(0 0 16px rgba(155,77,224,.7)); }

.nav { display: flex; align-items: center; gap: var(--s-6); margin-left: auto; }
.nav > a {
    position: relative;
    font-family: var(--nec-display);
    font-size: .9375rem; letter-spacing: .04em;
    color: var(--nec-ash);
    padding: var(--s-2) 0;
    transition: color var(--d-fast) var(--e-out);
    display: inline-flex; align-items: center; gap: 6px;
}
.nav > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--nec-ember);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--d-base) var(--e-out);
    box-shadow: 0 0 8px rgba(217,146,58,.6);
}
.nav > a:hover, .nav > a[aria-current="page"] { color: var(--nec-bone); text-decoration: none; }
.nav > a:hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1); }
.nav > a[hidden] { display: none; }
.nav-actions { display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-4); }
.nav-ogrine { width: 16px; height: 16px; }
.nav-libelle { display: none; }   /* libellé du bouton Discord : menu du téléphone seulement */

.burger {
    display: none; width: 44px; height: 44px;
    background: none; border: 1px solid var(--nec-stone); border-radius: var(--r-md);
    color: var(--nec-bone); cursor: pointer; align-items: center; justify-content: center; margin-left: auto;
}
.burger span, .burger span::before, .burger span::after {
    content: ""; display: block; width: 18px; height: 2px; background: currentColor;
    transition: transform var(--d-base) var(--e-out), opacity var(--d-fast);
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-2px); }

/* --- boutons ------------------------------------------------------------ */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    font-family: var(--nec-display); font-size: .9375rem; font-weight: 600; letter-spacing: .06em;
    padding: var(--s-3) var(--s-6); min-height: 44px;
    border-radius: var(--r-md); border: 1px solid transparent;
    cursor: pointer; text-align: center; color: inherit; background: none;
    transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-base) var(--e-out),
                background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
/* Reflet qui traverse le bouton principal au survol. */
.btn-primaire::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s var(--e-out);
}
.btn-primaire:hover::before { transform: translateX(120%); }
.btn-primaire { background: linear-gradient(180deg, #E5A24A, #C9822E); color: #241503; border-color: #E5A24A; box-shadow: 0 0 0 rgba(217,146,58,0); }
.btn-primaire:hover { box-shadow: var(--sh-glow), 0 8px 24px rgba(0,0,0,.4); color: #241503; }
/* Pas de backdrop-filter ici : chaque bouton flouterait le décor animé derrière
   lui à chaque image, et ça se sentait au défilement. */
.btn-secondaire { background: rgba(23,16,33,.85); color: var(--nec-bone); border-color: var(--nec-stone); }
.btn-secondaire:hover { border-color: var(--nec-violet); box-shadow: var(--sh-aura); color: var(--nec-bone); }
.btn-large { font-size: 1.0625rem; padding: var(--s-4) var(--s-8); min-height: 52px; }
.btn-bloc { width: 100%; }

/* --- icônes -------------------------------------------------------------- */
.ico {
    display: inline-block; width: 18px; height: 18px; flex: none;
    background-color: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.ico-discord { -webkit-mask-image: url(/static/img/discord.svg); mask-image: url(/static/img/discord.svg); }
.ico-user    { -webkit-mask-image: url(/static/img/user.png);    mask-image: url(/static/img/user.png); }
.btn-icone { padding: 0; width: 44px; min-height: 44px; }
.btn-icone .ico { width: 20px; height: 20px; }
.ogrine { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* --- compte connecté (en-tête) -------------------------------------------- */
.lien-compte { display: inline-flex; align-items: center; gap: var(--s-2); }
.btn-compte { max-width: 210px; padding-inline: var(--s-3) var(--s-4); }
.btn-compte #lien-compte-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lien-compte .ico-user { width: 16px; height: 16px; }
/* MZ (02/11) : bouton « Support » rouge (bouée), joueurs connectés. */
/* Bouée seule, carrée comme le bouton Discord (MZ : « une bouée bouton rouge ») ; le texte reste pour les lecteurs d'écran. */
.lien-support { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex: none; background: #a82c2c; color: #fff; border: 1px solid #d14a4a; }
.lien-support:hover, .lien-support:focus-visible { background: #c23535; color: #fff; }
.lien-support svg { width: 20px; height: 20px; }
.lien-support span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-panel { white-space: nowrap; }

.cl-classe { width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--nec-void); border: 1px solid var(--nec-stone); object-fit: cover; flex: none; }
.cl-nom { display: flex; align-items: center; gap: var(--s-3); }

/* =========================================================================
   DÉCOR ANIMÉ (toutes les pages)
   -------------------------------------------------------------------------
   Un canvas fixe derrière tout (necrome.js : nuages, particules, éclairs),
   des lueurs violettes CSS qui dérivent, deux nappes de brume, un flash
   d'orage. Rien n'intercepte un clic, tout s'éteint sous
   prefers-reduced-motion.
   ========================================================================= */
.decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* L'en-tête n'est PAS dans cette liste : il porte son propre z-index (100). */
body > main, body > .pied { position: relative; z-index: 1; }
.ciel { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Le flou est coûteux sur d'aussi grands éléments : 50 px suffisent, le dégradé
   radial fait déjà le fondu. */
.lueur { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; will-change: transform; }
.lueur-1 { width: 48vw; height: 48vw; min-width: 400px; min-height: 400px; left: -12vw; top: 18vh;
           background: radial-gradient(circle, rgba(126,63,178,.55) 0%, rgba(126,63,178,0) 70%);
           animation: derive-1 34s ease-in-out infinite alternate; }
.lueur-2 { width: 40vw; height: 40vw; min-width: 340px; min-height: 340px; right: -10vw; top: 55vh;
           background: radial-gradient(circle, rgba(209,75,181,.4) 0%, rgba(209,75,181,0) 70%);
           animation: derive-2 42s ease-in-out infinite alternate; }
.lueur-3 { width: 30vw; height: 30vw; min-width: 260px; min-height: 260px; left: 40vw; top: -10vh;
           background: radial-gradient(circle, rgba(155,77,224,.35) 0%, rgba(155,77,224,0) 70%);
           animation: derive-3 27s ease-in-out infinite alternate; }
@keyframes derive-1 { from { transform: translate3d(0,0,0) scale(1); }   to { transform: translate3d(6vw,-8vh,0) scale(1.14); } }
@keyframes derive-2 { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-7vw,9vh,0) scale(1); } }
@keyframes derive-3 { from { transform: translate3d(0,0,0) scale(.9); }   to { transform: translate3d(-4vw,6vh,0) scale(1.2); } }

.fumee {
    position: absolute; left: -50%; width: 200%; height: 60vh;
    background: radial-gradient(60% 100% at 20% 50%, rgba(160,110,200,.12) 0%, transparent 60%),
                radial-gradient(50% 100% at 65% 40%, rgba(120,80,160,.10) 0%, transparent 60%);
    filter: blur(18px); will-change: transform;
}
.fumee-1 { top: 12vh; animation: passe-droite 68s linear infinite; }
.fumee-2 { bottom: 4vh; animation: passe-gauche 92s linear infinite; opacity: .75; }
@keyframes passe-droite { from { transform: translate3d(-16%,0,0); } to { transform: translate3d(16%,0,0); } }
@keyframes passe-gauche { from { transform: translate3d(14%,0,0); } to { transform: translate3d(-14%,0,0); } }

/* Le flash d'orage est piloté par le JS (classe .flash posée 300 ms) : il
   part en même temps que l'éclair dessiné sur le canvas. */
.orage { position: absolute; inset: 0; opacity: 0;
         background: radial-gradient(70% 55% at 60% 0%, rgba(214,180,255,.9) 0%, transparent 60%);
         transition: opacity 90ms ease-out; }
.orage.flash { opacity: .18; transition-duration: 40ms; }

/* =========================================================================
   HERO
   ========================================================================= */
/* Le bas du hero garde de la place pour l'indice de défilement : sans ce
   padding, les puces passaient dessous et sous la barre d'état. */
.hero { position: relative; min-height: 88vh; display: flex; align-items: center; padding-top: var(--entete-decalage); padding-bottom: 88px; overflow: hidden; }
.hero-fond { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 70% 15%, #2A1B3D 0%, var(--nec-void) 70%); }
.hero-fond picture { display: block; width: 100%; height: 100%; will-change: transform;
                     animation: kenburns 46s ease-in-out infinite alternate; }
.hero-fond img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@keyframes kenburns { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.16) translate3d(-1.5%,-2%,0); } }
/* Canvas propre au hero : nuages plus denses, éclairs plus fréquents. */
.hero-ciel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hero-voile { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(13,9,18,.5) 0%, rgba(13,9,18,0) 30%, rgba(13,9,18,.3) 60%, var(--nec-void) 100%); }
.hero > .conteneur { position: relative; z-index: 3; }

/* Aura violette qui respire derrière le logo. */
/* 620 px : assez pour que les deux boutons tiennent sur une ligne. */
.hero-texte { position: relative; max-width: 620px; }
.hero-aura {
    position: absolute; left: 50%; top: 18%; width: 640px; height: 420px;
    transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(155,77,224,.5), rgba(209,75,181,.18) 50%, transparent 72%);
    filter: blur(24px);
    animation: respire 5.5s ease-in-out infinite;
}
@keyframes respire { 0%,100% { transform: translate(-50%,-50%) scale(.92); opacity: .75; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; } }
.hero-logo { margin: 0 0 var(--s-6); animation: flotte 6s ease-in-out infinite; }
.hero-logo picture { display: block; }
.hero-logo img { width: min(100%, 540px); height: auto; filter: drop-shadow(0 10px 36px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(155,77,224,.35)); }
@keyframes flotte { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-sur { display: inline-block; font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; color: var(--nec-ember); margin-bottom: var(--s-3); }
.hero-accroche { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--nec-bone); opacity: .92; margin: 0 0 var(--s-8); text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.hero-boutons { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.hero-puces { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.hero-puces li { font-size: var(--t-small); color: var(--nec-bone); background: rgba(13,9,18,.7); border: 1px solid rgba(155,77,224,.4);
                 border-radius: var(--r-pill); padding: 4px 12px; }
.hero-puces b { color: var(--nec-ember); font-variant-numeric: tabular-nums; }

/* Dofus Nécrom qui flottent à droite du hero, décalés à la souris (JS), avec
   leur infobulle au survol. La couche est transparente aux clics sauf sur les
   Dofus eux-mêmes ; et comme le conteneur du texte est AU-DESSUS (z 3), il
   doit lui aussi laisser passer la souris hors de la colonne de texte. */
/* z 4 : AU-DESSUS du texte (z 3), sinon l'infobulle passait sous les boutons. */
.hero-dofus { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero > .conteneur { pointer-events: none; }
.hero-texte { pointer-events: auto; }
.dofus { position: absolute; left: var(--x); top: var(--y); width: var(--w, 120px); height: var(--w, 120px);
    padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
    animation: flotte-dofus var(--t, 8s) ease-in-out var(--d, 0s) infinite; will-change: transform; }
.dofus img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(155,77,224,.55));
             transition: transform var(--d-base) var(--e-out), filter var(--d-base); }
.dofus:hover img, .dofus:focus-visible img { transform: scale(1.12); filter: drop-shadow(0 0 28px rgba(155,77,224,.95)); }
.dofus:hover, .dofus:focus-within { z-index: 5; animation-play-state: paused; }
@keyframes flotte-dofus { 0%,100% { transform: translate3d(var(--px,0),0,0) rotate(-3deg); } 50% { transform: translate3d(var(--px,0),-18px,0) rotate(3deg); } }

/* L'infobulle, dans le style de celle du jeu : panneau sombre, nom en clair,
   passif en violet, contrainte en gris. Elle s'ouvre sous le Dofus, alignée
   à sa droite (ils sont tous dans la moitié droite de l'écran). */
.bulle { position: absolute; top: calc(100% + 8px); right: 0; width: 300px; text-align: left;
    background: rgba(13,9,18,.96); border: 1px solid rgba(155,77,224,.6); border-radius: var(--r-lg);
    padding: var(--s-4); box-shadow: var(--sh-3), var(--sh-aura); font-family: var(--nec-text); font-size: var(--t-small); line-height: 1.45; color: var(--nec-bone);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), visibility 0s linear var(--d-base); cursor: default; }
.dofus:hover .bulle, .dofus:focus-within .bulle { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Variantes de position : centrée sous le Dofus (ceux du milieu, pour ne pas
   déborder sur le texte) et ouverte vers le HAUT (le Dofus le plus bas, sinon
   le bord du hero — overflow hidden — coupe l'infobulle). */
.bulle-centre { right: auto; left: 50%; transform: translate(-50%, 6px); }
.dofus:hover .bulle-centre, .dofus:focus-within .bulle-centre { transform: translateX(-50%); }
.bulle-haut { top: auto; bottom: calc(100% + 8px); transform: translate(-50%, -6px); }
.dofus:hover .bulle-haut, .dofus:focus-within .bulle-haut { transform: translateX(-50%); }
.bulle b { display: block; font-family: var(--nec-display); font-size: 1rem; color: var(--nec-bone); }
.bulle small { display: block; color: var(--nec-ash); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-2); }
.bulle em { display: block; font-style: normal; font-weight: 600; color: #C79BFF; margin-top: var(--s-2); }
.bulle > span { display: block; color: #C79BFF; }
.bulle i { display: block; font-style: normal; color: var(--nec-ash); margin-top: var(--s-2); }

/* Indice de défilement. */
.hero-scroll { position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%); width: 26px; height: 42px;
    border: 2px solid rgba(237,231,224,.35); border-radius: 14px; }
.hero-scroll::before { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
    background: var(--nec-ember); animation: molette 1.8s ease-in-out infinite; }
@keyframes molette { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* --- état du serveur ---------------------------------------------------- */
.etat {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-8);
    padding: var(--s-4) var(--s-6);
    border: 1px solid var(--nec-stone); border-radius: var(--r-lg);
    background: linear-gradient(90deg, rgba(23,16,33,.9), rgba(36,26,51,.6));
    font-size: var(--t-small); color: var(--nec-ash);
    margin-top: var(--s-8);
    position: relative; z-index: 4;
    box-shadow: var(--sh-2);
}
.etat-puce { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--nec-bone); }
.etat-puce::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--nec-gone); box-shadow: 0 0 8px currentColor; }
.etat-puce.en-ligne::before { background: var(--nec-alive); animation: pouls 2s ease-in-out infinite; }
@keyframes pouls { 0%,100% { box-shadow: 0 0 0 0 rgba(78,158,106,.6); } 50% { box-shadow: 0 0 0 7px rgba(78,158,106,0); } }
.etat b { color: var(--nec-bone); font-variant-numeric: tabular-nums; }

/* --- sections ----------------------------------------------------------- */
.section { position: relative; padding-block: var(--s-24); }
.section-sombre { background: linear-gradient(180deg, var(--nec-crypt), var(--nec-void)); }
.section-titre { margin-bottom: var(--s-8); }
.section-titre .sur { display: block; font-family: var(--nec-text); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--nec-ember); margin-bottom: var(--s-2); }
.section-titre h2 { font-size: var(--t-h2); margin: 0; }
.section-titre p { color: var(--nec-ash); margin: var(--s-3) 0 0; max-width: 60ch; }
.section-titre.centre p { margin-inline: auto; }
/* Filet ornemental sous un titre centré. */
.ornement { display: flex; align-items: center; justify-content: center; gap: 10px; margin: var(--s-3) auto 0; color: var(--nec-violet); }
.ornement::before, .ornement::after { content: ""; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.ornement::after { background: linear-gradient(90deg, currentColor, transparent); }
.ornement i { width: 6px; height: 6px; transform: rotate(45deg); background: currentColor; box-shadow: 0 0 10px currentColor; }

/* --- démo jouable du mode Nécrom ----------------------------------------
   Trois colonnes façon fenêtre du jeu : le sort, la grille de Nécromisation,
   l'arène. Tout est dessiné en CSS : la seule image, ce sont les icônes. */
.demo-grille { display: grid; grid-template-columns: 1.05fr 1.1fr 1fr; gap: var(--s-6); }
.demo-col { border: 1px solid var(--nec-stone); border-radius: var(--r-xl); background: rgba(23,16,33,.85); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.demo-tete { display: flex; align-items: center; gap: var(--s-3); font-family: var(--nec-display); font-size: 1.0625rem; color: var(--nec-bone); }
.demo-tete > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--nec-ember); color: var(--nec-void); font-size: .9rem; box-shadow: var(--sh-glow); flex: none; }
.demo-tete em { margin-left: auto; font-style: normal; font-family: var(--nec-text); font-size: var(--t-small); color: var(--nec-ember); border: 1px solid rgba(217,146,58,.5); border-radius: var(--r-pill); padding: 2px 10px; font-variant-numeric: tabular-nums; }

.demo-sorts { display: grid; gap: var(--s-2); }
.demo-sort { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(13,9,18,.6); color: inherit; font: inherit; text-align: left; cursor: pointer;
             transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast) var(--e-out); }
.demo-sort:hover { border-color: var(--nec-violet); transform: translateX(3px); }
.demo-sort.actif { border-color: var(--nec-ember); background: rgba(217,146,58,.1); box-shadow: inset 3px 0 0 var(--nec-ember); }
.demo-sort img { width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--nec-stone); background: var(--nec-void); flex: none; }
.demo-sort b { display: block; font-family: var(--nec-display); font-size: .95rem; }
.demo-sort small { color: var(--nec-ash); font-size: var(--t-label); }

/* L'infobulle du sort, dans le style de celle du jeu. */
.demo-bulle { border: 1px solid rgba(155,77,224,.55); border-radius: var(--r-lg); background: rgba(13,9,18,.92); padding: var(--s-4); font-size: var(--t-small); line-height: 1.5; box-shadow: var(--sh-aura); }
.demo-bulle .db-tete { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.demo-bulle .db-tete img { width: 52px; height: 52px; border-radius: var(--r-md); border: 1px solid var(--nec-stone); background: var(--nec-void); }
.demo-bulle .db-tete b { display: block; font-family: var(--nec-display); font-size: 1.1rem; }
.demo-bulle .db-tete em { font-style: normal; color: #C79BFF; }
.demo-bulle .db-tete em.off { color: var(--nec-ash); }
.demo-bulle .db-ligne { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--nec-bone); }
.demo-bulle .db-ligne span:last-child { font-variant-numeric: tabular-nums; }
.demo-bulle .db-ligne.mod span:last-child { color: #C79BFF; font-weight: 600; }
.demo-bulle .db-nec { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--nec-stone); color: #C79BFF; }
.demo-bulle .db-nec.off { color: var(--nec-ash); }
.demo-bulle .db-degats { margin-top: var(--s-3); font-size: 1rem; }
.demo-bulle .db-degats b { font-variant-numeric: tabular-nums; }
.demo-bulle .feu { color: #E5643A; } .demo-bulle .terre { color: #C9A050; } .demo-bulle .air { color: #6FCF97; } .demo-bulle .eau { color: #5DA9E9; }

/* La grille des bonus : une ligne = libellé, effet, − n/max +. */
.demo-bonus { display: grid; gap: 6px; }
.demo-ligne { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--nec-stone); border-radius: var(--r-md); background: rgba(13,9,18,.55); transition: border-color var(--d-fast), background var(--d-fast); }
.demo-ligne.actif { border-color: rgba(155,77,224,.6); background: rgba(155,77,224,.1); }
.demo-ligne.off { opacity: .45; }
.demo-ligne b { display: block; font-size: var(--t-small); color: var(--nec-bone); }
.demo-ligne small { display: block; color: var(--nec-ash); font-size: var(--t-label); }
.demo-ligne small i { font-style: normal; color: var(--nec-ember); }
.demo-pm { display: flex; align-items: center; gap: 6px; }
.demo-pm button { width: 30px; height: 30px; border-radius: var(--r-md); border: 1px solid var(--nec-stone); background: var(--nec-void); color: var(--nec-bone); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: border-color var(--d-fast), background var(--d-fast); }
.demo-pm button:hover:not(:disabled) { border-color: var(--nec-violet); background: rgba(155,77,224,.2); }
.demo-pm button:disabled { opacity: .35; cursor: default; }
.demo-pm output { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--t-small); color: var(--nec-bone); }

/* L'arène. */
.demo-barres { display: grid; gap: var(--s-2); }
.demo-jauge { position: relative; display: grid; grid-template-columns: 34px 1fr 64px; align-items: center; gap: var(--s-2); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--nec-ash); }
.demo-jauge i { display: block; height: 10px; border-radius: var(--r-pill); background: var(--nec-void); border: 1px solid var(--nec-stone); overflow: hidden; position: relative; }
.demo-jauge i::before { content: ""; position: absolute; inset: 0; width: var(--p, 100%); background: linear-gradient(90deg, #3E7BC6, #6FB1FF); transition: width .35s var(--e-out); }
.demo-jauge.pw i::before { background: linear-gradient(90deg, #7B3FB6, #C79BFF); }
.demo-jauge b { text-align: right; color: var(--nec-bone); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.demo-necrose { display: inline-flex; align-items: center; gap: var(--s-3); align-self: flex-start; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); border: 1px solid var(--nec-stone); border-radius: var(--r-pill); background: rgba(13,9,18,.6); color: var(--nec-ash); font: inherit; cursor: pointer; transition: border-color var(--d-base), color var(--d-base), box-shadow var(--d-base); }
.demo-necrose i { width: 30px; height: 30px; border-radius: 50%; background: var(--nec-void); border: 2px solid var(--nec-stone); display: grid; place-items: center; font-style: normal; transition: all var(--d-base); }
.demo-necrose i::before { content: "N"; font-family: var(--nec-display); font-weight: 700; color: var(--nec-ash); }
.demo-necrose small { display: block; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; }
.demo-necrose[aria-pressed="true"] { border-color: var(--nec-violet); color: var(--nec-bone); box-shadow: var(--sh-aura); }
.demo-necrose[aria-pressed="true"] i { border-color: var(--nec-violet); background: rgba(155,77,224,.25); box-shadow: 0 0 14px rgba(155,77,224,.8); }
.demo-necrose[aria-pressed="true"] i::before { color: #E2C6FF; }

.demo-poutchs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); align-items: end; min-height: 190px; }
.demo-poutch { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2); border: 1px solid transparent; border-radius: var(--r-lg); cursor: pointer; transition: opacity var(--d-base), transform var(--d-base) var(--e-out), border-color var(--d-base); }
.demo-poutch.cote { opacity: .35; transform: scale(.85); }
.demo-poutch.cote.zone { opacity: .9; transform: scale(.92); border-color: rgba(155,77,224,.4); }
.demo-poutch img { width: 96px; height: 96px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.demo-poutch.cote img { width: 72px; height: 72px; }
.demo-poutch.touche img { animation: secousse .35s ease-out; }
@keyframes secousse { 0% { transform: translate(0,0); } 20% { transform: translate(-5px,2px) rotate(-3deg); } 45% { transform: translate(5px,-2px) rotate(3deg); } 70% { transform: translate(-3px,1px); } 100% { transform: none; } }
.demo-poutch.ko img { filter: grayscale(1) brightness(.5) drop-shadow(0 8px 16px rgba(0,0,0,.6)); transform: rotate(90deg) translateY(10px); transition: transform .4s var(--e-out), filter .4s; }
.demo-pv { width: 100%; height: 8px; border-radius: var(--r-pill); background: var(--nec-void); border: 1px solid var(--nec-stone); overflow: hidden; }
.demo-pv i { display: block; height: 100%; width: var(--p, 100%); background: linear-gradient(90deg, #B5503F, #E5643A); transition: width .3s var(--e-out); }
.demo-poutch small { font-size: var(--t-label); color: var(--nec-ash); font-variant-numeric: tabular-nums; }
.demo-degats { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-family: var(--nec-display); font-weight: 700; font-size: 1.6rem; color: #FFB86B; text-shadow: 0 0 10px rgba(0,0,0,.9), 0 0 18px rgba(217,146,58,.6); pointer-events: none; animation: envol 1.1s ease-out forwards; }
.demo-degats.nec { color: #E2C6FF; text-shadow: 0 0 10px rgba(0,0,0,.9), 0 0 18px rgba(155,77,224,.9); font-size: 1.9rem; }
@keyframes envol { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
.demo-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.demo-info { margin: 0; min-height: 2.6em; font-size: var(--t-small); color: var(--nec-bone); }
.demo-info.refus { color: #FF9A85; }
.demo-arene .note { margin: 0; }

/* --- taux (chiffres) ---------------------------------------------------- */
.taux { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); margin-top: var(--s-8); }
.taux div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-6) var(--s-4);
            border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(23,16,33,.6);
            position: relative; overflow: hidden; }
.taux div::before { content: ""; position: absolute; inset: auto -30% -60% -30%; height: 120%; border-radius: 50%;
                    background: radial-gradient(closest-side, rgba(155,77,224,.25), transparent); pointer-events: none; }
.taux b { font-family: var(--nec-display); font-size: 2.4rem; color: var(--nec-ember); font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 18px rgba(217,146,58,.35); }
.taux span { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--nec-ash); margin-top: var(--s-2); }

/* --- cartes de fonctionnalités ------------------------------------------ */
.features { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.feature {
    position: relative; display: flex; flex-direction: column;
    border-radius: var(--r-xl); overflow: hidden;
    background: var(--nec-crypt); border: 1px solid var(--nec-stone);
    color: inherit; text-decoration: none;
    transform-style: preserve-3d;
    transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.feature:hover { text-decoration: none; border-color: rgba(155,77,224,.7); box-shadow: var(--sh-aura), var(--sh-3); }
.feature-image { aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--nec-stone); }
.feature-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--e-out); }
.feature:hover .feature-image img { transform: scale(1.06); }
.feature-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--nec-crypt) 100%); }
.feature-num { position: absolute; top: 12px; left: 12px; z-index: 1; font-family: var(--nec-display); font-size: .8rem; letter-spacing: .1em;
               color: var(--nec-bone); background: rgba(13,9,18,.75); border: 1px solid rgba(155,77,224,.5); border-radius: var(--r-pill); padding: 2px 10px; }
.feature-corps { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.feature h3 { font-size: var(--t-h3); margin: 0; }
.feature p { margin: 0; color: var(--nec-ash); font-size: var(--t-small); flex: 1; }
.feature .lien { color: var(--nec-ember); font-size: var(--t-small); font-weight: 600; margin-top: var(--s-2); }
.feature-large { grid-column: span 2; }
.feature-large .feature-image { aspect-ratio: 21/9; }

/* Carte dont l'image est un PANNEAU composé (interface, texte dans l'image) :
   on la montre entière et centrée, au ratio de la source (1,6), au lieu de la
   recadrer en bandeau — sinon on coupe la moitié des lignes. Le voile du bas
   est repoussé pour ne pas assombrir la dernière ligne du panneau. */
.feature-panneau .feature-image { aspect-ratio: 16/10; }
.feature-panneau .feature-image img { object-position: center; }
.feature-panneau .feature-image::after { background: linear-gradient(180deg, transparent 78%, var(--nec-crypt) 100%); }

/* --- bande Nécromonde (parallaxe) --------------------------------------- */
.bande { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: center; padding-block: var(--s-24); }
.bande-fond { position: absolute; inset: -12% 0; z-index: 0; }
.bande-fond img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.bande-voile { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(13,9,18,.92) 0%, rgba(13,9,18,.6) 45%, rgba(13,9,18,.2) 100%),
                linear-gradient(180deg, var(--nec-void) 0%, transparent 18%, transparent 82%, var(--nec-void) 100%); }
.bande > .conteneur { position: relative; z-index: 2; }
.bande h2 { font-size: var(--t-h1); }
.bande-texte { max-width: 52ch; }
.bande-texte p { font-size: 1.0625rem; color: var(--nec-bone); opacity: .9; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.chips li { font-family: var(--nec-display); font-size: var(--t-small); letter-spacing: .06em; color: var(--nec-bone);
            border: 1px solid rgba(155,77,224,.5); background: rgba(13,9,18,.55); border-radius: var(--r-pill); padding: 6px 14px; }

/* --- classes (marquee + fond de classe) ---------------------------------- */
.classes { position: relative; overflow: hidden; }
.classes-fond { position: absolute; inset: 0; z-index: 0; }
.classes-fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--e-out); }
.classes-fond img.visible { opacity: .35; }
.classes-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--nec-void) 0%, rgba(13,9,18,.55) 40%, rgba(13,9,18,.55) 60%, var(--nec-void) 100%); }
.classes > .conteneur { position: relative; z-index: 1; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding-block: var(--s-3); }
.marquee-piste { display: flex; gap: var(--s-4); width: max-content; animation: defile var(--t, 60s) linear infinite; }
.marquee:hover .marquee-piste { animation-play-state: paused; }
.marquee-inverse .marquee-piste { animation-direction: reverse; }
@keyframes defile { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.classe {
    flex: none; width: 118px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--nec-ash);
    display: flex; flex-direction: column; align-items: center; gap: var(--s-2); font-family: var(--nec-display); font-size: .8rem; letter-spacing: .04em;
    transition: color var(--d-base), transform var(--d-base) var(--e-out);
}
.classe img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--nec-stone); background: var(--nec-void);
              transition: border-color var(--d-base), box-shadow var(--d-base), transform var(--d-base) var(--e-out); }
.classe:hover, .classe.actif { color: var(--nec-bone); transform: translateY(-4px); }
.classe:hover img, .classe.actif img { border-color: var(--nec-ember); box-shadow: 0 0 22px rgba(155,77,224,.6); transform: scale(1.06); }
.classe-nom { text-align: center; margin-top: var(--s-6); font-family: var(--nec-display); font-size: var(--t-h2); color: var(--nec-bone); min-height: 1.3em; }
.classe-nom small { display: block; font-family: var(--nec-text); font-size: var(--t-small); color: var(--nec-ash); letter-spacing: .1em; text-transform: uppercase; }

/* --- guildes & boss ------------------------------------------------------ */
.guildes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; }
.guildes-illu { position: relative; display: flex; justify-content: center; }
.guildes-illu img { width: min(100%, 380px); filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); animation: flotte 7s ease-in-out infinite; }
.guildes-illu::before { content: ""; position: absolute; left: 50%; top: 55%; width: 360px; height: 360px; transform: translate(-50%,-50%);
    background: radial-gradient(closest-side, rgba(155,77,224,.45), transparent 70%); filter: blur(20px); z-index: -1; animation: respire 6s ease-in-out infinite; }
.boss { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-top: var(--s-8); }
/* Chaque boss est un bouton : il porte l'infobulle des Dofus qu'il lâche. */
.boss-item { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(23,16,33,.7);
             color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color var(--d-base), transform var(--d-base) var(--e-out), box-shadow var(--d-base); }
.boss-item:hover, .boss-item:focus-within { border-color: rgba(155,77,224,.75); transform: translateY(-3px); box-shadow: var(--sh-aura); z-index: 5; }
.boss-item > img { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--nec-stone); background: var(--nec-void); object-fit: cover; flex: none; transition: border-color var(--d-base); }
.boss-item:hover > img { border-color: var(--nec-ember); }
.boss b { display: block; font-size: var(--t-small); color: var(--nec-bone); }
.boss-item > span > span { font-size: var(--t-label); color: var(--nec-ash); }
/* Liste des Dofus dans l'infobulle : icône, nom, niveau. */
.bulle-dofus { display: grid; gap: 6px; margin-top: var(--s-2); }
.bulle-dofus > span { display: flex; align-items: center; gap: var(--s-2); color: var(--nec-bone); }
.bulle-dofus img { width: 34px; height: 34px; object-fit: contain; flex: none; filter: drop-shadow(0 0 6px rgba(155,77,224,.6)); }
.bulle-dofus small { display: inline; margin: 0 0 0 auto; color: var(--nec-ash); text-transform: none; letter-spacing: 0; }
.puces { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.puces li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--nec-ash); }
.puces li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px; transform: rotate(45deg); background: var(--nec-violet); box-shadow: 0 0 8px var(--nec-violet); }
.puces b { color: var(--nec-bone); }

/* --- actualités --------------------------------------------------------- */
.actus { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.actu { display: flex; flex-direction: column; background: var(--nec-crypt); border: 1px solid var(--nec-stone); border-radius: var(--r-xl); overflow: hidden;
        transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), box-shadow var(--d-base); }
.section-sombre .actu { background: rgba(13,9,18,.8); }
.actu:hover { border-color: rgba(155,77,224,.6); transform: translateY(-3px); box-shadow: var(--sh-aura); }
.actu-image { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--nec-stone), var(--nec-void)) ; overflow: hidden; }
.actu-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e-out); }
.actu:hover .actu-image img { transform: scale(1.05); }
.actu-corps { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; gap: var(--s-2); }
.actu-meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--nec-ash); }
.actu-tag { color: var(--nec-ember); border: 1px solid var(--nec-stone); border-radius: var(--r-pill); padding: 2px var(--s-2); }
.actu h3 { font-size: var(--t-h3); margin: 0; }
.actu p { margin: 0; color: var(--nec-ash); font-size: var(--t-small); flex: 1; }
.actu .lien { margin-top: var(--s-3); font-weight: 600; font-size: var(--t-small); }

/* --- clôture ------------------------------------------------------------ */
.cloture { text-align: center; }
.cloture .bande-voile { background: linear-gradient(180deg, var(--nec-void) 0%, rgba(13,9,18,.55) 30%, rgba(13,9,18,.55) 70%, var(--nec-void) 100%); }
.cloture h2 { font-size: var(--t-h1); }
.cloture .hero-boutons { justify-content: center; margin-top: var(--s-8); }
.cloture .lisible { margin-inline: auto; }

/* --- pied --------------------------------------------------------------- */
.pied { background: var(--nec-crypt); border-top: 1px solid var(--nec-stone); padding-block: var(--s-12) var(--s-8); font-size: var(--t-small); color: var(--nec-ash); }
.pied-grille { display: grid; gap: var(--s-8); grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.pied h4 { font-family: var(--nec-display); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--nec-bone); margin: 0 0 var(--s-3); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pied a { color: var(--nec-ash); }
.pied a:hover { color: var(--nec-bone); }
.pied-logo img { height: 42px; width: auto; margin-bottom: var(--s-3); opacity: .9; }
.pied-bas { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--nec-stone); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; font-size: var(--t-label); }

/* --- en-tête de page intérieure ------------------------------------------
   Trois couches, et c'est ce qui fait la différence entre « une image avec du
   texte posé dessus » et un bandeau composé :
     1. l'illustration, sombre, avec son zoom lent ;
     2. un voile VIOLET qui unifie la bande avec le reste du site, plus un
        dégradé latéral qui pose le titre sur du presque noir — le texte reste
        lisible quelle que soit l'illustration ;
     3. un filet lumineux en bas, qui referme la bande au lieu de la laisser
        se fondre mollement dans la page.
   Les illustrations viennent TOUTES de l'univers Nécrome (citadelle, écran de
   chargement, ciel violet) : une capture de Dofus en plein jour au-dessus d'un
   site violet sombre se voit immédiatement comme un collage. */
.page-tete { position: relative; overflow: hidden; padding-block: calc(var(--entete-decalage) + var(--s-16)) var(--s-12); }
.page-tete-fond { position: absolute; inset: 0; z-index: 0; }
.page-tete-fond img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .62; animation: kenburns 50s ease-in-out infinite alternate; }
.page-tete-fond::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(13,9,18,.94) 0%, rgba(13,9,18,.7) 42%, rgba(13,9,18,.15) 100%),
        linear-gradient(180deg, rgba(13,9,18,.6) 0%, transparent 35%, rgba(13,9,18,.55) 78%, var(--nec-void) 100%),
        radial-gradient(120% 90% at 78% 30%, rgba(126,63,178,.30), transparent 65%);
}
.page-tete::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(155,77,224,.65) 22%, rgba(217,146,58,.55) 50%, rgba(155,77,224,.65) 78%, transparent);
    box-shadow: 0 0 20px rgba(155,77,224,.45);
}
.page-tete > .conteneur { position: relative; z-index: 1; }
.page-tete h1 { font-size: var(--t-h1); margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,.7); }
.page-tete .sur { display: block; font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--nec-ember); margin-bottom: var(--s-2); }
.page-tete p { color: var(--nec-bone); opacity: .85; max-width: 60ch; margin: var(--s-3) 0 0; }
.page-corps { padding-block: var(--s-8) var(--s-24); }

/* --- article (prose) ---------------------------------------------------- */
.article-tete { padding-block: calc(var(--entete-decalage) + var(--s-12)) var(--s-8); }
.article-tete .page-tete-fond img { opacity: .6; object-position: center; }
.article-retour { margin: 0 0 var(--s-6); font-size: var(--t-small); }
.article-retour a { color: var(--nec-ash); }
.article-retour a:hover { color: var(--nec-ember); }
.article-entete { max-width: 70ch; }
.article-entete h1 { font-size: var(--t-h1); margin: var(--s-3) 0 var(--s-4); }
.article-chapo { font-size: 1.125rem; line-height: 1.6; color: var(--nec-bone); opacity: .85; margin: 0; }
.article-corps { max-width: 76ch; padding-block: var(--s-8) var(--s-24); }
.article-corps strong { color: var(--nec-bone); }
.article-corps li { margin-bottom: var(--s-2); }
.article-corps li::marker { color: var(--nec-ember); }
.article-corps blockquote { margin: var(--s-6) 0; padding: var(--s-2) 0 var(--s-2) var(--s-6); border-left: 2px solid var(--nec-ember); color: var(--nec-ash); font-style: italic; }
.article-corps hr { border: 0; border-top: 1px solid var(--nec-stone); margin: var(--s-12) 0; }
.article-corps p { margin: 0 0 var(--s-4); color: var(--nec-bone); opacity: .92; }
.article-corps h1 { font-size: var(--t-h2); margin-top: var(--s-8); }
.article-corps h2 { font-size: var(--t-h2); margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--nec-stone); }
.article-corps h3 { font-size: var(--t-h3); margin-top: var(--s-8); color: var(--nec-ember); }
.article-corps ul, .article-corps ol { padding-left: var(--s-6); }
.article-corps code { background: var(--nec-crypt); border: 1px solid var(--nec-stone); border-radius: var(--r-sm); padding: 1px 5px; font-size: .9em; }
.article-figure { margin: var(--s-8) 0; }
.article-figure img { border-radius: var(--r-lg); border: 1px solid var(--nec-stone); box-shadow: var(--sh-2); }
.icone-objet { display: inline-block; width: 32px; height: 32px; vertical-align: middle; margin: -4px 6px -4px 0; border-radius: var(--r-sm); background: radial-gradient(circle, color-mix(in srgb, var(--nec-violet) 22%, transparent), transparent 70%); }
.article-table .icone-objet { width: 36px; height: 36px; }
/* `img { max-width: 100% }` rend une icône « compressible » : dans une cellule de
   tableau, elle ne compte plus dans la largeur minimale de la colonne, et le texte
   qui la suit déborde sur la colonne voisine. Une icône garde sa taille. */
.icone-objet { max-width: none; }
/* La première colonne (le nom) peut passer à la ligne : les chiffres, eux, restent
   d'un bloc. Sans ça, un tableau à cinq colonnes sort de la fiche. */
.article-table td:first-child { white-space: normal; min-width: 10em; }
/* Icône en tête d'un titre de fiche (sort, objet, Ascension) : plus grande que dans le texte. */
.article-corps h2 .icone-objet { width: 52px; height: 52px; margin: -10px 12px -8px 0; }
.article-corps h3 .icone-objet { width: 44px; height: 44px; margin: -8px 10px -6px 0; }
/* Tableaux du wiki : défilent dans leur propre boîte sur téléphone. */
.article-table { overflow-x: auto; margin: var(--s-6) 0; border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: var(--nec-crypt); }
.article-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .88em; }
.article-table th, .article-table td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--nec-stone); white-space: nowrap; }
.article-table th { white-space: normal; line-height: 1.2; }
.article-table td:first-child { color: var(--nec-bone); font-weight: 600; }
.article-table th { font-family: var(--nec-display); font-weight: 600; letter-spacing: .03em; color: var(--nec-ember); background: color-mix(in srgb, var(--nec-violet) 14%, var(--nec-crypt)); }
.article-table tbody tr:last-child td { border-bottom: 0; }
.article-table tbody tr:hover td { background: color-mix(in srgb, var(--nec-violet) 8%, transparent); }
.article-corps ol { counter-reset: etape; list-style: none; padding-left: 0; }
.article-corps ol > li { counter-increment: etape; position: relative; padding-left: 2.6em; margin-bottom: var(--s-4); }
.article-corps ol > li::before { content: counter(etape); position: absolute; left: 0; top: -.1em; width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; font-family: var(--nec-display); font-weight: 700; color: var(--nec-bone); background: color-mix(in srgb, var(--nec-violet) 55%, var(--nec-stone)); box-shadow: 0 0 12px color-mix(in srgb, var(--nec-violet) 45%, transparent); }
.encart { display: block; margin: var(--s-6) 0; padding: var(--s-4) var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--nec-stone); border-left: 3px solid var(--nec-violet); background: color-mix(in srgb, var(--nec-violet) 9%, var(--nec-crypt)); color: var(--nec-bone); }
.encart-titre { display: block; margin-bottom: var(--s-1); font-family: var(--nec-display); letter-spacing: .04em; color: var(--nec-violet); }
.encart-astuce { border-left-color: var(--nec-alive); background: color-mix(in srgb, var(--nec-alive) 9%, var(--nec-crypt)); }
.encart-astuce .encart-titre { color: var(--nec-alive); }
.encart-attention { border-left-color: var(--nec-gone); background: color-mix(in srgb, var(--nec-gone) 10%, var(--nec-crypt)); }
.encart-attention .encart-titre { color: var(--nec-gone); }
.article-suite { padding-bottom: var(--s-24); }
.article-suite .section-titre { padding-top: var(--s-12); border-top: 1px solid var(--nec-stone); }

/* --- formulaires (inscription, connexion) -------------------------------- */
.formulaire-page { position: relative; min-height: 100vh; display: flex; align-items: center; padding-block: calc(var(--entete-decalage) + var(--s-12)) var(--s-16); }
.formulaire-conteneur { position: relative; z-index: 1; }
.carte-formulaire {
    display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 920px; margin-inline: auto;
    background: rgba(23,16,33,.85); backdrop-filter: blur(10px);
    border: 1px solid var(--nec-stone); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3), var(--sh-aura);
}
.carte-illu { position: relative; min-height: 100%; background: var(--nec-stone); }
.carte-illu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 40s ease-in-out infinite alternate; }
.carte-illu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,9,18,.1), rgba(13,9,18,.85)); }
.carte-illu figcaption { position: absolute; left: var(--s-6); right: var(--s-6); bottom: var(--s-6); z-index: 1; font-family: var(--nec-display); font-size: 1.125rem; color: var(--nec-bone); text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.carte-corps { padding: var(--s-8); }
.carte-corps h1 { font-size: var(--t-h2); margin-bottom: var(--s-2); }
.carte-intro { color: var(--nec-ash); font-size: var(--t-small); margin: 0 0 var(--s-8); }
.carte-pied { margin: var(--s-6) 0 0; font-size: var(--t-small); color: var(--nec-ash); text-align: center; }

.champ { margin-bottom: var(--s-6); }
.champ label { display: block; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--nec-ash); margin-bottom: var(--s-2); }
.champ input { width: 100%; background: var(--nec-void); border: 1px solid var(--nec-stone); border-radius: var(--r-md); color: var(--nec-bone);
    font-family: inherit; font-size: var(--t-body); padding: var(--s-3) var(--s-4); min-height: 44px; transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-base); }
.champ input:focus { border-color: var(--nec-ember); box-shadow: 0 0 0 3px rgba(217,146,58,.15); outline: none; }
.champ small { display: block; margin-top: var(--s-2); font-size: var(--t-label); color: var(--nec-ash); }
.champ-oeil { position: relative; }
.champ-oeil input { padding-right: 48px; }
.oeil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: none; border: 0; cursor: pointer; color: var(--nec-ash); font-size: 1rem; line-height: 1; border-radius: var(--r-md); }
.oeil:hover { color: var(--nec-bone); }
/* L'œil est dessiné (masque SVG) plutôt que l'émoji 👁 : selon le téléphone,
   l'émoji sortait en couleur criarde, ou en carré vide faute de police. Il se
   barre quand le mot de passe est affiché (aria-label posé par necrome.js). */
.oeil { font-size: 0; display: grid; place-items: center; }
.oeil::before {
    content: ""; width: 20px; height: 20px; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.oeil[aria-label^="Masquer"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.1 9.1 0 0 1 12 4c6.4 0 10 7 10 7a18.5 18.5 0 0 1-2.2 3.2M6.6 6.6A18.5 18.5 0 0 0 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.1 9.1 0 0 1 12 4c6.4 0 10 7 10 7a18.5 18.5 0 0 1-2.2 3.2M6.6 6.6A18.5 18.5 0 0 0 2 12s3.6 7 10 7a9.7 9.7 0 0 0 5.4-1.6M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3Cpath d='M2 2l20 20'/%3E%3C/svg%3E");
}
.message { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--t-small); border: 1px solid var(--nec-gone); background: rgba(181,80,63,.12); color: var(--nec-bone); }
.message.ok { border-color: var(--nec-alive); background: rgba(78,158,106,.12); }
.note { color: var(--nec-ash); font-size: var(--t-small); }

/* --- mon compte ---------------------------------------------------------- */
.compte-banniere { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--nec-stone); min-height: 220px;
    display: flex; align-items: flex-end; padding: var(--s-8); background: var(--nec-crypt); box-shadow: var(--sh-3); }
.compte-banniere-fond { position: absolute; inset: 0; z-index: 0; }
.compte-banniere-fond img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: .55; animation: kenburns 40s ease-in-out infinite alternate; }
.compte-banniere-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,9,18,.2), rgba(13,9,18,.9)); }
.compte-entete { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; }
.compte-entete h1 { font-size: var(--t-h1); margin: 0; display: flex; align-items: center; gap: var(--s-4); }
.compte-entete h1 .ico-user { width: 40px; height: 40px; color: var(--nec-ember); }
.compte-portrait { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--nec-ember); box-shadow: var(--sh-glow); background: var(--nec-void); flex: none; }
.compte-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.compte-chiffres div { display: flex; flex-direction: column; padding: var(--s-4) var(--s-6); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(23,16,33,.7); }
.compte-chiffres b { font-family: var(--nec-display); font-size: 2rem; color: var(--nec-ember); font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: center; gap: var(--s-2); }
.compte-chiffres b .ogrine { width: 26px; height: 26px; }
.compte-chiffres span { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--nec-ash); margin-top: var(--s-2); }

/* --- parrainage ---------------------------------------------------------- */
.parrainage { position: relative; border: 1px solid var(--nec-stone); border-left: 3px solid var(--nec-violet); border-radius: var(--r-lg);
              background: rgba(23,16,33,.85); padding: var(--s-6); overflow: hidden; }
/* Halo violet en fond : la même signature visuelle que les cartes de perso au
   survol, pour que le bloc appartienne à la page et ne flotte pas dessus. */
.parrainage::before { content: ""; position: absolute; inset: auto -20% -60% 40%; height: 160%; border-radius: 50%;
                      background: radial-gradient(circle, rgba(155,77,224,.14), transparent 70%); pointer-events: none; }
.parrainage-code { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.parrainage-etiquette { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--nec-ash); }
.parrainage-code strong { font-family: var(--nec-display); font-size: clamp(1.6rem, 5vw, 2.4rem); letter-spacing: .28em;
                          color: var(--nec-ember); line-height: 1; text-shadow: 0 0 18px rgba(217,146,58,.35);
                          /* Chiffres et lettres de même largeur : un code se
                             recopie caractère par caractère, il doit se lire
                             sans ambiguïté de découpe. */
                          font-variant-numeric: tabular-nums; user-select: all; }
.parrainage-regle { position: relative; margin: var(--s-5) 0 0; color: var(--nec-ash); font-size: var(--t-small); max-width: 62ch; }
.parrainage-regle .ogrine { width: 18px; height: 18px; vertical-align: -3px; margin-left: 2px; }
.parrainage-chiffres { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.parrainage-chiffres div { display: flex; flex-direction: column; padding: var(--s-4) var(--s-6); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(12,8,18,.6); }
.parrainage-chiffres b { font-family: var(--nec-display); font-size: 1.8rem; color: var(--nec-bone); font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: center; gap: var(--s-2); }
.parrainage-chiffres b .ogrine { width: 22px; height: 22px; }
.parrainage-chiffres span { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--nec-ash); margin-top: var(--s-2); }
.parrainage .note { position: relative; margin-top: var(--s-5); }
.parrainage-liste { position: relative; margin-top: var(--s-6); overflow-x: auto; border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(12,8,18,.6); }
.parrainage-liste table { width: 100%; border-collapse: collapse; }
.parrainage-liste th { text-align: left; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--nec-ash); font-weight: 500; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--nec-stone); }
.parrainage-liste td { padding: var(--s-3) var(--s-4); color: var(--nec-bone); font-variant-numeric: tabular-nums; }
.parrainage-liste tr + tr td { border-top: 1px solid rgba(255,255,255,.05); }
.parrainage-liste td:first-child { font-family: var(--nec-display); }
.parrainage-liste td:last-child { display: flex; align-items: center; gap: var(--s-2); }
.parrainage-liste td .ogrine { width: 18px; height: 18px; }
.parrainage-sans-perso { color: var(--nec-ash) !important; font-style: italic; }

/* --- liaison du Discord (discord_lien.go) -------------------------------- */
/* Même carte que le parrainage ; seul le médaillon prend la couleur de
   Discord, pour qu'on reconnaisse le service d'un coup d'œil. */
.discord-lien { position: relative; border: 1px solid var(--nec-stone); border-left: 3px solid #5865f2; border-radius: var(--r-lg);
                background: rgba(23,16,33,.85); padding: var(--s-6); overflow: hidden; }
.discord-lien::before { content: ""; position: absolute; inset: auto -20% -60% 40%; height: 160%; border-radius: 50%;
                        background: radial-gradient(circle, rgba(88,101,242,.16), transparent 70%); pointer-events: none; }
.discord-lien .message { position: relative; }
.discord-lien-corps { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4) var(--s-6); }
.discord-lien-logo { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
                     background: #5865f2; color: #fff; box-shadow: 0 0 22px rgba(88,101,242,.45); }
.discord-lien-logo .ico { width: 30px; height: 30px; }
.discord-lien-texte { flex: 1 1 260px; min-width: 0; }
.discord-lien-texte p { margin: 0; color: var(--nec-bone); max-width: 62ch; }
.discord-lien-texte b { overflow-wrap: anywhere; }
.discord-lien-gain { display: inline-flex; align-items: center; gap: 2px; color: var(--nec-ember); white-space: nowrap; }
.discord-lien-gain .ogrine { width: 18px; height: 18px; }
.discord-lien-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.discord-lien-actions form { margin: 0; }
.discord-lien-actions .btn .ico { margin-right: var(--s-2); }
.discord-lien .note { position: relative; margin: var(--s-5) 0 0; }

.persos { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.perso { position: relative; display: flex; align-items: center; gap: var(--s-4); background: var(--nec-crypt); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); padding: var(--s-4); overflow: hidden;
         transition: border-color var(--d-base), box-shadow var(--d-base), transform var(--d-base) var(--e-out); }
.perso:hover { border-color: rgba(155,77,224,.6); box-shadow: var(--sh-aura); transform: translateY(-2px); }
.perso-illu { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--nec-stone); object-fit: cover; border: 2px solid var(--nec-stone); }
.perso-nom { font-family: var(--nec-display); font-size: 1.0625rem; }
.perso-meta { font-size: var(--t-small); color: var(--nec-ash); }
.perso-niveau { margin-left: auto; font-family: var(--nec-display); color: var(--nec-ember); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.perso-niveau small { display: block; font-family: var(--nec-text); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--nec-ash); text-align: right; }

.historique { display: grid; gap: 1px; background: var(--nec-stone); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); overflow: hidden; }
.historique:empty { display: none; }
.histo-ligne { display: grid; grid-template-columns: 170px 1fr auto; gap: var(--s-4); align-items: center; background: var(--nec-crypt); padding: var(--s-3) var(--s-4); }
.histo-date { color: var(--nec-ash); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.histo-nom  { font-weight: 600; }
.histo-val  { color: var(--nec-ember); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.histo-val.moins { color: var(--nec-gone); }

.etat-vide { color: var(--nec-ash); border: 1px dashed var(--nec-stone); border-radius: var(--r-lg); padding: var(--s-8); text-align: center; }
.etat-vide h1 { color: var(--nec-bone); }

/* --- vote ----------------------------------------------------------------- */
.vote-grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-8); align-items: start; }
.vote-carte { position: relative; overflow: hidden; border: 1px solid var(--nec-stone); border-radius: var(--r-xl); background: rgba(23,16,33,.85); padding: var(--s-8); box-shadow: var(--sh-3); }
.vote-carte::before { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(5,176,190,.35), transparent 70%); filter: blur(10px); pointer-events: none; animation: respire 6s ease-in-out infinite; }
.vote-ogrine { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.vote-ogrine img { width: 72px; height: 72px; filter: drop-shadow(0 0 18px rgba(5,176,190,.55)); animation: flotte 5s ease-in-out infinite; }
.vote-ogrine b { font-family: var(--nec-display); font-size: 2.6rem; line-height: 1; color: var(--nec-bone); }
.vote-ogrine span { display: block; font-size: var(--t-small); color: var(--nec-ash); letter-spacing: .1em; text-transform: uppercase; }
.vote-statut { margin: var(--s-6) 0; padding: var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--nec-stone); background: rgba(13,9,18,.6); font-size: var(--t-small); color: var(--nec-ash); }
.vote-statut.ok { border-color: var(--nec-alive); color: var(--nec-bone); background: rgba(78,158,106,.12); }
.vote-statut.attente { border-color: rgba(155,77,224,.6); color: var(--nec-bone); }
.vote-statut.erreur { border-color: var(--nec-gone); color: var(--nec-bone); }
.vote-compte { font-family: var(--nec-display); font-size: 1.6rem; color: var(--nec-ember); font-variant-numeric: tabular-nums; }
.vote-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.vote-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); }
.vote-stats div { padding: var(--s-3) var(--s-4); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(13,9,18,.5); }
.vote-stats b { display: block; font-family: var(--nec-display); font-size: 1.6rem; color: var(--nec-ember); font-variant-numeric: tabular-nums; line-height: 1.1; }
.vote-stats span { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--nec-ash); }
.vote-etapes { counter-reset: e; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.vote-etapes li { counter-increment: e; display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(23,16,33,.6); }
.vote-etapes li::before { content: counter(e); flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-family: var(--nec-display); color: var(--nec-void); background: var(--nec-ember); box-shadow: var(--sh-glow); }
.vote-etapes b { display: block; }
.vote-etapes p { margin: 0; color: var(--nec-ash); font-size: var(--t-small); }
.vote-illu { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--nec-stone); aspect-ratio: 4/3; margin-top: var(--s-6); }
.vote-illu img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 36s ease-in-out infinite alternate; }
.vote-illu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13,9,18,.9)); }
.vote-illu figcaption { position: absolute; left: var(--s-4); bottom: var(--s-4); font-family: var(--nec-display); color: var(--nec-bone); text-shadow: 0 2px 10px rgba(0,0,0,.8); }

/* Confettis violets + ambre au moment du remerciement (JS). */
.confetti { position: fixed; inset: 0; z-index: 90; pointer-events: none; }

/* --- télécharger --------------------------------------------------------- */
.dl-grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-8); align-items: center; }
.dl-ferme { position: relative; border: 1px solid var(--nec-stone); border-left: 3px solid var(--nec-ember); border-radius: var(--r-lg); background: rgba(23,16,33,.85); padding: var(--s-6); margin: var(--s-6) 0; }
.dl-ferme-titre { font-family: var(--nec-display); font-size: var(--t-h3); color: var(--nec-bone); margin: 0 0 var(--s-3); display: flex; align-items: center; gap: var(--s-3); }
.badge-bientot { font-family: var(--nec-text); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--nec-void); background: var(--nec-ember); border-radius: var(--r-pill); padding: 2px 10px; animation: pouls-ambre 2.4s ease-in-out infinite; }
@keyframes pouls-ambre { 0%,100% { box-shadow: 0 0 0 0 rgba(217,146,58,.5); } 50% { box-shadow: 0 0 0 8px rgba(217,146,58,0); } }
.dl-ferme p:last-child { margin-bottom: 0; }
.dl-illu { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid rgba(155,77,224,.35); box-shadow: var(--sh-3), var(--sh-aura); aspect-ratio: 16/9; }
.dl-illu img, .dl-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-illu img { animation: kenburns 30s ease-in-out infinite alternate; }
/* Le même cadre sert à la vidéo du launcher le jour où elle arrive. */
.dl-video { border-radius: var(--r-xl); border: 1px solid rgba(155,77,224,.35); box-shadow: var(--sh-3), var(--sh-aura); aspect-ratio: 16/9; }
.meta-dl { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-8); }
.meta-dl li { display: flex; flex-direction: column; }
.meta-dl span { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--nec-ash); }
.meta-dl b { font-variant-numeric: tabular-nums; }

/* --- compte à rebours de l'alpha (page de téléchargement) ---------------- */
.dl-alpha { position: relative; border: 1px solid var(--nec-stone); border-left: 3px solid var(--nec-ember); border-radius: var(--r-lg);
            background: rgba(23,16,33,.85); padding: var(--s-6); margin: var(--s-6) 0; overflow: hidden; }
.dl-alpha::before { content: ""; position: absolute; inset: auto -20% -70% 30%; height: 180%; border-radius: 50%;
                    background: radial-gradient(circle, rgba(217,146,58,.16), transparent 70%); pointer-events: none; }
.dl-alpha-titre { position: relative; font-family: var(--nec-display); font-size: var(--t-h3); color: var(--nec-bone); margin: 0; }
.dl-alpha-date { position: relative; margin: var(--s-2) 0 0; color: var(--nec-ember); font-size: var(--t-small); letter-spacing: .04em; }
.dl-alpha-compteur { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); max-width: 520px; }
.dl-alpha-compteur div { display: flex; flex-direction: column; align-items: center; text-align: center;
                         padding: var(--s-4) var(--s-2); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(12,8,18,.65); }
.dl-alpha-compteur b { font-family: var(--nec-display); font-size: clamp(1.5rem, 6vw, 2.4rem); color: var(--nec-ember);
                       /* Sans chiffres de largeur fixe, les secondes font
                          sautiller toute la ligne à chaque tic. */
                       font-variant-numeric: tabular-nums; line-height: 1; }
.dl-alpha-compteur span { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--nec-ash); margin-top: var(--s-2); }
/* Ouvert : l'accent passe au violet et le halo s'éteint — le bloc cesse
   d'attirer l'œil une fois qu'il n'annonce plus rien à attendre. */
.dl-alpha-ouvert { border-left-color: var(--nec-violet); }
.dl-alpha-ouvert::before { background: radial-gradient(circle, rgba(155,77,224,.14), transparent 70%); }
.dl-alpha-ouvert .dl-alpha-date { color: var(--nec-violet); }
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.etapes li { position: relative; counter-increment: etape; background: var(--nec-crypt); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); padding: var(--s-6); overflow: hidden;
             transition: border-color var(--d-base), transform var(--d-base) var(--e-out); }
.etapes li:hover { border-color: rgba(155,77,224,.6); transform: translateY(-3px); }
.etapes li::before { content: counter(etape); display: block; font-family: var(--nec-display); font-size: 1.5rem; color: var(--nec-ember); margin-bottom: var(--s-2); }
.etapes li::after { content: counter(etape); position: absolute; right: -6px; bottom: -22px; font-family: var(--nec-display); font-size: 6rem; color: rgba(155,77,224,.08); line-height: 1; }
.etapes b { display: block; margin-bottom: var(--s-1); }
.etapes p { margin: 0; color: var(--nec-ash); font-size: var(--t-small); }

/* --- classements --------------------------------------------------------- */
.classement-barre { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.onglets { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.onglet { font-family: var(--nec-display); font-size: .9375rem; letter-spacing: .04em; background: rgba(23,16,33,.6); border: 1px solid var(--nec-stone); border-radius: var(--r-md);
          color: var(--nec-ash); padding: var(--s-2) var(--s-4); min-height: 40px; cursor: pointer; transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast); }
.onglet:hover { color: var(--nec-bone); border-color: var(--nec-violet); }
.onglet.actif { color: var(--nec-void); background: var(--nec-ember); border-color: var(--nec-ember); box-shadow: var(--sh-glow); }
.recherche input { background: var(--nec-crypt); border: 1px solid var(--nec-stone); border-radius: var(--r-md); color: var(--nec-bone); font-family: inherit; padding: var(--s-2) var(--s-4); min-height: 40px; min-width: 240px; }
.recherche input:focus { border-color: var(--nec-ember); outline: none; }

.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--s-4); align-items: end; margin-bottom: var(--s-8); }
.podium:empty { display: none; }
.podium-place { position: relative; text-align: center; padding: var(--s-8) var(--s-4) var(--s-6); border: 1px solid var(--nec-stone); border-radius: var(--r-xl); background: linear-gradient(180deg, rgba(36,26,51,.8), rgba(23,16,33,.9)); overflow: hidden;
                transition: transform var(--d-base) var(--e-out); }
.podium-place:hover { transform: translateY(-4px); }
.podium-place::before { content: ""; position: absolute; left: 50%; top: -60px; width: 220px; height: 220px; transform: translateX(-50%); border-radius: 50%; filter: blur(24px); pointer-events: none;
                        background: radial-gradient(closest-side, var(--halo, rgba(155,77,224,.4)), transparent 70%); }
.podium-1 { --halo: rgba(217,146,58,.5); order: 2; padding-top: var(--s-12); border-color: rgba(217,146,58,.5); }
.podium-2 { --halo: rgba(163,155,176,.4); order: 1; }
.podium-3 { --halo: rgba(181,80,63,.4); order: 3; }
.podium-rang { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-family: var(--nec-display); font-size: var(--t-small); letter-spacing: .1em; color: var(--nec-ember); }
.podium-1 .podium-rang { font-size: 1.4rem; }
.podium-1 .podium-rang::before { content: "♛ "; }
.podium-icone { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: var(--s-3) auto var(--s-3); border: 3px solid var(--nec-stone); background: var(--nec-void); box-shadow: 0 0 22px var(--halo, rgba(155,77,224,.4)); }
.podium-1 .podium-icone { width: 108px; height: 108px; border-color: var(--nec-ember); }
.podium-icone.vide { display: grid; place-items: center; font-family: var(--nec-display); font-size: 2rem; color: var(--nec-ash); }
.podium-nom { font-family: var(--nec-display); font-size: 1.125rem; color: var(--nec-bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Classements d'équipe (Songes, Vagues Infinies) */
.filtre-equipe { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-6); }
.filtre-equipe .puce { font: inherit; font-size: var(--t-small); padding: var(--s-1) var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--nec-stone); background: rgba(23,16,33,.6); color: var(--nec-ash); cursor: pointer; transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast); }
.filtre-equipe .puce:hover { color: var(--nec-bone); border-color: var(--nec-violet); }
.filtre-equipe .puce.actif { color: var(--nec-bone); border-color: var(--nec-violet); background: color-mix(in srgb, var(--nec-violet) 28%, var(--nec-crypt)); box-shadow: 0 0 12px color-mix(in srgb, var(--nec-violet) 35%, transparent); }
.filtre-equipe .puce:focus-visible { outline: 2px solid var(--nec-ember); outline-offset: 2px; }
.cl-equipe { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.cl-membre { display: inline-flex; align-items: center; gap: var(--s-2); }
.cl-equipe .cl-classe { width: 28px; height: 28px; }
.podium-equipe { display: flex; justify-content: center; gap: var(--s-1); margin: var(--s-3) 0; }
.podium-icone.petite { width: 52px; height: 52px; margin: 0; border-width: 2px; }
.podium-1 .podium-icone.petite { width: 60px; height: 60px; }
.podium-membres { display: flex; flex-direction: column; gap: 2px; white-space: normal; font-size: 1rem; }
.podium-membres .cl-classe { display: none; }
.podium-val { color: var(--nec-ember); font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 600; }
.podium-detail { color: var(--nec-ash); font-size: var(--t-small); }

.classement { display: grid; gap: 1px; background: var(--nec-stone); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); overflow: hidden; }
.cl-ligne { display: grid; grid-template-columns: 64px 1fr 120px 180px; align-items: center; gap: var(--s-4); background: var(--nec-crypt); padding: var(--s-3) var(--s-4); transition: background var(--d-fast); }
.cl-ligne:not(.tete):hover { background: var(--nec-stone); }
.cl-ligne.tete { background: var(--nec-void); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--nec-ash); }
.cl-rang { font-family: var(--nec-display); color: var(--nec-ember); font-variant-numeric: tabular-nums; }
.cl-nom { font-weight: 600; }
.cl-niveau { font-variant-numeric: tabular-nums; }
.cl-detail { color: var(--nec-ash); font-size: var(--t-small); }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-8); color: var(--nec-ash); font-size: var(--t-small); }

/* --- wiki ---------------------------------------------------------------- */
.recherche-large { display: block; margin: var(--s-6) 0 var(--s-12); }
.recherche-large input { width: 100%; max-width: 560px; min-height: 48px; font-size: 1rem; }
/* Chapitres : un grand titre Cinzel, le nombre de fiches en pastille, une
   accroche — puis des cartes ILLUSTRÉES qu'on a envie d'ouvrir : couverture
   16:10 en lent mouvement, numéro et chapitre posés dessus, titre net, et un
   « Lire la fiche » dont la flèche part au survol. */
.wiki-cat { margin-bottom: var(--s-24); }
.wiki-cat-tete { margin-bottom: var(--s-8); padding-bottom: var(--s-4); border-bottom: 1px solid var(--nec-stone); position: relative; }
.wiki-cat-tete::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 1px; background: linear-gradient(90deg, var(--nec-ember), transparent); box-shadow: 0 0 12px rgba(217,146,58,.5); }
.wiki-cat-tete h2 { font-size: var(--t-h2); margin: 0; display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.wiki-cat-nb { font-family: var(--nec-text); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--nec-ash); border: 1px solid var(--nec-stone); border-radius: var(--r-pill); padding: 3px 12px; }
.wiki-cat-tete p { margin: var(--s-2) 0 0; color: var(--nec-ash); max-width: 70ch; }

.wiki-grille { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.wiki-fiche { position: relative; display: flex; flex-direction: column; background: var(--nec-crypt); border: 1px solid var(--nec-stone); border-radius: var(--r-xl); overflow: hidden; color: inherit; text-decoration: none;
              transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out), box-shadow var(--d-base); }
.wiki-fiche:hover { border-color: rgba(155,77,224,.75); transform: translateY(-6px); text-decoration: none; box-shadow: var(--sh-aura), var(--sh-3); }
.wiki-vignette { aspect-ratio: 16/10; background: radial-gradient(120% 90% at 50% 0%, #2A1B3D, var(--nec-void)); overflow: hidden; position: relative; }
.wiki-vignette img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: kenburns 38s ease-in-out infinite alternate; transition: transform .8s var(--e-out); }
.wiki-fiche:hover .wiki-vignette img { animation-play-state: paused; transform: scale(1.1); }
.wiki-vignette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,9,18,.25) 0%, transparent 35%, rgba(23,16,33,.95) 100%); }
.wiki-num, .wiki-chip { position: absolute; top: 12px; z-index: 1; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-pill); padding: 3px 10px; background: rgba(13,9,18,.75); backdrop-filter: none; }
.wiki-num { left: 12px; font-family: var(--nec-display); color: var(--nec-ember); border: 1px solid rgba(217,146,58,.5); }
.wiki-chip { right: 12px; color: var(--nec-bone); border: 1px solid rgba(155,77,224,.5); }
.wiki-fiche-corps { padding: var(--s-4) var(--s-6) var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; margin-top: -28px; position: relative; z-index: 1; }
.wiki-fiche h3 { font-size: 1.25rem; margin: 0; color: var(--nec-bone); text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.wiki-fiche p { margin: 0; font-size: var(--t-small); color: var(--nec-ash); flex: 1; }
.wiki-lire { color: var(--nec-ember); font-family: var(--nec-display); font-size: var(--t-small); letter-spacing: .06em; margin-top: var(--s-2); display: inline-flex; align-items: center; gap: 6px; }
.wiki-lire::after { content: "→"; transition: transform var(--d-base) var(--e-out); }
.wiki-fiche:hover .wiki-lire::after { transform: translateX(6px); }

/* Page de fiche : le texte et, à droite, le sommaire du chapitre. */
.guide-grille { display: grid; grid-template-columns: minmax(0, 70ch) 300px; gap: var(--s-16); align-items: start; padding-bottom: var(--s-24); }
.guide-grille .article-corps { padding-bottom: 0; }
.guide-nav { position: sticky; top: calc(var(--entete-h) + var(--s-6)); border: 1px solid var(--nec-stone); border-radius: var(--r-xl); background: rgba(23,16,33,.85); padding: var(--s-6); margin-top: var(--s-8); }
.guide-nav-tete { margin-bottom: var(--s-4); }
.guide-nav-tete .sur { display: block; font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--nec-ember); }
.guide-nav-tete b { font-family: var(--nec-display); font-size: 1.125rem; }
.guide-liste { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: 2px; }
.guide-liste a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); color: var(--nec-ash); font-size: var(--t-small); transition: background var(--d-fast), color var(--d-fast); }
.guide-liste a:hover { background: var(--nec-stone); color: var(--nec-bone); text-decoration: none; }
.guide-liste img { width: 44px; height: 28px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--nec-stone); flex: none; }
.guide-liste .actif a { background: rgba(155,77,224,.18); color: var(--nec-bone); border-left: 2px solid var(--nec-ember); }
.article-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid var(--nec-stone); }
.prevnext { display: flex; flex-direction: column; gap: 4px; padding: var(--s-4) var(--s-6); border: 1px solid var(--nec-stone); border-radius: var(--r-lg); background: rgba(23,16,33,.7); color: inherit; transition: border-color var(--d-base), transform var(--d-base) var(--e-out); }
.prevnext:hover { border-color: rgba(155,77,224,.7); transform: translateY(-2px); text-decoration: none; }
.prevnext span { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--nec-ember); }
.prevnext b { font-family: var(--nec-display); font-weight: 600; color: var(--nec-bone); }
.prevnext.next { text-align: right; align-items: flex-end; }

/* --- apparition au scroll ----------------------------------------------- */
.apparait { opacity: 1; transform: none; transition: opacity .6s var(--e-out), transform .6s var(--e-out); }
.js .apparait { opacity: 0; transform: translateY(22px); }
.js .apparait.vu { opacity: 1; transform: none; }
.js .apparait-gauche { transform: translateX(-30px); }
.js .apparait-gauche.vu { transform: none; }

/* =========================================================================
   MOBILE (refonte du 08/10/2026)
   -------------------------------------------------------------------------
   Vérifié à 360, 390, 414 et 768 px (émulation d'appareil, Puppeteer) et à
   1400 px pour l'ordinateur, qui ne doit rien voir changer. Règles tenues
   partout :
   - aucun défilement horizontal de la PAGE : ce qui est large (tableaux du
     wiki, onglets du classement) défile dans sa propre boîte ;
   - gouttière d'au moins 16 px, respectant l'encoche en paysage ;
   - corps de texte à 16 px, petits textes à 15 px, champs à 16 px (sinon iOS
     zoome sur le champ touché) ;
   - cibles tactiles d'au moins 44 px.
   ========================================================================= */

/* --- tablette et moins --------------------------------------------------- */
@media (max-width: 960px) {
    .feature-large { grid-column: auto; }
    .feature-large .feature-image { aspect-ratio: 16/10; }
    .guildes, .vote-grille, .dl-grille, .demo-grille { grid-template-columns: minmax(0, 1fr); }
    .pied-grille { grid-template-columns: 1fr 1fr; }
    .carte-formulaire { grid-template-columns: 1fr; max-width: 520px; }
    .carte-illu { min-height: 160px; }
}
/* Tablette : la démo sur deux colonnes (sort | Nécromisation), l'arène dessous,
   plutôt que trois blocs de 700 px de large empilés. */
@media (min-width: 601px) and (max-width: 960px) {
    .demo-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .demo-arene { grid-column: 1 / -1; }
}

/* --- téléphone et tablette en portrait ----------------------------------- */
@media (max-width: 860px) {
    :root {
        --barre-h: 60px;
        /* L'en-tête occupe sa place dans le flux : le haut des pages n'a plus
           à lui en réserver une seconde (c'était 134 px de vide sous lui). */
        --entete-decalage: 0px;
        --t-small: .9375rem;
        --t-label: .8125rem;
    }

    /* En-tête collé en haut de l'écran : le menu reste à portée du pouce
       pendant toute la lecture. Opaque une fois la page défilée, sans flou :
       un flou derrière une barre collée se recalcule à chaque image du décor
       animé, et un téléphone le paie au défilement. */
    .entete { position: sticky; top: 0; }
    .entete.pose { background: var(--nec-void); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
    .entete > .conteneur { gap: var(--s-3); }
    .marque img { height: 32px; }
    .marque { display: flex; align-items: center; min-height: 44px; }

    .burger { display: inline-flex; }
    /* Le panneau du menu pend SOUS la barre (et non plus à une hauteur fixe
       de l'écran), et défile lui-même s'il est plus haut que l'écran
       (téléphone en paysage). */
    .nav { position: absolute; top: 100%; left: 0; right: 0;
           flex-direction: column; align-items: stretch; gap: 0;
           max-height: calc(100vh - var(--barre-h)); max-height: calc(100dvh - var(--barre-h));
           overflow-y: auto; overscroll-behavior: contain;
           /* Fond OPAQUE : même à 98 %, l'accroche du hero transparaissait
              sous les liens. L'ombre géante voile le reste de la page (un
              toucher dessus referme le menu) ; le clip l'empêche de remonter
              sur la barre et sa croix. */
           background: linear-gradient(180deg, #140d1d, var(--nec-void)); border-bottom: 1px solid var(--nec-stone);
           box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 100vmax rgba(5,3,8,.6); clip-path: inset(0 0 -100vmax 0);
           padding: var(--s-2) var(--gouttiere-d) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)) var(--gouttiere-g);
           margin-left: 0; display: none; }
    .nav.ouvert { display: flex; }
    .nav > a { padding: var(--s-4) var(--s-1); min-height: 52px; border-bottom: 1px solid var(--nec-stone); font-size: 1.0625rem; color: var(--nec-bone); }
    .nav > a::after { display: none; }
    .nav > a[aria-current="page"] { color: var(--nec-ember); }
    .nav-ogrine { width: 18px; height: 18px; }
    .nav-actions { margin: var(--s-6) 0 0; flex-wrap: wrap; gap: var(--s-3); }
    .nav-actions .btn { flex: 1 1 140px; width: auto; min-height: 48px; }
    .nav-actions .btn-icone { padding-inline: var(--s-4); }
    .nav-libelle { display: inline; }
    .btn-compte { max-width: none; }

    /* --- accueil --- */
    .hero { min-height: 0; padding-block: var(--s-8) 112px; }
    .hero-texte { max-width: none; }
    .hero-aura { width: 90vw; height: 300px; }
    .hero-logo { margin-bottom: var(--s-4); }
    .hero-logo img { width: min(100%, 360px); }
    .hero-accroche { margin-bottom: var(--s-6); }
    /* Pleine largeur sur téléphone, côte à côte dès qu'il y a la place (tablette). */
    .hero-boutons .btn { flex: 1 1 220px; }
    .hero-scroll { display: none; }
    /* Les Dofus Nécrom quittent le ciel pour une rangée sous le texte :
       posés en haut à droite, ils couvraient l'accroche et le bouton « Jouer
       maintenant », et prenaient le toucher à sa place. Décor seulement ici :
       leur infobulle de 300 px sortirait de l'écran. */
    .hero-dofus { z-index: 2; }
    .hero-dofus .dofus { pointer-events: none; top: auto; bottom: 26px; width: 56px; height: 56px; }
    .hero-dofus .dofus:nth-child(1) { left: calc(50% - 142px); }
    .hero-dofus .dofus:nth-child(2) { left: calc(50% - 66px); }
    .hero-dofus .dofus:nth-child(3) { left: calc(50% + 10px); }
    .hero-dofus .dofus:nth-child(4) { left: calc(50% + 86px); }
    .hero-dofus .bulle { display: none; }
    .hero-puces li { padding: 5px 12px; }

    .section { padding-block: var(--s-12); }
    .section-titre { margin-bottom: var(--s-6); }
    .etat { margin-top: var(--s-4); gap: var(--s-2) var(--s-6); padding: var(--s-3) var(--s-4); }
    .bande { min-height: 0; padding-block: var(--s-16); }
    .bande-voile { background: linear-gradient(180deg, var(--nec-void) 0%, rgba(13,9,18,.7) 30%, rgba(13,9,18,.7) 70%, var(--nec-void) 100%); }
    .taux { gap: var(--s-3); }
    .taux div { padding: var(--s-4) var(--s-3); }
    .taux b { font-size: 2rem; }
    .feature-corps { padding: var(--s-4) var(--s-4) var(--s-6); }

    /* Démo : colonnes moins rembourrées, pastille de points d'un bloc. */
    .demo-col { padding: var(--s-4); }
    .demo-tete { flex-wrap: wrap; font-size: 1rem; }
    .demo-tete em { white-space: nowrap; }
    .demo-ligne { padding: var(--s-2); }
    .demo-poutch img { max-width: 100%; }
    .demo-actions .btn { flex: 1 1 auto; }

    /* Boss de Guilde : l'infobulle (jamais affichée, cf. rapport du 08/10)
       restait dans la mise en page et élargissait la page de 50 px. */
    /* Le halo du percepteur faisait 360 px, et l'animation « respire » le
       porte à ×1,08 : à son pic, il dépassait l'écran d'un téléphone de
       360-375 px — Chrome dézoomait alors toute la page de quelques pixels. */
    .guildes-illu::before { width: min(360px, 75vw); height: min(360px, 75vw); }
    .boss { gap: var(--s-2); }
    .boss-item { padding: var(--s-2) var(--s-3); gap: var(--s-2); }
    .boss-item > img { width: 44px; height: 44px; }
    .boss-item .bulle { display: none; }
    .boss-item:hover, .boss-item:focus-within { transform: none; }

    /* --- pages intérieures --- */
    .page-tete { padding-block: 40px var(--s-8); }
    .page-tete p { font-size: 1rem; }
    .page-corps { padding-block: var(--s-6) var(--s-16); }

    /* --- classements --- */
    /* nowrap : dans une colonne flex À PLUSIEURS LIGNES, la ligne prend la
       largeur naturelle de son plus large enfant — la rangée d'onglets
       (980 px) élargissait toute la page. Sur une seule ligne, elle prend
       celle de l'écran et les onglets défilent dedans. */
    .classement-barre { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--s-3); }
    .classement-barre > * { min-width: 0; }
    /* Onglets : une seule rangée qui défile au doigt (8 onglets), plutôt que
       trois lignes de boutons de largeurs inégales. Le fondu des bords dit
       qu'il y a une suite. */
    .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
               margin-inline: calc(-1 * var(--gouttiere-g)) calc(-1 * var(--gouttiere-d));
               padding: 2px var(--gouttiere-d) 6px var(--gouttiere-g); scroll-padding-inline: var(--gouttiere-g);
               -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 28px), transparent);
               mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 28px), transparent); }
    .onglets::-webkit-scrollbar { display: none; }
    .onglet { flex: none; scroll-snap-align: start; min-height: 44px; white-space: nowrap; }
    .recherche input { width: 100%; min-width: 0; min-height: 48px; font-size: 1rem; }
    .filtre-equipe { gap: var(--s-2); }
    .filtre-equipe .puce { min-height: 44px; padding-inline: var(--s-4); }

    /* Podium : trois marches côte à côte (et non trois grandes cartes
       empilées qui repoussaient le classement d'un écran). */
    .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); margin-bottom: var(--s-6); }
    .podium-place { padding: var(--s-8) var(--s-2) var(--s-4); }
    /* Posé en absolu à 50 % : sans nowrap, « ♛ 1er » n'a que la moitié de la
       marche et se coupe sur deux lignes, par-dessus le portrait. */
    .podium-rang { white-space: nowrap; }
    .podium-1 { padding-top: var(--s-12); }
    .podium-place::before { width: 160px; height: 160px; }
    .podium-icone { width: 60px; height: 60px; }
    .podium-1 .podium-icone { width: 76px; height: 76px; }
    .podium-nom { font-size: 1rem; }
    .podium-val { font-size: 1.05rem; }
    .podium-detail { font-size: var(--t-label); overflow-wrap: anywhere; }
    .podium-equipe { flex-wrap: wrap; gap: 4px; }
    .podium-icone.petite, .podium-1 .podium-icone.petite { width: 34px; height: 34px; }
    .podium-membres { align-items: center; font-size: .875rem; }
    .podium-membres > .cl-membre { max-width: 100%; min-width: 0; }
    .podium-membres > .cl-membre > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Tablette : le tableau à quatre colonnes tient encore, en plus serré. */
    .cl-ligne { grid-template-columns: 48px minmax(0, 1fr) 110px 150px; gap: var(--s-3); }
    .cl-nom { min-width: 0; overflow-wrap: anywhere; }
    .cl-equipe { gap: var(--s-1) var(--s-3); }

    /* --- compte --- */
    .compte-banniere { padding: var(--s-6) var(--s-4); min-height: 180px; }
    .compte-entete h1 { font-size: clamp(1.5rem, 7vw, 2rem); gap: var(--s-3); min-width: 0; }
    .compte-entete h1 > span { min-width: 0; overflow-wrap: anywhere; }
    .compte-portrait { width: 64px; height: 64px; }
    .compte-chiffres, .parrainage-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
    .compte-chiffres div, .parrainage-chiffres div { padding: var(--s-4); min-width: 0; }
    .compte-chiffres b { font-size: 1.6rem; }
    .compte-chiffres .btn { padding-inline: 10px; font-size: .875rem; letter-spacing: .03em; white-space: nowrap; }
    .parrainage { padding: var(--s-4); }
    .parrainage-code strong { letter-spacing: .18em; }
    .perso { padding: var(--s-3); gap: var(--s-3); }
    .perso > div:not(.perso-niveau) { min-width: 0; overflow-wrap: anywhere; }
    .perso-illu { width: 56px; height: 56px; }
    .histo-ligne { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date date" "nom val"; gap: var(--s-1) var(--s-3); }
    .histo-date { grid-area: date; } .histo-nom { grid-area: nom; min-width: 0; } .histo-val { grid-area: val; }

    /* --- formulaires --- */
    .formulaire-page { min-height: 0; padding-block: var(--s-6) var(--s-12); }
    .carte-corps { padding: var(--s-6) var(--s-4); }
    .carte-intro { margin-bottom: var(--s-6); }
    .champ { margin-bottom: var(--s-5); }
    .champ input { min-height: 48px; font-size: 1rem; }
    .champ small { font-size: .8125rem; }
    .oeil { width: 44px; height: 44px; }

    /* --- vote, téléchargement --- */
    .vote-carte { padding: var(--s-6) var(--s-4); }
    .vote-ogrine img { width: 56px; height: 56px; }
    .vote-ogrine b { font-size: 2.2rem; }
    .vote-actions .btn { flex: 1 1 200px; }
    .vote-stats { grid-template-columns: 1fr 1fr; }
    .vote-etapes li { padding: var(--s-3); gap: var(--s-3); }
    .vote-illu { margin-inline: 0; }
    .dl-alpha, .dl-ferme { padding: var(--s-4); }
    .dl-bouton { width: 100%; }
    .meta-dl { gap: var(--s-4) var(--s-8); }
    .etapes { gap: var(--s-3); }
    .etapes li { padding: var(--s-4); }

    /* --- article et fiche du wiki --- */
    .article-tete { padding-block: var(--s-6) var(--s-6); }
    .article-retour { margin-bottom: var(--s-3); }
    .article-retour a { display: inline-flex; align-items: center; min-height: 44px; }
    .article-entete h1 { font-size: clamp(1.75rem, 7.5vw, 2.25rem); overflow-wrap: break-word; }
    .article-chapo { font-size: 1.0625rem; }
    /* minmax(0, 1fr) et non 1fr : une piste « 1fr » prend la largeur
       minimale de son contenu, donc celle du plus large tableau — la fiche
       entière débordait (591 px de large pour un écran de 360). */
    .guide-grille { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
    .article-corps { min-width: 0; padding-block: var(--s-6) var(--s-12); }
    .article-corps h2 { margin-top: var(--s-8); padding-top: var(--s-4); overflow-wrap: break-word; }
    .article-corps h3 { overflow-wrap: break-word; }
    .article-corps h2 .icone-objet { width: 44px; height: 44px; margin: -8px 10px -6px 0; }
    .article-corps ul { padding-left: var(--s-5); }
    .encart { padding: var(--s-3) var(--s-4); }
    .article-corps blockquote { padding-left: var(--s-4); }
    .guide-nav { position: static; padding: var(--s-4); margin-top: 0; }
    .guide-liste a { min-height: 44px; }
    .article-prevnext { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-8); }
    .prevnext.next { text-align: left; align-items: flex-start; }

    /* Tableaux : ombres aux bords quand il reste de quoi défiler (fonds
       « local » qui suivent le contenu, ombres « scroll » qui restent au
       bord), petits tableaux qui passent à la ligne, grands tableaux à
       première colonne figée. */
    .article-table {
        background:
            linear-gradient(90deg, var(--nec-crypt) 30%, rgba(23,16,33,0)) left / 40px 100% no-repeat local,
            linear-gradient(270deg, var(--nec-crypt) 30%, rgba(23,16,33,0)) right / 40px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.6), transparent) left / 14px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.6), transparent) right / 14px 100% no-repeat scroll,
            var(--nec-crypt);
        -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    }
    .article-table table { font-size: .875rem; }
    .article-table th, .article-table td { padding: var(--s-2); }
    /* Toutes les cellules passent à la ligne (les nombres, eux, sont
       insécables : cf. insecablesTableau dans landing.go) ; la plupart des
       tableaux tiennent alors dans l'écran sans défiler. */
    .article-table td { white-space: normal; }
    .article-table:is([data-colonnes="2"], [data-colonnes="3"], [data-colonnes="4"]) td:first-child { min-width: 7.5em; }
    .article-table:not([data-colonnes="2"], [data-colonnes="3"], [data-colonnes="4"]) :is(th, td):first-child {
        position: sticky; left: 0; z-index: 1; min-width: 0; box-shadow: 1px 0 0 var(--nec-stone), 6px 0 10px -6px rgba(0,0,0,.7); }
    .article-table:not([data-colonnes="2"], [data-colonnes="3"], [data-colonnes="4"]) td:first-child { background: var(--nec-crypt); }
    .article-table:not([data-colonnes="2"], [data-colonnes="3"], [data-colonnes="4"]) th:first-child { background: color-mix(in srgb, var(--nec-violet) 14%, var(--nec-crypt)); }
    .parrainage-liste { -webkit-overflow-scrolling: touch; }

    /* --- pied --- */
    .pied { padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); }
    .pied-grille { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); }
    .pied-logo { grid-column: 1 / -1; }
    .pied ul { gap: 0; }
    .pied li a { display: inline-flex; align-items: center; min-height: 44px; }
    .pied-bas { flex-direction: column; gap: var(--s-2); }

    /* Filet de sécurité : un décor animé qui déborde de quelques pixels ne
       doit jamais élargir la page (Chrome mobile dézoome alors TOUT le site).
       `clip` et non `hidden` : ne crée pas de boîte de défilement, donc ne
       casse ni `position: sticky` ni le défilement vertical. Ce qui doit
       défiler en largeur (tableaux, onglets) le fait dans sa propre boîte. */
    body > main, body > .pied { overflow-x: clip; }

    /* --- performances : un téléphone n'anime que l'essentiel --- */
    .lueur-3, .fumee-2 { display: none; }
    .lueur { filter: blur(40px); }
    .wiki-vignette img, .carte-illu img, .compte-banniere-fond img, .vote-illu img, .dl-illu img { animation: none; }
}

/* --- petit téléphone ------------------------------------------------------ */
@media (max-width: 600px) {
    /* « Bonjour <pseudo> » : le portrait passe au-dessus, le nom a toute la
       ligne (un pseudo de 15 lettres en Cinzel ne tenait pas à côté). */
    .compte-entete h1 { flex-direction: column; align-items: flex-start; }

    /* Classement : rang | nom … valeur, puis le détail sous le nom. */
    .cl-ligne.tete { display: none; }
    .cl-ligne { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "rang nom niveau" "rang detail detail";
                gap: 2px var(--s-3); padding: var(--s-3) var(--s-4); }
    .cl-rang { grid-area: rang; align-self: start; font-size: 1.125rem; line-height: 1.5; }
    .cl-nom { grid-area: nom; }
    .cl-niveau { grid-area: niveau; justify-self: end; align-self: start; text-align: right; white-space: nowrap; color: var(--nec-ember); font-weight: 600; }
    .cl-detail { grid-area: detail; }

    .podium-place::before { width: 120px; height: 120px; }
    .podium-icone { width: 52px; height: 52px; }
    .podium-1 .podium-icone { width: 64px; height: 64px; }
    .podium-1 .podium-rang { font-size: 1.125rem; }
    .podium-nom { font-size: .9375rem; }
    /* Trois portraits d'équipe tiennent sur une rangée : sinon la marche
       d'un trio dépassait celle du premier. */
    .podium-icone.petite, .podium-1 .podium-icone.petite { width: 26px; height: 26px; }
    .podium-equipe { gap: 3px; }

    /* Filleuls du parrainage : chaque ligne devient une petite carte (nom,
       puis date et gain), au lieu d'un tableau à trois colonnes coupé. */
    .parrainage-liste thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .parrainage-liste table, .parrainage-liste tbody { display: block; }
    .parrainage-liste tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: var(--s-3) var(--s-4); }
    .parrainage-liste tr + tr { border-top: 1px solid rgba(255,255,255,.06); }
    .parrainage-liste td, .parrainage-liste tr + tr td { padding: 0; border: 0; }
    .parrainage-liste td:first-child { grid-column: 1 / -1; overflow-wrap: anywhere; }
    .parrainage-liste td:nth-child(2) { color: var(--nec-ash); font-size: var(--t-small); }
    .parrainage-liste td:nth-child(2):not(:empty)::before { content: "Depuis le "; }
    .parrainage-liste td:last-child { justify-self: end; }

    /* Discord : le bouton prend toute la largeur sous le texte (cible tactile). */
    .discord-lien { padding: var(--s-5) var(--s-4); }
    .discord-lien-logo { width: 44px; height: 44px; }
    .discord-lien-logo .ico { width: 24px; height: 24px; }
    .discord-lien-corps { align-items: flex-start; }
    .discord-lien-texte { flex: 1 1 0; }
    .discord-lien-actions, .discord-lien-actions form, .discord-lien-actions .btn { width: 100%; }

    /* Wiki : une fiche = une ligne illustrée (vignette à gauche, texte à
       droite). Vingt grandes cartes 16:10 faisaient onze écrans de
       défilement avant le dernier chapitre. */
    .wiki-cat { margin-bottom: var(--s-12); }
    .wiki-cat-tete { margin-bottom: var(--s-4); }
    .wiki-grille { gap: var(--s-3); }
    .wiki-fiche { flex-direction: row; align-items: stretch; border-radius: var(--r-lg); min-height: 112px; }
    .wiki-fiche:hover { transform: none; }
    .wiki-vignette { flex: none; width: 108px; aspect-ratio: auto; }
    .wiki-vignette img { position: absolute; inset: 0; }
    .wiki-vignette::after { background: linear-gradient(90deg, transparent 55%, rgba(23,16,33,.85)); }
    .wiki-chip { display: none; }
    .wiki-num { top: 8px; left: 8px; padding: 1px 8px; }
    .wiki-fiche-corps { margin-top: 0; padding: var(--s-3) var(--s-4); gap: 4px; min-width: 0; }
    .wiki-fiche h3 { font-size: 1.0625rem; text-shadow: none; overflow-wrap: break-word; }
    .wiki-fiche p { flex: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .wiki-lire { margin-top: 2px; }
}

/* --- écran tactile (quelle que soit sa largeur) --------------------------- */
@media (pointer: coarse) {
    .demo-pm { gap: 4px; }
    .demo-pm button { width: 44px; height: 44px; font-size: 1.25rem; }
    .demo-pm output { min-width: 36px; }
    .recherche input { font-size: 1rem; }
}
.dl-tactile { display: none; color: var(--nec-bone); border-left: 2px solid var(--nec-ember); padding-left: var(--s-3); }
@media (pointer: coarse) { .dl-tactile { display: block; } }

/* --- page introuvable (404) ------------------------------------------------ */
.introuvable { max-width: 640px; margin-inline: auto; background: rgba(23,16,33,.85); }
.introuvable-code { display: block; font-family: var(--nec-display); font-size: clamp(4rem, 18vw, 7rem); line-height: 1; color: var(--nec-ember); text-shadow: 0 0 30px rgba(155,77,224,.6); }
.introuvable h1 { font-size: var(--t-h2); margin: var(--s-4) 0 var(--s-3); }
.introuvable .hero-boutons { justify-content: center; margin-top: var(--s-6); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .js .apparait { opacity: 1; transform: none; }
    .ciel, .hero-ciel, .orage { display: none; }
    .dofus { animation: none; }
    .marquee-piste { animation: none; }
}

/* --- Bandeau d'annonce (fin d'alpha, 05/10/2026) -------------------------
   Juste au-dessus de l'en-tête, dans le flux (depuis le 08/10 : il était
   avant posé DANS l'en-tête). --entete-h reste la hauteur totale (bandeau +
   barre) : les décalages de page de l'ordinateur suivent seuls. */
:root { --bandeau-h: 40px; --entete-h: calc(var(--barre-h) + var(--bandeau-h)); }
.bandeau-annonce {
    position: relative; z-index: 101;
    height: var(--bandeau-h);
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding-inline: var(--gouttiere-g) var(--gouttiere-d);
    background: linear-gradient(90deg, #2a1240, #4a1d6e 50%, #2a1240);
    border-bottom: 1px solid rgba(155,77,224,.55);
    box-shadow: 0 2px 18px rgba(155,77,224,.35);
    color: var(--nec-bone); font-size: 15px; line-height: 1.25; text-align: center;
}
.bandeau-annonce b { color: var(--nec-ember); font-weight: 600; }
.btn-gain { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(240, 160, 64, .16); color: var(--nec-ember); font-weight: 700; font-size: .9em; }
.btn-gain .ogrine { width: 1.05em; height: 1.05em; }
#bandeau-sortie-reste { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bandeau-annonce-titre {
    font-family: var(--nec-display); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; font-size: 13px; color: #fff;
    padding: 3px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r-pill);
}
.bandeau-annonce-lien { color: var(--nec-ember); font-weight: 600; white-space: nowrap; }
.bandeau-annonce-lien:hover { text-decoration: underline; }
/* Variante « Votes doublés » (MZ 27/10, du 01/11 au 07/11/2026 ; posée par le
   gabarit selon la date, cf. vote_double.go). Même bandeau, teinte braise,
   bouton vers /vote toujours visible (y compris sur téléphone). */
.bandeau-vote-double {
    background: linear-gradient(90deg, #2a1240, #5a2350 35%, #6e2f2a 50%, #5a2350 65%, #2a1240);
    border-bottom-color: rgba(240,160,64,.55);
    box-shadow: 0 2px 18px rgba(240,160,64,.28);
}
.bandeau-vote-double .bandeau-annonce-titre { border-color: rgba(240,160,64,.6); }
.bandeau-vote-double sup { font-size: .7em; line-height: 0; }
.bandeau-vote-double-mobile { display: none; }
.bandeau-vote-double-btn {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 3px 12px; border-radius: var(--r-pill);
    background: var(--nec-ember); color: #1a0d22; font-weight: 700; white-space: nowrap;
}
.bandeau-vote-double-btn:hover { filter: brightness(1.1); }
.bandeau-vote-double-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 860px) {
    :root { --bandeau-h: 62px; }
    .bandeau-annonce { height: auto; min-height: 0; padding-block: 8px; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; }
    .bandeau-annonce-lien { display: none; }
    .bandeau-vote-double .bandeau-annonce-titre { display: none; }
    .bandeau-vote-double-mobile { display: inline; font-weight: 700; color: #fff; }
}

/* --- Bouton « Rejoindre le Discord » de l'accueil (MZ 21/10) : cyan brillant,
       halo qui respire, reflet qui balaie, particules lumineuses qui montent. --- */
.btn-discord-glow {
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; gap: 12px;
    color: #031a22; font-weight: 800; letter-spacing: .02em; border: 0;
    background: linear-gradient(135deg, #5ff6ff 0%, #12d6f0 45%, #0aa3d8 100%);
    box-shadow: 0 0 0 1px rgba(160, 250, 255, .7) inset, 0 0 18px rgba(40, 230, 255, .65), 0 0 46px rgba(20, 200, 255, .45);
    animation: bdg-respire 2.6s ease-in-out infinite;
    transition: transform .18s ease, filter .18s ease;
}
.btn-discord-glow:hover, .btn-discord-glow:focus-visible {
    transform: translateY(-2px) scale(1.03); filter: brightness(1.12) saturate(1.15); color: #021219;
}
.btn-discord-glow::before {           /* reflet qui balaie */
    content: ""; position: absolute; inset: -40% auto -40% -60%; width: 45%; z-index: 1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: skewX(-20deg); animation: bdg-reflet 3.2s ease-in-out infinite; pointer-events: none;
}
.btn-discord-glow .bdg-texte { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }
.btn-discord-glow .ico-discord { width: 1.35em; height: 1.35em; background-color: #031a22; }
.btn-discord-glow .btn-gain {       /* récompense : sans cadre, séparée par un trait */
    position: relative; z-index: 2; margin-left: 2px; padding: 0 0 0 14px;
    background: none; box-shadow: none; border-radius: 0;
    border-left: 2px solid rgba(3, 26, 34, .28);
    color: #031a22; font-size: 1.12em; font-weight: 900; gap: 5px;
}
.btn-discord-glow .btn-gain .ogrine {
    width: 1.45em; height: 1.45em;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, .95)) drop-shadow(0 0 8px rgba(255, 255, 255, .6));
}
.bdg-particules { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bdg-particules i {
    position: absolute; bottom: -8px; width: 6px; height: 6px; border-radius: 50%;
    background: #ffffff; box-shadow: 0 0 6px 2px rgba(180, 255, 255, .95), 0 0 14px 4px rgba(40, 230, 255, .7);
    opacity: 0; animation: bdg-monte 3.4s linear infinite;
}
.bdg-particules i:nth-child(1)  { left: 6%;  animation-delay: 0s;   }
.bdg-particules i:nth-child(2)  { left: 14%; animation-delay: 1.1s; width: 4px; height: 4px; }
.bdg-particules i:nth-child(3)  { left: 23%; animation-delay: 2.3s; }
.bdg-particules i:nth-child(4)  { left: 31%; animation-delay: .6s;  width: 3px; height: 3px; }
.bdg-particules i:nth-child(5)  { left: 40%; animation-delay: 1.7s; }
.bdg-particules i:nth-child(6)  { left: 49%; animation-delay: 2.8s; width: 4px; height: 4px; }
.bdg-particules i:nth-child(7)  { left: 57%; animation-delay: .3s;  }
.bdg-particules i:nth-child(8)  { left: 66%; animation-delay: 1.4s; width: 3px; height: 3px; }
.bdg-particules i:nth-child(9)  { left: 74%; animation-delay: 2.5s; }
.bdg-particules i:nth-child(10) { left: 82%; animation-delay: .9s;  width: 4px; height: 4px; }
.bdg-particules i:nth-child(11) { left: 89%; animation-delay: 2s;   }
.bdg-particules i:nth-child(12) { left: 95%; animation-delay: 3s;   width: 3px; height: 3px; }
@keyframes bdg-monte {
    0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: .9; }
    100% { transform: translate(6px, -64px) scale(1.15); opacity: 0; }
}
@keyframes bdg-respire {
    0%, 100% { box-shadow: 0 0 0 1px rgba(160, 250, 255, .7) inset, 0 0 16px rgba(40, 230, 255, .55), 0 0 38px rgba(20, 200, 255, .35); }
    50%      { box-shadow: 0 0 0 1px rgba(200, 255, 255, .9) inset, 0 0 26px rgba(60, 240, 255, .9), 0 0 70px rgba(20, 210, 255, .6); }
}
@keyframes bdg-reflet { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
    .btn-discord-glow, .btn-discord-glow::before, .bdg-particules i { animation: none; }
    .btn-discord-glow::before, .bdg-particules { display: none; }
}