/* =============================================
   RESPONSIVE — MOBILE FIRST
   Breakpoints : sm 640 / md 768 / lg 1024 / xl 1280
   ============================================= */

/* ════════════════════════════════════════════
   BASE MOBILE  (<640px)
════════════════════════════════════════════ */

/* Navbar */
.nav-links { display: none; }
.nav-burger { display: flex; }

/* Hero */
.hero-content {
  padding-top: calc(var(--nav-height) + var(--space-lg));
  padding-bottom: var(--space-2xl);
}

.hero-ctas {
  flex-direction: column;
  align-items: stretch;
  max-width: 300px;
  margin-inline: auto;
}

.hero-ctas .btn-primary,
.hero-ctas .btn-ghost {
  justify-content: center;
  width: 100%;
}

/* Blobs plus petits sur mobile */
.blob-1 { width: 280px; height: 280px; }
.blob-2 { width: 220px; height: 220px; }
.blob-3 { width: 200px; height: 200px; }

/* Section realtime */
.realtime-layout { grid-template-columns: 1fr; }
.realtime-text { order: 1; }
.realtime-mockup { order: 2; }

/* Téléphone — seul badge-1 visible sur mobile */
.badge-2, .badge-3 { display: none; }
.badge-1 {
  top: auto;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  animation: floatBadge 4s ease-in-out infinite;
}

.photo-frame {
  width: 100%;
  max-width: 420px;
  transform: none;
  margin-inline: auto;
}

/* Features grid */
.features-grid { grid-template-columns: 1fr; }

/* Carousel : 1 carte visible */
.region-card {
  flex: 0 0 calc(100% - var(--space-xl));
}

/* Boutons carousel */
.carousel-btn--prev { left: 0; }
.carousel-btn--next { right: 0; }

/* Stats band */
.stats-band {
  grid-template-columns: repeat(2, 1fr);
  padding: var(--space-xl);
  gap: var(--space-lg);
}

/* Hearts layout */
.hearts-layout { grid-template-columns: 1fr; }
.boost-col { margin-top: var(--space-2xl); }

/* Events layout */
.events-layout {
  grid-template-columns: 1fr;
  justify-items: center;
}
.events-text {
  order: 1;
  text-align: center;
  max-width: 100%;
}
.events-text .section-label,
.events-text .section-title,
.events-text .section-desc {
  text-align: center;
}
.events-ticket { order: 2; }

/* Store badges */
.store-badges { flex-direction: column; }

/* Section desc limite largeur */
.section-desc { max-width: 100%; }

/* Particules réduites sur mobile (géré en JS) */

/* ════════════════════════════════════════════
   SM  (≥640px)
════════════════════════════════════════════ */
@media (min-width: 640px) {

  /* Réactive les boutons côte à côte */
  .hero-ctas {
    flex-direction: row;
    align-items: center;
    max-width: none;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    width: auto;
  }

  /* Features : 2 colonnes */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Badge téléphone : repositionné */
  .badge-1 {
    top: 15%;
    left: -25%;
    bottom: auto;
    transform: none;
  }

  /* Stats 2 colonnes toujours */
  .stats-band {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Store badges côte à côte */
  .store-badges { flex-direction: row; }
}

/* ════════════════════════════════════════════
   MD  (≥768px)
════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Nav : liens visibles, burger caché */
  .nav-links { display: flex; }
  .nav-burger { display: none; }
  .mobile-menu { display: none; }

  /* Photo légèrement plus grand sur tablette */
  .photo-frame {
    max-width: 460px;
    transform: rotateY(-3deg);
  }

  /* Badge-2 de retour sur tablette */
  .badge-2 {
    display: flex;
    top: 50%;
    right: -22%;
    transform: translateY(-50%);
  }

  /* Carousel : 2 cartes visibles */
  .region-card {
    flex: 0 0 calc(50% - var(--space-xl) / 2);
  }

  /* Stats : 4 colonnes */
  .stats-band {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Events layout en 2 colonnes */
  .events-layout {
    grid-template-columns: 1fr auto;
    justify-items: start;
  }
  .events-text {
    order: unset;
    text-align: left;
  }
  .events-text .section-label,
  .events-text .section-title,
  .events-text .section-desc {
    text-align: left;
  }
  .events-ticket { order: unset; }
}

/* ════════════════════════════════════════════
   LG  (≥1024px)
════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Realtime : 2 colonnes */
  .realtime-layout {
    grid-template-columns: 1fr 1fr;
  }
  .realtime-text { order: unset; }
  .realtime-mockup { order: unset; }

  /* Tous les badges flottants */
  .badge-1, .badge-2, .badge-3 { display: flex; }

  .badge-1 {
    top: 20%;
    left: -25%;
    bottom: auto;
    transform: none;
  }

  .badge-2 {
    top: 50%;
    right: -22%;
    transform: translateY(-50%);
  }

  .badge-3 {
    bottom: 18%;
    right: -16%;
    top: auto;
  }

  /* Photo pleine taille */
  .photo-frame {
    max-width: 520px;
  }

  /* Features : 3 colonnes */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Carousel : 3 cartes visibles */
  .region-card {
    flex: 0 0 calc(33.333% - (var(--space-xl) * 2 / 3));
  }

  /* Hearts layout 2 colonnes */
  .hearts-layout {
    grid-template-columns: 1fr 1fr;
  }
  .boost-col { margin-top: 0; }
}

/* ════════════════════════════════════════════
   XL  (≥1280px)
════════════════════════════════════════════ */
@media (min-width: 1280px) {

  .realtime-layout { gap: var(--space-5xl); }
  .hearts-layout   { gap: var(--space-5xl); }

  .events-layout {
    gap: var(--space-5xl);
  }

  /* Légère augmentation du hero title */
  .hero-title-main {
    font-size: 7rem;
  }
}

/* ════════════════════════════════════════════
   ACCESSIBILITY — prefers-reduced-motion
════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .blob-1, .blob-2, .blob-3,
  .hero-badge,
  .live-dot,
  .photo-glow,
  .photo-frame,
  .floating-badge,
  .badge-1, .badge-2, .badge-3,
  .ticket,
  .card-icon--heart,
  .boost-ring,
  .scroll-indicator,
  .btn-primary,
  .btn-mobile-cta,
  .hero-title-main {
    animation: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #particles-canvas { display: none; }
}

/* ════════════════════════════════════════════
   PRINT
════════════════════════════════════════════ */
@media print {
  #navbar,
  .scroll-indicator,
  .cursor-dot,
  .cursor-ring,
  #particles-canvas,
  .hero-blobs {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .section-hero {
    min-height: auto;
    padding: 2rem;
  }
}