/* ============================================================
   THÈME NUIT ÉTOILÉ — décor nocturne + ajustements de composants
   ------------------------------------------------------------
   Remplace intégralement css/theme-nuit.css.
   Couleurs = css/variables.css (:root[data-theme="nuit"]).
   Décor injecté par js/theme-toggle.js — aucun HTML à modifier.
   Toutes les animations sont lentes (>= 7 s), sans clignotement,
   et entièrement coupées par prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. CIEL ---------- */

[data-theme="nuit"] body {
  position: relative;
  background: linear-gradient(180deg,
      var(--npr-sky-1) 0%,
      var(--color-bg) 42%,
      var(--npr-sky-2) 100%);
  background-attachment: fixed;
}

[data-theme="nuit"] .npr-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Le contenu passe au-dessus du décor.
   .skip-link et .mini-player sont volontairement exclus : ils ont déjà leur propre
   position (absolute / fixed) dans layout.css et components.css pour rester hors
   écran (skip-link) ou collés en bas de viewport (mini-player) — leur imposer
   position:relative ici aurait cassé ce positionnement. */
[data-theme="nuit"] .header,
[data-theme="nuit"] main,
[data-theme="nuit"] .footer {
  position: relative;
  z-index: 10;
}

[data-theme="nuit"] .header { z-index: 100; }
[data-theme="nuit"] .mini-player { z-index: 200; }

/* Aurore : dégradé qui respire lentement */
[data-theme="nuit"] .npr-sky__aurora {
  position: absolute;
  inset: -12% -20%;
  filter: blur(20px);
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(139, 107, 216, 0.46), transparent 70%),
    radial-gradient(50% 34% at 84% 28%, rgba(233, 168, 201, 0.2), transparent 70%),
    radial-gradient(68% 44% at 55% 88%, rgba(93, 78, 190, 0.32), transparent 70%);
  animation: npr-sky 42s ease-in-out infinite;
}

/* ---------- 2. ÉTOILES ---------- */

[data-theme="nuit"] .npr-sky__stars {
  position: absolute;
  inset: -10% 0 0;
  background-repeat: repeat;
  /* parallax : --npr-scroll est mis à jour par le JS (desktop uniquement) */
  transform: translate3d(0, calc(var(--npr-scroll, 0) * -0.04px), 0);
  will-change: transform;
}

[data-theme="nuit"] .npr-sky__stars--a {
  background-size: 300px 300px;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1px 1px at 24% 40%, rgba(233, 168, 201, 0.8), transparent),
    radial-gradient(2px 2px at 40% 8%, rgba(245, 217, 160, 0.9), transparent),
    radial-gradient(1px 1px at 58% 64%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.4px 1.4px at 70% 26%, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1px 1px at 84% 54%, rgba(201, 174, 240, 0.85), transparent),
    radial-gradient(2px 2px at 93% 84%, rgba(245, 217, 160, 0.85), transparent),
    radial-gradient(1px 1px at 14% 80%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.5px 1.5px at 48% 92%, rgba(233, 168, 201, 0.75), transparent),
    radial-gradient(1px 1px at 33% 60%, rgba(255, 255, 255, 0.6), transparent);
  animation: npr-twinkle-a 7s ease-in-out infinite;
}

[data-theme="nuit"] .npr-sky__stars--b {
  background-size: 190px 210px;
  background-image:
    radial-gradient(1px 1px at 12% 30%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 62% 18%, rgba(201, 174, 240, 0.7), transparent),
    radial-gradient(1.2px 1.2px at 88% 66%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 36% 78%, rgba(245, 217, 160, 0.6), transparent);
  transform: translate3d(0, calc(var(--npr-scroll, 0) * -0.09px), 0);
  animation: npr-twinkle-b 11s ease-in-out 1.5s infinite;
}

/* ---------- 3. ÉTOILES FILANTES ---------- */
/* Une seule visible à la fois : chaque trace n'est allumée que ~15 %
   de son cycle, et les cycles sont désynchronisés (durées premières). */

[data-theme="nuit"] .npr-sky__shoot {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  opacity: 0;
  animation-name: npr-shoot;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ---------- 4. LUCIOLES ---------- */

[data-theme="nuit"] .npr-sky__fly {
  position: absolute;
  border-radius: 50%;
  opacity: 0.2;
  animation-name: npr-fly;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* ---------- 5. LUNE ---------- */

[data-theme="nuit"] .npr-moon {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 1;
  width: 72px;
  height: 72px;
  pointer-events: none;
  transform: translate3d(0, calc(var(--npr-scroll, 0) * 0.06px), 0);
  animation: npr-moon-drift 26s ease-in-out infinite;
}

[data-theme="nuit"] .npr-moon__glow {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(245, 217, 160, 0.32) 0%,
      rgba(233, 168, 201, 0.13) 45%,
      transparent 72%);
  animation: npr-moon-glow 9s ease-in-out infinite;
}

[data-theme="nuit"] .npr-moon__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF6E2 0%, #F5D9A0 52%, #E3BE85 100%);
  box-shadow: 0 0 26px rgba(245, 217, 160, 0.42);
}

[data-theme="nuit"] .npr-moon__crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(200, 163, 112, 0.3);
}

[data-theme="nuit"] .npr-moon__crater--1 { top: 22px; left: 18px; width: 13px; height: 13px; }
[data-theme="nuit"] .npr-moon__crater--2 { top: 42px; left: 38px; width: 9px;  height: 9px;  }
[data-theme="nuit"] .npr-moon__crater--3 { top: 15px; left: 44px; width: 6px;  height: 6px;  }

/* ---------- 6. ANIMATIONS ---------- */

@keyframes npr-sky {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-14px); }
}

@keyframes npr-twinkle-a {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 1; }
}

@keyframes npr-twinkle-b {
  0%, 100% { opacity: 0.9; }
  45%      { opacity: 0.3; }
}

@keyframes npr-shoot {
  0%   { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; }
  4%   { opacity: 0; }
  6%   { opacity: 0.95; }
  17%  { opacity: 0.95; }
  21%  { transform: translate3d(min(120vw, 900px), 46vh, 0) rotate(18deg); opacity: 0; }
  100% { transform: translate3d(min(120vw, 900px), 46vh, 0) rotate(18deg); opacity: 0; }
}

@keyframes npr-fly {
  0%, 100% { transform: translate3d(0, 0, 0);      opacity: 0.15; }
  25%      { transform: translate3d(26px, -34px, 0); opacity: 0.85; }
  55%      { transform: translate3d(-18px, -62px, 0); opacity: 0.5; }
  80%      { transform: translate3d(14px, -28px, 0); opacity: 0.9; }
}

@keyframes npr-moon-drift {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: 18px; }
}

@keyframes npr-moon-glow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* ---------- 7. AJUSTEMENTS COMPOSANTS ---------- */

/* Header translucide : le ciel reste visible derrière */
[data-theme="nuit"] .header {
  background-color: rgba(14, 8, 36, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

/* --shadow-card nuit est volontairement dense pour les cartes ; sur le header
   sticky il baverait sur le titre du hero. Ombre allégée au scroll. */
[data-theme="nuit"] .header--scrolled {
  box-shadow: 0 4px 18px rgba(5, 2, 18, 0.35);
}

[data-theme="nuit"] .header__nav {
  background-color: rgba(14, 8, 36, 0.97);
  backdrop-filter: blur(14px);
}

[data-theme="nuit"] .header__theme-toggle {
  background-color: var(--npr-surface-2);
  color: var(--color-gold);
  border: 1px solid var(--color-border);
}

[data-theme="nuit"] .header__hamburger {
  background-color: var(--npr-surface-2);
  border: 1px solid var(--color-border);
}

/* Footer transparent : le ciel continue jusqu'en bas */
[data-theme="nuit"] .footer {
  background-color: transparent;
}

/* Texte sur fond rose poudré : plum foncé (blanc sur rose = contraste insuffisant) */
[data-theme="nuit"] .btn--primary,
[data-theme="nuit"] .btn--secondary:hover,
[data-theme="nuit"] .btn-play,
[data-theme="nuit"] .mini-player__playpause,
[data-theme="nuit"] .skip-link {
  color: var(--npr-on-accent);
}

/* Surfaces qui utilisaient le blanc pur en thème jour */
[data-theme="nuit"] .emotions__arrow,
[data-theme="nuit"] .ritual-carousel__arrow,
[data-theme="nuit"] .carousel__arrow {
  background-color: var(--npr-surface-2);
  border: 1px solid var(--color-border);
}

[data-theme="nuit"] .emotions__arrow:hover,
[data-theme="nuit"] .ritual-carousel__arrow:hover,
[data-theme="nuit"] .carousel__arrow:hover {
  background-color: var(--color-cream);
}

[data-theme="nuit"] .emotion-card__arrow {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

/* Filtres (nos-rituels-audio.html) : fond blanc plein trop présent sur fond
   sombre une fois désélectionnés — transparent, seule la bordure reste. */
[data-theme="nuit"] .filters__btn:not(.filters__btn--active) {
  background-color: transparent;
}

/* Cartes : bordure fine + halo mauve au survol/focus */
[data-theme="nuit"] .card,
[data-theme="nuit"] .ritual-item,
[data-theme="nuit"] .testimonial,
[data-theme="nuit"] .emotion-card,
[data-theme="nuit"] .newsletter {
  border: 1px solid var(--color-border);
}

[data-theme="nuit"] .ritual-item,
[data-theme="nuit"] .emotion-card,
[data-theme="nuit"] .card {
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}

[data-theme="nuit"] .ritual-item:hover,
[data-theme="nuit"] .emotion-card:hover,
[data-theme="nuit"] .emotion-card:focus-visible,
[data-theme="nuit"] .card:hover {
  box-shadow: var(--npr-halo);
  transform: translateY(-3px);
}

/* Cartes émotion : versions sourdes des pastels du thème jour, hues conservées */
[data-theme="nuit"] .emotion-card--sommeil     { background-color: #2A1F55; }
[data-theme="nuit"] .emotion-card--calme       { background-color: #1D3330; }
[data-theme="nuit"] .emotion-card--colere      { background-color: #3B2340; }
[data-theme="nuit"] .emotion-card--tristesse   { background-color: #1E2B4A; }
[data-theme="nuit"] .emotion-card--transitions { background-color: #37204A; }
[data-theme="nuit"] .emotion-card--relations   { background-color: #3A2247; }
[data-theme="nuit"] .emotion-card--moments     { background-color: #33274A; }

[data-theme="nuit"] .emotion-card--sommeil .emotion-card__name,
[data-theme="nuit"] .emotion-card--sommeil .emotion-card__arrow         { color: #C9AEF0; }
[data-theme="nuit"] .emotion-card--calme .emotion-card__name,
[data-theme="nuit"] .emotion-card--calme .emotion-card__arrow           { color: #92D2B8; }
[data-theme="nuit"] .emotion-card--colere .emotion-card__name,
[data-theme="nuit"] .emotion-card--colere .emotion-card__arrow          { color: #F0B39C; }
[data-theme="nuit"] .emotion-card--tristesse .emotion-card__name,
[data-theme="nuit"] .emotion-card--tristesse .emotion-card__arrow       { color: #93BDE8; }
[data-theme="nuit"] .emotion-card--transitions .emotion-card__name,
[data-theme="nuit"] .emotion-card--transitions .emotion-card__arrow     { color: #E7A6CE; }
[data-theme="nuit"] .emotion-card--relations .emotion-card__name,
[data-theme="nuit"] .emotion-card--relations .emotion-card__arrow       { color: #EEA8B8; }
[data-theme="nuit"] .emotion-card--moments .emotion-card__name,
[data-theme="nuit"] .emotion-card--moments .emotion-card__arrow         { color: #EBCB8B; }

/* Newsletter : dégradé nocturne, plus de crème/pêche */
[data-theme="nuit"] .newsletter {
  background: linear-gradient(135deg, var(--color-cream) 0%, #4A2C55 70%, var(--color-coral-dark) 135%);
}

[data-theme="nuit"] .newsletter__input {
  background-color: var(--color-bg-card);
  color: var(--color-text-dark);
}

/* Carte "featured" : le dégradé jour part du blanc, à revoir */
[data-theme="nuit"] .card--featured {
  background: linear-gradient(135deg, var(--color-cream-dark) 0%, var(--color-cream) 100%);
}

/* Carte "Premier atelier" : le fond blanc uni du jour devient un dégradé
   bleu -> mauve nocturne (le jour part du blanc uni, cf. css/pages/ateliers.css) */
[data-theme="nuit"] .premier-card {
  background: linear-gradient(135deg, #1E2B4A 0%, var(--color-cream-dark) 50%, var(--color-peach) 100%);
}

/* Cartes "Infos pratiques" : le corail plein du jour devient un rose vif
   trop saturé la nuit (var(--color-coral) = #E9A8C9) -> couleur unie mauve sourde */
[data-theme="nuit"] .info-card {
  background: #4A2C55;
}

/* Bouton "Écouter le rituel du soir" (accueil) : décliné en mauve nocturne */
[data-theme="nuit"] .hero__actions .btn-play {
  background-color: rgba(201, 174, 240, 0.16);
  color: #C9AEF0;
  border-color: #C9AEF0;
}

[data-theme="nuit"] .hero__actions .btn-play:hover,
[data-theme="nuit"] .hero__actions .btn-play.btn-play--playing {
  background-color: #C9AEF0;
  color: var(--npr-on-accent);
}

/* Bannière hero desktop : voile indigo pour l'intégrer à la nuit,
   texte clair par-dessus (spécificité volontairement au-dessus de accueil.css) */
@media (min-width: 768px) {
  [data-theme="nuit"] .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(14, 8, 36, 0.9) 0%,
        rgba(21, 12, 51, 0.72) 42%,
        rgba(33, 19, 72, 0.42) 100%);
  }

  :root[data-theme="nuit"] .hero .hero__title { color: var(--color-text-dark); }
  :root[data-theme="nuit"] .hero .hero__subtitle { color: var(--color-text-body); }
}

/* Bannières hero desktop des autres pages (École, Ateliers, Notre histoire, FAQ) :
   même voile indigo + texte clair que l'accueil, pour rester cohérent. */
@media (min-width: 768px) {
  [data-theme="nuit"] .page-hero--ecole::before,
  [data-theme="nuit"] .page-hero--ateliers::before,
  [data-theme="nuit"] .page-hero--about::before,
  [data-theme="nuit"] .page-hero--faq::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(14, 8, 36, 0.9) 0%,
        rgba(21, 12, 51, 0.72) 42%,
        rgba(33, 19, 72, 0.42) 100%);
  }

  :root[data-theme="nuit"] .page-hero--ecole .page-hero__title,
  :root[data-theme="nuit"] .page-hero--ateliers .page-hero__title,
  :root[data-theme="nuit"] .page-hero--about .page-hero__title,
  :root[data-theme="nuit"] .page-hero--faq .page-hero__title {
    color: var(--color-text-dark);
  }

  :root[data-theme="nuit"] .page-hero--ecole .page-hero__subtitle,
  :root[data-theme="nuit"] .page-hero--ateliers .page-hero__subtitle,
  :root[data-theme="nuit"] .page-hero--about .page-hero__subtitle,
  :root[data-theme="nuit"] .page-hero--faq .page-hero__subtitle {
    color: var(--color-text-body);
  }

  /* École et Ateliers ont un halo crème translucide derrière le texte (jour) :
     retiré en thème nuit, texte directement sur le voile — même rendu que
     Notre histoire et FAQ, qui n'ont pas de halo. */
  [data-theme="nuit"] .page-hero--ecole .page-hero__content,
  [data-theme="nuit"] .page-hero--ateliers .page-hero__content {
    background: none;
  }
}

/* Mobile/tablette (< 768px) : École, Ateliers, Notre histoire et FAQ réutilisent
   la photo de bannière desktop comme illustration sous le titre — contrairement à
   l'accueil (illustration à fond transparent), elle est opaque et jure avec le fond
   sombre. Même intention que le voile desktop, posée par-dessus l'image via un
   élément réel (.page-hero__illustration-veil) plutôt qu'un ::after généré : le
   ::after ne se peignait pas de façon fiable sur cet élément dans certains moteurs
   de rendu. Couleur unie plutôt qu'un dégradé, pour la même raison. */
.page-hero__illustration {
  position: relative;
}

.page-hero__illustration-veil {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  [data-theme="nuit"] .page-hero--ecole .page-hero__illustration-veil,
  [data-theme="nuit"] .page-hero--ateliers .page-hero__illustration-veil,
  [data-theme="nuit"] .page-hero--about .page-hero__illustration-veil,
  [data-theme="nuit"] .page-hero--faq .page-hero__illustration-veil {
    display: block;
    background: rgba(21, 12, 51, 0.5);
  }
}

/* Illustrations : ajustées par filtre, jamais remplacées. Logo exclu. */
[data-theme="nuit"] .hero__illustration img,
[data-theme="nuit"] .page-hero__illustration img,
[data-theme="nuit"] .ritual-item__image,
[data-theme="nuit"] .emotion-card__image,
[data-theme="nuit"] .card__image,
[data-theme="nuit"] .newsletter__image,
[data-theme="nuit"] .footer__nav-icon,
[data-theme="nuit"] .mini-player__thumb {
  filter: var(--npr-img-filter);
  transition: filter 0.4s ease;
}

/* Les vignettes portent un background-color clair en style inline dans le HTML :
   on le neutralise pour éviter le carré crème sur fond nuit. */
[data-theme="nuit"] .ritual-item__image[style] {
  background-color: var(--npr-surface-2) !important;
}

/* Mini-player audio */
[data-theme="nuit"] .mini-player {
  box-shadow: 0 -6px 26px rgba(5, 2, 18, 0.6);
  border-top: 1px solid var(--color-border);
}

[data-theme="nuit"] .mini-player__close:hover {
  background-color: var(--npr-surface-2);
}

/* ---------- 8. MOUVEMENT RÉDUIT ---------- */

@media (prefers-reduced-motion: reduce) {
  [data-theme="nuit"] .npr-sky__aurora,
  [data-theme="nuit"] .npr-sky__stars,
  [data-theme="nuit"] .npr-moon,
  [data-theme="nuit"] .npr-moon__glow {
    animation: none;
  }

  [data-theme="nuit"] .npr-sky__stars { opacity: 0.85; }

  [data-theme="nuit"] .npr-sky__shoot,
  [data-theme="nuit"] .npr-sky__fly {
    display: none;
  }
}