/* =============================================================================
   ALLURE D'APPLICATION SUR TÉLÉPHONE
   =============================================================================

   Ce que cette feuille fait, et surtout ce qu'elle ne fait pas.

   ELLE NE REFAIT AUCUNE PAGE. Pas un écran réécrit, pas une fonction déplacée,
   pas une information retirée. Elle rhabille ce qui existe déjà, et rien d'autre.
   Retirer le crochet qui l'injecte rend instantanément l'apparence d'origine.

   TOUT VIT DANS UNE SEULE RÈGLE DE LARGEUR. Au-delà de 1023 pixels, pas une
   déclaration ne s'applique : l'ordinateur du gérant ne change pas d'un pixel.

   CE QUI SÉPARE UNE APPLICATION D'UN SITE RÉTRÉCI, et que cette feuille corrige :

     1. les marges. Un site respire, une application occupe l'écran. Sur 390 pixels,
        24 de marge de chaque côté, c'est 12 % de la largeur perdue ;
     2. la taille des cibles. Le doigt n'est pas un curseur : sous 44 pixels, on rate ;
     3. le zoom d'iOS. Safari zoome la page dès qu'on touche un champ de moins de
        16 pixels, et ne dézoome jamais. C'est LE détail qui fait dire « c'est un
        site » à quelqu'un qui ne saurait pas l'expliquer ;
     4. les fenêtres. Une modale centrée est un geste d'ordinateur ; sur téléphone,
        un panneau monte du bas, sous le pouce ;
     5. l'en-tête. Sur un écran de 800 pixels de haut, un titre de 60 pixels mange
        ce qu'on est venu lire.
   ========================================================================== */

@media (max-width: 1023px) {

  /* --- 1. LES MARGES : rendre la largeur au contenu -------------------- */

  .fi-main {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    padding-top: 0.85rem !important;
    max-width: 100% !important;
  }

  /* Les cartes vont d'un bord à l'autre, comme une liste d'application, et se
     distinguent par un filet plutôt que par du vide autour. */
  .fi-section {
    border-radius: 14px !important;
  }

  /* --- 2. L'EN-TÊTE : compact, pour laisser voir le contenu ------------ */

  .fi-topbar {
    padding-top: env(safe-area-inset-top);
  }

  .fi-header-heading {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
  }

  .fi-header-subheading {
    font-size: 0.86rem !important;
  }

  /* Le fil d'Ariane est une aide de bureau : sur téléphone, la barre du bas et le
     bouton retour du système disent déjà où l'on est. */
  .fi-breadcrumbs {
    display: none !important;
  }

  /* --- 3. LES CIBLES : ce que le pouce doit pouvoir atteindre ---------- */

  .fi-btn {
    min-height: 44px !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  .fi-icon-btn {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Les actions d'en-tête de page passent pleine largeur et se posent l'une sous
     l'autre : deux boutons côte à côte sur 390 pixels sont deux boutons trop
     étroits, chacun avec son libellé coupé. */
  .fi-header .fi-ac {
    width: 100%;
  }

  .fi-header .fi-ac .fi-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* --- 4. LES CHAMPS : empêcher le zoom d'iOS -------------------------- */

  /* 16 pixels est le seuil EXACT sous lequel Safari zoome à la mise au point, et
     il ne revient jamais en arrière : la page reste agrandie, décalée, et
     l'utilisateur croit avoir cassé quelque chose. Aucun réglage de la balise
     viewport ne l'évite sans interdire aussi le zoom manuel, ce qui serait un
     recul d'accessibilité. La seule parade honnête est la taille du texte. */
  .fi-input,
  .fi-select-input,
  textarea.fi-input,
  .fi-fo-field-wrp input,
  .fi-fo-field-wrp textarea,
  .fi-fo-field-wrp select {
    font-size: 16px !important;
  }

  .fi-input-wrp {
    min-height: 46px;
  }

  /* --- 5. LES FENÊTRES : un panneau qui monte, pas une boîte centrée --- */

  .fi-modal-window {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92dvh;
  }

  /* La fenêtre se colle en bas de l'écran. `align-items` sur le conteneur suffit :
     on ne touche ni au fonctionnement de la modale, ni à sa fermeture. */
  .fi-modal > .fi-modal-close-overlay + div,
  .fi-modal-content-ctn {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Les boutons d'une fenêtre : pleine largeur, l'action principale en premier
     sous le pouce. */
  .fi-modal-footer-actions {
    flex-direction: column-reverse !important;
    width: 100%;
  }

  .fi-modal-footer-actions .fi-btn {
    width: 100% !important;
    justify-content: center;
  }

  /* --- 6. LES LISTES : de l'air entre les lignes ----------------------- */

  /* Les tableaux de l'espace adhérent sont déjà empilés en cartes sur téléphone
     (Split + Stack) : il ne reste qu'à leur donner une hauteur de ligne qui se
     touche sans viser. */
  .fi-ta-row {
    min-height: 56px;
  }

  .fi-ta-ctn {
    border-radius: 14px !important;
  }

  /* --- 7. CE QUI N'A PAS DE SENS SOUS LE POUCE ------------------------- */

  /* La pagination « 10 · 25 · 50 par page » est un réglage de bureau : sur
     téléphone on fait défiler. Les flèches, elles, restent. */
  .fi-pagination-records-per-page-select {
    display: none !important;
  }

  /* --- 8. LE CONFORT GÉNÉRAL ------------------------------------------ */

  /* Le rebond élastique d'iOS sous une barre fixe laisse voir le fond du
     navigateur : on l'ancre. */
  .fi-body {
    overscroll-behavior-y: none;
  }

  /* Le halo bleu de la pression tactile, remplacé par les états déjà définis. */
  a, button, .fi-btn, .fi-ta-row {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Un écran très étroit (moins de 380 pixels) : on resserre encore, sans jamais
   descendre sous les seuils de lisibilité fixés plus haut. */
@media (max-width: 379px) {
  .fi-main {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  .fi-header-heading {
    font-size: 1.25rem !important;
  }
}