/* ENVOL — acro, réglages des commandes, panneau météo (s'ajoute à envol.css). */

/* ── ACRO ── */
.acro-bandeau { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; gap: 18px; align-items: center; padding: 10px 18px; background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--r); backdrop-filter: blur(6px); z-index: 5; }
.acro-bandeau small { display: block; color: var(--discret); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.acro-bandeau strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.acro-phase { min-width: 120px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity .15s; text-align: center; }
.acro-phase.on { opacity: 1; }
.acro-alt { color: var(--discret); font-size: 13px; }
.acro-alt.bas { color: var(--chute); font-weight: 700; }
.acro-annonces { position: absolute; left: 14px; top: 230px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; z-index: 5; }
.acro-annonce { display: flex; gap: 12px; align-items: baseline; padding: 8px 16px; background: var(--fond-fort); border: 1px solid rgba(255, 179, 0, .6); border-radius: 12px; transition: opacity 1.2s; }
.acro-annonce strong { font-size: 18px; }
.acro-annonce span { color: var(--discret); }
.acro-annonce b { color: var(--accent); font-variant-numeric: tabular-nums; }
.acro-annonce.bas { border-color: var(--chute); }
.acro-annonce.bas b { color: var(--chute); }
.acro-annonce.vieux { opacity: 0; }
.acro-bilan { margin-top: 14px; }
.acro-bilan h3 { margin: 0 0 4px; }
.acro-bilan h3 strong { color: var(--accent); font-size: 26px; }
.acro-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; max-height: 190px; overflow: auto; }
.acro-liste li { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; padding: 5px 10px; background: rgba(255, 255, 255, .05); border-radius: 8px; }
.acro-liste li em { color: var(--discret); font-style: normal; }
.acro-liste li.bas b { color: var(--chute); }
.btn-fin-rejeu { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 6; }

/* ── Réglages des commandes ── */
.reglages-cmd h3 { margin: 16px 0 6px; font-size: 13px; color: var(--discret); text-transform: uppercase; letter-spacing: .08em; }
.remap-grille { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 10px; align-items: center; }
.remap-grille .t { color: var(--discret); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.remap-grille .nom { font-size: 14px; }
.remap-grille button { justify-content: center; min-width: 110px; padding: 6px 10px; }
.remap-grille button.ecoute { background: var(--accent); color: #1a1200; animation: clignote 1s infinite; }
@keyframes clignote { 50% { filter: brightness(.7); } }
.remap-grille button.conflit { border-color: var(--chute); }
.curseurs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.curseurs label { text-transform: none; letter-spacing: 0; font-size: 13px; }
.curseurs output { color: var(--texte); font-variant-numeric: tabular-nums; }
.pad-etat { display: flex; align-items: center; gap: 8px; color: var(--discret); }
.pad-etat.ok { color: var(--monte); }
.pad-viz { display: flex; gap: 14px; align-items: flex-end; margin: 8px 0; }
.pad-viz .gachette { width: 26px; height: 60px; border: 1px solid var(--ligne); border-radius: 6px; position: relative; overflow: hidden; }
.pad-viz .gachette div { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); height: 0; }
.pad-viz .stick { width: 60px; height: 60px; border: 1px solid var(--ligne); border-radius: 50%; position: relative; }
.pad-viz .stick i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--bleu); left: 23px; top: 23px; }
.aide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ── Panneau météo ── */
.meteo-panneau { margin-top: 12px; padding: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--ligne); border-radius: 12px; }
.meteo-jours { display: flex; gap: 6px; margin-bottom: 8px; }
.meteo-jours button { padding: 4px 10px; font-size: 12px; }
.meteo-jours button.actif { background: var(--accent); color: #1a1200; border-color: transparent; font-weight: 700; }
.meteo-frise { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; margin: 8px 0; }
.meteo-frise button { flex-direction: column; gap: 2px; padding: 5px 0; font-size: 11px; border-radius: 6px; justify-content: flex-end; height: 58px; border-width: 1px; position: relative; }
.meteo-frise button i { display: block; width: 70%; border-radius: 3px 3px 0 0; min-height: 3px; }
.meteo-frise button.volable i { background: var(--monte); }
.meteo-frise button.experts i { background: var(--accent); }
.meteo-frise button.non i { background: var(--chute); }
.meteo-frise button.choisi { border-color: #fff; background: rgba(255, 255, 255, .18); }
.meteo-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.meteo-grille div { display: flex; flex-direction: column; }
.meteo-grille small { color: var(--discret); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.meteo-grille strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.meteo-verdict { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-weight: 700; margin-bottom: 8px; }
.meteo-verdict.volable { background: rgba(46, 229, 157, .12); border: 1px solid rgba(46, 229, 157, .5); }
.meteo-verdict.experts { background: rgba(255, 179, 0, .12); border: 1px solid rgba(255, 179, 0, .5); }
.meteo-verdict.non { background: rgba(255, 82, 82, .12); border: 1px solid rgba(255, 82, 82, .55); }
.meteo-verdict span { font-weight: 400; color: var(--discret); }
.meteo-balises { margin-top: 8px; font-size: 12px; color: var(--discret); }
.meteo-balises b { color: var(--texte); }
#meteo-vol { position: absolute; right: 14px; bottom: 150px; max-width: 280px; font-size: 12px; z-index: 4; padding: 8px 12px; background: var(--fond); border: 1px solid var(--ligne); border-radius: 12px; }
#meteo-vol.volable { border-color: rgba(46, 229, 157, .5); }
#meteo-vol.experts { border-color: rgba(255, 179, 0, .5); }
#meteo-vol.non { border-color: rgba(255, 82, 82, .6); }

#reglages, #resultat.acro { background: #0c131b; }
#reglages { z-index: 40; }

/* ── Calques météo ── */
#btn-calques.actif { border-color: var(--accent); color: var(--accent); }
.calques-panneau { position: absolute; right: 14px; top: 64px; bottom: 14px; width: min(420px, calc(100vw - 28px)); overflow: auto; z-index: 12;
  background: #0c131b; border: 1px solid var(--ligne); border-radius: 16px; padding: 14px 16px; box-shadow: 0 16px 60px rgba(0,0,0,.55); }
.calques-panneau header { display: flex; align-items: center; justify-content: space-between; }
.calques-panneau h2 { margin: 0; font-size: 18px; }
.calques-panneau h3 { margin: 14px 0 6px; font-size: 12px; color: var(--discret); text-transform: uppercase; letter-spacing: .08em; }
.calques-panneau .fermer { padding: 6px; }
.calques-liste { display: grid; gap: 6px; margin-top: 10px; }
.calques-panneau label.calque { flex-direction: row; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--texte);
  padding: 8px 10px; border: 1px solid var(--ligne); border-radius: 10px; cursor: pointer; }
.calques-panneau label.calque:has(input:checked) { border-color: var(--accent); background: rgba(255,179,0,.08); }
.calques-panneau label.calque input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.calques-panneau label.calque span { display: flex; flex-direction: column; gap: 2px; }
.calques-panneau label.calque small { color: var(--discret); font-size: 12px; line-height: 1.35; }
.calques-chiffres, .calques-ciel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.calques-chiffres div, .calques-ciel div { display: flex; flex-direction: column; }
.calques-chiffres small, .calques-ciel small { color: var(--discret); font-size: 11px; }
.calques-chiffres strong, .calques-ciel strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.calques-chiffres em, .calques-ciel em, .calques-balises em { color: var(--discret); font-size: 10px; font-style: normal; }
.calques-balises ul, .calques-sources ul { margin: 0; padding-left: 16px; font-size: 12px; display: grid; gap: 3px; }
.calques-sources summary { cursor: pointer; color: var(--discret); margin-top: 12px; }
.calques-sources .etat-actif { color: var(--monte); } .calques-sources .etat-cle-manquante { color: var(--accent); } .calques-sources .etat-panne { color: var(--chute); }
.calques-tuto { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(79,195,247,.1); border: 1px solid rgba(79,195,247,.4); font-size: 13px; }
.calques-tuto ol { margin: 6px 0; padding-left: 18px; }
.calques-alerte { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,82,82,.12); border: 1px solid rgba(255,82,82,.5); font-size: 13px; }
.calques-texte-briefing:empty { display: none; }