/* ==========================================================================
   Acacia Voyage — « Nous trouver » : de la Terre vue de l'espace à la façade
   de l'Atelier Acacia (Caserne Campana, 3 place Marquis de Larray, Mont-Dauphin).
   Composant isolé : toutes les classes sont préfixées « av- ».
   Il reprend les variables du site (--basalt, --gold-lt, --serif…) avec des
   valeurs de repli, pour fonctionner aussi hors de la page d'accueil.
   ========================================================================== */

.av {
  --av-bg: var(--basalt, #1A1410);
  --av-gold: var(--gold-lt, #D4A857);
  --av-serif: var(--serif, 'Playfair Display', Georgia, serif);
  --av-sans: var(--sans, 'Inter', system-ui, sans-serif);
  --av-ease: var(--ease, cubic-bezier(.25, .46, .45, .94));
  background: var(--av-bg);
  color: #fff;
  padding: 9rem 0 7rem;
  overflow: hidden;
}
.av .eyebrow { color: var(--av-gold); }
.av .section-title { color: #fff; }
.av-head { text-align: center; margin-bottom: 3.5rem; }
.av-head .rule { margin: 1.4rem auto; background: var(--av-gold); }
.av-head p.av-intro { color: rgba(255, 255, 255, .58); font-size: 1rem; line-height: 1.8; max-width: 56ch; margin: 0 auto; }

/* ── Scène : format fixe pour que la vidéo et la photographie finale coïncident au pixel près ── */
.av-stage {
  position: relative;
  /* la scène tient toujours dans la fenêtre, sous le menu fixe du site (≈ 6 rem) */
  width: min(100%, 1600px, calc((100vh - 7rem) * 16 / 9));
  width: min(100%, 1600px, calc((100svh - 7rem) * 16 / 9));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}
@media (orientation: portrait) and (max-width: 900px) {
  .av-stage { aspect-ratio: 3 / 4; width: min(100%, calc((100vh - 6rem) * 3 / 4)); width: min(100%, calc((100svh - 6rem) * 3 / 4)); }  /* portrait : photo entière */
}
.av-video, .av-photo, .av-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.av-video { z-index: 1; background: #000; }
.av-photo { z-index: 2; }

/* états pilotés par le script (sans script : la photographie reste affichée) */
.av.is-js .av-photo { opacity: 0; transition: opacity .6s ease; }   /* fondu court : seule la netteté change */
.av.is-js.is-arrived .av-photo,
.av.is-js.is-still .av-photo { opacity: 1; }

/* ── Légende d'arrivée : nom et adresse, discrets ── */
.av-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(1.2rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 3rem);
  background: linear-gradient(to top, rgba(26, 20, 16, .72), rgba(26, 20, 16, 0));
  opacity: 0; transform: translateY(10px);
  transition: opacity 1.4s var(--av-ease) .25s, transform 1.4s var(--av-ease) .25s;
  pointer-events: none;
}
.av.is-arrived .av-caption, .av.is-still .av-caption, .av:not(.is-js) .av-caption { opacity: 1; transform: none; }
.av-caption-name { font-family: var(--av-serif); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.15; }
.av-caption-addr { margin-top: .45rem; font-size: clamp(.72rem, 1.1vw, .86rem); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }

/* ── Commandes ── */
.av-controls { position: absolute; top: .9rem; right: .9rem; z-index: 4; display: flex; gap: .5rem; }
.av-btn {
  font: 500 .68rem/1 var(--av-sans); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85); background: rgba(26, 20, 16, .42);
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 2px;
  padding: .6rem .9rem; cursor: pointer; backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, opacity .4s;
}
.av-btn:hover, .av-btn:focus-visible { background: rgba(26, 20, 16, .7); border-color: #fff; color: #fff; }
.av-btn:focus-visible { outline: 2px solid var(--av-gold); outline-offset: 2px; }
.av-btn[hidden] { display: none; }

/* bouton central « Lancer le voyage » (mouvement réduit, économie de données, lecture refusée) */
.av-play {
  position: absolute; right: .9rem; top: .9rem; z-index: 4;
  font: 500 .78rem/1 var(--av-sans); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(26, 20, 16, .55); border: 1px solid rgba(255, 255, 255, .5);
  padding: 1rem 1.6rem; border-radius: 2px; cursor: pointer; backdrop-filter: blur(6px);
}
.av-play:hover, .av-play:focus-visible { background: var(--gold, #B8924A); border-color: var(--gold, #B8924A); }
.av-play[hidden] { display: none; }

.av-credits { width: min(100%, 1600px); margin: .9rem auto 0; padding: 0 1rem; font-size: .7rem; line-height: 1.6; color: rgba(255, 255, 255, .38); text-align: center; }
.av-credits a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
  .av { padding: 6rem 0 5rem; }
  .av-controls { top: .6rem; right: .6rem; }
  .av-btn { padding: .55rem .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .av-caption { transition: none; }
}