.keyboard-scroll{overflow-x:auto;padding:8px 0 20px}.keyboard{position:relative;aspect-ratio:23.2/6.35;min-width:980px;background:#30353c;border:14px solid #30353c;border-radius:14px;box-shadow:0 8px 0 #1e2329,0 16px 20px #17283925;box-sizing:content-box}.keyboard .key{position:absolute;box-sizing:border-box;border:3px solid #30353c;border-radius:8px;background:linear-gradient(#fafafa,#dce0e4);color:#222;box-shadow:inset 0 -3px 0 #a0a6ad;padding:2px;min-height:0;min-width:0;margin:0;font:12px Arial;cursor:pointer;overflow:hidden}.key strong{position:absolute;inset:28% 1px auto;white-space:pre-line;font-size:clamp(12px,1.4vw,20px);line-height:1.1}.key small{position:absolute;font-size:10px;color:#58646c;line-height:1;pointer-events:none}.key .top{top:5px;left:6px}.key .bottom{bottom:6px;left:6px}.key .third{bottom:6px;right:6px}.keyboard .key.changed{background:#fff0bb;box-shadow:inset 0 -4px #d49a00}.keyboard .key.changed strong{color:#d00000}.keyboard .key.engaged{background:#087979;color:white;box-shadow:inset 0 -4px #004b50}.key:focus-visible{outline:3px solid #ee9000;z-index:2}.mode{padding:16px;border-radius:8px;background:#eaf4f4;font-weight:bold}.key-help{min-height:55px;border-left:5px solid #c17400;padding:12px 18px;background:#fff7e6}.legend{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.legend span{padding:8px 12px;border-radius:6px;background:#eef4f7}.keyboard.zones .alpha{background:#b4e4df}.keyboard.zones .number{background:#ffe0a4}.keyboard.zones .function{background:#d9c7f2}.keyboard.zones .special{background:#d5e3ee}.keyboard.zones .numpad{background:#f7c8b6}.keyboard.zones .key strong{color:#172c3a}.sample{width:100%;min-height:85px;padding:14px;font:22px Arial;border:2px solid #607d8b;border-radius:6px}.writer{border:1px solid #9babb5;border-radius:6px;overflow:hidden;box-shadow:0 8px 22px #0c304820;margin:18px 0;background:#c7ccd1}.writer-title{background:#f6f6f6;padding:10px 14px;font:14px Arial;display:flex;justify-content:space-between;color:#20262a}.writer-logo{display:inline-block;border:1px solid #257dab;color:#257dab;background:white;padding:2px 5px;font-weight:bold;margin-right:8px}.writer-menu,.writer-tools{display:flex;gap:20px;padding:8px 12px;background:#f3f3f3;border-bottom:1px solid #ccc;font:14px Arial;color:#222;flex-wrap:wrap}.writer-tools{gap:16px;align-items:center}.writer-tools .box{background:white;border:1px solid #bbb;padding:3px 10px}.writer-ruler{margin:10px auto 0;max-width:760px;background:repeating-linear-gradient(90deg,transparent 0,transparent 7px,#999 7px,#999 8px);height:18px;border-bottom:1px solid #999;background-color:#fafafa;font:10px Arial;word-spacing:32px;white-space:nowrap;overflow:hidden;color:#555}.paper{background:white;max-width:760px;min-height:390px;margin:12px auto 28px;box-shadow:0 1px 6px #0003;position:relative}.typing-area{position:relative;margin:0;padding:0;min-height:390px}.typing-area textarea,.typing-area pre{box-sizing:border-box;width:100%;min-height:390px;margin:0;padding:54px 60px;font:22px/1.7 'Liberation Serif','Times New Roman',serif;white-space:pre-wrap;overflow-wrap:break-word;tab-size:4;border:0;border-radius:0;letter-spacing:normal}.typing-area pre{position:absolute;inset:0;pointer-events:none;overflow:hidden;color:#202020}.typing-area textarea{position:relative;display:block;background:transparent;color:transparent;caret-color:#141414;resize:none;overflow:auto;outline-offset:-4px}.typing-area textarea::selection{background:#559aee55;color:transparent}.typing-area textarea::placeholder{color:#777}.typing-area mark{background:#ffebeb;color:#bb1728;text-decoration:underline;text-decoration-color:#bb1728;text-decoration-style:wavy}.writer-status{background:#f3f3f3;padding:8px 12px;font:12px Arial;display:flex;justify-content:space-between;color:#333}.stats{display:flex;gap:16px;flex-wrap:wrap}.stats div{background:#eef6f6;padding:12px 24px;border-radius:8px;min-width:130px}.stats strong{display:block;font-size:28px}.dictation-model{background:#fff9eb;border-left:4px solid #c17400;padding:16px 22px;font-size:20px;line-height:1.6}.feedback{min-height:2em;font-weight:bold}.feedback.error{color:#b3192d}.feedback.success{color:#086b48}.listen{display:flex;gap:12px;flex-wrap:wrap;align-items:center}@media(max-width:650px){.typing-area textarea,.typing-area pre{padding:28px 20px;font-size:20px}.writer-menu{gap:10px}.stats div{padding:10px;min-width:100px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.keyboard .special strong{font-size:12px;inset:20% 2px auto;line-height:1.2}.keyboard .key[data-code="NumLock"] strong,.keyboard .key[data-code="NumpadEnter"] strong{font-size:12px;inset:20% 2px auto}.keyboard .key[data-code^="Shift"] strong{font-size:14px}.keyboard .key[data-code="CapsLock"] strong{font-size:14px}.keyboard .key[data-code^="Arrow"] strong{font-size:20px}#model-details{position:sticky;top:0;z-index:5;background:white;padding:10px 0}#model-details .dictation-model{margin:8px 0;font-size:18px}select{font:inherit;padding:10px;max-width:100%}
.keyboard .key.unavailable strong{color:#78818a}

.keyboard .numpad.long-label strong{font-size:11px;inset:22% 1px auto;line-height:1.15}

/* Le symbole reste superposé : aucun caractère ajouté ni décalage du curseur. */
.typing-area mark.line-break-error{position:relative;background:transparent;text-decoration:none}
.typing-area mark.line-break-error::before{content:"↵";position:absolute;left:0;top:0;color:#bb1728;background:#ffebeb;font-weight:bold;line-height:1;text-decoration:none}
.line-break-help strong{color:#bb1728;background:#ffebeb}