/* ============================================================
   C2BZ — Top bar promo + compte à rebours
   Vanilla CSS statique — aucune dépendance.
   ============================================================ */

.c2bz-topbar {
  --tb-bg: #000000;
  --tb-text: #f9e8f1;
  --tb-dim: rgba(249,232,241,.5);
  --tb-dim2: rgba(249,232,241,.4);
  --tb-border: rgba(255,255,255,.12);
  --tb-violet: oklch(0.72 0.2 350);
  --tb-blue: oklch(0.78 0.16 0);
  --tb-green-a: oklch(0.88 0.18 150);
  --tb-green-b: oklch(0.79 0.17 158);
  --tb-cta: linear-gradient(135deg, oklch(0.72 0.21 350), oklch(0.78 0.17 5));

  box-sizing: border-box;
  width: 100%;
  container-type: inline-size;
  background: var(--tb-bg);
  color: var(--tb-text);
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  border-bottom: 1px solid var(--tb-border);
}
.c2bz-topbar *, .c2bz-topbar *::before, .c2bz-topbar *::after { box-sizing: border-box; }

.c2bz-tb-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 18px;
  min-height: 60px;
}

/* --- price block --- */
.c2bz-tb-price { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.c2bz-tb-now { font: 800 20px/1 Manrope; letter-spacing: -.025em; color: #fff; }
.c2bz-tb-old { font: 500 13px Manrope; color: var(--tb-dim2); text-decoration: line-through; }

/* --- discount badge --- */
.c2bz-tb-badge {
  flex: 0 0 auto;
  font: 800 11px/1 Manrope; letter-spacing: .01em; color: #08160d;
  background: linear-gradient(135deg, var(--tb-green-a), var(--tb-green-b));
  border-radius: 7px; padding: 5px 7px;
  box-shadow: 0 3px 10px oklch(0.72 0.16 150 / .35);
}

.c2bz-tb-spacer { flex: 1 1 auto; }

/* --- boxed labeled timer (rose accent LP + légère pulsation) --- */
.c2bz-tb-timer {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  transform-origin: center;
  animation: c2bz-tb-pulse 1.6s ease-in-out infinite;
}
.c2bz-tb-box {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: oklch(0.72 0.2 350 / .12); border: 1px solid oklch(0.72 0.2 350 / .5);
  border-radius: 6px; padding: 5px 6px; min-width: 30px;
}
.c2bz-tb-box b { font: 700 13px/1 "Space Mono", ui-monospace, monospace; color: var(--tb-violet); }
.c2bz-tb-box span { font: 500 6px/1 Manrope; letter-spacing: .1em; opacity: .85; color: oklch(0.82 0.13 351); }
@keyframes c2bz-tb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .c2bz-tb-timer { animation: none; }
}

/* --- CTA --- */
.c2bz-tb-cta {
  flex: 0 0 auto; border: none; cursor: pointer;
  font: 700 11px Manrope; letter-spacing: .06em; color: #fff;
  background: var(--tb-cta); border-radius: 99px; padding: 9px 16px; white-space: nowrap;
}
.c2bz-tb-close {
  flex: 0 0 auto; border: none; background: transparent; color: inherit;
  opacity: .55; cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px;
}
.c2bz-tb-close:hover { opacity: .9; }

/* hidden state (when dismissed / unlocked) */
.c2bz-topbar[hidden] { display: none; }

/* ---------- responsive : container queries (s'adapte à la largeur de la barre) ---------- */
@container (max-width: 480px) {
  .c2bz-tb-inner { gap: 9px; padding: 9px 12px; min-height: 54px; }
  .c2bz-tb-now { font-size: 17px; }
  .c2bz-tb-old { font-size: 11px; }
  .c2bz-tb-box { min-width: 26px; padding: 4px 5px; }
  .c2bz-tb-box b { font-size: 12px; }
  .c2bz-tb-cta { padding: 8px 12px; font-size: 10px; }
}
@container (max-width: 400px) {
  .c2bz-tb-inner { gap: 7px; padding: 8px 10px; }
  .c2bz-tb-old { display: none; }   /* gagne de la place sur très petits écrans */
  .c2bz-tb-cta { padding: 8px 11px; }
}
/* Fallback navigateurs sans container queries : media queries sur le viewport */
@supports not (container-type: inline-size) {
  @media (max-width: 480px) {
    .c2bz-tb-inner { gap: 9px; padding: 9px 12px; min-height: 54px; }
    .c2bz-tb-now { font-size: 17px; }
    .c2bz-tb-old { font-size: 11px; }
    .c2bz-tb-box { min-width: 26px; padding: 4px 5px; }
    .c2bz-tb-box b { font-size: 12px; }
    .c2bz-tb-cta { padding: 8px 12px; font-size: 10px; }
  }
  @media (max-width: 380px) { .c2bz-tb-old { display: none; } }
}