.dactylo .theorie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.dactylo .theorie-card { background: var(--white); border: 1px solid var(--border2); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.dactylo .theorie-card h3, .dactylo .theorie-key-demo h3 { font-family: var(--fd); font-size: var(--fs-md); color: var(--text); line-height: 1.5; margin-bottom: .75rem; }
.dactylo .theorie-card p, .dactylo .theorie-card ol, .dactylo .theorie-key-demo p { color: var(--text2); font-size: var(--fs-md); line-height: 1.8; margin-bottom: .65rem; }
.dactylo .theorie-card ol { padding-left: 1.4rem; }
.dactylo .theorie-card p:last-child { margin-bottom: 0; }
.dactylo .theorie-num { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--green-bg); color: var(--apple-g); margin-right: .35rem; }
.dactylo .theorie-card .theorie-example { font-size: var(--fs-sm); }
.dactylo .theorie-page kbd { display: inline-block; background: var(--bg2); border: 1px solid var(--border2); border-bottom-width: 3px; border-radius: 5px; padding: .08rem .4rem; color: var(--text); font-family: var(--fm); font-size: .95em; white-space: nowrap; }
.dactylo .theorie-key-demo { display: flex; align-items: center; gap: 1.5rem; background: var(--white); border: 1px solid var(--border2); border-radius: var(--radius); padding: 1.5rem; margin: 1.25rem 0; }
.dactylo .theorie-key { position: relative; width: 130px; height: 130px; flex-shrink: 0; background: var(--bg2); border: 2px solid var(--border2); border-bottom-width: 8px; border-radius: 14px; font-family: var(--fm); font-size: 2.1rem; }
.dactylo .key-upper { position: absolute; top: .6rem; left: 1rem; color: var(--apple-g); }
.dactylo .key-normal { position: absolute; bottom: .65rem; left: 1rem; color: var(--text); }
.dactylo .key-altgr { position: absolute; bottom: .65rem; right: .8rem; color: var(--accent); }
.dactylo .theorie-result strong { font-size: 1.5rem; color: var(--apple-g); }
.dactylo .theorie-practice { padding: 1.25rem; border: 1px solid var(--border2); border-radius: var(--radius); background: var(--white); }
.dactylo .theorie-practice label { display: block; font-weight: 700; color: var(--text); line-height: 1.6; }
.dactylo .theorie-practice p { color: var(--text2); font-size: var(--fs-sm); line-height: 1.7; margin: .65rem 0; }
.dactylo .theorie-practice textarea { width: 100%; resize: vertical; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius); padding: .8rem; font-family: var(--ft); font-size: var(--fs-md); color: var(--text); }
.dactylo .theorie-practice textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dactylo .theorie-practice .theorie-caps-active { color: var(--pink); font-weight: 700; }
@media (max-width: 700px) {
  .dactylo .theorie-grid { grid-template-columns: 1fr; }
  .dactylo .theorie-key-demo { flex-direction: column; align-items: flex-start; }
  .dactylo .theorie-page { padding-left: 1rem; padding-right: 1rem; }
}

/* Même présentation en fenêtres et cartes colorées que la leçon Mots de passe. */
.dactylo.theorie-labo { --labo: var(--apple-g); }
.dactylo .theorie-page .page-breadcrumb { flex-wrap: wrap; }
.dactylo .theorie-shortcuts { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.dactylo .theorie-shortcuts a { padding:.45rem .8rem; border-radius:999px; background:var(--white); border:1px solid color-mix(in srgb,var(--apple-g) 25%,var(--white)); color:var(--text); font-size:.9rem; text-decoration:none; }
.dactylo .theorie-shortcuts a:hover { background:var(--green-bg); }
.dactylo .theorie-page .lecon-main { max-width:900px; margin:0 auto; padding:2rem 2.5rem; }
.dactylo .theorie-content { color:var(--text); line-height:1.75; }
.dactylo .theorie-content > section { --section-color:var(--apple-b); border-bottom:none; padding-bottom:0; margin:3.5rem 0 0; padding-top:1.5rem; border-top:3px solid color-mix(in srgb,var(--section-color) 30%,var(--white)); }
.dactylo .theorie-content > section:first-child { margin-top:0; }
.dactylo .theorie-content > section:nth-child(2) { --section-color:var(--apple-p); }
.dactylo .theorie-content > section:nth-child(3) { --section-color:var(--apple-g); }
.dactylo .theorie-content > section:nth-child(4) { --section-color:var(--apple-o); }
.dactylo .theorie-kicker { color:color-mix(in srgb,var(--section-color) 75%,var(--text)); font-size:.75rem; letter-spacing:.12em; font-weight:800; margin:0 0 .55rem; }
.dactylo .theorie-content .lecon-h2 { scroll-margin-top:calc(var(--nav-height) + 1.5rem); margin-top:0; border-left-color:var(--section-color); }
.dactylo .theorie-grid { margin:1.5rem 0; }
.dactylo .theorie-card { --card-color:var(--apple-b); padding:1.25rem 1.5rem; background:linear-gradient(135deg,color-mix(in srgb,var(--card-color) 7%,var(--white)),var(--white) 75%); border:1px solid color-mix(in srgb,var(--card-color) 20%,var(--white)); border-top:4px solid var(--card-color); border-radius:14px; box-shadow:0 4px 16px color-mix(in srgb,var(--card-color) 5%,transparent); }
.dactylo .theorie-card:nth-child(2), .dactylo .theorie-card:nth-child(6) { --card-color:var(--apple-p); }
.dactylo .theorie-card:nth-child(3) { --card-color:var(--apple-g); }
.dactylo .theorie-card:nth-child(4) { --card-color:var(--apple-o); }
.dactylo .theorie-card:nth-child(5) { --card-color:var(--apple-b); }
.dactylo .theorie-card h3 { font-size:1.1rem; color:color-mix(in srgb,var(--card-color) 70%,var(--text)); }
.dactylo .theorie-num { background:color-mix(in srgb,var(--card-color) 10%,var(--white)); color:color-mix(in srgb,var(--card-color) 70%,var(--text)); }
.dactylo .theorie-key-demo { border:1px solid color-mix(in srgb,var(--apple-p) 25%,var(--white)); border-radius:14px; background:linear-gradient(135deg,color-mix(in srgb,var(--apple-p) 7%,var(--white)),var(--white)); }
.dactylo .theorie-practice { margin:2rem 0 1.5rem; padding:1.75rem; border:1px solid color-mix(in srgb,var(--apple-b) 30%,var(--white)); border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--apple-b) 9%,var(--white)),color-mix(in srgb,var(--apple-p) 5%,var(--white))); box-shadow:0 8px 28px color-mix(in srgb,var(--apple-b) 9%,transparent); }
.dactylo .theorie-practice textarea { display:block; box-sizing:border-box; margin:.5rem 0; padding:1rem; background:var(--white); border:2px solid color-mix(in srgb,var(--apple-b) 25%,var(--white)); border-radius:12px; font:inherit; }
.dactylo .theorie-page :focus-visible { outline:3px solid var(--apple-b); outline-offset:4px; }
@media (max-width:768px) {
  .dactylo .theorie-page .page-win-body, .dactylo .theorie-page .lecon-main { padding:1.25rem; }
}
@media (max-width:600px) {
  .dactylo .theorie-practice { padding:1rem; border-radius:14px; }
}
.dactylo .theorie-page .lecon-meta { display:flex; flex-wrap:wrap; gap:.6rem 1.25rem; margin-top:1.25rem; color:var(--text2); font-size:var(--fs-xs); }

/* Clavier pédagogique : touches et couleurs de la page. */
.dactylo .theorie-keyboard { margin:1.5rem 0; padding:1.25rem; border:1px solid color-mix(in srgb,var(--section-color) 24%,var(--white)); border-top:4px solid var(--section-color); border-radius:14px; background:var(--white); box-shadow:var(--shadow-sm); }
.dactylo .tk-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; color:var(--text); }
.dactylo .tk-heading span { font: .75rem var(--fm); color:var(--text2); }
.dactylo .theorie-keyboard .tk-help { margin:.45rem 0 .75rem; font-size:.85rem; color:var(--text2); }
.dactylo .tk-controls { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.dactylo .tk-choice { --key-color:var(--section-color); display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border:1px solid color-mix(in srgb,var(--key-color) 25%,var(--white)); border-radius:999px; background:var(--white); color:var(--text); font:inherit; font-size:.8rem; cursor:pointer; }
.dactylo .tk-choice:hover, .dactylo .tk-choice[aria-pressed="true"] { background:color-mix(in srgb,var(--key-color) 12%,var(--white)); border-color:var(--key-color); }
.dactylo .tk-choice[aria-pressed="true"] { font-weight:700; }
.dactylo .tk-swatch { width:.55rem; height:.55rem; border-radius:50%; background:var(--key-color); flex:none; }
.dactylo .tk-scroll { overflow-x:auto; border-radius:12px; }
.dactylo .tk-svg { display:block; width:100%; min-width:620px; height:auto; }
.dactylo .tk-case { fill:var(--bg2); stroke:var(--border2); stroke-width:2; }
.dactylo .tk-key-base { fill:var(--border2); }
.dactylo .tk-key-face { fill:var(--white); stroke:var(--border2); stroke-width:1; }
.dactylo .tk-key-label { fill:var(--text2); font:17px var(--fm); }
.dactylo .tk-upper { font-size:12px; }
.dactylo .tk-third { font-size:12px; fill:var(--apple-b); }
.dactylo .tk-modifier { font:12px var(--ft); }
.dactylo .tk-enter-name { font:10px var(--ft); }
.dactylo .is-highlighted .tk-key-face { fill:color-mix(in srgb,var(--key-color) 16%,var(--white)); stroke:var(--key-color); stroke-width:2; }
.dactylo .is-highlighted .tk-key-base { fill:color-mix(in srgb,var(--key-color) 45%,var(--white)); }
.dactylo .is-highlighted .tk-key-label { fill:color-mix(in srgb,var(--key-color) 70%,var(--text)); font-weight:700; }
.dactylo .theorie-keyboard .tk-description { margin:.8rem 0 0; font-size:.85rem; color:var(--text2); min-height:3em; }
@media (max-width:600px) { .dactylo .theorie-keyboard { padding:.85rem; } }

.dactylo .tk-mobile-hint { display:none; }
@media (max-width:600px) { .dactylo .theorie-keyboard .tk-mobile-hint { display:block; margin:.5rem 0 0; font-size:.75rem; color:var(--text2); } }