/* Hallmark · checked: 2026-10-29 · genre: modern-minimal (inferred)
 * floor: 0 FAIL · fixed: 7 (20, 34, 48, 67, 3, 63, 26b) · structural: 0 printed
 * built: the project · redesign: polish · v2.0.0 */
/*
 * Mise en page des écrans, transposée de refonte/front/src/ecrans
 * (AccueilPage, PosteComptoirPage) et de shared/layout/BarreNavigation.
 */

#app { height: 100%; }
.ecran { display: flex; height: 100%; width: 100%; flex-direction: column; background: var(--color-cepi-fond); }

/* --- Barre de navigation ----------------------------------------------- */
.barre { flex-shrink: 0; }
.barre__haut { display: flex; align-items: center; gap: 0.75rem; background: var(--color-cepi-gris-pale); padding: 0.75rem 1rem; }
.barre__logo { height: 2.75rem; width: auto; margin-right: 0.75rem; }
.barre__raccourcis { display: flex; gap: 0.75rem; }
.barre__recherche { position: relative; margin-left: auto; width: 20rem; }
.barre__operateur {
  display: flex; height: 2.5rem; align-items: center; gap: 0.75rem; border-radius: var(--radius-full);
  background: var(--color-cepi-bleu-cyan); padding: 0 1.25rem 0 0.25rem; font-family: var(--font-poppins);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-cepi-blanc-pur); white-space: nowrap;
}
.barre__operateur .iconify { width: 2rem; height: 2rem; }
/*
 * Bandeau vert : menu, ← →, fil d'Ariane des étapes de la vente (maquette de la refonte), au vert du
 * design system #6ABD45 (demandé le 02/11/2026, à la place du vert assombri du lot 8 : le blanc
 * sur ce vert n'atteint que 2,34:1, sous le seuil AA ; écart assumé, exclu de l'audit des contrastes).
 */
.barre__bas { display: flex; height: 2.5rem; flex-shrink: 0; align-items: center; gap: 1rem; background: var(--color-cepi-vert); padding: 0 1rem; color: var(--color-cepi-blanc-pur); }
.barre__bas .bouton-icone { width: 2rem; height: 2rem; background: transparent; color: inherit; }
.barre__bas .bouton-icone .iconify { width: 1.75rem; height: 1.75rem; }
.barre__bas .bouton-icone[aria-disabled='true'] { opacity: 0.55; cursor: default; }
.barre__fleches { display: flex; align-items: center; gap: 0.25rem; }
.barre__fleches .bouton-icone .iconify { width: 1.375rem; height: 1.375rem; }
.barre__officine { font-family: var(--font-poppins); font-size: var(--text-sm); font-weight: 500; }
/* Fil d'Ariane : badge de touche, libellé ; un trait sépare deux étapes. */
.fil { min-width: 0; }
.fil__etapes { display: flex; min-width: 0; align-items: center; white-space: nowrap; }
.fil__etape { display: flex; align-items: center; }
.fil__etape + .fil__etape::before { content: ''; width: 1.5rem; height: 2px; margin: 0 1rem; border-radius: var(--radius-full); background: currentColor; }
.fil__lien {
  display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-md); padding: 0.125rem 0.25rem;
  font-family: var(--font-poppins); font-size: var(--text-sm); font-weight: 500; color: inherit;
}
button.fil__lien { cursor: pointer; }
button.fil__lien:hover .fil__libelle { text-decoration: underline; text-underline-offset: 0.2em; }
.fil__etape[aria-current='step'] .fil__libelle { font-weight: 700; }
.fil__touche {
  min-width: 1.5rem; border-radius: 0.3125rem; background: var(--color-cepi-blanc-pur); padding: 0 0.25rem;
  font-family: var(--font-poppins); font-size: var(--text-2xs); line-height: 1rem; font-weight: 600; text-align: center;
  color: var(--color-texte-vert);
}
.dmp { font-family: var(--font-poppins); font-size: var(--text-xs); font-weight: 600; }
.couleur-cyan { background: var(--color-cepi-bleu-cyan) !important; color: var(--color-cepi-blanc-pur) !important; }
.couleur-gris-fonce { background: var(--color-cepi-gris-fonce) !important; color: var(--color-cepi-blanc-pur) !important; }
.couleur-vert { background: var(--color-texte-vert) !important; color: var(--color-cepi-blanc-pur) !important; }
.couleur-jaune { background: var(--color-cepi-jaune) !important; color: var(--color-cepi-gris-fonce) !important; }
.couleur-gris { background: var(--color-cepi-gris) !important; color: var(--color-cepi-gris-fonce) !important; }
.couleur-bleu-fonce { background: var(--color-cepi-bleu-fonce) !important; color: var(--color-cepi-blanc-pur) !important; }

/* --- Résultats de recherche (ResultatsRecherche) ----------------------- */
.resultats { top: 100%; left: 0; width: 100%; max-height: 24rem; margin-top: 0.5rem; }
.resultat__nom--normal { font-weight: 400; }
.resultat__statut { margin-left: auto; font-size: var(--text-xs); font-weight: 600; color: var(--color-texte-rouge); }
.resultat__produit { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.5rem; }
.resultat__libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultat__libelle--barre { text-decoration: line-through; }
.resultat__infos { margin-left: auto; display: flex; flex-shrink: 0; align-items: center; gap: 0.75rem; font-variant-numeric: tabular-nums; }
.resultat__prix { color: var(--color-cepi-gris-fonce); font-weight: 400; }
.resultat__stock { min-width: 4.5rem; text-align: right; font-weight: 400; color: var(--color-cepi-gris-fonce); }
.resultat__stock--positif { font-weight: 700; color: var(--color-cepi-bleu-cyan); }
.resultat__stock--negatif { font-weight: 700; color: var(--color-texte-rouge); }
.liste-badge {
  display: inline-flex; min-width: 1.5rem; justify-content: center; border-radius: var(--radius-md); padding: 0 0.25rem;
  font-size: var(--text-2xs); line-height: 1rem; font-weight: 700; border: 1px solid currentColor;
}
.liste-badge--stupefiant { color: var(--color-texte-rouge); }

/* --- Accueil (maquette_ecran_de_vente.png) ----------------------------- */
.accueil { display: flex; min-height: 0; flex: 1; flex-direction: column; align-items: center; justify-content: safe center; overflow-y: auto; padding: 1rem; }
.accueil__titre { margin-bottom: 1.5rem; font-family: var(--font-poppins); font-size: var(--text-2xl); line-height: var(--text-2xl--lh); font-weight: 600; color: var(--color-cepi-bleu-cyan); text-align: center; }
.accueil__recherche { position: relative; width: 100%; max-width: 36rem; }
/* Séparateurs : un filet plein, court, à la teinte des traits ; le « ou » se lit au milieu. */
.accueil__separateur { margin: 2rem 0; display: flex; width: 100%; max-width: 36rem; align-items: center; gap: 1rem; }
.accueil__trait { height: 1px; flex: 1; background: var(--trait); }
.accueil__ou { font-size: var(--text-sm); font-weight: 500; color: var(--color-cepi-gris-fonce); }
.accueil__actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 2rem; }
.accueil__action {
  position: relative; display: flex; flex-direction: column; align-items: center; border-radius: var(--radius-2xl); padding: 0.5rem 1rem;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.accueil__action:hover { background: var(--survol-clair); }
.accueil__action p { font-size: var(--text-sm); color: var(--color-cepi-gris-fonce); }
.accueil__vitale { width: 7.75rem; height: 7.75rem; margin: -0.75rem 0 -0.25rem; color: var(--color-texte-vert); }
.accueil__scanner { width: 6.25rem; height: 6.25rem; margin-bottom: 0.5rem; color: var(--color-cepi-gris-fonce); }
.accueil__diviseur { margin: 0 2.5rem; height: 4rem; width: 1px; background: var(--trait); }

/* --- Poste comptoir (PosteComptoirPage) -------------------------------- */
/* La barre d'outils descend sur toute la hauteur du poste, le long du tableau : déployé ou non,
   tous ses outils restent visibles. Le haut se fond dans la grille du contenu (display: contents),
   à droite de la barre, au-dessus du bas. */
.poste__contenu { display: grid; min-height: 0; flex: 1; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem; }
.poste__haut { display: contents; }
.poste__outils { grid-row: 1 / -1; display: flex; flex-direction: column; gap: 0.75rem; }
.poste__grille { display: grid; min-width: 0; flex: 1; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr) auto; gap: 0.75rem; }
.poste__zone { position: relative; display: flex; min-width: 0; outline: none; }
.poste__zone > .panneau { min-width: 0; flex: 1; }
.poste__colonne { display: flex; flex-direction: column; gap: 0.75rem; }
.poste__profils { position: relative; display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.125rem; outline: none; }
.poste__profils > .panneau:first-of-type { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.poste__profils > .panneau:last-of-type { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.poste--deploye .repliable { max-height: 2.75rem; }
/*
 * Poste déployé (le tableau a le focus) : patient, prescripteur et tuiles gardent la largeur
 * du poste replié, seule la hauteur change. Les formulaires cèdent la place à leur résumé en
 * lecture seule (voir bloc-dossier-patient.js) ; le prescripteur réduit à l'essentiel, les
 * profils patient et client prennent le reste de sa colonne. Les résumés fixent la hauteur de
 * la rangée ; le tableau garde le reste, au moins 10 lignes en 1920 × 1080.
 */
.poste--deploye .dossier-patient,
.poste--deploye .bloc-prescripteur { max-height: none; }
.poste--deploye .dossier-patient .bloc--complet,
.poste--deploye .bloc-prescripteur .bloc--complet { display: none; }
.poste--deploye .dossier-patient .resume,
.poste--deploye .bloc-prescripteur .resume { display: grid; }
.poste__tuiles { position: relative; display: grid; gap: 0.5rem; width: 16rem; grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr; view-transition-name: tuiles; }
/* Déployé : toujours 2 × 5 dans la même largeur ; les tuiles suivent la hauteur des résumés,
   plus basse que celle des formulaires, et s'amincissent d'autant. */
.poste--deploye .poste__tuiles { gap: 0.375rem; }
/* Sur une tuile basse (poste déployé, fin de vente), le libellé sur deux lignes monte jusqu'au compteur : il passe dans le coin. */
.poste--deploye .poste__tuiles .tuile__pastille,
.poste--fin .poste__tuiles .tuile__pastille { top: -0.375rem; right: -0.25rem; }
.poste__tuile { position: relative; display: flex; }
.poste__tuiles .raccourci--tuile { display: none; }
.poste__tuiles:focus-within .raccourci--tuile { display: block; }
.poste__tuiles:focus-within > .raccourci--zone { display: none; }
.poste__bas { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 0.75rem; }
.poste__tableau { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 0.5rem; border-radius: var(--radius-2xl); outline: none; view-transition-name: tableau; }
.poste__tableau > .tableau { min-height: 0; flex: 1; }
.poste__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
/* Bandeau des totaux (D8) : parts estimées, mises à jour à chaque projection */
.bandeau { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: flex-end; gap: 0.75rem; margin: 0 0.5rem; }
.bandeau .relatif, .bandeau > span { position: relative; }
.bandeau__montants { display: flex; min-width: 0; align-items: center; gap: 1.25rem; }
.bandeau__compte { display: flex; flex-direction: column; font-size: var(--text-xs); color: var(--color-cepi-gris-fonce); text-align: right; }
.bandeau__type { font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.bandeau__type--sans { color: var(--color-cepi-gris-souris); }
.bandeau__montant { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.bandeau__libelle { font-size: var(--text-xs); color: var(--color-cepi-gris-fonce); }
.bandeau__montant strong { font-size: var(--text-base); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.bandeau__montant--ttc strong, .bandeau__montant--patient strong { font-family: var(--font-poppins); font-size: var(--text-xl); }
.bandeau__montant--alerte strong { color: var(--color-texte-rouge); }
.bandeau__alerte { border-radius: var(--radius-full); background: var(--fond-orange); padding: 0.125rem 0.625rem; font-size: var(--text-xs); font-weight: 600; color: var(--color-texte-orange); }
/* « Détail » à la hauteur d'Annuler et Valider : une rangée, une hauteur ; son badge Alt+T tombe sous le libellé, pas dessus. */
.bandeau .bouton { min-height: 2.75rem; padding: 0.5rem 1.25rem; }

/* Détail de la facture */
.modale--detail { --largeur: 62rem; }
.detail-facture { display: flex; flex-direction: column; gap: 1rem; }
.detail-facture .tableau th, .detail-facture .tableau td { padding: 0 0.625rem; }
.detail-facture__parametres { display: flex; flex-direction: column; gap: 0.5rem; }
.detail-facture__parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.25rem 1.5rem; }
.detail-facture__parts > div { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--color-cepi-gris); padding: 0.25rem 0; font-size: var(--text-sm); }
.detail-facture__parts dt { color: var(--color-cepi-gris-fonce); }
.detail-facture__parts dd { font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.detail-facture__net dd { font-size: var(--text-base); }
.detail-facture__alerte dd { color: var(--color-texte-rouge); }
.detail-facture__titre { margin-bottom: 0.375rem; font-family: var(--font-poppins); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.detail-facture__alertes { padding-left: 1.25rem; list-style: disc; font-size: var(--text-sm); color: var(--color-texte-orange); }
.vt-patient { view-transition-name: patient; }
.vt-prescripteur { view-transition-name: prescripteur; }

/* Blocs patient et prescripteur */
.bloc { display: flex; flex-direction: column; gap: 0.375rem; }
/*
 * Résumés patient et prescripteur (poste déployé) : paires libellé / valeur en texte, sans
 * bordure ni fond de champ — rien ici n'est modifiable, donc rien n'a l'habillage d'une saisie.
 * Deux colonnes aux libellés alignés, rangées comme dans le formulaire ; une valeur longue passe
 * à la ligne plutôt que d'être rognée : un nom de mutuelle ou de centre coupé ne distingue plus rien.
 */
.resume { display: none; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0; font-size: var(--text-sm); line-height: var(--text-sm--lh); }
/* Les paires se fondent dans la grille du résumé, partagée par ses bandes (subgrid) : chaque
   colonne de libellés prend la largeur du plus long, le reste va aux valeurs, alignées d'une
   bande à l'autre. */
.resume__groupe { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; row-gap: 0.25rem; padding: 0 0.625rem; }
/* Ce qu'on vient chercher dans chaque bande — la couverture pour le patient, les dates de la
   vente pour le prescripteur — se détache par un pas de ton, pas par un filet. */
.resume__groupe--cadre { border-radius: var(--radius-lg); background: var(--color-cepi-blanc-pur); padding: 0.375rem 0.625rem; }
.resume__groupe--principal dd { font-size: var(--text-base); }
/* Dates de la vente : une date ne se coupe jamais en deux (« 29/10/2 » puis « 6 » à 1280 px) ; chaque colonne garde au moins sa largeur. */
.resume__groupe--trois { grid-template-columns: repeat(3, max-content minmax(min-content, 1fr)); column-gap: 1rem; }
.resume__groupe--trois dd { overflow-wrap: normal; white-space: nowrap; }
.resume__etats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.resume__etat { border-radius: var(--radius-full); background: var(--color-cepi-gris-pale); padding: 0 0.5rem; font-weight: 600; color: var(--color-cepi-gris-fonce); }
.resume__paire { display: contents; }
.resume__paire--ligne dd { grid-column: 2 / -1; }
.resume__paire dt { color: var(--color-texte-gris); }
.resume__paire dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.resume__paire--nir dd { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.resume__paire--alerte dd { color: var(--color-texte-rouge); }
.resume__paire--fete dd { color: var(--color-texte-vert); }
.resume__verrou { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.375rem; margin: 0; padding: 0 0.625rem; font-size: var(--text-xs); color: var(--color-cepi-gris-fonce); }
.resume__verrou .iconify { width: 0.875rem; height: 0.875rem; }
.bloc__rang { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bloc__rang--retrait { padding-left: 2rem; }
.bloc__duo { display: flex; gap: 0.5rem; }
/*
 * Refus d'un champ en ligne (NIR, clé, rang, code postal, téléphones, date…) : le message passe sous la rangée,
 * d'un seul tenant, au lieu de s'écraser mot par mot sous un champ de trois caractères et d'étirer toute la rangée.
 * Le champ s'efface de la mise en page (display: contents) et transmet sa largeur à sa ligne ; le message reste
 * dans le champ (role="alert", aria-describedby), seule sa place à l'écran change.
 */
.bloc__rang:has(> .champ--erreur), .bloc__duo:has(> .champ--erreur) { flex-wrap: wrap; row-gap: 0.125rem; }
.bloc__rang > .champ--erreur, .bloc__duo > .champ--erreur { display: contents; }
.bloc__rang > .champ--erreur > .champ__ligne, .bloc__duo > .champ--erreur > .champ__ligne { flex: inherit; width: inherit; min-width: inherit; }
.bloc__rang > .champ--erreur > .champ__erreur, .bloc__duo > .champ--erreur > .champ__erreur { order: 1; flex-basis: 100%; }
/* Rangée sans retrait : le message s'aligne sur le texte du premier champ, après l'icône de la rangée. */
.bloc__rang:not(.bloc__rang--retrait) > .champ--erreur > .champ__erreur { padding-left: 2.5rem; }
.bloc__grille-bas { margin-top: 0.25rem; display: grid; grid-template-columns: auto 1fr min-content 1fr; align-items: center; gap: 0.375rem 0.5rem; }
.bloc__grille-prescripteur { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.375rem 0.5rem; }
.bloc__cases { display: flex; justify-content: center; gap: 1.5rem; }
.bloc__pied { display: flex; justify-content: space-between; padding: 0 0.25rem; font-size: var(--text-sm); }
.bloc__pied div { display: flex; gap: 0.25rem; }
.bloc__entete-champ { min-width: 0; flex: 1; }
.bloc__entete-champ .champ__boite { height: 2rem; }
.bloc__entete-champ .champ__libelle-interne { border-right-color: var(--color-cepi-gris); }
.bloc .bouton-icone--petit { width: 1.75rem; height: 1.75rem; background: transparent; color: var(--color-cepi-bleu-cyan); }
.bloc .bouton-icone--petit .iconify { width: 1.125rem; height: 1.125rem; }
.date-alerte .champ__boite { box-shadow: inset 0 0 0 2px var(--color-cepi-rouge); }
.date-alerte .champ__controle { color: var(--color-texte-rouge); }
.logo-visiodroits { height: 1.25rem; margin-left: auto; }

/*
 * Ligne de saisie produit (omnibox) : dernière ligne du tableau (tfoot), chaque champ sous sa colonne.
 * Collée au bas du tableau quand les lignes défilent ; un trait la sépare des lignes saisies.
 * Sans produit en saisie, seuls la zone Produit et ses voisins actifs se voient : les champs
 * inactifs perdent leur boîte, la ligne se lit comme une ligne vide du tableau.
 */
.grille tfoot.saisie { position: sticky; bottom: 0; z-index: 1; background: var(--color-cepi-blanc-pur); font-weight: 400; color: var(--color-cepi-gris-fonce); }
.grille .saisie__champs > td { position: relative; height: 2.5rem; padding: 0.375rem 0.1875rem; vertical-align: middle; }
/* Trait du haut dessiné dans la cellule : il suit la ligne collée (une ombre interne trace aussi les bords des cellules). */
.grille .saisie__champs > td::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--color-cepi-bleu-cyan); }
.grille .saisie__champs > td:first-child { padding-left: 0.5rem; }
.grille .saisie__champs > td:last-child { padding-right: 0.5rem; }
.saisie__cellule { display: flex; min-width: 0; margin-inline: auto; flex-direction: column; }
.saisie__designation { display: flex; min-width: 0; align-items: center; gap: 0.5rem; }
.saisie__cellule--produit { flex: 1; }
.saisie__cellule .champ__boite { height: 1.75rem; }
.saisie__cellule input, .saisie__cellule select { text-align: center; font-variant-numeric: tabular-nums; }
.saisie__cellule select { padding-right: 1.25rem; }
.saisie__cellule--produit input { text-align: left; }
/* Majuscules forcées dans la zone Produit (§4.2) : affichage seulement, l'API normalise. */
.saisie__cellule--produit input:not(:placeholder-shown) { text-transform: uppercase; }
.saisie__cellule--quantite .champ__controle { font-weight: 700; color: var(--color-cepi-bleu-cyan); }
.saisie__champs .champ--desactive { opacity: 1; }
.saisie__champs .champ--desactive .champ__boite { background: transparent; box-shadow: none; }
.saisie__champs .champ--desactive .champ__fleche { display: none; }
/* Prix des lignes de rétrocession et du tarif industrie : sans colonne, son libellé reste à l'écran. */
.saisie__cellule--tarif { flex-direction: row; align-items: center; gap: 0.375rem; }
.saisie__cellule--tarif[hidden] { display: none; }
.saisie__libelle-tarif { flex-shrink: 0; font-size: var(--text-xs); font-weight: 600; color: var(--color-cepi-gris-fonce); }
.saisie__cellule--tarif .champ { min-width: 0; flex: 1; }
.saisie__code { display: block; font-weight: 600; color: var(--color-cepi-bleu-cyan); text-align: center; }
.grille td.saisie__suite { padding: 0 0.75rem 0.375rem; text-align: left; white-space: normal; }
.saisie__infos { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-left: 0.25rem; font-size: var(--text-xs); color: var(--color-cepi-bleu-cyan); }
.saisie__info--alerte { font-weight: 700; color: var(--color-texte-rouge); }
.saisie__info--rappel { font-weight: 600; color: var(--color-cepi-bleu-fonce); }
.resultats--panier { width: auto; max-width: min(56rem, calc(100vw - 2rem)); margin-top: 0; }

/* Tableau des lignes de la vente. Densité de comptoir (lot 8) : au moins 25 lignes visibles en
   1920 × 1080 quand le tableau a le focus (poste déployé) ; lignes de 26 px au lieu de 40 px. */
.grille tbody tr { height: 1.625rem; outline: none; cursor: default; }
.grille th { height: 2rem; }
.grille tbody tr[aria-selected="true"] { background: var(--fond-selection-grille) !important; }
.grille tbody tr:focus-visible, .grille tbody tr[tabindex="0"]:focus { box-shadow: inset 0 0 0 2px var(--color-cepi-bleu-cyan); }
.grille__section td { text-align: center; font-weight: 700; color: var(--color-texte-rouge); letter-spacing: 0.02em; }
.grille__commentaire td { font-style: italic; font-weight: 400; color: var(--color-cepi-gris-fonce); }
.grille__insertion td { border: 1px dashed var(--color-cepi-bleu-cyan); font-size: var(--text-xs); font-weight: 400; font-style: italic; color: var(--color-cepi-bleu-cyan); text-align: center; }
.grille__ligne--alerte { color: var(--color-texte-rouge); }
.grille__ligne--retour .grille__quantite { color: var(--color-texte-orange); }
.grille__ligne--honoraire { font-style: italic; }
.grille__puce { font-weight: 700; color: var(--color-texte-rouge); }
.grille td.grille__technique { font-size: var(--text-xs); font-weight: 400; color: var(--color-texte-gris); }
.grille th.grille__technique { font-size: var(--text-xs); font-style: italic; }
.grille tbody tr[aria-selected="true"] td.grille__technique { color: var(--color-cepi-gris-fonce); }
.grille .droite, .grille .grille__quantite { font-variant-numeric: tabular-nums; }
.modale__ne-plus-poser { margin-top: 0.75rem; }

/* Listes de choix : palette, css/fenetres.css */

/* Outils de démonstration (propres au prototype) */
.demo {
  position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 40; display: flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius-full); background: var(--fond-demo); padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  box-shadow: var(--shadow-md); font-size: var(--text-xs); color: var(--color-cepi-gris-fonce);
}
.demo__titre { font-weight: 600; }
.demo a { color: var(--color-cepi-bleu-cyan); font-weight: 600; text-decoration: none; }
.demo a:hover { text-decoration: underline; }
.demo .bouton { min-height: 1.5rem; padding: 0 0.75rem; font-size: var(--text-xs); }
.demo .bouton .raccourci { margin-left: 0.125rem; }
.demo a { border-radius: var(--radius-sm); padding: 0.125rem 0.25rem; }
/* Lot 9 : sur le poste, la barre se replie pour ne pas masquer les totaux du pied (Total HT, compte) ;
   survol, focus clavier ou menu de scan ouvert la déplient. Les outils restent focusables. */
body:has(.poste) .demo:not(:hover, :focus-within, :has([aria-expanded="true"])) > :not(.demo__titre) {
  position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap;
}

::view-transition-group(*) { animation-duration: 200ms; }

/* --- Lot 2 : en-tête modifiable ------------------------------------------ */
.liste-choix { max-height: 18rem; z-index: 55; }
.bloc__indicateurs { display: flex; flex-shrink: 0; gap: 0.25rem; }
.puce {
  display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 0 0.5rem; margin-left: 0.25rem;
  font-size: var(--text-xs); line-height: 1.125rem; font-weight: 600;
  background: var(--color-cepi-jaune); color: var(--color-cepi-gris-fonce); white-space: nowrap;
}
.puce--vitale { background: var(--color-texte-vert); color: var(--color-cepi-blanc-pur); }
.puce--alerte { background: var(--color-texte-rouge); color: var(--color-cepi-blanc-pur); }
.bloc__verrou { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-lg); background: var(--color-cepi-gris-pale); padding: 0.125rem 0.5rem; font-size: var(--text-xs); color: var(--color-cepi-gris-fonce); }
.bloc__verrou .iconify { width: 1rem; height: 1rem; }
.bloc__verrou .bouton { margin-left: auto; min-height: 1.5rem; font-size: var(--text-xs); }
.date-anniversaire .champ__boite { background: var(--fond-vert-fort); box-shadow: inset 0 0 0 2px var(--color-cepi-vert); }
.bloc__dates { width: 100%; border-radius: var(--radius-lg); padding: 0.125rem 0.25rem; text-align: left; }
.bloc__dates:hover { background: var(--color-cepi-blanc-pur); }
.bloc__dates span { white-space: nowrap; }
.suggestion-prescripteur { display: flex; align-items: center; gap: 0.25rem; }
.suggestion-prescripteur--traitant { color: var(--color-texte-vert); }

/* Profils */
.profil { height: 100%; font-size: var(--text-xs); }
.profil__vide { color: var(--color-texte-gris); font-style: italic; text-align: center; padding-top: 0.5rem; }
.definitions { display: flex; flex-direction: column; gap: 0.25rem; }
.definitions > div { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: 0.5rem; }
.definitions dt { color: var(--color-cepi-gris-fonce); }
.definitions dd { font-weight: 600; color: var(--color-cepi-bleu-cyan); }
/* Profils du poste : une ligne par information, quel que soit le patient — une valeur longue
   (pathologies, accompagnement) ne pousse plus la rangée du haut. Elle est coupée par « … »,
   son texte complet en infobulle au survol (creerProfils) ; Alt+4 la déplie en entier. */
.profil .definitions > div { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); }
.profil .definitions dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poste__profils:focus-within .profil .definitions dd { white-space: normal; }
.modale .definitions { font-size: var(--text-sm); }

/* Formulaires en modale */
/* Colonne des libellés à la largeur du plus long, plafonnée : un libellé de paramètre très long passe à la
   ligne au lieu de repousser les champs dans un quart du tiroir. */
.formulaire { display: grid; grid-template-columns: fit-content(18rem) minmax(0, 1fr); align-items: center; gap: 0.5rem 0.75rem; }
.formulaire__case, .formulaire__ligne-entiere { grid-column: 1 / -1; }
.formulaire__case { padding-left: 0.25rem; }
.formulaire__ligne-entiere { display: flex; flex-direction: column; gap: 0.25rem; }
.formulaire__zone { width: 100%; resize: vertical; border-radius: var(--radius-lg); background: var(--color-cepi-blanc-pur); padding: 0.5rem 0.75rem; font-size: var(--text-sm); color: var(--color-cepi-bleu-cyan); box-shadow: inset 0 0 0 1px var(--color-cepi-gris); }
.formulaire__zone:focus-visible { outline: 2px solid var(--couleur-focus); }
.colonne-cases { display: flex; flex-direction: column; gap: 0.5rem; }
.modale__actions .relatif { position: relative; display: inline-flex; }

/* Note automatique, historique */
.tableau--modale { max-height: 24rem; }
.historique__total { margin-top: 0.5rem; text-align: right; font-weight: 700; color: var(--color-cepi-bleu-cyan); }

/* Comparaison carte / fichier */
.ecart-carte { color: var(--color-texte-rouge); font-weight: 700; }
.segment { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 0.75rem; }
.segment__libelle { position: relative; justify-self: start; font-family: var(--font-poppins); font-weight: 600; color: var(--color-cepi-bleu-cyan); padding-right: 1.5rem; }
.segment__options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; }
.segment__option { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; border-radius: var(--radius-xl); background: var(--color-cepi-blanc-pur); padding: 0.375rem 0.75rem; text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--color-cepi-bleu-cyan); box-shadow: inset 0 0 0 1px var(--color-cepi-gris); }
.segment__option[aria-pressed='true'] { background: var(--color-cepi-bleu-cyan); color: var(--color-cepi-blanc-pur); }
.segment__option:disabled { opacity: 0.5; cursor: not-allowed; }
.segment__detail { font-size: var(--text-2xs); font-weight: 400; }

/* --- Lot 5 : dispensation ------------------------------------------------ */
.dispensation__produit { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-family: var(--font-poppins); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.dispensation__erreur { margin-bottom: 0.75rem; border-radius: var(--radius-lg); background: var(--fond-erreur); box-shadow: inset 0 0 0 1px var(--color-cepi-rouge); padding: 0.5rem 0.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-texte-rouge); white-space: pre-line; }
.modale--substitution { --largeur: 44rem; }
.substitution__options { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.substitution__options legend { margin-bottom: 0.5rem; }
.substitution__option { position: relative; display: flex; align-items: flex-start; gap: 0.625rem; border-radius: var(--radius-xl); background: var(--color-cepi-blanc-pur); padding: 0.5rem 2rem 0.5rem 0.75rem; font-size: var(--text-sm); color: var(--color-cepi-gris-fonce); box-shadow: inset 0 0 0 1px var(--color-cepi-gris); cursor: pointer; }
.substitution__option:has(:checked) { background: var(--color-cepi-gris-clair); box-shadow: inset 0 0 0 2px var(--color-cepi-bleu-cyan); color: var(--color-cepi-bleu-cyan); font-weight: 600; }
.substitution__radio { margin-top: 0.2rem; accent-color: var(--color-cepi-bleu-cyan); }
.substitution__radio:focus-visible { outline: 2px solid var(--couleur-focus); outline-offset: 2px; }
.substitution__motif { margin-bottom: 0.75rem; }
.modale--lots { --largeur: 52rem; }
.lots__stock { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: var(--text-sm); }
.lots__lot { border-radius: var(--radius-full); background: var(--color-cepi-blanc-pur); padding: 0.125rem 0.75rem; font-size: var(--text-xs); font-weight: 600; color: var(--color-cepi-bleu-cyan); box-shadow: inset 0 0 0 1px var(--color-cepi-bleu-cyan); }
.lots__lot:hover { background: var(--color-cepi-gris-clair); }
.lots__tableau table { width: 100%; table-layout: fixed; }
.lots__tableau td { padding: 0.25rem; }
.lots__tableau th:nth-child(4), .lots__tableau td:nth-child(4) { width: 5rem; }
.lots__tableau th:last-child, .lots__tableau td:last-child { width: 3rem; }
.lots__tableau .champ, .lots__tableau .champ__boite { min-width: 0; }
.lots__pied { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.lots__total { font-size: var(--text-sm); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.lots__total--ecart { color: var(--color-texte-orange); }
.generiques__tableau { max-height: 26rem; }
/* Huit colonnes dans le tiroir : des cellules plus serrées, sans ascenseur horizontal à 1440 px. */
.generiques__tableau th, .generiques__tableau td { padding: 0 0.625rem; }
.generiques__ligne, .generiques__complete { cursor: pointer; outline: none; }
.generiques__ligne:focus, .generiques__complete:focus { box-shadow: inset 0 0 0 2px var(--color-cepi-bleu-cyan); }
.generiques__ligne:hover, .generiques__complete:hover { background: var(--color-cepi-gris-clair); }
.generiques__ligne--princeps td { background: var(--fond-princeps); }
.generiques__ligne--actuel td { font-style: italic; }
.generiques__nom { position: relative; padding-left: 1.5rem !important; }
.generiques__een { font-size: var(--text-xs); color: var(--color-texte-orange); }
.generiques__complete td { font-style: italic; color: var(--color-cepi-bleu-fonce); }
.grille__marque { display: inline-flex; margin-left: 0.375rem; border-radius: var(--radius-full); background: var(--color-cepi-bleu-fonce); padding: 0 0.375rem; font-size: var(--text-2xs); line-height: 1rem; font-weight: 700; color: var(--color-cepi-blanc-pur); vertical-align: middle; }
.grille__marque--lot { background: var(--color-texte-vert); }
.grille__marque--neutre { background: var(--color-cepi-gris-souris); }
.grille__promis { font-size: var(--text-xs); color: var(--color-texte-orange); }
.grille__ligne--promotion { color: var(--color-texte-vert); }
.grille__ligne--promotion td { font-style: italic; }
.grille__ligne--associe { color: var(--color-texte-gris); }
.menu-contextuel { z-index: 80; max-height: calc(100vh - 1rem); overflow-y: auto; min-width: 20rem; padding: 0.25rem 0; }
.menu-contextuel__element { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 1.75rem; outline: none; }
.menu-contextuel__element:focus { background: var(--color-cepi-gris-clair); }
.menu-contextuel__touche { flex-shrink: 0; border-radius: var(--radius-sm); background: var(--color-cepi-gris-pale); padding: 0 0.375rem; font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 700; color: var(--color-cepi-gris-fonce); box-shadow: inset 0 0 0 1px var(--color-cepi-gris); }
.menu-contextuel__separateur { margin: 0.25rem 0; border-top: 1px solid var(--color-cepi-gris); }
.modale__description { white-space: pre-line; }

/* --- Lot 6 : fin de vente ------------------------------------------------ */
/* Le panneau prend la place du patient, du prescripteur et des profils (refonte : panneau « Caisse »). */
.poste__zone--fin { grid-column: span 2; }
.poste__zone--fin > .panneau { animation: fin-apparition 180ms ease-out; }
@keyframes fin-apparition { from { opacity: 0; transform: translateY(-0.25rem); } }
@media (prefers-reduced-motion: reduce) { .poste__zone--fin > .panneau { animation: none; } }
.poste--fin .saisie { display: none; }
.fin-panneau .panneau__corps { overflow-y: auto; }
/* Boutons et informations côte à côte ; l'un sous l'autre quand le poste est étroit. */
.fin { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; }
.fin__boutons { display: grid; min-width: 0; flex: 3 1 24rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); grid-auto-rows: minmax(2.125rem, auto); gap: 0.375rem; }
.fin__infos { flex: 2 1 15rem; }
.fin__bouton {
  display: flex; min-width: 0; align-items: center; gap: 0.5rem; border-radius: var(--radius-xl); background: var(--color-cepi-blanc-pur);
  padding: 0.25rem 0.625rem 0.25rem 0.375rem; text-align: left; font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
  color: var(--color-cepi-bleu-cyan); box-shadow: inset 0 0 0 1px var(--color-cepi-gris);
}
.fin__bouton:not([aria-disabled='true']):hover { background: var(--color-cepi-gris-pale); }
.fin__bouton--defaut { box-shadow: inset 0 0 0 2px var(--color-cepi-bleu-cyan); }
.fin__bouton:focus { outline: none; background: var(--color-cepi-bleu-cyan); color: var(--color-cepi-blanc-pur); }
.fin__bouton:focus .raccourci { background: var(--color-cepi-blanc-pur); color: var(--color-cepi-bleu-cyan); }
.fin__bouton[aria-disabled='true'] { background: transparent; color: var(--color-texte-gris); box-shadow: inset 0 0 0 1px var(--color-cepi-gris); cursor: not-allowed; }
.fin__bouton[aria-disabled='true'] .raccourci { background: var(--color-cepi-gris-moyen); }
.fin__bouton[aria-disabled='true']:focus { background: var(--color-cepi-gris); color: var(--color-cepi-gris-fonce); }
.fin__libelle { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.fin__fait { display: inline-flex; color: var(--color-texte-vert); }
.fin__bouton:focus .fin__fait { color: var(--color-cepi-blanc-pur); }
.fin__infos { display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; font-size: var(--text-sm); }
.fin__bloc { display: flex; flex-direction: column; gap: 0.25rem; }
.fin__legende { font-family: var(--font-poppins); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.fin__ligne { display: flex; align-items: center; gap: 0.5rem; }
.fin__renouvellement .champ__boite { width: 3.5rem; }
.fin__renouvellement .champ__controle { text-align: center; }
.fin__definitions { display: flex; flex-direction: column; gap: 0.125rem; }
.fin__definitions > div { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--color-cepi-gris); padding: 0.125rem 0; }
.fin__definitions dt, .fin__parts dt { color: var(--color-cepi-gris-fonce); }
.fin__definitions dd { font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.fin__alerte dd { color: var(--color-texte-rouge); }
.fin__note { font-size: var(--text-xs); color: var(--color-cepi-gris-fonce); font-style: italic; }
.fin__parts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.125rem 1rem; }
.fin__montant { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--color-cepi-gris); padding: 0.125rem 0; }
.fin__montant dd { font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.fin__montant--total dd, .fin__montant--du dd { font-family: var(--font-poppins); font-size: var(--text-base); }
.fin__repartition { flex-shrink: 0; max-height: 8rem; }
.fin__repartition tbody tr { height: 1.75rem; }
.fin__repartition td { padding: 0 0.5rem; }
.fin__indicateurs { display: flex; flex-direction: column; gap: 0.25rem; }
.fin__indicateur { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); font-weight: 600; color: var(--color-cepi-bleu-fonce); }
.fin__indicateur .iconify { width: 1rem; height: 1rem; }
.fin__indicateur--alerte { color: var(--color-texte-orange); }
.fin__indicateur--succes { color: var(--color-texte-vert); }

/* Factures enchaînées (D2), vente flash */
.onglets-factures { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.onglets-factures[hidden] { display: none; }
.onglets-factures__liste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.onglets-factures__onglet {
  display: inline-flex; align-items: baseline; gap: 0.375rem; border-radius: var(--radius-full); background: var(--color-cepi-blanc-pur);
  padding: 0.125rem 0.875rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-cepi-bleu-cyan); box-shadow: inset 0 0 0 1px var(--color-cepi-bleu-cyan);
}
.onglets-factures__onglet[aria-selected='true'] { background: var(--color-cepi-bleu-cyan); color: var(--color-cepi-blanc-pur); }
.onglets-factures__detail { font-size: var(--text-2xs); font-weight: 400; }
.onglets-factures__limite { font-size: var(--text-xs); color: var(--color-cepi-gris-fonce); }
.onglets-factures__touches { display: inline-flex; gap: 0.25rem; }
.onglets-factures__etats { display: flex; gap: 0.25rem; }

/* Prestation Sésam-Vitale, comptage des boîtes, interactions */
.modale--comptage { --largeur: 34rem; }
.comptage__champ .champ__boite { width: 8rem; }
.comptage__champ .champ__controle { text-align: center; font-family: var(--font-poppins); font-size: var(--text-xl); font-weight: 600; }
.comptage__erreur { margin-bottom: 0.75rem; text-align: center; font-family: var(--font-poppins); font-size: var(--text-xl); font-weight: 700; color: var(--color-texte-rouge); }
.comptage__details { margin-top: 0.75rem; padding-left: 1.25rem; list-style: disc; font-size: var(--text-sm); color: var(--color-texte-orange); }
/* Comptage à l'aveugle : le panier et les totaux ne se voient pas pendant la saisie. */
body.comptage-aveugle #app { visibility: hidden; }
.interactions { display: flex; flex-direction: column; gap: 0.5rem; }
.interactions__element { display: flex; flex-direction: column; gap: 0.125rem; border-radius: var(--radius-lg); background: var(--color-cepi-blanc-pur); box-shadow: inset 0 0 0 1px var(--color-cepi-jaune); padding: 0.375rem 0.75rem; font-size: var(--text-sm); }
.interactions__element--grave { border-left-color: var(--color-cepi-rouge); }
.interactions__niveau { font-size: var(--text-sm); font-weight: 700; color: var(--color-texte-orange); }
.interactions__element--grave .interactions__niveau { color: var(--color-texte-rouge); }
.interactions__produits { font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.interactions__texte { color: var(--color-cepi-gris-fonce); }

/* Aperçu imprimable */
.modale--apercu { --largeur: 52rem; }
.apercu { display: flex; flex-direction: column; gap: 1rem; }
.apercu__document { display: flex; flex-direction: column; gap: 0.75rem; border-radius: var(--radius-lg); background: var(--papier); padding: 1.25rem 1.5rem; color: var(--encre-papier); box-shadow: var(--shadow-sm); font-size: var(--text-sm); }
.apercu__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--encre-papier); padding-bottom: 0.5rem; }
.apercu__pharmacie { display: flex; flex-direction: column; font-size: var(--text-xs); }
.apercu__pharmacie span:first-child { font-weight: 700; }
.apercu__titre { font-family: var(--font-poppins); font-size: var(--text-lg); font-weight: 600; text-transform: uppercase; }
.apercu__document .definitions dd { color: var(--encre-papier); }
.apercu__table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.apercu__table th, .apercu__table td { border-bottom: 1px solid var(--trait-papier); padding: 0.25rem 0.375rem; text-align: left; }
.apercu__table th { font-weight: 700; }
.apercu__table td:not(:first-child), .apercu__table th:not(:first-child) { text-align: right; }
.apercu__totaux { display: flex; flex-direction: column; align-items: flex-end; gap: 0.125rem; }
.apercu__totaux > div { display: flex; gap: 1rem; }
.apercu__totaux dd { min-width: 6rem; text-align: right; font-weight: 700; }
.apercu__mentions { font-size: var(--text-xs); font-style: italic; }
/* Rétrocession et liste des factures : deux boutons séparés, assez d'air pour le badge de chacun. */
.accueil__secondaire { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.liste-factures__rappel, .historique__rappel { min-height: 1.5rem; font-size: var(--text-xs); }

/* --- Lot 7 : caisse ------------------------------------------------------ */
.caisse { display: grid; grid-template-columns: minmax(13rem, 1.1fr) minmax(12rem, 1fr) minmax(14rem, 1.2fr); gap: 0.75rem; align-items: start; }
.caisse__gauche, .caisse__centre, .caisse__droite { display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; }
.caisse__modes { display: flex; flex-direction: column; gap: 0.25rem; }
.caisse__mode { display: flex; align-items: center; gap: 0.25rem; }
.caisse__mode-bouton, .caisse__action {
  display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.5rem; border-radius: var(--radius-xl); background: var(--color-cepi-blanc-pur);
  padding: 0.25rem 0.625rem 0.25rem 0.375rem; text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--color-cepi-bleu-cyan);
  box-shadow: inset 0 0 0 1px var(--color-cepi-gris);
}
.caisse__mode-libelle { min-width: 0; flex: 1; }
.caisse__mode--utilise .caisse__mode-bouton { box-shadow: inset 0 0 0 2px var(--color-cepi-vert); }
.caisse__mode-bouton:focus, .caisse__action:focus { outline: none; background: var(--color-cepi-bleu-cyan); color: var(--color-cepi-blanc-pur); }
.caisse__mode-bouton:focus .raccourci, .caisse__action:focus .raccourci { background: var(--color-cepi-blanc-pur); color: var(--color-cepi-bleu-cyan); }
.caisse__mode-bouton[aria-disabled='true'] { background: transparent; color: var(--color-texte-gris); cursor: not-allowed; }
.caisse__mode-bouton[aria-disabled='true'] .raccourci { background: var(--color-cepi-gris-moyen); }
.caisse__coche { display: inline-flex; width: 1.75rem; height: 1.75rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-texte-vert); color: var(--color-cepi-blanc-pur); }
.caisse__coche:hover { background: var(--color-cepi-rouge); }
.caisse__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; }
.caisse__actions .caisse__action { font-size: var(--text-xs); }
.caisse__montant .champ__boite { height: 3rem; }
.caisse__montant .champ__controle { text-align: right; font-family: var(--font-poppins); font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.caisse__rendu { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.caisse__rendre { border-radius: var(--radius-lg); padding: 0.125rem 0.5rem; font-family: var(--font-poppins); font-size: var(--text-xl); font-weight: 600; color: var(--color-cepi-gris-fonce); }
.caisse__rendre--actif { color: var(--color-texte-rouge); animation: caisse-clignote 1s steps(2, start) infinite; }
.caisse__rendre:disabled { cursor: default; }
@keyframes caisse-clignote { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .caisse__rendre--actif, .caisse__alerte { animation: none !important; } }
.caisse__recap { display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--text-sm); }
.caisse__recap > div { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--color-cepi-gris); padding: 0.125rem 0; }
.caisse__recap dt { color: var(--color-cepi-gris-fonce); }
.caisse__recap dd { font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.caisse__du dd { font-family: var(--font-poppins); font-size: var(--text-base); }
.caisse__alertes { display: flex; flex-direction: column; gap: 0.25rem; }
.caisse__alerte { border-radius: var(--radius-md); background: var(--fond-erreur); padding: 0.125rem 0.5rem; font-size: var(--text-xs); font-weight: 700; color: var(--color-texte-rouge); animation: caisse-clignote 1.2s steps(2, start) 3; }
.caisse__ticket { display: flex; align-items: center; gap: 0.375rem; font-size: var(--text-xs); font-weight: 600; color: var(--color-cepi-bleu-fonce); }
.caisse__ticket .iconify { width: 1rem; height: 1rem; }
.caisse__ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; align-items: end; }
/* Colonne de droite : le libellé au-dessus du champ, le champ garde toute la largeur de sa cellule
   (une date de remise ou les informations du chèque ne sont plus rognées par leur libellé). */
.caisse__droite .champ__ligne { flex-direction: column; align-items: stretch; gap: 0.125rem; }
.caisse__droite .champ__libelle { padding-left: 0.5rem; font-size: var(--text-xs); color: var(--color-cepi-gris-fonce); }
.caisse__droite .champ__boite { flex: none; }
.caisse__cases { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: var(--text-sm); }
.caisse__factures { display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--text-xs); color: var(--color-cepi-gris-fonce); }
.caisse__facture { display: flex; justify-content: space-between; gap: 0.5rem; }
.caisse__facture--courante { font-weight: 700; color: var(--color-cepi-bleu-cyan); }
.caisse__credits { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.375rem; border-radius: var(--radius-xl); background: var(--color-cepi-blanc-pur); padding: 0.5rem 0.75rem; box-shadow: var(--shadow-sm); }
.caisse__credits[hidden] { display: none; }
.caisse__credits-entete { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.caisse__titre { font-family: var(--font-poppins); font-size: var(--text-sm); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.caisse__credits-liste { display: flex; flex-direction: column; gap: 0.125rem; max-height: 8rem; overflow-y: auto; }
.caisse__credit { display: flex; width: 100%; align-items: center; gap: 0.5rem; border-radius: var(--radius-md); padding: 0.125rem 0.375rem; text-align: left; font-size: var(--text-sm); color: var(--color-cepi-gris-fonce); }
.caisse__credit span:nth-child(2) { flex: 1; }
.caisse__credit[aria-checked='true'] { background: var(--fond-vert); color: var(--color-cepi-bleu-cyan); font-weight: 600; }
.caisse__credit-coche { display: inline-flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-cepi-gris-fonce); }
.caisse__credit:focus { outline: 2px solid var(--couleur-focus); }
.caisse__mention { margin-bottom: 0.5rem; font-family: var(--font-poppins); font-weight: 700; color: var(--color-texte-rouge); }
.promis__tableau { max-height: 20rem; margin-bottom: 0.75rem; }
.promis__tableau td { padding: 0.25rem 0.5rem; }
.promis__tableau .champ__boite { width: 4.5rem; }
.envoi__groupe { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.envoi__types { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.envoi__destinataire { display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr; gap: 0.5rem; align-items: center; }
.envoi__contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.envoi__case { padding-right: 2rem; }
.modale--materiel { --largeur: 42rem; }
.modale--materiel .modale__actions { flex-wrap: wrap; }
.materiel__message { white-space: pre-line; font-size: var(--text-sm); color: var(--color-cepi-gris-fonce); }
.materiel__montant { margin: 0.75rem 0; text-align: center; font-family: var(--font-poppins); font-size: var(--text-3xl, 1.875rem); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
@media (max-width: 1100px) { .caisse { grid-template-columns: 1fr 1fr; } .caisse__droite { grid-column: 1 / -1; } }

/* Session fermée (frmVide) et inactivité */
.veille { align-items: center; justify-content: safe center; overflow-y: auto; outline: none; }
.veille__contenu { display: flex; width: 100%; max-width: 40rem; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 1rem; text-align: center; }
.veille__logo { height: 3.5rem; }
.veille__titre { font-family: var(--font-poppins); font-size: var(--text-2xl); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.veille__horloge { font-size: var(--text-lg); color: var(--color-cepi-gris-fonce); text-transform: capitalize; }
.veille__encaissement { width: 100%; border-radius: var(--radius-2xl); background: var(--color-cepi-blanc-pur); padding: 0.75rem 1rem; text-align: left; box-shadow: var(--shadow-sm); }
.veille__sous-titre { margin-bottom: 0.375rem; font-family: var(--font-poppins); font-size: var(--text-base); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.veille__jour { font-size: var(--text-sm); color: var(--color-cepi-gris-fonce); }
.veille__saisie { min-height: 1.5rem; font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; letter-spacing: 0.1em; color: var(--color-cepi-bleu-fonce); }
.veille__operateurs { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; }
.veille__operateur { display: flex; width: 100%; align-items: center; gap: 0.75rem; border-radius: var(--radius-xl); background: var(--color-cepi-blanc-pur); padding: 0.5rem 0.75rem; text-align: left; box-shadow: var(--shadow-sm); color: var(--color-cepi-bleu-cyan); }
.veille__operateur:hover { background: var(--color-cepi-gris-clair); }
.veille__operateur .iconify { width: 2rem; height: 2rem; }
.veille__operateur > span { display: flex; flex-direction: column; }
.veille__qualite { font-size: var(--text-xs); color: var(--color-cepi-gris-fonce); }
.inactivite { position: fixed; left: 50%; top: 1rem; z-index: 90; display: flex; align-items: center; gap: 1rem; transform: translateX(-50%); border-radius: var(--radius-full); background: var(--color-texte-rouge); padding: 0.5rem 0.5rem 0.5rem 1.25rem; color: var(--color-cepi-blanc-pur); box-shadow: var(--shadow-md); font-weight: 600; }
.inactivite[hidden] { display: none; }
.inactivite .bouton { background: var(--color-cepi-blanc-pur); color: var(--color-texte-rouge); }

/* --- Lot 8 : aide-mémoire clavier, scénarios ------------------------------ */
/* Sections en colonnes, chacune à la hauteur de ses touches : plus de carte étirée à côté d'une plus longue. */
.aide { columns: 22rem; column-gap: 0.75rem; }
.aide__section { break-inside: avoid; margin-bottom: 0.75rem; border-radius: var(--radius-xl); background: var(--color-cepi-blanc-pur); padding: 0.5rem 0.75rem; box-shadow: var(--shadow-sm); }
.aide__section--principale { box-shadow: inset 0 0 0 2px var(--color-cepi-bleu-cyan); }
.aide__titre { margin-bottom: 0.375rem; font-family: var(--font-poppins); font-size: var(--text-sm); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.aide__liste { display: flex; flex-direction: column; gap: 0.25rem; }
.aide__entree { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 0.5rem; align-items: baseline; font-size: var(--text-xs); }
.aide__entree dt { display: flex; flex-wrap: wrap; gap: 0.125rem; }
.aide__entree dd { color: var(--color-cepi-gris-fonce); }
.scenarios-resultats { position: fixed; right: 0.75rem; bottom: 3.5rem; z-index: 45; width: 26rem; max-height: 50vh; overflow-y: auto; border-radius: var(--radius-xl); background: var(--fond-demo); padding: 0.5rem 0.75rem; box-shadow: var(--shadow-md); font-size: var(--text-xs); }
.scenarios-resultats:empty { display: none; }
.scenarios-resultats__titre { font-family: var(--font-poppins); font-size: var(--text-sm); font-weight: 600; color: var(--color-cepi-bleu-cyan); }
.scenarios-resultats__bilan { margin: 0.25rem 0; font-weight: 700; }
.scenarios-resultats .ok { color: var(--ton-succes); }
.scenarios-resultats .ko { color: var(--ton-danger); }
.scenarios-resultats__signe { display: inline-block; width: 0.875rem; height: 0.875rem; margin-right: 0.25rem; vertical-align: -0.125em; }
.scenarios-resultats pre { white-space: pre-wrap; font-weight: 400; }
/* Liste des factures (lot 9) : statut et actions par document */
.liste-factures__actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.375rem; }
.liste-factures__statut { font-size: var(--text-xs); font-weight: 400; font-style: italic; color: var(--color-cepi-gris-fonce); }
/* Rejeu d'un scénario (index.html?scenario=ID) : bandeau de l'action annoncée */
.scenario-bandeau { position: fixed; inset: 0.5rem auto auto 5rem; z-index: 60; display: flex; gap: 0.75rem; align-items: baseline; max-width: calc(50vw - 6rem); margin: 0; overflow: hidden; border: 0; border-radius: var(--radius-xl); background: var(--color-cepi-gris-fonce); padding: 0.5rem 1rem 0.625rem; box-shadow: var(--shadow-md); font-size: var(--text-sm); color: var(--color-cepi-blanc-pur); }
.scenario-bandeau__action { font-family: var(--font-mono); font-weight: 600; color: var(--bandeau-action); }
.scenario-bandeau__aide { font-size: var(--text-xs); color: var(--color-cepi-gris-clair); white-space: nowrap; }
/* Pas à pas : l'invite à cliquer, à côté de l'action qui attend. */
.scenario-bandeau--clic { cursor: pointer; }
.scenario-bandeau__suivante { border-radius: var(--radius-full); background: var(--bandeau-action); padding: 0 0.625rem; font-size: var(--text-xs); font-weight: 600; color: var(--color-cepi-gris-fonce); white-space: nowrap; }
.scenario-bandeau__suivante[hidden] { display: none; }
/* Temps avant que l'action annoncée parte. */
.scenario-bandeau__temps { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; transform-origin: left; background: var(--bandeau-action); animation: scenario-temps var(--duree) linear forwards; }
@keyframes scenario-temps { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Élément de l'action annoncée. */
.scenario-cible { outline: 3px solid var(--color-cepi-orange) !important; outline-offset: 2px; }
.aide__touche { border-radius: var(--radius-md); background: var(--color-cepi-gris-fonce); padding: 0 0.25rem; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600; color: var(--color-cepi-blanc-pur); white-space: nowrap; }

@media print {
  #app, .demo, .toasts, .infobulle { display: none !important; }
  body { overflow: visible; background: var(--papier); }
  dialog.modale.modale--apercu { position: static; display: block; width: auto; max-height: none; border: 0; box-shadow: none; background: var(--papier); }
  dialog.modale--apercu::backdrop { background: transparent; }
  dialog.modale--apercu .modale__entete, dialog.modale--apercu .modale__actions { display: none; }
  dialog.modale--apercu .modale__corps { overflow: visible; padding: 0; }
  .apercu__document { box-shadow: none; padding: 0; break-after: page; }
}

/* Pression des commandes de l'écran : un pixel, sauf en mouvement réduit. */
.fin__bouton:not([aria-disabled='true']):active, .accueil__action:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .fin__bouton:active, .accueil__action:active { transform: none; }
}