/* ============================================================
   Hero : image déjà recadrée en amont au ratio bannière
   (~4,3:1). Plus besoin d'astuce CSS — width:100% + height:auto
   suffit : pleine largeur, hauteur compacte et proportionnelle,
   image entière, nette, sans flou ni recadrage supplémentaire.
   ============================================================ */

.hero.hero--background{
  position:relative;
  overflow:hidden;
  width:100%;
  isolation:isolate;
}

.hero-bg-img{
  display:block;
  width:100%;
  height:auto;
}

/* Voile dégradé à gauche pour garder le texte HTML lisible */
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.84) 20%,
    rgba(255,255,255,.45) 36%,
    rgba(255,255,255,.08) 52%,
    rgba(255,255,255,0) 64%
  );
}

.hero-grid{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  min-height:0;
  height:100%;
}

.hero-copy{
  width:min(610px,48%);
  padding:28px 0 24px;
}

.hero h1{
  margin-top:0;
  text-shadow:0 2px 10px rgba(255,255,255,.6);
}

.hero-lede{
  max-width:560px;
  text-shadow:0 1px 8px rgba(255,255,255,.8);
}

.hero-actions{margin-top:18px;}

.mini-benefits{
  max-width:590px;
  margin-top:14px;
}

.hero-visual,
.hero-bg{display:none !important;}

/*
   Logo du header en version horizontale :
   symbole seul à gauche + grand wordmark YallaDrive à droite.
   Le mot YallaDrive contenu dans le PNG est entièrement masqué.
   La hauteur du header reste inchangée.
*/
@media (min-width:1001px){
  .nav-wrap{min-height:78px;}

  .brand{
    position:relative;
    width:350px;
    height:72px;
    flex:0 0 350px;
    display:block;
    overflow:visible;
  }

  /* Wordmark encore plus grand */
  .brand::before{
    content:"YallaDrive";
    position:absolute;
    left:92px;
    top:8px;
    z-index:2;
    font:800 46px/1 Manrope,Inter,sans-serif;
    letter-spacing:-2.6px;
    white-space:nowrap;
    background:linear-gradient(90deg,var(--purple) 0 50%,var(--gold) 50% 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .brand::after{
    content:"Ensemble, on avance";
    position:absolute;
    left:125px;
    top:56px;
    z-index:2;
    color:var(--purple);
    font:600 10px/1 Inter,sans-serif;
    letter-spacing:.01em;
    white-space:nowrap;
  }

  /*
     Le PNG original sert uniquement de source au symbole.
     Le cadrage est volontairement très serré sur sa partie haute
     afin que ni le mot YallaDrive ni le slogan du PNG n'apparaissent.
  */
  .brand img{
    position:absolute;
    left:0;
    top:-4px;
    width:94px;
    height:150px;
    max-height:none;
    object-fit:contain;
    object-position:center top;
    clip-path:inset(0 0 66% 0);
    transform:none;
    z-index:1;
  }
}

/*
   Portables et écrans desktop courants, y compris les dalles
   15/16/17 pouces haute résolution.
   L'image reste strictement intacte : seuls les contenus HTML
   superposés deviennent plus compacts afin que les 4 bénéfices
   restent visibles dans la hauteur disponible.
*/
@media (min-width:1001px) and (max-width:2400px){
  .hero-copy{
    width:min(545px,49%);
    padding:12px 0 10px;
  }

  .hero h1{
    font-size:clamp(48px,4.1vw,62px);
    line-height:.94;
    margin:0 0 7px;
  }

  .hero-lede{
    max-width:510px;
    font-size:16px;
    line-height:1.25;
    margin:0 0 12px;
  }

  .hero-actions{
    gap:10px;
    margin-top:0;
    margin-bottom:10px;
  }

  .hero-actions .btn{
    min-width:178px;
    padding:9px 13px;
    gap:8px;
    border-radius:10px;
    font-size:13px;
  }

  .hero-actions .btn small{
    font-size:10px;
    line-height:1.15;
  }

  .icon-box{font-size:18px;}

  .mini-benefits{
    max-width:515px;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-top:6px;
  }

  .mini-benefits div{
    font-size:9px;
    line-height:1.15;
  }

  .mini-benefits span{
    font-size:19px;
    margin-bottom:2px;
  }
}

/* Encore un peu plus compact autour de 1366/1280 px */
@media (min-width:1001px) and (max-width:1320px){
  .hero-copy{
    width:min(500px,50%);
    padding:8px 0 6px;
  }

  .hero h1{
    font-size:46px;
    margin-bottom:5px;
  }

  .hero-lede{
    font-size:14px;
    line-height:1.2;
    margin-bottom:8px;
  }

  .hero-actions{
    gap:8px;
    margin-bottom:7px;
  }

  .hero-actions .btn{
    min-width:164px;
    padding:7px 10px;
    font-size:12px;
  }

  .hero-actions .btn small{font-size:9px;}
  .icon-box{font-size:16px;}

  .mini-benefits{
    max-width:480px;
    gap:6px;
    margin-top:4px;
  }

  .mini-benefits div{font-size:8px;}
  .mini-benefits span{font-size:17px;}
}

@media (max-width:900px){
  .hero-scrim{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.90) 48%,
      rgba(255,255,255,.38) 72%,
      rgba(255,255,255,.08) 100%
    );
  }
  .hero-copy{
    width:min(620px,72%);
    padding:44px 0 36px;
  }
}

@media (max-width:700px){
  .hero-scrim{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 58%,
      rgba(255,255,255,.55) 100%
    );
  }
  .hero-grid{
    align-items:flex-start;
    padding-top:24px;
  }
  .hero-copy{
    width:100%;
    padding:20px 0 18px;
  }
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions .btn{width:100%;}
  .mini-benefits{grid-template-columns:repeat(2,1fr);}
}