/* Kit Pro — composants (CSS pur, classes kp-*). Consomme les variables de kp-tokens.css.
   Copie de components/bundle.css du design system (version 7, 2026-10-15). Seule adaptation : le bloc :root
   (polices, --kp-ease) vit dans kp-tokens.css, et les styles de texte kp-product-title / kp-body* / kp-label
   (absents du bundle, encore utilisés par les gabarits) sont ajoutés en fin de fichier.
   Ruptures : 576 / 768 / 992 / 1200 / 1400 px en min-width (kp-bp-*). */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--kp-font-sans);
  font-size: 15px;
  line-height: 22px;
  color: var(--kp-ink-80);
  background: var(--kp-ink-02);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
.kp-i { flex: none; display: block; }
.kp-ref { font-family: var(--kp-font-mono); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--kp-ink-60); letter-spacing: 0; }
.kp-muted { color: var(--kp-ink-60); }
.kp-link { color: var(--kp-blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kp-link:hover { color: var(--kp-blue-dark); }
.kp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--kp-focus-ring);
}

/* ─── Bouton ─────────────────────────────────────────────── */
.kp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kp-space-2);
  min-height: var(--kp-control-md); padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--kp-radius-sm);
  font: 700 15px/20px var(--kp-font-sans); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s var(--kp-ease), border-color .15s var(--kp-ease), color .15s var(--kp-ease);
  touch-action: manipulation;
}
.kp-btn--primary { background: var(--kp-blue); color: var(--kp-white); }
.kp-btn--primary:hover { background: var(--kp-blue-dark); }
.kp-btn--secondary { background: var(--kp-white); color: var(--kp-ink); border-color: var(--kp-ink-30); }
.kp-btn--secondary:hover { border-color: var(--kp-ink); background: var(--kp-ink-05); }
.kp-btn--ghost { background: transparent; color: var(--kp-blue); padding: 0 8px; }
.kp-btn--ghost:hover { color: var(--kp-blue-dark); background: var(--kp-blue-light); }
.kp-btn--lg { min-height: var(--kp-control-lg); padding: 0 22px; font-size: 16px; }
.kp-btn--sm { min-height: var(--kp-control-sm); padding: 0 12px; font-size: 14px; }
.kp-btn--block { display: flex; width: 100%; }
.kp-btn--icon { padding: 0; width: var(--kp-control-md); }
.kp-btn[disabled], .kp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.kp-btn[aria-busy="true"] { color: transparent; position: relative; pointer-events: none; }
.kp-btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--kp-white); border-right-color: transparent; animation: kp-spin .7s linear infinite;
}
@keyframes kp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kp-btn[aria-busy="true"]::after { animation-duration: 2s; } }

/* ─── Prix HT / TTC ──────────────────────────────────────── */
.kp-price { display: flex; flex-direction: column; gap: 2px; }
.kp-price__ht { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; color: var(--kp-ink); }
.kp-price__amount { font-weight: 800; font-size: 22px; line-height: 26px; letter-spacing: -0.01em; }
.kp-price__tag { font-size: 13px; line-height: 18px; font-weight: 700; color: var(--kp-ink-60); }
.kp-price__ttc { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--kp-ink-60); }
.kp-price--xl .kp-price__amount { font-size: 30px; line-height: 34px; letter-spacing: -0.02em; }
.kp-price--xl .kp-price__tag { font-size: 15px; }
.kp-price--xl .kp-price__ttc { font-size: 14px; line-height: 20px; }
.kp-price--md .kp-price__amount { font-size: 17px; line-height: 22px; letter-spacing: 0; }
.kp-price--md .kp-price__tag, .kp-price--md .kp-price__ttc { font-size: 12px; line-height: 16px; }
.kp-price--end { align-items: flex-end; text-align: right; }
.kp-price--end .kp-price__ht { justify-content: flex-end; }
@media (min-width: 768px) {
  .kp-price--xl .kp-price__amount { font-size: 34px; line-height: 38px; }
}

/* ─── Stock et délai ─────────────────────────────────────── */
.kp-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; line-height: 20px; }
.kp-stock__state { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.kp-stock__delay { color: var(--kp-ink-60); font-weight: 500; }
.kp-stock--ok .kp-stock__state { color: var(--kp-success); }
.kp-stock--low .kp-stock__state { color: var(--kp-warning); }
.kp-stock--order .kp-stock__state, .kp-stock--quote .kp-stock__state { color: var(--kp-info); }
.kp-stock--out .kp-stock__state { color: var(--kp-ink-60); }
.kp-stock--sm { font-size: 13px; line-height: 18px; }
.kp-stock--sm .kp-i { width: 16px; height: 16px; }

.kp-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: var(--kp-radius-xs); font-size: 12px; line-height: 18px; font-weight: 700;
  background: var(--kp-ink-05); color: var(--kp-ink-80);
}
.kp-badge--success { background: var(--kp-success-light); color: var(--kp-success); }
.kp-badge--warning { background: var(--kp-warning-light); color: var(--kp-warning); }
.kp-badge--info { background: var(--kp-info-light); color: var(--kp-info); }
.kp-badge--danger { background: var(--kp-danger-light); color: var(--kp-danger); }

/* ─── Carte produit ─────────────────────────────────────── */
.kp-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md);
  transition: border-color .15s var(--kp-ease), box-shadow .15s var(--kp-ease);
}
.kp-card:hover { border-color: var(--kp-ink-20); box-shadow: var(--kp-shadow-sm); }
.kp-card__media { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--kp-space-4); border-bottom: 1px solid var(--kp-ink-05); }
.kp-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kp-card__body { display: flex; flex-direction: column; gap: var(--kp-space-2); padding: var(--kp-space-4); flex: 1; }
.kp-card__brand { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--kp-ink-60); }
.kp-card__title { margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--kp-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kp-card__title a { color: inherit; text-decoration: none; }
.kp-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kp-card__title a:focus-visible { box-shadow: none; }
.kp-card:has(.kp-card__title a:focus-visible) { box-shadow: var(--kp-focus-ring); }
.kp-card__specs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
.kp-card__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--kp-space-3); margin-top: auto; padding-top: var(--kp-space-2); }
.kp-card__foot .kp-btn { position: relative; z-index: 1; }
.kp-card--out .kp-card__media img { opacity: .55; }

/* ─── L'essentiel (caractéristiques clés) ───────────────── */
.kp-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--kp-ink-10); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); overflow: hidden; }
.kp-specs__item { min-width: 0; padding: 10px 14px; background: var(--kp-white); }
.kp-specs__k { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--kp-ink-60); }
.kp-specs__v { margin: 0; font-size: 15px; line-height: 21px; font-weight: 700; color: var(--kp-ink); overflow-wrap: anywhere; }
.kp-specs__refs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px 14px; background: var(--kp-ink-05); }
@media (min-width: 992px) { .kp-specs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ─── Quantité ──────────────────────────────────────────── */
.kp-qty { display: inline-flex; align-items: stretch; height: var(--kp-control-lg); border: 1px solid var(--kp-ink-30); border-radius: var(--kp-radius-sm); background: var(--kp-white); }
.kp-qty button { width: 44px; border: 0; background: none; color: var(--kp-ink); cursor: pointer; display: grid; place-items: center; border-radius: var(--kp-radius-sm); }
.kp-qty button:hover { background: var(--kp-ink-05); }
.kp-qty input { width: 48px; border: 0; text-align: center; font: 700 16px/20px var(--kp-font-sans); color: var(--kp-ink); background: none; -moz-appearance: textfield; }
.kp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.kp-qty--sm { height: var(--kp-control-sm); }
.kp-qty--sm button { width: 34px; }
.kp-qty--sm input { width: 36px; font-size: 15px; }

/* ─── Bloc d'achat (fiche produit) ──────────────────────── */
.kp-buybox { display: grid; gap: var(--kp-space-4); padding: var(--kp-space-5); background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-lg); }
.kp-buybox__head { display: grid; gap: var(--kp-space-3); }
.kp-buybox__row { display: flex; gap: var(--kp-space-3); }
.kp-buybox__row .kp-btn--primary { flex: 1; }
.kp-buybox__facts { display: grid; gap: 10px; margin: 0; padding: var(--kp-space-4) 0 0; list-style: none; border-top: 1px solid var(--kp-ink-10); font-size: 14px; line-height: 20px; color: var(--kp-ink-80); }
.kp-buybox__facts li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.kp-buybox__facts .kp-i { color: var(--kp-ink-60); margin-top: 0; }
.kp-buybox__facts strong { color: var(--kp-ink); font-weight: 700; }

.kp-quote-hint { display: grid; gap: var(--kp-space-3); padding: 14px var(--kp-space-4); background: var(--kp-info-light); border-radius: var(--kp-radius-md); color: var(--kp-ink-80); font-size: 14px; line-height: 20px; }
.kp-quote-hint__title { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 700; color: var(--kp-info); }
.kp-quote-hint p { margin: 0; }

/* Barre d'achat collante (mobile, fiche produit) */
.kp-sticky-buy {
  position: sticky; bottom: 0; z-index: var(--kp-z-sticky);
  display: flex; align-items: center; gap: var(--kp-space-3);
  padding: 10px var(--kp-space-4) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--kp-white); border-top: 1px solid var(--kp-ink-10); box-shadow: var(--kp-shadow-md);
}
.kp-sticky-buy .kp-btn { flex: 1; }

/* ─── Complétez le poste ─────────────────────────────────── */
.kp-setup { display: grid; gap: var(--kp-space-5); padding: var(--kp-space-5); background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-lg); }
.kp-setup__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.kp-setup__head h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--kp-ink); }
.kp-setup__head p { margin: 0; font-size: 14px; line-height: 20px; color: var(--kp-ink-60); }
.kp-setup__equation { display: none; }
.kp-setup__list { display: grid; margin: 0; padding: 0; list-style: none; }
.kp-setup__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--kp-space-3); align-items: center; padding: var(--kp-space-3) 0; border-top: 1px solid var(--kp-ink-10); }
.kp-setup__item:first-child { border-top: 0; padding-top: 0; }
.kp-setup__thumb { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-sm); background: var(--kp-white); overflow: hidden; }
.kp-setup__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kp-setup__role { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--kp-ink-60); }
.kp-setup__name { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--kp-ink); }
.kp-setup__side { display: grid; justify-items: end; gap: 6px; }
.kp-setup__item--base { background: none; }
.kp-setup__item--added .kp-setup__toggle { color: var(--kp-success); border-color: var(--kp-success); background: var(--kp-success-light); }
.kp-setup__foot { display: grid; gap: var(--kp-space-3); padding-top: var(--kp-space-4); border-top: 2px solid var(--kp-ink); }
.kp-setup__total { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--kp-space-3); }
.kp-setup__total-label { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--kp-ink); }
.kp-setup__total-label small { display: block; font-size: 13px; font-weight: 500; color: var(--kp-ink-60); }
@media (min-width: 992px) {
  .kp-setup__equation { display: flex; align-items: center; gap: 10px; }
  .kp-setup__eq-item { flex: 1; min-width: 0; display: grid; place-items: center; aspect-ratio: 1; max-width: 120px; padding: 10px; border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); background: var(--kp-white); }
  .kp-setup__eq-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .kp-setup__eq-op { flex: none; font-size: 22px; font-weight: 800; color: var(--kp-ink-40); }
  .kp-setup__eq-total { flex: none; display: grid; gap: 2px; padding-left: 6px; }
  .kp-setup__foot { grid-template-columns: 1fr auto; align-items: center; }
}

/* ─── En-tête et recherche ──────────────────────────────── */
.kp-topbar { background: var(--kp-ink); color: var(--kp-ink-20); font-size: 13px; line-height: 18px; }
.kp-topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: var(--kp-container); margin: 0 auto; padding: 8px var(--kp-space-4); }
.kp-topbar__group { display: flex; align-items: center; gap: 20px; }
.kp-topbar__item { display: inline-flex; align-items: center; gap: 6px; }
.kp-topbar a { color: var(--kp-ink-20); text-decoration: none; }
.kp-topbar a:hover { color: var(--kp-white); text-decoration: underline; }
.kp-topbar strong { color: var(--kp-white); font-weight: 600; }

.kp-header { position: sticky; top: 0; z-index: var(--kp-z-sticky); background: var(--kp-white); border-bottom: 1px solid var(--kp-ink-10); }
.kp-header__row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "menu logo actions" "search search search"; align-items: center; gap: 10px 12px; max-width: var(--kp-container); margin: 0 auto; padding: 10px var(--kp-space-4); }
.kp-header__menu { grid-area: menu; }
.kp-header__logo { grid-area: logo; display: block; line-height: 0; }
.kp-header__logo img { height: 28px; width: auto; }
.kp-header__search { grid-area: search; min-width: 0; position: relative; }
.kp-header__actions { grid-area: actions; display: flex; align-items: center; gap: 4px; }
.kp-hdr-action { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: var(--kp-radius-sm); color: var(--kp-ink); text-decoration: none; font-size: 14px; line-height: 18px; font-weight: 600; background: none; border: 0; cursor: pointer; }
.kp-hdr-action:hover { background: var(--kp-ink-05); }
.kp-hdr-action__label { display: none; }
.kp-hdr-action__meta { display: block; font-size: 12px; font-weight: 500; color: var(--kp-ink-60); }
.kp-hdr-cart__icon { position: relative; display: block; margin-right: 6px; }
.kp-hdr-cart__count { position: absolute; top: -7px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--kp-radius-full); background: var(--kp-blue); color: var(--kp-white); font-size: 11px; line-height: 18px; font-weight: 800; text-align: center; }
@media (min-width: 992px) {
  .kp-header__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search actions"; gap: 24px; padding: 14px var(--kp-space-6); }
  .kp-header__menu { display: none; }
  .kp-header__logo img { height: 34px; }
  .kp-hdr-action__label { display: block; }
}

.kp-search { display: flex; align-items: stretch; height: var(--kp-control-lg); background: var(--kp-white); border: 1px solid var(--kp-ink-30); border-radius: var(--kp-radius-sm); transition: border-color .15s var(--kp-ease); }
.kp-search:focus-within { border-color: var(--kp-blue); box-shadow: 0 0 0 3px var(--kp-blue-light); }
.kp-search__icon { display: grid; place-items: center; width: 44px; color: var(--kp-ink-60); }
.kp-search input { flex: 1; min-width: 0; border: 0; background: none; font: 400 16px/22px var(--kp-font-sans); color: var(--kp-ink); }
.kp-search input::placeholder { color: var(--kp-ink-40); }
.kp-search input:focus-visible { box-shadow: none; outline: none; }
.kp-search__clear { border: 0; background: none; color: var(--kp-ink-60); width: 40px; cursor: pointer; display: grid; place-items: center; }
.kp-search__submit { margin: 3px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--kp-blue); color: var(--kp-white); font: 700 15px/20px var(--kp-font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.kp-search__submit:hover { background: var(--kp-blue-dark); }
.kp-search__submit span { display: none; }
@media (min-width: 768px) { .kp-search__submit span { display: inline; } }

/* ─── Autocomplétion ────────────────────────────────────── */
.kp-suggest { display: grid; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow-lg); overflow: hidden; }
.kp-suggest__main { display: grid; gap: var(--kp-space-4); padding: var(--kp-space-4); min-width: 0; }
.kp-suggest__side { display: grid; align-content: start; gap: var(--kp-space-4); padding: var(--kp-space-4); background: var(--kp-ink-02); border-top: 1px solid var(--kp-ink-10); }
.kp-suggest__group { display: grid; gap: 4px; }
.kp-suggest__label { margin: 0 0 4px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--kp-ink-60); display: flex; justify-content: space-between; gap: 8px; }
.kp-suggest__dym { margin: 0; padding: 10px 12px; border-radius: var(--kp-radius-sm); background: var(--kp-warning-light); font-size: 14px; line-height: 20px; color: var(--kp-ink-80); }
.kp-suggest__dym a { color: var(--kp-blue); font-weight: 700; }
.kp-suggest__exact { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--kp-success); border-radius: var(--kp-radius-md); background: var(--kp-success-light); text-decoration: none; color: inherit; }
.kp-suggest__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: var(--kp-radius-sm); text-decoration: none; color: inherit; }
.kp-suggest__row:hover, .kp-suggest__row[aria-selected="true"] { background: var(--kp-blue-light); }
.kp-suggest__thumb { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--kp-radius-xs); background: var(--kp-white); border: 1px solid var(--kp-ink-10); overflow: hidden; }
.kp-suggest__exact .kp-suggest__thumb { width: 56px; height: 56px; }
.kp-suggest__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kp-suggest__name { margin: 0; font-size: 14px; line-height: 19px; font-weight: 500; color: var(--kp-ink-80); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kp-suggest__name b { font-weight: 800; color: var(--kp-ink); }
.kp-suggest__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; }
.kp-suggest__cat { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; margin: 0 -8px; border-radius: var(--kp-radius-sm); color: var(--kp-ink-80); text-decoration: none; font-size: 14px; line-height: 20px; }
.kp-suggest__cat:hover { background: var(--kp-blue-light); color: var(--kp-ink); }
.kp-suggest__cat span:last-child { color: var(--kp-ink-40); font-size: 13px; }
.kp-suggest__cat small { display: block; font-size: 12px; line-height: 16px; color: var(--kp-ink-40); }
.kp-suggest__all { display: flex; justify-content: center; align-items: center; min-height: 44px; border-top: 1px solid var(--kp-ink-10); color: var(--kp-blue); font-weight: 700; font-size: 14px; text-decoration: none; background: var(--kp-white); }
.kp-suggest__all:hover { background: var(--kp-blue-light); }
@media (min-width: 768px) {
  .kp-suggest { grid-template-columns: minmax(0, 1fr) 240px; }
  .kp-suggest__side { border-top: 0; border-left: 1px solid var(--kp-ink-10); }
  .kp-suggest__all { grid-column: 1 / -1; }
}

/* ─── Barre de navigation (desktop) ─────────────────────── */
/* Un lien mène à une page. Seul le bouton catalogue ouvre un menu. */
.kp-nav { display: none; background: var(--kp-ink); }
@media (min-width: 992px) { .kp-nav { display: block; } }
.kp-nav__inner { display: flex; align-items: stretch; height: 52px; max-width: var(--kp-container); margin: 0 auto; padding: 0 var(--kp-space-6); }
.kp-nav__cat { width: 280px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px; border: 0; background: var(--kp-blue); color: var(--kp-white); font: 700 15px/20px var(--kp-font-sans); text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s var(--kp-ease); }
.kp-nav__cat > span { flex: 1; }
.kp-nav__cat:hover, .kp-nav__cat[aria-expanded="true"] { background: var(--kp-blue-dark); color: var(--kp-white); }
.kp-nav__link { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border-left: 1px solid var(--kp-ink-80); color: var(--kp-ink-20); font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kp-nav__link:last-child { border-right: 1px solid var(--kp-ink-80); }
.kp-nav__link:hover, .kp-nav__link[aria-current="page"] { background: var(--kp-ink-80); color: var(--kp-white); box-shadow: inset 0 -3px 0 var(--kp-blue); }
.kp-nav__cat:focus-visible, .kp-nav__link:focus-visible { box-shadow: inset 0 0 0 2px var(--kp-white); }
@media (max-width: 1100px) {
  .kp-nav__cat { width: 216px; padding: 0 14px; }
  .kp-nav__link { padding: 0 8px; font-size: 13px; line-height: 16px; white-space: normal; text-align: center; }
  .kp-nav__link .kp-i { display: none; }
}

/* ─── Méga-menu catalogue ───────────────────────────────── */
/* Ouvert par le seul bouton « Tous nos produits » : rayons à gauche, sous-rayons au centre, sélection et devis à droite. */
.kp-mega { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: 0 0 var(--kp-radius-lg) var(--kp-radius-lg); box-shadow: var(--kp-shadow-md); overflow: hidden; }
.kp-mega__depts { margin: 0; padding: 8px 0; list-style: none; border-right: 1px solid var(--kp-ink-10); }
.kp-mega__dept { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px 0 13px; color: var(--kp-ink-80); font-size: 14px; line-height: 18px; font-weight: 600; text-decoration: none; box-shadow: inset 3px 0 0 transparent; }
.kp-mega__dept > span:not(.kp-mega__thumb) { flex: 1; }
.kp-mega__dept .kp-i { color: var(--kp-ink-30); }
.kp-mega__dept:hover, .kp-mega__dept[aria-current="true"] { background: var(--kp-blue-light); color: var(--kp-ink); box-shadow: inset 3px 0 0 var(--kp-blue); }
.kp-mega__dept:hover .kp-i, .kp-mega__dept[aria-current="true"] .kp-i { color: var(--kp-blue); }
.kp-mega__thumb { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--kp-ink-10); border-radius: 6px; background: var(--kp-white); overflow: hidden; }
.kp-mega__thumb img { width: 30px; height: 30px; object-fit: contain; }
.kp-mega__panel { min-width: 0; padding: 22px 32px 8px; }
.kp-mega__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--kp-ink-10); }
.kp-mega__name { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--kp-ink); }
.kp-mega__all { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--kp-ink-20); border-radius: var(--kp-radius-sm); background: var(--kp-white); color: var(--kp-ink); font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: none; }
.kp-mega__all:hover { border-color: var(--kp-blue); color: var(--kp-blue); }
.kp-mega__cols { column-count: 3; column-gap: 32px; }
@media (max-width: 1320px) { .kp-mega__cols { column-count: 2; } }
.kp-mega__col { display: flex; flex-direction: column; break-inside: avoid; margin: 0 0 22px; }
.kp-mega__title { padding: 2px 0 4px; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--kp-blue); text-decoration: none; }
.kp-mega__title:hover { color: var(--kp-blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.kp-mega__link { padding: 4px 0; font-size: 14px; line-height: 20px; color: var(--kp-ink-80); text-decoration: none; }
.kp-mega__link:hover { color: var(--kp-ink); text-decoration: underline; text-underline-offset: 3px; }
.kp-mega__aside { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; background: var(--kp-ink-02); border-left: 1px solid var(--kp-ink-10); }
.kp-mega__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--kp-ink-60); }
.kp-mega__pick { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); background: var(--kp-white); box-shadow: var(--kp-shadow-sm); color: var(--kp-ink); text-decoration: none; }
.kp-mega__pick:hover { border-color: var(--kp-ink-20); box-shadow: var(--kp-shadow-md); }
.kp-mega__pick-img { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: var(--kp-radius-sm); background: var(--kp-white); }
.kp-mega__pick-img img { width: 72px; height: 72px; object-fit: contain; }
.kp-mega__pick-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kp-mega__pick-brand { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--kp-ink-60); }
.kp-mega__pick-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--kp-ink); }
.kp-mega__pick-price { display: flex; align-items: baseline; gap: 4px; font-size: 16px; line-height: 22px; font-weight: 800; color: var(--kp-ink); }
.kp-mega__pick-price small { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--kp-ink-60); }
.kp-mega__quote { display: grid; gap: 8px; margin-top: auto; padding: 16px; border-radius: var(--kp-radius-md); background: var(--kp-ink); color: var(--kp-ink-20); }
.kp-mega__quote h3 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--kp-white); }
.kp-mega__quote p { margin: 0; font-size: 13px; line-height: 18px; color: var(--kp-ink-20); }
.kp-mega__quote .kp-btn--secondary { background: transparent; border-color: var(--kp-ink-40); color: var(--kp-white); }
.kp-mega__quote .kp-btn--secondary:hover { border-color: var(--kp-white); background: var(--kp-ink-80); }

/* ─── Facettes et tri ───────────────────────────────────── */
.kp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kp-toolbar__count { font-size: 14px; line-height: 20px; color: var(--kp-ink-60); }
.kp-toolbar__count strong { color: var(--kp-ink); }
.kp-select { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--kp-ink-60); }
.kp-select select { appearance: none; min-height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--kp-ink-30); border-radius: var(--kp-radius-sm); background: var(--kp-white); font: 600 14px/20px var(--kp-font-sans); color: var(--kp-ink); cursor: pointer; }
.kp-select .kp-i { position: absolute; right: 10px; pointer-events: none; color: var(--kp-ink-60); }
.kp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px; border: 1px solid var(--kp-blue); border-radius: var(--kp-radius-sm); background: var(--kp-blue-light); color: var(--kp-blue-dark); font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer; }
.kp-chip--clear { border-color: transparent; background: none; color: var(--kp-blue); text-decoration: underline; padding: 0 6px; }

.kp-facets { display: grid; align-content: start; }
.kp-facet { border-bottom: 1px solid var(--kp-ink-10); }
.kp-facet > summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer; list-style: none; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--kp-ink); }
.kp-facet > summary::-webkit-details-marker { display: none; }
.kp-facet[open] > summary .kp-i { transform: rotate(180deg); }
.kp-facet__body { display: grid; gap: 2px; padding-bottom: 14px; }
.kp-check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; line-height: 20px; color: var(--kp-ink-80); cursor: pointer; }
.kp-check input { appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--kp-ink-30); border-radius: var(--kp-radius-xs); background: var(--kp-white); display: grid; place-items: center; cursor: pointer; }
.kp-check input:checked { background: var(--kp-blue); border-color: var(--kp-blue); }
.kp-check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--kp-white); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.kp-check input[type="radio"] { border-radius: 50%; }
.kp-check input[type="radio"]:checked { background: var(--kp-white); border: 6px solid var(--kp-blue); }
.kp-check input[type="radio"]:checked::after { display: none; }
.kp-check__count { color: var(--kp-ink-40); font-size: 13px; }
.kp-check:has(input:checked) { color: var(--kp-ink); font-weight: 600; }
.kp-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.kp-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 700; color: var(--kp-ink); cursor: pointer; }
.kp-switch input { appearance: none; width: 40px; height: 24px; margin: 0; border-radius: 12px; background: var(--kp-ink-30); position: relative; cursor: pointer; transition: background .15s var(--kp-ease); }
.kp-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--kp-white); transition: transform .15s var(--kp-ease); }
.kp-switch input:checked { background: var(--kp-blue); }
.kp-switch input:checked::after { transform: translateX(16px); }

/* ─── Panier ────────────────────────────────────────────── */
.kp-cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px 16px; padding: var(--kp-space-4) 0; border-bottom: 1px solid var(--kp-ink-10); }
.kp-cart-line__thumb { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-sm); background: var(--kp-white); }
.kp-cart-line__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kp-cart-line__info { display: grid; gap: 4px; min-width: 0; }
.kp-cart-line__name { margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--kp-ink); }
.kp-cart-line__actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kp-cart-line__remove { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; border: 0; background: none; color: var(--kp-ink-60); font: 600 13px/18px var(--kp-font-sans); cursor: pointer; border-radius: var(--kp-radius-sm); }
.kp-cart-line__remove:hover { color: var(--kp-danger); background: var(--kp-danger-light); }
@media (min-width: 768px) {
  .kp-cart-line { grid-template-columns: 88px minmax(0, 1fr) auto auto; align-items: center; }
  .kp-cart-line__thumb { width: 88px; height: 88px; }
  .kp-cart-line__actions { grid-column: auto; display: contents; }
}

.kp-summary { display: grid; gap: var(--kp-space-4); padding: var(--kp-space-5); background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-lg); }
.kp-summary h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--kp-ink); }
.kp-summary__rows { display: grid; gap: 10px; margin: 0; font-size: 14px; line-height: 20px; }
.kp-summary__row { display: flex; justify-content: space-between; gap: 12px; color: var(--kp-ink-80); }
.kp-summary__row dd { margin: 0; white-space: nowrap; text-align: right; color: var(--kp-ink); font-weight: 600; }
.kp-summary__row dt small { display: block; font-size: 12px; line-height: 16px; color: var(--kp-ink-40); }
.kp-summary__total { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: var(--kp-space-4); border-top: 2px solid var(--kp-ink); }
.kp-summary__total-label { font-size: 15px; line-height: 20px; font-weight: 800; color: var(--kp-ink); }
.kp-progress { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--kp-radius-md); background: var(--kp-ink-05); font-size: 13px; line-height: 18px; color: var(--kp-ink-80); }
.kp-progress__track { height: 6px; border-radius: 3px; background: var(--kp-ink-10); overflow: hidden; }
.kp-progress__fill { height: 100%; border-radius: 3px; background: var(--kp-success); }
.kp-progress strong { color: var(--kp-ink); }

.kp-upsell { display: grid; gap: 10px; }
.kp-upsell__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--kp-ink); }
.kp-upsell__item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }

/* ─── Étapes du tunnel ─────────────────────────────────── */
.kp-steps { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: kp-step; }
.kp-steps__item { flex: 1; display: grid; gap: 8px; min-width: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--kp-ink-40); counter-increment: kp-step; }
.kp-steps__bar { height: 4px; border-radius: 2px; background: var(--kp-ink-10); }
.kp-steps__label { display: flex; align-items: center; gap: 6px; }
.kp-steps__label::before { content: counter(kp-step); display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--kp-ink-30); font-size: 12px; font-weight: 800; }
.kp-steps__item--done { color: var(--kp-ink-80); }
.kp-steps__item--done .kp-steps__bar { background: var(--kp-success); }
.kp-steps__item--done .kp-steps__label::before { content: "✓"; border-color: var(--kp-success); background: var(--kp-success); color: var(--kp-white); }
.kp-steps__item--done a { color: inherit; }
.kp-steps__item--current { color: var(--kp-ink); font-weight: 800; }
.kp-steps__item--current .kp-steps__bar { background: var(--kp-ink); }
.kp-steps__item--current .kp-steps__label::before { border-color: var(--kp-ink); background: var(--kp-ink); color: var(--kp-white); }
.kp-steps__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .kp-steps__item:not(.kp-steps__item--current) .kp-steps__name { display: none; } }

/* ─── Options (livraison, paiement) ────────────────────── */
.kp-choices { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.kp-choice { display: grid; grid-template-columns: 20px 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--kp-white); border: 1px solid var(--kp-ink-30); border-radius: var(--kp-radius-md); cursor: pointer; transition: border-color .15s var(--kp-ease), background-color .15s var(--kp-ease); }
.kp-choice:hover { border-color: var(--kp-ink); }
.kp-choice:has(input:checked) { border-color: var(--kp-blue); background: var(--kp-blue-light); box-shadow: inset 0 0 0 1px var(--kp-blue); }
.kp-choice:has(input:focus-visible) { box-shadow: var(--kp-focus-ring); }
.kp-choice input { appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--kp-ink-30); border-radius: 50%; background: var(--kp-white); cursor: pointer; }
.kp-choice input:checked { border: 6px solid var(--kp-blue); }
.kp-choice input:focus-visible { box-shadow: none; }
.kp-choice__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--kp-radius-sm); background: var(--kp-ink-05); color: var(--kp-ink-80); }
.kp-choice__title { margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--kp-ink); }
.kp-choice__desc { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
.kp-choice__price { font-size: 15px; line-height: 20px; font-weight: 800; color: var(--kp-ink); text-align: right; white-space: nowrap; }
.kp-choice__price small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--kp-ink-60); }
.kp-choice__price--free { color: var(--kp-success); }
.kp-choice__more { grid-column: 3 / -1; font-size: 13px; line-height: 18px; color: var(--kp-ink-80); }

/* ─── Champs de formulaire ─────────────────────────────── */
.kp-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.kp-field__label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--kp-ink); }
.kp-field__label small { font-weight: 500; color: var(--kp-ink-60); }
.kp-input { width: 100%; box-sizing: border-box; min-height: var(--kp-control-md); padding: 10px 12px; border: 1px solid var(--kp-ink-30); border-radius: var(--kp-radius-sm); background: var(--kp-white); font: 400 16px/22px var(--kp-font-sans); color: var(--kp-ink); transition: border-color .15s var(--kp-ease); }
.kp-input::placeholder { color: var(--kp-ink-40); }
.kp-input:hover { border-color: var(--kp-ink-60); }
.kp-input:focus-visible { border-color: var(--kp-blue); box-shadow: 0 0 0 3px var(--kp-blue-light); }
textarea.kp-input { min-height: 104px; resize: vertical; }
.kp-field__hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
.kp-field__error { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--kp-danger); }
.kp-field--error .kp-input { border-color: var(--kp-danger); box-shadow: inset 0 0 0 1px var(--kp-danger); }
.kp-field--valid .kp-input { border-color: var(--kp-success); }
.kp-form-grid { display: grid; gap: var(--kp-space-4); }
@media (min-width: 576px) {
  .kp-input { font-size: 15px; }
  .kp-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-form-grid .kp-field--full { grid-column: 1 / -1; }
}
.kp-alert { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 12px 14px; border-radius: var(--kp-radius-md); font-size: 14px; line-height: 20px; }
.kp-alert p { margin: 0; }
.kp-alert--danger { background: var(--kp-danger-light); color: var(--kp-danger); }
.kp-alert--danger p { color: var(--kp-ink-80); }
.kp-alert--success { background: var(--kp-success-light); color: var(--kp-success); }
.kp-alert--info { background: var(--kp-info-light); color: var(--kp-info); }
.kp-alert--info p, .kp-alert--success p { color: var(--kp-ink-80); }
.kp-alert strong { color: inherit; }

/* ─── Réassurance ──────────────────────────────────────── */
.kp-reassure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.kp-reassure__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; }
.kp-reassure__item .kp-i { color: var(--kp-ink); margin-top: 1px; }
.kp-reassure__title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--kp-ink); }
.kp-reassure__text { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
@media (min-width: 992px) { .kp-reassure { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.kp-reassure-band { background: var(--kp-white); border-bottom: 1px solid var(--kp-ink-10); }
.kp-reassure--band { padding: 20px var(--kp-space-4); background: var(--kp-white); border-top: 1px solid var(--kp-ink-10); border-bottom: 1px solid var(--kp-ink-10); }

/* ─── Pied de page ─────────────────────────────────────── */
.kp-footer { background: var(--kp-ink); color: var(--kp-ink-20); font-size: 14px; line-height: 22px; }
.kp-footer__grid { display: grid; gap: 32px; max-width: var(--kp-container); margin: 0 auto; padding: 48px var(--kp-space-4) 32px; }
.kp-footer__brand img { height: 30px; width: auto; }
.kp-footer__brand p { margin: 14px 0 0; max-width: 36ch; }
.kp-footer__title { margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--kp-white); }
.kp-footer__links { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kp-footer a { color: var(--kp-ink-20); text-decoration: none; }
.kp-footer a:hover { color: var(--kp-white); text-decoration: underline; text-underline-offset: 3px; }
.kp-footer__phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--kp-white); font-weight: 700; }
.kp-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; max-width: var(--kp-container); margin: 0 auto; padding: 18px var(--kp-space-4) 24px; border-top: 1px solid var(--kp-ink-80); font-size: 13px; }
.kp-footer__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-footer__pay span { padding: 2px 10px; border: 1px solid var(--kp-ink-60); border-radius: var(--kp-radius-xs); color: var(--kp-ink-20); font-size: 12px; line-height: 20px; font-weight: 600; }
@media (min-width: 768px) {
  .kp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 56px var(--kp-space-6) 40px; }
  .kp-footer__bottom { padding: 18px var(--kp-space-6) 24px; }
}

/* ─── Accroche éditoriale ─────────────────────────────── */
.kp-editorial { font-family: var(--kp-font-serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 38px; letter-spacing: 0; color: var(--kp-ink); text-wrap: balance; }
@media (min-width: 768px) { .kp-editorial { font-size: 44px; line-height: 48px; } }

/* ═══ Version 2 (2026-10-15) : composants validés sur les maquettes ═══ */

/* ─── Bandeau d'information : version mobile ────────────── */
.kp-topbar__item--short { display: none; }
@media (max-width: 767.98px) {
  .kp-topbar__inner { min-height: 36px; padding: 0 var(--kp-space-4); }
  .kp-topbar__group--aside, .kp-topbar__item--place { display: none; }
  .kp-topbar__item--short { display: inline-flex; }
}

/* ─── En-tête collant (desktop, après défilement) ───────── */
/* Le bandeau et la barre disparaissent, le bouton catalogue passe dans l'en-tête. */
.kp-header__cat { display: none; grid-area: cat; align-items: center; gap: 8px; min-height: var(--kp-control-md); padding: 0 16px; border: 0; border-radius: var(--kp-radius-sm); background: var(--kp-blue); color: var(--kp-white); font: 700 15px/20px var(--kp-font-sans); white-space: nowrap; text-decoration: none; cursor: pointer; }
.kp-header__cat:hover, .kp-header__cat[aria-expanded="true"] { background: var(--kp-blue-dark); color: var(--kp-white); }
@media (min-width: 992px) {
  .kp-header--stuck { box-shadow: var(--kp-shadow-md); }
  .kp-header--stuck .kp-header__row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "logo cat search actions"; padding: 10px var(--kp-space-6); gap: 16px; }
  .kp-header--stuck .kp-header__cat { display: inline-flex; }
  .kp-header--stuck .kp-header__logo img { height: 28px; }
  .kp-header--stuck .kp-search { height: var(--kp-control-md); }
  .kp-header--stuck .kp-hdr-action__meta { display: none; }
}

/* ─── Tiroir mobile ─────────────────────────────────────── */
/* Catalogue en accordéon (un rayon ouvert à la fois), puis les mêmes liens directs que la barre. */
.kp-drawer { display: flex; flex-direction: column; width: 100%; max-width: 390px; background: var(--kp-ink-02); }
.kp-drawer--fixed { position: fixed; inset: 0 auto 0 0; z-index: var(--kp-z-modal); width: min(100%, 390px); overflow-y: auto; box-shadow: var(--kp-shadow-lg); }
.kp-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 8px 0 16px; background: var(--kp-white); border-bottom: 1px solid var(--kp-ink-10); font-size: 17px; line-height: 24px; font-weight: 700; color: var(--kp-ink); }
.kp-drawer__label { margin: 0; padding: 20px 16px 8px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--kp-ink-60); }
.kp-drawer__group { border-top: 1px solid var(--kp-ink-05); }
.kp-drawer__row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0; background: var(--kp-white); color: var(--kp-ink); font: 600 15px/20px var(--kp-font-sans); text-align: left; cursor: pointer; box-shadow: inset 3px 0 0 transparent; }
.kp-drawer__row > span:not(.kp-drawer__thumb) { flex: 1; }
.kp-drawer__row[aria-expanded="true"] { background: var(--kp-blue-light); box-shadow: inset 3px 0 0 var(--kp-blue); font-weight: 800; }
.kp-drawer__thumb { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-sm); background: var(--kp-white); overflow: hidden; }
.kp-drawer__thumb img { width: 36px; height: 36px; object-fit: contain; }
.kp-drawer__subs { padding-bottom: 6px; background: var(--kp-ink-02); }
.kp-drawer__all, .kp-drawer__sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 70px; text-decoration: none; }
.kp-drawer__all { min-height: 48px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--kp-blue); }
.kp-drawer__sub { min-height: 44px; border-top: 1px solid var(--kp-ink-05); font-size: 14px; line-height: 20px; color: var(--kp-ink-80); }
.kp-drawer__sub:hover { background: var(--kp-white); color: var(--kp-ink); }
.kp-drawer__link { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; border-top: 1px solid var(--kp-ink-05); background: var(--kp-white); color: var(--kp-ink); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; }
.kp-drawer__link > span { flex: 1; }
.kp-drawer__link:hover { background: var(--kp-ink-02); }
.kp-drawer__meta { font-size: 13px; font-weight: 600; color: var(--kp-ink-60); }
.kp-drawer__foot { display: flex; gap: 8px; margin-top: auto; padding: 12px 16px 16px; background: var(--kp-white); border-top: 1px solid var(--kp-ink-10); }
.kp-drawer__foot .kp-btn--primary { flex: 1; }
.kp-drawer a:focus-visible, .kp-drawer button:focus-visible { box-shadow: inset 0 0 0 2px var(--kp-blue); }

/* ─── Réassurance : variante à pastilles (pied de page) ─── */
.kp-reassure--tiles .kp-reassure__item { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.kp-reassure--tiles .kp-reassure__item > .kp-i { display: none; }
.kp-reassure__tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--kp-radius-md); background: var(--kp-ink-05); color: var(--kp-ink); }
.kp-reassure--tiles { max-width: var(--kp-container); margin: 0 auto; padding: 32px var(--kp-space-4); }
.kp-reassure--tiles .kp-reassure__title { font-size: 15px; }

/* ─── Pied de page complet ──────────────────────────────── */
/* Bande d'engagements (kp-reassure--tiles), puis pied encre : marque, contact, trois colonnes, marques, paiement, mentions. */
.kp-footer__lead { max-width: 360px; }
.kp-footer__contact { display: grid; gap: 6px; margin-top: 18px; }
.kp-footer__contact .kp-footer__phone { margin-top: 0; font-size: 20px; line-height: 26px; min-height: 36px; }
.kp-footer__line { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: var(--kp-ink-20); }
.kp-footer__line .kp-i { margin-top: 2px; }
.kp-footer__todo { color: var(--kp-ink-20); }
.kp-footer__cta { margin-top: 20px; }
.kp-footer__group > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0; list-style: none; cursor: pointer; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--kp-white); }
.kp-footer__group > summary::-webkit-details-marker { display: none; }
.kp-footer__group[open] > summary .kp-i { transform: rotate(180deg); }
.kp-footer__group { border-top: 1px solid var(--kp-ink-80); }
.kp-footer__group .kp-footer__links { padding-bottom: 12px; }
.kp-footer__group .kp-footer__links a { display: flex; align-items: center; min-height: 44px; }
.kp-footer__brands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; max-width: var(--kp-container); margin: 0 auto; padding: 18px var(--kp-space-4); border-top: 1px solid var(--kp-ink-80); }
.kp-footer__brands strong { color: var(--kp-white); font-weight: 700; }
.kp-footer__brands a { display: inline-flex; align-items: center; min-height: 32px; }
.kp-footer__brands a:last-child { margin-left: auto; color: var(--kp-white); font-weight: 700; }
.kp-footer__pay { align-items: center; }
.kp-footer__pay > b { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--kp-ink-20); }
.kp-footer__pay span { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: var(--kp-radius-sm); color: var(--kp-white); font-size: 13px; line-height: 18px; }
.kp-footer__legal { max-width: var(--kp-container); margin: 0 auto; padding: 0 var(--kp-space-4) 32px; font-size: 12px; line-height: 18px; color: var(--kp-ink-20); }
.kp-footer__legal p { max-width: 980px; margin: 0; }
.kp-footer__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (min-width: 768px) {
  .kp-footer__grid--full { grid-template-columns: 1.5fr 1.1fr 1fr 1fr; gap: 48px; padding-top: 56px; }
  .kp-footer__brands, .kp-footer__legal { padding-left: var(--kp-space-6); padding-right: var(--kp-space-6); }
  .kp-footer__group { border-top: 0; }
  .kp-footer__group > summary { min-height: 0; margin: 0 0 12px; cursor: default; pointer-events: none; }
  .kp-footer__group > summary .kp-i { display: none; }
  .kp-footer__group .kp-footer__links a { min-height: 0; }
}

/* ─── Modale ────────────────────────────────────────────── */
.kp-modal-backdrop { position: fixed; inset: 0; z-index: var(--kp-z-modal); display: grid; place-items: center; padding: var(--kp-space-4); background: #0b0e1499; }
.kp-modal-backdrop--inline { position: static; padding: 40px; border-radius: var(--kp-radius-lg); background: var(--kp-ink); }
.kp-modal { width: min(100%, 560px); overflow: hidden; background: var(--kp-white); border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow-lg); }
.kp-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 12px 14px 20px; }
.kp-modal__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--kp-ink); }
.kp-modal__title--success { color: var(--kp-success); }
.kp-modal__close { display: grid; place-items: center; width: var(--kp-control-md); height: var(--kp-control-md); border: 0; border-radius: var(--kp-radius-sm); background: none; color: var(--kp-ink); cursor: pointer; }
.kp-modal__close:hover { background: var(--kp-ink-05); }
.kp-modal__body { padding: 14px 20px; border-top: 1px solid var(--kp-ink-10); }
.kp-modal__body .kp-cart-line { padding: 0; border-bottom: 0; }
.kp-modal__summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--kp-ink-02); border-top: 1px solid var(--kp-ink-10); font-size: 14px; line-height: 20px; color: var(--kp-ink-80); }
.kp-modal__summary strong { color: var(--kp-ink); }
.kp-modal__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 20px; }
.kp-modal__foot .kp-btn { flex: 1; }

/* ─── État vide ─────────────────────────────────────────── */
.kp-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 24px; text-align: center; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow-sm); }
.kp-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 50%; background: var(--kp-ink-05); color: var(--kp-ink-60); }
.kp-empty__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--kp-ink); }
.kp-empty__text { margin: 0; max-width: 420px; font-size: 15px; line-height: 22px; color: var(--kp-ink-60); }
.kp-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }

/* ─── Page d'erreur (404, 500) ──────────────────────────── */
.kp-errorpage { display: grid; gap: 28px; align-items: center; padding: 28px 0 32px; }
.kp-errorpage__code { margin: 0; font: 800 84px/80px var(--kp-font-sans); letter-spacing: -.05em; color: var(--kp-ink); }
.kp-errorpage__title { margin: 14px 0 0; font: 800 26px/30px var(--kp-font-sans); letter-spacing: -.025em; color: var(--kp-ink); }
.kp-errorpage__text { max-width: 560px; margin: 10px 0 0; font-size: 17px; line-height: 26px; color: var(--kp-ink-60); }
.kp-errorpage .kp-search { max-width: 560px; margin-top: 24px; }
.kp-errorpage__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.kp-errorpage__links { display: grid; gap: 10px; }
.kp-errorpage__links > p { margin: 0 0 2px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--kp-ink); }
@media (min-width: 992px) {
  .kp-errorpage { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; padding: 64px 0 48px; }
  .kp-errorpage__code { font-size: 120px; line-height: 112px; }
  .kp-errorpage__title { font-size: 34px; line-height: 40px; }
}
.kp-linkcard { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); box-shadow: var(--kp-shadow-sm); color: var(--kp-ink); text-decoration: none; }
.kp-linkcard:hover { border-color: var(--kp-ink-30); }
.kp-linkcard__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--kp-ink-05); }
.kp-linkcard b { display: block; font-size: 15px; line-height: 20px; }
.kp-linkcard span.kp-linkcard__text { display: block; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }

/* ─── Panneau, photo, repères communs ───────────────────── */
.kp-panel { background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); box-shadow: var(--kp-shadow-sm); }
.kp-photo { display: grid; place-items: center; background: var(--kp-white); border: 1px solid var(--kp-ink-10); overflow: hidden; }
.kp-photo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.kp-todo { display: inline-block; padding: 2px 8px; border: 1px dashed var(--kp-ink-30); border-radius: var(--kp-radius-xs); background: var(--kp-white); font: 500 12px/18px var(--kp-font-mono); color: var(--kp-ink-60); }
.kp-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 14px 0; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
.kp-crumb a { display: inline-flex; align-items: center; min-height: 24px; color: var(--kp-ink-60); text-decoration: none; }
.kp-crumb a:hover { color: var(--kp-ink); text-decoration: underline; text-underline-offset: 3px; }
.kp-crumb b { color: var(--kp-ink); font-weight: 700; }
.kp-crumb .kp-i { color: var(--kp-ink-30); }
.kp-link--action { display: inline-flex; align-items: center; gap: 6px; min-height: var(--kp-control-md); font-size: 15px; line-height: 20px; font-weight: 700; color: var(--kp-blue); text-decoration: none; }
.kp-link--action:hover { color: var(--kp-blue-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Puces de rayon, de marque, de filtre de liste */
.kp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-pill { display: inline-flex; align-items: center; gap: 8px; min-height: var(--kp-control-md); padding: 0 16px; border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-full); background: var(--kp-white); box-shadow: var(--kp-shadow-sm); color: var(--kp-ink); font: 600 14px/20px var(--kp-font-sans); text-decoration: none; cursor: pointer; }
.kp-pill span { font-weight: 500; color: var(--kp-ink-60); }
.kp-pill:hover { border-color: var(--kp-ink-30); background: var(--kp-ink-05); }
.kp-pill[aria-current="true"], .kp-pill[aria-pressed="true"] { border-color: var(--kp-blue); background: var(--kp-blue-light); color: var(--kp-blue-dark); }
.kp-pill[aria-current="true"] span, .kp-pill[aria-pressed="true"] span { color: var(--kp-blue-dark); }

/* Pagination */
.kp-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.kp-pagination a { display: grid; place-items: center; min-width: var(--kp-control-md); height: var(--kp-control-md); padding: 0 8px; border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-sm); background: var(--kp-white); color: var(--kp-ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.kp-pagination a:hover { border-color: var(--kp-ink-30); background: var(--kp-ink-05); }
.kp-pagination a[aria-current="page"] { border-color: var(--kp-blue); background: var(--kp-blue); color: var(--kp-white); }
.kp-pagination > span { padding: 0 4px; color: var(--kp-ink-40); }

/* Panneau latéral de facettes */
.kp-sidebar { padding: 4px 18px; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow-sm); }
.kp-sidebar .kp-facet:last-child { border-bottom: 0; }

/* ─── Carte produit v2 : photo haute, caractéristiques en pastilles ─── */
.kp-card { box-shadow: var(--kp-shadow-sm); }
.kp-card:hover { box-shadow: var(--kp-shadow-md); }
.kp-card__media { aspect-ratio: auto; height: 200px; padding: 14px; background: var(--kp-white); }
.kp-card__body { gap: 8px; padding: 14px 16px 16px; }
.kp-card__title { -webkit-line-clamp: 2; min-height: 42px; }
.kp-card__foot { flex-wrap: nowrap; }
.kp-card__acts { display: flex; align-items: center; gap: 8px; flex: none; }
.kp-card__acts .kp-btn { position: relative; z-index: 1; }
.kp-specs { display: flex; flex-wrap: wrap; gap: 4px 6px; min-height: 24px; margin: 0; padding: 0; list-style: none; }
.kp-specs li { padding: 2px 8px; border-radius: var(--kp-radius-xs); background: var(--kp-ink-05); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--kp-ink-80); }

/* Ligne de liste (vue liste) */
.kp-listrow { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) 170px 220px; gap: 20px; align-items: center; padding: 14px 20px 14px 14px; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); box-shadow: var(--kp-shadow-sm); }
.kp-listrow:hover { border-color: var(--kp-ink-20); box-shadow: var(--kp-shadow-md); }
.kp-listrow .kp-photo { width: 132px; height: 112px; padding: 8px; border-radius: var(--kp-radius-sm); }
.kp-listrow__title { margin: 2px 0 8px; font: 600 16px/22px var(--kp-font-sans); color: var(--kp-ink); }
.kp-listrow__title a { color: inherit; text-decoration: none; }
.kp-listrow__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kp-listrow__stock { padding-left: 20px; border-left: 1px solid var(--kp-ink-10); }
.kp-listrow__buy { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.kp-listrow__buy .kp-card__acts { position: relative; z-index: 1; }
.kp-listrow--out .kp-photo img { opacity: .55; }
@media (max-width: 991.98px) { .kp-listrow { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 12px; } .kp-listrow .kp-photo { width: 104px; height: 104px; } .kp-listrow__stock { padding-left: 0; border-left: 0; } .kp-listrow__stock, .kp-listrow__buy { grid-column: 1 / -1; } .kp-listrow__buy { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

/* ─── Carte de besoin ───────────────────────────────────── */
.kp-need { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); box-shadow: var(--kp-shadow-sm); color: var(--kp-ink); text-decoration: none; transition: border-color .15s var(--kp-ease), box-shadow .15s var(--kp-ease); }
.kp-need:hover { border-color: var(--kp-ink-30); box-shadow: var(--kp-shadow-md); }
.kp-need__media { height: 150px; padding: 14px; }
.kp-need__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px; }
.kp-need__title { margin: 0; font: 700 17px/22px var(--kp-font-sans); letter-spacing: -.01em; color: var(--kp-ink); }
.kp-need__text { margin: 0; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
.kp-need__go { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--kp-blue); }
.kp-need:hover .kp-need__go { color: var(--kp-blue-dark); }
.kp-need__count { font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }

/* ─── Tuile de sous-rayon et rayon à vignette ───────────── */
.kp-subtile { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; padding: 12px; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); box-shadow: var(--kp-shadow-sm); transition: border-color .15s var(--kp-ease), box-shadow .15s var(--kp-ease); }
.kp-subtile:hover { border-color: var(--kp-ink-30); box-shadow: var(--kp-shadow-md); }
.kp-subtile .kp-photo { height: 128px; padding: 10px; border-radius: var(--kp-radius-sm); }
.kp-subtile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 6px 4px 0; }
.kp-subtile__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 18px/24px var(--kp-font-sans); letter-spacing: -.01em; color: var(--kp-ink); text-decoration: none; }
.kp-subtile__title:hover { color: var(--kp-blue); }
.kp-subtile__count { font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
.kp-subtile__links { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: auto; }
.kp-subtile__links a { display: inline-flex; align-items: center; min-height: 28px; font-size: 13px; line-height: 18px; color: var(--kp-ink-80); text-decoration: none; }
.kp-subtile__links a:hover { color: var(--kp-blue); text-decoration: underline; text-underline-offset: 3px; }
.kp-ray { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 16px 10px 10px; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); color: var(--kp-ink); text-decoration: none; transition: border-color .15s var(--kp-ease), box-shadow .15s var(--kp-ease); }
.kp-ray:hover { border-color: var(--kp-ink-30); box-shadow: var(--kp-shadow-sm); }
.kp-ray .kp-photo { flex: none; width: 56px; height: 56px; padding: 4px; border-radius: var(--kp-radius-sm); }
.kp-ray b { display: block; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--kp-ink); }
.kp-ray span { display: block; font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }

/* ─── Bandeau devis (sombre) ────────────────────────────── */
.kp-band { display: grid; gap: 24px; align-items: center; padding: 24px; border-radius: var(--kp-radius-lg); background: var(--kp-ink); box-shadow: var(--kp-shadow-md); color: var(--kp-ink-20); }
.kp-band h2 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--kp-white); }
.kp-band p { margin: 0; font-size: 15px; line-height: 22px; color: var(--kp-ink-20); }
.kp-band__steps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--kp-ink-10); }
.kp-band__steps span { display: inline-flex; align-items: center; gap: 8px; }
.kp-band__steps .kp-i { color: var(--kp-white); }
.kp-band .kp-btn--secondary { border-color: var(--kp-white); }
@media (min-width: 992px) { .kp-band { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; padding: 32px 40px; } }

/* ─── Espace client ─────────────────────────────────────── */
.kp-account { display: grid; gap: 24px; align-items: start; }
@media (min-width: 992px) { .kp-account { grid-template-columns: 272px minmax(0, 1fr); gap: 32px; } }
.kp-account__side { position: sticky; top: 16px; overflow: hidden; }
.kp-account__user { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 20px; background: var(--kp-ink); color: var(--kp-ink-20); font-size: 13px; line-height: 18px; }
.kp-account__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--kp-white); color: var(--kp-ink); font-size: 17px; font-weight: 800; }
.kp-account__user strong { display: block; color: var(--kp-white); font-size: 15px; line-height: 20px; }
.kp-account__nav { display: grid; margin: 0; padding: 8px; list-style: none; }
.kp-account__nav a, .kp-account__nav button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: var(--kp-control-md); padding: 0 12px; border: 0; border-radius: var(--kp-radius-sm); background: none; color: var(--kp-ink-80); font: 600 15px/20px var(--kp-font-sans); text-align: left; text-decoration: none; cursor: pointer; }
.kp-account__nav a:hover, .kp-account__nav button:hover { background: var(--kp-ink-05); color: var(--kp-ink); }
.kp-account__nav [aria-current="page"] { background: var(--kp-blue-light); color: var(--kp-ink); box-shadow: inset 0 0 0 1px var(--kp-blue); }
.kp-account__count { min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--kp-ink); color: var(--kp-white); font-size: 12px; line-height: 22px; font-weight: 800; text-align: center; }
.kp-account__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.kp-account__tabs { display: flex; gap: 8px; padding: 0 var(--kp-space-4) 4px; overflow-x: auto; }
.kp-account__tabs .kp-pill { flex: none; box-shadow: none; }
@media (min-width: 992px) { .kp-account__tabs { display: none; } }
@media (max-width: 991.98px) { .kp-account__side { display: none; } }
.kp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 992px) { .kp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kp-stat { display: grid; gap: 6px; padding: 18px 20px; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: var(--kp-radius-md); box-shadow: var(--kp-shadow-sm); color: inherit; text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.kp-stat:hover { border-color: var(--kp-ink-30); }
.kp-stat__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--kp-ink-60); }
.kp-stat__value { font-size: 30px; line-height: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--kp-ink); }
.kp-stat__sub { font-size: 13px; line-height: 18px; color: var(--kp-ink-60); }
.kp-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.kp-table th { padding: 12px 16px; background: var(--kp-ink-05); text-align: left; font-size: 13px; font-weight: 700; color: var(--kp-ink-60); }
.kp-table td { padding: 16px; border-top: 1px solid var(--kp-ink-10); vertical-align: middle; color: var(--kp-ink-80); }
.kp-table td strong { color: var(--kp-ink); }
.kp-table .kp-table__num { text-align: right; white-space: nowrap; }
.kp-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.kp-timeline__item { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 13px; line-height: 18px; color: var(--kp-ink-40); }
.kp-timeline__item::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--kp-ink-10); }
.kp-timeline__item:first-child::before { display: none; }
.kp-timeline__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--kp-ink-20); border-radius: 50%; background: var(--kp-white); color: var(--kp-ink-40); font-size: 13px; font-weight: 800; }
.kp-timeline__item small { display: block; font-weight: 500; color: var(--kp-ink-60); }
.kp-timeline__item--done, .kp-timeline__item--current { color: var(--kp-ink-80); }
.kp-timeline__item--done::before, .kp-timeline__item--current::before { background: var(--kp-success); }
.kp-timeline__item--done .kp-timeline__dot { border-color: var(--kp-success); background: var(--kp-success); color: var(--kp-white); }
.kp-timeline__item--current { color: var(--kp-ink); font-weight: 800; }
.kp-timeline__item--current .kp-timeline__dot { border-color: var(--kp-ink); background: var(--kp-ink); color: var(--kp-white); }

/* ─── Champs et cases désactivés ────────────────────────── */
.kp-input:disabled, .kp-input[readonly], .kp-input[aria-disabled="true"] { border-color: var(--kp-ink-20); background: var(--kp-ink-05); color: var(--kp-ink-60); }
.kp-input:disabled, .kp-input[aria-disabled="true"] { cursor: not-allowed; }
.kp-input:disabled:hover { border-color: var(--kp-ink-20); }
.kp-field--disabled .kp-field__label { color: var(--kp-ink-60); }
.kp-select select:disabled { border-color: var(--kp-ink-20); background: var(--kp-ink-05); color: var(--kp-ink-60); cursor: not-allowed; }
.kp-check:has(input:disabled) { color: var(--kp-ink-60); cursor: not-allowed; }
.kp-check input:disabled { border-color: var(--kp-ink-20); background: var(--kp-ink-05); cursor: not-allowed; }
.kp-check input:disabled:checked { border-color: var(--kp-ink-30); background: var(--kp-ink-30); }
@media (max-width: 767.98px) {
  .kp-footer__grid--full { gap: 0; padding-bottom: 8px; }
  .kp-footer__brand { margin-bottom: 24px; }
  .kp-footer__brands a { min-height: 44px; }
  .kp-footer__brands a:last-child { margin-left: 0; }
}

.kp-choice:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.kp-choice:has(input:disabled):hover { border-color: var(--kp-ink-30); }
.kp-choice input:disabled { cursor: not-allowed; }
.kp-footer .kp-btn--primary, .kp-footer .kp-btn--primary:hover { color: var(--kp-white); text-decoration: none; }
@media (min-width: 768px) { .kp-reassure--tiles { padding: 32px var(--kp-space-6); } }
@media (max-width: 575.98px) {
  .kp-header__search .kp-search__icon { display: none; }
  .kp-header__search .kp-search input { padding-left: 14px; }
}

/* ─── Titres (styles de texte des tokens) ───────────────── */
.kp-display { margin: 0; font: 800 30px/34px var(--kp-font-sans); letter-spacing: -.04em; color: var(--kp-ink); }
.kp-h1 { margin: 0; font: 800 24px/30px var(--kp-font-sans); letter-spacing: -.03em; color: var(--kp-ink); }
.kp-h2 { margin: 0; font: 800 22px/28px var(--kp-font-sans); letter-spacing: -.02em; color: var(--kp-ink); }
.kp-h3 { margin: 0; font: 700 17px/24px var(--kp-font-sans); color: var(--kp-ink); }
.kp-lead { margin: 0; font-size: 15px; line-height: 22px; color: var(--kp-ink-60); }
@media (min-width: 768px) {
  .kp-display { font-size: 40px; line-height: 44px; }
  .kp-h1 { font-size: 28px; line-height: 34px; }
}

/* ─── Styles de texte du thème (absents du bundle v7) ─────── */
.kp-product-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--kp-ink); }
.kp-body-lg { font-size: 16px; line-height: 26px; font-weight: 400; }
.kp-body { font-size: 15px; line-height: 22px; font-weight: 400; }
.kp-body-sm { font-size: 13px; line-height: 18px; font-weight: 500; }
.kp-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--kp-ink); }
@media (min-width: 768px) { .kp-product-title { font-size: 24px; line-height: 30px; } }