/*
 * Kit UI, composants au-dessus de Bootstrap 6.0.0-alpha.1. Aucun build, aucun framework.
 * Extrait du concept Medsharing UI, sans sa marque ni ses écrans métier.
 *
 * Ordre de chargement : bootstrap.min.css, puis la marque (brands/<nom>.css), puis kit.css.
 * La marque ne contient que des jetons (--kit-* et --bs-*), hors couche : elle gagne sur Bootstrap sans !important.
 * Les composants vivent dans @layer custom : une classe utilitaire de Bootstrap peut toujours les ajuster.
 * Rien ici n'écrit une couleur en dur : tout passe par les jetons de la marque.
 */


@layer custom {
  /* clip, pas hidden : un débordement accidentel est coupé sans créer de zone de défilement (sticky intact). */
  html, body { overflow-x: clip; }
  body {
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
  }
  .num, .table td, .kit-id {
    font-variant-numeric: tabular-nums;
  }
  .kit-id {
    font-family: var(--bs-font-mono);
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
  }

  /* ---------- Coque : barre latérale + barre du haut ---------- */
  .kit-shell {
    display: grid;
    grid-template-columns: var(--kit-sidebar-w) minmax(0, 1fr);
    min-height: 100dvh;
  }
  .kit-sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: var(--bs-spacer-5);
    padding: var(--bs-spacer-5) var(--bs-spacer-4);
    background: var(--bs-bg-1);
    border-inline-end: 1px solid var(--bs-border-color);
    overflow-y: auto;
  }
  .kit-brand {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-3);
    padding: 0 var(--bs-spacer-3);
    color: var(--bs-heading-color);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
  }
  .kit-brand-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--bs-radius-5);
    background: var(--bs-primary-bg);
    color: var(--bs-primary-contrast);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .kit-brand small {
    display: block;
    color: var(--bs-fg-3);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0;
  }

  .kit-switch {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-3);
    width: 100%;
    padding: var(--bs-spacer-3);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-radius-6);
    background: var(--bs-bg-body);
    color: var(--bs-fg-body);
    text-align: start;
  }
  .kit-switch:hover { border-color: var(--bs-border-emphasized); }
  .kit-switch .kit-switch-code {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--bs-radius-4);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-fg);
    font-size: 0.6875rem;
    font-weight: 700;
  }
  .kit-switch .kit-switch-text { flex: 1; min-width: 0; }
  .kit-switch strong { display: block; font-weight: 500; line-height: 1.25; }
  .kit-switch span { color: var(--bs-fg-3); font-size: 0.75rem; }

  .kit-nav-group + .kit-nav-group { margin-top: var(--bs-spacer-4); }
  /* Titre de groupe : la police du texte, un cran plus petite, en casse de phrase, sans espacement ajouté. */
  .kit-nav-label {
    padding: 0 var(--bs-spacer-3) var(--bs-spacer-2);
    color: var(--bs-fg-3);
    font-size: 0.75rem;
    font-weight: 500;
  }
  .kit-nav {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .kit-nav a {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-3);
    min-height: 2.125rem;
    padding: 0 var(--bs-spacer-3);
    border-radius: var(--bs-radius-5);
    color: var(--bs-fg-2);
    text-decoration: none;
    transition: background-color 0.12s, color 0.12s;
  }
  .kit-nav a .bi { font-size: 1rem; color: var(--bs-fg-4); transition: color 0.12s; }
  .kit-nav a:hover { background: var(--bs-bg-2); color: var(--bs-fg-body); }
  .kit-nav a[aria-current] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-fg-emphasis);
    font-weight: 500;
  }
  .kit-nav a[aria-current] .bi { color: var(--bs-primary-fg); }
  .kit-nav .kit-count {
    margin-inline-start: auto;
    color: var(--bs-fg-3);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .kit-nav .kit-count.is-due { color: var(--bs-warning-fg); font-weight: 600; }

  .kit-sidebar-foot {
    margin-top: auto;
    padding: var(--bs-spacer-4) var(--bs-spacer-3) 0;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-fg-3);
    font-size: 0.75rem;
  }

  .kit-main { display: flex; flex-direction: column; min-width: 0; }
  .kit-topbar {
    position: sticky;
    top: 0;
    z-index: var(--bs-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-4);
    height: var(--kit-topbar-h);
    padding: 0 var(--bs-spacer-9);
    background: color-mix(in oklch, var(--bs-bg-body) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--bs-border-color);
  }
  .kit-search {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-3);
    width: min(22rem, 100%);
    height: 2.125rem;
    margin-inline-start: auto;
    padding: 0 var(--bs-spacer-3) 0 var(--bs-spacer-4);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-radius-5);
    background: var(--bs-bg-1);
    color: var(--bs-fg-3);
  }
  .kit-search { min-width: 0; }
  .kit-search > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .kit-search:hover { border-color: var(--bs-border-emphasized); color: var(--bs-fg-2); }
  .kit-search kbd {
    margin-inline-start: auto;
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-radius-3);
    background: var(--bs-bg-2);
    color: var(--bs-fg-3);
    font-family: inherit;
    font-size: 0.6875rem;
  }
  .kit-topbar .btn-icon { position: relative; color: var(--bs-fg-2); }
  .kit-dot {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid var(--bs-bg-body);
    border-radius: 50%;
    background: var(--bs-warning-base);
  }
  .kit-user {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-3);
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border: 0;
    border-radius: var(--bs-radius-pill);
    background: transparent;
    color: var(--bs-fg-body);
    text-align: start;
  }
  .kit-user:hover { background: var(--bs-bg-2); }
  .kit-user strong { display: block; font-weight: 500; line-height: 1.2; }
  .kit-user span { color: var(--bs-fg-3); font-size: 0.75rem; }

  .kit-demo-note {
    padding: 0.375rem var(--bs-spacer-9);
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-bg-2);
    color: var(--bs-fg-3);
    font-size: 0.75rem;
  }

  .kit-page {
    width: 100%;
    max-width: 92rem;
    padding: var(--bs-spacer-9) var(--bs-spacer-9) var(--bs-spacer-12);
  }
  .kit-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--bs-spacer-5);
    margin-bottom: var(--bs-spacer-8);
  }
  .kit-page-head h1 {
    margin: 0;
    text-wrap: balance;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .kit-page-head p { margin: var(--bs-spacer-2) 0 0; color: var(--bs-fg-3); }
  .kit-page-head .kit-actions { display: flex; gap: var(--bs-spacer-3); margin-inline-start: auto; }

  /* ---------- Surfaces ---------- */
  .kit-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-radius-7);
    background: var(--bs-bg-1);
    box-shadow: var(--bs-box-shadow-xs);
  }
  .kit-panel-head {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-3);
    min-height: 3rem;
    padding: var(--bs-spacer-3) var(--bs-spacer-6);
    border-bottom: 1px solid var(--bs-border-muted);
  }
  .kit-panel-head h2 {
    margin: 0;
    text-wrap: balance;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .kit-panel-head .kit-panel-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--bs-spacer-2); }
  .kit-panel-body { padding: var(--bs-spacer-6); }

  .kit-kpi {
    padding: var(--bs-spacer-6);
  }
  .kit-kpi-label { color: var(--bs-fg-3); font-size: 0.8125rem; }
  .kit-kpi-value {
    margin-top: var(--bs-spacer-2);
    color: var(--bs-heading-color);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .kit-kpi-value small { color: var(--bs-fg-4); font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; }
  .kit-kpi-foot { margin-top: var(--bs-spacer-3); color: var(--bs-fg-3); font-size: 0.75rem; }

  /* Raccourcis : tuiles d'accès direct en tête de tableau de bord. */
  .kit-shortcut {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-4);
    padding: var(--bs-spacer-5);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-radius-7);
    background: var(--bs-bg-1);
    color: var(--bs-fg-body);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  }
  @media (hover: hover) {
    .kit-shortcut:hover {
      border-color: var(--bs-primary-border);
      box-shadow: var(--bs-box-shadow-lg);
      transform: translateY(-1px);
    }
  }
  .kit-shortcut .kit-shortcut-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: var(--bs-radius-6);
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-fg);
    font-size: 1.125rem;
  }
  .kit-shortcut strong { display: block; font-weight: 500; }
  .kit-shortcut span { color: var(--bs-fg-3); font-size: 0.8125rem; }
  .kit-shortcut .bi-arrow-right { margin-inline-start: auto; color: var(--bs-fg-4); transition: transform 0.15s, color 0.15s; }
  .kit-shortcut:hover .bi-arrow-right { color: var(--bs-primary-fg); transform: translateX(2px); }

  /* Liste d'actions : remplace les panneaux de liens bleus. */
  .kit-links { margin: 0; padding: var(--bs-spacer-2); list-style: none; }
  .kit-links a {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-4);
    padding: var(--bs-spacer-3) var(--bs-spacer-4);
    border-radius: var(--bs-radius-5);
    color: var(--bs-fg-body);
    text-decoration: none;
  }
  .kit-links a:hover { background: var(--bs-bg-2); }
  .kit-links .bi { color: var(--bs-fg-4); font-size: 1rem; }
  /* Icône ou avatar en tête de ligne : même colonne de 24 px, pour que tous les libellés partent du même bord. */
  .kit-links a > :is(.bi, .avatar):first-child { display: inline-grid; place-items: center; width: 1.5rem; flex: none; }
  .kit-links .kit-meta { margin-inline-start: auto; color: var(--bs-fg-3); font-size: 0.75rem; }

  /* Jauge d'inclusions, en SVG pur : remplace le demi-donut. */
  .kit-ring { --p: 0; position: relative; width: 8.5rem; aspect-ratio: 1; flex: none; }
  .kit-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .kit-ring circle { fill: none; stroke-width: 10; }
  .kit-ring .track { stroke: var(--bs-bg-3); }
  .kit-ring .value {
    stroke: var(--bs-primary-bg);
    stroke-linecap: round;
    stroke-dasharray: calc(var(--p) * 2.639) 263.9;
    transition: stroke-dasharray 0.8s var(--bs-transition-timing-overlay);
  }
  .kit-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
  .kit-ring-label strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .kit-ring-label > span { color: var(--bs-fg-3); font-size: 0.75rem; }

  .kit-legend { display: grid; gap: var(--bs-spacer-3); margin: 0; }
  .kit-legend div { display: flex; align-items: center; gap: var(--bs-spacer-3); }
  .kit-legend dt { font-weight: 400; color: var(--bs-fg-2); }
  .kit-legend dd { margin: 0 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
  .kit-swatch { width: 0.625rem; height: 0.625rem; border-radius: 3px; flex: none; }

  /* Courbe d'inclusion : barres mensuelles. */
  .kit-bars { display: flex; align-items: flex-end; gap: 0.375rem; height: 7rem; }
  .kit-bars span {
    flex: 1;
    min-width: 0;
    height: var(--h);
    border-radius: 4px 4px 2px 2px;
    background: var(--bs-primary-bg-muted);
    transition: background-color 0.15s;
  }
  .kit-bars span:last-child, .kit-bars span:hover { background: var(--bs-primary-bg); }
  .kit-bars-axis { display: flex; justify-content: space-between; margin-top: var(--bs-spacer-2); color: var(--bs-fg-4); font-size: 0.6875rem; }

  .kit-overview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bs-spacer-9); }
  .kit-overview .kit-legend { flex: 1 1 12rem; }
  .kit-speed { flex: 1 1 15rem; }
  .kit-progress-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--bs-spacer-3) var(--bs-spacer-9);
    padding: var(--bs-spacer-5) var(--bs-spacer-6);
    border-top: 1px solid var(--bs-border-muted);
  }
  .kit-progress-row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 4rem 3rem; align-items: center; gap: var(--bs-spacer-3); font-size: 0.8125rem; }
  .kit-progress-row .kit-id { color: var(--bs-fg-3); }
  .kit-progress-row .progress { height: 0.375rem; }
  .kit-progress-row .num { text-align: end; }

  .kit-next { border-top: 1px solid var(--bs-border-muted); padding-top: var(--bs-spacer-5); }
  .kit-next-item {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-4);
    padding: var(--bs-spacer-3) 0;
    color: var(--bs-fg-body);
    text-decoration: none;
  }
  .kit-next-item:hover strong { color: var(--bs-primary-fg); }
  .kit-next-date {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-radius-6);
    line-height: 1;
  }
  .kit-next-date strong { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .kit-next-date span { color: var(--bs-fg-3); font-size: 0.6875rem; }

  .kit-theme-switch { display: inline-flex; padding: 2px; border: 1px solid var(--bs-border-color); border-radius: var(--bs-radius-pill); }
  .kit-theme-switch .btn-icon { --bs-btn-border-radius: var(--bs-radius-pill); width: 1.75rem; height: 1.75rem; min-height: 0; padding: 0; }
  .kit-theme-switch [aria-pressed="true"] { background: var(--bs-bg-3); color: var(--bs-fg-body); }

  dialog.kit-palette {
    width: min(36rem, calc(100% - 2rem));
    max-height: min(30rem, 80dvh);
    margin: 12vh auto auto;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-radius-8);
    background: var(--bs-bg-1);
    color: var(--bs-fg-body);
    box-shadow: var(--bs-box-shadow-xl);
  }
  dialog.kit-palette::backdrop { background: color-mix(in oklch, var(--kit-scrim) 35%, transparent); backdrop-filter: blur(2px); }

  /* ---------- Tableaux de données ---------- */
  .kit-table-wrap { overflow-x: auto; }
  .kit-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
  }
  .kit-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.625rem var(--bs-spacer-4);
    background: var(--bs-bg-2);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-fg-3);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: start;
    white-space: nowrap;
  }
  .kit-table td {
    padding: 0.625rem var(--bs-spacer-4);
    border-bottom: 1px solid var(--bs-border-muted);
    vertical-align: middle;
    white-space: nowrap;
  }
  .kit-table tbody tr { transition: background-color 0.1s; }
  .kit-table tbody tr:hover { background: var(--bs-bg-2); }
  /* Dernière ligne : ni les cellules ni l'en-tête de ligne (colonne collante) ne tracent de bordure basse. */
  .kit-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
  /* Un tableau qui ferme un panneau en épouse les coins : le fond des cellules collantes ne déborde pas de l'arrondi. */
  .kit-panel > .kit-table-wrap:last-child { border-radius: 0 0 calc(var(--bs-radius-7) - 1px) calc(var(--bs-radius-7) - 1px); }
  .kit-table .kit-sub { display: block; color: var(--bs-fg-3); font-size: 0.75rem; }
  .kit-table a { color: var(--bs-fg-body); font-weight: 500; }
  .kit-table a:hover { color: var(--bs-primary-fg); }

  .kit-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bs-spacer-3);
    padding: var(--bs-spacer-4) var(--bs-spacer-6);
    border-bottom: 1px solid var(--bs-border-muted);
  }
  .kit-toolbar .kit-filter-search { width: min(18rem, 100%); }
  .kit-toolbar .kit-filter { width: auto; max-width: 15rem; }

  /* ---------- Formulaires ---------- */
  .kit-fieldset { margin: 0; border: 0; }
  .kit-fieldset + .kit-fieldset { border-top: 1px solid var(--bs-border-muted); }
  .kit-fieldset legend {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-3);
    margin-bottom: var(--bs-spacer-6);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-heading-color);
  }
  .kit-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--bs-spacer-6); }
  .kit-form-grid > :is(:has(textarea), :has(.form-range), :has([role="radiogroup"])) { grid-column: 1 / -1; }
  .kit-form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bs-spacer-3);
    padding: var(--bs-spacer-5) var(--bs-spacer-6);
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0 0 var(--bs-radius-7) var(--bs-radius-7);
    background: color-mix(in oklch, var(--bs-bg-1) 90%, transparent);
    backdrop-filter: blur(8px);
  }
  /* Chromium colle l'icône du calendrier au texte : on la place en bout de champ. */
  .form-control[type="date"] { position: relative; max-width: 14rem; }
  .form-control[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset-inline-end: var(--bs-spacer-5);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.6;
  }
  .form-control[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

  /* Fil d'activité : une pastille, un titre, une date. */
  .kit-trail { margin: 0; padding: var(--bs-spacer-5) var(--bs-spacer-6); list-style: none; display: grid; gap: var(--bs-spacer-5); }
  .kit-trail li { position: relative; padding-inline-start: var(--bs-spacer-6); font-size: 0.8125rem; }
  .kit-trail li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.4rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--bs-border-emphasized);
  }
  .kit-trail strong { display: block; font-weight: 500; }
  .kit-trail span { color: var(--bs-fg-3); font-size: 0.75rem; }

  .kit-pager {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-4);
    padding: var(--bs-spacer-4) var(--bs-spacer-6);
    border-top: 1px solid var(--bs-border-muted);
    color: var(--bs-fg-3);
    font-size: 0.8125rem;
  }

  /* Statut : un point et un mot, au lieu d'un bouton coloré plein. */
  .kit-status { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }
  .kit-status::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
  .kit-status.is-ongoing { color: var(--bs-primary-fg); }
  .kit-status.is-done { color: var(--bs-success-fg); }
  .kit-status.is-due { color: var(--bs-warning-fg); }
  .kit-status.is-out { color: var(--bs-fg-3); }

  .kit-tally {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 2rem;
    padding: 0.0625rem 0.5rem;
    border-radius: var(--bs-radius-pill);
    font-weight: 600;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  .kit-tally.is-open { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-fg-emphasis); }
  .kit-tally.is-zero { color: var(--bs-fg-4); font-weight: 400; }

  .kit-meter { display: flex; align-items: center; gap: var(--bs-spacer-3); }
  .kit-meter .progress { width: 4rem; height: 0.375rem; }

  /* ---------- Palette de commandes ---------- */
  .kit-palette-list { max-height: 22rem; overflow-y: auto; margin: 0; padding: var(--bs-spacer-2); list-style: none; }
  .kit-palette-list a {
    display: flex;
    align-items: center;
    gap: var(--bs-spacer-4);
    padding: var(--bs-spacer-3) var(--bs-spacer-4);
    border-radius: var(--bs-radius-5);
    color: var(--bs-fg-body);
    text-decoration: none;
  }
  .kit-palette-list a:is(:hover, .is-active) { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-fg-emphasis); }
  .kit-palette-list .bi { color: var(--bs-fg-4); }
  .kit-palette-list .kit-meta { margin-inline-start: auto; color: var(--bs-fg-4); font-size: 0.75rem; }
  .kit-palette-input {
    width: 100%;
    padding: var(--bs-spacer-5) var(--bs-spacer-6);
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-fg-body);
    font-size: 1rem;
    outline: none;
  }

  /* ---------- États et mouvement ---------- */

  /* Focus : un seul anneau pour tout ce qui se manipule, visible au clavier seulement. */
  :where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--kit-focus);
    outline-offset: 2px;
  }
  .kit-nav a:focus-visible, .kit-links a:focus-visible { outline-offset: -2px; }

  /* Changement de thème : les couleurs basculent d'un coup, sans traverser des états intermédiaires illisibles. */
  .kit-theme-swap, .kit-theme-swap *, .kit-theme-swap *::before, .kit-theme-swap *::after { transition: none !important; }

  /* Entrée de page : les blocs montent de 6 px, l'un après l'autre. Une fois, jamais au retour d'un filtre. */
  @keyframes kit-rise { from { opacity: 0; transform: translateY(6px); } }
  @keyframes kit-fade { from { opacity: 0; } }
  @keyframes kit-grow { from { transform: scaleY(0); } }
  @keyframes kit-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
  @keyframes kit-spin { to { transform: rotate(1turn); } }
  @keyframes kit-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
  /* backwards, pas both : un transform gardé après l'animation fait de chaque ligne sa propre couche,
     et la ligne suivante se peint par-dessus le menu ouvert de la précédente. */
  .kit-enter { animation: kit-rise var(--kit-dur-slow) var(--kit-ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
  .kit-enter:has(.menu.show) { position: relative; z-index: 3; }
  .kit-fade-in { animation: kit-fade var(--kit-dur) var(--kit-ease-out) both; }
  .kit-bars span { transform-origin: bottom; animation: kit-grow 0.6s var(--kit-ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
  .kit-shake { animation: kit-shake 0.35s var(--kit-ease-in-out); }

  /* Survol et pression : une réponse visible en moins de 120 ms. */
  .kit-table tbody tr { transition: background-color var(--kit-dur-fast); }
  .kit-shortcut:active { transform: translateY(0) scale(0.99); }

  /* Chargement : un squelette qui n'apparaît qu'après 150 ms, pour ne pas clignoter sur une réponse rapide. */
  /* Valeur pas encore arrivée : une pastille neutre de la taille d'un nombre, au lieu de « … » qui saute. */
  .kit-page [data-field]:empty::before {
    content: "";
    display: inline-block;
    width: 2.5ch;
    height: 0.75em;
    border-radius: var(--bs-radius-3);
    background: var(--bs-bg-3);
    vertical-align: -0.05em;
  }
  .kit-skeleton-group { animation: kit-fade var(--kit-dur) 150ms both; }
  .kit-skeleton {
    display: block;
    height: 0.75rem;
    border-radius: var(--bs-radius-pill);
    background: linear-gradient(90deg, var(--bs-bg-3) 30%, var(--bs-bg-2) 50%, var(--bs-bg-3) 70%) 0 0 / 300% 100%;
    animation: kit-shimmer 1.4s linear infinite;
  }
  .kit-skeleton.is-title { height: 1.25rem; width: 40%; }
  .kit-skeleton.is-avatar { width: 2rem; height: 2rem; border-radius: 50%; flex: none; }

  /* État vide et état d'erreur : dire ce qui se passe et proposer la suite. */
  .kit-empty {
    display: grid;
    justify-items: center;
    gap: var(--bs-spacer-3);
    padding: var(--bs-spacer-12) var(--bs-spacer-7);
    text-align: center;
    animation: kit-fade var(--kit-dur) var(--kit-ease-out) both;
  }
  /* L'icône seule, à la couleur du texte secondaire : pas de pastille ronde teintée autour. */
  .kit-empty-icon {
    margin-bottom: var(--bs-spacer-2);
    color: var(--bs-fg-4);
    font-size: 1.75rem;
    line-height: 1;
  }
  .kit-empty h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; }
  .kit-empty p { max-width: 28rem; margin: 0; color: var(--bs-fg-3); }
  .kit-empty .kit-empty-actions { display: flex; gap: var(--bs-spacer-3); margin-top: var(--bs-spacer-3); }
  .row > .kit-empty { grid-column: 1 / -1; width: 100%; }
  .kit-empty.is-error .kit-empty-icon { color: var(--bs-danger-fg); }

  /* Bouton occupé : il garde sa largeur, le libellé laisse place à un anneau qui tourne. */
  [aria-busy="true"]:is(.btn, .btn-solid, .btn-outline, .btn-subtle, .btn-text) {
    position: relative;
    color: transparent !important;
    pointer-events: none;
  }
  [aria-busy="true"]:is(.btn, .btn-solid, .btn-outline, .btn-subtle, .btn-text)::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 1rem;
    height: 1rem;
    margin: auto;
    border: 2px solid var(--bs-theme-contrast, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    animation: kit-spin 0.7s linear infinite;
  }
  .btn-solid[aria-busy="true"]::after { border-color: var(--bs-primary-contrast); border-right-color: transparent; }
  .btn-outline[aria-busy="true"]::after, .btn-text[aria-busy="true"]::after { border-color: var(--bs-fg-2); border-right-color: transparent; }

  /* Toasts : en bas à droite, au-dessus de tout, empilés. */
  .kit-toasts {
    position: fixed;
    inset-block-end: var(--bs-spacer-7);
    inset-inline-end: var(--bs-spacer-7);
    z-index: var(--bs-z-toast);
    display: grid;
    gap: var(--bs-spacer-3);
    width: min(24rem, calc(100% - 2rem));
  }
  .kit-toast { display: flex; flex-direction: row; align-items: flex-start; gap: var(--bs-spacer-4); padding: var(--bs-spacer-5); }
  .kit-toast .kit-toast-icon { font-size: 1.125rem; line-height: 1.2; }
  .kit-toast strong { display: block; font-weight: 600; }
  .kit-toast p { margin: 0; color: var(--bs-fg-2); }
  .kit-toast .btn-close { margin-inline-start: auto; }

  /* ---------- Toucher : cibles de 44 px, champs en 16 px ---------- */
  /* Par type de pointeur, pas par largeur : une tablette avec clavier garde la densité, un écran tactile l'agrandit. */
  @media (pointer: coarse) {
    .btn-icon, .kit-theme-switch .btn-icon { min-width: 2.75rem; min-height: 2.75rem; }
    .kit-theme-switch .btn-icon { width: 2.75rem; height: 2.75rem; }
    .kit-nav a, .kit-links a, .kit-palette-list a, .kit-next-item, .menu-item { min-height: 2.75rem; }
    .kit-user, .kit-search, .kit-switch, .breadcrumb-link, .kit-nav-trigger, .kit-brand { min-height: 2.75rem; }
    .kit-user { min-width: 2.75rem; justify-content: center; }
    .kit-table td > a:first-child { min-height: 2.75rem; }
    .page-link { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; }
    .btn-close { padding: 0.9375rem; }
    .form-adorn .form-ghost { font-size: 1rem; }
    .form-adorn { min-height: 2.75rem; }
    .kit-shortcut:active { background: var(--bs-bg-2); }
  }

  /* ---------- Tableau empilé : une carte par ligne sous 768 px ---------- */
  /* Chaque cellule porte data-label ; la première cellule sert d'en-tête de carte, la dernière (actions) se place en haut à droite. */
  @media (max-width: 767.98px) {
    .kit-table.is-stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .kit-table.is-stackable, .kit-table.is-stackable tbody { display: block; }
    .kit-table.is-stackable tbody tr {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--bs-spacer-4) var(--bs-spacer-6);
      padding: var(--bs-spacer-6);
      border-bottom: 1px solid var(--bs-border-color);
    }
    .kit-table.is-stackable tbody tr:hover { background: transparent; }
    .kit-table.is-stackable td { display: block; padding: 0; border: 0; white-space: normal; }
    .kit-table.is-stackable td[data-label]::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 0.125rem;
      color: var(--bs-fg-3);
      font-family: var(--bs-body-font-family);
      font-size: 0.75rem;
      letter-spacing: 0;
    }
    .kit-table.is-stackable td:first-child { grid-column: 1 / -1; padding-inline-end: 3rem; }
    .kit-table.is-stackable td:first-child::before { display: none; }
    .kit-table.is-stackable td:last-child { position: absolute; top: var(--bs-spacer-5); inset-inline-end: var(--bs-spacer-4); }
    .kit-table.is-stackable td[colspan] { grid-column: 1 / -1; }
    .kit-table.is-stackable .kit-skeleton-group { display: none; }
  }

  /* Encoches et coins arrondis des téléphones. */
  .kit-topbar { padding-inline: max(var(--bs-spacer-9), env(safe-area-inset-left)) max(var(--bs-spacer-9), env(safe-area-inset-right)); }

  /* ---------- Responsive ---------- */
  @media (max-width: 1279.98px) {
  }
  @media (max-width: 1023.98px) {
    .kit-shell { grid-template-columns: minmax(0, 1fr); }
    .kit-shell > .kit-sidebar { display: none; }
    .kit-topbar { padding-inline: max(var(--bs-spacer-5), env(safe-area-inset-left)) max(var(--bs-spacer-5), env(safe-area-inset-right)); }
    .kit-demo-note { padding-inline: var(--bs-spacer-5); }
    .kit-page { padding: var(--bs-spacer-6) var(--bs-spacer-5) var(--bs-spacer-10); }
  }
  @media (min-width: 1024px) {
    .kit-only-mobile { display: none !important; }
  }
  /* Tiroir mobile : un seul fond, la marque en en-tête avec la croix, la navigation avec ses marges. */
  .kit-drawer { --bs-drawer-padding-x: var(--bs-spacer-5); --bs-drawer-padding-y: var(--bs-spacer-5); background: var(--bs-bg-1); width: min(20rem, 88vw); }
  .kit-drawer .drawer-header { gap: var(--bs-spacer-4); border-bottom: 1px solid var(--bs-border-muted); }
  .kit-drawer .kit-brand { padding: 0; }
  .kit-drawer .kit-sidebar { position: static; height: auto; padding: var(--bs-spacer-5) var(--bs-spacer-4); border: 0; background: transparent; }

  /* Croix de fermeture : un trait fin, pas le carré plein de Bootstrap 6. */
  .btn-close {
    --bs-btn-close-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3e%3c/svg%3e");
    --bs-btn-close-size: 0.875rem;
    --bs-btn-close-opacity: 0.6;
    padding: 0.5rem;
    mask-origin: content-box;
    mask-clip: content-box;
  }
  /* Au toucher, 44 px. Cette règle doit suivre la précédente : à spécificité égale, la dernière gagne. */
  @media (pointer: coarse) { .btn-close { padding: 0.9375rem; } }
  /* Barre du haut : actions groupées à droite ; en mobile, le titre de la page remplace le fil d'Ariane. */
  .kit-topbar-actions { display: flex; align-items: center; gap: var(--bs-spacer-1); }
  /* Sélecteur de navigation (sous 1024 px) : marque, titre de la page, chevron. Remplace le burger. */
  .kit-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--bs-spacer-3);
    min-width: 0;
    min-height: 2.75rem; /* bouton du mobile : toujours 44 px */
    padding: 0.25rem 0.625rem 0.25rem 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--bs-radius-6);
    background: transparent;
    color: var(--bs-heading-color);
    transition: background-color var(--kit-dur-fast), border-color var(--kit-dur-fast);
  }
  .kit-nav-trigger .kit-brand-mark { width: 1.875rem; height: 1.875rem; font-size: 0.6875rem; flex: none; }
  .kit-nav-trigger .bi-chevron-down { color: var(--bs-fg-3); font-size: 0.75rem; transition: transform var(--kit-dur) var(--kit-ease-out); }
  .kit-nav-trigger:active, .kit-nav-trigger[aria-expanded="true"] { background: var(--bs-bg-2); border-color: var(--bs-border-color); }
  .kit-nav-trigger[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
  @media (hover: hover) { .kit-nav-trigger:hover { background: var(--bs-bg-2); } }
  .kit-topbar-title {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* Sous 1024 px, la barre latérale devient un tiroir : le sélecteur remplace le fil d'Ariane. */
  @media (max-width: 1023.98px) {
    .kit-nav-trigger { flex: 0 0 auto; max-width: 50%; }
    .kit-search { flex: 0 1 22rem; width: auto; }
    .kit-crumbs { display: none; }
    .kit-topbar { gap: var(--bs-spacer-3); }
  }
  @media (max-width: 575.98px) {
    .kit-nav-trigger { flex: 0 1 auto; max-width: none; }
    /* Téléphone : ce qui reste joignable par la navigation cède la place au titre de la page. */
    .kit-hide-phone { display: none !important; }
    /* Barre d'actions du formulaire : deux boutons côte à côte, l'état du brouillon passe en toast. */
    .kit-form-actions { flex-wrap: nowrap; padding-inline: var(--bs-spacer-5); }
    .kit-form-actions > :is(button, a) { flex: 1 1 0; margin-inline-start: 0 !important; padding-inline: var(--bs-spacer-3); }
    .kit-user { padding-inline-end: 0.25rem; }
  }
  @media (max-width: 575.98px) {
    .kit-topbar-actions { margin-inline-start: auto; }
    /* Légende sous le titre du panneau, en colonnes régulières. */
  }
  .kit-crumbs { min-width: 0; overflow: hidden; white-space: nowrap; }
  .kit-crumbs .breadcrumb { flex-wrap: nowrap; }
  @media (max-width: 1279.98px) {
    .kit-user .kit-user-text { display: none; }
  }

  @media (max-width: 575.98px) {
    .kit-search { display: none; }
    .kit-theme-switch { display: none; }
    .kit-page-head .kit-actions { margin-inline-start: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
    .kit-skeleton { animation: none; }
    [aria-busy="true"]::after { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  }
}

/* Jetons tactiles : hors couche, comme les autres surcharges de :root, sinon le :root de Bootstrap l'emporte. */
@media (pointer: coarse) {
  :root {
    --bs-btn-input-min-height: 2.75rem;
    --bs-btn-input-sm-min-height: 2.75rem;
    --bs-btn-input-xs-min-height: 2.75rem;
    /* En dessous de 16 px, Safari iOS zoome sur le champ au moment de la saisie. */
    --bs-btn-input-font-size: 1rem;
    --bs-btn-input-sm-font-size: 1rem;
  }
}

/* ---------- Points d'accroche de la marque ---------- */
@layer custom {
  /* Signature optionnelle en haut de page : la marque fournit --kit-stripe (un dégradé) et sa hauteur. */
  .kit-shell::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 1030;
    height: var(--kit-stripe-h, 0);
    background: var(--kit-stripe, none);
    pointer-events: none;
  }
  /* Logo image de la marque, à la place du monogramme. */
  .kit-brand-logo { display: block; height: var(--kit-logo-h, 1.75rem); width: auto; }
  /* Une version du logo par thème : .kit-on-light et .kit-on-dark. */
  :root[data-bs-theme="dark"] .kit-on-light,
  :root[data-bs-theme="light"] .kit-on-dark { display: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-bs-theme]) .kit-on-light { display: none; } }
  @media (prefers-color-scheme: light) { :root:not([data-bs-theme]) .kit-on-dark { display: none; } }
}