/* Polices Baloo 2 et Inter : déclarées dans l'en-tête de chaque page HTML (chargement plus rapide
   qu'un @import ici). Toute nouvelle page doit reprendre ces trois lignes <link>. */
:root{
  --bg:#FBF2DE;
  --surface:#FFFFFF;
  --ink:#17332A;
  --ink-soft:#5F6F63;
  --border:#ECDCB4;
  --primary:#1B5E42;
  --primary-dark:#123E2C;
  --primary-soft:#E3EFE6;
  --accent:#EFA326;
  --accent-dark:#C97D1A;
  --accent-soft:#FDECC7;
  --success:#2F6B4F;
  --success-soft:#E7F1EA;
  --warn:#B4791E;
  --warn-soft:#FBEFDA;
  --danger:#B23B2C;
  --danger-soft:#F7E5E0;
  --radius:13px;
  --font-affiche:'Baloo 2', 'Fredoka', sans-serif;
  --font-corps:'Inter', -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:var(--font-corps);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
}

a{color:inherit;}

h1,h2,h3{font-family:var(--font-affiche);font-weight:700;letter-spacing:.01em;}

/* minmax(0,1fr) : la zone de contenu suit TOUJOURS la largeur de l'écran ; un tableau trop large défile dans son cadre
   au lieu d'élargir toute la page (barre de défilement horizontale) */
.layout{display:grid;grid-template-columns:222px minmax(0,1fr);min-height:100vh;}
.main{min-width:0;}

.sidebar{
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:#EAF3EC;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.brand{font-family:var(--font-affiche);font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px;}
.brand .badge-icon{
  width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;
}
.brand .brand-logo{height:92px;max-width:170px;object-fit:contain;}

.sidebar nav{display:flex;flex-direction:column;gap:4px;}
.sidebar nav a, .sidebar nav button.navlink{
  padding:9px 12px;border-radius:9px;text-decoration:none;color:#D9E9DF;
  font-size:14px;background:none;border:none;text-align:left;cursor:pointer;font-family:inherit;
  transition:background .15s, color .15s;
}
.sidebar nav a.active, .sidebar nav button.navlink.active{
  background:var(--accent);color:var(--primary-dark);font-weight:600;
}
.sidebar nav a:hover, .sidebar nav button.navlink:hover{
  background:rgba(239,163,38,.18);color:#fff;
}

.main{padding:28px 34px;max-width:none;} /* toute la largeur : zoom réduit ou grand écran, les tableaux ne sont plus coupés */
.onglet{display:none;}
.onglet.actif{display:block;}

.page-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
/* Place réservée à la cloche (en haut à droite) : les boutons de l'en-tête ne passent plus dessous */
@media (min-width: 761px){ .layout > .main{padding-top:56px;} } /* nom + cloche fixés en haut à droite : l'en-tête (Excel/CSV…) commence en dessous, à tous les zooms */
.page-header h1{font-size:23px;margin:0;font-weight:700;color:var(--primary-dark);}
.page-header p{margin:3px 0 0;color:var(--ink-soft);font-size:13.5px;}
/* Même présentation que Ventes et Clôture des caisses, sur toutes les pages : en haut le titre (et Excel/CSV
   à droite), en dessous la rangée de filtres et de boutons, alignée à gauche. Plus de champs « flottants » au
   milieu de l'en-tête quand on dézoome (67 %, 90 %) ou sur grand écran. */
.main .page-header{align-items:flex-start;}
.main .page-header > :first-child{flex:1 1 auto;}
.main .page-header > .zone-export{order:2;}
.main .page-header:has(> :nth-child(2):not(.zone-export))::after{content:"";order:2;flex:1 1 100%;height:0;} /* passage à la ligne : les commandes vont sous le titre */
.main .page-header > :not(:first-child):not(.zone-export){order:3;flex:0 0 auto;margin-top:0 !important;margin-left:0 !important;}
.main .page-header > div:not(:first-child):not(.zone-export):not(.field){flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;justify-content:flex-start;}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 1px 2px rgba(23,51,42,.04);overflow-x:auto;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px;}
.grid-3 > *{min-width:0;}

/* ---- Regroupement de cartes de paramètres par thème (ex : Paramètres Caisse) ---- */
.parametres-groupe{margin-top:26px;}
.parametres-groupe:first-of-type{margin-top:22px;}
.parametres-groupe-titre{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700;margin:0 0 10px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.grid-2 > *{min-width:0;}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;}
}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.stat .n{font-family:var(--font-affiche);font-size:27px;font-weight:700;color:var(--primary-dark);}
.stat .l{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.stat.presents{border-left:4px solid var(--success);}
.stat.retards{border-left:4px solid var(--warn);}
.stat.absents{border-left:4px solid var(--danger);}

table{width:100%;border-collapse:collapse;font-size:14px;}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid var(--border);}
td{padding:9px 10px;border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--accent-soft);}

.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;}
.pill.entree{background:var(--success-soft);color:var(--success);}
.pill.sortie{background:var(--primary-soft);color:var(--primary);}
.pill.retard{background:var(--warn-soft);color:var(--warn);}
.pill.borne_code{background:#EFEFEF;color:#555;}
.pill.manuel{background:#EFEFEF;color:#555;}

form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px;}
label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:4px;}
input,select{border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:14px;background:#fff;color:var(--ink);font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}

.btn{display:inline-block;padding:9px 18px;border-radius:9px;background:var(--accent);color:var(--primary-dark);border:none;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:background .15s, transform .1s;}
.btn:hover{background:var(--accent-dark);}
.btn:active{transform:translateY(1px);}
.btn.secondary{background:#fff;color:var(--primary);border:1.5px solid var(--primary);}
.btn.secondary:hover{background:var(--primary-soft);}
.btn.danger{background:var(--danger);color:#fff;}
.btn.danger:hover{background:#94301F;}
.btn:disabled{opacity:.55;cursor:not-allowed;}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.flash{padding:10px 14px;border-radius:9px;margin-bottom:16px;font-size:14px;}
.flash.succes{background:var(--success-soft);color:var(--success);}
.flash.erreur{background:var(--danger-soft);color:var(--danger);}
.empty{color:var(--ink-soft);font-size:14px;padding:14px 0;}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.field{margin-bottom:14px;}
.checkbox-row{display:flex;align-items:center;gap:8px;}
.checkbox-row input{width:auto;}

.modale-fond{display:none;position:fixed;inset:0;background:rgba(18,30,25,.5);align-items:center;justify-content:center;z-index:50;}
/* Ces fenêtres (choix des options d'un article) peuvent s'ouvrir PAR-DESSUS
   une autre fenêtre déjà ouverte (ex : la fiche de modification d'une
   commande) — elles doivent donc toujours passer au premier plan. */
#modaleOptions, #modaleOptionsVente{z-index:60;}
.modale-fond.ouverte{display:flex;}
.modale{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:480px;max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(18,30,25,.25);}

/* ---- Écran d'accueil (choix du module) ---- */
.accueil-choix{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:radial-gradient(circle at 50% -10%, var(--accent-soft) 0%, var(--bg) 55%);
}
.accueil-entete{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:6px;}
.accueil-entete h1{font-size:26px;margin:0;color:var(--primary-dark);}
.accueil-logo{height:320px;max-width:840px;object-fit:contain;}
.accueil-sous-titre{color:var(--ink-soft);font-size:14.5px;margin:0 0 30px;}

.accueil-cartes{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;max-width:880px;}
.accueil-carte{
  width:270px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.accueil-carte:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,51,42,.1);}
.accueil-carte-icone{font-size:30px;}
.accueil-carte-titre{font-family:var(--font-affiche);font-size:17px;font-weight:700;color:var(--primary-dark);}
.accueil-carte-desc{font-size:13px;color:var(--ink-soft);line-height:1.4;}

.nav-separateur{border-top:1px solid rgba(255,255,255,.15);margin:10px 0;}

@media (max-width:760px){
  .accueil-cartes{flex-direction:row;}
}

@media (max-width:760px){
  .layout{grid-template-columns:minmax(0,1fr);}
  .sidebar{flex-direction:row;overflow-x:auto;padding:14px;}
  .sidebar nav{flex-direction:row;}
  .grid-3{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .main{padding:14px;}
  .card{padding:14px;}
  table{font-size:13px;}
  th,td{padding:7px 6px;}
}

/* Les tableaux larges défilent horizontalement dans leur propre cadre au lieu
   de casser la mise en page ou de forcer un zoom arrière sur mobile/tablette. */
@media (max-width:760px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
}

/* ---- Export PDF via impression navigateur ---- */
#zoneImpression{display:none;}
.impression-entete{display:flex;align-items:center;gap:14px;margin-bottom:18px;border-bottom:3px solid #EFA326;padding-bottom:14px;}
.impression-entete img{height:48px;max-width:180px;object-fit:contain;}
.impression-entete h1{font-family:var(--font-affiche);font-size:19px;margin:0;color:#17332A;}
.impression-entete p{margin:2px 0 0;color:#555;font-size:13px;}
.impression-recap{display:flex;gap:22px;margin-bottom:16px;font-size:13.5px;}
.impression-recap b{display:block;font-size:18px;}
.impression-table{width:100%;border-collapse:collapse;font-size:13px;}
.impression-table th{text-align:left;padding:6px 8px;border-bottom:2px solid #ccc;font-size:11.5px;text-transform:uppercase;color:#555;}
.impression-table td{padding:6px 8px;border-bottom:1px solid #e2e2e2;}

@media print{
  body > *:not(#zoneImpression){display:none !important;}
  #zoneImpression{display:block !important;}
  @page{margin:16mm;}
}

/* ---- Borne de pointage ---- */
.kiosque-body{margin:0;background:linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;}
.kiosque{width:100%;max-width:380px;padding:28px;text-align:center;}
.kiosque .horloge{color:#D8E6E1;font-size:15px;margin-bottom:6px;letter-spacing:.02em;}
.kiosque .kiosque-logo{max-height:180px;max-width:300px;object-fit:contain;margin:4px auto 14px;display:block;}
.kiosque h1{font-family:var(--font-affiche);color:#fff;font-size:21px;font-weight:700;margin:0 0 22px;line-height:1.4;}
.kiosque h1 .sous-titre{display:block;font-size:14px;font-weight:400;color:#D8E6E1;margin-top:4px;font-family:var(--font-corps);}
.kiosque .ecran-code{background:rgba(255,255,255,.08);border:1px solid rgba(239,163,38,.4);border-radius:14px;color:#fff;font-size:30px;letter-spacing:.35em;padding:16px 10px;min-height:56px;margin-bottom:18px;font-variant-numeric:tabular-nums;}
.kiosque .pave{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px;}
.kiosque .touche{background:rgba(255,255,255,.1);border:none;border-radius:14px;color:#fff;font-size:24px;font-weight:600;padding:18px 0;cursor:pointer;transition:background .12s;}
.kiosque .touche:hover{background:rgba(239,163,38,.25);}
.kiosque .touche:active{background:var(--accent);color:var(--primary-dark);}
.kiosque .touche.effacer{font-size:16px;}
.kiosque .valider{width:100%;background:var(--accent);color:var(--primary-dark);border:none;border-radius:14px;padding:16px;font-size:17px;font-weight:700;cursor:pointer;font-family:var(--font-affiche);}
.kiosque .valider:hover{background:var(--accent-dark);}
.kiosque .valider:disabled{opacity:.6;}
.kiosque .message{margin-top:16px;min-height:24px;color:#fff;font-size:15px;}
.kiosque .message.ok{color:#BEE8CF;}
.kiosque .message.erreur{color:#F3C6B8;}
.kiosque .lien-admin{display:inline-block;margin-top:26px;color:rgba(255,255,255,.45);font-size:12px;text-decoration:none;}

/* =====================================================================
   Affichage adaptatif (PC, tablette, téléphone) — tout le système
   ===================================================================== */
/* Images limitées à la largeur de leur carte / fenêtre uniquement : une règle
   globale écrasait les images dans les blocs qui s'ajustent à leur contenu
   (ex. QR code du portail client). */
.card img, .modale img, .card video, .card iframe{max-width:100%;}
.portail-qr img{max-width:none;flex-shrink:0;}
.modale{max-width:min(480px, calc(100vw - 24px));}
.modale-fond{padding:12px;}

/* Boutons d'action dans les tableaux : ils passent à la ligne au lieu de
   pousser le tableau hors de l'écran. */
td:has(> .btn), td:has(> button){white-space:normal !important;}
td > .btn, td > button.btn{margin:2px 0;white-space:nowrap;}
/* Les mots ne sont coupés qu'en dernier recours : un n° de bon ou une date n'est plus découpé lettre par lettre
   (« anywhere » écrasait les colonnes sur tablette). Un tableau trop large défile dans son cadre. */
td{overflow-wrap:break-word;word-break:normal;}
th{white-space:nowrap;}
div:has(> table:not(.impression-table):not(.recap-table)){overflow-x:auto;-webkit-overflow-scrolling:touch;}
td .pill{white-space:nowrap;}

/* Tablette : cartes et formulaires un peu plus compacts */
@media (max-width:1024px){
  .main{padding:20px;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .stat .n{font-size:23px;}
}

/* Téléphone : chaque ligne de tableau devient une petite carte lisible,
   avec le nom de la colonne devant chaque valeur (tableaux « adaptatifs »,
   activés automatiquement par activerTableauxAdaptatifs()). */
@media (max-width:700px){
  table.adaptatif{display:block;white-space:normal;overflow:visible;border:none;}
  table.adaptatif thead{display:none;}
  table.adaptatif tbody, table.adaptatif tr, table.adaptatif td{display:block;width:100%;}
  table.adaptatif tr{border:1px solid var(--border);border-radius:10px;margin:0 0 10px;padding:6px 12px;background:var(--surface);}
  table.adaptatif tr:hover td{background:transparent;}
  table.adaptatif td{border:none;padding:5px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:right;white-space:normal !important;}
  table.adaptatif td[data-label]::before{content:attr(data-label);flex-shrink:0;max-width:45%;text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
  table.adaptatif td:not([data-label]), table.adaptatif td[data-label=""]{justify-content:flex-start;flex-wrap:wrap;text-align:left;}
  table.adaptatif td[data-label=""]::before{display:none;}
  .field-row{grid-template-columns:1fr;}
  .grid-3, .grid-2{grid-template-columns:1fr;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar > *{width:100%;}
  input, select, textarea{max-width:100%;}
  .btn{padding:9px 14px;}
  .page-header h1{font-size:20px;}
}


/* ---- Bannière et annonces du personnel (espace agent, accueil admin) ---- */
.zone-interne{width:100%;max-width:1920px;margin:0 auto 22px;}
.bi-banniere{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:6 / 1;background:#1a1a1a;margin-bottom:14px;box-shadow:0 2px 10px rgba(23,51,42,.12);}
.bi-couche{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;}
.bi-couche.visible{opacity:1;}
.bi-fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.8);color:#1a1a1a;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.bi-fleche.gauche{left:10px;} .bi-fleche.droite{right:10px;}
.bi-points{position:absolute;left:0;right:0;bottom:8px;z-index:2;display:flex;justify-content:center;gap:6px;}
.bi-points button{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:rgba(255,255,255,.55);cursor:pointer;}
.bi-points button.actif{background:#fff;width:20px;border-radius:4px;}
.bi-annonces{display:flex;flex-direction:column;gap:8px;text-align:left;}
.bi-annonce{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--accent);
  border-radius:10px;padding:10px 14px;}
.bi-annonce.importante{border-left-color:var(--danger);background:var(--danger-soft);}
.bi-annonce-icone{font-size:18px;line-height:1.3;}
.bi-annonce-texte{font-size:14.5px;font-weight:600;color:var(--ink);white-space:pre-line;}
.bi-annonce-meta{font-size:12px;color:var(--ink-soft);margin-top:2px;}
/* Bannière du personnel volontairement plus fine que celle du portail client :
   ordinateur 6:1, tablette 4:1, téléphone 2:1. */
@media (min-width:601px) and (max-width:1024px){ .bi-banniere{aspect-ratio:4 / 1;} }
@media (max-width:600px){ .bi-banniere{aspect-ratio:2 / 1;} .bi-fleche{width:28px;height:28px;font-size:18px;} }
.bi-fleche{width:30px;height:30px;font-size:20px;}


/* =====================================================================
   Cartes de modules (accueil admin, accueil de l'espace agent) :
   centrées ET sur toute la largeur de la page (jusqu'à 1 920 px), selon l'appareil.
   PC : 4 par ligne · tablette : 3 · téléphone : 2 (1 sur très petit écran).
   La dernière ligne reste centrée, avec des cartes de même largeur.
   ===================================================================== */
.accueil-cartes, .pa-cartes{
  display:flex !important;flex-wrap:wrap;justify-content:center;gap:18px;
  width:100%;max-width:1920px !important;margin-left:auto;margin-right:auto;
  flex-direction:row !important;align-items:stretch !important;
}
.accueil-cartes > .accueil-carte, .pa-cartes > .pa-carte{
  flex:0 1 calc((100% - 3 * 18px) / 4);max-width:calc((100% - 3 * 18px) / 4);width:auto !important;min-width:0;box-sizing:border-box;
}
@media (max-width:1024px){
  .accueil-cartes > .accueil-carte, .pa-cartes > .pa-carte{flex-basis:calc((100% - 2 * 16px) / 3);max-width:calc((100% - 2 * 16px) / 3);}
  .accueil-cartes, .pa-cartes{gap:16px;}
}
@media (max-width:600px){
  .accueil-cartes > .accueil-carte, .pa-cartes > .pa-carte{flex-basis:calc((100% - 12px) / 2);max-width:calc((100% - 12px) / 2);padding:18px 14px !important;}
  .accueil-cartes, .pa-cartes{gap:12px;}
}
@media (max-width:380px){
  .accueil-cartes > .accueil-carte, .pa-cartes > .pa-carte{flex-basis:100%;max-width:100%;}
}
@media (max-width:600px){ .accueil-choix{padding:18px 12px;} }


/* ---- Gestion des retards : indicateurs, graphique, classement ---- */
.suivi-kpi{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:12px;margin-bottom:16px;}
.suivi-kpi .kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.suivi-kpi .kpi .n{font-size:22px;font-weight:800;color:var(--primary-dark);line-height:1.15;}
.suivi-kpi .kpi .l{font-size:12px;color:var(--ink-soft);margin-top:3px;}
.suivi-kpi .kpi.alerte{background:var(--warn-soft, #FDF3E0);}
.suivi-kpi .kpi.danger .n{color:var(--danger);}
.graph-barres{display:flex;align-items:flex-end;gap:3px;height:150px;border-bottom:1px solid var(--border);padding-top:8px;overflow-x:auto;}
.graph-barres .b{flex:1 0 12px;min-width:12px;background:var(--accent);border-radius:4px 4px 0 0;position:relative;}
.graph-barres .b:hover{background:var(--primary);}
.graph-libelles{display:flex;gap:3px;font-size:10px;color:var(--ink-soft);overflow-x:hidden;}
.graph-libelles span{flex:1 0 12px;min-width:12px;text-align:center;}
.classement-ligne{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px;}
.classement-ligne .nom{width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.classement-ligne .barre{flex:1;height:12px;background:var(--border);border-radius:6px;overflow:hidden;}
.classement-ligne .barre i{display:block;height:100%;background:var(--danger);}
.classement-ligne .val{width:84px;text-align:right;font-weight:700;}

/* ---- Menu des onglets toujours visible (administration) ----
   Sur ordinateur et tablette : le menu de gauche reste fixé à l'écran quand
   on descend dans la page (il défile seul s'il est plus haut que l'écran).
   Sur téléphone : la barre des onglets reste collée en haut de l'écran. */
.layout > .sidebar{
  position:sticky;top:0;align-self:start;
  height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  z-index:30;
}
@media (max-width:760px){
  .layout > .sidebar{height:auto;max-height:none;overflow-y:visible;overflow-x:auto;box-shadow:0 2px 8px rgba(0,0,0,.18);}
}

.suivi-kpi .kpi.cliquable{cursor:pointer;text-align:left;font-family:inherit;}
.suivi-kpi .kpi.cliquable:hover{border-color:var(--accent);}
.suivi-kpi .kpi.actif{border:2px solid var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.1);}
.suivi-kpi .kpi .m{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:2px;}


/* ---- Récapitulatifs (tableau + graphique) aux couleurs du logo Camysia ----
   Orange #F7A61D · Vert #085B29 · Crème #FCEED4 · Noir #000000 */
.recap-bloc{background:#FFFBF3;border:2px solid #F7A61D;border-radius:16px;padding:16px 18px;margin-bottom:16px;}
.recap-titre{font-family:var(--font-affiche);font-size:22px;font-weight:800;color:#085B29;text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1.15;}
.recap-sous-titre{font-family:var(--font-affiche);font-style:italic;color:#1A1A1A;font-size:14px;margin:2px 0 12px;opacity:.75;}
.recap-grille{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;align-items:start;}
@media (max-width:900px){ .recap-grille{grid-template-columns:1fr;} }
.recap-table{width:100%;border-collapse:collapse;font-size:13.5px;border:2px solid #085B29;border-radius:10px;overflow:hidden;}
.recap-table th{background:#085B29;color:#FCEED4;font-family:var(--font-affiche);font-weight:700;font-size:14px;padding:8px 10px;text-align:left;}
.recap-table th.n, .recap-table td.n{text-align:right;white-space:nowrap;}
.recap-table th.c, .recap-table td.c{text-align:center;}
.recap-table td{padding:6px 10px;border-bottom:1px solid #F3DDB0;color:#1A1A1A;background:#fff;}
.recap-table tbody tr:nth-child(even) td{background:#FCEED4;}
.recap-table tr.recap-total td{background:#F7A61D !important;font-family:var(--font-affiche);font-weight:800;font-size:14.5px;color:#000;border-top:2px solid #085B29;border-bottom:none;}
.recap-graphe .ligne{display:grid;grid-template-columns:minmax(0,38%) 1fr auto;gap:8px;align-items:center;margin-bottom:7px;font-size:12.5px;color:#1A1A1A;}
.recap-graphe .ligne .lib{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.recap-graphe .ligne .barre{height:16px;background:#FCEED4;border:1px solid #F3DDB0;border-radius:8px;overflow:hidden;}
.recap-graphe .ligne .barre i{display:block;height:100%;border-radius:8px;}
.recap-graphe .ligne .pct{font-weight:800;min-width:44px;text-align:right;color:#085B29;}


/* ---- Écran cuisine de l'administration (plein écran, grandes cartes) ---- */
body.mode-ecran-cuisine-admin .layout > .sidebar{display:none !important;}
body.mode-ecran-cuisine-admin #onglet-bons-cuisine .page-header p,
body.mode-ecran-cuisine-admin #filtresCuisineAdmin{display:none !important;}
body.mode-ecran-cuisine-admin #grilleCuisineAdmin{grid-template-columns:repeat(auto-fill,minmax(340px,1fr)) !important;gap:16px !important;}
body.mode-ecran-cuisine-admin #recapCuisineAdmin{font-size:18px;}
body.mode-ecran-cuisine-admin .main{max-width:none !important;padding:14px 18px !important;}

/* =====================================================================
   Tableaux et composants de l'ADMIN (octobre 2026)
   Ces règles ne s'appliquent que si la page porte la classe « style-compta »
   (posée par admin-app.js) : l'espace agent, la borne, le menu et les
   impressions ne changent pas. « :where() » garde une priorité basse, pour
   que l'affichage en fiches sur téléphone (table.adaptatif) reste prioritaire.
   ===================================================================== */
:where(.style-compta table:not(.impression-table):not(.recap-table)){font-variant-numeric:tabular-nums;}
:where(.style-compta table:not(.impression-table):not(.recap-table)) th{
  background:#F6F1E2;color:#4D5E52;font-weight:600;letter-spacing:.06em;
  padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;
}
:where(.style-compta table:not(.impression-table):not(.recap-table)) th:first-child{border-top-left-radius:9px;}
:where(.style-compta table:not(.impression-table):not(.recap-table)) th:last-child{border-top-right-radius:9px;}
:where(.style-compta table:not(.impression-table):not(.recap-table)) td{
  padding:11px 12px;border-bottom:1px solid #F1E7CB;vertical-align:middle;
}
:where(.style-compta table:not(.impression-table):not(.recap-table)) tr:last-child td{border-bottom:none;}
/* Colonnes de montants : alignées à droite, jamais coupées */
.style-compta td.num, .style-compta th.num{text-align:right;white-space:nowrap;overflow-wrap:normal;}
.style-compta td.pos{color:var(--primary);font-weight:600;}
.style-compta td.neg{color:#9E2F22;font-weight:600;}
/* Un bouton dans un tableau ne se coupe jamais au milieu d'un mot */
.style-compta td .btn, .style-compta td button{white-space:nowrap;overflow-wrap:normal;word-break:normal;}
/* Étiquettes d'état : plus lisibles */
.style-compta .pill{padding:4px 11px;font-size:12.5px;white-space:nowrap;}
.style-compta .pill.entree{background:#E3EFE6;color:var(--primary);}
.style-compta .pill.retard{background:#FBE6C4;color:#7A4A08;}
/* Composants communs */
.cadre-tableau{overflow-x:auto;border:1px solid var(--border);border-radius:11px;background:var(--surface);}
.sous-ligne{display:block;font-size:12px;color:var(--ink-soft);font-weight:400;margin-top:2px;}
.etiquette-entite{display:inline-block;font-size:11.5px;font-weight:600;color:var(--ink);background:#EFE7D0;border-radius:6px;padding:2px 8px;white-space:nowrap;}
.actions-ligne{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:nowrap;}
.btn.btn-mini, .actions-ligne .btn{padding:6px 11px;font-size:12.5px;font-weight:600;border-radius:8px;border-width:1px;margin:0;}
.btn.danger-clair{color:#9E2F22;border-color:#9E2F22;}
.btn.danger-clair:hover{background:var(--danger-soft);}
.btn-lien{background:none;border:none;padding:6px 4px;font:600 12.5px var(--font-corps);color:var(--primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.btn-lien:hover{color:var(--primary-dark);}
.btn-lien:disabled{opacity:.55;cursor:not-allowed;}
.btn:focus-visible, .btn-lien:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
/* Cellule d'actions repérée automatiquement (elle ne contient que des boutons) */
.style-compta td.cellule-actions{white-space:nowrap !important;text-align:right;}
.style-compta td.cellule-actions .btn{padding:6px 11px !important;font-size:12.5px !important;font-weight:600;border-radius:8px;border-width:1px;margin:0 0 0 4px;}
.style-compta td.cellule-actions .btn:first-child{margin-left:0;}
/* Beaucoup de boutons (historique des ventes…) : retour à la ligne ENTRE les boutons,
   pour ne pas élargir le tableau ni écraser les autres colonnes */
.style-compta td.cellule-actions.actions-multiples{white-space:normal !important;min-width:230px;}
.style-compta td.cellule-actions.actions-multiples .btn{margin:2px 0 2px 4px;}
/* Téléphone (lignes en fiches, admin) : la valeur d'une cellule s'écoule comme un texte
   normal à droite de son libellé. L'ancienne disposition plaçait chaque morceau de la
   cellule (texte, étiquette, bouton) côte à côte : une cellule riche, comme « Payé par »
   d'un investissement échelonné, s'écrasait en colonnes d'une lettre de large. */
@media (max-width:700px){
  .style-compta table.adaptatif td{display:flow-root;text-align:right;white-space:normal !important;overflow-wrap:break-word;}
  .style-compta table.adaptatif td[data-label]::before{float:left;max-width:45%;margin:1px 12px 2px 0;text-align:left;}
  .style-compta table.adaptatif td:not([data-label]), .style-compta table.adaptatif td[data-label=""]{text-align:left;}
  .style-compta table.adaptatif td .btn, .style-compta table.adaptatif td button{white-space:normal;margin:2px 0 2px 4px;}
  .style-compta table.adaptatif td .pill{white-space:normal;}
  /* Cellule qui ne contient que des boutons : libellé au-dessus, boutons en dessous */
  .style-compta table.adaptatif td.cellule-actions{text-align:left;}
  .style-compta table.adaptatif td.cellule-actions[data-label]:not([data-label=""])::before{float:none;display:block;max-width:100%;margin:0 0 4px;}
  .style-compta table.adaptatif td.cellule-actions .btn{margin:2px 6px 2px 0;}
  .style-compta table.adaptatif td .actions-ligne{flex-wrap:wrap;justify-content:flex-end;}
  .cadre-tableau{border:none;background:transparent;}
}

/* =====================================================================
   Menu de l'ADMIN sur téléphone et tablette verticale (760 px et moins)
   Barre fine en haut (Menu · page en cours · cloche) ; le menu s'ouvre en
   panneau depuis la gauche. Éléments créés par admin-app.js (activerMenuMobile).
   ===================================================================== */
.barre-mobile, .voile-menu{display:none;}
@media (max-width:760px){
  .style-compta .barre-mobile{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:50;
    min-height:54px;padding:5px 64px 5px 8px;padding-top:calc(5px + env(safe-area-inset-top, 0px));
    background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  .style-compta .barre-mobile-menu{
    display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;flex-shrink:0;
    background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:10px;
    font:700 15px var(--font-corps);cursor:pointer;
  }
  .style-compta .barre-mobile-menu:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .style-compta .barre-mobile-titre{
    font-family:var(--font-affiche);font-weight:700;font-size:17px;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  /* La cloche prend la place réservée à droite de la barre */
  .style-compta #zoneNotifications{top:calc(7px + env(safe-area-inset-top, 0px)) !important;right:10px !important;}
  .style-compta #btnNotifications{min-width:44px;min-height:40px;box-shadow:none !important;}
  .style-compta #panneauNotifications{width:min(360px, calc(100vw - 20px)) !important;}
  /* Le menu devient un panneau qui glisse depuis la gauche */
  .style-compta .layout > .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:70;
    width:min(300px, 86vw);height:auto;max-height:none;
    flex-direction:column;gap:18px;padding:18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    padding-top:calc(18px + env(safe-area-inset-top, 0px));
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-102%);transition:transform .22s ease;visibility:hidden;
    box-shadow:6px 0 24px rgba(0,0,0,.28);
  }
  .style-compta .layout > .sidebar nav{flex-direction:column;}
  .style-compta .layout > .sidebar nav a, .style-compta .layout > .sidebar nav button.navlink{display:flex;align-items:center;min-height:44px;font-size:15px;text-align:left;}
  .style-compta.menu-ouvert .layout > .sidebar{transform:none;visibility:visible;}
  .style-compta.menu-ouvert .voile-menu{display:block;position:fixed;inset:0;z-index:65;background:rgba(18,30,25,.5);}
  .style-compta.menu-ouvert body{overflow:hidden;}
  body.mode-ecran-cuisine-admin .barre-mobile{display:none !important;}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .style-compta .layout > .sidebar{transition:none;}
}

/* =====================================================================
   Fenêtres et messages de l'ADMIN (octobre 2026)
   - .dlg-* : fenêtres de dialogue qui remplacent les boîtes du navigateur
     (confirmation, suppression, saisie, mot de passe) — admin-app.js, ouvrirDialogue().
   - .bulle-* : messages (succès / erreur) fixés en bas de l'écran — flash().
   - .modale-croix / .modale-actions : croix et rangée de boutons communes
     aux fenêtres de saisie existantes (admin seulement : « .style-compta »).
   ===================================================================== */
.dlg-fond{position:fixed;inset:0;z-index:100010;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(18,30,25,.55);}
.dlg{background:#fff;color:var(--ink);border-radius:16px;padding:22px;width:100%;max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 20px 50px rgba(18,30,25,.3);}
.dlg-titre{margin:0;font-family:var(--font-affiche);font-size:18px;line-height:1.3;color:var(--primary-dark);overflow-wrap:anywhere;}
.dlg-texte{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft);white-space:pre-line;overflow-wrap:anywhere;}
.dlg-champ{margin-top:14px;display:flex;align-items:center;gap:8px;}
.dlg-champ input, .dlg-champ textarea, .dlg-champ select{flex:1;min-width:0;width:100%;border:1px solid var(--border);border-radius:9px;padding:11px 12px;font:inherit;font-size:16px;color:var(--ink);background:#fff;}
.dlg-champ textarea{resize:vertical;}
.dlg-champ input:focus, .dlg-champ textarea:focus, .dlg-champ select:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary);}
.dlg-voir{flex-shrink:0;min-height:44px;}
.dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap;}
.dlg-actions .btn{min-height:44px;padding:9px 18px;}
.dlg-actions .btn:focus-visible{outline:2px solid var(--primary-dark);outline-offset:2px;}
@media (max-width:520px){
  .dlg-fond{align-items:flex-end;padding:0;}
  .dlg{max-width:none;border-radius:16px 16px 0 0;padding:20px 16px calc(16px + env(safe-area-inset-bottom, 0px));}
  .dlg-actions{flex-direction:column-reverse;}
  .dlg-actions .btn{width:100%;}
}

.bulle-zone{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom, 0px));z-index:100020;display:flex;justify-content:center;padding:0 12px;pointer-events:none;}
.bulle-message{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;max-width:min(560px, 100%);padding:12px 12px 12px 16px;border-radius:12px;font-size:14px;line-height:1.45;font-weight:600;box-shadow:0 10px 30px rgba(18,30,25,.28);}
.bulle-message.succes{background:var(--primary);color:#fff;}
.bulle-message.erreur{background:#9E2F22;color:#fff;}
.bulle-texte{white-space:pre-line;overflow-wrap:anywhere;padding:4px 0;}
.bulle-fermer{flex-shrink:0;width:32px;height:32px;border:none;border-radius:8px;background:rgba(255,255,255,.16);color:#fff;font-size:14px;cursor:pointer;}
.bulle-fermer:hover{background:rgba(255,255,255,.28);}
.bulle-fermer:focus-visible{outline:2px solid #fff;outline-offset:1px;}
@media (prefers-reduced-motion:no-preference){
  .bulle-message{animation:bulle-entree .18s ease-out;}
  @keyframes bulle-entree{from{transform:translateY(10px);opacity:0;}to{transform:none;opacity:1;}}
}
/* Une fenêtre est ouverte : le message passe en haut, pour ne pas recouvrir ses boutons du bas */
html:has(.modale-fond.ouverte) .bulle-zone, html:has(.dlg-fond) .bulle-zone{bottom:auto;top:calc(14px + env(safe-area-inset-top, 0px));}
@media print{ .bulle-zone, .dlg-fond{display:none !important;} }

/* Fenêtres de saisie existantes */
.style-compta .modale-croix{
  position:sticky;top:0;float:right;z-index:3;width:36px;height:36px;margin:-8px -8px 4px 10px;
  border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink-soft);font-size:15px;line-height:1;cursor:pointer;
}
.style-compta .modale-croix:hover{background:var(--primary-soft);color:var(--primary-dark);}
.style-compta .modale-croix:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
.style-compta .modale-croix[hidden]{display:none;}
.style-compta .modale .modale-actions{
  position:sticky;bottom:-22px;z-index:2;background:#fff;margin-bottom:-22px;padding-top:12px;padding-bottom:22px;
  box-shadow:0 -10px 12px -10px rgba(18,30,25,.18);
}
@media (max-width:700px){
  /* Téléphone : la fenêtre occupe toute la largeur, posée en bas de l'écran */
  .style-compta .modale-fond{align-items:flex-end;padding:0;}
  .style-compta .modale-fond > .modale{max-width:none !important;width:100% !important;max-height:92dvh;border-radius:16px 16px 0 0;}
}

/* =====================================================================
   Tableau de bord central (octobre 2026) : chiffres du jour, graphiques
   de la période, points à surveiller. Graphiques dessinés en HTML/CSS,
   sans bibliothèque. Couleurs des séries vérifiées (lisibles aussi par
   les personnes daltoniennes) : ne pas les changer sans les revérifier.
   ===================================================================== */
.tdb{--tdb-serie:#1F7A52;--tdb-especes:#1F7A52;--tdb-momo:#C97D1A;--tdb-creance:#3F6FB0;--tdb-autres:#8A948F;justify-content:flex-start !important;align-items:stretch !important;padding:24px clamp(12px,3vw,28px) 60px;box-sizing:border-box;width:100%;}
.tdb .accueil-entete{align-self:center;}
.tdb .accueil-logo{height:110px;}
.tdb-barre{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:6px 0 18px;}
.tdb-filtre{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft);}
.tdb-filtre select{border:1px solid var(--border);border-radius:9px;padding:8px 10px;font:inherit;font-size:14px;color:var(--ink);background:#fff;min-height:40px;}
.tdb-periode{display:inline-flex;border:1px solid var(--primary);border-radius:10px;overflow:hidden;}
.tdb-periode-btn{border:none;background:#fff;color:var(--primary);font:600 13.5px var(--font-corps);padding:0 14px;min-height:40px;cursor:pointer;}
.tdb-periode-btn + .tdb-periode-btn{border-left:1px solid var(--primary);}
.tdb-periode-btn.actif{background:var(--primary);color:#fff;}
.tdb-periode-btn:focus-visible, .tdb-carte:focus-visible, .tdb-mini:focus-visible, .tdb-barre-jour:focus-visible{outline:2px solid var(--primary-dark);outline-offset:2px;}
.tdb-barre .btn-lien{margin-left:auto;}
/* Chiffres du jour */
.tdb-cartes{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px;}
.tdb-carte{display:flex;flex-direction:column;gap:4px;text-align:left;font-family:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;min-width:0;}
button.tdb-carte, button.tdb-mini{cursor:pointer;transition:border-color .15s, box-shadow .15s;}
button.tdb-carte:hover, button.tdb-mini:hover{border-color:var(--accent);box-shadow:0 6px 16px rgba(23,51,42,.08);}
.tdb-carte-libelle{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.tdb-carte-valeur{font-family:var(--font-affiche);font-size:28px;font-weight:700;line-height:1.15;color:var(--primary-dark);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.tdb-carte-comp{font-size:12.5px;line-height:1.35;color:var(--ink-soft);min-height:17px;}
.tdb-carte-comp b{font-weight:700;}
.tdb-carte-comp .hausse{color:#1B5E42;}
.tdb-carte-comp .baisse{color:#9E2F22;}
/* Graphiques */
.tdb-graphiques{display:grid;grid-template-columns:3fr 2fr 2fr;gap:14px;margin-bottom:22px;align-items:stretch;}
.tdb-graph{min-width:0;margin:0;}
.tdb-titre{margin:0;font-size:15.5px;}
.tdb-sous-titre{margin:2px 0 14px;font-size:12.5px;color:var(--ink-soft);}
.tdb-plot{position:relative;display:flex;align-items:flex-end;gap:2px;height:190px;border-bottom:1px solid #D9CFB4;padding-top:22px;}
.tdb-plot::before{content:attr(data-max);position:absolute;top:0;left:0;right:0;border-top:1px dashed #E6DDC6;font-size:11px;color:var(--ink-soft);padding-top:2px;pointer-events:none;}
.tdb-barre-jour{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;background:none;border:none;padding:0 1px;cursor:pointer;position:relative;font-family:inherit;}
.tdb-barre-jour i{display:block;width:100%;max-width:30px;min-height:2px;border-radius:4px 4px 0 0;background:var(--tdb-serie);}
.tdb-barre-jour.vide i{background:#D9CFB4;}
.tdb-barre-jour:hover i, .tdb-barre-jour:focus-visible i, .tdb-barre-jour.actif i{background:var(--primary-dark);}
.tdb-barre-jour .v{font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;margin-bottom:3px;font-variant-numeric:tabular-nums;}
.tdb-axe{display:flex;gap:2px;margin-top:5px;}
.tdb-axe span{flex:1 1 0;min-width:0;text-align:center;font-size:11px;line-height:1.25;color:var(--ink-soft);white-space:nowrap;overflow:visible;}
.tdb-axe span.aujourdhui{color:var(--ink);font-weight:700;}
.tdb-bulle{position:absolute;z-index:5;left:0;top:0;transform:translate(-50%,-100%);background:var(--primary-dark);color:#fff;font-size:12.5px;line-height:1.4;padding:7px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 16px rgba(18,30,25,.25);}
.tdb-bulle b{font-size:13.5px;}
.tdb-bulle[hidden]{display:none;}
.tdb-zone-plot{position:relative;}
.tdb-chiffres{margin-top:12px;font-size:12.5px;}
.tdb-chiffres summary{cursor:pointer;color:var(--primary);font-weight:600;}
.tdb-chiffres table{margin-top:8px;font-size:12.5px;}
/* Moyens de paiement : une barre par moyen, libellé et montant écrits */
.tdb-paiement{display:grid;grid-template-columns:116px 1fr;align-items:center;gap:4px 12px;margin-bottom:14px;}
.tdb-paiement .nom{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px;}
.tdb-paiement .nom::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c);flex-shrink:0;}
.tdb-paiement .piste{height:14px;border-radius:4px;background:#F1EADB;overflow:hidden;}
.tdb-paiement .piste i{display:block;height:100%;min-width:2px;border-radius:0 4px 4px 0;background:var(--c);}
.tdb-paiement .val{grid-column:2;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.tdb-paiement .val b{color:var(--ink);}
/* Points à surveiller */
.tdb-section{font-size:15.5px;margin:0 0 10px;}
.tdb-section-note{font-family:var(--font-corps);font-size:12.5px;font-weight:400;color:var(--ink-soft);}
.tdb-minis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.tdb-mini{display:flex;flex-direction:column;gap:2px;text-align:left;font-family:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 13px;min-width:0;min-height:64px;}
.tdb-mini .n{font-family:var(--font-affiche);font-size:20px;font-weight:700;line-height:1.2;color:var(--ink-soft);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.tdb-mini .l{font-size:12px;line-height:1.3;color:var(--ink-soft);}
.tdb-mini:not([data-dc-traiter]) .n{color:var(--primary-dark);}
/* Quelque chose à traiter : la carte ressort (fond, bordure et mention écrite) */
.tdb-mini.a-traiter{background:#FBE6C4;border-color:#C97D1A;}
.tdb-mini.a-traiter .n{color:#5C3606;}
.tdb-mini.a-traiter .l{color:#5C3606;font-weight:600;}
.tdb-mini.a-traiter .l::after{content:" · à traiter";font-weight:400;}
@media (max-width:1000px){
  .tdb-cartes{grid-template-columns:repeat(2,1fr);}
  .tdb-graphiques{grid-template-columns:1fr;}
  .tdb-minis{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .tdb-cartes{grid-template-columns:1fr 1fr;gap:10px;}
  .tdb-carte{padding:12px;}
  .tdb-carte-valeur{font-size:21px;}
  .tdb-minis{grid-template-columns:1fr 1fr;}
  .tdb-barre .btn-lien{margin-left:0;}
  .tdb-plot{height:160px;}
}


/* ---------- Détail d'un indicateur affiché dans la page (tableaux de bord) ----------
   La liste s'ouvre sous les indicateurs, sur toute la largeur, au lieu d'une fenêtre. */
.modale-fond.liste-en-page{position:static !important;inset:auto;background:none !important;padding:0 !important;margin:18px 0 0;z-index:auto;display:none;}
.modale-fond.liste-en-page.ouverte{display:block;}
.modale-fond.liste-en-page > .modale{max-width:none !important;width:100% !important;max-height:none !important;overflow:visible;box-shadow:none;border:1px solid var(--border);border-radius:13px !important;position:relative;scroll-margin-top:12px;}
.modale-fond.liste-en-page{scroll-margin-top:14px;}
.modale-fond.liste-en-page #contenuModaleListe{overflow-x:auto;}

/* Confirmation des soldes : tableau resserré pour tenir dans la fenêtre sans défilement horizontal */
.tableau-confirmation th, .tableau-confirmation td{padding:8px 9px !important;font-size:13px;white-space:normal !important;vertical-align:top;}
.tableau-confirmation th{font-size:11px !important;letter-spacing:.03em;}
.tableau-confirmation td:first-child{min-width:120px;}

/* =====================================================================
   Administration : les fenêtres de saisie (formulaires) utilisent la largeur
   disponible au lieu de 480 px — plus de défilement horizontal dans les fiches
   (matière première, article, agent…). Les petites fenêtres de confirmation
   gardent leur taille. Sur téléphone, rien ne change (largeur de l'écran).
   ===================================================================== */
html:has(#onglet-dashboard) .modale-fond > .modale:has(form){max-width:min(900px, calc(100vw - 24px)) !important;}

/* =====================================================================
   Champs de formulaire : jamais plus larges que leur colonne.
   Une option longue dans une liste (ex. « Jonathan Steven Loemba Sikou — DOLISIE »)
   faisait déborder la fenêtre ou la carte (barre de défilement horizontale).
   Vaut pour TOUTES les fenêtres et TOUS les formulaires (admin et espace agent).
   ===================================================================== */
.field-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
@media (max-width:760px){ .field-row{grid-template-columns:minmax(0,1fr);} }
.field-row > *, .field, .modale .field-row > *{min-width:0;}
.field select, .field input:not([type=checkbox]):not([type=radio]), .field textarea,
.modale select, .modale input:not([type=checkbox]):not([type=radio]), .modale textarea{max-width:100%;}
.field select, .modale select{text-overflow:ellipsis;}
/* Rangées de boutons ou de champs (fenêtres, en-têtes de page) : passent à la ligne au lieu de déborder sur téléphone */
.modale div[style*="display:flex"], .page-header > div[style*="display:flex"]{flex-wrap:wrap;}
.page-header > div{min-width:0;max-width:100%;}
.page-header > div[style*="display:flex"] > .field{min-width:0;max-width:100%;}

/* ---------- Sélecteur d'heure Camysia (fenetres.js) : remplace l'horloge du navigateur ---------- */
.hr-champ{display:inline-flex;align-items:center;gap:4px;width:100%;max-width:200px;min-width:0;vertical-align:middle;}
.hr-champ select{flex:1 1 0;min-width:58px;width:auto !important;padding:8px 6px;text-align:center;text-align-last:center;font-variant-numeric:tabular-nums;cursor:pointer;}
.hr-champ select:disabled, .hr-bouton:disabled, .hr-date:disabled{opacity:.5;cursor:not-allowed;}
.hr-deux-points{font-weight:700;color:var(--ink-soft);}
.hr-bouton{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;border:1px solid var(--border);border-radius:8px;padding:8px 12px;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-variant-numeric:tabular-nums;cursor:pointer;text-align:left;}
.hr-bouton .vide{color:var(--ink-soft);}
.hr-bouton .hr-icone{font-size:15px;opacity:.75;}
.hr-dt{display:flex;flex-wrap:wrap;gap:8px;width:100%;min-width:0;}
.hr-dt .hr-date{flex:1 1 150px;min-width:0;}
.hr-dt .hr-champ{flex:1 1 130px;max-width:none;}
.dlg-champ .hr-champ{max-width:none;}
.dlg-champ .hr-champ select{font-size:16px;padding:11px 6px;}
/* Roues (téléphone) */
.dlg-fond.hr-fond{z-index:100020;align-items:flex-end;padding:0;}
.hr-feuille{background:#fff;width:100%;max-width:420px;border-radius:18px 18px 0 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.2);}
.hr-titre{font-weight:700;font-size:15px;text-align:center;color:var(--primary-dark, var(--ink));margin-bottom:8px;overflow-wrap:anywhere;}
.hr-roues{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:220px;}
.hr-bande{position:absolute;left:8px;right:8px;top:88px;height:44px;border-radius:10px;background:var(--accent-soft, #EEF6F1);pointer-events:none;}
.hr-roue{position:relative;width:88px;height:220px;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);outline:none;}
.hr-roue::-webkit-scrollbar{display:none;}
.hr-marge{height:88px;}
.hr-item{height:44px;line-height:44px;text-align:center;font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink-soft);scroll-snap-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;}
.hr-item.choisi{color:var(--ink);font-weight:700;}
.hr-roues .hr-deux-points{position:relative;font-size:22px;}
.hr-actions{display:flex;gap:8px;margin-top:12px;}
.hr-actions .btn{flex:1;min-height:44px;}

/* Vignettes de taille fixe dans les tableaux (photos d'articles, d'agents…) : jamais écrasées par la
   règle « max-width:100% » des cartes quand la colonne est étroite ; la colonne s'élargit à leur taille. */
.card td img[style*="width"], .modale td img[style*="width"]{max-width:none;flex-shrink:0;}

/* =====================================================================
   Charte Camysia Kongo (2026) — inspirée du logo
   Moutarde du fond, vert Kongo du trait, crème du lettrage, contour encre
   et ombre décalée « autocollant ». Polices inchangées (Baloo 2 + Inter).
   La signature tient en un seul geste : ce qui se touche (boutons, menu
   actif, cartes de modules) a un contour encre et une ombre pleine qui
   s'écrase au clic. Le reste (tableaux, formulaires) reste calme.
   ===================================================================== */
:root{
  --bg:#FFF6E3;          /* crème du lettrage */
  --surface:#FFFDF7;
  --ink:#1C2A1F;
  --ink-soft:#5E6B5F;
  --border:#EED9A8;
  --primary:#1D6B32;     /* vert Kongo */
  --primary-dark:#0F3D1F;
  --primary-soft:#E2F0E3;
  --accent:#F4A51F;      /* moutarde du logo */
  --accent-dark:#D98A0B;
  --accent-soft:#FFEBC2;
  --encre:#1C1A17;       /* contour du lettrage */
  --radius:16px;
  --ombre-sticker:3px 3px 0 var(--encre);
  --transition-rapide:.14s cubic-bezier(.3,.7,.4,1);
}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
body{background:var(--bg);}
::selection{background:var(--accent);color:var(--encre);}

/* ---- Défilement : barres fines, discrètes, couleurs de la marque ---- */
*{scrollbar-width:thin;scrollbar-color:rgba(29,107,50,.38) transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:rgba(29,107,50,.32);border-radius:99px;border:2px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:rgba(29,107,50,.6);background-clip:padding-box;}
/* Menu de gauche : la barre n'apparaît qu'au survol */
.sidebar{scrollbar-color:transparent transparent;}
.sidebar:hover{scrollbar-color:rgba(244,165,31,.7) transparent;}
.sidebar::-webkit-scrollbar-thumb{background:transparent;}
.sidebar:hover::-webkit-scrollbar-thumb{background:rgba(244,165,31,.7);background-clip:padding-box;}

/* ---- Boutons : l'autocollant qui s'enfonce ---- */
.btn{
  border:2px solid var(--encre);border-radius:12px;box-shadow:var(--ombre-sticker);
  font-family:var(--font-corps);letter-spacing:.005em;
  transition:transform var(--transition-rapide), box-shadow var(--transition-rapide), background .15s, color .15s;
}
.btn:hover{background:#FFB531;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--encre);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--encre);}
.btn.secondary{background:var(--surface);color:var(--primary-dark);border:2px solid var(--encre);}
.btn.secondary:hover{background:var(--accent-soft);}
.btn.danger{background:#C2412D;color:#fff;border-color:var(--encre);}
.btn.danger:hover{background:#A3321F;}
.btn:disabled, .btn:disabled:hover{opacity:.5;transform:none;box-shadow:1px 1px 0 var(--encre);}
.btn:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* ---- Champs : bord net, halo moutarde à la saisie ---- */
input, select, textarea{border:1.5px solid #E2C98E;border-radius:10px;background:#fff;transition:border-color .15s, box-shadow .15s;}
input:hover, select:hover, textarea:hover{border-color:#CDAE68;}
input:focus, select:focus, textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(244,165,31,.45);}
input[type="checkbox"], input[type="radio"]{accent-color:var(--primary);box-shadow:none;}
label{color:var(--ink-soft);font-weight:500;}

/* ---- Cartes et chiffres clés ---- */
.card{border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:none;background:var(--surface);}
.stat, .suivi-kpi .kpi{border:1.5px solid var(--border);border-radius:14px;background:var(--surface);}
.stat .n, .suivi-kpi .kpi .n{font-family:var(--font-affiche);letter-spacing:-.01em;}
.kpi.cliquable, .suivi-kpi button.kpi, [data-cc-filtre], [data-onglet-dec]{cursor:pointer;transition:transform var(--transition-rapide), box-shadow var(--transition-rapide), border-color .15s;}
.kpi.cliquable:hover, .suivi-kpi button.kpi:hover{transform:translate(-1px,-1px);border-color:var(--encre);box-shadow:var(--ombre-sticker);}
.kpi.cliquable.actif, .suivi-kpi .kpi.actif{border:2px solid var(--encre);box-shadow:3px 3px 0 var(--accent);background:var(--accent-soft);}

/* ---- Tableaux : calmes, en-têtes en minuscules, survol moutarde clair ---- */
th{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700;color:var(--primary-dark);background:var(--accent-soft);border-bottom:2px solid var(--accent);}
th:first-child{border-top-left-radius:10px;} th:last-child{border-top-right-radius:10px;}
td{border-bottom:1px solid #F3E4BF;}
tr{transition:background .12s;}
tr:hover td{background:#FFF1D2;}
.pill{border-radius:99px;font-weight:700;}

/* ---- Menu de gauche (administration) ---- */
.sidebar{background:var(--primary-dark);background-image:radial-gradient(120% 60% at 0% 0%, rgba(244,165,31,.16) 0%, transparent 60%);padding:18px 14px;gap:14px;}
.sidebar .brand{gap:10px;font-size:15.5px;line-height:1.15;color:#FFF6E3;}
.sidebar .brand .brand-logo{height:52px;width:52px;max-width:52px;border-radius:50%;object-fit:cover;border:2.5px solid var(--accent);box-shadow:2px 2px 0 var(--encre);background:var(--accent);flex-shrink:0;}
.sidebar #widgetVilleHeure{display:none !important;} /* ni date, ni heure, ni ville dans le menu */
.sidebar #nomAdminSidebar{background:rgba(255,246,227,.08) !important;border:1px solid rgba(255,246,227,.14);border-radius:12px !important;margin:0 !important;transition:background .15s;}
.sidebar #nomAdminSidebar:hover{background:rgba(244,165,31,.18) !important;}
.sidebar nav{gap:2px;}
.sidebar nav a, .sidebar nav button.navlink{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:11px;color:#E4EFE6;font-size:13.5px;line-height:1.3;border:2px solid transparent;
  transition:background .15s, color .15s, transform var(--transition-rapide), box-shadow var(--transition-rapide);}
.sidebar nav button.navlink[data-icone]::before{content:attr(data-icone);width:18px;margin-right:-3px;text-align:center;flex-shrink:0;font-size:15px;}
.sidebar nav a:hover, .sidebar nav button.navlink:hover{background:rgba(244,165,31,.16);color:#fff;}
.sidebar nav a.active, .sidebar nav button.navlink.active{background:var(--accent);color:var(--encre);font-weight:700;border-color:var(--encre);box-shadow:2px 2px 0 var(--encre);}
.sidebar nav button.navlink:active{transform:translate(1px,1px);}
.nav-separateur{border-top:1px dashed rgba(255,246,227,.2);margin:8px 4px;}

/* ---- Cartes de modules (accueil admin, espace agent) ---- */
.accueil-carte, .pa-carte{border:2px solid var(--border);border-radius:18px;background:var(--surface);
  transition:transform var(--transition-rapide), box-shadow var(--transition-rapide), border-color .15s;}
.accueil-carte:hover, .pa-carte:hover{transform:translate(-2px,-2px);border-color:var(--encre);box-shadow:5px 5px 0 var(--encre);}
.accueil-carte:active, .pa-carte:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--encre);}
.accueil-carte-icone, .pa-carte-icone{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--accent);border:2px solid var(--encre);box-shadow:2px 2px 0 var(--encre);font-size:24px !important;line-height:1;}
.accueil-carte-titre, .pa-carte-titre{color:var(--primary-dark);}

/* ---- Fenêtres : apparaissent, ne sautent pas ---- */
.modale, .dlg{border:2px solid var(--encre);border-radius:20px;box-shadow:6px 6px 0 var(--encre);background:var(--surface);}
.modale-fond.ouverte, .dlg-fond{animation:camysiaFondu .16s ease-out;}
.modale-fond.ouverte .modale, .dlg-fond .dlg{animation:camysiaPop .2s cubic-bezier(.2,.9,.3,1.2);}
@keyframes camysiaFondu{from{opacity:0;}to{opacity:1;}}
@keyframes camysiaPop{from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;}}
.dlg-champ input:focus, .dlg-champ textarea:focus, .dlg-champ select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(244,165,31,.45);}

/* ---- Titres de pages ---- */
.page-header h1, .page-title{color:var(--primary-dark);letter-spacing:-.005em;}

/* ---- Puces (réglages d'une photo de bannière…) ---- */
.puce-photo{font:inherit;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;border:1.5px solid var(--border);background:#fff;color:var(--ink-soft);cursor:pointer;transition:background .12s, border-color .12s;}
.puce-photo:hover{border-color:var(--primary);}
.puce-photo.active{background:var(--primary);border-color:var(--encre);color:#fff;}

/* ---- Bulles de message ---- */
.bulle-message{border:2px solid var(--encre) !important;box-shadow:3px 3px 0 var(--encre) !important;border-radius:14px !important;}

/* Pas d'animations pour qui les a coupées sur son appareil */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation:none !important;transition:none !important;}
}
/* Interventions techniques : petits graphiques cliquables et comptes-rendus */
.graphes-int{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:16px;}
.graphes-int .g{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;}
.graphes-int .t{font-weight:700;font-size:13px;margin-bottom:6px;}
.graphes-int .barre-l{display:grid;grid-template-columns:minmax(70px,120px) 1fr 32px;align-items:center;gap:8px;width:100%;background:none;border:0;padding:3px 0;font:inherit;font-size:12.5px;text-align:left;cursor:pointer;color:inherit;}
.graphes-int .barre-l:hover .barre{opacity:.75;}
.graphes-int .lib{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.graphes-int .piste{display:block;height:12px;border-radius:6px;background:var(--border);overflow:hidden;}
.graphes-int .barre{display:block;height:100%;border-radius:6px;background:var(--primary);min-width:3px;}
.graphes-int .nb{text-align:right;font-weight:700;}
.int-cr{margin-top:6px;font-size:12px;color:var(--ink-soft);}
.int-cr img{display:block;max-width:120px;max-height:90px;margin-top:4px;border-radius:6px;cursor:zoom-in;border:1px solid var(--border);}

/* Tableau trop large pour son cadre (zoom, fenêtre étroite, capture d'écran…) : quelle que soit la
   largeur de l'écran, il passe en « fiches » comme sur téléphone au lieu de déborder à droite.
   La classe « en-fiches » est posée et retirée automatiquement (firestore.js → activerTableauxAdaptatifs). */
table.adaptatif.en-fiches{display:block;white-space:normal;overflow:visible;border:none;}
table.adaptatif.en-fiches thead{display:none;}
table.adaptatif.en-fiches tbody, table.adaptatif.en-fiches tr, table.adaptatif.en-fiches td{display:block;width:100%;}
table.adaptatif.en-fiches tr{border:1px solid var(--border);border-radius:10px;margin:0 0 10px;padding:6px 12px;background:var(--surface);}
table.adaptatif.en-fiches tr:hover td{background:transparent;}
table.adaptatif.en-fiches td{border:none;padding:5px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:right;white-space:normal !important;}
table.adaptatif.en-fiches td[data-label]::before{content:attr(data-label);flex-shrink:0;max-width:45%;text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
table.adaptatif.en-fiches td:not([data-label]), table.adaptatif.en-fiches td[data-label=""]{justify-content:flex-start;flex-wrap:wrap;text-align:left;}
table.adaptatif.en-fiches td[data-label=""]::before{display:none;}
.style-compta table.adaptatif.en-fiches td{display:flow-root;text-align:right;white-space:normal !important;overflow-wrap:break-word;}
.style-compta table.adaptatif.en-fiches td[data-label]::before{float:left;max-width:45%;margin:1px 12px 2px 0;text-align:left;}
.style-compta table.adaptatif.en-fiches td:not([data-label]), .style-compta table.adaptatif.en-fiches td[data-label=""]{text-align:left;}
.style-compta table.adaptatif.en-fiches td .btn, .style-compta table.adaptatif.en-fiches td button{white-space:normal;margin:2px 0 2px 4px;}
.style-compta table.adaptatif.en-fiches td .pill{white-space:normal;}
.style-compta table.adaptatif.en-fiches td.cellule-actions{text-align:left;}
.style-compta table.adaptatif.en-fiches td.cellule-actions[data-label]:not([data-label=""])::before{float:none;display:block;max-width:100%;margin:0 0 4px;}
.style-compta table.adaptatif.en-fiches td.cellule-actions .btn{margin:2px 6px 2px 0;}
.style-compta table.adaptatif.en-fiches td .actions-ligne{flex-wrap:wrap;justify-content:flex-end;}
/* Écran assez large (zoom, fenêtre réduite) : les fiches se rangent côte à côte */
@media (min-width:701px){
  table.adaptatif.en-fiches tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;}
  table.adaptatif.en-fiches tbody tr{margin:0;}
}

/* ---------- Écrans regroupés et écrans découpés : barre de pastilles en haut de l'écran ---------- */
.barre-sous-onglets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:4px;border-radius:12px;background:var(--primary-soft);border:1px solid var(--border);}
.barre-sous-onglets .sous-onglet{appearance:none;border:1px solid transparent;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:9px;cursor:pointer;white-space:nowrap;line-height:1.25;}
.barre-sous-onglets .sous-onglet:hover{background:rgba(255,255,255,.75);}
.barre-sous-onglets .sous-onglet.actif{background:var(--surface);border-color:var(--primary);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.barre-sous-onglets .sous-onglet:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
.sous-partie-cachee{display:none !important;}
@media (max-width:700px){
  .barre-sous-onglets{gap:4px;}
  .barre-sous-onglets .sous-onglet{font-size:13px;padding:6px 10px;white-space:normal;}
}
@media print{ .barre-sous-onglets{display:none !important;} }

/* ---------- Suppression groupée dans les historiques ---------- */
.barre-selection{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;padding:6px 12px;border-radius:10px;background:var(--surface);border:1px dashed var(--border);font-size:13px;}
.barre-selection.active{position:sticky;top:0;z-index:5;background:var(--danger-soft);border:1px solid var(--danger);font-size:13.5px;padding:8px 12px;}
.barre-selection > span{flex:1;min-width:160px;}
th.col-selection, td.col-selection{width:30px;text-align:center;padding-left:6px !important;padding-right:4px !important;}
th.col-selection input, td.col-selection input{width:17px;height:17px;margin:0;cursor:pointer;accent-color:var(--danger);}
@media print{ .barre-selection, th.col-selection, td.col-selection{display:none !important;} }