/* Outil · Test clavier et manette (Keyboard & gamepad test) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : cl- (clavier), mn- (manette)
   En haut, centré : Clavier / Manette. À gauche : le dessin (zone fixe), l'info, Effacer ou Vibrer. À droite : le détail
   (dernière touche et touches hors dessin ; ou axes et boutons numérotés). Les deux onglets sont deux pages (comme Dates). */
.cl .outil-fixe { align-items: stretch; }
.cl-haut { display: flex; justify-content: center; }
.cl-haut .seg { width: min(100%, 380px); }
@media (min-width: 960px) {
  .cl.outil-colonnes { grid-template-rows: auto minmax(0, 1fr); row-gap: 18px; }
  .cl-haut { grid-column: 1 / -1; margin-top: 4px; }
}
.cl[data-onglet="clavier"] [data-page="manette"], .cl[data-onglet="manette"] [data-page="clavier"] { display: none; }
.cl-details { display: flex; }
.cl-zone { aspect-ratio: 600 / 330; display: grid; place-items: center; }   /* la même place pour le clavier et la manette */

/* Le clavier */
.cl-svg { width: 100%; height: 100%; display: block; }
.cl-touche rect { fill: rgba(242, 240, 235, .03); stroke: var(--filet); stroke-width: 1; transition: fill .25s var(--courbe), stroke .25s var(--courbe); }
.cl-touche text { fill: var(--texte2); font: 500 11px var(--mono); pointer-events: none; transition: fill .25s var(--courbe); }
.cl-touche.teste rect { fill: rgba(242, 240, 235, .16); stroke: rgba(242, 240, 235, .45); }
.cl-touche.teste text { fill: var(--papier); }
.cl-touche.appuye rect { fill: var(--orange); stroke: var(--orange); transition: none; }
.cl-touche.appuye text { fill: var(--noir); transition: none; }

/* La manette : traits fins, l'orange seulement pour ce qui est appuyé */
.mn-zone-dessin { position: relative; width: 100%; height: 100%; }
.mn-svg { width: 100%; height: 100%; display: block; transition: opacity .4s var(--courbe); }
.mn-svg.mn-absente { opacity: .3; }
.mn-corps { fill: #1b1815; stroke: rgba(242, 240, 235, .22); stroke-width: 1.5; }
.mn-b { fill: rgba(242, 240, 235, .05); stroke: rgba(242, 240, 235, .32); stroke-width: 1.2; transition: fill .12s, stroke .12s; }
.mn-b.appuye { fill: var(--orange); stroke: var(--orange); }
.mn-epaule { fill: none; stroke: rgba(242, 240, 235, .3); stroke-width: 13; stroke-linecap: round; }
.mn-epaule.appuye { fill: none; stroke: var(--orange); }
.mn-g { fill: rgba(242, 240, 235, .04); stroke: rgba(242, 240, 235, .25); stroke-width: 1.2; }
.mn-gv { fill: var(--orange); }
.mn-cuvette { fill: rgba(0, 0, 0, .35); stroke: rgba(242, 240, 235, .14); stroke-width: 1; }
.mn-chapeau { fill: #2a2622; stroke: rgba(242, 240, 235, .4); }
.mn-chapeau-creux { fill: none; stroke: rgba(242, 240, 235, .14); stroke-width: 1; pointer-events: none; }
.mn-croix-fond { fill: #2a2622; }
.mn-croix { stroke: none; fill: transparent; }
.mn-croix.appuye { fill: var(--orange); }
.mn-home-creux { fill: none; stroke: rgba(242, 240, 235, .35); stroke-width: 1.2; pointer-events: none; }
.mn-lettre { fill: rgba(242, 240, 235, .7); font: 600 12px var(--mono); pointer-events: none; }
.mn-b.appuye + .mn-lettre { fill: var(--noir); }
.mn-repere { fill: var(--texte2); font: 600 10.5px var(--mono); letter-spacing: .06em; pointer-events: none; }
.mn-zone { display: none; }
.mn-attente { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; text-align: center; font: var(--valeur); letter-spacing: .06em; color: var(--papier); }
.mn-attente[hidden] { display: none; }

.cl-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.cl-actions { display: flex; justify-content: center; }
.cl-actions .pastille { cursor: pointer; }
.cl-actions .pastille:hover { translate: none; }
.cl-actions .pastille:disabled { opacity: .3; cursor: default; }

/* Le détail */
.cl-details { flex-direction: column; gap: 10px; }
.cl-grande { height: 64px; display: flex; align-items: center; font: 700 34px/1 var(--display); letter-spacing: -.02em; color: var(--peche); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-rangee { cursor: default; height: 42px; }
.cl-rangee .val { font-family: var(--mono); font-size: 13px; white-space: pre; }
.cl-autres { min-height: 34px; height: 76px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.cl-puce { padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); font: 500 11.5px/1 var(--mono); color: var(--papier); height: fit-content; }
.cl-rien { color: var(--texte2); font: var(--valeur); }
.cl-cache { visibility: hidden; }
.mn-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; height: 140px; align-content: start; overflow-y: auto; }
.mn-num { --v: 0; height: 38px; border-radius: 10px; display: grid; place-items: center; font: 500 12px var(--mono); color: var(--texte2);
  box-shadow: inset 0 0 0 1px var(--filet); background: linear-gradient(to top, rgba(255, 90, 31, .5) calc(var(--v) * 100%), transparent 0); }
.mn-num.appuye { background: var(--orange); color: var(--noir); box-shadow: none; }
.cl [data-choix-manette] { min-height: 36px; }
.cl-touche path { fill: rgba(242, 240, 235, .03); stroke: var(--filet); stroke-width: 1; transition: fill .25s var(--courbe), stroke .25s var(--courbe); }
.cl-touche.teste path { fill: rgba(242, 240, 235, .16); stroke: rgba(242, 240, 235, .45); }
.cl-touche.appuye path { fill: var(--orange); stroke: var(--orange); transition: none; }
.cl-schema { margin-bottom: 8px; }
[data-gachette].appuye .mn-repere { fill: var(--noir); }