/* =====================================================================
   Archimeme — accessibilité mobile (téléphone)
   Chargé après les styles inline de chaque page : surcharge ciblée pour
   les petits écrans, sans toucher le rendu bureau.
   ===================================================================== */
@media (max-width: 560px) {

  /* Le panneau occupe presque toute la largeur, marges réduites */
  .panel {
    width: calc(100vw - 0.8rem) !important;
    max-width: calc(100vw - 0.8rem) !important;
    padding: 12px 13px !important;
    gap: 11px !important;
  }

  /* Barres de navigation horizontales : on enroule au lieu de chevaucher.
     (sinon les items se collent : « ProfilHistoriqueGestion… »)            */
  nav,
  .tabs,
  .subnav,
  .filters {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    column-gap: 14px;
    row-gap: 5px;
    white-space: normal !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Lignes de formulaire / profil : ne pas tronquer les boutons « Modifier » */
  .profile-row,
  .banner-row,
  .form-row,
  .search-row {
    overflow: visible !important;
    white-space: normal !important;
  }

  /* Recherche : champ en pleine largeur, suggestions en dessous */
  .search-row { flex-direction: column !important; align-items: stretch !important; }
  .search-row input { width: 100% !important; margin: 0 0 8px 0 !important; }
  .search-row .suggestions { margin-left: 0 !important; }
  .profile-row .value,
  .form-row .value { word-break: break-word; }
}

/* Très petits écrans : on resserre encore la typo des barres */
@media (max-width: 380px) {
  nav, .tabs, .subnav, .filters { column-gap: 10px; }
}