/* ============================================================
   MARJAN BIJOUTERIE v4 — CSS Responsive complet
   Approche mobile-first : base = mobile, puis tablette, desktop
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== VARIABLES =====
   Trois plans, jamais deux surfaces de la même couleur côte à côte :

     fond de page  --bg-app      ivoire tiède, le plan du dessous
     surface       --bg-primary  blanc, ce qui porte le contenu
     retrait       --bg-muted    en-têtes de tableau, pieds de carte

   Auparavant `.main` et `.card` étaient tous deux en blanc pur : une carte
   ne se détachait que par un filet de 0,5 px, d'où l'impression de platitude.
   Le relief vient du contraste entre ces plans, pas d'un trait plus épais. */
:root {
  --bg-app:       #f1ede4;   /* fond de page */
  --bg-primary:   #ffffff;   /* surface : cartes, modales, lignes */
  --bg-secondary: #f7f4ed;   /* surface en léger retrait */
  --bg-muted:     #faf7f0;   /* bandes internes d'une carte */
  --bg-tertiary:  #e9e4d8;   /* plan le plus bas : rails, pistes, barre latérale */
  --text-primary:   #1a1916;
  --text-secondary: #6b6860;
  --text-tertiary:  #757169;
  --border-light:  rgba(74,62,34,0.12);
  --border-medium: rgba(74,62,34,0.22);
  --border-strong: rgba(74,62,34,0.38);
  --success-bg:#e8f3dc; --success-text:#38670f;
  --warning-bg:#fbedd6; --warning-text:#8a4f06;
  --danger-bg: #fbe8e6; --danger-text: #a02a22;
  --info-bg:   #e4effb; --info-text:   #155b9f;
  --local-bg:   #ddf3ea; --local-text:   #0d6b53;
  --importe-bg: #ebeafd; --importe-text: #4f46b5;
  --radius-sm:4px; --radius-md:9px; --radius-lg:14px; --radius-xl:18px;
  /* Ombres teintées brun doré plutôt que grises : sur un fond ivoire, une
     ombre neutre tire au gris sale. */
  --shadow-sm: 0 1px 2px rgba(60,48,20,0.05), 0 2px 5px rgba(60,48,20,0.05);
  --shadow-md: 0 2px 6px rgba(60,48,20,0.06), 0 10px 24px rgba(60,48,20,0.09);
  --shadow-lg: 0 14px 44px rgba(60,48,20,0.16);
  --transition: 0.14s ease;
  --sidebar-w: 230px;
  --topbar-h:  52px;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   LOGIN
   ============================================================ */
#login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary); z-index: 9999;
  padding: 16px;
}
.login-card {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  width: 100%; max-width: 380px;
  box-shadow: var(--shadow-md);
}
.login-logo  { font-size: 36px; text-align: center; margin-bottom: 8px; }
.login-title { font-size: 20px; font-weight: 600; text-align: center; letter-spacing: -0.3px; }
.login-sub   { font-size: 13px; color: var(--text-secondary); text-align: center; margin-top: 4px; }
.login-error { display: none; padding: 8px 12px; background: var(--danger-bg); color: var(--danger-text); border-radius: var(--radius-md); font-size: 13px; margin-bottom: 12px; }
.login-hint  { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.login-hint span { font-size: 11px; padding: 3px 8px; background: var(--bg-secondary); border-radius: var(--radius-sm); color: var(--text-tertiary); font-family: monospace; }

/* --- Panneaux d'authentification (inscription, mot de passe oublié) --- */
.login-ok { display: none; padding: 8px 12px; background: var(--success-bg); color: var(--success-text); border-radius: var(--radius-md); font-size: 13px; margin-bottom: 12px; line-height: 1.45; }
.auth-titre { font-size: 15px; font-weight: 600; margin: 22px 0 6px; text-align: center; }
.auth-aide  { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin-bottom: 16px; text-align: center; }
.lien-auth  { background: none; border: none; padding: 0; font-size: 11.5px; color: var(--text-secondary); cursor: pointer; text-decoration: underline; font-family: inherit; }
.lien-auth:hover { color: var(--text-primary); }

/* ============================================================
   LAYOUT GÉNÉRAL — Mobile : colonne pleine
   ============================================================ */
#main-app { height: 100%; }

/* === TOPBAR MOBILE === */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 14px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-medium);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  position: sticky; top: 0; z-index: 100;
}
.topbar-logo { display: flex; align-items: center; gap: 8px; }
.topbar-logo-icon { font-size: 20px; }
.topbar-logo-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-user-badge {
  font-size: 11px; padding: 3px 8px; border-radius: 20px;
  font-weight: 500; max-width: 110px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-menu {
  background: none; border: 0.5px solid var(--border-medium);
  border-radius: var(--radius-md); padding: 6px 10px;
  font-size: 16px; cursor: pointer; line-height: 1;
  color: var(--text-primary);
}
.btn-logout-top {
  background: none; border: 0.5px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 5px 8px;
  cursor: pointer; color: var(--text-secondary); font-size: 14px;
  transition: all var(--transition);
}
.btn-logout-top:hover { background: var(--danger-bg); color: var(--danger-text); }

/* === DRAWER OVERLAY (mobile nav) === */
.drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 200;
}
.drawer-overlay.open { display: block; }

/* === APP BODY === */
.app {
  display: flex;
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}

/* ============================================================
   SIDEBAR — mobile: drawer, desktop: fixe
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: min(var(--sidebar-w), 85vw);
  height: 100vh;
  background: var(--bg-tertiary);
  border-right: 1px solid var(--border-medium);
  display: flex; flex-direction: column;
  z-index: 300;
  transform: translateX(-110%);
  transition: transform 0.22s ease;
  overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }

.logo {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(201,168,76,0.4);
  text-align: center;
}
/* Le logo est un trait noir et or sur fond blanc (JPEG, donc sans
   transparence). `multiply` fait disparaître ce blanc dans le sable du
   panneau et ne laisse que le tracé — plutôt que de poser une bande blanche
   autour. Sans effet nuisible sur un logo de boutique plus sombre : du
   foncé multiplié par du clair reste foncé. */
.logo img { mix-blend-mode: multiply; }
.logo-icon  { font-size: 22px; line-height: 1; }
.logo-title { font-size: 14px; font-weight: 600; color: var(--kayor-or); letter-spacing: 2px; }
.logo-sub   { font-size: 10px; color: var(--text-tertiary); margin-top: 1px; letter-spacing: 1px; text-transform: uppercase; }
.brand-tagline { font-size: 11px; color: rgba(201,168,76,0.7); letter-spacing: 1px; font-style: italic; }

.nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.nav-section-label {
  font-size: 10px; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 8px 12px 3px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-md);
  cursor: pointer; font-size: 13px; color: var(--text-secondary);
  border: none; background: none; width: 100%; text-align: left;
  transition: all var(--transition); font-family: inherit;
  min-height: 40px;
}
.nav-item:hover  { background: var(--bg-primary); color: var(--text-primary); }
.nav-item.active { background: var(--bg-primary); color: var(--text-primary); font-weight: 500; border: 0.5px solid var(--border-light); box-shadow: var(--shadow-sm); }
.nav-icon { font-size: 14px; width: 18px; text-align: center; opacity: 0.7; flex-shrink: 0; }

.sidebar-footer {
  padding: 12px;
  border-top: 0.5px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.user-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--text-primary); color: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.user-name       { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role-badge { font-size: 10px; padding: 1px 6px; border-radius: 20px; font-weight: 500; display: inline-block; margin-top: 2px; }
.btn-logout {
  background: none; border: 0.5px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 6px 9px;
  cursor: pointer; color: var(--text-secondary); font-size: 15px;
  transition: all var(--transition); flex-shrink: 0;
}
.btn-logout:hover { background: var(--danger-bg); color: var(--danger-text); border-color: transparent; }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main {
  flex: 1;
  overflow-y: auto;
  /* Le fond de page est teinté : c'est lui qui fait exister les cartes. */
  background: var(--bg-app);
  width: 100%;
}
.section { display: none; padding: 16px 14px; }
.section.active { display: block; }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display: flex; flex-direction: column; gap: 10px;
  /* Sans ça, le bouton d'action s'étire sur toute la largeur du téléphone :
     une barre dorée pleine page, redondante avec le bouton flottant. */
  align-items: flex-start;
  margin-bottom: 18px;
}
.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-title { font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.3px; }
.page-sub   { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ============================================================
   METRIC CARDS — 2 col sur mobile, 4 sur desktop
   ============================================================ */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 18px;
}
/* Chaque tuile porte un filet de couleur sur la tranche gauche et un fond
   assorti. On lit la nature du chiffre — argent qui entre, argent qui sort,
   état de caisse — avant même d'avoir lu l'intitulé. Vingt tuiles ivoire
   identiques se valaient toutes et ne se lisaient pas. */
.metric-card {
  --ton:    var(--kayor-or);
  --ton-bg: var(--bg-primary);
  background: var(--ton-bg);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--ton);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.metric-card.ton-recette { --ton:#5b8c28; --ton-bg:#f5faee; }
.metric-card.ton-depense { --ton:#bd453a; --ton-bg:#fdf3f1; }
.metric-card.ton-caisse  { --ton:#c9a84c; --ton-bg:#fdf8e9; }
.metric-card.ton-attente { --ton:#c98a20; --ton-bg:#fdf5e7; }
.metric-card.ton-info    { --ton:#2f7ac4; --ton-bg:#eff5fc; }
/* Intitulé d'une rangée de tuiles : sept tuiles d'affilée ne disent pas
   lesquelles parlent de la même chose. */
.bloc-titre {
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-secondary);
  margin: 2px 0 8px 2px;
}
.metric-label { font-size: 10px; color: var(--text-secondary); margin-bottom: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.metric-value { font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.5px; margin-bottom: 5px; word-break: break-all; }
.metric-badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; display: inline-block; }
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text);  }
.badge-warn    { background: var(--warning-bg); color: var(--warning-text); }
.badge-info    { background: var(--info-bg);    color: var(--info-text);    }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin-bottom: 14px; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* L'en-tête est en retrait et porte un filet doré : il annonce le bloc au
   lieu de se confondre avec sa première ligne. */
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; flex-wrap: wrap; gap: 8px;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-light);
  box-shadow: inset 0 2px 0 rgba(201,168,76,0.45);
}
.card-title  { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.1px; }
.card-body   { padding: 14px; }

/* two-col : 1 colonne sur mobile */
.two-col { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }

/* ============================================================
   PAGINATION
   ------------------------------------------------------------
   Le journal affichait toutes les ventes d'un coup. À sept lignes c'est
   invisible ; à cinq cents, le téléphone d'une vendeuse rame.
   ============================================================ */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 10px; border-top: 0.5px solid var(--border-light);
  font-size: 12.5px; color: var(--text-secondary);
}
.pagination:empty { display: none; }
.pagination button {
  min-width: 38px; min-height: 36px; padding: 0 12px;
  background: var(--bg-secondary); border: 0.5px solid var(--border-light);
  border-radius: var(--radius-md); cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--text-primary);
}
.pagination button:hover:not(:disabled) { background: var(--border-light); }
.pagination button:disabled { opacity: .35; cursor: default; }
.pagination .page-courante { font-weight: 600; color: var(--text-primary); }

/* ============================================================
   ONGLETS DE FILTRE
   ------------------------------------------------------------
   Une ligne au lieu d'une liste déroulante : le statut est le filtre
   qu'on change dix fois par jour, il doit être à un seul geste.
   ============================================================ */
.onglets-filtre {
  display: flex; gap: 4px; overflow-x: auto; padding: 0 10px 10px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.onglets-filtre::-webkit-scrollbar { display: none; }
.onglet-filtre {
  flex: 1 0 auto; white-space: nowrap;
  padding: 7px 14px; min-height: 36px;
  background: var(--bg-secondary); border: 0.5px solid transparent;
  border-radius: var(--radius-md); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--text-secondary); transition: background .15s, color .15s;
}
.onglet-filtre:hover  { background: var(--bg-tertiary); }
.onglet-filtre.actif  {
  background: var(--kayor-or); color: var(--kayor-noir); border-color: transparent;
  font-weight: 600; box-shadow: 0 2px 6px rgba(201,168,76,0.35);
}
.filtres-avances {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 0 10px 10px;
}
.filtres-avances .filter-select { flex: 1; min-width: 140px; }

/* ============================================================
   LISTES EN CARTES — sur téléphone, à la place des tableaux
   ------------------------------------------------------------
   Le journal faisait 894 px de large sur un écran de 375 : deux écrans
   et demi de défilement horizontal, sur l'outil le plus utilisé de la
   vendeuse. Une carte tient dans la largeur et se lit d'un coup d'œil.
   ============================================================ */
.liste-cartes { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.carte-liste {
  --ton: rgba(201,168,76,0.55);
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--ton);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* La tranche gauche dit l'état avant la lecture : une liste de trente
   ventes se trie à l'œil sans lire un seul montant. */
.carte-liste.ton-ok      { --ton:#5b8c28; }
.carte-liste.ton-attente { --ton:#d08c1c; }
.carte-liste.ton-sortie  { --ton:#bd453a; }
.carte-liste.ton-info    { --ton:#2f7ac4; }
.carte-liste.estompee    { --ton:var(--border-medium); opacity: 0.75; background: var(--bg-secondary); }
.cl-haut    { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cl-titre  { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-nom     { font-size: 14px; font-weight: 600; color: var(--text-primary);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-valeur { font-size: 16px; font-weight: 700; white-space: nowrap; color: var(--text-primary); }
.carte-liste.estompee .cl-valeur { text-decoration: line-through; color: var(--text-tertiary); }
.cl-desc    { font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 8px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-meta    { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px;
              color: var(--text-tertiary); }
/* Le pied se détache en bande : la carte se lit en trois temps — qui et
   combien, le détail, ce qu'on peut faire. */
.cl-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center;
              margin: 10px -14px -12px; padding: 9px 14px;
              background: var(--bg-muted); border-top: 1px solid var(--border-light); }
.cl-actions .btn { min-height: 34px; background: var(--bg-primary); }
.cl-pastille { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
               display: flex; align-items: center; justify-content: center;
               font-size: 11px; font-weight: 700; }
.cl-inerte   { font-size: 11px; color: var(--text-tertiary); align-self: center; }
/* « Aucune vente aujourd'hui » est une réponse, pas un ornement : elle se lit
   au même contraste que le reste. */
.cl-vide     { text-align: center; color: var(--text-secondary); font-size: 13px; padding: 28px 10px; }

/* Deux colonnes tiennent sur un téléphone : leur imposer 520 px de large
   ne crée qu'un défilement horizontal inutile. */
.table-etroite { min-width: 0; }

/* Le texte de la description tient sur deux lignes quand il y a la place. */
.cl-desc.cl-desc-longue { white-space: normal; overflow: visible; }

/* Une seule des deux vues à la fois.
   La règle porte sur `.avec-cartes`, posée sur la carte qui contient les
   deux vues, et non sur un identifiant de section : chaque liste ajoutée
   plus tard hérite du comportement sans toucher à cette feuille. */
.liste-cartes { display: none; }
@media (max-width: 767px) {
  .avec-cartes > .table-wrap   { display: none; }
  .avec-cartes > .liste-cartes { display: flex; padding: 0; }
  /* Plus de cadre blanc autour de la liste : une carte dans une carte, les
     deux de la même couleur, ne délimitait rien. Les cartes reposent
     directement sur le fond de page. */
  .avec-cartes {
    background: transparent; border: none; box-shadow: none; overflow: visible;
  }
  .avec-cartes > .card-header {
    background: transparent; border-bottom: none; box-shadow: none; padding: 2px 2px 8px;
  }
}

/* ============================================================
   TABLES — scrollables horizontalement sur mobile
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
th {
  text-align: left; padding: 8px 12px;
  font-size: 10px; font-weight: 600; color: var(--text-secondary);
  border-bottom: 0.5px solid var(--border-light);
  text-transform: uppercase; letter-spacing: 0.4px;
  background: var(--bg-secondary); white-space: nowrap;
}
td { padding: 9px 12px; border-bottom: 0.5px solid var(--border-light); color: var(--text-primary); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
/* Lignes alternées : sur dix colonnes, l'œil perd sa ligne entre le nom et
   le montant. La bande suit la ligne jusqu'au bout. */
tbody tr:nth-child(even) td { background: var(--bg-muted); }
tbody tr:hover td { background: #f3eedf; }
.ref-code { font-family: 'Courier New', monospace; font-size: 11px; color: var(--text-secondary); }
.journal-table th, .journal-table td { padding: 7px 10px; }

/* ============================================================
   FILTRES & CUMUL
   ============================================================ */
.filters-bar {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.filter-select { width: 100%; }
/* Une rangée de totaux, chacun lisible seul : intitulé au-dessus, chiffre
   en dessous. En ligne continue séparée par des barres verticales, sept
   chiffres formaient une phrase qu'il fallait relire deux fois. */
.cumul-bar {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 10px 16px;
  padding: 10px 12px;
  background: var(--kayor-or-bg);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: var(--radius-md);
  margin-bottom: 12px; font-size: 12px;
}
/* Transparent à la mise en page : les postes du bloc caisse s'alignent avec
   les autres, tout en restant masquables d'un seul geste. */
#cumul-solde-caisse { display: contents; }
.cumul-poste { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cumul-label { font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
               text-transform: uppercase; color: var(--text-secondary);
               white-space: nowrap; }
.cumul-value { font-weight: 600; font-size: 13.5px; color: var(--text-primary);
               white-space: nowrap; }
.cumul-warn  { font-weight: 600; font-size: 13.5px; color: var(--warning-text);
               white-space: nowrap; }
.cumul-sortie { color: var(--danger-text); }
/* Le solde net est la conclusion, pas un poste parmi d'autres : il se
   détache par un filet doré sur sa gauche. */
.cumul-poste-fort { padding-left: 14px; border-left: 2px solid var(--kayor-or); }
.cumul-poste-fort .cumul-value { font-size: 15px; }

/* ============================================================
   CARAT BADGES
   ============================================================ */
.carat-badge {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-secondary); border: 0.5px solid var(--border-light);
  border-radius: var(--radius-md); font-size: 12px;
  flex-wrap: wrap;
}
.carat-dot    { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; }
.carat-code   { font-weight: 600; color: var(--text-primary); }
.carat-purete { color: var(--text-secondary); padding: 1px 7px; background: var(--bg-primary); border-radius: 20px; border: 0.5px solid var(--border-light); font-size: 11px; }
.carat-desc   { color: var(--text-secondary); flex: 1; min-width: 0; }
.carat-pill   { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--bg-secondary); color: var(--text-primary); border: 0.5px solid var(--border-light); white-space: nowrap; }
.badge-local   { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--local-bg);   color: var(--local-text);   font-weight: 500; }
.badge-importe { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--importe-bg); color: var(--importe-text); font-weight: 500; }

/* ============================================================
   BADGES STOCK / FIDÉLITÉ / RÔLES
   ============================================================ */
.stock-badge  { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.stock-ok  { background: var(--success-bg); color: var(--success-text); }
.stock-low { background: var(--warning-bg); color: var(--warning-text); }
.stock-out { background: var(--danger-bg);  color: var(--danger-text);  }
.tier-badge     { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 600; }
.tier-platine   { background: #eeedfe; color: #534ab7; }
.tier-gold      { background: #faeeda; color: #854f0b; }
.tier-silver    { background: var(--bg-secondary); color: var(--text-secondary); border: 0.5px solid var(--border-light); }
.role-pill      { font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; }
.role-admin         { background: #eeedfe; color: #534ab7; }
.role-gestionnaire  { background: var(--local-bg); color: var(--local-text); }
.role-vendeur       { background: var(--warning-bg); color: var(--warning-text); }
.cat-badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--danger-bg); color: var(--danger-text); font-weight: 500; }

/* ============================================================
   ALERTES & BANNERS
   ============================================================ */
.alert-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--warning-bg); border: 0.5px solid var(--warning-text);
  border-radius: var(--radius-md); font-size: 13px; color: var(--warning-text);
  margin-bottom: 14px;
}
.role-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--info-bg);
  border-radius: var(--radius-md); font-size: 13px; color: var(--info-text);
  margin-bottom: 12px;
}
.role-admin.role-banner { background: #eeedfe; color: #534ab7; }

/* ============================================================
   CHARTS / SPARKLINE
   ============================================================ */
.sparkline { display: flex; align-items: flex-end; gap: 5px; height: 50px; margin-bottom: 6px; }
/* Le noir pur était un bloc dur au milieu d'un écran ivoire. L'or de la
   charte marque le jour en cours sans trouer la page. */
.spark-bar { flex: 1; background: var(--bg-tertiary); border-radius: 3px 3px 0 0; cursor: pointer; transition: background var(--transition); }
.spark-bar.highlight { background: var(--kayor-or); }
.spark-bar:hover { background: var(--kayor-or-light); }
.spark-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-tertiary); }
.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row   { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bar-label { width: 90px; text-align: right; flex-shrink: 0; color: var(--text-secondary); font-size: 11px; }
.bar-track { flex: 1; height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 4px; background: var(--kayor-or); transition: width 0.5s ease; }
.bar-val   { width: 80px; font-weight: 500; color: var(--text-primary); font-size: 11px; text-align: right; }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 500;
  border-radius: var(--radius-md); border: 0.5px solid var(--border-medium);
  background: none; cursor: pointer; color: var(--text-primary);
  transition: all var(--transition); font-family: inherit;
  white-space: nowrap; min-height: 36px;
}
.btn:hover  { background: var(--bg-secondary); }
.btn:active { transform: scale(0.97); }
.btn-primary   { background: var(--text-primary); color: var(--bg-primary); border-color: transparent; }
.btn-primary:hover { opacity: 0.85; background: var(--text-primary); }
.btn-secondary { background: var(--bg-secondary); }
.btn.small     { padding: 5px 9px; font-size: 12px; min-height: 30px; }
.btn-danger    { color: var(--danger-text); border-color: transparent; }
.btn-danger:hover { background: var(--danger-bg); }

/* ============================================================
   FORMULAIRES
   ============================================================ */
.search-bar {
  width: 100%; padding: 10px 13px; font-size: 14px;
  border: 0.5px solid var(--border-medium); border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-primary);
  margin-bottom: 12px; font-family: inherit;
}
.search-bar:focus { outline: none; border-color: var(--border-strong); background: var(--bg-primary); }

/* Toujours 1 colonne sur mobile */
.form-row, .form-row-3 { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
/* Les articles d'une facture (migration 041).
   Une ligne doit se voir comme un bloc : sans cadre, trois articles d'affilée
   font une colonne de champs où l'on ne sait plus lequel appartient à quoi.
   `--bg-muted` est la bande interne d'une carte, le troisième plan du § 3 —
   pas de blanc ici, la modale est déjà blanche. */
.vente-ligne { background: var(--bg-muted); border: 1px solid var(--border-light);
               border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; }
.vente-ligne-tete { display: flex; align-items: center; justify-content: space-between;
                    margin-bottom: 8px; }
.vente-ligne-num  { font-size: 11px; font-weight: 700; letter-spacing: 1px;
                    text-transform: uppercase; color: var(--text-tertiary); }
.vente-ligne-suppr { background: none; border: 0; cursor: pointer; font-size: 15px;
                     line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm);
                     color: var(--danger-text); }
.vente-ligne-suppr:hover { background: var(--danger-bg); }

.form-group  { display: flex; flex-direction: column; gap: 4px; }
.form-label  { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.form-hint   { font-size: 11px; color: var(--text-tertiary); }
.form-input  {
  padding: 10px 11px; font-size: 14px;
  border: 0.5px solid var(--border-medium); border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-primary);
  font-family: inherit; transition: border-color var(--transition);
  width: 100%; min-height: 40px;
}
.form-input:focus { outline: none; border-color: var(--border-strong); background: var(--bg-primary); }
/* Premier textarea du projet : la vitrine publique a besoin de plusieurs
   lignes (presentation, horaires). Il reprend .form-input et n'ajoute que la
   hauteur et le sens d'etirement — jamais horizontal, qui casserait la grille. */
.form-textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.restant-display { background: var(--bg-secondary) !important; font-weight: 500; }

/* ============================================================
   MODALS — plein écran sur mobile
   ============================================================ */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.35); z-index: 1000;
  align-items: flex-end; justify-content: center;
  backdrop-filter: blur(2px);
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-medium);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 20px 16px;
  width: 100%; max-width: 100vw;
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-md);
  animation: modal-slide-up 0.2s ease;
}
.modal-large { width: 100%; }
@keyframes modal-slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.modal-title  { font-size: 16px; font-weight: 600; }
.modal-close  { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-secondary); padding: 4px 8px; border-radius: var(--radius-sm); flex-shrink: 0; }
.modal-close:hover { background: var(--bg-secondary); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.modal-actions .btn { flex: 1; justify-content: center; }

/* ============================================================
   TICKET
   ============================================================ */
.modal-ticket { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.ticket-preview { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; }
.ticket-body { padding: 18px 16px; font-family: 'Courier New', monospace; font-size: 12px; color: #111; }
.ticket-header { text-align: center; margin-bottom: 10px; }
.ticket-logo   { font-size: 28px; line-height: 1; margin-bottom: 5px; }
.ticket-shop   { font-size: 14px; font-weight: bold; letter-spacing: 1px; }
.ticket-shop-sub { font-size: 11px; color: #666; margin-top: 2px; }
.ticket-divider  { border-top: 1px dashed #bbb; margin: 8px 0; }
.ticket-meta-row { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; }
.ticket-id       { font-weight: bold; }
.ticket-section-title { font-size: 10px; font-weight: bold; letter-spacing: 0.8px; color: #666; text-transform: uppercase; margin-bottom: 5px; }
.ticket-client   { font-size: 14px; font-weight: bold; margin-bottom: 7px; }
.ticket-detail-row  { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; border-bottom: 1px dotted #e0e0e0; }
.ticket-montant-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; border-bottom: 0.5px solid var(--border-light); }
.ticket-restant-due { color: var(--danger-text); }
.ticket-solde       { color: var(--success-text); }
.ticket-footer      { text-align: center; font-size: 11px; color: #666; margin-top: 8px; padding-top: 6px; border-top: 1px dashed #bbb; }
.ticket-footer-sub  { font-size: 10px; color: #999; margin-top: 2px; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--text-primary); color: var(--bg-primary);
  padding: 11px 20px; border-radius: 30px;
  font-size: 13px; font-weight: 500; z-index: 2000;
  opacity: 0; transition: all 0.22s ease;
  pointer-events: none; max-width: calc(100vw - 32px);
  text-align: center; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 2px; }

/* ============================================================
   TABLETTE ≥ 640px
   ============================================================ */
@media (min-width: 640px) {
  .section { padding: 20px 20px; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .two-col { grid-template-columns: 1fr 1fr; }
  .form-row   { grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-row-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .filters-bar { flex-direction: row; flex-wrap: wrap; }
  .filter-select { width: auto; min-width: 130px; flex: 1; }
  .page-header { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .modal {
    border-radius: var(--radius-xl);
    width: 540px; max-width: 95vw;
    align-self: center;
  }
  .modal-large { width: 620px; }
  .modal-actions .btn { flex: none; }
  .modal-backdrop { align-items: center; }
}

/* ============================================================
   DESKTOP ≥ 900px — sidebar fixe visible
   ============================================================ */
@media (min-width: 900px) {
  /* Cacher topbar mobile, afficher sidebar fixe */
  .topbar { display: none; }
  .drawer-overlay { display: none !important; }

  .app { height: 100vh; }

  .sidebar {
    position: relative;
    transform: none !important;
    transition: none;
    width: var(--sidebar-w);
    flex-shrink: 0;
    height: 100%;
  }

  .main { overflow-y: auto; }
  .section { padding: 24px 28px; max-width: 1300px; }
  .metrics-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
  /* Cinq totaux sur une rangée : sur quatre colonnes, le cinquième se
     retrouvait seul en dessous et paraissait détaché des autres. */
  .metrics-grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
  .bar-label { width: 120px; font-size: 12px; }
  .bar-val   { font-size: 12px; }
  .page-title { font-size: 20px; }
  .metric-value { font-size: 20px; }
}

/* ============================================================
   GRAND ÉCRAN ≥ 1200px
   ============================================================ */
@media (min-width: 1200px) {
  :root { --sidebar-w: 240px; }
  .section { padding: 28px 32px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .topbar, .sidebar, .drawer-overlay, .btn, .modal-backdrop,
  .filters-bar, .cumul-bar, #login-screen { display: none !important; }
  .main { overflow: visible; }
  .section { display: block !important; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ===== PERMISSIONS LOCK ===== */
.perm-lock {
  font-size: 14px;
  opacity: 0.4;
  cursor: not-allowed;
  display: inline-block;
  padding: 2px 4px;
}

/* ===== FACTURE ===== */
.modal-facture-wide { width: 700px; }
@media (min-width: 640px) {
  #modal-facture .modal { border-radius: var(--radius-xl); }
}

/* ===== MINI MODAL CLIENT (z-index supérieur) ===== */
#modal-mini-client {
  z-index: 1200;
  background: rgba(0,0,0,0.55);
}
.btn-add-client-inline {
  display: inline-flex; align-items: center;
  margin-top: 5px; padding: 4px 10px;
  font-size: 11px; font-weight: 500;
  color: var(--info-text); background: var(--info-bg);
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; font-family: inherit;
  transition: opacity var(--transition);
}
.btn-add-client-inline:hover { opacity: 0.8; }

/* ===== CLIENT PICKER (recherche avec dropdown) ===== */
.client-picker { position: relative; }
.client-picker-input { width: 100%; }
.client-picker-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1500;
  max-height: 220px; overflow-y: auto;
}
.client-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer;
  font-size: 13px; color: var(--text-primary);
  border-bottom: 0.5px solid var(--border-light);
  transition: background var(--transition);
}
.client-picker-item:last-child { border-bottom: none; }
.client-picker-item:hover, .client-picker-item.active { background: var(--bg-secondary); }
.client-picker-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--info-bg); color: var(--info-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; flex-shrink: 0;
}
.client-picker-nom { font-weight: 500; line-height: 1.2; }
.client-picker-tel { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
.client-picker-empty { padding: 12px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.client-picker-selected .client-picker-input {
  border-color: var(--success-text);
  background: var(--success-bg);
  color: var(--success-text);
  font-weight: 500;
}

/* ===== TYPE BIJOU PILL ===== */
.type-bijou-pill {
  display: inline-block;
  font-size: 10px; padding: 1px 6px;
  border-radius: 20px;
  background: var(--importe-bg);
  color: var(--importe-text);
  font-weight: 500; margin-left: 4px;
  vertical-align: middle;
}

/* ===== PAIEMENT PILLS ===== */
.paiement-pill{display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;font-weight:500;white-space:nowrap}
.paiement-especes{background:var(--success-bg);color:var(--success-text)}
.paiement-wave{background:#e6f1fb;color:#185fa5}
.paiement-orange-money{background:#faeeda;color:#854f0b}
.paiement-carte{background:#eeedfe;color:#534ab7}
.paiement-livraison{background:var(--bg-secondary);color:var(--text-secondary);border:0.5px solid var(--border-light)}
.paiement-compte{background:var(--local-bg);color:var(--local-text)}

/* ===== CHOIX DU PAIEMENT — tuiles, plus de liste déroulante =====
   Six moyens repliés derrière un menu, c'est un geste de plus et un coup
   d'œil de moins au comptoir. Les tuiles réutilisent les couleurs des
   pastilles ci-dessus : la vendeuse doit retrouver au journal la couleur
   qu'elle a choisie à la vente — deux palettes pour la même chose auraient
   divergé.
   Au repos la tuile est neutre et ne porte que son pictogramme en couleur :
   six aplats colorés côte à côte feraient un nuancier, et plus rien ne
   signalerait celui qui est choisi. */
.paiement-choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .paiement-choix { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .paiement-choix { grid-template-columns: repeat(6, 1fr); } }

/* NI `background` NI `color` ICI, et c'est la clef de tout le bloc : les
   classes `.paiement-*` ci-dessus ont la même spécificité (une classe) et
   sont écrites AVANT, donc les poser ici les écraserait — la tuile choisie
   restait blanche et le pictogramme gris. Mesuré dans le navigateur, pas
   relu : les six états « choisi » rendaient tous exactement 5,56:1, signe
   qu'aucun n'avait pris sa couleur. */
.paiement-tuile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; cursor: pointer; text-align: center;
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  /* La bordure de l'état choisi fait 2 px : la réserver dès le repos évite
     que la tuile ne saute d'un pixel au clic. */
  outline: 1px solid transparent; outline-offset: -2px;
  transition: background .12s, border-color .12s;
}
.paiement-tuile:hover { background: var(--bg-muted); }
.paiement-tuile svg { width: 24px; height: 24px; }
.paiement-tuile-nom  { font-size: 12px; font-weight: 600; line-height: 1.2; }
.paiement-tuile-aide { font-size: 10px; color: var(--text-tertiary); line-height: 1.2; }

/* Choisi : le fond et le texte prennent la couleur du service, et la
   bordure la rend visible même pour qui distingue mal les teintes. */
.paiement-tuile.est-choisi { border-color: currentColor; outline-color: currentColor; }
.paiement-tuile.est-choisi .paiement-tuile-nom  { font-weight: 700; }
.paiement-tuile.est-choisi .paiement-tuile-aide { color: inherit; opacity: .75; }

/* Au repos : fond neutre, et seul le pictogramme garde la couleur du
   service. `:not()` donne deux classes de spécificité, assez pour battre
   `.paiement-wave` sans avoir à réécrire les six. */
.paiement-tuile:not(.est-choisi) { background: var(--bg-primary); }
.paiement-tuile:not(.est-choisi) .paiement-tuile-nom { color: var(--text-primary); }

/* ===== CHARTE KAYOR ===== */
:root {
  --kayor-or:        #C9A84C;
  --kayor-or-light:  #e8c96a;
  --kayor-or-dark:   #8a6a1a;
  --kayor-or-fonce:  #b3923c;   /* survol des boutons */
  --kayor-noir:      #1A1916;
  --kayor-or-bg:     #faf3e0;
  /* Plus de dégradé doré nulle part : décision du 2026-10-21. L'or est
     plat (--kayor-or), survol --kayor-or-fonce. Ne pas réintroduire. */
}

/* Login screen KAYOR */
.login-screen {
  background: linear-gradient(160deg, #1A1916 0%, #2d2a22 60%, #1A1916 100%);
}
.login-box {
  border-top: 3px solid #C9A84C;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,168,76,0.15);
}
.login-logo-img {
  display: block;
  max-width: 200px;
  margin: 0 auto 8px;
}
.login-tagline {
  text-align: center;
  font-size: 13px;
  color: #C9A84C;
  letter-spacing: 1px;
  margin-bottom: 24px;
  font-style: italic;
}
.login-box .btn-primary {
  background: var(--kayor-or) !important;
  border: none !important;
  color: var(--kayor-noir) !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.login-box .btn-primary:hover { background: var(--kayor-or-fonce) !important; }

/* Sidebar KAYOR */
.sidebar {
  border-right: 1px solid rgba(201,168,76,0.2);
}
.sidebar-brand {
  background: transparent;
  border-bottom: 1px solid rgba(201,168,76,0.2);
  padding: 20px 16px;
}
.brand-logo-img {
  display: block;
  max-width: 130px;
  margin: 0 auto;
}
.brand-tagline {
  text-align: center;
  font-size: 10px;
  color: var(--kayor-or);
  letter-spacing: 1.5px;
  margin-top: 4px;
  text-transform: uppercase;
}
.nav-item.active {
  background: var(--kayor-or-bg);
  color: var(--kayor-or-dark) !important;
  border-left: 3px solid var(--kayor-or);
  font-weight: 600;
}
.nav-item:hover:not(.active) {
  background: rgba(201,168,76,0.06);
}

/* Boutons primaires KAYOR — lettres noires sur un or plat.
   Le blanc sur l'or tombait à 1,17:1 : invisible dès qu'il y a du jour.
   Le noir de la charte tient 7,7:1, et c'est ce que fait une gravure. */
.btn-primary {
  background: var(--kayor-or) !important;
  border-color: transparent !important;
  color: var(--kayor-noir) !important;
  font-weight: 600;
}
.btn-primary:hover { background: var(--kayor-or-fonce) !important; }

/* Metric cards — le filet doré est passé sur la tranche gauche, porté par
   `--ton` (voir METRIC CARDS) pour varier selon la nature du chiffre. */
.metric-value { color: var(--kayor-noir); }

/* Carat pill or */
.carat-pill { border: 1px solid rgba(201,168,76,0.3); background: #faf3e0; color: var(--kayor-or-dark); }

/* Paiement pills */
.paiement-especes { background: #faf3e0; color: var(--kayor-or-dark); }

/* Page title accent */
.page-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--kayor-or);
  margin-top: 4px;
  border-radius: 2px;
}

/* Facture header KAYOR */
.facture-shop-name { color: var(--kayor-noir); }
.facture-num { color: var(--kayor-or); }

/* ============================================================
   BOUTON FLOTTANT — l'action de création à portée de pouce
   ============================================================
   Sur un téléphone, le « + Nouvelle vente » de l'en-tête sort de l'écran
   au premier défilement. Une vendeuse qui enchaîne les ventes remontait
   la liste à chaque fois.

   z-index 400 : au-dessus du contenu, sous les modales (1000). Même si le
   script oubliait de le masquer, il passerait derrière le fond de modale.
*/
.fab {
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 400;
  align-items: center;
  height: 50px;
  padding: 0 22px;
  border: none;
  border-radius: 25px;
  background: var(--kayor-or);
  color: var(--kayor-noir);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(26,25,22,0.28);
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
}
.fab:active { transform: scale(0.95); }

@media (max-width: 767px) {
  .fab.visible { display: inline-flex; }
  /* Sans cette marge, le bouton recouvre la dernière vente de la liste.
     La classe est posée sur <body> par majFab() : un sélecteur de voisinage
     dépendrait de la place exacte du bouton dans le document. */
  body.fab-actif .section.active { padding-bottom: 82px; }
}

@media print { .fab { display: none !important; } }

/* ===========================================================================
   ÉCRITURE EN COURS — `body[data-occupe]`, posé par js/verrou.js
   ===========================================================================
   Une règle, et non un `btn.disabled` recopié dans chaque handler : neuf sur
   une trentaine le faisaient, et les boutons des cartes de liste, créés en
   innerHTML, n'ont pas d'identifiant à désactiver.

   Le besoin vient du constat du 2026-11-02 : sur une connexion lente, rien ne
   signalait qu'une requête était partie. La vendeuse recliquait — et c'est ce
   qui faisait deux ventes. Verrouiller sans rien montrer aurait seulement
   remplacé le double enregistrement par un bouton mort sans explication.

   Les trois marques, du plus discret au plus visible :
   1. le curseur passe en attente, partout ;
   2. les boutons de la modale ouverte et le bouton flottant ne répondent plus ;
   3. un filet dans le ton or traverse le haut de l'écran.
   --------------------------------------------------------------------------- */

body[data-occupe] { cursor: progress; }

/* `pointer-events` plutôt que `disabled` : la règle vaut aussi pour les
   boutons rendus en innerHTML, qui n'ont ni id ni poignée JS. « Annuler » est
   bloqué comme les autres — fermer la modale au milieu d'une écriture
   cacherait son résultat, ce qui est précisément ce qu'on corrige. */
/* `.modal-backdrop.show` — PAS `.modal.show`. La racine d'une modale porte
   `modal-backdrop`, et `.modal` est le panneau a l'interieur. Ecrit de
   memoire la premiere fois, le selecteur ne correspondait a rien : le filet
   de progression s'affichait, les boutons restaient cliquables. Mesure dans
   le navigateur, pas relu. */
body[data-occupe] .modal-backdrop.show .modal-actions .btn,
body[data-occupe] .fab {
  pointer-events: none;
  opacity: 0.55;
}

/* Le filet de progression. 3 px, au-dessus de tout, dans l'or de la charte —
   `--kayor-or` à plat, lettres noires nulle part ici : c'est un trait, pas un
   bouton. Il est purement décoratif, donc `aria-hidden` par construction (un
   pseudo-élément n'entre pas dans l'arbre d'accessibilité) ; l'information
   utile reste le toast. */
body[data-occupe]::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 10000;
  background: linear-gradient(90deg,
    transparent 0%, var(--kayor-or) 45%, var(--kayor-or) 55%, transparent 100%);
  background-size: 220% 100%;
  animation: kayor-occupe 1.1s linear infinite;
}

@keyframes kayor-occupe {
  from { background-position: -110% 0; }
  to   { background-position:  110% 0; }
}

/* Une vendeuse qui a demandé moins d'animations garde le filet — il porte
   l'information — mais fixe, et sans défilement. */
@media (prefers-reduced-motion: reduce) {
  body[data-occupe]::before {
    animation: none;
    background: var(--kayor-or);
  }
}

@media print { body[data-occupe]::before { display: none; } }