/* ===========================================================================
   TACT-1 — LE CLAVIER TACTILE DU HUB (04/08/2026)

   Le PC du salon est un Linux tactile SANS clavier physique : si ce composant
   ne s'ouvre pas, il n'y a aucun clavier système derrière pour rattraper.

   ⚠️  RÈGLE D15 — AUCUNE COULEUR ÉCRITE EN DUR HORS DES TROIS BLOCS DE THÈME.
       Le logiciel sera peut-être revendu : un repreneur doit pouvoir le
       rhabiller en changeant ces trois blocs, et rien d'autre. Toute règle
       ci-dessous parle en `var(--kb-…)`. Si une couleur apparaît un jour
       ailleurs que dans un bloc `[data-theme]`, la règle est cassée.

       Preuve : rechercher `#hex`, `rgb(`, `hsl(` dans ce fichier ne doit
       ramener que des lignes `--kb-…:` des trois blocs de thème.
   =========================================================================== */

/* --- Thème « médaille » : bleu nuit, or, orange. Celui du Hub. ------------ */
.kb[data-theme="medaille"] {
  --kb-fond: #12242f;
  --kb-bordure: rgba(215, 179, 107, .30);
  --kb-ombre: rgba(0, 0, 0, .46);
  --kb-flou: none;
  --kb-muet: #9eabb2;
  --kb-touche-fond: #1d3644;
  --kb-touche-fond-actif: #2b5164;
  --kb-touche-texte: #f4eee5;
  --kb-touche-bordure: rgba(215, 179, 107, .20);
  --kb-action-fond: #26414f;
  --kb-action-texte: #f1dab8;
  --kb-accent: #d7b36b;
  --kb-accent-texte: #12242f;
  --kb-valider-fond: #c96d38;
  --kb-valider-texte: #fff5e9;
}

/* --- Thème « verre » : sombre translucide, le Hub reste lisible derrière. - */
.kb[data-theme="verre"] {
  --kb-fond: rgba(11, 20, 26, .74);
  --kb-bordure: rgba(255, 255, 255, .18);
  --kb-ombre: rgba(0, 0, 0, .52);
  --kb-flou: blur(16px) saturate(140%);
  --kb-muet: rgba(244, 238, 229, .62);
  --kb-touche-fond: rgba(255, 255, 255, .10);
  --kb-touche-fond-actif: rgba(255, 255, 255, .22);
  --kb-touche-texte: #f2f6f8;
  --kb-touche-bordure: rgba(255, 255, 255, .14);
  --kb-action-fond: rgba(255, 255, 255, .16);
  --kb-action-texte: #f2f6f8;
  --kb-accent: rgba(244, 238, 229, .88);
  --kb-accent-texte: #10202a;
  --kb-valider-fond: rgba(85, 181, 138, .88);
  --kb-valider-texte: #08171a;
}

/* --- Thème « clair » : ivoire, pour un salon très éclairé. ---------------- */
.kb[data-theme="clair"] {
  --kb-fond: #f6f1e7;
  --kb-bordure: rgba(44, 36, 25, .18);
  --kb-ombre: rgba(80, 64, 40, .26);
  --kb-flou: none;
  --kb-muet: #7a6c58;
  --kb-touche-fond: #fffdf8;
  --kb-touche-fond-actif: #ebdfca;
  --kb-touche-texte: #2c2419;
  --kb-touche-bordure: rgba(44, 36, 25, .16);
  --kb-action-fond: #eee5d5;
  --kb-action-texte: #4a3d29;
  --kb-accent: #b98a2f;
  --kb-accent-texte: #fffdf8;
  --kb-valider-fond: #c96d38;
  --kb-valider-texte: #fffdf8;
}

/* --- Le bloc ------------------------------------------------------------- */
.kb {
  /* Dimensions par défaut. `kb-grandes` (réglage « Grandes touches ») ne
     change que ces trois valeurs : tout le reste en découle.

     TACT-2 — CE SONT DES MESURES *DE BASE*, MULTIPLIÉES PAR L'ÉCHELLE.
     C'est ce qui fait qu'on réduit le clavier et non sa seule boîte : les
     touches, les lettres et les espacements suivent le même facteur. Toute
     mesure nouvelle doit se dériver de ces trois-là, jamais s'écrire en px. */
  --kb-hauteur-touche-base: 46px;
  --kb-police-base: 16px;
  --kb-espace-base: 6px;

  --kb-echelle: 1;
  --kb-hauteur-touche: calc(var(--kb-hauteur-touche-base) * var(--kb-echelle));
  --kb-police: calc(var(--kb-police-base) * var(--kb-echelle));
  --kb-espace: calc(var(--kb-espace-base) * var(--kb-echelle));

  /* Largeur du clavier détaché à l'échelle 1. Ancré, il reste pleine largeur. */
  --kb-largeur-libre: 920px;

  position: fixed;
  z-index: 200;              /* au-dessus de tout : 70 est le plus haut du Hub */
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kb-espace);
  /* Le bas garde toujours de quoi loger la poignée de coin (18 px) SANS
     recouvrir la dernière rangée : sans ce plancher, la poignée se poserait
     sur « Valider » — la touche par laquelle on referme le clavier. */
  padding: var(--kb-espace) clamp(6px, 1.2vw, 18px) max(calc(var(--kb-espace) + 2px), 22px);
  border-top: 1px solid var(--kb-bordure);
  background: var(--kb-fond);
  box-shadow: 0 -14px 40px var(--kb-ombre);
  backdrop-filter: var(--kb-flou);
  -webkit-backdrop-filter: var(--kb-flou);
  font-family: inherit;
  /* Une touche ne se sélectionne pas et n'ouvre pas de menu contextuel : sur
     un écran tactile, un appui maintenu ne doit rien déclencher d'autre. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* TACT-2 — `none` et non `manipulation` : le pincement à deux doigts est
     A NOUS, c'est lui qui redimensionne le clavier. Laissé au navigateur, il
     zoomerait la page entière. Les appuis simples continuent d'émettre
     `click` normalement. */
  touch-action: none;
}

/* Plus spécifique que `.kb` : sans quoi `display: flex` battrait `hidden`. */
.kb[hidden] { display: none; }

.kb.kb-grandes {
  --kb-hauteur-touche-base: 64px;
  --kb-police-base: 21px;
  --kb-espace-base: 8px;
}

/* --- TACT-2 : le clavier détaché -----------------------------------------
   Ancré, il occupe le bas de l'écran sur toute la largeur — c'est TACT-1.
   Détaché, il devient une boîte posée en (x, y), dont la largeur suit
   l'échelle et ne dépasse jamais la fenêtre. */
.kb.kb-libre {
  right: auto;
  bottom: auto;
  left: var(--kb-x, 0px);
  top: var(--kb-y, 0px);
  width: min(calc(var(--kb-largeur-libre) * var(--kb-echelle)), calc(100vw - 16px));
  border: 1px solid var(--kb-bordure);
  border-radius: 16px;
  box-shadow: 0 18px 48px var(--kb-ombre);
}

/* --- TACT-2 : la poignée de déplacement ----------------------------------
   Visible, large, prise au doigt. `touch-action: none` : sans lui, le geste
   part en défilement de page et le clavier ne bouge pas. */
.kb-poignee {
  flex: 0 0 auto;
  min-width: calc(var(--kb-hauteur-touche) * 1.7);
  min-height: calc(var(--kb-hauteur-touche) * .68);
  border: 1px solid var(--kb-touche-bordure);
  border-radius: 10px;
  color: var(--kb-action-texte);
  background: var(--kb-action-fond);
  font-family: inherit;
  font-size: var(--kb-police);
  letter-spacing: .18em;
  cursor: grab;
  touch-action: none;
}

.kb-poignee:active {
  background: var(--kb-touche-fond-actif);
  cursor: grabbing;
}

/* --- TACT-2 : la poignée de coin, pour la souris --------------------------
   TAILLE FIXE, et volontairement petite : c'est la poignée d'un pointeur, pas
   d'un doigt — au doigt, on pince. Même gabarit que la poignée native d'un
   `textarea`, pour qu'elle se reconnaisse sans explication. Elle NE SUIT PAS
   l'échelle : à l'échelle minimale, une poignée réduite d'autant deviendrait
   invisible. */
.kb-coin {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--kb-touche-bordure);
  border-radius: 6px;
  color: var(--kb-action-texte);
  background: var(--kb-action-fond);
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  opacity: .78;
  cursor: nwse-resize;
  touch-action: none;
}

.kb-coin:active { opacity: 1; }

/* --- TACT-2 : la barre de suggestions -------------------------------------
   Une seule rangée, qui défile si les propositions dépassent. `pan-x` et non
   `none` : ici le doigt doit pouvoir faire glisser la liste. */
.kb-suggestions {
  display: flex;
  gap: var(--kb-espace);
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
}

.kb-suggestions[hidden] { display: none; }

.kb-suggestion {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: calc(var(--kb-hauteur-touche) * .92);
  padding: 0 calc(var(--kb-espace) * 1.8);
  border: 1px solid var(--kb-accent);
  border-radius: 10px;
  color: var(--kb-touche-texte);
  background: var(--kb-touche-fond);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
}

.kb-suggestion:active { background: var(--kb-touche-fond-actif); }

.kb-suggestion strong {
  font-size: calc(var(--kb-police) * .86);
  font-weight: 700;
  line-height: 1.15;
}

.kb-suggestion small {
  color: var(--kb-muet);
  font-size: calc(var(--kb-police) * .66);
  line-height: 1.15;
}

/* --- La barre : bascule de disposition + fermeture ------------------------ */
.kb-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-espace);
}

.kb-langues {
  display: flex;
  gap: var(--kb-espace);
}

.kb-titre {
  flex: 1;
  overflow: hidden;
  color: var(--kb-muet);
  font-size: calc(var(--kb-police) * .68);
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Les rangées --------------------------------------------------------- */
.kb-touches {
  display: flex;
  flex-direction: column;
  gap: var(--kb-espace);
}

.kb-rangee {
  display: flex;
  gap: var(--kb-espace);
  justify-content: center;
}

/* Le pavé numérique n'est pas une suite de rangées mais une grille : les
   colonnes doivent s'aligner d'une ligne à l'autre, sinon le « 5 » se
   décale sous le « 2 ». */
.kb-touches.kb-pave {
  max-width: 520px;
  margin: 0 auto;
}

.kb-touches.kb-pave .kb-rangee {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* --- Les touches --------------------------------------------------------- */
.kb-touche {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--kb-hauteur-touche);
  padding: 0 4px;
  border: 1px solid var(--kb-touche-bordure);
  border-radius: 10px;
  color: var(--kb-touche-texte);
  background: var(--kb-touche-fond);
  font-family: inherit;
  font-size: var(--kb-police);
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: background .08s ease, transform .08s ease;
}

.kb-touche:active {
  background: var(--kb-touche-fond-actif);
  transform: translateY(1px);
}

/* Une touche d'édition (majuscule, effacer) se distingue d'une lettre. */
.kb-touche.kb-service {
  flex: 0 0 auto;
  min-width: calc(var(--kb-hauteur-touche) * 1.35);
  color: var(--kb-action-texte);
  background: var(--kb-action-fond);
  font-size: calc(var(--kb-police) * .8);
}

.kb-touche.kb-espace { flex: 4 1 0; }

.kb-touche.kb-valider {
  flex: 0 0 auto;
  min-width: calc(var(--kb-hauteur-touche) * 2.4);
  border-color: var(--kb-valider-fond);
  color: var(--kb-valider-texte);
  background: var(--kb-valider-fond);
  font-size: calc(var(--kb-police) * .82);
  font-weight: 800;
}

.kb-touche.kb-large { grid-column: span 2; }

/* Bascule de disposition et croix de fermeture : même famille, taille réduite. */
.kb-touche.kb-langue {
  flex: 0 0 auto;
  min-width: calc(var(--kb-hauteur-touche) * 1.1);
  min-height: calc(var(--kb-hauteur-touche) * .68);
  font-size: calc(var(--kb-police) * .78);
}

.kb-touche.kb-langue[aria-pressed="true"] {
  border-color: var(--kb-accent);
  color: var(--kb-accent-texte);
  background: var(--kb-accent);
}

.kb-touche.kb-fermer,
.kb-touche.kb-replacer {
  flex: 0 0 auto;
  min-width: calc(var(--kb-hauteur-touche) * .82);
  min-height: calc(var(--kb-hauteur-touche) * .68);
  color: var(--kb-action-texte);
  background: var(--kb-action-fond);
  font-size: var(--kb-police);
}

/* Majuscule enclenchée : même signal visuel que la disposition choisie. */
.kb-touche.kb-service[aria-pressed="true"] {
  border-color: var(--kb-accent);
  color: var(--kb-accent-texte);
  background: var(--kb-accent);
}

/* --- Écrans étroits ------------------------------------------------------ */
@media (max-width: 640px) {
  .kb {
    --kb-hauteur-touche-base: 40px;
    --kb-police-base: 14px;
    --kb-espace-base: 4px;
  }

  .kb.kb-grandes {
    --kb-hauteur-touche-base: 52px;
    --kb-police-base: 18px;
    --kb-espace-base: 5px;
  }
}