/* ============================================================================
   Écrans étroits — tablette et téléphone

   Ce fichier est séparé de main.css à dessein. Les commentaires de main.css
   portent des caractères de dessin mal encodés de longue date : toute
   réécriture de ce fichier les modifierait en masse et noierait la
   modification réelle. Ici, rien n'est repris de main.css, tout y est ajouté.

   Le contrôle `scripts/verif-responsive.js` mesure ce que ces règles visent :
   aucun débordement horizontal, des commandes touchables, et des champs qui
   ne font pas zoomer le navigateur.
   ========================================================================= */

/* ── Barre de navigation ──────────────────────────────────────────────────
   Les sept onglets occupent 619 px : sur un téléphone de 390 px, ils
   poussaient la page entière, et c'est ce débordement qui rendait tous les
   écrans inutilisables — pas leur contenu. Ils deviennent une liste que l'on
   déplie, et l'onglet courant reste lisible une fois refermée. */

.btn-menu { display: none; }

@media (max-width: 860px) {
  .btn-menu {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 11px 16px;
    border: 0; border-bottom: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text);
    font-family: inherit; font-size: 14px; font-weight: 600;
    min-height: 44px;
    text-align: left; cursor: pointer;
  }
  .btn-menu-chevron { margin-left: auto; color: var(--color-text-3); font-size: 12px; }

  .barre-nav {
    display: none;
    flex-direction: column; align-items: stretch;
    padding: 6px; gap: 2px;
  }
  .barre-nav.deployee { display: flex; }

  .nav-tab {
    /* 44 px : la cible qu'un doigt atteint sans viser. */
    display: flex; align-items: center;
    min-height: 44px; padding: 0 14px;
    border-radius: var(--radius); font-size: 14px;
  }
  /* Le décalage à droite de l'administration n'a plus de sens en colonne : il
     la repousserait au bas d'une liste déjà verticale. Ce qui distingue les
     actes et l'administration des écrans courants — filet, contour, casse du
     libellé — est posé dans finitions.css, qui adapte lui-même ces marques à
     la colonne : les y reprendre ici les ferait diverger. */
  .nav-tab--admin { margin-left: 0; }
}

/* ── Bandeau ──────────────────────────────────────────────────────────────
   Le bandeau porte le logo, le titre, l'horodatage, trois boutons et
   l'adresse du compte. En dessous de 860 px, il passe à la ligne plutôt que
   de comprimer les commandes sous la taille du doigt. */

@media (max-width: 860px) {
  .bandeau { flex-wrap: wrap; gap: 8px 12px; }
  .bandeau-outils { gap: 6px; }
  .bandeau-titre-suffixe { font-size: inherit; }

  .btn-bandeau, .btn-cloche, .compte-bouton {
    min-height: 44px;
  }
  .btn-cloche { width: 44px; }
  .btn-bandeau { padding: 0 14px; }

  /* Le menu du compte, ancré à droite, sortait de l'écran sur un téléphone. */
  .compte-menu { right: 0; left: auto; min-width: 0; width: min(280px, calc(100vw - 24px)); }
  .compte-menu button { min-height: 44px; }
}

/* ── Contenu ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .main, .main--collecte { padding: 16px 12px 48px; }

  /* Le titre et ses boutons d'action se disputaient la largeur ; les boutons
     passent dessous et occupent toute la ligne, ce qui les rend touchables. */
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-header-actions { flex-wrap: wrap; }
  .page-header-actions .btn { flex: 1; justify-content: center; }

  .stats-strip,
  .stats-strip--compact { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .filters-bar { gap: 8px; }
  .input-search { max-width: none; }
  .filters-bar--compact .select { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
  .stats-strip,
  .stats-strip--compact { grid-template-columns: 1fr 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
}

/* ── Commandes et saisie ──────────────────────────────────────────────────
   Un corps inférieur à 16 px dans un champ fait zoomer d'autorité les
   navigateurs iOS au moment de la frappe, et la page reste décalée ensuite.
   Le remède est de remonter le corps, non de brider le zoom : l'interdire
   empêcherait aussi d'agrandir un tableau dense à la lecture. */

/* Le critère est l'appareil, non la largeur : une tablette en paysage offre
   1024 px et se touche quand même du doigt. `pointer: coarse` désigne
   exactement cela, et laisse les postes à souris inchangés. */
@media (pointer: coarse), (max-width: 860px) {
  .input, .select, .input-search, textarea.input,
  .input-sm, .select-sm {
    font-size: 16px;
    min-height: 44px;
  }
  textarea.input { min-height: 80px; }

  .btn, .btn-bandeau, .compte-bouton, .nav-tab { min-height: 44px; }
  .btn-cloche { width: 44px; min-height: 44px; }
  .btn-sm { min-height: 36px; }
  /* Les commandes logées dans une cellule de tableau dense gardent leur
     taille : les agrandir disloquerait la grille de lecture, et ces écrans
     restent des écrans de poste de travail. */
  .table--dense .btn,
  .table--dense .input,
  .table--dense .select,
  .table--dense .input-sm,
  .table--dense .select-sm { min-height: 0; font-size: 12px; }
}

/* ── Tableaux ─────────────────────────────────────────────────────────────
   Aucune colonne n'est masquée : un tableau de doses tronqué se lirait encore
   et le manque passerait inaperçu, ce que le § 5.7 du dossier de validation
   refuse pour le rapport et qui vaut autant à l'écran. Le tableau défile donc
   dans son conteneur, la page restant immobile. */

.table-wrapper { -webkit-overflow-scrolling: touch; }

@media (max-width: 860px) {
  /* Le filet signale qu'il reste du contenu à droite : sans lui, un tableau
     coupé net passe pour un tableau complet. */
  .table-wrapper {
    background:
      linear-gradient(to right, var(--color-surface) 30%, rgba(255,255,255,0)),
      linear-gradient(to left,  var(--color-surface) 30%, rgba(255,255,255,0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.14), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.14), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
    border-radius: var(--radius-lg);
  }
  .table-wrapper--scroll { max-height: 60vh; }
}

/* ── Fenêtres modales ─────────────────────────────────────────────────────
   Une fenêtre de 520, 900 ou 1320 px sur un téléphone laissait des marges
   inutiles et réduisait d'autant la place du contenu. Elle occupe l'écran. */

@media (max-width: 860px) {
  .modal { align-items: flex-end; }
  .modal-panel,
  .modal-panel--small,
  .modal-panel--large,
  .modal-panel--xl {
    width: 100%; max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-header { padding: 14px 16px; }
  .modal-close { min-width: 44px; min-height: 44px; font-size: 22px; }
  .modal-body { padding: 16px; }

  /* Les formulaires en colonnes se mettent en pile. */
  .form-row { flex-direction: column; }
  .form-page { max-width: none; }

  /* La ligne d'un faisceau aligne cinq champs : elle passe à la ligne plutôt
     que d'élargir le formulaire entier. Les largeurs fixes posées dans le
     balisage y deviendraient des minimums tenaces, d'où leur levée. */
  .faisceau-row { flex-wrap: wrap; }
  .faisceau-row .form-label,
  .faisceau-row > div { max-width: none !important; min-width: 140px; }

  /* Le fil d'étapes et la frise d'essai défilent plutôt que de se tasser :
     une étape illisible ne dit plus où l'on en est. */
  .wizard-steps,
  .essai-timeline { overflow-x: auto; }
}

/* ── Planning des essais ──────────────────────────────────────────────────
   Comprimer la frise la rendrait fausse : des phases de quelques jours
   finiraient par se recouvrir, et l'on ne saurait plus laquelle est relevée.
   Le cadre défile donc horizontalement, frise entière, colonne des libellés
   comprise : faire défiler les pistes seules les désalignerait de l'échelle
   des mois portée par l'en-tête. */

@media (max-width: 860px) {
  .frise-cadre { padding: 8px 10px 12px; -webkit-overflow-scrolling: touch; }
  .frise { min-width: 640px; }
  .frise-libelle {
    flex-basis: 150px; width: 150px;
    font-size: .72rem;
  }
}

@media (max-width: 560px) {
  /* La référence du dossier et le client tiennent encore sur 128 px ; en
     deçà, c'est la référence elle-même qui serait tronquée. */
  .frise-libelle { flex-basis: 128px; width: 128px; }
}