/* ============================================
   MODALES.CSS – Toutes les modales et panneaux
   Modale détail spectacle, fiche lieu, recherche,
   panneau filtres avancés.
   ============================================ */

/* Animation commune à toutes les modales bottom-sheet */
@keyframes glisser-haut {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* --- Modale détail spectacle --- */
#modale-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100;
  align-items: flex-end;
}
#modale-overlay.visible { display: flex; }

#modale {
  background: var(--surface);
  border-radius: var(--rayon) var(--rayon) 0 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 18px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  max-height: 80vh;
  overflow-y: auto;
  animation: glisser-haut 0.25s ease;
}

.modale-poignee {
  width: 40px;
  height: 4px;
  background: var(--bordure-med);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.modale-type        { margin-bottom: 8px; }
.modale-titre       { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.modale-compagnie   { font-size: 13px; color: var(--texte-sec); margin-bottom: 14px; }
.modale-infos {
  background: var(--fond);
  border-radius: var(--rayon-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.modale-info-item label { font-size: 10px; color: var(--texte-ter); display: block; text-transform: uppercase; letter-spacing: 0.4px; }
.modale-info-item span  { font-size: 13px; color: var(--texte); font-weight: 500; }
.modale-description { font-size: 14px; color: var(--texte-sec); line-height: 1.6; margin-bottom: 16px; }

/* Photo en haut de la modale — déborde légèrement pour couvrir le padding */
#modale-photo {
  width: calc(100% + 36px);
  height: 160px;
  border-radius: var(--rayon) var(--rayon) 0 0;
  overflow: hidden;
  margin: -20px -18px 14px;
}

.modale-autres-titre {
  font-size: 11px;
  font-weight: 600;
  color: var(--texte-sec);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.autre-repres {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fond);
  border-radius: var(--rayon-sm);
  padding: 10px 12px;
  margin-bottom: 5px;
  cursor: pointer;
  box-shadow: var(--ombre-sm);
  transition: box-shadow 0.15s;
}
.autre-repres:hover       { box-shadow: var(--ombre); }
.autre-repres-jour        { font-size: 13px; font-weight: 500; color: var(--texte); }
.autre-repres-detail      { font-size: 12px; color: var(--texte-sec); }

/* Boutons d'action de la modale */
.modale-actions { display: flex; gap: 8px; flex-wrap: wrap; }

#btn-modale-favori {
  flex: 1;
  min-width: 140px;
  padding: 10px;
  border: none;
  border-radius: var(--rayon-sm);
  background: var(--fond);
  box-shadow: var(--ombre-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--texte);
  cursor: pointer;
  transition: all 0.15s;
}
#btn-modale-favori.actif { background: #FAECE7; border-color: #D85A30; color: #D85A30; }

#btn-modale-carte {
  padding: 10px 14px;
  border: none;
  border-radius: var(--rayon-sm);
  background: var(--vert-clair);
  color: var(--vert);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
#btn-modale-carte:hover { opacity: 0.8; }

#btn-modale-fermer {
  padding: 10px 16px;
  border: none;
  border-radius: var(--rayon-sm);
  background: var(--fond);
  font-size: 13px;
  color: var(--texte-sec);
  cursor: pointer;
}

#btn-modale-partager {
  padding: 10px 14px;
  border: none;
  border-radius: var(--rayon-sm);
  background: var(--vert-clair);
  color: var(--vert);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
#btn-modale-partager:hover { opacity: 0.8; }

#btn-modale-rappel {
  padding: 10px 14px;
  border: none;
  border-radius: var(--rayon-sm);
  background: #FAEEDA;
  color: #854F0B;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
#btn-modale-rappel:hover { opacity: 0.8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #btn-modale-rappel { background: #2D1800; color: #FCD34D; }
}
html[data-theme="dark"] #btn-modale-rappel { background: #2D1800; color: #FCD34D; }

/* --- Fiche lieu --- */
#fiche-lieu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 150;
  align-items: flex-end;
}
#fiche-lieu-overlay.visible { display: flex; }

#fiche-lieu-panel {
  background: var(--surface);
  border-radius: var(--rayon) var(--rayon) 0 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  max-height: 75vh;
  overflow-y: auto;
  animation: glisser-haut 0.25s ease;
}
#fiche-lieu-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
#fiche-lieu-titre { font-size: 16px; font-weight: 700; color: var(--texte); margin-bottom: 3px; }
#fiche-lieu-nb    { font-size: 12px; color: var(--texte-sec); }
#btn-fermer-fiche {
  background: var(--fond);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--texte-sec);
  flex-shrink: 0;
}
.fiche-jour-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--texte-ter);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 12px 0 6px;
}
.carte-fiche-lieu {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--surface);
  border-radius: var(--rayon);
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  box-shadow: var(--ombre-sm);
  transition: box-shadow 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.carte-fiche-lieu:hover  { box-shadow: var(--ombre); transform: translateY(-1px); }
.carte-fiche-lieu:active { transform: scale(0.98); box-shadow: none; }
.fiche-heure {
  font-size: 13px;
  font-weight: 700;
  color: var(--vert);
  min-width: 42px;
  flex-shrink: 0;
  padding-top: 1px;
}
.fiche-info  { flex: 1; min-width: 0; }
.fiche-titre {
  font-size: 13px;
  font-weight: 600;
  color: var(--texte);
  display: block;
  margin-bottom: 4px;
}
.fiche-age { font-size: 10px; color: var(--texte-ter); }

/* --- Recherche --- */
#recherche-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--surface);
  z-index: 200;
  flex-direction: column;
}
#recherche-overlay.visible {
  display: flex;
  animation: apparitionVue 0.22s ease-out forwards;
}

#recherche-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
#recherche-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
  z-index: 1;
}
#recherche-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 0.5px solid var(--bordure);
  flex-shrink: 0;
  padding-top: calc(12px + env(safe-area-inset-top));
}
#recherche-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--fond);
  border-radius: var(--rayon-sm);
  padding: 8px 12px;
  border: 0.5px solid var(--bordure);
}
#recherche-input-wrap svg { flex-shrink: 0; color: var(--texte-ter); }
#champ-recherche {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--texte);
  outline: none;
}
#champ-recherche::placeholder { color: var(--texte-ter); }
#btn-fermer-recherche {
  background: none;
  border: none;
  color: var(--vert);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
  flex-shrink: 0;
}
#recherche-hint {
  padding: 40px 20px;
  text-align: center;
  color: var(--texte-sec);
  font-size: 14px;
}
#resultats-recherche {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 20px;
  -webkit-overflow-scrolling: touch;
}
.recherche-nb {
  font-size: 12px;
  color: var(--texte-sec);
  margin-bottom: 12px;
  padding: 0 2px;
}
.recherche-jour-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--texte-ter);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 14px 0 6px 2px;
}
.carte-recherche {
  background: var(--surface);
  border-radius: var(--rayon);
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  box-shadow: var(--ombre-sm);
  transition: box-shadow 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.carte-recherche:hover  { box-shadow: var(--ombre); transform: translateY(-1px); }
.carte-recherche:active { transform: scale(0.98); box-shadow: none; }
.recherche-titre-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.recherche-titre {
  font-size: 13px;
  font-weight: 600;
  color: var(--texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recherche-heure {
  font-size: 13px;
  font-weight: 600;
  color: var(--vert);
  flex-shrink: 0;
}
.recherche-meta {
  display: flex;
  gap: 6px;
  align-items: center;
}
.recherche-lieu {
  font-size: 11px;
  color: var(--texte-sec);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Panneau filtres avancés --- */
#filtres-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  align-items: flex-end;
}
#filtres-panel-overlay.visible { display: flex; }

#filtres-panel {
  background: var(--surface);
  border-radius: var(--rayon) var(--rayon) 0 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 18px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  animation: glisser-haut 0.25s ease;
}
.filtres-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.filtres-panel-titre { font-size: 16px; font-weight: 700; color: var(--texte); }
#btn-filtres-reset {
  background: none;
  border: none;
  color: var(--texte-sec);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.filtres-section       { margin-bottom: 16px; }
.filtres-section-titre {
  font-size: 11px;
  font-weight: 600;
  color: var(--texte-ter);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.filtres-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-filtre-avance {
  background: var(--fond);
  border: none;
  border-radius: var(--rayon-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texte-sec);
  cursor: pointer;
  box-shadow: var(--ombre-sm);
  transition: all 0.15s;
}
.btn-filtre-avance.actif {
  background: var(--vert);
  color: var(--vert-texte);
  font-weight: 600;
  box-shadow: var(--ombre);
}
#btn-filtres-fermer {
  display: block;
  width: 100%;
  padding: 13px;
  background: var(--vert);
  color: var(--vert-texte);
  border: none;
  border-radius: var(--rayon-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.15s;
}
#btn-filtres-fermer:hover { opacity: 0.9; }