/* HERO — plein écran moins la nav */
.hero{
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h)); /* mobile moderne */
  display: grid;
  overflow: clip;                     /* évite les débords */
  background: #000;                   /* fond de sécurité pendant le chargement */

}

/* Vidéo couvrante */
.hero__media{
  position: fixed; inset: 0;
}
.hero__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Overlay pour le contraste texte/vidéo */
.hero__overlay{
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 60%, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
  pointer-events: none;

}

/* Variante "blend" : on enlève l’overlay qui biaiserait le mix */
.hero--blend .hero__overlay { display: none; }

/* Contenu */
.hero__content{
  position: relative;
  z-index: 1;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  min-height: clamp(340px, 62vh, 560px);
  /*padding: clamp(48px, 10vh, 120px) clamp(24px, 6vw, 80px);*/
  gap: clamp(12px, 2vw, 20px);
}
@media (max-width: 640px){
  .hero__content{
    padding: clamp(32px, 14vw, 56px) clamp(18px, 6vw, 36px);
    min-height: clamp(280px, 60vh, 420px);
  }
}
.hero__logo{
  order: 3;
  width: clamp(160px, 26vw, 395px);
  height: auto;
  display: block;
  margin: 0;
}

.hero__title{
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.05;
  margin: 0 0 12px 0;
  letter-spacing: 0.5px;
}

.hero__subtitle{
  font-size: clamp(16px, 2.2vw, 22px);
  opacity: .9;
  margin: 0;
}
/* Mélange "difference" sur le texte (garde du blanc pour un vrai invert) */
@supports (mix-blend-mode: difference) {
  .hero--blend .hero__content {
    color: #fff;                 /* blanc = inversion maximale */
    mix-blend-mode: difference;
  }
  /* Option : ne blender que les textes, pas le CTA */
  /*.hero--blend .hero__title,
  .hero--blend .hero__subtitle { mix-blend-mode: difference; }
  .hero--blend .hero__cta { mix-blend-mode: normal; }*/
}

/* Fallback mobile : blend parfois capricieux sur iOS avec <video>.
   On garde l’overlay en mobile et n’active le blend que desktop. */
/*@media (max-width: 900px){
  .hero--blend .hero__overlay { display: block; }
  .hero--blend .hero__content { mix-blend-mode: normal; color: var(--ink); }
}

/* CTA optionnel */
.hero__cta{
  display: inline-block;
  margin-top: 24px;
  padding: 10px 20px;
  color: var(--paper);                /* #262626 */
  background: var(--ink);             /* #f2e9d8 */
  border: 2px solid var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}
.hero__cta:hover{ transform: translateY(-1px); opacity: .95; }

/* Petite réduction de taille sur écrans très petits */
@media (max-width: 380px){
  .hero__title{ font-size: clamp(28px, 9vw, 40px); }
}

@supports (mix-blend-mode: difference){
  .hero--blend .hero__title,
  .hero--blend .hero__subtitle { mix-blend-mode: difference; color:#fff; }
}

/* ===== Sticky “pinned” hero ===== */
.hero-wrap{
  position: relative;
  z-index: 0;
}

.hero-wrap .hero { overflow: visible; }

/* Le hero occupe TOUT le viewport (nav passe AU-DESSUS) */
/*.hero{
  /* fallback + moderne ; le fallback “hidden” est juste avant
  overflow: hidden; 
  overflow: clip;
  min-height: 100vh;          /* <= remplace le calc(100vh - var(--header-h)) 
  min-height: 100dvh;
}*/


/* Le contenu qui suit passe au-dessus du hero */
.home-section, .site-footer{ position: relative; z-index: 1; }