.hero{ padding: 30px 0 26px; }

.hero-slider{
  position: relative;
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 450px;
  background: rgba(255,255,255,.35);
}

.hero-slides{ position: absolute; inset: 0; }

.hero-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 700ms ease, transform 1200ms ease;
}
.hero-slide.is-active{ opacity: 1; transform: scale(1.0); }

.hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(248,250,252,.15), rgba(248,250,252,.75));
}

/* Overlay minimal (texte seulement) */
.hero-content{
  position: relative;
  z-index: 2;
}

.hero-content--minimal{
  background: rgba(255,255,255,.1); /* plus transparent léger */
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px;               /* padding réduit */
  margin: 14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  max-width: 62ch;
}

.hero-content--minimal h1{
  margin:0 0 6px;
  font-size: clamp(26px, 4vw, 44px);
}
.hero-content--minimal p{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
}

/* Sécurité: si d'anciens blocs traînent */
.hero-controls,
.hero-actions{ display:none !important; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition: none; transform:none; }
}

@media (max-width: 900px){
  .hero-slider{ min-height: 420px; }
  .hero-content--minimal{
    margin: 10px;
    padding: 12px;
    max-width: calc(100% - 20px);
  }
}

/* ===== HERO — Fix cadrage mobile ===== */
@media (max-width: 768px){
  .hero{
    min-height: 56vh;     /* ajuste : 50–65vh selon ton goût */
  }

  /* Si tes slides sont en background-image */
  .hero .hero-slides > *{
    background-size: cover;
    background-position: center 35%; /* descends la zone visible (30–55% à tester) */
  }

  /* Si tes slides utilisent <img> */
  .hero .hero-slides img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
  }

  /* Optionnel : un peu plus d’air pour le texte */
  .hero .hero-content{
    padding: 18px 16px;
  }
}
/* ===== HERO — Mobile : garder la partie gauche (badge) sur slide 1 ===== */
@media (max-width: 768px){

  /* 1) Moins haut = moins de crop (tu “vois plus d’image”) */
  .hero-slider{
    min-height: 360px; /* essaie 340–400 selon ton rendu */
  }

  /* 2) Par défaut, on garde un cadrage neutre pour les autres slides */
  #heroSlides .hero-slide{
    background-position: center 40%;
  }

  /* 3) Slide 1 (celle avec le badge) : cadrage vers la gauche */
  #heroSlides .hero-slide:first-child{
    background-position: left 40%;  /* <-- clé : “left” garde le badge */
  }
}