/* ==========================================================================
   ADAPTATION TÉLÉPHONE — chargée en DERNIER sur toutes les pages
   ==========================================================================

   Jumelle de Atlas/public/css/mobile.css, et pour la même raison : les
   défauts relevés à 390 px de large sont transversaux (une classe de bouton
   présente partout, une barre d'outils commune). Les réunir ici les rend
   vérifiables d'un coup, plutôt que dispersés dans app.css, docs.css et
   sheets.css.

   Chaque règle répond à une mesure du banc (jobs/…/mobile.js) : cible
   tactile sous 40 px, texte sous 11,5 px, élément qui déborde à droite.
   Rien n'est ajouté « au cas où ».

   Fort-Knox a déjà une barre de navigation du bas et un bouton flottant à
   cette taille (app.css) — on ne les refait pas, on répare ce qui reste.
   ========================================================================== */

/* Le bouton « Menu » (barre latérale escamotable) n'a d'effet que sous
   760 px : au-delà, la barre est affichée en permanence et la classe .open
   ne change rien. Un bouton qui ne fait rien est pire qu'un bouton absent —
   on le hisse donc hors de vue sur grand écran. Même défaut, même remède que
   « Retour aux conversations » côté Atlas. */
@media (min-width: 761px) {
  [data-action="toggle-sidebar"] { display: none !important; }
}

@media (max-width: 760px) {

  /* ---------------------------------------------------- Cibles tactiles
     Le seuil du pouce est 44 px chez Apple, 48 chez Google. Les champs de
     saisie sont montés à 44 : sur un formulaire de connexion, rater le champ
     est le premier obstacle qu'on rencontre. */
  input, select, textarea {
    min-height: 44px;
    /* Sous 16 px, iOS zoome tout seul à la saisie et déforme la page. */
    font-size: 16px;
  }
  .btn { min-height: 44px; }
  .icon-btn { min-width: 42px; min-height: 42px; }
  /* Les trois points d'une ligne de fichier : 30 px, dans une liste dense —
     on ne monte pas à 44 pour ne pas gonfler chaque rangée, mais on sort de
     la zone où le doigt manque. */
  .icon-btn.item-menu-btn, .item-menu-btn { min-width: 40px; min-height: 40px; }

  /* Fil d'Ariane et tri : des commandes réelles, pas des étiquettes. */
  #breadcrumb button, #sort-trigger { min-height: 40px; }
  #view-toggle button { min-width: 42px; min-height: 42px; }

  /* Pastilles de filtre — celles de l'accueil comme celles de Mon Drive. */
  .home-filter-chip, .filtre-puce, .filtre-reinit { min-height: 40px; }

  /* Barre latérale : l'intitulé « Partagés avec moi » est cliquable (il ouvre
     la vue) mais ne faisait que 16 px de haut. */
  .sidebar-section-label { min-height: 40px; display: flex; align-items: center; font-size: 12px; }
  .storage-upgrade { min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* Navigation du bas : ses libellés étaient à 10,5 px. */
  .bottom-nav-item span { font-size: 11.5px; }

  /* ------------------------------------------------------------ Étiquettes */
  .badge { font-size: 11.5px; }

  /* --------------------------------------------------------- Administration
     Deux listes déroulantes de filtre à 350 px de large occupaient toute la
     largeur chacune : elles passent l'une sous l'autre proprement, et les
     boutons d'action prennent la ligne entière plutôt que d'être serrés. */
  .admin-tab { min-height: 44px; flex-shrink: 0; white-space: nowrap; }
  .admin-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .back-link { min-height: 40px; display: inline-flex; align-items: center; }
  .admin-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-toolbar .btn { width: 100%; }
  /* La liste des comptes : le sélecteur de rôle ne faisait que 32 px de
     LARGE — on ne pouvait ni lire ni viser. Il prend la largeur qu'il faut. */
  .user-row select, .user-row input, [data-set-role] { min-height: 44px; min-width: 140px; }
}

/* ======================================================== FORT-DOCS
   L'en-tête de l'éditeur est ce qui souffrait le plus : titre de 28 px,
   menus de 22 px de haut, retour de 30 px. Sur un traitement de texte, ce
   sont pourtant les commandes qu'on cherche en premier. */
@media (max-width: 760px) {
  #docs-home { min-width: 42px; min-height: 42px; }
  #docs-title { min-height: 42px; font-size: 16px; }
  #docs-menubar { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  #docs-menubar::-webkit-scrollbar { display: none; }
  #docs-menubar button { min-height: 40px; flex-shrink: 0; white-space: nowrap; padding: 0 10px; }
  .docs-pill-btn { min-height: 40px; }
  #docs-toolbar { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  #docs-toolbar::-webkit-scrollbar { display: none; }
  .docs-tb-btn { min-width: 40px; min-height: 40px; flex-shrink: 0; }
  /* Le petit chevron des styles de liste : 16 px de large, invisable au
     doigt. Il ouvre pourtant le choix des puces et des numérotations. */
  .docs-tb-chevron { min-width: 40px; min-height: 40px; flex-shrink: 0; }
  .docs-tb-select { min-height: 40px; flex-shrink: 0; }
  /* Les groupes n'affichent plus leur libellé au survol : il n'y a pas de
     survol au doigt, et le libellé mangerait une ligne. */
  .docs-tb-groupe::after { display: none; }

  /* La page : marges intérieures réduites, sinon il ne reste presque rien
     pour le texte sur 390 px. */
  #docs-editor { padding: 28px 18px !important; }
  #docs-editor::before, #docs-editor::after {
    top: 28px; bottom: 28px; left: 18px; right: 18px;
  }
  /* La règle graduée n'a pas de sens sans souris. */
  #docs-ruler { display: none; }

  /* Les menus flottants (clic droit, interligne) prennent la largeur utile
     plutôt qu'une colonne étroite au milieu de l'écran. */
  .docs-menu { min-width: 0; width: calc(100vw - 24px); max-width: 340px; }
  .docs-menu button { min-height: 42px; }
}