/* Waribiz — ce qui sépare une page web d'une application (gf-mobile.css).

   Demandé le 23/09 : « je veux que l'expérience mobile soit vraiment comme une
   vraie app mobile ». Une application installée ne rebondit pas quand on tire
   vers le bas, ne surligne pas en bleu ce qu'on touche, ne zoome pas tout seul
   quand on écrit, et ne laisse pas la barre du bas passer sous le menu du
   téléphone. Chacune de ces règles corrige un de ces écarts.

   Rien ici n'est décoratif : ce sont les gestes du système, rendus au système. */

/* ---- Le rebond et le « tirer pour rafraîchir » du navigateur ----------------
   Sur Android, tirer vers le bas en haut d'une liste recharge la page : tout le
   travail en cours est perdu. Une application ne fait pas ça. `contain` garde
   le défilement à l'intérieur de l'application. */
html, body {
  overscroll-behavior-y: contain;
  /* La barre d'adresse des navigateurs mobiles change de hauteur : `dvh` suit ce
     mouvement, `vh` non — d'où les blancs en bas de page. */
  min-height: 100dvh;
}

/* ---- Le voile bleu au toucher ----------------------------------------------
   Android pose un rectangle translucide sur tout ce qu'on touche. Aucune
   application native ne fait ça ; nos boutons ont déjà leur état actif. */
html {
  -webkit-tap-highlight-color: transparent;
}

/* ---- Le délai de 300 ms et le zoom par double tape --------------------------
   Sans `manipulation`, le navigateur attend de voir si un second tap arrive
   avant de déclencher le premier : chaque bouton répond avec un retard qu'on
   sent très bien. */
button, a, [role="button"], input, select, textarea, label, .nav-item, .bottom-nav * {
  touch-action: manipulation;
}

/* ---- La sélection de texte au long appui -----------------------------------
   Un appui long sur un bouton ne doit pas sélectionner son libellé ni ouvrir le
   menu « Copier ». Le contenu, lui, reste sélectionnable : c'est du texte que
   les gens veulent vraiment copier. */
button, .nav-item, .bottom-nav, .gf-sg-head, .gf-ot-head, .settings-card-heading,
.gf-hb-tile, .gf-co-react, .gf-sg-tab, .filter-pills, .gf-badge {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
p, h1, h2, h3, li, td, .gf-co-body, .gf-bubble, [data-exact], .nombre {
  -webkit-user-select: text;
  user-select: text;
}

/* ---- Le zoom automatique sur les champs, sur iPhone -------------------------
   Safari zoome sur tout champ dont le texte fait moins de 16 px, et ne
   dézoome jamais complètement : la page reste de travers jusqu'au rechargement.
   La seule parade est de ne pas descendre sous 16 px. On ne touche qu'aux
   champs de saisie, pas au reste de la typographie. */
@media (max-width: 860px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ---- Les zones réservées au système ----------------------------------------
   L'encoche en haut, la barre de gestes en bas. La barre de navigation les
   ignorait : ses libellés passaient sous la barre du téléphone. */
@media (max-width: 1023px) {
  .bottom-nav {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
  }
  /* Ce qui défile doit pouvoir passer **sous** la barre, sinon la dernière
     carte reste inaccessible. */
  .page-wrap {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Tirer pour rafraîchir, le nôtre ---------------------------------------
   Celui du navigateur recharge tout ; celui-ci redemande simplement les données
   de l'écran ouvert. L'indicateur descend avec le doigt et tourne pendant la
   requête. */
.gf-ptr {
  position: absolute; top: 0; left: 50%; z-index: 4;
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-left: -17px;
  border-radius: 50%;
  background: var(--surface); color: var(--violet);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-40px);
  pointer-events: none;
}
.gf-ptr svg { width: 18px; height: 18px }
.gf-ptr.is-armed { color: var(--violet-dark) }
.gf-ptr.is-loading svg { animation: gf-ptr-spin .7s linear infinite }
@keyframes gf-ptr-spin { to { transform: rotate(360deg) } }

/* ---- Le retour tactile ------------------------------------------------------
   Un bouton qui ne bouge pas sous le doigt donne l'impression que rien ne s'est
   passé. 60 ms d'enfoncement suffisent à faire la différence. */
@media (hover: none) {
  button:active, .nav-item:active, .gf-hb-tile:active, .gf-co-react:active {
    transform: scale(.97);
    transition: transform .06s ease-out;
  }
  .bottom-nav .bottom-add:active { transform: scale(.93) }
}