/* ==========================================================================
   Atmosphère - fond de toutes les pages
   Carte de l'Afrique rétro-éclairée + réseau géométrique "souterrain".
   Activé par class="atmo-on" sur le <body> (+ ce fichier et js/atmosphere.js).
   Tout est scopé sous body.atmo-on : retirer cette classe désactive le
   décor de la page (et la mise en page du hero sur l'accueil).
   Le dessin est fait par js/atmosphere.js (canvas) ; ce fichier gère les
   couches, les dégradés, le verre dépoli des panneaux et la responsivité.
   ========================================================================== */

body.atmo-on {
  --atmo-void: #020c07;
  --atmo-glow: #2fe6a3;
  --atmo-mint: #8ff5cb;
  --atmo-focus: 1;              /* 1 = carte pleine lumière, baisse au scroll */
  --atmo-panel: linear-gradient(160deg, rgba(14, 42, 29, 0.80), rgba(6, 24, 16, 0.86));
  --atmo-panel-line: rgba(47, 230, 163, 0.16);
  background: var(--atmo-void);
}

/* ---------- Conteneur des couches (fixe, derrière tout le contenu) ---------- */
.atmo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.atmo.is-ready {
  opacity: 1;
}

.atmo > * {
  position: absolute;
}

/* 1. Base : émeraude profond + lueur centrée sur la carte (sans JS déjà correct) */
.atmo-base {
  inset: 0;
  background:
    radial-gradient(55% 60% at var(--mx, 28%) var(--my, 50%), rgba(18, 128, 86, 0.50) 0%, rgba(8, 72, 48, 0.30) 40%, transparent 74%),
    radial-gradient(110% 70% at 50% 115%, rgba(6, 52, 35, 0.65), transparent 62%),
    radial-gradient(80% 55% at 100% 0%, rgba(10, 74, 50, 0.38), transparent 62%),
    linear-gradient(180deg, #03130c 0%, #041b11 48%, #020d08 100%);
}

/* 2. Facettes low-poly (dessinées une seule fois) - profondeur / parois de caverne */
.atmo-poly {
  left: -24px;
  top: -24px;
  will-change: transform;
}

/* 3. Tunnel hexagonal centré sur la carte - deux jeux d'anneaux en contre-rotation */
.atmo-tunnel {
  opacity: calc(0.28 + 0.72 * var(--atmo-focus));
  will-change: transform;
}

.atmo-tunnel svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
}

/* Rotation très lente : grand écran uniquement, coupée en mode allégé (voir .atmo-lite) */
@media (min-width: 1100px) {
  .atmo:not(.atmo-lite) .atmo-tunnel .ring-a { animation: atmo-spin 260s linear infinite; }
  .atmo:not(.atmo-lite) .atmo-tunnel .ring-b { animation: atmo-spin 340s linear infinite reverse; }
}

.atmo-tunnel path,
.atmo-tunnel polygon,
.atmo-tunnel line {
  fill: none;
  stroke: var(--atmo-glow);
  vector-effect: non-scaling-stroke;
}

.atmo-tunnel circle {
  fill: var(--atmo-mint);
}

/* 4. Réseau de conduits (dessiné une seule fois ; les impulsions sont dans .atmo-live) */
.atmo-net {
  inset: 0;
}

/* 5. Halo large + corps lumineux de la carte (calques statiques ; seule l'opacité varie) */
.atmo-halo {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 230, 163, 0.26), rgba(20, 150, 100, 0.12) 46%, transparent 100%);
  opacity: calc(0.35 + 0.65 * var(--atmo-focus));   /* la boucle JS ajoute une légère respiration */
}

.atmo-glow {
  filter: blur(12px) saturate(1.2);
  opacity: calc(0.16 + 0.34 * var(--atmo-focus));
}

/* Repli si les pixels de la PNG ne sont pas lisibles (ex. ouverture en file://) */
.atmo-mapimg {
  image-rendering: pixelated;
  filter: grayscale(1) sepia(1) hue-rotate(78deg) saturate(3.2) brightness(0.9) drop-shadow(0 0 14px rgba(47, 230, 163, 0.65));
  opacity: calc(0.28 + 0.55 * var(--atmo-focus));
}

/* 6. Animation vivante : carte, impulsions, arcs, particules */
.atmo-live {
  inset: 0;
}

/* 7. Vignette + voile de lisibilité (bas de page plus sombre) */
.atmo-vignette {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 10, 6, 0.55) 0, transparent 140px),
    linear-gradient(0deg, rgba(2, 10, 6, 0.55) 0, transparent 38%),
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 52%, rgba(0, 5, 3, 0.62) 100%);
}

@keyframes atmo-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Habillage des composants au-dessus du décor ---------- */
body.atmo-on .site-header {
  background: linear-gradient(180deg, rgba(3, 17, 10, 0.92), rgba(3, 17, 10, 0.78));
  border-bottom-color: rgba(47, 230, 163, 0.16);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

body.atmo-on .player-shell {
  box-shadow:
    0 0 0 1px rgba(47, 230, 163, 0.24),
    0 26px 70px -22px rgba(0, 0, 0, 0.75),
    0 0 90px -18px rgba(47, 230, 163, 0.28);
}

body.atmo-on .now-next,
body.atmo-on .channel-chip,
body.atmo-on .video-card {
  background: var(--atmo-panel);
  border-color: var(--atmo-panel-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
}

/* Pages intérieures : mêmes panneaux "verre" (les états .active dorés sont conservés) */
body.atmo-on .sidebar,
body.atmo-on .category-tile,
body.atmo-on .speaker-card,
body.atmo-on .calendar-day:not(.active) {
  background: var(--atmo-panel);
  border-color: var(--atmo-panel-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
}

body.atmo-on .newsletter-form input,
body.atmo-on .sort-select,
body.atmo-on .pagination button:not(.active),
body.atmo-on .tag,
body.atmo-on .share-row a {
  background: rgba(6, 24, 16, 0.72);
  border-color: var(--atmo-panel-line);
}

body.atmo-on .channel-chip.active {
  background: linear-gradient(160deg, rgba(20, 74, 50, 0.85), rgba(9, 38, 26, 0.88));
  border-color: rgba(247, 181, 56, 0.55);
}

body.atmo-on .video-card:hover,
body.atmo-on .channel-chip:hover {
  border-color: rgba(247, 181, 56, 0.6);
}

body.atmo-on .epg-mini-item {
  background: rgba(6, 24, 16, 0.45);
  border: 1px solid rgba(47, 230, 163, 0.08);
}

body.atmo-on .epg-mini-item:hover {
  background: rgba(14, 50, 34, 0.7);
}

/* Titres et liens posés directement sur le décor : halo sombre pour rester lisibles sur la carte */
body.atmo-on .section-title h2,
body.atmo-on .section-title .see-all {
  text-shadow: 0 1px 2px rgba(0, 8, 4, 0.9), 0 0 14px rgba(0, 8, 4, 0.85);
}

body.atmo-on .channels-section {
  border-bottom-color: rgba(47, 230, 163, 0.10);
}

body.atmo-on .site-footer {
  background: linear-gradient(180deg, rgba(3, 16, 10, 0.55), rgba(2, 10, 6, 0.93));
  border-top-color: rgba(47, 230, 163, 0.16);
}

/* Verre dépoli : uniquement sur grand écran et sur quelques panneaux (perf) */
@media (min-width: 1100px) and (hover: hover) {
  body.atmo-on .now-next,
  body.atmo-on .channel-chip {
    backdrop-filter: blur(10px) saturate(1.25);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
  }
}

/* ---------- Hero : lecteur à droite (RTL), scène de la carte à gauche ---------- */
/* Mobile / tablette : bandeau au-dessus du lecteur, où la moitié nord de la carte émerge */
body.atmo-on .hero-stage {
  display: block;
  height: clamp(120px, 34vw, 190px);
  margin-bottom: var(--space-sm);
}

@media (min-width: 1100px) {
  body.atmo-on .hero-section .container {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: var(--space-xl);
    align-items: start;
  }

  body.atmo-on .hero-section .player-shell {
    grid-column: 1;
    grid-row: 1;
  }

  body.atmo-on .hero-section .now-next {
    grid-column: 1;
    grid-row: 2;
  }

  /* Colonne vide : réserve la place de la carte (fixe, dessinée en fond) */
  body.atmo-on .hero-stage {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;   /* sinon la colonne s'écrase à 1 px (align-items: start) */
    height: auto;
    min-height: 1px;
    margin-bottom: 0;
  }
}

/* ---------- Mobile : plus sobre ---------- */
@media (max-width: 1099px) {
  body.atmo-on .atmo-glow {
    filter: blur(6px) saturate(1.3);
  }
}

/* ---------- Mouvement réduit : décor statique ---------- */
@media (prefers-reduced-motion: reduce) {
  .atmo {
    transition: none;
  }

  .atmo .atmo-tunnel .ring-a,
  .atmo .atmo-tunnel .ring-b {
    animation: none !important;
  }
}