/* ==========================================================================
   Carte Galactique V.2 — calque « table holographique »
   --------------------------------------------------------------------------
   Se charge APRÈS style.css et ne fait que surcoucher : retirer la balise
   <link> de ce fichier (et data-theme="holo") rend exactement la V.1.

   Principe : le hologramme habille le châssis (panneaux, cadre, ambiance).
   Les couleurs de faction ne sont PAS teintées — sur une carte de stratégie
   elles portent l'information, pas la décoration.
   ========================================================================== */

html[data-theme="holo"] {
  /* --- fond : on descend plus bas que la V.1 pour que le cyan ressorte --- */
  --bg:            #01060e;
  --bg-dim:        #04101c;

  /* --- plaques de verre projetées (translucides + flou) --- */
  --panel:         rgba(5, 24, 41, 0.62);
  --panel-solid:   rgba(4, 19, 33, 0.88);
  --panel-alt:     rgba(10, 40, 63, 0.55);
  --panel-alt2:    rgba(16, 56, 85, 0.68);

  /* --- traits lumineux --- */
  --border:        rgba(94, 214, 255, 0.42);
  --border-dim:    rgba(94, 214, 255, 0.17);
  --border-strong: rgba(94, 214, 255, 0.75);

  --text:          #d9f1ff;
  --text-strong:   #ffffff;
  --text-dim:      #7eb4d2;
  --text-faint:    #55809b;
  --accent:        #5ed6ff;
  --accent-dim:    #1b7ba8;

  /* --- variables propres au thème --- */
  --holo:          #5ed6ff;
  --holo-soft:     rgba(94, 214, 255, 0.14);
  --holo-glow:     0 0 22px rgba(30, 150, 215, 0.30);
  --holo-inset:    inset 0 0 36px rgba(16, 94, 145, 0.16);
  --shadow:        0 10px 38px rgba(0, 0, 0, 0.62);
}

/* ---------------------------------------------------------------- socle -- */
/* La lueur basse = le projecteur de la table holographique. */
html[data-theme="holo"] body {
  background:
    radial-gradient(130% 70% at 50% 118%, rgba(28, 136, 196, 0.22), transparent 62%),
    var(--bg);
}

/* ============================== plaques de verre ========================== */
html[data-theme="holo"] .hud,
html[data-theme="holo"] .opspanel,
html[data-theme="holo"] .dossier,
html[data-theme="holo"] .editor,
html[data-theme="holo"] .admin-card,
html[data-theme="holo"] .reports-card,
html[data-theme="holo"] .fp-sheet,
html[data-theme="holo"] .pl-panel,
html[data-theme="holo"] .pl-dlg,
html[data-theme="holo"] .modal-card,
html[data-theme="holo"] .login-card,
html[data-theme="holo"] .search-results,
html[data-theme="holo"] #tooltip {
  backdrop-filter: blur(9px) saturate(1.25);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
  box-shadow: var(--shadow), var(--holo-glow), var(--holo-inset);
}

/* Les panneaux flottants reçoivent les équerres d'angle du HUD.
   .hud et .opspanel sont déjà en position:absolute (style.css) : ne surtout pas
   les repasser en relative, ils retomberaient dans le flux. */
html[data-theme="holo"] .modal-card,
html[data-theme="holo"] .login-card { position: relative; }

html[data-theme="holo"] .hud::before,
html[data-theme="holo"] .hud::after,
html[data-theme="holo"] .opspanel::before,
html[data-theme="holo"] .opspanel::after,
html[data-theme="holo"] .modal-card::before,
html[data-theme="holo"] .modal-card::after,
html[data-theme="holo"] .login-card::before,
html[data-theme="holo"] .login-card::after {
  content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none;
  border: 1px solid var(--holo); opacity: .75;
}
html[data-theme="holo"] .hud::before,
html[data-theme="holo"] .opspanel::before,
html[data-theme="holo"] .modal-card::before,
html[data-theme="holo"] .login-card::before {
  top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0;
}
html[data-theme="holo"] .hud::after,
html[data-theme="holo"] .opspanel::after,
html[data-theme="holo"] .modal-card::after,
html[data-theme="holo"] .login-card::after {
  bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0;
}

/* ================================== topbar =============================== */
html[data-theme="holo"] .topbar {
  background: linear-gradient(180deg, rgba(5, 26, 44, 0.92), rgba(3, 14, 25, 0.78));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-dim);
  box-shadow: 0 1px 0 rgba(94, 214, 255, 0.22), 0 10px 26px rgba(0, 0, 0, 0.45);
  position: relative;
}
/* liseré lumineux sous la barre : la tranche de la projection */
html[data-theme="holo"] .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 214, 255, .85) 18%, rgba(94, 214, 255, .85) 82%, transparent);
  opacity: .5;
}
html[data-theme="holo"] .topbar h1 {
  text-shadow: 0 0 18px rgba(94, 214, 255, 0.55), 0 0 2px rgba(94, 214, 255, 0.9);
}

/* ================================= boutons =============================== */
html[data-theme="holo"] button {
  background: linear-gradient(180deg, rgba(14, 52, 80, 0.72), rgba(8, 31, 50, 0.72));
  border-color: var(--border-dim);
  box-shadow: inset 0 1px 0 rgba(94, 214, 255, 0.12);
}
html[data-theme="holo"] button:hover {
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(94, 214, 255, 0.2), 0 0 16px rgba(42, 160, 220, 0.35);
}
html[data-theme="holo"] button.primary {
  background: linear-gradient(180deg, rgba(42, 160, 220, 0.9), rgba(22, 104, 150, 0.9));
  border-color: var(--holo);
  box-shadow: 0 0 20px rgba(42, 160, 220, 0.45);
}
html[data-theme="holo"] input,
html[data-theme="holo"] select,
html[data-theme="holo"] textarea {
  background: rgba(3, 17, 30, 0.72);
  border-color: var(--border-dim);
}
html[data-theme="holo"] input:focus,
html[data-theme="holo"] select:focus,
html[data-theme="holo"] textarea:focus {
  border-color: var(--holo);
  box-shadow: 0 0 0 1px rgba(94, 214, 255, 0.25), 0 0 18px rgba(42, 160, 220, 0.3);
}

/* Carte planétaire ouverte (V.2) : elle couvre tout l'écran. On coupe
   l'ambiance animée et TOUS les flous en dessous (panneau MJ, dossier…) : sinon
   la carte graphique recalculait à chaque image plusieurs flous plein écran
   au-dessus d'un fond qui bouge — lag constant dans l'éditeur. */
html.pm-open .holo-fx { display: none; }
/* idem sous le panneau d'administration et les fenêtres MJ (admin.js,
   syncCover) : la carte est figée, les effets animés et le flou propre des
   plaques ne servent plus (le voile du dessous floute déjà la carte). */
html.map-covered .holo-fx { display: none; }
html.map-covered .admin-card, html.map-covered .modal-card, html.map-covered .fp-sheet { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.pm-open * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-theme="holo"] .pm-card,
html[data-theme="holo"] .pme-card { box-shadow: var(--shadow), var(--holo-glow); }

/* languette du panneau Factions replié (V.2) */
html[data-theme="holo"] .hud .hud-tab {
  color: var(--accent);
  box-shadow: var(--shadow), var(--holo-glow), var(--holo-inset);
  text-shadow: 0 0 10px rgba(94, 214, 255, 0.45);
}

/* ============================ titres de section ========================== */
/* Petit tiret lumineux en tête : codes d'une console de commandement. */
html[data-theme="holo"] .section-h,
html[data-theme="holo"] .hud h3,
html[data-theme="holo"] .opspanel h3 {
  display: flex; align-items: center; gap: 8px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(94, 214, 255, 0.4);
}
html[data-theme="holo"] .section-h::before,
html[data-theme="holo"] .hud h3::before,
html[data-theme="holo"] .opspanel h3::before {
  content: ""; width: 3px; height: 11px; flex: 0 0 auto;
  background: var(--holo); box-shadow: 0 0 9px var(--holo); border-radius: 1px;
}
html[data-theme="holo"] .section-h { border-bottom-color: var(--border-dim); }

/* ============================ dossier planétaire ========================= */
html[data-theme="holo"] .dossier { border-left: 1px solid var(--border); }
html[data-theme="holo"] .dossier .hero::after {
  /* la fiche est elle aussi une projection : lignes de balayage sur la photo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(94, 214, 255, 0.06) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
html[data-theme="holo"] .dossier .pname {
  text-shadow: 0 0 22px rgba(94, 214, 255, 0.35);
}
html[data-theme="holo"] .fact,
html[data-theme="holo"] .chip,
html[data-theme="holo"] .owner-chip {
  background: rgba(8, 34, 55, 0.5);
  border-color: var(--border-dim);
}

/* ========================== calque d'effets (décor) ====================== */
/* Posé entre le canvas (z 0) et les panneaux (z 10+) : l'ambiance ne passe
   jamais devant le texte, qui reste net et lisible.
   Ordre DOM = ordre de peinture : vignettage, scanlines, balayage, émetteur.
   Plus de scintillement : il changeait l'opacité de tout le calque, donc le
   flou de TOUS les panneaux vitrés à chaque pas (à-coups réguliers). */
.holo-fx {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; overflow: hidden;
}

/* lignes de balayage */
.holo-fx .holo-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg,
    rgba(94, 214, 255, 0.055) 0 1px,
    transparent 1px 3px);
  opacity: .7;
}

/* émetteur : la galaxie est projetée depuis la tranche basse de la table */
.holo-fx .holo-base {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: linear-gradient(0deg,
    rgba(72, 198, 255, 0.17),
    rgba(42, 160, 220, 0.055) 36%,
    transparent 78%);
}
.holo-fx .holo-base::after {
  content: ""; position: absolute; left: 5%; right: 5%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent,
    rgba(158, 238, 255, 0.95) 14%, rgba(158, 238, 255, 0.95) 86%, transparent);
  box-shadow: 0 0 28px 7px rgba(72, 198, 255, 0.45);
}

/* balayage lent du projecteur, de haut en bas */
.holo-fx .holo-sweep {
  position: absolute; left: 0; right: 0; height: 28%;
  background: linear-gradient(180deg,
    transparent,
    rgba(94, 214, 255, 0.055) 45%,
    rgba(140, 232, 255, 0.085) 50%,
    rgba(94, 214, 255, 0.055) 55%,
    transparent);
  animation: holo-sweep 9s linear infinite;
}
@keyframes holo-sweep {
  0%   { transform: translateY(-30%); }
  100% { transform: translateY(380%); }
}
/* panneau latéral ouvert (dossier, planète MJ) : le balayage le traverserait
   en continu et forcerait le recalcul de son flou à chaque image */
.stage:has(.dossier.open, .editor.open) .holo-fx .holo-sweep { animation-play-state: paused; }

/* vignettage + froid sur les bords : la projection s'éteint vers l'extérieur */
.holo-fx .holo-vig {
  position: absolute; inset: 0;
  background:
    radial-gradient(118% 92% at 50% 50%, transparent 52%, rgba(1, 6, 14, 0.55) 100%),
    radial-gradient(90% 55% at 50% 112%, rgba(42, 160, 220, 0.14), transparent 70%);
}

/* ---- cadre d'angles (au-dessus de tout, purement décoratif) ---- */
.holo-frame { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.holo-frame .hc {
  position: absolute; width: 26px; height: 26px;
  border: 1px solid rgba(94, 214, 255, 0.55);
  filter: drop-shadow(0 0 6px rgba(94, 214, 255, 0.5));
}
.holo-frame .tl { top: 10px;    left: 10px;  border-right: 0; border-bottom: 0; }
.holo-frame .tr { top: 10px;    right: 10px; border-left: 0;  border-bottom: 0; }
.holo-frame .bl { bottom: 10px; left: 10px;  border-right: 0; border-top: 0; }
.holo-frame .br { bottom: 10px; right: 10px; border-left: 0;  border-top: 0; }

/* Respect du réglage système : pas d'animation si l'utilisateur n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  .holo-fx .holo-sweep { animation: none; opacity: 0; }
}

/* Sans flou d'arrière-plan, des plaques à 62 % laisseraient la carte traverser
   le texte : on les rend presque opaques. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="holo"] {
    --panel:       rgba(5, 22, 38, 0.95);
    --panel-solid: rgba(4, 18, 31, 0.97);
  }
}