/* =========================================================================
   Arel-Air ASBL — feuille de style principale
   Aérodrome d'Arlon-Sterpenich (EBAR)
   ========================================================================= */

  /* -----------------------------------------------------------------------
     CHARTE GRAPHIQUE DU CLUB — palette active : "Bleu acier"
     -----------------------------------------------------------------------
     Ces couleurs sont la référence officielle du site : elles s'appliquent
     même si le sélecteur de palette (outil de présentation) est désactivé
     ou retiré — voir assets/js/palette-switcher.js.

     Pour changer la charte plus tard :
       1. Ouvrez le site avec le sélecteur de palette activé.
       2. Choisissez la nouvelle couleur souhaitée et validez-la avec le club.
       3. Remplacez simplement les 10 valeurs ci-dessous par celles de la
          palette choisie (visibles dans la console du navigateur via
          getComputedStyle, ou communiquez-les-moi pour que je les recopie).
     Aucune autre partie du CSS n'a besoin d'être modifiée : tout le site
     est construit à partir de ces variables.
     ----------------------------------------------------------------------- */
  :root{
    --ink:#1b2a3c;
    --ink-soft:#3d536c;
    --paper:#f0f2f5;
    --paper-alt:#e3e8ed;
    --sky:#dee2ed;
    --grass:#376395;
    --grass-dark:#264a73;
    --amber:#c93a36;
    --amber-dark:#a12f2b;
    --line:rgba(27,42,60,0.14);
    --ink-rgb:27,42,60; /* mêmes chiffres que --ink, en r,g,b — utilisé pour les fonds semi-transparents ci-dessous */
    --radius:10px;
    --max:1120px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    line-height:1.08;
    margin:0 0 .5em 0;
    letter-spacing:-0.01em;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
  }
  a{color:var(--grass-dark);}
  img{max-width:100%; display:block;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

  /* skip link */
  .skip-link{
    position:absolute; left:-999px; top:0; background:var(--amber); color:#fff;
    padding:10px 16px; z-index:200; border-radius:0 0 8px 0;
  }
  .skip-link:focus{left:0;}

  /* NAV */
  header.site-nav{
    position:sticky; top:0; z-index:100;
    background:var(--ink); color:#fff;
    border-bottom:3px solid var(--amber);
  }
  .nav-inner{
    max-width:var(--max); margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Space Grotesk', sans-serif; font-weight:700;
    color:#fff; text-decoration:none; font-size:1.15rem; letter-spacing:.02em;
  }
  .brand-logo{width:30px; height:30px; flex:none; border-radius:50%; object-fit:contain; background:transparent;}
  nav.primary ul{
    display:flex; gap:2px; list-style:none; margin:0; padding:0;
  }
  nav.primary a{
    color:#cfd8dc; text-decoration:none; font-size:.82rem;
    font-family:'IBM Plex Mono', monospace; letter-spacing:.06em;
    text-transform:uppercase; padding:10px 14px; display:block;
    border-bottom:3px solid transparent; margin-bottom:-3px;
    transition:color .15s ease, border-color .15s ease;
  }
  nav.primary a:hover, nav.primary a.active{
    color:#fff; border-color:var(--amber);
  }
  .nav-toggle{
    display:none; background:none; border:1px solid #56646d; color:#fff;
    border-radius:6px; width:40px; height:36px; font-size:1.1rem; cursor:pointer;
  }

  @media (max-width:760px){
    nav.primary{
      position:absolute; top:64px; left:0; right:0; background:var(--ink);
      max-height:0; overflow:hidden; transition:max-height .25s ease;
      border-bottom:3px solid var(--amber);
    }
    nav.primary.open{max-height:280px;}
    nav.primary ul{flex-direction:column;}
    nav.primary a{padding:14px 24px; border-bottom:1px solid rgba(255,255,255,.08); margin:0;}
    .nav-toggle{display:block;}
  }

  /* RUNWAY DIVIDER */
  .runway-divider{
    height:26px; display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .runway-divider .dashes{
    display:flex; gap:14px;
  }
  .runway-divider .dashes span{
    width:34px; height:5px; background:var(--ink); opacity:.18; border-radius:2px;
  }

  section{padding:88px 0;}
  section.alt{background:var(--sky);}

  #accueil{
    position:relative;
    background:
      linear-gradient(100deg, rgba(var(--ink-rgb),.92) 0%, rgba(var(--ink-rgb),.72) 38%, rgba(var(--ink-rgb),.38) 65%, rgba(var(--ink-rgb),.12) 88%),
      url('../img/bann.jpg') center 62% / cover no-repeat;
    color:#fff;
  }
  #accueil h1{color:#fff;}
  #accueil .lead{color:#dbe3e6;}
  #accueil .eyebrow{color:#ffb98c;}
  #accueil .eyebrow::before{background:#fff;}
  #accueil .instrument-strip{background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.3);}
  #accueil .instrument-strip div{background:rgba(var(--ink-rgb),.6);}
  #accueil .instrument-strip .label{color:#c3ccd1;}
  #accueil .instrument-strip .value{color:#fff;}

  .eyebrow{
    font-family:'IBM Plex Mono', monospace; text-transform:uppercase;
    letter-spacing:.14em; font-size:.75rem; color:var(--grass-dark);
    display:flex; align-items:center; gap:10px; margin-bottom:14px;
  }
  .eyebrow::before{
    content:""; width:22px; height:2px; background:var(--amber); display:inline-block;
  }

  /* HERO */
  .hero{
    display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
    padding-top:64px;
  }
  .hero h1{font-size:clamp(2rem, 4.2vw, 3rem);}
  .hero p.lead{font-size:1.08rem; color:var(--ink-soft); max-width:52ch;}
  .instrument-strip{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; margin-top:32px;
  }
  .instrument-strip div{
    background:var(--paper); padding:14px 12px;
  }
  section.alt .instrument-strip div{background:var(--sky);}
  .instrument-strip .label{
    font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:4px;
  }
  .instrument-strip .value{
    font-family:'IBM Plex Mono', monospace; font-size:1rem; font-weight:500;
  }

  .windsock-wrap{display:flex; justify-content:center;}
  .windsock-wrap svg{width:100%; max-width:260px; height:auto; overflow:hidden;}
  @media (prefers-reduced-motion:no-preference){
    .sock{animation:wave 2.6s cubic-bezier(.34,1.4,.64,1) infinite;}
    .plane{animation:flyacross 18s linear infinite; transform-box:fill-box; transform-origin:center;}
  }
  @keyframes wave{
    0%,100%{transform:rotate(-4deg);}
    50%{transform:rotate(9deg);}
  }
  @keyframes flyacross{
    0%{transform:translate(-60px,32px) rotate(-2deg);}
    25%{transform:translate(60px,46px) rotate(1deg);}
    50%{transform:translate(150px,38px) rotate(-1deg);}
    75%{transform:translate(220px,50px) rotate(2deg);}
    100%{transform:translate(300px,42px) rotate(-2deg);}
  }

  @media (max-width:860px){
    .hero{grid-template-columns:1fr; padding-top:40px;}
    .windsock-wrap{order:-1;}
    .instrument-strip{grid-template-columns:repeat(2,1fr);}
  }

  /* CARDS */
  .card-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px;
  }
  @media (max-width:860px){.card-grid{grid-template-columns:1fr;}}
  .card{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px;
  }
  section.alt .card{background:#fff;}
  .card h3{font-size:1.3rem; margin-bottom:6px;}
  .card .tag{
    font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.08em;
    color:var(--amber-dark); text-transform:uppercase; display:block; margin-bottom:10px;
  }
  dl.data-list{
    margin:18px 0 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px;
    font-size:.94rem;
  }
  dl.data-list dt{
    font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
  }
  dl.data-list dd{margin:0;}
  .note{
    margin-top:20px; padding:14px 16px; border-left:3px solid var(--amber);
    background:rgba(232,103,44,0.08); font-size:.92rem; border-radius:0 6px 6px 0;
  }
  .map-embed{
    margin-top:20px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  }
  .map-embed iframe{width:100%; height:260px; border:0; display:block;}

  .approach-map{
    display:inline-flex; flex-direction:column; gap:8px; margin-top:20px;
    text-decoration:none; width:170px;
  }
  .approach-map img{
    width:170px; height:120px; object-fit:cover; border-radius:8px;
    border:1px solid var(--line); transition:opacity .15s ease;
  }
  .approach-map:hover img{opacity:.85;}
  .approach-map span{
    font-family:'IBM Plex Mono', monospace; font-size:.72rem; color:var(--grass-dark);
    letter-spacing:.02em; line-height:1.3;
  }

  /* METEO / WEBCAM */
  .meteo-grid{
    display:grid; grid-template-columns:1fr 1.2fr; gap:40px; margin-top:36px; align-items:start;
  }
  @media (max-width:860px){.meteo-grid{grid-template-columns:1fr;}}
  ul.link-list{list-style:none; margin:0; padding:0;}
  ul.link-list li{border-bottom:1px solid var(--line);}
  ul.link-list a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 4px; text-decoration:none; color:var(--ink); font-weight:500;
  }
  ul.link-list a:hover{color:var(--grass-dark);}
  ul.link-list .arrow{color:var(--amber); font-family:'IBM Plex Mono', monospace;}
  .cam-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
  }
  .cam-photo{
    display:block; text-decoration:none; border-radius:var(--radius); overflow:hidden;
    background:var(--ink); position:relative;
  }
  .cam-photo img{
    width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:opacity .15s ease;
  }
  .cam-photo:hover img{opacity:.85;}
  .cam-photo span{
    position:absolute; left:8px; bottom:8px; color:#fff;
    font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.03em;
    background:rgba(var(--ink-rgb),.65); padding:4px 8px; border-radius:4px;
  }

  /* CONTACT */
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:36px;
  }
  @media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
  form.contact-form{display:flex; flex-direction:column; gap:16px;}
  form.contact-form label{
    font-family:'IBM Plex Mono', monospace; font-size:.75rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px; display:block;
  }
  form.contact-form input, form.contact-form textarea{
    width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px;
    font-family:'IBM Plex Sans', sans-serif; font-size:.98rem; background:#fff; color:var(--ink);
  }
  form.contact-form input:focus, form.contact-form textarea:focus{
    outline:3px solid var(--amber); outline-offset:1px; border-color:var(--amber);
  }
  form.contact-form textarea{resize:vertical; min-height:130px;}
  button.btn{
    align-self:flex-start; background:var(--grass); color:#fff; border:none;
    padding:13px 26px; border-radius:8px; font-family:'Space Grotesk', sans-serif;
    font-weight:700; font-size:.95rem; letter-spacing:.02em; cursor:pointer;
    transition:background .15s ease;
  }
  button.btn:hover{background:var(--grass-dark);}
  button.btn:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
  .contact-direct dl{display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:.96rem;}
  .contact-direct dt{
    font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.05em;
  }
  .contact-direct dd{margin:0;}
  #form-status{font-size:.9rem; color:var(--grass-dark); min-height:1.2em;}
  #form-status.error{color:var(--amber-dark);}
  .hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

  footer{
    background:var(--ink); color:#cfd8dc; padding:36px 0; font-size:.88rem;
  }
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  footer a{color:#cfd8dc;}

  /* PALETTE SWITCHER — outil de présentation, à retirer ou conserver selon le choix retenu */
  .palette-switcher{
    position:fixed; right:18px; bottom:18px; z-index:300;
    font-family:'IBM Plex Sans', sans-serif;
  }
  .palette-toggle{
    display:flex; align-items:center; gap:8px;
    background:var(--ink); color:#fff; border:1px solid rgba(255,255,255,.25);
    padding:11px 16px; border-radius:999px; cursor:pointer; font-size:.85rem;
    font-family:'IBM Plex Mono', monospace; letter-spacing:.03em;
    box-shadow:0 6px 18px rgba(0,0,0,.22); transition:background .15s ease;
  }
  .palette-toggle:hover{background:var(--ink-soft);}
  .palette-toggle .dot{width:10px; height:10px; border-radius:50%; background:var(--amber); flex:none;}
  .palette-panel{
    position:absolute; right:0; bottom:calc(100% + 10px);
    background:#fff; border:1px solid var(--line); border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.18); padding:16px 12px 16px 16px; width:308px;
    display:none;
  }
  .palette-panel.open{display:flex; flex-direction:column;}
  .palette-panel h4{
    margin:0 0 4px 0; font-family:'Space Grotesk', sans-serif; font-size:.95rem; color:var(--ink);
  }
  .palette-panel .sub{
    margin:0 4px 12px 0; font-size:.76rem; color:var(--ink-soft); line-height:1.4;
  }
  .palette-current{
    display:flex; align-items:center; gap:8px; margin:0 4px 14px 0; padding:8px 10px;
    background:var(--paper-alt); border-radius:8px; font-size:.78rem; color:var(--ink);
  }
  .palette-current .swatch-group{width:18px; height:18px;}
  .palette-scroll{
    overflow-y:auto; max-height:min(58vh, 440px); padding-right:6px; margin-right:-6px;
  }
  .palette-group{margin-bottom:14px;}
  .palette-group:last-child{margin-bottom:0;}
  .palette-group h5{
    margin:0 0 8px 0; font-family:'IBM Plex Mono', monospace; font-size:.68rem;
    letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  }
  .palette-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(32px, 1fr)); gap:8px;
  }
  .palette-option{
    position:relative; width:32px; height:32px; padding:0; border-radius:50%;
    cursor:pointer; box-shadow:0 0 0 1px var(--line); transition:transform .12s ease, box-shadow .12s ease;
  }
  .palette-option:hover{transform:scale(1.12);}
  .palette-option[aria-pressed="true"]{
    box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--amber);
  }
  .swatch-group{display:block; width:100%; height:100%; border-radius:50%; overflow:hidden;}