/* ============================================================================ OMEX — FEUILLE TRANSVERSE Les quelques règles qui doivent tenir dans TOUTES les applications, et se corriger à UN SEUL endroit. Écrite le 27/08/2026 sur ordre du DDO, après cette mesure : le groupe fait tourner TREIZE applications, et une correction posée dans la charte commune n'en atteignait QU'UNE. Les douze autres portent 15 081 lignes de style recopiées, chacune dérivant de son côté. --------------------------------------------------------------------------- CE QUI A DÉCLENCHÉ CE FICHIER, ET QUI EST UNE HISTOIRE VRAIE --------------------------------------------------------------------------- Le 26/08, Jonathan CECCARINI ouvre l'ERP sur son téléphone et signale que la barre du haut d'OBTENIR déborde. En cherchant la cause, on découvre que cette barre existe en QUATRE exemplaires indépendants — cockpit DAF, Obtenir, Logistique, Gérer un projet. Deux avaient reçu leurs règles téléphone, deux non. Il a donc fallu poser QUATRE FOIS la même correction. Et le 27/08 au matin, la quatrième a été effacée dans les minutes suivantes par une autre session qui reposait son propre exemplaire. Ce fichier existe pour que la cinquième fois n'arrive pas. --------------------------------------------------------------------------- COMMENT IL S'EMPLOIE — ET POURQUOI DANS CET ORDRE --------------------------------------------------------------------------- Il se charge EN DERNIER, après le style propre de l'application : L'ordre est tout le mécanisme. À spécificité égale, c'est la dernière règle écrite qui gagne : posé en dernier, ce fichier l'emporte sur les copies locales sans qu'on ait à écrire un seul « !important ». ⚠ ON N'Y MET PAS LE DESIGN DES APPLICATIONS. Chacune garde ses couleurs, ses tailles, ses composants — c'est leur affaire, et vouloir tout unifier d'un coup casserait douze écrans. On n'y met QUE ce qui doit être vrai partout : ce qui empêche un écran de devenir inutilisable. Une règle n'entre ici que si elle passe ce test : « son absence rend-elle un écran inutilisable pour quelqu'un ? » Si la réponse est non, elle reste chez l'application. L'URL est ABSOLUE (« /design/… ») : les applications sont montées dans l'ERP sous un préfixe, et une URL relative chercherait la feuille sous ce préfixe au lieu de la racine. Vérifié le 27/08 : l'ERP sert /design/ sans demander d'identifiants, en text/css. ========================================================================= */ /* --------------------------------------------------------------------------- 1. AUCUNE PAGE NE DÉFILE EN LARGEUR SUR UN TÉLÉPHONE --------------------------------------------------------------------------- Un défilement horizontal sur téléphone n'est jamais voulu : il cache la moitié de l'écran et personne ne pense à tirer sur le côté. Les tableaux larges, eux, gardent leur propre conteneur qui défile — c'est la différence entre « la page part en travers » et « ce tableau-ci se fait glisser ». */ @media (max-width: 640px) { html, body { overflow-x: hidden; } } /* --------------------------------------------------------------------------- 2. AUCUNE GRILLE NE REFUSE DE RÉTRÉCIR --------------------------------------------------------------------------- Le défaut trouvé le 26/08 sur l'écran « Choisir une société » : une piste de grille dont le minimum est une valeur FIXE ne peut pas descendre en dessous, même quand l'écran est plus étroit — la grille dépasse alors son conteneur. La forme sûre est minmax(min(330px, 100%), 1fr), mais elle doit être écrite grille par grille. Ici on pose le filet : sous 640px, toute grille repasse sur une colonne. Une application qui veut deux colonnes sur téléphone le dit après, dans son propre style. */ @media (max-width: 640px) { .soc-grid, .bu-grid, .kpi-grid, .po-grid, .fgrid, .entity-mini-grid { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- 3. LA BARRE DU HAUT TIENT SUR UN TÉLÉPHONE --------------------------------------------------------------------------- LE défaut de Jonathan, celui qui a coûté quatre corrections identiques. .topbar est une rangée flexible SANS retour à la ligne : ses éléments, faute de place, se compriment jusqu'à la largeur d'un mot — le titre se hache sur quatre lignes — puis ce qui reste sort de l'écran. L'ordre des gestes compte : on RETIRE d'abord ce qui n'est pas indispensable (le sous-titre du processus), on RÉDUIT ensuite, et le retour à la ligne n'est que le dernier recours — une barre collante qui s'empile sur trois lignes mange tout l'écran d'un téléphone. */ @media (max-width: 640px) { .topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; row-gap: 6px; } .topbar-spacer { flex: 1 1 auto; } .brand-badge { width: 30px; height: 30px; } .brand-text b { font-size: var(--fs-sm, 14px); white-space: nowrap; } .brand-text span { display: none; } .chip { font-size: 11px; padding: 2px 7px; } /* 44 px ici AUSSI : c'est sur telephone que le seuil compte le plus, et cette ligne annulait la regle de base par sa specificite (0-1-0 contre :where a 0). */ .icon-btn { min-width: 44px; min-height: 44px; } /* Le sélecteur de périmètre reste LISIBLE : c'est lui qui dit de quelle société sont les chiffres affichés. On ne le rogne pas — on lui donne une ligne entière plutôt que de le couper. Un chiffre dont on ne sait plus à quelle entité il appartient est pire qu'un chiffre absent. */ .perim { flex: 1 0 100%; justify-content: flex-start; } .perim-btns { flex-wrap: wrap; } } /* --------------------------------------------------------------------------- 4. UN PARAGRAPHE N'EST PAS UNE RANGÉE D'ÉLÉMENTS --------------------------------------------------------------------------- Trouvé le 26/08 sur l'encart bleu « Périmètre : … » d'Obtenir, puis retrouvé à l'identique dans Gérer un projet. Mis en display:flex, un texte courant voit CHAQUE morceau devenir un élément séparé : le du nom d'entité devient un bloc indivisible, et la phrase ne peut plus se recomposer. Elle s'empile en colonne étroite et sort de l'écran. Un texte se met en block : il coule et revient à la ligne tout seul. */ .perim-note { display: block; line-height: 1.45; } /* --------------------------------------------------------------------------- 5. LES CHAMPS DE SAISIE NE DÉCLENCHENT PAS LE ZOOM SUR iPHONE --------------------------------------------------------------------------- Sous 16 pixels, iOS agrandit la page dès qu'on touche un champ — et ne la remet jamais comme elle était. L'utilisateur se retrouve dans un écran décalé sans comprendre pourquoi. La hauteur minimale de 44 pixels est l'autre moitié du sujet : plus bas, on vise le champ au doigt sans l'atteindre. */ @media (max-width: 640px) { input, select, textarea { font-size: 16px; } input:not([type="checkbox"]):not([type="radio"]), select, textarea, button { min-height: 44px; } } /* --------------------------------------------------------------------------- 6. LES IMAGES ET LES SVG NE DÉBORDENT PAS --------------------------------------------------------------------------- Un QR code posé en largeur fixe déborde d'un écran étroit et perd un de ses coins — donc il ne se lit plus. C'est arrivé le 26/08 sur l'écran d'enrôlement, trouvé par Jonathan : le code était généré à taille fixe et coupé à l'affichage. */ img, svg, canvas, video { max-width: 100%; height: auto; } /* --------------------------------------------------------------------------- 7. LA COLONNE DE GAUCHE SE TIENT TOUTE SEULE --------------------------------------------------------------------------- Signalé par le DDO le 31/08/2026 sur Piloter : « il faut descendre très bas sur la barre de gauche pour cliquer sur certains éléments, et quand on clique sur les derniers on ne voit pas ce qui est ouvert car on est trop bas ». Les deux symptômes n'en font qu'un. `.nav-col` est en position:sticky (top:74px), mais RIEN NE BORNE SA HAUTEUR. Or une colonne collante plus haute que la fenêtre ne peut pas coller : le navigateur doit d'abord faire défiler toute la PAGE pour en montrer le bas. On arrive donc au dernier chapitre en ayant emmené le panneau de droite hors de l'écran. Mesuré le 31/08 sur les quatre entités, colonne de Piloter : SYN 34 lignes, 7 blocs -> 1474 px dépasse de 484 px en 1080 SAS 24 lignes, 6 blocs -> 1086 px dépasse de 96 px MAINT 23 lignes, 6 blocs -> 1052 px dépasse de 62 px NBVO 22 lignes, 6 blocs -> 1018 px dépasse de 28 px Les quatre dépassent : 796 px de page à faire défiler sur un portable 768. ⚠ CETTE RÈGLE A ÉTÉ POSÉE UNE PREMIÈRE FOIS À 08h45, ET ELLE A CASSÉ L'ÉCRAN. Il y manquait `flex-shrink: 0`. `.nav-col` est un conteneur FLEX : quand on borne sa hauteur, ses enfants — qui valent `flex-shrink: 1` par défaut — se font COMPRIMER pour tenir dedans, au lieu de déborder dans l'ascenseur. Chaque `.nav-block` était donc écrasé et son contenu coupé : « Système documentaire 7 » n'affichait plus qu'un item, « Formation » et « Archives » étaient vides. Le DDO n'avait plus accès à ses chapitres. Retour arrière à 09h18, correction éprouvée à l'écran avant de reposer. Les trois lignes vont ensemble, et aucune ne se retire seule : - `max-height` : sans elle, sticky ne colle pas ; - `overflow-y` : sans elle, on COUPE au lieu de rendre atteignable ; - `flex-shrink:0`: sans elle, on ÉCRASE au lieu de faire déborder. Posée ICI et non dans piloter.html à dessein : `.shell` / `.nav-col` est la charpente du cockpit, partagée par tout écran à colonne de gauche. Deux précautions : - SEULEMENT au-dessus de 980 px : en dessous, `_omex_style.css` transforme la colonne en barre horizontale à défilement interne. La borner là casserait ce travail-là. - `overscroll-behavior: contain` : arrivé au bout de la colonne, la molette ne se met pas à faire défiler la page derrière. */ .nav-col { --colonne-haut: 74px; } @media (min-width: 981px) { .nav-col { max-height: calc(100vh - var(--colonne-haut) - 20px); max-height: calc(100dvh - var(--colonne-haut) - 20px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; /* l'ascenseur ne vient pas mordre sur le texte */ } /* LA ligne qui manquait le 31/08 à 08h45. Voir l'avertissement ci-dessus. */ .nav-col > * { flex-shrink: 0; } } /* ============================================================================ CIBLES TACTILES : 44 px, PARTOUT ---------------------------------------------------------------------------- Demande du DDO du 14/09/2026 : « je veux que les regles s'appliquent aussi sur PC ». Apple et Google recommandent le meme chiffre, 44 px, et pour la meme raison : en dessous, on rate la cible. Mesure du parc ce jour-la : 43 cibles sous le seuil dans 11 applications, la plus petite a 16 px. POURQUOI ICI ET PAS DANS LA CHARPENTE. La charpente est en :where(), specificite zero : elle propose, l'application dispose. Ici on veut une regle qui TIENNE contre les `.btn { height: 38px }` des applications. La transverse est servie APRES leur style : a specificite egale, elle gagne. min-height, jamais height : une cible deja plus grande garde sa taille. On pose un plancher, on ne redessine pas. align-items: center est indispensable : sans lui, un bouton dont la hauteur est imposee garde son texte colle en haut. NE SONT PAS VISEES ICI les variantes volontairement petites (.btn.sm, .btn-min, .pill, .btn.petit) : les forcer a 44 px ferait gonfler des lignes de tableau denses. Pour celles-la, la bonne reponse est d'agrandir la zone cliquable sans toucher a l'apparence — geste separe, soumis au DDO. ========================================================================== */ .btn, .icon-btn, .navitem { min-height: 44px; display: inline-flex; align-items: center; } .icon-btn { min-width: 44px; justify-content: center; }