/* Quaeroo — jetons de style et composants communs. Design 2026 (decision 0126), direction « M » validee par Manu le 2026-10-21 : base douce, palette « accent unique », Geist. */ /* ═══ JETONS ══════════════════════════════════════════════════════════════════════════════════ LES VALEURS SONT CELLES DE LA MAQUETTE (`M/quaeroo-m.css`, retouchee a la main le 21/10 : en CLAIR, accent, focus, barre laterale active, barre courante et bulle valent le petrole #0F3D47 ; le SOMBRE reste tel quel). Les NOMS d'avant (decision 0098 : `--primaire`, `--succes`...) sont GARDES et pointent sur la nouvelle palette : un ecran qui les lit change sans etre touche. Ecarts voulus, pour l'accessibilite, tous deux hors de la maquette (qui ne s'en sert pas) : `--texte-faible` (4,5:1 sur toutes les surfaces) et `--bord-champ` (3:1 sur une surface, pour reconnaitre un champ de formulaire, WCAG 1.4.11). LE MODE SOMBRE : `data-theme="dark"` pose sur la racine (choix « Sombre »), ou le systeme quand rien n'est choisi (`data-theme="light"` le bloque : choix « Clair »). Le choix est pose AVANT le premier rendu par le script que le serveur injecte en tete de page (`services/livraison`). AUCUNE COULEUR EN DUR HORS DE CE BLOC : `tests/test_design_2026.py` le verifie. */ :root { --fond: #F4F4F0; --degrade: radial-gradient(60rem 34rem at -8% -12%, rgba(196, 232, 214, .80), rgba(196, 232, 214, 0) 62%), radial-gradient(52rem 30rem at 108% -8%, rgba(255, 222, 194, .72), rgba(255, 222, 194, 0) 60%), radial-gradient(64rem 40rem at 72% 112%, rgba(220, 212, 250, .70), rgba(220, 212, 250, 0) 62%); --surface: #FFFFFF; --surface-2: #F4F4F1; --surface-3: #EBEBE6; --bord: #E7E7E1; --bord-fort: #CFCFC8; --bord-champ: #8E8F94; --texte: #38393D; --texte-moyen: #4A4B50; --texte-doux: #66676C; --texte-faible: #66676C; --accent: #0F3D47; --accent-texte: #FFFFFF; --accent-survol: #0A2C34; --accent-pale: #E5ECEC; --lien: #38393D; --survol: rgba(56, 57, 61, .045); --focus: #0F3D47; --selection: #E8F3EB; --rail-fond: transparent; --rail-texte: #55565B; --rail-actif-fond: #0F3D47; --rail-actif-texte: #FFFFFF; /* Les cartes d'indicateur : 1 alerte pleine (terracotta), 2 vedette pleine (petrole), 3 et 4 blanches a bord fin. */ --c1-fond: #85361E; --c1-texte: #FFFFFF; --c1-doux: #EEE3E0; --c1-valeur: #FFFFFF; --c1-icone: #FFFFFF; --c1-bord: transparent; --c2-fond: #0F3D47; --c2-texte: #FFFFFF; --c2-doux: #DDE4E5; --c2-valeur: #FFFFFF; --c2-icone: #FFFFFF; --c2-bord: transparent; --c3-fond: #FFFFFF; --c3-texte: #38393D; --c3-doux: #5F6066; --c3-valeur: #38393D; --c3-icone: #38393D; --c3-bord: #D9DAD3; --c4-fond: #FFFFFF; --c4-texte: #38393D; --c4-doux: #5F6066; --c4-valeur: #38393D; --c4-icone: #38393D; --c4-bord: #D9DAD3; /* Les etats : paye (vert), echu (terracotta plein), envoye (bleu), brouillon (gris), partiel (violet). Pas de jaune. */ --ok-fond: #E3F2E7; --ok-texte: #2D6A43; --alerte-fond: #85361E; --alerte-texte: #FFFFFF; --alerte-trait: #85361E; --attente-fond: #E2EEFC; --attente-texte: #28569C; --brouillon-fond: #EEEEEA; --brouillon-texte: #5A5B60; --partiel-fond: #ECE7FB; --partiel-texte: #4B3F86; /* LE FEU DE SANTE DES TIERS (decision 0145) : terracotta, ocre brule sobre (pas de jaune), sauge, gris. Texte sur fond pale : contraste AA en clair comme en sombre. */ --feu-rouge: #85361E; --feu-rouge-pale: #F6ECE8; --feu-ocre: #8A5300; --feu-ocre-pale: #F6EDDF; --feu-vert: #3E6A4D; --feu-vert-pale: #E6EFE8; --feu-gris: #5F6066; --feu-gris-pale: #EEEEEA; /* Le graphique : barres, mois en cours, mois prevus (seuls a porter des hachures), bulle. */ --barre: #DADBD4; --barre-courante: #0F3D47; --barre-future: rgba(56, 57, 61, .34); --bulle-fond: #0F3D47; --bulle-texte: #FFFFFF; --ombre: 0 1px 2px rgba(40, 40, 30, .04), 0 8px 24px -12px rgba(40, 40, 30, .10); --ombre-menu: 0 2px 6px rgba(30, 30, 25, .06), 0 24px 48px -16px rgba(30, 30, 25, .22); --ombre-bouton: 0 8px 20px -10px rgba(56, 57, 61, .6); --voile: rgba(10, 12, 16, .4); --voile-tiroir: rgba(10, 12, 16, .62); /* Le PAPIER : un document ou un courriel montre tel qu'il sera imprime ou recu, blanc dans les deux modes. */ --papier: #FFFFFF; --logo-filtre: none; /* Ce qui pose sur une photographie ou sur le petrole plein : toujours clair, dans les deux modes. */ --sur-sombre: #FFFFFF; --sur-sombre-doux: rgba(255, 255, 255, .5); --sur-sombre-survol: rgba(255, 255, 255, .12); --voile-photo: rgba(12, 17, 24, .28); --voile-photo-bas: rgba(12, 17, 24, .52); --voile-credit: rgba(12, 17, 24, .72); --ombre-defile: rgba(16, 24, 40, .18); /* LES NOMS D'AVANT (decision 0098), sur la nouvelle palette. */ --primaire: var(--accent); --primaire-survol: var(--accent-survol); --primaire-clair: var(--accent-survol); --primaire-pale: var(--accent-pale); --sur-primaire: var(--accent-texte); --marque: #66676C; --info-pale: #EDF1F1; --succes: #2D6A43; --succes-pale: #E3F2E7; --alerte: #85361E; --alerte-pale: #F6ECE8; --danger: #85361E; --danger-pale: #F3E4DF; --signal: var(--alerte-trait); --anneau: 0 0 0 3px rgba(15, 61, 71, .22); --ombre-forte: var(--ombre-menu); /* Formes, typographie, mouvement (maquette). */ --rayon: 28px; --rayon-indic: 30px; --rayon-menu: 24px; --rayon-s: 14px; --rayon-xs: 10px; --rayon-carte: 28px; --police-systeme: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --police: "Geist", var(--police-systeme); --g-texte: 450; --g-fort: 450; --g-titre: 300; --trait: 1.5; --h1-taille: clamp(34px, 3.4vw, 50px); --h1-taille-mobile: 32px; --h1-approche: -.035em; --valeur-taille: clamp(34px, 3.1vw, 48px); --valeur-taille-2: clamp(34px, 3.2vw, 52px); --valeur-taille-3: 34px; --valeur-taille-mobile: 28px; --valeur-approche: -.04em; --barre-rayon: 999px; --barre-l: 30px; --hachures: repeating-linear-gradient(135deg, var(--barre-future) 0 1.5px, transparent 1.5px 7px); --grille: linear-gradient(to bottom, var(--bord) 1px, transparent 1px); --d1: 120ms; --d2: 180ms; --d3: 240ms; --d-barres: 600ms; --pas: 35ms; --courbe: cubic-bezier(.2, .7, .2, 1); --courbe-sortie: cubic-bezier(.16, 1, .3, 1); --duree: var(--d1); --hauteur-barre: 66px; --largeur-rail: 248px; --mobile-fond: var(--accent); --mobile-texte: var(--accent-texte); --mobile-actif-fond: var(--accent-texte); --mobile-actif-texte: var(--accent); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --feu-rouge: #F2A486; --feu-rouge-pale: #3A2A24; --feu-ocre: #E2B36E; --feu-ocre-pale: #382E20; --feu-vert: #A7CDB1; --feu-vert-pale: #22302A; --feu-gris: #B9BAB5; --feu-gris-pale: #2D2E31; --fond: #141518; --degrade: radial-gradient(60rem 34rem at -8% -12%, rgba(104, 150, 128, .16), rgba(104, 150, 128, 0) 62%), radial-gradient(52rem 30rem at 108% -8%, rgba(170, 130, 100, .13), rgba(170, 130, 100, 0) 60%), radial-gradient(64rem 40rem at 72% 112%, rgba(130, 118, 180, .14), rgba(130, 118, 180, 0) 62%); --surface: #1C1D21; --surface-2: #24252A; --surface-3: #2D2E34; --bord: #2C2D33; --bord-fort: #43444B; --bord-champ: #74757C; --texte: #ECECE8; --texte-moyen: #CFD0D3; --texte-doux: #A9AAAF; --texte-faible: #9A9BA0; --accent: #ECECE8; --accent-texte: #1C1D21; --accent-survol: #FFFFFF; --accent-pale: #2B2D32; --lien: #ECECE8; --survol: rgba(236, 236, 232, .05); --focus: #ECECE8; --selection: #1F2C25; --rail-texte: #B4B5BA; --rail-actif-fond: #ECECE8; --rail-actif-texte: #1C1D21; --c1-fond: #8A3A22; --c1-doux: #EFE3E0; --c2-fond: #155461; --c2-doux: #DEE7E9; --c3-fond: #1C1D21; --c3-texte: #ECECE8; --c3-doux: #A9AAAF; --c3-valeur: #ECECE8; --c3-icone: #ECECE8; --c3-bord: #3A3B42; --c4-fond: #1C1D21; --c4-texte: #ECECE8; --c4-doux: #A9AAAF; --c4-valeur: #ECECE8; --c4-icone: #ECECE8; --c4-bord: #3A3B42; --ok-fond: #1F3328; --ok-texte: #A1DCB5; --alerte-fond: #8A3A22; --alerte-trait: #F2A486; --attente-fond: #1D2A3E; --attente-texte: #A3C6F4; --brouillon-fond: #2A2B30; --brouillon-texte: #BBBCC0; --partiel-fond: #28253A; --partiel-texte: #CFC6F5; --barre: #3A3B42; --barre-courante: #ECECE8; --barre-future: rgba(236, 236, 232, .30); --bulle-fond: #ECECE8; --bulle-texte: #1C1D21; --ombre: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px -14px rgba(0, 0, 0, .5); --ombre-menu: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 48px -16px rgba(0, 0, 0, .6); --ombre-bouton: none; --logo-filtre: brightness(1.75); --ombre-defile: rgba(0, 0, 0, .45); --marque: #A9AAAF; --info-pale: #23272B; --succes: #A1DCB5; --succes-pale: #1F3328; --alerte: #F2A486; --alerte-pale: #3A2A24; --danger: #F2A486; --danger-pale: #43291F; --anneau: 0 0 0 3px rgba(236, 236, 232, .28); color-scheme: dark; } } :root[data-theme="dark"] { --feu-rouge: #F2A486; --feu-rouge-pale: #3A2A24; --feu-ocre: #E2B36E; --feu-ocre-pale: #382E20; --feu-vert: #A7CDB1; --feu-vert-pale: #22302A; --feu-gris: #B9BAB5; --feu-gris-pale: #2D2E31; --fond: #141518; --degrade: radial-gradient(60rem 34rem at -8% -12%, rgba(104, 150, 128, .16), rgba(104, 150, 128, 0) 62%), radial-gradient(52rem 30rem at 108% -8%, rgba(170, 130, 100, .13), rgba(170, 130, 100, 0) 60%), radial-gradient(64rem 40rem at 72% 112%, rgba(130, 118, 180, .14), rgba(130, 118, 180, 0) 62%); --surface: #1C1D21; --surface-2: #24252A; --surface-3: #2D2E34; --bord: #2C2D33; --bord-fort: #43444B; --bord-champ: #74757C; --texte: #ECECE8; --texte-moyen: #CFD0D3; --texte-doux: #A9AAAF; --texte-faible: #9A9BA0; --accent: #ECECE8; --accent-texte: #1C1D21; --accent-survol: #FFFFFF; --accent-pale: #2B2D32; --lien: #ECECE8; --survol: rgba(236, 236, 232, .05); --focus: #ECECE8; --selection: #1F2C25; --rail-texte: #B4B5BA; --rail-actif-fond: #ECECE8; --rail-actif-texte: #1C1D21; --c1-fond: #8A3A22; --c1-doux: #EFE3E0; --c2-fond: #155461; --c2-doux: #DEE7E9; --c3-fond: #1C1D21; --c3-texte: #ECECE8; --c3-doux: #A9AAAF; --c3-valeur: #ECECE8; --c3-icone: #ECECE8; --c3-bord: #3A3B42; --c4-fond: #1C1D21; --c4-texte: #ECECE8; --c4-doux: #A9AAAF; --c4-valeur: #ECECE8; --c4-icone: #ECECE8; --c4-bord: #3A3B42; --ok-fond: #1F3328; --ok-texte: #A1DCB5; --alerte-fond: #8A3A22; --alerte-trait: #F2A486; --attente-fond: #1D2A3E; --attente-texte: #A3C6F4; --brouillon-fond: #2A2B30; --brouillon-texte: #BBBCC0; --partiel-fond: #28253A; --partiel-texte: #CFC6F5; --barre: #3A3B42; --barre-courante: #ECECE8; --barre-future: rgba(236, 236, 232, .30); --bulle-fond: #ECECE8; --bulle-texte: #1C1D21; --ombre: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px -14px rgba(0, 0, 0, .5); --ombre-menu: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 48px -16px rgba(0, 0, 0, .6); --ombre-bouton: none; --logo-filtre: brightness(1.75); --ombre-defile: rgba(0, 0, 0, .45); --marque: #A9AAAF; --info-pale: #23272B; --succes: #A1DCB5; --succes-pale: #1F3328; --alerte: #F2A486; --alerte-pale: #3A2A24; --danger: #F2A486; --danger-pale: #43291F; --anneau: 0 0 0 3px rgba(236, 236, 232, .28); color-scheme: dark; } /* Geist (licence OFL, `polices/OFL-geist.txt`), servie par l'instance : deux graisses fixes, 300 pour les titres et les grands montants, 450 pour tout le reste (la maquette n'en a pas d'autre ; un gras demande se dessine en 450, `font-synthesis: none`). Sous-ensemble latin etendu, espaces fines francaises ajoutees (U+202F, U+2009, U+2007 : la fonte source ne les a pas). `swap` : le texte s'affiche tout de suite dans la police du systeme. Sur une connexion lente ou economique, `.leger` est pose avant le premier rendu et rien n'est telecharge. L'adresse porte l'EMPREINTE du fichier (12 caracteres du SHA-256, comme `services/livraison`) : le serveur ne reecrit pas les adresses d'une feuille de style, et un fichier sans `?v=` serait revalide a chaque page. `test_design_2026.py` verifie que l'empreinte est celle du fichier. */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 380; font-display: swap; src: url("../polices/geist-300.woff2?v=8dfd72efff2b") format("woff2"); } @font-face { font-family: "Geist"; font-style: normal; font-weight: 381 900; font-display: swap; src: url("../polices/geist-450.woff2?v=3925066296a7") format("woff2"); } .leger { --police: var(--police-systeme); } * { box-sizing: border-box; } /* Doit rester en tete : toute classe posant un display battrait cet attribut sinon, et l'on corrigerait ensuite composant par composant au lieu d'une fois pour toutes. */ [hidden] { display: none !important; } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--primaire); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 .4rem; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: 1.4rem; } h2 { font-size: 1.05rem; } h3 { font-size: .9rem; } p { margin: 0 0 .6rem; } /* ── Bandeau de demonstration ─────────────────────────────────────── */ .bandeau-maquette, .bandeau-demo { background: var(--accent); color: var(--accent-texte); font-size: 12px; padding: 6px 16px; text-align: center; letter-spacing: .02em; } .bandeau-maquette strong, .bandeau-demo strong { color: inherit; } /* ── Bandeau de mise a jour ───────────────────────────────────────── */ /* En BAS et non en haut : le haut porte deja le bandeau de demonstration et la barre de navigation, et un troisieme bandeau qui pousse la page vers le bas deplacerait ce que la personne est en train de viser. Fixe, au-dessus du reste, mais il n'occupe pas la largeur entiere : il ne bloque pas la lecture, il se ferme, et il ne recharge rien tout seul. */ .bandeau-maj { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: calc(100% - 32px); background: var(--surface); color: var(--texte); border: 1px solid var(--bord); border-radius: 10px; box-shadow: var(--ombre-forte); padding: 10px 14px; font-size: 13px; } .bandeau-maj strong { font-weight: 600; } .bandeau-maj .bouton { white-space: nowrap; } /* LE TEXTE NE SE LAISSE PLUS ECRASER PAR LES BOUTONS. Le bandeau etait un `flex` SANS repli : les deux boutons portent `white-space: nowrap` et gardaient donc leur largeur entiere, pendant que la phrase se comprimait jusqu'a UN MOT PAR LIGNE. Constate sur un telephone le 2026-10-01 -- le bandeau faisait toute la hauteur de l'ecran pour trois phrases. Une base de 240 px decide du repli : des que la phrase et les boutons ne tiennent plus ensemble, les boutons passent dessous et la phrase reprend toute la largeur. `min-width: 0` parce qu'un element flexible refuse par defaut de descendre sous la largeur de son plus long mot, ce qui ferait deborder le bandeau sur un ecran etroit. */ .bandeau-maj > span { flex: 1 1 240px; min-width: 0; } .bandeau-maj .boutons { margin-left: auto; } @media print { .bandeau-maj { display: none !important; } } /* SUR UN TELEPHONE, IL PREND LA LARGEUR. Ailleurs il est volontairement etroit -- « il n'occupe pas la largeur entiere, il ne bloque pas la lecture » -- et cette intention se retourne contre elle sous 620 px : un `position: fixed` sans largeur se reduit a son contenu, et le bandeau devenait une colonne de 250 px haute de 155 px au milieu de l'ecran. Mesure du 2026-10-01 sur un ecran de 500 px. Etale sur toute la largeur, il tient en deux lignes au bas de l'ecran, ou on l'attend. */ @media screen and (max-width: 620px) { .bandeau-maj { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; } } /* ── Ossature ─────────────────────────────────────────────────────── */ /* `minmax(0, 1fr)` et non `1fr` : une piste `1fr` a pour minimum implicite `auto`, donc la largeur MINIMALE de son contenu. Un tableau large y pousse la piste au-dela de la fenetre, et c'est toute la page qui se met a defiler lateralement -- en-tete et barre d'outils compris. Mesure du 2026-09-29 : la piste resolvait a 1180px dans une fenetre de 1280, soit 1412px de grille, sur six ecrans (factures, achats, catalogue, stock, collaborateurs, fonctions). Le `overflow-x: auto` de `.tableau-defile` ne suffit pas : il borne le tableau, pas la piste. */ .appli { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 29px); } .rail { background: var(--surface); border-right: 1px solid var(--bord); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; } .rail .marque { font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; color: var(--primaire); padding: 4px 10px 16px; } .rail .groupe { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-faible); padding: 14px 10px 5px; font-weight: 600; } .rail a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--rayon-s); color: var(--texte-doux); font-weight: 500; } .rail a:hover { background: var(--surface-2); text-decoration: none; color: var(--texte); } .rail a.actif { background: var(--primaire-pale); color: var(--primaire); font-weight: 600; } .rail svg { width: 16px; height: 16px; flex: 0 0 16px; } .principal { padding: 22px 26px 60px; max-width: 1180px; } .entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .entete .sous-titre { color: var(--texte-doux); margin: 0; } /* ── Composants ───────────────────────────────────────────────────── */ .carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; } /* `minmax(0, 1fr)` des la grille NUE : sans piste declaree, la colonne implicite vaut `auto`, donc elle se laisse pousser par le plus large de ses enfants. */ .grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } /* `min(100%, N)` et non `N` : un `minmax(260px, 1fr)` impose 260 px a chaque colonne, meme quand la fenetre n'en fait pas 300. La grille deborde alors, et avec elle toute la page -- constate le 2026-09-29 sur le tableau de bord a 390 px, qui s'etalait sur 606. Avec `min(100%, N)`, la colonne se replie au lieu de pousser. Les reglages de repli plus bas restent : ils choisissent un NOMBRE de colonnes, celui-ci empeche seulement le debordement. */ .grille.c2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .grille.c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .grille.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); } .indicateur .libelle { color: var(--texte-doux); font-size: 12px; margin-bottom: 4px; } .indicateur .valeur { font-size: 1.55rem; font-weight: 650; letter-spacing: -.02em; } .indicateur .detail { font-size: 12px; color: var(--texte-faible); margin-top: 2px; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-faible); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--bord); background: var(--surface-2); } tbody td { padding: 10px 12px; border-bottom: 1px solid var(--bord); } tbody tr:hover { background: var(--surface-2); } td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; } .tableau-cadre { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); } .tableau-defile { overflow-x: auto; } /* LA COLONNE D'ACTIONS RESTE VISIBLE QUAND LE TABLEAU DEFILE. Un tableau large se defile de gauche a droite ; les boutons vivent a droite, donc ils disparaissent -- et sur une liste haute de deux mille pixels, personne ne redescend chercher la barre de defilement. Signale sur l'ecran des collaborateurs le 2026-09-29, ou « Dossier » et « Modifier » etaient coupes net. La regle ne vaut qu'au-dessus de 620 px : en dessous, `tableau()` replie ses lignes en fiches et il n'y a plus de colonne a retenir. */ @media (min-width: 621px) { .tableau-defile th:last-child:empty, .tableau-defile td:last-child:has(.boutons) { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -8px 0 8px -8px var(--ombre-defile); } .tableau-defile th:last-child:empty { background: var(--surface-2); } .tableau-defile tbody tr:hover td:last-child:has(.boutons) { background: var(--surface-2); } /* LE MENU « … » OUVERT PASSE AU-DESSUS DES LIGNES SUIVANTES (recette de Manu du 2026-10-23) : la cellule collante de chaque ligne forme son propre empilement (z-index 1), et celle de la ligne d'apres, plus loin dans le document, recouvrait la liste ouverte. On eleve la cellule qui porte le menu ouvert, et elle seule. */ .tableau-defile td:last-child:has(.menu-actions-liste:not([hidden])) { z-index: 75; } } .etiquette { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .etiquette.neutre { background: var(--surface-2); color: var(--texte-doux); } .etiquette.info { background: var(--primaire-pale); color: var(--primaire); } .etiquette.succes { background: var(--succes-pale); color: var(--succes); } .etiquette.alerte { background: var(--alerte-pale); color: var(--alerte); } .etiquette.danger { background: var(--danger-pale); color: var(--danger); } .bouton { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--rayon-s); border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; } .bouton:hover { background: var(--surface-2); text-decoration: none; } .bouton.primaire { background: var(--primaire); border-color: var(--primaire); color: var(--sur-primaire); } .bouton.primaire:hover { background: var(--primaire-clair); } /* LE BOUTON QUI DETRUIT SE DISTINGUE DE CELUI QUI NE DETRUIT PAS (2026-10-01). La charte n'en avait aucun : « Supprimer » et « Modifier » etaient deux boutons rigoureusement identiques, cote a cote, sur la facture et le devis. Le jeton `--danger` existait deja pour les etiquettes, les lignes et les notifications -- il manquait a la seule commande qui perd quelque chose. PAS UN APLAT ROUGE : il entrerait en concurrence avec l'action principale de l'ecran, qui est presque toujours celle qu'on veut. Le contour et le texte suffisent a faire hesiter. */ /* LE MARQUEUR DE CHAMP OBLIGATOIRE. Il porte la couleur d'alerte et non celle de l'intitule : de la meme teinte, il se lit comme une coquille de frappe plutot que comme une indication. Il est `aria-hidden` dans le gabarit -- le controle porte deja `required`, que les lecteurs d'ecran annoncent eux-memes, et le dire deux fois dont une en « etoile » n'aide personne. */ /* ── Le guide de demarrage, sur l'accueil (2026-10-01) ──────────────────────────────────────── Il doit se lire d'un coup d'oeil par quelqu'un qui ouvre le produit pour la premiere fois : une etape par ligne, ce qu'elle apporte sous son titre, et un seul geste a droite. Rien de repliable, rien a decouvrir : ce qui se cache derriere un chevron n'est pas lu le premier jour. La jauge DOUBLE le compteur chiffre au lieu de le remplacer. Une barre seule se lit « a peu pres a moitie » ; le chiffre dit « 2 sur 6 », ce qui est la seule phrase qui renseigne. */ .demarrage-compteur { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .demarrage-chiffre { font-size: 13px; font-weight: 600; color: var(--texte-doux); } .demarrage-jauge { display: block; width: 132px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .demarrage-jauge i { display: block; height: 100%; background: var(--primaire); border-radius: 3px; } .demarrage-groupe { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-faible); margin: 18px 0 8px; } .demarrage-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .demarrage-etape { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon-s); background: var(--surface); } /* UNE ETAPE FAITE S'EFFACE SANS DISPARAITRE. Elle reste lisible -- on doit pouvoir verifier ce qu'on a deja regle -- mais elle cesse d'attirer l'oeil, qui n'a a se poser que sur ce qui reste. */ .demarrage-etape.faite { background: var(--surface-2); border-color: transparent; } .demarrage-etape.faite .demarrage-texte strong { color: var(--texte-doux); font-weight: 600; } .demarrage-puce { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--bord); color: var(--sur-primaire); font-size: 12px; line-height: 1; } .demarrage-etape.faite .demarrage-puce { background: var(--primaire); border-color: var(--primaire); } .demarrage-texte { flex: 1 1 auto; min-width: 0; } .demarrage-texte strong { display: block; font-size: 14px; } .demarrage-texte p { margin: 3px 0 0; font-size: 12.5px; color: var(--texte-doux); line-height: 1.35; } /* Sous le seuil telephone, le geste passe SOUS son explication plutot que de la comprimer : un bouton « Y aller » colle au bord droit laisse quarante caracteres par ligne au texte qui le justifie, et c'est ce texte qui decide si on y va. */ @media screen and (max-width: 620px) { /* SEUL LE GESTE PASSE A LA LIGNE. La pastille et le titre restent cote a cote -- c'est la pastille qui dit « fait » d'un coup d'oeil, et elle ne dit plus rien posee seule au-dessus d'un titre. Vu a l'ecran le 2026-10-01 : `flex: 1 1 100%` sur le texte renvoyait la pastille sur sa propre ligne. C'est au BOUTON de prendre toute la largeur, pas au texte. */ .demarrage-etape { flex-wrap: wrap; } /* BASE ZERO, ET NON `auto`. Avec `flex: 1 1 auto`, la base d'un element est la largeur de son CONTENU : le paragraphe d'explication reclamait plus que la place restante et se jetait sur sa propre ligne, laissant la pastille seule au-dessus du titre. Mesure du 2026-10-01 a 500 px : pastille en y=402, texte en y=436, tous deux en x=44. Avec une base nulle, le texte prend ce qui reste a cote de la pastille au lieu de le reclamer. */ .demarrage-texte { flex: 1 1 0; } .demarrage-etape .bouton, .demarrage-etape .etiquette { flex: 1 1 100%; margin-left: 34px; margin-top: 2px; } /* `max-width: max-content` RETIRE : il annulait le repli qu'on venait de demander. Le repli d'une ligne flexible se decide sur la taille HYPOTHETIQUE de l'element, laquelle est deja bornee par `max-width` -- le bouton tenait donc sur la ligne et n'allait jamais dessous. Mesure du 2026-10-01 a 500 px : l'etiquette « Fait », qui n'a pas de borne, se repliait ; le bouton « Y aller », qui en avait une, restait a droite. Pleine largeur, donc, ce qui est de toute facon la bonne cible pour un pouce. */ .demarrage-etape .bouton { justify-content: center; } .demarrage-compteur { align-items: flex-start; } } .champ label .requis { color: var(--danger); font-weight: 600; } .bouton.danger { border-color: var(--danger); color: var(--danger); } .bouton.danger:hover { background: var(--danger-pale); border-color: var(--danger); } .bouton svg { width: 15px; height: 15px; } .champ { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; } .champ label { font-size: 12.5px; font-weight: 600; color: var(--texte-doux); } .champ input, .champ select, .champ textarea { padding: 8px 11px; border: 1px solid var(--bord-fort); border-radius: var(--rayon-s); font-family: inherit; font-size: 13.5px; background: var(--surface); color: var(--texte); } .champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--primaire-pale); border-color: var(--primaire); outline-offset: 0; } /* UN CHAMP QU'ON NE PEUT PAS SAISIR LE DIT, et il le dit AVANT qu'on essaie. Un champ en lecture seule dessine comme les autres se lit comme un champ ordinaire : on clique, on tape, rien ne se passe, et on cherche la panne. Le premier cas est le montant remboursé d'une dépense en devise étrangère, que le serveur calcule (décision 0042) — mais la règle vaut pour tout champ qui porte `readonly`, aujourd'hui comme demain. Le curseur change AUSSI : la couleur seule ne suffit pas à qui distingue mal les gris. */ .champ input[readonly], .champ textarea[readonly] { background: var(--fond); color: var(--texte-doux); cursor: not-allowed; } .champ .aide { font-size: 11.5px; color: var(--texte-faible); } .note { border-left: 3px solid var(--primaire); background: var(--primaire-pale); padding: 10px 13px; border-radius: 0 var(--rayon-s) var(--rayon-s) 0; font-size: 13px; } .note.alerte { border-color: var(--alerte); background: var(--alerte-pale); } .note.danger { border-color: var(--danger); background: var(--danger-pale); } .note .titre { font-weight: 650; margin-bottom: 2px; } .vide { text-align: center; padding: 40px 20px; color: var(--texte-faible); } /* ─── Ajouts apres la premiere serie d'ecrans ─────────────────────── Chacune de ces classes comble un manque signale independamment par plusieurs personnes ayant construit un ecran. Elles etaient toutes contournees par un detournement de `.grille` ou par un element nu : ce n'est pas un confort. */ /* Pile verticale. Detournee jusqu'ici en `.grille` sans modificateur. */ .pile { display: flex; flex-direction: column; gap: 14px; } .pile.serre { gap: 8px; } /* Barre d'outils : recherche, filtres et boutons sur une ligne. */ .barre { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .barre .champ { margin-bottom: 0; } .barre .pousse { margin-left: auto; } /* Groupe de boutons, jusqu'ici separes par une simple espace. */ .boutons { display: flex; flex-wrap: wrap; gap: 8px; } /* Texte secondaire autonome : `.sous-titre`, `.aide` et `.detail` sont tous scopes a un parent, donc inutilisables ailleurs. */ .doux { color: var(--texte-doux); } .faible { color: var(--texte-faible); font-size: 12.5px; } /* Champs de largeur reglable : `.champ input` s'etire sinon a tout le conteneur. */ .champ.court input, .champ.court select { max-width: 190px; } .champ.etroit input, .champ.etroit select { max-width: 110px; } td .champ { margin-bottom: 0; } td input, td select { width: 100%; } /* Code postal et ville sur UNE ligne (decision 0062) : le code postal etroit, la ville large. Une grille et non deux `.court` : la ligne garde sa largeur dans une colonne de `.grille c2` comme dans un formulaire plein ecran, et tient a 390 px -- cinq chiffres n'ont pas besoin de plus. */ .ligne-ville { display: grid; grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr); gap: 0 12px; align-items: start; } .note.separation-cp { margin: -6px 0 13px; padding: 7px 11px; font-size: 12.5px; } .note.separation-cp .bouton { margin-left: 6px; } /* Ligne de tableau en alerte, et ligne de total. Le retard d'une facture est l'information la plus importante de l'ecran : elle merite mieux qu'une pastille. */ tbody tr.danger { background: var(--danger-pale); } tbody tr.danger:hover { background: var(--danger-pale); } tbody tr.total td, tfoot td { border-top: 2px solid var(--bord-fort); border-bottom: 0; font-weight: 650; background: var(--surface-2); } tbody tr.total:hover td { background: var(--surface-2); } /* Surface secondaire : une carte dans une carte etait blanc sur blanc. */ .sous-carte { background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: 11px; } /* Controle segmente, jusqu'ici imite en detournant `.bouton.primaire`. */ /* `flex-wrap: wrap` : un onglet dont le libelle porte une liste d'annees (« Comparaison avec 2025, 2024, 2023 ») fait 400 px a lui seul et poussait toute la page sur un telephone. */ .segments { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--surface-2); padding: 3px; border-radius: var(--rayon-s); gap: 3px; } .segments button { border: 0; background: transparent; padding: 6px 13px; border-radius: 4px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--texte-doux); cursor: pointer; } .segments button.actif { background: var(--surface); color: var(--primaire); box-shadow: var(--ombre); } /* Deplacement de cartes : sans retour visuel, on ne sait pas si l'on a saisi la carte. */ .deplacable { cursor: grab; } .deplacable:active { cursor: grabbing; } .en-vol { opacity: .45; } .depot-actif { outline: 2px dashed var(--primaire); outline-offset: 3px; background: var(--primaire-pale); } ul, ol { margin: 0 0 .6rem; padding-left: 1.15rem; } li { margin-bottom: .2rem; } /* ── Barre haute de la plateforme ───────────────────────────────────── */ /* La coquille multi-applications : marque, lanceur d'applications, entreprise courante, utilisateur. Le rail de gauche ne porte plus que l'application courante. */ .barre-haute { height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--bord); position: relative; z-index: 20; } .barre-haute .marque { font-weight: 600; letter-spacing: .2em; color: var(--marque); font-size: 13px; text-decoration: none; } .marque { display: inline-flex; align-items: center; gap: 8px; } .marque-icone { width: 26px; height: 26px; display: block; } /* Les images de marque portent un numero de version dans leur URL : sans lui, un navigateur qui a deja vu l'ancien dessin continue de le servir, et la nouvelle identite n'arrive jamais chez celui qui regarde. A incrementer a chaque changement du trace. Le mot est le trace fourni par 1FOPRESTA, pas du texte : on le dimensionne par sa hauteur, la largeur suit. Si le fichier manque, le texte de remplacement prend sa place et la marque reste lisible. */ .marque-mot { height: 13px; width: auto; display: block; } .public .marque-icone, .connexion .marque-icone { width: 34px; height: 34px; } .public .marque-mot, .connexion .marque-mot { height: 16px; } .barre-haute .espace { flex: 1; } .entreprise { position: relative; } .entreprise-bouton { display: inline-flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: var(--rayon-s); border: 1px solid transparent; background: transparent; font: inherit; font-weight: 600; color: var(--texte); cursor: pointer; } .entreprise-bouton:hover, .entreprise-bouton[aria-expanded="true"] { background: var(--surface-2); border-color: var(--bord); } .entreprise-bouton span:not(.pays) { display: flex; flex-direction: column; text-align: left; line-height: 1.2; } .entreprise-bouton small { font-weight: 500; color: var(--texte-faible); font-size: 11px; } .pays { display: inline-grid; place-items: center; width: 26px; height: 20px; border-radius: 3px; background: var(--primaire-pale); color: var(--primaire); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; } .avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primaire); color: var(--sur-primaire); font-size: 11px; font-weight: 700; } /* Le lien de retour d'une fiche ouverte en pleine page. Celui du rail a ses propres regles ; celui-ci vit dans le contenu, au-dessus du titre, et doit rester lisible et cliquable. */ .principal > .retour { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--texte-doux); text-decoration: none; } .principal > .retour:hover { color: var(--primaire); } .appli { min-height: calc(100vh - 29px - 50px); } /* ── Accueil : tuiles d'applications ───────────────────────────────── */ .tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .tuile { display: block; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; color: var(--texte); text-decoration: none; min-height: 130px; } .tuile:hover { border-color: var(--primaire-clair); text-decoration: none; box-shadow: var(--ombre-forte); } .tuile .initiale { width: 34px; height: 34px; border-radius: 8px; background: var(--primaire-pale); color: var(--primaire); display: grid; place-items: center; font-weight: 700; margin-bottom: 10px; } .tuile h3 { margin: 0 0 4px; font-size: .95rem; } .tuile p { margin: 0; color: var(--texte-doux); font-size: 12.5px; line-height: 1.45; } .tuile.indisponible { background: var(--surface-2); box-shadow: none; } .tuile.indisponible .initiale { background: var(--bord); color: var(--texte-doux); } .tuile .mention { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--texte-faible); } /* Bouton desactive : un devis bloque par le prix plancher ne s'envoie pas. */ .bouton:disabled, .bouton[disabled] { opacity: .45; cursor: not-allowed; } /* ─── Produit : ce que la maquette n'avait pas ─────────────────────── */ /* Boite de dialogue native, pour les saisies courtes (reglement, mouvement, nouvelle societe). */ /* Une boite ne depasse JAMAIS la fenetre. Un formulaire long poussait sinon ses boutons hors de l'ecran : la boite grandissait, la page derriere ne defilait pas, et « Enregistrer » devenait inatteignable. L'entete et le pied restent visibles, seul le corps defile. */ dialog.boite { border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: 0; width: min(560px, 94vw); max-height: 92vh; } dialog.boite::backdrop { background: var(--voile); } dialog.boite form { display: flex; flex-direction: column; max-height: 92vh; } dialog.boite .boite-entete { padding: 14px 18px; border-bottom: 1px solid var(--bord); display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; } dialog.boite .boite-entete h2 { margin: 0; } dialog.boite .boite-corps { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; } dialog.boite .boite-pied { padding: 12px 18px; border-top: 1px solid var(--bord); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); flex: 0 0 auto; } .fermer { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--texte-faible); } /* Message furtif en bas d'ecran. */ .furtif { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--accent); color: var(--accent-texte); padding: 10px 16px; border-radius: var(--rayon-s); box-shadow: var(--ombre-forte); z-index: 50; font-size: 13px; max-width: 90vw; } .furtif.danger { background: var(--danger); } .furtif.succes { background: var(--succes); } /* Erreur de formulaire. */ .erreur { color: var(--danger); font-size: 12.5px; } /* UNE ERREUR NE S'AFFICHE QU'APRES UN GESTE (decision 0143) : `:user-invalid` ne vaut qu'une fois le champ touche puis quitte, ou apres une tentative d'envoi. `:invalid` seul marquait en terracotta des champs requis encore vides a l'ouverture d'un dialogue (debut et fin d'une declaration d'heures). */ .champ input:user-invalid, .champ select:user-invalid, .champ textarea:user-invalid { border-color: var(--danger); } /* Pipeline : colonnes. */ .colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; } .colonne { background: var(--surface-2); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px; min-height: 120px; } .colonne h3 { display: flex; justify-content: space-between; padding: 4px 6px 8px; } .colonne .indicateur { padding: 11px 12px; margin-bottom: 8px; } .colonne .indicateur .valeur { font-size: 1.15rem; } .colonne .carte { padding: 11px 12px; margin-bottom: 8px; } .colonne .carte .titre { font-weight: 600; } .colonne .carte .societe { color: var(--texte-doux); font-size: 12.5px; } .colonne .carte .montant { font-variant-numeric: tabular-nums; margin-top: 4px; } /* Menu utilisateur, a droite de la barre haute. */ .utilisateur { position: relative; } .utilisateur-bouton { border: 0; background: transparent; padding: 0; cursor: pointer; } .utilisateur-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: 6px; z-index: 30; } .utilisateur-menu .faible { padding: 6px 10px 2px; font-size: 11px; } .utilisateur-menu a, .utilisateur-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--rayon-s); color: var(--texte); font: inherit; font-weight: 500; border: 0; background: transparent; cursor: pointer; } .utilisateur-menu a:hover, .utilisateur-menu button:hover { background: var(--surface-2); text-decoration: none; } /* Aide, a gauche du compte dans la barre haute. Volontairement PAS dans le rail : le rail porte la navigation metier de l'application ouverte, et une entree de plus y entrerait en concurrence avec les ecrans que la personne est venue utiliser. Elle se range donc avec ce qui n'est pas du metier -- le parametrage, la langue, la deconnexion. Le poids du texte est celui du lanceur et de l'entreprise : c'est la meme barre, et un lien plus leger que ses voisins se lirait comme une note de bas de page. */ .aide-lien { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--rayon-s); border: 1px solid transparent; background: transparent; color: var(--texte-doux); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; } .aide-lien:hover { background: var(--surface-2); border-color: var(--bord); color: var(--texte); text-decoration: none; } .aide-lien svg { width: 18px; height: 18px; flex: 0 0 auto; } .aide-lien[aria-current="page"] { color: var(--primaire); background: var(--primaire-pale); } /* ── Pages d'aide ──────────────────────────────────────────────────── Du texte, et rien d'autre : l'aide se lit, elle ne se manipule pas. La largeur est donc bornee -- une ligne de 160 caracteres sur un grand moniteur ne se suit pas d'une ligne a l'autre -- et la borne est en `ch` pour suivre la taille de police du lecteur plutot que le pixel. */ /* `scroll-margin-top` : une cible d'ancre ne se colle pas sous la barre haute, qui est collante sur tablette et telephone -- sans cette marge, le titre vise passerait dessous. */ .aide-sommaire, .aide-section { max-width: 80ch; scroll-margin-top: 62px; } .aide-sommaire { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px 18px; margin: 14px 0; } .aide-sommaire h2 { margin: 0 0 8px; font-size: 1rem; } .aide-sommaire ol { margin: 0; padding-left: 1.3rem; } .aide-sommaire li { margin-bottom: .3rem; } .aide-section { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px 18px; margin-bottom: 14px; } .aide-section h2 { margin: 0 0 6px; } .aide-section h3 { margin: 14px 0 4px; font-size: .9rem; color: var(--texte-doux); } .aide-section p { margin: 0 0 .2rem; line-height: 1.55; } .aide-section ol, .aide-section ul { margin: 0; padding-left: 1.3rem; } .aide-section li { margin-bottom: .35rem; line-height: 1.5; } .aide-mention { display: inline-block; margin: 2px 0 8px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--texte-doux); font-size: 12.5px; } .aide-retour { margin-top: 12px; font-size: 12.5px; } /* Fiche a droite d'une liste. */ .deux-tiers { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; } @media (max-width: 900px) { .deux-tiers { grid-template-columns: 1fr; } } tbody tr.selectionnable { cursor: pointer; } tbody tr.selectionnee { background: var(--primaire-pale); } /* Definition (libelle / valeur). */ .definition { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 13.5px; } .definition dt { color: var(--texte-doux); } .definition dd { margin: 0; } /* Page publique et connexion. */ .public { max-width: 980px; margin: 0 auto; padding: 40px 20px 80px; } .public .marque { font-weight: 600; letter-spacing: .2em; color: var(--marque); font-size: 15px; } .connexion { max-width: 400px; margin: 60px auto; } .code-demo { font-size: 1.6rem; letter-spacing: .2em; font-weight: 700; text-align: center; padding: 8px; } /* Barre de chiffre d'affaires mensuel. */ .barres { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 140px; padding-top: 8px; } .barres .barre-mois { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .barres .barre-mois i { display: block; width: 100%; background: var(--primaire); border-radius: 3px 3px 0 0; min-height: 2px; } .barres .barre-mois i.negatif { background: var(--danger); } /* Un intitule de mois porte son annee (« oct. 25 ») : douze mois glissants sont a cheval sur deux annees, et « oct. » seul n'en designe aucune. Sur un ecran large l'intitule tient sur une ligne ; plus bas, il se coupe en deux (voir le bloc telephone) plutot que de se faire tronquer, car « sept. 2 » serait lu comme une date. */ .barres .barre-mois small { font-size: 10.5px; color: var(--texte-faible); white-space: nowrap; } /* Le document remis au client (devis, facture, avoir) N'EST PLUS MIS EN FORME ICI : il l'est par `css/document.css`, que le gabarit serveur `app/gabarits/document.html` inscrit dans la page. La raison est qu'il n'y a plus qu'un seul rendu du document, cote serveur, et qu'il sert a la fois l'apercu a l'ecran, le PDF telecharge et le PDF joint au courriel. Laisser ici la moitie de sa mise en forme rouvrirait l'ecart qu'on vient de fermer : le client recevrait autre chose que ce que l'utilisateur a vu. */ @media print { .barre-haute, .rail, .bandeau-demo, .entete, .pas-imprimable { display: none !important; } .appli { display: block; min-height: 0; } .principal { padding: 0; max-width: none; } body { background: var(--surface); } } /* Recherche transverse dans la barre haute. Le panneau se pose sous le champ et flotte : il ne doit jamais pousser la page, sinon la barre saute a chaque frappe. */ /* Bouton d'appoint, pose dans une ligne de texte : il ne doit pas peser autant qu'une action. */ .bouton.petit { padding: 3px 9px; font-size: 12px; } /* ── Petits ecrans : telephone et tablette ────────────────────────────── Le partenaire a choisi un site qui s'adapte plutot qu'une application a installer : les memes ecrans doivent donc tenir sur un telephone de 390 px. Deux seuils, et rien au-dessus : 900 px, tablette : le rail devient un tiroir, les indicateurs passent a deux colonnes, les cibles tactiles montent a 40 px ; 620 px, telephone : les tableaux deviennent des fiches empilees, la recherche se replie derriere une loupe, une colonne partout, la boite de dialogue prend l'ecran. Les deux requetes portent `screen` : une feuille A4 mesure 794 px a l'impression et declencherait sinon la mise en page tablette sur le papier. Ce bloc est en fin de feuille a dessein : plusieurs regles de base qu'il doit couvrir (`.tableau-defile`, `.recherche-globale`) sont de meme poids et l'emporteraient sinon. */ /* Elements que la coquille pose pour les petits ecrans. Sans ce repli, ils s'afficheraient sur un ecran de bureau ou ils n'ont rien a faire. */ .menu-bouton, .rail-tete, .voile { display: none; } /* Largeur des boites larges. Elle etait posee en style en ligne par `dialogue()`, et un style en ligne bat toute classe : la boite ne pouvait plus etre elargie a l'ecran sur un telephone. */ dialog.boite.large { width: min(860px, 96vw); } @media screen and (max-width: 767px) { /* Le rail passe en tiroir. Rabattu en barre horizontale defilante, il faisait perdre l'entree courante des la cinquieme entree ; les applications en ont jusqu'a neuf. Le tiroir garde la liste entiere et l'entree courante marquee. */ /* `minmax(0, 1fr)` ici AUSSI. La regle de large ecran avait ete corrigee le 2026-09-29, pas celle-ci : entre 621 et 900 px -- une tablette en portrait -- la piste se laissait encore pousser a 1076 px dans une fenetre de 834, et cinq ecrans defilaient lateralement. Le mode fiches ne rattrape rien, il ne s'ouvre qu'a 620. Un cote traite, son jumeau oublie. */ .appli { grid-template-columns: minmax(0, 1fr); } .rail { position: fixed; top: 0; left: 0; bottom: 0; width: 272px; max-width: 86vw; z-index: 60; overflow-y: auto; transform: translateX(-100%); transition: transform .18s ease-out; box-shadow: var(--ombre-forte); } .rail.ouvert { transform: none; } .rail a { min-height: 44px; } .rail-tete { display: flex; justify-content: flex-end; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--bord); } .voile { display: block; position: fixed; inset: 0; background: var(--voile); z-index: 55; } body.tiroir-ouvert { overflow: hidden; } .menu-bouton { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; margin-left: -6px; border: 0; border-radius: var(--rayon-s); background: transparent; color: var(--texte-doux); cursor: pointer; } .menu-bouton:hover, .menu-bouton[aria-expanded="true"] { background: var(--surface-2); color: var(--texte); } .menu-bouton svg { width: 22px; height: 22px; } /* La barre haute reste accrochee en haut : le tiroir est le seul acces a la navigation, il ne doit pas obliger a remonter toute une liste de factures. */ .barre-haute { position: sticky; top: 0; gap: 10px; } /* Le regime fiscal sort de la barre : il tient dans l'ecran de parametrage, pas ici. */ .entreprise-bouton small { display: none; } /* Sans min-width, un champ de recherche garde sa largeur naturelle (une vingtaine de caracteres) et pousse l'avatar hors de la barre. */ .principal { padding: 16px 16px 48px; } /* Quatre indicateurs sur une tablette donnent quatre colonnes ecrasees. */ .grille.c3, .grille.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Au doigt, rien sous 40 px de haut, et une barre de boutons se replie au lieu de deborder. */ .bouton { min-height: 40px; } .segments { display: flex; flex-wrap: wrap; } .segments button { min-height: 40px; } .fermer { min-width: 40px; min-height: 40px; } .utilisateur-menu a, .utilisateur-menu button { padding: 11px 10px; } .aide-lien { min-height: 40px; } } @media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) { .rail { transition: none; } } @media screen and (max-width: 620px) { /* Barre haute d'un telephone : la marque, le tiroir, la recherche repliee, le pays et l'avatar. Le nom de l'application et celui de l'entreprise sortent : le premier est repete en tete du tiroir, le second ne change pas en cours de session. */ .barre-haute { gap: 8px; padding: 0 10px; } .entreprise-bouton span:not(.pays) { display: none; } /* Le mot « Aide » sort, l'icone reste : la barre porte deja la marque, le tiroir, la loupe, le pays et l'avatar sur 390 px. Le nom du lien survit dans son `aria-label`, pose par `lienAide` -- un bouton reduit a son dessin n'a plus de nom du tout sans lui. */ .aide-mot { display: none; } .aide-lien { padding: 8px; } .entreprise-bouton { padding: 6px 2px; } /* Le menu des applications s'ancre sur la barre et non sur son bouton : ancre au bouton, large de 240 px, il sortait de l'ecran par la droite. */ /* Recherche transverse : repliee derriere une loupe, elle se deplie en seconde ligne posee par-dessus le contenu. Elle ne pousse pas la page, sinon la barre sauterait a chaque frappe. Les 54 px sous lesquels tombent les resultats sont la hauteur du champ (42) et les deux ecarts de 6 px : deplacer l'un sans l'autre superpose le panneau et le champ. */ .principal { padding: 14px 12px 48px; } h1 { font-size: 1.25rem; } /* `minmax(0, 1fr)` et non `1fr` : une colonne `1fr` ne descend pas sous la largeur minimale de son contenu (l'option la plus longue d'une liste), et la page debordait (index.html, 390 px). */ .grille.c2, .grille.c3, .grille.c4 { grid-template-columns: minmax(0, 1fr); } /* MAIS PAS LA RANGEE D'INDICATEURS : elle reste a DEUX colonnes sur un telephone. Mesure du 2026-10-01, sur l'ecran Factures, hauteurs relevees dans le navigateur : quatre indicateurs de 116 px empiles font 506 px, et la carte de recherche repliee 384 px. Avec le bandeau, la barre haute, l'en-tete et les onglets, il fallait defiler 1 067 px AVANT LA PREMIERE FACTURE -- sur un ecran de telephone qui en montre environ 700. L'ecran des factures s'ouvrait donc sur AUCUNE facture. Deux colonnes ramenent les indicateurs a 246 px : la liste remonte de 260 px, et le premier document entre dans le premier ecran. Un indicateur porte un libelle court et un nombre -- il n'a jamais eu besoin de toute la largeur. `:has()` ET NON UNE CLASSE DE PLUS : la rangee est reconnue a ce qu'elle CONTIENT, donc un ecran qui pose des indicateurs demain en herite sans que personne y pense. Un navigateur qui ne connait pas `:has()` ignore la regle et retombe sur une colonne -- l'etat d'avant, jamais une mise en page cassee. */ .grille:has(> .indicateur) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Tableaux en fiches empilees. Douze colonnes ne se lisent pas sur 390 px, et un defilement horizontal cache les colonnes de droite sans dire qu'elles existent. Une ligne devient un bloc ou chaque valeur porte l'intitule de sa colonne, que `tableau()` a pose dans data-intitule. Seuls les tableaux marques `fiches` se replient : l'editeur de lignes d'un document est une grille de saisie, elle se defile mieux qu'elle ne s'empile. */ .fiches { overflow-x: visible; } .fiches table, .fiches tbody, .fiches tfoot, .fiches tr { display: block; } .fiches thead { display: none; } .fiches tr { padding: 10px 12px; border-bottom: 1px solid var(--bord); } .fiches tr:last-child { border-bottom: 0; } .fiches td { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; border-bottom: 0; } /* Une colonne sans valeur pour cette ligne ne laisse pas un intitule seul. */ .fiches td:empty { display: none; } .fiches td:not([data-intitule=""])::before { content: attr(data-intitule); flex: 0 0 38%; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-faible); } .fiches .cellule { flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; } .fiches tr.total, .fiches tfoot tr { background: var(--surface-2); font-weight: 650; } .fiches tr.total td, .fiches tfoot td { border-top: 0; background: transparent; } /* Formulaires : un champ par ligne, et une largeur reglee pour un ecran large ne tient plus. */ .barre > .champ { width: 100%; } .champ.court input, .champ.court select, .champ.etroit input, .champ.etroit select { max-width: none; } /* 16 px : en dessous, Safari sur iPhone agrandit la page a la prise de focus et ne la reduit jamais. La hauteur de 40 px est la cible tactile. */ .champ input, .champ select, .champ textarea { font-size: 16px; min-height: 40px; } .definition { grid-template-columns: 1fr; gap: 0; } .definition dt { margin-top: 10px; } .definition dt:first-of-type { margin-top: 0; } /* La boite de dialogue prend l'ecran. `dvh` suit la barre d'adresse du telephone, qui se retracte au defilement : avec `vh` seul, le pied de la boite passe sous cette barre. */ dialog.boite, dialog.boite.large { inset: 0; margin: 0; width: 100vw; max-width: 100vw; border: 0; border-radius: 0; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; } dialog.boite form { height: 100%; max-height: 100vh; max-height: 100dvh; } dialog.boite .boite-corps { padding: 14px; } dialog.boite .boite-pied { padding: 10px 14px; } dialog.boite .boite-pied .bouton { flex: 1 1 auto; justify-content: center; } /* Ecrans publics : ce sont les premiers vus par un prospect. `.connexion` n'avait aucune marge laterale, la carte touchait les deux bords. */ .public { padding: 20px 14px 56px; } .connexion { margin: 24px 12px; } /* Douze mois cote a cote : sans min-width, les etiquettes imposent leur largeur et le graphe deborde la carte. */ .barres { gap: 3px; } .barres .barre-mois { min-width: 0; } .barres .barre-mois small { font-size: 9px; max-width: 100%; white-space: normal; line-height: 1.15; text-align: center; } } /* Sous 360 px (petits Android), le mot de la marque ne tient plus dans la barre haute : le symbole seul reste, et il mene toujours a l'accueil. */ @media screen and (max-width: 360px) { .barre-haute .marque-mot { display: none; } } /* Drapeau du pays dans la barre haute, a la place de la pastille de deux lettres (demande de 1FOPRESTA du 28 septembre 2026). Meme encombrement que la pastille : la barre garde sa mise en page selon que le pays declare un drapeau ou non. Le filet interieur detache du fond de la barre les drapeaux dont une bande est claire ou blanche. */ .pays-drapeau { flex: 0 0 auto; width: 26px; height: 20px; border-radius: 3px; object-fit: cover; border: 1px solid var(--bord-fort); } /* ─── Relances separees par nature (demande de 1FOPRESTA du 2026-09-28) ────── Deux ajouts seulement : le reste de l'ecran se fait avec `.segments`, `.note`, `.sous-carte` et `.etiquette`, qui existaient deja. */ /* Compte porte par un onglet de `.segments`. Sans surface propre, le nombre se confond avec le libelle et l'onglet se lit comme « Relances de devis 4 jours ». */ .segments button .compte-onglet { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--surface); color: var(--texte-doux); font-size: 11.5px; font-variant-numeric: tabular-nums; } .segments button.actif .compte-onglet { background: var(--primaire-pale); color: var(--primaire); } /* Ligne d'un document qui ne sera PAS relance. Elle reste dans la liste -- la retirer laisserait croire que la facture est reglee -- mais elle ne doit pas se lire comme du travail a faire. D'ou l'effacement, et non une couleur d'alerte. */ tbody tr.exclue { opacity: .62; } tbody tr.exclue:hover { opacity: 1; } /* ── Comparaison des exercices : graphe a deux series, et ecart sous le montant ────────── Ajoute le 2026-09-28 avec la comparaison sur trois exercices anterieurs. Les couleurs sont celles des jetons du haut de cette feuille : le bleu de la marque pour l'exercice en cours, le gris du logo pour le precedent. Les deux se distinguent aussi en niveaux de gris, et chaque barre porte son intitule : un graphe se lit sans la couleur, ou ne se lit pas. La hauteur du corps est fixee en pixels, et non en pourcentage : une hauteur en pourcentage dans un element etire par le flex ne se resout pas partout, et les barres disparaissaient. */ .graphe-exercices { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; padding-top: 8px; } .graphe-exercices .mois { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .graphe-exercices .corps { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 132px; } .graphe-exercices .corps i { display: block; flex: 1 1 0; min-width: 2px; min-height: 2px; background: var(--primaire); border-radius: 3px 3px 0 0; } .graphe-exercices .corps i.anterieur { background: var(--marque); } .graphe-exercices .corps i.negatif { background: var(--danger); } /* Un mois sans donnees n'est pas une barre a zero : sa place reste tenue, vide, et seul un pointille au sol dit qu'elle existe. Une barre de 2 px aurait ete lue comme un chiffre nul. */ .graphe-exercices .corps .absent { flex: 1 1 0; min-width: 2px; height: 100%; border-bottom: 2px dotted var(--bord-fort); } .graphe-exercices small { font-size: 10.5px; color: var(--texte-faible); white-space: nowrap; } .graphe-legende { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 10px; font-size: 12px; color: var(--texte-doux); } .graphe-legende span { display: inline-flex; align-items: center; gap: 6px; } .graphe-legende i { width: 10px; height: 10px; border-radius: 2px; background: var(--primaire); } .graphe-legende i.anterieur { background: var(--marque); } /* L'ecart tient sous le montant de l'exercice compare : quatre exercices avec chacun ses deux colonnes d'ecart ne tenaient sur aucun ecran. */ .ecart-mois { display: block; font-size: 11.5px; color: var(--texte-faible); } /* Petits ecrans. Vingt-quatre barres sur 360 px ne se lisent pas : le graphe garde sa largeur utile et se defile, plutot que de se tasser jusqu'a ne plus rien montrer. Le tableau, lui, se replie tout seul en fiches empilees comme les autres (classe `fiches` posee par `tableau()`). */ @media screen and (max-width: 900px) { .graphe-exercices { gap: 4px; } } @media screen and (max-width: 620px) { .graphe-defile { overflow-x: auto; } .graphe-exercices { min-width: 560px; gap: 3px; } .graphe-exercices .corps { height: 112px; } } /* ── Recherche sur les listes de documents et brouillon de courriel (2026-09-28) ─────────── */ /* La carte de recherche des devis et des factures. Les champs y perdent leur marge basse : dans une grille, cette marge decale la derniere ligne de boutons par rapport aux champs qu'elle accompagne, et la carte se lit de travers. Les boutons s'alignent sur le bas des controles, la ou tombe leur ligne de saisie. */ .recherche-documents .champ { margin-bottom: 0; } .recherche-documents .grille { align-items: end; } /* La periode se saisit en deux champs cote a cote : `court` les borne a 190 px, ce qui laisse au nom du client la largeur dont il a besoin. Sous le seuil telephone la grille se replie seule. */ .recherche-documents .champ.court input { width: 100%; } /* Le corps d'un courriel avant envoi. Quatre lignes (le defaut de `champ`) montrent le « Bonjour » et rien d'autre : on relit mal ce qu'on ne voit pas, et c'est precisement le geste que cette boite existe pour permettre. La hauteur reste bornee, la boite se defile deja. */ .courriel-brouillon textarea { min-height: 220px; } /* ── Dossier d'un collaborateur : postes, valideurs, pièces (2026-09-28) ─────────────────── */ /* Trois listes dans une même boîte. Le titre d'une section doit se distinguer du titre de la boîte sans crier : `h3` seul héritait de la taille des titres de carte et les deux niveaux se confondaient. Le filet du haut sépare les sections mieux qu'une marge, qui se replie sur elle- même entre deux blocs voisins. */ .dossier-rh section { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--bord); } .dossier-rh section:first-child { padding-top: 0; margin-top: 0; border-top: 0; } .dossier-rh h3 { font-size: 13.5px; font-weight: 650; margin: 0 0 8px; } /* Une ligne du dossier : ce qu'elle décrit à gauche, ce qu'on en fait à droite. `items-start` et non `center` : quand le libellé passe sur deux lignes, un centrage vertical décale les boutons vers le bas et la liste perd son alignement. */ .ligne-dossier { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: var(--rayon-s); background: var(--surface-2); } .ligne-dossier .boutons { flex-shrink: 0; align-items: center; } /* Sous le seuil téléphone la ligne se replie : les boutons sous le libellé plutôt qu'écrasés à côté de lui sur 60 px de large. */ @media screen and (max-width: 560px) { .ligne-dossier { flex-direction: column; } } /* Un intertitre dans un formulaire long (les coordonnées de paiement d'une fiche du personnel). Il se distingue des libellés de champ, qui sont en 12,5 px gris : sans cela, l'utilisateur ne voit pas où commence une nouvelle partie du formulaire. */ .sous-titre-formulaire { font-size: 13.5px; font-weight: 650; margin: 18px 0 2px; padding-top: 14px; border-top: 1px solid var(--bord); } /* ── Liste cherchable, pour les listes longues (2026-09-28) ──────────────────────────────── Le menu d'un natif reste visible et le champ garde le comportement d'hier au lieu de devenir inutilisable. */ .cherchable { position: relative; display: block; } .cherchable .cherchable-saisie, .cherchable .cherchable-panneau { display: none; } .cherchable select { width: 100%; } .cherchable[data-pret] .cherchable-saisie { display: block; width: 100%; } /* Le