/* ==========================================================================
   GrowLED - Live Ticker - Jaune Flat
   Fond #E7BE5C, contenu violet #240630.
   ========================================================================== */
.ban-promo-wrap{margin:0 !important}
.glt{
  --glt-bg:#E7BE5C;
  --glt-ink:#240630;
  --glt-ink-2:#3c0d55;
  --glt-yellow:#f4d906;
  --glt-yellow-2:#ffe94a;
  --glt-pink-2:#e44b95;
  --glt-green:#82c341;
  --glt-green-2:#9ed664;
  --glt-h:40px;
  --glt-dur:62s;
  --glt-gap:42px;
  position:relative;
  display:flex;
  align-items:stretch;
  height:var(--glt-h);
  background:#E7BE5C;
  border-top:none !important;
  border-bottom:#BC9A4A 4px solid !important;
  overflow:hidden;
  font-family:inherit;
  color:var(--glt-ink);
  z-index:5;
  isolation:isolate;
  contain:layout paint;
}
.glt *{box-sizing:border-box}
.glt__live{
  position:relative;z-index:2;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:0 16px 0 14px;
  color:var(--glt-ink);
  font-size:10.5px;font-weight:800;letter-spacing:1.4px;line-height:1;
  border-right:1px solid rgba(36,6,48,.22);
}
.glt__dot{
  position:relative;
  width:6px;height:6px;border-radius:50%;background:currentColor;
}
.glt__dot::after{
  content:"";
  position:absolute;top:50%;left:50%;width:6px;height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;background:currentColor;pointer-events:none;
  animation:glt-dot 1.8s ease-out infinite;
  transform-origin:center;
}
@keyframes glt-dot{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(3.4);opacity:0}
  100%{transform:scale(3.4);opacity:0}
}
.glt__viewport{
  position:relative;z-index:1;flex:1;min-width:0;overflow:hidden;
  display:flex;align-items:center;
}
.glt__viewport::before,
.glt__viewport::after{
  content:"";position:absolute;top:0;bottom:0;width:24px;
  pointer-events:none;z-index:3;
}
.glt__viewport::before{left:0;background:linear-gradient(to right,#E7BE5C 0%,rgba(231,190,92,0) 100%)}
.glt__viewport::after{right:0;background:linear-gradient(to left,#E7BE5C 0%,rgba(231,190,92,0) 100%)}
.glt__track{
  list-style:none;margin:0;padding:0 var(--glt-gap) 0 0;
  display:flex;align-items:center;gap:var(--glt-gap);
  white-space:nowrap;
  animation:glt-scroll var(--glt-dur) linear infinite;
  will-change:transform;
}
.glt[data-pause-hover="1"]:hover .glt__track,
.glt[data-pause-hover="1"]:focus-within .glt__track{animation-play-state:paused}
/* Pause ALL animations when offscreen — saves CPU/GPU during page scroll */
.glt.glt-offscreen .glt__track,
.glt.glt-offscreen .glt__dot::after,
.glt.glt-scrolling .glt__track,
.glt.glt-scrolling .glt__dot::after{animation-play-state:paused !important}

/* ---------- Static rotation mode (mobile / reduced-motion) ----------
   Continuous CSS animation is the worst offender for mobile scroll
   smoothness. In static mode the track stops moving entirely; items
   stack absolutely and we cross-fade one at a time via JS every 5s.
   Compositor activity drops to ~0 between transitions.
   ------------------------------------------------------------------ */
.glt--static .glt__track{
  animation:none !important;
  transform:none !important;
  display:block;
  position:relative;
  height:100%;
  padding:0;
  gap:0;
}
.glt--static .glt__viewport::before,
.glt--static .glt__viewport::after{display:none}
.glt--static .glt__item{
  position:absolute;
  top:0;left:0;right:0;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:0 10px;gap:8px;
  opacity:0;pointer-events:none;
  transition:opacity 350ms ease;
}
.glt--static .glt__item.is-current{opacity:1;pointer-events:auto}
.glt--static .glt__dot::after{animation:none;opacity:0}
.glt--static .glt__text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}
.glt--static .glt__ico,
.glt--static .glt__code,
.glt--static .glt__price{flex:0 0 auto}
.glt--interactive{cursor:pointer;-webkit-tap-highlight-color:rgba(36,6,48,.08);user-select:none}
.glt--interactive:active{background:rgba(36,6,48,.04) !important;transition:background .1s}

/* Hide VOIR TOUT CTA on mobile - more room for the message itself */
@media (max-width:768px){
  .glt__cta{display:none !important}
}
@media (prefers-reduced-motion: reduce){.glt__track{animation-duration:160s}}
@keyframes glt-scroll{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-50%,0,0)}
}
.glt__item{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.glt__ico{
  width:22px;height:22px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--glt-ink);
  color:var(--glt-yellow);
  border:none;
}
.glt__ico svg{width:12px;height:12px}
.glt__ico--promo  {color:var(--glt-yellow)}
.glt__ico--product{color:var(--glt-pink-2)}
.glt__ico--info   {color:var(--glt-green-2)}
.glt__ico--custom {color:#fff}
.glt__text{
  font-size:12px;font-weight:500;letter-spacing:.15px;line-height:1;
  color:var(--glt-ink);text-decoration:none;
}
a.glt__text:hover{color:var(--glt-ink-2)}
.glt__text b{color:var(--glt-ink);font-weight:800}
.glt__code{
  display:inline-flex;align-items:center;gap:5px;
  font-family:"SF Mono",Menlo,Consolas,monospace;
  font-size:10.5px;font-weight:800;letter-spacing:.8px;line-height:1;
  color:var(--glt-ink);background:rgba(36,6,48,.04);
  border:1px dashed var(--glt-ink);
  border-radius:5px;padding:3px 8px;cursor:pointer;
  transition:background .15s,border-color .15s,transform .15s,color .15s;
}
.glt__code svg{width:10px;height:10px;opacity:.7}
.glt__code:hover{background:rgba(36,6,48,.1);border-color:var(--glt-ink);transform:translateY(-1px)}
.glt__code:focus-visible{outline:2px solid var(--glt-ink);outline-offset:2px}
.glt__code.is-copied{color:#1d4310;border-color:var(--glt-green);border-style:solid;background:rgba(130,195,65,.3)}
.glt__price{
  display:inline-flex;align-items:baseline;gap:4px;
  font-size:12px;font-weight:800;color:var(--glt-ink);
  padding:0;background:transparent;
}
.glt__price s{
  font-weight:500;font-size:10.5px;opacity:.5;
  color:var(--glt-ink);text-decoration:line-through;
}
.glt__cta{
  position:relative;z-index:2;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:0 22px;
  background:var(--glt-ink);
  color:var(--glt-yellow);
  font-size:10.5px;font-weight:800;letter-spacing:1px;
  text-decoration:none;
  border-left:none;
  transition:background .15s,color .15s;
}
.glt__cta svg{width:11px;height:11px;transition:transform .2s}
.glt__cta:hover{background:var(--glt-ink-2);color:var(--glt-yellow-2)}
.glt__cta:hover svg{transform:translateX(3px)}
.glt__cta:focus-visible{outline:2px solid var(--glt-yellow);outline-offset:-3px}
.glt__toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
  background:linear-gradient(135deg,var(--glt-ink) 0%,var(--glt-ink-2) 100%);
  color:#fff;font-size:13px;font-weight:700;
  padding:10px 16px;border-radius:10px;
  box-shadow:0 12px 30px rgba(36,6,48,.55),inset 0 1px 0 rgba(255,255,255,.1);
  display:flex;align-items:center;gap:10px;
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;
  z-index:9999;
}
.glt__toast.is-visible{opacity:1;transform:translate(-50%,0)}
.glt__toast::before{
  content:"";width:18px;height:18px;border-radius:50%;
  background:var(--glt-green);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231d4310" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>');
  background-size:12px;background-repeat:no-repeat;background-position:center;
  flex:0 0 auto;
}
.glt__toast b{color:var(--glt-yellow);font-family:"SF Mono",Menlo,Consolas,monospace;letter-spacing:.5px}

/* Responsive ------------------------------------------------------------ */
@media (max-width:900px){
  .glt{--glt-h:38px;--glt-gap:36px;--glt-dur:52s}
  .glt__live{font-size:10px;padding:0 12px 0 11px;letter-spacing:1.1px}
  .glt__text{font-size:11.5px}
  .glt__code,.glt__cta,.glt__price{font-size:10px}
  .glt__cta{padding:0 18px;letter-spacing:.8px}
}
@media (max-width:600px){
  .glt{--glt-h:36px;--glt-gap:28px;--glt-dur:44s}
  .glt__live{padding:0 10px 0 9px;letter-spacing:.9px;font-size:9.5px;gap:5px}
  .glt__dot{width:5px;height:5px}
  .glt__ico{width:20px;height:20px}
  .glt__ico svg{width:11px;height:11px}
  .glt__text{font-size:11px}
  .glt__code{padding:2px 6px;font-size:9.5px}
  .glt__price{font-size:11px}
  .glt__cta{padding:0 14px;font-size:9.5px;letter-spacing:.5px}
  .glt__cta svg{width:10px;height:10px}
}
@media (max-width:360px){
  .glt{--glt-h:34px;--glt-gap:22px}
  .glt__live{padding:0 8px;font-size:9px}
  .glt__text{font-size:10.5px}
  .glt__cta{padding:0 11px;font-size:9px}
}
