/* ==========================================================================
   KLASS Pharma — feuille de style unique.
   ==========================================================================
   Le parti pris, en une phrase : RESSEMBLER AU LOGICIEL DE RÉFÉRENCE. C'est le logiciel que
   connaissent les pharmaciens qu'on démarche ; celui qui y a passé quinze ans
   doit reconnaître son poste au premier coup d'œil. D'où la barre de menus
   vert sapin, la rangée de boutons ronds, le bandeau de l'officine en bas, la
   barre d'état grise, et des fenêtres, des grilles, des onglets et des
   boutons à la manière de Windows.

   Trois couleurs gardent un sens, et un seul :
     • --vert  : l'accent, la croix de pharmacie. Ce qui est actif, validé.
     • --rouge : STRICTEMENT réservé à ce qui fait mal — allergies, ruptures,
       périmés. Un rouge décoratif rendrait le vrai rouge invisible, et c'est
       exactement le jour où quelqu'un délivrerait de la pénicilline à un
       allergique.
     • --ambre : les avertissements qui n'empêchent pas de travailler.
   Le bleu et l'orange des onglets et des sélections viennent du logiciel de référence : ils
   désignent où l'on est, jamais un danger.

   Typographie : Segoe UI, présente sur tout poste Windows d'officine. Aucune
   police web n'est chargée — la CSP l'interdit, et un comptoir ne doit pas
   attendre le réseau pour afficher un prix. Consolas UNIQUEMENT pour les
   identifiants machine (lots, références, codes-barres).
   ========================================================================== */

:root {
  /* Le châssis, façon de référence */
  --menu:           #0E4A1F;   /* la barre de menus */
  --menu-texte:     #FFFFFF;
  --menu-haut:      #C8EBC4;   /* le menu déplié */
  --menu-haut-trait:#7FC578;
  --chrome:         #F0F0F0;   /* le gris des fenêtres Windows */
  --chrome-trait:   #A0A0A0;
  --creux-ombre:    #A0A0A0;   /* les cases enfoncées de la barre d'état */
  --creux-lumiere:  #FFFFFF;
  --legende-haut:   #EEF3FA;   /* barre de titre des fenêtres */
  --legende-bas:    #D5E0EE;
  --legende-trait:  #9FB1C6;
  --bouton-haut:    #FDFDFD;
  --bouton-bas:     #E1E1E1;
  --survol-haut:    #EAF6FD;
  --survol-bas:     #C4E5FA;
  --survol-trait:   #3C7FB1;
  --prim-haut:      #F3FBEF;
  --prim-bas:       #BFE5B3;
  --prim-trait:     #5E9E52;
  --prim-texte:     #12421C;
  --rond-1:         #FFFFFF;   /* les boutons ronds */
  --rond-2:         #F2F2F2;
  --rond-3:         #D6D6D6;
  --entete-haut:    #FDFDFD;   /* têtes de colonnes */
  --entete-bas:     #E6E6E6;
  --ligne-paire:    #F3F3F3;
  --ligne-trait:    #E4E4E4;
  --selection:      #CCEBF8;   /* la ligne choisie d'une grille */
  --selection-trait:#7CC6E6;
  --onglet-actif:   #1C3F94;
  --souligne:       #F28C1C;
  --focus-fond:     #F2F7FF;
  --focus-trait:    #5B9BD5;
  --logo:           #1E6B35;

  /* Le papier */
  --fond:        #F0F0F0;
  --surface:     #FFFFFF;
  --surface-2:   #F7F7F7;
  --trait:       #D5D5D5;
  --trait-fort:  #ABADB3;

  --texte:       #1A1A1A;
  --texte-doux:  #5A5A5A;

  --vert:        #1E7B34;
  --vert-fonce:  #145A25;
  --vert-pale:   #DFF2DC;

  --rouge:       #C8102E;
  --rouge-pale:  #FCE4E8;

  --ambre:       #A35A00;
  --ambre-pale:  #FDF1DC;

  --mono: Consolas, "Lucida Console", monospace;
  --ombre: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Mode nuit — pour la pharmacie de garde, à trois heures du matin, où un
   écran blanc est une agression. La disposition ne bouge pas : seules les
   teintes s'assombrissent, la barre de menus reste verte. */
html[data-theme="sombre"] {
  --menu:           #0B3517;
  --menu-haut:      #2E5F35;
  --menu-haut-trait:#4E8F55;
  --chrome:         #1F2327;
  --chrome-trait:   #4A525A;
  --creux-ombre:    #111416;
  --creux-lumiere:  #3A4148;
  --legende-haut:   #2F3945;
  --legende-bas:    #252D37;
  --legende-trait:  #46515E;
  --bouton-haut:    #3A4148;
  --bouton-bas:     #2C3238;
  --survol-haut:    #2E4A5E;
  --survol-bas:     #24404F;
  --survol-trait:   #3A8BB0;
  --prim-haut:      #2F7A3F;
  --prim-bas:       #23602F;
  --prim-trait:     #4FAF63;
  --prim-texte:     #FFFFFF;
  --rond-1:         #4A525A;
  --rond-2:         #394046;
  --rond-3:         #2A2F34;
  --entete-haut:    #303840;
  --entete-bas:     #262D33;
  --ligne-paire:    #1C2226;
  --ligne-trait:    #2C3339;
  --selection:      #1E4A5C;
  --selection-trait:#3A8BB0;
  --onglet-actif:   #8DB4FF;
  --souligne:       #F29A3A;
  --focus-fond:     #1F2A36;
  --focus-trait:    #5B9BD5;
  --logo:           #5CD07D;

  --fond:       #171B1F;
  --surface:    #20252A;
  --surface-2:  #262C32;
  --trait:      #353D45;
  --trait-fort: #4D5761;
  --texte:      #E8ECEF;
  --texte-doux: #A3ADB6;
  --vert:       #3DBA62;
  --vert-fonce: #5CD07D;
  --vert-pale:  #1D3A25;
  --rouge:      #FF6B7F;
  --rouge-pale: #3A1B22;
  --ambre:      #E5A64B;
  --ambre-pale: #3A2E17;
  --ombre: 0 2px 12px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texte);
  background: var(--fond);
  overflow: hidden;         /* le poste ne défile pas : ce sont ses panneaux qui défilent */
  -webkit-font-smoothing: antialiased;
}

/* Toute colonne de montant est en chiffres à chasse fixe : sans cela, une
   colonne de prix ne s'aligne pas et l'œil doit relire chaque ligne. */
.argent, .nombre, td.argent, th.argent,
.pave-total-valeur, .stat-valeur, .rendu-valeur {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Consolas : un numéro de lot, une référence, un code-barres. Jamais un titre. */
.machine { font-family: var(--mono); font-size: 12px; letter-spacing: -.2px; }

[hidden] { display: none !important; }

/* Le dégradé des boutons de Windows, partagé par tout ce qui se clique. */
.bouton, .pied-touche, .etat-bouton, .bouton-aide, .caisse-etat, .mode-bouton {
  background: linear-gradient(var(--bouton-haut), var(--bouton-bas));
}

/* ==========================================================================
   1. Connexion — une fenêtre posée sur le poste
   ========================================================================== */

.connexion {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(var(--menu), var(--menu)) top / 100% 26px no-repeat, var(--fond);
}

.connexion-carte {
  width: 360px;
  max-width: 100%;
  background: var(--chrome);
  border: 1px solid #6D7E91;
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.connexion-legende {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  background: linear-gradient(var(--legende-haut), var(--legende-bas));
  border-bottom: 1px solid var(--legende-trait);
  font-size: 12px;
}
.connexion-legende svg { width: 16px; height: 16px; flex: none; }

.connexion-contenu { padding: 16px 22px 18px; }

.connexion-marque {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--logo);
}

.connexion-officine {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: var(--vert);
}

.connexion-erreur {
  margin: 0 0 12px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--rouge);
  background: var(--rouge-pale);
  border-left: 3px solid var(--rouge);
}

.connexion-note {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--texte-doux);
}

/* ==========================================================================
   2. Le poste : menus, boutons ronds, écran, touches, bandeau, barre d'état
   ========================================================================== */

.poste {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  /* Sans cette colonne bornée, la plus large des rangées (les touches de
     fonction, le comptoir) élargissait tout le poste au-delà d'un téléphone. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--fond);
}

/* --- La barre de menus ---------------------------------------------------- */

.barre-menus {
  position: relative;
  z-index: 40;              /* au-dessus de l'écran, sous les fenêtres (60) */
  display: flex;
  flex-wrap: wrap;
  padding: 1px 4px;
  background: var(--menu);
  border-bottom: 1px solid #06290F;
}

.barre-rubrique { position: relative; }

.barre-titre {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 23px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--menu-texte);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
/* La lettre soulignée des menus Windows. Elle est posée par le code (`acces`)
   et non par `::first-letter` : le logiciel de référence souligne le i de « Caisse et BANQUE ». */
.barre-libelle { display: inline-block; }
.barre-libelle u { text-decoration: underline; }

.barre-titre:hover,
.barre-rubrique.ouverte > .barre-titre {
  background: var(--menu-haut);
  border-color: var(--menu-haut-trait);
  color: #0B2E12;
}
html[data-theme="sombre"] .barre-titre:hover,
html[data-theme="sombre"] .barre-rubrique.ouverte > .barre-titre { color: #fff; }
.barre-rubrique.actif > .barre-titre { font-weight: 700; box-shadow: inset 0 -2px 0 #8FE388; }

.barre-liste {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 290px;
  padding: 2px;
  background: var(--surface);
  background-image: linear-gradient(90deg, var(--surface-2) 0 29px, var(--trait) 29px 30px, transparent 30px);
  border: 1px solid #979797;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .28);
}
.barre-rubrique.ouverte > .barre-liste,
.barre-sous.ouverte > .barre-liste { display: block; }

.barre-sous { position: relative; }
.barre-sous-liste { top: -3px; left: calc(100% - 3px); }

.barre-ligne {
  display: flex;
  align-items: center;
  width: 100%;
  height: 24px;
  padding: 0 12px 0 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.barre-ico { flex: none; width: 28px; display: grid; place-items: center; }
.barre-ico svg { width: 16px; height: 16px; display: block; }
.barre-texte { padding-left: 9px; padding-right: 14px; }
.barre-fleche { margin-left: auto; font-size: 8px; color: var(--texte-doux); }

.barre-ligne:hover,
.barre-ligne:focus,
.barre-sous.ouverte > .barre-ligne {
  background: linear-gradient(var(--survol-haut), var(--survol-bas));
  border-color: #A8D0F3;
  outline: 0;
}
html[data-theme="sombre"] .barre-ligne:hover,
html[data-theme="sombre"] .barre-ligne:focus,
html[data-theme="sombre"] .barre-sous.ouverte > .barre-ligne { border-color: var(--survol-trait); }
.barre-ligne[aria-current="page"] { font-weight: 700; }

.barre-titre:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }
.barre-ligne:focus-visible { outline: 1px dotted var(--texte); outline-offset: -3px; }

.barre-separateur { margin: 3px 2px 3px 33px; border-top: 1px solid var(--trait); }

.barre-pastille {
  margin-left: auto;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--rouge);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.barre-titre .barre-pastille { margin-left: 2px; }
.barre-pastille.pastille-douce { background: var(--trait-fort); }

/* --- La rangée de boutons ronds ------------------------------------------- */

.chassis {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 4px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--trait-fort);
}

.barre-icones {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.barre-icones::-webkit-scrollbar { display: none; }

.icone-bouton {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--rond-1) 0%, var(--rond-2) 55%, var(--rond-3) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  cursor: pointer;
}
.icone-bouton svg { width: 25px; height: 25px; display: block; }
.icone-bouton:hover { border-color: var(--menu-haut-trait); box-shadow: 0 0 0 2px var(--menu-haut), 0 1px 2px rgba(0, 0, 0, .28); }
.icone-bouton:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.icone-bouton[aria-current="page"] {
  border-color: var(--menu-haut-trait);
  background: radial-gradient(circle at 35% 30%, #F4FFF2 0%, #CDEFC8 60%, #A9DBA2 100%);
}
html[data-theme="sombre"] .icone-bouton[aria-current="page"] {
  background: radial-gradient(circle at 35% 30%, #4E8F55 0%, #2E5F35 60%, #1D3A25 100%);
}
.icone-bouton:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.icone-bouton .barre-pastille { position: absolute; top: -4px; right: -6px; margin: 0; }

.icone-separateur { flex: none; width: 1px; height: 30px; margin: 0 3px; background: var(--trait); }

.chassis-caisse { margin-left: auto; display: flex; align-items: center; flex: none; }
.chassis-caisse:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }

.caisse-etat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--chrome-trait);
  border-radius: 3px;
  color: var(--texte);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.caisse-etat::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .35);
}
.caisse-ouverte::before { background: radial-gradient(circle at 35% 30%, #B8F5B8, #22B33A); }
.caisse-fermee::before  { background: radial-gradient(circle at 35% 30%, #FFB3B3, #D91E1E); }
.caisse-fermee { color: var(--rouge); }
.chassis-caisse:hover .caisse-etat {
  border-color: var(--survol-trait);
  background: linear-gradient(var(--survol-haut), var(--survol-bas));
}

.chassis-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--logo);
  white-space: nowrap;
}
.chassis-logo svg { width: 22px; height: 22px; }

/* --- L'écran de travail --------------------------------------------------- */

.corps { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }

.scene {
  min-width: 0;
  min-height: 0;            /* sans quoi `.scene-corps` ne se comprime jamais :
                               son `overflow: auto` restait sans effet, l'écran
                               débordait de la fenêtre et le pied de la coquille
                               venait recouvrir le bas du contenu. Mesuré le
                               24/09 : `.corps` occupait 107 → 1055 px dans une
                               fenêtre de 1000. Voir ETAT.md, journal de caisse. */
  display: grid;
  grid-template-rows: auto 1fr;
  /* Sans colonne bornée, la colonne implicite prenait la largeur du plus large
     tableau : sur un téléphone de 390 px, la scène montait à 542 px et, `body`
     masquant le débordement, la droite des écrans (colonnes, montants, bouton
     d'aide) devenait inatteignable. Relevé sur klasspharma.com le 05/10. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--fond);
}

/* La barre de titre de la fenêtre de travail. */
.scene-entete {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 6px 2px 8px;
  background: linear-gradient(var(--legende-haut), var(--legende-bas));
  border-bottom: 1px solid var(--legende-trait);
}
.scene-icone { width: 16px; height: 16px; flex: none; }
.scene-titre { margin: 0; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.scene-sous-titre {
  margin: 0;
  font-size: 12px;
  color: var(--texte-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene-sous-titre:not(:empty)::before { content: ": "; }

.bouton-aide {
  margin-left: auto;
  flex: none;
  width: 24px;
  height: 20px;
  border: 1px solid var(--chrome-trait);
  border-radius: 3px;
  color: var(--onglet-actif);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.bouton-aide:hover { border-color: var(--survol-trait); background: linear-gradient(var(--survol-haut), var(--survol-bas)); }
.bouton-aide:focus-visible { outline: 2px solid var(--focus-trait); outline-offset: 1px; }

.scene-corps { overflow: auto; padding: 8px 10px 12px; min-height: 0; }
.scene-corps.sans-marge { padding: 0; }

/* --- Les touches de fonction : la rangée de boutons du bas ---------------- */

.pied {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 8px;
  background: var(--chrome);
  border-top: 1px solid var(--trait-fort);
  overflow: hidden;
}

.pied-touche {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 11px;
  border: 1px solid var(--chrome-trait);
  border-radius: 3px;
  color: var(--texte);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.pied-touche:hover {
  border-color: var(--survol-trait);
  background: linear-gradient(var(--survol-haut), var(--survol-bas));
}
.pied-touche:focus-visible { outline: 2px solid var(--focus-trait); outline-offset: 1px; }
.pied-touche[disabled] { opacity: .45; cursor: default; }
.pied-touche[disabled]:hover { border-color: var(--chrome-trait); background: linear-gradient(var(--bouton-haut), var(--bouton-bas)); }

.pied-cle { font-weight: 700; color: var(--onglet-actif); }
.pied-cle::after { content: " :"; }

/* Le nom de l'officine a son bandeau, juste en dessous. */
.pied-note { display: none; }

/* --- Le bandeau de l'officine --------------------------------------------- */

.bandeau-officine {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 3px 12px;
  background: var(--surface);
  border-top: 1px solid var(--trait-fort);
}
.bandeau-pastille {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9BE59A 0%, #2E9D4A 55%, #17692D 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.bandeau-pastille svg { width: 15px; height: 15px; }

.chassis-officine {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--vert);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- La barre d'état ------------------------------------------------------ */

.barre-etat {
  display: flex;
  align-items: stretch;
  gap: 3px;
  min-height: 23px;
  padding: 2px 3px;
  background: var(--chrome);
  border-top: 1px solid var(--chrome-trait);
  font-size: 11px;
  color: var(--texte);
  overflow: hidden;
}
.etat-case {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid;
  border-color: var(--creux-ombre) var(--creux-lumiere) var(--creux-lumiere) var(--creux-ombre);
  white-space: nowrap;
}
.etat-case strong { font-weight: 600; }
.etat-case svg { width: 13px; height: 13px; }
.etat-heure { font-variant-numeric: tabular-nums; }
.etat-officine { display: none; }
.etat-pousse { margin-left: auto; }
.etat-bouton {
  padding: 0 9px;
  border: 1px solid var(--chrome-trait);
  border-radius: 2px;
  color: var(--texte);
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.etat-bouton:hover { border-color: var(--survol-trait); background: linear-gradient(var(--survol-haut), var(--survol-bas)); }
.etat-bouton:focus-visible { outline: 2px solid var(--focus-trait); outline-offset: -2px; }

/* Un écran de portable (768 px de haut, moins le navigateur) : le bandeau
   cède sa place à l'écran de travail, et le nom de l'officine passe dans la
   barre d'état. */
@media (max-height: 700px) {
  .bandeau-officine { display: none; }
  .etat-officine { display: flex; }
}

@media (max-width: 1100px) {
  .chassis-logo { font-size: 20px; }
  .etat-large { display: none; }
}

/* Sur un écran étroit, les menus passent à la ligne et la liste dépliée prend
   toute la largeur : une liste de 290 px partie du bord droit sortirait de
   l'écran. Les sous-menus s'ouvrent alors en retrait, sous leur ligne. */
@media (max-width: 640px) {
  .barre-liste {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    min-width: 0;
  }
  .barre-sous-liste { position: static; margin: 0 0 2px 28px; box-shadow: none; }
  .barre-ligne { white-space: normal; height: auto; min-height: 26px; }
  .chassis-logo { display: none; }
  .chassis { gap: 8px; padding: 4px 8px; }
  .barre-etat .etat-case:first-child { display: none; }
  .chassis-officine { font-size: 14px; }
}

/* ==========================================================================
   5. Vocabulaire commun — boutons, champs, cartes, tableaux
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--chrome-trait);
  border-radius: 3px;
  color: var(--texte);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.bouton:hover {
  border-color: var(--survol-trait);
  background: linear-gradient(var(--survol-haut), var(--survol-bas));
  color: var(--texte);
}
.bouton:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
.bouton:focus-visible { outline: 2px solid var(--focus-trait); outline-offset: 1px; }
.bouton[disabled] { opacity: .45; cursor: default; }
.bouton[disabled]:hover {
  border-color: var(--chrome-trait);
  background: linear-gradient(var(--bouton-haut), var(--bouton-bas));
}

.bouton-primaire {
  background: linear-gradient(var(--prim-haut), var(--prim-bas));
  border-color: var(--prim-trait);
  color: var(--prim-texte);
  font-weight: 700;
}
.bouton-primaire:hover {
  background: linear-gradient(var(--prim-bas), var(--prim-bas));
  border-color: var(--prim-trait);
  color: var(--prim-texte);
}
.bouton-primaire[disabled]:hover {
  background: linear-gradient(var(--prim-haut), var(--prim-bas));
  border-color: var(--prim-trait);
}

.bouton-danger { border-color: var(--rouge); color: var(--rouge); font-weight: 600; }
.bouton-danger:hover { background: var(--rouge-pale); border-color: var(--rouge); color: var(--rouge); }

.bouton-large { width: 100%; padding: 8px; font-size: 14px; }
.bouton-petit { padding: 1px 7px; font-size: 11.5px; }

.champ { display: block; margin-bottom: 11px; }
.champ-libelle {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  color: var(--texte);
}
.champ-note { display: block; margin-top: 3px; font-size: 11px; color: var(--texte-doux); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--trait-fort);
  border-radius: 0;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 13px;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--focus-trait);
  background: var(--focus-fond);
}
input[type="number"] { font-variant-numeric: tabular-nums; }
textarea { resize: vertical; min-height: 60px; }
label input[type="checkbox"] { width: auto; }

.ligne-champs { display: flex; gap: 10px; }
.ligne-champs > * { flex: 1; min-width: 0; }

/* Les cartes sont les « cadres » des fenêtres de référence : un filet, un titre
   bleu sur une bande claire. */
.carte {
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  margin-bottom: 10px;
}
.carte-entete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--trait-fort);
  background: linear-gradient(var(--legende-haut), var(--legende-bas));
  color: var(--onglet-actif);
  font-size: 12.5px;
  font-weight: 700;
}
.carte-entete .pousse { margin-left: auto; }
.carte-corps { padding: 10px; }
.carte-corps.compact { padding: 0; }
.carte-corps.defilante { max-height: 320px; overflow: auto; }

.grille { display: grid; gap: 10px; }
.grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .grille-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Les grilles du logiciel de référence : têtes de colonnes grises à filets, lignes
   alternées, la ligne survolée en bleu clair. */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  padding: 4px 7px;
  border-right: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait-fort);
  background: linear-gradient(var(--entete-haut), var(--entete-bas));
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--texte);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
td {
  padding: 3px 7px;
  border-bottom: 1px solid var(--ligne-trait);
  border-right: 1px solid var(--ligne-trait);
  vertical-align: top;
}
th:last-child, td:last-child { border-right: 0; }
/* `:where` : la ligne paire ne pèse rien, toute ligne colorée par un écran
   (une rupture, une ligne choisie) garde sa couleur. */
:where(tbody tr:nth-child(even)) { background: var(--ligne-paire); }
tbody tr:hover { background: var(--selection); }
.a-droite { text-align: right; }
.au-centre { text-align: center; }
.serre td, .serre th { padding-top: 2px; padding-bottom: 2px; }
.tableau-defilant { max-height: 100%; overflow: auto; }

.vide { padding: 22px 12px; text-align: center; color: var(--texte-doux); font-size: 12.5px; }

.etiquette {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: var(--surface-2);
  border: 1px solid var(--trait);
  color: var(--texte-doux);
  white-space: nowrap;
}
.etiquette-vert  { background: var(--vert-pale);  border-color: var(--vert);  color: var(--vert-fonce); }
.etiquette-rouge { background: var(--rouge-pale); border-color: var(--rouge); color: var(--rouge); }
.etiquette-ambre { background: var(--ambre-pale); border-color: var(--ambre); color: var(--ambre); }

.texte-rouge { color: var(--rouge); font-weight: 600; }
.texte-ambre { color: var(--ambre); font-weight: 600; }
.texte-vert  { color: var(--vert-fonce); font-weight: 600; }
.texte-doux  { color: var(--texte-doux); }
.petit { font-size: 11px; }
.gras { font-weight: 600; }

.encart {
  padding: 8px 10px;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--trait-fort);
  background: var(--surface-2);
  font-size: 12px;
  margin-bottom: 10px;
}
.encart-rouge { border-color: var(--rouge); border-left-color: var(--rouge); background: var(--rouge-pale); }
.encart-ambre { border-color: var(--ambre); border-left-color: var(--ambre); background: var(--ambre-pale); }
.encart-vert  { border-color: var(--vert);  border-left-color: var(--vert);  background: var(--vert-pale); }
.encart p { margin: 0 0 4px; }
.encart p:last-child { margin-bottom: 0; }

.barre-outils {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.barre-outils label { font-size: 12px; color: var(--texte); }
.barre-outils input, .barre-outils select { width: auto; }
.barre-outils .pousse { margin-left: auto; }

/* Les onglets du logiciel de référence : le texte, et sous l'onglet actif, bleu et gras,
   un trait orange. */
.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--trait-fort);
}
.onglet {
  padding: 5px 14px 4px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--texte);
  margin-bottom: -1px;
}
.onglet:hover { color: var(--onglet-actif); background: var(--surface-2); }
.onglet.actif {
  color: var(--onglet-actif);
  font-weight: 700;
  border-bottom-color: var(--souligne);
}
.onglet:focus-visible { outline: 1px dotted var(--texte); outline-offset: -3px; }

/* ==========================================================================
   6. Comptoir — l'écran capital
   ========================================================================== */

.comptoir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  height: 100%;
  padding: 8px;
}

.comptoir-recherche { grid-column: 1 / -1; position: relative; }

.barre-recherche {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--trait-fort);
  background: var(--surface);
  overflow: hidden;
}
.barre-recherche:focus-within { border-color: var(--focus-trait); box-shadow: 0 0 0 1px var(--focus-trait); }
.barre-recherche input:focus { background: var(--focus-fond); }

.barre-recherche input {
  flex: 1;
  border: 0;
  border-radius: 0;
  padding: 7px 10px;
  font-size: 16px;
}
.barre-recherche input:focus { box-shadow: none; }
.barre-recherche .barre-forme {
  border: 0;
  border-right: 1px solid var(--trait);
  border-radius: 0;
  max-width: 160px;
  padding: 0 6px;
  background: var(--surface-2, var(--surface));
  font-size: 13px;
}

/* Le témoin de focus. C'est le seul endroit du logiciel qui dit « la machine
   vous écoute » : sans lui, on tape une ligne entière dans le vide après avoir
   cliqué ailleurs, et on ne s'en aperçoit qu'au moment de valider. */
.temoin {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--ambre-pale);
  color: var(--ambre);
  border-left: 1px solid var(--trait);
}
.temoin::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.temoin.pret { background: var(--vert-pale); color: var(--vert-fonce); }

/* « DCI / famille » au bout de la barre, et sa fenêtre. */
.barre-recherche .barre-dci {
  border: 0;
  border-left: 1px solid var(--trait);
  border-radius: 0;
  padding: 0 10px;
  background: var(--surface-2, var(--surface));
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.barre-recherche .barre-dci:hover { background: var(--selection); }
#dci-filtre { width: 100%; margin: 8px 0 6px; }
.dci-choisies { min-height: 18px; font-size: 12px; margin-bottom: 4px; }
.puce-dci { display: inline-block; padding: 1px 6px; background: var(--selection); border: 1px solid var(--selection-trait); }
.dci-liste { max-height: 300px; overflow: auto; border: 1px solid var(--trait); }
.dci-liste tr { cursor: pointer; user-select: none; }
.dci-liste tr.actif { background: var(--selection); }
.dci-liste tr.coche td { font-weight: 700; }
.dci-case { width: 22px; text-align: center; }
@media (max-width: 600px) { .barre-recherche .barre-dci { padding: 0 6px; font-size: 11px; } }

/* Conseil thérapeutique — critères à gauche, produits à droite, comme la
   fenêtre CONSEILS du logiciel de référence. */
.conseil { display: grid; grid-template-columns: 280px 1fr; gap: 10px; }
.conseil-criteres { border-right: 1px solid var(--trait); padding-right: 10px; }
#cons-filtre { width: 100%; margin-bottom: 6px; }
.conseil-motifs { max-height: 220px; overflow: auto; border: 1px solid var(--trait); }
.conseil-motifs tr { cursor: pointer; user-select: none; }
.conseil-motifs tr.actif { background: var(--selection); }
/* Fiches clients ouvertes depuis la vente (Le logiciel de référence « Fiche Client »). */
.fiches-clients-liste { max-height: 55vh; overflow: auto; }
.fiches-clients-liste tr.actif { background: var(--selection); }
.prescripteurs-liste tr.actif { background: var(--selection); }
.situation-compte { max-height: 60vh; overflow: auto; }
.conseil-motifs tr.conseil-appareil td {
  background: var(--surface-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texte-doux);
}
.conseil-profil { margin-top: 10px; }
.conseil-profil .champ-libelle { display: block; margin: 8px 0 3px; }
.conseil-radios { display: flex; gap: 10px; font-size: 12px; }
.conseil-terrains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  font-size: 12px;
  max-height: 140px;
  overflow: auto;
}
.conseil-terrains label.coche { font-weight: 700; }
.conseil-resultats { max-height: 420px; overflow: auto; }
.conseil-familles { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
/* Ce qui doit être lu avant la liste : quand ne PAS conseiller. */
.conseil-orientation {
  border-left: 3px solid var(--ambre);
  background: var(--ambre-pale);
  padding: 6px 8px;
  margin: 0 0 8px;
  font-size: 12px;
}
/* Sous 900 px, les deux colonnes s'empilent : la fenêtre reste lisible sur le
   petit écran d'un comptoir secondaire. */
@media (max-width: 900px) { .conseil { grid-template-columns: 1fr; }
  .conseil-criteres { border-right: 0; padding-right: 0; } }

.resultats {
  position: absolute;
  left: 0; right: 0;
  z-index: 20;
  margin-top: 3px;
  border: 1px solid var(--trait-fort);
  background: var(--surface);
  max-height: 262px;
  overflow: auto;
  box-shadow: var(--ombre);
}
/* La liste des produits du comptoir de référence : têtes de colonnes bleu canard. */
.resultats th { background: #1F6E84; color: #fff; border-right-color: #3A8AA0; border-bottom-color: #164F5F; }
.resultats tr { cursor: pointer; }
.resultats tr.actif { background: var(--selection); }
.resultats tr.actif td { border-bottom-color: var(--selection-trait); }

.res-nom { font-weight: 600; }
.res-detail { color: var(--texte-doux); font-size: 11px; }

.comptoir-panier {
  display: grid;
  /* Quatre rangées, une par enfant dans l'ordre du DOM : l'en-tête, la case
     « Appliquer automatiquement Remise par produit … », le corps (qui prend
     la place) et le pied. Sans la deuxième rangée, la case — ajoutée le
     23/09 — héritait du `1fr` destiné au corps : elle flottait au milieu du
     panier et les lignes collaient au pied au lieu de partir des têtes de
     colonnes. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  min-height: 0;
  overflow: hidden;
}
.panier-corps { overflow: auto; }
.panier-table td { vertical-align: middle; }
.panier-table input.panier-qte { width: 56px; padding: 2px 4px; text-align: center; }
.panier-table input.panier-remise { width: 76px; padding: 2px 4px; text-align: right; }
.panier-supprimer {
  border: 0;
  background: transparent;
  color: var(--texte-doux);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.panier-supprimer:hover { color: var(--rouge); }
.panier-pied {
  padding: 5px 10px;
  border-top: 1px solid var(--trait);
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--texte-doux);
  display: flex;
  gap: 10px;
  align-items: center;
}

/* La case « Appliquer automatiquement Remise par produit … » du logiciel de référence, très
   exactement là où il la met : juste au-dessus du panier, à droite. */
.panier-remise-auto {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-top: 1px solid var(--trait);
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--texte-doux);
  cursor: pointer;
}
.panier-remise-auto input { margin: 0; }

/* La SEULE animation du logiciel : la ligne qui vient d'entrer clignote une
   fois, 400 ms. L'opérateur regarde la douchette, pas l'écran ; c'est ce bref
   éclair qui lui dit, du coin de l'œil, que le scan est passé. */
@keyframes eclair-ligne {
  0%   { background: #B9E4CE; }
  100% { background: transparent; }
}
.ligne-neuve { animation: eclair-ligne 400ms ease-out 1; }

/* Le retour client : la ligne rendue se lit d'un coup d'oeil, et le pavé dit
   « à rendre » quand le tiroir doit sortir de l'argent. */
.ligne-retour td { background: var(--ambre-pale); }
.badge-retour { display: inline-block; padding: 0 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: var(--ambre); color: #fff; }
.pave-total.pave-rendre { box-shadow: inset 0 0 0 3px var(--ambre), inset 0 0 0 4px var(--trait); }
.pave-total.pave-rendre .pave-total-libelle { color: var(--ambre); }

@media (prefers-reduced-motion: reduce) {
  .ligne-neuve { animation: none; background: var(--vert-pale); }
}

.comptoir-cote { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: auto; }

.bloc { background: var(--surface); border: 1px solid var(--trait-fort); padding: 8px 10px; }
.bloc-titre {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--onglet-actif);
}

.totaux-ligne { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 12.5px; }
.totaux-ligne .argent { font-weight: 600; }
.separateur { margin: 5px 0; border-top: 1px solid var(--trait); }

/* Le « TOTAL VENTE » du logiciel de référence : le titre en capitales, le chiffre en grand,
   dans une case creuse. C'est le seul chiffre que le patient et l'opérateur
   regardent en même temps : il est le plus gros de l'écran. */
.pave-total {
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  box-shadow: inset 0 0 0 3px var(--chrome), inset 0 0 0 4px var(--trait);
  padding: 8px 12px 10px;
  color: var(--texte);
  text-align: center;
}
.pave-total-libelle {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--texte);
}
.pave-total-valeur {
  display: block;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.5px;
}
.pave-total-unite { font-size: 15px; font-weight: 600; margin-left: 4px; color: var(--texte-doux); }
.pave-total-note { margin: 3px 0 0; font-size: 11px; color: var(--texte-doux); }

/* « F12 : Valider vente » : dans le logiciel de référence, le bouton qui encaisse est orange. */
.comptoir-cote .bouton-primaire {
  background: linear-gradient(#FFD08A, #F28C1C);
  border-color: #C96A0A;
  color: #3A1F00;
  font-style: italic;
}
.comptoir-cote .bouton-primaire:hover { background: linear-gradient(#FFC065, #E57A06); border-color: #A85600; color: #2A1600; }

/* Les allergies : le seul contenu du logiciel qui a le droit de crier. */
.allergies { border: 2px solid var(--rouge); background: var(--rouge-pale); border-radius: 3px; padding: 7px 10px; }
.allergies-titre {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--rouge);
}
.allergies-texte { margin: 0; font-size: 13px; font-weight: 700; color: var(--rouge); }

.patient-nom { font-weight: 600; }

.modes-reglement { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 10px; }
/* Espèces, Chèque, Crédit, Carte bancaire : les boutons à voyant rond de la
   fenêtre de validation de référence. */
.mode-bouton {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid var(--chrome-trait);
  border-radius: 16px;
  color: var(--onglet-actif);
  font: inherit;
  font-size: 12.5px;
  font-style: italic;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.mode-bouton::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border: 1px solid #8A8A8A;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #BDBDBD);
}
.mode-bouton:hover { border-color: var(--survol-trait); background: linear-gradient(var(--survol-haut), var(--survol-bas)); }
.mode-bouton:hover::before { background: radial-gradient(circle at 35% 30%, #B8F5B8, #22B33A); border-color: #1E7B34; }
.mode-bouton:focus-visible { outline: 2px solid var(--focus-trait); outline-offset: 1px; }

.reglement-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--trait);
  font-size: 12.5px;
}
.reglement-ligne .argent { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.rendu {
  padding: 8px 10px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--trait);
  margin: 10px 0;
}
.rendu-valeur { font-size: 22px; font-weight: 700; }
.rendu.du { background: var(--ambre-pale); border-color: var(--ambre); color: var(--ambre); }
/* Le reste porté au compte : le « Rendu » rouge du logiciel de référence (règlement partiel). */
.reste-au-compte { margin-top: 6px; padding: 6px 10px; background: var(--rouge); color: #fff; font-weight: 700; }
.reste-au-compte .argent, .reste-au-compte .petit { color: #fff; }
.rendu.rendre { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }
/* Le décompte des coupures à rendre (Le logiciel de référence) : une pastille par coupure. */
.decompte-monnaie {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 6px 0 0;
  padding: 0;
}
.decompte-monnaie li {
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
}
.decompte-monnaie .decompte-nombre { font-weight: 400; }
.decompte-monnaie .decompte-reste { border-style: dashed; font-weight: 400; }
.pave-rendre .decompte-monnaie { justify-content: center; }

/* ==========================================================================
   7. Fenêtres et messages — jamais alert(), jamais confirm()
   ==========================================================================
   Une boîte de dialogue native BLOQUE le poste : le navigateur cesse de
   répondre, la douchette tape dans le vide et le patient attend. Tout passe
   donc par ces fenêtres-ci, qui laissent la page vivante.
   ========================================================================== */

.pile-modales { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

.voile {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .22);
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: auto;
  /* Chaque voile est son propre contexte d'empilement : sans cela, l'en-tête
     collant (z-index 1) d'un tableau de la fenêtre du dessous passait
     par-dessus la fenêtre empilée au-dessus (vu le 21/09 sur « Prescripteur
     inconnu », ouverte sur la saisie d'ordonnance, et sur fiches clients →
     situation du compte → règlement, ouverts depuis la vente). */
  z-index: 0;
}

/* Une fenêtre Windows : cadre bleu-gris, barre de titre claire avec la croix
   verte, bouton de fermeture rouge, fond gris. */
.fenetre {
  width: 460px;
  max-width: 100%;
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  border: 1px solid #6D7E91;
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
}
.fenetre.large { width: 760px; }
.fenetre.tres-large { width: 1040px; }
.fenetre.etroite { width: 350px; }

.fenetre-entete {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 28px;
  padding: 0 5px 0 8px;
  background: linear-gradient(var(--legende-haut), var(--legende-bas));
  color: var(--texte);
  border-bottom: 1px solid var(--legende-trait);
  border-radius: 5px 5px 0 0;
}
.fenetre-entete::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 3h8v9h9v8h-9v9h-8v-9H3v-8h9z' fill='%231E9E4A'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fenetre-titre { margin: 0; padding: 6px 0 5px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.fenetre-fermer {
  flex: none;
  margin-left: auto;
  width: 43px;
  height: 19px;
  padding: 0;
  border: 1px solid #8C3A3A;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(#E9A99C, #C75050 50%, #B83A3A);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 17px;
  cursor: pointer;
}
.fenetre-fermer:hover { background: linear-gradient(#F4B8AA, #E04343 50%, #C82F2F); }
.fenetre-fermer:focus-visible { outline: 2px solid var(--focus-trait); outline-offset: 1px; }

.fenetre-corps { padding: 12px; overflow: auto; }
.fenetre-pied {
  display: flex;
  align-items: center;
  /* Six boutons en fin de vente (Annuler le ticket … Avec en-tête) : ils
     passent à la ligne au lieu de déborder de la fenêtre (vu à 1440 px). */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--trait);
  background: var(--chrome);
  border-radius: 0 0 3px 3px;
}
.fenetre-pied .pousse { margin-left: auto; }

.pile-messages {
  position: fixed;
  right: 12px;
  bottom: 38px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 330px;
  pointer-events: none;
}

.message {
  padding: 8px 11px;
  border-radius: 3px;
  border-left: 4px solid var(--vert);
  background: var(--surface);
  box-shadow: var(--ombre);
  font-size: 12.5px;
  pointer-events: auto;
}
.message-erreur { border-left-color: var(--rouge); }
.message-alerte { border-left-color: var(--ambre); }
.message-titre { font-weight: 700; display: block; margin-bottom: 1px; }

/* Un message qui attend d'être acquitté : filet plus large et bouton. Il ne
   part pas tout seul, il est donc plus affirmé — mais toujours sans
   animation, comme le reste du logiciel. */
.message-persistant { border-left-width: 6px; }
.message-fermer {
  display: block;
  margin: 7px 0 0 auto;
  padding: 3px 10px;
  border: 1px solid var(--trait);
  border-radius: 3px;
  background: var(--surface-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}
.message-fermer:hover { background: var(--vert-pale); border-color: var(--vert); }
.message-fermer:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; }

/* ==========================================================================
   8. Graphiques — SVG et CSS purs, aucune librairie
   ========================================================================== */

.graphe { width: 100%; height: auto; display: block; }
.graphe-aire { fill: var(--vert); opacity: .13; }
.graphe-trait { fill: none; stroke: var(--vert); stroke-width: 2; stroke-linejoin: round; }
.graphe-grille { stroke: var(--trait); stroke-width: 1; }
.graphe-axe { fill: var(--texte-doux); font-size: 9px; }

.barres { display: flex; align-items: flex-end; gap: 2px; height: 108px; }
.barre-colonne { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.barre-corps { background: var(--vert); border-radius: 1px 1px 0 0; min-height: 1px; }
.barre-corps.creuse { background: var(--trait-fort); }
.barre-legende {
  margin-top: 3px;
  text-align: center;
  font-size: 9.5px;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

.jauge { height: 7px; background: var(--surface-2); border: 1px solid var(--trait); border-radius: 4px; overflow: hidden; }
.jauge-remplissage { height: 100%; background: var(--vert); }
.jauge-remplissage.rouge { background: var(--rouge); }
.jauge-remplissage.ambre { background: var(--ambre); }

.stat { background: var(--surface); border: 1px solid var(--trait-fort); padding: 7px 10px; }
.stat-libelle {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--onglet-actif);
}
.stat-valeur { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.stat-note { margin: 0; font-size: 11px; color: var(--texte-doux); }
.stat-hausse { color: var(--vert-fonce); font-weight: 700; }
.stat-baisse { color: var(--rouge); font-weight: 700; }

/* ==========================================================================
   9. Le guide
   ========================================================================== */

.guide { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 12px; align-items: start; }
.guide-sommaire { position: sticky; top: 0; }
.guide-sommaire button {
  display: block;
  width: 100%;
  padding: 5px 9px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  color: var(--texte);
}
.guide-sommaire button:hover { background: var(--vert-pale); }
.guide-sommaire button.actif { border-left-color: var(--vert); background: var(--vert-pale); font-weight: 600; }

.guide-texte { background: var(--surface); border: 1px solid var(--trait); border-radius: 3px; padding: 14px 18px; }
.guide-texte h2 { margin: 0 0 4px; font-size: 17px; }
.guide-texte h3 { margin: 18px 0 5px; font-size: 13.5px; color: var(--vert-fonce); }
.guide-texte p { margin: 0 0 9px; font-size: 13px; line-height: 1.55; max-width: 64ch; }
.guide-texte ol, .guide-texte ul { margin: 0 0 10px; padding-left: 20px; max-width: 64ch; }
.guide-texte li { margin-bottom: 4px; font-size: 13px; line-height: 1.5; }
.cle {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--trait-fort);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   10. Impression — le ticket, et rien d'autre
   ==========================================================================
   Format étroit : c'est ce que sortent les imprimantes thermiques d'officine.
   Tout le reste de la page disparaît.
   ========================================================================== */

.zone-impression { display: none; }

.ticket {
  width: 74mm;
  margin: 0 auto;
  padding: 3mm;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  color: #000;
  background: #fff;
}
.ticket-entete { text-align: center; margin-bottom: 6px; }
.ticket-officine { font-size: 13px; font-weight: 700; }
/* Le n° d'ordonnancier imprimé sur le ticket (décision de Landry, 21/09). */
.ticket-ordonnancier { font-weight: 700; }
.ticket-regle { border-top: 1px dashed #000; margin: 5px 0; }
.ticket table { width: 100%; font-size: 11px; }
.ticket th, .ticket td {
  padding: 1px 0;
  border: 0;
  background: none;
  text-transform: none;
  letter-spacing: 0;
  color: #000;
  font-size: 11px;
  position: static;
  vertical-align: top;
}
.ticket th { border-bottom: 1px solid #000; font-weight: 700; }
.ticket tbody tr:hover { background: none; }
.ticket .a-droite { text-align: right; }
/* Des colonnes collées se lisent faux : « -1 » puis « 1 800 » donnaient « -11 800 ». */
.ticket td + td, .ticket th + th { padding-left: 7px; white-space: nowrap; }
.ticket-total { font-size: 14px; font-weight: 700; }
.ticket-pied { margin-top: 7px; text-align: center; font-size: 10px; }

@media print {
  @page { margin: 4mm; }
  html, body { height: auto; overflow: visible; background: #fff; }
  body > * { display: none !important; }
  .zone-impression { display: block !important; }
  .zone-impression .ticket { width: auto; }
}

/* ==========================================================================
   Stock — alertes, rayonnage, inventaire
   ========================================================================== */

/* Le compteur d'un onglet. Discret par principe : il annonce du travail, il
   ne le réclame pas. */
.onglet-compteur {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--trait-fort);
  color: var(--surface);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.onglet-compteur-rouge { background: var(--rouge); color: #fff; }

/* La case de comptage. Large et à chasse fixe : on y tape sans regarder,
   avec le tiroir dans l'autre main. */
.inv-compte {
  width: 96px;
  text-align: right;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Une ligne comptée s'efface visuellement au lieu de disparaître : elle reste
   corrigeable, mais l'œil descend tout seul vers ce qui reste à faire. */
.inv-faite td { color: var(--texte-doux); }
.inv-faite .inv-compte { color: var(--texte); border-color: var(--vert); }
/* ==========================================================================
   Achats — pilote, réception, contrôle de facture
   ==========================================================================
   Trois besoins que le reste de la feuille ne couvrait pas : rendre la
   justification du pilote lisible sous chaque nom de produit, distinguer une
   ligne écartée sans la cacher, et donner aux champs de réception la largeur
   d'un numéro de lot écrit à la main.
   ========================================================================== */

/* La justification de chaque proposition. Elle est TOUJOURS visible : c'est
   elle qui distingue une proposition qui s'explique d'une boîte noire. Ne la
   repliez jamais derrière une icône. */
.justification {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--vert-fonce);
}

/* Une ligne décochée s'efface, elle ne disparaît pas : on doit pouvoir
   revenir sur son « non ». */
.ligne-ecartee { opacity: .45; }
.ligne-ecartee .justification { color: var(--texte-doux); }

.table-pilote .a-p-qte { width: 62px; padding: 2px 4px; text-align: center; }
.table-pilote td { vertical-align: middle; }

.pilote-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-top: 1px solid var(--trait);
  background: var(--surface-2);
}
.pilote-pied .pousse { margin-left: auto; }

/* Les trois champs qui portent le FEFO : larges, alignés, atteignables au
   clavier sans viser. */
.table-reception td { vertical-align: middle; }
.table-reception input { padding: 3px 5px; }
.table-reception .rec-qte { width: 78px; text-align: center; }
.table-reception .rec-prix { width: 88px; text-align: right; }
.table-reception .rec-lot { width: 130px; }
.table-reception .rec-peremption { width: 140px; }

.table-controle td { vertical-align: middle; }
.table-controle .ligne-anomalie { background: var(--rouge-pale); }
.table-controle .ligne-anomalie:hover { background: var(--rouge-pale); }
/* ==========================================================================
   11. Pilotage — graphiques SVG et CSS, aucune librairie
   ==========================================================================
   Tout ce qui suit sert à décider, pas à impressionner : pas de dégradé, pas
   d'animation, pas de relief. Deux règles tenues partout dans cette section :

     • Aucune couleur en dur. Uniquement les variables du thème, sans quoi le
       mode nuit rendrait les graphiques illisibles à trois heures du matin.
     • Aucune information portée par la seule couleur. Le trait plein et le
       trait pointillé distinguent le chiffre de la marge, chaque case de la
       carte de chaleur porte son nombre écrit, et chaque variation porte son
       signe. Ces écrans s'impriment, et souvent en noir et blanc.
   ========================================================================== */

/* --- La courbe d'évolution ------------------------------------------------ */

.pil-courbe { max-height: 300px; }

.pil-trait-chiffre {
  fill: none;
  stroke: var(--vert);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pil-trait-chiffre-point { fill: var(--vert); }

/* La marge : même famille visuelle, trait plus fin et pointillé. C'est le
   pointillé — et non la couleur — qui la distingue une fois photocopiée. */
.pil-trait-marge {
  fill: none;
  stroke: var(--texte-doux);
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
  stroke-linejoin: round;
}
.pil-trait-marge-point { fill: var(--texte-doux); }

/* La liaison par-dessus un jour de fermeture : assez visible pour dire que la
   tendance continue, assez discrète pour ne pas se lire comme une vente. */
.pil-liaison {
  stroke: var(--trait-fort);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.pil-courbe-zero { stroke: var(--trait-fort); stroke-width: 1.5; }

/* Le repère d'un jour sans vente, au ras de l'axe. Un carré creux : plein, il
   se confondrait avec un point de mesure. */
.pil-ferme { fill: none; stroke: var(--trait-fort); stroke-width: 1.2; }

.pil-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--trait);
  font-size: 11.5px;
  color: var(--texte-doux);
}
.pil-cle { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pil-cle svg { overflow: visible; }

.pil-legende-note { margin: 8px 0 0; line-height: 1.5; max-width: 78ch; }

/* --- Barres horizontales -------------------------------------------------- */

.pil-barres { display: flex; flex-direction: column; gap: 5px; }

.pil-barre-ligne {
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(60px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.pil-barre-libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.pil-barre-piste {
  height: 14px;
  background: var(--surface-2);
  border: 1px solid var(--trait);
  border-radius: 2px;
  overflow: hidden;
}
.pil-barre-corps { height: 100%; background: var(--vert); }

/* Un solde négatif — plus d'avoirs que de ventes sur la période. Rare, et
   c'est justement pour cela qu'il doit sauter aux yeux plutôt que de sortir
   du cadre en silence. Les rayures le distinguent aussi sans la couleur. */
/* Les hachures ne sont pas une couleur mais un VOILE pose sur le rouge du
   theme : clair sur le rouge sombre du jour, sombre sur le rouge pale de la
   nuit. Sans ce retournement, les rayures disparaitraient a trois heures du
   matin et la barre negative redeviendrait une barre comme les autres. */
.pil-barre-negative {
  --pil-hachure: rgba(255, 255, 255, .38);
  background: var(--rouge);
  background-image: repeating-linear-gradient(
    45deg, transparent 0 3px, var(--pil-hachure) 3px 6px);
}
html[data-theme="sombre"] .pil-barre-negative { --pil-hachure: rgba(0, 0, 0, .32); }

.pil-barre-valeur {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Carte de chaleur ----------------------------------------------------- */

.pil-chaleur { display: grid; gap: 2px; }

/* La teinte vit dans un calque séparé, sous le texte : appliquer l'opacité à
   la case entière ferait pâlir le nombre écrit en même temps que le fond, et
   les créneaux calmes deviendraient illisibles. */
.pil-case {
  position: relative;
  overflow: hidden;
  padding: 5px 2px;
  border: 1px solid var(--trait);
  border-radius: 2px;
  text-align: center;
  line-height: 1.25;
}
.pil-case-fond { position: absolute; inset: 0; background: var(--vert); }
.pil-case-tete,
.pil-case-valeur { position: relative; display: block; }
.pil-case-tete { font-size: 10px; color: var(--texte-doux); }
.pil-case-valeur { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pil-case-vide .pil-case-valeur { color: var(--texte-doux); font-weight: 400; }

/* --- Variations ----------------------------------------------------------- */

.pil-variation { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* En dessous du seuil, la variation reste GRISE. Un tableau de bord qui passe
   au rouge tous les mois pour −3 % n'est plus lu au bout du deuxième mois. */
.pil-variation-neutre { color: var(--texte-doux); font-weight: 600; }
.pil-variation-hausse { color: var(--vert-fonce); }
.pil-variation-baisse { color: var(--rouge); }

/* --- Cartes de rotation cliquables ---------------------------------------- */

.pil-stat-cliquable {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.pil-stat-cliquable:hover { border-color: var(--vert); background: var(--vert-pale); }
.pil-stat-cliquable:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; }
.pil-stat-active {
  border-color: var(--vert);
  border-left: 3px solid var(--vert);
  background: var(--vert-pale);
}

/* Un poste d'officine est souvent un 1366 x 768 : sous cette largeur, les
   barres à trois colonnes se marchent dessus. */
@media (max-width: 1180px) {
  .pil-barre-ligne { grid-template-columns: minmax(90px, 40%) minmax(40px, 1fr) auto; }
  .pil-case-tete { font-size: 9px; }
}

/* =========================================================================
   Équipe et réglages
   ====================================================================== */

.equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.equipe-resume { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.equipe-resume:empty { display: none; }
.equipe-colonne { min-width: 0; }

/* Le ton de la tuile suit ce qu'elle annonce : ambre pour ce qui attend,
   rouge pour ce qui est déjà en retard. Jamais d'animation — on regarde cet
   écran huit heures d'affilée. */
.stat-ambre { border-color: var(--ambre); background: var(--ambre-pale); }
.stat-ambre .stat-valeur { color: var(--ambre); }
.stat-rouge { border-color: var(--rouge); background: var(--rouge-pale); }
.stat-rouge .stat-valeur { color: var(--rouge); }

.liaison { display: flex; flex-direction: column; }
.liaison-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-left: 3px solid transparent;
  background: var(--surface);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.liaison-note:hover { background: var(--vert-pale); }
.liaison-note:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }

/* Une non-lue se voit à trois mètres : filet vert, fond légèrement teinté,
   titre en gras. Elle redevient une ligne ordinaire dès qu'on l'a ouverte. */
.liaison-note.non-lue { border-left-color: var(--vert); background: var(--vert-pale); }
.liaison-note.non-lue .liaison-titre { font-weight: 700; }
.liaison-note.epinglee { border-left-color: var(--ambre); }
.liaison-note.epinglee.non-lue { border-left-color: var(--vert); }

.liaison-marque { width: 14px; flex: none; font-size: 11px; line-height: 1.5; }
.liaison-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.liaison-titre { font-size: 13px; }
.liaison-detail { font-size: 11px; color: var(--texte-doux); display: flex; align-items: center; gap: 5px; }

.liaison-lecteurs { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.liaison-pastille {
  background: var(--vert);
  color: #fff;
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
/* Le compteur de lecteurs n'est pas une décoration : c'est la raison d'être
   du cahier de liaison. Il reste lisible même quand la note est lue. */
.liaison-compteur { font-size: 11px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

.liaison-contenu {
  background: var(--surface-2);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 10px 12px;
  margin: 8px 0 10px;
  font-size: 13px;
  line-height: 1.55;
}

/* Le retard se distingue par un filet et une date rouges. Pas de clignotement :
   ce qui clignote finit recouvert de ruban adhésif. */
.tache-retard td:first-child { box-shadow: inset 3px 0 0 var(--rouge); }
.tache-close { opacity: .55; }
.tache-close td:first-child .gras { text-decoration: line-through; }
.select-statut { width: auto; min-width: 108px; padding: 2px 4px; font-size: 11.5px; }

.case { display: inline-flex; align-items: center; gap: 5px; }
.case input { width: auto; }

.reglages-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.reglages-champs .champ-note { max-width: 46ch; }
.compte-inactif td { opacity: .55; }

@media (max-width: 1100px) {
  .equipe { grid-template-columns: minmax(0, 1fr); }
  .reglages-champs { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   11. Guide — impression
   ==========================================================================
   Une officine colle deux ou trois pages du manuel près du comptoir. La règle
   d'impression du ticket cache tout le poste de travail et ne laisse que
   `.zone-impression` : le guide y est déposé mis en page, en pleine largeur
   cette fois, et chaque page part sur une feuille neuve.
   ========================================================================== */

.guide-impression { color: #000; background: #fff; font-size: 11pt; line-height: 1.45; }
.guide-impression section { padding: 0 0 6mm; }
.guide-impression .guide-saut { break-before: page; page-break-before: always; }
.guide-marque {
  margin: 0 0 4mm;
  padding-bottom: 1mm;
  border-bottom: 1px solid #000;
  font-size: 8pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.guide-impression h2 { font-size: 15pt; margin: 0 0 3mm; }
.guide-impression h3 { font-size: 11.5pt; margin: 5mm 0 1.5mm; }
/* Une consigne coupée entre deux feuilles est une consigne à moitié lue. */
.guide-impression h2, .guide-impression h3 { break-after: avoid; page-break-after: avoid; }
.guide-impression li, .guide-impression p { break-inside: avoid; page-break-inside: avoid; }
.guide-impression p, .guide-impression li { font-size: 11pt; max-width: none; }
.guide-impression ol, .guide-impression ul { padding-left: 7mm; }
.guide-impression .encart {
  border: 1px solid #000;
  background: none;
  padding: 2mm 3mm;
  margin: 0 0 3mm;
  color: #000;
}
.guide-impression .cle {
  border: 1px solid #000;
  background: none;
  color: #000;
  font-weight: 700;
}

/* ===========================================================================
   Carte de chaleur croisée heure × jour (écran Pilotage → Affluence)
   ---------------------------------------------------------------------------
   Section ajoutée en FIN de fichier, et volontairement : elle ne modifie
   aucune règle existante, elle n'en ajoute que de nouvelles.

   Trois contraintes ont dicté ces règles :

    1. Le poste du comptoir fait 1366 × 768. Les 24 colonnes sont donc en
       `minmax(0, 1fr)`, jamais en largeur fixe : une largeur fixe déborde dès
       que la fenêtre rétrécit, et une barre de défilement
       horizontale sur un tableau de bord ne se voit pas, donc ne se lit pas.
    2. Une SEULE teinte, `--vert`, du très clair au soutenu. Une échelle
       arc-en-ciel se lit mal et se photocopie encore plus mal — or le planning
       d'équipe finit affiché en salle de garde.
    3. La teinte vit dans un calque sous le texte (`.pil-case-fond`, défini
       plus haut) : appliquer l'opacité à la case entière ferait pâlir le
       nombre écrit en même temps que le fond.
   ========================================================================= */

.pil-matrice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.pil-matrice-ligne {
  display: grid;
  /* 34 px pour le nom du jour abrégé, le reste partagé en 24 parts égales. */
  grid-template-columns: 34px repeat(24, minmax(0, 1fr));
  gap: 2px;
  align-items: stretch;
}

.pil-matrice-jour {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texte-doux);
  white-space: nowrap;
}

.pil-matrice-heure {
  font-size: 10px;
  color: var(--texte-doux);
  text-align: center;
  line-height: 1.4;
}

.pil-matrice-entete { margin-bottom: 1px; }

.pil-matrice-case {
  position: relative;
  overflow: hidden;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--trait);
  border-radius: 2px;
}

.pil-matrice-valeur {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Une case sans vente reste DESSINÉE, en creux : ne pas la dessiner
   reviendrait à masquer le dimanche fermé, qui est justement ce qu'on veut
   voir. */
.pil-matrice-case-vide { background: var(--surface-2); }

/* Un jour entièrement sans vente : la ligne est estompée mais présente, et
   son nom reste lisible. C'est une information, pas un trou. */
.pil-matrice-ligne-vide .pil-matrice-jour { font-style: italic; opacity: .75; }

/* --- Légende de l'échelle ------------------------------------------------- */
/* Elle porte les bornes chiffrées de chaque palier : sans elles, la carte dit
   « plus foncé » et jamais « deux fois plus ». */

.pil-legende-chaleur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 8px;
}

.pil-legende-case {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}

.pil-legende-pastille {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 20px;
  height: 12px;
  border: 1px solid var(--trait);
  border-radius: 2px;
}

.pil-legende-zero .pil-legende-pastille { background: var(--surface-2); }

/* ===========================================================================
   Analyse pharmaceutique
   ===========================================================================
   La couleur porte le niveau, mais elle ne le porte JAMAIS seule : chaque
   carte annonce son niveau en toutes lettres. Un poste d'officine finit sa
   vie sur un écran fatigué, parfois derrière un filtre de confidentialité, et
   il se trouve toujours quelqu'un qui distingue mal le rouge du brun.
   ======================================================================== */

.analyse-liste { display: grid; gap: 10px; }

.analyse-alerte {
  border: 1px solid var(--trait);
  border-left: 5px solid var(--trait-fort);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--surface-2);
}

.analyse-entete {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.analyse-type { font-weight: 700; }
.analyse-niveau { color: var(--texte-doux); }
.analyse-message { margin: 0; }

/* Du plus grave au plus léger. Le rouge est réservé à ce qui ne se délivre
   pas sans avoir décroché le téléphone. */
.analyse-alerte.niveau-contre_indication {
  border-left-color: var(--rouge);
  background: var(--rouge-pale);
}
.analyse-alerte.niveau-contre_indication .analyse-type { color: var(--rouge); }

.analyse-alerte.niveau-deconseillee {
  border-left-color: var(--ambre);
  background: var(--ambre-pale);
}
.analyse-alerte.niveau-deconseillee .analyse-type { color: var(--ambre); }

.analyse-alerte.niveau-precaution { border-left-color: var(--ambre); }
.analyse-alerte.niveau-a_prendre_en_compte { border-left-color: var(--trait-fort); }

.analyse-inconnus {
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--trait);
}

.analyse-terrains {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 10px 0;
}

.analyse-patient label { display: block; max-width: 420px; }

/* Une ligne de résultat cliquable — recherche de patient. Pleine largeur et
   haute de 34 px : au comptoir, on clique vite et parfois de biais. */
.lien-liste {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid var(--trait);
  background: transparent;
  color: var(--texte);
  cursor: pointer;
  font: inherit;
}
.lien-liste:hover { background: var(--surface-2); }
.lien-liste:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }

/* ===========================================================================
   Le comptage du tiroir
   ===========================================================================
   Une grille de cases, une par coupure, avec la valeur écrite en gros à
   gauche du champ. On compte des tas, on ne remplit pas un formulaire : le
   regard doit tomber sur « 10000 » sans lire une étiquette.
   ======================================================================== */

.billetage { margin: 10px 0; }

.billetage-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin: 8px 0 10px;
}

.billetage-case {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--surface);
}

.billetage-valeur {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 4.6em;
  text-align: right;
  color: var(--texte-doux);
}

/* Billet ou pièce : le 500 F est les deux, et deux cases « 500 » identiques
   ne se départagent pas. Petit et discret — c'est le chiffre qu'on lit, le
   genre ne sert qu'à savoir dans laquelle des deux on tape. */
.billetage-genre {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.billetage-nombre {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--trait);
  background: transparent;
  padding: 4px 2px;
  font: inherit;
  text-align: right;
}
.billetage-nombre:focus-visible { outline: 0; border-bottom-color: var(--vert); }

.billetage-total { border-top: 1px solid var(--trait); padding-top: 6px; }

/* ===========================================================================
   Calendrier des gardes — la fenêtre du logiciel de référence : mois à gauche, grille à
   droite, journées de garde en rouge, aujourd'hui en vert, fin de semaine
   teintée.
   ======================================================================== */
.gardes { display: grid; gap: 12px; max-width: 760px; }
.fenetre-classique { background: var(--surface); border: 1px solid var(--trait-fort); padding: 10px 12px 12px; }
.gardes-consigne { margin: 0 0 6px; font-weight: 600; }
.gardes-annee { text-align: center; font-weight: 600; margin-bottom: 8px; }
.gardes-corps { display: grid; grid-template-columns: 170px minmax(0, 440px); gap: 14px; align-items: start; }
.gardes-mois { display: flex; flex-direction: column; max-height: 330px; overflow-y: auto; border: 1px solid var(--trait); background: var(--surface); }
.gardes-mois-ligne { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; border: 1px solid transparent; background: none; font: inherit; color: var(--texte); text-align: left; cursor: pointer; }
.gardes-mois-ligne:hover { background: var(--selection); }
.gardes-mois-ligne.actif { background: var(--selection); border-color: var(--selection-trait); }
.gardes-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; background: var(--chrome); padding: 6px; border: 1px solid var(--trait); }
.gardes-tete { text-align: center; font-size: 12px; font-weight: 600; padding: 2px 0; }
.gardes-case { height: 34px; border: 1px solid transparent; background: var(--surface); color: var(--onglet-actif); font: inherit; font-weight: 700; cursor: pointer; }
.gardes-case.fin-semaine, .gardes-tete.fin-semaine { background: var(--survol-bas); }
.gardes-case.vide-case { background: transparent; cursor: default; }
.gardes-case.passee { color: var(--texte-doux); font-weight: 400; cursor: not-allowed; opacity: .6; }
.gardes-case.de-garde { background: var(--rouge); color: #fff; }
.gardes-case.aujourdhui { outline: 3px solid var(--vert); outline-offset: -3px; }
.gardes-case.aujourdhui:not(.de-garde) { background: var(--vert); color: #fff; }
.gardes-case:focus-visible { outline: 2px solid var(--focus-trait); outline-offset: 1px; }
.gardes-legende { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; }
.pastille-garde { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; border: 1px solid var(--trait-fort); }
.pastille-garde.de-garde { background: var(--rouge); }
.pastille-garde.aujourdhui { background: var(--vert); }
.pastille-garde.fin-semaine { background: var(--survol-bas); }
@media (max-width: 600px) { .gardes-corps { grid-template-columns: 1fr; } .gardes-mois { max-height: 140px; } }

/* La case « Jour de Garde » du comptoir, cadre rouge. */
.jour-de-garde { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; background: var(--rouge); color: #fff; font-weight: 600; font-size: 12px; }
.jour-de-garde input { margin: 0; accent-color: #fff; }

/* Paramétrage : types de produits (et, à venir, formes et familles) — une
   liste à gauche, le détail à droite, comme les fenêtres du logiciel de référence. */
.param-deux { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 12px; align-items: start; }
.param-liste { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; border: 1px solid var(--trait); background: var(--surface); }
.param-ligne { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border: 1px solid transparent; background: none; font: inherit; color: var(--texte); text-align: left; cursor: pointer; }
.param-ligne:hover { background: var(--selection); }
.param-ligne.actif { background: var(--selection); border-color: var(--selection-trait); }
tr.selectionnee { background: var(--selection); }
#t-tranches input { width: 120px; }
@media (max-width: 600px) { .param-deux { grid-template-columns: 1fr; } .param-liste { max-height: 160px; } }

/* ===========================================================================
   Préparations officinales — la fenêtre du logiciel de référence : table HAUTE (le stock
   filtré par forme), table BASSE (la composition), « Qté à préparer » et
   « TOTAL » entre les deux.
   ======================================================================== */
.prep { max-width: 980px; display: grid; gap: 8px; }
.prep-titre { font-weight: 700; letter-spacing: .04em; color: var(--onglet-actif); }
.prep-entete { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.prep-entete label, .prep-milieu label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.prep-entete input[readonly] { min-width: 260px; font-weight: 600; }
.prep-table, .prep-table-liste { max-height: 260px; overflow: auto; border: 1px solid var(--trait); background: var(--surface); }
.prep-table.prep-active { border-color: var(--selection-trait); box-shadow: 0 0 0 1px var(--selection-trait); }
.prep-table tr[data-haut], .prep-table tr[data-bas], .prep-table-liste tr[data-rang] { cursor: pointer; }
.prep-milieu { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 6px 0; }
.prep-milieu input { width: 90px; }
.prep-total { font-size: 13px; }
.prep-total b { font-size: 15px; margin-left: 4px; }
.prep-qte { width: 90px; text-align: right; }
.prep-boutons { gap: 8px; }
.prep-rubrique { font-size: 13px; margin: 14px 0 4px; letter-spacing: .03em; }
.prep-general { text-align: right; margin: 8px 0; }
@media (max-width: 600px) { .prep-entete input[readonly] { min-width: 0; width: 100%; } }

.param-deux-large { grid-template-columns: 1fr 1fr; }
.param-deux .defilante { max-height: 460px; }
.champ-en-ligne { display: inline-flex; align-items: center; gap: 6px; }

/* ===========================================================================
   Paramétrage Commande — la grille du logiciel de référence (vidéo M1bQAm8Pjgg) : colonnes
   Forme · Type · NomProduit · PPV · Système de commande · Min · Max ·
   Jour/unité · Mois Statistiques · Sél, une LOUPE sur chaque en-tête, une
   ligne de filtre sous les en-têtes, et le réglage avec « Mise à jour des
   produits sélectionnés » en bas.
   ======================================================================== */
#rs-zone { overflow: auto; max-height: 56vh; border: 1px solid var(--trait); background: var(--surface); }
.rs-grille { min-width: 1040px; }
.rs-grille thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.rs-entete { display: inline-flex; align-items: center; gap: 4px; }
.rs-loupe {
  border: 1px solid var(--chrome-trait);
  background: var(--bouton-haut);
  color: var(--texte);
  font-size: 11px;
  line-height: 1;
  padding: 1px 4px;
  cursor: pointer;
}
.rs-loupe:hover { background: var(--survol-bas); border-color: var(--survol-trait); }
.rs-filtre-actif {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--onglet-actif);
  border: 1px solid var(--selection-trait);
  background: var(--selection);
  padding: 0 3px;
}
.rs-filtres th { background: var(--surface); padding: 2px 4px; position: sticky; top: 22px; z-index: 1; }
.rs-filtres input { width: 100%; font-size: 12px; padding: 1px 3px; }
/* Le menu de la loupe : celui d'un tableur, posé sous l'en-tête, refermé dès
   qu'on clique ailleurs. */
.rs-menu {
  position: absolute;
  z-index: 40;
  min-width: 220px;
  max-width: 320px;
  border: 1px solid var(--chrome-trait);
  background: var(--menu-haut);
  box-shadow: var(--ombre);
  font-size: 12.5px;
}
.rs-menu-titre { padding: 3px 8px; font-weight: 700; background: var(--legende-bas); color: var(--menu); }
.rs-menu-section { padding: 3px 8px; font-size: 11.5px; color: var(--texte-doux); border-top: 1px solid var(--menu-haut-trait); }
.rs-menu-defile { max-height: 190px; overflow-y: auto; }
.rs-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  color: var(--texte);
  padding: 2px 12px;
  cursor: pointer;
}
.rs-menu-item:hover { background: var(--selection); }
#rs-reglage { margin-top: 8px; }
#rs-reglage .barre-outils { margin-top: 6px; }

/* ========================================================================
   La file de la caisse et son journal
   ========================================================================
   Deux détails nés avec la caisse centralisée. La LIGNE CHOISIE d'abord : le
   caissier doit voir laquelle il s'apprête à encaisser, sinon il encaisse
   celle du dessus. La LOUPE DE FILTRE ensuite — l'objet que le logiciel de référence pose sur
   chaque en-tête de colonne de son journal de caisse.
   ======================================================================== */
.ligne-choisie { background: var(--selection); }
.ligne-choisie td { font-weight: 600; }
.filtre-loupe {
  border: 1px solid var(--trait);
  background: var(--surface);
  color: var(--texte-doux);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1;
  padding: 1px 5px;
  margin-left: 4px;
  cursor: pointer;
}
.filtre-loupe.actif {
  border-color: var(--selection-trait);
  color: var(--texte);
  font-weight: 600;
}

/* Note : la ligne « Somme » du journal de caisse a été essayée en
   `position: sticky; bottom: 0`. Le collage ne prend pas sur les cellules d'un
   tableau en `border-collapse` — mesuré le 24/09 : la ligne restait à 1009 px
   pour une zone finissant à 905. Elle est donc simplement atteinte en fin de
   défilement, et le récapitulatif par mode, lui, est en TÊTE du journal. */

/* ===========================================================================
   Le bon de livraison — la fenêtre « SAISIE des BONS de LIVRAISON » du
   logiciel de référence (vidéo yGAx1JIXKjU, images de 15:00 à 23:40) : l'en-tête
   Fournisseur / N° du BL / Date B.L, la grille à quatorze colonnes, le
   bandeau des totaux du bas, et la rangée de boutons Esc / F1 / F3 / F4 /
   F5 / F7.
   ======================================================================== */
.bl-entete label { display: inline-flex; gap: 4px; align-items: center; }
.bl-entete input[type="text"][readonly] { background: var(--surface-2); }
.bl-grille { min-width: 1180px; }
.bl-grille input.bl-champ { width: 100%; min-width: 3.6rem; font-size: 12px; text-align: right; }
.bl-grille input[type="date"].bl-champ { min-width: 8rem; text-align: left; }
.bl-filtres th { background: var(--surface); padding: 2px 3px; }
.bl-filtres input { width: 100%; font-size: 11.5px; padding: 1px 3px; }
tr.bl-brouillon { background: var(--ambre-pale); }
.bl-totaux { padding: 6px 8px; }
.bl-bandeau { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.bl-bandeau > span { font-size: 12.5px; }
.bl-bandeau b { font-family: var(--mono); font-size: 13.5px; }

/* Le récapitulatif par catégorie — le même tableau pour un BL, une facture
   fournisseur et le panier d'une vente (`views/assets/recap-categories.js`).
   Les colonnes, elles, reprennent `serre`, `nombre` et `a-droite`. */
.tableau-recap tr.ligne-gratuite td { background: var(--ambre-pale); }
.tableau-recap tr.total td {
  font-weight: 700;
  background: var(--entete-bas);
  border-top: 1px solid var(--trait-fort);
}
.champ-remise-categorie { width: 64px; text-align: right; }

/* « Fin de saisie » : les deux boutons ronds du logiciel de référence, en haut à gauche de la
   fenêtre de saisie. Ce sont des boutons ronds, pas des cases : deux états, et
   un seul à la fois — le réglage d'officine qui décide de ce que conclut la
   touche Entrée. */
.bl-fin-saisie label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.bl-fin-saisie input[type="radio"] { margin: 0; }
/* Qui n'a pas le droit de changer le réglage ne doit pas avoir la main qui
   tremble : un rond grisé se lit comme « réglé ailleurs », pas comme « cassé ».
   Le libellé reste lisible — c'est lui qui explique le comportement d'Entrée. */
.bl-fin-saisie input[type="radio"]:disabled { cursor: default; }
.bl-fin-saisie label:has(input:disabled) { cursor: default; color: var(--texte-doux); }

/* ===========================================================================
   La validation du bon de livraison — l'onglet « Validation Bon Livraison »
   du logiciel de référence (vidéo yGAx1JIXKjU, minutes 23 à 26) : dix colonnes, une ligne
   par catégorie tarifaire, la remise supplémentaire saisissable au milieu, et
   la ligne TOTAL.
   ======================================================================== */
.recap-onglets .onglet { cursor: default; }
.bl-bandeau.recap-bandeau { margin-bottom: 8px; }
.recap-onglets button.onglet { cursor: pointer; }
.recap-case { display: block; margin-top: 10px; font-weight: 600; }
.recap-case .petit { font-weight: 400; }
/* « FACTURATION Fournisseur » : la liste à gauche, les totaux à droite. */
.fp-deux { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
@media (max-width: 980px) { .fp-deux { grid-template-columns: 1fr; } }
.fp-titre { background: var(--encre-douce, #6B7B8C); color: #fff; font-weight: 700; text-align: center; padding: 3px 6px; margin: 8px 0 4px; border-radius: 3px; }
.fp-droite .fp-titre:first-child { margin-top: 0; }
.fp-ligne { display: flex; justify-content: space-between; gap: 10px; padding: 2px 4px; }
.fp-ligne.fp-total { margin-top: 6px; padding: 5px 6px; background: var(--vert-pale); border-radius: 3px; font-size: 15px; }
#fp-documents tr.choisie td, #ec-lignes tr.choisie td, .reechelonnement tr.choisie td { background: var(--vert-pale); }
.reechelonnement input[type="number"] { width: 130px; text-align: right; }
#ec-lignes .a-centre, .reechelonnement .a-centre { text-align: center; }
#fp-documents tr.fp-exclu td { text-decoration: line-through; opacity: .55; }
#fp-documents tr.fp-exclu td:last-child { text-decoration: none; }
.fp-modes { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0; font-weight: 600; }
.fp-validation label { display: block; }
/* « Liste des produits manquants » : la ligne sous le curseur (F1 la marque). */
.manquants tr.choisie td { background: var(--vert-pale); }
.recap-table { min-width: 960px; }
.recap-table th { white-space: nowrap; }
.recap-table td { padding: 3px 6px; }
.recap-table input.recap-remise { width: 5.5rem; text-align: right; font-size: 12px; }
.recap-table tfoot .recap-total td {
  border-top: 2px solid var(--trait-fort);
  font-weight: 700;
  background: var(--surface-2);
}

/* Situation de caisse : en bas, le chiffre d'affaires à gauche et la fin de
   journée à droite (fond du lendemain, F12), comme la fenêtre du logiciel de référence. */
.situation-bas { display: grid; grid-template-columns: 1fr minmax(260px, 360px); gap: 10px; align-items: start; }
.situation-bas > .carte { margin: 0; }
.fin-journee-montant { font-size: 20px; text-align: right; }
@media (max-width: 760px) { .situation-bas { grid-template-columns: 1fr; } }

/* F7 au comptoir — « Proposition Commande Fournisseur » du logiciel de référence : les
   repères du produit cliqué en haut, la colonne « Qté Nette à Cder » en vert,
   corrigeable à la main. */
.propo-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.propo-infos { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 16px; font-size: 13px; }
.propo-infos output { display: inline-block; min-width: 48px; padding: 1px 6px; margin-left: 4px; background: var(--vert-pale); border-radius: 3px; }
.propo-tous { white-space: nowrap; font-weight: 600; color: var(--vert-fonce); }
.propo-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.propo-table td.propo-nette { background: var(--vert); padding: 1px 4px; }
.propo-table td.propo-nette input { width: 56px; text-align: right; font-weight: 700; }
.propo-table tr.choisie td { outline: 1px solid var(--vert); }
.propo-pied { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
@media (max-width: 760px) { .propo-infos { grid-template-columns: 1fr; } .propo-entete { flex-direction: column; } }

/* « Analyse STOCKAGE » de la fiche de stock (Le logiciel de référence, CgM9rMnq-ak). */
.as-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 6px 0 10px; }
.as-pastille { display: inline-block; min-width: 46px; padding: 1px 8px; text-align: center; background: #35d24a; color: #06310d; }
.as-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.as-corps > div:first-child .defilante-as { max-height: 150px; }
.as-corps td, .as-corps th { white-space: nowrap; }
.defilante-as { max-height: 250px; overflow: auto; border: 1px solid var(--trait-fort); }
.as-taux { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 6px; }
.as-taux input { width: 80px; text-align: right; }
td.as-actualise { background: #8df09a; color: #06310d; }
.as-graphique { padding: 6px 8px; }
.as-barre { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; }
.as-barre-date { width: 76px; flex: none; text-align: right; }
.as-barre-piste { flex: 1; min-width: 0; }
.as-barre-trait { display: block; height: 12px; background: #2fa36b; }
.as-barre-valeur { width: 34px; flex: none; }
.as-pied { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.as-pied .stat-valeur { font-size: 17px; }
@media (max-width: 900px) {
  .as-pied { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La fenêtre « Décaissement » : remise des chèques et des cartes en banque. */
.dc-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.dc-titre { margin: 0; font-size: 24px; letter-spacing: 6px; }
.dc-cible { display: flex; flex-direction: column; align-items: stretch; min-width: 300px; text-align: center; }
.dc-cible strong { font-size: 16px; }
.dc-cible span { border: 1px solid var(--trait-fort); padding: 3px 8px; text-align: left; background: var(--surface); }
.dc-corps { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 12px; align-items: start; }
.dc-corps select { width: 100%; margin-bottom: 8px; }
#dc-contreparties tr { cursor: pointer; }
#dc-contreparties tr.choisie td { background: var(--vert-pale); }
.dc-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.dc-tous { font-weight: 700; font-style: italic; }
.dc-liste { max-height: 260px; min-height: 140px; overflow: auto; border: 1px solid var(--trait-fort); }
.dc-pied { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 2fr) minmax(0, 3fr); gap: 12px; align-items: center; margin-top: 12px; }
.dc-touches { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-total { display: flex; flex-direction: column; text-align: center; font-weight: 700; }
.dc-total strong { border: 1px solid var(--trait-fort); background: var(--surface); padding: 8px; font-size: 20px; color: var(--onglet-actif); }
.dc-dates { display: flex; flex-direction: column; gap: 6px; }
.dc-dates label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
@media (max-width: 900px) {
  .dc-corps, .dc-pied { grid-template-columns: minmax(0, 1fr); }
}

/* La fenêtre « RELEVE BANCAIRE » : le compte bancaire. */
.cb-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 8px; }
.cb-tete label { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.cb-report { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cb-case { display: inline-block; min-width: 96px; padding: 3px 8px; text-align: right; border: 1px solid var(--trait-fort); background: var(--surface); font-variant-numeric: tabular-nums; }
.cb-liste { min-height: 220px; max-height: 330px; overflow: auto; border: 1px solid var(--trait-fort); }
.cb-liste tr[data-cle], .cb-liste tr[data-abonnement] { cursor: pointer; }
.cb-liste tr.choisie td { background: var(--vert-pale); }
.cb-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 10px; }
.cb-boutons { display: flex; flex-wrap: wrap; gap: 6px; max-width: 520px; }
.cb-soldes { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.cb-soldes div { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.cb-fiche label { display: block; margin-bottom: 9px; font-weight: 600; }
.cb-fiche input[type="text"], .cb-fiche input[type="date"], .cb-fiche input[type="number"] { display: block; width: 100%; }
.cb-ligne { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.cb-ligne input { width: 110px !important; }
.cb-sens { border: 1px solid var(--trait-fort); padding: 4px 10px 8px; margin: 0 0 9px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cb-sens legend { font-weight: 700; color: var(--onglet-actif); padding: 0 4px; }
.cb-sens label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; }

/* L'onglet « BL en Consignation » de la consultation des BL. */
.cs-corps { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 12px; align-items: start; margin-top: 6px; }
.cs-titre { margin: 0 0 4px; color: var(--onglet-actif); }
.cs-liste { min-height: 200px; max-height: 340px; overflow: auto; border: 1px solid var(--trait-fort); }
.cs-liste tr[data-consignation] { cursor: pointer; }
.cs-liste tr.choisie td { background: var(--vert-pale); font-weight: 700; }
.cs-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 900px) { .cs-corps { grid-template-columns: minmax(0, 1fr); } }

/* Le tableau de bord : les widgets du logiciel de référence. */
.tb-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.tb-widget { border: 1px solid var(--trait-fort); background: var(--surface); min-width: 0; }
.tb-widget > header { color: #fff; font-weight: 700; font-size: 12px; padding: 3px 8px; }
.tb-dans { padding: 6px 8px 8px; }
.tb-palmares, .tb-instances { grid-column: span 2; }
.tb-volets { margin-bottom: 6px; }
.tb-volets .onglet { padding: 3px 9px 2px; font-size: 12px; }
.tb-duo { display: flex; align-items: flex-start; gap: 10px; }
.tb-duo .tb-liste { flex: 1; min-width: 0; }
.tb-chiffre { flex: none; min-width: 54px; text-align: center; font-size: 30px; font-weight: 700; color: #0d8a8a; line-height: 1.1; }
.tb-chiffre.tb-bleu { color: #2a7de0; }
.tb-titre { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.tb-liste { max-height: 170px; overflow: auto; border: 1px solid var(--trait); }
.tb-note { margin: 6px 0 0; font-size: 12px; color: var(--texte-doux); }
.tb-note input { width: 56px; text-align: center; }
.tb-rupture { flex: none; width: 74px; height: 74px; border-radius: 50%; background: #e0202a; color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; }
.tb-palmares-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tb-palmares-tete .tb-volets { margin: 0; border: 0; }
.tb-legende { margin: 2px 0 4px; font-size: 12px; }
.tb-legende i { display: inline-block; width: 11px; height: 11px; margin: 0 3px 0 10px; vertical-align: -1px; }
.tb-graphique { min-height: 150px; }
.tb-barre { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 3px; }
.tb-barre-nom { width: 38%; flex: none; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-barre-piste { flex: 1; min-width: 0; padding-right: 58px; box-sizing: border-box; }
.tb-barre-trait { display: block; height: 7px; position: relative; margin: 1px 0; }
.tb-barre-trait i { position: absolute; left: 100%; top: -4px; margin-left: 4px; font-style: normal; font-size: 10.5px; white-space: nowrap; }
.tb-tranche { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tb-tranche strong { background: #c9a3e8; padding: 2px 12px; }
.tb-colonnes { display: flex; align-items: flex-end; gap: 10px; min-height: 100px; padding: 6px 4px 0; overflow-x: auto; }
.tb-colonnes-serrees { gap: 4px; min-height: 118px; }
.tb-colonne { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 16px; font-size: 11px; }
.tb-colonne span { display: block; width: 100%; max-width: 42px; background: #9ac93a; }
.tb-colonne span.tb-vert { background: #2fa36b; }
@media (max-width: 1100px) { .tb-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .tb-grille { grid-template-columns: minmax(0, 1fr); }
  .tb-palmares, .tb-instances { grid-column: auto; }
}

/* « Mise à jour du fichier des CONFRERES. » */
.cf-recherche { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.cf-recherche input { width: 280px; }
.cf-liste { min-height: 260px; max-height: 380px; overflow: auto; border: 1px solid var(--trait-fort); }
.cf-liste tr[data-confrere] { cursor: pointer; }
.cf-liste tr.choisie td { background: var(--vert-pale); }
.cf-boutons { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* L'inventaire sur téléphone (décision de Landry du 30/09, MB-1) : on compte
   le rayon avec le téléphone dans une main. Le rayon et l'état se retirent,
   la case de comptage grandit (16 px : le téléphone ne zoome plus dessus),
   la barre d'outils passe sur plusieurs lignes. */
@media (max-width: 700px) {
  #s-inv-lignes th:nth-child(1), #s-inv-lignes td:nth-child(1),
  #s-inv-lignes th:nth-child(6), #s-inv-lignes td:nth-child(6) { display: none; }
  #s-inv-lignes td, #s-inv-lignes th { padding: 6px 4px; font-size: 13px; }
  #s-inv-lignes .res-detail { display: block; }
  .inv-compte { width: 72px; font-size: 16px; padding: 8px 6px; }
  #s-inv-filtre { width: 100% !important; }
  .barre-outils { flex-wrap: wrap; }
}

/* Échanges entre confrères. */
.ex-resultats { max-width: 520px; max-height: 160px; overflow: auto; margin-bottom: 8px; }
.ex-produit { cursor: pointer; padding: 3px 6px; border-bottom: 1px solid var(--trait); }
.ex-produit:hover { background: var(--vert-pale); }
.ex-balance { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 14px; align-items: start; }
.ex-balance tr.choisie td { background: var(--vert-pale); font-weight: 700; }
.ex-titre { margin: 10px 0 4px; color: var(--onglet-actif); }
td.ex-vert { background: #bff0c6; }
.ex-soldes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ex-global { background: #35c8c8; }
@media (max-width: 900px) { .ex-balance, .ex-soldes { grid-template-columns: minmax(0, 1fr); } }