/* =============================================
   RESPONSIVE — Mobile first corrections
   Breakpoints : 1024px / 768px / 480px
   ============================================= */

/* ---- 1024px — tablette ---- */
@media (max-width: 1024px) {

  /* Hero */
  .hero__split {
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
    min-height: 100svh;
  }

  .hero__left {
    padding-left: var(--container-pad) !important;
    padding-right: var(--space-md) !important;
  }

  /* Bento services */
  .bento-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .bento-card--featured,
  .bento-card[style*="span 2"] {
    grid-column: span 2 !important;
  }

  /* Stats */
  .stats__grid { gap: 0; }

  /* Témoignages */
  .testimonials-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .testi-card:nth-child(1) { grid-column: span 2 !important; }
  .testi-card:nth-child(4),
  .testi-card:nth-child(5) { grid-column: span 1 !important; }
}

/* ---- 900px ---- */
@media (max-width: 900px) {

  /* Hero — single column */
  .hero__split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    height: auto !important;
  }

  .hero__left {
    padding-top: calc(var(--nav-height) + var(--space-lg)) !important;
    padding-bottom: var(--space-xl) !important;
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
  }

  .hero__right {
    height: 60svh;
    min-height: 320px;
  }

  /* Sections grilles 2 colonnes → 1 */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Problem section */
  .problem__inner { grid-template-columns: 1fr !important; }

  /* Why us */
  .why-us__inner { grid-template-columns: 1fr !important; }

  /* Bento → 1 colonne */
  .bento-grid {
    grid-template-columns: 1fr !important;
  }

  .bento-card--featured,
  .bento-card[style*="span 2"] {
    grid-column: span 1 !important;
  }

  /* Services bento */
  .services__bento { grid-template-columns: 1fr !important; }
  .services__card--featured { grid-column: span 1 !important; }

  /* Témoignages */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }
  .testi-card:nth-child(n) { grid-column: span 1 !important; }

  /* Secteurs pills */
  [style*="secteur-pill"] { font-size: 11px; }

  /* Stat pills hero — repositionner */
  .hero__stats-float { display: none; }
}

/* ---- 768px — mobile ---- */
@media (max-width: 768px) {

  /* Variables */
  :root {
    --space-2xl: 56px;
    --space-3xl: 72px;
    --container-pad: 20px;
  }

  /* Nav mobile — géré entièrement par components.css */

  /* Hero H1 */
  #hero-title { font-size: clamp(28px, 8vw, 48px) !important; }

  /* Mini stats hero */
  [style*="display:flex;gap:var(--space-lg);margin-top:var(--space-xl);padding-top:var(--space-lg)"] {
    gap: var(--space-md) !important;
  }

  /* Ticker */
  .ticker__item { padding-inline: 16px !important; }

  /* Stats section */
  .stats__grid {
    grid-template-columns: 1fr !important;
    text-align: left;
  }

  .stats__item {
    border-right: none !important;
    border-bottom: 0.5px solid var(--color-border);
    padding: var(--space-md) 0 !important;
  }

  .stats__item:last-child { border-bottom: none; }

  /* CTA final */
  #cta-heading { font-size: clamp(26px, 7vw, 44px) !important; }

  /* Country selector */
  .country-selector__cards {
    grid-template-columns: 1fr !important;
    max-width: 300px;
  }

  /* Footer */
  .site-footer__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }

  /* Boutons */
  .btn--lg {
    padding: 13px 22px !important;
    font-size: 14px !important;
  }

  /* Bento grid sur mobile */
  .bento-grid { gap: 6px !important; }
  .bento-card { min-height: 200px !important; }
  .bento-card h3 { font-size: 16px !important; }

  /* Why-us section */
  .why-row { padding: 14px 8px !important; }
  .why-row__text { font-size: 13px !important; }

  /* Problem rows */
  .problem-row { padding: 14px 8px !important; }
  .problem-row__title { font-size: 15px !important; }
}

/* ---- 480px — très petit mobile ---- */
@media (max-width: 480px) {
  :root { --container-pad: 16px; }

  .hero__right { height: 50svh; min-height: 260px; }

  .testimonials-grid { gap: 6px !important; }

  .testi-card__result-value { font-size: 28px !important; }
}