/* ============================================================
   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.
   ============================================================ */

/* Bannière principale */
.hero {
    background-image: url("assets/images/banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 520px;
}





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

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

/*
   Voile blanc volontairement resserré sur la partie gauche :
   il garde le titre et les boutons lisibles, puis disparaît rapidement
   avant la zone centrale afin de préserver la mosquée et le décor.
*/
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse 62% 72% at 20% 26%,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.95) 30%,
      rgba(255,255,255,.84) 48%,
      rgba(255,255,255,.55) 62%,
      rgba(255,255,255,.16) 76%,
      rgba(255,255,255,0) 100%
    ),
    radial-gradient(
      ellipse 54% 38% at 24% 84%,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.90) 34%,
      rgba(255,255,255,.70) 54%,
      rgba(255,255,255,.26) 74%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.88) 18%,
      rgba(255,255,255,.64) 32%,
      rgba(255,255,255,.26) 44%,
      rgba(255,255,255,.06) 52%,
      rgba(255,255,255,0) 58%
    );
}
.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);
}

/* Les boutons restent toujours au-dessus du fondu des avantages */
.hero-actions{
  position:relative;
  z-index:5;
  margin-top:18px;
}

/*
   Les quatre avantages sont désormais une seule image.
   Cela garantit l'alignement exact des icônes et des libellés.
   Le fond blanc est appliqué uniquement dans cette zone :
   il éclaircit la photo de fond sans rendre l'image ni les boutons transparents.
*/
.benefits-band{
  position:relative;
  z-index:3;
  width:min(720px,68vw);
  margin-top:10px;
  padding:8px 14px 6px;
  isolation:isolate;
}

.benefits-band::before{
  content:"";
  position:absolute;
  inset:0 -26px -10px -26px;
  z-index:-1;
  pointer-events:none;
  border-radius:18px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.99) 0%,
    rgba(255,255,255,.98) 55%,
    rgba(255,255,255,.93) 78%,
    rgba(255,255,255,.72) 100%
  );
  box-shadow:0 0 34px 18px rgba(255,255,255,.68);
}

.benefits-band img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.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;
  }

  .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;
  }

  .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 15/16/17 pouces */
@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:6px;
  }

  .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;}

  /* environ deux fois plus petit que le rendu précédent */
  .benefits-band{
    width:min(680px,66vw);
    margin-top:5px;
    padding:5px 12px 4px;
  }
}

/* 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:4px;
  }

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

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

  .benefits-band{
    width:min(540px,64vw);
    margin-top:3px;
    padding:3px 8px;
  }
}

@media (max-width:900px){
  .hero-scrim{
  background:
    radial-gradient(
      ellipse 88% 72% at 30% 24%,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.95) 36%,
      rgba(255,255,255,.78) 58%,
      rgba(255,255,255,.34) 76%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.90) 42%,
      rgba(255,255,255,.48) 70%,
      rgba(255,255,255,.08) 100%
    );
}
  .hero-copy{
    width:min(620px,72%);
    padding:44px 0 36px;
  }

  .benefits-band{
    width:min(560px,82vw);
  }
}
/* Mobile */
@media (max-width: 768px) {
    .hero {
        background-image: url("assets/images/banner.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        min-height: 420px;
        height: auto;
    }
}
@media (max-width:700px){
  .hero-scrim{
  background:
    radial-gradient(
      ellipse 120% 72% at 50% 22%,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.96) 42%,
      rgba(255,255,255,.76) 66%,
      rgba(255,255,255,.28) 84%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 56%,
      rgba(255,255,255,.62) 82%,
      rgba(255,255,255,.14) 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%;}

  .benefits-band{
    width:100%;
    margin-top:8px;
    padding:4px;
  }

  .benefits-band::before{
    inset:0 -8px -6px -8px;
  }
}

/* ============================================================
   Responsive hero mobile / tablette
   Corrections mobile uniquement :
   - hero moins haut
   - chauffeur plus haut et un peu moins envahissant
   - visage visible au-dessus du bouton "Je suis chauffeur"
   - espace vide sous la bannière réduit
   - écriture manuscrite coupée à droite masquée autant que possible
   ============================================================ */
@media (max-width:1000px){
  .hero.hero--background{
    min-height:500px;
    height:auto;
    background:none;
  }

  .hero-bg-img{
    position:absolute;
    top:4%;
    left:0;
    right:0;
    width:100%;
    height:86%;
    z-index:0;
    object-fit:cover;
    object-position:78% 18%;
    transform:scale(1.03);
    transform-origin:right top;
    filter:saturate(1.10) contrast(1.05);
  }

  .hero-grid{
    position:relative;
    inset:auto;
    min-height:500px;
    height:auto;
    display:flex;
    align-items:flex-start;
    padding-top:18px;
    padding-bottom:14px;
  }

  .hero-copy{
    width:min(540px,74%);
    padding:14px 0 10px;
    text-align:left;
  }

  .hero h1{
    font-size:clamp(40px,7vw,56px);
    line-height:.94;
    margin:0 0 8px;
  }

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

  .hero-actions{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:10px;
    margin:0 0 8px;
  }

  .hero-actions .btn{
    flex:1 1 0;
    width:auto;
    min-width:0;
    padding:10px 12px;
    gap:8px;
    font-size:12px;
  }

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

  .benefits-band{
    width:min(560px,82vw);
    margin-top:4px;
    padding:2px 0 0;
  }

  .benefits-band::before{
    inset:0 -12px -6px -12px;
    border-radius:16px;
    background:
      radial-gradient(
        ellipse at 42% 46%,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.96) 52%,
        rgba(255,255,255,.86) 74%,
        rgba(255,255,255,.46) 90%,
        rgba(255,255,255,0) 100%
      );
    box-shadow:0 0 20px 10px rgba(255,255,255,.52);
  }

  .hero-scrim{
    background:
      radial-gradient(
        ellipse 86% 72% at 22% 26%,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.93) 34%,
        rgba(255,255,255,.74) 52%,
        rgba(255,255,255,.30) 68%,
        rgba(255,255,255,0) 82%
      ),
      radial-gradient(
        ellipse 22% 22% at 98% 74%,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 40%,
        rgba(255,255,255,0) 78%
      ),
      linear-gradient(
        90deg,
        rgba(255,255,255,.95) 0%,
        rgba(255,255,255,.86) 38%,
        rgba(255,255,255,.42) 58%,
        rgba(255,255,255,.06) 74%,
        rgba(255,255,255,0) 100%
      );
  }
}

@media (max-width:700px){
  .hero.hero--background{
    min-height:445px;
  }

  .hero-bg-img{
    top:1%;
    height:82%;
    object-position:80% 12%;
    transform:scale(1.04);
    transform-origin:right top;
  }

  .hero-grid{
    min-height:445px;
    padding-top:10px;
    padding-bottom:8px;
  }

  .hero-copy{
    width:100%;
    max-width:470px;
    padding:8px 0 6px;
    text-align:left;
  }

  .hero h1{
    font-size:40px;
    line-height:.94;
    margin-bottom:6px;
  }

  .hero-lede{
    font-size:13px;
    line-height:1.22;
    margin-bottom:10px;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:6px;
  }

  .hero-actions .btn{
    width:100%;
    padding:9px 8px;
    font-size:11px;
  }

  .hero-actions .btn small{
    font-size:8px;
  }

  .benefits-band{
    width:100%;
    margin-top:2px;
    padding:0;
  }

  .benefits-band::before{
    inset:0 -8px -4px -8px;
    box-shadow:0 0 16px 8px rgba(255,255,255,.46);
  }

  .hero-scrim{
    background:
      radial-gradient(
        ellipse 104% 70% at 25% 26%,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.92) 38%,
        rgba(255,255,255,.70) 56%,
        rgba(255,255,255,.28) 70%,
        rgba(255,255,255,0) 82%
      ),
      radial-gradient(
        ellipse 18% 20% at 98% 72%,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.90) 38%,
        rgba(255,255,255,0) 76%
      ),
      linear-gradient(
        90deg,
        rgba(255,255,255,.95) 0%,
        rgba(255,255,255,.84) 42%,
        rgba(255,255,255,.38) 60%,
        rgba(255,255,255,.06) 76%,
        rgba(255,255,255,0) 100%
      );
  }
}

@media (max-width:480px){
  .hero.hero--background{
    min-height:420px;
  }

  .hero-bg-img{
    top:0;
    height:80%;
    object-position:82% 10%;
    transform:scale(1.05);
    transform-origin:right top;
  }

  .hero-grid{
    min-height:420px;
    padding-top:8px;
    padding-bottom:6px;
  }

  .hero-copy{
    padding:6px 0 4px;
  }

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

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

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

  .hero-actions .btn{
    padding:8px 7px;
    font-size:10px;
  }

  .hero-actions .btn small{
    font-size:7px;
  }

  .benefits-band{
    margin-top:0;
  }
}