/* Création de site — l'univers.
   ------------------------------------------------------------------
   Une scène haute de plusieurs écrans : la vue reste accrochée en haut
   (position: sticky) pendant qu'on descend, et js/univers.js déroule
   l'histoire au fil du défilement — l'espace, la Terre qui monte du bas,
   puis la Bretagne où s'allument des commerces. Les quatre temps du
   texte se relaient au même endroit. Sans WebGL, il reste le ciel
   étoilé et le texte ; mouvements réduits : tout se lit d'un bloc. */

.univers {
  position: relative;
  height: 600vh;
  background: #02030a;
  color: #fff;
}
.univers-collant {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.univers-toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s var(--ease-sortie);
}
.univers-toile.est-prete { opacity: 1; }

/* Deux ombres par-dessus la scène : en haut, pour que le menu reste
   lisible quand la Terre passe derrière ; à gauche, derrière le texte. */
.univers-collant::before,
.univers-collant::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.univers-collant::before {
  inset: 0 0 auto 0;
  height: 150px;
  background: linear-gradient(rgb(2 3 10 / 0.78), rgb(2 3 10 / 0));
}
.univers-collant::after {
  inset: 0 auto 0 0;
  width: min(62vw, 820px);
  background: linear-gradient(90deg, rgb(2 3 10 / 0.62), rgb(2 3 10 / 0.35) 55%, rgb(2 3 10 / 0));
}
@media (max-width: 760px) {
  .univers-collant::after { inset: auto 0 0 0; width: auto; height: 55%; background: linear-gradient(rgb(2 3 10 / 0), rgb(2 3 10 / 0.72)); }
}

/* Ciel de secours (et d'attente) : quelques étoiles en dégradés. */
.univers-ciel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 64%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 48%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 82%, #ffe7d6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 86%, #fff 50%, transparent 51%),
    radial-gradient(60% 50% at 80% 20%, rgb(40 60 140 / 0.22), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgb(255 80 0 / 0.08), transparent 70%);
  transition: opacity 1.2s var(--ease-sortie);
}
.univers-toile.est-prete + .univers-ciel { opacity: 0; }

/* --- les quatre temps du texte ------------------------------------- */
.univers-textes {
  position: relative;
  z-index: 2;
  height: 100%;
  pointer-events: none;
}
.univers-etape {
  position: absolute;
  left: var(--container-pad);
  right: var(--container-pad);
  opacity: 0;
  translate: 0 26px;
  filter: blur(6px);
  transition: opacity 0.8s var(--ease-sortie), translate 0.9s var(--ease-sortie), filter 0.8s var(--ease-sortie);
}
.univers-etape.est-visible { opacity: 1; translate: 0 0; filter: none; pointer-events: auto; }

.e1 { top: 50%; transform: translateY(-50%); max-width: 760px; }
.e1 h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); max-width: 13ch; margin-top: var(--sp-4); color: #fff; }
.e1 .section-intro { margin-top: var(--sp-5); max-width: 46ch; color: rgb(255 255 255 / 0.74); }
.e1 .etiquette { color: rgb(255 255 255 / 0.72); }
.e1 .etiquette::before { background: var(--orange); }
.univers-descendre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-7);
  font-size: var(--fs-small);
  color: rgb(255 255 255 / 0.6);
}
.univers-descendre::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(#fff, transparent);
  animation: descendre 1.8s var(--ease-sortie) infinite;
}
@keyframes descendre { from { transform: scaleY(0); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: bottom; } }

/* Les phrases du milieu, grandes, en bas à gauche : la Terre occupe le
   centre et la droite. */
.e2, .e3, .e4 {
  bottom: 14%;
  max-width: 17ch;
  font-family: var(--font-display);
  font-variation-settings: "wght" var(--wght-titre);
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.e5 { bottom: 12%; max-width: 30ch; }
.e5 > p:first-child {
  font-family: var(--font-display);
  font-variation-settings: "wght" var(--wght-titre);
  font-size: clamp(2rem, 4.4vw, 3.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--orange);
}
.univers-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-5); }
/* Sur le noir de l'espace, le bouton principal passe en blanc. */
.univers .btn-primaire { background: #fff; color: var(--encre); }
.univers .btn-primaire:hover { background: var(--orange); color: var(--encre); }
.univers .btn-contour { color: #fff; border-color: rgb(255 255 255 / 0.4); }
.univers-note { margin-top: var(--sp-4); font-size: 0.76rem; color: rgb(255 255 255 / 0.5); }

/* --- les commerces qui s'allument --------------------------------------
   Trois éléments par commerce, placés par js/univers.js : le point sur la
   ville, le nom rangé en couronne autour de la région, et le trait qui
   les relie (un seul <svg> pour tous les traits). */
.univers-etiquettes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.commerce-traits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.commerce-traits line {
  stroke: rgb(255 255 255 / 0.5);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease-sortie);
}
.commerce-traits line.est-allume { opacity: 1; }

.commerce-point {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgb(255 80 0 / 0.25), 0 0 14px 2px rgb(255 120 40 / 0.85);
  opacity: 0;
  transition: opacity 0.4s var(--ease-sortie);
}
.commerce-point.est-allume { opacity: 1; animation: halo 2.4s ease-out infinite; }
@keyframes halo {
  0% { box-shadow: 0 0 0 0 rgb(255 80 0 / 0.6), 0 0 14px 2px rgb(255 120 40 / 0.85); }
  100% { box-shadow: 0 0 0 16px rgb(255 80 0 / 0), 0 0 14px 2px rgb(255 120 40 / 0.85); }
}

.commerce-nom {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  gap: 1px;
  padding: 7px 12px 8px;
  border-radius: 12px;
  background: rgb(10 12 22 / 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 3px 0 0 var(--orange);
  white-space: nowrap;
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.5s var(--ease-sortie), translate 0.6s var(--ease-sortie);
  will-change: transform;
}
.commerce-nom.est-allume { opacity: 1; translate: 0 0; }
.commerce-nom b { font-size: 0.82rem; font-weight: 600; color: #fff; }
.commerce-nom > span { font-size: 0.7rem; color: rgb(255 255 255 / 0.62); }

/* L'activité : une pastille qui sort de chaque étiquette — appel,
   demande, réservation, avis — et change toutes les quelques secondes. */
.commerce-signal {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--encre);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px -6px rgb(255 80 0 / 0.7);
  opacity: 0;
  scale: 0.6;
  transform-origin: 0 100%;
  transition: opacity 0.35s var(--ease-sortie), scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.commerce-nom.est-gauche .commerce-signal { left: auto; right: 0; transform-origin: 100% 100%; }
.commerce-signal.est-actif { opacity: 1; scale: 1; }
.commerce-signal.est-change { animation: signal-change 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes signal-change { 0% { scale: 0.7; } 100% { scale: 1; } }

.univers-mention {
  position: absolute;
  right: var(--container-pad);
  bottom: 22px;
  z-index: 2;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 0.78);
  font-size: 0.74rem;
  opacity: 0;
  transition: opacity 0.6s var(--ease-sortie);
}
.univers-mention.est-visible { opacity: 1; }

/* --- la barre du haut, au-dessus de l'espace --------------------------- */
body.dans-univers .navbar,
body.dans-univers .navbar.est-defile {
  --texte: #fff;
  --texte-doux: rgb(255 255 255 / 0.72);
  --trait: rgb(255 255 255 / 0.14);
  color: #fff;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.dans-univers .navbar::after { opacity: 0; }
body.dans-univers { --logo: #fff; --logo-defile: #fff; }
body.dans-univers .navbar .marque-signe { background: var(--orange); }
body.dans-univers .nav-cta { background: #fff; color: var(--encre); }
body.dans-univers .nav-bascule { border-color: rgb(255 255 255 / 0.3); }

@media (max-width: 760px) {
  .univers { height: 520vh; }
  .e2, .e3, .e4 { bottom: 10%; font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .e5 { bottom: 8%; }
  .univers-mention { right: auto; left: var(--container-pad); top: 76px; bottom: auto; }
  .commerce-signal { font-size: 0.6rem; padding: 3px 7px; }
  .commerce-nom { padding: 5px 9px 6px; }
  .commerce-nom b { font-size: 0.72rem; }
  .commerce-nom span { display: none; }
}

/* Mouvements réduits : pas d'histoire au défilement. Tout le texte se lit
   d'un bloc, sur la Terre posée à son dernier état. */
@media (prefers-reduced-motion: reduce) {
  .univers { height: auto; }
  .univers-collant { position: relative; height: auto; min-height: 100svh; }
  .univers-textes { height: auto; display: grid; gap: var(--sp-6); padding: calc(var(--header-h) + var(--sp-7)) 0 var(--sp-8); }
  .univers-etape, .e1, .e2, .e3, .e4, .e5 {
    position: relative; inset: auto; top: auto; bottom: auto; transform: none;
    opacity: 1; translate: none; filter: none; transition: none; pointer-events: auto;
  }
  .univers-descendre { display: none; }
  .univers-descendre::after, .commerce-point.est-allume { animation: none; }
}