/* =====================================================
   LE MUSÉE DU TEMPS VOLÉ — Écran d'accueil
   Photo héros, effet tournant du titre, actions de lancement.
   ===================================================== */

/* ---------- Effet tournant du titre d'accueil ---------- */
#ecran-intro h1 .lettre-tournante {
  display: inline-block;
  animation: lettreTourne 0.65s cubic-bezier(0.3, 1.4, 0.45, 1) both;
}
@keyframes lettreTourne {
  from { opacity: 0; transform: rotateY(180deg) rotate(-25deg) scale(0.5); }
  70% { opacity: 1; transform: rotateY(-12deg) scale(1.04); }
  to { opacity: 1; transform: none; }
}
#ecran-intro .sous-titre { animation: lettreTourne 0.7s ease-out 1.5s both; }

/* ---------- Photo héros (accueil) ---------- */
.hero {
  position: relative;
  display: block;
  width: 100%;
  height: 92vh;
  min-height: 430px;
  overflow: hidden;
  border-radius: 18px;
  text-decoration: none;
  margin-bottom: 28px;
  cursor: pointer;
}
.hero-photo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.9) saturate(0.92);
  transform: scale(1.03);
  transition: transform 0.6s ease;
}
.hero:hover .hero-photo { transform: scale(1.06); }
.hero-voile {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(14, 14, 26, 0.3) 0%, rgba(14, 14, 26, 0.08) 45%, rgba(14, 14, 26, 0.62) 80%, rgba(14, 14, 26, 0.95) 100%);
}
.hero-contenu {
  position: absolute;
  left: 0; right: 0;
  bottom: 8%;
  text-align: center;
  padding: 0 20px;
}
.hero-legende {
  display: inline-block;
  margin-top: 14px;
  color: var(--or-clair);
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px dashed var(--or);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.hero:hover .hero-legende { color: var(--texte); border-color: var(--or-clair); }
.hero:focus { outline: none; }
.hero:focus-visible .hero-legende { color: var(--texte); }
#ecran-intro h1 { text-shadow: 0 3px 22px rgba(0, 0, 0, 0.9); }
.hero .sous-titre {
  color: #e8e2d4;
  margin-bottom: 0;
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9);
}

/* ---------- Actions du héros : scénario et lancement côte à côte ---------- */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 24px;
  margin-top: 20px;
}
.hero-actions .hero-legende { margin-top: 0; }
.hero-actions .btn { box-shadow: 0 4px 0 #8a6420, 0 6px 18px rgba(0, 0, 0, 0.6); }