/* =========================================================================
   RESPONSIVE — Mobile First avec breakpoints desktop
   -------------------------------------------------------------------------
   Approche : styles mobile dans main.css par défaut, ajustements desktop ici.
   Mais ici on inverse : on suppose desktop, et on adapte vers mobile.
   ========================================================================= */

/* ============== LARGE DESKTOP (1280px+) ============== */
@media (min-width: 1281px) {
  /* Tout va bien par défaut */
}


/* ============== DESKTOP / LAPTOP (1024px — 1280px) ============== */
@media (max-width: 1280px) {
  .decouvrir-grid {
    gap: var(--space-20);
  }

  .decouvrir-bloc {
    gap: var(--space-12);
  }
}


/* ============== TABLETTE LARGE (768px — 1024px) ============== */
@media (max-width: 1024px) {
  .header-nav {
    display: none;
  }

  .header-burger {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .experiences-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .galerie-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Reset des positions spéciales pour la galerie */
  .galerie-item:nth-child(7n+1),
  .galerie-item:nth-child(7n+3),
  .galerie-item:nth-child(7n+5) {
    aspect-ratio: 1;
    grid-row: auto;
    grid-column: auto;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .contact-map {
    aspect-ratio: 16 / 10;
  }

  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }
}


/* ============== TABLETTE PORTRAIT (640px — 768px) ============== */
@media (max-width: 768px) {
  .terrasse-zone,
  .terrasse-zone-reverse {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .terrasse-zone-reverse .terrasse-zone-info {
    order: 0;
  }

  .terrasse-zone-reverse .terrasse-galerie {
    order: 1;
  }

  .terrasse-photo img {
    height: 180px;
  }

  .terrasse-photo-large img {
    height: 240px;
  }

  .terrasse-slide {
    flex: 0 0 calc((100% - 12px) / 2);
  }

  .terrasse-slider-prev { left: 0; }
  .terrasse-slider-next { right: 0; }

  .decouvrir-grid {
    gap: var(--space-16);
  }

  .decouvrir-bloc {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* On annule l'alternance sur mobile : toujours image puis texte */
  .decouvrir-bloc.is-reverse .decouvrir-image {
    order: 0;
  }

  .decouvrir-bloc.is-reverse .decouvrir-text {
    order: 1;
  }

  .decouvrir-image {
    aspect-ratio: 4 / 3;
  }

  .decouvrir-text {
    padding-inline: 0;
  }

  .galerie-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .avis-grid {
    grid-template-columns: 1fr;
  }

  .avis-card {
    padding: var(--space-8);
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: var(--space-5);
  }

  .section-header {
    margin-bottom: var(--space-12);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    text-align: left;
  }
}


/* ============== MOBILE (≤640px) ============== */
@media (max-width: 640px) {
  .terrasse-galerie-top {
    grid-template-columns: 1fr;
  }

  .terrasse-photo img,
  .terrasse-photo-large img {
    height: 220px;
  }

  .terrasse-counter {
    flex-direction: column;
    gap: var(--space-1);
    text-align: center;
  }

  .terrasse-slide {
    flex: 0 0 100%;
  }

  .terrasse-slide img {
    height: 240px;
  }

  /* Réduire le padding des sections sur mobile */
  :root {
    --section-padding-y: clamp(3rem, 2rem + 5vw, 5rem);
  }

  .header-inner {
    gap: var(--space-4);
  }

  .header-logo {
    font-size: var(--text-base);
  }

  /* Logo réduit sur mobile */
  .logo-img {
    height: 62px;
  }

  /* Hero plus serré */
  .hero-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
  }

  .hero-description {
    font-size: var(--text-base);
  }

  .experiences-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .experience-card {
    aspect-ratio: 4 / 3;
  }

  .experience-card-description {
    /* Sur mobile, on affiche directement la description */
    opacity: 1;
    transform: translateY(0);
  }

  .avis-card {
    padding: var(--space-6);
  }

  .avis-texte {
    font-size: var(--text-base);
  }

  .contact-info-title {
    font-size: var(--text-xl);
  }

  /* Le CTA sticky devient visible uniquement sur mobile */
  .sticky-cta {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Footer plus compact */
  .site-footer {
    padding-bottom: 90px; /* Espace pour le CTA sticky */
  }

  /* Ajuster le hero pour respecter le notch iOS */
  .hero-content {
    padding-top: var(--space-20);
  }
}


/* ============== TRÈS PETIT MOBILE (≤380px) ============== */
@media (max-width: 380px) {
  .hero-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .btn {
    padding: 12px 24px;
    font-size: var(--text-xs);
  }
}


/* ============== ORIENTATION PAYSAGE MOBILE ============== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 600px;
  }

  .hero-scroll {
    display: none;
  }
}


/* ============== PRINT ============== */
@media print {
  .site-header,
  .sticky-cta,
  .hero-scroll,
  .form-reservation,
  .mobile-menu {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .section {
    padding-block: 2rem;
    page-break-inside: avoid;
  }
}