/* ============================================================
   ALOUNIKA — worlds.css
   Fonds PROVISOIRES par monde (phase structure) + habillage
   spécifique. 100% CSS, aucune vidéo.

   ► CONTRAT D'INTÉGRATION VIDÉO (§11.1) :
     passer du provisoire à la vidéo = remplacer le CONTENU de
     `.world-bg` par <video><source src="assets/video/<monde>.mp4">.
     Rien d'autre ne bouge. Les recettes ci-dessous vivent donc
     sur `.world-bg` (fond) et `.world-fx` (effets) uniquement.
   ============================================================ */

/* ------------------------------------------------------------
   CHAMP D'ÉTOILES — réutilisable par tous les mondes
   Deux calques de "poussière d'étoiles" + quelques étoiles vives.
   ------------------------------------------------------------ */
.starfield {
  position: absolute; inset: 0;
  background-repeat: repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 28%, rgba(244,239,228,.85), transparent 60%),
    radial-gradient(1px 1px at 76% 74%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 42%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 46% 8%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 66% 54%, rgba(255,255,255,.7), transparent 60%);
  background-size: 480px 480px, 620px 620px, 540px 540px, 700px 700px,
                   460px 460px, 660px 660px, 520px 520px, 600px 600px;
  animation: star-twinkle 6s ease-in-out infinite alternate;
}
@keyframes star-twinkle { from { opacity:.65 } to { opacity:1 } }

/* Nébuleuse diagonale (voie lactée) — bleutée, très douce. */
.nebula {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 18% at 40% 55%, rgba(70,110,200,.28), transparent 70%),
    radial-gradient(30% 14% at 55% 45%, rgba(120,90,200,.18), transparent 70%);
  transform: rotate(-32deg);
  filter: blur(14px);
  mix-blend-mode: screen;
}

/* ============================================================
   MONDE 1 — ACCUEIL « Le portail cosmique »  (RÉFÉRENCE)

   Le fond est désormais la VIDÉO Higgsfield/Seedance (§11.1). Elle
   contient déjà planète, chiffres, boussole, montagnes et mer : les
   recettes CSS provisoires (planète, mer, rochers, chiffres flottants,
   boussole) ont été retirées pour éviter tout doublon à l'écran.
   ============================================================ */

/* Fond SANS texte, ANIMÉ dans les deux cas. DESKTOP = vidéo 16:9 (planète qui
   tourne, .hero-desktop-bg) ; MOBILE = vidéo verticale 9:16 (.hero-mobile-bg).
   Le titre est en HTML par-dessus. Le même fond sert FR + RU. */
[data-world="accueil"] .world-bg { background-color: #05091c; }

/* DESKTOP (>768px) : vidéo 16:9 plein écran + poster en fond CSS de repli
   (prefers-reduced-motion / échec de chargement). Règles SCOPÉES >768px →
   rien de tout ça n'est téléchargé sur mobile. */
.hero-desktop-bg { display: none; }
@media (min-width: 769px) {
  [data-world="accueil"] .world-bg {
    background: #05091c center / cover no-repeat url("../img/hero-desktop.jpg");
  }
  .hero-desktop-bg {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

/* MOBILE (≤768px) : vidéo verticale 9:16 en fond, plein écran (cover).
   Le poster vertical est aussi posé en fond CSS → repli garanti si la vidéo
   échoue ou est mise en pause (prefers-reduced-motion), sous la vidéo. */
.hero-mobile-bg { display: none; }
@media (max-width: 768px) {
  [data-world="accueil"] .world-bg {
    background: #05091c center / cover no-repeat url("../img/hero-mobile.jpg");
  }
  .hero-mobile-bg {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}


/* --- Habillage du hero (contenu éditorial de l'Accueil) --- */
/* DESKTOP : le bloc occupe la ZONE CALME à gauche de la planète (~0→55% de
   l'image) et son contenu (titre, sous-titre, séparateur, tagline) est CENTRÉ
   dans cette zone — visuellement équilibré, jamais collé au bord, sans jamais
   toucher la planète (padding du .world-content ≈ 6vw + 48vw < 55%). */
.hero {
  width: min(48vw, 42rem);
  align-self: flex-start;
  text-align: center;
}

.hero__title {
  font-size: var(--fs-hero);
  display: flex;
  flex-direction: column;
  align-items: center;            /* centre le sous-titre sous la grande ligne */
  gap: .06em;
  background: none;
  filter: drop-shadow(0 2px 22px rgba(217,169,75,.16));
}

/* OR MÉTALLIQUE liquide, posé PAR LIGNE (reflet au milieu de chaque ligne). */
.hero__line {
  display: block;
  white-space: nowrap;
  font-weight: 500;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);   /* léger biseau sombre sous les lettres */
}
/* Grande ligne « NUMÉROLOGIE » : fin, fort contraste, aéré. */
.hero__line--main {
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
}
/* Sous-titre « ET PSYCHANALYSE MATRICIELLE » : plus petit et plus étroit que
   la grande ligne, très espacé (comme la référence). */
.hero__line--sub {
  font-size: .385em;
  font-weight: 500;
  letter-spacing: .15em;
  margin-top: .32em;
}

/* Séparateur : filet — point — étoile 4 branches — point — filet (centré). */
.hero__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-gold-300);
  width: 70%;
  margin: clamp(.9rem, 2.2vh, 1.5rem) auto;
}
.hero__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,169,75,.65) 60%, rgba(217,169,75,.75));
}
/* Filet de DROITE en miroir du gauche : les deux sont brillants vers l'étoile
   (centre) et s'estompent vers les bords. */
.hero__divider .hero__rule:last-child { transform: scaleX(-1); }
.hero__dot {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-gold-300);
  box-shadow: 0 0 4px rgba(217,169,75,.6);
}
.hero__star {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--c-gold-300);
  filter: drop-shadow(0 0 8px rgba(217,169,75,.7));
}

.hero__tagline {
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  color: var(--c-cream);
  line-height: 1.5;
  text-align: center;             /* centré sous le séparateur, comme la référence */
}

/* Sur mobile (fond vertical) : le bloc titre est CENTRÉ au MILIEU de l'écran,
   horizontalement ET verticalement, lignes centrées entre elles. */
@media (max-width: 768px) {
  /* Vertical : neutralise le `flex-start` mobile de base.css sur l'Accueil. */
  [data-world="accueil"] .world-content {
    justify-content: center;
    padding-top: clamp(3rem, 8vh, 6rem);
  }
  .hero {
    width: auto;
    max-width: 94vw;
    margin: 0 auto;
    align-self: center;
    text-align: center;
  }
  /* Hiérarchie mobile (réf. hero-titre-reference) — taille CALCULÉE pour que
     le titre le plus long (« НУМЕРОЛОГИЯ » RU) tienne sur UNE ligne à ~80 %
     de la largeur (marge ~10 % de chaque côté), sans toucher la planète, tout
     en restant nettement plus grand que le sous-titre puis la tagline. */
  .hero__title {
    align-items: center;
    font-size: clamp(1.95rem, 10vw, 2.65rem);
  }
  .hero__line--main { letter-spacing: .01em; }
  .hero__line--sub { font-size: .46em; letter-spacing: .07em; }
  .hero__tagline { font-size: .78rem; }
}

/* ============================================================
   MONDE 2 — À PROPOS « Le sanctuaire »
   Intro : vidéo sobre en fond (cover), décor (télescope) à GAUCHE →
   le texte se pose sur la zone calme à DROITE. Poster en repli
   mobile / prefers-reduced-motion (video masquée → poster CSS).
   ============================================================ */
[data-world="apropos"] .world-bg {
  background: #05091c center / cover no-repeat url("../img/posters/a-propos.jpg");
}
/* (base.css met déjà object-fit:cover sur .world-bg > video — parfait ici.) */

/* Hero de la page : hauteur d'écran, texte calé à DROITE. */
[data-world="apropos"] .world-content { justify-content: center; }
.apropos-hero {
  max-width: 40rem;
  margin-left: auto;               /* pousse le bloc sur la zone calme (droite) */
  text-align: left;
}
.apropos-hero .overline { color: var(--c-gold-400); }
.apropos-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.05;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 20px rgba(217,169,75,.16));
}
.apropos-hero__lead {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  color: var(--c-cream);
  line-height: 1.5;
  margin-top: var(--sp-6);
  max-width: 34rem;
}
/* Voile discret sous le texte (le ciel est sombre : très léger). */
.apropos-hero::before {
  content: "";
  position: absolute; inset: 0 -2rem;
  z-index: -1;
  background: radial-gradient(80% 90% at 70% 50%, rgba(5,9,28,.55), transparent 75%);
  pointer-events: none;
}
.apropos-hero { position: relative; }

@media (max-width: 640px) {
  [data-world="apropos"] .world-video { display: none; }
  /* Sur mobile le décor est en bas du poster : on remonte le texte et on
     l'aligne à gauche pleine largeur pour la lisibilité. */
  .apropos-hero { margin-left: 0; max-width: none; }
  [data-world="apropos"] .world-bg { background-position: 70% top; }
}

/* ============================================================
   MONDE 3 — TARIFS « La table des offrandes »
   Intro : vidéo sobre en fond (cover), décor EN BAS(-droite) → les
   cartes de prix se placent dans la grande zone calme du haut/centre.
   PRIORITÉ : lisibilité des prix (cartes opaques, texte Inter).
   ============================================================ */
[data-world="tarifs"] .world-bg {
  background: #05091c center / cover no-repeat url("../img/posters/tarifs.jpg");
}
/* Contenu calé vers le HAUT/centre (zone calme), le décor reste en bas. */
[data-world="tarifs"] .world-content {
  justify-content: flex-start;
  padding-top: clamp(6rem, 13vh, 9rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}
.tarifs-hero { width: 100%; }
.tarifs-hero__head { text-align: center; max-width: 48rem; margin-inline: auto; position: relative; }
.tarifs-hero__head::before {   /* voile discret sous le titre (ciel sombre : léger) */
  content: ""; position: absolute; inset: -1.5rem -2rem; z-index: -1;
  background: radial-gradient(70% 100% at 50% 40%, rgba(5,9,28,.5), transparent 75%);
}
.tarifs-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.05;
  font-size: clamp(2.2rem, 5vw, 4rem);
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 20px rgba(217,169,75,.16));
}

@media (max-width: 640px) {
  [data-world="tarifs"] .world-video { display: none; }
  [data-world="tarifs"] .world-bg { background-position: 60% top; }
  [data-world="tarifs"] .world-content { justify-content: flex-start; }
}

/* ============================================================
   MONDE 4 — RESSOURCES « La bibliothèque flottante »
   Intro : vidéo sobre en fond (cover), décor (livres) à GAUCHE →
   le contenu (intro + e-book) se pose sur la zone calme centre/droite.
   ============================================================ */
[data-world="ressources"] .world-bg {
  background: #05091c center / cover no-repeat url("../img/posters/ressources.jpg");
}
[data-world="ressources"] .world-content { justify-content: center; }
.res-hero {
  max-width: 46rem;
  margin-left: auto;               /* zone calme à droite */
  position: relative;
}
.res-hero::before {
  content: ""; position: absolute; inset: -1.5rem -2rem; z-index: -1;
  background: radial-gradient(85% 95% at 65% 45%, rgba(5,9,28,.55), transparent 78%);
  pointer-events: none;
}
.res-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.05;
  font-size: clamp(2.2rem, 5vw, 4rem);
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 20px rgba(217,169,75,.16));
}
.res-hero__lead {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  color: var(--c-cream); line-height: 1.5;
  margin-top: var(--sp-4); max-width: 40rem;
}

@media (max-width: 640px) {
  [data-world="ressources"] .world-video { display: none; }
  [data-world="ressources"] .world-bg { background-position: 62% top; }
  .res-hero { margin-left: 0; max-width: none; }
}

/* ============================================================
   REDUCED-MOTION
   La vidéo de l'Accueil est mise en pause par motion.js (le poster
   s'affiche). Les fonds provisoires restants (worlds 2-4) sont statiques.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .starfield { animation: none; }
}