/* =========================================================================
   Jirari Anniversaire — app.css (expérience festive, mobile-first)
   ====================================================================== */

:root{
	--c-primary:#ff2e63; --c-secondary:#21d4fd; --c-accent:#ffd23f; --c-bg:#160b2e;
	--ink:#fff; --ink-soft:rgba(255,255,255,.92); --ink-dim:rgba(255,255,255,.74);
	/* Voile SOMBRE pour les cartes : garantit la lisibilité du texte blanc
	   quel que soit le décor coloré qui passe derrière (blobs animés). */
	--glass:rgba(17,9,36,.66); --glass-brd:rgba(255,255,255,.22);
	--radius:26px; --radius-sm:16px;
	--shadow:0 18px 50px rgba(0,0,0,.5);
	--text-shadow:0 1px 10px rgba(0,0,0,.45);
	--font:'Fredoka','Segoe UI',system-ui,-apple-system,sans-serif;
	--font-fun:'Baloo 2','Fredoka',system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body.jirari-body{
	font-family:var(--font); color:var(--ink);
	/* Texture de fond optionnelle (uploadée en régie), tout au fond. */
	background-color:var(--c-bg);
	background-image:var(--bg-texture,none);
	background-size:cover; background-repeat:no-repeat; background-attachment:fixed;
	background-position-x:var(--bg-pos-x,center); background-position-y:center;
	min-height:100vh; min-height:100dvh; overflow-x:hidden;
	-webkit-font-smoothing:antialiased; line-height:1.5;
}
/* Animation horizontale optionnelle de la texture de fond (classe posée par header.php) */
body.jirari-body.jx-bg-animx{animation:jxBgPanX var(--bg-anim-dur,30s) linear infinite alternate}
@keyframes jxBgPanX{from{background-position-x:0%}to{background-position-x:100%}}
img{max-width:100%;display:block;image-orientation:from-image}
button{font-family:inherit}
a{color:inherit}

/* Fond animé global */
body.jirari-body::before{
	content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
	background:
		radial-gradient(circle at 18% 12%, color-mix(in srgb,var(--c-primary) 55%,transparent), transparent 42%),
		radial-gradient(circle at 82% 22%, color-mix(in srgb,var(--c-secondary) 50%,transparent), transparent 45%),
		radial-gradient(circle at 50% 95%, color-mix(in srgb,var(--c-accent) 35%,transparent), transparent 50%),
		linear-gradient(160deg, rgba(20,10,40,var(--bg-ov,.82)), rgba(9,5,26,var(--bg-ov,.82)) 70%);
	background-size:200% 200%;
	animation:bgShift 18s ease-in-out infinite;
}
@keyframes bgShift{0%,100%{background-position:0 0}50%{background-position:100% 100%}}

/* =================== APP SHELL =================== */
.jirari-app{
	position:relative; min-height:100vh; min-height:100dvh;
	padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
	overflow:hidden;
}

/* =================== DÉCOR =================== */
.jx-decor{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.jx-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;mix-blend-mode:screen}
.jx-blob--1{width:55vw;height:55vw;background:var(--c-primary);top:-12%;left:-15%;animation:float1 16s ease-in-out infinite}
.jx-blob--2{width:50vw;height:50vw;background:var(--c-secondary);bottom:-15%;right:-12%;animation:float2 20s ease-in-out infinite}
.jx-blob--3{width:38vw;height:38vw;background:var(--c-accent);top:40%;left:55%;animation:float1 22s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,8%) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,-6%) scale(1.08)}}

.jx-balloons{position:absolute;inset:0}
.jx-balloon{position:absolute;bottom:-120px;width:34px;height:44px;border-radius:50% 50% 48% 48%;opacity:.55;animation:rise linear infinite}
.jx-balloon::after{content:"";position:absolute;bottom:-26px;left:50%;width:1px;height:26px;background:rgba(255,255,255,.4)}
.jx-balloon:nth-child(1){left:8%;background:var(--c-primary);animation-duration:14s;animation-delay:0s}
.jx-balloon:nth-child(2){left:30%;background:var(--c-accent);animation-duration:18s;animation-delay:3s}
.jx-balloon:nth-child(3){left:54%;background:var(--c-secondary);animation-duration:16s;animation-delay:6s}
.jx-balloon:nth-child(4){left:74%;background:#7b2ff7;animation-duration:20s;animation-delay:2s}
.jx-balloon:nth-child(5){left:90%;background:var(--c-primary);animation-duration:15s;animation-delay:8s}
@keyframes rise{0%{transform:translateY(0) rotate(-4deg)}100%{transform:translateY(-118vh) rotate(4deg)}}

/* Feux d'artifice DERRIÈRE le contenu (au-dessus du fond, sous les cartes) :
   le texte « Vœu déposé ! » reste lisible, jamais de blackout. */
.jx-fireworks{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s}

/* =================== TOPBAR =================== */
.jx-topbar{
	position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
	padding:14px 18px; opacity:0; transform:translateY(-12px); transition:.5s;
	background:linear-gradient(180deg,rgba(8,4,20,.5),rgba(8,4,20,0));
}
.jx-topbar.is-shown{opacity:1;transform:none}
.jx-brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--font-fun);font-weight:700;text-shadow:var(--text-shadow)}
.jx-brand-logo{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--c-accent);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.jx-brand-emoji{font-size:26px}
.jx-brand-text b{color:var(--c-accent)}
.jx-space-link{
	display:inline-flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--glass-brd);
	color:var(--ink);padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;
	backdrop-filter:blur(8px);text-decoration:none;
}
.jx-space-link:active{transform:scale(.96)}

/* =================== SCREENS =================== */
.jx-screen{
	position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
	padding:84px 20px 40px;opacity:0;visibility:hidden;transform:translateY(30px) scale(.9);
	transition:opacity .4s ease,transform .55s cubic-bezier(.2,1.35,.3,1),visibility .5s;
	overflow-y:auto;
}
.jx-screen.is-active{opacity:1;visibility:visible;transform:none;position:relative;min-height:100vh;min-height:100dvh}
.jx-screen.is-leaving{opacity:0;transform:translateY(-20px) scale(.98)}

/* =================== CARTE (glass) =================== */
.jx-card{
	width:100%;max-width:460px;background:var(--glass);border:1px solid var(--glass-brd);
	border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow);
	backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
	text-align:center;animation:cardIn .55s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}

.jx-h2{font-family:var(--font-fun);font-size:clamp(22px,6vw,30px);font-weight:800;margin:.2em 0 .4em;line-height:1.15;text-shadow:var(--text-shadow);text-wrap:balance}
.jx-h3{font-family:var(--font-fun);font-size:19px;font-weight:700;margin:0 0 12px;text-align:left}
.jx-lead{color:var(--ink-soft);font-size:16px;margin:0 0 18px;text-wrap:pretty}
.jx-help{color:var(--ink-dim);font-size:14.5px;margin:0 0 14px}

/* =================== BOUTONS =================== */
.jx-btn{
	position:relative;overflow:hidden;
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	border:none;border-radius:999px;padding:15px 24px;font-size:16px;font-weight:700;font-family:var(--font-fun);
	color:#fff;cursor:pointer;text-decoration:none;line-height:1;
	background:linear-gradient(120deg,var(--c-primary),#ff6a3d);
	box-shadow:0 10px 26px color-mix(in srgb,var(--c-primary) 45%,transparent), inset 0 -3px 0 rgba(0,0,0,.18);
	transition:transform .18s cubic-bezier(.2,1.8,.4,1),box-shadow .25s,filter .2s;-webkit-user-select:none;user-select:none;
}
/* Reflet « candy » sur le haut du bouton */
.jx-btn::after{content:"";position:absolute;left:6%;right:6%;top:5px;height:42%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0));pointer-events:none}
.jx-btn:active{transform:scale(.92)}
.jx-btn:hover{filter:brightness(1.06)}
.jx-btn--xl{width:100%;padding:18px 24px;font-size:18px;margin-top:8px}
.jx-btn--sm{padding:10px 16px;font-size:14px}
.jx-btn--ghost{background:rgba(255,255,255,.08);border:1.5px solid var(--glass-brd);box-shadow:none;backdrop-filter:blur(6px)}
.jx-btn--link{background:none;box-shadow:none;color:var(--ink-dim);font-weight:600;text-decoration:underline;padding:10px}
.jx-btn--next,.jx-btn--submit{background:linear-gradient(120deg,var(--c-secondary),#5b8cff)}
.jx-btn--submit{background:linear-gradient(120deg,#2ec4b6,var(--c-secondary))}
.jx-btn[disabled]{opacity:.5;pointer-events:none}
.jx-btn--pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 10px 26px color-mix(in srgb,var(--c-primary) 45%,transparent)}50%{transform:scale(1.035);box-shadow:0 14px 36px color-mix(in srgb,var(--c-primary) 60%,transparent)}}

.jx-actions{display:flex;gap:12px;margin-top:22px}
.jx-actions .jx-btn{flex:1}
.jx-actions--col{flex-direction:column}

/* =================== LOADER =================== */
.jx-screen--loader{background:linear-gradient(160deg,var(--c-bg),#0b0620)}
.jx-loader-inner{text-align:center;width:100%;max-width:340px}
.jx-loader-title{font-family:var(--font-fun);font-size:clamp(26px,8vw,38px);font-weight:800;margin:18px 0 4px}
.jx-loader-sub{color:var(--ink-soft);margin:0 0 26px}

.jx-cake{position:relative;width:120px;height:110px;margin:0 auto;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.jx-cake-base{position:absolute;bottom:0;left:10px;width:100px;height:44px;border-radius:14px;background:linear-gradient(var(--c-primary),#c41d4b)}
.jx-cake-mid{position:absolute;bottom:38px;left:18px;width:84px;height:30px;border-radius:12px;background:linear-gradient(var(--c-secondary),#1597b8)}
.jx-cake-top{position:absolute;bottom:62px;left:28px;width:64px;height:22px;border-radius:10px;background:linear-gradient(var(--c-accent),#e0a800)}
.jx-cake-candle{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);width:6px;height:22px;border-radius:3px;background:#fff}
.jx-cake-flame{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);width:12px;height:18px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(var(--c-accent),#ff6a3d);box-shadow:0 0 18px var(--c-accent);animation:flame .7s ease-in-out infinite alternate}
@keyframes flame{from{transform:translateX(-50%) scale(1) rotate(-3deg)}to{transform:translateX(-50%) scale(1.15) rotate(3deg)}}

.jx-progress{position:relative;width:100%;height:16px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid var(--glass-brd)}
.jx-progress-bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent),var(--c-secondary));background-size:200% 100%;animation:shimmer 1.5s linear infinite;transition:width .25s ease}
@keyframes shimmer{from{background-position:0 0}to{background-position:200% 0}}
.jx-progress-pct{margin-top:10px;font-weight:700;font-family:var(--font-fun);color:var(--c-accent)}

/* =================== WELCOME =================== */
.jx-card--welcome{padding-top:30px}
.jx-photo-frame{position:relative;width:170px;height:170px;margin:-70px auto 16px;border-radius:50%;padding:6px;background:linear-gradient(135deg,var(--c-primary),var(--c-accent),var(--c-secondary));box-shadow:var(--shadow);animation:spinBorder 8s linear infinite}
@keyframes spinBorder{to{transform:rotate(360deg)}}
.jx-welcome-photo,.jx-photo-placeholder{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#241544;animation:spinBorder 8s linear infinite reverse}
.jx-photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-dim);font-size:12px;text-align:center;padding:10px}
.jx-photo-placeholder span{font-size:34px}
.jx-photo-sticker{position:absolute;right:6px;bottom:6px;font-size:30px;animation:bob 2s ease-in-out infinite}
.jx-welcome-title{font-family:var(--font-fun);font-size:clamp(24px,7vw,32px);font-weight:800;margin:0 0 12px;background:linear-gradient(90deg,var(--c-accent),var(--c-primary));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.jx-welcome-msg{color:var(--ink-soft);font-size:16px;font-style:italic;margin:0 0 12px}
.jx-welcome-sign{color:var(--c-accent);font-family:var(--font-fun);font-weight:600;margin:0 0 8px}

/* =================== CONCEPT =================== */
.jx-badge-event{display:inline-block;background:rgba(255,255,255,.1);border:1px solid var(--glass-brd);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:6px}
.jx-birthdate{color:var(--ink-dim);font-size:14px;margin:0 0 18px}
.jx-birthdate strong{color:var(--c-accent)}
.jx-steps{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:12px}
.jx-step{display:flex;align-items:center;gap:14px;text-align:left;background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);border-radius:var(--radius-sm);padding:13px 15px;animation:stepIn .5s both;animation-delay:calc(var(--i)*.12s + .1s)}
@keyframes stepIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.jx-step-num{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-fun);font-weight:800;color:#fff;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary))}
.jx-step div{flex:1}
.jx-step b{display:block;font-size:15px}
.jx-step small{color:var(--ink-dim);font-size:13px}
.jx-step-emo{font-size:26px}
.jx-gift{background:linear-gradient(120deg,color-mix(in srgb,var(--c-accent) 22%,transparent),color-mix(in srgb,var(--c-primary) 22%,transparent));border:1px dashed var(--c-accent);border-radius:var(--radius-sm);padding:15px;font-weight:600;font-size:15px;margin-bottom:8px;animation:giftGlow 3s ease-in-out infinite}
@keyframes giftGlow{0%,100%{box-shadow:0 0 0 rgba(255,210,63,0)}50%{box-shadow:0 0 24px color-mix(in srgb,var(--c-accent) 40%,transparent)}}

/* =================== STEPPER =================== */
.jx-stepper{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.jx-dot{width:30px;height:7px;border-radius:999px;background:rgba(255,255,255,.18);transition:.3s}
.jx-dot.is-active{background:var(--c-accent);box-shadow:0 0 12px var(--c-accent);width:40px}
.jx-dot.is-done{background:var(--c-secondary)}

/* =================== INPUTS =================== */
.jx-input{
	width:100%;background:rgba(0,0,0,.22);border:1.5px solid var(--glass-brd);border-radius:var(--radius-sm);
	color:#fff;font-size:17px;padding:15px 16px;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit;
}
.jx-input::placeholder{color:rgba(255,255,255,.4)}
.jx-input:focus{border-color:var(--c-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 22%,transparent)}
.jx-textarea{resize:vertical;min-height:120px;line-height:1.5}
.jx-counter{text-align:right;font-size:12px;color:var(--ink-dim);margin-top:6px}
.jx-field-error{color:#ffd0d8;background:rgba(255,46,99,.18);border:1px solid rgba(255,46,99,.4);border-radius:12px;padding:10px 12px;font-size:14px;margin:12px 0 0;text-align:left}
.jx-warn{color:var(--ink-dim);font-size:12.5px;margin:12px 0 0;display:flex;gap:6px;align-items:flex-start;text-align:left}
.jx-warn::before{content:"⚠️"}

/* =================== PHOTO =================== */
.jx-photo-stage{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--radius-sm);overflow:hidden;background:rgba(0,0,0,.32);border:1.5px solid var(--glass-brd);margin-bottom:14px;display:grid;place-items:center}
.jx-video,.jx-preview-img{width:100%;height:100%;object-fit:cover;display:none}
/* Garde anti-image-cassée : jamais affichée sans source valide */
.jx-preview-img:not([src]),.jx-preview-img[src=""]{display:none!important}
.jx-photo-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-soft);text-align:center;padding:18px}
.jx-photo-empty-emo{font-size:56px;animation:bob 2.4s ease-in-out infinite}
.jx-photo-empty small{font-size:14.5px;color:var(--ink-soft);max-width:240px}

/* Visibilité pilotée par data-mode (empty / camera / preview) */
.jx-photo[data-mode="camera"] .jx-video{display:block}
.jx-photo[data-mode="preview"] .jx-preview-img{display:block}
.jx-photo:not([data-mode="empty"]) .jx-photo-empty{display:none}
.jx-photo-choice,.jx-cam-live,.jx-retake{display:none}
.jx-photo[data-mode="empty"] .jx-photo-choice{display:flex;gap:10px}
.jx-photo[data-mode="camera"] .jx-cam-live{display:flex;align-items:center;justify-content:space-between;gap:14px}
.jx-photo[data-mode="preview"] .jx-retake{display:flex;justify-content:center}
.jx-photo-choice .jx-btn{flex:1}
.jx-btn--cam{background:linear-gradient(120deg,var(--c-primary),#ff6a3d)}

.jx-shutter{width:70px;height:70px;border-radius:50%;border:5px solid #fff;background:var(--c-primary);cursor:pointer;box-shadow:0 0 0 4px rgba(255,255,255,.2);transition:transform .12s;flex:none}
.jx-shutter:active{transform:scale(.9)}
.jx-icon-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1.5px solid var(--glass-brd);color:#fff;cursor:pointer;backdrop-filter:blur(6px);transition:transform .12s,background .2s;flex:none}
.jx-icon-btn:active{transform:scale(.92)}
.jx-icon-btn:hover{background:rgba(255,255,255,.2)}

/* =================== SUBMITTING / SPINNER =================== */
.jx-screen--submitting{text-align:center}
.jx-spinner{width:60px;height:60px;border-radius:50%;border:6px solid rgba(255,255,255,.15);border-top-color:var(--c-accent);animation:spin .8s linear infinite;margin:0 auto 18px}
@keyframes spin{to{transform:rotate(360deg)}}
.jx-submitting-text{color:var(--ink-soft);font-size:17px;text-shadow:var(--text-shadow)}

/* =================== TROPHÉE =================== */
.jx-card--trophy{text-align:center}
.jx-trophy{position:relative;font-size:90px;margin:6px auto 6px;display:inline-block;animation:trophyPop .8s cubic-bezier(.2,1.4,.4,1) both,bob 2.6s ease-in-out 1s infinite}
@keyframes trophyPop{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.jx-trophy-glow{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(var(--c-accent),transparent 65%);filter:blur(8px);opacity:.7;z-index:-1;animation:pulse 2s ease-in-out infinite}
.jx-trophy-title{background:linear-gradient(90deg,var(--c-accent),var(--c-primary));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.jx-position{margin:14px 0}
.jx-position-num{display:block;font-family:var(--font-fun);font-size:74px;font-weight:800;line-height:1;color:var(--c-accent);text-shadow:0 6px 24px color-mix(in srgb,var(--c-accent) 45%,transparent)}
.jx-position-label{display:block;color:var(--ink-soft);font-size:15px;margin-top:4px}
.jx-trophy-sub{color:var(--ink-dim);font-size:15px}

/* =================== EMAIL / MERCI =================== */
.jx-merci-emoji{font-size:60px;margin-bottom:8px;animation:bob 2.4s ease-in-out infinite}
.jx-card--merci{text-align:center}

/* Étape email — mise en avant désirable */
.jx-card--email{text-align:center;border:1.5px solid color-mix(in srgb,var(--c-accent) 45%,var(--glass-brd));box-shadow:0 0 0 1px color-mix(in srgb,var(--c-accent) 25%,transparent),var(--shadow)}
.jx-email-gift{position:relative;width:160px;height:130px;margin:6px auto 4px}
.jx-toile{position:absolute;inset:0;margin:auto;width:130px;height:110px;border-radius:10px;padding:8px;background:linear-gradient(135deg,var(--c-primary),var(--c-accent),var(--c-secondary));box-shadow:var(--shadow);animation:toileTilt 4s ease-in-out infinite}
@keyframes toileTilt{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-6px)}}
.jx-toile-inner{width:100%;height:100%;border-radius:5px;background:#fff7;backdrop-filter:blur(4px);background:rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid rgba(255,255,255,.55)}
.jx-toile-inner span{font-size:34px}
.jx-toile-inner small{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.jx-toile-spark{position:absolute;font-size:24px;animation:sparkle 1.8s ease-in-out infinite}
.jx-toile-spark--1{top:-6px;left:6px;animation-delay:0s}
.jx-toile-spark--2{bottom:-4px;right:0;font-size:30px;animation-delay:.4s}
.jx-toile-spark--3{top:10px;right:-4px;animation-delay:.9s}
@keyframes sparkle{0%,100%{transform:scale(.7) rotate(-8deg);opacity:.6}50%{transform:scale(1.15) rotate(8deg);opacity:1}}
.jx-email-badge{display:inline-block;background:linear-gradient(120deg,var(--c-accent),#ff9e3d);color:#3a2a00;font-weight:800;font-size:13px;padding:6px 14px;border-radius:999px;margin-bottom:8px;box-shadow:0 6px 18px color-mix(in srgb,var(--c-accent) 40%,transparent)}
.jx-perks{list-style:none;padding:0;margin:6px 0 18px;display:flex;flex-direction:column;gap:9px;text-align:left}
.jx-perks li{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);border-radius:12px;padding:11px 13px;font-size:14.5px;color:var(--ink-soft)}
.jx-perks b{color:#fff}
.jx-perk-ic{flex:none;font-size:16px}
.jx-input--email{text-align:center;font-size:18px}
.jx-btn--glow{background:linear-gradient(120deg,var(--c-accent),#ff7a3d);color:#3a2200;animation:glowBtn 1.8s ease-in-out infinite}
@keyframes glowBtn{0%,100%{box-shadow:0 8px 22px color-mix(in srgb,var(--c-accent) 45%,transparent)}50%{box-shadow:0 12px 40px color-mix(in srgb,var(--c-accent) 80%,transparent),0 0 0 4px color-mix(in srgb,var(--c-accent) 25%,transparent)}}

/* =================== LIVECOUNT =================== */
.jx-livecount{
	position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;
	display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.4);border:1px solid var(--glass-brd);
	padding:8px 16px;border-radius:999px;font-size:13px;backdrop-filter:blur(8px);box-shadow:var(--shadow);
	opacity:0;transition:opacity .5s;
}
.jx-livecount.is-shown{opacity:1}
.jx-livecount b{color:var(--c-accent);font-family:var(--font-fun);font-size:15px}
.jx-livecount-dot{width:8px;height:8px;border-radius:50%;background:#2ee86b;box-shadow:0 0 8px #2ee86b;animation:pulse 1.6s infinite}

/* =================== MASCOTTE DRAGGABLE (tête de Yassine) =================== */
.jx-btn--link::after{display:none}
.jx-mascot{position:fixed;top:58px;right:12px;z-index:40;width:66px;height:66px;border-radius:50%;cursor:grab;
	touch-action:none;-webkit-user-select:none;user-select:none;
	transform:scale(0);opacity:0;transition:transform .55s cubic-bezier(.2,1.6,.4,1),opacity .4s;
	filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.jx-mascot.is-in{opacity:1;transform:scale(1);animation:mascotFloat 3.4s ease-in-out infinite}
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
.jx-mascot.is-grabbing{cursor:grabbing;animation:none;filter:drop-shadow(0 16px 26px rgba(0,0,0,.55))}
.jx-mascot.is-wiggle{animation:mascotWiggle .8s ease-in-out}
@keyframes mascotWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-13deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(5deg)}}
.jx-mascot.is-pop{animation:mascotPop .5s cubic-bezier(.2,1.7,.4,1)}
@keyframes mascotPop{0%{transform:scale(1)}30%{transform:scale(1.4) rotate(10deg)}60%{transform:scale(.88)}100%{transform:scale(1)}}
.jx-mascot.is-settle{animation:mascotSettle .45s cubic-bezier(.2,1.7,.4,1)}
@keyframes mascotSettle{0%{transform:scale(1.18)}60%{transform:scale(.93)}100%{transform:scale(1)}}
.jx-mascot-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;position:relative;z-index:2;pointer-events:none}
.jx-mascot-emoji{position:relative;z-index:2;display:grid;place-items:center;width:100%;height:100%;font-size:38px;background:linear-gradient(135deg,var(--c-primary),var(--c-secondary));border-radius:50%;border:3px solid #fff}
.jx-mascot-ring{position:absolute;inset:-5px;border-radius:50%;z-index:1;background:conic-gradient(var(--c-primary),var(--c-accent),var(--c-secondary),var(--c-primary));animation:spinBorder 5s linear infinite}
.jx-mascot-glow{position:absolute;inset:-12px;border-radius:50%;z-index:0;background:radial-gradient(var(--c-accent),transparent 70%);opacity:.6;filter:blur(7px);animation:pulse 2.4s ease-in-out infinite}
.jx-mascot-spark{position:absolute;top:-6px;right:-4px;font-size:18px;z-index:3;pointer-events:none;animation:sparkle 1.8s ease-in-out infinite}

.jx-pop-emoji{position:fixed;z-index:9998;font-size:24px;pointer-events:none;transform:translate(-50%,-50%);animation:popEmoji .95s ease-out forwards}
@keyframes popEmoji{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.25)}}

/* =================== BULLES « CANDY » =================== */
.jx-bubbles{position:absolute;inset:0;overflow:hidden}
.jx-bubble2{position:absolute;bottom:-80px;border-radius:50%;
	background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(255,255,255,.18) 42%, rgba(255,255,255,.04) 60%, transparent 72%);
	box-shadow:inset 0 0 12px rgba(255,255,255,.25);opacity:.55;animation:bubbleRise linear infinite}
@keyframes bubbleRise{0%{transform:translateY(0) translateX(0) scale(.8)}50%{transform:translateY(-55vh) translateX(18px) scale(1)}100%{transform:translateY(-112vh) translateX(-12px) scale(1.1);opacity:0}}
.jx-bubble2:nth-child(1){left:10%;width:26px;height:26px;animation-duration:13s;animation-delay:0s}
.jx-bubble2:nth-child(2){left:26%;width:16px;height:16px;animation-duration:17s;animation-delay:3s}
.jx-bubble2:nth-child(3){left:44%;width:34px;height:34px;animation-duration:15s;animation-delay:6s}
.jx-bubble2:nth-child(4){left:62%;width:20px;height:20px;animation-duration:19s;animation-delay:1.5s}
.jx-bubble2:nth-child(5){left:78%;width:28px;height:28px;animation-duration:14s;animation-delay:4.5s}
.jx-bubble2:nth-child(6){left:90%;width:14px;height:14px;animation-duration:18s;animation-delay:7s}

/* =================== RESPONSIVE / DESKTOP =================== */
@media (min-width:640px){
	.jx-card{max-width:500px;padding:34px 32px}
	.jx-photo-frame{width:190px;height:190px}
}

/* =================== ACCESSIBILITÉ =================== */
@media (prefers-reduced-motion:reduce){
	*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.05ms!important}
	body.jirari-body::before{animation:none}
}