/* =====================================================================
   eShaup — Version A (corrigée)
   Design system : premium, minimal, inspiration iOS
   Aucune bordure colorée — profondeur via ombres douces + dégradés
   Bottom nav flottante centrée (mobile) / sidebar flottante (desktop)
   Panels verrouillés (visibility+pointer-events) pour éviter les bugs d'affichage
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. TOKENS
--------------------------------------------------------------------- */
:root{
  /* Surfaces */
  --c-bg:            #FAFAF9;
  --c-bg-alt:        #F3F2EF;
  --c-surface:       #FFFFFF;
  --c-surface-raised:#FFFFFF;

  /* Texte */
  --c-ink:           #14131A;
  --c-ink-soft:      #4A4952;
  --c-muted:         #8B8A93;
  --c-muted-2:       #B7B6BE;
  --c-hairline:      rgba(20,19,26,0.06);

  /* Accent signature — jaune eShaup */
  --c-accent:        #FFC633;
  --c-accent-deep:   #F5A800;
  --c-accent-ink:    #221C05;
  --c-accent-soft:   #FFF3D2;

  /* États */
  --c-success:       #1DBF73;
  --c-success-soft:  #E7F9EF;
  --c-danger:        #FF3B5C;
  --c-danger-soft:   #FFE9EC;
  --c-info:          #3E7BFA;
  --c-info-soft:     #EAF0FF;
  --c-warning:       #FFB020;
  --c-warning-soft:  #FFF4E0;

  /* Ombres douces — jamais de bordure colorée */
  --sh-xs:  0 1px 2px rgba(20,19,26,0.04), 0 1px 1px rgba(20,19,26,0.03);
  --sh-sm:  0 2px 8px rgba(20,19,26,0.05), 0 1px 2px rgba(20,19,26,0.04);
  --sh-md:  0 8px 24px rgba(20,19,26,0.08), 0 2px 6px rgba(20,19,26,0.04);
  --sh-lg:  0 16px 40px rgba(20,19,26,0.12), 0 4px 12px rgba(20,19,26,0.05);
  --sh-xl:  0 24px 64px rgba(20,19,26,0.16), 0 8px 24px rgba(20,19,26,0.06);
  --sh-card-hover: 0 20px 44px rgba(20,19,26,0.14), 0 6px 16px rgba(20,19,26,0.06);
  --sh-accent: 0 10px 24px rgba(245,168,0,0.30), 0 3px 8px rgba(245,168,0,0.20);
  --sh-inset-top: inset 0 1px 0 rgba(255,255,255,0.6);
  --sh-nav: 0 12px 32px rgba(20,19,26,0.14), 0 4px 12px rgba(20,19,26,0.08), inset 0 1px 0 rgba(255,255,255,0.5);

  /* Rayons — arrondis façon iOS */
  --r-xs:  10px;
  --r-sm:  14px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  30px;
  --r-pill: 999px;

  /* Rythme */
  --gutter: 18px;
  --topbar-h: 0px;

  /* Dimensions nav flottante */
  --nav-h: 66px;
  --nav-gap-bottom: 18px;
  --nav-side-w: 78px;
  --nav-side-gap: 16px;

  /* Typo */
  --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --f-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;

  /* Timing — fluide, naturel */
  --ease-out:      cubic-bezier(.22, 1, .36, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .16s;
  --t-med:  .28s;
  --t-slow: .42s;
}

/* ---------------------------------------------------------------------
   1. RESET & BASE
--------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--f-body);
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}
h1,h2,h3,h4,h5,h6{ margin: 0; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; color: var(--c-ink); }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
button{
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
input, textarea{
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
  color: inherit;
  -webkit-appearance: none;
}
img{ display: block; max-width: 100%; }
svg{ display: block; flex-shrink: 0; }
ul{ margin: 0; padding: 0; list-style: none; }

::selection{ background: var(--c-accent); color: var(--c-accent-ink); }

/* Scrollbars discrètes */
.scroll-content, .drawer-scroll, .checkout-scroll,
.stories-bar-inner, .products-scroll, .boutiques-vedettes-scroll,
.filter-chips-scroll, .drawer-thumbs, .cart-tabs,
.drawer-similaires-row, .category-overlay-body, .search-overlay-body{
  scrollbar-width: none;
}
.scroll-content::-webkit-scrollbar, .drawer-scroll::-webkit-scrollbar,
.checkout-scroll::-webkit-scrollbar, .stories-bar-inner::-webkit-scrollbar,
.products-scroll::-webkit-scrollbar, .boutiques-vedettes-scroll::-webkit-scrollbar,
.filter-chips-scroll::-webkit-scrollbar, .drawer-thumbs::-webkit-scrollbar,
.cart-tabs::-webkit-scrollbar, .drawer-similaires-row::-webkit-scrollbar,
.category-overlay-body::-webkit-scrollbar, .search-overlay-body::-webkit-scrollbar{
  display: none;
}

/* Focus clavier visible — accessibilité */
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--c-accent-deep);
  outline-offset: 3px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   2. APP SHELL
--------------------------------------------------------------------- */
.app-shell{
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  /*box-shadow: 0 24px 64px rgba(20,19,26,0.16), 0 8px 24px rgba(20,19,26,0.06);*/
  isolation: isolate; /* nouveau contexte d'empilement propre pour tous les enfants z-index */
}

@media (min-width: 900px){
  /*body{ background: linear-gradient(180deg, #F0EEE9 0%, #E9E7E1 100%); }*/
  .app-shell{
    margin: 28px auto;
    min-height: calc(100vh - 56px);
    border-radius: var(--r-xl);
    overflow: hidden;
  }
}

.main-content{
  flex: 1;
  position: relative;
  overflow: hidden;
}

.app-view{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
  z-index: 1;
}
.app-view--active{
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
  z-index: 2;
}

.scroll-content{
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--gutter);
}

/* Espace réservé en bas pour ne jamais passer sous la nav flottante */
.bottom-spacer-large{ height: calc(var(--nav-h) + var(--nav-gap-bottom) + 34px); }

/* ---------------------------------------------------------------------
   3. TOPBAR
--------------------------------------------------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250,250,249,0.86);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 var(--c-hairline);
}
.topbar-content{ padding: 14px var(--gutter) 12px; }

.topbar-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.topbar-row--title{ justify-content: flex-start; }

.view-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Pilule localisation */
.loc-pill{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  background: var(--c-surface);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.loc-pill:active{ transform: scale(0.96); box-shadow: var(--sh-xs); }
.loc-pill svg{ color: var(--c-accent-deep); flex-shrink: 0; }
.loc-pill-text{ display: flex; flex-direction: column; line-height: 1.15; }
.loc-pill-label{ font-size: 9.5px; color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.loc-pill-value{ font-size: 12.5px; font-weight: 700; color: var(--c-ink); max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brand-block{ display: flex; align-items: center; gap: 6px; }
.brand-mark{
  width: 40px;
  display: flex; align-items: center; justify-content: center;
  /*background: linear-gradient(145deg, #FFDE7A, var(--c-accent));*/
  border-radius: 10px;
  /*box-shadow: var(--sh-sm);*/
}
.brand-name{ font-family: var(--f-display); font-weight: 800; font-size: 17px; letter-spacing: -0.03em; }

.icon-btn{
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  color: var(--c-ink);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast);
  flex-shrink: 0;
}
.icon-btn:hover{ box-shadow: var(--sh-md); }
.icon-btn:active{ transform: scale(0.90); }
.icon-btn--ghost{ background: transparent; box-shadow: none; }
.icon-btn--ghost:hover{ background: var(--c-surface); box-shadow: var(--sh-sm); }
.glass-btn{
  background: rgba(20,19,26,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.glass-btn:hover{ background: rgba(20,19,26,0.5); }

/* Barre de recherche */
.search-bar{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  margin-top: 12px;
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  color: var(--c-muted);
  transition: box-shadow var(--t-med) var(--ease-out);
}
.search-bar:focus-within{
  box-shadow: var(--sh-md), 0 0 0 3px var(--c-accent-soft);
  color: var(--c-ink-soft);
}
.search-input{
  flex: 1;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-ink);
  min-width: 0;
}
.search-input::placeholder{ color: var(--c-muted-2); font-weight: 500; }
.search-clear-btn{
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-bg-alt);
  color: var(--c-muted);
  transition: background var(--t-fast), transform var(--t-fast);
}
.search-clear-btn:active{ transform: scale(0.85); }

/* Chips filtre catégories (header Produits) */
.filter-chips-scroll{
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.filter-chip{
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink-soft);
  box-shadow: var(--sh-sm);
  transition: all var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.filter-chip:active{ transform: scale(0.94); }
.filter-chip.active{
  background: var(--c-ink);
  color: #fff;
  box-shadow: var(--sh-md);
}

.panier-item-count{
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
  background: var(--c-bg-alt);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-left: auto;
}

.cart-tabs-wrap{ margin-top: 12px; }
.cart-tabs{ display: flex; gap: 8px; overflow-x: auto; }
.cart-tab-btn{
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-ink-soft);
  transition: all var(--t-fast) var(--ease-out);
}
.cart-tab-btn.active{ background: var(--c-ink); color: #fff; box-shadow: var(--sh-md); }
.cart-tab-logo{ width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.cart-tab-count{
  background: rgba(255,255,255,0.2);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
}
.cart-tab-btn:not(.active) .cart-tab-count{ background: var(--c-bg-alt); color: var(--c-muted); }

/* ---------------------------------------------------------------------
   4. HOME — STORIES (format carte verticale, style Facebook)
--------------------------------------------------------------------- */
.stories-bar{ padding: 16px 0 4px; }
.stories-bar-inner{ display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }

.story-bubble{
  --delay: 0s;
  flex-shrink: 0;
  width: 108px;
  height: 190px;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--c-bg-alt);
  box-shadow: var(--sh-sm);
  animation: pop-in var(--t-slow) var(--ease-spring) both;
  animation-delay: var(--delay);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.story-bubble:hover{ transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.story-bubble:active{ transform: scale(0.97); }
.story-bubble.seen{ opacity: 0.6; }

.story-bubble-ring{
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  padding: 0;
  background: none;
  overflow: hidden;
}
.story-bubble-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  object-fit: cover;
}
.story-bubble-placeholder{
  position: absolute; inset: 0;
  border-radius: 0;
  background: linear-gradient(150deg, #FFE1A0, var(--c-accent));
  align-items: center; justify-content: center;
  font-weight: 800; font-size: 34px; color: rgba(20,19,26,0.35);
}
.story-bubble-overlay{
  position: absolute; inset: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 78%, rgba(0,0,0,0.72) 100%);
}

/* Anneau d'accent en haut, façon indicateur "non vu" (remplace le ring circulaire) */
.story-bubble::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: conic-gradient(from 90deg, var(--c-accent-deep), var(--c-accent), #FF9A5C, var(--c-accent-deep));
  z-index: 2;
  transition: opacity var(--t-med);
}
.story-bubble.seen::before{ opacity: 0; }

.story-bubble-avatar{
  position: absolute;
  top: 10px; left: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: 0 0 0 2.5px rgba(255,255,255,0.85), var(--sh-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.story-bubble-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.story-ring-init-av{ font-size: 12px; font-weight: 800; color: var(--c-ink-soft); }

.story-nb-badge{
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(20,19,26,0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 19px; height: 19px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  padding: 0 5px;
}

.story-label{
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  line-height: 1.25;
  z-index: 3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: none;
  white-space: normal;
}

@media (min-width: 900px){
  .story-bubble{ width: 128px; height: 220px; }
}


/* ---------------------------------------------------------------------
   5. HOME — HERO PROMO CAROUSEL
--------------------------------------------------------------------- */
.hero-section{ padding: 12px 0 6px; }
.hero-slider{ position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.promo-banner-track{ position: relative; height: 172px; }
.promo-banner{
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--t-slow) var(--ease-out), transform 6s var(--ease-out);
  pointer-events: none;
  visibility: hidden;
}
.promo-banner.active{ opacity: 1; transform: scale(1); pointer-events: auto; visibility: visible; }

.promo-grad-1{ background: linear-gradient(135deg, #FFDE86 0%, var(--c-accent) 55%, #F59A2E 100%); }
/*.promo-grad-2{ background: linear-gradient(135deg, #2E2B3D 0%, #14131A 65%, #3A3550 100%); }*/
.promo-grad-3{ background: linear-gradient(135deg, #FFF4DC 0%, #FFE1A8 45%, #FFC96B 100%); }

.promo-content{
  position: relative;
  height: 100%;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.promo-grad-2 .promo-content{ color: #fff; }
.promo-tag{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.72;
  width: fit-content;
}
.promo-content h3{
  font-size: 21px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.promo-cta{
  display: flex; align-items: center; gap: 6px;
  width: fit-content;
  margin-top: 4px;
  padding: 10px 16px;
  background: var(--c-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.promo-grad-2 .promo-cta{ background: #fff; color: var(--c-ink); }
.promo-cta:active{ transform: scale(0.94); }
.promo-cta svg{ transition: transform var(--t-fast) var(--ease-out); }
.promo-cta:hover svg{ transform: translateX(2px); }

.promo-dots{ display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.hero-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-muted-2);
  transition: all var(--t-med) var(--ease-out);
}
.hero-dot.active{ width: 20px; background: var(--c-accent-deep); }

/* ---------------------------------------------------------------------
   6. SECTIONS COMMUNES (headers, "voir tout")
--------------------------------------------------------------------- */
.section-block{ padding: 70px 0 4px; }
.section-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 2px;
}
.section-header h2{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.section-see-all{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-accent-deep);
  padding: 4px 2px;
  transition: opacity var(--t-fast);
}
.section-see-all:active{ opacity: 0.5; }
.section-count{ font-size: 13px; font-weight: 700; color: var(--c-muted); }
.products-count-row{ padding: 16px 2px 12px; }

/* ---------------------------------------------------------------------
   7. BOUTIQUES À LA UNE (home)
--------------------------------------------------------------------- */
.boutiques-vedettes-scroll{
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px;
}
.boutique-vedette-card{
  --delay: 0s;
  flex-shrink: 0;
  width: 297px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  cursor: pointer;
  animation: rise-in var(--t-slow) var(--ease-out) both;
  animation-delay: var(--delay);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.boutique-vedette-card:hover{ transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.boutique-vedette-card:active{ transform: translateY(-1px) scale(0.99); }

.bvc-banner{ position: relative; height: 286px; background: var(--c-bg-alt); overflow: hidden; }
.bvc-banner img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.boutique-vedette-card:hover .bvc-banner img{ transform: scale(1.06); }
.bvc-fade{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%); }
.bvc-vip-tag{
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(135deg, #FFE9A8, var(--c-accent));
  color: var(--c-accent-ink);
  font-size: 10px; font-weight: 800;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  letter-spacing: 0.03em;
}
.bvc-name-overlay{
  position: absolute; left: 12px; bottom: 10px;
  color: #fff; font-weight: 800; font-size: 15px;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.bvc-logo-float{
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--c-surface);
  box-shadow: var(--sh-md);
  margin: -22px 0 0 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.bvc-logo-float img{ width: 100%; height: 100%; object-fit: cover; }
.bvc-logo-init{ font-weight: 800; font-size: 16px; color: var(--c-ink-soft); }
.bvc-meta{ padding: 10px 14px 14px; }
.bvc-meta-row{ display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-muted); font-weight: 600; }
.dot-sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--c-muted-2); }

@keyframes rise-in{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   8. CATÉGORIES — grille icône + label
--------------------------------------------------------------------- */
.categories-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 10px;
  padding: 2px;
}
.category-grid-item{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  animation: pop-in var(--t-med) var(--ease-spring) both;
  animation-delay: var(--delay);
}
.category-grid-icon-circle{
  width: 58px; height: 58px;
  border-radius: 20px;
  background: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.category-grid-item:hover .category-grid-icon-circle{ box-shadow: var(--sh-md); transform: translateY(-2px); }
.category-grid-item:active .category-grid-icon-circle{ transform: scale(0.92); }
.category-grid-label{
  font-size: 11.5px; font-weight: 700; color: var(--c-ink-soft);
  text-align: center; line-height: 1.25;
  max-width: 68px;
}

/* ---------------------------------------------------------------------
   9. RAILS PRODUITS HORIZONTAUX (Home : Top, Nouveautés)
--------------------------------------------------------------------- */
.products-scroll{ display: flex; gap: 13px; overflow-x: auto; padding: 4px 2px 10px; }

.product-rail-card{
  --delay: 0s;
  flex-shrink: 0;
  width: 184px;
  background: var(--c-surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  cursor: pointer;
  animation: rise-in var(--t-med) var(--ease-out) both;
  animation-delay: var(--delay);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.product-rail-card:hover{ transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.product-rail-card:active{ transform: scale(0.98); }

.rail-card-img{ position: relative; height: 170px; background: var(--c-bg-alt); overflow: hidden; }
.rail-card-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.product-rail-card:hover .rail-card-img img{ transform: scale(1.08); }

.card-badge{
  position: absolute; top: 8px; left: 8px;
  font-size: 9.5px; font-weight: 800;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
}
.badge-out{ background: rgba(255,255,255,0.92); color: var(--c-danger); }
.badge-alaune{ background: linear-gradient(135deg, #FFE9A8, var(--c-accent)); color: var(--c-accent-ink); }
.badge-top{ background: rgba(20,19,26,0.85); color: #fff; }
.badge-new{ background: var(--c-info-soft); color: var(--c-info); }

.rail-card-body{ padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 3px; }
.rail-card-name{
  font-size: 13px; font-weight: 700; color: var(--c-ink);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.rail-card-boutique{
  font-size: 11px; font-weight: 600; color: var(--c-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-card-footer{ display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.rail-card-price{ font-size: 13.5px; font-weight: 800; color: var(--c-ink); letter-spacing: -0.01em; }

.card-add-btn{
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-ink);
  color: #fff;
  border-radius: 50%;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast);
  flex-shrink: 0;
}
.card-add-btn:hover{ background: var(--c-accent-deep); }
.card-add-btn:active{ transform: scale(0.82); }
.card-add-btn.disabled{ background: var(--c-muted-2); pointer-events: none; }
.card-add-btn.added-flash{ background: var(--c-success); }
.card-in-cart-badge{
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-success-soft);
  color: var(--c-success);
  border-radius: 50%;
  font-weight: 800; font-size: 13px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   10. BANDEAUX PUB
--------------------------------------------------------------------- */
.ad-strip{
  margin: 22px 0;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, #1B1A22 0%, #14131A 60%, #26232F 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  box-shadow: var(--sh-md);
  position: relative;
  overflow: hidden;
}
.ad-strip::before{
  content: '';
  position: absolute; top: -40%; right: -10%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,198,51,0.25), transparent 70%);
}
.ad-strip-text{ position: relative; z-index: 1; }
.ad-strip-tag{ font-size: 10.5px; font-weight: 700; color: var(--c-accent); text-transform: uppercase; letter-spacing: 0.05em; }
.ad-strip-text p{ color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4; margin-top: 5px; max-width: 220px; }
.ad-strip-btn{
  position: relative; z-index: 1;
  flex-shrink: 0;
  padding: 11px 16px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: 12.5px; font-weight: 800;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-accent);
  transition: transform var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.ad-strip-btn:hover{ transform: translateY(-2px); }
.ad-strip-btn:active{ transform: scale(0.94); }

.ad-banner-large{
  margin: 26px 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(150deg, #FFF4DC 0%, #FFE1A0 45%, var(--c-accent) 100%);
  box-shadow: var(--sh-lg);
  position: relative;
}
.ad-banner-large::after{
  content: '';
  position: absolute; bottom: -30%; left: -10%;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 70%);
}
.ad-banner-large-inner{ position: relative; z-index: 1; padding: 30px 26px 32px; }
.ad-banner-large .ad-strip-tag{ color: var(--c-accent-ink); opacity: 0.65; }
.ad-banner-large-inner h3{
  font-size: 22px; line-height: 1.22; margin-top: 8px;
  color: var(--c-accent-ink);
}
.ad-banner-large-inner p{
  font-size: 13.5px; color: var(--c-accent-ink); opacity: 0.75;
  margin-top: 8px; max-width: 280px; line-height: 1.45; font-weight: 500;
}
.btn-primary-yellow{
  margin-top: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  background: var(--c-ink);
  color: #fff;
  font-size: 14px; font-weight: 800;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn-primary-yellow:hover{ transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn-primary-yellow:active{ transform: scale(0.97); }

/* ---------------------------------------------------------------------
   11. COMMENT ÇA MARCHE
--------------------------------------------------------------------- */
.how-section{ padding: 30px 0 10px; }
.how-steps{ display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.how-step{
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.how-num{
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.how-step p{ font-size: 13.5px; font-weight: 600; color: var(--c-ink-soft); line-height: 1.45; }

/* ---------------------------------------------------------------------
   12. VUE PRODUITS — liste 1 colonne, grandes cartes
--------------------------------------------------------------------- */
.products-list{ display: flex; flex-direction: column; gap: 16px; padding: 0 2px; }

.product-list-card{
  background: var(--c-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.product-list-card:hover{ transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.product-list-card:active{ transform: scale(0.99); }
.product-list-card.card-stagger-in{ animation: rise-in var(--t-med) var(--ease-out) both; animation-delay: var(--delay); }

.list-card-img{ position: relative; height: 190px; background: var(--c-bg-alt); overflow: hidden; }
.list-card-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.product-list-card:hover .list-card-img img{ transform: scale(1.06); }

.list-card-boutique-chip{
  position: absolute; left: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  font-size: 11.5px; font-weight: 700; color: var(--c-ink-soft);
  max-width: calc(100% - 20px);
}
.list-card-boutique-chip span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-boutique-logo{ width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.card-boutique-logo img{ width: 100%; height: 100%; object-fit: cover; }
.card-boutique-init{
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: var(--c-ink-soft);
  flex-shrink: 0;
}
.card-boutique-vip{
  font-size: 8.5px; font-weight: 800;
  color: var(--c-accent-deep);
  background: var(--c-accent-soft);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

.list-card-body{ padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.list-card-name{ font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
.list-card-desc{
  font-size: 12.5px; color: var(--c-muted); line-height: 1.5; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px;
}
.list-card-footer{ display: flex; align-items: center; justify-content: space-between; margin-top: 2px; gap: 10px; }
.list-card-price{ font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }

.btn-add-list{
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: var(--c-ink);
  color: #fff;
  font-size: 12.5px; font-weight: 700;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  transition: all var(--t-fast) var(--ease-out);
  flex-shrink: 0;
  white-space: nowrap;
}
.btn-add-list:hover{ background: var(--c-accent-deep); color: var(--c-accent-ink); box-shadow: var(--sh-md); }
.btn-add-list:active{ transform: scale(0.94); }
.btn-add-list--done{ background: var(--c-success-soft); color: var(--c-success); box-shadow: none; }
.btn-add-list--disabled{ background: var(--c-bg-alt); color: var(--c-muted); box-shadow: none; }

.load-more-wrap{ display: flex; justify-content: center; padding: 20px 0 10px; }
.btn-secondary-pill{
  padding: 13px 26px;
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: 13.5px; font-weight: 700;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  transition: all var(--t-fast) var(--ease-out);
}
.btn-secondary-pill:hover{ box-shadow: var(--sh-md); transform: translateY(-2px); }
.btn-secondary-pill:active{ transform: scale(0.96); }

.no-results{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 60px 30px;
  color: var(--c-muted);
}
.no-results-icon{ font-size: 34px; margin-bottom: 12px; opacity: 0.5; }
.no-results p{ font-size: 15px; font-weight: 700; color: var(--c-ink-soft); }
.no-results span{ font-size: 12.5px; margin-top: 4px; }

/* Skeleton loading */
.skeleton{
  position: relative;
  overflow: hidden;
  background: var(--c-bg-alt);
  min-height: 200px;
  box-shadow: none;
}
.skeleton::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer{
  from{ transform: translateX(-100%); }
  to{ transform: translateX(100%); }
}

/* ---------------------------------------------------------------------
   13. VUE SUIVI
--------------------------------------------------------------------- */
.track-tabs{
  display: flex; gap: 6px;
  background: var(--c-bg-alt);
  padding: 4px;
  border-radius: var(--r-pill);
  margin: 18px 2px 20px;
}
.track-tab{
  flex: 1;
  padding: 11px 0;
  font-size: 13px; font-weight: 700;
  color: var(--c-muted);
  border-radius: var(--r-pill);
  transition: all var(--t-med) var(--ease-out);
}
.track-tab.active{ background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-sm); }

.form-group{ margin-bottom: 16px; padding: 0 2px; }
.form-group label{
  display: block;
  font-size: 12.5px; font-weight: 700; color: var(--c-ink-soft);
  margin-bottom: 8px;
}
.form-group input, .form-group textarea{
  width: 100%;
  padding: 14px 16px;
  background: var(--c-surface);
  border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500;
  color: var(--c-ink);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t-med) var(--ease-out);
}
.form-group input::placeholder, .form-group textarea::placeholder{ color: var(--c-muted-2); }
.form-group input:focus, .form-group textarea:focus{
  box-shadow: var(--sh-sm), 0 0 0 3px var(--c-accent-soft);
}
.form-group textarea{ resize: none; }

.btn-checkout{ width: 100%; margin-top: 4px; }

.track-empty-hint{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 50px 30px;
  color: var(--c-muted);
}
.empty-icon{
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.track-empty-hint h3{ font-size: 16px; margin-bottom: 6px; }
.track-empty-hint p{ font-size: 13px; line-height: 1.5; max-width: 260px; }

.text-btn{
  font-size: 13.5px; font-weight: 700; color: var(--c-ink-soft);
  padding: 10px 2px; margin-top: 4px;
  transition: opacity var(--t-fast);
}
.text-btn:active{ opacity: 0.5; }

.mkt-alert{
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600;
  margin: 4px 2px 0;
}
.mkt-alert--error{ background: var(--c-danger-soft); color: var(--c-danger); }
.mkt-alert--info{ background: var(--c-info-soft); color: var(--c-info); }
.mkt-alert--warning{ background: var(--c-warning-soft); color: var(--c-warning); }

/* Résultat de suivi */
.trc-order-block{
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 22px;
  margin: 2px 2px 18px;
}
.trc-header{ margin-bottom: 20px; }
.trc-ref-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trc-ref{ font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.trc-status-badge{ font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.trc-boutique-row{ display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--c-ink-soft); }
.trc-boutique-lieu{ color: var(--c-muted); font-weight: 500; }
.trc-date{ display: block; margin-top: 6px; font-size: 12px; color: var(--c-muted); font-weight: 600; }

.trc-timeline-label, .trc-products-label{ font-size: 12px; font-weight: 800; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; }
.trc-steps{ display: flex; flex-direction: column; }
.trc-step{ display: flex; gap: 14px; }
.trc-step-left{ display: flex; flex-direction: column; align-items: center; }
.trc-step-dot{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-bg-alt);
  color: var(--c-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
  transition: all var(--t-med) var(--ease-out);
}
.trc-step.done .trc-step-dot{ background: var(--c-success); color: #fff; }
.trc-step.current .trc-step-dot{ background: var(--c-accent); color: var(--c-accent-ink); box-shadow: 0 0 0 5px var(--c-accent-soft); }
.trc-step-line{ width: 2px; flex: 1; min-height: 28px; background: var(--c-bg-alt); margin: 2px 0; }
.trc-step.done .trc-step-line{ background: var(--c-success); opacity: 0.35; }
.trc-step-content{ padding-bottom: 22px; flex: 1; }
.trc-step-content strong{ display: block; font-size: 13.5px; font-weight: 700; color: var(--c-ink); }
.trc-step-content small{ font-size: 11.5px; color: var(--c-muted); font-weight: 600; }
.trc-pending{ font-style: italic; opacity: 0.7; }
.trc-step-content p{ font-size: 12px; color: var(--c-ink-soft); margin-top: 5px; line-height: 1.45; }

.trc-client-livraison{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.trc-info-block{ background: var(--c-bg-alt); border-radius: var(--r-sm); padding: 14px; }
.trc-info-block-label{ font-size: 10.5px; font-weight: 800; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.trc-info-block p{ font-size: 12.5px; font-weight: 700; color: var(--c-ink); }
.trc-info-block small{ display: block; font-size: 11px; color: var(--c-muted); margin-top: 2px; font-weight: 500; }
.trc-block-line{ margin-top: 4px !important; }

.trc-products{ margin-top: 20px; }
.trc-product-item{ display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.trc-product-img{ width: 46px; height: 46px; border-radius: var(--r-xs); overflow: hidden; background: var(--c-bg-alt); flex-shrink: 0; }
.trc-product-img img{ width: 100%; height: 100%; object-fit: cover; }
.trc-product-info{ flex: 1; min-width: 0; }
.trc-product-info strong{ display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trc-product-info small{ font-size: 11px; color: var(--c-muted); font-weight: 600; }
.trc-product-price{ font-size: 13px; font-weight: 800; flex-shrink: 0; }

.trc-montants{ margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--c-hairline); }
.trc-montant-row{ display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--c-ink-soft); font-weight: 600; }
.trc-montant-row.total{ font-size: 15px; font-weight: 800; color: var(--c-ink); margin-top: 4px; }

.trc-message{
  margin-top: 16px; padding: 13px 15px;
  background: var(--c-info-soft); color: var(--c-info);
  border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600; line-height: 1.5;
}

.btn-whatsapp{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px;
  padding: 13px;
  background: #E9FBEF;
  color: #128C4A;
  font-size: 13.5px; font-weight: 700;
  border-radius: var(--r-sm);
  transition: all var(--t-fast) var(--ease-out);
}
.btn-whatsapp:hover{ background: #D8F7E4; }
.btn-whatsapp:active{ transform: scale(0.97); }

/* ---------------------------------------------------------------------
   14. VUE PANIER
--------------------------------------------------------------------- */
.cart-scroll{ padding-top: 14px; position: relative; }
.cart-boutique-info{ padding: 0 2px; }
.cart-boutique-tag{
  display: flex; align-items: center; gap: 9px;
  padding: 10px 6px 16px;
}
.cart-boutique-tag img{ width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: var(--sh-sm); }
.cart-boutique-tag span{ font-size: 14.5px; font-weight: 800; }

.cart-empty-state{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 70px 30px 30px;
  color: var(--c-muted);
}
.cart-empty-state h3{ font-size: 17px; margin-bottom: 6px; }
.cart-empty-state p{ font-size: 13px; margin-bottom: 22px; }

.cart-item{
  display: flex; align-items: center; gap: 13px;
  padding: 14px;
  margin: 0 2px 12px;
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), max-height var(--t-med) var(--ease-out);
}
.cart-item.removing{ opacity: 0; transform: translateX(-30px) scale(0.9); }
.cart-item-image{ width: 62px; height: 62px; border-radius: var(--r-xs); overflow: hidden; background: var(--c-bg-alt); flex-shrink: 0; }
.cart-item-image img{ width: 100%; height: 100%; object-fit: cover; }
.cart-item-info{ flex: 1; min-width: 0; }
.cart-item-name{
  font-size: 13.5px; font-weight: 700; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.cart-item-bottom{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.cart-item-price{ font-size: 13.5px; font-weight: 800; }

.cart-qty-selector{ display: flex; align-items: center; gap: 10px; background: var(--c-bg-alt); border-radius: var(--r-pill); padding: 5px 6px; }
.cart-qty-btn{
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface);
  border-radius: 50%;
  font-weight: 800; font-size: 14px; line-height: 1;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-fast) var(--ease-out);
}
.cart-qty-btn:active{ transform: scale(0.82); }
.cart-qty-num{ font-size: 13px; font-weight: 800; min-width: 14px; text-align: center; }

.cart-item-remove{
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
  border-radius: 50%;
  transition: all var(--t-fast) var(--ease-out);
  flex-shrink: 0;
}
.cart-item-remove:hover{ background: var(--c-danger-soft); color: var(--c-danger); }
.cart-item-remove:active{ transform: scale(0.85); }

.cart-footer-wrap{
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  background: rgba(250,250,249,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 -1px 0 var(--c-hairline), 0 -12px 30px rgba(20,19,26,0.06);
  flex-shrink: 0;
}
.bill-row{ display: flex; align-items: center; justify-content: space-between; }
.bill-total{ margin-bottom: 14px; }
.bill-total span:first-child{ font-size: 14px; font-weight: 700; color: var(--c-ink-soft); }
.bill-total span:last-child{ font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }

/* La vue Panier doit avoir un layout en colonne pour que le footer colle bien sous la liste scrollable */
#viewPanier{ display: flex; flex-direction: column; }
#viewPanier .cart-scroll{ flex: 1; min-height: 0; }

/* ---------------------------------------------------------------------
   15. BOTTOM NAV — FLOTTANTE, CENTRÉE (mobile) / SIDEBAR FLOTTANTE (desktop)
--------------------------------------------------------------------- */

/* --- Mobile / par défaut : pilule flottante centrée en bas --- */
.bottom-nav{
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-gap-bottom) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 150;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;

  height: var(--nav-h);
  padding: 6px 10px;
  width: max-content;
  max-width: calc(100vw - 24px);

  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-nav);
}

.nav-item{
  position: relative;
  z-index: 2;
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  padding: 0 16px;
  height: 100%;
  color: var(--c-muted);
  border-radius: var(--r-pill);
  transition: color var(--t-med) var(--ease-out);
  white-space: nowrap;
}
.nav-item.active{ color: var(--c-ink); }
.nav-icon-wrap{ position: relative; display: flex; transition: transform var(--t-med) var(--ease-spring); }
.nav-item:active .nav-icon-wrap{ transform: scale(0.84); }
.nav-item.active .nav-icon{ transform: translateY(0); }
.nav-icon{ transition: transform var(--t-med) var(--ease-spring); }
.nav-label{
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--t-med) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.nav-item.active .nav-label{ max-width: 90px; opacity: 1; margin-left: 1px; }

.bnav-badge{
  position: absolute; top: -6px; right: -9px;
  background: var(--c-danger);
  color: #fff;
  font-size: 9.5px; font-weight: 800;
  min-width: 16px; height: 16px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--c-surface);
}

.nav-active-pill{
  position: absolute;
  top: 6px;
  left: 0;
  height: calc(100% - 12px);
  background: var(--c-ink);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  transition: transform var(--t-med) var(--ease-spring), width var(--t-med) var(--ease-spring);
  z-index: 1;
}
/* Sur la pilule active foncée, l'item par-dessus passe en clair */
.nav-item.active{ color: #fff; }

/* Puisque la nav flotte par-dessus le contenu, on s'assure que rien ne passe dessus */
.main-content{ z-index: 1; }

/* ---------------------------------------------------------------------
   15bis. SIDEBAR FLOTTANTE — DESKTOP (≥900px)
--------------------------------------------------------------------- */
@media (min-width: 900px){

  /* On redonne de la place à gauche pour la sidebar flottante à l'intérieur du shell */
  .app-shell{
    flex-direction: row;
  }
  .app-shell > .topbar,
  .app-shell > .main-content{
    /* Décale tout le contenu principal pour laisser la place à la sidebar */
    margin-left: calc(var(--nav-side-w) + var(--nav-side-gap) * 2);
    width: calc(100% - (var(--nav-side-w) + var(--nav-side-gap) * 2));
  }
  .app-shell > .topbar{
    position: sticky;
  }
  /* topbar + main-content doivent former une colonne */
  .app-shell{
    display: block; /* on annule le row : topbar/main restent en flux normal, seule la nav est fixed à part */
  }
  .app-shell > .topbar,
  .app-shell > .main-content{
    margin-left: calc(var(--nav-side-w) + var(--nav-side-gap) * 2);
    width: calc(100% - (var(--nav-side-w) + var(--nav-side-gap) * 2));
  }

  .bottom-nav{
    left: var(--nav-side-gap);
    left: 95px;
    bottom: 50%;
    transform: translateY(50%);
    top: auto;

    width: var(--nav-side-w);
    height: auto;
    max-width: none;

    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: var(--r-xl);
  }

  .nav-item{
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding: 12px 4px;
    justify-content: center;
  }
  .nav-label{
    max-width: none;
    opacity: 1;
    font-size: 10px;
    overflow: visible;
  }
  .nav-item.active .nav-label{ margin-left: 0; }

  /*.nav-active-pill{
    top: 0;
    left: 4px;
    width: calc(100% - 8px) !important;
    height: var(--nav-item-h, 0px);
  }*/


  .nav-active-pill{
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: 0; /* remplacé dynamiquement par le JS */
  }




}

/* ---------------------------------------------------------------------
   16. BACKDROP GLOBAL
--------------------------------------------------------------------- */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(15,14,20,0.44);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 90;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.modal-backdrop.open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--t-med) var(--ease-out); }
.no-scroll{ overflow: hidden !important; }

/* ---------------------------------------------------------------------
   17. CATEGORY OVERLAY
--------------------------------------------------------------------- */
.category-overlay{
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto;
  max-height: 86vh;
  background: var(--c-bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-xl);
  z-index: 95;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.category-overlay.open{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}
.category-overlay-header{
  display: flex; align-items: center; gap: 12px;
  padding: 20px var(--gutter) 16px;
  box-shadow: 0 1px 0 var(--c-hairline);
  flex-shrink: 0;
}
.icon-circle-title{
  width: 42px; height: 42px;
  border-radius: 14px;
  background: var(--c-accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.category-overlay-header h2{ font-size: 16.5px; }
.cat-count-sub{ font-size: 12px; color: var(--c-muted); font-weight: 600; }
.category-overlay-body{ flex: 1; overflow-y: auto; padding: 16px var(--gutter) 30px; }
.category-overlay-list{ display: flex; flex-direction: column; gap: 16px; }

/* ---------------------------------------------------------------------
   18. STORY VIEWER
--------------------------------------------------------------------- */
.story-viewer{
  position: fixed; inset: 0;
  z-index: 200;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
  display: flex; align-items: center; justify-content: center;
}
.story-viewer.open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--t-med) var(--ease-out); }
.sv-backdrop{ position: absolute; inset: 0; background: #0A0A0D; }
.sv-container{
  position: relative;
  width: 100%; max-width: 480px; height: 100%;
  overflow: hidden;
}
.sv-progress-bar{ position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 4px; padding: 12px 12px 0; z-index: 3; }
.sv-progress-seg{ flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.28); overflow: hidden; }
.sv-progress-fill{ height: 100%; width: 0%; background: #fff; border-radius: 2px; }
.sv-header{ position: absolute; top: 26px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; z-index: 3; }
.sv-boutique{ display: flex; align-items: center; gap: 7px; color: #fff; font-size: 13.5px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.sv-boutique-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.sv-img{ width: 100%; height: 100%; object-fit: contain; background: #0A0A0D; opacity: 1; transition: opacity var(--t-med) var(--ease-out); }
.sv-img.fading{ opacity: 0; }
.sv-footer{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 18px calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  z-index: 3;
}
.sv-info h3{ color: #fff; font-size: 15.5px; margin-bottom: 4px; }
.sv-info span{ color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 700; }
.sv-voir-plus{ flex-shrink: 0; padding: 11px 16px; font-size: 12.5px; }
.sv-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: background var(--t-fast);
}
.sv-arrow:hover{ background: rgba(255,255,255,0.22); }
.sv-arrow-prev{ left: 12px; }
.sv-arrow-next{ right: 12px; }
.sv-tap-zone{ position: absolute; top: 0; bottom: 0; width: 34%; z-index: 2; }
.sv-tap-zone--prev{ left: 0; }
.sv-tap-zone--next{ right: 0; }

@media (min-width: 900px){
  .sv-arrow{ display: flex; }
}
@media (max-width: 899px){
  .sv-arrow{ display: none; }
}

/* ---------------------------------------------------------------------
   19. PRODUCT DRAWER
--------------------------------------------------------------------- */
.product-drawer{
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto;
  max-height: 92vh;
  background: var(--c-bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-xl);
  z-index: 95;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.product-drawer.open{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}
.drawer-scroll{ flex: 1; overflow-y: auto; }

.drawer-hero{ position: relative; height: 300px; background: var(--c-bg-alt); }
.drawer-main-img{ width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-med) var(--ease-out); }
.drawer-hero-fade{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 22%); }
.drawer-badge{
  position: absolute; top: 16px; left: 16px;
  font-size: 11px; font-weight: 800; padding: 6px 12px;
  border-radius: var(--r-pill); box-shadow: var(--sh-sm); backdrop-filter: blur(6px);
}
.detail-nav-floating{ position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }

.drawer-thumbs{ display: flex; gap: 8px; padding: 12px var(--gutter); overflow-x: auto; }
.drawer-thumb{
  flex-shrink: 0; width: 52px; height: 52px;
  border-radius: var(--r-xs); overflow: hidden;
  box-shadow: var(--sh-xs); opacity: 0.55;
  transition: all var(--t-fast) var(--ease-out);
  cursor: pointer;
}
.drawer-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.drawer-thumb.active{ opacity: 1; box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3.5px var(--c-ink); }

.drawer-card{ padding: 6px var(--gutter) 0; }
.drawer-boutique-chip{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 6px;
  background: var(--c-surface);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  font-size: 12.5px; font-weight: 700; color: var(--c-ink-soft);
  margin-bottom: 14px;
}
.drawer-boutique-chip img{ width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.drawer-boutique-init{
  width: 22px; height: 22px; border-radius: 50%; background: var(--c-bg-alt);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800;
}
.drawer-vip-tag{ background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-pill); }

.drawer-name{ font-size: 23px; line-height: 1.25; margin-bottom: 8px; }
.drawer-desc{ font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.6; font-weight: 500; }

.drawer-meta{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.meta-chip{ font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: var(--r-pill); }
.meta-chip--green{ background: var(--c-success-soft); color: var(--c-success); }
.meta-chip--red{ background: var(--c-danger-soft); color: var(--c-danger); }
.meta-chip--gray{ background: var(--c-bg-alt); color: var(--c-muted); }

.quantity-row{ display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.quantity-label{ font-size: 14px; font-weight: 700; color: var(--c-ink); }
.quantity-selector{ display: flex; align-items: center; gap: 16px; background: var(--c-surface); box-shadow: var(--sh-sm); border-radius: var(--r-pill); padding: 8px 10px; }
.qty-btn{
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg-alt);
  border-radius: 50%;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.qty-btn:active{ transform: scale(0.85); }
.qty-btn-add{ background: var(--c-ink); color: #fff; }
.qty-btn-add:hover{ background: var(--c-accent-deep); color: var(--c-accent-ink); }
.qty-value{ font-size: 15px; font-weight: 800; min-width: 16px; text-align: center; }

.drawer-payments-wrap, .drawer-similaires-wrap{ margin-top: 26px; }
.drawer-section-label{ display: block; font-size: 12px; font-weight: 800; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.drawer-payments-list{ display: flex; flex-wrap: wrap; gap: 9px; }
.payment-chip{
  font-size: 12px; font-weight: 700; color: var(--c-ink-soft);
  background: var(--c-surface); box-shadow: var(--sh-xs);
  padding: 8px 13px; border-radius: var(--r-pill);
}

.drawer-similaires-row{ display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.sim-card{ flex-shrink: 0; width: 118px; cursor: pointer; transition: transform var(--t-fast) var(--ease-out); }
.sim-card:hover{ transform: translateY(-3px); }
.sim-img{ width: 118px; height: 100px; border-radius: var(--r-sm); overflow: hidden; background: var(--c-bg-alt); box-shadow: var(--sh-sm); }
.sim-img img{ width: 100%; height: 100%; object-fit: cover; }
.sim-name{ font-size: 12px; font-weight: 700; margin-top: 8px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sim-price{ font-size: 12.5px; font-weight: 800; margin-top: 3px; }

.drawer-footer{
  display: flex; align-items: center; gap: 14px;
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  background: rgba(250,250,249,0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 -1px 0 var(--c-hairline), 0 -12px 30px rgba(20,19,26,0.06);
  flex-shrink: 0;
}
.drawer-price-block{ display: flex; flex-direction: column; }
.price-label{ font-size: 10.5px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.price-value{ font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.btn-add-cart{
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px;
  font-size: 14px;
}
.btn-add-cart.disabled{ opacity: 0.4; pointer-events: none; }
.btn-add-cart.added{ background: var(--c-success); box-shadow: 0 10px 24px rgba(29,191,115,0.3); }

/* ---------------------------------------------------------------------
   20. BOUTIQUE WORKSPACE
--------------------------------------------------------------------- */
.boutique-workspace{
  position: fixed; inset: 0;
  max-width: 560px; margin: 0 auto;
  background: var(--c-bg);
  z-index: 95;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.boutique-workspace.open{
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}
.bws-cover{ position: relative; height: 190px; background: linear-gradient(135deg, #2E2B3D, #14131A); flex-shrink: 0; overflow: hidden; }
.bws-cover img{ width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.bws-cover-placeholder{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 800; color: rgba(255,255,255,0.3); }
.drawer-panel-header{
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px;
  z-index: 2;
}
.bws-header{ position: absolute; }
.bws-meta{ display: flex; align-items: flex-end; gap: 14px; padding: 0 var(--gutter); margin-top: -34px; position: relative; z-index: 2; }
.bws-logo{ width: 76px; height: 76px; border-radius: 20px; overflow: hidden; box-shadow: var(--sh-lg); background: var(--c-surface); flex-shrink: 0; }
.bws-logo img{ width: 100%; height: 100%; object-fit: cover; }
.bws-logo-init{ width: 76px; height: 76px; border-radius: 20px; background: var(--c-surface); box-shadow: var(--sh-lg); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: var(--c-ink-soft); flex-shrink: 0; }
.bws-info{ padding-bottom: 6px; min-width: 0; }
.bws-name{ font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bws-vip-badge{ background: var(--c-accent); color: var(--c-accent-ink); font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); }
.bws-detail{ display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; font-size: 12px; color: var(--c-muted); font-weight: 600; }
.boutique-workspace .scroll-content{ margin-top: 20px; flex: 1; }
.boutique-workspace .section-header{ padding: 0 2px; }
.bws-list{ padding-top: 4px; }

/* ---------------------------------------------------------------------
   21. CHECKOUT MODAL
--------------------------------------------------------------------- */
.checkout-overlay{
  position: fixed; inset: 0; background: rgba(15,14,20,0.44);
  backdrop-filter: blur(3px); z-index: 96;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.checkout-overlay.open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--t-med) var(--ease-out); }
.checkout-modal{
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto;
  max-height: 90vh;
  background: var(--c-bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-xl);
  z-index: 97;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.checkout-modal.open{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}
.page-title{ font-size: 17px; }
.checkout-modal .drawer-panel-header{ position: relative; padding: 20px var(--gutter) 12px; box-shadow: 0 1px 0 var(--c-hairline); }
.checkout-scroll{ flex: 1; padding-top: 18px; }

.checkout-recap{ background: var(--c-surface); border-radius: var(--r-md); padding: 16px; box-shadow: var(--sh-sm); margin: 0 2px 20px; }
.recap-boutique-name{ display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.recap-boutique-name img{ width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.recap-item{ display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12.5px; }
.recap-item img{ width: 38px; height: 38px; border-radius: var(--r-xs); object-fit: cover; background: var(--c-bg-alt); flex-shrink: 0; }
.recap-item span{ flex: 1; color: var(--c-ink-soft); font-weight: 600; }
.recap-item strong{ font-weight: 800; }
.recap-total{ margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--c-hairline); font-size: 13px; color: var(--c-ink-soft); font-weight: 600; line-height: 1.6; }
.recap-total strong{ font-weight: 800; color: var(--c-ink); }

.checkout-zones-section{ padding: 0 2px; margin-bottom: 22px; }
.checkout-zones-list{ display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.zone-item{
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  background: var(--c-surface);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.zone-item:hover{ box-shadow: var(--sh-sm); }
.zone-item.selected{ box-shadow: 0 0 0 2px var(--c-ink), var(--sh-sm); }
.zone-radio{
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--c-muted-2);
  flex-shrink: 0;
  transition: all var(--t-fast) var(--ease-out);
  position: relative;
}
.zone-item.selected .zone-radio{ box-shadow: inset 0 0 0 5.5px var(--c-ink); }
.zone-item div:nth-child(2){ flex: 1; }
.zone-item strong{ font-size: 13px; font-weight: 700; }
.zone-item small{ font-size: 11.5px; color: var(--c-muted); }
.zone-price{ font-size: 13px; font-weight: 800; flex-shrink: 0; }

.checkout-form{ padding: 0 2px; }

.checkout-success{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 20px; }
.checkout-success-icon{
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--c-accent);
  box-shadow: var(--sh-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  animation: pop-in var(--t-slow) var(--ease-spring) both;
}
.checkout-success p{ font-size: 15px; font-weight: 600; color: var(--c-ink-soft); line-height: 1.55; max-width: 300px; }
.checkout-success strong{ color: var(--c-ink); font-weight: 800; }

.ref-item{
  margin-top: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--c-surface); box-shadow: var(--sh-sm);
  border-radius: var(--r-md);
  padding: 18px 26px;
}
.ref-item span{ font-size: 11px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ref-num{ font-size: 18px; font-weight: 800; letter-spacing: 0.01em; }
.copy-ref-btn{
  margin-top: 6px;
  padding: 8px 18px;
  background: var(--c-bg-alt);
  color: var(--c-ink-soft);
  font-size: 12px; font-weight: 700;
  border-radius: var(--r-pill);
  transition: all var(--t-fast) var(--ease-out);
}
.copy-ref-btn:active{ transform: scale(0.94); }
.copy-ref-btn.copied{ background: var(--c-success-soft); color: var(--c-success); }

.checkout-footer{ display: flex; gap: 12px; flex-shrink: 0; }
.checkout-footer .btn-secondary-pill{ flex: 1; }
.checkout-footer .btn-checkout{ flex: 1.4; }

/* ---------------------------------------------------------------------
   22. SEARCH OVERLAY
--------------------------------------------------------------------- */
.search-overlay{
  position: fixed; inset: 0;
  max-width: 560px; margin: 0 auto;
  background: var(--c-bg);
  z-index: 98;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
  display: flex; flex-direction: column;
}
.search-overlay.open{
  opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.search-overlay-header{
  display: flex; align-items: center; gap: 12px;
  padding: 16px var(--gutter);
  box-shadow: 0 1px 0 var(--c-hairline);
  flex-shrink: 0;
}
.search-bar-active{ flex: 1; margin: 0; }
.search-overlay-body{ flex: 1; overflow-y: auto; padding: 20px var(--gutter) 40px; }

.trending-chips{ display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 26px; }
.trending-chip{
  padding: 9px 15px;
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  font-size: 12.5px; font-weight: 700; color: var(--c-ink-soft);
  border-radius: var(--r-pill);
  transition: all var(--t-fast) var(--ease-out);
}
.trending-chip:hover{ box-shadow: var(--sh-md); }
.trending-chip:active{ transform: scale(0.94); }

.search-overlay-results{ display: flex; flex-direction: column; gap: 4px; }
.search-result-item{
  display: flex; align-items: center; gap: 13px;
  padding: 11px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast);
}
.search-result-item:hover{ background: var(--c-surface); box-shadow: var(--sh-xs); }
.search-result-item__img{ position: relative; width: 52px; height: 52px; border-radius: var(--r-xs); overflow: hidden; background: var(--c-bg-alt); flex-shrink: 0; }
.search-result-item__img img{ width: 100%; height: 100%; object-fit: cover; }
.sri-vip{ position: absolute; top: 3px; left: 3px; background: var(--c-accent); color: var(--c-accent-ink); font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 5px; }
.search-result-item__info{ flex: 1; min-width: 0; }
.search-result-item__info strong{ display: block; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-item__info span{ font-size: 11.5px; color: var(--c-muted); font-weight: 600; }
.search-result-item__price{ font-size: 13px; font-weight: 800; flex-shrink: 0; }
.search-no-result{ text-align: center; color: var(--c-muted); font-size: 13.5px; font-weight: 600; padding: 40px 0; }

/* ---------------------------------------------------------------------
   23. SELL MODAL
--------------------------------------------------------------------- */
.sell-overlay{
  position: fixed; inset: 0; background: rgba(15,14,20,0.44);
  backdrop-filter: blur(3px); z-index: 96;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.sell-overlay.open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--t-med) var(--ease-out); }
.sell-modal{
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto;
  max-height: 88vh;
  background: var(--c-bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-xl);
  z-index: 97;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sell-modal.open{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}
.sell-modal .drawer-panel-header{ position: relative; padding: 20px var(--gutter) 12px; box-shadow: 0 1px 0 var(--c-hairline); }
.sell-modal .scroll-content{ padding: 10px var(--gutter) 30px; }

.sell-hero{ text-align: center; padding: 20px 10px 10px; }
.sell-hero-icon{
  width: 68px; height: 68px; margin: 0 auto 18px;
  border-radius: 22px;
  background: linear-gradient(145deg, #FFDE7A, var(--c-accent));
  box-shadow: var(--sh-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.sell-hero h2{ font-size: 20px; margin-bottom: 10px; }
.sell-hero p{ font-size: 13.5px; color: var(--c-ink-soft); line-height: 1.6; max-width: 320px; margin: 0 auto; font-weight: 500; }
.sell-modal .how-steps{ margin-top: 26px; }

/* ---------------------------------------------------------------------
   24. TOAST
--------------------------------------------------------------------- */
.toast-container{
  position: fixed;
  bottom: calc(var(--nav-h) + var(--nav-gap-bottom) + 20px);
  left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 300;
  pointer-events: none;
  padding: 0 20px;
}
.mkt-toast{
  padding: 13px 22px;
  background: rgba(20,19,26,0.94);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 13px; font-weight: 700;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transition: all var(--t-med) var(--ease-spring);
  max-width: 90%;
  text-align: center;
}
.mkt-toast--success{ background: rgba(20,80,52,0.94); }
.mkt-toast--warning{ background: rgba(120,80,10,0.94); }
.mkt-toast.visible{ opacity: 1; transform: translateY(0) scale(1); }

/* ---------------------------------------------------------------------
   25. RESPONSIVE — TABLETTE & DESKTOP
--------------------------------------------------------------------- */
@media (min-width: 640px){
  .categories-grid{ grid-template-columns: repeat(6, 1fr); }
  .products-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .category-overlay-list{ display: grid; grid-template-columns: repeat(2, 1fr); }
  .bws-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .trc-client-livraison{ grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px){
  .app-shell{ max-width: 1180px; }

  /* Le shell doit rester le point de repère pour le positionnement fixed des modales */
  .story-viewer .sv-container{ max-width: 420px; height: 90vh; border-radius: var(--r-lg); box-shadow: var(--sh-xl); }
  .story-viewer{ background: rgba(0,0,0,0.5); }
  .sv-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,0.6); }
  .products-list{ grid-template-columns: repeat(2, 1fr); }
  .categories-grid{ grid-template-columns: repeat(6, 1fr); }
  .promo-banner-track{ height: 200px; }

  /* Les panels pleine largeur (drawer/checkout/sell/category) restent centrés
     dans la largeur du shell agrandi, pas dans toute la fenêtre */
  .product-drawer, .checkout-modal, .sell-modal, .category-overlay, .search-overlay,
  .boutique-workspace{
    max-width: 760px;
  }
}

@media (min-width: 1180px){
  /*.app-shell{ max-width: 920px; }*/
  .products-list{ grid-template-columns: repeat(3, 1fr); }
  .bws-list{ grid-template-columns: repeat(3, 1fr); }
  .product-drawer, .checkout-modal, .sell-modal, .category-overlay, .search-overlay,
  .boutique-workspace{
    max-width: 920px;
  }
}


.loc-pill--cta{
  background: var(--c-ink);
  color: #fff;
}
.loc-pill--cta svg{ color: var(--c-accent); }
.loc-pill--cta .loc-pill-text{ color: #fff; font-weight: 700; font-size: 12.5px; }



/* ---------------------------------------------------------------------
   15. BOTTOM NAV — auto-hide au scroll
--------------------------------------------------------------------- */
.bottom-nav{
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
}
.bottom-nav--hidden{
  transform: translateX(-50%) translateY(140%);
  opacity: 0;
  pointer-events: none;
}

/* Sur desktop la nav est une sidebar verticale : on masque différemment (fade + léger décalage horizontal) */
@media (min-width: 900px){
  .bottom-nav--hidden{
    transform: translateY(50%) translateX(-30px);
    opacity: 0;
  }
}


/* =====================================================================
   PLUS+ — Rubrique intégrée (présentation eShaup + session)
===================================================================== */

/* ── Bouton profil (remplace Suivi dans le header) ── */
.profile-btn{ position: relative; }
.profile-avatar-circle{ display:flex; align-items:center; justify-content:center; }
.profile-online-dot{
  position:absolute; top:6px; right:6px;
  width:9px; height:9px; border-radius:50%;
  background: var(--c-success);
  box-shadow: 0 0 0 2px var(--c-surface);
}

/* ── Bloc profil / session (haut de la vue Plus) ── */
.plus-account-card{
  margin: 16px 2px 8px;
}
.plus-account-guest{
  display:flex; align-items:center; gap:14px;
  padding:18px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.plus-account-guest-icon{
  width:48px; height:48px; border-radius:50%;
  background: var(--c-bg-alt);
  display:flex; align-items:center; justify-content:center;
  color: var(--c-muted); flex-shrink:0;
}
.plus-account-guest-text{ flex:1; min-width:0; }
.plus-account-guest-text h3{ font-size:15px; margin-bottom:3px; }
.plus-account-guest-text p{ font-size:12.5px; color:var(--c-muted); font-weight:600; }
.plus-account-guest-btn{
  flex-shrink:0;
  padding:11px 18px;
  background: var(--c-ink);
  color:#fff;
  font-size:13px; font-weight:700;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease-out);
}
.plus-account-guest-btn:active{ transform: scale(0.95); }

.plus-account-logged{
  display:flex; align-items:center; gap:14px;
  padding:18px;
  background: linear-gradient(135deg, #1B1A22 0%, #14131A 70%);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  color:#fff;
}
.plus-account-logged-avatar{
  width:48px; height:48px; border-radius:50%;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px;
  flex-shrink:0;
}
.plus-account-logged-text{ flex:1; min-width:0; }
.plus-account-logged-text h3{ font-size:15px; color:#fff; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plus-account-logged-text p{ font-size:12px; color:rgba(255,255,255,0.6); font-weight:600; }
.plus-account-logged-btn{
  flex-shrink:0;
  padding:11px 16px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size:12.5px; font-weight:800;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-accent);
  transition: transform var(--t-fast) var(--ease-out);
  white-space:nowrap;
}
.plus-account-logged-btn:active{ transform: scale(0.95); }

/* ── Hero présentation ── */
.plus-hero{
  padding: 22px 4px 6px;
}
.plus-hero-badge{
  display:inline-block;
  font-size:11px; font-weight:800;
  color: var(--c-accent-deep);
  background: var(--c-accent-soft);
  padding:5px 12px;
  border-radius: var(--r-pill);
  margin-bottom:12px;
}
.plus-hero h2{
  font-size:26px; line-height:1.15; letter-spacing:-0.02em;
  margin-bottom:10px;
}
.plus-hero p{
  font-size:13.5px; color: var(--c-ink-soft); line-height:1.55; font-weight:500;
  max-width: 420px;
}

/* ── Section générique Plus ── */
.plus-section{ padding: 22px 0 4px; }

/* ── Grille fonctionnalités ── */
.plus-features-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.plus-feature-card{
  padding:16px;
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.plus-feature-card:hover{ transform: translateY(-2px); box-shadow: var(--sh-card-hover); }
.plus-feature-icon{
  width:36px; height:36px; border-radius:11px;
  background: var(--c-accent-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  margin-bottom:10px;
}
.plus-feature-card h4{ font-size:13px; font-weight:800; margin-bottom:4px; letter-spacing:-0.01em; }
.plus-feature-card p{ font-size:11.5px; color: var(--c-muted); font-weight:600; line-height:1.4; }

/* ── Bandeau sombre boutique en ligne ── */
.plus-banner-dark{
  margin: 24px 2px;
  padding: 26px 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #1B1A22 0%, #14131A 60%, #26232F 100%);
  box-shadow: var(--sh-md);
  position: relative;
  overflow:hidden;
}
.plus-banner-dark::before{
  content:'';
  position:absolute; top:-40%; right:-10%;
  width:180px; height:180px;
  background: radial-gradient(circle, rgba(255,198,51,0.25), transparent 70%);
}
.plus-banner-tag{
  position:relative; z-index:1;
  font-size:10.5px; font-weight:700; color: var(--c-accent);
  text-transform:uppercase; letter-spacing:0.05em;
}
.plus-banner-dark h3{
  position:relative; z-index:1;
  color:#fff; font-size:19px; line-height:1.25; margin-top:8px;
}
.plus-banner-dark p{
  position:relative; z-index:1;
  color: rgba(255,255,255,0.75); font-size:13px; font-weight:500;
  margin-top:8px; line-height:1.5;
}
.plus-banner-dark strong{ color: var(--c-accent); }

/* ── Tarifs ── */
.plus-pricing-grid{
  display:flex; flex-direction:column; gap:12px;
}
.plus-price-card{
  padding:18px;
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.plus-price-card--highlight{
  background: linear-gradient(135deg, #FFF4DC 0%, #FFE1A0 100%);
  box-shadow: var(--sh-md);
}
.plus-price-tag{
  display:inline-block;
  font-size:11px; font-weight:800; color: var(--c-muted);
  text-transform:uppercase; letter-spacing:0.04em;
  margin-bottom:8px;
}
.plus-price-card--highlight .plus-price-tag{ color: var(--c-accent-ink); opacity:0.7; }
.plus-price-value{
  font-size:22px; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px;
}
.plus-price-value small{ font-size:12px; font-weight:600; opacity:0.6; }
.plus-price-card p{ font-size:12px; color: var(--c-muted); font-weight:600; line-height:1.4; }
.plus-price-card--highlight p{ color: var(--c-accent-ink); opacity:0.75; }

/* ── Carte installation PWA ── */
.plus-install-card{
  margin: 24px 2px;
  padding: 20px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.plus-install-icon{
  width:48px; height:48px; border-radius:14px;
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.plus-install-text{ flex:1; min-width:200px; }
.plus-install-text h3{ font-size:14.5px; margin-bottom:3px; }
.plus-install-text p{ font-size:12px; color: var(--c-muted); font-weight:600; line-height:1.4; }
.plus-install-card .btn-primary-yellow{ margin:0; flex-shrink:0; }

/* ── CTA final ── */
.plus-cta-final{
  margin: 30px 2px 10px;
  padding: 34px 24px;
  text-align:center;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #FFF4DC 0%, #FFE1A0 45%, var(--c-accent) 100%);
  box-shadow: var(--sh-lg);
}
.plus-cta-final h2{
  font-size:24px; line-height:1.2; color: var(--c-accent-ink);
  margin-bottom:8px;
}
.plus-cta-final p{
  font-size:13.5px; color: var(--c-accent-ink); opacity:0.75; font-weight:600;
  margin-bottom:18px;
}
.plus-cta-final .btn-checkout{ width:auto; padding:14px 30px; }

/* ── Liens légaux ── */
.plus-legal-links{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:28px; padding: 0 20px;
  flex-wrap:wrap;
}
.plus-legal-links button{
  font-size:12px; font-weight:700; color: var(--c-muted);
  transition: color var(--t-fast);
}
.plus-legal-links button:hover{ color: var(--c-ink); }
.plus-version-tag{
  text-align:center; font-size:11px; color: var(--c-muted-2); font-weight:600;
  margin-top:12px;
}

@media (min-width: 640px){
  .plus-features-grid{ grid-template-columns: repeat(3, 1fr); }
  .plus-pricing-grid{ flex-direction:row; }
  .plus-pricing-grid .plus-price-card{ flex:1; }
}

/* =====================================================================
   MODALE AUTH PLEIN ÉCRAN (adaptée depuis la landing)
===================================================================== */
.auth-fs-overlay{
  position: fixed; inset: 0;
  z-index: 500;
  background: #fff;
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.auth-fs-overlay.open{
  opacity:1; visibility:visible; pointer-events:all;
  transition: opacity var(--t-med) var(--ease-out);
}
.auth-fs-close{
  position:absolute; top:20px; right:20px; z-index:10;
  width:40px; height:40px;
  background: var(--c-bg-alt);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--c-muted);
  transition: all var(--t-fast) var(--ease-out);
}
.auth-fs-close:hover{ background: var(--c-ink); color:#fff; }

.auth-fs-container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  width:100%; height:100%;
  overflow:auto;
  max-width: 560px;
  margin: 0 auto;
}
@media (min-width: 900px){
  .auth-fs-container{ max-width: 1180px; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px){
  .auth-fs-container{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-fs-left{ display:none; }
}

.auth-fs-left{ position:relative; overflow:hidden; }
.auth-carousel-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform: scale(1.06);
  transition: opacity 1.2s var(--ease-out), transform 1.6s var(--ease-out);
}
.auth-carousel-slide.active{ opacity:1; transform:scale(1); }
.auth-carousel-overlay{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 100%);
}
.auth-carousel-text{ position:absolute; bottom:60px; left:36px; z-index:2; color:#fff; }
.auth-carousel-label{
  font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--c-accent); display:block; margin-bottom:10px;
}
.auth-carousel-title{ font-family: var(--f-display); font-size:2rem; font-weight:800; line-height:1.1; letter-spacing:-0.03em; }
.auth-carousel-dots{ position:absolute; bottom:28px; left:36px; z-index:2; display:flex; gap:8px; }
.auth-carousel-dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.35); border:none; padding:0; }
.auth-carousel-dot.active{ background:#fff; transform: scale(1.3); }

.auth-fs-right{
  width:100%; height:100%; overflow-y:auto;
  display:flex; align-items:center; justify-content:center;
  padding: 40px 24px;
}
.auth-fs-form-wrap{ width:100%; max-width:400px; }
.auth-fs-logo{ font-family: var(--f-display); font-size:1.8rem; font-weight:800; letter-spacing:-0.03em; color: var(--c-ink); margin-bottom:6px; }
.auth-fs-logo span{ color: var(--c-accent-deep); }
.auth-fs-tagline{ font-size:0.88rem; color: var(--c-muted); font-weight:500; margin-bottom:24px; }

.auth-tabs{ display:flex; background: var(--c-bg-alt); border-radius:50px; padding:4px; margin-bottom:20px; gap:4px; }
.auth-tab{
  flex:1; padding:11px 16px; border-radius:50px;
  font-size:0.85rem; font-weight:700; color: var(--c-muted);
  transition: all var(--t-med) var(--ease-out);
}
.auth-tab.active{ background:#fff; color: var(--c-ink); box-shadow: var(--sh-sm); }

.auth-form-section{ display:none; }
.auth-form-section.active{ display:block; animation: authFadeIn 0.4s ease; }
@keyframes authFadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.auth-form-group{ margin-bottom:16px; }
.auth-form-group label{ display:block; font-size:0.78rem; font-weight:700; color: var(--c-ink-soft); margin-bottom:7px; }
.auth-input-wrapper{ position:relative; display:flex; align-items:center; }
.auth-input-icon{ position:absolute; left:14px; color: var(--c-muted); display:flex; align-items:center; pointer-events:none; }
.auth-input-wrapper input{
  width:100%; padding:13px 14px 13px 42px;
  background: var(--c-bg-alt); border-radius:12px;
  font-size:0.9rem; color: var(--c-ink);
  box-shadow: var(--sh-xs);
  transition: all var(--t-fast) var(--ease-out);
}
.auth-input-wrapper input:focus{ background:#fff; box-shadow: var(--sh-sm), 0 0 0 3px var(--c-accent-soft); }
.auth-input-wrapper input::placeholder{ color: var(--c-muted-2); }
.auth-toggle-pwd{ position:absolute; right:14px; color: var(--c-muted); display:flex; align-items:center; cursor:pointer; }

.auth-forgot{ text-align:right; margin-top:-6px; margin-bottom:16px; }
.auth-forgot a{ font-size:0.78rem; color: var(--c-muted); font-weight:600; transition: color var(--t-fast); }
.auth-forgot a:hover{ color: var(--c-ink); }

.auth-btn{
  width:100%; padding:15px;
  background: var(--c-ink); color:#fff;
  border-radius:12px; font-size:0.92rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: all var(--t-fast) var(--ease-out);
  box-shadow: var(--sh-md);
}
.auth-btn:hover{ background: var(--c-accent-deep); color: var(--c-accent-ink); }
.auth-btn:disabled{ background: var(--c-muted-2); cursor:not-allowed; }

.auth-cgu{ margin:16px 0 14px; }
.auth-cgu-label{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:0.78rem; color: var(--c-muted); line-height:1.5; }
.auth-cgu-label input{ display:none; }
.auth-cgu-custom{
  width:17px; height:17px; min-width:17px; background: var(--c-bg-alt); border-radius:5px;
  margin-top:1px; position:relative; transition: all var(--t-fast);
}
.auth-cgu-label input:checked + .auth-cgu-custom{ background: var(--c-ink); }
.auth-cgu-label input:checked + .auth-cgu-custom::after{
  content:''; position:absolute; top:2px; left:5px;
  width:4px; height:8px; border:2px solid var(--c-accent);
  border-top:none; border-left:none; transform: rotate(45deg);
}
.auth-cgu-label a{ color: var(--c-ink); font-weight:700; text-decoration:underline; text-underline-offset:2px; }

#auth-alert{ margin-bottom:14px; }
.auth-alert-box{ padding:12px 16px; border-radius:10px; font-size:0.85rem; font-weight:600; }
.auth-alert-success{ background: var(--c-success-soft); color: var(--c-success); }
.auth-alert-error{ background: var(--c-danger-soft); color: var(--c-danger); }

/* =====================================================================
   MODALES GÉNÉRIQUES (CGU, Confidentialité, Forgot, PWA)
===================================================================== */
.auth-modal-overlay{
  display:none;
  position:fixed; inset:0;
  background: rgba(15,14,20,0.44);
  backdrop-filter: blur(3px);
  z-index: 600;
  align-items:center; justify-content:center;
  padding:20px;
}
.auth-modal-overlay.open{ display:flex; animation: modalOverlayIn 0.3s ease; }
@keyframes modalOverlayIn{ from{opacity:0;} to{opacity:1;} }

.auth-modal{
  background: var(--c-bg);
  border-radius: var(--r-lg);
  width:100%; max-width:480px; max-height:82vh;
  display:flex; flex-direction:column;
  box-shadow: var(--sh-xl);
  animation: modalIn 0.35s var(--ease-spring);
}
@keyframes modalIn{ from{opacity:0; transform: scale(0.94) translateY(16px);} to{opacity:1; transform:scale(1) translateY(0);} }

.auth-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px 16px;
  box-shadow: 0 1px 0 var(--c-hairline);
}
.auth-modal-header h3{ font-size:16px; }
.auth-modal-close{
  width:34px; height:34px; background: var(--c-bg-alt); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--c-muted); transition: all var(--t-fast) var(--ease-out);
}
.auth-modal-close:hover{ background: var(--c-ink); color:#fff; }

.auth-modal-body{ padding:20px 22px; overflow-y:auto; flex:1; }
.auth-modal-body h4{ font-size:0.82rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color: var(--c-accent-deep); margin: 18px 0 8px; }
.auth-modal-body h4:first-child{ margin-top:0; }
.auth-modal-body p{ font-size:0.86rem; color: var(--c-ink-soft); line-height:1.6; }
.auth-modal-footer{ padding: 14px 22px 22px; }
.auth-modal-footer .auth-btn{ margin:0; }

/* PWA modals */
.pwa-ios-body{ display:flex; flex-direction:column; align-items:center; gap:0; padding: 24px 20px 8px; text-align:center; }
.pwa-ios-step{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 20px; background: var(--c-bg-alt); border-radius:18px; width:100%; }
.pwa-ios-icon-wrap{ width:64px; height:64px; background: var(--c-ink); border-radius:18px; display:flex; align-items:center; justify-content:center; color: var(--c-accent); box-shadow: var(--sh-md); }
.pwa-ios-icon-accent{ background: var(--c-accent); color: var(--c-ink); }
.pwa-ios-step-label{ font-size:0.94rem; color: var(--c-ink); margin:0; }
.pwa-ios-step-hint{ font-size:0.78rem; color: var(--c-muted); margin:0; }
.pwa-ios-arrow{ font-size:1.3rem; color: var(--c-muted-2); padding:6px 0; }

.pwa-success-icon{ font-size:3.6rem; margin-bottom:12px; }
.pwa-success-title{ font-size:1.4rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:8px; }
.pwa-success-text{ font-size:0.88rem; color: var(--c-muted); line-height:1.6; margin-bottom:18px; }
.pwa-success-tip{
  display:flex; align-items:flex-start; gap:12px;
  background: var(--c-accent-soft);
  border-left:3px solid var(--c-accent-deep);
  border-radius:10px; padding:13px 15px; text-align:left;
  font-size:0.82rem; color: var(--c-ink-soft); line-height:1.5;
}


.plus-account-guest-btn--install{
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: var(--sh-accent);
}



/* =====================================================================
   PLUS+ — Sections enrichies (problème, highlights, duo stats/QR)
===================================================================== */

.plus-section-sub{
  font-size: 13px;
  color: var(--c-muted);
  font-weight: 600;
  line-height: 1.5;
  margin: -6px 2px 16px;
}

/* ── Carte "le vrai problème" ── */
.plus-problem-card{
  padding: 22px;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  margin: 0 2px;
}
.plus-problem-tag{
  display:inline-block;
  font-size:11px; font-weight:800;
  color: var(--c-danger);
  background: var(--c-danger-soft);
  padding:5px 12px;
  border-radius: var(--r-pill);
  margin-bottom:12px;
}
.plus-problem-card h3{
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.plus-problem-card > p{
  font-size: 13px;
  color: var(--c-ink-soft);
  font-weight: 600;
  line-height: 1.5;
}
.plus-problem-bubbles{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.plus-problem-bubbles span{
  font-size: 12px;
  font-weight: 700;
  color: var(--c-muted);
  background: var(--c-bg-alt);
  padding: 8px 13px;
  border-radius: var(--r-pill);
}

/* ── Bandeau accent (variante jaune du bandeau sombre) ── */
.plus-banner-accent{
  background: linear-gradient(150deg, #FFF4DC 0%, #FFE1A0 45%, var(--c-accent) 100%);
  box-shadow: var(--sh-lg);
}
.plus-banner-accent::before{ display: none; }
.plus-banner-accent .plus-banner-tag{ color: var(--c-accent-ink); opacity: 0.7; }
.plus-banner-accent h3{ color: var(--c-accent-ink); }
.plus-banner-accent p{ color: var(--c-accent-ink); opacity: 0.8; }
.plus-banner-accent strong{ color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ── Liste highlights (icône + titre + texte, empilés) ── */
.plus-highlights-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plus-highlight-item{
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.plus-highlight-item:hover{ transform: translateY(-2px); box-shadow: var(--sh-card-hover); }
.plus-highlight-icon{
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--c-accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.plus-highlight-text h4{
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.plus-highlight-text p{
  font-size: 12px;
  color: var(--c-muted);
  font-weight: 600;
  line-height: 1.5;
}

/* ── Duo stats / QR code ── */
.plus-duo-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.plus-duo-card{
  padding: 18px 16px;
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.plus-duo-icon{
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--c-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
}
.plus-duo-card h4{
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.plus-duo-card p{
  font-size: 11.5px;
  color: var(--c-muted);
  font-weight: 600;
  line-height: 1.45;
}

@media (min-width: 640px){
  .plus-highlights-list{ display: grid; grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   PUB-ENTRER — layout 2 colonnes (texte / carrousel image)
--------------------------------------------------------------------- */
.pub-entrer-wrap{ padding: 12px 0 6px; }

.pub-entrer{
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  /*background: linear-gradient(135deg, #FFDE86 0%, var(--c-accent) 55%, #F59A2E 100%);*/
}

/* Colonne texte */
.pub-entrer-content{
  position: relative;
  z-index: 1;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pub-entrer-content .promo-tag{ color: var(--c-accent-ink); opacity: 0.72; }
.pub-entrer-content h3{
  font-size: 21px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-accent-ink);
}
.pub-entrer-content p{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-accent-ink);
  opacity: 0.78;
}
.pub-entrer-content .promo-cta{
  margin-top: 6px;
  background: var(--c-ink);
  color: #fff;
}

/* Colonne média (carrousel) */
.pub-entrer-media{
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--c-bg-alt);
  overflow: hidden;
}
.pub-entrer-bg{ position: absolute; inset: 0; }
.pub-entrer-slide{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s var(--ease-out), transform 4s var(--ease-out);
}
.pub-entrer-slide.active{ opacity: 1; transform: scale(1); }

.pub-entrer-media-dots{
  position: absolute;
  bottom: 12px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
  z-index: 2;
}
.pub-entrer-media-dots .hero-dot{ background: rgba(255,255,255,0.5); }
.pub-entrer-media-dots .hero-dot.active{ background: #fff; }

/* ── Tablette / Desktop : 2 colonnes côte à côte ── */
@media (min-width: 640px){
  .pub-entrer{
    flex-direction: row;
    align-items: stretch;
  }
  .pub-entrer-content{
    flex: 1 1 50%;
    justify-content: center;
    padding: 32px 32px;
  }
  .pub-entrer-content h3{ font-size: 24px; }
  .pub-entrer-content p{ font-size: 13.5px; max-width: 340px; }
  .pub-entrer-media{
    flex: 1 1 50%;
    height: auto;
    min-height: 260px;
  }
}

@media (min-width: 900px){
  .pub-entrer-content{ padding: 40px 40px; }
  .pub-entrer-content h3{ font-size: 27px; }
  .pub-entrer-media{ min-height: 300px; }
}