/* Utilisé pour petits ajustements transversaux */
.results .btn-soft {
  background: #f3f6fa;
  border: 1px solid #e5e7eb;
  padding: 4px 8px;
  border-radius: 6px;
}
/* ====== Mobile drawer pour l'aside (<= 991.98px) ====== */
@media (max-width: 991.98px) {
  /* Layout en pile sur mobile */
  .layout { display: block; }

  /* L'aside devient un panneau coulissant plein écran */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(92vw, 360px);         /* panneau latéral confortable */
    background: #fff;
    border-right: 1px solid var(--border, #e5e7eb);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  /* Le contenu interne scrolle indépendamment (tu l'as déjà) */
  .sidebar .sidebar-scroll {
    height: calc(100% - 56px);  /* tient compte du head mobile (≈56px) */
    overflow-y: auto;
  }

  /* Ouverture du drawer */
  body.filters-open .sidebar {
    transform: translateX(0%);
  }

  /* Backdrop visible quand open */
  body.filters-open .sidebar-backdrop {
    display: block;
  }

  /* L’espace contenu doit éviter la barre fixe en bas */
  .results { padding-bottom: 64px; } /* laisse la place à la .results-bar fixée */
}

/* ====== Barre d’actions fixe : éviter la double ombre sur desktop ====== */
@media (min-width: 992px) {
  .results-bar { box-shadow: none !important; }
}
/* ----- Barre fixe mobile : toujours visible, safe-area iOS, au-dessus du contenu ----- */
@media (max-width: 992px) {
  .results-bar {
    position: fixed;
    margin-bottom: 0;
    left: 0; right: 0; bottom: 0;
    z-index: 50;                 /* au-dessus de tout */
    background: #fff;
    border-top: 1px solid var(--border, #e5e7eb);
    box-shadow: 0 -8px 20px rgba(0,0,0,.04);
    padding: .5rem .75rem;
    /* support safe-area */
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Laisse de la place au dessus de la barre fixe pour éviter le chevauchement */
  .results {
    padding-bottom: 80px; /* ≈ hauteur de la barre (adapté) */
  }

  /* Un peu de marge finale pour la pagination au-dessus de la barre */
  nav[aria-label="Pagination"] { margin-bottom: 16px; }
}

/* ----- Drawer mobile (<= 991.98px) ----- */
@media (max-width: 991.98px) {
  .layout { display: block; } /* pas de grid en mobile */

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(92vw, 360px);
    background: #fff;
    border-right: 1px solid var(--border, #e5e7eb);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 60;                    /* au-dessus de la barre (50) */
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    will-change: transform;
  }
  body.filters-open .sidebar { transform: translateX(0); }

  .sidebar-backdrop {
    display: none;
  }
  body.filters-open .sidebar-backdrop {
    display: block;
  }

  /* Le contenu interne du drawer scrolle, pas la page */
  .sidebar .sidebar-scroll {
    height: calc(100% - 56px); /* tient compte du header 'Filtres' */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* ----- Cartes hôtel, pile propre en petit écran ----- */
@media (max-width: 639.98px) {
  /* Colonne vignette / infos en pile */
  .hotel-card > .flex,
  .hotel-card .flex.gap-3 { flex-direction: column; }

  /* La vignette passe en pleine largeur */
  .hotel-thumb-box { width: 100% !important; max-width: none !important; }

  /* En-tête “table” masqué en mobile (on lit ligne par ligne) */
  .table-head { display: none; }

  /* Prix: toujours lisible et séparé */
  .price-ttc { font-size: 1.1rem; }
}

/* ----- Ajustements moyens (>=640 et <992) ----- */
@media (min-width: 640px) and (max-width: 991.98px) {
  .hotel-thumb-box { width: 220px; }
}

/* ----- Petites retouches de lisibilité ----- */
@media (max-width: 991.98px) {
  .results-meta strong { font-size: .95rem; }
}
/* ===== NAV MOBILE DRAWER ===== */
@media (max-width: 991.98px) {
  /* Pas de scroll horizontal global */
  html, body { overflow-x: hidden; }

  /* Le container respire un peu en mobile */
  .app-header .container-xxl { padding-left: .75rem; padding-right: .75rem; }

  /* Drawer : calé à gauche, au-dessus du contenu */
  #mobile-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(92vw, 360px);
    background: #fff;
    border-right: 1px solid var(--border, #e5e7eb);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 60; /* au-dessus de la barre mobile (50) */
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    display: flex; flex-direction: column;
  }

  /* Contenu scrollable à l'intérieur du drawer */
  #mobile-nav nav { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  body.nav-open #mobile-nav { transform: translateX(0); }

  /* Backdrop */
  .nav-backdrop { display: none; }
  body.nav-open .nav-backdrop { display: block; }
}

/* Empêche tout débordement horizontal des éléments flex du header */
.app-header .container-xxl > * { min-width: 0; }
.app-header a.flex { min-width: 0; }
@media (max-width: 991.98px) {
  /* Le texte "RESAGLOB" peut se réduire si l'espace manque */
  .app-header a .text-2xl { font-size: 1.25rem; }

  /* Les boutons icônes ne rétrécissent pas */
  .app-header .h-8.w-8,
  .app-header .h-9.w-9 { flex-shrink: 0; }
}
/* Empêche les boutons à droite de se compresser, et laisse la nav respirer */
.app-header .actions { flex-shrink: 0; }
.app-header .actions > * { flex-shrink: 0; }

@media (min-width: 992px) {
  /* La nav peut occuper l'espace horizontal et s'adapter */
  .app-header .nav-center { flex: 1 1 auto; min-width: 0; }
}