:root{--blue:#1769e8;--purple:#7145df;--teal:#0897a7;--orange:#ff6a00;--gold:#f2a900;--ink:#08245b;--bg:#f5faff}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:radial-gradient(circle at 8% 8%,#d9eaff 0 8%,transparent 9%),linear-gradient(#fff,var(--bg));min-height:100vh}button{font:inherit;cursor:pointer}header{text-align:center;padding:24px 12px 8px}.brand{font-size:64px;font-weight:900;letter-spacing:2px}.brand span{color:#1769e8}.brand b{color:#56b900}.brand i{font-size:36px;color:#56b900}header p{margin:0;font-size:20px;font-weight:700}main{max-width:1400px;margin:auto;padding:18px 4vw 90px}.lead{text-align:center;font-size:32px;margin:8px 0 20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{background:#fff;border:1px solid #d9e4f2;border-radius:22px;box-shadow:0 5px 16px #163a6517;padding:22px;min-height:260px;display:flex;flex-direction:column;position:relative;overflow:hidden}.card .num{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:900;font-size:24px;background:var(--c)}.card h2{color:var(--c);font-size:29px;margin:12px 0 8px}.card p{font-size:18px;margin:0 0 8px}.tags{color:var(--c);font-weight:800}.card button,.primary{margin-top:auto;align-self:flex-end;border:0;border-radius:24px;padding:12px 22px;background:var(--c);color:#fff;font-weight:900;font-size:17px;box-shadow:inset 0 -2px 0 #0002}.mouse{--c:var(--blue)}.keyboard{--c:var(--purple)}.computer{--c:var(--teal)}.files{--c:var(--orange)}.network{--c:var(--blue)}.challenge{--c:var(--gold)}footer{position:fixed;bottom:0;left:0;right:0;background:#eaf4ff;border-top:1px solid #c5daf3;padding:12px 4vw;display:flex;align-items:center;gap:14px;z-index:20}footer div{margin:auto;font-weight:700}footer button{border:0;background:transparent;color:var(--ink);font-weight:900}.module{max-width:1100px;margin:auto}.topbar{display:flex;align-items:center;gap:18px;margin-bottom:20px}.topbar button{border:0;background:#e8f2ff;padding:10px 15px;border-radius:16px;font-weight:800}.progress{flex:1;height:12px;background:#dfeaf6;border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--blue);width:0}.stage{background:#fff;border:1px solid #d9e4f2;border-radius:24px;min-height:600px;padding:28px;box-shadow:0 6px 18px #163a6517;position:relative}.instruction{text-align:center;font-size:30px;margin:0 0 24px}.center{text-align:center}.big-mouse{width:220px;height:310px;border:7px solid #1d2d4c;border-radius:110px;background:#eef3f8;margin:20px auto;position:relative}.big-mouse:before{content:"";position:absolute;top:0;bottom:160px;left:50%;border-left:4px solid #1d2d4c}.wheel{position:absolute;top:42px;left:50%;transform:translateX(-50%);width:20px;height:52px;border-radius:12px;background:#7f93ac}.hand{font-size:180px;transform:rotate(-25deg);display:inline-block;margin-left:-45px}.targets{height:430px;position:relative;border-radius:20px;background:#f7fbff;border:2px dashed #c7dbf3}.target{position:absolute;width:74px;height:74px;border-radius:50%;background:#fff;border:12px solid #ff5d55;box-shadow:0 0 0 8px #fff,0 0 0 12px #ff5d55;transform:translate(-50%,-50%)}.click-items{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;padding:70px}.click-item{font-size:70px;border:3px solid transparent;border-radius:20px;background:#f7fbff;padding:15px}.desktop{background:linear-gradient(#73b8ef,#ccecff);min-height:430px;border-radius:18px;padding:28px;display:flex;gap:30px;align-content:flex-start;flex-wrap:wrap}.icon{width:120px;text-align:center;padding:12px;border-radius:12px;user-select:none}.icon .pic{font-size:64px}.icon.selected{background:#1875df33;outline:2px solid #1875df}.folderzone{border:3px dashed #1769e8}.context{position:absolute;background:white;border:1px solid #aaa;box-shadow:0 6px 18px #0003;border-radius:8px;overflow:hidden;z-index:5}.context button{display:block;width:180px;text-align:left;border:0;background:white;padding:10px}.context button:hover{background:#e9f2ff}.webpage{height:420px;overflow-y:auto;border:1px solid #ccd9e8;border-radius:14px;background:white}.webpage .hero{height:360px;background:#dff2ff;display:grid;place-items:center;font-size:34px}.webpage .space{height:500px;padding:40px;font-size:22px}.robot{font-size:100px;text-align:center;padding:40px}.success{position:absolute;inset:0;background:#ffffffed;display:grid;place-items:center;text-align:center;border-radius:24px;z-index:10}.success h2{font-size:46px;color:#21a34a;margin:0}.success button{margin-top:20px;border:0;border-radius:24px;padding:14px 25px;background:#1769e8;color:white;font-weight:900}.hint{background:#fff7cf;border:1px solid #efd56d;border-radius:14px;padding:12px 18px;margin:15px auto;max-width:600px;text-align:center;font-weight:700}@media(max-width:900px){.grid{grid-template-columns:1fr}.brand{font-size:45px}footer div{display:none}.stage{min-height:520px}}

/* V2.1 — animation main corrigée + clavier */
.mouse-demo{height:390px;position:relative;max-width:720px;margin:0 auto 10px;overflow:hidden}.mouse-demo .big-mouse{position:absolute;left:50%;top:68px;transform:translateX(-50%);width:190px;height:270px;margin:0}.left-zone,.right-zone{position:absolute;top:82px;font-size:11px;color:#6d7e95;opacity:.35}.left-zone{left:30px}.right-zone{right:30px}.animated-hand{position:absolute;z-index:3;font-size:178px;left:50%;top:355px;transform:translateX(-49%) rotate(0deg) scale(.96);transform-origin:50% 90%;filter:drop-shadow(0 7px 8px #0002);animation:none}.finger-label{position:absolute;background:white;border:2px solid #cdddf0;border-radius:14px;padding:8px 12px;box-shadow:0 5px 13px #0001;opacity:0}.index-label{left:70px;top:94px;color:#1769e8}.middle-label{right:55px;top:94px;color:#7145df}.index-label:after,.middle-label:after{content:"";position:absolute;top:34px;width:100px;border-top:3px dashed currentColor}.index-label:after{left:100%}.middle-label:after{right:100%}.demo-note{margin:0 auto 16px;max-width:600px}.secondary{border:2px solid #b8cae1;border-radius:22px;background:white;color:#183d6f;font-weight:800;padding:10px 18px;margin-right:10px}
.animated-hand.play{animation:placeHand 4.8s ease-in-out 1 both}.finger-label.play{animation:showFinger 4.8s ease-in-out 1 both}
@keyframes placeHand{0%,10%{top:355px;transform:translateX(-49%) rotate(0deg) scale(.96)}30%,76%{top:95px;transform:translateX(-49%) rotate(0deg) scale(.96)}86%{top:101px;transform:translateX(-54%) rotate(-3deg) scale(.96)}94%,100%{top:95px;transform:translateX(-44%) rotate(3deg) scale(.96)}}@keyframes showFinger{0%,30%{opacity:0;transform:translateY(8px)}43%,84%{opacity:1;transform:translateY(0)}94%,100%{opacity:1;transform:translateY(0)}}
.vk{max-width:940px;margin:28px auto 0;background:#e9edf4;border-radius:18px;padding:12px;box-shadow:inset 0 -5px 0 #cdd5e0}.vk-row{display:flex;gap:6px;justify-content:center;margin:6px 0}.vk-key{min-width:48px;height:48px;padding:0 8px;background:white;border:1px solid #bac6d7;border-radius:8px;box-shadow:0 3px 0 #aab6c7;display:grid;place-items:center;font-weight:800;color:#263951;transition:.08s}.vk-key[data-key="Backspace"],.vk-key[data-key="Enter"],.vk-key[data-key="CapsLock"],.vk-key[data-key="Shift"],.vk-key[data-key="Control"],.vk-key[data-key="Alt"],.vk-key[data-key="AltGraph"]{min-width:78px}.vk-key[data-key=" "]{min-width:330px}.vk-key.pressed{transform:translateY(3px);box-shadow:none;background:#d8cfff;border-color:#7145df}.vk-key.wanted{outline:3px solid #7145df;background:#f0ebff}.big-prompt{font-size:30px}.typing-card{max-width:760px;margin:20px auto;text-align:center;background:#faf8ff;border:2px solid #e0d8fb;border-radius:20px;padding:24px}.typing-card input,.typing-card textarea{width:100%;font:700 30px/1.4 Arial,sans-serif;border:3px solid #b9addf;border-radius:12px;padding:12px 16px;outline:none;color:#08245b;background:white}.typing-card input:focus,.typing-card textarea:focus{border-color:#7145df;box-shadow:0 0 0 4px #7145df22}.target-text{font-size:34px;font-weight:900;letter-spacing:.4px;margin:8px 0 18px;color:#412f89}.live-check{min-height:28px;margin-top:10px;font-weight:900}.live-check.good{color:#21964a}.live-check.bad{color:#d45555}.combo-tip,.accent-help,.hintline{font-size:18px}.accent-help{margin-top:14px}.accent-help button{border:0;border-radius:16px;padding:8px 12px;background:#fff1b8;font-weight:800;margin-right:10px}
@media(max-width:900px){.vk{transform:scale(.82);transform-origin:top center;margin-bottom:-70px}.vk-key{min-width:38px}.vk-key[data-key=" "]{min-width:210px}.mouse-demo{transform:scale(.86);transform-origin:top center;margin-bottom:-40px}}
.mini-form{max-width:720px;margin:20px auto;background:#faf8ff;border:2px solid #e0d8fb;border-radius:20px;padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.mini-form label{font-weight:900;text-align:left}.mini-form label:nth-child(4){grid-column:1/-1}.mini-form input,.mini-form textarea{display:block;width:100%;margin-top:6px;border:2px solid #b9addf;border-radius:10px;padding:10px 12px;font:600 20px Arial,sans-serif}.mini-form button{grid-column:1/-1;justify-self:end}.mini-form #formHint{grid-column:1/-1;margin:0;text-align:center;color:#8a6200;font-weight:800}
.real-keyboard-reminder{max-width:850px;margin:0 auto 18px;padding:12px 18px;border-radius:14px;background:#fff3bf;border:2px solid #f1cc4b;text-align:center;font-size:18px;color:#493d10}.type-label{margin:4px 0 6px;font-weight:900;color:#56647a;text-transform:uppercase;font-size:14px;letter-spacing:.08em}.action-help{margin:10px auto 18px;padding:12px 16px;border-radius:12px;background:#eee9ff;color:#34256d;font-size:18px;line-height:1.45}.target-text{background:#e9f7ff;border:2px solid #74c8f2;border-radius:12px;padding:12px 16px;color:#075b86}.error-word span{background:#ffd4d4;color:#a31e1e;border-radius:6px;padding:0 3px}.replace-word{background:#ffd9d9;color:#9c2020;padding:3px 7px;border-radius:7px}.replacement-word{background:#d8f6df;color:#176a30;padding:3px 7px;border-radius:7px}.select-help{text-align:left;max-width:650px}.final-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(380px,1.2fr);gap:24px;max-width:920px;margin:18px auto}.copy-model{background:#e9f7ff;border:2px solid #74c8f2;border-radius:18px;padding:18px 22px;font-size:18px}.copy-model h3{margin-top:0;color:#075b86}.copy-model span{font-weight:900;color:#075b86}.mini-form{background:#faf8ff;border:2px solid #e0d8fb;border-radius:18px;padding:18px}.mini-form label{display:block;font-weight:800;margin:8px 0}.mini-form input,.mini-form textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:9px 11px;border:2px solid #b9addf;border-radius:9px;font-size:18px}@media(max-width:800px){.final-layout{grid-template-columns:1fr}}

.exercise-tools{display:flex;justify-content:flex-end;margin:-2px 0 8px}.restart-exercise{border:1px solid #d8dce8;background:#fff;color:#555;border-radius:10px;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer}.restart-exercise:hover{background:#f5f6fa;color:#7145df;border-color:#bcb0ed}