/* ==========================================================================
   Protokoll : design system (N2X Labs)
   Surcouche Bootstrap 5. Back-office sobre, dense mais aere, hierarchie nette.
   Vocabulaire de classes prefixe pk- : ne pas renommer, les gabarits en dependent.
   ========================================================================== */

/* --- 1. Jetons ---------------------------------------------------------- */
:root {
  --pk-ink: #101828;
  --pk-ink-2: #344054;
  --pk-ink-3: #667085;
  --pk-ink-4: #98a2b3;

  --pk-surface: #ffffff;
  --pk-surface-2: #f9fafb;
  --pk-surface-3: #f2f4f7;
  --pk-canvas: #f5f7fa;

  --pk-border: #e4e7ec;
  --pk-border-2: #d0d5dd;

  --pk-primary: #1b4dc1;
  --pk-primary-dark: #163f9e;
  --pk-primary-soft: #eef2ff;
  --pk-primary-border: #c7d2fe;

  --pk-ok: #067647;
  --pk-ok-soft: #ecfdf3;
  --pk-ok-border: #abefc6;

  --pk-warn: #b54708;
  --pk-warn-soft: #fffaeb;
  --pk-warn-border: #fedf89;

  --pk-danger: #b42318;
  --pk-danger-soft: #fef3f2;
  --pk-danger-border: #fecdca;

  --pk-info: #175cd3;
  --pk-info-soft: #eff8ff;
  --pk-info-border: #b2ddff;

  --pk-radius: 10px;
  --pk-radius-sm: 7px;
  --pk-radius-lg: 14px;

  --pk-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --pk-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --pk-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --pk-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);

  --pk-topbar-h: 60px;
  --pk-sidebar-w: 248px;

  --pk-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--pk-ink-2);
  --bs-body-bg: var(--pk-canvas);
  --bs-primary: var(--pk-primary);
  --bs-link-color: var(--pk-primary);
  --bs-link-hover-color: var(--pk-primary-dark);
  --bs-border-color: var(--pk-border);
}

/* --- 2. Base ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--bs-body-font-family);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--pk-ink-2);
  background: var(--pk-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .pk-h1, .pk-h2, .pk-h3 {
  color: var(--pk-ink);
  font-weight: 600;
  letter-spacing: -.011em;
}

.pk-h1 { font-size: 1.5rem; line-height: 1.3; margin: 0; }
.pk-h2 { font-size: 1.125rem; line-height: 1.35; margin: 0; }
.pk-h3 { font-size: .9375rem; line-height: 1.4; margin: 0; }

.pk-lead { color: var(--pk-ink-3); font-size: .9375rem; margin: .25rem 0 0; }
.pk-muted { color: var(--pk-ink-3); }
.pk-mono { font-family: var(--pk-mono); font-size: .8125rem; }

.pk-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pk-ink-2);
  margin-bottom: .3rem;
  letter-spacing: .005em;
}

.pk-label .pk-req { color: var(--pk-danger); margin-left: .15rem; }
.pk-label .pk-opt { color: var(--pk-ink-4); font-weight: 500; margin-left: .3rem; font-size: .75rem; }

.pk-help {
  display: block;
  font-size: .78125rem;
  color: var(--pk-ink-3);
  margin-top: .3rem;
}

.pk-eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pk-ink-4);
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--pk-primary);
  outline-offset: 2px;
}

/* --- 3. Coquille applicative ------------------------------------------- */
.pk-app { min-height: 100vh; }

.pk-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--pk-topbar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  background: var(--pk-surface);
  border-bottom: 1px solid var(--pk-border);
  box-shadow: var(--pk-shadow-xs);
}

.pk-brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--pk-ink);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.pk-brand:hover { text-decoration: none; color: var(--pk-ink); }

.pk-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--pk-primary) 0%, #3b6fe0 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .9375rem;
  box-shadow: var(--pk-shadow-sm);
}

.pk-topbar-context {
  min-width: 0;
  padding-left: 1rem;
  border-left: 1px solid var(--pk-border);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.pk-topbar-context .pk-ctx-label { font-size: .6875rem; color: var(--pk-ink-4); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.pk-topbar-context .pk-ctx-value {
  font-size: .875rem;
  font-weight: 600;
  color: var(--pk-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42vw;
}

.pk-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.pk-shell { display: flex; align-items: stretch; min-height: calc(100vh - var(--pk-topbar-h)); }

.pk-sidebar {
  flex: 0 0 var(--pk-sidebar-w);
  width: var(--pk-sidebar-w);
  background: var(--pk-surface);
  border-right: 1px solid var(--pk-border);
  padding: 1.125rem .75rem;
  position: sticky;
  top: var(--pk-topbar-h);
  align-self: flex-start;
  height: calc(100vh - var(--pk-topbar-h));
  overflow-y: auto;
}

.pk-nav-title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pk-ink-4);
  padding: .5rem .625rem .375rem;
}

.pk-nav-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: var(--pk-radius-sm);
  color: var(--pk-ink-2);
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: .125rem;
  transition: background .12s ease, color .12s ease;
}
.pk-nav-link i { font-size: 1rem; color: var(--pk-ink-4); width: 1.125rem; text-align: center; }
.pk-nav-link:hover { background: var(--pk-surface-3); color: var(--pk-ink); text-decoration: none; }
.pk-nav-link:hover i { color: var(--pk-ink-3); }
.pk-nav-link.active { background: var(--pk-primary-soft); color: var(--pk-primary-dark); font-weight: 600; }
.pk-nav-link.active i { color: var(--pk-primary); }
.pk-nav-link .pk-nav-count {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 600;
  color: var(--pk-ink-3);
  background: var(--pk-surface-3);
  border-radius: 999px;
  padding: .0625rem .4375rem;
}

.pk-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.5rem 1.75rem 3rem;
}
.pk-main--wide { max-width: none; }
.pk-container { max-width: 1180px; margin: 0 auto; }
.pk-container--narrow { max-width: 900px; margin: 0 auto; }

.pk-page-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.pk-page-head .pk-page-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.pk-breadcrumb {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: var(--pk-ink-3);
  margin-bottom: .375rem;
}
.pk-breadcrumb a { color: var(--pk-ink-3); }
.pk-breadcrumb a:hover { color: var(--pk-primary); }
.pk-breadcrumb i { font-size: .6875rem; color: var(--pk-ink-4); }

/* --- 4. Cartes --------------------------------------------------------- */
.pk-card {
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-xs);
}
.pk-card + .pk-card { margin-top: 1rem; }

.pk-card-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--pk-border);
}
.pk-card-head .pk-card-actions { margin-left: auto; display: flex; gap: .375rem; align-items: center; }
.pk-card-body { padding: 1.125rem; }
.pk-card-body--tight { padding: .875rem 1.125rem; }
.pk-card-foot {
  padding: .875rem 1.125rem;
  border-top: 1px solid var(--pk-border);
  background: var(--pk-surface-2);
  border-radius: 0 0 var(--pk-radius) var(--pk-radius);
}

/* --- 5. Tuiles de statistiques ---------------------------------------- */
.pk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: .875rem;
  margin-bottom: 1.25rem;
}

.pk-stat {
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  padding: .9375rem 1rem;
  box-shadow: var(--pk-shadow-xs);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.pk-stat-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--pk-ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .375rem;
}
.pk-stat-value {
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.1;
  color: var(--pk-ink);
  font-variant-numeric: tabular-nums;
}
.pk-stat-hint { font-size: .78125rem; color: var(--pk-ink-4); }
.pk-stat--ok .pk-stat-value { color: var(--pk-ok); }
.pk-stat--warn .pk-stat-value { color: var(--pk-warn); }
.pk-stat--danger .pk-stat-value { color: var(--pk-danger); }
.pk-stat--primary .pk-stat-value { color: var(--pk-primary); }

/* --- 6. Badges et pastilles ------------------------------------------- */
.pk-badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .1875rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pk-badge i { font-size: .75rem; }
.pk-badge--neutral { background: var(--pk-surface-3); color: var(--pk-ink-2); border-color: var(--pk-border-2); }
.pk-badge--ok { background: var(--pk-ok-soft); color: var(--pk-ok); border-color: var(--pk-ok-border); }
.pk-badge--warn { background: var(--pk-warn-soft); color: var(--pk-warn); border-color: var(--pk-warn-border); }
.pk-badge--danger { background: var(--pk-danger-soft); color: var(--pk-danger); border-color: var(--pk-danger-border); }
.pk-badge--info { background: var(--pk-info-soft); color: var(--pk-info); border-color: var(--pk-info-border); }
.pk-badge--primary { background: var(--pk-primary-soft); color: var(--pk-primary-dark); border-color: var(--pk-primary-border); }

.pk-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.pk-dot--ok { background: var(--pk-ok); }
.pk-dot--warn { background: var(--pk-warn); }
.pk-dot--danger { background: var(--pk-danger); }
.pk-dot--neutral { background: var(--pk-ink-4); }

/* --- 7. Boutons -------------------------------------------------------- */
.btn { font-size: .875rem; font-weight: 600; border-radius: var(--pk-radius-sm); padding: .4375rem .875rem; }
.btn i { font-size: .9375rem; vertical-align: -.075em; }
.btn-sm { font-size: .8125rem; padding: .3125rem .625rem; border-radius: 6px; }
.btn-lg { font-size: .9375rem; padding: .625rem 1.125rem; }

.btn-primary {
  background: var(--pk-primary);
  border-color: var(--pk-primary);
  box-shadow: var(--pk-shadow-xs);
}
.btn-primary:hover, .btn-primary:focus { background: var(--pk-primary-dark); border-color: var(--pk-primary-dark); }

.btn-outline-secondary {
  color: var(--pk-ink-2);
  border-color: var(--pk-border-2);
  background: var(--pk-surface);
}
.btn-outline-secondary:hover {
  background: var(--pk-surface-3);
  border-color: var(--pk-border-2);
  color: var(--pk-ink);
}

.btn-ghost {
  color: var(--pk-ink-3);
  background: transparent;
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--pk-surface-3); color: var(--pk-ink); }

.pk-btn-icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
}

/* Selecteur de langue */
.pk-lang {
  display: inline-flex;
  background: var(--pk-surface-3);
  border: 1px solid var(--pk-border);
  border-radius: 999px;
  padding: 2px;
}
.pk-lang a,
.pk-lang button {
  padding: .1875rem .5625rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: .75rem;
  font-weight: 700;
  color: var(--pk-ink-3);
  letter-spacing: .02em;
  line-height: 1.35;
  cursor: pointer;
}
.pk-lang a:hover,
.pk-lang button:hover { color: var(--pk-ink); text-decoration: none; }
.pk-lang a.active,
.pk-lang button.active { background: var(--pk-surface); color: var(--pk-primary-dark); box-shadow: var(--pk-shadow-xs); }

/* Pastille utilisateur */
.pk-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem .25rem .25rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.pk-user:hover { background: var(--pk-surface-3); text-decoration: none; }
.pk-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pk-primary-soft);
  color: var(--pk-primary-dark);
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 700;
  border: 1px solid var(--pk-primary-border);
  flex: 0 0 auto;
}
.pk-user-meta { line-height: 1.2; text-align: left; }
.pk-user-name { font-size: .8125rem; font-weight: 600; color: var(--pk-ink); }
.pk-user-role { font-size: .6875rem; color: var(--pk-ink-4); }

/* --- 8. Formulaires ---------------------------------------------------- */
.form-control, .form-select {
  font-size: .9375rem;
  border-radius: var(--pk-radius-sm);
  border-color: var(--pk-border-2);
  color: var(--pk-ink);
  padding: .4375rem .625rem;
  box-shadow: var(--pk-shadow-xs);
}
.form-control::placeholder { color: var(--pk-ink-4); }
.form-control:focus, .form-select:focus {
  border-color: var(--pk-primary);
  box-shadow: 0 0 0 3px rgba(27, 77, 193, .12);
}
.form-control[readonly], .form-control:disabled, .form-select:disabled {
  background: var(--pk-surface-3);
  color: var(--pk-ink-2);
}
textarea.form-control { line-height: 1.5; min-height: 5.25rem; resize: vertical; }
.form-check-input { border-color: var(--pk-border-2); }
.form-check-input:checked { background-color: var(--pk-primary); border-color: var(--pk-primary); }
.form-check-label { font-size: .875rem; }

.pk-field { margin-bottom: 1rem; }
.pk-field:last-child { margin-bottom: 0; }
.pk-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.pk-invalid { border-color: var(--pk-danger) !important; }
.pk-invalid:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .12) !important; }
.pk-field-error {
  display: none;
  font-size: .78125rem;
  color: var(--pk-danger);
  margin-top: .3rem;
  align-items: center;
  gap: .3rem;
}
.pk-field-error.visible { display: flex; }

.pk-counter {
  font-size: .75rem;
  color: var(--pk-ink-4);
  font-variant-numeric: tabular-nums;
}
.pk-counter--short { color: var(--pk-warn); font-weight: 600; }
.pk-counter--ok { color: var(--pk-ok); }

/* Groupe segmente (conformite, gravite) */
.pk-segment { display: inline-flex; gap: .375rem; flex-wrap: wrap; }
.pk-segment input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pk-segment label {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--pk-border-2);
  border-radius: 999px;
  background: var(--pk-surface);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pk-ink-2);
  cursor: pointer;
  transition: all .12s ease;
  user-select: none;
}
.pk-segment label:hover { background: var(--pk-surface-3); }
.pk-segment input:focus-visible + label { outline: 2px solid var(--pk-primary); outline-offset: 2px; }
.pk-segment input:checked + label.pk-seg-ok { background: var(--pk-ok-soft); border-color: var(--pk-ok-border); color: var(--pk-ok); }
.pk-segment input:checked + label.pk-seg-warn { background: var(--pk-warn-soft); border-color: var(--pk-warn-border); color: var(--pk-warn); }
.pk-segment input:checked + label.pk-seg-danger { background: var(--pk-danger-soft); border-color: var(--pk-danger-border); color: var(--pk-danger); }
.pk-segment input:checked + label.pk-seg-primary { background: var(--pk-primary-soft); border-color: var(--pk-primary-border); color: var(--pk-primary-dark); }
.pk-segment input:disabled + label { opacity: .6; cursor: default; }

/* Bouton RAS accole a un champ */
.pk-input-ras { position: relative; }
.pk-btn-ras {
  position: absolute;
  right: .375rem;
  bottom: .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .1875rem .5rem;
  border-radius: 5px;
  border: 1px solid var(--pk-border-2);
  background: var(--pk-surface-2);
  color: var(--pk-ink-3);
  line-height: 1.3;
}
.pk-btn-ras:hover { background: var(--pk-primary-soft); border-color: var(--pk-primary-border); color: var(--pk-primary-dark); }

/* --- 9. Cartes de step ------------------------------------------------- */
.pk-steps { display: flex; flex-direction: column; gap: 1rem; }

/* L'ecart se lit sur l'entete de la carte, teintee, et non sur un liseret
   lateral : c'est plus visible a la lecture rapide d'une session de quarante
   steps, et la couleur reste reservee a ce qui demande une correction. Les
   steps conformes et en cours gardent l'entete neutre, la conformite etant
   deja portee par le badge. */
.pk-step {
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-sm);
  /* Deux barres collantes se superposent : la topbar et le bandeau de
     progression. La marge de defilement doit degager les deux. */
  scroll-margin-top: calc(var(--pk-topbar-h) + 5rem);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pk-step:focus-within { box-shadow: var(--pk-shadow-md); }

.pk-step--warn { border-color: var(--pk-warn-border); }
.pk-step--warn > .pk-step-head {
  background: var(--pk-warn-soft);
  border-bottom-color: var(--pk-warn-border);
}
.pk-step--warn > .pk-step-head .pk-step-num { background: var(--pk-warn); }

.pk-step--danger { border-color: var(--pk-danger-border); }
.pk-step--danger > .pk-step-head {
  background: var(--pk-danger-soft);
  border-bottom-color: var(--pk-danger-border);
}
.pk-step--danger > .pk-step-head .pk-step-num { background: var(--pk-danger); }

.pk-step-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8125rem 1.125rem;
  border-bottom: 1px solid var(--pk-border);
  background: var(--pk-surface-2);
  border-radius: var(--pk-radius) var(--pk-radius) 0 0;
  flex-wrap: wrap;
}
.pk-step-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.875rem;
  height: 1.875rem;
  padding: 0 .375rem;
  border-radius: 8px;
  background: var(--pk-ink);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.pk-step-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--pk-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-step-head-actions { margin-left: auto; display: flex; align-items: center; gap: .375rem; }
.pk-step-body { padding: 1.125rem; }

/* --- Accordeon : une seule carte ouverte a la fois --------------------- */
/* Sur une session longue, garder toutes les cartes deployees rend le
   parcours illisible. L'entete reste porteuse de l'essentiel (numero, tache,
   etat) pour se reperer sans ouvrir. */
.pk-step-bascule {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.pk-step-bascule:hover .pk-step-title { color: var(--pk-primary-dark); }
.pk-step-bascule:focus-visible { outline: 2px solid var(--pk-primary); outline-offset: 3px; border-radius: 6px; }

.pk-step-chevron {
  flex: 0 0 auto;
  font-size: .8125rem;
  color: var(--pk-ink-4);
  transition: transform .15s ease;
}
.pk-step:not(.pk-step--replie) .pk-step-chevron { transform: rotate(90deg); color: var(--pk-ink-3); }

.pk-step--replie > .pk-step-body { display: none; }
.pk-step--replie > .pk-step-head { border-bottom: none; border-radius: var(--pk-radius); }
.pk-step--replie .pk-step-title { color: var(--pk-ink-2); font-weight: 500; }
.pk-step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.pk-step-grid--full { grid-template-columns: 1fr; }

/* --- 10. Captures ------------------------------------------------------ */
.pk-dropzone {
  border: 1.5px dashed var(--pk-border-2);
  border-radius: var(--pk-radius);
  background: var(--pk-surface-2);
  padding: 1rem;
  text-align: center;
  color: var(--pk-ink-3);
  font-size: .8125rem;
  transition: all .15s ease;
  cursor: pointer;
}
.pk-dropzone:hover { border-color: var(--pk-primary-border); background: var(--pk-primary-soft); color: var(--pk-primary-dark); }
.pk-dropzone.pk-dragover {
  border-color: var(--pk-primary);
  background: var(--pk-primary-soft);
  color: var(--pk-primary-dark);
}
.pk-dropzone i { font-size: 1.25rem; display: block; margin-bottom: .25rem; }

.pk-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: .75rem;
}
.pk-thumb {
  position: relative;
  width: 118px;
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  overflow: hidden;
  background: var(--pk-surface-3);
  box-shadow: var(--pk-shadow-xs);
}
.pk-thumb img { width: 100%; height: 78px; object-fit: cover; display: block; cursor: zoom-in; }
.pk-thumb-name {
  font-size: .6875rem;
  color: var(--pk-ink-3);
  padding: .25rem .375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top: 1px solid var(--pk-border);
  background: var(--pk-surface);
}
.pk-thumb-del {
  position: absolute;
  top: .25rem;
  right: .25rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 5px;
  border: none;
  background: rgba(16, 24, 40, .72);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .6875rem;
  opacity: 0;
  transition: opacity .12s ease;
}
.pk-thumb:hover .pk-thumb-del { opacity: 1; }
.pk-thumb-del:hover { background: var(--pk-danger); }
.pk-thumb--uploading { opacity: .55; }

/* --- 11. Bandeaux et etats -------------------------------------------- */
.pk-banner {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border-radius: var(--pk-radius);
  border: 1px solid var(--pk-border);
  background: var(--pk-surface-2);
  font-size: .875rem;
  margin-bottom: 1rem;
}
.pk-banner i { font-size: 1.0625rem; line-height: 1.35; flex: 0 0 auto; }
.pk-banner-title { font-weight: 600; color: var(--pk-ink); display: block; margin-bottom: .125rem; }
.pk-banner-body { min-width: 0; }
.pk-banner-actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex: 0 0 auto; }
.pk-banner--info { background: var(--pk-info-soft); border-color: var(--pk-info-border); color: #0b4a9c; }
.pk-banner--info i { color: var(--pk-info); }
.pk-banner--ok { background: var(--pk-ok-soft); border-color: var(--pk-ok-border); color: #04502f; }
.pk-banner--ok i { color: var(--pk-ok); }
.pk-banner--warn { background: var(--pk-warn-soft); border-color: var(--pk-warn-border); color: #8a3706; }
.pk-banner--warn i { color: var(--pk-warn); }
.pk-banner--danger { background: var(--pk-danger-soft); border-color: var(--pk-danger-border); color: #8f1d13; }
.pk-banner--danger i { color: var(--pk-danger); }
.pk-banner--sealed {
  background: linear-gradient(180deg, #f8fafc, #f2f4f7);
  border-color: var(--pk-border-2);
  color: var(--pk-ink-2);
}
.pk-banner--sealed i { color: var(--pk-ink-2); }

.pk-empty {
  text-align: center;
  padding: 2.75rem 1.5rem;
  color: var(--pk-ink-3);
}
.pk-empty-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--pk-surface-3);
  color: var(--pk-ink-4);
  display: grid;
  place-items: center;
  font-size: 1.375rem;
  margin: 0 auto .875rem;
}
.pk-empty-title { font-size: .9375rem; font-weight: 600; color: var(--pk-ink); margin-bottom: .25rem; }
.pk-empty-text { font-size: .875rem; max-width: 34rem; margin: 0 auto 1rem; }

/* --- 12. Barre de progression de session ----------------------------- */
.pk-progress {
  position: sticky;
  top: var(--pk-topbar-h);
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: .75rem 1.125rem;
  margin-bottom: 1.25rem;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  box-shadow: var(--pk-shadow-sm);
}
.pk-progress-item { display: flex; align-items: baseline; gap: .375rem; }
.pk-progress-value { font-size: 1.125rem; font-weight: 650; color: var(--pk-ink); font-variant-numeric: tabular-nums; }
.pk-progress-label { font-size: .78125rem; color: var(--pk-ink-3); }
.pk-progress-sep { width: 1px; height: 1.5rem; background: var(--pk-border); }
.pk-progress-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.pk-autosave {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .78125rem;
  color: var(--pk-ink-3);
  min-height: 1.25rem;
}
.pk-autosave i { font-size: .8125rem; }
.pk-autosave--saving { color: var(--pk-info); }
.pk-autosave--saved { color: var(--pk-ok); }
.pk-autosave--error { color: var(--pk-danger); font-weight: 600; }

/* --- 13. Tableaux de liste ------------------------------------------- */
.pk-table { width: 100%; margin: 0; font-size: .875rem; border-collapse: separate; border-spacing: 0; }
.pk-table thead th {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pk-ink-3);
  background: var(--pk-surface-2);
  padding: .625rem 1.125rem;
  border-bottom: 1px solid var(--pk-border);
  white-space: nowrap;
  text-align: left;
}
.pk-table tbody td {
  padding: .75rem 1.125rem;
  border-bottom: 1px solid var(--pk-border);
  vertical-align: middle;
  color: var(--pk-ink-2);
}
.pk-table tbody tr:last-child td { border-bottom: none; }
.pk-table tbody tr:hover { background: var(--pk-surface-2); }
.pk-table .pk-cell-strong { font-weight: 600; color: var(--pk-ink); }
.pk-table .pk-cell-actions { text-align: right; white-space: nowrap; }
.pk-table-wrap { overflow-x: auto; border-radius: 0 0 var(--pk-radius) var(--pk-radius); }

/* --- 14. Liste de definitions --------------------------------------- */
.pk-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .875rem 1.5rem;
  margin: 0;
}
.pk-dl-item { min-width: 0; }
.pk-dl-key {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pk-ink-4);
  margin-bottom: .125rem;
}
.pk-dl-value { font-size: .875rem; color: var(--pk-ink); word-break: break-word; }

/* --- 15. Texte de lecture (session validee, exports ecran) ---------- */
.pk-read-field { margin-bottom: .875rem; }
.pk-read-field:last-child { margin-bottom: 0; }
.pk-read-key {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pk-ink-4);
  margin-bottom: .1875rem;
}
.pk-read-value { font-size: .875rem; color: var(--pk-ink-2); white-space: pre-wrap; word-break: break-word; }
.pk-read-value--url { font-family: var(--pk-mono); font-size: .8125rem; color: var(--pk-primary-dark); word-break: break-all; }
.pk-read-value--ras { color: var(--pk-ink-4); font-style: italic; }

.pk-consignes {
  font-size: .875rem;
  color: var(--pk-ink-2);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* --- 16. Divers ------------------------------------------------------ */
.pk-copy-field {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.pk-copy-field input {
  font-family: var(--pk-mono);
  font-size: .78125rem;
  background: var(--pk-surface-2);
}

.pk-toast-zone {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(24rem, calc(100vw - 2rem));
}
.pk-toast {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .6875rem .875rem;
  border-radius: var(--pk-radius-sm);
  background: var(--pk-ink);
  color: #fff;
  font-size: .8125rem;
  box-shadow: var(--pk-shadow-lg);
  animation: pk-toast-in .18s ease;
}
.pk-toast--ok { background: #05603a; }
.pk-toast--danger { background: #912018; }
.pk-toast--warn { background: #93370d; }
@keyframes pk-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pk-divider { height: 1px; background: var(--pk-border); margin: 1.25rem 0; border: 0; }

.pk-tag-lang {
  font-family: var(--pk-mono);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--pk-ink-3);
  background: var(--pk-surface-3);
  border: 1px solid var(--pk-border);
  border-radius: 4px;
  padding: 0 .3125rem;
  text-transform: uppercase;
}

.modal-content { border-radius: var(--pk-radius-lg); border: none; box-shadow: var(--pk-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--pk-border); padding: 1rem 1.25rem; }
.modal-title { font-size: 1.0625rem; font-weight: 650; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--pk-border); padding: .875rem 1.25rem; background: var(--pk-surface-2); border-radius: 0 0 var(--pk-radius-lg) var(--pk-radius-lg); }

/* --- 17. Ecrans d'authentification ---------------------------------- */
.pk-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(1100px 520px at 12% -8%, #e8eeff 0%, rgba(232, 238, 255, 0) 62%),
    radial-gradient(900px 460px at 92% 108%, #eef2f7 0%, rgba(238, 242, 247, 0) 58%),
    var(--pk-canvas);
}
.pk-auth-card {
  width: 100%;
  max-width: 27rem;
  background: var(--pk-surface);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  box-shadow: var(--pk-shadow-lg);
  padding: 1.875rem;
}
.pk-auth-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.pk-auth-brand .pk-brand-mark { width: 34px; height: 34px; font-size: 1rem; }
.pk-auth-brand span { font-size: 1.1875rem; font-weight: 700; color: var(--pk-ink); letter-spacing: -.02em; }
.pk-auth-head { text-align: center; margin-bottom: 1.375rem; }
.pk-auth-foot {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pk-border);
  text-align: center;
  font-size: .8125rem;
}
.pk-auth-legal { text-align: center; margin-top: 1.125rem; font-size: .75rem; color: var(--pk-ink-4); }

/* --- 18. Responsive -------------------------------------------------- */
@media (max-width: 992px) {
  .pk-shell { flex-direction: column; }
  .pk-sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--pk-border);
    padding: .625rem .75rem;
    display: flex;
    gap: .375rem;
    overflow-x: auto;
  }
  .pk-nav-title { display: none; }
  .pk-nav-link { margin-bottom: 0; white-space: nowrap; }
  .pk-main { padding: 1.125rem 1rem 2.5rem; }
  .pk-step-grid { grid-template-columns: 1fr; }
  .pk-topbar-context .pk-ctx-value { max-width: 34vw; }
}

@media (max-width: 576px) {
  .pk-topbar { padding: 0 .75rem; gap: .625rem; }
  .pk-topbar-context { display: none; }
  .pk-user-meta { display: none; }
  .pk-progress { gap: .875rem; }
  .pk-progress-sep { display: none; }
  .pk-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .pk-auth-card { padding: 1.375rem; }
}

/* --- 19. Impression ecran ------------------------------------------- */
@media print {
  .pk-topbar, .pk-sidebar, .pk-progress-actions, .pk-page-actions,
  .pk-step-head-actions, .pk-dropzone, .pk-thumb-del, .pk-toast-zone { display: none !important; }
  body { background: #fff; }
  .pk-main { padding: 0; }
  .pk-step, .pk-card { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  /* A l'impression, une carte repliee doit malgre tout montrer son contenu. */
  .pk-step--replie > .pk-step-body { display: block; }
  .pk-step-chevron { display: none; }
  .pk-progress { position: static; }
  a { color: inherit; }
}