/**
 * 2026 ALGO-FACTORY.COM — aflivecovers, scène « AF Smart Popup » (scène D de la maquette, afopopop).
 *
 * Délai d'affichage, page floutée, popup de bienvenue, ciblage par page, catégorie et produit,
 * nuancier de couleurs, mémorisation du refus. Racine : .afl-pp ; animations : afl-pp-*.
 * Durée et image fixe : scene.json.
 */

.afl-pp{
  --accent:#0272ea;
  position:absolute;inset:0;font-size:3cqw;
  background:linear-gradient(180deg,#fbfcfe,#eef2f9);
  animation:afl-cycle var(--afl-dur) linear infinite;
}

/* page de la boutique, floutée à l'ouverture */
.afl-pp__page{
  position:absolute;inset:0;transform-origin:50% 46%;
  animation:afl-pp-page var(--afl-dur) cubic-bezier(.3,.9,.3,1) infinite;
}
@keyframes afl-pp-page{
  0%,13%{filter:blur(0) saturate(1);transform:scale(1)}
  20%,74%{filter:blur(.9cqw) saturate(.85);transform:scale(1.015)}
  81%,100%{filter:blur(0) saturate(1);transform:scale(1)}
}
.afl-pp__bar{
  position:absolute;left:0;right:0;top:0;height:10cqw;
  display:flex;align-items:center;gap:2.2cqw;padding:0 4cqw;
  background:#fff;border-bottom:1px solid var(--afl-ink-08);
}
.afl-pp__bar b{font-size:2.9cqw;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:1.2cqw}
.afl-pp__bar b i{width:3.2cqw;height:3.2cqw;border-radius:1cqw;background:linear-gradient(135deg,#0d80f7,#0272ea)}
.afl-pp__bar em{width:6.4cqw;height:1.4cqw;border-radius:99px;background:var(--afl-ink-08);font-style:normal}
.afl-pp__hero{
  position:absolute;left:4cqw;right:4cqw;top:13.4cqw;height:22cqw;border-radius:2.2cqw;
  background:linear-gradient(120deg,#0272ea,#17c3b2);
  display:flex;align-items:center;padding:0 4cqw;
}
.afl-pp__hero span{display:block;height:2.2cqw;width:44%;border-radius:99px;background:rgba(255,255,255,.6)}
.afl-pp__hero span + span{margin-top:1.6cqw;width:28%;height:1.6cqw;background:rgba(255,255,255,.38)}
.afl-pp__grid{position:absolute;left:4cqw;right:4cqw;top:38cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqw}
.afl-pp__tile{height:22cqw;border-radius:2cqw;background:#fff;border:1px solid var(--afl-ink-08);padding:1.8cqw;display:flex;flex-direction:column;gap:1.4cqw}
.afl-pp__tile i{flex:1;border-radius:1.4cqw;background:linear-gradient(150deg,rgba(2,114,234,.16),rgba(23,195,178,.2))}
.afl-pp__tile span{height:1.5cqw;border-radius:99px;background:var(--afl-ink-08)}
.afl-pp__tile span:last-child{width:52%;background:var(--afl-ink-05)}

/* compte à rebours du délai d'affichage */
.afl-pp__timer{
  position:absolute;right:4cqw;top:13.4cqw;z-index:6;
  display:flex;align-items:center;gap:1.6cqw;
  background:#fff;border:1px solid var(--afl-ink-08);border-radius:99px;padding:1.2cqw 2.2cqw 1.2cqw 1.2cqw;
  box-shadow:0 1.4cqw 3cqw -1.6cqw rgba(7,7,49,.4);
  font-size:2.2cqw;font-weight:700;color:var(--afl-ink-60);
  animation:afl-pp-timer var(--afl-dur) ease-out infinite;
}
@keyframes afl-pp-timer{
  0%,12%{opacity:1;transform:none}
  18%,100%{opacity:0;transform:scale(.86) translateY(-1.4cqw)}
}
.afl-pp__ring{width:5cqw;height:5cqw;flex:none;transform:rotate(-90deg)}
.afl-pp__ring circle{fill:none;stroke-width:3.4;stroke-linecap:round}
.afl-pp__ring .afl-pp__trk{stroke:var(--afl-ink-08)}
.afl-pp__ring .afl-pp__val{stroke:var(--afl-primary);stroke-dasharray:100.53;stroke-dashoffset:100.53;animation:afl-pp-ring var(--afl-dur) linear infinite}
@keyframes afl-pp-ring{0%{stroke-dashoffset:100.53}13%,100%{stroke-dashoffset:0}}

/* overlay */
.afl-pp__overlay{
  position:absolute;inset:0;z-index:7;background:rgba(7,7,49,.52);
  opacity:0;animation:afl-pp-overlay var(--afl-dur) ease-out infinite;
}
@keyframes afl-pp-overlay{
  0%,13%{opacity:0}
  20%,74%{opacity:1}
  81%,100%{opacity:0}
}

/* la popup */
.afl-pp__card{
  position:absolute;left:50%;top:50%;width:56cqw;z-index:8;margin-left:-28cqw;
  background:#fff;border-radius:3cqw;padding:3.4cqw 3.4cqw 3cqw;
  box-shadow:0 4cqw 8cqw -3cqw rgba(7,7,49,.55);
  text-align:center;
  opacity:0;transform:translateY(-50%) scale(.72);
  animation:afl-pp-card var(--afl-dur) cubic-bezier(.16,1.5,.3,1) infinite;
}
@keyframes afl-pp-card{
  0%,15%{opacity:0;transform:translateY(-50%) scale(.72)}
  23%,74%{opacity:1;transform:translateY(-50%) scale(1)}
  80%,100%{opacity:0;transform:translateY(-54%) scale(.86)}
}
.afl-pp__x{
  position:absolute;right:2.4cqw;top:2cqw;width:5cqw;height:5cqw;border-radius:50%;
  display:grid;place-items:center;font-size:3cqw;color:var(--afl-ink-40);line-height:1;
  background:var(--afl-ink-05);animation:afl-pp-x var(--afl-dur) ease-out infinite;
}
@keyframes afl-pp-x{
  0%,74%{background:var(--afl-ink-05);transform:none}
  76%{background:rgba(220,38,38,.15);transform:scale(.88)}
  79%,100%{background:var(--afl-ink-05);transform:none}
}
.afl-pp__badge{
  display:inline-block;font-size:3.4cqw;font-weight:800;letter-spacing:-.01em;color:#fff;
  background:var(--accent);border-radius:99px;padding:1cqw 3cqw;margin-bottom:2.4cqw;
  box-shadow:0 1.4cqw 3cqw -1.2cqw var(--accent);
  animation:afl-pp-accent var(--afl-dur) linear infinite, afl-pp-pop var(--afl-dur) cubic-bezier(.16,1.6,.3,1) infinite;
}
@keyframes afl-pp-pop{0%,22%{opacity:0;transform:scale(.5)}28%,100%{opacity:1;transform:scale(1)}}
/* personnalisation des couleurs : bleu → turquoise → orange */
@keyframes afl-pp-accent{
  0%,54%{--accent:#0272ea}
  56%,62%{--accent:#17c3b2}
  64%,70%{--accent:#d97706}
  72%,100%{--accent:#0272ea}
}
.afl-pp__ttl{display:block;font-size:4.2cqw;font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:0 0 1.6cqw;opacity:0;animation:afl-pp-fade1 var(--afl-dur) ease-out infinite}
.afl-pp__txt{display:block;font-size:2.5cqw;line-height:1.55;color:var(--afl-ink-60);margin:0 auto 2.6cqw;max-width:88%;opacity:0;animation:afl-pp-fade2 var(--afl-dur) ease-out infinite}
@keyframes afl-pp-fade1{0%,24%{opacity:0;transform:translateY(1.4cqw)}30%,100%{opacity:1;transform:none}}
@keyframes afl-pp-fade2{0%,26%{opacity:0;transform:translateY(1.4cqw)}32%,100%{opacity:1;transform:none}}
.afl-pp__code{
  display:inline-flex;align-items:center;gap:1.4cqw;font-size:2.8cqw;font-weight:800;letter-spacing:.14em;
  border:2px dashed var(--accent);color:var(--accent);border-radius:1.4cqw;padding:1.4cqw 3cqw;margin-bottom:2.8cqw;
  opacity:0;animation:afl-pp-accent var(--afl-dur) linear infinite, afl-pp-fade3 var(--afl-dur) ease-out infinite;
}
@keyframes afl-pp-fade3{0%,28%{opacity:0;transform:scale(.92)}34%,100%{opacity:1;transform:none}}
.afl-pp__cta{
  display:block;font-size:2.9cqw;font-weight:700;color:#fff;background:var(--accent);
  border-radius:1.6cqw;padding:2.2cqw;box-shadow:0 1.6cqw 3.4cqw -1.4cqw var(--accent);
  opacity:0;animation:afl-pp-accent var(--afl-dur) linear infinite, afl-pp-fade4 var(--afl-dur) ease-out infinite;
}
@keyframes afl-pp-fade4{0%,30%{opacity:0;transform:translateY(1.6cqw)}36%,100%{opacity:1;transform:none}}

/* ciblage */
.afl-pp__targets{position:absolute;left:3.4cqw;right:3.4cqw;bottom:3.4cqw;z-index:9;display:flex;gap:1.2cqw;justify-content:center;flex-wrap:nowrap}
.afl-pp__chip{
  display:inline-flex;align-items:center;gap:1cqw;white-space:nowrap;
  font-size:1.85cqw;font-weight:700;color:#fff;
  background:rgba(7,7,49,.72);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:99px;padding:1cqw 2cqw;opacity:0;
}
.afl-pp__chip i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:var(--afl-accent);flex:none;box-shadow:0 0 0 .45cqw rgba(23,195,178,.28)}
.afl-pp__chip:nth-child(1){animation:afl-pp-chip1 var(--afl-dur) cubic-bezier(.16,1.2,.3,1) infinite}
.afl-pp__chip:nth-child(2){animation:afl-pp-chip2 var(--afl-dur) cubic-bezier(.16,1.2,.3,1) infinite}
.afl-pp__chip:nth-child(3){animation:afl-pp-chip3 var(--afl-dur) cubic-bezier(.16,1.2,.3,1) infinite}
@keyframes afl-pp-chip1{0%,38%{opacity:0;transform:translateY(2.4cqw)}43%,72%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(1.4cqw)}}
@keyframes afl-pp-chip2{0%,42%{opacity:0;transform:translateY(2.4cqw)}47%,72%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(1.4cqw)}}
@keyframes afl-pp-chip3{0%,46%{opacity:0;transform:translateY(2.4cqw)}51%,72%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(1.4cqw)}}

/* nuancier de personnalisation */
.afl-pp__swatch{
  position:absolute;right:4cqw;top:12.6cqw;z-index:9;display:flex;gap:1.4cqw;align-items:center;
  background:rgba(7,7,49,.72);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:1.2cqw 1.8cqw;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;animation:afl-pp-sw var(--afl-dur) ease-out infinite;
}
@keyframes afl-pp-sw{0%,52%{opacity:0;transform:translateY(-1.4cqw)}56%,72%{opacity:1;transform:none}78%,100%{opacity:0}}
.afl-pp__swatch i{width:3cqw;height:3cqw;border-radius:50%;box-shadow:0 0 0 0 rgba(255,255,255,.9)}
.afl-pp__swatch i:nth-child(1){background:#0272ea;animation:afl-pp-sel1 var(--afl-dur) ease-out infinite}
.afl-pp__swatch i:nth-child(2){background:#17c3b2;animation:afl-pp-sel2 var(--afl-dur) ease-out infinite}
.afl-pp__swatch i:nth-child(3){background:#d97706;animation:afl-pp-sel3 var(--afl-dur) ease-out infinite}
@keyframes afl-pp-sel1{0%,54%{box-shadow:0 0 0 .6cqw rgba(255,255,255,.9)}56%,70%{box-shadow:0 0 0 0 rgba(255,255,255,0)}72%,100%{box-shadow:0 0 0 .6cqw rgba(255,255,255,.9)}}
@keyframes afl-pp-sel2{0%,55%{box-shadow:0 0 0 0 rgba(255,255,255,0)}57%,62%{box-shadow:0 0 0 .6cqw rgba(255,255,255,.9)}64%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes afl-pp-sel3{0%,63%{box-shadow:0 0 0 0 rgba(255,255,255,0)}65%,70%{box-shadow:0 0 0 .6cqw rgba(255,255,255,.9)}72%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* cookie de non-réaffichage */
.afl-pp__cookie{
  position:absolute;left:50%;bottom:5cqw;z-index:10;transform:translateX(-50%) scale(.8);
  display:inline-flex;align-items:center;gap:1.4cqw;white-space:nowrap;
  font-size:2.3cqw;font-weight:700;color:var(--afl-success);
  background:#fff;border:1px solid rgba(22,163,74,.32);border-radius:99px;padding:1.2cqw 2.4cqw;
  box-shadow:0 1.8cqw 3.6cqw -1.6cqw rgba(7,7,49,.4);
  opacity:0;animation:afl-pp-cookie var(--afl-dur) cubic-bezier(.16,1.3,.3,1) infinite;
}
.afl-pp__cookie svg{width:2.8cqw;height:2.8cqw;fill:var(--afl-success)}
@keyframes afl-pp-cookie{
  0%,81%{opacity:0;transform:translateX(-50%) scale(.8)}
  87%,100%{opacity:1;transform:translateX(-50%) scale(1)}
}