/* Fondations : variables de couleur, remise a zero, mise en page, barre du
   haut et boutons. Tout le reste s'appuie dessus, d'ou sa place en premier.

   Sortie du <style> d'index.html. L'ordre de chargement est fixe par
   index.html et verifie par tests/css-ordre.test.js. */

:root{
  --obsidian:#0e0d12;
  --obsidian-2:#14121b;
  --panel:#1b1922;
  --panel-2:#221f2b;
  --line:#332e40;
  --line-soft:#2a2633;
  --gold:#d9a441;
  --gold-bright:#f0c674;
  --gold-deep:#a97e2c;
  --crimson:#a12c2c;
  --crimson-bright:#c0392b;
  --parchment:#e8e0d0;
  --muted:#9a9182;
  --muted-2:#6f6960;
  --ink:#141019;
  --ok:#4c9a5a;
  --radius:10px;
  --shadow:0 14px 40px rgba(0,0,0,.55);
  --display:"Cinzel","Constantia","Palatino Linotype","Book Antiqua",Georgia,serif;
  --ui:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
*{scrollbar-width:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
[hidden]{display:none!important}
html,body{margin:0}
/* Empêche tout défilement latéral de la PAGE (bug Safari iOS : on pouvait
   "sortir" du site sur le côté et le contenu restait décalé/non centré).
   `clip` ne crée pas de conteneur de scroll -> n'affecte pas le header sticky
   ni les zones à défilement interne (onglets, matrice, modales). */
html{overflow-x:clip}
body{
  font-family:var(--ui);
  color:var(--parchment);
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(217,164,65,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(161,44,44,.10), transparent 55%),
    var(--obsidian);
  min-height:100vh;
}
a{color:var(--gold-bright)}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:14px clamp(16px,4vw,40px);
  background:linear-gradient(180deg, rgba(20,18,27,.96), rgba(20,18,27,.82));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
/* `flex:1 1 0` plutot que `margin-right:auto` : la marque et le compte
   occupent deux moities EGALES, et ce sont les ONGLETS qui occupent le centre
   ainsi degage. Une marge automatique les centrerait dans l'espace LIBRE, donc
   de travers, et le bloc compte change de largeur en se connectant : le
   decalage aurait bouge sous les yeux du membre. */
.brand{display:flex;align-items:center;gap:14px;flex:1 1 0;min-width:0}
.crest{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border:1px solid var(--gold-deep);border-radius:50%;
  background:radial-gradient(circle at 50% 30%, #241d13, #0f0c07);
  box-shadow:inset 0 0 12px rgba(217,164,65,.25);
  color:var(--gold-bright);font-family:var(--display);font-weight:700;font-size:19px;
}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-title{
  font-family:var(--display);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:clamp(15px,2.4vw,20px);
  color:var(--parchment);
}
.brand-sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.tabs-rail{position:relative;display:flex;min-width:0}
.tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:5px}
/* Repères de défilement : invisibles par défaut, révélés par les classes
   `can-scroll-*` uniquement là où les onglets défilent (mobile). */
.tabs-cue{
  position:absolute;top:1px;bottom:1px;width:46px;display:grid;align-items:center;
  pointer-events:none;opacity:0;font-size:23px;font-weight:700;line-height:1;
  color:var(--gold-bright);text-shadow:0 1px 4px rgba(0,0,0,.9);
  transition:opacity .2s ease
}
.tabs-cue-left{
  left:1px;border-radius:999px 0 0 999px;justify-items:start;padding-left:6px;
  background:linear-gradient(90deg,var(--panel) 52%,rgba(27,25,34,0))
}
.tabs-cue-right{
  right:1px;border-radius:0 999px 999px 0;justify-items:end;padding-right:6px;
  background:linear-gradient(270deg,var(--panel) 52%,rgba(27,25,34,0))
}
.tab{
  appearance:none;border:0;cursor:pointer;font-family:var(--ui);
  padding:9px 18px;border-radius:999px;background:transparent;color:var(--muted);
  font-weight:600;font-size:13.5px;letter-spacing:.03em;transition:.18s;
}
.tab:hover{color:var(--parchment)}
.tab.active{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:var(--ink);box-shadow:0 4px 14px rgba(217,164,65,.28);
}
/* LA SECONDE LIGNE du groupe « Boss de Guilde », visible dans ses trois vues
   seulement. `order:4` la place apres le rail d'onglets, donc a l'etage du
   dessous ; sans lui elle remonterait avant, le rail portant `order:3`.

   ⚠️ Ces regles doivent rester APRES `.tab` et `.tab.active` : elles ont la
   meme specificite, donc seule la position tranche. Placees plus haut, le
   `border:0` et le remplissage dore des onglets principaux les effacaient - et
   le sous-menu ressemblait trait pour trait a la barre du dessus.

   Contour au lieu de remplissage, parce que c'est une navigation de SECOND
   niveau : elle ne doit pas rivaliser avec la principale au premier coup
   d'oeil, ni laisser croire a deux onglets actifs en meme temps. */
.subtabs{order:4;flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap;
  justify-content:center}
.subtabs[hidden]{display:none}
.subtab{font-size:12.5px;padding:6px 14px;border:1px solid var(--line-soft)}
.subtab:hover{border-color:var(--gold-deep)}
.subtab.active{
  background:transparent;color:var(--gold-bright);
  border-color:var(--gold-bright);box-shadow:none
}
.mobile-nav,.mobile-boss-subnav,.mobile-more-panel,.mobile-more-backdrop{display:none}
.account{display:flex;align-items:center;gap:8px;flex:1 1 0;
  justify-content:flex-end;min-width:0}
.account-connected{
  display:flex;align-items:center;gap:9px;padding:5px 6px 5px 12px;
  border:1px solid var(--gold-deep);border-radius:999px;
  background:linear-gradient(180deg,rgba(217,164,65,.10),rgba(14,13,18,.42))
}
.account-seal{
  width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 9px rgba(76,154,90,.75)
}
.account-pseudo{font-family:var(--display);font-size:12px;color:var(--gold-bright);letter-spacing:.04em}
.live-status{
  font-size:10px;color:var(--muted);white-space:nowrap
}
.live-status[data-state="online"]{color:var(--ok)}
.live-status[data-state="offline"]{color:#e98d8d}
.account .btn{padding:8px 12px;font-size:12px}

main{max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,40px)}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.section-eyebrow{
  font-family:var(--display);letter-spacing:.28em;text-transform:uppercase;
  font-size:12px;color:var(--gold);margin:0 0 4px
}
.section-title{
  font-family:var(--display);font-weight:700;letter-spacing:.05em;
  font-size:clamp(22px,4vw,32px);margin:0;color:var(--parchment)
}
.section-lead{color:var(--muted);margin:8px 0 0;max-width:60ch;font-size:14.5px}

/* ---------- Buttons ---------- */
.btn{
  appearance:none;cursor:pointer;font-family:var(--ui);font-weight:600;font-size:14px;
  border-radius:8px;padding:10px 16px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--parchment);transition:.16s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{border-color:var(--gold-deep);color:var(--gold-bright)}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:var(--ink);border-color:var(--gold-deep);font-weight:700;
}
.btn-primary:hover{filter:brightness(1.06);color:var(--ink)}
.btn-danger:hover{border-color:var(--crimson);color:#e98d8d}
.btn-ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
:where(button,[href],input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold-bright);outline-offset:2px
}

/* ---------- Pied de page ---------- */
/* Il sert index.html ET akumu.html, qui ne charge que cette feuille : les
   styles du pied vivent ici, et non dans la couche d'ambiance.

   Le parti pris : la page s'OUVRE sur la citadelle en pleine lumiere et se
   FERME sur sa silhouette. C'est le meme panorama, deja precache, assombri et
   masque au point qu'on n'en devine que la ligne de crete. Il ne coute donc
   pas un octet de plus, et il n'a de sens que sur ce site-la.

   Le socle reste sombre dans les DEUX ambiances : la silhouette est sa raison
   d'etre, et une silhouette n'existe pas sur un fond clair. */
.site-footer{
  position:relative;isolation:isolate;margin-top:72px;
  background:#0a0710;
}
/* La silhouette. Toujours le panorama SOMBRE, meme en ambiance Lumiere : le
   socle est sombre dans les deux cas, un panorama clair y jurerait. */
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("../assets/ambiance/nova-tenebres-v2.webp") right bottom / cover no-repeat;
  opacity:.16;filter:brightness(.7) saturate(.75);
  -webkit-mask-image:linear-gradient(to top,#000 0,transparent 88%);
  mask-image:linear-gradient(to top,#000 0,transparent 88%);
}
/* Le filet du haut s'eteint vers la droite, comme le voile de la banniere
   s'eteint vers elle. Les deux extremites de la page se repondent. */
.site-footer::after{
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:-1;
  background:linear-gradient(90deg,var(--gold-deep),rgba(217,164,65,.12) 46%,transparent 82%);
}
.site-footer-inner{
  max-width:1180px;margin:auto;
  padding:44px clamp(16px,4vw,40px) 30px;
  display:grid;grid-template-columns:minmax(180px,auto) 1fr;
  gap:34px 48px;align-items:start;
}
.site-footer-marque{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center}
.site-footer-crest{width:34px;height:34px;grid-row:span 2;color:var(--gold-bright);stroke-width:1.1}
.site-footer-titre{
  align-self:end;
  font-family:var(--display);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;font-size:19px;color:var(--parchment);
}
.site-footer-sous{align-self:start;margin-top:5px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
/* Une colonne, pas une ligne : quatre destinations se lisent plus vite
   empilees qu'alignees, et la trame reste stable quand un lien s'ajoute. */
.site-footer-liens{display:flex;flex-direction:column;min-width:0;padding-top:2px}
.site-footer-liens a{
  display:inline-flex;align-items:center;align-self:flex-start;min-height:38px;
  color:var(--muted);text-decoration:none;font-size:13.5px;
  border-bottom:1px solid transparent;transition:color .14s,border-color .14s;
}
.site-footer-liens a:hover{color:var(--gold-bright);border-bottom-color:var(--gold-deep)}
/* La ligne de cloture : ce qui doit etre dit, sans peser. */
.site-footer-bas{
  position:relative;max-width:1180px;margin:auto;
  padding:14px clamp(16px,4vw,40px) 26px;
  border-top:1px solid rgba(217,164,65,.10);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
}
.site-footer-legal{margin:0;font-size:11px;color:var(--muted-2)}
.site-footer-haut{
  appearance:none;cursor:pointer;background:none;border:0;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;
  color:var(--muted);font-family:var(--ui);font-size:11.5px;transition:color .14s;
}
.site-footer-haut:hover{color:var(--gold-bright)}
.site-footer-haut svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}