/* responsive.css — Media queries centralisées
   Breakpoints :
     375px  → mobile S (iPhone SE, petits écrans)
     768px  → tablette / mobile L (déjà dans main.css pour nav/homepage)
     1200px → large desktop
*/

/* ===========================
   1200px — Desktop large
   Plafonner les conteneurs, ajuster les grilles
   =========================== */
@media (min-width: 1200px) {
  /* Section articles homepage : contraindre la grille intérieure */
  .section--articles .section__header,
  .section--articles .articles-grid,
  .section--villes .section__header,
  .section--villes .villes-grid {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
  }

  /* Hero : limiter la largeur max */
  .hero__inner {
    max-width: var(--max-width);
    margin: 0 auto;
  }
}

/* ===========================
   768px — Tablette / Mobile L
   =========================== */
@media (max-width: 768px) {

  /* --- Typographie globale --- */
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.2rem; }

  /* --- Layout sections --- */
  .section {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .section--articles,
  .section--villes {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /* --- 404 --- */
  .page-404 {
    padding: var(--spacing-xl) var(--spacing-md);
    min-height: 50vh;
  }

  .page-404__title {
    font-size: 1.4rem;
  }

  .page-404__actions {
    flex-direction: column;
    align-items: center;
  }

  .page-404__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* --- Search --- */
  .search-results__inner {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .search-results__title {
    font-size: 1.3rem;
  }

  .search-section__grid--jeux {
    grid-template-columns: repeat(2, 1fr);
  }

  .search-section__grid--articles,
  .search-section__grid--lieux {
    grid-template-columns: 1fr;
  }

  /* --- Fiche jeu (single-jeu.php) --- */
  .fiche-jeu {
    padding: 0;
  }

  /* --- Archive jeu --- */
  .catalogue-jeux {
    padding: var(--spacing-md);
  }

  /* --- Annuaire lieux --- */
  .annuaire-lieux,
  .lieux-par-ville,
  .fiche-lieu {
    padding: var(--spacing-md);
  }

  /* --- Articles --- */
  .article-single,
  .articles-archive {
    padding: var(--spacing-md);
  }

  /* --- Page générique --- */
  .page-generique {
    padding: var(--spacing-md);
  }

  /* --- Ce soir --- */
  .ce-soir {
    padding: var(--spacing-md);
  }

  /* --- Footer margin-top réduit --- */
  .site-footer {
    margin-top: var(--spacing-lg);
  }
}

/* ===========================
   375px — Mobile S (iPhone SE, min-width cible)
   =========================== */
@media (max-width: 375px) {

  /* --- Typographie --- */
  body {
    font-size: 0.9rem;
  }

  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.1rem; }

  /* --- Header --- */
  .site-header__inner {
    padding: 0 0.75rem;
  }

  .site-header__logo {
    font-size: 1.1rem;
  }

  /* --- Hero --- */
  .hero {
    padding: var(--spacing-md) 0.75rem 0;
  }

  .hero__title {
    font-size: 1.6rem;
  }

  .hero__subtitle {
    font-size: 0.85rem;
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    text-align: center;
    width: 100%;
  }

  /* --- Stats --- */
  .stats__number {
    font-size: 1rem;
  }

  .stats__label {
    font-size: 0.6rem;
  }

  /* --- Section header --- */
  .section {
    padding: var(--spacing-md) 0.75rem;
  }

  .section--articles,
  .section--villes {
    padding: var(--spacing-md) 0.75rem;
  }

  /* --- Grille jeux : 1 colonne --- */
  .games-grid {
    grid-template-columns: 1fr;
  }

  /* --- Grille search jeux : 1 colonne --- */
  .search-section__grid--jeux {
    grid-template-columns: 1fr;
  }

  /* --- Villes : 2 colonnes serrées --- */
  .villes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  .ville-card {
    padding: 0.6rem;
  }

  /* --- Bottom CTA --- */
  .bottom-cta {
    padding: var(--spacing-lg) 0.75rem;
  }

  .bottom-cta__title {
    font-size: 1.2rem;
  }

  /* --- 404 --- */
  .page-404 {
    padding: var(--spacing-lg) 0.75rem;
  }

  .page-404__dice {
    font-size: 3rem;
  }

  .page-404__title {
    font-size: 1.2rem;
  }

  /* --- Search --- */
  .search-results__inner {
    padding: var(--spacing-md) 0.75rem;
  }

  .search-results__title {
    font-size: 1.1rem;
  }

  /* --- Footer --- */
  .site-footer__inner {
    padding: 0 0.75rem;
  }

  .site-footer__menu {
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: center;
  }

  /* --- Ce soir preview --- */
  .ce-soir-preview__title {
    font-size: 1rem;
  }

  .ce-soir-preview {
    padding: var(--spacing-md);
  }

  /* --- Fiche jeu (single-jeu) --- */
  /* Le passage en 1 colonne (hero, contenu, pros/cons) et la sidebar
     empilée sont déjà gérés au breakpoint 768px. Ici on ne fait que
     réduire les tailles pour les très petits écrans. */
  .fiche-jeu__title {
    font-size: 1.8rem;
  }

  .fiche-jeu__cover {
    max-width: 220px;
  }

  /* --- Catalogue jeux (template-catalogue-jeux) --- */
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .game-card__body {
    padding: var(--spacing-sm);
  }

  .game-card__title {
    font-size: 0.9rem;
  }

  .meta-pill {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
  }
}

/* ===========================
   768px tablet — Archive and Single adjustments
   =========================== */
@media (max-width: 768px) {

  /* --- Fiche jeu --- */
  .fiche-jeu__hero {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /* Hero en 1 colonne dès la tablette : l'image (280px, flex-shrink:0)
     débordait du viewport tant qu'on restait en 2 colonnes. */
  .fiche-jeu__hero-inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  /* Image au-dessus du titre/metadata sur mobile */
  .fiche-jeu__hero-right {
    order: -1;
  }

  /* La couverture ne doit jamais dépasser la largeur de l'écran */
  .fiche-jeu__cover {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .fiche-jeu__score-band {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .score-band__inner {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }

  .fiche-jeu__content {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .fiche-jeu__content-inner {
    grid-template-columns: 1fr;
  }

  .fiche-jeu__sidebar {
    flex-direction: column;
  }

  .fiche-jeu__pros-cons {
    grid-template-columns: 1fr;
  }

  .fiche-jeu__title {
    font-size: 2rem;
  }

  .fiche-jeu__cta-band {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  /* --- Archive jeux --- */
  .catalogue-jeux__grid {
    padding: var(--spacing-lg) var(--spacing-md);
  }

  .games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  /* --- Barre de filtres : groupes en pleine largeur --- */
  .jeux-filtres__group {
    flex: 1 1 100%;
    min-width: 0;
  }

  .jeux-filtres__actions {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .jeux-filtres__submit {
    flex: 1;
  }

  /* Zones tactiles accessibles (≥ 44 px) sur mobile */
  .jeux-filtres__select,
  .jeux-filtres__submit {
    min-height: 44px;
  }
}

/* ===========================
   Catalogue des jeux — grille responsive dédiée
   Scopée à .catalogue-jeux__grid (et non .games-grid) pour ne pas toucher la
   grille de la homepage, et placée ici (responsive.css chargé en dernier) pour
   primer sur la base repeat(4) d'archive.css. Desktop conserve 4 colonnes.
   =========================== */
@media (max-width: 1024px) {
  .catalogue-jeux__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .catalogue-jeux__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}