/* ==========================================================================
   WES'SPA — Adaptations responsives (tablette & smartphone)
   ========================================================================== */

/* ─── Tablettes larges ────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero-in      { grid-template-columns: 1fr; gap: 40px; }
  .hero-visuel  { max-width: 520px; margin: 0 auto; width: 100%; }
  .hero-cadre   { margin: 0 auto; }
  .hero-cadre-2 { left: 4%; }
  .hero-etiquette { left: 0; }
  .services-grille { grid-template-columns: repeat(2, 1fr); }
  .apropos-in   { grid-template-columns: 1fr; }
  .apropos-img-2 { bottom: -22px; }
  .resa-in      { grid-template-columns: 1fr; }
  .cta-bande-in { grid-template-columns: 1fr; }
  .avis-grille  { grid-template-columns: repeat(2, 1fr); }
  .galerie-grille { grid-template-columns: repeat(3, 1fr); }
  .pied-grille  { grid-template-columns: 1fr 1fr; gap: 28px; }
  .tarifs-liste { grid-template-columns: 1fr; }
  .pack-vedette { grid-template-columns: 1fr; text-align: left; }
}

/* ─── Tablettes ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hide-md { display: none !important; }
}

/* ─── Tablettes / petits écrans ───────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --gouttiere: 18px; }
  body { font-size: 16px; }

  /* Menu mobile en tiroir
     NB : on désactive le flou d'arrière-plan de l'en-tête, car un élément
     avec backdrop-filter crée un bloc conteneur qui empêche le tiroir
     (position: fixed) de couvrir tout l'écran. */
  .entete { backdrop-filter: none; background: var(--creme); }
  .burger { display: flex; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw);
    background: var(--creme); box-shadow: -20px 0 60px rgba(40, 20, 8, .18);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 84px 26px 34px; transform: translateX(105%);
    transition: transform var(--transition); z-index: 40; overflow-y: auto;
  }
  .nav.ouvert { transform: none; }
  .nav > a { padding: 15px 0; border-bottom: 1px solid var(--bord); font-size: 1rem; }
  .nav > a::after { display: none; }
  .nav-tel, .nav-cta { display: inline-flex; }
  .nav-tel { margin-top: 18px; gap: 8px; color: var(--brun) !important; justify-content: center; padding: 13px 0; border: 1px solid var(--bord-fort); border-radius: 999px; }
  .nav-cta { margin-top: 12px; }
  .voile-nav { position: fixed; inset: 0; background: rgba(40, 20, 8, .45); z-index: 30; opacity: 0; pointer-events: none; transition: opacity var(--transition); }
  .voile-nav.ouvert { opacity: 1; pointer-events: auto; }

  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .horaires-grille { grid-template-columns: 1fr; }
  .galerie-grille { grid-template-columns: repeat(2, 1fr); }
  .galerie-item:nth-child(1) { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
  .avis-grille { grid-template-columns: 1fr; }
  .apropos-liste { grid-template-columns: 1fr; }
  .hero-cadre-2 { display: none; }
  .entete-in { padding: 8px 0; }
  .logo-emblem { height: 46px; }
  .logo-nom { font-size: 1.4rem; }
}

/* ─── Smartphones ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
  .section { padding: 46px 0; }
  .services-grille { grid-template-columns: 1fr; }
  .galerie-grille { grid-template-columns: 1fr 1fr; gap: 10px; }
  .chiffres li { padding: 18px 12px; }
  .chiffres b { font-size: 1.5rem; }
  .champ-duo { grid-template-columns: 1fr; }
  .tarifs-barre { flex-direction: column; align-items: stretch; }
  .recherche { min-width: 0; width: 100%; }
  .pied-grille { grid-template-columns: 1fr; padding-bottom: 30px; }
  .pied-bas { justify-content: center; text-align: center; }
  .flottant-wa span { display: none; }
  .flottant-wa { padding: 15px; }
  .flottant { right: 16px; }
  .flottant-haut { bottom: 82px; }
  .hero-badge { border-radius: 16px; align-items: flex-start; font-size: .76rem; line-height: 1.45; text-align: left; }
  .hero-badge b { flex: 0 0 auto; }
  .topbar-in { min-height: 38px; font-size: .72rem; }
  .hero-actions .btn { width: 100%; }
  .cta-bande-actions .btn { width: 100%; }
  .hero-etiquette { display: none; }
  .pack-vedette { padding: 26px 20px; }
  .entete-page { padding: 32px 0; }
  .defilement-piste { gap: 28px; }
  .toast-zone { bottom: 84px; }
}

@media (max-width: 420px) {
  .logo-tag { display: none; }
  .galerie-grille { grid-template-columns: 1fr; }
  .galerie-item:nth-child(1) { grid-column: span 1; }
}

/* ─── Impression papier propre ───────────────────────────────────────── */
@media print {
  .topbar, .annonce, .entete, .hero::before, .hero::after, .cta-bande, .pied,
  .flottant, .filtres, .recherche, .defilement, .voile-nav { display: none !important; }
  body { background: #fff !important; }
  body::before { display: none; }
  .hero, .entete-page, .section-sable { background: #fff !important; }
  .carte, .formulaire, .avis, .service, .prestation { box-shadow: none !important; }
}