/* ═══════════════════════════════════════════════════════════════
   LibExplorer — CSS Mobile Responsive v2
   Optimisé pour smartphones (< 768px) + webapp PWA
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables de base ───────────────────────────────────────── */
@media (max-width: 768px) {

  *, *::before, *::after { box-sizing: border-box; }
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* ── Container ── */
  .container {
    padding: 0 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Navbar ── */
  .navbar { padding: 0 1rem; }
  .navbar__logo img { height: 32px; }
  .navbar__nav { display: none; }
  .hidden-mobile { display: none !important; }

  /* ── Page Hero ── */
  .page-hero { padding: 2rem 1rem 1.5rem !important; }
  .page-hero__title, h1.page-hero__title {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }
  .page-hero__sub { font-size: .9rem !important; }

  /* ── Home Hero ── */
  .hero, [class*="hero-section"] { padding: 2.5rem 1rem 2rem !important; }
  .hero__title, .hero-title { font-size: 2rem !important; line-height: 1.2 !important; }
  .hero__sub, .hero-sub { font-size: .95rem !important; }

  /* ── Cards Grid ── */
  .grid-auto, .cards-grid, #cardsGrid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .card { width: 100% !important; }
  .card__image { aspect-ratio: 16/9 !important; height: auto !important; }
  .card__name { font-size: .95rem !important; }

  /* Image par défaut : couvre bien la carte */
  .card__image img,
  .card__image-default {
    width: 100%; height: 100%;
    object-fit: cover;
  }

  /* ── Page Layout (filtres + grille) ── */
  .page-layout { grid-template-columns: 1fr !important; gap: 0 !important; }

  .filters-sidebar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999;
    overflow-y: auto;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  .filters-sidebar.open { display: block; transform: translateX(0); }

  /* Bouton filtres mobile */
  .btn-filter-mobile {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.2rem;
    background: var(--color-bg-card, #141414);
    border: 1px solid #333;
    border-radius: 8px;
    color: white;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 1rem;
  }

  /* ── Search Layout ── */
  .search-layout { grid-template-columns: 1fr !important; }
  .search-sidebar { display: none !important; }

  /* ── Classements ── */
  .ranking-hero { padding: 2rem 1rem 1.5rem !important; }
  .ranking-hero__title { font-size: 1.8rem !important; }
  .ranking-stats-bar { gap: 1.5rem !important; }
  .ranking-section { padding: 0 1rem 2rem !important; }
  .ranking-section__header { flex-direction: column !important; align-items: flex-start !important; }

  .podium { gap: .4rem !important; padding: 0 .5rem !important; margin-bottom: 2rem !important; }
  .podium__card,
  .podium__slot--1 .podium__card,
  .podium__slot--2 .podium__card,
  .podium__slot--3 .podium__card { width: 110px !important; }
  .podium__card-name { font-size: .75rem !important; }
  .podium__card-city { display: none; }

  .ranking-list__item { padding: .75rem 1rem !important; gap: .75rem !important; }
  .ranking-list__img,
  .ranking-list__img--placeholder { width: 55px !important; height: 48px !important; }
  .ranking-list__score-num { font-size: 1rem !important; }

  /* ── Établissement (fiche) ── */
  .estab-page { padding: 0 1rem !important; }
  .estab-header { flex-direction: column !important; }
  .estab-header__right { align-items: flex-start !important; }
  .estab-title { font-size: 1.5rem !important; }
  .estab-body { grid-template-columns: 1fr !important; }
  .estab-hero__gallery { height: 220px !important; }

  /* ── Carte ── */
  #fullMap, .map-page { height: calc(100vh - 120px) !important; }
  .category-pills { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: .5rem; }
  .map-toolbar { gap: .5rem !important; padding: .5rem .75rem !important; }

  /* ── Navigation bas de page ── */
  .bottom-nav { display: flex !important; }
  .bottom-nav__item { font-size: .65rem !important; }

  /* ── Profil / Auth ── */
  .auth-layout, .profile-layout { grid-template-columns: 1fr !important; padding: 1rem !important; }

  /* ── Admin ── */
  .admin-layout { grid-template-columns: 1fr !important; }
  .admin-sidebar { display: none !important; }

  /* ── Breadcrumb ── */
  .breadcrumb { font-size: .8rem !important; flex-wrap: wrap; gap: .2rem; }

  /* ── Boutons — touch targets 44px min (WCAG) ── */
  .btn-group { flex-wrap: wrap !important; gap: .5rem !important; }
  .btn-lg { padding: .75rem 1.25rem !important; font-size: .9rem !important; }
  .btn, button, [role="button"] {
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Sections homepage ── */
  .section-header { flex-direction: column !important; align-items: flex-start !important; gap: .75rem !important; }
  .section-title { font-size: 1.3rem !important; }

  /* ── Modales ── */
  .modal__content {
    width: 95vw !important;
    max-width: 95vw !important;
    border-radius: 12px !important;
    max-height: 85vh !important;
    margin: 1rem auto !important;
  }

  /* ── Tables ── */
  table { font-size: .8rem !important; }
  td, th { padding: .5rem !important; }

  /* ── Formulaires — éviter zoom iOS ── */
  .form-row { flex-direction: column !important; }
  input, select, textarea, .form-control { font-size: 16px !important; }

  /* ── Score / Notes ── */
  .score-big__number { font-size: 2rem !important; }

  /* ── Pagination ── */
  .pagination { flex-wrap: wrap !important; gap: .35rem !important; }
  .page-btn { min-width: 36px !important; height: 36px !important; font-size: .85rem !important; }

  /* ── Stats home ── */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }

  /* ── Catégories ── */
  .categories-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem !important; }
  .category-card { padding: 1rem !important; }

  /* ── Footer simplifié ── */
  .footer { padding: 2rem 1rem 1rem !important; margin-top: 3rem !important; }
  .footer__inner { gap: 1.25rem !important; }
  .footer__links {
    gap: .5rem 1.25rem !important;
    justify-content: center !important;
  }
  .footer__links a { font-size: .8rem !important; }
  .footer__bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: .75rem !important;
    padding-top: 1rem !important;
  }
  .footer__legal {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: .5rem 1rem !important;
  }

  /* ── Tabs ── */
  .tabs__nav { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .tabs__nav-item { padding: .75rem 1rem !important; font-size: .8rem !important; white-space: nowrap !important; }

  /* ── Dropdown menu ── */
  .dropdown-menu {
    position: fixed !important;
    right: 1rem !important;
    top: 60px !important;
    width: 220px !important;
  }

  /* ── Safe area iPhone (notch / home indicator) ── */
  .navbar { padding-top: env(safe-area-inset-top, 0); }
  .bottom-nav { padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0)); }
  .page-wrapper { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
}

/* ── Très petits écrans (< 390px) ── */
@media (max-width: 390px) {
  .podium__card,
  .podium__slot--1 .podium__card { width: 95px !important; }
  .podium__card-body { padding: .5rem !important; }
  .podium__card-cat { display: none; }
  .card__city { font-size: .75rem !important; }
  .navbar__logo img { height: 28px; }
  .hero__title, .hero-title { font-size: 1.7rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Bannière d'installation PWA (webapp smartphone)
   ═══════════════════════════════════════════════════════════════ */
.pwa-install-banner {
  display: none;
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  left: 1rem; right: 1rem;
  z-index: 850;
  background: var(--color-bg-elevated, #1C1C1C);
  border: 1px solid rgba(255,45,107,0.45);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  align-items: center;
  gap: 1rem;
  animation: slideUpBanner .35s ease;
}
@keyframes slideUpBanner {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pwa-install-banner.visible { display: flex; }

.pwa-install-banner__icon {
  width: 48px; height: 48px;
  border-radius: 12px; overflow: hidden; flex-shrink: 0;
}
.pwa-install-banner__icon img { width: 100%; height: 100%; object-fit: cover; }

.pwa-install-banner__text { flex: 1; min-width: 0; }
.pwa-install-banner__title {
  font-size: .9rem; font-weight: 700; color: white; margin-bottom: .2rem;
}
.pwa-install-banner__sub {
  font-size: .75rem; color: var(--color-text-muted, #888);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pwa-install-banner__btn {
  background: var(--color-primary, #FF2D6B);
  color: white; border: none; border-radius: 10px;
  padding: .55rem 1.1rem; font-size: .85rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  min-height: 44px;
}

.pwa-install-banner__close {
  position: absolute; top: .4rem; right: .6rem;
  background: none; border: none;
  color: var(--color-text-muted, #888);
  font-size: 1rem; cursor: pointer; line-height: 1; padding: .2rem;
}

/* ═══════════════════════════════════════════════════════════════
   Layout LISTE mobile — cartes établissements style ranking
   Remplace la grille par une liste horizontale compacte
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Toutes les grilles de cards → layout liste */
  .grid-auto,
  .cards-grid,
  #cardsGrid,
  #estabGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: .6rem !important;
  }

  /* Chaque card → ligne horizontale */
  .grid-auto .card,
  .cards-grid .card,
  #cardsGrid .card,
  #estabGrid .card {
    flex-direction: row !important;
    align-items: center !important;
    height: 80px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Image à gauche — carré 80px */
  .grid-auto .card .card__image,
  .cards-grid .card .card__image,
  #cardsGrid .card .card__image,
  #estabGrid .card .card__image {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
  }

  /* Corps de la card — flex colonne */
  .grid-auto .card .card__body,
  .cards-grid .card .card__body,
  #cardsGrid .card .card__body,
  #estabGrid .card .card__body {
    flex: 1 !important;
    padding: .5rem .75rem !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: .2rem !important;
  }

  /* Titre de la card */
  .grid-auto .card .card__title,
  .cards-grid .card .card__title,
  #cardsGrid .card .card__title,
  #estabGrid .card .card__title {
    font-size: .875rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  /* Catégorie + ville */
  .grid-auto .card .card__category,
  .cards-grid .card .card__category,
  #cardsGrid .card .card__category,
  #estabGrid .card .card__category {
    font-size: .7rem !important;
    margin: 0 !important;
  }
  .grid-auto .card .card__location,
  .cards-grid .card .card__location,
  #cardsGrid .card .card__location,
  #estabGrid .card .card__location {
    font-size: .7rem !important;
  }

  /* Note */
  .grid-auto .card .card__rating,
  .cards-grid .card .card__rating,
  #cardsGrid .card .card__rating,
  #estabGrid .card .card__rating {
    font-size: .7rem !important;
  }
  .grid-auto .card .card__rating .stars i,
  .cards-grid .card .card__rating .stars i {
    font-size: .6rem !important;
  }

  /* Cacher le footer de la card (bouton "Voir la fiche") */
  .grid-auto .card .card__footer,
  .cards-grid .card .card__footer,
  #cardsGrid .card .card__footer,
  #estabGrid .card .card__footer {
    display: none !important;
  }

  /* Flèche droite à la place du footer */
  .grid-auto .card .card__body::after,
  .cards-grid .card .card__body::after,
  #cardsGrid .card .card__body::after,
  #estabGrid .card .card__body::after {
    content: none !important;
  }

  /* Rendre toute la card cliquable via le lien titre */
  .grid-auto .card,
  .cards-grid .card,
  #cardsGrid .card,
  #estabGrid .card {
    cursor: pointer !important;
  }

  /* Chevron droit dans la card liste */
  .card-list-chevron {
    display: flex !important;
    align-items: center !important;
    padding-right: .75rem !important;
    color: var(--color-text-subtle) !important;
    flex-shrink: 0 !important;
  }

  /* Badge favori repositionné */
  .grid-auto .card .card__favorite,
  .cards-grid .card .card__favorite,
  #cardsGrid .card .card__favorite,
  #estabGrid .card .card__favorite {
    top: .35rem !important;
    right: .35rem !important;
    width: 28px !important;
    height: 28px !important;
    font-size: .75rem !important;
  }

  /* Badges catégorie cachés sur la liste */
  .grid-auto .card .card__badges,
  .cards-grid .card .card__badges,
  #cardsGrid .card .card__badges,
  #estabGrid .card .card__badges {
    display: none !important;
  }

  /* ── Page Recherche mobile : panneau filtres fullscreen ── */
  .search-panel-mobile {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--color-bg, #0A0A0A);
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
    transform: translateX(-100%);
    transition: transform .3s ease;
  }
  .search-panel-mobile.open {
    transform: translateX(0);
  }
  .search-panel-mobile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
  }
  .search-panel-mobile__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
  }

  /* Bouton Nouvelle recherche */
  .btn-new-search {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    color: var(--color-text-muted);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    margin-bottom: 1rem;
  }
  .btn-new-search:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

/* ═══════════════════════════════════════════════════════════════
   CORRECTIFS layout liste — notes + catégorie visibles
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* La card en liste doit avoir une hauteur auto pour contenir tout */
  .grid-auto .card,
  .cards-grid .card,
  #cardsGrid .card,
  #estabGrid .card {
    height: auto !important;
    min-height: 90px !important;
  }

  /* Le body doit permettre l'overflow vertical */
  .grid-auto .card .card__body,
  .cards-grid .card .card__body,
  #cardsGrid .card .card__body,
  #estabGrid .card .card__body {
    overflow: hidden !important;
    padding: .6rem .75rem .5rem .75rem !important;
  }

  /* Catégorie — une ligne, ellipsis si trop long */
  .grid-auto .card .card__category,
  .cards-grid .card .card__category,
  #cardsGrid .card .card__category,
  #estabGrid .card .card__category {
    font-size: .65rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: .15rem !important;
  }

  /* Titre — 2 lignes max */
  .grid-auto .card .card__title,
  .cards-grid .card .card__title,
  #cardsGrid .card .card__title,
  #estabGrid .card .card__title {
    font-size: .85rem !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    margin-bottom: .15rem !important;
  }

  /* Ville */
  .grid-auto .card .card__location,
  .cards-grid .card .card__location,
  #cardsGrid .card .card__location,
  #estabGrid .card .card__location {
    font-size: .68rem !important;
    margin-bottom: .2rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Note — inline, bien visible */
  .grid-auto .card .card__rating,
  .cards-grid .card .card__rating,
  #cardsGrid .card .card__rating,
  #estabGrid .card .card__rating {
    display: flex !important;
    align-items: center !important;
    gap: .25rem !important;
    flex-wrap: nowrap !important;
    font-size: .72rem !important;
  }

  .grid-auto .card .card__rating .star-score__value,
  .cards-grid .card .card__rating .star-score__value,
  #cardsGrid .card .card__rating .star-score__value,
  #estabGrid .card .card__rating .star-score__value {
    font-size: .8rem !important;
    font-weight: 800 !important;
    color: white !important;
  }

  .grid-auto .card .card__rating .stars i,
  .cards-grid .card .card__rating .stars i,
  #cardsGrid .card .card__rating .stars i,
  #estabGrid .card .card__rating .stars i {
    font-size: .55rem !important;
    color: #FFD700 !important;
  }

  .grid-auto .card .card__rating .star-score__count,
  .cards-grid .card .card__rating .star-score__count,
  #cardsGrid .card .card__rating .star-score__count,
  #estabGrid .card .card__rating .star-score__count {
    font-size: .65rem !important;
    color: var(--color-text-muted) !important;
  }

  /* Image — bien carré, pas de distorsion */
  .grid-auto .card .card__image img,
  .cards-grid .card .card__image img,
  #cardsGrid .card .card__image img,
  #estabGrid .card .card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Filtres sidebar — forcer visibilité correcte */
  .filters-sidebar {
    width: 100% !important;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
  }

  /* Note minimale chips — wrap correct */
  .rating-chip {
    white-space: nowrap !important;
    font-size: .75rem !important;
    padding: .3rem .6rem !important;
  }

  /* Form check labels dans filtres */
  .form-check__label {
    font-size: .85rem !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Bouton appliquer filtres */
  #filtersToggleBtn {
    display: flex !important;
  }
}