/* Ciel de Courroux — feuille de style unique.
 *
 * Parti pris : l'heure entre chien et loup, celle où l'on sort justement
 * regarder passer les avions. La page reprend le dégradé d'un vrai ciel de fin
 * de journée — heure bleue au zénith, golden hour vers l'horizon. Ni page
 * blanche, ni nuit noire.
 *
 * Les deux moitiés de ce ciel se partagent le travail :
 *   - le bleu habille l'interface (liens, village, cercles de distance) ;
 *   - le doré est réservé aux appareils en approche vers Bâle — ceux qu'on
 *     entend passer. Il n'est jamais décoratif.
 *
 * Typographie du blog : Manrope pour les titres, Newsreader pour la prose,
 * servies localement (vendor/polices.css) — aucune requête vers un tiers.
 * Les données chiffrées restent en chasse fixe : elles s'alignent en colonnes.
 *
 * Mobile d'abord : le cas d'usage principal, c'est dehors, en levant les yeux.
 */

:root {
  /* Le ciel, du zénith vers l'horizon. */
  --ciel-zenith:  #4a5c82;
  --ciel-haut:    #5d6280;
  --ciel-bas:     #8d6d58;
  --ciel-horizon: #a87a54;

  --fond: linear-gradient(170deg,
            var(--ciel-zenith) 0%,
            var(--ciel-haut) 38%,
            var(--ciel-bas) 76%,
            var(--ciel-horizon) 100%);

  /* Surfaces : de la lumière posée sur le ciel, tiède et translucide. */
  --panneau: rgba(255, 247, 238, 0.11);
  --panneau-haut: rgba(255, 247, 238, 0.17);
  --bordure: rgba(255, 247, 238, 0.22);

  --accent: #a9cdec;          /* heure bleue — l'interface */
  --accent-vif: #c8e2f7;
  --accent-doux: rgba(169, 205, 236, 0.18);

  --dore: #f5b95f;            /* golden hour — les approches vers Bâle */
  --dore-doux: rgba(245, 185, 95, 0.18);

  --nuit: #26304a;            /* texte posé sur le doré */
  --titre: #fdf6ec;
  --texte: #f0e7dc;
  --sourdine: #d5c6b6;

  --titres: "Manrope", "Inter", system-ui, sans-serif;
  --prose: "Newsreader", Georgia, serif;
  --donnees: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
             "Liberation Mono", monospace;

  --rayon-carte: 14px;
  --rayon-bouton: 8px;
  --transition: 0.25s ease;
  --gouttiere: 1.25rem;
  /* Fluide : la page suit la largeur de l'écran au lieu de se tasser au
     centre, tout en gardant une marge de respiration sur les grands écrans. */
  --largeur: min(1680px, 94vw);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  background-attachment: fixed;
  color: var(--texte);
  font-family: var(--prose);
  font-size: 1.05rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--titres);
  color: var(--titre);
  font-weight: 700;
  line-height: 1.25;
}

a { color: var(--accent-vif); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #ffffff; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--dore);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- En-tête ---------- */

.entete {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem var(--gouttiere) 1.1rem;
}

.entete h1 {
  margin: 0;
  font-size: clamp(1.9rem, 7vw, 2.7rem);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(38, 48, 74, 0.35);
}

/* Les coordonnées de référence : l'identité du lieu, en chasse fixe. */
.coordonnees {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.55rem 0 0;
  font-family: var(--donnees);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--sourdine);
  line-height: 1.7;
}

.coordonnees .separateur { opacity: 0.4; padding: 0 0.55em; }

.etat { display: inline-flex; align-items: center; gap: 0.45em; }
.etat::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-doux);
}
.etat[data-etat="degraded"]::before,
.etat[data-etat="hors-ligne"]::before {
  background: var(--dore);
  box-shadow: 0 0 0 3px var(--dore-doux);
}

/* ---------- Bandeau d'introduction ---------- */

.bandeau {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.intro {
  max-width: 72ch;
  margin: 0 0 1.4rem;
  font-size: 1.05rem;
  color: var(--texte);
}
.intro strong { color: var(--titre); font-weight: 500; }

/* ---------- Panneau « Juste au-dessus » ---------- */

.colonnes {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.panneau { padding: 0.4rem 0 0; }

.panneau-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  font-family: var(--titres);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--titre);
}
.panneau-titre .compteur {
  font-family: var(--donnees);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--sourdine);
  font-weight: 400;
  text-transform: none;
}

.bandes { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }

/* Une fiche de lumière par appareil proche. */
.bande {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.9rem;
  padding: 0.8rem 1rem;
  background: var(--panneau);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon-carte);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--donnees);
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--texte);
  transition: all var(--transition);
}
.bande:hover {
  background: var(--panneau-haut);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(38, 48, 74, 0.3);
}

.bande[data-approche="oui"] {
  border-left-color: var(--dore);
  background: var(--dore-doux);
}
.bande[data-approche="oui"]:hover { box-shadow: 0 8px 22px rgba(245, 185, 95, 0.28); }

.bande-callsign {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--titre);
}
.bande-distance {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--titre);
}
.bande-route {
  grid-column: 1;
  font-size: 0.82rem;
  color: var(--sourdine);
}
.bande-altitude {
  grid-column: 2;
  font-size: 0.82rem;
  color: var(--sourdine);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fleche { color: var(--accent-vif); padding: 0 0.4em; }

.vide {
  font-family: var(--prose);
  font-size: 1rem;
  color: var(--sourdine);
  margin: 0;
  padding: 1rem 1.2rem;
  background: rgba(255, 247, 238, 0.06);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon-carte);
}

/* ---------- Carte ---------- */

.carte-cadre { padding: 1.3rem 0 0; }

#carte {
  height: 62vh;
  min-height: 320px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  background: rgba(38, 48, 74, 0.35);
  box-shadow: 0 10px 30px rgba(38, 48, 74, 0.25);
  z-index: 0;
}

/* La carte est en plein jour : on la couche légèrement dans la lumière du
   soir pour qu'elle ne troue pas la page, sans nuire à sa lisibilité. */
.leaflet-tile-pane { filter: saturate(0.82) brightness(0.94) sepia(0.12); }

.leaflet-control-zoom a {
  background: rgba(38, 48, 74, 0.88) !important;
  color: var(--titre) !important;
  border-color: var(--bordure) !important;
}
.leaflet-control-zoom a:hover { color: var(--dore) !important; }
.leaflet-control-attribution {
  background: rgba(38, 48, 74, 0.75) !important;
  color: var(--sourdine) !important;
  font-family: var(--titres);
  font-size: 0.68rem !important;
}
.leaflet-control-attribution a { color: var(--accent-vif) !important; }
.leaflet-tooltip {
  background: rgba(38, 48, 74, 0.92) !important;
  border: 1px solid var(--bordure) !important;
  color: var(--titre) !important;
  font-family: var(--titres);
  font-weight: 600;
  box-shadow: none !important;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  padding: 0.85rem 0 0;
  font-family: var(--titres);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--sourdine);
}
.legende span { display: inline-flex; align-items: center; gap: 0.45em; }
.puce { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.puce-approche { background: var(--dore); }
.puce-normal { background: var(--titre); }
.puce-village { background: var(--accent); }

/* Marqueurs : fanions orientés au cap. */
.avion { will-change: transform; }
.avion svg { display: block; overflow: visible; }
.avion path {
  fill: #fdf6ec;
  stroke: rgba(38, 48, 74, 0.9);
  stroke-width: 1.5;
}
.avion[data-approche="oui"] path { fill: var(--dore); }
.avion .etiquette {
  font-family: var(--donnees);
  font-size: 12px;
  font-weight: 600;
  fill: #fdf6ec;
  paint-order: stroke;
  stroke: rgba(38, 48, 74, 0.9);
  stroke-width: 3.5px;
  letter-spacing: 0.02em;
}

/* ---------- Liens de service ---------- */

.liens-service {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1.2rem 0 0;
}
.liens-service a {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.3rem;
  border-radius: var(--rayon-bouton);
  background: var(--panneau);
  border: 1px solid var(--bordure);
  color: var(--titre);
  font-family: var(--titres);
  font-size: 0.87rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}
.liens-service a:hover {
  background: var(--panneau-haut);
  border-color: var(--dore);
  transform: translateY(-2px);
}

/* ---------- Fiche appareil ---------- */

.fiche {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  background: linear-gradient(165deg, rgba(74, 92, 130, 0.97), rgba(120, 96, 78, 0.97));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 3px solid var(--accent);
  border-radius: var(--rayon-carte) var(--rayon-carte) 0 0;
  padding: 1.2rem var(--gouttiere) 1.6rem;
  box-shadow: 0 -14px 40px rgba(38, 48, 74, 0.45);
  transform: translateY(101%);
  transition: transform var(--transition);
  max-height: 78vh;
  overflow-y: auto;
}
.fiche[data-ouverte="oui"] { transform: translateY(0); }
.fiche[data-approche="oui"] { border-top-color: var(--dore); }

.fiche-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.fiche h2 {
  margin: 0;
  font-family: var(--donnees);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.fiche .fermer {
  background: rgba(255, 247, 238, 0.12);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bouton);
  color: var(--titre);
  font-family: var(--titres);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
}
.fiche .fermer:hover { border-color: var(--dore); color: var(--dore); }

.fiche dl {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.45rem 1rem;
  margin: 0;
  font-family: var(--donnees);
  font-size: 0.92rem;
}
.fiche dt {
  font-family: var(--titres);
  color: var(--sourdine);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: center;
}
.fiche dd { margin: 0; color: var(--titre); font-variant-numeric: tabular-nums; }

.badge-approche {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.4rem 0.8rem;
  background: var(--dore);
  color: var(--nuit);
  font-family: var(--titres);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--rayon-bouton);
}

/* ---------- Avertissement et pied de page ---------- */

.avertissement {
  margin: 1.6rem 0 0;
  padding: 1.05rem 1.3rem;
  background: rgba(255, 247, 238, 0.08);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--dore);
  border-radius: var(--rayon-carte);
  font-size: 0.98rem;
  color: var(--sourdine);
}
.avertissement strong { color: var(--titre); font-weight: 500; }

.pied {
  max-width: var(--largeur);
  margin: 2.5rem auto 0;
  padding: 1.8rem var(--gouttiere) 3rem;
  border-top: 1px solid var(--bordure);
  font-family: var(--titres);
  font-size: 0.85rem;
  line-height: 1.9;
  color: var(--sourdine);
}
.pied p { margin: 0 0 1.1rem; max-width: 62ch; }
.pied p:last-child { margin-bottom: 0; }

/* ---------- Page de contenu (mentions légales) ---------- */

.contenu {
  max-width: min(var(--largeur), 72ch);
  margin: 0 auto;
  padding: 0 var(--gouttiere) 1rem;
}
.contenu h2 { font-size: 1.3rem; margin: 2.3rem 0 0.8rem; }
.contenu h2:first-child { margin-top: 0; }
.contenu p { margin-bottom: 1.3rem; }
.contenu li { margin-bottom: 0.5rem; }
.contenu strong { color: var(--titre); font-weight: 500; }

/* ---------- Grand écran : bandes à gauche, carte à droite ---------- */

@media (min-width: 900px) {
  :root { --gouttiere: 2rem; }

  .colonnes {
    display: grid;
    grid-template-columns: minmax(22rem, 27rem) 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0 2.5rem;
  }
  .panneau { grid-column: 1; grid-row: 1; }
  .avertissement { grid-column: 1; grid-row: 2; }
  .carte-cadre {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0.4rem 0 0;
    position: sticky;
    top: 1.5rem;
  }
  #carte { height: calc(100vh - 11rem); }

  .fiche {
    inset: auto auto 1.5rem 1.5rem;
    width: 27rem;
    border: 1px solid var(--bordure);
    border-top: 3px solid var(--accent);
    border-radius: var(--rayon-carte);
    transform: translateY(calc(100% + 3rem));
  }
  .fiche[data-approche="oui"] { border-top-color: var(--dore); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Nom exact de l'aéroport, sous la ville et le pays dans la fiche. */
.fiche dd .precision {
  display: block;
  font-size: 0.78rem;
  color: var(--sourdine);
  line-height: 1.4;
  margin-top: 0.1rem;
}