/* ==================================================================== mobile.css — Couche mobile Fincorp ONE (barre de navigation du bas) Additif et encapsule : tout est prefixe .m- et scope <=768px. Le desktop n'est PAS modifie. Reutilisable pour l'app native future. ==================================================================== */ /* Masque par defaut (desktop) : la barre et la feuille n'existent qu'en mobile. */ .m-bottomnav, .m-plus-overlay, .m-plus-sheet { display: none; } @media (max-width: 768px) { /* SOURCE UNIQUE des hauteurs du bas d'écran (barre de nav + zone iOS). Tout ce qui doit s'appuyer au-dessus de la barre (contenu, barre de sélection, footers) référence ces variables — jamais de valeur recopiée. (2026-07-24) */ :root { --m-safe-b: min(env(safe-area-inset-bottom), 20px); --m-nav-h: calc(54px + var(--m-safe-b)); } /* ---- Barre de navigation du bas ---- */ .m-bottomnav { display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; /* Hauteur = SOURCE UNIQUE --m-nav-h (voir :root ci-dessous). Base compactée (60 -> 54px) et zone iOS plafonnée à 20px : en PWA plein écran, env(safe-area-inset-bottom) vaut ~34px et la barre montait à 94px — trop sur un écran déjà petit. (2026-07-24) */ height: var(--m-nav-h); padding: 0 4px var(--m-safe-b); background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid rgba(226, 232, 240, .8); box-shadow: 0 -4px 16px rgba(17, 24, 39, .06); transition: transform .25s ease; } .m-nav-item { flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; background: none; border: none; cursor: pointer; font-family: inherit; color: #9CA3AF; font-size: 9px; font-weight: 500; line-height: 1; } .m-nav-item svg { width: 22px; height: 22px; display: block; } .m-nav-item.active { color: #4F46E5; font-weight: 700; } /* Fina (coach IA) : item dedie, teinte violette pour le distinguer. */ .m-nav-fina { color: #6D28D9; } /* Colonne du bouton central : meme largeur que les autres items -> rythme uniforme. */ .m-nav-fabslot { flex: 1 1 0; display: flex; align-items: center; justify-content: center; } /* Bouton central + (nouvelle facture) */ .m-nav-fab { flex: none; width: 48px; height: 48px; margin: -6px 0 0; border: none; cursor: pointer; border-radius: 12px; background: #4F46E5; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(79, 70, 229, .40); } .m-nav-fab svg { width: 26px; height: 26px; display: block; } .m-nav-fab:active { transform: scale(.96); } /* ---- Laisser la place a la barre : padding bas du contenu (une seule fois) ---- */ .main { padding-bottom: calc(var(--m-nav-h) + 6px) !important; } /* ---- Masquer le hamburger : la barre du bas remplace la nav laterale ---- */ #hamburger-btn, .hamburger-btn { display: none !important; } /* ---- Feuille du bas "Plus" (liste des autres onglets) ---- */ .m-plus-overlay { display: block; position: fixed; inset: 0; background: rgba(17, 24, 39, .40); z-index: 1001; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .m-plus-overlay.open { opacity: 1; visibility: visible; } .m-plus-sheet { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; background: #fff; border-radius: 12px 12px 0 0; max-height: 80%; transform: translateY(100%); transition: transform .25s ease; padding-bottom: calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(17, 24, 39, .18); } .m-plus-sheet.open { transform: translateY(0); } .m-sheet-grab { width: 40px; height: 4px; background: #E5E7EB; border-radius: 12px; margin: 10px auto 2px; } .m-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 12px; font-size: 16px; font-weight: 700; color: #111827; } .m-sheet-x { width: 30px; height: 30px; border: none; border-radius: 50%; background: #F3F4F6; color: #6B7280; font-size: 18px; line-height: 1; cursor: pointer; position: relative; } /* Zone tactile >= 44px (regle 3) sans agrandir le visuel 30px. */ .m-sheet-x::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; } .m-sheet-list { overflow-y: auto; padding: 0 12px 4px; } .m-sheet-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px; background: none; border: none; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 15px; color: #1E293B; text-align: left; } .m-sheet-row:active { background: #F3F4F6; } .m-sheet-row .m-sheet-ic { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #EEF2FF; color: #4F46E5; } .m-sheet-row .m-sheet-ic svg { width: 20px; height: 20px; } .m-sheet-row .m-sheet-label { flex: 1; } .m-sheet-row .m-sheet-chev { color: #CBD5E1; } .m-sheet-row .m-sheet-chev svg { width: 18px; height: 18px; display: block; } /* ── Menu du bouton « + » (créer facture/devis/avoir/client) — couleurs Fincorp ── */ .m-create-sheet { padding-top: 4px; } .m-create-row { width: 100%; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 22px; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; } .m-create-row:active { background: #F5F6FF; } .m-create-ic { width: 26px; height: 26px; flex: 0 0 auto; color: #4F46E5; display: flex; align-items: center; justify-content: center; } .m-create-ic svg { width: 24px; height: 24px; display: block; } .m-create-label { font-size: 16px; font-weight: 600; color: #0F172A; } .m-create-sep { height: 1px; background: #E7EAF0; margin: 6px 22px; } } /* ==================================================================== Correctifs d'integration mobile (interaction avec l'app existante) ==================================================================== */ @media (max-width: 768px) { /* Bloc d'accueil "Bonsoir ..." : ne doit PAS suivre le scroll en mobile. (En desktop il reste sticky — on neutralise seulement ici.) */ #view-dashboard .dash-hero { position: static !important; margin-top: 0; } #view-dashboard .dash-hero.is-stuck { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding-top: 14px; padding-bottom: 14px; } #view-dashboard .dash-hero.is-stuck .dash-subtitle { display: block; } #view-dashboard .dash-hero.is-stuck .dash-title { font-size: inherit; } /* Bouton flottant Fina (Coach IA) : masque sur mobile -> remplace par l'item "Fina" dans la barre du bas (voir mobile.js). La bulle flottante polluait l'ecran. */ .chat-fab { display: none !important; } /* Saisie du chat plein ecran : respecter la safe-area (viewport-fit=cover). */ .chat-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); } /* Chat plein ecran ouvert -> on escamote la barre du bas (sinon elle le recouvre). */ body:has(#chatPanel.open) .m-bottomnav { transform: translateY(110%); } } /* ==================================================================== Editeur de facture : anti-debordement en haut (barre d'actions + onglets) ==================================================================== */ @media (max-width: 768px) { /* Boutons d'action de la facture -> ICONES SEULES (le libelle est un noeud texte non balise, impossible a masquer autrement : on neutralise via font-size:0). */ #topbar-invoice-actions .btn { font-size: 0 !important; gap: 0 !important; padding: 8px 10px !important; } #topbar-invoice-actions .btn svg { width: 18px; height: 18px; margin: 0 !important; } /* Titre tronque proprement si trop long (au lieu de pousser/couper). */ .topbar-left { min-width: 0; } #topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Onglets factures (Editeur / Mes factures / Recurrentes / Avoirs) : bande qui DEFILE horizontalement au lieu d'etre coupee. */ .inv-tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .inv-tab-bar::-webkit-scrollbar { display: none; } .inv-tab { flex: 0 0 auto !important; } } /* ==================================================================== Bandeau du haut (topbar) : visible UNIQUEMENT sur Factures (comme desktop). Ailleurs (Accueil, etc.) il ne portait qu'un titre redondant -> on le retire pour gagner de la place. + protection de l'encoche (safe-area haut). ==================================================================== */ @media (max-width: 768px) { .topbar { display: none !important; } .main.show-topbar .topbar { display: flex !important; height: auto; min-height: 56px; padding-top: env(safe-area-inset-top); } /* Sans topbar : le contenu doit passer proprement sous l'encoche. */ .main:not(.show-topbar) { padding-top: env(safe-area-inset-top); } } /* ==================================================================== EDITEUR DE FACTURE — mise en page COMPACTE (maquette 2 « Compact », validee par Zouber le 2026-07-25). Deux bandeaux empiles mangeaient le haut de l'ecran : la topbar (titre + pastille) PUIS la barre des 5 onglets. Dans l'editeur on n'en garde qu'un : fleche retour + titre + pastille, la barre d'onglets est masquee et la fleche reprend son role de navigation (action factures-tab reutilisee). Gain mesure : ~50 px rendus au formulaire, sans rien retirer de fonctionnel. La classe est posee sur par switchFacturesTab() (app.js). ==================================================================== */ @media (max-width: 768px) { body.fac-editor .topbar-back { display: grid; place-items: center; width: 44px; /* cible tactile >= 44px (regle mobile du projet) */ height: 44px; margin-left: -10px; /* aligne l'icone sur la marge du contenu */ flex: 0 0 auto; padding: 0; background: none; border: 0; border-radius: 12px; color: var(--text, #0F172A); cursor: pointer; -webkit-tap-highlight-color: transparent; } body.fac-editor .topbar-back:active { background: rgba(15, 23, 42, .06); } /* Un seul bandeau : la barre des 5 onglets disparait dans l'editeur. */ body.fac-editor #view-invoices .inv-tab-bar { display: none !important; } /* Topbar resserree : gap et hauteur reduits, titre et pastille plus discrets. */ body.fac-editor .main.show-topbar .topbar { min-height: 50px; } /* La fleche retour consomme 44px de largeur : sans ces regles, un titre long (« Facture FAC-2026-262 ») passait sur 3 lignes -> topbar a 72px (le gain de hauteur etait annule) et la pastille de statut sortait de l'ecran. Mesure au harness 375px avant deploiement. */ body.fac-editor .topbar-left { gap: 7px; min-width: 0; flex: 1 1 auto; overflow: hidden; } body.fac-editor .topbar-title { font-size: 15px; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* titre tronque proprement plutot que renvoye a la ligne */ } body.fac-editor .topbar-status { font-size: 10px; padding: 2px 7px; letter-spacing: .3px; flex: 0 0 auto; } } /* ==================================================================== Accueil : outils du header (Vue1/Vue2, Modifier, streak, cloche, partage, periode). En l'etat ils s'empilent en colonne pleine largeur = gros pave. -> on repasse en LIGNE qui s'enroule : compact + aere. ==================================================================== */ @media (max-width: 768px) { #view-dashboard .dash-tools { flex-direction: row; flex-wrap: wrap; /* flex-start : quand le menu Annee s'ouvre et fait grandir sa colonne, "Modifier" reste en HAUT (aligne avec le bouton Annee) au lieu de descendre. */ align-items: flex-start; gap: 4px; /* La ligne s'etale sur toute la largeur (bords alignes sur Annee + cartes), avec des ecarts EGAUX entre chaque module. */ justify-content: space-between; } /* Titre "Bonsoir ..." : gras + violet-indigo (selecteur + !important pour battre style.css). */ #view-dashboard .dash-hero-left .dash-title { color: #4F46E5 !important; font-weight: 800 !important; } /* MEME HAUTEUR (32px) pour les modules de la LIGNE 1. */ #view-dashboard .view-tabs, #view-dashboard .streak-badge, #view-dashboard .notif-bell-wrap, #view-dashboard .quick-action-btn { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; } /* LIGNE 1 : Vue1/Vue2 + Suivi + cloche + partage. */ /* Vue1/Vue2 : pas d'encadre exterieur (plus de "boite dans une boite"). Plus de place ici (Modifier descend en ligne 2) -> noms de vues plus longs autorises. */ #view-dashboard .view-tabs { order: 1; background: transparent; border: none; padding: 0; gap: 2px; } #view-dashboard .view-tab { padding: 0 8px; font-size: 12px; height: 32px; } /* Largeur MAX 8 caracteres : l'onglet retrecit avec les noms courts ("Vue 1") -> la ligne 1 (tabs + suivi + cloche + partage) tient sur UNE ligne au lieu que le partage passe seul a la ligne (defaut releve a l'audit UX 2026-07-04). */ #view-dashboard .view-tab-name { max-width: 8ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-dashboard .streak-badge { order: 2; padding: 0 9px; font-size: 11.5px; } #view-dashboard .notif-bell-wrap { order: 3; } #view-dashboard #shareOpen { order: 4; } /* Saut de ligne force apres la ligne 1. */ #view-dashboard .dash-tools::after { content: ""; order: 5; flex: 0 0 100%; height: 0; } /* LIGNE 2 : Modifier + Annee, MEME TAILLE (50/50), meme hauteur. */ #view-dashboard #customizeBtn { order: 6; flex: 1 1 0; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; } #view-dashboard #customizeBtn span { display: inline; } #view-dashboard #customizeBtn svg { width: 15px; height: 15px; } #view-dashboard .dash-period-wrap { order: 7; flex: 1 1 0; width: auto; display: block; } #view-dashboard .dash-period { height: 40px; } /* (Le menu Annee est gere par la regle globale ci-dessous : pleine largeur, en flux.) */ /* Cloche / partage : carre, largeur = hauteur (32px). */ #view-dashboard .quick-action-btn { width: 32px; padding: 0; justify-content: center; } #view-dashboard .quick-action-btn svg { width: 16px; height: 16px; } } /* ==================================================================== Menu de selection d'annee du dashboard (GLOBAL : mobile + web). Remplace l'ancien "cycle" par un vrai menu deroulant. ==================================================================== */ #view-dashboard .dash-period-menu { display: none; /* En FLUX, pleine largeur, en bas de la barre d'outils -> pousse le contenu vers le bas, ne cache rien, et n'est jamais coupe en deux (meme s'il y a Modifier a cote d'Annee). */ order: 99; flex: 0 0 100%; width: 100%; box-sizing: border-box; margin-top: 8px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 8px 24px rgba(17, 24, 39, .10); padding: 6px; flex-direction: column; gap: 2px; } #view-dashboard .dash-period-menu.open { display: flex; } #view-dashboard .dash-period-opt { width: 100%; min-height: 38px; padding: 0 14px; border: none; background: none; border-radius: 12px; font-family: inherit; font-size: 14px; color: #1E293B; cursor: pointer; text-align: left; } #view-dashboard .dash-period-opt:hover { background: #F3F4F6; } #view-dashboard .dash-period-opt.on { background: #EEF2FF; color: #4F46E5; font-weight: 600; } /* ==================================================================== Menu ⋯ dashboard (mobile) — identique maquette : Vue 1/2, Modifier, Periode, Suivi objectifs. Reutilise _enterEditMode / _switchDashView / _renameViewTab / selecteur annee (zero duplication logique). ==================================================================== */ .dash-mobile-menu-btn { display: none !important; } .dashm-backdrop, .dashm-sheet { display: none; } @media (max-width: 768px) { .dash-mobile-menu-btn { display: flex !important; } /* Sur mobile, ces controles vivent dans le menu ⋯ (pas en vrac dans l'en-tete) */ #view-dashboard .view-tabs, #view-dashboard #customizeBtn, #view-dashboard .streak-badge, #view-dashboard .dash-period-wrap { display: none !important; } .dashm-backdrop, .dashm-sheet { display: block; } /* En-tete mobile COMPACT : les 3 boutons restants (cloche, partage, menu ⋯) reviennent sur la MEME ligne que "Bonsoir ...", alignes a DROITE. Avant ils descendaient sur une ligne dediee sous le titre (dash-hero en colonne) -> hauteur gaspillee alors que ca tient a droite. On repasse donc l'en-tete en LIGNE. */ #view-dashboard .dash-hero { flex-direction: row !important; align-items: flex-start; flex-wrap: nowrap; gap: 10px; } #view-dashboard .dash-hero-left { flex: 1 1 auto; min-width: 0; } #view-dashboard .dash-hero-right { width: auto !important; flex: 0 0 auto; } #view-dashboard .dash-tools { width: auto !important; flex-direction: row !important; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; } #view-dashboard .dash-tools::after { display: none !important; } /* plus de saut de ligne force */ /* Ordre gauche -> droite : cloche (notification), partage, puis menu ⋯ TOUT a droite. */ #view-dashboard .notif-bell-wrap { order: 1 !important; } #view-dashboard #shareOpen { order: 2 !important; } #view-dashboard #dashMobileMenuBtn { order: 3 !important; } } .dashm-backdrop { position: fixed; inset: 0; background: rgba(20,16,34,.45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; } /* Audit dashboard 2026-07-21 (P2) : max-height + overflow-y pour que le bas de la feuille (toggle Rappel quotidien, panneau Période déplié) reste atteignable sur petit écran / paysage. */ .dashm-sheet { position: fixed; left: 10px; right: 10px; top: calc(10px + env(safe-area-inset-top)); max-width: 520px; margin: 0 auto; background: #fff; border-radius: 22px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.5); padding: 16px 16px 12px; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: .25s; z-index: 91; max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; } body.dashm-open .dashm-backdrop { opacity: 1; pointer-events: auto; } body.dashm-open .dashm-sheet { opacity: 1; transform: none; pointer-events: auto; } .dashm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .dashm-head b { font-size: 16px; color: #1B1533; } .dashm-close { border: none; background: none; font-size: 24px; line-height: 1; color: #9A96AD; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .dashm-views { display: flex; gap: 10px; } .dashm-vt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border: 1.5px solid #ECEAF4; border-radius: 12px; background: #fff; font-family: inherit; font-size: 14px; font-weight: 600; color: #6E6A85; cursor: pointer; } .dashm-vt.on { border-color: #5B4CE0; color: #5B4CE0; } .dashm-vt .dashm-vt-name { outline: none; min-width: 16px; } .dashm-vt .dashm-vt-ed { display: inline-flex; align-items: center; } .dashm-vt .dashm-vt-ed svg { width: 13px; height: 13px; } .dashm-hint { font-size: 11.5px; color: #9A96AD; margin: 8px 2px; } .dashm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; border: none; background: none; border-top: 1px solid #F3F1F9; padding: 10px 2px; font-family: inherit; text-align: left; cursor: pointer; } .dashm-row-static { cursor: default; } .dashm-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .dashm-ic svg { width: 18px; height: 18px; } .dashm-ic.accent { background: #EFEAFC; color: #5B4CE0; } .dashm-ic.info { background: #E8F0FC; color: #3B82E8; } .dashm-ic.warn { background: #FBF0D9; color: #DD9526; } .dashm-tx { flex: 1; min-width: 0; } .dashm-tx b { display: block; font-size: 14px; color: #1B1533; } .dashm-tx span { font-size: 12px; color: #9A96AD; } .dashm-arrow { color: #C9C5D8; font-size: 22px; line-height: 1; } .dashm-toggle { width: 46px; height: 27px; border-radius: 14px; border: none; background: #D3D1DE; position: relative; cursor: pointer; flex: 0 0 auto; transition: background .2s; } .dashm-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: left .2s; } .dashm-toggle[aria-checked="true"] { background: #5B4CE0; } .dashm-toggle[aria-checked="true"]::after { left: 22px; } .dashm-period-years { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 8px 62px; } .dashm-period-years[hidden] { display: none; } .dashm-year { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid #ECEAF4; background: #fff; font-family: inherit; font-size: 14px; cursor: pointer; } .dashm-year.on { border-color: #5B4CE0; color: #5B4CE0; font-weight: 600; } html[data-theme="dark"] .dashm-sheet { background: #161028; } html[data-theme="dark"] .dashm-head b, html[data-theme="dark"] .dashm-tx b, html[data-theme="dark"] .dashm-vt.on { color: #ECE8F8; } html[data-theme="dark"] .dashm-row { border-color: rgba(255,255,255,.06); } html[data-theme="dark"] .dashm-vt, html[data-theme="dark"] .dashm-year { background: transparent; border-color: rgba(255,255,255,.12); } /* ==================================================================== Accordeon des blocs du dashboard (chevron replier/deplier) — GLOBAL (mobile + web). Le contenu se plie, seul l'en-tete (carte-ligne) reste. Etat memorise (localStorage). ==================================================================== */ #view-dashboard .m-collapse-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; color: #94A3B8; transition: transform .2s ease; } #view-dashboard .m-collapse-btn svg { width: 18px; height: 18px; display: block; } /* Replie -> chevron tourne. */ #view-dashboard .section.m-collapsed .m-collapse-btn { transform: rotate(-90deg); } /* Replie -> on cache tout le bloc SAUF l'en-tete. */ #view-dashboard .section.m-collapsed > :not(.section-head) { display: none !important; } /* En mode "Modifier" : pas de chevron accordeon (evite le conflit avec les controles d'edition). */ body.is-editing #view-dashboard .m-collapse-btn { display: none; } /* ==================================================================== MODE EDITION MOBILE — deplacement des cartes SANS gene du scroll. Probleme : en desktop toute la carte est glissable (touch-action:none) -> sur mobile un simple scroll deplacait la carte par accident. Solution "les deux" : 1) SCROLL LIBRE par defaut sur le corps de carte (touch-action: pan-y) ; 2) on ne SAISIT la carte que par APPUI LONG (~0,45 s, gere en JS) OU par la POIGNEE. La poignee garde touch-action:none pour capter le glisser tout de suite. ==================================================================== */ @media (max-width: 768px) { body.is-editing #view-dashboard .dash-group > .section[data-section] { touch-action: pan-y; } /* Poignee = vraie cible tactile 44x44 (regle 3), bien visible = "attrape ici pour deplacer". Audit dashboard 2026-07-21 (P3) : portee de 40x30 a 44x44 pour respecter le minimum tactile. */ body.is-editing #view-dashboard .edit-ctrl-btn.drag-grip { touch-action: none; width: 44px; height: 44px; background: var(--primary-light); color: var(--primary); } body.is-editing #view-dashboard .edit-ctrl-btn.drag-grip svg { width: 18px; height: 18px; } } /* ==================================================================== Pied de page de confiance + mention legale (GLOBAL : mobile + web). Toujours en bas, lie a aucun bloc, NON deplaçable / repliable / cachable (ce n'est pas une .section -> ni "Modifier" ni l'accordeon ne le touchent). On le SEPARE visuellement des blocs pour qu'il se lise comme un footer. ==================================================================== */ /* dash-scroll est en flex column (cf. _applyDashView) et chaque bloc reçoit un order=i. Le footer n'en a pas -> il faut le forcer en DERNIER, sinon il remonte au milieu. order eleve = toujours apres tous les blocs, quelle que soit la vue. */ /* Coach IA (insights) EPINGLE juste sous la rangee KPI, au-dessus de tout le reste. order:0 = meme rang que la rangee KPI -> se place juste apres elle (ordre DOM). !important pour battre l'order inline pose par _applyDashView. Web + mobile. */ #view-dashboard .section[data-section="insights"] { order: 0 !important; } #view-dashboard .trust-footer { order: 9999; } #view-dashboard #editStash { order: 9990; } /* reserve des sections cachees : juste avant le footer */ /* ==================================================================== Bande Seuils (fixe) — adaptation mobile : 1 colonne, lignes = cibles tactiles >= 44px (regle 3), steppers simulateur visibles. ==================================================================== */ @media (max-width: 480px) { #view-dashboard .seuils-strip { padding: 12px 14px; margin: 10px 0; } /* Option 1 en colonne : chaque seuil = bloc (label+reste / barre+%), textes un peu plus grands qu'en web pour la lisibilite au pouce, barre bien epaisse. */ #view-dashboard .seuil-row { gap: 8px; padding: 4px 0; } #view-dashboard .seuil-lbl { font-size: 14px; } #view-dashboard .seuil-pct { font-size: 16px; width: 48px; } #view-dashboard .seuil-rest { font-size: 14px; } #view-dashboard .seuil-bar { height: 18px; } /* Curseurs peu adaptes au pouce -> steppers +/- 44px de chaque cote. */ #view-dashboard .sim-step { display: inline-flex; } } #view-dashboard .trust-footer:not(.trust-disclaimer) { margin-top: 26px; padding-top: 18px; border-top: 1px solid #E2E8F0; } /* ==================================================================== ONGLET FACTURES — refonte mobile (session "Onglet Responsive Facture", maquettes validees par Zouber 2026-07-08). Regles : champs >= 16px, cibles >= 44px, cartes verticales, 100dvh. ==================================================================== */ @media (max-width: 768px) { /* ── Barre d'onglets : DEFILE horizontalement (ne retrecit jamais le texte) ── */ #view-invoices .inv-tab-bar { padding: 0 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #view-invoices .inv-tab-bar::-webkit-scrollbar { display: none; } #view-invoices .inv-tab { flex: 0 0 auto; white-space: nowrap; font-size: 13.5px; padding: 13px 13px; min-height: 46px; gap: 5px; } #view-invoices .inv-tab svg { display: none; } #view-invoices .inv-conf-badge { display: none; } /* ── Scroll mobile : modèle SIMPLE. #view-invoices (.view-section) est déjà overflow-y:auto (style.css:4196) et scrolle tout. On NEUTRALISE le scroll interne du panneau liste : son overflow:hidden + flex:1 INLINE clippait la liste dans une "boîte" (l'encadré) et bloquait le scroll -> !important requis. ── */ /* iOS : PAS de -webkit-overflow-scrolling:touch ici -> il casse position:sticky de la barre d'onglets sur Safari iOS (elle disparaissait au scroll). Le momentum natif suffit. */ #view-invoices { min-height: 0; } /* NB : on ne touche PAS à `display` (switchFacturesTab bascule flex/none pour afficher/masquer le panneau) — on force juste la colonne + le reste. */ #view-invoices .inv-panel[data-panel="list"] { flex-direction: column !important; overflow: visible !important; flex: none !important; padding: 0 !important; } /* padding bas SANS env(safe-area-inset-bottom) : .main reserve deja la barre du bas ET la zone iOS via --m-nav-h. Le cumul ajoutait ~34px de vide mort sous la derniere carte en PWA. (2026-07-25) */ #view-invoices .inv-panel[data-panel="list"] .invlist-scroll { overflow: visible; flex: none; min-height: auto; gap: 10px; padding: 0 0 28px; } /* Éditeur : même modèle single-scroll que la liste. Sans ça, son overflow:hidden INLINE (+ flex:1) clippait le formulaire -> impression d'écran "figé", impossible de scroller. */ #view-invoices .inv-panel[data-panel="editor"] { overflow: visible !important; flex: 1 1 auto !important; min-height: 0 !important; } #view-invoices .inv-panel[data-panel="editor"] .form-scroll { overflow: visible; flex: none; min-height: auto; } /* Éditeur mobile — anti « gros vide gris » (Audit 2026-07-24) : le pattern desktop (.wz-form-panel flex + .wz-step-content flex:1 à scroll interne) laissait, sur un formulaire court, un grand vide sous le contenu. On fait REMPLIR la hauteur par le formulaire et on ÉPINGLE le footer d'actions (Sauver / Continuer) en bas. Formulaire long -> tout défile normalement (footer à la suite, aucun clip). */ /* Ceinture + bretelles : le PANNEAU (flex:1 -> remplit toujours la hauteur dispo) porte le fond du formulaire. Même si la chaîne de hauteurs ci-dessous ne se résout pas sur un navigateur mobile, aucun « bloc gris » ne peut apparaître sous le contenu. */ #view-invoices .inv-panel[data-panel="editor"] { background: #F8FAFC; } #view-invoices .content-split { display: flex; flex-direction: column; min-height: 100%; } #view-invoices .wz-form-panel { flex: 1 1 auto; overflow: visible; } #view-invoices .wz-step-content { flex: 0 0 auto; overflow: visible; } #view-invoices .wz-step-footer { margin-top: auto; } /* La barre d'onglets reste en haut pendant le défilement */ #view-invoices .inv-tab-bar { position: sticky; top: 0; z-index: 6; background: #fff; } /* ── Résumé épuré (SEULEMENT le panneau liste — l'onglet Avoirs réutilise ces classes sans hero/green, on ne doit pas casser sa grille). ── */ /* Refonte mobile 2026-07-24 (maquette validee) : 4 tuiles KPI en 2x2 (A encaisser / Encaisse / Total TTC / Objectif) + Repartition en carte repliable pleine largeur. REUTILISE le DOM desktop (.invlist-kpis > .invlist-kpi) — zero duplication. */ #view-invoices .inv-panel[data-panel="list"] .invlist-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; flex: 0 0 auto; overflow: visible; padding: 14px var(--m-gutter) 4px; margin: 0; background: transparent; } /* chaque KPI = tuile carte */ #view-invoices .inv-panel[data-panel="list"] .invlist-kpi { background: var(--white) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(16,24,40,.04) !important; padding: 13px 14px 11px !important; min-width: 0; display: flex; flex-direction: column; } /* Repartition : pleine largeur, sous les 4 tuiles */ #view-invoices .inv-panel[data-panel="list"] .invlist-kpi.ilk-rep { grid-column: 1 / -1; } /* La barre desktop (onglets + Periode/Type/Tri) reste masquee : le mobile garde ses pastilles. */ #view-invoices .il-status-tabs, #view-invoices .il-filterbar { display: none; } /* en-tete tuile */ #view-invoices .inv-panel[data-panel="list"] .ilk-top { margin-bottom: 8px; gap: 7px; } #view-invoices .inv-panel[data-panel="list"] .invlist-kpi-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); line-height: 1.2; } /* valeurs */ #view-invoices .inv-panel[data-panel="list"] .invlist-kpi-val { font-size: 17px; font-weight: 850; color: var(--text); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; } #view-invoices .inv-panel[data-panel="list"] .invlist-kpi-late { font-size: 11.5px; font-weight: 700; color: #DC2626; margin-top: 4px; } /* sparklines REAFFICHEES (bord a bord en bas de tuile), comme la maquette */ #view-invoices .inv-panel[data-panel="list"] .ilk-spark { display: block; flex: 1 1 auto; min-height: 34px; margin: 8px -14px -11px; } /* Objectif : version compacte (gros %, barre, reste) — pas de € (deja dans "Encaisse") */ #view-invoices .inv-panel[data-panel="list"] .ilk-obj .il-lblx { display: none; } /* label = "Objectif" */ #view-invoices .inv-panel[data-panel="list"] .ilk-obj .ilk-objmod-t { display: none; } /* bouton = crayon seul */ #view-invoices .inv-panel[data-panel="list"] .ilk-obj .ilk-objmod { padding: 0; gap: 0; } #view-invoices .inv-panel[data-panel="list"] .ilk-objc { gap: 8px; justify-content: flex-start; } #view-invoices .inv-panel[data-panel="list"] .ilk-objtop { display: block; } #view-invoices .inv-panel[data-panel="list"] .ilk-objbig { display: none; } #view-invoices .inv-panel[data-panel="list"] .ilk-objpct { display: block; font-size: 24px; line-height: 1; } #view-invoices .inv-panel[data-panel="list"] .ilk-objfoot { font-size: 10.5px; line-height: 1.35; } /* Repartition : donut + legende pleine largeur */ #view-invoices .inv-panel[data-panel="list"] .ilk-repw { gap: 16px; } #view-invoices .inv-panel[data-panel="list"] .ilk-lgv .ilk-li { font-size: 12.5px; } /* chevron de repli (visible seulement mobile) + mini-resume (visible seulement replie) */ #view-invoices .inv-panel[data-panel="list"] .ilk-rep .ilk-clp-btn { display: grid; place-items: center; margin-left: auto; width: 34px; height: 34px; min-height: 34px; border: 0; background: none; border-radius: 9px; color: var(--text-muted); cursor: pointer; flex: 0 0 auto; } #view-invoices .inv-panel[data-panel="list"] .ilk-rep .ilk-clp-btn svg { width: 18px; height: 18px; transition: transform .2s ease; } #view-invoices .inv-panel[data-panel="list"] .ilk-rep.ilk-clp .ilk-clp-btn svg { transform: rotate(180deg); } #view-invoices .inv-panel[data-panel="list"] .ilk-rep.ilk-clp .ilk-repmini { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-invoices .inv-panel[data-panel="list"] .ilk-rep.ilk-clp .ilk-repw { display: none; } /* ── Recherche pleine largeur ; les filtres passent par les pastilles (ci-dessous), les natifs + les chips (masqués ci-dessous). ── */ #view-invoices .il-filter-pills { display: flex; flex: 1 1 auto; min-width: 0; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0; } #view-invoices .il-filter-pills::-webkit-scrollbar { display: none; } #view-invoices .ilf-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-family: inherit; font-size: 14px; font-weight: 600; color: #334155; background: #fff; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 9px 14px; min-height: 44px; cursor: pointer; } #view-invoices .ilf-pill svg { color: #94A3B8; flex: 0 0 auto; } #view-invoices .ilf-pill.on { background: #EEF2FF; border-color: #A5B4FC; color: #3730A3; } #view-invoices .ilf-pill.on svg { color: #6366F1; } #view-invoices .invlist-filters { display: none !important; } #view-invoices .invlist-chips { display: none !important; } /* ── Bottom sheet de filtre (poignée + options en pastilles + Effacer/Appliquer) ── */ .ilf-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1001; } .ilf-overlay.open { opacity: 1; pointer-events: auto; } .ilf-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; display: flex; flex-direction: column; background: #fff; border-radius: 12px 12px 0 0; max-height: 82%; transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -10px 40px rgba(17,24,39,.18); padding-bottom: calc(8px + env(safe-area-inset-bottom)); } .ilf-sheet.open { transform: translateY(0); } .ilf-sheet .m-sheet-head { font-size: 18px; } .ilf-body { overflow-y: auto; padding: 6px 16px 10px; } .ilf-opts { display: flex; flex-wrap: wrap; gap: 10px; } .ilf-opt { font-family: inherit; font-size: 15px; font-weight: 600; color: #334155; background: #fff; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 13px 16px; min-height: 48px; cursor: pointer; } .ilf-opt.on { background: #4F46E5; border-color: #4F46E5; color: #fff; } /* Étiquettes : pastille couleur devant le nom, reste blanc sauf sélection */ .ilf-opt-tag { display: inline-flex; align-items: center; gap: 9px; } .ilf-tag-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .ilf-opt-tag.on .ilf-tag-dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); } /* Hub Étiquettes : gérer (créer/renommer/recolorer/supprimer) + filtrer */ .ilf-etiq-list { display: flex; flex-direction: column; gap: 8px; } .ilf-etiq-row { display: flex; align-items: stretch; gap: 8px; } .ilf-etiq-row .ilf-opt-tag { flex: 1; justify-content: flex-start; } .ilf-etiq-edit { flex: 0 0 auto; width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid #E2E8F0; border-radius: 12px; color: #64748B; cursor: pointer; } .ilf-etiq-edit.on { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; } .ilf-etiq-editbox, .ilf-etiq-createform { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 6px; padding: 12px; background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 12px; } .ilf-etiq-editbox .ilf-clients-search, .ilf-etiq-createform .ilf-clients-search { padding-left: 14px; background: #fff; } .ilf-etiq-palette { display: flex; flex-wrap: wrap; gap: 8px; } .ilf-etiq-delete { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 600; color: #B91C1C; background: #fff; border: 1.5px solid #FCA5A5; border-radius: 12px; padding: 0 14px; min-height: 44px; cursor: pointer; } .ilf-etiq-createbtn { flex: none; } .ilf-etiq-new { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-family: inherit; font-size: 15px; font-weight: 600; color: #4F46E5; background: #EEF2FF; border: 1.5px dashed #C7D2FE; border-radius: 12px; padding: 0 16px; min-height: 48px; cursor: pointer; } .ilf-etiq-plus { font-size: 20px; font-weight: 700; line-height: 1; } .ilf-etiq-note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: #94A3B8; } .ilf-foot { display: flex; gap: 12px; padding: 12px 16px 4px; border-top: 1px solid #EEF1F5; } .ilf-btn { flex: 1; font-family: inherit; font-size: 15px; font-weight: 700; border-radius: 12px; padding: 14px; min-height: 50px; cursor: pointer; } .ilf-btn-ghost { background: #fff; border: 1.5px solid #E2E8F0; color: #334155; } .ilf-btn-primary { background: #4F46E5; border: 1.5px solid #4F46E5; color: #fff; } /* Sheet Montant : champ montant (€) + interrupteur min/max (indigo Fincorp) */ .ilf-field { margin: 8px 0 14px; } .ilf-label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; } .ilf-amount { display: flex; align-items: stretch; border: 1.5px solid #E2E8F0; border-radius: 12px; overflow: hidden; transition: border-color .15s; } .ilf-amount:focus-within { border-color: #6366F1; } .ilf-amount:focus-within .ilf-eur { border-left-color: #6366F1; color: #4F46E5; } .ilf-input { flex: 1; min-width: 0; border: 0; padding: 13px 14px; font-size: 16px; font-family: inherit; color: #0F172A; background: #fff; outline: none; } .ilf-eur { display: flex; align-items: center; padding: 0 16px; font-size: 16px; font-weight: 600; color: #94A3B8; border-left: 1.5px solid #E2E8F0; background: #F8FAFC; transition: border-color .15s, color .15s; } .ilf-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; font-family: inherit; font-size: 15px; font-weight: 600; color: #334155; padding: 8px 0; cursor: pointer; text-align: left; min-height: 44px; } .ilf-switch { flex: 0 0 auto; width: 46px; height: 28px; border-radius: 12px; background: #CBD5E1; position: relative; transition: background .18s; } .ilf-switch-dot { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s; } .ilf-toggle-row.on .ilf-switch { background: #4F46E5; } .ilf-toggle-row.on .ilf-switch-dot { transform: translateX(18px); } /* Sheet Date : la plage "Personnalisée" (2 champs date natifs) apparaît sous les raccourcis */ .ilf-range { margin-top: 6px; } .ilf-date { -webkit-appearance: none; appearance: none; width: 100%; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 12px 14px; font-size: 16px; min-height: 48px; font-family: inherit; color: #0F172A; background: #fff; } .ilf-date:focus { outline: none; border-color: #6366F1; } /* Sheet Clients : recherche + liste A-Z + cases (indigo Fincorp) */ .ilf-search-wrap { position: relative; margin: 4px 0 8px; } .ilf-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; } .ilf-clients-search { width: 100%; border: 1.5px solid #E2E8F0; border-radius: 12px; padding: 12px 14px 12px 40px; font-size: 16px; font-family: inherit; color: #0F172A; background: #F8FAFC; min-height: 46px; } .ilf-clients-search:focus { outline: none; border-color: #6366F1; background: #fff; } .ilf-clients-list { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ilf-cl-group { font-size: 12px; font-weight: 700; color: #94A3B8; padding: 10px 2px 4px; text-transform: uppercase; } .ilf-cl-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-top: 1px solid #F1F5F9; padding: 12px 2px; min-height: 56px; font-family: inherit; font-size: 15px; color: #0F172A; text-align: left; cursor: pointer; } .ilf-cl-row:first-child { border-top: 0; } .ilf-cl-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #EEF2FF; color: #4F46E5; font-weight: 700; display: flex; align-items: center; justify-content: center; } .ilf-cl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .ilf-cl-check { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid #CBD5E1; border-radius: 12px; position: relative; } .ilf-cl-row.on .ilf-cl-check { background: #4F46E5; border-color: #4F46E5; } .ilf-cl-row.on .ilf-cl-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .ilf-cl-empty { padding: 24px; text-align: center; color: #94A3B8; font-size: 14px; } /* ── Avoirs : garde le traitement mobile compact/scrollable des KPI. La refonte a scopé le résumé au panneau liste ; sans ça l'onglet Avoirs retomberait sur le layout desktop (flex-wrap, min-width 130) — régression évitée. ── */ #view-invoices .inv-panel[data-panel="avoirs"] .invlist-kpis { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; padding: 0 var(--m-gutter) 4px; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-kpis::-webkit-scrollbar { display: none; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-kpi { flex: 0 0 auto; min-width: 130px; } /* Table Avoirs -> cartes sur mobile (la refonte a dé-scopé l'ancienne règle table->cartes, l'onglet Avoirs utilise encore un vrai : on lui remet un traitement cartes). */ #view-invoices .inv-panel[data-panel="avoirs"] .invlist-tablecard { margin: 2px var(--m-gutter) 0; border: 1px solid #E7EAF0; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.04); overflow: hidden; padding: 0; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table-wrap { overflow: visible; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table { min-width: 0; width: 100%; border-collapse: separate; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table thead { display: none; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table tbody { display: block; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table tr { display: grid; grid-template-columns: minmax(0,1fr) auto; row-gap: 4px; column-gap: 12px; align-items: center; padding: 14px 16px; border: 0; border-top: 1px solid #EEF1F5; background: #fff; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table tbody tr:first-child { border-top: 0; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td { border: 0; padding: 0; background: none; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(3) { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 650; color: #0F172A; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(8) { grid-column: 2; grid-row: 1; text-align: right; font-size: 15.5px; font-weight: 800; color: #0F172A; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(1) { grid-column: 1; grid-row: 2; font-size: 12.5px; color: #94A3B8; font-weight: 500; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(9) { grid-column: 2; grid-row: 2; justify-self: end; display: flex; gap: 8px; } /* #8 (test 3) : cible tactile 44x44 pour la corbeille (seule action de la carte avoir) — regle 3 mobile */ #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(9) .sii-delete { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } /* Pagination : TOUT sur UNE ligne (Precedent/Suivant = fleches seules, texte compact). Sans ça, ça passait sur 3 lignes sur iPhone. Cibles tactiles 44px conservees (regle 3). */ /* idem : pas de env() ici, la reserve du bas est portee une seule fois par .main. (2026-07-25) */ #view-invoices .il-pagination { flex-wrap: nowrap; gap: 6px; padding: 12px var(--m-gutter) 8px; } #view-invoices .il-pagination .btn-sm { min-height: 44px; min-width: 44px; font-size: 0 !important; padding: 0 10px !important; flex: 0 0 auto; justify-content: center; gap: 0; } #view-invoices .il-pagination .btn-sm svg { width: 20px; height: 20px; } #view-invoices .il-pagination-mid { flex-wrap: nowrap; gap: 8px; min-width: 0; flex: 1 1 auto; justify-content: center; } #view-invoices .il-page-info { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #view-invoices .il-perpage-wrap { flex: 0 0 auto; font-size: 12.5px; white-space: nowrap; } #view-invoices #il-perpage { min-height: 44px; font-size: 16px; } #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(2), #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(4), #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(5), #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(6), #view-invoices .inv-panel[data-panel="avoirs"] .invlist-table td:nth-child(7) { display: none; } /* ── Editeur : une colonne, apercu lateral cache (bouton A4 plein ecran a la place) ── */ /* display/flex géré plus haut (bloc « anti gros vide gris ») : ici on ne garde que l'overflow. */ #view-invoices .content-split { overflow: visible; } #view-invoices .preview-panel { display: none; } #view-invoices .form-panel { width: 100%; max-width: none; } #view-invoices .wz-grid-2, #view-invoices .wz-grid-3 { grid-template-columns: 1fr; } #view-invoices .wz-input, #view-invoices .wz-textarea { font-size: 16px; min-height: 44px; } /* Lignes d'article : forcer >= 16px (anti-zoom iOS) — surchargent les 12/13px desktop */ #view-invoices .item-row input, #view-invoices .item-row select { font-size: 16px; } /* ── ARTICLES EN CARTES (maquette validée) : plus de tableau qui déborde, tout empilé verticalement. En-tête du tableau masqué (chaque carte s'auto-étiquette). ── */ #view-invoices .items-scroll-wrap { overflow: visible; } #view-invoices .items-header { display: none; } /* Encadré du MILIEU (.wz-items-wrap) retiré sur mobile : on avait 3 cadres imbriqués (section > wz-items-wrap > carte article). On l'aplatit -> 2 cadres, plus lisible. */ #view-invoices .wz-items-wrap { border: 0; background: none; padding: 0; border-radius: 0; margin-bottom: 0; box-shadow: none; } /* CAUSE du débordement iPhone : #items-container a min-width:480px (pour le tableau desktop). Sur mobile (cartes) il forçait la carte à 480px hors de l'écran -> on neutralise. */ #view-invoices #items-container { min-width: 0; } #view-invoices #items-container .item-row { display: grid; /* minmax(0,1fr) : sans ça, la largeur intrinsèque des (~170px) fait déborder la carte hors de l'écran sur petit mobile (<=430px). Avec, les colonnes rétrécissent. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "desc desc" "qty unit" "pu tva" "ttc ttc"; gap: 12px 10px; position: relative; /* Option A (choix Zouber 2026-07-29) : la ligne n'est PLUS une carte. Une carte blanche par article, posee dans la carte blanche de section, donnait une carte dans une carte. On garde la grille 2x2 (compacte) et on separe les articles par un filet. */ border: 0; /* separateur d'article VOLONTAIREMENT plus marque (#E2E8F0) que le filet interne du TOTAL TTC (#EEF1F5) : sans cet ecart, deux filets identiques se suivaient et la frontiere entre deux articles devenait illisible. */ border-bottom: 1px solid #E2E8F0; border-radius: 0; background: none; padding: 14px 0; margin-bottom: 0; max-width: 100%; } /* dernier article : pas de filet en bas, les boutons d'ajout suivent directement */ #view-invoices #items-container .item-row:last-child { border-bottom: 0; padding-bottom: 6px; } /* chaque cellule peut rétrécir sous la largeur mini de son */ /* Anti-débordement bulletproof : les cellules ET leurs champs peuvent rétrécir sous leur largeur intrinsèque (sinon la carte déborde hors de l'écran sur iPhone). !important pour battre .icol-desc{min-width:130px} et les flex-basis fixes des colonnes desktop. */ #view-invoices .item-row > [class*="icol-"] { min-width: 0 !important; } #view-invoices .item-row input, #view-invoices .item-row select { min-width: 0 !important; max-width: 100%; } #view-invoices .item-row .unit-combobox { min-width: 0 !important; max-width: 100%; } #view-invoices .item-row .icol-desc { grid-area: desc; padding-right: 92px; } #view-invoices .item-row .icol-qty { grid-area: qty; } #view-invoices .item-row .icol-unit { grid-area: unit; } #view-invoices .item-row .icol-pu { grid-area: pu; } #view-invoices .item-row .icol-tva { grid-area: tva; } #view-invoices .item-row .icol-ttc { grid-area: ttc; } /* right: 0 et non 12px : la ligne n'a plus de padding horizontal depuis le passage au cadre unique (option A), les boutons doivent donc s'aligner sur le bord du contenu. */ #view-invoices .item-row .icol-act { position: absolute; top: 12px; right: 0; display: flex; gap: 6px; } #view-invoices .item-row .icol-act button { width: 38px; height: 38px; } /* Champ = libellé (::before) au-dessus + contrôle pleine largeur */ #view-invoices .item-row .icol-qty, #view-invoices .item-row .icol-unit, #view-invoices .item-row .icol-pu, #view-invoices .item-row .icol-tva { display: flex; flex-direction: column; gap: 5px; } #view-invoices .item-row .icol-qty::before { content: "Qté"; } #view-invoices .item-row .icol-unit::before { content: "Unité"; } #view-invoices .item-row .icol-pu::before { content: "Prix unit. HT"; } #view-invoices .item-row .icol-tva::before { content: "TVA"; } #view-invoices .item-row .icol-qty::before, #view-invoices .item-row .icol-unit::before, #view-invoices .item-row .icol-pu::before, #view-invoices .item-row .icol-tva::before { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #94A3B8; } #view-invoices .item-row .icol-qty input, #view-invoices .item-row .icol-unit input, #view-invoices .item-row .icol-pu input { width: 100%; min-height: 44px; text-align: left; } #view-invoices .item-row .icol-tva select { width: 100%; min-height: 44px; } /* Total TTC : ligne "libellé — valeur" pleine largeur (pas la petite boîte grise desktop) */ #view-invoices .item-row .icol-ttc { display: flex; align-items: center; justify-content: space-between; background: none; border: 0; border-top: 1px solid var(--border-soft, #EEF1F5); border-radius: 0; padding: 12px 0 0; margin-top: 2px; font-size: 16px; font-weight: 800; color: var(--text, #1E293B); } #view-invoices .item-row .icol-ttc::before { content: "Total TTC"; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #64748B); } #view-invoices .wz-type-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #view-invoices .wz-stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #view-invoices .wz-stepper::-webkit-scrollbar { display: none; } #view-invoices .wz-conseils-chip { min-height: 44px; } #view-invoices .wz-mobile-preview-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 2px; padding: 12px; border: 1.5px dashed #C7D2FE; border-radius: 12px; background: none; color: var(--primary, #4F46E5); font: inherit; font-size: 14px; font-weight: 600; min-height: 48px; cursor: pointer; } /* Champs client secondaires replies derriere "Plus de details" */ #view-invoices .wz-clmore { display: none; } #view-invoices .wz-clmore.open { display: contents; } #view-invoices .wz-clmore-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 12px; margin: 2px 0 4px; border: 1.5px dashed var(--border, #E2E8F0); border-radius: 12px; background: none; color: var(--primary, #4F46E5); font: inherit; font-size: 13.5px; font-weight: 600; min-height: 46px; cursor: pointer; } /* Footer du wizard : boutons compacts (padding réduit) pour tenir sur UNE ligne au pouce */ /* Barre d'actions = CAPSULE alignée sur les cartes (même marge latérale 12px), au lieu d'une barre bord-à-bord qui cassait le rythme visuel. Les boutons REMPLISSENT la largeur (plus de vide à gauche), l'action principale est la plus large. La zone iOS est déjà réservée une seule fois par .main -> pas de padding-bottom ici. (Option A validée 2026-07-24) */ /* PAS de sticky (2026-07-24) : la barre ne doit pas rester figée par-dessus le contenu — on la découvre en scrollant jusqu'en bas, comme une dernière carte. L'enregistrement reste accessible à tout moment via l'icône « Enregistrer » de l'en-tête (pas de perte de fonction). margin-top:auto = colle en bas seulement s'il reste de la place (formulaire court). */ #view-invoices .wz-step-content { padding-bottom: 0; } /* l'écart vient de la carte (12px), pas d'un double padding */ #view-invoices .wz-step-footer { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; /* 3 boutons (étape 2) sur UNE ligne */ margin: auto 12px 12px; padding: 8px; /* 12px = MÊME écart et MÊMES marges que les cartes */ background: #fff; border: 1px solid var(--border, #E7EAF0); border-radius: 14px; box-shadow: 0 2px 10px -4px rgba(16, 24, 40, .10); } #view-invoices .wz-step-footer > div { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; } #view-invoices .wz-step-footer > div:first-child { flex: 0 0 auto; } /* « Précédent » : largeur naturelle */ #view-invoices .wz-step-footer .wz-btn { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 12px; white-space: nowrap; } #view-invoices .wz-step-footer .wz-btn-primary, #view-invoices .wz-step-footer .wz-btn-validate { flex: 1.6 1 0; } /* action principale plus large */ /* ── Ecran de succes ── */ #view-invoices .wz-success-inner { padding: 34px 18px; } /* ── Recues ── */ #view-invoices .recues-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } #view-invoices .recues-toolbar .btn { min-height: 44px; justify-content: center; } } /* ==================================================================== Wizard facture — écran étroit (iPhone) : libellés courts pour que les 3 boutons du footer (Précédent / Brouillon / Valider) tiennent sur UNE ligne chacun, sans passer sur 2 lignes ni déborder. ==================================================================== */ @media (max-width: 480px) { .wz-lbl-lg { display: none; } .wz-lbl-sm { display: inline; } #view-invoices .wz-step-footer .wz-btn { padding: 0 12px; font-size: 13px; } /* <=480 : les cartes passent à 10px de marge -> la capsule suit, pour rester alignée. */ #view-invoices .wz-step-footer { margin: auto 10px 10px; } } /* ==================================================================== REGISTRES LEGAUX (onglet URSSAF) — tableau -> cartes sur petit ecran (regle 3). Chaque cellule affiche son libelle via data-h + ::before. Breakpoint 768 = tablette (coherent avec la regle projet 480/768) : les tableaux a 5-6 colonnes ne tiennent pas lisiblement sous 768px. ==================================================================== */ @media (max-width: 768px) { #urssaf-registres-card .reg-tablewrap { overflow-x: visible; } #urssaf-registres-card .reg-table thead { display: none; } #urssaf-registres-card .reg-table, #urssaf-registres-card .reg-table tbody, #urssaf-registres-card .reg-table tfoot, #urssaf-registres-card .reg-table tr, #urssaf-registres-card .reg-table td { display: block; width: 100%; } #urssaf-registres-card .reg-table tbody tr { border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; margin-bottom: 10px; background: var(--white); } #urssaf-registres-card .reg-table tbody td { display: grid; grid-template-columns: 42% 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--border); } #urssaf-registres-card .reg-table tbody tr td:last-child { border-bottom: none; } #urssaf-registres-card .reg-table tbody td::before { content: attr(data-h); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); } #urssaf-registres-card .reg-table tbody td.reg-num { text-align: left; } #urssaf-registres-card .reg-table tfoot tr { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #F8FAFC; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-weight: 700; } #urssaf-registres-card .reg-table tfoot td { display: inline; border: none; padding: 0; } #urssaf-registres-card .reg-table tfoot td.reg-num { text-align: right; } } /* ==================================================================== REFONTE URSSAF (2026-07) — tableau de bord : adaptations mobile/tablette. Les composants .urf-* utilisent les tokens app -> le dark marche seul. ==================================================================== */ @media (max-width: 768px) { .urf-wrap { padding: 14px var(--m-gutter); gap: 12px; } .urf-kpis { grid-template-columns: 1fr; } .urf-hero-h2 { font-size: 19px; } .urf-hero-cta { min-height: 44px; } .urf-steps .urf-step-nm { font-size: 11px; } .urf-steps .urf-step-st { font-size: 10px; } .urf-step-cir { width: 34px; height: 34px; } .urf-stephint { display: none; } /* pas la place a cote du titre sur mobile */ .urf-prov-v { font-size: 19px; } /* LOT 2 : detail declaration + liste factures en pile lisible sur mobile */ .urf-dcl-amt { font-size: 30px; } .urf-dcl-payv { font-size: 25px; } .urf-dcl-copy { width: 100%; } /* Table des factures -> cartes verticales (patron mobile projet) */ .urf-fac-tbl, .urf-fac-tbl tbody, .urf-fac-tbl tfoot { display: block; } .urf-fac-tbl thead { display: none; } .urf-fac-tbl tbody tr { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; } .urf-fac-tbl tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: right; } .urf-fac-tbl tbody td::before { content: attr(data-l); color: var(--text-muted); font-weight: 600; text-align: left; font-size: 11.5px; } .urf-fac-tbl tbody td.urf-fac-cli { font-weight: 700; font-size: 14px; padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .urf-fac-tbl tbody td.urf-fac-cli::before { content: ""; } .urf-fac-tbl tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 4px; } .urf-fac-tbl tfoot td { padding: 0; border: 0; } .urf-fac-tbl tfoot td:first-child { flex: 1; min-width: 0; } .urf-fac-tbl tfoot td.urf-fac-num { white-space: nowrap; flex: 0 0 auto; } /* LOT 3 : echeancier en 2 colonnes propres sur mobile (au lieu de l'auto-fill) */ .urf-ech-grid-m, .urf-ech-grid-q { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 400px) { .urf-hkpis { grid-template-columns: 1fr; } /* KPI du hero empiles sur tres petit ecran */ } /* ============================================================ TOP CLIENTS — modale periode en PLEIN ECRAN sur mobile (regle 3), meme comportement que la modale Objectif du dashboard. ============================================================ */ @media (max-width: 480px) { #view-clients .topclients-card { margin: 12px 14px 0; } .tcm-modal { top: 0; left: 0; transform: none; width: 100%; max-width: 100%; min-height: 100dvh; max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 0; box-shadow: none; padding: calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 18px); display: flex; flex-direction: column; } .tcm-modal.open { transform: none; } .tcm-foot { margin-top: auto; } /* boutons colles en bas */ .tcm-opt { min-height: 52px; } /* cible tactile confortable */ .tcm-foot button { min-height: 48px; } } /* ========================================================================= AVOIR LIGNE PAR LIGNE — MOBILE Tableau -> cartes verticales, champs a 16px (anti-zoom iOS), cibles tactiles. PAS DE MODALE PLEIN ECRAN ICI — exception assumee a la regle 3. Le plein ecran a ete livre le 2026-08-01 puis RETIRE le jour meme : Zouber l'a teste sur iPhone et ne l'a pas aime (« je trouve ca pas beau »). La carte centree est conservee volontairement. Ne pas la « corriger » lors d'un futur audit de conformite mobile : c'est un choix, pas un oubli. POURQUOI DES !important : le balisage de cette modale est stylé en attributs style="" INLINE (font-size:13px sur les champs, etc.). Un style inline bat toujours une feuille de style, sauf !important. Sans lui, le champ Motif restait a 13px et Safari ZOOMAIT sur l'ecran au moment de la saisie (mesure navigateur du 2026-08-01). L'appli installee sur l'ecran d'accueil ne zoome pas, mais le site ouvert dans Safari si. ========================================================================= */ @media (max-width: 480px) { /* 16px minimum : en dessous, Safari zoome automatiquement sur le champ au focus */ #avoir-detail-modal input, #avoir-detail-modal select, #avoir-detail-modal textarea { font-size: 16px !important; } #avoir-detail-modal button[data-action="avoir-detail-submit"], #avoir-detail-modal button[data-action="avoir-detail-close"] { min-height: 48px !important; } /* La carte reste centree, mais elle ne doit pas deborder de l'ecran quand la facture a beaucoup de lignes : le conteneur porte overflow:hidden en inline, donc sans cette limite le bas du formulaire serait purement et simplement coupe, bouton « Enregistrer » compris. */ #avoir-detail-modal > div { max-height: calc(100dvh - 32px) !important; display: flex !important; flex-direction: column !important; } #avoir-detail-modal > div > div:nth-child(2) { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .avl-seg button { min-height: 44px; font-size: 14px; } /* Tableau -> cartes : une ligne = un bloc, montant a droite */ .avl-head { display: none; } .avl-row { grid-template-columns: 26px minmax(0,1fr) auto; grid-template-areas: "ck desc amt" ". qty amt"; row-gap: 8px; padding: 12px; min-height: 56px; } .avl-row > .avl-ck { grid-area: ck; } .avl-row > .avl-cell { grid-area: desc; } .avl-row > .avl-qw { grid-area: qty; } .avl-row > .avl-tv { display: none; } /* le taux est repris dans .avl-meta */ .avl-row > .avl-amt { grid-area: amt; align-self: center; } /* case a cocher confortable au doigt (18px suffit a la souris, pas au tactile) */ .avl-row input[type=checkbox] { width: 24px !important; height: 24px !important; } .avl-qty { width: 96px; } .avl-qw { display: flex; align-items: center; gap: 6px; } .avl-qw::before { content: "Qté"; font-size: 12px; color: #94A3B8; } } /* ========================================================================= AVOIR OUVERT DEPUIS « + » — PLEIN ECRAN MOBILE (regle 3) Uniquement ce chemin : body.avm-page est pose par _avmMount('page'). La modale ouverte DEPUIS UNE FACTURE garde sa carte centree — choix explicite de Zouber du 2026-08-01 (« je trouve ca pas beau » en plein ecran). Les deux cohabitent parce que ce ne sont pas les memes ecrans : ici c'est une page a part entiere, la-bas une fenetre posee sur la facture qu'on regarde. ========================================================================= */ @media (max-width: 480px) { body.avm-page #avoir-form-card { position:fixed; inset:0; z-index:9600; margin:0; border-radius:0; height:100dvh; display:flex; flex-direction:column; overflow:hidden; padding-top:env(safe-area-inset-top); } body.avm-page #avoir-form-card > .avoir-form-header { flex:0 0 auto; } body.avm-page #avoir-editor-host { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(12px + env(safe-area-inset-bottom)); } /* la barre de navigation du bas ne doit pas recouvrir le bouton d'enregistrement */ body.avm-page .m-nav { display:none; } body.avm-page #avoir-editor input, body.avm-page #avoir-editor select { font-size:16px !important; } }