/* ==========================================================================
   views.css — Design system REGISTRE — styles spécifiques aux modules métier
   Dépend de : tokens.css, base.css, layout.css, components.css
   ========================================================================== */

/* ---- Matrice allergènes INCO (.matrix) ------------------------------------ */
.matrix {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--sheet);
}
.matrix table {
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.matrix thead th {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 140px;
  width: 36px;
  min-width: 36px;
  padding: var(--s-3) var(--s-2);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-2);
  border-right: 1px solid var(--rule);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  white-space: nowrap;
  vertical-align: bottom;
}
.matrix thead th:first-child {
  writing-mode: horizontal-tb;
  text-align: left;
  padding-inline: var(--s-5);
  min-width: 160px;
}
.matrix tbody td {
  width: 36px;
  height: 36px;
  min-width: 36px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.matrix tbody td:first-child {
  text-align: left;
  padding-inline: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink);
  white-space: nowrap;
}
.matrix tbody tr:hover td { background: var(--paper-2); }
.matrix__on {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--r-1);
  background: var(--ok);
}
.matrix__off {
  display: inline-block;
  width: 10px;
  height: 1px;
  background: var(--ink-3);
  vertical-align: middle;
}

/* ---- Jauge TPM huile (.gauge) --------------------------------------------- */
.gauge {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.gauge__track {
  position: relative;
  height: 8px;
  border-radius: var(--r-1);
  background: var(--paper-2);
  overflow: visible;
}
.gauge__fill {
  height: 100%;
  width: 100%;
  border-radius: var(--r-1);
  background: var(--accent);
  transform-origin: left center;
  /* Progression par `transform: scaleX()` — jamais par l'animation de largeur (layout thrash) :
     les vues posent soit `style="width:42%"`, soit `style="--p:0.42"`, les deux rendus sont bons. */
  transform: scaleX(var(--p, 1));
  transition: transform var(--d-2) var(--e-out);
  max-width: 100%;
}
.gauge__cursor {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  background: var(--ink);
  border-radius: var(--r-1);
  transform: translateX(-50%);
}
.gauge__mark {
  position: absolute;
  top: -6px;
  width: 1px;
  height: 20px;
  background: var(--danger);
  transform: translateX(-50%);
}
.gauge__mark::after {
  content: attr(data-label);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--t-label);
  color: var(--danger);
  white-space: nowrap;
}
.gauge__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.gauge__value {
  font-family: var(--ff-mono);
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---- Chronomètre refroidissement/décongélation (.chrono) ------------------ */
.chrono {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.chrono__value {
  font-family: var(--ff-mono);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.chrono--late .chrono__value { color: var(--danger); }
.chrono__bar {
  width: 100%;
  height: 4px;
  border-radius: var(--r-1);
  background: var(--paper-2);
  overflow: hidden;
}
.chrono__progress {
  height: 100%;
  width: 100%;
  border-radius: var(--r-1);
  background: var(--accent);
  transform-origin: left center;
  /* Idem `.gauge__fill` : progression par `transform: scaleX(var(--p))`, jamais par l'animation de largeur. */
  transform: scaleX(var(--p, 1));
  transition: transform var(--d-2) var(--e-out);
}
.chrono--late .chrono__progress { background: var(--danger); }
.chrono__label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) {
  .chrono__progress { transition-duration: 1ms; }
  .gauge__fill { transition-duration: 1ms; }
}

/* ---- Affichage température (.temp) ---------------------------------------- */
.temp {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
}
.temp--cold { color: var(--accent); }
.temp--warm { color: var(--warn); }
.temp--hot  { color: var(--danger); }
.temp--ok   { color: var(--ok); }

/* ---- Checklist (.checklist) ----------------------------------------------- */
.checklist { display: flex; flex-direction: column; }
.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 48px;
  padding-inline: var(--s-5);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background var(--d-1) var(--e-out);
}
.checklist__item:last-child { border-bottom: none; }
.checklist__item:hover { background: var(--paper-2); }
.checklist__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-1);
  background: var(--sheet);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
  transition: background var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out);
}
.checklist__item.is-done .checklist__check {
  background: var(--accent);
  border-color: var(--accent);
}
.checklist__label {
  flex: 1;
  font-size: var(--t-sm);
  color: var(--ink);
}
.checklist__item.is-done .checklist__label {
  text-decoration: line-through;
  color: var(--ink-3);
}
.checklist__due {
  flex-shrink: 0;
  font-family: var(--ff-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.checklist__item.is-done .checklist__due { color: var(--ink-3); }

/* ---- GED documents (.ged, .zone-upload) ----------------------------------- */
.ged { display: flex; flex-direction: column; }
.ged__item {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  transition: background var(--d-1) var(--e-out);
}
.ged__item:last-child { border-bottom: none; }
.ged__item:hover { background: var(--paper-2); }
.ged__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ink-3);
}
.ged__name {
  flex: 1;
  font-size: var(--t-sm);
  color: var(--ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ged__meta {
  flex-shrink: 0;
  font-family: var(--ff-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}
.ged__actions {
  display: flex;
  gap: var(--s-3);
  opacity: 0;
  transition: opacity var(--d-1) var(--e-out);
}
.ged__item:hover .ged__actions,
.ged__item:focus-within .ged__actions { opacity: 1; }

.zone-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-9) var(--s-8);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-2);
  background: var(--sheet);
  color: var(--ink-3);
  font-size: var(--t-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--d-1) var(--e-out), background var(--d-1) var(--e-out);
}
.zone-upload:hover,
.zone-upload.is-over {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}
.zone-upload:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Bandeau inspection (.inspection-banner) ------------------------------ */
.inspection-banner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: 40px;
  padding-inline: var(--s-6);
  border-bottom: 2px solid var(--warn);
  background: var(--sheet);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--warn);
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
}

/* ---- Fiche imprimable (.receipt) ------------------------------------------ */
.receipt {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: var(--s-8);
  font-size: var(--t-sm);
}
.receipt__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: var(--s-6);
}
.receipt__establishment {
  font-size: var(--t-h2);
  font-weight: 600;
  color: var(--ink);
}
.receipt__meta {
  font-family: var(--ff-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.receipt__stamp { flex-shrink: 0; }

/* ---- Bloc signature (.sign) ----------------------------------------------- */
.sign {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--sheet);
}
.sign__line {
  height: 48px;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: var(--s-4);
}
.sign__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}
.sign__name {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}
.sign__timestamp {
  font-family: var(--ff-mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* ---- Matrice de permissions (.roles) -------------------------------------- */
.roles {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.roles th {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-2);
  padding: var(--s-3) var(--s-4);
  text-align: left;
  white-space: nowrap;
}
.roles td {
  height: 32px;
  padding-inline: var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.roles td:first-child { color: var(--ink); font-weight: 500; }
.roles td:not(:first-child) { text-align: center; }
.roles tbody tr:hover td { background: var(--paper-2); }

/* ---- Traçabilité Étiquettes & Produits (Mobile First) ---------------------- */
.trace-action-card {
  background: var(--sheet);
  border: 2px dashed var(--accent);
  border-radius: var(--r-3);
  padding: var(--s-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  transition: background var(--d-1) var(--e-out), border-color var(--d-1) var(--e-out);
}
.trace-action-card:hover {
  background: var(--accent-wash);
}
.trace-action-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-2);
  background: var(--accent-wash);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trace-action-card__title {
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink);
}
.trace-action-card__sub {
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 320px;
}

.trace-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.trace-card {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  box-shadow: var(--sh-1);
}

.trace-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.trace-card__title {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.trace-card__date {
  font-family: var(--ff-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  white-space: nowrap;
}

.trace-card__destinations {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--paper-2);
  border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--accent);
}

.trace-dest-item {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-sm);
}

.trace-dest-item__label {
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  min-width: 60px;
  flex-shrink: 0;
}

.trace-dest-item__value {
  color: var(--ink);
  font-weight: 500;
  word-break: break-word;
}

.trace-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.trace-card__photo-thumb {
  width: 54px;
  height: 54px;
  border-radius: var(--r-1);
  object-fit: cover;
  border: 1px solid var(--rule);
  cursor: pointer;
  background: var(--paper-2);
  flex-shrink: 0;
}

.trace-card__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* ---- Portail de connexion (mode serveur) ---------------------------------- */
/* Écran plein cadre affiché AVANT la coquille : il occupe tout l'écran et se
   retire du DOM (masquerConnexion) dès que la session est établie. */
.portail {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-8);
  background: var(--paper);
  overflow-y: auto;
}

.portail__carte {
  width: 100%;
  max-width: 420px;
  padding: var(--s-9) var(--s-8);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
}

.portail__entete {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}

.portail__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-3);
  background: var(--accent-wash);
  color: var(--accent);
}

.portail__entete-texte { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }

.portail__titre {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: var(--t-h1);
  color: var(--ink);
  letter-spacing: -.01em;
}

.portail__sous-titre { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }

.portail__intro { margin: 0 0 var(--s-7); font-size: var(--t-body); color: var(--ink-2); }

.portail__forme { display: flex; flex-direction: column; gap: var(--s-6); margin-bottom: var(--s-6); }
.portail__forme[hidden] { display: none; }

.portail__erreur { margin: 0 0 var(--s-5); font-size: var(--t-sm); color: var(--danger); }
.portail__erreur:empty { margin: 0; }

.portail__pied {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}

.portail__lien {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--accent);
  cursor: pointer;
}

.portail__lien:hover { color: var(--accent-2); text-decoration: underline; }

.portail__note { margin: 0; font-size: var(--t-label); color: var(--ink-3); }

.portail__actions-secondaires {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: calc(-1 * var(--s-2));
}

.portail__succes {
  margin: 0 0 var(--s-6);
  padding: var(--s-4);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  color: var(--ink);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .portail { align-items: flex-start; padding: var(--s-5); }
  .portail__carte { margin-top: var(--s-8); padding: var(--s-8) var(--s-6); }
}

/* ---- Bloc « session serveur » (vue Compte, mode serveur uniquement) -------- */
.session-serveur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.session-serveur__texte { min-width: 0; }
.session-serveur__nom { margin: 0; font-size: var(--t-body); color: var(--ink); }
.session-serveur__meta {
  margin: var(--s-1) 0 0;
  font-family: var(--ff-mono);
  font-size: var(--t-sm);
  color: var(--ink-3);
  word-break: break-all;
}

/* ---- @media print --------------------------------------------------------- */
@media print {
  .portail,
  .inspection-banner,
  .zone-upload,
  .ged__actions,
  .chrono__bar { display: none !important; }

  .receipt {
    border: 1px solid var(--rule);
    box-shadow: none;
    break-inside: avoid;
  }
  .matrix { overflow: visible; }
  .matrix thead th { writing-mode: vertical-rl; }
  .sign { break-inside: avoid; }
  .roles { break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Écran Réglages — socle V5
   Bloc purement structurel : aucune couleur, ombre ni rayon en dur.
   Les surfaces viennent des composants du design system (.section, .field,
   .switch, .sheet, .btn, .callout, .mark), eux-mêmes peints par tokens.css.
   L'application bascule par la classe `dark` de Tailwind, le design system
   par [data-theme] : js/patisserie/settings.js pose data-theme="nuit" sur
   #settings-root quand le thème sombre est actif.
   ══════════════════════════════════════════════════════════════════════════ */

.settings {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ---- En-tête ------------------------------------------------------------- */
.settings__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.settings__head-text { display: flex; flex-direction: column; gap: var(--s-1); }
.settings__kicker {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.settings__title {
  margin: 0;
  font-size: var(--t-h1);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.settings__sub { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.settings__head-mark { padding-top: var(--s-2); }

/* ---- Onglets ------------------------------------------------------------- */
.settings__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.settings__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--ctl);
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}
.settings__tab:hover { background: var(--paper-2); color: var(--ink); }
.settings__tab.is-active {
  background: var(--accent-wash);
  border-color: var(--rule-2);
  color: var(--accent);
}
.settings__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.settings__panels { display: block; }
.settings__panel { display: block; }
.settings__lead {
  max-width: 76ch;
  margin: 0 0 var(--s-6);
  font-size: var(--t-body);
  color: var(--ink-2);
}

/* ---- Formulaires --------------------------------------------------------- */
.settings__form { display: flex; flex-direction: column; gap: var(--s-6); }
.settings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-6);
}
.settings__foot { display: flex; justify-content: flex-end; gap: var(--s-4); }

/* ---- Lignes de réglage --------------------------------------------------- */
.settings__rows { display: flex; flex-direction: column; }
.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}
.settings__row:last-child { border-bottom: 0; }
.settings__row-text { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.settings__row-label { font-size: var(--t-body); font-weight: 600; color: var(--ink); }
.settings__row-hint { font-size: var(--t-sm); color: var(--ink-3); max-width: 68ch; }
.settings__row-control {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  flex: 0 0 auto;
}

/* ---- Identité du compte -------------------------------------------------- */
.settings__identity { display: flex; align-items: center; gap: var(--s-5); }
.settings__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-11);
  height: var(--s-11);
  border-radius: var(--r-3);
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: var(--t-h2);
  font-weight: 700;
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
  .settings__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s-2); }
  .settings__tab { white-space: nowrap; }
  .settings__row { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .settings__row-control { width: 100%; }
  .settings__foot { justify-content: stretch; }
}

/* Anti-flash : masque l'identité tant que l'état réel n'est pas chargé (voir app.js) */
html[data-boot="pending"] #header-establishment-name,
html[data-boot="pending"] #current-op-initials,
html[data-boot="pending"] #current-op-name,
html[data-boot="pending"] #current-op-role {
  visibility: hidden;
}

/* Audit (modal Mode Inspection) — piloté par data-audit, voir renderAudit() */
#audit-trace[data-audit="ko"],
#audit-froid[data-audit="ko"],
#audit-temoins[data-audit="ko"] {
  background: var(--tile-dlc-bg);
  color: var(--tile-dlc);
}
#audit-trace[data-audit="vide"],
#audit-froid[data-audit="vide"],
#audit-temoins[data-audit="vide"] {
  background: var(--paper-2);
  color: var(--ink-3);
}

/* Scanner d'étiquettes sanitaires IA */
.scan-loading-box {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--ink);
  color: var(--sheet);
  text-align: center;
  padding: var(--s-4);
  z-index: var(--z-rail);
}
.scan-loading-box.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scan-loading-title {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ok);
}
.scan-loading-desc {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: var(--s-1);
}
.scan-preview {
  display: none;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.scan-demo-box {
  text-align: center;
  margin-top: var(--s-2);
}
.scan-demo-box .link {
  font-size: var(--t-xs);
}

/* Fiche recette — entête du bloc « Composition par unité » (modale recette) */
.recipe-compose__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.recipe-compose__titre {
  font-weight: 700;
  color: var(--ink-2);
}

.recipe-compose__aide {
  color: var(--ink-3);
  font-size: 10px;
  line-height: 1.4;
}

/* ---- Modales « Corriger / Supprimer une vente » : rappel du mouvement ------- */
/* ---- Historique des ventes : actions de la ligne (corriger / supprimer) ----
   Elles vivent dans la PREMIÈRE colonne, sous l'horodatage. Au bout de la ligne,
   sur téléphone, le tableau fait ~790 px de large pour ~316 px de zone visible :
   les boutons sortent de l'écran et il faut faire défiler le tableau
   horizontalement pour les atteindre (mesuré le 01/10/2026, signalement cliente). */
.sale-row__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.sale-edit__recap,
.sale-delete__recap {
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.sale-edit__field--off { display: none; }