/* Bande unique des 4 bénéfices YallaDrive.
   Ce fichier complète hero.css et contient les réglages finaux du hero mobile. */

.hero-actions{
  position:relative;
  z-index:6;
}

.benefits-strip-wrap{
  position:relative;
  z-index:3;
  width:min(350px,35vw);
  max-width:none;
  margin-top:8px;
  isolation:isolate;
  pointer-events:none;
  user-select:none;
}

.benefits-strip-wrap::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-24px;
  right:-24px;
  top:0;
  bottom:-12px;
  border-radius:18px;
  background:radial-gradient(
    ellipse at 45% 48%,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.99) 42%,
    rgba(255,255,255,.96) 66%,
    rgba(255,255,255,.86) 82%,
    rgba(255,255,255,.55) 93%,
    rgba(255,255,255,0) 100%
  );
  box-shadow:0 8px 26px 16px rgba(255,255,255,.58);
  filter:blur(4px);
}

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

@media (min-width:1001px) and (max-width:2400px){
  .benefits-strip-wrap{
    width:min(330px,33vw);
    margin-top:6px;
  }
}

@media (min-width:1001px) and (max-width:1320px){
  .benefits-strip-wrap{
    width:min(270px,32vw);
    margin-top:4px;
  }

  .benefits-strip-wrap::before{
    left:-18px;
    right:-18px;
    top:0;
    bottom:-10px;
  }
}

@media (max-width:900px){
  .benefits-strip-wrap{
    width:min(300px,45vw);
    margin-top:6px;
  }
}

/* ============================================================
   MOBILE
   Une image dédiée est utilisée afin de ne plus recadrer artificiellement
   l'image desktop. Le fichier attendu est assets/banner-mobile.png.
   ============================================================ */
@media (max-width:768px){
  .hero.hero--background{
    min-height:360px !important;
    height:360px !important;
    overflow:hidden !important;
    background-image:url("assets/banner-mobile.png") !important;
    background-repeat:no-repeat !important;
    background-size:86% auto !important;
    background-position:104% top !important;
    background-color:#fff !important;
  }

  /* L'image desktop du HTML est désactivée uniquement sur mobile. */
  .hero-bg-img{
    display:none !important;
  }

  .hero-grid{
    position:relative;
    inset:auto;
    min-height:360px !important;
    height:360px !important;
    display:flex;
    align-items:flex-start;
    padding-top:8px !important;
    padding-bottom:0 !important;
  }

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

  /* L'image mobile possède déjà son propre fondu à gauche. */
  .hero-scrim{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.20) 34%,
      rgba(255,255,255,.06) 54%,
      rgba(255,255,255,0) 70%
    ) !important;
  }

  .hero.hero--background::after{
    display:none !important;
    content:none !important;
  }

  /* Le titre garde sa position ; l'accroche est descendue d'environ une ligne. */
  .hero h1{
    position:relative;
    top:12px;
    font-size:40px;
    line-height:.94;
    margin:0 0 6px;
  }

  .hero-lede{
    position:relative;
    top:26px;
    font-size:13px;
    line-height:1.22;
    margin:0 0 10px;
  }

  /* Descendre ensemble les 2 boutons + la bande des 4 icônes.
     Le transform ne modifie pas le reste de la mise en page. */
  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:0 0 5px !important;
    transform:translateY(50px);
  }

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

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

  .benefits-strip-wrap{
    width:min(300px,82vw);
    margin:28px auto 0 !important;
    transform:translateY(50px);
  }

  .benefits-strip-wrap::before{
    left:-10px;
    right:-10px;
    top:0;
    bottom:-6px;
    filter:blur(3px);
  }

  /* Header mobile : symbole + wordmark YallaDrive. */
  .nav-wrap{
    min-height:82px;
    gap:8px;
  }

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

  .brand img{
    position:absolute !important;
    left:0 !important;
    top:5px !important;
    width:66px !important;
    height:66px !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    clip-path:none !important;
    transform:none !important;
  }

  .brand::before{
    content:"YallaDrive";
    position:absolute;
    left:72px;
    top:20px;
    z-index:2;
    font:800 28px/1 Manrope,Inter,sans-serif;
    letter-spacing:-1.5px;
    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:74px;
    top:49px;
    z-index:2;
    color:var(--purple);
    font:600 8px/1 Inter,sans-serif;
    white-space:nowrap;
  }

  /* style.css gère déjà le padding mobile de .section. */
}

@media (max-width:480px){
  .hero.hero--background,
  .hero-grid{
    min-height:340px !important;
    height:340px !important;
  }

  .hero.hero--background{
    background-size:82% auto !important;
    background-position:106% top !important;
  }

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

  .hero-lede{
    top:24px;
    font-size:12px;
    margin-bottom:8px;
  }

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

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

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

  .nav-wrap{
    min-height:72px;
    gap:6px;
  }

  .brand{
    width:166px;
    height:64px;
    flex:0 0 166px;
  }

  .brand img{
    top:4px !important;
    width:56px !important;
    height:56px !important;
  }

  .brand::before{
    left:60px;
    top:16px;
    font-size:22px;
    letter-spacing:-1.2px;
  }

  .brand::after{
    left:61px;
    top:40px;
    font-size:7px;
  }

  .header-actions{gap:6px;}
  .lang-switch{font-size:11px;}

  .benefits-strip-wrap{
    margin-top:30px !important;
  }
}