/* ---------- HERO VIDÉO — logo seul, vidéo plein écran, tel et pc ---------- */
.video-hero{
  position:relative;
  height:100svh;
  min-height:520px;
  background:var(--nuit-fond);
  overflow:hidden;
}

.video-hero__header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:5;
  background:linear-gradient(180deg, rgba(5,8,14,0.6) 0%, rgba(5,8,14,0) 100%);
  padding-bottom:30px;
}

.video-hero__frame--full{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  box-shadow:none;
  max-width:none;
  aspect-ratio:auto;
  margin:0;
}
.video-hero__frame--full .video-hero__video{ object-position:center 38%; }

/* Voile léger, juste assez pour que le logo reste lisible — plus de gros
   assombrissement puisqu'il n'y a plus de texte sur la vidéo. */
.video-hero__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,8,14,0.35) 0%, rgba(5,8,14,0) 22%, rgba(5,8,14,0) 78%, rgba(5,8,14,0.25) 100%);
}

.video-hero__frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  will-change:transform;
}
.video-hero__poster,
.video-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  display:block;
}
.video-hero__poster{ z-index:0; }
.video-hero__video{ z-index:1; }
.video-hero__frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(5,8,14,0.18) 0%, rgba(5,8,14,0) 30%, rgba(5,8,14,0) 68%, rgba(5,8,14,0.32) 100%);
  pointer-events:none;
}

/* ---------- TITRE — sa propre section, révélée au scroll ---------- */
.hero-intro{
  position:relative;
  background:var(--nuit-fond);
  padding:min(14vw,90px) 22px min(12vw,70px);
}
.hero-intro__inner{
  max-width:640px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.hero-intro .img-hero-eyebrow,
.hero-intro .img-hero-subtitle{ text-shadow:none; }
.hero-intro__title{ color:var(--ivoire); text-shadow:none; }
@media (min-width:900px){
  .hero-intro{ padding:min(8vw,110px) 40px min(7vw,80px); }
  .hero-intro__inner{ margin:0; max-width:720px; }
}

/* ---------- SECTION IMMERSIVE — vidéo 2, pleine largeur ---------- */
.video-immersive{
  position:relative;
  height:82svh;
  min-height:520px;
  max-height:820px;
  overflow:hidden;
  background:var(--nuit-fond);
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.video-immersive.is-visible{ opacity:1; transform:none; }

.video-immersive__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 50%;
}
.video-immersive__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,8,14,0.5) 0%, rgba(5,8,14,0.05) 30%, rgba(5,8,14,0.05) 65%, rgba(5,8,14,0.75) 100%);
  pointer-events:none;
}
.video-immersive__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding:0 22px max(34px, env(safe-area-inset-bottom));
  max-width:760px;
}
.video-immersive__caption .eyebrow{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); margin:0 0 12px; font-weight:500;
}
.video-immersive__caption h2{
  font-weight:300;
  font-size:clamp(24px,4.2vw,40px);
  line-height:1.12;
  color:var(--ivoire);
  margin:0;
  text-shadow:0 4px 24px rgba(0,0,0,0.6);
}

/* ---------- RANGÉE TOITURE — vidéo 3 + photos existantes ---------- */
.roof-detail-media{ position:relative; }
.roof-detail-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 45%;
  display:block;
}
.roof-detail-photostack{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:2;
  display:flex;
  gap:10px;
}
.roof-detail-photostack img{
  width:88px;
  height:112px;
  object-fit:cover;
  border-radius:4px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,0.6);
  border:1px solid rgba(243,234,217,0.14);
}
@media (max-width:640px){
  .roof-detail-photostack{ right:16px; bottom:16px; }
  .roof-detail-photostack img{ width:64px; height:82px; }
}