:root {
  --sig-ticket-bg:    #1C1C1C;
  --sig-ticket-fg:    #FAF4ED;
  --sig-ticket-gold:  #C4A684;
  --sig-mint:         #6BBF8A;
  --sig-coral:        #ff3366;
  --sig-coral-d:      #e02456;
  --sig-coral-xl:     #fff0f3;
  --sig-paper:        #F4EEE4;
  --sig-paper-dot:    rgba(160,72,48,0.03);
  --sig-night-bg:     #1F1B16;
  --sig-night-bg2:    #2D241C;
  --sig-night-fg:     #F4EEE4;
  --sig-night-gold:   #C4A684;
}

.sig-ticket {
  display: block;
  background: var(--sig-ticket-bg);
  color: var(--sig-ticket-fg);
  padding: 14px 18px 18px;
  position: relative;

  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    96% 90%, 92% 100%, 88% 90%, 84% 100%, 80% 90%, 76% 100%, 72% 90%, 68% 100%,
    64% 90%, 60% 100%, 56% 90%, 52% 100%, 48% 90%, 44% 100%, 40% 90%, 36% 100%,
    32% 90%, 28% 100%, 24% 90%, 20% 100%, 16% 90%, 12% 100%, 8% 90%, 4% 100%,
    0 90%
  );
  font-family: var(--font-body, "DM Sans", sans-serif);
}
.sig-ticket-lbl {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sig-ticket-gold);
  font-weight: 600;
  margin-bottom: 4px;
}
.sig-ticket-val {
  font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  display: inline-block;
}
.sig-ticket-cur {
  font-size: 12px;
  color: var(--sig-ticket-gold);
  font-weight: 500;
  margin-left: 2px;
}
.sig-ticket-save {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--sig-mint);
  font-family: var(--font-body, sans-serif);
  vertical-align: 4px;
}
.sig-ticket--sm { padding: 10px 14px 14px; }
.sig-ticket--sm .sig-ticket-val { font-size: 20px; }
.sig-ticket--lg { padding: 18px 22px 22px; }
.sig-ticket--lg .sig-ticket-val { font-size: 34px; }

.drop-card .prices {
  background: var(--sig-ticket-bg);
  color: var(--sig-ticket-fg);
  padding: 11px 14px 14px;
  margin: 4px -18px -18px;
  border-radius: 0;
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    95% 88%, 90% 100%, 85% 88%, 80% 100%, 75% 88%, 70% 100%, 65% 88%, 60% 100%,
    55% 88%, 50% 100%, 45% 88%, 40% 100%, 35% 88%, 30% 100%, 25% 88%, 20% 100%,
    15% 88%, 10% 100%, 5% 88%, 0 100%
  );
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.drop-card .prices .old {
  color: var(--sig-ticket-gold);
  text-decoration: line-through;
  font-size: 12px;
  font-family: var(--font-body, sans-serif);
  opacity: 0.7;
  order: 2;
}
.drop-card .prices .new {
  color: var(--sig-ticket-fg);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  order: 1;
}
.drop-card .prices::before {
  content: "Meilleur prix";
  position: absolute;
  top: 6px; left: 14px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sig-ticket-gold);
  font-weight: 600;
  font-family: var(--font-body, sans-serif);
}
.drop-card .prices {
  position: relative;
  padding-top: 22px;
}

@keyframes sigHeartbeat {
  0%, 30%, 50%, 80%, 100% { transform: scale(1); }
  40% { transform: scale(1.22); }
  60% { transform: scale(1.10); }
}
.logo-mark { position: relative; }
.logo-mark::after {
  animation: sigHeartbeat 3.6s ease-in-out infinite;
  transform-origin: center;
  background: var(--sig-mint) !important;
}
.tb-logo .tb-logo-img,
.footer-logo img {

  animation: sigLogoBreath 4.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes sigLogoBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes sigSparkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); }
  50%      { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
.sig-sparkle,
.drop-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  isolation: isolate;
}
.sig-sparkle::before, .sig-sparkle::after,
.drop-badge::before, .drop-badge::after {
  content: "✦";
  position: absolute;
  font-size: 9px;
  color: rgba(255,255,255,0.85);
  pointer-events: none;
  animation: sigSparkle 2.4s ease-in-out infinite;
}
.sig-sparkle::before, .drop-badge::before {
  top: -6px; right: -3px;
  animation-delay: 0.3s;
}
.sig-sparkle::after, .drop-badge::after {
  bottom: -5px; left: -2px;
  font-size: 7px;
  animation-delay: 1.2s;
}

.sig-sparkle--coral::before, .sig-sparkle--coral::after { color: var(--sig-coral); }
.sig-sparkle--mint::before,  .sig-sparkle--mint::after  { color: var(--sig-mint); }

.sig-empty {
  text-align: center;
  padding: 48px 24px;
  max-width: 420px;
  margin: 0 auto;
  font-family: var(--font-body, sans-serif);
}
.sig-empty-illu {
  width: 96px; height: 96px;
  margin: 0 auto 18px;
  background: var(--sig-coral-xl);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 44px;
  position: relative;
  box-shadow: 0 12px 28px -16px rgba(192,88,72,0.35);
}
.sig-empty-illu::after {
  content: "Z z z";
  position: absolute;
  top: -10px; right: -6px;
  font-size: 13px;
  color: var(--sig-coral-d);
  letter-spacing: 3px;
  font-style: italic;
  font-family: var(--font-display, Georgia, serif);
  opacity: 0.7;
}
.sig-empty[data-mood="search"]  .sig-empty-illu { background: #FBF2EC; }
.sig-empty[data-mood="search"]  .sig-empty-illu::after { content: "?"; font-size: 22px; top: -4px; right: 0; }
.sig-empty[data-mood="cart"]    .sig-empty-illu::after { content: "+"; font-size: 28px; top: -8px; right: 0; color: var(--sig-mint); }
.sig-empty-msg {
  font-family: var(--font-display, Georgia, serif);
  font-size: 19px;
  color: var(--ink, #1C1C1C);
  line-height: 1.35;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.sig-empty-sub {
  font-size: 14px;
  color: var(--mid, #7A7068);
  line-height: 1.55;
  margin-bottom: 20px;
}
.sig-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--sig-coral);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease;
}
.sig-empty-cta:hover { background: var(--sig-coral-d); }

body.sig-night {
  background: var(--sig-night-bg) !important;
  color: var(--sig-night-fg) !important;
}
body.sig-night .topbar,
body.sig-night .topbar-strip,
body.sig-night .catbar,
body.sig-night .hero,
body.sig-night .drop-card,
body.sig-night .sidebar,
body.sig-night .footer,
body.sig-night footer,
body.sig-night .minireview-card,
body.sig-night .sig-empty-illu,
body.sig-night .reviews-head,
body.sig-night .how-section,
body.sig-night main,
body.sig-night section,
body.sig-night .container,
body.sig-night .card,
body.sig-night .pc {
  background: var(--sig-night-bg) !important;
  color: var(--sig-night-fg) !important;
  border-color: #3A2F26 !important;
}
body.sig-night .drop-card,
body.sig-night .minireview-card,
body.sig-night .pc,
body.sig-night .card,
body.sig-night .sidebar {
  background: var(--sig-night-bg2) !important;
  border: 1px solid #3A2F26 !important;
}
body.sig-night h1, body.sig-night h2, body.sig-night h3, body.sig-night h4, body.sig-night h5,
body.sig-night .logo, body.sig-night .tb-word, body.sig-night .name {
  color: var(--sig-night-fg) !important;
}
body.sig-night p,
body.sig-night .sub,
body.sig-night .text-muted,
body.sig-night .shop,
body.sig-night .alerts,
body.sig-night .u-muted {
  color: var(--sig-night-gold) !important;
  opacity: 0.85;
}
body.sig-night a { color: #ECA090 !important; }
body.sig-night a:hover { color: #F4C4B0 !important; }
body.sig-night .btn-primary { background: var(--sig-coral) !important; color: #fff !important; }
body.sig-night .btn-secondary { background: #2D241C !important; color: var(--sig-night-fg) !important; border-color: #3A2F26 !important; }
body.sig-night .input, body.sig-night .select, body.sig-night .textarea {
  background: #2D241C !important;
  color: var(--sig-night-fg) !important;
  border-color: #3A2F26 !important;
}
body.sig-night .cat-pill, body.sig-night .chip {
  background: #2D241C !important;
  color: var(--sig-night-fg) !important;
  border-color: #3A2F26 !important;
}
body.sig-night .cat-pill.active, body.sig-night .chip.active {
  background: var(--sig-coral) !important;
  color: #fff !important;
  border-color: var(--sig-coral) !important;
}
body.sig-night .sig-ticket,
body.sig-night .drop-card .prices {
  background: #100D0A !important;
  border: 1px solid #3A2F26;
}
body.sig-night img:not([class*="logo"]) {
  filter: brightness(0.88) contrast(0.94);
}
body.sig-night .topbar-strip { background: linear-gradient(90deg, #2D241C 0%, #1F1B16 60%) !important; }
body.sig-night .topbar-strip .ts-l b { color: var(--sig-coral) !important; }

html { background: var(--sand-50, #FBF8F6); }
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
::view-transition-old(root)  { animation-name: sigFadeOut; }
::view-transition-new(root)  { animation-name: sigFadeIn; }
@keyframes sigFadeOut { to { opacity: 0; transform: translateY(-4px); } }
@keyframes sigFadeIn  { from { opacity: 0; transform: translateY(8px); } }

.drop-card-img,
img.product-hero,
.product-page-hero img {
  view-transition-name: var(--vt-name, none);
}

.sig-paper {
  background-color: var(--sig-paper);
  background-image: radial-gradient(var(--sig-paper-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}

.sig-counter {
  background: var(--sig-ticket-bg);
  color: #fff;
  padding: 28px 24px;
  text-align: center;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.sig-counter::before {
  content: "";
  position: absolute;
  inset: -50% -10%;
  background: radial-gradient(circle, rgba(224,123,101,0.22), transparent 60%);
  pointer-events: none;
}
.sig-counter-lbl {
  position: relative;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sig-ticket-gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.sig-counter-val {
  position: relative;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 44px;
  font-weight: 700;
  color: var(--sig-coral);
  margin: 4px 0 4px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sig-counter-sub {
  position: relative;
  font-size: 13px;
  color: #B8AFA8;
}

.sig-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sig-coral-xl);
  color: var(--sig-coral-d);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: -0.01em;
}
.sig-pill--mint { background: rgba(107,191,138,0.15); color: #3D8A5D; }
.sig-pill--dark { background: var(--sig-ticket-bg); color: var(--sig-ticket-gold); }
.sig-pill .sig-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.sig-wa-fab {
  position: fixed;
  right: 16px; bottom: 88px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 9998;
  text-decoration: none;
  box-shadow: 0 10px 28px -8px rgba(37,211,102,0.55);
  animation: sigWaPulse 2.6s ease-in-out infinite;
  transition: transform .15s ease;
}
.sig-wa-fab:hover { transform: scale(1.06); }
.sig-wa-fab svg { width: 28px; height: 28px; }
@keyframes sigWaPulse {
  0%, 100% { box-shadow: 0 10px 28px -8px rgba(37,211,102,0.55), 0 0 0 0 rgba(37,211,102,0.40); }
  50%      { box-shadow: 0 10px 28px -8px rgba(37,211,102,0.55), 0 0 0 16px rgba(37,211,102,0.00); }
}
@media (min-width: 901px) {
  .sig-wa-fab { right: 24px; bottom: 24px; }
}

.sig-bottomnav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--border, #ECDDD8);
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  font-family: var(--font-body, "DM Sans", sans-serif);
}
.sig-bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 6px;
  color: var(--mid, #7A7068);
  text-decoration: none;
  position: relative;
  border-radius: 12px;
  transition: color .15s ease, background .15s ease;
}
.sig-bottomnav a:active { background: var(--bg2, #F7F5F4); }
.sig-bottomnav a.is-active { color: var(--coral, #ff3366); }
.sig-bottomnav a.is-active::before {
  content: "";
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--coral, #ff3366);
}
.sig-bottomnav .ic {
  width: 22px; height: 22px;
  display: grid; place-items: center;
}
.sig-bottomnav .ic svg { width: 22px; height: 22px; }
.sig-bottomnav .lbl {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}
.sig-bottomnav .badge {
  position: absolute;
  top: 4px; right: calc(50% - 16px);
  min-width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--coral, #ff3366);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  display: grid; place-items: center;
  border: 2px solid #fff;
}

@media (max-width: 900px) {
  .sig-bottomnav { display: grid; }
  body { padding-bottom: 72px; }

  footer.footer, .footer { margin-bottom: 0; }
}

body.sig-night .sig-bottomnav {
  background: rgba(31,27,22,0.92) !important;
  border-top-color: #3A2F26 !important;
}
body.sig-night .sig-bottomnav a { color: var(--sig-night-gold) !important; }
body.sig-night .sig-bottomnav a.is-active { color: var(--sig-coral) !important; }

@media (max-width: 900px) {
  .sig-swipe-hint {
    position: fixed;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 60px;
    border-radius: 4px 0 0 4px;
    background: linear-gradient(180deg, transparent, rgba(224,123,101,0.35), transparent);
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    animation: sigSwipeHint 4s ease-in-out 2s 2;
  }
  @keyframes sigSwipeHint {
    0%, 100% { opacity: 0; transform: translate(0, -50%); }
    20%, 80% { opacity: 1; transform: translate(-2px, -50%); }
  }
}

@media print {
  .sig-wa-fab, .sig-bottomnav, .sig-swipe-hint { display: none !important; }
  body.sig-night { background: #fff !important; color: #000 !important; }
}