/* ═══════════════════════════════════════════════════════
   AMBIANCE IMMERSIVE — Mathieux Joubert
   Activée au clic sur "Entrer dans l'univers"
   Ne touche que les pages livres avec .livre-hero
═══════════════════════════════════════════════════════ */

/* ── Bouton déclencheur ── */
.btn-ambiance {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-corps, 'DM Sans', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 16px;
  position: relative;
  z-index: 5;
}
.btn-ambiance:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-2px);
}
.btn-ambiance .amb-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  animation: ambPulse 1.8s ease-in-out infinite;
}
@keyframes ambPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* ── Overlay d'ambiance sur le hero ── */
.livre-hero .amb-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.livre-hero.ambiance-on .amb-overlay {
  opacity: 1;
  pointer-events: none;
}

/* ── Bouton quitter (×) ── */
.btn-quit-ambiance {
  position: fixed;
  top: 90px;
  right: 20px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  transition: background 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
}
.btn-quit-ambiance.visible {
  display: flex;
}
.btn-quit-ambiance:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* ── Texte d'ambiance ── */
.amb-caption {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  font-family: var(--font-titre, Georgia, serif);
  font-style: italic;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: rgba(255,255,255,0.0);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  transition: color 1.6s ease 0.6s, transform 1.2s ease 0.4s;
  text-shadow: 0 0 30px rgba(0,0,0,0.8);
  max-width: 90vw;
  white-space: normal;
  width: 100%;
  padding: 0 24px;
}
.livre-hero.ambiance-on .amb-caption {
  color: rgba(255,255,255,0.55);
  transform: translateX(-50%) translateY(0);
}

/* ── Renforcement grain + étoiles en mode ambiance ── */
.livre-hero.ambiance-on .stars-bg {
  opacity: 1 !important;
}

/* ── Transition douce sur le hero lui-même ── */
.livre-hero {
  transition: filter 1.4s ease;
}

/* ── VARIANTES PAR GENRE ── */

/* SF — cyan nuit froide */
.amb-sf .amb-overlay {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(78,205,196,0.22) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 100%, rgba(0,30,60,0.6) 0%, transparent 70%),
    linear-gradient(180deg, rgba(5,14,26,0.55) 0%, transparent 50%);
}
.btn-ambiance.amb-sf { border-color: rgba(78,205,196,0.45); color: #4ecdc4; }
.btn-ambiance.amb-sf .amb-pulse { background: #4ecdc4; box-shadow: 0 0 8px #4ecdc4; }
.btn-ambiance.amb-sf:hover { box-shadow: 0 0 20px rgba(78,205,196,0.2); }

/* Thriller — rouge sang sombre */
.amb-thriller .amb-overlay {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(180,30,30,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(100,10,10,0.45) 0%, transparent 65%),
    linear-gradient(180deg, rgba(22,5,5,0.50) 0%, transparent 50%);
}
.btn-ambiance.amb-thriller { border-color: rgba(255,107,107,0.45); color: #ff6b6b; }
.btn-ambiance.amb-thriller .amb-pulse { background: #ff6b6b; box-shadow: 0 0 8px #ff6b6b; }
.btn-ambiance.amb-thriller:hover { box-shadow: 0 0 20px rgba(255,107,107,0.2); }

/* Fantasy — violet étoilé profond */
.amb-fantasy .amb-overlay {
  background:
    radial-gradient(ellipse at 60% 10%, rgba(155,89,182,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 60%, rgba(80,20,120,0.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(13,8,22,0.55) 0%, transparent 50%);
}
.btn-ambiance.amb-fantasy { border-color: rgba(155,89,182,0.5); color: #b07fd4; }
.btn-ambiance.amb-fantasy .amb-pulse { background: #9b59b6; box-shadow: 0 0 8px #9b59b6; }
.btn-ambiance.amb-fantasy:hover { box-shadow: 0 0 20px rgba(155,89,182,0.25); }

/* Jeunesse — or chaleureux */
.amb-jeunesse .amb-overlay {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,165,0,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(180,90,0,0.20) 0%, transparent 60%),
    linear-gradient(180deg, rgba(13,10,4,0.40) 0%, transparent 50%);
}
.btn-ambiance.amb-jeunesse { border-color: rgba(240,165,0,0.45); color: #f0a500; }
.btn-ambiance.amb-jeunesse .amb-pulse { background: #f0a500; box-shadow: 0 0 8px #f0a500; }
.btn-ambiance.amb-jeunesse:hover { box-shadow: 0 0 20px rgba(240,165,0,0.2); }

/* ── Responsive ── */
@media (max-width: 600px) {
  .btn-ambiance {
    font-size: 0.84rem;
    padding: 11px 18px;
    width: 100%;
    justify-content: center;
  }
  .btn-quit-ambiance { top: 75px; right: 12px; width: 34px; height: 34px; font-size: 0.9rem; }
  .amb-caption { font-size: 0.85rem; padding: 0 16px; }
}

/* Mode calme : pas d'ambiance */
html.theme-calm .btn-ambiance { display: none !important; }