/* Prothea — feuille de style maison (vanilla, sans framework).
   Langage visuel « glass dashboard » repris de docs/Design/Test design/Test1_Design.html :
   cartes en verre dépoli (translucide + flou), coins très arrondis, ombres douces,
   accent cyan (lueur), badges de statut à pastille (ambre/bleu/émeraude/violet).
   La police unique est Plus Jakarta Sans. Les couleurs du logo (rose/orange/cyan/vert)
   restent l'identité de marque, indépendantes du thème.

   THÈMES : toutes les surfaces passent par des variables. :root porte le thème SOMBRE
   par défaut (rendu si le JS ne s'exécute pas). html[data-theme="light"] redéfinit la
   palette pour le thème CLAIR. Le bouton bascule (#theme-toggle) persiste le choix en
   localStorage ; un script inline anti-flash pose data-theme avant le premier rendu. */
:root, html[data-theme="dark"] {
  --dark: #090d16;          /* fond principal */
  --header: #0c1220;        /* fond de l'entête */
  --card: rgba(21, 28, 46, .6);    /* cartes / tables — verre dépoli */
  --card-solid: #151c2e;    /* repli opaque (éléments sans flou) */
  --card-2: rgba(30, 41, 59, .35); /* survol de ligne / pied de table */
  --c-bg-soft: rgba(15, 23, 42, .45); /* fond du volet de détail imbriqué (matières premières) */
  --field: rgba(15, 23, 42, .6);   /* fond des champs */
  --bord: #1e293b;          /* bordures de champs (slate-800) */
  --bord-hover: #334155;    /* survol de champ (slate-700) */
  --bord-soft: rgba(255, 255, 255, .06); /* bordures du verre */
  --bord-line: rgba(148, 163, 184, .12); /* lignes internes de table */
  --th-bg: rgba(15, 23, 42, .4);   /* fond d'en-tête de table */
  --bar-bg: rgba(15, 23, 42, .7);  /* fond des barres / jauges */
  --scroll: #222c44; --scroll-hover: #2c3858; /* ascenseur */
  --txt: #e2e8f0;           /* slate-200 */
  --txt-fort: #ffffff;
  --gris: #94a3b8;          /* muted (slate-400) */
  --gris-2: #64748b;        /* placeholders (slate-500) */
  --on-accent: #06242b;     /* texte posé sur un fond accent (boutons cyan) */
  color-scheme: dark;       /* sélecteurs de date, scrollbars natives en sombre */
  --bleu: #25BFDA;          /* accent primaire (liens, nav active, focus, lueur) */
  --bleu-clair: #5fd8ec;
  --bleu-statut: #60a5fa;   /* badge « bleu » des statuts (vrai bleu) */
  --orange: #F79832;
  --rose: #C32A82;
  --vert: #34d399;          /* émeraude (statuts livrés/facturés) */
  --ambre: #fbbf24;         /* statuts en attente / solde dû */
  --violet: #c084fc;        /* statuts ordre de fabrication */
  --rouge: #f87171;
  --ombre-carte: 0 18px 40px -12px rgba(0, 0, 0, .55);
  /* Accents par section de la saisie (liserés de carte) — variante claire pour fond sombre */
  --c-info: #60a5fa; --c-op: #c084fc; --c-emp: #818cf8;
  --c-art: #34d399; --c-eta: #fbbf24; --c-cmt: #94a3b8; --c-doc: #a78bfa;
}
/* Thème CLAIR : surfaces claires + accents assombris pour rester lisibles sur blanc. */
html[data-theme="light"] {
  --dark: #eef2f7;          /* fond principal (slate clair) */
  --header: #ffffff;
  --card: rgba(255, 255, 255, .7);
  --card-solid: #ffffff;
  --card-2: rgba(15, 23, 42, .04);
  --c-bg-soft: #f6f7f9;     /* fond du volet de détail imbriqué (matières premières) */
  --field: #ffffff;
  --bord: #e2e8f0;          /* slate-200 */
  --bord-hover: #cbd5e1;    /* slate-300 */
  --bord-soft: rgba(15, 23, 42, .08);
  --bord-line: rgba(15, 23, 42, .08);
  --th-bg: #f1f5f9;         /* slate-100 */
  --bar-bg: #e2e8f0;
  --scroll: #cbd5e1; --scroll-hover: #94a3b8;
  --txt: #1e293b;           /* slate-800 */
  --txt-fort: #0f172a;      /* slate-900 */
  --gris: #64748b;          /* slate-500 */
  --gris-2: #94a3b8;        /* slate-400 */
  --on-accent: #ffffff;     /* texte blanc sur l'accent cyan assombri */
  color-scheme: light;
  --bleu: #0e7490;          /* cyan-700 — lisible en texte sur blanc et en fond bouton */
  --bleu-clair: #0891b2;
  --bleu-statut: #2563eb;   /* blue-600 */
  --orange: #c2410c;        /* orange-700 */
  --rose: #be185d;          /* rose-700 */
  --vert: #047857;          /* emerald-700 */
  --ambre: #b45309;         /* amber-700 */
  --violet: #7c3aed;        /* violet-600 */
  --rouge: #dc2626;         /* red-600 */
  --ombre-carte: 0 10px 30px -14px rgba(15, 23, 42, .18);
  /* Accents par section (liserés) — couleurs vives de la maquette pour fond clair */
  --c-info: #2563eb; --c-op: #7c3aed; --c-emp: #4338ca;
  --c-art: #059669; --c-eta: #d97706; --c-cmt: #64748b; --c-doc: #7c3aed;
}
* { box-sizing: border-box; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
body {
  margin: 0; font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  color: var(--txt); background: var(--dark);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .fiche h2 { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -.02em; }

/* ---- Barre de navigation ---- */
.topbar {
  display: flex; align-items: center; gap: 24px; position: sticky; top: 0; z-index: 50;
  background: var(--header); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148, 163, 184, .12); padding: 0 28px; height: 62px;
}
.brand { display: flex; align-items: center; text-decoration: none; }
/* Logo officiel. Variante « lettres blanches » par défaut (thème sombre) ;
   le thème clair permute vers la variante « lettres charbon » (anneau préservé). */
.brand-logo { height: 28px; width: auto; display: block; }
html[data-theme="light"] .brand-logo { content: url("/static/img/prothea-logo-on-light.png"); }
/* Largeur du menu latéral : pleine, ou réduite en rail d'icônes (état mémorisé). */
:root { --sidebar-w: 230px; }
html[data-sidebar="collapsed"] { --sidebar-w: 64px; }

/* Bouton de repli du menu (3 barres) — masqué tant qu'on n'est pas connecté. */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0 9px; border-radius: 10px; cursor: pointer; flex: none;
  background: transparent; border: 1px solid var(--bord); color: var(--gris);
  transition: color .15s, border-color .15s, background .15s;
}
body.connecte .hamburger { display: inline-flex; }
.hamburger:hover { color: var(--bleu); border-color: var(--bleu); background: rgba(37, 191, 218, .08); }
.hamburger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: currentColor; }
/* Le bouton thème est repoussé à droite (l'ancien nav inline portait flex:1) */
.theme-toggle { margin-left: auto; }
.topbar .login { color: var(--gris); text-decoration: none; font-size: .9rem; }
.topbar .login:hover { color: var(--bleu); }

/* ---- Menu latéral gauche persistant, repliable en rail d'icônes ---- */
.sidebar {
  position: fixed; top: 62px; left: 0; bottom: 0; z-index: 40;
  width: var(--sidebar-w); padding: 14px 10px; display: none;
  background: var(--header); border-right: 1px solid rgba(148, 163, 184, .12);
  overflow-x: hidden; overflow-y: auto;
  transition: width .22s ease;
}
body.connecte .sidebar { display: block; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  color: var(--gris); text-decoration: none; padding: 10px 12px; border-radius: 9px;
  font-weight: 500; font-size: .92rem; border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.sidebar nav a:hover { color: var(--txt-fort); background: rgba(148, 163, 184, .1); }
.sidebar nav a.actif { color: var(--bleu); background: rgba(37, 191, 218, .1); border-color: rgba(37, 191, 218, .25); }
.sidebar nav a .lien-ic { width: 20px; height: 20px; flex: none; }
.sidebar nav a .lien-txt { overflow: hidden; }
/* Sous-menus (structure reprise du menu de l'app d'origine) : tête repliable + enfants indentés. */
.nav-groupe-tete {
  display: flex; align-items: center; gap: 12px; width: 100%; white-space: nowrap;
  color: var(--gris); background: none; border: 1px solid transparent; border-radius: 9px;
  padding: 10px 12px; font-family: inherit; font-weight: 500; font-size: .92rem; cursor: pointer;
  transition: color .15s, background .15s;
}
.nav-groupe-tete:hover { color: var(--txt-fort); background: rgba(148, 163, 184, .1); }
.nav-groupe-tete .lien-ic { width: 20px; height: 20px; flex: none; }
.nav-chevron { width: 16px; height: 16px; margin-left: auto; flex: none; transition: transform .18s ease; }
.nav-groupe.ouvert .nav-chevron { transform: rotate(90deg); }
/* Sous-menu actif : seul le PICTO du groupe parent prend le style « sélectionné » (libellé inchangé),
   y compris quand le groupe est replié — repère visuel de la page courante. */
.nav-groupe.actif-dans > .nav-groupe-tete .lien-ic { color: var(--bleu); }
.sous-menu { display: none; flex-direction: column; gap: 4px; margin: 2px 0; }
.nav-groupe.ouvert .sous-menu { display: flex; }
.sidebar .sous-menu a { padding-left: 34px; }   /* alignement sous le libellé du groupe */
/* État replié : on ne garde que l'icône, centrée (le libellé reste en infobulle via title). */
html[data-sidebar="collapsed"] .sidebar nav a { justify-content: center; padding: 10px; }
html[data-sidebar="collapsed"] .sidebar nav a .lien-txt { display: none; }
/* Rail replié : pas de tête de groupe ; on aplatit les sous-menus en icônes (tout reste accessible). */
html[data-sidebar="collapsed"] .nav-groupe-tete { display: none; }
html[data-sidebar="collapsed"] .sous-menu { display: flex; }
/* Bouton bascule thème clair / sombre */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 1rem; line-height: 1;
  background: transparent; border: 1px solid var(--bord); color: var(--gris);
  transition: color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover { color: var(--bleu); border-color: var(--bleu); background: rgba(37, 191, 218, .08); }

/* Conteneur de page (#app). Ciblé par id et NON par la balise `main`, car la saisie
   imbrique un <main class="cmd-main"> qui ne doit pas hériter de ce padding/max-width/
   marge (sinon sa carte « Informations » se décale de 28px sous le panneau Documents). */
#app { padding: 28px 24px; max-width: 1500px; margin-left: 0; transition: margin-left .22s ease; }
body.connecte #app { margin-left: var(--sidebar-w); }
h1 { font-size: 1.6rem; margin: 0 0 18px; font-weight: 700; color: var(--txt-fort); }
.muted { color: var(--gris); }
/* Base sombre pour TOUS les contrôles (y compris ceux dans les tables : saisie, règlements) */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: var(--field); color: var(--txt); border: 1px solid var(--bord);
  border-radius: 10px; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):hover, select:hover, textarea:hover { border-color: var(--bord-hover); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(37, 191, 218, .6); box-shadow: 0 0 0 3px rgba(37, 191, 218, .15);
}
input::placeholder, textarea::placeholder { color: var(--gris-2); }
.erreur {
  background: rgba(248, 113, 113, .1); color: var(--rouge); padding: 12px 16px;
  border-radius: 12px; border: 1px solid rgba(248, 113, 113, .35);
}

/* ---- Barre d'outils de table (carte de verre) ---- */
.tbl-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px;
  background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--bord-soft);
  border-radius: 16px; padding: 14px 16px;
}
.tbl-toolbar input, .tbl-toolbar select {
  padding: 9px 13px; border: 1px solid var(--bord); border-radius: 10px; font-size: .9rem;
  background: var(--field); color: var(--txt);
}
.tbl-toolbar input::placeholder { color: var(--gris-2); }
.tbl-toolbar input[type=search] { min-width: 240px; flex: 1; }
.tbl-toolbar .spacer { flex: 1; }
.tbl-count { color: var(--gris); font-size: .85rem; }

/* ---- Table (carte de verre) ---- */
table.grid {
  width: 100%; border-collapse: collapse; background: var(--card); backdrop-filter: blur(12px);
  border: 1px solid var(--bord-soft); border-radius: 16px; overflow: hidden; box-shadow: var(--ombre-carte);
}
table.grid th, table.grid td {
  padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--bord-line); font-size: .9rem;
}
table.grid th {
  background: var(--th-bg); color: var(--gris); font-weight: 600;
  user-select: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
}
table.grid th.sortable { cursor: pointer; }
table.grid th.sortable:hover { color: var(--bleu); }
table.grid th.sortable::after { content: " ⇅"; opacity: .4; }
table.grid th.asc::after { content: " ▲"; opacity: 1; }
table.grid th.desc::after { content: " ▼"; opacity: 1; }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr { transition: background .15s, transform .15s, box-shadow .15s; }
/* Survol « moderne » : la ligne se décale d'1 px vers le haut, soulignée d'une ombre discrète. */
table.grid tbody tr:hover {
  background: var(--card-2); transform: translateY(-1px);
  position: relative; z-index: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
}
table.grid tbody tr.clic { cursor: pointer; }
/* Montant monétaire : prix + symbole TOUJOURS sur une seule ligne (jamais coupés). */
td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--txt-fort); font-weight: 600; white-space: nowrap; }
th.num { text-align: right; }
/* Colonne de sélection (actions par lot) */
.col-sel { width: 1%; text-align: center; white-space: nowrap; }
.col-sel input { width: 16px; height: 16px; accent-color: var(--bleu); cursor: pointer; }
/* Barre d'action par lot (apparaît dès qu'une ligne est sélectionnée) */
.lot-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }

/* ---- Pagination ---- */
.pager { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.pager button {
  padding: 8px 14px; border: 1px solid var(--bord); background: var(--card-solid); color: var(--txt);
  border-radius: 10px; cursor: pointer; font-size: .88rem; transition: border-color .15s, color .15s;
}
.pager button:hover:not(:disabled) { border-color: var(--bleu); color: var(--bleu); }
.pager button:disabled { opacity: .4; cursor: default; }
.page-info { color: var(--gris); font-size: .85rem; }

/* ---- Tableau de bord ---- */
.cards { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.card {
  background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--bord-soft);
  border-radius: 18px; padding: 20px 22px; min-width: 180px; flex: 1; box-shadow: var(--ombre-carte);
}
.card-val { font-size: 1.8rem; font-weight: 800; color: var(--bleu); font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -.02em; }
.card-lbl { color: var(--gris); font-size: .85rem; margin-top: 4px; }
.card-sub { color: var(--orange); font-size: .8rem; margin-top: 2px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }

.bar-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.bar-lbl { min-width: 170px; font-size: .85rem; }
.bar-lbl.mois { min-width: 44px; color: var(--gris); }
.bar { flex: 1; background: var(--bar-bg); border-radius: 7px; height: 14px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--orange); border-radius: 7px; }
.bar-fill.bleu { background: var(--bleu); }
.bar-val { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem; }

/* ---- Plans (onglets) du pilotage ---- */
.plans { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.plan-btn {
  padding: 8px 16px; border: 1px solid var(--bord); background: var(--card-solid); color: var(--gris);
  border-radius: 20px; cursor: pointer; font-size: .88rem; transition: all .15s;
}
.plan-btn:hover { border-color: var(--bleu); color: var(--bleu); }
.plan-btn.actif { background: var(--bleu); color: var(--on-accent); border-color: var(--bleu); font-weight: 600; box-shadow: 0 0 16px rgba(37, 191, 218, .3); }

/* ---- Pilotage : cellules riches (catégories en badges espacés, lignes alignées colonne à colonne) ---- */
.pil-cats { display: flex; flex-wrap: wrap; gap: 5px 7px; }
.pil-lignes > div { line-height: 1.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }

/* ---- Badges de statut (pastille + pilule colorée) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 20px;
  font-size: .76rem; font-weight: 600; border: 1px solid transparent;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.gris   { background: rgba(148, 163, 184, .12); color: var(--gris); border-color: rgba(148, 163, 184, .2); }
.badge.bleu   { background: rgba(96, 165, 250, .12); color: var(--bleu-statut); border-color: rgba(96, 165, 250, .25); }
.badge.cyan   { background: rgba(37, 191, 218, .12); color: var(--bleu); border-color: rgba(37, 191, 218, .25); }
.badge.vert   { background: rgba(52, 211, 153, .12); color: var(--vert); border-color: rgba(52, 211, 153, .25); }
.badge.orange { background: rgba(247, 152, 50, .12); color: var(--orange); border-color: rgba(247, 152, 50, .25); }
.badge.ambre  { background: rgba(251, 191, 36, .12); color: var(--ambre); border-color: rgba(251, 191, 36, .25); }
.badge.violet { background: rgba(192, 132, 252, .12); color: var(--violet); border-color: rgba(192, 132, 252, .25); }

/* Pastille de couleur d'une catégorie (liste Catégories) */
.pastille-couleur {
  display: inline-block; width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid rgba(148, 163, 184, .35); vertical-align: middle;
}

/* ---- Entête de page avec action ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.page-head h1 { margin: 0; }

/* ---- Boutons ---- */
.btn-primary {
  background: var(--bleu); color: var(--on-accent); border: none; padding: 10px 18px; border-radius: 11px;
  cursor: pointer; font-size: .9rem; font-weight: 700; transition: filter .15s, box-shadow .15s, transform .1s;
  box-shadow: 0 8px 20px -8px rgba(37, 191, 218, .5);
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 18px rgba(37, 191, 218, .4); }
.btn-primary:active { transform: scale(.98); }
a.btn-primary { text-decoration: none; display: inline-block; }
.btn-primary:disabled { opacity: .55; cursor: default; box-shadow: none; filter: none; }
.btn-danger {
  background: transparent; color: var(--rose); border: 1px solid var(--rose); padding: 10px 18px;
  border-radius: 11px; cursor: pointer; font-size: .9rem; font-weight: 600;
}
.btn-danger:hover { background: rgba(195, 42, 130, .12); }

/* ---- Formulaire ---- */
.form { max-width: 640px; }
.form-row { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: .82rem; color: var(--gris); font-weight: 600; }
.form-row input, .form-row select, .form-row textarea {
  padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; font-size: .92rem;
  background: var(--field); color: var(--txt);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus,
.tbl-toolbar input:focus, .tbl-toolbar select:focus {
  outline: none; border-color: rgba(37, 191, 218, .6); box-shadow: 0 0 0 3px rgba(37, 191, 218, .15);
}
.form-row textarea { min-height: 70px; resize: vertical; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check input { width: 18px; height: 18px; accent-color: var(--bleu); }
.form-check label { order: 2; }

/* ---- Interrupteur booléen circulaire (style « bouton power », adapté à la charte) ----
   Markup : <label class="toggle-bool"><input type="checkbox" …>
              <span class="toggle-knob" data-on="OUI" data-off="NON"></span></label>
   Le JS lit toujours input.checked. Anneau var(--vert) = actif / var(--rouge) = inactif
   (les deux suivent le thème). Disque clair en relief (signature, identique clair/sombre),
   libellés pilotés par data-on / data-off. Combinateur de frère (pas de :has) pour l'état. */
.toggle-bool { display: inline-flex; vertical-align: middle; cursor: pointer; }
.toggle-bool input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-knob {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 3px solid var(--rouge);
  background: radial-gradient(circle at 50% 35%, #ffffff, #e9edf3 70%, #d8dee8);
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, .05), 0 3px 6px rgba(2, 6, 23, .30),
              inset 0 1px 2px rgba(255, 255, 255, .9);
  transition: border-color .18s, box-shadow .18s, transform .1s;
}
.toggle-knob::after {
  content: attr(data-off);
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; color: #475569;
}
.toggle-bool input:checked ~ .toggle-knob { border-color: var(--vert); }
.toggle-bool input:checked ~ .toggle-knob::after { content: attr(data-on); }
.toggle-bool:hover .toggle-knob { transform: translateY(-1px); }
.toggle-bool:active .toggle-knob { transform: translateY(0); }
.toggle-bool input:focus-visible ~ .toggle-knob {
  box-shadow: 0 0 0 3px rgba(37, 191, 218, .45), 0 3px 6px rgba(2, 6, 23, .30);
}

/* Interrupteur COULISSANT (piste + bouton glissant). Markup :
   <label class="bascule"><input type="checkbox" …><span class="bascule-piste"></span></label>
   Le JS lit toujours input.checked. Piste var(--vert) = actif / var(--bord) = inactif. */
.bascule { position: relative; display: inline-flex; vertical-align: middle; cursor: pointer; }
.bascule input { position: absolute; opacity: 0; width: 0; height: 0; }
.bascule-piste {
  position: relative; width: 42px; height: 22px; border-radius: 22px; flex: none;
  background: var(--bord); border: 1px solid var(--bord-hover);
  transition: background .18s, border-color .18s;
}
.bascule-piste::after {                 /* le bouton qui coulisse */
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(2, 6, 23, .4);
  transition: transform .18s;
}
.bascule input:checked ~ .bascule-piste { background: var(--vert); border-color: var(--vert); }
.bascule input:checked ~ .bascule-piste::after { transform: translateX(20px); }
.bascule:hover .bascule-piste { border-color: var(--bord-hover); }
.bascule input:focus-visible ~ .bascule-piste { box-shadow: 0 0 0 3px rgba(37, 191, 218, .4); }

.form-err { color: var(--rouge); font-size: .8rem; min-height: 1em; }
.form-aide { color: var(--gris); font-size: .8rem; }
/* Saisie assistée (autocomplete) */
.ac-list {
  position: fixed; z-index: 1000; list-style: none; margin: 0; padding: 5px 0;
  background: var(--card-solid); border: 1px solid var(--bord); border-radius: 12px;
  max-height: 240px; overflow: auto; box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.ac-list li { padding: 7px 13px; cursor: pointer; font-size: .9rem; white-space: nowrap; color: var(--txt); }
.ac-list li:hover, .ac-list li.actif { background: var(--bleu); color: var(--on-accent); }
/* Cible l'attribut `readonly` (vrais champs verrouillés), PAS la pseudo-classe `:read-only`
   qui matche aussi color/checkbox/radio/range (types sans readonly) → faux « sens interdit ». */
.form-row input[readonly] { opacity: .6; cursor: not-allowed; }
.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.form-msg { font-size: .88rem; color: var(--gris); } .form-msg.err { color: var(--rouge); }
input[type=checkbox] { accent-color: var(--bleu); }

/* ---- Écran de connexion ---- */
.login-card {
  max-width: 380px; margin: 8vh auto 0; padding: 30px 30px 26px;
  background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--bord-soft); border-radius: 18px;
  box-shadow: var(--ombre-carte);
}
.login-card h1 { margin: 0 0 4px; }
.login-card .muted { margin: 0 0 18px; }
.login-card .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.login-card .form-actions { margin-top: 18px; }

/* ---- Saisie : étape + ligne d'article ---- */
.ligne-etape { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.ligne-etape .form-row { margin-bottom: 0; }
.btn-x {
  background: transparent; color: var(--rose); border: 1px solid var(--bord); border-radius: 9px;
  cursor: pointer; padding: 5px 10px; font-weight: 600;
}
.btn-x:hover { background: rgba(195, 42, 130, .12); border-color: var(--rose); }
.btn-mat {
  background: transparent; color: var(--bleu); border: 1px solid var(--bord); border-radius: 9px;
  cursor: pointer; padding: 5px 9px; font-weight: 600;
}
.btn-mat:hover { background: rgba(38, 110, 196, .12); border-color: var(--bleu); }
.a-mat-row > td { padding: 0 !important; }
table.grid tfoot td { background: var(--card-2); border-bottom: none; }

/* ---- Fiche détail (carte de verre) ---- */
.fiche {
  background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--bord-soft);
  border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--ombre-carte);
}
.fiche h2 { margin: 0 0 16px; font-size: 1.1rem; font-weight: 700; color: var(--txt-fort); }
.fiche table.grid { box-shadow: none; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 18px; }
.kv div { font-size: .9rem; } .kv b { color: var(--gris); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.retour { display: inline-block; margin-bottom: 14px; color: var(--bleu); text-decoration: none; font-size: .9rem; }
.retour:hover { text-decoration: underline; }

/* Grille de cases à cocher (droits / groupes / fonctions — administration) */
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.chk input { width: 17px; height: 17px; }

/* Bouton générique + lien tabulaire + message de succès */
.btn {
  padding: 8px 15px; border: 1px solid var(--bord); background: var(--card-solid); color: var(--txt);
  border-radius: 10px; font-size: .88rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.btn:hover { border-color: var(--bleu); color: var(--bleu); }
.lien { color: var(--bleu); cursor: pointer; }
.lien:hover { text-decoration: underline; }
.form-msg.ok { color: var(--vert); }

/* Pilotage des expéditions : barre de filtres, blocs par coursier, jauge, switch */
.barre-filtres {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); backdrop-filter: blur(12px); border: 1px solid var(--bord-soft);
  border-radius: 16px; padding: 14px 16px; margin-bottom: 18px;
}
.barre-filtres label { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--gris); }
.barre-filtres input[type="date"] { width: auto; }
.bloc { margin-bottom: 16px; }
.bloc-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.bloc-tete h2 { margin: 0; flex: 0 0 auto; }
.zone-non-affectees { border-left: 3px solid var(--orange); }
.zone-coursier { border-left: 3px solid var(--bleu); }
.jauge {
  flex: 1 1 auto; min-width: 60px; height: 8px; border-radius: 6px;
  background: var(--bar-bg); overflow: hidden;
}
.jauge-rem { display: block; height: 100%; background: var(--vert); }
.switch { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: .8rem; color: var(--gris); }
.switch input { width: 16px; height: 16px; }
.avert { border-left: 3px solid var(--orange); color: var(--txt); font-size: .92rem; }
.coursiers-vides { font-size: .85rem; padding: 10px 14px; }
/* « Ramassage demandé » dans la tournée d'un coursier (RG-RAMASS-04) : encart d'alerte ambre. */
.ramassages-mention { margin-top: 10px; padding: 8px 12px; font-size: .88rem; border-left: 3px solid var(--ambre); border-radius: 4px; }

/* ---- Factures (liste) : entête à pastille, montants sémantiques, badge avoir ---- */
.liste-tete { margin-bottom: 20px; }
.liste-tete h1 { margin: 0; }
.count-pill {
  font-size: .72rem; font-weight: 500; color: var(--gris); vertical-align: middle; margin-left: 8px;
  background: rgba(148, 163, 184, .1); border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 20px; padding: 3px 10px;
}
.page-sub { color: var(--gris-2); font-size: .82rem; margin: 5px 0 0; }

/* Nuances de montants en table (spans posés dans une cellule td.num) :
   la maquette atténue la TVA, met en avant le TTC, colore les avoirs en rouge
   et le solde dû en ambre. Chaque span porte sa couleur (prioritaire sur td.num). */
.mt-base   { color: var(--txt); font-weight: 400; }       /* HT — neutre */
.mt-faible { color: var(--gris-2); font-weight: 400; }    /* TVA — estompée */
.mt-fort   { color: var(--txt-fort); font-weight: 600; }  /* TTC — mis en avant */
.mt-neg    { color: var(--rouge); font-weight: 600; }     /* avoir / montant négatif */
.mt-du     { color: var(--ambre); font-weight: 700; }     /* solde dû (> 0) */
.mt-nul    { color: var(--gris-2); font-weight: 400; }    /* solde nul — muet */

/* N° de facture : cyan si « active » (impayée, non avoir), grisé sinon */
.num-actif   { color: var(--bleu); font-weight: 600; }
.num-inactif { color: var(--gris); font-weight: 600; }

/* Colonne centrée (statut de facture) */
td.center, th.center { text-align: center; }

/* Badge « Avoir » : carré neutre, sans pastille (vs les pilules de statut) */
.badge.avoir { border-radius: 7px; background: rgba(148, 163, 184, .1); color: var(--gris); border-color: rgba(148, 163, 184, .25); }
.badge.avoir::before { display: none; }

/* ---- GED : documents de commande (équivalent WinDev « Liste Image ») ---- */
.docs-dropzone {
  border: 1.5px dashed var(--bord-hover); border-radius: 14px; padding: 18px 20px;
  text-align: center; cursor: pointer; margin-bottom: 14px;
  background: var(--field); transition: border-color .15s, background .15s;
}
.docs-dropzone:hover { border-color: var(--bleu); }
.docs-dropzone.survol { border-color: var(--bleu); background: rgba(37, 191, 218, .08); }
.docs-dz-txt { font-size: .92rem; color: var(--txt); margin-bottom: 4px; }
.docs-toolbar { display: flex; gap: 8px; margin: 8px 0 10px; }
.docs-msg { display: block; min-height: 1em; margin-bottom: 10px; }

/* Galerie d'aperçus INLINE : chaque document est rendu visible dans le formulaire
   (image en <img>, PDF en <iframe>) — fidèle au panneau « Documents » de l'existant WinDev. */
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.doc-bloc {
  display: flex; flex-direction: column;
  background: var(--card-solid); border: 1px solid var(--bord-soft); border-radius: 14px;
  overflow: hidden; box-shadow: var(--ombre-carte);
}
.doc-apercu-cadre {
  height: 300px; background: #0b0f1a; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-bottom: 1px solid var(--bord-line);
}
.doc-apercu { display: block; }
.doc-apercu-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.doc-apercu-pdf { width: 100%; height: 100%; border: none; background: #fff; }
.doc-apercu-vide { color: var(--gris); text-align: center; font-size: .9rem; line-height: 1.8; padding: 16px; }
.doc-pied { display: flex; align-items: center; gap: 10px; padding: 9px 12px; flex-wrap: wrap; }
.doc-pied .doc-nom { flex: 1 1 120px; min-width: 0; }
.doc-nom { font-size: .84rem; font-weight: 600; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-badge {
  font-size: .66rem; font-weight: 600; color: var(--violet); padding: 2px 7px; border-radius: 6px;
  background: rgba(192, 132, 252, .12); border: 1px solid rgba(192, 132, 252, .25);
}
.doc-actions { display: flex; gap: 5px; }
.btn-mini {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 8px; cursor: pointer; font-size: .85rem; text-decoration: none;
  background: var(--field); color: var(--gris); border: 1px solid var(--bord);
}
.btn-mini:hover { background: var(--bleu); color: var(--on-accent); border-color: var(--bleu); }
.btn-mini.doc-suppr:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
/* Variante ÉTIQUETÉE de .btn-mini (libellé + picto) : s'adapte au contenu au lieu du carré 28px. */
.btn-mini.docs-fiche { width: auto; height: auto; padding: 6px 12px; gap: 6px; font-weight: 600; }

/* Visionneuse modale (image / PDF) */
.viewer-overlay {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 6, 15, .78); backdrop-filter: blur(4px); padding: 28px;
}
.viewer-box {
  display: flex; flex-direction: column; width: min(1000px, 95vw); height: min(88vh, 100%);
  background: var(--card-solid); border: 1px solid var(--bord-soft); border-radius: 16px;
  overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
}
.viewer-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--bord-line); background: var(--th-bg);
}
.viewer-nom { font-weight: 700; color: var(--txt-fort); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-actions { display: flex; gap: 8px; flex: none; }
.viewer-corps { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #0b0f1a; overflow: auto; }
.viewer-media { display: block; }
img.viewer-media { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer-pdf { width: 100%; height: 100%; border: none; }
.viewer-vide { color: var(--gris); text-align: center; padding: 30px; line-height: 2.4; }

/* ============================================================================
   SAISIE DE COMMANDE — refonte (structure inspirée de la maquette « CommandeForm »,
   rendue avec la charte glass + thème clair/sombre). Layout 2 colonnes, barre
   d'action collante avec total, cartes denses à liseré coloré par section.
   ========================================================================== */
/* Barre d'action / résumé (sous la topbar globale, h=62px) */
.cmd-bar {
  display: flex; align-items: center; gap: 12px; position: sticky; top: 62px; z-index: 20;
  background: var(--card); backdrop-filter: blur(14px);
  border: 1px solid var(--bord-soft); border-radius: 12px;
  padding: 9px 14px; margin-bottom: 14px; box-shadow: var(--ombre-carte);
}
.cmd-bar .retour { margin: 0; line-height: 1; font-size: 1.05rem; }
.cmd-fil { display: flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--gris); min-width: 0; }
.cmd-fil-sec { color: var(--gris); } .cmd-fil-sep { color: var(--gris-2); }
.cmd-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: .82rem;
  color: var(--bleu); background: rgba(37, 191, 218, .12); padding: 2px 8px; border-radius: 5px;
}
.cmd-client { color: var(--txt); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-spacer { flex: 1; min-width: 8px; }
.cmd-totaux { display: flex; align-items: baseline; gap: 6px; font-size: .78rem; color: var(--gris); white-space: nowrap; }
.cmd-totaux b { font-family: ui-monospace, monospace; font-size: .98rem; color: var(--txt-fort); font-weight: 700; }
.cmd-bar .btn-primary { padding: 8px 16px; }
.cmd-bar .form-msg { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Grille 2 colonnes : formulaire + panneau Documents large et collant.
   align-items/align-self: start → le panneau Documents démarre au même bord
   haut que « Informations de commande » (jamais centré ni repoussé en bas). */
.cmd-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 560px); gap: 14px; align-items: start; }
.cmd-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* PAS de position: sticky : le panneau Documents défile avec le formulaire et garde
   son bord haut aligné sur « Informations de commande » pendant tout le défilement. */
.cmd-aside { display: flex; flex-direction: column; gap: 12px; }
/* Sous 1200px on empile : le panneau Documents passe alors en pleine largeur (encore plus lisible). */
@media (max-width: 1200px) {
  .cmd-grid { grid-template-columns: 1fr; }
}

/* Carte de section (verre + liseré coloré --accent) */
.carte {
  background: var(--card); backdrop-filter: blur(12px);
  border: 1px solid var(--bord-soft); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre-carte);
}
.carte-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--bord-line);
  border-left: 3px solid var(--accent, var(--bleu));
}
.carte-titre { display: flex; align-items: center; gap: 7px; color: var(--accent, var(--bleu)); min-width: 0; }
.carte-titre span { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.carte-titre svg { width: 14px; height: 14px; flex: none; }
.carte-add {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--bord); flex: none;
  background: var(--field); color: var(--gris); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; transition: color .12s, border-color .12s;
}
.carte-add:hover { color: var(--accent, var(--bleu)); border-color: var(--accent, var(--bleu)); }
.carte-add svg { width: 14px; height: 14px; }
.carte-corps { padding: 12px 14px; }

/* Champs compacts (carte Informations) */
.champs { display: grid; gap: 12px; }
.champs-info { grid-template-columns: 190px minmax(0, 1fr) 150px 140px auto; align-items: start; }
@media (max-width: 820px) { .champs-info { grid-template-columns: 1fr 1fr; } }
.champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mini { font-size: .67rem; font-weight: 700; color: var(--gris-2); text-transform: uppercase; letter-spacing: .06em; }
.champ input, .champ select { padding: 7px 9px; border-radius: 7px; font-size: .86rem; }
.champ .form-aide { font-size: .72rem; }
.champ input.mono { font-family: ui-monospace, monospace; font-weight: 600; }
.champ input.accent { color: var(--bleu); border-color: rgba(37, 191, 218, .45); background: rgba(37, 191, 218, .07); }
.champ-statut { justify-content: flex-end; }

/* Tables de saisie compactes */
.tbl-wrap { overflow-x: auto; }
.tbl-saisie { width: 100%; border-collapse: collapse; }
.tbl-saisie th {
  text-align: left; padding: 5px 8px; font-size: .64rem; font-weight: 700; color: var(--gris-2);
  text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--bord-line); white-space: nowrap;
}
.tbl-saisie th.num, .tbl-saisie td.num { text-align: right; }
.tbl-saisie td {
  padding: 6px 8px; font-size: .85rem; border-bottom: 1px solid var(--bord-line);
  vertical-align: middle; color: var(--txt);
}
.tbl-saisie tbody tr:last-child td { border-bottom: none; }
.tbl-saisie td.muted { color: var(--gris); white-space: nowrap; font-size: .78rem; }
.tbl-saisie tfoot td { border-top: 1px solid var(--bord-line); border-bottom: none; padding-top: 9px; background: transparent; }
.tbl-saisie input:not([type=checkbox]), .tbl-saisie select { padding: 4px 7px; border-radius: 6px; font-size: .84rem; }
.tbl-saisie .btn-x { padding: 3px 8px; }
/* Réordonnancement des lignes d'articles : poignée de glisser-déposer (⠿). */
.tbl-saisie th.a-drag-cell, .tbl-saisie td.a-drag-cell { width: 1%; text-align: center; padding-left: 2px; padding-right: 2px; }
.a-drag { cursor: grab; color: var(--gris); user-select: none; line-height: 1; display: inline-block; padding: 2px 4px; border-radius: 5px; }
.a-drag:hover { color: var(--txt); background: var(--card-2); }
.a-drag:active { cursor: grabbing; }
.tbl-saisie tr.a-row.a-dragging { opacity: .45; }
.tbl-vide td { color: var(--gris); font-size: .82rem; padding: 10px 8px; text-align: center; }

/* Opérateurs : grille de sélecteurs (pas de tableau) */
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.op-grid:empty::after { content: "Aucun opérateur affecté."; color: var(--gris); font-size: .82rem; }
.op-item { display: flex; flex-direction: column; gap: 4px; }
.op-row { display: flex; gap: 6px; align-items: center; }
.op-row select { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 7px; font-size: .85rem; }

/* Commentaire */
.cmt-zone { width: 100%; min-height: 64px; padding: 9px 11px; border-radius: 8px; font-size: .88rem; resize: vertical; line-height: 1.5; }

/* Panneau Documents large (fidèle à l'écran WinDev d'origine) : aperçus en une
   colonne, hauts comme une page — lisibles sans zoomer ni ouvrir ailleurs. */
.cmd-aside .docs-grid { grid-template-columns: 1fr; gap: 12px; }
.cmd-aside .doc-apercu-cadre { height: min(800px, calc(100vh - 300px)); }
.cmd-aside .docs-dropzone { padding: 14px 12px; }
.cmd-aside .carte-corps { padding: 10px 12px; }

/* ============================================================================
   STATISTIQUES — tableau croisé dynamique (pivot). Hiérarchies lignes + colonnes
   repliables ; cellule double (montant € + quantité). Charte verre/thème conservée.
   ========================================================================== */
.pv-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pv-select { padding: 8px 12px; border-radius: 9px; font-size: .9rem; font-weight: 600; min-width: 280px; }
.pv-mode { display: inline-flex; border: 1px solid var(--bord); border-radius: 9px; overflow: hidden; }
.pv-mode button {
  border: none; background: transparent; color: var(--gris); padding: 8px 16px; cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 600; transition: color .12s, background .12s;
}
.pv-mode button + button { border-left: 1px solid var(--bord); }
.pv-mode button:hover { color: var(--txt-fort); background: rgba(148, 163, 184, .1); }
.pv-mode button.actif { background: var(--bleu); color: var(--on-accent); }
.pv-diag { font-size: .8rem; }

.pv-scroll { overflow: auto; max-height: 76vh; border: 1px solid var(--bord-soft); border-radius: 12px; }
.pv-table { border-collapse: separate; border-spacing: 0; font-size: .82rem; white-space: nowrap; }
.pv-table th, .pv-table td { border-bottom: 1px solid var(--bord-line); border-right: 1px solid var(--bord-line); padding: 5px 10px; }
/* En-têtes de colonnes (collants en haut) */
.pv-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--header); color: var(--gris-2);
  font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; text-align: center;
}
.pv-ch.pv-pliable { cursor: pointer; user-select: none; }
.pv-ch.pv-pliable:hover { color: var(--bleu); }
.pv-total-h { text-align: right; color: var(--bleu); }
/* Coin + en-têtes de lignes (collants à gauche) */
.pv-coin, .pv-rh { position: sticky; left: 0; z-index: 1; background: var(--card-solid); text-align: left; }
.pv-coin { z-index: 3; color: var(--gris-2); font-weight: 700; font-size: .72rem; text-transform: uppercase; }
.pv-rh { font-weight: 600; color: var(--txt); padding-left: calc(10px + var(--ind, 0) * 16px); }
.pv-r[class*="pv-l0"] .pv-rh { font-weight: 700; color: var(--txt-fort); }
.pv-rh[data-row] { cursor: pointer; }
.pv-rh[data-row]:hover { color: var(--bleu); }
.pv-tog { display: inline-block; width: 1em; color: var(--bleu); font-size: .8em; }
.pv-tog.pv-vide { color: transparent; }
.pv-lbl { }
/* Cellules valeurs : montant € (gras) + quantité (atténuée) alignés à droite */
.pv-cell { text-align: right; font-variant-numeric: tabular-nums; }
.pv-m { color: var(--txt-fort); font-weight: 600; }
.pv-q { color: var(--gris); font-size: .72rem; margin-top: 1px; }
.pv-cell.pv-total { background: rgba(37, 191, 218, .06); }
.pv-cell.pv-total .pv-m { color: var(--bleu); }
.pv-table tbody tr:hover td, .pv-table tbody tr:hover .pv-rh { background: rgba(148, 163, 184, .07); }
/* Total général (pied collant en bas) — fond OPAQUE obligatoire (cellules collantes :
   sinon les données défilent par transparence derrière). On neutralise le fond
   semi-transparent de la colonne Total (.pv-cell.pv-total) sur ce pied. */
.pv-grand th, .pv-grand td { position: sticky; bottom: 0; background: var(--header); border-top: 2px solid var(--bord); font-weight: 800; }
.pv-grand td.pv-total { background: var(--header); }
.pv-grand .pv-m { color: var(--txt-fort); }