/* 10.10.2026 V1.4
PROJET WOW SERVER
CSS mini: CSS3 (variables, :has non requis)
web/theme-glace.css
theme "Glace" du site (style du launcher / de l'ecran de connexion WoW FDG), actif quand <html data-theme="glace">

Liste des modifications faites :
02.10.2026 Creation initiale, sur demande explicite ("pour le site, il faut un systeme de theme. garde l'actuel et
           recrée en un avec le style du launcher. l'utilisateur pourra choisir") : fond Couronne de glace
           (images/fond-glace.jpg, decoupe sans interface de launcher/sources/ecran-connexion.png), police Friz
           Quadrata du jeu (fonts/frizqt.ttf), texte or #FFD100 contoure de noir, panneaux sombres translucides a
           double bordure (noir + liseré gris), boutons et barres facon launcher. Le theme par defaut (style.css +
           admin.css) n'est pas modifie : toutes les regles sont limitees a html[data-theme="glace"]. Choix du
           theme : theme.js (localStorage).
02.10.2026 Plus de bleu glace : panneaux/bordures teintes bleu nuit, liseré bleu, cartes joueurs de
           l'accueil et fiche personnage (player.php : hero, emplacements, groupes, reputations, modals)
           en bleu glace ; sur demande explicite ("met plus de bleu en theme glace surtout dans player.php").
02.10.2026 Carte Top 1 de l'accueil (.top1) en bleu glace ; plus de backdrop-filter sur le panneau des joueurs
           (recalcule derriere les modeles 3D a chaque image) ; sur demande explicite ("optimise le rendu 3d qui lag").
02.10.2026 Plus aucun backdrop-filter (barre de menu, panneaux) : fonds plus opaques a la place ; sur demande
           explicite ("ca lag toujour").
10.10.2026 V1.4 Barre d'XP de la fiche personnage (.pl-xp i) : remplissage partiel par segment (--p) au lieu d'un
           degrade plein qui l'affichait toujours pleine ; sur demande explicite.
*/

@font-face {
  font-family: "Friz FDG";
  src: url("fonts/frizqt.ttf") format("truetype");
  font-display: swap;
}

html[data-theme="glace"] {
  color-scheme: dark;
  --bg: #050b12;
  --panel: rgba(6, 16, 28, 0.86);
  --panel-2: rgba(10, 24, 40, 0.80);
  --border: #2f5878;
  --text: #f2f7fb;
  --muted: #a6c6dc;
  --accent: #ffd100;
  --accent-dim: #c49a00;
  --arcane: #7fd8ff;
  --arcane-2: #a8c8ff;
  --torrent: #7fd8ff;
  /* variables propres a l'armurerie (admin.css) */
  --fond: #050b12;
  --panneau: rgba(6, 16, 28, 0.80);
  --panneau2: rgba(12, 28, 46, 0.84);
  --bord: #2f5878;
  --or: #ffd100;
  --or-clair: #ffe25c;
  --texte: #f2f7fb;
  --muet: #a6c6dc;
  --glace: #7fd8ff;
  --glace-lisere: #3d6f94;
  --glace-contour: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 3px rgba(0,0,0,0.9);
  --glace-titre: "Friz FDG", "Cinzel", Georgia, serif;
  background: #050b12;
}

/* --- fond : ciel de la Couronne de glace, fondu vers le bleu nuit --- */
html[data-theme="glace"] body { background: transparent; }
html[data-theme="glace"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,11,18,0.10) 0%, rgba(5,11,18,0.45) 38%, rgba(5,11,18,0.88) 66%, #050b12 80%),
    url("images/fond-glace.jpg") 30% top / auto 80vh no-repeat,
    #050b12;
}
@media (min-aspect-ratio: 247/100) { /* ecran plus large que l'image a 80vh de haut : on l'etire en largeur */
  html[data-theme="glace"] body::before {
    background-size: auto, 100% auto, auto;
  }
}
html[data-theme="glace"] .bg-scene { display: none; }
/* les particules dorees deviennent de la neige */
html[data-theme="glace"] .particle { background: #e6f7ff; box-shadow: 0 0 4px rgba(200,240,255,0.8); }

/* --- textes : police du jeu, or contoure de noir --- */
html[data-theme="glace"] h1,
html[data-theme="glace"] h2,
html[data-theme="glace"] h3,
html[data-theme="glace"] .fancy {
  font-family: var(--glace-titre);
  font-weight: normal;
  color: var(--accent);
  text-shadow: var(--glace-contour);
  letter-spacing: 0.02em;
}
html[data-theme="glace"] header p { color: #e8eef3; text-shadow: var(--glace-contour); }

/* --- barre de navigation : bandeau sombre a double bordure --- */
html[data-theme="glace"] .site-nav {
  background: rgba(4, 7, 11, 0.94);
  backdrop-filter: none;
  border-top: 0;
  border-bottom: 1px solid #000;
  box-shadow: inset 0 -2px 0 #484848, 0 4px 14px rgba(0,0,0,0.6);
}
html[data-theme="glace"] .site-nav::after { background: linear-gradient(90deg, transparent, rgba(255,209,0,0.45) 50%, transparent); }
html[data-theme="glace"] .site-nav .brand { font-family: var(--glace-titre); font-weight: normal; color: var(--accent); text-shadow: var(--glace-contour); }
html[data-theme="glace"] .site-nav .nav-link {
  font-family: var(--glace-titre);
  font-weight: normal;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--accent);
  text-shadow: var(--glace-contour);
}
html[data-theme="glace"] .site-nav .nav-link + .nav-link::before { background: #484848; box-shadow: none; }
html[data-theme="glace"] .site-nav .nav-link::after { background: linear-gradient(90deg, transparent, #fff, transparent); }
html[data-theme="glace"] .site-nav .nav-link:hover,
html[data-theme="glace"] .site-nav .nav-link.active { color: #fff; text-shadow: var(--glace-contour); }
html[data-theme="glace"] .site-nav .nav-link.active::after { box-shadow: 0 0 6px rgba(255,255,255,0.6); }

/* --- panneaux : fond sombre translucide, bordure noire + liseré gris (Style.Cadre du launcher) --- */
html[data-theme="glace"] .card,
html[data-theme="glace"] .map-bubble,
html[data-theme="glace"] .pl-card,
html[data-theme="glace"] .item-card {
  background: var(--panel);
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--glace-lisere), 0 6px 18px rgba(0,0,0,0.55), 0 0 18px rgba(127,216,255,0.08);
}
html[data-theme="glace"] .card::before,
html[data-theme="glace"] .card::after,
html[data-theme="glace"] .card .corner-br,
html[data-theme="glace"] .card .corner-bl { border-color: var(--accent-dim); opacity: 0.55; }
html[data-theme="glace"] .card h2 { text-transform: none; font-size: 1.15rem; }
html[data-theme="glace"] .divider span { color: var(--accent); }

/* --- boutons : comme "Jouer" / "Connexion" du launcher --- */
html[data-theme="glace"] .btn-download,
html[data-theme="glace"] .btn-outline,
html[data-theme="glace"] .btn-copy,
html[data-theme="glace"] .nav-restart,
html[data-theme="glace"] .admin-form button,
html[data-theme="glace"] .worldmap-zoom button {
  background: rgba(6, 8, 12, 0.86);
  color: var(--accent);
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #5a5a5a;
  font-family: var(--glace-titre);
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0.02em;
  text-shadow: var(--glace-contour);
}
html[data-theme="glace"] .btn-download { font-size: 1.3rem; }
html[data-theme="glace"] .btn-download::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent); }
html[data-theme="glace"] .btn-download:hover,
html[data-theme="glace"] .btn-outline:hover,
html[data-theme="glace"] .btn-copy:hover,
html[data-theme="glace"] .worldmap-zoom button:hover {
  color: #fff;
  background: rgba(14, 18, 26, 0.92);
  box-shadow: inset 0 0 0 1px #8a8a8a, 0 0 14px rgba(127,216,255,0.25);
}
html[data-theme="glace"] .nav-restart:hover { background: #5a1410; color: #fff; }

/* --- champs de saisie : cadre sombre comme "Nom de compte" de l'ecran de connexion --- */
html[data-theme="glace"] input[type="text"],
html[data-theme="glace"] input[type="number"],
html[data-theme="glace"] input[type="password"],
html[data-theme="glace"] input[type="search"],
html[data-theme="glace"] select,
html[data-theme="glace"] textarea {
  background: rgba(10, 16, 22, 0.9);
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #5a5a5a;
  color: #fff;
}
html[data-theme="glace"] code,
html[data-theme="glace"] .mono,
html[data-theme="glace"] .stat { background: rgba(4, 6, 10, 0.85); border-color: #3a3a3a; border-radius: 0; }

/* --- puces numerotees et barres : degrade or du launcher (BarreWow) --- */
html[data-theme="glace"] ol.steps li::before { background: linear-gradient(180deg, #ffe25c, #c48000); color: #000; border-radius: 0; box-shadow: 0 0 0 1px #000; }
html[data-theme="glace"] .qt-bar i { background: linear-gradient(180deg, #ffe25c, #c48000); }
/* barre d'XP de la fiche : remplissage partiel par segment (--p), sinon la barre apparait toujours pleine */
html[data-theme="glace"] .pl-xp i { background: linear-gradient(180deg, #ffe25c, #c48000) 0 0 / var(--p, 0%) 100% no-repeat; }

/* --- tableaux --- */
html[data-theme="glace"] .admin-table th { color: var(--accent); text-shadow: var(--glace-contour); font-family: var(--glace-titre); font-weight: normal; }

/* --- teinte glace (bleu) : cartes joueurs de l'accueil --- */
html[data-theme="glace"] .opc { background: linear-gradient(135deg, rgba(60,140,200,0.12), rgba(4,10,20,0.55)); border-color: var(--glace-lisere); }
html[data-theme="glace"] .opc-scene { background: radial-gradient(ellipse at 50% 85%, rgba(127,216,255,0.22), transparent 70%); }
html[data-theme="glace"] .opc:hover {
  background: linear-gradient(135deg, rgba(127,216,255,0.20), rgba(4,10,20,0.6));
  border-color: var(--glace);
  box-shadow: 0 0 0 1px var(--glace), 0 0 22px rgba(127,216,255,0.35);
}
html[data-theme="glace"] .opc:hover .opc-scene { background: radial-gradient(ellipse at 50% 85%, rgba(127,216,255,0.42), transparent 72%); }
html[data-theme="glace"] .opc:hover .opc-zone,
html[data-theme="glace"] .opc-area { color: var(--glace); }
html[data-theme="glace"] .opc-lvl { border-color: var(--glace); color: #fff; background: rgba(4,14,26,0.85); }
html[data-theme="glace"] .op-chip { border-color: var(--glace-lisere); }
/* le flou d'arriere-plan etait recalcule a chaque image des modeles 3D (lag) : fond plus opaque a la place */
html[data-theme="glace"] .online-panel { backdrop-filter: none; background: rgba(6, 16, 28, 0.88); }
html[data-theme="glace"] .top1 {
  border: 1px solid #000;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(127,216,255,0.22), transparent 60%),
    linear-gradient(180deg, rgba(60,140,200,0.14), rgba(4,10,20,0.6));
  box-shadow: inset 0 0 0 1px var(--glace-lisere), 0 0 22px rgba(127,216,255,0.12);
}
html[data-theme="glace"] .top1:hover { box-shadow: inset 0 0 0 1px var(--glace), 0 0 26px rgba(127,216,255,0.35); }
html[data-theme="glace"] .top1-ruban { background: linear-gradient(180deg, #ffe25c, #c48000); color: #000; border-radius: 0; box-shadow: 0 0 0 1px #000, 0 3px 10px rgba(0,0,0,0.5); font-family: var(--glace-titre); font-weight: normal; }
html[data-theme="glace"] .top-petit .top1-ruban { background: linear-gradient(180deg, #e6ecf2, #8a96a3); }
html[data-theme="glace"] .top-petit + .top-petit .top1-ruban { background: linear-gradient(180deg, #e8a868, #94521f); }
html[data-theme="glace"] .top1-scene::after { background: radial-gradient(ellipse, rgba(127,216,255,0.5), transparent 70%); }
html[data-theme="glace"] .top1-nom { font-family: var(--glace-titre); font-weight: normal; text-shadow: var(--glace-contour); }
html[data-theme="glace"] .top1-stat { background: rgba(4,14,26,0.85); border-color: var(--glace-lisere); border-radius: 0; }
html[data-theme="glace"] .top1-val { font-family: var(--glace-titre); font-weight: normal; text-shadow: var(--glace-contour); }
html[data-theme="glace"] .btn-install { border-color: var(--glace-lisere); background: rgba(6,16,28,0.8); }
html[data-theme="glace"] .btn-install:hover { border-color: var(--glace); box-shadow: 0 0 14px rgba(127,216,255,0.3); }
html[data-theme="glace"] .install-modal { border-color: var(--glace-lisere); background: rgba(6,16,28,0.95); }
html[data-theme="glace"] .install-modal::backdrop { background: rgba(2,10,20,0.75); }

/* --- teinte glace (bleu) : fiche personnage de l'armurerie (player.php) --- */
html[data-theme="glace"] .hero,
html[data-theme="glace"] .hero.has-scene {
  background: linear-gradient(180deg, rgba(10,30,52,0.78), rgba(4,12,24,0.82));
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--glace-lisere), 0 0 30px rgba(127,216,255,0.12);
}
html[data-theme="glace"] .pl-scene { filter: saturate(0.85) hue-rotate(-8deg); }
html[data-theme="glace"] .pl-scene::after { background: linear-gradient(to bottom, rgba(4,16,32,0.55), rgba(8,30,56,0.25) 35%, rgba(4,12,26,0.8)); }
html[data-theme="glace"] .rendu .char3d { background: radial-gradient(ellipse at 50% 80%, rgba(127,216,255,0.16), transparent 65%); }
html[data-theme="glace"] .entete .maj { color: var(--muet); }
html[data-theme="glace"] .chip { background: rgba(4,14,28,0.75); border-color: var(--glace-lisere); }
html[data-theme="glace"] .slot { background: rgba(6,18,34,0.80); border-color: var(--glace-lisere); border-radius: 0; }
html[data-theme="glace"] .slot:hover:not(.vide) { background: rgba(14,40,66,0.92); box-shadow: 0 0 12px rgba(127,216,255,0.22); }
html[data-theme="glace"] .slot .ico { border-radius: 0; box-shadow: 0 0 0 1px #000; }
html[data-theme="glace"] .groupe h3 { color: var(--glace); border-bottom-color: var(--glace-lisere); text-shadow: var(--glace-contour); }
html[data-theme="glace"] .stat-l + .stat-l { border-top: 1px solid rgba(61,111,148,0.25); }
html[data-theme="glace"] .reput,
html[data-theme="glace"] .familier,
html[data-theme="glace"] .pl-coin,
html[data-theme="glace"] .pl-choice-box { background: rgba(8,24,42,0.82); border-color: var(--glace-lisere); border-radius: 0; }
html[data-theme="glace"] .reput .jauge,
html[data-theme="glace"] .barre-res { background: #020810; border-color: var(--glace-lisere); }
html[data-theme="glace"] .pl-xp { border-color: var(--glace-lisere); background: rgba(2,8,16,0.75); }
html[data-theme="glace"] .pl-modal { background: rgba(2,10,20,0.78); }
html[data-theme="glace"] .pl-modal-box { background: rgba(6,16,28,0.96); border-color: var(--glace-lisere); border-radius: 0; box-shadow: 0 0 30px rgba(127,216,255,0.15); }
html[data-theme="glace"] .divider::before,
html[data-theme="glace"] .divider::after { background: linear-gradient(90deg, transparent, var(--glace-lisere), transparent); }

/* --- selecteur de theme (insere dans le menu par theme.js) --- */
.theme-switch {
  margin-left: 10px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  color: var(--accent);
  font: 600 0.72rem "Cinzel", "Segoe UI", serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.theme-switch:hover { color: #fff; border-color: var(--accent); }
html[data-theme="glace"] .theme-switch {
  background: rgba(6, 8, 12, 0.86);
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #5a5a5a;
  font: 0.8rem var(--glace-titre);
  text-transform: none;
  text-shadow: var(--glace-contour);
}