/*
 * Fondations responsive pour l'admin (src/pages/admin*.js).
 *
 * Convention de breakpoints : chaque page admin injecte son propre <style>
 * inline en JS (pas de bundler, donc les custom properties --breakpoint-*
 * de variables.css sont inutilisables dans un @media — les media queries
 * n'évaluent pas var()). On utilise donc partout des valeurs en dur :
 *   - 767px  : mobile
 *   - 1023px : tablette
 * Toute nouvelle media query admin doit reprendre ces deux seuils plutôt
 * que d'en inventer un nouveau (640px, 768px, etc.), pour rester cohérent
 * d'un fichier à l'autre.
 */

/* Enveloppe à ajouter autour de tout <table> potentiellement large. */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Remplace un `.form-row { display:flex; gap:1rem }` sans flex-wrap :
   les champs passent naturellement à la ligne sous ~220px chacun. */
.form-row-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.form-row-responsive > * {
  flex: 1 1 220px;
}

/* Zone de clic minimale recommandée pour le tactile (WCAG 2.5.5 / Apple HIG). */
.btn-touch {
  min-height: 44px;
  min-width: 44px;
}