:root { --bg:#fff7e6; --ink:#2b2350; --c:#7c5cff; --r:22px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink);
  font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif; }
body { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
.screen { max-width: 640px; margin: 0 auto; padding: 16px; display:flex; flex-direction:column; gap:14px; min-height:100vh; }
.title { font-size: 1.7rem; text-align:center; margin: 12px 0 0; }
.sub { text-align:center; margin:0; font-size:1.15rem; opacity:.8; }
.warn { background:#fff0c2; border-radius:14px; padding:10px 14px; margin:0; font-size:.95rem; }

.lang-grid { display:grid; gap:14px; }
.lang-card { background:var(--c); color:#fff; border-radius:var(--r); padding:18px; display:flex; align-items:center; gap:16px;
  box-shadow:0 6px 0 rgba(0,0,0,.18); font-size:1.6rem; font-weight:700; }
.lang-card:active { transform: translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.18); }
.badge { background:#fff; color:var(--c); width:68px; height:68px; border-radius:50%; display:grid; place-items:center; font-size:2rem; font-weight:800; flex:none; }
.lname { flex:1; text-align:start; }
.lang-card[data-lang="fr"] .lname, .lang-card[data-lang="nl"] .lname { text-align:left; }

.soon-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.soon { background:#e9e5f7; border-radius:16px; padding:10px 14px; text-align:center; opacity:.75; display:flex; flex-direction:column; font-size:1rem; }
.soon small { opacity:.7 }
.link { background:none; text-decoration:underline; opacity:.7; align-self:center; margin-top:auto; padding:10px; }

.bar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.back { background:#fff; width:46px; height:46px; border-radius:50%; font-size:1.4rem; box-shadow:0 3px 0 rgba(0,0,0,.15); }
.chip { color:#fff; padding:8px 16px; border-radius:999px; font-weight:700; font-size:1.1rem; }
.lvl { font-weight:700; min-width:46px; text-align:center; }

.cat-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.cat { background:var(--c); color:#fff; border-radius:var(--r); padding:18px 8px; display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow:0 6px 0 rgba(0,0,0,.18); }
.cat:active { transform: translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.18); }
.cat .ico { font-size:3rem; line-height:1.1; } .cat .ctitle { font-size:1.4rem; font-weight:700; }
.stars span, .big-stars span, .lvl span { font-size:1.3rem; letter-spacing:2px; }
.on { color:#ffd23f; text-shadow:0 1px 0 rgba(0,0,0,.25); } .off { color:rgba(0,0,0,.2); }
.cat .off { color:rgba(255,255,255,.4); }

.card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
.word-card { background:#fff; border-radius:var(--r); padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:0 5px 0 rgba(0,0,0,.12); border:3px solid var(--c); }
.word-card .vis { font-size:3.4rem; line-height:1.1; } .word-card .wtxt { font-size:1.25rem; font-weight:600; }
.word-card.letter .vis { font-size:3.2rem; font-weight:800; color:var(--c); }
.pop { animation: pop .35s; }
@keyframes pop { 50% { transform: scale(1.12) } }

.big-btn { background:var(--c); color:#fff; font-size:1.4rem; font-weight:700; padding:16px; border-radius:var(--r);
  box-shadow:0 6px 0 rgba(0,0,0,.2); width:100%; max-width:420px; align-self:center; }
.big-btn.alt { background:#6b6f80; } .big-btn:active { transform: translateY(4px); }

.speaker { background:var(--c); color:#fff; font-size:3rem; width:110px; height:110px; border-radius:50%; align-self:center; box-shadow:0 6px 0 rgba(0,0,0,.2); }
.speaker:active { transform: translateY(4px); }
.opt-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.opt { background:#fff; border-radius:var(--r); aspect-ratio:1; border:3px solid var(--c); box-shadow:0 5px 0 rgba(0,0,0,.12); display:grid; place-items:center; }
.opt .vis { font-size: clamp(2.4rem, 12vw, 4rem); font-weight:800; }
.opt.wrong, .dchip.wrong { animation: shake .4s; opacity:.35; border-color:#c0392b; }
.opt.right, .dchip.right { background:#c9f7d8; border-color:#06a77d; animation: pop .5s; }
@keyframes shake { 25% { transform:translateX(-8px) } 75% { transform:translateX(8px) } }

.dots { display:flex; gap:8px; } .dots i { width:14px; height:14px; border-radius:50%; background:#d8d3ec; }
.dots i.done { background:#ffd23f; } .dots i.cur { background:var(--c); transform:scale(1.25); }

.drop { background:#fff; border:4px dashed var(--c); border-radius:28px; align-self:center; width:min(60vw,240px); aspect-ratio:1; display:grid; place-items:center; transition:.15s; }
.drop .vis { font-size:6rem; font-weight:800; } .drop.hot { background:#efe9ff; transform:scale(1.05); }
.chips { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:12px; }
.dchip { background:var(--c); color:#fff; padding:14px 22px; border-radius:18px; font-size:1.5rem; font-weight:700; touch-action:none; user-select:none; cursor:grab;
  box-shadow:0 5px 0 rgba(0,0,0,.2); position:relative; z-index:1; }
.dchip.drag { z-index:10; cursor:grabbing; box-shadow:0 12px 20px rgba(0,0,0,.25); }

.result { justify-content:center; text-align:center; }
.big-stars span { font-size:4.5rem; display:inline-block; }
.big-stars span.on { animation: pop .6s both; }

.spark { position:fixed; z-index:99; pointer-events:none; font-size:1.6rem; animation: fly .9s ease-out forwards; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) rotate(40deg); opacity:0 } }

.parents .note { background:#fff; border-radius:var(--r); padding:16px; line-height:1.7; }
.parents h2 { margin:0 0 6px; }
@media (min-width: 700px) { .screen { padding: 28px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===== v2: joyeux, images d'abord, jeux, récompenses ===== */
body { background: radial-gradient(circle at 15% 8%, #ffe9a8 0, transparent 40%), radial-gradient(circle at 90% 20%, #d9ecff 0, transparent 40%), radial-gradient(circle at 50% 100%, #ffd9ec 0, transparent 45%), var(--bg); background-attachment: fixed; }
.hero { display:flex; align-items:center; gap:12px; justify-content:center; margin-top:8px; }
.mascot { font-size:5rem; line-height:1; } .bounce { animation: bounce 1.6s infinite; } .dance { animation: dance 1s infinite; }
@keyframes bounce { 50% { transform: translateY(-10px) } } @keyframes dance { 25% { transform: rotate(-10deg) scale(1.05) } 75% { transform: rotate(10deg) scale(1.05) } }
.bubble { background:#fff; border-radius:20px; padding:12px 16px; font-size:1.2rem; font-weight:700; box-shadow:0 4px 0 rgba(0,0,0,.1); position:relative; }
.album-btn { cursor:pointer; background:#ffe0ef; opacity:1; border:0; }
.vis-wrap { background: color-mix(in srgb, var(--c) 16%, #fff); border-radius:50%; width:112px; height:112px; display:grid; place-items:center; }
.word-card .vis { font-size:4.4rem; } .word-card.letter .vis { font-size:3.6rem; }
.word-card .wtxt { font-size:1.05rem; opacity:.85; }
.card-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
.exam-tag { font-size:.85rem; background:rgba(255,255,255,.25); border-radius:999px; padding:2px 10px; }
.act-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; width:100%; }
.act-row .big-btn { font-size:1.1rem; padding:14px 4px; } .big-btn.game { background:#06a77d; } .big-btn.exam { background:#e0558f; }
.read-word { background:#fff; border:3px solid var(--c); border-radius:24px; font-size:2.4rem; font-weight:800; padding:12px 28px; align-self:center; box-shadow:0 5px 0 rgba(0,0,0,.12); }
.read-word small { font-size:1.3rem; }
.dots { flex-wrap:wrap; justify-content:center; gap:5px; } .dots i { width:12px; height:12px; }
.opt .vis { font-size: clamp(3rem, 15vw, 4.8rem); }
.grade { text-align:center; font-size:1.6rem; } .grade b { font-size:5.5rem; color:var(--c, #e0558f); } .grade span { opacity:.6; }
.reward { text-align:center; } .sticker-pop { font-size:6rem; animation: pop .8s infinite alternate; } 
.badge-new { background:#fff3c2; border-radius:999px; padding:8px 16px; font-weight:700; align-self:center; }
.mem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mem { aspect-ratio:3/4; border-radius:18px; background:var(--c); position:relative; box-shadow:0 5px 0 rgba(0,0,0,.18); perspective:600px; padding:0; }
.mem .face { position:absolute; inset:0; display:grid; place-items:center; border-radius:18px; backface-visibility:hidden; transition:transform .35s; font-weight:700; font-size:1.2rem; text-align:center; padding:4px; }
.mem .back { font-size:2.4rem; color:#fff; } .mem .front { background:#fff; border:3px solid var(--c); transform:rotateY(180deg); }
.mem.flip .back { transform:rotateY(180deg); } .mem.flip .front { transform:rotateY(0); }
.mem .front .vis { font-size:3rem; } .mem.done { opacity:.55; }
.sticker-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.st { aspect-ratio:1; border-radius:20px; display:grid; place-items:center; font-size:2.8rem; background:#fff; box-shadow:0 4px 0 rgba(0,0,0,.1); }
.st.off { opacity:.4; filter:grayscale(1); } .sec { margin:8px 0 0; }
.badge-list { display:flex; flex-wrap:wrap; gap:8px; } .bdg { background:#e5e3ef; border-radius:999px; padding:8px 14px; opacity:.5; } .bdg.on { background:#fff3c2; opacity:1; font-weight:700; }
.parents table { width:100%; border-collapse:collapse; } .parents td { padding:6px 4px; border-bottom:1px solid #eee; } .parents td:last-child { text-align:end; font-weight:700; }
.parents .st-s span { font-size:1rem; } .parents .gate input { width:90px; font-size:1.3rem; padding:6px; border-radius:10px; border:2px solid #ccc; }
.parents .fr { font-size:.9rem; opacity:.8; }

/* ===== v3: points, salle VIP, mini-jeux ===== */
.vip { background:linear-gradient(135deg,#e0558f,#ff8a3d); color:#fff; border-radius:var(--r); padding:14px; font-size:1.3rem; font-weight:800; box-shadow:0 6px 0 rgba(0,0,0,.18); }
.vip:active { transform: translateY(4px); }
.toast { position:fixed; top:18px; left:50%; transform:translateX(-50%); background:#2b2350; color:#fff; padding:8px 16px; border-radius:999px; font-weight:700; z-index:200; animation: toast 1.1s both; pointer-events:none; }
.toast.big { background:#e0558f; font-size:1.2rem; animation-duration:2.6s; }
@keyframes toast { 0% { opacity:0; top:0 } 15%,80% { opacity:1; top:18px } 100% { opacity:0; top:6px } }
.game-tile.locked { opacity:.7; }
.chars { display:flex; gap:10px; flex-wrap:wrap; }
.char { background:#fff; border-radius:18px; width:64px; padding:6px 0; box-shadow:0 4px 0 rgba(0,0,0,.1); display:flex; flex-direction:column; align-items:center; border:3px solid transparent; }
.char span { font-size:2.2rem; } .char small { font-size:.75rem; min-height:1em; } .char.off { opacity:.85; filter:grayscale(1); } .char.sel { border-color:#e0558f; }
.arena { position:relative; height:min(60vh,460px); background:linear-gradient(#bfe6ff,#e9f7ff); border-radius:24px; overflow:hidden; border:3px solid #fff; }
.fall { position:absolute; top:-70px; font-size:3.4rem; background:none; padding:0; animation: fall linear forwards; }
@keyframes fall { to { top:105%; } }
.fall.hit { transform:scale(1.6); opacity:0; transition:.2s; } .fall.wrong-fall { opacity:.2; }
.board { display:grid; grid-template-columns:1fr 1fr; align-self:center; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 5px 0 rgba(0,0,0,.15); }
.piece { position:relative; overflow:hidden; padding:0; background:#fff7e0; border:2px solid #fff; width:var(--piece); height:var(--piece); }
.piece.sel { outline:4px solid #e0558f; outline-offset:-4px; z-index:1; }
.pimg { position:absolute; width:240px; height:240px; display:grid; place-items:center; font-size:180px; line-height:1; }
.msg { text-align:center; min-height:70px; }
.track { display:flex; flex-direction:column; gap:8px; } .lane { position:relative; height:56px; background:#fff; border-radius:14px; border-bottom:4px solid #e0d7f7; }
.runner { position:absolute; top:4px; font-size:2.6rem; transition:inset-inline-start .4s; } .flag { position:absolute; inset-inline-end:8px; top:8px; font-size:2rem; }
.vip-screen .sec { margin-top:6px; }

/* ===== v4: niveaux ===== */
.tabs { display:flex; gap:8px; }
.tab { flex:1; background:#fff; border-radius:999px; padding:10px; font-size:1.1rem; font-weight:700; box-shadow:0 3px 0 rgba(0,0,0,.12); border:3px solid transparent; }
.tab.on { background:var(--c); color:#fff; }
.celebrate { text-align:center; background:#fff3c2; border-radius:var(--r); padding:14px; display:flex; flex-direction:column; gap:10px; align-items:center; animation: pop .8s 2; }
.celebrate .big { font-size:3rem; } .celebrate b { font-size:1.5rem; }
.opt-grid.two { grid-template-columns:1fr 1fr; }

/* ===== v5: marque ===== */
.brand { margin:6px 0 0; text-align:center; font-size:2.6rem; font-weight:900; letter-spacing:1px; color:#7c5cff; direction:ltr; text-shadow:0 3px 0 rgba(0,0,0,.12); }
.brand span { color:#ff8a3d; }

/* ===== v6: rangs, sauvegarde, impression ===== */
.rank { display:flex; align-items:center; gap:10px; background:#fff; border-radius:var(--r); padding:8px 14px; box-shadow:0 3px 0 rgba(0,0,0,.1); }
.rk-ico { font-size:2.4rem; } .rk-body { flex:1; } .rk-body b { display:block; }
.pbar { height:12px; background:#e6e2f5; border-radius:999px; overflow:hidden; } .pbar i { display:block; height:100%; background:linear-gradient(90deg,#ffd23f,#ff8a3d); border-radius:999px; transition:width .6s; }
.lvprog { display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:.95rem; }
.levelup { position:fixed; inset:0; z-index:150; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(43,35,80,.82); color:#fff; pointer-events:none; animation: fadein .4s; text-align:center; }
.levelup.out { opacity:0; transition:opacity .5s; }
.lu-ico { font-size:7rem; animation: pop .7s infinite alternate; } .lu-txt { font-size:2rem; font-weight:900; } .lu-sub { font-size:1.3rem; }
@keyframes fadein { from { opacity:0 } }
textarea { width:100%; border-radius:12px; border:2px solid #ccc; padding:8px; font-size:.9rem; margin:8px 0; }
.filebtn { display:block; text-align:center; cursor:pointer; margin-top:8px; } .parents .note .big-btn { margin:6px 0; }
.pr-ctl { display:flex; flex-direction:column; gap:10px; margin:12px 0; } .pr-ctl label { display:flex; flex-direction:column; gap:4px; font-weight:700; }
.pr-ctl select, .pr-ctl input { font-size:1.05rem; padding:10px; border-radius:12px; border:2px solid #ccc; background:#fff; } .pr-langs { display:flex; gap:8px; }
.sheets { display:flex; flex-direction:column; gap:16px; }
.sheet { background:#fff; color:#000; width:100%; max-width:794px; margin:0 auto; padding:18px; border-radius:6px; box-shadow:0 3px 10px rgba(0,0,0,.15); }
.sh-head { border-bottom:3px solid #000; padding-bottom:6px; margin-bottom:12px; } .sh-head > div:first-child { display:flex; gap:10px; align-items:center; font-size:1rem; }
.sh-brand { font-size:1.3rem; direction:ltr; } .sh-brand.big { font-size:2.6rem; } .sh-title { font-weight:800; font-size:1.25rem; margin:4px 0; } .sh-name { font-size:.95rem; }
.sh-lang { border:2px solid #000; border-radius:8px; padding:0 8px; font-weight:800; }
.sh-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sh-cell { border:2px dashed #555; border-radius:12px; text-align:center; padding:8px; }
.pale { font-size:5.2rem; line-height:1.15; filter:grayscale(1) opacity(.22); } .sh-word { font-size:1.4rem; font-weight:800; }
.m-row { display:flex; align-items:center; gap:6px; margin:8px 0; } .m-img { font-size:3.2rem; width:90px; text-align:center; filter:grayscale(1); }
.m-gap { flex:1; } .dot { width:14px; height:14px; border-radius:50%; border:3px solid #000; } .m-word { width:170px; font-size:1.35rem; font-weight:800; text-align:center; border:2px solid #000; border-radius:10px; padding:8px 4px; }
.w-row, .t-row { display:flex; align-items:center; gap:12px; border-bottom:1px dashed #777; padding:8px 0; min-height:84px; } .w-img { font-size:2.8rem; width:70px; text-align:center; filter:grayscale(1); }
.w-word { width:150px; font-size:1.4rem; font-weight:800; } .w-lines { flex:1; } .w-lines i { display:block; border-bottom:2px solid #000; height:36px; }
.t-trace { display:flex; flex-wrap:wrap; gap:14px; flex:1; } .trace { font-size:2.6rem; font-weight:800; color:#fff; -webkit-text-stroke:1.4px #000; letter-spacing:2px; }
.sh-foot { margin-top:14px; text-align:center; font-size:.8rem; border-top:1px solid #999; padding-top:6px; }
.cert-frame { border:6px double #000; border-radius:14px; padding:22px 14px; text-align:center; min-height:520px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.cert-mascot { font-size:4.5rem; filter:grayscale(1); } .cert h2 { font-size:2.2rem; margin:0; } .cert-name { font-size:1.8rem; font-weight:800; border-bottom:2px solid #000; margin:14px 30px; min-height:2.2rem; }
.cert-stars { font-size:2.6rem; letter-spacing:6px; } .cert-sign { display:flex; justify-content:space-between; margin-top:28px; padding:0 14px; }

@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background:#fff !important; }
  .no-print, .toast, .levelup, .spark { display:none !important; }
  .screen { padding:0 !important; max-width:none !important; min-height:0 !important; gap:0 !important; }
  .sheets { gap:0; }
  .sheet { box-shadow:none; border-radius:0; padding:0; max-width:none; break-after:page; page-break-after:always; min-height:265mm; }
  .sheet:last-child { break-after:auto; page-break-after:auto; }
  .sheet * { color:#000; }
  .trace { color:#fff !important; -webkit-text-stroke:1.4px #000; }
  .pale { filter:grayscale(1) opacity(.28); }
}

/* ===== v7: arabe + traduction française ===== */
.bi { display:inline-flex; flex-direction:column; align-items:center; text-align:center; gap:1px; line-height:1.25; vertical-align:middle; }
.bi .fr { font-size:.66em; font-weight:500; opacity:.92; direction:ltr; unicode-bidi:isolate; letter-spacing:0; }
.bi .ar { unicode-bidi:isolate; }
.nofr .bi .fr { display:none; }
.sub .bi, .bubble .bi { align-items:center; } .sub .bi .fr { font-size:.8em; }
.big-btn .bi, .chip .bi, .tab .bi, .vip .bi { width:100%; } .chip .bi { width:auto; }
.cat .ctitle { display:block; } .exam-tag .bi { flex-direction:row; gap:6px; } .exam-tag .bi .fr { font-size:.9em; }
.soon .bi .fr { font-size:.7em; } .lvprog .bi { align-items:flex-start; } .lvprog .bi .fr { font-size:.8em; }
.toast .bi .fr, .levelup .bi .fr { font-size:.7em; } .lu-txt .bi, .lu-sub .bi { align-items:center; }
.frtoggle { position:fixed; bottom:10px; left:10px; z-index:90; background:#2b2350; color:#fff; border-radius:999px; padding:6px 12px; font-weight:800; font-size:.8rem; opacity:.85; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.frtoggle.off { background:#aaa; text-decoration:line-through; }
@media print { .frtoggle { display:none !important; } .bi .fr { font-size:.7em; } }
#app { padding-bottom: 52px; }
.gloss { font-size:.55em; font-weight:500; opacity:.9; }
.nofr .gloss { display:none; }
.parents .bi { align-items:flex-start; text-align:start; }
.parents .big-btn .bi, .parents .link .bi { align-items:center; }
.sh-name .bi, .cert .bi { align-items:center; }
.exam-tag .bi { flex-direction:column !important; gap:0 !important; } .exam-tag .bi .fr { font-size:.8em !important; }