/* =====================================================================
   FIT FIVE — responsive.css
   Points de rupture : 1200 / 992 / 768 / 576 / 420 px
   Chargé en dernier pour surcharger les styles de base.
   ===================================================================== */

/* ============================ <= 1200px ============================ */
@media (max-width: 1200px) {
  .terrain-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .nav__link { padding: 12px 11px; font-size: 0.76rem; }
  .header__phone { padding: 0 16px 0 15px; }
  .header__phone .num { font-size: 1rem; }
  .header__book { padding: 0 22px; }
  .quick__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .roster__row { grid-template-columns: 62px minmax(0, 1.1fr) minmax(0, 1fr) auto; }
}

/* ============================ <= 992px ============================= */
@media (max-width: 992px) {
  /* --- Navigation mobile --- */
  .header__actions .header__phone,
  .header__actions .header__book,
  .header__actions .header__status { display: none; }
  .burger { display: flex; }

  .nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(340px, 86vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    background: var(--black);
    padding: calc(var(--header-h) + 20px) 22px 30px;
    transform: translateX(100%);
    transition: transform var(--t);
    z-index: 995; overflow-y: auto;
    border-left: 1px solid var(--line-strong);
    margin-right: 0;
  }
  .nav.is-open { transform: none; }
  .nav__link { padding: 17px 4px; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav__link::after { display: none; }
  .nav__cta { display: block; margin-top: 22px; }

  .fab-reserve { display: inline-flex; }
  .to-top { bottom: 58px; }

  /* --- Réservation : récap sous le contenu --- */
  .reservation__layout { grid-template-columns: 1fr; }
  .summary { position: static; }

  /* --- Layouts 2 colonnes --- */
  .contact-cols { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .feature-row,
  .feature-row:nth-child(even) .feature-row__media { grid-template-columns: 1fr; order: 0; }
  .feature-row__media { order: 0 !important; }
  .plan-layout { grid-template-columns: 1fr; }
  .fp-panel { width: 100%; }

  /* --- Hero : une colonne, photo dessous --- */
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media img { aspect-ratio: 16 / 10; }
  .hero__media::before { width: 54px; height: 54px; }

  /* --- Réservation express --- */
  .quick__grid { grid-template-columns: 1fr; }
  .quick__panel { max-width: 520px; }

  /* --- Roster : la photo disparaît, la ligne se réorganise --- */
  .roster__row {
    grid-template-columns: 54px minmax(0, 1fr);
    row-gap: 14px;
    padding: 26px 0;
  }
  .roster__no { grid-row: 1; }
  .roster__city { grid-column: 2; }
  .roster__meta { grid-column: 2; }
  .roster__cta { grid-column: 2; justify-self: start; }

  /* --- Diptyque activités : empilé --- */
  .duo { flex-direction: column; min-height: 0; }
  .duo__panel { min-height: 62vh; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
  .duo__panel:hover { flex-grow: 1; }

  /* --- Mosaïque : empilée --- */
  .mosaic { grid-template-columns: repeat(6, 1fr); }
  .mosaic__a { grid-column: 1 / 7; grid-row: 1; aspect-ratio: 16 / 10; }
  .mosaic__text { grid-column: 1 / 7; grid-row: 2; padding: 8px 0 18px; }
  .mosaic__b { grid-column: 1 / 4; grid-row: 3; }
  .mosaic__c { grid-column: 4 / 7; grid-row: 3; }

  /* --- Timeline : 2 colonnes --- */
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }

  /* --- B2B & avis --- */
  .b2b { grid-template-columns: 1fr; }
  .b2b__media { min-height: 280px; }
  .reviews-band__inner { grid-template-columns: 1fr; }

  /* --- Footer --- */
  .footer__top { grid-template-columns: 1fr; gap: 30px; }
  .footer__centres { grid-template-columns: 1fr 1fr; }
  .footer__centre:nth-child(2) { border-right: 0; }
  .footer__centre:nth-child(3) { border-top: 1px solid var(--line); padding-left: 0; }
}

/* ============================ <= 768px ============================= */
@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr; }
  .reviews-links { grid-template-columns: 1fr; }
  .res-terrains { grid-template-columns: 1fr; }
  .options-grid { grid-template-columns: 1fr; }
  .confirm__grid { grid-template-columns: 1fr; }

  .scoreboard__inner { grid-template-columns: 1fr 1fr; }
  .scoreboard__cell:nth-child(2) { border-right: 0; }
  .scoreboard__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .hero__title { font-size: clamp(2.9rem, 15vw, 4.6rem); }

  .mosaic { grid-template-columns: 1fr; }
  .mosaic__a, .mosaic__text, .mosaic__b, .mosaic__c { grid-column: 1 / -1; }
  .mosaic__a { grid-row: 1; }
  .mosaic__text { grid-row: 2; }
  .mosaic__b { grid-row: 3; aspect-ratio: 16 / 10; }
  .mosaic__c { grid-row: 4; aspect-ratio: 16 / 10; }

  .footer__bottom-inner { flex-direction: column; text-align: center; }
  .footer__utility { grid-template-columns: 1fr; }
  .terrain-list-alt { display: block; }
}

/* ============================ <= 576px ============================= */
@media (max-width: 576px) {
  .terrain-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }

  .footer__centres { grid-template-columns: 1fr; }
  .footer__centre { border-right: 0; padding-left: 0 !important; border-top: 1px solid var(--line); }
  .footer__centre:first-child { border-top: 0; }
  .newsletter__form input { width: 100%; }

  .roster__city { font-size: clamp(2rem, 11vw, 2.8rem); }
  .duo__panel { min-height: 54vh; }

  .res-panel { padding: 20px; }
  .reservation__layout { gap: 22px; }
  .res-terrain { flex-direction: column; }
  .res-terrain__img { width: 100%; height: 150px; }
  .choice-row { display: grid; grid-template-columns: repeat(3, 1fr); }

  .confirm__banner { padding: 30px 20px; }
  .confirm__body { padding: 22px; }
  .confirm__actions .btn { width: 100%; }
}

/* ============================ <= 420px ============================= */
@media (max-width: 420px) {
  :root { --header-h: 66px; }
  .header__logo img { height: 28px; }
  .scoreboard__inner { grid-template-columns: 1fr; }
  .scoreboard__cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .scoreboard__cell:last-child { border-bottom: 0; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .stepper__item { font-size: 0.7rem; padding: 8px 10px; }
  .btn { padding: 15px 20px; font-size: 0.8rem; }
  .roster__row { grid-template-columns: 1fr; }
  .roster__no { display: none; }
}