/* ==========================================================================
   RESPONSIVE - Breakpoints adaptés mobile-first
   Breakpoints : xl ≤ 1280 | lg ≤ 1024 | md ≤ 768 | sm ≤ 480 | xs ≤ 360
   ========================================================================== */

/* ── Extra-large (≤ 1280px) ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .container { padding-inline: var(--s6); }

  .hero__title { font-size: clamp(2.4rem, 5.5vw, 4.5rem); }

  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

/* ── Large / Tablette paysage (≤ 1024px) ───────────────────────────────── */
@media (max-width: 1024px) {
  :root { --header-h: 62px; }

  /* Grille 3 cols → 2 cols */
  .grid--3 { grid-template-columns: repeat(2, 1fr); gap: var(--s6); }

  /* Grille 4 cols → 2 cols */
  .grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }

  /* Stat band : retrait des séparateurs verticaux */
  .stats-band .stat-block + .stat-block { border-left: none; }

  /* Showcase : 1 colonne */
  .app-showcase {
    grid-template-columns: 1fr;
    gap: var(--s12);
  }
  .app-showcase--reverse .app-showcase__mockup { order: unset; }

  /* Contact : 1 colonne */
  .contact-layout { grid-template-columns: 1fr; gap: var(--s10); }
  .contact-info   { position: static; }

  /* Footer : 2 colonnes */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s8) var(--s12);
  }

  /* Hero app preview disparaît */
  .hero__app-preview { display: none; }
}

/* ── Medium / Tablette portrait (≤ 768px) ───────────────────────────────── */
@media (max-width: 768px) {
  :root { --header-h: 58px; }

  .container { padding-inline: var(--s5); }

  /* ─ Header mobile ─ */
  .header__nav   { display: none; }
  .header__cta   { display: none; }
  .header__burger { display: flex; }
  .header__logo img { width: 102px; height: auto; }
  .header__logo { margin-left: calc(-1 * var(--s2)); }

  /* ─ Sections ─ */
  .section     { padding-block: var(--s16); }
  .section--lg { padding-block: var(--s20); }

  /* ─ Hero ─ */
  .hero__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: calc(var(--header-h) + var(--s4));
    padding-inline: var(--s5);
    gap: var(--s6);
  }
  /* Aplatir hero__left et hero__actions pour pouvoir réordonner librement */
  .hero__left    { display: contents; }
  .hero__actions { display: contents; }

  /* Ordre mobile : titre → desc → Qui sommes-nous → réseaux → téléphone → Découvrir */
  .hero__title           { order: 1; font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero__desc            { order: 2; }
  .hero__action-secondary { order: 3; }
  .hero__right           { order: 4; display: flex; justify-content: center; padding-block: var(--s4); }
  .hero__action-primary  { order: 5; }
  .hero__socials         { order: 6; flex-wrap: wrap; gap: var(--s2); }

  /* ─ Page hero ─ */
  .page-hero { padding-block: var(--s16) var(--s12); }

  /* ─ Section title ─ */
  .section-title    { font-size: var(--text-3xl); }
  .section-subtitle { font-size: var(--text-base); }

  /* ─ Grilles ─ */
  .grid--2 { grid-template-columns: 1fr; }
  /* grid--3 reste à 2 colonnes (hérité du 1024px) */
  .grid--4 { grid-template-columns: 1fr 1fr; }

  /* ─ Stats band ─ */
  .stats-band { padding-block: var(--s12); }
  .stats-band .grid--4 { grid-template-columns: 1fr 1fr; gap: var(--s1); }

  /* ─ Timeline ─ */
  .timeline { padding-left: var(--s8); }
  .timeline__title { font-size: var(--text-lg); }

  /* ─ App showcase ─ */
  .app-showcase__mockup { max-width: 220px; }

  /* ─ Hero banner ─ */
  .hero__app-banner { display: none; }

  /* ─ Packages partenariat ─ */
  .pkg-grid { grid-template-columns: 1fr; gap: var(--s5); }

  /* ─ Platform stats ─ */
  .platform-block__grid { grid-template-columns: repeat(2, 1fr); }

  /* ─ Contact form ─ */
  .contact-form-wrapper { padding: var(--s8) var(--s6); }
  .form-row { grid-template-columns: 1fr; gap: var(--s5); }

  /* ─ Partner CTA ─ */
  .partner-cta { padding: var(--s10) var(--s8); }
  .partner-cta__title { font-size: var(--text-2xl); }

  /* ─ Footer ─ */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s8);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ─ CTA section ─ */
  .cta-section__actions { flex-direction: column; align-items: center; }
  .cta-section__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* ─ Org group ─ */
  .org-group__members { gap: var(--s4); }
  .member-card { min-width: 120px; }
}

/* ── Small / Mobile (≤ 480px) ──────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --text-4xl: 2rem;
    --text-3xl: 1.625rem;
  }

  .container { padding-inline: var(--s4); }

  /* ─ Hero ─ */
  .hero__layout { padding-inline: var(--s4); }
  .hero__title { font-size: 2rem; }
  .hero__label { font-size: 0.625rem; }
  .hero__action-primary,
  .hero__action-secondary { width: 100%; justify-content: center; }
  .hero__socials { gap: var(--s2); }

  /* ─ Grilles ─ */
  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr 1fr; }

  /* ─ Stats band ─ */
  .stats-band .grid--4 { grid-template-columns: 1fr 1fr; }
  .stat-block__value   { font-size: 2.2rem; }

  /* ─ Section header ─ */
  .section-title  { font-size: 1.75rem; }
  .section-header { margin-bottom: var(--s8); }

  /* ─ Cards ─ */
  .card { padding: var(--s6); }
  .partner-cta { padding: var(--s8) var(--s6); }

  /* ─ Timeline ─ */
  .timeline { padding-left: var(--s6); }
  .timeline__dot { left: calc(-1 * var(--s6) - 1px); }

  /* ─ Form ─ */
  .contact-form-wrapper { padding: var(--s6) var(--s5); border-radius: var(--r-xl); }

  /* ─ Member cards ─ */
  .org-group__members { gap: var(--s3); }
  .member-card { min-width: 110px; padding: var(--s4); }
  .member-card__avatar { width: 60px; height: 60px; }

  /* ─ App showcase ─ */
  .app-showcase__mockup { max-width: 200px; }

  /* ─ Footer ─ */
  .footer__grid { grid-template-columns: 1fr; }
}

/* ── Extra-small (≤ 360px) ──────────────────────────────────────────────── */
@media (max-width: 360px) {
  .hero__title  { font-size: 1.75rem; }
  .hero__stores { gap: var(--s2); }

  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }

  .stats-band .grid--4 { grid-template-columns: 1fr 1fr; }
  .stat-block { padding: var(--s4) var(--s2); }
}

/* ── Hover : désactiver les animations au touch ─────────────────────────── */
@media (hover: none) {
  .card:hover,
  .btn:hover,
  .feature-item:hover,
  .partner-card:hover,
  .member-card:hover {
    transform: none;
    box-shadow: none;
  }

  .btn:hover { box-shadow: revert; }
  .btn--primary:hover { box-shadow: 0 2px 8px rgba(255,51,56,0.2); }
}

/* ── Préférence reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}