/* ==========================================================================
   Officina — l'application unifiée.

   Design Vercolorz (docs/design/vercolorz/COMPARAISON.md) : fond clair, une
   seule couleur d'accent (celle de la pharmacie), Public Sans, contrastes AA.
   Rien n'est écrit en dur. Rubriques, onglets, badges et contenus viennent
   du serveur, filtrés par les droits du rôle et les options de l'officine.
   ========================================================================== */

/* Un élément masqué (attribut hidden) l'est toujours, quel que soit son style d'affichage. */
[hidden] { display: none !important; }

:root {
  /* Couleurs et polices : /commun/theme.css, communes aux quatre écrans. */
  --r: var(--r-carte);
  --ombre: var(--ombre-carte);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  color: var(--encre); font-size: 14px; line-height: 1.45;
  /* Un fond uni, comme un logiciel d'officine : le contenu ressort, rien ne distrait. */
  background: var(--fond);
}
.mono { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; }
.n { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; }

/* --- Coque ---------------------------------------------------------------- */

.app { display: grid; grid-template-columns: 248px 1fr; height: 100vh; overflow: hidden; }

.side {
  /* La barre de navigation : nuit profonde à la couleur de la pharmacie, un halo
     en haut à gauche — c'est elle qui donne son caractère à l'application. */
  /* La couleur du menu se règle par officine (Identité de l'officine → Couleur du menu) ;
     vert forêt par défaut. Une couleur claire passe le menu en version claire (data-menu="clair"). */
  background: var(--menu-fond, linear-gradient(170deg, #166534 0%, #0B3D1E 100%));
  color: rgba(255, 255, 255, .86);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 4px 8px; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 12px; background: var(--degrade);
  color: #fff; display: grid; place-items: center; font-size: 18px; font-weight: 800;
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--eclat) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.brand .t { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: -.01em; }
.brand .s { font-size: 12px; color: rgba(255, 255, 255, .8); }
.brand-tx { min-width: 0; flex: 1; }
/* Plusieurs officines : on passe de l'une à l'autre d'ici. */
.choix-officine { display: block; width: 100%; margin-top: 6px; padding: 6px 8px; min-height: 34px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 9px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; }
.choix-officine option { color: var(--encre); background: var(--carte); }
.choix-officine[hidden] { display: none; }

/* Premier niveau : les sept rubriques, et rien d'autre. Le compteur d'écrans
   annonce ce qu'on trouvera derrière, la pastille ce qui y réclame une action. */
.nav { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.nav a {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: 10px; position: relative;
  color: rgba(255, 255, 255, .86); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--vite), color var(--vite);
}
/* Titres de famille (Gestion, Finances) : ordinateur seulement. */
.nav .titre-groupe { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); padding: 14px 10px 6px; }
.nav .titre-groupe.filet { padding: 0; height: 1px; margin: 12px 10px 8px; background: rgba(255, 255, 255, .14); }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a .ic { width: 20px; text-align: center; font-size: 18px; display: inline-flex; justify-content: center; }
.nav a .ic { flex-shrink: 0; }
/* Le texte cède la place : la pastille reste entière, la description s'abrège. */
.nav a .tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.nav a .tx small { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .8); overflow: hidden; text-overflow: ellipsis; }
/* La description de la rubrique reste dans l'infobulle : une ligne par entrée, comme la maquette. */
.nav a .tx small { display: none; }
.nav a.on { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.nav a.on::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent-500); }
.nav a.on .tx small { color: rgba(255, 255, 255, .8); }
.nav a .badge {
  margin-left: auto; flex-shrink: 0; min-width: 20px; height: 18px; box-sizing: border-box;
  display: inline-grid; place-items: center; padding: 0 6px; border-radius: 999px;
  background: var(--crit-point); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; box-shadow: none;
}


/* --- Zone principale ------------------------------------------------------ */

.main { display: flex; flex-direction: column; overflow: hidden; }

.top {
  display: flex; align-items: center; gap: 16px; min-height: 72px;
  padding: 12px 28px; border-bottom: 1px solid var(--filet);
  /* Verre dépoli : le fond coloré transparaît à peine. */
  background: color-mix(in srgb, var(--carte) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  /* Le verre dépoli isole l'en-tête : sans ce rang, les propositions de la recherche passaient sous la page. */
  position: relative; z-index: 40;
}
.top h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 4px; min-width: 0; }
/* Le bloc du titre prend la place libre ; titre et sous-titre tiennent sur
   une ligne chacun (le texte entier reste dans l'infobulle). */
.top > div:has(> h1) { flex: 1 1 auto; min-width: 0; }
/* Le titre d'abord : sur un écran de 1280 à 1500 px, « Tableau de bord » se coupait en deux
   lignes faute de place. Le compte se resserre (ses initiales ; le nom et le rôle au survol)
   et le titre garde de quoi tenir sur une ligne. */
@media (min-width: 900px) { .top > div:has(> h1) { min-width: min(380px, 34%); } }
@media (min-width: 900px) and (max-width: 1499px) { .top .who > div:not(.av) { display: none; } }
/* Le titre d'abord : il garde de quoi tenir sur une ligne (« Tableau de bord » coupé en deux
   lignes faute de place) ; c'est la recherche qui se resserre. */
/* Un titre ne se coupe jamais en « … » : trop long, il passe sur une deuxième
   ligne (« États financiers SYSCOHADA » doit se lire en entier). */
.top h1 #titre { min-width: 0; line-height: 1.2; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.top h1 .aide-ecran, .top h1 .ia-ecran-boutons { flex: none; }
/* « ← Retour » : une étape en arrière, à la place où on l'avait laissée. */
.retour-ecran { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 11px;
  border: 1px solid var(--filet); background: var(--carte); color: var(--encre, inherit); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
  max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.retour-ecran:hover, .retour-ecran:focus-visible { background: var(--sous-carte); outline: 2px solid var(--accent-500); outline-offset: 1px; }
.retour-ecran[hidden] { display: none; }
.retour-ecran .lib { overflow: hidden; text-overflow: ellipsis; }
.top .sub { font-size: 13px; color: var(--encre-douce); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .grow { flex: 0 0 0; }
.top .search {
  display: flex; align-items: center; gap: 8px; background: var(--sous-carte); border: 1px solid var(--filet);
  border-radius: var(--r-champ); padding: 0 12px; height: 40px; font-size: 13.5px; color: var(--muet); width: 280px; flex: 0 1 280px; min-width: 150px;
}
/* Les propositions de la recherche : écrans, produits, clients, aide. */
.top .search { position: relative; }
.rech-liste { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow-y: auto; z-index: 60;
  background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 6px; }
.rech-liste[hidden] { display: none; }
.rech-titre { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-700); padding: 8px 10px 4px; }
.rech-choix { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 8px 10px; min-height: 40px; font: inherit; color: var(--encre); cursor: pointer; }
.rech-choix b { display: block; font-size: 14px; font-weight: 600; }
.rech-choix small { display: block; font-size: 12px; color: var(--encre-douce); margin-top: 1px; }
.rech-choix:hover, .rech-choix.on { background: var(--accent-50, var(--sous-carte)); }
.top .who { display: flex; align-items: center; gap: 9px; }
.top .av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--degrade); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; box-shadow: var(--lueur);
}
.top .who .nm { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.top .who .rl { font-size: 12px; color: var(--encre-douce); }

/* Second niveau : les écrans de la rubrique ouverte. Ils ne sont visibles
   qu'une fois qu'on y est — trois à huit à la fois, lisibles d'un coup d'œil. */
.onglets {
  display: flex; align-items: center; gap: 4px; padding: 12px 28px 0;
  background: transparent;
  /* Une rubrique à onze onglets (Stock) ne tient pas toujours : on fait défiler
     la barre plutôt que de cacher les derniers. */
  overflow-x: auto; scrollbar-width: none;
}
.onglets::-webkit-scrollbar, .sous-onglets::-webkit-scrollbar, .nav::-webkit-scrollbar { display: none; }
.onglets a {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; flex: none;
  font-size: 13px; font-weight: 600; color: var(--encre-douce); text-decoration: none; white-space: nowrap;
}
.onglets a.lien-app::after { content: " ↗"; opacity: .6; }
/* Le menu « Plus » : les onglets qui ne tiennent pas sur la ligne. */
.onglets .plus { position: relative; flex: none; }
.onglets .plus > button { height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--encre-douce); cursor: pointer; }
.onglets .plus > button:hover, .onglets .plus > button[aria-expanded="true"] { color: var(--encre); background: rgba(255,255,255,.6); }
.onglets .plus > button.on { color: var(--accent-700); background: var(--accent-50); }
.onglets .plus .menu { position: fixed; z-index: 60; min-width: 220px; margin-top: 6px; padding: 6px; background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; box-shadow: 0 12px 32px rgba(27,31,59,.14); }
.onglets .plus .menu[hidden] { display: none; }
.onglets .plus .menu a { height: 36px; width: 100%; border-radius: 8px; }
.onglets .plus .menu a:hover { background: var(--accent-50); color: var(--accent-700); }
.onglets .plus .menu a.on { background: var(--accent-50); color: var(--accent-700); box-shadow: none; }
.onglets a:hover { color: var(--encre); background: rgba(255,255,255,.6); }
.onglets a.on { color: var(--accent-700); font-weight: 700; background: var(--carte); box-shadow: var(--ombre), inset 0 -2px 0 var(--accent-500); }
/* Sous-onglets : les écrans rangés sous l'onglet ouvert. */
.sous-onglets { display: flex; gap: 6px; padding: 10px 28px 0; background: transparent; overflow-x: auto; scrollbar-width: none; }
.sous-onglets[hidden] { display: none; }
.sous-onglets a { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-puce); font-size: 13px; font-weight: 600; color: var(--encre-douce); text-decoration: none; white-space: nowrap; cursor: pointer; background: var(--carte); border: 1px solid var(--filet); }
.sous-onglets a.on { background: var(--degrade); border-color: transparent; color: #fff; box-shadow: var(--lueur); }
.sous-onglets a:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
/* Les écrans d'une famille (Caisses → Encaissements · Mobile money…) : un sélecteur discret au bout de la rangée. */
.so-volets { display: inline-flex; flex: none; align-items: center; gap: 2px; margin-left: 10px; padding: 3px; border-radius: var(--r-puce); background: var(--sous-carte); border: 1px solid var(--filet); }
.so-volets button { height: 26px; padding: 0 11px; border: none; border-radius: var(--r-puce); background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--encre-douce); white-space: nowrap; cursor: pointer; }
.so-volets button.on { background: var(--carte); color: var(--accent-700); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.so-volets button:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 1px; }
.onglets a .pt {
  background: var(--crit-bg); color: var(--crit-fg); font-size: 12px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-puce);
}

.body { padding: 20px 28px 96px; overflow: hidden; flex: 1; } /* en bas : la place de la bulle d'Ada */
/* Un écran qui s'ouvre : ses blocs montent en douceur, l'un après l'autre. */
.body > * { animation: monter var(--doux) both; }
.body > *:nth-child(2) { animation-delay: 50ms; } .body > *:nth-child(3) { animation-delay: 100ms; }
.body > *:nth-child(4) { animation-delay: 150ms; } .body > *:nth-child(n+5) { animation-delay: 200ms; }
.kpis > .kpi { animation: monter var(--doux) both; }
.kpis > .kpi:nth-child(2) { animation-delay: 60ms; } .kpis > .kpi:nth-child(3) { animation-delay: 120ms; } .kpis > .kpi:nth-child(n+4) { animation-delay: 180ms; }
@keyframes monter { from { opacity: 0; transform: translateY(8px); } }

/* Champs posés hors d'un formulaire (filtre d'un tableau, mois, période…) :
   le même dessin que les autres, plutôt que celui du navigateur. */
:where(.body) select:not(.nu), :where(.body) input:is([type=month], [type=date], [type=time], [type=week]),
:where(.body input:is([type=text], [type=number], [type=search], [type=email], [type=tel], :not([type])), .body textarea) {
  min-height: 36px; padding: 0 10px; border: 1px solid var(--filet); border-radius: var(--r-champ);
  background: var(--carte); color: var(--encre); font: inherit; font-size: 13.5px; font-family: var(--police);
}
:where(.body) select:not(.nu) { padding-right: 28px; }
:where(.body textarea) { padding: 8px 10px; }
:where(.body) select:not(.nu):focus, :where(.body) input:is([type=month], [type=date], [type=time]):focus, :where(.body input:is([type=text], [type=number], [type=search], [type=email], [type=tel], :not([type])), .body textarea):focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100); }
.body label.tag select, .tb-filtres select { padding: 0; border: none; background: none; box-shadow: none; }
@media (min-width: 1181px) and (pointer: fine) { .body label.tag select, .tb-filtres select { min-height: 0; } }
.body input[type=file] { font: inherit; font-size: 13px; color: var(--encre-douce); }
.body input[type=file]::file-selector-button { margin-right: 10px; min-height: 34px; padding: 0 14px; border: 1px solid var(--filet); border-radius: var(--r-champ); background: var(--carte); color: var(--encre); font: inherit; font-weight: 700; cursor: pointer; }

/* --- Composants ----------------------------------------------------------- */

.panel { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--filet) 65%, transparent); }
.panel > h2 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.panel > .hint { font-size: 12.5px; color: var(--encre-douce); margin-bottom: 14px; }
.panel .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel .head h2 { font-size: 15px; font-weight: 700; }
.panel .head .hint { font-size: 12.5px; color: var(--encre-douce); margin: 2px 0 0; }
/* Une longue explication, repliée à deux lignes ; « Lire la suite » la déroule. */
.hint.replie { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-bottom: 2px !important; }
.lire-suite { display: inline-block; font-size: 12.5px; font-weight: 600; margin: 2px 0 12px; min-height: 28px; }
.panel .head .lire-suite { margin: 0; }
@media print { .hint.replie { display: block; -webkit-line-clamp: unset; overflow: visible; } .lire-suite { display: none !important; } }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2b { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
/* Une colonne ne s'élargit pas pour un tableau trop large : c'est le tableau qui défile (sinon, sur téléphone, la colonne sortait de l'écran). */
.grid2 > *, .grid2b > *, .grid3 > *, .stack > *, .pos > * { min-width: 0; }

.tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-puce); background: #F2F4F7; color: #475467; }
/* Pastille d'état : un point coloré + le mot (« ● Rupture »). */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1.5; padding: 1px 10px; border-radius: var(--r-puce); white-space: nowrap; }
.chip.ok::before, .chip.warn::before, .chip.crit::before, .chip.jaune::before, .chip.info::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* L'urgent bat doucement : il attire l'œil sans crier. */
.chip.crit::before { animation: battre 2s ease-out infinite; }
/* Dans un tableau, le rouge est une catégorie (Liste I), pas une urgence : il se tient tranquille. */
td .chip.crit::before { animation: none; }
@keyframes battre { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--crit-point) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.chip.ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip.warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip.crit { background: var(--crit-bg); color: var(--crit-fg); }
.chip.jaune { background: var(--jaune-bg); color: var(--jaune-fg); }
/* Niveau de stock : une pastille de couleur devant la quantité. */
.niv::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: currentColor; vertical-align: 0; }
.chip.info { background: var(--info-bg); color: var(--info-fg); }
/* Pastille cliquable : un produit consulté récemment, un code grossiste à copier. */
button.chip { border: 0; cursor: pointer; font-family: inherit; }
button.chip:hover { filter: brightness(.96); }
button.chip:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
.chip.mute { background: #F2F4F7; color: #475467; }
.chip .jours { margin-left: 6px; padding-left: 6px; border-left: 1px solid currentColor; font-size: 11px; font-weight: 800; opacity: .85; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.kpi { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 18px 20px; position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--filet) 65%, transparent); transition: transform var(--vite), box-shadow var(--vite); }
.kpi:hover { box-shadow: var(--ombre-haute); }
/* L'indicateur principal : un fond pâle à la couleur de la pharmacie. */
.kpi.dark { background: var(--degrade); color: #fff; border-color: transparent; box-shadow: var(--lueur); }
/* Deux cercles de lumière : la carte principale a du relief. */

.kpi.dark .lab, .kpi.dark .dl, .kpi.dark .tb-bas, .kpi.dark .tb-cmp, .kpi.dark .val small { color: rgba(255, 255, 255, .88) !important; }
.kpi.dark .tb-bas b { color: #fff; }
.kpi.dark .dl.up, .kpi.dark .dl.down { background: rgba(255, 255, 255, .2); color: #fff; }
.kpi.dark .tb-ico { background: rgba(255, 255, 255, .2) !important; color: #fff !important; box-shadow: none; }
.kpi.dark .courbette polyline { stroke: #fff; }
.kpi.dark .courbette polygon { fill: #fff; opacity: .22; }
.kpi .lab { font-size: 12.5px; color: var(--encre-douce); font-weight: 600; }
.kpi .val { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; margin-top: 10px; letter-spacing: -.02em; }
.kpi .dl { font-size: 12.5px; font-weight: 600; margin-top: 6px; color: var(--encre-douce); }
/* Écart à la période d'avant : une pastille verte ou rouge. */
.kpi .dl.up, .kpi .dl.down { display: inline-flex; padding: 1px 9px; border-radius: var(--r-puce); font-weight: 700; }
.kpi .dl.up { background: var(--ok-bg); } .kpi .dl.down { background: var(--crit-bg); }
.up { color: var(--ok-fg); } .down { color: var(--crit-fg); }
/* --- Tableau de bord (maquette Vercolorz) ------------------------------------ */
.tb-filtres { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tb-kpi { display: flex; flex-direction: column; }
.tb-kpi-lien { cursor: pointer; transition: transform var(--vite), box-shadow var(--vite); }
.tb-kpi-lien:hover, .tb-kpi-lien:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(27,31,59,.35); }
.tb-kpi-lien:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
.tb-kpi .lab { display: flex; align-items: center; gap: 8px; padding-right: 70px; min-height: 28px; line-height: 1.2; }
.tb-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; box-shadow: 0 6px 14px -6px rgba(16, 24, 40, .35); }
.tb-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-ico.violet { background: var(--degrade); }
.tb-ico.ok { background: #059669; }
.tb-ico.info { background: #2563EB; }
.tb-ico.crit { background: #E11D48; }
/* Les premières ruptures de la semaine, sous leur nombre. */
.tb-top { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--encre-douce); }
.tb-top li { margin: 2px 0; }
.tb-kpi .val { margin-top: 12px; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-kpi .val small { font-size: 14px; font-weight: 600; color: var(--encre-douce); margin-left: 4px; }
.tb-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 12.5px; color: var(--encre-douce); }
.tb-bas .dl { margin-top: 0; }
.tb-bas b { color: var(--encre); font-weight: 700; }
.tb-cmp { color: var(--encre-douce); }
.kpi.tb-kpi .courbette { position: absolute; top: 18px; right: 18px; width: 64px; height: 28px; margin: 0; }
.kpi .courbette.barres rect { fill: var(--g5); }
.kpi .courbette.barres rect.recent { opacity: .45; }
.panel .head .tb-lien { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--accent-600); }
.panel .head .tb-lien:hover { text-decoration: underline; }
.panel .head h2 + .chip { margin-left: 2px; }
.panel .head:has(.tb-lien) { justify-content: flex-start; gap: 10px; }
.tb-courbe { position: relative; height: 200px; }
.tb-courbe svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tb-courbe .grille { stroke: var(--filet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tb-courbe .ligne { fill: none; stroke: var(--accent-600); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--accent-600) 30%, transparent)); }
.tb-courbe .aire { fill: var(--accent-500); fill-opacity: .1; }
.tb-courbe .avant { fill: none; stroke: color-mix(in srgb, var(--muet-clair) 55%, var(--carte)); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tb-points { position: absolute; inset: 0; pointer-events: none; }
.tb-points i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: auto; cursor: default; }
.tb-points i:hover, .tb-points i.max { background: var(--carte); border: 3px solid var(--accent-600); width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.tb-points i.max { box-shadow: 0 0 0 2px var(--carte); }
.tb-axe { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.tb-axe span { position: absolute; transform: translateX(-50%); font-size: 11.5px; color: var(--muet); white-space: nowrap; }
.tb-axe span:first-child { transform: none; } .tb-axe span:last-child { transform: translateX(-100%); }
.tb-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12.5px; color: var(--encre-douce); margin-top: 10px; }
/* La légende d'une courbe : un bout de trait, comme la courbe elle-même. */
.tb-leg span::before { content: ""; display: inline-block; width: 14px; height: 2px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.tb-leg .c1::before { background: var(--accent-600); } .tb-leg .c2::before { background: color-mix(in srgb, var(--muet-clair) 55%, var(--carte)); }
.tb-leg .max { margin-left: auto; } .tb-leg .max::before { display: none; }
.tb-leg b { color: var(--encre); }
.tb-liste { display: grid; gap: 2px; }
@media (max-width: 900px) { .tb-kpis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .tb-kpis { grid-template-columns: minmax(0, 1fr); } .tb-leg .max { margin-left: 0; } }

/* Mini-courbe sous un indicateur : la tendance de la période. */
.kpi .courbette { display: block; width: 100%; height: 32px; margin-top: 12px; overflow: visible; }
.kpi .courbette polyline { fill: none; stroke: var(--accent-500); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi .courbette polygon { fill: var(--accent-100); opacity: .7; stroke: none; }
/* Part d'un règlement : une pastille de couleur et une jauge sous le libellé. */
.pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.jauge { height: 8px; border-radius: var(--r-puce); background: var(--sous-carte); box-shadow: inset 0 0 0 1px var(--filet); margin-top: 6px; overflow: hidden; }
.jauge > i { display: block; height: 100%; border-radius: inherit; background-image: none; animation: remplir var(--doux) both; transform-origin: left; }
@keyframes remplir { from { transform: scaleX(0); } }

table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
/* En-tête de tableau à la manière d'un logiciel d'officine : une bande teintée de la couleur de la pharmacie. */
table.tbl th {
  text-align: left; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-700); font-weight: 700; background: var(--accent-50);
  padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--accent-500) 30%, var(--filet)); white-space: nowrap;
}
table.tbl th:first-child { border-top-left-radius: 6px; } table.tbl th:last-child { border-top-right-radius: 6px; }
table.tbl tbody tr:hover td { background: color-mix(in srgb, var(--accent-50) 70%, var(--carte)); }
table.tbl td { transition: background var(--vite); }
table.tbl th.r, table.tbl td.r { text-align: right; }
table.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr.sum td { font-weight: 750; border-top: 2px solid var(--encre); border-bottom: none; }
table.tbl td small { display: block; color: var(--encre-douce); font-size: 12px; }
/* Un nom cliquable dans un tableau : aligné comme le texte, souligné au survol. */
table.tbl td button.lien, table.tbl td a.lien { text-align: left; text-decoration: none; font-weight: 600; color: var(--accent-700); }
table.tbl td button.lien:hover, table.tbl td a.lien:hover { text-decoration: underline; }
table.tbl .n { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; }

.btn {
  border: 1px solid transparent; border-radius: var(--r-champ); padding: 0 16px; min-height: 36px; font-size: 13.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; background: var(--accent-600); background-image: var(--degrade); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent-600) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform var(--vite), box-shadow var(--vite), filter var(--vite), background-color var(--vite);
}
.btn:hover { filter: brightness(1.06) saturate(1.1); box-shadow: var(--lueur); transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.97); }
.btn.ghost { background: var(--carte); color: var(--encre); border-color: var(--filet); box-shadow: none; }
.btn.ghost:hover { background: var(--carte); border-color: var(--accent-500); color: var(--accent-700); box-shadow: 0 0 0 3px var(--accent-50); filter: none; }
.btn.lime { background: var(--accent-50); color: var(--accent-700); box-shadow: none; }
.btn.sm { padding: 0 12px; min-height: 30px; font-size: 12.5px; }
.btns { display: flex; gap: 9px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12.5px; color: var(--encre-douce); font-weight: 600; }
.field .box {
  border: 1px solid var(--filet); border-radius: var(--r-champ); padding: 8px 12px; font-size: 14px; background: var(--carte);
}
.field .box.big { font-family: var(--police-chiffres); font-size: 19px; font-weight: 700; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lbl { font-size: 12.5px; color: var(--encre-douce); font-weight: 600; }

/* Encadré d'explication contextuelle : un pavé teinté, sans barre de couleur sur le côté. */
.note {
  border: 0; background: var(--accent-50);
  border-radius: 10px; padding: 12px 16px; font-size: 13px; line-height: 1.5; color: var(--encre);
}
.note.crit { background: var(--crit-bg); }
.note.warn { background: var(--warn-bg); }
.note.info { background: var(--info-bg); }
.note.ok { background: var(--ok-bg); }
/* Encaissements : le détail d'un moyen (mobile money, opérateur par opérateur). */
.tbl tr.sous > td { font-size: 13px; color: var(--encre-douce); border-top-style: dashed; }
/* Assistance : la conversation avec l'équipe Officina. */
.as-fil { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.as-msg { max-width: min(560px, 92%); padding: 10px 14px; border-radius: 12px; background: var(--fond-doux, var(--accent-50)); border: 1px solid var(--filet); }
.as-msg.officine { align-self: flex-end; background: var(--accent-50); }
.as-msg.editeur { align-self: flex-start; background: var(--info-bg); }
.as-qui { font-size: 12px; color: var(--muet); margin-bottom: 4px; }
.as-texte { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
/* Réception : la ligne de la boîte qui vient d'être scannée. */
.tbl tr.scanne > td { background: var(--ok-bg, var(--accent-50)); }
.note b { font-weight: 700; }

/* Barre de sévérité */
.stripe { display: grid; grid-template-columns: 3px 1fr; gap: 10px; align-items: stretch; }
.stripe > i { border-radius: 3px; display: block; }
.stripe.crit > i { background: var(--crit-point); }
.stripe.warn > i { background: var(--warn-point); }
.stripe.ok > i { background: var(--ok-point); }

/* Interrupteur */
.sw { width: 40px; height: 23px; border-radius: 999px; background: var(--filet); position: relative; flex: none; }
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sw.on { background: var(--degrade); }
.sw, .sw::after { transition: background var(--vite), left var(--vite); }
.sw.on::after { left: 20px; }
.opt { display: flex; align-items: center; gap: 13px; padding: 10px 0; border-bottom: 1px solid var(--filet); }
.opt:last-child { border-bottom: none; }
.opt .tx { flex: 1; }
.opt.hors-demo { opacity: .6; }
.opt .tx b { font-size: 13.5px; font-weight: 650; display: block; }
.opt .tx small { color: var(--encre-douce); font-size: 12px; }
.opt .tx small.opt-lien { display: block; margin-top: 2px; color: var(--accent-700, var(--encre-douce)); font-weight: 600; }
.opt .tx small.opt-droits { display: block; margin-top: 2px; color: var(--muet); }
.opt .st { font-size: 12px; font-weight: 700; color: var(--encre-douce); width: 60px; text-align: right; }
.opt .st.on { color: var(--ok-fg); }

/* Graphiques */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.bar { width: 100%; background: var(--accent-100); border-radius: 4px 4px 0 0; position: relative; margin-top: auto; animation: pousser var(--doux) both; transform-origin: bottom; }
@keyframes pousser { from { transform: scaleY(0); } }
.bar.peak { background: var(--accent-600); box-shadow: none; }
.bar.neg { background: var(--crit-point); }
.bar .v { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; font-family: var(--police-chiffres); color: var(--encre-douce); }
.bar.peak .v { color: var(--accent-700); }
.bar-col .d { font-size: 12px; color: var(--encre-douce); }
.spark { display: block; width: 100%; height: 110px; }

.donut { width: 128px; height: 128px; border-radius: 50%; position: relative; flex: none; }
.donut .center {
  position: absolute; inset: 26px; background: var(--carte); border-radius: 50%;
  display: grid; place-items: center; text-align: center;
}
.donut .center b { font-family: var(--police-chiffres); font-size: 16px; font-weight: 700; display: block; }
.donut .center s { text-decoration: none; font-size: 11px; color: var(--encre-douce); }
.tb-anneau:empty { display: none; }
.tb-anneau { display: grid; place-items: center; margin: 2px 0 14px; }
.donut.anneau { width: 150px; height: 150px; }
.donut.anneau .center { inset: 22px; }
.donut.anneau .center b { font-size: 20px; letter-spacing: -.02em; }
.legend { display: flex; flex-direction: column; gap: 7px; font-size: 12px; flex: 1; }
.legend .l { display: flex; align-items: center; gap: 8px; }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend .v { margin-left: auto; font-family: var(--police-chiffres); font-weight: 650; }

/* Comptoir : disposition à deux colonnes */
.pos { display: grid; grid-template-columns: 1fr 380px; gap: 16px; height: 100%; }
.pos > .stack:first-child > .panel:first-child { flex: 1; }
.ligne {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--fond); border-radius: 11px; margin-bottom: 8px;
}
.ligne .nm { flex: 1; font-size: 13px; font-weight: 600; }
.ligne .nm small { display: block; color: var(--muet); font-size: 11px; font-weight: 400; }
.ligne .q { font-family: var(--police-chiffres); font-size: 11.5px; color: var(--muet); }
.ligne .amt { font-family: var(--police-chiffres); font-weight: 700; font-size: 13.5px; }
.total {
  background: var(--sous-carte); color: var(--encre); border-radius: 12px; padding: 14px 16px; border: 1px solid var(--filet);
  display: flex; align-items: center; justify-content: space-between;
}
.total span { font-size: 13px; color: var(--encre-douce); font-weight: 700; }
.total b { font-family: var(--police-chiffres); font-size: 26px; color: var(--encre); font-weight: 800; }
.pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay .opt2 {
  border: 1px solid var(--filet); border-radius: 10px; padding: 11px 6px; text-align: center;
  font-size: 11.5px; font-weight: 650; background: var(--carte);
}
.pay .opt2.on { border-color: var(--accent-600); background: var(--accent-50); color: var(--accent-700); }
.coupures { display: flex; flex-wrap: wrap; gap: 6px; }
.coupures b {
  font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: var(--ok-bg); color: var(--ok-fg);
}
.coupures b.piece { background: var(--fond); color: var(--muet); }

/* Pointeuse : écran partagé plein cadre */
.kiosk {
  height: 100%; background: var(--accent-900); color: #fff; border-radius: var(--r);
  display: grid; grid-template-columns: 1fr 320px; gap: 26px; padding: 26px 30px;
}
.kiosk h2 { font-size: 21px; font-weight: 750; }
.kiosk .sub { color: var(--muet-clair); font-size: 12.5px; margin-top: 2px; }
.roster { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.roster .p {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: rgba(255,255,255,.06); border-radius: 11px;
}
.roster .p .av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-600); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.roster .p .nm { flex: 1; font-size: 13px; font-weight: 600; }
.roster .p .nm small { display: block; color: var(--muet-clair); font-weight: 400; font-size: 11px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.keypad div {
  background: rgba(255,255,255,.07); border-radius: 11px; padding: 15px 0; text-align: center;
  font-family: var(--police-chiffres); font-size: 18px; font-weight: 700;
}
.keypad div.act { background: var(--accent-500); color: var(--accent-100); }
.dots { display: flex; gap: 11px; justify-content: center; padding: 8px 0 14px; }
.dots i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.16); display: block; }
.dots i.on { background: var(--accent-100); }

/* Document imprimable (facture, bulletin) */
.doc { background: #fff; border-radius: 10px; padding: 22px 26px; box-shadow: var(--ombre); font-size: 12px; }
.doc .head2 { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--encre); }
.doc .head2 b { display: block; font-size: 14px; }
.doc .head2 .r { text-align: right; }

.hide { display: none !important; }

/* Écran plein cadre : la pointeuse est une tablette au mur, pas une page de
   l'application. Elle n'a ni menu ni barre de titre. */
body.plein .side, body.plein .top, body.plein .onglets { display: none; }
body.plein .app { grid-template-columns: 1fr; }
body.plein .body { padding: 0; }
body.plein .kiosk { border-radius: 0; grid-template-columns: 1fr 420px; padding: 46px 60px; align-content: center; }
body.plein .kiosk h2 { font-size: 30px; }
body.plein .keypad div { padding: 22px 0; font-size: 24px; }

/* ==========================================================================
   Ajouts propres à l'application réelle : ce que les maquettes n'avaient pas
   besoin de montrer (défilement, formulaires, états de chargement, mobile).
   ========================================================================== */

.body { overflow-y: auto; }
.bars { padding-top: 20px; }
.nav a, .onglets a { cursor: pointer; }
.nav a:focus-visible, .onglets a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; filter: none; box-shadow: none; }
/* Pendant l'envoi : grisé, avec un petit indicateur qui tourne. */
.btn.occupe { opacity: .75; cursor: progress; }
.btn.occupe::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tourne .7s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.occupe::before { animation: none; } }

/* Fenêtre maison (confirmation, saisie courte). */
.dialogue-voile { position: fixed; inset: 0; z-index: 910; background: rgba(27, 31, 59, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: apparaitre var(--vite) both; }
@keyframes apparaitre { from { opacity: 0; } }
.dialogue { background: var(--carte); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(27, 31, 59, .45); padding: 22px 24px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; animation: monter var(--doux) both; border-top: 4px solid transparent; border-image: var(--degrade) 1; border-image-slice: 1 0 0 0; }
.dialogue h2 { font-size: 16px; margin: 0; }

/* La fiche sur le côté (A.tiroir) : glisse de la droite, onglets, pied d'actions. */
.tiroir-voile { position: fixed; inset: 0; z-index: 905; background: rgba(27, 31, 59, .32); animation: apparaitre var(--vite) both; }
.tiroir { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--carte); color: var(--encre); display: flex; flex-direction: column; box-shadow: -24px 0 60px -20px rgba(27, 31, 59, .45); border-left: 1px solid var(--filet); animation: trGlisse .22s ease-out both; }
@keyframes trGlisse { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tiroir, .tiroir-voile { animation: none; } }
.tr-tete { display: flex; align-items: flex-start; gap: 10px; padding: 18px 20px 10px; }
.tr-titres { min-width: 0; flex: 1; }
.tr-tete h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.tr-sous { font-size: 12.5px; color: var(--muet); margin-top: 2px; }
.tr-fermer { border: 0; background: transparent; font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--muet); }
.tr-fermer:hover, .tr-fermer:focus-visible { background: var(--sous-carte); color: var(--encre); }
.tr-entete { padding: 0 20px 12px; }
.tr-onglets { display: flex; gap: 2px; padding: 0 14px; border-bottom: 1px solid var(--filet); overflow-x: auto; }
.tr-onglets button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--muet); padding: 10px 10px 9px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tr-onglets button[aria-selected="true"] { color: var(--accent-700); border-bottom-color: var(--accent-500); }
.tr-corps { flex: 1; overflow: auto; padding: 16px 20px; }
.tr-pied { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--filet); background: var(--sous-carte); }
.tr-pied .btn { flex: 1 1 auto; justify-content: center; }
/* Les étapes en pastilles numérotées : faites, en cours, à venir. */
.tr-etapes { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; flex-wrap: wrap; }
.tr-etapes .pas { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muet); }
.tr-etapes .pas i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-style: normal; font-weight: 700; font-size: 11.5px; background: var(--sous-carte); border: 1px solid var(--filet); color: var(--muet); }
.tr-etapes .pas.fait i { background: var(--accent-100); border-color: transparent; color: var(--accent-700); }
.tr-etapes .pas.ici i { background: var(--accent-600); border-color: transparent; color: #fff; box-shadow: 0 0 0 3px var(--accent-100); }
.tr-etapes .pas.ici { color: var(--encre); font-weight: 600; }
.tr-etapes .trait { width: 14px; height: 2px; border-radius: 1px; background: var(--filet); }
.tr-etapes .trait.fait { background: var(--accent-500); }
/* Les informations en deux colonnes, et la frise du suivi. */
.tr-infos { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.tr-infos dt { color: var(--muet); }
.tr-infos dd { margin: 0; font-weight: 600; text-align: right; }
.tr-frise { list-style: none; margin: 0; padding: 0; position: relative; }
.tr-frise li { position: relative; padding: 0 0 16px 26px; font-size: 13.5px; }
.tr-frise li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100); }
.tr-frise li::after { content: ""; position: absolute; left: 10px; top: 18px; bottom: 0; width: 2px; background: var(--filet); }
.tr-frise li:last-child::after { display: none; }
.tr-frise li.attente::before { background: var(--carte); border: 2px solid var(--filet); box-shadow: none; width: 6px; height: 6px; }
.tr-frise li.attente { color: var(--muet); }
.tr-frise small { display: block; color: var(--muet); font-size: 12px; }
.kb-carte { cursor: pointer; }

.dialogue .dlg-texte { font-size: 13px; line-height: 1.5; color: var(--encre-douce); white-space: pre-line; }
.dialogue .dlg-champ { border: 1px solid var(--filet); border-radius: var(--r-champ); padding: 9px 12px; font: inherit; font-size: 14px; }
.dialogue .dlg-champ:focus { outline: 2px solid var(--accent-500); outline-offset: 1px; }
.dialogue .dlg-erreur { color: var(--crit-fg); font-size: 12.5px; }
.dialogue .dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.btn.danger { background: var(--crit-bg); color: var(--crit-fg); box-shadow: none; }
.btn.danger:hover { background: var(--crit-point); color: #fff; box-shadow: 0 8px 20px -8px var(--crit-point); }
.top .who button { background: var(--carte); border: 1px solid var(--filet); border-radius: var(--r-champ); padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--encre-douce); cursor: pointer; margin-left: 4px; }
.top .search input { border: none; background: none; font: inherit; color: var(--encre); outline: none; width: 100%; }

.vide { color: var(--encre-douce); font-size: 13.5px; padding: 24px 6px; text-align: center; }
.charge { color: var(--encre-douce); font-size: 13.5px; padding: 24px 6px; text-align: center; }
.charge::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; border: 2px solid var(--filet); border-top-color: var(--accent-600); border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .charge::before { animation: none; } }

.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; }
.form label { display: block; font-size: 12.5px; color: var(--encre-douce); font-weight: 600; margin-bottom: 5px; }
.form input, .form select, .form textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--filet); border-radius: var(--r-champ); font: inherit; font-size: 14px; background: var(--carte); color: var(--encre); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-500) 18%, transparent); }
.form input, .form select, .form textarea { transition: border-color var(--vite), box-shadow var(--vite); }
.form input[type=checkbox], .form input[type=radio] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--accent-600); }
.sep { border-top: 1px solid var(--filet); margin: 14px 0; }

.resultat { display: none; margin-top: 12px; }
.resultat.on { display: block; }
.resultat ul { margin: 6px 0 0 18px; }
.code-remis { font-family: var(--police-chiffres); font-size: 19px; letter-spacing: .22em; font-weight: 700; }

.table-defile { overflow-x: auto; }
/* Un chemin écrit dans une aide (« Stock → Grossistes ») : on le touche, l'écran s'ouvre. */
a.chemin { color: var(--accent-700); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a.chemin:hover { text-decoration-thickness: 2px; }
.lien { color: var(--accent-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: none; font: inherit; padding: 0; }
.note-historique { margin-top: 10px; font-size: 12.5px; color: var(--encre-douce); }
.note-historique .lien { min-height: 32px; font-size: inherit; }
.sw { cursor: pointer; border: none; padding: 0; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #17211C; color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 13.5px; box-shadow: 0 18px 40px -12px rgba(16, 24, 40, .5); border: 1px solid rgba(255, 255, 255, .1); z-index: 915; display: none; max-width: 90vw; }
.toast.on { display: flex; align-items: flex-start; gap: 10px; animation: surgir var(--doux) both; }
/* Messages bien visibles : plus grands, au-dessus de la bulle d'Ada, en couleur selon leur nature. */
.toast { bottom: 96px; font-size: 15px; font-weight: 600; line-height: 1.4; padding: 14px 20px; max-width: min(640px, 92vw); cursor: pointer; }
.toast .toast-ic { font-size: 17px; line-height: 1.2; flex: none; }
.toast.err { background: #B42318; border-color: #F04438; }
.toast.ok { background: #14532D; }
@keyframes surgir { from { opacity: 0; transform: translate(-50%, 12px) scale(.98); } }

/* « Et maintenant ? » : l'étape suivante, à un clic, en bas à gauche du travail. */
.suite { position: fixed; z-index: 55; left: 268px; bottom: 22px; width: min(380px, calc(100vw - 32px)); padding: 16px 16px 14px;
  background: var(--carte); border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(16, 24, 40, .45); border: 1px solid var(--filet);
  animation: monter var(--doux) both; overflow: hidden; }
.suite::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--degrade); }
.suite-fermer { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--encre-douce); cursor: pointer; font: inherit; }
.suite-fermer:hover, .suite-fermer:focus-visible { background: var(--sous-carte); color: var(--encre); outline: none; }
.suite-titre { display: flex; align-items: center; gap: 10px; padding-right: 26px; font-size: 14px; }
.suite-ok { width: 26px; height: 26px; border-radius: 50%; background: #059669; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; box-shadow: 0 6px 14px -6px #059669; }
.suite-texte { margin-top: 6px; font-size: 12.5px; color: var(--encre-douce); line-height: 1.45; }
.suite-lab { margin-top: 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-700); }
.suite-etapes { display: grid; gap: 6px; margin-top: 6px; }
.suite-etape { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--filet); background: var(--carte); color: var(--encre); font: inherit; font-size: 13.5px; font-weight: 650; text-align: left; cursor: pointer;
  transition: border-color var(--vite), box-shadow var(--vite), transform var(--vite); }
.suite-etape i { font-style: normal; color: var(--accent-600); transition: transform var(--vite); }
.suite-etape:hover, .suite-etape:focus-visible { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-50); outline: none; }
.suite-etape:hover i { transform: translateX(3px); }
.suite-etape.premiere { background: var(--degrade); color: #fff; border-color: transparent; box-shadow: var(--lueur); }
.suite-etape.premiere i { color: #fff; }
@media (min-width: 861px) and (max-width: 1180px) { .suite { left: 100px; } }
@media (max-width: 860px) { .suite { left: 16px; bottom: 84px; } }
@media print { .suite { display: none !important; } }

/* Rubrique sans écran pour ce rôle ou ces options : on l'explique. */
.accueil-vide { max-width: 560px; margin: 40px auto; }

/* Téléphone et tablette en portrait : la barre latérale se replie en bandeau. */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: auto; min-height: 100vh; overflow: visible; }
  .side { padding: 10px; min-width: 0; }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav .titre-groupe { display: none; }
  .nav a .tx small { display: none; }
  .nav a { flex-shrink: 0; }
  .nav a .tx { flex: 0 1 auto; }
  .main { overflow: visible; min-width: 0; }
  .top { flex-wrap: wrap; padding: 12px 16px; }
  .top .search { min-width: 0; flex: 1 1 100%; order: 3; }
  .onglets { overflow-x: auto; padding: 0 12px; }
  .sous-onglets { padding: 8px 12px; }
  .body { padding: 14px 16px; }
  .grid2, .grid2b, .grid3, .pos { grid-template-columns: 1fr; }
}

/* =============================================================================
   Tablette et téléphone.
   ========================================================================== */

/* Tablette à l'horizontale (861–1180 px) : la barre latérale devient une
   colonne d'icônes avec un libellé court ; le travail garde la place. */
@media (min-width: 861px) and (max-width: 1180px) {
  .app { grid-template-columns: 84px minmax(0, 1fr); }
  .side { padding: 12px 6px; }
  .brand { justify-content: center; padding: 0; }
  .brand > :not(.logo) { display: none; }
  .nav { overflow-y: auto; }
  .nav .titre-groupe { display: none; }
  .nav a { flex-direction: column; gap: 4px; padding: 9px 4px; position: relative; text-align: center; }
  .nav a .tx { align-items: center; font-size: 10.5px; flex: 0 1 auto; white-space: normal; line-height: 1.15; }
  .nav a .tx small { display: none; }
  .nav a .badge { position: absolute; top: 4px; right: 10px; margin: 0; }
  .top { flex-wrap: wrap; padding: 12px 18px; gap: 10px 14px; }
  .top .search { min-width: 0; flex: 1 1 220px; }
  .onglets, .sous-onglets { padding-left: 18px; padding-right: 18px; }
  .body { padding: 16px 18px; }
}

/* Écran tactile (tablette, téléphone) : de quoi poser le doigt. Le texte des
   champs à 16 px : en dessous, l'iPhone zoome sur chaque champ touché. */
@media (max-width: 1180px), (pointer: coarse) {
  .form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea, .top .search input,
  .body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .body select, .body textarea {
    min-height: 40px; font-size: 16px;
  }
  .top .search { min-height: 40px; }
  .body input[type=checkbox], .body input[type=radio] { width: 24px; height: 24px; min-height: 0; flex: none; }
  .btn { min-height: 40px; }
  .btn.sm { min-height: 34px; }
  .lien { display: inline-flex; align-items: center; min-height: 30px; }
  .sw { width: 46px; height: 27px; }
  .sw::after { width: 21px; height: 21px; }
  .sw.on::after { left: 22px; }
  .nav a, .onglets a, .sous-onglets a { min-height: 40px; }
  .sous-onglets a { display: inline-flex; align-items: center; }
}

/* Au doigt (écran tactile) : 44 px pour ce qu'on touche, comme le veulent les
   règles d'accessibilité ; la souris garde la densité d'un logiciel d'officine. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .lien { min-height: 40px; }
  .retour-ecran { min-height: 44px; }
  #deconnexion { min-height: 44px; }
  /* Un lien dans une phrase : la zone touchée s'agrandit sans déplacer les lignes. */
  a.chemin { padding-block: 10px; }
  .mode-sombre { width: 44px; height: 44px; }
  .nav a, .onglets a, .sous-onglets a { min-height: 44px; }
}
/* Les petites commandes rondes gardent leur taille visible, mais la zone à
   toucher fait 44 px : le « ? » d'aide, l'interrupteur d'une option. */
.aide-ecran, .sw { position: relative; }
.aide-ecran::after { content: ''; position: absolute; inset: -9px; border-radius: 999px; }
.sw::before { content: ''; position: absolute; inset: -9px -2px; }

/* Barre latérale repliée (tablette, téléphone) : l'entrée active garde son fond, sans le trait de gauche. */
@media (max-width: 1180px) { .nav a.on::before { display: none; } }

/* Barres qui défilent sur le côté : un fondu dit qu'il y en a d'autres. */
@media (max-width: 1180px) {
  .onglets, .sous-onglets { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 860px) {
  .nav { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); scrollbar-width: none; }
  .nav a { min-height: 44px; }
}

/* Téléphone : une ou deux colonnes, les en-têtes vont à la ligne, et un
   tableau trop large défile dans son cadre au lieu d'être coupé. */
@media (max-width: 600px) {
  .form { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
  /* Un formulaire dont chaque champ porte une explication (Identité) : une colonne, sinon les champs se décalent et se coupent. */
  .form.une-colonne { grid-template-columns: minmax(0, 1fr) !important; }
  .panel { padding: 14px 14px; overflow-x: auto; }
  .panel .head { flex-wrap: wrap; align-items: flex-start; }
  .panel .head > * { min-width: 0; }
  .row, .btns { flex-wrap: wrap; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kpi { padding: 14px 16px; }
  /* Tableau de bord : les chiffres du jour et ceux de la semaine, un par ligne —
     à deux colonnes, les libellés se coupent mot à mot et la troisième carte reste seule. */
  .kpis.tb-kpis, #tbSemaine .kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Les filtres « Collaborateur » et « Période » : pleine largeur, alignés l'un sous l'autre. */
  .tb-filtres { flex-direction: column; align-items: stretch; }
  .tb-filtres label.tag { justify-content: space-between; }
  .top h1 { font-size: 16.5px; }
  /* En-tête compact : « ← Retour » et le titre sur une ligne, la recherche
     et le compte (pastille + Déconnexion) sur la suivante — le travail
     commence au premier tiers de l'écran, pas à la moitié. */
  .top { gap: 8px 10px; padding: 10px 12px; }
  .top > div:has(> h1) { flex: 1 1 50%; }
  .retour-ecran { padding: 8px 12px; min-width: 40px; justify-content: center; }
  .retour-ecran .lib { display: none; }
  .top .search { flex: 1 1 150px; order: 3; }
  .top .who { order: 4; }
  .top .who > div:not(.av) { display: none; }
  .body { padding: 12px 12px 84px; } /* en bas, la place de la bulle d'Ada : rien ne reste caché dessous */
  .onglets, .sous-onglets { padding-left: 8px; padding-right: 8px; }
  /* Sur téléphone, une colonne de nom (produit, client, grossiste) garde de quoi se lire : sans largeur
     minimale, les autres colonnes la serrent et le nom s'écrit un mot par ligne. Le tableau défile alors
     dans son panneau. */
  table.tbl td:has(> b), table.tbl td:has(> .avec-sigle), table.tbl td:has(> button.lien:only-child) { min-width: 9.5rem; }
  table.tbl td:has(> .avec-sigle) .avec-sigle { align-items: center; }
}

/* Démonstration : un bandeau sur chaque écran, jusqu'à quand. */
.bandeau-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 22px; background: var(--warn-bg); color: var(--warn-fg); border-bottom: 1px solid var(--filet); font-size: 13px; }
.bandeau-demo[hidden] { display: none; }
.bandeau-demo .bd-texte { flex: 1 1 320px; min-width: 0; }
.bandeau-demo .bd-texte span { display: block; font-size: 12px; opacity: .85; }
.bandeau-demo .bd-etat { flex-basis: 100%; font-size: 12.5px; }
.bandeau-demo .bd-etat:empty { display: none; }
/* Envoi par le portail du grossiste : trois gestes numérotés. */
.etapes-portail { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.etapes-portail li { line-height: 1.5; }

/* Assistance : délai mesuré, horaires, WhatsApp. */
.as-contact { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 16px; }
.as-contact > div { flex: 1 1 320px; }

/* Check-list de démarrage (Mise en route). */
.demarrage > summary { list-style: none; cursor: pointer; }
.demarrage > summary::-webkit-details-marker { display: none; }
.dm-barre { height: 8px; border-radius: 99px; background: var(--filet); overflow: hidden; margin-top: 10px; }
.dm-barre span { display: block; height: 100%; background: var(--accent-500); border-radius: 99px; transition: width .4s; }
.dm-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.dm-liste li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--filet); }
.dm-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--filet); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.dm-liste li.fait .dm-mark { background: var(--ok-fg); border-color: var(--ok-fg); color: #fff; }
.dm-liste li.fait .dm-txt b { color: var(--encre-douce); }
.dm-txt { flex: 1 1 auto; min-width: 0; }
.dm-txt small { display: block; color: var(--encre-douce); font-size: 12.5px; }
.dm-txt .dm-qui { font-style: italic; }
.dm-act { flex: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; max-width: 50%; }
.dm-coche { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) { .dm-liste li { flex-wrap: wrap; } .dm-act { max-width: none; flex-basis: 100%; justify-content: flex-start; padding-left: 34px; } }
/* Mode formation : le même bandeau, en bleu et encadré de tirets — on ne le confond pas avec une démo. */
.bandeau-formation { background: var(--info-bg); color: var(--info-fg); border-bottom: 2px dashed var(--info-fg); }
@media print { .bandeau-demo { display: none !important; } }

/* Rappel de stock : un produit à la fois, en bas à droite, sans cacher le travail. */

/* Bouton « ? » à côté du titre : l'aide du wiki sur cet écran. */
.aide-ecran { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 6px; border-radius: 999px; border: 1px solid var(--filet); background: var(--carte); color: var(--encre-douce); font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer; vertical-align: middle; }
.ia-ecran-boutons { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.ia-ecran { border: 1px solid var(--accent-100); background: var(--accent-50); color: var(--accent-700); border-radius: 999px; padding: 3px 11px; font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1.4; cursor: pointer; }
.ia-ecran:hover, .ia-ecran:focus-visible { background: var(--accent-600); color: #fff; outline: none; }
.aide-ecran:hover, .aide-ecran:focus-visible { border-color: var(--accent-500); color: var(--accent-700); outline: none; }

/* Prix de vente en tête de la fiche produit : un conditionnement par case. */
.prix-grille { display: flex; flex-wrap: wrap; gap: 12px; }
.prix-case { border: 1px solid var(--accent-100); border-radius: 14px; padding: 12px 16px; min-width: 150px; display: grid; gap: 2px; background: var(--degrade-doux); }
.prix-case b { font-family: var(--police-chiffres); font-size: 24px; font-weight: 800; color: var(--accent-700); letter-spacing: -.02em; }
.prix-case small { color: var(--encre-douce); font-size: 12px; }
.prix-case.manque { border-color: var(--warn-fg); background: var(--warn-bg); }
.prix-case.manque b { color: var(--warn-fg); font-family: inherit; font-size: 18px; }

/* Impression d'un écran (rapport, tableau, planning) : le nom de la pharmacie,
   l'écran et la date en tête ; menus, recherche et boutons ne s'impriment pas. */
.entete-impression { display: none; }
@page { size: A4; margin: 14mm 12mm 16mm; }
@media print {
  .table-defile { overflow: visible !important; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .side, .top, .onglets, .sous-onglets, .toast, .aide-ecran, .ia-ecran-boutons, button, .btn { display: none !important; }
  .app { display: block; }
  .main { padding: 0; }
  .entete-impression { display: block; border-bottom: 1px solid #000; padding: 0 0 6px; margin: 0 0 12px; font-size: 12px; color: #000; }
  .entete-impression b { font-size: 15px; }
  body { background: #fff; }
}

/* Cases à cocher en grille (profil de délivrance d'un patient) */
.cases { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.case { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; margin: 0; }
.case input { width: auto; margin: 0; }
table.tbl td.r button.lien, table.tbl td.c button.lien { white-space: nowrap; }
/* Le reçu d'une dépense, en grand. */
.recu-voile { position: fixed; inset: 0; z-index: 80; background: rgba(27,31,59,.6); display: grid; place-items: center; padding: 20px; }
.recu-cadre { background: var(--carte); border-radius: var(--r-carte); box-shadow: 0 24px 60px rgba(27,31,59,.3); padding: 14px; max-width: min(92vw, 900px); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.recu-tete { display: flex; align-items: center; gap: 8px; } .recu-tete b { margin-right: auto; }
.recu-cadre img { display: block; max-width: 100%; max-height: calc(92vh - 80px); object-fit: contain; border-radius: 10px; background: var(--fond); }

/* Le médicament et sa pastille : une couleur par molécule, la même partout. */
.med { display: flex; align-items: center; gap: 10px; min-width: 0; }
.med > div { min-width: 0; }
.med-av { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #1B1F3B)); box-shadow: 0 6px 14px -6px var(--c), inset 0 1px 0 rgba(255,255,255,.25); }
.med-av.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 10.5px; }
.med-av.lg { width: 52px; height: 52px; border-radius: 16px; font-size: 18px; }
.med-av.g1 { --c: var(--g1); } .med-av.g2 { --c: var(--g2); } .med-av.g3 { --c: var(--g3); }
.med-av.g4 { --c: var(--g4); } .med-av.g5 { --c: var(--g5); } .med-av.g6 { --c: var(--g6); }
tr:hover .med-av { transform: rotate(-6deg) scale(1.06); }
.med-av { transition: transform var(--vite, .18s) ease; }
.fp-tete { background: var(--degrade-doux, var(--carte)); }
.fp-nom { display: block; font-size: 17px; }

/* ===== Cahier de liaison : cartes aérées, icônes teintées à la couleur de la pharmacie, ce qui n'est pas lu en teinte douce ===== */
.li { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.li-cote { position: sticky; top: 12px; padding: 16px 12px; }
.li-cote-tete { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
.li-cote-tete h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); margin: 0; }
.li-liste { display: flex; flex-direction: column; gap: 2px; }
.li-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background var(--vite, .18s) ease; }
.li-item:hover { background: var(--accent-50); }
.li-item.actif { background: color-mix(in srgb, var(--accent-500) 12%, var(--carte)); box-shadow: none; }
.li-item-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.li-item-tx b { font-size: 13.5px; }
.li-item-tx small { color: var(--encre-douce); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--accent-700); font-weight: 800; font-size: 15px;
  background: color-mix(in srgb, var(--accent-500) 15%, var(--carte)); box-shadow: none; }
.li-ico.grand { width: 52px; height: 52px; border-radius: 16px; font-size: 20px; }
.li-nb { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent-600); }
.li-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  color: color-mix(in srgb, var(--c) 78%, var(--encre)); background: color-mix(in srgb, var(--c) 16%, var(--carte)); box-shadow: none; }
.li-av.sm { width: 30px; height: 30px; font-size: 11.5px; }
.li-av.grand { width: 52px; height: 52px; font-size: 18px; }
.li-tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.li-tete-tx { flex: 1; min-width: 180px; }
.li-tete-tx h2 { margin: 0; }
.li-tete input[type=search] { width: min(280px, 100%); }
.li-retour { display: none; }
.li-ecrire { margin-top: 14px; }
.li-ecrire textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 60px; border: 1px solid var(--filet); border-radius: 14px; padding: 12px 14px; font: inherit; background: var(--fond); }
.li-ecrire textarea:focus { outline: none; border-color: var(--accent-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-600) 18%, transparent); background: var(--carte); }
.li-ecrire-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.li-joindre { cursor: pointer; }
.li-joints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.li-lien-joint { margin-top: 8px; font-size: 13px; }
.li-msg { margin-top: 14px; }
.li-msg.panel { padding: 18px 20px; transition: box-shadow var(--vite, .18s) ease; }
.li-msg.non-lu { background: color-mix(in srgb, var(--accent-500) 6%, var(--carte)); box-shadow: var(--ombre-carte); }
.li-msg-tete { display: flex; align-items: center; gap: 10px; }
.li-msg-tete > div:nth-child(2) { flex: 1; min-width: 0; }
.li-msg-tete b { color: #A21CAF; }
.li-msg-tete small { display: block; color: var(--encre-douce); font-size: 12px; }
.li-msg-tx { margin: 10px 0 0; line-height: 1.55; overflow-wrap: anywhere; }
.li-mention { color: var(--accent-700); background: color-mix(in srgb, var(--accent-500) 12%, transparent); padding: 0 4px; border-radius: 6px; }
.li-pieces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.li-photo { padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: none; }
.li-photo img { display: block; max-width: 240px; max-height: 180px; object-fit: cover; }
.li-pieces video { max-width: 320px; border-radius: 12px; }
.li-doc { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--fond); border: 1px solid var(--filet); font-size: 13px; }
.li-lien { margin-top: 10px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; color: var(--accent-700); background: color-mix(in srgb, var(--accent-500) 12%, var(--carte)); }
.li-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 13px; }
.li-actions button { border: 0; background: none; cursor: pointer; font: inherit; color: var(--encre-douce); padding: 4px 6px; border-radius: 8px; }
.li-actions button:hover { background: var(--fond); color: var(--encre); }
.li-aime.oui { color: var(--crit-point); font-weight: 700; }
.li-reponses { margin-top: 6px; padding-left: 18px; border-left: 2px solid var(--filet); }
.li-msg.reponse { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--fond); }
.li-msg.reponse.non-lu { background: color-mix(in srgb, var(--accent-600) 9%, var(--fond)); box-shadow: none; }
.li-repondre { display: flex; gap: 8px; margin-top: 10px; }
.li-repondre input { flex: 1; }
.li-menu { position: relative; }
.li-menu .lien { font-size: 20px; text-decoration: none; padding: 0 6px; }
.li-menu-liste { position: absolute; right: 0; top: 26px; z-index: 5; background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; box-shadow: var(--ombre-haute, 0 14px 30px -14px rgba(27,31,59,.3)); padding: 6px; min-width: 190px; }
.li-menu-liste button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; }
.li-menu-liste button:hover { background: var(--fond); }
.li-menu-liste button.danger { color: var(--crit-fg); }
.li-carte { display: grid; gap: 8px; padding: 12px; margin: 0 4px 10px; border-radius: 14px; background: var(--fond); }
.li-case { display: flex; gap: 8px; align-items: center; font-weight: 400; text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) {
  .li { grid-template-columns: 1fr; }
  .li-cote { position: static; }
  .li.li-ouvert .li-cote { display: none; }
  .li:not(.li-ouvert) .li-fil { display: none; }
  .li-retour { display: inline-flex; }
}
.li-tete input[type=search], .li-repondre input { box-sizing: border-box; padding: 9px 14px; border: 1px solid var(--filet); border-radius: 999px; font: inherit; font-size: 13.5px; background: var(--fond); color: var(--encre); }
/* Cahier traçable : sorte, priorité, destinataires, confirmation, sondage, tâche. */
.li-sondage-choix[hidden], .li-options[hidden] { display: none; }
.rc-site { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.rc-site .rc-site-v { flex: 1; font: inherit; padding: 7px 10px; border: 1px solid var(--filet); border-radius: 10px; background: var(--fond); color: var(--encre); resize: vertical; }
.rc-portail-warn { display: block; color: var(--warn-point); font-weight: 600; }
/* Agenda d'équipe : la semaine en sept colonnes, une couleur par sorte. */
.ag-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-tete .btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 1100px) { .ag-semaine { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.ag-jour { padding: 12px; min-height: 120px; }
.ag-jour.auj { box-shadow: inset 0 0 0 1.5px var(--accent-500), var(--ombre-carte); }
.ag-jour h3 { margin: 0 0 8px; font-size: 13px; text-transform: capitalize; color: var(--encre-douce); }
.ag-ev { position: relative; padding: 6px 22px 6px 9px; margin-bottom: 6px; border-radius: 9px; font-size: 12.5px; background: var(--fond); border-left: 3px solid #94A3B8; }
.ag-ev b { display: block; }
.ag-ev small { display: block; color: var(--encre-douce); }
.ag-ev [data-ag-suppr] { position: absolute; top: 4px; right: 6px; }
.ag-ev.reunion { border-color: #8B5CF6; } .ag-ev.formation { border-color: #0EA5E9; } .ag-ev.labo { border-color: #14B8A6; }
.ag-ev.animation { border-color: #F59E0B; } .ag-ev.conge { border-color: #F43F5E; } .ag-ev.garde { border-color: #1E3A8A; } .ag-ev.ferie { border-color: #D97706; }
/* Procédures : la carte, le formulaire de rédaction. */
.pr-carte .li-msg-tete > .chip { flex: none; }
.pr-carte .li-actions .btn { background: var(--accent-600); color: #fff; font-weight: 700; }
.pr-lu { color: var(--ok-fg); font-weight: 600; }
.pr-form { margin: 14px 0 0; }
.pr-form h3 { margin: 0 0 4px; font-size: 15px; }
.pr-form textarea, .pr-form input:not([type=file]) { font: inherit; padding: 8px 12px; border: 1px solid var(--filet); border-radius: 10px; background: var(--carte); color: var(--encre); }
.li-tete .btn { flex: none; }
.li-compteurs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.li-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; font-size: 13px; }
.li-options select, .li-options input[type=date] { font: inherit; padding: 5px 8px; border: 1px solid var(--filet); border-radius: 10px; background: var(--fond); color: var(--encre); }
#liMicro.actif { background: var(--accent-600); color: #fff; }
.li-pour { margin-top: 8px; font-size: 13px; }
.li-pour summary { cursor: pointer; color: var(--encre-douce); }
.li-pour-liste { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 0; }
.li-pour-liste .chip, .li-filtres .chip { border: 1px solid var(--filet); background: var(--carte); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.li-sondage-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; margin-top: 8px; }
.li-sondage-choix input { font: inherit; padding: 7px 10px; border: 1px solid var(--filet); border-radius: 10px; background: var(--fond); }
.li-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.li-filtres .chip.actif { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.li-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.li-msg.prio { background: color-mix(in srgb, var(--crit-point) 6%, var(--carte)); box-shadow: var(--ombre-carte); }
.li-suivi { margin-top: 10px; font-size: 13px; }
.li-suivi.ok { color: var(--ok-fg); }
.li-sondage { display: grid; gap: 6px; margin-top: 10px; }
.li-choix { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--filet); border-radius: 10px; cursor: pointer; font: inherit; color: var(--encre);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-500) 16%, var(--carte)) var(--pc), var(--carte) var(--pc)); }
.li-choix.moi { border-color: var(--accent-600); }
.li-tete input[type=search]:focus, .li-repondre input:focus { outline: none; border-color: var(--accent-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-600) 18%, transparent); background: var(--carte); }

/* Rendez-vous : jours, créneaux libres en pastilles, liste d'attente teintée. */
.rv-jour { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 6px; font-size: 13.5px; }
.rv-jour > span:first-child { text-transform: capitalize; }
.rv-libres { margin-left: auto; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; min-height: 30px; padding: 4px 12px; border-radius: 999px;
  color: var(--accent-700); background: color-mix(in srgb, var(--accent-500) 13%, var(--carte)); transition: background var(--vite, .18s) ease; }
.rv-libres:hover { background: color-mix(in srgb, var(--accent-500) 22%, var(--carte)); }
.rv-form { grid-template-columns: 1.6fr 1fr 1.4fr 150px 112px 84px auto; }
@media (max-width: 1180px) { .rv-form { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.rv-creneaux { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.rv-cr-titre { font-size: 12.5px; color: var(--encre-douce); margin-right: 4px; }
.rv-cr { border: 1px solid color-mix(in srgb, var(--accent-500) 25%, transparent); background: var(--carte); color: inherit; font: inherit; font-size: 12.5px;
  font-variant-numeric: tabular-nums; min-height: 32px; padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: background var(--vite, .18s) ease, color var(--vite, .18s) ease; }
.rv-cr:hover { background: color-mix(in srgb, var(--accent-500) 10%, var(--carte)); }
.rv-cr.on { color: #fff; border-color: transparent; background: var(--accent-600); }
.tbl tr.rv-att > td { background: color-mix(in srgb, #F59E0B 6%, var(--carte)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rv-libres { color: #C4B5FD; } }
:root[data-theme="dark"] .rv-libres { color: #C4B5FD; }

/* --- Icône du titre de l'écran : sobre, à la couleur de la pharmacie ------- */
.titre-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  color: var(--accent-700); background: var(--accent-50); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-500) 25%, transparent); }
.titre-ico[hidden] { display: none; }
.titre-ico .ico { width: 21px; height: 21px; }
@media (max-width: 700px) { .titre-ico { width: 34px; height: 34px; border-radius: 11px; } .titre-ico .ico { width: 17px; height: 17px; } }
@media (max-width: 420px) { .titre-ico { display: none; } }

/* Sigle d'un grossiste (« UB », « LA ») : deux lettres sur un carré pastel. */
.sigle { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 7px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em; line-height: 1; }
.sigle.s1 { background: #FFEDD5; color: #C2410C; }
.sigle.s2 { background: #DBEAFE; color: #1D4ED8; }
.sigle.s3 { background: #FCE7F3; color: #BE185D; }
.sigle.s4 { background: #EDE9FE; color: #6D28D9; }
.sigle.s5 { background: #D1FAE5; color: #047857; }
.sigle.s6 { background: #E0F2FE; color: #0369A1; }
.avec-sigle { display: inline-flex; align-items: center; gap: 9px; }
.avec-sigle > span:last-child:not(.sigle) { display: flex; flex-direction: column; }

/* Lignes de tableau à peine teintées, une sur deux : l'œil suit la ligne. */
table.tbl tbody tr:where(:nth-child(even):not([style*="background"])) > td { background: color-mix(in srgb, var(--accent-50) 38%, var(--carte)); }
/* Cartes plus aériennes : ombre plus large, plus douce. */
.panel, .kpi { box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 30px -12px rgba(76, 29, 149, .12); }

/* Planning : affluence et effectif, heure par heure. */
.pl-seuil { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--encre-douce); white-space: nowrap; }
.pl-seuil input { width: 64px; min-height: 32px; text-align: center; }
.pl-alertes ul { margin: 6px 0 0 18px; display: grid; gap: 3px; }
.pl-alertes { margin-bottom: 12px; }
table.pl-af th, table.pl-af td { text-align: center; padding: 6px 8px; }
table.pl-af td:first-child, table.pl-af th:first-child { text-align: left; }
table.pl-af tbody tr > td.pl-af-c { background: transparent; }
.pl-af-c b { display: block; font-variant-numeric: tabular-nums; font-size: 13px; }
.pl-af-c small { font-size: 11px; color: var(--encre-douce); }
table.pl-af tbody tr > td.pl-af-c.ok, .pl-legende .ok { background: color-mix(in srgb, #10B981 11%, var(--carte)); }
table.pl-af tbody tr > td.pl-af-c.warn, .pl-legende .warn { background: color-mix(in srgb, #F59E0B 18%, var(--carte)); }
table.pl-af tbody tr > td.pl-af-c.crit, .pl-legende .crit { background: color-mix(in srgb, #F43F5E 20%, var(--carte)); }
table.pl-af tbody tr > td.pl-af-c.crit b { color: var(--crit-fg); }
table.pl-af tbody tr > td.pl-af-c.calme, .pl-legende .calme { background: color-mix(in srgb, #38BDF8 12%, var(--carte)); }
.pl-legende { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 12px; }
.pl-legende span { padding: 3px 10px; border-radius: 999px; }

/* Planning : alertes de la semaine, équité des gardes. */
.pl-cel small.pl-alerte, .pl-grille td small.pl-alerte { color: var(--crit-fg); font-weight: 700; font-size: 11.5px; }
.pl-eq td { vertical-align: middle; }
.pl-barre { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: var(--sous-carte); box-shadow: inset 0 0 0 1px var(--filet); vertical-align: middle; overflow: hidden; }
.pl-barre i { display: block; height: 100%; border-radius: inherit; background: var(--accent-500); }
.pl-sous { font-size: 14px; margin: 18px 0 8px; }
.pl-garde { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--sous-carte); margin-bottom: 8px; }
.pl-garde-tx { flex: 1; min-width: 150px; align-self: center; }
.pl-garde-tx small { display: block; color: var(--encre-douce); font-size: 12px; }
.pl-garde-champ { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--encre-douce); }
.pl-garde-form { margin-top: 14px; }

/* Hors ligne : ce que le poste a gardé, et de quand ça date. */
.hors-ligne-bandeau { padding: 9px 28px; font-size: 13px; color: var(--warn-fg); background: var(--warn-bg); border-bottom: 1px solid color-mix(in srgb, var(--warn-point) 35%, transparent); }
.hors-ligne-bandeau[hidden] { display: none; }
.maj-ecran { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 7px 28px; font-size: 13px; color: var(--info-fg); background: var(--info-bg); border-bottom: 1px solid var(--line, #dbe7df); }
.maj-ecran[hidden] { display: none; }
@media (max-width: 700px) { .maj-ecran { padding: 6px 14px; font-size: 12.5px; } }
@media (max-width: 700px) { .hors-ligne-bandeau { padding: 8px 14px; font-size: 12.5px; } }

/* Options : la formule d'abonnement en tête. */
.abo-bandeau { background: color-mix(in srgb, var(--accent-500) 8%, var(--carte)); }
.abo-total { text-align: right; }
.abo-total b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.abo-total small { color: var(--encre-douce); }

/* --- Tableaux : tri, pages, actions de ligne ------------------------------- */
table.tbl th.triable { cursor: pointer; user-select: none; white-space: nowrap; }
table.tbl th.triable:hover { color: var(--encre); }
table.tbl th.triable::after { content: '↕'; margin-left: 5px; font-size: 10px; opacity: .35; }
table.tbl th.triable[aria-sort="ascending"]::after { content: '▲'; opacity: 1; color: var(--accent-600); }
table.tbl th.triable[aria-sort="descending"]::after { content: '▼'; opacity: 1; color: var(--accent-600); }
table.tbl th.triable:focus-visible { outline: 2px solid var(--accent-500); outline-offset: -2px; }
table.tbl tr.tbl-cache { display: none; }
.tbl-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: var(--encre-douce); }
.tbl-pied .tbl-par { display: inline-flex; align-items: center; gap: 6px; }
.tbl-pied .tbl-par select { min-height: 32px; padding: 0 8px; border: 1px solid var(--filet); border-radius: 8px; background: var(--carte); font: inherit; color: var(--encre); }
.tbl-pages { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.tbl-pages button { min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid var(--filet); border-radius: 8px; background: var(--carte); color: var(--encre); font: inherit; font-weight: 600; cursor: pointer; }
.tbl-pages button.on { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.tbl-pages button:disabled { opacity: .4; cursor: default; }
.tbl-pages span { padding: 0 4px; }
/* Les boutons secondaires d'une ligne restent discrets ; ils s'allument au survol. */
@media (hover: hover) and (pointer: fine) {
  table.tbl tbody td:last-child .btn.ghost { transition: opacity var(--vite, .15s); }
}
@media print { .tbl-pied { display: none; } table.tbl tr.tbl-cache { display: table-row; } table.tbl th.triable::after { display: none; } }
/* Compteurs par étape (Commandes) : un clic filtre, la croix retire le filtre. */
.parcours-cmd { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.parcours-cmd .trait { width: 18px; height: 2px; border-radius: 1px; background: var(--filet); }
.parcours-cmd .pas-cmd { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 8px; border-radius: var(--r-puce); border: 1px solid var(--filet); background: var(--carte); color: var(--encre-douce); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.parcours-cmd .pas-cmd i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--sous-carte); border: 1px solid var(--filet); }
.parcours-cmd .pas-cmd b { min-width: 22px; padding: 0 6px; border-radius: var(--r-puce); background: var(--sous-carte); color: var(--encre); font-size: 12px; text-align: center; }
.parcours-cmd .pas-cmd.ici { border-color: var(--accent-600); background: var(--accent-50); color: var(--accent-700); cursor: default; }
.parcours-cmd .pas-cmd.ici i { background: var(--accent-600); border-color: transparent; color: #fff; }
.etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.etapes .etape { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-puce); border: 1px solid var(--filet); background: var(--carte); color: var(--encre-douce); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.etapes .etape b { min-width: 22px; padding: 0 6px; border-radius: var(--r-puce); background: var(--sous-carte); color: var(--encre); font-size: 12px; text-align: center; }
.etapes .etape.warn b { background: var(--warn-bg); color: var(--warn-fg); }
.etapes .etape.info b { background: var(--info-bg); color: var(--info-fg); }
.etapes .etape.ok b { background: var(--ok-bg); color: var(--ok-fg); }
.etapes .etape.on { border-color: var(--accent-600); background: var(--accent-50); color: var(--accent-700); }
.etapes .etape:disabled { opacity: .5; cursor: default; }
.filtre-actif { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: var(--r-puce); background: var(--accent-600); color: #fff; font-size: 12.5px; font-weight: 700; margin-left: auto; }
.filtre-actif button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; font: inherit; font-size: 11px; }
.btn[hidden] { display: none; }

/* --- Tableau de bord : travail du jour, mois en cours, activité ------------ */
.tb-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tb-onglet { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r-puce); border: 1px solid var(--filet); background: var(--carte); color: var(--encre-douce); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tb-onglet b { min-width: 22px; padding: 1px 6px; border-radius: var(--r-puce); background: var(--sous-carte); color: var(--encre-douce); font-size: 12px; text-align: center; }
.tb-onglet b.warn { background: var(--warn-bg); color: var(--warn-fg); }
.tb-onglet b.crit { background: var(--crit-bg); color: var(--crit-fg); }
.tb-onglet.on { border-color: var(--accent-600); background: var(--accent-50); color: var(--accent-700); }
.tb-onglet:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
@media (max-width: 520px) { .tb-anneaux { grid-template-columns: minmax(0, 1fr); } }

/* --- Commandes : liste ou tableau (Kanban) --------------------------------- */
.vues { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--sous-carte); border: 1px solid var(--filet); margin-right: 6px; }
.vues button { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--encre-douce); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.vues button.on { background: var(--carte); color: var(--encre); box-shadow: var(--ombre); }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.kb-col { background: var(--sous-carte); border: 1px solid var(--filet); border-radius: 14px; padding: 10px; min-width: 0; display: flex; flex-direction: column; }
.kb-col h3 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 2px 4px 10px; }
.kb-col h3 b { min-width: 22px; padding: 1px 7px; border-radius: var(--r-puce); background: var(--carte); font-size: 12px; text-align: center; }
.kb-col h3 b.warn { background: var(--warn-bg); color: var(--warn-fg); } .kb-col h3 b.crit { background: var(--crit-bg); color: var(--crit-fg); } .kb-col h3 b.info { background: var(--info-bg); color: var(--info-fg); } .kb-col h3 b.ok { background: var(--ok-bg); color: var(--ok-fg); }
.kb-cartes { display: grid; gap: 8px; align-content: start; flex: 1; min-height: 80px; border-radius: 10px; transition: background var(--vite, .15s), outline-color var(--vite, .15s); outline: 2px dashed transparent; outline-offset: -2px; }
.kb-cartes.survol { background: var(--accent-50); outline-color: var(--accent-500); }
.kb-carte { background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04); cursor: grab; display: grid; gap: 6px; font-size: 13px; }
.kb-carte:hover, .kb-carte:focus-visible { border-color: var(--accent-500); outline: none; }
.kb-carte.tiree { opacity: .5; cursor: grabbing; }
.kb-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; min-width: 0; }
.kb-haut .avec-sigle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-haut .chip { flex: none; font-size: 11px; }
.kb-ref { font-size: 12px; color: var(--encre-douce); }
.kb-bas { display: flex; justify-content: space-between; color: var(--encre-douce); font-size: 12.5px; } .kb-bas b { color: var(--encre); }
.kb-prog { height: 6px; border-radius: var(--r-puce); background: var(--sous-carte); box-shadow: inset 0 0 0 1px var(--filet); overflow: hidden; margin-top: 4px; }
.kb-prog i { display: block; height: 100%; border-radius: inherit; background: var(--ok-point); }
.kb-recu { font-size: 11.5px; color: var(--encre-douce); }
.kb-suite { justify-self: end; min-height: 30px; padding: 0 10px; border: 1px solid var(--filet); border-radius: 8px; background: var(--carte); color: var(--accent-700); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.kb-suite:hover { background: var(--accent-50); border-color: var(--accent-500); }
.kb-vide { font-size: 12.5px; color: var(--muet); text-align: center; padding: 18px 6px; }
table.tbl td .kb-prog { width: 70px; margin-left: auto; }
@media (max-width: 860px) { .kanban { grid-template-columns: repeat(4, minmax(230px, 80vw)); } }

/* ☀/☾ : bascule du mode sombre, dans l'en-tête. */
.mode-sombre { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--filet); background: var(--carte); color: var(--encre); font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.mode-sombre:hover { background: var(--sous-carte); }
.mode-sombre:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
/* Mode sombre : les pastilles grises neutres passent en teintes de nuit. */
:root[data-mode="sombre"] .tag, :root[data-mode="sombre"] .chip.mute { background: var(--sous-carte); color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--filet); }
:root[data-mode="sombre"] .doc { color: #1B1F3B; --encre: #1B1F3B; --encre-douce: #5D6385; --muet: #5D6385; --filet: #E6E8F0; --sous-carte: #F9FAFB; --carte: #FFFFFF; }

/* --- États vides illustrés : un dessin au-dessus du « Aucun … » ------------- */
/* La place du dessin est réservée quoi qu'il arrive : une cellule de tableau ou
   un panneau qui fixe sa propre marge ne doit jamais remonter le texte dessous. */
.vide { position: relative; padding-top: 72px !important; }
.vide::before {
  content: ""; position: absolute; top: 18px; left: 50%; width: 46px; height: 46px; margin-left: -23px;
  border-radius: 14px; background: var(--accent-50); box-shadow: inset 0 0 0 1px var(--accent-100);
}
.vide::after {
  content: ""; position: absolute; top: 29px; left: 50%; width: 24px; height: 24px; margin-left: -12px;
  background: var(--accent-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Un « rien à signaler » est une bonne nouvelle : coche verte. */
.vide.bien::before { background: var(--ok-bg); box-shadow: none; }
.vide.bien::after { background: var(--ok-point);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.charge.vide::before, .charge.vide::after { display: none; }
/* Téléphone : un tableau large défile, et sa ligne vide, centrée sur toute la
   largeur, tombait hors de l'écran. Calée à gauche, elle se lit d'emblée. */
@media (max-width: 700px) {
  td.vide { text-align: left; }
  td.vide::before { left: 6px; margin-left: 0; }
  td.vide::after { left: 17px; margin-left: 0; }
}
@media print { .vide { padding-top: 12px !important; } .vide::before, .vide::after { display: none; } }

/* --- Actions d'une ligne : elles apparaissent au survol ---------------------
   Sur ordinateur, les boutons secondaires d'une ligne restent cachés derrière
   un « ⋯ » discret, et apparaissent quand la souris passe sur la ligne (ou que
   le clavier y entre). Sur tablette, tout reste visible. */
@media (hover: hover) and (pointer: fine) {
  table.tbl tbody td:last-child:has(> .btn.ghost) { position: relative; }
  table.tbl tbody tr td:last-child .btn.ghost { opacity: 0; }
  table.tbl tbody tr td:last-child:has(> .btn.ghost)::after {
    content: "⋯"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 18px; font-weight: 800; color: var(--muet-clair); pointer-events: none; transition: opacity var(--vite, .15s);
  }
  table.tbl tbody tr:is(:hover, :focus-within) td:last-child .btn.ghost { opacity: 1; }
  table.tbl tbody tr:is(:hover, :focus-within) td:last-child::after { opacity: 0; }
  table.tbl tbody tr td:last-child:has(> .btn:not(.ghost))::after { display: none; }
}
/* Barre « Trier / Grouper » et actions groupées des listes. */
.liste-outils { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--encre-douce); }
.liste-outils label { display: inline-flex; align-items: center; gap: 6px; }
.liste-outils select { min-height: 32px; padding: 0 8px; border: 1px solid var(--filet); border-radius: 8px; background: var(--carte); color: var(--encre); font: inherit; font-weight: 700; }
.filtre-actif + .liste-outils { margin-left: 8px; }
.actions-groupees { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: var(--accent-50); border: 1px solid var(--accent-100); color: var(--accent-700); font-size: 13px; }
.actions-groupees[hidden] { display: none; }
.actions-groupees b { margin-right: 6px; }
.actions-groupees .lien { margin-left: auto; font-size: 12.5px; }
table.tbl tr.groupe td { background: var(--sous-carte); font-weight: 800; font-size: 12.5px; color: var(--encre); padding: 8px 12px; }

/* Calendrier des congés (Équipe → Congés) : un mois, une ligne par salarié. */
.cg-nav { display: flex; align-items: center; gap: 6px; }
.cg-nav b { min-width: 120px; text-align: center; font-size: 14px; }
.cg-defile { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.cg-grille { display: grid; grid-template-columns: minmax(170px, 210px) 1fr; min-width: 860px; align-items: stretch; }
.cg-nom { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 8px 0; border-top: 1px solid var(--filet); font-size: 13px; min-width: 0; }
.cg-nom b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-entete { border-top: 0; color: var(--muet); font-size: 12px; font-weight: 600; }
.cg-jours { display: grid; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--encre-douce); padding-bottom: 4px; }
.cg-jours span { display: flex; flex-direction: column; line-height: 1.2; padding: 2px 0; border-radius: 6px; }
.cg-jours small { font-size: 11px; font-weight: 600; color: var(--muet); text-transform: uppercase; }
.cg-jours .we { color: var(--muet); }
.cg-jours .auj { background: var(--accent-600); color: #fff; }
.cg-jours .auj small { color: #fff; }
.cg-piste { position: relative; border-top: 1px solid var(--filet); min-height: 40px; }
.cg-fond, .cg-barres { position: absolute; inset: 0; display: grid; }
.cg-fond i { border-left: 1px solid color-mix(in srgb, var(--filet) 55%, transparent); }
.cg-fond i.we { background: color-mix(in srgb, var(--sous-carte) 80%, var(--filet)); }
.cg-fond i.auj { background: color-mix(in srgb, var(--accent-100) 60%, transparent); box-shadow: inset 2px 0 0 var(--accent-500); }
.cg-barres { align-items: center; padding: 0 1px; }
.cg-barre { grid-row: 1; height: 26px; margin: 0 1px; border-radius: 8px; border: 0; padding: 0 8px; font: inherit; font-size: 11.5px; font-weight: 600; color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; background: var(--accent-500); box-shadow: 0 2px 6px -2px rgba(27, 31, 59, .35); }
.cg-barre:hover, .cg-barre:focus-visible { filter: brightness(1.08); outline: 2px solid var(--accent-700); outline-offset: 1px; }
.cg-barre.maladie { background: #E5484D; }
.cg-barre.sans-solde { background: #7C8295; }
.cg-barre.attente { color: var(--encre); background: repeating-linear-gradient(135deg, var(--accent-100) 0 6px, var(--carte) 6px 12px); border: 1.5px dashed var(--accent-500); box-shadow: none; }
.cg-barre.attente.maladie { border-color: #E5484D; background: repeating-linear-gradient(135deg, rgba(229, 72, 77, .18) 0 6px, var(--carte) 6px 12px); }
.cg-barre.coupe-g { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cg-barre.coupe-d { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cg-legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muet); }
.cg-legende span { display: inline-flex; align-items: center; gap: 6px; }
.cg-legende i { width: 18px; height: 10px; border-radius: 4px; background: var(--accent-500); }
.cg-legende i.maladie { background: #E5484D; } .cg-legende i.sans-solde { background: #7C8295; }
.cg-legende i.attente { background: repeating-linear-gradient(135deg, var(--accent-100) 0 3px, var(--carte) 3px 6px); border: 1.5px dashed var(--accent-500); }

/* La semaine des pointages (Équipe → Pointages) : barres par jour, totaux. */
.ps-grille { display: grid; grid-template-columns: minmax(160px, 200px) repeat(7, minmax(92px, 1fr)) minmax(96px, auto); min-width: 980px; }
.ps-grille > div { border-top: 1px solid var(--filet); }
.ps-entete { border-top: 0 !important; padding: 4px 6px 8px; font-size: 12px; font-weight: 600; color: var(--muet); }
.ps-entete.ps-j { text-transform: capitalize; }
.ps-entete.ps-j b { color: var(--encre); font-size: 13px; }
.ps-entete.auj { color: var(--accent-700); }
.ps-entete.auj b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 7px; background: var(--accent-600); color: #fff; }
.ps-nom { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 10px 8px 0; font-size: 13px; min-width: 0; }
.ps-nom b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-retards { color: var(--warn-fg); font-size: 11.5px; }
.ps-jour { padding: 8px 6px 6px; border-left: 1px solid color-mix(in srgb, var(--filet) 55%, transparent); }
.ps-jour.auj, .ps-pied.auj { background: color-mix(in srgb, var(--accent-50) 70%, transparent); }
.ps-jour small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--encre-douce); font-variant-numeric: tabular-nums; min-height: 14px; }
.ps-piste { position: relative; height: 12px; border-radius: 6px; background: var(--sous-carte); }
.ps-barre { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--accent-500); }
.ps-barre.retard { background: var(--warn-point); }
.ps-barre.en-poste { background: var(--ok-point); }
.ps-total { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 8px 0 8px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ps-total small { color: var(--muet); font-size: 11.5px; }
.ps-pied { padding: 8px 6px; font-size: 12px; font-weight: 600; color: var(--encre-douce); font-variant-numeric: tabular-nums; border-top: 2px solid var(--filet) !important; }
.ps-nom.ps-pied { color: var(--muet); }
.ps-cle { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; white-space: nowrap; }
.ps-cle i { width: 14px; height: 8px; border-radius: 4px; background: var(--accent-500); }
.ps-cle.retard i { background: #F59E0B; } .ps-cle.en-poste i { background: #12B76A; }

/* Taux de service des grossistes (Stock → Mes grossistes). */
.ts-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ts-kpi { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--filet); border-radius: 14px; background: var(--sous-carte); }
.ts-kpi b { display: block; font-size: 14px; }
.ts-kpi small { color: var(--muet); font-size: 12.5px; }
.ts-anneau { --p: 0; --c: var(--accent-500); flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--filet) 0); }
.ts-anneau span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--carte); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ts-anneau.bon { --c: var(--ok-point); } .ts-anneau.moyen { --c: var(--warn-point); } .ts-anneau.faible { --c: var(--crit-point); }
.ts-table th.c, .ts-table td.c { text-align: center; }
.ts-case { display: inline-block; min-width: 58px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sous-carte); color: var(--muet); }
.ts-case.bon { background: var(--ok-bg); color: var(--ok-fg); }
.ts-case.moyen { background: var(--warn-bg); color: var(--warn-fg); }
.ts-case.faible { background: var(--crit-bg); color: var(--crit-fg); }
.ts-case.total { box-shadow: inset 0 0 0 1.5px currentColor; }
.ts-table td small { display: block; color: var(--muet); font-size: 11.5px; }
.ts-table td small.ts-retard { color: var(--warn-fg); }
.ts-legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muet); }
.ts-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ts-legende i { width: 14px; height: 10px; border-radius: 3px; }
.ts-legende i.bon { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok-fg); } .ts-legende i.moyen { background: var(--warn-bg); box-shadow: inset 0 0 0 1px var(--warn-fg); } .ts-legende i.faible { background: var(--crit-bg); box-shadow: inset 0 0 0 1px var(--crit-fg); }

/* Une ligne qui se déplie (▸) : ses sous-lignes juste dessous, marquées d'un filet. */
.deplier { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--filet); background: var(--carte); color: var(--encre); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 9px 3px 7px; border-radius: 8px; cursor: pointer; }
.deplier::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; }
.deplier[aria-expanded="true"] { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
.deplier[aria-expanded="true"]::before { transform: rotate(90deg); }
.deplier:hover, .deplier:focus-visible { border-color: var(--accent-500); }
tr.tbl-suite > td { background: var(--sous-carte); padding-top: 4px; padding-bottom: 10px; }
tr.tbl-suite[hidden], tr.tbl-suite.tbl-cache { display: none; }
.sous-lignes { width: min(100%, 760px); border-collapse: collapse; font-size: 12.5px; border-left: 2px solid var(--filet); background: var(--carte); border-radius: 0 10px 10px 0; overflow: hidden; }
.sous-lignes th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muet); padding: 7px 10px; border-bottom: 1px solid var(--filet); }
.sous-lignes td { padding: 7px 10px; border-bottom: 1px solid color-mix(in srgb, var(--filet) 60%, transparent); }
.sous-lignes tr:last-child td { border-bottom: 0; }
.sous-lignes .r { text-align: right; }
.sous-lignes small { color: var(--muet); }

/* --- Tableau de bord : l'accueil et le travail du jour en cartes ------------ */
.tb-accueil { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 26px; margin-bottom: 16px; border-radius: var(--r-carte, 18px);
  background: var(--degrade); color: #fff; box-shadow: var(--lueur); position: relative; overflow: hidden; }
.tb-accueil::after { content: ""; position: absolute; width: 260px; height: 260px; right: 120px; top: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 65%); pointer-events: none; }
.tb-salut { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.tb-resume { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .9); }
.tb-resume b { color: #fff; }
.tb-resume b.crit { background: rgba(255, 255, 255, .22); padding: 1px 8px; border-radius: var(--r-puce); }
.tb-horloge { text-align: right; position: relative; z-index: 1; }
.tb-horloge b { display: block; font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tb-horloge span { font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.tb-puces { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tb-puce { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: var(--r-puce); border: 1px solid var(--filet); background: var(--sous-carte); color: var(--encre-douce); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tb-puce b { font-size: 11.5px; }
.tb-puce.on { background: var(--encre, #1B1F3B); border-color: transparent; color: #fff; }
.tb-puce.crit:not(.on) b { color: var(--crit-fg); }
.tb-puce.warn:not(.on) b { color: var(--warn-fg); }
.tb-taches { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tb-tache { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px; border-radius: 14px; background: var(--sous-carte); border: 1px solid var(--filet); border-left: 4px solid var(--info-point, var(--accent-500)); }
.tb-tache.crit { border-left-color: var(--crit-point); background: color-mix(in srgb, var(--crit-bg) 45%, var(--carte)); }
.tb-tache.warn { border-left-color: var(--warn-point); }
.tb-tache-t { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.tb-tache-ic { font-size: 16px; }
.tb-tache b { font-size: 13px; line-height: 1.3; }
.tb-tache small { font-size: 12px; color: var(--encre-douce); }
.tb-tache-go { align-self: flex-start; margin-top: 6px; }
@media (max-width: 640px) { .tb-horloge { text-align: left; } .tb-salut { font-size: 22px; } .tb-horloge b { font-size: 32px; } }

/* Envoi de messages (WhatsApp, SMS) coupé par l'éditeur : rien ne s'affiche (le contact de l'équipe Officina, #asWa, a sa propre option). */
body.sans-messages :is([href^="https://wa.me"], [href^="sms:"], [data-g="wa"], [data-wa], [data-sms], [data-du-wa], [data-du-sms],
  [data-rs-wa], [data-rv-wa], [data-rv-awa], [data-lo-wa], [data-dv-wa], [data-bon-wa], [data-sn-wa], #cmEnvWa, .wa-seul, option[value="whatsapp"]):not(#asWa) { display: none !important; }

/* --- Espace grossiste : le portail du grossiste dans l'application ---------- */
.eg-tete { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.eg-qui { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.eg-qui .avec-sigle small { display: block; font-size: 12.5px; color: var(--encre-douce); font-weight: 500; }
.eg-kpis { margin-top: 16px; }
.eg-kpi-lien { cursor: pointer; }
.eg-kpi-lien:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
.eg-onglets { display: flex; gap: 6px; margin: 20px 0 12px; overflow-x: auto; scrollbar-width: none; }
.eg-onglets::-webkit-scrollbar { display: none; }
.eg-onglets button { flex: none; height: 34px; padding: 0 14px; border-radius: var(--r-puce); border: 1px solid var(--filet); background: var(--carte); color: var(--encre-douce); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--vite), color var(--vite); }
.eg-onglets button:hover { color: var(--encre); border-color: var(--accent-500); }
.eg-onglets button[aria-selected="true"] { background: var(--degrade); color: #fff; border-color: transparent; box-shadow: var(--lueur); }
.eg-onglets button:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
#egZone > .hint { font-size: 12.5px; color: var(--encre-douce); margin-bottom: 12px; }
.eg-sous { font-size: 13.5px; font-weight: 700; margin: 22px 0 8px; }
.eg-filtre { margin-bottom: 10px; }
.eg-filtre input { width: min(360px, 100%); min-height: 36px; padding: 0 12px; border: 1px solid var(--filet); border-radius: var(--r-champ); background: var(--carte); color: var(--encre); font: inherit; font-size: 13.5px; }
.eg-filtre input:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100); }
.eg-bloc .head { margin-bottom: 8px; }
.eg-liste { list-style: none; margin: 0; padding: 0; }
.eg-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--filet); font-size: 13.5px; }
.eg-liste li:last-child { border-bottom: 0; }
.eg-liste li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg-liste li small { flex: none; color: var(--encre-douce); font-size: 12px; }
.eg-barres { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 8px 2px 0; }
.eg-barre { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.eg-barre span { width: 100%; max-width: 34px; height: var(--h); border-radius: 7px 7px 3px 3px; background: var(--degrade); opacity: .85; transition: opacity var(--vite); }
.eg-barre:hover span { opacity: 1; }
.eg-barre small { font-size: 11px; color: var(--encre-douce); }
.eg-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.eg-chiffres div { padding: 12px 14px; border: 1px solid var(--filet); border-radius: 12px; background: var(--sous-carte); display: flex; flex-direction: column; gap: 4px; }
.eg-chiffres span { font-size: 12px; color: var(--encre-douce); }
.eg-chiffres b { font-size: 17px; font-variant-numeric: tabular-nums; }
.eg-vide { margin-top: 16px; }
@media (max-width: 720px) { .eg-tete .btns { width: 100%; } .eg-tete .btns > * { flex: 1; } }
.eg-m { white-space: nowrap; }
.eg-kpis .val { white-space: nowrap; }
@media (max-width: 720px) { .eg-kpis .val { font-size: 24px; } }
.eg-m small { display: inline !important; margin: 0 !important; }

/* Commande du jour : pourquoi ce grossiste, et qui a le produit en stock (catalogues du jour). */
.cj-raison { display: block; color: var(--accent-700); font-weight: 600; }
.cj-dispos { display: block; }
.cj-dispos span { margin-right: 8px; white-space: nowrap; }
.cj-dispos .oui { color: var(--ok-fg); }
.cj-dispos .non { color: var(--crit-fg); text-decoration: line-through; }

/* Promotions : chaque produit, son prix pendant la promotion et son stock. */
.pr-produits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pr-produits small { display: block; color: var(--encre-douce); font-size: 12px; }

/* Commandes : l'état lu sur le portail du grossiste, sous l'état de la commande. */
.etat-portail { display: block; margin-top: 3px; font-size: 12px; color: var(--encre-douce); }
.etat-portail.crit { color: var(--crit-fg); font-weight: 600; }
.journal-commande li .hint { margin-top: 2px; }

/* Options : un réglage sous l'option (fréquence du suivi des commandes). */
.op-freq { margin-top: 6px; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.op-freq label { font-weight: 600; }

/* Gestion des prix : le sens du dernier changement (▲ vert, ▼ rouge), la ligne modifiée, le bilan avant / après. */
.gp-fleche { font-size: 11px; font-weight: 800; }
.gp-fleche.hausse, .gp-hausse { color: var(--ok-fg); }
.gp-fleche.baisse, .gp-baisse { color: var(--crit-fg); }
table.tbl.gp tr.modifie td { background: color-mix(in srgb, var(--accent-50) 80%, var(--carte)); }
.gp-bilan { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.gp-bloc { border: 1px solid var(--filet); border-radius: var(--r-champ); overflow: hidden; }
.gp-bloc .t { background: var(--sous-carte); padding: 7px 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--encre-douce); }
.gp-bloc.mieux .t { background: var(--ok-bg); color: var(--ok-fg); }
.gp-bloc.moins .t { background: var(--crit-bg); color: var(--crit-fg); }
.gp-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 12px; gap: 8px; }
.gp-chiffres small { display: block; font-size: 11.5px; color: var(--encre-douce); }
.gp-chiffres b { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size: 17px; }
@media (max-width: 700px) { .gp-bilan { grid-template-columns: 1fr; } }

/* Fiche client — la vue globale du patient (six tuiles de couleur). */
.vg { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.vg-tuile { background: var(--carte); border: 1px solid var(--filet); border-top: 4px solid var(--vg, var(--filet)); border-radius: var(--r-carte, 10px); padding: 12px 14px; min-width: 0; }
.vg-titre { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--vg, inherit); margin-bottom: 8px; }
.vg-l { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--filet); }
.vg-l:last-child { border-bottom: 0; }
.vg-l span { color: var(--texte-2, inherit); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-l b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vg-l small { display: inline; opacity: .7; font-weight: 500; margin-left: 4px; }
.vg-mes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vg-mes > span:not(.hint) { font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 6px; background: var(--fond, rgba(0,0,0,.04)); }
.vg-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.vg-bleu { --vg: #1F6FEB; } .vg-vert { --vg: #1A7F37; } .vg-violet { --vg: #8250DF; }
.vg-orange { --vg: #BC4C00; } .vg-gris { --vg: #57606A; } .vg-rouge { --vg: #CF222E; } .vg-cyan { --vg: #0E7490; }
.vg-mesures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; max-width: 360px; }

/* --- Retouches d'interface (inspirées des maquettes de référence) ---------------- */

/* Les tuiles de chiffres : une teinte douce chacune (ciel, lavande, sable, menthe), comme
   des cartes que l'œil distingue d'un coup ; la tuile mise en avant garde son vert plein.
   La teinte suit la place, jamais le sens : une alerte reste dite par la couleur du chiffre. */
.kpis > .kpi:not(.dark):nth-child(4n+1) { background: color-mix(in srgb, #2F80ED 7%, var(--carte)); }
.kpis > .kpi:not(.dark):nth-child(4n+2) { background: color-mix(in srgb, #7C5CDB 7%, var(--carte)); }
.kpis > .kpi:not(.dark):nth-child(4n+3) { background: color-mix(in srgb, #E8A23B 8%, var(--carte)); }
.kpis > .kpi:not(.dark):nth-child(4n+4) { background: color-mix(in srgb, #1FA67A 7%, var(--carte)); }

/* Dans une ligne de tableau, l'action est discrète : une pastille claire, pas un gros bouton
   plein répété à chaque ligne ; elle s'affirme au survol. */
.tbl tbody .btn:not(.ghost):not(.danger):not(.lime) { background: var(--accent-50); color: var(--accent-700); box-shadow: none; border-color: transparent; }
.tbl tbody .btn:not(.ghost):not(.danger):not(.lime):hover { background: var(--accent-600); color: #fff; box-shadow: 0 6px 16px -8px var(--accent-500); }

/* Un n° de pièce tient sur une ligne (voir tableaux.js). */
.tbl td.piece { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Assurances acceptées : le formulaire d'une assurance, en blocs. */
.as-form .as-bloc { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--filet); }
.as-form .as-bloc:last-of-type { border-bottom: 0; }
.as-form h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; color: var(--encre-douce); }
.as-choix { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--filet); border-radius: 12px; cursor: pointer; font-size: 13px; line-height: 1.4; }
.as-choix input { margin-top: 3px; }
.as-choix:has(input:checked) { border-color: var(--accent-600); background: var(--accent-50); }

/* Commande sur le portail : trouver le code du grossiste d'un produit, dans son catalogue. */
.pt-codes { margin: 10px 0 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--filet); background: var(--carte); display: flex; flex-direction: column; gap: 10px; }
.pt-code-l { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--filet); }
.pt-code-nom { font-weight: 600; font-size: 13.5px; }
.pt-code-rech { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pt-code-rech input { flex: 1 1 160px; min-width: 120px; }
.pt-code-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-code-liste li { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--sous-carte); }
.pt-code-liste li > span { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.pt-code-liste small { color: var(--muet); font-size: 11.5px; }

/* Espace grossiste : le détail d'un document, dans le tiroir. */
.eg-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.eg-stats > div { flex: 1 1 110px; padding: 10px 12px; border-radius: 12px; background: var(--sous-carte); border: 1px solid var(--filet); display: flex; flex-direction: column; gap: 2px; }
.eg-stats span { font-size: 11.5px; color: var(--muet); }
.eg-stats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.eg-stats small { font-size: 11px; color: var(--muet); }
/* Segments de clientèle : chaque groupe est un bouton qui filtre la liste. */
.sg-groupe { text-align: left; cursor: pointer; font: inherit; color: inherit; }
.sg-groupe.on { outline: 2px solid var(--accent-600); outline-offset: -2px; }

/* Options, droits des rôles : des changements en attente → la barre d'enregistrement suit, en bas de l'écran. */
.barre-enregistrer.en-attente { position: sticky; bottom: 0; z-index: 3; background: var(--carte, #fff); border-top: 1px solid var(--filet); padding: 10px 12px; margin-left: -12px; margin-right: -12px; box-shadow: 0 -6px 14px rgba(0,0,0,.06); }

/* Une carte d'indicateur qui filtre la liste dessous (Péremptions). */
button.kpi { text-align: left; font: inherit; color: inherit; border: 1px solid transparent; cursor: pointer; width: 100%; }
button.kpi:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
button.kpi.choisi { border-color: var(--accent-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 18%, transparent), var(--ombre-haute); }
.puces-filtre { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pages { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pages .btn.sm { min-width: 34px; justify-content: center; }
.pages-saut { color: var(--muet); padding: 0 2px; }

/* Actions d'une ligne en surimpression (Médicaments) : au repos un « ⋯ », au survol les boutons
   par-dessus la fin de la ligne — la colonne ne prend plus la place des noms. Sur tablette : visibles. */
@media (hover: hover) and (pointer: fine) {
  table.tbl tbody td.act-survol { position: relative; width: 36px; min-width: 36px; padding-left: 0; padding-right: 0; }
  table.tbl tbody td.act-survol > span { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 2;
    background: var(--carte); border-radius: 10px; box-shadow: var(--ombre-haute); padding: 4px; opacity: 0; transition: opacity var(--vite, .15s); }
  table.tbl tbody tr:is(:hover, :focus-within) td.act-survol > span { opacity: 1; }
  table.tbl tbody td.act-survol::after { content: "⋯"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 18px; font-weight: 800; color: var(--muet-clair); pointer-events: none; }
  table.tbl tbody tr:is(:hover, :focus-within) td.act-survol::after { opacity: 0; }
}

/* L'écran d'équipe (Équipe → Planning → 📺) : plein écran, sans menu ni bulle, lisible de loin. */
body.plein-ecran .side, body.plein-ecran .top, body.plein-ecran .onglets, body.plein-ecran .sous-onglets, body.plein-ecran .ia-bulle, body.plein-ecran .ia-panneau { display: none !important; }
body.plein-ecran .app { grid-template-columns: minmax(0, 1fr); }
body.plein-ecran .body { padding: 24px 32px; }
.ee-haut { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ee-heure { font-size: 64px; font-weight: 800; line-height: 1; color: var(--accent-700); font-variant-numeric: tabular-nums; }
.ee-date { font-size: 20px; color: var(--encre-douce); margin-top: 6px; }
.ee-date::first-letter { text-transform: uppercase; }
.ee-actions { display: flex; gap: 8px; opacity: .6; }
.ee-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.ee-bloc { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 18px 20px; }
.ee-bloc h2 { font-size: 18px; margin: 0 0 12px; }
.ee-carte { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: color-mix(in srgb, var(--c2) 35%, var(--carte)); border-left: 6px solid var(--c1); }
.ee-carte b { display: block; font-size: 15px; }
.ee-carte small { display: block; color: var(--encre-douce); font-size: 12.5px; }
.ee-carte.ee-grande b { font-size: 20px; }
.ee-carte.ee-grande small { font-size: 14px; }
.ee-carte .ee-etat { font-weight: 700; }
.ee-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c1); color: #fff; font-weight: 800; }
.ee-grande .ee-av { width: 48px; height: 48px; font-size: 18px; }
.ee-garde { padding: 6px 0; font-size: 15px; }
.ee-vide { color: var(--muet); margin: 4px 0; }
.ee-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ee-jour { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 10px; min-width: 0; }
.ee-jour h3 { font-size: 14px; margin: 0 0 8px; text-align: center; }
.ee-jour.ee-auj h3 { background: var(--accent-600); color: #fff; border-radius: 999px; padding: 3px 0; }
.ee-jour .ee-carte { padding: 6px 8px; gap: 6px; }
.ee-jour .ee-av { width: 26px; height: 26px; font-size: 11px; }
.ee-jour .ee-carte b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .ee-semaine { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ee-heure { font-size: 44px; } .ee-grille { grid-template-columns: minmax(0, 1fr); } body.plein-ecran .body { padding: 16px; } }

/* --- Ventes par produit : le graphique (barres = vendus, courbe = stock restant) --- */
.vp-graphe { position: relative; height: 200px; margin-top: 6px; }
.vp-graphe svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vp-graphe .grille { stroke: var(--filet); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vp-graphe .barre { fill: var(--accent-500); opacity: .75; }
.vp-graphe .barre.fin { fill: var(--accent-700); opacity: 1; }
.vp-graphe .stock { fill: none; stroke: var(--info-point); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vp-axe { display: flex; font-size: 11px; color: var(--muet); margin-top: 4px; }
.vp-axe span { flex: 1 1 0; text-align: center; white-space: nowrap; overflow: hidden; }
.vp-legende { display: flex; gap: 16px; font-size: 12px; color: var(--encre-douce); margin-top: 8px; }
.vp-legende span::before { content: ''; display: inline-block; width: 12px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.vp-legende .v::before { background: var(--accent-500); }
.vp-legende .s::before { height: 3px; vertical-align: 3px; background: var(--info-point); }
.vp-periodes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vp-boites { color: var(--muet); font-weight: 500; }
.tbl tr.vp-choisi td { background: color-mix(in srgb, var(--accent-500) 12%, transparent); }

/* --- Un champ de recherche, partout comme celui du Catalogue (A.champRecherche) --- */
.form.recherche { margin-bottom: 12px; align-items: end; }
.form.recherche .recherche-apres { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.et-cherche .form.recherche { margin-bottom: 0; flex: 1; }

/* ==========================================================================
   Refonte « clair » (octobre 2026) — inspirée des tableaux de bord de santé
   modernes : barre latérale claire, fond gris doux, cartes blanches arrondies,
   onglets en pastilles, chiffres affirmés. Uniquement des jetons : le mode
   sombre et la couleur de chaque pharmacie suivent d'eux-mêmes.
   ========================================================================== */
:root { --r-carte: 16px; --r-champ: 10px; --ombre-carte: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px -8px rgba(16, 24, 40, .08); }
:root:not([data-mode="sombre"]) { --fond: #F2F4F3; --filet: #E5E8E7; --sous-carte: #F7F8F8; }

/* Menu clair (au choix de l'officine) : le contenu passe devant, l'actif est une pastille teintée. */
:root[data-menu="clair"] .side { background: var(--carte); color: var(--encre-douce); border-right: 1px solid var(--filet); }
:root[data-menu="clair"] .brand .t { color: var(--encre); }
:root[data-menu="clair"] .brand .s { color: var(--muet); }
:root[data-menu="clair"] .choix-officine { border-color: var(--filet); background: var(--sous-carte); color: var(--encre); }
:root[data-menu="clair"] .nav .titre-groupe { color: var(--muet-clair); }
:root[data-menu="clair"] .nav .titre-groupe.filet { background: var(--filet); }
:root[data-menu="clair"] .nav a { color: var(--encre-douce); font-weight: 600; }
:root[data-menu="clair"] .nav a:hover { background: var(--sous-carte); color: var(--encre); }
:root[data-menu="clair"] .nav a .tx small { color: var(--muet); }
:root[data-menu="clair"] .nav a.on { background: var(--accent-50); color: var(--accent-700); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-500) 20%, transparent); }
:root[data-menu="clair"] .nav a.on .tx small { color: var(--accent-700); }
/* Menu de couleur (vert forêt par défaut) : la rubrique active, une pastille claire, sans trait sur le bord. */
.nav a.on::before { display: none; }
:root:not([data-menu="clair"]) .nav a.on { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.nav a .ic { color: inherit; }

/* En-tête : net, sans verre dépoli. */
.top { background: var(--fond); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.top h1 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; }
.top .search { background: var(--carte); border-radius: 12px; }

/* Les écrans d'une rubrique : une barre de pastilles, l'écran ouvert en sombre. */
.onglets { padding-top: 4px; gap: 6px; }
.onglets a { border-radius: 999px; height: 34px; padding: 0 14px; color: var(--encre-douce); font-weight: 600; }
.onglets a:hover { background: var(--carte); color: var(--encre); }
.onglets a.on { background: var(--encre); color: var(--carte); box-shadow: 0 4px 12px -6px rgba(16, 24, 40, .45); font-weight: 700; }
.sous-onglets a { border-radius: 999px; background: transparent; border-color: var(--filet); }
.sous-onglets a:hover { background: var(--carte); color: var(--encre); }
.sous-onglets a.on { background: var(--accent-50); color: var(--accent-700); border-color: color-mix(in srgb, var(--accent-500) 35%, transparent); box-shadow: none; }

/* Cartes et panneaux : plus d'air, un filet fin, une ombre à peine. */
.panel { border-radius: var(--r-carte); border: 1px solid var(--filet); box-shadow: var(--ombre-carte); padding: 20px 22px; }
.panel .head h2, .panel > h2 { font-size: 16px; letter-spacing: -.01em; }
.kpi { border-radius: var(--r-carte); border: 1px solid var(--filet); box-shadow: var(--ombre-carte); }
.kpi .val { font-size: 30px; font-weight: 750; letter-spacing: -.03em; }
.kpi .lab { font-size: 13px; }

/* L'accueil du tableau de bord : une carte claire, l'accent sur l'heure. */
.tb-accueil { background: var(--carte); color: var(--encre); border: 1px solid var(--filet); box-shadow: var(--ombre-carte); }
.tb-accueil::after { display: none; }
.tb-accueil .tb-resume { color: var(--encre-douce); }
.tb-accueil .tb-resume b { color: var(--encre); }
.tb-accueil .tb-resume b.crit { background: var(--crit-bg); color: var(--crit-fg); }
.tb-accueil .tb-horloge b { color: var(--accent-700); }
.tb-accueil .tb-horloge span { color: var(--muet); }

/* Tableaux : en-tête neutre, noms à l'encre, survol discret. */
table.tbl th { background: var(--sous-carte); color: var(--muet); border-bottom: 1px solid var(--filet); font-weight: 650; letter-spacing: .04em; }
table.tbl tbody tr:hover td { background: var(--sous-carte); }
table.tbl td button.lien, table.tbl td a.lien { color: var(--encre); }
table.tbl td button.lien:hover, table.tbl td a.lien:hover { color: var(--accent-700); }

/* Champs et boutons : un peu plus ronds, mêmes hauteurs. */
.btn { border-radius: 11px; }
.form input, .form select, .form textarea { border-radius: 11px; }

/* L'indicateur mis en avant : une carte pastel à la couleur de la pharmacie (mode clair). */
:root:not([data-mode="sombre"]) .kpi.dark { background: var(--accent-100); color: var(--accent-900); border-color: transparent; box-shadow: var(--ombre-carte); }
:root:not([data-mode="sombre"]) .kpi.dark .lab, :root:not([data-mode="sombre"]) .kpi.dark .dl, :root:not([data-mode="sombre"]) .kpi.dark .tb-bas,
:root:not([data-mode="sombre"]) .kpi.dark .tb-cmp, :root:not([data-mode="sombre"]) .kpi.dark .val small { color: color-mix(in srgb, var(--accent-900) 78%, transparent) !important; }
:root:not([data-mode="sombre"]) .kpi.dark .tb-bas b { color: var(--accent-900); }
:root:not([data-mode="sombre"]) .kpi.dark .dl.up, :root:not([data-mode="sombre"]) .kpi.dark .dl.down { background: rgba(255, 255, 255, .7); color: var(--accent-900); }
:root:not([data-mode="sombre"]) .kpi.dark .tb-ico { background: var(--accent-600) !important; color: #fff !important; }
:root:not([data-mode="sombre"]) .kpi.dark .courbette polyline { stroke: var(--accent-700); }
:root:not([data-mode="sombre"]) .kpi.dark .courbette polygon { fill: var(--accent-500); opacity: .2; }

/* La recherche du cahier de liaison et des procédures : comme celle du Catalogue (plus de pilule rose). */
.li-tete .form.recherche { flex: 1 1 260px; margin: 0; }
.li-tete .form.recherche input[type=search] { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--filet); border-radius: var(--r-champ); background: var(--carte); color: var(--encre); font-size: 14px; }
.li-tete .form.recherche input[type=search]:focus { border-color: var(--accent-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-500) 18%, transparent); background: var(--carte); }

/* Réception : la péremption à saisir, surlignée tant qu'elle manque. */
input.rc-manque { border-color: var(--crit-fg) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--crit-fg) 25%, transparent); }

/* Photos des produits : la vignette remplace les initiales. */
.med-av.photo { background: #fff; padding: 0; overflow: hidden; box-shadow: inset 0 0 0 1px var(--filet); }
.med-av.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-voile .dialogue { max-width: min(92vw, 680px); }
.photo-voile .dialogue img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 12px; }

/* Le menu « Plus » des onglets, ouvert : au premier plan, rattaché à la page. */
.onglets-plus-menu { position: fixed; z-index: 1000; min-width: 220px; padding: 6px; background: var(--carte); border: 1px solid var(--filet); border-radius: 12px; box-shadow: 0 12px 32px rgba(27,31,59,.14); }
.onglets-plus-menu[hidden] { display: none; }
.onglets-plus-menu a { display: flex; align-items: center; height: 36px; width: 100%; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--encre-douce); cursor: pointer; text-decoration: none; }
.onglets-plus-menu a:hover { background: var(--accent-50); color: var(--accent-700); }
.onglets-plus-menu a.on { background: var(--accent-50); color: var(--accent-700); }
#idFeuillesT tr.sel td { background: var(--info-bg); }

/* Feuille d'inventaire : rayon par rayon, chaque ligne enregistrée en la tapant. */
#invTable tr.inv-tete-rayon td { background: var(--sous-carte); color: var(--encre); font-size: 13px; padding-top: 10px; padding-bottom: 8px; border-top: 1px solid var(--filet); }
#invTable tr.inv-tete-rayon small { color: var(--muet); font-weight: 500; margin-left: 6px; }
.inv-compte { white-space: nowrap; }
.inv-etat { display: inline-block; width: 18px; margin-left: 6px; text-align: center; font-weight: 800; font-size: 13px; color: var(--muet); }
.inv-etat.ok { color: var(--ok-fg, #067647); }
.inv-etat.err { color: var(--crit-fg, #B42318); cursor: help; }
#invTable tr.inv-arrive td { background: color-mix(in srgb, var(--ok-bg, #e6f4ea) 80%, transparent); transition: background .6s; }
.inv-rayons { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.inv-rayon-case { padding: 10px 12px; border: 1px solid var(--filet); border-radius: 12px; background: var(--carte); }
.inv-rayon-case small { color: var(--muet); }
/* Entrée de stock : une ligne entrée en stock reste visible, grisée. */
#esTable tr.es-fait td { background: color-mix(in srgb, var(--ok-bg, #e6f4ea) 55%, transparent); }

/* Commande du grossiste : indice, prix de vente et péremption de chaque ligne, saisis dans le tableau. */
.gc-ind, .gc-pv, .gc-per { width: 78px; padding: 4px 6px; border: 1px solid var(--filet); border-radius: 7px; background: var(--carte); color: var(--encre); font: inherit; font-variant-numeric: tabular-nums; }
.gc-ind, .gc-pv { text-align: right; }
.gc-pv { width: 92px; }
.gc-per:disabled { background: transparent; border-color: transparent; color: var(--encre-douce); }

/* Exporter toute la feuille : deux petits boutons côte à côte (Excel, CSV). */
.btns-export { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.gc-indice { white-space: nowrap; }
.gc-cat { max-width: 190px; padding: 4px 6px; border: 1px solid var(--filet); border-radius: 7px; background: var(--carte); color: var(--encre); font: inherit; font-size: 13px; }
.gc-indice .gc-ind:not([hidden]) { margin-left: 4px; }
/* ==========================================================================
   Finition « pro » (novembre 2026) — même identité (vert forêt, Public Sans,
   cartes arrondies, pastilles), plus de régularité : une seule échelle
   d'espacements, des cartes posées sur une ombre douce plutôt qu'un filet,
   des titres et des chiffres hiérarchisés, des tableaux aérés, des
   pastilles « teintées » au lieu des dégradés, des champs et des boutons de
   même hauteur. Couche finale : uniquement des jetons et des composants
   communs, le mode sombre et la couleur de chaque pharmacie suivent.
   ========================================================================== */
:root {
  --r-carte: 12px; --r-champ: 8px;
  --ombre-carte: 0 1px 2px rgba(16, 24, 40, .04), 0 3px 10px -2px rgba(16, 24, 40, .07);
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px;
  --texte-titre: var(--encre);
}
:root:not([data-mode="sombre"]) { --fond: #F4F6F5; --filet: #E6E9E7; --sous-carte: #F8FAF9; --encre-douce: #5B6660; --muet: #5B6660; }

/* En-tête : le titre net, le sous-titre discret. */
.top h1 { font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
.top .sub { font-size: 13px; color: var(--muet); }
.titre-ico { border-radius: 10px; box-shadow: none; }
.top .search { height: 40px; border-radius: var(--r-champ); border-color: var(--filet); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }

/* Onglets : la pastille ouverte à la couleur de la pharmacie, plus d'encre noire. */
.onglets a { height: 36px; font-weight: 550; }
.onglets a.on { background: var(--accent-600); color: #fff; box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent-600) 70%, transparent); }
.sous-onglets a { height: 32px; font-weight: 550; }

/* Cartes et panneaux : une ombre douce au lieu du filet, des marges régulières. */
.panel, .kpi, .tb-accueil { border: 0; box-shadow: var(--ombre-carte); border-radius: var(--r-carte); }
.panel { padding: var(--esp-5) var(--esp-6); }
.panel > h2, .panel .head h2 { font-size: 16px; font-weight: 650; color: var(--texte-titre); letter-spacing: -.005em; }
.panel > .hint, .panel .head .hint { font-size: 13px; color: var(--muet); line-height: 1.5; }
.panel .head { margin-bottom: var(--esp-4); }
.stack, .grid2, .grid2b, .grid3, .kpis { gap: var(--esp-5); }

/* Indicateurs : cartes blanches, une icône teintée, le chiffre affirmé. */
.kpis > .kpi:not(.dark):nth-child(n) { background: var(--carte); }
.kpi { padding: var(--esp-5) var(--esp-6); }
.kpi .lab { font-size: 13.5px; font-weight: 550; color: var(--encre-douce); }
.kpi .val { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--texte-titre); }
.tb-ico, .tb-ico.violet, .tb-ico.ok, .tb-ico.info { width: 36px; height: 36px; border-radius: 10px; box-shadow: none;
  background: var(--accent-50) !important; color: var(--accent-700) !important; }
.tb-ico.crit { background: var(--crit-bg) !important; color: var(--crit-fg) !important; }
.tb-ico svg { width: 18px; height: 18px; }
:root:not([data-mode="sombre"]) .kpi.dark { background: var(--carte); color: var(--encre); box-shadow: var(--ombre-carte), inset 0 3px 0 var(--accent-500); }
:root:not([data-mode="sombre"]) .kpi.dark :is(.lab, .dl, .tb-bas, .tb-cmp, .val small) { color: var(--encre-douce) !important; }
:root:not([data-mode="sombre"]) .kpi.dark .val { color: var(--accent-700); }
:root:not([data-mode="sombre"]) .kpi.dark .tb-ico { background: var(--accent-50) !important; color: var(--accent-700) !important; }
.tb-kpi-lien:hover, .tb-kpi-lien:focus-visible { transform: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 22px -8px rgba(16, 24, 40, .16); }

/* Accueil et travail du jour : une ligne de bienvenue, des puces régulières. */
.tb-accueil { padding: var(--esp-5) var(--esp-6); }
.tb-salut { font-size: 22px; font-weight: 700; }
.tb-horloge b { font-size: 34px; font-weight: 700; }
.tb-puce { min-height: 32px; padding: 0 12px; font-weight: 550; background: var(--carte); }
.tb-puce.on { background: var(--accent-50); color: var(--accent-700); border-color: color-mix(in srgb, var(--accent-500) 40%, transparent); }

/* Boutons : un aplat franc, la même hauteur que les champs. */
.btn { min-height: 38px; border-radius: var(--r-champ); background-image: none; background-color: var(--accent-600); font-weight: 600; letter-spacing: .005em;
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--accent-600) 55%, transparent); }
.btn:hover { transform: none; filter: none; background-color: var(--accent-700); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent-600) 60%, transparent); }
.btn.sm { min-height: 32px; padding: 0 12px; }
.btn.ghost { background-color: var(--carte); border-color: var(--filet); color: var(--encre); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.btn.ghost:hover { background-color: var(--sous-carte); border-color: color-mix(in srgb, var(--accent-500) 45%, var(--filet)); color: var(--accent-700); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.btn.lime { box-shadow: none; }
.btn.danger { box-shadow: none; }

/* Champs : 40 px partout, un liseré net, l'anneau de la pharmacie au focus. */
.form input:not([type=checkbox]):not([type=radio]):not([type=range]), .form select, .form textarea {
  min-height: 40px; border-radius: var(--r-champ); border: 1px solid var(--filet); background-color: var(--carte); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 18%, transparent); outline: none; }
.form label { font-size: 13px; font-weight: 600; color: var(--encre-douce); }

/* Pastilles : teintées, le mot avant le décor. */
.chip { font-weight: 600; padding: 2px 10px; }
.tag { font-weight: 600; background: var(--sous-carte); color: var(--encre-douce); box-shadow: inset 0 0 0 1px var(--filet); }

/* Tableaux : en-tête léger, lignes aérées, survol à peine marqué. */
table.tbl th { background: transparent; font-size: 12px; font-weight: 650; letter-spacing: .06em; color: var(--muet); padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--filet); }
table.tbl td { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--filet) 70%, transparent); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: color-mix(in srgb, var(--accent-50) 45%, var(--carte)); }

/* Initiales d'un produit : un carré teinté, sans dégradé ni rotation. */
.med-av { background: color-mix(in srgb, var(--c) 14%, var(--carte)); color: color-mix(in srgb, var(--c) 78%, #111); box-shadow: none; border-radius: 10px; font-weight: 700; }
.med-av.sm { border-radius: 7px; }
.med-av.lg { border-radius: 14px; }
tr:hover .med-av { transform: none; }

/* Médicaments : la recherche nette, les filtres et les outils sous un filet. */
.lecteur { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.md-recherche .md-tete { align-items: flex-start; flex-wrap: wrap; }
.md-recherche .md-outils { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--filet); }
.md-recherche .md-outils .md-lbl { margin-right: 6px; }
@media (max-width: 600px) { .md-recherche #mdForm { grid-template-columns: 1fr !important; } .md-recherche #mdForm .btn { width: 100%; } }
.md-recherche #mdQ { min-height: 44px; font-size: 15px; }
.md-recherche .md-lbl { display: block; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muet); }
/* Médicaments : la barre de lettres et les niveaux de stock, réguliers. */
#mdLettres { gap: 4px !important; }
/* Les 28 lettres sur une seule ligne régulière à l'ordinateur ; au doigt, des cases de 40 px. */
#mdLettres .btn { flex: 1 0 28px; max-width: 44px; min-width: 0 !important; min-height: 32px; padding: 0; font-weight: 600; }
@media (pointer: coarse), (max-width: 700px) { #mdLettres .btn { flex: 0 0 40px; min-height: 40px; } }

/* Mon travail du jour : une tâche par ligne, compacte (plus de grosses cartes) ; deux colonnes sur un grand écran. */
.tb-taches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 6px 12px; }
.tb-tache { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 10px; background: var(--carte); border: 1px solid var(--filet); border-left: 3px solid var(--info-point, var(--accent-500)); min-height: 52px; }
.tb-tache.crit { background: color-mix(in srgb, var(--crit-bg) 35%, var(--carte)); border-left-color: var(--crit-point); }
.tb-tache.warn { border-left-color: var(--warn-point); }
.tb-tache > .chip { flex: none; font-size: 11.5px; padding: 1px 8px; }
.tb-tache-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tb-tache-tx b { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-tache-tx small { font-size: 12.5px; color: var(--encre-douce); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tb-tache-tx small:empty { display: none; }
@media print { .tb-tache-tx b, .tb-tache-tx small { white-space: normal; -webkit-line-clamp: unset; } }
.tb-tache .tb-tache-go { flex: none; align-self: center; margin: 0; min-height: 32px; }
@media (max-width: 520px) { .tb-tache { flex-wrap: wrap; } .tb-tache-tx { flex-basis: calc(100% - 110px); } .tb-tache .tb-tache-go { margin-left: auto; } }

/* ==========================================================================
   Habillage v3 (novembre 2026) — la carrure d'un grand tableau de bord
   (barre du haut flottante, cartes sur une ombre ample, indicateurs à
   pastille teintée et courbe pleine largeur), sans les tics des interfaces
   générées : ni dégradé décoratif, ni lueur colorée, ni bulle en filigrane,
   ni point de couleur devant chaque mot, ni flèche au bout des boutons ; des
   icônes dessinées d'un seul jeu (Tabler), jamais d'emoji. Couche finale ;
   uniquement des jetons, le mode sombre et la couleur de chaque pharmacie suivent.
   ========================================================================== */
:root {
  --r-carte: 14px; --r-champ: 9px;
  --ombre-carte: 0 2px 4px -2px rgba(16, 24, 40, .06), 0 6px 20px -6px rgba(16, 24, 40, .10);
  --ombre-flotte: 0 4px 24px -6px rgba(16, 24, 40, .16);
}
:root:not([data-mode="sombre"]) { --fond: #F3F5F4; --filet: #E7EAE8; --encre: #1F2A24; --encre-douce: #5D6862; --muet: #6A756F; }
/* Les chiffres en colonnes (et l'horloge qui tourne) : des chiffres de même largeur, qui s'alignent d'une ligne à l'autre ;
   un grand chiffre seul garde ses chiffres proportionnels. */
table.tbl td.n, table.tbl td.r, .tb-horloge b, .tb-rang { font-variant-numeric: tabular-nums; }

/* Menu : la rubrique ouverte en aplat franc, sans lueur ; le survol en voile. */
.side { padding: 20px 14px; }
.nav a { border-radius: 10px; min-height: 42px; font-weight: 500; transition: background var(--vite), color var(--vite); }
.nav a .ic .ico { width: 21px; height: 21px; }
:root:not([data-menu="clair"]) .nav a:hover { background: rgba(255, 255, 255, .09); }
:root:not([data-menu="clair"]) .nav a.on { background: #fff; color: var(--accent-700); font-weight: 650; box-shadow: none; }
:root:not([data-menu="clair"]) .nav a.on .ic { color: var(--accent-600); }
:root:not([data-menu="clair"]) .nav a.on .tx small { color: var(--encre-douce); }
:root[data-menu="clair"] .nav a.on { background: var(--accent-600); color: #fff; box-shadow: none; }
.nav .titre-groupe { font-size: 11.5px; letter-spacing: .12em; }
.brand .logo { border-radius: 12px; box-shadow: none; }

/* Barre du haut : une carte qui flotte au-dessus de la page. */
.top { margin: 14px 24px 0; border-radius: 14px; background: color-mix(in srgb, var(--carte) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ombre-flotte); border: 1px solid color-mix(in srgb, var(--filet) 70%, transparent); min-height: 64px; padding: 10px 18px; }
.top h1 { font-size: 20px; font-weight: 700; }
.top .search { background: var(--sous-carte); border-color: transparent; box-shadow: none; border-radius: 10px; }
.top .search:focus-within { background: var(--carte); border-color: var(--accent-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 18%, transparent); }
.top .av { box-shadow: 0 0 0 2px var(--carte), 0 0 0 3px var(--filet); }
.titre-ico { background: color-mix(in srgb, var(--accent-500) 14%, var(--carte)); color: var(--accent-700); border-radius: 11px; }
.onglets { padding: 14px 24px 2px; gap: 6px; }
.onglets a { height: 38px; padding: 0 16px; border-radius: 10px; font-weight: 550; }
.onglets a:hover { background: color-mix(in srgb, var(--accent-500) 9%, transparent); color: var(--accent-700); }
.onglets a.on { background: var(--accent-600); color: #fff; box-shadow: none; }
.sous-onglets { padding-left: 24px; padding-right: 24px; }
.sous-onglets a { border-radius: 9px; background: transparent; border: 0; }
.sous-onglets a:hover { background: color-mix(in srgb, var(--accent-500) 8%, transparent); color: var(--accent-700); }
.sous-onglets a.on { background: color-mix(in srgb, var(--accent-500) 14%, var(--carte)); color: var(--accent-700); border: 0; box-shadow: none; }

/* Cartes : l'ombre ample, sans filet, des en-têtes qui respirent. */
.panel, .kpi { border: 0; box-shadow: var(--ombre-carte); border-radius: var(--r-carte); }
.panel { padding: 22px 24px; }
.panel > h2, .panel .head h2 { font-size: 17px; font-weight: 650; }
.panel .head { margin-bottom: 18px; }

/* Indicateurs : pastille teintée, chiffre fort, tendance en badge, courbe pleine largeur. */
.kpi.tb-kpi { padding: 20px 22px 0; display: flex; flex-direction: column; min-height: 168px; overflow: hidden; }
.kpi.tb-kpi .lab { font-size: 14px; font-weight: 550; color: var(--encre-douce); gap: 12px; padding-right: 0; }
.tb-ico, .tb-ico.violet, .tb-ico.ok, .tb-ico.info { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent-500) 15%, var(--carte)) !important; color: var(--accent-700) !important; box-shadow: none; }
.tb-ico.info { background: color-mix(in srgb, var(--info-point) 15%, var(--carte)) !important; color: var(--info-fg) !important; }
.tb-ico.ok { background: color-mix(in srgb, var(--ok-point) 15%, var(--carte)) !important; color: var(--ok-fg) !important; }
.tb-ico.crit { background: color-mix(in srgb, var(--crit-point) 15%, var(--carte)) !important; color: var(--crit-fg) !important; }
.tb-ico svg { width: 21px; height: 21px; }
.kpi.tb-kpi .val { margin-top: 14px; font-size: 30px; font-weight: 750; letter-spacing: 0; }
.kpi.tb-kpi .val small { font-size: 15px; font-weight: 600; }
.kpi.tb-kpi .tb-bas { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi .dl.up, .kpi .dl.down { border-radius: 7px; padding: 2px 8px; font-size: 12.5px; }
.kpi .dl.up { background: color-mix(in srgb, var(--ok-point) 15%, var(--carte)); color: var(--ok-fg); }
.kpi .dl.down { background: color-mix(in srgb, var(--crit-point) 14%, var(--carte)); color: var(--crit-fg); }
.kpi.tb-kpi .courbette { order: 10; position: static; display: block; width: calc(100% + 44px); height: 64px; margin: auto -22px 0; padding-top: 12px; color: var(--accent-500); overflow: visible; }
.kpi.tb-kpi .courbette .trait { fill: none; stroke: var(--accent-600); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi.tb-kpi .courbette .aire { fill: currentColor; fill-opacity: .1; }
.kpi.tb-kpi .courbette .brut { display: none; }
.kpi.tb-kpi .courbette.barres { width: calc(100% - 0px); margin: auto 0 0; padding: 12px 0 16px; color: var(--info-point); }
.kpi .courbette.barres rect { fill: color-mix(in srgb, var(--info-point) 45%, var(--carte)); }
.kpi .courbette.barres rect.recent { fill: var(--info-point); opacity: 1; }
:root:not([data-mode="sombre"]) .kpi.dark { background: var(--carte); box-shadow: var(--ombre-carte); }
:root:not([data-mode="sombre"]) .kpi.dark .val { color: var(--encre); }
.kpi.tb-kpi:not(:has(.courbette)) { padding-bottom: 20px; }

/* Accueil : une carte comme les autres — le bonjour, la journée en une ligne, l'heure. */
.tb-accueil { border: 0; padding: 22px 26px; border-radius: var(--r-carte); background: var(--carte); color: var(--encre); box-shadow: var(--ombre-carte); }
.tb-accueil .tb-salut { font-size: 22px; font-weight: 700; color: var(--encre); letter-spacing: -.01em; }
.tb-accueil .tb-resume { color: var(--encre-douce); font-size: 14.5px; margin-top: 6px; }
.tb-accueil .tb-resume b { color: var(--encre); }
.tb-accueil .tb-resume b.crit { background: var(--crit-bg); color: var(--crit-fg); padding: 1px 8px; border-radius: 6px; }
.tb-accueil .tb-horloge b { color: var(--accent-700) !important; font-size: 34px; font-weight: 700; text-shadow: none; }
.tb-accueil .tb-horloge span { color: var(--muet); }

/* Mon travail du jour : des onglets à compteur, une liste à icônes. */
.tb-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tb-onglet { border-radius: 10px !important; }
.tb-taches { display: flex; flex-direction: column; gap: 0; }
.tb-tache { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 12px 6px; min-height: 0; border: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--filet); }
.tb-tache:last-child { border-bottom: 0; }
.tb-tache.crit, .tb-tache.warn { background: transparent; border-left: 0; }
.tb-tache-av { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--info-point) 14%, var(--carte)); color: var(--info-fg); }
.tb-tache.crit .tb-tache-av { background: color-mix(in srgb, var(--crit-point) 14%, var(--carte)); color: var(--crit-fg); }
.tb-tache.warn .tb-tache-av { background: color-mix(in srgb, var(--warn-point) 16%, var(--carte)); color: var(--warn-fg); }
.tb-tache-av svg { width: 20px; height: 20px; }
.tb-tache-tx { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; align-items: center; }
.tb-tache-tx > b { grid-column: 1; grid-row: 1; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tb-tache-tx > small { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--muet); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
/* Une tâche : le titre et son détail à gauche, l'urgence en badge à droite (le titre ne se fait plus écraser). */
.tb-tache-tx > .chip { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; font-size: 11px; padding: 0 8px; }
.tb-tache .tb-tache-go { flex: none; min-height: 34px; background-color: color-mix(in srgb, var(--accent-500) 13%, var(--carte)); color: var(--accent-700); box-shadow: none; border: 0; }
.tb-tache .tb-tache-go:hover { background-color: var(--accent-600); color: #fff; }
@media (max-width: 560px) {
  /* Téléphone : l'icône et le texte sur une ligne (le badge au-dessus du titre), le bouton dessous. */
  .tb-tache { flex-wrap: wrap; row-gap: 8px; }
  .tb-tache-tx { flex: 1 1 calc(100% - 54px); grid-template-columns: minmax(0, 1fr); }
  .tb-tache-tx > .chip { grid-column: 1; grid-row: 1; justify-self: start; margin-bottom: 3px; }
  .tb-tache-tx > b { grid-column: 1; grid-row: 2; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .tb-tache-tx > small { grid-column: 1; grid-row: 3; -webkit-line-clamp: 2; line-clamp: 2; }
  .tb-tache .tb-tache-go { margin-left: 54px; }
  .tb-onglets { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .tb-onglets::-webkit-scrollbar { display: none; }
  .tb-onglet { flex: none; }
}

/* Tableaux : en-tête teinté, lignes de 52 px. */
table.tbl th { background: var(--sous-carte); font-size: 12px; letter-spacing: .07em; color: var(--encre-douce); border-bottom: 0; padding-top: 13px; padding-bottom: 13px; }
table.tbl th:first-child { border-radius: 10px 0 0 10px; } table.tbl th:last-child { border-radius: 0 10px 10px 0; }
table.tbl td { padding-top: 13px; padding-bottom: 13px; }

/* Pastilles : teintées, le mot seul — pas de point de couleur devant, rien qui clignote. */
.chip { padding: 2px 10px; font-weight: 600; }
.chip::before { content: none !important; display: none !important; animation: none !important; }
.chip.ok { background: color-mix(in srgb, var(--ok-point) 15%, var(--carte)); }
.chip.warn { background: color-mix(in srgb, var(--warn-point) 16%, var(--carte)); }
.chip.crit { background: color-mix(in srgb, var(--crit-point) 14%, var(--carte)); }
.chip.info { background: color-mix(in srgb, var(--info-point) 14%, var(--carte)); }
/* Boutons : un aplat franc, une ombre neutre d'un pixel ; foncé au survol, sans halo. */
.btn { border-radius: var(--r-champ); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.btn:hover { box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.btn:active { background-color: var(--accent-700); box-shadow: none; }
.btn.ghost, .btn.ghost:hover { box-shadow: none; }
.btn.ghost:active { background-color: color-mix(in srgb, var(--accent-500) 12%, var(--carte)); }
.kpi.tb-kpi .tb-jauge { order: 10; margin: auto 0 22px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ok-point) 14%, var(--carte)); overflow: hidden; }
.kpi.tb-kpi .tb-jauge i { display: block; height: 100%; border-radius: 999px; background: var(--ok-point); }

/* La semaine : des cartes à plat dans leur panneau (pas d'ombre sur ombre). */
#tbSemaineK .kpi { box-shadow: none; background: var(--sous-carte); border: 1px solid var(--filet); }
/* Meilleures ventes : le rang en pastille, la part du meilleur en barre. */
#tbTop { border-collapse: separate; border-spacing: 0; }
#tbTop td { vertical-align: middle; }
#tbTop td:first-child { width: 44px; padding-right: 0; }
.tb-rang { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-weight: 750; font-size: 13px; background: var(--sous-carte); color: var(--encre-douce); }
.tb-rang.r1 { background: color-mix(in srgb, var(--warn-point) 18%, var(--carte)); color: var(--warn-fg); }
.tb-part { display: block; height: 6px; margin-top: 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent-500) 12%, var(--carte)); overflow: hidden; max-width: 340px; }
.tb-part i { display: block; height: 100%; border-radius: 999px; background: var(--accent-600); }
#tbTop td.r { font-weight: 700; font-size: 14.5px; }
/* L'anneau des règlements : le total lisible au centre. */
.tb-anneau .donut .center b { font-size: 22px; }
.tb-anneau .donut .center s { font-size: 11px; text-decoration: none; display: block; max-width: 92px; margin: 2px auto 0; line-height: 1.25; text-align: center; }
.kpis > .kpi:not(.tb-kpi) .val { font-size: 30px; font-weight: 750; }
/* L'en-tête d'une fiche produit : une carte blanche, comme les autres. */
.fp-tete { background: var(--carte) !important; }
/* Mode sombre : la carte principale reste une carte, la courbe se voit, le menu garde un aplat lisible. */
:root[data-mode="sombre"] .kpi.dark { background: var(--carte); color: var(--encre); box-shadow: var(--ombre-carte); }
:root[data-mode="sombre"] .kpi.tb-kpi.dark :is(.lab, .dl, .tb-bas, .tb-cmp, .val small) { color: var(--encre-douce) !important; }
:root[data-mode="sombre"] .kpi.tb-kpi.dark .tb-ico { background: color-mix(in srgb, var(--accent-500) 20%, var(--carte)) !important; color: color-mix(in srgb, var(--accent-500) 70%, white) !important; }
:root[data-mode="sombre"] .kpi.tb-kpi .courbette { color: var(--accent-500); }
:root[data-mode="sombre"] .kpi.tb-kpi .courbette .trait { stroke: color-mix(in srgb, var(--accent-500) 75%, white); }
:root[data-mode="sombre"]:not([data-menu="clair"]) .nav a.on { background: color-mix(in srgb, var(--accent-500) 26%, var(--carte)); color: #fff; }
:root[data-mode="sombre"]:not([data-menu="clair"]) .nav a.on .ic { color: color-mix(in srgb, var(--accent-500) 70%, white); }
:root[data-mode="sombre"] .tb-accueil .tb-horloge b { color: color-mix(in srgb, var(--accent-500) 75%, white) !important; }
@media (prefers-reduced-motion: reduce) { .nav a, .btn { transition: none; } }
/* Pilotage → Caisses en bref : des lignes qui mènent au détail (Comptoir). */
.cb-ligne { cursor: pointer; }
.cb-ligne td small { display: block; color: var(--muet); font-size: 12px; }
#cbSemaine .tb-part { margin: 0; max-width: none; }
#cbSemaine td:nth-child(2) { width: 100%; }
#cbSemaine td:first-child { white-space: nowrap; }