:root {
  --navy: #0F4D86;
  --orange: #FF670A;
  --teal: #02514B;
  --bg: #F5F4F1;
  --border: #E0DFDA;
  --text: #1A1A18;
  --muted: #6B6A64;
  --green-bg: #E1F5EE;
  --green-text: #085041;
  --orange-bg: #FFF6EE;
  --orange-text: #8A4B00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.page { min-height: 100vh; }

.topbar {
  max-width: 420px;
  margin: 0 auto;
  padding: 20px 16px 6px;
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}

.brand-title { margin: 0; font-weight: 700; color: var(--navy); font-size: 15px; }
.brand-sub { margin: 0; font-size: 10px; color: var(--muted); }

.content { max-width: 420px; margin: 0 auto; padding: 6px 16px 40px; }
.col-narrow { max-width: 420px; margin: 0 auto; }

.section-label {
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin: 4px 0 10px;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}

.card-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }

.empty-state { color: var(--muted); font-size: 13px; text-align: center; }

.cmd-card { display: block; text-decoration: none; color: inherit; padding: 14px; cursor: pointer; }
.cmd-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cmd-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.cmd-card-type { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.cmd-card-progress { margin: 6px 0 0; font-size: 11px; color: var(--muted); }

.status { font-size: 11px; font-weight: 600; white-space: nowrap; }
.status-done { color: var(--teal); }
.status-wip { color: var(--orange); }
.status-muted { color: var(--muted); }

.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--navy); font-size: 13px; margin-bottom: 8px;
  text-decoration: none; cursor: pointer;
}

.cmd-header {
  background: var(--navy); border-radius: 14px; padding: 14px 16px;
  color: #fff; margin-bottom: 10px;
}
.cmd-header-title { margin: 0; font-size: 17px; font-weight: 600; }
.cmd-header-sub { margin: 3px 0 0; font-size: 12px; opacity: .85; }

.bat-row { display: flex; gap: 8px; }
.bat-thumb {
  flex: 1; height: 72px; border-radius: 10px; position: relative;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bat-thumb-navy { background: linear-gradient(135deg, var(--navy), #0F4D86cc); }
.bat-thumb-teal { background: linear-gradient(135deg, var(--teal), #02514Bcc); }
.bat-icon { font-size: 26px; opacity: .9; filter: grayscale(1) brightness(3); }
.bat-icon.big { font-size: 56px; }
.bat-zoom {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  border-radius: 6px; background: rgba(255,255,255,.25);
  color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.bat-captions {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-size: 11px; color: var(--text); font-weight: 500;
}

.vehicle-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.vehicle-chip {
  flex: 0 0 auto; min-width: 78px; text-align: center; padding: 7px 10px;
  border-radius: 10px; cursor: pointer; background: var(--bg); border: 1px solid var(--border);
}
.vehicle-chip.active { background: var(--navy); border: none; }
.vehicle-chip.finished { background: var(--green-bg); border: 1px solid var(--teal); }
.vehicle-chip .vc-status { margin: 0; font-size: 10px; color: var(--muted); }
.vehicle-chip.active .vc-status { color: #fff; }
.vehicle-chip.finished .vc-status { color: var(--teal); }
.vehicle-chip .vc-plaque { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--text); }
.vehicle-chip.active .vc-plaque { color: #fff; }

.plaque-box {
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  background: var(--bg); margin-bottom: 12px;
}
.plaque-label { margin: 0; font-size: 10px; color: var(--muted); }
.plaque-input {
  font-size: 15px; font-weight: 600; color: var(--text); border: none;
  background: transparent; outline: none; width: 100%; padding: 0; font-family: inherit;
}

.steps-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
.steps-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.steps-count { font-size: 12px; color: var(--orange); font-weight: 600; }

.step-row { display: flex; gap: 10px; cursor: pointer; }
.step-dot-col { display: flex; flex-direction: column; align-items: center; }
.step-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--border); }
.step-dot.done { background: var(--teal); border: none; }
.step-dot.current { border-color: var(--orange); }
.step-line { width: 2px; flex: 1; background: var(--border); min-height: 20px; }
.step-line.done { background: var(--teal); }
.step-text { padding-bottom: 14px; }
.step-text p { margin: 0; font-size: 14px; color: var(--muted); }
.step-text p.done { color: var(--text); }

.cloture-card { opacity: .55; transition: opacity .15s; }
.cloture-card.ready, .cloture-card.signed { opacity: 1; }
.cloture-title { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text); }
.cloture-hint { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.cloture-signed { margin: 0; font-size: 12px; color: var(--teal); }
.cloture-team-line { margin: 8px 0 0; font-size: 12px; color: var(--text); }
.cloture-obs-line { margin: 6px 0 0; font-size: 12px; color: var(--text); line-height: 1.4; }

.signature-block { margin-bottom: 12px; }

.team-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.team-choice {
  display: flex; align-items: center; gap: 6px; padding: 7px 11px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer; user-select: none;
}
.team-choice input { accent-color: var(--navy); width: 15px; height: 15px; }
.team-choice:has(input:checked) { border-color: var(--navy); background: rgba(15,77,134,.06); }

.obs-quick { display: flex; gap: 8px; margin-bottom: 8px; }
.obs-btn {
  padding: 6px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer;
}
.obs-btn:hover { border-color: var(--navy); }
.poseur-input {
  width: 100%; padding: 9px 10px; font-size: 13px; border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 10px; font-family: inherit; outline: none;
}
.poseur-input:focus { border-color: var(--navy); }
.signature-label { margin: 0 0 6px; font-size: 11px; color: var(--muted); }
.signature-pad {
  width: 100%; height: 150px; border: 1px dashed var(--border); border-radius: 10px;
  background: var(--bg); touch-action: none; display: block;
}
.btn-ghost-small {
  margin-top: 6px; background: none; border: none; color: var(--muted);
  font-size: 11px; text-decoration: underline; cursor: pointer; padding: 0;
}

.btn-primary {
  width: 100%; border: none; border-radius: 12px; padding: 12px; font-size: 14px;
  font-weight: 600; background: var(--orange); color: #fff; cursor: pointer;
}
.btn-primary:disabled { background: var(--border); color: var(--muted); cursor: default; }

.error-msg { margin: 10px 0 0; font-size: 12px; color: #8C2E2E; }

.signature-preview {
  margin-top: 8px; max-width: 220px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
}

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; }
.modal-box {
  position: relative; background: #fff; border-radius: 14px; padding: 16px;
  max-width: 420px; width: 90%;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.modal-head p { margin: 0; font-weight: 600; color: var(--text); }
.modal-close { cursor: pointer; color: var(--muted); }
.modal-visual {
  height: 240px; border-radius: 10px; background: linear-gradient(135deg, var(--navy), var(--teal));
  display: flex; align-items: center; justify-content: center;
}
.modal-note { margin: 10px 0 0; font-size: 11px; color: var(--muted); text-align: center; }

@media (max-width: 460px) {
  .topbar, .content { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   Barre de navigation (bas) — commune à tous les écrans poseur
   ============================================================ */
.content { padding-bottom: 84px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 420px; margin: 0 auto;
  background: #fff; border-top: 1px solid var(--border);
  display: flex; z-index: 40;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.tab {
  flex: 1; text-align: center; padding: 8px 2px 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-decoration: none; border-top: 2px solid transparent;
}
.tab.active { color: var(--navy); border-top-color: var(--navy); }
.tab-off { color: #C3C2BC; cursor: default; }

/* ============================================================
   Agenda des interventions (lecture seule)
   ============================================================ */
.agenda-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.agenda-head .section-label { margin: 0; }

.seg {
  display: inline-flex; background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px; padding: 2px;
}
.seg-btn {
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 5px 12px; border-radius: 7px; text-decoration: none; white-space: nowrap;
}
.seg-btn.active { background: var(--navy); color: #fff; }

.agenda-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 8px 0 4px;
}
.agenda-periode { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.nav-arrow {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  border: 1px solid var(--border); background: #fff; color: var(--navy);
  font-size: 20px; line-height: 1; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
}
.agenda-count { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.agenda-list-label { margin: 16px 0 8px; }

.day-block { margin-bottom: 12px; }
.day-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; }
.day-name { font-size: 13px; font-weight: 600; color: var(--text); }
.day-block.is-today .day-name { color: var(--navy); }
.day-today {
  font-size: 10px; font-weight: 600; color: var(--orange-text);
  background: var(--orange-bg); padding: 1px 8px; border-radius: 20px;
}
.day-empty { margin: 0 2px 2px; font-size: 13px; color: #C3C2BC; }

.agenda-item { display: flex; gap: 0; padding: 0; overflow: hidden; text-decoration: none; color: inherit; }
.ai-bar { width: 4px; flex: 0 0 4px; }
.ai-bar.ai-done { background: var(--teal); }
.ai-bar.ai-wip { background: var(--orange); }
.ai-bar.ai-muted { background: var(--border); }
.ai-body { padding: 11px 12px; flex: 1; min-width: 0; }
.ai-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ai-title { font-size: 14px; font-weight: 600; color: var(--text); }
.ai-sub { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.ai-poseur { margin: 4px 0 0; font-size: 11px; color: var(--muted); }

/* Vue mois : grille calendaire */
.month-card { padding: 10px; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-head { margin-bottom: 4px; }
.mg-cell {
  aspect-ratio: 1 / 1; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 13px; color: var(--text);
}
.mg-head-cell { aspect-ratio: auto; font-size: 11px; color: var(--muted); font-weight: 600; padding: 2px 0; }
.mg-num { line-height: 1; }
.mg-out .mg-num { color: #C9C8C2; }
.mg-today { background: var(--navy); border-radius: 9px; }
.mg-today .mg-num { color: #fff; font-weight: 700; }
.mg-dot {
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--orange); color: #fff; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mg-today .mg-dot { background: #fff; color: var(--navy); }

/* ============================================================
   Étapes photo (Photo état initial / Photos contrôle qualité)
   ============================================================ */
.step-row.photo-step { align-items: flex-start; cursor: default; }
.step-row.photo-step .step-text { flex: 1; min-width: 0; padding-bottom: 16px; }
.photo-count { margin: 2px 0 8px; font-size: 11px; color: var(--muted); }

.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.photo-thumb {
  position: relative; width: 74px; height: 74px; margin: 0;
  border-radius: 9px; overflow: hidden; border: 1px solid var(--border); background: var(--bg);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border: none; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.photo-del:disabled { opacity: .5; }

.photo-add {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--navy); color: #fff; border: none; border-radius: 9px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.photo-add:disabled { background: var(--border); color: var(--muted); cursor: default; }
.photo-add-ico { font-size: 15px; line-height: 1; }
.photo-input { display: none; }
.photo-error { margin: 8px 0 0; font-size: 11px; color: #8C2E2E; }

/* ============================================================
   Type d'élément sur les pastilles de la fiche
   ============================================================ */
.vehicle-chip .vc-type { margin: 2px 0 0; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.vehicle-chip.active .vc-type { color: #fff; opacity: .85; }

/* ============================================================
   Accueil : accès Préparation
   ============================================================ */
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-top .section-label { margin: 4px 0 10px; }
.prep-link {
  font-size: 12px; font-weight: 600; color: var(--navy); text-decoration: none;
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; background: #fff; white-space: nowrap;
}

/* ============================================================
   Écran Préparation (affectation poseur / date / éléments)
   ============================================================ */
.prep-intro { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.prep-search {
  width: 100%; padding: 9px 11px; font-size: 13px; border: 1px solid var(--border);
  border-radius: 9px; margin-bottom: 12px; font-family: inherit; outline: none;
}
.prep-search:focus { border-color: var(--navy); }

.prep-card { padding: 14px; }
.prep-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prep-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.prep-badge {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--bg); border: 1px solid var(--border); color: var(--muted);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.prep-sub { margin: 2px 0 12px; font-size: 11px; color: var(--muted); }

.prep-row { display: flex; gap: 8px; margin-bottom: 12px; }
.prep-field { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.prep-field input {
  padding: 8px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; outline: none; color: var(--text); background: #fff;
}
.prep-field input:focus { border-color: var(--navy); }

.prep-label { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.prep-elements { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.prep-el { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.prep-el-type { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.prep-type-vehicule { background: #E7EEF6; color: var(--navy); }
.prep-type-vitrophanie { background: var(--green-bg); color: var(--green-text); }
.prep-type-enseigne { background: var(--orange-bg); color: var(--orange-text); }
.prep-el-ref { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prep-el-del { border: none; background: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 4px; }

.prep-add { display: flex; gap: 6px; }
.prep-add-type { border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-size: 12px; font-family: inherit; background: #fff; color: var(--text); }
.prep-add-ref { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; }
.prep-add-ref:focus { border-color: var(--navy); }
.prep-add-btn { border: none; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; background: var(--navy); color: #fff; cursor: pointer; white-space: nowrap; font-family: inherit; }
.prep-add-btn:disabled { background: var(--border); color: var(--muted); }
.prep-feedback { margin: 8px 0 0; font-size: 11px; }
.prep-feedback.ok { color: var(--green-text); }
.prep-feedback.err { color: #8C2E2E; }

/* ============================================================
   Responsable : kits à préparer (dans la préparation)
   ============================================================ */
.prep-label-kits { margin-top: 12px; }
.prep-kits { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.prep-kit { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.prep-kit-lib { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prep-kit-del { border: none; background: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 4px; }
.prep-kit-ref { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; }
.prep-kit-ref:focus { border-color: var(--navy); }
.prep-kit-add-btn { border: none; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; background: var(--teal); color: #fff; cursor: pointer; white-space: nowrap; font-family: inherit; }
.prep-kit-add-btn:disabled { background: var(--border); color: var(--muted); }

/* ============================================================
   Préparateur : kits (fiche)
   ============================================================ */
.kit-block { border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; margin-bottom: 10px; }
.kit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kit-lib { font-size: 14px; font-weight: 600; color: var(--text); }
.kit-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-step {
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  border-radius: 8px; padding: 7px 11px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.kit-step.done { background: var(--green-bg); border-color: var(--teal); color: var(--green-text); }
.kit-step.locked { opacity: .45; cursor: not-allowed; }
.kit-exped { margin-top: 12px; }
.kit-exped-label { margin: 0 0 6px; font-size: 11px; color: var(--muted); }
.exped-opts { display: flex; gap: 6px; }
.exped-opt {
  flex: 1; border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: 8px; padding: 8px 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.exped-opt.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.kit-inline-msg { margin: 8px 2px 0; font-size: 11px; color: #8C2E2E; }

.btn-signal {
  width: 100%; border: 1px solid var(--orange); background: var(--orange-bg); color: var(--orange-text);
  border-radius: 12px; padding: 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; margin-bottom: 10px;
}
.signal-card textarea.poseur-input { resize: vertical; }

/* ============================================================
   Espace PAO : largeur étendue (écran responsable/PAO = ordinateur)
   ============================================================ */
.topbar-wide, .content-wide { max-width: 960px; }
.pao-wrap { max-width: 960px; margin: 0 auto; }

.pao-legend { display: flex; gap: 14px; margin: 4px 0 12px; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dot-done { background: var(--teal); }
.dot-wip { background: var(--orange); }
.dot-muted { background: #C3C2BC; }

.pao-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; }
.pao-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pao-grid th, .pao-grid td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 8px; vertical-align: top; }
.pao-grid thead th { background: var(--bg); font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; white-space: nowrap; }
.pao-grid thead th.pao-today { color: var(--navy); }
.pao-corner { text-align: left !important; }
.pao-machine { background: var(--bg); font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; text-align: left; min-width: 120px; }
.pao-cell { min-width: 92px; }
.pao-cell:last-child, .pao-grid thead th:last-child { border-right: none; }
.pao-grid tbody tr:last-child th, .pao-grid tbody tr:last-child td { border-bottom: none; }

.cren { display: flex; align-items: center; gap: 4px; border-radius: 7px; padding: 4px 6px; margin-bottom: 4px; cursor: pointer; font-size: 11px; font-weight: 600; }
.cren-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cren-done { background: var(--green-bg); color: var(--green-text); }
.cren-wip { background: var(--orange-bg); color: var(--orange-text); }
.cren-muted { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.cren-del { border: none; background: none; color: inherit; opacity: .6; cursor: pointer; font-size: 11px; padding: 0 2px; }
.cell-add { width: 100%; border: 1px dashed var(--border); background: none; color: var(--muted); border-radius: 7px; padding: 3px; font-size: 13px; cursor: pointer; line-height: 1; }

.pao-form { max-width: 100%; }
.pao-form-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pao-form-row > select, .pao-form-row > input { flex: 1; min-width: 130px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; background: #fff; color: var(--text); }
.pao-form-row > input:focus, .pao-form-row > select:focus { border-color: var(--navy); }
.cf-duree { max-width: 130px; }
.btn-inline { width: auto; flex: 0 0 auto; padding: 8px 16px; }

.pao-stats { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.stat-tile { flex: 1; min-width: 110px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
.stat-num { margin: 0; font-size: 22px; font-weight: 700; color: var(--navy); }
.stat-num.stat-orange { color: var(--orange); }
.stat-lbl { margin: 2px 0 0; font-size: 11px; color: var(--muted); }

.pao-file-label { margin-top: 8px; }
.pao-queue { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pao-queue th, .pao-queue td { border-bottom: 1px solid var(--border); padding: 8px 10px; font-size: 12px; text-align: left; vertical-align: middle; }
.pao-queue thead th { background: var(--bg); font-weight: 600; color: var(--muted); white-space: nowrap; }
.pao-queue tbody tr:last-child td { border-bottom: none; }
.pao-queue select { border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; font-size: 12px; font-family: inherit; background: #fff; color: var(--text); }
.pao-queue .row-urgente td { background: var(--orange-bg); }
.q-del { border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; }

/* ============================================================
   Responsable : sous-navigation + SAV
   ============================================================ */
.col-wide { max-width: 960px; margin: 0 auto; }
.resp-subnav { display: flex; gap: 6px; margin: 2px 0 12px; }
.resp-subnav a {
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 6px 14px; border-radius: 9px; border: 1px solid var(--border); background: #fff;
}
.resp-subnav a.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.orig-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.orig-label { flex: 0 0 180px; font-size: 12px; color: var(--text); }
.orig-bar-wrap { flex: 1; height: 10px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.orig-bar { height: 100%; background: var(--navy); border-radius: 6px; min-width: 2px; transition: width .2s; }
.orig-val { flex: 0 0 130px; text-align: right; font-size: 11px; color: var(--muted); font-weight: 600; }

.sav-derived { margin: 0 0 8px; font-size: 11px; color: var(--muted); }
.sav-table th, .sav-table td { font-size: 11px; }
.sav-table .sav-num { font-weight: 700; color: var(--navy); white-space: nowrap; }
.sav-table input { border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; font-size: 11px; font-family: inherit; width: 100%; min-width: 90px; outline: none; }
.sav-table input:focus { border-color: var(--navy); }
.s-montant { max-width: 80px; text-align: right; }
.s-statut-ouvert { color: var(--orange-text); background: var(--orange-bg); }
.s-statut-clos { color: var(--green-text); background: var(--green-bg); }
.sav-note { margin: 8px 2px 0; font-size: 11px; color: var(--muted); font-style: italic; }

@media (max-width: 620px) {
  .orig-label { flex-basis: 110px; }
  .orig-val { flex-basis: 90px; }
}

/* ============================================================
   Signalements / notifications
   ============================================================ */
.signal-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; margin-left: 3px;
}
.sig-card.sig-ouvert { border-left: 3px solid var(--orange); }
.sig-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.sig-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.sig-tag-poseur { background: #E7EEF6; color: var(--navy); }
.sig-tag-preparateur { background: var(--green-bg); color: var(--green-text); }
.sig-statut { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.sig-statut-ouvert { background: var(--orange-bg); color: var(--orange-text); }
.sig-statut-traite { background: var(--green-bg); color: var(--green-text); }
.sig-meta { margin: 0 0 4px; font-size: 11px; color: var(--muted); font-weight: 600; }
.sig-message { margin: 0 0 8px; font-size: 13px; color: var(--text); white-space: pre-wrap; }
.sig-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; }
.sig-date { font-size: 10px; color: var(--muted); }

/* ============================================================
   Page d'accueil « Espaces »
   ============================================================ */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-card { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; padding: 16px; }
.hub-ico { font-size: 26px; line-height: 1; }
.hub-name { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--navy); }
.hub-desc { margin: 0; font-size: 12px; color: var(--muted); }
.hub-note { margin: 14px 2px 0; font-size: 11px; color: var(--muted); }
.brand { text-decoration: none; color: inherit; }
@media (max-width: 460px) { .hub-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Infographie : consignes de production
   ============================================================ */
.info-lignes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.info-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.info-ligne.transmis { background: var(--green-bg); border-color: var(--teal); }
.info-ligne-main { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.info-machine { font-size: 13px; font-weight: 700; color: var(--navy); }
.info-spec { font-size: 12px; color: var(--text); }
.info-ligne-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.info-pao { border: none; background: var(--navy); color: #fff; border-radius: 7px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.info-pao:disabled { background: var(--border); color: var(--muted); }
.info-transmis { font-size: 11px; font-weight: 700; color: var(--green-text); white-space: nowrap; }
.info-del { border: none; background: none; color: var(--muted); font-size: 13px; cursor: pointer; }
.info-form { margin-top: 4px; }
.pao-queue .row-transmis td { background: var(--green-bg); }
.pao-empty { color: var(--muted); font-style: italic; }

/* ============================================================
   Infographie : étapes de production (impression / lamination / découpe)
   ============================================================ */
.prep-sub-inline { font-size: 11px; color: var(--muted); }
.op-block { border: 1px solid var(--border); border-radius: 9px; padding: 10px; margin-bottom: 8px; background: #fff; }
.op-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.op-label { font-size: 13px; font-weight: 700; color: var(--navy); }
.op-statut { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--bg); color: var(--muted); }
.op-statut.planifie { background: var(--green-bg); color: var(--green-text); }
.op-del { border: none; background: none; color: var(--muted); font-size: 14px; cursor: pointer; flex: 0 0 auto; }

/* ============ Module Stock & consommation ============ */
.stk-subtabs { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.stk-subtabs a { font-size:13px; font-weight:600; padding:8px 16px; border-radius:10px; border:1px solid var(--border); text-decoration:none; color:var(--text); background:#fff; }
.stk-subtabs a.active { background:var(--navy); color:#fff; border-color:var(--navy); }

.stk-table th.num, .stk-table td.num { text-align:right; }
.stk-name { font-weight:700; }
.stk-sub { font-size:12px; color:var(--muted); }
.stk-val { color:var(--navy); font-weight:700; }
.stk-lock { font-size:10px; color:var(--muted); }
.lot { display:inline-block; background:#EDECE8; color:var(--muted); font-size:10px; padding:2px 7px; border-radius:6px; margin-left:6px; }
.stk-qty { font-weight:700; }

.stk-gauge { display:flex; align-items:center; gap:8px; min-width:130px; }
.stk-gauge .gw { flex:1; height:8px; background:#EDECE8; border-radius:999px; overflow:hidden; }
.stk-gauge .gf { height:100%; border-radius:999px; }
.stk-gauge .gv { font-size:12px; color:var(--muted); white-space:nowrap; }
.g-ok { background:var(--teal); } .g-warn { background:var(--orange); } .g-crit { background:#B03636; }

.stk-badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.b-ok { background:var(--green-bg); color:var(--green-text); }
.b-warn { background:var(--orange-bg); color:var(--orange-text); }
.b-crit { background:#F7E3E3; color:#8C2E2E; }

.stk-chev { display:inline-block; width:16px; color:var(--muted); font-size:11px; cursor:pointer; }
.stk-ref td { background:#fff; }
.stk-roll td { background:#FAF9F6; font-size:12px; border-top:1px dashed var(--border); }
.stk-rid { padding-left:22px; }
.stk-roll-state { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; }
.rs-neuf { background:#E8EEF6; color:var(--navy); }
.rs-entame { background:var(--orange-bg); color:var(--orange-text); }
.age-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
.a-fresh { background:var(--teal); } .a-mid { background:var(--orange); } .a-old { background:#B03636; }
.stk-fifo { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:#EAF3EE; color:var(--green-text); }

.stk-grp td { background:#F0EFEA; font-weight:700; font-size:12px; color:var(--navy); }
.stk-actions button { font-size:11px; padding:5px 10px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer; margin-left:4px; }
.stk-actions button:hover { border-color:var(--navy); }
.stk-note { font-size:12px; color:var(--muted); font-style:italic; margin-top:8px; }

.stk-modal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; }
.stk-modal[hidden] { display:none !important; }
.stk-modal-back { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.stk-modal-box { position:relative; background:#fff; border-radius:16px; padding:18px; width:320px; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.stk-modal-box .poseur-input { margin-bottom:10px; }
.stk-modal-box .btn-ghost-small { display:block; margin:8px auto 0; }
.stk-modal-lbl { display:block; font-size:11px; color:var(--muted); margin:2px 0 5px; }
.stk-modal-lbl span { font-style:italic; }

/* ============ Espace Direction (charte FDB flat) ============ */
.dir-subnav { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.dir-subnav a { font-size:13px; font-weight:600; padding:8px 16px; border-radius:10px; border:1px solid var(--border); text-decoration:none; color:var(--text); background:#fff; }
.dir-subnav a.active { background:var(--navy); color:#fff; border-color:var(--navy); }

.dir-hint { margin:0 0 12px; font-size:12px; color:var(--muted); }
.dir-legend { display:flex; gap:16px; margin:2px 0 14px; font-size:12px; color:var(--muted); }
.dir-legend b { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.dseg-main { background:#1baf7a; } .dseg-amo { background:#eb6834; }

.dir-bar-row { display:grid; grid-template-columns:130px 1fr 82px; align-items:center; gap:12px; margin:10px 0; }
.dir-bar-name { font-size:13px; font-weight:600; }
.dir-bar-track { height:24px; border-radius:8px; background:#EDECE8; overflow:hidden; display:flex; }
.dseg { height:100%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; border-right:2px solid #fff; }
.dseg:last-child { border-right:none; }
.dir-bar-total { text-align:right; font-weight:800; font-size:14px; }

.dir-amortie { font-size:10px; color:var(--teal); font-weight:700; }
.dir-link { color:var(--navy); font-weight:600; text-decoration:none; font-size:13px; }

.dir-mchips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.dir-mchip { padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; background:#fff; border:1px solid var(--border); color:var(--text); }
.dir-mchip.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.dir-mchip.add { border-style:dashed; color:var(--muted); }

.dir-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dir-fld label { display:block; font-size:11px; color:var(--muted); margin-bottom:5px; }
.dir-in { width:100%; padding:9px 11px; font-size:14px; font-weight:600; border:1px solid var(--border); border-radius:8px; font-family:inherit; outline:none; background:#fff; color:var(--text); }
.dir-in:focus { border-color:var(--navy); }
.dir-calc { padding:9px 11px; font-size:14px; font-weight:700; border-radius:8px; background:var(--green-bg); color:var(--green-text); border:1px solid #CDEBDF; }
.dir-h { display:block; font-size:10px; color:var(--muted); margin-top:4px; }

.dir-prev-lbl { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.dir-prev-bar { height:8px; border-radius:999px; background:#EDECE8; overflow:hidden; margin:8px 0 2px; }
.dir-prev-bar > span { display:block; height:100%; background:linear-gradient(90deg,#3f86d6,var(--navy)); }

.dir-save-row { display:flex; align-items:center; gap:14px; margin:4px 0 6px; }
.dir-save-row .btn-inline { width:auto; }
.dir-fb { font-size:12px; font-weight:700; }
.dir-del { margin-left:auto; color:#8C2E2E; font-size:12px; text-decoration:underline; cursor:pointer; }
.dir-idel { background:none; border:none; color:#8C2E2E; cursor:pointer; font-size:13px; }

/* ============ Tableau de bord (synthèse) ============ */
.db-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.db-kpis-3 { grid-template-columns:repeat(3,1fr); }
.db-kpi { background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px; text-decoration:none; color:inherit; display:block; }
.db-kpi:hover { border-color:var(--navy); }
.db-kpi .n { font-size:24px; font-weight:800; color:var(--navy); }
.db-kpi .n.warn { color:var(--orange); } .db-kpi .n.crit { color:#B03636; }
.db-kpi .l { font-size:12px; color:var(--muted); margin-top:2px; }
.db-kpi .s { font-size:11px; color:var(--muted); margin-top:4px; }
.db-arrow { float:right; color:var(--border); font-weight:700; }
.db-cols { display:grid; grid-template-columns:1.4fr 1fr; gap:12px; }
.db-week { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.db-day { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px 6px; text-align:center; }
.db-day.today { border-color:var(--navy); background:#EAF1F8; }
.db-day .dn { font-size:11px; color:var(--muted); }
.db-day .dd { font-size:15px; font-weight:700; margin:2px 0 6px; }
.db-cnt { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:2px 6px; border-radius:6px; margin:2px 1px; }
.cnt-pose { background:#EAF1F8; color:var(--navy); }
.cnt-mach { background:var(--green-bg); color:var(--green-text); }
.cnt-evt { background:var(--orange-bg); color:var(--orange-text); }
.db-todo-item { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.db-todo-item:last-child { border-bottom:none; }
.tag { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.tag-sav { background:#F7E3E3; color:#8C2E2E; }
.tag-sig { background:var(--orange-bg); color:var(--orange-text); }
.db-todo-txt { font-size:12px; color:var(--text); }
.db-todo-txt small { color:var(--muted); }
@media(max-width:760px){ .db-kpis, .db-kpis-3 { grid-template-columns:repeat(2,1fr); } .db-cols { grid-template-columns:1fr; } }

/* ============ Agenda global ============ */
.ag-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.ag-nav { display:flex; align-items:center; gap:10px; }
.ag-btn { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--navy); text-decoration:none; display:flex; align-items:center; justify-content:center; font-weight:700; }
.ag-periode { font-size:15px; font-weight:700; min-width:200px; text-align:center; }
.ag-today { font-size:12px; color:var(--navy); text-decoration:none; border:1px solid var(--border); border-radius:8px; padding:6px 12px; }
.ag-vues { display:flex; gap:6px; }
.ag-vues a { font-size:12px; font-weight:600; padding:6px 14px; border-radius:8px; border:1px solid var(--border); text-decoration:none; color:var(--text); background:#fff; }
.ag-vues a.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.ag-filters { display:flex; gap:16px; margin-bottom:12px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.ag-filters input { accent-color:var(--navy); }

.ag-week { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.ag-day { background:#fff; border:1px solid var(--border); border-radius:10px; padding:8px; min-height:120px; }
.ag-day.today { border-color:var(--navy); }
.ag-day-head { font-size:11px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.ag-item { display:flex; align-items:flex-start; gap:6px; padding:5px 6px; border-radius:8px; margin-bottom:4px; background:var(--bg); }
.ag-item-txt { font-size:11px; line-height:1.3; flex:1; }
.ag-item-txt small { color:var(--muted); }
.ag-dot { width:8px; height:8px; border-radius:50%; margin-top:4px; flex:0 0 auto; }
.ag-pose .ag-dot { background:var(--navy); } .ag-pose { border-left:3px solid var(--navy); }
.ag-mach .ag-dot { background:var(--teal); } .ag-mach { border-left:3px solid var(--teal); }
.ag-event .ag-dot { background:var(--orange); } .ag-event { border-left:3px solid var(--orange); }
.ag-del { background:none; border:none; color:var(--muted); cursor:pointer; font-size:11px; }
.ag-empty { color:var(--border); font-size:12px; text-align:center; padding:8px 0; }

.ag-month { width:100%; border-collapse:collapse; }
.ag-month th { font-size:11px; color:var(--muted); padding:6px; text-align:center; }
.ag-month td { border:1px solid var(--border); vertical-align:top; height:74px; width:14.28%; padding:5px; }
.ag-month td.out { background:var(--bg); }
.ag-month td.today { border-color:var(--navy); background:#EAF1F8; }
.ag-mnum { font-size:12px; font-weight:700; color:var(--muted); margin-bottom:3px; }

/* ============================================================
   Nouveaux modules : sauvegarde, temps de pose, bon d'intervention,
   qualité ISO 9001, consommation matière
   ============================================================ */

/* ---- Sauvegarde (Direction) ---- */
.bk-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bk-last { margin:0; font-size:14px; color:var(--ink,#1A1A18); }
.bk-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.bk-list li { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.bk-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); flex:none; }
.bk-dl { margin-left:auto; font-size:12px; font-weight:600; color:var(--navy); text-decoration:none; border:1px solid var(--border); border-radius:6px; padding:3px 9px; }
.bk-dl:hover { border-color:var(--navy); }

/* ---- Temps de pose (poseur) ---- */
.timing-card { border-left:4px solid var(--orange); }
.timing-live { margin:0; font-size:15px; color:var(--navy); font-weight:600; }
.bon-link { display:inline-block; margin-top:10px; text-decoration:none; }

/* ---- Bouton consommer (matière) ---- */
.roll-consume { background:var(--navy); color:#fff; border:none; border-radius:6px;
  padding:4px 10px; font-size:12px; font-weight:600; cursor:pointer; }
.roll-consume:hover { background:#0c3f6e; }

/* ---- Qualité ISO 9001 ---- */
.iso-taux { display:flex; flex-direction:column; gap:2px; margin:4px 0 10px; }
.iso-taux-num { font-size:34px; font-weight:800; color:var(--navy); line-height:1; }
.iso-taux-sub { font-size:12px; color:var(--muted); }
.iso-cause { margin:0; font-size:13px; color:var(--ink,#1A1A18); }
.iso-bar { background:var(--navy); }
.iso-trend { display:flex; align-items:flex-end; gap:6px; height:120px; padding:8px 0 0; }
.iso-trend-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; justify-content:flex-end; }
.iso-trend-bar-wrap { width:100%; flex:1; display:flex; align-items:flex-end; }
.iso-trend-bar { width:70%; margin:0 auto; background:var(--orange); border-radius:3px 3px 0 0; min-height:2px; transition:height .3s; }
.iso-trend-n { font-size:11px; font-weight:700; color:var(--navy); height:14px; }
.iso-trend-m { font-size:10px; color:var(--muted); }

/* ---- Bon d'intervention imprimable ---- */
.bon-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.bon-sheet { background:#fff; border:1px solid var(--border); border-radius:10px; padding:26px; }
.bon-head { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:2px solid var(--navy); padding-bottom:14px; margin-bottom:16px; }
.bon-brand { display:flex; align-items:center; gap:10px; }
.bon-brand .brand-mark { width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:800; }
.bon-co { margin:0; font-weight:800; color:var(--navy); font-size:16px; letter-spacing:.02em; }
.bon-co-sub { margin:2px 0 0; font-size:11px; color:var(--muted); }
.bon-title { text-align:right; }
.bon-doc { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.bon-num { margin:2px 0 0; font-size:19px; font-weight:800; color:var(--ink,#1A1A18); }
.bon-info { width:100%; border-collapse:collapse; margin-bottom:16px; }
.bon-info th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; padding:5px 10px 5px 0; width:120px; vertical-align:top; }
.bon-info td { font-size:14px; color:var(--ink,#1A1A18); padding:5px 16px 5px 0; }
.bon-section { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--navy); margin:18px 0 8px; }
.bon-lignes { width:100%; border-collapse:collapse; }
.bon-lignes th { text-align:left; font-size:11px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); padding:6px 8px; }
.bon-lignes td { font-size:13px; padding:7px 8px; border-bottom:1px solid var(--border); }
.bon-lignes .c { text-align:center; width:70px; }
.bon-empty { color:var(--muted); text-align:center; }
.bon-obs { border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:14px; min-height:44px; color:var(--ink,#1A1A18); background:var(--bg); }
.bon-foot { margin-top:24px; display:flex; justify-content:flex-end; }
.bon-sign { width:260px; text-align:center; }
.bon-sign-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 4px; }
.bon-sign-name { margin:0; font-size:15px; font-weight:700; color:var(--ink,#1A1A18); }
.bon-sign-date { margin:2px 0 0; font-size:12px; color:var(--muted); }
.bon-sign-img { max-width:220px; max-height:90px; margin-top:6px; }
.bon-sign-pending { margin:0; font-size:12px; color:var(--orange); font-style:italic; }
.bon-sign-box { height:80px; border:1px dashed var(--border); border-radius:6px; margin-top:6px; }
.bon-edite { text-align:center; font-size:11px; color:var(--muted); margin:22px 0 0; }

@media print {
  body { background:#fff; }
  .topbar, .tabbar, .no-print, .no-print-inline { display:none !important; }
  .page, .content, .content-wide { margin:0 !important; padding:0 !important; max-width:none !important; }
  .bon-wrap { padding:0 !important; }
  .bon-sheet { border:none; border-radius:0; padding:0; }
}

/* ============================================================
   Authentification, compte utilisateur, administration
   ============================================================ */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.user-chip { display:flex; align-items:center; gap:10px; }
.user-name { font-size:12px; font-weight:600; color:var(--navy); white-space:nowrap; text-decoration:none; border-bottom:1px dotted transparent; }
a.user-name:hover { border-bottom-color:var(--navy); }
.user-logout-form { margin:0; }
.user-logout { background:none; border:1px solid var(--border); color:var(--muted);
  border-radius:7px; padding:5px 10px; font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; }
.user-logout:hover { border-color:var(--navy); color:var(--navy); }

/* Login / invitation */
.auth-wrap { max-width:380px; margin:24px auto 0; }
.auth-card { padding:24px; }
.auth-title { margin:0 0 4px; font-size:19px; font-weight:800; color:var(--navy); }
.auth-sub { margin:0 0 16px; font-size:13px; color:var(--muted); }
.auth-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin:12px 0 4px; }
.auth-error { background:#FBEAEA; color:#B03636; border-radius:8px; padding:9px 12px; font-size:13px; margin:0 0 6px; }
.auth-ok { background:#E7F5EC; color:#1E7A45; border-radius:8px; padding:9px 12px; font-size:13px; margin:0 0 6px; }
.auth-note { margin:16px 0 0; font-size:12px; color:var(--muted); }

/* Administration */
.admin-table td { vertical-align:middle; }
.usr-nom { font-weight:700; }
.usr-tag { display:inline-block; background:#EAF1F8; color:var(--navy); border-radius:6px;
  padding:2px 8px; font-size:11px; font-weight:600; margin:2px 4px 2px 0; }
.usr-statut { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.usr-statut.s-ok { background:#E7F4EE; color:#0B7A4B; }
.usr-statut.s-inv { background:#FFF3E0; color:#8A4B00; }
.usr-statut.s-off { background:#F0EFEC; color:#6B6A64; }
.usr-copy, .usr-reinvite, .usr-edit { background:var(--navy); color:#fff; border:none; border-radius:6px;
  padding:5px 11px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
.usr-reinvite { background:var(--muted); }
.usr-edit { background:#fff; color:var(--navy); border:1px solid var(--navy); }
.usr-copy:hover { background:#0c3f6e; }
.usr-profils { display:flex; flex-wrap:wrap; gap:6px 14px; }
.invite-row { display:flex; gap:8px; align-items:center; }
.invite-row .poseur-input { margin:0; font-size:12px; }
#invite-box { border-left:4px solid var(--orange); }

/* ============================================================
   Adresses (intervention / livraison) + carnet
   ============================================================ */
.adr-card { border-left:4px solid var(--teal); }
.adr-text { margin:0 0 4px; font-size:15px; font-weight:600; color:var(--ink,#1A1A18); white-space:pre-line; }
.adr-contact { margin:0 0 3px; font-size:13px; color:var(--ink,#1A1A18); }
.adr-notes { margin:0 0 6px; font-size:12px; color:var(--muted); }
.adr-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.adr-btn { display:inline-flex; align-items:center; gap:4px; text-decoration:none; cursor:pointer;
  border:none; font-family:inherit; font-size:13px; font-weight:600; border-radius:8px; padding:8px 14px; }
.adr-map { background:var(--navy); color:#fff; }
.adr-map:hover { background:#0c3f6e; }
.adr-call { background:var(--teal); color:#fff; }
.adr-copy { background:#fff; color:var(--navy); border:1px solid var(--navy); }

/* Agenda poseur : item = div, lien interne + adresse */
.ai-link { display:block; text-decoration:none; color:inherit; }
.ai-adresse { border-top:1px solid var(--border); margin-top:8px; padding-top:8px; }
.ai-adr-txt { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.ai-adr-links { display:flex; gap:8px; }
.ai-adr-links .adr-btn { padding:6px 12px; font-size:12px; }

/* Bloc adresse dans la préparation */
.prep-adresse { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.prep-adresse input, .prep-adresse textarea {
  width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:8px;
  padding:9px 11px; font-size:14px; font-family:inherit; background:#fff; }
.prep-adresse textarea { resize:vertical; }
.prep-adr-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* Adresse dans l'agenda global (semaine) */
.ag-adr { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.ag-adr-links { display:flex; gap:6px; margin-top:5px; }
.ag-adr-links .adr-btn { padding:4px 9px; font-size:11px; }

/* Vue Mois : jour cliquable + panneau détail */
.ag-mday { cursor:pointer; }
.ag-mday:hover { background:#EAF1F8; }
.ag-day-detail { margin-top:14px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.ag-dd-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:14px; color:var(--navy); }
.ag-dd-close { background:none; border:none; font-size:15px; color:var(--muted); cursor:pointer; }
.ag-dd-item { display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--border); }
.ag-dd-item:first-of-type { border-top:none; }
.ag-dd-item .ag-dot { margin-top:5px; flex:none; }
.ag-dd-txt { font-size:13px; color:var(--ink,#1A1A18); }