/* Promo Popin v3 — no close, stronger neon & bold copy */
.promo-popin{position:fixed; left:18px; bottom:18px; z-index:1200; transform:translateY(12px) scale(.98); opacity:0;
  transition:transform .40s cubic-bezier(.16,1,.3,1), opacity .35s ease;}
.promo-popin.is-show{transform:translateY(0) scale(1); opacity:1}
.promo-popin.is-hidden{opacity:0; pointer-events:none; transform:translateY(10px) scale(.98)}

/* Mobile - override les styles desktop */
@media (max-width: 768px){
  .promo-popin {
    /* Les styles desktop sont override par les règles plus bas */
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

.promo-card{min-width:270px; max-width:360px; background:rgba(12,16,26,.86); backdrop-filter:blur(14px);
  border:1px solid rgba(108,168,255,.28); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.34), 0 0 26px rgba(0,229,168,.14); 
  overflow:hidden; position:relative; isolation:isolate}
.promo-card:before{ /* outer neon sweep */
  content:""; position:absolute; inset:-1px; border-radius:16px; z-index:-1;
  background:conic-gradient(from 180deg, rgba(0,229,168,.2), rgba(108,168,255,.2), rgba(0,229,168,.2));
  filter:blur(18px); opacity:.45; animation:neonSweep 6s linear infinite;
}
@keyframes neonSweep{to{transform:rotate(1turn)}}

.promo-head{display:flex; align-items:center; gap:10px; padding:11px 14px;
  background:linear-gradient(180deg, rgba(0,229,168,.10), rgba(108,168,255,.07));
  border-bottom:1px solid rgba(108,168,255,.18)}
.promo-dot{width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 40% 40%, #00e5a8, #007a66); box-shadow:0 0 12px rgba(0,229,168,.8)}
.promo-title{font-weight:900; letter-spacing:.25px; font-size:13px; color:#eaf2ff; position:relative}
.promo-title:after{content:""; position:absolute; left:0; bottom:-2px; width:40%; height:2px;
  background:linear-gradient(90deg, rgba(0,229,168,.9), rgba(108,168,255,0)); filter:blur(.3px);}

.promo-body{padding:12px 14px 14px}
.promo-row{display:flex; gap:11px}
.promo-icon{position:relative; width:30px; height:30px; border-radius:10px;
  background:radial-gradient(16px 16px at 60% 40%, rgba(0,229,168,.22), rgba(108,168,255,.18));
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 18px rgba(0,229,168,.18)}
.promo-icon svg{width:17px; height:17px; filter:drop-shadow(0 0 7px rgba(108,168,255,.4))}
.promo-copy{flex:1; min-width:0}
.promo-h{font-size:14px; font-weight:1000; color:#eafffb; margin:0}
.promo-sub{font-size:12px; color:#b6d8ff; opacity:.92; margin-top:3px}

.adv{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.adv .chip{display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:999px;
  font-weight:800; font-size:11px; letter-spacing:.2px; border:1px solid rgba(0,229,168,.35); color:#bdfae8;
  background:linear-gradient(135deg, rgba(0,229,168,.14), rgba(8,36,46,.55)); box-shadow:0 0 12px rgba(0,229,168,.16)}
.adv .chip i{width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 40% 40%, #00e5a8, #007a66); box-shadow:0 0 10px rgba(0,229,168,.7)}
.adv .chip.alt{border-color:rgba(108,168,255,.35); color:#d7e6ff; background:linear-gradient(135deg, rgba(108,168,255,.12), rgba(8,22,46,.55))}

.promo-cta{display:flex; gap:8px; margin-top:12px}
.promo-cta a{flex:1 1 auto; text-align:center; text-decoration:none; padding:9px 11px; font-weight:1000; font-size:12px;
  letter-spacing:.35px; border-radius:11px; border:1px solid rgba(0,229,168,.42); color:#d2fff1;
  background:linear-gradient(135deg, rgba(0,229,168,.16), rgba(5,34,44,.65)); box-shadow:0 0 16px rgba(0,229,168,.22); position:relative; overflow:hidden}
.promo-cta a:after{content:""; position:absolute; left:-25%; top:0; width:22%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); opacity:0}
.promo-cta a:hover:after{animation:shine .9s ease forwards}
.promo-cta a:hover{color:#edfff9; box-shadow:0 0 24px rgba(0,229,168,.32)}
.promo-cta .alt{border-color:rgba(108,168,255,.42); color:#e6f0ff; background:linear-gradient(135deg, rgba(108,168,255,.16), rgba(8,22,46,.65))}
.promo-cta .alt:hover{box-shadow:0 0 24px rgba(108,168,255,.32)}
@keyframes shine{to{left:125%; opacity:1}}

/* Bouton de fermeture - caché par défaut */
.promo-close {
  display:none !important;
}

@media (max-width: 768px){
  /* Cachée par défaut sur mobile */
  .promo-popin{
    display:none !important;
  }
  
  /* Version mobile fullscreen avec overlay - affichée quand is-show */
  .promo-popin.is-show{
    display:flex !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:9999 !important;
    background:rgba(0,0,0,0.85) !important;
    backdrop-filter:blur(8px) !important;
    padding:20px !important;
    animation:promoFadeIn 0.3s ease-out !important;
  }
  
  .promo-popin.is-hidden {
    display:none !important;
  }
  
  @keyframes promoFadeIn {
    from {
      opacity:0;
      backdrop-filter:blur(0px);
    }
    to {
      opacity:1;
      backdrop-filter:blur(8px);
    }
  }
  
  .promo-popin.is-hidden {
    animation:promoFadeOut 0.25s ease-in forwards !important;
  }
  
  @keyframes promoFadeOut {
    from {
      opacity:1;
      backdrop-filter:blur(8px);
    }
    to {
      opacity:0;
      backdrop-filter:blur(0px);
    }
  }
  
  /* Bouton de fermeture visible sur mobile */
  .promo-popin.is-show .promo-close {
    display:flex !important;
    position:fixed !important;
    top:20px !important;
    right:20px !important;
    width:44px !important;
    height:44px !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,0.95) !important;
    border:none !important;
    border-radius:50% !important;
    cursor:pointer !important;
    z-index:10000 !important;
    box-shadow:0 4px 16px rgba(0,0,0,0.3) !important;
    transition:all 0.2s ease !important;
    color:#000 !important;
    padding:0 !important;
  }
  
  .promo-popin.is-show .promo-close:hover {
    background:rgba(255,255,255,1) !important;
    transform:scale(1.1) !important;
    box-shadow:0 6px 20px rgba(0,0,0,0.4) !important;
  }
  
  .promo-popin.is-show .promo-close:active {
    transform:scale(0.95) !important;
  }
  
  .promo-popin.is-show .promo-close svg {
    width:20px !important;
    height:20px !important;
  }
  
  .promo-card{
    max-width:100% !important;
    min-width:auto !important;
    width:100% !important;
    margin:0 !important;
    border-radius:20px !important;
    box-shadow:0 20px 60px rgba(0,0,0,0.5) !important;
    animation:promoCardSlideIn 0.35s cubic-bezier(0.16,1,0.3,1) !important;
    position:relative !important;
  }
  
  @keyframes promoCardSlideIn {
    from {
      opacity:0;
      transform:translateY(20px) scale(0.95);
    }
    to {
      opacity:1;
      transform:translateY(0) scale(1);
    }
  }
  
  .promo-popin.is-hidden .promo-card {
    animation:promoCardSlideOut 0.25s ease-in forwards !important;
  }
  
  @keyframes promoCardSlideOut {
    from {
      opacity:1;
      transform:translateY(0) scale(1);
    }
    to {
      opacity:0;
      transform:translateY(20px) scale(0.95);
    }
  }
  
  .promo-cta{
    flex-direction:column !important;
    gap:12px !important;
  }
  .promo-cta a{
    width:100% !important;
    padding:14px 20px !important;
    font-size:15px !important;
    border-radius:10px !important;
  }
}

@media (max-width: 480px){
  .promo-popin{
    display:none !important; /* Hide on very small screens */
  }
}

/* subtle beacon */
.promo-pulse{position:absolute; left:-6px; bottom:-6px; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(0,229,168,.95), rgba(0,229,168,.28));
  animation:pop-pulse 2.6s ease-in-out infinite; filter:blur(0.6px)}
@keyframes pop-pulse{0%,100%{transform:scale(.85); opacity:.55} 50%{transform:scale(1.15); opacity:.95}}


/* Promo gain sentence */
.promo-gain{font-size:12px; font-weight:700; color:#fff; margin:8px 0 6px; text-shadow:0 0 6px rgba(0,229,168,.6);}


/* === v4 visual boost === */
.promo-card{border-radius:18px; box-shadow:0 12px 36px rgba(0,0,0,.38), 0 0 32px rgba(0,229,168,.18)}
.promo-card:before{filter:blur(22px); opacity:.55}
.promo-title{font-size:14px; text-transform:uppercase; letter-spacing:.6px}
.promo-h{font-size:15px; letter-spacing:.2px; background:linear-gradient(90deg,#eafffb,#b6f3d2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.promo-sub{font-size:12px; color:#cfeaff}

.promo-ribbon{position:absolute; top:10px; right:10px; padding:6px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
  font-weight:1000; font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  color:#051b12; background:linear-gradient(135deg,#00e5a8,#6ca8ff);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 0 20px rgba(0,229,168,.50), 0 4px 14px rgba(0,0,0,.25);
  z-index:3; pointer-events:none; text-shadow:0 0 6px rgba(255,255,255,.35)}

.promo-ribbon:after{content:""; position:absolute; inset:-2px; border-radius:999px; background:conic-gradient(from 0deg,#00e5a8,transparent,#6ca8ff,transparent,#00e5a8); filter:blur(10px); opacity:.45; z-index:-1; animation:neonSweep 6s linear infinite}

.promo-cta a{transform:translateZ(0); transition:transform .16s ease}
.promo-cta a:hover{transform:translateY(-1px);}
.promo-cta a .arr{display:inline-block; transform:translateX(0); transition:transform .22s cubic-bezier(.16,1,.3,1)}
.promo-cta a:hover .arr{transform:translateX(4px)}

.promo-icon{box-shadow:inset 0 0 22px rgba(0,229,168,.2)}
.adv .chip{box-shadow:0 0 16px rgba(0,229,168,.22)}
.adv .chip.alt{box-shadow:0 0 16px rgba(108,168,255,.22)}