/* =========================================================
   CODE PROMO — bandeau en haut du site + champ « code promo »
   du panier. Chargé sur toutes les pages publiques (et sur
   admin.html pour l'aperçu du bandeau).
   ========================================================= */

/* Hauteur du bandeau : 0 tant qu'il n'y a pas de promo. js/promo.js
   ajuste la valeur à la hauteur réelle (le message peut passer sur
   2 lignes sur mobile). Le header fixe et le contenu sont décalés
   d'autant, donc rien ne change quand il n'y a pas de bandeau. */
:root { --promo-h: 0px; }
html.has-promo { --promo-h: 40px; }

body { padding-top: var(--promo-h); }
.site-header { top: var(--promo-h); }

/* Le méga-menu est « fixed » : sous un header transparent (haut de l'accueil)
   il se cale sur la fenêtre, il faut donc le descendre du bandeau. Sous un
   header flouté (défilement, autres pages), il se cale déjà sur le header. */
html.has-promo .site-header:not(.is-scrolled):not(.is-forced-white):not(.site-header--static) .mega-menu {
  top: calc(var(--header-height) + var(--promo-h));
}

.promo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110; /* au-dessus du header (100), sous menus mobiles / panier / fenêtres (≥ 200) */
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-sans);
}

.promo-bar-inner {
  max-width: 1440px;
  margin: 0 auto;
  min-height: 40px;
  padding: 7px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  text-align: center;
}

.promo-bar-text {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

a.promo-bar-text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 241, 232, 0.45); }
a.promo-bar-text:hover { text-decoration-color: currentColor; }

.promo-bar-code {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px dashed rgba(245, 241, 232, 0.65);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  padding: 3px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.promo-bar-code:hover,
.promo-bar-code:focus-visible {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-bg);
  outline: none;
}

.promo-bar-code.is-copied {
  background: var(--color-accent);
  border-style: solid;
  border-color: var(--color-accent);
  color: var(--color-white);
  letter-spacing: 0.06em;
}

.promo-bar-code svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* Aperçu dans l'admin : dans le flux de la page, pas collé en haut de l'écran. */
.promo-bar--preview { position: relative; z-index: 0; }

@media (max-width: 640px) {
  .promo-bar-inner { padding: 7px 14px; }
  .promo-bar-text { font-size: 0.76rem; }
}

/* =========================================================
   Panier : champ « code promo » + ligne de réduction
   ========================================================= */
.cart-promo[hidden],
.cart-promo [hidden] { display: none !important; }

.cart-promo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-promo-toggle {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-promo-toggle:hover { color: var(--color-accent-dark); }

.cart-promo-form { display: flex; gap: 8px; }

.cart-promo-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-white);
  padding: 11px 13px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.cart-promo-input::placeholder { font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--color-ink-soft); }
.cart-promo-input:focus { outline: 2px solid var(--color-accent-dark); outline-offset: 1px; }

.cart-promo-apply {
  flex: 0 0 auto;
  border: 1px solid var(--color-ink);
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink);
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.cart-promo-apply:hover:not(:disabled) { background: var(--color-ink); color: var(--color-white); }
.cart-promo-apply:disabled { opacity: 0.5; cursor: progress; }

.cart-promo-msg {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
}

.cart-promo-msg.is-error { color: #B3261E; }

.cart-promo-applied {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  background: rgba(124, 143, 110, 0.12);
  padding: 9px 12px;
}

.cart-promo-applied.is-warning {
  border-color: #B3261E;
  background: rgba(179, 38, 30, 0.06);
}

.cart-promo-applied-code {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-accent-dark);
  border-radius: 999px;
  padding: 2px 9px;
}

.cart-promo-applied.is-warning .cart-promo-applied-code { background: #B3261E; }

.cart-promo-applied-text {
  flex: 1 1 120px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink);
}

.cart-promo-remove {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.cart-promo-remove:hover { color: var(--color-ink); }

.cart-drawer-discount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-accent-dark);
}

.cart-drawer-discount[hidden] { display: none; }