:root{

  --chart-text:#0f172a;
  --chart-grid:rgba(15,23,42,0.08);

}

.dark{

  --chart-text:#e2e8f0;
  --chart-grid:rgba(255,255,255,0.08);

}

.menu {
  width:max-content;
  min-width:unset;
  position: fixed;
  top: 60px;
  right: 15px;
  background: #1e293b;
  border-radius: 10px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 0px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 1000;
}

.menu a,
.menu button {

  display:flex;
  align-items:center;
  gap:10px;

  width:100%;
  margin:0;
  padding:8px 10px;

  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:1;

  background:none;
  border:none;
  color:white;
  text-decoration:none;

  cursor:pointer;
  box-sizing:border-box;
}

.menu a:hover,
.menu button:hover {
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
}

/* =========================
   BODY
========================= */

body{
  margin:0;
  padding:20px 10px 40px;

  min-height:100vh;

  font-family:Arial,sans-serif;
}

body.dark{
  background:#0f172a;
  color:white;
}

body.light{
  background:#f1f5f9;
  color:#111;
}

/* =========================
   CARD
========================= */

.card{
  background:#1e293b;
  border-radius:22px;
  padding:12px 10px;
  margin:10px 0;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.30);
  overflow:hidden;
  font-size:14px;
}

body.light .card{
  background:#ffffff;
  color:#111;

  box-shadow:
    0 5px 15px rgba(0,0,0,0.1);
}

.card div:first-child{
  font-size:16px;
  font-weight:600;
}

/* =========================
   TITRES
========================= */

.block-title{
  margin:0;
  flex:1;

  font-size:15px;
  font-weight:600;

  margin-bottom:10px;

  display:block;
}

/* =========================
   INFO LINE
========================= */

.info-line{
  display:flex;
  align-items:flex-start;

  gap:8px;

  margin-bottom:8px;

  justify-content:flex-start;

  text-align:left;
}

.info-line span{
  text-align:left;
}

.info-icon{
  width:22px;
  min-width:22px;

  text-align:center;

  margin-top:2px;
}

/* =========================
   GO BOX
========================= */

.go-box{
  font-size:18px;
  line-height:1.4;

  display:inline-block;

  padding:20px 30px;

  border-radius:20px;

  font-weight:bold;

  margin-top:10px;

  text-align:center;
}

.go{
  box-shadow:0 0 20px #22c55e;
}

.limite{
  box-shadow:0 0 20px #eab308;
}

.nogo{
  box-shadow:0 0 20px #ef4444;
}

/* =========================
   RUNWAY
========================= */

.runway{
  position:relative;

  height:30px;

  background:#e5e7eb;

  border-radius:5px;

  margin:20px 0;
}

.runway::after{
  content:"";

  position:absolute;

  left:10%;
  right:10%;

  top:50%;

  height:2px;

  background:repeating-linear-gradient(
    to right,
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.5) 6px,
    transparent 6px,
    transparent 12px
  );

  transform:translateY(-50%);
}

.plane{
  position:absolute;

  top:50%;

  transform:translate(-50%, -50%);

  background:white !important;

  border-radius:50%;

  padding:4px;

  z-index:5;

  box-shadow:0 0 6px rgba(0,0,0,0.4);
}

.runway-wrapper{
  position:relative;
}

/* =========================
   HEADER
========================= */

.header{
  position:relative;

  text-align:center;

  margin-bottom:25px;
}

.header h1{
  margin:0;

  font-size:28px;
}

.header-subtitle{
  margin-top:6px;

  font-size:14px;

  opacity:.7;
}

.update-time{
  margin-top:8px;

  font-size:13px;

  opacity:.65;
}

.menu-btn{
  position:absolute;

  top:0;
  right:0;

  font-size:24px;

  cursor:pointer;

  padding:5px 10px;
}

/* =========================
   FLIGHT CARD
========================= */

.badge{
  font-size:15px;
  font-weight:700;

  margin-bottom:8px;

  text-align:center;
}

.card-title{
  margin:0 0 10px 0;

  font-size:15px;
  font-weight:600;

  line-height:1.4;

  text-align:center;
}

.card-text{
  line-height:1.5;
  font-size:13px;

  text-align:center;

  opacity:.9;
}

.status-card .card-text{
  text-align:left;
}

/* =========================
   MENU PAGE
========================= */

/*.test-page .menu{

  position:absolute;

  top:55px;
  right:0;

  display:none;

  flex-direction:column;

  gap:8px;

  width:130px;

  padding:12px;

  border-radius:22px;

  background:#1e293b;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35);

  z-index:1000;
}

.test-page .menu a,
.test-page .menu button{

  display:flex;

  align-items:center;

  gap:10px;

  width:100%;

  padding:12px 14px;

  border:none;

  background:none;

  color:white;

  text-decoration:none;

  font-size:17px;

  text-align:left;

  border-radius:12px;

  cursor:pointer;
}   */
/* =========================
   TIMELINE
========================= */

.timeline-grid{
  display:grid;
  grid-template-columns:
    repeat(3,1fr);
  gap:10px;
  margin-top:10px;
}

.timeline-card{

  border-radius:16px;

  padding:14px;

  text-align:center;

  background:#0f172a;
}

.timeline-hour{

  font-size:18px;

  font-weight:700;
}

.timeline-header{
  padding:0;
  margin-bottom:15px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

#timelineArrow{

  font-size:20px;

  transition:transform 0.25s ease;
}

.timeline-status{

  font-size:13px;

  font-weight:700;

  margin-bottom:8px;
}

.timeline-line{

  font-size:13px;

  opacity:.9;

  line-height:1.5;
}

.timeline-go{
  box-shadow:0 0 12px #22c55e;
}

.timeline-sport{
  box-shadow:0 0 12px #eab308;
}

.timeline-nogo{
  box-shadow:0 0 12px #ef4444;
}

/* =========================
   PLANEUR
========================= */

.glider-card{

  border-radius:16px;

  padding:18px;

  background:#0f172a;

  box-shadow:
    0 0 12px rgba(34,197,94,.25);
}

.glider-line{

  display:flex;

  align-items:flex-start;

  gap:10px;

  margin-bottom:14px;

  line-height:1.45;
}

.glider-icon{

  width:22px;

  min-width:22px;

  text-align:center;
}

.glider-title{

  font-size:15px;

  font-weight:600;

  margin-bottom:4px;
}

.glider-text{

  font-size:13px;

  opacity:.9;
}

/* =========================
   WEATHER LOADER
========================= */

.weather-loader{
  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:25px 10px;

  min-height:120px;
}

.cloud{
  font-size:52px;

  animation:
    floatCloud 2.5s ease-in-out infinite;
}

.lightning{
  font-size:28px;

  margin-top:-25px;

  animation:
    flashLightning 1.2s infinite;
}

.loader-text{
  font-size:15px;

  opacity:0.85;

  animation:
    pulseText 1.8s ease-in-out infinite;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes floatCloud{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-8px);
  }

  100%{
    transform:translateY(0px);
  }
}

@keyframes flashLightning{

  0%{
    opacity:0.2;
    transform:scale(0.9);
  }

  20%{
    opacity:1;
    transform:scale(1.15);
  }

  40%{
    opacity:0.3;
  }

  100%{
    opacity:0.2;
    transform:scale(0.9);
  }
}

@keyframes pulseText{

  0%{
    opacity:0.4;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:0.4;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width:600px){

  .card{
    font-size:13px;
    padding:10px 4px;
  }

  .card .info-line{
    font-size:12px;
  }

  .card div:first-child{
    font-size:14px;
  }

  .timeline-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}

/* =========================
   STATUS CARD
========================= */

.status-card{

  padding:16px 18px;

  min-height:auto;
}

.status-card .card-title{

  margin:0 0 8px 0;
}

.status-card .card-text{

  line-height:1.45;
}

.status-card .badge{

  margin-bottom:6px;
}

body.light .timeline-card{
  background:#ffffff;
  color:#111;

  box-shadow:
    0 0 10px rgba(34,197,94,0.15);
}

body.light .timeline-card{

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fafc 100%
  );

  color:#111;

  border:1px solid rgba(255,255,255,0.8);

  box-shadow:
    0 4px 12px rgba(15,23,42,0.08),
    0 0 12px rgba(34,197,94,0.12);

  backdrop-filter: blur(4px);
}

body.light .timeline-hour,
body.light .timeline-status,
body.light .timeline-line{
  color:#111;
}

body.light .menu{

  background:#ffffff;

  border:1px solid rgba(0,0,0,0.06);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.12);
}

body.light .menu a,
body.light .menu button{

  color:#111;
}

body.light .menu a:hover,
body.light .menu button:hover{

  background:rgba(0,0,0,0.05);
}

.menu{
  flex-direction:column;
}
/* =========================
   FORECAST
========================= */

.forecast-value{
  font-weight:400;
}
.timeline-card{

  cursor:pointer;

}
.forecast-card{
  margin-bottom:10px;
  padding:8px 10px;
}

.forecast-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.forecast-row-top{
  align-items:center;
  margin-bottom:8px;
}

.forecast-row-bottom{
  font-size:14px;
  opacity:0.9;
}

.forecast-summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:4px;
  row-gap:2px;
  font-size:10px;
  line-height:1;
  opacity:.92;
}

/* =========================
   MINMAX GRID
========================= */

.minmax-grid{

  gap:6px 14px;

  align-items:start;
}


.forecast-summary-grid div{
  min-width:0;
}

.forecast-summary-grid b{
  font-weight:400;
}

.forecast-summary-grid span{
  font-weight:400;
}

.forecast-label{
  font-weight:400;
}

.forecast-value{
  font-weight:400;
}

.forecast-badge{
  color:white;
  padding:5px 10px;
  border-radius:999px;
  font-weight:700;
}

.forecast-badge-go{
  background:#22c55e;
  color:white;
  padding:2px 6px;
  border-radius:999px;
}

.forecast-badge-sport{
  background:#eab308;
  color:white;
  padding:2px 6px;
  border-radius:999px;
}


.forecast-badge-storm{
  background:#a21caf;
  color:white;
  padding:2px 8px;
  border-radius:999px;
}

.forecast-summary-grid > div{
  min-width:0;
  overflow:hidden;
}

.forecast-summary-grid span{
  overflow:hidden;
  text-overflow:ellipsis;
}

.forecast-summary-grid > div:nth-child(even){
  text-align:right;
}
.forecast-grid-2{
  display:grid;
  color:white;
  grid-template-columns:1fr 1fr;
  justify-content:stretch;
  align-items:start;
    width:100%;
  column-gap:4px;
  row-gap:4px;
  margin-top:6px;
  font-size:14px;
  line-height:1.2;
  width:100%;
}

body.dark .forecast-grid-2{
  color:white;
}

body.light .forecast-grid-2{
  color:#111;
}
.forecast-grid-2 > div{
  min-width:0;
  width:100%;
}

.forecast-grid-2 div{
    width:100%;
  min-width:0;
}

.forecast-grid-2 > div:nth-child(even){
  text-align:right;
}
.forecast-grid-2 div:first-child{
  font-weight: 400;
}
.forecast-temp-bottom{
  text-align:right;
  font-weight:700;
}

/* =========================
   BADGES CONDITIONS VOL
========================= */

/* 🟢 Conditions idéales */
.forecast-badge-go{
  background:#22c55e;
  color:white;
  padding:2px 8px;
  border-radius:999px;
}

/* 🟡 Conditions sportives / soutenues */
.forecast-badge-sport{
  background:#fde047;
  color:#111;
  padding:2px 8px;
  border-radius:999px;
}

/* 🟠 Conditions fortes / vigilance */
.forecast-badge-orange{
  color:#f59e0b;

}

/* 🔴 Conditions NO GO */
.forecast-badge-nogo{
  color:#dc2626 !important;
}

/* 🟣 Tempête / rafales violentes */
.forecast-badge-storm{
  background:#7c3aed;
  color:white;
  padding:2px 8px;
  border-radius:999px;
}

/* =========================
   ACCORDEON FORECAST
========================= */

.knowledge-card{

  margin-top:18px;

  background:var(--card-bg);

  border-radius:22px;

  overflow:hidden;
}

.knowledge-header{

  padding:18px 20px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  cursor:pointer;
}

.knowledge-title{

  font-size:24px;

  font-weight:700;
}

.knowledge-subtitle{

  margin-top:4px;

  opacity:0.7;

  font-size:14px;
}

.arrow{

  font-size:22px;

  transition:transform 0.25s ease;
}

.knowledge-content{

  max-height:0;

  overflow:hidden;

  transition:max-height 0.35s ease;

  padding:0 18px;
}

.knowledge-card.open .knowledge-content{

  max-height:5000px;

  padding:0 18px 18px;
}

.knowledge-card.open .arrow{

  transform:rotate(180deg);
}

/* =========================
   ACCORDEON
========================= */

.knowledge-card{

  background:#1e293b;

  border-radius:18px;

  overflow:hidden;

  margin-bottom:18px;
}

body.light .knowledge-card{
  background:white;
}

.knowledge-header{

  padding:18px 20px;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:space-between;
}

.knowledge-title{

  font-size:18px;

  font-weight:700;
}

.knowledge-subtitle{

  margin-top:6px;

  font-size:14px;

  opacity:0.7;
}

.arrow{

  font-size:22px;

  transition:transform 0.25s ease;
}

.knowledge-card.open .arrow{
  transform:rotate(180deg);
}

.knowledge-content{

  max-height:0;

  overflow:hidden;

  transition:max-height 0.35s ease;
}

.knowledge-card.open .knowledge-content{
  max-height:10000px;
}
#activeSpotLabel{
  font-size:13px;
  opacity:0.75;
  margin-top:4px;
  margin-bottom:12px;
}

}

.forecast-grid-2{
  color:white;
}

.cockpit-update{
  font-size:12px;
  font-weight:normal;
  opacity:1;
  color:inherit;
}

body.light .cockpit-update{
  color:#111;
}

/* =========================
   COMPAS METAR
========================= */

.metar-compass{

  display:flex;

  justify-content:center;

  align-items:center;

  margin:10px 0;

}

.metar-svg{

  width:220px;

  height:220px;

}

.metar-circle{

  fill:none;

  stroke:currentColor;

  stroke-width:2;

  opacity:.4;

}

.metar-tick-major{

  stroke:currentColor;

  stroke-width:2;

  opacity:1;

}

.metar-tick-minor{

  stroke:currentColor;

  stroke-width:1;

  opacity:.25;

}

.metar-tick{

  stroke:currentColor;

  stroke-width:1;

  opacity:.7;

}

.metar-label{
  dominant-baseline: middle;
text-anchor:middle;
dominant-baseline:middle;
  fill:currentColor;

  font-size:14px;

  text-anchor:middle;

}

.metar-runway{

  stroke:#ffffff;

  stroke-width:6;

  stroke-linecap:round;

}

body.light .metar-runway{

  stroke:#111111;

}

.metar-wind{

  stroke:#ef4444;

  stroke-width:3;

  stroke-linecap:round;

  fill:none;

}