/* ============================================================
   ADSGI · ADS GLOBAL INVEST — WEBSITE V2
   responsive.css — Règles par point de rupture (mobile-first)
   WEB-FE-MASTER-01 §4.3 · Design System breakpoints
     Mobile   < 640 px   · une colonne, nav repliée, marges 24 px
     Tablette 640–1024 px · deux colonnes, nav condensée
     Desktop  1024–1280 px · grille 12 colonnes, conteneur 1280 px
     Large    > 1280 px   · marges accrues, contenu centré
   Module complémentaire à global.css — sans duplication de règle.
   ============================================================ */

/* ---------- Utilitaires de grille responsive ---------- */
.grid { display: grid; gap: var(--sp-lg); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

/* Tablette */
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Large — contenu centré, jamais étiré */
@media (min-width: 1280px) {
  .container { max-width: var(--container); margin-inline: auto; }
}

/* Cibles tactiles ≥ 44 px sur mobile */
@media (max-width: 640px) {
  .btn, .nav-primary__link, .nav-mobile-list__link {
    min-height: 44px;
  }
}

/* Réduction de mouvement — accessibilité */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}