@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #0f1720;
  --panel: #161f2a;
  --panel-hover: #1b2530;
  --border: #253141;
  --text: #e8edf2;
  --text-dim: #8a97a8;
  --accent: #e1c001;
  --accent-dim: #4a3f0a;
  --alert: #f2545b;
  --alert-dim: #4a2226;
  --vert: #2fb35a;
  --vert-dim: #1c3a26;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --topbar-h: 56px;
}

:root[data-theme="light"] {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-hover: #eef1f4;
  --border: #dde2e8;
  --text: #182430;
  --text-dim: #6b7684;
  --accent: #b8960a;
  --accent-dim: #fbf0c8;
  --alert: #d6323b;
  --alert-dim: #fbdadc;
  --vert: #23923f;
  --vert-dim: #d9f2e0;
}

/* Le logo change d'image selon le thème (voir appliquerTheme() dans app.js)
   pour garder le cercle doré intact au lieu de l'inverser. */

* { box-sizing: border-box; }

html {
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button, input, select { font-family: inherit; }

/* ---------- Ecran de connexion ---------- */

.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
}

.login-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.login-logo { max-width: 220px; width: 100%; height: auto; display: block; }

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.field input {
  width: 100%; padding: 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 15px;
}
.field input:focus { outline: none; border-color: var(--accent); }

/* Champ mot de passe avec bouton "œil" pour afficher/masquer la saisie */
.field-mdp-wrap { position: relative; }
.field-mdp-wrap input { padding-right: 42px; }
.field-mdp-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-dim); cursor: pointer; padding: 0;
}
.field-mdp-toggle:active { color: var(--text); }
.field-mdp-toggle svg { width: 20px; height: 20px; }
.field-mdp-toggle .icone-oeil-barre { display: none; }
.field-mdp-toggle.actif .icone-oeil { display: none; }
.field-mdp-toggle.actif .icone-oeil-barre { display: block; }
.field select {
  width: 100%; padding: 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 15px; font-family: inherit;
}
.field select:focus { outline: none; border-color: var(--accent); }

.btn {
  width: 100%; padding: 13px; border-radius: 8px; border: none; background: var(--accent);
  color: #1a1400; font-weight: 600; font-size: 15px; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.6; cursor: default; }

.btn-secondary {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  padding: 10px 14px; border-radius: 8px; font-size: 14px; cursor: pointer;
}

.ecarts-filtre-onglet-btn.active, .doc-filtre-onglet-btn.active {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.ecarts-filtre-panneau, .doc-filtre-panneau { display: none; }
.ecarts-filtre-panneau.active, .doc-filtre-panneau.active { display: block; }

/* Bouton torche du scanner : mis en evidence (fond jaune) quand la torche
   est allumee, pour un retour visuel immediat. */
[id$="-torche-btn"].torche-active {
  background: #e1c001; border-color: #e1c001; color: #1a1a1a; font-weight: 600;
}

.error-msg {
  background: var(--alert-dim); color: #ffd7d9; border: 1px solid var(--alert);
  padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; display: none;
}
.error-msg.show { display: block; }

.link-btn {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 13px; text-decoration: underline; padding: 0;
}
.link-btn:hover { color: var(--text); }

/* ---------- App (scan terrain) ---------- */

.app { display: none; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
.app.active { display: flex; }

.offline-bandeau {
  display: none;
  background: var(--alert);
  color: #fff;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 25;
}
.offline-bandeau.show { display: block; }
.offline-bandeau.decale-sous-topbar { top: var(--topbar-h); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; height: var(--topbar-h); border-bottom: 1px solid var(--border);
  background: var(--bg); position: fixed; top: 0; left: 0; right: 0; z-index: 30;
}
.topbar.hidden { display: none; }

.topbar-logo { height: 26px; width: auto; display: block; cursor: pointer; }

.topbar-retour {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--text);
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
  padding: 4px 6px 4px 0; cursor: pointer;
}
.topbar-retour:hover { color: var(--accent); }

.page { display: none; }

/* Bouton centre pour basculer entre la vue code-barre et la vue photo */
.stock-vue-toggle-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.stock-vue-toggle {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 22px; color: var(--accent); cursor: pointer;
}
.stock-vue-toggle:hover { border-color: var(--accent); }
.stock-vue-toggle span:last-child { font-size: 11.5px; font-weight: 600; color: var(--text); }
.page.active { display: block; }

/* Page Profil : presentee exactement comme la feuille de choix de photo
   (fond assombri + carte a coins arrondis qui glisse depuis le bas). */
#page-profil {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
#page-profil.active { opacity: 1; pointer-events: auto; }

.profil-sheet-inner {
  position: relative;
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border-radius: 18px 18px 0 0;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(.32, .72, 0, 1);
}
#page-profil.active .profil-sheet-inner { transform: translateY(0); }
.profil-sheet-drag-zone { padding: 14px 0 16px; margin: -10px 0 0; touch-action: none; }
.profil-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto; }
.profil-sheet-fermer {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  color: var(--text-dim); cursor: pointer; padding: 6px;
}
.profil-sheet-fermer:hover { color: var(--text); }

.admin-titre {
  font-family: var(--font-display); font-size: 20px; margin: 0 0 16px;
}

.admin-onglets {
  display: flex; gap: 4px; overflow-x: auto; margin-bottom: 18px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.admin-onglet {
  flex-shrink: 0; padding: 10px 14px; background: none; border: none;
  color: var(--text-dim); font-size: 14px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.admin-onglet.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-onglet-contenu { display: none; }
.admin-onglet-contenu.active { display: block; }

.admin-form {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; margin-bottom: 20px;
}

.admin-depots-choice { display: flex; gap: 16px; flex-wrap: wrap; }

.admin-depots-choice label.checkbox {
  display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text);
}

.admin-liste { display: flex; flex-direction: column; gap: 8px; }

.admin-user-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px;
}

.admin-user-nom { font-weight: 600; font-size: 14px; }
.admin-user-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.admin-user-suppr { color: var(--alert); }

.demande-row-clic { cursor: pointer; }
.demande-row-clic:hover { border-color: var(--accent, #999); }

.demande-detail-titre { text-align: center; margin-bottom: 14px; }
.demande-detail-code {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.3px; margin-bottom: 4px;
}
.demande-detail-libelle {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--accent);
}

.demande-detail-actions { display: flex; flex-direction: column; gap: 8px; }
.demande-detail-actions .btn-secondaire {
  background: var(--panel-hover); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.demande-detail-actions .btn-annuler { color: var(--alert); }

.page-header-simple {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 10px; flex-wrap: wrap;
}

.badge {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; margin-left: 6px;
}
.badge.ok { background: var(--accent-dim); color: var(--accent); }
.badge.alert { background: var(--alert-dim); color: var(--alert); }

.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-overlay.show { display: flex; }

.modal-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 28px 24px; max-width: 360px; width: 100%; text-align: center;
}

.modal-icone { font-size: 40px; margin-bottom: 12px; }

.modal-texte { font-size: 15px; line-height: 1.5; margin-bottom: 20px; color: var(--text); }

.status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(45,212,167,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(45,212,167,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,212,167,0); }
}

.scan-main {
  flex: 1; padding: 16px; padding-bottom: 88px; max-width: 640px; width: 100%; margin: 0 auto;
  touch-action: pan-y; position: relative; overscroll-behavior: none;
}
/* Compense la hauteur du header fixe quand il est visible (masque sur
   l'accueil). Classe posee/retiree en JS en meme temps que .topbar.hidden. */
.scan-main.avec-topbar { padding-top: calc(16px + var(--topbar-h)); }

/* ---------- Mode "vitrine client" (borne en magasin) ---------- */
/* Compte dedie, sans menu ni navigation : une seule page (recherche),
   plein ecran, avec juste un bouton discret pour que le personnel
   puisse quitter/se reconnecter. */
.mode-client #bottom-nav,
.mode-client #topbar,
.mode-client #depot-choice,
.mode-client #stock-vue-toggle-wrap,
.mode-client #scan-btn {
  display: none !important;
}
.mode-client .scan-main {
  padding-bottom: 16px;
}
.client-quitter-btn {
  display: none;
}
.mode-client .client-quitter-btn {
  display: block;
  margin: 0 0 12px auto;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-dim); font-size: 11px; padding: 6px 12px; cursor: pointer;
  opacity: 0.5;
}
.mode-client .client-quitter-btn:hover { opacity: 1; }

.client-logo-wrap { display: none; }
.mode-client .client-logo-wrap {
  display: flex; justify-content: center; padding: 48px 0 32px;
}
.client-logo-scan {
  position: relative; width: 100%; max-width: 1040px; height: 200px; border-radius: 28px;
  background: var(--panel); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  margin: 0 16px;
}
.client-logo-img { width: 480px; height: auto; object-fit: contain; }
.client-logo-scanline {
  position: absolute; left: 10px; right: 10px; height: 3px;
  background: var(--client-theme, var(--vert)); box-shadow: 0 0 14px var(--client-theme, var(--vert));
  animation: client-scan 2.2s ease-in-out infinite;
}
@keyframes client-scan {
  0%   { top: 6%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}
.mode-client .search-block {
  max-width: 520px; margin: 0 auto;
}
.mode-client .search-block input {
  font-size: 18px; padding: 16px 18px;
}
.mode-client .search-block input:focus {
  border-color: var(--client-theme, var(--accent));
}

/* Indicateur "tirer pour actualiser" */
.pull-refresh-zone {
  position: absolute; top: 0; left: 0; right: 0; height: 50px; overflow: hidden;
  pointer-events: none; z-index: 5;
}
.pull-refresh-indicator {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 0; color: var(--accent);
  transform: translateY(-100%);
}
.pull-refresh-indicator svg { transition: transform 0.15s ease; }
.pull-refresh-indicator.pret svg { transform: rotate(180deg); }
.pull-refresh-indicator.chargement svg { animation: pull-refresh-spin 0.7s linear infinite; }
@keyframes pull-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Barre de navigation en bas ---------- */

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; background: var(--panel); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 12px; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 11px; font-family: inherit;
}

.bottom-nav-item svg { flex-shrink: 0; }

.bottom-nav-item.active { color: var(--accent); font-weight: 600; }

.nav-plus-wrap { position: relative; }

/* ---------- Panneau lateral (style Facebook) ---------- */

.side-panel-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 40;
}
.side-panel-overlay.show { display: block; }

.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 78%; max-width: 320px;
  background: var(--panel); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform 0.25s ease;
  display: flex; flex-direction: column; padding: 18px 0;
  box-shadow: -8px 0 24px rgba(0,0,0,0.4);
}
.side-panel-overlay.show .side-panel { transform: translateX(0); }

.side-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px 18px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.side-panel-logo { height: 32px; width: auto; }
.side-panel-profil-btn {
  display: flex; align-items: center; gap: 12px; background: none; border: none;
  padding: 4px; margin: -4px 0; cursor: pointer; color: var(--text); text-align: left;
  border-radius: 10px; flex: 1; min-width: 0;
}
.side-panel-profil-btn:hover { background: var(--panel-hover); }
.side-panel-nom {
  font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.side-panel-fermer {
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  padding: 4px;
}
.side-panel-fermer:hover { color: var(--text); }

/* Bulle d'avatar reutilisable : photo, avatar-emoji, ou initiales */
.avatar-bulle {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 15px;
  text-transform: uppercase;
}
.avatar-bulle.avatar-emoji { font-size: 20px; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; }

.avatar-bulle-grand { width: 84px; height: 84px; font-size: 28px; }
.avatar-bulle-grand.avatar-emoji { font-size: 40px; }

.profil-header {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 4px;
}
.profil-header .avatar-bulle-grand {
  border: none; padding: 0; cursor: pointer; position: relative;
}
.profil-header .avatar-bulle-grand::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px dashed var(--border);
}
.avatar-wrap-profil { position: relative; display: inline-block; }
.avatar-photo-badge {
  position: absolute; bottom: -6px; right: -6px;
  width: 28px; height: 28px; border-radius: 50%;
  background-color: var(--accent);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Ccircle cx='12' cy='13' r='4'%3E%3C/circle%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
  border: 2px solid var(--bg); z-index: 2; box-sizing: border-box;
}

.profil-avatar-choix {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin: 14px 0; padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
}
.profil-avatar-choix-item {
  width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer;
}
.profil-avatar-choix-item.selected { border-color: var(--accent); }

/* Bottom sheet : feuille d'options qui glisse depuis le bas */
.bottom-sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  z-index: 1000;
}
.bottom-sheet-overlay.show { opacity: 1; pointer-events: auto; }

.bottom-sheet {
  width: 100%; max-width: 480px; background: var(--panel);
  border-radius: 18px 18px 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.25s ease;
  display: flex; flex-direction: column; gap: 2px;
}
.bottom-sheet-overlay.show .bottom-sheet { transform: translateY(0); }

.bottom-sheet-handle {
  width: 36px; height: 4px; border-radius: 2px; background: var(--border);
  margin: 6px auto 10px;
}
.bottom-sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; text-align: left; color: var(--text);
  font-size: 15px; padding: 14px 6px; border-top: 1px solid var(--border);
  cursor: pointer;
}
.bottom-sheet-item:first-of-type { border-top: none; }
.bottom-sheet-item svg { flex-shrink: 0; color: var(--accent); }
.bottom-sheet-item-danger { color: var(--alert); }
.bottom-sheet-item-danger svg { color: var(--alert); }
.bottom-sheet-annuler { justify-content: center; font-weight: 600; margin-top: 6px; border-top: none; }

.side-panel-liste { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }

.side-panel-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 12px; background: none; border: none; border-radius: 8px;
  color: var(--text); font-size: 14.5px; text-align: left; cursor: pointer;
}
.side-panel-item:hover { background: var(--panel-hover); }

.side-panel-item-toggle { justify-content: flex-start; cursor: pointer; }
.side-panel-item-toggle span:nth-child(2) { flex: 1; }

.side-panel-deconnexion {
  margin: auto 10px 4px; padding: 13px 12px;
  display: flex; align-items: center; gap: 14px; width: calc(100% - 20px);
  background: none; border: none; border-top: 1px solid var(--border);
  border-radius: 8px; color: var(--alert); font-size: 14.5px; font-weight: 600;
  text-align: left; cursor: pointer; padding-top: 18px;
}
.side-panel-deconnexion:hover { background: var(--panel-hover); }

.toggle-switch {
  position: relative; display: inline-block; width: 46px; height: 26px;
  background: var(--border); border-radius: 999px; flex-shrink: 0;
  transition: background 0.2s ease;
}
.toggle-switch.actif { background: var(--accent); }

.toggle-switch-bille {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.toggle-switch.actif .toggle-switch-bille { transform: translateX(20px); }

.toggle-switch-champ {
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
}

/* ---------- Bouton Scan central, surelevé et plus grand ---------- */

.bottom-nav-item#nav-scan-direct-btn {
  position: relative;
  color: #1a1400;
}

.bottom-nav-item#nav-scan-direct-btn .scan-cercle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -26px;
  box-shadow: 0 6px 16px rgba(225, 192, 1, 0.45), 0 0 0 4px var(--bg);
}

.bottom-nav-item#nav-scan-direct-btn .scan-cercle svg {
  width: 26px;
  height: 26px;
}

.bottom-nav-item#nav-scan-direct-btn span {
  margin-top: 2px;
  color: var(--text-dim);
  font-weight: 600;
}

.bottom-nav-item#nav-scan-direct-btn:active .scan-cercle {
  transform: scale(0.94);
}

/* ---------- Page accueil ---------- */

.accueil-header {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 16px 24px;
}

.accueil-logo { max-width: 160px; width: 100%; height: auto; margin-bottom: 8px; cursor: pointer; }

.accueil-bonjour {
  font-size: 19px; font-weight: 700; color: var(--text);
  font-family: var(--font-display); letter-spacing: 0.2px;
}
.accueil-datetime { font-size: 12.5px; color: var(--text-dim); font-family: var(--font-mono); }

.accueil-msg-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.accueil-msg-label { font-size: 13px; color: var(--text-dim); margin-bottom: 2px; }

.accueil-msg-count { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--accent); }

.search-block { margin-bottom: 14px; }

.depot-choice { display: flex; gap: 10px; margin-bottom: 12px; }

.depot-btn {
  flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 15px; font-weight: 600;
  font-family: var(--font-mono); cursor: pointer; text-align: center;
}
.depot-btn:active { transform: translateY(1px); }
.depot-btn.selected {
  background: var(--accent); border-color: var(--accent); color: #1a1400;
}

.search-row { display: flex; gap: 8px; margin-bottom: 10px; }

.search-input-wrap { position: relative; flex: 1; }

.search-input-wrap input {
  width: 100%; padding: 14px 40px 14px 14px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-size: 16px; font-family: var(--font-mono); box-sizing: border-box;
}
.search-input-wrap input:focus { outline: none; border-color: var(--accent); }

.btn-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--border);
  color: var(--text); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.btn-clear:hover { background: var(--alert); color: white; }

.suggestions-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  max-height: 240px; overflow-y: auto; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.suggestions-dropdown.show { display: block; }

.suggestion-item {
  padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between;
  gap: 10px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: var(--panel-hover); }
.suggestion-code { font-family: var(--font-mono); color: var(--accent); font-weight: 600; white-space: nowrap; }
.suggestion-libelle { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-scan {
  width: 52px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent-dim); color: var(--accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.btn-scan:active { transform: translateY(1px); }

.scanner-wrap {
  display: none; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; text-align: center;
}
.scanner-wrap.show { display: block; }
#scanner { border-radius: 8px; overflow: hidden; margin-bottom: 10px; }

/* Recadrage circulaire de la photo de profil */
.profil-crop-cercle {
  position: relative; width: 240px; height: 240px; margin: 0 auto 14px;
  border-radius: 50%; overflow: hidden; background: #000;
  border: 2px solid var(--accent); touch-action: none; cursor: grab;
}
.profil-crop-cercle img {
  position: absolute; top: 0; left: 0; max-width: none; user-select: none;
  -webkit-user-drag: none; pointer-events: none;
}
#profil-crop-zoom { width: 100%; margin-bottom: 12px; }

.btn-close-scan { width: 100%; }

/* Boitier video + cadre de visee (viewfinder) superpose sur la camera.
   Marges negatives egales au padding de .scanner-wrap (12px) : la boite
   video vient border les bords de .scan-main (qui garde ses 16px de
   marge globale), pour un aperçu caméra bien plus large qu'avant. */
.scanner-video-box { position: relative; border-radius: 8px; overflow: hidden; margin: 0 -12px 10px -12px; }
.scanner-video-box #scanner,
.scanner-video-box #etq-scanner,
.scanner-video-box #douchette-scanner,
.scanner-video-box #inv-scanner { margin-bottom: 0; }

/* La librairie de scan pose parfois sa propre taille sur la balise
   <video> (en style inline), calquee sur la resolution reelle du flux
   camera (souvent au format portrait sur telephone) plutot que sur nos
   reglages d'aspect ratio. On force donc la hauteur directement ici,
   avec !important pour passer outre ce style inline, et on recadre le
   flux (object-fit: cover) pour remplir cette hauteur reduite proprement. */
.scanner-video-box video {
  width: 100% !important;
  height: 40vh !important;
  max-height: 40vh !important;
  object-fit: cover !important;
  display: block;
}

/* Etat "chargement" : tant que le flux camera n'a pas *reellement* commence
   a jouer (evenement natif "playing", voir forcerLectureVideoScanner dans
   app.js), on masque la balise <video> - qui affiche sinon brievement son
   "poster" natif gris + triangle play le temps que la camera s'initialise -
   et on montre un spinner a la place. */
#scanner.scanner-chargement,
#etq-scanner.scanner-chargement,
#douchette-scanner.scanner-chargement,
#inv-scanner.scanner-chargement,
#scan-direct-scanner.scanner-chargement {
  position: relative;
}
#scanner.scanner-chargement video,
#etq-scanner.scanner-chargement video,
#douchette-scanner.scanner-chargement video,
#inv-scanner.scanner-chargement video,
#scan-direct-scanner.scanner-chargement video {
  visibility: hidden !important;
}
#scanner.scanner-chargement::after,
#etq-scanner.scanner-chargement::after,
#douchette-scanner.scanner-chargement::after,
#inv-scanner.scanner-chargement::after,
#scan-direct-scanner.scanner-chargement::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: scanner-chargement-spin 0.8s linear infinite;
  z-index: 2;
}
@keyframes scanner-chargement-spin {
  to { transform: rotate(360deg); }
}

.scanner-viewfinder {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}

/* La librairie de scan (html5-qrcode) dessine elle-meme un cadre autour
   de sa zone de lecture (element #qr-shaded-region), en plus de notre
   propre cadre de visee personnalise ci-dessous. On le masque pour ne
   garder qu'un seul cadre a l'ecran au lieu de deux superposes. */
#qr-shaded-region {
  display: none !important;
}

/* Style "ligne laser" : cadre fin + trait qui balaie de haut en bas en
   continu tant que le scanner est actif, pour confirmer visuellement
   que la lecture est en cours. */
.scanner-viewfinder-zone {
  position: relative; width: min(98%, 600px); height: 68%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.scanner-viewfinder-laser {
  position: absolute; left: 6%; right: 6%; height: 2px; top: 8%;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  box-shadow: 0 0 8px 1px var(--accent);
  animation: scanner-balaie 2.1s ease-in-out infinite;
}
@keyframes scanner-balaie {
  0%   { top: 8%;  opacity: 0; }
  10%  { opacity: 1; }
  50%  { top: 88%; opacity: 1; }
  60%  { opacity: 0; }
  100% { top: 8%;  opacity: 0; }
}

/* Feedback visuel a la detection d'un code : le cadre passe au vert et
   le trait se fige un instant avant la fermeture/reprise du scanner. */
.scanner-viewfinder.detecte .scanner-viewfinder-zone {
  border-color: var(--vert);
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.3), 0 0 14px 2px rgba(47, 179, 90, 0.55);
}
.scanner-viewfinder.detecte .scanner-viewfinder-laser {
  animation: none; top: 50%;
  background: var(--vert);
  box-shadow: 0 0 10px 2px var(--vert);
}

/* Variante rouge : code lu par la camera mais article non trouve. */
.scanner-viewfinder.erreur .scanner-viewfinder-zone {
  border-color: var(--alert);
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.3), 0 0 14px 2px rgba(242, 84, 91, 0.55);
}
.scanner-viewfinder.erreur .scanner-viewfinder-laser {
  animation: none; top: 50%;
  background: var(--alert);
  box-shadow: 0 0 10px 2px var(--alert);
}

.resultats { display: flex; flex-direction: column; gap: 10px; }

.result-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}

.article-header { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }

.article-libelle {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
}

.article-meta {
  display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim);
  justify-content: center;
}
.article-meta span::after { content: "•"; margin-left: 8px; color: var(--border); }
.article-meta span:last-child::after { content: ""; margin-left: 0; }

.article-codes {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
}

.prix-row {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  flex-wrap: nowrap; overflow-x: auto;
}

.prix-normal {
  font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--text); white-space: nowrap;
}

.prix-barre {
  font-family: var(--font-mono); font-size: 16px; color: var(--alert);
  text-decoration: line-through; white-space: nowrap;
}

.badge-remise {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--accent-dim); background: var(--accent);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}

.size-table .badge-remise { font-size: 11px; padding: 2px 7px; }

.prix-solde {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--vert); white-space: nowrap;
}

.size-table .prix-barre { font-size: 13px; }
.size-table .prix-solde { font-size: 14px; }
.size-table td { line-height: 1.5; }

.variantes-list { display: flex; flex-direction: column; gap: 10px; }

.variant-block {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--bg);
}

.variant-title {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--accent);
  margin-bottom: 8px;
}

.grille-header { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }

/* ---------- Fiche "vitrine client" (compte client, version allegee) --- */
.fiche-client {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 32px 16px 70px; max-width: 420px; margin: 0 auto;
}
.fiche-client-photo {
  display: none; max-width: 260px; max-height: 260px; width: auto; height: auto;
  border-radius: 14px; margin-bottom: 8px; object-fit: contain; background: var(--bg);
  border: 1px solid var(--border);
}
.fiche-client-code {
  font-family: var(--font-mono); font-size: 15px; color: var(--text); font-weight: 600;
}
.fiche-client-libelle {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text);
}
.fiche-client-meta {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-size: 14px; color: var(--text-dim);
}
.fiche-client-meta span::after { content: "•"; margin-left: 8px; color: var(--border); }
.fiche-client-meta span:last-child::after { content: ""; margin-left: 0; }
.fiche-client-prix {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
}
.fiche-client-prix-principal {
  font-family: var(--font-mono); font-size: 30px; font-weight: 700; color: var(--text);
}
.fiche-client-prix .prix-solde.fiche-client-prix-principal { color: var(--client-theme, var(--vert)); }
.fiche-client-prix .prix-barre { font-size: 18px; }
.fiche-client-prix .badge-remise { font-size: 15px; }

.fiche-client-tailles {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px;
}
.fiche-client-taille {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text);
  background: var(--panel); border: 1px solid var(--client-theme, var(--border)); border-radius: 8px;
  padding: 8px 14px; min-width: 40px; text-align: center;
}
.fiche-client-tailles-vide {
  font-size: 13px; color: var(--text-dim); margin-top: 16px;
}

.fiche-client-bandeau {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #e1c001; height: 54px; overflow: hidden;
  display: flex; align-items: center;
}
.fiche-client-bandeau-defil {
  display: flex; flex-shrink: 0; white-space: nowrap;
  animation: fiche-client-defilement 10s linear infinite;
}
.fiche-client-bandeau-defil span {
  padding: 0 40px; color: #3a2f00; font-size: 20px; font-weight: 700; letter-spacing: 0.5px;
}
@keyframes fiche-client-defilement {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.article-photo {
  display: none; max-width: 160px; max-height: 160px; width: auto; height: auto;
  border-radius: 10px; margin: 0 auto 8px; object-fit: contain; background: var(--bg);
  border: 1px solid var(--border);
}

.grille-titre {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  display: flex; flex-direction: column; gap: 2px;
}

.grille-code {
  color: var(--text); font-weight: 600;
}

.grille-libelle {
  color: var(--text); font-weight: 600;
}

.grille-meta {
  display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim);
  justify-content: center;
}
.grille-meta span::after { content: "•"; margin-left: 8px; color: var(--border); }
.grille-meta span:last-child::after { content: ""; margin-left: 0; }

.grille-note {
  font-size: 12px; color: var(--text-dim); font-style: italic;
}

.solde-nom-unique {
  text-align: center; margin-bottom: 8px; font-style: normal; color: var(--text-dim); font-size: 12px;
}

.size-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }

.size-table { width: 100%; border-collapse: collapse; }

.size-table th, .size-table td {
  text-align: center; padding: 10px 8px; font-family: var(--font-mono); font-size: 14px;
  border-right: 1px solid var(--border); white-space: nowrap;
}
.size-table th:last-child, .size-table td:last-child { border-right: none; }

.size-table th {
  background: var(--panel-hover); color: var(--text-dim); font-size: 12px;
  border-bottom: 1px solid var(--border); font-weight: 600;
}

.size-table td.ok { color: var(--vert); font-weight: 600; }
.size-table td.zero { color: var(--alert); font-weight: 600; }

.size-table td.row-label {
  text-align: left; color: var(--text-dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; background: var(--panel-hover); font-weight: 600;
}

.btn-voir-tailles { width: 100%; margin-top: 4px; }

/* Colonne "zoomee" : met en avant la taille trouvee via le code-barres scanne */
.size-table th.taille-zoom,
.size-table td.taille-zoom {
  position: relative; z-index: 2;
  background: var(--accent-dim); color: var(--accent);
  font-size: 17px; font-weight: 800;
  transform: scale(1.18);
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--accent);
}
.size-table td.taille-zoom.zero { background: var(--alert-dim); color: var(--alert); box-shadow: 0 0 0 2px var(--alert); }
.size-table th.taille-zoom { background: var(--accent); color: #fff; }

.result-card .depots {
  display: flex; flex-direction: column; gap: 6px;
}

.depot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 14px;
}

.depot-row .depot-name { color: var(--text-dim); }
.depot-row .qte {
  font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums;
}
.depot-row .qte.zero { color: var(--alert); }
.depot-row .qte.ok { color: var(--vert); }

.result-total {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-dim);
}
.result-total .val {
  font-family: var(--font-mono); font-size: 16px; color: var(--text); font-weight: 600;
}

.demande-hint { font-size: 12.5px; color: var(--text-dim); margin-top: 10px; text-align: center; }
.demande-stockiste-form {
  margin-top: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px;
}
.demande-stockiste-form .field { margin-bottom: 12px; }
.demande-stockiste-form .field:last-of-type { margin-bottom: 14px; }
.demande-taille-choisie { font-size: 14px; margin-bottom: 12px; }

.taille-select-cell { cursor: pointer; }
.taille-select-cell.taille-selectionnee {
  background: var(--accent) !important; color: #1a1400 !important; font-weight: 800;
}

.demande-en-avant { box-shadow: 0 0 0 2px var(--accent); border-radius: 10px; transition: box-shadow 0.3s ease; }

.empty-state, .loading {
  padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 14px;
}

.historique-dropdown-entete {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--text-dim); padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}

.historique-vider {
  background: none; border: none; color: var(--text-dim); font-size: 12px;
  text-decoration: underline; cursor: pointer; padding: 4px;
}

.install-banner {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  padding: 12px 16px; display: none; align-items: center; gap: 12px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 50; max-width: 90vw;
}
.install-banner.show { display: flex; }
.install-banner button {
  background: var(--accent); border: none; color: #1a1400; font-weight: 600;
  padding: 7px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; flex-shrink: 0;
}

/* ---------- Page BDA (choix Douchette / Etiquette) ---------- */

.bda-choix { display: flex; flex-direction: column; gap: 14px; }

.bda-option {
  display: flex; align-items: center; gap: 16px;
  width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; cursor: pointer; color: var(--text);
}
.bda-option:hover { background: var(--panel-hover); border-color: var(--accent); }

.bda-option-icone {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 10px;
  background: var(--accent-dim); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}

.bda-option-texte { display: flex; flex-direction: column; gap: 3px; }
.bda-option-titre { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.bda-option-sous-titre { font-size: 12.5px; color: var(--text-dim); }

.bda-retour { display: inline-block; margin-bottom: 10px; }

/* ---------- Page Galerie photos ---------- */

.galerie-filtres-row { display: flex; gap: 12px; }
.galerie-filtres-row .field { flex: 1; }

.gal-solde-toggle {
  display: flex; align-items: center; gap: 8px; margin: 12px 0;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.gal-solde-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }

#gal-marque, #gal-division, #gal-depot {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  font-size: 14px;
}

.galerie-grille {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}

.gal-carte {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; cursor: pointer; text-align: left;
}
.gal-carte:hover { border-color: var(--accent); }

.gal-carte-photo {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--panel-hover); display: block;
}
.gal-carte-photo-vide {
  width: 100%; aspect-ratio: 1 / 1; background: var(--panel-hover);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 11px; text-align: center; padding: 8px;
}

.gal-carte-infos { padding: 8px 10px; }
.gal-carte-libelle {
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gal-carte-marque { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.gal-carte-prix { font-size: 12.5px; color: var(--accent); margin-top: 4px; font-weight: 600; }

/* ---------- Page Etiquettes ---------- */

.etiquette-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: center;
  text-align: center;
}

.etiquette-dimension {
  font-family: var(--font-mono); font-size: 13px; color: var(--text-dim);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px;
}

.etiquette-prix {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--accent);
}

.etiquette-prix.solde .etiquette-prix-barre {
  font-size: 15px; color: var(--alert); text-decoration: line-through; margin-right: 8px; font-weight: 500;
}

.etiquette-barcode-svg { max-width: 100%; }

.etiquette-liste-tailles { width: 100%; display: flex; flex-direction: column; gap: 8px; }

.etiquette-ligne-taille {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
}

/* Zone d'impression : invisible a l'ecran, uniquement utilisee par le navigateur au moment d'imprimer */
#zone-impression { display: none; }

@media print {
  body * { visibility: hidden; }
  #zone-impression, #zone-impression * { visibility: visible; }
  #zone-impression {
    display: block; position: fixed; top: 0; left: 0; width: 100%;
  }
  .etiquette-impression {
    width: 60mm; padding: 4mm; text-align: center; font-family: var(--font-body); color: #000;
  }
  .etiquette-impression .nom { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
  .etiquette-impression .dim { font-size: 10px; color: #333; margin-bottom: 3px; }
  .etiquette-impression .prix { font-size: 16px; font-weight: 700; margin-top: 3px; }
  .etiquette-impression .prix-barre { font-size: 11px; text-decoration: line-through; color: #555; margin-right: 6px; }
}


/* --------------------------------------------------------------- */
/* Tableau Roles & permissions                                     */
/* --------------------------------------------------------------- */
.perm-table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel);
}
table.perm-table { border-collapse: collapse; width: 100%; min-width: 460px; }
.perm-table th, .perm-table td {
  padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--border);
}
.perm-table th { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); font-weight: 500; }
.perm-table thead th:first-child, .perm-table tbody td.perm-nom {
  text-align: left; position: sticky; left: 0; background: var(--panel);
  min-width: 170px;
}
.perm-table thead th:not(:first-child) {
  font-family: var(--font-display); font-size: 13px; color: var(--text);
}
.perm-table .perm-nom { font-size: 13.5px; font-weight: 500; }
.perm-table .perm-groupe-titre {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--accent); text-transform: uppercase; padding: 10px 10px 4px !important;
  background: var(--panel-hover); text-align: left !important; position: static;
}
.perm-table tbody tr:last-child td { border-bottom: none; }
input[type="checkbox"].perm-case { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.hint-scroll {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim);
  text-align: center; margin-top: 8px;
}

/* ---------- Lightbox photo (zoom / agrandissement) ---------- */
.zoomable-photo { cursor: zoom-in; }

.photo-lightbox {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: transparent;
  align-items: center; justify-content: center;
}
.photo-lightbox.show { display: flex; }

.photo-lightbox-scene {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.photo-lightbox-scene img {
  max-width: 92vw; max-height: 92vh; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  cursor: zoom-in;
  will-change: transform;
  border-radius: 20px; border: 1px solid var(--border); background: var(--bg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.photo-lightbox-scene img.zoome { cursor: grab; }
.photo-lightbox-scene img.deplace { cursor: grabbing; }

.photo-lightbox-fermer {
  position: absolute; top: 16px; right: 16px; z-index: 201;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.photo-lightbox-fermer:hover { background: rgba(255,255,255,0.2); }

/* ---------- Visionneuse PDF (documents de transfert) ---------- */
.pdf-viewer-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  flex-direction: column;
}
.pdf-viewer-overlay.show { display: flex; }

.pdf-viewer-barre {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#pdf-viewer-titre {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdf-viewer-fermer {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; margin-left: 12px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pdf-viewer-fermer:hover { background: var(--panel-hover); }

#pdf-viewer-pages {
  flex: 1; width: 100%; overflow-y: auto; overflow-x: hidden;
  background: #525659; /* gris neutre habituel des lecteurs PDF */
  padding: 16px 0 40px;
  touch-action: pan-y; /* garde le scroll vertical natif ; le pincement est gere en JS */
}
#pdf-viewer-pages-inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  transform-origin: 0 0;
  will-change: transform;
}
/* Applique uniquement pour les "sauts" animes (double-tap, rebond
   elastique en fin de pincement) : jamais pendant le suivi en direct du
   doigt, pour que le zoom colle exactement aux doigts sans decalage. */
#pdf-viewer-pages-inner.pdf-zoom-anime {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
#pdf-viewer-pages canvas {
  max-width: 96%; box-shadow: 0 4px 16px rgba(0,0,0,0.4); background: #fff;
}
#pdf-viewer-pages .empty-state { color: #ccc; }

.pdf-viewer-pied {
  display: flex; gap: 10px; padding: 10px 16px;
  background: var(--panel); border-top: 1px solid var(--border);
  flex-shrink: 0; padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.pdf-viewer-action {
  flex: 1; padding: 12px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.pdf-viewer-action:hover { background: var(--panel-hover); }
.pdf-viewer-action:active { transform: translateY(1px); }


/* ---- Ventes ---- */
.accueil-ventes-card { margin-bottom: 12px; }
.ventes-seg { display: flex; gap: 6px; margin-bottom: 10px; }
.ventes-seg-jour .ventes-seg-btn { flex: 1; }
.ventes-seg-cat .ventes-seg-btn { flex: 1; }
.ventes-seg-btn {
  padding: 9px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.ventes-seg-btn.selected { background: var(--accent); border-color: var(--accent); color: #1a1400; }
.ventes-total { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); margin: 4px 2px 10px; }
.ventes-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 4px 14px; }
.ventes-ligne {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; text-align: left;
  background: none; border: none; border-top: 1px solid var(--border); color: var(--text); cursor: pointer; font-family: inherit;
}
.ventes-ligne:first-child { border-top: none; }
.ventes-photo {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: #fff;
  object-fit: contain; overflow: hidden;
}
.ventes-photo-vide { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: var(--border); }
.ventes-ligne-texte { flex: 1; min-width: 0; }
.ventes-ligne-code { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ventes-ligne-detail { font-size: 13px; color: var(--text-dim); text-transform: uppercase; overflow-wrap: anywhere; }
.ventes-ligne-ca { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ventes-vide { font-size: 14px; color: var(--text-dim); padding: 16px 0; text-align: center; }
.ventes-modal-box { max-width: 400px; max-height: 90vh; overflow-y: auto; padding: 20px 18px; text-align: left; }
.ventes-modal-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ventes-modal-code { font-size: 18px; font-weight: 700; }
.ventes-modal-libelle { font-size: 13px; color: var(--text-dim); text-transform: uppercase; }
.ventes-modal-fermer { background: none; border: none; color: #ef4444; font-size: 30px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ventes-modal-photo { display: flex; justify-content: center; margin: 14px 0; }
.ventes-modal-photo img { display: none; width: 220px; height: 220px; object-fit: contain; background: #fff; border-radius: 14px; }
.ventes-fil { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 8px; }
.ventes-fil-nom { font-size: 15px; font-weight: 700; text-transform: uppercase; text-align: right; overflow-wrap: anywhere; }
.ventes-marque-nom { font-size: 16px; font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; }

/* Boutons Messages / Ventes de l'accueil : meme taille ; Ventes en jaune */
#accueil-voir-messages-btn, #accueil-voir-ventes-btn { flex: 0 0 52%; min-height: 64px; }
#accueil-voir-ventes-btn { color: var(--accent); font-weight: 600; }

/* Reassort par taille */
/* Une seule ligne par taille : etablissement | taille | qte | boutons */
.ventes-tailles-entete, .ventes-taille-ligne { display: grid; grid-template-columns: 38px 72px 20px minmax(0, 1fr); gap: 6px; align-items: center; }
.ventes-taille-ligne { padding: 8px 6px; }
.ventes-tailles-entete { padding: 0 7px 6px; font-size: 10px; }
.ventes-tailles-entete > div:nth-child(3), .ventes-taille-qte { text-align: center; }
.ventes-taille-nom { font-size: clamp(11px, 3.4vw, 14px); overflow-wrap: anywhere; line-height: 1.15; }
.ventes-taille-actions { gap: 3px; }
.ventes-taille-ligne .ventes-statut-btn { font-size: clamp(9px, 2.7vw, 11px); padding: 8px 0; white-space: nowrap; }
.ventes-taille-ligne .ventes-etab { margin: 0; padding: 2px 0; text-align: center; font-size: 11px; }
.ventes-tailles-entete { font-size: 11px; text-transform: uppercase; color: var(--text-dim); padding: 0 8px 6px; }
.ventes-taille-ligne { border: 1px solid var(--border); border-radius: 10px; padding: 8px; margin-bottom: 6px; }
.ventes-taille-ligne.pret, .ventes-ligne.pret { background: var(--vert-dim); border-color: var(--vert); }
.ventes-taille-ligne.nondispo, .ventes-ligne.nondispo { background: var(--alert-dim); border-color: var(--alert); }
.ventes-taille-ligne.attente, .ventes-ligne.attente { background: var(--accent-dim); border-color: var(--accent); }
.ventes-taille-nom { font-size: 15px; font-weight: 700; }
.ventes-taille-qte { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--accent); }
.ventes-taille-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ventes-statut-btn {
  padding: 7px 0; font-size: 11px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text); cursor: pointer; font-family: inherit;
}
.ventes-statut-btn.sel { font-weight: 700; border-width: 2px; }
.ventes-statut-btn[data-s="pret"].sel { border-color: var(--vert); color: var(--vert); }
.ventes-statut-btn[data-s="nondispo"].sel { border-color: var(--alert); color: var(--alert); }
.ventes-statut-btn[data-s="attente"].sel { border-color: var(--accent); color: var(--accent); }
.ventes-modal-total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; padding: 10px 8px 0; }
.ventes-modal-total-qte { font-family: var(--font-mono); color: var(--accent); }
.ventes-ligne-prog { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ventes-ligne { border-radius: 10px; padding-left: 8px; padding-right: 8px; margin-top: 6px; border: 1px solid transparent; }
.ventes-ligne:first-child { margin-top: 0; }
.ventes-etab {
  display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px;
  background: var(--accent); color: #1a1400; font-family: var(--font-mono); font-size: 12px; font-weight: 700; vertical-align: middle;
}

/* Fiche article des ventes : meme style que la fiche Stock */
.ventes-modal-box { position: relative; }
.ventes-modal-fermer { position: absolute; top: 8px; right: 12px; z-index: 3; }
.ventes-fiche-head { margin-bottom: 12px; padding: 0 22px; }
.ventes-cell { cursor: pointer; }
.size-table th.ventes-sel { background: var(--accent-dim); color: var(--accent); }
.size-table td.ventes-sel { box-shadow: inset 0 0 0 2px var(--accent); }
.size-table td.ventes-q { color: var(--accent); font-weight: 700; }
.size-table td.ventes-s { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--text-dim); }
.size-table td.ventes-s.pret { background: var(--vert-dim); color: var(--vert); }
.size-table td.ventes-s.nondispo { background: var(--alert-dim); color: var(--alert); }
.size-table td.ventes-s.attente { background: var(--accent-dim); color: var(--accent); }
.ventes-modal-box .result-total { margin-top: 12px; }
.ventes-reassort-zone { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.ventes-reassort-titre { font-size: 12px; color: var(--text-dim); text-align: center; margin-bottom: 8px; }
.ventes-reassort-zone .ventes-statut-btn { font-size: 13px; padding: 10px 0; }
.ventes-ico-ecom { margin-left: 4px; vertical-align: -1px; color: var(--accent); }
.size-table td.ventes-stock { color: var(--text); font-weight: 600; }
.size-table td.ventes-stock-zero { color: var(--text-dim); font-weight: 400; }
.size-table td.ventes-vide-cell { color: var(--text-dim); }
.ventes-total-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 2px 10px; }
.ventes-total-ligne .ventes-total { margin: 0; }
.ventes-filtre { display: flex; gap: 4px; flex-shrink: 0; }
.ventes-filtre-btn {
  padding: 5px 8px; font-size: 12px; font-weight: 600; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text); cursor: pointer; font-family: inherit; white-space: nowrap;
}
.ventes-filtre-btn.selected { background: var(--accent); border-color: var(--accent); color: #1a1400; }