/* ═══════════════════════════════════════════════════════════════
   BANNER-MOTS.CSS - Bannière de mots cinéma défilants avec vague
   La vitesse et les mots se configurent dans js/banner-mots.js
═══════════════════════════════════════════════════════════════ */

/* ── Conteneur global ─────────────────────────────────────────── */
.banner-mots {
  background-color: var(--noir);
  overflow: hidden;
  padding: 2.5rem 0;
  position: relative;

  /* Ligne dorée fine en haut et en bas */
  border-top: 1px solid rgba(184, 150, 46, 0.2);
  border-bottom: 1px solid rgba(184, 150, 46, 0.2);
}

/* ── Bande de mots ───────────────────────────────────────────── */
.banner-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
  /* Animation injectée par JS */
}

@keyframes bannerDefile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Mot individuel ──────────────────────────────────────────── */
.banner-mot {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  letter-spacing: 0.05em;
  color: var(--gris-clair);
  white-space: nowrap;
  padding: 0 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;

  /* Animation de vague appliquée individuellement par JS */
  transition: color 0.3s ease;
}

/* Séparateur doré entre chaque mot */
.banner-mot::after {
  content: '·';
  color: var(--or);
  font-size: 1.2em;
  line-height: 1;
  margin-left: 0;
  opacity: 0.7;
}

/* ── Effet vague (classes injectées par JS) ──────────────────── */
/*
  JS ajoute la classe .vague-actif sur le track quand l'animation tourne.
  Chaque .banner-mot reçoit un animation-delay différent via style inline.
*/
.banner-mot.en-vague {
  animation: motVague 2.5s ease-in-out infinite;
}

@keyframes motVague {
  0%,  100% { color: var(--gris-clair); transform: translateY(0); }
  50%        { color: var(--or-clair);  transform: translateY(-15px); }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .banner-mots {
    padding: 2.5rem 0;
  }

  .banner-mot {
    font-size: 1.15rem;
    padding: 0 1.8rem;
    gap: 1.8rem;
  }
}