/* ==========================================================
   Prodige2rue — invitation à créer un compte sur le fil d'écoute (ecoute.html uniquement)
   Pop-up bloquante en style Pass P2R Crew, affichée par js/ecoute.js (openWall)
   quand un visiteur sans compte a écoulé ses sons offerts.
   Utilise les variables de css/ecoute.css (--ink, --paper, --bone, --green, --disp, --txt…).
   Déploiement : /home/prodige2rue.com/public_html/css/invite.css
   ========================================================== */
.iv{position:fixed;inset:0;z-index:90;display:flex;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));
  background:rgba(12,11,10,.64);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-family:var(--txt,'Bricolage Grotesque',system-ui,sans-serif);color:var(--ink,#151412);animation:ivFade .25s ease-out both}
.iv[hidden]{display:none}
.iv *{box-sizing:border-box}

/* Pass membre */
.iv__pass{position:relative;width:100%;max-width:400px;margin:auto;background:var(--paper,#fffdf7);border:2px solid var(--ink,#151412);border-radius:20px;
  box-shadow:7px 7px 0 var(--green,#1fd26a);animation:ivIn .45s cubic-bezier(.2,.9,.3,1.15) both}
.iv__pass:focus{outline:none}
.iv__band{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:center;gap:10px;padding:11px 16px;border-radius:16px 16px 0 0;
  background:var(--ink,#151412);color:var(--paper,#fffdf7);font-family:var(--disp,'Anton',Impact,sans-serif);font-size:15px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.iv__band > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iv__band > span:last-child{text-align:right}
.iv__band b{font-weight:400;color:var(--green,#1fd26a)}
.iv__band > .iv__hole{width:46px;height:10px;border-radius:10px;background:#4a4743;box-shadow:inset 0 2px 3px rgba(0,0,0,.6)}

.iv__body{padding:20px 22px 22px}
.iv__stamp{display:inline-block;padding:1px 10px;border:3px solid var(--green-ink,#0b7a3b);border-radius:8px;color:var(--green-ink,#0b7a3b);
  font-family:var(--disp,'Anton',Impact,sans-serif);font-size:16px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-4deg)}
.iv__title{margin:14px 0 0;font-family:var(--disp,'Anton',Impact,sans-serif);font-weight:400;font-size:clamp(34px,10.4vw,44px);line-height:1;letter-spacing:.01em;text-transform:uppercase}
.iv__hl{display:inline-block;margin-top:.1em;padding:0 .14em;background:var(--green,#1fd26a);border:3px solid var(--ink,#151412);border-radius:12px;
  transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink,#151412)}
.iv__txt{margin:16px 0 0;font-size:15.5px;line-height:1.5;color:var(--muted,#6f695f);font-weight:600}
.iv__points{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.iv__points li{position:relative;padding-left:26px;font-size:15px;line-height:1.4;font-weight:800}
.iv__points li::before{content:"";position:absolute;left:0;top:.28em;width:13px;height:13px;border:2px solid var(--ink,#151412);border-radius:4px;background:var(--green,#1fd26a);transform:rotate(-8deg)}

.iv__ctas{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.iv__btn{display:flex;align-items:center;justify-content:center;padding:13px 18px;border:2px solid var(--ink,#151412);border-radius:14px;background:var(--green,#1fd26a);color:var(--ink,#151412);
  font-family:var(--disp,'Anton',Impact,sans-serif);font-size:21px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;text-align:center;
  box-shadow:3px 3px 0 var(--ink,#151412);cursor:pointer;transition:transform .15s,box-shadow .15s}
.iv__btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink,#151412)}
.iv__btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink,#151412)}
.iv__btn:focus-visible{outline:3px solid var(--ink,#151412);outline-offset:3px}
.iv__btn--paper{background:var(--paper,#fffdf7);font-size:17px;padding:10px 16px;border-radius:12px}

/* Talon perforé */
.iv__stub{position:relative;display:flex;align-items:center;gap:16px;padding:15px 22px 17px;border-top:2px dashed var(--ink,#151412)}
.iv__stub::before,.iv__stub::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:#343230;border:2px solid var(--ink,#151412)}
.iv__stub::before{left:-12px;clip-path:inset(0 0 0 50%)}
.iv__stub::after{right:-12px;clip-path:inset(0 50% 0 0)}
.iv__barcode{flex:none;width:96px;height:34px;background:repeating-linear-gradient(90deg,var(--ink,#151412) 0 2px,transparent 2px 4px,var(--ink,#151412) 4px 7px,transparent 7px 9px,var(--ink,#151412) 9px 10px,transparent 10px 13px,var(--ink,#151412) 13px 17px,transparent 17px 19px,var(--ink,#151412) 19px 20px,transparent 20px 22px)}
.iv__stub p{flex:1;min-width:0;margin:0;font-size:13.5px;line-height:1.4;font-weight:700;color:var(--muted,#6f695f)}

@keyframes ivFade{from{opacity:0}}
@keyframes ivIn{from{opacity:0;transform:translateY(46px) rotate(2.5deg)}}

/* Petits écrans : on resserre pour que tout tienne sans défiler */
@media (max-height:680px){
  .iv__body{padding:16px 20px 18px}
  .iv__title{font-size:clamp(30px,9vw,38px);margin-top:10px}
  .iv__txt{margin-top:12px;font-size:14.5px}
  .iv__points{margin-top:10px;gap:5px}
  .iv__points li{font-size:14px}
  .iv__ctas{margin-top:16px;gap:10px}
  .iv__btn{font-size:19px;padding:11px 16px}
  .iv__btn--paper{font-size:16px;padding:8px 14px}
  .iv__stub{padding:12px 20px 14px}
}
@media (max-height:580px){
  .iv__points,.iv__stub{display:none}
}
@media (max-width:360px){
  .iv{padding-left:12px;padding-right:12px}
  .iv__pass{box-shadow:5px 5px 0 var(--green,#1fd26a)}
  .iv__band{font-size:13px;padding:10px 14px;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}
  .iv__band > .iv__hole{width:34px}
  .iv__barcode{width:72px}
}
@media (prefers-reduced-motion:reduce){.iv,.iv__pass{animation:none}.iv__btn{transition:none}}