/* Dys Facile — lecteur (partagé par l'application et l'export HTML). Charte Ardoisia : craie sur ardoise, traits « à la main ».
   Le texte lui-même n'est jamais déformé : seuls les cadres décoratifs le sont. */
.dfr, :root {
  --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;
}
.dfr { color: var(--chalk); font-family: var(--ui-font); background: var(--slate); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; line-height: 1.5; }
.dfr *, .dfr *::before, .dfr *::after { box-sizing: border-box; }
.dfr button { font: inherit; color: var(--chalk); cursor: pointer; }
.dfr [hidden] { display: none !important; }
.dfr .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dfr svg.ic { width: 1.5em; height: 1.5em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ----- barre d'outils ----- */
.dfr-bar { position: sticky; top: 0; z-index: 20; background: var(--slate); padding: 10px 14px 8px; border-bottom: 2px solid #3a423e; }
.dfr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dfr-row + .dfr-row { margin-top: 8px; }
.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); 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[aria-pressed="true"] { color: #eef4ff; border-color: var(--chalk-blue); background: rgba(150, 173, 252, .22); }
.btn-c.icon { padding: 6px 12px; }
.btn-c:disabled { opacity: .5; cursor: default; }
.dfr button:focus-visible, .dfr input:focus-visible, .dfr select:focus-visible, .dfr summary:focus-visible { outline: 3px dashed var(--chalk-blue); outline-offset: 3px; }
.dfr-speed { display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; }
.dfr-speed input { width: 7.5rem; accent-color: var(--chalk-blue); }
.dfr-speed output { min-width: 3.2em; font-size: .85rem; color: var(--chalk-dim); }
.dfr-chips { gap: 8px; }
.dfr-chips .btn-c { min-height: 2.6rem; padding: 4px 13px; font-size: .88rem; }
.dfr-legend { display: flex; flex-wrap: nowrap; overflow: hidden; border-radius: 10px; margin-top: 8px; }
.dfr-legend button { flex: 1 0 5.2rem; border: 0; border-radius: 0; min-height: 3.4rem; padding: 4px 6px; font-weight: 700; font-size: .9rem; line-height: 1.15; display: grid; place-content: center; text-align: center; position: relative; }
.dfr-legend button[aria-pressed="false"] { opacity: .28; }
.dfr-legend button span { display: block; }

/* ----- la feuille ----- */
.dfr-stage { flex: 1; padding: 18px 12px 80px; display: flex; justify-content: center; }
.dfr-page { position: relative; width: 100%; max-width: 70rem; padding: clamp(16px, 4vw, 44px); background: var(--bg, #EDD1B0); color: var(--fg, #1f2330); border-radius: 6px; box-shadow: 0 4px 24px rgba(0, 0, 0, .35); align-self: flex-start; }
.dys-text { font-family: var(--font, "OpenDyslexic"); font-size: var(--fs, 26px); letter-spacing: var(--ls, .08em); word-spacing: var(--ws, .35em); line-height: var(--lh, 1.9); max-width: calc(var(--measure, 62) * 1ch); margin: 0 auto; text-align: left; hyphens: none; overflow-wrap: break-word; }
.dys-text p { margin: 0 0 var(--pgap, .9em); }
.dys-text.case-upper { text-transform: uppercase; }
.dys-text.case-script { font-family: "Andika", sans-serif; }
.dys-text.case-cursive { font-family: "Playwrite FR Trad", cursive; letter-spacing: 0; word-spacing: .3em; }
.dys-text .w { cursor: pointer; border-radius: .2em; transition: background .1s; }
.dys-text .w:hover { background: rgba(80, 130, 230, .16); }
.dys-text .w.sel { background: rgba(80, 130, 230, .30); outline: 2px solid rgba(80, 130, 230, .7); }
.dys-text .w.scur { background: rgba(255, 214, 79, .30); }
.dys-text .w.cur { background: #ffd84a; color: #1b1b1b; box-shadow: 0 0 0 3px #ffd84a; }
.dys-text .w.cur i { color: inherit; background: none; }
.dys-text i { font-style: normal; }
/* aides visuelles */
.hl-words .w:nth-child(odd) { color: var(--alt1, #1f4fb8); }
.hl-words .w:nth-child(even) { color: var(--alt2, #b3261e); }
.hl-lines .w[data-l="1"] { color: var(--alt1, #1f4fb8); }
.dys-text i.sy0 { color: var(--sy0, #1f4fb8); }
.dys-text i.sy1 { color: var(--sy1, #c2271f); }
.dys-text.sy-dots i.sys::before { content: "·"; font-weight: 700; }
.dys-text.sy-gap i.sys { margin-left: .22em; }
.dys-text i.mu { color: var(--mute, #a5a89f); }
.dys-text i.dg { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
.dys-text i.cf-b { color: var(--cf-b, #1f5fd6); font-weight: 700; }
.dys-text i.cf-d { color: var(--cf-d, #d4351c); font-weight: 700; }
.dys-text i.cf-p { color: var(--cf-p, #178a3d); font-weight: 700; }
.dys-text i.cf-q { color: var(--cf-q, #8a35c9); font-weight: 700; }
.dys-text i.ph { border-radius: .12em; padding: 0 .04em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.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; }
.dys-text i.ph.sy0, .dys-text i.ph.sy1 { color: inherit; }
.ph-oi, .ph-on, .ph-ou, .ph-ai { color: #fff !important; } .ph-an, .ph-o, .ph-in, .ph-e, .ph-ez { color: #111 !important; }
[data-dark="1"] .ph-oi { background: #3a3a3a; border: 1px solid #888; }

/* ----- règle / masque de lecture ----- */
.ruler { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; border-radius: 6px; }
.ruler .rk { position: absolute; left: 0; right: 0; }
.ruler .rk-top { top: 0; height: var(--ry); }
.ruler .rk-win { top: var(--ry); height: var(--rh); }
.ruler .rk-bot { top: calc(var(--ry) + var(--rh)); bottom: 0; }
.ruler[data-mode="mask"] .rk-top, .ruler[data-mode="mask"] .rk-bot { background: rgba(25, 28, 27, .82); }
.ruler[data-mode="mask"] .rk-win { box-shadow: 0 0 0 3px rgba(150, 173, 252, .9) inset; }
.ruler[data-mode="band"] .rk-win { background: rgba(255, 214, 79, .30); box-shadow: 0 0 0 2px rgba(214, 160, 20, .8) inset; }

/* ----- fenêtre d'un mot ----- */
.dfr-pop { position: absolute; z-index: 40; width: min(22rem, calc(100vw - 24px)); padding: 14px 16px; color: var(--chalk); background: var(--slate); border: 3px solid var(--chalk); border-radius: var(--hand); box-shadow: 0 8px 28px rgba(0, 0, 0, .5); font-family: var(--ui-font); }
.dfr-pop h3 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.dfr-pop .syl { color: var(--chalk-blue); font-size: 1.15rem; margin: 2px 0 8px; letter-spacing: .06em; }
.dfr-pop .pimg { display: block; width: 7.5rem; height: 7.5rem; object-fit: contain; background: #fff; border-radius: 10px; margin: 6px 0; padding: 6px; }
.dfr-pop .def { font-size: .95rem; color: var(--chalk); margin: 8px 0 0; line-height: 1.55; }
.dfr-pop .def small, .dfr-pop .muted { color: var(--chalk-dim); font-size: .82rem; }
.dfr-pop .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dfr-pop .acts .btn-c { min-height: 2.5rem; padding: 3px 12px; font-size: .85rem; }

/* ----- tiroir de réglages ----- */
.dfr-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(26rem, 100vw); overflow-y: auto; padding: 14px 16px 40px; background: var(--slate); border-left: 3px solid var(--chalk); transform: translateX(105%); transition: transform .2s; visibility: hidden; }
.dfr-drawer.open { transform: none; visibility: visible; }
.dfr-drawer h2 { margin: 0 0 4px; font-size: 1.3rem; }
.dfr-drawer .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dfr-drawer details { margin: 10px 0; border: 2px solid #3a423e; border-radius: 12px; padding: 4px 12px 12px; }
.dfr-drawer summary { cursor: pointer; font-weight: 700; padding: 10px 0; min-height: 2.8rem; display: flex; align-items: center; gap: 10px; }
.dfr-drawer label { display: block; margin: 12px 0 4px; font-size: .88rem; color: var(--chalk-dim); }
.dfr-drawer select, .dfr-drawer input[type=range] { width: 100%; }
.dfr-drawer select { 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; }
.dfr-drawer input[type=range] { accent-color: var(--chalk-blue); min-height: 2rem; }
.dfr-drawer .val { float: right; color: var(--chalk); }
.dfr-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 8px; margin-top: 6px; }
.dfr-themes button { min-height: 3.2rem; padding: 4px; font-size: .78rem; font-weight: 700; border: 3px solid transparent; border-radius: 10px; line-height: 1.2; }
.dfr-themes button[aria-pressed="true"] { border-color: var(--chalk-blue); box-shadow: 0 0 0 2px var(--slate), 0 0 0 4px var(--chalk-blue); }
.dfr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.dfr-seg .btn-c { min-height: 2.5rem; padding: 3px 12px; font-size: .85rem; }
.dfr-drawer .hint { font-size: .8rem; color: var(--chalk-dim); margin: 6px 0 0; }
.dfr-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .45); }

@media (max-width: 640px) {
  .btn-c { padding: 6px 12px; }
  .btn-c .lbl-opt { display: none; }
  .dfr-drawer { width: 100vw; }
}
@media print {
  .dfr { background: #fff !important; min-height: 0; display: block; }
  .dfr-bar, .dfr-drawer, .dfr-pop, .dfr-scrim, .ruler, .app-chrome { display: none !important; }
  .dfr-stage { padding: 0; display: block; }
  .dfr-page { box-shadow: none; padding: 0; max-width: none; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dys-text { max-width: none; }
  .dys-text i, .dys-text .w { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dys-text p { break-inside: avoid-page; orphans: 3; widows: 3; }
}
.dfr-h { margin: 0 auto 1em; max-width: calc(var(--measure, 58) * 1ch); font-family: var(--font); font-size: calc(var(--fs, 26px) * 1.25); line-height: 1.3; color: var(--fg); letter-spacing: var(--ls); }

/* ----- corrections manuelles ----- */
.chipw { padding: 0; gap: 0; }
.chipw button { font: inherit; font-weight: 700; color: inherit; background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; min-height: 2.4rem; }
.chipw .chip-main { padding: 2px 4px 2px 13px; }
.chipw .chip-pen { padding: 2px 10px 2px 6px; opacity: .8; }
.chipw .chip-pen svg.ic { width: 1.05em; height: 1.05em; }
.chipw .chip-pen:hover, .chipw .chip-pen.active { opacity: 1; color: var(--chalk-yellow); }
.chipw[data-on="true"] { color: #eef4ff; border-color: var(--chalk-blue); background: rgba(150, 173, 252, .22); }
.dfr-editbar { margin-top: 8px; padding: 8px 12px; border: 2px dashed var(--chalk-yellow); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; font-size: .92rem; }
.dfr-editbar .btn-c { min-height: 2.4rem; padding: 2px 14px; }
.pimgw { position: relative; display: inline-block; margin: 6px 0; }
.pimgw .pimg { margin: 0; }
.pimg-x { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; padding: 0; line-height: 1; font-size: 1.1rem; font-weight: 700; color: #fff; background: #b3261e; border: 2px solid var(--slate); border-radius: 50%; cursor: pointer; }
.def-a { display: flex; gap: 12px; margin-top: 4px; }
.lnk { padding: 2px 0; min-height: 2rem; font: inherit; font-size: .82rem; color: var(--chalk-blue); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.def-ta { width: 100%; min-height: 5rem; padding: 8px 10px; font: inherit; font-size: .95rem; color: var(--chalk); background: var(--slate-raised); border: 2px solid var(--chalk-dim); border-radius: 10px; }
.ed-word { display: flex; flex-wrap: wrap; align-items: center; margin: 10px 0 4px; font-family: var(--font); font-size: 1.8rem; }
.ed-l { padding: 0 2px; }
.ed-gap { position: relative; width: 22px; height: 3rem; padding: 0; background: none; border: 0; cursor: pointer; }
.ed-gap span { position: absolute; left: 50%; top: 18%; bottom: 18%; width: 0; border-left: 3px dotted var(--chalk-dim); }
.ed-gap:hover span { border-left-color: var(--chalk-blue); }
.ed-gap.cut { width: 30px; }
.ed-gap.cut span { border-left: 4px solid var(--chalk-yellow); }
.ed-m { min-width: 2.4rem; height: 3rem; padding: 0 4px; font: inherit; font-family: var(--font); font-size: 1.7rem; color: var(--chalk); background: transparent; border: 2px solid var(--chalk-dim); border-radius: 8px; margin: 2px; cursor: pointer; }
.ed-m.mu { color: #8a928c; background: rgba(255, 255, 255, .08); border-style: dashed; }
.ed-prev { color: var(--chalk-blue); font-size: 1.05rem; min-height: 1.6rem; }