/* Bureau à distance : la vue en plein écran et le menu flottant façon Bureau à distance Chrome.
   Pensé pour l'iPhone : encoche et barre d'accueil respectées, en vertical comme à l'horizontal. */
:root {
  --g: env(safe-area-inset-left, 0px);
  --d: env(safe-area-inset-right, 0px);
}
html, body.bureau { background: #000; overflow: hidden; height: 100%; overscroll-behavior: none; }
body.bureau { position: fixed; inset: 0; touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* Le bureau occupe la zone sûre : rien sous l'encoche, la barre d'état ni la barre d'accueil. */
#vue, #pave {
  position: fixed; top: var(--haut); bottom: var(--bas); left: var(--g); right: var(--d);
  width: calc(100% - var(--g) - var(--d)); height: calc(100% - var(--haut) - var(--bas));
}
#vue { border: 0; background: #000; }
#pave { z-index: 2; touch-action: none; background: transparent; }
#clavier { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; z-index: -1; }

/* Le bouton flottant se déplace au doigt ; sa position est retenue. */
#poignee {
  position: fixed; z-index: 5;
  right: calc(var(--d) + 12px); bottom: calc(var(--bas) + 16px);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--barre); color: var(--bleu); border: 1px solid var(--bleu-doux);
  box-shadow: 0 2px 14px rgba(0,0,0,.6); touch-action: none; opacity: .85;
}
#poignee.actif-pave { color: var(--rouge); border-color: var(--rouge-doux); }
#poignee.deplace { opacity: 1; transform: scale(1.1); }

/* Menu : feuille en bas quand le téléphone est vertical… */
#menu {
  position: fixed; z-index: 6; left: 0; right: 0; bottom: 0;
  max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px calc(var(--d) + 10px) calc(var(--bas) + 10px) calc(var(--g) + 10px);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--barre); border-top: 2px solid var(--bleu);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: monte .15s ease-out;
}
@keyframes monte { from { transform: translateY(100%); } }
#menu .rang { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#menu .rang:first-child { flex-wrap: nowrap; }
#menu .rang:first-child .cibles { flex: 1; display: flex; gap: 6px; justify-content: center; min-width: 0; }
#menu .titre-rang { width: 100%; font-family: var(--mono); font-size: .64rem; color: var(--doux); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

/* … et panneau latéral quand il est à l'horizontal (hauteur réduite). */
@media (orientation: landscape) and (max-height: 540px) {
  #menu {
    left: auto; top: 0; bottom: 0; width: min(380px, 52vw); max-height: none;
    padding: calc(var(--haut) + 10px) calc(var(--d) + 10px) calc(var(--bas) + 10px) 10px;
    border-top: 0; border-left: 2px solid var(--bleu);
    animation: glisse-g .15s ease-out;
  }
  @keyframes glisse-g { from { transform: translateX(100%); } }
  .cmd { min-height: 36px; padding: 6px 10px; }
}

.cmd {
  flex: none; padding: 8px 12px; min-height: 42px; min-width: 42px; font-family: var(--titre); font-weight: 700; font-size: .82rem;
  letter-spacing: .06em; color: var(--texte); background: rgba(5,217,245,.08); border: 1px solid var(--bleu-fin);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.cmd:active, .cmd.actif { background: var(--bleu); color: var(--sur-bleu); border-color: var(--bleu); }
.cmd:disabled { opacity: .35; }
.cmd.mod.actif { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.cmd.choix[data-mode="pave"] { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.cibles .cmd.actif { background: var(--bleu); color: var(--sur-bleu); }
#menu .aide { margin: 0; font-family: var(--mono); font-size: .7rem; color: var(--doux); }

#message {
  position: fixed; z-index: 7; left: 50%; top: calc(var(--haut) + 12px); transform: translateX(-50%);
  padding: 8px 14px; background: var(--barre); border-left: 3px solid var(--bleu);
  font-family: var(--mono); font-size: .8rem; color: var(--texte); max-width: calc(100vw - var(--g) - var(--d) - 32px);
}
#message.erreur { border-left-color: var(--rouge); color: #ffc4d0; }