/* =========================================================================
 * app.css — Design « tablet-first », ludique et coloré
 * Cibles tactiles >= 56 px, aucune sélection de texte côté enfant,
 * pas de zoom au double-tap (touch-action: manipulation),
 * canvas d'écriture en touch-action: none.
 * ========================================================================= */
:root {
  --bg: #fff7e6;
  --bg2: #ffe9f1;
  --card: #ffffff;
  --ink: #2a2350;
  --muted: #7b7699;
  --line: #ece6f7;
  --primary: #8b5cf6;
  --primary-d: #6d3fe0;
  --pink: #ff5c8a;
  --blue: #00b4d8;
  --yellow: #ffb703;
  --green: #3ec300;
  --orange: #ff7b00;
  --danger: #ef4444;
  --ok: #22c55e;
  --radius: 22px;
  --shadow: 0 6px 0 rgba(42, 35, 80, .08), 0 12px 28px rgba(42, 35, 80, .08);
  --font: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 183, 3, .18) 0 140px, transparent 141px),
    radial-gradient(circle at 92% 18%, rgba(0, 180, 216, .14) 0 180px, transparent 181px),
    radial-gradient(circle at 85% 95%, rgba(255, 92, 138, .14) 0 200px, transparent 201px),
    linear-gradient(160deg, var(--bg), var(--bg2));
  background-attachment: fixed;
  overscroll-behavior: none;          /* pas de « pull to refresh » */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;          /* supprime le délai / zoom du double-tap */
  font-size: 18px;
}
button, a, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--primary-d); }
h1, h2, h3 { margin: 0 0 .6em; line-height: 1.15; }
code { background: #f3effd; padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

#app { min-height: 100%; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left)); max-width: 1280px; margin: 0 auto; }
/* Côté enfant : on évite la sélection de texte et le menu d'appui long */
.view-home, .view-pin, .view-kid, .view-do, .view-shop { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------------- Boutons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 rgba(42, 35, 80, .12); transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(42, 35, 80, .12); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-d); }
.btn-danger { background: #fff0f0; color: var(--danger); }
.btn-ghost { background: rgba(255, 255, 255, .7); }
.btn-small { min-height: 40px; padding: 0 14px; font-size: .88em; }
.btn-lg { min-height: 62px; font-size: 1.15em; padding: 0 30px; }
.btn-xl { min-height: 76px; font-size: 1.4em; padding: 0 40px; }
.btn-round { width: 56px; padding: 0; }
.btn-listen { background: var(--yellow); color: #4a3000; box-shadow: 0 4px 0 #d99a00; font-size: 1.15em; }
.btn-listen.btn-small { min-height: 46px; width: 56px; padding: 0; font-size: 1.2em; }

/* ---------------- Accueil ---------------- */
.home-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 4px; }
.logo { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; margin: 0; color: var(--primary); text-shadow: 0 4px 0 rgba(139, 92, 246, .18); }
.logo span { color: var(--pink); }
.home-sub { font-size: 1.5rem; text-align: center; margin: 24px 0; }
.profiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.profile-card {
  --c: var(--primary);
  width: min(260px, 42vw); aspect-ratio: 3 / 4; border-radius: 32px; background: #fff; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 6px solid var(--c); box-shadow: 0 10px 0 var(--c), var(--shadow); transition: transform .12s;
}
.profile-card:active { transform: translateY(6px) scale(.98); box-shadow: 0 4px 0 var(--c); }
.profile-avatar { font-size: 3rem; width: 1.6em; height: 1.6em; display: inline-grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--primary)) 18%, white); }
.profile-card .profile-avatar { font-size: 5rem; }
.profile-avatar.big { font-size: 4.5rem; }
.profile-name { font-size: 2rem; font-weight: 700; }
.profile-points { font-size: 1.2rem; background: #fff6d6; padding: 4px 14px; border-radius: 999px; }
.empty-big { text-align: center; background: #fff; padding: 40px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------------- PIN ---------------- */
.pin-screen { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; padding-top: 10px; }
.btn-back { position: absolute; left: 0; top: 0; }
.pin-who { text-align: center; }
.pin-who h2 { font-size: 2rem; margin: 10px 0 0; }
.pin-who p { margin: 6px 0 0; font-size: 1.2rem; color: var(--muted); }
.pinpad { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pin-dots { display: flex; gap: 22px; }
.pin-dots span { width: 30px; height: 30px; border-radius: 50%; border: 4px solid var(--c, var(--primary)); transition: background .15s, transform .15s; }
.pin-dots span.on { background: var(--c, var(--primary)); transform: scale(1.1); }
.pin-keys { display: grid; grid-template-columns: repeat(3, 96px); gap: 16px; }
.pin-key {
  height: 96px; border-radius: 28px; border: 0; background: #fff; font-size: 2.4rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 0 rgba(42, 35, 80, .14); transition: transform .06s;
}
.pin-key:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(42, 35, 80, .14); background: color-mix(in srgb, var(--c, var(--primary)) 20%, white); }
.pin-key-alt { background: #f3effd; font-size: 1.8rem; }
.pinpad.locked { opacity: .4; pointer-events: none; }
.pin-msg { min-height: 1.5em; font-size: 1.2rem; color: var(--danger); font-weight: 600; }

/* ---------------- Tableau de bord enfant ---------------- */
.kid-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--c); color: #fff; padding: 14px 18px; border-radius: 28px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.kid-head h1 { margin: 0; font-size: 2rem; }
.kid-id { display: flex; align-items: center; gap: 12px; }
.kid-id .profile-avatar { background: rgba(255, 255, 255, .3); }
.kid-points { display: flex; align-items: baseline; gap: 6px; background: #fff; color: var(--ink); padding: 8px 20px; border-radius: 999px; }
.kid-points b { font-size: 2rem; }
.kid-points .coin { font-size: 1.6rem; }
.kid-top { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 8px; }
.progress-card, .shop-card { background: #fff; border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); }
.progress-card p { margin: 0 0 10px; font-size: 1.2rem; }
.progress { height: 22px; background: #f0ebfb; border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--green), var(--yellow)); border-radius: 999px; transition: width .6s; }
.progress-msg { margin-top: 10px !important; color: var(--muted); }
.shop-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); font-size: 1.15rem; }
.shop-card.open { background: linear-gradient(135deg, #fff3c4, #ffd6e5); animation: wiggle 2.5s infinite; }
.shop-icon { font-size: 3rem; }
.section-title { font-size: 1.6rem; margin: 22px 4px 12px; }
.hw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.hw-card {
  display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--radius); background: #fff; text-decoration: none; color: var(--ink);
  border-left: 12px solid var(--c); box-shadow: var(--shadow); min-height: 110px; transition: transform .1s;
}
.hw-card:active { transform: scale(.98); }
.hw-card.done { opacity: .75; }
.hw-icon { font-size: 2.6rem; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, var(--c) 18%, white); flex: none; }
.hw-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hw-subject { color: var(--c); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.hw-title { font-size: 1.35rem; font-weight: 600; }
.hw-meta { color: var(--muted); font-size: .95rem; }
.hw-status { font-size: 2rem; display: flex; flex-direction: column; align-items: center; color: var(--c); }
.hw-status small { font-size: .75rem; color: var(--muted); }
.empty { color: var(--muted); font-size: 1.2rem; }

/* ---------------- Boutique ---------------- */
.shop-intro { font-size: 1.25rem; text-align: center; }
.rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.reward { background: #fff; border-radius: 28px; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; box-shadow: var(--shadow); font-size: 1.2rem; }
.reward-icon { font-size: 4rem; }
.reward-cost { font-size: 1.5rem; font-weight: 700; background: #fff6d6; padding: 4px 16px; border-radius: 999px; }
.reward.locked { filter: grayscale(.6); opacity: .8; }
.shop-closed { text-align: center; background: #fff; border-radius: 32px; padding: 40px 20px; box-shadow: var(--shadow); font-size: 1.25rem; }
.big-lock { font-size: 6rem; animation: wiggle 3s infinite; }
.req-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.req-list li { display: flex; justify-content: space-between; background: #fff; padding: 14px 18px; border-radius: 16px; font-size: 1.1rem; }

/* ---------------- Exercices : coquille ---------------- */
.ex-shell { display: flex; flex-direction: column; gap: 12px; min-height: calc(100vh - 48px); }
.ex-head { display: flex; align-items: center; gap: 14px; }
.ex-title { flex: 1; display: flex; flex-direction: column; }
.ex-title small { color: var(--c); font-weight: 700; text-transform: uppercase; font-size: .85rem; }
.ex-title b { font-size: 1.4rem; }
.ex-coins { background: #fff; padding: 10px 20px; border-radius: 999px; font-size: 1.4rem; box-shadow: var(--shadow); }
.ex-coins.bump { animation: bump .5s; }
.ex-progress { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.wdots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wdot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--muted); font-weight: 700; box-shadow: 0 3px 0 rgba(0, 0, 0, .06); }
.wdot.cur { background: var(--c); color: #fff; transform: scale(1.15); }
.wdot.done { background: var(--ok); color: #fff; }
.spills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.spill { padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .6); color: var(--muted); font-weight: 600; }
.spill.cur { background: var(--c); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.spill.done { background: #dcfce7; color: #166534; }
.stage { flex: 1; display: flex; flex-direction: column; position: relative; }
.st-msg { text-align: center; font-size: 1.3rem; min-height: 1.6em; margin: 8px 0; font-weight: 600; }
.st-instr { text-align: center; font-size: 1.3rem; margin: 4px 0 10px; }
.st-next { display: flex; justify-content: center; margin-top: 12px; }

/* ---------------- Dictée : étape clavier ---------------- */
.st-keyboard { display: flex; flex-direction: column; gap: 12px; }
.kb-top { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.capital { display: flex; align-items: center; gap: 6px; background: #fff; padding: 8px 18px; border-radius: 999px; box-shadow: var(--shadow); }
.capital small { color: var(--muted); }
.capital b { font-size: 2rem; color: var(--orange); }
.lives { font-size: 1.6rem; letter-spacing: 2px; }
.lives .lost { filter: grayscale(1); opacity: .25; }
.context { text-align: center; font-size: 1.3rem; margin: 0; color: var(--muted); }
.context .blank { color: var(--primary); font-weight: 700; letter-spacing: 2px; }
.context.warn { color: var(--orange); }
.slots { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.slot {
  width: clamp(48px, 7vw, 72px); height: clamp(64px, 9vw, 92px); border-radius: 18px; background: #fff; display: grid; place-items: center;
  font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; border-bottom: 6px solid #e2dcf2; font-family: 'Andika', var(--font);
}
.slot.cur { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); animation: pulse 1.2s infinite; }
.slot.ok { color: var(--green); border-color: var(--green); animation: pop .3s; }
.slot.given { background: transparent; border-color: transparent; }
.slot.revealed { color: var(--orange); border-color: var(--orange); }

/* Clavier virtuel */
.kb { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.kb-row { display: flex; gap: 7px; justify-content: center; flex-wrap: nowrap; }
.kb-key {
  min-width: clamp(44px, 8.4vw, 76px); height: clamp(56px, 8vw, 76px); border: 0; border-radius: 16px; background: #fff;
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; cursor: pointer; box-shadow: 0 5px 0 rgba(42, 35, 80, .14);
  font-family: 'Andika', var(--font); transition: transform .05s;
}
.kb-key:active, .kb-key.pressed { transform: translateY(4px); box-shadow: 0 1px 0 rgba(42, 35, 80, .14); }
.kb-accent { background: #f3effd; min-width: clamp(40px, 6.6vw, 64px); }
.kb-small { height: clamp(46px, 6.5vw, 60px); font-size: 1.3rem; background: #eefaff; }
.kb-alt { background: #ffe9ef; color: var(--danger); }
.kb-ok { background: var(--green); color: #fff; box-shadow: 0 5px 0 #2a8a00; }
.kb-wide { min-width: 180px; font-size: 1.2rem; }
.kb-space { min-width: 260px; font-size: 1rem; color: var(--muted); }
.kb-key.flash-ok { animation: flashOk .45s; }
.kb-key.flash-ko { animation: flashKo .45s; }
.kb-disabled { opacity: .5; pointer-events: none; }
.kb-digits .kb-grid { display: grid; grid-template-columns: repeat(3, clamp(80px, 13vw, 110px)); gap: 12px; }
.kb-digits .kb-key { width: 100%; height: clamp(72px, 10vw, 96px); font-size: 2.2rem; }

/* ---------------- Dictée : écriture au stylet ---------------- */
.st-write { display: flex; flex-direction: column; flex: 1; }
.model { display: flex; align-items: center; justify-content: center; gap: 16px; background: #fff; border-radius: var(--radius); padding: 8px 20px; box-shadow: var(--shadow); }
.model-word { font-size: clamp(2.6rem, 7vw, 4.5rem); color: var(--primary-d); line-height: 1.5; }
.font-cursive { font-family: 'Playwrite FR Moderne', 'Segoe Script', cursive; }
.font-print { font-family: 'Andika', 'Comic Sans MS', sans-serif; }
.pad-host { flex: 1; min-height: 300px; height: 44vh; position: relative; }
.drawpad {
  position: absolute; inset: 0; background: #fff; border-radius: 28px; box-shadow: var(--shadow);
  border: 4px dashed color-mix(in srgb, var(--c) 45%, white); overflow: hidden;
}
.drawpad canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dp-ink { touch-action: none; cursor: crosshair; }   /* indispensable pour le stylet */
.dp-pen-badge { position: absolute; top: 10px; right: 14px; background: var(--primary); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: .9rem; }
.pad-actions { display: flex; justify-content: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.celebrate { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .55); z-index: 5; animation: fadeIn .2s; }
.celebrate div { background: #fff; padding: 26px 40px; border-radius: 32px; font-size: 2rem; font-weight: 700; box-shadow: var(--shadow); animation: pop .4s; text-align: center; }

/* ---------------- Quiz / leçon ---------------- */
.st-quiz { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.q-text { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; text-align: center; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; background: #fff; padding: 18px 30px; border-radius: 28px; box-shadow: var(--shadow); }
.q-answer { min-width: 240px; min-height: 84px; padding: 0 24px; background: #fff; border-radius: 22px; border: 4px solid var(--c); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 700; font-family: 'Andika', var(--font); }
.q-answer.ok { border-color: var(--green); color: var(--green); animation: pop .3s; }
.caret { display: inline-block; width: 3px; height: 1em; background: var(--c); margin-left: 3px; animation: blink 1s infinite; }
.st-lesson { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lesson-text { background: #fff; padding: 26px 32px; border-radius: 28px; box-shadow: var(--shadow); font-size: 1.6rem; line-height: 1.6; font-family: 'Andika', var(--font); max-width: 900px; user-select: text; }
.read-stars { display: flex; gap: 20px; }
.read-star { width: 90px; height: 90px; border-radius: 50%; border: 0; background: #fff; font-size: 3rem; box-shadow: var(--shadow); cursor: pointer; color: var(--yellow); }
.read-star.on { background: #fff6d6; animation: pop .3s; }

/* ---------------- Fin ---------------- */
.end-screen { text-align: center; background: #fff; border-radius: 36px; padding: 40px 20px; box-shadow: var(--shadow); margin: auto; max-width: 640px; width: 100%; }
.trophy { font-size: 7rem; animation: bounce 1s infinite alternate; }
.end-screen h2 { font-size: 2.6rem; }
.end-points { font-size: 1.6rem; }

/* =========================================================================
 * ESPACE PARENT
 * ========================================================================= */
.login-screen { min-height: 80vh; display: grid; place-items: center; position: relative; }
.login-card { background: #fff; padding: 36px; border-radius: 32px; box-shadow: var(--shadow); width: min(440px, 100%); display: flex; flex-direction: column; gap: 14px; text-align: center; }
.login-icon { font-size: 3.5rem; }
input, select, textarea {
  width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--line); border-radius: 14px; background: #fcfbff; outline: none;
}
textarea { resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); background: #fff; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--primary); }
.check { display: flex; align-items: center; gap: 10px; text-align: left; font-size: .95rem; }
.form-error { color: var(--danger); min-height: 1.2em; margin: 0; }

.parent { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: start; }
.p-nav { position: sticky; top: 16px; background: #fff; border-radius: 26px; padding: 16px 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.p-brand { font-weight: 700; font-size: 1.4rem; color: var(--primary); padding: 4px 12px 14px; }
.p-brand span { color: var(--pink); }
.p-brand small { display: block; font-size: .8rem; color: var(--muted); font-weight: 500; }
.p-nav a, .p-lock { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--ink); font-weight: 500; min-height: 50px; position: relative; }
.p-nav a.active { background: #f3effd; color: var(--primary-d); font-weight: 700; }
.p-lock { border: 0; background: #fff0f0; color: var(--danger); margin-top: 10px; cursor: pointer; }
.badge { margin-left: auto; background: var(--pink); color: #fff; border-radius: 999px; font-size: .78rem; padding: 2px 8px; font-weight: 700; }
.p-main { min-width: 0; }
.p-main > h1 { font-size: 2rem; }
.card { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card.highlight { border: 3px solid var(--yellow); background: #fffbea; }
.card h2 { font-size: 1.35rem; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.form label.check { flex-direction: row; }
fieldset { border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; margin: 0; }
legend { padding: 0 6px; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.info { background: #eefaff; padding: 10px 14px; border-radius: 12px; margin: 0; }
.generator { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #f8f5ff; padding: 10px 14px; border-radius: 14px; }
.generator input, .generator select { width: auto; min-height: 42px; }
.generator input[type="number"] { width: 80px; }
.chips, .filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters { margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #f3effd; text-decoration: none; color: var(--ink); cursor: pointer; min-height: 44px; }
.chip.active { background: var(--primary); color: #fff; }
.form .chip { flex-direction: row; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.table.compact td { padding: 6px 10px; }
.table input { min-height: 42px; }
.in-icon { width: 64px; text-align: center; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #f1f1f5; font-size: .8rem; font-weight: 600; vertical-align: middle; }
.tag-ok { background: #dcfce7; color: #166534; }
.tag-warn { background: #ffedd5; color: #9a3412; }
.tag-info { background: #e0f2fe; color: #075985; }

.kid-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 18px; }
.kid-stat { border-top: 8px solid var(--c); margin: 0; }
.kid-stat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kid-stat-head h2 { margin: 0; flex: 1; }
.pts { font-weight: 700; font-size: 1.2rem; }
.stat-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; }

.report-rows { display: flex; flex-direction: column; gap: 8px; }
.report-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: #faf8ff; text-decoration: none; color: var(--ink); flex-wrap: wrap; }
.report-row.unread { background: #fff6d6; box-shadow: inset 5px 0 0 var(--yellow); }
.rr-icon { font-size: 1.8rem; }
.rr-icon.big { font-size: 3rem; }
.rr-main { flex: 1; display: flex; flex-direction: column; min-width: 180px; }
.rr-main small { color: var(--muted); }
.rr-kpis { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: .95rem; }
.report-head { display: flex; align-items: center; gap: 16px; margin: 14px 0; }
.report-head h1 { margin: 0; }
.report-head p { margin: 4px 0 0; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); }
.kpi small { color: var(--muted); display: block; }
.kpi b { font-size: 1.5rem; }
.axes { display: grid; gap: 12px; }
.axis { border-radius: 16px; padding: 14px 16px; background: #f8f5ff; border-left: 6px solid var(--blue); }
.axis.prio-haute { border-color: var(--danger); background: #fff5f5; }
.axis.prio-moyenne { border-color: var(--orange); background: #fff8f0; }
.axis-head { display: flex; align-items: center; gap: 10px; }
.axis-head .tag { margin-left: auto; }
.axis-icon { font-size: 1.4rem; }
.axis p { margin: 6px 0 0; }
.axis-tip { color: #4b4470; font-style: italic; }
.word-errors { display: inline-flex; gap: 2px; font-family: 'Andika', var(--font); font-size: 1.4rem; }
.lt { padding: 0 2px; }
.lt.bad { background: #ffe1e1; color: var(--danger); border-radius: 6px; font-weight: 700; position: relative; }
.lt.bad sub { font-size: .55em; color: #9a3412; margin-left: 1px; }
.ok-letter { color: var(--ok); font-size: 1.3rem; }
.ko-letter { color: var(--danger); font-size: 1.1rem; font-weight: 700; }
.thumb { width: 180px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); margin-top: 6px; }
.json { max-height: 420px; overflow: auto; background: #1e1b3a; color: #d7d2ff; padding: 16px; border-radius: 14px; font-size: .8rem; }
details summary { cursor: pointer; font-weight: 600; }
.dictee-item { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.word-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.wchip { background: #f3effd; padding: 4px 12px; border-radius: 999px; font-family: 'Andika', var(--font); }
.red-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.inline-form { display: grid; grid-template-columns: 1.2fr .7fr 1.5fr auto; gap: 10px; }
.log { list-style: none; padding: 0; margin: 0; }
.log li { display: grid; grid-template-columns: 1fr auto 150px; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; }
.log small { color: var(--muted); text-align: right; }
.pos { color: var(--ok); }
.neg { color: var(--danger); }
.kid-admin { display: grid; gap: 12px; margin-bottom: 18px; }
.kid-admin-card { display: flex; align-items: center; gap: 16px; margin: 0; border-left: 8px solid var(--c); flex-wrap: wrap; }
.kid-admin-card > div:nth-child(2) { flex: 1; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-item input { position: absolute; opacity: 0; }
.pick-item span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font-size: 1.8rem; background: #f8f5ff; border: 3px solid transparent; cursor: pointer; }
.pick-item input:checked + span { border-color: var(--primary); background: #efe8ff; }
.swatch { border-radius: 50% !important; }
.form .pick-item { flex-direction: row; }

/* ---------------- Interrupteur boutique ---------------- */
.shop-switch-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.shop-switch-row b { display: block; font-size: 1.2rem; }
.switch {
  position: relative; flex: none; width: 96px; height: 52px; border-radius: 999px; border: 0; cursor: pointer;
  background: #d9d4e6; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .15); transition: background .25s;
}
.switch .knob {
  position: absolute; top: 5px; left: 5px; width: 42px; height: 42px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.3, 1.5, .6, 1);
}
.switch.on { background: var(--green); }
.switch.on .knob { transform: translateX(44px); }

/* ---------------- Points : sanctions & ledger ---------------- */
.points-forms { align-items: start; }
.points-forms .card { margin-bottom: 0; }
.points-forms { margin-bottom: 18px; }
.penalty-card { border-top: 8px solid var(--danger); }
.penalty-card .chip { border: 0; font-size: .85rem; min-height: 38px; }
.btn-danger-solid { background: var(--danger); color: #fff; box-shadow: 0 4px 0 #b91c1c; }
.tag-danger { background: #fee2e2; color: #991b1b; }
.row-penalty td { background: #fff7f7; }
.ledger-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.filter-sep { width: 1px; background: var(--line); margin: 0 4px; }
.small { font-size: .85rem; margin: 0; }


/* ---------------- Modales & toasts ---------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(30, 20, 60, .45); display: grid; place-items: center; z-index: 100; padding: 16px; animation: fadeIn .15s; }
.modal { background: #fff; border-radius: 28px; padding: 26px; width: min(480px, 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); animation: pop .25s; }
.modal-body { font-size: 1.15rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.modal-input { font-size: 1.6rem; text-align: center; letter-spacing: .4em; }
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; width: min(520px, calc(100% - 32px)); }
.toast { background: var(--ink); color: #fff; padding: 14px 20px; border-radius: 16px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: slideUp .25s; transition: opacity .4s, transform .4s; }
.toast-success { background: #15803d; }
.toast-error { background: #b91c1c; }
.toast.out { opacity: 0; transform: translateY(10px); }
.confetti-host { position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden; }
.confetti-host i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall linear forwards; }

/* ---------------- Animations ---------------- */
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.shake { animation: shake .4s; }
.slot.shake { border-color: var(--danger); background: #ffe9e9; }
.q-answer.shake { border-color: var(--danger); }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c) 15%, transparent); } }
@keyframes bump { 40% { transform: scale(1.25); } }
@keyframes wiggle { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-4deg); } 97% { transform: rotate(4deg); } }
@keyframes bounce { to { transform: translateY(-14px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } }
@keyframes flashOk { 0% { background: var(--green); color: #fff; } }
@keyframes flashKo { 0% { background: var(--danger); color: #fff; } 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ---------------- Responsive ---------------- */
/* Tablette portrait */
@media (max-width: 900px) {
  .parent { grid-template-columns: 1fr; }
  .p-nav { position: static; flex-direction: row; overflow-x: auto; padding: 8px; }
  .p-brand { display: none; }
  .p-nav a, .p-lock { flex: none; margin: 0; }
  .p-nav-label { display: none; }
  .p-nav a.active .p-nav-label { display: inline; }
  .kid-top { grid-template-columns: 1fr; }
}
/* Téléphone (secours) */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid2, .grid3, .inline-form { grid-template-columns: 1fr; }
  .pin-keys { grid-template-columns: repeat(3, 78px); }
  .pin-key { height: 78px; }
  .kb-row { gap: 4px; }
  .kb-key { min-width: 30px; flex: 1; height: 50px; font-size: 1.2rem; border-radius: 10px; }
  .kb-wide, .kb-space { min-width: 120px; }
  .log li { grid-template-columns: 1fr auto; }
  .log small { display: none; }
}

/* =========================================================================
 * POP-UPS DE POINTS EN TEMPS RÉEL (rouge = perte, vert = gain)
 * Overlay au-dessus de TOUT (dictée, canvas stylet, modales…)
 * ========================================================================= */
.modal-backdrop.points-backdrop { z-index: 2147483000; backdrop-filter: blur(3px); }
.points-backdrop.loss { background: rgba(120, 0, 20, .55); }
.points-backdrop.gain { background: rgba(0, 90, 40, .45); }
.points-backdrop.closing { opacity: 0; transition: opacity .22s; }
.modal.points-modal {
  position: relative; overflow: hidden; text-align: center; color: #fff; width: min(540px, 100%); padding: 26px 24px;
  border: 6px solid #fff; border-radius: 36px;
  animation: pmIn .5s cubic-bezier(.3, 1.6, .5, 1), pmGlow 1.6s ease-in-out .5s infinite;
}
.modal.points-modal.loss { background: linear-gradient(160deg, #ff4d4d, #c81e3a); --glow: rgba(255, 77, 77, .35); --deep: #c81e3a; }
.modal.points-modal.gain { background: linear-gradient(160deg, #34d058, #12924a); --glow: rgba(52, 208, 88, .4); --deep: #12924a; }
.points-modal h2 { font-size: 2rem; margin-bottom: .2em; }
.points-modal p { font-size: 1.2rem; margin: .3em 0; }
.pm-icon { font-size: 4.5rem; animation: wiggle 1.2s infinite; }
.points-modal.gain .pm-icon { animation: bounce .6s infinite alternate; }
.pm-reasons { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; max-height: 30vh; overflow: auto; }
.pm-reasons li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .18); border-radius: 16px; padding: 12px 16px; font-size: 1.25rem;
}
.pr-motif { font-weight: 600; text-align: left; }
.pm-reasons b { background: #fff; color: var(--deep); border-radius: 999px; padding: 2px 12px; flex: none; }
.pm-counter {
  position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 10px 0 6px;
  background: #fff; color: var(--deep); border-radius: 999px; padding: 10px 34px; box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
}
.pm-counter .coin { font-size: 2.4rem; }
.pm-counter b { font-size: 3.6rem; line-height: 1; min-width: 2.2ch; font-variant-numeric: tabular-nums; }
.pm-delta {
  position: absolute; right: -18px; top: -16px; background: #ffd400; color: #5a2a00; font-weight: 700;
  border-radius: 999px; padding: 2px 10px; font-size: 1.1rem; transform: rotate(8deg);
}
.pm-counter.tick { animation: pmTick .18s; }
.points-modal.loss .pm-counter.done { animation: shake .45s; }
.points-modal.gain .pm-counter.done { animation: pop .45s; }
.coin-rain { position: absolute; inset: 0; pointer-events: none; }
.coin-rain span { position: absolute; top: 52%; font-size: 1.6rem; animation: coinDrop linear forwards; }
.coin-rain.gain span { top: 62%; animation-name: coinRise; }
.pm-hint { min-height: 1.5em; font-weight: 600; }
.pm-ack { margin-top: 10px; background: #fff; color: var(--deep); box-shadow: 0 5px 0 rgba(0, 0, 0, .2); }
@keyframes pmIn { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
@keyframes pmGlow { 50% { box-shadow: 0 0 0 16px var(--glow), 0 24px 60px rgba(0, 0, 0, .35); } }
@keyframes pmTick { 50% { transform: scale(.93) translateY(3px); } }
@keyframes coinDrop { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(260px) rotate(300deg); opacity: 0; } }
@keyframes coinRise { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-240px) scale(1.2); opacity: 0; } }
/* Les confettis passent au-dessus de l'overlay */
.confetti-host { z-index: 2147483001; }

/* ---------------- Temps réel : indicateurs ---------------- */
.sync-badge { margin-top: 4px; font-size: .75rem !important; }
.refresh-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 300; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow);
  animation: slideUp .25s;
}
.notif-card fieldset { margin: 10px 0; }
.notif-card .chip small { color: var(--muted); }
.notif-status { background: #f8f5ff; border-radius: 12px; padding: 10px 14px; margin-bottom: 6px; }

/* =========================================================================
 * ÉCRITURE AU STYLET : soumission explicite + correction par le parent
 * ========================================================================= */
.btn-finish { display: flex; margin: 6px auto 0; min-width: min(420px, 100%); font-size: 1.6rem; }
.st-msg.shake { color: var(--danger); }
.sent-icon { font-size: 3.5rem; }
.celebrate .sent-sub { display: block; font-size: 1.1rem; font-weight: 500; color: var(--muted); margin: 6px 0 14px; }
.celebrate #goNext { margin-top: 12px; }
.end-pending { background: #fff6d6; border-radius: 16px; padding: 10px 16px; font-size: 1.15rem; }
.hw-badge { align-self: flex-start; margin-top: 6px; padding: 3px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.hw-badge.pending { background: #fff3c4; color: #8a5a00; }
.hw-badge.redo { background: #ffe1cc; color: #b54700; }
.hw-card.rs-redo { box-shadow: 0 0 0 3px #ff7b00, var(--shadow); }
.redo-card { animation: wiggle 3s infinite; }

/* Pop-up orange « À refaire » */
.points-backdrop.redo { background: rgba(140, 70, 0, .5); }
.modal.points-modal.redo { background: linear-gradient(160deg, #ffa53d, #e86a00); --glow: rgba(255, 140, 0, .35); --deep: #c45a00; }
.redo-comment { justify-content: flex-start !important; font-size: 1.05rem !important; font-style: italic; }
.redo-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }
.redo-actions .btn-ghost { color: #fff; background: rgba(255, 255, 255, .2); }

/* Interface de correction parent */
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; margin-top: 12px; }
.review-card { display: flex; flex-direction: column; gap: 10px; background: #faf8ff; border-radius: 18px; padding: 12px; border: 2px solid var(--line); }
.review-img img { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; display: block; }
.img-purged { height: 120px; display: grid; place-items: center; background: #f1f1f5; border-radius: 12px; color: var(--muted); }
.review-info { display: flex; flex-direction: column; gap: 4px; }
.review-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-word { font-family: 'Andika', var(--font); font-size: 1.6rem; }
.review-comment { min-height: 44px; margin-top: 6px; }
.review-card .row-actions .btn { flex: 1; }
.prev-try img { width: 100%; border-radius: 10px; margin-top: 6px; opacity: .85; }
.zoom-img { width: 100%; border-radius: 12px; }
.modal:has(.zoom-img) { width: min(900px, 100%); }