/* Refonte « Les touches » — base, appliquée aux écrans refaits (body.theme-touches). */
body.theme-touches{background:var(--fond);color:var(--encre);font-family:var(--f-texte)}
body.theme-touches main{padding-bottom:calc(var(--bas-h) + 24px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){body.theme-touches main{padding-bottom:48px}}
.theme-touches :focus-visible{outline:3px solid var(--lien);outline-offset:3px}
/* La page refaite porte sa propre gouttière : l'ancien .wrap ne la double plus (32 px → 16 px). */
body.theme-touches main>.wrap{padding-inline:0;max-width:none}
.theme-touches .t-page{max-width:var(--largeur);margin:0 auto;padding-inline:var(--gouttiere);padding-block:20px 0}
.t-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .t-touche,.t-btn{transition:none!important}
  .t-rond::after{animation:none!important;opacity:1!important}
  .t-nav--bas .t-nav-item{transition:none!important}
}
/* Barre du bas visible (téléphone) : tous les écrans, refaits ou non, gardent leur bas dégagé. */
@media (max-width:899px){body:has(#barre-bas:not([hidden])){padding-bottom:calc(var(--bas-h) + 16px + env(safe-area-inset-bottom,0px))}}

/* En partie, la barre du bas s'efface (téléphone) : « Retour aux jeux » suffit, et le clavier / le plateau gagnent la place. */
@media (max-width:899px){
  body.en-jeu #barre-bas{display:none}
  body.en-jeu.theme-touches main{padding-bottom:24px}
  body.en-jeu:has(#barre-bas:not([hidden])){padding-bottom:16px}
  body.en-jeu .theme-touches .toast,.theme-touches.en-jeu .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 24px)}
}