/* Test de clavier */
.o-test-clavier-mobile { display: none; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--rayon-petit); background: var(--surface-2); color: var(--texte); font-size: .95rem; }
@media (pointer: coarse) and (hover: none) { .o-test-clavier-mobile { display: block; } }
.o-test-clavier-reglages { margin-bottom: 12px; }
.o-test-clavier-reglages select, .o-test-clavier-reglages input { min-height: 40px; }
.o-test-clavier-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.o-test-clavier-compteur { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texte); }
.o-test-clavier-jauge { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 8px; }
.o-test-clavier-jauge i { display: block; height: 100%; width: 0; background: var(--ok-texte); border-radius: 999px; transition: width .2s; }
.o-test-clavier-etat { margin: 0 0 8px; font-size: .92rem; color: var(--texte-2); }
.o-test-clavier.actif .o-test-clavier-etat { color: var(--texte); font-weight: 600; }

.o-test-clavier-cible { border: 2px dashed var(--bord); border-radius: var(--rayon); padding: 8px; background: var(--surface-2); cursor: pointer; outline: none; }
.o-test-clavier-cible:focus-visible, .o-test-clavier.actif .o-test-clavier-cible { border-style: solid; border-color: var(--marque); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marque) 30%, transparent); }
.o-test-clavier-defile { overflow-x: auto; overscroll-behavior-x: contain; }
.o-test-clavier-clavier { position: relative; width: 100%; aspect-ratio: var(--w, 22.5) / var(--h, 6.5); container-type: inline-size; user-select: none; -webkit-user-select: none; }
.o-test-clavier-clavier.f-complet { min-width: 700px; }
.o-test-clavier-clavier.f-tkl { min-width: 580px; }
.o-test-clavier-clavier.f-compact { min-width: 470px; }

.o-test-clavier-touche { position: absolute; padding: .22% .18%; box-sizing: border-box; }
.o-test-clavier-face {
  position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden;
  border: 1px solid var(--bord); border-radius: 5px; background: var(--surface); color: var(--texte);
  box-shadow: 0 2px 0 var(--bord); font-family: var(--police); line-height: 1.05;
  font-size: calc(100cqw / var(--w, 22.5) * .27);
  transition: background-color .12s, transform .06s;
}
.o-test-clavier-face b { position: absolute; font-weight: 600; white-space: nowrap; }
.o-test-clavier-face .seul { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 1.3em; }
.o-test-clavier-face .mot { left: 6%; right: 6%; top: 50%; transform: translateY(-50%); text-align: center; font-size: .82em; font-weight: 500; white-space: normal; overflow-wrap: anywhere; hyphens: none; line-height: 1; }
.o-test-clavier-face .haut { left: 14%; top: 10%; font-size: 1.05em; }
.o-test-clavier-face .bas { left: 14%; bottom: 10%; font-size: 1.15em; }
.o-test-clavier-touche.entree-iso .o-test-clavier-face { clip-path: polygon(0 0, 100% 0, 100% 100%, 16.7% 100%, 16.7% 50%, 0 50%); border-radius: 5px 5px 5px 0; }
.o-test-clavier-touche.entree-iso .mot { left: 20%; top: 25%; }
.o-test-clavier-touche.testee .o-test-clavier-face { background: var(--ok-fond); color: var(--ok-texte); border-color: var(--ok-texte); }
.o-test-clavier-touche.anomalie .o-test-clavier-face { background: var(--erreur-fond); color: var(--erreur-texte); border-color: var(--erreur-texte); }
.o-test-clavier-touche.appuyee .o-test-clavier-face { background: var(--marque); color: var(--sur-marque); border-color: var(--marque-fort); box-shadow: none; transform: translateY(2px); }
.o-test-clavier-touche.nd .o-test-clavier-face { background: repeating-linear-gradient(135deg, var(--surface) 0 4px, var(--surface-2) 4px 8px); color: var(--texte-2); border-style: dashed; box-shadow: none; }

.o-test-clavier-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 14px; padding: 0; list-style: none; font-size: .85rem; color: var(--texte-2); }
.o-test-clavier-legende li { display: flex; align-items: center; gap: 6px; }
.o-test-clavier-legende i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--bord); background: var(--surface); }
.o-test-clavier-legende i.appuyee { background: var(--marque); border-color: var(--marque-fort); }
.o-test-clavier-legende i.testee { background: var(--ok-fond); border-color: var(--ok-texte); }
.o-test-clavier-legende i.anomalie { background: var(--erreur-fond); border-color: var(--erreur-texte); }
.o-test-clavier-legende i.nd { background: repeating-linear-gradient(135deg, var(--surface) 0 3px, var(--surface-2) 3px 6px); border-style: dashed; }

.o-test-clavier-panneaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.o-test-clavier-panneau { background: var(--surface-2); border-radius: var(--rayon-petit); padding: 12px 14px; min-width: 0; }
.o-test-clavier h2 { font-size: 1rem; margin: 0 0 8px; }
.o-test-clavier-grand { display: block; font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; color: var(--texte); margin-bottom: 8px; }
.o-test-clavier-details { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.o-test-clavier-details dt { font-size: .78rem; color: var(--texte-2); }
.o-test-clavier-details dd { margin: 0; font-family: var(--mono); font-size: .92rem; overflow-wrap: anywhere; color: var(--texte); }
.o-test-clavier-anomalies { display: block; color: var(--erreur-texte); font-size: .92rem; }
.o-test-clavier-anomalies.vide { color: var(--ok-texte); }
.o-test-clavier-anomalies ul { margin: 0; padding-left: 1.1em; }
.o-test-clavier-anomalies li + li { margin-top: 4px; }
.o-test-clavier-repet { margin: 8px 0 0; font-size: .88rem; color: var(--texte-2); }

.o-test-clavier-journal { border-top: 1px solid var(--bord); padding-top: 12px; }
.o-test-clavier-tableau { overflow-x: auto; }
.o-test-clavier-tableau table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.o-test-clavier-tableau th, .o-test-clavier-tableau td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.o-test-clavier-tableau th { color: var(--texte-2); font-weight: 600; font-size: .8rem; }
.o-test-clavier-tableau td.code { font-family: var(--mono); }
.o-test-clavier-tableau tr.anomalie td { color: var(--erreur-texte); background: var(--erreur-fond); }
.o-test-clavier-notes { margin-top: 14px; font-size: .92rem; }
.o-test-clavier-notes details { border-top: 1px solid var(--bord); padding: 8px 0; }
.o-test-clavier-notes summary { cursor: pointer; font-weight: 600; }
.o-test-clavier-notes p, .o-test-clavier-notes ul { margin: 8px 0 0; color: var(--texte-2); }
.o-test-clavier-notes .tirage-astuce { text-align: left; }
@media (max-width: 520px) { .o-test-clavier-compteur { margin-left: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .o-test-clavier-face, .o-test-clavier-jauge i { transition: none; } }