/* ================================================================
   CelField CRM v2 — Design System
   Basé sur le mockup pharmacies — palette warm neutral + rose accent
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ── Variables ── */
:root {
  /* ── Palette par défaut : thème CelField (charte officielle) ──
     Rose et autres thèmes restent disponibles via Paramètres > Design */
  --bg:           #F5F0E7;   /* crème  */
  --bloc:         #EDE8DF;   /* paper  */
  --bloc-2:       #E4DED2;
  --zone:         #E8F3EC;   /* menthe très clair */
  --white:        #FFFFFF;

  --accent:       #7FC1A0;   /* menthe / CTA */
  --accent-dark:  #D8EDE1;
  --accent-deep:  #5BA882;   /* menthe profonde — bordures/soulignés */
  --btn:          #DCD7CC;

  --text:         #2A3D35;   /* encre forêt */
  --text-light:   #5A7568;   /* ardoise */
  --accent-ink:   var(--text); /* texte sur fond accent */
  --text-xlight:  #AAAAAA;
  --border:       rgba(0,0,0,.08);
  --border-md:    rgba(0,0,0,.12);
  --shadow:       rgba(0,0,0,.08);

  --nav-width:    220px;
  --header-h:     56px;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-full: 999px;

  --sh-xs: 0 1px 3px rgba(0,0,0,.07);
  --sh-sm: 0 2px 6px rgba(0,0,0,.08);
  --sh-md: 0 4px 14px rgba(0,0,0,.10);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; overflow: hidden;
  font-family: 'Nunito', sans-serif;
  font-size: 13px; color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── App Shell ── */
.v2-app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-columns: var(--nav-width) 1fr;
  grid-template-areas: "nav hdr" "nav main";
}

/* ── Nav ── */
.v2-nav {
  grid-area: nav;
  background: var(--bloc);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}

.v2-nav-logo {
  height: var(--header-h);
  display: flex; align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.v2-nav-logo img { height: 30px; width: auto; object-fit: contain; }
.v2-nav-logo-text {
  font-size: 16px; font-weight: 700; color: var(--text);
  display: none;
}

.v2-nav-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.v2-nav-body::-webkit-scrollbar { width: 3px; }
.v2-nav-body::-webkit-scrollbar-thumb { background: var(--accent-deep); border-radius: 2px; opacity:.4; }

.v2-nav-section {
  padding: 14px 16px 4px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-xlight);
}

.v2-nav-item {
  margin: 1px 8px; padding: 8px 10px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; color: var(--text-light);
  font-size: 12.5px; font-weight: 500;
  transition: background .12s, color .12s;
  user-select: none; text-decoration: none;
}
.v2-nav-item:hover { background: var(--bloc-2); color: var(--text); }
.v2-nav-item.active {
  background: var(--accent);
  color: var(--text); font-weight: 700;
  border-left: 3px solid var(--accent-deep);
}
.v2-nav-item .ms {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 300;
  flex-shrink: 0;
  font-family: 'Material Symbols Rounded';
}
.v2-nav-item.active .ms {
  font-variation-settings: 'FILL' 1, 'wght' 400;
}

.v2-nav-divider {
  height: 1px; background: var(--border);
  margin: 6px 12px;
}

.v2-nav-bottom {
  border-top: 1px solid var(--border);
  padding: 8px 8px 12px;
  flex-shrink: 0;
}
.v2-nav-user {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--r-sm);
  cursor: pointer; transition: background .12s;
}
.v2-nav-user:hover { background: var(--bloc-2); }
.v2-nav-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text);
  flex-shrink: 0;
}
.v2-nav-un { font-size: 12px; font-weight: 600; color: var(--text); }
.v2-nav-ur { font-size: 10.5px; color: var(--text-light); }

/* ── Header ── */
.v2-hdr {
  grid-area: hdr;
  background: var(--bloc);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 18px; gap: 10px;
  box-shadow: var(--sh-xs);
}

.v2-hdr-crumb { font-size: 11.5px; color: var(--text-light); }
.v2-hdr-sep { color: var(--text-xlight); margin: 0 2px; }
.v2-hdr-title { font-size: 15px; font-weight: 700; color: var(--text); }

.v2-view-toggle {
  display: flex; align-items: center; gap: 1px;
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: var(--r-sm); padding: 2px; margin-left: 6px;
}
.v2-vt-btn {
  width: 28px; height: 24px; border: none; background: transparent;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-light); transition: all .12s;
}
.v2-vt-btn:hover { background: var(--bloc-2); color: var(--text); }
.v2-vt-btn.active { background: var(--accent-dark); color: var(--text); box-shadow: var(--sh-xs); }
.v2-vt-btn .ms { font-size: 15px; font-family: 'Material Symbols Rounded'; }

.v2-db-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; color: var(--text-light);
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--bg); border: 1px solid var(--border);
}
.v2-db-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--btn); transition: background .3s; }
.v2-db-dot.ok { background: #72b47a; }
.v2-db-dot.err { background: #e07070; }
.v2-db-dot.reconnecting { background: #e9a130; animation: pulse-dot .8s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.3; } }
.v2-db-badge { cursor: pointer; }
.v2-db-badge:hover span { text-decoration: underline; }

.v2-hdr-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg); border: 1px solid var(--border-md);
  border-radius: var(--r-full); padding: 5px 12px;
  width: 200px; margin-left: auto;
  transition: border-color .18s, width .22s;
}
.v2-hdr-search:focus-within { border-color: var(--accent-deep); width: 240px; }
.v2-hdr-search .ms { font-size: 15px; color: var(--text-light); font-family: 'Material Symbols Rounded'; }
.v2-hdr-search input {
  border: none; background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; color: var(--text); outline: none; width: 100%;
}
.v2-hdr-search input::placeholder { color: var(--text-xlight); }

.v2-icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-light); transition: all .12s;
}
.v2-icon-btn:hover { background: var(--bloc-2); color: var(--text); }
.v2-icon-btn .ms { font-size: 17px; font-family: 'Material Symbols Rounded'; }

/* ── Main ── */
.v2-main {
  grid-area: main;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* ── Buttons ── */
.v2-btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--r-md);
  background: var(--accent); color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; font-weight: 700;
  border: none; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  transition: filter .13s, transform .1s;
  white-space: nowrap;
}
.v2-btn-primary:hover { filter: brightness(.95); transform: translateY(-1px); }
.v2-btn-primary .ms { font-size: 15px; font-family: 'Material Symbols Rounded'; }

.v2-btn-ghost {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif;
  font-size: 12px; font-weight: 500;
  color: var(--text-light); cursor: pointer; transition: all .11s;
}
.v2-btn-ghost:hover { background: var(--accent-dark); color: var(--text); }
.v2-btn-ghost .ms { font-size: 14px; font-family: 'Material Symbols Rounded'; }

.v2-btn-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-md); background: var(--btn);
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--text); cursor: pointer; transition: filter .12s;
}
.v2-btn-cancel:hover { filter: brightness(.96); }

/* ── Cards ── */
.v2-card {
  background: var(--bloc);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}

/* ── Tabs ── */
.v2-tabs-bar {
  display: flex; align-items: center;
  padding: 0 16px;
  background: var(--bloc);
  border-bottom: 1px solid var(--border);
}
.v2-tab {
  padding: 9px 13px;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; font-weight: 500; color: var(--text-light);
  border: none; background: transparent; cursor: pointer;
  position: relative; transition: color .12s;
  white-space: nowrap; display: flex; align-items: center; gap: 5px;
}
.v2-tab:hover { color: var(--text); }
.v2-tab.active { color: var(--text); font-weight: 700; }
.v2-tab.active::after {
  content: ''; position: absolute;
  bottom: 0; left: 9px; right: 9px;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--accent-deep);
}
.v2-tab-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  height: 16px; min-width: 16px; padding: 0 4px; border-radius: 4px;
  background: var(--btn); color: var(--text-light);
  font-size: 9.5px; font-weight: 700;
}
.v2-tab.active .v2-tab-cnt { background: var(--accent); color: var(--text); }

/* ── Table ── */
.v2-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0 3px;
}
.v2-tbl thead th {
  font-size: 9.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--text-light);
  padding: 3px 10px 7px; text-align: left; white-space: nowrap;
  cursor: pointer;
}
.v2-tbl thead th.r { text-align: right; }
.v2-tbl tbody tr td {
  padding: 8px 10px; background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle; transition: background .1s;
}
.v2-tbl tbody tr td:first-child {
  border-left: 1px solid var(--border);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.v2-tbl tbody tr td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.v2-tbl tbody tr:hover td {
  background: var(--accent-dark);
  border-color: var(--accent-deep);
}

/* ── Pills / Badges ── */
.v2-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.v2-pill-sent { background: #deeaf7; color: #2255aa; }
.v2-pill-draft { background: var(--accent-dark); color: var(--text); }
.v2-pill-ok { background: #d9f0e0; color: #1a6634; }
.v2-pill-part { background: #fdecd8; color: #8a4e10; }
.v2-pill-cancel { background: var(--zone); color: #b02828; }
.v2-pill-paid    { background: #efe6fb; color: #6a3fb0; }
.v2-pill-validee { background: #cff0d6; color: #155724; }   /* Validée — vert légèrement différent de livré */
.v2-pill-envoyee { background: #deeaf7; color: #2255aa; }   /* Envoyée — bleu identique à sent */
.v2-pill-devis   { background: #fbeccd; color: #8a5e10; }   /* Devis — ton soleil atténué */

/* Remise réelle du bon de commande (webhook Resend). Distinct du statut métier :
   « Envoyée » dit qu'on a envoyé, ces pastilles disent si c'est arrivé.
   Volontairement plus petites et discrètes pour rester secondaires. */
.v2-pill-dlv {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; margin-left: 4px; border-radius: var(--r-full);
  font-size: 9.5px; font-weight: 600; white-space: nowrap;
}
.v2-pill-dlv-queued    { background: var(--accent-dark); color: var(--text); }
.v2-pill-dlv-delivered { background: #d9f0e0; color: #1a6634; }
.v2-pill-dlv-delayed   { background: #fdecd8; color: #8a4e10; }
.v2-pill-dlv-bounced   { background: #fadcdc; color: #a01e1e; }
.v2-pill-dlv-complained{ background: #fadcdc; color: #a01e1e; }

/* Precommande (10/09/2026). Meme gabarit que les pastilles de remise, autre
   registre de couleur : ce n'est ni un statut d'envoi ni un statut de commande,
   c'est une nature — la commande a ete passee a l'avance. Un ton froid la
   distingue au premier coup d'oeil des pastilles vertes/rouges de remise. */
.v2-pill-preco {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; margin-left: 4px; border-radius: var(--r-full);
  font-size: 9.5px; font-weight: 700; white-space: nowrap; letter-spacing: .02em;
  background: #dfe7f3; color: #2c4a75;
}

/* ── Modal ── */
.v2-modal-ov {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
  z-index: 500; transition: opacity .18s;
}
.v2-modal-ov.open { display: flex; opacity: 1; pointer-events: all; }
.v2-modal-box {
  background: var(--bloc);
  border: 1px solid var(--border-md); border-radius: var(--r-xl);
  width: 400px; box-shadow: 0 16px 40px rgba(0,0,0,.12);
  transform: scale(.97) translateY(5px); transition: transform .2s ease;
}
.v2-modal-ov.open .v2-modal-box { transform: scale(1) translateY(0); }
.v2-modal-head {
  padding: 16px 20px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.v2-modal-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.v2-modal-icon .ms { font-size: 18px; font-family: 'Material Symbols Rounded'; font-variation-settings: 'FILL' 1; }
.v2-modal-title { font-size: 14px; font-weight: 700; color: var(--text); }
.v2-modal-body {
  padding: 16px 20px; background: var(--white);
  display: flex; flex-direction: column; gap: 12px;
}
.v2-modal-foot {
  padding: 12px 20px 18px; background: var(--white);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  display: flex; gap: 8px;
}
.v2-modal-foot .v2-btn-primary,
.v2-modal-foot .v2-btn-cancel { flex: 1; justify-content: center; }

/* ── Form fields ── */
.v2-fg { display: flex; flex-direction: column; gap: 4px; }
.v2-flbl {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-light);
}
.v2-finput, .v2-fselect {
  height: 36px; padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif; font-size: 13px;
  color: var(--text); outline: none; width: 100%;
  transition: border-color .13s;
}
.v2-finput:focus, .v2-fselect:focus {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 2px var(--accent-dark);
}
.v2-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.v2-ftextarea {
  width: 100%; min-height: 80px; padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif; font-size: 13px;
  color: var(--text); outline: none; resize: vertical;
  transition: border-color .13s;
}
.v2-ftextarea:focus {
  border-color: var(--accent-deep);
  box-shadow: 0 0 0 2px var(--accent-dark);
}

/* ── Toast ── */
.v2-toast {
  position: fixed; bottom: 16px; right: 16px;
  background: var(--text); border-radius: var(--r-md);
  padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: #fff;
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--sh-sm); opacity: 0; transform: translateY(6px);
  transition: opacity .18s, transform .18s;
  pointer-events: none; z-index: 999;
}
.v2-toast.show { opacity: 1; transform: translateY(0); }
.v2-toast .ms { font-size: 16px; color: #7ee8a2; font-variation-settings: 'FILL' 1; font-family: 'Material Symbols Rounded'; }

/* ── Loading ── */
.v2-loading {
  position: fixed; inset: 0;
  background: rgba(245,240,231,.92);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 900; gap: 14px; transition: opacity .3s;
}
.v2-loading.hidden { opacity: 0; pointer-events: none; }
.v2-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--accent-dark);
  border-top-color: var(--accent-deep);
  border-radius: 50%; animation: v2spin .7s linear infinite;
}
.v2-loading-txt { font-size: 12.5px; font-weight: 600; color: var(--text-light); }

@keyframes v2spin { to { transform: rotate(360deg); } }
@keyframes v2fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.v2-card, .v2-anim { animation: v2fadeUp .24s ease both; }

/* ── Toolbar ── */
.v2-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  background: var(--bloc);
}
.v2-toolbar-l { display: flex; align-items: center; gap: 7px; }
.v2-toolbar-title { font-size: 12px; font-weight: 600; color: var(--text-light); }
.v2-toolbar-ico {
  font-size: 16px; color: var(--text-light);
  font-variation-settings: 'FILL' 1, 'wght' 400;
  font-family: 'Material Symbols Rounded';
}

/* ── Scrollable panels ── */
.v2-scroll {
  flex: 1; overflow-y: auto;
}
.v2-scroll::-webkit-scrollbar { width: 4px; }
.v2-scroll::-webkit-scrollbar-track { background: transparent; }
.v2-scroll::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 2px; }

/* ── Panel footer ── */
.v2-panel-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-top: 1px solid var(--border);
  background: var(--bloc);
}
.v2-panel-footer-meta { font-size: 11px; color: var(--text-light); font-weight: 500; }

/* ── Page content wrapper ── */
.v2-page {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding: 14px; gap: 11px;
}

/* ── Search field ── */
.v2-sf {
  display: flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--border-md);
  border-radius: var(--r-sm); padding: 6px 10px;
  transition: border-color .14s;
}
.v2-sf:focus-within { border-color: var(--accent-deep); }
.v2-sf .ms { font-size: 14px; color: var(--text-light); font-family: 'Material Symbols Rounded'; }
.v2-sf input {
  border: none; background: transparent;
  font-family: 'Nunito', sans-serif;
  font-size: 12.5px; color: var(--text); outline: none; flex: 1;
}
.v2-sf input::placeholder { color: var(--text-xlight); }

/* ── Inputs numérique / texte dans tableaux ── */
.v2-ninput {
  width: 100%; padding: 4px 6px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif; font-size: 12px;
  text-align: center; color: var(--text); outline: none; height: 28px;
  transition: border-color .13s;
}
.v2-ninput:focus {
  border-color: var(--accent-deep); background: var(--white);
  box-shadow: 0 0 0 2px var(--accent-dark);
}
.v2-tinput {
  width: 100%; padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); background: var(--bg);
  font-family: 'Nunito', sans-serif; font-size: 12px;
  color: var(--text-light); outline: none; height: 28px;
  transition: border-color .13s;
}
.v2-tinput:focus { border-color: var(--accent-deep); background: var(--white); }

/* ── Delete/Action button small ── */
.v2-act-btn {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-light); transition: all .11s;
}
.v2-act-btn:hover { background: var(--accent-dark); color: var(--text); }
.v2-act-btn.danger:hover { background: var(--zone); color: #c03030; border-color: rgba(192,48,48,.12); }
.v2-act-btn .ms { font-size: 14px; font-family: 'Material Symbols Rounded'; }

/* ── Separator ── */
.v2-isep {
  width: 1px; background: var(--border-md);
  align-self: stretch; margin: 0 16px; flex-shrink: 0;
}

/* ── Empty state ── */
.v2-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; gap: 8px; padding: 40px;
  color: var(--text-light); text-align: center;
}
.v2-empty .ms {
  font-size: 40px; opacity: .3;
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 0, 'wght' 200;
}
.v2-empty-title { font-size: 13px; font-weight: 600; }
.v2-empty-sub { font-size: 12px; color: var(--text-xlight); }

/* ── Notes textarea ── */
.v2-notes-ta {
  flex: 1; width: 100%;
  border: 1px solid var(--border-md); border-radius: var(--r-md);
  padding: 12px 14px; font-family: 'Nunito', sans-serif;
  font-size: 13px; color: var(--text);
  background: var(--zone); resize: none; outline: none; line-height: 1.72;
  transition: border-color .14s;
}
.v2-notes-ta::placeholder { color: var(--text-xlight); font-style: italic; }
.v2-notes-ta:focus { border-color: var(--accent-deep); background: var(--white); }

/* ── Admin grid ── */
.v2-admin-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; padding: 14px 18px; overflow: auto;
}
.v2-adm-grp { display: flex; flex-direction: column; gap: 9px; }
.v2-adm-title {
  font-size: 9.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--text-light);
  padding-bottom: 6px; border-bottom: 1px solid var(--border-md);
}
.v2-adm-row { display: flex; flex-direction: column; gap: 2px; }
.v2-adm-lbl { font-size: 9.5px; font-weight: 600; color: var(--text-light); }
.v2-adm-val { font-size: 13px; color: var(--text); font-weight: 500; }
.v2-adm-val.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; }
.v2-adm-val.link { color: #4a6fa5; }

/* ── Colour settings ── */
.v2-color-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; padding: 16px;
}
.v2-color-item {
  display: flex; flex-direction: column; gap: 6px;
}
.v2-color-lbl { font-size: 10px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .6px; }
.v2-color-row { display: flex; align-items: center; gap: 8px; }
.v2-color-preview {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--border-md); flex-shrink: 0; cursor: pointer;
}
.v2-color-input-text {
  flex: 1; height: 28px; padding: 0 8px;
  border-radius: var(--r-sm); border: 1px solid var(--border-md);
  background: var(--bg); font-family: 'Nunito', monospace;
  font-size: 12px; color: var(--text); outline: none;
}
.v2-color-input-text:focus { border-color: var(--accent-deep); }

/* ================================================================
   FORMAT TELEPHONE

   Tout ce bloc est inerte tant que <html data-mobile="on"> n'est pas
   pose par pwa-init.js, lui-meme commande par la variable Netlify
   MOBILE_ENABLED. Sur ALMADIS, ADPharma, LBM et Litsea, rien ici ne
   s'applique : l'attribut n'existe pas.

   Double condition volontaire (attribut ET largeur) : le drapeau dit
   "cette instance a le droit", la largeur dit "cet ecran en a besoin".
   Sur la demo ouverte au bureau, la mise en page reste celle du bureau.

   Ne touche QUE la coquille : entete, navigation, barre basse. Les
   tableaux larges des pages sont l'etape suivante, pas celle-ci.
================================================================ */

/* Masquees hors format telephone. Declarees hors media query pour que
   rien n'apparaisse sur poste fixe meme si le balisage est injecte. */
.v2-nav-ov,
.v2-bbar,
.v2-hdr-retour { display: none; }

@media (max-width: 700px) {

  /* ── Direction visuelle du format telephone ─────────────────────────

     Reprise des partis pris de la maquette. La palette y etait deja presque
     identique — ce qui change n'est pas la couleur mais la GEOMETRIE :

     1. Les cartes y sont plus CLAIRES que la page (#FFFDF9 sur #F5F0E7).
        Ici elles etaient plus sombres (--bloc #EDE8DF), ce qui les fait lire
        comme des creux au lieu de reliefs. C'est le principal ecart de
        lisibilite, et le plus simple a corriger.
     2. Bordure chaude et visible (#E5DED1) au lieu d'un lavis de gris
        (rgba(0,0,0,.08)), et AUCUNE ombre : la maquette separe par le trait,
        pas par le flou. Les ombres se voient mal sur un ecran tenu en main,
        souvent en exterieur.
     3. Rayons plus francs — 14px pour les cartes, 11 a 12px pour les blocs
        internes — et cibles tactiles plus hautes (recherche 44px, chips 34px).
     4. Les petits libelles sont plus GRAS et plus petits (800, 9,5px) plutot
        que moyens : mieux lisibles a bout de bras qu'un 10,5px demi-gras.

     Redefinir les jetons plutot que chaque regle : tout ce qui utilise deja
     var(--r-md) ou var(--border) suit sans etre enumere ici. --sh-md est
     conserve pour les fenetres superposees. */
  html[data-mobile="on"] {
    --surface-tel:  #FFFDF9;
    --border:       #E5DED1;
    --border-md:    #D9D0BF;
    --sh-xs:        none;
    --sh-sm:        none;
    --r-sm:         11px;
    --r-md:         12px;
    --r-lg:         14px;
  }

  html[data-mobile="on"] .v2-card,
  html[data-mobile="on"] .dash-card,
  html[data-mobile="on"] .dash-kpi,
  html[data-mobile="on"] .sup-row {
    background: var(--surface-tel);
    border: 1px solid var(--border);
    box-shadow: none;
  }

  /* Pastilles d'etat : plus petites mais nettement plus grasses. */
  html[data-mobile="on"] .v2-pill {
    font-size: 9.5px; font-weight: 800;
    padding: 3px 9px; letter-spacing: .2px;
  }

  /* Filtres de liste : de petites etiquettes de 10px a de vraies cibles
     tactiles. Le filtre actif se remplit d'accent, comme dans la maquette,
     au lieu de se distinguer par une nuance de gris. */
  html[data-mobile="on"] .ph-chip {
    height: 34px; padding: 0 13px;
    display: inline-flex; align-items: center;
    font-size: 11.5px; font-weight: 800;
    background: transparent;
  }
  html[data-mobile="on"] .ph-chip.on {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
  }
  html[data-mobile="on"] .ph-list-chips { gap: 7px; flex-wrap: wrap; }

  /* Champ de recherche : 44px, la hauteur d'une cible tactile confortable. */
  html[data-mobile="on"] .v2-sf {
    height: 44px; padding: 0 12px;
    background: var(--surface-tel);
    border-radius: var(--r-md);
  }

  /* Elements de liste : de simples lignes a des cartes distinctes. Sans
     surface propre, quinze pharmacies d'affilee forment un bloc gris ou
     l'oeil ne raccroche rien. */
  html[data-mobile="on"] .ph-item {
    background: var(--surface-tel);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 11px 12px;
    margin-bottom: 7px;
  }
  html[data-mobile="on"] .ph-item.active {
    border-color: var(--accent-deep);
    background: var(--accent-dark);
  }
  html[data-mobile="on"] .ph-items { padding: 10px; }

  /* 100dvh et non 100vh : sur mobile, vh est fige sur la fenetre barre
     d'adresse retractee, ce qui fait deborder la page de la hauteur de
     cette barre et cache la barre basse. */
  html[data-mobile="on"], html[data-mobile="on"] body { height: 100dvh; }

  html[data-mobile="on"] .v2-app {
    height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: calc(var(--header-h) + env(safe-area-inset-top)) 1fr auto;
    grid-template-areas: "hdr" "main" "tabbar";
  }

  /* La navigation quitte la grille et devient le panneau « Plus ».

     Jusqu'au 15/09/2026 : tiroir lateral, ouvert par un bouton en haut a
     gauche ET par la derniere case de la barre basse — deux menus pour une
     meme colonne. Il n'y a plus qu'une entree, en bas ; le panneau monte
     donc du bas, juste au-dessus de la barre, pour rester sous le pouce.

     Il glisse DERRIERE la barre (z-index 120 contre 130) : on le voit sortir
     de « Plus », et un second toucher sur « Plus » le referme. `visibility`
     le retire de la tabulation une fois ferme. */
  html[data-mobile="on"] .v2-nav {
    position: fixed; left: 0; right: 0; top: auto;
    bottom: calc(54px + env(safe-area-inset-bottom));
    width: auto; height: auto;
    max-height: calc(100dvh - 54px - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 32px);
    overflow-y: auto;
    z-index: 120;
    background: var(--surface-tel);
    border: 1px solid var(--border); border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 28px rgba(30, 25, 20, .14);
    padding: 6px 6px 4px;
    transform: translateY(calc(100% + 60px + env(safe-area-inset-bottom)));
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  html[data-mobile="on"] .v2-app.nav-ouvert .v2-nav {
    transform: translateY(0);
    visibility: visible;
    transition: transform .22s ease;
  }
  /* Poignee : signale un panneau, pas une page. */
  html[data-mobile="on"] .v2-nav::before {
    content: ""; display: block; flex-shrink: 0;
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--border-md);
    margin: 2px auto 6px;
  }
  /* Le logo, les titres de section et le separateur n'ont plus d'objet :
     le panneau ne porte que Trade et les reglages de session. */
  html[data-mobile="on"] .v2-nav-logo,
  html[data-mobile="on"] .v2-nav-section,
  html[data-mobile="on"] .v2-nav-divider { display: none; }
  html[data-mobile="on"] .v2-nav-body { flex: none; overflow: visible; padding: 0 0 4px; }
  html[data-mobile="on"] .v2-nav-item { min-height: 46px; font-size: 14px; }
  html[data-mobile="on"] .v2-nav-bottom { border-top: 1px solid var(--border); padding-top: 6px; }

  html[data-mobile="on"] .v2-nav-ov {
    display: block;
    position: fixed; inset: 0; z-index: 110;
    background: rgba(30, 25, 20, .38);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  html[data-mobile="on"] .v2-app.nav-ouvert .v2-nav-ov { opacity: 1; pointer-events: auto; }

  /* Entete : le fil d'Ariane et la recherche cedent la place au titre.
     Plus de bouton menu a gauche : le titre prend la marge. */
  html[data-mobile="on"] .v2-hdr {
    padding: env(safe-area-inset-top) 14px 0;
    gap: 6px;
  }
  html[data-mobile="on"] .v2-hdr-crumb,
  html[data-mobile="on"] .v2-hdr-sep,
  html[data-mobile="on"] .v2-hdr-search { display: none; }
  html[data-mobile="on"] .v2-hdr-title {
    font-size: 14.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Barre basse : le SEUL menu du format telephone — quatre destinations
     quotidiennes, plus le panneau « Plus ».

     Prefixe v2-bbar et non v2-tab : `.v2-tab` (ligne 274) designe deja les
     onglets internes, dont les cinq de la fiche pharmacie. Les nommer pareil
     deformait ces onglets en format telephone, et switchTab() de
     pharmacies.html eteignait la surbrillance de la barre a chaque
     changement d'onglet. */
  html[data-mobile="on"] .v2-bbar {
    grid-area: tabbar;
    position: relative; z-index: 130;   /* au-dessus du panneau « Plus » */
    display: flex;
    background: var(--bloc);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html[data-mobile="on"] .v2-bbar-item {
    flex: 1; min-width: 0;
    height: 54px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    border: none; background: none; cursor: pointer;
    color: var(--text-light);
    font-family: inherit; font-size: 10px; font-weight: 700;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .v2-bbar-item .ms { font-size: 21px; }
  html[data-mobile="on"] .v2-bbar-item.active,
  html[data-mobile="on"] .v2-bbar-item.ouvert { color: var(--accent-deep); }
  html[data-mobile="on"] .v2-bbar-item:active { background: var(--bloc-2); }
  html[data-mobile="on"] .v2-bbar-lbl {
    max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }

  /* Allegement : Imports et Exports n'ont pas de sens sur un telephone.
     Masquer n'est PAS interdire — l'URL reste atteignable. Ici l'enjeu
     est le format, pas le droit : il n'y a donc rien a verrouiller au
     serveur, contrairement aux commissions. */
  html[data-mobile="on"] [data-hors-telephone] { display: none !important; }
  /* Symetrique : visible SEULEMENT en format telephone. Masque par defaut
     hors du media query (voir la regle jumelle en bas de fichier), de sorte
     qu'un bloc marque ainsi n'apparaisse jamais sur poste. */
  html[data-mobile="on"] [data-telephone-seul] { display: flex !important; }

  /* Le panneau « Plus » ne reprend pas ce que porte deja la barre basse : les quatre
     memes destinations proposees deux fois sur le meme ecran, dans la
     barre et dans le panneau. L'attribut est pose automatiquement par
     _navHTML depuis ROUTES_BARRE_TEL — ajouter une destination a la barre
     la retire du panneau sans autre geste.

     Le panneau « Plus » garde donc : Trade, plus l'installation, la pastille
     de connexion, l'interrupteur hors ligne et l'utilisateur. Rapports et
     Parametres sont retires du telephone (PAGES_RETIREES_TEL, v2-nav.js). */
  html[data-mobile="on"] [data-en-barre] { display: none !important; }

  /* ── Tableau de bord (index.html) ────────────────────────────────

     Ces classes sont declarees dans le <style> de index.html, pas ici.
     Choix assume : rassembler TOUTES les regles du format telephone dans
     un seul fichier. L'alternative — une media query dans chacune des neuf
     pages — disperse le format mobile sur neuf fichiers, sans rien pour
     signaler qu'ils doivent rester coherents. Meme raisonnement que pour
     v2Confirm, place dans v2-nav.js plutot que recopie.

     Corollaire a tenir : renommer une de ces classes dans sa page casse la
     regle ici, en silence. Le nom de la page est donc rappele a chaque bloc. */

  /* 4 colonnes sur 402px laissaient 83px par carte, moins 30px de padding :
     53px utiles pour une valeur en 22px gras. D'ou l'ecrasement. */
  html[data-mobile="on"] .dash-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  html[data-mobile="on"] .dash-kpi { padding: 12px; }
  html[data-mobile="on"] .dash-kpi-val { font-size: 19px; }

  /* Les deux graphiques cote a cote faisaient 179px de large pour 190px de
     haut : le camembert et sa legende ne tenaient pas et se retrouvaient
     rognes. Empiles, ils reprennent toute la largeur ; la hauteur peut
     alors etre plus genereuse. Chart.js suit le conteneur
     (maintainAspectRatio:false), il n'y a rien a changer en JS. */
  html[data-mobile="on"] .dash-grid-2-1,
  html[data-mobile="on"] .dash-grid-1-1 { grid-template-columns: 1fr; }
  html[data-mobile="on"] .chart-box { height: 215px; }

  /* Bloc « A faire » : le libelle est un div sans classe entre l'icone et le
     bouton. Sans min-width:0 il refuse de retrecir (regle par defaut des
     conteneurs flex) et pousse le bouton hors de la carte. */
  html[data-mobile="on"] .act-row { gap: 9px; }
  html[data-mobile="on"] .act-row > div { min-width: 0; }
  html[data-mobile="on"] .act-txt-main,
  html[data-mobile="on"] .act-txt-sub {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-mobile="on"] .act-go { padding: 5px 9px; font-size: 11.5px; }

  /* Bloc « A envoyer » : dans la maquette c'est un avertissement, pas une
     carte comme les autres. Une commande saisie hors ligne et pas encore
     partie est la seule chose de cet ecran qui appelle une action ; elle
     doit se distinguer avant d'etre lue.

     Le filet gauche existe deja, pose en style inline (#d99a2b) : inutile
     de le redeclarer ici, l'inline gagnerait de toute facon. On ajoute le
     fond et le libelle ambres, absents des jetons actuels. */
  html[data-mobile="on"] #dashPendingCard {
    background: #FBEBD2;
    border-color: #E8C88A;
  }
  html[data-mobile="on"] #dashPendingCard .dash-card-title { color: #8A6510; }

  /* Le tableau de bord et les listes defilent sur le fond creme, pas sur du
     blanc : c'est ce qui fait ressortir les cartes claires. */
  html[data-mobile="on"] .v2-main,
  html[data-mobile="on"] .ph-items { background: var(--bg); }

  /* ── Tableaux « A envoyer » et « Commandes recentes » (index.html) ─────

     Sept colonnes — pharmacie, fournisseur, n°, date, montant, statut,
     actions — sur 370px de large. Aucune largeur ne peut les faire tenir :
     le tableau debordait et se faisait couper au bord de la carte.

     Les deux tableaux portent les MEMES classes de cellules et le meme ordre
     de colonnes (verifie dans les deux generateurs de lignes) : une seule
     regle suffit pour les deux.

     Choix : transformer chaque ligne en fiche plutot que la faire defiler
     lateralement. Un defilement horizontal cache la moitie de l'information
     derriere un geste que personne ne devine, et sur ce bloc l'information
     cachee serait le montant et l'etat — justement ce qu'on vient verifier.

     Le placement est explicite (nth-of-type) car deux cellules partagent la
     classe cmd-cell-ref : le numero de commande et la date. L'ordre des <td>
     est donc contractuel ; le changer dans index.html deplacerait ces blocs
     en silence. */
  html[data-mobile="on"] .cmd-tbl,
  html[data-mobile="on"] .cmd-tbl tbody { display: block; }
  html[data-mobile="on"] .cmd-tbl thead { display: none; }

  html[data-mobile="on"] .cmd-tbl tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 1px;
    padding: 10px 0;
    align-items: baseline;
  }
  html[data-mobile="on"] .cmd-tbl tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }
  /* Les bordures etaient portees par les cellules : hors tableau, elles
     dessineraient un trait sous chaque champ. */
  html[data-mobile="on"] .cmd-tbl tbody tr:not(:last-child) td { border-bottom: none; }
  html[data-mobile="on"] .cmd-tbl td {
    display: block; padding: 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ligne 1 : pharmacie — montant */
  html[data-mobile="on"] .cmd-tbl tbody td:nth-of-type(1) { grid-area: 1 / 1; font-size: 13.5px; }
  html[data-mobile="on"] .cmd-tbl tbody td:nth-of-type(5) { grid-area: 1 / 2; font-size: 14px; }
  /* ligne 2 : fournisseur — statut */
  html[data-mobile="on"] .cmd-tbl tbody td:nth-of-type(2) { grid-area: 2 / 1; font-size: 11.5px; }
  html[data-mobile="on"] .cmd-tbl tbody td:nth-of-type(6) { grid-area: 2 / 2; }
  /* ligne 3 : numero — date */
  html[data-mobile="on"] .cmd-tbl tbody td:nth-of-type(3) { grid-area: 3 / 1; }
  html[data-mobile="on"] .cmd-tbl tbody td:nth-of-type(4) { grid-area: 3 / 2; }
  /* ligne 4 : actions, alignees a droite. Vide sur les lignes sans bouton,
     la rangee se replie alors d'elle-meme. */
  html[data-mobile="on"] .cmd-tbl tbody td:nth-of-type(7) {
    grid-area: 4 / 1 / auto / 3; margin-top: 4px;
  }

  /* Entete de carte : titre, pastille et commandes sur une seule ligne
     debordaient — « Commandes saisies hors ligne a envoyer » suivi du bouton
     « Tout envoyer ». On autorise le retour a la ligne. */
  html[data-mobile="on"] .dash-card-hd { flex-wrap: wrap; row-gap: 6px; }
  html[data-mobile="on"] .dash-card-title { min-width: 0; font-size: 12.5px; }

  /* ── Maitre / detail generique ─────────────────────────────────

     Pilote par _initMaitreDetail() dans v2-nav.js. Un seul volet a la fois :
     la liste, puis la fiche. On ne force le display QUE sur le volet cache —
     le volet visible garde celui que sa page lui donne (flex, grid...), ce
     qui evite d'avoir a connaitre chaque page ici. */
  html[data-mobile="on"] [data-md] { grid-template-columns: 1fr; }
  html[data-mobile="on"] [data-md]:not(.md-ouvert) > [data-md-detail] { display: none; }
  html[data-mobile="on"] [data-md].md-ouvert    > [data-md-maitre] { display: none; }
  /* pharmacies.html estompe son volet liste via .no-list (bascule 2/3 volets,
     sans objet sur telephone). Sans cette remise a zero, la liste pourrait
     rester invisible alors qu'elle occupe tout l'ecran. */
  html[data-mobile="on"] [data-md] > [data-md-maitre] {
    opacity: 1; pointer-events: auto; border-right: none;
  }

  html[data-mobile="on"] .v2-hdr-retour {
    align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border: none; background: none; cursor: pointer;
    border-radius: var(--r-md); color: var(--text);
  }
  html[data-mobile="on"] .v2-hdr-retour:active { background: var(--bloc-2); }

  /* ── Champs de saisie : empecher le zoom au focus ───────────────────

     iOS Safari agrandit TOUTE la page quand on touche un champ dont la
     police fait moins de 16px, et ne revient pas seul au niveau de depart :
     le reste de l'ecran se retrouve deborde. C'est ce qui se passait sur le
     filtre de la liste des pharmacies (.v2-sf input, 12.5px) et sur tous les
     .v2-finput (13px).

     16px est le seuil, pas un choix esthetique. L'autre parade repandue —
     maximum-scale=1 dans le viewport — est ecartee : elle interdit aussi le
     zoom volontaire a deux doigts, dont certains ont besoin pour lire.

     La hauteur suit, sinon le texte serait a l'etroit dans 36px. */
  html[data-mobile="on"] input,
  html[data-mobile="on"] select,
  html[data-mobile="on"] textarea { font-size: 16px; }
  html[data-mobile="on"] .v2-finput,
  html[data-mobile="on"] .v2-fselect { height: 40px; }
  html[data-mobile="on"] .v2-sf { padding: 8px 10px; }

  /* ── Fiche pharmacie (pharmacies.html) ───────────────────────────

     Trois niveaux d'imbrication : volets, onglets, puis tableaux internes. */

  /* Bascule 2/3 volets : sans objet quand il n'y a qu'un volet a l'ecran. */
  html[data-mobile="on"] #btn3p,
  html[data-mobile="on"] #btn2p { display: none; }

  /* Onglets de la fiche : cinq libelles dont « Informations & Notes ». Ils
     defilent lateralement plutot que de se comprimer — un onglet illisible
     ne sert a rien, et le geste est ici naturel puisque la rangee est
     manifestement plus large que l'ecran. */
  html[data-mobile="on"] .v2-tabs-bar {
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html[data-mobile="on"] .v2-tabs-bar::-webkit-scrollbar { display: none; }
  html[data-mobile="on"] .v2-tabs-bar .v2-tab { padding: 9px 10px; font-size: 12px; }

  /* Bandeau d'identite : sur telephone il ne garde que le nom et l'adresse.
     Titulaire, groupement, CIP et code CCX sont consultables dans l'onglet
     Informations juste dessous — les repeter en tete volait la moitie de
     l'ecran a la fiche elle-meme. Les boutons d'action passent sur leur
     propre ligne, ou ils sont atteignables au pouce. */
  html[data-mobile="on"] .ph-info-strip { flex-wrap: wrap; row-gap: 10px; }
  html[data-mobile="on"] .ph-fields-group,
  html[data-mobile="on"] .v2-isep { display: none; }
  html[data-mobile="on"] .ph-actions { width: 100%; justify-content: flex-start; }
  html[data-mobile="on"] .ph-id { min-width: 0; flex: 1; }
  html[data-mobile="on"] .ph-name { overflow: hidden; text-overflow: ellipsis; }

  /* Onglet Informations & Notes : une grille 1fr 1fr posee en style inline
     — champs a gauche, notes a droite — soit deux colonnes de 180px. Les
     notes passent SOUS les champs. Le conteneur ne peut plus masquer son
     debordement : c'est desormais la page qui defile, pas chaque colonne
     separement, sinon on obtient deux zones de defilement imbriquees dans
     un ecran qui defile deja. */
  html[data-mobile="on"] #t-admin > [style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
  }
  html[data-mobile="on"] #t-admin > [style*="1fr 1fr"] > div {
    overflow: visible !important;
    border-right: none !important;
  }
  html[data-mobile="on"] #t-admin { overflow: hidden; }

  /* Les lignes label/valeur : 120px de libelle fige sur 370px laissait
     l'adresse ou l'e-mail dans un tiers de l'ecran. Le libelle passe
     au-dessus de sa valeur. */
  html[data-mobile="on"] .adm-grid-table,
  html[data-mobile="on"] .adm-grid-table tbody { display: block; }
  html[data-mobile="on"] .adm-fld-row {
    display: block; padding: 7px 12px;
    border-bottom: 1px solid var(--border);
  }
  html[data-mobile="on"] .adm-fld-row td { display: block; border: none; padding: 0; }
  html[data-mobile="on"] .adm-lbl {
    width: auto; padding: 0 0 2px;
    font-size: 10px; letter-spacing: .4px; text-transform: uppercase;
  }
  html[data-mobile="on"] .adm-val { padding: 0; }
  html[data-mobile="on"] .adm-val-txt { font-size: 13.5px; }
  html[data-mobile="on"] .adm-section-hd { display: block; }
  html[data-mobile="on"] .adm-section-hd td { display: block; }
  /* Le champ d'edition remplace la valeur en place : sans largeur pleine il
     heritait des 68px prevus pour le code postal en mise en page bureau. */
  html[data-mobile="on"] .adm-inp-edit { width: 100%; }

  /* Onglet Fournisseurs : dix colonnes (nom, R1, R2, n° marche, trois CA,
     trois boutons) dans 370px.

     Les champs de saisie ne le peuvent pas — un <input> n'accepte pas de
     pseudo-element — d'ou le <label> enveloppant pose dans le generateur.

     Le placement n'a rien d'explicite : les elements masques sortent du flux
     de la grille, et l'ordre du DOM suffit — nom, puis les trois CA, puis les
     trois boutons, une rangee chacun.

     ATTENTION nth-of-type : il compte PAR TYPE d'element, pas parmi les
     elements qui portent la classe. .sup-name etant un div lui aussi, les
     trois .sup-ca sont les divs 2, 3 et 4 — pas 1, 2 et 3. Une premiere
     version numerotait 1/2/3 : la regle 1 ne s'appliquait a rien, les deux
     libelles suivants etaient decales d'un cran et l'annee en cours n'en
     avait aucun. L'annee en cours est donc ciblee par sa CLASSE (.current),
     seule ancre qui ne depende pas du rang.
     Les enveloppes de champ sont des <label> : elles n'entrent pas dans le
     decompte des divs, qui reste donc valable. */
  html[data-mobile="on"] .sup-thead { display: none; }
  html[data-mobile="on"] .sup-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 12px;
    align-items: stretch;
  }
  html[data-mobile="on"] .sup-row > * { min-width: 0; }
  html[data-mobile="on"] .sup-name {
    grid-column: 1 / -1;
    font-size: 14px; font-weight: 700; white-space: normal;
    margin-bottom: 2px;
  }

  /* Remises et numero de marche : restaures. Ils etaient masques faute de
     pouvoir etiqueter un <input>, qui n'admet pas de pseudo-element ; le
     generateur les enveloppe desormais dans un <label> porteur du libelle.
     Meme presentation que les CA — petit libelle au-dessus, valeur dessous —
     pour que la carte se lise d'une seule facon.
     Le champ desactive (remise pilotee par la CGV) reste visible mais
     manifestement inerte : c'est une information, pas une case a remplir. */
  html[data-mobile="on"] .sup-fld-lbl {
    display: block; margin-bottom: 2px;
    font-size: 9px; font-weight: 800; letter-spacing: .5px;
    color: var(--text-light); text-transform: uppercase;
  }
  html[data-mobile="on"] .sup-row .v2-ninput,
  html[data-mobile="on"] .sup-row .v2-tinput {
    height: 36px; text-align: left; padding: 0 8px;
    background: var(--surface-tel);
  }
  html[data-mobile="on"] .sup-row .v2-ninput:disabled {
    background: var(--bloc); color: var(--text-light);
    border-style: dashed;
  }

  /* Les trois CA en blocs distincts, comme les compteurs de la maquette :
     un chiffre pose sur le fond de la carte se lit comme du texte courant,
     alors qu'il faut le reperer d'un coup d'oeil. */
  html[data-mobile="on"] .sup-ca {
    background: var(--bloc);
    border-radius: 11px;
    padding: 8px 9px;
    text-align: left;
    font-size: 13px; font-weight: 700; color: var(--text);
  }
  html[data-mobile="on"] .sup-ca::before {
    display: block; margin-bottom: 2px;
    font-size: 9px; font-weight: 800; letter-spacing: .5px;
    color: var(--text-light); text-transform: uppercase;
  }
  html[data-mobile="on"] .sup-ca:nth-of-type(2)::before { content: 'CA N-2'; }
  html[data-mobile="on"] .sup-ca:nth-of-type(3)::before { content: 'CA N-1'; }
  html[data-mobile="on"] .sup-ca.current::before { content: 'CA en cours'; }
  html[data-mobile="on"] .sup-ca.current {
    background: var(--accent-dark);
    color: var(--text);
  }

  /* Les trois boutons ne portaient qu'une icone et un `title`, que le tactile
     n'affiche jamais : une fleche circulaire, un caddie et une corbeille,
     sans un mot. Le libelle est ajoute en ::after — possible ici, ce sont des
     <button>, pas des <input>.
     nth-of-type est fiable pour eux : ce sont les seuls <button> de la ligne,
     dans l'ordre CGV / commande / retrait. */
  html[data-mobile="on"] .sup-row .v2-act-btn {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    height: 38px; width: auto; padding: 0 6px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface-tel);
    font-family: 'Nunito', sans-serif;
    font-size: 10.5px; font-weight: 800;
  }
  html[data-mobile="on"] .sup-row .v2-act-btn .ms { font-size: 17px; }
  html[data-mobile="on"] .sup-row .v2-act-btn::after {
    text-transform: uppercase; letter-spacing: .3px;
  }
  html[data-mobile="on"] .sup-row button:nth-of-type(1)::after { content: 'CGV'; }
  html[data-mobile="on"] .sup-row button:nth-of-type(2)::after { content: 'Commander'; }
  html[data-mobile="on"] .sup-row button:nth-of-type(3)::after { content: 'Retirer'; }

  /* Onglet Commandes : huit colonnes (n°, date, fournisseur, ref, livraison,
     statut, montant, actions). Meme traitement qu'au tableau de bord — chaque
     ligne devient une fiche.

     Placement explicite par nth-of-type : trois cellules partagent la classe
     ord-date (commande et livraison) ou n'en portent aucune (statut, actions).
     L'ordre des <td> du generateur ligne 1542 est donc contractuel. */
  html[data-mobile="on"] #t-ord .v2-tbl,
  html[data-mobile="on"] #t-ord .v2-tbl tbody { display: block; }
  html[data-mobile="on"] #t-ord .v2-tbl thead { display: none; }
  html[data-mobile="on"] #t-ord .v2-tbl tbody tr {
    display: grid; grid-template-columns: 1fr auto;
    column-gap: 10px; row-gap: 1px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border);
    align-items: baseline;
  }
  html[data-mobile="on"] #t-ord .v2-tbl td {
    display: block; padding: 0; border: none; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* fournisseur — montant */
  html[data-mobile="on"] #t-ord .v2-tbl td:nth-of-type(3) { grid-area: 1 / 1; font-size: 13.5px; font-weight: 600; }
  html[data-mobile="on"] #t-ord .v2-tbl td:nth-of-type(7) { grid-area: 1 / 2; }
  /* numero — statut */
  html[data-mobile="on"] #t-ord .v2-tbl td:nth-of-type(1) { grid-area: 2 / 1; }
  html[data-mobile="on"] #t-ord .v2-tbl td:nth-of-type(6) { grid-area: 2 / 2; }
  /* date de commande — date de livraison */
  html[data-mobile="on"] #t-ord .v2-tbl td:nth-of-type(2) { grid-area: 3 / 1; }
  html[data-mobile="on"] #t-ord .v2-tbl td:nth-of-type(5) { grid-area: 3 / 2; }
  /* reference — actions */
  html[data-mobile="on"] #t-ord .v2-tbl td:nth-of-type(4) { grid-area: 4 / 1; }
  html[data-mobile="on"] #t-ord .v2-tbl td:nth-of-type(8) { grid-area: 4 / 2; margin-top: 4px; }

  /* Barre d'outils de l'onglet : recherche et deux listes deroulantes a
     largeur figee (130 / 160 / 120px) qui debordaient. */
  html[data-mobile="on"] #t-ord .v2-toolbar { flex-wrap: wrap; row-gap: 8px; }
  html[data-mobile="on"] #t-ord .v2-sf { width: 100% !important; }
  html[data-mobile="on"] #t-ord .v2-sf input { width: 100% !important; }
  html[data-mobile="on"] #t-ord .v2-fselect { width: calc(50% - 3px) !important; }

  /* Onglet Rapport : la grille 1fr 340px est posee en style inline par le JS
     de la page, d'ou le !important — seule facon de la reprendre sans
     toucher au generateur. */
  html[data-mobile="on"] #t-rpt [style*="340px"] {
    grid-template-columns: 1fr !important;
  }
  html[data-mobile="on"] .rpt-kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  html[data-mobile="on"] .t-scoring-grid {
    grid-template-columns: 1fr; padding: 14px; gap: 14px;
  }

  /* ================================================================
     COMMANDES (commandes.html) — passe 1 : en-tete de saisie

     L'ecran de saisie de Claire. Traite en deux temps : ici l'en-tete
     (sous-menu, onglets, barre d'outils), qui est du CSS pur ; le catalogue
     lui-meme viendra seul, car il touche au rendu des lignes.

     Le sous-menu est une grille 1fr 1fr 1fr auto : Client, Fournisseur,
     Parametres, Total. Empiles tels quels, ces quatre blocs repoussent le
     catalogue hors de l'ecran — or c'est le catalogue qu'on vient utiliser.
     D'ou une disposition en deux colonnes pour ce qui est court, et un total
     mis a plat plutot qu'empile.
  ================================================================ */

  html[data-mobile="on"] .cmd-sub {
    grid-template-columns: 1fr;
    gap: 6px; padding: 7px 8px;
  }
  /* Fournisseur et Parametres : leurs libelles etaient empiles en colonne,
     ce qui donnait deux blocs hauts pour six valeurs courtes. En ligne, ils
     tiennent chacun sur une rangee — c'est l'essentiel de la place regagnee
     pour le catalogue, qui est ce qu'on vient reellement utiliser. */
  html[data-mobile="on"] .cmd-bloc {
    padding: 7px 9px;
    flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 5px 12px;
  }
  html[data-mobile="on"] .cmd-bloc-t {
    border-bottom: none; padding-bottom: 0; margin-bottom: 0;
    flex: 0 0 100%;
  }
  /* Le bloc Client garde sa disposition verticale : il porte la recherche
     et le nom de l'officine, qui ont besoin de toute la largeur. */
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:first-child { flex-direction: column; align-items: stretch; }
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:first-child .cmd-bloc-t { flex: initial; }

  /* ── Fournisseur : les conditions fondues en une ligne de service ──────

     R1, R2 et Marche occupaient trois rangees pour trois valeurs de deux
     caracteres. Meme traitement que la ligne prix/colis/EAN du catalogue :
     une seule ligne grise a separateurs, lue seulement si on la cherche.
     C'est le « PHYTONOR · franco 600 EUR » du mockup. */
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:nth-child(2) .cmd-row {
    display: inline-flex; align-items: baseline; gap: 3px;
  }
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:nth-child(2) .cmd-row:not(:last-child)::after {
    content: ' \00B7'; color: var(--text-xlight); margin-left: 4px;
  }
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:nth-child(2) .cmd-lbl { font-size: 9.5px; }
  html[data-mobile="on"] #selFournisseur {
    flex: 0 0 100%; height: 38px !important; font-size: 16px !important;
  }

  /* ── Parametres : les deux dates cote a cote, la reference dessous ─────

     Et surtout : ces trois champs portent font-size:11px EN STYLE INLINE.
     L'inline l'emporte sur la regle generale des 16px, donc « Ref. commande »
     declenchait encore le zoom iOS. D'ou le !important, seul moyen de
     reprendre la main sans toucher au balisage. */
  /* ⚠ minmax(0, 1fr) et NON 1fr. Une piste de grille en `1fr` vaut
     `minmax(auto, 1fr)` : son minimum est le min-content de son contenu. Or
     chaque rangee porte un `input`, dont le min-content est sa largeur
     intrinseque (une vingtaine de caracteres, ~170 px). Les deux pistes
     refusaient donc de descendre sous ~218 px chacune : le bloc Parametres
     mesurait 445 px de contenu pour 372 px disponibles, et debordait de la
     largeur de l'ecran — c'est ce qui rognait le cote droit de l'en-tete, et
     ce qui rendait la page defilable horizontalement, si bien qu'apres un
     repli l'en-tete apparaissait decale. Mesure avant/apres, de 360 a 430 px :
     454 px de contenu pour 360 a 430 disponibles -> exactement la largeur
     disponible. Le `min-width: 0` sur les rangees et les champs est la seconde
     moitie du meme mecanisme : sans lui, l'element de grille garde son
     min-content comme plancher. */
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:nth-child(3) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px;
  }
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:nth-child(3) .cmd-row { min-width: 0; }
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:nth-child(3) .cmd-row input { min-width: 0; }
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:nth-child(3) .cmd-bloc-t { grid-column: 1 / -1; }
  html[data-mobile="on"] .cmd-sub > .cmd-bloc:nth-child(3) .cmd-row:last-child { grid-column: 1 / -1; }
  /* Les deux interrupteurs partagent une rangee, et le nombre de livraisons occupe
     la sienne : sur telephone, chacune prend toute la largeur plutot que d'entrer
     dans une cellule de la grille a deux colonnes. Vise par ID et non par
     `:last-child` — la rangee du nombre est masquee la plupart du temps, si bien
     que `:last-child` designe tantot l'une tantot l'autre. */
  html[data-mobile="on"] .cmd-sub #rowToggles,
  html[data-mobile="on"] .cmd-sub #cadNbRow { grid-column: 1 / -1; }
  html[data-mobile="on"] .cmd-sub input {
    height: 38px !important; font-size: 16px !important;
  }

  /* ── Repli de l'en-tete ──────────────────────────────────────

     Pose par _initEnteteCommande() dans v2-nav.js. Le sous-menu entier
     disparaît derriere une ligne « Pharmacie du Marché · PHYTONOR », qui le
     rouvre au toucher — l'equivalent du changement d'ecran du mockup, sans
     scinder la page.

     La barre de resume reste collante sous les onglets : le client et le
     fournisseur en cours restent lisibles pendant qu'on descend le catalogue,
     ce qui est justement l'information qu'on veut garder sous les yeux quand
     on saisit une commande devant un comptoir. */
  /* Seuls les blocs de SAISIE se replient. Le total reste — c'est le chiffre
     qu'on surveille pendant qu'on remplit le catalogue, le replier avec le
     reste le faisait purement disparaitre de l'ecran. */
  html[data-mobile="on"] .cmd-sub.cmd-sub-replie > .cmd-bloc,
  html[data-mobile="on"] .cmd-sub.cmd-sub-replie > .cmd-search-bloc { display: none; }
  html[data-mobile="on"] .cmd-sub.cmd-sub-replie {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
  }
  html[data-mobile="on"] .cmd-sub.cmd-sub-replie .cmd-total-bloc { padding: 7px 12px; }
  html[data-mobile="on"] .cmd-sub.cmd-sub-replie .cmd-tot-val { font-size: 19px; }

  html[data-mobile="on"] .cmd-sub-resume {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 40px; padding: 0 12px;
    background: var(--bloc);
    border: none; border-bottom: 1px solid var(--border);
    font-family: inherit; font-size: 12.5px; font-weight: 800;
    color: var(--text); text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .cmd-sub-resume-txt {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-mobile="on"] .cmd-sub-chev {
    font-size: 20px; color: var(--text-light);
    transition: transform .18s ease;
  }
  /* Chevron vers le bas quand c'est replie (« il y a plus dessous »),
     vers le haut quand c'est ouvert (« on peut refermer »). */
  html[data-mobile="on"] .cmd-sub-resume:not(.est-replie) .cmd-sub-chev {
    transform: rotate(180deg);
  }

  /* Total : de bloc vertical aligne a droite a bandeau horizontal. Le
     montant reste l'element le plus gros de l'ecran — c'est le chiffre que
     le pharmacien regarde par-dessus l'epaule. */
  html[data-mobile="on"] .cmd-total-bloc {
    grid-column: 1 / -1;
    min-width: 0;
    flex-direction: row; align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 8px 12px;
  }
  html[data-mobile="on"] .cmd-tot-divider { display: none; }
  html[data-mobile="on"] .cmd-tot-val { font-size: 22px; }
  html[data-mobile="on"] .cmd-tot-stats { margin-top: 0; gap: 14px; }

  /* Onglets rendus collants : ils sortaient de l'ecran des qu'on descendait
     dans le catalogue, et il fallait remonter toute la liste pour atteindre
     le recapitulatif. */
  html[data-mobile="on"] .cmd-tabs {
    position: sticky; top: 0; z-index: 20;
  }

  /* Onglets : quatre libelles dont « Recapitulatif & Validation ». Meme
     traitement que les onglets de la fiche pharmacie — defilement lateral
     plutot que compression illisible. */
  html[data-mobile="on"] .cmd-tabs {
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html[data-mobile="on"] .cmd-tabs::-webkit-scrollbar { display: none; }
  html[data-mobile="on"] .cmd-tab {
    padding: 10px 12px; font-size: 12px;
    white-space: nowrap; flex-shrink: 0;
  }

  /* Barre d'outils du catalogue : recherche, indicateur de franco et
     interrupteur PCB tenaient sur une ligne de 1200px. Le franco est
     precieux en officine — il reste visible, sur sa propre ligne.

     Le conteneur est un div sans classe, en style inline display:flex sans
     flex-wrap : sans autoriser le retour sur le PARENT, les regles posees
     sur les enfants ne serviraient a rien. Une classe .cmd-cat-toolbar lui a
     ete ajoutee plutot que de le viser par :has() — un selecteur non reconnu
     invaliderait toute la regle, et une accroche explicite se retrouve. */
  html[data-mobile="on"] .cmd-cat-toolbar { flex-wrap: wrap; row-gap: 8px; }
  html[data-mobile="on"] .cmd-cat-toolbar .v2-sf {
    max-width: none !important; flex: 1 1 100% !important;
  }
  html[data-mobile="on"] #cmdFrancoBadge { margin-left: 0 !important; }
  html[data-mobile="on"] #pcbToggleWrap { margin-left: 0 !important; }

  /* ================================================================
     COMMANDES — passe 2 : le catalogue

     L'ecran que Claire utilise en officine. Neuf colonnes avec saisie :
     EAN, produit, prix, PCB, quantite, UG, R1, R2, total.

     Fait ENTIEREMENT en CSS, sans toucher au rendu ni a la logique :

     - Les <tr> sont conserves, donc les neuf selecteurs tr[data-produitid]
       de la page continuent de les trouver, et bindProductRowEvents(),
       qui accroche par classe (.inpQty, .qty-plus, .inpR1...), n'est pas
       concerne. Aucune ligne de JS modifiee.
     - Chaque cellule porte deja une classe propre (col-ean, col-desc...),
       donc aucun nth-of-type : le placement ne depend pas de l'ordre des
       cellules. Ajouter ou deplacer une colonne dans le generateur ne
       decalera rien ici.
     - Le libelle disparu avec l'en-tete est rendu par ::before sur la
       CELLULE, pas sur le champ : un <td> accepte un pseudo-element, un
       <input> non. C'est ce qui evite ici le <label> qu'il a fallu ajouter
       aux fournisseurs.

     Disposition, en deux zones. En haut : prix et PCB dans une colonne
     etroite a GAUCHE, descriptif a droite — ce sont les deux chiffres qu'on
     verifie en lisant le nom du produit. En bas : quantite, UG, remises,
     total. La quantite est le seul geste frequent, elle a les plus grosses
     cibles.
  ================================================================ */

  html[data-mobile="on"] .commandes-table:not(.recap-table),
  html[data-mobile="on"] .commandes-table:not(.recap-table) tbody { display: block; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) thead { display: none; }

  /* Une seule carte pour toute la liste, lignes separees par un filet — et
     non une carte par produit. Avec un millier de references, mille cartes
     detachees font une bouillie ; le mockup empile des lignes dans un seul
     bloc, c'est plus dense et plus calme. */
  html[data-mobile="on"] .commandes-table:not(.recap-table) tbody tr {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: center;
    gap: 3px 6px;
    padding: 10px 13px;
    margin: 0;
    background: var(--surface-tel);
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tbody tr.is-active {
    background: var(--accent-dark);
  }
  /* width:auto indispensable : les cellules portent des largeurs fixes
     (col-ean 110px, col-qty 90px...) prevues pour le tableau. Conservees,
     elles debordent de leur colonne de grille et font glisser la page
     lateralement — ce qui, sur iOS, se lit comme un zoom impossible a
     annuler. */
  html[data-mobile="on"] .commandes-table:not(.recap-table) td {
    display: block; padding: 0; width: auto; min-width: 0;
    text-align: left !important;
  }

  /* ── Rangee 1 : le nom, et rien d'autre ──

     Grille de HUIT colonnes egales : seul moyen d'avoir des largeurs
     independantes d'une rangee a l'autre. Avec des colonnes en `auto`, la
     largeur du prix imposait la sienne a la remise juste dessous, et rien ne
     tombait juste. Chaque element occupe donc un NOMBRE de colonnes. */
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-desc {
    grid-area: 1 / 1 / 2 / 6;
    font-size: 13px; font-weight: 700; line-height: 1.3;
  }

  /* ── Rangee 2 : prix, colis et EAN fondus en UNE ligne grise ───────────

     C'etait l'erreur de la version precedente : trois champs libelles,
     encadres, de meme poids que le reste. Le mockup en fait une seule ligne
     de service — « 2,35 EUR HT · colis 12 · 3400930001234 » — qu'on lit
     seulement si on la cherche. Les separateurs remplacent les libelles.

     Le prix reste un champ de saisie, contrairement au mockup ou il est
     fige : c'est une fonction reelle de l'application, on ne la retire pas
     pour faire joli. Il est juste rendu discret. */
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-price { grid-area: 2 / 1 / auto / 3; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-small { grid-area: 2 / 3 / auto / 5; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-ean   { grid-area: 2 / 5 / auto / 6; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-small,
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-ean {
    font-size: 10.5px; font-weight: 600; color: var(--text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-small::before { content: 'colis '; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-small::after,
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-price::after {
    content: ' \00B7'; color: var(--text-xlight);
  }
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-price {
    display: flex; align-items: center; gap: 3px;
  }
  html[data-mobile="on"] .inpPrix {
    width: 72px; height: 26px; padding: 0 5px;
    font-size: 11px; font-weight: 700; text-align: left;
    border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: var(--text-light);
  }
  html[data-mobile="on"] .inpPrix:focus {
    background: var(--white); border-color: var(--accent-deep);
    color: var(--text);
  }

  /* ── Colonne de droite : le pas-a-pas, sur les deux rangees ────────────

     Le seul geste frequent de l'ecran. Boutons de 20px a l'origine, tres en
     dessous de ce qu'un doigt vise sans se tromper — et une erreur de
     quantite part chez le fournisseur.

     Le « + » est plein, le « - » seulement cercle : l'action courante se
     distingue de l'action de correction sans qu'on ait a lire. */
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-qty { grid-area: 1 / 6 / 3 / 9; }
  html[data-mobile="on"] .qty-stepper {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 1px; width: 100%;
    background: transparent; border: none;
  }
  html[data-mobile="on"] .qty-stepper .qty-btn {
    width: 36px; min-width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 10px;
    font-size: 19px; font-weight: 700;
  }
  html[data-mobile="on"] .qty-stepper .qty-minus {
    border: 1px solid var(--border-md); background: transparent;
    color: var(--text);
  }
  html[data-mobile="on"] .qty-stepper .qty-plus {
    border: none; background: var(--accent-deep); color: #fff;
  }
  html[data-mobile="on"] .qty-stepper .inpQty {
    width: 38px; flex: 0 0 38px; height: 36px;
    border: none; background: transparent;
    font-size: 15px; font-weight: 800; text-align: center;
  }

  /* ── Zone repliee : n'apparait qu'une fois une quantite saisie ─────────

     C'est le principe que j'avais manque. Remises, UG et total ne servent
     que sur une ligne commandee — sur mille references, en afficher les
     champs partout noie le nom du produit, qui est la seule chose qu'on
     cherche en parcourant la liste.

     tr.is-active est deja pose par la page (ligne 2110 : toggle sur
     quantite > 0), le repli ne demande donc aucun JS. En contrepartie,
     cette regle depend de ce nom de classe : le renommer la casserait. */
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-ug,
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-r1,
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-r2,
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-total { display: none; }

  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-r1,
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-r2,
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-ug,
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-total {
    display: flex; flex-direction: column;
    align-items: stretch; justify-content: flex-end; gap: 2px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--border);
  }
  /* ── Zone repliee : tout sur UNE rangee ───────────────────────────

     R1, R2, UG et sous-total se partagent les huit colonnes, deux chacun.
     Les libelles passent AU-DESSUS des champs plutot que devant : devant,
     ils mangeaient 26px sur des cases qui n'en font que 82.

     Le mockup remplace la remise par quatre pastilles (0 / 5 / 10 / 15 %).
     Je ne le reprends PAS : figer quatre taux mettrait une regle de remise
     dans le client, alors que le prix est resolu au serveur et que la remise
     maximale s'y decide. Ce serait le debut de la duplication du moteur. */
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-r1    { grid-area: 3 / 1 / auto / 3; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-r2    { grid-area: 3 / 3 / auto / 5; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-ug    { grid-area: 3 / 5 / auto / 7; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-total {
    grid-area: 3 / 7 / auto / 9;
    align-items: flex-end;
    font-size: 14px; font-weight: 800;
  }

  /* Libelles au-dessus, minuscules — la place est comptee. */
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-r1::before,
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-r2::before,
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-ug::before,
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-total::before {
    font-size: 8.5px; font-weight: 800; letter-spacing: .4px;
    color: var(--text-light); text-transform: uppercase;
    line-height: 1;
  }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-r1::before    { content: 'R1'; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-r2::before    { content: 'R2'; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-ug::before    { content: 'UG'; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tr.is-active td.col-total::before { content: 'Sous-total'; }

  /* Le « % » pose a demeure a droite du champ : un caractere de moins a
     taper, et le champ dit ce qu'il attend sans libelle supplementaire. */
  html[data-mobile="on"] .remise-wrap {
    width: 100%; min-width: 0; position: relative;
  }
  html[data-mobile="on"] .remise-wrap::after {
    content: '%';
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 700; color: var(--text-light);
    pointer-events: none;
  }
  html[data-mobile="on"] .remise-wrap input,
  html[data-mobile="on"] .cat-r-inp {
    width: 100%; height: 36px; padding: 0 19px 0 8px;
    text-align: left; font-size: 16px; font-weight: 700;
    background: var(--white);
    border: 1px solid var(--border-md); border-radius: var(--r-sm);
  }

  /* UG : meme pas-a-pas que la quantite, en plus compact — deux colonnes au
     lieu de trois. */
  html[data-mobile="on"] .ug-stepper {
    display: flex; align-items: center; gap: 0; width: 100%;
    justify-content: space-between;
    background: transparent; border: none;
  }
  html[data-mobile="on"] .ug-stepper .qty-btn {
    width: 30px; min-width: 30px; height: 36px; flex: 0 0 30px;
    border: 1px solid var(--border-md); border-radius: 8px;
    background: transparent; color: var(--text);
    font-size: 17px; font-weight: 700;
  }
  html[data-mobile="on"] .ug-stepper .inpUG {
    flex: 1 1 0; min-width: 0; height: 36px;
    border: none; background: transparent;
    font-size: 15px; font-weight: 800; text-align: center;
  }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tbody tr.row-rupture {
    border-left: 3px solid #c0632b;
  }

  /* En-tetes de categorie : des tables dont les colonnes vides servent
     d'accordeon. En inline-block, le chevron passait a la ligne ou se
     decalait selon la longueur du titre — les « triangles » de travers.
     En flex, le titre prend la place restante et le chevron reste cale a
     droite, quelle que soit la longueur. */
  /* ⚠ `.commandes-table` est repete a dessein, il n'est pas decoratif.
     Scoper les regles du catalogue en `:not(.recap-table)` leur a ajoute une
     classe, donc de la specificite : `…commandes-table:not(.recap-table) thead
     { display: none }` s'est mis a l'emporter sur cette regle, et TOUS les
     en-tetes de categorie ont disparu de l'ecran — sans erreur, sans trace.
     Repris ici a specificite egale, et place plus bas dans le fichier, donc
     gagnant. Trouve au rendu, pas a la lecture. */
  html[data-mobile="on"] .cat-header-table.commandes-table,
  html[data-mobile="on"] .cat-header-table.commandes-table thead { display: block; }
  html[data-mobile="on"] .cat-header-table tr {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px;
  }
  html[data-mobile="on"] .cat-header-table th { display: none; }
  html[data-mobile="on"] .cat-header-table th.col-desc {
    display: block; flex: 1; min-width: 0;
    width: auto; padding: 0; border: none; text-align: left;
  }
  html[data-mobile="on"] .cat-header-table th.col-total {
    display: flex; align-items: center; justify-content: flex-end;
    flex: 0 0 24px; width: 24px !important;
    padding: 0; border: none;
  }
  html[data-mobile="on"] .cat-chevron { font-size: 22px; }
  html[data-mobile="on"] .cat-title { font-size: 13px; }

  /* ================================================================
     CATEGORIES — un intertitre, pas un bandeau colore

     L'en-tete de categorie etait une bande `--bloc-2` posee entre des
     cartes blanches : deux fonds differents empiles, ou l'oeil lit un
     bloc plein la ou il n'y a qu'un titre de section. Sur poste, dans
     un tableau dense, la bande sert de reperage ; sur telephone, ou les
     lignes sont deja des cartes detachees, elle ne separe plus rien —
     elle ajoute une couleur.

     Il devient donc un intertitre COLLANT sur le fond de page : on sait
     en permanence dans quelle categorie on se trouve pendant qu'on
     descend une marque de mille produits, et il ne reste qu'un seul fond
     a l'ecran. Le top vaut la hauteur des onglets, eux aussi collants,
     sinon l'un passerait sous l'autre.
  ================================================================ */
  html[data-mobile="on"] .cat-header-table thead tr {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  html[data-mobile="on"] .cat-block:not(:first-child) .cat-header-table thead tr {
    border-top: 1px solid var(--border);
  }
  /* 41 px = la hauteur mesuree de la barre d'onglets, elle-meme collante.
     Une valeur trop faible ferait passer l'intertitre SOUS les onglets ;
     trop forte, elle laisserait une bande de fond entre les deux. A revoir
     si le remplissage ou la taille de `.cmd-tab` change. */
  html[data-mobile="on"] .cat-header-table {
    position: sticky; top: 41px; z-index: 8;
  }
  html[data-mobile="on"] .cat-title {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-light);
  }
  html[data-mobile="on"] .cat-meta { font-size: 10px; }
  html[data-mobile="on"] .cat-chevron { color: var(--text-light); }

  /* ================================================================
     ONGLETS — quatre parts egales, plus de defilement lateral

     Les quatre onglets defilaient horizontalement : « Recapitulatif &
     Validation » commencait donc hors de l'ecran, et c'est l'onglet ou
     l'on VALIDE. Un ecran de saisie dont l'action finale demande de
     faire glisser une barre pour etre decouverte est un ecran rate.

     Quatre parts egales, libelles courts (le libelle long reste sur
     poste, cf. .tab-long / .tab-court dans commandes.html) : les quatre
     sont visibles d'un coup, chacun avec une cible de 44 px de haut.
  ================================================================ */
  html[data-mobile="on"] .cmd-tabs {
    display: flex; overflow-x: visible; padding: 0;
  }
  html[data-mobile="on"] .cmd-tab {
    flex: 1 1 0; min-width: 0;
    padding: 11px 2px; font-size: 11.5px;
    display: flex; align-items: center; justify-content: center; gap: 3px;
    text-align: center;
  }
  html[data-mobile="on"] .cmd-tab .ms { margin-right: 0 !important; }
  html[data-mobile="on"] .tab-long { display: none; }
  html[data-mobile="on"] .tab-court { display: inline; }

  /* ================================================================
     RECAPITULATIF — sa propre mise en carte

     Il porte `class="commandes-table"`, comme le catalogue, et heritait
     donc de la grille en huit colonnes concue pour les colonnes DU
     CATALOGUE. Or ses colonnes ne sont ni les memes, ni dans le meme
     ordre, et ses cellules n'ont pas les classes `col-*` que ces regles
     visent : les champs se superposaient, le prix remise passait sous le
     total, la croix de suppression sortait de l'ecran. Rendu verifie
     sous Chromium avant et apres.

     D'ou `.recap-table`, qui sort le recapitulatif de ces regles (elles
     sont desormais en `:not(.recap-table)`) et lui donne sa propre carte.
     Quatre rangees : le produit et sa suppression, la ligne grise
     EAN/PU remise, les trois champs de saisie, puis les remises et le
     total. Les `grid-area` sont explicites : sans elles le placement
     automatique suivrait l'ordre du DOM, qui n'est pas l'ordre voulu.
  ================================================================ */
  html[data-mobile="on"] .recap-table,
  html[data-mobile="on"] .recap-table tbody { display: block; }
  html[data-mobile="on"] .recap-table thead { display: none; }
  html[data-mobile="on"] .recap-table tbody tr {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px 8px; align-items: center;
    background: var(--white, #fff);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 11px 12px; margin-bottom: 8px;
  }
  html[data-mobile="on"] .recap-table td {
    display: block; border: none; padding: 0; min-width: 0;
  }
  /* Rangee 1 : le produit, et la croix qui le retire */
  html[data-mobile="on"] .recap-table td:nth-of-type(2) {
    grid-area: 1 / 1 / auto / 6; font-size: 13.5px; font-weight: 700;
  }
  html[data-mobile="on"] .recap-table td:nth-of-type(10) {
    grid-area: 1 / 6 / auto / 7; justify-self: end;
  }
  /* Rangee 2 : EAN et prix unitaire remise, en ligne de service grise */
  html[data-mobile="on"] .recap-table td:nth-of-type(1) {
    grid-area: 2 / 1 / auto / 4; font-size: 10.5px; color: var(--text-light);
  }
  html[data-mobile="on"] .recap-table td:nth-of-type(8) {
    grid-area: 2 / 4 / auto / 7; font-size: 10.5px; color: var(--text-light);
    text-align: right;
  }
  html[data-mobile="on"] .recap-table td:nth-of-type(8)::before { content: 'PU remisé '; }
  /* Rangee 3 : quantite, UG, prix — les trois champs qu'on retouche */
  html[data-mobile="on"] .recap-table td:nth-of-type(3) { grid-area: 3 / 1 / auto / 3; }
  html[data-mobile="on"] .recap-table td:nth-of-type(4) { grid-area: 3 / 3 / auto / 5; }
  html[data-mobile="on"] .recap-table td:nth-of-type(5) { grid-area: 3 / 5 / auto / 7; }
  /* Rangee 4 : remises, puis le total de ligne */
  html[data-mobile="on"] .recap-table td:nth-of-type(6) { grid-area: 4 / 1 / auto / 3; }
  html[data-mobile="on"] .recap-table td:nth-of-type(7) { grid-area: 4 / 3 / auto / 5; }
  html[data-mobile="on"] .recap-table td:nth-of-type(9) {
    grid-area: 4 / 5 / auto / 7; text-align: right;
    font-size: 15px; font-weight: 800;
  }
  /* Libelles au-dessus et non devant : devant, ils mangeaient la moitie
     d'une case de 110 px. Meme choix que la ligne produit du catalogue. */
  html[data-mobile="on"] .recap-table td:nth-of-type(3)::before,
  html[data-mobile="on"] .recap-table td:nth-of-type(4)::before,
  html[data-mobile="on"] .recap-table td:nth-of-type(5)::before,
  html[data-mobile="on"] .recap-table td:nth-of-type(6)::before,
  html[data-mobile="on"] .recap-table td:nth-of-type(7)::before,
  html[data-mobile="on"] .recap-table td:nth-of-type(9)::before {
    display: block; margin-bottom: 2px;
    font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-light);
  }
  html[data-mobile="on"] .recap-table td:nth-of-type(3)::before { content: 'Qté'; }
  html[data-mobile="on"] .recap-table td:nth-of-type(4)::before { content: 'UG'; }
  html[data-mobile="on"] .recap-table td:nth-of-type(5)::before { content: 'Prix'; }
  html[data-mobile="on"] .recap-table td:nth-of-type(6)::before { content: 'R1 %'; }
  html[data-mobile="on"] .recap-table td:nth-of-type(7)::before { content: 'R2 %'; }
  html[data-mobile="on"] .recap-table td:nth-of-type(9)::before { content: 'Total'; }
  /* Les champs portent leur largeur et leur taille EN STYLE INLINE dans
     renderRecapCommande : l'inline l'emporte sur toute feuille, d'ou les
     !important. 16 px est le seuil sous lequel iOS zoome a la saisie. */
  html[data-mobile="on"] .recap-table input {
    width: 100% !important; height: 38px !important;
    font-size: 16px !important; text-align: center !important;
    padding: 0 6px !important;
  }

  /* Pied du recapitulatif : le commentaire et les trois boutons tenaient
     sur une rangee de 900 px. Empiles, et le bouton de confirmation en
     pleine largeur — c'est l'action de l'ecran. */
  html[data-mobile="on"] .recap-footer {
    flex-direction: column; align-items: stretch; gap: 9px; padding: 10px 12px;
  }
  html[data-mobile="on"] .recap-comment { width: auto; min-height: 44px; font-size: 16px; }
  html[data-mobile="on"] .recap-footer > div { width: 100%; }
  html[data-mobile="on"] #btnConfirmOrder { width: 100%; height: 46px; font-size: 14px !important; }
  html[data-mobile="on"] #btnSaveDraft,
  html[data-mobile="on"] #btnSaveDevis { height: 40px; font-size: 12.5px !important; }

  /* ================================================================
     TRADE — deja une liste de cartes, on ne touche qu'a la lisibilite

     C'est le seul des quatre onglets qui se lisait deja comme un ecran
     de telephone : des cartes, pas un tableau. Rendu verifie a 390 px
     avant d'y toucher — rien n'y debordait. Seuls les corps de texte
     (11-12 px) passaient sous le seuil de confort en officine, et les
     puces de condition etaient trop petites pour etre lues d'un coup
     d'oeil. Aucune restructuration : ce serait chercher un probleme.
  ================================================================ */
  html[data-mobile="on"] .ctr-wrap { padding: 12px; }
  html[data-mobile="on"] .ctr-hint { font-size: 12.5px; margin-bottom: 10px; }
  html[data-mobile="on"] .ctr-card { padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; }
  html[data-mobile="on"] .ctr-title { font-size: 15px; line-height: 1.25; flex: 0 0 100%; margin-top: 2px; }
  html[data-mobile="on"] .ctr-meta { font-size: 12.5px; margin-top: 2px; }
  html[data-mobile="on"] .ctr-when, html[data-mobile="on"] .ctr-badge { font-size: 11px; padding: 3px 9px; }
  html[data-mobile="on"] .ctr-cond { font-size: 12.5px; padding: 4px 10px; margin-top: 8px; }
  html[data-mobile="on"] .ctr-card > div[style*="font-size:12px"] { font-size: 13px !important; line-height: 1.45; }
  html[data-mobile="on"] .ctr-empty { font-size: 14px; padding: 48px 24px; line-height: 1.5; }

  /* ================================================================
     COMMANDES — PARCOURS PAR ÉTAPES (09/09/2026)

     Décision : la version téléphone ne montre plus la page de poste
     repliée, elle enchaîne des écrans courts — client, marque,
     catalogue, commande — avec une barre panier persistante à la place
     de l'onglet Récapitulatif. Le balisage de commandes.html ne change
     pas : mobile-commande.js pose `data-etape` sur <html> et enveloppe
     les fonctions de la page ; ce bloc n'affiche que la partie qui
     correspond à l'étape.

     Tout ce qui suit est conditionné à `data-etape` : sans lui (le
     fichier absent, ou une autre page), les règles du repli d'en-tête
     ci-dessus restent seules en vigueur. C'est ce qui permet le retour
     arrière : retirer le script suffit.

     La sauvegarde de la version « poste repliée » : tag mobile-v1-replie.
  ================================================================ */

  /* Coquille : quatre rangées — en-tête, formulaire, corps, barre
     panier. Les deux rangées du milieu se partagent la hauteur selon
     l'étape ; celle qui n'est pas affichée est réduite à zéro. */
  html[data-mobile="on"][data-etape] .cmd-wrap {
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    overflow: hidden;
  }
  html[data-mobile="on"][data-etape="catalogue"] .cmd-wrap,
  html[data-mobile="on"][data-etape="trade"] .cmd-wrap,
  html[data-mobile="on"][data-etape="import"] .cmd-wrap { grid-template-rows: auto 0 minmax(0, 1fr) auto; }
  html[data-mobile="on"][data-etape="client"] .cmd-wrap,
  html[data-mobile="on"][data-etape="marque"] .cmd-wrap { grid-template-rows: auto minmax(0, 1fr) 0 auto; }
  html[data-mobile="on"][data-etape="commande"] .cmd-wrap { grid-template-rows: auto auto minmax(0, 1fr) auto; }

  html[data-mobile="on"][data-etape] .cmd-wrap > form { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  html[data-mobile="on"][data-etape] .cmd-body { min-height: 0; }

  /* L'ancien repli et les onglets n'existent plus dans ce parcours. */
  html[data-mobile="on"][data-etape] .cmd-sub-resume,
  html[data-mobile="on"][data-etape] .cmd-tabs { display: none !important; }

  /* Le sous-menu perd sa grille : chaque étape n'en montre qu'un bloc,
     en pleine largeur, sans cadre. */
  html[data-mobile="on"][data-etape] .cmd-sub {
    display: block; padding: 0; gap: 0;
    background: transparent; border: none;
  }
  html[data-mobile="on"][data-etape] .cmd-sub > * { display: none !important; }
  html[data-mobile="on"][data-etape] .cmd-sub .cmd-bloc-t { display: none; }

  /* ── En-tête d'étape ── */
  html[data-mobile="on"] .mob-entete {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 8px 6px 4px;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  html[data-mobile="on"] .mob-retour {
    width: 44px; height: 44px; flex-shrink: 0;
    border: none; background: none; color: var(--text);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .mob-retour[hidden] { display: none; }
  html[data-mobile="on"] .mob-retour .ms { font-size: 24px; }
  html[data-mobile="on"] .mob-entete-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-left: 4px; }
  html[data-mobile="on"] .mob-entete-titre {
    font-size: 15px; font-weight: 800;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-mobile="on"] .mob-entete-sous {
    font-size: 12px; color: var(--text-light);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-mobile="on"] .mob-entete-action {
    border: none; background: none; color: var(--accent-deep);
    font-family: inherit; font-size: 13px; font-weight: 800;
    padding: 10px 8px; -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .mob-entete-action[hidden] { display: none; }
  html[data-mobile="on"][data-etape="client"] .mob-retour { visibility: hidden; }

  /* ── Étape CLIENT ──
     Le bloc Client seul : la recherche en haut, et la liste de résultats
     — l'ancien menu flottant — devient la page elle-même. */
  html[data-mobile="on"][data-etape="client"] .cmd-sub > .cmd-bloc:first-child {
    display: flex !important; flex-direction: column; gap: 10px;
    padding: 10px 12px 16px; background: transparent; border: none;
  }
  html[data-mobile="on"][data-etape="client"] .cmd-sub > .cmd-bloc:first-child .v2-sf {
    height: 48px; padding: 0 14px !important; border-radius: 12px;
    background: var(--white); border: 1.5px solid var(--border-md);
  }
  html[data-mobile="on"][data-etape="client"] .cmd-sub > .cmd-bloc:first-child .v2-sf input { font-size: 16px !important; height: 100%; }
  html[data-mobile="on"][data-etape="client"] #clientInfoBlock { display: none !important; }
  html[data-mobile="on"][data-etape="client"] #pharmDropdown {
    position: static !important; max-height: none !important;
    margin-top: 10px; box-shadow: none !important;
    border-radius: 14px !important; overflow: hidden;
  }
  html[data-mobile="on"][data-etape="client"] #pharmDropdown > div {
    padding: 13px 14px !important; font-size: 14.5px !important;
    min-height: 56px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
  }
  html[data-mobile="on"][data-etape="client"] #pharmDropdown > div > div:last-child { font-size: 12px !important; }
  html[data-mobile="on"] .mob-liste-titre {
    padding: 8px 14px 4px !important; min-height: 0 !important;
    font-size: 10.5px !important; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-light);
    border-bottom: none !important;
  }
  html[data-mobile="on"] .mob-ph-nom { font-weight: 800; }
  html[data-mobile="on"] .mob-ph-sous { font-size: 12px; color: var(--text-light); }

  /* ── Étape MARQUE ──
     Le <select> reste dans le DOM (c'est lui que la page écoute), mais
     c'est une liste touchable qui le pilote. R1/R2/Marché migrent dans
     l'en-tête du catalogue. */
  html[data-mobile="on"][data-etape="marque"] .cmd-sub > .cmd-bloc:nth-child(2) {
    display: flex !important; flex-direction: column;
    padding: 10px 12px 16px; background: transparent; border: none;
  }
  html[data-mobile="on"][data-etape="marque"] #selFournisseur,
  html[data-mobile="on"][data-etape="marque"] .cmd-sub > .cmd-bloc:nth-child(2) .cmd-row { display: none !important; }
  html[data-mobile="on"] .mob-marques {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 14px; padding: 0 12px;
  }
  html[data-mobile="on"] .mob-marque {
    display: flex; align-items: center; gap: 12px;
    min-height: 60px; padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .mob-marque:last-child { border-bottom: none; }
  html[data-mobile="on"] .mob-marque:active { background: var(--bloc); }
  html[data-mobile="on"] .mob-marque-ini {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: var(--bloc); color: var(--text-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
  }
  html[data-mobile="on"] .mob-marque-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  html[data-mobile="on"] .mob-marque-nom { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; }
  html[data-mobile="on"] .mob-marque-sous { font-size: 12px; color: var(--text-light); }
  html[data-mobile="on"] .mob-badge-trade {
    font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 8px;
    background: rgba(233,161,48,.16); color: #9a6510;
  }
  html[data-mobile="on"] .mob-chev { color: var(--text-light); font-size: 22px; }
  html[data-mobile="on"] .mob-vide { padding: 40px 20px; text-align: center; color: var(--text-light); font-size: 14px; }

  /* ── Étape CATALOGUE ── */
  html[data-mobile="on"][data-etape="catalogue"] .cmd-cat-toolbar {
    padding: 8px 12px 6px !important; gap: 8px; background: var(--bg) !important; border-bottom: none !important;
  }
  html[data-mobile="on"][data-etape="catalogue"] .cmd-cat-toolbar .v2-sf {
    height: 46px; border-radius: 12px; padding: 0 12px 0 14px !important;
    background: var(--white); border: 1.5px solid var(--border-md);
    display: flex; align-items: center; gap: 8px;
  }
  html[data-mobile="on"][data-etape="catalogue"] .cmd-cat-toolbar .v2-sf input { font-size: 16px !important; height: 100%; flex: 1; min-width: 0; }
  html[data-mobile="on"] .mob-photo {
    width: 40px; height: 40px; margin-right: -6px; flex-shrink: 0;
    border: none; background: none; color: var(--text-light);
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .mob-photo .ms { font-size: 22px; }
  /* Le franco est dans l'en-tête d'étape ; l'interrupteur PCB reste — le
     débridage doit rester à portée de main (décision du 09/09). */
  html[data-mobile="on"][data-etape="catalogue"] #cmdFrancoBadge { display: none !important; }
  /* Le PCB a quitté la barre (une rangée pour un interrupteur) : il vit
     dans la feuille d'options ; débrayé, une note le rappelle. */
  html[data-mobile="on"][data-etape] #pcbToggleWrap { display: none !important; }
  html[data-mobile="on"] .mob-pcb-note {
    display: flex; align-items: center; gap: 8px;
    margin: 0 12px 8px; padding: 8px 12px; border-radius: 10px;
    background: rgba(233,161,48,.14); color: #9a6510;
    font-size: 12px; font-weight: 700;
  }
  html[data-mobile="on"] .mob-pcb-note[hidden] { display: none; }
  html[data-mobile="on"] .mob-pcb-note .mob-pcb-txt { flex: 1; }
  html[data-mobile="on"] .mob-pcb-note .ms { font-size: 18px; }
  html[data-mobile="on"] .mob-pcb-note button {
    border: none; background: none; color: #9a6510; text-decoration: underline;
    font-family: inherit; font-size: 12px; font-weight: 800; padding: 6px 0 6px 6px;
  }
  /* Dans le parcours par étapes, les onglets n'existent plus : les
     intertitres de catégorie collent en haut de la zone, sinon les 41 px
     prévus pour la barre d'onglets cachent la première ligne de produits. */
  html[data-mobile="on"][data-etape] #zoneCatalogueCommande .cat-header-table { top: 0; }

  html[data-mobile="on"] .mob-puces {
    display: flex; gap: 8px; padding: 2px 12px 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    background: var(--bg);
  }
  html[data-mobile="on"] .mob-puces::-webkit-scrollbar { display: none; }
  html[data-mobile="on"] .mob-puces[hidden] { display: none; }
  html[data-mobile="on"] .mob-puce {
    height: 34px; padding: 0 14px; border-radius: 17px; flex-shrink: 0;
    font-family: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap;
    background: var(--white); color: var(--text); border: 1.5px solid var(--border-md);
    -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .mob-puce.active { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }
  html[data-mobile="on"] .cat-block[hidden] { display: none; }

  html[data-mobile="on"] .mob-trade-lien {
    display: flex; align-items: center; gap: 8px;
    margin: 0 12px 8px; padding: 9px 12px; border-radius: 10px;
    border: none; background: rgba(233,161,48,.14); color: #9a6510;
    font-family: inherit; font-size: 12.5px; font-weight: 800; text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .mob-trade-lien[hidden] { display: none; }
  html[data-mobile="on"] .mob-trade-lien .mob-trade-txt { flex: 1; }
  html[data-mobile="on"] .mob-trade-lien .ms { font-size: 18px; }

  /* ── Barre panier ──
     Toujours en bas du catalogue, au-dessus de la barre de navigation.
     C'est elle qui remplace l'onglet Récapitulatif : le montant reste
     sous les yeux, la validation est à un doigt. */
  html[data-mobile="on"] .mob-panier {
    display: none;
    align-items: center; gap: 12px;
    padding: 9px 12px 10px;
    background: var(--bloc); border-top: 1px solid var(--border);
  }
  html[data-mobile="on"][data-etape="catalogue"] .mob-panier { display: flex; }
  html[data-mobile="on"] .mob-panier-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  html[data-mobile="on"] .mob-panier-lbl {
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-light);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-mobile="on"] .mob-panier-tot { font-size: 21px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
  html[data-mobile="on"] .mob-panier-btn {
    height: 46px; padding: 0 12px 0 16px; border-radius: 12px; flex-shrink: 0;
    border: none; background: var(--accent); color: var(--text);
    font-family: inherit; font-size: 14px; font-weight: 800;
    display: flex; align-items: center; gap: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.10);
    -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .mob-panier.est-vide .mob-panier-btn { background: var(--btn); color: var(--text-light); box-shadow: none; }
  html[data-mobile="on"] .mob-panier-btn .ms { font-size: 20px; }

  /* ── Étape COMMANDE ──
     Le récapitulatif (déjà en cartes), précédé des détails repliés et du
     total. Livraison, référence et commentaire se touchent rarement :
     une ligne les résume, un toucher les déplie (décision du 09/09). */
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-bloc:nth-child(3),
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-total-bloc { display: flex !important; }
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-total-bloc {
    margin: 10px 12px 0; border-radius: 12px;
  }
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-bloc:nth-child(3) {
    display: flex !important; flex-direction: column; gap: 0;
    margin: 8px 12px 0; padding: 0;
    background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  }
  html[data-mobile="on"] .mob-details-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 48px; padding: 8px 12px 8px 14px;
    border: none; background: none; color: var(--text);
    font-family: inherit; font-size: 13px; font-weight: 800; text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .mob-details-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-mobile="on"] .mob-details-btn .ms { color: var(--text-light); transition: transform .18s ease; }
  html[data-mobile="on"] .cmd-bloc.mob-ouvert .mob-details-btn .ms { transform: rotate(180deg); }
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-bloc:nth-child(3) .cmd-row { display: none; }
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-bloc.mob-ouvert:nth-child(3) .cmd-row {
    display: flex; align-items: center; gap: 8px; padding: 0 14px 10px;
  }
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-bloc:nth-child(3) .cmd-lbl { width: 76px; flex-shrink: 0; font-size: 12px; }
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-bloc:nth-child(3) input { flex: 1; min-width: 0; }

  /* ── Étapes TRADE et IMPORT : le contenu de l'onglet, plein écran ── */
  html[data-mobile="on"][data-etape="import"] .pdf-drop-zone { padding: 28px 16px 12px; }
  html[data-mobile="on"] .mob-trade-lien.mob-trade-commande { margin: 10px 12px 0; }

  /* ── Lignes du catalogue dans le parcours : la quantité seule ──
     UG, R1 et R2 ne se déplient plus sous la ligne (arbitrage 09/09) : ils
     sont dans la feuille d'options, ouverte en touchant le nom. La ligne
     ajustée le rappelle en vert, en 3e rangée, à côté du sous-total. */
  html[data-mobile="on"][data-etape] .commandes-table:not(.recap-table) tr.is-active td.col-r1,
  html[data-mobile="on"][data-etape] .commandes-table:not(.recap-table) tr.is-active td.col-r2,
  html[data-mobile="on"][data-etape] .commandes-table:not(.recap-table) tr.is-active td.col-ug { display: none; }
  html[data-mobile="on"][data-etape] .commandes-table:not(.recap-table) td.mob-rappel {
    grid-area: 3 / 1 / auto / 7; display: flex; align-items: flex-end;
    margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
    font-size: 12px; font-weight: 800; color: var(--accent-deep);
  }
  html[data-mobile="on"][data-etape] .commandes-table:not(.recap-table) tr.mob-ajustee:not(.is-active) td.col-total {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;
    grid-area: 3 / 7 / auto / 9; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
    font-size: 14px; font-weight: 800;
  }
  /* Le nom est touchable : un petit réglage gris le dit. */
  html[data-mobile="on"][data-etape] .commandes-table:not(.recap-table) td.col-desc > div:first-child::after {
    content: 'tune'; font-family: 'Material Symbols Rounded'; font-weight: 400;
    font-size: 15px; line-height: 1; vertical-align: -2px; margin-left: 6px;
    color: var(--text-light); opacity: .7;
  }

  /* ── Feuille « Options de la ligne » ── */
  html[data-mobile="on"] .mob-feuille-fond {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(20,28,36,.38); opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
  }
  html[data-mobile="on"] .mob-feuille-fond.ouverte { opacity: 1; pointer-events: auto; }
  html[data-mobile="on"] .mob-feuille {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201;
    background: var(--white); border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.18);
    padding: 6px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); transition: transform .22s ease;
    max-height: 86vh; overflow-y: auto;
  }
  html[data-mobile="on"] .mob-feuille.ouverte { transform: translateY(0); }
  html[data-mobile="on"] .mob-feuille-poignee {
    width: 38px; height: 4px; border-radius: 2px; background: var(--border-md); margin: 4px auto 12px;
  }
  html[data-mobile="on"] .mob-feuille-titre { font-size: 15px; font-weight: 800; line-height: 1.3; }
  html[data-mobile="on"] .mob-feuille-sous { font-size: 12px; color: var(--text-light); margin: 2px 0 8px; }
  html[data-mobile="on"] .mob-opt-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; border-top: 1px solid var(--border);
  }
  html[data-mobile="on"] .mob-opt-row[hidden] { display: none; }
  html[data-mobile="on"] .mob-opt-lbl { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; font-weight: 700; min-width: 0; }
  html[data-mobile="on"] .mob-opt-aide { font-size: 11px; font-weight: 500; color: var(--text-light); }
  html[data-mobile="on"] .mob-opt-stepper { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
  html[data-mobile="on"] .mob-opt-stepper button {
    width: 40px; height: 40px; border-radius: 10px; font-size: 20px; font-weight: 700;
    font-family: inherit; -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .mob-opt-moins { border: 1px solid var(--border-md); background: transparent; color: var(--text); }
  html[data-mobile="on"] .mob-opt-plus { border: none; background: var(--accent-deep); color: #fff; }
  html[data-mobile="on"] .mob-opt-stepper input {
    width: 46px; height: 40px; border: none; background: transparent;
    font-size: 16px; font-weight: 800; text-align: center; font-family: inherit;
  }
  html[data-mobile="on"] .mob-opt-pct {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-size: 14px; font-weight: 700; color: var(--text-light);
  }
  html[data-mobile="on"] .mob-opt-pct input {
    width: 72px; height: 40px; border: 1.5px solid var(--border-md); border-radius: 10px;
    background: var(--bg); font-size: 16px; font-weight: 800; text-align: right;
    padding: 0 10px; font-family: inherit; color: var(--text);
  }
  html[data-mobile="on"] .mob-opt-pct input:focus { border-color: var(--accent-deep); outline: none; background: var(--white); }
  html[data-mobile="on"] .mob-feuille input:disabled,
  html[data-mobile="on"] .mob-feuille button:disabled { opacity: .45; }
  html[data-mobile="on"] .mob-switch {
    position: relative; width: 48px; height: 28px; border-radius: 14px; flex-shrink: 0;
    border: none; background: var(--border-md); transition: background .15s;
    -webkit-tap-highlight-color: transparent; padding: 0;
  }
  html[data-mobile="on"] .mob-switch.on { background: var(--accent-deep); }
  html[data-mobile="on"] .mob-switch-knob {
    position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
  }
  html[data-mobile="on"] .mob-switch.on .mob-switch-knob { transform: translateX(20px); }
  html[data-mobile="on"] .mob-feuille-pied {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  }
  html[data-mobile="on"] .mob-feuille-total { font-size: 13px; color: var(--text-light); }
  html[data-mobile="on"] .mob-feuille-total b { font-size: 16px; color: var(--text); margin-left: 4px; }
  html[data-mobile="on"] .mob-feuille-ok {
    height: 44px; padding: 0 22px; border-radius: 12px; border: none;
    background: var(--accent-deep); color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 800;
    -webkit-tap-highlight-color: transparent;
  }

  /* ================================================================
     Apercu apres validation (commandes.html) — 15/09/2026
     Plein ecran ; titre et fermeture en haut ; destinataire dessous ;
     Telecharger / Envoyer en barre basse, a portee du pouce. Avant, la
     boite de 900 px et sa barre d'une rangee rejetaient les trois boutons
     hors de l'ecran. Le resume remplace l'iframe PDF (voir commandes.html,
     _apercuTelephone).
     ================================================================ */
  html[data-mobile="on"] #pdfPreviewModal { align-items: stretch !important; justify-content: stretch !important; }
  html[data-mobile="on"] #pdfModalBox {
    width: 100% !important; max-width: 100% !important;
    height: 100dvh !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html[data-mobile="on"] #pdfModalBar {
    flex-wrap: wrap; gap: 8px !important;
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px !important;
  }
  html[data-mobile="on"] #pdfModalTitle {
    flex: 1; min-width: 0; padding-right: 92px;
    line-height: 34px; /* hauteur du bouton Fermer, pose en surimpression */
    font-size: 15px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-mobile="on"] #pdfEmailWrap {
    flex: 1 1 100%; margin: 0 !important; flex-wrap: nowrap !important;
  }
  html[data-mobile="on"] #inpEmailDest {
    flex: 1; min-width: 0; width: auto !important;
    height: 40px !important; font-size: 16px !important;
  }
  html[data-mobile="on"] #pdfModalActions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
    margin: 0 !important; display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--bloc); border-top: 1px solid var(--border);
  }
  html[data-mobile="on"] #pdfModalActions button {
    height: 46px; min-width: 0; font-size: 14px !important; justify-content: center;
    white-space: nowrap; overflow: hidden;
  }
  /* L'icone PDF du titre coute la place du numero de commande. */
  html[data-mobile="on"] #pdfModalBar > .ms:first-child { display: none; }
  html[data-mobile="on"] #btnClosePDF {
    position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 10px;
    height: 34px !important; font-size: 13px !important;
  }
  html[data-mobile="on"] #pdfPreviewContainer {
    overflow-y: auto !important; background: var(--bg);
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  html[data-mobile="on"] .pdf-tel {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 24px 16px;
  }
  html[data-mobile="on"] .pdf-tel-ico {
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(127,193,160,.2); color: var(--accent-deep);
  }
  html[data-mobile="on"] .pdf-tel-ico .ms { font-size: 30px; }
  html[data-mobile="on"] .pdf-tel-num { font-size: 17px; font-weight: 800; color: var(--text); }
  html[data-mobile="on"] .pdf-tel-lignes {
    width: 100%; margin: 0;
    background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  }
  html[data-mobile="on"] .pdf-tel-lignes > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 11px 14px; border-top: 1px solid var(--border);
  }
  html[data-mobile="on"] .pdf-tel-lignes > div:first-child { border-top: none; }
  html[data-mobile="on"] .pdf-tel-lignes dt { font-size: 13px; color: var(--text-light); flex-shrink: 0; }
  html[data-mobile="on"] .pdf-tel-lignes dd {
    margin: 0; min-width: 0; text-align: right;
    font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere;
  }
  html[data-mobile="on"] .pdf-tel-voir {
    width: 100%; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--border-md); background: var(--white); color: var(--text);
    font-family: inherit; font-size: 14px; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  html[data-mobile="on"] .pdf-tel-aide { margin: 0; font-size: 12px; color: var(--text-light); text-align: center; }

  /* ================================================================
     Fiche fournisseur (fournisseurs.html) — 15/09/2026

     CONSULTATION, decide avec Vincent : seules les bascules Nouveau /
     Rupture et la date de retour restent modifiables. Les controles
     d'edition portent `data-hors-telephone` (masques plus haut) ; les
     champs generes sont en lecture seule (_roTel dans la page).
     Onglet Commissions masque ; les autres sont gardes.
     ================================================================ */

  /* Liste : des cibles au pouce. */
  html[data-mobile="on"] .fo-item { padding: 10px 10px; gap: 10px; }
  html[data-mobile="on"] .fo-item-name { font-size: 14px; }
  html[data-mobile="on"] .fo-item-sub { font-size: 12px; }
  html[data-mobile="on"] .fo-item-ca { font-size: 12px; }
  html[data-mobile="on"] #foListSearch { font-size: 16px; }

  /* La fiche defile d'un seul tenant : bandeau, onglets, contenu. Sinon
     le bandeau garde la moitie de l'ecran et le tableau defile dans un
     timbre-poste. Seuls flex et overflow sont repris — l'affichage des
     onglets reste pilote par switchFoTab (display en style inline). */
  html[data-mobile="on"] .fo-content { padding: 10px; gap: 10px; }
  html[data-mobile="on"] #foFiche { overflow-y: auto !important; gap: 10px !important; }
  html[data-mobile="on"] #foFiche > .v2-card { flex: none !important; overflow: visible !important; }
  html[data-mobile="on"] #foFiche .v2-scroll,
  html[data-mobile="on"] #foFiche .prod-tbl-wrap { overflow: visible; flex: none; }

  /* Bandeau : logo et nom, contacts dessous ; adresse, puis les deux
     indicateurs cote a cote sur toute la largeur. */
  html[data-mobile="on"] .fo-fiche-top { flex-wrap: wrap; row-gap: 12px; padding: 14px; }
  html[data-mobile="on"] .fo-vsep { display: none; }
  html[data-mobile="on"] .fo-id { flex: 1 1 0; }
  html[data-mobile="on"] .fo-name { white-space: normal; font-size: 16px; }
  html[data-mobile="on"] .fo-sub { font-size: 12.5px; }
  html[data-mobile="on"] .fo-metas { width: 100%; }
  html[data-mobile="on"] .fo-meta-val { white-space: normal; max-width: none; }
  html[data-mobile="on"] .fo-kpi-strip { margin-left: 0; width: 100%; gap: 8px; }
  html[data-mobile="on"] .fo-kpi-cell {
    flex: 1; min-width: 0; text-align: left;
    padding: 9px 11px !important; border: none;
    background: var(--bloc); border-radius: 11px;
  }
  html[data-mobile="on"] .fo-kpi-sub { justify-content: flex-start; }
  html[data-mobile="on"] .fo-kpi-val.ca { font-size: 20px; }
  html[data-mobile="on"] #foHubBar { padding: 0 14px 10px !important; }

  /* Barres d'outils des onglets : le titre, puis la recherche sur toute
     la largeur (champs figes a 160-200 px en style inline). */
  html[data-mobile="on"] #foFiche .v2-toolbar { flex-wrap: wrap; row-gap: 8px; }
  html[data-mobile="on"] #foFiche .v2-toolbar > div:last-child:not(.v2-toolbar-l) { flex: 1 1 100%; }
  html[data-mobile="on"] #foFiche .v2-sf { flex: 1; }
  html[data-mobile="on"] #foFiche .v2-sf input { width: 100% !important; font-size: 16px; }

  /* Un champ en lecture seule ne doit pas ressembler a une case a remplir. */
  html[data-mobile="on"] #foFiche input[readonly] {
    border-color: transparent !important; background: transparent !important;
    pointer-events: none; padding-left: 0; padding-right: 0;
  }

  /* ── Onglet Produits : une carte par produit ─────────────────────
     Cellules du generateur (renderProduits), ordre contractuel :
     1 poignee · 2 EAN · 3 reference · 4 designation · 5 PCB · 6 prix ·
     7 TVA · 8 bascules · 9 date de retour · 10 action.
     Le libelle de chaque valeur est pose en ::before sur la cellule (un
     <input> n'accepte pas de pseudo-element, la cellule si). */
  html[data-mobile="on"] .prod-tbl-wrap table,
  html[data-mobile="on"] .prod-tbl-wrap tbody { display: block; }
  html[data-mobile="on"] .prod-tbl-wrap thead,
  html[data-mobile="on"] #produitsZone .drag-handle,
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(10),
  html[data-mobile="on"] .cat-hdr-edit-btn { display: none !important; }
  html[data-mobile="on"] .cat-row { display: block; }
  html[data-mobile="on"] .cat-row td { display: block; padding: 0; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 8px; row-gap: 6px;
    padding: 11px 12px;
  }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td {
    display: block; padding: 0; min-width: 0;
  }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td::before {
    display: block; margin-bottom: 1px;
    font-size: 9px; font-weight: 800; letter-spacing: .5px;
    color: var(--text-light); text-transform: uppercase;
  }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(4) { grid-area: 1 / 1 / 2 / 5; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(4) .tbl-inp {
    font-size: 14px; font-weight: 700; min-width: 0 !important;
    white-space: normal;
  }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(2) { grid-area: 2 / 1 / 3 / 3; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(3) { grid-area: 2 / 3 / 3 / 5; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(6) { grid-area: 3 / 1 / 4 / 3; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(5) { grid-area: 3 / 3 / 4 / 4; text-align: left !important; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(7) { grid-area: 3 / 4 / 4 / 5; text-align: left !important; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(8) { grid-area: 4 / 1 / 5 / 3; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(9) { grid-area: 4 / 3 / 5 / 5; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(2)::before { content: 'EAN'; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(3)::before { content: 'Référence'; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(5)::before { content: 'PCB'; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(6)::before { content: 'Prix HT'; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(7)::before { content: 'TVA %'; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(9)::before { content: 'Retour rupture'; }
  html[data-mobile="on"] #produitsZone .tbl-inp { font-size: 13px; text-align: left !important; width: 100% !important; }
  /* Les deux bascules : de vraies cibles tactiles. */
  html[data-mobile="on"] #produitsZone .stat-cell { display: flex; gap: 8px; justify-content: flex-start; }
  /* Pas de rupture : la date de retour n'a pas d'objet, on ne montre pas une case morte. */
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(9):has(.chk-date:disabled) { display: none; }
  /* En-tete de categorie : le nom garde sa ligne, pastilles et compteur passent dessous. */
  html[data-mobile="on"] .cat-hdr { flex-wrap: wrap; row-gap: 5px; padding: 10px 12px 8px; font-size: 11px; }
  html[data-mobile="on"] .cat-hdr-name-wrap { flex: 1 1 60%; }
  html[data-mobile="on"] .cat-hdr-pills { margin-left: 0; }
  html[data-mobile="on"] #produitsZone .stat-ico { width: 40px; height: 40px; font-size: 22px; border-radius: 10px; }
  html[data-mobile="on"] #produitsZone .chk-date { height: 40px; font-size: 16px !important; }
  html[data-mobile="on"] #produitsZone .chk-date:disabled { height: auto; }

  /* ── Onglet Pharmacies actives : une carte par pharmacie ─────────
     Cellules (_renderPhActifs) : 1 pharmacie · 2 groupement · 3 R1 ·
     4 R2 · 5 marche · 6 CA · 7 commander. */
  html[data-mobile="on"] #fo-t-pharmacies .v2-tbl,
  html[data-mobile="on"] #fo-t-pharmacies .v2-tbl tbody { display: block; }
  html[data-mobile="on"] #fo-t-pharmacies .v2-tbl thead { display: none; }
  html[data-mobile="on"] #phActifBody > tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    column-gap: 8px; row-gap: 6px; align-items: end;
    padding: 11px 12px; border-bottom: 1px solid var(--border);
  }
  html[data-mobile="on"] #phActifBody > tr > td { display: block; padding: 0 !important; border: none; min-width: 0; text-align: left !important; }
  html[data-mobile="on"] #phActifBody > tr > td:only-child { grid-column: 1 / -1; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(1) { grid-area: 1 / 1 / 2 / 4; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(6) { grid-area: 1 / 4 / 2 / 5; text-align: right !important; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(2) { grid-area: 2 / 1 / 3 / 5; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(3) { grid-area: 3 / 1; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(4) { grid-area: 3 / 2; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(5) { grid-area: 3 / 3; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(7) { grid-area: 3 / 4; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(3)::before,
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(4)::before,
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(5)::before {
    display: block; margin-bottom: 1px;
    font-size: 9px; font-weight: 800; letter-spacing: .5px;
    color: var(--text-light); text-transform: uppercase;
  }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(3)::before { content: 'Remise 1'; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(4)::before { content: 'Remise 2'; }
  html[data-mobile="on"] #phActifBody > tr > td:nth-of-type(5)::before { content: 'Marché'; }
  html[data-mobile="on"] #phActifBody .ph-tbl-nom { font-size: 14px; white-space: normal; max-width: none; }
  /* Lecture seule : la valeur, sans le cadre de saisie. */
  html[data-mobile="on"] #phActifBody .ph-cell-pct {
    justify-content: flex-start; border: none; background: none; box-shadow: none;
    height: auto; width: auto;
  }
  html[data-mobile="on"] #phActifBody .ph-cell-pct input { width: 3.5ch; font-size: 14px; font-weight: 700; text-align: left; }
  html[data-mobile="on"] #phActifBody .ph-cell-pct span { padding: 0; font-size: 13px; }
  html[data-mobile="on"] #phActifBody .ph-marche-inp { font-size: 14px; width: 100%; text-align: left; }
  html[data-mobile="on"] #phActifBody > tr:hover,
  html[data-mobile="on"] #phActifBody > tr:hover > td { background: none; }
  html[data-mobile="on"] #phActifBody .v2-act-btn {
    width: 42px; height: 42px; justify-content: center; align-items: center;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-tel, var(--white));
  }

  /* ── Onglet Commandes : meme traitement que la fiche pharmacie ────
     Cellules (renderCommandes) : 1 n° · 2 date · 3 pharmacie · 4 ref ·
     5 statut · 6 montant · 7 apercu. */
  html[data-mobile="on"] #fo-t-commandes .v2-tbl,
  html[data-mobile="on"] #fo-t-commandes .v2-tbl tbody { display: block; }
  html[data-mobile="on"] #fo-t-commandes .v2-tbl thead { display: none; }
  html[data-mobile="on"] #cmdFoBody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px; row-gap: 2px; align-items: center;
    padding: 10px 2px; border-bottom: 1px solid var(--border);
  }
  html[data-mobile="on"] #cmdFoBody > tr > td {
    display: block; padding: 0; border: none; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html[data-mobile="on"] #cmdFoBody > tr > td:only-child { grid-column: 1 / -1; white-space: normal; }
  /* Le nom de la pharmacie a sa ligne : a cote du statut et de son badge de
     remise, il tombait a une douzaine de caracteres. */
  html[data-mobile="on"] #cmdFoBody > tr > td:nth-of-type(3) { grid-area: 1 / 1 / 2 / 3; font-size: 14px; white-space: normal; }
  html[data-mobile="on"] #cmdFoBody > tr > td:nth-of-type(1) { grid-area: 2 / 1; }
  html[data-mobile="on"] #cmdFoBody > tr > td:nth-of-type(6) { grid-area: 2 / 2; text-align: right; font-size: 14px; }
  html[data-mobile="on"] #cmdFoBody > tr > td:nth-of-type(5) { grid-area: 3 / 1; overflow: visible; white-space: normal; }
  html[data-mobile="on"] #cmdFoBody > tr > td:nth-of-type(7) { grid-area: 3 / 2 / 5 / 3; align-self: center; }
  html[data-mobile="on"] #cmdFoBody > tr > td:nth-of-type(2) { grid-area: 4 / 1; }
  html[data-mobile="on"] #cmdFoBody > tr > td:nth-of-type(4) { display: none; }
  html[data-mobile="on"] #cmdFoBody > tr:hover,
  html[data-mobile="on"] #cmdFoBody > tr:hover > td { background: none; }
  html[data-mobile="on"] #cmdFoBody .v2-act-btn {
    width: 42px; height: 42px; justify-content: center; align-items: center;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-tel, var(--white));
  }

  /* ── Packs : cartes depliables (_packsTelHTML) ─────────────────── */
  html[data-mobile="on"] .pack-tel-liste { display: flex; flex-direction: column; gap: 8px; }
  html[data-mobile="on"] .pack-tel {
    background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  }
  html[data-mobile="on"] .pack-tel summary {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; cursor: pointer; list-style: none;
  }
  html[data-mobile="on"] .pack-tel summary::-webkit-details-marker { display: none; }
  html[data-mobile="on"] .pack-tel summary::after {
    content: 'expand_more'; font-family: 'Material Symbols Rounded';
    font-size: 20px; color: var(--text-light); transition: transform .15s;
  }
  html[data-mobile="on"] .pack-tel[open] summary::after { transform: rotate(180deg); }
  html[data-mobile="on"] .pack-tel-nom { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
  html[data-mobile="on"] .pack-tel-prix { font-size: 14px; font-weight: 800; white-space: nowrap; }
  html[data-mobile="on"] .pack-tel-remise {
    font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
    background: var(--accent-dark); white-space: nowrap;
  }
  html[data-mobile="on"] .pack-tel-lignes {
    padding: 4px 14px 12px; font-size: 13px; color: var(--text-light);
    border-top: 1px solid var(--border);
  }
  html[data-mobile="on"] .pack-tel-ligne {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 7px 0; color: var(--text); border-bottom: 1px solid var(--border);
  }
  html[data-mobile="on"] .pack-tel-ligne:last-child { border-bottom: none; }
  html[data-mobile="on"] .pack-tel-ligne b { white-space: nowrap; }

  /* ── CGV et Trade : des cartes deja lisibles, qui doivent passer a la ligne. */
  html[data-mobile="on"] #foCgvBody { padding: 10px !important; }
  html[data-mobile="on"] #foCgvBody > .v2-card > div[style*="1fr 1fr"] { grid-template-columns: 1fr !important; gap: 6px !important; }
  html[data-mobile="on"] #foCgvBody div[style*="border-radius:10px"] > div:first-child { flex-wrap: wrap; row-gap: 4px; }
  html[data-mobile="on"] #foTradeBody { padding: 10px !important; }
  html[data-mobile="on"] #foTradeBody [data-trade-id] > div:first-child { flex-wrap: wrap; row-gap: 6px; }
  html[data-mobile="on"] #foTradeBody [data-trade-id] > div:first-child > span:first-child { flex: 1 1 100% !important; }

  /* ── Rapports : la grille 1fr 320px posee en style inline par
     renderFoRapport, reprise en une colonne. */
  html[data-mobile="on"] #fo-t-rapports [style*="320px"] { grid-template-columns: 1fr !important; }
  html[data-mobile="on"] #foRptZone { padding: 10px !important; }
  html[data-mobile="on"] #foRptZone .rpt-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* ── Page Trade (trade.html) ────────────────────────────────────────

     Liste seulement, en consultation (15/09/2026). Le mois, la bascule
     Mois/Liste et « Nouvelle operation » portent data-hors-telephone ; il
     reste les trois filtres : le type sur toute la largeur, marque et
     groupement cote a cote. Les deux listes deroulantes portent une largeur
     minimale et une hauteur EN STYLE INLINE, d'ou les !important. */
  html[data-mobile="on"] .trade-toolbar { padding: 10px; gap: 8px; }
  html[data-mobile="on"] .trade-filterseg { flex: 1 1 100%; order: -1; }
  html[data-mobile="on"] .trade-filterseg button { flex: 1; justify-content: center; height: 36px; }
  html[data-mobile="on"] .trade-toolbar select.v2-fselect {
    flex: 1 1 0; min-width: 0 !important; height: 40px !important;
  }
  html[data-mobile="on"] .trade-content { padding: 10px; }
  html[data-mobile="on"] .trade-card {
    background: var(--surface-tel); padding: 12px;
  }
  /* La fiche d'une operation monte du bas, comme le panneau « Plus ». */
  html[data-mobile="on"] .trade-modal-ov.open { align-items: flex-end; }
  html[data-mobile="on"] .trade-modal {
    width: 100%; max-width: 100%; max-height: 88dvh;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  html[data-mobile="on"] .trade-detail-row b { min-width: 92px; }
}

/* Contrepartie de `data-telephone-seul` : hors format telephone, ces blocs
   n'existent pas. Pose hors du media query, donc toujours active. */
[data-telephone-seul] { display: none; }

/* ── Premiere commande d'une pharmacie chez une marque (16/09/2026) ──
   Pose par premiere-commande.js sur les listes de commandes : fiche
   pharmacie, fiche fournisseur, tableau de bord. */
.badge-premiere {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 1px 8px 1px 5px; border-radius: 999px;
  background: #E3F2E9; color: #2F7A55;
  font-size: 10px; font-weight: 800; letter-spacing: .1px;
  white-space: nowrap; vertical-align: 1px;
}
.badge-premiere .ms { font-size: 13px !important; font-variation-settings: 'FILL' 1, 'wght' 500; }
tr.ligne-premiere > td { background: rgba(127, 193, 160, .10); }
tr.ligne-premiere > td:first-child { box-shadow: inset 3px 0 0 #7FC1A0; }
/* La colonne fournisseur de la fiche pharmacie tronque a 130 px : la
   pastille passerait sous les points de suspension. */
.ord-sup:has(.badge-premiere) { max-width: none; overflow: visible; }

/* ================================================================
   FORMAT TELEPHONE — STYLE « RELIEF LEGER » (16/09/2026)

   Maquette validee par Vincent le 16/09 (artifact « Relief léger »,
   9 ecrans) : fond blanc, cartes blanches a ombre portee douce,
   champs et element actif legerement ENFONCES sur un gris-vert tres
   clair, bouton principal menthe. « Tu l'as vraiment bien simplifie
   par rapport a la version actuelle. On va modifier dans ce sens. »

   Ce bloc vient APRES toutes les regles telephone : a specificite
   egale il l'emporte, sans toucher aux regles de mise en page
   ci-dessus (grilles, masquages, ordre des cellules), qui restent la
   source de verite pour la STRUCTURE. Ici, on ne fait que l'habillage,
   plus deux simplifications decidees avec la maquette :
     - les deux graphiques du tableau de bord ne s'affichent plus au
       telephone (illisibles a cette taille ; les chiffres sont dans les
       cartes du haut et dans les rapports des fiches) ;
     - le parcours de commande n'a plus qu'un en-tete : celui de
       l'etape, avec son bouton retour.

   Neutres FORCES (!important) : Parametres > Design pose ses couleurs
   en style inline sur <html>, qui l'emporterait sinon. Au telephone le
   fond est blanc pour tout le monde ; les couleurs d'ACCENT du theme,
   elles, sont respectees.
================================================================ */
@media (max-width: 700px) {

  html[data-mobile="on"] {
    --tel-creux:        #F3F6F4;
    --tel-creux-vert:   #EEF5F1;
    --tel-trait:        rgba(42, 61, 53, .07);
    --tel-ombre:        0 1px 2px rgba(42, 61, 53, .05), 0 6px 18px rgba(42, 61, 53, .07);
    --tel-ombre-s:      0 1px 2px rgba(42, 61, 53, .06), 0 3px 8px rgba(42, 61, 53, .05);
    --tel-enfonce:      inset 0 1px 3px rgba(42, 61, 53, .09);
    --tel-enfonce-s:    inset 0 1px 2px rgba(42, 61, 53, .08);
    --tel-cta-ombre:    0 1px 2px rgba(47, 122, 85, .18), 0 4px 12px rgba(78, 156, 119, .22);
    --tel-vert:         #4E9C77;
    --tel-gris:         #8C9C92;

    --bg:          #FFFFFF !important;
    --bloc:        #F3F6F4 !important;
    --bloc-2:      #EEF5F1 !important;
    --zone:        #EEF5F1 !important;
    --btn:         #EEF2EF !important;
    --white:       #FFFFFF;
    --surface-tel: #FFFFFF;
    --border:      rgba(42, 61, 53, .08);
    --border-md:   rgba(42, 61, 53, .13);
    --sh-xs:       var(--tel-ombre-s);
    --sh-sm:       var(--tel-ombre-s);
    --r-sm:        12px;
    --r-md:        14px;
    --r-lg:        18px;
    --r-xl:        22px;
    --header-h:    64px;
  }

  /* ── Coquille ─────────────────────────────────────────────────── */
  html[data-mobile="on"] body,
  html[data-mobile="on"] .v2-app,
  html[data-mobile="on"] .v2-main { background: #FFFFFF; }

  html[data-mobile="on"] .v2-hdr {
    background: #FFFFFF; border-bottom: none;
    padding: env(safe-area-inset-top) 16px 0 18px;
    gap: 10px;
    flex-wrap: wrap; align-content: center; row-gap: 0;
  }
  html[data-mobile="on"] .v2-hdr-title {
    flex: 1 1 0; min-width: 0;
    font-size: 24px; font-weight: 900; letter-spacing: -.4px; line-height: 1.15;
  }
  html[data-mobile="on"] .v2-hdr-spacer { display: none !important; }
  /* Date du tableau de bord : sous le titre, comme dans la maquette. */
  html[data-mobile="on"] #dashDate {
    order: 5; flex: 1 1 100%;
    font-size: 12.5px !important; font-weight: 600; color: var(--text-light);
    margin-top: 1px;
  }
  /* Fiche ouverte : titre plus court, pas de bouton de creation. */
  html[data-mobile="on"].v2-md-detail .v2-hdr-title { font-size: 17px; }
  html[data-mobile="on"].v2-md-detail .v2-hdr .v2-btn-primary { display: none; }

  /* Boutons ronds de l'en-tete : retour, masquer les chiffres, creation. */
  html[data-mobile="on"] .v2-hdr-retour {
    width: 42px; height: 42px; border-radius: 14px;
    background: #FFFFFF; border: 1px solid var(--tel-trait);
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] #btnFlouKpi {
    width: 42px; height: 42px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFFFFF; border: 1px solid var(--tel-trait);
    box-shadow: var(--tel-ombre-s); color: var(--text);
  }
  html[data-mobile="on"] #btnFlouKpi .ms { font-size: 20px !important; }
  html[data-mobile="on"] #btnFlouKpiTxt { display: none; }
  html[data-mobile="on"] .v2-hdr .v2-btn-primary {
    width: 44px; height: 44px; padding: 0; flex-shrink: 0;
    border-radius: 50%; justify-content: center; gap: 0;
    font-size: 0; box-shadow: var(--tel-cta-ombre);
  }
  html[data-mobile="on"] .v2-hdr .v2-btn-primary .ms { font-size: 24px; }

  /* Pastille « numero de commande » : sans objet dans le parcours par etapes. */
  html[data-mobile="on"][data-etape] .v2-app {
    grid-template-rows: 0 1fr auto;
  }
  html[data-mobile="on"][data-etape] .v2-hdr { display: none; }

  /* ── Barre basse : une carte flottante ────────────────────────── */
  html[data-mobile="on"] .v2-bbar {
    background: #FFFFFF;
    border: 1px solid var(--tel-trait); border-top: 1px solid var(--tel-trait);
    border-radius: 24px;
    box-shadow: var(--tel-ombre);
    margin: 4px 10px calc(10px + env(safe-area-inset-bottom));
    padding: 4px;
  }
  html[data-mobile="on"] .v2-bbar-item {
    height: 58px; gap: 3px;
    color: var(--tel-gris);
    font-size: 10.5px; font-weight: 800;
    border-radius: 18px;
  }
  html[data-mobile="on"] .v2-bbar-item .ms {
    width: 48px; height: 32px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
  }
  html[data-mobile="on"] .v2-bbar-item.active,
  html[data-mobile="on"] .v2-bbar-item.ouvert { color: var(--text); }
  html[data-mobile="on"] .v2-bbar-item.active .ms,
  html[data-mobile="on"] .v2-bbar-item.ouvert .ms {
    background: var(--tel-creux-vert); box-shadow: var(--tel-enfonce-s);
    color: var(--tel-vert);
    font-variation-settings: 'FILL' 1, 'wght' 500;
  }
  html[data-mobile="on"] .v2-bbar-item:active { background: transparent; }

  /* ── Panneau « Plus » : carte flottante au-dessus de la barre ─── */
  html[data-mobile="on"] .v2-nav {
    left: 10px; right: 10px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 86px - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 32px);
    background: #FFFFFF;
    border: 1px solid var(--tel-trait);
    border-radius: 26px;
    box-shadow: 0 2px 6px rgba(42, 61, 53, .08), 0 18px 44px rgba(42, 61, 53, .16);
    padding: 8px 10px 10px;
    transform: translateY(calc(100% + 110px + env(safe-area-inset-bottom)));
  }
  html[data-mobile="on"] .v2-nav-ov { background: rgba(42, 61, 53, .22); }
  html[data-mobile="on"] .v2-nav-item {
    min-height: 56px; margin: 2px 0; padding: 0 12px;
    border-radius: 18px; gap: 12px;
    font-size: 15px; font-weight: 800; color: var(--text);
    background: #FFFFFF; border: 1px solid var(--tel-trait);
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] .v2-nav-item .ms {
    width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #FBEBD2; color: #B7791F; font-size: 19px;
  }
  html[data-mobile="on"] .v2-nav-item.active { background: #FFFFFF; }
  html[data-mobile="on"] .v2-nav-item::after {
    content: 'chevron_right'; margin-left: auto;
    font-family: 'Material Symbols Rounded'; font-size: 20px; font-weight: 400;
    color: var(--tel-gris);
  }
  html[data-mobile="on"] .v2-nav-bottom {
    border-top: none; margin-top: 8px; padding: 6px 4px 0;
    display: flex; flex-direction: column; gap: 6px;
  }
  html[data-mobile="on"] #v2ConnBadge,
  html[data-mobile="on"] #v2ForceOffline {
    margin: 0 !important; padding: 10px 12px !important;
    border-radius: 14px !important;
    background: var(--tel-creux) !important; box-shadow: var(--tel-enfonce-s);
    font-size: 12.5px !important; font-weight: 700; color: var(--text) !important;
  }
  html[data-mobile="on"] #v2ConnBadge span { font-size: 12.5px !important; }
  html[data-mobile="on"] #v2ForceTrack { width: 44px !important; height: 26px !important; border-radius: 13px !important; }
  html[data-mobile="on"] #v2ForceKnob { width: 20px !important; height: 20px !important; top: 3px !important; left: 3px !important; }
  html[data-mobile="on"] .v2-nav-user {
    border-top: none; margin-top: 2px; padding: 8px 4px 2px;
  }
  html[data-mobile="on"] .v2-nav-av {
    width: 42px; height: 42px; border-radius: 50%;
    background: #FFFFFF; box-shadow: var(--tel-ombre-s); border: 1px solid var(--tel-trait);
    color: var(--tel-vert); font-weight: 900;
  }
  html[data-mobile="on"] .v2-nav-un { font-size: 14px; font-weight: 800; }
  html[data-mobile="on"] .v2-nav-user button {
    width: 42px; height: 42px; border-radius: 14px !important;
    justify-content: center;
    background: #FFFFFF !important; border: 1px solid var(--tel-trait) !important;
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] #pwaInstallBtn { border-radius: 14px !important; min-height: 44px; }

  /* ── Cartes ───────────────────────────────────────────────────── */
  html[data-mobile="on"] .v2-card,
  html[data-mobile="on"] .dash-card,
  html[data-mobile="on"] .dash-kpi,
  html[data-mobile="on"] .sup-row,
  html[data-mobile="on"] .trade-card,
  html[data-mobile="on"] .ctr-card,
  html[data-mobile="on"] .mob-marques,
  html[data-mobile="on"] .pdf-tel-lignes,
  html[data-mobile="on"] .pack-tel {
    background: #FFFFFF;
    border: 1px solid var(--tel-trait);
    box-shadow: var(--tel-ombre);
  }
  html[data-mobile="on"] .v2-card,
  html[data-mobile="on"] .dash-card { border-radius: 22px; }
  html[data-mobile="on"] .dash-kpi { border-radius: 22px; padding: 14px 14px 13px; }
  html[data-mobile="on"] .sup-row,
  html[data-mobile="on"] .trade-card,
  html[data-mobile="on"] .ctr-card,
  html[data-mobile="on"] .mob-marques,
  html[data-mobile="on"] .pdf-tel-lignes,
  html[data-mobile="on"] .pack-tel { border-radius: 20px; }

  /* Pastilles de libelle : gras, petites capitales, gris-vert. */
  html[data-mobile="on"] .dash-kpi-lbl,
  html[data-mobile="on"] .ph-list-label,
  html[data-mobile="on"] .fo-list-label,
  html[data-mobile="on"] .ph-ca-lbl,
  html[data-mobile="on"] .fo-kpi-lbl,
  html[data-mobile="on"] .fo-meta-lbl {
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--tel-gris);
  }

  /* ── Champs : legerement enfonces ─────────────────────────────── */
  html[data-mobile="on"] .v2-sf,
  html[data-mobile="on"] .v2-finput,
  html[data-mobile="on"] .v2-fselect,
  html[data-mobile="on"] .recap-comment,
  html[data-mobile="on"] .remise-wrap input,
  html[data-mobile="on"] .cat-r-inp,
  html[data-mobile="on"] .recap-table input,
  html[data-mobile="on"] .mob-opt-pct input,
  html[data-mobile="on"] #inpEmailDest {
    background: var(--tel-creux) !important;
    border: 1px solid transparent !important;
    box-shadow: var(--tel-enfonce);
    border-radius: 14px !important;
  }
  html[data-mobile="on"] .v2-sf { height: 46px; padding: 0 14px; gap: 8px; }
  html[data-mobile="on"] .v2-sf .ms { font-size: 20px; color: var(--tel-gris); }
  html[data-mobile="on"] .v2-sf:focus-within,
  html[data-mobile="on"] .v2-finput:focus,
  html[data-mobile="on"] .v2-fselect:focus {
    border-color: var(--accent) !important;
  }
  html[data-mobile="on"] .v2-sf input { background: transparent; }

  /* ── Filtres et puces : actif enfonce, les autres en relief ───── */
  html[data-mobile="on"] .ph-chip,
  html[data-mobile="on"] .mob-puce {
    height: 36px; padding: 0 14px; border-radius: 12px;
    background: #FFFFFF; color: var(--text);
    border: 1px solid var(--tel-trait);
    box-shadow: var(--tel-ombre-s);
    font-size: 12.5px; font-weight: 800;
  }
  html[data-mobile="on"] .ph-chip.on,
  html[data-mobile="on"] .mob-puce.active {
    background: var(--tel-creux-vert); color: var(--tel-vert);
    border-color: transparent;
    box-shadow: var(--tel-enfonce-s);
  }
  html[data-mobile="on"] .ph-list-chips { gap: 8px; }

  /* ── Onglets : piste enfoncee, onglet actif en relief ─────────── */
  html[data-mobile="on"] .v2-tabs-bar {
    margin: 4px 12px 10px; padding: 4px;
    background: var(--tel-creux); box-shadow: var(--tel-enfonce);
    border: none; border-radius: 16px;
    gap: 2px;
  }
  html[data-mobile="on"] .v2-tabs-bar .v2-tab {
    padding: 0 12px; height: 36px; border-radius: 12px;
    font-size: 12.5px; font-weight: 800; color: var(--text-light);
    flex-shrink: 0;
  }
  html[data-mobile="on"] .v2-tabs-bar .v2-tab.active {
    background: #FFFFFF; color: var(--text);
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] .v2-tabs-bar .v2-tab.active::after { display: none; }
  html[data-mobile="on"] .v2-tab-cnt {
    background: rgba(42, 61, 53, .07); color: var(--text-light);
    border-radius: 999px; padding: 1px 6px; font-weight: 800;
  }
  html[data-mobile="on"] .v2-tab.active .v2-tab-cnt { background: var(--tel-creux-vert); color: var(--tel-vert); }

  /* Segments de la page Trade : meme langage que les onglets. */
  html[data-mobile="on"] .trade-filterseg {
    padding: 4px; gap: 2px;
    background: var(--tel-creux); box-shadow: var(--tel-enfonce);
    border: none; border-radius: 16px;
  }
  html[data-mobile="on"] .trade-filterseg button {
    border: none !important; border-radius: 12px; height: 36px;
    background: transparent; font-weight: 800; color: var(--text-light);
  }
  html[data-mobile="on"] .trade-filterseg button.active,
  html[data-mobile="on"] .trade-filterseg button.on {
    background: #FFFFFF !important; color: var(--text) !important;
    box-shadow: var(--tel-ombre-s);
  }

  /* ── Bouton principal : menthe, ombre verte douce ─────────────── */
  html[data-mobile="on"] .v2-btn-primary,
  html[data-mobile="on"] .mob-panier-btn,
  html[data-mobile="on"] #btnConfirmOrder,
  html[data-mobile="on"] .mob-feuille-ok {
    background: var(--accent) !important; color: #10251B !important;
    border: none !important;
    box-shadow: var(--tel-cta-ombre);
    font-weight: 800;
  }
  html[data-mobile="on"] .mob-panier-btn,
  html[data-mobile="on"] #btnConfirmOrder,
  html[data-mobile="on"] .mob-feuille-ok { border-radius: 16px; height: 50px; }
  html[data-mobile="on"] .mob-panier.est-vide .mob-panier-btn {
    background: var(--tel-creux) !important; color: var(--tel-gris) !important;
    box-shadow: var(--tel-enfonce-s);
  }
  /* Boutons secondaires : blancs en relief. */
  html[data-mobile="on"] #btnSaveDraft,
  html[data-mobile="on"] #btnSaveDevis,
  html[data-mobile="on"] .pdf-tel-voir,
  html[data-mobile="on"] .act-go,
  html[data-mobile="on"] .sup-row .v2-act-btn,
  html[data-mobile="on"] #phActifBody .v2-act-btn,
  html[data-mobile="on"] #cmdFoBody .v2-act-btn {
    background: #FFFFFF !important;
    border: 1px solid var(--tel-trait) !important;
    box-shadow: var(--tel-ombre-s);
    border-radius: 14px !important;
    color: var(--text);
  }
  html[data-mobile="on"] #btnSaveDraft,
  html[data-mobile="on"] #btnSaveDevis { height: 46px; }

  /* Interrupteurs : piste enfoncee, bouton menthe quand actif. */
  html[data-mobile="on"] .mob-switch {
    background: var(--tel-creux-vert); box-shadow: var(--tel-enfonce-s);
    width: 52px; height: 30px; border-radius: 15px;
  }
  html[data-mobile="on"] .mob-switch-knob {
    top: 4px; left: 4px; background: #FFFFFF;
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] .mob-switch.on { background: var(--tel-creux-vert); }
  html[data-mobile="on"] .mob-switch.on .mob-switch-knob {
    transform: translateX(22px);
    background: var(--accent); box-shadow: var(--tel-cta-ombre);
  }

  /* Pas a pas de quantite : ronds, moins en relief, plus menthe. */
  html[data-mobile="on"] .qty-stepper { gap: 4px; }
  html[data-mobile="on"] .qty-stepper .qty-btn,
  html[data-mobile="on"] .mob-opt-stepper button {
    border-radius: 50% !important;
  }
  html[data-mobile="on"] .qty-stepper .qty-minus,
  html[data-mobile="on"] .mob-opt-moins,
  html[data-mobile="on"] .ug-stepper .qty-btn {
    background: #FFFFFF !important; color: var(--text) !important;
    border: 1px solid var(--tel-trait) !important;
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] .qty-stepper .qty-plus,
  html[data-mobile="on"] .mob-opt-plus {
    background: var(--accent) !important; color: #10251B !important;
    box-shadow: var(--tel-cta-ombre);
  }

  /* ── Tableau de bord ──────────────────────────────────────────── */
  html[data-mobile="on"] .dash-grid-2-1 { display: none !important; }
  html[data-mobile="on"] .dash-kpi-row { gap: 12px; }
  html[data-mobile="on"] .dash-kpi-ic {
    width: 34px; height: 34px; border-radius: 11px;
    background: var(--tel-creux-vert) !important; box-shadow: var(--tel-enfonce-s);
  }
  html[data-mobile="on"] .dash-kpi-ic .ms { color: var(--tel-vert) !important; font-size: 18px; }
  html[data-mobile="on"] .dash-kpi-lbl { margin-top: 8px; }
  html[data-mobile="on"] .dash-kpi-val { font-size: 22px; font-weight: 900; letter-spacing: -.6px; }
  html[data-mobile="on"] .dash-kpi-sub { font-size: 11.5px; font-weight: 600; margin-top: 1px; }
  html[data-mobile="on"] .dash-delta { background: transparent !important; padding: 0; font-size: 11.5px; font-weight: 800; }
  html[data-mobile="on"] .dash-delta.up   { color: var(--tel-vert) !important; }
  html[data-mobile="on"] .dash-delta.down { color: #B8582F !important; }
  html[data-mobile="on"] .dash-card { padding: 16px; }
  html[data-mobile="on"] .dash-card.accent { border-color: var(--tel-trait); }
  html[data-mobile="on"] .dash-card-hd { border-bottom: none; padding: 0 0 6px; }
  html[data-mobile="on"] .dash-card-title { font-size: 15px; font-weight: 900; }
  html[data-mobile="on"] .dash-card-pill {
    background: #FBEBD2; color: #8A6510; border: none;
    font-weight: 800; border-radius: 999px;
  }
  html[data-mobile="on"] .act-row { border-bottom: none; padding: 7px 0; min-height: 46px; }
  html[data-mobile="on"] .act-ic { width: 36px; height: 36px; border-radius: 12px; }
  html[data-mobile="on"] .act-txt-main { font-weight: 800; }
  html[data-mobile="on"] .act-go { height: 34px; padding: 0 12px; font-weight: 800; }
  /* Saisies hors ligne : avertissement ambre, doux. */
  html[data-mobile="on"] #dashPendingCard {
    background: #FFFBF3; border: 1px solid #F3DFB8 !important;
    border-left: 1px solid #F3DFB8 !important;
  }
  html[data-mobile="on"] .cmd-tbl tbody tr:not(:last-child) { border-bottom-color: var(--tel-trait); }

  /* ── Listes (pharmacies, fournisseurs) ────────────────────────── */
  html[data-mobile="on"] .ph-list-head,
  html[data-mobile="on"] .fo-list-head {
    background: #FFFFFF; border-bottom: none; padding: 6px 16px 8px;
  }
  html[data-mobile="on"] .ph-items,
  html[data-mobile="on"] .fo-items { padding: 6px 16px 16px; background: #FFFFFF; }
  html[data-mobile="on"] .ph-item,
  html[data-mobile="on"] .fo-item {
    background: #FFFFFF;
    border: 1px solid var(--tel-trait);
    border-radius: 20px;
    box-shadow: var(--tel-ombre-s);
    padding: 12px 14px; margin-bottom: 10px;
  }
  html[data-mobile="on"] .ph-item.active,
  html[data-mobile="on"] .fo-item.active {
    background: #FFFFFF; border-color: var(--accent);
  }
  html[data-mobile="on"] .ph-item-name,
  html[data-mobile="on"] .fo-item-name { font-size: 14px; font-weight: 800; }
  html[data-mobile="on"] .ph-item-city,
  html[data-mobile="on"] .fo-item-sub { font-size: 12px; font-weight: 600; color: var(--text-light); }
  html[data-mobile="on"] .ph-item-ca,
  html[data-mobile="on"] .fo-item-ca { font-size: 13px; font-weight: 900; color: var(--text); }
  html[data-mobile="on"] .ph-item-tag {
    background: var(--tel-creux); color: var(--text-light);
    border-radius: 999px; font-weight: 800;
  }
  html[data-mobile="on"] .ph-fav-star {
    width: 30px; height: 30px; border-radius: 10px; font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFFFFF; box-shadow: var(--tel-ombre-s);
    border: 1px solid var(--tel-trait);
  }
  html[data-mobile="on"] .ph-fav-star.on { color: #E9A130; }
  html[data-mobile="on"] .fo-item-logo,
  html[data-mobile="on"] .fo-av,
  html[data-mobile="on"] .ph-av {
    border-radius: 14px;
    background: var(--tel-creux-vert) !important; color: var(--tel-vert) !important;
    box-shadow: var(--tel-enfonce-s); border: none;
  }

  /* ── Fiche pharmacie ──────────────────────────────────────────── */
  html[data-mobile="on"] .ph-content { background: #FFFFFF; padding: 8px 14px 14px; gap: 12px; }
  html[data-mobile="on"] .ph-info-strip {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px; padding: 16px;
    background: #FFFFFF;
  }
  html[data-mobile="on"] .ph-av { width: 44px; height: 44px; font-size: 16px; font-weight: 900; }
  html[data-mobile="on"] .ph-name { font-size: 15px; font-weight: 900; white-space: normal; }
  html[data-mobile="on"] .ph-addr { font-size: 12px; font-weight: 600; color: var(--text-light); }
  html[data-mobile="on"] .ph-ca-block {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 1fr auto; align-items: end;
    text-align: left; margin: 0;
    padding: 12px 14px; border-radius: 16px;
    background: var(--tel-creux); box-shadow: var(--tel-enfonce);
  }
  html[data-mobile="on"] .ph-ca-lbl { grid-column: 1; }
  html[data-mobile="on"] .ph-ca-val { grid-column: 1; font-size: 24px; font-weight: 900; letter-spacing: -.6px; }
  html[data-mobile="on"] .ph-ca-prev { grid-column: 2; grid-row: 1 / 3; align-self: end; text-align: right; font-weight: 700; }
  /* Actions : « Commander » en bouton principal, les autres en ronds. */
  html[data-mobile="on"] .ph-actions {
    grid-column: 1 / -1;
    display: flex; gap: 8px; width: 100%;
  }
  html[data-mobile="on"] .ph-actions .v2-act-btn {
    width: 46px; height: 46px; flex: 0 0 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #FFFFFF; border: 1px solid var(--tel-trait);
    box-shadow: var(--tel-ombre-s); color: var(--text);
  }
  html[data-mobile="on"] .ph-actions .v2-act-btn .ms { font-size: 20px; }
  html[data-mobile="on"] .ph-actions .v2-act-btn:nth-child(2) {
    order: -1; flex: 1 1 auto; width: auto; border-radius: 16px; gap: 8px;
    background: var(--accent); color: #10251B; border: none;
    box-shadow: var(--tel-cta-ombre);
    font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800;
  }
  html[data-mobile="on"] .ph-actions .v2-act-btn:nth-child(2)::after { content: 'Commander'; }
  html[data-mobile="on"] .ph-actions .v2-act-btn.danger { color: #B8582F; }

  /* Tableaux internes des onglets : lignes sur fond blanc. */
  html[data-mobile="on"] .adm-fld-row,
  html[data-mobile="on"] #t-ord .v2-tbl tbody tr,
  html[data-mobile="on"] #phActifBody > tr,
  html[data-mobile="on"] #cmdFoBody > tr { border-bottom-color: var(--tel-trait); }
  html[data-mobile="on"] .adm-section-hd,
  html[data-mobile="on"] .adm-section-hd td {
    background: transparent !important; border: none !important;
    color: var(--tel-gris); letter-spacing: 1.2px; font-weight: 800;
    padding-top: 12px;
  }
  html[data-mobile="on"] .sup-ca {
    background: var(--tel-creux); box-shadow: var(--tel-enfonce-s); border-radius: 12px;
  }
  html[data-mobile="on"] .sup-ca.current { background: var(--tel-creux-vert); }
  html[data-mobile="on"] .sup-row .v2-ninput,
  html[data-mobile="on"] .sup-row .v2-tinput {
    background: var(--tel-creux) !important; border-color: transparent !important;
    box-shadow: var(--tel-enfonce-s); border-radius: 12px;
  }
  html[data-mobile="on"] .sup-row .v2-ninput:disabled { background: transparent !important; box-shadow: none; }
  html[data-mobile="on"] .v2-toolbar { background: #FFFFFF; border-bottom: none; }

  /* ── Fiche fournisseur ────────────────────────────────────────── */
  html[data-mobile="on"] .fo-content { background: #FFFFFF; padding: 8px 14px 14px; gap: 12px; }
  html[data-mobile="on"] .fo-av { width: 48px; height: 48px; font-size: 15px; font-weight: 900; }
  html[data-mobile="on"] .fo-name { font-size: 17px; font-weight: 900; }
  html[data-mobile="on"] .fo-kpi-cell {
    background: var(--tel-creux) !important; box-shadow: var(--tel-enfonce);
    border-radius: 16px !important;
  }
  html[data-mobile="on"] .fo-rel-pill { border-radius: 999px; }
  html[data-mobile="on"] #foFiche > .v2-card:first-child .v2-tabs-bar { margin: 0 12px 12px; }
  /* Produits : le nom et le prix d'abord, reference et colis en ligne
     de service ; EAN et TVA restent dans la recherche et au bureau. */
  html[data-mobile="on"] #produitsZone tr[data-prodid] {
    border-bottom: 1px solid var(--tel-trait);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 4px; padding: 12px 14px;
  }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(2),
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(7) { display: none; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(4) { grid-area: 1 / 1 / 2 / 4; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(6) { grid-area: 1 / 4 / 2 / 5; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(6)::before { content: none; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(6) .tbl-inp {
    text-align: right !important; font-weight: 900; font-size: 13.5px;
  }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(3) { grid-area: 2 / 1 / 3 / 3; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(5) { grid-area: 2 / 3 / 3 / 5; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(3),
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(5) {
    display: flex; align-items: baseline; gap: 4px;
  }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(3)::before { content: 'Réf.'; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(5)::before { content: 'Colis'; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(3) .tbl-inp,
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(5) .tbl-inp {
    font-size: 12px; font-weight: 600; color: var(--text-light);
  }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(8) { grid-area: 3 / 1 / 4 / 5; margin-top: 4px; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(9) { grid-area: 4 / 1 / 5 / 5; }
  html[data-mobile="on"] #produitsZone tr[data-prodid] > td:nth-of-type(9)::before { display: none; }
  /* Bascules Nouveau / Rupture : des pastilles libellees. */
  html[data-mobile="on"] #produitsZone .stat-ico {
    width: auto; height: 36px; padding: 0 12px 0 9px; gap: 6px;
    display: inline-flex; align-items: center;
    border-radius: 12px; font-size: 18px;
    background: var(--tel-creux); color: var(--tel-gris);
    border: 1px solid transparent; box-shadow: var(--tel-enfonce-s);
  }
  html[data-mobile="on"] #produitsZone .stat-ico::after {
    font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800;
    font-variation-settings: normal;
  }
  html[data-mobile="on"] #produitsZone .stat-ico[data-f="estNouveau"]::after { content: 'Nouveau'; }
  html[data-mobile="on"] #produitsZone .stat-ico[data-f="enRupture"]::after { content: 'Rupture'; }
  html[data-mobile="on"] #produitsZone .stat-ico.on-new {
    background: #FFFFFF; color: var(--tel-vert); border-color: var(--tel-trait);
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] #produitsZone .stat-ico.on-rupt {
    background: #FFF4EF; color: #B8582F; border-color: #F2D2C3;
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] #produitsZone .chk-date {
    height: 40px; border-radius: 12px;
    background: var(--tel-creux); border: 1px solid transparent;
    box-shadow: var(--tel-enfonce-s);
  }
  html[data-mobile="on"] .cat-hdr {
    background: #FFFFFF; border-bottom: none;
    padding: 14px 14px 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; color: var(--tel-gris);
  }

  /* ── Page Trade ───────────────────────────────────────────────── */
  html[data-mobile="on"] .trade-toolbar { background: #FFFFFF; border-bottom: none; padding: 6px 16px 10px; }
  html[data-mobile="on"] .trade-toolbar select.v2-fselect { height: 44px !important; }
  html[data-mobile="on"] .trade-content { background: #FFFFFF; padding: 4px 16px 16px; }
  html[data-mobile="on"] .trade-card {
    padding: 14px 16px; margin-bottom: 12px;
    border-left: 1px solid var(--tel-trait) !important;
  }
  html[data-mobile="on"] .trade-card-title { font-size: 15px; font-weight: 900; }
  html[data-mobile="on"] .trade-badge { border-radius: 999px; font-weight: 800; }

  /* ── Parcours de commande ─────────────────────────────────────── */
  /* L'en-tete de l'etape devient le seul en-tete de l'ecran. */
  html[data-mobile="on"] .mob-entete {
    background: #FFFFFF; border-bottom: none;
    padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
    gap: 12px;
  }
  html[data-mobile="on"] .mob-retour {
    width: 44px; height: 44px; border-radius: 14px;
    background: #FFFFFF; border: 1px solid var(--tel-trait);
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"][data-etape="client"] .mob-retour { display: none; }
  html[data-mobile="on"][data-etape="client"] .mob-entete-titre { font-size: 24px; letter-spacing: -.4px; }
  html[data-mobile="on"] .mob-entete-txt { padding-left: 0; }
  html[data-mobile="on"] .mob-entete-titre { font-size: 17px; font-weight: 900; letter-spacing: -.3px; }
  html[data-mobile="on"] .mob-entete-sous { font-size: 12.5px; font-weight: 600; }
  html[data-mobile="on"] .mob-entete-action {
    height: 36px; padding: 0 12px; border-radius: 12px;
    background: #FFFFFF; border: 1px solid var(--tel-trait);
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] .cmd-wrap,
  html[data-mobile="on"] .cmd-body,
  html[data-mobile="on"] .cmd-tab-content { background: #FFFFFF; }

  /* Etape client : recherche enfoncee, resultats en carte. */
  html[data-mobile="on"][data-etape="client"] .cmd-sub > .cmd-bloc:first-child { padding: 4px 16px 16px; }
  html[data-mobile="on"][data-etape="client"] .cmd-sub > .cmd-bloc:first-child .v2-sf {
    height: 48px; border-radius: 16px;
    background: var(--tel-creux); border: 1px solid transparent; box-shadow: var(--tel-enfonce);
  }
  html[data-mobile="on"][data-etape="client"] #pharmDropdown {
    background: #FFFFFF !important;
    border: 1px solid var(--tel-trait) !important;
    border-radius: 20px !important;
    box-shadow: var(--tel-ombre) !important;
  }
  html[data-mobile="on"][data-etape="client"] #pharmDropdown > div { border-bottom-color: var(--tel-trait) !important; }

  /* Etape marque. */
  html[data-mobile="on"][data-etape="marque"] .cmd-sub > .cmd-bloc:nth-child(2) { padding: 4px 16px 16px; }
  html[data-mobile="on"] .mob-marques { padding: 2px 14px; }
  html[data-mobile="on"] .mob-marque { border-bottom-color: var(--tel-trait); }
  html[data-mobile="on"] .mob-marque-ini {
    width: 42px; height: 42px; border-radius: 14px;
    background: var(--tel-creux-vert); color: var(--tel-vert);
    box-shadow: var(--tel-enfonce-s); font-weight: 900;
  }
  html[data-mobile="on"] .mob-marque-nom { font-weight: 900; }
  html[data-mobile="on"] .mob-badge-trade { border-radius: 999px; background: #FBEBD2; color: #8A6510; }

  /* Etape catalogue. */
  html[data-mobile="on"][data-etape="catalogue"] .cmd-cat-toolbar {
    background: #FFFFFF !important; padding: 4px 16px 8px !important;
  }
  html[data-mobile="on"][data-etape="catalogue"] .cmd-cat-toolbar .v2-sf {
    height: 48px; border-radius: 16px;
    background: var(--tel-creux); border: 1px solid transparent; box-shadow: var(--tel-enfonce);
  }
  html[data-mobile="on"] .mob-photo {
    width: 38px; height: 38px; margin-right: -8px; border-radius: 12px;
    background: #FFFFFF; box-shadow: var(--tel-ombre-s); border: 1px solid var(--tel-trait);
    color: var(--text);
  }
  html[data-mobile="on"] .mob-puces { background: #FFFFFF; padding: 2px 16px 12px; }
  html[data-mobile="on"] .mob-trade-lien,
  html[data-mobile="on"] .mob-pcb-note {
    margin: 0 16px 10px; padding: 11px 14px; border-radius: 16px;
    background: #FFFFFF; color: var(--text);
    border: 1px solid var(--tel-trait); box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"] .mob-trade-lien .ms,
  html[data-mobile="on"] .mob-pcb-note .ms { color: #B7791F; }
  html[data-mobile="on"] .mob-trade-lien.mob-trade-commande { margin: 10px 16px 0; }
  /* Chaque famille est une carte ; son titre reste colle en haut. */
  html[data-mobile="on"][data-etape] #zoneCatalogueCommande .cat-block {
    margin: 0 16px 12px;
    background: #FFFFFF;
    border: 1px solid var(--tel-trait); border-radius: 20px;
    box-shadow: var(--tel-ombre);
    overflow: clip;
  }
  html[data-mobile="on"] .cat-header-table thead tr,
  html[data-mobile="on"] .cat-block:not(:first-child) .cat-header-table thead tr {
    background: #FFFFFF; border-top: none; border-bottom: 1px solid var(--tel-trait);
  }
  html[data-mobile="on"] .cat-title { color: var(--tel-gris); letter-spacing: 1.2px; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tbody tr {
    background: #FFFFFF; border-bottom-color: var(--tel-trait);
  }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tbody tr:last-child { border-bottom: none; }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tbody tr.is-active {
    background: #F7FBF9;
  }
  html[data-mobile="on"] .commandes-table:not(.recap-table) tbody tr.row-rupture {
    border-left: none; box-shadow: inset 3px 0 0 #E7A98C;
  }
  html[data-mobile="on"] .commandes-table:not(.recap-table) td.col-desc { font-weight: 800; }

  /* Barre panier : carte flottante, total a gauche. */
  html[data-mobile="on"] .mob-panier {
    margin: 0 10px 6px; padding: 10px 10px 10px 16px;
    background: #FFFFFF;
    border: 1px solid var(--tel-trait); border-radius: 22px;
    box-shadow: var(--tel-ombre);
  }
  html[data-mobile="on"] .mob-panier-lbl { color: var(--tel-gris); }
  html[data-mobile="on"] .mob-panier-tot { font-weight: 900; }

  /* Etape commande (recapitulatif). */
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-bloc:nth-child(3) {
    margin: 4px 16px 0; background: #FFFFFF;
    border: 1px solid var(--tel-trait); border-radius: 20px;
    box-shadow: var(--tel-ombre-s);
  }
  html[data-mobile="on"][data-etape="commande"] .cmd-sub > .cmd-total-bloc {
    margin: 10px 16px 0; border-radius: 20px;
    background: var(--tel-creux) !important; border: none !important;
    box-shadow: var(--tel-enfonce);
  }
  html[data-mobile="on"] .cmd-tot-val { font-weight: 900; letter-spacing: -.6px; }
  html[data-mobile="on"] #tab-recap { padding: 0 16px; }
  html[data-mobile="on"] .recap-table tbody tr {
    background: #FFFFFF !important;
    border: 1px solid var(--tel-trait) !important; border-radius: 20px !important;
    box-shadow: var(--tel-ombre-s);
    padding: 12px 14px; margin-bottom: 10px;
  }
  html[data-mobile="on"] .recap-table td:nth-of-type(2) { font-weight: 900; }
  html[data-mobile="on"] .recap-footer { background: #FFFFFF; border-top: none; padding: 10px 0 14px; }

  /* Feuille « Options de la ligne » et fenetre apres validation. */
  html[data-mobile="on"] .mob-feuille {
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -2px 6px rgba(42, 61, 53, .06), 0 -16px 40px rgba(42, 61, 53, .14);
  }
  html[data-mobile="on"] .mob-feuille-fond { background: rgba(42, 61, 53, .22); }
  html[data-mobile="on"] .mob-opt-row,
  html[data-mobile="on"] .mob-feuille-pied { border-top-color: var(--tel-trait); }
  html[data-mobile="on"] #pdfModalBox { background: #FFFFFF !important; }
  html[data-mobile="on"] #pdfPreviewContainer { background: #FFFFFF; }
  html[data-mobile="on"] #pdfModalActions {
    background: #FFFFFF; border-top: none;
    box-shadow: 0 -8px 24px rgba(42, 61, 53, .08);
  }
  html[data-mobile="on"] .pdf-tel-ico {
    background: var(--tel-creux-vert); color: var(--tel-vert);
    box-shadow: var(--tel-enfonce-s);
  }
  html[data-mobile="on"] .pdf-tel-lignes > div { border-top-color: var(--tel-trait); }
}

/* ── Ajustements apres premiere passe sur le banc ─────────────────── */
@media (max-width: 700px) {
  /* Les cartes « A faire » et « Top pharmacies » debordaient de 4 px : la
     grille 1fr garde le min-content de son contenu (noms longs). */
  html[data-mobile="on"] .dash-grid-1-1 { grid-template-columns: minmax(0, 1fr); }
  html[data-mobile="on"] .dash-grid-1-1 > * { min-width: 0; }
  /* Bascule 2/3 volets : sa coque restait visible, vide, a droite du titre. */
  html[data-mobile="on"] .v2-hdr .v2-view-toggle { display: none; }
  /* Produit : le prix garde une colonne fixe, le nom prend le reste. */
  html[data-mobile="on"] #produitsZone tr[data-prodid] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 72px;
  }
}
@media (max-width: 700px) {
  /* Parcours de commande : une piste de grille en 1fr garde le min-content
     de son contenu. Le nom d'une pharmacie en titre d'etape (nowrap)
     elargissait tout l'ecran a 488 px et poussait « Changer » dehors. */
  html[data-mobile="on"] .cmd-wrap { grid-template-columns: minmax(0, 1fr); }
  html[data-mobile="on"] .cmd-wrap > * { min-width: 0; }
  html[data-mobile="on"] .mob-entete-action { flex-shrink: 0; }
  /* Titre de famille du catalogue : pas de bandeau gris dans la carte. */
  html[data-mobile="on"] .cat-header-table th { background: transparent; border-bottom: none; }
  /* Commandes du tableau de bord : la cellule d'actions porte `width: 1%`
     (index.html, pour la colonne du poste). Passee en bloc, elle mesurait
     3 px et masquait ses boutons (apercu, renvoi) : une rangee vide. */
  html[data-mobile="on"] .cmd-tbl td.cmd-cell-act { width: auto; overflow: visible; }
  html[data-mobile="on"] .cmd-tbl .v2-act-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFFFFF; border: 1px solid var(--tel-trait);
    box-shadow: var(--tel-ombre-s); color: var(--text);
  }
  html[data-mobile="on"] .cmd-tbl .v2-act-btn .ms { font-size: 18px; }
  html[data-mobile="on"] .cmd-tbl td.cmd-cell-act > div { gap: 8px !important; }
  /* Etape marque : la liste prend toute la largeur. */
  html[data-mobile="on"] .mob-marques { width: 100%; align-self: stretch; }
}

@media (max-width: 700px) {
  /* 1re commande : au telephone les lignes sont des cartes (td en bloc) ;
     le fond et le filet passent sur la ligne entiere. */
  html[data-mobile="on"] tr.ligne-premiere {
    background: #F3FAF6 !important;
    box-shadow: inset 3px 0 0 #7FC1A0;
  }
  html[data-mobile="on"] tr.ligne-premiere > td { background: transparent !important; box-shadow: none !important; }
  html[data-mobile="on"] .cmd-tbl tbody tr.ligne-premiere,
  html[data-mobile="on"] #t-ord .v2-tbl tbody tr.ligne-premiere,
  html[data-mobile="on"] #cmdFoBody > tr.ligne-premiere { padding-left: 10px; padding-right: 8px; border-radius: 12px; }
  html[data-mobile="on"] td .badge-premiere { margin-left: 5px; }
  html[data-mobile="on"] #t-ord .v2-tbl td.ord-sup:has(.badge-premiere) { white-space: normal; overflow: visible; }
}