/* ==========================================================================
   CEM GAINDÉ FATMA — responsive.css
   Approche MOBILE FIRST : les styles de base (dans style.css) ciblent le
   mobile ; ce fichier ajoute des règles en min-width pour enrichir la mise
   en page sur les écrans plus grands.
   Paliers : 375 / 576 / 768 / 992 / 1200 / 1400
   ========================================================================== */

/* ---------- ≥375px : petit mobile confortable ---------- */
@media (min-width: 375px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≥576px : grand mobile / très petite tablette ---------- */
@media (min-width: 576px) {
  .container { padding: 0 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .hero-actions .btn { flex: 0 0 auto; width: auto; }
}

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

  .event-card { flex-wrap: nowrap; }
  .event-thumb { width: 160px; aspect-ratio: 16/10; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-item { border-bottom: none; }
  .stat-item:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.12); }
  .stat-item:last-child { border-right: none; }

  .principal-card { grid-template-columns: 300px 1fr; }
  .principal-photo { min-height: 100%; }
  .principal-body { padding: 40px; }

  .result-search-card { margin-top: -90px; }
  .result-search-form { flex-direction: row; }

  .cta-band { flex-direction: row; text-align: left; }

  .filter-bar { flex-direction: row; align-items: center; }
  .chip-group { justify-content: flex-start; }
}

/* ---------- ≥992px : ordinateur portable / petit desktop ---------- */
@media (min-width: 992px) {
  /* Le header retrouve son format desktop : barre de contact, bouton, nav horizontale */
  .topbar { display: block; }
  .header-main { padding: 16px 0; gap: 24px; }
  .brand { gap: 14px; }
  .brand-mark { width: 54px; height: 54px; }
  .brand-text .brand-name { font-size: 1.15rem; }
  .brand-text .brand-sub { font-size: 0.72rem; letter-spacing: .08em; }
  .header-actions .btn { display: inline-flex; }

  /* La navigation devient une barre horizontale toujours visible */
  .navbar { display: block !important; border-top: 1px solid var(--border); }
  .nav-list { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 6px; }
  .nav-list a { border-bottom: 3px solid transparent; border-left: none; padding: 14px 16px; }
  .nav-list a:hover, .nav-list a.active { background: transparent; border-bottom-color: var(--gold); }
  .menu-toggle { display: none; }

  /* Le tiroir et la barre d'onglets sont des patterns mobiles uniquement */
  .nav-drawer, .nav-drawer-backdrop, .bottom-tabbar { display: none !important; }
  body { padding-bottom: 0; }
  .back-to-top { bottom: 28px; right: 28px; }

  .hero { min-height: 62vh; text-align: left; }

  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .split-media { order: 2; }
  .split-body { order: 1; }

  .principal-card { grid-template-columns: 340px 1fr; }
  .principal-body { padding: 54px; }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }


  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
  .footer-bottom { flex-direction: row; text-align: left; }

  .section { padding: 100px 0; }
  .section--tight { padding: 64px 0; }
}

/* ---------- ≥1200px : desktop ---------- */
@media (min-width: 1200px) {
  .hero { min-height: 66vh; }
}

/* ---------- ≥1400px : grand écran ---------- */
@media (min-width: 1400px) {
  .container { max-width: 1260px; }
}

/* ---------- Confort tactile : agrandir les zones cliquables sous 992px ---------- */
@media (max-width: 991.98px) {
  .contact-info-list li { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}