:root {
  --frame: #1f4fb5;
  --frame-soft: #a3aedb;
  --ink: #111;
  --muted: #6b6f76;
  --line: #111;
  --paper: #fff;
  --bg: #fff;
  --hover: #f2f4fa;
  --accent: #1f4fb5;
  --danger: #b3261e;
  --active-bg: #fff6d6;
  --active-line: #f0cf6b;
  --active-ink: #b07a00;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- Barre d'outils ---------- */
.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; font-size: 12px; color: var(--muted);
}
.toolbar .spacer { flex: 1; }
.toolbar a, .toolbar button {
  color: var(--muted); text-decoration: none; background: none; border: 1px solid transparent;
  border-radius: 4px; padding: 3px 7px;
}
.toolbar a:hover, .toolbar button:hover { background: var(--hover); color: var(--ink); }
.status { min-width: 70px; text-align: right; }

/* ---------- Storyboard ---------- */
.frame {
  margin: 0 10px 10px;
  border: 3px solid var(--frame);
  padding: 10px;
  background: var(--frame-soft);
  box-shadow: inset 0 0 0 0 transparent;
}
.sheet {
  background: var(--paper);
  border: 3px solid var(--frame);
  padding: 0 14px 14px;
  min-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
}
.head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  border-bottom: 3px solid var(--line);
}
.head > div.challenge { position: relative; flex-wrap: wrap; min-width: 0; }
.sentence { flex: 1; min-width: 0; font-size: 16px; line-height: 1.9; }
.head .sentence input.blank {
  flex: none; border: none; border-bottom: 1.5px dashed #9aa0a8; padding: 0;
  font-size: 16px; min-width: 3ch; max-width: 100%;
  margin: 0;
}
.head textarea.focus-input {
  flex: 1; min-width: 0; border: none; outline: none; resize: none; font-size: 16px;
  line-height: 1.4; padding: 2px 0; background: transparent; overflow: hidden;
}
.head .sentence input.blank:focus { border-bottom: 1.5px solid var(--accent); }
.head .sentence input.blank:not(:placeholder-shown) { border-bottom-color: transparent; }
.head .sentence input.blank:not(:placeholder-shown):focus { border-bottom-color: var(--accent); }
.help-btn { font-size: 13px; color: var(--muted); border: 1px solid #c3c7ce; border-radius: 50%; width: 20px; height: 20px; padding: 0; line-height: 18px; background: #fff; align-self: center; }
.help-btn:hover { color: var(--accent); border-color: var(--accent); }
.rules {
  position: absolute; right: 8px; top: 100%; z-index: 10; width: min(520px, 90vw);
  background: #fff; border: 1px solid #c3c7ce; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 12px 14px; font-size: 13px; line-height: 1.45;
}
.rules[hidden] { display: none; }
.rules table { width: 100%; border-collapse: collapse; margin: 6px 0 8px; }
.rules th, .rules td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #eceef1; vertical-align: top; }
.rules th { font-size: 11px; text-transform: uppercase; color: var(--muted); }
.rules .good { color: #1d7a3a; }
.rules .bad { color: var(--danger); }
.rules p { margin: 4px 0; }
.head > div { padding: 14px 16px 12px; display: flex; gap: 8px; align-items: baseline; }
.head > div + div { border-left: 3px solid var(--line); margin: 8px 0; padding-top: 6px; padding-bottom: 4px; }
.head > div:first-child { margin: 8px 0; padding-top: 6px; padding-bottom: 4px; }
.head label { font-weight: 700; font-size: 19px; white-space: nowrap; }
.head input { flex: 1; min-width: 0; border: none; outline: none; font-size: 16px; padding: 2px 0; background: transparent; }

/* Les colonnes Target / Current partagent les mêmes lignes (subgrid) :
   chaque paramètre est aligné face à son homologue. */
.body {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  margin-top: 14px;
}
.col { padding: 6px 16px; display: flex; flex-direction: column; min-width: 0; }
.col + .col { border-left: 3px solid var(--line); }
.col.cond { grid-row: 1 / span 5; display: grid; grid-template-rows: subgrid; }
.col.right { grid-row: 1 / span 5; }
h2 { font-size: 19px; line-height: 1.2; margin: 4px 0 10px; font-weight: 700; }
.achieve { display: flex; align-items: center; gap: 6px; font-weight: 700; margin: -4px 0 12px; font-size: 15px; }
.achieve input { border: none; border-bottom: 2px solid var(--line); outline: none; padding: 2px 2px; font-weight: 400; background: transparent; }

.metric { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px dashed #d5d8de; min-width: 0; }
.metric > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 3px; }
.metric textarea {
  width: 100%; resize: none; border: none; outline: none; line-height: 1.5;
  background: transparent; padding: 2px 0; min-height: 48px; overflow: hidden;
}
.metric.pattern textarea { flex: 1; min-height: 120px; }
.metric textarea::placeholder, .head input::placeholder, .obs input::placeholder, .exp textarea::placeholder { color: #b4b7bd; }

.right { padding: 0; }
.right > section { padding: 6px 16px; }
.right > section.experiments { flex: 1.3; }
.right > section.obstacles { flex: 1; border-top: 3px solid var(--line); margin-left: 8px; padding-left: 8px; padding-top: 14px; }

/* Experimenting record */
.exp { border: 1px solid #d5d8de; border-radius: 4px; margin-bottom: 8px; background: #fff; }
.exp-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px solid #e6e8ec; background: #fafbfc; font-size: 12px; }
.exp-head .num { font-weight: 700; }
.exp-head input { border: none; outline: none; background: transparent; font-size: 12px; min-width: 0; }
.exp-head .spacer { flex: 1; }
.exp-grid { display: grid; grid-template-columns: 1fr; }
.exp-field { display: grid; grid-template-columns: 70px 1fr; border-top: 1px solid #eef0f3; }
.exp-field:first-child { border-top: none; }
.exp-field span { font-size: 11px; color: var(--muted); padding: 5px 6px; text-transform: uppercase; letter-spacing: .02em; }
.exp textarea { border: none; outline: none; resize: none; padding: 4px 6px; min-height: 26px; line-height: 1.4; background: transparent; width: 100%; }

.icon { background: none; border: none; color: var(--muted); padding: 2px 5px; border-radius: 3px; line-height: 1; }
.icon:hover { background: var(--hover); color: var(--ink); }
.icon.del:hover { color: var(--danger); }
.add { background: none; border: 1px dashed #c3c7ce; border-radius: 4px; color: var(--muted); padding: 5px 8px; font-size: 12px; width: 100%; text-align: left; }
.add:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Time block : Lire → Run → Kata ---------- */
/* ============================================================
   Time block : maquette 3a « Page complète avec ligne de vie »
   ============================================================ */
.tb, .tl, .kata-hist {
  --tl-pad: 84px; --tl-ink: rgb(55,53,47); --tl-g: rgb(68,131,97); --tl-b: #2383e2; --tl-off: rgba(55,53,47,.12);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  color: var(--tl-ink);
}
.tb .grow, .tl .grow, .kata-hist .grow { flex: 1; }
.tl-muted { color: rgba(55,53,47,.5); }

/* Barre collante */
.tb { position: sticky; top: 0; z-index: 15; background: #fff; border-top: 1px solid rgba(55,53,47,.09); border-bottom: 1px solid rgba(55,53,47,.09); padding: 9px var(--tl-pad); font-size: 13px; }
.tb-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tb-label { color: rgba(55,53,47,.55); }
.tb-phase { font-weight: 600; }
.tb-spacer { flex: 1; }
.tb-timer { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-timer.over { color: rgb(212,76,71); }
.tb-dur { color: rgba(55,53,47,.5); margin-left: -8px; display: inline-flex; align-items: baseline; gap: 4px; }
.tb-dur input { width: 3.2ch; border: none; background: transparent; font: inherit; color: inherit; padding: 0 1px; text-align: center; -moz-appearance: textfield; }
.tb-dur input::-webkit-inner-spin-button { display: none; }
.tb-dur input:hover, .tb-dur input:focus { background: rgba(55,53,47,.06); border-radius: 4px; outline: none; }
.tb-btn { border: 1px solid rgba(55,53,47,.16); background: #fff; border-radius: 6px; padding: 3px 9px; font: inherit; font-size: 13px; color: rgba(55,53,47,.8); white-space: nowrap; }
.tb-btn:hover { background: rgba(55,53,47,.04); }
.tb-btn.danger { color: rgb(212,76,71); padding: 4px 10px; }
.tb-btn.primary { background: var(--tl-b); border-color: var(--tl-b); color: #fff; font-weight: 500; }
.tb-impossible { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.tb-impossible[hidden] { display: none; }
.tb-impossible textarea { width: 100%; min-height: 54px; resize: vertical; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid rgba(55,53,47,.16); border-radius: 6px; outline: none; }
.tb-impossible textarea:focus { border-color: var(--tl-b); }
.tb-impossible .row { display: flex; gap: 6px; flex-wrap: wrap; }

/* Ligne de vie : chaque tronçon porte sa portion de ligne (2 px) et, le cas échéant, son cercle */
.tl-seg { position: relative; padding: 0 var(--tl-pad); }
.tl-seg::before { content: ''; position: absolute; left: calc(var(--tl-pad) / 2 - 1px); top: 0; bottom: 0; width: 2px; background: var(--tl-off); }
.tl-seg.on::before { background: var(--tl-g); }
.tl.no-rail .tl-seg::before { display: none; }
.tl-node { position: absolute; left: calc(var(--tl-pad) / 2 - 12px); top: 8px; width: 24px; height: 24px; border-radius: 50%; border: none; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; background: rgb(241,241,239); box-shadow: inset 0 0 0 1px rgba(55,53,47,.16); z-index: 1; }
button.tl-node { cursor: pointer; }
.tl-node.done { background: var(--tl-g); box-shadow: none; color: #fff; font-size: 13px; }
.tl-node.active { background: #fff; box-shadow: inset 0 0 0 2px var(--tl-b); }
.tl-node.active .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tl-b); }
.tl-node.ready { background: rgb(245,249,252); box-shadow: inset 0 0 0 2px var(--tl-b), 0 0 0 4px rgba(35,131,226,.15); }
.tl-node.open { background: #fff; box-shadow: inset 0 0 0 2px var(--tl-b), 0 0 0 4px rgba(35,131,226,.15); }
.tl-body { display: flex; flex-direction: column; gap: 12px; }
.tl-title { display: flex; align-items: baseline; gap: 10px; }
.tl-title h3 { margin: 0; font-size: 18px; font-weight: 600; }
.tl-kicker { font-size: 12px; font-weight: 600; color: rgba(55,53,47,.4); }
.tl-kicker.b { color: var(--tl-b); } .tl-kicker.g { color: var(--tl-g); }
.tl-note { font-size: 13px; color: rgba(55,53,47,.5); }
.tl-hint { font-size: 13px; color: rgba(55,53,47,.55); }
.tl-hint.b { color: var(--tl-b); } .tl-hint.g { color: var(--tl-g); }

/* 1 · Lire */
.tl-read { padding-top: 28px; padding-bottom: 8px; }
.tl-read::before { top: 52px; }
.tl-read .tl-node { top: 26px; }
.tl-challenge { font-size: 15px; line-height: 1.5; color: rgba(55,53,47,.85); }
.tl-challenge b { font-weight: 600; }
.tl-chain { display: grid; grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr); gap: 6px; }
.tl-chip { border: 1px solid rgba(55,53,47,.12); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tl-chip .k { font-size: 12px; color: rgba(55,53,47,.55); }
.tl-chip .v { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.tl-chip.c-obs { border-color: rgb(240,207,107); background: rgb(252,249,242); }
.tl-chip.c-obs .k { color: rgb(159,107,33); }
.tl-chip.c-exp { border-color: rgba(35,131,226,.45); background: rgb(245,249,252); }
.tl-chip.c-exp .k { color: rgb(51,126,169); }
.tl-chip.c-exp .v { font-weight: 500; }
.tl-arrow { display: flex; align-items: center; justify-content: center; color: rgba(55,53,47,.35); }
.tl-check .tl-body { flex-direction: row; align-items: center; min-height: 40px; }
.tl-check2 .tl-body { min-height: 44px; }

/* 2 · Run */
.tl-run { padding-top: 10px; }
.tl-run > .tl-body { padding: 8px 0; gap: 14px; }
.tl-flux .tl-body { padding: 14px 0 8px; gap: 10px; }
.rt { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.rt-head, .fx-head { display: flex; align-items: center; gap: 10px; }
.rt-h { font-size: 15px; font-weight: 600; }
.rt-count { font-size: 13px; color: rgba(55,53,47,.65); }
.rt-bar { width: 110px; height: 4px; border-radius: 2px; background: rgba(55,53,47,.09); }
.rt-bar div { height: 4px; border-radius: 2px; background: var(--tl-b); }
.rt-list { display: flex; flex-direction: column; gap: 2px; }
.rt-list.dim, .fx-grid.dim { opacity: .55; }
.rt-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 15px; border-radius: 6px; }
.rt-row:hover { background: rgba(55,53,47,.04); }
.rt-row.cur { padding: 9px 10px; background: rgb(245,249,252); box-shadow: inset 0 0 0 1px rgba(35,131,226,.35); font-weight: 500; }
.rt-row.over { box-shadow: inset 0 2px 0 var(--tl-b); }
.rt-grip { width: 14px; flex: none; color: rgba(55,53,47,.3); cursor: grab; font-size: 13px; letter-spacing: -2px; user-select: none; opacity: 0; }
.rt-row:hover .rt-grip { opacity: 1; }
.rt-box { width: 16px; height: 16px; border-radius: 3px; flex: none; border: none; padding: 0; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(55,53,47,.5); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: default; }
.tl .rt-box:not([aria-disabled]) { cursor: pointer; }
.rt-row.done .rt-box { background: var(--tl-b); box-shadow: none; }
.rt-lbl { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; padding: 0; color: var(--tl-ink); }
.rt-row.done .rt-lbl { color: rgba(55,53,47,.45); text-decoration: line-through; }
.rt-lbl::placeholder { color: rgba(55,53,47,.35); }
.rt-tag { font-size: 12px; font-weight: 400; color: rgb(51,126,169); }
.rt-add { align-self: stretch; text-align: left; border: none; background: none; padding: 5px 6px 5px 30px; font: inherit; font-size: 14px; color: rgba(55,53,47,.4); border-radius: 6px; }
.rt-add:hover { background: rgba(55,53,47,.04); }
.fx-tag { background: rgb(227,226,224); color: rgb(50,48,44); border-radius: 4px; padding: 0 6px; font-size: 12px; }
.fx-grid { display: grid; gap: 8px; }
.fx-col { border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 96px; min-width: 0;
  --c-bg: rgb(245,249,252); --c-pill: rgb(211,229,239); --c-text: rgb(51,126,169); background: var(--c-bg); }
.fx-col.todo { --c-bg: rgb(247,247,245); --c-pill: rgb(227,226,224); --c-text: rgb(50,48,44); }
.fx-col.warn { --c-bg: rgb(253,246,245); --c-pill: rgb(255,226,221); --c-text: rgb(212,76,71); }
.fx-col.done { --c-bg: rgb(246,250,247); --c-pill: rgb(219,237,219); --c-text: rgb(68,131,97); }
.fx-col-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fx-pill { background: var(--c-pill); color: var(--c-text); border-radius: 4px; padding: 0 6px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-n { font-size: 13px; color: var(--c-text); }
.fx-meta { font-size: 11.5px; color: rgba(55,53,47,.5); }
.fx-card { position: relative; background: #fff; border-radius: 6px; box-shadow: rgba(15,15,15,.1) 0 0 0 1px, rgba(15,15,15,.1) 0 2px 4px; padding: 8px; font-size: 13px; overflow-wrap: anywhere; }
.fx-card.movable { cursor: pointer; }
.fx-col.done .fx-card { color: rgba(55,53,47,.55); }
.fx-del { position: absolute; top: 4px; right: 4px; border: none; background: #fff; color: rgba(55,53,47,.45); font-size: 11px; padding: 1px 4px; border-radius: 4px; display: none; }
.fx-card:hover .fx-del, .fx-del:focus-visible { display: block; }
.fx-new { border: none; background: transparent; font: inherit; font-size: 13px; padding: 4px 2px; outline: none; min-width: 0; width: 100%; color: var(--tl-ink); }
.fx-new::placeholder { color: rgba(55,53,47,.4); }
.fx-hint { font-size: 13px; margin: 0; }

/* 3 · Kata : en-tête, bandeau d'état, puis le storyboard */
.tl-kata { padding-top: 10px; padding-bottom: 12px; }
#tlKata { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 12px; }
.tl-kata .tl-title { align-items: center; }
.tl-banner { display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 10px 12px; font-size: 13.5px; }
.tl-banner.locked { background: rgb(241,241,239); }
.tl-banner.open { background: rgb(245,249,252); box-shadow: inset 0 0 0 1px rgba(35,131,226,.35); }
.tl-kata .frame { margin: 0; }

/* Terminer */
.tl-end { min-height: 64px; }
.tl-end::before { bottom: auto; height: 22px; }
.tl-end .tl-node { top: 20px; }
.tl-end .tl-body { flex-direction: row; align-items: center; gap: 12px; min-height: 64px; }
.tl-end-label { font-size: 15px; font-weight: 600; }
.tl-end-label.g { color: var(--tl-g); } .tl-end-label.off { color: rgba(55,53,47,.4); }

/* Historique de Kata */
.kata-hist { padding: 30px var(--tl-pad) 36px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(55,53,47,.09); margin-top: 8px; }
.kh-head { display: flex; align-items: baseline; gap: 8px; margin-left: -20px; }
.kh-toggle { display: inline-flex; align-items: baseline; gap: 8px; border: none; background: none; padding: 0; font: inherit; color: inherit; }
.kh-arrow { font-size: 10px; width: 12px; color: rgba(55,53,47,.5); }
.kh-title { font-size: 18px; font-weight: 600; }
.kh-row { display: grid; grid-template-columns: 22px minmax(0,1fr) 150px 110px; align-items: center; gap: 10px; font-size: 14px; border-bottom: 1px solid rgba(55,53,47,.09); padding: 6px 0; }
.kh-row.kh-th { font-size: 12.5px; color: rgba(55,53,47,.55); padding: 4px 0; }
.kh-row .b { color: rgb(51,126,169); } .kh-row .g { color: var(--tl-g); }
.kh-row .cur { font-weight: 500; }
.kh-row .cur .tl-muted { font-weight: 400; }
.kh-empty { font-size: 13px; }

/* Storyboard verrouillé hors étape Kata */
.frame.readonly { position: relative; }
.frame.readonly .add, .frame.readonly .icon.del, .frame.readonly #liftObs, .frame.readonly .add-wait,
.frame.readonly [data-act="init"], .frame.readonly .blk-tools, .frame.readonly .conn .side button { display: none !important; }
.frame.readonly ::placeholder { color: transparent !important; }
section.experiments.spot { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; scroll-margin-top: 130px; }


/* Block diagrams As Is / To Be */
.diagram { border-top: 1px dashed #d5d8de; padding: 8px 0 4px; min-width: 0; }
.diagram-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; min-height: 22px; }
.diagram-head > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.diagram-head button { font-size: 11px; padding: 2px 7px; border: 1px solid #c3c7ce; border-radius: 4px; background: #fff; color: var(--muted); }
.diagram-head button:hover { border-color: var(--accent); color: var(--accent); }
.blk {
  position: relative; display: flex; align-items: center; gap: 6px;
  border: 2px solid var(--ink); border-radius: 3px; padding: 5px 8px; background: #fff; min-width: 0;
}
.blk.obstacle { border-color: var(--danger); background: #fdf3f2; }
.blk .warn { color: var(--danger); font-size: 13px; }
.blk input { border: none; outline: none; background: transparent; min-width: 0; padding: 1px 0; }
.blk .blk-name { flex: 1; font-weight: 700; }
.blk .blk-val { width: 34%; text-align: right; color: #333; }
.blk input::placeholder, .conn input::placeholder { color: #b4b7bd; font-weight: 400; }
.blk-tools {
  position: absolute; right: 4px; top: -13px; display: none; gap: 1px;
  background: #fff; border: 1px solid #c3c7ce; border-radius: 4px; padding: 1px; z-index: 2;
}
.blk:hover .blk-tools, .blk:focus-within .blk-tools { display: flex; }
.blk-tools button { border: none; background: none; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 3px; color: var(--muted); }
.blk-tools button:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.blk-tools button:disabled { opacity: .3; cursor: default; }
.blk-tools button.on { color: var(--danger); }
.conn { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 26px; }
.conn .down { font-size: 16px; line-height: 1; color: var(--ink); }
.conn .side { display: flex; align-items: center; gap: 3px; padding-left: 8px; min-width: 0; font-size: 12px; }
.conn .tri { color: #d08700; }
.conn .side input { width: 60px; min-width: 0; border: none; border-bottom: 1px dashed #c3c7ce; outline: none; background: transparent; font-size: 12px; padding: 1px 0; }
.conn .side button { border: none; background: none; color: var(--muted); font-size: 11px; padding: 2px 4px; border-radius: 3px; }
.conn .side button:hover { background: var(--hover); color: var(--ink); }
.conn .add-wait { visibility: hidden; }
.conn:hover .add-wait, .conn .add-wait:focus { visibility: visible; }
.diagram .add { margin-top: 8px; }
.diagram .add:disabled { opacity: .5; cursor: default; }

/* Obstacle en cours, en tête du Record */
.rec-obs {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--active-bg); border: 1px solid var(--active-line); border-radius: 4px;
  padding: 6px 8px; margin-bottom: 10px; font-size: 13px;
}
.rec-obs.none { background: #f6f7f9; border-color: #d5d8de; }
.rec-obs strong { white-space: nowrap; }
.rec-obs select { flex: 1; min-width: 120px; font: inherit; padding: 3px 4px; border: 1px solid #c3c7ce; border-radius: 4px; background: #fff; }
.rec-obs button { font-size: 12px; padding: 3px 8px; border: 1px solid #1d7a3a; color: #1d7a3a; background: #fff; border-radius: 4px; white-space: nowrap; }
.rec-obs button:hover { background: #1d7a3a; color: #fff; }
.hint { color: var(--muted); font-size: 12px; font-style: italic; margin: 4px 0 10px; }

.archive { margin-top: 12px; font-size: 12px; }
.archive summary { cursor: pointer; color: var(--muted); padding: 3px 0; }
.archive summary:hover { color: var(--ink); }
.arch-group { border-left: 3px solid #d5d8de; padding: 4px 0 4px 8px; margin: 8px 0; }
.arch-group .arch-title { font-weight: 700; }
.arch-group .badge { font-weight: 400; font-size: 11px; color: var(--muted); border: 1px solid #d5d8de; border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.arch-group .badge.lifted { color: #1d7a3a; border-color: #9fd0ae; }
.arch-group ol { margin: 4px 0 0; padding-left: 18px; }
.arch-group li { margin: 2px 0; }
.arch-group .learned { color: var(--muted); }

/* Obstacles */
.obs { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 4px; border: 1px solid transparent; }
.obs input[type=text] { flex: 1; border: none; outline: none; padding: 3px 2px; background: transparent; min-width: 0; }
.obs.done input[type=text] { text-decoration: line-through; color: var(--muted); }
.obs .arrow { color: #c9ccd2; font-size: 15px; }
.obs .arrow:disabled { visibility: hidden; }
.obs.focus { background: var(--active-bg); border-color: var(--active-line); }
.obs.focus .arrow { color: var(--active-ink); }
.obs.focus input[type=text] { font-weight: 700; }
.list { margin-bottom: 8px; }

/* ---------- Kanban (style Notion) ---------- */
body.kanban-page {
  --n-ink: rgb(55, 53, 47); --n-muted: rgba(55, 53, 47, .72); --n-faint: rgba(55, 53, 47, .58);
  --n-line: rgba(55, 53, 47, .09); --n-hover: rgba(55, 53, 47, .06); --n-hover2: rgba(55, 53, 47, .12);
  --n-blue: #2383e2;
  --n-shadow-pop: rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px;
  background: #fff; color: var(--n-ink); min-height: 100vh;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
}
svg.i { width: 16px; height: 16px; display: block; flex: none; }
/* Mise en page Notion : bandeau 45 px, marges latérales 96 px */
.n-topbar { position: sticky; top: 0; z-index: 12; height: 45px; display: flex; align-items: center; gap: 4px; padding: 0 12px; background: #fff; }
.n-topbar .spacer { flex: 1; }
.n-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 2px 6px; border-radius: 4px; color: var(--n-ink); max-width: 60vw; white-space: nowrap; }
.n-crumb span { overflow: hidden; text-overflow: ellipsis; }
.n-crumb:hover { background: var(--n-hover); }
.n-page { padding: 0 96px 40px; }
.n-title { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 0; padding: 38px 0 12px; letter-spacing: -.01em; outline: none; cursor: text; }
.n-title:empty::before { content: attr(data-placeholder); color: rgba(55,53,47,.2); }
.n-bar { display: flex; align-items: center; gap: 2px; padding-bottom: 8px; margin-bottom: 10px; }
.n-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 5px 10px; border-radius: 16px; background: var(--n-hover); }
.n-bar .spacer { flex: 1; }
.n-icon-btn { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--n-faint); padding: 5px; border-radius: 6px; line-height: 1; }
.n-icon-btn:hover { background: var(--n-hover); color: var(--n-ink); }
.n-icon-btn.active { color: var(--n-blue); }
.n-search { display: inline-flex; align-items: center; }
.n-search input { width: 0; opacity: 0; border: none; outline: none; font: inherit; font-size: 14px; color: var(--n-ink); background: transparent; transition: width .15s, opacity .15s; padding: 0; }
.n-search.open input { width: 150px; opacity: 1; padding: 0 4px; }

.n-new { position: relative; display: inline-flex; margin-left: 8px; }
.n-new > button { display: inline-flex; align-items: center; border: none; background: var(--n-blue); color: #fff; font-size: 14px; font-weight: 500; padding: 5px 10px; }
.n-new > button:hover { background: #0077d4; }
.n-new .main { border-radius: 6px 0 0 6px; }
.n-new .caret { border-radius: 0 6px 6px 0; border-left: 1px solid rgba(255,255,255,.3); padding: 5px 5px; }

/* Menus (popover Notion) */
.n-menu, .n-pop {
  background: #fff; border-radius: 10px; padding: 6px; box-shadow: var(--n-shadow-pop); font-size: 14px; color: var(--n-ink);
}
.n-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 300px; }
.n-pop { position: fixed; z-index: 40; min-width: 220px; max-width: 300px; }
.n-menu[hidden], .n-pop[hidden] { display: none; }
.n-menu .label, .n-pop .label { font-size: 12px; color: var(--n-muted); padding: 6px 8px 4px; font-weight: 500; }
.n-menu .row, .n-pop .row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; min-height: 28px; }
.n-menu .row:hover, .n-pop .row:hover { background: var(--n-hover); }
.n-pop .row .ic { color: var(--n-muted); display: inline-flex; }
.n-pop .row.danger, .n-pop .row.danger .ic { color: rgb(212, 76, 71); }
.n-pop .row .check { margin-left: auto; color: var(--n-ink); }
.n-menu .row .name, .n-pop .row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-menu .row .default { font-size: 11px; color: var(--n-muted); background: var(--n-hover); border-radius: 4px; padding: 1px 5px; }
.n-menu .row .tools { display: none; gap: 1px; }
.n-menu .row:hover .tools { display: flex; }
.n-menu .row .tools button { display: inline-flex; border: none; background: none; color: var(--n-faint); padding: 3px; border-radius: 4px; }
.n-menu .row .tools button:hover { background: var(--n-hover2); color: var(--n-ink); }
.n-menu hr, .n-pop hr { border: none; border-top: 1px solid var(--n-line); margin: 5px 0; }
.n-menu .row.new-tpl { color: var(--n-muted); }
.n-switch { margin-left: auto; width: 26px; height: 14px; border-radius: 7px; background: rgba(55,53,47,.2); position: relative; flex: none; }
.n-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: left .15s; }
.n-switch.on { background: var(--n-blue); }
.n-switch.on::after { left: 14px; }

/* Board : colonnes x sous-groupes */
.n-board-wrap { overflow-x: auto; margin: 0 -96px; padding: 0 96px 16px; }
.n-board { display: grid; column-gap: 12px; row-gap: 0; align-items: stretch; width: max-content; }
.n-head { background: var(--col-bg); border-radius: 10px; padding: 6px 8px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.n-head.hidden-groups { background: transparent; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 6px; }
.n-head .n-head-tools { margin-left: auto; display: flex; gap: 1px; visibility: hidden; }
.n-head:hover .n-head-tools { visibility: visible; }
.n-head .n-icon-btn { padding: 3px; }
.n-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--col-pill); color: var(--col-text); border-radius: 12px; padding: 1px 9px 1px 7px; font-weight: 500; white-space: nowrap; font-size: 14px; }
.n-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--col-dot); flex: none; }
.n-count { color: var(--col-count); font-size: 14px; }
.n-hidden-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.n-hidden-row:hover { background: var(--n-hover); }
.n-hidden-label { color: var(--n-muted); font-size: 14px; padding: 2px 6px 4px; }

.n-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 14px 0 8px; font-size: 14px; position: relative; z-index: 2; pointer-events: none; }
.n-group > * { pointer-events: auto; }
.n-group .toggle { display: inline-flex; border: none; background: none; color: var(--n-ink); padding: 3px; border-radius: 4px; transition: transform .15s; }
.n-group .toggle:hover { background: var(--n-hover); }
.n-group.collapsed .toggle { transform: rotate(-90deg); }
.n-group .n-pill { border-radius: 4px; padding: 1px 7px; }
.n-group .n-count { color: var(--n-faint); }

.n-cell { background: var(--col-bg); border-radius: 10px; padding: 8px; min-height: 60px; display: flex; flex-direction: column; gap: 8px; }
.n-board.nocolor .n-cell, .n-board.nocolor .n-head { background: transparent; }
.n-icon-btn.on { background: var(--n-hover2); color: var(--n-ink); }

/* Panneau « View settings » */
.vp {
  position: fixed; bottom: 0; width: 290px; z-index: 35; overflow-y: auto; background: #fff;
  border-left: 1px solid var(--n-line); padding: 10px 12px 24px; font-size: 14px; color: var(--n-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
}
.vp-head { display: flex; align-items: center; gap: 6px; min-height: 30px; margin-bottom: 8px; }
.vp-title { flex: 1; color: var(--n-muted); font-weight: 500; }
.vp-title.strong { color: var(--n-ink); font-weight: 600; }
.vp-x { width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(55,53,47,.08); color: var(--n-muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.vp-x:hover { background: rgba(55,53,47,.16); }
.vp-x svg.i { width: 12px; height: 12px; }
.vp-back { border: none; background: none; padding: 3px; border-radius: 4px; color: var(--n-muted); display: inline-flex; }
.vp-back:hover { background: var(--n-hover); }
.vp-row { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 6px; border-radius: 6px; cursor: pointer; }
.vp-row:hover { background: var(--n-hover); }
.vp-row.static { cursor: default; }
.vp-row.static:hover { background: none; }
.vp-row .ic { display: inline-flex; color: var(--n-ink); }
.vp-row .lbl { flex: 1; min-width: 0; }
.vp-row .val { color: var(--n-faint); white-space: nowrap; }
.vp-row .chev { display: inline-flex; color: var(--n-faint); }
.vp-row .check { display: inline-flex; margin-left: auto; }
.vp-row.danger { color: var(--n-muted); }
.vp-sep { border-top: 1px solid var(--n-line); margin: 8px 0; }
.vp-sec { display: flex; justify-content: space-between; align-items: center; color: var(--n-muted); font-size: 12px; font-weight: 500; padding: 12px 6px 4px; }
.vp-link { border: none; background: none; color: var(--n-blue); font-size: 12px; padding: 2px 4px; border-radius: 4px; }
.vp-link:hover { background: rgba(35,131,226,.08); }
.vp-search { width: 100%; font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid rgba(55,53,47,.16); border-radius: 6px; background: rgba(242,241,238,.6); outline: none; color: var(--n-ink); }
.vp-search:focus { border-color: var(--n-blue); box-shadow: 0 0 0 1px var(--n-blue); }
.vp-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px; border-radius: 6px; }
.vp-item:hover { background: var(--n-hover); }
.vp-item .grip { display: inline-flex; color: rgba(55,53,47,.3); cursor: grab; }
.vp-item .grip.none { visibility: hidden; }
.vp-item .ic { display: inline-flex; color: var(--n-ink); min-width: 16px; font-size: 13px; font-weight: 600; }
.vp-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-item .eye { border: none; background: none; padding: 3px; border-radius: 4px; color: var(--n-ink); display: inline-flex; }
.vp-item .eye:hover { background: var(--n-hover2); }
.vp-item.off .eye { color: var(--n-faint); }
.vp-item.fixed .eye { color: rgba(55,53,47,.3); cursor: default; }
.vp-item.fixed .eye:hover { background: none; }
.vp-item.drop-before { box-shadow: inset 0 2px 0 var(--n-blue); }
.vp-item[hidden] { display: none; }
.vp-label { font-size: 12px; color: var(--n-muted); font-weight: 500; padding: 10px 6px 4px; }
.n-cell.drop { box-shadow: inset 0 0 0 2px var(--col-dot); }
.n-cell.empty { background: transparent; }

.n-card {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;   /* appui long = glisser (tactile) */
  position: relative; background: #fff; border-radius: 10px; padding: 8px 10px; min-height: 40px; cursor: pointer; min-width: 0;
  box-shadow: rgba(15,15,15,.1) 0 0 0 1px, rgba(15,15,15,.1) 0 2px 4px;
}
.n-card:hover { background: #fafaf9; }
.n-card.dragging { opacity: .4; }
.n-drop-line { height: 3px; border-radius: 2px; background: rgba(35, 131, 226, .6); margin: -5.5px 2px; pointer-events: none; }
.n-card.hidden-by-search { display: none; }
.n-card .t { display: flex; gap: 0; align-items: flex-start; font-size: 15px; font-weight: 500; line-height: 22.5px; overflow-wrap: anywhere; }
.n-card .t .tt { margin-top: .8px; }
/* Mesures Notion : case 24 × 24, marge 0 4px 0 -2px, dessin 19,2 px (18 px pour la page vide) */
.n-card .t .ico { flex: none; width: 24px; height: 24px; margin: 0 4px 0 -2px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; }
.n-card .t .ico:hover { background: rgba(55,53,47,.08); }
.n-card .t .ico svg.nicon.page-default { width: 18px; height: 18px; color: rgba(55,53,47,.65); }
.n-card .t .untitled { color: var(--n-faint); }
.n-card .t input { flex: 1; min-width: 0; border: none; outline: none; font: inherit; color: inherit; background: transparent; padding: 0; }
.n-card .prop { font-size: 12px; color: var(--n-muted); line-height: 1.45; margin-top: 7px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.n-card .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.n-card-tools {
  position: absolute; top: 6px; right: 6px; display: none; background: #fff; border-radius: 6px;
  box-shadow: rgba(15,15,15,.1) 0 0 0 1px, rgba(15,15,15,.1) 0 2px 4px;
}
.n-card:hover .n-card-tools, .n-card-tools.open { display: flex; }
.n-card-tools button { display: inline-flex; border: none; background: none; color: var(--n-muted); padding: 4px; }
.n-card-tools button:first-child { border-radius: 6px 0 0 6px; }
.n-card-tools button:last-child { border-radius: 0 6px 6px 0; border-left: 1px solid var(--n-line); }
.n-card-tools button:hover { background: var(--n-hover); color: var(--n-ink); }
.n-chip { font-size: 12px; border-radius: 4px; padding: 1px 6px; background: var(--n-hover); color: var(--n-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-chip.obs { background: rgb(253, 236, 200); color: rgb(64, 44, 27); }
.n-pill.small { font-size: 12px; padding: 0 7px 0 6px; }
.n-add { display: flex; align-items: center; gap: 6px; height: 40px; border: 1px solid rgba(55,53,47,.09); background: none; text-align: left; color: var(--col-count); font-size: 14px; padding: 0 10px; border-radius: 10px; font-family: inherit; }
.n-add:hover { background: var(--n-hover); }

/* Couleurs Notion */
.c-gray   { --col-bg: rgb(247, 247, 245); --col-pill: rgb(227, 226, 224); --col-text: rgb(50, 48, 44);   --col-dot: rgb(145, 145, 142); --col-count: rgba(55, 53, 47, .5); }
.c-purple { --col-bg: rgb(250, 247, 252); --col-pill: rgb(240, 231, 246); --col-text: rgb(144, 101, 176); --col-dot: rgb(154, 109, 215); --col-count: rgb(154, 109, 215); }
.c-yellow { --col-bg: rgb(252, 249, 242); --col-pill: rgb(251, 237, 206); --col-text: rgb(194, 138, 46);  --col-dot: rgb(203, 145, 47);  --col-count: rgb(203, 145, 47); }
.c-green  { --col-bg: rgb(246, 250, 247); --col-pill: rgb(219, 237, 219); --col-text: rgb(68, 131, 97);   --col-dot: rgb(68, 131, 97);   --col-count: rgb(68, 131, 97); }
.c-blue   { --col-bg: rgb(245, 249, 252); --col-pill: rgb(211, 229, 239); --col-text: rgb(51, 126, 169);  --col-dot: rgb(51, 126, 169);  --col-count: rgb(51, 126, 169); }

/* Tiroir (side peek) */
.scrim { position: fixed; inset: 0; background: rgba(15,15,15,.25); opacity: 0; pointer-events: none; transition: opacity .18s ease-in; z-index: 20; }
.scrim.open { transition: opacity .26s ease-out; }
.scrim.open { opacity: 1; pointer-events: auto; }
/* Side peek : pas de voile, le Kanban reste visible et cliquable (comme Notion). Seuls les templates (au centre) gardent le voile. */
.scrim.open:not(.center) { background: none; pointer-events: none; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: max(min(640px, 100vw), calc(100vw * 2 / 3)); background: #fff; z-index: 21;   /* Notion : 2/3 de l'écran */
  /* Animation façon Notion : entrée décélérée, sortie plus rapide */
  transform: translateX(100%); transition: transform .18s cubic-bezier(.4, 0, 1, 1); display: flex; flex-direction: column;
  box-shadow: rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px;
  overflow-y: auto; overscroll-behavior: contain;   /* un seul défilement pour toute la page */
}
.drawer:not(.open) { box-shadow: none; }
.drawer.open { transform: none; transition: transform .26s cubic-bezier(.16, 1, .3, 1); }
.peek-top { display: flex; align-items: center; gap: 4px; padding: 8px 12px; position: sticky; top: 0; z-index: 5; background: #fff; flex: none; }
.peek-top .spacer { flex: 1; }
.peek-banner { margin: 0 84px 6px; background: rgb(251, 243, 219); color: rgb(64, 44, 27); border-radius: 6px; padding: 7px 12px; font-size: 13px; }
.peek-banner[hidden] { display: none; }
.peek-head { padding: 4px 84px 8px; }   /* Notion : colonne de 76 px + 8 px avant le texte */
.peek-icon { font-size: 40px; line-height: 1; border: none; background: none; padding: 4px; border-radius: 6px; margin-left: -4px; }
.peek-icon:hover { background: var(--n-hover); }
.peek-title { display: block; width: 100%; border: none; outline: none; font: inherit; font-size: 32px; line-height: 38.4px; font-weight: 700; color: rgb(44,44,43); padding: 4px 0; background: transparent; }
.peek-title::placeholder { color: rgba(55,53,47,.2); }
.peek-props { position: relative; display: flex; flex-direction: column; font-size: 14px; line-height: 21px; color: rgb(44,44,43); margin: 8px 0 12px -6px; padding-bottom: 8px; }
.peek-props .psec { display: flex; flex-direction: column; gap: 4px; }
.peek-props .psec + .psec { margin-top: 20px; }
.peek-props .prow { position: relative; display: grid; grid-template-columns: 160px 1fr; column-gap: 8px; align-items: start; min-width: 0; }
.peek-props .prow > * { min-width: 0; }
/* Poignée ⋮⋮ à gauche de la propriété, visible au survol (comme Notion) */
.peek-props .p-grip { position: absolute; left: -20px; top: 5px; width: 18px; height: 24px; display: flex; align-items: center; justify-content: center; color: rgba(55,53,47,.35); border-radius: 4px; cursor: grab; opacity: 0; touch-action: none; }
.peek-props .prow:hover .p-grip, .peek-props .p-grip:focus-visible { opacity: 1; }
.peek-props .p-grip:hover { background: var(--n-hover); color: rgba(55,53,47,.6); }
.peek-props .prow.dragging { opacity: .4; }
body.prop-dragging, body.prop-dragging * { cursor: grabbing !important; user-select: none; }
.peek-props .p-drop-line { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(35,131,226,.43); pointer-events: none; z-index: 2; }
@media (hover: none) { .peek-props .p-grip { opacity: 1; } }
/* En-tête de section : nom + chevron (replier / déplier) */
.peek-props .psec-head { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px; border-radius: 6px; align-self: flex-start; }
.peek-props .psec-head:hover { background: var(--n-hover); }
.peek-props .psec-name { border: none; background: none; font: inherit; font-size: 13px; line-height: 19.5px; font-weight: 500; color: rgb(125,122,117); padding: 0; }
.peek-props .psec-toggle { border: none; background: none; color: rgb(173,169,163); padding: 0; display: inline-flex; }
.peek-props .psec-toggle svg { width: 14px; height: 14px; }
.peek-props .psec-rename { font: inherit; font-size: 13px; font-weight: 500; border: 1px solid #2383e2; box-shadow: 0 0 0 1px #2383e2; border-radius: 4px; padding: 0 4px; outline: none; color: rgb(44,44,43); }
.peek-props .psec-empty { color: rgb(161,158,153); font-size: 14px; line-height: 34px; padding: 0 6px; }
.peek-props .more-props, .peek-props .add-prop { align-self: flex-start; }
.more-props svg, .add-prop svg { width: 16px; height: 16px; color: rgb(173,169,163); flex: none; }
.peek-props .k { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 6px; border-radius: 6px; color: rgb(125,122,117); line-height: 20px; }
.peek-props .k > svg { width: 16px; height: 16px; margin: 0 1px; flex: none; color: rgb(142,139,134); }
.peek-props .val { justify-self: stretch; border: none; background: none; font: inherit; color: inherit; text-align: left; min-height: 34px; padding: 6px; border-radius: 4px; }
.peek-props .v { color: rgb(44,44,43); min-height: 34px; padding: 6px; }
.peek-props .k.custom { cursor: pointer; }
.peek-props .k.custom:hover { background: var(--n-hover); }
.peek-props .k .kname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Propriété alimentée par le storyboard : petite icône de lien après le nom */
.peek-props .k .k-synced { flex: none; display: inline-flex; margin-left: -2px; color: rgba(35,131,226,.8); }
.peek-props .k .k-synced svg { width: 12px; height: 12px; }
.peek-props .pv { border: none; outline: none; font: inherit; font-size: 14px; line-height: 21px; color: rgb(44,44,43); background: transparent; height: 34px; padding: 6px; border-radius: 4px; width: 100%; min-width: 0; }
.peek-props .pv::placeholder, .peek-props .empty { color: rgb(161,158,153); }
.peek-props .pv[type=date] { width: auto; justify-self: start; }
.peek-props .pv-check { min-height: 34px; padding: 0 6px; display: inline-flex; align-items: center; }
.peek-props .pv-check input { width: 16px; height: 16px; accent-color: #2383e2; }
.peek-props .val .pills { display: inline-flex; gap: 6px 8px; flex-wrap: wrap; vertical-align: top; }
/* Pastilles dans la page : 20 px de haut, 0 6 px, coins 4 px, graisse normale (comme Notion) */
.peek-props .n-pill { font-size: 14px; font-weight: 400; line-height: 20px; height: 20px; padding: 0 6px; }
.peek-props .n-pill:has(.dot) { padding: 0 8px 0 6px; border-radius: 10px; }
.peek-props .v.ro { color: rgb(44,44,43); padding: 6px; min-height: 34px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; cursor: default; }
.peek-props .v.ro[title] { color: rgba(55,53,47,.85); }
.peek-props .err { color: rgb(212, 76, 71); font-size: 13px; }
.peek-props .pv-wrap { display: flex; align-items: center; gap: 4px; min-width: 0; }
.peek-props .pv-open { display: inline-flex; color: rgba(55,53,47,.5); padding: 3px; border-radius: 4px; text-decoration: none; }
.peek-props .pv-open:hover { background: var(--n-hover); color: var(--n-ink); }
.peek-props a { color: inherit; }
.peek-props .val .pills a, .n-chip a { color: inherit; text-decoration: underline; text-decoration-color: rgba(55,53,47,.3); }
.more-props { border: none; background: none; color: rgb(161,158,153); font: inherit; font-size: 14px; line-height: 16.8px; height: 34px; padding: 0 8px 0 6px; border-radius: 6px; display: inline-flex; gap: 6px; align-items: center; }
.more-props:hover { background: var(--n-hover); }
.streak { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
.streak i { width: 10px; height: 10px; border-radius: 2px; background: rgba(55,53,47,.13); display: inline-block; }
.streak i.on { background: rgb(55,53,47); }
.streak i.cur { box-shadow: 0 0 0 1.5px rgba(55,53,47,.35); }
.streak i[data-streak-cell] { cursor: pointer; }
.streak i[data-streak-cell]:hover { transform: scale(1.15); }
.streak-chip { background: transparent !important; padding-left: 0 !important; }
.streak-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.streak-edit .every { color: rgba(55,53,47,.6); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.streak-edit .every input { width: 44px; font: inherit; font-size: 13px; padding: 1px 4px; border: 1px solid rgba(55,53,47,.16); border-radius: 4px; }
.vp-flabel { display: flex; align-items: center; gap: 6px; }
.n-pop { max-height: 70vh; overflow-y: auto; }
.add-prop { border: none; background: none; color: rgb(161,158,153); font: inherit; font-size: 14px; line-height: 16.8px; height: 34px; padding: 0 8px 0 6px; border-radius: 6px; display: inline-flex; gap: 6px; align-items: center; }
.add-prop:hover { background: var(--n-hover); color: rgba(55,53,47,.8); }
.n-pop input.pop-input { width: 100%; font: inherit; font-size: 14px; border: 1px solid rgba(55,53,47,.16); border-radius: 6px; padding: 5px 8px; outline: none; background: rgba(242,241,238,.6); }
.n-pop input.pop-input:focus { border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; }
.drawer .sb-root { flex: none; padding-top: 10px; }
/* Le storyboard garde sa typographie propre (Helvetica), même dans la page Kanban */
.sb-root { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: var(--ink); }
.drawer .sb-root .tb { top: 42px; }
.drawer .sb-root .sheet { min-height: 0; }
.drawer .sb-root section.experiments.spot { scroll-margin-top: 170px; }

/* Sélecteur d'icône (Emoji / Icons / Upload) */
.ip { position: fixed; z-index: 45; width: 408px; max-width: calc(100vw - 16px); background: #fff; border-radius: 10px; box-shadow: var(--n-shadow-pop, rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px); font-size: 14px; color: rgb(55,53,47);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif; }
.ip-tabs { display: flex; align-items: center; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid rgba(55,53,47,.09); }
.ip-tabs button { border: none; background: none; font: inherit; font-size: 14px; color: rgba(55,53,47,.65); padding: 6px 8px 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ip-tabs button.on { color: rgb(55,53,47); border-bottom-color: rgb(55,53,47); }
.ip-tabs button:hover { color: rgb(55,53,47); }
.ip-tabs .spacer { flex: 1; }
.ip-search { display: flex; gap: 6px; padding: 8px; align-items: center; }
.ip-search .field { flex: 1; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(55,53,47,.16); border-radius: 6px; padding: 4px 8px; background: rgba(242,241,238,.6); color: rgba(55,53,47,.45); }
.ip-search .field:focus-within { border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; }
.ip-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: rgb(55,53,47); }
.ip-sq { width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(55,53,47,.16); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: rgba(55,53,47,.65); padding: 0; flex: none; }
.ip-sq:hover { background: rgba(55,53,47,.06); }
.ip-sq .dot { width: 12px; height: 12px; border-radius: 50%; }
.ip-body { max-height: 300px; overflow-y: auto; padding: 0 8px 10px; }
.ip-label { font-size: 12px; color: rgba(55,53,47,.65); font-weight: 500; padding: 8px 4px 4px; }
.ip-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; }
.ip-grid button { border: none; background: none; padding: 0; height: 32px; border-radius: 6px; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ip-grid button:hover { background: rgba(55,53,47,.08); }
.ip-grid svg.nicon { width: 22px; height: 22px; }
.ip-colors { position: absolute; right: 8px; top: 86px; display: flex; gap: 4px; padding: 6px; background: #fff; border-radius: 8px; box-shadow: rgba(15,15,15,.1) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 8px; z-index: 2; }
.ip-colors[hidden] { display: none; }
.ip-colors button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; padding: 0; box-shadow: 0 0 0 1px rgba(55,53,47,.16); }
.ip-colors button.on { box-shadow: 0 0 0 2px #2383e2; }
.ip-upload { padding: 16px 8px 18px; text-align: center; }
.ip-upload label { display: inline-block; padding: 7px 14px; border-radius: 6px; border: 1px solid rgba(55,53,47,.16); cursor: pointer; }
.ip-upload label:hover { background: rgba(55,53,47,.06); }
.ip-upload p { color: rgba(55,53,47,.5); font-size: 12px; margin: 8px 0 0; }
svg.nicon { display: inline-block; vertical-align: middle; }
img.nicon { display: inline-block; vertical-align: middle; object-fit: cover; border-radius: 3px; }
.n-card .t .ico svg.nicon, .n-card .t .ico img.nicon { width: 19.2px; height: 19.2px; }
.n-card .t .ico .emoji { font-size: 17px; line-height: 19.2px; width: 19.2px; height: 19.2px; display: inline-flex; align-items: center; justify-content: center; }
.peek-icon svg.nicon, .peek-icon img.nicon { width: 72px; height: 72px; }
.peek-icon .add-icon { font-size: 14px; color: rgba(55,53,47,.45); display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; }
.tm-ico svg.nicon, .tm-ico img.nicon { width: 18px; height: 18px; }

/* Menu des templates (New ▾) */
.n-menu.tm { width: 330px; padding: 6px 6px 6px; }
.tm-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px; color: rgba(55,53,47,.65); font-size: 14px; font-weight: 500; }
.tm-help { width: 20px; height: 20px; border-radius: 50%; border: 1.3px solid rgba(55,53,47,.45); background: none; color: rgba(55,53,47,.55); font-size: 12px; font-weight: 600; padding: 0; line-height: 17px; cursor: help; }
.tm-row { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 4px; min-height: 32px; border-radius: 6px; cursor: pointer; }
.tm-row:hover { background: rgba(55,53,47,.06); }
.tm-row .grip { display: inline-flex; color: rgba(55,53,47,.35); visibility: hidden; cursor: grab; }
.tm-row:hover .grip { visibility: visible; }
.tm-row .grip.none { visibility: hidden !important; }
.tm-ico { display: inline-flex; width: 20px; justify-content: center; font-size: 17px; color: rgba(55,53,47,.85); }
.tm-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-row .default { font-size: 12px; color: rgba(55,53,47,.5); background: rgba(55,53,47,.06); border-radius: 4px; padding: 1px 6px; }
.tm-row .more { border: none; background: none; color: rgba(55,53,47,.45); padding: 3px; border-radius: 4px; display: inline-flex; }
.tm-row .more:hover { background: rgba(55,53,47,.12); color: rgb(55,53,47); }
.tm-row.new-tpl { color: rgba(55,53,47,.65); gap: 10px; padding-left: 8px; }
.tm-row.drop-before { box-shadow: inset 0 2px 0 #2383e2; }
.tm-sep { border-top: 1px solid rgba(55,53,47,.09); margin: 5px 2px; }
.n-pop .row .val { margin-left: auto; color: rgba(55,53,47,.45); font-size: 13px; }

/* Édition d'un template : fenêtre centrée (center peek) */
.drawer.center {
  top: 72px; bottom: 72px; left: 50%; right: auto; width: min(1150px, calc(100vw - 48px));
  border-radius: 12px; overflow: hidden; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.drawer.center.open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.drawer.center.full { top: 0; bottom: 0; width: 100vw; border-radius: 0; }
.scrim.center { background: rgba(15,15,15,.45); }
.drawer.center .peek-banner {
  margin: 0; border-radius: 0; text-align: center; padding: 10px 16px; font-size: 14px;
  background: rgb(251, 243, 219); color: rgb(203, 145, 47); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.peek-banner b { font-weight: 500; color: rgb(203, 145, 47); border-bottom: 1px solid rgba(203,145,47,.4); display: inline-flex; align-items: center; gap: 4px; }
.peek-banner .repeat-btn { border: 1px solid rgba(203,145,47,.45); background: none; color: rgb(203, 145, 47); border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; }
.peek-banner .repeat-btn:hover { background: rgba(203,145,47,.08); }
.drawer.center .peek-head { padding: 34px min(12vw, 150px) 10px; }

/* Sous-groupes : outils au survol et « New group » */
.n-group .n-group-tools { display: inline-flex; gap: 1px; visibility: hidden; }
.n-group:hover .n-group-tools { visibility: visible; }
.n-group .n-group-tools .n-icon-btn { padding: 3px; }
.n-newgroup { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; color: rgba(55,53,47,.45); font-size: 14px; padding: 14px 6px 8px; cursor: pointer; border-radius: 6px; width: max-content; }
.n-newgroup:hover { color: rgba(55,53,47,.8); }
.n-newgroup input { font: inherit; border: 1px solid #2383e2; box-shadow: 0 0 0 1px #2383e2; border-radius: 4px; padding: 3px 6px; outline: none; width: 200px; }
.c-default { --col-bg: rgb(249, 249, 248); --col-pill: rgba(227, 226, 224, .5); --col-text: rgb(50, 48, 44); --col-dot: rgb(145, 145, 142); --col-count: rgba(55, 53, 47, .5); }
.sw { width: 18px; height: 18px; border-radius: 4px; background: var(--col-pill); box-shadow: inset 0 0 0 1px rgba(55,53,47,.12); flex: none; }
button.n-agg { border: none; background: none; font: inherit; padding: 1px 5px; margin-left: -3px; border-radius: 4px; cursor: pointer; }
button.n-agg:hover { background: rgba(55,53,47,.08); }
/* Contrôle WIP / Aging : trait fin avec le texte au centre, rouge si dépassement */
.n-check { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(55,53,47,.45); letter-spacing: .02em; margin: 0 2px; }
.n-check::before, .n-check::after { content: ''; flex: 1; border-top: 1px solid rgba(55,53,47,.16); }
.n-check.over::before, .n-check.over::after { border-top-color: rgba(212,76,71,.45); }
.n-check .bad { color: rgb(212, 76, 71); font-weight: 600; }
.n-chip.aging { background: rgba(212,76,71,.1); color: rgb(212, 76, 71); }
.c-orange { --col-bg: rgb(252, 247, 242); --col-pill: rgb(250, 222, 201); --col-text: rgb(217, 115, 13); --col-dot: rgb(217, 115, 13); --col-count: rgb(217, 115, 13); }
.c-pink   { --col-bg: rgb(252, 246, 249); --col-pill: rgb(245, 224, 233); --col-text: rgb(193, 76, 138); --col-dot: rgb(193, 76, 138); --col-count: rgb(193, 76, 138); }
.c-red    { --col-bg: rgb(253, 246, 245); --col-pill: rgb(255, 226, 221); --col-text: rgb(212, 76, 71);  --col-dot: rgb(212, 76, 71);  --col-count: rgb(212, 76, 71); }
.c-brown  { --col-bg: rgb(250, 247, 245); --col-pill: rgb(238, 224, 218); --col-text: rgb(159, 107, 83); --col-dot: rgb(159, 107, 83); --col-count: rgb(159, 107, 83); }

.emoji-pop { position: absolute; z-index: 31; display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; padding: 8px; background: #fff; border-radius: 10px;
  box-shadow: rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px; }
.emoji-pop[hidden] { display: none; }
.emoji-pop button { border: none; background: none; font-size: 20px; padding: 3px; border-radius: 6px; }
.emoji-pop button:hover { background: var(--n-hover); }

@media (max-width: 700px) {
  .n-page { padding: 0 24px 30px; }
  .n-board-wrap { margin: 0 -24px; padding: 0 24px 16px; }
  .vp { width: 100vw; right: 0 !important; }
  .peek-head, .peek-banner { padding-left: 16px; padding-right: 16px; margin-left: 0; margin-right: 0; }
  .drawer { width: 100vw; }
}

.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: #222; color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.show { opacity: 1; pointer-events: auto; }
.toast-act { margin-left: 10px; border: none; background: rgba(255,255,255,.16); color: #fff; border-radius: 4px; padding: 3px 8px; font: inherit; font-weight: 600; }
.toast-act:hover { background: rgba(255,255,255,.28); }
.backup-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: rgb(64, 44, 27); background: rgb(251, 243, 219); border-radius: 6px; padding: 6px 10px; margin: 12px 0 0; }
.backup-banner[hidden] { display: none; }
.backup-banner button { border: 1px solid rgba(203,145,47,.5); background: #fff; color: rgb(64,44,27); border-radius: 6px; padding: 2px 8px; font: inherit; font-size: 13px; }
.backup-banner button:hover { background: rgba(203,145,47,.08); }

@media (max-width: 900px) and (min-width: 521px) {
  .body { grid-template-columns: 1fr 1fr; }
  .col.right { grid-column: 1 / -1; grid-row: auto; border-left: none; border-top: 3px solid var(--line); margin-top: 10px; padding: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; }
  .right > section.obstacles { border-top: none; border-left: 3px solid var(--line); margin-left: 0; padding: 6px 16px; }
}
@media (max-width: 760px) {
  .head { grid-template-columns: minmax(0, 1fr); }
  .head > div + div { border-left: none; border-top: 3px solid var(--line); margin: 0; }
}
@media (max-width: 520px) {
  .body { grid-template-columns: 1fr; grid-template-rows: none; }
  .col.cond, .col.right { grid-row: auto; display: flex; flex-direction: column; }
  .col + .col { border-left: none; border-top: 3px solid var(--line); padding-top: 14px; }
  .right > section.obstacles { margin-left: 0; }
  .metric.pattern textarea { min-height: 80px; }
  .frame { margin: 0 4px 4px; padding: 5px; }
  .sheet { padding: 0 6px 10px; }
}

/* Runs récurrents et bouton de propriété */
.n-chip.late { background: rgba(212,76,71,.1); color: rgb(212, 76, 71); }
.n-chip.today { background: rgba(35,131,226,.1); color: rgb(35, 131, 226); }
.n-btn-prop { border: 1px solid rgba(55,53,47,.16); background: #fff; border-radius: 6px; padding: 1px 8px; font: inherit; font-size: 12px; color: rgb(55,53,47); cursor: pointer; }
.n-btn-prop:hover { background: rgba(55,53,47,.06); }
.peek-props .n-btn-prop { font-size: 14px; padding: 3px 10px; }
.peek-props .pv-unit { color: rgba(55,53,47,.5); font-size: 13px; white-space: nowrap; }

/* Suivi des indicateurs */
.metrics { margin: 14px 10px 24px; }
.metrics .mt-title { font-size: 19px; margin: 6px 0 10px; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.mt-card { border: 1px solid #d5d8de; border-radius: 8px; padding: 12px 14px; background: #fff; min-width: 0; position: relative; }
.mt-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mt-head h3 { margin: 0; font-size: 15px; }
.mt-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.mt-cfg { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.mt-cfg input { width: 64px; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid #c3c7ce; border-radius: 4px; margin-left: 3px; color: var(--ink); }
.mt-better { font-size: 12px; border: 1px solid #c3c7ce; background: #fff; border-radius: 4px; padding: 3px 7px; color: var(--ink); }
.mt-chart { position: relative; min-height: 60px; }
.mt-chart svg { display: block; max-width: 100%; overflow: visible; }
.mt-empty { color: var(--muted); font-size: 13px; padding: 18px 4px; }
.mt-grid-line { stroke: #eceef1; stroke-width: 1; }
.mt-axis { fill: #8a8f97; font-size: 11px; }
.mt-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mt-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.mt-target { stroke: #6b6f76; stroke-width: 1.5; stroke-dasharray: 5 4; }
.mt-target-label { fill: #4a4e55; font-size: 11px; font-weight: 600; }
.mt-last { fill: var(--ink); font-size: 12px; font-weight: 700; }
.mt-cross { stroke: #c3c7ce; stroke-width: 1; }
.mt-tip { position: absolute; background: #fff; border: 1px solid #d5d8de; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.1); padding: 6px 9px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; min-width: 140px; }
.mt-tip[hidden] { display: none; }
.mt-tip span { color: var(--muted); }
.mt-table { margin-top: 8px; font-size: 13px; }
.mt-table summary { cursor: pointer; color: var(--muted); padding: 3px 0; }
.mt-table table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.mt-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 3px 4px; }
.mt-table td { padding: 2px 4px; border-top: 1px solid #f0f1f3; }
.mt-table input { width: 100%; font: inherit; font-size: 13px; border: 1px solid transparent; border-radius: 4px; padding: 3px 4px; background: transparent; min-width: 0; }
.mt-table input:hover, .mt-table input:focus { border-color: #c3c7ce; outline: none; background: #fff; }
.mt-table .mt-new input { border-color: #e1e3e7; }
.mt-add { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; width: 26px; height: 26px; font-size: 15px; line-height: 1; }
.mt-cfg input[data-mk="unit"] { width: 110px; }

/* Accessibilité : focus visible, moins d'animations sur demande */
:focus-visible { outline: 2px solid #2383e2; outline-offset: 2px; }
.n-card:focus-visible { outline-offset: 1px; }
.n-pop .row:focus-visible, .n-menu .row:focus-visible, .tm-row:focus-visible, .vp-row:focus-visible { outline: none; background: rgba(35,131,226,.1); box-shadow: inset 0 0 0 2px rgba(35,131,226,.5); }
.n-card:focus-within .n-card-tools { display: flex; }
.n-group:focus-within .n-group-tools, .n-head:focus-within .n-head-tools { visibility: visible; }
textarea.free::placeholder, .metric textarea::placeholder, .head input::placeholder, .obs input::placeholder, .exp textarea::placeholder { color: #8a8f97; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}
/* Titre du Kanban : pas de contour de focus pendant la saisie, comme dans Notion */
.n-title:focus, .n-title:focus-visible, .peek-title:focus, .peek-title:focus-visible { outline: none; }

/* Sélecteur d'options (comme Notion) */
.op { position: fixed; z-index: 44; background: #fff; border-radius: 10px; box-shadow: rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px; font-size: 14px; color: rgb(55,53,47); overflow: hidden;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif; }
.op-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: rgb(247,247,245); border-bottom: 1px solid rgba(55,53,47,.09); min-height: 42px; }
.op-sel { display: inline-flex; align-items: center; }
.op-sel .n-pill { padding-right: 2px; }
.op-x { border: none; background: none; padding: 0 2px; display: inline-flex; color: inherit; opacity: .6; cursor: pointer; }
.op-x:hover { opacity: 1; }
.op-x svg.i { width: 12px; height: 12px; }
.op-input { flex: 1; min-width: 80px; border: none; outline: none; background: transparent; font: inherit; color: inherit; padding: 2px 0; }
.op-label { font-size: 12px; color: rgba(55,53,47,.65); font-weight: 500; padding: 10px 12px 4px; }
.op-list { max-height: 300px; overflow-y: auto; padding: 0 6px 6px; }
.op-row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 6px; border-radius: 6px; cursor: pointer; }
.op-row:hover, .op-row:focus-visible { background: rgba(55,53,47,.06); outline: none; }
.op-row .grip { display: inline-flex; color: rgba(55,53,47,.35); cursor: grab; }
.op-row .spacer { flex: 1; }
.op-more { border: none; background: none; color: rgba(55,53,47,.45); padding: 3px; border-radius: 4px; display: inline-flex; visibility: hidden; }
.op-row:hover .op-more, .op-row:focus-within .op-more { visibility: visible; }
.op-more:hover { background: rgba(55,53,47,.12); color: rgb(55,53,47); }
.op-row.drop-before { box-shadow: inset 0 2px 0 #2383e2; }
.op-create-lbl { color: rgba(55,53,47,.65); }
/* Éditeur du Challenge et renommage sur place */
.peek-props .k-rename { font: inherit; font-size: 14px; border: 1px solid #2383e2; box-shadow: 0 0 0 1px #2383e2; border-radius: 4px; padding: 1px 4px; outline: none; width: 100%; min-width: 0; color: rgb(55,53,47); }

/* Panneau « Modifier la propriété » */
.pe { position: fixed; z-index: 43; width: 320px; max-height: min(640px, calc(100vh - 16px)); overflow-y: auto; background: #fff; border-radius: 10px; padding: 8px 8px 10px;
  box-shadow: rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px; font-size: 14px; color: rgb(55,53,47);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif; }
.pe-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; color: rgba(55,53,47,.65); font-weight: 500; }
.pe-name { display: flex; align-items: center; gap: 6px; margin: 0 4px 6px; padding: 4px 8px; border: 1px solid rgba(55,53,47,.16); border-radius: 6px; background: rgba(242,241,238,.6); }
.pe-name input { flex: 1; border: none; outline: none; background: transparent; font: inherit; color: inherit; min-width: 0; }
.pe-name:focus-within { border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; }
.pe-row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 6px; border-radius: 6px; cursor: pointer; }
.pe-row:hover { background: rgba(55,53,47,.06); }
.pe-row.static { cursor: default; }
.pe-row.static:hover { background: none; }
.pe-row.danger { color: rgb(212, 76, 71); }
.pe-lbl { flex: 1; min-width: 0; }
.pe-val { color: rgba(55,53,47,.6); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pe-row select, .pe-row input { font: inherit; font-size: 13px; color: rgba(55,53,47,.8); border: 1px solid rgba(55,53,47,.16); border-radius: 5px; padding: 3px 6px; background: #fff; max-width: 150px; }
.pe-row .chev { display: inline-flex; color: rgba(55,53,47,.45); }
.pe-sep { border-top: 1px solid rgba(55,53,47,.09); margin: 6px 2px; }
.pe-sec { font-size: 12px; color: rgba(55,53,47,.65); font-weight: 500; padding: 10px 6px 4px; }
.pe-note { font-size: 12px; color: rgba(55,53,47,.6); padding: 4px 6px 6px; line-height: 1.45; }
.pe-link { border: none; background: none; color: #2383e2; font: inherit; font-size: 13px; padding: 4px 6px; cursor: pointer; }
.pe-add { width: calc(100% - 12px); margin: 2px 6px 4px; font: inherit; font-size: 13px; border: 1px solid rgba(55,53,47,.16); border-radius: 6px; padding: 5px 8px; outline: none; }
.pe-add:focus { border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; }
.pe-opts { min-height: 8px; }
.pe-opt { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 6px; border-radius: 6px; }
.pe-opt:hover { background: rgba(55,53,47,.06); }
.pe-opt .grip { display: inline-flex; color: rgba(55,53,47,.35); cursor: grab; }
.pe-opt .spacer { flex: 1; }
.pe-opt:hover .op-more { visibility: visible; }
.pe-opt.drop-before { box-shadow: inset 0 2px 0 #2383e2; }
.pe-formula { width: calc(100% - 12px); margin: 0 6px; min-height: 76px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; border: 1px solid rgba(55,53,47,.16); border-radius: 6px; padding: 6px 8px; outline: none; }
.pe-formula:focus { border-color: #2383e2; box-shadow: 0 0 0 1px #2383e2; }
.pe-result { font-size: 12.5px; color: rgba(55,53,47,.7); padding: 6px 6px 2px; }
.pe-result .err { color: rgb(212,76,71); }
.pe-help { font-size: 12px; padding: 4px 6px; color: rgba(55,53,47,.7); }
.pe-help summary { cursor: pointer; }
.pe-help code { display: inline-block; background: rgba(55,53,47,.06); border-radius: 3px; padding: 0 4px; margin: 2px 1px; font-size: 11.5px; }
/* Nombres en barre ou anneau, dates avec fin */
.num-vis { display: inline-flex; align-items: center; gap: 6px; }
.num-bar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: rgba(55,53,47,.12); overflow: hidden; }
.num-bar span { display: block; height: 100%; border-radius: 3px; }
.num-ring { width: 16px; height: 16px; }
.peek-props .pv-date { width: auto; }
.peek-props input[type=number].pv { width: 110px; flex: none; }
.peek-props .pv-wrap .pv-unit { margin-left: 2px; }

/* Zone d'édition flottante d'une propriété texte (comme Notion) */
.pv-pop { position: fixed; z-index: 60; background: #fff; border-radius: 6px; box-shadow: rgba(15,15,15,.05) 0 0 0 1px, rgba(15,15,15,.1) 0 3px 6px, rgba(15,15,15,.2) 0 9px 24px; }
.pv-pop textarea { display: block; width: 100%; min-height: 34px; max-height: 60vh; resize: none; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; line-height: 21px; color: rgb(44,44,43); padding: 6px 6px 7px; overflow-y: auto; }
.pv-pop textarea::placeholder { color: rgb(161,158,153); }
/* Fenêtre centrée des templates : même marge que son en-tête */
.drawer.center .tb, .drawer.center .tl, .drawer.center .kata-hist { --tl-pad: min(12vw, 150px); }
/* Challenge : les trois blancs de la phrase dans la zone flottante, sans bordure (comme Notion) */
.ch-pop { padding: 2px 0; font-size: 14px; line-height: 21px; color: rgb(44,44,43); }
.ch-line { display: flex; align-items: baseline; gap: 8px; padding: 0 6px; }
.ch-line + .ch-line { border-top: 1px solid rgba(55,53,47,.06); }
.ch-k { flex: none; width: 48px; color: rgba(55,53,47,.5); }
.ch-line input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; color: inherit; padding: 6px 0; }
.ch-line input::placeholder { color: rgb(161,158,153); }
.pv-pop input:focus-visible, .pv-pop textarea:focus-visible { outline: none; }