/*! © 2026 Safety Money SA — Cockpit CashMag. Tous droits réservés. Reproduction, copie et rétro-ingénierie interdites. */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../fonts/source-sans-3-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  
  --fond: #f6f5f1; --carte: #ffffff; --texte: #000000; --discret: #4b5563; --bord: #e2e0d8; --bord-fort: #c7c4b8;
  --accent: #1f4d47; --accent-texte: #ffffff; --accent-doux: #e4efec; --survol: #e4efec; --ok: #1f4d47;
  --erreur: #a3352b; --attention: #c2740c; --bleu: #2451a3; --violet: #6a3fa0;
  
  --barre-fond: #17202b; --barre-texte: #f4f3ef; --barre-discret: #9aa3ab; --barre-accent: #3fae9c; --barre-accent-texte: #0c1210; --barre-violet: #9d84d9;
  --h-barre: 52px; 
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #14171a; --carte: #1d2126; --texte: #eef0f2; --discret: #9aa3ab; --bord: #2b3036; --bord-fort: #3c434b; --accent: #3fae9c; --accent-texte: #0c1210; --accent-doux: #16302c; --survol: #16302c; --ok: #3fae9c;
    --erreur: #e5695f; --attention: #e0973a; --bleu: #6c93e0; --violet: #9d84d9; --barre-fond: #0c0f12; --barre-texte: #eef0f2; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 17px/1.5 "Source Sans 3", system-ui, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }

h1 { font-size: 20px; margin: 0; } h2 { font-size: 17px; margin: 0 0 12px; } h3 { font-size: 15px; margin: 20px 0 8px; } h4 { font-size: 14px; margin: 18px 0 6px; }
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--discret); }
label input, label select { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; }
select { font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; }
textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: 13px/1.4 ui-monospace, Consolas, monospace; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; }
.case { display: flex; align-items: center; gap: 8px; } .case input { width: auto; margin: 0; }
button, a.bouton { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, a.bouton:hover { background: var(--survol); }
button.primaire, a.bouton.primaire { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
button.primaire:hover, a.bouton.primaire:hover { filter: brightness(1.08); background: var(--accent); }
button.sortant, a.bouton.sortant { background: var(--attention); color: #fff; border-color: var(--attention); }          
button.sortant:hover, a.bouton.sortant:hover { background: var(--attention); filter: brightness(1.08); }
button.creer, a.bouton.creer { background: var(--bleu); color: #fff; border-color: var(--bleu); }                        
button.creer:hover, a.bouton.creer:hover { background: var(--bleu); filter: brightness(1.08); }
button.danger, a.bouton.danger { background: var(--erreur); color: #fff; border-color: var(--erreur); }                  
button.danger:hover, a.bouton.danger:hover { background: var(--erreur); filter: brightness(1.08); }
button:disabled { opacity: .55; cursor: default; }
button.icone { padding: 6px 10px; line-height: 1; }
progress { width: 100%; height: 10px; margin-top: 12px; }
pre { white-space: pre-wrap; word-break: break-all; max-height: 420px; overflow: auto; }
.discret { color: var(--discret); font-size: 13px; } .petit { font-size: 12px; }
.erreur { color: var(--erreur); min-height: 1.2em; margin: 8px 0 0; }
.ligne { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .ligne label { margin: 0; }
.journal { white-space: pre-line; color: var(--discret); font-size: 13px; margin: 10px 0 0; }
.encadre { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--bord); border-left: 4px solid var(--accent); border-radius: 8px; }
.etiquette { display: inline-block; margin: 0 0 8px; padding: 1px 10px; border: 1px solid var(--bord); border-radius: 10px; font-size: 12px; color: var(--discret); }
.def dt { margin-top: 12px; font-size: 12px; color: var(--discret); } .def dd { margin: 2px 0 0; }
.alerte { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--erreur); border-radius: 6px; color: var(--erreur); font-size: 13px; }
.note { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent); font-size: 12px; color: var(--discret); }

.centre { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.centre .carte { max-width: 380px; }
.centre h1 { margin-bottom: 16px; }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 20px; margin: 16px 0; max-width: 720px; width: 100%; }
.carte.large { max-width: 1100px; }

.app { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.menu { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--barre-fond); color: var(--barre-texte); border-right: 1px solid var(--barre-fond); }
.menu-tete { padding: 16px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.menu-marque { display: flex; align-items: center; gap: 10px; }
.menu-marque .logo { width: 40px; height: 40px; flex: none; border-radius: 10px; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.05; }
.marque-texte strong { font-size: 24px; font-weight: 700; letter-spacing: .01em; }
.marque-texte span { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--barre-accent); }
.marque-connexion { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; text-align: center; }
.marque-connexion .logo { width: 64px; height: 64px; border-radius: 14px; }
.marque-connexion h1 { margin: 0; font-size: 26px; font-weight: 600; }
.marque-connexion h1 strong { font-weight: 700; }
#menu-nav { flex: 1; padding: 8px 8px 12px; }
.menu-bloc + .menu-bloc { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); }
.menu-groupe { padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--barre-discret); }
.menu-item { display: block; padding: 7px 12px; border-radius: 6px; color: var(--barre-texte); text-decoration: none; font-size: 14px; }
.menu-item:hover { background: rgba(255, 255, 255, .08); }
.menu-item.actif { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--barre-accent); }
.menu-item.prevu { color: var(--barre-discret); }
.menu-item.actif.prevu { color: #fff; }
.menu-item.externe { color: var(--barre-accent); }                       
.menu-item.externe.guide { color: var(--barre-violet); }                  
.menu-item.externe::after { content: " \2197"; opacity: .75; }
.menu .badge, .badge { margin-left: 8px; padding: 0 6px; border: 1px solid var(--bord); border-radius: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
.menu .badge { border-color: rgba(255, 255, 255, .3); }
.menu-item.actif .badge { border-color: currentColor; }
.menu-pied { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 8px; }
.menu .discret { color: var(--barre-discret); }
.menu-pied button { background: transparent; color: var(--barre-texte); border-color: rgba(255, 255, 255, .3); }
.menu-pied button:hover { background: rgba(255, 255, 255, .1); }
.menu-pied button.primaire { background: var(--barre-accent); color: var(--barre-accent-texte); border-color: var(--barre-accent); font-weight: 700; }
.menu-pied button.primaire:hover { background: var(--barre-accent); filter: brightness(1.08); }
.menu-pied button.primaire { width: 100%; }
.ligne-pied { display: flex; gap: 8px; }
#id-compte { word-break: break-all; }
.contenu { min-width: 0; }
.barre-page { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; height: var(--h-barre); padding: 0 20px; background: var(--carte); border-bottom: 1px solid var(--bord); }
#btn-menu { display: none; }
#pages { padding: 4px 20px 40px; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; z-index: 20; top: 0; left: 0; width: 290px; max-width: 86vw; transform: translateX(-100%); transition: transform .18s; }
  .menu.ouvert { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  #btn-menu { display: inline-block; }
  #pages { padding: 4px 12px 32px; }
}

.haut-page { position: sticky; top: var(--h-barre); z-index: 4; margin: 0 -20px 12px; padding: 8px 20px 0; background: var(--fond); }
.haut-page .onglets { margin: 0; }
.haut-page .barre-outils + .onglets { margin: 8px 0 0; }   
.haut-page .onglets + .barre-outils { margin: 10px 0 4px; } 
.barre-outils { position: relative; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 8px 12px; }
.outils-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.barre-outils .outils-ligne label { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.barre-outils .outils-ligne label input, .barre-outils .outils-ligne label select { display: inline-block; width: auto; margin: 0; padding: 5px 8px; }
.barre-outils .outils-ligne > select { padding: 6px 8px; }
.barre-outils button { padding: 6px 12px; }
.groupe-filtres { display: inline-flex; gap: 4px; }
.champ-barre { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--discret); white-space: nowrap; }
.champ-barre .multi { min-width: 170px; }
.champ-barre .multi-btn { padding: 5px 8px; }
.pastille { margin-left: 6px; padding: 0 7px; border-radius: 9px; background: var(--accent); color: var(--accent-texte); font-size: 12px; }
button.actif { border-color: var(--accent); }
.panneau-filtres { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; max-height: 70vh; overflow-y: auto; padding: 14px; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.grille-filtres { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.barre-outils .panneau-filtres label { display: block; margin: 0; white-space: normal; }
.jours-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 12px; }
.barre-outils .jours-filtre label { display: inline-flex; margin: 0; }
@media (max-width: 860px) {
  .haut-page { position: static; margin: 0 0 12px; padding: 8px 0 0; } 
}

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 12px 0; }
.kpi { border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; }
.kpi-titre { font-size: 12px; color: var(--discret); } .kpi-valeur { font-size: 20px; font-weight: 600; } .kpi-ecart { margin-top: 4px; font-size: 13px; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.tab th, .tab td { padding: 5px 8px; border-bottom: 1px solid var(--bord); text-align: left; }
.tab thead th { color: var(--discret); font-weight: 500; font-size: 12px; }
.tab th:not(:first-child), .tab td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tab tr.tot td { font-weight: 600; } .tab tr.sous td:first-child { padding-left: 24px; color: var(--discret); }

.onglets { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 16px; border-bottom: 1px solid var(--bord); }
.onglet { padding: 9px 14px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--discret); text-decoration: none; font-size: 14px; }
.onglet:hover { background: var(--survol); }
.onglet.actif { background: var(--carte); border-color: var(--bord); color: var(--texte); font-weight: 600; }
.onglets:empty { display: none; }

.hausse { color: var(--ok); } .baisse { color: var(--erreur); }
progress.mini { width: 72px; height: 8px; margin: 0; vertical-align: middle; }
.tab td.barre { width: 84px; padding-right: 0; }
.tab tr.faible td { color: var(--discret); }
.tab td.num { white-space: nowrap; }                        
.tab td .discret { white-space: nowrap; }
.tab td.ref { max-width: 260px; overflow-wrap: anywhere; }  
.carte.large { overflow-x: auto; }                          

.tab tr.neutre td { font-style: italic; color: var(--discret); } 
.tab tr.tot.neutre td { font-weight: 400; }                      
.alerte-mini { color: var(--erreur); cursor: help; }
.tab details summary { cursor: pointer; color: var(--accent); }
ul.liste { margin: 6px 0 2px; padding-left: 18px; font-size: 12px; text-align: left; font-variant-numeric: tabular-nums; }
.tab td details { white-space: nowrap; }

.champ-filtre { font-size: 13px; color: var(--discret); min-width: 0; }
.champ-titre { display: block; margin-bottom: 4px; }
.multi { position: relative; min-width: 0; }
.multi-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; cursor: pointer; user-select: none; min-width: 0; }
.multi-btn:hover { background: var(--survol); }
.multi-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.multi-btn.actif { border-color: var(--accent); }
.multi-libelle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-fleche { flex: none; font-size: 11px; color: var(--discret); }
.multi-panel { position: fixed; z-index: 40; max-height: 50vh; overflow-y: auto; padding: 6px 10px; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.barre-outils .multi-panel .multi-option { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; font-size: 13px; color: var(--texte); white-space: nowrap; cursor: pointer; }
.multi-option input { display: inline-block; width: auto; margin: 0; padding: 0; }
.barre-outils .multi-panel .multi-tous { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--bord); }
.barre-outils .multi-panel .multi-resultats { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--bord); font-weight: 600; color: var(--accent); }
.multi-compte { margin-left: auto; padding-left: 14px; opacity: .6; font-variant-numeric: tabular-nums; }
.multi-recherche { display: block; width: 100%; margin: 0 0 6px; padding: 6px 8px; font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; }
.multi-aucun { padding: 4px 0; }

.tab input.cad-exp { width: auto; padding: 3px 6px; font: inherit; font-size: 12px; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 5px; }
#cad-retour:empty { display: none; }
.erreur-texte { color: var(--erreur); font-size: 13px; }
.barre-outils .export-choix { min-width: 120px; }
.barre-outils .export-choix + span:empty { display: none; }
.barre-outils .export-choix + span { font-size: 12px; max-width: 360px; }

.graph { display: block; width: 100%; height: auto; margin: 4px 0 8px; }
.graph-barre { fill: var(--accent); opacity: .72; }
.graph-barre:hover, .graph-barre.dernier { opacity: 1; }
.graph-vide { fill: var(--bord); }
.graph-axe { stroke: var(--bord); stroke-width: 1; }
.graph-texte { fill: var(--discret); font-size: 10px; }
.liste-barres { list-style: none; margin: 0; padding: 0; }
.liste-barres li { display: grid; grid-template-columns: minmax(110px, 1.2fr) 3fr minmax(150px, auto); gap: 12px; align-items: center; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--bord); }
.liste-barres li:last-child { border-bottom: 0; }
.liste-barres progress.mini { width: 100%; height: 10px; margin: 0; }
.liste-barres .num { text-align: right; white-space: nowrap; }

.tab th.triable { cursor: pointer; user-select: none; }
.tab th.triable:hover, .tab th[aria-sort] { color: var(--texte); }
.tab th.triable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab-fleche { display: inline-block; min-width: 11px; margin-left: 3px; font-size: 9px; color: var(--accent); text-align: center; }
.tab th[aria-sort="ascending"] .tab-fleche::after { content: "▲"; }
.tab th[aria-sort="descending"] .tab-fleche::after { content: "▼"; }
.tab th.triable:not([aria-sort]):hover .tab-fleche::after { content: "↕"; color: var(--discret); font-size: 11px; }
.tab thead th .tab-filtre-bouton { display: inline-block; margin: 0 0 0 1px; padding: 0 3px; font-size: 11px; line-height: 1.5; color: var(--discret); background: none; border: 0; border-radius: 4px; opacity: .55; }
.tab thead th .tab-filtre-bouton:hover, .tab thead th .tab-filtre-bouton:focus-visible { opacity: 1; background: var(--survol); }
.tab thead th .tab-filtre-bouton.actif { opacity: 1; color: var(--accent-texte); background: var(--accent); }
.tableau-etat { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; padding: 5px 10px; font-size: 12px; color: var(--discret); background: var(--survol); border-radius: 6px; }
.tableau-etat button { padding: 2px 10px; font-size: 12px; }
.tab-filtre-panneau { position: fixed; z-index: 80; width: 280px; max-width: calc(100vw - 16px); padding: 10px 12px; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-size: 13px; text-align: left; }
.tab-filtre-panneau .tf-titre { margin-bottom: 8px; font-weight: 600; }
.tab-filtre-panneau label { display: block; margin: 0 0 8px; }
.tab-filtre-panneau .tf-libelle { display: block; margin-bottom: 2px; font-size: 12px; color: var(--discret); }
.tab-filtre-panneau .tf-champ input { display: block; width: 100%; margin: 0; padding: 6px 8px; font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; }
.tab-filtre-panneau .tf-liste { max-height: min(30vh, 280px); overflow-y: auto; margin: 4px 0 8px; padding-top: 4px; border-top: 1px solid var(--bord); }
.tab-filtre-panneau .tf-option { display: flex; align-items: center; gap: 8px; margin: 0; padding: 3px 0; color: var(--texte); cursor: pointer; }
.tab-filtre-panneau .tf-option input { display: inline-block; width: auto; margin: 0; padding: 0; }
.tab-filtre-panneau .tf-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-filtre-panneau .tf-n { margin-left: auto; padding-left: 10px; opacity: .6; font-variant-numeric: tabular-nums; }
.tab-filtre-panneau .tf-tout { padding-bottom: 5px; border-bottom: 1px solid var(--bord); }
.tab-filtre-panneau .tf-actions { display: flex; justify-content: flex-end; }
.tab-filtre-panneau .tf-actions button { padding: 4px 10px; font-size: 12px; }

.tab th.sel, .tab td.sel { width: 1%; white-space: nowrap; text-align: left; user-select: none; } 
.tab thead th.sel + th { text-align: left; }   
.tab th.sel input, .tab td.sel input { display: inline-block; width: auto; margin: 0 6px 0 0; vertical-align: middle; cursor: pointer; }
.tab td.sel button.cad-ref-edit { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 24px; height: 24px; margin: 0; padding: 0; color: var(--discret); background: transparent; border: 1px solid var(--bord); border-radius: 4px; }
.tab td.sel button.cad-ref-edit:hover, .tab td.sel button.cad-ref-edit:focus-visible { color: var(--accent); background: var(--survol); border-color: var(--accent); }
.tab td.sel button.cad-ref-edit svg { display: block; width: 14px; height: 14px; }
.tab tr.selectionnee td { background: var(--survol); }
.tab td.ref input.cad-ref-input { display: block; width: 100%; min-width: 8em; padding: 4px 8px; font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--accent); border-radius: 5px; }
.barre-outils .groupe-selection { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-left: auto; }
.barre-outils #cad-retour { margin: 8px 0 0; }
.barre-outils .alerte { margin: 8px 0 0; }

@media (min-width: 861px) {
  #pages:has(> .page > .onglet-panneau.pleine-hauteur:not([hidden])) { padding-bottom: 12px; }
  .page:has(> .onglet-panneau.pleine-hauteur:not([hidden])) { display: flex; flex-direction: column; height: calc(100vh - var(--h-barre) - 16px); } 
  .page:has(> .onglet-panneau.pleine-hauteur:not([hidden])) > .haut-page { flex: none; }
  .onglet-panneau.pleine-hauteur { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; }
  .onglet-panneau.pleine-hauteur > .carte.large { flex: 1 1 0; min-height: 200px; margin: 0; padding-top: 0; overflow: auto; } 
  .onglet-panneau.pleine-hauteur .tab { border-collapse: separate; border-spacing: 0; }                                  
  .onglet-panneau.pleine-hauteur .tab thead th { position: sticky; top: 0; z-index: 2; background: var(--carte); }
}

.dialogue-voile { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(12, 17, 24, .55); }
.dialogue { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--carte); color: var(--texte); border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.dialogue.large { max-width: 760px; }
.dialogue.large.tres-large { max-width: 1180px; height: min(880px, calc(100vh - 32px)); } 
.dialogue-titre { margin: 0; padding: 16px 20px 8px; font-size: 16px; }
.dialogue-corps { padding: 4px 20px 12px; overflow-y: auto; }
.dialogue-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--bord); }
.dialogue-formulaire .ligne { margin-bottom: 12px; }
.dialogue-formulaire .ligne label.dialogue-large { flex: 1 1 220px; }
.dialogue-formulaire .ligne label.dialogue-court { flex: 0 0 110px; }
.dialogue-groupe { margin-bottom: 12px; }
.dialogue-etiquette { display: block; margin-bottom: 4px; font-size: 13px; color: var(--discret); }
.dialogue-choix { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dialogue-choix label { margin: 0; color: var(--texte); }
.dialogue-apercu { min-height: 1.4em; margin: 8px 0 0; padding: 8px 10px; background: var(--survol); border-radius: 6px; font-size: 13px; overflow-wrap: anywhere; }
.dialogue-liste { max-height: 40vh; overflow: auto; margin-top: 8px; border: 1px solid var(--bord); border-radius: 6px; }
.dialogue-liste table.tab { margin: 0; border-collapse: separate; border-spacing: 0; }
.dialogue-liste table.tab th { text-align: left; }
.dialogue-liste table.tab thead th { position: sticky; top: 0; z-index: 1; background: var(--carte); }

button.lien { padding: 0; font: inherit; font-size: 12px; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline; }
button.lien:hover, button.lien:focus-visible { filter: brightness(1.15); background: none; }
.barre-outils #cai-retour { margin: 8px 0 0; }
.barre-outils p[role="status"]:empty { display: none; }
.dialogue-corps .tab { margin-bottom: 12px; }
.dialogue-corps h4 { margin: 14px 0 6px; }

.barre-outils .outils-ligne .tk-recherche { flex: 1 1 280px; min-width: 200px; max-width: 520px; padding: 6px 10px; font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; }
.barre-outils #tk-retour { margin: 8px 0 0; }
.panneau-filtres .grille-filtres label input[type="text"], .panneau-filtres .grille-filtres label input[type="time"] { width: 100%; margin-top: 4px; padding: 6px 8px; }
#onglet-documents-tickets > .carte.large { max-width: none; }      
.tab.tk-table th, .tab.tk-table td { padding: 5px 5px; text-align: left; vertical-align: top; } 
.tk-table thead th { white-space: normal; vertical-align: bottom; }
.tab.tk-table th.num, .tab.tk-table td.num { text-align: right; }
.tk-table td.tk-date, .tk-table td.tk-ref, .tk-table td.tk-service, .tk-table td.num { white-space: nowrap; }
.tk-table td .discret { white-space: normal; }                     
.tk-table td.tk-date .discret, .tk-table td.tk-reglement .discret { white-space: nowrap; }
.tk-table td.tk-articles { min-width: 150px; }
.tk-table td.tk-tbl { white-space: nowrap; }
.tk-table td.tk-service .discret { display: block; white-space: nowrap; }       
.tk-table td.tk-ref .tk-liaison { margin-top: 2px; font-size: 11px; white-space: nowrap; }
.tk-table td.tk-ref .tk-liaison button.lien { font-size: 11px; }
.tk-table td.tk-reglement { min-width: 96px; }
.tk-table tr.tk-ligne { cursor: pointer; }
.tk-table tr.tk-ligne:hover td, .tk-table tr.tk-ligne:focus-visible td { background: var(--survol); }
.tk-table tr.tk-ligne:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tk-table tr.tk-annule td, .tk-table tr.tk-annulation td { color: var(--discret); }
.tk-table tr.tk-annule .tk-total, .tk-table tr.tk-annulation .tk-total { font-style: italic; }
.tk-table mark { padding: 0 1px; color: inherit; background: rgba(255, 196, 0, .38); border-radius: 2px; }
.tk-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--bord); border-radius: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--discret); white-space: nowrap; }
.tk-ref .tk-badge { display: block; width: fit-content; margin: 2px 0 0; }   
.tk-suite { margin: 10px 4px; }
.tk-suite button { margin-left: 8px; padding: 4px 10px; font-size: 12px; }
.tk-vide { margin: 24px 4px; color: var(--discret); }
.tk-repartition { margin: 10px 0 6px; }
.tk-repartition summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.tk-repartition table.tab { width: auto; min-width: 360px; margin-top: 6px; }
.tk-detail .tk-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin: 8px 0 4px; }
.tk-detail .tk-meta dt { font-size: 12px; color: var(--discret); }
.tk-detail .tk-meta dd { margin: 0; overflow-wrap: anywhere; }
.tk-detail .tab th, .tk-detail .tab td { vertical-align: top; }
.tk-detail .tab th, .tk-detail .tab td { text-align: left; }
.tk-detail .tab th.num, .tk-detail .tab td.num { text-align: right; }
.tk-detail .tk-lignes th:first-child, .tk-detail .tk-lignes td:first-child { width: 56px; }
.tk-detail .tk-sous { padding-left: 24px; color: var(--discret); }
.tk-detail .tk-totaux { display: flex; justify-content: flex-end; gap: 12px; margin: 6px 8px 0; }
.tk-detail .tk-totaux span { color: var(--discret); }
.tk-detail .tk-meta button.lien { font-size: inherit; text-align: left; }
@media (max-width: 860px) {
  .tk-table td.tk-articles { min-width: 160px; }
}

.tab input.cad-exp.modifie { border-color: var(--attention); box-shadow: 0 0 0 2px color-mix(in srgb, var(--attention) 30%, transparent); } 

.tab thead th.cma-ecrit, .onglet-panneau.pleine-hauteur .tab thead th.cma-ecrit { background: color-mix(in srgb, var(--attention) 22%, var(--carte)); color: var(--texte); }

td.ref button.cad-fiche { font-size: inherit; font-weight: inherit; text-align: left; overflow-wrap: anywhere; }
.cad-fiche .cad-meta, .cpt-fiche .cad-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 8px 0 4px; }
.cad-fiche .cad-meta dt, .cpt-fiche .cad-meta dt { font-size: 12px; color: var(--discret); }
.cad-fiche .cad-meta dd, .cpt-fiche .cad-meta dd { margin: 0; overflow-wrap: anywhere; }
.cad-fiche h4, .cpt-fiche h4 { margin: 16px 0 6px; }

.cpt-table td.cpt-client { white-space: normal; }
.cpt-table td.cpt-client .badge { margin-left: 6px; }
.cpt-table td.cpt-client button.lien { font-size: inherit; font-weight: 600; text-align: left; }
.cpt-fiche .tab th, .cpt-fiche .tab td { text-align: left; vertical-align: top; }
.cpt-fiche .tab th.num, .cpt-fiche .tab td.num { text-align: right; }
.cpt-fiche .tab th, .cpt-fiche .tab td.piece, .cpt-fiche .tab td.num { white-space: nowrap; } 

.cpt-controles { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 10px 0 6px; }
.cpt-controles label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 12px; color: var(--discret); }
.cpt-onglets { display: flex; flex-wrap: wrap; gap: 2px; margin: 10px 0 4px; border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 2; background: var(--carte); }
.cpt-onglets button { padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--discret); font-weight: 600; cursor: pointer; }
.cpt-onglets button:hover { color: var(--texte); background: var(--survol); }
.cpt-onglets button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.cpt-contenu { padding-top: 6px; }
.cpt-fiche .cpt-palmares td:first-child { white-space: normal; min-width: 180px; }
.cpt-fiche td.cpt-produits { white-space: normal; max-width: 320px; }
button.cpt-ticket { font-size: inherit; }
.cpt-fiche tr[data-ticket] { cursor: pointer; }
.cpt-fiche tr[data-ticket]:hover { background: var(--survol); }
td.incertain { color: var(--discret); font-style: italic; }
.cpt-regle { border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.cpt-regle p { margin: 4px 0 0; }
.cpt-regle-barre { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cpt-regle-barre progress { width: 240px; max-width: 50%; height: 14px; accent-color: var(--accent); }
.cad-histo { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--bord); }
.cad-histo li { position: relative; margin: 0 0 8px; padding: 0 0 0 14px; overflow-wrap: anywhere; }
.cad-histo li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cad-histo .cad-quand { display: inline-block; min-width: 128px; margin-right: 6px; color: var(--discret); font-size: 12px; }

.fc-formulaire { display: grid; gap: 14px; margin-top: 12px; }
.fc-rubrique { min-width: 0; margin: 0; padding: 10px 14px 2px; border: 1px solid var(--bord); border-radius: 8px; }
.fc-rubrique legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--discret); text-transform: uppercase; letter-spacing: .04em; }
.fc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 16px; }
.fc-champ { min-width: 0; margin-bottom: 10px; padding-left: 8px; border-left: 3px solid transparent; }
.fc-champ.fc-large { grid-column: 1 / -1; }
.fc-champ > label { margin: 0 0 3px; }
.fc-champ input[type="text"], .fc-champ input[type="email"], .fc-champ input[type="tel"], .fc-champ input[type="date"], .fc-champ select, .fc-champ textarea { display: block; width: 100%; margin: 0; padding: 7px 9px; font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: 6px; }
.fc-champ textarea { min-height: 4.5em; resize: vertical; }
.fc-champ input:focus, .fc-champ select:focus, .fc-champ textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.fc-champ.fc-modifie { border-left-color: var(--attention); }   
.fc-champ.fc-modifie input[type="text"], .fc-champ.fc-modifie input[type="email"], .fc-champ.fc-modifie input[type="tel"], .fc-champ.fc-modifie input[type="date"], .fc-champ.fc-modifie select, .fc-champ.fc-modifie textarea { border-color: var(--attention); }
.fc-marque { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 4px; }
.fc-marque > label { margin: 0; color: var(--texte); }
.fc-pastille { color: var(--attention); font-size: 11px; vertical-align: middle; }
.fc-message { margin: 10px 0; }
.cpt-passerelle { margin: 4px 0 10px; }
.cpt-passerelle button { padding: 5px 12px; font-size: 13px; }

.ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.barre-page .actions-page { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.actions-page > span, .actions-page > span > span { display: inline-flex; align-items: center; gap: 8px; }
.actions-page button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; white-space: nowrap; }
.actions-page button:disabled { opacity: .45; cursor: default; }
.actions-page .nb { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-doux); color: var(--texte); font-size: 12px; line-height: 18px; text-align: center; }
.actions-page .nb:empty { display: none; }
.actions-page button.danger .nb, .actions-page button.primaire .nb, .actions-page button.sortant .nb { background: rgba(255, 255, 255, .28); color: inherit; }
@media (max-width: 860px) { .actions-page .lib { display: none; } }
.alerte .ico, .note .ico, .discret .ico { margin-right: 4px; }

.outils-groupe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-left: 12px; border-left: 1px solid var(--bord); }
.outils-fin { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-left: auto; }

.tab td.sel button.crayon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 24px; height: 24px; margin: 0 0 0 2px; padding: 0; color: var(--discret); background: transparent; border: 1px solid var(--bord); border-radius: 4px; }
.tab td.sel button.crayon:hover, .tab td.sel button.crayon:focus-visible { color: var(--attention); background: var(--survol); border-color: var(--attention); }
.tab td.sel button.crayon.crayon-danger:hover, .tab td.sel button.crayon.crayon-danger:focus-visible { color: var(--erreur); border-color: var(--erreur); }
.tab td.sel button.crayon svg { display: block; width: 14px; height: 14px; }

.c-archive, .tab tr.archive .cpt-client .lien, .tab tr.archive td.cat-produit strong, .tab tr.archive td:first-child strong { color: var(--attention); font-weight: 600; }
.c-supprime, .tab tr.supprime .cpt-client .lien, .tab tr.bloque td.cat-produit strong { color: var(--erreur); font-weight: 600; }
.kpi-valeur button.lien { font-size: inherit; font-weight: inherit; }
td.num progress.mini { display: block; width: 100%; min-width: 90px; margin-top: 4px; }
.tab td.num .petit { white-space: nowrap; }
.multi-option { user-select: none; }

.actions-page .export-choix { min-width: 120px; padding: 6px 8px; }
.actions-page .export-choix + span { position: absolute; top: calc(100% + 6px); right: 20px; z-index: 6; max-width: min(460px, 92vw); padding: 6px 10px; border: 1px solid var(--bord); border-radius: 6px; background: var(--carte); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); font-size: 12px; color: var(--texte); }
.actions-page .export-choix + span:empty { display: none; }

.onglet-panneau.pleine-hauteur > .carte.large { max-width: none; }

.etat { font-weight: 600; }
.etat-actif { color: var(--ok); }
.etat-desactive { color: var(--erreur); }
.etat-expire, .etat-bientot { color: var(--attention); }
.etat-aucun { color: var(--discret); font-weight: 400; }
.adm-resume { margin: 0 0 8px; }
.adm-entete { margin: 0 0 4px; }
.adm-date { white-space: nowrap; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.adm-acces-deux { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.adm-etapes { list-style: none; margin: 0 0 12px; padding: 0; }
.adm-etapes li { padding: 4px 0; }
.adm-etape-ok { color: var(--ok); }
.adm-etape-erreur { color: var(--erreur); }
.adm-etape-cours { color: var(--attention); }

.bandeau-compte { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 3px 6px 3px 12px; border-radius: 16px; background: var(--attention); color: #fff; font-size: 13px; white-space: nowrap; }
.bandeau-compte button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 12px; background: rgba(255, 255, 255, .18); color: #fff; }
.bandeau-compte button:hover { background: rgba(255, 255, 255, .3); }
@media (max-width: 860px) { .bandeau-compte .lib { display: none; } }