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

   Pourquoi une feuille à part plutôt que des media queries éparpillées dans
   les quinze autres : les défauts mesurés sont transversaux (une même barre
   de navigation sur toutes les pages, une même classe de bouton partout).
   Les corriger au même endroit rend l'ensemble vérifiable d'un coup d'œil,
   et évite de rouvrir quinze fichiers quand un seuil change.

   Les valeurs viennent d'un banc de mesure qui rend chaque page à 390 px de
   large et relève ce qui cloche (voir jobs/…/mobile.js) : cibles tactiles
   sous 44 px, texte sous 11,5 px, éléments qui débordent à droite. Rien ici
   n'est décoratif — chaque règle répare quelque chose de mesuré.

   44 px : la taille minimale d'une cible tactile recommandée par Apple, 48
   chez Google. En dessous, le doigt manque le bouton — c'est mesurable, pas
   une question de goût.
   ========================================================================== */

@media (max-width: 760px) {

  /* ---------------------------------------------------------- Navigation
     Le défaut le plus répandu : chaque entrée faisait 34×32. La barre est
     déjà en icônes seules à cette taille (voir layout.css) ; il ne manquait
     que la surface. */
  .app-nav-item {
    min-width: 44px; min-height: 44px;
    padding: 0 11px;
    justify-content: center;
  }
  .app-nav { gap: 2px; padding-top: 13px; padding-bottom: 5px; }

  /* Sept entrées à 44 px ne tiennent pas à côté de la cloche et du compte :
     la dernière restait hors champ, sans que rien ne le laisse deviner.
     La barre défile donc — et un dégradé sur son bord droit dit qu'il y a
     une suite, ce qui manquait le plus. Le masque disparaît une fois arrivé
     au bout (scroll-timeline n'étant pas partout, on garde un dégradé fixe :
     discret, et jamais faux au point de gêner). */
  #app-nav { position: relative; }
  #app-nav::after {
    content: ""; position: absolute; right: 96px; top: 0; bottom: 0; width: 26px;
    pointer-events: none; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--void));
  }
  /* Défilement au doigt confortable : chaque entrée s'aligne. */
  .app-nav { scroll-snap-type: x proximity; scrollbar-width: none; }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav-item { scroll-snap-align: center; }

  /* Boutons ronds de la barre du haut : 38 px, juste sous le seuil. */
  .icon-btn { min-width: 42px; min-height: 42px; }
  /* Les petits boutons de rangée (modifier, supprimer…) restent plus
     compacts — ils vivent dans une liste, pas dans une barre — mais
     remontent tout de même au-dessus de la limite du pouce. */
  .icon-btn.small { min-width: 40px; min-height: 40px; }

  /* Bascule 3D / liste sur l'écosystème : 34×34, sous la limite du pouce. */
  .segmented button { width: 40px; height: 40px; }

  /* Le titre de la page servait aussi de bouton (repliage) : 14 px de haut. */
  .brand { min-height: 42px; align-items: center; }
  .brand-sub { font-size: 12px; }

  /* ------------------------------------------------------------- Onglets
     Ceux de la comptabilité débordaient de 102 px : cinq onglets ne tiennent
     pas dans 390 px. Ils défilent désormais latéralement au lieu d'être
     coupés, et le trait dégradé les suit. */
  .admin-tabs, .prebilan-onglets {
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .admin-tabs::-webkit-scrollbar, .prebilan-onglets::-webkit-scrollbar { display: none; }
  .admin-tab, .prebilan-onglet {
    min-height: 44px; flex-shrink: 0; white-space: nowrap;
  }

  /* --------------------------------------------------------- Formulaires
     Sous 16 px, iOS zoome automatiquement au moment de la saisie et la mise
     en page saute. C'est la seule vraie raison de ce seuil précis. */
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 44px; }
  /* Les « petits » boutons vivent dans des barres denses : plus compacts que
     44, jamais sous 40 — en dessous, le doigt manque. */
  .btn.small { min-height: 40px; }

  /* ------------------------------------------------------------- Lisibilité
     Tout ce que le banc a relevé sous 11,5 px. Les libellés en majuscules
     sont les plus pénalisés : ils sont déjà difficiles à lire en petit. */
  .contact-type { font-size: 11.5px; }
  /* Badge d'état d'une option souscrite (« Demande transmise ») : il ne
     s'affiche qu'après souscription, ce qui l'avait fait échapper aux
     premiers relevés. */
  .op-badge { font-size: 11.5px; }
  .audit-etat { font-size: 11.5px; }
  .pil-bloc-titre, .ct-vig-lib { font-size: 12px; }
  /* .msg-bubble .msg-meta est plus spécifique dans messagerie.css : on
     reprend la même chaîne, sinon la règle ne s'applique pas. */
  .msg-bubble .msg-meta, .msg-meta { font-size: 11.5px; }
  /* Métadonnées de la vue liste de l'organigramme (« 1 imm. · 1 appt. »,
     nom du locataire) : c'est l'information de la ligne, pas un ornement. */
  .tree-row .meta, .appart-row .meta, .meta { font-size: 11.5px; }
  .section-title { font-size: 12px; }
  .login-footer code { font-size: 12px; }
  /* Les <small> des vignettes de contrat portaient un style plus spécifique
     que la balise seule : on vise la même spécificité pour l'emporter. */
  small, .ct-vignette small, .form-case small,
  .ct-frise-tete small, .op-panier-lib { font-size: 11.5px; }
  /* Étiquettes DANS les graphiques (SVG) : 9,5 px les rendait décoratives —
     or ce sont elles qui disent ce que la figure représente. */
  .fig-anneau-lib, .st-centre-lib, .st-axe { font-size: 11.5px; }

  /* --------------------------------------------------------- Pilotage
     Quatre blocs de chiffres côte à côte : une colonne sur téléphone. */
  .pil-grille, .verrou-cartes, .stat-grille { grid-template-columns: 1fr; }
  .pil-ligne { font-size: 14px; padding: 8px 0; }
  .audit-resume { gap: 8px; }
  .audit-pastille { flex: 1 1 90px; }

  /* ------------------------------------------------------------ Contacts */
  .contacts-barre { gap: 10px; }
  .contacts-barre .btn { width: 100%; }
  .contacts-filtres { flex-direction: column; align-items: stretch; }
  .contact-puce { min-height: 40px; }

  /* --------------------------------------------------------- Messagerie
     La barre du fil (partager, résoudre, appel, archiver) débordait de
     47 px. Elle défile plutôt que d'être tronquée — « Archiver » est
     précisément l'action qu'on perdait. */
  #thread-toolbar {
    overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
  }
  #thread-toolbar::-webkit-scrollbar { display: none; }
  #thread-toolbar .btn { flex-shrink: 0; }
  .conv-pied-btn { min-height: 44px; }

  /* ------------------------------------------------- Espace du locataire */
  .esp-lien { min-height: 40px; display: inline-flex; align-items: center; }
  .op-filtre { min-height: 40px; }
  /* Les étiquettes des graphiques : 9,5 px les rendait décoratives. */
  .esp-figure text, svg text { font-size: 11px; }

  /* ------------------------------------------------------- Comptabilité */
  .cpt-exercice { min-height: 40px; }
  #cpt-entite, .cpt-barre select { min-height: 40px; }
  #cpt-exercice-libelle { font-size: 12px; }

  /* Statistiques et bilan comptable — défauts restés invisibles tant que ces
     panneaux vivaient derrière un onglet : un élément masqué n'est pas mesuré.
     Le menu « Documents » y mène désormais directement, et ils se voient. */
  #st-organisme, #bl-entite, .bl-selecteurs select { min-height: 44px; }
  .bl-typo-source, .bl-typo-item em { font-size: 11.5px; }
  .bl-lib, .bl-num, .bl-gravite { font-size: 11.5px; }
}

/* Très petits écrans (360 px et moins) : on resserre plutôt que de laisser
   déborder. */
@media (max-width: 380px) {
  .app-nav-item { min-width: 40px; padding: 0 8px; }
  .admin-tab, .prebilan-onglet { padding-left: 12px; padding-right: 12px; }
}