/* Ascension -- feuille de style principale.
   La palette vient du fond du jeu : laque presque noire, brume ambree,
   bronze dore. Le blason est le "A" d'or en eclats de lumiere. */

:root{
  --laque:#110F0C;
  --surface:#1A1612;
  --surface-haute:#221C16;
  --trait:#392D21;
  --trait-vif:#5A4630;
  --ambre:#E9A23B;
  --or:#F6D08A;
  --texte:#EFE6D8;
  --doux:#A08D75;
  --sang:#B4472F;
  --jade:#6E9B6B;
  --ombre:0 2px 18px rgba(0,0,0,.55);
  --rayon:3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--laque);
  color:var(--texte);
  font:16px/1.65 Karla,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--or);text-decoration:none}
a:hover{color:var(--ambre)}

.contenu{max-width:1140px;margin:0 auto;padding:0 22px}

/* ---------------------------------------------------------- titres */
h1,h2,h3,.titre{
  font-family:Cinzel,Georgia,"Times New Roman",serif;
  font-weight:600;letter-spacing:.02em;margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(34px,6vw,60px);line-height:1.04}
h2{font-size:clamp(22px,3vw,30px);line-height:1.15}
h3{font-size:19px}

.sur-titre{
  font-family:Cinzel,Georgia,serif;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ambre);margin-bottom:12px;
}

/* filet d'or sous un titre de section */
.filet{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.filet::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--trait-vif),transparent)}

/* ---------------------------------------------------------- entete */
.entete{
  position:sticky;top:0;z-index:50;
  background:rgba(17,15,12,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--trait);
}
.entete .contenu{display:flex;align-items:center;gap:30px;height:70px}
.blason{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.blason img{width:32px;height:32px}
.blason span{font-family:Cinzel,Georgia,serif;font-size:19px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or)}

.menu{display:flex;gap:26px;flex:1;list-style:none;margin:0;padding:0}
.menu a{
  color:var(--texte);font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent;
}
.menu a:hover,.menu a.actif{color:var(--or);border-bottom-color:var(--ambre)}

.entete-actions{display:flex;gap:10px;align-items:center;flex:0 0 auto}

/* ---------------------------------------------------------- boutons */
.bouton{
  display:inline-block;font-family:Cinzel,Georgia,serif;font-weight:600;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 24px;border-radius:var(--rayon);border:1px solid var(--trait-vif);
  background:transparent;color:var(--or);cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.bouton:hover{background:rgba(233,162,59,.1);border-color:var(--ambre);color:var(--or)}
.bouton-plein{
  background:linear-gradient(180deg,#E9A23B,#C8802A);
  border-color:#C8802A;color:#20170B;
}
.bouton-plein:hover{background:linear-gradient(180deg,#F3B457,#D28E32);color:#20170B}
.bouton-grand{font-size:15px;padding:15px 34px}

/* ---------------------------------------------------------- accueil */
/* L'accueil : le guerrier sur le champ de bataille. L'image est deja
   composee pour ca -- le personnage a droite, l'espace sombre a gauche --
   donc le texte se pose naturellement dans la partie basse et gauche. */
.heros{position:relative;min-height:620px;display:flex;align-items:center;
  overflow:hidden;border-bottom:1px solid var(--trait)}
/* Le cadrage vise la TETE du guerrier, en haut a droite de l'image :
   d'ou le 20% vertical. Et le voile s'arrete avant lui -- il assombrit
   la gauche pour que le texte se lise, pas le personnage. */
.heros-fond{position:absolute;inset:0;background:url(heros.jpg) right 20%/cover no-repeat}
.heros-voile{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(17,15,12,.95) 0%,rgba(17,15,12,.78) 34%,rgba(17,15,12,.18) 62%,transparent 80%),
    linear-gradient(180deg,rgba(17,15,12,.42) 0%,transparent 22%,rgba(17,15,12,.88) 100%);
}

/* Bandeau de la vallee brumeuse, en fond de section */
.vallee{position:relative;overflow:hidden}
.vallee::before{content:"";position:absolute;inset:0;
  background:url(vallee.jpg) center 30%/cover no-repeat;opacity:.34}
.vallee::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--laque),rgba(17,15,12,.55) 40%,var(--laque))}
.vallee > *{position:relative;z-index:1}

/* ------------------------------------------------- galerie d'apercus */
.galerie{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.apercu{
  margin:0;position:relative;overflow:hidden;cursor:pointer;
  border:1px solid var(--trait);border-radius:var(--rayon);
  background:var(--surface-haute);
  transition:border-color .2s,transform .2s;
}
.apercu:hover{border-color:var(--trait-vif);transform:translateY(-2px)}
.apercu video,.apercu img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--laque)}
.apercu figcaption{
  padding:13px 16px;font-family:Cinzel,Georgia,serif;font-size:14px;
  letter-spacing:.04em;color:var(--or);border-top:1px solid var(--trait);
}
/* la pastille de lecture, qui disparait quand ca tourne */
.apercu .lire{
  position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;background:rgba(17,15,12,.62);border:1px solid var(--ambre);
  transition:opacity .2s;pointer-events:none;
}
.apercu .lire::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--or);
}
.apercu.joue .lire{opacity:0}

/* Portrait de classe */
.portrait{border:1px solid var(--trait);border-radius:var(--rayon);overflow:hidden;
  background:var(--surface-haute)}
.portrait img{width:100%;height:210px;object-fit:cover;object-position:center 22%;
  display:block;filter:saturate(.95)}
.portrait .legende{padding:18px 20px}
.portrait h3{color:var(--or);margin-bottom:6px}
.portrait p{margin:0;color:var(--doux);font-size:15px}
.heros .contenu{position:relative;padding-top:72px;padding-bottom:72px}
.heros-texte{max-width:620px}
.heros p.accroche{font-size:18px;color:var(--doux);margin:18px 0 30px;max-width:52ch}
.heros-boutons{display:flex;gap:14px;flex-wrap:wrap}

/* bandeau d'etat du serveur */
.etat{display:flex;gap:28px;flex-wrap:wrap;margin-top:38px;
  padding-top:24px;border-top:1px solid var(--trait)}
.etat div{min-width:96px}
.etat .val{font-family:Cinzel,Georgia,serif;font-size:26px;color:var(--or);
  font-variant-numeric:tabular-nums;line-height:1.1}
.etat .lib{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.pastille{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:7px;vertical-align:middle}
.pastille.on{background:var(--jade);box-shadow:0 0 8px var(--jade)}
.pastille.off{background:var(--sang)}

/* ---------------------------------------------------------- sections */
.section{padding:70px 0}
.section.alt{background:var(--surface)}

.grille{display:grid;gap:18px}
.grille-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grille-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

.carte{
  background:var(--surface-haute);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:24px;
}
.carte h3{color:var(--or);margin-bottom:8px}
.carte p{margin:0;color:var(--doux);font-size:15px}

/* tableaux de classement */
table.classement{width:100%;border-collapse:collapse;font-size:15px}
table.classement th{
  font-family:Cinzel,Georgia,serif;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ambre);text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--trait-vif);
}
table.classement td{padding:10px 12px;border-bottom:1px solid var(--trait)}
table.classement tr:hover td{background:rgba(233,162,59,.05)}
table.classement .rang{font-family:Cinzel,Georgia,serif;color:var(--doux);width:48px}
table.classement .rang.or{color:var(--or)}
table.classement .nombre{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- formulaires */
.forme{max-width:440px;margin:0 auto}
.champ{margin-bottom:18px}
.champ label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux);margin-bottom:7px}
.champ input,.champ select{
  width:100%;padding:12px 14px;background:var(--laque);
  border:1px solid var(--trait);border-radius:var(--rayon);
  color:var(--texte);font:inherit;
}
.champ input:focus,.champ select:focus{
  outline:none;border-color:var(--ambre);box-shadow:0 0 0 3px rgba(233,162,59,.12)}
.aide{font-size:13px;color:var(--doux);margin-top:6px}

.message{padding:13px 16px;border-radius:var(--rayon);margin-bottom:22px;font-size:15px}
.message.erreur{background:rgba(180,71,47,.14);border:1px solid var(--sang);color:#F0BCAF}
.message.bien{background:rgba(110,155,107,.14);border:1px solid var(--jade);color:#CDE6C9}

/* ---------------------------------------------------------- pied */
.pied{background:var(--surface);border-top:1px solid var(--trait);
  padding:40px 0;margin-top:0;color:var(--doux);font-size:14px}
.pied .contenu{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pied a{color:var(--doux)}
.pied a:hover{color:var(--or)}

@media (max-width:820px){
  .menu{display:none}
  .heros{min-height:460px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ================================================================
   Bandeau d'identification d'un classement — ajouté le 2026-09-28.
   Le joueur doit savoir SANS AMBIGUÏTÉ quel classement il regarde et
   sur quelle période il porte.
   ================================================================ */

.bandeau-classement{
  background:var(--surface-haute);
  border:1px solid var(--trait);
  border-left:3px solid var(--ambre);
  border-radius:var(--rayon);
  padding:18px 22px;
  margin-bottom:26px;
}
.bandeau-classement h3{color:var(--or);margin:0 0 6px}
.bandeau-note{margin:0;color:var(--texte);font-size:15px}
.bandeau-portee{margin:9px 0 0;color:var(--doux);font-size:13.5px}

/* ------------------------------------------------- onglets en ligne */
/* Ils doivent se LIRE comme des onglets : une rangee de pastilles
   cliquables, pas une suite de mots. Sans ces regles, le <nav> rendait
   treize liens colles bout a bout, et personne ne devinait qu'on pouvait
   cliquer dessus. */
.onglets{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 24px;padding:0 0 18px;
  border-bottom:1px solid var(--trait);
}
.onglets a{
  display:inline-flex;align-items:center;
  padding:9px 16px;
  font-size:14px;line-height:1;white-space:nowrap;
  color:var(--doux);text-decoration:none;
  background:var(--surface-haute);
  border:1px solid var(--trait);
  border-radius:999px;
  transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.onglets a:hover{
  color:var(--or);border-color:var(--trait-vif);
  background:rgba(233,162,59,.09);
  transform:translateY(-1px);
}
.onglets a:focus-visible{outline:2px solid var(--ambre);outline-offset:2px}

/* l'onglet actif doit sauter aux yeux, pas se deviner */
.onglets a.actif{
  font-weight:700;
  color:var(--laque);
  background:var(--or);
  border-color:var(--or);
  box-shadow:0 2px 12px rgba(233,162,59,.28);
}
.onglets a.actif:hover{
  color:var(--laque);background:var(--or);transform:none;
}

/* la colonne qu'on vient lire ressort des colonnes de contexte */
table.classement td.valeur{color:var(--or);font-weight:700}

/* titre de tableau destiné aux seuls lecteurs d'écran */
.sr-seul{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------- le recit complet d'un apercu */
/* Le titre d'un apercu ouvre l'annonce Discord en entier. C'est un
   <button> et pas un <div> cliquable : le clavier et les lecteurs
   d'ecran doivent pouvoir l'atteindre. */
.apercu figcaption{padding:0}
.titre-apercu{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;box-sizing:border-box;margin:0;
  padding:13px 16px;
  font-family:Cinzel,Georgia,serif;font-size:14px;letter-spacing:.04em;
  text-align:left;color:var(--or);
  background:none;border:0;border-top:1px solid var(--trait);
  cursor:pointer;transition:background .18s,color .18s;
}
.titre-apercu:hover{background:rgba(233,162,59,.09)}
.titre-apercu:focus-visible{outline:2px solid var(--ambre);outline-offset:-2px}
.titre-apercu .plus{
  flex:0 0 auto;font-family:Karla,system-ui,sans-serif;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--doux);
}
.titre-apercu:hover .plus{color:var(--ambre)}
.apercu figcaption.muet{
  padding:13px 16px;font-family:Cinzel,Georgia,serif;font-size:14px;
  letter-spacing:.04em;color:var(--or);border-top:1px solid var(--trait);
}

dialog.recit{
  max-width:660px;width:calc(100% - 32px);
  max-height:82vh;overflow:auto;
  padding:0;color:var(--texte);
  background:var(--surface-haute);
  border:1px solid var(--trait-vif);border-radius:var(--rayon);
  box-shadow:0 24px 70px rgba(0,0,0,.62);
}
dialog.recit::backdrop{background:rgba(9,8,6,.8)}
.recit-tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 26px 14px;border-bottom:1px solid var(--trait);
}
.recit-tete h3{
  margin:0;font-family:Cinzel,Georgia,serif;font-size:19px;
  letter-spacing:.03em;color:var(--or);
}
.recit-date{margin:5px 0 0;font-size:12.5px;color:var(--doux)}
.recit-fermer{
  flex:0 0 auto;width:32px;height:32px;line-height:1;
  font-size:19px;color:var(--doux);cursor:pointer;
  background:none;border:1px solid var(--trait);border-radius:8px;
  transition:color .18s,border-color .18s;
}
.recit-fermer:hover{color:var(--or);border-color:var(--trait-vif)}
.recit-corps{padding:20px 26px 26px;font-size:15px;line-height:1.72}

/* aucun libelle du menu ne se coupe en deux lignes : « En ligne »
   se cassait apres « En », ce qui deformait toute la barre. */
.menu a{white-space:nowrap}