/* =====================================================================
   KDO D'ÎLES — Moteur d'ouverture du bon cadeau (6 styles)
   Chaque style = un jeu de variables CSS (ci-dessous) + un preset JS
   (sons, particules, ambiance) dans l'objet STYLES du script.
   ===================================================================== */
:root{
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;--texte:"Assistant","Segoe UI",system-ui,sans-serif;--brush:"Caveat Brush","Bradley Hand",cursive;
  --ivoire:#FFF8EE;--jungle:#0E3A2D;
  /* valeurs par défaut = Madras, écrasées par [data-style] */
  --bg1:#1C4A3A;--bg2:#10281F;--bg3:#0A1712;--ink:#FFF8EE;--soft:#CFE0D8;--accent:#F4D650;--accent2:#E0527F;--btn:#CC3366;--btn-ink:#fff;
  --rib1:#A8264F;--rib2:#CC3366;--rib3:#F08AAB;
  --wrap:repeating-linear-gradient(90deg,rgba(204,51,102,.95) 0 12px,transparent 12px 20px,rgba(244,214,80,.95) 20px 25px,transparent 25px 34px,rgba(63,178,188,.95) 34px 42px,transparent 42px 54px),repeating-linear-gradient(0deg,rgba(236,101,71,.7) 0 12px,transparent 12px 20px,rgba(244,214,80,.8) 20px 25px,transparent 25px 34px,rgba(14,58,45,.6) 34px 42px,transparent 42px 54px),#FBE7C4;
  --band:var(--wrap);--glow:rgba(244,214,80,.35);--ray:rgba(244,214,80,.28);
  color-scheme:dark;
}
[data-style="jungle"]{--bg1:#1F5A3C;--bg2:#0F2E20;--bg3:#07170F;--ink:#F4FBEF;--soft:#C9E3CF;--accent:#B8E068;--accent2:#FF8FA3;--btn:#E14C6E;--rib1:#8C1F3A;--rib2:#D13C5C;--rib3:#FF9DB0;--glow:rgba(184,224,104,.35);--ray:rgba(184,224,104,.25);
  --wrap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%231E6B45'/%3E%3Cg fill='%2338A169' opacity='.9'%3E%3Cellipse cx='20' cy='20' rx='7' ry='17' transform='rotate(35 20 20)'/%3E%3Cellipse cx='60' cy='55' rx='7' ry='17' transform='rotate(-30 60 55)'/%3E%3C/g%3E%3Cg fill='%2393D46B' opacity='.75'%3E%3Cellipse cx='58' cy='14' rx='4' ry='10' transform='rotate(-50 58 14)'/%3E%3Cellipse cx='18' cy='62' rx='4' ry='10' transform='rotate(60 18 62)'/%3E%3C/g%3E%3Ccircle cx='40' cy='38' r='4' fill='%23FF7A93'/%3E%3C/svg%3E") 0 0/64px 64px;--band:linear-gradient(90deg,#1E6B45,#38A169,#93D46B,#38A169,#1E6B45)}
[data-style="lagon"]{--bg1:#1D8FA3;--bg2:#0E4E6B;--bg3:#062A3D;--ink:#F2FCFF;--soft:#CDEFF5;--accent:#8EF0E6;--accent2:#FFD27A;--btn:#F2785C;--rib1:#D9D2C0;--rib2:#FFFFFF;--rib3:#FFFFFF;--glow:rgba(142,240,230,.4);--ray:rgba(142,240,230,.25);
  --wrap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Crect width='60' height='30' fill='%2323A6B8'/%3E%3Cpath d='M0 15 Q15 5 30 15 T60 15' fill='none' stroke='%23BFF4EE' stroke-width='3'/%3E%3Cpath d='M0 27 Q15 17 30 27 T60 27' fill='none' stroke='%231C7F99' stroke-width='3'/%3E%3C/svg%3E") 0 0/48px 24px;--band:linear-gradient(90deg,#1C7F99,#23A6B8,#BFF4EE,#23A6B8,#1C7F99)}
[data-style="soleil"]{--bg1:#DB8428;--bg2:#A23E18;--bg3:#55190A;--ink:#FFF9EC;--soft:#FFE6C2;--accent:#FFE45C;--accent2:#FFFFFF;--btn:#FFE45C;--btn-ink:#55190A;--rib1:#B9471A;--rib2:#E8672E;--rib3:#FFB27A;--glow:rgba(255,228,92,.5);--ray:rgba(255,236,150,.35);
  --wrap:repeating-conic-gradient(from 0deg at 50% 50%,#FFD23F 0 15deg,#FFC21A 15deg 30deg),#FFD23F;--band:linear-gradient(90deg,#FFB21A,#FFE45C,#FFB21A)}
[data-style="nuit"]{--bg1:#2B2360;--bg2:#15113A;--bg3:#07061A;--ink:#F3F0FF;--soft:#CFC8F2;--accent:#E9C46A;--accent2:#B69CFF;--btn:#E9C46A;--btn-ink:#15113A;--rib1:#A67C2E;--rib2:#E9C46A;--rib3:#FFF0B8;--glow:rgba(233,196,106,.35);--ray:rgba(233,196,106,.22);
  --wrap:radial-gradient(circle at 20% 30%,#FFF0B8 0 1.5px,transparent 2px) 0 0/28px 28px,radial-gradient(circle at 70% 70%,#E9C46A 0 1.2px,transparent 1.8px) 0 0/22px 22px,linear-gradient(160deg,#2E2872,#1A1650);--band:linear-gradient(90deg,#1A1650,#3A3290,#1A1650)}
[data-style="douceur"]{--bg1:#D9A0AE;--bg2:#A85C79;--bg3:#5E2A45;--ink:#FFF7F6;--soft:#FFE3E6;--accent:#FFF1B8;--accent2:#FFFFFF;--btn:#8C3A5C;--rib1:#E7B7A0;--rib2:#F8E1D2;--rib3:#FFFFFF;--glow:rgba(255,241,184,.45);--ray:rgba(255,255,255,.28);
  --wrap:radial-gradient(circle at 25% 25%,#FFFFFF 0 3px,transparent 3.5px) 0 0/22px 22px,radial-gradient(circle at 75% 75%,#F7B6C2 0 3px,transparent 3.5px) 0 0/22px 22px,#FCE4E8;--band:linear-gradient(90deg,#FCE4E8,#F7B6C2,#FCE4E8)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg3);color:var(--ink);font-family:var(--texte);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.stage{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 80% at 50% 110%,var(--bg1) 0,var(--bg2) 42%,var(--bg3) 80%);transition:background 1.2s}
canvas#fx,canvas#sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
canvas#fx{z-index:5}canvas#sky{z-index:0}
.scene{position:absolute;inset:0;display:grid;place-items:center;padding:64px 20px calc(24px + env(safe-area-inset-bottom,0px));opacity:0;pointer-events:none;transition:opacity .8s;z-index:3}
.scene.on{opacity:1;pointer-events:auto}
.col{width:min(520px,100%);display:grid;justify-items:center;text-align:center;gap:14px}
.logo{height:34px;background:var(--ivoire);padding:6px 10px;border-radius:10px}
.from{font:700 14px/1.3 var(--texte);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.big{font:800 clamp(32px,8vw,56px)/1.02 var(--display);letter-spacing:-.02em;margin:0;text-wrap:balance}
.big em{font:400 1.05em var(--brush);font-style:normal;color:var(--accent2)}
.sub{font-size:18px;color:var(--soft);margin:0;max-width:28em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:99px;border:0;background:var(--btn);color:var(--btn-ink);font:800 18px var(--texte);cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;box-shadow:none;border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);color:var(--ink);font-weight:700;font-size:16px;min-height:48px}
.small{font-size:13.5px;color:var(--soft);opacity:.85}
.cd{display:flex;gap:10px;justify-content:center}
.cd div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px 10px;min-width:72px}
.cd b{display:block;font:800 40px/1 var(--display);font-variant-numeric:tabular-nums}
.cd span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
/* paquet */
.boxzone{position:relative;width:min(290px,68vw);aspect-ratio:1/1.05;display:grid;place-items:end center;touch-action:none;cursor:pointer}
.rays{position:absolute;left:50%;top:48%;width:260%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--ray) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);opacity:0;transition:opacity .4s;animation:spin 14s linear infinite}
@keyframes spin{to{rotate:360deg}}
.glow{position:absolute;left:50%;bottom:6%;width:120%;height:40%;translate:-50% 0;background:radial-gradient(ellipse,var(--glow),transparent 70%);filter:blur(10px);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45;transform:scale(.9)}}
.box{position:relative;width:88%;height:66%;z-index:1;transform-origin:50% 100%}
.box .body{position:absolute;inset:14% 0 0 0;border-radius:10px 10px 14px 14px;background:var(--wrap);box-shadow:inset 0 -18px 30px rgba(0,0,0,.25),0 30px 50px rgba(0,0,0,.45)}
.box .body::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.22))}
.box .lid{position:absolute;left:-5%;right:-5%;top:0;height:22%;border-radius:10px;background:var(--wrap);box-shadow:0 8px 14px rgba(0,0,0,.35);transition:transform 1.1s cubic-bezier(.2,1.4,.3,1),opacity 1s;z-index:3}
.box .lid::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 60%)}
.ribv{position:absolute;left:50%;width:16%;translate:-50% 0;top:0;bottom:0;background:linear-gradient(90deg,var(--rib1),var(--rib2) 30%,var(--rib3) 50%,var(--rib2) 70%,var(--rib1));z-index:4;transition:transform .9s cubic-bezier(.5,0,.3,1),opacity .6s}
.ribh{position:absolute;left:0;right:0;top:52%;height:13%;background:linear-gradient(180deg,var(--rib1),var(--rib2) 30%,var(--rib3) 50%,var(--rib2) 70%,var(--rib1));z-index:2;transition:transform .9s cubic-bezier(.5,0,.3,1),opacity .6s}
.bow{position:absolute;left:50%;top:-15%;width:62%;height:32%;translate:-50% 0;z-index:5;transition:transform .9s cubic-bezier(.5,0,.3,1),opacity .6s;touch-action:none}
.bow i{position:absolute;top:10%;width:48%;height:80%;border-radius:50%/60% 60% 40% 40%;background:radial-gradient(circle at 40% 35%,var(--rib3),var(--rib2) 55%,var(--rib1));box-shadow:inset 0 -6px 10px rgba(0,0,0,.22)}
.bow i:nth-child(1){left:2%;rotate:-18deg}.bow i:nth-child(2){right:2%;rotate:18deg}
.bow b{position:absolute;left:50%;top:32%;width:22%;height:46%;translate:-50% 0;border-radius:40%;background:radial-gradient(circle at 40% 35%,var(--rib3),var(--rib2) 60%,var(--rib1))}
.tag{position:absolute;right:-8%;top:26%;z-index:6;background:var(--ivoire);color:#1A1A1A;padding:6px 12px 6px 18px;font:400 20px var(--brush);clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);rotate:12deg;box-shadow:0 6px 12px rgba(0,0,0,.3);transition:opacity .5s;white-space:nowrap}
.seam{position:absolute;left:-5%;right:-5%;top:20%;height:6px;background:linear-gradient(90deg,transparent,#FFF5BE,transparent);filter:blur(3px);opacity:0;z-index:2}
.flare{position:absolute;left:50%;top:40%;width:60%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,#FFFDF0 0,rgba(255,240,170,.9) 25%,transparent 70%);opacity:0;z-index:6;pointer-events:none}
.open .flare{animation:flare 1.1s ease-out forwards}
@keyframes flare{0%{opacity:0;transform:scale(.2)}20%{opacity:1}100%{opacity:0;transform:scale(7)}}
.untied .ribv{transform:translateY(-140%) rotate(8deg);opacity:0}
.untied .ribh{transform:translateX(160%);opacity:0}
.untied .bow{transform:translate(180%,-120%) rotate(60deg);opacity:0}
.untied .tag{opacity:0}
.open .lid{transform:translate(-30%,-340%) rotate(-38deg);opacity:0}
.open .seam{opacity:0!important}
.ring{position:absolute;left:50%;bottom:-74px;translate:-50% 0;width:64px;height:64px;z-index:7;opacity:0;transition:opacity .3s}
.ring.on{opacity:1}
.ring circle{fill:none;stroke-width:5}.ring .bg{stroke:rgba(255,255,255,.2)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.clues{min-height:96px;display:grid;gap:6px;justify-items:center}
.clue{font:400 clamp(21px,5.2vw,29px)/1.1 var(--brush);opacity:0;transform:translateY(10px) scale(.9);transition:all .5s cubic-bezier(.2,1.4,.3,1)}
.clue.on{opacity:1;transform:none}
.clue span{color:var(--accent)}
.step-t{font:800 22px/1.15 var(--display);margin:0}
.step-s{font-size:15.5px;color:var(--soft);margin:0}
/* révélation */
.scroll-rev{overflow-y:auto;place-items:start center}
.card{width:min(440px,92vw);background:var(--ivoire);color:#1D2A25;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5);transform:translateY(60vh) scale(.6) rotate(-6deg);transition:transform 1.4s cubic-bezier(.16,1.2,.3,1)}
.scene.on .card{transform:none}
.card-rib{height:18px;background:var(--band)}
.card-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.15);transition:transform 6s ease-out}
.scene.on .card-img img{transform:scale(1)}
.card-img span{position:absolute;left:14px;top:14px;background:var(--ivoire);color:#1D2A25;font:800 12px var(--texte);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:99px}
.card-b{padding:18px 20px 20px;display:grid;gap:8px;text-align:left}
.card-for{font:800 30px/1 var(--display);letter-spacing:-.02em}
.card-for em{font-style:normal;color:var(--btn)}
[data-style="nuit"] .card-for em,[data-style="lagon"] .card-for em{color:#C4492B}
.card-what{font:800 20px/1.15 var(--display)}
.card-msg{font:400 24px/1.15 var(--brush);color:#B8452B;min-height:56px}
.card-msg::after{content:"|";animation:blink 1s steps(1) infinite}
.card-msg.done::after{content:""}
@keyframes blink{50%{opacity:0}}
.card-f{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;color:#5B6660;border-top:1.5px dashed #E4D6BF;padding-top:10px}
.after{display:grid;gap:10px;width:min(440px,92vw);margin-top:16px;opacity:0;transform:translateY(20px);transition:all .8s .2s}
.after.on{opacity:1;transform:none}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.after .row .btn{flex:1 1 180px}
.react{display:flex;gap:8px;justify-content:center}
.react button{width:52px;height:52px;border-radius:99px;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);font-size:24px;cursor:pointer}
.sent{font:400 22px var(--brush);color:var(--accent);text-align:center;min-height:24px}
.sense{font-size:14.5px;color:var(--soft);text-align:center;margin:0}
.sense b{color:var(--accent)}
/* barre + panneau démo */
.top{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;pointer-events:none}
.top>*{pointer-events:auto}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:8px 13px;font:700 13px var(--texte);cursor:pointer;color:#fff}
.chip.demo{background:#F4D650;color:#141715;border:0}
.panel{position:fixed;z-index:30;right:12px;top:58px;width:min(380px,calc(100vw - 24px));max-height:calc(100% - 76px);overflow:auto;background:#F7F1E6;color:#1A1A1A;border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:grid;gap:12px;user-select:text;-webkit-user-select:text}
.panel h2{margin:0;font:800 18px var(--display);color:#0E3A2D}
.panel h3{margin:6px 0 0;font:800 14px var(--display);color:#0E3A2D;letter-spacing:.04em;text-transform:uppercase}
.panel p{margin:0;font-size:14px;color:#46514B}
.panel label{display:grid;gap:4px;font:700 13px var(--texte);color:#0E3A2D}
.panel input,.panel select{border:1.5px solid #DCCFB6;border-radius:10px;padding:10px 11px;font:16px var(--texte);background:#fff;color:#1A1A1A}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sw{border:2px solid transparent;border-radius:12px;padding:0;cursor:pointer;overflow:hidden;background:#fff;text-align:left}
.sw i{display:block;height:40px}
.sw span{display:block;padding:5px 8px;font:800 13px var(--texte);color:#1A1A1A}
.sw[aria-pressed="true"]{border-color:#0E3A2D;box-shadow:0 0 0 2px #F4D650}
.panel .btn{min-height:48px;font-size:16px;background:#CC3366;color:#fff}
.panel .note{background:#FFF3C4;border:1px dashed #D9B21E;border-radius:8px;padding:8px 10px;font-size:13px;color:#463700}
.cl-row{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}
.cl-row b{font:800 13px var(--texte);color:#0E3A2D}
.skip{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:50%;translate:-50% 0;z-index:20;background:none;border:0;color:var(--soft);font:600 14px var(--texte);text-decoration:underline;cursor:pointer;padding:8px}
@media (prefers-reduced-motion:reduce){.rays,.glow{animation:none}.card,.card-img img{transition:none}}

/* Integration fixes: hide inactive scenes from keyboard and assistive tools. */
.scene{visibility:hidden;overflow-y:auto;overflow-x:hidden}
.scene.on{visibility:visible}
.big,.card-what,.card-msg,.card-for,.clue{overflow-wrap:anywhere}
.tag{max-width:80%;overflow:hidden;text-overflow:ellipsis}
.demo-brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.demo-brand img{height:25px;background:#fff8ee;padding:3px 7px;border-radius:7px}
.demo-brand span{font:700 12px var(--texte);color:var(--soft)}
.card-msg{white-space:pre-wrap;user-select:text}
.back-link{color:var(--soft);font-size:15px;text-align:center;padding:12px}
.btn{text-decoration:none;text-align:center}
#demo-end{text-align:center;line-height:1.45}
#demo-end a{color:inherit}
@media(max-width:390px){.top{gap:4px;padding-left:8px;padding-right:8px}.chip{padding:8px;font-size:12px}.demo-brand img{height:22px}.demo-brand span{display:none}.scene{padding-left:14px;padding-right:14px}.big{font-size:36px}}
@media(max-height:720px){#s-box .col{gap:8px!important}.boxzone{width:min(230px,56vw)}.clues{min-height:72px}.scene{align-items:start}.col{margin:auto}.step-t{font-size:19px}#s-box .step-wrap{margin-top:64px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.card{transform:none}.card-img img{transform:none}canvas{display:none}}