/* =====================================================================
   RESPONSIVE MOBILE (≤ 767px)
   ===================================================================== */
@media (max-width: 767px) {

  /* Layout principal */
  #app-layout { flex-direction: row; }
  #main-content {
    flex: 1;
    padding: 56px 14px 80px;
    width: 100%;
    min-width: 0;
  }

  /* Sidebar en overlay fixe */
  #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 260px;
    min-width: 260px;
    z-index: 460; /* doit être > backdrop (440) pour rester cliquable */
    transform: translateX(0);
    transition: transform 0.25s ease;
    border-left: none;
    border-right: 1px solid var(--border);
    box-shadow: 2px 0 24px rgba(0,0,0,.5);
  }
  #sidebar.collapsed {
    transform: translateX(-260px);
    width: 260px;
    min-width: 260px;
    border-right: none;
    box-shadow: none;
  }

  /* Bouton toggle — hamburger en haut à gauche */
  .sidebar-toggle {
    position: fixed;
    top: 12px;
    left: 220px;
    z-index: 301;
    transition: left 0.25s ease;
  }
  .sidebar-toggle.collapsed { left: 8px; }

  /* Sélecteur de langue dans sidebar */
  .sidebar-lang { padding: 8px 12px; }

  /* Inputs — font-size 16px minimum pour éviter le zoom iOS */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Dashboard — boutons barre d'actions */
  .syntheses-bar {
    flex-direction: column;
    gap: 8px;
  }
  .btn-back-scanner, .btn-import, .btn-synthese-entreprise, .btn-synthese-canton {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .section-back-row .btn-back-scanner {
    width: 100%;
    text-align: center;
  }

  /* Dashboard — tableaux scrollables */
  .detail-scroll, .synthese-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #detail-table, #synthese-table {
    min-width: 580px;
  }

  /* Scanner — boutons pleine largeur */
  .scan-capture-btns { flex-direction: column; gap: 10px; }
  .btn-scan-photo, .btn-scan-pdf {
    width: 100%;
    padding: 18px;
    font-size: 1.05rem;
  }

  /* Scanner — actions session empilées */
  .scan-session-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
  .scan-session-actions {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .btn-export-session, .btn-dashboard-session, .btn-effacer {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    font-size: 0.8rem;
  }

  /* Scanner — table scrollable */
  .scan-list-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #scan-list { min-width: 620px; }

  /* Carte — toolbar empilée */
  .carte-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .btn-geolocate, .btn-add-prelevement {
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
  }
  .carte-layer-toggle { margin-left: 0; width: 100%; }
  .layer-btn { flex: 1; padding: 10px; }

  /* Carte — hauteur de la map */
  #carte-map { height: 45vh; }

  /* Mon compte — padding réduit */
  .compte-page { padding: 16px 0 32px; }
  .compte-card { padding: 18px 16px; }

  /* Modales — pleine largeur */
  .modal-box {
    max-width: 100%;
    margin: 16px;
    padding: 28px 20px;
  }
  .premier-projet-modal {
    max-width: 100%;
    margin: 16px;
  }

  /* Premier projet — texte adapté */
  .premier-projet-titre { font-size: 1.3rem; }
  .premier-projet-btn { width: 100%; }

  /* Synthèse email */
  .synthese-email-wrap { padding: 12px; }
  pre.synthese-email-texte { font-size: 0.78rem; }

  /* Bouton suppression projet */
  .sidebar-projet-del { font-size: 1.1rem; padding: 4px 8px; }

  /* Sidebar mobile : pas de scroll, footer caché */
  #sidebar-nav { overflow-y: hidden; }
  #sidebar-footer, .sidebar-lang { display: none; }
}

/* ---- Bottom navigation ---- */
.bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0,0,0,.5);
  z-index: 400;
  flex-direction: row;
  align-items: stretch;
}

/* Barre du bas masquée sur le web/desktop (>= 768px), SAUF dans l'app mobile
   (Capacitor). Elle reste donc sur mobile (navigateur étroit) et pour les
   transporteurs sur petit écran ; le desktop utilise la sidebar. */
@media (min-width: 768px) {
  body:not(.capacitor-app) .bottom-nav { display: none !important; }
  /* Plus de bottom-nav sur desktop → on récupère l'espace réservé en bas. */
  body:not(.capacitor-app) #main-content { padding-bottom: 28px; }
}
.bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 2px 8px;
  color: rgba(148,163,184,.7);
  transition: color 0.15s, background 0.15s;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
/* Barre indicateur : fine et transparente par défaut, pleine sur active */
.bottom-nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: transparent;
  border-radius: 0 0 4px 4px;
  transition: background 0.2s, width 0.2s;
}
.bottom-nav-btn:hover::before  { background: rgba(249,115,22,.45); width: 20px; }
.bottom-nav-btn.active::before { background: var(--orange);         width: 32px; }

/* Hover : orange doux + fond pill autour de l'icône */
.bottom-nav-btn:hover {
  color: var(--orange);
}
.bottom-nav-btn:hover .bnav-icon {
  transform: translateY(-2px);
}
.bottom-nav-btn:active { color: var(--orange); }
.bottom-nav-btn.active { color: var(--orange); }
.bottom-nav-btn.nav-inactif { opacity: 0.35; pointer-events: none; }
.bottom-nav-icon { font-size: 1.2rem; line-height: 1; transition: transform 0.18s cubic-bezier(.34,1.56,.64,1); }
.bottom-nav-label { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }

/* Icônes SVG bottom nav */
.bnav-icon {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
}
.bottom-nav-btn .tile-ic {
  stroke: rgba(148,163,184,.7);
  stroke-width: 2.5;
  transition: stroke 0.2s;
}
.bottom-nav-btn .tile-ic-fill {
  fill: rgba(148,163,184,.7);
  transition: fill 0.2s;
}
.bottom-nav-btn:hover .tile-ic      { stroke: var(--orange); }
.bottom-nav-btn:hover .tile-ic-fill { fill: var(--orange); }
.bottom-nav-btn.active .tile-ic       { stroke: var(--orange); }
.bottom-nav-btn.active .tile-ic-fill  { fill: var(--orange); }
.bottom-nav-btn:active .tile-ic       { stroke: var(--orange); }
.bottom-nav-btn:active .tile-ic-fill  { fill: var(--orange); }

/* Zone logo Geovio (page projets, sans projet actif) */
.bnav-logo-zone {
  flex: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  padding: 0 8px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.bnav-logo-zone:hover  { opacity: 0.7; }
.bnav-logo-zone:active { opacity: 0.5; }
.bnav-wordmark {
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}

/* Toast "sélectionnez un projet" */
.bnav-toast {
  position: fixed;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  z-index: 401;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  animation: bnav-toast-in 0.2s ease;
  pointer-events: none;
}
@keyframes bnav-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =====================================================================
   APP NATIVE Capacitor (iOS / Android) — body.capacitor-app
   ===================================================================== */

/* Supprime le flash noir au tap sur iOS (tap-highlight-color) */
body.capacitor-app * {
  -webkit-tap-highlight-color: transparent;
}

/* Layout global : le body ne défile pas — seul #main-content défile en interne.
   Cette approche évite le saut des éléments position:fixed sur iOS WKWebView,
   sans casser les click handlers (contrairement à body{position:fixed}). */
body.capacitor-app {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.capacitor-app #app-layout {
  height: 100%;
  min-height: unset;
  overflow: hidden;
}
body.capacitor-app #main-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: none;
  padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 76px !important;
  min-height: 0;
}

/* 1. Header : s'étend sous la barre de statut iOS (safe area) */
body.capacitor-app #app-header {
  height: auto;
  min-height: 56px;
  padding-top: env(safe-area-inset-top, 0px);
}

/* 2. Bottom nav : hauteur réduite + stable (will-change GPU layer) */
body.capacitor-app .bottom-nav {
  height: 60px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* Bouton Compte : encadré visible */
body.capacitor-app #bnav-compte {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin: 6px 10px 6px 4px;
  padding: 5px 12px;
  min-width: 60px;
}

/* 3. Ombres drop-shadow : supprimées sur mobile WebKit (s'appliquent sur le
      bounding-box rectangulaire de l'élément SVG, pas sur la forme hexagonale) */
body.capacitor-app .hex-svg,
body.capacitor-app .projet-cercle:hover .hex-svg {
  filter: none;
}
body.capacitor-app .scan-hex-tile,
body.capacitor-app .scan-hex-tile:hover {
  filter: none;
}

/* 4. Sidebar : pas de flou sur l'overlay (backdrop-filter trop lent sur WebKit) */
body.capacitor-app .sidebar-backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 5. Page déchets : masquer les boutons non pertinents sur mobile */
body.capacitor-app #btn-export-session,
body.capacitor-app #btn-import-excel,
body.capacitor-app .btn-synthese-entreprise,
body.capacitor-app .btn-import-initial {
  display: none;
}

/* 6. Page déchets : tuiles scanner agrandies, très peu d'espace entre elles */
body.capacitor-app .scan-hex-svg {
  width: 175px;
  height: 203px;
}
body.capacitor-app .scan-hex-tiles {
  gap: 6px;
  padding: 20px 0 14px;
}

/* 7. Page déchets : graphique mensuel plus grand */
body.capacitor-app .chart-main-box canvas {
  min-height: 220px;
}

/* 8. Page prélèvements : tableau responsive mobile */
body.capacitor-app .prelevement-item {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 8px;
  padding: 12px 14px;
  align-items: center;
}
body.capacitor-app .prelevement-type-dot {
  width: 34px;
  height: 34px;
  grid-column: 1;
  grid-row: 1;
}
body.capacitor-app .prelevement-info {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
}
body.capacitor-app .prelevement-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
body.capacitor-app .prelevement-coords {
  display: none;
}
body.capacitor-app .prelevement-type-cell {
  position: static;
  transform: none;
  left: auto;
  grid-column: 3;
  grid-row: 1;
  min-width: 62px;
  padding: 5px 8px;
  font-size: 0.72rem;
  white-space: nowrap;
}
body.capacitor-app .prel-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 6px;
  align-items: center;
}
body.capacitor-app .prel-actions .prelevement-btn-ajouter,
body.capacitor-app .prel-actions .prelevement-btn-deplacer,
body.capacitor-app .prel-actions .prelevement-btn-photo,
body.capacitor-app .prel-actions .prelevement-btn-pdf,
body.capacitor-app .prel-actions .prelevement-btn-analyse,
body.capacitor-app .prel-actions .prelevement-del,
body.capacitor-app .prel-actions .prel-item-cb {
  padding: 7px 10px;
  font-size: 1.1rem;
}
body.capacitor-app .prel-actions .prelevement-btn-photo,
body.capacitor-app .prel-actions .prelevement-btn-pdf {
  padding: 7px 10px;
}
body.capacitor-app .prel-actions .prel-item-cb {
  margin-left: auto;
}

body.capacitor-app .prelevement-enfant .prelevement-info {
  grid-column: 2 / 4;
}

/* Enfant : ajuster l'affichage simplifié */
body.capacitor-app .prelevement-enfant .prelevement-type-cell {
  grid-column: 3;
}