/* =====================================================================
   MI12 FUN CENTER — responsive.css
   Le repli de CHAQUE mise en page multi-colonnes est déclaré ici,
   explicitement. Rien n'est laissé au hasard du navigateur.
   Points de rupture : 1200 · 1024 · 768 · 560
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* ≤ 1200 px — on resserre les grilles les plus larges                 */
/* ------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-row { grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1fr) auto; }
  .site-row .state { grid-column: 2 / -1; }
}

/* ------------------------------------------------------------------ */
/* ≤ 1024 px — la navigation passe en tiroir                           */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .nav, .header__cta { display: none; }
  .burger { display: flex; }

  .hero { min-height: auto; padding-top: calc(var(--header-h) + 44px); }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero__media { aspect-ratio: 16 / 10; max-height: 46vh; }

  .center { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .act-sheet { grid-template-columns: 48px minmax(0, 1fr); }
  .act-sheet__where { grid-column: 1 / -1; }

  /* Le bloc des activités reste un rectangle plein : on change le nombre
     de colonnes, jamais l'étendue d'une cellule. */
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act--wide, .act--tall { grid-column: auto; grid-row: auto; }
}

/* ------------------------------------------------------------------ */
/* ≤ 768 px — tout passe en colonne unique                             */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  :root { --header-h: 64px; }

  .section { padding-block: clamp(56px, 12vw, 84px); }

  .quickbook__form { grid-template-columns: 1fr; }
  .quickbook__form .btn { width: 100%; }

  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act--wide { grid-column: auto; }

  .site-row {
    grid-template-columns: 36px 1fr;
    gap: 6px 16px;
    padding-block: 24px;
  }
  .site-row__id   { grid-column: 2; }
  .site-row__acts { grid-column: 2; }
  .site-row .state { grid-column: 2; }
  .site-row__cta  { grid-column: 2; margin-top: 12px; }

  .audiences { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 28px; }

  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .toast-wrap { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ------------------------------------------------------------------ */
/* ≤ 560 px — petits téléphones                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 560px) {
  .hero__actions .btn { width: 100%; }
  .acts { grid-template-columns: minmax(0, 1fr); }
  .act, .act--wide { grid-column: auto; }
  .formulas { grid-auto-columns: minmax(260px, 84vw); }
  .to-top { right: 14px; bottom: 14px; }
}

/* ------------------------------------------------------------------ */
/* Impression — le visiteur imprime sa confirmation                    */
/* ------------------------------------------------------------------ */
@media print {
  .header, .footer, .to-top, .quickbook, .drawer, .toast-wrap { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .page-head { padding-block: 12px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}