/* ============================================================
   Bande démo — bouton d'appel + lecteur plein écran
   Ajouté le 20/10/2026
   ============================================================ */

/* --- Bouton dans le hero --- */
.hero-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.3rem;
  padding: 0.8rem 1.6rem 0.8rem 0.9rem;
  background: rgba(6, 21, 37, 0.52);
  border: 1px solid rgba(216, 171, 118, 0.7);
  color: var(--color-ivory, #F3F0E9);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.35s ease, background 0.35s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}

.hero-demo:hover,
.hero-demo:focus-visible {
  border-color: rgba(216, 171, 118, 0.95);
  background: rgba(6, 21, 37, 0.6);
}

.hero-demo__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(216, 171, 118, 0.55);
  border-radius: 50%;
  flex: 0 0 auto;
}

.hero-demo__icon svg {
  width: 13px;
  height: 13px;
  fill: var(--color-gold, #D8AB76);
  margin-left: 2px;
}

.hero-demo__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  line-height: 1.2;
}

/* --- Modale de lecture --- */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 3vw, 2.5rem);
}

.demo-modal[hidden] {
  display: none;
}

.demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 18, 0.94);
  backdrop-filter: blur(6px);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.demo-modal__panel {
  position: relative;
  width: min(1120px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  animation: demo-in 0.32s ease both;
}

@keyframes demo-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-modal__panel { animation: none; }
}

/* Lecteur Vimeo : la vignette de la page tient la place jusqu'à l'ouverture,
   l'iframe n'est injectée qu'au clic (aucun script tiers au chargement). */
.demo-modal__frame {
  position: relative;
  display: block;
  width: 100%;
  max-height: calc(100vh - 8rem);
  aspect-ratio: 16 / 9;
  background: #000 center / cover no-repeat;
  border: 1px solid rgba(216, 171, 118, 0.25);
}

.demo-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* La bande démo mobile est tournée en vertical : le cadre suit, sinon l'image
   serait réduite à une bande minuscule au milieu de deux marges noires. */
@media (max-width: 767px) {
  .demo-modal__frame {
    aspect-ratio: 9 / 16;
    width: min(100%, calc((100vh - 8rem) * 9 / 16));
    max-height: calc(100vh - 8rem);
    margin: 0 auto;
  }
}

.demo-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.demo-modal__caption {
  margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mist, #AFC6D6);
}

.demo-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(216, 171, 118, 0.4);
  border-radius: 50%;
  color: var(--color-ivory, #F3F0E9);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.demo-modal__close:hover,
.demo-modal__close:focus-visible {
  border-color: var(--color-gold, #D8AB76);
  color: var(--color-gold, #D8AB76);
}

@media (max-width: 700px) {
  .hero-demo {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  }

  .demo-modal__panel {
    gap: 0.7rem;
  }

  .demo-modal__caption {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }
}

/* --- Hero sur mobile : dégager le visage ---
   Le poster vertical place le sujet au centre du cadre ; le texte du hero
   tombait dessus (yeux et appareil photo masqués). On passe le hero en pleine
   hauteur, on ancre le texte en bas et on densifie le dégradé dans le bas. */
@media (max-width: 767px) {
  .home-page .hero {
    aspect-ratio: auto;
    min-height: 100svh;
  }

  .home-page .hero-inner {
    position: static;
    align-items: flex-end;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Le bloc texte est ancré en bas du hero (et non du conteneur, qui n'a plus
     de hauteur propre) : le portrait garde tout le haut du cadre libre. */
  .home-page .hero-copy {
    position: absolute;
    z-index: 4;
    left: 24px;
    right: 24px;
    bottom: 1.75rem;
    width: auto;
    margin: 0;
  }

  .home-page .hero-eyebrow {
    margin-bottom: 0.85rem;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
  }

  .home-page .hero-title {
    margin-bottom: 1.35rem;
    font-size: clamp(2.15rem, 10.5vw, 2.7rem);
    line-height: 1.02;
  }

  .home-page .hero-lead {
    max-width: 34ch;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .home-page .hero-demo {
    margin-top: 1.4rem;
  }

  .home-page .hero-veil {
    background: linear-gradient(
      180deg,
      rgba(6, 21, 37, 0.34) 0%,
      rgba(6, 21, 37, 0.06) 30%,
      rgba(6, 21, 37, 0.70) 70%,
      rgba(6, 21, 37, 0.94) 100%
    );
  }
}