/* Dys Facile — habillage de l'application (charte Ardoisia : craie sur ardoise noire, traits tracés à la main, filet tricolore). */
:root { color-scheme: dark; }
* { 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.02rem; line-height: 1.65;
  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;
}
.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; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ic { width: 1.4em; height: 1.4em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.ic.big { width: 2.6rem; height: 2.6rem; }
[data-ic] { display: inline-flex; }
.btn-c { display: inline-flex; align-items: center; gap: .5em; min-height: 3rem; padding: 6px 16px; font: inherit; font-weight: 700; font-size: .95rem; color: var(--chalk); cursor: pointer; background: transparent; border: 2px solid var(--chalk-dim); border-radius: var(--hand); text-decoration: none; }
.btn-c:hover { background: rgba(236, 233, 222, .10); }
.btn-c.primary { color: #eef4ff; border-color: var(--chalk-blue); background: rgba(150, 173, 252, .18); }
.btn-c.primary:hover { background: rgba(150, 173, 252, .32); }
.btn-c.big { min-height: 3.6rem; padding: 8px 26px; font-size: 1.1rem; }
.btn-c[aria-pressed="true"] { color: #eef4ff; border-color: var(--chalk-blue); background: rgba(150, 173, 252, .26); }
.btn-c.danger { border-color: var(--chalk-red); color: #ffdcd7; }
.btn-c:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px dashed var(--chalk-blue); outline-offset: 3px; }

/* ----- en-tête ----- */
.app-chrome { padding: 14px 16px 0; max-width: 72rem; margin: 0 auto; }
.brand-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--chalk); text-decoration: none; font-weight: 700; font-size: 1.7rem; text-shadow: 0 0 1px rgba(255, 255, 255, .5), 0 0 10px rgba(255, 255, 255, .10); }
.top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tricolore { display: block; height: 8px; margin: 10px 0 12px; border-radius: 4px; background: linear-gradient(90deg, #96ADFC 0 10%, #DBE1F1 10% 20%, #A8F29A 20% 30%, #D8D3D6 30% 40%, #EDDD6D 40% 50%, #EDD1B0 50% 60%, #B987DC 60% 70%, #E0A6AA 70% 80%, #A5F7E1 80% 90%, #F8FD89 90% 100%); filter: url("/chalk.svg#rough"); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.step { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 3.4rem; padding: 6px 10px; font: inherit; font-weight: 700; font-size: .98rem; color: var(--chalk-dim); background: transparent; border: 2px solid #3a423e; border-radius: var(--hand); cursor: pointer; }
.step b { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid currentColor; font-size: .8em; }
.step:hover { background: rgba(236, 233, 222, .08); }
.step[aria-current="page"] { color: #eef4ff; border-color: var(--chalk-blue); background: rgba(150, 173, 252, .18); }

/* ----- écrans ----- */
main { max-width: 72rem; margin: 0 auto; padding: 8px 16px 60px; }
.screen[hidden] { display: none; }
#s-read { max-width: none; margin: 0 -16px; }
body.reading main { max-width: none; padding: 0; }
body.reading #s-read { margin: 0; }
body.reading .app-chrome { max-width: none; }
h1 { margin: 12px 0 4px; font-size: 2rem; line-height: 1.25; }
h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.lead { margin: 0 0 18px; color: var(--chalk-dim); max-width: 46rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 14px; margin-bottom: 18px; }
.tile { display: grid; gap: 4px; justify-items: start; align-content: start; padding: 18px 18px 16px; min-height: 8.5rem; font: inherit; color: var(--chalk); text-align: left; cursor: pointer; background: rgba(255, 255, 255, .03); border: 3px solid var(--chalk-dim); border-radius: var(--hand); }
.tile:hover { background: rgba(150, 173, 252, .14); border-color: var(--chalk-blue); }
.tile b { font-size: 1.2rem; }
.tile small { color: var(--chalk-dim); font-size: .85rem; line-height: 1.4; }
.tile svg.ic.big { color: var(--chalk-blue); margin-bottom: 4px; }
.paper { position: relative; }
textarea { width: 100%; padding: 16px 18px; font: inherit; font-size: 1.1rem; line-height: 1.7; color: var(--chalk); background: var(--slate-raised); border: 3px solid var(--chalk-dim); border-radius: var(--hand); resize: vertical; min-height: 12rem; }
textarea::placeholder { color: var(--chalk-dim); opacity: .75; }
.paper.drag textarea { border-color: var(--chalk-blue); background: rgba(150, 173, 252, .12); }
.busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(28, 33, 31, .85); border-radius: var(--hand); font-weight: 700; }
.spin { width: 26px; height: 26px; border: 4px solid var(--chalk-dim); border-top-color: var(--chalk-blue); border-radius: 50%; animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }
.opts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 4px; align-items: center; }
label.inline { display: inline-flex; align-items: center; gap: 10px; color: var(--chalk-dim); font-size: .95rem; }
label.inline select, label.inline input[type=text] { min-height: 2.8rem; padding: 6px 10px; font: inherit; color: var(--chalk); background: var(--slate-raised); border: 2px solid var(--chalk-dim); border-radius: 10px; }
label.check input { width: 1.4rem; height: 1.4rem; accent-color: var(--chalk-blue); }
.status { min-height: 1.7em; margin: 8px 0; color: var(--chalk-dim); }
.status.error { color: var(--chalk-red); }
.status.ok { color: var(--chalk-blue); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin: 10px 0; }
.actions.left { justify-content: flex-start; }
.recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.recent li { display: flex; align-items: center; gap: 8px; }
.recent li button.open { flex: 1; text-align: left; display: block; min-height: 3rem; padding: 8px 14px; font: inherit; color: var(--chalk); background: rgba(255, 255, 255, .03); border: 2px solid #3a423e; border-radius: var(--hand); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent li button.open:hover { border-color: var(--chalk-blue); }
.recent small { color: var(--chalk-dim); margin-left: 8px; }
.sugg { display: flex; flex-wrap: wrap; gap: 8px; min-height: 3.4rem; margin: 0 0 10px; align-items: center; }
.sugg button { min-height: 3rem; padding: 4px 18px; font: inherit; font-size: 1.1rem; color: #eef4ff; background: rgba(150, 173, 252, .16); border: 2px solid var(--chalk-blue); border-radius: var(--hand); cursor: pointer; }
.sugg button:hover { background: rgba(150, 173, 252, .34); }
.sugg .hint { color: var(--chalk-dim); font-size: .9rem; }
.wbox { min-height: 16rem; font-family: var(--font, "OpenDyslexic"); font-size: var(--fs, 24px); letter-spacing: var(--ls); word-spacing: var(--ws); line-height: var(--lh); color: var(--fg); background: var(--bg); border-color: var(--chalk-dim); }
.audio-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.audio-line audio { max-width: 100%; }

/* ----- fenêtres ----- */
dialog { width: min(44rem, 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::backdrop { background: rgba(0, 0, 0, .62); }
dialog .dlg { padding: 20px 22px 24px; }
dialog h2 { margin: 0 0 6px; font-size: 1.5rem; }
dialog h3 { margin: 20px 0 6px; font-size: 1.08rem; }
dialog p, dialog li { color: var(--chalk-dim); }
dialog .dlg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plist { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.plist li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plist .btn-c.pick { flex: 1; justify-content: flex-start; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; margin: 10px 0; }
.stat { padding: 10px 12px; border: 2px solid #3a423e; border-radius: 12px; }
.stat b { display: block; font-size: 1.6rem; color: var(--chalk); line-height: 1.2; }
.stat span { font-size: .82rem; color: var(--chalk-dim); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 6rem; margin: 10px 0 2px; }
.bars div { flex: 1; min-width: 6px; background: var(--chalk-blue); border-radius: 4px 4px 0 0; opacity: .85; }
.bars-l { display: flex; justify-content: space-between; font-size: .75rem; color: var(--chalk-dim); }
dialog input[type=text] { width: 100%; min-height: 3rem; padding: 8px 12px; font: inherit; color: var(--chalk); background: var(--slate-raised); border: 2px solid var(--chalk-dim); border-radius: 10px; }
.legend-strip { display: flex; border-radius: 10px; overflow: hidden; margin: 10px 0; }
.legend-strip span { flex: 1; padding: 8px 4px; text-align: center; font-weight: 700; font-size: .82rem; line-height: 1.2; }

@media (max-width: 640px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 1.6rem; }
  .brand { font-size: 1.4rem; }
  .btn-c .lbl-opt { display: none; }
  .actions { justify-content: stretch; }
  .actions .btn-c { flex: 1 1 auto; justify-content: center; }
}
@media print { body { background: #fff; } .app-chrome, main > .screen:not(#s-read), dialog { display: none !important; } main { padding: 0; max-width: none; } }

/* ----- recadrage ----- */
dialog.wide { width: min(70rem, calc(100vw - 16px)); }
.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; }
.crop-tools { align-items: center; } .crop-pn { padding: 0 6px; color: var(--chalk); }
.opts-box { border: 2px solid #3a423e; border-radius: 12px; padding: 8px 16px 12px; margin: 14px 0; display: grid; gap: 6px; }
.opts-box legend { padding: 0 8px; font-weight: 700; } .opts-box .hint { margin: 4px 0 0; color: var(--chalk-dim); font-size: .85rem; }