:root{
    --bg:#0a0c10;
    --panel:#12151b;
    --panel-2:#181c24;
    --line:#262b35;
    --text:#e7e9ed;
    --muted:#8a92a3;
    --amber:#f0a500;
    --amber-dim:#8a5f00;
    --green:#4fd67a;
    --radius:2px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .mono{font-family:'JetBrains Mono', monospace;}

  /* subtle night-sky texture */
  body::before{
    content:"";
    position:fixed; inset:0;
    background:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.25), transparent),
      radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.18), transparent),
      radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.15), transparent),
      radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,.2), transparent),
      radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,.15), transparent);
    pointer-events:none;
    z-index:0;
    opacity:.6;
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 5vw;
    background:rgba(10,12,16,.85);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    letter-spacing:.08em;
    font-size:15px;
    color:var(--text);
    text-decoration:none;
    transition:color .2s;
  }
  .brand:hover{ color:var(--amber); }
  .brand:hover .dot{ background:var(--amber); box-shadow:0 0 8px var(--amber); }
  .brand .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green);}
  nav ul{list-style:none; display:flex; gap:28px;}
  nav ul li + li{ margin-left:28px; }
  nav a{
    color:var(--muted); text-decoration:none; font-size:14px; font-weight:500;
    letter-spacing:.02em;
    transition:color .2s;
  }
  nav a:hover{color:var(--amber);}

  /* ---------- Hero / split-flap board ---------- */
  .hero{
    position:relative; z-index:1;
    padding:12vh 5vw 10vh;
    display:flex; flex-direction:column; align-items:flex-start; gap:28px;
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:-1;
  }
  .hero-bg img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 60%;
    filter:grayscale(.3) brightness(.42) contrast(1.15) saturate(1.1);
  }
  .hero-bg::after{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(100deg, rgba(10,12,16,.96) 0%, rgba(10,12,16,.82) 32%, rgba(10,12,16,.45) 62%, rgba(10,12,16,.6) 100%),
      linear-gradient(0deg, rgba(10,12,16,.85) 0%, rgba(10,12,16,.15) 35%, rgba(10,12,16,.1) 70%, rgba(10,12,16,.6) 100%);
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    color:var(--amber);
    font-size:13px; letter-spacing:.15em; text-transform:uppercase;
  }
  .hero h1{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:clamp(34px, 6vw, 68px);
    line-height:1.05;
    max-width:14ch;
  }
  .hero p{
    color:var(--muted);
    max-width:52ch;
    font-size:16px;
    line-height:1.6;
  }

  .board{
    display:flex; gap:6px; flex-wrap:wrap;
    margin-top:8px;
  }
  .flap{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    width:52px; height:64px;
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace;
    font-size:28px; font-weight:700;
    color:var(--amber);
    position:relative;
    overflow:hidden;
  }
  .flap::after{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:1px; background:rgba(0,0,0,.5);
  }
  .flap span{ display:inline-block; }
  .flap{ animation:flicker 4s ease-in-out infinite; }
  .flap:nth-child(2){ animation-delay:.4s; }
  .flap:nth-child(3){ animation-delay:.8s; }
  .flap:nth-child(4){ animation-delay:1.2s; }
  @keyframes flicker{
    0%, 92%, 100%{ opacity:1; }
    95%{ opacity:.45; }
  }
  @media (prefers-reduced-motion: reduce){
    .flap{ animation:none !important; }
  }

  /* ---------- Section label ---------- */
  .section{ position:relative; z-index:1; padding:9vh 5vw; }
  .section-head{
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:44px; border-bottom:1px solid var(--line); padding-bottom:18px;
    flex-wrap:wrap; gap:12px;
  }
  .section-head h2{ font-size:26px; font-weight:600; }
  .section-head .tag{
    font-family:'JetBrains Mono', monospace; color:var(--muted); font-size:13px;
  }

  /* ---------- Airport cards ---------- */
  .airports{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:22px;
  }
  .airport-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px;
    text-decoration:none;
    color:var(--text);
    display:block;
    transition:border-color .2s, transform .2s;
    position:relative;
  }
  .airport-card:hover{ border-color:var(--amber-dim); transform:translateY(-2px); }
  .airport-card .code{
    font-family:'JetBrains Mono', monospace;
    font-size:34px; font-weight:700; color:var(--amber);
    letter-spacing:.02em;
  }
  .airport-card .name{ margin-top:6px; font-size:15px; color:var(--text); font-weight:500;}
  .airport-card .meta{ margin-top:14px; display:flex; gap:16px; font-size:13px; color:var(--muted); font-family:'JetBrains Mono', monospace; }
  .airport-card .status{
    position:absolute; top:26px; right:26px;
    font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--green);
    letter-spacing:.1em;
  }
  .airport-card .status::before{ content:"● "; }

  /* ---------- Gallery ---------- */
  .gallery-block{ margin-top:74px; }
  .gallery-block:first-child{ margin-top:0; }
  .gallery-title{
    display:flex; align-items:center; gap:14px; margin-bottom:22px;
  }
  .gallery-title .code{
    font-family:'JetBrains Mono', monospace; color:var(--amber); font-size:22px; font-weight:700;
  }
  .gallery-title .name{ color:var(--muted); font-size:15px; }
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:14px;
  }
  .photo{
    width:100%;
    aspect-ratio:3/2;
    min-height:220px;
    min-width:0;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:
      linear-gradient(145deg, #1b2028, #0d0f13);
    position:relative;
    overflow:hidden;
    display:flex; align-items:flex-end;
    cursor:zoom-in;
  }

  /* ---------- Lightbox ---------- */
  .lightbox{
    position:fixed; inset:0; z-index:200;
    background:rgba(6,7,9,.94);
    display:none;
    align-items:center; justify-content:center;
    padding:3vh 4vw;
  }
  .lightbox.open{ display:flex; }
  .lightbox img{
    max-width:100%; max-height:90vh;
    border:1px solid var(--line);
    border-radius:var(--radius);
    object-fit:contain;
    cursor:zoom-in;
  }
  .lightbox-frame{ display:flex; flex-direction:column; align-items:center; gap:14px; max-width:min(96vw, 1900px); width:100%; }

  /* Mode zoom : clic sur la photo pour l'afficher en grand avec défilement */
  .lightbox.zoomed{
    align-items:flex-start;
    overflow:auto;
    padding:24px;
    cursor:auto;
  }
  .lightbox.zoomed .lightbox-frame{ max-width:none; margin:auto; }
  .lightbox.zoomed img{
    max-width:none; max-height:none;
    cursor:zoom-out;
  }
  @media (max-width: 640px){
    .lightbox{ padding:2vh 3vw; }
    .lightbox img{ max-height:78vh; }
  }
  .lightbox-cap{
    font-family:'JetBrains Mono', monospace; color:var(--muted); font-size:13px; text-align:center;
  }
  .lightbox-close, .lightbox-prev, .lightbox-next{
    position:fixed;
    background:var(--panel); border:1px solid var(--line); color:var(--text);
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; cursor:pointer; font-family:'JetBrains Mono', monospace;
    transition:border-color .2s, color .2s;
  }
  .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ border-color:var(--amber); color:var(--amber); }
  .lightbox-close{ top:24px; right:24px; }
  .lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
  .lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }
  @media (max-width: 640px){
    .lightbox-prev{ left:10px; } .lightbox-next{ right:10px; } .lightbox-close{ top:14px; right:14px; }
  }
  .photo img{
    width:100%; height:100%; object-fit:cover; display:block;
    position:absolute; inset:0;
  }
  /* ---------- Protection anti-vol des photos ---------- */
  /* Dissuade le clic droit / glisser-déposer / sélection sur les images.
     Ceci ne bloque pas un utilisateur déterminé (capture d'écran, outils
     développeur), c'est une dissuasion pour le visiteur lambda. */
  .photo img,
  .lightbox img,
  .hero-bg img{
    -webkit-user-drag:none;
    user-drag:none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    pointer-events:auto;
  }
  .photo .placeholder-note{
    position:relative; z-index:1;
    padding:12px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  }
  .photo .cap{
    position:relative; z-index:1;
    padding:12px; width:100%; min-width:0;
    box-sizing:border-box;
    font-family:'JetBrains Mono', monospace; font-size:12px;
    color:var(--text);
    background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
    overflow-wrap:break-word; word-break:break-word;
  }

  /* ---------- About / footer ---------- */
  .about p{ color:var(--muted); max-width:60ch; line-height:1.7; font-size:15px; }
  footer{
    border-top:1px solid var(--line);
    padding:34px 5vw; z-index:1; position:relative;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    color:var(--muted); font-size:13px; font-family:'JetBrains Mono', monospace;
  }

/* ---------- Airport page extras ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); text-decoration:none; font-size:14px;
  font-family:'JetBrains Mono', monospace;
  transition:color .2s;
}
.back-link:hover{ color:var(--amber); }
.airport-hero{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  margin-bottom:6px;
}
.airport-hero .code{
  font-family:'JetBrains Mono', monospace; color:var(--amber);
  font-size:clamp(36px, 6vw, 56px); font-weight:700;
}
.airport-hero .name{ font-size:18px; color:var(--text); }
.airport-hero .country{ font-size:14px; color:var(--muted); font-family:'JetBrains Mono', monospace; }

/* ---------- Stats strip ---------- */
.stats{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding:0 5vw;
}
.stat{
  flex:1 1 160px;
  padding:34px 24px;
  border-right:1px solid var(--line);
  text-align:center;
}
.stat:last-child{ border-right:none; }
.stat-num{
  font-family:'JetBrains Mono', monospace;
  color:var(--amber);
  font-size:clamp(28px, 4vw, 40px);
  font-weight:700;
  line-height:1;
  text-align:center;
}
.stat-label{
  margin-top:8px;
  font-size:13px;
  color:var(--muted);
  font-family:'JetBrains Mono', monospace;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
}

/* ---------- Map ---------- */
.map{
  height:480px;
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
  display:flex; align-items:center; justify-content:center;
}
.map-fallback{
  padding:24px;
  max-width:40ch;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  color:var(--muted);
}
.map-fallback a{ color:var(--amber); }
@media (max-width: 640px){
  .map{ height:360px; }
}
.airport-marker span{
  display:block;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(240,165,0,.25), 0 0 10px rgba(240,165,0,.65);
  transition:transform .2s;
}
.airport-marker:hover span{ transform:scale(1.3); }
.leaflet-popup-content-wrapper{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.leaflet-popup-tip{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:none;
}
.leaflet-popup-content{ margin:14px 16px; }
.map-popup-code{
  font-family:'JetBrains Mono', monospace; color:var(--amber);
  font-weight:700; font-size:17px;
}
.map-popup-name{ margin-top:3px; font-size:13px; color:var(--text); }
.map-popup-country{
  margin-top:3px; font-size:12px; color:var(--muted);
  font-family:'JetBrains Mono', monospace;
}
.map-popup a{
  display:inline-block; margin-top:10px;
  font-size:12px; color:var(--amber); text-decoration:none;
  font-family:'JetBrains Mono', monospace;
}
.map-popup a:hover{ text-decoration:underline; }
.leaflet-popup-close-button{ color:var(--muted) !important; }
.leaflet-popup-close-button:hover{ color:var(--amber) !important; }
.leaflet-control-zoom a{
  background:var(--panel) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
.leaflet-control-zoom a:hover{ color:var(--amber) !important; }
.leaflet-control-attribution{
  background:rgba(10,12,16,.75) !important;
  color:var(--muted) !important;
}
.leaflet-control-attribution a{ color:var(--muted) !important; }

/* ---------- Filtre aéroports ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-bottom:28px;
}
.filter-input, .filter-select{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  height:46px;
  padding:0 14px;
  outline:none;
  transition:border-color .2s;
  box-sizing:border-box;
}
.filter-input{ flex:1 1 260px; min-width:200px; }
.filter-input::placeholder{ color:var(--muted); }
.filter-select{
  flex:0 1 200px; min-width:140px;
  cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238a92a3' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.filter-input:focus, .filter-select:focus{ border-color:var(--amber-dim); }

.flag-icon{
  display:inline-block;
  vertical-align:-2px;
  line-height:0;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
  margin-right:2px;
}
.flag-icon svg{ display:block; }

.footer-link{ color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-link:hover{ color:var(--amber); }

/* ---------- Accessibilité clavier ---------- */
.skip-link{
  position:absolute;
  left:-9999px; top:0;
  z-index:100;
  background:var(--amber);
  color:#0a0c10;
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:14px;
  padding:12px 20px;
  border-radius:0 0 var(--radius) 0;
  text-decoration:none;
}
.skip-link:focus{
  left:0;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* ---------- Horloge locale (hero) ---------- */
.hud-clock{
  position:absolute; top:24px; right:5vw; z-index:2;
  background:rgba(10,12,16,.55);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 16px;
  text-align:right;
  backdrop-filter:blur(4px);
}
.hud-time{
  font-family:'JetBrains Mono', monospace;
  font-size:20px; font-weight:700; color:var(--amber);
  letter-spacing:.05em;
}
.hud-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase;
  margin-top:2px;
}
@media (max-width: 640px){
  .hud-clock{ display:none; }
}

/* ---------- Bouton retour en haut ---------- */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  font-size:20px; cursor:pointer; font-family:'JetBrains Mono', monospace;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s, transform .25s, border-color .2s, color .2s;
}
.to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ border-color:var(--amber); color:var(--amber); }
@media (max-width: 640px){
  .to-top{ right:16px; bottom:16px; width:42px; height:42px; }
}