/* ======================= Densité « poste de travail » =======================
   Chargé en DERNIER par index.html (le logiciel seulement : les pages client carnet / relevé / proforma gardent leur style).
   But : tout tient dans l'écran comme MonPOS (portable 1280 × 720 réglé à 150 %, soit environ 1280 × 530 utiles).
   Police Inter, échelle resserrée, en-tête de page sur une ligne, menu et barre du haut fins, tableaux denses. */
:root{
  --f-body:"Inter",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --f-disp:"Inter",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --f-num:"Inter",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --f-marque:"Poppins",system-ui,"Segoe UI",Arial,sans-serif;
  --t-chiffre:1.5rem;     /* 24 px : chiffre des cartes */
  --t-titre:1.25rem;      /* 20 px : titre de page */
  --t-carte:.9375rem;     /* 15 px : titre de panneau, de fenêtre */
  --t-texte:.875rem;      /* 14 px : texte courant, tableaux, boutons */
  --t-petit:.78125rem;    /* 12,5 px : sous-lignes, détails */
  --t-etiq:.71875rem;     /* 11,5 px : étiquettes en majuscules */
  --haut-barre:52px; --menu-l:236px;
}
/* Plus d'agrandissement du texte sur tablette ; léger ajustement seulement au téléphone */
@media (max-width:1023px){:root{--t-texte:.875rem;--t-petit:.78125rem}}
@media (max-width:640px){:root{--t-texte:.9rem;--t-petit:.8rem;--t-titre:1.2rem;--t-chiffre:1.35rem}}
/* Documents (factures, tickets, impression) : police d'origine, rien ne change sur le papier */
#impression,.paperwrap,.paper,.ticket{--f-body:"Poppins",system-ui,"Segoe UI",Arial,sans-serif;--f-disp:"Poppins",system-ui,"Segoe UI",Arial,sans-serif;--f-num:"Poppins",system-ui,"Segoe UI",Arial,sans-serif;font-family:var(--f-body)}

html{scrollbar-gutter:stable}
body{line-height:1.45;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
h1,h2,h3{letter-spacing:-.01em}
.etiquette,.kpi .lab,th,.poche .lab,.col-h,.form-grid .titre-section{letter-spacing:.04em;font-weight:var(--g-fort)}

/* ---------- menu de gauche fin ---------- */
@media (min-width:861px){.app{grid-template-columns:var(--menu-l) minmax(0,1fr)}}
.side{gap:6px;padding-block:10px 8px}
.side .logo{max-width:168px;padding:2px 0 6px}
.nav button,.grp-btn{padding:7px 10px;font-size:var(--t-texte);min-height:34px;box-sizing:border-box}
.grp-btn{margin-top:2px}
.grp-items button{font-size:var(--t-texte);padding-top:6px;padding-bottom:6px;min-height:32px}
.side .nav-indic{height:32px}
.signature{padding:8px 10px 0}

/* ---------- barre du haut fine, opaque ---------- */
.topbar{min-height:var(--haut-barre);padding-block:8px;background:var(--panel)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 1px 0 var(--line)}
.topbar .crumb{font-size:var(--t-texte);font-weight:var(--g-fort);color:var(--ink)}
.iconbtn{padding:5px 8px;min-height:32px}
.compte-btn{padding:2px 9px 2px 2px}
.compte-btn .avatar{width:28px;height:28px}
/* Imprimer garde sa place même quand il est caché (les autres boutons ne bougent pas) */
#btnImprimer[hidden]{display:inline-flex!important;visibility:hidden}
/* Bouton « Caisse » dans la barre du haut (remplace la bulle POS sur ordinateur) */
.btn-caisse{border:0;border-radius:var(--r-btn);padding:0 14px;min-height:32px;display:inline-flex;align-items:center;gap:7px;background:var(--cuivre-btn,var(--copper));color:#fff;font-weight:var(--g-fort);font-size:var(--t-texte);white-space:nowrap;position:relative}
.btn-caisse:hover{background:var(--copper-hi)}
.btn-caisse svg{width:16px;height:16px}
.btn-caisse .bulle-badge{position:static;margin-left:2px;min-width:18px;height:18px;line-height:14px;font-size:var(--t-etiq);padding:0 5px;border-width:1.5px}
:root[data-theme="dark"] .btn-caisse{color:#1a1206}
@media (min-width:861px){.bulle-pos{display:none!important}}
@media (max-width:860px){.btn-caisse{display:none}}

/* Plus de grand logo en filigrane derrière le contenu (seulement sur l'écran de connexion) */
.main::before{display:none!important}

/* ---------- contenu ---------- */
.content{padding-block:16px 32px;gap:var(--esp-4);max-width:1600px}
@media (max-width:860px){.content{padding-bottom:96px}} /* place pour la bulle POS du téléphone */

/* En-tête de page : une seule ligne (titre à gauche, actions à droite), pas de bandeau ni de phrase d'aide */
.head{flex-wrap:nowrap;align-items:center;gap:var(--esp-3);min-height:36px}
.head>div:first-child{min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.head .eyebrow{display:none!important}
.head h1{font-size:var(--t-titre);font-weight:var(--g-fort);line-height:1.25;letter-spacing:-.01em}
.head .head-sous{color:var(--muted);font-size:var(--t-petit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head .head-aide{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:var(--g-fort);cursor:help;align-self:center}
.head .head-aide:hover{border-color:var(--copper);color:var(--copper)}
.head>.row{flex-wrap:wrap;justify-content:flex-end;gap:var(--esp-2);margin-left:auto}
.head p{display:none}
@media (max-width:860px){.head{flex-wrap:wrap}.head>.row{margin-left:0;justify-content:flex-start}}

/* ---------- boutons et champs (34 px, petits 28 px) ---------- */
.btn{padding:6px 12px;min-height:34px;line-height:20px;gap:6px}
.btn.sm{padding:3px 9px;min-height:28px;line-height:20px;font-size:var(--t-petit)}
.btn svg{width:15px;height:15px}
.field{gap:3px}
.field input,.field select,.field textarea,.inp{padding:6px 10px;min-height:34px;line-height:20px}
.field textarea{min-height:64px}
.seg{padding:2px}
.seg button{padding:4px 10px;line-height:20px}
.x{width:30px;height:30px}

/* ---------- panneaux ---------- */
.panel{padding:14px 16px}
.panel-h{margin-bottom:10px}
.panel-h h2,.panel>h2{font-size:var(--t-carte)}
.sheet-h{padding:12px 16px}
.sheet-b{padding:16px;gap:12px}
.sheet-f{padding:10px 16px}

/* ---------- cartes chiffrées : compactes, même hauteur ---------- */
.kpis{gap:var(--esp-3);align-items:stretch}
.kpi{padding:12px 14px;gap:2px;min-height:72px;justify-content:flex-start}
.kpi .val{font-size:var(--t-chiffre);line-height:1.2;letter-spacing:-.015em}
.kpi .sub{font-size:var(--t-petit);line-height:1.35}
.kpi .split{margin-top:6px;gap:1px;font-size:var(--t-petit);line-height:1.35}
.kpi .split div span:last-child{white-space:nowrap}
.kpi:hover,.poche:hover{transform:none}
.kpi.hero .lab,.kpi.hero .sub,.kpi.hero small,.kpi.hero .muted{color:#fff!important;opacity:.9}
.kpi.hero .split span:first-child{color:#fff;opacity:.85}
.poches{gap:var(--esp-3)}
.poche{padding:12px 14px;gap:3px;border-top-width:3px}
.poche .num{font-size:var(--t-chiffre);line-height:1.2}

/* ---------- tableaux denses ---------- */
table{font-size:var(--t-texte);line-height:1.35}
th,.content th{padding:8px 12px;font-size:var(--t-etiq);letter-spacing:.04em;color:var(--muted);background:var(--panel2)}
td{padding:6px 12px;vertical-align:middle}
td .sub{font-size:var(--t-petit);line-height:1.3}
.tw td .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
td.r,th.r,td .num{white-space:nowrap}
.detail td{padding:0 12px 12px}
.detail-in{padding:10px 12px;gap:8px}
.mini td,.mini th{padding:5px 8px}
.li{padding:7px 0}
.pill{padding:1px 8px;line-height:18px}
/* En-têtes de colonnes qui restent visibles en faisant défiler (tableaux qui tiennent dans la largeur) */
@media (min-width:1024px){
  .tw.colle{overflow:visible}
  .tw.colle>table>thead th,.content .tw.colle>table>thead th{position:sticky;top:calc(var(--haut-barre) + env(safe-area-inset-top,0px));z-index:3;background:var(--panel2)}
}
/* Date et heure sur la même ligne */
.dh{white-space:nowrap}
.dh .h{color:var(--muted);margin-left:5px}

/* Actions d'une ligne : icônes compactes (crayon, menu ⋯) */
.actions{gap:4px;flex-wrap:nowrap;align-items:center}
.btn.ico{padding:0;width:30px;min-height:30px;height:30px;justify-content:center}
.btn.ico svg{width:15px;height:15px}
.menu-act{position:relative;display:inline-block}
.menu-act>summary{list-style:none;cursor:pointer}
.menu-act>summary::-webkit-details-marker{display:none}
.menu-act>summary.btn{font-size:16px;font-weight:700;letter-spacing:.05em;line-height:1}
.menu-act[open]>summary{border-color:var(--copper);background:var(--copper-soft)}
.menu-act>.menu-act-l{display:none}
.menu-act-l.flottant{position:fixed;z-index:80;min-width:190px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-carte);box-shadow:0 12px 32px rgba(0,0,0,.18);padding:5px;display:flex;flex-direction:column;gap:1px}
.menu-act-l .btn{border:0!important;background:none!important;box-shadow:none!important;justify-content:flex-start;width:100%;min-height:32px;font-size:var(--t-texte);font-weight:var(--g-normal);padding:6px 10px;border-radius:var(--r-btn)}
.menu-act-l .btn:hover{background:var(--panel2)!important}
.menu-act-l .btn.danger{color:var(--bad)}

/* ---------- barre de filtres sur une ligne ---------- */
.filtres{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
.filtres input[type=search]{flex:1 1 200px;width:auto;min-width:160px}
.filtres select.inp{width:auto;flex:none;max-width:200px;padding-right:6px}
.filtres .total-f{margin-left:auto;white-space:nowrap}
@media (max-width:640px){.filtres select.inp{flex:1 1 140px;max-width:none}.filtres .total-f{margin-left:0;flex-basis:100%}}

/* ---------- messages « vide » : une ligne grise discrète ---------- */
.vide{flex-direction:row;justify-content:center;gap:8px;padding:14px 16px;font-size:var(--t-texte)}
.vide .speed{display:none}
.chargement{padding:14px 16px}
.bientot{padding:20px 16px}

/* ---------- tableau de bord ---------- */
.chart{height:150px;padding-top:20px;background:repeating-linear-gradient(to top,transparent 0 32px,var(--line) 32px 33px)}
.head .seg button{padding:4px 9px}

/* ---------- pages refaites récemment : mêmes tailles ---------- */
.cr-kpis{margin-bottom:var(--esp-3)}
.cr-tete{padding:8px 12px}
.dep-hero{padding:12px 16px}
.dep-total{font-size:1.5rem;font-weight:700}
.dep-cats{margin-top:10px;padding-top:8px}
.dep-ligne{padding:3px 6px}
.dep-onglets button{padding:4px 12px}
.dep-act .btn{margin:0 0 0 4px}
.stk-min{padding:3px 8px;min-height:28px}

/* ---------- caisse : boutons d'action en haut, tableau pleine largeur ---------- */
.caisse-bas{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-4)}

/* Mode nuit : fond de la barre du haut et des en-têtes de tableaux bien opaques */
:root[data-theme="dark"] th{background:var(--panel2)}

/* ======================= Téléphones et tablettes (≤ 860 px) =======================
   Le PC (plus de 860 px) ne change pas. Appareils visés : iPhone 15 / 17 Pro Max (430–440), S24 Ultra (384–412),
   Z Fold fermé (344, le plus étroit), Z Fold ouvert (690). */

/* ---------- règle commune : tableau → cartes sur téléphone ----------
   Pour l'utiliser : ajouter la classe « cartes-tel » au cadre .tw du tableau. menu.js recopie le titre de chaque colonne
   dans data-l de chaque case ; sous 760 px (téléphones, Fold ouvert) chaque ligne devient une carte : 1re case = titre de la carte (pleine largeur),
   les autres cases en colonnes (2 sur téléphone, 4 sur Fold ouvert) avec leur petit titre au-dessus, la dernière case sans titre (boutons) en bas à droite.
   Classes de cases (th ET td) : « cache-tel » = cachée sous 600 px ; « cache-etroit » = cachée sous 860 px (Fold ouvert, tablette) ;
   « carte-large » = prend toute la largeur de la carte. */
@media (max-width:860px){.cache-etroit{display:none!important}}
@media (max-width:600px){.cache-tel{display:none!important}}
@media (max-width:760px){
  .tw.cartes-tel{overflow:visible}
  .cartes-tel>table,.cartes-tel>table>tbody,.cartes-tel>table>tfoot{display:block;width:100%}
  .cartes-tel>table{table-layout:auto}
  .cartes-tel>table>thead,.cartes-tel>table>colgroup{display:none}
  .cartes-tel>table>tbody>tr,.cartes-tel>table>tfoot>tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 14px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .cartes-tel>table>tbody>tr:last-child{border-bottom:0}
  .cartes-tel>table>tbody>tr>td,.cartes-tel>table>tfoot>tr>td{display:block;padding:0!important;border:0!important;white-space:normal!important;overflow:visible!important;text-overflow:clip;min-width:0;width:auto!important;max-width:none;text-align:left;background:none}
  .cartes-tel>table>tbody>tr>td:first-child,.cartes-tel td.carte-large{grid-column:1/-1}
  .cartes-tel td[data-l]:not([data-l=""]):not(:first-child)::before{content:attr(data-l);display:block;margin-bottom:1px;font-size:var(--t-etiq);font-weight:var(--g-fort);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .cartes-tel>table>tbody>tr>td:empty{display:none}
  /* Dernière case sans titre = boutons : toute la largeur, alignés à droite, faciles à toucher */
  .cartes-tel>table>tbody>tr>td:last-child[data-l=""]{grid-column:1/-1;justify-self:end}
  .cartes-tel>table>tbody>tr>td:last-child[data-l=""]:not(:has(button,a,summary,select,input)){display:none}
  /* Deux boutons au plus : ils se mettent à côté de la dernière valeur s'il reste une place */
  .cartes-tel>table>tbody>tr>td:last-child[data-l=""]:not(:has(.actions>:nth-child(3),.us-actions>:nth-child(2))){grid-column:auto;align-self:end}
  .cartes-tel .actions,.cartes-tel .us-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .cartes-tel .btn.ico,.cartes-tel .btn.sm.ico{width:40px;height:40px;min-height:40px}
  .cartes-tel .btn.ico svg{width:17px;height:17px}
  .cartes-tel .vt-act{min-height:40px;padding:6px 12px;border:1px solid var(--line)}
  .cartes-tel td .sub,.tw.cartes-tel td .sub{white-space:normal;max-width:none}
  .cartes-tel .une-ligne{white-space:normal}
}

/* ---------- barre du haut (téléphone) : boutons de 40 px, titre de la page lisible ---------- */
@media (max-width:860px){
  .topbar{gap:6px;min-height:calc(var(--haut-barre) + 4px);padding-block:7px}
  .topbar .iconbtn{min-width:40px;min-height:40px;padding:0 9px;justify-content:center}
  .topbar .compte-btn{min-height:40px}
  .topbar .compte-btn .avatar{width:32px;height:32px}
}
@media (max-width:640px){
  .topbar{padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));gap:5px}
  .topbar .iconbtn{min-width:38px;min-height:38px;padding:0}
  /* Compte : la pastille seule (la flèche prend de la place) */
  .topbar .compte-btn{padding:2px;border-radius:999px}
  .topbar .compte-btn>svg{display:none}
  .topbar .compte-btn .avatar{width:34px;height:34px}
  /* Menu du compte : jamais plus large que l'écran */
  .compte-menu{max-width:calc(100vw - 20px)}
}

/* ---------- menu de gauche = tiroir (téléphone) ---------- */
@media (max-width:860px){
  .side{width:min(300px,86vw);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
  .nav button,.grp-btn{min-height:44px}
  .grp-items button{min-height:42px}
  /* La bulle POS ne passe pas par-dessus le tiroir ouvert */
  body:has(.side.open) .bulle-pos{opacity:0;pointer-events:none}
}

/* ---------- bulle POS (téléphone) : un peu plus compacte, loin de la barre d'accueil iPhone ---------- */
@media (max-width:860px){
  .bulle-pos{right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:11px 18px 11px 14px;min-height:48px}
  .content{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

/* ---------- contenu (téléphone) ---------- */
@media (max-width:640px){
  .content{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));padding-top:12px;gap:var(--esp-3)}
  /* Boutons et champs faciles à toucher ; 16 px dans les champs pour que l'iPhone ne zoome pas */
  .btn{min-height:40px}
  .btn.sm{min-height:36px}
  .field input,.field select,.field textarea,.inp{min-height:42px;font-size:16px}
  .seg button{min-height:36px}
  /* En-tête de page : les boutons d'action se partagent la ligne au lieu de s'empiler */
  .head>.row{width:100%}
  .head>.row>.btn{flex:1 1 auto;justify-content:center}
  .head>.row>.seg{flex:1 1 100%}
  /* Filtres : la recherche sur toute la largeur, les menus deux par ligne */
  .filtres input[type=search]{flex:1 1 100%;min-width:0}
  .filtres>.seg{flex:1 1 100%}
  .filtres .check{min-height:36px}
  .kpi{padding:12px}
  .panel{padding:12px}
}

/* ---------- sous-pages (téléphone) : Retour et titre sur la même ligne ---------- */
@media (max-width:700px){
  .modal.souspage .sheet-h{flex-wrap:nowrap;gap:8px;padding-top:8px;padding-bottom:8px}
  .modal.souspage .sheet-h h2{flex:1 1 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .modal.souspage .sp-retour{min-height:40px}
  .modal.souspage .sheet-b{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .modal.souspage .sheet-f{flex-wrap:wrap;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .modal.souspage form .sheet-f{margin:var(--esp-2) calc(-1 * max(12px,env(safe-area-inset-right,0px))) calc(-1 * var(--esp-4)) calc(-1 * max(12px,env(safe-area-inset-left,0px)))!important}
  .modal.souspage .sheet-f .btn{flex:1 1 auto;justify-content:center;min-height:44px}
}

/* ---------- fenêtres de choix (petites boîtes) : posées en bas de l'écran sur téléphone ---------- */
@media (max-width:600px){
  .modal:not(.souspage){align-items:flex-end;padding:0}
  .modal:not(.souspage)>.sheet{width:100%;max-width:none;max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px));border-radius:16px 16px 0 0;margin:0}
  .modal:not(.souspage) .sheet-f{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));flex-wrap:wrap}
  .modal:not(.souspage) .sheet-f .btn{flex:1 1 auto;justify-content:center;min-height:44px}
  .modal:not(.souspage) .x{width:40px;height:40px}
}

/* ---------- pages de la base commune ---------- */
/* Paramètres : les onglets passent à la ligne au lieu de sortir de l'écran */
@media (max-width:640px){
  .par-onglets{flex-wrap:wrap!important;width:100%}
  .par-onglets button{flex:1 1 30%}
  .par-pied .btn{width:100%;justify-content:center}
}
/* Utilisateurs & rôles : le choix Aucun / Voir / Modifier passe sous le nom de la zone */
@media (max-width:480px){
  .perm{grid-template-columns:minmax(0,1fr)}
  .perm .seg{display:flex;width:100%}
  .perm .seg button{flex:1 1 0;min-height:38px}
}
@media (max-width:640px){.us-roles .panel-h{flex-wrap:wrap}.us-roles .panel-h>.seg{width:100%}}
/* Fiche moto : « ← Motos » seul sur la 1re ligne, les actions ensemble sur la 2e */
@media (max-width:600px){
  .barre-fiche{flex-wrap:wrap;gap:8px}
  .barre-fiche .sp{flex-basis:100%;height:0}
  .barre-fiche>.btn.pri{flex:1 1 auto;justify-content:center}
  .barre-fiche .btn.sm{min-height:40px}
}
/* Motos sur Fold ouvert / tablette : plus de largeurs fixes du PC (colonnes moins utiles cachées par « cache-etroit ») */
@media (max-width:860px) and (min-width:761px){.mo-table{table-layout:auto}.mo-table>colgroup{display:none}}
/* Tableau de bord : lignes « À faire » faciles à toucher */
@media (max-width:640px){.tb-af{min-height:44px}}
/* Écran de connexion : la carte ne touche pas les bords, la signature reste sous la carte */
@media (max-width:640px){
  .ecran-entree{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .entree{padding:22px 18px}
}