/* ============================================
   SAMSAKTI — Media Queries
   Mobile-first : base = mobile
   ============================================ */

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

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

  /* Footer : 3 colonnes */
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* --- Desktop (≥ 1024px) --- */
@media (min-width: 1024px) {
  /* Disciplines : 3 colonnes */
  .disciplines__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1000px;
    margin-inline: auto;
  }

  /* Hero : plus d'espace */
  .hero__content {
    max-width: 900px;
  }
}

/* --- Grand écran (≥ 1200px) --- */
@media (min-width: 1200px) {
  /* Disciplines : 3 colonnes */
  .disciplines__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   PAGE : À PROPOS — Ajouts responsive
   ============================================ */

/* --- Tablette (≥ 768px) --- */
@media (min-width: 768px) {
  /* Valeurs : 2 colonnes */
  .about-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Profs : 2 colonnes */
  .about-profs__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    margin-inline: auto;
  }
}

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

/* ============================================
   PAGE : TARIFS — Ajouts responsive
   ============================================ */

/* --- Tablette (≥ 768px) --- */
@media (min-width: 768px) {
  /* Grille tarifs : 2 colonnes */
  .tarifs-formules__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Paiement : 3 colonnes */
  .tarifs-paiement__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Visuels Canva : 2 colonnes */
  .tarifs-visuels__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  /* Card populaire légèrement plus grande */
  .tarifs-card--popular {
    transform: scale(1.02);
  }

  .tarifs-card--popular:hover {
    transform: scale(1.02) translateY(-4px);
  }

  /* Visuels Canva : 3 colonnes */
  .tarifs-visuels__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   PAGE : PLANNING — Ajouts responsive
   ============================================ */

/* --- Tablette (≥ 768px) --- */
@media (min-width: 768px) {
  /* Infos pratiques : 3 colonnes */
  .planning-infos__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   PAGE : GALERIE — Ajouts responsive
   ============================================ */

/* --- Tablette (≥ 768px) --- */
@media (min-width: 768px) {
  /* Masonry : 2 colonnes */
  .galerie-masonry {
    columns: 2;
  }
}

/* --- Desktop (≥ 1024px) --- */
@media (min-width: 1024px) {
  /* Masonry : 3 colonnes */
  .galerie-masonry {
    columns: 3;
  }
}

/* ============================================
   PAGE : CONTACT — Ajouts responsive
   ============================================ */

/* --- Tablette (≥ 768px) --- */
@media (min-width: 768px) {
  /* Layout 2 colonnes égales */
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  /* Carte plus haute */
  .contact-map__wrapper {
    height: 400px;
  }
}

/* --- Desktop (≥ 1024px) --- */
@media (min-width: 1024px) {
  /* Formulaire plus large que les infos */
  .contact-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
  }
}

/* ============================================
   PAGE : MENTIONS LÉGALES — Ajouts responsive
   ============================================ */

/* --- Tablette (≥ 768px) --- */
@media (min-width: 768px) {
  /* Bandeau mobile masqué à partir de tablette */
  .mentions-mobile-nav {
    display: none;
  }

  /* Sidebar visible */
  .mentions-sidebar {
    display: block;
    position: sticky;
    top: 100px;
    align-self: start;
  }

  /* Grille sidebar + contenu */
  .mentions-grid {
    grid-template-columns: 220px 1fr;
    gap: 3rem;
  }
}

/* --- Desktop (≥ 1024px) --- */
@media (min-width: 1024px) {
  /* Sidebar plus large */
  .mentions-grid {
    grid-template-columns: 240px 1fr;
    gap: 4rem;
  }
}

/* --- Très petit écran (≤ 360px) --- */
@media (max-width: 360px) {
  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .hero__actions .btn {
    width: 100%;
  }
}