/* CSS mobile partagé — toutes les pages */
@media (max-width: 768px) {

  /* Fiches et pages à deux colonnes */
  #content {
    grid-template-columns: 1fr !important;
    margin: 12px auto !important;
  }

  /* Headers collants */
  #header {
    padding: 10px 14px !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  #header h1 { font-size: 14px !important; }

  /* Cards */
  .card { padding: 14px !important; }
  .data-grid { grid-template-columns: 1fr 1fr !important; }
  .data-grid.four { grid-template-columns: 1fr 1fr !important; }

  /* Mini carte dans les fiches */
  #mini-map { height: 160px !important; }

  /* Formulaires */
  .form-2col { grid-template-columns: 1fr !important; }

  /* Boutons plus grands */
  .btn { padding: 12px 16px !important; font-size: 14px !important; }
  .btn-sm { padding: 8px 12px !important; font-size: 12px !important; }

  /* Interface mail */
  #app { flex-direction: column !important; height: auto !important; }
  #liste-mails {
    width: 100% !important;
    min-width: unset !important;
    max-height: 40vh;
  }
  #lecture-mail { min-height: 50vh; }
  #panneau-redaction {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Matching */
  #content { padding: 0 10px 20px !important; }
  .res-card { flex-direction: column !important; }
}

@media (max-width: 480px) {
  .data-grid { grid-template-columns: 1fr !important; }
  table { font-size: 11px !important; }
  th, td { padding: 5px !important; }
}