/*
 * mobile.css — place2be.events
 * Design responsive pour smartphones et tablettes
 * Inclure dans toutes les pages avant </head>
 * <link rel="stylesheet" href="mobile.css">
 */

/* ══════════════════════════════════════════
   TABLETTE — écrans entre 768px et 1024px
══════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* INDEX — grille événements */
  .events-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }

  /* FICHE ÉVÉNEMENT — layout */
  .page-body {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  /* ORGANISATEUR — stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ANNONCEURS — zones */
  .zones-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* CONFIGURATEUR — layout */
  .configurateur {
    grid-template-columns: 1fr !important;
    padding: 20px 16px !important;
  }

  /* COMPTABILITÉ */
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* TRAFIC */
  .triple-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ══════════════════════════════════════════
   MOBILE — écrans < 768px
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── HEADER GLOBAL ── */
  header {
    padding: 0 16px !important;
    height: 56px !important;
    gap: 10px !important;
  }

  .logo {
    font-size: 18px !important;
  }

  /* Cache le breadcrumb sur mobile */
  .breadcrumb { display: none !important; }

  /* ── BARRE DE RECHERCHE INDEX ── */
  .search-wrap {
    display: none !important;
  }

  /* Barre de recherche mobile dédiée */
  .mobile-search {
    display: flex !important;
  }

  /* ── CATÉGORIES ── */
  .cats-bar {
    padding: 8px 12px !important;
    gap: 6px !important;
  }

  .cat-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* ── BOUTONS DATES RAPIDES ── */
  .quick-dates {
    padding: 8px 12px !important;
    gap: 6px !important;
  }

  .quick-btn {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }

  /* ── LAYOUT INDEX ── */
  .page-body {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  /* Cache la sidebar filtres sur mobile
     (accessible via bouton filtres) */
  aside {
    display: none !important;
  }

  aside.open {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    background: var(--surface) !important;
    overflow-y: auto !important;
    padding: 20px !important;
    flex-direction: column !important;
  }

  /* ── GRILLE ÉVÉNEMENTS ── */
  .events-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ── RÉSULTATS ── */
  .results-bar {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* ── FICHE ÉVÉNEMENT ── */
  .hero { padding: 20px 16px 0 !important; }
  .hero-title { font-size: 22px !important; }
  .hero-info-bar { gap: 14px !important; padding: 14px 0 20px !important; }
  .info-pill-value { font-size: 13px !important; }

  .modal-hero { height: 120px !important; font-size: 48px !important; }
  .modal-title { font-size: 18px !important; }
  .info-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── BILLETTERIE ── */
  .steps-row { gap: 4px !important; }
  .step-label { font-size: 11px !important; }
  .step-num { width: 24px !important; height: 24px !important; font-size: 11px !important; }

  .ticket-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .ticket-qr-zone {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* ── ORGANISATEUR ── */
  .main { margin-left: 0 !important; }

  /* Sidebar organisateur cachée sur mobile */
  .sidenav {
    transform: translateX(-100%) !important;
    transition: transform 0.3s !important;
    z-index: 200 !important;
  }

  .sidenav.open {
    transform: translateX(0) !important;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* ── ANNONCEURS ── */
  .hero-title { font-size: 26px !important; }
  .hero-stats { gap: 20px !important; }
  .hero-stat-num { font-size: 22px !important; }

  .avantages-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .zones-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .targets-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .duree-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .configurateur {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  /* Preview pub se place en dessous */
  .preview-panel {
    position: relative !important;
    top: auto !important;
  }

  .export-grid {
    grid-template-columns: 1fr !important;
  }

  .temo-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── PROFIL ── */
  .auth-layout {
    grid-template-columns: 1fr !important;
  }

  /* Cache le panneau visuel gauche */
  .auth-visual { display: none !important; }

  .auth-form-wrap {
    padding: 20px 16px !important;
  }

  /* ── CONNEXION ── */
  .social-btns {
    grid-template-columns: 1fr !important;
  }

  /* ── COMPTABILITÉ ── */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .revenue-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── TRAFIC ── */
  .double-grid {
    grid-template-columns: 1fr !important;
  }

  .triple-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── ADMIN BDD ── */
  .quick-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Tables scrollables horizontalement */
  .table-wrap {
    overflow-x: auto !important;
  }

  table {
    min-width: 600px !important;
  }

  /* ── LIEU ── */
  .social-links {
    grid-template-columns: 1fr !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }

  .gallery-item:first-child {
    grid-row: auto !important;
    grid-column: 1 / -1 !important;
    height: 160px !important;
  }

  /* ── MODALS ── */
  .modal {
    margin: 10px !important;
    max-height: 95vh !important;
  }

  .overlay {
    padding: 10px !important;
    align-items: flex-end !important;
  }

  /* Modals s'ouvrent depuis le bas sur mobile */
  .modal {
    border-radius: 16px 16px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* ── TICKET BOX ── */
  .ticket-box {
    position: relative !important;
    top: auto !important;
  }

  /* ── FORMULAIRES ── */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  .form-row-3 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── PAGINATION ── */
  .pagination {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
  }
}

/* ══════════════════════════════════════════
   TRÈS PETIT MOBILE — écrans < 400px
══════════════════════════════════════════ */
@media (max-width: 400px) {

  .events-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-title { font-size: 20px !important; }

  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .kpi-grid {
    grid-template-columns: 1fr !important;
  }

  .zones-grid {
    grid-template-columns: 1fr !important;
  }

  .targets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ticket-grid {
    grid-template-columns: 1fr !important;
  }

  .quick-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════
   ÉLÉMENTS MOBILES SPÉCIFIQUES
   (cachés sur desktop, visibles sur mobile)
══════════════════════════════════════════ */

/* Barre de recherche mobile */
.mobile-search {
  display: none;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  max-width: 300px;
}

.mobile-search input {
  background: transparent;
  border: none;
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  width: 100%;
}

.mobile-search input::placeholder { color: rgba(255,255,255,0.5); }

/* Bouton hamburger menu sidebar */
.burger-btn {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .burger-btn { display: flex !important; align-items: center; }
  .mobile-search { display: flex !important; }
}

/* Bouton filtres mobile */
.mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

@media (max-width: 768px) {
  .mobile-filter-btn { display: flex !important; }
}

/* Overlay sidebar mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 150;
}

.sidebar-overlay.open {
  display: block;
}

/* Barre bottom navigation mobile */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--brand);
  height: 60px;
  z-index: 90;
  border-top: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
  .mobile-bottom-nav { display: flex !important; }

  /* Espace en bas pour la nav mobile */
  body { padding-bottom: 60px !important; }
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 10px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: color 0.15s;
  border: none;
  background: transparent;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
  color: var(--accent);
}

.mobile-nav-icon { font-size: 20px; }
.mobile-nav-label { font-size: 10px; }

/* Cache la bannière cookie sur très petit écran
   pour ne pas gêner la navigation */
@media (max-width: 400px) {
  #cookie-banner { font-size: 12px !important; }
}