/* ═══════════════════════════════════════
   KANBAN.CSS — Usiwood Platform
   ═══════════════════════════════════════ */

.kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 16px;
  border-radius:12px;
  min-height: calc(100vh - 180px);
  align-items: flex-start;
  transition: background 0.3s;
}

.kanban-col {
  flex: 0 0 310px;
  background: #F6F4F1;
  border-radius:12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
}

.kanban-col-header {
  padding: 10px 12px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  flex-shrink: 0;
}

.kanban-col-title {
  font-size:13px;
  font-weight: 600;
  color: #173E54;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-col-count {
  font-size:11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius:12px;
  margin-left: 6px;
  flex-shrink: 0;
}

.kanban-col-body {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.15s;
}

.kanban-col-body.drag-over {
  background: var(--accent-soft);
}

.kanban-add-btn {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: all 0.15s;
  flex-shrink: 0;
}

.kanban-add-btn:hover {
  background: var(--wood-pale);
  color: var(--accent);
}

.kanban-empty {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 8px;
}

/* CARTES */
.kanban-card {
  background: var(--white);
  border: none;
  border-radius:12px;
  padding: 11px 10px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  border-left: 3px solid transparent;
}
.kanban-card:hover {
  box-shadow: 0 0 0 2px #235873, 0 4px 10px rgba(0,0,0,0.12);
}



.kanban-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.prio-border-0 { border-left-color: var(--red); }
.prio-border-1 { border-left-color: var(--orange); }
.prio-border-2 { border-left-color: var(--wood-light); }
.prio-border-3 { border-left-color: #E5E0D8; }

.kanban-card-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}

.kanban-card-title {
  font-size:15px;
  font-weight: 900;
  letter-spacing:-.2px;
  color: var(--text);
  flex: 1;
  line-height: 1.25;
}

.kanban-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 7px;
  margin-top: 7px;
}

.kanban-meta-item {
  font-size:11.5px;
  color: var(--text-muted);
  white-space:nowrap;
}
.kanban-meta-item b { color: var(--text); font-weight:700; }

.meta-late { color: var(--red) !important; }
.meta-late b { color: var(--red) !important; }
.meta-soon { color: var(--orange) !important; }
.meta-soon b { color: var(--orange) !important; }

.kanban-card-progress {
  height: 3px;
  background: #F1ECE5;
  border-radius:6px;
  margin-top: 7px;
  overflow: hidden;
}

.kanban-card-progress-bar {
  height: 100%;
  border-radius:6px;
  transition: width 0.3s;
}

.kanban-card-pct {
  font-size:11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}

/* DÉTAIL CARTE */
.card-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* ── Grille compacte de la fiche commande ── */
.cd-grid{ display:grid; border:1px solid #EEE8DE; border-radius:12px; overflow:hidden; margin-bottom:12px; background:#fff; }
.cd-row{ display:grid; border-bottom:1px solid #EEE8DE; }
.cd-row:last-child{ border-bottom:none; }
.cd-r3{ grid-template-columns:1fr 1fr 1fr; }
.cd-r2{ grid-template-columns:1fr 1fr; }
.cd-cell{ padding:9px 12px; border-right:1px solid #EEE8DE; min-width:0; }
.cd-cell:last-child{ border-right:none; }
.cd-k{ font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#9A9284; white-space:nowrap; }
.cd-v{ font-size:14px; font-weight:700; margin-top:2px; color:var(--text); overflow-wrap:break-word; }
.cd-prio{ display:inline-flex; align-items:center; gap:6px; }
.cd-prio-d{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cd-contact{ background:var(--wood-pale); border-radius:12px; padding:11px 14px; }
.cd-contact-l{ font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#9A9284; margin-bottom:5px; }
.cd-contact-nom{ font-weight:800; font-size:14px; }
.card-detail-duo { display:flex; gap:10px; }
.card-detail-duo > .card-detail-field { flex:1; }

/* ── Bloc dépliable réutilisable (devis signé, blocages, modifs…) ── */
.bloc-depliable{
  --bd-accent:#2D7A4F; --bd-bg:#EFF7F1; --bd-border:#CFE3D6;
  --bd-bodyborder:#DCEBE1; --bd-title:#1E5E3A; --bd-hint:#5C8A6E;
  border:1px solid var(--bd-border); border-radius:11px; overflow:hidden;
}
.bloc-depliable.rouge{ --bd-accent:#C0392B; --bd-bg:#FBEEED; --bd-border:#E8C5C0; --bd-bodyborder:#F0D6D2; --bd-title:#8A2B22; --bd-hint:#B06A62; }
.bloc-depliable.orange{ --bd-accent:#D4860A; --bd-bg:#FAEEDA; --bd-border:#E8D28A; --bd-bodyborder:#EFE0C0; --bd-title:#9A5B12; --bd-hint:#B08A4A; }
.bloc-dep-head{ display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--bd-bg); cursor:pointer; user-select:none; }
.bloc-dep-chev{ width:22px; height:22px; border-radius:50%; background:var(--bd-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; transition:transform .2s; flex-shrink:0; }
.bloc-dep-title{ font-weight:800; font-size:13px; color:var(--bd-title); flex:1; }
.bloc-dep-badge{ background:#fff; border-radius:20px; padding:1px 9px; font-size:11px; font-weight:700; color:var(--bd-title); }
.bloc-dep-hint{ font-size:11px; color:var(--bd-hint); font-weight:600; }
.bloc-dep-body{ padding:11px 13px; border-top:1px solid var(--bd-bodyborder); font-size:13px; }

.card-detail-field {
  padding: 8px 10px;
  background: var(--wood-pale);
  border-radius:8px;
}

.card-detail-field-label {
  font-size:11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.card-detail-field-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ─── FILTRES & RECHERCHE ─────────── */
.kanban-search {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius:8px;
  font-family: inherit;
  font-size: 12px;
  outline: none;
  width: 200px;
  transition: border-color 0.15s;
}
.kanban-search:focus { border-color: var(--accent); }

.kanban-filter-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius:8px;
  font-family: inherit;
  font-size: 12px;
  background: #fff;
  outline: none;
  cursor: pointer;
}

/* ─── LISTE REPLIÉE ──────────────────── */
.kanban-col-collapsed {
  flex: 0 0 40px !important;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius:12px;
  transition: all 0.2s;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.kanban-col-collapsed:hover {
  background: var(--wood-pale);
  flex: 0 0 44px !important;
}
.kanban-col-collapsed-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  height: 100%;
}
.kanban-col-collapsed-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  flex: 1;
  display: flex;
  align-items: center;
}
.kanban-col-collapsed-count {
  font-size:11px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius:8px;
  min-width: 20px;
  text-align: center;
}

/* ─── FORMULAIRE NOUVELLE CARTE ─────── */
.new-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.new-card-full {
  grid-column: 1 / -1;
}

/* ─── WIZARD ──────────────────────────── */
.wizard-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.wizard-title { font-size:18px; font-weight:700; color:var(--wood-dark); }
.wizard-progress { height:4px; background:#F1ECE5; border-radius:6px; margin-bottom:6px; overflow:hidden; }
.wizard-progress-bar { height:100%; background:var(--accent); border-radius:6px; transition:width 0.4s ease; }
.wizard-step-count { font-size:11px; color:var(--text-muted); margin-bottom:20px; }
.wizard-body { min-height:280px; }
.wizard-footer { display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.wizard-question { font-size:15px; font-weight:600; color:var(--text); margin-bottom:16px; }

/* Choix liste */
.wizard-choices-scroll { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
.wizard-choice { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1.5px solid var(--border); border-radius:12px; cursor:pointer; transition:all 0.15s; }
.wizard-choice:hover { border-color:var(--accent); background:var(--accent-soft); }
.wizard-choice.selected { border-color:var(--accent); background:var(--accent-soft); }
.wizard-choice-icon { font-size:18px; flex-shrink:0; }
.wizard-choice-label { font-size:13px; font-weight:600; color:var(--text); }
.wizard-search-wrap { margin-bottom:10px; }

/* Choix grille (priorité, type...) */
.wizard-choices-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.wizard-choice-card { border:2px solid var(--border); border-radius:12px; padding:20px 12px; text-align:center; cursor:pointer; transition:all 0.15s; display:flex; flex-direction:column; align-items:center; gap:6px; }
.wizard-choice-card:hover { border-color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); }
.wizard-choice-card.selected { border-color:var(--accent); background:var(--accent-soft); box-shadow:0 4px 16px rgba(232,121,58,0.2); }

/* Preview titre */
.wizard-titre-preview { font-size:22px; font-weight:700; color:var(--wood-dark); padding:14px; background:var(--wood-pale); border-radius:12px; text-align:center; letter-spacing:0.02em; }

/* Heures rapides */
.wizard-heures-quick { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.wizard-quick-btn { background:var(--wood-pale); border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.wizard-quick-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

.wizard-selected-recap { margin-top:10px; padding:8px 12px; background:var(--green-soft); color:var(--green); border-radius:8px; font-size:12px; font-weight:600; }

/* Badge type projet sur carte */
.card-type-badge { font-size:11px; font-weight:700; padding:2px 6px; border-radius:6px; flex-shrink:0; }
.badge-nesting { background:#E9F0F4; color:var(--blue); }
.badge-debit { background:var(--green-soft); color:var(--green); }
.badge-compact { background:var(--wood-pale); color:var(--wood-warm); }

/* ─── CHECKLISTS ──────────────────────── */
.checklist-section { margin-bottom:14px; }
.checklist-section-header { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; background:var(--wood-pale); border-radius:6px; margin-bottom:6px; }
.checklist-item { display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:8px; cursor:pointer; transition:background 0.1s; }
.checklist-item:hover { background:var(--wood-pale); }
.checklist-check { width:20px; height:20px; border:2px solid var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; transition:all 0.15s; }
.checklist-check.checked { background:var(--green); border-color:var(--green); }
.checklist-label { font-size:13px; color:var(--text); }
.checklist-label.done { text-decoration:line-through; color:var(--text-muted); }
.checklist-btn { width:100%; padding:9px 16px; border-radius:8px; border:2px solid var(--green); background:var(--green-soft); color:var(--green); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.15s; text-align:left; }
.checklist-btn:hover { background:var(--green); color:#fff; }
.checklist-btn.checklist-btn-done { background:var(--green); color:#fff; border-color:var(--green); cursor:default; }
.checklist-btn.checklist-btn-done:hover { background:var(--green); }
/* Facturation déjà demandée : vrai grisé, non cliquable (le ✓/qui/quand reste affiché dessous) */
.checklist-btn.checklist-btn-factu-done {
  background: #F6F4F1 !important;
  border-color: #E5E0D8 !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.8;
}
.checklist-btn.checklist-btn-factu-done:hover { background: #F6F4F1 !important; color: var(--text-muted) !important; }

/* ─── NOTES ÉDITEUR ──────────────────── */
.card-notes-view { font-size:15px; font-weight:700; color:#2B2620; padding:10px 12px; background:var(--wood-pale); border-radius:8px; min-height:36px; line-height:1.6; }
.card-notes-view:empty::before { content:'Aucune note — cliquez sur Modifier'; color:var(--text-muted); font-style:italic; }
.notes-toolbar { display:flex; gap:4px; flex-wrap:wrap; padding:6px 8px; background:#F6F4F1; border:1.5px solid var(--border); border-bottom:none; border-radius:8px 8px 0 0; }
.notes-tool-btn { background:#fff; border:1px solid #E5E0D8; border-radius:6px; padding:3px 8px; cursor:pointer; font-size:13px; font-family:inherit; min-width:26px; }
.notes-tool-btn:hover { background:var(--wood-pale); }
.notes-tool-select { border:1px solid #E5E0D8; border-radius:6px; padding:3px 6px; font-size:11px; background:#fff; font-family:inherit; }
/* ═══ LISTES — NE PAS SUPPRIMER, RIEN NE LES REMPLACE ═══
   css/base.css l.25 pose « * { margin:0; padding:0; } ». Ce padding:0
   universel frappe aussi les <ul>/<ol> : sans retrait, les puces se dessinent
   HORS de la boîte et deviennent invisibles. Résultat constaté le 17/07 :
   le bouton « Liste » créait bien la liste, et il ne se passait
   visiblement RIEN. La commande marchait ; le CSS effaçait sa trace.
   On rétablit donc le retrait LOCALEMENT — ici et dans .card-notes-view (le
   rendu) — plutôt que de toucher au reset global, qui tient toute l'appli. */
.notes-editor ul, .notes-editor ol,
.card-notes-view ul, .card-notes-view ol { padding-left:1.5em; margin:.4em 0; }
.notes-editor ul, .card-notes-view ul { list-style:disc outside; }
.notes-editor ol, .card-notes-view ol { list-style:decimal outside; }
.notes-editor li, .card-notes-view li { margin:.15em 0; }
.notes-editor p, .card-notes-view p { margin:.35em 0; }

/* Les 4 pastilles de couleur : un « A » teinté, pas un carré muet — on voit
   la couleur telle qu'elle sortira, sur le fond où elle sortira. */
.notes-tool-btn.notes-couleur { min-width:26px; padding:3px 7px; }

.notes-editor { width:100%; min-height:100px; max-height:60vh; overflow-y:auto; border:1.5px solid var(--accent); border-radius:0 0 8px 8px; padding:10px 12px; font-family:inherit; font-size:15px; font-weight:700; line-height:1.6; outline:none; overflow-y:auto; color:#2B2620; }

/* ─── NOTES : IMAGES EN LIGNE + DOCUMENTS JOINTS (20/07) ── */
/* Les images insérées dans une note (éditeur ET tous les rendus). */
.notes-editor img, .card-notes-view img, .be-note img {
  max-width:100%; height:auto; border-radius:6px; display:block; margin:.35em 0;
  border:1px solid var(--border);
}
/* La bande « Documents joints » sous l'éditeur. */
.notes-pj { margin-top:10px; border-top:1px solid var(--border); padding-top:8px; }
.notes-pj-titre { font-size:11.5px; color:var(--text-muted); margin-bottom:6px; }
.notes-pj-liste { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.notes-pj-chip { display:inline-flex; align-items:center; gap:7px; background:#fff;
  border:1px solid #E5E0D8; border-radius:8px; padding:5px 10px; font-size:12.5px;
  cursor:pointer; max-width:100%; }
.notes-pj-chip:hover { background:var(--wood-pale); }
.notes-pj-nom { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notes-pj-taille { color:var(--text-muted); font-size:11.5px; }
.notes-pj-x { border:none; background:none; cursor:pointer; color:var(--text-muted);
  font-size:13px; padding:0 2px; line-height:1; }
.notes-pj-x:hover { color:var(--danger, #C0392B); }
.notes-pj-ajouter { border:1.5px dashed #C9C2B6; background:none; border-radius:8px;
  padding:5px 10px; font-size:12.5px; color:var(--text-muted); cursor:pointer; font-family:inherit; }
.notes-pj-ajouter:hover { background:var(--wood-pale); color:var(--text); }
.notes-pj-vide { font-size:12px; color:var(--text-muted); font-style:italic; }
/* Lot 3 (20/07) : bande de chips EN LECTURE (Suivi CAO, volets logistiques,
   fiche). Mêmes chips que l'éditeur, sans croix ni bouton d'ajout. */
.notes-pj-lecture { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }

/* Mini-barre de taille d'image (clic sur une image de note) */
.notes-img-bar { position:fixed; z-index:100150; display:flex; gap:4px;
  background:#fff; border:1px solid #E5E0D8; border-radius:10px; padding:4px 6px;
  box-shadow:0 6px 24px rgba(43,38,32,0.18); }
.notes-img-bar button { border:1px solid #E5E0D8; background:#fff; border-radius:7px;
  padding:3px 9px; font-size:12px; cursor:pointer; font-family:inherit; }
.notes-img-bar button:hover { background:var(--wood-pale); }
.notes-img-bar .notes-img-bar-x { color:var(--danger, #C0392B); border-color:#EAD4D0; }
.notes-editor img { cursor:pointer; }

/* ─── BOARD PAN SCROLL ───────────────── */
.kanban-board { cursor: grab; user-select: none; }
.kanban-board:active { cursor: grabbing; }
.kanban-card { cursor: pointer; }

.checklist-btn-blocked {
  background: #F6F4F1 !important;
  border-color: #E5E0D8 !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}

/* ─── ENCOURS DÉPASSÉ ────────────────── */
.kanban-card.encours-depasse {
  background: #FDF6F5;
  border-color: #E4B4AE;
  box-shadow: inset 3px 0 0 #C0392B;
  position: relative;
}
.kanban-card.encours-depasse:hover {
  box-shadow: inset 3px 0 0 #C0392B, 0 0 0 2px #235873, 0 4px 10px rgba(0,0,0,0.12);
}
.encours-badge {
  display: inline-flex;
  align-items: center;
  font-size:11px;
  font-weight: 700;
  background: #C0392B;
  color: #fff;
  padding: 2px 6px;
  border-radius:6px;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

/* Ligne de badges organisée sous le titre (EN COURS, Tiroirs…) */
.kanban-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.kanban-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 7px;
  line-height: 1;
}
.badge-encours { background: #FBEEED; color: #C0392B; }   /* contraste mesuré : 4,81 */
.badge-tiroirs { background: #EFE9F7; color: #6D4C9F; }   /* contraste mesuré : 5,55 */
/* Montage (2026-07-17) — la clé 🔧 était un emoji nu de 14 px, coincé dans
   l'en-tête entre la pastille de priorité et la pilule de type : personne ne la
   voyait. Elle rejoint la famille des badges, qui, elle, se lit du premier coup.
   Le montage concerne ~30 % des commandes : assez rare pour qu'un badge coloré
   saute aux yeux. S'il devenait majoritaire, il faudrait INVERSER (signaler
   l'exception) — un badge sur 8 cartes sur 10, l'œil apprend à le sauter.

   ⚠️ LA COULEUR N'EST PAS `--orange` (#D4860A) — et ce n'est pas un oubli.
      Mesuré : #D4860A sur ce fond ne donne que 2,65:1, sous la barre WCAG AA de
      4,5:1 pour du 11 px gras. Sur un écran d'atelier en plein jour, ou pour un
      œil qui distingue mal les jaunes, le libellé disparaît — soit exactement
      le problème qu'on vient de corriger. On garde la teinte ambre, on fonce le
      texte : 5,39:1, au niveau du badge Tiroirs.
      NE PAS « rafraîchir » cette couleur sans refaire la mesure.

   ⚠️ Une règle .badge-montage existait plus haut dans ce fichier
      (font-size + flex-shrink). Elle était MORTE : aucun élément ne porte cette
      CLASSE — seul l'ID #badge-montage existe (pastille du menu, auth.js), et un
      ID n'est jamais atteint par un sélecteur de classe. Elle a été retirée
      plutôt que laissée : deux règles de même nom dans un fichier, c'est
      exactement ce qui avait produit 4 copies de .plan-grille dans espace.php. */
.badge-montage { background: #FDF3E3; color: #8A5A00; }   /* contraste mesuré : 5,39 */

/* Image type de projet en haut de carte */
.kanban-card-image {
  width: 100%;
  height: 90px;
  background-size: cover;
  background-position: center;
  border-radius:8px 8px 0 0;
  margin: -10px -10px 8px -10px;
  width: calc(100% + 20px);
}

/* Badge « Tiroirs à fournir » — visible sur la carte Kanban (anti-oubli au chargement) */
.tiroirs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  background: #6C3FB5;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}
/* Version compacte pour l'écran Livraisons */
.tiroirs-badge-liv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  background: #F1EAFB;
  color: #6C3FB5;
  border: 1px solid #6C3FB5;
  padding: 1px 7px;
  border-radius: 8px;
  margin: 2px 0;
}

/* ── Blocage de dossier : badge sur la carte ── */
.card-bloque-badge {
  display:inline-flex; align-items:center; gap:4px;
  max-width:100%;
  margin:0 0 6px;
  padding:3px 8px;
  background:#FCE8E6; color:#B23B32;
  border:1px solid #F3C9C4; border-radius:6px;
  font-size:10.5px; font-weight:700; line-height:1.2;
  cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-bloque-badge:hover { background:#F9D9D5; }

/* ── Mini-fenêtre centrée (motif / historique) ── */
.mini-modal-overlay {
  /* 9500 > 9000 (.modal-overlay, base.css l.55) : une mini-modale est toujours
     un dialogue de premier plan — depuis la fiche ouverte, l'éditeur de note
     passait DERRIÈRE elle (défaut recette Bloc 3, 17/07). */
  position:fixed; inset:0; z-index:9500;
  background:rgba(20,28,40,.45);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.mini-modal {
  width:420px; max-width:100%;
  background:#fff; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  padding:18px 18px 16px;
  animation:miniModalIn .12s ease-out;
}
.mini-modal-lg { width:480px; }
/* Fenêtre d'écriture des notes atelier/logistique : une consigne fait souvent
   plusieurs paragraphes et une liste. 480px obligeaient à écrire dans un
   couloir. max-width/vh : sur un portable d'atelier, la fenêtre ne doit jamais
   dépasser l'écran ni pousser les boutons hors de vue. */
.mini-modal-xl { width:860px; max-width:calc(100vw - 32px); }
@keyframes miniModalIn { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
.mini-modal-title {
  font-size:15px; font-weight:700; color:#173E54;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:6px;
}
.mini-modal-x, .mini-modal-x:hover { background:transparent; border:0; font-size:18px; cursor:pointer; color:#857B70; line-height:1; }
.mini-modal-sub { font-size:13px; color:#857B70; margin-bottom:10px; }
.mini-modal-input {
  width:100%; box-sizing:border-box;
  border:1px solid #E5E0D8; border-radius:8px;
  padding:9px 11px; font-size:14px; font-family:inherit; resize:vertical;
}
.mini-modal-input:focus { outline:none; border-color:#235873; }
.mini-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

/* Vue blocage actif + historique */
.blocage-actif { background:#FCE8E6; border:1px solid #F3C9C4; border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.blocage-motif { font-weight:600; color:#9A3B33; margin-bottom:3px; white-space:pre-wrap; }
.blocage-meta { font-size:12px; color:#857B70; }
.blocage-hist-titre { font-size:12px; font-weight:700; color:#173E54; margin:12px 0 6px; }
.blocage-hist { max-height:240px; overflow-y:auto; }
.blocage-hist-item { border-left:3px solid #E5E0D8; padding:6px 0 6px 10px; margin-bottom:8px; }
.blocage-hist-motif { font-size:13px; color:#3A3027; white-space:pre-wrap; }
.blocage-hist-meta { font-size:11.5px; color:#857B70; margin-top:2px; }
.blocage-encours { color:#B23B32; font-weight:700; }

/* Bouton désactivé dans la mini-fenêtre (motif vide) */
.mini-modal .btn:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.3); }

/* ── Feu « Matière » sur la carte (bande de départ) ── */
.kfeu-band { display:flex; align-items:center; gap:8px; padding:5px 10px; background:#14202a; cursor:pointer; margin:-11px -12px 9px -12px; border-radius:12px 12px 0 0; }
.kfeu-band:hover { background:#1b2a36; }
.kfeu-lights { display:inline-flex; gap:4px; flex-shrink:0; }
.kfeu-lab { font-size:11px; font-weight:600; color:#E7EDF1; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kfeu-hint { font-size:11px; color:#8aa0ad; flex-shrink:0; }
.kfeu-lamp { width:7px; height:7px; border-radius:50%; background:#2b3741; }
.kfeu-lamp.red   { background:#E2574C; box-shadow:0 0 4px #E2574C; }
.kfeu-lamp.amber { background:#EDA02E; box-shadow:0 0 4px #EDA02E; }
.kfeu-lamp.green { background:#43B463; box-shadow:0 0 4px #43B463; }
.kfeu-lamp.off   { background:#2b3741; }
/* quand un feu est présent, l'image s'aligne sous la bande (pas de remontée, coins non arrondis en haut) */
.kanban-card.has-feu .kanban-card-image { margin:0 0 8px 0; width:100%; border-radius:6px; }

/* Sur-fenêtre Matière */
.kfm-modal { width:380px; max-width:100%; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.28); animation:miniModalIn .12s ease-out; }
.kfm-head { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#14202a; }
.kfm-title { font-size:13px; font-weight:600; color:#E7EDF1; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kfm-x { background:transparent; border:0; color:#8aa0ad; font-size:16px; cursor:pointer; line-height:1; }
.kfm-list { max-height:320px; overflow-y:auto; padding:4px 0; }
.kfm-row { display:flex; align-items:flex-start; gap:10px; padding:8px 14px; border-bottom:.5px solid #F1ECE5; }
.kfm-row:last-child { border-bottom:none; }
.kfm-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; white-space:nowrap; flex-shrink:0; margin-top:1px; }
.kfm-pret { color:#1d6e43; background:#EAF4EC; }
.kfm-att  { color:#9a3b33; background:#FCE8E6; }
.kfm-art { flex:1; min-width:0; }
.kfm-nom { font-size:13px; color:#173E54; }
.kfm-ref { font-size:11px; color:#A89F92; font-family:ui-monospace,monospace; }
.kfm-info { font-size:11px; color:#857B70; margin-top:1px; }
.kfm-foot { padding:9px 14px; font-size:11.5px; border-top:.5px solid #F1ECE5; }
.kfm-foot-ok { background:#EAF4EC; color:#1d6e43; }
.kfm-foot-ko { background:#FCE8E6; color:#9a3b33; }

/* Feu matière « commandée » : libellé sur 2 lignes si besoin (date visible) */
.kfeu-band.kfeu-cmd .kfeu-lab { white-space: normal; line-height: 1.25; }

/* Bandeau « Matière commandée le … » dans la fenêtre détail matière */
.kfm-cmd {
  padding: 9px 14px;
  background: #E9F0F4;
  color: #235873;
  font-size: 12.5px;
  font-weight: 600;
  border-bottom: 1px solid #D4E2EA;
}

/* ─── Client bloqué en fabrication : écharpe + carte figée ─── */
.kanban-card { position: relative; }

/* Écharpe : ruban diagonal rogné dans un coin DÉDIÉ.
   Le clipping reste local au coin → la carte garde sa mise en page normale
   (les marges négatives de l'image et de la bande feu ne sont pas affectées). */
.card-echarpe-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 66px;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
  border-top-right-radius: 12px;
}
.card-echarpe {
  position: absolute;
  top: 12px;
  right: -22px;
  width: 96px;
  transform: rotate(45deg);
  background: var(--red, #C0392B);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 3px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Écharpe « À ENCAISSER » : prépaiement (acompte/avance) en attente compta */
.card-echarpe.echarpe-acompte { background: var(--orange, #D4860A); }
.kanban-card.card-prepaiement-bloque::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(45deg,
    rgba(212,134,10,0.02) 0 9px,
    rgba(212,134,10,0.05) 9px 18px);
}

/* Carte figée : non déplaçable + très léger hachurage (overlay, sans clipping) */
.kanban-card.card-figee { cursor: not-allowed; }
.kanban-card.card-figee::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(45deg,
    rgba(192,57,43,0.02) 0 9px,
    rgba(192,57,43,0.05) 9px 18px);
}

/* ═══ Suivi CAO (Bureau d'étude) — cartes épurées ═══ */
.be-card{ background:#fff; border:1px solid var(--border,#E7E0D4); border-left:4px solid var(--green,#2D7A4F); border-radius:14px; padding:14px 16px; margin-bottom:14px; cursor:pointer; transition:transform .1s; }
.be-card:hover{ transform:translateX(2px); }
.be-card-top{ display:flex; align-items:flex-start; gap:10px; }
.be-num{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; color:#fff; font-size:12px; font-weight:800; vertical-align:middle; margin-right:6px; }
.be-titre{ font-size:15.5px; font-weight:900; }
.be-sub{ font-size:12px; color:var(--text-muted,#9A9284); margin-top:3px; }
.be-badges{ display:flex; flex-direction:column; gap:5px; align-items:flex-end; flex-shrink:0; }
.be-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid var(--line,#EEE8DE); border-radius:10px; overflow:hidden; margin-top:12px; }
.be-cell{ padding:8px 11px; border-right:1px solid var(--line,#EEE8DE); min-width:0; }
.be-cell:last-child{ border-right:none; }
.be-k{ font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text-muted,#9A9284); white-space:nowrap; }
.be-v{ font-size:13.5px; font-weight:700; margin-top:2px; overflow-wrap:break-word; }
.be-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--line,#EEE8DE); }
.be-actions .be-info{ font-size:12px; font-weight:700; width:100%; margin-bottom:2px; }

/* ─── NOTES ATELIER / LOGISTIQUE sur la carte du Suivi CAO (17/07) ─────────
   Repliées par défaut : l'amorce dit s'il y a quelque chose à lire, on déplie
   pour le détail. Sobre à dessein — la carte porte déjà des bandeaux d'alerte
   colorés, et deux notes criardes de plus feraient perdre à ces alertes leur
   seul pouvoir : attirer l'œil. Les couleurs reprennent les variables du
   thème, avec repli en dur comme partout ici. */
.be-note{ margin-top:10px; padding:8px 10px; border:1px solid var(--line,#EEE8DE);
          border-radius:10px; background:var(--bg-soft,#FCFAF6); cursor:default; }
.be-note-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.be-note-toggle{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
                 color:var(--text-muted,#9A9284); cursor:pointer; user-select:none; flex:1; min-width:0; }
.be-note-toggle:hover{ color:var(--text,#2B2620); }
.be-note-amorce{ font-size:12.5px; color:var(--text,#2B2620); margin-top:3px;
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.be-note-corps{ margin-top:8px; padding-top:8px; border-top:1px dashed var(--line,#EEE8DE);
                /* PLAFONNÉ, et c'est délibéré : une consigne de deux pages
                   dépliée pousserait les 20 autres commandes hors de l'écran,
                   et le Suivi CAO n'est pas fait pour lire — il est fait pour
                   voir. Au-delà, on fait défiler DANS le volet. */
                max-height:200px; overflow-y:auto; }
/* Transfert/Montage (20/07) : la note se déplie EN ENTIER, sans cadre à
   scroller. Ces écrans servent à agir sur UNE commande à la fois — lire la
   consigne d'un coup prime sur la compacité. Le Suivi CAO garde le plafond. */
.be-note-corps--plein{ max-height:none; overflow-y:visible; }
.be-note-corps .card-notes-view{ font-size:13px; text-align:left; }
.be-note-sign{ font-size:11px; color:var(--text-muted,#9A9284); margin-top:4px; }

/* ═══ Suivi CAO — la carte devient une LIGNE repliable (17/07 soir) ═════════
   Modèle : carteAProduire() — lignes fines, tout l'écran d'un coup d'œil.
   Le clic sur la ligne DÉPLIE (il n'ouvre plus la fiche : bouton 🗂️ dédié).
   .be-card garde ses réglages historiques ; .be-row les affine. */
.be-card.be-row{ padding:10px 14px; margin-bottom:0; }
.be-card.be-row:hover{ transform:none; background:var(--bg-soft,#FCFAF6); }
.be-card.be-row:focus-visible{ outline:2px solid var(--accent,#8B5E34); outline-offset:2px; }
.be-row-head{ display:flex; align-items:center; gap:10px; }
.be-chev{ flex-shrink:0; width:14px; font-size:12px; color:var(--text-muted,#9A9284); }
.be-row-txt{ flex:1; min-width:0; }
.be-row-l1{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* Pastilles de la ligne repliée — l'ALERTE reste visible, le motif est déplié */
.be-pill{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700;
          padding:2px 7px; border-radius:10px; white-space:nowrap; }
.be-pill-rouge{ background:#FDEDEC; color:#C0392B; border:1px solid #F5C6C1; }
.be-pill-orange{ background:#FAEEDA; color:#9A5B12; border:1px solid #EDD9B4; }
.be-pill-note{ background:var(--bg-soft,#FCFAF6); color:var(--text-muted,#9A9284);
               border:1px solid var(--line,#EEE8DE); font-size:12px; padding:1px 6px; }
.be-pill-note.neuve{ border-color:#C0392B; }
.be-dot{ width:7px; height:7px; border-radius:50%; background:#C0392B; display:inline-block; }

/* Boutons de la ligne */
.be-row-btns{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.be-btn-main{ border:none; border-radius:8px; padding:8px 12px; font-weight:700; font-size:12px;
              cursor:pointer; line-height:1.25; max-width:175px; text-align:center; color:#fff; }
.be-btn-main.be-btn-clair{ background:#fff; border:1px solid var(--border,#E7E0D4); color:var(--accent,#8B5E34); }
.be-btn-fiche{ border:1px solid var(--border,#E7E0D4); background:#fff; border-radius:8px;
               width:34px; height:34px; cursor:pointer; font-size:15px; line-height:1; flex-shrink:0; }
.be-btn-fiche:hover{ background:var(--bg-soft,#FCFAF6); }

/* Volet déplié — aligné sous le texte, pas sous le chevron */
.be-row-detail{ margin-top:6px; padding-left:24px; cursor:default; }
.be-row-detail .be-grid{ margin-top:8px; }

/* Écran étroit : les boutons passent sous le texte, le volet reprend toute la largeur */
@media (max-width:640px){
  .be-row-head{ flex-wrap:wrap; }
  .be-row-btns{ width:100%; justify-content:flex-end; }
  .be-row-detail{ padding-left:0; }
}

/* ═══ Fiche commande — panneau de notes latéral (Bloc 3, 17/07 soir) ════════
   La maquette du 17/07 matin : les deux petites fenêtres 📋/🚚 accrochées à
   droite de la fiche, toujours visibles, modifiables sur place (BE). */
.fiche-modal{ max-width:1040px; }                       /* était 640px inline (board.js) */
.fiche-flex{ display:flex; gap:20px; align-items:flex-start; }
.fiche-main{ flex:1; min-width:0; }
.fiche-notes-panel{ width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:12px;
                    position:sticky; top:0; }           /* les notes suivent le défilement */
.fiche-note-fen{ background:var(--bg-soft,#FCFAF6); border:1px solid var(--line,#EEE8DE);
                 border-radius:10px; padding:12px 14px; }
.fiche-note-atelier{ border-left:4px solid #D4860A; }
.fiche-note-logistique{ border-left:4px solid #235873; }
.fiche-note-head{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800;
                  text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted,#9A9284);
                  margin-bottom:8px;
                  /* Maquette 2 : le bandeau est un bouton pleine largeur */
                  width:100%; border:0; background:transparent; cursor:pointer; text-align:left; font-family:inherit; }
.fiche-note-titre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fiche-note-chev{ font-style:normal; font-size:13px; line-height:1; transition:transform .15s ease;
                  transform:rotate(-90deg); }                 /* fermé = pointe à droite */
.fiche-note-fen[data-open="1"] .fiche-note-chev{ transform:rotate(0deg); }
/* Badge NOUVEAU (21/07, révisé) : clignotement FRANC (choix utilisateur) —
   apparition/disparition nette, plus visible qu'une pulsation douce. */
.fiche-note-badge{ background:#E24B4A; color:#fff; font-size:13px; font-weight:800;
                   padding:5px 12px; border-radius:6px; text-transform:uppercase; letter-spacing:.06em;
                   animation:fiche-note-clignote .7s steps(1,end) infinite; }
@keyframes fiche-note-clignote{ 0%,49%{ opacity:1; } 50%,100%{ opacity:.15; } }
/* Accessibilité : système réglé sur « animations réduites » → badge fixe, pas de clignotement. */
@media (prefers-reduced-motion: reduce){ .fiche-note-badge{ animation:none; } }
.fiche-note-body{ }                                            /* masqué en inline par le JS (display:none) */
.fiche-note-crayon{ border:none; background:transparent; cursor:pointer; font-size:14px;
                    padding:2px 4px; border-radius:6px; line-height:1; }
.fiche-note-crayon:hover{ background:#EFE9DF; }
.fiche-note-corps{ font-size:13.5px; line-height:1.55; }
.fiche-note-add{ border:1px dashed var(--border,#E7E0D4); background:#fff; color:var(--text-muted,#9A9284);
                 border-radius:10px; padding:10px 12px; font-size:12.5px; font-weight:600;
                 cursor:pointer; text-align:left; width:100%; }
.fiche-note-add:hover{ border-color:var(--accent,#8B5E34); color:var(--accent,#8B5E34); background:var(--bg-soft,#FCFAF6); }

/* ─── FICHE : DEUX FENÊTRES DE NOTES VRAIMENT SÉPARÉES (maquette 1, 20/07) ──
   Avant : un seul panneau feutré, deux blocs qui se lisaient comme un.
   Après : deux CARTES blanches détachées, chacune coiffée d'un BANDEAU plein
   à sa couleur (ambre = atelier, bleu = logistique). CSS PUR — le HTML de
   panneauNotesFiche (carte.js) n'a pas bougé : banc_fiche_notes reste valable.
   Le bandeau déborde jusqu'aux bords par marges négatives (la fenêtre garde
   son padding 12/14 pour le corps). */
.fiche-notes-panel{ gap:18px; }
.fiche-note-fen{ background:#fff; overflow:hidden; padding:0; }   /* le padding passe au corps */
.fiche-note-atelier{ border-left:1px solid var(--line,#EEE8DE); }    /* le liseré 4px cède la place au bandeau */
.fiche-note-logistique{ border-left:1px solid var(--line,#EEE8DE); }
.fiche-note-head{ margin:0; padding:11px 14px; border-radius:10px; }  /* fermé : coins ronds partout */
.fiche-note-fen[data-open="1"] .fiche-note-head{ border-radius:10px 10px 0 0; } /* ouvert : arrondi en haut seulement */
.fiche-note-body{ padding:12px 14px; }
.fiche-note-atelier .fiche-note-head{ background:#FAEEDA; color:#7A4A08; }
.fiche-note-logistique .fiche-note-head{ background:#E6F1FB; color:#155080; }
.fiche-note-atelier .fiche-note-crayon:hover{ background:#F5DFB8; }
.fiche-note-logistique .fiche-note-crayon:hover{ background:#CFE4F7; }
/* Le corps de la note se fond dans la carte blanche : plus de pavé beige.
   PORTÉE LIMITÉE à la fiche — ailleurs (volets BE, Transfert…), le fond
   feutré de .card-notes-view reste, il y délimite la note sur fond clair. */
.fiche-note-fen .card-notes-view{ background:#fff; padding:6px 0; border-radius:0; }

/* Écran étroit : le panneau passe SOUS le contenu, pleine largeur */
@media (max-width:940px){
  .fiche-modal{ max-width:640px; }
  .fiche-flex{ flex-direction:column; }
  .fiche-notes-panel{ width:100%; position:static; }
}