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

.c2bz-topbar {
  --tb-bg: #14101c;
  --tb-text: #ece8f4;
  --tb-dim: rgba(236,232,244,.5);
  --tb-dim2: rgba(236,232,244,.4);
  --tb-border: rgba(255,255,255,.12);
  --tb-violet: oklch(0.72 0.13 312);
  --tb-blue: oklch(0.74 0.11 252);
  --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.66 0.16 322), oklch(0.6 0.15 272));

  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; }

/* --- urgent labeled timer --- */
.c2bz-tb-timerwrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto;
}
/* libellé "Offre expire dans" + point clignotant */
.c2bz-tb-deadline {
  display: inline-flex; align-items: center; gap: 5px;
  font: 800 9px/1 Manrope; letter-spacing: .14em; text-transform: uppercase;
  color: oklch(0.74 0.17 25); white-space: nowrap;
}
.c2bz-tb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.66 0.23 25);
  animation: c2bz-blink 1s steps(1, end) infinite, c2bz-ring 1.6s ease-out infinite;
}

.c2bz-tb-timer {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  animation: c2bz-pulse 1.8s ease-in-out infinite;
}
.c2bz-tb-box {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: oklch(0.55 0.2 25 / .16); border: 1px solid oklch(0.66 0.22 25 / .55);
  border-radius: 6px; padding: 5px 7px; min-width: 34px;
  box-shadow: 0 0 12px oklch(0.6 0.22 25 / .25), inset 0 0 0 1px oklch(0.7 0.2 25 / .12);
}
.c2bz-tb-box b { font: 800 17px/1 "Space Mono", ui-monospace, monospace; color: #fff; letter-spacing: -.02em; }
.c2bz-tb-box span { font: 700 6px/1 Manrope; letter-spacing: .12em; opacity: .85; color: oklch(0.85 0.1 25); }

/* dernière ligne droite (< 5 min) : pulsation plus rapide + boîtes plus chaudes */
.c2bz-tb-final .c2bz-tb-timer { animation-duration: .9s; }
.c2bz-tb-final .c2bz-tb-box { background: oklch(0.6 0.22 25 / .26); box-shadow: 0 0 16px oklch(0.62 0.23 25 / .45); }

@keyframes c2bz-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } }
@keyframes c2bz-ring {
  0%   { box-shadow: 0 0 0 0 oklch(0.66 0.23 25 / .55); }
  100% { box-shadow: 0 0 0 7px oklch(0.66 0.23 25 / 0); }
}
@keyframes c2bz-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

@media (prefers-reduced-motion: reduce) {
  .c2bz-tb-dot, .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: 30px; padding: 4px 5px; }
  .c2bz-tb-box b { font-size: 15px; }
  .c2bz-tb-deadline { font-size: 8px; letter-spacing: .1em; }
  .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; } }
}