/* ==========================================================================
   Saisons LMDB · Black Friday « Le Choc Absolu » — décors et interactions communs
   Tout le site passe en noir. Un seul rouge. Titre Didone en lettres qui réagissent
   au pointeur, compte à rebours à volets (tableau d'aéroport), lampe qui suit la souris,
   mur des chocs en cartes 3D, bandeau géant qui défile au rythme du défilement,
   jeu d'arcade « Black Friday Rush ».
   Les couleurs propres au thème sont dans skin-<thème>-blackfriday.css.
   ========================================================================== */

.bf-root, body.aesthetic-blackfriday {
  --bf-black: #000000;
  --bf-ink: #0B0B0B;
  --bf-surface: #111111;
  --bf-surface-2: #181818;
  --bf-line: #2A2A2A;
  --bf-white: #FFFFFF;
  --bf-text-1: #F2F2F2;
  --bf-text-2: #BDBDBD;               /* 10,9:1 sur noir */
  --bf-red: #E5232F;                  /* 4,6:1 sur noir pour les grands chiffres */
  --bf-red-deep: #C1121F;             /* fonds rouges avec texte blanc : 6,2:1 */
  --bf-display: "Bodoni Moda", "Noto Kufi Arabic", Didot, "Times New Roman", serif;
  --bf-text: "Inter Tight", "Noto Kufi Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 0 · Lampe qui suit la souris (ordinateur) -------------------------------- */
body.aesthetic-blackfriday::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--bf-mx, -999px) var(--bf-my, -999px), rgba(255, 255, 255, 0.07), transparent 60%);
  mix-blend-mode: screen;
}

/* Apparition au défilement (ajoutée par le script, contenu visible sans lui) */
.bf-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--bf-ease), transform 0.8s var(--bf-ease); }
.bf-reveal.is-in { opacity: 1; transform: none; }

/* 1 · Bandeau défilant ---------------------------------------------------- */
.bf-ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--bf-red);
  background: var(--bf-red);
  color: var(--bf-white);
}
.bf-ticker__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 22px;
  padding-block: 9px;
  animation: bf-marquee 38s linear infinite;
}
.bf-ticker:hover .bf-ticker__track { animation-play-state: paused; }
.bf-ticker__item {
  font: 700 0.8125rem/1 var(--bf-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bf-ticker__sep { color: var(--bf-white); font-size: 0.75rem; opacity: 0.8; }

/* 2 · Scène d'ouverture ---------------------------------------------------- */
.bf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bf-black);
  color: var(--bf-white);
}
.bf-hero__stars { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.bf-hero__light {
  position: absolute;
  inset: -40% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), transparent 70%);
  background-size: 55% 70%;
  background-repeat: no-repeat;
  animation: bf-sweep 14s var(--bf-ease) infinite alternate;
  pointer-events: none;
}
.bf-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  max-width: 1440px;
  min-height: clamp(420px, 38vw, 560px);
  margin-inline: auto;
  padding-block: clamp(28px, 4vw, 56px) clamp(70px, 8vw, 110px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.bf-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.bf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  width: 100%;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font: 600 0.75rem/1.4 var(--bf-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bf-text-2);
}

/* Titre en lettres : chaque lettre tombe à l'ouverture, puis fuit le pointeur */
.bf-kinetic {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.22em;
  margin: 0;
  font-family: var(--bf-display);
  font-size: clamp(3.6rem, 1.6rem + 8.4vw, 10rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--bf-white);
  user-select: none;
}
.bf-kinetic__word { display: inline-flex; white-space: nowrap; }
.bf-kinetic__word--em { font-style: italic; font-weight: 500; }
.bf-kinetic__word--em::after { content: "."; color: var(--bf-red); }
.bf-ch {
  display: inline-block;
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--tr, 0deg));
  transition: transform 0.45s var(--bf-spring), color 0.3s ease;
  animation: bf-drop 0.9s calc(var(--i) * 55ms) var(--bf-ease) both;
}
.bf-kinetic.is-live .bf-ch { animation: none; }   /* après l'entrée, la lettre suit le pointeur */
.bf-ch.is-hot { color: var(--bf-red); }
.bf-hero__tag { display: none; }
.bf-hero__lead {
  max-width: 34em;
  margin: 0;
  font: 400 1.0625rem/1.55 var(--bf-text);
  color: var(--bf-text-2);
}
.bf-hero__date {
  margin: 0;
  font: 600 0.875rem/1.4 var(--bf-text);
  letter-spacing: 0.04em;
  color: var(--bf-white);
}

/* Compte à rebours à volets, façon tableau d'aéroport */
.bf-flap { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.bf-flap[hidden] { display: none; }
.bf-flap__lead {
  align-self: center;
  margin-inline-end: 4px;
  font: 600 0.6875rem/1.2 var(--bf-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bf-text-2);
}
.bf-flap__group { display: grid; justify-items: center; gap: 6px; }
.bf-flap__group small { font: 600 0.625rem/1 var(--bf-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bf-text-2); }
.bf-flap__digits { display: flex; gap: 3px; perspective: 300px; }
.bf-flap__card {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(34px, 2.6vw, 46px);
  height: clamp(48px, 3.6vw, 62px);
  border-radius: 6px;
  background: linear-gradient(180deg, #1C1C1C 0 49.5%, #000000 49.5% 50.5%, #151515 50.5%);
  box-shadow: inset 0 0 0 1px #2E2E2E, 0 8px 18px rgba(0, 0, 0, 0.6);
  transform-style: preserve-3d;
}
.bf-flap__card b {
  font: 500 clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem)/1 var(--bf-display);
  font-variant-numeric: tabular-nums;
  color: var(--bf-white);
}
.bf-flap__group:last-child .bf-flap__card b { color: var(--bf-red); }
.bf-flap__card.is-flip { animation: bf-flip 0.5s var(--bf-ease); }

.bf-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 0; }

/* Boutons : rideau rouge au survol, attirés par le pointeur (data-bf-magnetic) */
.bf-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 26px;
  overflow: hidden;
  border: 1px solid var(--bf-white);
  background: var(--bf-white);
  color: var(--bf-black);
  font: 700 0.8125rem/1 var(--bf-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s var(--bf-ease), transform 0.35s var(--bf-spring);
}
.bf-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bf-red-deep);
  transform: translateX(-101%);
  transition: transform 0.4s var(--bf-ease);
}
.bf-btn > * { position: relative; }
.bf-btn:hover,
.bf-btn:focus-visible { color: var(--bf-white); text-decoration: none; }
.bf-btn:hover::before,
.bf-btn:focus-visible::before { transform: none; }
.bf-btn:focus-visible { outline: 2px solid var(--bf-white); outline-offset: 3px; }
.bf-btn--ghost { background: transparent; color: var(--bf-white); }
.bf-btn__arrow { transition: transform 0.3s var(--bf-ease); }
.bf-btn:hover .bf-btn__arrow { transform: translateX(6px); }

/* Sceau qui tourne, barré d'un trait rouge */
.bf-hero__art { position: relative; display: grid; place-items: center; max-width: 100%; }
.bf-seal { position: absolute; top: -4%; inset-inline-end: -6%; z-index: 0; width: min(46%, 180px); height: auto; overflow: visible; opacity: 0.9; animation: bf-spin 26s linear infinite; }
.bf-seal text { fill: var(--bf-white); font: 600 13px var(--bf-text); letter-spacing: 0.32em; text-transform: uppercase; }
.bf-seal__core { position: absolute; top: 6%; inset-inline-end: 5%; z-index: 0; width: min(30%, 110px); font: italic 500 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--bf-display); color: var(--bf-white); text-align: center; }
.bf-slash {
  position: absolute;
  top: 12%;
  inset-inline-end: -4%;
  width: 40%;
  height: 4px;
  background: var(--bf-red);
  transform: rotate(-24deg) scaleX(0);
  transform-origin: 0 50%;
  animation: bf-slash 0.9s 0.9s var(--bf-ease) forwards;
}
.bf-hero--teaser .bf-slash { display: none; }

/* Bandeau géant en contour, entraîné par le défilement */
.bf-hero__giant {
  position: absolute;
  inset-inline: 0;
  bottom: -0.18em;
  overflow: hidden;
  font: italic 500 clamp(4rem, 2rem + 9vw, 11rem)/1 var(--bf-display);
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.bf-hero__giant span { display: inline-block; transform: translateX(var(--bf-scroll, 0)); }

@media (max-width: 767px) {
  .bf-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bf-hero__art { order: -1; width: min(300px, 80vw); margin-inline: auto; }
  .bf-flap__card { width: 30px; height: 44px; }
  .bf-flap__lead { flex-basis: 100%; }
}

/* 3 · Mur des chocs ---------------------------------------------------------- */
.bf-deals {
  max-width: 1440px;
  margin: 0 auto;
  padding-block: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 40px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--bf-black);
  box-shadow: 0 0 0 100vmax var(--bf-black);   /* fond noir pleine largeur, même dans un conteneur étroit */
  clip-path: inset(0 -100vmax);
  color: var(--bf-text-1);
}
.bf-deals__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--bf-line); }
.bf-deals__title { margin: 0; font: italic 500 clamp(2.2rem, 1.4rem + 3vw, 4rem)/1 var(--bf-display); color: var(--bf-white); }
.bf-deals__title::after { content: "."; color: var(--bf-red); }
.bf-deals__sub { max-width: 34em; margin: 0; font: 400 0.9375rem/1.5 var(--bf-text); color: var(--bf-text-2); }
.bf-deals__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bf-deal { perspective: 900px; }
.bf-deal__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--bf-line);
  background: var(--bf-surface);
  color: var(--bf-text-1);
  text-decoration: none;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.4s var(--bf-ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.bf-deal__link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bf-deal__link:hover,
.bf-deal__link:focus-visible { border-color: var(--bf-white); color: var(--bf-white); text-decoration: none; box-shadow: 0 30px 60px -30px rgba(229, 35, 47, 0.55); }
.bf-deal__link:hover::after { opacity: 1; }
.bf-deal__link:focus-visible { outline: 2px solid var(--bf-white); outline-offset: 3px; }
.bf-deal__media { position: relative; display: block; aspect-ratio: 1; background: #FFFFFF; }
.bf-deal__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--bf-ease); }
.bf-deal__link:hover .bf-deal__media img { transform: scale(1.06); }
.bf-deal__pct {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: 6px 10px;
  background: var(--bf-red-deep);
  color: #FFFFFF;
  font: 600 clamp(1.4rem, 1rem + 1vw, 1.9rem)/1 var(--bf-display);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  transform: translateZ(30px);
}
.bf-deal__body { display: grid; gap: 6px; padding: 14px 16px 6px; }
.bf-deal__brand { font: 700 0.6875rem/1.2 var(--bf-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-text-2); }
.bf-deal__name { font: 600 0.9375rem/1.35 var(--bf-text); }
.bf-deal__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bf-deal__was { font: 400 0.8125rem var(--bf-text); color: var(--bf-text-2); text-decoration-color: var(--bf-red); }
.bf-deal__now { font: 600 1.375rem/1.1 var(--bf-display); color: var(--bf-white); unicode-bidi: isolate; }
.bf-deal__go { margin-top: auto; padding: 10px 16px 14px; font: 700 0.75rem/1 var(--bf-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-red); }

/* 4 · Encart du jeu ------------------------------------------------------- */
.bf-arcade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  max-width: 1440px;
  margin: clamp(20px, 3vw, 40px) auto;
  padding: clamp(24px, 4vw, 48px);
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  border: 1px solid var(--bf-line);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bf-surface);
  color: var(--bf-text-1);
}
.bf-arcade__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.bf-arcade__kicker { margin: 0; font: 700 0.75rem/1 var(--bf-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--bf-red); }
.bf-arcade__title { margin: 0; font: italic 500 clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem)/0.95 var(--bf-display); color: var(--bf-white); }
.bf-arcade__lead { max-width: 30em; margin: 0; font: 400 1rem/1.55 var(--bf-text); color: var(--bf-text-2); }
.bf-arcade__screen { position: relative; height: 260px; overflow: hidden; border: 1px solid var(--bf-line); background: #000000; }
.bf-arcade__tag {
  position: absolute;
  top: -40px;
  left: var(--x);
  padding: 6px 10px;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  font: 600 1.125rem/1 var(--bf-display);
  animation: bf-fall 3.6s var(--d) linear infinite;
}
.bf-arcade__tag--hot { border-color: var(--bf-red); background: var(--bf-red-deep); }
.bf-arcade__stroller { position: absolute; bottom: 12px; left: 50%; width: 92px; height: 70px; animation: bf-stroll 3.6s ease-in-out infinite alternate; }

@media (max-width: 767px) {
  .bf-arcade { grid-template-columns: minmax(0, 1fr); }
  .bf-arcade__screen { height: 180px; }
}

/* 5 · Bouton flottant et fenêtre du jeu ----------------------------------- */
.bf-launcher {
  position: fixed;
  inset-inline-start: max(18px, env(safe-area-inset-left, 0px));
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));   /* au-dessus du panier volant du thème */
  z-index: 1450;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 52px;
  max-width: 52px;
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid #FFFFFF;
  border-radius: 26px;
  background: #000000;
  color: #FFFFFF;
  font: 700 0.75rem/1 var(--bf-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(229, 35, 47, 0.6);
  animation: bf-pulse 2.6s ease-out infinite;
  transition: max-width 0.4s var(--bf-ease), gap 0.4s var(--bf-ease), background-color 0.2s ease;
}
.bf-launcher svg { flex: none; }
.bf-launcher span { opacity: 0; transition: opacity 0.2s ease; }
.bf-launcher:hover,
.bf-launcher:focus-visible { max-width: 260px; gap: 10px; background: var(--bf-red-deep); border-color: var(--bf-red-deep); }
.bf-launcher:hover span,
.bf-launcher:focus-visible span { opacity: 1; }
.bf-launcher:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

.bf-game {
  width: min(420px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 0;
  border: 1px solid #FFFFFF;
  background: #000000;
  color: #FFFFFF;
}
.bf-game::backdrop { background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(4px); }
.bf-game__frame { display: flex; flex-direction: column; }
.bf-game__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #2A2A2A; }
.bf-game__title { margin: 0; font: italic 500 1.5rem/1 var(--bf-display); color: #FFFFFF; }
.bf-game__close { min-width: 44px; min-height: 44px; border: 0; background: none; color: #FFFFFF; font-size: 1.25rem; cursor: pointer; }
.bf-game__stage { position: relative; aspect-ratio: 360 / 560; max-height: calc(100vh - 120px); }
.bf-game__canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.bf-game__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.86);
  text-align: center;
}
.bf-game__overlay[hidden] { display: none; }
.bf-game__overlay h3 { margin: 0; font: italic 500 2.4rem/1 var(--bf-display); color: #FFFFFF; }
.bf-game__overlay p { margin: 0; max-width: 28em; font: 400 0.9375rem/1.5 var(--bf-text); color: var(--bf-text-2); }
.bf-game__big { font: 500 3.6rem/1 var(--bf-display); color: var(--bf-red); font-variant-numeric: tabular-nums; }
.bf-game__code {
  padding: 10px 18px;
  border: 2px dashed var(--bf-red);
  font: 700 1.5rem/1 var(--bf-text);
  letter-spacing: 0.14em;
  color: #FFFFFF;
  user-select: all;
}
.bf-game__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* 6 · Mouvement ------------------------------------------------------------- */
@keyframes bf-marquee { to { transform: translateX(-50%); } }
@keyframes bf-sweep { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
@keyframes bf-drop { from { opacity: 0; transform: translateY(-0.6em) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes bf-spin { to { transform: rotate(360deg); } }
@keyframes bf-slash { to { transform: rotate(-24deg) scaleX(1); } }
@keyframes bf-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); filter: brightness(1.6); } 100% { transform: rotateX(0); } }
@keyframes bf-fall { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(320px) rotate(8deg); } }
@keyframes bf-stroll { from { transform: translateX(-160%); } to { transform: translateX(60%); } }
@keyframes bf-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 35, 47, 0.6); } 70%, 100% { box-shadow: 0 0 0 16px rgba(229, 35, 47, 0); } }

html.lmdb-calm .bf-ticker__track,
html.lmdb-calm .bf-hero__light,
html.lmdb-calm .bf-seal,
html.lmdb-calm .bf-arcade__tag,
html.lmdb-calm .bf-arcade__stroller,
html.lmdb-calm .bf-launcher { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .bf-ticker__track,
  .bf-hero__light,
  .bf-seal,
  .bf-ch,
  .bf-flap__card.is-flip,
  .bf-arcade__tag,
  .bf-arcade__stroller,
  .bf-launcher { animation: none !important; }
  .bf-arcade__tag { top: 30%; }
  .bf-slash { animation: none !important; transform: rotate(-24deg); }
  .bf-reveal { opacity: 1; transform: none; transition: none; }
  .bf-btn::before,
  .bf-btn__arrow,
  .bf-ch,
  .bf-deal__link,
  .bf-deal__media img { transition: none; }
  body.aesthetic-blackfriday::after { display: none; }
}
@media (hover: none) {
  body.aesthetic-blackfriday::after { display: none; }
}
@media (forced-colors: active) {
  .bf-hero__light,
  .bf-hero__stars,
  .bf-slash,
  .bf-hero__giant { display: none; }
}
.lang-rtl .bf-ticker__item,
.lang-rtl .bf-hero__meta,
.lang-rtl .bf-btn,
.lang-rtl .bf-deal__brand,
.lang-rtl .bf-launcher { letter-spacing: 0; }
.lang-rtl .bf-ticker__track { animation-direction: reverse; }

/* ==========================================================================
   Bannière Black Friday (remplace les visuels du slider d'accueil)
   ========================================================================== */
.bf-slide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(12px, 3vw, 48px);
  aspect-ratio: 3 / 1;
  padding: clamp(16px, 3.4vw, 56px) clamp(18px, 4.6vw, 80px);
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 78% 50%, rgba(229, 35, 47, 0.28), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 32px,
    #000000;
  color: #FFFFFF;
  font-family: var(--bf-text);
  text-align: start;
}
.bf-slide__copy { position: relative; z-index: 2; display: grid; gap: clamp(4px, 0.8vw, 12px); justify-items: start; }
.bf-slide__kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font: 700 clamp(0.6rem, 0.9vw, 0.8rem)/1.2 var(--bf-text); letter-spacing: 0.18em; text-transform: uppercase; color: #BDBDBD; }
.bf-slide__kicker span:first-child { color: #FFFFFF; }
.bf-slide__kicker span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--bf-red); vertical-align: 1px; }
.bf-slide__name { margin: 0; font: italic 500 clamp(1.3rem, 3.4vw, 3.6rem)/1 var(--bf-display); letter-spacing: -0.01em; }
.bf-slide__pct { display: flex; align-items: baseline; gap: 10px; margin: 0; line-height: 0.85; }
.bf-slide__pct small { font: 600 clamp(0.7rem, 1vw, 0.95rem)/1 var(--bf-text); letter-spacing: 0.12em; text-transform: uppercase; color: #BDBDBD; }
.bf-slide__pct b { font: 500 clamp(3rem, 9vw, 10rem)/0.85 var(--bf-display); letter-spacing: -0.04em; color: #FFFFFF; unicode-bidi: isolate; }
.bf-slide__pct b i { font-style: italic; color: var(--bf-red); }
.bf-slide__cta {
  display: inline-flex;
  gap: 10px;
  margin-top: clamp(4px, 0.8vw, 10px);
  padding: clamp(8px, 0.9vw, 14px) clamp(14px, 1.6vw, 24px);
  background: #FFFFFF;
  color: #000000;
  font: 700 clamp(0.62rem, 0.85vw, 0.8rem)/1 var(--bf-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.bs-s:hover .bf-slide__cta { background: var(--bf-red); color: #FFFFFF; }
.bf-slide__shots { position: relative; z-index: 1; height: 100%; min-height: 0; }
.bf-slide__shot {
  position: absolute;
  top: 50%;
  inset-inline-start: calc(var(--j) * 30%);
  width: 40%;
  aspect-ratio: 1;
  padding: 6%;
  background: #FFFFFF;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) rotate(calc((var(--j) - 1) * 6deg)) translateY(calc((var(--j) - 1) * 6%));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bf-slide__shot:nth-child(2) { z-index: 2; width: 46%; }
.bf-slide__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bs-s:hover .bf-slide__shot { transform: translateY(-50%) rotate(calc((var(--j) - 1) * 10deg)) translateY(calc((var(--j) - 1) * -4%)); }
.bf-slide__num {
  position: absolute;
  inset-inline-end: clamp(10px, 2vw, 32px);
  bottom: clamp(-20px, -1vw, -6px);
  font: italic 500 clamp(4rem, 12vw, 13rem)/1 var(--bf-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
@media (max-width: 640px) {
  .bf-slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; aspect-ratio: 4 / 5; align-items: start; }
  .bf-slide__shots { min-height: 52%; }
  .bf-slide__shot { width: 44%; inset-inline-start: calc(var(--j) * 28%); }
  .bf-slide__shot:nth-child(2) { width: 50%; }
  .bf-slide__name { font-size: 2rem; }
  .bf-slide__pct b { font-size: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-slide__shot { transition: none; }
}
.lang-rtl .bf-slide__kicker,
.lang-rtl .bf-slide__cta,
.lang-rtl .bf-slide__pct small { letter-spacing: 0; }

/* ==========================================================================
   Bébé au biberon, pastille « jusqu'à », « % » en relief, étiquettes volantes
   ========================================================================== */
.bf-pill { position: relative; display: inline-flex; align-items: center; margin: 18px 0 0; padding-inline-start: 44px; }
.bf-pill b {
  padding: 0.08em 0.32em 0.12em;
  border-radius: 0.22em;
  background: var(--bf-red);
  color: var(--bf-white);
  font: 800 clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem)/1 var(--bf-text);
  letter-spacing: -0.03em;
  unicode-bidi: isolate;
  box-shadow: 0 18px 40px -16px rgba(229, 35, 47, 0.8);
}
.bf-pill__burst {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 78px;
  aspect-ratio: 1;
  margin-top: -39px;
  background: var(--bf-white);
  clip-path: polygon(50% 0, 61% 12%, 77% 6%, 80% 22%, 96% 26%, 90% 41%, 100% 54%, 88% 64%, 92% 80%, 76% 82%, 68% 97%, 54% 89%, 40% 100%, 33% 85%, 17% 89%, 16% 73%, 1% 66%, 10% 52%, 2% 37%, 17% 31%, 18% 14%, 34% 15%);
  animation: bf-spin 18s linear infinite;
}
.bf-pill__burst span {
  color: var(--bf-black);
  font: 800 0.72rem/1 var(--bf-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-14deg);
  animation: bf-spin 18s linear infinite reverse;
}

.bf-baby { position: relative; z-index: 1; width: min(100%, 360px); margin-top: 18%; }
.bf-baby__svg { display: block; width: 100%; height: auto; overflow: visible; animation: bf-baby-bob 3.2s ease-in-out infinite; }
.bf-baby__eyes { transform-box: fill-box; transform-origin: center; animation: bf-blink 4.6s infinite; }
.bf-baby__curl { transform-box: fill-box; transform-origin: bottom center; animation: bf-curl 2.2s ease-in-out infinite; }
.bf-baby__milk { transform: translateY(calc(var(--drain, 0) * 92px)); transition: transform 3.6s linear; }
.bf-baby.is-refill .bf-baby__milk { transition: transform 0.5s ease-out; }
.bf-baby__bubble {
  position: absolute;
  top: -22%;
  inset-inline-start: -14%;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-width: 170px;
  max-width: 230px;
  padding: 12px 16px 14px;
  border-radius: 18px;
  background: var(--bf-white);
  color: var(--bf-black) !important;
  text-decoration: none !important;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9);
  transform-origin: 80% 100%;
  transition: transform 0.3s var(--bf-ease);
}
.bf-baby__bubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  inset-inline-end: 26%;
  border: 12px solid transparent;
  border-top-color: var(--bf-white);
  border-bottom: 0;
}
.bf-baby__bubble:hover { transform: rotate(-2deg) scale(1.04); }
.bf-baby__bubble.is-swap { animation: bf-pop 0.5s var(--bf-ease); }
.bf-baby__name { overflow: hidden; color: #555555; font: 600 0.72rem/1.25 var(--bf-text); white-space: nowrap; text-overflow: ellipsis; }
.bf-baby__was { color: #7A7A7A; font: 500 0.85rem/1.1 var(--bf-text); }
.bf-baby__now { color: var(--bf-red); font: 800 1.6rem/1.05 var(--bf-text); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.bf-baby__stamp {
  position: absolute;
  top: -16px;
  inset-inline-end: -18px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bf-red);
  color: var(--bf-white);
  font: 800 0.95rem/1 var(--bf-text);
  opacity: 0;
  transform: scale(2.4) rotate(-30deg);
}
.bf-baby__stamp.is-on { animation: bf-stamp 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }

.bf-floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bf-float { position: absolute; height: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.6)); animation: bf-float 7s ease-in-out infinite; }
.bf-float--1 { inset-inline-start: 2%; bottom: 16%; width: clamp(70px, 9vw, 140px); }
.bf-float--2 { inset-inline-end: 34%; top: 6%; width: clamp(50px, 6vw, 96px); animation-duration: 9s; animation-delay: -2s; }
.bf-float--3 { inset-inline-end: 2%; bottom: 8%; width: clamp(80px, 10vw, 160px); animation-duration: 8s; animation-delay: -4s; }

/* Étiquettes de prix qui traversent les pages */
.bf-flyers { position: fixed; inset: 0; z-index: 1300; overflow: hidden; pointer-events: none; }
.bf-flyer {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 1px 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 4px;
  background: var(--bf-red);
  color: var(--bf-white) !important;
  text-decoration: none !important;
  font-family: var(--bf-text);
  white-space: nowrap;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px);
  mask: radial-gradient(circle at 0 50%, transparent 4px, #000 4.5px);
  opacity: 0.92;
}
.bf-flyer--white { background: var(--bf-white); color: var(--bf-black) !important; }
.bf-flyer--black { background: #000000; color: var(--bf-white) !important; box-shadow: 0 0 0 1px var(--bf-white), 0 16px 30px -12px rgba(0, 0, 0, 0.7); }
.bf-flyer__pct { grid-row: span 2; font: 800 0.95rem/1 var(--bf-text); letter-spacing: -0.02em; unicode-bidi: isolate; }
.bf-flyer__was { position: relative; font: 500 0.56rem/1 var(--bf-text); opacity: 0.8; unicode-bidi: isolate; }
.bf-flyer__was::after { content: ""; position: absolute; inset-inline: -2px; top: 50%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; animation: bf-strike 0.6s 0.6s var(--bf-ease) forwards; }
.bf-flyer__now { font: 800 0.68rem/1 var(--bf-text); unicode-bidi: isolate; }
.bf-flyer:hover,
.bf-flyer:focus-visible { outline: 2px solid var(--bf-white); outline-offset: 2px; }
.bf-flyer.is-pop { animation: bf-pop 0.4s var(--bf-ease); }

@keyframes bf-baby-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-1.5deg); } }
@keyframes bf-blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.1); } }
@keyframes bf-curl { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes bf-pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes bf-stamp { to { opacity: 1; transform: scale(1) rotate(-12deg); } }
@keyframes bf-float { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-22px) rotate(10deg); } }
@keyframes bf-strike { to { transform: scaleX(1); } }

@media (max-width: 767px) {
  .bf-baby { margin-top: 26%; }
  .bf-baby__bubble { inset-inline-start: -4%; min-width: 150px; }
  .bf-float--2 { display: none; }
  .bf-pill__burst { width: 64px; margin-top: -32px; }
  .bf-pill { padding-inline-start: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-baby__svg,
  .bf-baby__eyes,
  .bf-baby__curl,
  .bf-float,
  .bf-pill__burst,
  .bf-pill__burst span { animation: none !important; }
  .bf-flyers { display: none; }
}
html.lmdb-calm .bf-flyers { display: none; }