/* CapClasse V21 — Ateliers interactifs et figures. À charger après kids.css. */
.at-figure{margin:22px auto;text-align:center;max-width:860px}
.at-figure img{display:block;width:100%;height:auto;margin:0 auto;border:1.5px solid var(--navy,#1f2a44);border-radius:12px;background:#fff;box-shadow:none}
.at-figure figcaption{margin-top:14px;font-size:16px;line-height:1.5;color:#4b4a7d;font-weight:700}
.at-figure.at-narrow{max-width:560px}

.at-game{margin:22px 0}
.at-card{position:relative;background:#fff;border:1.5px solid var(--c,#3d6df2);border-radius:12px;box-shadow:none;overflow:hidden;margin:0}
.at-head{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--l,#e4eeff);border-bottom:1.5px dashed var(--c,#3d6df2);flex-wrap:wrap}
.at-ico{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:12px;background:#fff;border:1.5px solid var(--navy,#1f2a44);font-size:28px;box-shadow:none;transform:rotate(-4deg)}
.at-headtext{flex:1 1 240px;min-width:0}
.at-kind{display:inline-block;font-family:var(--font-h,inherit);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--d,#1c4fb8)}
.at-done{display:inline-block;margin-left:10px;background:#d8f5e6;color:#0b6b3f;border-radius:12px;padding:1px 10px;font-size:13px;font-weight:800}
body.kids .course-panel p.at-q,.at-q{margin:2px 0 0;font-size:19px;line-height:1.45;font-weight:800;color:var(--navy,#1f2a44)}
.at-reset{margin-left:auto;background:#fff;border:1.5px solid var(--navy,#1f2a44);border-radius:12px;padding:6px 14px;font:700 14px var(--font-h,inherit);color:var(--navy,#1f2a44);cursor:pointer;box-shadow:none}
.at-reset:active{transform:translateY(2px);box-shadow:none}
.at-body{padding:20px 22px 8px}
.at-foot{padding:6px 22px 18px}
.at-bar{height:14px;border-radius:12px;background:#e9edf8;border:2px solid var(--navy,#1f2a44);overflow:hidden}
.at-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c,#3d6df2),var(--sun,#ffc400));transition:width .35s ease}
body.kids .course-panel p.at-msg,.at-msg{min-height:30px;margin:10px 0 0;font-size:17px;line-height:1.4;font-weight:800;color:var(--navy,#1f2a44)}
.at-msg.good{color:#0b7a46}.at-msg.bad{color:#b3243d}
body.kids .course-panel p.at-ask,.at-ask{margin:0 0 12px;font-size:20px;font-weight:800;color:var(--d,#1c4fb8)}
.at-info{font-size:16px;font-weight:700;margin:6px 0 8px;color:var(--navy,#1f2a44)}
.at-win{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding:14px 18px;border:2px solid #12915a;border-radius:12px;background:#e0f8ec;animation:at-pop .5s ease both}
.at-win-ico{font-size:40px}.at-win b{font-family:var(--font-h,inherit);font-size:22px;color:#0b6b3f}.at-win span{font-size:16px;font-weight:700}
.at-win .at-btn{margin-left:auto}
.at-over .at-body{opacity:.96}

/* Boutons et pastilles */
.at-btn{font:700 17px var(--font-h,inherit);color:#fff;background:var(--c,#3d6df2);border:1.5px solid var(--navy,#1f2a44);border-radius:12px;padding:9px 22px;cursor:pointer;box-shadow:none;transition:transform .08s}
.at-btn:hover{filter:brightness(1.07)}.at-btn:active{transform:translateY(3px);box-shadow:none}
.at-btn.at-ghost{background:#fff;color:var(--navy,#1f2a44)}
.at-btn.at-small{padding:6px 14px;font-size:15px}
.at-actions,.at-ctl{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.at-pool{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px}
.at-chip{font:800 18px var(--font-b,inherit);color:var(--navy,#1f2a44);background:#fff;border:1.5px solid var(--navy,#1f2a44);border-radius:12px;padding:9px 16px;cursor:pointer;box-shadow:none;transition:transform .08s,background .15s;max-width:100%;text-align:left}
.at-chip:hover:not(:disabled){background:var(--l,#e4eeff)}
.at-chip:active:not(:disabled){transform:translateY(3px);box-shadow:none}
.at-chip.sel{background:#fff3b0;outline:4px solid #ff8a00;outline-offset:2px}
.at-chip.ok{--h:150;background:hsl(var(--h,150) 70% 88%);border-color:#12915a;color:#0b5a37;box-shadow:none;cursor:default}
.at-chip.bad{background:#ffe0e5;border-color:#e8445f;color:#a31d37;text-decoration:line-through}
.at-chip:disabled{cursor:default}
.at-shake{animation:at-shake .4s}
@keyframes at-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes at-pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.03)}100%{transform:scale(1);opacity:1}}

/* ordre */
.at-slots{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 14px;padding:0}
.at-slot{min-width:84px;min-height:58px;border:1.5px dashed var(--c,#3d6df2);border-radius:12px;padding:4px 6px 6px;display:flex;flex-direction:column;gap:2px;background:#fafcff}
.at-slot>span{font:700 13px var(--font-h,inherit);color:var(--d,#1c4fb8)}
.at-slot.full{border-style:solid;background:#f0fbf5}
.at-slot .at-chip{box-shadow:none;padding:6px 10px;font-size:17px}
.at-sentence{min-height:62px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border:1.5px dashed var(--c,#3d6df2);border-radius:12px;background:#fafcff;margin-bottom:12px}
.at-sentence .at-chip{box-shadow:none;padding:6px 12px}

/* assoc */
.at-assoc{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.at-col{display:flex;flex-direction:column;gap:12px}
.at-col .at-chip{width:100%}

/* trier */
.at-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.at-bin{display:block;text-align:left;border:1.5px dashed var(--c,#3d6df2);border-radius:12px;background:#fafcff;padding:10px 12px 12px;cursor:pointer;font:inherit;color:inherit;min-height:110px}
.at-bin b{display:block;font:700 19px var(--font-h,inherit);color:var(--d,#1c4fb8);margin-bottom:8px}
.at-bin.sel{background:#fff3b0;border-color:#ff8a00}
.at-bin-in{display:flex;flex-wrap:wrap;gap:8px}
.at-bin-in .at-chip{box-shadow:none;padding:5px 10px;font-size:16px}

/* trous */
.at-trous{margin:0 0 14px;font-size:20px!important;line-height:2.4!important;font-weight:700}
.at-gap{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle;margin:0 4px;padding:3px 6px;background:var(--l,#e4eeff);border-radius:12px;border:2px dashed var(--c,#3d6df2)}
.at-gap.ok{background:#d8f5e6;border:2px solid #12915a}
.at-opt{font:800 17px var(--font-b,inherit);background:#fff;color:var(--navy,#1f2a44);border:2px solid var(--navy,#1f2a44);border-radius:10px;padding:2px 12px;cursor:pointer}
.at-opt:hover:not(:disabled){background:#fff3b0}
.at-opt.bad{background:#ffe0e5;border-color:#e8445f;color:#a31d37;text-decoration:line-through;opacity:.8}
.at-fill{font-weight:800;color:#0b6b3f;padding:0 6px}

/* saisie */
.at-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6px 18px;align-items:center;padding:10px 0;border-bottom:2px dotted #d9def0}
.at-rq{font-size:18px;font-weight:800;line-height:1.5}
.at-in{display:flex;gap:8px}
.at-in input{flex:1;min-width:0;font:800 19px var(--font-b,inherit);padding:8px 12px;border:1.5px solid var(--navy,#1f2a44);border-radius:12px;color:var(--navy,#1f2a44)}
.at-in .at-go{padding:6px 16px}
.at-rf{grid-column:1/-1;font-size:15px;font-weight:800;min-height:0;color:#b3243d}
.at-row.ok .at-rf{color:#0b7a46}.at-row.ok input{background:#e0f8ec;border-color:#12915a}
.at-row.bad input{background:#ffe9ec;border-color:#e8445f}
.at-row.shown input{background:#fff3b0}.at-row.shown .at-rf{color:#8a5a00}

/* vrai-faux */
.at-vf-card{border:1.5px solid var(--navy,#1f2a44);border-radius:12px;background:var(--l,#e4eeff);padding:16px 20px;margin-bottom:14px;min-height:96px}
.at-vf-card.good{background:#d8f5e6}
.at-vf-n{font:700 13px var(--font-h,inherit);text-transform:uppercase;letter-spacing:.04em;color:var(--d,#1c4fb8)}
body.kids .course-panel .at-vf-card p{margin:6px 0 0;font-size:21px;font-weight:800;line-height:1.5}
.at-vf-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.at-vf-v{background:#12915a}.at-vf-f{background:#e8445f}
.at-vf-btns .at-btn{flex:1 1 150px;font-size:21px;padding:12px}

/* cliquer */
.at-words{font-size:22px!important;line-height:2.5!important;font-weight:700}
.at-word{font:800 22px var(--font-b,inherit);background:#fff;color:var(--navy,#1f2a44);border:2px solid transparent;border-radius:12px;padding:0 8px;cursor:pointer}
.at-word:hover:not(:disabled){background:var(--l,#e4eeff);border-color:var(--c,#3d6df2)}
.at-word.sel{background:#fff3b0;border-color:#ff8a00}
.at-word.bad{background:#ffe0e5;border-color:#e8445f}
.at-word.ok{background:#d8f5e6;border-color:#12915a;color:#0b5a37}

/* figures interactives */
.at-fig{margin:6px auto 12px;max-width:760px;border:1.5px solid var(--navy,#1f2a44);border-radius:12px;background:#fff;overflow:hidden;padding:4px}
.at-fig svg{display:block;width:100%;height:auto}
.at-zones svg .at-z{cursor:pointer;transition:filter .15s,opacity .2s}
.at-zones svg .at-z:hover{filter:brightness(1.15) saturate(1.15)}
.at-zones svg .at-z:focus-visible{outline:none;filter:brightness(1.2)}
.at-zones svg .at-z.ok,.at-zones svg .at-z.ok *{stroke:#0b7a46!important;stroke-width:2.5!important}
.at-zones svg .at-z.bad{opacity:.45}
.at-zones svg .at-z.hint,.at-zones svg .at-z.target{animation:at-blink .8s infinite alternate}
@keyframes at-blink{from{filter:brightness(1) drop-shadow(0 0 0 #ff8a00)}to{filter:brightness(1.35) drop-shadow(0 0 6px #ff8a00)}}
.at-tag text{font:800 15px var(--font-b,inherit);fill:#1c1c3a;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.at-opts{margin-top:12px}

/* droite graduée */
.at-line .at-axis{stroke:var(--navy,#1f2a44);stroke-width:4;stroke-linecap:round}
.at-line .at-tick{stroke:var(--navy,#1f2a44);stroke-width:2}.at-line .at-tick.maj{stroke-width:4}
.at-num{font:800 16px var(--font-b,inherit);fill:var(--navy,#1f2a44)}
.at-mark circle{fill:#e8445f;stroke:var(--navy,#1f2a44);stroke-width:3}.at-mark .at-flag{stroke:#e8445f;stroke-width:4}
.at-mark.ok circle{fill:#12915a}
.at-line{cursor:pointer}

/* fraction */
.at-frac{max-width:640px;padding:10px}
.at-part{fill:#fff;stroke:var(--navy,#1f2a44);stroke-width:4;cursor:pointer;transition:fill .15s}
.at-part:hover{fill:var(--l,#e4eeff)}.at-part.on{fill:var(--c,#3d6df2)}
.at-pie{max-width:300px;margin:0 auto}

/* quadrillages */
.at-grid{max-width:600px;margin:0 auto}
.at-gl{stroke:#c9d2ea;stroke-width:1.6}
.at-dot{fill:var(--navy,#1f2a44)}.at-hit{fill:transparent;cursor:pointer}.at-hit:hover{fill:#ffc40055}
.at-pt{fill:#e8445f;stroke:#fff;stroke-width:2}
.at-draw{fill:#3d6df222;stroke:#e8445f;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.at-given{stroke:var(--d,#1c4fb8);stroke-width:5;stroke-linecap:round}.at-given-dot{fill:var(--d,#1c4fb8)}
.at-cell{fill:#fff;stroke:#b8c2e0;stroke-width:1.6;cursor:pointer}
.at-cell:hover{fill:var(--l,#e4eeff)}.at-cell.on{fill:var(--c,#3d6df2)}.at-cell.fixed{cursor:default;fill:var(--d,#1c4fb8)}
.at-axis-sym{stroke:#e8445f;stroke-width:4;stroke-dasharray:9 6;pointer-events:none}
.at-cells{max-width:520px}

/* horloge */
.at-clockwrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center}
.at-clock{width:min(260px,70vw);flex:none}
.at-face{fill:#fff;stroke:var(--navy,#1f2a44);stroke-width:6}
.at-cnum{font:700 20px var(--font-h,inherit);fill:var(--navy,#1f2a44)}
.at-mt{stroke:var(--navy,#1f2a44);stroke-width:2}.at-mt.big{stroke-width:4}
.at-hh,.at-mh{stroke-linecap:round}.at-hh{stroke:var(--navy,#1f2a44);stroke-width:9}.at-mh{stroke:#e8445f;stroke-width:6}
.at-pin{fill:var(--navy,#1f2a44)}
.at-digital{font:700 38px var(--font-h,inherit);background:#fff;border:1.5px solid var(--navy,#1f2a44);border-radius:12px;padding:6px 18px;box-shadow:none}

/* robot */
.at-robotmap{max-width:520px}.at-floor{fill:#f4f8ff;stroke:#c9d2ea;stroke-width:2}.at-wall{fill:#e7dccb;stroke:#c9b79a;stroke-width:2}
.at-emoji{font-size:30px}.at-emoji.big{font-size:34px}.at-arrow{font-size:16px;fill:#e8445f}
.at-prog{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 8px;padding:0;counter-reset:p}
.at-prog li{counter-increment:p;background:var(--l,#e4eeff);border:2px solid var(--navy,#1f2a44);border-radius:12px;padding:3px 10px;font-size:15px;font-weight:800}
.at-prog li::before{content:counter(p)'. ';color:var(--d,#1c4fb8)}

/* thermomètre */
.at-thermo{display:grid;gap:10px;justify-items:center;padding:6px 0}
.at-tview{display:flex;align-items:center;gap:16px;font-size:20px;font-weight:800}.at-ticon{font-size:64px}
.at-tval{font:700 34px var(--font-h,inherit)}
.at-slider{width:min(560px,92%);height:36px;accent-color:var(--c,#3d6df2)}

/* memory */
.at-memory{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.at-mcard{position:relative;min-height:84px;border:1.5px solid var(--navy,#1f2a44);border-radius:12px;background:var(--c,#3d6df2);cursor:pointer;font:800 18px var(--font-b,inherit);color:var(--navy,#1f2a44);box-shadow:none;padding:6px}
.at-mcard .at-mfront{display:none}.at-mcard .at-mback{font-size:30px;color:#fff}
.at-mcard.up,.at-mcard.ok{background:#fff}.at-mcard.up .at-mfront,.at-mcard.ok .at-mfront{display:block}.at-mcard.up .at-mback,.at-mcard.ok .at-mback{display:none}
.at-mcard.ok{background:#d8f5e6;border-color:#12915a;cursor:default}

/* mélange de couleurs */
.at-paint{display:inline-flex;align-items:center;gap:8px;font:800 17px var(--font-b,inherit);background:#fff;border:1.5px solid var(--navy,#1f2a44);border-radius:12px;padding:5px 16px 5px 6px;cursor:pointer;box-shadow:none;text-transform:capitalize}
.at-paint i{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--navy,#1f2a44)}
.at-mixer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font:700 28px var(--font-h,inherit);margin:6px 0 12px}
.at-pot,.at-res{display:inline-grid;place-items:center;min-width:92px;height:70px;padding:0 12px;border:1.5px solid var(--navy,#1f2a44);border-radius:12px;background:#fff;font:700 18px var(--font-h,inherit);text-transform:capitalize}

/* barres */
.at-chart{max-width:600px}.at-barv{fill:var(--c,#3d6df2);stroke:var(--navy,#1f2a44);stroke-width:2.5}
.at-barctl{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0}
.at-bc{display:flex;align-items:center;gap:8px;background:var(--l,#e4eeff);border:2px solid var(--navy,#1f2a44);border-radius:12px;padding:4px 10px;font-weight:800}
.at-bc b{min-width:26px;text-align:center;font-size:20px}
.at-tbl{background:#fff8e1;border:2px dashed var(--navy,#1f2a44);border-radius:12px;padding:8px 12px;margin-bottom:10px;font-weight:700;font-size:16px}

/* crible */
.at-crible{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-bottom:8px}
.at-num-btn{font:800 18px var(--font-b,inherit);padding:8px 0;background:#fff;color:var(--navy,#1f2a44);border:1.5px solid var(--navy,#1f2a44);border-radius:12px;cursor:pointer}
.at-num-btn:hover{background:var(--l,#e4eeff)}.at-num-btn.sel{background:#fff3b0;border-color:#ff8a00}
.at-num-btn.bad{background:#ffe0e5;border-color:#e8445f}.at-num-btn.ok{background:#d8f5e6;border-color:#12915a;color:#0b5a37}

/* mot mystère */
.at-word-slot{display:flex;gap:8px;margin:6px 0 14px;flex-wrap:wrap}
.at-lslot{display:grid;place-items:center;width:46px;height:56px;border:1.5px solid var(--navy,#1f2a44);border-bottom-width:6px;border-radius:12px;background:#fff;font:800 26px var(--font-b,inherit);text-transform:uppercase}
.at-letter{min-width:50px;text-align:center;text-transform:uppercase;font-size:24px}

/* circuit */
.at-circuit{max-width:460px}.at-wire{fill:none;stroke:var(--navy,#1f2a44);stroke-width:6}
.at-spotbox{fill:#fff;stroke:var(--c,#3d6df2);stroke-width:3;stroke-dasharray:6 4}.at-spot{cursor:pointer}.at-spot:hover .at-spotbox{fill:#fff3b0}
.at-lampbig{font-size:72px}.at-circuit.on .at-wire{stroke:#ffc400}

@media (max-width:640px){
  .at-body{padding:16px 14px 6px}.at-foot{padding:6px 14px 16px}
  .at-assoc{gap:12px 12px}
  .at-row{grid-template-columns:1fr}
  .at-chip{font-size:16px;padding:8px 12px}
  .at-trous{font-size:18px!important}
  .at-head{padding:12px 14px}.at-ico{width:44px;height:44px;font-size:24px}
  body.kids .course-panel p.at-q{font-size:17px}
  .at-win .at-btn{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.at-shake,.at-win,.at-zones svg .at-z.hint,.at-zones svg .at-z.target{animation:none}.at-bar i{transition:none}}
@media print{.at-game{display:none}}
.at-rq{overflow-wrap:anywhere;min-width:0}
.at-card,.at-card *{box-sizing:border-box;max-width:100%}

/* Glisser-déposer */
.at-t-zones .at-chip,.at-t-nommer .at-chip,.at-t-trier .at-chip,.at-t-ordre .at-chip,.at-t-assoc .at-chip{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.at-t-zones .at-chip:disabled,.at-t-nommer .at-chip:disabled,.at-t-trier .at-chip:disabled,.at-t-ordre .at-chip:disabled,.at-t-assoc .at-chip:disabled{cursor:default}
.at-chip.dragging{opacity:.3}
.at-ghost{position:fixed;z-index:99999;pointer-events:none;margin:0;transform:translate(-50%,-60%) rotate(-3deg) scale(1.08);background:#fff3b0;box-shadow:0 12px 26px rgba(43,42,92,.35)}
.at-slot.dropover,.at-bin.dropover,.at-col .at-chip.dropover{background:#fff3b0;outline:4px dashed #ff8a00;outline-offset:2px}
.at-zones svg .at-z.dropover{filter:brightness(1.2) saturate(1.3)}
.at-zones svg .at-z.dropover,.at-zones svg .at-z.dropover *{stroke:#ff8a00!important;stroke-width:4!important}
.at-labels{margin-top:14px;justify-content:center}
.at-zones svg .at-off{pointer-events:none;opacity:.55}
.at-choice{display:block}
.at-choice .at-opts{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 2px}
.at-choice .at-opt{min-height:44px;padding:6px 16px;font-size:18px;border-radius:12px;box-shadow:0 3px 0 rgba(43,42,92,.25)}
.at-choice .at-opt.ok{background:#c9f5d4;border-color:#1f9d55;color:#0d5c2e}
.at-choice .at-opt:disabled:not(.ok):not(.bad){opacity:.5}
.at-choice .at-rf{display:block;min-height:1.2em;font-weight:700}