:root{
--ground:#FAF8F4; --surface:#FFF; --surface2:#F1EEE7;
--ink:#1A1815; --muted:#645C50; --line:#DFD9CD; --line2:#C2B9A8; /* (LOT 19L, UX2) gris #6E6659 → #645C50 : 4,9:1 au lieu de 4,2:1 sur les fonds rosés/verts */
--vert:#2F5D50; --vert-bg:#E2EDE8; --vert-tx:#1B5F42;
--jaune:#9A5B14; --jaune-bg:#FFF3CD;
--rouge:#A32118; --rouge-bg:#F8D7DA;
--f:"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
--ground:#16150F; --surface:#1F1D16; --surface2:#292620;
--ink:#F0ECE3; --muted:#A39A8B; --line:#35312A; --line2:#4E483E;
--vert:#8FC7B4; --vert-bg:#22302B; --vert-tx:#8FC7B4;
--jaune:#E0A75A; --jaune-bg:#33280F;
--rouge:#F0938A; --rouge-bg:#3A1F1D;}}
*{box-sizing:border-box}
/* (2026-09-14) « hidden » doit TOUJOURS cacher. L'attribut hidden ne vaut
que par la regle display:none du navigateur : la moindre regle display
posee ailleurs (une mise en fiches sous 760 px, par exemple) la bat en
silence. C'est ce qui cassait la recherche de clients et les filtres du
suivi sur telephone : le JavaScript posait bien hidden, mais les fiches
restaient affichees — et tous les panneaux deplies apparaissaient sous
chaque client. Les bascules d'affichage volontaires (lien « Feuille de
l'apres-midi », bouton « Vider ») passent par style.display, jamais par
hidden : elles ne sont pas concernees. */
[hidden]{display:none!important}
/* Liens (2026-09-07) : le bleu par defaut du navigateur etait invisible en
mode sombre (1,8:1 sur fond brun) et jurait avec la charte en clair. Les
boutons-liens (.mini-btn, .act, .side-link…) gardent leurs propres couleurs. */
a{color:var(--vert-tx);text-decoration-thickness:1px;text-underline-offset:2px}
html{color-scheme:light dark}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.5}
.carte{max-width:460px;margin:24px auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.carte.etroite{max-width:380px}
header{padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.marque{font-size:1.1rem;font-weight:700;margin:0}
.marque span{color:var(--muted);font-weight:600}
.client{font-size:.9rem;color:var(--muted);margin:4px 0 0}
.jour{background:var(--vert);color:var(--ground);padding:13px 22px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.jour .d{font-weight:700}
.jour .c{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.corps{padding:20px 22px}
.alerte{margin:0;padding:13px 22px;font-size:.9rem}
.alerte.ok{background:var(--vert-bg);color:var(--vert-tx)}
.alerte.err{background:var(--rouge-bg);color:var(--rouge)}
.alerte.warn{background:var(--jaune-bg);color:var(--jaune)}
.lignes{padding:4px 0}
.ligne{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line)}
.ligne:last-child{border-bottom:none}
.nm{font-weight:600}
.sub{font-size:.85rem;color:var(--muted);margin-top:2px}
.step{display:flex;align-items:center;gap:3px}
.q{width:38px;height:38px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font-size:1.2rem;border-radius:8px;cursor:pointer}
.q:hover{background:var(--surface2)}
.v{width:70px;height:38px;text-align:center;border:1px solid var(--line2);border-radius:8px;background:var(--surface);color:var(--ink);font-size:1rem}
.v:focus,.q:focus-visible,.champ:focus{outline:2px solid var(--vert);outline-offset:1px}
form.off .lignes{opacity:.35;pointer-events:none}
.bascule{display:flex;gap:11px;align-items:center;padding:15px 22px;background:var(--surface2);border-top:1px solid var(--line);cursor:pointer}
.bascule input{width:20px;height:20px;flex:none;accent-color:var(--jaune)}
.bascule span{font-size:.92rem}
.pied{padding:18px 22px 22px;border-top:1px solid var(--line)}
.tot{display:flex;justify-content:space-between;font-weight:600;margin:0 0 14px}
.env{width:100%;padding:14px;border:none;border-radius:9px;background:var(--vert);color:var(--ground);font-weight:600;font-size:1rem;cursor:pointer;font-family:var(--f)}
.env:hover{filter:brightness(1.08)}
.env.mini{width:auto;padding:9px 16px;font-size:.88rem}
.note{font-size:.85rem;color:var(--muted);margin:12px 0 0}
.note.pad{padding:0 20px 30px}
.lbl{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.champ{width:100%;padding:11px;border:1px solid var(--line2);border-radius:8px;background:var(--surface);color:var(--ink);font-size:1rem;margin-bottom:14px;font-family:var(--f)}
.champ.mini{width:170px;margin:0}
/* Lignes de devis (vue_devis.php) : .champ.mini ecrasait les 80/100 px des
champs quantite/prix (specificite) ; on les fixe ici, plus precisement. */
.tbl .dv-qte.champ.mini{width:80px}
.tbl .dv-prix.champ.mini{width:100px}
.tbl select.dv-tva.champ.mini{width:auto}
.tbl td.n{white-space:nowrap}
.recap{font-size:1rem;margin:18px 0 8px}
.recap-t{width:100%;border-collapse:collapse;font-size:.92rem}
.recap-t td{padding:6px 0;border-bottom:1px solid var(--line)}
.recap-t .n{text-align:right}
/* --- admin --- */
body.large{background:var(--ground)}
.bandeau{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 26px;background:var(--surface);border-bottom:1px solid var(--line)}
.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav a{position:relative;color:var(--ink);text-decoration:none;padding:7px 11px;border:1px solid var(--line2);border-radius:7px;font-size:.85rem}
.nav a:hover{background:var(--surface2)}
.nav a.pri{background:var(--vert);border-color:var(--vert);color:var(--ground);font-weight:600}
.nav a.pri:hover{filter:brightness(1.08);background:var(--vert)}
.pastille{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
background:var(--rouge);color:var(--ground);border:2px solid var(--surface);
font-size:.62rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center}
.nav-date{display:inline-flex;margin:0}
.nav input[type=date]{color:var(--ink);background:var(--surface);border:1px solid var(--line2);border-radius:7px;
padding:7px 11px;font-size:.85rem;font-family:var(--f);height:auto;cursor:pointer}
.nav input[type=date]:hover{background:var(--surface2)}
.nav select{color:var(--ink);background:var(--surface);border:1px solid var(--line2);border-radius:7px;
padding:7px 11px;font-size:.85rem;font-family:var(--f);height:auto;cursor:pointer}
.nav select:hover{background:var(--surface2)}
.nav input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer}
.compteurs{display:flex;gap:12px;flex-wrap:wrap;padding:18px 26px}
.k{flex:1;min-width:130px;padding:14px 16px;border-radius:10px;border:1px solid var(--line)}
.k b{display:block;font-size:1.5rem;line-height:1.1}
.k span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.k.rouge{background:var(--rouge-bg);color:var(--rouge);border-color:var(--rouge)}
.k.jaune{background:var(--jaune-bg);color:var(--jaune);border-color:var(--jaune)}
.k.vert{background:var(--vert-bg);color:var(--vert-tx);border-color:var(--vert)}
.k.neutre{background:var(--surface);color:var(--ink)}
.barre{display:flex;gap:10px;align-items:center;padding:0 26px 16px;flex-wrap:wrap}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--surface)}
.tbl th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line2)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line)}
.tbl .n{text-align:right}
.tbl .a{text-align:right}
.tbl tr.rouge td{background:var(--rouge-bg)}
.tbl tr.jaune td{background:var(--jaune-bg)}
.tbl tr.vert td{background:var(--vert-bg)}
.tbl tr.gris td{background:var(--surface2);color:var(--muted)}
.tbl tr.prix-manquant td{background:var(--jaune-bg)}
.badge{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:3px;font-weight:700}
.badge.rouge{background:var(--rouge);color:var(--ground)}
.badge.jaune{background:var(--jaune);color:var(--ground)}
.badge.vert{background:var(--vert);color:var(--ground)}
.badge.gris{background:var(--muted);color:var(--ground)}
.inline{display:inline-flex}
.actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
.act{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:6px;
font-size:.78rem;font-family:var(--f);font-weight:600;text-decoration:none;white-space:nowrap;
cursor:pointer;border:1px solid var(--line2);background:var(--surface);color:var(--ink);line-height:1}
.act:hover{background:var(--surface2)}
.act.vert{background:var(--vert);border-color:var(--vert);color:var(--ground)}
.act.vert:hover{filter:brightness(1.08)}
.act.rouge{background:var(--rouge);border-color:var(--rouge);color:var(--ground)}
.act.rouge:hover{filter:brightness(1.08)}
.mini-btn{padding:6px 12px;border:1px solid var(--vert);background:var(--vert);color:var(--ground);border-radius:6px;font-size:.8rem;cursor:pointer;font-family:var(--f)}
/* Variante discrete (2026-09-13) : une barre d'outils entierement en vert
plein attire l'oeil partout a la fois. .sec = contour seul. */
a.mini-btn{text-decoration:none;display:inline-block}
.mini-btn.sec{background:none;color:var(--vert);border-color:var(--line2)}
.mini-btn.sec:hover{border-color:var(--vert)}
em{color:var(--muted);font-style:italic;font-size:.85em}
/* --- menu lateral des pages direction/boutique (remplace le bandeau charge
de liens ; 2026-09-01) --- */
.app-layout{display:flex;min-height:100vh}
/* Collee en haut, hauteur de l'ecran, defile seule (barre fine) : a 1440x900
le menu depassait 1300 px et « Reglages »/« Quitter » etaient hors ecran. */
.barre-laterale{width:222px;flex:none;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 0;
position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin}
.marque-cote{padding:0 20px 18px;border-bottom:1px solid var(--line);margin-bottom:10px}
.marque-cote b{font-weight:700;font-size:1.02rem;display:block}
.marque-cote span{font-size:.76rem;color:var(--muted)}
/* Choix de la boutique quand un compte en a plusieurs (2026-09-14). */
.side-boutique{padding:0 20px 14px;margin:-4px 0 10px;display:block}
.side-boutique .lbl-boutique{display:block;font-size:.66rem;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.side-boutique select{width:100%;padding:9px 10px;min-height:40px;border:1px solid var(--line2);
border-radius:8px;background:var(--surface);color:var(--ink);font-family:var(--f);font-size:.92rem}
.side-boutique select:focus{outline:2px solid var(--vert);outline-offset:1px}
.side-nav{padding:0 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.side-titre{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:12px 12px 4px}
.side-titre:first-child{padding-top:4px}
.side-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;font-size:.88rem;text-decoration:none;color:var(--ink)}
.side-link:hover{background:var(--surface2)}
.side-link.actif{background:var(--vert-bg);color:var(--vert-tx);font-weight:700}
.side-link .lib{display:flex;align-items:center;gap:10px}
.side-link svg{flex:none}
/* Texte en --ground (et non blanc) : le blanc sur le rouge clair du theme
sombre tombait a 2,3:1 ; --ground donne >= 7:1 dans les deux themes. */
.side-badge{background:var(--rouge);color:var(--ground);font-size:.62rem;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex:none}
.side-bas{margin-top:auto;padding:14px 20px 0;border-top:1px solid var(--line)}
.side-bas .side-link{padding:9px 0;color:var(--muted)}
.side-bas .side-link:hover{background:none;color:var(--ink)}
.contenu-principal{flex:1;min-width:0;overflow:auto}
/* Bouton du menu (telephone) : invisible sur grand ecran. */
.menu-bascule{display:none}
@media (max-width:900px){
.app-layout{flex-direction:column}
/* Telephone (2026-09-07) : une barre compacte en haut — marque + bouton
Menu — qui reste visible au defilement ; le menu se deplie dessous. */
.barre-laterale{width:auto;border-right:none;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;
padding:10px 14px;align-items:center;justify-content:space-between;gap:6px;position:sticky;top:0;z-index:40;
height:auto;overflow:visible;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.marque-cote{padding:0;border-bottom:none;margin-bottom:0;border-right:none;min-width:0}
.marque-cote b{font-size:.98rem;white-space:nowrap}
.marque-cote span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.menu-bascule{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:1px solid var(--line2);border-radius:9px;
background:var(--surface);color:var(--ink);font-family:var(--f);font-size:.9rem;font-weight:600;cursor:pointer;flex:none}
.barre-laterale.ouverte .menu-bascule{background:var(--vert-bg);border-color:var(--vert);color:var(--vert-tx)}
.side-nav,.side-bas,.side-boutique{display:none}
.barre-laterale.ouverte .side-boutique{display:block;flex-basis:100%;padding:10px 0 4px;margin:0;
border-top:1px solid var(--line)}
.barre-laterale.ouverte .side-boutique select{min-height:44px}
.barre-laterale.ouverte .side-nav{display:flex;flex-direction:column;flex-basis:100%;padding:8px 0 0;overflow:visible;
border-top:1px solid var(--line);margin-top:8px;max-height:70vh;overflow-y:auto}
.barre-laterale.ouverte .side-bas{display:block;flex-basis:100%;margin-top:0;padding:4px 0 0;border-top:1px solid var(--line)}
.barre-laterale.ouverte .side-titre{display:block;padding:10px 12px 4px}
.barre-laterale.ouverte .side-link{padding:11px 12px;font-size:.95rem}
/* Les deux colonnes de la saisie et de la fiche client : chacune prend
toute la largeur, et une colonne ne peut plus forcer la page a
s'elargir (min-width:0) — les tableaux larges defilent dans leur cadre. */
.principal,.cote,.deux-cols section{min-width:0}
.deux-cols{padding:8px 14px 24px}
}
/* --- blocs repliables (fiche client : modele hebdo, modeles programmes) --- */
.pliable{margin-top:28px}
.pliable > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;user-select:none;font-weight:700;color:var(--ink)}
.pliable > summary::-webkit-details-marker{display:none}
.pliable > summary::before{content:'▸';display:inline-block;width:.8em;color:var(--muted);
transition:transform .15s;font-size:.85em}
.pliable[open] > summary::before{transform:rotate(90deg)}
.pliable > summary:hover::before{color:var(--vert)}
.pliable-corps{padding-top:4px}
/* --- saisie --- */
.pad2{margin:0;padding:12px 26px}
.deux{display:flex;gap:0;align-items:flex-start;min-height:70vh}
.cote{width:300px;flex:none;border-right:1px solid var(--line);background:var(--surface);height:100%}
.titre-cote{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:16px 18px 8px;margin:0}
.liste{list-style:none;margin:0;padding:0 0 20px;max-height:78vh;overflow:auto}
.liste a{display:flex;align-items:center;gap:9px;padding:9px 18px;text-decoration:none;color:var(--ink);font-size:.9rem;border-left:3px solid transparent}
.liste a:hover{background:var(--surface2)}
.liste a.actif{background:var(--surface2);border-left-color:var(--vert);font-weight:600}
.liste a em{margin-left:auto;font-style:normal;font-size:.78rem;color:var(--muted)}
.pt{width:8px;height:8px;border-radius:50%;flex:none}
.pt.rouge{background:var(--rouge)}.pt.jaune{background:var(--jaune)}.pt.vert{background:var(--vert)}
.principal{flex:1;padding:22px 26px}
.h-cli{font-size:1.25rem;margin:0 0 14px}
.vide{color:var(--muted);padding:40px 0}
.tbl.saisie td,.tbl.saisie th{background:transparent}
.tbl.saisie .v{width:90px;height:34px;text-align:right;padding-right:8px}
.tbl.saisie .lt{color:var(--muted);width:110px}
.pied2{margin-top:18px;max-width:340px}
form.off .tbl.saisie{opacity:.35;pointer-events:none}
.ajouter-article-saisie{margin-top:16px;padding:14px 16px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;max-width:560px}
.ajouter-article-saisie .lbl{font-size:.82rem}
.ajouter-article-saisie .note{margin:8px 0 0;padding:0}
.lien-bl{display:inline-block;padding:5px 10px;border:1px solid var(--line2);border-radius:6px;text-decoration:none;color:var(--ink);font-size:.78rem;margin-right:6px}
.lien-bl:hover{background:var(--surface2)}
.lien-client{color:inherit;text-decoration:none;font-weight:600}
.lien-client:hover{text-decoration:underline}
/* --- stats --- */
.onglets{display:flex;gap:6px;padding:14px 26px 0}
.onglets a{padding:8px 16px;border:1px solid var(--line2);border-radius:7px;text-decoration:none;color:var(--ink);font-size:.88rem}
.onglets a.on{background:var(--vert);color:var(--ground);border-color:var(--vert);font-weight:600}
.onglets a:hover:not(.on){background:var(--surface2)}
.deux-cols{display:flex;gap:26px;padding:8px 26px 30px;align-items:flex-start;flex-wrap:wrap}
.deux-cols section{flex:1;min-width:340px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.h-sec{margin:0;padding:14px 16px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.jauge{display:inline-block;width:56px;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:7px}
.jauge i{display:block;height:100%;background:var(--vert)}
.pct{font-size:.8rem;color:var(--muted)}
.perso-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 26px 0}
.perso-form .lbl{margin:0}
.barre-recherche-client{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 26px 0}
.barre-recherche-client .lbl{margin:0}
.recherche-client-boite{position:relative}
.recherche-client-boite .champ{margin:0}
.suggestions{position:absolute;top:100%;left:0;right:0;z-index:5;background:var(--surface);border:1px solid var(--line2);
border-radius:8px;margin-top:4px;max-height:220px;overflow-y:auto;list-style:none;padding:4px 0;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.suggestions li{padding:9px 12px;cursor:pointer;font-size:.9rem}
.suggestions li:hover{background:var(--surface2)}
.assoc-actuelle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
/* --- tablette / mobile (saisie en boutique sur iPad mini et cie) --- */
.tabla-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:880px){
.bandeau{padding:14px 16px}
.marque{font-size:1rem}
.deux{flex-direction:column;min-height:0}
.cote{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--line)}
.liste{max-height:34vh}
.principal{padding:16px}
.compteurs{padding:14px 16px}
.barre{padding:0 16px 14px}
.pad2{padding:12px 16px}
}
/* Ecran tactile (tablette/mobile) : cibles plus grandes, quel que soit la largeur */
@media (pointer:coarse){
.q{width:44px;height:44px;font-size:1.3rem}
.v{width:80px;height:44px;font-size:1.05rem}
.tbl.saisie .v{width:78px;height:44px;font-size:1.05rem}
.bascule input{width:24px;height:24px}
.liste a{padding:12px 18px}
/* Cibles d'au moins 44 px (iPad) ; sans effet sur ordinateur (pointer:fine). */
.champ,.champ.mini{padding:13px;min-height:44px}
select,.nav select,.nav input[type=date]{min-height:44px}
.env{padding:16px;font-size:1.05rem;min-height:44px}
.env.mini{padding:12px 18px;min-height:44px}
.act{height:auto;min-height:44px;padding:0 14px;font-size:.85rem}
.mini-btn{padding:9px 14px;min-height:44px;font-size:.85rem}
.nav a{display:inline-flex;align-items:center;min-height:44px}
.nav a,.nav input[type=date]{padding:9px 13px}
.q:active,.env:active,.act:active,.mini-btn:active{filter:brightness(.95)}
}
/* --- livraison (tournee des livreurs, page mobile) --- */
.livraisons{max-width:640px;margin:0 auto;padding:18px 16px 40px;display:flex;flex-direction:column;gap:14px}
.livraison-vide{text-align:center;color:var(--muted);padding:60px 20px}
.livraison-carte{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.livraison-tete{padding:16px 16px 4px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.livraison-tete .nm{font-size:1.08rem;font-weight:700;margin:0}
.livraison-liens{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px 16px}
.livraison-liens a{flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;gap:6px;
padding:12px;border-radius:8px;text-decoration:none;font-size:.92rem;font-weight:600;
border:1px solid var(--line2);background:var(--surface2);color:var(--ink)}
.livraison-liens a.maps{background:var(--vert);border-color:var(--vert);color:var(--ground)}
.livraison-liens a.maps:hover{filter:brightness(1.08)}
.livraison-liens a.tel:hover{background:var(--surface)}
.livraison-manque{flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;
padding:12px;font-size:.85rem;color:var(--muted);font-style:italic}
.livraison-tbl{width:100%;border-collapse:collapse;font-size:.92rem;border-top:1px solid var(--line)}
.livraison-tbl td{padding:9px 16px;border-bottom:1px solid var(--line)}
.livraison-tbl tr:last-child td{border-bottom:none}
.livraison-tbl .qte{text-align:right;font-weight:700;white-space:nowrap}
/* Suivi : filtre clients de l'apres-midi (2026-09-07) */
.filtre-pm{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;cursor:pointer;white-space:nowrap;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--surface)}
.filtre-pm input{width:17px;height:17px;margin:0}
/* --- impression --- Depuis un appareil en mode sombre, les vues forcaient
un fond blanc mais --ink restait clair : texte invisible (Safari iPad).
On reprend ici exactement les valeurs du theme clair, et on masque le
menu lateral et les boutons d'action. */
@media print{
html{color-scheme:light}
:root{
--ground:#fff; --surface:#fff; --surface2:#F1EEE7;
--ink:#1A1815; --muted:#645C50; --line:#DFD9CD; --line2:#C2B9A8;
--vert:#2F5D50; --vert-bg:#E2EDE8; --vert-tx:#1B5F42;
--jaune:#9A5B14; --jaune-bg:#FFF3CD;
--rouge:#A32118; --rouge-bg:#F8D7DA;
}
body,body.large{background:#fff;color:var(--ink)}
.barre-laterale,.menu-bascule,.actions,.act,.mini-btn{display:none!important}
.contenu-principal{overflow:visible}
}
/* --- Ligne dépliable du suivi du jour (2026-09-13) : voir et corriger les
quantités sans ouvrir la fiche client. Le panneau vit dans une ligne de
tableau à part, en pleine largeur. --- */
.det-fleche{background:none;border:0;color:var(--muted);font-size:.95rem;line-height:1;cursor:pointer;
padding:4px 6px;margin:-4px 2px -4px -6px;border-radius:5px;font-family:inherit}
.det-fleche:hover{background:var(--surface2);color:var(--vert)}
.det-fleche[aria-expanded=true]{color:var(--vert)}
.det-row>td{padding:0;background:var(--surface2);border-bottom:1px solid var(--line2)}
.det-panneau{padding:14px 18px 16px;max-width:900px}
.det-chargement,.det-vide{margin:0;color:var(--muted);font-size:.9rem}
.det-note{margin:0 0 10px;font-size:.85rem;color:var(--jaune);background:var(--jaune-bg);
padding:8px 12px;border-radius:8px}
.det-msg{border-radius:8px;margin:0 0 10px;padding:8px 12px;font-size:.9rem}
.det-creneau{margin:10px 0 6px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.det-creneau:first-child{margin-top:0}
.det-tbl{width:100%;max-width:620px;border-collapse:collapse}
.det-tbl td{padding:4px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.det-tbl tr:last-child td{border-bottom:0}
.det-tbl .det-lib{font-size:.92rem}
.det-tbl .det-prix,.det-tbl .det-total{color:var(--muted);font-size:.85rem;white-space:nowrap}
.det-tbl .det-total{min-width:72px}
.det-tbl.det-off{opacity:.45}
.det-mot-ouvrir{background:none;border:0;color:var(--muted);font-size:.72rem;text-decoration:underline dotted;
cursor:pointer;padding:0 0 0 6px;font-family:inherit}
.det-mot-ouvrir:hover{color:var(--vert)}
.det-mot{display:block;margin:4px 0 0;width:100%;max-width:320px}
/* Sans ceci, le display:block ci-dessus l'emporte sur le [hidden] du
navigateur et le champ « détails » resterait visible en permanence. */
.det-mot[hidden]{display:none}
.det-pied{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.det-ferme{display:flex;align-items:center;gap:7px;font-size:.88rem;cursor:pointer}
.det-ferme input{width:17px;height:17px}
.det-tot{font-size:.88rem;color:var(--muted)}
.det-tot b{color:var(--ink);font-size:1.05rem;margin-left:6px}
.det-boutons{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.det-boutons .env.mini{padding:9px 16px}
.det-valider{background:var(--vert-tx);border-color:var(--vert-tx)}
@media (pointer:coarse){
.det-fleche{min-width:44px;min-height:44px;margin:-10px 0 -10px -10px;font-size:1.15rem}
.det-tbl td{padding:7px 8px}
}
/* Sur un petit écran le tableau du suivi défile déjà horizontalement : on
retire du panneau les colonnes prix/total pour que le nom et les boutons
+/− tiennent dans la largeur visible, sans avoir à faire défiler. */
@media (max-width:700px){
.det-panneau{padding:12px 14px}
.det-tbl .det-prix,.det-tbl .det-total{display:none}
.det-pied{gap:10px}
.det-boutons{margin-left:0;width:100%}
.det-boutons .env.mini{flex:1 1 140px;text-align:center}
}
@media print{ .det-row{display:none!important} }
/* --- Bandeaux d'action du suivi (2026-09-13) : les gestes en masse de la
journée — enregistrer les commandes habituelles, tout valider, envoyer les
bons — étaient de petits boutons noyés dans une barre de champs. Chacun
devient un bandeau qui annonce ce qu'il fait et sur combien. --- */
.bandeau-action{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
margin:0 26px 12px;padding:14px 18px;border-radius:12px;border:1px solid var(--line)}
.bandeau-action .ba-texte{margin:0;flex:1 1 320px;font-size:.92rem;line-height:1.45}
.bandeau-action .ba-texte b{font-weight:800}
/* .env est plein largeur par défaut (formulaires en colonne) : dans un
bandeau il doit rester un bouton, à droite du texte. */
.bandeau-action .env{width:auto;white-space:nowrap;flex:0 0 auto;padding:12px 20px;
display:inline-flex;align-items:center;justify-content:center}
.bandeau-action .ba-nom{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);flex:none}
.bandeau-action .ba-nom .champ{margin:0;width:150px}
.bandeau-habituelles{background:var(--jaune-bg);color:var(--jaune);border-color:transparent}
.bandeau-habituelles .env{background:var(--jaune);border-color:var(--jaune);color:var(--ground)}
.bandeau-valider{background:var(--surface);border-color:var(--line2)}
.bandeau-bl{background:var(--vert-bg);color:var(--vert-tx);border-color:transparent}
.bandeau-bl .env{background:var(--vert-tx);border-color:var(--vert-tx)}
.ba-details{margin:-6px 26px 14px;font-size:.87rem;color:var(--muted)}
.ba-details summary{cursor:pointer;padding:4px 0;width:fit-content}
.ba-details summary:hover{color:var(--vert)}
.ba-liste{margin:6px 0 0;line-height:1.9}
.ba-liste a{color:inherit}
@media (max-width:700px){
.bandeau-action{margin:0 14px 10px;padding:12px 14px}
/* (2026-09-14) Le bouton passe pleine largeur, mais il gardait le
white-space:nowrap prevu pour le bandeau en ligne : un libelle long
(« Enregistrer leurs commandes habituelles (1) ») debordait du bouton
des deux cotes sur telephone. Ici il a le droit de passer a la ligne. */
.bandeau-action .env{width:100%;white-space:normal;line-height:1.3;padding-inline:12px}
.ba-details{margin:-4px 14px 12px}
}
/* Fusion suivi + saisie (2026-09-13) : le panneau déplié reprend les
dernières fonctions de l'ancienne page de saisie. */
.det-retirer{background:none;border:0;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;
padding:0 4px;font-family:inherit;opacity:.55}
.det-retirer:hover{color:var(--rouge);opacity:1}
.det-hors-pm{font-size:.82rem;color:var(--muted);margin:8px 0 0}
.det-ajout{margin-top:10px;font-size:.88rem}
.det-ajout summary{cursor:pointer;color:var(--muted);width:fit-content;padding:4px 0}
.det-ajout summary:hover{color:var(--vert)}
.det-ajout-champs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.det-ajout-champs .champ{margin:0}
.det-nouveau-lib{width:220px}
.det-nouveau-prix{width:110px}
.det-note-ajout{font-size:.82rem;color:var(--muted);margin:6px 0 0}
/* Ligne visée par un lien (?client=N) : un halo bref, puis plus rien. */
.ligne-visee > td{animation:visee 2.5s ease-out}
@keyframes visee{0%,60%{box-shadow:inset 0 0 0 2px var(--vert)}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){.ligne-visee > td{animation:none;box-shadow:inset 0 0 0 2px var(--vert)}}
.ligne-fermee .det-nom em{color:var(--muted)}
@media (pointer:coarse){.det-retirer{padding:8px 10px;opacity:.8}}
/* Confirmation brève après un enregistrement depuis le suivi (2026-09-13) :
le panneau se replie, ce petit message dit ce qui s'est passé puis part. */
.toast-ok{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--vert);color:var(--ground);
padding:12px 18px;border-radius:10px;font-size:.92rem;font-weight:600;
box-shadow:0 8px 24px rgba(0,0,0,.18);transition:opacity .5s,transform .5s}
.toast-ok.parti{opacity:0;transform:translateY(8px)}
@media print{.toast-ok{display:none!important}}
/* Choix du jour sur les pages quotidiennes (2026-09-13) : deux raccourcis
devant le calendrier, pour revenir au jour même en un clic après l'heure
de bascule. */
.nav-jour{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* Le jour affiché est le bouton PLEIN ; l'autre reste discret, sinon les
deux se ressemblent et on ne sait plus lequel est actif. */
.jour-btn{text-decoration:none;white-space:nowrap;background:none;color:var(--muted);
border:1px solid var(--line2)}
.jour-btn:hover{color:var(--vert);border-color:var(--vert)}
.jour-btn.actif{background:var(--vert);border-color:var(--vert);color:var(--ground);font-weight:700}
@media (pointer:coarse){.jour-btn{min-height:44px;display:inline-flex;align-items:center}}
/* ===================================================================
Espace direction — rail d'univers (2026-09-14, option A des maquettes)
Le menu à plat arrivait à 25 entrées et doit en accueillir une
quinzaine de plus (RH, trésorerie, coûts, réseau interne). Le rail
range les pages par domaine : deux clics pour n'importe laquelle,
et un nouveau module = un univers de plus, rien à réorganiser.
Les comptes boutique et livreur gardent le menu à plat.
=================================================================== */
.barre-laterale.nav-univers{width:auto;padding:0;flex-direction:column;overflow:hidden}
.nav-univers .nav-tete{display:none}
.nav-univers .nav-corps{display:flex;flex-direction:row;flex:1;min-height:0}
.rail{width:78px;flex:none;background:var(--surface2);border-right:1px solid var(--line);
padding:14px 7px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;scrollbar-width:thin}
.rail-marque{display:block;text-align:center;font-weight:800;font-size:.72rem;letter-spacing:.04em;
padding:2px 0 12px;color:var(--ink);text-decoration:none}
.rail-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
padding:9px 4px;border-radius:9px;color:var(--muted);text-decoration:none}
.rail-item span{font-size:.6rem;font-weight:600;letter-spacing:.02em;text-align:center;line-height:1.2}
.rail-item:hover{background:var(--surface);color:var(--ink)}
.rail-item.actif{background:var(--vert-bg);color:var(--vert-tx)}
.rail-item.actif span{font-weight:700}
.rail-item.bientot{opacity:.5;cursor:default}
.rail-item.bientot:hover{background:none;color:var(--muted)}
.rail-badge{position:absolute;top:3px;right:10px;background:var(--rouge);color:var(--ground);
font-size:.58rem;font-weight:800;min-width:15px;height:15px;border-radius:8px;
display:flex;align-items:center;justify-content:center;padding:0 4px}
.rail-sortie{margin-top:auto}
.univers{width:212px;flex:none;background:var(--surface);border-right:1px solid var(--line);
padding:18px 10px;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin}
.univers-tete{padding:0 12px;margin-bottom:14px}
.univers-tete b{display:block;font-size:1.02rem;font-weight:700}
.univers-tete span{font-size:.74rem;color:var(--muted)}
.univers-nav{display:flex;flex-direction:column;gap:2px}
.univers-nav .side-link{padding:8px 12px;font-size:.87rem}
.univers-nav .side-titre{padding:12px 12px 4px}
.side-link.bientot{color:var(--muted);cursor:default;justify-content:space-between}
.side-link.bientot:hover{background:none}
.etiq-bientot{font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;font-style:normal;
border:1px solid var(--line2);color:var(--muted);border-radius:999px;padding:1px 6px;flex:none}
.univers-raccourcis{margin-top:22px;padding:12px;border-top:1px solid var(--line)}
.univers-raccourcis p{margin:0 0 8px;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.univers-raccourcis a{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.82rem;
color:var(--ink);text-decoration:none}
.univers-raccourcis a:hover{color:var(--vert-tx)}
.univers-raccourcis svg{flex:none;color:var(--muted)}
@media (max-width:900px){
/* Sur téléphone, le rail passe en bandeau horizontal au-dessus des pages
de l'univers ; tout se replie derrière le bouton Menu, comme avant. */
.barre-laterale.nav-univers{width:auto;height:auto;position:sticky;top:0;z-index:40;
border-right:none;border-bottom:1px solid var(--line);overflow:visible;
box-shadow:0 1px 6px rgba(0,0,0,.06)}
.nav-univers .nav-tete{display:flex;align-items:center;justify-content:space-between;
gap:10px;padding:10px 14px}
.nav-univers .nav-tete .marque-cote{padding:0;border-bottom:none;margin-bottom:0;min-width:0}
.nav-univers .nav-corps{display:none}
.nav-univers.ouverte .nav-corps{display:flex;flex-direction:column;border-top:1px solid var(--line);
max-height:72vh;overflow-y:auto}
.nav-univers .rail{width:auto;flex-direction:row;border-right:none;border-bottom:1px solid var(--line);
overflow-x:auto;padding:8px 10px;gap:6px}
.nav-univers .rail-marque{display:none}
.nav-univers .rail-item{min-width:70px;flex:none}
.nav-univers .rail-sortie{margin-top:0;margin-left:auto}
.nav-univers .univers{width:auto;border-right:none;padding:10px 8px 16px}
.nav-univers .univers-nav .side-link{padding:11px 12px;font-size:.95rem}
}
@media print{.rail,.univers,.nav-univers{display:none!important}}
/* « Aller à… » (Ctrl + K) : avec sept univers, taper trois lettres est
plus rapide que parcourir un menu des yeux. */
.aller-a{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 12px;padding:8px 11px;
border:1px solid var(--line2);border-radius:8px;background:var(--surface);color:var(--muted);
font-family:var(--f);font-size:.84rem;cursor:pointer;text-align:left}
.aller-a:hover{border-color:var(--vert);color:var(--ink)}
.aller-a span{flex:1}
.aller-a kbd{font-family:var(--f);font-size:.68rem;font-weight:600;border:1px solid var(--line);
border-radius:4px;padding:1px 5px;color:var(--muted)}
.palette{position:fixed;inset:0;z-index:80;background:rgba(26,24,21,.42);
display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.palette[hidden]{display:none}
.palette-boite{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line2);
border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.28);overflow:hidden}
.palette-champ{width:100%;border:none;border-bottom:1px solid var(--line);background:none;color:var(--ink);
font-family:var(--f);font-size:1rem;padding:15px 18px}
.palette-champ:focus{outline:none}
.palette-liste{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto}
.palette-liste li{display:flex;align-items:baseline;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer}
.palette-liste li b{font-weight:600;font-size:.92rem}
.palette-liste li span{margin-left:auto;font-size:.72rem;color:var(--muted);white-space:nowrap}
.palette-liste li.on,.palette-liste li:hover{background:var(--vert-bg);color:var(--vert-tx)}
.palette-vide{margin:0;padding:16px 18px;color:var(--muted);font-size:.9rem}
/* Corrections de rendu relevées à l'essai (2026-09-14). */
.etiq-bientot{white-space:nowrap}
.side-link.bientot .lib{flex:1}
@media (max-width:900px){
/* Le rail horizontal ne doit pas élargir la page : il défile dans sa
bande. Sans min-width:0, un enfant flex refuse de se rétrécir. */
.nav-univers .nav-corps{width:100%;min-width:0}
.nav-univers .rail{min-width:0;max-width:100%}
.nav-univers .univers{min-width:0}
}
/* ===================================================================
Boutique sur tablette et téléphone (2026-09-14)
Les responsables travaillent sur iPad mini et parfois sur téléphone.
Trois corrections après avoir repassé chaque page à 390, 768 et
1024 px : des cibles vraiment saisissables au doigt, des libellés
lisibles à bout de bras, et le suivi du jour en fiches plutôt qu'en
tableau dès qu'il n'y a plus la place (sinon le nom du client tenait
sur trois lignes dans 130 px et les boutons partaient hors écran).
=================================================================== */
/* ---- cibles et lisibilité au doigt ---- */
@media (pointer:coarse){
/* Les en-têtes de tableau et les petites étiquettes étaient à 10-11 px :
illisibles sur une tablette posée sur le plan de travail. */
.tbl th{font-size:.78rem;padding:12px 14px}
.tbl td{padding:13px 14px}
.badge{font-size:.74rem;padding:4px 9px}
.side-badge,.rail-badge{font-size:.7rem;min-width:19px;height:19px;border-radius:10px}
.pastille{min-width:20px;height:20px;font-size:.68rem}
/* Cases à cocher : 13 à 18 px, on ne peut pas viser ça au doigt. */
input[type=checkbox]{width:24px;height:24px}
.filtre-pm input{width:24px;height:24px}
.filtre-pm{padding:10px 14px;min-height:44px}
/* Le nom du client déplie sa commande : c'est une vraie cible, pas un
simple lien dans une phrase. */
.lien-client{display:inline-block;padding:6px 2px}
.det-fleche{padding:10px 12px;margin:-6px 2px -6px -10px;font-size:1.1rem}
.det-retirer{padding:10px 12px}
.det-mot-ouvrir{padding:8px 6px}
.retirer-ligne{padding:10px 12px;min-width:40px}
/* Les steppers de la production boutique gardaient 34 px (règle plus
précise que la règle tactile générale). */
.pb-tbl .q{width:44px;height:44px;font-size:1.25rem}
.pb-tbl .v{width:72px;height:44px;font-size:1.05rem}
.pb-sugg{padding:8px 12px;font-size:.82rem}
.poignee{width:40px;height:42px}
.pbc-suppr{padding:10px 12px}
}
/* ---- le suivi du jour quand l'écran se resserre ---- */
@media (max-width:980px){
/* « Validée par » est une info de contrôle, pas de travail : elle part
la première pour laisser la place au nom du client. */
.tbl.suivi .th-par,.tbl.suivi .cel-par{display:none}
}
@media (max-width:760px){
/* En dessous, le tableau devient une pile de fiches : chaque client
tient sur toute la largeur, les boutons passent dessous. */
.tabla-scroll{overflow-x:visible}
.tbl.suivi,.tbl.suivi>tbody{display:block;background:none}
.tbl.suivi>thead{display:none}
.tbl.suivi>tbody>tr:not(.det-row){
display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:start;
background:var(--surface);border:1px solid var(--line);border-radius:12px;
padding:12px 14px;margin:0 0 10px}
.tbl.suivi>tbody>tr>td{display:block;border:none;padding:0;background:none!important}
.tbl.suivi .cel-client{grid-column:1;grid-row:1;font-size:1.02rem;font-weight:600;min-width:0}
.tbl.suivi .cel-statut{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
.tbl.suivi .cel-recue,.tbl.suivi .cel-total{grid-column:1/-1;font-size:.84rem;color:var(--muted);text-align:left}
.tbl.suivi .cel-recue::before{content:'Reçue à '}
.tbl.suivi .cel-total::before{content:'Total HT '}
.tbl.suivi td.a{grid-column:1/-1;margin-top:2px}
.tbl.suivi .actions{justify-content:flex-start}
/* La couleur de statut passe du fond des cellules à celle de la fiche. */
.tbl.suivi>tbody>tr.rouge{background:var(--rouge-bg);border-color:var(--rouge)}
.tbl.suivi>tbody>tr.jaune{background:var(--jaune-bg);border-color:var(--jaune)}
.tbl.suivi>tbody>tr.vert{background:var(--vert-bg);border-color:var(--vert)}
.tbl.suivi>tbody>tr.gris{background:var(--surface2)}
/* Le panneau déplié se colle sous la fiche du client. */
.tbl.suivi>tbody>tr:not(.det-row):has(+ .det-row:not([hidden]))
{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
.tbl.suivi>tbody>tr.det-row{display:block;margin:0 0 10px}
.tbl.suivi>tbody>tr.det-row>td{display:block;border:1px solid var(--line2);border-top:none;
border-radius:0 0 12px 12px;background:var(--surface2)!important}
.det-panneau{padding:12px 14px 14px}
.det-tbl{max-width:none}
.det-boutons{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.det-boutons .env.mini,.det-boutons .act{flex:1 1 auto;justify-content:center}
}
/* Un badge peut être un lien (ex. « 1 commande encore à valider » sur la
clôture, qui ouvre le suivi du jour concerné) — 2026-09-14. */
a.badge{text-decoration:none}
a.badge:hover{filter:brightness(1.12)}
/* --- aide « ? » (2026-10-04) : l'explication n'apparaît qu'au survol, au
focus ou au toucher, au lieu d'occuper la page en permanence. --- */
.aide{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
border:1px solid var(--line2);color:var(--muted);background:var(--surface);font-size:.68rem;font-weight:700;line-height:1;
cursor:help;position:relative;margin-left:4px;vertical-align:middle;font-style:normal;text-transform:none;letter-spacing:0;flex:none}
.aide:hover,.aide:focus{color:var(--vert-tx);border-color:var(--vert);outline:none}
.aide::after{content:attr(data-aide);position:absolute;left:-12px;top:calc(100% + 7px);width:max-content;max-width:min(320px,70vw);
background:var(--ink);color:var(--ground);padding:9px 12px;border-radius:8px;font-size:.78rem;font-weight:400;line-height:1.45;
text-align:left;white-space:normal;z-index:60;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.aide:hover::after,.aide:focus::after{opacity:1;visibility:visible}
@media print{.aide{display:none}}
@media (prefers-color-scheme:dark){.nav input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1)}}
/* (2026-10-20) « Quitter » est un bouton de formulaire (POST + jeton) : on
lui retire l'allure de bouton pour qu'il ressemble a l'ancien lien. */
button.bouton-sortie{border:0;background:none;font-family:inherit;cursor:pointer}
button.side-link.bouton-sortie{width:100%;text-align:left}
/* ===== LOT O — menu allégé, mes raccourcis, mode atelier (2026-10-20) ===== */
/* « Plus… » : les pages secondaires d'un univers, repliées. Une page qui
porte une pastille reste visible repliée : on ne rate jamais une alerte. */
.plus-groupe{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.plus-bascule{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;border-radius:8px;
font-family:var(--f);font-size:.84rem;font-weight:600;color:var(--muted);cursor:pointer;text-align:left}
.plus-bascule:hover{background:var(--surface2);color:var(--ink)}
.plus-bascule:focus-visible{outline:2px solid var(--vert);outline-offset:1px}
.plus-bascule .plus-nb{margin-left:auto;font-size:.72rem;font-weight:400}
.plus-fleche{flex:none;transition:transform .15s}
.plus-groupe.ouvert .plus-fleche{transform:rotate(180deg)}
.plus-corps{display:flex;flex-direction:column;gap:2px}
.plus-groupe:not(.ouvert) .plus-corps>:not(.a-badge){display:none}
/* Mes raccourcis : en haut du menu. */
.rc-bloc{margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--line)}
.univers .rc-bloc{margin:0 0 10px}
.rc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:4px 12px}
.rc-tete span{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.rc-ranger{font-size:.74rem;color:var(--muted)}
.rc-ranger:hover{color:var(--ink)}
.rc-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rc-liste li{display:flex;align-items:center;gap:2px;border-radius:8px}
.rc-liste li .side-link{flex:1;min-width:0}
.rc-ctrl{display:none}
.rc-edition .rc-ctrl{display:inline-flex;gap:2px;flex:none}
.rc-edition .rc-liste li{background:var(--surface2);cursor:grab}
.rc-ctrl button{min-width:28px;height:28px;border:1px solid var(--line2);border-radius:6px;background:var(--surface);color:var(--ink);
font-size:.7rem;cursor:pointer;padding:0}
.rc-ctrl button:hover{border-color:var(--vert);color:var(--vert-tx)}
.rc-vide{margin:0;padding:2px 12px 4px;font-size:.76rem;color:var(--muted)}
.rc-msg{margin:4px 12px 6px;padding:6px 9px;border-radius:8px;background:var(--jaune-bg);color:var(--jaune);font-size:.78rem}
.lot-o-outils{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.rc-etoile{margin:0}
.rc-etoile-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:none;background:none;border-radius:8px;
color:var(--muted);font-family:var(--f);font-size:.84rem;cursor:pointer;text-align:left}
.rc-etoile-btn:hover{background:var(--surface2);color:var(--ink)}
.rc-etoile-btn .rc-sym{font-size:1.1rem;line-height:1}
.rc-etoile-btn.on .rc-sym{color:var(--jaune)}
/* L'étoile posée à côté du titre de la page (ergonomie.js). */
.rc-etoile.rc-en-tete{display:inline-block;vertical-align:middle;margin-left:6px}
.rc-en-tete .rc-etoile-btn{padding:2px 6px;font-size:1rem}
.rc-en-tete .rc-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rc-en-tete .rc-sym{font-size:1.25rem}
.at-entrer{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;color:var(--muted);font-size:.84rem;text-decoration:none}
.at-entrer:hover{background:var(--surface2);color:var(--ink)}
.at-entrer.at-en-tete{border:1px solid var(--line2);background:var(--surface);color:var(--ink);font-weight:600}
@media (pointer:coarse){
.rc-ctrl button{min-width:40px;height:40px;font-size:.85rem}
.rc-en-tete .rc-etoile-btn{padding:8px 10px}
.at-entrer.at-en-tete{min-height:44px}
.plus-bascule{padding:12px}
}
@media (max-width:900px){
.barre-laterale.ouverte .rc-bloc .side-link,.barre-laterale.ouverte .plus-groupe .side-link{padding:11px 12px;font-size:.95rem}
}
@media print{.rc-etoile,.at-entrer,.rc-bloc{display:none!important}}
/* Mode atelier : plein écran, gros caractères, gros boutons, contrastes forts.
La taille du texte (A− / A+) est une variable posée par l'appareil. */
html.mode-atelier{font-size:var(--at-taille,125%);--muted:#4D473E;--line:#C9C0AF;--line2:#968C7B}
@media (prefers-color-scheme:dark){html.mode-atelier{--muted:#CFC6B6;--line:#4E483E;--line2:#7A7264}}
html.mode-atelier body{font-size:1rem}
html.mode-atelier .app-layout{flex-direction:column}
html.mode-atelier .barre-laterale{display:none!important}
.atelier-bandeau{position:sticky;top:0;z-index:45;display:flex;flex-direction:column;gap:8px;padding:8px 14px 10px;
background:var(--surface);border-bottom:2px solid var(--line2);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.at-haut{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.at-titre{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;min-width:0}
.at-titre b{font-size:1.2rem;font-weight:800}
.at-quand{color:var(--muted);font-size:.9rem;font-weight:600}
.at-maj{font-size:.78rem;color:var(--muted)}
.at-maj.at-maj-alerte{color:var(--jaune);font-weight:700}
.at-outils{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.at-form{display:contents}
.at-btn{min-height:48px;min-width:48px;padding:6px 14px;border:2px solid var(--line2);border-radius:10px;background:var(--surface);
color:var(--ink);font-family:var(--f);font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:none;
display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.at-btn:hover{border-color:var(--vert);color:var(--vert-tx)}
button.at-btn.bouton-sortie{border:2px solid var(--line2);background:var(--surface)}
.at-btn:focus-visible,.at-onglets a:focus-visible{outline:3px solid var(--vert);outline-offset:2px}
.at-verrou{font-weight:700;color:var(--jaune);font-size:.9rem}
.at-onglets{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.at-onglets a{flex:none;min-height:54px;padding:8px 20px;border-radius:12px;border:2px solid var(--line2);background:var(--surface2);
color:var(--ink);font-weight:800;font-size:1rem;text-decoration:none;display:flex;align-items:center}
.at-onglets a.actif{background:var(--vert);border-color:var(--vert);color:var(--ground)}
.at-message{margin:0;padding:10px 14px;border-radius:10px;background:var(--jaune-bg);color:var(--jaune);font-weight:700}
/* Les commandes de la page, à la taille du doigt. */
html.mode-atelier .mini-btn,html.mode-atelier .env.mini{min-height:48px;padding:10px 16px;font-size:.95rem}
html.mode-atelier .env{min-height:52px}
html.mode-atelier .champ,html.mode-atelier select,html.mode-atelier input[type=date],
html.mode-atelier input[type=number],html.mode-atelier input[type=text]{min-height:48px;font-size:1rem}
html.mode-atelier input[type=checkbox],html.mode-atelier input[type=radio]{width:28px;height:28px}
html.mode-atelier .nav a{display:inline-flex;align-items:center;min-height:48px}
html.mode-atelier .bandeau{padding:12px 16px}
/* Téléphone (ou tablette couchée très basse) : le bandeau ne reste pas collé
en haut, il prendrait le tiers de l'écran. */
@media (max-width:600px),(max-height:520px){
.atelier-bandeau{position:static;padding:6px 10px 8px;gap:6px}
.at-titre b{font-size:1.05rem}
.at-quand{font-size:.82rem}
.at-outils{margin-left:0;width:100%;gap:5px}
.at-btn{min-height:44px;min-width:44px;padding:4px 10px;font-size:.8rem}
.at-onglets a{min-height:46px;padding:6px 14px;font-size:.9rem}
}
/* L'impression ne change pas : ni bandeau, ni grossissement. */
@media print{.atelier-bandeau{display:none!important}html.mode-atelier{font-size:100%!important}}
/* LOT 19B — bandeau « Nouvelles recettes — Actualiser » des classeurs du bureau
(recettes_sync.js : plus jamais de rechargement forcé de la page). */
.rc-sync-bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rc-sync-bandeau button{min-height:38px;padding:6px 14px;border-radius:8px;border:1px solid var(--vert);background:var(--vert);
color:var(--ground);font:inherit;font-weight:700;cursor:pointer}
@media (pointer:coarse){ .rc-sync-bandeau button{min-height:44px} }
/* LOT 19C — (TL2) Les petits boutons verts posés dans le bandeau (.nav) :
la règle « .nav a » leur imposait la couleur du texte et le fond clair au
survol, d'où un texte vert foncé sur fond vert foncé. On rend aux
boutons leurs propres couleurs, sans toucher aux autres liens du bandeau. */
.nav a.mini-btn,.nav a.env{color:var(--ground);background:var(--vert);border-color:var(--vert)}
.nav a.mini-btn:hover,.nav a.env:hover{background:var(--vert);filter:brightness(1.08)}
.nav a.mini-btn.sec{color:var(--vert);background:none;border-color:var(--line2)}
.nav a.mini-btn.sec:hover{background:var(--surface2);filter:none}
.nav a.env{width:auto;font-weight:600}
/* LOT 19G — mode atelier : la date de la page dans le bandeau, et les
onglets sur deux lignes en tablette (plus de défilement caché à droite). */
.at-jour-page{display:inline-block;font-size:.9rem;font-weight:800;color:var(--jaune);background:var(--jaune-bg);
border:1px solid var(--jaune);border-radius:8px;padding:2px 10px}
.at-jour-page.auj{color:var(--vert-tx);background:var(--vert-bg);border-color:var(--vert)}
@media (max-width:1100px){
.at-onglets{flex-wrap:wrap;overflow-x:visible}
.at-onglets a{flex:1 1 calc(25% - 8px);justify-content:center;min-width:120px}
}
@media (max-width:600px){ .at-onglets a{flex:1 1 calc(50% - 8px);min-width:0} }
/* LOT 19I — clôture du mois (onglets, file, aperçu, téléphone), pastilles grises, Produits & TVA, avoirs */
.side-badge.lot19i-gris{background:var(--muted);color:var(--ground)}
.l19i-cache{display:none}
.l19i-onglets,.lot19i-onglets{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.lot19i-onglets{padding:12px 26px 0}
.l19i-onglets .mini-btn:not(.actif),.lot19i-onglets .mini-btn:not(.actif),.av-onglets .mini-btn:not(.actif){background:none;color:var(--vert);border-color:var(--line2)}
.l19i-onglets .mini-btn.l19i-ecart:not(.actif){color:var(--rouge);border-color:var(--rouge);font-weight:700}
.l19i-onglets .mini-btn.l19i-ecart.actif{background:var(--rouge);border-color:var(--rouge);color:var(--ground)}
.l19i-motifs{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;margin:0 0 12px;font-size:.9rem}
.l19i-motif{display:inline-flex;gap:6px;align-items:center;background:var(--jaune-bg);border:1px solid var(--line);border-radius:10px;padding:5px 8px}
.l19i-motif a:first-child{color:var(--ink);text-decoration:none}
.l19i-controle{margin:0 26px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.l19i-controle summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.l19i-points{margin:8px 0 0;padding-left:18px;font-size:.9rem}
.l19i-points li{margin:4px 0}
.l19i-points .l19i-erreur b{color:var(--rouge)}
.l19i-points .l19i-attention b{color:var(--jaune)}
.l19i-tr-ecart td{background:var(--rouge-bg)}
.l19i-statut .l19i-num{font-weight:700}
.l19i-lien{font-size:.82rem;margin-left:6px}
.l19i-ttc,.l19i-a{display:block;margin:2px 0}
.l19i-actions{display:inline-flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.l19i-cocher{display:flex;gap:18px;flex-wrap:wrap;padding:0 26px 8px;font-size:.9rem}
.l19i-cocher label{display:flex;gap:6px;align-items:center;cursor:pointer}
.l19i-pied{align-items:center;flex-wrap:wrap}
.l19i-autres summary{cursor:pointer;color:var(--muted);font-size:.85rem}
.l19i-autres[open]{flex-basis:100%}
.l19i-file,.l19i-apercu{margin:0 26px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.l19i-apercu h2{margin:0 0 8px;font-size:1.05rem}
.l19i-resume{margin:0 0 10px;padding-left:18px}
.l19i-resume .l19i-attention{color:var(--jaune)}
.l19i-opt{display:flex;gap:8px;align-items:center;margin:6px 0}
.l19i-mail{margin:10px 0}
.l19i-mail summary{cursor:pointer;font-weight:600}
.l19i-mail-corps{color-scheme:light;background:Canvas;color:CanvasText;border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-top:6px;max-width:680px}
.l19i-boutons{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.l19i-file-tete{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.l19i-barre{height:12px;background:var(--surface2);border-radius:6px;overflow:hidden;margin:10px 0 6px}
.l19i-barre i{display:block;height:100%;background:var(--vert);transition:width .3s}
.l19i-file-cpt{margin:4px 0 8px}
.l19i-file-boutons{display:flex;gap:8px;flex-wrap:wrap}
.l19i-journal{margin-top:10px}
.l19i-journal summary{cursor:pointer}
.l19i-lignes{margin:6px 0 0;padding-left:18px;font-size:.88rem;max-height:320px;overflow:auto}
.l19i-l-echec{color:var(--rouge)}
.l19i-l-ignore{color:var(--jaune)}
.l19i-l-fait{color:var(--vert-tx)}
.l19i-l-attente{color:var(--muted)}
.l19i-dialog{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);max-width:560px;width:calc(100% - 32px)}
.l19i-dialog::backdrop{background:rgba(0,0,0,.45)}
.l19i-dialog h2{margin:0 0 6px;font-size:1.05rem}
.l19i-dialog textarea{width:100%;box-sizing:border-box}
.lot19i-verrou{border-left:4px solid var(--jaune);padding-left:8px}
.l19i-bloc{margin:0 26px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.l19i-bloc h2{margin:0 0 8px;font-size:1rem}
.l19i-grille-av{display:grid;grid-template-columns:minmax(160px,1.4fr) minmax(160px,1.4fr) 90px 110px 34px;gap:6px 10px;align-items:end}
.l19i-stat{width:100%;border-collapse:collapse;font-size:.88rem}
.l19i-stat td,.l19i-stat th{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}
.l19i-stat .n{text-align:right}
@media (max-width:760px){
.av-dem th,.av-dem td{padding:6px 4px}
.l19i-file,.l19i-apercu,.l19i-controle,.l19i-bloc{margin:0 12px 12px;padding:12px}
.l19i-cocher{padding:0 16px 8px}
.lot19i-onglets{padding:10px 16px 0}
/* C14 : la clôture en fiches, le statut sous le nom */
.l19i-tbl thead{display:none}
.l19i-tbl,.l19i-tbl tbody,.l19i-tbl tr,.l19i-tbl td{display:block;width:auto}
.l19i-tbl tr{border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:8px 10px;position:relative}
.l19i-tbl td{border:none;padding:2px 0}
.l19i-tbl td.l19i-case{position:absolute;right:10px;top:8px}
.l19i-tbl td.l19i-nom{padding-right:40px}
.l19i-tbl td.n{display:flex;justify-content:space-between;text-align:right}
.l19i-tbl td.n::before{content:attr(data-lib);color:var(--muted);font-size:.8rem}
.l19i-grille-av{grid-template-columns:1fr 1fr}
}
/* LOT 19K — Odoo en panne dans le menu de la direction (avec « Réessayer ») */
.l19k-odoo-menu{margin:10px 0 0;padding:9px 10px;border-radius:8px;background:var(--jaune-bg);color:var(--jaune);font-size:.78rem;line-height:1.4}
.l19k-odoo-menu .mini-btn{margin-top:6px;font-size:.75rem;padding:4px 10px}
.l19k-odoo-panne .mini-btn{margin-left:6px}
/* LOT 19K — fin */
/* LOT 19L — ergonomie transverse (27/10/2026)
------------------------------------------------------------------
LES TROIS FORMES D'AIDE (UX5) — à utiliser partout, rien d'autre :
1. Aide courte : la pastille « ? »
? (PHP : lot19l_aide('Texte'))
La classe .aide est RÉSERVÉE à la pastille : jamais sur un paragraphe
(sa réutilisation avait écrasé les aides de la fiche salarié).
2. Alerte, orange (à surveiller) ou rouge (à traiter) :
…
…
(PHP : lot19l_alerte($html, 'orange'|'rouge'))
Équivalents existants, même rendu : .alerte.warn / .alerte.err (pages
à bandeau), .cr-alerte, .hyg-msg, .r-msg (modules).
3. Information (gris) :
…
(une ligne sous un bloc) ou …
(paragraphe à part) (PHP : lot19l_info($html))
------------------------------------------------------------------ */
.l19l-alerte{margin:0 0 14px;padding:10px 14px 10px 38px;border-radius:10px;font-size:.9rem;line-height:1.45;
background:var(--jaune-bg);color:var(--jaune);position:relative}
.l19l-alerte::before{content:"⚠";position:absolute;left:13px;top:9px;font-size:1rem}
.l19l-alerte.rouge{background:var(--rouge-bg);color:var(--rouge)}
.l19l-alerte a,.l19l-info a{color:inherit;font-weight:600}
.l19l-info{margin:0 0 14px;padding:10px 14px;border-radius:10px;font-size:.88rem;line-height:1.45;
background:var(--surface2);color:var(--ink);border:1px solid var(--line)}
.alerte.avert{border-radius:10px}
.contenu-principal > .l19l-alerte,.contenu-principal > .l19l-info{margin:12px 26px}
@media (max-width:760px){.contenu-principal > .l19l-alerte,.contenu-principal > .l19l-info{margin:12px 16px}}
@media print{.l19l-alerte,.l19l-info{background:none!important;border:1px solid #999;color:#000!important}}
/* UX2 — contrastes : le bouton « Se déconnecter » de l'écran Mode atelier
(texte de la couleur du fond sur fond transparent : invisible, 1,1:1). */
button.mini-btn.bouton-sortie{background:var(--surface);color:var(--vert-tx);border:1px solid var(--line2)}
/* UX3 — le sélecteur de société, un seul composant (lot19l_selecteur_societe) */
.l19l-soc{display:inline-flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap}
.l19l-soc-l{font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.l19l-soc-s{font:inherit;font-size:.9rem;min-height:40px;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;
background-color:var(--surface);color:var(--ink);max-width:min(100%,320px)}
.l19l-soc-s:focus{outline:2px solid var(--vert);outline-offset:1px}
/* menu boutique : l'affichage (caché sur téléphone tant que le menu est fermé) reste celui de .side-boutique */
.side-boutique .l19l-soc-l{display:block;margin:0 0 4px;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase}
.side-boutique .l19l-soc-s{width:100%;max-width:none;min-height:40px}
.l19l-soc.side-boutique{display:block}
@media (max-width:900px){.l19l-soc.side-boutique{display:none}.barre-laterale.ouverte .l19l-soc.side-boutique{display:block}}
html.cockpit .l19l-soc-s{background-color:var(--surface2)}
.l19l-soc.ck-societes{margin:0;width:auto}
.l19l-soc.hyg-soc{margin:0 0 12px}
@media print{.l19l-soc{display:none!important}}
/* UX11 — « Aller au contenu » : invisible tant qu'on n'y arrive pas au clavier */
.l19l-saut{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:8px;
background:var(--vert);color:var(--ground);font-weight:700;text-decoration:none;transition:top .15s}
.l19l-saut:focus{top:12px;outline:3px solid var(--jaune);outline-offset:2px}
#contenu:focus{outline:none}
h1.marque{font-size:1.1rem;font-weight:700;margin:0;line-height:1.35}
@media (max-width:760px){h1.marque{font-size:1rem}}
/* UX6 — page de refus d'accès / élément introuvable */
.l19l-acces{max-width:620px;margin:48px auto;padding:28px 30px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.l19l-acces-seul{padding:0 16px}
.l19l-acces h1{margin:0 0 10px;font-size:1.35rem}
.l19l-acces-code{margin:0 0 6px;font-size:2rem;line-height:1}
.l19l-acces-motif{margin:0 0 12px;font-size:1rem;line-height:1.5}
.l19l-acces-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.l19l-acces-actions .env.mini{width:auto;text-decoration:none;display:inline-flex;align-items:center;min-height:42px}
.l19l-acces-actions .mini-btn{display:inline-flex;align-items:center;min-height:42px}
@media (max-width:760px){.l19l-acces{margin:20px 0;padding:20px 18px}}
/* UX12 — « Annuler » pendant 10 s (lot19l.js) */
.l19l-toasts{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;
width:min(560px,calc(100vw - 32px));pointer-events:none}
.l19l-toast{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 16px;
border-radius:10px;background:var(--ink);color:var(--ground);box-shadow:0 6px 22px rgba(0,0,0,.25);font-size:.92rem}
.l19l-toast-annuler{flex:none;min-height:40px;padding:0 16px;border-radius:8px;border:2px solid var(--ground);background:none;color:var(--ground);
font:inherit;font-weight:700;cursor:pointer}
.l19l-toast-annuler:hover,.l19l-toast-annuler:focus{background:var(--ground);color:var(--ink);outline:none}
.l19l-retire,.l19l-retire td{opacity:.45;text-decoration:line-through}
.l19l-retire.barre{opacity:.25}
@media print{.l19l-toasts{display:none!important}}
/* Fusion des lots : un raccourci déjà listé dans l'univers ouvert n'est pas répété */
.rc-liste li.l19l-doublon{display:none}
.rc-edition .rc-liste li.l19l-doublon{display:flex}
.rc-edition .l19l-rc-ici{display:none}
/* UX9 — sommaire et filtre en haut des pages longues */
.contenu-principal > .l19l-sommaire{margin:12px 26px 16px}
@media (max-width:760px){.contenu-principal > .l19l-sommaire{margin:12px 16px}}
.l19l-sommaire{margin:0 0 16px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;font-size:.88rem}
.l19l-sommaire b{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.l19l-sommaire ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.l19l-sommaire a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--line2);border-radius:999px;
text-decoration:none;color:var(--vert-tx);background:var(--surface)}
.l19l-sommaire a:hover{border-color:var(--vert)}
.l19l-filtre{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.l19l-filtre input{font:inherit;font-size:.92rem;min-height:38px;padding:6px 12px;border:1px solid var(--line2);border-radius:8px;
background:var(--surface);color:var(--ink);width:min(320px,80vw)}
.l19l-filtre-n{font-size:.82rem;color:var(--muted)}
.l19l-filtre-cache{display:none!important}
@media print{.l19l-sommaire,.l19l-filtre{display:none!important}}
/* UX7 — cibles tactiles d'au moins 40 px sur tablette et téléphone (boutique,
livreur, atelier). Rien ne change à la souris. Les petites pastilles
cliquables gardent leur taille à l'œil : leur zone de toucher est agrandie
par un cadre invisible. */
@media (pointer:coarse){
.side-link,.rc-etoile-btn,.plus-bascule{min-height:40px}
.rc-etoile-btn{min-width:40px}
.tbl.suivi .lien-client,.lien-client{display:inline-flex;align-items:center;min-height:40px}
.jr-btn,.jr-etape.etat-rien .jr-btn{min-height:44px}
.part-payee,.l19l-soc-s{min-height:40px}
.tbl.suivi a.badge,a.badge,.det-fleche,.aide{position:relative}
.tbl.suivi a.badge::after,a.badge::after,.det-fleche::after{content:"";position:absolute;inset:-10px -6px}
.cmd label:has(> .coche),label:has(> input.coche){display:inline-flex;align-items:center;gap:8px;min-height:40px}
.gp-aide a{display:inline-block;padding:12px 0}
td.pl-case .plus-btn{opacity:.8}
.mini-btn,.act{min-height:40px}
a.mini-btn,a.act{display:inline-flex;align-items:center}
select,.champ.mini{min-height:40px}
}
/* LOT 19L — fin */