/* Dys-Entraînement — charte Ardoisia (craie sur ardoise, traits tracés à la main, OpenDyslexic) + palette « Dyslexia Colours ».
   Règle de base : un seul message et trois éléments cliquables au plus par écran d'élève. */
:root {
  color-scheme: dark;
  --slate: #1c211f; --slate-raised: #262d2a; --chalk: #ece9de; --chalk-dim: #b5b9b2;
  --chalk-blue: #96ADFC; --chalk-red: #E0A6AA; --chalk-green: #A8F29A; --chalk-purple: #B987DC; --chalk-turq: #A5F7E1; --chalk-yellow: #F8FD89; --chalk-peach: #EDD1B0;
  --ui-font: "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif;
  --hand: 255px 12px 225px 14px / 14px 225px 12px 255px;
  --paper: #EDD1B0; --paper-ink: #1f2330; --fs: 28px; --font: "OpenDyslexic", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; min-height: 100dvh; color: var(--chalk); font-family: var(--ui-font); font-size: 1.05rem; line-height: 1.6;
  background: radial-gradient(ellipse 60% 45% at 18% 12%, rgba(255,255,255,.055), transparent 70%), radial-gradient(ellipse 55% 40% at 85% 92%, rgba(255,255,255,.04), transparent 70%), var(--slate); background-attachment: fixed; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--slate); color: var(--chalk); padding: 8px 14px; z-index: 100; } .skip:focus { left: 8px; top: 8px; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px dashed var(--chalk-blue); outline-offset: 3px; }
svg.i { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ----- barre du haut ----- */
.top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 76rem; margin: 0 auto; padding: 12px 16px 6px; }
.grow { flex: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--chalk); text-decoration: none; font-weight: 700; font-size: 1.25rem; }
.home { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; color: var(--chalk-dim); background: none; border: 2px solid #3a423e; border-radius: 12px; }
.home:hover { color: var(--chalk); border-color: var(--chalk-dim); } .home svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ghost { min-height: 2.6rem; padding: 2px 14px; font-size: .88rem; color: var(--chalk-dim); background: none; border: 2px solid #3a423e; border-radius: 12px; }
.ghost:hover { color: var(--chalk); border-color: var(--chalk-dim); } .ghost.on { color: #eef4ff; border-color: var(--chalk-blue); background: rgba(150,173,252,.18); }
.ghost.danger { color: #ffb3ac; border-color: #7a3a36; } .ghost:disabled { opacity: .45; cursor: default; }
.langsel select { min-height: 2.6rem; padding: 2px 10px; font-size: .85rem; color: var(--chalk-dim); background: var(--slate); border: 2px solid #3a423e; border-radius: 10px; cursor: pointer; }

/* ----- la « tablette » ----- */
main { max-width: 76rem; margin: 0 auto; padding: 6px 16px 40px; }
.device { min-height: calc(100dvh - 110px); display: flex; flex-direction: column; padding: clamp(18px, 3.2vw, 44px); border: 3px solid var(--chalk-dim); border-radius: 26px 18px 24px 16px / 18px 24px 16px 26px; background: rgba(255,255,255,.02); }
.hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 2.8rem; }
.center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 28px; padding: 14px 0; }
.dots { display: flex; gap: 10px; } .dots i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--chalk-dim); } .dots i.d { background: var(--chalk-green); border-color: var(--chalk-green); } .dots i.cu { background: var(--chalk-blue); border-color: var(--chalk-blue); }
h1.big { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0; line-height: 1.25; }
h2 { margin: 0; font-size: 1.4rem; }
.sub { color: var(--chalk-dim); font-size: 1.2rem; margin: 0; }
.bigbtn { min-height: 4.4rem; padding: 10px 40px; font-size: 1.35rem; font-weight: 700; color: #eef4ff; background: rgba(150,173,252,.2); border: 3px solid var(--chalk-blue); border-radius: var(--hand); }
.bigbtn:hover { background: rgba(150,173,252,.36); } .bigbtn.soft { color: var(--chalk); background: none; border-color: var(--chalk-dim); } .bigbtn.small { min-height: 3rem; padding: 2px 22px; font-size: 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 18px; width: 100%; }
.tile { display: grid; gap: 6px; justify-items: start; align-content: start; padding: 20px 20px 18px; min-height: 9.5rem; text-align: left; color: var(--chalk); background: rgba(255,255,255,.03); border: 3px solid var(--chalk-dim); border-radius: var(--hand); }
.tile:hover { background: rgba(150,173,252,.12); border-color: var(--chalk-blue); } .tile .e { font-size: 2.6rem; line-height: 1; } .tile b { font-size: 1.2rem; } .tile small { color: var(--chalk-dim); font-size: .85rem; line-height: 1.4; }
.tile.empty { opacity: .5; }
.consi { display: grid; gap: 22px; width: min(36rem, 100%); } .consi div { display: flex; align-items: center; gap: 22px; text-align: left; font-size: 1.5rem; } .consi .e { font-size: 2.8rem; width: 3.8rem; text-align: center; }
.listen { font-size: 1.6rem; min-width: 3.6rem; min-height: 3.6rem; border-radius: 50%; border: 3px solid var(--chalk-blue); background: rgba(150,173,252,.16); color: #eef4ff; }
.paper { background: var(--paper); color: var(--paper-ink); border-radius: 12px; padding: 24px 34px; font-family: var(--font); font-size: var(--fs); line-height: 2; letter-spacing: .08em; word-spacing: .35em; text-align: left; width: min(48rem, 100%); }
.q { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.ch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: 100%; }
.c { display: grid; justify-items: center; align-content: center; gap: 12px; padding: 22px 10px; min-height: 8rem; font-size: 1.3rem; font-weight: 700; color: var(--chalk); background: rgba(255,255,255,.03); border: 3px solid var(--chalk-dim); border-radius: var(--hand); }
.c img { width: 6rem; height: 6rem; object-fit: contain; background: #fff; border-radius: 14px; padding: 6px; } .c:hover { border-color: var(--chalk-blue); }
.hl { background: var(--chalk-yellow); color: var(--paper-ink); padding: 0 8px; border-radius: 8px; } .good { color: var(--chalk-green); } .tr { color: var(--chalk-yellow); }
.emoji { font-size: 4.5rem; line-height: 1; }
.zone { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; min-height: 4.8rem; }
.slot { min-width: 6.2rem; height: 4.4rem; padding: 0 6px; display: grid; place-items: center; border: 3px dashed var(--chalk-blue); border-radius: 14px; }
.slot.wrong { border-color: var(--chalk-yellow); background: rgba(248,253,137,.1); }
.tag { padding: 8px 24px; font-size: 1.9rem; font-weight: 700; background: var(--chalk-peach); color: #1f2330; border: 0; border-radius: 14px; box-shadow: 0 3px 0 rgba(0,0,0,.4); touch-action: none; user-select: none; }
.tag.t1 { background: var(--chalk-turq); } .tag.t2 { background: var(--chalk-yellow); } .tag.t3 { background: var(--chalk-purple); } .tag.t4 { background: var(--chalk-red); }
.ghosttag { position: fixed; z-index: 90; pointer-events: none; opacity: .92; transform: translate(-50%, -50%) rotate(-3deg); }
.rec { width: 9rem; height: 9rem; border-radius: 50%; font-size: 1.2rem; font-weight: 700; color: #fff; background: #b3261e; border: 6px solid rgba(255,255,255,.25); }
.rec.on { animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 50% { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .rec.on { animation: none; } }
.gauge { width: min(24rem, 100%); height: 24px; border: 3px solid var(--chalk-dim); border-radius: 14px; overflow: hidden; } .gauge div { height: 100%; background: linear-gradient(90deg, var(--chalk-blue), var(--chalk-green)); }
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 12px; width: min(48rem, 100%); }
.badge { text-align: center; padding: 14px 8px; border: 3px solid var(--chalk-yellow); border-radius: var(--hand); } .badge.lock { border-color: #3a423e; opacity: .5; } .badge .ico { font-size: 2.4rem; } .badge small { color: var(--chalk-dim); }
.answer-box { width: min(38rem, 100%); text-align: left; }
.answer-box textarea { width: 100%; min-height: 6.5rem; padding: 14px 18px; font-family: var(--font); font-size: 1.6rem; letter-spacing: .06em; color: var(--chalk); background: var(--slate-raised); border: 3px solid var(--chalk-dim); border-radius: var(--hand); resize: vertical; }
.sugg { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; min-height: 3.4rem; }
.sugg button { min-height: 3rem; padding: 2px 18px; font-size: 1.15rem; color: #eef4ff; background: rgba(150,173,252,.16); border: 2px solid var(--chalk-blue); border-radius: var(--hand); }
.wordline { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: .12em; font-family: var(--font); }
.wordline .blank { display: inline-block; min-width: 3.4rem; border-bottom: 4px dashed var(--chalk-blue); text-align: center; }
.chipg { padding: 0 .14em; border-radius: 8px; }
.ph-oi { background: #111; color: #fff; } .ph-on { background: #6b3410; color: #fff; } .ph-ou { background: #d40000; color: #fff; } .ph-an { background: #ff8c00; color: #111; } .ph-o { background: #ffe600; color: #111; }
.ph-in { background: #17c964; color: #111; } .ph-e { background: #00c8ff; color: #111; } .ph-ai { background: #7a28ff; color: #fff; } .ph-ez { background: #ff80ab; color: #111; } .ph-x { background: var(--chalk-peach); color: #1f2330; }
.msg { min-height: 1.6em; color: var(--chalk-yellow); font-size: 1.1rem; }
.statusline { min-height: 1.5em; color: var(--chalk-dim); font-size: .95rem; } .statusline.error { color: var(--chalk-red); } .statusline.ok { color: var(--chalk-green); }

/* ----- espace adulte ----- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.adl { display: grid; gap: 14px; text-align: left; align-content: start; }
.card { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border: 2px solid #3a423e; border-radius: 16px; }
.card small, .muted { color: var(--chalk-dim); } .card .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.form label.lbl { display: block; margin: 0 0 4px; color: var(--chalk-dim); font-size: .85rem; }
.inp, .form input[type=text], .form textarea, .form select, .adl select, .adl input[type=text], .adl input[type=number] { width: 100%; padding: 10px 14px; font-size: 1.05rem; color: var(--chalk); background: var(--slate-raised); border: 2px solid var(--chalk-dim); border-radius: 12px; }
.form textarea { min-height: 5rem; resize: vertical; }
.ans { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ans > input[type=text] { flex: 1; } .ans input[type=radio] { width: 1.4rem; height: 1.4rem; accent-color: var(--chalk-green); }
.vig { position: relative; flex: none; } .vig img { width: 3.4rem; height: 3.4rem; object-fit: contain; background: #fff; border-radius: 10px; padding: 3px; display: block; }
.vig .x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--slate); background: #b3261e; color: #fff; font-weight: 700; line-height: 1; }
.vig.none { width: 3.4rem; height: 3.4rem; border: 2px dashed #3a423e; border-radius: 10px; display: grid; place-items: center; color: var(--chalk-dim); font-size: .7rem; }
.item { padding: 14px 16px; border: 2px solid #3a423e; border-radius: 16px; display: grid; gap: 10px; }
.item .ihd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 12px; } .stat b { display: block; font-size: 2rem; line-height: 1.2; } .stat span { color: var(--chalk-dim); font-size: .9rem; }
.pill { display: inline-block; padding: 3px 12px; margin: 2px; border-radius: 12px; background: rgba(224,166,170,.25); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 5rem; } .bars div { flex: 1; min-width: 6px; background: var(--chalk-blue); border-radius: 4px 4px 0 0; opacity: .85; }
.lib { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 2px solid #3a423e; border-radius: 12px; }
.lib button { padding: 4px; background: #fff; border: 2px solid transparent; border-radius: 10px; } .lib img { width: 3.4rem; height: 3.4rem; object-fit: contain; display: block; }
.lib button:hover { border-color: var(--chalk-blue); }

dialog { width: min(40rem, calc(100vw - 20px)); max-height: calc(100dvh - 24px); padding: 0; color: var(--chalk); background: var(--slate); border: 3px solid var(--chalk); border-radius: var(--hand); font-family: var(--ui-font); }
dialog.wide { width: min(70rem, calc(100vw - 16px)); } dialog::backdrop { background: rgba(0,0,0,.62); }
dialog .dlg { padding: 20px 22px 24px; } dialog h2 { margin: 0 0 6px; font-size: 1.5rem; } dialog p { color: var(--chalk-dim); }
.plist { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; } .plist li { display: flex; flex-wrap: wrap; gap: 8px; }
.plist .pick { flex: 1; min-height: 3.2rem; padding: 4px 16px; text-align: left; background: none; border: 2px solid var(--chalk-dim); border-radius: var(--hand); font-weight: 700; }
.plist .pick[aria-pressed="true"] { border-color: var(--chalk-blue); background: rgba(150,173,252,.2); }
/* recadrage */
.crop-help { margin: 0 0 8px; } .crop-stage { display: flex; justify-content: center; align-items: center; padding: 22px; background: #111513; border-radius: 10px; }
.crop-wrap { position: relative; touch-action: none; line-height: 0; user-select: none; } .crop-wrap canvas { display: block; }
.crop-box { position: absolute; border: 3px dashed var(--chalk-yellow); box-shadow: 0 0 0 9999px rgba(0,0,0,.55); cursor: move; touch-action: none; }
.crop-box i { position: absolute; width: 26px; height: 26px; background: var(--chalk-yellow); border: 2px solid #1c211f; border-radius: 50%; margin: -13px 0 0 -13px; }
.crop-box i[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; } .crop-box i[data-h="n"] { left: 50%; top: 0; cursor: ns-resize; } .crop-box i[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.crop-box i[data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; } .crop-box i[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; } .crop-box i[data-h="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.crop-box i[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; } .crop-box i[data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin: 10px 0; } .actions.left { justify-content: flex-start; } .crop-tools { align-items: center; } .crop-pn { padding: 0 6px; }
.btn-c { display: inline-flex; align-items: center; gap: .5em; min-height: 3rem; padding: 6px 16px; font-weight: 700; font-size: .95rem; background: transparent; border: 2px solid var(--chalk-dim); border-radius: var(--hand); color: var(--chalk); } .btn-c.primary { color: #eef4ff; border-color: var(--chalk-blue); background: rgba(150,173,252,.18); } .btn-c.icon { padding: 6px 12px; } .btn-c.big { min-height: 3.6rem; padding: 8px 26px; font-size: 1.1rem; }
.spin { display: inline-block; width: 22px; height: 22px; border: 4px solid var(--chalk-dim); border-top-color: var(--chalk-blue); border-radius: 50%; animation: sp 1s linear infinite; vertical-align: middle; } @keyframes sp { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .ch { grid-template-columns: 1fr; } .brand span { display: none; } .consi div { font-size: 1.25rem; } }
@media (max-width: 760px) { .paper { font-size: min(var(--fs), 5.4vw); padding: 16px 18px; } .wordline { font-size: 9vw; } .tag { font-size: 1.5rem; padding: 6px 16px; } .slot { min-width: 4.6rem; } }

.sent { cursor: pointer; border-radius: 8px; padding: 0 .12em; transition: background .12s; }
.sent:hover { background: rgba(31, 35, 48, .14); } .sent.speaking { background: var(--chalk-yellow); color: var(--paper-ink); }
.sent:focus-visible { outline: 3px dashed #1f2330; outline-offset: 2px; }