.banana-stage{position:relative;isolation:isolate;overflow:hidden;min-height:0;height:100svh;height:100dvh;max-height:none;background:#f3e8d4;color:#073e40;display:grid;grid-template-rows:auto 1fr auto;align-items:center;text-align:center;padding:28px 4% 26px;scroll-margin-top:0}
.banana-kicker{font-family:Anton,sans-serif;font-size:clamp(28px,4vw,64px);margin:0;line-height:1.1}
.banana-scene{position:relative;width:100%;height:100%;min-height:0;display:grid;place-items:center;padding-left:10%}
#banana-title{font-family:Anton,sans-serif;font-size:clamp(60px,19vw,320px);font-style:normal;line-height:1;margin:0;letter-spacing:.015em;white-space:nowrap;position:relative;z-index:1}
#banana-title span{display:inline-block;transform-origin:50% 80%;color:inherit}
.banana-illustrations{position:absolute;inset:0 0 0 10%;z-index:2;pointer-events:none}
.banana-illustrations img{position:absolute;width:100%;height:100%;object-fit:contain;inset:0;opacity:0;transform-origin:50% 80%;max-height:none}
.banana-illustrations img.is-current{opacity:1}
.banana-spark{position:absolute;left:69%;top:8%;font-size:clamp(35px,5vw,78px);color:#f20b60;z-index:3;line-height:1}
.banana-track{position:absolute;left:3%;top:24%;bottom:30%;display:flex;flex-direction:column;justify-content:space-between;text-align:left;list-style:none;padding:0;margin:0;z-index:4;font-family:Anton,sans-serif;font-size:clamp(16px,1.8vw,30px);line-height:1.1}
.banana-track:before{content:'';position:absolute;left:-18px;top:12px;bottom:12px;width:2px;background:#073e40}
.banana-track li{position:relative;margin:0;opacity:.65}.banana-track li:before{content:'';position:absolute;width:18px;height:18px;border:2px solid #073e40;border-radius:50%;background:#f3e8d4;left:-26px;top:5px;transition:background .4s,transform .4s}.banana-track li[aria-current=step]{opacity:1}.banana-track li[aria-current=step]:before{background:#ffd000;transform:scale(1.15)}
.banana-controls{position:relative;z-index:7;display:grid;justify-items:center;gap:18px}.banana-controls p{font-size:clamp(17px,2.3vw,32px);margin:0;min-height:1.5em}.banana-controls button{background:#ffd000;color:#073e40;border:2px solid #073e40;border-radius:50px;padding:12px 32px;font:700 clamp(18px,2vw,28px)/1.2 Arial,sans-serif;box-shadow:5px 6px 0 #f20b60;cursor:pointer}.banana-controls button[aria-disabled=true]{cursor:wait}.banana-controls a{position:absolute;right:0;bottom:10px;font-size:14px;color:#073e40;text-decoration:underline}.banana-controls button:focus-visible,.banana-controls a:focus-visible{outline:3px solid #f20b60;outline-offset:8px}
.banana-fx{position:absolute;inset:0;z-index:5;pointer-events:none;display:grid;place-items:center}.banana-cloud{width:min(66%,690px);height:108%;max-height:660px;overflow:visible;opacity:0;filter:drop-shadow(8px 9px 0 #f20b60)}.banana-cloud path{fill:#fff1d2;stroke:#073e40;stroke-width:3;stroke-linejoin:round}.banana-cloud text{font:italic 60px Anton,sans-serif;fill:#073e40;text-anchor:middle}.banana-cloud circle{fill:#fff1d2;stroke:#073e40;stroke-width:2}
.banana-flash{position:absolute;inset:0;background:#fff1d2;opacity:0}.banana-scratches{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.banana-scratches path{fill:none;stroke:#073e40;stroke-width:9;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(5px 5px 0 #f20b60)}
@media(max-width:700px){.banana-stage{height:100svh;height:100dvh;min-height:0;padding:24px 5%}.banana-kicker{padding-top:36px}.banana-scene{padding-left:0}#banana-title{font-size:21vw}.banana-illustrations{inset:8% 3% 0}.banana-track{top:18px;bottom:auto;left:8%;right:8%;flex-direction:row;font:14px Arial,sans-serif}.banana-track:before{display:none}.banana-track li:before{width:10px;height:10px;left:-15px;top:2px}.banana-track br{display:none}.banana-controls{gap:14px}.banana-controls a{position:static;font-size:13px;margin-top:8px}.banana-controls p{min-height:2.5em;max-width:26ch}.banana-cloud{width:105%}.banana-spark{left:77%;top:16%}}
@media(prefers-reduced-motion:reduce){.banana-fx{display:none}.banana-track li:before{transition:none}}

#banana-title .banana-period{color:#f20b60}
#banana-title .banana-i{position:relative;letter-spacing:0;margin-right:.015em}
#banana-title .banana-i::after{content:'✦';position:absolute;left:50%;bottom:calc(100% - .06em);transform:translateX(-50%);font:400 .32em/1 Arial,sans-serif;letter-spacing:0;color:#f20b60;pointer-events:none}
#accueil.hero{height:100svh;height:100dvh;min-height:0;max-height:none}
@media(max-width:700px){
  .banana-track{display:none}
  .banana-kicker{padding-top:0}
  .banana-illustrations{z-index:0}
  #banana-title{z-index:2}
}
@media(max-height:650px){.banana-stage{padding-top:12px;padding-bottom:12px}.banana-kicker{font-size:26px}.banana-controls{gap:8px}.banana-controls p{font-size:16px;min-height:1.2em}.banana-controls button{font-size:17px;padding:8px 24px}.banana-controls a{font-size:12px}.banana-track{font-size:16px}}

.banana-cut-frame{position:absolute;inset:0 0 0 10%;pointer-events:none}
@media(max-width:700px){.banana-cut-frame{inset:8% 3% 0}}

/* Align the cloud and illustration around the same centre. */
.banana-scene{padding-left:0}.banana-illustrations,.banana-cut-frame{inset:0}.banana-cloud{position:absolute;left:50%;top:50%;translate:-50% -50%}.banana-controls{gap:0}
@media(max-width:700px){.banana-illustrations,.banana-cut-frame{inset:0}}
