/* ENVOL — téléphone en paysage (hauteur ≤ 500 px). Le tableau de bord de l'ordinateur y couvrait tout l'écran
   et les zones de pouce restaient cachées hors assistance : on garde la vue, on serre tout le reste.
   Règle : l'écran du milieu reste libre ; à gauche/à droite deux zones de pouce (freins), en bas au centre
   l'action ; instruments réduits à vario/altitude/hauteur, en haut à droite. */
/* le lien de l'atelier restait bleu navigateur sur fond sombre (illisible partout) */
#btn-atelier { color: var(--texte); }

@media (max-height: 500px) {
  /* ── menu ── */
  .ecran { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #menu h1, #menu .logo { font-size: 26px !important; }
  #menu, #menu p, #menu button { font-size: 13px; }
  #menu .principal { padding: 10px 16px; font-size: 16px; }
  .univers { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; margin: 2px 0 8px; }
  .carte-univers { padding: 8px 10px; }
  .carte-univers .u-nom { font-size: 15px; }
  .carte-univers .u-resume { font-size: 11px; }
  .carte-univers .ico { width: 26px; height: 26px; }
  .fenetre { padding: 12px 14px; max-height: calc(100vh - 16px); border-radius: 12px; }

  /* ── multijoueur : une pastille, plus un bandeau ── */
  .mj-b { top: 6px !important; right: auto !important; left: 50% !important; transform: translateX(-50%); padding: 4px 10px !important; font-size: 12px !important; min-height: 0 !important; }

  /* ── tableau de bord ── */
  .mission { top: 6px; left: 6px; width: min(240px, 30vw); padding: 6px 10px !important; gap: 2px; font-size: 11px; }
  .mission strong { font-size: 13px; }
  #mission-but, #arrivee, .mission .jauge { display: none; }
  #radio { top: 34px; width: min(380px, 40vw); font-size: 12px; }
  #radio > * { padding: 4px 8px !important; font-size: 12px !important; line-height: 1.3; }
  .instruments { top: 6px; right: 6px; width: 150px; gap: 4px; padding: 6px 8px !important; font-size: 11px; }
  .instruments dl { grid-template-columns: auto auto; row-gap: 0; margin: 0; }
  .instruments dl > :nth-child(n+5) { display: none; }   /* altitude + hauteur sol seulement */
  .instruments .rose { display: none; }
  .instruments dd { font-size: 14px; }
  #vario-val { font-size: 20px !important; }
  .haut-droite { top: 6px; right: 162px; }
  #meteo-vol { top: auto !important; bottom: 8px !important; right: auto !important; left: 104px !important; max-width: 22vw; padding: 4px 8px !important; font-size: 10px !important; line-height: 1.3; border-radius: 8px !important; }
  .menu-tete p, .menu-tete .discret { display: none; }
  #menu .principal + p, .voler-sous { font-size: 12px !important; }
  .btn-pause { width: 36px; height: 36px; }
  #minicarte { width: 92px !important; height: 92px !important; left: 6px; bottom: auto; top: 64px; }
  .commandes { display: none; }
  .outils { right: auto; left: 104px; top: 64px; bottom: auto; flex-direction: column; gap: 4px; }
  .outils button { padding: 6px; min-height: 0; }
  .outils button span { display: none; }
  .question { display: none !important; }
  .invite { bottom: auto; top: 44px; left: 50%; max-width: 38vw; flex-wrap: wrap; white-space: normal; justify-content: center; padding: 6px 10px; gap: 8px; font-size: 12px; border-radius: 10px; }
  .invite button, .invite .touche { min-width: 0; height: 28px; padding: 0 8px; font-size: 12px; }
  .alerte { top: 64px !important; font-size: 13px; padding: 6px 10px !important; }
  .hauteur-pre { top: 6px; right: 140px; bottom: auto; padding: 4px 8px; }
  .hauteur-pre strong { font-size: 20px; }
  .btn-action { width: 72px; height: 72px; bottom: 12px; }
  .btn-action .ico { width: 22px; height: 22px; }
  .btn-action span { font-size: 11px; }
  .tuto { transform: scale(.7); transform-origin: top center; }
  #tuto-consigne { font-size: 18px !important; }

  /* ── les pouces : toujours là sur un écran tactile, même sans assistance ── */
  body.tactile .poignee { display: flex !important; bottom: 0; width: 32vw; height: 62vh; justify-content: flex-end; padding: 0 0 10px; border-radius: 20px 20px 0 0; background: rgba(10, 16, 24, .16); border-style: dashed; }
  body.tactile .poignee.g { left: 0; border-left: 0; } body.tactile .poignee.d { right: 0; border-right: 0; }
  body.tactile .jauge-f { height: 60px; width: 14px; }
  body.tactile .tactile-seul.pave { display: none !important; }
}

/* Téléphone en paysage, deuxième passe : le tableau de bord mangeait la moitié de l'écran et se chevauchait
   (pastille multijoueur sur la consigne, météo sur le pouce gauche, consigne coupée par les instruments).
   En haut à gauche la carte puis la mission sur une ligne ; en haut à droite pause, multijoueur et instruments
   sur 150 px ; au centre la consigne, jamais plus large que l'espace libre ; en bas, rien que les pouces. */
@media (max-height: 500px) {
  #minicarte { width: 78px !important; height: 78px !important; top: 6px !important; left: 6px !important; bottom: auto !important; }
  .mission { top: 6px !important; left: 92px !important; width: auto !important; max-width: 28vw; padding: 5px 10px !important; font-size: 11px !important; line-height: 1.25; border-radius: 10px !important; }
  .mission strong { font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #meteo-nom { display: none !important; }
  .outils { top: 90px !important; left: 6px !important; flex-direction: row !important; gap: 4px !important; }
  .outils button { width: 30px; height: 30px; padding: 0 !important; justify-content: center; border-radius: 9px; }
  .outils .ico { width: 16px; height: 16px; }
  #meteo-vol { display: none !important; }
  .mj-b { left: auto !important; right: 204px !important; transform: none !important; width: 32px; height: 32px; padding: 0 !important; font-size: 0 !important; justify-content: center; border-radius: 10px !important; }
  .mj-b svg { width: 16px; height: 16px; }
  .haut-droite { right: 162px !important; }
  .btn-pause { width: 32px !important; height: 32px !important; }
  .instruments { width: 150px !important; padding: 5px 8px !important; border-radius: 10px !important; }
  .instruments .vario small { font-size: 10px; }
  #vario-val { font-size: 18px !important; }
  #etat-mode { display: none !important; }
  .invite { top: 6px !important; bottom: auto !important; left: calc(92px + 28vw + 8px) !important; right: 246px; transform: none !important; max-width: none !important; width: auto; padding: 5px 10px !important; font-size: 12px !important; gap: 6px !important; border-radius: 10px !important; justify-content: center; }
  .invite button, .invite .touche { height: 24px !important; font-size: 11px !important; }
  #radio { top: auto !important; bottom: 8px; left: 50% !important; transform: translateX(-50%); width: min(340px, 34vw) !important; }
  .tuto { top: 4px !important; transform: scale(.62) !important; transform-origin: top center; }
  .btn-action { width: 64px !important; height: 64px !important; bottom: 8px !important; }
  /* premier vol guidé : la consigne prend le haut ; pas de multijoueur, la pause passe dans le coin */
  body:has(#tuto:not([hidden])) .mj-b { display: none !important; }
  body:has(#tuto:not([hidden])) .haut-droite { right: 6px !important; }
}

/* Téléphone en paysage, troisième passe : les consignes et la pause prenaient l'écran.
   Consigne = une étiquette de 46 % de large en haut, texte de 13 px ; touches clavier masquées
   (les gros boutons tactiles les remplacent). Pause = fenêtre opaque sur tout l'écran, en deux
   colonnes : à gauche reprendre, réglages, niveau d'aide ; à droite comment piloter. */
@media (max-height: 500px) {
  .tuto { left: 50% !important; top: 6px !important; transform: translateX(-50%) !important; width: min(380px, 46vw) !important; padding: 5px 10px 6px !important; border-radius: 10px !important; }
  .tuto-titre { font-size: 9px !important; }
  #tuto-consigne { font-size: 13px !important; line-height: 1.25 !important; margin: 1px 0 2px !important; }
  #tuto-consigne .touche { min-width: 20px !important; height: 18px !important; font-size: 10px !important; margin: 0 2px !important; padding: 0 4px !important; border-radius: 5px !important; }
  .tuto-ligne { font-size: 11px !important; margin: 0 0 3px !important; min-height: 0 !important; }
  .tuto-ligne .touche { min-width: 18px !important; height: 16px !important; font-size: 9px !important; padding: 0 3px !important; }
  .tuto-points { gap: 3px !important; justify-content: center; }
  .tuto-points i { width: 5px !important; height: 5px !important; }
  .je-taide { font-size: 10px !important; }
  .invite { font-size: 11px !important; }
  body.tactile #invite-touches { display: none !important; }

  .fenetre { width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px) !important; padding: 10px 14px !important; border-radius: 12px !important; background: rgba(10, 16, 24, .97) !important; font-size: 12px; }
  .fenetre h2 { font-size: 17px !important; margin: 0 0 6px !important; }
  .fenetre h3 { font-size: 11px !important; margin: 0 0 6px !important; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); }
  .fenetre p { font-size: 12px; margin: 4px 0; }
  .fenetre .boutons { gap: 6px !important; margin-top: 8px !important; }
  .fenetre button, .fenetre .interrupteur { font-size: 12px !important; padding: 6px 10px !important; min-height: 0 !important; border-radius: 9px; }
  .fenetre button .ico { width: 14px; height: 14px; }
  .fenetre .gestes { gap: 5px !important; }
  .fenetre .gestes li { font-size: 12px !important; gap: 8px !important; }
  .fenetre .gestes .touches { min-width: 58px !important; gap: 3px; }
  .fenetre .touche { min-width: 24px !important; height: 24px !important; padding: 0 5px !important; font-size: 11px !important; border-radius: 6px !important; }
  .fenetre .touche svg, .fenetre .touche img { width: 14px !important; height: 14px !important; }
  .fenetre .pastilles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; }
  .fenetre .pastilles label { padding: 5px 6px !important; font-size: 11px !important; }
  .fenetre .pastilles legend { font-size: 10px !important; margin-bottom: 3px !important; }
  .fenetre .menu-musique { zoom: .72; }
  #pause { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 18px; align-content: start; }
  #pause[hidden] { display: none !important; }
  #pause > * { grid-column: 1; }
  #pause > h3 { grid-column: 2; grid-row: 1; }
  #pause > #pause-gestes { grid-column: 2; grid-row: 2 / span 5; align-self: start; }
  body:has(.fenetre:not([hidden])) .mj-b { display: none !important; }
  .fenetre { top: 8px !important; transform: translateX(-50%) !important; }
  .fenetre .pastilles label { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 5px !important; }
  .fenetre .pastilles input, .fenetre .interrupteur input { width: 13px; height: 13px; margin: 0; flex: none; }
  .fenetre .interrupteur { display: inline-flex !important; align-items: center; gap: 6px; }
  /* le vario sur une ligne : « +0.0 m/s » */
  .instruments .vario > div { display: flex; align-items: baseline; gap: 4px; }
  /* accueil et menus : tout un cran plus petit, comme sur ordinateur */
  #menu > * { zoom: .8; }
}

/* Téléphone tenu en portrait pendant le jeu (iPhone, où l'écran ne se verrouille pas) : on demande de le tourner. */
#tourner { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  body.en-jeu #tourner { display: flex; position: fixed; inset: 0; z-index: 9999; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: rgba(6, 10, 16, .94); color: #fff; font: 600 20px/1.3 system-ui, sans-serif; text-align: center; padding: 24px; }
  body.en-jeu #tourner svg { width: 84px; height: 84px; animation: tourner 1.8s ease-in-out infinite; }
}
@keyframes tourner { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* Commandes tactiles discrètes, comme dans les jeux mobiles (PUBG) : les zones de pouce restent
   grandes (on pose le doigt n'importe où dans sa moitié d'écran) mais ne se voient plus ; seul un
   petit repère translucide reste, et il s'allume sous le doigt. Taille, opacité et « masquer » se
   règlent dans Réglages des commandes → Écran tactile (reglages-ui.js : --tac-taille, --tac-op,
   body.tac-masque). */
body.tactile .poignee { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.tactile .poignee .jauge-f, body.tactile .poignee .glyphe { opacity: var(--tac-op, .35); transition: opacity .15s; }
body.tactile .poignee .jauge-f { width: calc(14px * var(--tac-taille, .8)) !important; height: calc(70px * var(--tac-taille, .8)) !important; }
body.tactile .poignee .glyphe { font-size: calc(12px * var(--tac-taille, .8)); }
body.tactile .poignee:active .jauge-f, body.tactile .poignee:active .glyphe { opacity: min(1, calc(var(--tac-op, .35) + .45)); }
body.tactile .btn-action { width: calc(72px * var(--tac-taille, .8)) !important; height: calc(72px * var(--tac-taille, .8)) !important; opacity: calc(var(--tac-op, .35) + .25); }
body.tactile .btn-action:active { opacity: 1; }
body.tactile .btn-action .ico { width: calc(22px * var(--tac-taille, .8)) !important; height: calc(22px * var(--tac-taille, .8)) !important; }
body.tactile .btn-action span { font-size: calc(11px * var(--tac-taille, .8)) !important; }
body.tactile .pave { grid-template-columns: repeat(3, calc(64px * var(--tac-taille, .8))) !important; gap: 6px !important; }
body.tactile .pave button { height: calc(52px * var(--tac-taille, .8)) !important; background: rgba(10, 16, 24, var(--tac-op, .35)) !important; opacity: calc(var(--tac-op, .35) + .3); }
body.tactile .pave button:active { opacity: 1; }
/* masquer : rien ne se voit, tout répond ; le bouton d'action garde un cercle à peine visible */
body.tactile.tac-masque .poignee .jauge-f, body.tactile.tac-masque .poignee .glyphe { opacity: 0 !important; }
body.tactile.tac-masque .poignee:active .jauge-f { opacity: .5 !important; }
body.tactile.tac-masque .btn-action, body.tactile.tac-masque .pave button { opacity: .15; }

/* Téléphone : la radio ne passe plus sur le bouton d'action ni sur la voile. Un seul message, petit,
   en haut sous la consigne ; il s'efface comme avant (principal.js dire). */
@media (max-height: 500px), (pointer: coarse) {
  #radio { top: 44px !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(380px, 46vw) !important; }
  #radio .msg:nth-child(n+2) { display: none !important; }
  #radio .msg { font-size: 11px !important; line-height: 1.25 !important; padding: 4px 8px !important; opacity: .82; }
  #radio .msg .ico { width: 12px !important; height: 12px !important; }
}

/* Écran tactile : rien au milieu. Le bouton d'action (gonfler, courir) passe au bord droit, à mi-hauteur,
   comme le bouton de saut des jeux mobiles ; la consigne du haut s'arrête avant le bouton multijoueur. */
@media (pointer: coarse), (max-height: 500px) {
  body.tactile .btn-action { left: auto !important; right: 14px !important; bottom: 38vh !important; transform: none !important; }
  .invite { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; max-width: min(560px, calc(100vw - 520px)) !important; }
  #radio { max-width: min(380px, calc(100vw - 520px)) !important; }
}

/* ↑ au doigt sous une planche ou un vélo (commandes.js lierTactile) : à gauche du bouton d'action */
.btn-haut { display: none; }
body.tactile.au-sol .btn-haut { display: flex; position: absolute; right: 14px; bottom: calc(38vh + 76px); width: calc(58px * var(--tac-taille, .8)); height: calc(58px * var(--tac-taille, .8));
  flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(10, 16, 24, var(--tac-op, .35)); color: #fff; opacity: calc(var(--tac-op, .35) + .35); touch-action: none; user-select: none; -webkit-user-select: none; }
body.tactile.au-sol .btn-haut:active { opacity: 1; }
body.tactile.au-sol .btn-haut span { font-size: calc(10px * var(--tac-taille, .8)); }
body.tactile.tac-masque .btn-haut { opacity: .15; }

/* Écran tactile : un appui long sur un bouton ou une zone ne sélectionne plus le texte et n'ouvre plus
   le menu copier-coller (il faisait lâcher le bouton tenu) ; les champs de saisie restent sélectionnables. */
body.tactile, body.tactile * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.tactile input, body.tactile textarea, body.tactile [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
body.tactile button, body.tactile .poignee { touch-action: manipulation; }
/* les commandes de jeu au doigt : le navigateur ne prend jamais la main (ni défilement, ni zoom à deux pouces, ni
   doigt tenu annulé) ; les autres boutons gardent « manipulation » pour faire défiler les menus */
body.tactile .poignee, body.tactile .btn-action, body.tactile .btn-haut, body.tactile .pave-tac, body.tactile .pave-tac button,
body.tactile #pieton-tactile, body.tactile #pieton-tactile * { touch-action: none; }

/* Les figures au doigt (commandes.lierFigures) : salto avant, grab, salto arrière, en bas au centre entre
   les deux pouces ; en l'air sous une planche ou des skis, et en voltige. */
.pave-tac { display: none; }
body.tactile.en-air .pave-tac, body.tactile.acro-tac .pave-tac { display: flex; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); gap: 10px; z-index: 6; }
.pave-tac button { width: calc(62px * var(--tac-taille, .9)); height: calc(62px * var(--tac-taille, .9)); padding: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(10, 16, 24, var(--tac-op, .45)); color: #fff; opacity: calc(var(--tac-op, .45) + .4); touch-action: none; }
.pave-tac button span { font-size: calc(9px * var(--tac-taille, .9) + 1px); line-height: 1; white-space: nowrap; }
.pave-tac button.tenu { opacity: 1; background: var(--accent); color: #1a1200; border-color: var(--accent); }