/**
 * ══════════════════════════════════════════════════════
 *  SPHERA — Feuille de styles partagée
 *  Importée par : index.html, lecteur.html, maison.html
 * ══════════════════════════════════════════════════════
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════
   VARIABLES GLOBALES
   ══════════════════════════════════════════════════════ */
:root {
  /* Couleurs primaires */
  --color-bg:         #020205;
  --color-cyan:       #00ffff;
  --color-cyan-dim:   rgba(0, 255, 255, 0.3);
  --color-cyan-ghost: rgba(0, 255, 255, 0.08);

  /* Maison / Cimetière */
  --color-purple:       rgba(180, 140, 255, 0.85);
  --color-purple-dim:   rgba(140, 80,  255, 0.4);
  --color-purple-ghost: rgba(140, 80,  255, 0.1);

  /* Typographie */
  --font-hud:   'Orbitron', monospace;
  --font-body:  'Rajdhani', sans-serif;

  /* Durées de transition */
  --t-fast:   0.3s;
  --t-normal: 0.6s;
  --t-slow:   1.5s;

  /* Z-index layers */
  --z-webgl:       1;
  --z-ui:         20;
  --z-overlay:    50;
  --z-transition: 80;
  --z-loading:   100;
}

/* ══════════════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  overflow: hidden;
  font-family: var(--font-body);
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════
   CANVAS WEBGL
   ══════════════════════════════════════════════════════ */
#webgl-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-webgl);
  cursor: crosshair;
}
#webgl-container:active { cursor: grabbing; }

/* ══════════════════════════════════════════════════════
   ÉCRAN DE CHARGEMENT
   Commun à toutes les pages — couleur adaptée via thème
   ══════════════════════════════════════════════════════ */
#loading-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loading);
  transition: opacity var(--t-slow) ease;
}
#loading-screen.done {
  opacity: 0;
  pointer-events: none;
}

.loader-ring {
  width: 60px;
  height: 60px;
  border: 2px solid rgba(0, 255, 255, 0.1);
  border-top-color: var(--color-cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Variante maison (thème violet) */
.loader-ring.maison {
  border-color: rgba(140, 80, 255, 0.15);
  border-top-color: var(--color-purple);
}

.loader-text {
  margin-top: 20px;
  font-family: var(--font-hud);
  font-size: 0.65em;
  letter-spacing: 6px;
  color: rgba(0, 255, 255, 0.5);
  text-transform: uppercase;
}
.loader-text.maison {
  color: rgba(180, 140, 255, 0.5);
}

/* ══════════════════════════════════════════════════════
   COINS HUD
   Utilisés sur toutes les pages comme cadre scénographique
   ══════════════════════════════════════════════════════ */
.hud-corner {
  position: absolute;
  border-style: solid;
  border-width: 0;
  border-color: var(--color-cyan-dim);
}
.hud-corner.tl { top: 16px; left: 16px; border-top-width: 1px; border-left-width: 1px; }
.hud-corner.tr { top: 16px; right: 16px; border-top-width: 1px; border-right-width: 1px; }
.hud-corner.bl { bottom: 16px; left: 16px; border-bottom-width: 1px; border-left-width: 1px; }
.hud-corner.br { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }

/* Variante maison */
.hud-corner.maison { border-color: var(--color-purple-dim); }

/* ══════════════════════════════════════════════════════
   COUCHE DE TRANSITION INTER-PAGES
   Superposition noire/couleur utilisée lors des navigations
   ══════════════════════════════════════════════════════ */
#page-transition {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--color-bg);
  z-index: var(--z-transition);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal) ease;
}
#page-transition.active {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════════════════════
   BOUTON UNIVERSEL SPHERA
   Style de base réutilisable pour les actions principales
   ══════════════════════════════════════════════════════ */
.sphera-btn {
  background: rgba(2, 10, 20, 0.6);
  border: 1px solid var(--color-cyan-dim);
  color: var(--color-cyan);
  padding: 12px 30px;
  font-family: var(--font-hud);
  font-size: 0.8em;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all var(--t-fast) ease;
  clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sphera-btn:hover {
  background: rgba(0, 255, 255, 0.08);
  border-color: var(--color-cyan);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  transform: translateY(-2px);
}
.sphera-btn .label { font-weight: 700; display: block; }
.sphera-btn .sub   { font-size: 0.6em; color: rgba(255,255,255,0.5); margin-top: 2px; font-family: var(--font-body); }

.sphera-btn.secondary {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}
.sphera-btn.secondary:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* ══════════════════════════════════════════════════════
   KEYFRAMES COMMUNS
   ══════════════════════════════════════════════════════ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0%   { left: -100%; }
  100% { left:  200%; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE HELPERS
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hud-corner { width: 40px; height: 40px; }
  .sphera-btn { min-width: 130px; padding: 10px 20px; }
}

@media (max-width: 768px) {
  .hud-corner { width: 45px; height: 45px; }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION (accessibilité)
   Désactive les animations lourdes pour les personnes sensibles
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .loader-ring { animation: none; border-color: var(--color-cyan); }
  .loader-ring.maison { border-color: var(--color-purple); }
}

/* ══════════════════════════════════════════════════════
   SAFE AREA (encoche iPhone, barre de navigation)
   ══════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-top)) {
  .hud-corner.tl, .hud-corner.tr { top: calc(16px + env(safe-area-inset-top)); }
  .hud-corner.bl, .hud-corner.br { bottom: calc(16px + env(safe-area-inset-bottom)); }
}