/* raccourcis/rappel.css — rappel discret des raccourcis clavier
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
 /* ---------- Aide discrète : raccourcis clavier ---------- */
 .shortcuts-hint{
 position:fixed; left:50%; bottom:calc(6px * var(--ui-scale-factor)); transform:translateX(-50%); z-index:1;
 display:flex; align-items:center; justify-content:center; gap:calc(6px * var(--ui-scale-factor)); flex-wrap:nowrap;
 width:max-content; max-width:calc(100vw - calc(12px * var(--ui-scale-factor)));
 padding:calc(3px * var(--ui-scale-factor)) calc(5.25px * var(--ui-scale-factor)); border-radius:calc(5.25px * var(--ui-scale-factor));
 color:rgba(255,255,255,.22);
 font-size:calc(8px * var(--ui-scale-factor)); line-height:1.3; letter-spacing:.01em;
 white-space:normal; overflow:hidden;
 pointer-events:none; user-select:none;
 }
 .shortcut-item{white-space:normal; flex-shrink:0;}
 .shortcut-key{
 display:inline-block; margin-right:calc(2.25px * var(--ui-scale-factor)); padding:calc(1px * var(--ui-scale-factor)) calc(3px * var(--ui-scale-factor));
 border:calc(1px * var(--ui-scale-factor)) solid rgba(255,255,255,.13); border-radius:calc(3px * var(--ui-scale-factor));
 background:rgba(255,255,255,.035); color:rgba(255,255,255,.30);
 font-weight:700; font-size:calc(7px * var(--ui-scale-factor));
 }
 @media (max-width:700px){
 .shortcuts-hint{bottom:calc(5.25px * var(--ui-scale-factor));gap:calc(3.75px * var(--ui-scale-factor));font-size:calc(6px * var(--ui-scale-factor));max-width:calc(100vw - calc(7.5px * var(--ui-scale-factor)));}
 .shortcut-key{font-size:calc(6px * var(--ui-scale-factor));padding:calc(1px * var(--ui-scale-factor)) calc(2.25px * var(--ui-scale-factor));}
 }