/* =========================================================
   ÉBURNEA - Modale d'introduction vidéo (une seule fois par session)
   ========================================================= */

.intro-modal{
  position: fixed; inset: 0; z-index: 5000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.intro-modal.is-visible{
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility 0s linear 0s;
}
.intro-modal.is-hiding{
  opacity: 0; visibility: visible;
  transition: opacity .6s ease, visibility 0s linear .6s;
}

.intro-modal__stage{
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}

.intro-modal__video{
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.intro-modal__video.is-ready{ opacity: 1; }

/* Voile de marque discret pour renforcer la charte graphique pendant la lecture */
.intro-modal__overlay{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,24,55,0.55) 0%, rgba(0,24,55,0) 22%, rgba(0,24,55,0) 70%, rgba(0,24,55,0.75) 100%);
}

.intro-modal__brand{
  position: absolute; top: 26px; left: 26px; right: 26px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
}
.intro-modal__brand img{ height: 44px; width: auto; flex-shrink: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.intro-modal__brand span{
  color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .5px;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.intro-modal__caption{
  position: absolute; left: 0; right: 0; bottom: 90px; z-index: 2;
  text-align: center; padding: 0 24px; pointer-events: none;
}
.intro-modal__caption h2{
  color: #fff; font-size: clamp(1.3rem, 3.2vw, 2.2rem); margin: 0 0 8px;
  text-shadow: 0 4px 18px rgba(0,0,0,.55);
}
.intro-modal__caption h2 em{ font-style: normal; color: var(--gold-light, #f0b642); }
.intro-modal__caption p{
  color: rgba(255,255,255,0.9); margin: 0; font-weight: 600; font-size: 1rem;
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
}

.intro-modal__controls{
  position: absolute; right: 22px; bottom: 22px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
}

.intro-modal__skip{
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.55); color: #fff;
  padding: 12px 22px; border-radius: 50px; font-weight: 700; font-size: .92rem;
  cursor: pointer; transition: all .25s ease;
}
.intro-modal__skip:hover{
  background: var(--gold, #D99A16); border-color: var(--gold, #D99A16); color: var(--navy, #002859);
  transform: translateY(-2px);
}
.intro-modal__skip i{ font-size: .8rem; }

.intro-modal__mute{
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s ease; font-size: 1rem;
}
.intro-modal__mute:hover{ background: rgba(255,255,255,0.28); }

/* Barre de progression fine en bas de l'écran */
.intro-modal__progress{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 4px; background: rgba(255,255,255,0.18);
}
.intro-modal__progress-bar{
  height: 100%; width: 0%; background: var(--gold, #D99A16);
  transition: width .2s linear;
}

/* Loader pendant le chargement de la vidéo */
.intro-modal__loader{
  position: absolute; z-index: 1; color: #fff; font-size: 2rem;
  opacity: 1; transition: opacity .3s ease;
}
.intro-modal__loader.is-hidden{ opacity: 0; pointer-events: none; }

@media (max-width: 640px){
  .intro-modal__brand{ top: 16px; left: 16px; right: 16px; }
  .intro-modal__brand img{ height: 30px; }
  .intro-modal__brand span{ font-size: .74rem; max-width: 62vw; }
  .intro-modal__caption{ bottom: 78px; padding: 0 18px; }
  .intro-modal__caption h2{ font-size: clamp(1.05rem, 5.5vw, 1.5rem); }
  .intro-modal__caption p{ font-size: .84rem; }
  .intro-modal__controls{ right: 14px; bottom: 14px; gap: 8px; }
  .intro-modal__skip{ padding: 9px 14px; font-size: .78rem; }
  .intro-modal__skip span{ display:inline; }
  .intro-modal__mute{ width: 38px; height: 38px; font-size: .85rem; }
}

@media (max-width: 380px){
  .intro-modal__brand span{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .intro-modal, .intro-modal.is-visible, .intro-modal.is-hiding{ transition: none; }
  .intro-modal__video{ transition: none; }
}