/* =====================================================================
   L'OLIVIER FORGÉ — CSS SECTION : HERO
   À ajouter à la suite de olf-global.css (CSS personnalisé Elementor).
   ===================================================================== */

.olf-hero{
  --olf-hero-h:92vh;            /* hauteur desktop — ajustable */
  position:relative;
  min-height:var(--olf-hero-h);
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:#23201c;           /* repli avant chargement de l'image */
}

/* Image plein cadre via <img> (pas de background-image) */
.olf-hero__bg{ position:absolute; inset:0; overflow:hidden; }
.olf-hero__img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center;
  transform:scale(1.04);
  transition:transform 6s cubic-bezier(.2,.7,.2,1);
}
.olf-hero:hover .olf-hero__img{ transform:scale(1.08); }   /* zoom lent au survol */

/* Voile graphique (dégradé décoratif — seul usage CSS justifié) */
.olf-hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(20,18,16,.50) 0%,
    rgba(20,18,16,.05) 40%,
    rgba(20,18,16,.55) 100%);
}

.olf-hero__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  padding:0 24px; max-width:680px;       /* contrainte interne uniquement */
}
.olf-hero__ey{ color:rgba(255,255,255,.82); font-size:12px; }
.olf-hero__title{
  color:#fff; font-weight:500; letter-spacing:.02em; line-height:.95;
  font-size:clamp(46px,8.5vw,96px); margin:0;
}
.olf-hero__rule{ width:46px; height:1px; background:var(--olf-gold); }
.olf-hero__sub{
  color:rgba(255,255,255,.85); font-weight:300; line-height:1.6;
  font-size:clamp(13px,1.4vw,15px); max-width:440px; margin:0;
}
.olf-hero__scroll{
  position:absolute; left:0; right:0; bottom:22px; z-index:2;
  text-align:center; color:rgba(255,255,255,.7); font-size:18px;
  animation:olf-hero-bob 2.4s ease-in-out infinite;
}
@keyframes olf-hero-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }

/* ------------------------------------------------------------------ */
/*  TABLETTE — 768px à 1024px                                          */
/* ------------------------------------------------------------------ */
@media (max-width:1024px){
  .olf-hero{ --olf-hero-h:78vh; }
  .olf-hero__inner{ gap:18px; max-width:560px; }
  .olf-hero__title{ font-size:clamp(54px,9vw,76px); }
  .olf-hero__img{ object-position:center 35%; } /* recentre le sujet */
}

/* ------------------------------------------------------------------ */
/*  MOBILE — jusqu'à 767px                                             */
/* ------------------------------------------------------------------ */
@media (max-width:767px){
  .olf-hero{ --olf-hero-h:90svh; }     /* svh : évite le saut de barre d'URL */
  .olf-hero__inner{ gap:15px; padding:0 22px; }
  .olf-hero__ey{ font-size:10px; letter-spacing:.22em; }
  .olf-hero__title{ font-size:clamp(40px,13vw,58px); line-height:.98; }
  .olf-hero__rule{ width:34px; }
  .olf-hero__sub{ font-size:12px; max-width:260px; }
  .olf-hero__btn{ width:100%; max-width:300px; padding:14px 26px; } /* CTA au pouce */
  .olf-hero__veil{
    background:linear-gradient(180deg,
      rgba(20,18,16,.45) 0%,
      rgba(20,18,16,.08) 32%,
      rgba(20,18,16,.66) 100%);        /* plus de lisibilité bas d'écran */
  }
  .olf-hero__scroll{ bottom:16px; font-size:16px; }
}