/* ==========================================================================
   1) VARIABLES — couleurs, rayons, durées. Tout se règle ici.
   ========================================================================== */
:root{
  --pink-light: #F7D9E3;   /* teinte 1 */
  --pink-mid:   #EF9AB8;   /* teinte 2 */
  --pink-deep:  #D8467E;   /* teinte 3 */
  --plum:       #3A1526;   /* texte foncé */
  --cream:      #FFFFFF;   /* fond de la popin : blanc */
  --overlay:    rgba(58,21,38,0.55);
 
  --radius-card: 0px;
  --wheel-size: 280px;
 
  --dur-spin: 4200ms;
}
 
@media (prefers-reduced-motion: reduce){
  :root{ --dur-spin: 900ms; }
}
 .popin_bts_overlay, .popin_bts_overlay *{ box-sizing: border-box; }
 
/* ==========================================================================
   2) OVERLAY + POPIN
   ========================================================================== */
.popin_bts_overlay{
  position:fixed; inset:0;
  background:var(--overlay);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  padding:16px;
 font-family:'Inter', sans-serif;
  color:black;
}
.popin_bts_overlay.is-open{
  opacity:1;
  pointer-events:auto;
}
 
.popin_bts_container{
  position:relative;
  width:100%;
  max-width:380px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:var(--cream);
  border-radius:var(--radius-card);
  padding:36px 22px 32px;
  text-align:center;
  box-shadow:0 24px 60px rgba(58,21,38,0.35);
  transform:scale(.85) translateY(20px);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.9,.3,1.3), opacity .3s ease;
  overflow:hidden;
}
.popin_bts_overlay.is-open .popin_bts_container{
  transform:scale(1) translateY(0);
  opacity:1;
}
 
.popin_bts_close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  border:none; background:transparent;
  color:var(--plum);
  font-size:16px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .2s ease;
}
.popin_bts_close:hover{ opacity:.6; }
.popin_bts_close:focus-visible{ outline:1px solid var(--pink-deep); outline-offset:2px; }
 
.popin_bts_logo{
  display:block;
  margin:0 auto 14px;
  height:22px;
  width:auto;
}
.popin_bts_logo{
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:.28em;
  margin:14px 0;
  color:var(--plum);
}
 
.popin_bts_title{
  font-family:'REM', sans-serif;
  font-size:26px;
  line-height:1.15;
  margin:0 0 7px;
}
.popin_bts_subtitle{
  font-size:13.5px;
  margin:0 0 30px;
}
 
/* ==========================================================================
   3) LA ROUE
   ========================================================================== */
.popin_bts_wheel{
  position:relative;
  width:var(--wheel-size);
  height:var(--wheel-size);
  margin:4px auto 22px;
cursor: pointer;
}
 
.popin_bts_wheel_pointer{
  position:absolute;
  top:-6px; left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:20px solid var(--plum);
  z-index:3;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
 
.popin_bts_wheel_ring{
  position:absolute; inset:-8px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--pink-deep), var(--pink-mid));
  z-index:0;
}
 
.popin_bts_wheel_disc{
  position:absolute; inset:0;
  border-radius:50%;
  overflow:hidden;
  transform:rotate(0deg);
  transition:transform var(--dur-spin) cubic-bezier(.17,.67,.14,1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6);
  z-index:1;
}
 
.popin_bts_wheel_label{
  position:absolute;
  transform:translate(-50%,-50%) rotate(0deg);
  transition:transform var(--dur-spin) cubic-bezier(.17,.67,.14,1);
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  pointer-events:none;
}
 
.popin_bts_wheel_hub{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  border-radius:50%;
  background:var(--cream);
  border:1px solid var(--cream);
  z-index:2;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.popin_bts_wheel_hub_logo{
  max-width:60%;
  max-height:60%;
  font-family:'REM', sans-serif;
  font-weight:700;
  font-size:18px;
  color:#fff;
  line-height:1;
}
 
.popin_bts_play_btn{
  display:block;
  width:90%;
  max-width:260px;
  margin:10px auto 20px;
  padding:14px 20px;
  border:none;
  background:black;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  cursor:pointer;
text-transform : uppercase;
  transition:background .2s ease, transform .15s ease;
}
.popin_bts_play_btn:hover{ background:#54223a; }
.popin_bts_play_btn:active{ transform:scale(.98); }
.popin_bts_play_btn:disabled{ opacity:.6; cursor:default; }
.popin_bts_play_btn:focus-visible{ outline:1px solid var(--pink-deep); outline-offset:3px; }
 
.popin_bts_direct_link{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:black;
  text-decoration:underline;
  text-underline-offset:3px;
  margin-bottom:6px;
}
.popin_bts_direct_link:hover{ color:var(--plum); }
 
/* ==========================================================================
   4) RESULTAT
   ========================================================================== */
.popin_bts_result{
  position:absolute;
  left:0; right:0; bottom:0;
  background:var(--cream);
  border-radius:0;
  padding:22px 24px 26px;
  box-shadow:0 -10px 30px rgba(58,21,38,0.14);
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.2,.8,.25,1);
  z-index:5;
}
.popin_bts_result.is-visible{ transform:translateY(0); }
 
.popin_bts_result_state{
  display:none; /* JS bascule sur 'flex' pour le bloc correspondant au tirage */
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
}
 
.popin_bts_result_title{
  font-family:'REM', sans-serif;
  font-size:22px;
  margin:0;
}
.popin_bts_result_message{
  font-size:13.5px;
  color:black;
  margin:0;
  max-width:280px;
}

.popin_bts_retry_form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:280px;
}
.popin_bts_retry_row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
margin-top: 8px; 
}
.popin_bts_retry_email{
  flex:1;
  min-width:0;
  height:44px;
  padding:0 14px;
  border:1px solid black;
  font-family:'Inter',sans-serif;
  font-size:13px;
}
.popin_bts_retry_btn{
  flex-shrink:0;
  width:44px;
  height:44px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:0;
  background:black;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.popin_bts_retry_btn:hover{ background:#54223a; }
.popin_bts_retry_btn:active{ transform:scale(.96); }
.popin_bts_retry_btn:disabled{ opacity:.6; cursor:default; }
.popin_bts_retry_btn:focus-visible{ outline:1px solid var(--pink-deep); outline-offset:2px; }
.popin_bts_retry_email:focus{
  outline:1px solid var(--pink-deep);
  outline-offset:1px;
}
.popin_bts_retry_error{
  font-size:11.5px;
  color:#c0392b;
  margin:0;
}
 
.popin_bts_code_box{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:2px dashed var(--pink-deep);
  border-radius:0;
  padding:10px 14px;
  font-weight:700;
  letter-spacing:.06em;
  font-size:16px;
}
.popin_bts_copy_btn{
  border:none;
  background:var(--pink-deep);
  color:#fff;
  font-size:12px;
  font-weight:600;
  padding:7px 12px;
  border-radius:0;
  cursor:pointer;
  transition:background .2s ease;
}
.popin_bts_copy_btn:hover{ background:var(--plum); }
.popin_bts_copy_btn:focus-visible{ outline:1px solid var(--plum); outline-offset:2px; }
 
.popin_bts_cta{
  display:inline-block;
  margin-top:6px;
  /*padding:12px 26px;
  border-radius:0;
  background:black;*/
  color:black;
  text-decoration:underline;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  transition:background .2s ease, transform .15s ease;
}
 
/* confetti */
.popin_bts_confetti{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:4;
}
.popin_bts_confetti i{
  position:absolute;
  top:-10px;
  width:7px; height:11px;
  border-radius:0;
  animation:confettiFall 1400ms ease-in forwards;
  opacity:0;
}
@keyframes confettiFall{
  0%{ opacity:1; transform:translateY(0) rotate(0deg); }
  100%{ opacity:0; transform:translateY(320px) rotate(340deg); }
}
 
@media (max-width:380px){
  :root{ --wheel-size: 240px; }
  .popin_bts_container{ padding:22px 16px 20px; }
}
 
/* Desktop : roue à gauche, texte à droite, popin plus large et bien centrée */
@media (min-width:860px){
  :root{ --wheel-size: 320px; }
 
  .popin_bts_container{
    max-width:460px;
    padding:44px 40px 40px;
  }
}

.popin_bts_charte{

font-size:9px;
text-align:justify;
line-height:normal;
}

.popin_bts_charte span{
font-style : normal;
text-decoration: underline;
-webkit-text-decoration-line : underline;
cursor : pointer;
font-size:9px;

}

.popin_bts_debug{
  position:fixed;
  top:12px;
  left:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  z-index:99999;
  padding:8px;
  border:1px dashed #999;
  background:repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 6px, #ececec 6px, #ececec 12px);
}
.popin_bts_debug button{
  font-family:'Inter',sans-serif;
  font-size:10.5px;
  font-weight:600;
  padding:5px 8px;
  border:1px solid #999;
  background:#fff;
  color:#333;
  cursor:pointer;
}
.popin_bts_debug button:hover{ background:#eee; }