/* Map 2D Packetifier — bundle.css (chargé après tokens.css). Préfixe des classes : pk-. */
/* ===== Packetifier — base ===== */
/* Préfixe de classe : pk-. Toutes les valeurs viennent des variables de tokens.css. */
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; }
.pk, .pk *, .pk *::before, .pk *::after { box-sizing: border-box; }
.pk { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); }
.pk-num, .pk-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pk-tnum { font-variant-numeric: tabular-nums; }
.pk-muted { color: var(--ink-2); }
.pk-faint { color: var(--ink-3); }
.pk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pk-overline-text { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.pk-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Mise en page des cartes de prévisualisation */
.pk-demo { padding: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pk-demo--col { flex-direction: column; align-items: stretch; }
.pk-demo--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: start; }
.pk-demo-label { font-size: 12px; line-height: 16px; color: var(--ink-3); margin: 0 0 var(--space-1); }
.pk-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.pk-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Focus clavier : unique pour tout le système */
.pk-focusable:focus { outline: none; }
.pk-focusable:focus-visible, .pk :focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }

/* Icônes */
.pk-icon { display: inline-block; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Indicateur de chargement */
.pk-spinner { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: var(--radius-full); border: 2px solid currentColor; border-right-color: transparent; animation: pk-spin 0.8s linear infinite; opacity: 0.9; }
.pk-spinner--lg { width: 24px; height: 24px; border-width: 2.5px; }
@keyframes pk-spin { to { transform: rotate(360deg); } }

/* Touche clavier */
.pk-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--line-control); border-bottom-width: 2px; background: var(--surface-2); color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .pk *, .pk *::before, .pk *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .pk-spinner { animation: pk-spin 2.4s linear infinite !important; }
}
@media (forced-colors: active) {
  .pk-focusable:focus-visible, .pk :focus-visible { outline: 2px solid Highlight; box-shadow: none; }
}

/* ===== Packetifier — composants transversaux ===== */

/* --- Button --- */
/* .is-hover / .is-active / .is-focus : états forcés pour les maquettes et la documentation uniquement. */
.pk-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid transparent; font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast); text-decoration: none; }
.pk-btn:focus { outline: none; }
.pk-btn:focus-visible, .pk-btn.is-focus { box-shadow: var(--focus-ring); }
.pk-btn--sm { height: var(--control-sm); padding: 0 var(--space-2); font-size: 13px; line-height: 18px; gap: 6px; border-radius: var(--radius-sm); }
.pk-btn--lg { height: var(--control-lg); padding: 0 var(--space-4); }
.pk-btn--block { display: flex; width: 100%; }
.pk-btn--primary { background: var(--accent); color: var(--on-accent); }
.pk-btn--primary:hover, .pk-btn--primary.is-hover { background: var(--accent-hover); }
.pk-btn--primary:active, .pk-btn--primary.is-active { background: var(--accent-pressed); }
.pk-btn--secondary { background: var(--surface-2); color: var(--ink); border-color: var(--line-control); }
.pk-btn--secondary:hover, .pk-btn--secondary.is-hover { background: var(--surface-3); }
.pk-btn--secondary:active, .pk-btn--secondary.is-active { background: var(--bg); }
.pk-btn--secondary.is-selected { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.pk-btn--ghost { background: transparent; color: var(--ink); }
.pk-btn--ghost:hover, .pk-btn--ghost.is-hover { background: var(--surface-2); }
.pk-btn--ghost:active, .pk-btn--ghost.is-active { background: var(--surface-3); }
.pk-btn--ghost.is-selected { background: var(--accent-soft); color: var(--accent); }
.pk-btn--danger { background: var(--danger-fill); color: var(--on-danger); }
.pk-btn--danger:hover, .pk-btn--danger.is-hover { filter: brightness(1.1); }
.pk-btn--danger:active, .pk-btn--danger.is-active { filter: brightness(0.92); }
.pk-btn--danger-quiet { background: transparent; color: var(--danger); border-color: var(--line-control); }
.pk-btn--danger-quiet:hover, .pk-btn--danger-quiet.is-hover { background: var(--danger-soft); border-color: var(--danger); }
.pk-btn[disabled], .pk-btn[aria-disabled="true"] { cursor: not-allowed; background: var(--surface-2); color: var(--ink-disabled); border-color: var(--line); filter: none; }
.pk-btn--ghost[disabled] { background: transparent; border-color: transparent; }
.pk-btn.is-loading { cursor: progress; }
.pk-btn.is-loading .pk-spinner { width: 14px; height: 14px; }
.pk-btn.is-success { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.pk-btn .pk-icon { width: var(--icon-sm); height: var(--icon-sm); }
.pk-btn--lg .pk-icon { width: var(--icon-md); height: var(--icon-md); }

/* --- IconButton --- */
.pk-iconbtn { width: var(--control-md); padding: 0; flex: none; }
.pk-iconbtn.pk-btn--sm { width: var(--control-sm); }
.pk-iconbtn.pk-btn--lg { width: var(--control-lg); }
.pk-iconbtn--map { width: var(--map-control); height: var(--map-control); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--line-control); color: var(--ink); }
.pk-iconbtn--map:hover, .pk-iconbtn--map.is-hover { background: var(--surface-3); }
.pk-iconbtn--map:active, .pk-iconbtn--map.is-active { background: var(--bg); }
.pk-iconbtn--map .pk-icon, .pk-iconbtn.pk-btn--md .pk-icon { width: var(--icon-md); height: var(--icon-md); }

/* --- Link --- */
.pk-link { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 3px; cursor: pointer; }
.pk-link:hover, .pk-link.is-hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.pk-link:focus { outline: none; }
.pk-link:focus-visible, .pk-link.is-focus { box-shadow: var(--focus-ring); }
.pk-link .pk-icon { width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; }
.pk-link--quiet { color: var(--ink-2); }

/* --- Field --- */
.pk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pk-field__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); display: flex; align-items: baseline; gap: var(--space-2); }
.pk-field__opt { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.pk-field__control { position: relative; display: flex; align-items: center; height: var(--control-md); border-radius: var(--radius-sm); border: 1px solid var(--line-control); background: var(--surface-2); transition: border-color var(--duration-fast); }
.pk-field--lg .pk-field__control { height: var(--control-lg); }
.pk-field__control:hover, .pk-field__control.is-hover { border-color: var(--ink-3); }
.pk-field__control:focus-within, .pk-field__control.is-focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.pk-field__input { flex: 1; min-width: 0; height: 100%; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; outline: none; }
.pk-field__input::placeholder { color: var(--ink-3); opacity: 1; }
.pk-field__input--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.pk-field__input[type="number"]::-webkit-inner-spin-button { opacity: 0.6; }
.pk-field__input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; }
.pk-field__adorn { display: flex; align-items: center; padding-left: var(--space-3); color: var(--ink-2); }
.pk-field__adorn .pk-icon { width: var(--icon-sm); height: var(--icon-sm); }
.pk-field__suffix { display: flex; align-items: center; gap: 2px; padding-right: 4px; color: var(--ink-2); }
.pk-field__suffix .pk-btn { height: 24px; }
.pk-field__unit { padding-right: var(--space-3); color: var(--ink-2); font-size: 13px; }
.pk-field__msg { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-field__msg .pk-icon { width: 14px; height: 14px; margin-top: 1px; }
.pk-field.is-error .pk-field__control { border-color: var(--danger); }
.pk-field.is-error .pk-field__msg { color: var(--danger); }
.pk-field.is-success .pk-field__control { border-color: var(--success); }
.pk-field.is-success .pk-field__msg { color: var(--success); }
.pk-field.is-disabled .pk-field__control { background: var(--surface-1); border-color: var(--line); }
.pk-field.is-disabled .pk-field__input, .pk-field.is-disabled .pk-field__label { color: var(--ink-disabled); cursor: not-allowed; }
.pk-field.is-readonly .pk-field__control { background: var(--surface-1); border-style: dashed; }

/* --- Badge --- */
.pk-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); }
.pk-badge .pk-icon { width: 13px; height: 13px; stroke-width: 1.8; }
.pk-badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pk-badge--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.pk-badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.pk-badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pk-badge--outline { background: transparent; color: var(--ink-2); border-color: var(--line-control); }
.pk-badge--proposal { background: transparent; color: var(--warning); border: 1px dashed var(--warning); }

/* --- StatusPill --- */
.pk-status { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 2px 10px 2px 8px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pk-status__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ink-3); flex: none; }
.pk-status__icon { width: 14px; height: 14px; }
.pk-status--active .pk-status__dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.pk-status--loading .pk-status__dot { background: var(--accent); animation: pk-pulse 1.2s ease-in-out infinite; }
.pk-status--warning .pk-status__dot { background: var(--warning); border-radius: 2px; transform: rotate(45deg); }
.pk-status--danger .pk-status__dot { background: var(--danger); border-radius: 1px; }
.pk-status--idle .pk-status__dot { background: transparent; border: 2px solid var(--ink-3); }
.pk-status--plain { background: transparent; border-color: transparent; padding-left: 0; }
@keyframes pk-pulse { 50% { opacity: 0.35; } }

/* --- InlineMessage --- */
.pk-msg { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 13px; line-height: 18px; }
.pk-msg__icon { width: var(--icon-md); height: var(--icon-md); flex: none; color: var(--ink-2); }
.pk-msg__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-msg__title { font-weight: 600; font-size: 14px; line-height: 20px; }
.pk-msg__text { color: var(--ink-2); }
.pk-msg__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.pk-msg--info { background: var(--accent-soft); border-color: transparent; }
.pk-msg--info .pk-msg__icon { color: var(--accent); }
.pk-msg--success { background: var(--success-soft); border-color: transparent; }
.pk-msg--success .pk-msg__icon { color: var(--success); }
.pk-msg--warning { background: var(--warning-soft); border-color: transparent; }
.pk-msg--warning .pk-msg__icon { color: var(--warning); }
.pk-msg--danger { background: var(--danger-soft); border-color: transparent; }
.pk-msg--danger .pk-msg__icon { color: var(--danger); }
.pk-msg--compact { padding: var(--space-2) var(--space-3); }
.pk-msg--compact .pk-msg__icon { width: var(--icon-sm); height: var(--icon-sm); margin-top: 1px; }

/* --- Toast --- */
.pk-toasts { display: flex; flex-direction: column; gap: var(--space-2); width: 360px; max-width: calc(100vw - 32px); }
.pk-toast { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-3); box-shadow: var(--shadow-popover); color: var(--ink); animation: pk-toast-in var(--duration-base) ease-out; }
.pk-toast__icon { width: var(--icon-md); height: var(--icon-md); flex: none; margin-top: 1px; }
.pk-toast__body { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.pk-toast__title { color: var(--ink); font-weight: 600; font-size: 14px; line-height: 20px; }
.pk-toast__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.pk-toast--success .pk-toast__icon { color: var(--success); }
.pk-toast--warning .pk-toast__icon { color: var(--warning); }
.pk-toast--danger .pk-toast__icon { color: var(--danger); }
.pk-toast--info .pk-toast__icon { color: var(--accent); }
@keyframes pk-toast-in { from { transform: translateY(6px); opacity: 0; } }

/* --- ProgressBar --- */
.pk-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pk-progress__head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; line-height: 18px; }
.pk-progress__label { color: var(--ink); font-weight: 500; }
.pk-progress__value { color: var(--ink-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.pk-progress__track { position: relative; height: 6px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; border: 1px solid var(--line); }
.pk-progress__fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); transition: width var(--duration-base); }
.pk-progress--success .pk-progress__fill { background: var(--success); }
.pk-progress--danger .pk-progress__fill { background: var(--danger); }
.pk-progress.is-indeterminate .pk-progress__fill { width: 35%; animation: pk-indet 1.4s ease-in-out infinite; }
.pk-progress__detail { font-size: 12px; line-height: 16px; color: var(--ink-2); }
@keyframes pk-indet { 0% { left: -35%; } 100% { left: 100%; } }

/* --- Panel --- */
.pk-panel { display: flex; flex-direction: column; min-height: 0; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.pk-panel--flush { border-radius: 0; border-width: 0; }
.pk-panel__head { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--line); flex: none; }
.pk-panel__title { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.pk-panel__title .pk-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--ink-2); }
.pk-panel__actions { display: flex; align-items: center; gap: 2px; }
.pk-panel__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4); scrollbar-width: thin; scrollbar-color: var(--line-control) transparent; }
.pk-panel__body--flush { padding: 0; }
.pk-panel__foot { flex: none; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); display: flex; gap: var(--space-2); align-items: center; background: var(--surface-1); }
.pk-panel.is-collapsed .pk-panel__body, .pk-panel.is-collapsed .pk-panel__foot { display: none; }
.pk-panel.is-collapsed .pk-panel__head { border-bottom: 0; }

/* --- Section (bloc repliable dans un panneau) --- */
.pk-section { border-top: 1px solid var(--line); }
.pk-section:first-child { border-top: 0; }
.pk-section__head { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 36px; padding: var(--space-2) var(--space-4); background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; cursor: default; }
button.pk-section__head { cursor: pointer; }
button.pk-section__head:hover { color: var(--ink); }
.pk-section__head .pk-icon { width: 14px; height: 14px; transition: transform var(--duration-fast); }
.pk-section.is-collapsed .pk-section__head .pk-icon--chev { transform: rotate(-90deg); }
.pk-section__aside { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-3); }
.pk-section__body { padding: 0 var(--space-4) var(--space-4); }
.pk-section.is-collapsed .pk-section__body { display: none; }

/* --- KeyValue --- */
.pk-kv { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 6px var(--space-3); margin: 0; font-size: 13px; line-height: 18px; }
.pk-kv dt { color: var(--ink-2); }
.pk-kv dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.pk-kv dd.is-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Dialog --- */
.pk-scrim { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); background: var(--map-dim); animation: pk-fade var(--duration-base); }
.pk-scrim--contained { position: absolute; }
.pk-scrim { grid-template-columns: minmax(0, max-content); justify-content: center; }
.pk-scrim > .pk-dialog { min-width: 0; }
.pk-dialog { width: 440px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); color: var(--ink); animation: pk-pop var(--duration-base) ease-out; }
.pk-dialog__head { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-5) var(--space-5) 0; }
.pk-dialog__icon { width: 24px; height: 24px; flex: none; color: var(--accent); margin-top: 2px; }
.pk-dialog--danger .pk-dialog__icon { color: var(--danger); }
.pk-dialog__title { margin: 0; flex: 1; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
.pk-dialog__body { padding: var(--space-3) var(--space-5) var(--space-5); overflow: auto; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.pk-dialog__body p { margin: 0 0 var(--space-3); }
.pk-dialog__body p:last-child { margin-bottom: 0; }
.pk-dialog__body strong { color: var(--ink); }
.pk-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); flex-wrap: wrap-reverse; }
@keyframes pk-fade { from { opacity: 0; } }
@keyframes pk-pop { from { transform: translateY(8px) scale(0.98); opacity: 0; } }

/* --- Tooltip --- */
.pk-tip-wrap { position: relative; display: inline-flex; }
.pk-tip { position: absolute; z-index: var(--z-tooltip); left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); max-width: var(--tooltip-max-w); width: max-content; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-3); box-shadow: var(--shadow-popover); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 500; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--duration-fast); }
.pk-tip--bottom { bottom: auto; top: calc(100% + 8px); }
.pk-tip--right { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
.pk-tip--left { left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%); }
.pk-tip-wrap:hover > .pk-tip, .pk-tip-wrap:focus-within > .pk-tip, .pk-tip.is-open { opacity: 1; visibility: visible; }
.pk-tip--static { position: static; transform: none; opacity: 1; visibility: visible; }
.pk-tip .pk-kbd { height: 18px; min-width: 18px; font-size: 11px; margin-left: 6px; }

/* --- Tabs --- */
.pk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pk-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 var(--space-3); background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.pk-tab:hover, .pk-tab.is-hover { color: var(--ink); background: var(--surface-2); }
.pk-tab:focus { outline: none; }
.pk-tab:focus-visible, .pk-tab.is-focus { box-shadow: var(--focus-ring); }
.pk-tab[aria-selected="true"] { color: var(--ink); }
.pk-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.pk-tab__count { font-family: var(--font-mono); font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-2); font-weight: 500; }

/* --- DataTable --- */
.pk-table-wrap { container-type: inline-size; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); overflow: hidden; }
.pk-table-scroll { overflow: auto; max-height: inherit; }
.pk-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.pk-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--ink-2); font-weight: 600; text-align: left; height: 36px; padding: 0 var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pk-table td { height: 44px; padding: 6px var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
.pk-table tr:last-child td { border-bottom: 0; }
.pk-table tbody tr:hover td { background: var(--surface-2); }
.pk-table tbody tr.is-selected td { background: var(--accent-soft); }
.pk-table tbody tr.is-clickable { cursor: pointer; }
.pk-table .is-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pk-table .is-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pk-table .is-actions { text-align: right; white-space: nowrap; width: 1%; }
.pk-table .is-actions .pk-row { justify-content: flex-end; flex-wrap: nowrap; }
.pk-table__cell-name { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pk-table-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-2); }
.pk-table-loading td { color: var(--ink-3); }
.pk-skel { display: inline-block; height: 10px; border-radius: 4px; background: var(--surface-3); animation: pk-pulse 1.4s ease-in-out infinite; }
/* Mode cartes sous 600 px de conteneur */
@container (max-width: 600px) {
  .pk-table--stack thead { display: none; }
  .pk-table--stack, .pk-table--stack tbody, .pk-table--stack tr, .pk-table--stack td { display: block; width: 100%; }
  .pk-table--stack tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  .pk-table--stack tr:last-child { border-bottom: 0; }
  .pk-table--stack td { height: auto; padding: 2px 0; border: 0; display: flex; justify-content: space-between; gap: var(--space-3); text-align: right; }
  .pk-table--stack td::before { content: attr(data-label); color: var(--ink-2); font-family: var(--font-sans); font-weight: 500; text-align: left; flex: none; }
  .pk-table--stack td.is-primary { display: block; text-align: left; font-size: 14px; padding-bottom: 6px; }
  .pk-table--stack td.is-primary::before { content: none; }
  .pk-table--stack td.is-actions { width: 100%; padding-top: var(--space-2); }
  .pk-table--stack td.is-actions::before { content: none; }
  .pk-table--stack td.is-actions .pk-row { justify-content: stretch; width: 100%; }
  .pk-table--stack td.is-actions .pk-btn { flex: 1; }
  .pk-table--stack .pk-table__cell-name { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .pk-table--stack tbody tr:hover td { background: transparent; }
  .pk-table--stack tbody tr.is-selected { background: var(--accent-soft); }
  .pk-table--stack tbody tr.is-selected td { background: transparent; }
}

/* --- WindowFrame (maquette de fenêtre Windows 11) --- */
.pk-window { position: relative; display: flex; flex-direction: column; background: var(--surface-1); border-radius: 8px; box-shadow: var(--shadow-window); overflow: hidden; color: var(--ink); font-family: var(--font-sans); }
.pk-window.is-inactive .pk-window__bar { color: var(--ink-3); }
.pk-window__bar { display: flex; align-items: stretch; height: var(--titlebar-h); flex: none; background: var(--surface-2); user-select: none; border-bottom: 1px solid var(--line); }
.pk-window__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); padding-left: var(--space-3); font-size: 12px; line-height: 16px; color: var(--ink); }
.pk-window__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-window__ctl { width: 46px; display: grid; place-items: center; background: none; border: 0; color: var(--ink-2); cursor: default; padding: 0; }
.pk-window__ctl:hover { background: var(--surface-3); color: var(--ink); }
.pk-window__ctl--close:hover { background: #c42b1c; color: #ffffff; }
.pk-window__ctl:focus { outline: none; }
.pk-window__ctl:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.pk-window__ctl svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; }
.pk-window__ctl[disabled] { color: var(--ink-disabled); }
.pk-window__ctl[disabled]:hover { background: none; }
.pk-window__body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: auto; }
.pk-window__grip { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; color: var(--ink-3); pointer-events: none; }

/* --- EmptyState --- */
.pk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); color: var(--ink-2); }
.pk-empty__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); margin-bottom: var(--space-1); }
.pk-empty__icon .pk-icon { width: var(--icon-md); height: var(--icon-md); }
.pk-empty--danger .pk-empty__icon { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.pk-empty--warning .pk-empty__icon { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.pk-empty--success .pk-empty__icon { color: var(--success); background: var(--success-soft); border-color: transparent; }
.pk-empty--loading .pk-empty__icon { color: var(--accent); }
.pk-empty__title { margin: 0; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 600; }
.pk-empty__text { margin: 0; max-width: 360px; font-size: 13px; line-height: 18px; }
.pk-empty__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }

/* --- CopyButton --- */
.pk-copy.is-copied, .pk-copy.is-copied:hover { background: var(--success-soft); color: var(--success); border-color: var(--success); }

/* --- AppMark --- */
.pk-mark { display: inline-block; flex: none; vertical-align: middle; }

/* --- ZoneSwatch : pastille de statut de case (mêmes motifs que la carte) --- */
.pk-swatch { --sw: 14px; display: inline-block; flex: none; width: var(--sw); height: var(--sw); border-radius: 3px; position: relative; vertical-align: middle; box-shadow: inset 0 0 0 1px #00000059; }
.pk-swatch--lg { --sw: 20px; border-radius: 4px; }
.pk-swatch--free { background: var(--zone-free); box-shadow: inset 0 0 0 1px var(--line-control); }
.pk-swatch--claim { background: var(--sw-color, var(--faction-01)); }
.pk-swatch--safe { background: radial-gradient(circle at 50% 50%, var(--zone-safe-mark) 0 1.2px, transparent 1.6px) 0 0 / 5px 5px, var(--zone-safe); }
.pk-swatch--war { background: repeating-linear-gradient(-45deg, var(--zone-war-mark) 0 1.5px, transparent 1.5px 4.5px), var(--zone-war); }
.pk-swatch--protected { background: repeating-linear-gradient(0deg, var(--zone-protected-mark) 0 1.5px, transparent 1.5px 4px), var(--zone-protected); }
.pk-swatch--unknown { background: repeating-linear-gradient(45deg, var(--zone-unknown-mark) 0 1px, transparent 1px 4px), var(--zone-unknown); box-shadow: inset 0 0 0 1px var(--zone-unknown-mark); }
.pk-swatch--unseen { background: var(--bg); box-shadow: inset 0 0 0 1px var(--map-border); border: 1px dashed transparent; }
.pk-swatch--unseen::after { content: ""; position: absolute; inset: 2px; border: 1px dashed var(--ink-3); border-radius: 1px; }
.pk-swatch--stale::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 6px 6px 0; border-color: transparent var(--map-stale) transparent transparent; }
.pk-swatch.is-dimmed { opacity: 0.35; }
.pk-field.is-hover .pk-field__control { border-color: var(--ink-3); }
.pk-field.is-focus .pk-field__control { border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ===== Packetifier — carte ===== */

/* --- MapCanvas --- */
.pk-map-canvas { position: relative; width: 100%; height: 100%; min-height: 120px; overflow: hidden; background: var(--bg); user-select: none; touch-action: none; }
.pk-map-canvas__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; outline: none; }
.pk-map-canvas.is-dragging .pk-map-canvas__cv { cursor: grabbing; }
.pk-map-canvas__ring { position: absolute; inset: 0; pointer-events: none; border-radius: 2px; }
.pk-map-canvas__cv:focus-visible ~ .pk-map-canvas__ring { box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 4px var(--focus); }
.pk-map-north { position: absolute; right: 8px; z-index: var(--z-map-controls); display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--line-control); color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; pointer-events: none; }
.pk-map-north .pk-icon { color: var(--accent); }

/* --- MapTooltip --- */
.pk-map-tip { position: absolute; z-index: var(--z-tooltip); max-width: var(--tooltip-max-w); min-width: 160px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-3); box-shadow: var(--shadow-popover); color: var(--ink); pointer-events: none; display: flex; flex-direction: column; gap: 2px; }
.pk-map-tip.is-static { position: relative; visibility: visible !important; }
.pk-map-tip__title { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 600; min-width: 0; }
.pk-map-tip__coord { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; color: var(--ink); }
.pk-map-tip__meta { font-size: 12px; line-height: 16px; color: var(--ink-2); }

/* --- MapControls --- */
.pk-map-ctl { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pk-map-ctl__group { display: flex; flex-direction: column; }
.pk-map-ctl__group .pk-tip-wrap:first-child .pk-iconbtn--map { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pk-map-ctl__group .pk-tip-wrap:last-child .pk-iconbtn--map { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }
.pk-map-ctl .pk-iconbtn--map[disabled] { background: var(--surface-1); color: var(--ink-disabled); border-color: var(--line); }
.pk-map-help { position: absolute; right: calc(100% + 8px); bottom: 0; width: 300px; padding: 12px; border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--shadow-popover); z-index: var(--z-tooltip); }
.pk-map-help__head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.pk-map-help__list { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; align-items: center; font-size: 13px; line-height: 18px; }
.pk-map-help__list dt { display: flex; gap: 3px; flex-wrap: wrap; }
.pk-map-help__list dd { margin: 0; color: var(--ink-2); }
.pk-map-help__foot { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* --- MapHeader --- */
.pk-map-head { display: flex; align-items: center; gap: 12px; height: var(--header-h); padding: 0 8px 0 12px; background: var(--surface-1); border-bottom: 1px solid var(--line); flex: none; min-width: 0; }
.pk-map-head__brand { display: flex; align-items: center; gap: 8px; flex: none; }
.pk-map-head__name { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.pk-map-head__sep { width: 1px; height: 20px; background: var(--line); flex: none; }
.pk-map-head__world { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink-2); white-space: nowrap; }
.pk-map-head__spacer { flex: 1; min-width: 8px; }
.pk-map-head__status { min-width: 0; max-width: 46%; overflow: hidden; }
.pk-map-head__status > span:not(.pk-status__dot) { overflow: hidden; text-overflow: ellipsis; }
.pk-map-head__detail { color: var(--ink-2); font-weight: 400; }
.pk-map-head__account { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink); max-width: 160px; min-width: 0; }
.pk-map-head__actions { display: flex; align-items: center; gap: 4px; }
.pk-map-head.is-compact .pk-map-head__world, .pk-map-head.is-compact .pk-map-head__detail, .pk-map-head.is-compact .pk-map-head__sep { display: none; }
.pk-map-head.is-compact .pk-map-head__name { font-size: 13px; }
.pk-map-head.is-compact .pk-map-head__account { max-width: 96px; }

/* --- MapFooter --- */
.pk-map-foot { display: flex; align-items: center; gap: 16px; height: var(--footer-h); padding: 0 12px; background: var(--surface-1); border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; flex: none; container-type: inline-size; }
.pk-map-foot__cursor { display: inline-flex; gap: 8px; align-items: baseline; min-width: 0; color: var(--ink); }
.pk-map-foot__k { color: var(--ink-2); }
.pk-map-foot__spacer { flex: 1; }
.pk-map-foot .pk-mono { color: var(--ink); }
.pk-map-foot__blocks.pk-mono { color: var(--ink-2); }
@container (max-width: 900px) { .pk-map-foot__bounds { display: none; } }
@container (max-width: 720px) { .pk-map-foot__blocks { display: none; } }
@container (max-width: 520px) { .pk-map-foot__count { display: none; } }

/* --- MapLegend --- */
.pk-map-legend { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--surface-1); color: var(--ink); }
.pk-map-legend__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--line); flex: none; }
.pk-map-legend__title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.pk-map-legend__title .pk-icon { color: var(--ink-2); }
.pk-map-legend__filter { margin: 8px; padding: 8px 8px 10px 10px; border-radius: var(--radius-md); background: var(--accent-soft); border: 1px solid var(--accent); flex: none; }
.pk-map-legend__filterrow { display: flex; align-items: center; gap: 6px; color: var(--accent); }
.pk-map-legend__filterlabel { flex: 1; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pk-map-legend__clear { margin-top: 8px; }
.pk-map-legend__filtername { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 600; }
.pk-map-legend__filtername .pk-swatch { margin-top: 3px; }
.pk-map-legend__filterhint { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-map-legend__statuses { padding: 8px 0 4px; border-bottom: 1px solid var(--line); flex: none; }
.pk-map-legend__sub { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 12px 6px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.pk-map-legend__subaside { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ink-3); }
.pk-map-legend__rows { list-style: none; margin: 0; padding: 0 4px; }
.pk-map-legend__row { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 8px; font-size: 13px; line-height: 18px; }
.pk-map-legend__label { flex: 1; min-width: 0; }
.pk-map-legend__n { color: var(--ink-2); font-size: 12px; }
.pk-map-legend__factions { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: 8px; }
.pk-map-legend__search { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 12px 8px; }
.pk-map-legend__search .pk-field { width: 100%; }
.pk-map-legend__list { list-style: none; margin: 0; padding: 0 4px 8px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line-control) transparent; }
.pk-map-frow { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--control-sm); padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 18px; text-align: left; cursor: pointer; }
.pk-map-frow:hover { background: var(--surface-2); }
.pk-map-frow:focus { outline: none; }
.pk-map-frow:focus-visible { box-shadow: var(--focus-ring); position: relative; z-index: 1; }
.pk-map-frow.is-on { background: var(--accent-soft); font-weight: 600; }
.pk-map-frow.is-dim { color: var(--ink-2); }
.pk-map-frow__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-map-frow__tag { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.pk-map-frow__n { font-size: 12px; color: var(--ink-2); }
.pk-map-frow__check { color: var(--accent); width: 16px; height: 16px; }
.pk-map-legend__none { padding: 12px; font-size: 13px; color: var(--ink-2); }
.pk-map-legend.is-rail { width: 48px; align-items: center; padding: 6px 0; gap: 8px; border-right: 1px solid var(--line); }
.pk-map-legend__railf { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.pk-map-legend__railsw { display: inline-flex; padding: 4px; border-radius: var(--radius-sm); outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- MapWorkspace --- */
.pk-map-ws { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--bg); overflow: hidden; }
.pk-map-ws__main { position: relative; flex: 1; min-height: 0; display: flex; }
.pk-map-ws__legend { flex: none; width: var(--legend-w); min-height: 0; border-right: 1px solid var(--line); background: var(--surface-1); z-index: var(--z-panel); }
.pk-map-ws--medium .pk-map-ws__legend { width: 48px; border-right: 0; }
.pk-map-ws--medium .pk-map-ws__legend.is-overlay { position: absolute; top: 0; bottom: 0; left: 0; width: var(--legend-w); box-shadow: var(--shadow-popover); }
.pk-map-ws__legend.is-popover { position: absolute; top: 8px; left: 8px; bottom: 8px; width: min(var(--legend-w), calc(100% - 16px)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-popover); }
.pk-map-ws__map { position: relative; flex: 1; min-width: 0; min-height: 0; }
.pk-map-ws__ctl { position: absolute; right: 12px; bottom: 12px; z-index: var(--z-map-controls); }
.pk-map-ws__banner { position: absolute; top: 36px; left: 36px; right: 64px; z-index: var(--z-map-controls); max-width: 560px; }
.pk-map-ws__toast { position: absolute; right: 12px; top: 72px; z-index: var(--z-toast); width: 340px; }
.pk-map-ws__insp { flex: none; width: var(--inspector-w); min-width: 320px; max-width: 400px; min-height: 0; border-left: 1px solid var(--line); background: var(--surface-1); z-index: var(--z-panel); }
.pk-map-ws--medium .pk-map-ws__insp { width: 320px; }
.pk-map-ws__insp.is-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 100%); min-width: 0; box-shadow: var(--shadow-popover); }
.pk-map-ws__block { position: absolute; inset: 0; z-index: var(--z-panel); display: grid; place-items: center; background: var(--bg); }
.pk-map-proto { position: absolute; left: 36px; bottom: 12px; z-index: var(--z-map-controls); display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: var(--radius-md); background: var(--surface-1); border: 1px dashed var(--warning); box-shadow: var(--shadow-popover); white-space: nowrap; }
.pk-map-proto__tag { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pk-map-proto__sel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-map-proto__select { height: var(--control-sm); padding: 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--line-control); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; }
.pk-map-proto__select:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --- pages de démonstration --- */
.pk-map-page { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pk-map-frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--bg); }
.pk-map-cap { display: flex; flex-direction: column; gap: 2px; }
.pk-map-cap__t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.pk-map-cap__d { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-map-rules { margin: 0; padding-left: 18px; font-size: 12px; line-height: 18px; color: var(--ink-2); }
.pk-map-rules li { margin: 2px 0; }
.pk-map-rules code { font-family: var(--font-mono); color: var(--ink); font-size: 12px; }

/* ===== Packetifier — inspecteur de chunk ===== */
.pk-insp { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--surface-1); color: var(--ink); }
.pk-insp__head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--line); flex: none; }
.pk-insp__head > .pk-swatch { margin-top: 3px; }
.pk-insp__ico { width: 20px; height: 20px; color: var(--ink-2); margin-top: 1px; }
.pk-insp__titles { flex: 1; min-width: 0; }
.pk-insp__title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.pk-insp__sub { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-insp__sub .pk-mono { color: var(--ink); }
.pk-insp__actions { display: flex; gap: 2px; flex: none; }
.pk-insp__body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-control) transparent; outline: none; }
.pk-insp__body:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.pk-insp__body--empty { display: flex; flex-direction: column; justify-content: center; padding: 16px; }
.pk-insp__new { padding: 12px 16px 0; }
.pk-insp__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--line); flex: none; background: var(--surface-1); }
.pk-insp__footnote { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--ink-3); white-space: nowrap; }
.pk-insp__count { margin-left: 2px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--surface-3); font-size: 11px; line-height: 16px; font-weight: 500; color: var(--ink-2); }
.pk-insp--drawer .pk-insp__footnote { display: none; }
.pk-insp-keys { display: flex; flex-direction: column; gap: 8px; margin: 8px auto 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-insp-keys > div { display: flex; align-items: center; gap: 4px; }
.pk-insp-keys span { margin-left: 4px; }

/* bloc « Dernier relevé » : toujours en premier */
.pk-insp-block { padding: 12px 16px 16px; transition: background-color var(--duration-slow); }
.pk-insp-block.is-flash { background: var(--accent-soft); }
.pk-insp-block__title { margin: 0 0 10px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.pk-insp-kv { margin-top: 12px; grid-template-columns: 112px 1fr; }
.pk-insp-statusval { display: inline-flex; align-items: center; gap: 6px; }
.pk-insp-statusval .pk-icon { color: var(--ink-2); }
.pk-insp-fname { font-weight: 600; }
.pk-insp-inline { margin-left: 6px; vertical-align: 1px; }
.pk-insp-blocks { display: flex; flex-direction: column; }
.pk-insp-when { display: flex; flex-direction: column; }
.pk-insp-ago { font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-insp-stamp { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-insp-stamp__d { color: var(--ink-2); }
.pk-insp-stamp__t { color: var(--ink); }
.pk-insp-stamp__ms { color: var(--ink-2); font-size: 0.92em; }
.pk-insp-note { margin: 10px 0 0; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.pk-insp-note code { color: var(--ink); background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
.pk-insp-copy { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pk-insp-empty { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* preuve */
.pk-insp-proof { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pk-insp-proof__txt { font-size: 12px; line-height: 17px; color: var(--ink-2); }
.pk-insp-proof__chip { display: inline-flex; flex-direction: column; align-items: stretch; border: 1px solid var(--success); border-radius: var(--radius-sm); overflow: hidden; max-width: 100%; }
.pk-insp-proof__ok { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--success-soft); color: var(--success); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.pk-insp-proof__at { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 8px; font-size: 12px; line-height: 16px; color: var(--ink-2); border-top: 1px solid var(--success); min-width: 0; flex-wrap: wrap; }
.pk-insp-proof__at strong { font-size: 13px; }
.pk-insp-proof__at strong { color: var(--ink); }

/* hypothèses */
.pk-insp-hyp { border: 1px dashed var(--line-control); border-radius: var(--radius-md); padding: 10px 12px 12px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.pk-insp-hyp__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pk-insp-hyp__since { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-insp-hyp__sub { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); }
.pk-insp-hyp__basis { margin: 2px 0 0; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.pk-insp-hyp__none { display: flex; flex-direction: column; gap: 4px; }
.pk-insp-hyp__nonetitle { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; }
.pk-insp-hyp__nonetitle .pk-icon { color: var(--ink-2); }
.pk-insp-hyp__none p { margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.pk-insp-hyp__reset { display: flex; align-items: center; gap: 6px; margin: 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.pk-insp-out { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pk-insp-out__line { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; }
.pk-insp-out__ico { color: var(--ink-2); }
.pk-insp-out__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pk-insp-out__line2 { display: flex; align-items: center; gap: 10px; margin: 4px 0 0 22px; }
.pk-insp-out__n { font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap; }
.pk-insp-out__n strong { color: var(--ink); font-weight: 600; }
.pk-insp-out__bar { flex: 1; min-width: 48px; height: 4px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.pk-insp-out__bar span { display: block; height: 100%; border-radius: inherit; background: var(--ink-3); }
.pk-insp-out__row:first-child .pk-insp-out__bar span { background: var(--ink-2); }
.pk-insp-prox ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-insp-prox li { display: flex; gap: 8px; font-size: 12px; line-height: 17px; color: var(--ink); }
.pk-insp-prox li .pk-icon { color: var(--ink-2); margin-top: 1px; }
.pk-insp-prox__detail { color: var(--ink-2); }
.pk-insp-prox__tag { font-weight: 500; color: var(--ink-3); font-size: 12px; }
.pk-insp-prox__tag::before { content: "\00b7  "; }
.pk-insp-prox__empty { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* signaux */
.pk-insp-sigs { display: flex; flex-direction: column; gap: 8px; }
.pk-insp-sig { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.pk-insp-sig--overclaim { border-color: var(--danger); }
.pk-insp-sig--reconciliation { border-style: dashed; border-color: var(--accent); }
.pk-insp-sig__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk-insp-sig__ico { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-2); flex: none; }
.pk-insp-sig--confirmed .pk-insp-sig__ico { background: var(--success-soft); color: var(--success); }
.pk-insp-sig--reconciliation .pk-insp-sig__ico { background: var(--accent-soft); color: var(--accent); }
.pk-insp-sig--overclaim .pk-insp-sig__ico { background: var(--danger-soft); color: var(--danger); }
.pk-insp-sig__title { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 600; }
.pk-insp-sig__text { margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-2); }
.pk-insp-sig__kv { font-size: 12px; line-height: 16px; grid-template-columns: 104px 1fr; gap: 4px 10px; }
.pk-insp-sig__counts { display: flex; flex-direction: column; gap: 2px; }
.pk-insp-sig__counts > span { display: inline-flex; align-items: center; gap: 4px; }

/* historique */
.pk-insp-hist { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pk-insp-tl { list-style: none; margin: 0; padding: 0; width: 100%; }
.pk-insp-tl__item { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.pk-insp-tl__item::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--line-control); }
.pk-insp-tl__item:last-child { padding-bottom: 0; }
.pk-insp-tl__item:last-child::before { display: none; }
.pk-insp-tl__node { width: 11px; height: 11px; margin-top: 4px; flex: none; border-radius: var(--radius-full); border: 2px solid var(--ink-3); background: var(--surface-1); position: relative; z-index: 1; }
.pk-insp-tl__item.is-latest .pk-insp-tl__node { border-color: var(--ink); background: var(--ink); }
.pk-insp-tl__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-insp-tl__change { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; line-height: 18px; font-weight: 600; }
.pk-insp-tl__side { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.pk-insp-tl__arrow { color: var(--ink-3); }
.pk-insp-tl__when { display: flex; flex-direction: column; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-insp-tl__when .pk-mono { color: var(--ink); }
.pk-insp-tl__gap { color: var(--ink-3); }
.pk-insp-tl__gap .pk-mono { color: var(--ink-2); }
.pk-insp-tl__ids { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-insp-tl__note { margin: 0; font-size: 12px; line-height: 17px; color: var(--ink-2); padding: 6px 8px; border-radius: var(--radius-sm); background: var(--surface-2); }
.pk-insp-hist__foot { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* fiche */
.pk-insp-sheet { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pk-insp-sheet .pk-kv { width: 100%; grid-template-columns: 112px 1fr; }
.pk-insp-sheet .pk-insp-note { margin: 0; }

/* galeries */
.pk-insp-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px; align-items: start; }
.pk-insp-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pk-insp-card__frame { height: 640px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.pk-insp-card__t { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.pk-insp-card__d { font-size: 12px; line-height: 16px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .pk-insp-block { transition: none; } }

/* ===== Packetifier — lecteur Windows, fenêtre carte, mise à jour, installateur ===== */

/* --- ReaderWindow : contenu défilant + pied d'actions fixe --- */
.pk-reader-win { min-width: 460px; max-width: 640px; }
.pk-reader { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; background: var(--surface-1); }
.pk-reader__main { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); scrollbar-width: thin; scrollbar-color: var(--line-control) transparent; }
.pk-reader__main--dense { gap: var(--space-3); }
.pk-reader__foot { flex: none; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--surface-1); flex-wrap: wrap; }
.pk-reader__spacer { flex: 1 1 0; min-width: 0; }
.pk-reader__foot > .pk-btn--primary:last-child { margin-left: auto; }
.pk-reader-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.pk-reader-head__text { flex: 1; min-width: 0; }
.pk-reader-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.pk-reader-lead { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.pk-btn--ghost.pk-reader-danger-ghost { color: var(--danger); }
.pk-btn--ghost.pk-reader-danger-ghost:hover { background: var(--danger-soft); }

/* Réglages avancés repliables */
.pk-reader-advwrap { display: flex; flex-direction: column; gap: var(--space-2); margin-top: calc(var(--space-1) * -1); }
.pk-reader-adv { display: flex; align-items: center; gap: var(--space-2); width: calc(100% + 16px); min-height: var(--control-sm); margin: 0 -8px; padding: 4px 8px; background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink-2); font: inherit; font-size: 13px; line-height: 18px; font-weight: 500; text-align: left; cursor: pointer; }
.pk-reader-adv:hover { background: var(--surface-2); color: var(--ink); }
.pk-reader-adv:focus { outline: none; }
.pk-reader-adv:focus-visible { box-shadow: var(--focus-ring); }
.pk-reader-adv .pk-icon--chev { transition: transform var(--duration-fast); }
.pk-reader-adv[aria-expanded="false"] .pk-icon--chev { transform: rotate(-90deg); }
.pk-reader-adv__sum { margin-left: auto; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pk-reader-advbody { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }

/* --- ReaderHome --- */
.pk-reader-id { display: flex; align-items: center; gap: var(--space-3); }
.pk-reader-id__text { flex: 1; min-width: 0; }
.pk-reader-id__name { font-size: 16px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-reader-id__meta { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-reader-id__meta .pk-mono { color: var(--ink); }
.pk-reader-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.pk-reader-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.pk-reader-tile__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.pk-reader-tile__value { display: flex; align-items: center; min-height: 24px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-reader-tile__value .pk-status { font-size: 14px; font-weight: 600; }
.pk-reader-tile__note { font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- CaptureStatus --- */
.pk-reader-cap { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-3); row-gap: 2px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.pk-reader-cap__icon { grid-row: 1 / span 3; width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-3); color: var(--ink-2); }
.pk-reader-cap--loading .pk-reader-cap__icon { background: var(--accent-soft); color: var(--accent); }
.pk-reader-cap--active .pk-reader-cap__icon { background: var(--success-soft); color: var(--success); }
.pk-reader-cap--warning .pk-reader-cap__icon { background: var(--warning-soft); color: var(--warning); }
.pk-reader-cap--danger { border-color: var(--danger-soft); }
.pk-reader-cap--danger .pk-reader-cap__icon { background: var(--danger-soft); color: var(--danger); }
.pk-reader-cap__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pk-reader-cap__label { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.pk-reader-cap__pill { font-size: 12px; line-height: 16px; min-height: 20px; padding-right: 0; flex: none; }
.pk-reader-cap__text { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.pk-reader-cap__foot { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin-top: 6px; }
.pk-reader-cap__meta { font-size: 12px; line-height: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pk-reader-cmd { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 1px 0 10px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line-control); }
.pk-reader-cmd code { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink); margin-right: 4px; }
.pk-reader-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-reader-flag.is-on .pk-icon { color: var(--success); }
.pk-reader-flag.is-off .pk-icon { color: var(--danger); }

/* --- UpdatePanel --- */
.pk-upd-head { display: flex; align-items: center; gap: var(--space-1); margin: -4px 0 -4px -8px; }
.pk-upd-versions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.pk-upd-ver { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.pk-upd-ver__label { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-upd-ver__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.pk-upd-ver__value.is-new { color: var(--accent); }
.pk-upd-ver__arrow { color: var(--ink-3); }
.pk-upd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pk-upd-steps--tight { gap: 2px; }
.pk-upd-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 20px; color: var(--ink); }
.pk-upd-step__icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: var(--ink-3); }
.pk-upd-step__dot { width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--ink-3); }
.pk-upd-step.is-done .pk-upd-step__icon { color: var(--success); }
.pk-upd-step.is-active .pk-upd-step__icon { color: var(--accent); }
.pk-upd-step.is-active .pk-spinner { width: 14px; height: 14px; }
.pk-upd-step.is-error .pk-upd-step__icon { color: var(--danger); }
.pk-upd-step.is-error { color: var(--danger); font-weight: 600; }
.pk-upd-step.is-pending { color: var(--ink-2); }
.pk-upd-step__detail { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 400; }
.pk-upd-busy { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--accent); padding: var(--space-2) 0; }
.pk-upd-busy .pk-spinner { margin-top: 2px; }
.pk-upd-result { display: flex; gap: var(--space-3); align-items: flex-start; }
.pk-upd-result__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-3); color: var(--ink-2); }
.pk-upd-result--success .pk-upd-result__icon { background: var(--success-soft); color: var(--success); }
.pk-upd-result--danger .pk-upd-result__icon { background: var(--danger-soft); color: var(--danger); }
.pk-upd-result__title { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.pk-upd-result__text { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
/* Propositions d'interface : pointillés warning, comme le Badge « proposal » */
.pk-upd-proposal { outline: 1px dashed var(--warning); outline-offset: 3px; border-radius: var(--radius-sm); }
.pk-upd-notesbox { padding: var(--space-2) var(--space-3); }
.pk-upd-notes__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 4px; }
.pk-upd-notes { margin: 0; padding-left: 18px; font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* --- InstallerWindow --- */
.pk-inst { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; background: var(--surface-1); }
.pk-inst__main { flex: 1; min-height: 0; overflow: auto; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.pk-inst__foot { padding: var(--space-3) var(--space-6); }
.pk-inst-hero { display: flex; align-items: center; gap: var(--space-4); }
.pk-inst-hero--sm { gap: var(--space-3); }
.pk-inst-block { display: flex; flex-direction: column; gap: 6px; }
.pk-inst-path { display: flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px; min-width: 0; }
.pk-inst-path .pk-icon { color: var(--ink-2); }
.pk-inst-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-inst-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-inst-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; color: var(--ink); }
.pk-inst-list li { display: flex; align-items: center; gap: var(--space-2); }
.pk-inst-list .pk-icon { color: var(--ink-2); }
.pk-inst-result { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.pk-inst-result .pk-inst-list .pk-icon { color: var(--success); }
.pk-inst-result .pk-reader-lead { margin: 0; }
.pk-inst-result__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-3); color: var(--ink-2); margin-bottom: 2px; }
.pk-inst-result__icon--success { background: var(--success-soft); color: var(--success); }
.pk-inst-result__icon--warning { background: var(--warning-soft); color: var(--warning); }
.pk-inst-result__icon--danger { background: var(--danger-soft); color: var(--danger); }
.pk-inst-code { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-2); }

/* --- MapWindowState --- */
.pk-mapwin { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.pk-mapwin__bar { flex: none; display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); padding: 0 var(--space-3); background: var(--surface-1); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; min-width: 0; }
.pk-mapwin__name { font-weight: 600; white-space: nowrap; }
.pk-mapwin__world { color: var(--ink-2); white-space: nowrap; }
.pk-mapwin__spacer { flex: 1; }
.pk-mapwin__acct { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); white-space: nowrap; }
.pk-mapwin__canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; background-color: var(--bg); background-image: linear-gradient(var(--map-grid-faint) 1px, transparent 1px), linear-gradient(90deg, var(--map-grid-faint) 1px, transparent 1px); background-size: 12px 12px; }
.pk-mapwin__canvas.is-blocked > :not(.pk-mapwin__overlay) { opacity: 0.25; }
.pk-mapwin__domain { position: absolute; inset: var(--space-4); border: 1px dashed var(--map-border); }
.pk-mapwin__mock { position: absolute; inset: var(--space-4); width: calc(100% - 32px); height: calc(100% - 32px); }
.pk-mapwin__note { position: absolute; left: var(--space-4); bottom: var(--space-4); padding: 4px 8px; border-radius: var(--radius-sm); background: var(--map-label-bg); color: var(--ink-2); font-size: 12px; line-height: 16px; }
.pk-mapwin__overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-3); }
.pk-mapwin__card { max-width: 420px; max-height: 100%; overflow: auto; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); }
.pk-mapwin__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--footer-h); padding: 0 var(--space-3); background: var(--surface-1); border-top: 1px solid var(--line); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.pk-mapwin-native__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-5); gap: var(--space-4); }
.pk-mapwin-native__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.pk-mapwin-native__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--warning-soft); color: var(--warning); }
.pk-mapwin-native__title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.pk-mapwin-native__text { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.pk-mapwin-native__foot { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* --- Commandes des prototypes (hors produit) --- */
.pk-reader-proto { display: flex; gap: var(--space-8); align-items: flex-start; padding: var(--space-6); }
.pk-reader-proto__ctl { width: 300px; flex: none; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border: 1px dashed var(--line-control); border-radius: var(--radius-lg); background: var(--bg); }
.pk-reader-proto--top { flex-direction: column; gap: var(--space-6); }
.pk-reader-proto--top .pk-reader-proto__ctl { width: 100%; }
.pk-reader-proto__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); align-items: start; }
.pk-reader-proto__tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px dashed var(--ink-3); color: var(--ink-2); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pk-reader-proto__group { display: flex; flex-direction: column; gap: 6px; }
.pk-reader-proto__group h3 { margin: 0 0 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.pk-reader-proto__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-reader-proto__btns .pk-btn { font-weight: 500; }
.pk-reader-proto__hint { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.pk-reader-proto__hint code { font-family: var(--font-mono); color: var(--ink-2); }
.pk-reader-proto__log { margin: 0; padding: var(--space-2); list-style: none; max-height: 120px; overflow: auto; border-radius: var(--radius-sm); background: var(--surface-1); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-reader-proto__stage { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.pk-reader-proto__caption { margin: var(--space-2) 0 0; font-size: 12px; line-height: 16px; color: var(--ink-3); max-width: 500px; }
.pk-reader-gallery { display: grid; gap: var(--space-6) var(--space-6); padding: var(--space-6); align-items: start; }
.pk-reader-gallery__item { display: flex; flex-direction: column; gap: var(--space-2); }
.pk-reader-gallery__cap { display: flex; align-items: baseline; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-2); }
.pk-reader-gallery__cap strong { color: var(--ink); font-weight: 600; }
.pk-reader-gallery__cap code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }

/* ===== Packetifier — site public, ouverture de la carte, administration, outils .cmd ===== */
/* Conteneurs nommés : pksite (page), pkhead (en-tête). Le passage téléphone se fait sous 720 px de conteneur. */

/* --- Page --- */
.pk-site { container: pksite / inline-size; position: relative; min-height: 100%; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; }
.pk-site--center { min-height: 560px; }
.pk-site-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-8); display: flex; flex-direction: column; gap: var(--space-12); padding-bottom: var(--space-12); }
.pk-site-h1 { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.pk-site-h2 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
.pk-site-lead { margin: 0; max-width: 520px; color: var(--ink-2); font-size: 16px; line-height: 24px; }
.pk-site-small { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.pk-site-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.pk-site-phone-only { display: none; }

/* --- En-tête --- */
.pk-site-header { container: pkhead / inline-size; flex: none; background: var(--surface-1); border-bottom: 1px solid var(--line); position: relative; z-index: var(--z-panel); }
.pk-site-header__in { display: flex; align-items: center; gap: var(--space-4); height: 56px; max-width: 1184px; margin: 0 auto; padding: 0 var(--space-8); }
.pk-site-header.is-admin .pk-site-header__in { max-width: none; }
.pk-site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); min-width: 0; }
.pk-site-brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pk-site-brand__name { font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-site-nav { display: flex; gap: 2px; margin-left: auto; }
.pk-site-nav__link { display: inline-flex; align-items: center; height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.pk-site-nav__link:hover { color: var(--ink); background: var(--surface-2); }
.pk-site-nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pk-site-nav__link[aria-current="page"] { color: var(--ink); }
.pk-site-header__end { display: flex; align-items: center; gap: var(--space-2); }
.pk-site-header.is-admin .pk-site-header__end { margin-left: auto; }
.pk-site-narrow, .pk-site-narrow-block { display: none !important; }
.pk-site-menu { display: flex; flex-direction: column; padding: var(--space-2) var(--space-4) var(--space-3); border-top: 1px solid var(--line); background: var(--surface-1); }
.pk-site-menu__link { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); color: var(--ink); text-decoration: none; font-weight: 500; border-radius: var(--radius-sm); }
.pk-site-menu__link:hover { background: var(--surface-2); }
.pk-site-menu__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@container pkhead (max-width: 720px) {
  .pk-site-header__in { padding: 0 var(--space-4); gap: var(--space-2); height: 52px; }
  .pk-site-nav, .pk-site-wide { display: none !important; }
  .pk-site-narrow { display: inline-flex !important; }
  .pk-site-narrow-block { display: flex !important; }
  .pk-site-header .pk-site-header__end { margin-left: auto; }
}
@container pkhead (max-width: 360px) {
  .pk-site-brand__name { font-size: 15px; }
  .pk-site-header__badge { display: none; }
}

/* --- Héros --- */
.pk-site-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding-top: var(--space-12); }
.pk-site-hero__text { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.pk-site-cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.pk-site-meta { color: var(--ink-2); font-size: 13px; line-height: 18px; }
.pk-site-illus { justify-self: end; width: 100%; max-width: 420px; margin: 0; padding: var(--space-4); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.pk-site-illus svg { display: block; background: var(--bg); border-radius: var(--radius-sm); }
.pk-site-illus figcaption { margin-top: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* --- Étapes --- */
.pk-site-section { scroll-margin-top: 72px; }
.pk-site-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pk-site-step { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.pk-site-step__head { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.pk-site-step__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.pk-site-step__title { margin: 0; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 600; }
.pk-site-step__text { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.pk-site-cmd--inline { font-size: 14px; padding: 1px 6px; white-space: nowrap; }
.pk-site-cmd { align-self: flex-start; font-family: var(--font-mono); font-size: 13px; line-height: 18px; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line-control); color: var(--ink); }

/* --- Prérequis --- */
.pk-site-prereq { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.pk-site-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pk-site-list li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.pk-site-list li:first-child { border-top: 0; padding-top: 0; }
.pk-site-list li > .pk-icon { color: var(--accent); margin-top: 1px; }
.pk-site-list li div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 20px; }
.pk-site-list li span { color: var(--ink-2); }
.pk-site-private { display: flex; flex-direction: column; gap: var(--space-2); }
.pk-site-private p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.pk-site-private__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }

/* --- Pied --- */
.pk-site-footer { margin-top: auto; border-top: 1px solid var(--line); background: var(--surface-1); }
.pk-site-footer__in { max-width: 1184px; margin: 0 auto; padding: var(--space-4) var(--space-8); display: flex; align-items: center; gap: var(--space-6); font-size: 13px; line-height: 18px; color: var(--ink-2); flex-wrap: wrap; }
.pk-site-footer__links { display: flex; gap: var(--space-4); margin-left: auto; }

/* --- Ouverture de la carte --- */
.pk-site-open { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); }
.pk-site-open__brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ink); }
.pk-site-open__card { width: 440px; max-width: 100%; padding: var(--space-2) var(--space-6) var(--space-6); }
.pk-site-open__steps { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.pk-site-open__steps .pk-overline-text { margin: 0 0 var(--space-2); }
.pk-site-open__steps ol { margin: 0; padding-left: 20px; color: var(--ink); font-size: 14px; line-height: 20px; display: flex; flex-direction: column; gap: 6px; }
.pk-site-open__note { max-width: 440px; text-align: center; }

/* --- Téléphone --- */
@container pksite (max-width: 720px) {
  .pk-site-main { padding: 0 var(--space-4) var(--space-8); gap: var(--space-8); }
  .pk-site-hero { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-6); }
  .pk-site-h1 { font-size: 26px; line-height: 32px; }
  .pk-site-lead { font-size: 15px; line-height: 22px; }
  .pk-site-phone-only { display: block; width: 100%; }
  .pk-site-cta { width: 100%; flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .pk-site-cta__btn { width: 100%; white-space: normal; height: auto; min-height: var(--control-lg); padding-top: 8px; padding-bottom: 8px; text-align: center; }
  .pk-site-meta { text-align: center; }
  .pk-site-steps { grid-template-columns: 1fr; gap: var(--space-3); }
  .pk-site-step { padding: var(--space-4); }
  .pk-site-prereq { grid-template-columns: 1fr; gap: var(--space-6); }
  .pk-site-card { padding: var(--space-4); }
  .pk-site-footer__in { padding: var(--space-4); gap: var(--space-3); }
  .pk-site-footer__links { margin-left: 0; width: 100%; }
}

/* ===== Administration ===== */
.pk-admin { min-height: 100%; }
.pk-admin-loginwrap { flex: 1; display: grid; place-items: center; padding: var(--space-12) var(--space-4); min-height: 560px; }
.pk-admin-login { display: flex; justify-content: center; }
.pk-admin-login__card { width: 400px; max-width: 100%; display: flex; flex-direction: column; gap: var(--space-4); }
.pk-admin-login__head { display: flex; align-items: center; gap: var(--space-3); }
.pk-admin-login__title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }

.pk-admin-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--space-4) var(--space-8) var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.pk-admin-tabs { margin-bottom: var(--space-2); }
.pk-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
.pk-admin-single { max-width: 760px; }
.pk-admin-side { position: sticky; top: var(--space-4); }

/* Carte d'administration */
.pk-admin-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pk-admin-card__head { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); }
.pk-admin-card__head .pk-badge { margin-left: auto; }
.pk-admin-card__title { margin: 0; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.pk-admin-card__text { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.pk-admin-card__foot { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.pk-admin-ok { color: var(--success); }

/* Comptes */
.pk-admin-accounts { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pk-admin-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-height: var(--control-md); }
.pk-admin-count { font-size: 12px; line-height: 16px; font-weight: 500; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-2); }
.pk-admin-summary { color: var(--ink-2); font-size: 13px; }
.pk-admin-toolbar__create { margin-left: auto; }
.pk-admin-name { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-width: 0; }
.pk-admin-name .pk-table__cell-name { max-width: 170px; }
.pk-admin-status { display: inline-flex; flex-direction: column; gap: 1px; }
.pk-admin-sub { font-size: 12px; line-height: 16px; color: var(--ink-2); font-family: var(--font-sans); }
.pk-admin-dlgname { overflow-wrap: anywhere; }

/* Code d'invitation (affiché une fois) */
.pk-admin-nowrap { white-space: nowrap; }
.pk-admin-code { container: pkcode / inline-size; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--line-control); }
.pk-admin-code__label { font-size: 13px; line-height: 18px; color: var(--ink-2); overflow-wrap: anywhere; }
.pk-admin-code__name { color: var(--ink); }
.pk-admin-code__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pk-admin-code__value { flex: 1 1 auto; min-width: 0; color: var(--ink); user-select: all; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pk-admin-code__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-admin-code__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.pk-admin-code__meta .pk-icon { width: 14px; height: 14px; flex: none; }
@container pkcode (max-width: 260px) { .pk-admin-code__value { font-size: 16px; letter-spacing: 0.04em; } }

/* Fiche de faction */
.pk-admin-sheet__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); align-items: start; }
.pk-admin-sheet__wide { grid-column: 1 / -1; }
.pk-admin-sheet__fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.pk-admin-sheet__fs > legend { padding: 0; margin-bottom: 6px; }
.pk-admin-sheet__fs .pk-field .pk-field__label { font-weight: 400; color: var(--ink-2); font-size: 12px; line-height: 16px; }
.pk-admin-sheet__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* Voile des dialogues : la grille du voile doit contraindre la largeur (sinon débordement sous 472 px). */
.pk-admin > .pk-scrim, .pk-admin-dlgbox > .pk-scrim { grid-template-columns: minmax(0, 440px); justify-content: center; }
.pk-admin-dlgbox { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
/* En haut plutôt qu'au centre d'une page longue */
.pk-admin > .pk-scrim--contained { align-items: start; padding-top: 96px; z-index: var(--z-modal); }
.pk-admin-toasts { position: absolute; top: 72px; right: var(--space-4); z-index: var(--z-toast); }

/* Téléphone */
@container pksite (max-width: 720px) {
  .pk-admin-main { padding: var(--space-3) var(--space-4) var(--space-6); gap: var(--space-3); }
  .pk-admin-card { padding: var(--space-4); }
  .pk-admin-sheet__form { grid-template-columns: 1fr; }
  .pk-admin-toolbar__create { width: 100%; margin-left: 0; height: var(--control-lg); font-size: 14px; }
  .pk-admin-code__row .pk-btn { width: 100%; height: var(--control-lg); }
  .pk-admin-code__value { font-size: 17px; }
  .pk-admin-card__foot .pk-btn { flex: 1; }
  .pk-admin > .pk-scrim--contained { padding: 72px var(--space-3) var(--space-3); }
  .pk-admin > .pk-scrim--contained .pk-dialog__foot .pk-btn { flex: 1; }
  /* Téléphone : pas de notification flottante (elle couvrirait le contenu) ; la confirmation reste sur le bouton. */
  .pk-admin-toasts { display: none; }
  .pk-admin-loginwrap { padding: var(--space-6) var(--space-4); align-items: start; }
}
/* Tablette et fenêtre étroite : le panneau d'invitation s'ouvre à la demande, au-dessus de la liste */
@container pksite (max-width: 1100px) {
  .pk-admin-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .pk-admin-side { position: static; order: -1; display: none; max-width: 560px; }
  .pk-admin-grid.is-inviting .pk-admin-side { display: block; }
}
@container pksite (min-width: 1101px) {
  .pk-admin-grid .pk-admin-toolbar__create { display: none; }
}
/* CopyButton principal : état « Code copié » lisible (succès sur fond succès) */
.pk-admin-code .pk-copy.is-copied { background: var(--success-soft); color: var(--success); border-color: var(--success); }
/* Mode cartes : la ligne modifiée garde son fond sur toute la carte */
@container (max-width: 600px) {
  .pk-admin-accounts .pk-table--stack tr.is-selected { background: var(--accent-soft); }
}

/* ===== Terminal Windows (maquette des scripts .cmd) ===== */
/* #0C0C0C et #CCCCCC : couleurs système de la console Windows, pas des tokens Packetifier. */
.pk-term { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-window); background: #0C0C0C; color: #CCCCCC; min-width: 0; }
.pk-term__bar { display: flex; align-items: center; gap: var(--space-2); height: var(--titlebar-h); padding-left: var(--space-3); background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--ink-2); flex: none; }
.pk-term__title { flex: 1; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-term__ctl { display: flex; height: 100%; }
.pk-term__ctl svg { width: 46px; height: 100%; padding: 11px 18px; box-sizing: border-box; fill: none; stroke: var(--ink-2); stroke-width: 1; }
.pk-term__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-3) var(--space-4); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.pk-term__line { min-height: 20px; }
.pk-term__l-title { color: var(--ink); font-weight: 600; }
.pk-term__l-muted { color: var(--ink-3); }
.pk-term__input { color: var(--ink); }
.pk-term__ok { color: var(--success); font-weight: 600; }
.pk-term__err { color: var(--danger); font-weight: 600; }
.pk-term__l-code { color: var(--ink); font-weight: 600; letter-spacing: 0.08em; }
.pk-term__field { font: inherit; color: var(--ink); background: transparent; border: 0; padding: 0; margin: 0; outline: none; min-width: 1ch; caret-color: transparent; }
.pk-term__caret { display: inline-block; width: 0.6em; height: 2px; vertical-align: -2px; background: #CCCCCC; animation: pk-term-blink 1s steps(1) infinite; }
@keyframes pk-term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pk-term__caret { animation: none; } }

/* ===== Dossier Téléchargements (maquette sobre, pas l'Explorateur) ===== */
.pk-admin-folder { container: pkfolder / inline-size; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-window); background: var(--surface-1); min-width: 0; }
.pk-admin-folder__bar { background: var(--surface-2); }
.pk-admin-folder__path { display: flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.pk-admin-folder__path .pk-icon { color: var(--ink-3); }
.pk-admin-folder__count { margin-left: auto; color: var(--ink-2); font-size: 12px; }
.pk-admin-folder__main { display: grid; grid-template-columns: minmax(0, 1fr) 240px; min-height: 0; }
.pk-admin-folder__list { padding: var(--space-2); display: flex; flex-direction: column; gap: 1px; outline: none; }
.pk-admin-folder__row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 64px; gap: var(--space-3); align-items: center; height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: 13px; line-height: 18px; cursor: default; }
.pk-admin-folder__row.is-head { height: 28px; color: var(--ink-2); font-weight: 600; font-size: 12px; }
.pk-admin-folder__row:not(.is-head):hover { background: var(--surface-2); }
.pk-admin-folder__row.is-selected { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pk-admin-folder__row:focus { outline: none; }
.pk-admin-folder__row:focus-visible { box-shadow: var(--focus-ring); }
.pk-admin-folder__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--ink); }
.pk-admin-folder__name .pk-icon { color: var(--ink-2); }
.pk-admin-folder__type { color: var(--ink-2); }
.pk-admin-folder__size { color: var(--ink-2); text-align: right; font-size: 12px; }
.pk-admin-folder__detail { border-left: 1px solid var(--line); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; color: var(--ink-2); }
.pk-admin-folder__detail p { margin: 0; font-size: 13px; line-height: 18px; }
.pk-admin-folder__dname { color: var(--ink); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.pk-admin-folder__foot { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--line); }
@container pkfolder (max-width: 560px) {
  .pk-admin-folder__main { grid-template-columns: 1fr; }
  .pk-admin-folder__detail { border-left: 0; border-top: 1px solid var(--line); }
  .pk-admin-folder__row { grid-template-columns: minmax(0, 1fr) 56px; }
  .pk-admin-folder__type { display: none; }
}

/* ===== Commandes des prototypes (hors produit) ===== */
.pk-site-proto { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-4); background: var(--surface-3); border-bottom: 1px dashed var(--warning); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.pk-site-proto strong { color: var(--warning); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-right: var(--space-2); }
.pk-site-proto .pk-site-proto__sep { width: 1px; height: 20px; background: var(--line-control); margin: 0 var(--space-1); }