/**
 * 2026 ALGO-FACTORY.COM — aflivecovers, scène « Barre promotionnelle » (scène M de la maquette, afpromotionalbanner).
 *
 * Le bandeau descend avec son compte à rebours, change de couleur et de thème, se ferme et annonce
 * sa réouverture. Racine : .afl-pb ; animations : afl-pb-*. Durée et image fixe : scene.json.
 */

.afl-pb{
  --bnd:#0272ea;
  position:absolute;inset:0;font-size:3cqw;
  background:linear-gradient(180deg,#fbfcfe,#eef2f9);
  animation:afl-cycle var(--afl-dur) linear infinite;
}
.afl-pb__shift{position:absolute;inset:0;animation:afl-pb-shift var(--afl-dur) cubic-bezier(.2,.9,.3,1) infinite}
@keyframes afl-pb-shift{0%,4%{transform:translateY(0)}10%,80%{transform:translateY(11cqw)}86%,100%{transform:translateY(0)}}
.afl-pb__nav{
  position:absolute;left:0;right:0;top:0;height:10cqw;
  display:flex;align-items:center;gap:2.2cqw;padding:0 3.6cqw;
  background:#fff;border-bottom:1px solid var(--afl-ink-08);
}
.afl-pb__nav .afl-pb__brand{font-size:2.8cqw;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:1.2cqw}
.afl-pb__nav .afl-pb__brand em{width:3.2cqw;height:3.2cqw;border-radius:1cqw;font-style:normal;background:linear-gradient(135deg,#0d80f7,#0272ea)}
.afl-pb__hero{position:absolute;left:3.6cqw;right:3.6cqw;top:13.4cqw;height:20cqw;border-radius:2.2cqw;
  background:linear-gradient(120deg,#0272ea,#17c3b2)}
.afl-pb__tiles{position:absolute;left:3.6cqw;right:3.6cqw;top:36cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.afl-pb__tile{height:20cqw;border-radius:1.8cqw;background:#fff;border:1px solid var(--afl-ink-08)}

/* le bandeau */
.afl-pb__band{
  position:absolute;left:0;right:0;top:0;height:11cqw;z-index:8;
  display:flex;align-items:center;justify-content:center;gap:1.8cqw;padding:0 9cqw 0 3cqw;
  background:var(--bnd);color:#fff;
  transform:translateY(-100%);
  animation:afl-pb-band var(--afl-dur) cubic-bezier(.18,1,.28,1) infinite, afl-pb-hue var(--afl-dur) linear infinite;
}
@keyframes afl-pb-band{
  0%,4%{transform:translateY(-100%)}
  10%,80%{transform:translateY(0)}
  86%,100%{transform:translateY(-100%)}
}
@keyframes afl-pb-hue{
  0%,36%{--bnd:#0272ea}
  40%,47%{--bnd:#070731}
  51%,58%{--bnd:#d97706}
  62%,100%{--bnd:#0272ea}
}
.afl-pb__txt{font-size:2.1cqw;font-weight:700;white-space:nowrap;opacity:0;animation:afl-pb-fade1 var(--afl-dur) ease-out infinite}
@keyframes afl-pb-fade1{0%,10%{opacity:0;transform:translateY(1cqw)}15%,80%{opacity:1;transform:none}84%,100%{opacity:0}}
.afl-pb__cd{display:flex;align-items:center;gap:.7cqw;flex:none;opacity:0;animation:afl-pb-fade2 var(--afl-dur) ease-out infinite}
@keyframes afl-pb-fade2{0%,13%{opacity:0;transform:translateY(1cqw)}18%,80%{opacity:1;transform:none}84%,100%{opacity:0}}
.afl-pb__u{
  min-width:5.6cqw;display:flex;flex-direction:column;align-items:center;gap:.2cqw;flex:none;
  background:rgba(255,255,255,.2);border-radius:1cqw;padding:.6cqw .7cqw;
  animation:afl-pb-theme var(--afl-dur) linear infinite;
}
/* thème du compteur : carré → pastille ronde */
@keyframes afl-pb-theme{
  0%,62%{border-radius:1cqw;background:rgba(255,255,255,.2)}
  66%,76%{border-radius:99px;background:rgba(255,255,255,.34)}
  80%,100%{border-radius:1cqw;background:rgba(255,255,255,.2)}
}
.afl-pb__u b{font-size:2.2cqw;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;display:flex}
.afl-pb__u span{font-size:1.35cqw;font-weight:700;letter-spacing:.08em;opacity:.75;text-transform:uppercase}
/* option « masquer les jours » */
.afl-pb__u--d{animation:afl-pb-theme var(--afl-dur) linear infinite, afl-pb-hide-day var(--afl-dur) ease-out infinite}
@keyframes afl-pb-hide-day{
  0%,68%{opacity:1;max-width:12cqw;margin-right:0}
  73%,80%{opacity:0;max-width:0;margin-right:-1cqw}
  84%,100%{opacity:1;max-width:12cqw;margin-right:0}
}
.afl-pb__btn{
  font-size:1.9cqw;font-weight:800;color:var(--bnd);background:#fff;border-radius:1.1cqw;padding:1cqw 1.9cqw;
  white-space:nowrap;flex:none;opacity:0;animation:afl-pb-fade3 var(--afl-dur) ease-out infinite;
}
@keyframes afl-pb-fade3{0%,16%{opacity:0;transform:translateY(1cqw)}21%,80%{opacity:1;transform:none}84%,100%{opacity:0}}
.afl-pb__x{
  position:absolute;right:2.6cqw;top:50%;margin-top:-2.2cqw;width:4.4cqw;height:4.4cqw;border-radius:50%;
  display:grid;place-items:center;font-size:2.6cqw;line-height:1;background:rgba(255,255,255,.2);
  animation:afl-pb-x var(--afl-dur) ease-out infinite;
}
@keyframes afl-pb-x{0%,78%{background:rgba(255,255,255,.2);transform:none}80%{background:rgba(255,255,255,.5);transform:scale(.88)}83%,100%{background:rgba(255,255,255,.2);transform:none}}

/* nuancier + appareils */
.afl-pb__panel{
  position:absolute;left:50%;bottom:4cqw;transform:translateX(-50%);z-index:10;
  display:flex;align-items:center;gap:2.4cqw;
  background:rgba(7,7,49,.78);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:1.4cqw 2.4cqw;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;animation:afl-pb-panel var(--afl-dur) ease-out infinite;
}
@keyframes afl-pb-panel{0%,32%{opacity:0;transform:translateX(-50%) translateY(1.6cqw)}36%,74%{opacity:1;transform:translateX(-50%)}79%,100%{opacity:0}}
.afl-pb__sw{display:flex;gap:1.2cqw}
.afl-pb__sw i{width:3cqw;height:3cqw;border-radius:50%;display:block}
.afl-pb__sw i:nth-child(1){background:#0272ea;animation:afl-pb-s1 var(--afl-dur) ease-out infinite}
.afl-pb__sw i:nth-child(2){background:#070731;animation:afl-pb-s2 var(--afl-dur) ease-out infinite}
.afl-pb__sw i:nth-child(3){background:#d97706;animation:afl-pb-s3 var(--afl-dur) ease-out infinite}
@keyframes afl-pb-s1{0%,37%{box-shadow:0 0 0 .6cqw rgba(255,255,255,.9)}40%,58%{box-shadow:0 0 0 0 rgba(255,255,255,0)}62%,100%{box-shadow:0 0 0 .6cqw rgba(255,255,255,.9)}}
@keyframes afl-pb-s2{0%,38%{box-shadow:0 0 0 0 rgba(255,255,255,0)}41%,47%{box-shadow:0 0 0 .6cqw rgba(255,255,255,.9)}50%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes afl-pb-s3{0%,49%{box-shadow:0 0 0 0 rgba(255,255,255,0)}52%,58%{box-shadow:0 0 0 .6cqw rgba(255,255,255,.9)}61%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.afl-pb__dv{display:flex;gap:1.4cqw;align-items:flex-end;padding-left:2.4cqw;border-left:1px solid rgba(255,255,255,.2)}
.afl-pb__dv i{display:block;background:rgba(255,255,255,.4);border-radius:.4cqw}
.afl-pb__dv i:nth-child(1){width:4.4cqw;height:3.2cqw;animation:afl-pb-d1 var(--afl-dur) ease-out infinite}
.afl-pb__dv i:nth-child(2){width:3cqw;height:3.8cqw;animation:afl-pb-d2 var(--afl-dur) ease-out infinite}
.afl-pb__dv i:nth-child(3){width:2cqw;height:3.4cqw;animation:afl-pb-d3 var(--afl-dur) ease-out infinite}
@keyframes afl-pb-d1{0%,63%{background:#fff}66%,74%{background:rgba(255,255,255,.4)}78%,100%{background:#fff}}
@keyframes afl-pb-d2{0%,64%{background:rgba(255,255,255,.4)}67%,70%{background:#fff}73%,100%{background:rgba(255,255,255,.4)}}
@keyframes afl-pb-d3{0%,70%{background:rgba(255,255,255,.4)}73%,76%{background:#fff}79%,100%{background:rgba(255,255,255,.4)}}
.afl-pb__re{
  left:50%;top:4cqw;transform:translateX(-50%) scale(.82);color:var(--afl-warning);
  border:1px solid rgba(217,119,6,.32);animation:afl-pb-re var(--afl-dur) cubic-bezier(.16,1.35,.3,1) infinite;
}
@keyframes afl-pb-re{0%,84%{opacity:0;transform:translateX(-50%) scale(.82)}89%,100%{opacity:1;transform:translateX(-50%) scale(1)}}




/* rouleaux de la scène (bloc du rouleau de la maquette) */
.afl-pb__u .afl-reel{font-size:2.2cqw}
.afl-pb__r-sec{animation:afl-pb-sec var(--afl-dur) linear infinite}
@keyframes afl-pb-sec{ /* 10 chiffres 9→0 → 1 cran = 10% */
  0%,14%{transform:translateY(0);animation-timing-function:steps(10,jump-none)}
  76%,100%{transform:translateY(-90%)}
}
.afl-pb__r-sec10{animation:afl-pb-sec10 var(--afl-dur) steps(1,end) infinite}
@keyframes afl-pb-sec10{0%,74%{transform:translateY(0)}76%,100%{transform:translateY(-50%)}}

/* largeurs des traits de l'en-tête (styles en ligne dans la maquette) */
.afl-pb .afl-pb__line-a{width:7cqw}
.afl-pb .afl-pb__line-b{width:5cqw}
.afl-pb .afl-pb__line-c{width:6cqw}
/* un chiffre fixe du compte à rebours garde la taille des chiffres, pas celle des unités */
.afl-pb .afl-pb__u b > .afl-literal{font:inherit;letter-spacing:inherit;opacity:1;text-transform:none}