/* Facturation certifiée : feuille de style de l'application */

@font-face { font-family: "Work Sans"; src: url(fonts/WorkSans-Regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(fonts/WorkSans-Italic.woff) format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url(fonts/WorkSans-Bold.woff) format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/IBMPlexMono-Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/IBMPlexMono-Bold.woff) format("woff"); font-weight: 700; font-display: swap; }

:root {
  --ink: #18223d;
  --ink-2: #4a5470;
  --ink-3: #737c94;
  --paper: #ffffff;
  --desk: #e8ebf0;
  --desk-2: #dde1e8;
  --rule: #cdd3dd;
  --rule-soft: #e3e7ed;
  --stamp: #2843a3;
  --stamp-hover: #1f3688;
  --stamp-tint: #e6eaf7;
  --ok: #1c6a45;
  --ok-tint: #e2f0e8;
  --refus: #a3271c;
  --refus-tint: #f7e4e1;
  --veille: #8a5800;
  --veille-tint: #f8edd5;
  --sans: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Plex Mono", "Courier New", monospace;
  --r: 4px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--desk); color: var(--ink);
  font-family: var(--sans); line-height: 1.5; font-variant-numeric: tabular-nums lining-nums;
}
a { color: var(--stamp); text-underline-offset: 2px; }
a:hover { color: var(--stamp-hover); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; }
h1 { font-size: 1.6rem; letter-spacing: -0.015em; }
h2 { font-size: 1.07rem; }
h3 { font-size: .93rem; }
p { margin: 0 0 .75rem; max-width: 72ch; }
.ic { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.discret { color: var(--ink-3); }
.nombre { text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------ structure */
.app {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(to right, var(--paper) 231px, var(--rule) 231px 232px, transparent 232px);
}
.rail {
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; padding: 20px 14px 16px; position: sticky; top: 0; height: 100vh;
}
.rail { overflow-y: auto; }
.marque { padding: 0 8px 20px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 14px; }
.marque-nom { font-weight: 700; font-size: 1rem; line-height: 1.25; display: block; color: var(--ink); text-decoration: none; }
.marque-sous { font-size: .8rem; color: var(--ink-3); }
.nav-groupe { margin-bottom: 14px; }
.depot-courant { margin: 0 0 14px; padding: 0 8px; font-size: .87rem; color: var(--ink-2); }
.depot-courant label { font-size: .78rem; color: var(--ink-3); margin-bottom: 3px; }
.depot-courant select { min-height: 34px; padding: 5px 8px; font-weight: 600; }
.en-negatif { color: var(--refus); font-weight: 600; }
.nav-titre { font-size: .78rem; color: var(--ink-3); padding: 0 10px 4px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r);
  color: var(--ink-2); text-decoration: none; font-size: .95rem;
}
.nav a:hover { background: var(--desk); color: var(--ink); }
.nav a.actif { background: var(--stamp-tint); color: var(--stamp); font-weight: 600; box-shadow: inset 3px 0 0 var(--stamp); }
.nav a.nav-caisse { background: var(--stamp); color: #fff; font-weight: 600; margin-bottom: 14px; padding: 10px; }
.nav a.nav-caisse:hover { background: var(--stamp-hover); }
.rail-pied { margin-top: auto; border-top: 1px solid var(--rule-soft); padding: 12px 10px 0; font-size: .87rem; }
.rail-pied strong { display: block; }
.rail-pied strong { margin-bottom: 4px; }
.rail-pied a { color: var(--ink-2); display: inline-block; white-space: nowrap; margin: 0 12px 2px 0; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.contenu { padding: 26px 32px 56px; max-width: 1240px; width: 100%; }

/* bandeau d'état du MCF : visible sur toutes les pages (§C2h) */
.etat-mcf {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 9px 32px; background: var(--paper); border-bottom: 1px solid var(--rule); font-size: .87rem; color: var(--ink-2);
}
.etat-mcf a { color: inherit; text-decoration: none; display: contents; }
.voyant { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.voyant::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint); }
.voyant.hors-ligne::before { background: var(--refus); box-shadow: 0 0 0 3px var(--refus-tint); }
.voyant.alerte::before { background: var(--veille); box-shadow: 0 0 0 3px var(--veille-tint); }
.etat-mcf .ecart { margin-left: auto; }
.etat-mcf .alerte-texte { color: var(--veille); font-weight: 600; }
.etat-mcf .refus-texte { color: var(--refus); font-weight: 600; }

/* ------------------------------------------------------------ en-tête de page */
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.entete p { margin: 6px 0 0; color: var(--ink-2); }
.entete .actions { margin-left: auto; }

/* ------------------------------------------------------------ surfaces */
.feuille { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); }
.feuille + .feuille, .feuille + .bloc, .bloc + .feuille { margin-top: 18px; }
.feuille-corps { padding: 18px 20px; }
.feuille-titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule-soft); }
.bloc { margin-bottom: 26px; }
.bloc > h2 { margin-bottom: 10px; }
.colonnes { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.colonnes-3 { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* chiffres clés */
.releve { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); margin-bottom: 26px; }
.releve > div { padding: 16px 20px; border-left: 1px solid var(--rule-soft); }
.releve > div:first-child { border-left: 0; }
.releve dt { font-size: .85rem; color: var(--ink-2); }
.releve dd { margin: 4px 0 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; }
.releve dd small { font-size: .8rem; font-weight: 400; color: var(--ink-3); margin-left: 3px; }

.fiche { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 22px; margin: 0; }
.fiche dt { color: var(--ink-3); }
.fiche dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ tableaux */
.tableau-zone { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rule-soft); }
thead th { font-size: .84rem; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--rule); background: #f7f8fa; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.lien { cursor: pointer; }
tbody tr.lien:hover td { background: #f5f7fb; }
td .secondaire { display: block; font-size: .84rem; color: var(--ink-3); }
.vide { padding: 34px 20px; text-align: center; color: var(--ink-2); }
.vide p { margin: 0 auto 12px; }

/* ------------------------------------------------------------ formulaires */
label, .etiquette { display: block; font-size: .87rem; color: var(--ink-2); margin-bottom: 5px; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid #b9c1ce; border-radius: var(--r); padding: 8px 10px; min-height: 38px;
}
input:hover, select:hover, textarea:hover { border-color: #97a1b2; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--stamp); box-shadow: 0 0 0 3px var(--stamp-tint); }
input[readonly] { background: #f4f6f9; color: var(--ink-2); }
input.nombre { text-align: right; }
.champ { margin-bottom: 14px; }
.champ .aide { font-size: .83rem; color: var(--ink-3); margin-top: 4px; }
.champ.erreur input, .champ.erreur select { border-color: var(--refus); }
.grille { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.grille .large { grid-column: 1 / -1; }
.grille .double { grid-column: span 2; }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { font-weight: 700; font-size: 1.02rem; padding: 0; margin-bottom: 12px; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix label { margin: 0; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix span {
  display: inline-block; padding: 7px 12px; border: 1px solid #b9c1ce; border-radius: var(--r);
  color: var(--ink-2); cursor: pointer; background: var(--paper); font-size: .92rem;
}
.choix input:checked + span { border-color: var(--stamp); background: var(--stamp-tint); color: var(--stamp); font-weight: 600; }
.choix input:focus-visible + span { outline: 2px solid var(--stamp); outline-offset: 2px; }
details > summary { cursor: pointer; color: var(--stamp); font-size: .92rem; margin: 4px 0 10px; }

/* ------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px;
  padding: 7px 14px; border-radius: var(--r); border: 1px solid #b9c1ce; background: var(--paper);
  color: var(--ink); font: inherit; font-weight: 600; font-size: .93rem; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: #8f9aac; background: #f6f7f9; color: var(--ink); }
.btn-principal { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.btn-principal:hover { background: var(--stamp-hover); border-color: var(--stamp-hover); color: #fff; }
.btn-valider { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-valider:hover { background: #155636; border-color: #155636; color: #fff; }
.btn-danger { color: var(--refus); }
.btn-danger:hover { border-color: var(--refus); color: var(--refus); background: var(--refus-tint); }
.btn-lien { border-color: transparent; background: none; color: var(--stamp); padding-left: 6px; padding-right: 6px; }
.btn-lien:hover { background: var(--stamp-tint); border-color: transparent; color: var(--stamp-hover); }
.btn-grand { min-height: 48px; padding: 10px 22px; font-size: 1.02rem; }
.btn-icone { padding: 0; width: 34px; min-height: 34px; }
.btn[disabled] { opacity: .55; cursor: progress; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.en-ligne { display: inline; }

/* ------------------------------------------------------------ messages */
.note { display: flex; gap: 12px; padding: 12px 16px; border-radius: var(--r); margin-bottom: 18px; border: 1px solid; background: var(--paper); }
.note .ic { margin-top: 2px; }
.note p { margin: 0; }
.note p + p { margin-top: 4px; }
.note-ok { border-color: #a9cfb9; background: var(--ok-tint); color: #154e33; }
.note-refus { border-color: #e2b2aa; background: var(--refus-tint); color: #7a1d14; }
.note-alerte { border-color: #e7cf98; background: var(--veille-tint); color: #5e3d00; }
.note-info { border-color: #bcc6e6; background: var(--stamp-tint); color: #1d2f72; }

.statut { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; white-space: nowrap; }
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.statut-brouillon { color: var(--ink-3); }
.statut-en_cours { color: var(--stamp); }
.statut-certifiee { color: var(--ok); }
.statut-erreur { color: var(--refus); }
.code-type { display: inline-block; min-width: 2.4em; font-weight: 700; color: var(--ink-2); }

/* ------------------------------------------------------------ filtres */
.filtres { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.filtres .champ { margin: 0; min-width: 150px; }
.filtres .champ-recherche { flex: 1 1 240px; }

/* ------------------------------------------------------------ composition de la facture */
.composer { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.composer-aside { position: sticky; top: 18px; }
/* ------------------------------------------------------------ panier (facture et mouvement) */
.panier { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); counter-reset: ligne; }
.panier-titre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.panier-titre h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.panier-titre h2 .ic { color: var(--ink-3); }
.panier-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--desk); color: var(--ink-2); font-size: .78rem; font-weight: 700; display: inline-grid; place-items: center; }
.panier-entete, .ligne-principale { display: grid; grid-template-columns: 26px minmax(0, 1fr) 112px 128px 104px 64px; column-gap: 12px; align-items: center; }
.panier-mvt .panier-entete, .panier-mvt .ligne-principale { grid-template-columns: 26px minmax(0, 1fr) 96px 128px 96px 36px; }
/* une ligne sur deux rangs : désignation en entier, puis détails, prix, quantité et montant */
.ligne-principale { grid-template-areas: "num des des des des act" "num inf prix qte mt act"; row-gap: 4px; }
.ligne-num { grid-area: num; }
.c-designation { grid-area: des; }
.ligne-infos { grid-area: inf; }
.c-prix, .c-stock { grid-area: prix; }
.c-qte { grid-area: qte; }
.c-montant, .c-resultat { grid-area: mt; }
.c-actions { grid-area: act; align-self: start; }
.panier-entete { padding: 8px 16px 6px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-soft); }
.panier-entete .nombre { text-align: right; }
.panier-entete .centre { text-align: center; }
.ligne { counter-increment: ligne; border-bottom: 1px solid var(--rule-soft); transition: opacity .16s, transform .16s; }
.ligne:last-child { border-bottom: 0; }
.ligne.retiree { opacity: 0; transform: translateX(12px); }
.ligne-principale { padding: 10px 16px; }
.ligne-num { width: 24px; height: 24px; border-radius: 50%; background: var(--desk); color: var(--ink-2); font-size: .76rem; font-weight: 700; display: grid; place-items: center; align-self: start; margin-top: 4px; }
.ligne-num::before { content: counter(ligne); }
.c-designation { min-width: 0; }
.saisie-designation { font-weight: 600; min-height: 34px; padding: 5px 9px; }
.verrouillee .saisie-designation { border-color: transparent; background: none; padding-left: 0; box-shadow: none; color: var(--ink); }
.ligne-nom { display: block; font-weight: 600; line-height: 1.3; padding-top: 5px; overflow-wrap: anywhere; }
.ligne-infos { display: flex; gap: 4px 12px; align-items: center; flex-wrap: wrap; font-size: .78rem; color: var(--ink-3); min-height: 22px; min-width: 0; }
.info-code:empty, .stock-ligne:empty { display: none; }
.info-code { font-family: var(--mono); font-size: .74rem; }
.puce-groupe { field-sizing: content; width: auto; min-height: 0; height: 22px; padding: 0 22px 0 8px; font-size: .74rem; font-weight: 600; color: var(--ink-2); border-radius: 999px; background-color: var(--desk); border-color: transparent; background-position: right 6px center; background-size: 10px; }
.puce-groupe.verrou { pointer-events: none; appearance: none; -webkit-appearance: none; padding-right: 8px; background-image: none; }
.c-prix input { min-height: 36px; padding: 6px 9px; text-align: right; }
.verrouillee .c-prix input { border-color: transparent; background: none; box-shadow: none; padding-right: 0; color: var(--ink-2); }
.c-montant { text-align: right; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.c-stock, .c-resultat { text-align: right; font-size: .9rem; white-space: nowrap; color: var(--ink-2); }
.c-stock.negatif, .c-resultat.en-moins { color: var(--refus); font-weight: 600; }
.c-resultat.en-plus { color: var(--ok); font-weight: 600; }
.c-actions { display: flex; justify-content: flex-end; gap: 2px; }
.btn-retirer:hover { color: var(--refus); }
.ligne.insuffisant .c-stock { color: var(--refus); font-weight: 600; }
.ligne.insuffisant .pas-a-pas { border-color: var(--refus); }

/* quantité : moins, saisie, plus */
.pas-a-pas { display: flex; align-items: stretch; height: 36px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); overflow: hidden; margin: 0 auto; max-width: 132px; }
.pas-a-pas:focus-within { border-color: var(--stamp); box-shadow: 0 0 0 3px var(--stamp-tint); }
.pas-a-pas button { flex: 0 0 34px; border: 0; background: #f4f6f9; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; padding: 0; }
.pas-a-pas button:hover { background: var(--stamp-tint); color: var(--stamp); }
.pas-a-pas button .ic { width: 14px; height: 14px; }
.pas-a-pas input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; border: 0; border-radius: 0; text-align: center; font-weight: 700; padding: 0 2px; box-shadow: none; }
.pas-a-pas input:focus { outline: none; box-shadow: none; }

/* panneaux de ligne : prix modifié, taxe spécifique, ligne libre */
.panneau { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; margin: -2px 16px 12px 52px; padding: 10px 14px 0; background: #f7f8fb; border: 1px solid var(--rule-soft); border-left: 3px solid var(--rule); border-radius: var(--r); }
.panneau .champ { flex: 0 1 150px; margin-bottom: 10px; }
.panneau .champ-large { flex: 1 1 200px; }
.panneau .champ label { font-size: .78rem; margin-bottom: 3px; }
.panneau input, .panneau select { min-height: 34px; padding: 5px 9px; }
.panneau .btn-lien { margin-bottom: 10px; padding-left: 4px; padding-right: 4px; }
.panneau-titre { flex: 1 0 100%; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.panneau-prix { border-left-color: var(--veille); background: #fdf9f0; }
.panneau-prix .panneau-titre { color: var(--veille); }
.panneau-ts { border-left-color: var(--stamp); }
.panneau-ts .panneau-titre { color: var(--stamp); }
.panneau input[readonly] { background: transparent; border-color: transparent; font-weight: 600; color: var(--ink); padding-left: 0; text-align: left; }
.requis { font-weight: 400; color: var(--ink-3); font-size: .72rem; margin-left: 4px; }
.panneau input:required:placeholder-shown { border-color: var(--veille); }
.ts-calcul { align-self: center; font-size: .82rem; color: var(--ink-2); margin-bottom: 10px; }
.ts-calcul:empty { display: none; }
.ligne.prix-modifie .c-prix input { border-color: var(--veille); background: #fffaf0; }
.segments { display: inline-flex; border: 1px solid #b9c1ce; border-radius: var(--r); overflow: hidden; background: var(--paper); height: 34px; }
.segments button { font: inherit; font-size: .88rem; border: 0; background: none; padding: 0 12px; color: var(--ink-2); cursor: pointer; }
.segments button + button { border-left: 1px solid #b9c1ce; }
.segments button[aria-pressed="true"] { background: var(--stamp); color: #fff; font-weight: 600; }
.panier-outils { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mode-prix { display: inline-flex; align-items: center; gap: 0; font-size: .86rem; }
.mode-prix > span { color: var(--ink-3); margin-right: 8px; }
.mode-prix label { margin: 0; color: var(--ink-2); }
.mode-prix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-prix label span { display: block; padding: 4px 14px; border: 1px solid #b9c1ce; cursor: pointer; font-weight: 600; }
.mode-prix label:first-of-type span { border-radius: var(--r) 0 0 var(--r); }
.mode-prix label:last-of-type span { border-radius: 0 var(--r) var(--r) 0; border-left: 0; }
.mode-prix input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.mode-prix input:focus-visible + span { outline: 2px solid var(--stamp); outline-offset: 2px; }

.panier-vide { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 14px 16px; padding: 26px 16px; border: 1.5px dashed var(--rule); border-radius: 6px; color: var(--ink-2); text-align: left; }
.panier-vide .ic { width: 34px; height: 34px; color: var(--ink-3); flex: none; }
.panier-vide p { margin: 0; line-height: 1.45; }
.panier-pied { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--rule); background: #f9fafb; border-radius: 0 0 var(--r) var(--r); }
.panier-total { display: flex; align-items: baseline; gap: 8px; }
.panier-total > span { font-size: .82rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.panier-total strong { font-size: 1.45rem; letter-spacing: -.01em; }
.panier-total small { color: var(--ink-3); font-weight: 600; }
@keyframes ligne-ajoutee { from { background: var(--stamp-tint); } to { background: transparent; } }
.ligne.ajoutee { animation: ligne-ajoutee .9s ease-out; }

/* mouvement : catalogue et liste côte à côte */
.zone-mouvement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.zone-mouvement .catalogue-grille { max-height: 520px; }
.zone-mouvement .panier { position: sticky; top: 18px; }
.carte-libelle { font-size: .76rem; color: var(--ink-3); }
.carte-article.sans-prix .carte-stock { font-size: .9rem; font-weight: 700; color: var(--ink); }
.carte-article.sans-prix .carte-stock.bas { color: var(--veille); }
.carte-article.sans-prix .carte-stock.rupture { color: var(--refus); }
.note-service { display: flex; gap: 8px; align-items: center; color: var(--ink-2); background: var(--desk); border-radius: var(--r); padding: 8px 12px; margin: 6px 0 0; font-size: .92rem; }

.pied-composer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }

/* acheteur et stock dans l'écran de facture */
.client-choix { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0 12px; }
.fiche-client { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 16px; }
.fiche-client p { margin: 0 0 4px; }
.fiche-client .fiche { gap: 3px 18px; font-size: .93rem; margin-top: 6px; }
.type-client { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 3px; background: var(--desk); color: var(--ink-2); font-size: .82rem; font-weight: 600; }
.lien-ts { border: 0; background: none; padding: 0; font: inherit; font-size: .78rem; color: var(--stamp); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(40, 67, 163, .35); }
.lien-ts::before { content: "+ "; }
.stock-ligne { font-size: .78rem; color: var(--ink-3); }
.stock-ligne.manque { color: var(--refus); font-weight: 600; }
.stock-ligne.manque::after { content: ", insuffisant"; }
.dialogue { border: 1px solid var(--rule); border-radius: 6px; padding: 22px 24px; width: min(640px, calc(100vw - 32px)); color: var(--ink); box-shadow: 0 18px 50px rgba(24, 34, 61, .25); }
.dialogue::backdrop { background: rgba(24, 34, 61, .45); }
.dialogue h2 { margin-bottom: 4px; }

/* cases à cocher avec explication */
.case { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: .95rem; margin: 0 0 10px; cursor: pointer; }
.case input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--stamp); }
.case input[disabled] { opacity: .7; }
.case .aide { display: block; }
code { font-family: var(--mono); font-size: .85em; background: var(--desk); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere; }

/* connexion Google Drive */
.etapes-drive { padding-left: 1.3em; margin: 0 0 16px; }
.etapes-drive li { margin-bottom: 8px; max-width: 68ch; }
.code-appareil { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; letter-spacing: .12em; color: var(--stamp); margin: 8px 0 4px;
  padding: 10px 18px; border: 2px dashed var(--stamp); border-radius: 6px; display: inline-block; background: var(--stamp-tint); }

/* champ de recherche avec liste de résultats (client) */
.combo { position: relative; }
.combo-saisie { position: relative; }
.combo-saisie .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.combo-saisie input { padding-left: 36px; }
.combo-liste {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 12px 28px rgba(24, 34, 61, .16);
  max-height: 340px; overflow-y: auto;
}
.combo-liste [role=option] { padding: 8px 14px; cursor: pointer; line-height: 1.35; }
.combo-liste [role=option].actif { background: var(--stamp-tint); }
.combo-liste .combo-meta { display: block; font-size: .84rem; color: var(--ink-3); }
.combo-liste .combo-titre { padding: 8px 14px 4px; font-size: .78rem; color: var(--ink-3); border-top: 1px solid var(--rule-soft); }
.combo-liste .combo-creer { color: var(--stamp); font-weight: 600; border-top: 1px solid var(--rule-soft); }

/* catalogue de vente */
.catalogue { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px 10px; }
.catalogue-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.catalogue-outils { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.catalogue-recherche { flex: 1 1 280px; }
.case-courte { margin: 0; font-size: .9rem; white-space: nowrap; }
.catalogue-familles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.puce { font: inherit; font-size: .86rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.puce:hover { border-color: #97a1b2; color: var(--ink); }
.puce.actif { background: var(--ink); border-color: var(--ink); color: #fff; }
.catalogue-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px;
  margin-top: 12px; max-height: 300px; overflow-y: auto; padding: 2px;
}
.carte-article {
  position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: var(--ink);
  background: #f9fafb; border: 1px solid var(--rule-soft); border-radius: var(--r); padding: 9px 10px 8px; cursor: pointer; min-height: 84px;
}
.carte-article:hover { border-color: #97a1b2; background: var(--paper); }
.carte-article.actif { border-color: var(--stamp); box-shadow: 0 0 0 2px var(--stamp-tint); background: var(--paper); }
.carte-nom { font-weight: 600; font-size: .92rem; line-height: 1.25; padding-right: 26px; }
.carte-meta { font-size: .78rem; color: var(--ink-3); min-height: 1em; }
.carte-pied { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: .9rem; }
.carte-stock { font-size: .76rem; color: var(--ink-3); white-space: nowrap; }
.carte-stock.bas { color: var(--veille); font-weight: 600; }
.carte-stock.rupture { color: var(--refus); font-weight: 600; }
.carte-qte { position: absolute; top: 7px; right: 7px; background: var(--stamp); color: #fff; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.catalogue-vide { grid-column: 1 / -1; color: var(--ink-2); margin: 10px 0; }
.catalogue-aide { font-size: .82rem; margin: 8px 0 0; }


/* droits d'un rôle */
.grille-droits { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 28px; margin: 6px 0 10px; }
.grille-droits fieldset { margin: 0 0 10px; }
.grille-droits legend { font-size: .95rem; margin-bottom: 8px; }

/* tampon de certification, à l'écran uniquement */
.tampon {
  display: inline-block; color: var(--stamp); border: 3px double var(--stamp); border-radius: 6px;
  padding: 6px 14px; font-weight: 700; letter-spacing: .06em; transform: rotate(-3deg); opacity: .9;
  font-size: .95rem; text-align: center; line-height: 1.25;
}
.tampon small { display: block; letter-spacing: 0; font-weight: 600; font-size: .78rem; }

/* ------------------------------------------------------------ encaissement */
.encaisser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.a-payer { padding: 20px; border-bottom: 1px solid var(--rule-soft); }
.a-payer .montant { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.a-payer .montant small { font-size: 1rem; font-weight: 400; color: var(--ink-3); }
.ventilation td { padding: 7px 20px; }
.ventilation tr.total td { font-weight: 700; border-top: 1px solid var(--rule); }
.paiement { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 8px; margin-bottom: 8px; }
.raccourcis { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.raccourcis .btn { min-height: 32px; padding: 4px 10px; font-size: .87rem; font-weight: 400; }
.solde { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); margin-top: 8px; font-size: 1.05rem; }
.solde strong { font-size: 1.5rem; }
.solde.rendre strong { color: var(--ok); }
.solde.reste strong { color: var(--veille); }

/* ------------------------------------------------------------ assistant d'installation et connexion */
.seul { min-height: 100vh; display: grid; place-items: start center; padding: 6vh 18px 40px; }
.assistant { width: 100%; max-width: 760px; }
.assistant-entete { margin-bottom: 22px; }
.assistant-entete h1 { margin-top: 6px; }
.etapes { display: flex; gap: 0; list-style: none; padding: 0; margin: 0 0 22px; counter-reset: etape; border-bottom: 1px solid var(--rule); }
.etapes li { counter-increment: etape; padding: 0 16px 10px 0; margin-right: 16px; font-size: .9rem; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.etapes li::before { content: counter(etape) ". "; }
.etapes li.faite { color: var(--ok); }
.etapes li.courante { color: var(--stamp); border-bottom-color: var(--stamp); font-weight: 600; }
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 22px; flex-wrap: wrap; }
.onglets a { padding: 8px 14px; color: var(--ink-2); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; font-size: .93rem; }
.onglets a:hover { color: var(--ink); }
.onglets a.actif { color: var(--stamp); border-bottom-color: var(--stamp); }
.connexion { width: 100%; max-width: 380px; margin-top: 8vh; }
.connexion h1 { font-size: 1.4rem; margin-bottom: 4px; }

.journal td { font-size: .84rem; }
.journal .brut { font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; max-width: 380px; }

@media (max-width: 1100px) {
  .composer, .encaisser { grid-template-columns: 1fr; }
  .composer-aside { position: static; }
  .releve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .releve > div:nth-child(3) { border-left: 0; }
  .releve > div:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; background: none; }
  .rail { background: var(--paper); border-right: 0; border-bottom: 1px solid var(--rule); }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 12px; }
  .marque { border: 0; padding: 0 10px 0 0; margin: 0; }
  .marque-sous, .nav-titre { display: none; }
  .nav-groupe { margin: 0; display: flex; flex-wrap: wrap; }
  .nav a.nav-caisse { margin: 0; }
  .rail-pied { margin: 0 0 0 auto; border: 0; padding: 0; }
  .rail-pied strong { display: none; }
  .contenu { padding: 20px 16px 40px; }
  .etat-mcf { padding: 8px 16px; gap: 12px; }
  .colonnes, .colonnes-3 { grid-template-columns: 1fr; }
  .grille .double { grid-column: auto; }
}
@media (max-width: 1100px) {
  .zone-mouvement { grid-template-columns: 1fr; }
  .zone-mouvement .panier { position: static; }
}
@media (max-width: 820px) {
  .panier-entete { display: none; }
  .ligne-principale, .panier-mvt .ligne-principale { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.2fr) auto; grid-template-areas: "num des des act" "num inf inf inf" "num prix qte mt"; row-gap: 8px; column-gap: 8px; padding: 12px; }
  .c-stock { text-align: left; }
  .c-stock::before { content: "En stock "; color: var(--ink-3); font-size: .78rem; }
  .panier-mvt .c-resultat::before { content: "→ "; color: var(--ink-3); }
  .panneau { margin: 0 12px 12px; }
  .panier-vide { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* avoir : ligne rattachée à la facture d'origine */
.saisie-designation[readonly] { border-color: transparent; background: none; padding-left: 0; box-shadow: none; color: var(--ink); }
.reste-avoir { color: var(--stamp); font-weight: 600; }
.pas-a-pas button:disabled { opacity: .35; cursor: default; }

/* type d'article (bien ou service, local ou importé) */
.carte-type { align-self: flex-start; margin: 3px 0 2px; padding: 0 6px; border-radius: 3px; font-size: .7rem; font-weight: 600; line-height: 1.6; color: var(--ink-2); background: var(--desk); }
.carte-type.type-locser, .carte-type.type-impser { background: var(--stamp-tint); color: var(--stamp); }
.carte-type.type-impbie { background: var(--veille-tint); color: var(--veille); }
.info-type { font-weight: 600; color: var(--ink-2); }
.info-type:empty { display: none; }
.carte-etiquettes { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 2px; }
.carte-etiquettes .carte-type { margin: 0; }
.carte-type.carte-taxe { background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2); line-height: 1.45; }

/* barème du timbre quittance */
.lignes-bareme { width: 100%; max-width: 520px; margin: 10px 0; border-collapse: collapse; }
.lignes-bareme th { text-align: left; font-size: .8rem; color: var(--ink-3); font-weight: 600; padding: 4px 6px; }
.lignes-bareme td { padding: 3px 6px; }
.apercu-rapport { background: #e8ebf0; padding: 14px; border-radius: var(--r); max-height: 640px; overflow: auto; }
.apercu-rapport .ticket { margin: 0 auto; }