/* ==========================================================================
   LADY M - responsive.css
   Adaptations pour tablettes (640 px) et ordinateurs (960 px, 1200 px).
   À charger en dernier, après main.css et reservation.css.
   ========================================================================== */

/* ------------------------------ Tablettes ------------------------------ */
@media (min-width: 640px) {
  .hero__content { padding-bottom: 3rem; }
  .hero__footer { flex-direction: row; align-items: center; justify-content: space-between; }

  .gallery { column-gap: 1rem; }
  .gallery__item { margin-bottom: 1rem; }

  .about__photo { aspect-ratio: 4 / 3; max-height: 34rem; }

  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__featured { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }

  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }

  /* Réservation */
  .panel { padding: 2rem; }
}

/* ------------------------------ Ordinateurs ------------------------------ */
@media (min-width: 960px) {
  :root { --header-h: 5rem; }

  .brand img { width: 3.75rem; height: 3.75rem; }

  /* Navigation horizontale, le bouton hamburger disparaît */
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav__list { display: flex; gap: 2.25rem; }
  .site-nav__link {
    position: relative;
    padding: 0.4rem 0;
    border: 0;
    font-size: 0.95rem;
  }
  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }
  .site-nav__link:hover::after { transform: scaleX(1); }

  .hero__content { padding-bottom: 4rem; }

  /* Galerie sur 3 colonnes */
  .gallery { column-count: 3; }

  /* À propos */
  .about { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .about__photo { aspect-ratio: 4 / 5; max-height: none; }

  /* Localisation */
  .location { grid-template-columns: 1fr 1.5fr; align-items: stretch; gap: 2rem; }
  .location__info { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem; }
  .location__map { min-height: 24rem; }

  /* Contact */
  .contact { gap: 1.25rem; }

  /* Réservation : deux colonnes */
  .booking__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: 2rem; }
  .booking__form { position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* ------------------------------ Grands écrans ------------------------------ */
@media (min-width: 1200px) {
  .gallery { column-count: 4; }
}