body{background:#164b43;color:#fff;min-height:100svh}.site-header{max-width:1280px;margin:auto}main{max-width:1250px;margin:0 auto;padding:10px 25px 12px}#book{perspective:1700px;position:relative}.leaf{background:#fffdf2;color:#193e34;border-radius:5px 12px 12px 5px;box-shadow:0 24px 60px #06292280,0 6px 0 -1px #c2c6b3,0 12px 0 -3px #e7e7d8;overflow:hidden;position:relative}.art{position:relative;aspect-ratio:1.8;max-height:65svh;overflow:hidden}.art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.leaf:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:20px;background:linear-gradient(90deg,transparent,#26443715,transparent);z-index:4;pointer-events:none}.folio{position:absolute;top:15px;left:18px;z-index:3;border-radius:18px;padding:7px 11px;background:#fffdf3df;font-size:11px;letter-spacing:1px;font-weight:700}.bubble{position:absolute;z-index:3;max-width:32%;padding:12px 17px;background:#fffdf3;border:2px solid #194f41;border-radius:20px 20px 20px 3px;color:#193d33;text-align:left;box-shadow:3px 4px 0 #1b463024}.bubble.child{background:#ffde8c;border-color:#9b6c13;border-radius:20px 20px 3px 20px}.bubble small{display:block;font-size:11px;font-weight:700;letter-spacing:1px;margin-bottom:4px}.bubble b{display:block;font:600 clamp(18px,2.1vw,30px)/1.12 Georgia,serif;overflow-wrap:anywhere}.bubble em{font-style:normal;display:block;font-size:13px;line-height:1.3;margin-top:7px}.narration{min-height:94px;padding:20px 28px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;position:relative;background:#fffdf1}.narration p{margin:0;font:500 21px/1.4 Georgia,serif}.narration .prompt{font:500 15px/1.4 system-ui,sans-serif;color:#65745e}.narration .prompt button{margin:5px 4px 0 0;border:0;border-radius:18px;background:#e6edcf;padding:9px 13px;color:#264b38;font-size:14px}.book-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin:22px 0 12px}#coverLink{border:0;background:transparent;color:#cce0d0;font-size:12px;text-decoration:underline}#counter{font:16px Georgia,serif;min-width:70px;text-align:center}.notice{color:#c1d8c7;text-align:center;margin:0}.turning{position:absolute;inset:0;z-index:10;transform-origin:0% 50%;pointer-events:none;backface-visibility:hidden;animation:flip .7s cubic-bezier(.38,.1,.22,1) forwards;box-shadow:15px 0 45px #0004}.turning:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#fff8);z-index:6}.turning.backwards{transform-origin:100% 50%;animation-name:flipBack}@keyframes flip{to{transform:rotateY(-150deg);filter:brightness(.8)}}@keyframes flipBack{to{transform:rotateY(150deg);filter:brightness(.8)}}.cover{border:7px solid #edb534;border-left:18px solid #cb8c1d;border-radius:5px 12px 12px 5px;position:relative;box-shadow:0 25px 70px #062b2280,0 7px 0 -2px #e1dfc7;overflow:hidden;max-width:1000px;margin:auto;aspect-ratio:1.6;max-height:73svh}.cover>img{width:100%;height:100%;object-fit:cover}.cover:after{content:'';position:absolute;inset:0;background:linear-gradient(#113c3760,transparent 60%,#113c3760);pointer-events:none}.cover-heading{position:absolute;z-index:2;top:22px;left:30px}.cover-heading span{font-size:12px;letter-spacing:2px}.cover-heading h1{font:600 clamp(36px,5vw,72px)/1 Georgia,serif;margin:18px 0;text-shadow:0 3px 30px #10392d}.cover button{position:absolute;z-index:2;bottom:25px;left:30px}.touch-fruit{position:absolute;background:#ffffff12;border:2px dashed #fff8;border-radius:50%;min-width:44px;min-height:44px;color:#fff;z-index:3}.touch-fruit:hover,.touch-fruit:focus-visible,.touch-fruit.selected{background:#ffc74c55;border:3px solid #ffe283;box-shadow:0 0 0 4px #fff4}.fruit-name{position:absolute;z-index:5;background:#fffdf3;color:#193f35;padding:10px 13px;border:1px solid #bec88b;border-radius:16px;font:600 20px Georgia,serif;max-width:46%;box-shadow:0 5px 20px #173e3020}.fruit-name small{display:block;font:14px system-ui,sans-serif;margin-top:3px}.basket-count{font-size:23px;white-space:nowrap}.page-feedback{position:absolute;bottom:14px;left:15px;right:15px;padding:10px 15px;border-radius:12px;background:#fffdf1f2;color:#234837;font-size:15px;z-index:4}.reply{margin:0 0 5px;font:600 20px Georgia,serif}audio{max-width:100%;height:35px}.record-note{font-size:12px;margin-top:5px}.end-words{font:15px system-ui,sans-serif;display:flex;gap:10px;flex-wrap:wrap}.end-words button{background:#e9eccb;border:0;border-radius:20px;padding:8px 12px;color:#193e33}@media(max-width:650px){main{padding:5px 12px 12px}.leaf:after{display:none}.art{aspect-ratio:1.12;max-height:none}.folio{top:10px;left:10px;font-size:10px;padding:6px 9px}.bubble{padding:9px 11px;max-width:47%;border-radius:15px 15px 15px 3px}.bubble b{font-size:19px}.bubble small{font-size:10px}.bubble em{font-size:12px;margin-top:4px}.narration{padding:17px 18px;grid-template-columns:1fr;gap:10px;min-height:106px}.narration p{font-size:19px;line-height:1.35}.narration .prompt{font-size:14px}.cover{aspect-ratio:.8;max-height:72svh}.cover-heading{left:21px;top:24px}.cover-heading h1{font-size:43px}.cover-heading span{font-size:10px}.cover button{left:21px;bottom:22px}.book-controls{gap:9px;margin:22px 0 12px}#coverLink{display:none}.book-controls button{padding:12px 14px;font-size:14px}#counter{font-size:14px;min-width:55px}.page-feedback{font-size:13px;padding:9px 11px;bottom:9px;left:9px;right:9px}.fruit-name{font-size:17px;padding:8px 10px}.fruit-name small{font-size:12px}.notice{font-size:11px}.bubble.long b{font-size:17px}}
.art{width:100%}
.art{aspect-ratio:1.5;max-height:none}.art>img{object-fit:contain}.cover{max-height:none}.bubble b{hyphens:none;overflow-wrap:normal}.end-words a{color:#183f36;font-size:14px;padding:8px 12px}
@media(max-width:650px){.art{aspect-ratio:1.5}.bubble.long{max-width:49%;padding:8px}.bubble.long b{font-size:16px}}
.book-modes{display:flex;justify-content:center;gap:8px;margin:0 0 15px}.book-modes button{border:1px solid #b8d1bf;border-radius:22px;background:none;color:#fff;padding:9px 15px;font-size:14px}.book-modes button.active{background:#f7c151;color:#173e35;border-color:#f7c151}.listen-mode .bubble em{display:none}.participate-mode .bubble.child:not(.shown) b{display:none}.participate-mode .bubble.child:not(.shown):after{content:'À toi ! Touche pour écouter le modèle.';font-size:15px}.participate-mode .bubble.child:not(.shown) em{display:none}
/* Edition 2: true speech tails, unobscured scene and compact reading band. */
.bubble:after{content:'';position:absolute;bottom:-16px;left:24%;width:17px;height:25px;background:inherit;border-right:2px solid #194f41;border-bottom:2px solid #194f41;transform:skewY(40deg);clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none}.bubble.child:after{border-color:#9b6c13;left:62%}.bubble{border-radius:20px;max-width:43%}.bubble small{font-size:10px}.bubble b{font-size:clamp(16px,2.2vw,27px)}.narration{padding:16px 22px;gap:20px;min-height:0}.narration p{font-size:19px}.touch-fruit{border:0;background:transparent}.touch-fruit:hover,.touch-fruit.selected{border:3px solid #ffe283}.participate-mode .bubble.child:not(.shown):after{content:'';font-size:inherit}.participate-mode .bubble.child:not(.shown):before{content:'À toi de répondre…';display:block;font:700 18px Georgia,serif}.page-feedback{left:48%;background:#fffdf1e8;font-size:13px;padding:8px 10px}.cover>img{object-position:center 60%}
@media(max-width:650px){.bubble{padding:7px 8px}.bubble small{font-size:8px}.bubble b,.bubble.long b{font-size:15px}.bubble em{font-size:11px}.narration{padding:13px 15px}.narration p{font-size:17px}.narration .prompt{font-size:13px}.page-feedback{font-size:11px;left:50%;bottom:5px}.book-modes{gap:5px}.book-modes button{font-size:12px;padding:8px 12px}}
.book-choice{position:absolute;left:61%;bottom:22%;width:12%;aspect-ratio:1;background-image:url('../album/assets/words-3.webp');background-size:300% 200%;background-repeat:no-repeat;mix-blend-mode:multiply;pointer-events:none}

.inline-feedback{margin:0 0 10px;color:#244739;font-size:15px;line-height:1.4}
.fruit-name{pointer-events:none}

.fruit-result{margin:12px 0 0;color:#244739;line-height:1.45}.fruit-result strong{font-size:18px}.fruit-result small{font-size:13px}