*{box-sizing:border-box}body{margin:0;background:#f7f1df;color:#184c49;font-family:ui-rounded,'Trebuchet MS',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;min-height:48px;border:0;border-radius:18px;background:#fffaf0;color:#205650;padding:11px 17px;font-weight:700;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:4px solid #ef9e44;outline-offset:3px}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}header{padding:14px max(18px,calc((100vw - 650px)/2));display:flex;align-items:center;justify-content:space-between;background:#164c48;color:#fff1c9;gap:12px}header span{font-size:11px;letter-spacing:2px;font-weight:bold}header button{font-size:13px;min-height:40px;background:#ffffff16;color:#fff}main{max-width:650px;margin:auto}.heading{text-align:center;padding:22px 15px 18px}.heading p{font-size:12px;margin:0 0 9px}h1{font-family:Georgia,serif;font-weight:500;font-size:34px;line-height:1.06;margin:0 0 15px}h1 em{color:#c65c3d}.heading>span{font-size:12px;background:#e6e9d4;padding:8px 14px;border-radius:30px}#village{position:relative;aspect-ratio: .82;overflow:hidden;background:#85c9cd;isolation:isolate;border:7px solid #fff9ec;border-radius:160px 160px 30px 30px;box-shadow:0 14px 35px #184c4915;margin:0 12px}.sky{position:absolute;inset:0;background:linear-gradient(#164e70,#8dcacc 63%,#dce8d5)}.moon{position:absolute;top:8%;left:17%;height:35px;width:35px;border-radius:50%;background:#f8e7b3;box-shadow:0 0 30px #fce7b666}.hills{position:absolute;top:35%;left:-10%;width:120%;height:50%;border-radius:45%;background:#4c8f84}.panorama{position:absolute;top:24%;left:4%;width:92%;height:32%;object-fit:cover;border-radius:30% 30% 10% 10%;opacity:.92;box-shadow:0 8px 25px #1b51445c}.snowground{position:absolute;top:60%;left:-15%;width:130%;height:55%;background:radial-gradient(ellipse at top,#eff7df,#bee2cf);border-radius:50% 50% 0 0}.house{position:absolute;top:49%;width:24%;height:16%;background:#cc704c;border:3px solid #924b32;border-radius:8px;box-shadow:0 5px 0 #567f6350}.house i{position:absolute;left:-13%;top:-30%;width:126%;height:45%;background:#ab4d39;clip-path:polygon(50% 0,100% 100%,0 100%)}.house-one{left:3%;transform:rotate(-5deg)}.house-two{right:2%;background:#d8ac62;transform:rotate(4deg)}.window{width:28%;height:35%;margin:16% auto 0;background:#8bc6cb;border:4px solid #ffdf9a;border-radius:15px 15px 0 0}.house span{display:block;font-size:clamp(6px,1.8vw,11px);text-align:center;background:#ffedbf;margin:8px 2px;padding:3px}.baleine,.tracteur,.voiture{position:absolute;object-fit:contain;filter:drop-shadow(0 8px 3px #37594333)}.baleine{width:23%;left:1%;top:65%;transform:rotate(-7deg)}.tracteur{width:27%;right:1%;top:67%;transform:rotate(4deg)}.voiture{width:22%;right:5%;top:84%}#pinocchio{position:absolute;width:23%;height:32%;left:12%;bottom:1%;transform-origin:bottom center;animation:sway 5s ease-in-out infinite}#pinocchio img{width:100%;height:100%;object-fit:contain}#pinocchio.speaking{animation:sway 1.1s ease-in-out infinite}#tree{position:absolute;width:46%;height:59%;top:37%;left:28%;filter:drop-shadow(0 8px 4px #2e6d4844)}#tree>svg{width:100%;height:100%}.tree-shadow{position:absolute;bottom:4%;left:7%;width:87%;height:6%;border-radius:50%;background:#2c6d4422;z-index:-1}#branch{position:absolute;left:57%;top:57%;width:20%;height:16%}.bell{position:absolute;width:48px;height:54px;right:20%;top:78%;padding:3px;background:transparent;border-radius:50%;z-index:4;filter:drop-shadow(0 1px 2px #a97312)}.bell svg{width:100%;height:100%}.bell.hint{animation:hint 1s ease-in-out infinite}.bell.placed{position:static;width:100%;height:100%;pointer-events:none}.scene-label{position:absolute;top:18%;width:100%;text-align:center;color:#fff8de;font-size:12px;letter-spacing:.5px}#flakes{position:absolute;inset:0;pointer-events:none;z-index:6}.flake{position:absolute;top:-10%;border-radius:50%;background:#fff;animation:fall linear infinite;opacity:.8}.story{margin:20px 24px 12px;text-align:center;min-height:133px}#eyebrow{font-size:10px;letter-spacing:1.7px;color:#9f6542;font-weight:bold}.story p{font-size:17px;line-height:1.55;margin:9px 0}#audioNote{font-size:11px;color:#7e7767}.controls{padding:0 22px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center}.controls button{box-shadow:0 3px 0 #d9ddc9;border:1px solid #e2e2cd}.controls .primary{background:#216958;color:#fff8dc;flex-basis:100%;font-size:17px}#search{background:#efc56e;flex-basis:100%;font-size:16px}#count{font-size:12px;margin-left:8px;color:#96724c}.privacy,.prototype{font-size:11px;text-align:center;line-height:1.6;padding:0 30px;color:#797b66}.privacy{margin-top:24px}.prototype{font-weight:bold}#test{margin:18px;padding:18px;background:#f8d8ab;border:2px dashed #ac754a;border-radius:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12px}#test a{color:#164c48}dialog{border:0;border-radius:28px;width:min(94vw,540px);background:#153f42;color:#fff4cd;padding:22px;text-align:center;max-height:95dvh}dialog::backdrop{background:#092b32d9}dialog #close{float:right}dialog h2{clear:both;padding-top:18px;font-family:Georgia,serif;font-weight:normal}#treePreview{height:53dvh;position:relative}#treePreview #tree{height:100%;width:90%;left:5%;top:0}#treePreview .tree-shadow{display:none}.spark{position:fixed;z-index:99;font-size:24px;pointer-events:none;animation:burst 1.1s ease-out forwards}@keyframes fall{to{transform:translate(20px,700px)}}@keyframes sway{50%{transform:rotate(2deg) translateY(-2px)}}@keyframes hint{50%{filter:drop-shadow(0 0 12px #ffe39a);transform:scale(1.18)}}@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(90deg);opacity:0}}@media(min-width:600px){h1{font-size:44px}.heading{padding-top:28px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
/* Direction artistique V2 : illustration immersive, personnages originaux conservés. */
body{background:radial-gradient(ellipse at 50% 15%,#284c74 0,#102b48 45%,#0b2037 100%);color:#fff1d1}header{background:#10283f;border-bottom:1px solid #e7c77e35}header span{color:#f5d999}.heading p{color:#d2deea}.heading h1{color:#fff1ce;text-shadow:0 3px 22px #ffd77b30}.heading h1 em{color:#f3c67b}.heading>span{background:#eed39c16;border:1px solid #e9c97f66;color:#ffe4ab}#village{aspect-ratio:2/3;background:#153c66 url('assets/village-feerique-v2.webp') center/100% 100% no-repeat;border:1px solid #d8b26b88;border-radius:110px 110px 26px 26px;box-shadow:0 0 45px #e5b57422,0 22px 60px #0005;margin:0 12px}.sky,.moon,.hills,.panorama,.snowground,.house{display:none}#tree{left:15%;top:13%;width:70%;height:62%;filter:none}#tree>svg,.tree-shadow{display:none}#branch{left:57%;top:58%;width:10%;height:11%}#pinocchio{left:3%;bottom:3%;width:26%;height:28%;filter:drop-shadow(0 5px 6px #071b3b99) drop-shadow(0 0 10px #ffc66f44)}.baleine{left:2%;top:66%;width:24%;filter:drop-shadow(0 8px 6px #071b3b77)}.tracteur{right:1%;top:73%;width:31%;filter:drop-shadow(0 8px 6px #071b3b77)}.voiture{right:5%;top:87%;width:23%;filter:drop-shadow(0 8px 6px #071b3b77)}.bell{right:23%;top:81%;filter:drop-shadow(0 0 6px #ffcf76);width:48px;height:54px}.scene-label{top:8%;font-size:clamp(9px,2.6vw,14px);text-shadow:0 2px 8px #001a3a;color:#fff1cf}.story{background:#f8eacb0b;border:1px solid #f6d59122;border-radius:22px;padding:18px;margin:18px 15px 12px}#eyebrow{color:#f1ca85}.story p{font-size:17px}#audioNote{color:#b8c7d8}.controls button{background:#eaf3ed;color:#174b4c;border-color:#f2d39666;box-shadow:0 4px 12px #0003}.controls .primary{background:linear-gradient(#edce92,#d9ac64);color:#193d4b}.controls #search{background:linear-gradient(#3f877c,#276258);color:#fff4d6}.privacy,.prototype{color:#b6c5d4}#test{background:#213e5d;border-color:#d8b370;color:#ffe4ad}#test a{color:#ffe4ad}#treePreview{height:65dvh;max-width:100%;aspect-ratio:2/3;margin:auto;background:url('assets/village-feerique-v2.webp') center/100% 100%;border-radius:22px}#treePreview #tree{left:15%;top:13%;width:70%;height:62%}dialog{background:#102f49;border:1px solid #f5cf7a77}#treeModal p{font-size:14px}#village::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(circle at 17% 40%,#ffd07822,transparent 12%),radial-gradient(circle at 80% 28%,#ffd07822,transparent 12%);animation:magicglow 7s ease-in-out infinite alternate}@keyframes magicglow{to{opacity:.35}}#sparkles{position:absolute;inset:0;pointer-events:none;z-index:5}.firefly{position:absolute;width:3px;height:3px;border-radius:100%;background:#ffe6a2;box-shadow:0 0 8px 2px #ffcd67;animation:twinkle 4s ease-in-out infinite alternate}@keyframes twinkle{from{opacity:.1;transform:translateY(5px)}to{opacity:1;transform:translateY(-8px)}}
/* V3 : Pinocchio est le seul personnage présent. */
#pinocchio{left:6%;bottom:3%;width:27%;height:29%;animation:pinocchio-live 4s ease-in-out infinite;transform-origin:50% 100%}#pinocchio.speaking{animation:pinocchio-live 1.5s ease-in-out infinite}.bell:not(.placed){right:24%;top:73%}@keyframes pinocchio-live{0%,100%{transform:rotate(-1.5deg) translateY(0)}35%{transform:rotate(1.5deg) translateY(-4px)}65%{transform:rotate(-.5deg) translateY(-2px)}}@media(prefers-reduced-motion:reduce){#pinocchio{animation:none}}
/* Prototype V4 : navigation libre des 24 journées. */
#dayTools{margin:0 15px 18px;padding:16px;border:1px solid #cba66566;border-radius:22px;background:#09223e88;text-align:center}#dayTools label{font-size:13px;letter-spacing:.5px;color:#f5d799}.dayNav{display:flex;gap:8px;margin:10px 0}.dayNav select{min-width:0;flex:1;border:1px solid #d4b17666;border-radius:14px;background:#f7edda;color:#23475a;font:inherit;font-size:14px;padding:8px}.dayNav button{font-size:26px;background:#f3d597}#dayGrid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}.dayCell{position:relative;min-height:52px;min-width:0;padding:4px 2px 15px;border-radius:10px;background:#24465c;border:1px solid #a2b8bf33}.dayCell img{height:27px;width:27px;object-fit:contain}.dayCell span{position:absolute;bottom:2px;left:0;right:0;font-size:10px;color:#f9e5b9}.dayCell.selected{background:#8d6531;border:2px solid #ffe6a4}.dayCell.done::after{content:'✓';position:absolute;right:1px;top:0;color:#a7f4b7;font-size:12px}.testActions{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:12px}.testActions button{min-height:44px;font-size:12px;background:#e4c388;color:#233f51;padding:8px}.openTest{display:block;margin:0 20px 18px;padding:14px;text-align:center;color:#ffe4a2;border:1px dashed #ffe4a2;border-radius:15px;font-size:14px}#ornaments,.previewOrnaments{position:absolute;inset:0;pointer-events:none;z-index:4}.ornament{position:absolute;width:7%;height:auto;aspect-ratio:88/92;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 1px 2px #051923) drop-shadow(0 0 3px #ffcd6733)}.ornament.topper{width:10.5%;filter:drop-shadow(0 0 12px #ffe5a6)}#treasure.bell{width:48px;height:52px;padding:0;z-index:7}#treasure img{width:100%;height:100%;object-fit:contain}#treasure.hint{animation:treasure-hint 1s ease-in-out infinite}@keyframes treasure-hint{50%{filter:drop-shadow(0 0 14px #fff1a8)}}#treePreview{position:relative}#gifts{position:absolute;inset:0;z-index:4;pointer-events:none}.gift{position:absolute;display:block;background:var(--gift-color);border:1px solid #fff3bc;border-radius:3px;box-shadow:0 0 8px #ffd16655;animation:gift-appear .8s both}.gift::before{content:'';position:absolute;left:40%;width:20%;height:100%;background:#ffdda0}.gift::after{content:'';position:absolute;left:0;top:30%;height:18%;width:100%;background:#ffdda0}@keyframes gift-appear{from{opacity:0;transform:translateY(-20px) scale(.2)}to{opacity:1;transform:translateY(0) scale(1)}}.celebrate .ornament{animation:ornament-glow 1s alternate infinite}@keyframes ornament-glow{to{filter:drop-shadow(0 0 10px #ffe8a7)}}#santa{line-height:1.7}#santa h2{font-family:Georgia,serif;color:#ffd890}#santa small{color:#b7c8d5}#village::after{opacity:calc(.25 + var(--day,1)*.025)}@media(max-width:360px){#dayGrid{grid-template-columns:repeat(6,1fr)}}@media(prefers-reduced-motion:reduce){.gift,.ornament,#treasure{animation:none!important}}
