#sc-guide{position:fixed;right:20px;bottom:20px;z-index:1050;font-family:inherit;color:#263c2e;text-align:left;font-size:14px;line-height:1.5}
#sc-guide button,#sc-guide a{font:inherit}
#sc-guide button{cursor:pointer}
#sc-guide-launch{display:flex;align-items:center;gap:10px;border:0;border-radius:30px;padding:10px 17px 10px 11px;background:#08753a;color:#fff;font-weight:600;box-shadow:0 4px 18px #163d242e;min-height:56px}
#sc-guide .sc-guide-mascot{position:relative;display:block;width:33px;height:30px;flex:none;border:2px solid #fff;border-radius:9px;background:#e4f4e9;transform:rotate(-5deg)}
#sc-guide .sc-guide-mascot:before{content:'';position:absolute;width:4px;height:7px;border-radius:3px;background:#e4f4e9;top:-8px;left:13px}
#sc-guide .sc-guide-eyes{position:absolute;left:7px;top:8px;width:4px;height:5px;background:#08753a;border-radius:50%;box-shadow:12px 0 #08753a}
#sc-guide .sc-guide-smile{position:absolute;left:10px;top:16px;width:10px;height:5px;border-bottom:2px solid #08753a;border-radius:0 0 10px 10px}
#sc-guide-panel{position:absolute;bottom:72px;right:0;width:360px;max-width:calc(100vw - 24px);border:1px solid #c8e0d0;border-radius:16px;background:#fff;box-shadow:0 8px 35px #143c2426;overflow:hidden;max-height:calc(100dvh - 110px);display:flex;flex-direction:column}
#sc-guide-panel[hidden]{display:none!important}
#sc-guide header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:#08753a;color:#fff;padding:16px}
#sc-guide header strong{display:block;font-size:16px}
#sc-guide header span{display:block;font-size:12px;margin-top:3px}
#sc-guide-close{border:0;background:transparent;color:#fff;font-size:26px!important;line-height:1!important;min-width:32px;min-height:32px;padding:0}
#sc-guide .sc-guide-content{overflow:auto;overscroll-behavior:contain;padding:16px}
#sc-guide p{font:inherit;color:inherit;margin:0 0 12px}
#sc-guide-topics{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
#sc-guide-topics button{background:#f3f9f5;border:1px solid #c8e0d0;color:#08753a;border-radius:9px;padding:8px 10px;text-align:left;min-height:40px}
#sc-guide-topics button[aria-pressed=true]{background:#08753a;color:#fff;border-color:#08753a}
#sc-guide-answer{border-top:1px solid #e1ebe4;padding-top:13px}
#sc-guide-answer:empty{display:none}
#sc-guide-answer strong{display:block;margin-bottom:8px}
#sc-guide-answer a{color:#08753a;text-decoration:underline;display:inline-block;padding:4px 0}
#sc-guide footer{border-top:1px solid #e1ebe4;padding:12px 16px;background:#f7faf8}
#sc-guide footer a{color:#08753a;font-size:12px}
#sc-guide button:focus-visible,#sc-guide a:focus-visible{outline:3px solid #e9a53a;outline-offset:3px}
@media(max-width:600px){#sc-guide{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}#sc-guide-launch{padding:9px 12px;gap:8px}#sc-guide-panel{width:min(360px,calc(100vw - 24px))}}

/* Mascotte pixel art, assise au bord du bouton. */
#sc-guide-launch{position:relative;min-width:166px;justify-content:center;padding:12px 18px;overflow:visible;z-index:2;}
#sc-guide .sc-guide-robot{position:absolute;right:-6px;bottom:38px;width:108px;height:132px;pointer-events:none;overflow:visible;image-rendering:pixelated;}
#sc-guide-panel{bottom:185px;max-height:calc(100dvh - 220px);}
#sc-guide .sc-robot-leg{transform-box:view-box;transform-origin:14px 32px;animation:sc-foot-left 3s steps(6,end) infinite;}
#sc-guide .sc-robot-leg-right{transform-origin:23px 32px;animation:sc-foot-right 3s steps(6,end) infinite;animation-delay:-1.5s;}
#sc-guide .sc-robot-wave{transform-origin:26px 25px;opacity:0;animation:sc-wave 3s steps(4,end) 1;}
#sc-guide .sc-robot-rest-arm{animation:sc-arm-rest 3s steps(1,end) 1;}
#sc-guide .sc-robot-gaze{transform:translate(var(--sc-eye-x,0px),var(--sc-eye-y,0px));}
#sc-guide .sc-robot-eyelids{transform-box:fill-box;transform-origin:center;animation:sc-blink 6.2s steps(1,end) infinite;}
@keyframes sc-foot-left{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(8deg)}}
@keyframes sc-foot-right{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-7deg)}}
@keyframes sc-wave{0%,85%{opacity:1;transform:rotate(0deg)}12%,36%,60%{opacity:1;transform:rotate(-16deg)}24%,48%,72%{opacity:1;transform:rotate(12deg)}90%,100%{opacity:0;transform:rotate(0deg)}}
@keyframes sc-arm-rest{0%,89%{opacity:0}90%,100%{opacity:1}}
@keyframes sc-blink{0%,45%,49%,88%,92%,100%{transform:scaleY(1)}47%,90%{transform:scaleY(.08)}}
@media(prefers-reduced-motion:reduce){#sc-guide .sc-robot-leg,#sc-guide .sc-robot-wave,#sc-guide .sc-robot-eyelids,#sc-guide .sc-robot-rest-arm{animation:none}#sc-guide .sc-robot-gaze{transform:none}}
@media(max-width:600px){#sc-guide .sc-guide-robot{width:90px;height:110px;bottom:36px}#sc-guide-launch{min-width:150px}#sc-guide-panel{bottom:155px;max-height:calc(100dvh - 190px);}}

/* Retour au personnage 2D, assis à gauche du bouton. */
#sc-guide .sc-guide-robot{left:-12px;right:auto;bottom:30px;width:120px;height:126px;image-rendering:auto;}
#sc-guide .sc-robot-leg-left{transform-origin:80px 165px;animation-timing-function:ease-in-out;}
#sc-guide .sc-robot-leg-right{transform-origin:118px 164px;animation-timing-function:ease-in-out;}
#sc-guide .sc-robot-wave{transform-origin:129px 132px;animation-timing-function:ease-in-out;}
#sc-guide .sc-robot-gaze{transition:transform .12s ease-out;}
#sc-guide-panel{bottom:175px;max-height:calc(100dvh - 210px);}
@media(max-width:600px){#sc-guide .sc-guide-robot{width:105px;height:110px;left:-9px;bottom:28px;}#sc-guide-panel{bottom:150px;max-height:calc(100dvh - 185px);}}
@media(prefers-reduced-motion:reduce){#sc-guide .sc-robot-gaze{transition:none;}}

/* Interactions du personnage, indépendantes du bouton d’aide. */
#sc-guide-pet{position:absolute;left:-12px;bottom:30px;width:120px;height:126px;z-index:3;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;}
#sc-guide #sc-guide-pet .sc-guide-robot{position:static;width:100%;height:100%;pointer-events:auto;}
#sc-guide .sc-robot-dizzy-face{display:none;}
#sc-guide-pet.is-dizzy .sc-robot-normal-face{display:none;}
#sc-guide-pet.is-dizzy .sc-robot-dizzy-face{display:inline;}
#sc-guide-pet.is-dizzy .sc-spiral{transform-box:fill-box;transform-origin:center;animation:sc-spiral .8s linear infinite;}
#sc-guide-pet.is-dizzy .sc-dizzy-mouth{transform-box:fill-box;transform-origin:center;animation:sc-wobbly-mouth .4s ease-in-out infinite alternate;}
#sc-guide-pet.is-tickled .sc-guide-robot{animation:sc-tickle .22s ease-in-out 3;}
#sc-guide-reaction{position:absolute;right:105px;bottom:78px;width:170px;max-width:calc(100vw - 140px);padding:10px 12px;border:1px solid #b5d7c0;border-radius:12px;background:#fff;color:#08753a;box-shadow:0 3px 12px #143c241a;z-index:4;text-align:center;pointer-events:none;}
#sc-guide-reaction[hidden]{display:none!important;}
@keyframes sc-spiral{to{transform:rotate(360deg)}}
@keyframes sc-wobbly-mouth{to{transform:rotate(10deg) scaleY(.6)}}
@keyframes sc-tickle{0%,100%{transform:translateX(0)}30%{transform:translateX(-2px) rotate(-2deg)}70%{transform:translateX(2px) rotate(2deg)}}
@media(max-width:600px){#sc-guide-pet{width:105px;height:110px;left:-9px;bottom:28px;}#sc-guide-reaction{right:95px;bottom:72px;width:160px;}}
@media(prefers-reduced-motion:reduce){#sc-guide-pet.is-dizzy .sc-spiral,#sc-guide-pet.is-dizzy .sc-dizzy-mouth,#sc-guide-pet.is-tickled .sc-guide-robot{animation:none}}
#sc-guide-reaction{right:180px;max-width:calc(100vw - 205px);}
@media(max-width:600px){#sc-guide-reaction{right:165px;max-width:calc(100vw - 195px);}}

/* Bouderie temporaire : le robot pousse le bouton, puis revient. */
#sc-guide .sc-robot-sulky-face,#sc-guide .sc-robot-push-arm{display:none;}
#sc-guide.is-sulking .sc-robot-normal-face,#sc-guide.is-sulking .sc-robot-dizzy-face,#sc-guide.is-sulking .sc-robot-rest-arm,#sc-guide.is-sulking .sc-robot-wave{display:none;}
#sc-guide.is-sulking .sc-robot-sulky-face,#sc-guide.is-sulking .sc-robot-push-arm{display:inline;}
#sc-guide.is-sulking .sc-robot-gaze{transform:none;}
#sc-guide.is-sulking #sc-guide-launch,#sc-guide.is-sulking #sc-guide-pet{animation:sc-sulk-trip 6s ease-in-out both;}
#sc-guide.is-sulking .sc-guide-robot{transform-origin:50% 80%;animation:sc-push-effort .4s ease-in-out 6 alternate;}
@keyframes sc-sulk-trip{0%,10%{transform:translateX(0)}45%,70%{transform:translateX(180px)}100%{transform:translateX(0)}}
@keyframes sc-push-effort{from{transform:rotate(-4deg)}to{transform:rotate(7deg)}}
@media(prefers-reduced-motion:reduce){#sc-guide.is-sulking #sc-guide-launch,#sc-guide.is-sulking #sc-guide-pet,#sc-guide.is-sulking .sc-guide-robot{animation:none;transform:none;}}

/* Avertissement, départ complet et retour après cinq secondes hors écran. */
#sc-guide-pet{left:auto;right:-6px;}
#sc-guide.is-warning .sc-robot-normal-face,#sc-guide.is-warning .sc-robot-dizzy-face{display:none;}
#sc-guide.is-warning .sc-robot-sulky-face{display:inline;}
#sc-guide.is-warning .sc-robot-gaze{transform:none;}
#sc-guide.is-sulking #sc-guide-launch,#sc-guide.is-sulking #sc-guide-pet{animation:sc-complete-trip 6s ease-in-out both;}
#sc-guide.is-sulking #sc-guide-reaction{animation:sc-departure-dialogue 6s linear both;}
#sc-guide .sc-robot-gaze{transition:transform .12s ease-out;}
#sc-guide-pet.is-happy .sc-guide-robot{animation:sc-happy-bob .5s ease-in-out 2;}
@keyframes sc-complete-trip{0%,16.6667%{transform:translateX(0)}33.3333%,83.3333%{transform:translateX(400px)}100%{transform:translateX(0)}}
@keyframes sc-departure-dialogue{0%,30%{opacity:1}33.3333%,100%{opacity:0}}
@keyframes sc-happy-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(max-width:600px){#sc-guide-pet{left:auto;right:-5px;}}
@media(prefers-reduced-motion:reduce){#sc-guide.is-sulking #sc-guide-launch,#sc-guide.is-sulking #sc-guide-pet,#sc-guide.is-sulking #sc-guide-reaction,#sc-guide-pet.is-happy .sc-guide-robot{animation:none;}#sc-guide .sc-robot-gaze{transition:none;}}

@media(max-width:600px){
 #sc-guide-launch{min-width:170px;min-height:50px;padding:10px 15px 10px 53px;}
 #sc-guide-pet{left:5px;right:auto;bottom:4px;width:44px;height:44px;}
 #sc-guide .sc-robot-body,#sc-guide .sc-robot-head>ellipse{display:none;}
 #sc-guide .sc-robot-head>rect:first-of-type{fill:#e4f4e9;stroke:#fff;stroke-width:4;rx:32px;}
 #sc-guide .sc-robot-head>rect:nth-of-type(2){fill:#e4f4e9;stroke:none;}
 #sc-guide .sc-robot-gaze{fill:#08753a;}
 #sc-guide .sc-robot-gaze path,#sc-guide .sc-robot-sulky-face,#sc-guide .sc-robot-dizzy-face{stroke:#08753a;}
 #sc-guide-panel{bottom:65px;max-height:calc(100dvh - 100px);}
 #sc-guide-reaction{right:0;bottom:65px;width:210px;max-width:calc(100vw - 24px);}
}

/* Sommeil après inactivité et réveil en sursaut. */
#sc-guide.is-sleeping .sc-robot-gaze{transform:none;}
#sc-guide.is-sleeping .sc-robot-eyelids{animation:none;transform:scaleY(.12);}
#sc-guide.is-sleeping .sc-robot-leg{animation-play-state:paused;}
#sc-guide.is-sleeping #sc-guide-pet:after{content:'Z z z';position:absolute;right:0;top:-21px;color:#08753a;font-size:18px;font-weight:700;letter-spacing:3px;animation:sc-sleep-zzz 2.5s ease-in-out infinite;white-space:nowrap;pointer-events:none;}
#sc-guide-pet.is-startled .sc-guide-robot{animation:sc-wake-startle .65s ease-out 1;}
#sc-guide-pet.is-startled .sc-robot-eyelids{animation:none;transform:scaleY(1.2);}
@keyframes sc-sleep-zzz{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
@keyframes sc-wake-startle{0%,100%{transform:translateY(0)}25%{transform:translateY(-14px) rotate(-8deg)}55%{transform:translateY(0) rotate(5deg)}75%{transform:translateY(-3px)}}
@media(max-width:600px){#sc-guide.is-sleeping #sc-guide-pet:after{font-size:13px;top:-19px;right:-3px;}#sc-guide:has(#sc-guide-reaction:not([hidden])) #sc-guide-panel{bottom:155px;max-height:calc(100dvh - 185px);}}
@media(prefers-reduced-motion:reduce){#sc-guide.is-sleeping #sc-guide-pet:after,#sc-guide-pet.is-startled .sc-guide-robot{animation:none;}}

/* Réveil surpris et citation de film. */
#sc-guide .sc-robot-surprised-mouth{display:none;}
#sc-guide-pet.is-startled .sc-robot-gaze{transform:none;transition:none;}
#sc-guide-pet.is-startled .sc-robot-smile{display:none;}
#sc-guide-pet.is-startled .sc-robot-surprised-mouth{display:inline;}
#sc-guide-reaction.is-film-quote{font-weight:700;font-style:italic;}
@media(max-width:600px){#sc-guide .sc-robot-surprised-mouth{stroke:#08753a;}}

#sc-guide-game{position:absolute;right:38px;bottom:133px;width:30px;height:20px;padding:0;border:0;border-radius:8px;background:transparent;z-index:5;}
#sc-guide-game:hover{box-shadow:0 0 0 2px #4ef3db;}
#sc-guide-pong{position:absolute;left:21.5%;top:20%;width:57.5%;height:34.76%;border-radius:20%;transform:rotate(-9deg);pointer-events:none;}
#sc-guide-pong[hidden]{display:none!important;}
#sc-guide.is-playing #sc-guide-pet{width:120px;height:126px;right:-6px;bottom:30px;}
#sc-guide.is-playing #sc-guide-game{right:38px;bottom:133px;width:30px;height:20px;}
#sc-guide.is-playing .sc-robot-gaze{visibility:hidden;}
#sc-guide.is-playing .sc-guide-robot,#sc-guide.is-playing .sc-robot-leg,#sc-guide.is-playing .sc-robot-wave,#sc-guide.is-playing .sc-robot-rest-arm{animation:none;}
#sc-guide.is-playing .sc-robot-wave{opacity:0;}
#sc-guide.is-playing .sc-robot-rest-arm{opacity:1;}
#sc-guide.is-playing #sc-guide-reaction{right:180px;bottom:78px;width:210px;max-width:calc(100vw - 205px);}
@media(max-width:600px){#sc-guide-game,#sc-guide-pong{display:none!important;}}

#sc-guide-pong-score{display:none;position:absolute;right:12px;bottom:163px;min-width:80px;text-align:center;color:#08753a;font-size:19px;font-weight:700;line-height:1.3;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;}
#sc-guide.is-playing #sc-guide-pong-score{display:block;}
@media(max-width:600px){#sc-guide.is-playing #sc-guide-pong-score{display:none;}}

/* Grand sourire de remerciement après confirmation de commande. */
#sc-guide .sc-robot-thanks-mouth{display:none;}
#sc-guide-pet.is-thankful .sc-robot-smile{display:none;}
#sc-guide-pet.is-thankful .sc-robot-thanks-mouth{display:inline;}
#sc-guide-pet.is-thankful .sc-guide-robot{animation:sc-happy-bob .5s ease-in-out 3;}
@media(max-width:600px){#sc-guide .sc-robot-thanks-mouth{fill:#08753a;stroke:#08753a;}}
@media(prefers-reduced-motion:reduce){#sc-guide-pet.is-thankful .sc-guide-robot{animation:none;}}

#sc-guide-pong-quit,#sc-guide-pong-touch{display:none;}
#sc-guide.is-playing #sc-guide-pong-quit{display:block;position:absolute;right:-4px;bottom:166px;width:40px;height:40px;border:1px solid #b5d7c0;border-radius:50%;background:#fff;color:#08753a;font-size:25px;line-height:1;z-index:6;}
#sc-guide.is-playing #sc-guide-pong-score{right:46px;bottom:165px;}
#sc-guide-pong-touch{touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain;}
@media(min-width:601px) and (max-width:1100px),(min-width:601px) and (any-pointer:coarse){
 #sc-guide.is-playing #sc-guide-pong-touch{display:flex;position:absolute;right:0;bottom:222px;width:230px;height:130px;border:2px dashed #8bbd9e;border-radius:14px;background:#eff8f2;align-items:center;justify-content:center;padding:18px;text-align:center;color:#08753a;z-index:5;}
 #sc-guide.is-playing #sc-guide-reaction{right:0;bottom:365px;width:250px;max-width:calc(100vw - 24px);}
}
@media(max-width:600px){#sc-guide-pong-quit,#sc-guide-pong-touch{display:none!important;}}

/* Le chapeau ne conserve pas de cadre après un clic ou un toucher. */
#sc-guide #sc-guide-game:focus:not(:focus-visible){outline:none;box-shadow:none;}
#sc-guide #sc-guide-game:hover:not(:focus-visible){box-shadow:none;}
#sc-guide #sc-guide-game:focus-visible{outline:3px solid #e9a53a;outline-offset:3px;}

/* Victoire amicale : petit sourire et yeux fermés. */
#sc-guide .sc-robot-closed-happy-eyes{display:none;}
#sc-guide-pet.is-gentle-winner .sc-robot-eyelids{display:none;}
#sc-guide-pet.is-gentle-winner .sc-robot-closed-happy-eyes{display:inline;}
#sc-guide-pet.is-gentle-winner .sc-robot-gaze{transform:none;}
@media(max-width:600px){#sc-guide .sc-robot-closed-happy-eyes{stroke:#08753a;}}
