/* Accueil : titre à gauche, carte du vol rejoué à droite (Pages/Shared/_CarteVol.cshtml, wwwroot/vol.js). Chargé par l'accueil
   seulement ; reprend les couleurs de site.css. Sans JavaScript, la carte montre le bilan du vol, immobile. */
.accueil-haut { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
.accueil-haut .heros { max-width: none; }
.accueil-haut .heros h1 { font-size: clamp(2.5rem, 4.9vw, 4.3rem); }

.vol {
    position: relative; width: 100%; max-width: 460px; justify-self: end; margin-top: 28px;
    background: var(--surface); border: 1px solid var(--trait-fort); border-radius: 16px; padding: 18px 18px 16px;
    box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .95), 0 0 0 6px rgba(255, 255, 255, .02);
    animation: monte .9s var(--courbe) .25s both;
}
.vol-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.vol-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .78rem; color: var(--discret); }
.vol-etat { display: inline-flex; align-items: center; gap: 7px; }
.vol-point { width: 7px; height: 7px; border-radius: 50%; background: var(--succes); flex: none; }
.vol.en-vol .vol-point { animation: pouls-vert 2s ease-out infinite; }
@keyframes pouls-vert {
    0% { box-shadow: 0 0 0 0 rgba(99, 196, 135, .55); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(99, 196, 135, 0); }
}
.vol-route { margin: 4px 0 12px; font-family: var(--titre); font-size: 1.7rem; font-weight: 600; color: #fff; letter-spacing: .01em; }
.vol-fleche { color: var(--accent); }

/* Scène : décollage, carte ou bilan, l'un par-dessus l'autre ; bulles ATC et copilote par-dessus */
/* Hauteur : 212 px au moins, davantage si le bilan en demande (carte étroite) ; colonne bornée pour ne jamais déborder. */
.vol-scene { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 212px; border-radius: 12px; overflow: hidden; background: #0b1422; }
.vol-ecran { grid-area: 1 / 1; min-width: 0; min-height: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.vol-ecran.actif { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.vol-ecran svg { display: block; width: 100%; height: 100%; }

.vol-piste { fill: #1b2738; }
.vol-axe { stroke: rgba(233, 238, 245, .5); stroke-width: 1.5; stroke-dasharray: 10 9; fill: none; }
.vol-seuil { stroke: rgba(233, 238, 245, .55); stroke-width: 2; fill: none; }
.vol-numero { fill: rgba(233, 238, 245, .6); font: 600 13px var(--mono); }
.vol-ombre { fill: rgba(0, 0, 0, .45); }
.vol-silhouette { fill: #fff; }
.vol-badin { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; align-items: center; gap: 10px;
    font: 600 .8rem var(--mono); color: var(--doux); font-variant-numeric: tabular-nums; }
.vol-badin span[data-badin-valeur] { min-width: 4.2em; text-align: right; }
.vol-badin-barre { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(170, 190, 220, .14); }
.vol-badin-barre i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--accent); }
.vol-vr { position: absolute; left: 68.75%; top: -18px; transform: translateX(-50%); font-size: .68rem; font-weight: 600; color: var(--discret); }
.vol-vr::after { content: ""; position: absolute; left: 50%; top: 15px; width: 1px; height: 13px; background: var(--discret); }

.vol-cote { fill: none; stroke: rgba(170, 190, 220, .14); stroke-width: 1.5; }
.vol-relief { fill: none; stroke: rgba(170, 190, 220, .06); stroke-width: 34; }
.vol-route-prevue { fill: none; stroke: rgba(240, 128, 95, .35); stroke-width: 2; stroke-dasharray: 4 5; }
.vol-route-volee { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.vol-depart { fill: var(--accent); }
.vol-arrivee { fill: #5fc4d0; }
.vol-terrain { fill: var(--doux); font: 600 11px var(--mono); }
.vol-distance { fill: var(--discret); font: 11px var(--sans); }

/* Bilan après l'atterrissage */
.vol-bilan { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 10px 18px; padding: 14px 16px 12px; }
.vol-note { display: grid; grid-template-columns: auto auto; align-content: center; align-items: baseline; column-gap: 4px; }
.vol-note-chiffre { font-family: var(--titre); font-size: 3.1rem; line-height: 1; color: var(--succes); }
.vol-note-sur { color: var(--discret); font-size: .85rem; }
.vol-note-texte { grid-column: 1 / -1; margin-top: 4px; color: var(--doux); font-size: .78rem; }
.vol-faits { margin: 0; align-self: center; display: grid; gap: 5px; font-size: .8rem; }
.vol-faits div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--trait); padding-bottom: 4px; }
.vol-faits dt { color: var(--discret); }
.vol-faits dd { margin: 0; color: var(--texte); font-variant-numeric: tabular-nums; text-align: right; }
.vol-faits dd span { color: var(--discret); margin-left: 4px; }
.vol-paie { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--trait-fort); padding-top: 9px; }
.vol-paie-montant { font-family: var(--titre); font-size: 1.45rem; color: var(--accent); }
.vol-paie-detail { color: var(--discret); font-size: .76rem; }
.vol-bilan.actif > * { animation: monte .6s var(--courbe) both; }
.vol-bilan.actif > :nth-child(2) { animation-delay: .12s; }
.vol-bilan.actif > :nth-child(3) { animation-delay: .24s; }

/* Bulles : ATC (chantier en cours) en bas, annonces du copilote en haut à droite */
.vol-bulle {
    position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border-radius: 10px; font-size: .8rem; line-height: 1.35;
    background: rgba(10, 17, 28, .9); border: 1px solid var(--trait-fort); color: var(--texte);
    opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s var(--courbe); pointer-events: none;
}
.vol-bulle.visible { opacity: 1; transform: none; }
.vol-atc { left: 10px; right: 10px; bottom: 10px; }
.vol-atc b { color: #5fc4d0; font-weight: 600; }
.vol-atc.pilote b { color: var(--accent-clair); }
.vol-annonce { left: 10px; top: 34px; max-width: 70%; border-color: rgba(240, 128, 95, .45); }
.vol-annonce .vol-bulle-ligne { font-weight: 600; }
.vol-bulle-tag { font-size: .66rem; letter-spacing: .04em; color: var(--discret); }
.vol-atc .vol-bulle-tag::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; vertical-align: 1px; border-radius: 50%; background: var(--alerte); }

/* Phases et compteurs */
.vol-phases { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 12px 0 10px; padding: 0; }
.vol-phases li {
    text-align: center; font-size: .68rem; padding: 4px 2px; border-radius: 999px; border: 1px solid var(--trait-fort);
    color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s, background .3s, border-color .3s;
}
.vol-phases li.fait { color: var(--doux); }
.vol-phases li.actif { color: var(--accent); background: rgba(240, 128, 95, .14); border-color: rgba(240, 128, 95, .5); }
.vol-compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vol-compteurs div { background: var(--surface-2); border-radius: 8px; padding: 7px 10px; }
.vol-compteurs div > span { display: block; font-size: .7rem; color: var(--discret); }
.vol-compteurs b { font-size: 1.05rem; font-weight: 600; color: var(--texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vol-rejouer {
    position: absolute; right: 18px; top: 52px; background: none; border: 0; color: var(--discret); font: inherit; font-size: .76rem;
    cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.vol-rejouer::before { content: "↻ "; }
.vol-rejouer:hover { color: var(--texte); }

@media (max-width: 960px) {
    .accueil-haut { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .vol { justify-self: start; max-width: 520px; }
}
@media (max-width: 420px) {
    .vol { padding: 14px 12px 12px; }
    .vol-bilan { gap: 8px 12px; padding: 12px; }
    .vol-note-chiffre { font-size: 2.5rem; }
    .vol-phases li { font-size: .62rem; }
}