/* BATKO Vente — interface. Plus Jakarta Sans, indigo et émeraude, cartes arrondies, tailles modérées. */
@font-face { font-family: 'Jakarta'; src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jakarta'; src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --p: #4f46e5; --p-fonce: #4338ca; --p-pale: #eef0ff; --vert: #059669; --vert-pale: #e7f8f1; --rouge: #dc2626; --rouge-pale: #fdeeee; --ambre: #d97706;
  --fond: #f5f6fb; --carte: #fff; --texte: #1e2235; --doux: #6b7088; --ligne: #e6e8f0; --ombre: 0 1px 2px rgba(20, 24, 60, .05), 0 6px 20px rgba(20, 24, 60, .06);
  --r: 16px; --r-petit: 11px; --nav: 248px;
  --haut: env(safe-area-inset-top, 0px); --bas: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 400 15px/1.45 Jakarta, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
html, body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select { user-select: text; -webkit-user-select: text; }
button, a, input, select, textarea { font: inherit; color: inherit; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 18px; } h2 { font-size: 16px; } h3 { font-size: 14px; color: var(--doux); font-weight: 600; margin-bottom: 10px; }
small { color: var(--doux); font-size: 12.5px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- boutons, puces, badges */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; font-weight: 600; font-size: 14.5px; white-space: nowrap; transition: transform .08s, background .15s, box-shadow .15s; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.primaire { background: var(--p); color: #fff; box-shadow: 0 4px 14px rgba(79, 70, 229, .28); }
.btn.primaire:hover:not(:disabled) { background: var(--p-fonce); }
.btn.secondaire { background: var(--carte); border-color: var(--ligne); }
.btn.secondaire:hover:not(:disabled) { border-color: #c9ccdc; }
.btn.danger { background: var(--rouge-pale); color: var(--rouge); }
.btn.petit { min-height: 38px; padding: 0 13px; font-size: 13.5px; }
.btn:disabled, .icone-btn:disabled, .icone-btn.inactif { opacity: .42; cursor: default; box-shadow: none; pointer-events: none; }
.icone-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; color: var(--texte); }
.icone-btn:hover { background: rgba(79, 70, 229, .07); }
.lien { border: 0; background: none; color: var(--p); font-weight: 600; cursor: pointer; padding: 6px; }
.puces { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.puces::-webkit-scrollbar { display: none; }
.puce { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--carte); cursor: pointer; font-size: 13.5px; font-weight: 550; display: inline-flex; align-items: center; }
.puce.actif { background: var(--p); color: #fff; border-color: var(--p); }
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: #eef0f5; color: var(--doux); font-size: 12px; font-weight: 600; font-style: normal; white-space: nowrap; }
.badge.bon { background: var(--vert-pale); color: var(--vert); } .badge.mauvais { background: var(--rouge-pale); color: var(--rouge); }
.bon { color: var(--vert); } .mauvais { color: var(--rouge); }

/* ---------------------------------------------------------------- entrée (Admin / Vendeur) */
.entree { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + var(--haut)) 18px calc(24px + var(--bas));
  background: radial-gradient(1200px 600px at 10% -10%, #e0e3ff 0, transparent 60%), radial-gradient(900px 500px at 110% 110%, #d7f5ea 0, transparent 55%), var(--fond); position: relative; }
.entree-langue { position: absolute; top: calc(14px + var(--haut)); right: 14px; display: flex; gap: 6px; }
.entree-boite { width: min(420px, 100%); background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px; box-shadow: 0 20px 60px rgba(40, 44, 100, .12); padding: 28px 24px; }
.marque { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.marque img { width: 46px; height: 46px; border-radius: 13px; }
.marque strong { display: block; font-size: 18px; font-weight: 700; }
.marque.petite { margin: 4px 6px 22px; } .marque.petite img { width: 38px; height: 38px; border-radius: 11px; } .marque.petite strong { font-size: 15px; }
.marque.petite div { min-width: 0; } .marque.petite strong, .marque.petite small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apk { width: 100%; margin: -8px 0 16px; }
.espaces { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.espace { display: grid; justify-items: center; gap: 10px; padding: 24px 10px; border-radius: 18px; border: 1px solid var(--ligne); background: var(--carte); cursor: pointer; font-weight: 650; transition: border-color .15s, transform .1s, box-shadow .15s; }
.espace .ic { width: 34px; height: 34px; color: var(--p); stroke-width: 1.6; }
.espace:hover { border-color: var(--p); box-shadow: 0 8px 24px rgba(79, 70, 229, .14); }
.espace:active { transform: scale(.98); }
.espace-choisi { display: flex; align-items: center; gap: 10px; color: var(--p); font-weight: 650; margin-bottom: 4px; }

/* ---------------------------------------------------------------- coquille */
.coquille { min-height: 100vh; min-height: 100dvh; }
.cote { display: none; }
main { padding-bottom: calc(76px + var(--bas)); }
.barre { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: calc(58px + var(--haut)); padding: var(--haut) 12px 0; background: rgba(245, 246, 251, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; }
.barre h1 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.barre-gauche, .barre-droite { display: flex; align-items: center; gap: 6px; }
#contenu { padding: 6px 14px 24px; max-width: 1180px; margin: 0 auto; }
.onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(6px + var(--bas)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--ligne); }
.onglets a { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border-radius: 12px; font-size: 11.5px; font-weight: 600; color: var(--doux); }
.onglets a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.onglets a.actif { color: var(--p); background: var(--p-pale); }
.sous-page .onglets { display: none; } .sous-page main { padding-bottom: calc(16px + var(--bas)); }
@media (min-width: 900px) {
  .cote { display: block; position: fixed; inset: 0 auto 0 0; width: var(--nav); padding: 18px 12px; background: var(--carte); border-right: 1px solid var(--ligne); overflow-y: auto; }
  .cote nav { display: grid; gap: 2px; }
  .cote nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 550; color: #3b4057; }
  .cote nav a:hover { background: #f3f4f9; }
  .cote nav a.actif { background: var(--p-pale); color: var(--p); }
  main { margin-left: var(--nav); padding-bottom: 24px; }
  .onglets { display: none; }
  .barre { padding: 8px 24px 0; } #contenu { padding: 8px 24px 32px; }
}

/* ---------------------------------------------------------------- cartes, listes, chiffres */
.carte { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 16px; margin-bottom: 14px; }
.carte.large { max-width: 760px; }
.colonnes { display: grid; gap: 14px; } .colonnes > .carte { margin: 0; }
@media (min-width: 900px) { .colonnes { grid-template-columns: 1fr 1fr; margin-bottom: 14px; } }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.kpi { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 14px; display: grid; gap: 4px; min-width: 0; }
.kpi > span { font-size: 12.5px; color: var(--doux); font-weight: 550; }
.kpi strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste { list-style: none; margin: 0; padding: 0; }
.liste li > a, .liste li > div, .liste li > button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--ligne); background: none; text-align: left; cursor: pointer; }
.liste li > div { cursor: default; }
.liste li:last-child > * { border-bottom: 0; }
.liste li > * > span:first-child { flex: 1; min-width: 0; display: grid; }
.liste li > * > span:first-child, .liste small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .droite { display: grid; justify-items: end; gap: 3px; flex: none; }
.liste li.eteint { opacity: .5; }
.resultat > .liste, #contenu > .liste { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 2px 14px; }
.liste.choix { margin: 6px 0; } .liste.choix button { min-height: 48px; }
.vide { padding: 22px 8px; text-align: center; color: var(--doux); font-size: 14px; }
.somme { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px; color: var(--doux); font-size: 13.5px; } .somme b { color: var(--texte); }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; } .details dt { color: var(--doux); font-size: 13.5px; } .details dd { margin: 0; overflow-wrap: anywhere; }
.grille-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.tuile { display: grid; justify-items: start; gap: 12px; padding: 18px 16px; border-radius: var(--r); background: var(--carte); box-shadow: var(--ombre); font-weight: 600; }
.tuile .ic { width: 26px; height: 26px; color: var(--p); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; color: var(--doux); font-weight: 600; font-size: 12.5px; padding: 8px 6px; border-bottom: 1px solid var(--ligne); }
.table td { padding: 9px 6px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.table td:not(:first-child), .table th:not(:first-child) { text-align: right; white-space: nowrap; }
.table tfoot th { color: var(--texte); border-top: 2px solid var(--ligne); border-bottom: 0; }
.table small { display: block; }
.defile { overflow-x: auto; }
.promo { color: var(--vert); display: block; font-weight: 600; }

/* ---------------------------------------------------------------- formulaires */
.form { display: grid; gap: 12px; }
.champ { display: grid; gap: 5px; min-width: 0; }
.champ > span { font-size: 13px; font-weight: 600; color: #4a4f66; }
.champ input, .champ select, .champ textarea, .recherche input, .ligne-champ input, .ligne input, .mini input, .pas input {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r-petit); border: 1px solid var(--ligne); background: #fbfbfe; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.champ textarea { resize: vertical; min-height: 80px; }
.champ input:focus, .champ select:focus, .champ textarea:focus, .recherche input:focus, .ligne input:focus, .ligne-champ input:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); background: #fff; }
.champ input[readonly] { background: #f1f2f7; color: var(--doux); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .deux { grid-template-columns: 1fr; } }
.avec-bouton { display: flex; gap: 8px; } .avec-bouton input { flex: 1; min-width: 0; } .avec-bouton .btn { min-height: 46px; }
.case { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 550; cursor: pointer; }
.case input { width: 20px; height: 20px; accent-color: var(--p); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.form .actions { margin: 4px 0 0; justify-content: flex-end; }
.recherche { position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; }
.recherche > .ic { position: absolute; left: 13px; color: var(--doux); pointer-events: none; }
.recherche input { padding-left: 42px; background: var(--carte); }
.recherche .scanner { position: absolute; right: 2px; }
.recherche:has(.scanner) input { padding-right: 48px; }
.outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.nav-date { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.nav-date input { min-height: 44px; border-radius: var(--r-petit); border: 1px solid var(--ligne); background: var(--carte); padding: 0 10px; font-size: 16px; }
.nav-date strong { min-width: 150px; text-align: center; text-transform: capitalize; }
.outils .nav-date { margin: 0; }

/* ---------------------------------------------------------------- caisse */
.caisse { display: grid; gap: 14px; }
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 520px) { .grille-produits { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.produit { position: relative; display: grid; align-content: space-between; gap: 8px; min-height: 108px; padding: 12px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--carte); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(20, 24, 60, .04); transition: border-color .12s, transform .08s; overflow: hidden; }
.produit:hover { border-color: #c7c9ff; } .produit:active { transform: scale(.98); }
.produit.pulse { border-color: var(--p); box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); }
.produit.epuise { opacity: .45; }
.produit-nom { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.produit-prix { display: grid; } .produit-prix b { font-size: 15px; color: var(--p-fonce); } .produit-prix s { font-size: 12px; color: var(--doux); }
.produit-stock { font-size: 12px; color: var(--doux); } .produit-stock.bas { color: var(--rouge); font-weight: 600; }
.ruban { position: absolute; top: 9px; right: -26px; transform: rotate(35deg); background: var(--vert); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 30px; }
.ticket { background: var(--carte); border-radius: var(--r); box-shadow: var(--ombre); padding: 16px; display: grid; gap: 12px; align-content: start; }
.ticket-tete { display: flex; justify-content: space-between; align-items: center; }
.lignes { display: grid; gap: 2px; }
.ligne { display: grid; grid-template-columns: minmax(70px, 1fr) auto minmax(0, auto) 36px; grid-template-areas: "nom nom nom x" "prix pas total total"; gap: 6px 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.ligne-nom { grid-area: nom; font-weight: 600; font-size: 14px; } .ligne .retirer { grid-area: x; justify-self: end; width: 36px; height: 36px; color: var(--doux); }
.ligne-prix { grid-area: prix; font-size: 13.5px; color: var(--doux); min-width: 0; } .ligne-prix input { min-height: 40px; max-width: 120px; padding: 6px 10px; }
.pas { grid-area: pas; display: flex; align-items: center; gap: 4px; } .pas input { width: 54px; min-height: 40px; text-align: center; padding: 6px; } .pas .icone-btn { width: 40px; height: 40px; background: #f2f3f8; }
.ligne-total { grid-area: total; text-align: right; white-space: nowrap; font-size: 14px; }
.achat-lignes .ligne { grid-template-columns: 1fr 1fr auto 44px; grid-template-areas: "nom nom nom x" "qte prix total total"; }
.achat-lignes .mini:first-of-type { grid-area: qte; } .achat-lignes .mini:nth-of-type(2) { grid-area: prix; }
.mini { display: grid; gap: 3px; } .mini span { font-size: 12px; color: var(--doux); } .mini input { min-height: 40px; padding: 6px 10px; }
.ticket-pied { display: grid; gap: 12px; }
.choix-client { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px dashed #c9ccdc; background: #fafbfe; cursor: pointer; font-weight: 600; text-align: left; }
.choix-client span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-champ { display: flex; align-items: center; gap: 12px; } .ligne-champ span { flex: 1; font-weight: 600; font-size: 14px; } .ligne-champ input { max-width: 170px; text-align: right; }
.totaux { display: grid; gap: 6px; } .totaux > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .totaux .grand { font-size: 18px; font-weight: 750; padding-top: 6px; border-top: 1px solid var(--ligne); }
.rendu { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--vert-pale); color: var(--vert); font-weight: 600; }
.rendu.mauvais { background: var(--rouge-pale); color: var(--rouge); }
.ticket .actions { margin: 0; } .ticket .actions .btn { flex: 1; }
.barre-panier { display: none; }
@media (min-width: 900px) {
  .caisse { grid-template-columns: 1fr 380px; align-items: start; }
  .ticket { position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; }
}
@media (max-width: 899px) {
  .ticket { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 88vh; overflow-y: auto; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + var(--bas)); transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -10px 40px rgba(20, 24, 60, .18); }
  .ticket-ouvert .ticket { transform: none; }
  .barre-panier { position: fixed; z-index: 35; left: 12px; right: 12px; bottom: calc(74px + var(--bas)); display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--p); color: #fff; font-weight: 600; box-shadow: 0 10px 30px rgba(79, 70, 229, .35); cursor: pointer; transform: translateY(160%); transition: transform .2s; }
  .barre-panier.vue { transform: none; }
  .ticket-ouvert .barre-panier { bottom: auto; top: calc(8px + var(--haut)); z-index: 45; }
  .caisse-produits { padding-bottom: 70px; }
}

/* ---------------------------------------------------------------- documents à l'écran */
.document .doc-tete, .promo-carte .doc-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.document.annule { opacity: .75; }
.doc-client { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f6f7fb; margin-bottom: 12px; } .doc-client span { display: grid; }
.document .table { margin-bottom: 12px; }
.contacts { margin-top: -2px; }

/* ---------------------------------------------------------------- feuilles et messages */
.feuille { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.feuille-fond { position: absolute; inset: 0; background: rgba(18, 20, 40, .42); backdrop-filter: blur(2px); animation: apparait .15s; }
.feuille-boite { position: relative; width: min(520px, calc(100% - 24px)); max-height: 90vh; overflow-y: auto; background: var(--carte); border-radius: 22px; box-shadow: 0 24px 70px rgba(18, 20, 40, .25); animation: monte .2s ease; }
.feuille-boite header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 10px 8px 20px; background: var(--carte); }
.feuille-corps { padding: 4px 20px 20px; }
.feuille-corps > .actions { justify-content: flex-end; margin-bottom: 0; }
@media (max-width: 599px) { .feuille { place-items: end stretch; } .feuille-boite { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: var(--bas); max-height: 92vh; } }
@keyframes monte { from { transform: translateY(24px); opacity: .4; } } @keyframes apparait { from { opacity: 0; } }
.toast { position: fixed; z-index: 200; left: 50%; bottom: calc(90px + var(--bas)); transform: translate(-50%, 20px); opacity: 0; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: #1e2235; color: #fff; font-weight: 550; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.vu { opacity: 1; transform: translate(-50%, 0); } .toast.mauvais { background: var(--rouge); } .toast.bon { background: var(--vert); }
.scanner-vue .video { position: relative; margin: 0 16px 16px; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scanner-vue video { width: 100%; height: 100%; object-fit: cover; }
.viseur { position: absolute; inset: 30% 12%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }

/* ---------------------------------------------------------------- impression */
@page { size: A4; margin: 12mm; }
@page planche { size: A4; margin: 0; }
@page rouleau { size: 50mm 30mm; margin: 0; }
@page ticket { margin: 3mm; }
#impression { display: none; }
@media print {
  body.en-impression > *:not(#impression) { display: none !important; }
  body.en-impression { background: #fff; }
  body.en-impression #impression { display: block; color: #000; font-size: 11pt; }
}
.feuille-a4 { font-family: Jakarta, Arial, sans-serif; color: #111; }
.feuille-a4 h1 { font-size: 16pt; } .feuille-a4 h2 { font-size: 12pt; margin: 4pt 0 12pt; }
.feuille-a4 .carte, .feuille-a4 .kpi { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
.feuille-a4 a { color: #000; }
.doc .doc-haut { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18pt; }
.doc-magasin { display: grid; gap: 1pt; font-size: 9.5pt; } .doc-magasin strong { font-size: 15pt; margin-bottom: 3pt; }
.doc-titre { display: grid; justify-items: end; gap: 1pt; font-size: 10pt; } .doc-titre h1 { color: #4338ca; letter-spacing: .04em; }
.doc-tiers { display: grid; gap: 1pt; padding: 8pt 10pt; border-radius: 6pt; background: #f2f3f8; width: 55%; margin-bottom: 14pt; font-size: 10pt; }
.doc table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.doc th { background: #4338ca; color: #fff; text-align: left; padding: 6pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc td { padding: 6pt; border-bottom: 1px solid #ddd; vertical-align: top; } .doc .n { text-align: right; white-space: nowrap; }
.doc-totaux { margin: 12pt 0 0 auto; width: 52%; display: grid; gap: 4pt; font-size: 10.5pt; } .doc-totaux > div { display: flex; justify-content: space-between; } .doc-totaux .grand { font-size: 13pt; font-weight: 700; border-top: 1.5pt solid #111; padding-top: 4pt; }
.doc .annulee { margin-top: 20pt; color: #c00; font-size: 22pt; font-weight: 800; text-align: center; border: 3pt solid #c00; padding: 6pt; }
.doc .pied, .ticket-80 .pied { margin-top: 24pt; text-align: center; font-size: 9pt; color: #555; white-space: pre-line; }
.ticket-80 { page: ticket; width: 74mm; font: 10pt/1.35 Arial, sans-serif; color: #000; }
.ticket-80 .doc-magasin { text-align: center; justify-items: center; } .ticket-80 .doc-magasin strong { font-size: 12pt; }
.ticket-80 .sep { border-top: 1px dashed #000; margin: 5pt 0; }
.t-ligne { display: grid; grid-template-columns: 1fr auto; gap: 0 6pt; margin-bottom: 3pt; } .t-ligne span:first-child { grid-column: 1 / -1; } .t-ligne span:nth-child(2) { color: #333; } .t-ligne b { text-align: right; }
.t-tot { display: flex; justify-content: space-between; } .t-tot.grand { font-weight: 700; font-size: 12pt; }
.ticket-80 .pied { margin-top: 8pt; }
/* Étiquettes : planches A4 (sans marge d'imprimante) ou rouleau 50 × 30 mm. */
.etiquettes .planche { display: grid; width: 210mm; page: planche; }
.planche.p24 { grid-template-columns: repeat(3, 70mm); grid-auto-rows: 37.125mm; }
.planche.p40 { grid-template-columns: repeat(4, 52.5mm); grid-auto-rows: 29.7mm; }
.etiquette { display: grid; align-content: center; justify-items: center; gap: 1mm; padding: 2mm 3mm; overflow: hidden; text-align: center; font-family: Arial, sans-serif; color: #000; break-inside: avoid; }
.etiquette small { font-size: 6.5pt; color: #333; } .e-nom { font-size: 8.5pt; line-height: 1.15; max-height: 2.3em; overflow: hidden; } .e-prix { font-size: 11pt; font-weight: 800; } .e-prix s { font-size: 7pt; font-weight: 400; }
.etiquette .code-barres { width: 90%; height: 9mm; } .e-code { font-size: 6.5pt; letter-spacing: .08em; }
.p40 .etiquette .code-barres { height: 7mm; } .p40 .e-nom { font-size: 7.5pt; } .p40 .e-prix { font-size: 9.5pt; }
.rouleau { page: rouleau; } .rouleau .etiquette { width: 50mm; height: 30mm; break-after: page; }
.rouleau .etiquette .code-barres { height: 8mm; }