/* Couleurs franches, motifs et mouvement : l'univers de Bob & Lulu. */
body{isolation:isolate}body::before{content:'';position:fixed;inset:-100px;z-index:-1;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23233f83' stroke-width='4'%3E%3Cpath d='M40 20l6 15 15 6-15 6-6 15-6-15-15-6 15-6zM145 120l6 15 15 6-15 6-6 15-6-15-15-6 15-6z'/%3E%3Cpath d='M110 48c-20-28-40 8 0 28 40-20 20-56 0-28zM40 135l23-8 15 18-22 10zM40 135v20l16 15 22-9v-16M56 155v15'/%3E%3C/g%3E%3C/svg%3E");animation:patternFloat 32s linear infinite}.intro::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%239bb7ff'%3E%3Cpath d='M38 18l6 16 17 6-17 6-6 16-6-16-17-6 17-6z'/%3E%3Cpath d='M130 110c-20-26-37 8 0 27 37-19 20-53 0-27z'/%3E%3C/g%3E%3C/svg%3E");animation:patternFloat 36s linear infinite}.intro .hero-orbit{border-color:#5e6bdf;box-shadow:0 0 0 65px #435ac2,0 0 0 130px #354eaa;opacity:.65}.intro h1 em{color:#ff9ec9;text-shadow:3px 4px 0 #172b66}.intro .sticker{background:#ffcf38;color:#233f83;animation:stickerGroove 4s ease-in-out infinite!important}.intro .actor{width:clamp(145px,17vw,230px);z-index:2;filter:drop-shadow(0 12px 0 #14275b40)}.intro .actor-bob{margin-left:-30px}.intro .actor-lulu{margin-right:-30px}.intro .actor .ch{animation:mascotBob 3.7s ease-in-out infinite}.intro .actor-lulu .ch{animation:mascotLulu 4.1s ease-in-out infinite}.intro .actor.talking .ch{animation:mascotTalk .7s ease-in-out infinite}.intro .box-wrap{z-index:3}.intro .speaker{box-shadow:0 4px 0 #233f8330}.intro .dialogue{box-shadow:0 8px 0 #15285b,0 0 0 5px #8fa5ff25}.intro .rythm{color:#233f83}.brand-ribbon{box-shadow:0 5px 0 #d8a423}.guide .ch{animation:mascotBob 4s ease-in-out infinite}.guide-lulu .ch{animation:mascotLulu 4s ease-in-out infinite}.guide-ch{width:100px}.guide .bubble{transition:box-shadow .35s}.guide .bubble:hover{box-shadow:0 8px 0 #f7a1bd}.choice-monthly .choice-card{background:#d4ddff}.choice-once .choice-card{background:#ffd1e5}.choice-card,.plan-card,.custom-product{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s,box-shadow .25s,background .3s}.plan input:checked+.plan-card{background:color-mix(in srgb,var(--c) 16%,#fffaf0);transform:translateY(-6px) perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 0 0 4px var(--c),0 12px 0 var(--c)}.plan-art{background:var(--c);position:relative;isolation:isolate}.plan-art::before{content:'';position:absolute;width:160px;aspect-ratio:1;border:20px solid #ffffff35;border-radius:38% 62% 53% 47%;z-index:-1;animation:ringSpin 18s linear infinite}.plan-card .plan-name{color:var(--ink)}.plan-card .lvl{background:var(--c);color:#182c60}.plan .price b{color:var(--ink)}.plan .holiday-card-badge{background:#ffcf38}.lulu-card-perch{animation:mascotLulu 4s ease-in-out infinite;filter:drop-shadow(0 6px 0 #233f8320)}.plan:has(#plan-audacieuse-monthly) .plan-card{outline-color:#f7a1bd}.plan-actions .btn{background:color-mix(in srgb,var(--c) 30%,var(--paper));border:0}.custom-entry{background:#ffcf38;position:relative;overflow:hidden}.custom-entry::after{content:'✦';position:absolute;right:70px;top:-25px;font-size:130px;opacity:.15;animation:ringSpin 30s linear infinite;pointer-events:none}.custom-entry .ch{animation:mascotBob 3s ease-in-out infinite}.custom-hero .ch{animation:mascotLulu 4s ease-in-out infinite}.custom-product:has(input:checked){background:#edf0ff}.custom-product:has(input:checked)::after{content:'✦';position:absolute;top:12px;left:15px;color:#ffcf38;text-shadow:0 2px 0 #233f83;font:34px var(--f-display);animation:stampIn .4s both}.bento-photo{border:6px solid #fffaf0;box-shadow:0 6px 0 #233f8318;rotate:-1.4deg}.bento-photo:nth-child(3n){rotate:1.8deg}.bento-photo:hover{rotate:0deg;transform:translateY(-6px) scale(1.015)}.bento-photo img{border-radius:15px}.bento-grid{gap:22px;padding:9px}.recap-celebrate{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;padding:16px;border-radius:26px;background:var(--c);margin:22px 0 5px;overflow:hidden}.recap-host{width:100px;flex:none;animation:mascotBob 3s ease-in-out infinite}.recap-host .ch{width:100%;height:auto}.host-lulu{animation:mascotLulu 3.4s ease-in-out infinite}.recap-cheer{font:clamp(1.2rem,2vw,1.8rem)/1 var(--f-display);text-align:center;color:#233f83;rotate:-4deg}.step-recap .loot{box-shadow:0 9px 0 var(--c)}.step-recap .ticket{border-top:12px solid var(--c);box-shadow:0 9px 0 var(--c)}.step-recap .loot-stage{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--c) 45%,transparent),transparent 68%);border-radius:35px}.step-recap .btn.buy{background:#233f83;box-shadow:0 6px 0 var(--c);animation:buyBreathe 4.5s ease-in-out infinite}.step-recap .loot-stage .open-box{filter:drop-shadow(0 12px 0 #233f8318)}
.fx-transition{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden;overflow:hidden}.fx-transition.is-playing{visibility:visible}.fx-sweep{position:absolute;inset:-15% -10%;background:#7587ff;border-radius:45% 45% 0 0;transform:translateY(110%);box-shadow:0 -24px 0 #ff9fc4,0 -48px 0 #ffcf38}.is-playing .fx-sweep{animation:levelSweep .75s cubic-bezier(.7,0,.3,1) both}.fx-transition>span{position:absolute;left:50%;top:45%;translate:-50% -50%;font:clamp(1.8rem,6vw,4rem)/1 var(--f-display);width:90%;text-align:center;color:#fff3df;opacity:0}.is-playing>span{animation:levelText .75s both}.fx-sparks{position:fixed;inset:0;z-index:110;pointer-events:none;overflow:hidden}.fx-sparks i{position:absolute;color:var(--spark);font:bold 22px/1 Arial,sans-serif;animation:sparkBurst .85s ease-out both;text-shadow:0 2px 0 #233f8330}
@keyframes patternFloat{to{transform:translate(100px,100px)}}@keyframes ringSpin{to{rotate:360deg}}@keyframes mascotBob{0%,100%{transform:translateY(0) rotate(-4deg)}45%{transform:translateY(-13px) rotate(5deg) scale(1.03)}70%{transform:translateY(-3px) rotate(-2deg)}}@keyframes mascotLulu{0%,100%{transform:translateY(-7px) rotate(5deg)}50%{transform:translateY(4px) rotate(-5deg) scale(1.035)}}@keyframes mascotTalk{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(4deg) scale(1.04)}}@keyframes stickerGroove{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(8deg) scale(1.09)}}@keyframes stampIn{from{opacity:0;transform:scale(2) rotate(-60deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes levelSweep{0%{transform:translateY(110%) rotate(-6deg)}40%,55%{transform:translateY(0) rotate(0)}100%{transform:translateY(-120%) rotate(6deg)}}@keyframes levelText{0%,25%,85%,100%{opacity:0;transform:translateY(12px)}40%,60%{opacity:1;transform:translateY(0)}}@keyframes sparkBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin)) scale(.65)}}@keyframes buyBreathe{0%,85%,100%{scale:1}92%{scale:1.025}}
@media(max-width:1000px){.intro .actor{width:175px}.intro .scene{max-width:660px}.intro .actor-bob{margin-left:-15px}.intro .actor-lulu{margin-right:-15px}}
@media(max-width:600px){.intro .actor{width:clamp(100px,30vw,140px)}.intro .actor-bob{margin-left:-13px}.intro .actor-lulu{margin-right:-13px}.intro .scene{padding-left:0;padding-right:0}.guide-ch{width:80px}.recap-host{width:75px}.recap-celebrate{gap:7px;padding:12px}.recap-cheer{font-size:1.1rem}.bento-grid{gap:16px;padding:5px}.bento-photo{border-width:4px}.fx-sparks i{font-size:18px}}
@media(prefers-reduced-motion:reduce){body::before,.intro::before,.intro .sticker,.intro .actor .ch,.guide .ch,.plan-art::before,.lulu-card-perch,.custom-entry::after,.custom-entry .ch,.custom-hero .ch,.recap-host,.step-recap .btn.buy{animation:none!important}.fx-transition,.fx-sparks{display:none}.choice-card,.plan-card,.custom-product{transform:none!important}}
html.reduce-motion .intro .sticker{animation:none!important}html.reduce-motion .fx-transition,html.reduce-motion .fx-sparks{display:none}
@media(hover:hover){.plan:not(.is-locked) .plan-card:hover,.choice-card:hover,.custom-product:hover{transform:translateY(-5px) perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}}
.intro .actor-lulu{margin-right:45px}@media(max-width:600px){.intro .actor-lulu{margin-right:10px}}