/* 10.10.2026 V1.29
PROJET WOW SERVER
CSS mini: 3
web/style.css
feuille de style partagee par toutes les pages du site (extraite d'index.html)

Liste des modifications faites :
21.09.2026 Menu (.site-nav) refait dans l'esprit WoW, sur demande explicite
           ("refait le menu, il faut l'esprit wow") : barre de cuir sombre
           avec double filet or et liseré lumineux, liens en Cinzel
           capitales dorees separes par des losanges, survol en lueur
           doree, lien actif souligne d'un filet or. Pur CSS : le meme
           balisage sert toutes les pages (site + armurerie).
08.09.2026 Ajout des variables --ok/--danger et des badges .badge-ok/
           .badge-suspect (vert/rouge), pour le statut de sante d'AHBot
           affiche dans informations.html (badges existants
           disponible/prevu/non-prevu inchanges).
06.09.2026 Fond de la nav (.site-nav) rendu plus transparent (rgba 0.82 ->
           0.45, flou augmente a 8px), sur demande explicite. Ajout de la
           mise en page "body.home" (page d'accueil en 3 colonnes tenant sur
           un seul ecran sans defilement vertical : telechargement / comptes
           en ligne / installation), avec repli en dessous de 1000px de
           large ou 700px de haut vers l'ancienne mise en page empilee.
           Ancien panneau fixe "En ligne" (body.has-online-panel, visible a
           partir de 1400px) retire, remplace par cette disposition.
05.09.2026 .site-nav .brand simplifie en pur logo (retrait du texte "Royaume
           FDG" a cote, sur demande explicite - les regles de police/texte
           devenues sans effet sont retirees). Ajout de .header-logo, gros
           logo centre utilise par index.html a la place du h1 texte
           "Telechargement du client WoW 3.3.5a".
05.09.2026 Palette adaptee aux couleurs du logo FDG (images/logo.png : fond
           bleu nuit, portail arcanique bleu/violet, texte or/bronze) sur
           demande explicite ("refait moi le site avec les couleurs adapte
           au logos"). Ajout des variables --arcane/--arcane-2 (bleu/violet
           electrique du portail), utilisees dans le halo de fond, le halo
           du titre, la marque de la nav (desormais accompagnee du logo) et
           les anneaux de l'icone de telechargement, en complement du
           doré/bronze deja en place plutot qu'a sa place (le bouton
           principal reste dore, comme le bandeau "FAMILLE DE GEEK" du
           logo).
04.09.2026 .bg-scene : la photo de fond (auparavant bg1.png fige) passe par
           la variable CSS --bg-photo (defaut bg1.png si le JS ne s'execute
           pas), sur demande explicite ("tu as des images de background
           bg[x].png, exploite les sur le site") - permet a site.js de
           choisir une image aleatoire parmi bg1 a bg6 a chaque chargement
           de page plutot que de n'utiliser que bg1.png.
31.08.2026 Creation initiale (extraction du <style> unique d'index.html pour
           pouvoir reutiliser le meme design sur plusieurs pages : addons.html,
           informations.html)
31.08.2026 Retrait du defilement fluide (scroll-behavior: smooth), sur retour
           "vire le" - effet non souhaite.
31.08.2026 Ajout de .account-pos (zone/position des comptes en ligne, affichee
           sous le nom dans la liste des comptes).
31.08.2026 Liste des comptes (ul.account-list) remplacee par un tableau
           (.account-table) avec colonne temps de jeu, sur demande explicite -
           regles .account-list/.account-pos retirees au profit de
           .table-wrap/.account-table.
31.08.2026 Ajout de separateurs verticaux entre les colonnes du tableau des
           comptes, sur demande explicite ("separe la position du player
           time") - la colonne Position et la colonne Temps de jeu se
           touchaient visuellement sans limite claire.
31.08.2026 Ajout de .online-panel (panneau fixe "joueurs en ligne" en haut a
           droite, sur demande explicite) et du decalage de .wrap vers la
           gauche pour lui laisser la place. Les deux sont scopes sous
           "body.has-online-panel" pour n'affecter que index.html (seule page
           qui a les donnees comptes/positions deja chargees en JS) et ne pas
           decaler le contenu des autres pages qui partagent ce fichier CSS
           sans avoir ce panneau dans leur HTML.
31.08.2026 Retour "la zone du milieu est tres fine" : .wrap agrandi de 780px a
           960px (toutes pages). Decalage de .wrap pour le panneau "En ligne"
           recalcule en consequence : passage d'un transform a pixels fixes a
           un calc() proportionnel a la largeur d'ecran (marge gauche =
           50vw - 660px), qui garantit qu'il n'y a jamais de chevauchement
           avec le panneau quel que soit l'ecran >= 1400px (seuil relacule
           lui aussi suite a l'agrandissement de .wrap), au lieu d'un decalage
           fixe qui ne restait correct que pres de l'ancien seuil.
31.08.2026 Retour "Compte de jeu doit etre supprime et les autres joueurs non
           connecte doivent apparaitre dans le cadre en haut a droite, les en
           ligne en 1er" : suppression des regles .table-wrap/.account-table/
           .account-dot (carte "Compte de jeu" retiree d'index.html, ces
           regles n'ont plus aucun usage). Le panneau .online-panel liste
           desormais tous les comptes (plus seulement ceux en ligne), tries
           en ligne d'abord, avec un point .oi-dot (gris hors ligne, turquoise
           allume en ligne) - remplace .account-dot. Le panneau est visible
           par defaut comme une carte normale dans le flux (plus seulement a
           partir de 1400px) puisque c'est maintenant la seule source
           d'information sur les comptes/joueurs de la page ; il ne devient
           un panneau fixe en haut a droite qu'a partir de 1400px.
02.10.2026 Accueil : logo central place en haut de la colonne centrale (.home-center,
           au-dessus du panneau En ligne) au lieu d'un en-tete pleine largeur ;
           sur demande explicite.
02.10.2026 Vignettes 3D des personnages connectes sous la liste En ligne (.online-3d,
           .o3d-tile, niveau .o3d-lvl toujours visible) ; sur demande explicite.
02.10.2026 Accueil en 2 colonnes (telechargement + installation fusionnes / colonne
           centrale elargie) ; vignettes .o3d-* remplacees par des cartes joueurs
           .opc-* (modele 3D, nom, niveau, lieu) et pastilles hors ligne ; sur demande explicite.
02.10.2026 Bouton .btn-install et modal .install-modal (notice d'installation) ; sur
           demande explicite.
02.10.2026 Survol des cartes joueurs (.opc) : plus de deplacement, halo + fond eclairci ;
           sur demande explicite ("le hover sur le personnage connecte est pas super").
02.10.2026 Indicateur de chargement (.char3d-charge, cercle tournant) dans la zone 3D des
           cartes joueurs ; sur demande explicite ("met des loading si ca charge").
02.10.2026 .opc-champion : grande carte du meilleur personnage quand personne n'est
           connecte ; sur demande explicite.
02.10.2026 .opc-champion remplace par .top1 (ruban "Top 1", piedestal lumineux, pastilles
           Niveau/iLvl/Reputation) ; sur demande explicite ("le top 1 arrange mieu la presentation").
02.10.2026 Allegement ("ca lag toujour") : plus de backdrop-filter sur .site-nav (fond opaque),
           halo de .dl-icon fixe (ombre animee repeinte a chaque image), particules composees (will-change).
02.10.2026 Podium (.podium, .top-petit) : Top 2 (argent) et Top 3 (bronze) plus petits sous le Top 1 ;
           sur demande explicite ("met les top 2 et 3 en plus petit en dessou").
02.10.2026 Accueil : logo deplace en haut de la carte de gauche (.download-card header), contenu
           centre en dessous ; sur demande explicite.
02.10.2026 Logo de l'accueil agrandi (170px mobile, 200px max en grand ecran) ; sur demande explicite.
10.10.2026 V1.25 Accueil (page sans defilement) : modeles 3D du podium en hauteur proportionnelle a l'ecran
           (Top 1 : 22vh de 130 a 340px, Top 2/3 : 14vh de 90 a 180px) et defilement dans .online-panel ;
           sur demande explicite (« on ne voit pas le bas sinon car pas de scroll »).
10.10.2026 V1.26 Accueil : le defilement des cartes n'agissait pas (overflow:hidden de « .home-columns .card » plus
           specifique) -> carte de telechargement et panneau en ligne defilent vraiment, contenu de la carte
           de gauche non ecrase (flex-shrink:0) ; sur demande (ecrans 1080 ne montrant plus le bas).
10.10.2026 V1.27 .xp-bar / .xp-fill : barre de progression du niveau en cours collee en bas des cartes joueurs (.opc)
           et du podium (.top1), sur toute la largeur ; sur demande explicite.
10.10.2026 V1.28 Barre decoupee en 20 segments (.xp-seg, remplissage par --p) et bleu glace au lieu de jaune ; sur demande explicite.
10.10.2026 V1.29 Separations des 20 segments en noir (2px) sur fond bleu nuit pour qu'elles se voient, barre a 10px ; sur demande explicite.
*/

:root {
  color-scheme: dark;
  --bg: #090b10;
  --panel: #12151d;
  --panel-2: #161a24;
  --border: #2c3244;
  --text: #dfe3ea;
  --muted: #97a0b3;
  --accent: #e3c26e;
  --accent-dim: #a8863f;
  --arcane: #6ea8ff;
  --arcane-2: #9d7bff;
  --torrent: #6ea8ff;
  --warn: #e0a94c;
  --ok: #5fbf7a;
  --danger: #e0625c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  background: #05060a;
}

/* --- ambiance de fond --- */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: #05060a;
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(217,180,92,0.10), transparent 60%),
    radial-gradient(ellipse 700px 420px at 12% 105%, rgba(110,168,255,0.10), transparent 60%),
    radial-gradient(ellipse 700px 420px at 88% 105%, rgba(157,123,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(5,6,10,0.55) 0%, rgba(9,11,16,0.75) 45%, #05060a 100%),
    var(--bg-photo, url("bg1.png"));
  background-position: center, center, center, center, center 30%;
  background-size: cover, cover, cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.bg-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 52% 22%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 68% 6%, rgba(255,255,255,0.35), transparent),
    radial-gradient(2px 2px at 78% 16%, rgba(217,180,92,0.5), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 5% 28%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 40% 14%, rgba(110,168,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 85% 24%, rgba(157,123,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 420px 420px;
  opacity: 0.8;
}

/* --- barre de navigation fixe (esprit WoW : cuir sombre, filets or, Cinzel) --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 26px 12px;
  background:
    linear-gradient(180deg, rgba(58,42,24,0.55) 0%, rgba(20,14,9,0.82) 55%, rgba(8,6,4,0.9) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 5px),
    rgba(8,6,4,0.9);
  /* plus de backdrop-filter : le flou etait recalcule a chaque image (particules, modeles 3D) */
  border-top: 1px solid rgba(227,194,110,0.35);
  border-bottom: 2px solid var(--accent-dim);
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,235,180,0.12),
    0 4px 14px rgba(0,0,0,0.6),
    0 1px 0 rgba(227,194,110,0.25);
  flex-wrap: wrap;
}
/* liseré lumineux sous la barre, plus vif au centre */
.site-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,194,110,0.7) 25%, #ffe9a8 50%, rgba(227,194,110,0.7) 75%, transparent);
  pointer-events: none;
}
.site-nav .brand {
  display: flex;
  align-items: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(227,194,110,0.35);
}
.site-nav .brand img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(110,168,255,0.55));
}

/* --- logo central de l'en-tete (remplace le h1 texte sur index.html) --- */
.header-logo {
  display: block;
  margin: 0 auto;
  height: 170px;
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 0 30px rgba(217,180,92,0.25)) drop-shadow(0 0 60px rgba(110,168,255,0.18));
}
.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.site-nav .nav-link {
  position: relative;
  padding: 8px 16px;
  font-family: "Cinzel", "Segoe UI", serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #cdbb8c;
  text-shadow: 0 1px 2px #000;
  transition: color .18s, text-shadow .18s;
}
/* losange separateur entre deux liens */
.site-nav .nav-link + .nav-link::before {
  content: "";
  position: absolute;
  left: -3px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  background: var(--accent-dim);
  transform: rotate(45deg);
  opacity: 0.7;
  box-shadow: 0 0 4px rgba(227,194,110,0.4);
}
/* filet or qui se deploie sous le lien */
.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transition: transform .22s ease-out;
}
.site-nav .nav-link:hover {
  color: #fff1c2;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(255,214,120,0.75), 0 0 22px rgba(227,194,110,0.4);
}
.site-nav .nav-link:hover::after { transform: scaleX(0.7); }
.site-nav .nav-link.active {
  color: #ffe08a;
  text-shadow: 0 1px 2px #000, 0 0 12px rgba(255,200,90,0.6);
}
.site-nav .nav-link.active::after { transform: scaleX(1); box-shadow: 0 0 8px rgba(227,194,110,0.8); }
@media (max-width: 700px) {
  .site-nav { padding: 8px 12px 10px; justify-content: center; }
  .site-nav .nav-link { padding: 6px 10px; font-size: 0.72rem; }
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}
h1, h2, .fancy { font-family: "Cinzel", "Segoe UI", serif; }

header { text-align: center; margin-bottom: 44px; }
h1 {
  margin: 0 0 14px;
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(217,180,92,0.25), 0 0 60px rgba(110,168,255,0.18);
}
header p { color: var(--muted); margin: 0; font-size: 1rem; }

/* --- carte ornementee (coins + separateur diamant) --- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 30px 32px;
  margin-bottom: 26px;
}
.card::before, .card::after,
.card .corner-br, .card .corner-bl {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-dim);
  opacity: 0.7;
}
.card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.card::after { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.card .corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.card .corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.card h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 20px;
}
.divider::before, .divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.divider span { color: var(--accent-dim); font-size: 0.7rem; }

/* --- particules flottantes --- */
.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  bottom: -10px;
  animation: particle-float 8s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes particle-float {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  20% { opacity: 0.7; }
  80% { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-100vh) scale(1.4); }
}
@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
header h1 { animation: fade-in-down 0.7s ease-out both; }
header p { animation: fade-in-up 0.7s ease-out 0.15s both; }
.card { animation: fade-in-up 0.6s ease-out both; }
.wrap .card:nth-of-type(1) { animation-delay: 0.05s; }
.wrap .card:nth-of-type(2) { animation-delay: 0.12s; }
.wrap .card:nth-of-type(3) { animation-delay: 0.19s; }

/* --- carte de telechargement --- */
.download-card { text-align: center; position: relative; z-index: 1; }
.dl-icon {
  width: 92px; height: 92px;
  margin: 4px auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(217,180,92,0.22), rgba(217,180,92,0.04));
  border: 2px solid rgba(217,180,92,0.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  position: relative;
  box-shadow: 0 0 46px 12px rgba(217,180,92,0.10), 0 0 70px 18px rgba(110,168,255,0.06); /* halo fixe : l'ombre animee (dl-pulse) etait repeinte a chaque image */
}
.dl-icon::before, .dl-icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(217,180,92,0.15);
  animation: dl-ring 4s ease-in-out infinite;
}
.dl-icon::before { inset: -8px; }
.dl-icon::after { inset: -17px; border-color: rgba(110,168,255,0.18); animation-delay: 1s; }
@keyframes dl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,180,92,0.2); }
  50% { box-shadow: 0 0 46px 12px rgba(217,180,92,0.12), 0 0 70px 18px rgba(110,168,255,0.08); }
}
@keyframes dl-ring {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.08); opacity: 1; }
}
.dl-icon svg { width: 36px; height: 36px; filter: drop-shadow(0 0 8px rgba(217,180,92,0.4)); }
.download-card h2.title {
  font-size: 1.5rem;
  text-transform: none;
  justify-content: center;
  margin-bottom: 4px;
}
.download-card .sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 22px;
}
.spec-row {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.spec-row .spec {
  padding: 0 22px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.spec-row .spec:last-child { border-right: none; }
.spec-row .value {
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: var(--accent);
  font-size: 1.15rem;
}
.spec-row .label {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.btn-download {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #e6c169, var(--accent-dim));
  color: #16130a;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 19px 40px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(217,180,92,0.25);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.175,.885,.32,1.275), box-shadow 0.3s;
}
.btn-download:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(217,180,92,0.4); }
.btn-download::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: btn-shine 3.2s ease-in-out infinite;
}
@keyframes btn-shine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}
.btn-download svg { width: 20px; height: 20px; animation: arrow-bounce 2s ease-in-out infinite; }
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.download-card .hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 16px 0 0;
}

/* --- bouton secondaire (lien externe, etc.) --- */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--accent);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 10px;
  border: 1px solid var(--accent-dim);
  transition: background 0.25s, transform 0.25s;
}
.btn-outline:hover { background: rgba(217,180,92,0.1); transform: translateY(-2px); }

/* --- ligne realmlist --- */
.realmlist-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.realmlist-bar .rl-label {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.realmlist-bar code {
  flex: 1;
  min-width: 220px;
}
.btn-copy {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.btn-copy:hover { border-color: var(--accent-dim); color: var(--accent); }
.btn-copy.copied { border-color: var(--torrent); color: var(--torrent); }

code, .mono {
  font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
  background: #0b0d11;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.92em;
  color: var(--accent);
  display: inline-block;
}

ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
ol.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
}
ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1508;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}

.account-loading, .account-error { color: var(--muted); font-family: inherit; white-space: normal !important; }

.kv-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
}
.kv-row:last-child { margin-bottom: 0; }
.kv-row .k { color: var(--accent); font-weight: 700; }
.kv-row .v { color: var(--muted); }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.stat {
  background: #0b0d11;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.stat .label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.stat .value { font-size: 1rem; margin-top: 2px; color: var(--text); }

/* --- lignes de fonctionnalites/taux avec badge de statut (page Informations) --- */
.feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.feature-row:last-child { border-bottom: none; }
.feature-row .f-name { color: var(--text); }
.feature-row .f-name .f-sub { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.badge {
  flex-shrink: 0;
  font-family: "Cinzel", serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.badge-disponible { color: var(--torrent); border-color: rgba(110,168,255,0.5); background: rgba(110,168,255,0.08); }
.badge-prevu { color: var(--warn); border-color: rgba(224,169,76,0.5); background: rgba(224,169,76,0.08); }
.badge-non-prevu { color: var(--muted); border-color: var(--border); background: rgba(151,160,179,0.06); }
.badge-ok { color: var(--ok); border-color: rgba(95,191,122,0.5); background: rgba(95,191,122,0.08); }
.badge-suspect { color: var(--danger); border-color: rgba(224,98,92,0.5); background: rgba(224,98,92,0.08); }

.status-note {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 18px;
}

footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 40px;
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .kv-row { grid-template-columns: 1fr; }
  .spec-row .spec { padding: 0 14px 12px; border-right: none; border-bottom: 1px solid var(--border); }
  .spec-row .spec:last-child { border-bottom: none; }
  .feature-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --- panneau "joueurs" (tous les comptes, en ligne en premier) ---
   Colonne centrale de la page d'accueil (voir body.home plus bas) ; sur les
   autres largeurs/ecrans (retour a la mise en page empilee), reste une carte
   normale dans le flux. */
.online-panel h3 {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.online-panel h3 .op-count {
  color: var(--muted);
  font-weight: 600;
}
.online-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.online-item .oi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.online-item .oi-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.online-item .oi-dot {
  flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: #5a6274;
}
.online-item.is-online .oi-dot {
  background: var(--torrent);
  box-shadow: 0 0 6px var(--torrent);
}
.online-item .oi-name {
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.online-item:not(.is-online) .oi-name { color: var(--muted); }
.online-item .oi-played {
  color: var(--muted);
  font-size: 0.72rem;
  font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
  flex-shrink: 0;
}
.online-item .oi-pos {
  color: var(--muted);
  font-size: 0.74rem;
  margin: 2px 0 0 16px;
}
/* cartes des joueurs connectes (modele 3D BabylonJS + nom, niveau, lieu) */
.op-players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
  margin-top: 10px;
  align-content: start;
}
.opc {
  display: flex;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid #3d7bd9;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(0,0,0,0.25));
  color: var(--text);
  text-decoration: none;
  transition: background .25s, box-shadow .25s, border-color .25s;
  min-width: 0;
}
.opc.opc-horde { border-left-color: #c8372d; }
.opc:hover {
  background: linear-gradient(135deg, rgba(227,194,110,0.10), rgba(0,0,0,0.30));
  border-color: var(--accent-dim);
  border-left-color: #3d7bd9;
  box-shadow: 0 0 0 1px var(--accent-dim), 0 6px 22px rgba(0,0,0,0.55);
}
.opc.opc-horde:hover { border-left-color: #c8372d; }
.opc:hover .opc-scene { background: radial-gradient(ellipse at 50% 85%, rgba(232,185,35,0.32), transparent 72%); }
.opc:hover .opc-zone { color: var(--accent); }
.opc .opc-scene { transition: background .25s; }
.opc { position: relative; overflow: hidden; padding-bottom: 16px; }
/* barre de progression du niveau en cours : collee en bas de la carte, sur toute sa largeur */
.xp-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; display: flex; background: #1c3a52; border-top: 1px solid #000; }
.xp-seg { flex: 1 1 0; min-width: 0; height: 100%; border-right: 2px solid #000; background: linear-gradient(90deg, #7fd8ff var(--p, 0%), transparent var(--p, 0%)); }
.xp-seg:last-child { border-right: 0; }
.opc-scene {
  position: relative;
  flex: 0 0 130px;
  height: 190px;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 85%, rgba(232,185,35,0.16), transparent 70%);
  overflow: hidden;
}
.opc-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
/* personne en ligne : Top 1 du royaume, vitrine centree (ruban, piedestal lumineux, pastilles de stats) */
.top1 {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin: 4px 0 12px;
  padding: 0 14px 16px;
  border: 1px solid var(--accent-dim);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(232,185,35,0.20), transparent 60%),
    linear-gradient(180deg, rgba(227,194,110,0.08), rgba(0,0,0,0.35));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 8px 26px rgba(0,0,0,0.5);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow .25s, border-color .25s;
}
.top1:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim), 0 0 26px rgba(232,185,35,0.25); }
.top1-ruban {
  margin: 0 0 4px;
  padding: 5px 22px 6px;
  background: linear-gradient(180deg, #e6c169, var(--accent-dim));
  color: #1a1206;
  font: 700 0.82rem "Cinzel", serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.top1-scene {
  position: relative;
  width: 100%; max-width: 280px; height: 340px;
}
.top1-scene::after { /* piedestal sous les pieds du personnage */
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 6px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232,185,35,0.45), transparent 70%);
  pointer-events: none;
}
.top1-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.top1.top1-sans .top1-scene { display: none; }
.top1-nom { font: 700 1.6rem "Cinzel", serif; line-height: 1.15; text-shadow: 0 2px 6px rgba(0,0,0,0.8); }
.top1-rc { margin-top: 2px; color: var(--muted); font-size: 0.88rem; }
.top1-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.top1-stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 78px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: rgba(0,0,0,0.35);
}
.top1-val { color: var(--accent); font: 700 1.2rem "Cinzel", serif; }
.top1-lib { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.top1-acc { color: var(--muted); font-size: 0.8rem; }
/* podium : Top 2 et 3 cote a cote, en plus petit, sous le Top 1 */
.podium { margin-bottom: 12px; }
.podium .top1 { margin-bottom: 0; }
.podium-suivants { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.podium-suivants:empty { display: none; }
.top1.top-petit { padding: 0 8px 10px; margin: 0; border-color: var(--border); }
.top-petit .top1-ruban { padding: 3px 14px 4px; font-size: 0.7rem; background: linear-gradient(180deg, #d9dde3, #8c939c); }
.top-petit + .top-petit .top1-ruban { background: linear-gradient(180deg, #e2a46a, #9a5a2a); }
.top-petit .top1-scene { max-width: 150px; height: 180px; }
.top-petit .top1-nom { font-size: 1.05rem; }
.top-petit .top1-rc { font-size: 0.74rem; }
.top-petit .top1-stats { gap: 4px; margin: 8px 0 6px; }
.top-petit .top1-stat { min-width: 0; padding: 3px 6px; }
.top-petit .top1-val { font-size: 0.9rem; }
.top-petit .top1-lib { font-size: 0.58rem; }
.top-petit .top1-acc { font-size: 0.72rem; }
@media (max-width: 420px) { .podium-suivants { grid-template-columns: 1fr; } }
/* indicateur de chargement du modele 3D (retire une fois la scene prete) */
.top1-scene .char3d-charge,
.opc-scene .char3d-charge {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: .75rem; color: var(--text-dim, #b9a98a); pointer-events: none;
}
.top1-scene .char3d-charge::before,
.opc-scene .char3d-charge::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(232,185,35,0.25); border-top-color: #e8b923;
  animation: opc-tour .9s linear infinite;
}
@keyframes opc-tour { to { transform: rotate(360deg); } }
html[data-theme="glace"] .top1-scene .char3d-charge::before,
html[data-theme="glace"] .opc-scene .char3d-charge::before { border-color: rgba(127,216,255,0.25); border-top-color: #7fd8ff; }
.opc-lvl {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 1px 9px;
  border-radius: 10px;
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--accent);
  color: var(--accent);
  font: 700 0.75rem/1.4 "Segoe UI", sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.opc-sans .opc-scene::after { content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 2.4rem; }
.opc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.opc-name {
  font-family: "Cinzel", serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-shadow: 0 1px 3px #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opc-rc { color: var(--muted); font-size: 0.8rem; margin-bottom: 8px; }
.opc-zone { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.opc-area { color: var(--accent); font-size: 0.82rem; }
.opc-coord {
  color: var(--muted);
  font-size: 0.72rem;
  font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
}
.opc-area:empty, .opc-coord:empty, .opc-played:empty { display: none; }
.opc-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.74rem;
}
.opc-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-vide { color: var(--muted); font-size: 0.9rem; text-align: center; margin: 24px 0; }
.op-vide[hidden] { display: none; }
.op-offline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.op-offline:empty { display: none; }
.op-off-title {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}
.op-chip {
  padding: 2px 9px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.74rem;
}
/* bouton "Comment installer" + notice d'installation en modal (dialog natif) */
.btn-install {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  color: var(--accent);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn-install:hover { background: rgba(227,194,110,0.1); border-color: var(--accent); }
.install-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 30px 32px 26px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.install-modal::backdrop { background: rgba(4,6,10,0.75); backdrop-filter: blur(3px); }
.install-modal[open] { animation: fade-in-up 0.25s ease-out both; }
.install-modal .install-title { margin: 0; font-family: "Cinzel", serif; font-size: 1.3rem; color: var(--accent); text-align: center; }
.install-modal .steps { text-align: left; }
.im-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
}
.im-close:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) { .install-modal { padding: 24px 18px 20px; } }

/* --- page d'accueil : 3 colonnes tenant sur un seul ecran, sans defilement
   vertical (telechargement / comptes en ligne / installation), sur demande
   explicite. Le fallback en dessous de 1000px de large ou 700px de haut
   revient a l'ancienne mise en page empilee et defilante, plus lisible sur
   petit ecran qu'une grille compressee. */
@media (min-width: 1001px) and (min-height: 701px) {
  body.home {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.home .site-nav { flex: 0 0 auto; }
  body.home .wrap {
    flex: 1;
    min-height: 0;
    max-width: 1400px;
    width: 100%;
    padding: 20px 24px 14px;
    display: flex;
    flex-direction: column;
  }
  body.home .home-center {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body.home .download-card header {
    flex: 0 0 auto;
    margin: 0 0 16px;
  }
  body.home .header-logo { height: auto; max-height: 200px; max-width: 100%; }
  /* logo colle en haut de la carte, le reste centre verticalement dans l'espace restant */
  body.home .download-card .dl-icon { margin-top: auto; }
  body.home .download-card .btn-install { margin-bottom: auto; }
  body.home .home-center .online-panel { flex: 1; }
  body.home .home-columns {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(340px, 1fr) 2fr;
    gap: 22px;
    align-items: stretch;
  }
  body.home .home-columns .card {
    margin-bottom: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.home .download-card { justify-content: flex-start; }
  /* specificite superieure a « .home-columns .card { overflow: hidden } » sinon le defilement est sans effet */
  body.home .home-columns .download-card,
  body.home .home-columns .online-panel { overflow-x: hidden; overflow-y: auto; }
  body.home .download-card > * { flex-shrink: 0; }
  body.home .online-panel { display: flex; flex-direction: column; }
  body.home .op-players { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
  /* personne en ligne : podium (Top 1/2/3) -> modeles 3D proportionnels a la hauteur de l'ecran, et defilement
     dans le panneau si le bas depasse quand meme (la page elle-meme ne defile pas ici) */
  body.home .top1-scene { height: clamp(130px, 22vh, 340px); }
  body.home .top-petit .top1-scene { height: clamp(90px, 14vh, 180px); }
  body.home footer { flex: 0 0 auto; margin-top: 12px; }
}