/* Solar v2 (1/11), puis le soir même (propriétaire : « ça doit pas être visible que ce soit IA, comme le concurrent on dirait un
   designer ») : une mise en page sobre. Rien qui pulse, brille, tourne ou flotte en boucle, pas de halo orange, pas de texte en
   dégradé, des boutons plats ; restent la vidéo, les illustrations du client 2.40 et des apparitions discrètes au défilement.
   Couleurs : nuit bleutée et or. Police : Outfit (OFL, fonts/OFL-Outfit.txt). */
@font-face { font-family: 'Outfit'; src: url('../fonts/Outfit.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

:root {
  --nuit: #07070d; --nuit2: #0c0b15; --nuit3: #13121f; --nuit4: #1c1a2c;
  --ligne: rgba(255, 190, 100, .13); --ligne2: rgba(255, 190, 100, .28); --ligne3: rgba(255, 190, 100, .55);
  --or: #ffc65c; --or2: #f5a524; --ambre: #ff8a1f; --braise: #ff6a00; --corona: #ffe9b8;
  --texte: #f1ebe2; --texte2: #b3abb8; --texte3: #7c7589;
  --froid: #7fb2ff; --vert: #5fd38a; --rouge: #ff6159;
  --or-grad: linear-gradient(180deg, #fff3d1 0%, #ffcf6b 42%, #f39124 100%);
  --rayon: 20px; --ombre: 0 20px 50px rgba(0, 0, 0, .55);
  --titre: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --corps: 'Outfit', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --entete: 140px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { background: var(--nuit); scroll-behavior: smooth; }
html.js { scroll-behavior: auto; }
body {
  margin: 0; min-height: 100vh; color: var(--texte); font: 400 16px/1.65 var(--corps); overflow-x: hidden; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 600px at 50% -12%, rgba(255, 150, 50, .05), transparent 70%),
    var(--nuit);
}
a { color: var(--or); text-decoration: none; transition: color .2s; }
a:hover { color: var(--corona); }
h1, h2, h3 { font-family: var(--titre); font-weight: 800; color: var(--texte); margin: 0 0 .55em; letter-spacing: -.01em; line-height: 1.12; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); }
h3 { font-size: 1.15rem; }
.panel h1, .panel h2 { color: var(--or); }
img, video { max-width: 100%; }
::selection { background: rgba(255, 190, 100, .35); color: #fff; }
.or-texte, .brille { color: var(--or); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ en-tête fixe : petite barre + cadre lumineux + logo */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s, backdrop-filter .4s; }
.entete.defile { background: linear-gradient(180deg, rgba(7, 7, 13, .92), rgba(7, 7, 13, .6) 70%, transparent); backdrop-filter: blur(8px); }
.barre { max-width: 1240px; margin: 0 auto; padding: 8px 18px 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; font-size: .82rem; transition: opacity .3s, max-height .3s; max-height: 60px; }
.entete.defile .barre { opacity: 0; max-height: 0; padding-top: 0; overflow: hidden; pointer-events: none; }
.barre a, .barre button { color: var(--texte2); background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.barre a:hover, .barre button:hover { color: var(--or); }
.barre form { margin: 0; }
.barre .sep { width: 1px; height: 14px; background: var(--ligne2); }
.status-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--texte); background: rgba(12, 11, 21, .65); border: 1px solid var(--ligne2); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #888; }
.status-pill .dot.on { background: var(--vert); }
.status-pill .dot.off { background: var(--rouge); }
.langs { display: flex; gap: 2px; }
.langs a { font-weight: 700; font-size: .75rem; padding: 2px 6px; border-radius: 6px; border: 1px solid transparent; }
.langs a.on { color: var(--or); border-color: var(--ligne2); }

.nav { max-width: 1200px; margin: 0 auto; padding: 14px 18px 12px; }
.cadre { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(26, 22, 38, .82), rgba(12, 10, 20, .86)); backdrop-filter: blur(16px);
  border: 1px solid var(--ligne); box-shadow: 0 14px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); }
.nav .gauche, .nav .droite { display: flex; gap: 4px; align-items: center; }
.nav .gauche { justify-content: flex-end; }
.nav .droite { justify-content: flex-start; }
.pilule { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 14px; font: 600 .92rem var(--corps); color: var(--texte); background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition: color .25s, background .25s; }
.pilule::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; border-radius: 2px; translate: -50% 0; background: var(--or); transition: width .3s var(--ease); }
.pilule:hover, .menu:focus-within > .pilule, .menu.ouvert > .pilule { color: var(--corona); background: rgba(255, 190, 100, .07); }
.pilule:hover::after, .pilule.on::after { width: 60%; }
.pilule.on { color: var(--or); }
.pilule .fleche { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .3s; }
.menu.ouvert .fleche, .menu:hover .fleche { transform: rotate(225deg) translateY(-1px); }
.menu { position: relative; }
.menu-liste { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 240px; translate: -50% 10px; opacity: 0; visibility: hidden; transition: opacity .25s, translate .35s var(--ease), visibility .25s;
  background: rgba(14, 12, 22, .97); border: 1px solid var(--ligne2); border-radius: 18px; padding: 8px; box-shadow: var(--ombre); backdrop-filter: blur(14px); }
.menu-liste::before { content: ''; position: absolute; inset: -16px 0 auto; height: 16px; }
.menu:hover .menu-liste, .menu:focus-within .menu-liste, .menu.ouvert .menu-liste { opacity: 1; visibility: visible; translate: -50% 0; }
.menu-liste a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--texte); font-size: .92rem; transition: background .2s, color .2s; }
.menu-liste a:hover, .menu-liste a.on { background: rgba(255, 190, 100, .08); color: var(--or); }

.logo-centre { position: relative; display: block; width: 240px; margin: -30px 6px; line-height: 0; transition: width .4s var(--ease), margin .4s var(--ease); }
.logo-centre img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); }
.entete.defile .logo-centre { width: 180px; margin: -18px 6px; }
.burger { display: none; }

/* ------------------------------------------------------------------ contenu */
main { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: calc(var(--entete) + 26px) 16px 60px; overflow-x: clip; }
main.plein { max-width: none; padding: 0; }
.grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
.panel { position: relative; background: linear-gradient(180deg, rgba(30, 26, 44, .72), rgba(13, 11, 22, .82)); border: 1px solid var(--ligne); border-radius: var(--rayon);
  box-shadow: var(--ombre), inset 0 1px 0 rgba(255, 255, 255, .05); padding: 24px 26px; margin-bottom: 22px; backdrop-filter: blur(8px); }
.panel.dark { background: linear-gradient(180deg, rgba(46, 32, 16, .55), rgba(14, 12, 20, .85)); border-color: var(--ligne2); }
.muted { color: var(--texte2); font-size: .93rem; }
.big { font: 800 2.4rem var(--titre); line-height: 1; }
.big:not([style]) { color: var(--or); }
hr { border: 0; border-top: 1px solid var(--ligne); margin: 20px 0; }

/* pastille au-dessus d'un titre */
.surtitre { display: inline-block; font: 600 .76rem var(--corps); letter-spacing: .18em; text-transform: uppercase; color: var(--or2); margin-bottom: 14px; }

/* en-tête de page (toutes les pages sauf l'accueil) */
.page-hero { position: relative; text-align: center; padding: 30px 16px 40px; margin: 0 auto 14px; max-width: 920px; isolation: isolate; }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .3em; color: var(--texte); }
.page-hero p { color: var(--texte2); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

/* ------------------------------------------------------------------ formulaires et boutons */
label { display: block; font-weight: 600; margin: 14px 0 6px; color: var(--texte); }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; color: var(--texte); background: rgba(255, 255, 255, .035); border: 1px solid var(--ligne2); border-radius: 14px; padding: 11px 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
select option { background: var(--nuit3); color: var(--texte); }
textarea { min-height: 260px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--or); background: rgba(255, 190, 100, .05); box-shadow: 0 0 0 4px rgba(255, 190, 100, .12); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.check input { width: auto; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 .95rem var(--corps); letter-spacing: .02em; color: #1b0e00; cursor: pointer;
  background: #f5b54a; border: 0; border-radius: 12px; padding: 13px 26px; margin-top: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: background .2s, box-shadow .2s; }
.btn:hover { color: #1b0e00; background: #ffc766; }
.btn.small { font-size: .78rem; padding: 8px 15px; margin-top: 0; border-radius: 10px; }
.btn.gris { color: var(--texte); background: rgba(20, 16, 30, .6); box-shadow: 0 0 0 1px var(--ligne2) inset; backdrop-filter: blur(8px); }
.btn.gris:hover { color: #fff; background: rgba(32, 27, 46, .8); box-shadow: 0 0 0 1px var(--ligne3) inset; }
.btn .sous { display: block; font-size: .64rem; letter-spacing: .16em; opacity: .7; font-weight: 600; }
button.btn { font-family: var(--corps); }
.hp { position: absolute; left: -5000px; }
.errors { background: rgba(255, 97, 89, .1); border: 1px solid rgba(255, 97, 89, .5); color: #ffc9c4; border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; }
.errors ul { margin: 0; padding-left: 18px; }
.flash { border-radius: 16px; padding: 12px 16px; margin-bottom: 18px; font-weight: 600; box-shadow: var(--ombre); }
.flash.ok { background: rgba(95, 211, 138, .12); border: 1px solid rgba(95, 211, 138, .5); color: #c7f5d6; }
.flash.error { background: rgba(255, 97, 89, .12); border: 1px solid rgba(255, 97, 89, .5); color: #ffd2ce; }

/* ------------------------------------------------------------------ tableaux, onglets, étiquettes */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th { font: 600 .72rem var(--corps); letter-spacing: .14em; text-transform: uppercase; text-align: left; color: var(--or2); border-bottom: 1px solid var(--ligne2); padding: 10px 8px; }
td { padding: 11px 8px; border-bottom: 1px solid rgba(255, 190, 100, .07); vertical-align: middle; }
tbody tr { transition: background .2s; }
tbody tr:hover td { background: rgba(255, 190, 100, .05); }
.rank { font: 800 1.05rem var(--titre); color: var(--texte3); width: 52px; }
.rank.r1 { color: #ffd166; } .rank.r2 { color: #cfd6e6; } .rank.r3 { color: #e0915a; }
.badge { display: inline-block; min-width: 30px; text-align: center; font: 700 .72rem var(--corps); color: #fff; border-radius: 6px; padding: 2px 6px; margin-right: 6px; }
.tete { width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; margin-right: 8px; border: 1px solid var(--ligne2); background: var(--nuit3); }
.tag { display: inline-block; font: 700 .68rem var(--corps); letter-spacing: .1em; text-transform: uppercase; color: var(--nuit); background: var(--or2); border-radius: 999px; padding: 3px 10px; }
.tag.maj { background: var(--ambre); } .tag.event { background: var(--vert); }
.badge-nonmortal { display: inline-block; font: 700 .72rem var(--corps); color: #06240f; background: var(--vert); border-radius: 999px; padding: 2px 9px; vertical-align: middle; white-space: nowrap; }
.nonmortal-note { margin: .4em 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tabs a, .tabs button { font: 600 .82rem var(--corps); color: var(--texte2); background: rgba(255, 255, 255, .03); border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 15px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.tabs a:hover, .tabs button:hover { color: var(--texte); border-color: var(--ligne2); }
.tabs a.on, .tabs button.on { color: #1b0e00; background: #f5b54a; border-color: transparent; }
.table-wrap { overflow-x: auto; }

/* boutique */
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.item { background: linear-gradient(180deg, rgba(34, 30, 50, .7), rgba(13, 11, 22, .85)); border: 1px solid var(--ligne); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 6px; transition: border-color .25s, transform .35s var(--ease), box-shadow .3s; }
.item:hover { border-color: var(--ligne2); }
.item .name { font-weight: 600; }
.item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.item-icon { width: 60px; height: 60px; border-radius: 14px; background: radial-gradient(circle, rgba(255, 190, 100, .22) 0, rgba(19, 18, 31, .9) 70%); border: 1px solid var(--ligne2); object-fit: contain; }
.item-icon.empty { display: inline-block; }
.item-stats { list-style: none; margin: 0; padding: 7px 9px; font-size: .82rem; line-height: 1.4; color: #bfe8c9; background: rgba(95, 211, 138, .07); border-radius: 10px; }
.item .price { font: 800 1.1rem var(--titre); color: var(--or); }
.item form { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.item form select { flex: 1 1 100%; }
.item form input[type=number] { width: 74px; }
.promo { color: var(--vert); font-weight: 700; font-size: .8rem; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.pager a, .pager span { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--ligne); color: var(--texte2); }
.pager .on { background: #f5b54a; color: #1b0e00; border-color: transparent; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.filters input, .filters select { width: auto; flex: 1 1 200px; }
.filters .btn { margin-top: 0; }

/* actualités, comptes, guides */
.news-item { border-bottom: 1px solid var(--ligne); padding: 0 0 16px; margin-bottom: 16px; }
.news-item:last-child { border: 0; margin: 0; }
.news-body { white-space: pre-line; }
.events { list-style: none; padding: 0; margin: 0; }
.events li { position: relative; padding: 0 0 14px 20px; border-left: 1px solid var(--ligne2); margin-left: 4px; }
.events li::before { content: ''; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--or); }
.game-account { border: 1px solid var(--ligne); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; background: rgba(255, 255, 255, .02); }
.ga-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
details { margin-top: 8px; }
details summary { cursor: pointer; font-weight: 600; color: var(--or); }
details form { max-width: 420px; }
.guide-list { columns: 2 260px; padding-left: 20px; }
.guide-list li { margin-bottom: 6px; }
.guide-body h2 { margin-top: 1.2em; color: var(--or); }
.guide-body h3 { margin-top: 1em; }
.guide-body code { background: rgba(255, 190, 100, .1); color: var(--corona); border-radius: 6px; padding: 1px 6px; font-size: .92em; }
.guide-body blockquote { margin: 1em 0; padding: 10px 16px; border-left: 3px solid var(--ambre); background: rgba(255, 138, 31, .07); border-radius: 0 14px 14px 0; }
.guide-body table { margin: 1em 0; }

/* ------------------------------------------------------------------ apparitions : un fondu court en montant un peu */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.vu { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ accueil : héros en couches */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; text-align: center; padding: calc(var(--entete) + 10px) 16px 150px; }
.couche { position: absolute; will-change: transform; }
.hero .fond { inset: -8% 0 -8% 0; z-index: -6; }
.hero .fond video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.95) blur(1.5px); transform: scale(1.06); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 46% 40% at 50% 48%, rgba(7, 7, 13, .7), transparent 75%),
              linear-gradient(180deg, rgba(7, 7, 13, .9) 0%, rgba(7, 7, 13, .2) 28%, rgba(7, 7, 13, .25) 62%, var(--nuit) 100%),
              radial-gradient(ellipse at center, transparent 35%, rgba(7, 7, 13, .75) 100%); }
/* personnages de part et d'autre */
.perso-cote { bottom: 0; height: min(88vh, 900px); z-index: -3; pointer-events: none; }
.perso-cote.g { left: max(-80px, calc(50% - 940px)); }
.perso-cote.d { right: max(-80px, calc(50% - 940px)); }
.perso-cote .entree { height: 100%; opacity: 0; transition: opacity 1s var(--ease) .1s; }
.js.pret .perso-cote .entree, html:not(.js) .perso-cote .entree { opacity: 1; }
.perso-cote img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .8)) brightness(.95);
  -webkit-mask: linear-gradient(180deg, #000 72%, transparent 97%); mask: linear-gradient(180deg, #000 72%, transparent 97%); }
.perso-cote.d img { transform: scaleX(-1); }
.hero-contenu { position: relative; max-width: 1000px; }
.hero h1 { margin: 0; line-height: .98; }
.hero .ligne1 { display: block; font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 600; color: var(--texte); text-shadow: 0 4px 24px rgba(0, 0, 0, .8); letter-spacing: -.01em; }
.hero .grand { display: block; font-size: clamp(3rem, 8.5vw, 7rem); font-weight: 800; letter-spacing: -.035em; margin-top: 8px; color: var(--or); text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.hero .accroche { color: var(--texte); opacity: .88; max-width: 640px; margin: 22px auto 0; font-size: 1.08rem; text-shadow: 0 2px 14px rgba(0, 0, 0, .95); }
.hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.hero .actions .btn { min-width: 230px; flex-direction: column; gap: 0; padding: 15px 30px; margin: 0; }
.js .hero .accroche, .js .hero .actions, .js .hero .chiffres, .js .hero .surtitre { opacity: 0; translate: 0 12px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.js .hero .accroche { transition-delay: .15s; } .js .hero .actions { transition-delay: .25s; } .js .hero .chiffres { transition-delay: .35s; }
.js.pret .hero .accroche, .js.pret .hero .actions, .js.pret .hero .chiffres, .js.pret .hero .surtitre { opacity: 1; translate: 0 0; }
.js .hero .accroche { opacity: 0; } .js.pret .hero .accroche { opacity: .88; }
.chiffres { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: min(96vw, 900px); }
.chiffre { min-width: 160px; padding: 12px 18px; border-radius: 14px; background: rgba(12, 10, 20, .6); border: 1px solid var(--ligne); backdrop-filter: blur(10px); text-align: center; }
.chiffre b { display: block; font: 800 1.6rem var(--titre); color: var(--or); line-height: 1.1; }
.chiffre span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte2); }
@media (max-width: 900px) {
  .perso-cote { height: 62vh; opacity: .5; }
  .perso-cote.g { left: -130px; } .perso-cote.d { right: -130px; }
}
@media (max-width: 760px) { .chiffres { position: static; transform: none; margin: 34px auto 0; } .hero { padding-bottom: 40px; } .chiffre { min-width: 140px; } }

/* séparateur entre deux sections */
.trait { height: 1px; max-width: 1100px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--ligne2), transparent); }

/* sections de l'accueil */
.section { position: relative; max-width: 1180px; margin: 0 auto; padding: 110px 16px; }
.section-titre { text-align: center; margin-bottom: 60px; }
.section-titre h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: .25em; }
.section-titre h2 .or { color: var(--or); }
.section-titre p { color: var(--texte2); max-width: 620px; margin: 0 auto; font-size: 1.05rem; }

/* cartes « atouts » : en quinconce, illustration qui déborde */
.atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 42px; }
.atouts > :nth-child(even) { margin-top: 80px; }
.atout { --accent: var(--or); position: relative; min-height: 270px; padding: 34px 32px 30px; padding-right: 42%; border-radius: 20px; transition: border-color .3s;
  background: linear-gradient(160deg, rgba(36, 30, 54, .85), rgba(12, 10, 20, .94)); border: 1px solid var(--ligne); box-shadow: var(--ombre); }
.atout:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.atout img { position: absolute; right: -14px; bottom: 0; width: 48%; max-height: 350px; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .75)); -webkit-mask: linear-gradient(180deg, #000 80%, transparent); mask: linear-gradient(180deg, #000 80%, transparent); }
.atout .num { display: block; font: 800 2.6rem var(--titre); line-height: 1; letter-spacing: -.04em; color: color-mix(in srgb, var(--accent) 35%, transparent); margin-bottom: 8px; }
.atout h3 { font-size: 1.5rem; font-weight: 800; color: var(--accent); margin-top: 0; }
.atout p { color: var(--texte2); margin: 0; position: relative; }
.aussi { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 90px; }
.aussi span { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--ligne2); background: rgba(255, 190, 100, .04); color: var(--texte); font-size: .92rem; }
@media (max-width: 860px) { .atouts { grid-template-columns: 1fr; } .atouts > :nth-child(even) { margin-top: 0; } }

/* podium : personnages sur des socles */
.podium-zone { position: relative; overflow: hidden; isolation: isolate; max-width: none; }
.podium-zone .podium-fond { position: absolute; inset: -10% 0; z-index: -3; background-size: cover; background-position: center; filter: brightness(.28) saturate(.8) blur(3px); }
.podium-zone::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(700px 360px at 50% 82%, rgba(255, 150, 40, .07), transparent 70%), linear-gradient(180deg, var(--nuit), transparent 25%, transparent 75%, var(--nuit)); }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 44px); margin: 0 auto; max-width: 1000px; }
.place { flex: 1 1 0; max-width: 310px; text-align: center; position: relative; --c1: #ffd27a; --c2: #ff9a2e; }
.place[data-rang="1"] { order: 2; } .place[data-rang="2"] { order: 1; --c1: #e6ecf8; --c2: #93a2c2; } .place[data-rang="3"] { order: 3; --c1: #f2b48a; --c2: #b8652f; }
.faisceau, .socle-haut { display: none; }
/* 1/11 (le propriétaire : « les effets, ça fait pas du tout pro ») : plus de faisceau, de disque lumineux, de halo ni de reflet
   animé. Le personnage se tient DERRIÈRE le bord de sa marche (pleine, au liseré de la couleur du rang), médaille plate */
.place .perso { position: relative; z-index: 0; display: flex; align-items: flex-end; justify-content: center; height: 300px; }
.place[data-rang="1"] .perso { height: 370px; }
/* les illustrations finissent en fondu (27 % de leur hauteur sous le dernier pixel plein, en médiane) : ce bas passe derrière la marche */
.place .perso img { max-height: 100%; width: auto; translate: 0 22%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
  transition: transform .6s var(--ease), opacity .8s var(--ease) .2s; }
.js .place:not(.vu) .perso img { transform: translateY(40px); opacity: 0; }
.place:hover .perso img { transform: translateY(-6px); }
.socle { position: relative; z-index: 1; height: 130px; margin: 0 6%; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 10%, #1e1b2c) 0%, #151320 60%, #0e0d16 100%);
  border-top: 2px solid color-mix(in srgb, var(--c1) 80%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.place[data-rang="1"] .socle { height: 170px; } .place[data-rang="3"] .socle { height: 100px; }
/* le rang : un grand chiffre gravé dans la face de la marche (plus de pastille ronde) */
.medaille { position: absolute; z-index: 3; left: 0; right: 0; top: 12px; text-align: center; font: 800 4.2rem/1 var(--titre); color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 90%, #fff) 0%, color-mix(in srgb, var(--c2) 45%, transparent) 100%); -webkit-background-clip: text; background-clip: text; }
.plaque { position: relative; z-index: 3; margin: 14px 4% 0; padding: 12px 10px; border-radius: 16px; background: rgba(14, 12, 22, .75); border: 1px solid color-mix(in srgb, var(--c1) 30%, transparent); backdrop-filter: blur(8px); }
.plaque .nom { display: block; font: 800 1.2rem var(--titre); color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place[data-rang="1"] .plaque .nom { font-size: 1.4rem; color: var(--or); }
.plaque .classe { font-size: .84rem; color: var(--texte2); }
.plaque .xp { display: block; font-size: .74rem; color: var(--texte3); letter-spacing: .04em; }
.podium-vide { text-align: center; color: var(--texte2); }
@media (max-width: 680px) {
  .place .perso { height: 170px; } .place[data-rang="1"] .perso { height: 210px; }
  .socle { height: 80px; } .place[data-rang="1"] .socle { height: 110px; } .place[data-rang="3"] .socle { height: 64px; }
  .medaille { font-size: 2.6rem; top: 8px; }
  .plaque { padding: 8px 4px; } .plaque .nom { font-size: .9rem; } .place[data-rang="1"] .plaque .nom { font-size: 1rem; } .plaque .xp { display: none; }
}

/* appel final */
.appel { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 160px 16px; }
.appel .fond { position: absolute; inset: -12% 0; z-index: -4; background-size: cover; background-position: center 20%; filter: saturate(.85) brightness(.4) blur(2px); }
.appel::after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--nuit) 0%, rgba(7, 7, 13, .3) 40%, rgba(7, 7, 13, .45) 70%, var(--nuit) 100%); }
.appel .perso-appel { left: max(-40px, calc(50% - 760px)); bottom: -20px; height: min(80vh, 760px); z-index: -3; opacity: .9; }
.appel .perso-appel img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .8)); -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.appel h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; }
.appel p { color: var(--texte); opacity: .88; font-size: 1.08rem; }
.appel .actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 900px) { .appel .perso-appel { opacity: .35; left: -120px; } }

/* actualités + en direct de l'accueil */
.duo { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }
.carte-actu { position: relative; display: block; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--ligne); background: linear-gradient(160deg, rgba(36, 30, 54, .55), rgba(12, 10, 20, .7)); margin-bottom: 14px; color: var(--texte); transition: border-color .25s; }
.carte-actu:hover { border-color: var(--ligne3); color: var(--texte); }
.carte-actu h3 { margin: 10px 0 4px; color: var(--texte); }

/* bandeau flottant */
.bandeau { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 14px; max-width: min(430px, calc(100vw - 36px)); padding: 12px 14px 12px 12px; border-radius: 20px;
  background: rgba(16, 14, 26, .97); border: 1px solid var(--ligne2); box-shadow: var(--ombre); animation: monte .5s var(--ease) both; }
.bandeau[hidden] { display: none; }
.bandeau .icone { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font: 800 1rem var(--titre); color: #2a1600; background: #f5b54a; }
.bandeau b { color: var(--or); }
.bandeau small { display: block; color: var(--texte2); line-height: 1.35; }
.bandeau .btn { margin: 0; flex: none; }
.bandeau .fermer { flex: none; background: none; border: 0; color: var(--texte3); font-size: 1.2rem; cursor: pointer; padding: 0 2px; }
.bandeau .fermer:hover { color: var(--texte); }
@keyframes monte { from { opacity: 0; transform: translateY(16px); } }

/* ------------------------------------------------------------------ classements : podium compact, filtre, recherche */
.classement-outils { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.classement-outils input, .classement-outils select { flex: 1 1 220px; width: auto; }
.podium.compact { margin: 30px auto 46px; }
.podium.compact .perso { height: 230px; } .podium.compact .place[data-rang="1"] .perso { height: 280px; }
.podium.compact .socle { height: 90px; } .podium.compact .place[data-rang="1"] .socle { height: 120px; } .podium.compact .place[data-rang="3"] .socle { height: 70px; }
td a.perso-lien { color: var(--texte); font-weight: 600; }
td a.perso-lien:hover { color: var(--or); }
.connexion-requise { text-align: center; padding: 44px 20px; }
.connexion-requise .cadenas { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 190, 100, .1); border: 1px solid var(--ligne2); color: var(--or); font-size: 1.6rem; }

/* ------------------------------------------------------------------ classes */
.classes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.classe-carte { position: relative; display: block; height: 350px; border-radius: 18px; overflow: hidden; border: 1px solid var(--ligne); color: var(--texte); isolation: isolate; transition: border-color .3s; }
.classe-carte .fond { position: absolute; inset: -4%; z-index: -2; background-size: cover; background-position: center 30%; filter: brightness(.45) saturate(.9); transition: filter .4s, transform .8s var(--ease); }
.classe-carte::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(7, 7, 13, .96) 86%); }
.classe-carte img.art { position: absolute; right: -6%; bottom: 66px; height: 80%; width: auto; z-index: -1; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .75)); transition: transform .6s var(--ease); }
.classe-carte .bas { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
.classe-carte h3 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--texte); display: flex; align-items: center; gap: 9px; }
.classe-carte h3 img { width: 30px; height: 30px; }
.classe-carte p { margin: 4px 0 0; font-size: .88rem; color: var(--texte2); }
.classe-carte .role { display: inline-block; margin-top: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--or2); }
.classe-carte:hover { border-color: var(--ligne3); color: var(--texte); }
.classe-carte:hover .fond { filter: brightness(.55) saturate(.95); }

/* ------------------------------------------------------------------ rejoindre */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.etape { position: relative; padding: 28px 24px 24px; border-radius: 18px; border: 1px solid var(--ligne); background: linear-gradient(180deg, rgba(36, 30, 54, .7), rgba(12, 10, 20, .88)); transition: border-color .25s; }
.etape:hover { border-color: var(--ligne3); }
.etape .n { font: 800 2.4rem var(--titre); line-height: 1; letter-spacing: -.04em; color: color-mix(in srgb, var(--or) 45%, transparent); }
.etape h3 { margin: 12px 0 6px; color: var(--texte); }
.etape p { margin: 0 0 6px; color: var(--texte2); font-size: .93rem; }
.etape .btn { margin-top: 10px; }
.carte-telechargement { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 28px 32px; margin-bottom: 26px; border-radius: 24px; border: 1px solid var(--ligne2);
  background: linear-gradient(180deg, rgba(40, 32, 22, .6), rgba(12, 10, 20, .9)); }
.carte-telechargement h2 { margin: 6px 0; }
.carte-telechargement .lien-zip { margin: 10px 0 0; font-size: .9em; text-align: center; }
@media (max-width: 700px) { .carte-telechargement { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ statistiques */
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.compteur { padding: 20px 20px 18px; border-radius: 16px; border: 1px solid var(--ligne); background: linear-gradient(180deg, rgba(36, 30, 54, .7), rgba(12, 10, 20, .88)); }
.compteur .etiquette { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texte2); }
.compteur b { display: block; font: 800 2.2rem var(--titre); color: var(--or); line-height: 1.2; }
.compteur small { color: var(--texte3); }
.onglet[hidden] { display: none; }
.graphe { width: 100%; height: auto; display: block; }
.graphe text { font: 11px var(--corps); fill: var(--texte3); }
.graphe .grille line { stroke: rgba(255, 190, 100, .08); }
.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--texte2); margin: 6px 0 0; }
.legende i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.barres { display: grid; gap: 8px; }
.barre-ligne { display: grid; grid-template-columns: 150px 1fr 70px; gap: 10px; align-items: center; font-size: .88rem; }
.barre-ligne .piste { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .04); overflow: hidden; display: flex; }
.barre-ligne .piste span { display: block; height: 100%; }
.barre-ligne .v { text-align: right; color: var(--texte2); font-variant-numeric: tabular-nums; }
.barre-ligne .lib { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-ligne .lib img { width: 22px; height: 22px; }
@media (max-width: 560px) { .barre-ligne { grid-template-columns: 110px 1fr 54px; } }

/* ------------------------------------------------------------------ fiche de personnage */
.fiche-tete { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: end; min-height: 380px; padding: 26px 30px 0; border-radius: 26px; border: 1px solid var(--ligne2); margin-bottom: 24px; }
.fiche-tete .fond { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 25%; filter: brightness(.6) saturate(.9) blur(1px); transform: scale(1.04); }
.fiche-tete::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 7, 13, .2), rgba(7, 7, 13, .85) 60%), linear-gradient(0deg, rgba(7, 7, 13, .9), transparent 40%); }
.fiche-tete img.art { display: block; max-height: 380px; width: auto; margin: 0 auto; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .75)); -webkit-mask: linear-gradient(180deg, #000 86%, transparent); mask: linear-gradient(180deg, #000 86%, transparent); }
.fiche-tete .identite { padding-bottom: 30px; }
.fiche-tete h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; margin: 4px 0; color: var(--texte); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.puce { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--ligne2); background: rgba(7, 7, 13, .55); font-size: .84rem; }
.puce img { width: 18px; height: 18px; }
.puce.bonta { border-color: rgba(127, 178, 255, .6); color: #cfe0ff; } .puce.brakmar { border-color: rgba(255, 97, 89, .6); color: #ffd0cc; }
@media (max-width: 760px) { .fiche-tete { grid-template-columns: 1fr; text-align: center; } .fiche-tete img.art { max-height: 260px; } .puces { justify-content: center; } }
.equipement { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.emplacement { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .02); color: var(--texte); min-height: 62px; transition: border-color .25s; }
.emplacement:hover { border-color: var(--ligne3); color: var(--texte); }
.emplacement .item-icon { width: 44px; height: 44px; flex: none; }
.emplacement small { display: block; color: var(--texte3); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.emplacement.vide { opacity: .45; }
.journal { list-style: none; margin: 0; padding: 0; }
.journal li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255, 190, 100, .07); }
.journal li:last-child { border: 0; }
.journal .quand { flex: none; width: 128px; color: var(--texte3); font-size: .82rem; }
.journal .type { flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ligne2); color: var(--or2); }
.journal .type.mort { color: var(--rouge); border-color: rgba(255, 97, 89, .5); }
.journal .type.pvp { color: var(--froid); border-color: rgba(127, 178, 255, .5); }
.metiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.metier { display: flex; justify-content: space-between; padding: 9px 13px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--ligne); font-size: .9rem; }
.metier b { color: var(--or); }

/* ------------------------------------------------------------------ pied de page */
footer.pied { position: relative; z-index: 1; border-top: 1px solid var(--ligne); background: linear-gradient(180deg, transparent, rgba(4, 4, 9, .95)); margin-top: 40px; }
.pied-grille { max-width: 1180px; margin: 0 auto; padding: 56px 16px 28px; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 30px; }
.pied-grille img { width: 200px; height: auto; }
.pied-grille h4 { font: 700 .74rem var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--or2); margin: 6px 0 14px; }
.pied-grille ul { list-style: none; padding: 0; margin: 0; }
.pied-grille li { margin-bottom: 8px; }
.pied-grille li a { color: var(--texte2); font-size: .93rem; transition: color .2s; }
.pied-grille li a:hover { color: var(--or); }
.pied-legal { max-width: 1180px; margin: 0 auto; padding: 16px 16px 30px; border-top: 1px solid var(--ligne); color: var(--texte3); font-size: .8rem; text-align: center; }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 1080px) {
  :root { --entete: 128px; }
  .cadre { grid-template-columns: auto 1fr auto; padding: 8px 12px; }
  .nav .gauche, .nav .droite { display: none; }
  .logo-centre { width: 160px; grid-column: 1; margin: -6px 0; }
  .entete.defile .logo-centre { width: 140px; margin: -6px 0; }
  .burger { display: inline-flex; grid-column: 3; width: 46px; height: 42px; border-radius: 12px; border: 1px solid var(--ligne2); background: rgba(12, 10, 20, .7); color: var(--or); cursor: pointer; align-items: center; justify-content: center; }
  .burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .3s var(--ease); }
  .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
  .burger span::before { top: -6px; } .burger span::after { top: 6px; }
  .entete.mobile-ouvert .burger span { background: transparent; }
  .entete.mobile-ouvert .burger span::before { transform: translateY(6px) rotate(45deg); }
  .entete.mobile-ouvert .burger span::after { transform: translateY(-6px) rotate(-45deg); }
  .entete.mobile-ouvert { background: rgba(7, 7, 13, .97); max-height: 100vh; overflow-y: auto; }
  .entete.mobile-ouvert .nav .gauche, .entete.mobile-ouvert .nav .droite { display: flex; grid-column: 1 / -1; flex-direction: column; align-items: stretch; }
  .entete.mobile-ouvert .nav .gauche { order: 3; } .entete.mobile-ouvert .nav .droite { order: 4; }
  .entete.mobile-ouvert .pilule { justify-content: space-between; width: 100%; }
  .entete.mobile-ouvert .menu-liste { position: static; translate: none; opacity: 1; visibility: visible; display: none; margin-top: 6px; box-shadow: none; }
  .entete.mobile-ouvert .menu.ouvert .menu-liste { display: block; }
  .entete.mobile-ouvert ~ .bandeau { display: none; }
  .barre { justify-content: center; }
}
@media (max-width: 640px) {
  .surtitre { font-size: .62rem; letter-spacing: .1em; padding: 5px 11px; }
  .panel { padding: 18px; } .section { padding: 72px 14px; }
  .atout { padding: 28px 24px 230px; } .atout img { width: 56%; max-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero .accroche, .js .hero .actions, .js .hero .chiffres, .js .hero .surtitre, .perso-cote .entree, .js .place .perso img { opacity: 1 !important; transform: none !important; }
}