/* Repérage 7G — feuille de styles.
   Mobile d'abord : l'outil est utilisé debout, sur un chantier, à une main.
   Cibles tactiles à 44 px minimum, rien d'essentiel sous le pouce. */

:root {
  --navy:        #0F2444;
  --navy-soft:   #1B3763;
  --orange:      #E8590C;
  --orange-soft: #FFF1E8;
  --vert:        #0E9F6E;
  --rouge:       #E02424;

  --bg:      #F4F6F9;
  --surface: #FFFFFF;
  --surface2:#F8FAFC;
  --champ:   #FFFFFF;
  --txt:     #111827;
  --txt2:    #5B6675;
  --txt3:    #98A2B3;
  --bord:    #E3E8EF;
  --bord2:   #CFD6E0;
  --ombre:   0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --ombre-md:0 4px 16px rgba(16,24,40,.10);
  --ombre-lg:0 12px 40px rgba(16,24,40,.18);
  --r:  12px;
  --r-s: 9px;
  --t: .18s cubic-bezier(.4,0,.2,1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html[data-theme="dark"] {
  --bg:      #0B1220;
  --surface: #131B2B;
  --surface2:#182136;
  --champ:   #0E1626;
  --txt:     #E8EDF5;
  --txt2:    #9AA7BC;
  --txt3:    #64748B;
  --bord:    #24304A;
  --bord2:   #33415F;
  --orange-soft: #3A2313;
  --ombre:   0 1px 3px rgba(0,0,0,.4);
  --ombre-md:0 4px 16px rgba(0,0,0,.45);
  --ombre-lg:0 12px 40px rgba(0,0,0,.6);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--txt);
  font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
input, select, textarea, button { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--orange); }

.hide { display: none !important; }

/* ══ Barre supérieure ══════════════════════════════════════════════ */
.top {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy); color: #fff;
  padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--ombre-md);
}
.top-t   { font-weight: 650; font-size: 15px; line-height: 1.2; }
.top-s   { font-size: 11.5px; color: #9FB3D1; line-height: 1.3;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-mid { flex: 1; min-width: 0; }
.tbtn {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.10); transition: background var(--t);
}
.tbtn:active { background: rgba(255,255,255,.24); }
.tbtn svg { width: 19px; height: 19px; }

.chip-user {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.10); border-radius: 999px;
  padding: 5px 11px 5px 5px; font-size: 12.5px; font-weight: 600;
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 800;
}

/* état d'enregistrement */
.sync { font-size: 11px; color: #9FB3D1; display: flex; align-items: center; gap: 5px; }
.sync b { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.sync.att b { background: #F5A524; animation: pulse 1s infinite; }
.sync.err b { background: var(--rouge); }
@keyframes pulse { 50% { opacity: .25; } }

/* ══ Structure ═════════════════════════════════════════════════════ */
.wrap { max-width: 900px; margin: 0 auto; padding: 14px 14px 132px; }
.wrap.slim { max-width: 460px; }

.card {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r); box-shadow: var(--ombre); margin-bottom: 12px;
  overflow: hidden;
}

/* accordéon : le volet terrain ne doit jamais manger l'écran */
.acc > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 13px 14px; display: flex; align-items: center; gap: 11px;
  font-weight: 620; font-size: 14.5px;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary .ico {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface2); color: var(--navy); flex: 0 0 30px;
}
html[data-theme="dark"] .acc > summary .ico { color: #8FB4EA; }
.acc > summary .ico svg { width: 16px; height: 16px; }
.acc > summary .grow { flex: 1; min-width: 0; }
.acc > summary .sub { font-weight: 400; font-size: 11.5px; color: var(--txt2); }
.acc > summary .chev { color: var(--txt3); transition: transform var(--t); flex: 0 0 auto; }
.acc[open] > summary .chev { transform: rotate(180deg); }
.acc[open] > summary { border-bottom: 1px solid var(--bord); }
.acc-body { padding: 14px; }

.pastille {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center;
}
.pastille.vide { background: var(--bord); color: var(--txt2); }

/* ══ Champs ════════════════════════════════════════════════════════ */
.lbl { display: block; font-size: 11.5px; font-weight: 600; color: var(--txt2);
       text-transform: uppercase; letter-spacing: .03em; margin-bottom: 5px; }
.inp, .sel, .txa {
  width: 100%; padding: 11px 12px; background: var(--champ);
  border: 1px solid var(--bord2); border-radius: var(--r-s);
  font-size: 15px; transition: border-color var(--t), box-shadow var(--t);
}
.inp:focus, .sel:focus, .txa:focus {
  outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,36,68,.12);
}
html[data-theme="dark"] .inp:focus, html[data-theme="dark"] .sel:focus, html[data-theme="dark"] .txa:focus {
  border-color: #4C7FD4; box-shadow: 0 0 0 3px rgba(76,127,212,.2);
}
.txa { min-height: 76px; resize: vertical; }
.fg { margin-bottom: 12px; }
.fg:last-child { margin-bottom: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

/* ══ Boutons ═══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r-s); font-weight: 620; font-size: 14.5px;
  border: 1px solid var(--bord2); background: var(--surface); color: var(--txt);
  transition: transform var(--t), background var(--t), border-color var(--t);
  min-height: 44px;
}
.btn:active { transform: scale(.975); }
.btn svg { width: 17px; height: 17px; flex: 0 0 17px; }
.btn.p  { background: var(--navy);   color: #fff; border-color: var(--navy); }
.btn.o  { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn.g  { background: var(--vert);   color: #fff; border-color: var(--vert); }
.btn.d  { color: var(--rouge); border-color: transparent; }
.btn.bl { width: 100%; }
.btn.sm { padding: 7px 11px; min-height: 34px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ══ Lignes de chiffrage — le cœur de l'outil ══════════════════════ */
.lignes { display: flex; flex-direction: column; gap: 9px; }

.ligne {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r); padding: 11px 12px; box-shadow: var(--ombre);
  position: relative;
}
.ligne.titre {
  background: var(--navy); border-color: var(--navy); padding: 9px 12px;
}
.ligne.titre .l-des { color: #fff; font-weight: 700; text-transform: uppercase;
                      letter-spacing: .04em; font-size: 13px; }

.l-haut { display: flex; align-items: flex-start; gap: 9px; }
.l-des {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; line-height: 1.32;
  border: 0; background: none; padding: 2px 0; resize: none; overflow: hidden;
}
.l-des:focus { outline: 0; }
.l-det {
  width: 100%; border: 0; background: none; padding: 1px 0;
  font-size: 12px; color: var(--txt2); resize: none; overflow: hidden;
}
.l-det:focus { outline: 0; }
.l-code {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--txt2);
  background: var(--surface2); border: 1px solid var(--bord);
  border-radius: 5px; padding: 2px 6px; display: inline-block; margin-bottom: 4px;
}
.l-menu { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px;
          display: grid; place-items: center; color: var(--txt3); }
.l-menu:active { background: var(--surface2); }

.l-calc {
  display: grid; grid-template-columns: 64px 60px 14px 1fr auto; gap: 7px;
  align-items: center; margin-top: 9px;
}
.l-calc .x { text-align: center; color: var(--txt3); font-size: 13px; }
.num {
  width: 100%; padding: 9px 10px; text-align: right;
  background: var(--champ); border: 1px solid var(--bord2);
  border-radius: 8px; font-size: 15px; font-variant-numeric: tabular-nums;
}
.num:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,36,68,.12); }

/* Prix proposé mais pas encore validé par le commercial.
   Gris = sa propre grille · orange = celle d'un collègue. */
.num.sugg      { color: var(--txt3); font-style: italic; border-style: dashed; }
.num.sugg-autre{ color: var(--orange); font-style: italic; border-style: dashed;
                 border-color: var(--orange); background: var(--orange-soft); }

.l-tot { font-weight: 750; font-size: 15px; font-variant-numeric: tabular-nums;
         white-space: nowrap; min-width: 84px; text-align: right; }

.pc {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px;
  font-size: 11.5px; font-weight: 600; padding: 7px 11px; border-radius: 999px; min-height: 32px;
  background: var(--surface2); color: var(--txt2); border: 1px solid var(--bord);
}
.pc.autre { background: var(--orange-soft); color: var(--orange); border-color: #F5C9AC; }
html[data-theme="dark"] .pc.autre { border-color: #6B3A16; }
.pc b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pc .tag {
  background: var(--orange); color: #fff; border-radius: 4px;
  padding: 1px 5px; font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
.pc-hist { margin-left: 2px; opacity: .65; }

/* ══ Barre de total, collée en bas ═════════════════════════════════ */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: var(--surface); border-top: 1px solid var(--bord);
  box-shadow: 0 -4px 20px rgba(16,24,40,.10);
  padding: 10px 14px calc(10px + var(--safe-b));
}
.barre-in { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.tot-ht  { font-size: 11px; color: var(--txt2); text-transform: uppercase; letter-spacing: .04em; }
.tot-val { font-size: 21px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tot-ttc { font-size: 11.5px; color: var(--txt2); font-variant-numeric: tabular-nums; }

/* ══ Feuille modale (sélecteur de produit) ═════════════════════════ */
.voile {
  position: fixed; inset: 0; z-index: 90; background: rgba(9,16,30,.5);
  height: 100vh; height: 100dvh;
  backdrop-filter: blur(2px); display: flex; align-items: flex-end; justify-content: center;
  animation: fadein .16s ease;
}
@keyframes fadein { from { opacity: 0; } }
.sheet {
  background: var(--bg); width: 100%; max-width: 720px;
  border-radius: 18px 18px 0 0; max-height: 92vh; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes up { from { transform: translateY(26px); opacity: .6; } }
.sheet.mid { border-radius: 16px; max-height: 84vh; max-height: 82dvh; margin: auto; }
.voile.centre { align-items: center; padding: 16px; }

.sheet-top {
  padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--bord);
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.sheet-t { font-weight: 700; font-size: 16px; flex: 1; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 20px; }
.poignee {
  flex: 0 0 auto; width: 100%; height: 32px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.poignee::before { content: ''; width: 44px; height: 5px; background: var(--bord2); border-radius: 3px; }
.poignee:active::before { background: var(--txt3); }

.seg { display: flex; background: var(--surface2); border: 1px solid var(--bord);
       border-radius: 10px; padding: 3px; gap: 3px; }
.seg button {
  flex: 1; padding: 8px 6px; border-radius: 7px; font-size: 13.5px; font-weight: 620;
  color: var(--txt2); transition: background var(--t), color var(--t);
}
.seg button.on { background: var(--surface); color: var(--txt); box-shadow: var(--ombre); }

.recherche { position: relative; }
.recherche .inp { padding-left: 38px; font-size: 16px; }
.recherche svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
                 width: 17px; height: 17px; color: var(--txt3); }

.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--bord2); background: var(--surface); color: var(--txt2);
  white-space: nowrap;
}
.chips button.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* résultats */
.res { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.res-item {
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-s);
  padding: 11px 12px; display: flex; align-items: center; gap: 11px;
  transition: border-color var(--t), transform var(--t); text-align: left; width: 100%;
}
.res-item:active { transform: scale(.99); border-color: var(--navy); }
.res-main { flex: 1; min-width: 0; }
.res-t { font-weight: 620; font-size: 14px; line-height: 1.3;
         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-s { font-size: 11.5px; color: var(--txt2); margin-top: 3px;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-p { text-align: right; flex: 0 0 auto; }
.res-p .v { font-weight: 750; font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--txt2); }
.res-p .v.autre { color: var(--orange); }
.res-p .n { font-size: 10.5px; color: var(--txt3); }
.res-p .tag { display: inline-block; background: var(--orange); color: #fff; border-radius: 4px;
              padding: 1px 5px; font-size: 9.5px; font-weight: 800; margin-top: 2px; }

.vide-msg { text-align: center; padding: 34px 16px; color: var(--txt2); }
.vide-msg svg { width: 40px; height: 40px; color: var(--bord2); margin-bottom: 10px; }

/* ══ Photos ════════════════════════════════════════════════════════ */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
.pcell { position: relative; aspect-ratio: 4/3; border-radius: var(--r-s); overflow: hidden;
         background: var(--surface2); border: 1px solid var(--bord); }
.pcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcell .sup {
  position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(9,16,30,.62); color: #fff; display: grid; place-items: center; font-size: 15px;
}
.pdrop {
  border: 2px dashed var(--bord2); border-radius: var(--r-s); padding: 22px 14px;
  text-align: center; color: var(--txt2); background: var(--surface2);
}

/* ══ Signature ═════════════════════════════════════════════════════ */
.sig { border: 1px solid var(--bord2); border-radius: var(--r-s); background: #fff;
       height: 148px; touch-action: none; width: 100%; display: block; }

/* ══ Liste des fiches ══════════════════════════════════════════════ */
.fiche-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r);
  padding: 13px 14px; margin-bottom: 9px; box-shadow: var(--ombre);
  transition: transform var(--t);
}
.fiche-item:active { transform: scale(.99); }
.fiche-ref { font-size: 11px; color: var(--txt3); font-weight: 700; letter-spacing: .04em; }
.fiche-cli { font-weight: 650; font-size: 15px; line-height: 1.25;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiche-meta { font-size: 11.5px; color: var(--txt2); margin-top: 2px; }
.fiche-tot { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px;
         font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.badge.br { background: #FEF3C7; color: #92400E; }
.badge.fi { background: #D1FAE5; color: #065F46; }
html[data-theme="dark"] .badge.br { background: #452C08; color: #FCD34D; }
html[data-theme="dark"] .badge.fi { background: #06371F; color: #6EE7B7; }

/* ══ Connexion ═════════════════════════════════════════════════════ */
.login { min-height: 100dvh; display: flex; flex-direction: column;
         justify-content: center; padding: 24px 18px; background: var(--navy); }
.login-box { width: 100%; max-width: 380px; margin: 0 auto; }
.login-logo { text-align: center; margin-bottom: 26px; color: #fff; }
.login-logo .n { font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.login-logo .s { font-size: 13px; color: #9FB3D1; margin-top: 3px; }
.profils { display: grid; gap: 9px; margin-bottom: 16px; }
.profil {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14);
  border-radius: var(--r); padding: 12px 14px; color: #fff; transition: all var(--t);
}
.profil:active { transform: scale(.985); }
.profil.on { background: rgba(232,89,12,.16); border-color: var(--orange); }
.profil .avatar { width: 38px; height: 38px; font-size: 14px; flex: 0 0 38px; }
.profil .nm { font-weight: 650; font-size: 15px; }
.profil .rl { font-size: 11.5px; color: #9FB3D1; }
.login .inp { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.login .inp::placeholder { color: #7D93B5; }
.login .inp:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,89,12,.22); }
.err { background: #FEE2E2; color: #991B1B; padding: 10px 12px; border-radius: var(--r-s);
       font-size: 13.5px; margin-bottom: 12px; }

/* ══ Notification ══════════════════════════════════════════════════ */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%) translateY(14px);
  background: var(--navy); color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; box-shadow: var(--ombre-lg);
  opacity: 0; pointer-events: none; transition: all .22s cubic-bezier(.2,.8,.3,1); z-index: 200;
  max-width: 88vw; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══ Historique produit ════════════════════════════════════════════ */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-s);
        padding: 9px 8px; text-align: center; }
.stat .v { font-weight: 750; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 10px; color: var(--txt2); text-transform: uppercase; letter-spacing: .03em; }
.vente { display: flex; align-items: center; gap: 10px; padding: 9px 0;
         border-bottom: 1px solid var(--bord); font-size: 13px; }
.vente:last-child { border-bottom: 0; }
.vente .qui { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px;
              background: var(--surface2); color: var(--txt2); flex: 0 0 auto; }
.vente .qui.autre { background: var(--orange); color: #fff; }
.vente .px { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (min-width: 700px) {
  .l-calc { grid-template-columns: 90px 74px 16px 150px 1fr; }
  .l-tot { text-align: right; }
}

/* ══════════════════════════════════════════════════════════════════════
   AJOUTS DU 08/09/2026
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hors ligne ──────────────────────────────────────────────────────── */
.bandeau-hl {
  position: sticky; top: 0; z-index: 80;
  background: #F5A524; color: #3A2708;
  font-size: 12.5px; font-weight: 620; text-align: center;
  padding: 7px 12px; line-height: 1.3;
}
.pattente {
  position: absolute; left: 5px; bottom: 5px;
  background: #F5A524; color: #3A2708; font-size: 9.5px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px; letter-spacing: .02em;
}
.badge.at { background: #FEF0D3; color: #92610E; }
html[data-theme="dark"] .badge.at { background: #423008; color: #F5C044; }

/* ── Unité sur la ligne ──────────────────────────────────────────────── */
select.unite {
  width: 100%; padding: 9px 4px; text-align: center;
  background: var(--champ); border: 1px solid var(--bord2);
  border-radius: 8px; font-size: 13px; color: var(--txt2);
  -webkit-appearance: none; appearance: none;
}
select.unite:focus { outline: 0; border-color: var(--navy); }

/* ── Sous-total de section ───────────────────────────────────────────── */
.sous-tot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px; margin: -3px 0 2px;
  background: var(--surface2); border: 1px solid var(--bord);
  border-radius: var(--r-s); font-size: 12.5px; color: var(--txt2);
}
.sous-tot b { font-size: 14px; color: var(--txt); font-variant-numeric: tabular-nums; }

/* ── Compteur dans les résultats ─────────────────────────────────────── */
.pas { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pas-p, .pas-m {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: 17px; font-weight: 700; line-height: 1;
  border: 1px solid var(--bord2); background: var(--surface); color: var(--txt2);
}
.pas-p { background: var(--navy); border-color: var(--navy); color: #fff; }
.pas-n { min-width: 20px; text-align: center; font-weight: 750; font-size: 14px; }
.res-item.compte { border-color: var(--navy); background: var(--surface2); }

.sel-panier {
  flex: 0 0 auto; padding: 10px 14px calc(10px + var(--safe-b));
  background: var(--surface); border-top: 1px solid var(--bord);
  box-shadow: 0 -4px 16px rgba(16,24,40,.10);
}

/* ── Case à cocher ───────────────────────────────────────────────────── */
.ck {
  flex: 0 0 20px; width: 20px; height: 20px;
  border: 2px solid var(--bord2); border-radius: 5px;
  display: grid; place-items: center; transition: all var(--t);
}
.ck.on { background: var(--navy); border-color: var(--navy); }

/* ── Client : suggestions et statut ──────────────────────────────────── */
.suggestions { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.suggestions:empty { margin-top: 0; }
.sugg {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 9px 11px; font-size: 13.5px;
  background: var(--surface2); border: 1px solid var(--bord); border-radius: 8px;
}
.sugg span { font-size: 11px; color: var(--txt3); flex: 0 0 auto; }
.sugg:active { border-color: var(--navy); }

#zone-client-nouveau:not(:empty) { margin-top: 8px; }
.chip-nouveau {
  display: block; width: 100%; text-align: left;
  background: #FEECEC; color: #8F1D1D; border: 1px solid #F3BDBD;
  border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.35;
}
.chip-nouveau b { font-weight: 800; letter-spacing: .02em; }
html[data-theme="dark"] .chip-nouveau { background: #3A1414; color: #FCA5A5; border-color: #6B2020; }
.chip-connu {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  background: #E6F6EE; color: #0A6B4A; border: 1px solid #BFE7D5;
  border-radius: 999px; padding: 4px 10px;
}
html[data-theme="dark"] .chip-connu { background: #08331F; color: #6EE7B7; border-color: #12543A; }

/* ── Dictée ──────────────────────────────────────────────────────────── */
.champ-mic { position: relative; display: block; flex: 1; min-width: 0; }
.champ-mic .inp, .champ-mic .txa { padding-right: 44px; }
.mic {
  position: absolute; right: 6px; top: 6px;
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--txt3); background: transparent; transition: all var(--t);
}
.mic:active { background: var(--surface2); }
.mic.on { background: var(--rouge); color: #fff; animation: pulse 1.1s infinite; }

/* ── Destinataires ───────────────────────────────────────────────────── */
.dest-liste { display: flex; flex-direction: column; gap: 6px; }
.dest {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-s); padding: 10px 12px; font-size: 13.5px;
}
.dest:active { border-color: var(--navy); }
.v-info { color: var(--txt3); vertical-align: 1px; margin-left: 3px; opacity: .75; }
.res-p { cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════
   CORRECTIFS D'AFFICHAGE MOBILE — 08/09/2026
   ══════════════════════════════════════════════════════════════════════ */

/* Un champ sous 16 px fait ZOOMER Safari et Chrome iOS à la mise au point.
   Et une fois la page zoomée, les feuilles modales sortent de l'écran :
   la croix de fermeture devient inatteignable. C'était le défaut signalé.
   On force donc 16 px sur tout ce qui reçoit la saisie, sur écran mobile. */
@media (max-width: 820px) {
  .inp, .sel, .txa, .num, .l-des, .l-det, select.unite,
  input, select, textarea { font-size: 16px !important; }
  .l-det { color: var(--txt2); }
  .l-des { font-size: 16px !important; }
}

/* Le fond ne doit pas défiler sous une feuille ouverte : sur mobile on croit
   fermer la feuille alors qu'on fait glisser la page derrière. */
body.fige { overflow: hidden; }

/* Bandeau d'aide à la fermeture, visible seulement si la page est zoomée. */
.sheet-top { position: sticky; top: 0; z-index: 2; }