/* Formations premium : activités interactives */
.acts{margin:2rem 0;display:grid;gap:1.25rem}
.acts-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.acts-head h3{margin:0;font-family:var(--display);font-size:1.35rem}
.acts-count{font-size:.85rem;color:var(--muted)}
.act{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.2rem 1.3rem;box-shadow:0 10px 30px -18px rgba(36,54,58,.35);position:relative;overflow:hidden}
.act::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--green),var(--teal),var(--orange))}
.act-top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.4rem}
.act-top h4{margin:0;font-size:1.05rem;flex:1;min-width:10rem;font-family:var(--head)}
.act-type{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;background:var(--strip);color:var(--green);padding:.2rem .55rem;border-radius:99px;font-weight:700}
.act-chip{font-size:.8rem;font-weight:700;color:var(--muted)}
.act-chip.ok{color:#fff;background:var(--green);padding:.15rem .6rem;border-radius:99px}
.act-intro{color:var(--muted);margin:.2rem 0 .8rem}
.act .small{font-size:.88rem;color:var(--muted);margin:.4rem 0}
.act .btn.sm{padding:.5rem 1rem;font-size:.9rem}
.act .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.act .btn[disabled]{opacity:.5;cursor:not-allowed}
/* boutons audio */
.sp{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:var(--paper);color:var(--green);border-radius:99px;padding:.4rem .8rem;font-size:.85rem;cursor:pointer;font-weight:600}
.sp:hover{background:var(--strip)}.sp.is-speaking{background:var(--green);color:#fff;animation:fnpulse 1s infinite}
@keyframes fnpulse{50%{box-shadow:0 0 0 6px rgba(39,106,90,.18)}}
/* points de progression */
.dots{display:flex;gap:6px;margin:.3rem 0 .8rem}.dots i{width:22px;height:6px;border-radius:9px;background:var(--line)}.dots i.on{background:var(--green)}.dots i.cur{background:var(--orange)}
.qrow{display:flex;gap:.6rem;align-items:flex-start;justify-content:space-between}.qrow .q{font-size:1.1rem;font-weight:600;margin:.2rem 0 .8rem}
.opts{display:grid;gap:.5rem;margin:.4rem 0}
.opt{text-align:left;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:.7rem .9rem;font-size:1rem;cursor:pointer;color:var(--ink);transition:transform .15s,border-color .15s}
.opt:hover:not(:disabled){border-color:var(--green);transform:translateX(3px)}
.opt.is-ok{background:#dff3e4;border-color:#2f9e57;animation:fnpop .35s}.opt.is-bad{background:#fbe0dc;border-color:#d64533;animation:fnshake .35s}
@keyframes fnpop{40%{transform:scale(1.03)}}@keyframes fnshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.explain{display:none;margin:.6rem 0;padding:.6rem .8rem;border-radius:10px;background:var(--strip);font-size:.95rem}
.explain.show{display:block}.explain.ok{background:#e1f4e6}.explain.bad{background:#fbe6e2}
/* à compléter */
.fills{padding-left:1.4rem;display:grid;gap:.7rem;font-size:1.05rem}.fills li{line-height:2}
.blank{border:0;border-bottom:2px solid var(--green);background:var(--cream);font:inherit;padding:.1rem .35rem;border-radius:6px 6px 0 0;text-align:center;color:var(--ink)}
.blank.wide{min-width:11rem;text-align:left}.blank:focus{outline:2px solid var(--orange)}
.fills li.is-ok .blank{background:#dff3e4}.fills li.is-bad .blank{background:#fbe0dc}.fb{font-size:.9rem;color:var(--muted)}
.accents{display:flex;gap:4px;flex-wrap:wrap;margin:.8rem 0}.accents button{width:2rem;height:2rem;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:1rem}
.fillres{margin-top:.8rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
/* cartes */
.fc{perspective:1000px;height:190px;margin:.4rem 0;cursor:pointer;outline-offset:4px}
.fc-in{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.fc.flipped .fc-in{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:center;text-align:center;padding:1rem}
.fc-front{background:linear-gradient(135deg,var(--green),var(--teal));color:#fff;font-size:1.6rem}
.fc-back{background:var(--lime);color:var(--ink);transform:rotateY(180deg);font-size:1.25rem}.fc-back em{font-size:.95rem;opacity:.8}
.fc-prog,.hint{color:var(--muted);font-size:.85rem;display:flex;gap:.4rem;align-items:center}.fc-ctl{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
/* associer */
.match{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem}.mcol{display:grid;gap:.5rem;align-content:start}
.mbtn{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:.65rem .7rem;cursor:pointer;font-size:.98rem;color:var(--ink)}
.mbtn.sel{border-color:var(--orange);background:#fff1e8}.mbtn.is-ok{background:#dff3e4;border-color:#2f9e57;opacity:.75}.mbtn.is-bad{background:#fbe0dc;border-color:#d64533;animation:fnshake .35s}
.mstat{text-align:center;color:var(--muted);margin-top:.6rem}
/* remettre en ordre */
.oline,.opool{display:flex;flex-wrap:wrap;gap:.45rem;min-height:3.2rem;padding:.6rem;border-radius:12px}
.oline{border:2px dashed var(--line);background:var(--cream);margin:.5rem 0}.oline.empty::after{content:"Votre phrase apparaît ici";color:var(--muted);font-size:.9rem}
.oline.is-ok{border-color:#2f9e57;background:#e1f4e6}.oline.is-bad{border-color:#d64533;background:#fbe6e2}
.tile{border:1.5px solid var(--green);background:#fff;color:var(--green);border-radius:10px;padding:.45rem .8rem;font-size:1.02rem;cursor:pointer;box-shadow:0 3px 0 var(--green);font-weight:600}.tile.in{background:var(--green);color:#fff}
.tile:active{transform:translateY(2px);box-shadow:none}.octl{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
/* verbe animé */
.cj-head{display:flex;gap:.7rem;align-items:baseline;margin-bottom:.6rem}.cj-verb{font-size:1.7rem;font-family:var(--display)}.cj-tense{color:var(--orange);font-weight:700}
.cj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.cj-p{border:1.5px solid var(--line);background:var(--paper);border-radius:10px;padding:.5rem;cursor:pointer;font-size:1rem;color:var(--ink)}.cj-p.on{background:var(--green);color:#fff;border-color:var(--green)}
.cj-stage{min-height:7.5rem;margin:.8rem 0;border-radius:14px;background:radial-gradient(circle at 30% 20%,#fff,var(--strip));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:1rem;text-align:center}
.cj-word{font-size:2.4rem;font-weight:700;font-family:var(--display);display:flex;flex-wrap:wrap;justify-content:center}
.cj-word i{font-style:normal;display:inline-block;opacity:0;animation:cjin .5s forwards}.cj-pr{color:var(--muted);font-weight:500;white-space:pre}.cj-stem{color:var(--ink)}.cj-end{color:var(--orange)}
@keyframes cjin{0%{opacity:0;transform:translateY(-26px) rotate(-8deg)}70%{transform:translateY(4px)}100%{opacity:1;transform:none}}
.cj-cap{font-size:.9rem;color:var(--muted);margin:0}
.cj-table{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem;margin:.5rem 0}.cj-row{display:flex;justify-content:space-between;border-bottom:1px dotted var(--line);padding:.2rem 0}
.cj-q{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:1.15rem;margin:.4rem 0}.cj-qt{color:var(--muted);font-size:.85rem}
/* parler / écouter */
.sp-card{border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;margin:.6rem 0;background:var(--paper)}
.sp-text{font-size:1.25rem;font-weight:600;margin:.1rem 0 .3rem}.sp-text .w-ok{color:#1f8a4c}.sp-text .w-bad{color:#d64533;text-decoration:underline wavy}
.sp-ctl{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.5rem}.sp-out{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.mic{display:inline-flex;align-items:center;gap:.4rem;border:0;background:var(--orange);color:#fff;border-radius:99px;padding:.45rem 1rem;font-weight:700;cursor:pointer}.mic.rec{animation:fnpulse 1s infinite;background:#d64533}
.tip2{font-size:.88rem;background:#fff8dd;border-left:3px solid #e0b81f;padding:.4rem .6rem;border-radius:6px;margin:.4rem 0}
.listen-ctl{display:flex;gap:.8rem;align-items:center;margin:.6rem 0}
.bigplay{display:inline-flex;align-items:center;gap:.6rem;border:0;border-radius:99px;background:linear-gradient(135deg,var(--green),var(--teal));color:#fff;font-size:1.15rem;font-weight:700;padding:.9rem 1.6rem;cursor:pointer;box-shadow:0 10px 24px -10px var(--green)}.bigplay.is-speaking{animation:fnpulse 1s infinite}
/* dialogue */
.chat-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.chat{display:flex;flex-direction:column;gap:.6rem;max-height:340px;overflow:auto;padding:.8rem;background:var(--cream);border-radius:14px;margin:.5rem 0}
.bub{max-width:82%;padding:.55rem .85rem;border-radius:16px;animation:fnpop .3s}.bub p{margin:0}.bub small{display:block;font-size:.72rem;opacity:.7;margin-bottom:.1rem}
.bub.them{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}.bub.me{background:var(--green);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.typing span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--muted);animation:fndot 1s infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes fndot{50%{transform:translateY(-5px)}}
.choices{display:grid;gap:.5rem}
/* voyelles */
.vwrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem;align-items:start}
.vchart{width:100%;background:var(--cream);border-radius:14px}.vframe{fill:#fff;stroke:var(--green);stroke-width:2}.vlbl{font-size:12px;fill:var(--muted)}
.vnode{cursor:pointer}.vnode circle{fill:var(--paper);stroke:var(--green);stroke-width:2;transition:all .2s}.vnode text{font-size:15px;fill:var(--ink);font-family:system-ui}.vnode:hover circle,.vnode:focus circle{fill:var(--lime)}
.vnode.nasal circle{stroke:var(--orange)}.vnode.on circle{fill:var(--green)}.vnode.on text{fill:#fff}.vnode.good circle{fill:#2f9e57}.vnode.wrong circle{fill:#d64533}
.vpanel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem;min-height:12rem}.vbig{font-size:3rem;font-family:var(--display);color:var(--green)}.vwords{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:.3rem .8rem;cursor:pointer;color:var(--ink)}
@media(max-width:640px){.vwrap{grid-template-columns:1fr}.match{gap:.4rem}.cj-grid{grid-template-columns:repeat(2,1fr)}.cj-word{font-size:1.9rem}}
/* résultat */
.result{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;padding:.6rem}.rtxt h4{margin:0 0 .2rem;font-size:1.25rem}.rtxt p{margin:.2rem 0 .6rem}
.ring{position:relative;width:92px;height:92px;flex:none}.ring svg circle{fill:none;stroke-width:8}.ring .bg{stroke:var(--line)}.ring .fg{stroke:var(--green);stroke-linecap:round;transition:stroke-dashoffset 1.1s ease}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.4rem}.ring small{font-size:.7rem}
/* scène 3D */
.stage3d{position:relative;border-radius:16px;overflow:hidden;background:#bfe3ff;border:1px solid var(--line);margin-top:.5rem}
.stage-canvas{width:100%;height:clamp(300px,52vw,500px);position:relative}.stage-canvas canvas{cursor:grab}
.stage-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl3d{position:absolute;left:0;top:0;background:rgba(255,255,255,.95);color:var(--ink);font-weight:700;font-size:.8rem;padding:.2rem .55rem;border-radius:99px;box-shadow:0 4px 12px rgba(0,0,0,.2);white-space:nowrap;will-change:transform}
.stage-hud{position:absolute;left:10px;top:10px;background:rgba(36,54,58,.82);color:#fff;font-size:.8rem;padding:.3rem .7rem;border-radius:99px;pointer-events:none}
.stage-tabs{position:absolute;right:10px;top:10px;display:flex;background:rgba(255,255,255,.92);border-radius:99px;padding:3px;gap:2px}.stage-tabs button{border:0;background:transparent;padding:.3rem .8rem;border-radius:99px;cursor:pointer;font-weight:700;color:var(--ink)}.stage-tabs .on{background:var(--green);color:#fff}
.stage-info{margin-top:.6rem}.it-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;display:grid;gap:.4rem}.it-word{font-size:1.5rem;font-family:var(--display);color:var(--green)}
.it-row{display:flex;gap:.6rem;align-items:center}.it-ex{margin:0;flex:1}
.stage3d.nogl{background:var(--strip)}.fb-grid{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem}.spinner{width:34px;height:34px;border:4px solid #fff;border-top-color:var(--green);border-radius:50%;animation:fnspin .8s linear infinite;position:absolute;inset:0;margin:auto}@keyframes fnspin{to{transform:rotate(360deg)}}
.fnp-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:12px;max-width:min(92vw,520px);z-index:99;transition:opacity .5s}.fnp-toast.out{opacity:0}
@media(prefers-reduced-motion:reduce){.fc-in,.cj-word i,.opt,.bub{animation:none!important;transition:none!important}.cj-word i{opacity:1}}
/* bandeau « premium » sur les cartes */
.fn-prem-badge{display:inline-block;background:linear-gradient(90deg,#b8860b,#f3d36b);color:#3a2a00;font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:99px}
/* ---- arabe (affiché à la demande) ---- */
.ar{display:none;font-family:"Segoe UI","Noto Naskh Arabic","Traditional Arabic",system-ui,sans-serif;direction:rtl;text-align:right;color:#7a2e12;background:#fff4ec;border-right:3px solid var(--orange);border-radius:8px;padding:.35rem .7rem;margin:.4rem 0;font-size:1.05em;line-height:1.7}
.show-ar .ar{display:block}.show-ar span.ar{display:inline-block;margin:0 .6rem}
.show-ar .opt .ar,.show-ar .fc-back .ar{font-size:.95em}.fc-back .ar{background:rgba(255,255,255,.7)}
.ar-lesson p{margin:.3rem 0}
.ar-bar{margin:.6rem 0 1rem}.ar-toggle{border:1.5px solid var(--orange);background:#fff;color:#7a2e12;border-radius:99px;padding:.45rem 1.1rem;font-weight:700;cursor:pointer}.ar-toggle[aria-pressed=true]{background:var(--orange);color:#fff}
.amb-btn{position:absolute;right:10px;bottom:10px;border:0;background:rgba(255,255,255,.92);border-radius:99px;padding:.35rem .8rem;font-weight:700;cursor:pointer;color:var(--ink)}.amb-btn.on{background:var(--green);color:#fff}
/* ---- invitation à la suite ---- */
.next-up{margin:2rem 0 1rem;border:1.5px dashed var(--orange);background:#fff8f2;border-radius:14px;padding:.8rem 1rem}.next-up p{margin:.2rem 0}
.next-up.big{border-style:solid;background:linear-gradient(135deg,#fff8f2,var(--strip));padding:1.4rem 1.4rem 1.2rem;box-shadow:0 18px 40px -26px rgba(36,54,58,.5)}
.next-up h3{font-family:var(--display);font-size:1.5rem;margin:.2rem 0}.up-k{color:var(--green);font-weight:800}.up-sub{color:var(--muted)}
.up-list{list-style:none;padding:0;margin:.8rem 0;display:grid;gap:.4rem}.up-list li{display:flex;gap:.7rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem;filter:saturate(.8)}.up-list li span{font:700 .8rem var(--mono,monospace);color:var(--orange)}.up-list li i{margin-left:auto;font-style:normal}
.up-hl{display:flex;gap:.4rem;flex-wrap:wrap}.up-hl em{font-style:normal;background:var(--strip);padding:.2rem .6rem;border-radius:99px;font-size:.8rem;font-weight:700;color:var(--green)}
.next-up .btn{display:inline-block;margin:.3rem .3rem .3rem 0}.next-up .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.fn-free-banner{margin:0 0 1.5rem;border-radius:16px;background:linear-gradient(120deg,var(--green),var(--teal));color:#fff;padding:1.2rem 1.4rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}.fn-free-banner h3{margin:0;font-family:var(--display);font-size:1.3rem}.fn-free-banner p{margin:.2rem 0 0;opacity:.9}.fn-free-banner a{background:#fff;color:var(--green);font-weight:800;padding:.6rem 1.2rem;border-radius:99px;text-decoration:none}