/* ============================================================
   Promo bar "Jeu concours Muse" — concert edition.

   The behaviour is the Céline Dion bar's (promo-celine.css): one markup block
   reshaped by media query, a full-width bar above the tab bar on phones, a card
   in the bottom-left corner from 768px, a 56px cube when folded. What changes is
   the look: a night-stage card instead of the violet promo strip — a thumbnail of
   the guitarist in backlight with a small equalizer, a stage-light sweep across
   the card, gold for the prize (the word Muse, the countdown, the button), and a
   folded cube that is a little stage of its own: a glossy red-and-gold gift in a
   beam of light that hops now and then (the Céline cube had a gift too, so
   returning visitors know what it is). In the last week a badge on the cube
   counts the days ("6 j"); on desktop a label says what the gift is on hover.

   Remove promo-celine.css/.js and its markup when this goes live: both use the
   .avt-promo classes, and promo-celine.css also carries a temporary override of
   .bannerMain .bPortrait (Céline's photo) that would replace the picture of any
   later banner using that class.

   Site numbers kept as they were:
   - .mobile-nav is 56px tall and disappears at 1200px;
   - z-index 1090 keeps the bar under .common-up (1100), .fixed-phones (1101),
     .mobile-nav (1102) and .rgpd (1103);
   - the desktop card sits bottom LEFT, clear of .common-up on the right.
   ============================================================ */

.avt-promo,
.avt-promo *,
.avt-promo-cube,
.avt-promo-cube * { box-sizing: border-box; }

/* [hidden] has to beat display:flex */
.avt-promo[hidden],
.avt-promo-cube[hidden] { display: none !important; }

/* ---------- Bar, mobile layout (default) ---------- */
.avt-promo {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 56px;                 /* .mobile-nav height */
  width: 100%;
  max-width: 430px;
  z-index: 1090;
  padding: 12px 8px 8px;        /* 12px on top: room for the close button */
  font-family: Arial, sans-serif;
  animation: avtPromoUp .32s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
.avt-promo-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  border-radius: 14px;
  /* the site's own violet (its header is #5F27CD), a shade deeper so the gold and
     the white still carry: white 9:1, the lavender lines 5:1 and more */
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(150, 110, 255, .5) 0%, rgba(150, 110, 255, 0) 60%),
    linear-gradient(135deg, #5530C4 0%, #4121A0 62%, #33198A 100%);
  border: 1px solid rgba(254, 202, 87, .45);
  box-shadow: 0 14px 34px rgba(12, 7, 32, .5), 0 0 22px rgba(254, 202, 87, .14);
  overflow: hidden;
  text-decoration: none;
  color: #FBF9FF;
}
/* stage light passing over the card every few seconds */
.avt-promo-sweep {
  position: absolute;
  inset: -20% -40%;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .13) 46%,
              rgba(254, 202, 87, .16) 50%, rgba(255, 255, 255, 0) 60%);
  transform: translateX(-70%);
  animation: avtSweep 6s ease-in-out 1.2s infinite;
}
/* the guitarist in backlight, with an equalizer on his feet */
.avt-promo-art {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 11px;
  overflow: hidden;
  background: #2E1680;
  border: 1px solid rgba(220, 204, 255, .28);
}
.avt-promo-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avt-promo-art::after {         /* dark floor so the equalizer reads over the photo */
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(0deg, rgba(12, 7, 32, .8) 0%, rgba(12, 7, 32, 0) 100%);
}
.avt-promo-eq {
  position: absolute;
  z-index: 1;
  left: 5px;
  bottom: 5px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.avt-promo-eq i {
  display: block;
  width: 2.5px;
  height: 100%;
  border-radius: 1px;
  background: #FECA57;
  box-shadow: 0 0 4px rgba(254, 202, 87, .8);
  transform-origin: bottom;
  animation: avtEq .9s ease-in-out infinite alternate;
}
.avt-promo-eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.avt-promo-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
.avt-promo-eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.2s; }

.avt-promo-text {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.avt-promo-kicker {             /* shown from 768px */
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FECA57;
}
.avt-promo-dot {
  width: 6px; height: 6px; min-width: 6px;
  border-radius: 50%;
  background: #FF5A7A;
  box-shadow: 0 0 0 0 rgba(255, 90, 122, .6);
  animation: avtLive 1.8s infinite;
}
.avt-promo-title {
  text-wrap: balance;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.2px;
  color: #FBF9FF;
}
.avt-promo-name {               /* Muse, in gold */
  background: linear-gradient(180deg, #FFE8A3 0%, #FECA57 55%, #E9A92E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 14px rgba(254, 202, 87, .35);
}
.avt-promo-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.avt-promo-timer-label {
  font-size: 10.5px;
  line-height: 1;
  color: #C9BCEB;
}
.avt-promo-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}
.avt-promo-clock b {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #FFD978;
}
.avt-promo-clock i {
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  color: #C9BCEB;
  margin: 0 5px 0 1px;
}
.avt-promo-clock i:last-child { margin-right: 0; }
/* last day: no "0 j" */
.avt-promo--lastday [data-promo-d],
.avt-promo--lastday [data-promo-d] + i { display: none; }

.avt-promo-cta {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 32px;
  padding: 0 11px;
  border-radius: 9px;
  background: linear-gradient(180deg, #FFE08A 0%, #FECA57 55%, #F0B23A 100%);
  border-bottom: 2px solid #C98E1F;
  box-shadow: 0 0 16px rgba(254, 202, 87, .35);
  color: #241444;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.avt-promo-close {
  position: absolute;
  top: 0;
  right: 2px;
  width: 28px; height: 28px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(254, 202, 87, .45);
  border-radius: 50%;
  background: #3A1C8C;
  color: #FBF9FF;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba(12, 7, 32, .45);
  z-index: 1;
}

/* ---------- Swipe to dismiss ----------
   The offsets ride on custom properties so the drag composes with whatever
   transform the layout already uses: on phones the wrapper is centred with
   translateX(-50%), on desktop it is not, and the entrance keyframes hold their
   own transform with animation-fill-mode:forwards. Moving the inner elements
   instead of the wrapper sidesteps all three.

   touch-action:none on the wrapper: without it the browser scrolls the page on a
   downward drag and the gesture never reaches the script. Only the bar carries it,
   the cube keeps normal behaviour. Taps are unaffected — the CTA still opens. */
.avt-promo { touch-action: none; }

.avt-promo-bar,
.avt-promo-close {
  transform: translate(var(--avt-dx, 0px), var(--avt-dy, 0px));
  transition: transform .22s ease, opacity .22s ease;
}
.avt-promo-bar { opacity: var(--avt-op, 1); }

/* Пока палец на экране — никаких переходов, иначе элемент тянется за пальцем с запозданием */
.avt-promo--dragging .avt-promo-bar,
.avt-promo--dragging .avt-promo-close { transition: none; }

/* ---------- Collapsed state: the gift cube ----------
   A small night stage: a beam of light from above, a warm glow on the floor, and
   a glossy red gift with a gold ribbon standing in it — the same gold as the
   frame, the countdown and the button, and red as the one warm colour that makes
   the cube catch the eye on the violet site. The gift keeps clear of the frame,
   with room above it for the hop.
   Every 5 s the gift hops and wiggles, as if it wanted to be opened, and a gold
   ring leaves the cube at the moment it lands; three sparks twinkle in between.
   Held to the left edge of the screen (the Céline bar learned this the hard way:
   anchoring it to the 430px column slid it to the middle on landscape phones). */
.avt-promo-cube {
  position: fixed;
  bottom: 74px;                                  /* clears the tab-bar */
  left: 10px;
  z-index: 1090;
  width: 60px; height: 60px;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(254, 202, 87, .62);
  border-radius: 18px;
  background:
    radial-gradient(70% 55% at 50% 78%, rgba(255, 64, 96, .38) 0%, rgba(255, 64, 96, 0) 100%),
    linear-gradient(165deg, #5B34D2 0%, #4121A0 55%, #2E1680 100%);
  box-shadow: 0 12px 26px rgba(12, 7, 32, .5), 0 0 22px rgba(254, 202, 87, .22),
              inset 0 1px 0 rgba(255, 236, 170, .18);
  display: block;
  font-family: Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  animation: avtCubeIn .34s cubic-bezier(.2, .9, .3, 1.3);   /* no fill: :hover may move it afterwards */
}
.avt-promo-cube-stage {                          /* beam + floor, clipped to the cube */
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.avt-promo-cube-stage::before {                  /* the beam */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 236, 170, .30) 0%, rgba(255, 236, 170, .08) 60%, rgba(255, 236, 170, 0) 85%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}
.avt-promo-cube-stage::after {                   /* the floor it stands on */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 40px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .45), rgba(255, 90, 110, .18) 60%, rgba(255, 90, 110, 0));
}
.avt-promo-cube-gift {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(12, 7, 32, .55));
  transform-origin: 50% 92%;
  animation: avtGiftHop 5s ease-in-out 1.4s infinite;
}
.avt-promo-cube-ring {                           /* a gold ring leaves the cube as the gift lands */
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  pointer-events: none;
  animation: avtRing 5s ease-out 1.4s infinite;
}
.avt-promo-cube-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #FFE8A0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  pointer-events: none;
  animation: avtTwinkle 2.8s ease-in-out infinite;
}
.avt-promo-cube-spark--1 { top: 9px; left: 5px; }
.avt-promo-cube-spark--2 { top: 3px; right: 3px; width: 10px; height: 10px; animation-delay: .9s; }
.avt-promo-cube-spark--3 { bottom: 16px; right: 3px; width: 6px; height: 6px; animation-delay: 1.8s; }
.avt-promo-cube-tip { display: none; }            /* desktop hover label, see the 768px block */
.avt-promo-cube-badge[hidden] { display: none; }   /* shown in the last 7 days only */
.avt-promo-cube-badge {
  position: absolute;
  top: -9px;
  right: -11px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1.5px solid #FECA57;
  background: linear-gradient(180deg, #FF5B78 0%, #E3234A 100%);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(12, 7, 32, .45);
}

/* ---------- Voyant profile: out of the way on phones ----------
   The profile already carries .fixed-phones, a 100px panel at bottom:56px with
   the call buttons. Together with the tab bar and the promo that was three fixed
   layers stacked on a phone screen, so the bar steps aside there entirely.

   Keyed off the presence of .fixed-phones rather than off the URL: the panel is
   what creates the conflict, it lives only in voyant.tpl and
   voyant/voyant-phone-fixed.tpl, and it is in the DOM on every voyant profile
   whether the voyant is online or not (offline it only gets .fixed-phones--hidden).
   Phones only: from 768px style.css hides the panel with visibility:hidden, and
   the promo is a small corner card by then, so the two no longer collide. */
@media (max-width: 767px) {
  body:has(.fixed-phones) .avt-promo,
  body:has(.fixed-phones) .avt-promo-cube { display: none !important; }
}

/* ---------- Recrutement ----------
   That page has its own sticky CTA, .recrute-button at bottom:68px with z-index 1,
   which the bar would cover. But .recrute-button is itself switched off from 1200px
   (display:none !important in style.css), so the conflict exists on phones and
   tablets only and the desktop card can stay.
   body.recrutement is set by the PHP layer, so this holds whatever the URI is. */
@media (max-width: 1199px) {
  body.recrutement .avt-promo,
  body.recrutement .avt-promo-cube { display: none !important; }
}

/* ---------- Phones: hold the bar back on the home page ----------
   On phones the bar is a full width strip. On the home page it would land right
   under the hero slider that carries the SAME campaign — two Muse offers on one
   screen at once. So there it stays out of the way until the hero slider
   has scrolled off. Every other page has nothing to clash with and shows the bar
   straight away. promo-muse.js decides when and only adds the body class.

   The gate is CSS, not JS, deliberately: the script is deferred, so hiding from
   JS would let the bar paint first and then vanish. Above 767px the rule does not
   exist at all — the corner card shows immediately, as before. */
@media (max-width: 767px) {
  body:not(.avt-promo-ready) .avt-promo,
  body:not(.avt-promo-ready) .avt-promo-cube { display: none !important; }
}

/* ---------- Narrow phones ---------- */
@media (max-width: 400px) {
  .avt-promo-bar { gap: 8px; padding: 8px 10px 8px 8px; }
  .avt-promo-art { width: 46px; height: 46px; }
  .avt-promo-title { font-size: 12.5px; }
  .avt-promo-cta { padding: 0 9px; font-size: 11px; height: 30px; }
  .avt-promo-timer-label { display: none; }
}
@media (max-width: 345px) {
  .avt-promo-art { width: 40px; height: 40px; }
  .avt-promo-eq { left: 4px; bottom: 4px; height: 11px; }
  .avt-promo-title { font-size: 11.5px; letter-spacing: -.3px; }
  .avt-promo-cta { padding: 0 7px; font-size: 10.5px; height: 28px; }
  .avt-promo-clock b { font-size: 11px; }
}

/* ---------- Tablet and desktop: floating card, bottom left ----------
   Between 768 and 1199 the tab bar is still on screen, so the card sits at
   80px; from 1200px it drops to 24px off the bottom edge. */
@media (min-width: 768px) {
  .avt-promo {
    left: 24px;
    right: auto;
    bottom: 80px;
    transform: none;
    width: 468px;
    max-width: calc(100vw - 48px);
    padding: 0;
    animation: avtCardIn .36s cubic-bezier(.2, .9, .3, 1.15) forwards;
  }
  .avt-promo-bar {
    gap: 14px;
    padding: 12px 16px 12px 12px;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(12, 7, 32, .5), 0 0 28px rgba(254, 202, 87, .16);
  }
  .avt-promo-art { width: 68px; height: 68px; border-radius: 13px; }
  .avt-promo-eq { left: 7px; bottom: 6px; height: 16px; gap: 2px; }
  .avt-promo-eq i { width: 3px; }
  .avt-promo-kicker { display: flex; }
  .avt-promo-text { gap: 6px; }
  .avt-promo-title { font-size: 16px; letter-spacing: -.3px; }
  .avt-promo-clock { gap: 3px; }
  .avt-promo-clock b {
    display: inline-block;
    min-width: 24px;
    padding: 3px 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(220, 204, 255, .18);
    text-align: center;
    font-size: 12.5px;
  }
  .avt-promo-clock i { margin: 0 4px 0 2px; }
  .avt-promo-cta { height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
  .avt-promo-cta:hover { filter: brightness(1.05); }
  .avt-promo-close { top: -10px; right: -10px; }

  .avt-promo-cube {
    left: 24px;
    right: auto;
    bottom: 80px;
    width: 64px; height: 64px;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .avt-promo-cube-gift { width: 46px; height: 46px; margin-left: -23px; }
  .avt-promo-cube:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(12, 7, 32, .5), 0 0 30px rgba(254, 202, 87, .38),
                inset 0 1px 0 rgba(255, 236, 170, .18);
  }
  .avt-promo-cube:hover .avt-promo-cube-gift { animation: avtGiftHover .45s ease-out forwards; }

  /* hover label: what the gift is, without opening the card */
  .avt-promo-cube-tip {
    display: block;
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    padding: 9px 13px;
    border-radius: 11px;
    border: 1px solid rgba(254, 202, 87, .45);
    background: linear-gradient(135deg, #5530C4 0%, #3A1C8C 100%);
    box-shadow: 0 10px 24px rgba(12, 7, 32, .45);
    color: #FBF9FF;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-6px, -50%);
    transition: opacity .2s ease, transform .2s ease;
  }
  .avt-promo-cube-tip b { color: #FECA57; }
  .avt-promo-cube:hover .avt-promo-cube-tip,
  .avt-promo-cube:focus-visible .avt-promo-cube-tip { opacity: 1; transform: translate(0, -50%); }
}

/* Tab bar is gone from here, so the card drops to the bottom edge. */
@media (min-width: 1200px) {
  .avt-promo,
  .avt-promo-cube { bottom: 24px; }
}

/* ---------- Scroll-to-top button vs the promo ----------
   On phones the bar spans the full width and the button sits on top of it, so the
   button steps aside entirely while the bar is out. It comes back as soon as the
   bar is collapsed to the cube: the cube is 54px in the left corner and the button
   is on the right, so there is nothing left to collide with.
   From 768px the card sits in the bottom LEFT corner while .common-up stays on the
   right, so above that the button is never touched.
   body:not(.recrutement) matters: below 1200px the bar there is display:none, but
   :has(.avt-promo:not([hidden])) still matches — the element is in the DOM and the
   hidden ATTRIBUTE is not what hides it — so without this the button would be
   lifted on /recrutement to clear a bar that is not on screen.
   body.avt-promo-ready is part of the condition for the same reason it is on
   /recrutement: while the bar is still held back it is display:none, but
   :has(.avt-promo:not([hidden])) keeps matching, and the arrow would be pushed up
   to clear something that is not on screen yet.
   Offsets leave a 24px gap above the bar — at 136px the arrow sat 4px from it.
   :not(:has(.fixed-phones)) is the same guard for the voyant profile, where the
   bar is now hidden outright. */
@media (max-width: 767px) {
  body.avt-promo-ready:not(.recrutement):not(:has(.fixed-phones)):has(.avt-promo:not([hidden])) .common-up { display: none !important; }
}

@keyframes avtPromoUp {
  from { transform: translateX(-50%) translateY(18px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes avtCardIn {
  from { transform: translateY(18px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes avtCubeIn {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes avtGiftHop {                          /* squash, jump, wiggle, settle */
  0%, 70%, 100% { transform: translateY(0) rotate(0) scale(1, 1); }
  74% { transform: translateY(0) rotate(0) scale(1.08, .9); }
  80% { transform: translateY(-7px) rotate(-8deg) scale(.96, 1.05); }
  86% { transform: translateY(0) rotate(6deg) scale(1.06, .94); }
  90% { transform: translateY(0) rotate(-4deg) scale(1, 1); }
  94% { transform: translateY(0) rotate(2deg); }
  97% { transform: translateY(0) rotate(0); }
}
@keyframes avtGiftHover {
  to { transform: translateY(-4px) scale(1.07); }
}
@keyframes avtTwinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0); }
  45% { opacity: 1; transform: scale(1) rotate(45deg); }
  60% { opacity: .9; transform: scale(.9) rotate(60deg); }
}
@keyframes avtSweep {
  0%   { transform: translateX(-70%); }
  35%  { transform: translateX(70%); }
  100% { transform: translateX(70%); }
}
@keyframes avtEq {
  0%   { transform: scaleY(.25); }
  100% { transform: scaleY(1); }
}
@keyframes avtLive {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 122, .6); }
  70%  { box-shadow: 0 0 0 6px rgba(255, 90, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 122, 0); }
}
@keyframes avtRing {                             /* fires as the gift lands (86% of avtGiftHop) */
  0%, 85% { box-shadow: 0 0 0 0 rgba(254, 202, 87, 0); }
  86%  { box-shadow: 0 0 0 0 rgba(254, 202, 87, .6); }
  100% { box-shadow: 0 0 0 14px rgba(254, 202, 87, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .avt-promo,
  .avt-promo-cube,
  .avt-promo-sweep,
  .avt-promo-eq i,
  .avt-promo-dot,
  .avt-promo-cube-ring,
  .avt-promo-cube-gift,
  .avt-promo-cube-spark { animation: none; }
  .avt-promo-cube-spark--2 { opacity: .8; }
  .avt-promo-cube,
  .avt-promo-cube-tip { transition: none; }
  .avt-promo-sweep { display: none; }
  .avt-promo-eq i { transform: scaleY(.6); }
  .avt-promo-bar,
  .avt-promo-close { transition: none; }
}