/* ============================================================ Mobile : barre basse, cartes mobile.css · lignes 581-fin du fichier d'origine ============================================================ */ /* ===== MOBILE : barre de navigation basse + cartes ===== */ .tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface); border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(0,0,0,.06); padding-bottom:env(safe-area-inset-bottom,0)} .tabbar-inner{display:flex} .tabitem{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px; font-size:10.5px;font-weight:700;color:var(--ink-faint);background:none;position:relative} .tabitem .ti{font-size:19px;line-height:1} .tabitem.on{color:var(--accent)} .tabitem.on::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2.5px;background:var(--accent);border-radius:0 0 3px 3px} .tabitem .dot{position:absolute;top:6px;right:26%;min-width:15px;height:15px;border-radius:9px;background:var(--bad); color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;padding:0 3px} /* listes en cartes (remplacent les tableaux sur mobile) */ .mcards{display:grid;gap:10px} .mcard{border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:13px 14px;box-shadow:var(--shadow)} .mcard:active{transform:scale(.995)} .mc-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap} /* ⚠️ SANS CE `flex:1`, LE POUSSOIR NE POUSSE RIEN. `.spacer` n'est pas une règle globale : chaque conteneur déclare la sienne (`.page-head .spacer`, `.panel-head .spacer`…). Dix-sept cartes mobiles posaient un `.spacer` entre le titre et le statut en croyant le renvoyer à droite ; il ne faisait rien, et le statut restait collé au libellé, à une distance différente sur chaque carte selon la longueur du texte. Vu le 19/09/2026 (« remets un peu d'ordre au niveau des statuts »). */ .mc-top .spacer{flex:1} .mc-title{font-weight:800;font-size:15px;letter-spacing:-.2px} /* ⚠️ UN NOM LONG POUSSAIT L'AVATAR SUR SA PROPRE LIGNE. Sans `min-width:0`, un élément flex refuse de devenir plus étroit que son plus long MOT : « Jordane Bettina Vandekasteele Ciappina » réclamait toute la largeur, donc passait à la ligne en entier — l'avatar restait seul en haut, l'étiquette atterrissait en dessous à gauche, et la carte faisait trois lignes de bandeau. Avec une base de 140 px, le nom se replie SUR LUI-MÊME à côté de l'avatar, et ce n'est que sous 140 px d'espace utile que l'étiquette descend. Demandé le 20/09/2026. */ .mc-title{flex:1 1 140px;min-width:0;overflow-wrap:anywhere} /* ⚠️ L'ÉTIQUETTE EST À DROITE, QU'ELLE SOIT SUR LA LIGNE DU NOM OU DESSOUS. Renvoyée à droite par le seul `.spacer`, elle repartait à gauche dès qu'elle changeait de ligne — sous l'avatar, comme si elle lui appartenait. */ .mc-top > .tag{margin-left:auto} .mc-top{align-items:flex-start;row-gap:5px} .mc-top .avatar{flex:0 0 auto;margin-top:1px} .mc-sub{color:var(--ink-soft);font-size:12.5px} .mc-rows{display:grid;gap:5px;margin-top:9px;font-size:12.5px} .mc-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start} .mc-row span:first-child{color:var(--ink-faint)} /* ⚠️ UN STATUT NE DÉPLACE JAMAIS UN MONTANT — RÈGLE GÉNÉRALE. « Accepté » fait sept signes, « Espace consulté 85 fois, la dernière le 19 sept. à 00:56 » en fait cinquante-six. Tant que l'étiquette et le chiffre partagent une ligne qui se replie, la position du chiffre dépend de ce que le client a fait — il saute d'une carte à l'autre, et l'œil ne peut plus les comparer en descendant la page. Ici, le libellé prend la place restante et la VALEUR est ancrée à droite : elle ne bouge pas, quoi qu'on mette en face. Et quand plusieurs étiquettes occupent la même valeur, elles passent l'une SOUS l'autre, toujours calées à droite. Demandé le 19/09/2026 : « les montants doivent toujours se trouver au même endroit ». */ .mc-row > span:first-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere} .mc-row > span:last-child{flex:0 1 auto;display:inline-flex;flex-wrap:wrap;gap:4px; justify-content:flex-end;align-items:center;text-align:right} .mc-act{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap} .mc-act .btn{flex:1;min-width:110px} /* écran « ma journée » */ .today-hero{background:linear-gradient(135deg,var(--accent),var(--accent-fonce));color:#fff;border-radius:16px;padding:18px;margin-bottom:14px} .today-hero .lab{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700} .today-hero h3{font-size:20px;margin:6px 0 2px;font-weight:800} .today-hero .adr{font-size:13px;opacity:.9} .today-hero .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff;margin-top:12px;width:100%} .today-hero .btn:hover{background:rgba(255,255,255,.24)} .big-action{width:100%;padding:15px;font-size:15px;font-weight:800;border-radius:14px;margin-bottom:12px} input,select,textarea{max-width:100%;box-sizing:border-box} input[type=date],input[type=datetime-local]{-webkit-appearance:none;appearance:none;text-align:left;min-width:0} .field input[type=date],.field input[type=datetime-local]{width:100%} .field input,.field select,.field textarea,.lc-grid input,.lc-grid select{min-width:0} /* saisie de lignes en cartes (mobile) */ .linecard{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:12px;margin-bottom:10px} .lc-head{display:flex;align-items:center;gap:8px;margin-bottom:8px} .lc-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex:0 0 auto} .lc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} /* ⚠️ UN LIBÉLLÉ GARDE LA MÊME HAUTEUR, AVEC OU SANS BULLE D'AIDE — même règle que `.field label`, et pour la même raison : le « i » de « Métré » faisait 17 px quand « Quantité » en faisait 15, et le champ d'à côté descendait de deux pixels. Mesuré à 390 px le 26/09/2026. */ .lc-grid label{display:flex;align-items:center;gap:5px;min-height:17px; font-size:10.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px} /* ⚠️ LE ``, ET IL NE L'ÉTAIT PAS. La règle ne nommait que `input` : les trois sélecteurs d'une ligne de devis — unité, TVA, remise — gardaient leur LARGEUR NATURELLE au milieu d'une colonne qui leur donnait toute la place. Mesuré à 390 px le 26/09/2026 : 53 px de remise dans une colonne de 110, 72 px de TVA dans 110, 89 px d'unité dans 143 — et 33 px de haut contre 41 pour leurs voisins. *Une rangée de deux champs où un seul remplit sa colonne ne se lit pas comme une rangée : elle se lit comme un défaut.* */ .lc-grid input,.lc-grid select{width:100%;min-height:43px;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:16px} .lc-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:13px} .lc-total b{font-size:15px;color:var(--accent)} .linecard textarea,.linecard>input{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:16px} /* barre d'action collante (pages de création) */ .actionbar{display:none} @media(max-width:720px){ .actionbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom,0));z-index:45;background:var(--surface); padding:10px 12px;} .actionbar .btn{flex:1;min-height:46px} .content:has(.actionbar){padding-bottom:calc(160px + env(safe-area-inset-bottom,0)) !important} .page-head{flex-wrap:wrap;row-gap:10px} .page-head .spacer{display:none} .page-head > h2,.page-head > div:not(.spacer){flex:1 1 100%;min-width:0} .page-head > .btn{flex:1 1 calc(50% - 4px)} /* boutons d'en-tête « hbtn » : une seule ligne => même hauteur quel que soit le libellé */ .page-head > .btn.hbtn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; padding-left:10px;padding-right:10px;font-size:13px;min-height:44px;line-height:1.2} /* période facturation : les deux dates restent côte à côte */ .toolbar .fac-range,.toolbar .fac-created{flex:1 1 100%;gap:6px} .toolbar .fac-range .datefr,.toolbar .fac-created .datefr{flex:1 1 0;min-width:0} .toolbar .fac-created > label{flex:1 1 100%} /* « Créées du » sur sa propre ligne */ .toolbar .fac-created > .btn{flex:0 0 auto} .page-head > .btn.wide{flex:1 1 100%;order:-1} .page-head > .btn.sm:first-child{flex:0 0 auto} .hide-mob{display:none !important} .toolbar{flex-wrap:wrap} .toolbar select,.toolbar input{flex:1 1 100%} /* navigation période (pointage) : reste groupée, le champ ne prend plus toute la ligne */ .toolbar .pt-nav{width:100%;gap:6px} /* `flex-basis:auto` laissait un `input[type=date]` à sa largeur intrinsèque : sur iOS il ne grandissait pas, et la ligne s'arrêtait au milieu de l'écran. Avec une base à 0, l'espace libre lui revient entièrement. */ .toolbar .pt-nav input,.toolbar .pt-nav .tag{flex:1 1 0;width:auto;min-width:0;text-align:center;justify-content:center} .toolbar .pt-nav .tag{min-height:38px;font-size:13px} .toolbar .pt-nav .btn{flex:0 0 auto} .toolbar .pt-nav .btn:last-child{flex:1 1 100%;margin-top:2px} .segbar{width:100%;display:flex} .segbar .seg{flex:1;text-align:center;white-space:nowrap;padding-left:4px;padding-right:4px} .tabsrow{width:100%} .tabsrow > .btn{flex:1} .grid-2{grid-template-columns:1fr} .deflist{grid-template-columns:1fr} .deflist dt{margin-top:8px} } @media(max-width:720px){ .tabbar{display:block} /* ⚠️ CETTE PLACE EST RÉSERVÉE À LA BARRE D'ONGLETS DE L'APPLICATION INTERNE, celle qui est cachée dans l'espace client. Non exclue, elle laissait 80 px de vide sous la coque du portail — la barre du client flottait à un centimètre du bord de l'appareil, et le `!important` rendait le défaut incorrigible depuis la feuille du portail. `:root:not([data-portail])` dit ce que le nom de la règle sous-entendait déjà. Corrigé le 19/09/2026. */ :root:not([data-portail]) .app{padding-bottom:calc(56px + env(safe-area-inset-bottom,0))} :root:not([data-portail]) .content{padding-bottom:calc(80px + env(safe-area-inset-bottom,0)) !important} .menu-toggle{display:none !important} /* doublon avec « Menu » en bas */ /* listes de définitions : libellé au-dessus, valeur alignée */ .deflist{display:block} .deflist dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint); font-weight:700;margin:10px 0 2px;padding:0} .deflist dt:first-child{margin-top:0} .deflist dd{margin:0;padding:0 0 8px;font-size:14px;border-bottom:1px solid var(--line-soft)} .deflist dd:last-child{border-bottom:none} /* pieds de fenêtre : boutons réguliers, action principale pleine largeur */ .modal-foot{display:flex;flex-wrap:wrap;gap:8px} .modal-foot .btn{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .modal-foot .btn:not(.ghost){flex-basis:100%;order:-1} .modal-foot .spacer{display:none} /* totaux et lignes toujours alignés */ .sumbox{width:100%} .sumrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0} .sumrow span:first-child{color:var(--ink-soft);font-size:13px} .sumrow span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap} .mc-row span:last-child{font-variant-numeric:tabular-nums;text-align:right} .mc-title{overflow-wrap:anywhere} .kpi .val{font-size:20px;overflow-wrap:anywhere} .panel-head{flex-wrap:wrap;row-gap:6px} .panel-head h3{font-size:14px} /* ⚠️ ET SUR TÉLÉPHONE, ELLES PRENNENT LEUR PROPRE RANGÉE, sous le titre. Serrées à droite elles le compriment ; renvoyées à la ligne une par une, elles partent en diagonale. Une rangée à elles, alignées à gauche : on les voit d'un coup, et elles gardent leur largeur naturelle — deux flèches de calendrier n'ont pas à s'étirer sur un demi-écran. */ .panel-head .ph-act{flex:1 1 100%;margin-left:0} /* zones tactiles plus grandes */ .chip{padding:8px 13px;font-size:13px} .seg{padding:10px 13px} /* ============================================================ SUR TÉLÉPHONE, UNE FENÊTRE EST UNE PAGE — PAS UNE VIGNETTE ------------------------------------------------------------ ⚠️ LE COMMENTAIRE DISAIT DÉJÀ « MODALES EN PLEIN ÉCRAN », ET ELLES NE L'ÉTAIENT PAS. `max-height:94vh` collé en bas laissait **6 vh au-dessus** — soit une cinquantaine de pixels sur un iPhone, exactement la hauteur de la barre d'état. Et comme `index.html` porte `viewport-fit=cover`, la page se dessine SOUS cette barre : le titre « Nouveau lead » s'affichait donc derrière l'heure et la batterie. Capture à l'appui, 26/09/2026. ⚠️ TOUT LE RESTE DU PROJET TRAITE `safe-area-inset-bottom` — la barre du bas, la barre d'action, le contenu — et **personne ne traitait celui du haut**. C'est le seul endroit où quelque chose remonte jusque-là. ⚠️ ET ON NE FAIT PAS QUE LA RALLONGER : elle devient une COLONNE FLEX. Avant, `.modal` défilait en entier — le titre partait donc avec le formulaire, et sur une fiche de huit champs on ne savait plus ce qu'on remplissait. Désormais l'en-tête et le pied sont des éléments fixes de la colonne, et **seul le corps défile** : c'est ce qui fait qu'on entre dans une page plutôt qu'on ouvre une vignette. ⚠️ LE VERROU `html[data-fige]` RESTE INDISPENSABLE : le corps défile, donc un doigt posé à côté défilerait la page derrière sans lui. ============================================================ */ .modal-bg{padding:0;place-items:stretch} .modal{max-width:100%;max-height:none;height:100%;border:0; display:flex;flex-direction:column;overflow:hidden} .modal-head{flex:0 0 auto;padding-top:calc(14px + env(safe-area-inset-top,0))} .modal-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .modal-foot{flex:0 0 auto;background:var(--surface);border-top:1px solid var(--line);padding-bottom:calc(14px + env(safe-area-inset-bottom,0))} } @media(max-width:720px){ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .table-wrap table{min-width:560px} .page-head{gap:10px} .kpi .val{font-size:24px} /* mobile : kanban glisser-déposer masqué (peu ergonomique au doigt) + son intitulé */ .kanban{display:none} .kcap:has(+ .kanban){display:none} /* frise : tient sur la largeur de l'écran, sans scroll latéral */ .ct-wrap{overflow-x:hidden;gap:4px} .ct-wrap .ltl-step{flex:1 1 0;min-width:0;padding:0 1px} .ct-wrap .ltl-dot{width:30px;height:30px;font-size:13px} .ct-wrap .ltl-step::before{top:15px;width:calc(100% + 4px)} .ct-wrap .ltl-lab{font-size:9.5px;max-width:none;width:100%;text-align:center;line-height:1.15;overflow-wrap:anywhere} .ct-wrap .ltl-step.ct-on .ltl-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)} .ct-wrap .ltl-step.ct-on .ltl-lab{color:var(--accent);font-weight:800} /* boutons d'action principaux (Nouveau lead / devis / facture…) : pleine largeur, épais, bien visibles */ .page-head > .btn:not(.ghost){flex:1 1 100%;} /* journal des échanges : ergonomie mobile */ .jquick{display:grid;grid-template-columns:1fr 1fr;gap:8px} .jquick .chip{text-align:center;min-height:40px} .jform{grid-template-columns:1fr;gap:9px} .jform input,.jform select{width:100%;font-size:16px;padding:11px 12px} .jform .btn{min-height:46px} .jday-head{flex-wrap:wrap;row-gap:5px} .jd-resume{width:100%;order:6} .jitem{font-size:13.5px} /* chantier — postes : case + libellé + suppr sur une ligne, applicateurs pleine largeur dessous */ .poste-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"check label del" "chips chips chips";align-items:center;gap:9px 10px;padding:12px 0} .poste-row > .pcheck{grid-area:check} .poste-row > .poste-lab{grid-area:label;min-width:0;overflow-wrap:anywhere} .poste-row > .chips{grid-area:chips;flex-wrap:wrap;gap:6px} .poste-row > .mini{grid-area:del} /* chantier — statut pleine largeur de l'écran, bien visible en haut */ .statut-select{flex:1 1 100%;width:100%; padding:13px 16px;} /* accueil mobile : uniquement salutation + date */ .acc-sub{display:none} .acc-hero{padding-bottom:18px;margin-bottom:20px} .acc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} /* actions à réaliser — pleine largeur et tap confortable */ .acts-grid{grid-template-columns:1fr} .act-item{padding:13px 4px} .actcat-head{padding:13px} .sev-chips{width:100%} /* tâches — formulaire empilé, grille pleine largeur */ .tache-form{flex-direction:column;align-items:stretch} .tache-form #t_titre,.tache-form select,.tache-form input[type=date],.tache-form .btn{width:100%;font-size:16px;min-height:44px} .tache-form .t_prio{min-height:44px} .taches-grid{grid-template-columns:1fr} /* chantier — avenant empilé proprement */ .av-row{flex-wrap:wrap;gap:9px 10px;padding:12px 14px} .av-row .av-ref{order:1} .av-row .av-stat{order:2;margin-left:auto} .av-row .av-title{order:3;flex:1 1 100%;white-space:normal;overflow:visible} .av-row .av-amt{order:4} .av-row .av-act{order:5;flex:1 1 100%;flex-wrap:wrap;margin-top:2px} } @media(max-width:560px){ .content{padding:16px 12px 56px} .field.row{grid-template-columns:1fr} .modal-head,.modal-body,.modal-foot{padding-left:18px;padding-right:18px} .modal-foot{flex-wrap:wrap;gap:8px} .modal-foot .btn{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .modal-foot .btn:not(.ghost){flex-basis:100%;order:-1} .cal{gap:3px} .cal .dow{font-size:9px;letter-spacing:.2px;padding:2px 0} .cal .cell{min-height:58px;padding:3px;border-radius:7px} .cal .cell .d{font-size:10.5px} .cal .ev{font-size:8.5px;padding:1px 3px;margin-top:2px;border-radius:4px;letter-spacing:-.2px} .legend{flex-wrap:wrap;font-size:11px} .cards{grid-template-columns:1fr} .page-head h2{font-size:20px} .toolbar input[type=search]{min-width:0;width:100%} .toolbar{gap:8px} } /* ============================================================ LE CATALOGUE SUR TÉLÉPHONE ============================================================ ⚠️ Le tableau des prestations devient des CARTES (`.linecard`, les mêmes que les lignes de devis). Six colonnes dans 380 px donnaient des champs de quarante pixels et un défilement latéral, sur l'écran où l'on consulte justement un prix depuis le chantier. Signalé le 21/09/2026. ============================================================ */ @media(max-width:720px){ /* La carte porte déjà son cadre : le panneau de détail s'y encastre. */ .linecard .rec{margin:10px -4px 0;padding:11px 10px} /* ⚠️ Un composant tient sur DEUX lignes : le matériau prend toute la largeur, la quantité et les montants suivent dessous. Sur une seule, le sélecteur tombait à 60 px et on ne lisait plus le nom du produit — la seule information qui compte pour choisir. */ .rec-l{flex-wrap:wrap;row-gap:6px} .rec-l > select{flex:1 1 100%;margin-right:0} .rec-l > input{flex:0 0 84px} .rec-u{flex:1 1 auto} .rec-s{flex:0 0 78px} .rec-head{flex-wrap:nowrap} .rec-bilan{gap:6px 12px} .rec-bilan .btn{margin-left:0!important;width:100%;justify-content:center} } /* ------------------------------------------------------------------ LE MOIS DES INTERVENTIONS SUR TÉLÉPHONE ⚠️ Sept colonnes dans 390 px font cinquante pixels : on n'y LIT rien, on y REPÈRE. La case ne porte donc que le quantième et une pastille de compte, et s'ouvre d'un doigt sur la journée. C'est la règle déjà appliquée au mois de « Mon planning », et la raison pour laquelle la SEMAINE, elle, devient une liste : sept jours se lisent, trente-cinq se parcourent. ------------------------------------------------------------------ */ @media(max-width:720px){ .ivp-mois .ivp-jr{min-height:46px} .ivp-mois .ivp-jt{padding:4px 5px;font-size:11px;justify-content:center} .ivp-mois .ivp-jl{padding:0 0 4px;align-items:center;justify-content:flex-start} }