/* ══ Téléphone — en dessous de 760 px ═══════════════════════════════════ Le SEUL endroit où le texte du téléphone se règle, et il n'y a qu'un nombre. Le coefficient multiplie les neuf tokens de l'échelle et la taille des champs (`1-socle.css`), donc absolument tout le texte de l'application suit — y compris les tailles écrites en `style="…"` sur une balise, qu'une règle de feuille de style ne pourrait pas atteindre. Remonter à 1 rend au téléphone les tailles de l'ordinateur ; descendre à .90 resserre encore. Rien d'autre à toucher. 759.98 et non 759 : entre les deux, un écran de 759,5 px — cela arrive avec le zoom du navigateur — ne serait ni téléphone ni tablette, et le texte y reprendrait sa taille pleine sans que la mise en page suive. Le plancher de 13 px annoncé dans `1-socle.css` ne tient plus au téléphone : à .94 le badge tombe à 12,2 px. C'est la décision d'Etienne du 2026-08-24 — la lisibilité des petites mentions cède la place à la densité, sur l'écran où la place manque le plus. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 759.98px){ :root{--fof-echelle-texte:.94;} /* ── LE TEXTE QU'ON SAISIT, AU TÉLÉPHONE ───────────────────────────── Relevé sur la maquette REPETITION_Create_Mobile du 2026-08-27, dont l'échelle est calée sur le titre (qui, lui, tombe pile sur --fof-t-titre-ecran) : elle demande 20,2 px dans un champ contre 14,1 rendus jusqu'ici, et 17,3 pour le libellé au-dessus contre 12,2. 21,5 × 0,94 donne 20,2 ; --fof-t-section rend 17,9, le rôle existant le plus proche à 3 % près. POURQUOI SUR CES DEUX FORMULAIRES ET NON SUR :root — c'est un écart assumé avec la règle du jeton, et il est mesuré. Porté par :root, il vaudrait pour TOUS les champs du téléphone, dont ceux du devis, des clients et de la messagerie, qui ont été composés pour 14,1 px et déborderaient. Chaque écran prend la nouvelle taille quand sa maquette arrive — et pas avant. L'ÉVÈNEMENT L'A REJOINTE le 2026-08-28. Il en était écarté pour une raison précise : sa rangée « Date · Prix de vente · Jauge » réclamait alors plus large que l'écran. Cette rangée n'existe plus — le formulaire se parcourt en quatre étapes, sur une seule colonne. Et sa maquette demande exactement la même taille que celle de la répétition : le mot « Concert » y mesure 190 unités de large pour une largeur de 318 à 100 px dans League Spartan, soit 59,7 unités de corps, soit 19,9 px à l'écran. 21,5 × 0,94 en rend 20,2, à 1,5 % près. Ce qui vient avec, sans rien écrire de plus : sous 16 px, Safari iOS ZOOME sur un champ au moment de la saisie ; à 20,2 px il ne le fait plus. Et la note (`.fof-grow`) lit --fof-field-size depuis le 2026-08-27, elle suit donc les autres champs. L'ordinateur n'est pas concerné : il rend déjà 18,75 px (15 × 1,25), et les champs de la maquette bureau sont un copier-coller de la maquette mobile, à l'échelle du téléphone — ils ne disent rien de plus. */ .fof-rf-form, .fof-ef-form{--fof-field-size:calc(21.5px * var(--fof-echelle-texte));} /* ── Date et Heure : une PROPORTION, jamais le contenu ──────────────── Les deux maquettes les dessinent égales, mais elles y écrivent « --/--/---- » ; le navigateur, lui, écrit « jj/mm/aaaa », plus large — 164 px mesurés à cette taille, contre les 155 d'une demi-colonne. La date prend donc un peu plus, et l'heure le reste. CE QUI ÉTAIT ÉCRIT ICI, ET POURQUOI C'ÉTAIT FAUX (corrigé le 2026-08-28, Etienne l'a vu sur son téléphone) : la première colonne était en `auto`, c'est-à-dire « la largeur de ce que le champ contient ». Or ce que contient un champ de date VIDE ne dépend pas de nous : chaque navigateur le dessine à sa façon, et plusieurs le rendent bien plus étroit tant qu'aucune date n'est saisie. La colonne se rétractait, la rangée entière se décalait à gauche, puis se remettait en place dès la première saisie. Sur Chrome de bureau on ne voyait rien. Une PROPORTION ne pose pas cette question : 1,15 pour 1 rend 166 et 145 sur un téléphone de 375 px — la même image qu'avant, mais vide comme remplie, et sur tous les navigateurs. Le petit calendrier que Chrome pose dans le champ est retiré sur les DEUX écrans : la maquette ne le montre pas, et au doigt il ne sert à rien — toucher le champ ouvre déjà le calendrier du téléphone. Il reste en place sur ordinateur, où il est la seule cible pour l'ouvrir. */ .fof-rf-duo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);} .fof-rf-duo input[type="date"]::-webkit-calendar-picker-indicator{display:none;} } /* ══ Téléphone — mise en page ═══════════════════════════════════════════ Le bloc du dessus ne règle que le texte ; ici, ce que la largeur seule oblige à reprendre. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 759.98px){ /* Boîte mail : les lignes de la liste serrent leurs côtés — 8 px au lieu de 14 (demande d'Etienne du 2026-08-24). Douze pixels de plus pour l'expéditeur, l'objet et l'extrait, là où la place manque le plus. Le retrait de la page (20 px) et le filet du bloc ne bougent pas : ils sont partagés avec tous les autres écrans. */ .fof-ml-row{padding:calc(12 * var(--fof-px)) calc(8 * var(--fof-px));} } /* ══ Tablette — à partir de 760 px ══════════════════════════════════════ */ @media (min-width: 760px){ .fof-header{gap:calc(22 * var(--fof-px));padding:calc(10 * var(--fof-px)) calc(20 * var(--fof-px));} .fof-main{padding:calc(22 * var(--fof-px)) calc(24 * var(--fof-px));padding-bottom:calc(110 * var(--fof-px) + env(safe-area-inset-bottom));} .lbl-full{display:inline;} .lbl-short{display:none;} /* La fiche client n'a PLUS de traitement propre à la tablette. Elle était un panneau latéral de 560 px collé à droite, hérité de l'époque où elle était une fenêtre flottante ; c'était la seule vue de l'application à ne pas prendre tout l'écran en dessous de 1101 px, et cela se voyait (constat d'Etienne, 2026-08-24). Elle suit maintenant la règle commune du mode mobile — plein écran, glissé d'un bord à l'autre — comme la fiche d'une date, la lecture d'un mail et les formulaires. Sa forme de bureau (carte centrée de 1040 px) reste déclarée dans la grande media query. */ .fof-login-card{width:50vw;min-width:calc(420 * var(--fof-px));padding:calc(40 * var(--fof-px)) calc(36 * var(--fof-px));} .fof-search{flex:0 0 calc(280 * var(--fof-px));} .ed-form-grid{grid-template-columns:1fr 1fr;} .fof-ed-pane{padding:calc(20 * var(--fof-px)) calc(18 * var(--fof-px));} /* Agenda : le titre et les actions tiennent sur une seule ligne. */ .fof-ag-head{flex-direction:row;align-items:center;justify-content:space-between;} /* La taille du titre ne s'écrit plus ici. Ces 30 px existaient parce que le rôle générique --fof-t-ecran (24) était trop petit pour l'Agenda : le téléphone se rattrapait à part. Depuis que le titre lit --fof-t-titre-ecran, la valeur est bonne dès la règle de base et cette ligne ne faisait plus que la rapetisser. */ .fof-ag-head-actions > *{flex:0 0 auto;} .fof-seg-page{max-width:calc(520 * var(--fof-px));} .fof-ag-next{padding:calc(24 * var(--fof-px));} .fof-ag-row{padding:calc(12 * var(--fof-px)) calc(18 * var(--fof-px));} } /* ══ Téléphone et tablette — la navigation en VUES PLEIN ÉCRAN ══════════ Sous 1101 px, ouvrir une fiche n'est pas « poser une fenêtre sur l'écran » mais AVANCER d'un écran : la vue courante s'efface vers la gauche pendant que la nouvelle entre par la droite, et le retour rejoue l'inverse. Le mouvement n'est pas inventé ici : c'est celui de la barre latérale qui se déploie sur ordinateur, à la lettre — même durée (`--fof-rail-dur`), même courbe (`--fof-rail-ease`). Une seule main tient donc les deux animations de l'application, et les régler revient à changer deux valeurs dans `1-socle.css`. Trois classes suffisent, et le gabarit les pose depuis UNE seule table : `NAV_SCREENS` dans `08-navigation.js`, elle-même lue dans l'ordre déjà déclaré par `_backLayers()`. Une vue plein écran ajoutée demain hérite du glissé en s'inscrivant dans cette liste — il n'y a rien à écrire ici. • is-navin la vue qui arrive • is-navout la vue qui s'en va • is-navunder celle qui reste dessous Rien de tout cela ne franchit 1101 px : sur ordinateur les fenêtres restent des cartes centrées, et la barre latérale garde le mouvement pour elle seule. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 1100.98px){ .is-navin{animation:navIn var(--fof-rail-dur) var(--fof-rail-ease);} /* `forwards` : la vue sortie RESTE dehors le temps que la logique la referme pour de bon (elle attend la fin du glissé avant de changer d'état). Sans cela elle reviendrait d'un bond à sa place, visible une dernière image avant de disparaître. */ .is-navout{animation:navOut var(--fof-rail-dur) var(--fof-rail-ease) forwards;} .is-navunder{transform:translateX(calc(-1 * var(--fof-nav-shift)));} /* Les surfaces qui participent au parcours. La transition est portée par leur classe de BASE, jamais par `is-navunder` : une transition n'existe que si elle est déclarée dans les deux états — posée sur le seul état décalé, la vue glisserait à l'aller et reviendrait d'un bond au retour. */ .fof-main, .fof-agenda-panel.is-sheet, .fof-mv, .fof-modal-overlay.is-fullpage, .fof-ed-shell, .fof-slmod, .fof-stage{transition:transform var(--fof-rail-dur) var(--fof-rail-ease);} /* La fiche client a une raison de plus de bouger : recouverte par la fenêtre d'évènement, elle s'efface (`is-behind`, feuille 2). Cet effacement attend la fin du glissé, sinon la fiche disparaîtrait au premier pas au lieu de s'en aller. Au retour, aucun délai — elle doit être là avant même de commencer à revenir. Même parti pris que la liste de l'Agenda, juste en dessous. */ .fof-drawer-overlay{transition:transform var(--fof-rail-dur) var(--fof-rail-ease), visibility 0s;} .fof-drawer-overlay.is-behind{transition:transform var(--fof-rail-dur) var(--fof-rail-ease), visibility 0s var(--fof-rail-dur);} /* ── Les deux écrans dont la vue de dessus vit DANS
──────────── La fiche de la date (`.fof-agenda-panel.is-sheet`) et la lecture d'un message (`.fof-mv`) sont des `position:fixed` posés à l'intérieur de
. Transformer
les recalerait SUR LUI : ils cesseraient d'être collés à l'écran et suivraient le défilement de la page. C'est donc le contenu de l'écran qui glisse, pas
— d'où ces deux listes plutôt que la classe commune. `08-navigation.js` le sait : `_navPageUnder()` retire `is-navunder` à
dans ces deux cas. */ .fof-ag4-top,.fof-ag4-seg,.fof-ag4-search,.fof-agenda-list, .fof-mail-seg-page,.fof-mail-main > *{ transition:transform var(--fof-rail-dur) var(--fof-rail-ease);} .fof-main.is-agsheet .fof-ag4-top, .fof-main.is-agsheet .fof-ag4-seg, .fof-main.is-agsheet .fof-ag4-search, .fof-main.is-agsheet .fof-agenda-list, .fof-main.is-mailview .fof-mail-top, .fof-main.is-mailview .fof-mail-seg-page, .fof-main.is-mailview .fof-ag-search, .fof-main.is-mailview .fof-mail-main > :not(.fof-mv){ transform:translateX(calc(-1 * var(--fof-nav-shift)));} /* La liste de l'Agenda sort du parcours clavier une fois le glissé FINI : `visibility:hidden` (feuille 4) posé dès le premier pas couperait le mouvement net. Le retard vaut la durée du glissé à l'aller, et rien au retour — la liste doit être là avant même de commencer à revenir. */ .fof-ag4-top,.fof-ag4-seg,.fof-ag4-search,.fof-agenda-list, .fof-mail-main > *{ transition:transform var(--fof-rail-dur) var(--fof-rail-ease),visibility 0s;} .fof-main.is-agsheet .fof-ag4-top, .fof-main.is-agsheet .fof-ag4-seg, .fof-main.is-agsheet .fof-ag4-search, .fof-main.is-agsheet .fof-agenda-list, .fof-main.is-mailview .fof-mail-main > :not(.fof-mv){ transition:transform var(--fof-rail-dur) var(--fof-rail-ease), visibility 0s var(--fof-rail-dur);} /* La liste des messages reste MONTÉE pendant la lecture — c'est ce qui lui garde sa place — mais elle est retirée du parcours clavier et des lecteurs d'écran, comme celle de l'Agenda et pour la même raison. */ .fof-main.is-mailview .fof-mail-main > :not(.fof-mv){visibility:hidden;} /* ── Plus de croix de fermeture sur une vue plein écran ─────────────── Ce n'est plus une fenêtre posée sur un écran, c'est un écran de plus dans le parcours : on en sort par le retour du téléphone, par le geste, ou par « Annuler » — jamais par une croix, qui laissait croire qu'on refermait un objet flottant. Au-delà de 1101 px la règle ne s'applique pas : la croix y est à sa place et y reste. LE `div` N'EST PAS UN DÉTAIL. La règle visait « le seul `.fof-icon-btn` de ces fenêtres », ce qui était vrai quand elle a été écrite. Ça ne l'est plus : l'écran d'évènement en porte trois autres — le « + » et la corbeille de chaque ligne de road map, et la corbeille du pied depuis le 2026-08-28 — que les maquettes du téléphone montrent toutes. Les croix sont écrites en `div role="button"`, les actions en `