/* ═══════════════════════════════════════════════════════════════
   KOMERCE — desktop.css (2026-06-14)
   Généré par deploy-css.js — éditer les sources CSS.
   ═══════════════════════════════════════════════════════════════ */
/* ── boutique-desktop.css ────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   KOMERCE — boutique-desktop.css
   Fichier unique : règles globales (mobile-first) + overrides desktop.
   Remplace desktop-upgrade.css + desktop-mega-nav.css + shared.css.
   Chargé sans attribut media — mobile-first par construction.
   ══════════════════════════════════════════════════════════════════
   PALETTE-FIX-01 (2026-05-17) : tous les rgba(31,48,36,…) rgba(42,62,44,…)
   rgba(47,107,63,…) remplacés par tokens de marque :
     --ocean #64AF5A → rgba(100,175,90,…)
     --coral #C85C2D → rgba(200,92,45,…)
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   PARTIE 1 — RÈGLES GLOBALES (mobile-first, tous breakpoints)
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   KOMERCE — shared.css
   Règles partagées mobile + desktop.
   Chargé SANS attribut media — s'applique sur tous les breakpoints.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   FOOTER — caché par défaut (le CSS desktop le montre à ≥900px)
   ══════════════════════════════════════════════════════════════════ */
.k-footer { display: none; }

/* BUG-FOOTER-JUMP — Réserver la hauteur du catalogue avant que renderGrid()
   peuple la grille. Sans min-height, #k-catalog-section fait 0px au boot →
   le footer remonte, devient visible, puis est repoussé vers le bas au fur
   et à mesure que les cartes arrivent (effet "saut de footer").
   100vh - header (~68px) laisse la grille remplir l'écran dès le 1er paint. */
@media (min-width: 900px) {
  #k-catalog-section {
    min-height: calc(100vh - 68px);
  }
}



/* .k-mega-dropdown et classes associées supprimées (lot NAV-DESKTOP-01, 2026-05-17)
   Remplacé par sous-catégories permanentes dans #k-subcats-wrap.
   Le hover sur chip appelle directement renderSubcatRail() — plus de panneau contextuel. */


/* ══════════════════════════════════════════════════════════════════
   PARTIE 2 — DESKTOP UPGRADE (≥ 900px)
   ══════════════════════════════════════════════════════════════════ */

/* 1. HEADER DESKTOP → migré vers layout.css (Sprint 4 — S4.1) */


/* 3. CARD HOVER → migré vers products.css (Sprint 4 — S4.3) */


/* ══════════════════════════════════════════════════════════════════
   4. MODAL ZOOM → migré vers modal.css (Sprint 4 — S4.5)
   ══════════════════════════════════════════════════════════════════ */


/* 6. ANIMATION ENTRÉE CARTES → migré vers products.css (Sprint 4 — S4.3) */


/* ══════════════════════════════════════════════════════════════════
   7. SCROLL-TO-TOP — Bouton fixe bas droite
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  .k-scroll-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--elev-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .2s, transform .2s var(--ease), background .12s;
  }
  .k-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .k-scroll-top:hover {
    background: var(--sand-warm);
    box-shadow: var(--elev-3);
  }
  .k-scroll-top svg {
    width: 20px; height: 20px;
    stroke: var(--text); fill: none; stroke-width: 2;
  }
}


/* ══════════════════════════════════════════════════════════════════
   9. RECENTLY VIEWED → migré vers modal.css (Sprint 4 — S4.5)
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   10. KEYBOARD HINT → migré vers modal.css (Sprint 4 — S4.5)
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   11. UTILITIES — Focus visible & tap-highlight (source unique)
   PALETTE-FIX-01 : outline ocean au lieu de vert foncé hardcodé.
   Note : .k-modal tap-highlight + focus → migré vers modal.css (S4.5)
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  .k-card, .k-card * {
    -webkit-tap-highlight-color: transparent;
  }

  .k-card:focus,           .k-card:focus-visible,
  .k-card-img-wrap:focus,  .k-card-img-wrap:focus-visible {
    outline: none;
    box-shadow: none;
  }

  button:focus-visible,
  a:focus-visible,
  input:focus-visible {
    outline: 2px solid rgba(100,175,90,.50);
    outline-offset: 2px;
  }
}


/* ══════════════════════════════════════════════════════════════════
   12. FOOTER RICHE — 4 colonnes desktop uniquement
   PALETTE-FIX-01 : social hover border coral au lieu de vert foncé.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  .k-footer {
    display: block;
    background: var(--green-bg-leaf);
    color: var(--text);
    padding: 40px clamp(20px, 4vw, 60px) 0;
    margin-top: 48px;
    border-top: 2px solid var(--ocean-light);
  }

  /* Le FOND du footer s'arrête avant le side-cart (doctrine RÉSERVE, comme le
     contenu). margin-right = largeur réservée quand le panier est docké ; le
     padding-right du body ne contraint que le flux, pas la peinture du fond.
     Voir BOUTIQUE_SIDE_CART_DOCTRINE.md. */
  body.sc-reserve .k-footer,
  body:has(.k-side-cart.has-items) .k-footer {
    margin-right: var(--sc-reserve-w, 240px);
  }

  .k-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 32px;
    /* max-width = --container : le parent .k-footer réserve déjà l'espace
       side-cart via margin-right, donc le contenu se cale dedans normalement
       (pas de double réserve). minmax(0,…) garde les colonnes rétractables. */
    max-width: var(--container);
    margin: 0 auto;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-ocean-14);
  }

  .k-footer-brand-logo {
    margin-bottom: 10px;
  }
  .k-footer-logo-img,
  .k-footer-logo-svg {
    display: block;
    height: 30px;
    width: auto;
    object-fit: contain;
  }

  .k-footer-tagline {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 220px;
    margin-bottom: 16px;
  }

  .k-footer-socials {
    display: flex;
    gap: 8px;
  }

  .k-footer-social-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-ocean-14);
    background: var(--white);
    color: var(--ocean);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
  }
  .k-footer-social-btn:hover {
    background: var(--ocean-bg-08);
    border-color: var(--border-ocean-14);
    color: var(--ocean);
  }
  .k-footer-social-btn svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  .k-footer-col-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--violet-mid-bright);
    margin-bottom: 14px;
  }

  .k-footer-col-link {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 9px;
    cursor: pointer;
    text-decoration: none;
    transition: color .12s;
  }
  .k-footer-col-link:hover { color: var(--ocean); }

  .k-footer-newsletter-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .k-footer-newsletter-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-ocean-14);
    background: var(--white);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font);
    outline: none;
    margin-bottom: 8px;
    transition: border-color .15s, background .15s;
  }
  .k-footer-newsletter-input::placeholder { color: var(--text-light); }
  .k-footer-newsletter-input:focus {
    border-color: var(--ocean-light);
    background: var(--white);
  }

  .k-footer-newsletter-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: var(--violet-mid-bright);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    border: none;
    cursor: pointer;
    transition: background .15s, transform .12s;
  }
  .k-footer-newsletter-btn:hover { background: var(--violet); }
  .k-footer-newsletter-btn:active { transform: scale(.98); }

  .k-footer-bottom {
    max-width: var(--container);
    margin: 0 auto;
    padding: 16px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }

  .k-footer-copy {
    font-size: 11px;
    color: var(--text-muted);
  }

  .k-footer-legal-links { display: flex; gap: 16px; }

  .k-footer-legal-link {
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color .12s;
  }
  .k-footer-legal-link:hover { color: var(--violet-mid-bright); }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER — stratégie RÉSERVE (unifiée avec la grille).
   Le footer est enfant direct de <body>, donc body.sc-reserve { padding-right }
   le contraint déjà dans la zone utile : il s'arrête avant le side-cart, comme
   les cartes. Aucun owner spécifique nécessaire — pas d'extension sous le panneau.
   (Anciens blocs `width: calc(100% + --sc-reserve-w)` supprimés le 31/05 :
    ils faisaient l'inverse de la doctrine. Voir BOUTIQUE_SIDE_CART_DOCTRINE.md.)
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   12. SECTION SUBCATS — chips Temu-style desktop (LOT 12)
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  .k-sec-subcats {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 4px 0 14px;
    margin: 0 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent 0, var(--black) 16px, var(--black) calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, var(--black) 16px, var(--black) calc(100% - 16px), transparent 100%);
  }
  .k-sec-subcats::-webkit-scrollbar { display: none; }

  .k-sec-subchip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    height: 28px;
    border-radius: 999px;
    border: 1.5px solid var(--sand-dark);
    background: var(--white);
    color: var(--text);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.005em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background .15s var(--ease), border-color .15s, color .15s, transform .12s;
  }
  .k-sec-subchip:hover {
    background: var(--sand-warm);
    border-color: var(--text-muted);
  }
  .k-sec-subchip:active { transform: scale(.96); }

  .k-sec-subchip.active {
    background: var(--coral);
    color: var(--white);
    border-color: var(--coral);
    box-shadow: 0 2px 8px rgba(200,92,45,.25);
  }
  .k-sec-subchip.active:hover {
    background: var(--coral);
    border-color: var(--coral);
  }

  .k-sec-subchip-icon {
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }

  .k-sec-subchip-all:not(.active) {
    color: var(--text-muted);
    border-color: var(--border);
  }
}





/* CATÉGORIES DESKTOP / CHIPS → migrés vers categories.css (Sprint 4 — S4.2) */


/* ══════════════════════════════════════════════════════════════════
   SOUS-CATÉGORIES DESKTOP — pills simples sous les catégories
   PALETTE-FIX-01 : ombres subchip ocean.
   ══════════════════════════════════════════════════════════════════ */

/* ── Mobile base (masqué par défaut) ── */
#k-subcats-wrap { display: none; }

.k-subcats-rail {
  display: flex;
  gap: 6px;
  padding: 6px 14px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  background: var(--white);
  border-top: 1px solid var(--overlay-black-xs);
}
.k-subcats-rail::-webkit-scrollbar { display: none; }

.k-subchip {
  display: flex;
  align-items: center;
  gap: 5px;
  scroll-snap-align: start;
  padding: 7px 16px;
  background: var(--sand);
  border: 1px solid var(--overlay-black-xs);
  border-radius: 999px;
  cursor: pointer;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.k-subchip:active { transform: scale(.94); }
.k-subchip-icon  { font-size: 14px; line-height: 1; }
.k-subchip-label { font-size: 13px; font-weight: 700; color: var(--text-muted); transition: color .16s; }
.k-subchip.active {
  background: transparent;
  border-color: var(--coral);
}
.k-subchip.active .k-subchip-label { color: var(--text); font-weight: 800; }

/* Fond couleur catégorie sur subchip actif → categories.css (Sprint 4 — S4.2) */

/* Animation mobile */
@keyframes k-subchip-in-mobile {
  from { opacity: 0; transform: translateX(-6px) scale(.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.k-subcats-visible .k-subchip               { animation: k-subchip-in-mobile .16s ease both; }
.k-subcats-visible .k-subchip:nth-child(2)  { animation-delay: .03s; }
.k-subcats-visible .k-subchip:nth-child(3)  { animation-delay: .06s; }
.k-subcats-visible .k-subchip:nth-child(4)  { animation-delay: .09s; }
.k-subcats-visible .k-subchip:nth-child(5)  { animation-delay: .12s; }

/* ── Lot 2 : sous-catégories FLOTTANTES desktop ── */
/* #k-subcats-wrap en position absolute sous .k-hero-cats-sticky  */
/* → flotte au-dessus du contenu, ne pousse pas la page.          */
/* Owner : boutique-desktop.css                                    */

@keyframes k-subcats-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hover subchips (desktop pointeur précis) ── */
@media (hover: hover) and (pointer: fine) {
  #k-subcats-wrap .k-subchip:hover {
    background: var(--white);
    border-color: rgba(198,168,93,.45);
    box-shadow: 0 8px 20px rgba(28,26,23,.10);
    transform: translateY(-2px);
    color: var(--text);
  }
  #k-subcats-wrap .k-subchip:hover .k-subchip-label { color: var(--text); }
}

@media (min-width: 900px) {

  /* Barre contextuelle : DANS LE FLUX de la sticky bar (plus de float absolu).
     → réserve l'espace et pousse le catalogue : aucun recouvrement des produits.
     → reste visible en haut au scroll (la sticky bar parente est position:sticky).
     L'inline display:none/'' posé par home-controller.renderSubcatRail pilote
     la visibilité ; le layout/visuel est porté ici (invariant CSS/JS). */
  #k-subcats-wrap {
    display: block;
    width: 100%;
    padding: 0;
    animation: k-subcats-slide-in .18s var(--ease) both;
  }

  /* ── Ligne titre : retour + emoji + label + compteur ── */
  #k-subcats-wrap .k-subcats-context {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 8px 24px 6px;
    box-sizing: border-box;
  }
  #k-subcats-wrap .k-subcats-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface-white-88);
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
    flex-shrink: 0;
  }
  #k-subcats-wrap .k-subcats-back:hover {
    background: var(--white);
    border-color: var(--text-muted);
    color: var(--text);
    transform: translateX(-1px);
  }
  #k-subcats-wrap .k-subcats-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
  #k-subcats-wrap .k-subcats-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: 21px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
  }
  #k-subcats-wrap .k-subcats-emoji { font-size: 22px; line-height: 1; }
  #k-subcats-wrap .k-subcats-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--sand-warm);
    padding: 3px 9px;
    border-radius: 999px;
  }

  /* ── Ligne pills : transparente (le fond de la sticky bar transparaît) ── */
  #k-subcats-wrap .k-subcats-rail {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 2px 24px 12px;
    box-sizing: border-box;
    background: transparent;
    border: none;
  }
  #k-subcats-wrap .k-subcats-rail::-webkit-scrollbar { display: none; }

  /* Chip individuel */
  #k-subcats-wrap .k-subchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border-text-08);
    background: var(--surface-white-88);
    color: var(--text-alpha-82);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.012em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(28,26,23,.06);
    transition:
      transform .15s var(--ease),
      background .15s,
      border-color .15s,
      color .15s,
      box-shadow .15s;
  }

  /* État actif */
  #k-subcats-wrap .k-subchip.active {
    background: var(--coral);
    color: var(--white);
    border-color: var(--coral);
    box-shadow: 0 4px 14px rgba(200,92,45,.28);
    font-weight: 700;
  }

  #k-subcats-wrap .k-subchip[data-subcat=""] { display: none; }

  #k-subcats-wrap .k-subchip-icon {
    font-size: 13px;
    line-height: 1;
    opacity: .85;
  }
}

#k-subcats-wrap .k-subchip:hover {
  transform: translateY(-2px);
  background: var(--white);
  border-color: rgba(198,168,93,.5);
  /* PALETTE-FIX-01 : ocean au lieu de rgba(31,48,36,…) */
  box-shadow: 0 8px 20px rgba(100,175,90,.12);
  color: var(--text);
}

#k-subcats-wrap .k-subchip.active {
  background: linear-gradient(180deg, var(--cream-warm), var(--cream-pearl));
  color: var(--coral-dark);
  border-color: rgba(198,168,93,.5);
  box-shadow: 0 4px 12px rgba(198,168,93,.12);
  font-weight: 800;
}

#k-subcats-wrap .k-subchip[data-subcat=""] {
  display: none;
}

#k-subcats-wrap .k-subchip-icon {
  font-size: 15px;
  line-height: 1;
}

@keyframes k-subchip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#k-subcats-wrap .k-subcats-rail.k-subcats-visible .k-subchip {
  animation: k-subchip-in .15s ease both;
}
#k-subcats-wrap .k-subcats-visible .k-subchip:nth-child(2) { animation-delay: .03s; }
#k-subcats-wrap .k-subcats-visible .k-subchip:nth-child(3) { animation-delay: .06s; }
#k-subcats-wrap .k-subcats-visible .k-subchip:nth-child(4) { animation-delay: .08s; }
#k-subcats-wrap .k-subcats-visible .k-subchip:nth-child(5) { animation-delay: .10s; }

@media (min-width: 900px) {
  .k-sec-subcats { display: none; }
  .k-sec-subchip { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SIDE CART DESKTOP — Layout Temu pur (refactor 21/05/2026).
   Pattern : header sticky (sous-total + CTAs) en haut → "Tout
   sélectionner" → liste items scrollable. Identité Komerce conservée
   (coral CTA principal, violet "En groupe", ocean livraison).
   Owner unique de .k-side-cart et de tous les sélecteurs .k-sc-*
   pour ≥900px.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* ── Conteneur fixed, full-height, collé au bord droit ──
     Sort du flux : padding-right sur body réserve la place
     (voir bloc "BODY PADDING RIGHT — side cart fixed" plus bas). */
  .k-side-cart {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 240px;
    height: 100dvh;
    border-radius: 0;
    background: var(--surface-sand-94);
    border-left: 1px solid var(--border-ocean-14);
    border-right: none;
    border-top: 3px solid var(--coral);
    border-bottom: none;
    box-shadow: -4px 0 20px var(--shadow-ocean-10), -1px 0 0 var(--border-coral-09);
    overflow: hidden;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
    transition: opacity .22s var(--ease), transform .22s var(--ease);
  }

  .k-side-cart:not(.has-items) { display: none; }
  .k-side-cart.has-items {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  /* ──────────────────────────────────────────────────────────
     HEADER (top block Temu) — sous-total + livraison + CTAs.
     Tailles confortables : on a la pleine hauteur viewport.
     ────────────────────────────────────────────────────────── */
  .k-sc-header {
    flex-shrink: 0;
    padding: 14px 14px 12px;
    background: var(--surface-sand-96);
    border-bottom: 1px solid var(--border-coral-09);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .k-sc-subtotal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }
  .k-sc-subtotal-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ocean-label);
    letter-spacing: .02em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .k-sc-subtotal-icon {
    width: 14px;
    height: 14px;
    color: var(--coral);
    flex-shrink: 0;
  }
  .k-sc-subtotal-amount {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.01em;
    line-height: 1;
    text-align: right;
    flex: 1;
    white-space: nowrap;
  }

  /* Bouton "Vider" : discret en bas du header, sous les CTAs, centré pleine largeur.
     Visible uniquement quand le side-cart a des items (.has-items posée par
     renderSideCart). Confirmation native gérée côté JS dans b-cart.js. */
  .k-sc-clear {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--border-text-08);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
  }
  .k-sc-clear svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
  .k-sc-clear:hover {
    color: var(--coral);
    border-color: var(--border-coral-22);
    background: color-mix(in srgb, var(--coral) 6%, transparent);
  }
  .k-side-cart.has-items .k-sc-clear {
    display: inline-flex;
  }

  .k-sc-free-ship {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ocean);
    background: var(--ocean-bg-08);
    border-radius: 999px;
    padding: 4px 10px;
    width: fit-content;
    margin-bottom: 2px;
  }
  .k-sc-free-ship svg { width: 12px; height: 12px; flex-shrink: 0; }

  /* ── CTA Commander — coral plein ── */
  .k-sc-btn-checkout {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: var(--coral);
    color: var(--white);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font);
    letter-spacing: .02em;
    box-shadow: 0 4px 16px var(--shadow-coral-22), 0 1px 3px var(--border-coral-22);
    transition: background .15s, transform .12s, box-shadow .15s;
  }
  .k-sc-btn-checkout:hover {
    background: var(--coral-dark);
    box-shadow: 0 7px 22px var(--shadow-coral-22), 0 1px 4px var(--border-coral-22);
    transform: translateY(-1px);
  }
  .k-sc-btn-checkout:active { transform: scale(.98); }

  /* ── Séparateur Commander / Voir le panier ── */
  .k-sc-btn-checkout + .k-sc-btn-cart {
    position: relative;
    margin-top: 2px;
  }
  .k-sc-btn-checkout + .k-sc-btn-cart::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--border-text-08);
    margin: 0 auto 6px;
  }

  /* ── Voir le panier — masqué sur desktop (Commander va direct au checkout,
     le tiroir complet est superflu quand le side cart est déjà visible) ── */
  .k-sc-btn-cart {
    display: none;
  }

  /* ── Partager — vert WhatsApp (aligné mobile) ── */
  .k-sc-btn-share {
    width: 100%;
    min-height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: var(--whatsapp);
    color: var(--white);
    cursor: pointer;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 1px 6px rgba(37,211,102,.30);
    transition: background .15s, transform .12s;
  }
  .k-sc-btn-share:hover { background: var(--whatsapp-dk); }
  .k-sc-btn-share:active { transform: scale(.95); }
  .k-sc-btn-share[hidden] { display: none; }

  /* ── Badge panier partagé actif ── */
  .k-sc-shared-badge {
    width: 100%;
    background: var(--green-bg-leaf);
    border: 1px solid var(--cta-green);
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .k-sc-shared-badge[hidden] { display: none; }
  .k-sc-shared-badge-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .k-sc-shared-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cta-green);
    flex-shrink: 0;
    animation: kSharedPulse 2s ease-in-out infinite;
  }
  @keyframes kSharedPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
  }
  .k-sc-shared-label {
    flex: 1;
    font-size: 11px;
    font-weight: 700;
    color: var(--green-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .k-sc-reshare-btn {
    flex-shrink: 0;
    padding: 3px 8px;
    border: 1px solid var(--cta-green);
    border-radius: 999px;
    background: var(--white);
    color: var(--green-text-strong);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s;
  }
  .k-sc-reshare-btn:hover { background: var(--cta-green); color: var(--white); }
  .k-sc-group-view-btn {
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background: var(--cta-green);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    text-align: center;
    transition: background .15s, transform .12s;
  }
  .k-sc-group-view-btn:hover { background: var(--green-text-strong); transform: translateY(-1px); }
  /* Legacy — conservé pour compat si utilisé ailleurs, ne s'affiche plus dans le HTML */
  .k-sc-btn-group { display: none; }

  /* ──────────────────────────────────────────────────────────
     ITEMS — zone scrollable, prend toute la hauteur restante.
     Pleine hauteur viewport → items confortables.
     ────────────────────────────────────────────────────────── */
  .k-sc-items {
    flex: 1 1 0;
    min-height: 0;
    /* overflow-y: scroll plutôt que auto pour FORCER le scroll même si
       le contenu rentre (évite que la molette passe à la page). */
    overflow-y: scroll;
    /* none plutôt que contain : empêche complètement le scroll de "passer"
       à la page principale quand on atteint la butée. */
    overscroll-behavior: none;
    scrollbar-width: thin;
    scrollbar-color: var(--border-text-08) transparent;
    padding: 10px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* Plus de limite à 4 items : tout scrolle (mode Temu) */

  /* ── Item carte ── */
  .k-sc-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: var(--white);
    border-radius: 10px;
    border: 1px solid var(--border-text-06);
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
  }
  .k-sc-item:hover {
    background: var(--sand);
    border-color: var(--border-text-08);
  }
  .k-sc-item-img {
    width: 48px; height: 48px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--sand);
    border: 1px solid var(--border-text-06);
  }
  .k-sc-item-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
  }
  .k-sc-item-name {
    font-size: 11.5px; font-weight: 500; color: var(--text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .k-sc-item-variant {
    font-size: 9.5px; font-weight: 600; color: var(--text-muted);
    background: var(--sand);
    border: 1px solid var(--border-text-06);
    border-radius: 4px;
    padding: 1px 4px;
    display: inline-block; width: fit-content;
  }
  .k-sc-item-meta {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-top: 1px; gap: 4px;
  }
  .k-sc-item-price-wrap {
    display: flex; align-items: baseline; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow: hidden;
  }
  .k-sc-item-price {
    font-size: 12px; font-weight: 800;
    color: var(--red-text-md); letter-spacing: -.01em;
    white-space: nowrap;
  }
  .k-sc-item-old-price {
    font-size: 9px; font-weight: 500;
    color: var(--text-muted); text-decoration: line-through;
    white-space: nowrap;
  }
  .k-sc-item-actions {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  }

  /* Stepper +/- tactile (choix Komerce) */
  .k-sc-item-stepper {
    display: flex; align-items: center;
    border: 1px solid var(--border-text-08);
    border-radius: 5px; overflow: hidden;
    background: var(--white);
  }
  .k-sc-item-stepper button {
    width: 20px; height: 20px;
    border: none; background: transparent;
    color: var(--text); font-size: 14px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: background .1s;
    font-family: var(--font); padding: 0; line-height: 1;
  }
  .k-sc-item-stepper button:hover { background: var(--sand-dark); }
  .k-sc-item-stepper-qty {
    min-width: 18px; text-align: center;
    font-size: 11px; font-weight: 700; color: var(--text);
    padding: 0 2px;
    border-left: 1px solid var(--border-text-08);
    border-right: 1px solid var(--border-text-08);
    line-height: 20px; user-select: none;
  }
  .k-sc-item-remove {
    width: 20px; height: 20px;
    border: 1px solid var(--border-text-08);
    border-radius: 5px; background: transparent;
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .12s, color .12s, border-color .12s;
    padding: 0;
  }
  .k-sc-item-remove:hover {
    background: var(--red-bg);
    border-color: var(--red-border);
    color: var(--red-text);
  }

  /* ── Attention state (highlight quand l'avatar panier est cliqué) ── */
  #k-side-cart.is-attention {
    box-shadow:
      0 0 0 3px var(--border-coral-13),
      0 14px 40px var(--border-text-15);
    transform: translateY(-2px);
    transition: box-shadow .22s ease, transform .22s ease;
  }

  /* L'état "is-expanded" n'est plus nécessaire : la liste scrolle
     d'elle-même, plus de limite à 4 items. On garde l'override
     historique vide pour ne rien casser côté JS qui pourrait
     encore toggler la classe. */
  #k-side-cart.is-expanded .k-sc-items > * { display: flex; }

  /* ──────────────────────────────────────────────────────────
     BODY PADDING RIGHT — side cart fixed.
     Réserve la place du side-cart sur le bord droit (240px),
     mais SEULEMENT quand le panier a des items. Sinon le
     panneau est en display:none et on ne veut pas de bande
     vide à droite.

     STRATÉGIE EN DEUX TEMPS (ceinture + bretelles) :
     1. body:has(.k-side-cart.has-items) (CSS pur, navigateurs modernes)
     2. body.sc-reserve (toggle JS, fallback universel)
     Le `body` reçoit le padding par une OU l'autre — pas un + un,
     donc pas de risque de doublage.
     ────────────────────────────────────────────────────────── */
  /* :where() zéroïse la spécificité du has() → 0-1-0
     body.modal-open (0-1-1) gagne par ordre source ✓ */
  body:where(:has(.k-side-cart.has-items)),
  body.sc-reserve {
    padding-right: var(--sc-reserve-w, 240px); /* VIS-1 — token défini dans layout.css */
  }

  /* Pendant qu'un overlay plein écran est ouvert (modal/cart drawer),
     on libère le padding : 0-1-1 > 0-1-0 ✓ */
  body.modal-open,
  body.cart-open {
    padding-right: 0;
    overflow: hidden; /* BUG-SCROLL-3 — lock scroll fond pendant overlay checkout/modal */
  }
  /* 0-3-1 pour battre .k-side-cart.has-items (0-2-0) */
  body.modal-open .k-side-cart,
  body.modal-open .k-side-cart.has-items,
  body.cart-open  .k-side-cart,
  body.cart-open  .k-side-cart.has-items {
    display: none;
  }
}


@media (min-width: 1200px) {
  .k-side-cart {
    width: 254px;
  }
  body:has(.k-side-cart.has-items),
  body.sc-reserve {
    padding-right: var(--sc-reserve-w, 254px); /* VIS-1 — token défini dans layout.css @1200px */
  }
  /* Largeur "wide" des conteneurs de centrage ≥1200px.
     Rapatrié de desktop-commerce-skeleton.css (supprimé le 31/05 — fichier mort).
     NB : .k-header-inner reçoit aussi un max-width conditionnel via VIS-1 FIX
     (layout.css) quand le side-cart est actif — tension à arbitrer en phase rendu. */
  .k-header-inner,
  .k-hero-inner,
  .k-cats-shell {
    max-width: 1540px;
  }
}


/* ══════════════════════════════════════════════════════════════
   HERO — RÉSERVE SIDE-CART (VIS-1 extension)
   Owner : boutique-desktop.css (owner side-cart, charge en dernier).
   Problème : #k-hero-fixed-wrap reste width:100% quand le side-cart
   est actif → l'image déborde sous le panneau fixed et la dame
   de droite se fait écraser par le compteur panier.
   Fix : on cale le hero sur la même largeur utile que le catalog.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  body:has(.k-side-cart.has-items) #k-hero-fixed-wrap,
  body.sc-reserve #k-hero-fixed-wrap {
    max-width: calc(100vw - var(--sc-reserve-w, 240px));
    overflow: clip;
  }
  /* L'image elle-même doit aussi être contrainte à la largeur utile
     pour que object-fit:cover centre bien sur la zone visible,
     et non sur toute la largeur viewport avec la dame coupée à droite. */
  body:has(.k-side-cart.has-items) .k-hero-img,
  body.sc-reserve .k-hero-img {
    max-width: calc(100vw - var(--sc-reserve-w, 240px));
    object-position: 48% 15%;
  }
}
@media (min-width: 1200px) {
  body:has(.k-side-cart.has-items) #k-hero-fixed-wrap,
  body.sc-reserve #k-hero-fixed-wrap {
    max-width: calc(100vw - var(--sc-reserve-w, 254px));
  }
  body:has(.k-side-cart.has-items) .k-hero-img,
  body.sc-reserve .k-hero-img {
    max-width: calc(100vw - var(--sc-reserve-w, 254px));
  }
}
/* ══ FIN HERO RÉSERVE SIDE-CART ════════════════════════════════ */

/* ── GARDE DESKTOP : le panier plein écran (drawer mobile) ne s'affiche jamais
   en desktop, même si un JS lui ajoute .open (boutons "Voir le panier", dame,
   etc.). En desktop le panier EST le side-cart inline + la modale checkout
   (k-order-modal, conteneur distinct, non affecté). Évite le doublon plein
   écran derrière la commande. Garde unique = on ne chasse plus chaque
   déclencheur JS. ────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .k-cart-drawer.open,
  .k-cart-overlay.open {
    display: none !important;
    transform: translateX(100%) !important;
    pointer-events: none !important;
  }
}

/* ── Premium desktop home — side-cart + blocs éditoriaux (rapatrié de b-home-premium-v1.js, Lot 3) ── */
@media (min-width: 900px) {
  html.k-home-premium-v1 .k-side-cart {
    box-shadow: -14px 0 44px var(--border-text-08);
    border-left: 1px solid var(--border-text-06);
  }

  html.k-home-premium-v1 .k-sc-btn-checkout { border-radius: 18px; }

  /* Blocs éditoriaux injectés dynamiquement par b-home-premium-v1.js */
  html.k-home-premium-v1 .k-home-curation {
    display: block;
    padding: 22px clamp(26px, 3.4vw, 56px) 14px;
    background:
      radial-gradient(circle at 84% 4%, color-mix(in srgb, var(--coral) 10%, transparent), transparent 22%),
      var(--sand);
  }

  /* Cascade naturelle sans !important : body:not(.k-view-shop) a même spécificité,
     placé après la règle show — la visibilité JS (u-hidden) reste autorité principale. */
  body:not(.k-view-shop) .k-home-curation { display: none; }

  html.k-home-premium-v1 .k-home-curation-inner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }

  html.k-home-premium-v1 .k-home-baseline {
    margin: 0;
    font-family: var(--font-display, var(--font));
    font-size: clamp(20px, 1.6vw, 26px);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--text);
  }

  html.k-home-premium-v1 .k-home-promise-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  html.k-home-premium-v1 .k-home-promise-chip {
    padding: 8px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--white) 78%, transparent);
    border: 1px solid var(--border-text-06);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
  }
}