/* ==========================================================
   BANANA LOVER · precommande.css
   Bande d'accueil (éditoriale / premium), compte à rebours,
   bandeau fiche, pop-up. 100 % tokens DA (tokens.css). Thème
   sombre. Chargé seulement quand la précommande est active.
   ========================================================== */

/* ---------- Badge « Précommande » (complète .badge de main.css) ---------- */
.badge.precommande{
  background:var(--bl-teal);
  color:var(--bl-blanc);
  border-radius:var(--radius-pill); /* capsule (comme les tags produit) */
}
.pinfo .badges .badge.precommande{white-space:nowrap}

/* ==========================================================
   BANDE D'ACCUEIL
   ========================================================== */
.bl-precommande-bar{
  max-width:var(--container);
  margin:64px auto 0;
  padding:0 var(--pad);
}
/* Variante « inline » : dans un conteneur qui gère déjà largeur + padding
   (ex. la boutique .page-main). On retire les marges/paddings propres. */
.bl-precommande-bar--inline{
  max-width:none;
  margin:0 0 34px;
  padding:0;
}
.bl-precommande-bar__in{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px 44px;
  flex-wrap:wrap;
  padding:30px 36px;
  border-radius:18px;
  border:1px solid rgba(251,248,249,.09);
  background:var(--surface-raised);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85);
  overflow:hidden;
  isolation:isolate;
}
/* Deux halos de lumière (teal + pink, tokens DA) qui TRAVERSENT la carte en
   sens inverse : la cellule reste sombre (--surface-raised, comme une carte
   produit), seuls les halos apportent couleur + mouvement bien perceptible. */
.bl-precommande-bar__in::before,
.bl-precommande-bar__in::after,
.bl-precommande-banner::before,
.bl-precommande-banner::after{
  content:"";
  position:absolute;
  z-index:0;
  top:50%;left:0;
  width:42%;aspect-ratio:1/1;
  border-radius:50%;
  filter:blur(64px);
  pointer-events:none;
}
.bl-precommande-bar__in::before,
.bl-precommande-banner::before{
  background:radial-gradient(circle, rgba(46,179,186,.55), transparent 68%);
  animation:bl-blob-teal 17s var(--ease-in-out, ease-in-out) infinite alternate;
}
.bl-precommande-bar__in::after,
.bl-precommande-banner::after{
  background:radial-gradient(circle, rgba(215,22,91,.45), transparent 68%);
  animation:bl-blob-pink 21s var(--ease-in-out, ease-in-out) infinite alternate;
}
@keyframes bl-blob-teal{
  0%{transform:translate(-25%,-70%)}
  100%{transform:translate(210%,-10%)}
}
@keyframes bl-blob-pink{
  0%{transform:translate(230%,-30%)}
  100%{transform:translate(-30%,-75%)}
}
/* 3e lumière : halo jaune DA, trajectoire propre (élément dédié dans le markup). */
.bl-precommande-bar__spark,
.bl-precommande-banner__spark{
  position:absolute;
  z-index:0;
  top:50%;left:0;
  width:34%;aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(251,187,69,.40), transparent 68%);
  filter:blur(64px);
  pointer-events:none;
  animation:bl-blob-yellow 25s var(--ease-in-out, ease-in-out) infinite alternate;
}
@keyframes bl-blob-yellow{
  0%{transform:translate(55%,-95%)}
  100%{transform:translate(130%,15%)}
}
/* Contenu au-dessus des halos. */
.bl-precommande-bar__lead,
.bl-precommande-bar__aside,
.bl-precommande-banner__title,
.bl-precommande-banner__body,
.bl-precommande-banner .bl-cd{position:relative;z-index:1}

/* Capsule « Précommande » (bande + bandeau fiche) : plus d'air autour du texte. */
.bl-precommande-bar__lead .badge.precommande,
.bl-precommande-banner__title .badge.precommande{padding:8px 18px}

.bl-precommande-bar__lead{
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
  flex:1 1 340px;
  min-width:0;
}
.bl-precommande-bar__text{
  min-width:0;
  font:500 15.5px/1.55 var(--font-body);
  color:var(--text-primary);
  max-width:38ch;
}

.bl-precommande-bar__aside{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px 26px;
  flex-wrap:wrap;
}
.bl-precommande-bar__ship{
  font:400 12.5px/1.4 var(--font-body);
  color:var(--text-secondary);
  white-space:nowrap;
}
.bl-precommande-bar__ship strong{color:var(--bl-yellow-3);font-weight:600;letter-spacing:.01em}
/* Note optionnelle dans la carte (rappel précommande au checkout) : ligne
   pleine largeur sous le compte à rebours, séparée par un filet. */
.bl-precommande-bar__note{
  flex-basis:100%;position:relative;z-index:1;
  margin:0;padding-top:20px;
  border-top:1px solid rgba(251,248,249,.10);
  font:500 14.5px/1.6 var(--font-body);color:var(--text-secondary);
}

/* ==========================================================
   COMPTE À REBOURS (base partagée accueil + fiche)
   ========================================================== */
.bl-cd{
  display:inline-flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.bl-cd__intro{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  font:600 11px var(--font-display);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.bl-cd__deadline{
  font:500 10.5px var(--font-display);
  letter-spacing:.02em;
  text-transform:none;
  color:var(--text-faint);
}
.bl-cd__deadline::first-letter{text-transform:uppercase}
.bl-cd__clock{display:inline-flex;gap:8px}
.bl-cd__unit{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  min-width:46px;
  padding:8px 6px;
  overflow:hidden;
  background:var(--surface-overlay);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-m);
}
.bl-cd__num{
  font:700 20px/1 var(--font-display);
  color:var(--text-primary);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
/* Micro-odomètre : le chiffre « tombe » quand il change (classe posée en JS). */
.bl-cd__num.is-tick{animation:bl-cd-tick .5s var(--ease-out)}
@keyframes bl-cd-tick{
  0%{transform:translateY(-42%);opacity:0}
  55%{opacity:1}
  100%{transform:none;opacity:1}
}
.bl-cd__lbl{
  margin-top:4px;
  font:600 9.5px var(--font-display);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.bl-cd__ended{
  font:600 12px var(--font-display);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bl-pink);
}
.bl-cd [hidden]{display:none}

/* ---------- Variante ACCUEIL : chips « verre » premium ---------- */
.bl-cd--bar{gap:20px}
.bl-cd--bar .bl-cd__clock{gap:10px}
.bl-cd--bar .bl-cd__unit{
  min-width:60px;
  padding:13px 12px 10px;
  border-radius:12px;
  border:1px solid rgba(251,248,249,.10);
  background:linear-gradient(180deg, rgba(251,248,249,.07), rgba(251,248,249,.015));
  box-shadow:inset 0 1px 0 rgba(251,248,249,.12), 0 14px 26px -18px rgba(0,0,0,.95);
}
/* Reflet supérieur (verre) */
.bl-cd--bar .bl-cd__unit::before{
  content:"";
  position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(251,248,249,.28), transparent);
}
.bl-cd--bar .bl-cd__num{font-size:32px}
.bl-cd--bar .bl-cd__lbl{margin-top:6px}
/* La seconde, plus vivante, en accent teal clair. */
.bl-cd--bar .bl-cd__num[data-unit="secs"]{color:var(--bl-teal-3)}

/* ==========================================================
   FICHE PRODUIT : bandeau explicatif
   ========================================================== */
.bl-precommande-banner{
  position:relative;
  margin:18px 0 4px;
  padding:18px 20px;
  border-radius:var(--radius-m);
  border:1px solid var(--border-subtle);
  background:var(--surface-raised);
  overflow:hidden;
  isolation:isolate;
}
.bl-precommande-banner__title{
  display:flex;
  align-items:center;
  gap:10px;
  font:600 15px var(--font-display);
  color:var(--text-primary);
  margin-bottom:8px;
}
.bl-precommande-banner__title .badge.precommande{flex:0 0 auto}
.bl-precommande-banner__body{
  font:400 13.5px/1.6 var(--font-body);
  color:var(--text-secondary);
  margin-bottom:14px;
}
.bl-precommande-banner .bl-cd{margin-top:2px}
.bl-precommande-banner .bl-cd__unit{min-width:42px}
.bl-precommande-banner .bl-cd__num{font-size:18px}

/* ==========================================================
   POP-UP (complète .scrim / .modal de main.css)
   ========================================================== */
.bl-precommande-modal .badge.precommande{margin-bottom:14px}
.bl-precommande-modal__body{
  font:400 14px/1.65 var(--font-body);
  color:var(--text-secondary);
  margin-bottom:20px;
}
.bl-precommande-modal__facts{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  border-top:1px solid var(--border-subtle);
}
.bl-precommande-modal__facts li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--border-subtle);
}
.bl-precommande-modal__k{
  font:600 11px var(--font-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.bl-precommande-modal__v{
  font:600 14px var(--font-display);
  color:var(--text-primary);
  text-align:right;
}
.bl-precommande-modal__cta{width:100%}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media(max-width:1000px){
  .bl-precommande-bar{margin-top:52px}
  .bl-precommande-bar__in{padding:24px 26px 24px 30px;gap:22px 32px}
  .bl-precommande-bar__aside{width:100%;justify-content:space-between}
}
@media(max-width:640px){
  .bl-precommande-bar__in{padding:22px 22px 22px 26px;gap:18px;border-radius:14px}
  .bl-precommande-bar__lead{gap:14px;flex-basis:100%}
  .bl-precommande-bar__text{font-size:14px;max-width:none}
  .bl-precommande-bar__aside{gap:14px 16px}
  .bl-cd--bar{gap:12px 16px;width:100%}
  .bl-cd--bar .bl-cd__clock{gap:8px}
  .bl-cd--bar .bl-cd__unit{min-width:0;flex:1 1 0;padding:11px 6px 9px}
  .bl-cd--bar .bl-cd__num{font-size:24px}
  .bl-precommande-modal__facts li{flex-direction:column;gap:4px}
  .bl-precommande-modal__v{text-align:left}
}

/* Mouvement réduit : les halos de fond et l'odomètre se figent (le décompte reste). */
@media(prefers-reduced-motion:reduce){
  .bl-precommande-bar__in::before,
  .bl-precommande-bar__in::after,
  .bl-precommande-bar__spark,
  .bl-precommande-banner::before,
  .bl-precommande-banner::after,
  .bl-precommande-banner__spark{animation:none}
  .bl-cd__num.is-tick{animation:none}
}