/*
 * responsive-hero.css
 * Correctifs responsive pour les sections hero et split-banner.
 * À charger après style.css. Ne modifie pas style.css ni index.html.
 */

/* ================================================================
   HERO
================================================================ */

/* ── Tablette 1024px ── */
@media (max-width: 1024px) {
  .hero {
    padding: 60px 48px 16px;
  }

  .hero__layout {
    --hero-pt: 100px;
    --hero-pb: 60px;
    padding: var(--hero-pt) 40px var(--hero-pb);
    gap: 32px;
  }
}

/* ── Mobile large 768px ── */
@media (max-width: 768px) {
  .hero {
    padding: 48px 20px 40px;
    min-height: auto !important;
  }

  /* Une seule colonne, texte en haut */
  .hero__layout {
    grid-template-columns: 1fr;
    padding: 80px 20px 40px;
    gap: 36px;
  }

  /* Le hero passe en une colonne : les textiles sont masqués plutôt que
     repoussés sous le texte, où ils voleraient la place de l'appel à
     l'action. */
  .hero__visual { display: none; }

  /* Centrage du contenu texte */
  .hero__content {
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .hero__sub {
    text-align: center;
    max-width: 100%;
    font-size: 15px;
  }

  .hero__badges {
    justify-content: center;
  }

  /* Boutons en colonne, pleine largeur */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
  }



}

/* ── Mobile 480px ── */
@media (max-width: 480px) {
  .hero {
    padding: 40px 16px 12px;
  }

  .hero__layout {
    padding: 72px 16px 32px;
    gap: 28px;
  }

  .hero__title {
    font-size: clamp(36px, 10vw, 52px);
  }

  .hero__sub {
    font-size: 14px;
  }

  .hero__badge {
    font-size: 10px;
    padding: 5px 12px;
  }


}

/* ── Mobile XS 320px ── */
@media (max-width: 360px) {
  .hero__layout {
    padding: 64px 12px 24px;
  }

  .hero__title {
    font-size: clamp(30px, 9vw, 44px);
  }


}


/* ================================================================
   SPLIT-BANNER
================================================================ */

/* ── Tablette 1024px ── */
@media (max-width: 1024px) {
  .split-banner {
    padding: 32px 40px;
  }

  .split-banner__inner {
    grid-template-columns: 1fr 1fr;
    height: auto;
    min-height: 360px;
  }

  .sb-main__body {
    padding: 32px 28px;
  }

  .sb-main__title {
    font-size: clamp(20px, 2.4vw, 32px);
  }
}

/* ── Mobile 768px ── */
@media (max-width: 768px) {
  .split-banner {
    padding: 24px 20px;
  }

  /* Passe en colonne : grande carte en haut, cartes en bas */
  .split-banner__inner {
    grid-template-columns: 1fr;
    height: auto;
    gap: 10px;
  }

  .sb-main {
    min-height: 280px;
    width: 100%;
    box-sizing: border-box;
  }

  .sb-main__body {
    padding: 28px 24px;
    min-width: 0;
    width: 100%;
  }

  .sb-main__title {
    font-size: clamp(22px, 5vw, 32px);
  }

  .sb-main__sub {
    font-size: 13px;
  }

  /* Colonne cartes droite : prend toute la largeur */
  .sb-cards {
    width: 100%;
    flex-direction: column;
  }

  /* La ligne de deux demi-cartes reste côte à côte sur tablette */
  .sb-cards__row {
    flex-direction: row;
    min-height: 160px;
  }

  .sb-card {
    box-sizing: border-box;
    max-width: 100%;
  }

  .sb-card__imgs {
    width: 100px;
  }
}

/* ── Mobile 480px ── */
@media (max-width: 480px) {
  .split-banner {
    padding: 20px 16px;
  }

  .sb-main {
    min-height: 240px;
  }

  .sb-main__body {
    padding: 20px 18px;
  }

  .sb-main__title {
    font-size: clamp(18px, 6vw, 26px);
  }

  .sb-main__sub {
    display: none; /* trop chargé sur très petit écran */
  }

  /* Les deux demi-cartes passent en colonne */
  .sb-cards__row {
    flex-direction: column;
    min-height: auto;
  }

  .sb-card--half {
    min-height: 130px;
    width: 100%;
  }

  /* L'image positionnée en absolu dans la carte bordeaux ne doit pas déborder */
  .sb-card--half img[style] {
    max-width: 70%;
    right: 0 !important;
  }

  .sb-card__imgs {
    width: 80px;
  }

  .sb-card__pct {
    font-size: clamp(28px, 8vw, 42px);
  }
}

/* ── Mobile XS 360px ── */
@media (max-width: 360px) {
  .split-banner {
    padding: 16px 12px;
  }

  .sb-main {
    min-height: 200px;
  }

  .sb-card--half {
    min-height: 110px;
  }
}