/* Exercices du clavier (niveaux 1 et 2) — partagé par clavier.html et clavier2.html */
/* ═══ EXERCICE DU CLAVIER ═══
   Programme écrit avec Claude Desktop (sept. 2026), habillé aux couleurs du site.
   Tout est rangé sous .clavier-app pour ne pas heurter style.css
   (.btn, main, footer existent aussi côté site).
   Les couleurs des ceintures (orange, bleue, marron) sont hors palette AAEE :
   exception assumée, ce sont les couleurs du judo — le sens même de l'exercice.
   Elles ne servent qu'aux dessins de ceinture, jamais à du texte. */
.clavier-app {
  --c-rosepale: rgba(255,188,216,.35);
  --touche: #FFFFFF; --touche-ombre: #D8CFBC;
  max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem;
  font-size: 1.15rem; line-height: 1.45; color: var(--noir);
}
.filet { height: 6px; background: var(--ceinture, var(--or)); transition: background .3s; }

/* Choix de la ceinture */
.clavier-app .ceintures { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.25rem; padding:0; list-style:none; }
.clavier-app .ceintures button { display:flex; align-items:center; gap:.5rem; font:inherit; font-size:1rem;
  background:var(--blanc); color:var(--noir); border:2px solid var(--bord);
  border-radius:10px; padding:.35rem .8rem .35rem .5rem; cursor:pointer; }
.clavier-app .ceintures button[aria-pressed="true"] { border-color:var(--noir); font-weight:700; }
.clavier-app .ceintures button:focus-visible, .clavier-app .btn:focus-visible, .clavier-app label:focus-within { outline:3px solid var(--rose-dark); outline-offset:2px; }
.clavier-app .ceintures svg { width:46px; height:26px; flex:none; }

/* Zone d'exercice */
.clavier-app .exercice { background:var(--blanc); border:1px solid var(--bord); border-radius:14px; padding:1.25rem 1.5rem; }
.clavier-app .entete { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.clavier-app .entete svg { width:90px; height:50px; flex:none; }
.clavier-app .entete h2 { margin:0; font-size:1.35rem; }
.clavier-app .entete .but { margin:.1rem 0 0; color:var(--gris); font-size:1.05rem; }
.clavier-app .progression { margin-left:auto; font-size:1rem; color:var(--gris); }
.clavier-app .points { display:flex; gap:6px; margin-top:.35rem; }
.clavier-app .points span { width:14px; height:14px; border-radius:50%; border:2px solid var(--gris); }
.clavier-app .points span.fait { background:var(--vert); border-color:var(--vert); }

.clavier-app .consigne { margin:1.25rem 0 .5rem; font-size:1.3rem; font-weight:600; min-height:2em; }
.clavier-app .consigne kbd { font:inherit; background:var(--rose); color:var(--noir); border-radius:6px; padding:0 .4rem; border:1px solid var(--rose-dark); }
.clavier-app .modele, .clavier-app .saisie { font-size:clamp(2.2rem,7vw,3.6rem); letter-spacing:.06em; font-weight:600;
  min-height:1.5em; white-space:pre; overflow-x:auto; }
.clavier-app .modele .ok { color:var(--vert); }
.clavier-app .modele .suivant { color:var(--noir); border-bottom:6px solid var(--rose-dark); }
.clavier-app .modele .reste { color:var(--gris); }
.clavier-app .etiquette { font-size:1rem; color:var(--gris); margin:.6rem 0 0; }
.clavier-app .saisie { background:var(--fond); border:2px solid var(--bord); border-radius:10px; padding:.1rem .6rem; min-height:1.6em; }
.clavier-app .saisie .faux { color:var(--brique); text-decoration:underline dotted 3px; }
.clavier-app .saisie .curseur { display:inline-block; width:3px; height:.9em; background:var(--rose-dark); vertical-align:-.1em; animation:clig 1s steps(2) infinite; }
@keyframes clig { 50% { opacity:0; } }

.clavier-app .message { margin:1rem 0 0; padding:.7rem 1rem; border-radius:10px; font-size:1.15rem; min-height:3rem;
  background:var(--c-rosepale); border:2px solid var(--rose); }
.clavier-app .message.bravo { background:transparent; border-color:var(--vert); color:var(--vert); font-weight:700; }
/* Le bouton « Passer à la ceinture … » : poussé à droite, jamais collé au texte.
   S'il manque de place, il passe à la ligne, toujours à droite. */
.clavier-app .message.bravo { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; }
.clavier-app .message.bravo .btn { margin-left:auto; }

/* Clavier dessiné */
.clavier-app .clavier-zone { margin-top:1.25rem; overflow-x:auto; padding-bottom:.5rem; }
.clavier-app .clavier { min-width:720px; display:flex; flex-direction:column; gap:6px; background:var(--bord); padding:10px; border-radius:12px; }
.clavier-app .rang { display:flex; gap:6px; }
.clavier-app .t { flex:1 1 0; min-height:52px; background:var(--touche); border-radius:7px;
  box-shadow:0 3px 0 var(--touche-ombre); display:flex; flex-direction:column; justify-content:center;
  align-items:center; font-size:1.15rem; color:var(--noir); position:relative; line-height:1.1; }
.clavier-app .t small { font-size:.75rem; color:var(--gris); }
.clavier-app .t .alt { position:absolute; right:5px; bottom:3px; font-size:.75rem; color:var(--gris); }
.clavier-app .t.large { font-size:.9rem; }
.clavier-app .t.cible { background:var(--rose-dark); color:#fff; box-shadow:0 3px 0 #7d0f4e; }
.clavier-app .t.cible small, .clavier-app .t.cible .alt { color:#fff; }
.clavier-app .t.appui { transform:translateY(3px); box-shadow:none; }
.clavier-app .t.cible.insiste { animation:pulse .5s ease 2; }
@keyframes pulse { 50% { transform:scale(1.12); } }
@media (prefers-reduced-motion:reduce) { .clavier-app .t.cible.insiste, .clavier-app .saisie .curseur { animation:none; } }

.clavier-app .options { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1rem; font-size:1rem; }
.clavier-app .options label { display:flex; align-items:center; gap:.4rem; cursor:pointer; border-radius:6px; }
.clavier-app .options input { width:22px; height:22px; accent-color:var(--rose-dark); }
.clavier-app .btn { font:inherit; font-size:1.05rem; border-radius:10px; padding:.55rem 1.1rem; cursor:pointer;
  border:2px solid var(--rose-dark); background:var(--rose-dark); color:#fff; }
.clavier-app .btn.discret { background:transparent; color:var(--noir); }
.clavier-app .avert-mobile { display:none; background:var(--c-rosepale); border:2px solid var(--rose); border-radius:10px; padding:.7rem 1rem; margin-bottom:1rem; }
@media (hover:none) and (pointer:coarse) { .clavier-app .avert-mobile { display:block; } }
.clavier-app .note { text-align:center; color:var(--gris); font-size:.95rem; margin-top:1.5rem; }

/* ═══ NIVEAU 2 — les touches qui ont un nom ═══ */
/* Le nom à trouver, en grand : plus long qu'une lettre, il a le droit de passer à la ligne. */
.clavier-app .a-trouver { font-size:clamp(2rem,6vw,3.2rem); font-weight:700; color:var(--noir);
  line-height:1.2; margin:.2rem 0 .3rem; }
.clavier-app .a-trouver .plus { color:var(--rose-dark); padding:0 .3em; }
.clavier-app .indice { font-size:1rem; color:var(--gris); margin:.2rem 0 0; }
/* « Votre touche » : ce qu'on vient de presser, avec tous ses noms */
.clavier-app .derniere { background:var(--fond); border:2px solid var(--bord); border-radius:10px;
  padding:.6rem .9rem; min-height:3.2rem; font-size:1.15rem; }
.clavier-app .derniere b { font-size:1.3rem; }
.clavier-app .derniere .autres { color:var(--gris); }
/* un exercice passé : rond gris, pas vert */
.clavier-app .points span.passe { background:var(--gris-light); border-color:var(--gris-light); }
/* touches spéciales dessinées : le dessin en grand, le nom en petit dessous */
.clavier-app .t .nom { font-size:.72rem; color:var(--gris); margin-top:.1rem; }
.clavier-app .t.cible .nom { color:#fff; }