/* mobile-ui.css — Fondations UI mobile une-main (P15-MOBILE-UI.1.C)
 *
 * Couche CSS ADDITIVE du design handoff préparateur. Classes/tokens NOUVEAUX
 * uniquement — n'écrase aucune classe existante de mobile.html (seul `.m-fab`
 * existait déjà → on utilise `.m-fab-hand`). Le token `--red` existant (#e03131)
 * est CONSERVÉ (non redéfini) ; on n'ajoute que `--red-p`. Si ces classes ne sont
 * pas utilisées, le rendu existant est INCHANGÉ.
 *
 * Chargé via <link> AVANT mobile.js. Style plat : bordures fines, aucune ombre,
 * aucun dégradé (sauf les rayures des placeholders, voulues par le handoff).
 */

:root {
  --mint:#75BF91;  --mint-p:#EDF8F1;  --mint-d:#3E8F5C;
  --amber:#C68A1D; --amber-p:#FFF6E5;
  --red-p:#FDECEA;                 /* pâle alerte ; --red existant conservé */
  --ink:#12161F;
}

/* ── Dock une-main : zone basse d'actions ──────────────────────────────────
   Zone haute = info seulement ; le dock ancre les actions au pouce. */
.m-dock {
  position:sticky; bottom:0; z-index:40;
  display:flex; flex-direction:column; gap:8px;
  padding:12px 14px calc(var(--safe-b) + 12px);
  background:linear-gradient(to top, var(--surface) 78%, transparent);
}
.m-dock-primary {
  width:100%; min-height:54px; border:none; border-radius:16px;
  background:var(--cobalt); color:#fff; font:inherit; font-weight:800; font-size:1rem;
  cursor:pointer;
}
.m-dock-primary.mint { background:var(--mint-d); }
.m-dock-primary.danger { background:var(--red); }
.m-dock .subrow { display:flex; gap:8px; }
.m-dock .subrow > * { flex:1; min-height:48px; }
/* Gaucher : la rangée secondaire (dont « Retour ») bascule à gauche. */
body.lefty .m-dock .subrow { flex-direction:row-reverse; }

/* ── FAB ancré côté pouce (droitier par défaut, gaucher = miroir) ─────────── */
.m-fab-hand {
  position:fixed; bottom:calc(var(--safe-b) + 84px); right:16px; z-index:45;
  width:56px; height:56px; border-radius:50%; border:none;
  background:var(--cobalt); color:#fff; font-size:1.6rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
body.lefty .m-fab-hand { right:auto; left:16px; }

/* ── Placeholder photo produit (référence ; remplacer par <img> catalogue) ── */
.prod-photo {
  border-radius:14px; border:1px solid var(--border);
  background:repeating-linear-gradient(135deg,#EDEFF4 0 9px,#E4E8EF 9px 18px);
  display:flex; align-items:center; justify-content:center;
  color:var(--text3); font-family:"DM Mono",ui-monospace,monospace; font-size:9.5px;
  flex-shrink:0;
}
.prod-photo::after { content:"PHOTO PRODUIT"; }
.prod-photo.s56 { width:56px; height:56px; }
.prod-photo.s64 { width:64px; height:64px; }
.prod-photo.hero { width:100%; height:158px; }

/* ── Viewfinder scan-first ─────────────────────────────────────────────────── */
.viewfinder {
  position:relative; width:100%; aspect-ratio:1/1; max-height:46vh;
  border-radius:20px; overflow:hidden; background:#0d1016;
}
.viewfinder .reticle {
  position:absolute; inset:16%; border:2px solid rgba(255,255,255,.85);
  border-radius:14px;
}
.viewfinder .scanline {
  position:absolute; left:16%; right:16%; height:2px; top:18%;
  background:var(--cobalt); box-shadow:0 0 8px var(--cobalt);
  animation:epx-scan 2s linear infinite;
}
@keyframes epx-scan { 0%{top:18%} 50%{top:82%} 100%{top:18%} }
@media (prefers-reduced-motion:reduce){ .viewfinder .scanline{ animation:none; } }

/* ── Bottom sheet (assistant, overlays) ────────────────────────────────────── */
.scrim {
  position:fixed; inset:0; z-index:60; background:rgba(18,22,31,.42);
  display:flex; align-items:flex-end;
}
.sheet {
  width:100%; background:var(--surface); border-radius:20px 20px 0 0;
  padding:8px 16px calc(var(--safe-b) + 16px); max-height:86vh; overflow-y:auto;
}
.sheet .grab {
  width:36px; height:4px; border-radius:999px; background:var(--border-md);
  margin:6px auto 12px;
}

/* ── Utilitaires terrain : boutons, badges, stepper ────────────────────────── */
.m-btn-mint   { background:var(--mint-d); color:#fff; border:none; }
.m-btn-danger { background:var(--red);    color:#fff; border:none; }
.m-btn-ghost  { background:transparent;   color:var(--cobalt); border:1.5px solid var(--border-md); }
.m-btn-dark   { background:var(--ink);    color:#fff; border:none; }
.m-btn-mint, .m-btn-danger, .m-btn-ghost, .m-btn-dark {
  min-height:48px; border-radius:14px; font:inherit; font-weight:700; cursor:pointer;
  padding:0 16px;
}
.m-badge-mint   { background:var(--mint-p);  color:var(--mint-d); }
.m-badge-amber  { background:var(--amber-p); color:var(--amber); }
.m-badge-danger { background:var(--red-p);   color:var(--red); }
.m-badge-cobalt { background:#dbe4ff;        color:var(--cobalt); }  /* info (cumul, etc.) */
.m-badge-mint, .m-badge-amber, .m-badge-danger, .m-badge-cobalt {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.66rem; font-weight:800; padding:2px 8px; border-radius:20px; white-space:nowrap;
}
/* Stepper à grandes cibles tactiles (52-64px) */
.m-stepper-lg { display:inline-flex; align-items:center; gap:10px; }
.m-stepper-lg button {
  min-width:52px; min-height:52px; border-radius:14px;
  border:1.5px solid var(--border-md); background:var(--surface);
  font-size:1.4rem; font-weight:800; color:var(--cobalt); cursor:pointer;
}
.m-stepper-lg .val { min-width:44px; text-align:center; font-family:"DM Mono",ui-monospace,monospace; font-weight:700; font-size:1.1rem; }

/* Incident motif ≥ 66px (grille de sélection) */
.m-motif { min-height:66px; border-radius:14px; border:1.5px solid var(--border-md);
  background:var(--surface); display:flex; align-items:center; justify-content:center;
  text-align:center; font:inherit; font-weight:700; cursor:pointer; padding:8px; }
.m-motif.sel { border-color:var(--red); background:var(--red-p); color:var(--red); }

/* ── Affordance reprise/continuation sur les cartes session (P14-MOBILE.2.A) ──
   Purement visuel : la carte reste le bouton cliquable (mInvEnterSession). */
.m-resume-aff { color:var(--cobalt); font-weight:700; white-space:nowrap; }
.m-empty-cta  { margin-top:4px; font-size:.78rem; color:var(--text2); }

/* ── Formulaire « Nouveau comptage » inventaire (P14-MOBILE.2.C.1) ───────────
   Classes modificatrices SCOPÉES inventaire : n'altèrent jamais les classes
   partagées avec la réception (.m-calc-btn / .m-inline-actions restent intactes).
   Spécificité .m-stepper-btn.m-calc-btn--inv (0,2,0) > .m-calc-btn (0,1,0). */
.m-inline-actions--inv .m-inline-ok,
.m-inline-actions--inv .m-inline-cancel { min-height:48px; }
.m-iv-total {
  margin:6px 0; padding:9px 12px; text-align:center;
  font-weight:800; font-size:1.05rem; color:var(--cobalt);
  background:#eef2ff; border:1px solid #c7d2fe; border-radius:12px;
}
.m-stepper-btn.m-calc-btn--inv { flex:0 0 84px; }
.m-calc-btn--inv .m-calc-txt { font-size:.66rem; }

/* ── Accueil préparation : bande KPI read-only (P14-MOBILE.3.B) ──────────────
   Info en haut (ergonomie une-main). Spans purs, aucune action. */
.m-prep-kpi { display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 6px; }
.m-prep-kpi-item {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:700; padding:5px 11px; border-radius:999px;
  border:1px solid var(--border); color:var(--text2); white-space:nowrap;
}
.m-prep-kpi-item b { font-weight:800; }
.m-prep-kpi-item.is-progress { background:#eef2ff; color:var(--cobalt); border-color:#c7d2fe; }
.m-prep-kpi-item.is-ready { background:var(--mint-p); color:var(--mint-d); border-color:#bfe6cd; }

/* ── P14-MOBILE.3.C.3 · écran prep-confirm (refonte visuelle read-only) ────────
   Zone haute = info (carte clé/valeur), zone basse = dock une-main (.m-dock).
   Classes SCOPÉES .m-prep-cfm-* : aucune classe partagée modifiée. */
.m-prep-cfm-body { padding:0 14px 4px; }
.m-prep-cfm-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-sm); padding:2px 14px; margin-bottom:12px;
}
.m-prep-cfm-row {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:11px 0; border-top:1px solid var(--border);
}
.m-prep-cfm-row:first-child { border-top:none; }
.m-prep-cfm-row .k {
  color:var(--text3); font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; flex:0 0 auto;
}
.m-prep-cfm-row .v { color:var(--text); font-size:.98rem; font-weight:600; text-align:right; }
.m-prep-cfm-field { padding:2px 0 6px; }