/* ═══════════════════════════════════════════════════════════════
   KOMERCE — base.css (2026-06-14)
   Généré par deploy-css.js — éditer les sources CSS.
   ═══════════════════════════════════════════════════════════════ */
/* ── tokens.css ──────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — tokens.css
   Source unique de vérité pour toutes les variables CSS.
   Règle : jamais de couleur/valeur en dur ailleurs dans le CSS.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Couleurs principales ──────────────────────────────────── */
  --ocean:        #64AF5A;
  --ocean-light:  #82C478;
  --violet:      #6c3fc5;   /* paiement groupé, workspace, événements */
  --violet-dark:  #4a2d9e;
  --violet-light: rgba(108,63,197,.08);
  --violet-mid:   rgba(108,63,197,.18);   /* utilisé par les pages /event/* */
  --ocean-dark:       #4A9040;
  --ocean-dark-deep:  #2e6b28;  /* gradient stop profond — kpill background, group-cart-flow funded */
  --cta-green:        #2a7a3e;

  /* ── Sauge — palette checkout (remplace ocean/coral trop saturés dans le flow commande) ──
     Sauge : vert désaturé, posé, lisible sur fond sable.
     Terracotta : chaleur douce, remplace coral sans l'orange criard.
     Les tokens --ocean/* restent actifs pour le catalogue et la modal produit. */
  --sage:              #7A9E7E;  /* CTA principal checkout, boutons confirm */
  --sage-dark:         #5C7D62;  /* hover, texte sur fond clair */
  --sage-deeper:       #3E5E45;  /* focus ring, état actif profond */
  --sage-light:        #A8C4AA;  /* border douce, icônes secondaires */
  --sage-bg:           #EDF3EE;  /* fond carte identité, sections checkout */
  --sage-bg-pale:      #F5F9F5;  /* fond très pâle, hover row */
  --border-sage-14:    rgba(122,158,126,.14);
  --border-sage-22:    rgba(122,158,126,.22);
  --border-sage-35:    rgba(122,158,126,.35);
  --shadow-sage-10:    0 4px 16px rgba(122,158,126,.10);
  --shadow-sage-18:    0 6px 20px rgba(122,158,126,.18);

  /* ── Checkout — crème + vert clair + coral
     Remappings vers tokens existants uniquement, aucune valeur nouvelle. ── */
  --checkout-bg:            var(--cream-pearl);        /* fond général modal                */
  --checkout-surface:       var(--white);              /* cards internes                    */
  --checkout-surface-warm:  var(--sage-bg-pale);       /* toggle bg, sections               */

  --checkout-border:        var(--border-sage-22);     /* bordure cards douce               */
  --checkout-border-mid:    var(--coral);              /* bordure hover / focus — coral     */

  --checkout-text:          var(--text);               /* texte principal                   */
  --checkout-text-muted:    var(--sage-dark);          /* labels section, sous-titres       */
  --checkout-text-strong:   var(--ocean-dark-deep);    /* titres, relay name                */
  --checkout-text-soft:     var(--text-form-soft);     /* sous-textes neutres               */

  --checkout-accent:        #4DA668;                   /* CTA confirmer, header — vert éclatant mockup */
  --checkout-accent-deep:   #2A6B3C;                   /* stop sombre du gradient header    */
  --checkout-accent-mid:    #3A8A52;                   /* gradient stop milieu              */
  --checkout-accent-bright: #4DA668;                   /* alias compat — gradient stop clair */
  --checkout-accent-light:  var(--white);              /* texte sur CTA                     */
  --checkout-accent-hover:  #3A8A52;                   /* hover CTA                         */
  --checkout-link:          var(--coral);              /* "Changer", liens inline           */

  --checkout-disabled-bg:   var(--gray-bg-lighter);   /* MVola "bientôt"                   */
  --checkout-disabled-text: var(--border-soft);        /* texte désactivé                   */

  --checkout-avatar-bg:     var(--sage-bg);            /* fond initiales                    */
  --checkout-avatar-text:   var(--sage-dark);          /* texte initiales                   */

  /* Palette interne checkout — hex sablés/dorés (jamais réutilisés hors checkout) */
  --checkout-cream:         #FFFBF5;                   /* fond modal + body                 */
  --checkout-id-bg:         #FFF8EE;                   /* fond carte identité               */
  --checkout-id-border:     #E8D5B0;                   /* bordure carte identité            */
  --checkout-seg-border:    #DDD0B8;                   /* bordure segments + chips          */
  --checkout-seg-text:      #A07040;                   /* texte inactif segments            */
  --checkout-sel-bg:        #FFF0E8;                   /* fond état sélectionné (coral pâle)*/
  --checkout-chip-active-bg:#FFF4EE;                   /* fond chip paiement actif          */
  --checkout-chip-active-text: #5A3010;                /* texte chip paiement actif         */




  --terracotta:        #C47A5A;  /* accent chaud, badge prix, CTA secondaire */
  --terracotta-dark:   #9E5C3E;  /* texte sur fond clair, hover */
  --terracotta-bg:     #F5EDE8;  /* fond warm, sections récap */
  --terracotta-bg-pale:#FBF5F2;  /* fond très pâle */
  --border-terra-14:   rgba(196,122,90,.14);
  --border-terra-22:   rgba(196,122,90,.22);

  --sand:         #FDFAF5;
  --sand-warm:    #f6f0e3;
  --sand-dark:    #F0EBE0;
  --sand-hover:   #f7f4ee;  /* hover row — kpill popover liste */
  --sand-footer:  #faf6ed;  /* fond footer — kpill popover total */
  /* POLISH — sable quasi-blanc pour hero + shell chips (sans casser --sand-warm) */
  --sand-bright:  #FDFAF3;

  /* ── Surfaces sémantiques ─────────────────────────────────── */
  --page-bg:      var(--sand);
  /* POLISH — hero lumineux (plus clair que --page-bg #FDFAF5) */
  --hero-bg:      var(--sand-bright);
  --hero-border:  transparent;
  --hero-shadow:  none;

  --coral:        #C85C2D;
  --coral-dark:   #A84820;
  --hero-red:     #e53935;

  --white:        #ffffff;
  --whatsapp:     #25d366;
  --whatsapp-dk:  #1db954;   /* WhatsApp variant foncé, gradient + pages /event/* */
  --red:          #e53e3e;

  /* ── Texte ────────────────────────────────────────────────── */
  --text:         #1F3024;
  --text-muted:   #6B7B63;
  --text-light:   #9EAC95;
  --border:       #E3D9C9;

  /* ── Ombres (basées sur --text pour cohérence) ─────────────── */
  --shadow-sm: 0 1px 3px rgba(31,48,36,.07);
  --shadow-md: 0 4px 12px rgba(31,48,36,.09);
  --shadow-lg: 0 8px 30px rgba(31,48,36,.12);

  /* ── Typographie ─────────────────────────────────────────── */
  --font:         'Plus Jakarta Sans','IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display: 'Fraunces','Plus Jakarta Sans',Georgia,serif;
  --font-checkout: 'DM Sans','Plus Jakarta Sans',system-ui,sans-serif;

  /* ── Formes ──────────────────────────────────────────────── */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  /* ── Layout ──────────────────────────────────────────────── */
  --container: 1400px;
  --pad-x:     16px;
  --header-h:  56px;
  --bnav-h:    50px;

  /* ── Animation ───────────────────────────────────────────── */
  --ease:         cubic-bezier(.22,1,.36,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-in:      cubic-bezier(.4,0,1,1);

  /* ── Élévations (remplacent les box-shadow inline) ──────── */
  --elev-1: 0 1px 3px rgba(31,48,36,.06), 0 1px 2px rgba(31,48,36,.04);
  --elev-2: 0 4px 12px rgba(31,48,36,.08), 0 2px 4px rgba(31,48,36,.04);
  --elev-3: 0 8px 24px rgba(31,48,36,.10), 0 4px 8px rgba(31,48,36,.06);
  --elev-4: 0 16px 40px rgba(31,48,36,.12), 0 8px 16px rgba(31,48,36,.08);

  /* ── Overlays & surfaces semi-transparentes ────────────── */
  --overlay-dark:      rgba(0,0,0,.5);
  --overlay-dark-md:   rgba(0,0,0,.55);
  --overlay-dark-sm:   rgba(0,0,0,.4);
  --overlay-black-xs:  rgba(0,0,0,.06);
  --overlay-black-sm:  rgba(0,0,0,.08);
  --overlay-black-md:  rgba(0,0,0,.12);
  --overlay-black-lg:  rgba(0,0,0,.3);

  --surface-white-96:  rgba(255,255,255,.96);
  --surface-white-92:  rgba(255,255,255,.92);
  --surface-white-88:  rgba(255,255,255,.88);
  --surface-white-64:  rgba(255,255,255,.64);

  --surface-sand-97:   rgba(253,250,245,.97);
  --surface-sand-96:   rgba(253,250,245,.96);
  --surface-sand-94:   rgba(253,250,245,.94);
  --surface-sand-91:   rgba(253,250,245,.91);  /* carte verre hero desktop */
  /* ── Ocean alpha (side cart, cards) ─────────────────────── */
  --border-ocean-14:   rgba(100,175,90,.14);
  --border-ocean-10:   rgba(100,175,90,.10);
  --border-ocean-08:   rgba(100,175,90,.08);
  --ocean-label:       rgba(100,175,90,.80);  /* label sous-total side cart */
  --ocean-bg-08:       rgba(100,175,90,.08);  /* fond livraison gratuite */
  --shadow-ocean-10:   0 12px 30px rgba(100,175,90,.10);
  --shadow-coral-22:   rgba(200,92,45,.22);   /* ombre bouton checkout */

  /* ── Bordures coral alpha ───────────────────────────────── */
  --border-coral-09:   rgba(200,92,45,.09);
  --border-coral-13:   rgba(200,92,45,.13);
  --border-coral-22:   rgba(200,92,45,.22);

  /* ── Bordures & ombres text-alpha ───────────────────────── */
  --border-text-04:  rgba(31,48,36,.04);
  --border-text-06:  rgba(31,48,36,.06);
  --border-text-07:  rgba(31,48,36,.07);
  --border-text-08:  rgba(31,48,36,.08);
  --border-text-10:  rgba(31,48,36,.10);
  --border-text-12:  rgba(31,48,36,.12);
  --border-text-15:  rgba(31,48,36,.15);

  /* ── Couleurs sémantiques manquantes ────────────────────── */
  --orange:           #ff6900;
  --orange-dark:      #e55f00;
  --orange-shadow:    rgba(255,105,0,.30);

  --pink:             #e91e63;
  --pink-light:       rgba(233,30,99,.10);
  --pink-shadow:      rgba(233,30,99,.35);

  --blue-dark:        #0c447c;
  --blue-mid:         #1e3a5f;
  --blue-light-bg:    #e6f1fb;
  --blue-lighter-bg:  #cfe5f7;
  --blue-border:      #b5d4f4;

  --amber-text:       #6b3e0e;
  --amber-text-light: #a06a1f;
  --amber-bg:         #fff8ed;
  --amber-bg-warm:    #fdf4e8;
  --amber-border:     #f4c77a;
  --amber-border-md:  #e8c78a;

  /* ── Crèmes (restaurés depuis Lot 1 — migration var(--white)nnn cassée) ──
     Ces hex étaient encodés en dur avant qu'une migration find-replace
     ne les transforme en `var(--white)8e7` etc., invalide côté navigateur.
     Tokens sémantiques par usage, pas par teinte. */
  --cream-warm:       #fff8e7;  /* gradient haut — état actif rail desktop */
  --cream-pearl:      #fffdf7;  /* gradient bas — état actif rail desktop */
  --cream-amber-bg:   #fffbeb;  /* fond bannière cash, badge référence */
  --cream-peach:      #fff4ed;  /* fond pay helper coral */
  --cream-blush:      #fff8f8;  /* fond hover partage WhatsApp */

  --green-dark-text:  #1d5b2a;
  --green-text:       #1a7a3e;
  --green-bg:         #e8f7ee;

  --red-text:         #cc2200;
  --red-text-md:      #cc4400;
  --red-bg:           #fff0f0;
  --red-border:       #ffbbbb;
  --red-bg-hover:     #ffe0e0;

  /* ── Couleurs catégories (chips & suggestions) ──────────── */
  --cat-mode-bg:      #FDE8CD;
  --cat-maison-bg:    #F3E7D3;
  --cat-tech-bg:      #E0F0E8;
  --cat-brico-bg:     #E8EDF0;
  --cat-perso-bg:     #FCE8D4;
  --cat-auto-bg:      #E8E4F5;
  --cat-solaire-bg:   #FFF9D6;
  --cat-beaute-bg:    #FDE5F0;
  --cat-creatio-bg:   #EDE8FD;
  /* POLISH — soldes : rouge-corail doux */
  --cat-soldes-bg:    #FFE4D6;

  /* ── Statuts commandes ──────────────────────────────────── */
  --status-pending-bg:     #fff8ed;
  --status-pending-text:   #a06a1f;
  --status-confirmed-bg:   #e8f5ee;
  --status-confirmed-text: #1d5b2a;
  --status-processing-bg:  #eaf2fd;
  --status-processing-text:#1d4f9e;
  --status-shipped-bg:     #f0eafd;
  --status-shipped-text:   #4f2b9e;
  --status-available-bg:   #fef0e8;
  --status-available-text: #8b3a0f;
  --status-cancelled-bg:   #fce8e8;
  --status-cancelled-text: #9e1d1d;
}

/* padding latéral tablette — intermédiaire entre mobile (16px) et desktop (28px) */
@media (min-width: 900px) {
  :root {
    --header-h: 68px;   /* hauteur réelle du .k-header desktop (layout.css) */
    --pad-x: 28px;
  }
}
@media (min-width: 1200px) {
  :root {
    --header-h: 72px;   /* layout.css bloc 1200px */
    --pad-x: 32px;
  }
}

/* ── Tokens de précision (alpha non standards) ──────────────
   Ajoutés lors du Sprint 2 pour les derniers cas non couverts */
:root {
  --surface-sand-90:   rgba(255,252,244,.90);
  --surface-sand-92:   rgba(253,250,245,.92);
  --overlay-white-50:  rgba(255,255,255,.50);
  --overlay-white-78:  rgba(255,255,255,.78);
  --overlay-white-80:  rgba(255,255,255,.80);
  --overlay-white-72:  rgba(255,255,255,.72);
  --text-alpha-82:     rgba(32,51,37,.82);

  --red-danger:        #dc2626;
  --red-awaiting-bg:   #FCEBEB;   /* fond badge AWAITING_CHOICE (rouge doux) */
  --red-awaiting-text: #791F1F;   /* texte badge AWAITING_CHOICE */
  --red-danger-bg:     #fef5f5;
  --red-danger-border: #e8a0a0;
  --red-danger-text:   #c73a3a;
  --whatsapp-bg-hover: #f0fdf4;

  --text-form-muted:   #7a8078;
  --text-form-light:   #888;
  --text-form-mid:     #666;
  /* ── Lot 5 : tokens supplémentaires (greys, ambers, greens, blues, etc.) ──
     Voir PR_GUIDE_LOT5.md pour la justification sémantique. */
  --black:                  #000      ;  /* Noir pur — pour ombres, rares texte premium */
  --text-form-soft:         #999      ;  /* Texte gris moyen formulaires */
  --text-strong-mid:        #555      ;  /* Texte gris-foncé secondaire */
  --text-strong:            #222      ;  /* Texte presque noir (non-#000) */
  --text-form-soft-md:      #777      ;  /* Texte gris formulaires (variation) */
  --text-disabled:          #aaa      ;  /* Texte désactivé */
  --border-soft:            #ccc      ;  /* Bordure douce neutre */
  --border-light:           #ddd      ;  /* Bordure claire neutre */
  --border-lighter:         #eee      ;  /* Bordure très claire neutre */
  --border-soft-md:         #e0e0e0   ;  /* Bordure douce (variant) */
  --text-form-mid-md:       #757575   ;  /* Texte formulaires (variation) */
  --surface-warm-cool:      #f3f3f1   ;  /* Surface neutre quasi-blanche */
  --gray-bg:                #f5f5f5   ;  /* Fond gris très clair neutre */
  --gray-bg-lighter:        #f7f7f7   ;  /* Fond gris ultra clair */
  --amber-mid:              #fcd34d   ;  /* Jaune amber moyen */
  --amber-warm:             #f0bf67   ;  /* Or chaud (mention promo) */
  --gold-soft:              #d4b87a   ;  /* Or doux (premium accent) */
  --star-gold:              #F0A500   ;  /* Or punchy étoile notation produit (Temu-like) */
  --amber-cta:              #e8a13a   ;  /* Amber CTA dynamique */
  --amber-text-deep:        #8b5a1a   ;  /* Amber texte foncé */
  --amber-light-bg:         #fde68a   ;  /* Fond amber clair badge */
  --amber-bg-pale:          #fef3c7   ;  /* Fond amber pâle */
  --amber-bg-light:         #fef3df   ;  /* Fond amber très clair */
  --amber-text-mid:         #92400e   ;  /* Texte amber moyen-foncé */
  --cream-amber-light:      #ffe8c2   ;  /* Crème ambré clair (banner fav) */
  --green-bg-soft:          #f2faef   ;  /* Fond vert très pâle (success soft) */
  --green-bg-mid:           #f0f5e6   ;  /* Fond vert pâle */
  --green-bg-warm:          #e8eddb   ;  /* Fond vert chaud (sage) */
  --green-bg-pale:          #dcfce7   ;  /* Fond vert ultra pâle */
  --green-bg-mid-soft:      #a7f3d0   ;  /* Vert mid soft */
  --green-soft:             #86efac   ;  /* Vert soft (success badge) */
  --green-success:          #3d9e55   ;  /* Vert success solid */
  --green-positive:         #20b858   ;  /* Vert positif (CTA payé) */
  --green-bg-lightest:      #ecfdf5   ;  /* Vert bg ultra clair */
  --green-deep-text:        #065f46   ;  /* Vert deep text */
  --green-deep-mid:         #166534   ;  /* Vert deep mid */
  --text-muted-dark:        #3a4a3d   ;  /* Texte muted variation foncée */
  --text-muted-md:          #617064   ;  /* Texte muted variation */
  --green-text-strong:      #3b6d11   ;  /* Texte vert solid foncé */
  --green-bg-leaf:          #eaf3de   ;  /* Vert clair feuille */
  --green-bg-mist:          #f4fbf2   ;  /* Vert mist */
  --green-bg-warm-md:       #e0eddc   ;  /* Vert chaud variation */
  --green-bg-warm-lt:       #eef2e4   ;  /* Vert chaud clair */
  --blue-link-deep:         #185fa5   ;  /* Bleu lien externe foncé */
  --blue-ocean-dark:        #0d4f74   ;  /* Bleu océan foncé (modal) */
  --blue-stripe-text:       #315caa   ;  /* Bleu texte stripe badge */
  --blue-stripe-bg:         #eef4ff   ;  /* Bleu fond stripe badge */
  --coral-text:             #9a4e2d   ;  /* Coral texte foncé sur fond clair */
  --coral-text-deep:        #a0461e   ;  /* Coral texte très foncé */
  --violet-mid-bright:      #8b5cf6   ;  /* Violet mid bright */
  --red-bg-soft:            #fef2f2   ;  /* Fond rouge très pâle (bannière erreur) */
  --red-deep-text:          #991b1b   ;  /* Rouge deep text */
  --red-soft:               #ff5e5e   ;  /* Rouge soft (alert léger) */
  --whatsapp-deep:          #128c7e   ;  /* WhatsApp deep (gradient) */

  /* ── Groupe / panier partagé — tokens alpha (refactor group-cart-flow) ── */
  --collective-navy:       #1a4a6e;              /* S3.2 — bandeau mode édition panier collectif (bleu Komerce) */
  --collective-err:        #e53935;              /* S3.2 — message d'erreur mode édition panier collectif */
  --collective-err-light:  #ffe0e0;              /* S3.2 — message d'erreur side-cart mode édition (fond clair) */
  --green-alpha-06:   rgba(31,122,84,.06);  /* mini-guide fond */
  --green-alpha-09:   rgba(31,122,84,.09);  /* locked-amount, funded-callout fond */
  --green-alpha-12:   rgba(31,122,84,.12);  /* badge phase ouverte fond */
  --green-alpha-14:   rgba(31,122,84,.14);  /* mini-guide border */
  --green-alpha-20:   rgba(31,122,84,.20);  /* locked-amount border */
  --green-alpha-24:   rgba(31,122,84,.24);  /* saved-commitment border */
  --green-alpha-28:   rgba(31,122,84,.28);  /* funded-callout border */
  --green-text-sett:  #1f7a54;              /* badge phase ouverte text */
  --coral-light:      #FAECE7;             /* fond badge coral, phase settlement   */
  --coral-bg-09:      rgba(239,125,95,.09); /* identity-note fond */
  --coral-bg-12:      rgba(239,125,95,.12); /* cart-tab is-active fond */
  --coral-bg-18:      rgba(239,125,95,.18); /* cart-tab is-active shadow */
  --coral-bg-38:      rgba(239,125,95,.38); /* cart-tab is-active border */
  --amber-bg-08:      rgba(230,130,0,.08);  /* funded-callout gap fond */
  --amber-bg-12:      rgba(230,130,0,.12);  /* badge settlement fond */
  --amber-border-28:  rgba(230,130,0,.28);  /* funded-callout gap border */
  --amber-text-sett:  #b45309;              /* badge settlement text / finalize gap btn */
  --violet-bg-light:  #ede7f6;              /* split-hint fond lavande */
  --danger:           #e53935;              /* bouton / texte annulation danger */
}

/* ── PR-G6 : tokens rgba manquants (audit 2026-05-28) ────────────────────
   FIX AUDIT 2026-06-11 : ces déclarations flottaient HORS de tout bloc
   :root (accolade fermée l.357) → variables jamais définies + la règle
   universelle du reset (box-sizing/margin/padding) était avalée par le
   parseur dans le bundle base.css. Ré-englobées dans :root ci-dessous. */
:root {

  /* Overlays noirs complémentaires */
  --overlay-black-10:      rgba(0,0,0,.10);
  --overlay-black-22:      rgba(0,0,0,.22);
  --overlay-black-45:      rgba(0,0,0,.45);

  /* Surface blanche semi-transparente */
  --surface-white-10:      rgba(255,255,255,.10);

  /* Overlay groupe (fond sheet flow panier partagé) */
  --overlay-group-dark:    rgba(31,48,36,.52);

  /* CTA green (42,122,62) — ombres boutons */
  --shadow-cta-22:         rgba(42,122,62,.22);
  --shadow-cta-30:         rgba(42,122,62,.3);
  --shadow-cta-40:         rgba(42,122,62,.4);

  /* WhatsApp (37,211,102) — ombres boutons */
  --shadow-wa-24:          rgba(37,211,102,.24);
  --shadow-wa-25:          rgba(37,211,102,.25);
  --shadow-wa-28:          rgba(37,211,102,.28);
  --shadow-wa-38:          rgba(37,211,102,.38);

  /* Coral (200,92,45) — focus rings et ombres */
  --coral-focus-08:        rgba(200,92,45,.08);
  --coral-focus-10:        rgba(200,92,45,.1);
  --coral-focus-12:        rgba(200,92,45,.12);
  --coral-shadow-25:       rgba(200,92,45,.25);

  /* Coral orange (255,107,53) — pay chips */
  --coral-chip-07:         rgba(255,107,53,.07);
  --coral-chip-10:         rgba(255,107,53,.10);
  --coral-chip-16:         rgba(255,107,53,.16);
  --coral-chip-18:         rgba(255,107,53,.18);

  /* Salmon btn back (255,163,122) */
  --coral-light-28:        rgba(255,163,122,.28);

  /* Ocean (100,175,90) — bordures complémentaires */
  --border-ocean-16:       rgba(100,175,90,.16);
  --border-ocean-18:       rgba(100,175,90,.18);

  /* Sand border (103,77,45) — dashed empty state */
  --sand-border-25:        rgba(103,77,45,.25);

  /* Forest shadows (49,81,30) */
  --shadow-forest-07:      rgba(49,81,30,.07);

  /* Green pay option (67,160,71) */
  --green-pay-06:          rgba(67,160,71,.06);

  /* Ring pulse alert (255,90,70) */
  --ring-pulse-50:         rgba(255,90,70,.5);
  --ring-pulse-0:          rgba(255,90,70,0);

  /* Dark card shadows (30,40,25) */
  --shadow-card-04:        rgba(30,40,25,.04);
  --shadow-card-05:        rgba(30,40,25,.05);

  /* Violet shadow */
  --violet-shadow-30:      rgba(108,63,197,.3);

  /* Coral settlement (239,125,95) */
  --coral-sett-22:         rgba(239,125,95,.22);

  /* Green alpha 08 (groupe mini-guide fond) */
  --green-alpha-08:        rgba(31,122,84,.08);

  /* ── PR-G6 suite : tokens rgba boutique-desktop + modal + layout ─────── */

  /* Ocean alpha complémentaires */
  --border-ocean-04:       rgba(100,175,90,.04);
  --border-ocean-06:       rgba(100,175,90,.06);
  --border-ocean-12:       rgba(100,175,90,.12);
  --border-ocean-20:       rgba(100,175,90,.20);
  --border-ocean-50:       rgba(100,175,90,.50);

  /* Gold/sable doré (198,168,93) — desktop cards premium */
  --gold-border-12:        rgba(198,168,93,.12);
  --gold-border-16:        rgba(198,168,93,.16);
  --gold-border-28:        rgba(198,168,93,.28);
  --gold-border-36:        rgba(198,168,93,.36);
  --gold-border-50:        rgba(198,168,93,.5);
  --gold-border-62:        rgba(198,168,93,.62);
  --gold-border-74:        rgba(198,168,93,.74);

  /* Coral focus/shadow complémentaires */
  --coral-focus-40:        rgba(200,92,45,.4);
  --coral-focus-45:        rgba(200,92,45,.45);
  --coral-shadow-18:       rgba(200,92,45,.18);

  /* Surface sable desktop (248,246,241) */
  --surface-sand-desktop:  rgba(248,246,241,0.82);

  /* Surface blanche complémentaires */
  --surface-white-18:      rgba(255,255,255,.18);
  --surface-white-55:      rgba(255,255,255,.55);
  --surface-white-62:      rgba(255,255,255,.62);
  --surface-white-80:      rgba(255,255,255,.8);
  --surface-white-85:      rgba(255,255,255,.85);
  --surface-white-98:      rgba(255,255,255,.98);

  /* WhatsApp shadow complémentaire */
  --shadow-wa-30:          rgba(37,211,102,.30);

  /* CTA green focus outline */
  --focus-cta-45:          rgba(42,122,62,.45);

  /* Pink complémentaire */
  --pink-shadow-30:        rgba(233,30,99,.30);

  /* Rouge mic pulse (220,38,38) */
  --red-pulse-35:          rgba(220,38,38,.35);
  --red-pulse-0:           rgba(220,38,38,0);

  /* Overlay noir complémentaire */
  --overlay-black-18:      rgba(0,0,0,.18);

  /* Gradient transparent sable (244,241,236) */
  --sand-gradient-0:       rgba(244,241,236,0);
}


/* ── reset.css ───────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — reset.css
   Reset minimal, une seule fois, encodage UTF-8 propre.
   ═══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100vw;
  overscroll-behavior-y: none;
  background: var(--sand);
}

/* Desktop : scroll natif instantané — smooth sur html ralentit toute la page */
@media (min-width: 900px) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  background: var(--sand);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overscroll-behavior-y: none;
  max-width: 100vw;
  width: 100%;
  position: relative;
  padding-bottom: calc(var(--bnav-h) + 90px);
}

button  { font: inherit; border: none; background: none; cursor: pointer; }
input   { font: inherit; border: none; outline: none; }
img     { display: block; max-width: 100%; }
a       { text-decoration: none; color: inherit; }
ul, ol  { list-style: none; }

/* Body lock — DESKTOP uniquement.
   Mobile : la modal est position:fixed plein écran, pas besoin de fixer le body.
   position:fixed sur body tue overflow-y:auto des enfants sur Chrome Android. */
@media (min-width: 900px) {
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: var(--modal-scroll-y, 0);
  }
  body.cart-open { overflow: hidden; }
}

/* Utilité globale */
.u-hidden { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── MODE PAGER TEMU : le document reste toujours cadré ──────
   Le rail horizontal est #k-grid uniquement.
   html/body ne doivent jamais devenir scrollables horizontalement. */
html,
body,
body:has(#k-page-scroll.k-pager-active) {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── layout.css ──────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — layout.css
   Header, hero shell, sections, bottom-nav.
   Mobile-first, zéro !important.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fond global boutique ───────────────────────────────────── */
html,
body {
  background: var(--page-bg);
}

#k-page-scroll,
#k-catalog-section {
  background: var(--page-bg);
}

/* ── HERO FIXED WRAP — mobile : fixe en haut sous le header ─── */
/* Desktop : remis à static dans layout.css @900px               */
#k-hero-fixed-wrap {
  position: fixed;
  top: var(--header-h, 44px);
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
}

/* ── HEADER ─────────────────────────────────────────────────── */
.k-header {
  position: fixed; /* PATCH header-fixed — sticky ne survit pas à body:overflow:hidden (pager actif) */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  background: var(--sand-warm);
  border-bottom: 1px solid var(--border-text-07);
}

.k-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* MOBILE — ré-ordonnancement visuel (2026-06-09) :
   DOM = logo → search → actions (préservé pour l'accessibilité / DOM order).
   Affiché = logo → search → dame/panier.
   La dame reste à droite (visible, non collée au bord grâce à margin-right:-2px) ;
   la barre de recherche prend le milieu. Reset à 900px (desktop). */
@media (max-width: 899px) {
  .k-logo            { order: 1; }
  .k-header-actions  { order: 3; }
  .k-search          { order: 2; }

  /* Décale la dame du bord droit — padding-right > pad-x standard */
  .k-header { padding-right: 28px; }

  /* Drapeau comorien agrandi : 30 → 38 px (header 44px → 3px de marge haut/bas) */
  .k-logo-icon { width: 38px; height: 38px; }

  /* Le bouton panier n'est plus au bord droit du header : neutraliser les
     marges (margin-left:2px / margin-right:-2px) qui servaient à compenser
     le débordement du badge en position bord. Les gaps de .k-header-inner
     (8px) suffisent ; sans ce reset, la dame collerait au drapeau d'un côté
     et serait trop loin de la recherche de l'autre. */
  .k-header .k-cart-btn,
  .k-cart-btn.k-header-action {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Logo */
.k-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.k-logo-img,
.k-logo-svg {
  display: block;
  height: 44px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}
/* legacy — conservé au cas où des refs existent encore */
.k-logo-icon { display: none; }
.k-logo-text { display: none; }
.k-logo-mini { display: none; }

/* Mobile : on n'affiche que le petit K (le logo complet vit dans le hero) */
@media (max-width: 899px) {
  .k-logo-svg  { display: none; }
  .k-logo-mini { display: block; height: 40px; width: auto; flex-shrink: 0; }
  .k-logo      { min-width: 0; }
}

/* Recherche */
.k-search {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  height: 44px;
  border-radius: 22px;
  background: var(--surface-white-96);
  border: 1px solid var(--border-text-08);
  box-shadow: var(--elev-1);
  transition: box-shadow .2s var(--ease), border-color .2s;
}
.k-search:focus-within {
  border-color: rgba(42,122,62,.3);
  box-shadow: var(--elev-2), 0 0 0 3px rgba(100,175,90,.08);
}
.k-search input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  background: transparent;
  /* FIX AUDIT 2026-06-11 : 16px minimum — sous 16px, iOS Safari zoome
     automatiquement la page au focus de l'input (dézoom manuel ensuite). */
  font-size: 16px;
  color: var(--text);
  border-radius: 22px;
}
.k-search input::placeholder { color: var(--overlay-black-lg); }
.k-search input:focus { background: var(--white); }
.k-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--overlay-black-lg);
  pointer-events: none;
}
.k-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
}
.k-search-dropdown.open { display: block; }
.k-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .15s;
}
.k-search-item:hover { background: var(--sand); }
.k-search-item img { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; }
.k-search-item-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-search-item-price { font-size: 12px; color: var(--coral); font-weight: 700; }

/* Bouton panier */
.k-cart-btn {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .2s;
  margin-right: -4px;     /* coller l'avatar contre le label */
  overflow: visible;
}

.k-header,
.k-header-inner {
  overflow: visible;
}
.k-cart-btn svg { width: 22px; height: 22px; color: var(--coral); }
.k-cart-btn:active { background: transparent; }

.k-cart-badge {
  position: absolute;
  top: auto;
  bottom: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  background: var(--coral);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 6px;
  border: 2px solid var(--page-bg);
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 6px var(--overlay-black-md);
  line-height: 1;
  z-index: 20;
  pointer-events: none;
  
  }
.k-cart-badge.show { transform: scale(1); }

/* Avatar dame panier */
/* FIX visibilité : mix-blend-mode:multiply retiré — noyait l'image sur fond crème/sable.
   L'avatar est le symbole de la marque, il doit rester pleinement visible. */
.k-cart-avatar {
  width: 40px;
  height: 40px;
  border-radius: 0;
  object-fit: contain;
  border: none;
  box-shadow: none;
  background: transparent;
  mix-blend-mode: normal;
  transition: opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.k-header .k-cart-avatar { width: 40px; height: 40px; }

/* BUG-AVATAR-ANIM : translateY(-50%) doit être présent dans chaque keyframe,
   sinon l'animation l'écrase et la dame saute au chargement / à chaque ajout. */
@keyframes panierArrive {
  0%   { transform: translate(-4px,-50%) scale(.85) rotate(-8deg); }
  50%  { transform: translate(-4px,-50%) scale(1.12) rotate(4deg); }
  100% { transform: translate(-4px,-50%) scale(1) rotate(0deg); }
}
.k-cart-btn.has-items .k-cart-avatar,
.k-modal-cart-btn.has-items .k-cart-avatar {
  animation: panierArrive .5s cubic-bezier(.34,1.56,.64,1);
}
.k-cart-btn.is-empty .k-cart-badge,
.k-modal-cart-btn.is-empty .k-modal-cart-badge { display: none; }

@keyframes avatarWave {
  0%   { transform: translate(-4px,-50%) scale(1) rotate(0deg); }
  20%  { transform: translate(-4px,-50%) scale(1.25) rotate(-10deg); }
  40%  { transform: translate(-4px,-50%) scale(1.2) rotate(12deg); }
  60%  { transform: translate(-4px,-50%) scale(1.22) rotate(-8deg); }
  80%  { transform: translate(-4px,-50%) scale(1.18) rotate(6deg); }
  100% { transform: translate(-4px,-50%) scale(1) rotate(0deg); }
}
.k-cart-btn.avatar-wave .k-cart-avatar { animation: avatarWave .9s cubic-bezier(.34,1.56,.64,1); }

/* Boutons nav desktop (favoris, suivi) */
.k-header-nav-btn { display: none; }

/* ── SECTIONS ────────────────────────────────────────────────── */
.k-section {
  max-width: var(--container);
  margin: 0 auto 8px;
  padding: 4px var(--pad-x);
}
.k-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
}
.k-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  font-variation-settings: 'opsz' 24;
}
.k-see-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
  padding: 4px 8px;
  border-radius: 50px;
  transition: background .2s;
}
.k-see-all:active { background: rgba(200,92,45,.1); }

/* ── BOTTOM NAV ──────────────────────────────────────────────── */
.k-bnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  height: var(--bnav-h);
  background: var(--surface-sand-97);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-top: 1px solid var(--border-text-07);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
  padding-right: 12px; /* décale le panier du bord droit */
}
.k-bnav-btn, .k-bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-light);
  transition: color .15s;
  position: relative;
}
.k-bnav-btn.active, .k-bnav-item.active { color: var(--ocean-dark); }
.k-bnav-btn svg, .k-bnav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.k-bnav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  background: var(--coral);
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  border-radius: 99px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--white);
}

/* ── LOADING + SKELETON ──────────────────────────────────────── */
.k-loading { display: none; padding: 40px; text-align: center; }
.k-loading.show { display: block; }
.k-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border: 3px solid var(--border);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: k-spin .7s linear infinite;
}
@keyframes k-spin { to { transform: rotate(360deg); } }

@keyframes k-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.k-skeleton,
.k-skel-img,
.k-skeleton-img,
.k-skel-line,
.k-skeleton-title,
.k-skeleton-price {
  background: linear-gradient(90deg, var(--sand-dark) 25%, var(--sand-warm) 50%, var(--sand-dark) 75%);
  background-size: 200% 100%;
  animation: k-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}
.k-skel-card,
.k-card-skeleton {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 4px var(--overlay-black-xs);
}
.k-skel-img,
.k-skeleton-img { width: 100%; aspect-ratio: 1/1; border-radius: 0; }
.k-skel-line,
.k-skeleton-title,
.k-skeleton-price { margin: 6px 6px 0; border-radius: 4px; height: 10px; }
.k-skel-line.short,
.k-skeleton-price { width: 55%; margin-bottom: 8px; }
.k-skeleton-title  { width: 72%; }

/* ── DESKTOP ─────────────────────────────────────────────────── */
/* ── Header desktop visuel (backdrop, border, shadow) ──
   Fusionné dans le bloc DESKTOP PREMIUM ci-dessous. */

/* ── Coller la grille directement sous les chips (mobile) ───── */
.k-proverb-sep      { display: none; margin: 0; }
.k-section          { margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

#k-page-scroll {
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#k-catalog-section {
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
/* ── Cage fixe du pager mobile Temu ───────────────────────────── */
body:has(#k-page-scroll.k-pager-active) {
  overflow: hidden;
  overscroll-behavior: none;
  max-width: 100vw;
}

#k-page-scroll.k-pager-active {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--pager-top, 0px);
  bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

#k-page-scroll.k-pager-active #k-catalog-section {
  width: 100%;
  height: 100%;
  max-width: 100vw;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
/* ══════════════════════════════════════════════════════════════
   DESKTOP PREMIUM — @media (min-width: 900px)
   Couche isolée. Aucun impact mobile.
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* ── Page layout ─────────────────────────────────────────── */
  /* overflow-x sur html casse position:sticky (html devient scroll container).
     On le retire de html en desktop.

     EX-RÈGLE : `body { overflow-x: clip }` était posée ici pour clipper
     le débordement horizontal. Elle a été RETIRÉE car `overflow: clip`
     sur body crée un containing block pour les éléments en
     position:fixed, ce qui empêchait .k-side-cart de rester ancré au
     viewport au scroll (le panneau disparaissait au niveau du footer).
     Le clip horizontal est désormais assuré uniquement par les autres
     règles `overflow-x: clip` posées sur #k-catalog-section, .k-section
     et .k-grid (cf. lignes ~610, 635, 655). Si une scrollbar horizontale
     parasite apparaît, identifier l'élément débordant et lui appliquer
     overflow-x: clip plutôt que de remettre cette règle. */
  html { overflow-x: visible; }

  /* #k-page-scroll reset desktop — source de vérité : body:not(.modal-open):not(.cart-open) #k-page-scroll @media 900px (ligne ~756) */

  /* VIS-1 FIX — Token de réserve side-cart (source de vérité partagée avec boutique-desktop.css).
     Problème : body.sc-reserve pose padding-right:240px, mais #k-catalog-section et .k-header-inner
     sont en max-width:var(--container)=1400px + margin:0 auto. Dès que (100vw - réserve) < 1400px
     (typique Windows 125% → viewport effectif ~1520px → 1266px dispo < 1400), margin:0 auto
     part en marges négatives → clip gauche (logo + titre + 1ère carte). Solution : caper la
     largeur des conteneurs centrés à l'espace réellement disponible quand le panier est docké. */
  :root { --sc-reserve-w: 240px; }

  /* ROOT CAUSE FIX : le max-width de #k-catalog-section a UN SEUL owner
     (#k-desktop-catalog-wrap #k-catalog-section, plus bas). On ne se bat plus
     en spécificité : l'état "panier docké" bascule juste une variable.
     Panier vide → --catalog-max absent → fallback none (pleine largeur).
     Panier docké → --catalog-max = zone utile → la section se cappe. */
  body.sc-reserve,
  body:has(.k-side-cart.has-items) {
    --catalog-max: min(var(--container), calc(100vw - var(--sc-reserve-w) - 16px));
  }

  body.sc-reserve .k-header-inner,
  body:has(.k-side-cart.has-items) .k-header-inner {
    max-width: min(var(--container), calc(100vw - var(--sc-reserve-w) - 16px));
    margin-left: 0;
    margin-right: auto;
  }

  #k-catalog-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
  }

  /* ── Header desktop (fusionné) ───────────────────────────── */
  .k-header {
    height: 68px;
    position: sticky;
    top: 0;
    left: auto;   /* reset PATCH header-fixed */
    right: auto;  /* reset PATCH header-fixed */
    z-index: 200;
    background: var(--surface-sand-94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-text-08);
    box-shadow: 0 10px 28px var(--border-text-06);
  }

  .k-header-inner {
    height: 68px;
    max-width: var(--container);
    margin: 0 auto;
    gap: 18px;
    padding-inline: clamp(24px, 3vw, 32px);
  }

  .k-logo { min-width: 148px; }
  .k-logo-img, .k-logo-svg { height: 44px; }
  .k-logo-text { display: none; }
  .k-logo-icon { display: none; }

  /* Barre recherche centrale large */
  .k-search {
    flex: 1 1 0;
    max-width: 680px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border-text-12);
    background: var(--white);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 16px var(--border-text-06);
  }
  .k-search input {
    height: 44px;
    font-size: 15px;
    padding: 0 16px 0 44px;
  }
  .k-search-icon { left: 16px; }

  /* .k-header-actions gap → boutique-desktop.css (source de vérité : gap:4px) */

  /* .k-header-nav-btn → boutique-desktop.css (source de vérité) */

  /* Avatar panier — sans fond carré */
  .k-cart-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px;
  }
  .k-cart-avatar { width: 36px; height: 36px; }

  /* Badge desktop — coin bas-droit avatar.
     Avatar 30px centré dans bouton 44px : bas de l'avatar à 50%-15px depuis le bas.
     Badge 16px → bottom: calc(50% - 15px - 8px) = calc(50% - 23px) */
  .k-header .k-cart-btn.k-header-action .k-cart-badge {
    top: auto;
    bottom: calc(50% - 23px);
    left: calc(50% + 7px);
    right: auto;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    z-index: 20;
  }

  /* Bnav caché desktop */
  .k-bnav { display: none; }

  /* .k-cats, .k-chip desktop → source de vérité : categories.css (Sprint 4 — S4.2) */

  /* .k-cats-wrap fades : masqués desktop */
  .k-cats-wrap-fade-left,
  .k-cats-wrap-fade-right { display: none; }  /* pas de fade desktop */

  /* .k-chip desktop → source de vérité : categories.css (Sprint 4 — S4.2) */

  /* Section titre catégorie */
  .k-sec-header {
    padding: 18px 0 10px;
    font-size: 1.15rem;
  }

  /* ── Grille produits desktop ─────────────────────────────── */
  .k-section {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 40px);
  }

  /* .k-card desktop → source de vérité : products.css (Sprint 4 — S4.3)
     Règles supprimées de layout.css (P3 ownership audit 2026-05-15) — étaient réécrites après dans la cascade. */
  /* .k-card-add / .k-card-fav → cart.css @900px (source de vérité : 46×46px / 32×32px) */

  /* ── Panier drawer desktop ───────────────────────────────── */
  .k-cart-drawer {
    width: 420px;
    max-width: 420px;
    border-radius: 0;
    box-shadow: var(--elev-4);
  }

  .k-cart-header {
    padding: 18px 20px 14px;
    font-size: 1rem;
  }

  .k-cart-body { padding: 12px 16px; }

  .k-cart-item { padding: 10px 0; gap: 12px; }
  .k-cart-item-img { width: 60px; height: 60px; border-radius: 8px; }
  .k-cart-item-name { font-size: .88rem; }

  .k-cart-footer { padding: 14px 20px 20px; }

  /* ── Hero fixe desktop (pas de fixed) ───────────────────── */
  #k-hero-fixed-wrap {
    position: static;
    top: auto;
    z-index: auto;
    width: 100%;
  }

  .k-hero-wrap { margin: 0; }

}

/* ── 1200px : raffinements supplémentaires ───────────────────── */
@media (min-width: 1200px) {

  /* VIS-1 FIX — token réserve 254px aligné sur boutique-desktop.css (@1200px) */
  :root { --sc-reserve-w: 254px; }

  .k-header { height: 72px; }
  .k-header-inner { height: 72px; }
  .k-logo-img { height: 44px; }
  .k-search { height: 46px; max-width: 760px; }
  .k-search input { height: 46px; font-size: 16px; }

  .k-card-name { font-size: 13px; }
  .k-card-price { font-size: 16px; }

  /* .k-grid/.k-sec-grid gap → products.css L599 (source de vérité) */

}

/* ══════════════════════════════════════════════════════════════
   DESKTOP SCROLL FIX
   body[data-layout="desktop"] est posé par boutique.js au load.
   Il neutralise le style.top inline de setupMobile().
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  html {
    height: auto;
    overflow-y: auto;
    /* overflow-x:hidden sur html crée un scroll container et casse position:sticky.
       On utilise visible ici — le clip horizontal est assuré par body (overflow-x:clip). */
    overflow-x: visible;
  }
  body {
    height: auto;
    overflow-y: auto;
    /* overflow-x:clip retiré ici : créait un containing block qui ancrait
       .k-side-cart (position:fixed) au body au lieu du viewport. Le clip
       horizontal est désormais assuré par #k-catalog-section/.k-section/.k-grid. */
    overflow-x: visible;
  }

  /* Neutraliser tout overflow blocking hérité */
  body.modal-open { overflow: hidden; }
  body.cart-open  { overflow: hidden; }

  /* #k-page-scroll reset desktop — source de vérité : body:not(.modal-open):not(.cart-open) #k-page-scroll @media 900px (ligne ~756) */
}
/* Mobile : wrapper transparent */
#k-desktop-catalog-wrap {
  display: contents;
}

@media (min-width: 900px) {

  /* ── Wrapper principal ──────────────────────────────────────
     Élargi par rapport au --container global : le wrapper du
     catalogue exploite toute la zone utile restante après le
     side-cart (240px réservé par body padding-right). Marges
     latérales visuelles ~20px de chaque côté pour respirer.
     PR-SC2 v3.3 (chantier 1, marges symétriques). */
  #k-desktop-catalog-wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: none;
    /* FIX décalage gauche :
       body:has(.k-side-cart.has-items) pose padding-right:240px sur body.
       margin:0 auto centrait dans (100vw - 240px) → contenu décalé à gauche de 120px.
       On supprime margin:0 auto et on laisse le wrap s'étirer naturellement
       dans l'espace utile du body (width:100% implicite suffit).
       Le side-cart fixed reste collé à droite, hors du flux. */
    margin: 0;
    padding: 12px 20px 0;
  }

  /* ── Catalogue : prend le reste de la largeur ─────────────── */
  #k-desktop-catalog-wrap #k-catalog-section {
    flex: 1 1 0;
    min-width: 0;
    max-width: var(--catalog-max, none);
    margin: 0;
    padding: 0;
    /* overflow-x:clip au lieu de hidden: rogne sans créer de scroll container */
    overflow-x: clip;
    overflow-y: visible;
  }

}

@media (min-width: 1200px) {
  #k-desktop-catalog-wrap { gap: 24px; }
}



/* PATCH #227 — desktop stabilization (consolidé) */
@media (min-width: 900px) {

  /* 1. Stabilisation scroll desktop */
  html {
    width: 100%;
    max-width: 100%;
    /* overflow-x sur html casse position:sticky — géré séparément ligne ~396 */
  }
  body {
    width: 100%;
    max-width: 100%;
    /* overflow-x:clip retiré : créait un containing block sur body qui
       ancrait .k-side-cart (position:fixed) au body au lieu du viewport.
       Le clip est assuré par #k-catalog-section/.k-section/.k-grid. */
    overflow-x: visible;
  }

  body:not(.modal-open):not(.cart-open) #k-page-scroll {
    position: static;
    top: auto;
    height: auto;
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }

  /* overflow-x:clip sur #k-catalog-section, .k-section, .k-grid uniquement.
     #k-page-scroll NE DOIT PAS avoir overflow-x:clip — cela crée un scroll container
     qui casse position:sticky du side-cart. Le clip horizontal de page-scroll
     est assuré par html/body (overflow-x:clip sur body). */
  #k-catalog-section,
  .k-section,
  .k-grid {
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }
  #k-page-scroll {
    max-width: 100%;
    overflow-x: visible;
    box-sizing: border-box;
  }
  /* Fix sticky side-cart: #k-desktop-catalog-wrap NE DOIT PAS avoir overflow-x:clip
     car cela crée un scroll container qui casse position:sticky des enfants.
     On utilise overflow-x:visible — le clip horizontal est géré par html/body. */
  #k-desktop-catalog-wrap {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
  }

  /* 3. Zoom modal — curseur zoom-in (source de vérité : boutique-desktop.css) */
  /* Note : tap-highlight, focus, perf cartes → boutique-desktop.css */
}

/* ══════════════════════════════════════════════════════════════
   SIDE CART DESKTOP — Source unique de vérité (LOT 9)
   Historique : fixed → sticky → sticky+clip → context fix → option B → consolidé.
   Mobile : masqué (le panier mobile passe par la bottom nav)
   ══════════════════════════════════════════════════════════════ */

/* Mobile : side cart masqué */
.k-side-cart { display: none; }

/* Mobile bnav : label cart devient le total quand panier non vide */
#k-bnav-cart-label {
  font-size: 10px;
  transition: color .2s, font-weight .2s;
}
#k-bnav-cart-label.has-total {
  color: var(--coral);
  font-weight: 800;
  font-size: 9px;
}

/* ══════════════════════════════════════════════════════════════
   FIXED CONTEXT PRESERVATION (ex- "STICKY CONTEXT")
   Le side-cart est désormais en position:fixed (cf. boutique-desktop.css
   bloc SIDE CART DESKTOP). overflow-x: clip sur body créerait un
   containing block et clouerait le panneau au body au lieu du viewport.
   Le clip horizontal est assuré par les autres règles overflow-x: clip
   posées sur #k-catalog-section, .k-section, .k-grid (cf. layout.css
   lignes ~610, 635, 655).
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  html { overflow-x: visible; overflow-y: auto; }
  body { overflow-x: visible; overflow-y: visible; }
  #k-page-scroll,
  #k-desktop-catalog-wrap { overflow: visible; }
  /* #k-catalog-section RETIRÉ de ce bloc (était un bug : overflow:visible
     annulait overflow-x:clip posé l.701). Il DOIT conserver overflow-x:clip
     pour contenir le painting de la grille hors de la zone du side-cart fixed.
     Sibling du side-cart → le clip ne le touche pas. Voir I-DESK-2 dans
     BOUTIQUE_DESKTOP_LAYOUT_CONTRACT.md. */
}


@media ((min-width: 1200px)) {
  /*
    Padding-bottom du catalogue pour respirer en fin de page.
    (Ex-justification "sticky sortait proprement avant footer" obsolète
    depuis PR-SC2 v3.2 — side cart en fixed, pas en sticky.)
  */
  #k-desktop-catalog-wrap {
    padding-bottom: clamp(120px, 18vh, 220px);
  }

  /*
    PR-SC2 v3.4 — limitation à 3 items retirée.
    Ancien comportement : nth-child(n+4){display:none} cachait tout au-delà
    du 3e item dans le side cart, l'utilisateur devait cliquer "Voir le
    panier" pour voir le reste. Avec le pattern Temu (side cart full-height
    + .k-sc-items en flex:1 1 auto + overflow-y:auto), la liste scrolle
    en interne et tous les items sont visibles. Plus de limitation.
  */
}

/* ── Side cart masqué hors onglet boutique ── */
/* switchView() pose data-tab sur #k-page-scroll — on en profite pour cacher
   le side cart sur les onglets suivi et favoris sans toucher au JS. */
#k-page-scroll[data-tab="track"] .k-side-cart,
#k-page-scroll[data-tab="fav"]   .k-side-cart {
  display: none;
}

/* Hero desktop compact : voir boutique-desktop.css (BANDEAU PREMIUM, source de vérité). */
/* margin-top side-cart : 52px, intégré dans le bloc consolidé LOT 9 ci-dessus. */


/* ══════════════════════════════════════════════════════════════════
   HEADER — owner unique : layout.css
   Migré depuis : hero-cart-proxy.css (11), boutique-desktop.css (9),
                  desktop-commerce-skeleton.css (7)
   Sprint 4 — S4.1
   ══════════════════════════════════════════════════════════════════ */

/* ── Mobile : avatar dame dans le vrai bouton header ─────────────
   (migré depuis hero-cart-proxy.css)
   Contexte : tue le hero-bubble sur mobile, restaure le k-cart-btn header. */
.k-header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
  visibility: visible;
  opacity: 1;
}

.k-header .k-cart-btn,
.k-cart-btn.k-header-action,
.k-header .k-cart-btn.is-empty,
.k-cart-btn.k-header-action.is-empty,
.k-header .k-cart-btn.hidden,
.k-cart-btn.k-header-action.hidden {
  display: flex;
  visibility: visible;
  opacity: 1;
  width: 42px;
  height: 42px;
  margin-left: 2px;
  margin-right: -2px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  pointer-events: auto;
}

.k-header .k-cart-avatar,
.k-cart-btn.k-header-action .k-cart-avatar,
.k-header .k-cart-btn.is-empty .k-cart-avatar,
.k-cart-btn.k-header-action.is-empty .k-cart-avatar,
.k-header .k-cart-btn.hidden .k-cart-avatar,
.k-cart-btn.k-header-action.hidden .k-cart-avatar {
  display: block;
  visibility: visible;
  opacity: 1;
  /* FIX cadrage avatar dame : calage sur la LARGEUR (épaules) + ancrage bas.
     Les 2 visuels (vide/plein) partagent le même gabarit → visage et épaules
     restent à la même place ; seul le panier déborde vers le haut quand le
     panier se remplit (overflow:visible déjà posé sur .k-cart-btn / .k-header).
     mix-blend-mode:multiply retiré — il noyait l'avatar sur fond crème. */
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translate(-4px, -50%);  /* -4px gauche : badge reste dans l'écran mobile */
  margin: 0 auto;
  width: 26px;          /* PR-AVATAR : réduit 30→26px — panier ne remonte plus sur la tête */
  height: auto;
  object-fit: contain;
  object-position: center center;
  transform-origin: center center;
  border: 0;
  box-shadow: none;
  background: transparent;
  mix-blend-mode: normal;
}

/* Badge mobile header : coin bas-droit de l'avatar.
   Avatar 26px centré dans bouton 42px puis décalé -4px → centre avatar à 50%-4px.
   Badge 16px → left: calc(50% + 3px) conservé (tuned, décalage marginal à -4px). */
.k-header .k-cart-btn.k-header-action .k-cart-badge {
  position: absolute;
  top: auto;
  bottom: calc(50% - 23px);
  left: calc(50% + 3px);  /* avatar décalé -4px → badge suit : 7-4=3 */
  right: auto;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  border-width: 1.5px;
  z-index: 20;
}

/* Empty cart: hide only the badge, never the avatar. */
.k-header .k-cart-btn.is-empty .k-cart-badge,
.k-cart-btn.k-header-action.is-empty .k-cart-badge,
.k-header .k-cart-badge:not(.show),
.k-cart-btn.k-header-action .k-cart-badge:not(.show) {
  display: none;
}

/* ── Desktop : header nav-btns, header-actions, k-header glass ───
   (migré depuis boutique-desktop.css + desktop-commerce-skeleton.css) */
@media (min-width: 900px) {
  /* Filet de sécurité : avatar dame toujours visible (ex hero-cart-proxy.css) */
  .k-header .k-cart-btn,
  .k-cart-btn.k-header-action {
    display: flex;
    visibility: visible;
    opacity: 1;
  }
  .k-header .k-cart-avatar {
    display: block;
    visibility: visible;
    opacity: 1;
  }

  /* Nav buttons (ex boutique-desktop.css) */
  .k-header-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s var(--ease), border-color .15s, color .15s;
    white-space: nowrap;
    /* Skeleton override: height 38px, padding 0 13px, border-radius 999px merged below */
    height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(100,175,90, .08);
  }
  .k-header-nav-btn svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none; stroke-width: 2;
    flex-shrink: 0;
  }
  .k-header-nav-btn:hover {
    background: var(--white);
    border-color: rgba(198, 168, 93, .38);
  }
  .k-header-nav-btn:active { background: var(--sand-dark); }
  .k-header-nav-btn.active {
    background: var(--sand-warm);
    border-color: var(--border);
    font-weight: 700;
  }

  /* Bouton Groupe desktop */
  .k-header-nav-btn--group { position: relative; }
  .k-header-nav-btn--group.has-active {
    background: var(--green-bg-leaf);
    border-color: var(--cta-green);
    color: var(--green-text-strong);
  }
  .k-header-group-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cta-green);
    border: 2px solid var(--white);
    display: none;
  }
  .k-header-group-badge.show { display: block; }

  /* Header actions bar */
  .k-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    /* skeleton: gap: 8px merged — keeping boutique-desktop gap:4px as tighter default */
  }

  /* k-cart-btn.k-header-action desktop — BUG-AVATAR-2 :
     Le bouton était 42×42px avec background:white → "cercle blanc" visible,
     avatar_panier.png (dame+panier) débordait par le haut et le badge cachait le panier.
     Fix : fond transparent, hauteur étendue vers le haut pour absorber le débordement,
     overflow:visible confirmé, badge repositionné sur l'épaule (déjà dans les règles .k-header). */
  .k-cart-btn.k-header-action {
    width: 40px;
    height: 44px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* Header glass effect (ex desktop-commerce-skeleton.css) */
  .k-header {
    z-index: 220;
    background: rgba(255, 252, 244, .92);
    border-bottom: 1px solid rgba(100,175,90, .10);
    box-shadow: 0 8px 24px rgba(100,175,90, .07);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }

  /* k-header-inner max-width (skeleton was 1480px, layout was container) — skeleton wins on desktop */
  .k-header-inner {
    max-width: 1480px;
    min-height: 68px;
    gap: 18px;
  }
}

/* ═══ PREMIUM MOBILE V1 — header/recherche (rapatrié de b-mobile-premium-v1.js,
   Lot 2/L2-S2). Scopé html.k-mobile-premium-v1, @media max 899px. ═══ */
@media (max-width: 899px) {
  html.k-mobile-premium-v1 .k-header-inner {
    gap: 8px;
    padding-inline: 10px;
  }
  html.k-mobile-premium-v1 .k-search {
    min-height: 42px;
    border-radius: 999px;
    box-shadow: 0 10px 22px var(--border-text-06);
  }
  html.k-mobile-premium-v1 .k-search input { font-size: 14px; }
}

/* ── Premium desktop home — header / search / catalog (rapatrié de b-home-premium-v1.js, Lot 3) ── */
@media (min-width: 900px) {
  html.k-home-premium-v1 .k-header {
    backdrop-filter: blur(18px);
    background: color-mix(in srgb, var(--sand) 82%, var(--white));
    border-bottom: 1px solid var(--border-text-06);
  }

  html.k-home-premium-v1 .k-logo-text {
    font-weight: 900;
    letter-spacing: -.025em;
  }

  html.k-home-premium-v1 .k-search {
    min-height: 54px;
    border-radius: 999px;
    box-shadow: 0 14px 36px var(--border-text-06);
  }

  html.k-home-premium-v1 .k-search input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 78%, transparent);
  }

  /* Catalogue desktop : cartes directement sous la nav.
     Titre éditorial « Bons plans du moment » + sous-titre SUPPRIMÉS (ils
     retardaient l'arrivée des produits). Le contexte d'univers vit dans la
     barre contextuelle sticky ; l'accueil va droit aux cartes. */
  html.k-home-premium-v1 #k-catalog-section { padding-top: 12px; }
}


/* ── hero.css ────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   KOMERCE — hero.css  (LOT 13 refonte)
   Mobile-first, zéro !important.
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO SHELL ─────────────────────────────────────────────── */
/* overflow:clip (≠ hidden) : coupe le débordement SANS créer de scroll container,
   donc ne casse pas position:sticky des descendants. */
.k-hero { position: relative; background: var(--hero-bg); overflow: clip; } /* POLISH — fond hero via token */
.k-hero-inner { display: flex; flex-direction: column; max-width: var(--container); margin: 0 auto; }

/* ── MOBILE : image arrondie ────────────────────────────────── */
.k-hero-media {
  position: relative;
  margin: 0 12px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 28px var(--border-text-10);
}
.k-hero-img {
  width: 100%;
  height: clamp(110px, 28vw, 140px);
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
}
.k-hero-mini-slogan {
  display: flex;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  z-index: 5;
  padding: 6px 28% 0;
  pointer-events: none;
}
.k-hero-mini-slogan .k-line-1 {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  text-shadow: 0 0 12px var(--white), 0 0 24px var(--surface-white-92);
}
.k-hero-mini-slogan .k-line-2 {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(18px, 4.8vw, 24px);
  font-weight: 900;
  color: var(--ocean, var(--ocean));
  line-height: 1.05;
  text-shadow: 0 0 12px var(--white), 0 0 24px var(--surface-white-92);
}

/* Bulle hero mobile : conteneur neutre.
   L'avatar panier appartient à hero-cart-proxy.css quand JS ajoute .k-hero-cart-proxy. */
.k-hero-bubble {
  display: flex;
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 12;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-sand-90);
  border: 1px solid rgba(198,168,93,.24);
  box-shadow: 0 4px 12px var(--border-text-10);
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.k-hero-bubble:active { transform: scale(.94); }

/* Éléments masqués mobile */
.k-hero-overlay, .k-hero-badge, .k-hero-sub, .k-hero-cta-row,
.k-hero-trust, .k-hero-pills, .k-hero-text-left, .k-hero-tag { display: none; }

.k-hero-cats-sticky {
  background: transparent;
  box-shadow: none;
  margin-top: -42px;
  position: relative;
  /* z-index doit être > .k-header (z-index:100 dans layout.css) pour ne pas
     passer derrière le header lors du scroll. Valeur 110 = cohérente avec
     .k-cats-shell @900px dans boutique-desktop.css (z-index:110). */
  z-index: 110;
}
.k-hero-cats-sticky::after { content: ''; display: block; height: 4px; }
.k-cats-shell {
  margin: -14px 12px 0;
  padding: 0;
  /* POLISH — fond lumineux au lieu de sand-warm, séparation visuelle du hero */
  background: var(--sand-bright);
  border: 1px solid rgba(198,168,93,.13);
  border-radius: 18px;
  /* Ombre chaude ambre + légère touche ocean */
  box-shadow:
    0 8px 20px rgba(198,168,93,.10),
    0 2px 6px rgba(100,175,90,.06);
  overflow: clip;
}

/* ── EVENT BANNER ─────────────────────────────────────────────── */
.k-event-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 12px 0; padding: 12px 16px;
  color: var(--blue-dark); text-decoration: none;
  background: linear-gradient(135deg, var(--blue-light-bg), var(--blue-lighter-bg));
  border: 1px solid var(--blue-border); border-radius: 12px;
  box-shadow: var(--elev-1);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.k-event-banner:active { transform: scale(.98); box-shadow: none; }
.k-event-banner-icon { flex-shrink: 0; font-size: 24px; line-height: 1; }
.k-event-banner-copy { flex: 1; min-width: 0; }
.k-event-banner-title { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.k-event-banner-text  { display: block; margin-top: 2px; color: var(--blue-mid); font-size: 12px; line-height: 1.4; }
.k-event-banner-arrow { flex-shrink: 0; font-size: 13px; font-weight: 600; }

/* ── DESKTOP ─────────────────────────────────────────────────── */
/* Toutes les règles desktop pour .k-hero-media, .k-hero-mini-slogan,
   .k-hero-img, .k-hero-badge, .k-hero-cta-*, .k-hero-trust
   sont dans desktop-commerce-skeleton.css (owner déclaré §3 BOUTIQUE_ARCHITECTURE.md).
   hero.css est owner base/mobile uniquement. */

/* ── Fond hero transparent (tokens) ─────────────────────── */
.k-hero, .k-hero-wrap, .k-hero-shell, .k-hero-card, .k-hero-banner {
  background: var(--hero-bg);
  border-color: var(--hero-border);
  box-shadow: var(--hero-shadow);
}
.k-hero-card, .k-hero-banner { overflow: hidden; border-radius: var(--radius-lg); }
.k-hero img, .k-hero-card img, .k-hero-banner img { display: block; width: 100%; background: transparent; }
/* ── Empêcher l'image hero de dépasser sa hauteur définie ── */
.k-hero-img { height: clamp(110px, 28vw, 140px); object-fit: cover; }
/* @900px k-hero-img height → premier bloc @media ci-dessus (source de vérité : clamp(140px,14vw,188px)) */
/* @900px override final → boutique-desktop.css #k-hero-fixed-wrap .k-hero-img (clamp(130px,13vw,160px) !important) */

/* Trust bar : desktop only (non utilisée actuellement) */
.k-hero-trust-bar { display: none; }


/* ── MOBILE — COMPRESSION MARGES HERO + RAIL (max-width: 767px) ──
   Objectif : récupérer ~22px verticaux pour préparer le futur rail
   de sous-catégories, SANS toucher à la hauteur de l'image.
   L'image reste à clamp(110px, 28vw, 140px) — règle base inchangée.
   MOBILE ONLY. Desktop min-width:900px → non impacté.
   Rollback : supprimer ce bloc.
   ──────────────────────────────────────────────────────────────── */

/* MICRO-OPTIMISATION HAUTEUR HERO — gain cible 15–25px
   Avant : clamp(110px, 28vw, 140px)
   Après : clamp(100px, 26vw, 118px)
   Gain mesuré : ~12px @390px · ~18px @430px · ~22px @767px
   object-fit:cover + object-position:50% 0% inchangés → personnages préservés.
   Desktop non impacté (bloc max-width:767px uniquement). */
.k-hero-img {
  height: clamp(100px, 26vw, 118px);
}

/* 1. Supprime le padding au-dessus du rail catégories (-6px).
      Valeur premium injectée par b-mobile-premium-v1.js : 6px → 0. */
.k-hero-cats-sticky {
  padding-top: 0;
  /* 2. Remonte le rail de 12px supplémentaires pour coller à la nouvelle hauteur hero.
        Base hero.css : margin-top:-42px. Override précédent : -50px. v3 : -56px.
        Compensé aussi par la photo chip plus haute (36px). Chevauchement propre. */
  margin-top: -56px;
}

/* 3. Supprime le pseudo-spacer sous le rail (-4px). */
.k-hero-cats-sticky::after {
  height: 0;
}

/* 4. Remonte le shell catégories dans le sticky (-4px).
      Base hero.css : margin: -14px 12px 0. Override : -18px. */
.k-cats-shell {
  margin-top: -18px;
}

/* 5. Slot réservé pour le futur rail de sous-catégories.
      Actuellement height:0 + overflow:hidden → aucun impact visuel.
      Quand les sous-catégories seront activées, retirer overflow:hidden
      et définir la hauteur souhaitée. */
.k-subcats-mobile-slot {
  height: 0;
  overflow: hidden;
  transition: height .2s ease;
}
/* ── FIN MOBILE COMPRESSION MARGES HERO + RAIL ─────────────── */

/* ══════════════════════════════════════════════════════════════
   HERO v4 — IMAGE TAMISÉE 220px + RAIL PILLS TEXTE
   Remplace : k-cats-shell (bulles photo)
   Compatible desktop (non impacté — min-width:900px)
   ══════════════════════════════════════════════════════════════ */

/* ── Image hero mobile : proportions naturelles du webp 1080×220 ── */
/* GUARD mobile uniquement — desktop @900px override ci-dessous prend le relais. */
@media (max-width: 899px) {
  .k-hero-img {
    /* Affiche le webp à sa vraie proportion sans crop.
       Sur 390px de large → ~79px de haut (390 × 220/1080). */
    height: auto;
    aspect-ratio: 1080 / 220;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* Hero : colle le rail directement sous l'image, sans overlap */
.k-hero-cats-sticky {
  margin-top: 0;
}
.k-hero-cats-sticky::after {
  height: 0;
}

/* Suppression du mini-slogan dans l'image (trop petit à 220px) */
.k-hero-mini-slogan { display: none; }
.k-hero-bubble       { display: none; }

/* ── Rail pills texte — mobile-first ─────────────────────────── */
.k-cats-rail {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Masque la scrollbar */
  scrollbar-width: none;
}
.k-cats-rail::-webkit-scrollbar { display: none; }

/* Pill individuelle */
.k-cpill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(198, 168, 93, .20);
  background: rgba(255, 255, 255, .80);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.k-cpill:active {
  transform: scale(.94);
}

/* État actif */
.k-cpill.active {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--white);
  box-shadow: 0 3px 10px rgba(var(--coral-rgb, 210,80,50), .28);
}

/* ── Desktop : rail caché (les cartes visuelles prennent le relais) ── */
@media (min-width: 900px) {
  .k-cats-rail { display: none; }
}
/* ══ FIN HERO v4 ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   HERO DESKTOP OVERRIDE — @min-width:900px
   Annule le aspect-ratio:1080/220 posé par hero v4 (mobile only).
   Image réelle : 1456×720 → on cadre à 360px de haut avec object-fit:cover.
   object-position:50% 20% : cadre le haut du visuel (personnages).
   Source de vérité pour la hauteur hero desktop.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Image : 2804×561 (ratio 5:1) — on cadre à 320px de haut.
     object-position:50% 45% : centre vertical sur les personnages. */
  .k-hero-img {
    height: 200px;
    aspect-ratio: unset;
    object-fit: cover;
    object-position: 50% 15%;
  }

  /* Retire le border-radius et marges mobiles sur desktop */
  .k-hero-media {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* Réinitialise les marges mobiles du sticky */
  .k-hero-cats-sticky {
    margin-top: 0;
  }

  /* Mini-slogan masqué desktop (géré par boutique-desktop.css) */
  .k-hero-mini-slogan { display: none; }
  .k-hero-bubble       { display: none; }
}
/* ══ FIN HERO DESKTOP OVERRIDE ════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM MOBILE V1 — hero (rapatrié de b-mobile-premium-v1.js, Lot 2/L2-S2).
   Scopé html.k-mobile-premium-v1, dans @media max 899px (mobile). Owner du hero.
   !important retirés (Lot 5) — spécificité 0-2-0 bat la règle base 0-1-0 (.k-hero-overlay etc. { display:none }).
   Aucune règle CSS ou JS ne remet ces éléments visible. ════════ */
@media (max-width: 899px) {
  html.k-mobile-premium-v1 #k-hero-fixed-wrap {
    background:
      radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--ocean-bg-08) 68%, transparent), transparent 26%),
      var(--sand-warm);
  }

  html.k-mobile-premium-v1 .k-hero-inner { padding: 0 10px; }

  html.k-mobile-premium-v1 .k-hero-media {
    border-radius: 22px;
    height: 118px;
    max-height: 118px;
    overflow: hidden;
    box-shadow: 0 10px 24px var(--border-text-06);
  }

  html.k-mobile-premium-v1 .k-hero-img {
    height: 118px;
    object-fit: cover;
    object-position: center;
  }

  html.k-mobile-premium-v1 .k-hero-mini-slogan--premium {
    padding: 10px 12px 0;
    align-items: flex-start;
    text-align: left;
  }

  html.k-mobile-premium-v1 .k-hero-mini-slogan--premium .k-hero-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--white) 88%, transparent);
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px var(--border-text-08);
    margin-bottom: 6px;
  }

  html.k-mobile-premium-v1 .k-hero-mini-slogan--premium .k-line-1,
  html.k-mobile-premium-v1 .k-hero-mini-slogan--premium .k-line-2 {
    text-align: left;
    font-size: 18px;
    line-height: 1.05;
  }

  html.k-mobile-premium-v1 .k-hero-cta-row,
  html.k-mobile-premium-v1 .k-hero-trust,
  html.k-mobile-premium-v1 .k-hero-bubble,
  html.k-mobile-premium-v1 .k-hero-sub,
  html.k-mobile-premium-v1 .k-hero-overlay {
    display: none;
  }

  html.k-mobile-premium-v1 .k-hero-cats-sticky { padding-top: 6px; }
}

/* ════════ Logo électrisé en filigrane — hero mobile ════════
   Filigrane fondu dans l'illustration : AUCUN calque/scrim sur le fond.
   La lisibilité vient uniquement du glow + d'une ombre douce propres au logo.
   Deux rythmes synchronisés sur --klg-bpm :
     · connexion → un signal circule le long des liaisons (.klg-signal)
     · cœur      → double toc-toc sur les points oranges (.klg-heart) + halo vert
   Masqué ≥900px (le logo complet est déjà dans la topbar desktop).
   Coupé si prefers-reduced-motion. Réglages : --klg-bpm / --klg-glow / --klg-opacity. */
@media (max-width: 899px) {
  .k-hero-media .k-hero-logo-glow {
    --klg-bpm: 2.8s;       /* lent ≈ braise ; baisser pour accélérer */
    --klg-glow: 6px;       /* intensité du halo */
    --klg-opacity: 1;      /* présence du filigrane */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48%;
    max-width: 162px;
    z-index: 6;
    pointer-events: none;
    opacity: var(--klg-opacity);
    /* halo sombre propre au logo (technique sous-titre) → lisible sur fond clair OU foncé,
       sans poser aucun calque sur l'illustration */
    filter:
      drop-shadow(0 0 2px rgba(10, 30, 16, .9))
      drop-shadow(0 0 5px rgba(10, 30, 16, .6))
      drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
  }
  .k-hero-media .k-hero-logo-glow svg {
    display: block;
    width: 100%;
    height: auto;
  }
  /* recolore le logo en blanc lumineux pour qu'il ressorte sur l'illustration */
  .k-hero-logo-glow .klg-lines { stroke: #f4fff7; }
  .k-hero-logo-glow .klg-text path { fill: #f4fff7; }

  /* halo vert qui bat (double toc-toc puis repos) sur traits + nœuds + O + lettres */
  .k-hero-logo-glow .klg-green {
    animation: klgHeartGlow var(--klg-bpm) ease-in-out infinite;
  }
  @keyframes klgHeartGlow {
    0%   { filter: drop-shadow(0 0 .5px rgba(150, 230, 170, .35)); }
    6%   { filter: drop-shadow(0 0 var(--klg-glow) rgba(150, 230, 170, .95)); }
    13%  { filter: drop-shadow(0 0 1px rgba(150, 230, 170, .4)); }
    20%  { filter: drop-shadow(0 0 calc(var(--klg-glow) * .8) rgba(150, 230, 170, .85)); }
    30%  { filter: drop-shadow(0 0 .5px rgba(150, 230, 170, .35)); }
    100% { filter: drop-shadow(0 0 .5px rgba(150, 230, 170, .35)); }
  }

  /* cœur : les points oranges gonflent au double-battement */
  .k-hero-logo-glow .klg-heart circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: klgHeartBeat var(--klg-bpm) ease-in-out infinite;
  }
  @keyframes klgHeartBeat {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 1px rgba(200, 92, 45, .5)); }
    6%   { transform: scale(1.26); filter: drop-shadow(0 0 var(--klg-glow) rgba(255, 150, 80, 1)); }
    13%  { transform: scale(1.02); filter: drop-shadow(0 0 1px rgba(200, 92, 45, .5)); }
    20%  { transform: scale(1.18); filter: drop-shadow(0 0 calc(var(--klg-glow) * .8) rgba(255, 150, 80, .95)); }
    30%  { transform: scale(1);    filter: drop-shadow(0 0 1px rgba(200, 92, 45, .5)); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 1px rgba(200, 92, 45, .5)); }
  }

  /* connexion : un éclat lumineux file le long de chaque liaison puis fait le tour du O */
  .k-hero-logo-glow .klg-signal path,
  .k-hero-logo-glow .klg-signal circle {
    stroke: #e8fff0;
    stroke-width: 6;
    stroke-dasharray: 18 82;
    filter: drop-shadow(0 0 3px rgba(200, 255, 215, .9));
    animation: klgSignal var(--klg-bpm) linear infinite;
  }
  .k-hero-logo-glow .klg-signal .klg-s2 { animation-delay: .09s; }
  .k-hero-logo-glow .klg-signal .klg-s3 { animation-delay: .18s; }
  .k-hero-logo-glow .klg-signal .klg-so { animation-delay: .26s; }
  @keyframes klgSignal {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    4%   { opacity: 1; }
    34%  { stroke-dashoffset: 0; opacity: 1; }
    42%  { opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .k-hero-logo-glow .klg-green,
    .k-hero-logo-glow .klg-heart circle,
    .k-hero-logo-glow .klg-signal path,
    .k-hero-logo-glow .klg-signal circle { animation: none; }
    .k-hero-logo-glow .klg-signal { display: none; }
  }
}

/* logo-glow masqué desktop : le logo complet vit déjà dans la topbar */
@media (min-width: 900px) {
  .k-hero-logo-glow { display: none; }
}

/* ── Premium desktop home — hero (rapatrié de b-home-premium-v1.js, Lot 3) ── */
@media (min-width: 900px) {
  html.k-home-premium-v1 #k-hero-fixed-wrap {
    background:
      radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--ocean-bg-08) 66%, transparent), transparent 24%),
      linear-gradient(180deg, var(--sand) 0%, color-mix(in srgb, var(--sand-warm) 55%, var(--white)) 100%);
  }

  html.k-home-premium-v1 .k-hero-inner {
    max-width: none;
    padding-inline: clamp(26px, 3.6vw, 60px);
  }

  html.k-home-premium-v1 .k-hero-media {
    border-radius: 0 0 28px 28px;
    overflow: hidden;
    box-shadow: 0 18px 50px var(--border-text-06);
  }

  html.k-home-premium-v1 .k-hero-mini-slogan--premium { max-width: 510px; }

  html.k-home-premium-v1 .k-hero-badge { letter-spacing: .06em; }

  html.k-home-premium-v1 .k-hero-sub {
    margin-top: 14px;
    max-width: 470px;
    font-size: 15px;
    line-height: 1.55;
  }

  html.k-home-premium-v1 .k-hero-cta-primary {
    min-height: 44px;
    border-radius: 14px;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--coral) 22%, transparent);
  }

  html.k-home-premium-v1 .k-hero-cta-ghost {
    border-radius: 14px;
    background: color-mix(in srgb, var(--white) 78%, transparent);
  }

  html.k-home-premium-v1 .k-hero-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--white) 78%, transparent);
    border: 1px solid var(--border-text-06);
  }
}