/* ═══════════════════════════════════════════════════════════════
   KOMERCE — components.css (2026-06-14)
   Généré par deploy-css.js — éditer les sources CSS.
   ═══════════════════════════════════════════════════════════════ */
/* ── categories.css ──────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — categories.css
   Chips catégories + sous-catégories + promo rail.
   Mobile-first, zéro !important.
   ═══════════════════════════════════════════════════════════════ */

/* ── CHIPS SHELL + FADES ─────────────────────────────────────── */
.k-cats-shell { position: relative; }
.k-cats-wrap-fade-left,
.k-cats-wrap-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 2;
}
.k-cats-wrap-fade-left  { left: 0;  background: linear-gradient(to right, var(--sand-warm) 35%, transparent); }
.k-cats-wrap-fade-right { right: 0; background: linear-gradient(to left,  var(--sand-warm) 35%, transparent); }

/* ── CHIPS RAIL ─────────────────────────────────────────────── */
.k-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 12px;
  scrollbar-width: none;
  padding: 8px 4px;
  align-items: stretch;
  overscroll-behavior-x: contain;
  background: transparent;
}
.k-cats::-webkit-scrollbar { display: none; }
.k-cats::before,
.k-cats::after { content: ""; flex: 0 0 12px; }

/* ── CHIP (mobile-first : legacy horizontal rail fallback) ───── */
.k-chip {
  flex: 0 0 38px;
  min-width: 38px;
  max-width: 38px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, opacity .18s ease;
  scroll-snap-align: start;
  overflow: hidden;
}
.k-chip:active { transform: scale(.95); }

/* Mobile target state — compact 2×4 pill grid, image left + label right. */
.k-cats-shell {
  margin-top: 0;
  border-radius: 20px;
  /* POLISH — fond lumineux cohérent avec hero, séparé visuellement */
  background: var(--sand-bright);
  border: 1px solid rgba(198,168,93,.13);
  box-shadow:
    0 6px 18px rgba(198,168,93,.09),
    0 1px 0 rgba(198,168,93,.07);
  overflow: hidden;
}

.k-cats-wrap-fade-left,
.k-cats-wrap-fade-right {
  display: none;
}

.k-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px 6px;
  padding: 6px 9px 6px;
  overflow: visible;
  scroll-snap-type: none;
  scroll-padding-left: 0;
  align-items: stretch;
}

.k-cats::before,
.k-cats::after {
  display: none;
}

.k-chip {
  min-width: 0;
  max-width: none;
  width: 100%;
  flex: none;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 5px;
  min-height: 36px;
  padding: 3px 5px 3px 3px;
  border-radius: 999px;
  /* POLISH — fond plus opaque, lecture des images améliorée */
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(198, 168, 93, .14);
  box-shadow: 0 1px 4px rgba(28, 26, 23, .048);
  overflow: hidden;
  text-align: left;
  scroll-snap-align: none;
}

/* Photo circle */
.k-chip-photo {
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: 0 auto;
  border-radius: 11px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--overlay-black-xs);
  background: var(--sand-dark);
  box-shadow: var(--elev-1);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-chip-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.k-chip-photo > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 8px;
  font-weight: 800;
  color: var(--white);
}
.k-chip[data-cat="all"] .k-chip-photo > span { font-size: 9px; }
.k-chip-photo svg { width: 15px; height: 15px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.k-chip-photo {
  width: 26px;
  height: 26px;
  min-width: 26px;
  margin: 0;
  border-radius: 10px;
  border-width: 1px;
  /* POLISH — bord interne lumineux pour soulever l'image du fond */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58);
}

.k-chip-photo img {
  border-radius: 9px;
  /* POLISH — saturation + micro-contraste pour lisibilité à petite taille */
  filter: saturate(1.22) contrast(1.05);
}

/* Fond par catégorie */
/* POLISH — fonds enrichis par catégorie */
.k-chip[data-cat="all"]         .k-chip-photo { background: linear-gradient(135deg, var(--ocean-dark) 30%, var(--ocean) 100%); }
.k-chip[data-cat="Soldes"]      .k-chip-photo { background: var(--cat-soldes-bg); }
.k-chip[data-cat="Mode"]        .k-chip-photo { background: var(--cat-mode-bg); }
.k-chip[data-cat="Beauté"]      .k-chip-photo { background: var(--cat-beaute-bg); }
.k-chip[data-cat="Tech"]        .k-chip-photo { background: var(--cat-tech-bg); }
.k-chip[data-cat="Enfant"]      .k-chip-photo { background: var(--red-bg); }
.k-chip[data-cat="Maison"]      .k-chip-photo { background: var(--cat-maison-bg); }
.k-chip[data-cat="Sport"]       .k-chip-photo { background: var(--cat-auto-bg); }
.k-chip[data-cat="Sur-mesure"]  .k-chip-photo { background: var(--cat-perso-bg); }
/* Nouvelles catégories — background mobile (sinon héritent du style desktop transparent) */
.k-chip[data-cat="Solaire"]                  .k-chip-photo { background: var(--cat-solaire-bg); }
.k-chip[data-cat="Creatio"]                  .k-chip-photo { background: var(--cat-creatio-bg); }
/* Architecture v2 — piliers Bricolage et Auto */
.k-chip[data-cat="Bricolage"]                .k-chip-photo { background: var(--cat-brico-bg); }
.k-chip[data-cat="Auto"]                     .k-chip-photo { background: var(--cat-auto-bg); }
.k-chip[data-cat="Créations personnelles"]   .k-chip-photo { background: var(--cat-perso-bg); }

/* Emoji variant */
.k-chip-emoji {
  font-size: 22px;
  line-height: 1;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sand-dark);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}

/* Label */
.k-chip-label {
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.1;
  width: 100%;
  max-width: 42px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

.k-chip-label {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  font-size: 10.8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  /* POLISH — texte quasi-plein pour contraste sur fond blanc */
  color: var(--text);
  text-align: left;
}

/* État actif mobile */
.k-chip.active .k-chip-photo {
  border-color: var(--ocean-dark);
  box-shadow: 0 0 0 2.5px var(--ocean-dark), var(--elev-2);
  transform: scale(1.05);
}
.k-chip.active[data-cat="all"] .k-chip-photo  { background: var(--ocean-dark); }
.k-chip.active[data-cat="all"] .k-chip-photo > span { color: var(--white); }
.k-chip.active .k-chip-photo svg { stroke: var(--white); }
.k-chip.active .k-chip-emoji { background: var(--ocean-dark); border-color: var(--ocean-dark); color: var(--white); }
.k-chip.active .k-chip-label { color: var(--white); font-weight: 800; }

.k-chip.active {
  background: var(--ocean-dark);
  border-color: var(--ocean-dark);
  box-shadow: 0 2px 8px rgba(74, 144, 64, .30);
}

.k-chip.active .k-chip-photo {
  border-color: var(--ocean-dark);
  box-shadow: 0 0 0 1.25px rgba(74, 144, 64, .50);
  transform: none;
}

.k-chip.active .k-chip-label {
  color: var(--white);
}

/* Sentinel spacer */
#k-bar-sentinel { height: 0; margin: 0; padding: 0; }
#k-bar-spacer   { display: none; }

/* ── SOUS-CATÉGORIES ──────────────────────────────────────────
   Owner : boutique-desktop.css (bloc SOUS-CATEGORIES DESKTOP)
   Le rail #k-subcats-wrap est masqué par défaut et révélé en desktop.
   Tout le visuel (rail, subchip, couleurs par catégorie, animations)
   vit dans boutique-desktop.css depuis le Lot I2-A.
   ──────────────────────────────────────────────────────────── */

/* Section subcats (dans chaque section catalogue) */
.k-cat-section  { margin-bottom: 4px; }

/* Padding interne des sections dans le pager mobile */
.k-cat-section { padding: 0 12px; }
.k-sec-grid    { padding: 4px 0 12px; }
.k-sec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0 8px;
  border-bottom: 2px solid var(--coral); /* mobile → écrasé desktop par products.css (var(--sand-dark)) */
  margin-bottom: 4px;
  position: relative;
  scroll-margin-top: 70px;
}
.k-sec-header-emoji { font-size: 18px; line-height: 1; flex-shrink: 0; }
.k-sec-header-name  { font-size: 16px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; }
.k-sec-header-count {
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  padding: 2px 8px; background: var(--overlay-black-xs); border-radius: 20px;
  flex-shrink: 0; white-space: nowrap;
}
.k-sec-see-all {
  flex-shrink: 0;
  background: none; border: none;
  color: var(--ocean); font-size: 12px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.k-sec-see-all:active { background: rgba(67,160,71,.1); }

.k-sec-subcats { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 8px; }
.k-sec-subchip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--sand-dark); background: var(--white);
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.k-sec-subchip.active {
  background: var(--coral); color: var(--white); border-color: var(--coral);
}

/* ── PROMO RAIL ──────────────────────────────────────────────── */
/* FIX ghost-droite : le rail utilise une animation CSS translateX (pas de scroll natif).
   overflow:hidden contient le k-promo-rail-inner (width:max-content × 2) dans le viewport.
   scroll-snap et overflow-x:auto retirés — ils exposaient la largeur totale du inner. */
.k-promo-rail {
  display: flex;
  gap: 10px;
  overflow: hidden;
  padding-bottom: 4px;
  position: relative;
  isolation: isolate;
}
.k-promo-rail::before,
.k-promo-rail::after {
  content: '';
  position: absolute; top: 0; bottom: 4px;
  width: 18px; z-index: 3; pointer-events: none;
}
.k-promo-rail::before { left: 0;  background: linear-gradient(to right, var(--sand) 40%, transparent); }
.k-promo-rail::after  { right: 0; background: linear-gradient(to left,  var(--sand) 40%, transparent); }

.k-promo-rail-inner {
  display: flex; gap: 8px;
  width: max-content;
  animation: promo-scroll 40s linear infinite;
}
.k-promo-rail-inner:hover,
.k-promo-rail-inner:active { animation-play-state: paused; }
@keyframes promo-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.k-promo-card {
  flex: 0 0 110px;
  scroll-snap-align: start;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform .2s;
  position: relative;
  min-width: 0;
}
.k-promo-card:active { transform: scale(.97); }
.k-promo-card-img {
  width: 100%; height: 100px;
  border-radius: 4px;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.20)) drop-shadow(0 1px 3px rgba(0,0,0,.10));
  animation: promo-float 3.2s var(--ease-in) infinite;
}
@keyframes promo-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
.k-promo-card:nth-child(2) .k-promo-card-img { animation-delay: .5s; }
.k-promo-card:nth-child(3) .k-promo-card-img { animation-delay: 1s; }
.k-promo-card:nth-child(4) .k-promo-card-img { animation-delay: 1.5s; }
.k-promo-card:nth-child(5) .k-promo-card-img { animation-delay: 2s; }
.k-promo-card:nth-child(6) .k-promo-card-img { animation-delay: 2.5s; }

.k-promo-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: var(--coral); color: var(--white);
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 50px;
  box-shadow: 0 1px 4px var(--overlay-black-md);
}
.k-promo-card-info { padding: 4px 2px 0; background: none; min-width: 0; }
.k-promo-card-name {
  font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.k-promo-card-price  { font-size: 12px; font-weight: 700; color: var(--coral); margin-top: 2px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-promo-card-old    { font-size: 10px; color: var(--text-light); text-decoration: line-through; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Section soldes masquée si vide */
#k-promos-section[data-empty="1"] { display: none; }

/* ── ESPACEMENT PROMOS / CATALOGUE ──────────────────────────── */
#k-promos-section {
  margin-bottom: 4px;
}
#k-catalog-section {
  padding-top: 0;
}

/* #k-subcats-wrap, .k-subchip, .k-subcats-rail, @keyframes : tout est désormais
   dans boutique-desktop.css (bloc SOUS-CATEGORIES DESKTOP, Lot I2-A) */
/* [supprimé] ancien bloc k-chip grille desktop — remplacé par le bloc pill L518 */
/* [supprimé] k-chip-photo grille + k-sec-grid 1200px → voir products.css */
@media (hover: hover) and (pointer: fine) {
  .k-chip:hover .k-chip-photo { transform: scale(1.06); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
  .k-sec-see-all:hover { background: rgba(67,160,71,.08); }
}


/* ── PROMO RAIL WRAPPERS — déplacés depuis interactions.css ───── */
.k-promo-rail-wrap   { position: relative; overflow: hidden; }
.k-promo-rail-more   {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 80px; height: 100px;
  border: 1.5px dashed var(--border); border-radius: var(--radius);
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: border-color .2s var(--ease), color .2s;
}
.k-promo-rail-more:hover  { border-color: var(--coral); color: var(--coral); }
.k-promo-card-prices { display: flex; flex-direction: column; gap: 1px; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP PREMIUM — catégories
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* .k-cats, .k-chip, .k-chip-photo, .k-chip-label → source de vérité : boutique-desktop.css (bloc CARTES VISUELLES) */
  /* .k-subcats-rail desktop max-width → boutique-desktop.css (bloc SOUS-CATEGORIES DESKTOP, Lot I2-A) */

}

@media (min-width: 1200px) {
  /* .k-cats-shell top → géré par var(--header-h) à 1200px via tokens.css */
}

/* Desktop — fades latéraux inutiles en mode wrap */
@media (min-width: 900px) {
  .k-cats-wrap-fade-left, .k-cats-wrap-fade-right { display: none; }
}

/* ── MOBILE POLISH — entrée catalogue sous rail catégories ───── */
.k-sec-header {
  padding: 10px 0 6px;
  margin-bottom: 2px;
  border-bottom: 1.5px solid rgba(200, 92, 45, .72);
}

.k-sec-header-emoji {
  font-size: 17px;
}

.k-sec-header-name {
  font-size: 15.5px;
  letter-spacing: -.02em;
}

.k-sec-header-count {
  font-size: 11.5px;
  padding: 1px 8px;
  background: rgba(31, 48, 36, .045);
}

.k-sec-grid {
  padding-top: 2px;
}


/* ══════════════════════════════════════════════════════════════
   MOBILE PILL RAIL — max-width: 767px  (v4 — icône + label compact)
   Chips icône ronde 44px + label 11px en dessous.
   Hero prend sa place, chips discrètes, cartes s'annoncent en bas.
   MOBILE ONLY — aucun impact desktop (desktop = min-width: 900px).
   Rollback : supprimer ce bloc entier.
   ══════════════════════════════════════════════════════════════ */

/* ── Shell : fond transparent, séparation légère ── */
.k-cats-shell {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin: 4px 0 0;
  padding: 0 0 2px;
  overflow: visible;
  border-bottom: 1px solid rgba(198, 168, 93, .14);
}

/* ── Rail horizontal scrollable ── */
.k-cats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scrollbar-width: none;
  gap: 14px;
  padding: 9px 16px 9px;
  align-items: center;
  grid-template-columns: none;
}
.k-cats::-webkit-scrollbar { display: none; }

.k-cats::before,
.k-cats::after {
  display: block;
  content: "";
  flex: 0 0 2px;
}

/* ── Chip : colonne icône + label ── */
.k-chip {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: auto;
  min-width: auto;
  max-width: none;
  height: auto;
  min-height: auto;
  padding: 7px 8px 8px;
  border-radius: 14px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  scroll-snap-align: start;
  grid-template-columns: none;
  transition: transform .16s ease, opacity .16s ease;
}
.k-chip:active { transform: scale(.93); }

/* ── Image ronde 42px — sweet spot lisibilité/compacité ── */
.k-chip-photo {
  display: none;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  margin: 0;
  border: 2px solid transparent;
  box-shadow:
    0 1px 4px rgba(28, 26, 23, .10),
    inset 0 0 0 1px rgba(255, 255, 255, .50);
  flex-shrink: 0;
  flex: 0 0 auto;
}
.k-chip-photo img {
  border-radius: 50%;
  filter: saturate(1.18) contrast(1.04);
}

/* ── Label sous l'icône ── */
.k-chip-label {
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 82px;
  width: auto;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* ── État actif ── */
.k-chip.active {
  background: var(--ocean-dark);
  border-color: var(--ocean-dark);
  box-shadow: 0 2px 8px rgba(74, 144, 64, .30);
}
.k-chip.active .k-chip-label {
  color: var(--white);
  font-weight: 700;
}

/* Fades latéraux inutiles */
.k-cats-wrap-fade-left,
.k-cats-wrap-fade-right {
  display: none;
}

/* ── Titre section + grille : rapprocher sous le rail ── */
.k-sec-header {
  padding-top: 8px;
  padding-bottom: 5px;
  margin-bottom: 2px;
}
.k-cat-section {
  margin-bottom: 2px;
}
/* ── FIN MOBILE PILL RAIL ──────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   CHIPS DESKTOP — migré depuis boutique-desktop.css
   Sprint 4 — S4.2 : owner unique = categories.css
   ══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   CATÉGORIES DESKTOP — CARTES VISUELLES (source de vérité unique)
   PALETTE-FIX-01 : ombres chip hover ocean, barre sticky ocean.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* Sticky wrapper */
  .k-hero-cats-sticky {
    position: sticky;
    top: 68px;
    z-index: 180;
    margin-top: 0;
    background: rgba(248, 246, 241, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 0 0 20px 20px;
    /* PALETTE-FIX-01 : ocean au lieu de rgba(31,48,36,…) */
    box-shadow:
      0 8px 32px rgba(100,175,90,.10),
      0 1px 0 rgba(198,168,93,.12);
    padding-bottom: 8px;
  }

  /* ── Lot 2 / :has() — raccord sticky↔sous-cats ──────────────────
     Quand #k-subcats-wrap est peuplé par le JS, la barre sticky
     perd son rayon bas et son padding-bottom : les sous-cats
     viennent se coller directement sous les cartes catégories.
     CSS-only, aucun JS nécessaire.
     ──────────────────────────────────────────────────────────────── */
  .k-hero-cats-sticky:has(#k-subcats-wrap:not(:empty)) {
    border-radius: 0;
    padding-bottom: 0;
    box-shadow:
      0 2px 0 rgba(198,168,93,.10);
  }

  .k-cats-shell {
    position: relative;
    top: auto;
    z-index: 120;
    max-width: 1480px;
    margin: 8px auto 0;
    padding: 0 20px;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
  }

  .k-cats {
    display: grid;
    /* auto-fit : autant de colonnes que la largeur permet (≥120px chacune).
       Remplace l'ancien repeat(8) + le palier magique @900-1180px qui forçait
       4 colonnes quand 8×92px ne tenaient pas. auto-fit fait ça nativement,
       sans breakpoint intermédiaire. Voir check-breakpoints (900/1200 only). */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    align-items: stretch;
    scroll-snap-type: none;
  }

  .k-cats::before,
  .k-cats::after,
  .k-cats-wrap-fade-left,
  .k-cats-wrap-fade-right {
    display: none;
  }

  /* ── FULL-BLEED PREMIUM — S6.4 : photo = le cadre lui-même ── */
  /* Remplace le modèle vignette ronde + label flow.              */
  /* Scope strict desktop @900px — mobile inchangé.              */

  .k-chip {
    /* Géométrie carte */
    min-width: 0;
    max-width: none;
    width: 100%;
    height: 100px;
    min-height: 88px;
    /* Ancrage des enfants absolus */
    position: relative;
    display: block;
    padding: 0;
    /* Visuel premium */
    border-radius: 18px;
    border: none;
    background: var(--sand-warm);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    overflow: hidden;
    /* Transitions lift */
    transition: transform .20s var(--ease), box-shadow .20s var(--ease);
  }

  /* Lift au survol */
  .k-chip:hover {
    transform: translateY(-4px);
    box-shadow:
      0 16px 32px rgba(28,26,23,.13),
      0 2px 6px rgba(28,26,23,.06);
  }

  /* Neutralise le transform global sur .k-chip-photo (hérité de @hover:hover) */
  .k-chip:hover .k-chip-photo {
    transform: none;
    box-shadow: none;
  }

  /* Zoom discret sur l'image au survol */
  .k-chip:hover .k-chip-photo img {
    transform: scale(1.07);
    filter: saturate(1.32) contrast(1.06) brightness(1.06);
  }

  /* ── Photo = le cadre ── */
  .k-chip-photo,
  .k-chip-photo.k-chip-photo--img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    background: var(--sand-warm);
    box-shadow: none;
    overflow: hidden;
    display: block;
    transform: none;
  }

  .k-chip-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0;
    filter: saturate(1.20) contrast(1.04) brightness(1.02);
    transition: transform .30s var(--ease), filter .30s var(--ease);
  }

  /* Fallback image erreur */
  .k-chip-fallback {
    display: none;
  }

  .k-chip-photo.is-img-error .k-chip-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    color: var(--white);
    font-size: 22px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--ocean-dark), var(--ocean-light));
  }

  /* ── Gradient overlay — scrim bas ──                                */
  /* Sur la carte (.k-chip::after), z-index 1 : au-dessus de la photo */
  /* et en-dessous du label.                                          */
  .k-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 28%,
      rgba(18, 12, 6, .44) 100%
    );
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
  }

  /* ── Label overlay bas ── */
  .k-chip-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 7px 10px 9px;
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    text-shadow: 0 1px 4px rgba(0,0,0,.50);
    z-index: 2;
  }

  /* ── État actif — vert plein ── */
  .k-chip.active {
    transform: translateY(-2px);
    background: var(--ocean-dark);
    border-color: var(--ocean-dark);
    box-shadow:
      0 0 0 2.5px var(--ocean-dark),
      0 10px 24px rgba(74,144,64,.22);
  }

  .k-chip.active .k-chip-photo img {
    filter: saturate(1.28) contrast(1.06) brightness(1.05);
  }

  .k-chip.active .k-chip-label {
    color: var(--white);
    font-weight: 900;
    text-shadow:
      0 1px 6px rgba(200,92,45,.65),
      0 1px 3px rgba(0,0,0,.55);
  }

  /* Override "Tout" — all.jpg fond sombre, compenser la densité */
  .k-chip[data-cat="all"] .k-chip-photo img {
    filter: saturate(1.10) contrast(0.96) brightness(1.18);
  }

  .k-sec-subcats { display: none; }
  .k-sec-see-all { display: none; }
  .k-sec-header  { display: none; }

  #k-desktop-sidebar,
  .k-desktop-sidebar {
    display: none;
  }

  .k-desktop-universe-nav {
    display: none;
  }
}

/* (Palier @900-1180px supprimé : auto-fit dans .k-cats @900px gère l'adaptation
   du nombre de colonnes sans breakpoint intermédiaire. — 31/05) */

/* Fond couleur catégorie sur subchip actif — migré depuis boutique-desktop.css */
/* Fond couleur catégorie sur subchip actif */
.k-chip[data-cat="Mode & Beauté"] ~ * .k-subchip.active,
#k-subcats-wrap[data-parent-cat="Mode & Beauté"] .k-subchip.active { background: var(--cat-mode-bg); }
.k-chip[data-cat="Maison"] ~ * .k-subchip.active,
#k-subcats-wrap[data-parent-cat="Maison"] .k-subchip.active         { background: var(--cat-maison-bg); }
.k-chip[data-cat="Tech"] ~ * .k-subchip.active,
#k-subcats-wrap[data-parent-cat="Tech"] .k-subchip.active           { background: var(--cat-tech-bg); }
.k-chip[data-cat="Bricolage"] ~ * .k-subchip.active,
#k-subcats-wrap[data-parent-cat="Bricolage"] .k-subchip.active      { background: var(--cat-brico-bg); }
.k-chip[data-cat="Créations personnelles"] ~ * .k-subchip.active,
#k-subcats-wrap[data-parent-cat="Créations personnelles"] .k-subchip.active { background: var(--cat-perso-bg); }
.k-chip[data-cat="Auto"] ~ * .k-subchip.active,
#k-subcats-wrap[data-parent-cat="Auto"] .k-subchip.active           { background: var(--cat-auto-bg); }


/* Chip animation — migré depuis interactions.css (Sprint 4 — S4.2) */
/* Chip en surbrillance pendant la transition (scale + ring) */
@keyframes k-chip-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(200,92,45,.35); }
  100% { transform: scale(1); box-shadow: none; }
}
.k-chip.transitioning .k-chip-photo {
  animation: k-chip-pulse .4s var(--ease-spring) both;
}
/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM MOBILE V1 — catégories (rapatrié de b-mobile-premium-v1.js, Lot 2/L2-S2)
   Scopé à l'état html.k-mobile-premium-v1 posé par le JS. Owner officiel des chips.
   !important retirés (L4-S11) — spécificité 0-2-0 suffit à battre les règles base. ═══ */
html.k-mobile-premium-v1 .k-cats-shell { padding: 0 10px 8px; }

html.k-mobile-premium-v1 .k-cats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  padding: 6px 12px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html.k-mobile-premium-v1 .k-cats::-webkit-scrollbar { display: none; }

html.k-mobile-premium-v1 .k-chip,
html.k-mobile-premium-v1 .k-chip.is-active,
html.k-mobile-premium-v1 .k-chip.active {
  flex: 0 0 auto;
  width: clamp(60px, 16vw, 64px);
  min-width: clamp(60px, 16vw, 64px);
  max-width: clamp(60px, 16vw, 64px);
  height: 84px;
  min-height: 84px;
  padding: 6px 4px 6px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  background: color-mix(in srgb, var(--white) 86%, transparent);
  box-shadow: 0 6px 14px var(--border-text-06);
  scroll-snap-align: start;
}

html.k-mobile-premium-v1 .k-chip-photo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
}

html.k-mobile-premium-v1 .k-chip-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.15;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
}

/* Premium mobile : sous-catégories (rapatrié de b-mobile-premium-v1.js, L2-S2). */
@media (max-width: 899px) {
  html.k-mobile-premium-v1 #k-subcats-wrap { margin-top: -4px; }

  /* ── Polish léger catégories mobile (hauteur du rail INCHANGÉE → pager safe) ──
     On ne touche ni min-height, ni padding, ni la grille, ni la taille 26×26 de
     la vignette. Uniquement : opacité/bord, netteté image, et état actif coral. */

  /* Pill : fond plus opaque + bord un peu plus présent → meilleur contraste */
  .k-chip {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(198, 168, 93, .22);
    box-shadow: 0 1px 5px rgba(28, 26, 23, .06);
  }

  /* Vignette plus nette (dimensions inchangées) */
  .k-chip-photo {
    border-color: rgba(28, 26, 23, .10);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .70),
      0 1px 3px rgba(28, 26, 23, .12);
  }
  .k-chip-photo img {
    filter: saturate(1.3) contrast(1.08) brightness(1.02);
  }

  /* Label : contraste renforcé, taille/poids inchangés (pas de poussée) */
  .k-chip-label {
    color: var(--text);
    font-weight: 800;
  }

  /* État actif coral affirmé — SANS scale ni changement de hauteur */
  .k-chip.active {
    background: var(--ocean-dark);
    border-color: var(--ocean-dark);
    box-shadow: 0 2px 8px rgba(74, 144, 64, .30);
  }
  .k-chip.active .k-chip-photo {
    border-color: var(--ocean-dark);
    box-shadow:
      0 0 0 1.5px var(--ocean-dark),
      inset 0 0 0 1px rgba(255, 255, 255, .60);
    transform: none;
  }
  .k-chip.active .k-chip-label {
    color: var(--white);
    font-weight: 800;
  }
}

/* ── Premium desktop home — catégories (rapatrié de b-home-premium-v1.js, Lot 3) ── */
@media (min-width: 900px) {
  html.k-home-premium-v1 .k-cats-shell { padding-top: 18px; }

  html.k-home-premium-v1 .k-cats::before {
    content: 'Explorer par univers';
    position: absolute;
    left: clamp(24px, 3vw, 46px);
    top: -34px;
    font-family: var(--font-display, var(--font));
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--text);
  }

  html.k-home-premium-v1 .k-cats {
    position: relative;
    gap: 14px;
    /* FIX AUDIT 2026-06-11 : la min-width premium vit sur les TRACKS, pas sur
       les chips. Avec min-width:164px sur .k-chip, les tracks minmax(120px,1fr)
       ne faisaient que ~131px à 900px → chips débordant du conteneur (+12px de
       scroll horizontal entre 900 et ~1240px). auto-fit réduit désormais le
       nombre de colonnes nativement. */
    grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
  }

  html.k-home-premium-v1 .k-chip {
    border-radius: 24px;
    min-width: 0;
    background: color-mix(in srgb, var(--white) 78%, transparent);
    box-shadow: 0 14px 34px var(--border-text-06);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  }

  html.k-home-premium-v1 .k-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px var(--border-text-08);
  }

  html.k-home-premium-v1 .k-chip-label { font-weight: 850; }
}

/* ── ANIMATION CHANGEMENT DE CATÉGORIE ───────────────────────────
   Slide-up staggeré : les cartes montent en décalé à l'entrée.
   Déclenchée par .k-grid-entering posé par b-catalog.js.
   Owner : categories.css (changement de catégorie = interaction chip).
   prefers-reduced-motion : animation supprimée. ──────────────────── */

@keyframes k-card-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes k-chip-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.k-grid-entering .k-card {
  animation: k-card-enter .28s cubic-bezier(.22, 1, .36, 1) both;
}

.k-grid-entering .k-card:nth-child(1)  { animation-delay:   0ms; }
.k-grid-entering .k-card:nth-child(2)  { animation-delay:  45ms; }
.k-grid-entering .k-card:nth-child(3)  { animation-delay:  90ms; }
.k-grid-entering .k-card:nth-child(4)  { animation-delay: 135ms; }
.k-grid-entering .k-card:nth-child(5)  { animation-delay: 175ms; }
.k-grid-entering .k-card:nth-child(6)  { animation-delay: 210ms; }
.k-grid-entering .k-card:nth-child(n+7) { animation-delay: 240ms; }

.k-chip.chip-pop { animation: k-chip-pop .22s ease; }

@media (prefers-reduced-motion: reduce) {
  .k-grid-entering .k-card { animation: none; }
  .k-chip.chip-pop          { animation: none; }
}


/* ── products.css ────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — products.css
   Grille produits, cartes, stepper panier.
   Mobile-first, zéro !important.
   ═══════════════════════════════════════════════════════════════ */

/* ── GRILLE ──────────────────────────────────────────────────── */
.k-grid,
.k-sec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 12px 12px;
}

/* ── CARTE ───────────────────────────────────────────────────── */
.k-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
  position: relative;
}

.k-card:active {
  transform: scale(.98);
}

@media (hover: hover) and (pointer: fine) {
  .k-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-3);
  }
}

/* Image */
.k-card-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(145deg, var(--sand) 0%, var(--sand-warm) 100%);
}

.k-card-img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;

  transition: transform .4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .k-card:hover .k-card-img {
    transform: scale(1.04);
  }
}

/* Badge promo */
.k-card-promo {
  position: absolute;
  top: 7px;
  left: 7px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 7px;
  letter-spacing: .2px;
  box-shadow: 0 2px 8px rgba(200,92,45,.22);
  z-index: 4;
}

/* Bouton favori */
.k-card-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  background: var(--surface-sand-94);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ocean-dark);
  box-shadow: var(--elev-1);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s var(--ease);
  cursor: pointer;
  z-index: 3;
}

.k-card-fav:active {
  transform: scale(1.12);
}

.k-card-fav.liked {
  color: var(--pink);
  background: var(--pink-light);
  box-shadow: 0 0 0 2px var(--pink-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .k-card-fav:hover {
    transform: scale(1.08);
    box-shadow: var(--elev-2);
  }
}

/* ── BOUTON AJOUTER AU PANIER ────────────────────────────────── */
.k-card-add {
  position: absolute;
  bottom: 7px;
  right: 7px;
  width: 32px;
  height: 32px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  padding: 0;
  z-index: 5;
  cursor: pointer;
  overflow: visible;
  transition: transform .15s var(--ease);
  /* Détourage PNG fond blanc : img tag inséré via JS, mix-blend sur l'img */
}
/* Image panier dans .k-card-add (rendue via JS comme <img>) */
.k-card-add > img,
.k-card-add-basket {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
}

.k-card-add:active {
  transform: scale(.9);
  box-shadow: 0 0 0 4px rgba(224,90,72,.15);
}

@media (hover: hover) and (pointer: fine) {
  .k-card-add:hover {
    transform: scale(1.05);
    box-shadow: var(--elev-3);
  }
}

/* État "dans le panier" : stepper inline */
.k-card-add.in-cart {
  width: auto;
  min-width: 68px;
  max-width: 86px;
  height: 32px;
  padding: 0;
  background: transparent;                       /* transparent d'abord */
  border: 1.5px solid var(--ocean);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(74,144,64,.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: cartAddPulse .35s cubic-bezier(.34,1.56,.64,1);
  right: 7px;
  bottom: 7px;
  /* Le fond blanc n'apparaît qu'après la fin de l'animation */
  animation: cartAddPulse .35s cubic-bezier(.34,1.56,.64,1) forwards,
             cartAddBg .01s linear .35s forwards;
}

@keyframes cartAddBg {
  to { background: var(--white); }
}

@keyframes cartAddPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.k-card-add.in-cart .k-add-minus,
.k-card-add.in-cart .k-add-plus-ic {
  flex: 0 0 26px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ocean);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 16px;
  transition: background .15s;
}

.k-card-add.in-cart .k-add-minus:active,
.k-card-add.in-cart .k-add-plus-ic:active {
  background: rgba(74,144,64,.12);
}

.k-card-add.in-cart .k-add-qty {
  flex: 1 1 auto;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ocean);
  pointer-events: none;
  min-width: 18px;
}

/* Badge quantité */
.k-card-add-qty-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--ocean);
  color: var(--white);
  border-radius: 11px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  pointer-events: none;
  z-index: 2;
  animation: qtyBadgeBounce .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes qtyBadgeBounce {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(10deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

/* Long-press indicator */
.k-card-add.is-long-pressing {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--ocean), 0 4px 14px rgba(74,144,64,.3);
}

.k-card-add.stepper-open {
  opacity: .7;
}

/* Stepper flottant */
.k-card-add-stepper {
  position: absolute;
  bottom: 50px;
  right: 0;
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--ocean);
  border-radius: 24px;
  padding: 4px 6px;
  gap: 4px;
  box-shadow: var(--elev-3);
  z-index: 10;
  animation: stepperSlideDown .3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes stepperSlideDown {
  0%   { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.k-card-add-stepper.k-stepper-closing {
  animation: stepperSlideUp .25s ease-in forwards;
}

@keyframes stepperSlideUp {
  0%   { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

.k-card-add-stepper button {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ocean);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s;
}

.k-card-add-stepper button:active {
  background: rgba(74,144,64,.12);
  transform: scale(.9);
}

.k-card-add-stepper .k-stepper-qty {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  user-select: none;
}

/* Parts stepper */
.k-card-add-plus {
  font-size: 18px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  pointer-events: none;
}

.k-add-minus,
.k-add-plus-ic {
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.k-add-minus {
  pointer-events: auto;
}

.k-add-qty {
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  min-width: 16px;
  text-align: center;
  pointer-events: none;
}

.k-card-add-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  background: var(--coral);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  border-radius: 50px;
  padding: 0 3px;
  display: none;
  align-items: center;
  justify-content: center;
}

.k-card-add-count.show {
  display: flex;
}

/* ── INFO CARTE ──────────────────────────────────────────────── */
.k-card-info {
  padding: 10px 12px 12px;
}

.k-card-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.28em;
  font-variation-settings: 'opsz' 14;
}

.k-card-desc {
  font-family: var(--font);
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.28;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.28em;
}

.k-card-bottom {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 6px;
  gap: 6px;
  /* Réserve l'espace du bouton .k-card-add (32px + 7px right + 4px breathing)
     pour que prix/ancien-prix ne passent jamais sous le bouton panier en
     bas-droite. Écrasé en desktop par le bloc @600px ci-dessous. */
  padding-right: 43px;
}

.k-card-price {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.08;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 24;
}

.k-card-old-price {
  font-size: 11px;
  color: var(--text-light);
  text-decoration: line-through;
  text-decoration-color: rgba(31,48,36,.28);
  text-decoration-thickness: 1px;
}

.k-card-price-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  /* Réserve l'espace de 3 lignes (prix KMF + ≈ EUR + ancien prix barré)
     pour que les cartes avec/sans promo aient la même hauteur visuelle.
     ≈ 18px (prix) + 13px (eur) + 13px (old) + 2px gap = ~46px */
  min-height: 46px;
}

.k-card-price-eur {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1;
  font-weight: 500;
}

.k-card-prices-row {
  align-items: flex-end;
}

.k-card-emoji {
  display: none;
}

/* Éléments desktop cachés sur mobile */
.k-card-category {
  display: none;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-card-eur {
  display: none;
}

.k-card-avail {
  display: none;
}

.k-card-prices {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}

/* Fade-in cartes */
@keyframes k-card-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.k-grid .k-card {
  animation: k-card-fade-in .35s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .k-grid .k-card {
    animation: none;
  }
}

/* Bouton "Acheter maintenant" */
.k-buy-now-btn {
  height: 42px;
  padding: 0 18px;
  background: var(--ocean);
  color: var(--white);
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.k-buy-now-btn:active {
  transform: scale(.97);
  opacity: .9;
}

/* INTENTIONNEL @600px — enrichissement carte produit sur mobile large/tablette,
   avant layout desktop @900px. Affiche catégorie, prix EUR, disponibilité. */
@media ((min-width: 900px)) {
  .k-card-category {
    display: block;
  }

  .k-card-eur {
    display: block;
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
  }

  .k-card-avail {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--ocean-dark);
    background: rgba(130,196,120,.14);
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
  }

  .k-card-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: 4px;
    /* Reset du padding-right mobile : à partir de 600px, .k-card-add
       est repositionné par cart.css @900px (46×46px) et la zone prix
       n'a plus besoin de réserver l'espace bas-droite. */
    padding-right: 0;
  }

  .k-card-info {
    padding: 8px 10px 10px;
  }

  .k-card-name {
    font-size: 13px;
    min-height: 2.4em;
  }

  .k-card-desc {
    font-size: 11px;
    min-height: 0;
  }

  .k-card-price {
    font-size: 14px;
  }
}

@media (min-width: 900px) {
  /* Source de vérité grille desktop : 4 colonnes fixes (flat + sections home) */
  .k-grid,
  .k-sec-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 8px 0 20px;
  }

  /* Sections home : idem, 4 colonnes — propriété héritée, déclaration explicite */
  .k-grid.k-grid-has-sections .k-sec-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .k-card-img-wrap {
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 1200px) {
  .k-grid,
  .k-sec-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}


/* ── Pager mobile : #k-grid = rail horizontal, .k-cat-section = pages ── */
/* Cage : #k-page-scroll.k-pager-active est déjà fixed dans layout.css */

/* Rail horizontal */
#k-grid.k-grid-cat-pager:not(.k-grid-flat-subcat) {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none; /* FIX ghost-gauche : contain bloquait le delta touch sur iOS */
  gap: 0;
  padding: 0;
  margin: 0;
  grid-template-columns: none;
  scrollbar-width: none;
}
#k-grid.k-grid-cat-pager:not(.k-grid-flat-subcat)::-webkit-scrollbar {
  display: none;
}

/* Chaque page = pleine hauteur + pleine largeur */
#k-grid.k-grid-cat-pager:not(.k-grid-flat-subcat) > .k-cat-section {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  /* PATCH iOS : "none" coupe le rubber-band qui simulait du scroll dans le
     vide quand la liste de produits était courte. "contain" laissait passer
     l'overscroll élastique de Safari. */
  overscroll-behavior-y: none;
  box-sizing: border-box;
  padding: 0 12px 80px;
}

/* Grille 2 colonnes dans chaque page */
#k-grid.k-grid-cat-pager:not(.k-grid-flat-subcat) > .k-cat-section > .k-sec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 0 12px;
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP PREMIUM — cartes produits
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* Promo badge desktop */
  .k-promo-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 6px;
    top: 7px;
    left: 7px;
  }

  /* Stepper inline dans la carte desktop */
  .k-card-add.in-cart {
    width: 100px;
    border-radius: 20px;
    background-color: var(--white);
    box-shadow: var(--elev-2);
  }

  /* Section header desktop */
  .k-sec-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0 12px;
    border-bottom: 2px solid var(--sand-dark);
    margin-bottom: 4px;
  }

  .k-sec-header-emoji { font-size: 1.3rem; }

  .k-sec-header-name {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--text);
    letter-spacing: -.02em;
  }

  .k-sec-header-count {
    margin-left: auto;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--sand-dark);
    padding: 2px 10px;
    border-radius: 999px;
  }

  /* Card fav opacity — source de vérité : boutique-desktop.css */

}

/* ══════════════════════════════════════════════════════════════════
   CARTE PRODUIT DESKTOP — owner unique : products.css
   Migré depuis : boutique-desktop.css (18), desktop-commerce-skeleton.css (2)
   Sprint 4 — S4.3
   ══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   3. CARD HOVER — bouton fav + bouton panier
   Overlay JS désactivé : plus de voile vert.
   Le hover CSS natif (translateY + shadow) suffit.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  .k-card { position: relative; }

  /* Fav natif : masqué par défaut, révélé au hover, toujours visible si liké */
  .k-card-fav { opacity: 0; }
  .k-card:hover .k-card-fav { opacity: 1; }
  .k-card-fav.liked { opacity: 1; }

  /* ── BOUTON PANIER desktop : taille réduite + stepper compact ───────── */
  /* Override de la taille mobile (32px) : plus discret sur desktop.       */
  .k-card-add {
    width: 26px;
    height: 26px;
    bottom: 8px;
    right: 8px;
  }

  /* Stepper − qty + : plus compact sur desktop (mobile = 68-86px).
     Surchargé depuis products.css @900px (100px → 80px).                */
  .k-card-add.in-cart {
    width: 80px;
    height: 28px;
    border-radius: 18px;
    background-color: var(--white);
    box-shadow: var(--elev-2);
  }

  .k-card-add.in-cart .k-add-minus,
  .k-card-add.in-cart .k-add-plus-ic {
    flex: 0 0 22px;
    font-size: 16px;
  }

  .k-card-add.in-cart .k-add-qty {
    font-size: 12px;
  }
}


/* ══════════════════════════════════════════════════════════════════
   6. ANIMATION ENTRÉE CARTES — stagger Temu-style
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  .k-card {
    animation: k-card-in .22s var(--ease) both;
  }

  @keyframes k-card-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);   }
  }

  .k-card:nth-child(1)  { animation-delay: .02s; }
  .k-card:nth-child(2)  { animation-delay: .04s; }
  .k-card:nth-child(3)  { animation-delay: .06s; }
  .k-card:nth-child(4)  { animation-delay: .08s; }
  .k-card:nth-child(5)  { animation-delay: .10s; }
  .k-card:nth-child(6)  { animation-delay: .12s; }
  .k-card:nth-child(7)  { animation-delay: .14s; }
  .k-card:nth-child(8)  { animation-delay: .16s; }
  .k-card:nth-child(9)  { animation-delay: .18s; }
  .k-card:nth-child(10) { animation-delay: .20s; }

  .k-card:hover { transform: translateY(-1px); }
}



/* Carte produit — look glass desktop (PALETTE-FIX-01, ex desktop-commerce-skeleton.css) */
@media (min-width: 900px) {
  /* PALETTE-FIX-01 : ocean au lieu de rgba(42,62,44,…) / rgba(31,48,36,…) */
  .k-card {
    border-radius: 18px;
    border: 1px solid rgba(100,175,90, .08);
    background: var(--white);
    box-shadow: 0 5px 16px rgba(100,175,90, .05);
  }

  .k-card:hover {
    border-color: rgba(198,168,93,.32);
    box-shadow: 0 12px 28px rgba(100,175,90, .10);
  }
}


/* ══════════════════════════════════════════════════════════════════
   GRILLE — Animations slide (pager Temu) + sections
   Migré depuis interactions.css (Sprint 4 — S4.4)
   Source de vérité grille → products.css
   ══════════════════════════════════════════════════════════════════ */

/* Mode sections : la grille passe en display:block pour afficher les .k-cat-section */
.k-grid.k-grid-has-sections { display:block; grid-template-columns:none; gap:0; padding:0; }

/* En mode pager catégories, display:flex l'emporte sur display:block */
#k-grid.k-grid-has-sections.k-grid-cat-pager:not(.k-grid-flat-subcat) {
  display: flex;
  flex-wrap: nowrap;
}

/* Slide grille entière (swipe horizontal entre catégories) */
@keyframes k-grid-out-left  {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-24px); opacity: 0; }
}
@keyframes k-grid-out-right {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(24px); opacity: 0; }
}
@keyframes k-grid-in-right  {
  from { transform: translateX(24px);  opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes k-grid-in-left   {
  from { transform: translateX(-24px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.k-grid.k-grid-slide-out-left  { animation: k-grid-out-left  .16s ease-out forwards; }
.k-grid.k-grid-slide-out-right { animation: k-grid-out-right .16s ease-out forwards; }
.k-grid.k-grid-slide-in-right  { animation: k-grid-in-right  .26s var(--ease) both; }
.k-grid.k-grid-slide-in-left   { animation: k-grid-in-left   .26s var(--ease) both; }

/* Respect des préférences d'accessibilité — grille */
@media (prefers-reduced-motion: reduce) {
  .k-grid.k-grid-slide-out-left,
  .k-grid.k-grid-slide-out-right,
  .k-grid.k-grid-slide-in-right,
  .k-grid.k-grid-slide-in-left { animation: none; }
}

/* ═══ PREMIUM MOBILE V1 — catalogue/grille/cartes/fab (rapatrié de
   b-mobile-premium-v1.js, Lot 2/L2-S2). Scopé html.k-mobile-premium-v1,
   @media max 899px. Hex WhatsApp remplacé par token --whatsapp (I-3). ═══ */
@media (max-width: 899px) {
  html.k-mobile-premium-v1 .k-proverb-sep { display: none; }
  html.k-mobile-premium-v1 #k-catalog-section { padding-top: 6px; }

  html.k-mobile-premium-v1 .k-section-title,
  html.k-mobile-premium-v1 .k-cat-title { margin-top: 8px; }

  html.k-mobile-premium-v1 .k-grid {
    gap: 14px;
    padding-inline: 12px;
  }
  html.k-mobile-premium-v1 .k-card {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 30px var(--border-text-06);
  }
  html.k-mobile-premium-v1 .k-card-title {
    font-size: 16px;
    line-height: 1.15;
  }
  html.k-mobile-premium-v1 .k-card-desc {
    font-size: 12px;
    line-height: 1.25;
    max-height: 2.5em;
    overflow: hidden;
  }
  html.k-mobile-premium-v1 .k-card-price {
    font-size: 22px;
    letter-spacing: -.035em;
  }
  html.k-mobile-premium-v1 .k-wa-fab {
    width: 50px;
    height: 50px;
    right: 16px;
    bottom: 98px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--whatsapp) 28%, transparent);
  }
}


/* ── modal-shell.css ─────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — modal-shell.css
   Structure overlay, shell, topbar, scroll, actions, layout desktop.
   Découpage Sprint 6 — S6.2 (extrait de modal.css)
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   1. BASE MOBILE (tous breakpoints, overridé par ≥900px)
   ══════════════════════════════════════════════════════════════ */

/* ── OVERLAY ─────────────────────────────────────────────────── */
.k-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: var(--overlay-dark-sm);
  justify-content: center; align-items: stretch;
}
.k-modal-overlay.open { display: flex; }

/* ── MODAL SHELL ─────────────────────────────────────────────── */
.k-modal {
  width: 100%; height: 100vh; height: 100dvh;
  background: var(--white);
  border-radius: 0; overflow: hidden;
  animation: k-slide-up .3s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column;
}
@keyframes k-slide-up {
  0%   { transform: translateY(100%); opacity: .6; }
  60%  { transform: translateY(-4px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── TOP BAR ─────────────────────────────────────────────────── */
.k-modal-topbar {
  box-sizing: border-box; max-width: 100%; /* S2.1 — garantit que padding ne déborde jamais du viewport */
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 400;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: var(--surface-sand-96);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border-bottom: 1px solid var(--overlay-black-sm);
  box-shadow: 0 2px 12px var(--border-text-06);
  flex-shrink: 0;
}
.k-modal-back {
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 600; color: var(--text);
  background: none; border: none; padding: 6px 10px;
  border-radius: 50px; transition: opacity .15s;
  /* FIX topbar overflow : flex-shrink:1 + min-width:0 permettent au bouton
     de rétrécir sur petits écrans sans pousser la croix hors cadre. */
  flex-shrink: 1; min-width: 0;
}
.k-modal-back svg { width: 18px; height: 18px; flex-shrink: 0; }
#k-modal-back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.k-modal-back:active { opacity: .7; }
#k-modal-nav { display: flex; align-items: center; gap: 6px; }
/* PR-D3 — nav-btn pill texte sobre (← produit précédent / → produit suivant) */
.k-modal-nav-btn {
  display: flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 10px; border-radius: 20px;
  background: var(--sand); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.k-modal-nav-btn:hover { background: var(--sand-dark); color: var(--text); }
.k-modal-nav-btn.is-disabled { opacity: .3; pointer-events: none; }
.k-modal-nav-counter { font-size: 11px; color: var(--text-muted); font-weight: 600; min-width: 36px; text-align: center; }
.k-modal-topbar-right { box-sizing: border-box; max-width: 100%; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* S2.1+S2.3 — box-sizing garanti ; padding-right:10px (VIS-5) supprimé : inutile avec box-sizing correct ; gap revient à 8px nominal */
.k-modal-cart-btn {
  position: relative; width: auto; height: auto; border-radius: 0;
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
.k-modal-cart-btn .k-cart-avatar { width: 36px; height: 36px; mix-blend-mode: multiply; } /* FIX: était 52px → poussait la croix hors écran */
.k-modal-cart-badge {
  position: absolute; top: -4px; right: -4px; /* VIS-5: décalage -2→-4 pour sortir du gap topbar-right */
  min-width: 16px; height: 16px;
  background: var(--coral); color: var(--white);
  font-size: 10px; font-weight: 700; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.k-modal-cart-badge:empty { display: none; }
.k-modal-close {
  width: 34px; height: 34px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 50%; font-size: 16px; color: var(--text);
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.k-modal-close:active { background: var(--sand); }

/* ── SCROLL AREA (mobile : seul scroll owner) ────────────────── */
.k-modal-scroll {
  box-sizing: border-box; max-width: 100%; /* S2.1 */
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; min-height: 0;
  display: flex; flex-direction: column; padding-top: 0;
  padding-bottom: 0;
}

/* ── PRODUCT-ZONE : transparent sur mobile (display:contents) ── */
/* Les enfants (img-wrap, details, actions, suggestions) participent
   directement au flex de .k-modal-scroll. Desktop override en grid. */
.k-modal-product-zone {
  display: contents;
}

/* ── TOPBAR SEARCH MOBILE ────────────────────────────────────── */
.k-topbar-search-trigger {
  width: 34px; height: 34px; border: none; background: var(--sand); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: background .12s, transform .12s; -webkit-tap-highlight-color: transparent;
}
.k-topbar-search-trigger svg { width: 17px; height: 17px; stroke: var(--text); fill: none; stroke-width: 2; }
.k-topbar-search-trigger:active { transform: scale(.9); background: var(--sand-dark); }
.k-topbar-search-expanded {
  display: none; position: absolute; inset: 0; z-index: 410;
  background: var(--surface-sand-96);
  backdrop-filter: blur(20px) saturate(200%); -webkit-backdrop-filter: blur(20px) saturate(200%);
  padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
  align-items: center; gap: 8px; animation: k-topbar-search-in .2s var(--ease);
}
.k-topbar-search-expanded.is-active { display: flex; }
@keyframes k-topbar-search-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.k-topbar-search-back { width: 34px; height: 34px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.k-topbar-search-back svg { width: 20px; height: 20px; stroke: var(--text); fill: none; stroke-width: 2; }
.k-topbar-search-back:active { background: var(--sand); }
.k-topbar-search-input { flex: 1; height: 36px; border: 1.5px solid var(--border); border-radius: 10px; padding: 0 10px; font-size: 14px; font-weight: 500; color: var(--text); background: var(--white); outline: none; transition: border-color .15s; -webkit-appearance: none; min-width: 0; }
.k-topbar-search-input:focus { border-color: var(--coral); }
.k-topbar-search-input::placeholder { color: var(--text-light); font-weight: 400; }
.k-topbar-search-clear-btn { display: none; width: 28px; height: 28px; border: none; background: var(--sand-dark); border-radius: 50%; color: var(--text-muted); font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; flex-shrink: 0; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.k-topbar-search-clear-btn.is-visible { display: flex; }
.k-modal-topbar.search-mode .k-modal-back,
.k-modal-topbar.search-mode .k-modal-topbar-right,
.k-modal-topbar.search-mode .k-topbar-search-trigger,
.k-modal-topbar.search-mode .k-modal-topbar-product,
.k-modal-topbar.search-mode .k-modal-breadcrumb { display: none; }

/* ── MICRO ───────────────────────────────────────────────────── */
.k-modal-search-mic { width: 30px; height: 30px; border: none; background: transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .12s, transform .12s; -webkit-tap-highlight-color: transparent; padding: 0; }
.k-modal-search-mic svg { width: 17px; height: 17px; stroke: var(--text-muted); fill: none; stroke-width: 2; transition: stroke .15s; }
.k-modal-search-mic:active { transform: scale(.88); }
.k-modal-search-mic.is-listening { background: var(--hero-red); animation: k-mic-pulse 1s ease-in-out infinite; }
.k-modal-search-mic.is-listening svg { stroke: var(--white); }
@keyframes k-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.35); } 50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); } }

/* ── ACTIONS (mobile : sticky bas, flex-shrink:0) ────────────── */
.k-modal-actions {
  box-sizing: border-box; max-width: 100%; /* S2.1 — garantit que la barre CTA ne déborde jamais */
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 10px; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 12px));
  border-top: 1px solid var(--sand-dark);
  flex-shrink: 0;
  background: var(--white);
  touch-action: none;
  pointer-events: auto;
  position: relative; z-index: 30;
}
/* Restaurer un effet glass quand le navigateur le supporte ET qu'on n'est
   pas en sticky (desktop column) — le rgba se réactive seulement là. */
@media (min-width: 900px) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .k-modal-actions {
      background: var(--surface-white-96);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
  }
}
/* Fix panier flottant transparent : forcer fond opaque sur mobile/tablette
   (backdrop-filter déclaré supporté mais non rendu sur Samsung/Chrome Android) */
#k-modal .k-modal-actions {
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Sur mobile, avec display:contents sur product-zone, actions sort du flux normal.
   order:3 la place après img(order:0), details(order:0), suggestions(order:2). */
.k-modal-actions {
  order: 3;
  flex-shrink: 0;
  /* FIX Bug 2: position:sticky dans un overflow-y:auto flex container ne colle PAS
     en bas — l'élément reste dans le flux scrollable.
     Solution: position:fixed en bas, avec padding-bottom compensatoire
     sur .k-modal-scroll pour que le contenu ne passe pas derrière. */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 350; /* sous la topbar (400) mais au-dessus du contenu */
  border-radius: 0; /* pleine largeur en fixed */
  box-shadow: 0 -2px 12px var(--overlay-black-sm);
  /* FIX transparence Android : l'animation k-slide-up (transform) sur .k-modal
     crée un stacking context qui piège position:fixed et empêche le repaint du fond.
     translateZ(0) force un layer GPU propre — le fond blanc est garanti opaque. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* VIS-3D FIX — Remplace le magic-number 150px par la hauteur CTA réellement mesurée
   (--k-modal-cta-h, posée par _syncScrollPadding en JS). Fallback 150px si JS pas encore
   passé. Le safe-area fallback 12px est cohérent avec VIS-3C (actions padding). */
.k-modal-scroll {
  padding-bottom: calc(var(--k-modal-cta-h, 150px) + env(safe-area-inset-bottom, 12px));
}
.k-modal-suggestions { order: 2; }

/* FIX ARCHITECTURE v5: .k-modal-actions sorti du scroll par JS (setupModal)
   => enfant flex direct de #k-modal => position statique, flex gere l'ancrage.
   Selecteur enfant direct (>) => ne s'applique QUE si le JS a fait le deplacement.
   Si le JS echoue, l'ancien position:fixed reste en fallback. */
#k-modal > .k-modal-actions {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  z-index: auto;
  border-radius: 0;
}
/* Quand la barre CTA est en position statique (flex), le padding compensatoire est inutile */
#k-modal > .k-modal-scroll {
  padding-bottom: 0;
}
.k-qty { grid-column: 1; grid-row: 1; display: flex; align-items: center; background: var(--sand); border-radius: 50px; overflow: hidden; height: 44px; flex-shrink: 0; }
.k-qty-btn { width: 38px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; transition: background .15s; touch-action: manipulation; cursor: pointer; }
.k-qty-btn:active { background: var(--sand-dark); }
.k-qty-val { min-width: 34px; text-align: center; font-size: 15px; font-weight: 700; }
.k-add-cart-btn { grid-column: 2; grid-row: 1; flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--white); color: var(--text); border: 1.5px solid var(--sand-dark); border-radius: 50px; font-size: 14px; font-weight: 600; transition: background .2s var(--ease), transform .15s var(--ease), border-color .2s, box-shadow .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-add-cart-btn svg { width: 18px; height: 18px; }
.k-add-cart-btn:active { transform: scale(.97); background: var(--sand); }
.k-modal-actions .k-buy-now-btn { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 48px; padding: 0 24px; background: linear-gradient(135deg, var(--ocean) 0%, var(--ocean-dark) 100%); color: var(--white); border-radius: 50px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s, transform .1s; white-space: nowrap; overflow: hidden; }
.k-modal-subtotal { font-size: 11px; color: var(--text-muted); grid-column: 1 / -1; text-align: right; padding-right: 4px; }
.k-modal-subtotal strong { color: var(--coral); font-weight: 700; font-size: 13px; }

/* ── PRODUIT RAPPELÉ TOPBAR AU SCROLL ───────────────────────── */
.k-modal-topbar-product { display: none; align-items: center; gap: 8px; min-width: 0; flex: 1; margin-left: 8px; opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
/* ARCH-6 : règles is-scrolled rapatriées depuis interactions.css → owner unique ici */
.k-modal.is-scrolled .k-modal-back,
.k-modal.is-scrolled #k-modal-nav      { display: none; }
.k-modal.is-scrolled .k-topbar-search-trigger { display: none; }
.k-modal.is-scrolled .k-modal-topbar-product { display: flex; opacity: 1; transform: translateY(0); }
.k-modal.is-scrolled .k-modal-topbar-right   { display: flex; align-items: center; gap: 8px; }
/* ── TOPBAR MODAL — source de vérité (fusionné depuis interactions.css, Lot 5) ── */
.k-topbar-thumb { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--sand);
  flex: 0 0 40px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px var(--overlay-black-sm); cursor: pointer; transition: transform .15s; }
.k-topbar-thumb:active { transform: scale(.92); }
.k-topbar-thumb-img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.k-topbar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.k-topbar-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-topbar-price { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--coral); line-height: 1.2; margin-top: 2px; }
.k-topbar-price-val { font-size: 12px; font-weight: 800; color: var(--coral); }
.k-topbar-price-promo { font-size: 10px; font-weight: 700; color: var(--white); background: var(--coral); border-radius: 8px; padding: 2px 6px; }
.k-modal-back-top { position: fixed; right: 16px; bottom: calc(var(--bnav-h) + 18px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; border-radius: 50%; background: var(--white); color: var(--text); border: 1px solid var(--sand-dark); box-shadow: var(--elev-2); display: none; align-items: center; justify-content: center; z-index: 420; }
.k-modal-back-top.visible { display: flex; }
.k-modal-back-top svg { width: 20px; height: 20px; }

/* ── DIVERS ──────────────────────────────────────────────────── */
.k-add-cart-btn img, .k-modal-actions img[src*="panier"] { mix-blend-mode: multiply; }
/* base hors #k-modal — masqué mobile ; override via #k-modal dans le bloc @media 900px L651 :
   - .k-modal-trust    → display:flex + layout pill (L732), puis gap/wrap via #k-modal (L735–736)
   - .k-modal-share-row → display:flex + padding (L737), puis grid 2-col via #k-modal (L743) */
.k-modal-trust { display: none; } /* visible desktop uniquement */
.k-modal-share-row { display: none; } /* visible desktop uniquement */
.k-modal-specs { display: none; } /* visible desktop uniquement */
.k-modal-breadcrumb { display: none; } /* visible desktop uniquement */
.k-modal-zoom-lens { display: none; }
.k-modal-zoom-preview { display: none; }


/* ══════════════════════════════════════════════════════════════
   2. MOBILE GUARD @max-width:899px
   Haute spécificité (#k-modal) pour contrecarrer d'éventuels conflits.
   DOIT répéter flex:1 et min-height:0 car elle écrase la règle base.
   ══════════════════════════════════════════════════════════════ */
#k-modal-overlay, #k-modal { max-width: 100vw; overflow-x: hidden; }

/* FIX topbar overflow mobile : #k-modal-nav (← N/total →) est réservé desktop.
   Sans cette règle, les 5 éléments de la topbar dépassent sur écrans ≤390px
   et poussent la croix ✕ hors du cadre. */
#k-modal-nav { display: none; visibility: hidden; } /* VIS-4: visibility:hidden élimine le flash d'une frame avant résolution media query */

/* Scroll owner mobile : flex colonne, prend tout l'espace disponible */
#k-modal .k-modal-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;        /* OBLIGATOIRE : écrasé depuis la base par spécificité ID */
  min-height: 0;      /* OBLIGATOIRE : idem */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 48px)); /* BUGFIX: §2 guard ne doit pas écraser le 150px de §1 (bug scroll sous CTA + badges sur bouton Acheter) */
}

/* Pas de débordement horizontal sur aucun enfant.
   ATTENTION : overflow-x:hidden sur un bloc transforme automatiquement
   overflow-y de visible en auto. Donc on l'applique UNIQUEMENT sur les
   blocs où le scroll vertical interne est ok ou inexistant.
   On EXCLUT les conteneurs verticaux dont le contenu doit "remonter"
   vers le scroll-owner parent (.k-modal-scroll) :
     - .k-modal-suggestions  (contenu vertical, doit déborder vers le parent)
     - #k-sug-rail           (idem)
     - .k-sug-section        (idem)
   Pour eux : juste max-width:100%, et on contraint les enfants. */
#k-modal .k-modal-img-wrap,
#k-modal .k-modal-carousel,
#k-modal .k-modal-details,
#k-modal .k-modal-info,
#k-modal .k-modal-actions,
#k-modal .k-modal-topbar,
#k-modal .k-modal-meta,
#k-modal .k-modal-price-row,
#k-modal .k-modal-share-row,
#k-modal .k-modal-specs {
  width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden;
}
/* Conteneurs verticaux : pas de overflow-x:hidden sinon overflow-y se
   cale automatiquement sur auto et casse le scroll de .k-modal-scroll */
#k-modal .k-modal-suggestions,
#k-modal #k-sug-rail,
#k-modal .k-sug-section {
  width: 100%; max-width: 100%; min-width: 0;
}
#k-modal .k-modal-slide { max-width: 100%; min-width: 100%; }
#k-modal .k-sug-grid {
  width: 100%; max-width: 100%; min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-x: hidden;
}
#k-modal .k-sug-card, #k-modal .k-sug-card-img,
#k-modal .k-sug-card-bottom, #k-modal .k-sug-card-actions { min-width: 0; max-width: 100%; }
#k-modal .k-modal-info h2, #k-modal .k-modal-desc,
#k-modal .k-sug-card-name, #k-modal .k-msearch-item-name,
#k-modal .k-msearch-item-cat { min-width: 0; overflow-wrap: anywhere; word-break: normal; }
#k-modal .k-modal-inner-search, #k-modal .k-modal-search-dropdown {
  width: auto; max-width: calc(100% - 24px); margin-left: 12px; margin-right: 12px;
}
#k-modal .k-msearch-item, #k-modal .k-msearch-item-info { min-width: 0; max-width: 100%; }
#k-modal .k-modal-actions { margin-left: 0; margin-right: 0; }
#k-modal .k-add-cart-btn, #k-modal .k-modal-actions .k-buy-now-btn,
#k-modal .k-qty { min-width: 0; max-width: 100%; }
#k-modal .k-add-cart-btn { overflow: hidden; text-overflow: ellipsis; }
#k-modal .k-topbar-search-expanded { width: 100%; max-width: 100%; overflow-x: hidden; }


/* ══════════════════════════════════════════════════════════════
   2b. MOBILE EXPLICIT WIDTH FIX — ancrage fixed pleine largeur
   VIS-6 — voir docs/BOUTIQUE_VISUAL_FIXES.md
   Corrige le sliver à droite sur Samsung
   Internet / Chrome Android Edge Panels.

   Cause racine (3 ingrédients simultanés) :
   1. #k-grid.k-grid-flat-subcat = overflow-x:auto + scroll-snap.
      Son scrollLeft persiste quand la modal s'ouvre.
   2. b-modal-core.js efface les styles inline position:fixed du
      #k-page-scroll pour libérer le scroll modal sur Chrome Android,
      mais le scrollLeft du grid reste actif.
   3. width:100vw < viewport visuel quand Samsung Internet réserve
      la zone Edge Panels à droite.

   Stratégie de défense en profondeur :
   - Plus de width:100vw — on contraint via inset uniquement, ce qui
     se réfère au viewport visuel (et non layout) sur navigateurs récents
   - Ancrage par les 4 côtés via top/right/bottom/left explicites
   - Le scrollLeft du grid est aussi figé pendant la modal côté JS
     (b-modal-core.js — VIS-6)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  #k-modal-overlay {
    position: fixed;
    /* Ancrage 4 côtés sans width:100vw : on évite le mismatch
       entre layout viewport (100vw) et visual viewport (réel). */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    overflow: hidden;
    /* Annule justify-content:center hérité — sur mobile la modal prend toute
       la largeur, pas besoin de centrage qui peut créer un décalage. */
    justify-content: flex-start;
    align-items: stretch;
    /* contain: force un stacking context strict, indépendant des
       transforms ancestraux résiduels (Chrome Android Edge Panels). */
    contain: layout paint;
  }
  #k-modal {
    /* 100% du parent (overlay) plutôt que 100vw — l'overlay est garanti
       de couvrir le viewport visuel via les top/right/bottom/left ci-dessus. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border-radius: 0;
    flex-shrink: 0;
  }
  #k-modal .k-modal-actions {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   3. DESKTOP ≥900px — TYPOGRAPHIE, ESPACEMENT, TOPBAR
   Rôle : overlay, shell fenêtré (fallback), topbar, scroll, image, détails,
          actions, suggestions — tout SAUF grid-template-columns.
   La grille est exclusive à §6 (B-M-11 — grep "grid-template-columns" §3 → 0).
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* ── Overlay ─────────────────────────────────────────────── */
  .k-modal-overlay.open { align-items: center; justify-content: center; padding: 28px; background: var(--overlay-dark-md); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

  /* ── Shell ───────────────────────────────────────────────── */
  #k-modal.k-modal { width: min(1280px, calc(100vw - 56px)); height: min(880px, calc(100vh - 56px)); max-height: calc(100vh - 56px); border-radius: 20px; overflow: hidden; box-shadow: 0 28px 80px var(--overlay-dark-sm); animation: none; }

  /* Quand le side-cart est visible, la modal se décale pour ne pas le chevaucher.
     336px = width(312) + right-gap(24). Transition douce si le panier apparaît en cours. */
  body.modal-has-cart #k-modal.k-modal {
    width: min(1280px, calc(100vw - 56px - 336px));
    margin-right: 336px;
    transition: width .22s ease, margin-right .22s ease;
  }

  /* ── Topbar ──────────────────────────────────────────────── */
  #k-modal .k-modal-topbar { position: relative; top: auto; left: auto; right: auto; min-height: 58px; padding: 9px 18px; background: rgba(253,250,245,.97); border-bottom: 1px solid var(--border-text-08); box-shadow: 0 8px 24px var(--border-text-06); flex-shrink: 0; }
  #k-modal .k-modal-back { padding: 7px 12px; font-size: 13px; }
  #k-modal #k-modal-nav { display: flex; visibility: visible; margin-left: 10px; } /* restore après hide mobile (VIS-4) */
  #k-modal .k-modal-cart-btn .k-cart-avatar { width: 44px; height: 44px; mix-blend-mode: multiply; }
  .k-topbar-search-trigger { display: none; }
  #k-modal .k-topbar-search-expanded { display: none; }
  .k-modal-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-left: 12px; flex: 1; min-width: 0; overflow: hidden; }
  .k-modal-breadcrumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .k-modal-breadcrumb-sep { color: var(--text-light); flex-shrink: 0; }
  .k-modal-breadcrumb-cat { cursor: pointer; transition: color .12s; }
  .k-modal-breadcrumb-cat:hover { color: var(--coral); }
  .k-modal-breadcrumb-name { font-weight: 600; color: var(--text); }

  /* ── Scroll owner desktop ────────────────────────────────── */
  #k-modal .k-modal-scroll {
    flex: 1 1 auto; min-height: 0; height: 100%;
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    padding: 0; background: var(--white);
  }

  /* ── Product-zone : grid 2 colonnes (colonnes dans §6, B-M-11) */
  #k-modal .k-modal-product-zone {
    display: grid;
    grid-template-rows: 1fr auto;
    flex: 0 0 auto;
    min-height: calc(min(880px, 100vh - 56px) - 58px);
    width: 100%;
    background: var(--white);
  }

  /* ── Image : col gauche sticky ───────────────────────────── */
  #k-modal .k-modal-product-zone .k-modal-img-wrap {
    grid-column: 1; grid-row: 1 / 3;
    height: calc(min(880px, 100vh - 56px) - 58px);
    position: sticky; top: 0; align-self: start;
    overflow: hidden; border-radius: 0; margin: 0; max-height: none;
    background: radial-gradient(circle at 70% 20%, rgba(100,175,90,.08), transparent 30%),
                linear-gradient(135deg, var(--sand) 0%, var(--sand-warm) 100%);
  }
  #k-modal .k-modal-carousel { flex: 1; min-width: 0; width: 100%; height: 100%; cursor: zoom-in; }
  #k-modal .k-modal-carousel-track { height: 100%; }
  /* PR-D2 fix : padding-bottom 32px évite que le sujet soit coupé au bord bas ;
     object-position 50% 40% remonte légèrement le centre optique. */
  #k-modal .k-modal-slide { height: 100%; padding: 16px 20px 32px 82px; object-fit: contain; object-position: 50% 50%; width: 100%; }
  #k-modal .k-modal-dots { display: none; }
  #k-modal .k-modal-counter { display: none; }
  #k-modal .k-modal-thumbs { display: flex; flex-direction: column; gap: 9px; position: absolute; left: 16px; top: 16px; bottom: 16px; z-index: 8; width: 58px; overflow-y: auto; scrollbar-width: none; }
  #k-modal .k-modal-thumbs::-webkit-scrollbar { display: none; }
  #k-modal .k-modal-thumb { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; border: 1px solid rgba(31,48,36,.10); background: var(--overlay-white-78); box-shadow: 0 8px 18px var(--border-text-06); overflow: hidden; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s; }
  #k-modal .k-modal-thumb:hover, #k-modal .k-modal-thumb.is-active { transform: translateY(-1px); border-color: rgba(200,92,45,.45); box-shadow: 0 10px 22px rgba(31,48,36,.10); }
  #k-modal .k-modal-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
  .k-modal-zoom-preview {
    display: block; position: absolute;
    top: 16px; right: 16px; left: auto;
    width: 420px; height: 420px;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    border: 1px solid var(--border); border-radius: 16px;
    background-color: var(--white);
    background-repeat: no-repeat; background-size: 280% 280%;
    box-shadow: var(--elev-4);
    opacity: 0; pointer-events: none; z-index: 80;
    transition: opacity .16s var(--ease); overflow: hidden;
  }
  .k-modal-zoom-preview.is-active { opacity: 1; }

  /* Lentille : carré semi-transparent qui suit le curseur sur l'image source.
     Indique à l'utilisateur quelle zone est zoomée dans la preview. */
  .k-modal-zoom-lens {
    display: block; position: absolute;
    width: 36%; height: 36%;
    border: 2px solid rgba(255,255,255,.85);
    background: rgba(255,255,255,.18);
    box-shadow: 0 0 0 9999px rgba(0,0,0,.18);
    border-radius: 6px;
    opacity: 0; pointer-events: none; z-index: 70;
    transition: opacity .12s var(--ease);
  }
  .k-modal-zoom-lens.is-active { opacity: 1; }

  /* ── Détails : col droite, row 1 ────────────────────────── */
  #k-modal .k-modal-product-zone .k-modal-details {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column;
    overflow-y: auto; overflow-x: hidden; min-height: 0;
    padding: 0 24px; background: linear-gradient(180deg, var(--white) 0%, var(--white) 74%, var(--sand) 100%);
    border-radius: 0; box-shadow: none; margin: 0;
  }
  #k-modal .k-modal-product-zone .k-modal-info { flex: 0 0 auto; overflow: visible; max-height: none; padding: 18px 0 12px; }

  /* ── Chantier 2 — Réordonnancement visuel desktop ──
     DOM intact (cf. index.html), .k-modal-info est en flex-direction: column.
     On remonte visuellement .k-modal-meta (social proof) au-dessus du titre
     via `order:` SANS toucher le DOM. Mobile garde l'ordre d'origine. */
  #k-modal .k-modal-meta { order: -1; margin-top: 0; gap: 14px; align-items: center; }
  #k-modal .k-modal-meta span {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 0;
  }
  /* Le rang Bestseller garde sa pastille coral pleine.
     Utilise --border-coral-09 / --border-coral-22 (tokens existants).
     L'ancien styling §1 référençait --coral-bg / --coral-border (inexistants
     dans tokens.css → silencieusement transparents, dette pré-existante).
     Ici on est en scope desktop spécifique, donc on shadow proprement. */
  #k-modal .k-modal-meta .k-modal-meta-rank {
    background: var(--border-coral-09);
    color: var(--coral);
    border: 1px solid var(--border-coral-22);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
  }
  #k-modal .k-modal-meta-star { font-size: 13px; }

  /* ── Titre produit ───────────────────────────────────────── */
  #k-modal .k-modal-name-row { margin-top: 14px; }
  #k-modal .k-modal-info h2 { font-size: clamp(21px, 1.65vw, 28px); line-height: 1.18; font-weight: 600; letter-spacing: -.02em; }

  #k-modal .k-modal-desc { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-muted); overflow: visible; }

  /* ── Chantier 2 — Bloc prix : "15 700 KMF  20 933 KMF" ─────
     formatPriceMarkup() (b-modal.js) split la valeur et l'unité en deux spans
     avec un espace HTML entre. Sur mobile : pas de règle dédiée, rendu naturel
     "15 700 KMF". Sur desktop (ci-dessous) : styling fin distinct. */
  /* PR-D1 — Prix massif mockup : clamp élevé, old-price barré plus lisible */
  #k-modal .k-modal-price-row { margin-top: 12px; gap: 10px; align-items: baseline; flex-wrap: wrap; }
  #k-modal .k-modal-price { font-size: clamp(28px, 2.2vw, 36px); font-weight: 850; color: var(--coral); line-height: 1; display: inline-flex; align-items: baseline; gap: 6px; }
  #k-modal .k-modal-price-val { font-size: inherit; font-weight: inherit; color: inherit; }
  #k-modal .k-modal-price-unit { font-size: .44em; font-weight: 600; color: var(--coral); letter-spacing: .04em; text-transform: uppercase; }
  #k-modal .k-modal-old-price { font-size: 16px; color: var(--text-light); text-decoration: line-through; }
  #k-modal .k-modal-old-price .k-modal-price-val,
  #k-modal .k-modal-old-price .k-modal-price-unit { color: inherit; font-weight: 400; text-decoration: inherit; }
  #k-modal .k-modal-old-price .k-modal-price-unit { font-size: .82em; letter-spacing: .04em; }

  /* ── Trust, Partage, Specs ───────────────────────────────── */
  .k-modal-trust { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--sand-dark); margin-top: 6px; }
  .k-modal-trust-item { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
  .k-modal-trust-item svg { width: 16px; height: 16px; color: var(--ocean); stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
  #k-modal .k-modal-trust { gap: 10px; flex-wrap: wrap; padding: 11px 0; }
  #k-modal .k-modal-trust-item { padding: 6px 9px; border-radius: 999px; background: var(--sand); border: 1px solid var(--border-text-06); }
  .k-modal-share-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--sand-dark); margin-top: 8px; }
  .k-modal-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--sand); color: var(--text); transition: background .12s, border-color .12s; }
  .k-modal-share-btn:hover { background: var(--sand-warm); border-color: var(--coral); }
  .k-modal-share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  .k-modal-share-btn--wa { background: var(--whatsapp); color: var(--white); border-color: var(--whatsapp); }
  .k-modal-share-btn--wa:hover { background: var(--green-positive); border-color: var(--green-positive); }
  #k-modal .k-modal-share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0; }
  #k-modal .k-modal-share-btn { justify-content: center; min-height: 38px; padding: 8px 10px; }
  /* PR-M3 — B-M-10 : specs masquées si absent du produit (k-modal--has-specs posé par ModalViewModel) */
  .k-modal--has-specs .k-modal-specs { display: block; border-top: 1px solid var(--sand-dark); margin-top: 10px; padding-top: 8px; }
  .k-modal-spec-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); transition: color .12s; }
  .k-modal-spec-toggle:hover { color: var(--coral); }
  .k-modal-spec-toggle-arrow { width: 18px; height: 18px; transition: transform .2s var(--ease); color: var(--text-muted); stroke: currentColor; fill: none; stroke-width: 2; }
  .k-modal-spec-toggle.is-open .k-modal-spec-toggle-arrow { transform: rotate(180deg); }
  .k-modal-spec-body { display: none; padding: 0 0 12px; }
  .k-modal-spec-body.is-open { display: block; animation: k-spec-reveal .2s var(--ease); }
  @keyframes k-spec-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .k-modal-spec-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .k-modal-spec-table tr:nth-child(even) { background: var(--sand); }
  .k-modal-spec-table td { padding: 7px 10px; }
  .k-modal-spec-table td:first-child { font-weight: 600; color: var(--text-muted); white-space: nowrap; width: 35%; }
  .k-modal--has-specs #k-modal .k-modal-specs { margin-top: 8px; border-top: 1px solid var(--sand-dark); }

  /* ── Recherche interne ───────────────────────────────────── */
  #k-modal .k-modal-inner-search { flex: 0 0 auto; margin: 10px 0 8px; border-radius: 14px; padding: 10px 16px; }
  .k-modal-inner-search-input { font-size: 14px; }
  .k-modal-search-dropdown { margin: 0 0 8px; max-height: 260px; }
  #k-modal .k-modal-search-dropdown { flex: 0 0 auto; max-height: 260px; }

  /* ── Actions : col droite, row 2, sticky bas ─────────────── */
  #k-modal .k-modal-product-zone .k-modal-actions {
    order: unset; /* annule le order mobile */
    grid-column: 2; grid-row: 2;
    position: sticky; bottom: 0; z-index: 70;
    margin: 0; padding: 12px 24px 16px;
    background: rgba(255,255,255,.98);
    border-top: 1px solid rgba(31,48,36,.10);
    box-shadow: 0 -12px 28px var(--border-text-06);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) minmax(190px, 1.15fr);
    grid-template-rows: auto;
    align-items: center; gap: 10px;
  }
  /* PR-D3 — CTA redesign desktop : Acheter vert solid, Ajouter outlined, sous-total coral */
  #k-modal .k-modal-product-zone .k-modal-actions .k-qty { grid-column: 1; grid-row: 1; height: 44px; }
  #k-modal .k-modal-product-zone .k-modal-actions .k-add-cart-btn {
    grid-column: 2; grid-row: 1; height: 44px; border-radius: 999px;
    background: var(--white); color: var(--text); border: 1.5px solid var(--sand-dark);
  }
  #k-modal .k-modal-product-zone .k-modal-actions .k-add-cart-btn:hover {
    border-color: var(--ocean); background: var(--ocean-bg-08);
  }
  #k-modal .k-modal-product-zone .k-modal-actions .k-buy-now-btn {
    grid-column: 3; grid-row: 1; height: 44px; border-radius: 999px;
    background: var(--ocean); color: var(--white);
    font-size: 15px; font-weight: 700;
    box-shadow: 0 4px 14px var(--shadow-ocean-10);
    transition: background .18s, box-shadow .18s, transform .1s;
  }
  #k-modal .k-modal-product-zone .k-modal-actions .k-buy-now-btn:hover {
    background: var(--ocean-dark); box-shadow: 0 6px 20px var(--shadow-ocean-10);
  }
  #k-modal .k-modal-subtotal {
    grid-column: 1 / -1; grid-row: 2;
    text-align: right; padding: 2px 2px 0;
    font-size: 12px; color: var(--text-muted);
  }
  #k-modal .k-modal-subtotal strong { color: var(--coral); font-size: 14px; font-weight: 700; }

  /* ── Suggestions : pleine largeur SOUS product-zone ─────── */
  #k-modal .k-modal-suggestions,
  #k-modal-suggestions.k-modal-suggestions--desktop-list {
    order: unset; /* annule le order mobile */
    flex: 0 0 auto; overflow: visible; min-height: unset;
    display: block; width: 100%;
    padding: 28px 36px 48px;
    border-top: 2px solid var(--sand-dark);
    background: linear-gradient(180deg, var(--sand) 0%, var(--sand) 100%);
    margin-top: 0;
  }
  #k-modal-suggestions.k-modal-suggestions--desktop-list #k-sug-rail.k-sug-rail--desktop-list {
    overflow: visible; height: auto; padding: 0;
  }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-grid,
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-grid--same,
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-grid--other {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px; flex-direction: unset; padding: 0;
  }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-card {
    display: flex; flex-direction: column;
    grid-template-columns: unset; grid-template-rows: unset;
    min-height: unset; height: auto; border-radius: 14px; overflow: hidden;
    background: var(--white); box-shadow: 0 4px 16px rgba(31,48,36,.07);
    transition: transform .18s, box-shadow .18s; cursor: pointer;
  }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(31,48,36,.12); }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-card-img { width: 100%; height: auto; aspect-ratio: 1; grid-column: unset; grid-row: unset; border-radius: 0; }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-card-name { grid-column: unset; grid-row: unset; padding: 8px 10px 4px; font-size: 13px; }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-card-bottom { grid-column: unset; grid-row: unset; padding: 0 10px 10px; }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-title { position: static; margin-bottom: 16px; padding: 0 0 10px; border-bottom: 1px solid var(--sand-dark); background: none; }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-chips { position: static; background: none; padding: 0 0 16px; margin-bottom: 0; }
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-section + .k-sug-section { margin-top: 32px; }

  /* ── Hover & focus ───────────────────────────────────────── */
  #k-modal .k-modal-product-zone .k-modal-actions .k-add-cart-btn:hover { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(100,175,90,.1); }
  .k-msearch-item:hover { background: var(--sand); }
  .k-msearch-footer:hover { background: var(--sand); color: var(--coral); }
  .k-modal-search-clear:hover { background: var(--border); color: var(--text); }
  .k-msearch-group-more:hover { background: var(--sand); color: var(--coral-dark); }
  .k-msearch-recent-item:hover { background: var(--sand); }
  .k-msearch-recent-remove:hover { background: var(--sand-dark); color: var(--text); }
  .k-modal, .k-modal * { -webkit-tap-highlight-color: transparent; }
  .k-modal-carousel:focus, .k-modal-carousel:focus-visible,
  .k-modal-slide:focus, .k-modal-slide:focus-visible { outline: none; box-shadow: none; }
  button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid rgba(42,122,62,.45); outline-offset: 2px; }
}



/* ── Suggestions desktop ≥1200px : grille plus dense ─────── */
@media (min-width: 1200px) {
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-grid,
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-grid--same,
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-grid--other { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}



/* ══════════════════════════════════════════════════════════════
   §6. LAYOUT DESKTOP — Pleine page Temu-style (source de vérité grille)
   ──────────────────────────────────────────────────────────────
   Anciennement §7. Promu source de vérité unique pour le layout desktop.
   Déclare grid-template-columns une seule fois (invariant B-M-11).
   v3 : colonnes 43 % image / 57 % détails
        padding details/actions : clamp(24px, 4vw, 64px)
        → 36px à 900px · 48px à 1200px · 64px à 1600px+
   Sous-blocs : ≥900px (base) + 900–1120px (grille serrée 44/56)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* ── Masquer le footer quand le modal est ouvert ─────────── */
  body.modal-open .k-footer,
  body.modal-open footer { display: none; }

  /* ── Overlay : fond blanc plein, sans padding ni flou ────── */
  .k-modal-overlay.open {
    padding: 0;
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* ── Shell : 100vw × 100dvh, sans carte flottante ────────── */
  #k-modal.k-modal {
    width: 100vw;
    max-width: none; /* Contre-balance le max-width de desktop-commerce-skeleton.css */
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100dvh;
    flex: 0 0 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  /* Side-cart : glisse par-dessus, modal reste 100vw */
  body.modal-has-cart #k-modal.k-modal {
    width: 100vw;
    margin-right: 0;
    transition: none;
  }

  /* ── Grid : 43 % image · 57 % détails ───────────────────── */
  /* min 380px sur col image : empêche la col droite de réduire
     l'image en dessous d'une largeur viable (fix tronquage sujet). */
  /* FIX : height fixe sur product-zone ET details pour que la col droite
     ne puisse pas grandir au-delà du viewport et empiéter sur l'image.
     min-height seul laissait le grid grandir si le contenu droit est long
     (ex: thermos avec économie + description + tabs paiement).
     La col details gère son propre scroll via overflow-y:auto. */
  #k-modal .k-modal-product-zone {
    height: calc(100dvh - 58px);
    max-height: calc(100dvh - 58px);
    overflow: hidden;
    grid-template-columns: minmax(380px, 43%) minmax(0, 57%);
  }

  /* ── Image : pleine hauteur, jamais réduite par la col droite ── */
  #k-modal .k-modal-product-zone .k-modal-img-wrap {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    max-width: 100%;
    width: 100%;
  }

  /* ── Détails : col droite confinée, scroll interne ── */
  #k-modal .k-modal-product-zone .k-modal-details {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 clamp(24px, 4vw, 64px);
  }

  /* ── Actions sticky : padding-inline aligné sur les détails  */
  #k-modal .k-modal-product-zone .k-modal-actions {
    padding-left:  clamp(24px, 4vw, 64px);
    padding-right: clamp(24px, 4vw, 64px);
    /* Annule le grid-template étroit hérité des §4-§5 */
    grid-template-columns: auto minmax(160px, 1fr) minmax(190px, 1.15fr);
  }

  /* ── Topbar : séparation nette sur fond blanc ────────────── */
  #k-modal .k-modal-topbar {
    border-bottom-color: var(--border);
    box-shadow: var(--elev-1);
  }

  /* ── FIX Bug : conteneurs flex-column qui ne s'étirent pas ──
     Sans width:100% explicite, les enfants flex-column de
     .k-modal-info prennent leur largeur naturelle (~490px)
     au lieu d'occuper la colonne disponible (~841px).
     Cf. BOUTIQUE_MODAL_ARCHITECTURE.md §7 Piège 1. ────────── */
  #k-modal .k-modal-product-zone .k-modal-info,
  #k-modal .k-modal-product-zone .k-modal-info > * {
    width: 100%;
  }
  #k-modal .k-modal-product-zone .k-modal-info {
    align-items: stretch;
  }
  #k-modal .k-modal-product-zone .k-modal-delivery-opts,
  #k-modal .k-modal-product-zone .k-modal-payment-opts {
    width: 100%;
  }
}

/* ── Override 900–1120px (§4) ───────────────────────────────── */
@media (min-width: 900px) and (max-width: 1120px) {
  #k-modal.k-modal                          { width: 100vw; }
  body.modal-has-cart #k-modal.k-modal      { width: 100vw; margin-right: 0; }
  #k-modal .k-modal-product-zone            { grid-template-columns: minmax(340px, 44%) minmax(0, 56%); }
  #k-modal .k-modal-product-zone .k-modal-details  { padding: 0 clamp(18px, 3vw, 32px); }
  #k-modal .k-modal-product-zone .k-modal-actions  {
    padding-left:  clamp(18px, 3vw, 32px);
    padding-right: clamp(18px, 3vw, 32px);
    /* Réhabilite le layout 2 boutons col droite étroite */
    grid-template-columns: auto minmax(140px, 1fr) minmax(170px, 1.1fr);
    grid-template-rows: auto;
  }
  #k-modal .k-modal-product-zone .k-modal-actions .k-buy-now-btn {
    grid-column: 3; grid-row: 1;
  }
}


/* ══════════════════════════════════════════════════════════════════
   MODAL — Règles desktop & interactions
   Migré depuis boutique-desktop.css + interactions.css
   + desktop-commerce-skeleton.css (Sprint 4 — S4.5)
   Source de vérité modale → modal.css
   ══════════════════════════════════════════════════════════════════ */

/* ── Scroll fluide (ex interactions.css) ─────────────────────── */
.k-modal-scroll { scroll-behavior: smooth; }

/* ── Bouton retour en haut dans la modale (ex interactions.css) ── */
.k-modal-back-top { position:fixed; bottom:20px; right:20px; width:44px; height:44px; border-radius:50%; background:var(--white); color:var(--coral); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); z-index:10; border:none; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; transform:translateY(8px); font-size:20px; }
.k-modal-back-top.show { opacity:1; pointer-events:auto; transform:translateY(0); }

/* ── Topbar produit — infos compactes (ex interactions.css) ───── */
.k-modal-topbar-product-name  { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-modal-topbar-product-price { font-size:12px; font-weight:700; color:var(--coral); }
.k-modal-topbar-thumb         { flex:0 0 38px; width:38px; height:38px; border-radius:8px; overflow:hidden; background:var(--sand); }

/* ── Desktop : taille & ombre modale (ex desktop-commerce-skeleton.css) ── */
@media (min-width: 900px) {
  .k-modal {
    max-width: min(1040px, calc(100vw - 56px));
    border-radius: 26px;
    /* PALETTE-FIX-01 */
    box-shadow: 0 30px 80px rgba(100,175,90, .18);
  }

  .k-modal-img-wrap {
    cursor: default;
  }

  .k-modal-img-wrap:hover .k-modal-slide,
  .k-modal-img-wrap:hover #k-modal-img {
    transform: none;
  }
}

/* ── Desktop : focus visible modale (ex boutique-desktop.css §11) ─ */
@media (min-width: 900px) {
  .k-modal, .k-modal * {
    -webkit-tap-highlight-color: transparent;
  }

  .k-modal-carousel:focus, .k-modal-carousel:focus-visible,
  .k-modal-slide:focus,    .k-modal-slide:focus-visible {
    outline: none;
    box-shadow: none;
  }
}


/* ── modal-media.css ─────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — modal-media.css
   Carousel, image wrap, zoom, fullscreen, bouton favori,
   recently viewed, keyboard hint.
   Découpage Sprint 6 — S6.2 (extrait de modal.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── IMAGE + CAROUSEL ────────────────────────────────────────── */
/* Source de vérité unique pour .k-modal-img-wrap.
   top:auto et z-index:1 consolidés depuis interactions.css (fix carousel overlay mobile).
   background:var(--sand) retenu (interactions.css surchargeait le gradient — intentionnel). */
.k-modal-img-wrap {
  position: relative; flex: 0 0 auto; height: 45vh; max-height: 450px;
  top: auto; z-index: 1;
  background: var(--sand); overflow: hidden;
}
/* ── Skeleton shimmer pendant le chargement de l'image ───────
   Couche pseudo-élément animée. Disparaît dès qu'une image
   .k-modal-slide a la classe is-loaded (posée par b-modal.js
   sur l'event load de l'image). */
.k-modal-img-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(244,241,236,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(244,241,236,0) 100%);
  background-size: 200% 100%;
  animation: k-modal-shimmer 1.4s linear infinite;
  pointer-events: none;
  transition: opacity .3s;
}
.k-modal-img-wrap.is-image-loaded::before { opacity: 0; animation: none; }
@keyframes k-modal-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ── Zone image — hauteur mobile (mobile-first, sans media query) ──────
   Sprint 1 (30/05/2026) : les deux anciens blocs @media à largeur max
   (petits et très petits écrans) ont été supprimés — violation I-7 / M-MOB-11.
   Remplacés par cette règle base unique : 45vh / 400px couvre tous
   les mobiles sans fragmentation. Le desktop écrase via @media min-width 900px. */
.k-modal-img-wrap { height: 45vh; max-height: 400px; }
.k-modal-carousel { width: 100%; height: 100%; overflow: hidden; }
.k-modal-carousel-track { display: flex; height: 100%; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.k-modal-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block; background: transparent; padding: 0; max-width: 100%; max-height: 100%;
}
.k-modal-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.k-modal-dots:empty { display: none; }
.k-modal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--overlay-white-50); transition: all .2s; }
.k-modal-dot.is-active { background: var(--white); transform: scale(1.3); }
.k-modal-thumbs { display: none; } /* visible desktop uniquement */

/* ── COMPTEUR "3/12" mobile (Temu-style) ─────────────────────
   S'affiche en bas à droite de l'image quand le produit a > 5 images.
   Plus lisible que des dots quand il y en a beaucoup. */
.k-modal-counter {
  display: none;
  position: absolute; bottom: 10px; right: 10px; z-index: 3;
  padding: 3px 10px; min-width: 38px; text-align: center;
  background: var(--overlay-dark-md); color: var(--white);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border-radius: 999px; backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.k-modal-counter.is-visible { display: block; }

/* ── BOUTON "VOIR EN GRAND" — mobile, bas-gauche de l'image ──────
   Pill semi-transparent injecté par b-modal-image-ux.js.
   Masqué sur desktop (le zoom loupe suffit). */
.k-modal-view-full {
  position: absolute; bottom: 12px; left: 10px; z-index: 3; /* S2.3 — bottom revient à 12px ; était 28px pour éviter la zone de chevauchement margin-top:-20px, supprimée en S2.2 */
  display: flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  background: var(--overlay-dark-md); color: var(--white);
  font-size: 11px; font-weight: 600;
  border: none; border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.k-modal-view-full svg { width: 13px; height: 13px; flex-shrink: 0; }
@media (min-width: 900px) {
  .k-modal-view-full { display: none; }
}

/* ── EDGE-TO-EDGE mobile — supprimé Sprint 1 (30/05/2026)
   Les règles hauteur-image à largeur max ont été fusionnées dans la règle base
   .k-modal-img-wrap ci-dessus. Plus de fragmentation par breakpoint. ──── */


/* ── BOUTON FAVORI MODALE (top-right de la zone détails) ─────────────
   FIX favori absent dans modale produit : bouton ❤️ universel
   mobile + desktop, posé sur la zone blanche details.
   FIX: env(safe-area-inset-top) retiré — le bouton est positionné
   relativement à .k-modal-details (position:relative) qui se trouve
   SOUS la topbar et la zone image ; utiliser safe-area-inset-top ici
   ajoutait un décalage erroné sur iPhone à encoche (44-59 px). */
.k-modal-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px; height: 42px;
  background: var(--surface-sand-94);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  box-shadow: var(--elev-1);
  cursor: pointer; z-index: 4;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1),
              background .2s var(--ease),
              box-shadow .2s var(--ease);
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.k-modal-fav-btn:active { transform: scale(1.12); }
.k-modal-fav-btn.liked {
  background: var(--pink);
  box-shadow:
    0 0 0 2px var(--white),
    0 0 0 4px rgba(233,30,99,.35),
    0 2px 10px rgba(233,30,99,.30);
  transform: scale(1.05);
}
.k-modal-fav-btn.k-pop { animation: k-modal-fav-pop .3s var(--ease, ease); }
@keyframes k-modal-fav-pop {
  0%   { transform: scale(1.05); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1.05); }
}
@media (hover: hover) and (pointer: fine) {
  .k-modal-fav-btn:hover { transform: scale(1.08); box-shadow: var(--elev-2); }
  .k-modal-fav-btn.liked:hover { transform: scale(1.10); }
}
@media (min-width: 900px) {
  .k-modal-fav-btn { top: 14px; right: 14px; width: 46px; height: 46px; font-size: 22px; }
}

/* ── FULLSCREEN IMAGE (mobile, tap on image) ─────────────────
   Overlay plein écran qui laisse le navigateur gérer le pinch-zoom
   nativement (touch-action: pinch-zoom sur l'image).
   Tap simple ferme. Swipe horizontal change d'image. */
.k-modal-fullscreen {
  position: fixed; inset: 0; z-index: 600;
  background: var(--text);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
}
.k-modal-fullscreen.is-open { opacity: 1; pointer-events: auto; }
.k-modal-fullscreen-close {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-white-92); color: var(--text);
  border: none; display: flex; align-items: center; justify-content: center;
  z-index: 2; cursor: pointer; box-shadow: 0 2px 12px var(--overlay-black-lg);
  -webkit-tap-highlight-color: transparent;
}
.k-modal-fullscreen-close svg { width: 18px; height: 18px; }
.k-modal-fullscreen-counter {
  position: fixed; top: calc(20px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px; background: var(--overlay-dark-md);
  color: var(--white); font-size: 12px; font-weight: 600;
  border-radius: 999px; z-index: 2; pointer-events: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.k-modal-fullscreen-track {
  display: flex; width: 100%; height: 100%;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.k-modal-fullscreen-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.k-modal-fullscreen-slide img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; user-select: none;
  /* pinch-zoom natif autorisé */
  touch-action: pinch-zoom;
  -webkit-user-drag: none;
}

/* Désactivé sur desktop : le zoom-on-hover existant suffit */
@media (min-width: 900px) {
#k-modal .k-modal-fullscreen { display: none; }
}

/* ── Desktop : zoom carousel (ex boutique-desktop.css) ─────────── */
@media (min-width: 900px) {
  #k-modal .k-modal-carousel { cursor: zoom-in; }

  #k-modal .k-modal-slide {
    transition: transform .25s var(--ease);
  }
  #k-modal .k-modal-carousel:hover
  .k-modal-carousel-track
  .k-modal-slide:not(.is-hidden) {
    transform: scale(1.02);
  }
}

/* ── Desktop : Recently Viewed (ex boutique-desktop.css) ────────── */
@media (min-width: 900px) {
  .k-modal-recent {
    padding: 18px 24px 28px;
    border-top: 1px solid var(--sand-dark);
    background: var(--white);
  }
  .k-modal-recent-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 14px;
    letter-spacing: -.01em;
  }
  .k-modal-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
  }
  .k-modal-recent-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border-text-08);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .12s, border-color .12s, box-shadow .12s;
    padding: 0;
    text-align: left;
    min-width: 0;
  }
  .k-modal-recent-card:hover {
    transform: translateY(-2px);
    border-color: rgba(200,92,45,.4);
    box-shadow: 0 6px 16px var(--border-text-08);
  }
  .k-modal-recent-img {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--sand), var(--sand-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .k-modal-recent-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 6px;
    display: block;
  }
  .k-modal-recent-name {
    font-size: 12px;
    line-height: 1.3;
    color: var(--text);
    padding: 6px 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
  }
  .k-modal-recent-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--coral);
    padding: 4px 8px 8px;
  }
}

/* ── Desktop : Keyboard hint navigation clavier (ex boutique-desktop.css) ── */
@media (min-width: 900px) {
  .k-modal-keyboard-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted, var(--text-form-light));
    opacity: .7;
    pointer-events: none;
    white-space: nowrap;
  }
  .k-modal-keyboard-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    background: var(--surface-alt, var(--surface-warm-cool));
    border: 1px solid var(--border, var(--border-light));
    border-radius: 3px;
    font-size: 11px;
    font-family: inherit;
    line-height: 1.4;
  }
  .k-modal-keyboard-hint span { margin-right: 8px; }
}



/* ── modal-product.css ───────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — modal-product.css
   Infos produit, social proof, recherche interne, suggestions,
   livraison, trust bar, variantes, guide des tailles,
   zones desktop enrichies (ModalViewModel).
   Découpage Sprint 6 — S6.2 (extrait de modal.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── INFOS PRODUIT ───────────────────────────────────────────── */
.k-modal-details {
  /* S2.2 — suppression du margin-top:-20px (rustine qui propageait une cascade
     de compensations : padding-top clamp(20px), bottom:28px sur .k-modal-view-full).
     Le chevauchement visuel est désormais porté par border-radius + l'image qui
     garde toute sa hauteur. Positionnement structurel, zéro valeur magique. */
  box-sizing: border-box; max-width: 100%;
  flex: 0 0 auto; overflow: visible; min-height: 0;
  background: var(--white); border-radius: 20px 20px 0 0;
  margin-top: 0; position: relative; z-index: 2;
  box-shadow: 0 -4px 20px var(--border-text-06);
}
.k-modal-promo-badge {
  display: none; position: absolute; top: 8px; left: 8px;
  background: var(--coral); color: var(--white);
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px;
  letter-spacing: .2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.k-modal-promo-badge.show { display: inline-block; }
/* PR-D1 — Desktop : badge ancré sur l'image (pas sur le thumb strip).
   Le slide a padding-left:82px → contenu image commence à 82px.
   left: 94px = 82px strip + 12px offset = badge collé au bord gauche de l'image. */
@media (min-width: 900px) {
  #k-modal .k-modal-promo-badge {
    top: 12px; left: 94px;
    font-size: 13px; padding: 5px 12px; border-radius: 7px;
  }
}
.k-modal-info { box-sizing: border-box; padding: 16px 12px 12px; display: flex; flex-direction: column; } /* S2.3 — padding-top revient à 16px ; le clamp(20px) compensait margin-top:-20px supprimé en S2.2 */
.k-modal-info h2 {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  line-height: 1.2; letter-spacing: -.01em; margin: 0; color: var(--text);
  font-variation-settings: 'opsz' 18;
}
.k-modal-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.k-modal-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; flex-wrap: nowrap; }
.k-modal-price { font-family: var(--font); font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -.015em; }
/* F1 — prix promo en coral sur mobile (classe posée par b-modal.js openModal) */
.k-modal--has-promo .k-modal-price { color: var(--coral); font-size: clamp(20px, 5vw, 26px); font-weight: 700; }
/* F2 — ancien prix sur même ligne, aligné baseline, jamais stacked */
.k-modal-old-price { font-size: 13px; color: var(--text-light); text-decoration: line-through; white-space: nowrap; flex-shrink: 0; }
.k-modal-meta { display: flex; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.k-modal-meta span { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; background: var(--sand); border-radius: 50px; }
/* ── SOCIAL PROOF — badges vendus/note, conditionnels (données backend) ──
   Si product.sold_count, product.rating ou product.rank sont absents,
   injectSocialProof() laisse .k-modal-meta vide et il est display:none.
   Aucun chiffre inventé. */
.k-modal-meta:empty { display: none; }
#k-modal .k-modal-meta-rank {
  background: var(--coral-bg);
  color: var(--coral);
  border: 1px solid var(--coral-border);
  font-weight: 700;
}
.k-modal-meta-star { color: var(--star-gold); font-size: 12px; }

/* ── BARRE RECHERCHE INTERNE ─────────────────────────────────── */
.k-modal-inner-search {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px 4px; padding: 9px 14px;
  background: var(--sand); border-radius: 12px;
  border: 1.5px solid transparent;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.k-modal-inner-search:focus-within { border-color: var(--ocean); background: var(--white); box-shadow: 0 0 0 3px rgba(100,175,90,.1); }
.k-modal-inner-search-icon { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.k-modal-inner-search-input { flex: 1; border: none; background: transparent; font-size: 13px; font-family: var(--font); color: var(--text); outline: none; min-width: 0; }
.k-modal-inner-search-input::placeholder { color: var(--text-muted); }
.k-modal-inner-search-hint { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; opacity: 0; transition: opacity .2s; pointer-events: none; }
.k-modal-inner-search:focus-within .k-modal-inner-search-hint { opacity: 1; }
.k-sug-card.search-hidden { display: none; }
.k-modal-search-clear {
  display: none; width: 26px; height: 26px; border: none;
  background: var(--sand-dark); border-radius: 50%; color: var(--text-muted);
  font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background .12s, color .12s, transform .12s;
  flex-shrink: 0; align-items: center; justify-content: center; padding: 0;
}
.k-modal-search-clear:active { transform: scale(.88); }
.k-modal-inner-search.has-value .k-modal-search-clear { display: flex; }
.k-modal-inner-search.has-value .k-modal-inner-search-hint { display: none; }

/* ── DROPDOWN RÉSULTATS SEARCH ───────────────────────────────── */
.k-modal-search-dropdown {
  display: none; margin: 0 12px 8px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--elev-3); max-height: 340px;
  overflow-y: auto; overflow-x: hidden; z-index: 20; position: relative;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  animation: k-msearch-drop-in .18s var(--ease);
}
.k-modal-search-dropdown.open { display: block; }
@keyframes k-msearch-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.k-msearch-count { padding: 8px 14px 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--sand-dark); }
.k-msearch-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; transition: background .12s; -webkit-tap-highlight-color: transparent; }
.k-msearch-item + .k-msearch-item { border-top: 1px solid var(--sand-dark); }
.k-msearch-item:active { background: var(--sand-dark); }
.k-msearch-item-img { width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: var(--sand); flex-shrink: 0; padding: 3px; }
.k-msearch-item-info { flex: 1; min-width: 0; }
.k-msearch-item-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.k-msearch-item-cat { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-msearch-item-right { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.k-msearch-item-price { font-size: 14px; font-weight: 700; color: var(--coral); white-space: nowrap; }
.k-msearch-item-promo { font-size: 10px; font-weight: 700; color: var(--white); background: var(--coral); padding: 1px 6px; border-radius: 50px; }
.k-msearch-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.k-msearch-empty-icon { font-size: 36px; margin-bottom: 8px; line-height: 1; opacity: .6; }
.k-msearch-footer { padding: 11px 14px; border-top: 1px solid var(--sand-dark); text-align: center; font-size: 12px; font-weight: 600; color: var(--ocean-dark); cursor: pointer; transition: background .12s, color .12s; -webkit-tap-highlight-color: transparent; }
.k-msearch-footer:active { background: var(--sand); }
.k-msearch-group + .k-msearch-group { border-top: 1.5px solid var(--sand-dark); }
.k-msearch-group-header { display: flex; align-items: center; gap: 6px; padding: 9px 14px 5px; background: var(--sand); }
.k-msearch-group-emoji { font-size: 14px; line-height: 1; flex-shrink: 0; }
.k-msearch-group-label { font-size: 12px; font-weight: 700; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-msearch-group-count { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--white); padding: 1px 7px; border-radius: 10px; flex-shrink: 0; }
.k-msearch-group-more { padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--coral); cursor: pointer; transition: background .12s; -webkit-tap-highlight-color: transparent; }
.k-msearch-group-more:active { background: var(--sand); }
.k-msearch-recents-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.k-msearch-recents-clear { font-size: 11px; font-weight: 600; color: var(--coral); background: transparent; border: none; cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: background .12s; text-transform: none; letter-spacing: 0; }
.k-msearch-recents-clear:active { background: var(--sand); }
.k-msearch-recent-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .12s; -webkit-tap-highlight-color: transparent; }
.k-msearch-recent-item + .k-msearch-recent-item { border-top: 1px solid var(--sand-dark); }
.k-msearch-recent-item:active { background: var(--sand-dark); }
.k-msearch-recent-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-light); }
.k-msearch-recent-label { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-msearch-recent-remove { width: 24px; height: 24px; border: none; background: transparent; color: var(--text-light); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, color .12s; }
.k-msearch-recent-remove:active { background: var(--sand-dark); color: var(--text); }

/* ── SUGGESTIONS MOBILE ──────────────────────────────────────── */
.k-modal-suggestions { padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); } /* FIX Bug 2: padding porté ici depuis .k-modal-scroll */
.k-sug-section { padding: 14px 0 6px; }
.k-sug-section + .k-sug-section { margin-top: 6px; border-top: 1px solid var(--sand); padding-top: 16px; }
.k-sug-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(100,175,90,.10), rgba(100,175,90,.04));
  border-left: 3px solid var(--ocean, var(--ocean));
  border-radius: 0 10px 10px 0;
}
.k-sug-title-icon {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(100,175,90,.20), rgba(100,175,90,.08));
  flex-shrink: 0;
}
.k-sug-title-text {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text, var(--text));
}
.k-sug-title::after { display: none; }
.k-sug-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 0 10px; }

.k-sug-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--sand-dark); background: var(--white); font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; transition: all .2s; white-space: nowrap; }
.k-sug-chip.is-active { background: transparent; border-color: var(--coral); color: var(--text); font-weight: 700; }
/* Fond couleur catégorie pour le chip actif — cohérence avec le rail principal */
#k-modal-suggestions[data-cat="Mode & Beauté"] .k-sug-chip.is-active { background: var(--cat-mode-bg); }
#k-modal-suggestions[data-cat="Maison"]         .k-sug-chip.is-active { background: var(--cat-maison-bg); }
#k-modal-suggestions[data-cat="Tech"]           .k-sug-chip.is-active { background: var(--cat-tech-bg); }
#k-modal-suggestions[data-cat="Bricolage"]      .k-sug-chip.is-active { background: var(--cat-brico-bg); }
#k-modal-suggestions[data-cat="Créations personnelles"] .k-sug-chip.is-active { background: var(--cat-perso-bg); }
#k-modal-suggestions[data-cat="Auto"]           .k-sug-chip.is-active { background: var(--cat-auto-bg); }
.k-sug-card.subcat-hidden { display: none; }
.k-sug-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 2px; }
.k-sug-grid .k-sug-card { display: flex; flex-direction: column; height: auto; overflow: visible; width: 100%; }
.k-sug-grid .k-sug-card-img { aspect-ratio: 1; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--sand) 0%, var(--sand) 100%); border-radius: 10px 10px 0 0; }
.k-sug-grid .k-sug-card-img img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 6px; display: block; }
.k-sug-grid .k-sug-card-name { font-size: 13px; line-height: 1.3; padding: 6px 8px 2px; color: var(--text); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.k-sug-grid .k-sug-card-price { padding: 0 8px 8px; font-size: 14px; font-weight: 700; color: var(--coral); }
.k-sug-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0; flex-shrink: 0; }
/* Source de vérité .k-sug-step = bouton ± rond (stepper quantité).
   interactions.css avait une homonyme sémantiquement différente → renommée .k-sug-order-step (phase7). */
.k-sug-step { width: 28px; height: 28px; border-radius: 50%; background: var(--sand); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--ocean); cursor: pointer; flex-shrink: 0; transition: background .15s; }
.k-sug-step:active { background: var(--sand-dark); transform: scale(.9); }
.k-sug-qty { min-width: 22px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ocean); user-select: none; }
.k-sug-card-bottom { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 8px; gap: 4px; }
.k-sug-card-price { font-size: 13px; font-weight: 700; color: var(--coral); flex: 1; min-width: 0; white-space: nowrap; } /* BUGFIX: white-space:nowrap empêche le prix de se couper sur 2 lignes (ex: 12300 / KMF) */
/* Source de vérité modale — .k-sug-add dans le contexte modal produit.
   32×32px, transparent, sans bordure. Actif via b-modal.js.
   Voir interactions.css pour la variante catalogue (40×40, rond, fond blanc). */
.k-sug-add { background: transparent; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; touch-action: manipulation; }
.k-sug-add:active { transform: scale(.88); }
.k-sug-add img { width: 28px; height: 28px; display: block; mix-blend-mode: multiply; }
.k-sug-promo-badge { position: absolute; top: 5px; left: 5px; background: var(--coral); color: var(--white); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 50px; pointer-events: none; z-index: 2; }

/* ── F3 — LIVRAISON MOBILE ───────────────────────────────────── */
/* Encart minimal toujours présent sur mobile.
   Invariant : afficher "Livraison relais" en fallback si pas de données.
   Masqué desktop : les blocs enrichis §6 prennent le relais (b-modal-desktop-enhancers.js). */
.k-modal-delivery-mobile {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 14px 0;
  padding: 9px 12px;
  background: var(--green-bg); border-radius: 10px;
  font-size: 12px; color: var(--text);
}
.k-modal-delivery-mobile-icon { font-size: 16px; flex-shrink: 0; }
.k-modal-delivery-mobile-label { font-weight: 600; }
.k-modal-delivery-mobile-delay { color: var(--text-muted); margin-left: 4px; }
@media (min-width: 900px) { .k-modal-delivery-mobile { display: none; } }

/* ── F4 — TRUST BAR MOBILE ──────────────────────────────────── */
/* 3 pills horizontaux au-dessus de .k-modal-actions.
   Masqué desktop : le trust bar §6 enrichi (b-modal-desktop-enhancers.js) prend le relais.
   FIX: flex-shrink:0 — la trust bar est enfant flex direct de #k-modal après le déplacement
   des actions par setupModal() ; sans cette propriété elle peut être écrasée sur petits écrans.
   FIX: pas de border-top ici — .k-modal-actions en a déjà un ; double bordure supprimée. */
.k-modal-trust-mobile {
  display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap;
  gap: 6px; padding: 8px 14px 4px;
  flex-shrink: 0;
}
.k-modal-trust-mobile-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--sand); border: 1px solid rgba(0,0,0,.08);
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
@media (min-width: 900px) { .k-modal-trust-mobile { display: none; } }

/* ══════════════════════════════════════════════════════════════
   4. VARIANTES — SKUs couleur + grille tailles / pointures
   Classes couleur : .k-vg / .k-vg-skus / .k-sku
   Classes taille  : .k-vg / .k-vg-sizes / .k-vp
   ══════════════════════════════════════════════════════════════ */

/* Groupe variante */
.k-vg {
  padding: 0 0 4px;
}

/* Label "Couleur · Bleu" */
.k-vg-label {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1;
}
.k-vg-label-type { font-weight: 700; color: var(--text); }
.k-vg-label-sep  { color: var(--text-muted); font-size: 11px; }
.k-vg-label-val  { color: var(--text-muted); font-weight: 400; }

/* ── SKUs couleur ────────────────────────────────────────────── */
.k-vg-skus {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Bouton SKU : image produit + nom couleur en dessous */
.k-sku {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  padding: 3px 3px 6px;
  cursor: pointer;
  width: 68px;
  position: relative;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}

.k-sku img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}
/* F5 — Swatches couleur purs (pas d'image, data-color posé par renderVariants) :
   forme ronde comme Temu. Ne s'applique pas aux cartes image (k-sku avec img). */
.k-sku--color {
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 0;
  justify-content: center;
}

.k-sku-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62px;
  line-height: 1.2;
}

/* Hover */
.k-sku:hover:not(.k-sku--out) {
  border-color: var(--coral);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(200, 92, 45, .18);
}

/* Sélectionné */
.k-sku.k-sku--active {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral);
}
.k-sku--active .k-sku-name {
  color: var(--coral-dark);
  font-weight: 700;
}

/* Épuisé */
.k-sku--out {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
}

/* Slash diagonale sur image épuisé */
.k-sku-slash {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 60px;
  height: 60px;
  border-radius: 7px;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    var(--overlay-black-lg) calc(50% - 1px),
    var(--overlay-black-lg) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* ── Grille tailles / pointures ──────────────────────────────── */
.k-vg-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
}

.k-vp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.k-vp:hover:not(:disabled) {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 5%, var(--white));
}
.k-vp.k-vp--active {
  border-color: var(--coral);
  border-width: 2px;
  background: color-mix(in srgb, var(--coral) 8%, var(--white));
  color: var(--coral-dark);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--coral);
}
.k-vp--out {
  opacity: .38;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Desktop : SKUs et pills légèrement plus grands ──────────── */
/* INTENTIONNEL @768px — composant de sélection produit (dialogue) :
   passe en style élargi avant le breakpoint layout global @900px,
   même logique que .k-sg-overlay/.k-sg-panel ci-dessous et .k-order-modal dans cart.css @600px. */
@media ((min-width: 900px)) {
  .k-sku        { width: 76px; }
  .k-sku img    { width: 68px; height: 68px; }
  .k-sku-name   { max-width: 70px; font-size: 11px; }
  .k-sku-slash  { width: 68px; height: 68px; }
  .k-vg-sizes   { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .k-vp         { height: 44px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   GUIDE DES TAILLES — Overlay
   ══════════════════════════════════════════════════════════════ */

/* Lien/bouton dans le label variante */
.k-vg-size-guide {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ocean, var(--blue-dark));
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.k-vg-size-guide:hover {
  color: var(--ocean-dark, var(--blue-ocean-dark));
  background: color-mix(in srgb, var(--ocean, var(--blue-dark)) 8%, transparent);
}

/* Overlay fond */
.k-sg-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100; /* au-dessus du modal produit */
  background: var(--overlay-dark-md);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease, ease);
}
.k-sg-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* INTENTIONNEL @768px — .k-sg-overlay (guide des tailles) : composant de type dialogue,
   passe en alignement centré avant le breakpoint layout @900px. Voir aussi .k-sku @768px ci-dessus. */
@media ((min-width: 900px)) {
  .k-sg-overlay { align-items: center; }
}

/* Panel */
.k-sg-panel {
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  background: var(--white, var(--white));
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(32px);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 -4px 32px var(--overlay-black-md);
}
.k-sg-overlay.is-open .k-sg-panel { transform: translateY(0); }
/* INTENTIONNEL @768px — .k-sg-panel (guide des tailles) : panneau centré avec scale-in,
   animation de type dialogue avant le layout desktop @900px. */
@media ((min-width: 900px)) {
  .k-sg-panel {
    border-radius: 18px;
    max-height: 80dvh;
    transform: scale(.96);
  }
  .k-sg-overlay.is-open .k-sg-panel { transform: scale(1); }
}

/* Header */
.k-sg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border, var(--border));
  flex-shrink: 0;
}
.k-sg-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, var(--text));
  margin: 0;
}
.k-sg-close {
  width: 34px;
  height: 34px;
  border: none;
  background: var(--surface, var(--gray-bg));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted, var(--text-form-light));
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.k-sg-close svg { width: 16px; height: 16px; }
.k-sg-close:hover { background: var(--border, var(--border)); color: var(--text, var(--text)); }

/* Tabs */
.k-sg-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--border, var(--border));
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.k-sg-tabs::-webkit-scrollbar { display: none; }

.k-sg-tab {
  flex-shrink: 0;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, var(--text-form-light));
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.k-sg-tab.is-active {
  color: var(--coral, var(--coral));
  border-bottom-color: var(--coral, var(--coral));
}

/* Body scrollable */
.k-sg-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px;
}

/* Hint */
.k-sg-hint {
  font-size: 12.5px;
  color: var(--text-muted, var(--text-form-soft-md));
  line-height: 1.55;
  margin: 0 0 14px;
  background: color-mix(in srgb, var(--ocean, var(--blue-dark)) 6%, transparent);
  border-left: 3px solid var(--ocean, var(--blue-dark));
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
}

/* Table wrapper (scroll horizontal sur mobile) */
.k-sg-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid var(--border, var(--border));
}

.k-sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 260px;
}
.k-sg-table thead th {
  background: var(--surface, var(--gray-bg-lighter));
  color: var(--text-muted, var(--text-form-mid));
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
}
.k-sg-table tbody tr {
  border-top: 1px solid var(--border, var(--border-lighter));
  transition: background .1s;
}
.k-sg-table tbody tr:hover { background: var(--surface, var(--sand)); }
.k-sg-table tbody td {
  padding: 9px 12px;
  color: var(--text, var(--text-strong));
  font-weight: 500;
  white-space: nowrap;
}
.k-sg-table tbody td:first-child {
  font-weight: 700;
  color: var(--coral-dark, var(--coral-text-deep));
}

/* Footer */
.k-sg-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border, var(--border-lighter));
  font-size: 12px;
  color: var(--text-muted, var(--text-form-light));
  text-align: center;
  flex-shrink: 0;
  background: var(--surface, var(--sand));
}

/* Prevent body scroll when guide open (stacks with modal-open) */
body.k-sg-open { /* handled by overlay pointer-events */ }


/* ══════════════════════════════════════════════════════════════
   5. ZONES DESKTOP ENRICHIES — Temu-style full page
   Owner : modal.css (propriétaire de tous .k-modal-*)
   Règle I-5 : exclusivement sous @media (min-width: 900px)
   Règle I-3 : aucun hex — uniquement des tokens CSS
   Mobile : toutes ces zones sont display:none (défaut hors MQ)
   ══════════════════════════════════════════════════════════════ */

/* ── Base mobile : masquées par défaut ─────────────────────── */
.k-modal-aed-price,
.k-modal-flash-bar,
.k-modal-stock-bar,
.k-modal-delivery,
.k-modal-payment { display: none; }

/* ── PR-M3 ✅ — Blocs conditionnels par classes ModalViewModel ──
   Invariant B-M-10 : chaque bloc optionnel est révélé UNIQUEMENT
   si la classe contractuelle correspondante est posée sur .k-modal
   par ModalViewModel (cf. js/view-models/modal-view-model.js).
   Zéro logique de sourcing dans le CSS — B-M-09 respecté.

   Couverts par CSS (blocs avec border/padding visibles même vides) :
     .k-modal-aed-price → .k-modal--has-promo (not() ci-dessous)
     .k-modal-flash-bar → .k-modal--has-promo (not() ci-dessous)
     .k-modal-stock-bar → .k-modal--stock-low  (not() ci-dessous)
     .k-modal-specs     → .k-modal--has-specs  (§3 desktop ci-dessous)

   Intentionnellement toujours visibles desktop (blocs fonctionnels) :
     .k-modal-delivery / .k-modal-payment → UX : toujours présents,
       contenus générés par injectDelivery() / injectPayment()

   Gérés côté JS sans risque de bloc fantôme (innerHTML vide → :empty) :
     .k-modal-meta (social proof) → .k-modal-meta:empty { display:none }
     .k-modal-variants → JS injecte/supprime le bloc entier
   ──────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .k-modal:not(.k-modal--has-promo) .k-modal-aed-price,
  .k-modal:not(.k-modal--has-promo) .k-modal-flash-bar,
  .k-modal:not(.k-modal--stock-low) .k-modal-stock-bar {
    display: none;
  }
}

@media (min-width: 900px) {

  /* ── EUR reference line (remplace AED) ─────────────────── */
  /* Ligne sobre sous le prix KMF : "≈ 6 €  -14%"           */
  /* Pas de second bloc héro — le KMF est déjà en grand      */
  .k-modal-aed-price {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 2px 0 6px;
  }
  .k-modal-eur-ref {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
  }
  .k-modal-eur-ref strong {
    color: var(--text);
    font-weight: 700;
  }
  .k-modal-eur-ref s {
    font-size: 12px;
    color: var(--text-light);
    text-decoration: line-through;
    margin-left: 4px;
  }
  /* PR-D1 — badge % coral plein, blanc, plus visible (mockup) */
  .k-modal-aed-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    background: var(--coral);
    border: none;
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: .3px;
  }

  /* Chantier 2 — "· économie 5 233 KMF" suffixe sobre de la ligne aed-price */
  .k-modal-price-saving {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
  }
  .k-modal-price-saving-sep {
    margin: 0 6px 0 -2px;
    color: var(--text-light);
  }

  /* ── Bandeau promo sobre — FIX 2026-05-20 ──────────────── */
  /* Remplace l'ancien flash bar avec timer aléatoire (supprimé).
     Affiché uniquement si product.promo_pct existe (donnée réelle).
     Aucun token amber — uniquement sand-warm + coral du système Komerce. */
  .k-modal-flash-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sand-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 8px 0 0;
  }
  .k-modal-flash-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    background-color: var(--coral);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M13 2L4.5 13.5H11L10 22L19.5 10.5H13L13 2Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    flex-shrink: 0;
  }
  .k-modal-flash-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--coral);
  }
  .k-modal-flash-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--coral);
    background: var(--border-coral-09);
    border: 1px solid var(--border-coral-13);
    padding: 1px 7px;
    border-radius: 5px;
    flex-shrink: 0;
  }
  /* Chantier 2 — suffixe "sur ce produit" du flash-bar, discret */
  .k-modal-flash-suffix {
    font-size: 12px;
    color: var(--coral);
    font-weight: 500;
    opacity: .85;
  }

  /* ── Stock disponible — FIX 2026-05-20 ─────────────────── */
  /* Remplace la barre stock avec % simulé (supprimée).
     Texte sobre affiché si stock réel ≤ 20. Pas de barre, pas de rouge. */
  .k-modal-stock-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0 2px;
    font-size: 12px;
    color: var(--text-muted);
  }
  .k-modal-stock-line-icon {
    display: inline-flex;
    width: 13px;
    height: 13px;
    background-color: var(--ocean);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    flex-shrink: 0;
  }

  /* ── Delivery section — PR-D2 rev2 : ligne sobre encadrée ── */
  .k-modal-delivery {
    display: block;
    border-top: 1px solid var(--sand-dark);
    margin-top: 14px;
    padding-top: 14px;
  }
  .k-modal-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 10px;
  }
  /* Encart delivery : fond sable, bordure neutre */
  .k-modal-delivery-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--sand);
    margin-bottom: 7px;
    user-select: none;
  }
  .k-modal-delivery-opt:last-child { margin-bottom: 0; }
  .k-modal-delivery-opt .k-modal-opt-radio { display: none; }
  .k-modal-opt-body { flex: 1; min-width: 0; }
  .k-modal-opt-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }
  .k-modal-opt-icon { font-size: 18px; flex-shrink: 0; }
  /* Badge Gratuit : outlined vert sobre (screenshot) */
  .k-modal-opt-free {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--ocean-dark);
    background: transparent;
    border: 1px solid var(--border-ocean-14);
    padding: 3px 12px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  .k-modal-opt-row2 {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
  }
  .k-modal-islands {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .k-modal-island-chip {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
  }
  /* Séparateur · entre les chips via CSS, pas en HTML */
  .k-modal-island-chip + .k-modal-island-chip::before {
    content: '·';
    margin-right: 4px;
    color: var(--text-light);
  }

  /* ── Payment section — PR-D2 rev2 : tabs outlined 4 cols ── */
  .k-modal-payment {
    display: block;
    border-top: 1px solid var(--sand-dark);
    margin-top: 14px;
    padding-top: 14px;
  }
  .k-modal-payment > .k-modal-section-title { margin-bottom: 10px; }
  .k-modal-payment-opts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
  }
  .k-modal-payment-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--white);
    user-select: none;
    text-align: center;
    min-width: 0;
  }
  .k-modal-payment-opt:hover {
    border-color: var(--ocean-light);
    background: var(--ocean-bg-08);
  }
  /* Tab active : fond vert léger + bordure verte (screenshot) */
  .k-modal-payment-opt.is-active {
    border-color: var(--ocean);
    background: var(--ocean-bg-08);
  }
  .k-modal-pay-icon { font-size: 18px; flex-shrink: 0; }
  .k-modal-pay-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  .k-modal-payment-opt.is-active .k-modal-pay-label { color: var(--ocean-dark); }
  /* Masquer radio, sous-label, badge dans les tabs */
  .k-modal-payment-opt .k-modal-opt-radio,
  .k-modal-payment-opt .k-modal-pay-sub,
  .k-modal-payment-opt .k-modal-pay-badge { display: none; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM MOBILE V1 — modale produit / PDP (rapatrié de b-mobile-premium-v1.js,
   Lot 2/L2-S2). Scopé html.k-mobile-premium-v1, @media max 899px. Owner PDP.
   Dernier bloc rapatrié → le JS ne pose plus que la classe d'état. ════════════ */
@media (max-width: 899px) {
  html.k-mobile-premium-v1 #k-modal .k-modal-scroll {
    background: linear-gradient(180deg, var(--sand) 0%, var(--white) 34%);
    padding-bottom: calc(172px + env(safe-area-inset-bottom));
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-img-wrap {
    min-height: 46vh;
    max-height: 52vh;
    background: var(--sand);
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-slide { object-fit: cover; }
  html.k-mobile-premium-v1 #k-modal .k-modal-details {
    margin-top: -28px;
    position: relative;
    z-index: 2;
    border-radius: 28px 28px 0 0;
    background: color-mix(in srgb, var(--white) 96%, transparent);
    box-shadow: 0 -14px 36px var(--border-text-08);
    overflow: hidden;
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-info { padding: 24px 18px 12px; }
  html.k-mobile-premium-v1 #k-modal .k-modal-info::before {
    content: '';
    display: block;
    width: 44px;
    height: 5px;
    margin: -10px auto 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 28%, transparent);
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-name-row {
    gap: 12px;
    align-items: flex-start;
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-info h2 {
    font-family: var(--font-display, var(--font));
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--text);
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-fav-btn {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 999px;
    box-shadow: 0 12px 28px var(--border-text-08);
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-price-row { margin-top: 12px; }
  html.k-mobile-premium-v1 #k-modal .k-modal-price {
    font-size: clamp(42px, 12vw, 58px);
    line-height: .95;
    letter-spacing: -.045em;
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-desc {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-actions {
    display: grid;
    grid-template-columns: minmax(106px, .8fr) minmax(0, 1.25fr);
    gap: 12px;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--border-text-06);
    box-shadow: 0 -18px 40px color-mix(in srgb, var(--text) 10%, transparent);
    isolation: isolate;
    z-index: 30;
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-actions::before {
    content: '';
    position: absolute;
    inset: -22px 0 auto 0;
    height: 22px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, var(--white) 100%);
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-actions .k-qty,
  html.k-mobile-premium-v1 #k-modal .k-modal-actions .k-add-cart-btn,
  html.k-mobile-premium-v1 #k-modal .k-modal-actions .k-buy-now-btn {
    border-radius: 999px;
    min-height: 54px;
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-actions .k-qty {
    grid-column: 1;
    grid-row: 1;
    background: var(--sand);
    box-shadow: inset 0 0 0 1px var(--border-text-06);
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-actions .k-add-cart-btn {
    grid-column: 2;
    grid-row: 1;
    background: var(--white);
    font-size: 16px;
    font-weight: 850;
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-actions .k-buy-now-btn {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 62px;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--ocean) 26%, transparent);
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-suggestions {
    background: var(--sand);
    padding-top: 22px;
  }
  html.k-mobile-premium-v1 #k-modal .k-modal-suggestions h3 {
    font-family: var(--font-display, var(--font));
    font-size: 24px;
    letter-spacing: -.025em;
  }
}

/* ---------------------------------------------------------------
   PDP CURATION SUGGESTIONS — layout desktop (≥900px)
   Rapatrié depuis b-pdp-curation-suggestions.js (L3-S9)
   Owner : modal-product.css
   --------------------------------------------------------------- */

@media (min-width: 900px) {
  #k-modal-suggestions.k-pdp-curation {
    background:
      radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--ocean-bg-08) 60%, transparent), transparent 26%),
      linear-gradient(180deg, var(--sand) 0%, var(--sand-warm) 100%);
    border-top: 1px solid var(--border-text-06);
  }

  #k-modal-suggestions.k-pdp-curation .k-sug-section {
    max-width: 1480px;
    margin-inline: auto;
  }

  #k-modal-suggestions.k-pdp-curation .k-sug-section + .k-sug-section {
    margin-top: 34px;
  }

  #k-modal-suggestions.k-pdp-curation .k-sug-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    margin-bottom: 14px;
  }

  #k-modal-suggestions.k-pdp-curation .k-sug-title-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 10px 24px var(--border-text-06);
  }

  #k-modal-suggestions.k-pdp-curation .k-sug-title-text {
    font-family: var(--font-display, var(--font));
    font-size: clamp(24px, 2.2vw, 34px);
    letter-spacing: -.03em;
  }

  #k-modal-suggestions.k-pdp-curation .k-pdp-curation-subtitle {
    grid-column: 2;
    margin-top: -7px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
  }

  #k-modal-suggestions.k-pdp-curation .k-pdp-curation-section--complements {
    padding: 22px;
    border-radius: 26px;
    background: color-mix(in srgb, var(--white) 72%, transparent);
    border: 1px solid var(--border-text-06);
    box-shadow: 0 18px 46px var(--border-text-06);
  }

  #k-modal-suggestions.k-pdp-curation .k-pdp-curation-section--complements .k-sug-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 14px;
  }

  #k-modal-suggestions.k-pdp-curation .k-pdp-curation-section--same .k-sug-grid,
  #k-modal-suggestions.k-pdp-curation .k-pdp-curation-section--editorial .k-sug-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
  }

  #k-modal-suggestions.k-pdp-curation .k-pdp-curation-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    height: 24px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ocean) 92%, var(--text));
    color: var(--white);
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 8px 18px var(--border-text-12);
  }

  /* Si la carte porte déjà un badge promo, masquer le badge curation —
     la promo a priorité commerciale sur le même coin haut-gauche. */
  #k-modal-suggestions.k-pdp-curation .k-sug-card-img:has(.k-sug-promo-badge) .k-pdp-curation-badge {
    display: none;
  }

  #k-modal-suggestions.k-pdp-curation .k-sug-card-img { position: relative; }
}


/* ── modal-product-lot4-hybrid.css ───────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   Approche C hybride desktop — PDP Komerce
   Rapatrié de b-modal-approche-c-hybrid.js (Lot 4)
   Owner : modal-product.css
   Scope : @media (min-width: 900px) uniquement
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* ── Zone produit : layout grille hybride ── */
  #k-modal .k-modal-product-zone {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    background:
      radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--sand-warm) 60%, transparent), transparent 28%),
      var(--white);
  }

  #k-modal .k-modal-product-zone .k-modal-img-wrap {
    background:
      radial-gradient(circle at 62% 20%, color-mix(in srgb, var(--ocean) 10%, transparent), transparent 30%),
      linear-gradient(135deg, var(--sand) 0%, var(--sand-warm) 100%);
  }

  #k-modal .k-modal-slide { padding: 22px 30px 22px 92px; }

  #k-modal .k-modal-product-zone .k-modal-details {
    background: linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--sand) 48%, var(--white)) 100%);
    padding: 0 clamp(28px, 4.4vw, 72px);
  }

  #k-modal .k-modal-product-zone .k-modal-info {
    max-width: 760px;
    padding-top: clamp(22px, 3vh, 42px);
    padding-bottom: 14px;
  }

  /* ── Typographie titre + prix ── */
  #k-modal .k-modal-info h2 {
    font-family: var(--font-display, var(--font));
    font-size: clamp(30px, 3vw, 46px);
    line-height: .98;
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--text);
    max-width: 760px;
  }

  #k-modal .k-modal-name-row { margin-top: 10px; align-items: flex-start; }
  #k-modal .k-modal-fav-btn  { margin-top: 2px; }

  #k-modal .k-modal-price-row  { margin-top: 18px; gap: 12px; }
  #k-modal .k-modal-price      { font-size: clamp(34px, 4vw, 56px); letter-spacing: -.04em; color: var(--coral); }
  #k-modal .k-modal-price-unit { font-size: .34em; letter-spacing: .06em; }
  #k-modal .k-modal-old-price  { font-size: 16px; opacity: .72; }
  #k-modal .k-modal-aed-price  { margin-top: 8px; margin-bottom: 10px; }

  #k-modal .k-modal-eur-ref,
  #k-modal .k-modal-price-saving { font-size: 13px; }

  #k-modal .k-modal-flash-bar { display: none; }

  #k-modal .k-modal-desc {
    font-style: italic;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    margin-top: 8px;
    max-width: 680px;
  }

  /* ── Livraison + paiement ── */
  #k-modal .k-modal-delivery,
  #k-modal .k-modal-payment {
    display: block;
    border-top: 0;
    margin-top: 18px;
    padding-top: 0;
  }

  /* ── Retrait relais card ── */
  #k-modal .k-buybox-relay-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid var(--border-ocean-14);
    background: linear-gradient(135deg, color-mix(in srgb, var(--ocean-bg-08) 78%, var(--white)) 0%, var(--white) 100%);
    box-shadow: 0 12px 28px var(--border-text-06);
  }

  #k-modal .k-buybox-relay-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--ocean-bg-08);
    border: 1px solid var(--border-ocean-14);
    font-size: 22px;
  }

  #k-modal .k-buybox-relay-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
  }

  #k-modal .k-buybox-relay-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
  }

  #k-modal .k-buybox-relay-free {
    font-size: 12px;
    font-weight: 800;
    color: var(--ocean-dark);
    background: var(--ocean-bg-08);
    border: 1px solid var(--border-ocean-14);
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap;
  }

  /* ── Actions inline (stepper + CTA) ── */
  #k-modal .k-modal-info > .k-modal-actions.k-buybox-actions-inline {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) minmax(210px, 1.15fr);
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 0 4px;
    background: transparent;
    border-top: 0;
    box-shadow: none;
  }

  #k-modal .k-modal-info > .k-modal-actions.k-buybox-actions-inline .k-qty,
  #k-modal .k-modal-info > .k-modal-actions.k-buybox-actions-inline .k-add-cart-btn,
  #k-modal .k-modal-info > .k-modal-actions.k-buybox-actions-inline .k-buy-now-btn {
    min-height: 50px;
    border-radius: 999px;
  }

  #k-modal .k-modal-info > .k-modal-actions.k-buybox-actions-inline .k-qty {
    background: var(--sand);
    box-shadow: inset 0 0 0 1px var(--border-text-06);
  }

  #k-modal .k-modal-info > .k-modal-actions.k-buybox-actions-inline .k-add-cart-btn {
    background: var(--white);
    font-size: 14px;
    font-weight: 850;
  }

  #k-modal .k-modal-info > .k-modal-actions.k-buybox-actions-inline .k-buy-now-btn {
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ocean) 24%, transparent);
  }

  #k-modal .k-modal-info > .k-modal-actions.k-buybox-actions-inline .k-modal-subtotal {
    grid-column: 3;
    justify-self: center;
    margin-top: -2px;
    font-size: 12px;
    color: var(--text-muted);
  }

  #k-modal .k-modal-info > .k-modal-actions.k-buybox-actions-inline .k-modal-subtotal strong {
    color: var(--coral);
    font-size: 15px;
  }

  /* ── Onglets paiement ── */
  #k-modal .k-modal-payment .k-modal-section-title { margin-bottom: 9px; }

  #k-modal .k-buybox-payment-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }

  #k-modal .k-buybox-payment-tab {
    height: 42px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
      border-color .16s var(--ease),
      background .16s var(--ease),
      color .16s var(--ease),
      box-shadow .16s var(--ease),
      transform .16s var(--ease);
  }

  #k-modal .k-buybox-payment-tab:hover {
    transform: translateY(-1px);
    border-color: var(--ocean-light);
    box-shadow: 0 8px 18px var(--border-text-06);
  }

  #k-modal .k-buybox-payment-tab.is-active {
    border-color: var(--ocean);
    background: var(--ocean-bg-08);
    color: var(--ocean-dark);
    box-shadow: inset 0 0 0 1px var(--border-ocean-14);
  }

  #k-modal .k-buybox-payment-detail {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 8px 22px var(--border-text-06);
  }

  #k-modal .k-buybox-payment-check {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid var(--ocean);
    position: relative;
  }

  #k-modal .k-buybox-payment-check::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: var(--ocean);
  }

  #k-modal .k-buybox-payment-icon { font-size: 18px; line-height: 1; }
  #k-modal .k-buybox-payment-copy { min-width: 0; }

  #k-modal .k-buybox-payment-copy strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.15;
  }

  #k-modal .k-buybox-payment-copy small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #k-modal .k-buybox-payment-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 8px;
    color: var(--violet-dark);
    background: var(--violet-light);
    border: 1px solid var(--violet-mid);
  }

  /* ── Trust + partage ── */
  #k-modal .k-modal-trust {
    border-top: 0;
    margin-top: 12px;
    padding: 0;
    gap: 8px;
  }

  #k-modal .k-modal-trust-item {
    background: color-mix(in srgb, var(--sand) 76%, var(--white));
    border: 1px solid var(--border-text-06);
    min-height: 30px;
  }

  #k-modal .k-modal-share-row {
    border-top: 0;
    margin-top: 10px;
    padding-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
  }

  #k-modal .k-modal-share-row::before {
    content: 'Partager ce produit :';
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
  }

  #k-modal .k-modal-share-btn,
  #k-modal .k-modal-share-btn.k-modal-share-btn--wa {
    width: auto;
    min-height: 0;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sand) 78%, var(--white));
    color: var(--text-muted);
    border: 1px solid var(--border-text-06);
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
  }

  #k-modal .k-modal-share-btn svg { width: 13px; height: 13px; }
  #k-modal .k-modal-share-btn.k-modal-share-btn--wa svg { fill: currentColor; }

  /* Masquer la recherche interne en bas du panneau desktop.
     Spécificité : 1-2-0 → bat le base .k-modal-inner-search (0-1-0). Sans !important. */
  #k-modal .k-modal-details > .k-modal-inner-search { display: none; }

  /* ── Suggestions desktop list ── */
  #k-modal-suggestions.k-modal-suggestions--desktop-list {
    background: linear-gradient(180deg, var(--sand) 0%, var(--sand-warm) 100%);
    padding: 34px clamp(32px, 5vw, 72px) 56px;
  }

  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-title {
    border-bottom: 0;
    margin-bottom: 18px;
  }

  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-title-text {
    font-family: var(--font-display, var(--font));
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1;
    letter-spacing: -.025em;
    color: var(--text);
  }

  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-grid,
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-grid--same,
  #k-modal-suggestions.k-modal-suggestions--desktop-list .k-sug-grid--other {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
  }
}


/* ── cart.css ────────────────────────────────────────────── */
/* ---------------------------------------------------------------
   KOMERCE � cart.css
   Panier drawer, checkout, OTP, suivi, favoris, toast, WhatsApp FAB.
   Mobile-first, z�ro !important.
   --------------------------------------------------------------- */

/* -- OVERLAY PANIER -------------------------------------------- */
.k-cart-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1100;
  background: var(--overlay-dark);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s ease;
}
.k-cart-overlay.open { display: block; opacity: 1; }

/* Bloquer scroll derri�re */
body.cart-open .k-modal-overlay,
body.cart-open .k-cats,
body.cart-open .k-hero { pointer-events: none; }

/* -- DRAWER --------------------------------------------------- */
.k-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 400px; z-index: 1150;
  background: var(--white);
  box-shadow: var(--elev-4);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  border-radius: 16px 0 0 16px;
}
.k-cart-drawer.open { transform: translateX(0); }

.k-cart-header {
  background: var(--ocean-dark); color: var(--white);
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 1.1rem;
  border-radius: 16px 0 0 0; flex-shrink: 0;
}
.k-cart-body { flex: 1; overflow-y: auto; padding: 8px 12px; scrollbar-width: thin; }

/* Panier vide */
.k-cart-empty { text-align: center; padding: 48px 24px 60px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.k-cart-empty .k-cart-empty-icon { font-size: 72px; line-height: 1; opacity: .5; animation: cart-empty-float 3s ease-in-out infinite; }
.k-cart-empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.k-cart-empty-sub   { font-size: 14px; line-height: 1.5; max-width: 280px; margin: 0 auto 12px; }
.k-cart-empty-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; margin-top: 8px;
  background: linear-gradient(135deg, var(--cta-green) 0%, var(--status-confirmed-text) 100%);
  color: var(--white); border: none; border-radius: 50px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 3px 10px rgba(42,122,62,.3); transition: all .15s;
}
.k-cart-empty-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(42,122,62,.4); }
.k-cart-empty-cta:active { transform: scale(.97); }
@keyframes cart-empty-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.k-cart-continue-shop {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px 16px; margin-bottom: 10px;
  background: transparent; border: 1.5px dashed var(--border);
  border-radius: 10px; font-weight: 600; font-size: .83rem;
  color: var(--text-muted); cursor: pointer; transition: all .2s;
}
.k-cart-continue-shop:hover { background: var(--sand); border-style: solid; color: var(--text); }

/* -- ITEMS --------------------------------------------------- */
.k-cart-item {
  display: flex; gap: 8px; padding: 8px 10px; margin-bottom: 4px;
  border-radius: 12px; background: var(--white);
  box-shadow: var(--elev-1); border: 1px solid var(--border);
  animation: fadeIn .3s; transition: box-shadow .2s ease; position: relative;
}
.k-cart-item:hover { box-shadow: var(--elev-2); }
.k-cart-item.new-item {
  border-left: 4px solid var(--coral);
  background: linear-gradient(90deg, var(--cream-amber-bg) 0%, var(--white) 55%);
  border-radius: 0 12px 12px 0;
  animation: newItemSlide .42s cubic-bezier(.34,1.56,.64,1);
}
.k-cart-item-img { width: 54px; height: 54px; background: var(--sand); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; overflow: hidden; border: 1px solid var(--border); cursor: pointer; } /* S3.2 — cursor sorti de b-cart.js */
.k-cart-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.k-cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.k-cart-item-name  { font-weight: 700; font-size: .8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; cursor: pointer; } /* S3.2 */
.k-cart-item-unit  { font-size: .68rem; color: var(--text-muted); margin-top: 0; }
.k-cart-item-price { font-size: .82rem; color: var(--coral); font-weight: 700; margin-top: 0; }
.k-cart-item-qty   { display: flex; align-items: center; gap: 0; margin-top: 3px; background: var(--sand); border-radius: 20px; width: fit-content; border: 1px solid var(--border); }
.k-qty-ctrl { width: 26px; height: 26px; border-radius: 50%; background: transparent; color: var(--coral); font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; transition: all .2s; cursor: pointer; border: none; touch-action: manipulation; }
.k-qty-ctrl:hover { background: var(--coral); color: var(--white); }
.k-qty-ctrl-val { min-width: 18px; text-align: center; font-weight: 700; font-size: .82rem; }
.k-cart-item-remove { background: none; color: var(--text-muted); font-size: .85rem; align-self: flex-start; padding: 2px 4px; transition: all .2s; cursor: pointer; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: none; }
.k-cart-item-remove:hover { background: var(--red-bg-soft); color: var(--red); transform: scale(1.1); }

/* -- FOOTER PANIER -------------------------------------------- */
.k-cart-footer {
  border-top: none; padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
  background: var(--white); box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  flex-shrink: 0;
}
.k-cart-recap { padding-bottom: 14px; margin-bottom: 14px; }
.k-cart-recap-line { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 14px; }
.k-cart-recap-label { color: var(--text-muted); font-weight: 500; }
.k-cart-recap-val   { color: var(--text); font-weight: 600; }
.k-cart-recap-free  { color: var(--cta-green); font-weight: 600; font-size: 13px; }
.k-cart-recap-divider { border-top: 1px dashed var(--sand-dark); margin: 8px 0; }
.k-cart-total-row   { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 0; font-weight: 700; font-size: 16px; }
.k-cart-total-label { font-size: 15px; color: var(--text); }
.k-cart-total-val   { font-weight: 800; font-size: 20px; color: var(--cta-green); }
.k-cart-total-conv  { font-size: 12px; color: var(--text-muted); display: block; text-align: right; font-weight: 500; margin-top: 2px; margin-bottom: 12px; }

/* Boutons footer */
.k-cart-footer-btns {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 8px; width: 100%;
}
.kcf-btn { padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: .88rem; transition: all .2s var(--ease); display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: none; min-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#k-cart-continue { grid-column: 1; grid-row: 1; }
#k-cart-clear    { grid-column: 2; grid-row: 1; min-width: 44px; padding: 10px 12px; }
#k-cart-whatsapp { grid-column: 3; grid-row: 1; }
#k-cart-checkout { grid-column: 1 / -1; grid-row: 2; }
.kcf-full { width: 100%; padding: 14px 20px; border-radius: 50px; font-size: 15px; font-weight: 700; margin: 6px 0 12px; background: linear-gradient(135deg, var(--cta-green) 0%, var(--status-confirmed-text) 100%); color: var(--white); box-shadow: 0 4px 14px rgba(42,122,62,.3); }
.kcf-full:hover  { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(42,122,62,.4); }
.kcf-full:active { transform: scale(.98); }
.kcf-primary  { background: var(--coral); color: var(--white); box-shadow: 0 2px 10px rgba(200,92,45,.25); }
.kcf-primary:hover { background: var(--coral-dark); transform: translateY(-1px); }
.kcf-secondary { background: var(--sand); color: var(--text-muted); border: 1px solid var(--border); }
.kcf-secondary:hover { background: var(--white); color: var(--text); }
.kcf-share { background: var(--whatsapp); color: var(--white); box-shadow: 0 2px 8px rgba(37,211,102,.25); }
.kcf-share:hover { background: var(--whatsapp-dk); transform: translateY(-1px); }
.kcf-share:active { transform: scale(.97); }
.kcf-danger-mini { padding: 9px 14px; background: transparent; color: var(--text-form-soft); border: 1.5px solid var(--sand-dark); border-radius: 50px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; }
.kcf-danger-mini:hover { background: var(--red-danger-bg); color: var(--red-danger-text); border-color: var(--red-danger-border); }
.kcf-whatsapp { background: var(--whatsapp); color: var(--white); border-radius: 12px; }
.kcf-whatsapp:hover { background: var(--ocean); }
.kcf-whatsapp-mini { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; background: transparent; color: var(--whatsapp); border: 1.5px solid var(--whatsapp); border-radius: 50px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.kcf-whatsapp-mini:hover { background: var(--whatsapp-bg-hover); transform: translateY(-1px); }

#k-cart-whatsapp { font-size: .72rem; padding: 10px 6px; gap: 4px; }
#k-cart-whatsapp svg { width: 14px; height: 14px; }

/* -- MODAL COMMANDE ------------------------------------------- */
.k-order-overlay { display: none; position: fixed; inset: 0; z-index: 1200; background: var(--overlay-dark-md); justify-content: flex-start; align-items: stretch; /* center uniquement sur desktop via @media 900px */ }
/* .k-order-overlay.open � source de v�rit� : voir L606 (structure flex compl�te + z-index) */
/* BUG 4 FIX : overflow:clip au lieu de overflow:hidden � clippe visuellement
   sans bloquer les enfants flex hors scroll (= .ck-confirm-btn toujours visible) */
.k-order-modal { width: 100%; height: 100vh; height: 100dvh; background: var(--white); border-radius: 0; overflow: clip; animation: k-slide-up .3s var(--ease); display: flex; flex-direction: column; }
.k-order-header { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--checkout-accent); color: var(--checkout-accent-light); flex-shrink: 0; font-weight: 700; font-size: .96rem; }
.k-order-body   { flex: 1; overflow-y: auto; padding: 0 10px 4px; }
.k-of-group { margin-bottom: 5px; }
.k-of-group label { display: block; font-size: .78rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.k-of-group input { width: 100%; padding: 6px 10px; border: 2px solid var(--border); border-radius: var(--radius); font-size: .9rem; transition: border-color .2s; outline: none; background: var(--white); }
.k-of-group input:focus { border-color: var(--coral); }

/* 600px intentionnel : .k-order-modal uniquement � popup centr� d�s 480px de large,
   ind�pendant du breakpoint layout. Ne pas aligner sur 900px. */
@media (min-width: 900px) {
  .k-order-modal { max-width: 480px; height: auto; max-height: 92vh; border-radius: var(--radius-lg); }
  .k-order-overlay { align-items: center; justify-content: center; }
}

/* -- OTP + SUIVI ---------------------------------------------- */
.k-otp-hint { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; }
.k-otp-sent-banner { background: var(--whatsapp-bg-hover); border-left: 3px solid var(--text-disabled); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: .82rem; line-height: 1.5; color: var(--text); margin-bottom: 16px; }
.k-otp-code-input { display: block; width: 100%; max-width: 200px; margin: 0 auto 16px; padding: 14px 8px; font-size: 1.6rem; font-weight: 700; letter-spacing: .25em; text-align: center; border: 2px solid var(--overlay-black-md); border-radius: 10px; background: var(--white); outline: none; }
.k-otp-code-input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--border-coral-09); }
.k-otp-divider { display: flex; align-items: center; gap: 12px; margin: 12px 0; color: var(--text-muted); font-size: .78rem; }
.k-otp-divider::before, .k-otp-divider::after { content: ''; flex: 1; height: 1px; background: var(--overlay-black-sm); }
.k-otp-resend-btn { display: block; width: 100%; background: none; border: none; color: var(--text-muted); font-size: .8rem; text-align: center; padding: 8px; cursor: pointer; text-decoration: underline; margin-top: 6px; }
.k-otp-resend-btn:disabled { opacity: .5; cursor: not-allowed; }

.k-fav-view, .k-track-view { display: none; padding: 12px 10px calc(var(--bnav-h) + 96px); min-height: 60vh; }
.k-fav-view.show, .k-track-view.show { display: block; }
.k-fav-view h2, .k-track-view h2 { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.k-fav-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }

.k-order-card { background: var(--white); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 1px 6px var(--overlay-black-sm); }
.k-order-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.k-order-ref { font-weight: 700; font-size: .88rem; color: var(--terracotta); letter-spacing: .02em; }
.k-order-date { font-size: .75rem; color: var(--text-muted); }
.k-order-card-total { font-size: 1rem; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.k-track-form { background: var(--white); border-radius: 12px; padding: 18px; box-shadow: 0 2px 12px var(--overlay-black-sm); margin-bottom: 16px; }
.k-track-ref-wrap { display: flex; align-items: center; gap: 0; width: 100%; border: 1.5px solid var(--sand-dark); border-radius: 8px; overflow: hidden; background: var(--white); transition: border-color .2s; }
.k-track-ref-wrap:focus-within { border-color: var(--coral); }
.k-track-ref-prefix { flex: 0 0 auto; padding: 12px 2px 12px 14px; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; user-select: none; }
.k-track-input--ref { flex: 1; min-width: 0; border: none; outline: none; padding: 12px 14px 12px 0; font-size: 18px; font-weight: 700; letter-spacing: 4px; background: transparent; }
.k-track-btn { width: 100%; margin-top: 12px; padding: 13px; background: var(--text); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.k-track-btn:active { opacity: .8; }
.k-track-steps { background: var(--white); border-radius: 12px; padding: 18px; box-shadow: 0 2px 12px var(--overlay-black-sm); margin-bottom: 28px; }
.k-track-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sand-dark); }
.k-track-step:last-child { border: none; }
.k-track-step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; background: var(--sand-dark); color: var(--text-muted); }
.k-track-step-dot.done    { background: var(--ocean); color: white; }
.k-track-step-dot.current { background: var(--coral); color: white; }
.k-track-step-info { flex: 1; }
.k-track-step-label { font-size: 13px; font-weight: 600; color: var(--text); }
.k-track-step-sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.k-track-steps--compact .k-track-step { padding: 5px 0; }
.k-track-steps--compact .k-track-step-dot { width: 22px; height: 22px; font-size: .65rem; }
.k-track-steps--compact .k-track-step-sub { display: none; }

/* -- TOAST ----------------------------------------------------- */
.k-toast {
  position: fixed; top: -80px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--white);
  padding: 0; border-radius: 16px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: top .45s var(--ease-spring);
  z-index: 2000; min-width: 220px; max-width: 340px; width: calc(100% - 32px); overflow: hidden;
}
.k-toast.show { top: calc(var(--header-h) + 10px); }
.k-toast.error .k-toast-simple   { background: var(--coral); color: var(--white); }
.k-toast.success .k-toast-simple { background: var(--cta-green); color: var(--white); }
.k-toast-simple { padding: 10px 18px; display: flex; align-items: center; justify-content: center; }
.k-toast-rich   { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.k-toast-thumb  { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.k-toast-emoji  { font-size: 24px; flex-shrink: 0; width: 44px; text-align: center; }
.k-toast-body   { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.k-toast-label  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ocean-light); }
.k-toast-name   { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--white); }
.k-toast-cta    { flex-shrink: 0; background: var(--coral); color: var(--white); border-radius: 20px; padding: 6px 11px; font-size: 11px; font-weight: 700; white-space: nowrap; transition: opacity .15s; }
.k-toast-cta:active { opacity: .8; }

/* -- WHATSAPP FAB ---------------------------------------------- */
.k-wa-fab {
  position: fixed;
  right: 10px;
  bottom: calc(var(--bnav-h) + 6px + env(safe-area-inset-bottom, 0px));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 88;
  box-shadow: 0 4px 14px rgba(37,211,102,.28);
  transition: transform .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
  animation: waPulse 3.5s ease-in-out infinite;
  text-decoration: none;
}

.k-wa-fab:hover {
  transform: scale(1.06);
}

.k-wa-fab:active {
  transform: scale(.94);
}

.k-wa-fab svg {
  width: 26px;
  height: 26px;
}

body.modal-open .k-wa-fab,
body.cart-open .k-wa-fab {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.96);
}

/* 900px align� sur layout : bnav masqu�e � 900px, offset mobile bottom:calc(bnav-h+�) devient invalide */
@media (min-width: 900px) {
  .k-wa-fab {
    bottom: 18px;
    right: 18px;
    z-index: 100;
  }
}

@keyframes waPulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(37,211,102,.24);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37,211,102,.38);
  }
}

/* -- BOTTOM NAV (cart badge) ----------------------------------- */
.k-bnav-basket { width: 24px; height: 24px; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 1px 2px var(--overlay-black-sm)); }
.k-bnav-item[data-tab="cart"] { position: relative; overflow: visible; }
.k-bnav-badge {
  position: absolute; top: -2px; left: 50%; margin-left: 4px;
  min-width: 18px; height: 18px;
  background: var(--coral); color: var(--white);
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50px; padding: 0 5px; border: 2px solid var(--white);
  line-height: 1; box-shadow: 0 2px 6px var(--overlay-black-md);
  transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none; z-index: 5;
}
.k-bnav-badge.show { transform: scale(1); }
.k-bnav-item.active .k-bnav-basket { filter: drop-shadow(0 1px 2px var(--overlay-black-sm)) brightness(0.9); transform: scale(1.1); }

/* -- SCROLL / ANIMATIONS GLOBALES --------------------------- */
#k-scroll-sentinel { height: 1px; margin-top: 8px; }
.k-load-more-spinner { text-align: center; padding: 20px; display: none; color: var(--text-muted); font-size: 13px; }
.k-load-more-spinner.show { display: block; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes k-pop       { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes newItemSlide { 0% { transform: translateX(60px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes pulse        { 0%,100% { opacity: 1; } 50% { opacity: .7; } }
@keyframes fadeIn       { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.k-pop { animation: k-pop .3s ease; }

/* --------------------------------------------------------------
   PAGER TEMU � scroll biaxial (horizontal cat�gories + vertical produits)
   -------------------------------------------------------------- */


/* -- PAGER SLIDE � pas de layout sp�cial, juste animations --- */
/* Le swipe change de cat�gorie via animation CSS slide            */
/* Pas de position:absolute, pas d'overflow:hidden sur les parents */

/* -- Indicateur bounce bas ? cat�gorie suivante --------------- */
@keyframes k-pager-bounce-hint {
  0%   { transform: translateY(0);   opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translateY(8px);  opacity: 1; }
  100% { transform: translateY(0);   opacity: 0; }
}
.k-pager-next-hint {
  position: sticky;
  bottom: calc(var(--bnav-h) + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(31,48,36,.82);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  border-radius: 50px;
  white-space: nowrap;
  pointer-events: none;
  animation: k-pager-bounce-hint .8s var(--ease) forwards;
  z-index: 5;
}
.k-pager-next-hint::after { content: '?'; font-size: 14px; }

/* -- Animations slide horizontal (chip ? section) -------------- */
@keyframes k-pager-in-right  {
  from { opacity: .4; transform: translateX(20px);  }
  to   { opacity: 1;  transform: translateX(0); }
}
@keyframes k-pager-in-left   {
  from { opacity: .4; transform: translateX(-20px); }
  to   { opacity: 1;  transform: translateX(0); }
}
.k-pager-slide-in-right { animation: k-pager-in-right .28s var(--ease) both; }
.k-pager-slide-in-left  { animation: k-pager-in-left  .28s var(--ease) both; }

/* -- Carousel dans le pager : d�sactiver scroll-snap horizontal -- */
#k-page-scroll.k-pager-active .k-card-carousel {
  overflow-x: hidden;
  scroll-snap-type: none;
}

/* -- Flat subcat legacy --------------------------------------- */
.k-grid.k-grid-flat-subcat > .k-flat-subcat-page {
  flex: 0 0 100vw; width: 100vw; min-width: 100vw; max-width: 100vw;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.k-grid.k-grid-flat-subcat .k-card-carousel { overflow-x: hidden; scroll-snap-type: none; }

#k-page-scroll { padding-bottom: 0; }

/* -- PHONE INPUT COMPACT -------------------------------------- */
.k-ck-phone-wrap { max-width: 100%; height: 34px; align-items: stretch; }
.k-ck-phone-select { flex: 0 0 82px; height: 34px; font-size: .75rem; padding: 0 4px; }
.k-ck-phone-input  { min-width: 0; height: 34px; font-size: .82rem; }

/* Drawer plein �cran sous 768px � mobile �troit.
   Migr� depuis interactions.css (�tait isol� du reste des r�gles .k-cart-drawer). */
.k-cart-drawer { width: 100%; max-width: 100%; border-radius: 0; }

/* .k-cart-drawer max-width/width ? layout.css @900px (source de v�rit� : 420px)
   Note Phase 8 : ce bloc @900px n'est PAS un doublon de layout.css.
   layout.css d�finit .k-cart-drawer width/max-width (420px).
   Ce bloc g�re body padding-bottom + sizing .k-card-add/.k-card-fav.
   Les deux coexistent l�gitimement � propri�t�s disjointes. */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .k-card-add        { width: 46px; height: 46px; bottom: 10px; right: 10px; }
  .k-card-add.in-cart{ width: 88px; }
  .k-card-fav        { width: 32px; height: 32px; top: 10px; right: 10px; font-size: 15px; }
}

/* ---------------------------------------------------------------
   CHECKOUT COMPACT � .ck-* (tunnel de commande)
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   CHECKOUT COMPACT — .ck-* (tunnel de commande)
   Style marché : fond crème #FFFBF5, DM Sans, contour coral sur sélectionnés
   --------------------------------------------------------------- */

/* Police uniforme sur tout le modal checkout */
.k-order-modal,
.k-order-modal *,
.k-order-header,
.ck-confirm-btn {
  font-family: var(--font-checkout);
}

/* Fond crème chaud sur le modal */
.k-order-modal {
  background: var(--checkout-cream);
}
.k-order-body,
.k-order-body--checkout {
  background: var(--checkout-cream);
}

/* Header gradient vert marché */
.k-order-header {
  background: linear-gradient(135deg, var(--checkout-accent-deep) 0%, var(--checkout-accent-mid) 60%, var(--checkout-accent) 100%);
  color: var(--white);
}

/* Bouton retour header */
.ck-modal-back-btn--header {
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: var(--white);
  border-radius: 50px;
}

/* Carte identité : bord neutre doré (pas de coral) */
.k-ck-id-card {
  background: var(--checkout-id-bg);
  border: 1.5px solid var(--checkout-id-border);
  border-radius: 14px;
}

/* Format numéro Comores : +269 455 1256 */
.k-ck-id-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Segment "Qui récupère ?" : coral uniquement sur le bouton actif */
.ck-recip-seg {
  background: rgba(0,0,0,.05);
  border-radius: 12px;
  padding: 3px;
  border: 1.5px solid var(--checkout-seg-border);
}
.ck-recip-seg button {
  background: transparent;
  color: var(--checkout-seg-text);
  font-family: var(--font-checkout);
  border-radius: 9px;
}
.ck-recip-seg button.on {
  background: var(--checkout-sel-bg);
  color: var(--coral);
  box-shadow: inset 0 0 0 2px var(--coral);
}

/* Toggle fulfillment : coral uniquement sur actif */
.ck-fulfillment-btn {
  background: var(--checkout-cream);
  border: 1.5px solid var(--checkout-seg-border);
  color: var(--checkout-seg-text);
  font-family: var(--font-checkout);
}
.ck-fulfillment-btn.active {
  background: var(--checkout-sel-bg);
  border-color: var(--coral);
  color: var(--coral-dark);
  box-shadow: 0 0 0 1px var(--coral-focus-08);
}

/* Point de retrait sélectionné : contour coral */
.ck-relais-summary {
  background: var(--sage-bg);
  border: 1px solid var(--border-sage-14, rgba(31,110,44,.14));
  border-radius: 14px;
}
.ck-relais-summary-change {
  color: var(--coral);
  border: 1.5px solid var(--coral);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: .74rem;
  font-weight: 800;
  background: transparent;
}

/* Chips paiement : coral uniquement sur actif */
.ck-pay-chip {
  background: var(--checkout-cream);
  border: 1.5px solid var(--checkout-seg-border);
  font-family: var(--font-checkout);
}
.ck-pay-chip--active {
  background: var(--checkout-chip-active-bg);
  border: 2px solid var(--coral);
  box-shadow: 0 0 0 2px var(--coral-focus-12);
  color: var(--checkout-chip-active-text);
}

/* Bouton confirmer fond vert marché */
.ck-confirm-btn {
  background: var(--cta-green);
  color: var(--white);
  border-top: none;
  box-shadow: 0 -2px 12px rgba(30,92,48,.20);
  font-family: var(--font-checkout);
}


.ck-sum-qty   { font-size:.8rem; color:var(--text-muted); }
.ck-sum-sep   { color:var(--text-muted); font-size:.8rem; }
.ck-sum-total { font-weight:800; font-size:1rem; color:var(--sage-dark); margin-left:auto; }

.ck-label {
  font-size:.72rem; font-weight:800; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em;
  margin:14px 0 5px; display:flex; align-items:center; gap:6px;
}
.ck-label::before {
  content:''; display:block; width:3px; height:14px;
  background:var(--coral); border-radius:2px; flex-shrink:0;
}
.ck-fulfillment-switch { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 0 10px; }
.ck-fulfillment-btn {
  min-height:32px; padding:0 6px;
  border:1.5px solid rgba(31,48,36,.10); border-radius:13px;
  background:var(--white); color:var(--text-muted-md);
  font-size:.79rem; font-weight:700; line-height:1.15;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(31,48,36,.04);
}
.ck-fulfillment-btn.active {
  border-color:var(--coral); background:var(--white); color:var(--coral-dark);
  box-shadow:0 0 0 1px var(--coral-focus-08);
}

/* Formulaire */
.k-ck-section  { font-weight:700; font-size:.78rem; margin:3px 0 1px; }
.k-ck-group    { margin-bottom:6px; }
.k-ck-label    { display:block; font-size:.8rem; font-weight:700; margin-bottom:3px; color:var(--text); }
.k-ck-label--sm { font-size:.75rem; color:var(--text-form-mid); }
.k-ck-group--tracking-compact { margin-bottom:2px; }
.k-ck-group--tracking-compact .k-ck-phone-help { display:none; }
.k-ck-input {
  width:100%; min-height:36px; padding:0 8px;
  border:1.5px solid rgba(0,0,0,.10); border-radius:11px;
  outline:none; font-size:.96rem; transition:border-color .2s; box-sizing:border-box; background:var(--white);
}
.k-ck-input:focus { border-color:var(--coral); }

/* Phone intl */
.k-ck-phone-wrap   { display:flex; height:34px; gap:4px; }
.k-ck-phone-select { flex:0 0 76px; height:42px; border:1.5px solid var(--overlay-black-sm); border-radius:11px; background:var(--white); padding:0 6px; font-size:.8rem; outline:none; transition:border-color .2s; }
.k-ck-phone-input  { flex:1; height:42px; border:1.5px solid var(--overlay-black-sm); border-radius:11px; padding:0 10px; outline:none; font-size:.96rem; box-sizing:border-box; background:var(--white); transition:border-color .2s; }
.k-ck-phone-wrap:focus-within .k-ck-phone-select,
.k-ck-phone-wrap:focus-within .k-ck-phone-input { border-color:var(--coral); }
.k-ck-phone-help { font-size:.7rem; line-height:1.2; color:var(--text-form-muted); margin-top:3px; }
.k-phone-row { height:38px; }
.k-phone-row select, .k-phone-row input { height:38px; font-size:.84rem; }

/* Phone Comores +269 */
.k-ck-km-wrap   { display:flex; height:40px; }
.k-ck-km-prefix { display:flex; align-items:center; gap:4px; padding:0 10px; background:var(--sand); border:1.5px solid var(--overlay-black-md); border-right:none; border-radius:8px 0 0 8px; font-size:12px; font-weight:700; color:var(--text-strong-mid); white-space:nowrap; flex-shrink:0; transition:border-color .15s; }
.k-ck-km-code   { color:var(--text-form-light); }
.k-ck-km-input  { flex:1; height:100%; border:1.5px solid var(--overlay-black-md); border-left:none; border-radius:0 8px 8px 0; padding:0 12px; font-size:14px; outline:none; background:var(--white); transition:border-color .15s; }
.k-ck-km-wrap:focus-within .k-ck-km-prefix,
.k-ck-km-wrap:focus-within .k-ck-km-input { border-color:var(--coral); }

/* Stripe */
.k-stripe-wrap         { display:none; margin-top:8px; padding:10px 14px; background:var(--white); border:1px solid var(--sand-dark); border-radius:10px; }
.k-stripe-wrap.is-visible { display:block; }
.k-stripe-title        { font-size:.75rem; font-weight:700; color:var(--ocean); margin-bottom:6px; }
.k-stripe-element      { padding:10px 12px; border:1.5px solid var(--overlay-black-md); border-radius:8px; background:var(--white); min-height:44px; cursor:text; }
.k-stripe-error        { color:var(--red-danger); font-size:.75rem; margin-top:5px; display:none; }
.k-stripe-error.is-visible { display:block; }
.k-stripe-eur          { display:none; text-align:center; font-size:.82rem; color:var(--ocean); font-weight:700; margin-top:6px; padding-bottom:4px; }
.k-stripe-eur.is-visible { display:block; }

/* Wallet */
.k-wallet-section       { margin-top:5px; padding:7px 10px; border:2px dashed var(--ocean); border-radius:8px; background:linear-gradient(135deg,var(--green-bg-mid),var(--green-bg-warm)); display:none; }
.k-wallet-section.is-visible { display:block; }
.k-wallet-label         { display:flex; align-items:center; gap:10px; cursor:pointer; }
.k-wallet-cb            { width:18px; height:18px; accent-color:var(--ocean); flex-shrink:0; }
.k-wallet-info          { flex:1; }
.k-wallet-title         { font-weight:700; font-size:.85rem; color:var(--ocean); }
.k-wallet-balance       { font-size:.72rem; color:var(--text-form-light); margin-top:1px; }
.k-wallet-ded           { margin-top:6px; padding:6px 8px; background:var(--white); border-radius:6px; font-size:.82rem; display:none; }
.k-wallet-ded.is-visible { display:block; }
.k-wal-row              { display:flex; justify-content:space-between; }
.k-wal-row + .k-wal-row { margin-top:4px; }
.k-wal-value            { font-weight:700; color:var(--ocean); }
.k-wal-bold             { font-weight:700; }
.k-wal-success          { margin-top:4px; text-align:center; font-weight:700; color:var(--cta-green); }

/* Payment options */
.k-pay-option    { display:flex; align-items:center; gap:10px; padding:10px 14px; border:2px solid rgba(0,0,0,.08); border-radius:8px; margin-bottom:6px; cursor:pointer; background:var(--white); }
.k-pay-option.is-selected { border-color:var(--ocean); background:rgba(67,160,71,.06); }
.k-pay-radio     { width:16px; height:16px; accent-color:var(--ocean); flex-shrink:0; }
.k-pay-title     { font-weight:700; font-size:.88rem; }
.k-pay-subtitle  { font-size:.75rem; color:var(--text-form-light); margin-top:1px; }
.k-pay-helper    { margin:4px 0 8px; padding:7px 9px; border:1px solid rgba(255,107,53,.18); border-left:3px solid var(--coral); border-radius:11px; background:var(--cream-peach); color:var(--coral-text); font-size:.73rem; line-height:1.3; }

/* Chips paiement */
.ck-pay-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:5px; }
.ck-pay-chip  { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:42px; padding:2px 4px; border:1.5px solid var(--border-text-10); border-radius:13px; cursor:pointer; background:var(--white); text-align:center; gap:3px; transition:border-color .15s, background .15s; user-select:none; box-shadow:0 3px 10px rgba(31,48,36,.04); }
.ck-pay-chip input[type=radio] { display:none; }
.ck-pay-chip--active { border: 2px solid var(--coral); background: var(--white); box-shadow: 0 0 0 1px var(--border-coral-09), 0 2px 8px rgba(200,92,45,.08); color: var(--coral); }
.ck-pay-chip--off    { opacity:.38; filter:saturate(.5) blur(.3px); cursor:not-allowed; pointer-events:none; }
.ck-chip-icon { font-size:1.05rem; line-height:1; }
.ck-chip-lbl  { font-size:.72rem; font-weight:700; color:var(--text); line-height:1.2; }
.ck-chip-lbl em.ck-soon       { font-style:normal; font-size:.58rem; font-weight:600; background:var(--coral); color:var(--white); border-radius:4px; padding:1px 4px; display:inline-block; margin-top:2px; }
.ck-chip-lbl em.ck-stripe-tag { font-style:normal; font-size:.58rem; font-weight:700; background:var(--blue-stripe-bg); color:var(--blue-stripe-text); border-radius:4px; padding:1px 4px; display:inline-block; margin-top:2px; }
.ck-soon { font-size:.62rem; background:var(--coral); color:white; padding:1px 5px; border-radius:5px; font-weight:700; vertical-align:middle; }
.ck-pay-mvola { display:flex; align-items:center; gap:8px; padding:8px 11px; border:2px solid rgba(0,0,0,.08); border-radius:8px; margin-bottom:4px; cursor:not-allowed; opacity:.5; font-size:.88rem; font-weight:600; background:var(--white); }
.ck-pay-mvola input { width:15px; height:15px; flex-shrink:0; }

/* Tracking accordion */
.ck-track-row    { margin:4px 0 2px; }
.ck-track-toggle { display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; cursor:pointer; padding:5px 0; color:var(--text); }
.ck-track-toggle input[type=checkbox] { width:16px; height:16px; flex-shrink:0; accent-color:var(--coral); }
.ck-track-details { margin-top:4px; border:1px solid rgba(31,48,36,.08); border-radius:11px; background:var(--sand); }
.ck-track-details summary { list-style:none; cursor:pointer; padding:9px 11px; font-size:.8rem; font-weight:700; color:var(--text); display:flex; align-items:center; justify-content:space-between; }
.ck-track-details summary::-webkit-details-marker { display:none; }
.ck-track-details summary::after { content:"+"; font-size:.94rem; color:var(--text-muted); }
.ck-track-details[open] summary::after { content:"-"; }
.ck-track-details-body { padding:0 11px 10px; }
.ck-track-extra { margin-top:6px; padding:10px; background:var(--sand); border-radius:8px; }
.ck-track-hint  { font-size:.71rem; color:var(--text-muted); margin-top:3px; }

/* Relais */
.ck-relais-section   { margin-bottom:10px; }
.ck-relais-section-title { font-size:.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.ck-relais-ile-label { font-size:.76rem; color:var(--text-muted); margin-bottom:5px; }
.ck-relais-ile-grid  { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:6px; }
.ck-relais-ile-btn   { min-height:36px; padding:0 8px; border:1.5px solid rgba(31,48,36,.10); border-radius:13px; background:var(--white); color:var(--text); font-size:.78rem; font-weight:700; text-align:center; }
.ck-relais-ile-btn.active { border-color:var(--coral); background:var(--sage-bg-pale); color:var(--sage-dark); }
.ck-relais-item      { position:relative; padding:5px 8px 5px 30px; border:1.5px solid rgba(31,48,36,.10); border-radius:13px; background:var(--white); cursor:pointer; box-shadow:0 3px 10px rgba(31,48,36,.04); }
.ck-relais-item--compact { padding-top:9px; padding-bottom:9px; }
.ck-relais-item.selected { border-color:var(--coral); background:var(--sage-bg); box-shadow:0 0 0 1px var(--border-coral-09), 0 6px 14px rgba(62,94,69,.07); }
.ck-relais-item.selected::before { content:"\2713"; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; background:var(--coral); color:var(--white); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.ck-relais-name { display:block; font-size:.9rem; font-weight:700; color:var(--text); }
.ck-relais-addr { display:block; margin-top:2px; font-size:.72rem; line-height:1.25; color:var(--text-muted); }

/* SMS sender */
.ck-sms-body { padding:6px 0 4px; gap:4px; }
.ck-sms-body .k-of-group { margin-bottom:0; }

/* Bouton confirmer sticky */
.ck-confirm-btn {
  flex-shrink:0; width:100%;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border-radius:0;
  background: var(--checkout-accent);
  color: var(--checkout-accent-light); font-weight:800; font-size:1rem;
  border:none; border-top:2.5px solid var(--checkout-accent-hover); cursor:pointer;
  box-shadow: 0 -2px 12px rgba(99,56,6,.18);
  transition: filter .2s, transform .15s; z-index:5; min-height:64px;
}
.ck-confirm-btn:active   { transform:scale(.97); filter:brightness(.95); }
.ck-confirm-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.ck-confirm-main    { font-size:1rem; font-weight:800; line-height:1.15; }
.ck-confirm-amount  { font-size:1.1rem; font-weight:900; line-height:1.1; }
.ck-confirm-subtext { font-size:.71rem; font-weight:600; line-height:1.15; color:var(--checkout-accent-light); opacity:.80; }

/* Bouton retour panier */
.ck-back-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; margin:0 0 14px; background:transparent; border:1px solid var(--border); border-radius:50px; color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s var(--ease); }
.ck-back-btn:hover  { background:var(--sand-dark); color:var(--text); border-color:var(--text-muted); }
.ck-back-btn:active { transform:scale(.97); }

/* Modal checkout header */
.k-order-header         { min-height:38px; padding:3px 10px; padding-top:calc(3px + env(safe-area-inset-top)); background:var(--checkout-accent); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; font-weight:700; font-size:.9rem; color:var(--checkout-accent-light); }
.k-order-body           { flex:1; overflow-y:auto; padding:4px 10px 8px; }
.k-order-body--checkout { padding: 12px 12px calc(90px + env(safe-area-inset-bottom)); }
.ck-order-title-text    { font-size:.92rem; font-weight:800; letter-spacing:.01em; }
.ck-modal-back-btn--header { min-height:32px; padding:0 9px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.10); color:var(--white); font-size:.74rem; font-weight:700; white-space:nowrap; }

/* Recap articles mini */
.ck-recap        { background:var(--sand); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; margin-bottom:16px; }
.ck-recap-head   { display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--border); }
.ck-recap-title  { font-size:14px; font-weight:700; color:var(--text); }
.ck-recap-total  { font-size:15px; font-weight:800; color:var(--sage-dark); }
.ck-recap-list   { display:flex; flex-direction:column; gap:8px; }
.ck-recap-item   { display:flex; align-items:center; gap:10px; }
.ck-recap-thumb  { width:42px; height:42px; border-radius:var(--radius-sm); object-fit:cover; background:var(--sand-dark); flex-shrink:0; }
.ck-recap-thumb--empty { background:var(--sand-dark); }
.ck-recap-info   { flex:1; min-width:0; }
.ck-recap-name   { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-recap-qty    { font-size:11px; color:var(--text-muted); margin-top:2px; }
.ck-recap-more   { font-size:12px; color:var(--text-muted); font-style:italic; text-align:center; padding-top:6px; border-top:1px dashed var(--border); }

/* Tracking label */
.k-ck-track-label { font-size:.8rem; font-weight:600; display:block; margin-bottom:3px; }

/* Misc */
.k-search-empty  { padding:16px; text-align:center; color:var(--text-muted); font-size:14px; }
.k-fav-hint      { font-size:12px; }
.k-fav-count     { font-size:14px; font-weight:400; color:var(--text-muted); }
.k-track-btn--mt { margin-top:8px; }
.k-otp-back-btn  { margin-top:16px; }
.k-spinner--sm   { width:22px; height:22px; }

/* Garantir la structure du modal paiement */
.k-order-overlay.open { display:flex; z-index:1200; }
.k-order-overlay.open .k-order-modal { display:flex; flex-direction:column; height:100vh; height:100dvh; max-height:100dvh; overflow:clip; /* .ck-confirm-btn est flex child dans les bounds — overflow:visible plus nécessaire */ }
.k-order-overlay.open .k-order-body  { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; min-height:0; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
/* BUG 4 FIX : le bouton est un enfant flex du modal (hors zone de scroll).
   overflow:hidden sur le modal le clippait quand le contenu �tait trop tall.
   On passe le modal en overflow:visible et on coupe uniquement via clip-path
   pour pr�server l'animation slide-up sans clip du bouton sticky. */
.k-order-overlay.open .ck-confirm-btn { flex:0 0 auto; position:relative; bottom:auto; width:100%; margin:0; z-index:1300; padding-bottom:calc(14px + env(safe-area-inset-bottom)); }

/* Ring pulse bouton panier */
@keyframes k-ring-pulse { 0% { box-shadow:0 0 0 0 rgba(255,90,70,.5); } 65% { box-shadow:0 0 0 12px rgba(255,90,70,0); } 100% { box-shadow:0 0 0 0 rgba(255,90,70,0); } }
/* FIX Bug 1: l'animation CSS cr�e un compositing layer isol� qui casse mix-blend-mode sur .k-cart-avatar.
   On applique l'animation sur un pseudo-element ::after au lieu du parent,
   et on force mix-blend-mode:multiply sur l'avatar m�me pendant l'animation. */
.k-cart-btn.ring-pulse { border-radius:50%; }
.k-cart-btn.ring-pulse::after {
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  animation:k-ring-pulse .65s ease-out 2;
}
.k-cart-btn.ring-pulse .k-cart-avatar,
.k-cart-btn.avatar-wave .k-cart-avatar {
  /* FIX : multiply retiré — l'avatar est désormais détouré (fond transparent),
     multiply le salissait sur fond crème pendant l'animation d'ajout. */
  mix-blend-mode: normal;
}

/* Bouton ajouter "confirmed" */
.k-add-cart-btn.confirmed { background:var(--ocean); color:var(--white); font-size:13px; font-weight:700; justify-content:center; }
.k-add-cart-btn.in-cart { background: var(--green-bg-leaf); color: var(--green-text-strong); border-color: var(--cta-green); font-weight: 700; }

/* INTENTIONNEL @600px � compl�ment du bloc L160 (.k-order-modal centr�).
   Fix Bug 4 : r�tablit overflow:hidden pour le border-radius sur tablette/desktop,
   compatible avec .ck-confirm-btn toujours visible (dernier enfant flex, hors scroll). */
@media (min-width: 900px) {
  .k-order-overlay.open .k-order-modal { height:auto; max-height:92vh; overflow:hidden; }
  /* Sur desktop le modal a une hauteur fixe (92vh) : on r�tablit overflow:hidden pour
     le border-radius, mais le bouton confirmer est le dernier enfant flex ?
     il reste toujours dans le flux et visible, pas clipp� par le scroll. */
  .k-order-overlay.open .ck-confirm-btn { border-radius:0 0 var(--radius-lg) var(--radius-lg); }
}


/* ---------------------------------------------------------------
   �CRAN SUCC�S COMMANDE � d�plac� depuis interactions.css
   --------------------------------------------------------------- */

.k-success-screen {
  display: none;
  position: fixed; inset: 0; z-index: 2100;
  background: var(--white);
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
  text-align: center;
}
.k-success-screen.show { display: flex; }
.k-success-icon { font-size: 72px; line-height: 1; margin-bottom: 20px; animation: successPop .5s var(--ease-spring); }
@keyframes successPop { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
.k-success-title { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.k-success-sub   { font-size: 15px; color: var(--text-muted); line-height: 1.5; margin-bottom: 24px; max-width: 320px; }
.k-success-ref   { font-size: 22px; font-weight: 900; color: var(--ocean-dark); letter-spacing: .05em; background: var(--sand); padding: 12px 28px; border-radius: 12px; margin-bottom: 16px; display: inline-block; box-shadow: var(--elev-1); }
.k-success-ref-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: .06em; margin-bottom: 4px; }
.k-success-cash-block {
  background: var(--sand-warm); border-radius: 14px; padding: 16px 20px; margin-bottom: 20px;
  border: 1px solid var(--border); text-align: left; width: 100%; max-width: 320px;
  box-shadow: var(--elev-1);
}
.k-success-cash-code { font-size: 28px; font-weight: 900; color: var(--hero-red); letter-spacing: .08em; margin-bottom: 4px; }
.k-success-cash-info { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.k-success-review-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.k-success-review-btn { padding: 10px 18px; border-radius: 50px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--border); background: var(--white); cursor: pointer; transition: all .2s var(--ease); }
.k-success-review-btn.selected { background: var(--ocean); color: var(--white); border-color: var(--ocean); box-shadow: var(--elev-2); }
.k-success-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.k-success-cta-primary { padding: 14px; border-radius: 50px; background: var(--ocean-dark); color: var(--white); font-size: 15px; font-weight: 700; border: none; cursor: pointer; width: 100%; transition: opacity .15s, transform .15s; box-shadow: var(--elev-2); }
.k-success-cta-primary:hover  { opacity: .92; transform: translateY(-1px); }
.k-success-cta-primary:active { opacity: .85; transform: scale(.98); }
.k-success-cta-ghost { padding: 12px; border-radius: 50px; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 600; border: 1.5px solid var(--border); cursor: pointer; width: 100%; transition: all .2s var(--ease); }
.k-success-cta-ghost:hover { background: var(--sand); color: var(--text); }

/* Tracking form � d�plac� depuis interactions.css */
.k-track-input        { width:100%; padding:12px 14px; border:1.5px solid var(--sand-dark); border-radius:8px; outline:none; font-size:15px; font-weight:700; letter-spacing:4px; background:var(--white); transition:border-color .2s; }
.k-track-input:focus  { border-color:var(--coral); box-shadow: 0 0 0 3px rgba(200,92,45,.1); }
.k-track-input--phone { letter-spacing:normal; font-weight:400; font-size:14px; }
.k-track-phone-wrap   { display:flex; gap:0; width:100%; border:1.5px solid var(--sand-dark); border-radius:8px; overflow:hidden; background:var(--white); transition:border-color .2s; }
.k-track-phone-wrap:focus-within { border-color:var(--coral); box-shadow: 0 0 0 3px rgba(200,92,45,.08); }
.k-track-country      { flex:0 0 100px; border:none; border-right:1.5px solid var(--sand-dark); background:var(--sand); padding:0 10px; font-size:14px; font-weight:600; color:var(--text); outline:none; }
.k-track-btn--ghost   { background:transparent; border:1.5px solid var(--border); color:var(--text-muted); border-radius:50px; padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer; transition:all .2s var(--ease); }
.k-track-btn--ghost:hover { background:var(--sand); color:var(--text); border-color:var(--text-muted); }

/* Confirm legacy � d�plac� depuis interactions.css */
.k-confirm-wrap        { text-align:center; padding:14px 0; }
.k-confirm-sub         { color:var(--text-form-light); font-size:.85rem; margin-bottom:2px; }
.k-confirm-close       { margin-top:6px; width:100%; padding:10px; border-radius:8px; font-weight:600; font-size:.85rem; background:var(--green-bg-warm-lt); color:var(--text); border:1px solid rgba(0,0,0,.08); cursor:pointer; transition: background .15s; }
.k-confirm-close:hover { background:var(--green-bg-warm-md); }
.k-confirm-track       { margin-top:12px; width:100%; padding:11px; border-radius:8px; font-weight:700; font-size:.9rem; background:var(--sage); color:white; border:none; cursor:pointer; transition: opacity .15s; }
.k-confirm-track:active { opacity: .85; }
.k-confirm-loyalty     { margin-top:10px; padding:8px 12px; background:var(--green-bg-lightest); border-radius:8px; border:1px solid var(--green-bg-mid-soft); font-size:.82rem; color:var(--green-deep-text); font-weight:600; }
.k-confirm-credit      { margin-top:6px; padding:8px 14px; background:linear-gradient(135deg,var(--green-bg-mid),var(--green-bg-warm)); border-radius:8px; font-size:.85rem; text-align:center; }
.k-confirm-credit strong { color:var(--sage-dark); }
.k-confirm-cash-lbl    { margin-top:10px; font-weight:700; font-size:.88rem; }
.k-confirm-cash-ref    { display:inline-block; background:var(--cream-amber-bg); color:var(--amber-text-mid); font-weight:800; font-size:1.15rem; padding:8px 22px; border-radius:10px; margin:6px 0; letter-spacing:2px; border:2px solid var(--amber-light-bg); font-family:monospace; }

/* -- Checkout ultra compact ------------------------------------ */
.ck-relay-note    { font-size:.72rem; color:var(--text-muted); margin:0 0 5px; line-height:1.3; }
.ck-step-card     { padding:2px 0; }
.ck-step-title    { font-size:.9rem; font-weight:700; color:var(--text); }
.ck-step-sub      { font-size:.72rem; color:var(--text-muted); margin-top:1px; line-height:1.3; }
.ck-step-actions  { margin-top:4px; }
.ck-step-btn      { width:100%; padding:9px 14px; border-radius:10px; font-size:.85rem; font-weight:700; cursor:pointer; border:none; transition:all .15s; }
.ck-step-btn--primary { background:var(--sage-dark); color:var(--white); }
.ck-step-btn--ghost   { background:transparent; border:1.5px solid var(--border); color:var(--text-muted); font-weight:600; }
.ck-step-chips    { display:flex; gap:6px; padding:6px 0 4px; overflow-x:auto; scrollbar-width:none; }
.ck-step-chips::-webkit-scrollbar { display:none; }
.ck-step-chip     { flex-shrink:0; padding:4px 12px; border-radius:20px; border:1.5px solid var(--border); background:var(--white); font-size:.75rem; font-weight:700; color:var(--text-muted); cursor:pointer; white-space:nowrap; transition:all .15s; }
.ck-step-chip.active { background:var(--sage-dark); color:var(--white); border-color:var(--sage-dark); }
.ck-step-panel    { display:none; }
.ck-step-panel.active { display:block; }

/* Indicateur de suivi optionnel � discret */
.ck-track-details summary { font-size:.78rem; font-weight:600; color:var(--text-muted); padding:6px 0; }
.ck-track-hint    { font-size:.7rem; color:var(--text-muted); margin-top:2px; }

/* --------------------------------------------------------------
   FLAT SUBCAT � layout natif scroll-snap (b-subcat.js)
   S�par� du pager cat�gories (b-pager.js / slide animation)
   -------------------------------------------------------------- */
#k-page-scroll.k-pager-active #k-grid.k-grid-flat-subcat {
  display: flex;
  width: 100%;
  height: var(--pager-h);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Annuler tout translateX r�siduel du pager cat�gories */
  transform: none;
  transition: none;
  gap: 0;
  padding: 0;
  margin: 0;
  grid-template-columns: none;
}
#k-page-scroll.k-pager-active #k-grid.k-grid-flat-subcat > .k-flat-subcat-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: var(--pager-h);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding-bottom: calc(var(--bnav-h) + 64px);
}
/* Pendant le drag flat, d�sactiver le scroll-snap pour fluidit� */
#k-grid.k-grid-flat-subcat.is-flat-dragging {
  scroll-snap-type: none;
}

/* --------------------------------------------------------------
   SHARE MODAL � bottom sheet partage panier
   (anciennement inject� dynamiquement via _injectShareModalCSS)
   -------------------------------------------------------------- */

.k-share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.k-share-sheet {
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 28px 20px 36px;
  width: 100%;
  max-width: 480px;
  animation: kShareIn .3s ease;
}
@keyframes kShareIn {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.k-share-title {
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
}
.k-share-sub {
  font-size: 13px;
  color: var(--text-form-soft);
  text-align: center;
  margin-bottom: 22px;
}
.k-share-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.k-share-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 2px solid var(--border-soft-md);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s;
  background: var(--white);
}
.k-share-choice:active,
.k-share-choice:hover { border-color: var(--hero-red); background: var(--cream-blush); }
.k-share-choice-icon  { font-size: 32px; flex-shrink: 0; }
.k-share-choice-label { font-size: 15px; font-weight: 700; }
.k-share-choice-desc  { font-size: 12px; color: var(--text-form-mid-md); margin-top: 2px; }
.k-share-cancel {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border: none;
  background: none;
  color: var(--text-form-soft);
  font-size: 14px;
  cursor: pointer;
}
.k-family-total {
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  color: var(--hero-red);
  margin: 8px 0 18px;
}
.k-share-sub-family {
  font-size: 14px;
  color: var(--text-strong-mid);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.5;
}
.k-event-form label {
  font-size: 13px;
  color: var(--text-form-mid-md);
  display: block;
  margin-bottom: 4px;
  margin-top: 14px;
}
.k-event-form input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-soft-md);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.k-event-form input:focus { border-color: var(--hero-red); }
.k-event-go {
  width: 100%;
  padding: 13px;
  background: var(--hero-red);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 16px;
}

/* --------------------------------------------------------------
   BOUTON PAYER EN GROUPE
   (anciennement inject� dynamiquement via k-cart-event-css)
   -------------------------------------------------------------- */

.k-cart-event-btn {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, var(--violet, var(--violet)), var(--violet-dark, var(--violet-dark)));
  color: var(--white);
  border: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  box-shadow: 0 4px 14px var(--violet-light, rgba(108,63,197,.3));
  letter-spacing: .01em;
}

/* is-attention + is-expanded : déplacés dans boutique-desktop.css (owner §3). */

/* ── Bloc récap identité payeur — checkout (feat/checkout-otp) ────────────
   Owner : cart.css (CSS checkout)
   Doctrine : §9 DOCTRINE_IDENTITE_LEGERE_KOMERCE — "Vous commandez avec X"
   Réutilise les tokens checkout existants (.k-ck-* / --coral / --sand / --text)
   -------------------------------------------------------------------------- */

.k-ck-identity-recap {
  display: block;
  margin-bottom: 18px;
}

.k-ck-id-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  line-height: 1;
}

.k-ck-id-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: .94rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  min-width: 0;
}
.k-ck-id-hi { font-size: .95rem; flex: 0 0 auto; }
.k-ck-id-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Actions regroupées dans le même coin (dans le padding de la carte) */
.k-ck-id-actions-col {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* « ✅ identifié » — pastille verte au-dessus de « Changer »
   Confirme visuellement que le compte est reconnu/vérifié (2026-06-09).
   Remplace l'ancien bloc vert « Vous récupérez cette commande » qui faisait
   doublon avec la carte du haut et le récap du bouton « Confirmer ». */
.k-ck-id-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--sage-bg);
  color: var(--sage-deeper);
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.3;
  white-space: nowrap;
  letter-spacing: .01em;
}
.k-ck-id-verified-ic { font-size: .72rem; line-height: 1; }
.k-ck-id-change {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--sage-dark);
  cursor: pointer;
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}
.k-ck-id-change:hover {
  text-decoration: underline;
}

/* « Ce n'est pas vous ? » — discret, sous Changer, même coin */
.k-ck-id-notyou {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-align: right;
  line-height: 1.2;
  white-space: nowrap;
}
.k-ck-id-notyou:hover {
  color: var(--sage-dark);
  text-decoration: underline;
}

/* ── Carte commandeur — ligne calme « avatar · nom/tél · Changer » ── */
.k-ck-id-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: 0 1px 2px var(--border-text-04);
}
.k-ck-id-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sage);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 800;
}
.k-ck-id-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ocean-dark);
  border: 1.5px solid var(--border-sage-22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  font-weight: 900;
  animation: ckIdCheckPulse 2s ease-in-out infinite;
}
@keyframes ckIdCheckPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31,122,84,.45); }
  50%       { box-shadow: 0 0 0 4px rgba(31,122,84,.0); }
}
.k-ck-id-ident {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.k-ck-id-card .k-ck-id-value {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-ck-id-num {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.k-ck-id-badge {
  flex: 0 0 auto;
  background: var(--green-bg-leaf);
  color: var(--whatsapp-dk);
  font-size: .68rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.k-ck-id-autofill {
  font-size: .72rem;
  font-weight: 600;
  color: var(--whatsapp-dk);
  margin-top: 6px;
}
.k-ck-id-actions {
  font-size: .74rem;
  color: var(--text-muted);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.k-ck-id-link {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: .74rem;
  font-weight: 700;
  color: var(--coral);
  cursor: pointer;
  line-height: 1.2;
}
.k-ck-id-link:hover { text-decoration: underline; }
.k-ck-id-sep { color: var(--border); }

/* ── COMMIT 2 — Point de retrait : ligne repliée + picker pays → île ──────── */
/* Ligne résumé (remplace les chips d'îles + la carte relais lourde). */
.ck-relais-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--sage-bg);
  border: 1px solid var(--border-sage-14);
  border-radius: 14px;
  padding: 11px 13px;
  cursor: pointer;
  font: inherit;
}
.ck-relais-summary-pin { flex: 0 0 auto; }
.ck-relais-pin-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cta-green);
  color: var(--white);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.ck-relais-summary-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ck-relais-summary-main {
  font-size: .88rem; font-weight: 700; color: var(--text); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ck-relais-summary-sub { font-size: .74rem; font-weight: 600; color: var(--sage-dark); line-height: 1.2; }
.ck-relais-summary-change { margin-left: auto; flex: 0 0 auto; font-size: .8rem; font-weight: 700; color: var(--sage-dark); }
.ck-relais-section.is-error .ck-relais-summary { border-color: var(--coral); background: var(--terracotta-bg-pale); }

/* Feuille (bottom sheet) pays → île. */
.ck-relais-overlay {
  position: fixed; inset: 0; z-index: 2450;
  background: rgba(20,40,30,.42);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s; -webkit-tap-highlight-color: transparent;
}
.ck-relais-overlay.is-open { opacity: 1; }
@media (min-width: 900px) { .ck-relais-overlay { align-items: center; } }
.ck-relais-sheet {
  width: 100%; max-width: 460px; background: var(--white);
  border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%); transition: transform .28s cubic-bezier(.3,.9,.3,1);
  max-height: 88vh; display: flex; flex-direction: column;
}
@media (min-width: 900px) { .ck-relais-sheet { border-radius: 22px; } }
.ck-relais-overlay.is-open .ck-relais-sheet { transform: none; }
.ck-relais-grab { width: 38px; height: 4px; border-radius: 999px; background: var(--border); margin: 10px auto 2px; }
.ck-relais-sheet-top { display: flex; align-items: center; padding: 8px 18px 12px; }
.ck-relais-sheet-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.ck-relais-sheet-x {
  margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 999px;
  background: var(--border-text-06); color: var(--text-muted); font-weight: 700; cursor: pointer;
}
.ck-relais-sheet-body { padding: 4px 18px 18px; overflow: auto; }
.ck-relais-step {
  display: flex; align-items: center; gap: 7px; margin: 0 2px 9px;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.ck-relais-step-n {
  width: 16px; height: 16px; border-radius: 999px; background: var(--ocean); color: var(--white);
  font-size: .62rem; display: flex; align-items: center; justify-content: center;
}
.ck-relais-country { display: flex; gap: 8px; margin-bottom: 20px; }
.ck-relais-country button,
.ck-relais-iles button {
  flex: 1; border: 1px solid var(--border-text-10); border-radius: 12px;
  background: var(--white); font: inherit; font-weight: 700; color: var(--text-muted); cursor: pointer;
}
.ck-relais-country button { padding: 12px; font-size: .85rem; }
.ck-relais-iles { display: flex; gap: 8px; margin-bottom: 18px; }
.ck-relais-iles button { padding: 11px 4px; font-size: .8rem; }
.ck-relais-country button.on,
.ck-relais-iles button.on {
  border-color: var(--coral); background: var(--sage-bg); color: var(--sage-dark);
  box-shadow: 0 0 0 1px var(--coral) inset;
}
.ck-relais-auto {
  display: flex; align-items: center; gap: 11px;
  background: var(--sage-bg); border: 1px solid var(--border-sage-14);
  border-radius: 13px; padding: 13px;
}
.ck-relais-auto-ok {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 999px; background: var(--coral); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .8rem;
}
.ck-relais-auto-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ck-relais-auto-name { font-size: .88rem; font-weight: 700; color: var(--text); }
.ck-relais-auto-addr { font-size: .74rem; font-weight: 600; color: var(--sage-dark); }
.ck-relais-auto-cap { font-size: .72rem; font-weight: 600; color: var(--text-muted); font-style: italic; margin: 9px 4px 0; }
.ck-relais-sheet-cta {
  width: 100%; margin-top: 16px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--ocean); color: var(--white); font: inherit; font-weight: 800; font-size: .95rem; padding: 14px;
}
.ck-relais-sheet-cta[disabled] { opacity: .5; cursor: default; }

/* ── UX REFONTE CHECKOUT — Sections pédagogiques (2026-05) ─────────────────
   Patch minimal : nouveaux wrappers de section, titres, aides, case "c'est moi".
   Ne touche pas aux classes existantes.
   -------------------------------------------------------------------------- */

/* Titre de section court en capslock */
.ck-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  line-height: 1;
  margin-bottom: 8px;
}

/* Badge numéroté ① ② ③ — cercle vert marché */
.ck-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  background: var(--checkout-accent);
  color: var(--white);
  font-size: .6rem;
  font-weight: 900;
  border-radius: 50%;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}

/* Aide pédagogique discrète sous le titre */
.ck-section-hint {
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Bloc de section — mobile-first */
.ck-section-block {
  padding-top: 12px;
  margin-top: 0;
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
}
.ck-section-block:first-child {
  border-top: none;
  padding-top: 0;
}

/* Quand les champs bénéficiaire sont visibles (mode "Quelqu'un d'autre"),
   toutes les sections passent en padding minimal pour tenir dans l'écran.
   Owner : cart.css — conforme R3/R5. */
.k-order-body--checkout:has(.ck-recip-fields:not([hidden])) .ck-section-block {
  padding-top: 8px;
}
.k-order-body--checkout:has(.ck-recip-fields:not([hidden])) .ck-section-block:first-child {
  padding-top: 0;
}

/* Label section pour le titre VOUS COMMANDEZ AVEC */
.k-ck-id-label--section {
  font-size: .62rem;
  letter-spacing: .07em;
  margin-bottom: 2px;
}

/* ── Case « Je récupère moi-même » compactée ── */
.ck-benf-me-label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  margin-top: 3px;
  background: var(--green-bg-leaf);
  border: 1px solid var(--leaf-border, var(--border));
  border-radius: 10px;
  padding: 8px 10px;
}
.ck-benf-me-cb {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--cta-green);
  flex-shrink: 0;
}
.ck-benf-me-text { display: flex; flex-direction: column; gap: 1px; }
.ck-benf-me-title { font-size: .82rem; font-weight: 700; color: var(--text); }
.ck-benf-me-sub { font-size: .68rem; color: var(--text-muted); }
.ck-recip-fields {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ck-recip-fields .k-ck-group { margin-bottom: 0; }
.ck-recip-fields .k-ck-label { margin-bottom: 2px; font-size: .76rem; }
.ck-recip-fields .k-ck-input { min-height: 34px; font-size: .9rem; }
.ck-recip-fields .k-ck-km-wrap { height: 34px; }
.ck-recip-fields .k-ck-km-input { font-size: .9rem; }
.ck-recip-fields[hidden] { display: none; }

/* « Qui récupère ? » — segment Moi / Quelqu'un d'autre (remplace la case à cocher) */
.ck-recip-seg {
  display: flex;
  gap: 3px;
  background: var(--border-text-06);
  border-radius: 12px;
  padding: 3px;
  margin-bottom: 4px;
}
.ck-recip-seg button {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 11px 6px;
  border-radius: 9px;
  cursor: pointer;
}
.ck-recip-seg button.on {
  background: var(--checkout-sel-bg);
  color: var(--coral);
  box-shadow: inset 0 0 0 1.5px var(--coral);
}
.ck-recip-note {
  font-size: .76rem;
  font-weight: 600;
  color: var(--ocean-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

/* ── Checkout body mobile ── */
.k-order-body--checkout {
  padding: 10px 14px calc(74px + env(safe-area-inset-bottom)) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Le vide entre Relais et Paiement est désormais comblé par .ck-self-pickup-info
   en mode Moi (bloc métier), et par les champs bénéficiaire en mode Quelqu'un d'autre. */
.ck-self-pickup-info {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--green-bg-leaf);
  border: 1px solid var(--leaf-border, var(--border));
  color: var(--text);
}
.ck-self-pickup-info[hidden] { display: none; }
.ck-self-pickup-title {
  font-weight: 800;
  font-size: .86rem;
  margin-bottom: 6px;
  color: var(--ocean-dark);
}
.ck-self-pickup-line {
  font-size: .76rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.ck-self-pickup-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--leaf-border, var(--border));
}
.ck-spi-changed,
.ck-spi-notyou {
  background: none;
  border: none;
  padding: 0;
  font-size: .72rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  line-height: 1.3;
}
.ck-spi-changed:hover,
.ck-spi-notyou:hover { color: var(--sage-dark); }

/* Guest hint plus compact */
.k-ck-guest-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-peach);
  border: 1px solid var(--border-coral-22, var(--border));
  border-radius: 9px;
  padding: 7px 10px;
  margin-bottom: 8px;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--text);
}
.k-ck-guest-ic { font-size: 1rem; flex: 0 0 auto; }

/* Recap identité compact */
.k-ck-identity-recap {
  margin-bottom: 4px;
}

/* ── Pill compact checkout : « 👋 Sam · +336… · Changer »  ──────────────
   CSS-only : le DOM reste identique, bindChangeIdentity() fonctionne.
   « Ce n'est pas vous ? » reste dans le DOM (câblé JS) mais masqué visuellement.
   Owner : cart.css — conforme R3/R4/R5. */
.k-order-body--checkout .k-ck-id-card {
  padding: 7px 12px;
  border-radius: 10px;
  gap: 8px;
  box-shadow: none;
  background: var(--sand);
  border-color: var(--border);
}
.k-order-body--checkout .k-ck-id-avatar {
  width: 26px;
  height: 26px;
  font-size: .72rem;
  flex-shrink: 0;
}
.k-order-body--checkout .k-ck-id-check {
  width: 12px;
  height: 12px;
  font-size: .46rem;
  right: -2px;
  bottom: -2px;
}
.k-order-body--checkout .k-ck-id-ident {
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.k-order-body--checkout .k-ck-id-card .k-ck-id-value {
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.k-order-body--checkout .k-ck-id-num {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  flex-shrink: 1;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.k-order-body--checkout .k-ck-id-card {
  flex-wrap: wrap;
  gap: 8px 13px;
}
.k-order-body--checkout .k-ck-id-actions-col {
  flex-basis: 100%;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.k-order-body--checkout .k-ck-id-verified {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  font-size: .62rem;
  padding: 1px 5px;
}
.k-order-body--checkout .k-ck-id-change {
  font-size: .82rem;
}
.k-order-body--checkout .k-ck-id-notyou {
  font-size: .82rem;
}
/* « Ce n'est pas vous ? » visible en mode Moi, masqué en mode Quelqu'un d'autre (via JS hidden) */


/* Relais plus aéré mais compact */
.ck-relais-ile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 5px;
}
.ck-relais-ile-btn {
  min-height: 32px;
  font-size: .74rem;
}
.ck-relais-item {
  padding: 6px 8px 6px 28px;
  margin-bottom: 4px;
}
.ck-relais-name { font-size: .84rem; }
.ck-relais-addr { font-size: .68rem; }

/* Paiement chips compact */
.ck-pay-grid { gap: 5px; margin-bottom: 4px; }
.ck-pay-chip { min-height: 34px; padding: 1px 3px; gap: 1px; }
.ck-chip-icon { font-size: .95rem; }
.ck-chip-lbl { font-size: .68rem; }

/* Bouton confirmer compact */
.ck-confirm-btn {
  min-height: 56px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
}
.ck-confirm-main  { font-size: .92rem; }
.ck-confirm-amount { font-size: 1rem; }
.ck-confirm-subtext { font-size: .67rem; }

/* Helper cash compact */
.ck-pay-helper {
  margin: 3px 0 5px;
  padding: 5px 8px;
  font-size: .68rem;
}

/* Fulfillment switch compact */
.ck-fulfillment-switch { gap: 5px; margin: 0 0 8px; }
.ck-fulfillment-btn { min-height: 28px; font-size: .76rem; }

/* Wallet section compact */
.k-wallet-section { margin-top: 4px; padding: 6px 8px; }
.k-wallet-title { font-size: .8rem; }
.k-wallet-balance { font-size: .68rem; }

/* Sur desktop, restaurer les tailles normales (breakpoint canonique 900) */
@media (min-width: 900px) {
  .k-order-body--checkout {
    padding: 16px 16px calc(90px + env(safe-area-inset-bottom)) !important;
  }
  .ck-section-block { padding-top: 18px; }
  .ck-section-title { font-size: .68rem; margin-bottom: 6px; }
  .ck-benf-me-label { padding: 10px 12px; }
  .ck-confirm-btn { min-height: 64px; }
  .ck-relais-ile-btn { min-height: 36px; font-size: .78rem; }
}


/* ── S3.2 — Mode édition panier collectif (tiré de b-cart.js inline styles) ── */
/* Drawer panier (k-cart-edit-bar) */
#k-cart-edit-bar {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.k-cart-edit-header {
  background: linear-gradient(135deg, var(--collective-navy), var(--green-text-sett));
  color: var(--white);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .75rem;
  font-weight: 700;
}

#k-cart-edit-update {
  background: var(--green-text-sett);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-weight: 800;
  font-size: .875rem;
  cursor: pointer;
  width: 100%;
}

#k-cart-edit-cancel {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font-size: .8125rem;
  cursor: pointer;
  width: 100%;
}

#k-cart-edit-err {
  color: var(--collective-err);
  font-size: .75rem;
  margin: 0;
  min-height: 14px;
}

/* Side-cart (k-sc-edit-bar) */
#k-sc-edit-bar {
  background: linear-gradient(135deg, var(--collective-navy) 0%, var(--green-text-sett) 100%);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.k-sc-edit-header {
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#k-sc-edit-update {
  background: var(--white);
  color: var(--collective-navy);
  border: none;
  border-radius: 9px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: .8125rem;
  cursor: pointer;
  width: 100%;
  line-height: 1.2;
}

#k-sc-edit-cancel {
  background: transparent;
  color: rgba(255 255 255 / .85);
  border: 1px solid rgba(255 255 255 / .4);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

#k-sc-edit-err {
  color: var(--collective-err-light);
  font-size: .6875rem;
  margin: 0;
  min-height: 14px;
}

/* ── Invitation douce « Nouveau ? » (checkout sans cookie) ── */
.k-ck-guest-hint {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--cream-peach);
  border: 1px solid var(--border-coral-22, var(--border));
  border-radius: 13px;
  padding: 13px 14px;
  margin-bottom: 18px;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--text);
}
.k-ck-guest-ic { font-size: 1.1rem; flex: 0 0 auto; }

/* ---------------------------------------------------------------
   CART PILL — pastille panier flottante + popover (mobile uniquement)
   Rapatrié depuis b-cart-pill.js (L3-S6)
   Owner : cart.css
   --------------------------------------------------------------- */

/* ── Cart Pill ─────────────────────────────── */
.kpill {
  position: fixed;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--ocean-dark), var(--ocean-dark-deep));
  color: var(--white);
  border-radius: 50px;
  box-shadow: 0 4px 18px rgba(42,122,62,.35), 0 1px 4px rgba(0,0,0,.15);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: grab;
  user-select: none;
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transform: scale(.75);
  transition: opacity .2s ease, transform .25s var(--ease, ease);
  will-change: transform;
}
.kpill--visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.kpill:active { cursor: grabbing; }

.kpill-icon { font-size: 16px; line-height: 1; }

.kpill-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--white);
  color: var(--ocean-dark);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpill-total {
  font-size: 12px;
  font-weight: 700;
  opacity: .95;
  white-space: nowrap;
}

/* ── Popover ───────────────────────────────── */
.kpill-pop {
  position: fixed;
  z-index: 1501;
  width: 270px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-lg, 0 8px 30px rgba(31,48,36,.12));
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(.94) translateY(6px);
  transition: opacity .18s ease, transform .18s var(--ease, ease);
}
.kpill-pop--open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

.kpill-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px 9px;
  background: var(--ocean-dark);
  color: var(--white);
}
.kpill-pop-title {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpill-pop-qty {
  background: rgba(255,255,255,.25);
  border-radius: 50px;
  padding: 1px 7px;
  font-size: 11px;
}
.kpill-pop-close {
  background: rgba(255,255,255,.2);
  border: none;
  color: var(--white);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
}
.kpill-pop-close:hover { background: rgba(255,255,255,.35); }

.kpill-pop-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px 0;
}

.kpill-pop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  transition: background .12s;
}
.kpill-pop-row:hover { background: var(--sand-hover); }

.kpill-pop-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.kpill-pop-img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--sand-warm);
}

.kpill-pop-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kpill-pop-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpill-pop-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.kpill-pop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--sand-footer);
}
.kpill-pop-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.kpill-pop-total {
  font-size: 14px;
  font-weight: 800;
  color: var(--ocean-dark);
}

/* ── Écran de confirmation commande (buildOrderSuccessDOM) ───────────────────
   Mobile-first compact : tout tient dans l'écran sans scroller.
   Owner : cart.css — conforme R3/R4/R5.
   ─────────────────────────────────────────────────────────────────────────── */
.k-confirm-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 20px;
  text-align: center;
}
.k-confirm-emoji {
  font-size: 2.2rem;
  line-height: 1;
}
.k-confirm-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.k-confirm-ref-block {
  width: 100%;
  background: var(--green-bg-leaf);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.k-confirm-ref-label {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}
.k-confirm-ref {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: .06em;
  font-family: monospace;
  line-height: 1;
}
.k-confirm-copy {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--sage-dark);
  cursor: pointer;
}
.k-confirm-recap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--text-muted);
}
.k-confirm-recap-amount { font-weight: 800; color: var(--text); }
.k-confirm-recap-sep    { color: var(--text-muted); }
.k-confirm-cash-block {
  width: 100%;
  border: 2px dashed var(--coral);
  border-radius: 14px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.k-confirm-cash-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--sage-dark);
}
.k-confirm-cash-code {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--sage-deeper);
  letter-spacing: .12em;
  font-family: monospace;
  line-height: 1;
}
.k-confirm-notices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.k-confirm-notice-row {
  font-size: .78rem;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.3;
}
.k-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.k-confirm-btn {
  width: 100%;
  border: none;
  border-radius: 50px;
  padding: 13px 20px;
  font: inherit;
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .15s;
}
.k-confirm-btn:active     { opacity: .85; }
.k-confirm-btn-primary    { background: var(--checkout-accent); color: var(--white); }
.k-confirm-btn-secondary  { background: var(--sage-bg); color: var(--sage-dark); border: 1px solid var(--border-sage-14); }

/* Mobile (point 7) : version compacte — la confirmation tient dans l'écran
   sans scroller, même avec le bloc code cash. */
@media (max-width: 899px) {
  .k-confirm-simple   { gap: 7px; padding: 8px 12px 12px; }
  .k-confirm-emoji    { font-size: 1.6rem; }
  .k-confirm-title    { font-size: 1.12rem; }
  .k-confirm-ref-block { padding: 9px 12px; gap: 4px; border-radius: 12px; }
  .k-confirm-ref      { font-size: 1.32rem; }
  .k-confirm-copy     { padding: 4px 12px; font-size: .76rem; }
  .k-confirm-cash-block { padding: 8px 12px; gap: 3px; border-radius: 12px; }
  .k-confirm-cash-code  { font-size: 1.32rem; }
  .k-confirm-notices    { gap: 3px; }
  .k-confirm-notice-row { font-size: .74rem; line-height: 1.25; }
  .k-confirm-actions    { gap: 6px; margin-top: 2px; }
  .k-confirm-btn        { padding: 11px 18px; font-size: .88rem; }
}

/* « Numéro changé ? · Ce n'est pas vous ? » — une seule ligne */
.k-ck-id-btns-row {
  display: none; /* masqué par défaut — visible via body.ck-is-me */
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
}
.k-ck-id-sep {
  color: var(--text-muted);
  font-size: .7rem;
  pointer-events: none;
}

/* §3 doctrine : body.ck-is-me posé par JS — CSS gère la visibilité */
body.ck-is-me .k-ck-id-btns-row { display: flex; }


/* ── interactions.css ────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — interactions.css
   Carrousel, succès commande, favoris badges, section index,
   scroll fluide. Mobile-first, zéro !important.
   ═══════════════════════════════════════════════════════════════ */

/* ── CARROUSEL PRODUIT (sur cartes grille) ───────────────────── */
.k-card-carousel {
  position: absolute; inset: 0;
  display: flex; overflow-x: scroll; overflow-y: hidden; /* FIX: overflow:hidden bloquait le scroll touch */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.k-card-carousel::-webkit-scrollbar { display: none; }
.k-card-carousel img {
  flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  object-fit: contain; padding: 8px;
}
.k-card-carousel-dots {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 2;
}
.k-card-carousel-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--overlay-black-lg); transition: background .2s, transform .2s; }
.k-card-carousel-dot.active { background: var(--coral); transform: scale(1.4); box-shadow: 0 0 0 2px rgba(200,92,45,.25); }

/* → déplacé vers le fichier approprié */

/* ── FAVORIS — badges promo ──────────────────────────────────── */
.k-fav-promo-banner {
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  color: var(--white); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.k-fav-promo-banner-icon { font-size: 24px; flex-shrink: 0; }
.k-fav-promo-banner-text { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.4; }
/* Style par défaut du bouton de partage — mobile, hors contexte promo (ghost neutre).
   Quand des favoris sont en promo, b-favs.js pose .k-fav-promo-active sur #k-fav-view
   → le style WA vert (~L216) prend le dessus via spécificité. */
.k-fav-share-btn {
  width: 100%; padding: 12px; border-radius: 50px; margin-bottom: 16px;
  background: transparent; border: 1.5px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  transition: all .15s;
}
.k-fav-share-btn:hover { background: var(--sand); color: var(--text); }
.k-card-promo-badge-fav {
  position: absolute; bottom: 8px; left: 8px;
  background: var(--coral); color: var(--white);
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 50px; z-index: 2;
}
.k-bnav-item[data-tab="favorites"] .k-bnav-fav-badge {
  position: absolute; top: 0; right: calc(50% - 20px);
  min-width: 14px; height: 14px;
  background: var(--hero-red); color: var(--white);
  font-size: 8px; font-weight: 800; border-radius: 99px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--white);
}

/* ── SECTION INDEX (floating emoji nav) ────────────────────── */
.k-section-index {
  position: fixed; bottom: calc(var(--bnav-h) + 12px + env(safe-area-inset-bottom)); right: 12px;
  z-index: 80; display: flex; flex-direction: column; gap: 6px;
}
.k-section-index-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-white-92); border: 1px solid var(--overlay-black-xs);
  box-shadow: 0 2px 10px var(--overlay-black-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer;
  transition: transform .2s, background .15s;
}
.k-section-index-btn:active { transform: scale(.9); }
.k-section-index-btn.active { background: var(--ocean-dark); border-color: var(--ocean-dark); }

/* ── SCROLL FLUIDE ────────────────────────────────────────────── */
.k-cats,
.k-subcats-rail,
.k-promo-rail { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
/* .k-modal-scroll → migré vers modal.css (Sprint 4 — S4.5) */

/* ── RETOUR EN HAUT ──────────────────────────────────────────── */
.k-fab-top {
  position: fixed;
  bottom: calc(var(--bnav-h) + 72px + env(safe-area-inset-bottom));
  right: 14px; z-index: 79;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: 1px solid var(--overlay-black-sm);
  box-shadow: var(--elev-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  transform: translateY(10px);
}
.k-fab-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.k-fab-top:active { transform: scale(.9); }

/* ── PAGER INDICATEURS ───────────────────────────────────────── */
.k-pager-dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 8px 0;
}
.k-pager-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); transition: all .2s;
}
.k-pager-dot.active {
  background: var(--ocean-dark);
  width: 20px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(74,144,64,.3);
}

/* ── TOPBAR ENRICHIE (modal paiement) — owner : cart.css
   Aucun usage détecté dans JS/HTML au 3 juin 2026 — conservé en attente de confirmation.
   Si ce sélecteur n'est plus utilisé, supprimer en Lot 6. ── */
.k-topbar-cart-btn-back { display: flex; align-items: center; gap: 6px; background: none; border: none; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; padding: 6px 10px; border-radius: 50px; transition: opacity .15s; }
.k-topbar-cart-btn-back:active { opacity: .7; }
.k-topbar-cart-btn-back svg { width: 18px; height: 18px; }

/* Bottom nav atténuée quand modal panier ouverte avec items */
body.cart-open .k-bnav { opacity: .4; pointer-events: none; }
body.modal-open .k-bnav { opacity: .7; }

/* Écran succès : récap articles */
.k-success-items-list { width: 100%; max-width: 320px; margin-bottom: 16px; }
.k-success-item-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sand-dark); font-size: 13px; }
.k-success-item-row:last-child { border: none; }
.k-success-item-name  { color: var(--text); font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.k-success-item-price { color: var(--coral); font-weight: 700; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   CONFIRMATION COMMANDE — supprimé (doublon).
   Owner unique : cart.css (.k-confirm-simple / .k-confirm-*).
   Ce bloc écrasait les styles compacts mobile-first du owner
   (bundle : cart → interactions) et forçait le scroll sur mobile.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MES COMMANDES — .k-myorder-*
   ═══════════════════════════════════════════════════════════════ */

.k-track-loading      { text-align:center; padding:60px 20px; color:var(--text-muted); }
.k-track-loading-spin { width:36px; height:36px; border:3px solid var(--sand-warm); border-top-color:var(--cta-green); border-radius:50%; margin:0 auto 14px; animation:k-track-spin .8s linear infinite; }
@keyframes k-track-spin { to { transform:rotate(360deg); } }
.k-track-sub-hint { color:var(--text-muted); font-size:13px; margin:4px 0 18px; }

.k-myorders-list  { display:flex; flex-direction:column; gap:10px; margin:0 0 20px; }
.k-myorder-card   { display:flex; align-items:center; gap:12px; width:100%; padding:12px; background:white; border:1px solid var(--sand-dark); border-radius:12px; cursor:pointer; transition:all .15s; text-align:left; font:inherit; }
.k-myorder-card:hover  { border-color:var(--gold-soft); background:var(--sand); box-shadow:0 4px 12px var(--overlay-black-xs); }
@media (hover:hover) and (pointer:fine) {
  .k-myorder-card:hover { transform:translateY(-1px); }
}
.k-myorder-card:active { transform:scale(.99); }
.k-myorder-card.k-myorder-loading { opacity:.5; pointer-events:none; }

.k-myorder-img      { flex:0 0 64px; width:64px; height:64px; border-radius:10px; background:var(--sand); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.k-myorder-img img  { width:100%; height:100%; object-fit:cover; }
.k-myorder-emoji    { font-size:28px; }
.k-myorder-body     { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.k-myorder-ref      { font-size:13px; font-weight:700; color:var(--text); font-family:'SF Mono',Menlo,monospace; }
.k-myorder-items    { font-size:13px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-myorder-bottom   { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:3px; }
.k-myorder-status   { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:50px; font-size:11px; font-weight:600; white-space:nowrap; }
.k-myorder-status--pending    { background:var(--amber-bg); color:var(--amber-text-light); }
.k-myorder-status--confirmed  { background:var(--status-confirmed-bg); color:var(--green-dark-text); }
.k-myorder-status--processing { background:var(--status-processing-bg); color:var(--status-processing-text); }
.k-myorder-status--shipped    { background:var(--status-shipped-bg); color:var(--status-shipped-text); }
.k-myorder-status--available  { background:var(--status-available-bg); color:var(--status-available-text); }
.k-myorder-status--delivered  { background:var(--status-confirmed-bg); color:var(--green-dark-text); }
.k-myorder-status--cancelled  { background:var(--status-cancelled-bg); color:var(--status-cancelled-text); }
.k-myorder-total        { font-size:14px; font-weight:700; color:var(--cta-green); white-space:nowrap; }
.k-myorder-date         { font-size:11px; color:var(--text-muted); margin-top:2px; }
.k-myorder-arrow        { flex:0 0 auto; font-size:24px; color:var(--text-muted); font-weight:300; margin-right:4px; }
.k-myorders-new-search  { margin-top:20px; width:100%; }

/* ═══════════════════════════════════════════════════════════════
   FAVORIS — bannière + partage
   ═══════════════════════════════════════════════════════════════ */

.k-fav-promo-banner { display:flex; align-items:center; gap:14px; padding:14px 16px; margin:0 0 14px; background:linear-gradient(135deg,var(--amber-bg),var(--cream-amber-light)); border:1.5px solid var(--amber-border); border-radius:14px; box-shadow:0 2px 8px rgba(240,175,80,.15); animation:fav-banner-slide .45s cubic-bezier(.22,1,.36,1); }
@keyframes fav-banner-slide { from { transform:translateY(-8px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.k-fav-promo-icon { font-size:32px; line-height:1; animation:fav-icon-bounce 2s ease-in-out infinite; }
@keyframes fav-icon-bounce { 0%,100% { transform:scale(1) rotate(0); } 20% { transform:scale(1.15) rotate(-8deg); } 40% { transform:scale(1.15) rotate(8deg); } 60% { transform:scale(1) rotate(0); } }
.k-fav-promo-text        { flex:1; display:flex; flex-direction:column; gap:2px; }
.k-fav-promo-text strong { font-size:14px; font-weight:700; color:var(--amber-text); }
.k-fav-promo-text span   { font-size:12px; color:var(--amber-text-light); }
/* Style WA vert — actif uniquement quand des favoris sont en promo.
   La classe .k-fav-promo-active est posée sur #k-fav-view par b-favs.js.
   Sans promo → style ghost (voir définition base ~L38). */
.k-fav-promo-active .k-fav-share-btn  { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 16px; margin:0 0 18px; background:linear-gradient(135deg,var(--whatsapp),var(--whatsapp-deep)); color:white; border:none; border-radius:50px; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 3px 10px rgba(37,211,102,.3); transition:all .15s; }
.k-fav-promo-active .k-fav-share-btn:hover  { box-shadow:0 5px 14px rgba(37,211,102,.4); }
@media (hover:hover) and (pointer:fine) {
  .k-fav-promo-active .k-fav-share-btn:hover { transform:translateY(-1px); }
}
.k-fav-promo-active .k-fav-share-btn:active { transform:scale(.98); }
.k-fav-share-icon { font-size:16px; }
.k-card-promo-fav { background:linear-gradient(135deg,var(--red-soft),var(--red-danger-text)); color:white; font-weight:700; font-size:11px; padding:4px 9px; border-radius:50px; box-shadow:0 2px 6px rgba(199,58,58,.4); animation:fav-promo-pulse 2.5s ease-in-out infinite; }
@keyframes fav-promo-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
.k-bnav-promo-badge { position:absolute; top:2px; right:calc(50% - 20px); font-size:13px; line-height:1; animation:fav-icon-bounce 2s ease-in-out infinite; pointer-events:none; }
.k-bnav-item { position:relative; }

/* ═══════════════════════════════════════════════════════════════
   TOPBAR ENRICHIE — apparaît au scroll dans la modal
   ═══════════════════════════════════════════════════════════════ */

/* ARCH-6 : .k-modal.is-scrolled + .k-topbar-* → migrés vers modal-shell.css (S4.5 / Lot 5).
   Owner définitif = modal-shell.css. interactions.css ne doit pas être owner secondaire de .k-modal. */

/* .k-modal-back-top → migré vers modal-shell.css (Sprint 4 — S4.5) */

/* ═══════════════════════════════════════════════════════════════
   FLAT SUBCAT PAGER (mode Temu — sous-cats en pages swipables)
   ═══════════════════════════════════════════════════════════════ */

#k-flat-subcat-chrome { background:var(--sand); flex-shrink:0; }

.k-flat-subcat-header { display:flex; align-items:center; gap:10px; padding:8px 12px 6px; background:linear-gradient(180deg,var(--sand),rgba(253,250,245,.98)); border-bottom:1px solid var(--border); }
.k-flat-subcat-close  { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:var(--sand-dark); color:var(--text); border-radius:50%; cursor:pointer; padding:0; flex-shrink:0; transition:transform .15s var(--ease), background .15s var(--ease); }
.k-flat-subcat-close:active { transform:scale(.9); background:var(--border); }
.k-flat-subcat-crumb  { flex:1; display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.k-flat-subcat-cat    { color:var(--text-muted); font-weight:500; flex-shrink:0; }
.k-flat-subcat-sep    { color:var(--text-light); font-weight:400; flex-shrink:0; }
.k-flat-subcat-sub    { color:var(--ocean-dark); font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.k-flat-subcat-count  { font-size:11px; color:var(--text-muted); background:var(--sand-dark); padding:3px 8px; border-radius:10px; white-space:nowrap; font-weight:600; flex-shrink:0; }

.k-flat-subcat-tabs             { display:flex; gap:6px; padding:8px 12px 10px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:var(--sand); border-bottom:1px solid var(--border); scroll-behavior:smooth; }
.k-flat-subcat-tabs::-webkit-scrollbar { display:none; }
.k-flat-subcat-tab              { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:7px 14px; background:var(--white); border:1.5px solid var(--border); border-radius:20px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap; transition:all .18s var(--ease); }
.k-flat-subcat-tab:active       { transform:scale(.95); }
.k-flat-subcat-tab.is-active    { background:var(--ocean); border-color:var(--ocean-dark); color:var(--white); box-shadow:0 2px 8px rgba(100,175,90,.35); }
.k-flat-subcat-tab-icon         { font-size:15px; line-height:1; }
.k-flat-subcat-tab-label        { font-size:13px; }

.k-flat-subcat-empty       { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:60px 24px; text-align:center; }
.k-flat-subcat-empty-emoji { font-size:52px; line-height:1; opacity:.6; }
.k-flat-subcat-empty-title { font-size:16px; font-weight:700; color:var(--text); }
.k-flat-subcat-empty-sub   { font-size:14px; color:var(--text-muted); line-height:1.5; }
.k-flat-subcat-empty-next  { padding:10px 22px; border:none; border-radius:50px; background:var(--ocean); color:var(--white); font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; }
.k-flat-subcat-empty-next:active { transform:scale(.97); }

.k-flat-page-end       { display:flex; flex-direction:column; align-items:center; gap:10px; padding:40px 20px 80px; text-align:center; }
.k-flat-page-end-emoji { font-size:42px; line-height:1; opacity:.5; }
.k-flat-page-end-title { font-size:15px; font-weight:700; color:var(--text); }
.k-flat-page-end-sub   { font-size:13px; color:var(--text-muted); }
.k-flat-page-end-next  { padding:10px 22px; border:1.5px solid var(--border); border-radius:50px; background:transparent; color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.k-flat-page-sentinel  { height:1px; }

/* ═══════════════════════════════════════════════════════════════
   INDEX FLOTTANT VERTICAL + GRID HAS SECTIONS
   ═══════════════════════════════════════════════════════════════ */

#k-section-index { position:fixed; right:8px; top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:4px; padding:6px 4px; background:var(--surface-white-92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:20px; box-shadow:0 2px 8px var(--overlay-black-sm), 0 0 0 1px var(--overlay-black-xs); opacity:.88; transition:opacity .2s ease, transform .2s ease; }
#k-section-index:hover, #k-section-index:focus-within { opacity:1; }
.k-section-index-btn       { display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:none; background:transparent; border-radius:50%; cursor:pointer; transition:background .15s ease, transform .15s ease; position:relative; }
.k-section-index-btn:hover { background:var(--overlay-black-xs); }
@media (hover:hover) and (pointer:fine) {
  .k-section-index-btn:hover { transform:scale(1.08); }
}
.k-section-index-btn:active { transform:scale(.94); }
.k-section-index-btn.active { background:var(--coral); }
.k-section-index-emoji { font-size:18px; line-height:1; }
.k-section-index-label { display:none; font-size:12px; font-weight:600; color:var(--text); padding:0 8px; }
@media (hover:hover) and (pointer:fine) {
  #k-section-index:hover .k-section-index-btn { width:auto; padding:0 10px 0 6px; justify-content:flex-start; gap:6px; }
  #k-section-index:hover .k-section-index-label { display:inline; }
}
body.modal-open #k-section-index,
body.cart-open  #k-section-index { display:none; }

#k-section-index { right:4px; gap:2px; padding:4px 3px; }
.k-section-index-btn { width:32px; height:32px; }
.k-section-index-emoji { font-size:16px; }

/* .k-grid.k-grid-has-sections + @media 899px → migré vers products.css (Sprint 4 — S4.4) */

/* ═══════════════════════════════════════════════════════════════
   MISC — load-more, view-active, bnav-label, card basket
   ═══════════════════════════════════════════════════════════════ */

.k-load-more         { display:flex; align-items:center; justify-content:center; padding:14px; }
.k-load-more button  { padding:10px 24px; border:1.5px solid var(--border); border-radius:50px; background:var(--white); color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.k-load-more button:hover { background:var(--sand); color:var(--text); }
.k-view-active       { display:none; }
.k-bnav-label        { font-size:10px; font-weight:600; color:var(--text-light); margin-top:2px; }
.k-bnav-btn.active .k-bnav-label, .k-bnav-item.active .k-bnav-label { color:var(--ocean-dark); }
.k-card-add-basket   { width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:multiply; }
.k-card-basket-icon  { pointer-events:none; }

/* Carousel mobile overlay fix */
#k-sug-rail { display:block; }
/* .k-modal-img-wrap — consolidé dans modal.css (source de vérité) */

/* Cart overlay mobile full-width → cart.css @max-width:768px (migré) */

/* ═══════════════════════════════════════════════════════════════
   PATCH FINAL — classes résiduelles
   ═══════════════════════════════════════════════════════════════ */

/* Carousel cartes (slides + dots) */
.k-card-slide        { flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always; position:relative; display:flex; align-items:center; justify-content:center; } /* FIX: height:100% évite le blanc au scroll */
.k-card-slide-img    { width:100%; height:100%; object-fit:contain; padding:8px; display:block; }
.k-card-dots         { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:flex; gap:4px; padding:3px 8px; background:var(--overlay-black-lg); backdrop-filter:blur(4px); border-radius:50px; z-index:2; pointer-events:none; }
.k-card-dot          { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55); transition:all .25s ease; }
.k-card-dot.active   { background:white; width:16px; border-radius:3px; }
.k-card-tabs         { display:none; }
.k-card-panels       { display:none; }
.k-card-tab          { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:var(--sand); border:1px solid var(--overlay-black-xs); font-size:10px; font-weight:700; color:var(--text-muted); white-space:nowrap; cursor:pointer; transition:all .15s ease; }
.k-card-tab.active   { background:var(--ocean-dark); color:var(--white); border-color:var(--ocean-dark); }
.k-card-panel        { display:none; font-size:10px; line-height:1.35; color:var(--text-muted); -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.k-card-panel.active { display:-webkit-box; }

/* Suggestions complémentaires */
/* CONTEXTE : bouton "ajouter une suggestion" dans le rail catalogue (hors modale).
   40×40px, rond, fond blanc avec bordure.
   NE PAS CONFONDRE avec .k-sug-add dans modal.css (Phase 8) :
   - modal.css = bouton ± quantité dans la modale produit (32×32, transparent, sans bordure)
   - Ces deux définitions couvrent des contextes DOM disjoints — pas de conflit.
   Source de vérité catalogue → ici. Source de vérité modale → modal.css L560. */
.k-sug-wrap          { display:block; }
.k-sug-rail          { display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px 2px; }
.k-sug-rail::-webkit-scrollbar { display:none; }
.k-sug-add {
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--white);
  border: 1.5px solid var(--sand-dark);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  flex-shrink: 0;
}
.k-sug-add:active { transform: scale(.92); }
.k-sug-add:hover { border-color: var(--ocean); box-shadow: var(--elev-2); }
.k-sug-add img { width: 24px; height: 24px; object-fit: contain; display: block; pointer-events: none; mix-blend-mode: multiply; }
.k-sug-arrow         { display:none; }
.k-sug-card-actions  { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 8px; }
.k-sug-card-bottom   { padding:4px 8px 8px; }
.k-sug-grid--other   { grid-template-columns:repeat(2,1fr); gap:8px; }
.k-sug-promo-badge   { position:absolute; top:6px; left:6px; background:var(--coral); color:var(--white); font-size:9px; font-weight:700; padding:2px 6px; border-radius:50px; z-index:2; }
.k-sug-qty           { font-size:11px; color:var(--text-muted); }
/* Renommé phase7 : était .k-sug-step (conflit de nom avec modal.css).
   Composant : ligne d'étape de commande (texte flex), sans lien avec les boutons ±.
   Aucun usage HTML/JS trouvé au moment du renommage — règle préventive. */
.k-sug-order-step    { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); padding:4px 0; }

/* Misc divers */
.k-cart-footer-secondary { display:flex; gap:8px; margin-top:8px; }
.k-cart-label            { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:6px; }
.k-cat-chip              { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:20px; border:1.5px solid var(--sand-dark); background:var(--white); font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; white-space:nowrap; transition:all .15s; }
.k-cat-chip.active       { background:var(--coral); color:var(--white); border-color:var(--coral); }
.k-hero-bubble           { display:none; }
.k-hero-proverb-inline   { display:none; }
.k-proverb-sep           { display:none; }
.k-header-action-label   { font-size:13px; font-weight:600; color:var(--text); }
.k-search-item-info      { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
/* .k-modal-topbar-product-name/price/thumb → migré vers modal.css (Sprint 4 — S4.5) */
/* .k-grid-slide-in-right → migré vers products.css (Sprint 4 — S4.4) */
.kcf-danger                   { background:transparent; color:var(--red); border:1.5px solid rgba(229,62,62,.25); border-radius:50px; padding:10px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.kcf-danger:hover             { background:var(--red-bg-soft); border-color:var(--red); }
.ck-modal-back-btn            { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:50px; color:var(--white); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }

.ck-pay-helper       { margin:4px 0 8px; padding:7px 9px; border:1px solid rgba(255,107,53,.18); border-left:3px solid var(--coral); border-radius:11px; background:var(--cream-peach); color:var(--coral-text); font-size:.73rem; line-height:1.3; }
.k-confirm-notice    { margin-top:12px; padding:10px 12px; background:var(--green-bg); border-radius:10px; font-size:.82rem; color:var(--text-strong-mid); line-height:1.6; text-align:left; }
.k-confirm-notice-item { margin-top:4px; }


/* ═══════════════════════════════════════════════════════════════
   PAGER TEMU — animations slide de catégorie + chip surbrillance
   ═══════════════════════════════════════════════════════════════ */

/* @keyframes k-grid-out/in-* + .k-grid.k-grid-slide-* → migré vers products.css (Sprint 4 — S4.4) */

/* k-chip.transitioning → categories.css (Sprint 4 — S4.2) */

/* Indicateur pager : points en bas de chaque section */
.k-pager-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px 0 4px;
  position: sticky;
  bottom: calc(var(--bnav-h) + 4px);
  z-index: 4;
  pointer-events: none;
}
.k-pager-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(31,48,36,.18);
  transition: all .25s var(--ease);
  flex-shrink: 0;
}
.k-pager-dot.active {
  background: var(--coral);
  width: 18px;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(200,92,45,.35);
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  /* .k-grid.k-grid-slide-* → products.css (Sprint 4 — S4.4) */
  .k-chip.transitioning .k-chip-photo { animation: none; }
}

/* ── Hint bounce vertical → catégorie suivante ──────────────────── */
.k-pager-next-hint {
  position: sticky;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  background: rgba(31,48,36,.82);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  border-radius: 50px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  animation: k-hint-pop .85s var(--ease) forwards;
}
@keyframes k-hint-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* ── Greeting chip (#k-greeting-chip) ─────────────────────────────── */
/* FIX BUG-L3 : migré depuis l'injection JS ensureStyles() dans b-greeting.js */
#k-greeting-chip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 14px;
  z-index: 1800;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1.5px solid rgba(31,122,84,.18);
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
}
#k-greeting-chip.k-greeting-chip--visible {
  opacity: 1;
  transform: translateY(0);
}
#k-greeting-chip.k-greeting-chip--out {
  opacity: 0;
  transform: translateY(-6px);
}


/* ── hero-cart-proxy.css ─────────────────────────────────── */
/**
 * @component Boutique / Hero Cart Proxy
 * @owner hero-cart-proxy.css
 *
 * Masque le hero-bubble expérimental sur mobile et desktop.
 * Les règles k-header* ont été migrées vers layout.css (Sprint 4 — S4.1).
 */

/* Mobile : tue la bulle hero-cart-proxy */
.k-hero-bubble,
.k-hero-bubble.k-hero-cart-proxy {
  display: none;
}

/* Desktop : idem */
@media (min-width: 900px) {
  .k-hero-bubble,
  .k-hero-bubble.k-hero-cart-proxy {
    display: none;
  }
}


/* ── group-cart-flow.css ─────────────────────────────────── */
/* Flux simplifié panier collectif */
.k-group-flow-overlay{position:fixed;inset:0;z-index:1800;background:rgba(31,48,36,.52);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}.k-group-flow-sheet{width:100%;max-width:420px;background:var(--white);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.22);animation:kGroupFlowUp .22s ease}.k-group-flow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.k-group-flow-title{font-size:18px;font-weight:900;color:var(--text);margin:0}.k-group-flow-close{border:0;background:var(--sand);width:34px;height:34px;border-radius:999px;cursor:pointer;font-weight:900}.k-group-flow-hero{text-align:center;padding:8px 4px 16px}.k-group-flow-icon{font-size:46px;line-height:1;margin-bottom:8px}.k-group-flow-big{font-size:20px;font-weight:950;color:var(--text);margin:0 0 6px}.k-group-flow-sub{font-size:13px;color:var(--text-muted);line-height:1.35;margin:0}.k-group-flow-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}.k-group-flow-stat{background:var(--sand);border:1px solid var(--border);border-radius:14px;padding:10px 6px;text-align:center}.k-group-flow-stat b{display:block;font-size:14px;color:var(--text);font-weight:950}.k-group-flow-stat span{display:block;font-size:10px;color:var(--text-muted);font-weight:800;margin-top:2px}.k-group-flow-link{display:flex;align-items:center;gap:8px;background:var(--sand);border:1px dashed var(--border);border-radius:14px;padding:10px 12px;margin:10px 0 12px}.k-group-flow-link span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--text-muted)}.k-group-flow-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.k-group-flow-btn{border:0;border-radius:14px;padding:13px 10px;font-size:14px;font-weight:950;cursor:pointer;min-height:46px}.k-group-flow-btn:active{transform:scale(.98)}.k-group-flow-btn--primary{background:var(--cta-green);color:var(--white)}.k-group-flow-btn--wa{background:var(--whatsapp);color:var(--white)}.k-group-flow-btn--ghost{background:var(--sand);color:var(--text);border:1px solid var(--border);grid-column:1/-1}.k-group-flow-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:28px 0;font-weight:900;color:var(--text)}.k-group-flow-spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--sand-dark);border-top-color:var(--cta-green);animation:kGroupSpin .8s linear infinite}.k-cart-event-btn,.k-sc-btn-group{font-weight:950}.k-cart-event-btn{font-size:0}.k-cart-event-btn:after{content:'📤 Partager';font-size:14px}.k-sc-btn-group-label{font-size:0}.k-sc-btn-group-label:after{content:'📤 Partager';font-size:12px}@media(min-width:900px){.k-group-flow-overlay{align-items:center}.k-group-flow-sheet{border-radius:22px;padding:20px;max-width:390px}}@keyframes kGroupFlowUp{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}@keyframes kGroupSpin{to{transform:rotate(360deg)}}


/* ══════════════════════════════════════════════════════════════════
 * GROUPE COCKPIT — owner officiel des sélecteurs .k-group-*
 * Migré depuis b-group-view.js → injectStyles() (PR-1)
 * refactor(group): move group cockpit styles to CSS owner
 * ══════════════════════════════════════════════════════════════════ */

/* ── BUG-VIEW-1 — Masquage par défaut (symétrique à .k-fav-view/.k-track-view dans cart.css)
   Sans ce display:none, la vue groupe reste visible même quand elle ne devrait pas l'être,
   provoquant un mélange de contenus entre onglets Suivi / Groupe / Commandes. ──────────── */
#k-group-view.k-group-view { display: none; }
#k-group-view.k-group-view.show { display: block; }

/* ── Bloc A — Structure de base ─────────────────────────────────── */

.k-group-view {
  max-width: 1180px;
  margin: 24px auto 80px;
  padding: 0 24px;
  box-sizing: border-box;
}
.k-group-view > * {
  max-width: 720px;
}
.k-group-view .k-group-header {
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  padding: 20px 28px 8px;
  box-shadow: 0 18px 50px var(--border-text-08);
}
.k-group-view .k-group-header h2 {
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1.2;
  color: var(--text);
}
.k-group-view .k-group-subhead {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-muted);
}
.k-group-view .k-group-progress-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0 0 24px 24px;
  padding: 20px 28px 22px;
  margin: 0 0 16px;
  box-shadow: 0 18px 50px var(--border-text-08);
}
.k-group-view .k-group-card,
.k-group-view .k-group-actions-card,
.k-group-view .k-group-contribute-card,
.k-group-view .k-group-items-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 20px 28px;
  margin: 12px 0 0;
  box-shadow: 0 14px 42px var(--border-text-06);
}
.k-group-view .k-group-section-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--text);
}
.k-group-view .k-group-creator-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.k-group-view .k-group-btn {
  min-height: 50px;
  border-radius: 999px;
}
.k-group-view .k-group-self-toggle {
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: 20px;
  padding: 16px 18px;
  margin: 12px 0 0;
  font-size: 15px;
  box-shadow: 0 10px 32px rgba(30,40,25,.04);
}
.k-group-view .k-group-progress-wrap {
  position: relative;
  margin-bottom: 6px;
}
.k-group-view .k-group-progress {
  position: relative;
  height: 10px;
  background: var(--green-alpha-12, rgba(100,175,90,.12));
  border-radius: 999px;
  overflow: hidden;
}
/* Couche intention — fond, représente les engagements (plafonnée à 100 %) */
.k-group-view .k-group-progress-bar--engaged {
  display: block;
  position: absolute;
  inset: 0;
  height: 100%;
  background: rgba(100,175,90,.28);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
/* Couche réelle — premier plan, représente les paiements confirmés */
.k-group-view .k-group-progress-bar--paid {
  display: block;
  position: absolute;
  inset: 0;
  height: 100%;
  background: var(--cta-green);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
/* Rétrocompat : ancienne classe sans modificateur */
.k-group-view .k-group-progress-bar:not(.k-group-progress-bar--engaged):not(.k-group-progress-bar--paid) {
  display: block;
  position: absolute;
  inset: 0;
  height: 100%;
  background: var(--cta-green);
  border-radius: 999px;
}
/* Badge sur-couvert */
.k-group-progress-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 5px;
  letter-spacing: .01em;
}
.k-group-progress-badge--over {
  background: rgba(100,175,90,.15);
  color: var(--ocean-dark);
  border: 1px solid rgba(100,175,90,.30);
}
/* Légende sous la barre */
.k-group-progress-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.k-group-progress-legend-paid    { color: var(--ocean-dark); }
.k-group-progress-legend-engaged { color: rgba(100,175,90,.75); }
.k-group-progress-legend-total   { margin-left: auto; color: var(--text-muted); font-weight: 600; }

.k-group-view .k-group-progress { height: 8px; }
.k-group-progress-legend { font-size: 10.5px; gap: 7px; }
.k-group-progress-badge  { font-size: 10.5px; padding: 2px 7px; }

@media ((min-width: 1200px)) {
  .k-group-view {
    max-width: 1180px;
  }
}

/* ── Bloc B — Responsive mobile de base (max-width:700px) ────────── */

.k-group-view {
  max-width: none;
  margin: 22px auto 72px;
  padding: 0 14px;
}
.k-group-view > * {
  max-width: none;
}
.k-group-view .k-group-header {
  padding: 20px 18px 8px;
  border-radius: 20px 20px 0 0;
}
.k-group-view .k-group-header h2 {
  font-size: 21px;
}
.k-group-view .k-group-progress-card {
  padding: 18px;
  border-radius: 0 0 20px 20px;
}
.k-group-view .k-group-card,
.k-group-view .k-group-actions-card,
.k-group-view .k-group-contribute-card,
.k-group-view .k-group-items-card {
  padding: 18px;
  border-radius: 20px;
}
.k-group-view .k-group-creator-actions {
  grid-template-columns: 1fr;
}

/* ── Bloc C — Cockpit initial desktop ((min-width: 900px)) ─────────── */
/* Note : breakpoint 1000px, exception documentée (standard projet = 900px) */

@media ((min-width: 900px)) {
  #k-group-view.k-group-view {
    margin: 0 auto 56px;
    padding: 0 32px;
  }
  #k-group-view.k-group-view > * {
    width: 700px;
    max-width: 700px;
  }
  .k-group-view .k-group-header {
    padding: 16px 24px 8px;
    border-radius: 20px 20px 0 0;
  }
  .k-group-view .k-group-header h2 {
    font-size: 22px;
    margin: 0 0 4px;
  }
  .k-group-view .k-group-subhead {
    font-size: 14px;
    line-height: 1.35;
  }
  .k-group-view .k-group-progress-card {
    padding: 16px 24px 18px;
    margin: 0 0 14px;
    border-radius: 0 0 20px 20px;
  }
  .k-group-view .k-group-card,
  .k-group-view .k-group-actions-card,
  .k-group-view .k-group-contribute-card,
  .k-group-view .k-group-items-card {
    padding: 16px 24px;
    margin: 12px 0 0;
    border-radius: 20px;
  }
  .k-group-view .k-group-section-title,
  .k-group-view h3 {
    font-size: 18px;
    margin: 0 0 10px;
  }
  .k-group-view .k-group-self-toggle {
    margin: 10px 0 0;
    padding: 13px 16px;
    border-radius: 18px;
    min-height: 46px;
  }
  .k-group-view .k-group-creator-actions {
    gap: 10px;
  }
  .k-group-view .k-group-btn {
    min-height: 44px;
    padding: 10px 16px;
  }
  .k-group-view .k-group-share-hint,
  .k-group-view .k-group-finalize-hint {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.35;
  }
  .k-group-view hr {
    margin: 12px 0;
  }
  .k-group-view select,
  .k-group-view input,
  .k-group-view textarea {
    min-height: 42px;
  }
}

#k-group-view.k-group-view {
  margin: 10px auto 56px;
}
.k-group-view .k-group-header {
  padding: 16px 16px 8px;
}
.k-group-view .k-group-progress-card,
.k-group-view .k-group-card,
.k-group-view .k-group-actions-card,
.k-group-view .k-group-contribute-card,
.k-group-view .k-group-items-card {
  padding: 16px;
  margin-top: 10px;
}

/* ── Desktop cockpit layout : colonne gauche + réserve articles droite ── */

@media ((min-width: 900px)) {
  #k-group-view.k-group-view {
    max-width: 1240px;
    width: 100%;
    margin: 8px auto 64px;
    padding: 0 32px;
    box-sizing: border-box;
  }
  #k-group-view.k-group-view > * {
    width: 720px;
    max-width: 720px;
    margin-left: 0;
    margin-right: auto;
  }
}

@media ((min-width: 1200px)) {
  #k-group-view.k-group-view {
    max-width: 1280px;
  }
  #k-group-view.k-group-view > * {
    width: 740px;
    max-width: 740px;
  }
}

#k-group-view.k-group-view {
  max-width: none;
  width: 100%;
  margin: 12px auto 64px;
  padding: 0 14px;
}
#k-group-view.k-group-view > * {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ── SAFE V2 — cockpit groupe compact desktop ──────────────────── */

@media ((min-width: 900px)) {
  #k-group-view.k-group-view {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto 56px;
    padding: 0 32px;
    box-sizing: border-box;
  }
  #k-group-view.k-group-view > * {
    width: 700px;
    max-width: 700px;
    margin-left: 0;
    margin-right: auto;
  }
  .k-group-view .k-group-header {
    padding: 14px 22px 8px;
    border-radius: 18px 18px 0 0;
  }
  .k-group-view .k-group-header h2 {
    font-size: 22px;
    margin: 0 0 3px;
    line-height: 1.15;
  }
  .k-group-view .k-group-subhead {
    font-size: 14px;
    line-height: 1.3;
  }
  .k-group-view .k-group-progress-card {
    padding: 14px 22px 16px;
    margin: 0 0 10px;
    border-radius: 0 0 18px 18px;
  }
  .k-group-view .k-group-card,
  .k-group-view .k-group-actions-card,
  .k-group-view .k-group-contribute-card,
  .k-group-view .k-group-items-card {
    padding: 14px 22px;
    margin: 10px 0 0;
    border-radius: 18px;
  }
  .k-group-view .k-group-self-toggle {
    margin: 10px 0 0;
    padding: 11px 14px;
    min-height: 42px;
    border-radius: 16px;
    font-size: 14px;
  }
  .k-group-view .k-group-creator-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .k-group-view .k-group-btn {
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 999px;
  }
  .k-group-view h3,
  .k-group-view .k-group-section-title {
    font-size: 18px;
    margin: 0 0 9px;
  }
  .k-group-view .k-group-share-hint,
  .k-group-view .k-group-finalize-hint {
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.3;
  }
  .k-group-view hr {
    margin: 10px 0;
  }
  .k-group-view select,
  .k-group-view input,
  .k-group-view textarea {
    min-height: 40px;
  }
}

#k-group-view.k-group-view {
  margin: 10px auto 56px;
  padding: 0 14px;
}
#k-group-view.k-group-view > * {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.k-group-view .k-group-header {
  padding: 15px 16px 8px;
}
.k-group-view .k-group-progress-card,
.k-group-view .k-group-card,
.k-group-view .k-group-actions-card,
.k-group-view .k-group-contribute-card,
.k-group-view .k-group-items-card {
  padding: 15px 16px;
  margin-top: 10px;
}

/* ── Bloc D — Colonne droite articles (SAFE V2-B) ──────────────── */

.k-group-cockpit {
  display: block;
}
.k-group-main-col {
  min-width: 0;
}
.k-group-side-panel {
  margin-top: 12px;
}
.k-group-side-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 42px var(--border-text-06);
}
.k-group-side-card + .k-group-side-card {
  margin-top: 10px;
}
.k-group-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.k-group-side-head strong {
  font-size: 15px;
  color: var(--text);
}
.k-group-side-head span {
  font-size: 12px;
  color: var(--text-muted);
}
.k-group-side-list {
  display: grid;
  gap: 9px;
}
.k-group-side-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
}
.k-group-side-item img,
.k-group-side-item-fallback {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.k-group-side-item-main {
  min-width: 0;
}
.k-group-side-item-main strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-group-side-item-main span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.k-group-side-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.k-group-side-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 10px;
  font-size: 13px;
}
.k-group-side-total span {
  color: var(--text-muted);
}
.k-group-side-total strong {
  color: var(--text);
}
.k-group-side-help ol {
  margin: 8px 0 0 18px;
  padding: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

@media ((min-width: 900px)) {
  #k-group-view.k-group-view {
    max-width: 1240px;
    margin: 0 auto 56px;
    padding: 0 32px;
  }
  #k-group-view.k-group-view > * {
    width: auto;
    max-width: none;
  }
  .k-group-cockpit {
    display: grid;
    grid-template-columns: minmax(620px, 700px) minmax(300px, 360px);
    gap: 20px;
    align-items: start;
  }
  .k-group-side-panel {
    margin-top: 0;
    position: sticky;
    top: 96px;
  }
}

/* (doublon .k-group-cockpit{display:block} supprimé — il écrasait le
   display:grid du bloc ≥900px ci-dessus : cockpit empilé en une colonne
   même sur desktop. La base mobile-first vit en tête de fichier.) */

/* ── SAFE V2-C — condensation cockpit groupe ───────────────────── */

@media ((min-width: 900px)) {
  #k-group-view.k-group-view {
    margin: -18px auto 44px;
    padding: 0 32px;
  }
  .k-group-cockpit {
    grid-template-columns: minmax(600px, 680px) minmax(300px, 340px);
    gap: 16px;
  }
  .k-group-view .k-group-header {
    padding: 12px 20px 7px;
    border-radius: 16px 16px 0 0;
  }
  .k-group-view .k-group-header h2 {
    font-size: 21px;
    margin: 0 0 2px;
    line-height: 1.12;
  }
  .k-group-view .k-group-subhead {
    font-size: 13px;
    line-height: 1.25;
  }
  .k-group-view .k-group-progress-card {
    padding: 12px 20px 14px;
    margin: 0 0 8px;
    border-radius: 0 0 16px 16px;
  }
  .k-group-view .k-group-progress-card h3,
  .k-group-view .k-group-progress-card strong {
    margin-top: 0;
  }
  .k-group-view .k-group-progress {
    height: 6px;
    margin: 7px 0;
  }
  .k-group-view .k-group-self-toggle {
    margin: 8px 0 0;
    padding: 9px 12px;
    min-height: 38px;
    border-radius: 14px;
    font-size: 13px;
  }
  .k-group-view .k-group-card,
  .k-group-view .k-group-actions-card,
  .k-group-view .k-group-contribute-card,
  .k-group-view .k-group-items-card {
    padding: 12px 20px;
    margin: 8px 0 0;
    border-radius: 16px;
  }
  .k-group-view h3,
  .k-group-view .k-group-section-title {
    font-size: 17px;
    margin: 0 0 8px;
  }
  .k-group-view .k-group-creator-actions {
    gap: 8px;
  }
  .k-group-view .k-group-btn {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .k-group-view .k-group-share-hint,
  .k-group-view .k-group-finalize-hint {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.25;
  }
  .k-group-view hr {
    margin: 8px 0;
  }
  .k-group-view label {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .k-group-view select,
  .k-group-view input,
  .k-group-view textarea {
    min-height: 36px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
  }
  .k-group-side-panel {
    top: 84px;
  }
  .k-group-side-card {
    padding: 12px;
    border-radius: 16px;
  }
  .k-group-side-card + .k-group-side-card {
    margin-top: 8px;
  }
  .k-group-side-head {
    margin-bottom: 8px;
  }
  .k-group-side-head strong {
    font-size: 14px;
  }
  .k-group-side-head span {
    font-size: 11.5px;
  }
  .k-group-side-list {
    gap: 7px;
  }
  .k-group-side-item {
    grid-template-columns: 38px 1fr;
    gap: 8px;
  }
  .k-group-side-item img,
  .k-group-side-item-fallback {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .k-group-side-item-main strong {
    font-size: 12.5px;
  }
  .k-group-side-item-main span {
    font-size: 11.5px;
    margin-top: 2px;
  }
  .k-group-side-total {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 12px;
  }
  .k-group-side-help ol {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
  }
}

#k-group-view.k-group-view {
  margin: 6px auto 48px;
}
.k-group-view .k-group-header,
.k-group-view .k-group-progress-card,
.k-group-view .k-group-card,
.k-group-view .k-group-actions-card,
.k-group-view .k-group-contribute-card,
.k-group-view .k-group-items-card,
.k-group-side-card {
  padding: 13px 14px;
}

/* ── Bloc E — Mini guide créateur (SAFE V2-D) ──────────────────── */

.k-group-mini-guide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: var(--green-alpha-06);
  border: 1px solid var(--green-alpha-14);
  border-radius: 14px;
  padding: 9px 10px;
  margin: 8px 0;
}
.k-group-mini-guide span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
}
.k-group-mini-guide b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  background: var(--cta-green);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
}

.k-group-mini-guide {
  grid-template-columns: 1fr;
  gap: 6px;
}

/* ── SAFE V2-E — cockpit ultra compact desktop ─────────────────── */

@media ((min-width: 900px)) {
  #k-group-view.k-group-view {
    margin: -34px auto 36px;
    padding: 0 32px;
  }
  .k-group-cockpit {
    grid-template-columns: minmax(580px, 660px) minmax(280px, 330px);
    gap: 14px;
  }
  .k-group-view .k-group-header {
    padding: 10px 18px 6px;
    border-radius: 14px 14px 0 0;
  }
  .k-group-view .k-group-header h2 {
    font-size: 20px;
    margin: 0;
    line-height: 1.1;
  }
  .k-group-view .k-group-subhead {
    font-size: 12.5px;
    line-height: 1.22;
    margin-top: 3px;
  }
  .k-group-mini-guide {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 6px 0;
    border-radius: 12px;
  }
  .k-group-mini-guide span {
    font-size: 11.5px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .k-group-mini-guide b {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    font-size: 10px;
  }
  .k-group-view .k-group-progress-card {
    padding: 10px 18px 12px;
    margin: 0 0 6px;
    border-radius: 0 0 14px 14px;
  }
  .k-group-view .k-group-progress-card h3 {
    font-size: 15px;
    margin: 0 0 2px;
  }
  .k-group-view .k-group-progress-card small,
  .k-group-view .k-group-progress-card span,
  .k-group-view .k-group-progress-card p {
    font-size: 12px;
  }
  .k-group-view .k-group-progress {
    height: 5px;
    margin: 5px 0;
  }
  .k-group-view .k-group-self-toggle {
    margin: 6px 0 0;
    padding: 7px 10px;
    min-height: 34px;
    border-radius: 12px;
    font-size: 12.5px;
  }
  .k-group-view .k-group-card,
  .k-group-view .k-group-actions-card,
  .k-group-view .k-group-contribute-card,
  .k-group-view .k-group-items-card {
    padding: 10px 18px;
    margin: 6px 0 0;
    border-radius: 14px;
  }
  .k-group-view h3,
  .k-group-view .k-group-section-title {
    font-size: 16px;
    margin: 0 0 7px;
  }
  .k-group-view .k-group-creator-actions {
    gap: 7px;
  }
  .k-group-view .k-group-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12.5px;
  }
  .k-group-view .k-group-share-hint,
  .k-group-view .k-group-finalize-hint {
    margin: 5px 0 0;
    font-size: 11px;
    line-height: 1.2;
  }
  .k-group-view hr {
    margin: 7px 0;
  }
  .k-group-view label {
    font-size: 11.5px;
    margin-bottom: 3px;
  }
  .k-group-view select,
  .k-group-view input,
  .k-group-view textarea {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 10px;
  }
  .k-group-side-panel {
    top: 76px;
  }
  .k-group-side-card {
    padding: 10px;
    border-radius: 14px;
  }
  .k-group-side-card + .k-group-side-card {
    margin-top: 7px;
  }
  .k-group-side-head {
    margin-bottom: 7px;
  }
  .k-group-side-head strong {
    font-size: 13.5px;
  }
  .k-group-side-head span {
    font-size: 11px;
  }
  .k-group-side-list {
    gap: 6px;
  }
  .k-group-side-item {
    grid-template-columns: 34px 1fr;
    gap: 7px;
  }
  .k-group-side-item img,
  .k-group-side-item-fallback {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }
  .k-group-side-item-main strong {
    font-size: 12px;
    line-height: 1.15;
  }
  .k-group-side-item-main span {
    font-size: 11px;
    margin-top: 1px;
  }
  .k-group-side-total {
    margin-top: 7px;
    padding-top: 7px;
    font-size: 11.5px;
  }
}

.k-group-mini-guide {
  padding: 8px 10px;
}

/* ── Bloc F — Switcher paniers multi-groupe ─────────────────────── */

.k-group-cart-switcher {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  margin: 6px 0;
  box-shadow: 0 10px 30px rgba(30,40,25,.04);
}
.k-group-cart-switcher-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 2px 7px;
}
.k-group-cart-switcher-head strong {
  font-size: 12px;
  color: var(--text);
}
.k-group-cart-switcher-head span {
  font-size: 11px;
  color: var(--text-muted);
}
.k-group-cart-tabs {
  display: flex;
  gap: 7px;
  overflow: auto;
  scrollbar-width: thin;
  padding-bottom: 1px;
}
.k-group-cart-tab {
  flex: 0 0 auto;
  min-width: 150px;
  max-width: 210px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--sand);
  border-radius: 12px;
  padding: 7px 9px;
  cursor: pointer;
}
.k-group-cart-tab.is-active {
  background: var(--coral-bg-12);
  border-color: var(--coral-bg-38);
  box-shadow: inset 0 0 0 1px var(--coral-bg-18);
}
.k-group-cart-tab strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-group-cart-tab span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-group-cart-tab {
  min-width: 140px;
}

/* ── Bloc G — Note identité engagement ─────────────────────────── */

.k-group-identity-note {
  background: var(--coral-bg-09);
  border: 1px solid rgba(239,125,95,.22);
  border-radius: 12px;
  padding: 8px 10px;
  margin: 6px 0 10px;
}
.k-group-identity-note strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--text);
}
.k-group-identity-note span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-muted);
}

/* ── ULTRA COMPACT — Groupe cockpit dense ──────────────────────── */

@media ((min-width: 900px)) {
  #k-group-view.k-group-view {
    margin: -42px auto 32px;
    padding: 0 28px;
  }
  .k-group-cockpit {
    grid-template-columns: minmax(560px, 640px) minmax(270px, 320px);
    gap: 12px;
  }
  .k-group-view .k-group-header {
    padding: 8px 16px 5px;
    border-radius: 13px 13px 0 0;
  }
  .k-group-view .k-group-header h2 {
    font-size: 19px;
    margin: 0;
    line-height: 1.05;
  }
  .k-group-view .k-group-subhead {
    font-size: 11.8px;
    line-height: 1.18;
    margin-top: 2px;
  }
  .k-group-cart-switcher {
    padding: 6px;
    margin: 5px 0;
    border-radius: 12px;
  }
  .k-group-cart-switcher-head {
    margin: 0 2px 5px;
  }
  .k-group-cart-switcher-head strong {
    font-size: 11.5px;
  }
  .k-group-cart-switcher-head span {
    font-size: 10.5px;
  }
  .k-group-cart-tabs {
    gap: 5px;
  }
  .k-group-cart-tab {
    min-width: 132px;
    max-width: 180px;
    padding: 5px 7px;
    border-radius: 10px;
  }
  .k-group-cart-tab strong {
    font-size: 11.5px;
  }
  .k-group-cart-tab span {
    font-size: 10.2px;
    margin-top: 2px;
  }
  .k-group-mini-guide {
    padding: 5px 7px;
    margin: 5px 0;
    border-radius: 10px;
    gap: 6px;
  }
  .k-group-mini-guide span {
    font-size: 10.8px;
    line-height: 1;
  }
  .k-group-mini-guide b {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
    font-size: 9.5px;
  }
  .k-group-view .k-group-progress-card {
    padding: 8px 16px 9px;
    margin: 0 0 5px;
    border-radius: 0 0 13px 13px;
  }
  .k-group-view .k-group-progress-card h3,
  .k-group-view .k-group-progress-card strong {
    font-size: 14px;
    margin: 0 0 2px;
    line-height: 1.12;
  }
  .k-group-view .k-group-progress-card p,
  .k-group-view .k-group-progress-card span,
  .k-group-view .k-group-progress-card small {
    font-size: 11.3px;
    line-height: 1.2;
  }
  .k-group-view .k-group-progress {
    height: 4px;
    margin: 4px 0;
  }
  .k-group-view .k-group-card,
  .k-group-view .k-group-actions-card,
  .k-group-view .k-group-contribute-card,
  .k-group-view .k-group-items-card {
    padding: 8px 16px;
    margin: 5px 0 0;
    border-radius: 13px;
  }
  .k-group-view .k-group-section-title,
  .k-group-view h3 {
    font-size: 14.5px;
    margin: 0 0 5px;
    line-height: 1.15;
  }
  .k-group-view .k-group-self-toggle {
    margin: 5px 0 0;
    padding: 6px 9px;
    min-height: 30px;
    border-radius: 11px;
    font-size: 12px;
  }
  .k-group-view .k-group-creator-actions {
    gap: 6px;
  }
  .k-group-view .k-group-btn {
    min-height: 31px;
    padding: 6px 9px;
    font-size: 11.8px;
    line-height: 1.1;
  }
  .k-group-view .k-group-share-hint,
  .k-group-view .k-group-finalize-hint,
  .k-group-view .k-group-finalized-hint {
    margin: 4px 0 0;
    font-size: 10.8px;
    line-height: 1.15;
  }
  .k-group-view label,
  .k-group-view .k-group-label {
    font-size: 10.5px;
    margin-bottom: 2px;
  }
  .k-group-view select,
  .k-group-view input,
  .k-group-view textarea {
    min-height: 29px;
    padding: 5px 8px;
    font-size: 11.8px;
    border-radius: 9px;
  }
  .k-group-view hr,
  .k-group-actions-card [style*="border-top"] {
    margin-top: 7px;
    padding-top: 7px;
  }
  .k-group-identity-note {
    padding: 6px 8px;
    margin: 4px 0 7px;
    border-radius: 10px;
  }
  .k-group-identity-note strong {
    font-size: 11.5px;
  }
  .k-group-identity-note span {
    font-size: 10.5px;
    line-height: 1.18;
  }
  .k-group-side-panel {
    top: 68px;
  }
  .k-group-side-card {
    padding: 8px;
    border-radius: 13px;
  }
  .k-group-side-head {
    margin-bottom: 5px;
  }
  .k-group-side-head strong {
    font-size: 12.5px;
  }
  .k-group-side-head span {
    font-size: 10.5px;
  }
  .k-group-side-list {
    gap: 5px;
  }
  .k-group-side-item {
    grid-template-columns: 30px 1fr;
    gap: 6px;
  }
  .k-group-side-item img,
  .k-group-side-item-fallback {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .k-group-side-item-main strong {
    font-size: 11px;
    line-height: 1.1;
  }
  .k-group-side-item-main span {
    font-size: 10px;
    margin-top: 1px;
  }
  .k-group-side-total {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 10.8px;
  }
}

#k-group-view.k-group-view {
  margin: 4px auto 46px;
  padding: 0 10px;
}
.k-group-view .k-group-header,
.k-group-view .k-group-progress-card,
.k-group-view .k-group-card,
.k-group-view .k-group-actions-card,
.k-group-view .k-group-contribute-card,
.k-group-view .k-group-items-card,
.k-group-side-card {
  padding: 11px 12px;
}
.k-group-mini-guide {
  padding: 7px 8px;
}

/* ── POSITION — remonter le cockpit sous le header ─────────────── */
/* Valeur effective : margin-top final après toutes les passes SAFE  */

@media ((min-width: 900px)) {
  #k-group-view.k-group-view {
    margin-top: -118px;
  }
  .k-group-cockpit {
    align-items: start;
  }
}

@media ((min-width: 1200px)) {
  #k-group-view.k-group-view {
    margin-top: -132px;
  }
}

#k-group-view.k-group-view {
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════════════════
 * GROUP MOBILE COMPACT
 * Vue participant — panier collectif — affichage 1 écran
 *
 * UX goal : le participant voit en un coup d'œil
 *   1. le panier concerné (header + items)
 *   2. le total + statut (phase badge)
 *   3. le montant à engager (section-title + montant)
 *   4. l'identité sécurisée OTP (identity-note — CONSERVÉ)
 *   5. le message optionnel (champ msg)
 *   6. le bouton d'action (submit btn — TOUJOURS VISIBLE)
 *
 * Masqué sur mobile (non essentiel à la confiance) :
 *   - .k-group-subhead           → sous-titre descriptif du header
 *   - .k-group-contribute-card > p.k-group-desc-text
 *                                → paragraphe explicatif long
 *
 * Conservé intentionnellement :
 *   - .k-group-identity-note strong  "Identité sécurisée par OTP"
 *   - .k-group-identity-note span    possibilité d'utiliser un autre n°
 *   - montant, message, CTA
 *
 * Owner : group-cart-flow.css — ne pas réintroduire dans b-group-view.js
 * ════════════════════════════════════════════════════════════════════ */

/* ── GROUP MOBILE COMPACT — max-width: 700px ───────────────────── */


/* — .k-group-view : conteneur principal — */
#k-group-view.k-group-view {
  margin-top: -6px;
  padding: 0 10px 80px; /* bas 80px : CTA toujours dégagé du bas */
}

/* — .k-group-header : en-tête du panier — */
.k-group-view .k-group-header {
  padding: 9px 12px 6px;
  border-radius: 16px 16px 0 0;
}
.k-group-view .k-group-header h2 {
  font-size: 18px;
  line-height: 1.05;
  margin: 0;
}
/* Masqué mobile : sous-titre descriptif non essentiel */
.k-group-view .k-group-subhead {
  display: none;
}

/* — .k-group-items-card : bloc résumé panier (collapsible) — */
.k-group-items-card {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 16px;
}
.k-group-items-toggle {
  min-height: 44px; /* zone tactile confortable */
  padding: 0;
}
.k-group-items-toggle strong {
  font-size: 17px;
  line-height: 1.1;
}
.k-group-items-toggle span span {
  font-size: 13px;
  line-height: 1.2;
}

/* — .k-group-contribute-card : carte engagement/paiement — */
.k-group-contribute-card {
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
}

/* — .k-group-phase-badge : statut ouvert / règlement — */
.k-group-phase-badge {
  font-size: 11px;
  padding: 5px 9px;
  margin-bottom: 8px;
  border-radius: 999px;
}

/* — .k-group-section-title : titre de la carte contribution — */
.k-group-contribute-card .k-group-section-title {
  font-size: 22px;
  line-height: 1.05;
  margin: 0 0 8px;
}

/* Masqué mobile : texte explicatif long non essentiel */
.k-group-contribute-card .k-group-desc-text {
  display: none;
}

/* — Hints split / equal / violet callout — */
.k-group-split-hint,
.k-group-equal-hint,
.k-group-contribute-card [style*="rgba(112,73,190"] {
  font-size: 12px;
  line-height: 1.2;
  padding: 7px 9px;
  margin: 6px 0 8px;
  border-radius: 10px;
}

/* — .k-group-identity-note : identité OTP — CONSERVÉ INTENTIONNELLEMENT —
   "Identité sécurisée par OTP" + "vous pouvez utiliser un autre numéro"
   Ces informations sont nécessaires à la confiance du participant. */
.k-group-identity-note {
  padding: 7px 9px;
  margin: 6px 0 9px;
  border-radius: 11px;
}
.k-group-identity-note strong {
  font-size: 13px;
  line-height: 1.1;
}
.k-group-identity-note span {
  font-size: 11px;
  line-height: 1.15;
  margin-top: 2px;
  /* NE PAS masquer : indique la possibilité d'utiliser un autre numéro */
}

/* — .k-group-field : champs du formulaire engagement — */
.k-group-field {
  margin-bottom: 8px;
}

/* — Labels — */
.k-group-label,
.k-group-contribute-card label {
  font-size: 11px;
  margin-bottom: 3px;
  letter-spacing: .02em;
}

/* — .k-group-input : champs texte/nombre — */
/* reset.css pose `input { border:none }` : on restaure ici un cadre visible. */
.k-group-input {
  width: 100%;
  min-height: 42px;
  height: 42px;
  padding: 7px 10px;
  font-size: 15px; /* 15px : évite le zoom auto iOS */
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
}
.k-group-input:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-light);
}

/* — .k-group-mypart : bloc encadré « Ma part » (hint + montant) — */
.k-group-mypart {
  border: 1.5px solid var(--violet-mid);
  background: var(--sand);
  border-radius: 14px;
  padding: 12px 14px 10px;
  margin: 0 0 10px;
}
.k-group-mypart-head {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--violet-dark);
  margin-bottom: 8px;
}
.k-group-mypart .k-group-split-hint { margin-bottom: 10px; }
.k-group-mypart .k-group-field      { margin-bottom: 2px; }
/* Champ message : hauteur réduite car 1 ligne suffit */
#k-ge-msg,
#k-gp-msg {
  height: 40px;
}

/* — Erreurs inline — */
.k-group-input-error {
  min-height: 14px;
  margin: 0 0 5px;
  font-size: 11px;
}

/* — .k-group-btn : bouton d'action principal — */
.k-group-btn {
  min-height: 48px; /* zone tactile large — visible au premier scroll */
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
}
/* Bouton submit spécifique : ancré visuellement en bas de carte */
#k-ge-submit-btn,
#k-gp-pay-btn {
  min-height: 48px;
  height: 48px;
  margin-top: 6px;
  font-size: 15px;
  border-radius: 999px;
}

/* — Ombres allégées sur mobile — */
.k-group-card,
.k-group-actions-card,
.k-group-progress-card,
.k-group-items-card,
.k-group-contribute-card {
  box-shadow: 0 8px 24px rgba(30,40,25,.05);
}

/* — Mini-guide : 1 colonne sur mobile (déjà dans Bloc E, rappel explicite) — */
.k-group-mini-guide {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px 10px;
}

/* — Switcher multi-panier : tab plus petite sur mobile — */
.k-group-cart-tab {
  min-width: 130px;
}



/* ── GROUP MOBILE COMPACT — sous-mode max-width: 390px (petits écrans) ── */
/* Cible iPhone SE, Galaxy A, et tout écran < 390px.
   Densification supplémentaire uniquement — on ne masque pas
   l'identité OTP (strong conservé), seul le span détail peut être omis
   car le titre "Identité sécurisée par OTP" suffit à la confiance. */


/* Conteneur encore plus serré */
#k-group-view.k-group-view {
  padding: 0 8px 76px;
}

/* Header ultra-compact */
.k-group-view .k-group-header {
  padding: 7px 10px 5px;
}
.k-group-view .k-group-header h2 {
  font-size: 16px;
}

/* Carte contribution condensée */
.k-group-contribute-card {
  padding: 10px;
}
.k-group-contribute-card .k-group-section-title {
  font-size: 20px;
  margin: 0 0 6px;
}

/* Phase badge encore plus petit */
.k-group-phase-badge {
  font-size: 10px;
  padding: 4px 7px;
  margin-bottom: 6px;
}

/* Identity note : on masque le span détail (le titre OTP reste)
   Le titre "Identité sécurisée par OTP" seul suffit à rassurer.
   La mention "autre numéro" est accessible via le flow OTP lui-même. */
.k-group-identity-note {
  padding: 6px 8px;
  margin: 5px 0 7px;
}
.k-group-identity-note strong {
  font-size: 12px;
}
.k-group-identity-note span {
  display: none; /* masqué <390px uniquement — voir commentaire ci-dessus */
}

/* Champs encore plus compacts */
.k-group-input {
  height: 40px;
  min-height: 40px;
  font-size: 14px;
  padding: 6px 9px;
}
#k-ge-msg,
#k-gp-msg {
  height: 38px;
}
.k-group-field {
  margin-bottom: 6px;
}
.k-group-label,
.k-group-contribute-card label {
  font-size: 10px;
  margin-bottom: 2px;
}

/* Bouton CTA : légèrement réduit mais toujours > 44px (WCAG) */
.k-group-btn {
  min-height: 44px;
  font-size: 14px;
}
#k-ge-submit-btn,
#k-gp-pay-btn {
  height: 44px;
  min-height: 44px;
  font-size: 14px;
  margin-top: 4px;
}

/* Items card encore plus serré */
.k-group-items-card {
  padding: 8px 10px;
}
.k-group-items-toggle {
  min-height: 40px;
}
.k-group-items-toggle strong {
  font-size: 15px;
}

/* Mini-guide masqué sur très petits écrans (non essentiel) */
.k-group-mini-guide {
  display: none;
}


/* ── Bloc H — Sélecteurs utilitaires flat ──────────────────────── */

.k-group-phase-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}
.k-group-phase-badge--open {
  background: var(--green-alpha-12);
  color: var(--green-text-sett);
}
.k-group-phase-badge--settlement {
  background: var(--amber-bg-12);
  color: var(--amber-text-sett);
}
.k-group-funded-callout {
  border: 1px solid var(--green-alpha-28);
  background: var(--green-alpha-09);
  border-radius: 18px;
  padding: 16px;
  margin-top: 14px;
}
.k-group-funded-callout strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--text);
}
.k-group-funded-callout p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* funded-callout variante gap (remplace les inline styles du template) */
.k-group-funded-callout--gap {
  border-color: var(--amber-border-28);
  background: var(--amber-bg-08);
}
.k-group-funded-callout--gap strong {
  color: var(--amber-text-sett);
}

/* ── LOT 6 — bouton de confirmation : base lisible obligatoire ──────────
   Avant : .k-group-btn--finalize n'avait AUCUNE règle de base → bouton
   transparent sur fond clair ("Confirmer la commande" quasi invisible).
   Exigences : contraste fort, pleine largeur mobile, libellé sur 2 lignes
   accepté, jamais de blanc sur fond clair. */
.k-group-btn--finalize {
  width: 100%;
  background: var(--cta-green);
  color: var(--white);
  border: 0;
  padding: 13px 16px;
  white-space: normal;       /* libellés longs → deux lignes acceptées */
  line-height: 1.25;
}
.k-group-btn--finalize:hover { filter: brightness(.94); }
.k-group-btn--finalize:disabled {
  background: var(--sand-dark);
  color: var(--text-muted);
  cursor: not-allowed;
}
/* Variante gap : "Je paie le reste" — amber foncé + texte blanc (contraste AA) */
.k-group-funded-callout--gap .k-group-btn--finalize {
  background: var(--amber-text-sett);
  color: var(--white);
}

/* ── LOT 6 — ligne Attendre / Je paie le reste ──────────────────────────
   Desktop & mobile large : deux colonnes, l'action principale domine.
   Mobile < 380px : boutons côte à côte interdits (sauf WhatsApp/Copier)
   → empilés, action principale pleine largeur EN PREMIER visuellement. */
.k-group-actions-row {
  display: grid;
  grid-template-columns: minmax(96px, .6fr) 1fr;
  gap: 10px;
  align-items: stretch;
}
.k-group-actions-row .k-group-btn { width: 100%; }
@media (max-width: 380px) {
  .k-group-actions-row {
    grid-template-columns: 1fr;
  }
  /* l'action principale (Je paie le reste) passe au-dessus de "Attendre" */
  .k-group-actions-row .k-group-btn--finalize { order: -1; }
  /* seule exception côte à côte autorisée : WhatsApp / Copier */
  .k-group-view .k-group-creator-actions {
    grid-template-columns: 1fr 1fr;
  }
}

/* Spécificité 0-2-0 : bat les rules single-class (.k-group-btn--primary etc.) sans !important */
.k-group-btn.k-group-disabled-finalize {
  opacity: .72;
  cursor: not-allowed;
  background: var(--sand-dark);
  color: var(--text-muted);
}
.k-group-share-hint,
.k-group-finalize-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 10px 0 0;
}
/* État expiration imminente — remplace inline style ${expSoon} */
.k-group-share-hint.is-exp-soon {
  color: var(--danger);
  font-weight: 700;
}
.k-group-split-hint {
  background: var(--violet-bg-light);
  color: var(--violet-dark);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.4;
}
.k-group-self-toggle {
  margin-top: 12px;
  width: 100%;
  border: 1px dashed var(--border);
  background: var(--sand);
  color: var(--text);
  border-radius: 14px;
  padding: 11px;
  font-weight: 800;
  cursor: pointer;
}
.k-group-self-panel[hidden] { display: none; }
.k-group-self-panel:not([hidden]) + .k-group-self-toggle { display: none; }
.k-group-self-toggle.is-open { display: none; }
.k-group-locked-amount {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--green-alpha-09);
  border: 1px solid var(--green-alpha-20);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0;
}
.k-group-locked-amount strong {
  font-size: 20px;
  color: var(--text);
}
.k-group-locked-amount span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}
.k-group-commitment-list { margin: 8px 0 0; }
.k-group-commitment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.k-group-commitment-row:last-child { border-bottom: none; }
.k-group-commitment-name { flex: 1; font-size: 14px; font-weight: 600; }
.k-group-commitment-amount { font-size: 14px; color: var(--text); }
.k-group-commitment-status { font-size: 12px; color: var(--text-muted); }
.k-group-settlement-summary {
  background: var(--sand);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0;
  font-size: 13px;
}
.k-group-settlement-summary strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}
.k-group-saved-commitment {
  border: 1px solid var(--green-alpha-24);
  background: rgba(31,122,84,.08);
  border-radius: 14px;
  padding: 13px 14px;
  margin: 0 0 12px;
}
.k-group-saved-commitment strong {
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
  color: var(--text);
}
.k-group-saved-commitment span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}
.k-group-saved-commitment button {
  margin-top: 10px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  border-radius: 12px;
  padding: 10px;
  font-weight: 800;
  cursor: pointer;
}
.k-group-eng-fields[hidden] { display: none; }
/* État succès du bouton d'engagement (point 3) : feedback immédiat avant
   l'apparition de la carte « Part indiquée ». */
.k-group-btn.is-done,
.k-group-btn.is-done:disabled {
  background: var(--checkout-accent);
  color: var(--white);
  opacity: 1;
  cursor: default;
}
.k-group-items-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.k-group-items-toggle strong { font-size: 15px; }
.k-group-items-toggle span { font-size: 12px; color: var(--text-muted); }
.k-group-items-chevron { transition: transform .2s ease; font-size: 13px; }
.k-group-items-card.is-open .k-group-items-chevron { transform: rotate(180deg); }
.k-group-items-list[hidden] { display: none; }
.k-group-items-list {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ── Bouton danger — annulation (remplace inline style du template) ─ */
.k-group-btn--danger {
  color: var(--danger);
  border-color: var(--danger);
  opacity: .8;
  width: 100%;
}

/* ── Migration depuis cart.css (PR-G2, 2026-05-28) ─────────────── */
/* Sélecteurs utilitaires qui n'existaient que dans cart.css        */

/* Carte groupe liste — card head, title, meta, pill */
.k-group-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.k-group-card-title { font-size: 16px; font-weight: 950; color: var(--text); line-height: 1.2; }
.k-group-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.k-group-pill { flex: 0 0 auto; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 950; }
.k-group-pill.is-open { background: var(--green-bg-leaf); color: var(--green-text-strong); }
.k-group-pill.is-paid { background: var(--blue-light-bg); color: var(--blue-link-deep); }

/* Montant groupe */
.k-group-money { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.k-group-money span { font-size: 12px; color: var(--text-muted); font-weight: 800; }
.k-group-money strong { font-size: 17px; color: var(--text); font-weight: 950; }

/* Engagements / contributions */
.k-group-contribs { margin-bottom: 16px; }
.k-group-contribs-label { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.k-group-contrib-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--border); }
.k-group-contrib-row:last-child { border-bottom: none; }
.k-group-contrib-name { font-size: 14px; color: var(--text); font-weight: 600; }
.k-group-contrib-amount { font-size: 14px; color: var(--green-text-strong); font-weight: 800; }
.k-group-contrib-empty { font-size: 13px; color: var(--text-muted); font-style: italic; margin: 0; }

/* Actions et boutons variantes cart.css */
.k-group-actions { display: flex; gap: 10px; }
.k-group-btn--ghost { background: var(--sand); color: var(--text); border: 1px solid var(--border); }
.k-group-btn--ghost:hover { background: var(--sand-dark); }
.k-group-btn--copy { background: var(--sand); color: var(--text); border: 1px solid var(--border); }
.k-group-btn--copy:hover { background: var(--sand-dark); }
.k-group-btn--primary { width: 100%; padding: 14px; margin-top: 14px; background: var(--violet); color: var(--white); border-radius: 50px; font-size: 15px; }
.k-group-btn--primary:hover { background: var(--violet-dark); transform: translateY(-1px); }
.k-group-btn--primary:disabled { background: var(--sand-dark); color: var(--text-light); cursor: not-allowed; transform: none; }
.k-group-btn--mt { margin-top: 14px; }

/* Spinner chargement */
.k-group-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 200px; }
.k-group-spin { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--violet); border-radius: 50%; animation: kGroupSpin .7s linear infinite; }
@keyframes kGroupSpin { to { transform: rotate(360deg); } }

/* Articles panier partagé (vue participant) */
.k-group-item-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.k-group-item-row:last-child { border-bottom: none; }
.k-group-item-name { flex: 1; font-size: 13px; color: var(--text); }
.k-group-item-qty { font-size: 12px; color: var(--text-muted); }
.k-group-item-price { font-size: 13px; font-weight: 700; color: var(--text); }
.k-group-contribute-section { border-top: 1px solid var(--border); padding-top: 16px; }

/* Utilitaires */
.k-group-remaining { font-size: 12px; color: var(--text-muted); margin: -8px 0 12px; text-align: right; }
.k-group-remaining strong { color: var(--text); }
.k-group-divider { height: 1px; background: var(--border); margin: 16px 0; }

/* État vide */
.k-group-empty { border: 1px dashed rgba(103,77,45,.25); background: var(--sand); border-radius: 18px; padding: 32px 16px; text-align: center; color: var(--text-muted); display: grid; gap: 6px; }
.k-group-empty-icon { font-size: 36px; }
.k-group-empty strong { font-size: 15px; color: var(--text); }
.k-group-empty span { font-size: 13px; }

/* Confirmation engagement */
.k-group-success { text-align: center; padding: 32px 16px; display: grid; gap: 8px; }
.k-group-success-icon { font-size: 48px; }
.k-group-success strong { font-size: 18px; font-weight: 950; color: var(--text); }
.k-group-success p { font-size: 14px; color: var(--text-muted); margin: 0; }
.k-group-success-detail { font-size: 13px; }
.k-group-success-remain { color: var(--red-danger-text); }

/* Badge bnav vert */
.k-bnav-badge--group { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--cta-green); border: 2px solid var(--white); display: none; }
.k-bnav-badge--group.show { display: block; }

/* Bannière groupe permanente */
.k-group-banner {
  display: none;
  width: 100%;
  background: var(--green-bg-leaf);
  border-bottom: 1px solid var(--cta-green);
  z-index: 90;
  position: relative;
}
.k-group-banner.show { display: block; }
.k-gbanner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.k-gbanner-inner.is-urgent {
  background: var(--cream-amber-bg);
  border-color: var(--amber-border);
}
.k-gbanner-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cta-green);
  flex-shrink: 0;
  animation: kGroupPulse 2s ease-in-out infinite;
}
@keyframes kGroupPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.k-gbanner-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.k-gbanner-timer { font-weight: 700; }
.k-gbanner-timer.is-urgent { color: var(--red-danger-text); }
.k-gbanner-cta {
  flex-shrink: 0;
  padding: 5px 12px;
  background: var(--cta-green);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.k-gbanner-cta:hover { background: var(--green-text-strong); }
.k-gbanner-close {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.k-gbanner-close:hover { background: rgba(0,0,0,.08); }

/* ---------------------------------------------------------------
   GROUP BANNER — états dynamiques (.is-funded, .is-urgent, .is-compact)
   Rapatrié depuis b-group-banner.js (L3-S8)
   Owner : group-cart-flow.css
   --------------------------------------------------------------- */

.k-group-banner .k-gbanner-inner {
  transition: transform .22s ease, opacity .22s ease, max-height .22s ease, padding .22s ease;
}
.k-group-banner .k-gbanner-inner.is-funded {
  background: rgba(31,122,84,.14);
  border-color: rgba(31,122,84,.35);
  box-shadow: 0 8px 24px rgba(31,122,84,.12);
}
.k-group-banner .k-gbanner-inner.is-funded .k-gbanner-dot {
  background: var(--green-text-sett);
  animation: kGBPulse 1.4s ease-in-out infinite;
}
.k-group-banner .k-gbanner-inner.is-urgent {
  background: rgba(245,158,11,.13);
  border-color: rgba(245,158,11,.35);
}
.k-group-banner .k-gbanner-cta.is-funded {
  background: var(--green-text-sett);
  color: white;
}
.k-group-banner.is-compact .k-gbanner-inner {
  max-height: 42px;
  overflow: hidden;
  padding-top: 7px;
  padding-bottom: 7px;
  opacity: .92;
}
.k-group-banner.is-compact .k-gbanner-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-group-banner.is-compact .k-gbanner-timer { display: none; }
.k-group-banner.is-compact .k-gbanner-close { display: none; }
.k-group-banner.is-compact .k-gbanner-cta {
  font-size: 12px;
  padding: 6px 10px;
}
.k-group-banner:hover .k-gbanner-inner,
.k-group-banner:focus-within .k-gbanner-inner { opacity: 1; }

@keyframes kGBPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 3px rgba(31,122,84,.12); }
  50%       { transform: scale(1.18); box-shadow: 0 0 0 7px rgba(31,122,84,.08); }
}

/* ════════════════════════════════════════════════════════════════════
 * VUE PARTICIPANT — PREMIUM DESKTOP (PARTICIPANT-D1)
 * Owner : group-cart-flow.css
 * ════════════════════════════════════════════════════════════════════ */

/* ── Articles enrichis — lignes rich ─────────────────────────────── */

.k-group-item-row--rich {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.k-group-item-row--rich:last-of-type { border-bottom: none; }

.k-group-item-thumb {
  width: 44px; height: 44px;
  border-radius: 10px; object-fit: cover;
  background: var(--sand); flex-shrink: 0;
}
.k-group-item-thumb--fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--sand);
  border-radius: 10px; width: 44px; height: 44px;
}
.k-group-item-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.k-group-item-body .k-group-item-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-group-item-detail { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.k-group-item-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; flex-shrink: 0;
}
.k-group-item-total { font-size: 14px; font-weight: 800; color: var(--text); }

.k-group-items-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0 2px; border-top: 2px solid var(--border);
  margin-top: 4px; font-size: 13px; color: var(--text-muted);
}
.k-group-items-total-row strong { font-size: 15px; font-weight: 950; color: var(--text); }

/* ── Header participant ───────────────────────────────────────────── */

.k-group-header-eyebrow {
  font-size: 11px; font-weight: 800; color: var(--violet);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
}
/* ── Header V4.1 (mockup) ──────────────────────────────────────── */
.k-group-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.k-group-header-right {
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.k-group-header-right--urgent {
  color: var(--coral); font-weight: 600;
}
.k-group-header-title {
  font-size: 22px; font-weight: 950; color: var(--text);
  margin: 0 0 2px; line-height: 1.1;
}
.k-group-header-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px; font-size: 13px; color: var(--text-muted); margin-top: 6px;
}
.k-group-header-total { font-weight: 800; color: var(--text); font-size: 14px; }
.k-group-header-sep   { color: var(--border); }
.k-group-header-status { font-weight: 600; }
.k-group-header-count  { font-weight: 500; }

/* ── Phase badge awaiting (rouge doux, mockup) ─────────────────── */
.k-group-phase-badge--awaiting {
  background: var(--red-awaiting-bg); color: var(--red-awaiting-text);
}

/* ── Badge estimation violet (inline, mockup) ──────────────────── */
.k-group-estimation-badge {
  background: var(--violet-light);
  color: var(--violet-dark);
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 12px;
  margin: 10px 0; text-align: center;
}

/* ── Barre de financement (phase paiement, mockup) ─────────────── */
.k-group-funding-bar { margin: 10px 0 4px; }
.k-group-funding-bar-labels {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-muted); margin-bottom: 4px;
}
.k-group-funding-bar-amounts { font-weight: 600; color: var(--text); }
.k-group-funding-bar-track {
  height: 8px; border-radius: 999px; background: var(--sand);
}
.k-group-funding-bar-fill {
  height: 8px; border-radius: 999px;
  background: var(--checkout-accent);
  transition: width .4s ease;
}

/* ── Bouton payer vert (mockup) ────────────────────────────────── */
.k-group-btn--pay {
  width: 100%; padding: 13px 20px; border-radius: 50px; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer;
  background: var(--checkout-accent); color: var(--white);
  transition: opacity .15s;
}
.k-group-btn--pay:hover { opacity: .92; }
.k-group-btn--pay:disabled { opacity: .6; cursor: default; }

/* ── Formulaire paiement mypart (bordure verte, mockup) ────────── */
.k-group-mypart--payment {
  border-color: var(--checkout-accent) !important;
}
.k-group-mypart--payment .k-group-mypart-head {
  color: var(--checkout-accent-deep, var(--checkout-accent));
}
.k-group-payment-hint {
  font-size: 11px; color: var(--text-muted); margin: 0 0 8px; line-height: 1.4;
}

/* ── Footnote (sous les formulaires) ───────────────────────────── */
.k-group-footnote {
  font-size: 11px; color: var(--text-muted); text-align: center;
  margin: 8px 0 0; line-height: 1.3;
}

/* ── Carte engagements compacte ──────────────────────────────────── */
.k-group-commitments-card { margin-top: 10px; padding: 12px 14px; border-radius: 16px; }

/* ── État terminal tout payé ─────────────────────────────────────── */
.k-group-fully-paid-card { padding: 32px 20px; text-align: center; border-radius: 20px; }
.k-group-fully-paid-icon { font-size: 40px; margin-bottom: 10px; }
.k-group-fully-paid-card strong { font-size: 17px; font-weight: 950; color: var(--text); display: block; }
.k-group-terminal-card { padding: 32px 20px; text-align: center; border-radius: 20px; }
.k-group-terminal-icon { font-size: 40px; margin-bottom: 10px; }
.k-group-terminal-card strong { font-size: 17px; font-weight: 950; color: var(--text); display: block; }
.k-group-terminal-card p { font-size: 13px; color: var(--text-muted); margin: 8px 0 0; }

/* ── Layout participant — mobile (défaut) ────────────────────────── */
.k-group-participant-layout { display: flex; flex-direction: column; gap: 0; }
.k-group-participant-col-main,
.k-group-participant-col-aside { width: 100%; }

/* ── Layout participant — desktop 2 colonnes (canon ≥ 900px) ─────── */
@media (min-width: 900px) {
  #k-group-view.k-group-view { padding: 0 16px 40px; }

  .k-group-participant-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    align-items: start;
  }
  .k-group-participant-col-main { display: flex; flex-direction: column; gap: 12px; }
  .k-group-participant-col-aside { position: sticky; top: 80px; }

  .k-group-view .k-group-subhead { display: block; font-size: 14px; color: var(--text-muted); margin-top: 4px; }
  .k-group-view .k-group-header {
    padding: 20px 20px 16px; border-radius: 20px;
    background: var(--sand); border: 1px solid var(--border);
  }
  .k-group-header-title  { font-size: 26px; margin-bottom: 6px; }
  .k-group-header-eyebrow { font-size: 12px; margin-bottom: 6px; }

  .k-group-items-card { padding: 16px 18px; border-radius: 20px; }
  .k-group-items-toggle strong { font-size: 18px; }

  .k-group-item-row--rich { grid-template-columns: 56px 1fr auto; gap: 14px; padding: 10px 0; }
  .k-group-item-thumb,
  .k-group-item-thumb--fallback { width: 56px; height: 56px; border-radius: 12px; }
  .k-group-item-body .k-group-item-name { font-size: 15px; }
  .k-group-item-detail { font-size: 13px; }
  .k-group-item-total  { font-size: 15px; }

  .k-group-contribute-card { padding: 22px 20px; border-radius: 22px; }
  .k-group-contribute-card .k-group-desc-text {
    display: block; font-size: 14px; line-height: 1.5;
    color: var(--text-muted); margin-bottom: 14px;
  }
  .k-group-contribute-card .k-group-section-title { font-size: 22px; margin-bottom: 10px; }
  .k-group-phase-badge { font-size: 12px; padding: 5px 12px; margin-bottom: 12px; }

  .k-group-label,
  .k-group-contribute-card label {
    font-size: 12px; margin-bottom: 5px; font-weight: 800; color: var(--text-muted);
  }
  .k-group-input { height: 46px; min-height: 46px; font-size: 15px; padding: 8px 14px; border-radius: 14px; }
  .k-group-field { margin-bottom: 12px; }

  .k-group-identity-note { padding: 10px 12px; margin: 8px 0 14px; border-radius: 14px; }
  .k-group-identity-note strong { font-size: 14px; }
  .k-group-identity-note span { display: block; font-size: 12px; line-height: 1.4; margin-top: 3px; }

  .k-group-split-hint,
  .k-group-equal-hint { font-size: 13px; padding: 9px 12px; margin: 8px 0 14px; border-radius: 12px; }

  .k-group-btn { min-height: 50px; font-size: 16px; border-radius: 999px; }
  #k-ge-submit-btn,
  #k-gp-pay-btn { height: 52px; min-height: 52px; font-size: 16px; margin-top: 12px; letter-spacing: .01em; }

  .k-group-saved-commitment { padding: 14px 16px; border-radius: 16px; margin-bottom: 14px; }
  .k-group-commitments-card { padding: 14px 18px; border-radius: 18px; }
}

@media (min-width: 1200px) {
  .k-group-participant-layout { grid-template-columns: 1fr 440px; gap: 32px; }
  .k-group-header-title { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════════
 * SIMPLIFICATION UI — carte identité créateur + récap financier
 * Aligné sur mockup "direction à prendre" (PR simplification)
 * ══════════════════════════════════════════════════════════════════ */

/* ── Carte identité créateur ──────────────────────────────────────── */
.k-group-creator-id {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.k-group-creator-id-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--cta-green);
  color: var(--white);
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.k-group-creator-id-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.k-group-creator-id-info strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.k-group-creator-id-phone {
  font-size: 12px;
  color: var(--whatsapp);
  font-weight: 700;
}

/* ── Récap financier créateur ─────────────────────────────────────── */
.k-group-financial-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px 20px 14px;
  margin-bottom: 12px;
  box-shadow: 0 8px 28px var(--border-text-06, rgba(30,40,25,.06));
}
.k-group-financial-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.k-group-financial-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.k-group-financial-stat strong {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}
.k-group-financial-stat span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.k-group-financial-stat.is-highlight strong {
  color: var(--cta-green);
}

/* ── Section verrouillage simplifiée ──────────────────────────────── */
.k-group-lock-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.k-group-lock-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.k-group-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--font);
  background: var(--white);
  color: var(--text);
  appearance: none;
  cursor: pointer;
}

/* ── Participants : colonnes prénom+phone / montant+statut ─────────── */
.k-group-commitment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
}
.k-group-commitment-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.k-group-commitment-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.k-group-commitment-phone {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.k-group-commitment-status--paid {
  color: var(--cta-green);
}
.k-group-commitment-status--waiting {
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   UX V4 — DIRECTION MOCKUP (condensation toggles style checkout)
   Accordéons, badge de phase, carte identité créateur, avatars.
   ═══════════════════════════════════════════════════════════════ */

/* ── Accordéon style checkout (cf. .ck-track-details) ──────────── */
.k-group-accordion {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--sand);
}
.k-group-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 13px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;             /* LOT 6 — cible tactile */
  box-sizing: border-box;
}
.k-group-accordion summary::-webkit-details-marker { display: none; }
.k-group-accordion summary::after {
  content: "+";
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}
.k-group-accordion[open] summary::after { content: "−"; }
.k-group-accordion > *:not(summary) { padding: 0 13px 12px; }

.k-group-acc-meta {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Variante flush : dans une carte déjà bordée (side-card, progress-card) */
.k-group-accordion--flush {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.k-group-accordion--flush summary { padding: 2px 0; }
.k-group-accordion--flush > *:not(summary) { padding: 8px 0 0; }

/* ── Badge de phase (tête de carte d'actions) ──────────────────── */
.k-group-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 12px;
}
.k-group-phase-badge--open {
  background: var(--green-bg-10, rgba(42,122,62,.1));
  color: var(--cta-green);
  border: 1px solid var(--green-border-22, rgba(42,122,62,.22));
}
.k-group-phase-badge--settle {
  background: var(--amber-bg-08);
  color: var(--amber-text-sett);
  border: 1px solid var(--amber-border-28);
}
.k-group-phase-badge--paid {
  background: var(--green-bg-10, rgba(42,122,62,.1));
  color: var(--cta-green);
  border: 1px solid var(--green-border-22, rgba(42,122,62,.22));
}
.k-group-phase-badge--done {
  background: var(--sand);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── Carte identité créateur (direction mockup) ────────────────── */
.k-group-owner-id { padding: 16px 20px 14px; }
.k-group-owner-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--violet);
  margin-bottom: 4px;
}
.k-group-owner-title {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--text);
}
.k-group-owner-sub {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.k-group-owner-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text);
}
.k-group-owner-meta strong { font-weight: 900; }
.k-group-owner-sep { color: var(--text-muted); }

/* ── Avatars initiales participants (direction mockup) ─────────── */
.k-group-commitment-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.k-group-commitment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  flex-shrink: 0;
  color: var(--white);
}
.k-group-commitment-avatar--h1 { background: var(--cta-green); }
.k-group-commitment-avatar--h2 { background: var(--violet); }
.k-group-commitment-avatar--h3 { background: var(--amber-text-sett); }
.k-group-commitment-avatar--h4 { background: var(--ocean); }
.k-group-commitment-avatar--h5 { background: var(--coral); }
.k-group-commitment-left { min-width: 0; flex: 1; }

/* ── Accordéon Options (LOT 5 — danger séparé dedans) ──────────── */
.k-group-options-acc { margin-top: 14px; }

/* ── Cockpit créateur V4.1 — carte unifiée (mockup) ──────────── */
.k-gc-unified { padding: 16px; }
.k-gc-items-row {
  display: flex; justify-content: space-between; align-items: center;
  border: 0.5px solid var(--border); border-radius: var(--radius, 12px);
  padding: 10px 12px; margin: 10px 0; font-size: 13px;
}
.k-gc-items-edit { font-size: 12px; color: var(--violet); cursor: pointer; }
.k-gc-sec-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin: 12px 0 6px;
}
.k-gc-est-list {
  border: 0.5px solid var(--border); border-radius: 12px;
  padding: 2px 12px; margin-bottom: 10px;
}
.k-gc-est-row {
  display: flex; justify-content: space-between; padding: 7px 0;
  font-size: 13px; color: var(--text);
}
.k-gc-est-row + .k-gc-est-row { border-top: 0.5px solid var(--border); }
.k-gc-est-row span:last-child { font-weight: 600; }
.k-gc-est-row--anon { color: var(--text-muted); }
.k-gc-est-row--anon span:last-child { font-weight: 400; }
.k-gc-est-agg {
  background: var(--violet-light); color: var(--violet-dark);
  font-size: 13px; font-weight: 600; padding: 8px 14px;
  border-radius: 12px; margin-bottom: 14px;
}
.k-gc-est-agg span { color: var(--violet); font-weight: 400; }
.k-gc-empty {
  font-size: 13px; font-style: italic; color: var(--text-muted);
  margin: 10px 0; padding: 10px 0; border-left: 3px solid var(--violet-light);
  padding-left: 12px;
}
.k-gc-sub { font-size: 12px; color: var(--text-muted); margin: 2px 0 12px; }
.k-gc-fund { margin-bottom: 14px; }
.k-gc-fund-labels {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--text-muted); margin-bottom: 4px;
}
.k-gc-fund-val { font-weight: 600; color: var(--text); }
.k-gc-fund-track { height: 8px; border-radius: 999px; background: var(--sand); }
.k-gc-fund-fill { height: 8px; border-radius: 999px; transition: width .4s ease; }
.k-gc-btn-main {
  width: 100%; padding: 13px 20px; border-radius: 999px; border: none;
  font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--violet); color: var(--white);
}
.k-gc-btn-main:hover { opacity: .92; }
.k-gc-btn-main:disabled { opacity: .6; cursor: default; }
.k-gc-btn-finalize {
  width: 100%; padding: 13px 20px; border-radius: 999px; border: none;
  font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--checkout-accent); color: var(--white);
}
.k-gc-note {
  font-size: 12px; color: var(--text-muted); text-align: center;
  margin: 8px 0 0; line-height: 1.3;
}
.k-gc-share-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0;
}
/* ── Boutons Cas B (AWAITING_CHOICE, mockup) ──────────────────── */
.k-gc-btn-choice {
  width: 100%; text-align: left; padding: 12px 14px;
  border-radius: 14px; border: 0.5px solid var(--border);
  margin-bottom: 8px; cursor: pointer;
  background: var(--white);
}
.k-gc-btn-choice strong {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--text); margin-bottom: 2px;
}
.k-gc-btn-choice small { font-size: 12px; color: var(--text-muted); }
.k-gc-btn-choice--complete {
  background: var(--checkout-accent); border-color: var(--checkout-accent);
}
.k-gc-btn-choice--complete strong { color: var(--white); }
.k-gc-btn-choice--complete small { color: rgba(255,255,255,.75); }
.k-gc-btn-choice--danger { border-color: var(--red-awaiting-bg); }
.k-gc-btn-choice--danger strong { color: var(--red-danger); }
.k-gc-btn-choice--danger small { color: var(--text-muted); }

/* ── Cockpit closed phase — header / body structure ───────────── */
.k-gc-header {
  padding: 14px 16px 12px;
  background: var(--coral-light);
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid var(--border-coral-13);
}
.k-gc-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.k-gc-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Fund section footer ──────────────────────────────────────── */
.k-gc-fund-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-muted);
}
.k-gc-fund-val-accent {
  color: var(--coral);
  font-weight: 700;
}

/* ── Stats row (remaining / total) ───────────────────────────── */
.k-gc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.k-gc-stat {
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.k-gc-stat strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.k-gc-stat span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}
.k-gc-stat--coral {
  background: var(--coral-light);
  border-color: var(--border-coral-13);
}
.k-gc-stat--coral strong { color: var(--coral); }
.k-group-options-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-group-options-body .k-group-btn { width: 100%; }
.k-group-options-body .k-group-options-danger {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ── Condensation mobile ───────────────────────────────────────── */
@media (max-width: 380px) {
  .k-group-financial-stats {
    grid-template-columns: 1fr 1fr;   /* 2×2 — lisible sur petits écrans */
  }
  .k-group-acc-meta { font-size: 11.5px; }
}

/* ── GAP-B / Phase D — lien personnalisé (créateur) ──────────────── */
.k-gc-personalize-acc { margin-top: 10px; }
.k-gc-personalize-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.k-gc-personalize-body .k-gc-share-row { margin: 4px 0 0; }

/* ── GAP-B / Phase D — suggestion de l'organisateur (participant) ── */
.k-group-suggestion-note {
  font-size: 12.5px;
  color: var(--violet);
  background: var(--violet-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 0 8px;
  line-height: 1.4;
}


/* ── shared-followup.css ─────────────────────────────────── */
/* Suivi — commandes + paniers partagés */
.k-track-dashboard{display:grid;gap:18px;max-width:1280px;margin:0 auto}.k-track-orders-panel,.k-track-shared-panel{background:var(--white);border:1px solid rgba(103,77,45,.18);border-radius:22px;padding:18px;box-shadow:0 8px 28px rgba(42,62,44,.06)}.k-track-panel-head{margin-bottom:14px}.k-track-panel-head--row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.k-track-panel-head h2,.k-track-orders-panel h2{margin:0 0 5px;font-size:19px;font-weight:950;color:var(--text);letter-spacing:-.02em}.k-track-shared-count{min-width:28px;height:28px;border-radius:999px;background:var(--sand);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:950;color:var(--text)}.k-track-shared-list{display:grid;gap:12px}.k-track-shared-card{border:1px solid rgba(103,77,45,.18);border-radius:18px;background:linear-gradient(180deg,var(--sand) 0%,var(--sand) 100%);padding:14px;box-shadow:0 4px 16px rgba(42,62,44,.04)}.k-track-shared-card:first-child{border-color:rgba(61,109,17,.26);box-shadow:0 8px 24px rgba(61,109,17,.08)}.k-track-shared-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.k-track-shared-title{font-size:14px;font-weight:950;color:var(--text);line-height:1.15}.k-track-shared-meta{font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.25}.k-track-shared-pill{flex:0 0 auto;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:950}.k-track-shared-pill.is-open{background:var(--green-bg-leaf);color:var(--green-text-strong)}.k-track-shared-pill.is-paid{background:var(--blue-light-bg);color:var(--blue-link-deep)}.k-track-shared-money{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}.k-track-shared-money span{font-size:12px;color:var(--text-muted);font-weight:800}.k-track-shared-money strong{font-size:16px;color:var(--text);font-weight:950}.k-track-shared-progress{height:7px;border-radius:999px;background:rgba(42,62,44,.09);overflow:hidden;margin-bottom:10px}.k-track-shared-progress span{display:block;height:100%;border-radius:999px;background:var(--cta-green);min-width:0}.k-track-shared-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.k-track-shared-bottom>span{font-size:11px;color:var(--text-muted);font-weight:800}.k-track-shared-actions{display:flex;gap:7px}.k-track-shared-actions button{width:36px;height:36px;border:1px solid rgba(103,77,45,.22);background:var(--white);border-radius:12px;cursor:pointer;font-size:15px;box-shadow:0 2px 8px rgba(42,62,44,.05)}.k-track-shared-actions button:active{transform:scale(.95)}.k-track-shared-empty{border:1px dashed rgba(103,77,45,.25);background:var(--sand);border-radius:18px;padding:28px 14px;text-align:center;color:var(--text-muted);display:grid;gap:4px}.k-track-shared-empty-icon{font-size:34px}.k-track-shared-empty strong{font-size:14px;color:var(--text)}.k-track-shared-empty span{font-size:12px}.k-track-view{padding-bottom:205px}.k-track-dashboard{display:block;padding:0 10px 205px;max-width:none}.k-track-orders-panel,.k-track-shared-panel{border-radius:18px;padding:13px;margin-bottom:12px;box-shadow:0 4px 18px rgba(42,62,44,.045)}.k-track-panel-head{margin-bottom:10px}.k-track-panel-head--row{align-items:center}.k-track-panel-head h2,.k-track-orders-panel h2{font-size:17px;line-height:1.15}.k-track-sub-hint{font-size:12px;line-height:1.28;margin-bottom:0}.k-track-shared-count{width:24px;height:24px;min-width:24px;font-size:11px}.k-track-shared-list{gap:9px}.k-track-shared-card{padding:11px 12px;border-radius:16px;box-shadow:none}.k-track-shared-card:first-child{box-shadow:0 4px 14px rgba(61,109,17,.055)}.k-track-shared-top{gap:8px;margin-bottom:8px}.k-track-shared-title{font-size:14px}.k-track-shared-meta{font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}.k-track-shared-pill{font-size:10px;padding:3px 8px}.k-track-shared-money{margin-bottom:6px;gap:8px}.k-track-shared-money span{font-size:12px}.k-track-shared-money strong{font-size:14px;max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}.k-track-shared-progress{height:6px;margin-bottom:8px}.k-track-shared-bottom{gap:8px}.k-track-shared-bottom>span{font-size:11px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.k-track-shared-actions{gap:6px;margin-left:auto}.k-track-shared-actions button{width:32px;height:32px;border-radius:10px;font-size:14px}.k-track-shared-panel{position:static;top:auto}.k-track-view~.k-wa-fab,.k-track-view .k-wa-fab,body:has(#k-track-view:not(.u-hidden)) .k-wa-fab{display:none}.k-track-view~.k-mini-cart,.k-track-view~.k-mini-cart-fab,.k-track-view~.k-floating-cart,.k-track-view~.k-cart-float,.k-track-view .k-mini-cart,.k-track-view .k-mini-cart-fab,.k-track-view .k-floating-cart,.k-track-view .k-cart-float,body:has(#k-track-view:not(.u-hidden)) .k-mini-cart,body:has(#k-track-view:not(.u-hidden)) .k-mini-cart-fab,body:has(#k-track-view:not(.u-hidden)) .k-floating-cart,body:has(#k-track-view:not(.u-hidden)) .k-cart-float{display:none}.k-track-shared-empty{padding:22px 12px;border-radius:16px}.k-track-shared-empty-icon{font-size:30px}.k-track-dashboard{padding-left:8px;padding-right:8px}.k-track-shared-meta{max-width:190px}.k-track-shared-money strong{max-width:118px}.k-track-shared-bottom>span{max-width:135px}@media(min-width:900px){.k-track-dashboard{grid-template-columns:minmax(560px,1.05fr) minmax(420px,.95fr);align-items:start;padding:0 32px}.k-track-dashboard--search{grid-template-columns:minmax(520px,1fr) minmax(420px,.85fr)}.k-track-shared-panel{position:sticky;top:104px}}@media(min-width:1200px){.k-track-dashboard{grid-template-columns:minmax(620px,1fr) minmax(460px,.78fr)}}


/* ── identity.css ────────────────────────────────────────── */
/**
 * identity.css — Komerce OTP / Identity gate styles
 *
 * @owner b-identity.js
 * @bundle components (via bundle-css.js)
 *
 * Refonte 2026-06 :
 * - 3 steps distincts (recap / phone / otp) au lieu de hidden toggles
 * - recap card : sand bg + avatar initiales + num-links sous le bloc
 * - boxes OTP : 42×50px, border-radius 11px
 * - timer : 30s par défaut
 * - scroll-lock via classe body (k-id-scroll-lock) au lieu de overflow direct
 * - animation sortie overlay (k-id-overlay--out)
 */

/* ── Scroll lock ─────────────────────────────────────────────────────── */
body.k-id-scroll-lock { overflow: hidden; }

/* ── Overlay ─────────────────────────────────────────────────────────── */
.k-id-overlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  background: rgba(18,22,18,.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: kIdFadeIn .18s ease forwards;
}
.k-id-overlay--out {
  animation: kIdFadeOut .15s ease forwards;
  pointer-events: none;
}
@keyframes kIdFadeIn  { from { opacity: 0; } to   { opacity: 1; } }
@keyframes kIdFadeOut { from { opacity: 1; } to   { opacity: 0; } }
@media (min-width: 900px) { .k-id-overlay { align-items: center; } }

/* ── Sheet ───────────────────────────────────────────────────────────── */
.k-id-sheet {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: 22px 22px 0 0;
  padding: 16px 18px calc(24px + env(safe-area-inset-bottom));
  animation: kIdSheetUp .22s ease forwards;
}
@media (min-width: 900px) {
  .k-id-sheet {
    border-radius: 18px;
    padding: 18px 20px 20px;
    max-width: 380px;
  }
}
@keyframes kIdSheetUp { from { transform: translateY(24px); opacity: .85; } to { transform: none; opacity: 1; } }

/* ── Handle ──────────────────────────────────────────────────────────── */
.k-id-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  margin: 0 auto 14px;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.k-id-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.k-id-title {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
}
.k-id-sub {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
}
.k-id-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--sand);
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Steps ───────────────────────────────────────────────────────────── */
.k-id-step[hidden] { display: none; }

/* ── Recap card ──────────────────────────────────────────────────────── */
.k-id-recap {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.k-id-recap-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.k-id-recap-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.k-id-recap-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-id-recap-phone {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Num links ───────────────────────────────────────────────────────── */
.k-id-num-links {
  display: flex;
  gap: 12px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.k-id-num-link {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--sage-dark);
  cursor: pointer;
  line-height: 1.3;
}
.k-id-num-link:hover { text-decoration: underline; }
.k-id-num-link--muted { color: var(--text-muted); font-weight: 600; }

/* ── Step phone : champs saisie ──────────────────────────────────────── */
.k-id-field { margin: 0 0 10px; }
.k-id-field label,
.k-id-sheet .k-ck-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.k-id-sheet .k-ck-group    { margin: 0 0 10px; }
.k-id-sheet .k-ck-phone-wrap { display: flex; gap: 8px; align-items: stretch; }
.k-id-sheet .k-ck-phone-select {
  flex: 0 0 auto;
  min-height: 36px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  font-weight: 700;
  padding: 0 8px;
  font-size: 12px;
}
.k-id-sheet .k-ck-phone-input,
.k-id-input {
  width: 100%;
  min-height: 36px;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  background: var(--white);
  color: var(--text);
}
.k-id-sheet .k-ck-phone-input:focus,
.k-id-input:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(200,92,45,.1);
}

/* ── Message code envoyé ─────────────────────────────────────────────── */
.k-id-sent {
  font-size: 12px;
  font-weight: 700;
  color: var(--coral);
  margin: 0 0 10px;
  line-height: 1.3;
}

/* ── Boxes OTP ───────────────────────────────────────────────────────── */
.k-id-otp-boxes {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin: 0 0 12px;
}
.k-id-otp-box {
  width: 42px;
  height: 50px;
  border: 2px solid var(--border);
  border-radius: 11px;
  background: var(--white);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  outline: none;
  caret-color: var(--coral);
  transition: border-color .12s, box-shadow .12s;
  -webkit-appearance: none;
  appearance: none;
}
.k-id-otp-box:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(200,92,45,.1);
}
.k-id-otp-box.filled {
  border-color: var(--sage);
  background: var(--sage-bg);
}
.k-id-otp-box.k-id-otp-shake {
  animation: kIdOtpShake .3s ease;
}
@keyframes kIdOtpShake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

/* ── Resend row ──────────────────────────────────────────────────────── */
.k-id-resend-row {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}
.k-id-resend-now {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--sage-dark);
  cursor: pointer;
}
.k-id-resend-now:hover { text-decoration: underline; }

/* ── Error ───────────────────────────────────────────────────────────── */
.k-id-error {
  min-height: 14px;
  margin: 0 0 6px;
  color: var(--red-danger-text);
  font-size: 11.5px;
  line-height: 1.35;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.k-id-btn {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--sage);
  color: var(--white);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.k-id-btn:disabled { opacity: .45; cursor: not-allowed; }
.k-id-secondary {
  margin-top: 8px;
  background: var(--sand);
  color: var(--text-muted);
}

/* ── Sending state ───────────────────────────────────────────────────── */
.k-id-btn--sending {
  background: var(--coral) !important;
  cursor: default;
}
.k-id-sending-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  animation: kIdDotPulse 1.1s ease-in-out infinite;
}
.k-id-sending-dot:nth-child(2) { animation-delay: .18s; }
.k-id-sending-dot:nth-child(3) { animation-delay: .36s; }
@keyframes kIdDotPulse {
  0%, 80%, 100% { transform: scale(.65); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1;  }
}


/* ── paypal.css ──────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   KOMERCE — CSS PayPal (Migration 079)

   À importer dans css/dist ou ajouter à la fin de css/interactions.css selon
   la pipeline boutique.
   ───────────────────────────────────────────────────────────────────────── */

/* Wrap PayPal — caché par défaut, révélé quand mode=paypal_eur */
.k-paypal-wrap {
  display: none;
  margin-top: 12px;
  padding: 12px;
  background: #fafbfc;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
}

.k-paypal-wrap.is-visible {
  display: block;
  animation: kPaypalFadeIn 220ms ease-out;
}

@keyframes kPaypalFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.k-paypal-title {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.k-paypal-paylater-tag {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: #0070ba; /* PayPal blue */
  background: #f0f7ff;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}

.k-paypal-buttons {
  /* Le SDK PayPal injecte ses propres boutons stylés — on contraint juste la largeur */
  min-height: 45px;
  width: 100%;
}

.k-paypal-buttons:empty {
  /* État de chargement avant injection SDK */
  background: linear-gradient(90deg, #f0f3f7 0%, #e3e8ee 50%, #f0f3f7 100%);
  background-size: 200% 100%;
  animation: kPaypalShimmer 1.2s linear infinite;
  border-radius: 6px;
}

@keyframes kPaypalShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.k-paypal-loading::before {
  content: "Chargement de PayPal…";
  display: block;
  text-align: center;
  font-size: 13px;
  color: #6b7785;
  padding: 14px 0;
}

.k-paypal-error {
  color: #c33;
  font-size: 13px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fdecea;
  border-radius: 6px;
  display: none;
}

.k-paypal-error:not(:empty) {
  display: block;
}

/* Chip PayPal — alignée sur les autres chips du checkout */
#ck-chip-paypal .ck-chip-icon {
  /* Le logo PayPal officiel utilise leurs couleurs — l'emoji 🅿️ reste un fallback */
  color: #0070ba;
}

#ck-chip-paypal.ck-pay-chip--active {
  border-color: #0070ba;
  background: #f0f7ff;
}