/* =====================================================================
   Kuerkod · MODULE PANIER COMMUN — habillage (panier.css)
   Compagnon de commun/panier.js. Tokens hérités de ../styles.css (:root),
   avec repli littéral pour les pages qui ne chargeraient que ce fichier.
   Monochrome bleu strict : --brand et la rampe --ku-blue-*. Or = jamais ici.
   DA reprise du drawer de /configurer/ (config.css) : même fond surface,
   même bordure, mêmes rayons pilule, même élévation, mêmes durées.
   Mobile-first, iOS-safe : aucune 100vw, safe-areas, saisie à 16 px.
   ===================================================================== */

/* Le sprite d'icônes est injecté par le JS : hors flux, hors lecture. */
.kkp-sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.kkp-overlay,
.kkp-drawer,
.kkp-toast,
.kkp-fab {
  box-sizing: border-box;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Arial, sans-serif);
}
.kkp-overlay *, .kkp-overlay *::before, .kkp-overlay *::after,
.kkp-drawer *, .kkp-drawer *::before, .kkp-drawer *::after,
.kkp-toast *, .kkp-fab *, .kkp-fab *::before, .kkp-fab *::after { box-sizing: border-box; }
/* [hidden] doit l'emporter sur les display:flex/grid du module. */
.kkp-drawer [hidden], .kkp-line [hidden] { display: none !important; }

.kkp-overlay :focus-visible,
.kkp-drawer :focus-visible,
.kkp-fab:focus-visible {
  outline: 3px solid var(--focus-ring, #2C4BFF);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------
   Overlay
   --------------------------------------------------------------------- */
.kkp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 12, 30, .48);
  opacity: 0;
  transition: opacity .3s var(--curve-decel, cubic-bezier(0, 0, 0, 1));
}
.kkp-overlay.is-open { opacity: 1; }

/* ---------------------------------------------------------------------
   Drawer
   --------------------------------------------------------------------- */
.kkp-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 10001;
  width: min(408px, 92%);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  color: var(--text, #0E1845);
  /* Tiroir fermé : AUCUNE ombre. Sorti du viewport par translateX(100%), son
     ombre débordait de ~39 px sur le bord droit de la page — une bande plus
     sombre en permanence, sur toutes les pages qui chargent cette feuille.
     L'ombre n'apparaît donc qu'à l'ouverture, en même temps que le tiroir. */
  box-shadow: none;
  transform: translateX(100%);
  transition: transform .3s var(--curve-decel, cubic-bezier(0, 0, 0, 1));
  padding-top: env(safe-area-inset-top, 0px);
}
.kkp-drawer.is-open {
  transform: none;
  box-shadow: var(--el-64, 0 32px 64px rgba(15, 23, 43, .22), 0 0 8px rgba(15, 23, 43, .16));
}

.kkp-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #E2E7F2);
}
.kkp-drawer__title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--text, #0E1845);
}
.kkp-drawer__title .kkp-hex { width: 13px; height: 13px; fill: var(--brand, #2C4BFF); vertical-align: -1px; margin-right: 7px; }
.kkp-drawer__close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill, 999px);
  background: none; border: 0;
  color: var(--text-soft, #3D4A66);
  cursor: pointer;
}
.kkp-drawer__close:hover { background: var(--surface-sunken, #F6F8FC); color: var(--text, #0E1845); }
.kkp-drawer__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.kkp-drawer__items {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 20px 16px;
}
.kkp-empty {
  margin: 44px 0 0;
  color: var(--text-muted, #5A6684);
  font-size: 15px;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Ligne de panier — photo produit + configuration + quantité + total
   --------------------------------------------------------------------- */
.kkp-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border, #E2E7F2);
}
/* Photo fusionnée au fond studio (#F1F5FB exact) : cadre dessiné, jamais de
   dégradé. Le cadre suit le portrait 2:3 des photos produit — un carré
   laisserait la carte minuscule au milieu de deux marges. */
.kkp-line__fig {
  flex: 0 0 auto;
  width: 58px; height: 82px;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--border, #E2E7F2);
  background: #F1F5FB;
  overflow: hidden;
}
.kkp-line__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
.kkp-line__body { flex: 1 1 auto; min-width: 0; }
.kkp-line__top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.kkp-line__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text, #0E1845);
}
/* Cible tactile pleine (44 px) débordée en marges négatives : le rond visible
   reste discret, le doigt attrape la zone entière. */
.kkp-line__rm {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin: -11px -12px -11px 0;
  display: grid; place-items: center;
  border-radius: var(--r-pill, 999px);
  background: none; border: 0;
  color: var(--text-muted, #5A6684);
  cursor: pointer;
}
.kkp-line__rm:hover { background: var(--surface-sunken, #F6F8FC); color: var(--brand-active, #1A2FA6); }
.kkp-line__rm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.kkp-line__pu {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--text-soft, #3D4A66);
  font-variant-numeric: tabular-nums;
}
.kkp-line__was {
  color: var(--text-muted, #5A6684);
  text-decoration: line-through;
  margin-right: 6px;
}
.kkp-line__now { font-weight: 700; color: var(--text, #0E1845); }
.kkp-line__off {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill, 999px);
  background: var(--brand-soft, #EAF1FF);
  color: var(--brand-active, #1A2FA6);
  font-size: 11.5px;
  font-weight: 800;
}
.kkp-line__logo {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted, #5A6684);
}

.kkp-line__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.kkp-line__tot {
  font-size: 15px;
  font-weight: 800;
  color: var(--text, #0E1845);
  font-variant-numeric: tabular-nums;
}

/* Stepper : cibles tactiles 44 px, saisie 16 px (pas de zoom iOS). */
.kkp-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong, #CBD3E6);
  border-radius: var(--r-pill, 999px);
  background: var(--surface, #fff);
  overflow: hidden;
}
.kkp-step__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0;
  color: var(--text, #0E1845);
  cursor: pointer;
  transition: background .15s var(--curve-decel, cubic-bezier(0, 0, 0, 1));
}
.kkp-step__btn:hover:not(:disabled) { background: var(--brand-soft, #EAF1FF); color: var(--brand-active, #1A2FA6); }
.kkp-step__btn:disabled { color: var(--ku-ink-300, #A6B1CE); cursor: default; }
.kkp-step__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.kkp-step__val {
  width: 46px; height: 44px;
  padding: 0 2px;
  border: 0;
  border-left: 1px solid var(--border, #E2E7F2);
  border-right: 1px solid var(--border, #E2E7F2);
  background: none;
  color: var(--text, #0E1845);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.kkp-step__val::-webkit-outer-spin-button,
.kkp-step__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kkp-step__val:focus { outline-offset: -3px; }

/* ---------------------------------------------------------------------
   Pied : total, CTA commande, passerelle configurateur
   --------------------------------------------------------------------- */
.kkp-drawer__foot {
  flex: 0 0 auto;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border, #E2E7F2);
  background: var(--surface, #fff);
}
.kkp-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #0E1845);
}
.kkp-sum__val { font-variant-numeric: tabular-nums; }
.kkp-sum__ht {
  margin: 3px 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted, #5A6684);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kkp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  background: var(--brand, #2C4BFF);
  color: var(--on-brand, #fff);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  box-shadow: var(--el-brand-8, 0 4px 8px rgba(44, 75, 255, .24), 0 0 2px rgba(44, 75, 255, .16));
  transition: background .2s var(--curve-decel, cubic-bezier(0, 0, 0, 1));
}
.kkp-cta:hover { background: var(--brand-hover, #1E38DB); color: var(--on-brand, #fff); }
.kkp-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Pas de href = panier vide : le lien est inerte, il doit le montrer. */
.kkp-cta:not([href]) { background: var(--surface-sunken, #F6F8FC); color: var(--text-muted, #5A6684); box-shadow: none; cursor: default; }
.kkp-cta:not([href]):hover { background: var(--surface-sunken, #F6F8FC); color: var(--text-muted, #5A6684); }

.kkp-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 4px;
  color: var(--brand, #2C4BFF);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.kkp-more:hover { color: var(--brand-hover, #1E38DB); text-decoration: underline; }
.kkp-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kkp-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #5A6684);
  text-align: center;
}

/* ---------------------------------------------------------------------
   Toast d'ajout
   --------------------------------------------------------------------- */
.kkp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10002;
  transform: translate(-50%, 12px);
  /* Sans width, un élément fixe posé à left:50% ne dispose que de la moitié
     droite du viewport : la phrase se cassait en deux sur 390. */
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  text-align: center;
  background: var(--surface-dark, #0E1845);
  color: var(--text-on-dark, #D7E3FF);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-pill, 999px);
  box-shadow: var(--el-28, 0 14px 28px rgba(15, 23, 43, .20), 0 0 8px rgba(15, 23, 43, .14));
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--curve-decel, cubic-bezier(0, 0, 0, 1)), transform .3s var(--curve-decel, cubic-bezier(0, 0, 0, 1));
}
.kkp-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   Bouton flottant optionnel (init({ floating: true }))
   --------------------------------------------------------------------- */
.kkp-fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 9500;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-dark, #0E1845);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 43, .3);
  transition: transform .3s var(--curve-decel, cubic-bezier(0, 0, 0, 1)), box-shadow .3s var(--curve-decel, cubic-bezier(0, 0, 0, 1));
}
.kkp-fab:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(15, 23, 43, .4); }
.kkp-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kkp-fab__n {
  position: absolute;
  top: -4px; left: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--r-pill, 999px);
  background: var(--brand, #2C4BFF);
  color: var(--on-brand, #fff);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* ---------------------------------------------------------------------
   Écrans étroits
   --------------------------------------------------------------------- */
@media (max-width: 400px) {
  .kkp-drawer__items { padding-left: 16px; padding-right: 16px; }
  .kkp-drawer__head, .kkp-drawer__foot { padding-left: 16px; padding-right: 16px; }
  .kkp-line__fig { width: 52px; height: 74px; }
  .kkp-step__val { width: 40px; }
}

/* ---------------------------------------------------------------------
   Mouvement réduit : tout arrive à l'état final, rien ne bouge.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kkp-overlay,
  .kkp-drawer,
  .kkp-toast,
  .kkp-fab,
  .kkp-cta,
  .kkp-step__btn { transition: none; }
  .kkp-fab:hover { transform: none; }
}