:root{
  --nuit:#0b0f16; --nuit-2:#111723; --carte:#151c2a; --carte-2:#1a2233;
  --trait:rgba(214,178,98,.18); --trait-fort:rgba(214,178,98,.45);
  --laiton:#d6b262; --laiton-2:#b8903f; --laiton-clair:#f1d999;
  --texte:#e9e4d8; --texte-2:#a9b0bd; --texte-3:#737c8c;
  --brume:rgba(180,196,220,.07);
  --vert:#7bc47f; --rouge:#d86a5a;
  --rayon:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--nuit);color:var(--texte);font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.pix{image-rendering:pixelated}
.conteneur{width:min(1200px,100% - 32px);margin-inline:auto}
h1,h2,h3,.titre{font-family:Cinzel,serif;font-weight:700;letter-spacing:.02em;line-height:1.15}
.surtitre{font:600 12px/1 Inter;letter-spacing:.22em;text-transform:uppercase;color:var(--laiton)}
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;transition:.2s;cursor:pointer;white-space:nowrap}
.btn-or{background:linear-gradient(180deg,var(--laiton-clair),var(--laiton) 55%,var(--laiton-2));color:#1b1408;box-shadow:0 6px 24px rgba(214,178,98,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-or:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(214,178,98,.35)}
.btn-ligne{border-color:var(--trait-fort);color:var(--texte)}
.btn-ligne:hover{background:rgba(214,178,98,.08)}

/* En-tête */
header{position:sticky;top:0;z-index:20;background:rgba(11,15,22,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--trait)}
.barre{display:flex;align-items:center;gap:28px;height:72px}
.logo{display:flex;align-items:center;gap:12px;font-family:Cinzel;font-weight:700;font-size:20px;letter-spacing:.12em}
.logo img{width:38px;height:38px}
nav.menu{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--texte-2)}
nav.menu a:hover,nav.menu a.actif{color:var(--laiton-clair)}
.barre .droite{margin-left:auto;display:flex;gap:12px;align-items:center}
.barre .btn{height:40px;padding:0 16px;font-size:14px}
.burger{display:none;width:40px;height:40px;border:1px solid var(--trait-fort);border-radius:10px;background:none;color:var(--texte)}

/* Héros */
.heros{position:relative;padding:72px 0 40px;overflow:hidden}
.heros::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 500px at 75% 40%,rgba(120,150,200,.13),transparent 60%),
  radial-gradient(700px 400px at 10% 0%,rgba(214,178,98,.08),transparent 60%);pointer-events:none}
.heros .grille{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:center;position:relative}
.heros h1{font-size:clamp(44px,6vw,76px);margin:18px 0 18px}
.heros h1 em{font-style:normal;background:linear-gradient(180deg,var(--laiton-clair),var(--laiton-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.heros p.intro{font-size:18px;color:var(--texte-2);max-width:520px}
.ip{margin-top:32px;display:flex;align-items:stretch;max-width:460px;border:1px solid var(--trait-fort);border-radius:12px;background:rgba(21,28,42,.7);overflow:hidden}
.ip .adresse{flex:1;padding:12px 18px}
.ip .adresse small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-3)}
.ip .adresse b{font:600 20px/1.3 ui-monospace,Consolas,monospace;color:var(--laiton-clair)}
.ip .btn{height:auto;border-radius:0}
.actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.statut{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;color:var(--texte-2)}
.point{width:9px;height:9px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 4px rgba(123,196,127,.18)}
.statut span.sep{color:var(--texte-3)}
.visuel{position:relative}
.visuel img{width:118%;max-width:none;margin-left:-6%;
  -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 55%,transparent 100%);
  mask-image:radial-gradient(ellipse 60% 58% at 50% 50%,#000 55%,transparent 100%);
  filter:saturate(1.05) contrast(1.04)}
.etiquette{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(11,15,22,.85);border:1px solid var(--trait-fort);font-size:13px;font-weight:600;backdrop-filter:blur(6px)}
.etiquette i{width:8px;height:8px;border-radius:50%;background:var(--laiton)}
.etiquette.e1{top:22%;left:30%}.etiquette.e2{bottom:26%;right:6%}

/* Chiffres */
.chiffres{border-block:1px solid var(--trait);background:linear-gradient(180deg,rgba(21,28,42,.5),rgba(21,28,42,.2))}
.chiffres .conteneur{display:grid;grid-template-columns:repeat(4,1fr)}
.chiffre{padding:28px 20px;text-align:center}
.chiffre+.chiffre{border-left:1px solid var(--trait)}
.chiffre b{display:block;font-family:Cinzel;font-size:34px;color:var(--laiton-clair)}
.chiffre span{font-size:14px;color:var(--texte-2)}

section.bloc{padding:96px 0}
.entete{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px}
.entete h2{font-size:clamp(30px,3.6vw,44px);margin-top:12px}
.entete p{color:var(--texte-2);max-width:520px;margin-top:10px}
.lien{color:var(--laiton);font-weight:600;font-size:14px;white-space:nowrap}
.lien:hover{color:var(--laiton-clair)}

/* Classes */
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.classe{position:relative;padding:28px 24px 24px;border-radius:var(--rayon);background:linear-gradient(180deg,var(--carte-2),var(--carte));border:1px solid var(--trait);transition:.25s;overflow:hidden}
.classe::after{content:"";position:absolute;inset:auto -40% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(var(--teinte),transparent 70%);opacity:.22}
.classe:hover{border-color:var(--trait-fort);transform:translateY(-3px)}
.classe .icone{width:64px;height:64px;padding:8px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--trait)}
.classe h3{font-size:22px;margin:18px 0 4px}
.classe .role{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teinte-texte)}
.classe p{font-size:14px;color:var(--texte-2);margin-top:12px}

/* Monde */
.monde{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.carte-monde{position:relative;border-radius:var(--rayon);overflow:hidden;border:1px solid var(--trait);background:#1e2226;min-height:440px}
.carte-monde img{width:100%;height:100%;object-fit:cover}
.carte-monde .repere{position:absolute;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.carte-monde .repere b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--laiton);color:#1b1408;font-size:13px;box-shadow:0 0 0 6px rgba(214,178,98,.2)}
.carte-monde .repere span{padding:4px 10px;border-radius:8px;background:rgba(11,15,22,.85);border:1px solid var(--trait-fort)}
.carte-monde .legende{position:absolute;left:20px;bottom:18px;font-size:13px;color:var(--texte-2);background:rgba(11,15,22,.8);padding:8px 12px;border-radius:8px}
.lieux{display:flex;flex-direction:column;gap:12px}
.lieu{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:12px;background:var(--carte);border:1px solid var(--trait);transition:.2s}
.lieu:hover{border-color:var(--trait-fort);background:var(--carte-2)}
.lieu .num{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--trait-fort);font-family:Cinzel;color:var(--laiton)}
.lieu h3{font-size:17px}
.lieu p{font-size:14px;color:var(--texte-2);margin-top:2px}
.lieu .tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-3)}

/* Boss */
.fond-brume{background:radial-gradient(1000px 420px at 50% 0%,rgba(120,150,200,.10),transparent 70%),var(--nuit-2);border-block:1px solid var(--trait)}
.boss{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.boss-carte{position:relative;border-radius:var(--rayon);border:1px solid var(--trait);background:linear-gradient(180deg,#1a2233 0%,#121826 100%);overflow:hidden;transition:.25s}
.boss-carte:hover{border-color:var(--trait-fort);transform:translateY(-3px)}
.boss-carte .scene{position:relative;height:250px;display:grid;place-items:center;background:radial-gradient(260px 160px at 50% 70%,rgba(214,178,98,.12),transparent 70%)}
.boss-carte .scene img{height:230px;width:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));transition:.35s}
.boss-carte:hover .scene img{transform:scale(1.05)}
.boss-carte .infos{padding:18px 22px 22px;border-top:1px solid var(--trait)}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.b-donjon{background:rgba(123,196,127,.14);color:#9bd99e}
.b-world{background:rgba(216,106,90,.15);color:#f09a8b}
.b-ile{background:rgba(214,178,98,.15);color:var(--laiton-clair)}
.boss-carte h3{font-size:20px;margin:10px 0 4px}
.boss-carte p{font-size:14px;color:var(--texte-2)}

/* Actus */
.actus{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}
.actu{border-radius:var(--rayon);overflow:hidden;background:var(--carte);border:1px solid var(--trait);display:flex;flex-direction:column;transition:.2s}
.actu:hover{border-color:var(--trait-fort)}
.actu .image{aspect-ratio:16/9;background:#1e2226;overflow:hidden}
.actu .image img{width:100%;height:100%;object-fit:cover}
.actu .corps{padding:20px 22px 22px}
.actu .meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--texte-3)}
.actu h3{font-size:18px;margin:10px 0 8px;font-family:Inter;font-weight:700;letter-spacing:0}
.actu.grande h3{font-size:22px}
.actu p{font-size:14px;color:var(--texte-2)}
.b-patch{background:rgba(120,150,220,.15);color:#a9bdf0}
.b-event{background:rgba(214,178,98,.15);color:var(--laiton-clair)}

/* Trio */
.trio{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px}
.panneau{padding:26px;border-radius:var(--rayon);background:var(--carte);border:1px solid var(--trait)}
.panneau h3{font-size:20px;margin:10px 0 16px}
.onglets{display:flex;gap:6px;margin-bottom:14px}
.onglets span{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--texte-3);border:1px solid transparent}
.onglets span.on{color:var(--laiton-clair);border-color:var(--trait-fort);background:rgba(214,178,98,.08)}
.rang{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.05);font-size:14px}
.rang .pos{width:28px;font-family:Cinzel;color:var(--texte-3)}
.rang:nth-child(2) .pos{color:var(--laiton-clair)}
.rang .tete{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#6b4f2f,#3a2a18)}
.rang .nom{flex:1;font-weight:600}
.rang .val{color:var(--texte-2);font-variant-numeric:tabular-nums}
.panneau p{color:var(--texte-2);font-size:14px}
.panneau .btn{margin-top:20px;width:100%;justify-content:center}
.serie{display:flex;gap:6px;margin-top:18px}
.serie i{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
.serie i.ok{background:var(--laiton)}
.mini-produits{display:flex;gap:10px;margin-top:16px}
.mini-produits div{flex:1;padding:12px 10px;border-radius:10px;border:1px solid var(--trait);text-align:center;font-size:12px;color:var(--texte-2)}
.mini-produits b{display:block;font-size:15px;color:var(--texte);margin-bottom:2px}

/* Appel final */
.final{position:relative;padding:110px 0;text-align:center;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:url(../img/arene_world_boss.webp) center/cover;opacity:.18;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent)}
.final .conteneur{position:relative}
.final h2{font-size:clamp(34px,4.6vw,56px)}
.final p{color:var(--texte-2);margin:16px auto 32px;max-width:520px}
.etapes{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.etapes span{padding:8px 14px;border-radius:999px;border:1px solid var(--trait);font-size:13px;color:var(--texte-2)}
.etapes b{color:var(--laiton)}

footer{border-top:1px solid var(--trait);padding:56px 0 32px;background:#080b11}
.pied{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.pied h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-3);margin-bottom:14px}
.pied a{display:block;font-size:14px;color:var(--texte-2);padding:4px 0}
.pied a:hover{color:var(--laiton-clair)}
.pied p{font-size:14px;color:var(--texte-3);margin-top:14px;max-width:300px}
.mentions{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.05);font-size:12px;color:var(--texte-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}


@media (max-width:1000px){
  nav.menu{display:none}.burger{display:block}
  .heros .grille{grid-template-columns:1fr}
  .visuel{order:-1;margin-bottom:-20px}.visuel img{width:110%;margin-left:-5%}
  .classes{grid-template-columns:repeat(2,1fr)}
  .monde,.actus,.trio{grid-template-columns:1fr}
  .boss{grid-template-columns:repeat(2,1fr)}
  .pied{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .barre .btn-ligne{display:none}
  .heros{padding-top:32px}
  .chiffres .conteneur{grid-template-columns:1fr 1fr}
  .chiffre:nth-child(3){border-left:0}.chiffre:nth-child(n+3){border-top:1px solid var(--trait)}
  .classes,.boss{grid-template-columns:1fr}
  .entete{flex-direction:column;align-items:flex-start}
  section.bloc{padding:64px 0}
  .carte-monde{min-height:260px}.etiquette{display:none}
  .carte-monde .repere span{display:none}
  .pied{grid-template-columns:1fr}
  .ip .btn span{display:none}
}