/* Hallmark · component: fenêtres (dialog, tiroir, palette, avis, note du patient, fil des étapes) · genre: modern-minimal (inferred) · shape: app screen · theme: brand (CEPI, kept: bleu-vert, Poppins, Roboto) · states: 8 · contrast: pass · redesign: full · motion: severe · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, the overlays follow the project's own system on purpose; cut the icon tiles, the side stripes, the danger glow, the costume terminal, the numbered step circles and the countdown bars */
/* Hallmark · finish-review: subagent · fix · 8 findings · 7 resolved 1 partial (7: fields sized to their content, not paired on one row) · gap: none */

/*
 * Fenêtres du poste (docs/design-comptoir.md) : une forme par intention, une couleur par ton.
 *   carte     fenêtre courte au centre (défaut) ;
 *   question  carte compacte en haut de l'écran, près de la saisie ; le ton colore un signe et le bouton principal ;
 *   liste     palette de choix numérotés ;
 *   tiroir    panneau de travail qui glisse de la droite, la vente reste visible à gauche ;
 *   materiel  TPE, monnayeur : le montant en grand, les réponses du terminal ;
 *   apercu    la feuille imprimée sur fond sombre.
 * Le <dialog> fermé reste affiché le temps de --dur-sortie (transition discrète de display et overlay).
 */

/* --- Socle ---------------------------------------------------------------- */
/* Ton par défaut, de spécificité faible : les classes .modale--ton-* le remplacent. */
.modale { --ton: var(--ton-question); --couleur-focus: var(--color-cepi-bleu-cyan); }
dialog.modale {
  position: fixed; inset: 0; margin: auto; display: none; flex-direction: column; overflow: hidden;
  width: min(var(--largeur, 32rem), calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); height: fit-content;
  border: 0; border-radius: var(--radius-xl); background: var(--surface); padding: 0; color: var(--encre); box-shadow: var(--ombre-fenetre);
  opacity: 0; transform: scale(0.97);
  transition-property: opacity, transform, display, overlay;
  transition-duration: var(--dur-sortie); transition-timing-function: var(--ease-in); transition-behavior: allow-discrete;
}
dialog.modale[open] { display: flex; opacity: 1; transform: none; transition-duration: var(--dur-long); transition-timing-function: var(--ease-out); }
@starting-style { dialog.modale[open] { opacity: 0; transform: scale(0.97); } }
dialog.modale::backdrop {
  background: var(--voile); opacity: 0;
  transition: opacity var(--dur-sortie) var(--ease-in), display var(--dur-sortie) allow-discrete, overlay var(--dur-sortie) allow-discrete;
}
dialog.modale[open]::backdrop { opacity: 1; transition-duration: var(--dur-long); transition-timing-function: var(--ease-out); }
@starting-style { dialog.modale[open]::backdrop { opacity: 0; } }
:where(.modale--large) { --largeur: 48rem; }

.modale__entete { display: flex; flex-shrink: 0; align-items: flex-start; gap: 0.625rem; padding: 1.25rem 0.75rem 0.25rem 1.5rem; }
.modale__titres { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.125rem; }
.modale__titre { min-width: 0; overflow-wrap: break-word; text-wrap: balance; font-family: var(--font-poppins); font-size: var(--text-lg); line-height: var(--text-lg--lh); font-weight: 600; color: var(--encre); }
.modale__sous-titre { font-size: var(--text-sm); color: var(--encre-douce); }
.modale__fermer {
  display: inline-flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center;
  margin-top: -0.375rem; border-radius: var(--radius-full); font-size: var(--text-xl); color: var(--encre-douce);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.modale__fermer:hover { background: var(--surface-calme); color: var(--encre); }
.modale__fermer:active { transform: translateY(1px); }
.modale__fermer:focus-visible { outline: 2px solid var(--couleur-focus); outline-offset: 2px; }
.modale__corps { min-height: 0; flex: 1; overflow-y: auto; padding: 0.75rem 1.5rem 1.5rem; }
.modale__description { max-width: 65ch; margin-bottom: 1rem; font-size: var(--text-sm); line-height: 1.5; color: var(--encre-douce); white-space: pre-line; text-wrap: pretty; }
.modale__message { max-width: 60ch; font-size: var(--text-base); line-height: 1.55; color: var(--encre); white-space: pre-line; text-wrap: pretty; }
.modale__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }
.modale__actions .relatif { position: relative; display: inline-flex; }
/* Une rangée, une hauteur : un petit bouton à côté des grands garde leur hauteur, et son badge de touche tombe sous le libellé. */
.modale__actions .bouton { min-height: 2.75rem; white-space: nowrap; }
.modale__actions-annexes, .modale__actions-principales { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.modale__actions-annexes { margin-right: auto; }
.modale__actions-principales { margin-left: auto; }
.modale__actions .bouton:active { transform: translateY(1px); }

/* Signe du ton : une icône dans la ligne du titre, sans pastille. */
.modale__signe { display: inline-flex; flex-shrink: 0; margin-top: 0.125rem; font-size: 1.5rem; color: var(--ton); }
.modale--ton-attention { --ton: var(--ton-attention); }
.modale--ton-danger { --ton: var(--ton-danger); }
.modale--ton-info { --ton: var(--ton-info); }
.modale--ton-succes { --ton: var(--ton-succes); }
/* Attention et danger : le bouton principal porte le ton, le secondaire son contour. */
.modale--ton-attention .modale__actions .bouton:not(.bouton--secondaire),
.modale--ton-danger .modale__actions .bouton:not(.bouton--secondaire) { background: var(--ton); color: var(--encre-inverse); }
.modale--ton-attention .modale__actions .bouton--secondaire,
.modale--ton-danger .modale__actions .bouton--secondaire { color: var(--ton); box-shadow: inset 0 0 0 1px var(--ton); }

/* --- Question : carte compacte en haut, le regard reste près de la saisie --- */
dialog.modale--question { width: min(34rem, calc(100% - 2rem)); margin: 12dvh auto auto; max-height: calc(88dvh - 1rem); }
/* Le message s'aligne sur le titre quand un signe le précède. */
.modale--question:has(.modale__signe) .modale__corps { padding-left: calc(1.5rem + 1.5rem + 0.625rem); }
.modale--question .champ { margin-top: 1rem; }
.modale--question .modale__actions .bouton { min-width: 7rem; }

/* --- Liste : palette numérotée --------------------------------------------- */
dialog.modale--liste { width: min(40rem, calc(100% - 2rem)); margin: 10dvh auto auto; }
.modale--liste .modale__entete { padding-bottom: 0.75rem; border-bottom: 1px solid var(--trait); }
.modale--liste .modale__corps { padding: 0.5rem; }
.modale--liste .modale__description { padding: 0.5rem 1rem 0; }
.choix-liste { display: flex; flex-direction: column; }
.choix {
  display: flex; width: 100%; min-height: 2.75rem; align-items: center; gap: 0.875rem; border-radius: var(--radius-lg);
  background: transparent; padding: 0.5rem 1rem; text-align: left;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.choix:hover { background: var(--surface-calme); }
.choix:focus { background: var(--selection); }
.choix:focus-visible { outline: 2px solid var(--couleur-focus); outline-offset: -2px; }
.choix:active { transform: translateY(1px); }
.choix .raccourci { min-width: 1.5rem; }
.choix__textes { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.125rem; }
.choix__libelle { font-weight: 600; color: var(--encre); }
.choix__detail { font-size: var(--text-sm); color: var(--encre-douce); }

/* --- Tiroir : panneau de travail qui glisse de la droite ------------------- */
dialog.modale--tiroir {
  inset: 0.75rem 0.75rem 0.75rem auto; margin: 0; height: auto; max-height: none;
  width: min(var(--largeur, 40rem), calc(100% - 8rem));
  opacity: 1; transform: translateX(calc(100% + 1.5rem));
}
dialog.modale--tiroir[open] { transform: none; }
@starting-style { dialog.modale--tiroir[open] { transform: translateX(calc(100% + 1.5rem)); } }
dialog.modale--tiroir::backdrop { background: var(--voile-leger); }
.modale--tiroir .modale__entete { padding: 1.25rem 0.75rem 1rem 1.5rem; border-bottom: 1px solid var(--trait); }
.modale--tiroir .modale__corps { display: flex; flex-direction: column; padding: 1.25rem 1.5rem 0; }
.modale--tiroir .modale__corps > * { flex-shrink: 0; }
.modale--tiroir .modale__corps > .modale__actions {
  position: sticky; bottom: 0; z-index: 2; margin: auto -1.5rem 0; padding: 1rem 1.5rem; background: var(--surface); border-top: 1px solid var(--trait);
}
.modale--tiroir .modale__corps > :last-child:not(.modale__actions) { margin-bottom: 1.5rem; }
/* Formulaires : les champs directement sur le tiroir, sans carte de plus. */
.modale--tiroir .formulaire { gap: 0.875rem 1rem; }

/* Tableaux des fenêtres : têtes en casse normale, filets horizontaux seulement, sans carte. */
dialog.modale .tableau { border-radius: 0; background: transparent; box-shadow: none; }
dialog.modale .tableau thead tr, dialog.modale .tableau th { background: var(--surface); color: var(--encre-douce); }
dialog.modale .tableau th { height: 2.5rem; border-left: 0; border-bottom: 1px solid var(--trait); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
dialog.modale .tableau tbody { font-weight: 400; color: var(--encre); }
dialog.modale .tableau tbody tr, dialog.modale .tableau tbody tr:nth-child(even) { background: transparent; border-bottom: 1px solid var(--trait); }
dialog.modale .tableau tbody tr { transition: background-color var(--dur-micro) var(--ease-out); }
dialog.modale .tableau tbody tr:focus-within, dialog.modale .tableau tbody tr[aria-selected='true'] { background: var(--selection); }

/* --- Matériel : le montant en grand, les réponses du terminal ---------------- */
.modale--materiel .materiel__message { font-size: var(--text-sm); color: var(--encre-douce); white-space: pre-line; }
.modale--materiel .materiel__montant {
  margin: 1rem 0 0.25rem; text-align: left; font-family: var(--font-poppins); font-size: 2.5rem; line-height: 1.1; font-weight: 600;
  color: var(--encre); font-variant-numeric: tabular-nums;
}
.modale--materiel .modale__actions { justify-content: flex-start; }

/* --- Aperçu : la feuille imprimée sur fond sombre ------------------------- */
dialog.modale--apercu { background: transparent; box-shadow: none; color: var(--encre-inverse); max-height: calc(100dvh - 1.5rem); }
dialog.modale--apercu::backdrop { background: var(--voile-apercu); }
.modale--apercu { --couleur-focus: var(--encre-inverse); }
.modale--apercu .modale__titre { color: var(--encre-inverse); }
.modale--apercu .modale__fermer { color: var(--encre-inverse); }
.modale--apercu .modale__fermer:hover { background: var(--voile-leger); color: var(--encre-inverse); }
.modale--apercu .apercu__document { border-radius: var(--radius-sm); background: var(--papier); box-shadow: var(--ombre-feuille); }
.modale--apercu .modale__actions { position: sticky; bottom: 0; }

/* --- Note du patient : panneau non bloquant, à droite (Alt+N) -------------- */
.note-patient {
  /* Sous la zone des avis (en haut à droite), sur la colonne des tuiles. */
  position: fixed; top: 12rem; right: 0.75rem; z-index: 45; display: flex; width: min(22rem, calc(100% - 2rem));
  max-height: calc(100dvh - 18rem); flex-direction: column; gap: 0.75rem; overflow-y: auto;
  border-radius: var(--radius-xl); background: var(--surface); padding: 1rem 1.125rem 1.125rem;
  color: var(--encre); box-shadow: var(--ombre-fenetre);
  transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out);
}
@starting-style { .note-patient { transform: translateX(calc(100% + 1rem)); opacity: 0; } }
/* Sortie : le panneau glisse hors de l'écran, puis le script le retire. */
.note-patient--sortie { transform: translateX(calc(100% + 1rem)); transition-duration: var(--dur-sortie); transition-timing-function: var(--ease-in); }
.note-patient:focus-within { outline: 2px solid var(--couleur-focus); outline-offset: 2px; }
.note-patient__entete { display: flex; align-items: flex-start; gap: 0.625rem; }
.note-patient__icone { margin-top: 0.125rem; width: 1.25rem; height: 1.25rem; color: var(--ton-note); }
.note-patient__titres { min-width: 0; flex: 1; }
.note-patient__titre { font-family: var(--font-poppins); font-size: var(--text-base); font-weight: 600; color: var(--encre); }
.note-patient__patient { font-size: var(--text-sm); color: var(--encre-douce); }
.note-patient__note { font-size: var(--text-lg); line-height: 1.45; font-weight: 500; color: var(--encre); text-wrap: pretty; }
.note-patient__section { border-top: 1px solid var(--trait); padding-top: 0.625rem; }
.note-patient__section h3 { margin-bottom: 0.25rem; font-size: var(--text-sm); font-weight: 600; color: var(--encre-douce); }
.note-patient__section li { margin-left: 1.1rem; list-style: disc; font-size: var(--text-sm); line-height: var(--text-sm--lh); }
.note-patient__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }
.note-patient__actions .bouton { gap: 0.5rem; white-space: nowrap; }
.note-patient__actions .bouton .raccourci { box-shadow: none; }
.note-patient__actions .bouton:active { transform: translateY(1px); }

/* --- Notifications et avis : un signe du ton, le titre, sans décor ---------- */
.toast { align-items: flex-start; gap: 0.75rem; border-left: 0; border-radius: var(--radius-xl); background: var(--surface); padding: 0.875rem 0.5rem 0.875rem 1rem; box-shadow: var(--ombre-avis); }
.toast__signe { display: inline-flex; flex-shrink: 0; margin-top: 0.0625rem; font-size: 1.25rem; color: var(--ton-info); }
.toast--attention .toast__signe { color: var(--ton-attention); }
.toast--alerte .toast__signe { color: var(--ton-danger); }
.toast--succes .toast__signe { color: var(--ton-succes); }
.toast__titre, .toast--succes .toast__titre { color: var(--encre); }
.toast--attention .toast__titre { color: var(--ton-attention); }
.toast--alerte .toast__titre { color: var(--ton-danger); }
.toast__description { color: var(--encre-douce); white-space: pre-line; }
.toast__fermer:active { transform: translateY(1px); }

/* --- Fin de vente : l'écran en cours et son document, à gauche (le fil des étapes est dans le bandeau) --- */
.fin__entete { display: flex; width: 100%; align-items: center; padding: 0 0.5rem; }
.fin__titre { text-align: left; font-family: var(--font-poppins); font-size: var(--text-lg); font-weight: 600; color: var(--color-cepi-blanc-pur); }
.fin__document { font-size: var(--text-sm); font-weight: 400; }

/* --- Mouvement réduit : un fondu court, l'état change toujours ------------- */
@media (prefers-reduced-motion: reduce) {
  dialog.modale, dialog.modale--tiroir, dialog.modale[open], dialog.modale--tiroir[open], .note-patient, .note-patient--sortie {
    transform: none; transition-property: opacity, display, overlay; transition-duration: 150ms;
  }
  @starting-style { dialog.modale[open], dialog.modale--tiroir[open], .note-patient { transform: none; } }
  .modale__actions .bouton:active, .choix:active, .modale__fermer:active, .toast__fermer:active, .note-patient__actions .bouton:active { transform: none; }
}

/* --- Prestation Sésam-Vitale : AMO, AMC et part de l'assuré en colonnes ----- */
.fse__entetes, .fse__option { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) repeat(3, 6rem); align-items: center; column-gap: 0.75rem; }
.fse__entetes { padding: 0 2rem 0.25rem 0.75rem; font-size: var(--text-sm); font-weight: 600; color: var(--encre-douce); }
.fse__entetes span:nth-child(n+3), .fse__montant { text-align: right; }
.fse__montant { font-size: var(--text-sm); font-weight: 400; color: var(--encre); font-variant-numeric: tabular-nums; }
/* Méta d'un choix et lots en stock : des valeurs séparées par l'espace, pas par des points. */
.choix__meta, .lots__lot { display: inline-flex; flex-wrap: wrap; column-gap: 0.75rem; }
/* TPE : la réponse attendue sous le montant ; Refusé porte le ton danger. */
.modale--materiel .materiel__invite { margin-top: 1rem; font-size: var(--text-sm); font-weight: 600; color: var(--encre-douce); }
.modale--materiel .materiel__invite + .modale__actions { margin-top: 0.5rem; }
.modale--tpe .modale__actions .bouton[data-valeur='refuse'] { color: var(--ton-danger); box-shadow: inset 0 0 0 1px var(--ton-danger); }

/* Liste des factures : les actions d'une ligne à la même taille, côte à côte ; l'avoir porte le ton danger. */
dialog.modale .liste-factures__actions { flex-wrap: nowrap; }
dialog.modale .liste-factures__actions .bouton { min-height: 2rem; font-size: var(--text-sm); white-space: nowrap; }
dialog.modale .liste-factures__annuler { color: var(--ton-danger); box-shadow: inset 0 0 0 1px var(--ton-danger); }

/* Saisie des lots : retirer une ligne est une croix discrète, en danger au survol et au focus. */
.modale--lots .bouton-icone { background: transparent; color: var(--encre-douce); transition: color var(--dur-micro) var(--ease-out); }
.modale--lots .bouton-icone:hover, .modale--lots .bouton-icone:focus-visible { color: var(--ton-danger); }
.modale--lots .bouton-icone:focus-visible { outline: 2px solid var(--couleur-focus); outline-offset: 2px; }
.modale--lots .bouton-icone:active { transform: translateY(1px); }

/* Légende des touches (palette) : groupes séparés par l'espace ; numéros des génériques en colonne. */
.modale__aide-clavier { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.5rem 0 0; border-top: 1px solid var(--trait); padding: 0.75rem 1rem 0.25rem; font-size: var(--text-sm); color: var(--encre-douce); }
.modale__aide-groupe { display: inline-flex; align-items: center; gap: 0.25rem; }
.modale__aide-groupe .raccourci:last-of-type { margin-right: 0.25rem; }
.generiques__nom .raccourci { margin-right: 0.625rem; vertical-align: 0.1em; }

/* Formulaires : chaque champ à la largeur de ce qu'il reçoit ; un champ accolé partage la ligne du précédent. */
.formulaire__champ--m > .champ__ligne > .champ__boite, .formulaire__champ--m > .champ__ligne > .formulaire__duo > .champ__boite { max-width: 16rem; }
.formulaire__champ--s > .champ__ligne > .champ__boite, .formulaire__champ--s > .champ__ligne > .formulaire__duo > .champ__boite { max-width: 10rem; }
.formulaire__champ--xs > .champ__ligne > .champ__boite, .formulaire__champ--xs > .champ__ligne > .formulaire__duo > .champ__boite { max-width: 5rem; }
.champ--grille .formulaire__duo { grid-column: -2 / -1; display: flex; min-width: 0; align-items: center; gap: 1.25rem; }
.formulaire__duo > .champ__boite { flex: 1 1 auto; min-width: 0; }
.formulaire__duo > .champ { flex: 0 1 auto; min-width: 0; }
.formulaire__duo > .champ:not([class*='formulaire__champ--']) { flex: 1 1 auto; }
.formulaire__duo > .champ > .champ__ligne { display: flex; align-items: center; gap: 0.625rem; }
.formulaire__duo > .champ > .champ__ligne > .champ__boite { flex: 1 1 auto; min-width: 0; }
/* Refus d'un champ accolé (clé du NIR, ville, qualité) : le message passe sous la paire, d'un seul tenant, sans élargir
   le champ ni décaler les libellés ; le libellé de la ligne reste en face des champs. Comme .bloc__rang (ecrans.css). */
.formulaire__duo:has(> .champ--erreur) { flex-wrap: wrap; row-gap: 0.125rem; }
.formulaire__duo > .champ--erreur { display: contents; }
.formulaire__duo > .champ--erreur > .champ__ligne { flex: inherit; min-width: inherit; }
.formulaire__duo > .champ--erreur > .champ__erreur { order: 1; flex-basis: 100%; }
.champ--grille:has(> .champ__ligne > .formulaire__duo > .champ--erreur) { align-items: start; }
.champ--grille:has(> .champ__ligne > .formulaire__duo > .champ--erreur) > .champ__ligne > .champ__libelle { padding-top: 0.25rem; }