/* ===================================================================
   LA LOCO - page Visite virtuelle (bloc laloco/visite)
   Alternance des fonds : encre / blanc / encre
   Rayon 5px partout. Aucune bordure coloree.
   =================================================================== */

.ll-vv__scene,
.ll-vv__pratique,
.ll-vv__sortie { margin-block-start: 0; margin-block-end: 0; }

.ll-vv__filet {
  width: 54px; height: 3px; border-radius: 5px;
  background: var(--wp--preset--color--projecteur);
  margin: 15px 0 0;
}
.ll-vv__filet--clair { background: var(--wp--preset--color--projecteur-profond); }

.ll-vv__prose {
  margin: 14px 0 0; font-size: 1rem; line-height: 1.72;
  color: var(--wp--preset--color--encre-douce); max-width: 62ch;
}
.ll-sombre .ll-vv__prose { color: #C9CDD5; }

/* --------------------------------------------------- HERO ET VISITE */
.ll-vv__scene {
  position: relative;
  background: var(--wp--preset--color--encre);
  padding-block: clamp(64px, 8vw, 108px) clamp(56px, 7vw, 92px);
}
.ll-vv__voile {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(118% 90% at 8% 8%, rgba(251, 211, 76, 0.13), transparent 60%),
    radial-gradient(86% 68% at 92% 96%, rgba(91, 98, 112, 0.32), transparent 62%);
}
.ll-vv__wrap { position: relative; z-index: 1; }
.ll-vv__intro { max-width: 46ch; }
.ll-vv__titre {
  margin: 12px 0 0;
  font-family: var(--wp--preset--font-family--titres);
  font-size: clamp(2.125rem, 4.6vw, 3.5rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -0.02em;
  color: var(--wp--preset--color--blanc);
}
.ll-vv__accroche {
  margin: 20px 0 0; max-width: 56ch;
  font-size: 1.0625rem; line-height: 1.68; color: #C9CDD5;
}

/* Le cadre : ratio fixe, donc aucun saut de mise en page au chargement. */
.ll-vv__cadre {
  position: relative;
  margin-block-start: clamp(28px, 3.4vw, 44px);
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 30% 36%, #2B3340, #0B0D11 72%);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}
.ll-vv__iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* L affiche d activation : visible tant que la visite n est pas lancee. */
.ll-vv__affiche {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center;
}
.ll-vv__cadre--lance .ll-vv__affiche { display: none; }
.ll-vv__affiche-lib {
  margin: 0;
  font-family: var(--wp--preset--font-family--titres);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wp--preset--color--projecteur);
}
.ll-vv__affiche-note {
  margin: 0; max-width: 42ch;
  font-size: 0.8125rem; line-height: 1.55; color: #C9CDD5;
}

.ll-vv__legende {
  margin: 16px 0 0;
  font-size: 0.8125rem; letter-spacing: 0.02em; color: #C9CDD5;
}

/* ----------------------------------------------------------- PRATIQUE */
.ll-vv__pratique {
  background: var(--wp--preset--color--blanc);
  padding-block: clamp(64px, 8vw, 104px);
}
.ll-vv__pratique-grille {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.ll-vv__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ll-vv__lien {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; border-radius: 5px;
  background: var(--wp--preset--color--creme);
  text-decoration: none;
}
.ll-vv__lien-nom {
  font-family: var(--wp--preset--font-family--titres);
  font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--encre);
}
.ll-vv__lien-txt { font-size: 0.875rem; line-height: 1.55; color: var(--wp--preset--color--graphite); }

/* ------------------------------------------------------------- SORTIE */
.ll-vv__sortie {
  background: var(--wp--preset--color--encre);
  padding-block: clamp(52px, 6vw, 80px);
}
.ll-vv__sortie-grille {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 26px;
}
.ll-vv__sortie-txt { max-width: 52ch; }
.ll-vv__sortie-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------- RESPONSIVE */
@media (max-width: 1023.98px) {
  .ll-vv__pratique-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .ll-vv__cadre { aspect-ratio: 4 / 3; }
}
@media (max-width: 559.98px) {
  .ll-vv__sortie-actions { width: 100%; }
  .ll-vv__sortie-actions .ll-btn { flex: 1 1 auto; text-align: center; }
}

/* --------------------------------------------------------- ANIMATIONS
   Enfermees ici : hors de cette requete, aucune regle d opacite n existe.
   Aucune transformation de classe sur un element anime au defilement. */
@media (prefers-reduced-motion: no-preference) {
  .ll-vv__lien { transition: transform 340ms ease, box-shadow 340ms ease; }
  .ll-vv__lien:hover,
  .ll-vv__lien:focus-visible { transform: translateY(-4px); }

  @supports (animation-timeline: view()) {
    .ll-vv__lien {
      animation: llVvMonte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
  @keyframes llVvMonte {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
}