:root{color-scheme:light;--paper:#f6f5ef;--surface:#fffefa;--ink:#172d29;--soft:#4a615a;--line:#cdd7c9;--green:#104f40;--green-ink:#fff;--tint:#e3ecdd;--key:#fffef8;--accent:#e7be64;--dark:#102f29;--radius:15px;--shadow:0 7px 22px #19362a0a;font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:root[data-theme=dark]{color-scheme:dark;--paper:#13201e;--surface:#1c2d29;--ink:#eef5e8;--soft:#bed0c2;--line:#43584f;--green:#a7dbb5;--green-ink:#112c23;--tint:#283c32;--key:#31493d;--accent:#edc676;--dark:#0f201e}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--paper);color:var(--ink)}a{color:var(--green);text-underline-offset:.19em}a:hover{text-decoration-thickness:2px}button,select,input,textarea{font:inherit;color:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.46rem .76rem;font-weight:620}button:hover,.button:hover{border-color:var(--green);background:var(--tint);color:var(--ink)}:focus-visible{outline:3px solid #c58313;outline-offset:2px}svg{display:block}.wrap{width:min(1080px,calc(100% - 40px));margin-inline:auto}.skip{position:absolute;left:8px;top:-90px;background:var(--surface);padding:10px;z-index:10}.skip:focus{top:5px}.mast{border-bottom:1px solid var(--line);background:var(--surface)}.mast .wrap,.foot .wrap,.mastnav,.brand,.utilities,.mastlinks,.rowflex,.bar,.toolbar,.downloads,.statusbar{display:flex;align-items:center;gap:12px}.mast .wrap{height:64px;justify-content:space-between}.brand{font-weight:760;text-decoration:none;color:var(--ink);font-size:1.11rem;letter-spacing:-.055em;gap:9px;white-space:nowrap}.brand em{font-style:normal;color:var(--soft);font-weight:460}.brand img{width:34px;height:34px}.mastlinks a,.utilities a,.mobilemenu a{font-size:.87rem;font-weight:650;color:var(--soft);text-decoration:none}.mastlinks a[aria-current=page]{color:var(--green);text-decoration:underline;text-decoration-thickness:2px}.mastlinks{gap:22px}.utilities{gap:12px}.utilities .lang{border-inline-start:1px solid var(--line);padding-inline-start:12px}.theme{border:1px solid var(--line);font-family:sans-serif;line-height:1;width:36px;height:36px;padding:0;font-size:1.25rem}.mobilemenu{display:none;position:relative}.mobilemenu summary,.opts summary{cursor:pointer}.mobilemenu .drop{position:absolute;inset-inline-end:0;top:calc(100% + 7px);z-index:9;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:205px;padding:10px;box-shadow:var(--shadow)}.drop a{display:block;padding:8px}.hero{padding:31px 0 20px}.kicker,.eyebrow,.tiny{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;font-weight:730;color:var(--soft)}.kicker{display:flex;align-items:center;gap:9px}.kicker:before{content:'';width:24px;height:3px;background:var(--green)}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.18;letter-spacing:-.037em}h1{font-size:clamp(2rem,4.6vw,3.65rem);font-weight:700;margin:6px 0 7px}h2{font-size:clamp(1.45rem,3vw,2rem)}h3{font-size:1.13rem}p{max-width:78ch}.lead{color:var(--soft);font-size:1.04rem;max-width:78ch}.tool{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);overflow:clip}.tool:fullscreen{overflow:auto;padding:3vw;background:var(--surface)}.editor{padding:14px 19px 7px}.bar{justify-content:space-between;gap:6px}.bar label{font-weight:680;font-size:.86rem}.bar label small{font-size:.7rem;color:var(--soft);font-weight:500;display:inline-block;margin-inline-start:6px}.primary,.button.primary{background:var(--green);color:var(--green-ink);border-color:var(--green)}.primary:hover{filter:brightness(.92);color:var(--green-ink);background:var(--green)}.bar .primary{display:inline-flex;gap:6px;align-items:center}.mini-icon{width:16px;height:16px;display:inline;vertical-align:middle}.out{display:block;margin:5px 0;width:100%;min-height:80px;height:88px;resize:vertical;background:var(--surface);border:1px solid transparent;border-radius:6px;line-height:1.55;padding:3px 5px;font-family:Tahoma,Arial,sans-serif;font-size:1.65rem}.out::placeholder{color:var(--soft);opacity:.78}.working{background:var(--tint);padding:12px 16px 15px;border-block-start:1px solid var(--line)}.modes{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:10px}.modes button{background:transparent;color:var(--soft);padding:.4rem .74rem;font-size:.85rem;min-height:35px;border-color:transparent}.modes button[aria-pressed=true]{background:var(--dark);color:#f4f8e9;border-color:var(--dark)}.keys{display:grid;gap:5px;direction:ltr}.keyrow{display:flex;gap:5px;justify-content:center}.key{display:flex;align-items:center;justify-content:center;flex:1 1 0;max-width:85px;min-width:0;position:relative;padding:4px 0;min-height:42px;color:var(--ink);background:var(--key);border:1px solid var(--line);border-bottom:2px solid var(--line);font:1.27rem/1.15 Tahoma,Arial,sans-serif}.key:hover,.key:active,.key.on,.key[aria-pressed=true]{border-color:var(--green);background:var(--green);color:var(--green-ink)}.key small{font:500 .59rem/1.1 system-ui;position:absolute;top:3px;left:4px;color:var(--soft)}.key:hover small,.key.on small{color:inherit}.keyrow.extra{flex-wrap:wrap}.extra .key{font-size:1.18rem;min-height:34px}.grouphead{margin:11px 0 5px}.actionrow{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:7px}.actionrow button{font-size:.8rem;min-height:36px;padding:.32rem .65rem}.actionrow .space{min-width:20%}.statusbar{justify-content:space-between;gap:14px;padding:8px 18px;color:var(--soft);font-size:.79rem}.opts{border-top:1px solid var(--line)}.opts summary{padding:9px 18px;color:var(--soft);font-size:.83rem;font-weight:650}.toolbar{flex-wrap:wrap;align-items:center;padding:2px 18px 15px;gap:8px}.toolbar label,.fieldlabel{font-size:.85rem;font-weight:610}.toolbar input[type=range]{max-width:90px;vertical-align:middle}.toolbar select,.phys select,.speech textarea,.tester select{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:7px;max-width:100%}.toolbar button{font-size:.83rem}.speech,.phys{margin:6px 0 11px}.speech textarea{display:block;width:100%;font-size:1rem;padding:10px;margin-block:4px}.phon-preview{background:var(--surface);border-radius:8px;padding:6px 10px;min-height:42px;font:1.4rem/1.4 Tahoma,Arial,sans-serif;overflow-wrap:anywhere;white-space:pre-wrap}.speech-actions,.choices,.examples{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-block-start:6px}.choices button,.examples button{font-size:.9rem;padding:4px 10px}.choices button[aria-pressed=true],.key.active{background:var(--green);color:var(--green-ink)}.note,.hint{font-size:.88rem;color:var(--soft)}.hint{margin-block:5px}.sharebox{padding:12px 18px;border-top:1px solid var(--line);background:var(--paper)}.sharebox input{width:min(33rem,100%);padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:5px}.notice{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:12;background:var(--dark);color:white;box-shadow:0 5px 20px #0003;border-radius:10px;padding:9px 16px;font-size:.9rem;max-width:90%;width:max-content}.notice:empty{display:none}
.section{margin-block:34px}.section h2{margin:.25rem 0 .55rem}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:15px}.card{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--surface);text-decoration:none;color:var(--ink);position:relative}.card:hover{border-color:var(--green)}.card .display-ar{font:2.1rem/1.2 Tahoma,Arial,sans-serif;color:var(--green);min-height:40px;align-self:flex-start}.card strong{line-height:1.2}.card small{color:var(--soft);font-size:.84rem}.card .end{align-self:flex-end;margin-top:auto;color:var(--green);line-height:1}.textblock,.article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(17px,3vw,35px)}.article{margin:18px auto 30px}.article h2,.textblock h2{margin:1.4em 0 .45em}.article h2:first-child,.textblock h2:first-child,.article section:first-child>h2:first-child{margin-top:0}.article h3,.textblock h3{margin:1.1em 0 .35em}.article p,.textblock p{margin:.55em 0}.article li,.textblock li{margin:.25em 0}.article ul,.article ol,.textblock ul,.textblock ol{padding-inline-start:1.55rem}.article details,.textblock details{border-top:1px solid var(--line);padding:10px 0}.article summary,.textblock summary{font-weight:680;cursor:pointer}.article table{border-collapse:collapse;font-size:.93rem;width:100%;margin-block:12px}.article th,.article td{padding:8px 10px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}.article th{font-weight:670}.article thead th{background:var(--tint)}caption{font-weight:650;text-align:start;margin-bottom:5px}.table-scroll,.table-wrap,.scrollbox{overflow:auto;max-width:100%}.crumb{font-size:.8rem;color:var(--soft);padding-block-start:18px}.crumb+.hero{padding-top:12px}.crumb a{color:var(--soft)}.related{font-size:.92rem;display:flex;gap:10px 20px;flex-wrap:wrap}.foot{margin-top:42px;background:var(--dark);color:#e8f0e4;padding-block:22px;font-size:.87rem}.foot .wrap{justify-content:space-between;flex-wrap:wrap}.foot a{color:#edf8e9}.foot .links{display:flex;gap:15px;flex-wrap:wrap}.info{padding:12px 16px;background:var(--tint);border-inline-start:3px solid var(--green);border-radius:5px;margin:12px 0}.tester{margin:15px 0;padding:15px;background:var(--tint);border:1px solid var(--line);border-radius:12px}.tester .key{padding-top:12px}.tester .keyrow{margin-block:5px}.testarea{display:block;outline:0;border:2px dashed var(--soft);padding:10px;margin:10px 0;border-radius:8px;background:var(--surface);font-weight:600;cursor:text}.testarea:focus-visible{outline:3px solid var(--accent)}.testresult{padding:8px 0;font-weight:620;min-height:34px}.downloads{flex-wrap:wrap;margin:12px 0}.button{display:inline-flex;align-items:center;padding:8px 13px;border:1px solid var(--line);background:var(--surface);border-radius:8px;color:var(--green);font-weight:650;text-decoration:none}.ar, [lang=ar] bdi{font-family:Tahoma,Arial,sans-serif}.article [lang=ar],.textblock [lang=ar]{font-size:1.17em}.keyguide{font-size:.9rem}.keyguide p{margin:.25rem 0}.accentline{border-top:3px solid var(--accent)}.footnote{font-size:.84rem;color:var(--soft)}.article code,.textblock code{font-family:ui-monospace,monospace;background:var(--tint);padding:1px 4px;border-radius:4px}kbd{font:600 .86em/1.4 ui-monospace,monospace;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1px 4px}
@media(max-width:820px){.mastlinks{gap:12px}.mastlinks a{font-size:.79rem}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.wrap{width:calc(100% - 24px)}.mast .wrap{height:48px}.brand{font-size:1rem;gap:6px}.brand img{width:28px;height:28px}.mastlinks{display:none}.mobilemenu{display:block;font-size:.8rem}.utilities{gap:8px}.theme{width:30px;height:30px;font-size:1.04rem}.hero{padding:15px 0 11px}.kicker{font-size:.61rem}.hero h1{font-size:1.98rem;margin:3px 0 4px}.lead{font-size:.9rem;line-height:1.4}.editor{padding:8px 10px 3px}.out{height:62px;min-height:55px;font-size:1.45rem}.bar .primary{font-size:.83rem;padding:5px 10px}.bar label{font-size:.8rem}.bar label small{display:none}.working{padding:8px 6px 10px}.modes{gap:2px;margin-bottom:7px}.modes button{padding:5px 8px;font-size:.78rem;min-height:32px}.keys,.keyrow{gap:3px}.key{min-height:39px;font-size:1.1rem;border-radius:6px}.extra .key{min-height:32px}.statusbar{padding:7px 10px;line-height:1.33}.section{margin:23px 0}.cards{gap:8px}.card{padding:12px}.card .display-ar{font-size:1.7rem;min-height:30px}.toolbar{padding:3px 10px 12px}.article th,.article td{padding:6px}.crumb{padding-top:11px}.foot{margin-top:25px}.tester{padding:8px}.key small{font-size:.5rem}.grouphead{margin-top:8px}.brand em{display:none}}
@media(max-width:370px){.wrap{width:calc(100% - 16px)}.utilities .lang{padding-inline-start:6px}.keyrow{gap:2px}.modes button{padding:4px 6px}.hero h1{font-size:1.72rem}.cards{grid-template-columns:1fr 1fr}}
@media print{.mast,.foot,.crumb,.opts,.modes,.related,.cards,.notice,.skip,.tester,button,.downloads,.no-print{display:none!important}body{background:#fff;color:#111}.wrap{width:100%}.article,.textblock{border:0;padding:0}.article details>*{display:block}.hero{padding:4px 0}a{color:inherit}.tool{box-shadow:none}.article th,.article td{padding:2px 5px}thead{display:table-header-group}tr{break-inside:avoid}}
.no-js .js-only{display:none!important}.capture{display:block;padding:7px 9px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:6px;margin-top:5px}.article dt{margin-top:12px}.article dd{margin-inline-start:0}.phon-preview:empty:before{content:'…';color:var(--soft)}.speech-actions button:disabled{opacity:.5;cursor:default}.testresult bdi{font:1.4rem Tahoma,Arial,sans-serif}.number-row{margin-top:6px}button:disabled{opacity:.55;cursor:default}.article img{max-width:100%;height:auto}
.extra .key{flex-direction:column;gap:2px}.markname{font:500 .61rem/1.2 system-ui;color:var(--soft)}.key:hover .markname{color:inherit}.symbolrows{margin-top:8px}.symbolrows .key{min-height:34px}.brand img{border-radius:7px}@media(max-width:600px){.markname{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
.reverse{margin:18px 0;padding:15px;border:1px solid var(--line);border-radius:12px}.reverse h3:first-child{margin-top:0}.practice-controls{display:flex;gap:9px 15px;flex-wrap:wrap;align-items:center}.practice-controls label{font-size:.9rem;font-weight:600}.practice-controls select{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:6px}.practice-controls output{background:var(--surface);padding:0 15px;border-radius:8px;font:1.9rem/1.6 Tahoma,Arial,sans-serif}

.speech textarea{resize:vertical;min-height:48px;font:inherit;width:100%}.speech .note{display:block;margin-bottom:3px}
.tester .key.lookup-hit{outline:2px solid var(--green);outline-offset:-3px;box-shadow:inset 0 -4px var(--green)}
.tester .key.lookup-hit:focus-visible{outline:3px solid #c58313;outline-offset:1px}

.modehead{padding:8px 18px;background:var(--tint);border-bottom:1px solid var(--line)}
.modehead .modes{margin:0}.tool>.speech{margin:0;padding:13px 19px;border-bottom:1px solid var(--line);background:var(--surface)}
.recovery,.draft-settings{font-size:.86rem}.recovery{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:6px 0}.recovery small{color:var(--soft)}
.draft-settings{margin:3px 18px 12px;background:var(--tint);padding:10px 12px;border-radius:8px}.draft-settings p{margin:.25em 0 0}
.pending-edit{color:var(--green);font-weight:650}.jump{gap:7px 20px;font-size:.93rem}
.tool[data-active-mode=screen] #keys .keyrow{direction:rtl}
.tool[data-active-mode=physical] #keys,.tester #test-grid{direction:ltr}
.tool .actionrow button:disabled{color:var(--soft);opacity:.55;cursor:default}
@media(min-width:681px) and (max-width:950px){.mastlinks{display:none}.mobilemenu{display:block}}
@media(max-width:680px){
.toolpage>.hero{padding:10px 0 8px}.toolpage>.hero .eyebrow,.toolpage>.hero .kicker{display:none}
.toolpage>.hero h1{font-size:clamp(1.45rem,6vw,1.8rem);margin:0 0 2px}
.toolpage>.hero .lead{line-height:1.32;font-size:.87rem;margin:0}
.modehead{padding:3px 7px}.toolpage .editor{padding:5px 8px 2px}
.toolpage .out{min-height:47px;height:50px;margin:1px 0}.tool>.speech{padding:8px 10px}
.tool[data-active-mode=screen] #keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;direction:rtl}
.tool[data-active-mode=screen] #keys .keyrow{display:contents}
.tool[data-active-mode=screen] #keys .key{min-height:37px;font-size:1.27rem;max-width:none}
.draft-settings{margin-inline:10px}.actionrow{row-gap:5px}
}

.letter-lab{padding:12px 18px}.letter-lab summary{cursor:pointer;color:var(--green);font-size:1rem}.word-preview{display:inline-block;padding:1px 9px;font:1.2rem/1.4 Tahoma,Arial,sans-serif;border-radius:6px;background:var(--tint);margin-inline-start:8px}.loupe-controls{border-inline-start:3px solid var(--line);padding-inline-start:14px;margin-block:1em}.loupe-actions,.loupe-letters{display:flex;flex-wrap:wrap;gap:7px;align-items:stretch}.loupe-actions input{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:5px 9px;min-width:0;max-width:100%;font-size:1.3rem;width:14em}.loupe-letters{justify-content:start;list-style:none;padding:0;margin:.5em 0}.loupe-letters li{padding:0}.loupe-letters button{display:grid;place-items:center;gap:2px;min-width:64px;line-height:1.2;padding:7px 9px}.loupe-letters bdi{font:1.65rem/1.4 Tahoma,Arial,sans-serif}.loupe-letters span,.loupe-letters small{font-size:.77rem}.loupe-letters small{color:var(--soft);font-family:monospace}.letter-lab .note{margin-block:.6em}
@media(max-width:680px){.letter-lab{padding:11px 12px}.loupe-controls{padding-inline-start:8px}}
.case-result:not(:empty){display:block;color:var(--green);font-weight:650}.example-gloss{display:inline-flex;align-items:center;gap:6px;margin-inline-end:8px}.example-gloss small{color:var(--soft);font-size:.87rem}

tr[id^="touche-"]{scroll-margin-block-start:1.5rem}tr[id^="touche-"]:target{background:var(--tint);outline:2px solid var(--green);outline-offset:-2px}.plan-image{margin:1rem 0}.plan-image img{width:100%;max-width:720px;height:auto;display:block;border:1px solid var(--line);border-radius:8px}.plan-image summary{cursor:pointer}.plan-image a{display:inline-block;margin-top:6px}

/* Garde la géométrie du clavier physique tout en rendant les touches utilisables au doigt. */
.plan-pan {display:none}
@media (max-width:600px) {
  #extras .extra {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
  }
  #extras .extra .key {width:100%;min-height:44px;max-width:none}
  #extras .markname {
    position:static;
    width:auto;
    height:auto;
    clip-path:none;
    overflow:visible;
    white-space:normal;
    font-size:.67rem;
  }
  .tool[data-active-mode=physical] #keys,.tester #test-grid {
    grid-template-columns:minmax(560px,1fr);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    padding:3px 2px 7px;
  }
  .tool[data-active-mode=physical] #keys .key,.tester #test-grid .key {min-height:44px;padding-block:15px 3px}
  .tool[data-active-mode=physical] #keys small,.tester #test-grid small {font-size:.67rem}
  .plan-pan {display:block;margin:.45rem 0;font-size:.83rem;color:var(--soft)}
}

.literal-actions,.passage-actions .toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.literal-actions{margin:.45rem 0}.literal-actions button,.passage-actions button{font-size:.85rem}
.passage-actions{min-inline-size:0;margin:.8rem 0;padding:.55rem .8rem;border:1px solid var(--line);border-radius:.65rem}
.passage-actions legend{padding-inline:.3rem;font-weight:650}.passage-actions .note{margin:.4rem 0 0}

.utility-dialog{width:min(31rem,calc(100% - 2rem));max-height:85vh;overflow:auto;box-sizing:border-box;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.25rem;text-align:start}
.utility-dialog::backdrop{background:rgb(20 34 30 / .62)}
.utility-dialog h2{font-size:1.2rem;margin:0 0 .5rem}.utility-dialog p{line-height:1.5}
.utility-dialog textarea{display:block;box-sizing:border-box;width:100%;min-height:4.5rem;margin-block:.75rem;padding:.5rem;background:var(--paper);color:var(--ink);border:1px solid var(--line);font-size:1.15rem}
.dialog-actions{display:flex;flex-wrap:wrap;gap:.5rem}.utility-dialog button{white-space:normal;line-height:1.4}

.device-links{display:flex;flex-wrap:wrap;gap:0 .8rem}.device-links a{font-size:.9rem;display:inline-block;padding-block:.25rem}.phone-reading{margin-block:1rem}.phone-reading summary{cursor:pointer;font-weight:600}
