/* vignett.app — app chrome styles (Dark Room). */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* thin scrollbars */
.scroll { scrollbar-width: thin; scrollbar-color: var(--border-up) transparent; }
.scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-thumb { background: var(--border-up); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

button { font-family: inherit; cursor: pointer; }
[data-action], [data-role], [role="button"] { cursor: pointer; }
.mono { font-family: var(--mono); }
.flex1 { flex: 1; }
.divider-v { width: 1px; align-self: stretch; background: var(--border); margin: 8px 0; }

/* ─────────── Logo ─────────── */
.lm-mark {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--mark-bg, #0f0d0a);
  border-radius: var(--mark-r, 8px);
}
:root.light .lm-mark { background: #221c16; border: 1px solid rgba(244,237,224,.22); }
.lm-mark .l { font-family: var(--mono); font-weight: 700; color: #f4ede0; line-height: 1; transform: translateX(-6%); letter-spacing: -1px; }
.lm-mark .tag { position: absolute; background: var(--accent); }
.lm-lockup { display: inline-flex; align-items: center; gap: 12px; }
.lm-lockup .word { font-weight: 700; font-size: 22px; letter-spacing: -.6px; line-height: 1; color: var(--ink); }

/* ─────────── Buttons ─────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--btn-h); padding: 0 14px; border-radius: var(--r-ctl);
  background: var(--panel-up); color: var(--ink);
  border: 1px solid var(--border-up);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background .14s, border-color .14s, box-shadow .14s, transform .05s;
}
.btn:hover { background: color-mix(in srgb, var(--panel-up) 86%, var(--ink)); }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--glow); }
.btn.sm { height: var(--btn-sm); padding: 0 10px; font-size: 12px; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--panel-up); }
.btn.primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,.15) inset, 0 6px 14px -8px var(--accent);
}
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 90%, #fff); }
.btn.danger { color: #f4a08a; }
.btn svg { width: 14px; height: 14px; opacity: .85; }
.btn .ic { display: inline-flex; }

/* icon-only control (toolbar) */
.ictl {
  width: var(--ctl); height: var(--ctl); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-ctl); background: var(--panel-up);
  border: 1px solid var(--border-up); color: var(--ink);
  transition: background .14s, box-shadow .14s;
}
.ictl:hover { background: color-mix(in srgb, var(--panel-up) 84%, var(--ink)); }
.ictl.on { background: var(--accent); color: var(--accent-ink); }
.ictl.on:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.ictl:focus-visible { outline: none; box-shadow: var(--glow); }
.ictl svg { width: 15px; height: 15px; }

/* kbd */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-kbd);
  font-family: var(--mono); font-size: 10px; color: var(--ink-muted);
  border: 1px solid var(--border-up); background: var(--panel-up);
}

/* segmented */
.seg { display: inline-flex; height: var(--ctl); border-radius: var(--r-ctl); padding: 2px; background: var(--panel-up); border: 1px solid var(--border-up); }
.seg button {
  border: 0; background: transparent; color: var(--muted);
  padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; transition: background .14s, color .14s;
}
.seg button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.seg.lg { height: 38px; }
.seg.lg button { padding: 0 16px; font-size: 13px; }
.seg.multi { height: auto; flex-wrap: wrap; gap: 2px; padding: 3px; }
.seg.multi button { height: 32px; }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--chip-h); padding: 0 9px; border-radius: var(--r-chip);
  background: var(--panel-up); color: var(--ink); border: 1px solid var(--border-up);
  font-size: 13px; font-weight: 500; letter-spacing: -.1px; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.chip:hover { border-color: var(--accent); }
.chip.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.chip.dim { background: transparent; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: var(--glow); }
.chip.compl { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.chip.compl.on { background: var(--accent); color: var(--accent-ink); }
.chip .x { opacity: .5; font-size: 14px; line-height: 1; }
.chip .x:hover { opacity: 1; }

/* fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.field-lbl b { font-weight: 600; }
.field-lbl .ctr { font-family: var(--mono); color: var(--faint); text-transform: none; letter-spacing: 0; }
.field-lbl .ctr.over { color: var(--warn); }
.well {
  min-height: var(--field-h); border: 1.25px solid var(--border-up); border-radius: var(--r-ctl);
  padding: 10px 12px; background: var(--field); color: var(--ink);
  font-size: 13px; line-height: 1.5; width: 100%; resize: none; font-family: var(--sans);
  transition: border-color .14s, box-shadow .14s;
}
.well::placeholder { color: var(--muted); }
.well.mono { font-family: var(--mono); }
.well:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
.well.accent { border-color: var(--accent); }
textarea.well { min-height: 64px; }
.field-hint { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .3px; }

.eyebrow { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.eyebrow.mono { font-family: var(--mono); font-size: 10px; letter-spacing: 1.2px; font-weight: 400; }

/* ─────────── Toolbar ─────────── */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--toolbar-h); padding: 0 16px; flex: 0 0 auto;
  background: var(--panel); border-bottom: 1px solid var(--border); font-size: 13px; gap: 10px;
}
.toolbar .cluster { display: flex; align-items: center; gap: 10px; min-width: 0; }
.toolbar .cluster:first-child { overflow: hidden; }
.toolbar .cluster:first-child > .sess, .toolbar .cluster:first-child > .meta, .toolbar .cluster:first-child > .state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolbar .cluster:last-child { flex: 0 0 auto; }
.toolbar .vrule { width: 1px; height: 22px; background: var(--border); }
.toolbar .sess { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
.toolbar .sess b { color: var(--ink); font-weight: 600; }
.toolbar .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.toolbar .state { font-family: var(--mono); font-size: 11px; color: var(--accent); }

/* ── Compact display mode ── slim toolbar (≈25px content height, 1px 16px padding) */
html.compact .toolbar {
  --ctl: 22px;
  height: auto; min-height: 0; padding: 1px 16px; gap: 8px;
  font-size: 12px;
}
html.compact .toolbar .cluster { gap: 8px; }
html.compact .toolbar .vrule { height: 16px; }
html.compact .toolbar .sess { font-size: 11px; }
html.compact .toolbar .meta { font-size: 10.5px; }
html.compact .toolbar .ictl svg { width: 13px; height: 13px; }
html.compact .toolbar .seg button { padding: 0 9px; font-size: 11px; }
html.compact .toolbar .cmdk,
html.compact .toolbar .warn-badge { height: 22px; padding: 0 8px; font-size: 11px; }
html.compact .toolbar .lm-lockup { gap: 6px; }
html.compact .toolbar .lm-mark { width: 18px !important; height: 18px !important; --mark-r: 4px !important; }
html.compact .toolbar .lm-mark .l { font-size: 10px !important; }
html.compact .toolbar .lm-lockup .word { font-size: 14px !important; }

/* gallery viewbar → 24.8px content height in compact */
html.compact .viewbar { --ctl: 22px; gap: 12px; font-size: 12px; }
html.compact .viewbar .ictl { width: 22px; height: 22px; }
html.compact .viewbar .ictl svg { width: 13px; height: 13px; }
html.compact .viewbar .btn.sm { height: 22px; padding: 0 8px; }
html.compact .viewbar .btn.sm svg { width: 12px; height: 12px; }

.warn-badge {
  display: inline-flex; align-items: center; gap: 6px; height: var(--ctl); padding: 0 10px;
  border-radius: var(--r-ctl); background: var(--warn-soft); color: var(--warn);
  border: 1px solid var(--warn-border); font-size: 12px;
}
.warn-badge b { font-weight: 600; }
.warn-badge svg { width: 13px; height: 13px; }
.cmdk { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl); padding: 0 10px; border-radius: var(--r-ctl); background: var(--panel-up); border: 1px solid var(--border-up); font-size: 12px; color: var(--ink-muted); }
.cmdk svg { width: 12px; height: 12px; }

/* ─────────── Composer ─────────── */
.composer { padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
html.compact .composer { padding: 2px; }
.legend-line { padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.5; }
.legend-line .tagname { font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-right: 2px; }
.legend-line .sep { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.legend-line .vsep { width: 1px; height: 16px; background: var(--border); margin: 0 6px; }
html.compact .legend-line { padding: 5px; margin: 3px; }

/* ─────────── Body grid ─────────── */
.body { flex: 1; min-height: 0; display: grid; }
.body > * { min-width: 0; min-height: 0; }

/* ─────────── Gallery ─────────── */
.gallery { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100%; background: var(--bg); }
.viewbar { display: flex; align-items: center; gap: 14px; padding: 1px 16px; border-bottom: 1px solid var(--border); background: var(--panel); font-size: 13px; overflow-x: auto; scrollbar-width: none; }
.viewbar::-webkit-scrollbar { display: none; }
.viewtab { color: var(--muted); cursor: pointer; }
.viewtab.on { color: var(--ink); font-weight: 600; }
.filter { display: inline-flex; align-items: center; height: var(--chip-h); padding: 0 10px; border-radius: var(--r-chip); font-size: 12px; font-weight: 500; background: var(--panel-up); color: var(--ink-muted); border: 1px solid var(--border-up); cursor: pointer; }
.filter.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-weight: 600; }

.grid { flex: 1; padding: 14px; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; align-content: start; }

/* ─────────── Detail view (row list) ─────────── */
.detail { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
html.compact .detail { padding: 0; }
.lrows { display: flex; flex-direction: column; gap: 1px; }
.lrow { display: grid; grid-template-columns: calc(var(--lrow-thumb, 130px) * 1.5 + 8px) minmax(0, 1fr) auto; align-items: start; gap: 0; min-height: var(--lrow-thumb, 130px); border: 1.5px solid var(--border); border-radius: var(--r-soft); background: var(--panel); overflow: hidden; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.lrow:hover { border-color: var(--border-up); }
.lrow.sel { background: var(--accent-soft); border-color: var(--accent); }
.lrow.focus { border-style: dashed; border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.lrow-thumb { position: relative; overflow: hidden; width: calc(var(--lrow-thumb, 130px) * 1.5); height: var(--lrow-thumb, 130px); margin: 4px; border-radius: 6px; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background-color: var(--panel-mute) !important; }
.lrow-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 18px; min-width: 0; min-height: calc(var(--lrow-thumb, 130px) + 8px); }
.lrow-fn { font-family: var(--mono); font-size: calc(9px + (var(--lrow-thumb, 150px) - 60px) * 0.03); font-weight: 600; color: var(--accent); letter-spacing: .2px; }
.lrow-title { font-size: calc(12px + (var(--lrow-thumb, 150px) - 60px) * 0.045); font-weight: 600; letter-spacing: -.2px; color: var(--ink); text-wrap: pretty; }
.lrow-meta { font-size: calc(10px + (var(--lrow-thumb, 150px) - 60px) * 0.028); color: var(--ink-muted); line-height: 1.5; text-wrap: pretty; }
.lrow-aside { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 18px; align-self: stretch; }
.lrow-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn-border); }
.lrow-dot.on { background: #3aa856; }
.lrow-cb { width: 22px; height: 22px; border-radius: 6px; background: var(--field); border: 1.5px solid var(--border-up); color: var(--accent-ink); font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.lrow-cb.on { background: var(--accent); border-color: var(--accent); }

.thumb { position: relative; aspect-ratio: 3/2; border-radius: var(--r-chip); overflow: hidden; cursor: pointer; outline: 1px solid var(--border); transition: outline .12s, box-shadow .12s; }
.tcard { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.tcard .tmeta { display: flex; align-items: center; gap: 6px; padding: 0 2px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.tcard .tmeta .fn { color: var(--ink-muted); letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .tmeta .cb { position: static; width: 15px; height: 15px; border-radius: 4px; background: var(--field); border: 1px solid var(--border-up); color: var(--ink); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tcard.sel .tmeta .cb { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tcard .tmeta .capdot { color: var(--faint); letter-spacing: .5px; }
.tcard .tmeta .capdot.on { color: var(--accent); }
.tcard .tmeta .star { color: var(--accent); font-size: 11px; }
.tcard.simple .tmeta { justify-content: space-between; font-size: 11px; padding: 0 2px 2px; }
.thumb .hatch { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--thumb-ovl) 0 2px, transparent 2px 6px); }
.thumb.sel { outline: 2.5px solid var(--accent); }
.thumb.focus { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: var(--glow); }
.thumb .cb { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; border-radius: 4px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-family: var(--mono); line-height: 1; }
.thumb.sel .cb { background: var(--accent); border-color: var(--accent); }
.thumb.simple .cb { width: 26px; height: 26px; border-radius: 7px; font-size: 15px; top: 8px; left: 8px; }
.thumb .cap { position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .5px; background: rgba(255,255,255,.18); color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.3); }
.thumb .cap.on { background: rgba(15,13,10,.78); color: var(--accent); border: none; }
.thumb .strip { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); font-family: var(--mono); font-size: 10px; color: #fff; display: flex; justify-content: space-between; }
.thumb .strip .star { color: var(--accent); }

.gfoot { display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--panel); font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ─────────── Modèles (popup) · champs ─────────── */


/* Modèles dropdown */
.tmpl-wrap { position: relative; display: inline-flex; }
.btn.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.tmpl-menu {
  position: fixed; z-index: 40; width: 320px; max-height: 60vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border-up); border-radius: var(--r-soft);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.tmpl-tabs { display: flex; gap: 4px; padding: 4px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.tmpl-tab { flex: 1; padding: 7px 10px; border-radius: var(--r-chip); border: 1px solid var(--border-up); background: var(--bg); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.tmpl-tab:hover { color: var(--ink); }
.tmpl-tab.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.tmpl-empty { padding: 20px 12px; text-align: center; font-size: 12px; color: var(--muted); }

/* Modèles inline edit form */
.tmpl-edit { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.tmpl-edit-head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 8px; border-bottom: 1px solid var(--border); }
.tmpl-edit-head span { font-size: 13px; font-weight: 600; color: var(--ink); }
.tmpl-back { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-up); background: var(--bg); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .12s, color .12s; }
.tmpl-back svg { width: 14px; height: 14px; }
.tmpl-back:hover { border-color: var(--accent); color: var(--accent); }
.tmpl-fld { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.tmpl-fld em { font-weight: 400; font-style: normal; color: var(--faint); }
.tmpl-fld .well { font-size: 13px; font-weight: 400; color: var(--ink); padding: 8px 10px; }
.tmpl-fld textarea.well { resize: vertical; min-height: 56px; }
.tmpl-edit-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.tmpl-list { display: flex; flex-direction: column; gap: 2px; }
.viewbar-count { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
html.compact .viewbar .viewbar-count { font-size: 11px; }
.tmpl-sport-fld { padding: 0 4px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.tmpl-item { display: flex; align-items: stretch; gap: 6px; width: 100%; padding: 4px; border-radius: var(--r-chip); transition: background .12s; }
.tmpl-item:hover { background: var(--panel-up); }
.tmpl-acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.tmpl-mini { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-up); background: var(--bg); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.tmpl-mini svg { width: 14px; height: 14px; }
.tmpl-mini:hover { border-color: var(--accent); color: var(--accent); }
.tmpl-mini.del:hover { border-color: #d2705a; color: #d2705a; background: color-mix(in srgb, #d2705a 10%, transparent); }
.tmpl-pick { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; align-items: flex-start; text-align: left; padding: 4px 8px; border: none; background: transparent; cursor: pointer; border-radius: 6px; }
.tmpl-pick:hover { background: var(--accent-soft); }
.tmpl-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tmpl-prev { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tmpl-save-row { margin-top: 4px; display: flex; align-items: stretch; gap: 6px; }
.tmpl-save-name { flex: 1 1 auto; min-width: 0; }
.tmpl-save-row .tmpl-save { margin-top: 0; flex: 0 0 auto; white-space: nowrap; }
.tmpl-save { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border: 1px dashed var(--border-up); border-radius: var(--r-chip); background: var(--bg); color: var(--ink-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color .12s, color .12s; }
.tmpl-save:hover { border-color: var(--accent); color: var(--accent); }
.tmpl-save svg { width: 14px; height: 14px; }
.col { display: flex; flex-direction: column; gap: 12px; }
html.compact .col { gap: 6px; }

.kw-add { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--border-up); border-radius: var(--r-ctl); background: var(--field); color: var(--ink); font-size: 13px; }
.kw-add input { flex: 1; border: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; outline: none; }
.kw-add svg { width: 13px; height: 13px; color: var(--muted); }
/* ─────────── Modèles de complément ─────────── */

.tmpl { padding: 8px 10px; border: 1px dashed var(--border-up); background: var(--bg); border-radius: var(--r-chip); font-family: var(--mono); font-size: 12px; color: var(--ink-muted); cursor: pointer; }
.tmpl:hover { border-color: var(--accent); color: var(--accent); }

/* ─────────── Modal / overlay shell ─────────── */
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.overlay.hidden { display: none; }
.modal { background: var(--panel); border: 1px solid var(--border-up); border-radius: var(--r-modal); box-shadow: var(--shadow); }

/* ─────────── Settings ─────────── */
.settings { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; }
.settings.hidden { display: none; }
.set-head { padding: 16px 22px; border-bottom: 1px solid var(--border); background: var(--panel); display: flex; align-items: center; gap: 14px; }
.set-grid { flex: 1; display: grid; grid-template-columns: 248px 1fr; min-height: 0; }
.set-nav { border-right: 1px solid var(--border); background: var(--panel); padding: 14px; overflow-y: auto; }
.set-group > .g-head { padding: 9px 11px; border-radius: 7px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; cursor: pointer; }
.set-group > .g-head .num { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.set-group.on > .g-head { background: var(--panel-up); border-color: var(--border-up); }
.set-kids { padding-left: 28px; display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.set-kids .kid { padding: 5px 9px; border-radius: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.set-kids .kid:hover { color: var(--ink); }
.set-kids .kid.on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.set-detail { padding: 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 32px; }
.set-detail h2 { font-size: 22px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.3px; }
.set-detail h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.set-detail p.sub { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; max-width: 600px; }
.note { padding: 12px 16px; border-radius: var(--r-ctl); background: var(--panel-up); border: 1px solid var(--border-up); font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); line-height: 1.6; }

.dir-table { border: 1px solid var(--border); border-radius: var(--r-soft); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.dir-row { display: grid; grid-template-columns: 1.1fr 1.1fr 1.2fr .9fr .7fr 36px; gap: 12px; align-items: center; }
.dir-head { background: var(--panel-up); padding: 10px 14px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.dir-body .dir-row { padding: 11px 14px; font-size: 13px; border-top: 1px solid var(--border); background: var(--panel); }
.dir-body .dir-row:hover { background: var(--panel-up); }

/* ─────────── Diaporama ─────────── */
.diapo { position: fixed; inset: 0; z-index: 55; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; }
.diapo.hidden { display: none; }
.diapo .capbar { padding: 14px 22px; border-bottom: 1px solid var(--border); background: var(--panel-mute); }
.diapo .captitle { font-size: 20px; font-weight: 700; line-height: 1.2; margin-bottom: 5px; letter-spacing: -.3px; }
.diapo .caption { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }
.diapo .hl { background: var(--accent-soft); color: var(--accent); padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.diapo .stage-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; }
.diapo .stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; }
.diapo .photo { width: 100%; height: 100%; border-radius: 0; border: none; position: relative; overflow: hidden; }
.diapo .navhint { position: absolute; left: 28px; right: 28px; bottom: 28px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }
.diapo .pill { padding: 4px 10px; border-radius: 14px; background: rgba(0,0,0,.35); color: #fff; }
.diapo .rail { border-left: 1px solid var(--border); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.diapo .rail-head { padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.diapo .rail-tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--border); }
.diapo .rail-tab { flex: 1; text-align: center; padding: 8px 4px; font-size: 11px; font-weight: 600; color: var(--muted); border-radius: 6px 6px 0 0; cursor: pointer; white-space: nowrap; transition: color .12s, background .12s; }
.diapo .rail-tab:hover { color: var(--ink); }
.diapo .rail-tab.on { color: var(--accent); background: var(--panel-up); }
.diapo .rail-body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.presel { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border); cursor: pointer; transition: background .12s, border-color .12s; }
.presel:hover { border-color: var(--accent); }
.presel.on { background: var(--accent-soft); border-color: var(--accent); box-shadow: var(--glow); }
.presel .slot { width: 24px; height: 24px; border-radius: 5px; flex: 0 0 auto; background: var(--panel-up); color: var(--muted); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.presel.on .slot { background: var(--accent); color: var(--accent-ink); }
.presel .nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presel .rl { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.presel.on .nm, .presel.on .rl { color: var(--accent); }

/* ─────────── First-run / modals content ─────────── */
.fr-card { border: 1px solid var(--border-up); border-radius: var(--r-card); padding: 18px; cursor: pointer; transition: border-color .14s, box-shadow .14s; }
.fr-card.on { border: 1.5px solid var(--accent); background: var(--accent-soft); box-shadow: var(--glow); }
.fr-card h4 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.fr-card p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.fr-card.on p { color: var(--ink-muted); }

.md-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-up); border-radius: var(--r-ctl); background: var(--bg); }
.md-row .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.md-row .t .nm { font-size: 14px; font-weight: 600; }
.md-row .t .dest { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.md-row .cnt { font-family: var(--mono); font-size: 11px; color: var(--warn); }

/* tooltip popover */
.tip { position: absolute; top: calc(var(--toolbar-h) + 4px); right: 16px; width: 320px; z-index: 58; background: var(--panel); border: 1px solid var(--border-up); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px; }
.tip.hidden { display: none; }
.tip .row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.tip .row .c { font-family: var(--mono); font-size: 11px; color: var(--warn); }

/* ─────────── Command palette ─────────── */
.cmdpal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); }
.cmdpal.hidden { display: none; }
.cmdpal .box { width: 560px; max-width: 92vw; background: var(--panel); border: 1px solid var(--border-up); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.cmdpal .search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cmdpal .search input { flex: 1; border: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 16px; outline: none; }
.cmdpal .search svg { width: 16px; height: 16px; color: var(--muted); }
.cmdpal .list { max-height: 320px; overflow-y: auto; padding: 6px; }
.cmd-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-ctl); font-size: 13px; color: var(--ink); cursor: pointer; }
.cmd-item.on { background: var(--accent-soft); color: var(--accent); }
.cmd-item .hint { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.cmd-item.on .hint { color: var(--accent); }

/* toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 80; background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: var(--r-ctl); font-size: 13px; font-weight: 500; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; display: flex; align-items: center; gap: 10px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.hidden { display: none !important; }
/* ═════════════ V4 — Studio layout ═════════════ */

/* rail */

/* top bar */

.v4-vseg { display: inline-flex; height: var(--ctl); border-radius: var(--r-ctl); padding: 2px; background: var(--panel-up); border: 1px solid var(--border-up); flex: 0 0 auto; }
.v4-seg-btn svg { width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; }
.v4-seg-btn { border: 0; background: transparent; color: var(--muted); padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background .14s, color .14s; }
.v4-seg-btn.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.v4-size { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.v4-size input[type="range"] { width: 72px; accent-color: var(--accent); }
.v4-search { height: var(--ctl); flex: 0 0 180px; }
.v4-search input, .v4-side .kw-add input, .v4-modele input { border: 0; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; width: 100%; outline: none; }
.v4-pill {
  height: var(--ctl); padding: 0 12px; border-radius: var(--r-ctl); white-space: nowrap;
  background: var(--panel-up); border: 1px solid var(--border-up); color: var(--ink-muted);
  font-size: 12px; display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s, color .14s, border-color .14s;
}
.v4-pill:hover { border-color: var(--accent); color: var(--ink); }
.v4-pill svg { width: 13px; height: 13px; }
.v4-count { font-size: 12px; color: var(--accent); white-space: nowrap; }
.v4-select { height: var(--ctl); min-height: 0; padding: 0 8px; width: auto; appearance: auto; }
.v4-select.sm { font-size: 12px; }
.v4-select-full { width: 100%; }

/* left panel */
.v4-left {
  grid-area: left; background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 16px; padding: 14px 12px; overflow-y: auto;
}
.v4-left-sec { display: flex; flex-direction: column; gap: 6px; }
.v4-left-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 2px; }
.v4-left-head svg { width: 13px; height: 13px; }
.v4-tree-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-ctl); font-size: 12.5px; color: var(--ink-muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v4-tree-row svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--muted); }
.v4-tree-row span { overflow: hidden; text-overflow: ellipsis; }
.v4-tree-row:hover { background: var(--panel-up); color: var(--ink); }
.v4-tree-row.on { background: var(--accent-soft); color: var(--accent); }
.v4-contacts { display: flex; flex-direction: column; gap: 2px; }
.v4-contact { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r-ctl); cursor: pointer; }
.v4-contact:hover { background: var(--panel-up); }
.v4-ava { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.v4-contact-name { font-size: 12.5px; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v4-contact-code { font-size: 11px; color: var(--faint); }
.v4-tags { display: flex; flex-wrap: wrap; gap: 5px; }
/* main canvas */

.v4-lcards { display: flex; flex-direction: column; gap: 8px; }
.v4-lcard { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-soft); background: var(--panel); cursor: pointer; transition: border-color .14s, background .14s; }
.v4-lcard:hover { border-color: var(--border-up); }
.v4-lcard.focus { border-color: var(--accent); }
.v4-lcard.sel { background: var(--accent-soft); }
.v4-lcard-thumb { width: var(--lcard-w, 92px); height: calc(var(--lcard-w, 92px) * 2 / 3); flex: 0 0 auto; border-radius: 6px; position: relative; overflow: hidden; }
.v4-lcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.v4-lcard-fn { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.v4-lcard-title { font-size: calc(12.5px + (var(--lcard-w, 92px) - 70px) * 0.014); font-weight: 600; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.v4-lcard-leg { font-size: calc(12px + (var(--lcard-w, 92px) - 70px) * 0.012); color: var(--ink); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* badges */
.v4-badges { display: inline-flex; align-items: center; gap: 5px; }
.thumb .v4-badges { position: absolute; left: 6px; top: 6px; }
.v4-badge { font-family: var(--mono); font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 4px; letter-spacing: .3px; background: rgba(0,0,0,.55); color: #fff; }
.thumb .v4-badge { backdrop-filter: blur(2px); }
.v4-lcard-fn .v4-badge { background: var(--panel-up); color: var(--ink-muted); border: 1px solid var(--border-up); }
.v4-badge.iptc { background: var(--accent); color: var(--accent-ink); }
.v4-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.v4-dot.ok { background: var(--ok); }
.v4-dot.warn { background: var(--warn); }
.v4-dot.empty { background: var(--faint); }

/* side panel (tabbed) */
.v4-side { grid-area: side; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.v4-tabbar { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.v4-tab { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 8px 4px; font-size: 12px; font-weight: 500; border-radius: var(--r-ctl) var(--r-ctl) 0 0; border-bottom: 2px solid transparent; cursor: pointer; transition: color .14s, border-color .14s; }
.v4-tab:hover { color: var(--ink); }
.v4-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.v4-side-body { flex: 1; min-height: 0; overflow-y: auto; }
.v4-side-pad { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.v4-face-stage { position: relative; border-radius: var(--r-soft); border: 1px solid var(--border); aspect-ratio: 4 / 3; overflow: hidden; flex: 0 0 auto; }
.v4-face-tag { position: absolute; left: 10px; bottom: 9px; font-size: 11px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.v4-row { display: flex; align-items: center; gap: 8px; }
.v4-row.gap { flex-wrap: wrap; }
.v4-row .ictl { flex: 0 0 auto; }
.v4-dashed { width: 100%; height: var(--btn-h); border-radius: var(--r-ctl); background: var(--accent-soft); border: 1.5px dashed var(--accent); color: var(--accent); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.v4-dashed:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent)); }
.v4-dashed svg { width: 13px; height: 13px; }
.v4-presets { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.v4-side-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.v4-faces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v4-face-crop { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.v4-face-score { position: absolute; right: 4px; bottom: 3px; font-size: 9px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.v4-paint-slots { display: flex; flex-direction: column; gap: 6px; }
.v4-paint-slot { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-ctl); border: 1px solid var(--border-up); background: var(--panel-up); color: var(--ink); font-size: 12.5px; text-align: left; }
.v4-paint-slot:hover { border-color: var(--accent); }
/* bottom dock */

.ictl.sm { width: 28px; height: 28px; }
.ictl.sm svg { width: 13px; height: 13px; }
.v4-field-row { display: flex; align-items: flex-end; gap: 8px; }
.v4-field-row > .field { flex: 1; }
.v4-field-row > .ictl, .v4-field-row > .btn { flex: 0 0 auto; height: var(--field-h); }

/* ── Compact display mode — V4 Studio ── denser bar, rail, panels, dock & fields */

/* top bar */

html.compact .v4-seg-btn { padding: 0 9px; font-size: 11px; }
html.compact .v4-pill { padding: 0 9px; font-size: 11px; }
html.compact .v4-pill svg { width: 12px; height: 12px; }
html.compact .v4-search { flex-basis: 150px; }
html.compact .v4-search input { font-size: 12px; }
html.compact .v4-size input[type="range"] { width: 60px; }
html.compact .v4-count, html.compact .v4-size { font-size: 11px; }
/* rail */

/* left panel */
html.compact .v4-left { gap: 10px; padding: 10px 9px; }
html.compact .v4-left-sec { gap: 4px; }
html.compact .v4-tree-row { padding: 4px 7px; font-size: 12px; }
html.compact .v4-contact { padding: 3px 5px; }
html.compact .v4-ava { width: 22px; height: 22px; font-size: 9.5px; }
/* main canvas */

html.compact .v4-lcards { gap: 6px; }
html.compact .v4-lcard { padding: 6px; gap: 9px; }

/* side panel */
html.compact .v4-tabbar { padding: 5px 8px 0; }
html.compact .v4-tab { padding: 6px 4px; font-size: 11.5px; }
html.compact .v4-side-pad { gap: 9px; padding: 10px; }
html.compact .v4-presets { gap: 5px; }
/* bottom dock */

html.compact .ictl.sm { width: 24px; height: 24px; }

/* ═════════════ Layout V3 (unique depuis le 16/10/2026) ═════════════ */
.body.v3 { grid-template-columns: 234px minmax(0, 1fr) var(--panel-w, 400px); }
.body.v3.left-collapsed { grid-template-columns: minmax(0, 1fr) var(--panel-w, 400px); }

/* bandeau de légende en une ligne */
.composer.thin { padding: 6px 16px; }
.legend-line.one { flex-wrap: wrap; row-gap: 4px; padding: 4px 10px; gap: 6px; border-radius: var(--r-ctl); max-height: 30vh; overflow-y: auto; }
/* Aperçu : la légende passe à la ligne au lieu de sortir de l'écran ; une puce longue (description) se coupe aussi */
.legend-line.one .chip { min-height: 22px; height: auto; font-size: 12px; padding: 2px 8px; flex: 0 1 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.legend-line.one .chip.mono { font-size: 11px; }
html.compact .composer.thin { padding: 3px 10px; }
html.compact .legend-line.one { padding: 2px 8px; margin: 0; }
html.compact .legend-line.one .chip { min-height: 20px; }

/* boutons icône discrets de la barre du haut */
.ictl.ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.ictl.ghost:hover { background: var(--panel-up); color: var(--ink); border-color: var(--border-up); }

/* panneau gauche */
.lpanel { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; padding: 14px 12px; overflow-y: auto; }
html.compact .lpanel { gap: 10px; padding: 10px 9px; }

/* barre de la galerie */
.gbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 14px; background: var(--panel); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.gbar .v4-search { flex: 1 1 140px; max-width: 240px; min-width: 120px; }
.gbar > * { flex: 0 0 auto; }
html.compact .gbar { --ctl: 24px; gap: 7px; padding: 3px 10px; }
html.compact .gbar .v4-seg-btn, html.compact .gbar .v4-pill { padding: 0 9px; font-size: 11px; }
html.compact .gbar .btn.sm { height: 24px; }
.v4-pill.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* contenu de la galerie */
.gmain { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.gmain.flush { padding: 0; display: flex; flex-direction: column; }
.gmain > .grid { padding: 0; overflow: visible; gap: 6px; }
html.compact .gmain { padding: 8px; }

/* panneau de droite */
.spanel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: 1px solid var(--border); }
.spanel-body { flex: 1; min-height: 0; overflow-y: auto; }
.pform { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 18px; }
.pform .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.pform .two > * { min-width: 0; }
.v4-field-row { display: flex; align-items: flex-end; gap: 8px; }
.v4-field-row > .field { flex: 1; min-width: 0; }
.v4-field-row > .ictl, .v4-field-row > .btn { flex: 0 0 auto; height: var(--field-h); }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.compl-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin: 0 -4px; border-radius: var(--r-soft); background: var(--accent-soft); }
.compl-box .field-lbl { color: var(--accent); }
.compl-tmpls summary { font-size: 11.5px; color: var(--ink-muted); cursor: pointer; padding: 2px 0; }
.compl-tmpls summary:hover { color: var(--ink); }
.compl-tmpls[open] summary { margin-bottom: 8px; }
.field-lbl .ctr.link { cursor: pointer; color: var(--accent); }
.field-lbl .ctr.link:hover { text-decoration: underline; }
.presel .x { opacity: .45; padding: 0 4px; font-size: 15px; line-height: 1; }
.presel .x:hover { opacity: 1; color: var(--warn); }
html.compact .pform { gap: 9px; padding: 10px 12px 12px; }
html.compact .pform .field { gap: 4px; }
html.compact .pform .well { padding: 6px 10px; min-height: 30px; }
html.compact .pform textarea.well { min-height: 48px; }
html.compact .compl-box { padding: 8px; }
html.compact .v4-tabbar { padding: 5px 8px 0; }
html.compact .v4-tab { padding: 6px 4px; font-size: 11.5px; }
html.compact .v4-side-pad { gap: 9px; padding: 10px; }

/* pied du panneau : Modèles, historique, navigation, Appliquer */
.pfoot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--border); background: var(--panel); }
.pfoot-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
html.compact .pfoot { gap: 5px; padding: 6px 10px 8px; }

/* bouton Appliquer + interrupteur Auto */
.apply-split { flex: 1; min-width: 0; display: flex; align-items: stretch; height: var(--btn-sm); border-radius: var(--r-ctl); background: var(--accent); box-shadow: 0 6px 14px -8px var(--accent); }
.apply-main { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; color: var(--accent-ink); font: 600 12.5px var(--sans); padding: 0 12px; border-radius: var(--r-ctl) 0 0 var(--r-ctl); transition: background .14s, box-shadow .14s; }
.apply-main svg { width: 14px; height: 14px; flex: 0 0 auto; }
.apply-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apply-main:hover { background: color-mix(in srgb, var(--accent-ink) 10%, transparent); }
.apply-main:focus-visible, .apply-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.apply-switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 9px; border: 0; border-left: 1px solid color-mix(in srgb, var(--accent-ink) 25%, transparent); background: transparent; color: var(--accent-ink); font: 600 11px var(--sans); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.apply-switch:hover { background: color-mix(in srgb, var(--accent-ink) 10%, transparent); }
.apply-switch .sw { position: relative; width: 26px; height: 15px; border-radius: 99px; background: color-mix(in srgb, var(--accent-ink) 28%, transparent); transition: background .16s; }
.apply-switch .knob { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-ink); transition: transform .16s; }
/* mode auto : le bouton paraît enfoncé, l'interrupteur est à droite */
.apply-split.is-auto { background: color-mix(in srgb, var(--accent) 72%, #000); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); }
.apply-split.is-auto .apply-main { cursor: default; font-weight: 500; transform: translateY(1px); }
.apply-split.is-auto .apply-main:hover { background: transparent; }
.apply-split.is-auto .sw { background: var(--accent-ink); }
.apply-split.is-auto .knob { transform: translateX(11px); background: color-mix(in srgb, var(--accent) 72%, #000); }
@media (prefers-reduced-motion: reduce) { .apply-switch .knob, .apply-switch .sw { transition: none; } }

/* diaporama : panneau partagé + pellicule */
.diapo .stage-wrap { grid-template-columns: minmax(0, 1fr) var(--panel-w, 400px); }
.diapo .stage-wrap.strip-left { grid-template-columns: 132px minmax(0, 1fr) var(--panel-w, 400px); }
.diapo .stage-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.diapo .stage-col > .stage { flex: 1; min-height: 0; }
.diapo .rail { min-height: 0; }
.diapo .rail > .spanel { flex: 1; border-left: 0; }
.diapo .viewbar { gap: 14px; padding: 6px 16px; }
.strip-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.strip-ctl svg { width: 14px; height: 14px; }
.strip-ctl .seg { height: 26px; }
.strip-ctl .seg button { padding: 0 9px; font-size: 11.5px; }
.fstrip { display: flex; gap: 6px; padding: 8px; background: var(--panel); overflow: auto; }
.fstrip.left { flex-direction: column; border-right: 1px solid var(--border); }
.fstrip.bottom { flex: 0 0 auto; border-top: 1px solid var(--border); }
.fstrip-it { position: relative; flex: 0 0 auto; border-radius: 5px; overflow: hidden; border: 2px solid transparent; cursor: pointer; opacity: .7; transition: opacity .12s, border-color .12s; }
.fstrip.left .fstrip-it { width: 100%; aspect-ratio: 3 / 2; }
.fstrip.bottom .fstrip-it { height: 74px; aspect-ratio: 3 / 2; }
.fstrip-it:hover { opacity: 1; }
.fstrip-it.sel { border-color: color-mix(in srgb, var(--accent) 45%, transparent); opacity: .9; }
.fstrip-it.on { border-color: var(--accent); opacity: 1; }
.fstrip-it .v4-badge { position: absolute; right: 4px; bottom: 4px; margin: 0; }

/* réglages : tableau des raccourcis */
.fx-keys { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) !important; }
.fx-keys .mono { font-size: 12px; color: var(--ink-muted); }

@media (max-width: 1100px) {
  .body.v3 { grid-template-columns: 200px minmax(0, 1fr) 360px; }
  .body.v3.left-collapsed { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ═════════════ Onglets du panneau (6) ═════════════ */
.spanel .v4-tabbar { overflow-x: auto; scrollbar-width: none; gap: 0; padding: 6px 6px 0; }
.spanel .v4-tabbar::-webkit-scrollbar { display: none; }
.spanel .v4-tab { flex: 1 1 auto; padding: 8px 4px; font-size: 11px; white-space: nowrap; }

/* encadré « Dans le fichier » (légende IPTC/XMP déjà présente) */
.filemeta { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px dashed var(--border-up); border-radius: var(--r-soft); background: var(--bg); }
.filemeta.empty { padding: 7px 12px; }
.filemeta-head { display: flex; align-items: center; gap: 8px; }
.filemeta-src { font-size: 10.5px; color: var(--accent); }
.filemeta.empty .filemeta-src { color: var(--muted); }
.fm-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 1.45; }
.fm-row span { color: var(--muted); }
.fm-row b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.lrow-file { font-size: calc(11px + (var(--lrow-thumb, 150px) - 60px) * 0.02); color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.lrow-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 22px; margin-top: 6px; }
.lrow-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lrow-lbl { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); }
.lrow-val { font-size: calc(11.5px + (var(--lrow-thumb, 150px) - 60px) * 0.012); color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.lrow-cell.empty .lrow-val { color: var(--faint); }
.lrow-pend { color: var(--accent); margin-left: 6px; font-size: 10px; }
.v4-badge.meta { background: var(--panel-up); color: var(--ink-muted); border: 1px solid var(--border-up); }
.thumb .v4-badge.meta { right: auto; left: 30px; top: 6px; bottom: auto; position: absolute; background: rgba(0,0,0,.6); color: #fff; border: 0; width: auto; padding: 0 5px; border-radius: 4px; font-size: 9px; height: 16px; }

/* ═════════════ Reconnaissance faciale ═════════════ */
.fview { display: flex; flex-direction: column; gap: 22px; }
.fsec { display: flex; flex-direction: column; gap: 12px; }
.fsec-head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-muted); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.fsec-head span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--muted); }
.fgroup { display: flex; flex-direction: column; gap: 8px; }
.fgroup + .fgroup { margin-top: 6px; }
.fgroup-head { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.fgroup-head .mono { font-size: 11px; color: var(--muted); }
.fview { container-type: inline-size; }
/* vue Visages : 2 photos par ligne (1 sur un écran étroit), noms à droite de la photo */
.fcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@container (max-width: 760px) { .fcards { grid-template-columns: 1fr; } }
.fcard { display: grid; grid-template-columns: minmax(0, 1fr) 200px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-soft); overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.fcard.focus { border-color: var(--accent); }
.fcard.sel { box-shadow: 0 0 0 1px var(--accent); }
.fcard.drop-in, .fcard-names.drop-in { outline: 2px dashed var(--accent); outline-offset: -2px; }
.fcard-img { position: relative; background: var(--field); cursor: pointer; align-self: start; }
.fcard-img img { display: block; width: 100%; height: auto; }
.fcard-ph { aspect-ratio: 3 / 2; }
.fmark { position: absolute; transform: translate(-50%, -115%); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 700 11px/20px var(--mono); text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; }
.fmark.sus { background: var(--warn); color: #1c1206; }
.fmark.ok { background: var(--ok); color: #0d1a08; }
.fcard-side { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 0; border-left: 1px solid var(--border); }
.fcard-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); min-width: 0; }
.fcard-id { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard-n { color: var(--accent); flex: 0 0 auto; }
.fcard-bg { font-size: 10.5px; color: var(--muted); }
.fcard-names { display: flex; flex-direction: column; gap: 5px; min-height: 40px; }
.fcard-all { align-self: stretch; justify-content: center; }
.fcard-empty { font-size: 12px; color: var(--muted); padding: 6px 0; }
.fname { display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 2px 0 4px; border-radius: var(--r-chip); border: 1px solid var(--border-up); background: var(--panel-up); font-size: 12.5px; font-weight: 500; cursor: grab; user-select: none; min-width: 0; }
.fname:active { cursor: grabbing; }
.fname .fn-n { flex: 0 0 auto; min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 700 10px/18px var(--mono); text-align: center; padding: 0 4px; }
.fname .fn-t { flex: 1; min-width: 0; height: 24px; padding: 0 4px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: inherit; font: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fname .fn-t:hover { border-color: var(--border-up); background: var(--bg); }
.fname .fn-b, .pf-meta .fn-b { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.fname .fn-b.yes:hover:not(:disabled), .pf-meta .fn-b.yes:hover:not(:disabled) { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.fname .fn-b.no:hover, .pf-meta .fn-b.no:hover { color: var(--warn); border-color: var(--warn); }
.fname .fn-b.undo:hover, .pf-meta .fn-b.undo:hover { color: var(--ink); border-color: var(--border-up); }
.fname .fn-b:disabled, .pf-meta .fn-b:disabled { opacity: .3; cursor: not-allowed; }
.fname.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--panel)); }
.fname.ok .fn-n { background: var(--ok); color: #0d1a08; }
.fname.sus { border-style: dashed; border-color: var(--warn); }
.fname.sus .fn-n { background: var(--warn); color: #1c1206; }
.fname.unknown .fn-t { color: var(--muted); font-style: italic; }
.fname.hl { box-shadow: 0 0 0 2px var(--accent); }
.fbox.hl { outline: 2px solid var(--accent); outline-offset: 2px; }
/* filtre « photos d'une personne » */
.ffilter { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--accent); border-radius: var(--r-ctl); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); font-size: 12.5px; flex-wrap: wrap; }
.ffilter img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
.ffilter.view { position: sticky; top: 0; z-index: 2; }
.fcl-pick { cursor: pointer; transition: border-color .12s; }
.fcl-pick:hover { border-color: var(--border-up); }
.fcl-pick.on { border-color: var(--accent); background: var(--accent-soft); }
.fname.dragging { opacity: .4; }
.fname.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.fdrag { cursor: grab; }
.fprog { display: flex; flex-direction: column; gap: 6px; }
.fprog-bar { height: 6px; border-radius: 3px; background: var(--panel-up); overflow: hidden; }
.fprog-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.fcls { display: flex; flex-direction: column; gap: 8px; }
.fcl { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg); }
.fcl img { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.fcl-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fcl-t { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.fcl-t .mono { font-size: 10.5px; color: var(--muted); }
.fsugg { align-self: flex-start; border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: var(--r-chip); font: 500 11.5px var(--sans); padding: 3px 8px; }
.v4-side-note a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .fprog-bar span { transition: none; } }

/* ═════════════ Champs par photo (comme l'app principale) ═════════════ */
.selstatus { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 4px 4px 10px; border-radius: var(--r-ctl); background: var(--bg); border: 1px solid var(--border); font-size: 12px; color: var(--ink-muted); }
.selstatus .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.selstatus.pending { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--ink); }
.selstatus.pending .dot { background: var(--warn); }
.selstatus .btn.sm { height: 24px; font-size: 11.5px; }
.well.mixed { border-style: dashed; border-color: color-mix(in srgb, var(--warn) 60%, var(--border-up)); }
.well.mixed::placeholder { color: var(--warn); opacity: .85; font-style: italic; }
.chip.partial { border-style: dashed; color: var(--ink-muted); }
.chip .kwp { margin-right: 2px; padding: 0 3px; border-radius: 3px; color: var(--accent); font-weight: 700; }
.chip .kwp:hover { background: var(--accent-soft); }
.v4-badge.pend { background: var(--warn); color: #1c1206; width: 16px; height: 16px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 8px; }
.toolbar .pendc { color: var(--warn); }
.toolbar .sess { display: inline-flex; align-items: center; gap: 6px; }
.toolbar .sess svg { width: 13px; height: 13px; color: var(--muted); }

/* accueil : aucune photo ouverte */
.body.empty { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); overflow-y: auto; }
.welcome { max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.welcome h1 { margin: 6px 0 0; font-size: 26px; letter-spacing: -.4px; text-wrap: balance; }
.welcome p { margin: 0; color: var(--ink-muted); line-height: 1.55; font-size: 14px; }
.welcome-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.welcome .welcome-drop { font-size: 12.5px; color: var(--muted); }
.welcome-rec { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 2px; text-align: left; margin-top: 10px; }
.welcome-rec .eyebrow { margin-bottom: 4px; }
.welcome-rec .v4-tree-row { border: 0; background: transparent; width: 100%; font: inherit; font-size: 13px; }
.welcome .welcome-warn { color: var(--warn); font-size: 12.5px; }

/* ─────────── Liste déroulante des champs (Ville…) ─────────── */
.combo { position: relative; }
.combo .well { padding-right: 58px; }
.combo-x, .combo-caret {
  position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; transition: color .12s, background .12s; padding: 0;
}
.combo-caret { right: 6px; }
.combo-x { right: 30px; visibility: hidden; }
.combo.has-value .combo-x { visibility: visible; }
.combo-x:hover, .combo-caret:hover { color: var(--ink); background: var(--panel-up); }
.combo-menu {
  position: fixed; z-index: 60; max-height: 280px; overflow-y: auto; min-width: 180px;
  background: var(--panel); border: 1px solid var(--border-up); border-radius: var(--r-soft);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); padding: 4px; display: flex; flex-direction: column; gap: 1px;
}
.combo-opt { flex-shrink: 0; padding: 7px 10px; line-height: 1.35; border-radius: 6px; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-opt b { color: var(--accent); font-weight: 600; }
.combo-opt.cur { font-weight: 600; }
.combo-opt.hi, .combo-opt:hover { background: var(--accent-soft); }
.combo-opt.combo-add { color: var(--accent); border-top: 1px solid var(--border); margin-top: 2px; border-radius: 0 0 6px 6px; }
.combo-empty { padding: 10px; font-size: 12px; color: var(--muted); line-height: 1.4; white-space: normal; }

/* ─────────── Fenêtres flottantes (variables, modèles de complément, groupements) ─────────── */
.lm-pop { z-index: 70; padding: 10px; gap: 8px; }
.lm-pop .tmpl-edit { padding: 2px; }
.pv-prev { font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-chip); padding: 8px 10px; line-height: 1.4; }
.pv-sug { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -4px; }
.pv-sug .chip { height: auto; min-height: 26px; padding: 3px 9px; gap: 6px; }
.pv-role { font-size: 10px; color: var(--muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-acts { display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.tmpl-fld em { font-size: 10px; text-transform: none; }

/* modèles de complément */
.ct-head { cursor: pointer; user-select: none; align-items: center; min-height: 28px; border-radius: 6px; }
.ct-head:hover b { color: var(--ink); }
.ct-head b { display: inline-flex; align-items: center; gap: 6px; }
.ct-caret { display: inline-flex; transition: transform .15s; transform: rotate(-90deg); }
.ct-caret.open { transform: none; }
.ct-caret svg { width: 12px; height: 12px; }
.ct-meta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--faint); text-transform: none; letter-spacing: 0; }
.ct-meta .tmpl-mini { width: 24px; height: 24px; }
.ct-meta .tmpl-mini svg { width: 12px; height: 12px; }
.ct-sports { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-sports .chip { height: 26px; font-size: 11px; padding: 0 9px; }
.ct-list { display: flex; flex-direction: column; gap: 4px; }
.ct-list .tmpl { text-align: left; width: 100%; font-family: var(--sans); font-size: 13px; padding: 7px 10px; line-height: 1.35; }
.ct-var { color: var(--accent); font-family: var(--mono); font-size: .92em; }
.ct-pop .ct-sports { padding: 2px 0 6px; border-bottom: 1px solid var(--border); }
.ct-mlist { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.ct-mrow { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border-radius: 6px; }
.ct-mrow:hover { background: var(--panel-up); }
.ct-mrow .well { flex: 1; min-height: 32px; padding: 5px 9px; }
.ct-mtxt { flex: 1; font-size: 13px; color: var(--ink); cursor: text; padding: 4px 2px; line-height: 1.35; }
.ct-mrow .tmpl-mini { width: 26px; height: 26px; flex-shrink: 0; opacity: .55; }
.ct-mrow:hover .tmpl-mini { opacity: 1; }
.ct-help { font-size: 11px; color: var(--muted); line-height: 1.45; padding: 2px; }
.ct-foot { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--border); padding-top: 8px; }

/* filtre de groupement */
.dirf-line { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px dashed var(--border-up); border-radius: var(--r-chip); font-size: 12px; color: var(--muted); cursor: pointer; transition: border-color .12s, color .12s; }
.dirf-line:hover { border-color: var(--accent); color: var(--ink); }
.dirf-line.on { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dirf-ico svg, .dirf-car svg { width: 13px; height: 13px; display: block; }
.dirf-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dirf-n { font-family: var(--mono); font-size: 10px; opacity: .8; }
.dirf-x { padding: 0 3px; font-size: 11px; opacity: .7; }
.dirf-x:hover { opacity: 1; }
.dirf-pop { display: flex; flex-direction: column; gap: 6px; }
.dirf-list { display: flex; flex-direction: column; gap: 1px; max-height: 50vh; overflow-y: auto; }
.dirf-opt, .dirf-grp { flex-shrink: 0; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.dirf-opt:hover, .dirf-grp:hover { background: var(--panel-up); }
.dirf-list .dirf-opt { padding-left: 26px; }
.dirf-grp { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-top: 4px; }
.dirf-sep { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); padding: 8px 8px 2px; }
.dirf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dirf-cnt { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.dirf-chk { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border-up); flex-shrink: 0; position: relative; }
.dirf-opt.on .dirf-chk, .dirf-grp.on .dirf-chk { background: var(--accent); border-color: var(--accent); }
.dirf-opt.on .dirf-chk::after, .dirf-grp.on .dirf-chk::after { content: ''; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dirf-opt.on { color: var(--accent); }
.dirf-all { border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; }
.dirf-chip svg { width: 12px; height: 12px; }
.chip.hint { border-color: var(--accent); }

/* mots-clés : liste de la bibliothèque */
.kw-inwrap { position: relative; flex: 1; display: flex; min-width: 0; }
.kw-inwrap input { position: relative; z-index: 1; width: 100%; }
.kw-ghost { position: absolute; inset: 0; display: flex; align-items: center; font-family: var(--sans); font-size: 13px; color: var(--faint); white-space: pre; pointer-events: none; overflow: hidden; }
.combo-head { flex-shrink: 0; padding: 8px 10px 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }
.combo-opt.sub { padding-left: 20px; }
.combo-par { margin-left: 8px; font-size: 10px; color: var(--faint); font-family: var(--mono); }

/* visages : cadres cliquables sur la photo */
.fbox { position: absolute; border: 2px solid color-mix(in srgb, var(--accent) 75%, transparent); border-radius: 6px; cursor: pointer; transition: border-color .12s, background .12s; }
.fbox:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fbox.unk { border-style: dashed; border-color: rgba(255,255,255,.7); }
.fbox.ok { border-color: var(--ok); }
.fbox.sus { border-color: var(--warn); }
.fbox .fmark { left: 50%; top: 0; }
.fcard-bg { font-size: 10px; color: var(--faint); margin-left: 8px; }
.fcl-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 32px; padding: 0 10px; border: 1px dashed var(--border-up); border-radius: var(--r-chip); background: var(--field); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.fcl-name.on { border-style: solid; color: var(--ink); font-weight: 600; }
.fcl-name:hover { border-color: var(--accent); }
.fcl-name span svg { width: 12px; height: 12px; display: block; }
.np { display: flex; flex-direction: column; gap: 8px; }
.np-head { display: flex; align-items: center; gap: 10px; }
.np-head img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.np-head b { display: block; font-size: 13px; }
.np-head span { font-size: 11px; color: var(--muted); }
.np-list { display: flex; flex-direction: column; gap: 1px; max-height: min(420px, 55vh); overflow-y: auto; }
.np-sec { position: sticky; top: 0; z-index: 1; padding: 6px 8px 3px; background: var(--panel); font: 600 10.5px var(--sans); letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.np-list .dirf-opt { padding-left: 8px; }
.np-list .dirf-opt.hi { background: var(--accent-soft); }
.np-only { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* taille des vignettes : curseur vertical affiché au survol du bouton, au-dessus de tout */
.tsz { position: relative; display: inline-flex; flex: 0 0 auto; }
.tsz-btn svg { width: 15px; height: 15px; }
.tsz-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.tsz:hover .tsz-btn, .tsz:focus-within .tsz-btn { color: var(--accent); border-color: var(--accent); }
.tsz-pop {
  position: absolute; left: 50%; top: calc(100% + 8px); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 8px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border-up);
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.tsz-pop::before { content: ''; position: absolute; left: -6px; right: -6px; top: -12px; height: 12px; }
.tsz:hover .tsz-pop, .tsz:focus-within .tsz-pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tsz-pop .ts-ico { color: var(--muted); display: inline-flex; }
.tsz-pop .ts-ico.sm svg { width: 12px; height: 12px; }
.tsz-pop .ts-ico.lg svg { width: 18px; height: 18px; }
.tsz-pop input[type=range] {
  -webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl;
  width: 4px; height: 110px; border-radius: 2px; background: var(--border-up); cursor: pointer; margin: 0;
}
.tsz-pop input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.tsz-pop input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); cursor: pointer; }

/* grande photo : visages de la photo seulement */
.dfaces { position: absolute; pointer-events: none; }
.dfaces .fbox { pointer-events: auto; }
.dface-lbl { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); white-space: nowrap; padding: 2px 7px; border-radius: 6px; background: rgba(12,12,13,.78); color: #f4ede0; font: 600 11px/1.4 var(--sans); pointer-events: none; }
.pf-row { align-items: center; }
.pf-row.ok { border-color: var(--ok); }
.pf-n { width: 20px; height: 20px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 700 11px/20px var(--mono); text-align: center; flex: 0 0 auto; }
.pf-meta { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); }

/* accès rapides (villes, mots-clés) */
.quick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: -4px; }
.quick-row .chip { height: 26px; font-size: 11.5px; padding: 0 9px; }
.quick-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); margin-right: 4px; }
.quick-h { font-size: 14px; margin: 0; }
.quick-set { grid-template-columns: minmax(120px, 1fr) 2fr auto !important; display: grid; align-items: center; gap: 10px; }
.quick-add { display: flex; gap: 8px; margin-top: 8px; }
.quick-add .well { flex: 1; min-height: 34px; padding: 6px 10px; }

.dfaces.manual { pointer-events: auto; cursor: crosshair; }
.fbox.pending { border-style: dashed; animation: fpulse 1s ease-in-out infinite; }
@keyframes fpulse { 50% { opacity: .35; } }

/* ═════════════ Complément : noms en étiquettes (ctags.js) ═════════════ */
.ctags-ed { min-height: 64px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; cursor: text; outline: none; }
.ctags-ed:empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.ctag { display: inline-flex; align-items: center; gap: 3px; margin: 0 1px; padding: 0 3px 0 7px; height: 22px; line-height: 22px; vertical-align: 1px; border-radius: var(--r-chip); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--panel-up); color: var(--ink); font-weight: 500; white-space: nowrap; cursor: grab; user-select: none; }
.ctag:hover { border-color: var(--accent); }
.ctag.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ctag-n { min-width: 15px; height: 15px; border-radius: 8px; background: var(--accent-ink); color: var(--accent); font: 700 9.5px/15px var(--mono); text-align: center; }
.ctag-x { font-style: normal; width: 16px; height: 16px; line-height: 15px; text-align: center; border-radius: 4px; opacity: .55; cursor: pointer; }
.ctag-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); }
.ctag.dragging { opacity: .4; }

/* bouton « i » des vignettes (infos du fichier, remplace l'onglet Propriétés) */
.tinfo { position: absolute; top: 6px; right: 6px; z-index: 2; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.45); color: #fff; font: 600 12px/1 Georgia, 'Times New Roman', serif; font-style: italic; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; backdrop-filter: blur(2px); }
.tcard:hover .tinfo, .lrow:hover .tinfo, .v4-lcard:hover .tinfo, .tinfo:focus-visible { opacity: 1; }
.tinfo:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lrow-thumb .tinfo, .v4-lcard-thumb .tinfo { top: 4px; right: 4px; width: 18px; height: 18px; font-size: 11px; }
@media (hover: none) { .tinfo { opacity: .85; } }
.info-pop { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.lm-pop .info-head { display: flex; align-items: center; gap: 8px; }
.lm-pop .info-head b { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-pop .eyebrow { margin-top: 2px; }
.ctag.dup { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.ctag.dup.on { background: var(--warn); color: #1c1206; }
.ctags-dedup { display: block; margin: 6px 0 0 auto; border: 1px solid var(--warn); background: transparent; color: var(--warn); border-radius: var(--r-chip); font: 500 11px var(--sans); text-transform: none; letter-spacing: 0; padding: 2px 8px; cursor: pointer; }
.ctags-dedup:hover:not(:disabled) { background: color-mix(in srgb, var(--warn) 14%, transparent); }
/* propositions en tapant (nom, numéro, code) */
.ctsug, .ctsug-list { position: fixed; z-index: 900; font: 12px var(--sans); color: var(--ink); background: var(--panel-up); border: 1px solid var(--border-up); border-radius: var(--r-chip); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.ctsug[hidden], .ctsug-list[hidden] { display: none; }
.ctsug { display: flex; align-items: center; gap: 4px; padding: 3px 4px; max-width: 460px; flex-wrap: wrap; }
.ctsug-k { font: 600 9.5px var(--mono); padding: 1px 5px; border: 1px solid var(--border-up); border-radius: 4px; color: var(--muted); }
.ctsug-n { color: var(--muted); padding: 0 2px; }
.ctsug button, .ctsug-list button { display: flex; align-items: baseline; gap: 6px; border: 0; background: transparent; color: inherit; font: inherit; text-transform: none; letter-spacing: 0; padding: 2px 6px; border-radius: 4px; cursor: pointer; text-align: left; }
.ctsug button:hover, .ctsug-list button:hover, .ctsug-list button.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.ctsug button b, .ctsug-list button b { font-weight: 600; white-space: nowrap; }
.ctsug button span, .ctsug-list button span { color: var(--muted); font-size: 11px; }
.ctsug-list { display: flex; flex-direction: column; min-width: 220px; max-height: 260px; overflow-y: auto; padding: 4px; }
.ctsug-list button { width: 100%; padding: 4px 8px; }
.ctsug-hint { font: 10px var(--mono); color: var(--muted); padding: 4px 8px 2px; border-top: 1px solid var(--border-up); margin-top: 2px; }
.ctags-dedup:disabled { border-color: var(--border-up); color: var(--muted); opacity: .6; cursor: default; }
.ct-list .tmpl.armed { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.ct-armhint { display: block; margin-top: 3px; font-size: 11px; color: var(--accent); }
.ct-armhint u { cursor: pointer; }

/* Complément › Insérer · répertoire : accès au répertoire, ajout d'une personne */
.field-lbl.dir-lbl { align-items: center; gap: 6px; }
.dir-mini { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border-up); background: var(--panel-up); color: var(--ink-muted); font: inherit; font-size: 11px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.dir-mini svg { width: 12px; height: 12px; }
.dir-mini:hover { color: var(--ink); border-color: var(--accent); }
.dir-mini:focus-visible { outline: none; box-shadow: var(--glow); }
.dir-none { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-chip, 8px); border: 1px dashed var(--border-up); background: transparent; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
.dir-none span { color: var(--muted); margin-right: 2px; }
.dir-none svg { width: 12px; height: 12px; }
.dir-none:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.dirf-pop { display: flex; flex-direction: column; gap: 10px; }
.dirf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dirf-pop .tmpl-fld input { width: 100%; box-sizing: border-box; }
.dirf-secs { margin-top: -4px; }
.dirf-secs .chip { height: 24px; font-size: 11.5px; }
.dirf-err { font-size: 12px; color: var(--warn); }

/* Réglages › Répertoire (comme l'annuaire de main) : groupes ▸ sections à gauche, sections en accordéon à droite */
.dx { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: -12px; }
.dx-side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; border: 1px solid var(--border); border-radius: var(--r-soft); background: var(--panel); padding: 8px; max-height: 70vh; overflow-y: auto; }
.dx-side .kw-add { margin-bottom: 6px; }
.dx-sec, .dx-grp { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--ink-muted); cursor: pointer; user-select: none; }
.dx-sec span:first-child, .dx-gname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-sec:hover, .dx-grp:hover { background: var(--panel-up); color: var(--ink); }
.dx-sec.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dx-sec.ind { padding-left: 26px; }
.dx-grp { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-top: 4px; }
.dx-n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); flex: 0 0 auto; }
.dx-sec.on .dx-n { color: var(--accent); }
.dx-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dx-head, .dx-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr .7fr 28px; gap: 8px; align-items: center; }
.dx-head { padding: 6px 8px 2px 20px; font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.dx-block { border: 1px solid var(--border); border-radius: var(--r-soft); background: var(--panel); overflow: hidden; }
.dx-sechead { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; cursor: pointer; user-select: none; }
.dx-sechead:hover { background: var(--panel-up); }
.dx-block.open .dx-sechead { border-bottom: 1px solid var(--border); background: var(--panel-up); }
.dx-secname { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.dx-sechead .well { height: 28px; min-height: 0; padding: 0 8px; font-size: 13px; }
.dx-secin { flex: 0 1 auto; min-width: 0; max-width: 60%; width: auto; font-weight: 600; }
.dx-grpin { width: 140px; flex: 0 0 auto; font-size: 12px !important; color: var(--ink-muted); }
.dx-sechead .well:not(:focus) { background: transparent; border-color: transparent; }
.dx-sechead .well:not(:focus):hover { border-color: var(--border-up); }
.dx-rows { display: flex; flex-direction: column; }
.dx-row { padding: 4px 8px 4px 12px; border-top: 1px solid var(--border); }
.dx-head + .dx-row { border-top: 0; }
.dx-row .well { height: 30px; min-height: 0; padding: 0 8px; font-size: 13px; width: 100%; box-sizing: border-box; }
.dx-row .well:not(:focus) { background: transparent; border-color: transparent; }
.dx-row:hover .well:not(:focus) { border-color: var(--border); }
.dx-row .well.b { font-weight: 600; }
.dx-row .well.mono { color: var(--accent); }
.dx-empty { padding: 10px 14px; font-size: 12px; color: var(--muted); }
.dx-danger { background: var(--warn) !important; border-color: var(--warn) !important; }
@media (max-width: 900px) { .dx { grid-template-columns: 1fr; } .dx-side { position: static; max-height: 240px; } }
.dx .kw-add { height: 34px; padding: 0 10px; }
.dx .kw-add svg { flex: 0 0 auto; }
.dx .kw-add input { border: 0; background: transparent; padding: 0; height: auto; min-height: 0; box-shadow: none; width: 100%; outline: none; color: var(--ink); font: inherit; font-size: 13px; }

/* Présélection dans l'onglet Complément */
.presel-block > .v4-side-pad { padding: 0; }

.ctag.mix { cursor: default; border-style: dashed; border-color: var(--border-up); background: var(--bg); color: var(--muted); font-style: italic; padding-left: 8px; }
.ctags-ed.ctags-line { min-height: var(--field-h); }

/* mots-clés : champ qui ouvre la recherche dans l'arborescence */
.kw-open { width: 100%; cursor: pointer; font: inherit; font-size: 13px; color: var(--muted); text-align: left; transition: border-color .12s, color .12s; }
.kw-open > span:not(.dirf-car) { flex: 1; }
.kw-open:hover, .kw-open:focus-visible { border-color: var(--accent); color: var(--ink); outline: none; }
.kw-open .dirf-car svg { width: 13px; height: 13px; display: block; }
.kw-sug { margin-top: 0; }
.kwt-dir { display: flex; align-items: center; gap: 2px; min-height: 30px; flex-shrink: 0; }
.kwt-dir .dirf-opt { flex: 1; padding-left: 4px !important; }
.kwt-label { flex: 1; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); cursor: pointer; padding: 6px 4px; }
.kwt-car { width: 20px; height: 20px; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transform: rotate(-90deg); transition: transform .12s; flex-shrink: 0; }
.kwt-car.open { transform: none; }
.kwt-car svg { width: 12px; height: 12px; }
.dirf-opt.part .dirf-chk { border-color: var(--accent); }
.dirf-opt.part .dirf-chk { background: transparent; border-style: dashed; }
.dirf-opt.part .dirf-chk::after { content: ''; position: absolute; left: 3.5px; top: .5px; width: 4px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dirf-opt.hi { background: var(--accent-soft); }

/* ─────────── Planche contact (tri par note) ─────────── */
.planche { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--pl-bg, #0d0d0e); color: #eee8dc; --pl-h: 170px; }
.planche.pl-light { color: #1c1813; }
.pl-bar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--border); flex-wrap: wrap; position: relative; z-index: 3; }
.pl-back { width: 32px; height: 32px; border-radius: var(--r-ctl); border: 1px solid var(--border-up); background: var(--panel-up); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-back svg { width: 15px; height: 15px; }
.pl-title { font-size: 14px; }
.pl-tot { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.pl-chips { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.pl-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-chip); border: 1px solid var(--border-up); background: var(--panel-up); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.pl-chip b { font-weight: 700; }
.pl-chip span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.pl-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pl-chip.on span { color: var(--accent); }
.pl-sq { display: inline-block; width: 9px; height: 9px; border: 2px solid #F5C400; border-radius: 2px; }
.pl-clear { width: 26px; height: 26px; border-radius: 13px; border: 1px solid var(--border-up); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.pl-clear:hover { color: var(--ink); border-color: var(--accent); }
.pl-hov { position: relative; }
.pl-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--border-up); background: var(--panel-up); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.pl-btn svg { width: 14px; height: 14px; }
.pl-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 12px; border-radius: var(--r-soft); border: 1px solid var(--border-up); background: var(--panel); box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility .14s; }
.pl-pop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.pl-hov:not(.pl-shut):hover .pl-pop, .pl-hov.pinned .pl-pop { opacity: 1; visibility: visible; transform: none; }
.pl-hov.pinned .pl-btn { border-color: var(--accent); color: var(--accent); }
.pl-pop-t { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 600; }
.pl-sws { display: flex; gap: 8px; }
.pl-sw { width: 26px; height: 26px; border-radius: 13px; border: 2px solid var(--border-up); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.pl-sw.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-pop input[type=range] { width: 100%; accent-color: var(--accent); }
.pl-note { font-size: 11px; color: var(--muted); }
.pl-ths { display: flex; flex-direction: column; gap: 2px; }
.pl-th { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pl-th span { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.pl-th:hover { background: var(--panel-up); }
.pl-th.on { background: var(--accent-soft); color: var(--accent); }
.pl-auto { font-family: var(--mono); font-size: 11px; color: var(--ok); }
.pl-grid { flex: 1; overflow-y: auto; padding: 34px 38px 60px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 34px 30px; }
.pl-cell { position: relative; height: var(--pl-h); outline: none; cursor: pointer; transition: opacity .2s, transform .2s, width .17s, margin .17s; }
.pl-cell:focus-visible .pl-frame { box-shadow: 0 0 0 2px var(--accent); }
.pl-frame { position: relative; height: 100%; display: inline-block; }
.pl-frame img { height: 100%; width: auto; display: block; user-select: none; -webkit-user-drag: none; }
.pl-ph { height: 100%; aspect-ratio: 3 / 2; }
.pl-ink { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; pointer-events: none; fill: none; }
.pl-ink path { stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; fill: none; }
.pl-gold { inset: -19px; width: calc(100% + 38px); height: calc(100% + 38px); }
.pl-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 0 2px rgba(0,0,0,.45); }
.pl-out { opacity: 0; transform: scale(.94); }
.pl-collapse { width: 0 !important; margin-right: -30px; overflow: hidden; }
.pl-in { animation: plIn .22s ease-out; }
@keyframes plIn { from { opacity: 0; transform: scale(.96); } }
.pl-empty { width: 100%; text-align: center; padding: 60px 0; opacity: .7; }
.pl-pv { position: fixed; inset: 0; z-index: 5; background: rgba(8,8,9,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; }
.pl-pv-frame { position: relative; max-width: calc(100vw - 120px); max-height: calc(100vh - 110px); display: inline-block; }
.pl-pv-frame img { display: block; max-width: calc(100vw - 120px); max-height: calc(100vh - 110px); width: auto; height: auto; user-select: none; }
.pl-pv-frame .pl-ink path { stroke-width: 7; }
.pl-pv-frame .pl-ink { inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); }
.pl-pv-frame .pl-gold { inset: -27px; width: calc(100% + 54px); height: calc(100% + 54px); }
.pl-pv-cap { font-family: var(--mono); font-size: 12px; color: #d9d2c4; }
/* planche : bouton de taille + bandeau des raccourcis */
.pl-tsz .tsz-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.pl-hints { flex-shrink: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 8px 16px; background: var(--panel); color: var(--muted); border-top: 1px solid var(--border); font-size: 11.5px; }
.pl-hints kbd { font-family: var(--mono); font-size: 10.5px; color: var(--ink); background: var(--panel-up); border: 1px solid var(--border-up); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; margin-right: 3px; }

/* diaporama : même barre de légende que l'affichage classique */
.diapo-composer { flex-shrink: 0; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--panel-mute); }
.diapo-composer .composer { margin: 0; }

/* ═════════════ Big brother : complément sur demande, revue d'une personne, fusion ═════════════ */
.fcard-compl { margin-top: 6px; width: 100%; justify-content: center; border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.fcl-review { margin: -2px 0 6px; padding: 8px; border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 var(--r-chip) var(--r-chip); background: var(--panel); }
.fcl-review-h { font: 10.5px var(--mono); color: var(--muted); margin-bottom: 6px; }
.fcl-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.fcl-face { position: relative; display: block; border-radius: 6px; overflow: hidden; border: 2px solid transparent; }
.fcl-face.ok { border-color: var(--ok, #4f7a3a); }
.fcl-face.sus { border-style: dashed; border-color: var(--warn); }
.fcl-face img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
.fcl-face .fn-b { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; line-height: 16px; font-size: 11px; background: color-mix(in srgb, var(--panel-up) 88%, transparent); border-radius: 4px; }
.np-acts { display: flex; justify-content: flex-start; margin: 4px 0 2px; }
.np-same { display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow-y: auto; }
.np-same-b { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); font: 12px var(--sans); text-transform: none; letter-spacing: 0; padding: 3px 6px; border-radius: 6px; cursor: pointer; text-align: left; }
.np-same-b:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.np-same-b img { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; }
.np-same-b span:nth-of-type(1) { flex: 1; font-weight: 500; }
.np-same-b .mono { font-size: 10.5px; color: var(--muted); }
.bb-opt { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.bb-opt input { margin-top: 3px; accent-color: var(--accent); pointer-events: none; }
.bb-opt > span { display: flex; flex-direction: column; gap: 2px; }
.bb-opt .sub { margin: 0; }
.ffilter-x { width: 26px; height: 26px; font-size: 13px; }
.fname .fn-b.add { font-weight: 700; color: var(--accent); }
/* indicateur Big brother dans le bandeau du haut */
.bb-status { position: fixed; top: 7px; left: 50%; transform: translateX(-50%); z-index: 950; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--border-up); background: var(--panel-up); color: var(--ink); font: 500 12px var(--sans); text-transform: none; letter-spacing: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); cursor: pointer; }
.bb-status[hidden] { display: none; }
.bb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: bbPulse 1.2s ease-in-out infinite; }
@keyframes bbPulse { 50% { opacity: .25; } }
.bb-bar { width: 70px; height: 4px; border-radius: 2px; background: var(--border-up); overflow: hidden; }
.bb-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.bb-status.done { border-color: var(--ok, #4f7a3a); background: color-mix(in srgb, var(--ok, #4f7a3a) 14%, var(--panel-up)); animation: bbIn .5s ease-out 2; }
@keyframes bbIn { 50% { transform: translateX(-50%) scale(1.06); } }
.bb-ok { color: var(--ok, #4f7a3a); font-weight: 700; }
.bb-go { font-weight: 600; color: var(--accent); }
/* vue Visages : mode « Par personne » */
.fmode { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.fpers { margin-bottom: 18px; padding: 10px 12px; border: 1px solid var(--border-up); border-radius: var(--r-card, 10px); background: var(--panel); }
.fpers-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.fpers-head > img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.fpers-head .fcl-name { width: auto; min-width: 200px; max-width: 360px; }
.fpers-n { font-size: 11px; color: var(--muted); }
.fpers-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.fpf { position: relative; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--bg); }
.fpf.ok { border-color: var(--ok, #4f7a3a); }
.fpf.sus { border-style: dashed; border-color: var(--warn); }
.fpf img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
.fpf-b { position: absolute; right: 3px; bottom: 3px; display: flex; gap: 3px; }
.fpf-b .fn-b { width: 22px; height: 22px; padding: 0; line-height: 20px; background: color-mix(in srgb, var(--panel-up) 90%, transparent); border-radius: 5px; }

/* bouton Copier : après la légende, prochain clic = titre */
.copy-lg { position: relative; }
.copy-lg.next-title { color: var(--accent); border-color: var(--accent); }
.copy-t { position: absolute; right: -4px; bottom: -4px; min-width: 13px; height: 13px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); font: 700 8.5px/13px var(--sans); text-align: center; }

/* case « par défaut » sur la ligne Photographe (panneau Légende) */
.field-lbl .photog-auto { margin-left: auto; text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; }
.field-lbl .photog-auto input { margin: 0; accent-color: var(--accent, currentColor); }

/* vue Visages : bandeau du haut fixe pendant le défilement */
.fview > .fhead { position: sticky; top: -14px; z-index: 6; margin: -14px -14px -8px; padding: 14px 14px 10px; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
html.compact .fview > .fhead { top: -8px; margin: -8px -8px -8px; padding: 8px 8px 8px; }
.fview > .fhead .ffilter.view { position: static; }
.fview > .fhead .fmode { margin: 0; }

/* ─────────── Lot 2 (26/10/2026) : diaporama dans la galerie, séparateur du panneau, accueil ─────────── */
/* diaporama : vue de la galerie (bandeau, légende et panneau de droite restent ceux de l'espace de travail) */
.gmain.diapo-in { padding: 0; overflow: hidden; display: flex; background: #0c0c0d; }
.diapo-in .dstage-wrap { flex: 1; min-width: 0; min-height: 0; display: flex; }
.diapo-in .stage-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.diapo-in .stage { position: relative; flex: 1; min-height: 0; }
.diapo-in .photo { position: absolute; inset: 0; overflow: hidden; }
.diapo-in .fstrip.left { width: 132px; flex: 0 0 132px; }
.diapo-in .strip-ctl { position: absolute; top: 10px; right: 12px; z-index: 3; padding: 4px 8px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(4px); opacity: .35; transition: opacity .15s; }
.diapo-in .stage:hover .strip-ctl { opacity: 1; }
.diapo-in .navhint { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 3; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: #e8e2d6; pointer-events: none; }
.diapo-in .navhint .nh-b { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; pointer-events: auto; padding: 4px 8px; border-radius: 14px; background: rgba(0,0,0,.35); }
.diapo-in .navhint svg { width: 13px; height: 13px; }
.diapo-in .pill { padding: 4px 10px; border-radius: 14px; background: rgba(0,0,0,.45); color: #fff; }

/* « i » des vignettes : apparaît au survol après un court délai */
.tcard:hover .tinfo, .lrow:hover .tinfo, .v4-lcard:hover .tinfo { transition-delay: .4s; }

/* séparateur du panneau de droite : glisser = largeur, clic = masquer / afficher */
.spanel { position: relative; }
.pw-handle { position: absolute; left: -5px; top: 0; bottom: 0; width: 9px; z-index: 6; cursor: col-resize; touch-action: none; }
.pw-handle::after { content: ''; position: absolute; left: 4px; top: 50%; width: 1px; height: 44px; margin-top: -22px; border-radius: 2px; background: var(--border-up); transition: background .12s, width .12s, left .12s; }
.pw-handle:hover::after, html.pw-dragging .pw-handle::after { left: 3px; width: 3px; background: var(--accent); }
html.pw-dragging, html.pw-dragging * { cursor: col-resize !important; user-select: none !important; }
html.panel-hidden .body.v3 { grid-template-columns: 234px minmax(0, 1fr) 0; }
html.panel-hidden .body.v3.left-collapsed { grid-template-columns: minmax(0, 1fr) 0; }
html.panel-hidden .body.v3 > .spanel { visibility: hidden; overflow: hidden; }
.body.v3 { position: relative; }
.pw-show { position: absolute; right: 0; top: 50%; z-index: 7; width: 16px; height: 56px; margin-top: -28px; padding: 0; border: 1px solid var(--border-up); border-right: 0; border-radius: var(--r-ctl) 0 0 var(--r-ctl); background: var(--panel-up); color: var(--ink-muted); font-size: 14px; cursor: pointer; }
.pw-show:hover { color: var(--accent); border-color: var(--accent); }

/* logo cliquable (retour à la galerie) */
.lm-home-logo { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--r-ctl); }
.lm-home-logo:focus-visible { outline: none; box-shadow: var(--glow); }
.pl-logo { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; margin: 0 4px; }

/* accueil : reportage ouvert */
.welcome-back { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 18px 18px; margin-bottom: 8px; border: 1px solid var(--border-up); border-radius: var(--r-card); background: var(--panel); }
.welcome-back b { font-size: 17px; }
.welcome-back .meta { font-size: 12.5px; color: var(--muted); }
.welcome-back .welcome-acts { margin-top: 10px; }

/* menu de tri */
.v4-sort b { font-weight: 600; color: var(--ink); }
.v4-sort svg { width: 9px; height: 9px; opacity: .7; }
.af-sort .tmpl-pick.on .tmpl-name { color: var(--accent); }

/* ─────────── Lot 3 (26/10/2026) : saisie ─────────── */
/* limite de caractères dépassée : alerte seulement */
.field:has(.ctr.over) .well { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn-border); }
.field-lbl .ctr.over { color: var(--warn); font-weight: 700; }
/* Réglages › Écriture : caractères spéciaux, limites */
.sz-fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.sz-fields-l { font-size: 12px; color: var(--muted); margin-right: 4px; }
.sz-test { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.sz-test .well { flex: 1 1 260px; min-height: 36px; padding: 7px 10px; }
.sz-out { font-size: 12.5px; color: var(--accent); }
.sz-rules { display: flex; flex-direction: column; gap: 5px; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.sz-rule { display: grid; grid-template-columns: minmax(80px, 180px) 18px minmax(60px, 120px) 1fr 28px; gap: 6px; align-items: center; }
.sz-rule .well { min-height: 32px; padding: 5px 8px; font-size: 13px; }
.sz-arrow { color: var(--muted); text-align: center; }
.sz-note { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sz-lims { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.sz-lim { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sz-lim span { min-width: 84px; font-weight: 600; }
.sz-lim .well { width: 90px; min-height: 34px; padding: 6px 8px; }
.sz-lim em { font-style: normal; color: var(--muted); font-size: 12px; }
/* mots-clés : liste près du curseur */
.kwd-drop { position: fixed; z-index: 75; width: 260px; max-height: 300px; padding: 4px; }
.kwd-drop .dirf-opt { width: 100%; }
.kwd-drop .kwt-help { padding: 6px 8px 4px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 2px; }
/* menu du clic droit */
.sz-ctx-h { padding: 6px 8px 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sz-ctx-h:not(:first-child) { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.sz-ci[disabled] { opacity: .4; cursor: default; }
.sz-ci[disabled]:hover { background: transparent; }
/* Ctrl+Maj+V : choisir quoi coller */
.sz-ov { z-index: 96; }
.sz-choose { width: min(520px, 92vw); }
.sz-choose-b { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; max-height: 60vh; overflow-y: auto; }
.sz-ck { display: grid; grid-template-columns: 20px 110px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.sz-ck span { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-ck i { color: var(--faint); }
/* valeurs différentes */
.mix-link { margin-left: 8px; padding: 0 6px; border: 1px dashed var(--accent); border-radius: var(--r-chip); background: var(--accent-soft); color: var(--accent); font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
.mix-link + .ctr { margin-left: auto; }
.ctag.mix { cursor: pointer; }
.sz-tip { position: fixed; z-index: 98; max-width: 340px; padding: 8px 10px; border-radius: var(--r-ctl); background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.45; box-shadow: var(--shadow); pointer-events: none; }
.sz-tip b { display: block; margin-bottom: 3px; }
.sz-tip div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-tip .mono { opacity: .7; margin-right: 4px; }
.sz-tip em { display: block; margin-top: 5px; opacity: .7; font-style: normal; font-size: 11px; }
.sz-mix { display: flex; flex-direction: column; gap: 8px; }
.sz-mix-h { display: flex; flex-direction: column; gap: 1px; padding: 2px 2px 6px; border-bottom: 1px solid var(--border); }
.sz-mix-h span { font-size: 11.5px; color: var(--muted); }
.sz-mix-r { display: flex; flex-direction: column; gap: 5px; }
.sz-mix-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.sz-mix-ids { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-mix-r .well { min-height: 0; padding: 6px 8px; font-size: 13px; }
.sz-mix-f { font-size: 11px; color: var(--muted); padding-top: 4px; border-top: 1px solid var(--border); }

/* ─────────── Lot 4 (26/10/2026) : champs, légende, villes, traduction ─────────── */
.ch-warn { display: flex; gap: 6px; align-items: flex-start; color: var(--warn); font-family: var(--sans); font-size: 11.5px; line-height: 1.4; margin-top: -6px; }
.ch-warn svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.ch-list { display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.ch-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border-up); border-radius: var(--r-ctl); background: var(--panel-up); font-size: 13px; }
.ch-row:not(.on) { opacity: .6; }
.ch-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ch-row.dragging { opacity: .35; }
.ch-row.over-top { box-shadow: 0 -2px 0 var(--accent); }
.ch-row.over-bot { box-shadow: 0 2px 0 var(--accent); }
.ch-grip { cursor: grab; color: var(--muted); letter-spacing: -2px; user-select: none; }
.ch-prev { margin: 12px 0 6px; padding: 10px 12px; border: 1px dashed var(--border-up); border-radius: var(--r-ctl); background: var(--field); }
.ch-prev .mono { margin-top: 4px; font-size: 12.5px; color: var(--ink); word-break: break-word; }
.combo-sub { margin-left: 8px; font-size: 11px; color: var(--muted); }
.combo-sep { padding: 6px 10px 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--border); }
.ch-home-zone { width: 100%; max-width: 520px; display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border: 1px solid var(--border-up); border-radius: var(--r-card); background: var(--panel); }
.ch-home-zone > span svg { width: 20px; height: 20px; color: var(--accent); }
.ch-home-zone > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ch-home-zone > div span { font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; }
.ch-zone-ov { z-index: 96; }
.ch-zone { width: min(560px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.ch-zone-p { margin: 0; padding: 10px 18px 6px; font-size: 13px; color: var(--ink-muted); line-height: 1.5; }
.ch-zone-b { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 18px 10px; }
.cz-c { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cz-l { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.cz-n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cz-regs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; padding: 6px 0 10px 26px; border-bottom: 1px solid var(--border); }
.cz-r { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; padding: 3px 0; }
.ch-tr-btn svg { width: 13px; height: 13px; }
.ch-tr { display: flex; flex-direction: column; gap: 8px; }
.ch-tr-ko { color: var(--warn); }

/* ─────────── Lot 5 (26/10/2026) : carte des reportages ─────────── */
.ca-box { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; text-align: left; }
.ca-head { display: flex; align-items: baseline; gap: 10px; }
.ca-head b { font-size: 14px; }
.ca-head span { font-size: 12px; color: var(--muted); }
.ca-map { height: 280px; border: 1px solid var(--border-up); border-radius: var(--r-card); overflow: hidden; background: var(--panel-mute); z-index: 0; }
.ca-off { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.ca-pin { display: flex; align-items: center; justify-content: center; }
.ca-pin span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); font: 700 10px/1 var(--sans); }
.ca-pop { display: flex; flex-direction: column; gap: 6px; font-family: var(--sans); min-width: 200px; }
.ca-pop > b { font-size: 13px; }
.ca-rep { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; padding-top: 6px; border-top: 1px solid #ddd; }
.ca-rep span { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-rep em { grid-column: 1; font-style: normal; font-size: 11px; color: #666; }
.ca-rep .btn { grid-row: 1 / 3; grid-column: 2; height: 26px; }
.ca-nolieu { display: flex; flex-direction: column; gap: 2px; }
.ca-nolieu .v4-tree-row { border: 0; background: transparent; width: 100%; font: inherit; font-size: 13px; }
.ca-nolieu em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--muted); }
.body.empty .welcome { max-width: 640px; }

/* ─────────── Lot 6 (26/10/2026) : pastille de reconnaissance faciale ─────────── */
.fpast { position: absolute; left: 6px; bottom: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; background: rgba(255,255,255,.88); box-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: auto; }
.fpast svg { width: 14px; height: 14px; }
.fpast.st-run { color: #777; background: rgba(255,255,255,.55); opacity: .7; animation: fpRun 1.4s ease-in-out infinite; }
@keyframes fpRun { 50% { opacity: .35; } }
.fpast.st-found { color: #111; background: rgba(255,255,255,.92); }
.fpast.st-sugg { background: #f5c518; }
.fpast.st-valid { background: #4caf50; }
.fpast.st-compl { background: #4a90e2; }
.fpast.st-none { background: rgba(255,255,255,.75); color: #111; }
.fpast.ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111, 0 1px 4px rgba(0,0,0,.4); }
.lrow-thumb .fpast, .v4-lcard-thumb .fpast { left: 4px; bottom: 4px; width: 18px; height: 18px; }
.fstrip-it .fpast { left: 4px; bottom: 4px; width: 16px; height: 16px; }
.fstrip-it .fpast svg { width: 11px; height: 11px; }
/* traduction : texte d'origine gardé */
.ch-tr-btn.on { border-color: var(--accent); color: var(--accent); }
.ch-tr-back { width: 100%; justify-content: center; }
.ch-tr-ban { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 0 6px; border-bottom: 1px dashed var(--border-up); }
.ch-tr-sp { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; border-radius: var(--r-chip); }
.ch-tr-sp svg { width: 12px; height: 12px; }
.ch-tr-sp em { font-style: normal; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.ch-tr-sp:hover { background: var(--accent-soft); }
.ch-tr-bk { height: 26px; font-size: 11.5px; }
.ch-tr-ban .ch-tr-orig { flex-basis: 100%; padding: 6px 8px; border-radius: var(--r-ctl); background: var(--panel-up); }
.ch-tr-orig { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-muted); line-height: 1.45; max-height: 120px; overflow-y: auto; }
.ch-tr-orig > span { font-size: 11px; color: var(--muted); }
.ch-tr-orig b { font-weight: 600; color: var(--ink); margin-right: 4px; }

/* ─────────── Accueil (27/10/2026) : ouvrir > reprendre > petite carte ─────────── */
.body.empty { align-items: flex-start; padding: 48px 24px 96px; }
.welcome.home2 { max-width: 620px; width: 100%; gap: 30px; margin: 0 auto; }
.h-open { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn.lg svg { width: 16px; height: 16px; }
.h-resume { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; padding-top: 22px; border-top: 1px solid var(--border-up); }
.h-resume-h { display: flex; align-items: center; gap: 12px; min-height: 76px; }
.h-resume-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
.h-cur { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--r-card); background: var(--accent-soft); }
.h-cur-t { flex: 1 1 200px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.h-cur-t b { font-size: 15px; }
.h-cur-t .meta { font-size: 12px; color: var(--muted); }
.h-recs { display: flex; flex-direction: column; }
.h-rec { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; border-radius: 0; }
.h-rec:hover { background: var(--panel-up); }
.h-rec svg { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.h-rec-n { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-rec-m { flex: 1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-rec-go { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent); opacity: 0; transition: opacity .12s; }
.h-rec:hover .h-rec-go, .h-rec:focus-visible .h-rec-go { opacity: 1; }
.h-rec-go svg { width: 12px; height: 12px; color: var(--accent); }
.h-maponly { width: 100%; display: flex; justify-content: flex-end; }
/* petite carte : aperçu, agrandi au survol, clic = grande carte */
.ca-inset { position: relative; z-index: 20; display: block; width: 132px; height: 76px; padding: 0; border: 1px solid var(--border-up); border-radius: var(--r-ctl); overflow: hidden; background: var(--panel-mute); cursor: zoom-in; transform-origin: top right; transition: transform .2s ease, box-shadow .2s; flex: 0 0 auto; }
.ca-inset:hover, .ca-inset:focus-visible { transform: scale(2.2); box-shadow: var(--shadow); outline: none; }
.ca-inset .ca-map { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; pointer-events: none; }
.ca-inset-lbl { position: absolute; left: 6px; bottom: 6px; z-index: 500; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 10px; background: var(--panel); color: var(--ink); font-size: 11px; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.ca-inset-lbl svg { width: 11px; height: 11px; }
.ca-big-ov { z-index: 96; }
.ca-big { width: min(1100px, 94vw); height: min(760px, 88vh); display: flex; flex-direction: column; overflow: hidden; }
.ca-big-n { margin-left: 10px; font-size: 12px; color: var(--muted); }
.ca-map-big { flex: 1; min-height: 0; }
.legend-line .cap-set { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 4px; border-radius: var(--r-chip); cursor: pointer; }
.legend-line .cap-set svg { width: 10px; height: 10px; opacity: .6; }
.legend-line .cap-set:hover { color: var(--accent); background: var(--accent-soft); }

/* langue de l'interface : petit sélecteur en bas à gauche de l'accueil */
.lm-lang { position: fixed; left: 20px; bottom: 20px; z-index: 6; }
.lm-lang-btn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: var(--r-ctl); border: 1px solid var(--border-up); background: var(--panel-up); color: var(--ink-2, var(--ink)); font: 600 12px var(--sans); letter-spacing: .04em; cursor: pointer; }
.lm-lang-btn span { font-size: 9px; opacity: .7; }
.lm-lang-btn:hover, .lm-lang-btn:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.lm-lang-menu { position: absolute; left: 0; bottom: 36px; min-width: 160px; padding: 4px; border-radius: var(--r-ctl); border: 1px solid var(--border-up); background: var(--panel-up); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.lm-lang-menu[hidden] { display: none; }
.lm-lang-menu button { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border: 0; background: none; color: var(--ink); font: 13px var(--sans); text-align: left; cursor: pointer; border-radius: calc(var(--r-ctl) - 2px); }
.lm-lang-menu button b { width: 22px; font-size: 11px; letter-spacing: .04em; color: var(--ink-3, var(--ink)); }
.lm-lang-menu button:hover { background: var(--hover, rgba(127,127,127,.12)); }
.lm-lang-menu button.on { color: var(--accent); }
.lm-lang-menu button.on b { color: var(--accent); }