/* ENVOL — le menu de départ : univers, activités, musique, chargement.
   Le jeu s'ouvre sur ce menu ; tant que le relief charge, un ciel dessiné remplace la 3D. */
#menu [hidden], .musique [hidden] { display: none !important; }

body.tot { background:
  linear-gradient(180deg, rgba(8, 14, 22, 0) 55%, rgba(8, 14, 22, .9) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 500' preserveAspectRatio='none'%3E%3Cpath d='M0 330 L140 260 L260 300 L420 170 L520 210 L610 120 L660 135 L700 60 L760 70 L790 140 L900 210 L1040 160 L1180 240 L1320 190 L1460 260 L1600 230 L1600 500 L0 500Z' fill='%23162330'/%3E%3Cpath d='M0 400 L200 340 L380 380 L560 300 L760 360 L980 310 L1200 370 L1400 330 L1600 380 L1600 500 L0 500Z' fill='%230e1822'/%3E%3C/svg%3E") bottom / 100% 55% no-repeat,
  linear-gradient(180deg, #1d3b5a 0%, #4f7ea3 45%, #e9b57a 78%, #f3cf95 100%); }
body.tot #scene { opacity: 0; }

.menu-tete { align-items: center !important; }
.menu-tete .menu-musique { margin-left: auto; }

.menu-charge { display: flex; align-items: center; gap: 12px; margin: -6px 0 16px; color: var(--discret); font-size: 13px; max-width: 1180px; }
.menu-charge .piste { flex: 0 0 min(320px, 45vw); height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.menu-charge #charge-barre { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #ffd54f); transition: width .3s; }
body.attente .menu-charge { color: var(--accent); font-weight: 600; }
/* départ demandé avant la fin du chargement : la barre vient en bas de l'écran, au-dessus du bouton */
body.attente #menu-charge:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; margin: 0; max-width: none;
  padding: 12px 14px; border-radius: 12px; background: rgba(11, 17, 24, .94); border: 1px solid rgba(255, 179, 0, .5); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); cursor: pointer; }

/* ── les univers ── */
.univers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; max-width: 1180px; margin: 4px 0 14px; }
.carte-univers { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left;
  padding: 14px 16px; border-radius: var(--r); background: var(--fond); border: 1px solid var(--ligne); color: var(--texte); cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.carte-univers:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); }
.carte-univers .ico { grid-row: 1 / 4; width: 38px; height: 38px; color: var(--accent); }
.carte-univers .u-nom { font-size: 19px; font-weight: 700; letter-spacing: .01em; }
.carte-univers .u-resume { color: var(--discret); font-size: 13px; line-height: 1.35; }
.carte-univers small { color: #cfd8e3; font-size: 12px; }
.carte-univers.actif { background: linear-gradient(135deg, rgba(255, 179, 0, .22), rgba(255, 179, 0, .06)); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
@media (max-width: 760px) {
  .univers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .carte-univers { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 10px 6px; }
  .carte-univers .ico { grid-row: auto; width: 28px; height: 28px; }
  .carte-univers .u-resume, .carte-univers small { display: none; }
  .carte-univers .u-nom { font-size: 15px; }
}

/* ── les activités ── */
.carte-mission { display: grid !important; grid-template-columns: auto 1fr; gap: 14px !important; align-items: start !important; }
.carte-mission .m-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); color: var(--accent); }
.carte-mission .m-ico .ico { width: 26px; height: 26px; }
.carte-mission .m-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.carte-mission.actif .m-ico { background: var(--accent); color: #1a1200; }
#menu[data-univers="loisirs"] .liste-missions, #menu[data-univers="montagne"] .liste-missions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* ── la musique ── */
.musique { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 999px; background: var(--fond); border: 1px solid var(--ligne); max-width: min(460px, 92vw); }
.musique button { width: 32px; height: 32px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 0; color: var(--texte); cursor: pointer; }
.musique .m-onoff { background: var(--accent); color: #1a1200; }
.musique.coupee .m-onoff { background: rgba(255, 255, 255, .08); color: var(--discret); }
.musique .ico { width: 16px; height: 16px; }
.musique .m-titre { font-size: 12px; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; max-width: 260px; }
.musique .m-titre b { color: var(--texte); font-weight: 600; }
.musique .m-titre a { color: var(--discret); }
.musique .m-volume { width: 70px; accent-color: var(--accent); }
#pause .musique { margin: 4px 0 12px; }
@media (max-width: 600px) { .musique .m-volume { display: none; } .musique .m-titre { max-width: 150px; } }

/* ── au sol (skate, vélo, VTT, ski, luge, tubing) : ni vario, ni finesse, ni avis de vol ── */
body.au-sol #hud .bloc.instruments, body.au-sol #hud .bloc.commandes, body.au-sol #meteo-vol, body.au-sol #btn-action { display: none !important; }

/* le premier vol guidé et le planificateur ne concernent que l'univers Voler */
#menu:not([data-univers="voler"]) .accueil-guide { display: none; }

/* ── moins d’affichage au milieu (25/10) : le chat de l’instructeur n’a rien à faire sous une
   planche, la barre du piéton se réduit à l’essentiel après 8 s ── */
body.au-sol .question { display: none !important; }
#pieton.discret { font-size: 12px !important; padding: 5px 12px !important; opacity: .8; }

/* ── la vue d'abord (31/10, « ça détruit la view ») : ce qui ne change pas se range ──
   la consigne du bas s'efface après 8 s (elle revient dès qu'elle change), le but de la mission se
   replie sous son titre (un clic sur la carte le rouvre), la radio est plus légère, la barre du wake
   ne garde que sa ligne d'état */
.invite { transition: opacity .6s ease; }
.invite.repliee { opacity: 0; }
body.mission-repliee #mission-but { display: none; }
.mission { cursor: pointer; }
#radio .msg { background: rgba(14, 20, 28, .58); backdrop-filter: none; font-size: 13px; padding: 6px 10px; }
#pieton.discret small, #pieton.discret br { display: none; }
@media (prefers-reduced-motion: reduce) { .invite { transition: none; } }