/* ==========================================================================
   KLASS Pharma — feuille de style unique.
   ==========================================================================
   Le parti pris, en une phrase : un CHÂSSIS SOMBRE autour d'une SURFACE DE
   TRAVAIL CLAIRE. La barre du haut et le bandeau des touches de fonction en
   bas sont la machine ; tout ce qui est entre les deux est du papier.

   Trois couleurs, et pas une de plus :
     • --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.

   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 {
  --noir:        #0B1F19;   /* le châssis */
  --noir-haut:   #123128;
  --noir-trait:  #24463C;
  --noir-texte:  #C3D6CE;

  --fond:        #E9EEEC;   /* le papier */
  --surface:     #ffffff;
  --surface-2:   #F4F7F5;
  --trait:       #CBD6D1;
  --trait-fort:  #9CAFA8;

  --texte:       #10201B;
  --texte-doux:  #55665F;

  --vert:        #00704A;
  --vert-fonce:  #005537;
  --vert-pale:   #E1F0E8;

  --rouge:       #C10E2B;
  --rouge-pale:  #FBE6EA;

  --ambre:       #A45E00;
  --ambre-pale:  #FBF0DC;

  --mono: Consolas, "Lucida Console", monospace;
  --ombre: 0 2px 10px rgba(11, 31, 25, .14);
}

/* Mode nuit — pour la pharmacie de garde, à trois heures du matin, où un
   écran blanc est une agression. Le châssis ne bouge pas : seule la surface
   de travail s'assombrit. Le parti pris tient dans les deux modes. */
html[data-theme="sombre"] {
  --fond:       #0F241E;
  --surface:    #16302A;
  --surface-2:  #1B3A32;
  --trait:      #2C4E44;
  --trait-fort: #3E6759;
  --texte:      #E6EFEB;
  --texte-doux: #9BB1A9;
  --vert:       #1E9E6E;
  --vert-fonce: #2FC088;
  --vert-pale:  #17392C;
  --rouge:      #FF6B7F;
  --rouge-pale: #3A1B22;
  --ambre:      #E5A64B;
  --ambre-pale: #3A2E17;
  --ombre: 0 2px 12px rgba(0, 0, 0, .45);
}

* { 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; }

/* ==========================================================================
   1. Connexion
   ========================================================================== */

.connexion {
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--noir);
  background-image: radial-gradient(ellipse at 50% 0%, #143a2f 0%, #0B1F19 62%);
  padding: 20px;
}

.connexion-carte {
  width: 340px;
  background: var(--surface);
  border-radius: 4px;
  padding: 26px 26px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
}

.connexion-marque {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--vert);
}

.connexion-officine {
  margin: 2px 0 20px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--texte);
}

.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: 16px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--texte-doux);
}

/* ==========================================================================
   2. Le châssis — barre du haut
   ========================================================================== */

.poste {
  height: 100%;
  display: grid;
  /* châssis · barre de menus · scène · touches de fonction */
  grid-template-rows: 38px auto minmax(0, 1fr) 30px;
}

.chassis {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 10px;
  background: #0B1F19;
  border-bottom: 1px solid #000;
  color: #C3D6CE;
  font-size: 12px;
}

.chassis-identite { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

.chassis-marque {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.chassis-marque::before { content: "\271A"; margin-right: 5px; color: #37D18F; }

.chassis-officine {
  color: #C3D6CE;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chassis-caisse { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.caisse-etat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.caisse-ouverte { background: #12503A; color: #6BE0AC; }
.caisse-fermee  { background: #4A1420; color: #FF9EAC; }

.chassis-outils { display: flex; align-items: center; gap: 10px; }

.chassis-horloge { font-variant-numeric: tabular-nums; color: #fff; font-size: 12px; }

.chassis-utilisateur {
  padding: 2px 7px;
  border: 1px solid #24463C;
  border-radius: 2px;
  font-size: 11px;
  white-space: nowrap;
}

.chassis-bouton {
  background: transparent;
  border: 1px solid #24463C;
  color: #C3D6CE;
  padding: 3px 8px;
  border-radius: 2px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.chassis-bouton:hover { background: #123128; color: #fff; }
.chassis-bouton:focus-visible { outline: 2px solid #37D18F; outline-offset: 1px; }

/* ==========================================================================
   3. La barre de menus et la scène
   ========================================================================== */

/* Rangée comme sur les logiciels d'officine de bureau : les menus en haut,
   l'écran de travail sur toute la largeur — le comptoir en a besoin. */
.barre-menus {
  position: relative;
  z-index: 40;              /* au-dessus de la scène, sous les fenêtres (60) */
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--trait);
}

.barre-rubrique { position: relative; }

.barre-titre {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}
.barre-titre:hover,
.barre-rubrique.ouverte .barre-titre { background: var(--vert-pale); }
.barre-rubrique.actif .barre-titre {
  font-weight: 600;
  color: var(--vert-fonce);
  box-shadow: inset 0 -2px 0 var(--vert);
}

.barre-liste {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.barre-rubrique.ouverte .barre-liste { display: block; }

.barre-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.barre-ligne:hover,
.barre-ligne:focus { background: var(--vert-pale); }
.barre-ligne[aria-current="page"] { font-weight: 600; color: var(--vert-fonce); }

.barre-titre:focus-visible,
.barre-ligne:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }

.barre-separateur { margin: 4px 10px; 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;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.barre-pastille.pastille-douce { background: var(--trait-fort); }

/* Sur un écran étroit, les menus passent à la ligne et la liste dépliée prend
   toute la largeur : une liste de 260 px partie du bord droit sortirait de
   l'écran. */
@media (max-width: 640px) {
  .barre-liste {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    min-width: 0;
  }
  .barre-ligne { white-space: normal; }
}

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

.scene {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--fond);
}

.scene-entete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
}

.scene-titre { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
.scene-sous-titre {
  margin: 0;
  font-size: 11.5px;
  color: var(--texte-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bouton-aide {
  margin-left: auto;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid var(--trait-fort);
  background: var(--surface);
  color: var(--texte-doux);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  flex: none;
  align-self: center;
}
.bouton-aide:hover { border-color: var(--vert); color: var(--vert); background: var(--vert-pale); }
.bouton-aide:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; }

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

/* ==========================================================================
   4. Le châssis — bandeau des touches de fonction
   ========================================================================== */

.pied {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 8px;
  background: #0B1F19;
  border-top: 1px solid #000;
  color: #C3D6CE;
  font-size: 11px;
  overflow: hidden;
}

.pied-touche {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 0;
  background: transparent;
  color: #C3D6CE;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.pied-touche:hover { background: #123128; color: #fff; }
.pied-touche:focus-visible { outline: 2px solid #37D18F; outline-offset: -2px; }
.pied-touche[disabled] { opacity: .38; cursor: default; }
.pied-touche[disabled]:hover { background: transparent; color: #C3D6CE; }

.pied-cle {
  padding: 1px 5px;
  border: 1px solid #24463C;
  border-radius: 2px;
  background: #06120E;
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.pied-note { margin-left: auto; padding-right: 4px; color: #7C948C; font-size: 11px; white-space: nowrap; }

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.bouton:hover { border-color: var(--vert); color: var(--vert-fonce); background: var(--vert-pale); }
.bouton:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; }
.bouton[disabled] { opacity: .45; cursor: default; }
.bouton[disabled]:hover { border-color: var(--trait-fort); color: var(--texte); background: var(--surface); }

.bouton-primaire { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
.bouton-primaire:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }

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

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

.champ { display: block; margin-bottom: 12px; }
.champ-libelle {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--texte-doux);
  text-transform: uppercase;
}
.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: 5px 7px;
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 13px;
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--vert);
  box-shadow: 0 0 0 2px var(--vert-pale);
}
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; }

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 3px;
  margin-bottom: 10px;
}
.carte-entete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--trait);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
}
.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)); }
}

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  padding: 5px 8px;
  border-bottom: 1px solid var(--trait-fort);
  background: var(--surface-2);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--texte-doux);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
td { padding: 4px 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
tbody tr:hover { background: var(--surface-2); }
.a-droite { text-align: right; }
.au-centre { text-align: center; }
.serre td, .serre th { padding-top: 3px; padding-bottom: 3px; }
.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-left: 3px solid var(--trait-fort);
  background: var(--surface-2);
  font-size: 12px;
  margin-bottom: 10px;
}
.encart-rouge { border-left-color: var(--rouge); background: var(--rouge-pale); }
.encart-ambre { border-left-color: var(--ambre); background: var(--ambre-pale); }
.encart-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: 11px; color: var(--texte-doux); }
.barre-outils input, .barre-outils select { width: auto; }
.barre-outils .pousse { margin-left: auto; }

.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--trait); margin-bottom: 10px; }
.onglet {
  padding: 5px 12px;
  border: 1px solid transparent;
  border-bottom: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--texte-doux);
  border-radius: 3px 3px 0 0;
  margin-bottom: -1px;
}
.onglet:hover { background: var(--surface-2); color: var(--texte); }
.onglet.actif {
  background: var(--surface);
  border-color: var(--trait);
  border-bottom: 1px solid var(--surface);
  color: var(--vert-fonce);
  font-weight: 600;
}

/* ==========================================================================
   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: 2px solid var(--trait-fort);
  border-radius: 3px;
  background: var(--surface);
  overflow: hidden;
}
.barre-recherche:focus-within { border-color: var(--vert); }

.barre-recherche input {
  flex: 1;
  border: 0;
  border-radius: 0;
  padding: 7px 10px;
  font-size: 16px;
}
.barre-recherche input:focus { box-shadow: none; }

/* 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); }

.resultats {
  position: absolute;
  left: 0; right: 0;
  z-index: 20;
  margin-top: 3px;
  border: 1px solid var(--trait-fort);
  border-radius: 3px;
  background: var(--surface);
  max-height: 262px;
  overflow: auto;
  box-shadow: var(--ombre);
}
.resultats tr { cursor: pointer; }
.resultats tr.actif { background: var(--vert-pale); }
.resultats tr.actif td { border-bottom-color: var(--vert); }

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

.comptoir-panier {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 3px;
  min-height: 0;
  overflow: hidden;
}
.panier-corps { overflow: auto; }
.panier-table td { vertical-align: middle; }
.panier-qte { width: 56px; padding: 2px 4px; text-align: center; }
.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 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; }

@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); border-radius: 3px; padding: 8px 10px; }
.bloc-titre {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.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); }

/* L'UNIQUE élément fort de tout le logiciel. Tout le reste est plat pour qu'il
   ressorte : c'est le seul chiffre que le patient et l'opérateur regardent en
   même temps. */
.pave-total {
  background: #00704A;
  border: 1px solid #005537;
  border-radius: 3px;
  padding: 9px 12px 11px;
  color: #fff;
}
.pave-total-libelle {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #A8E6C9;
}
.pave-total-valeur {
  display: block;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
}
.pave-total-unite { font-size: 15px; font-weight: 600; margin-left: 4px; color: #A8E6C9; }
.pave-total-note { margin: 3px 0 0; font-size: 11px; color: #A8E6C9; }

/* 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; }
.mode-bouton {
  padding: 7px 6px;
  border: 1px solid var(--trait-fort);
  border-radius: 2px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.mode-bouton:hover { border-color: var(--vert); background: var(--vert-pale); }
.mode-bouton:focus-visible { outline: 2px solid var(--vert); 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); }
.rendu.rendre { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }

/* ==========================================================================
   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(11, 31, 25, .48);
  display: grid;
  place-items: center;
  padding: 18px;
  pointer-events: auto;
}

.fenetre {
  width: 460px;
  max-width: 100%;
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.fenetre.large { width: 760px; }
.fenetre.tres-large { width: 1040px; }
.fenetre.etroite { width: 350px; }

.fenetre-entete {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #0B1F19;
  color: #fff;
  border-radius: 3px 3px 0 0;
}
.fenetre-titre { margin: 0; font-size: 13.5px; font-weight: 600; }
.fenetre-fermer {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #C3D6CE;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.fenetre-fermer:hover { color: #fff; }

.fenetre-corps { padding: 12px; overflow: auto; }
.fenetre-pied {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--trait);
  background: var(--surface-2);
  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); border-radius: 3px; padding: 8px 10px; }
.stat-libelle {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.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; }
.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; }
.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; }