/* Apatronic.com - complément mobile du 15 octobre 2026.
 * Chargé après app.css ; conserve intégralement les fonctions installées.
 * Aucun changement de configuration, de compte, de dépôt ou de carte.
 */
@media screen {
  #app .panel, #app .content-grid > *, #app .two > *,
  #app .quick-actions > *, #app .login-cards > *,
  #app .species-grid > *, #app .metrics > *,
  #app .hero > *, #app .steps > *, #app .brand > * { min-width: 0; }
  #app .button, #app .navlink, #app .intro h1,
  #app .quiet-panel, #app .notice, #app .species,
  #app .citizen-card, #app .summary-list > * { overflow-wrap: anywhere; }
  #app .button { max-width: 100%; white-space: normal; text-align: center; }
  #app input, #app select, #app textarea { min-width: 0; max-width: 100%; }
  #app .table-wrap { max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
  #app .summary-list { grid-template-columns: 135px minmax(0, 1fr); }
  .privacy-dialog {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: anywhere;
  }
  .privacy-dialog .toolbar > * { min-width: 0; }
  .privacy-dialog .toolbar button { flex-shrink: 0; min-height: 44px; }
  #app .map-expanded .leaflet-top, #app .map:fullscreen .leaflet-top { top: env(safe-area-inset-top, 0px); }
  #app .map-expanded .leaflet-left, #app .map:fullscreen .leaflet-left { left: env(safe-area-inset-left, 0px); }
  #app .map-expanded .leaflet-right, #app .map:fullscreen .leaflet-right { right: env(safe-area-inset-right, 0px); }
  #app .map-expanded .leaflet-bottom, #app .map:fullscreen .leaflet-bottom { bottom: env(safe-area-inset-bottom, 0px); }
}

@media screen and (max-width: 800px) {
  /* Les liens étaient masqués sous 800 px ; chacun reste désormais accessible. */
  #app .topbar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding-left: max(17px, env(safe-area-inset-left, 0px));
    padding-right: max(17px, env(safe-area-inset-right, 0px));
    padding-top: max(15px, env(safe-area-inset-top, 0px));
  }
  #app .topbar .brand { grid-column: 1 / -1; margin: 0 0 4px; }
  #app .topbar .navlink {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 8px 4px; font-size: 14px; line-height: 1.4;
  }
  #app .topbar .button { min-height: 44px; font-size: 13px; padding: 10px; }
  #app .content-grid, #app .hero { grid-template-columns: minmax(0, 1fr); }
  #app main {
    padding-left: max(17px, env(safe-area-inset-left, 0px));
    padding-right: max(17px, env(safe-area-inset-right, 0px));
  }
  #app .footer { padding-bottom: calc(35px + env(safe-area-inset-bottom, 0px)); }
  #app .intro { flex-wrap: wrap; }
  #app .intro .back { margin-left: 0; white-space: normal; }
  #app .form-bottom { flex-wrap: wrap; }
}

@media screen and (pointer: coarse), screen and (max-width: 800px) {
  #app input[type="text"], #app input[type="search"], #app input[type="email"],
  #app input[type="tel"], #app input[type="date"], #app input[type="number"],
  #app input[type="password"], #app select, #app textarea {
    font-size: max(16px, 1em); min-height: 46px;
  }
  #app .field > label, #app .field > legend { font-size: 15px; }
  #app .button.small, #app .inline-button, #app .filter-all,
  #app .results button, #app .species { min-height: 44px; }
  #app .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
  #app .leaflet-control-layers label { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  #app .leaflet-control-layers input { min-height: 0; flex-shrink: 0; }
  #app .toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

@media screen and (max-width: 520px) {
  #app .two { grid-template-columns: minmax(0, 1fr); }
  #app .species-grid, #app .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .summary-list { grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 14px; }
  #app .summary-list dd { margin-bottom: 10px; }
  #app .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #app .steps button { flex-direction: row; align-items: center; padding: 10px 0; }
  #app .steps b { flex-shrink: 0; margin: 0; }
  #app .form-bottom > .button { flex: 1 1 100%; }
  #app .geolocation-choice .button, #app .location-actions .button { flex: 1 1 100%; }
  #app .map { height: 320px; }
  #app .national-map { height: 430px; }
  #app .overview-map { height: 350px; }
  #app .map-toolbar select { max-width: 100%; }
  .privacy-dialog .toolbar { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
}
@media screen and (max-width: 360px) {
  #app .hero h1 { font-size: 32px; }
  #app .hero-copy { padding: 24px 18px; }
  #app .quick-actions { grid-template-columns: minmax(0, 1fr); }
}