: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;
}

.btn-active{
  background:#f97316 !important;
  color:#fff !important;
}

button[data-layer]{

    min-height:36px;
    padding:6px 10px;

    font-size:13px;
    font-weight:500;

    border-radius:14px;

    background:#334155;
    color:white;
}

body.light button[data-layer]{

    background:white;
    color:#111;
    border:1px solid #cbd5e1;
}


.btn-active{

  background:#f97316 !important;

  color:white !important;

  font-weight:600;

  box-shadow:
    0 0 10px rgba(249,115,22,.35);

}

/* =========================
   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;
}*/

body.light input,
body.light select{

  background:#ffffff;
  color:#111;

  border:2px solid #94a3b8;
}

body.light input::placeholder{

  color:#64748b;
}

body.light input,
body.light select{

  background:#ffffff;
  color:#111;

  border:2px solid #94a3b8;

  border-radius:8px;
}

/* =========================
   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:400;
}

/* =========================
   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;
}
.flight-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 20px;
  width:max-content;
  margin:0 auto;
}

.flight-grid div{
  text-align:left;
  font-weight:400;
}
/* =========================
   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-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:red;
  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;

}

/* =========================
   AEROLOGIE
========================= */

.aero-column{

  width:100%;

  margin:0;

  padding:18px;

  border-radius:18px;

  background:rgba(255,255,255,0.03);

}

body.light .aero-column{

  background:rgba(15,23,42,0.04);

}

.aero-title{

  text-align:center;

  font-size:28px;

  font-weight:700;

  margin-bottom:20px;

}

.aero-level{

  position:relative;
  display:grid;
  grid-template-columns:
    105px
    20px
    100px;
  align-items:center;
  min-height:42px;
  justify-content:center;
  column-gap:12px;
}

.aero-alt{

  width:80px;

  text-align:right;

  font-weight:600;

}

.aero-value{

  width:90px;

  text-align:left;

  font-weight:600;

}

.aero-dot{

  width:14px;

  height:14px;

  border-radius:50%;

  background:#94a3b8;

  position:relative;

  z-index:2;

}

.aero-line{

  position:absolute;

  left:50%;

  top:24px;

  width:2px;

  height:42px;

  transform:translateX(-50%);

  background:rgba(255,255,255,0.15);

}

body.light .aero-line{

  background:rgba(15,23,42,0.15);

}

.aero-level:last-child .aero-line{

  display:none;

}
/* =========================
   AERO GRID
========================= */

.aero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start;
  text-align:center;
}


.aero-summary-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:10px;

}

.aero-summary-card{

  padding:12px;
  border-radius:14px;
border:1px solid rgba(255,255,255,0.18);
background:#334155;
box-shadow:
  0 4px 12px rgba(0,0,0,0.20);

}

body.light .aero-summary-card{

  border:1px solid rgba(15,23,42,0.10);

  background:rgba(15,23,42,0.03);

}

.aero-summary-title{
  text-align:left;
  font-size:15px;
  font-weight:600;
  margin-bottom:10px;
}

.aero-summary-line{
  line-height:1.5;
  font-size:14px;
  font-weight:400;
}

#profileUpdate{
  font-weight:400;
  font-size:13px;
  opacity:0.75;
}
#aeroComment{
  font-weight:400;
  font-size:14px;
  font-style:italic;
  line-height:1.6;
  text-align:left;
  opacity:0.9;

  margin-bottom:14px;
  padding:10px 12px;

  border-left:3px solid rgba(59,130,246,0.8);

  background:rgba(255,255,255,0.03);

  border-radius:0 10px 10px 0;
}

/* =========================
   CONVERTISSEUR
========================= */

body.dark.convert-page .block:nth-child(1){
  background:linear-gradient(135deg,#6b450a,#3f2a06);
}

body.dark.convert-page .block:nth-child(2){
  background:linear-gradient(135deg,#1d4f8c,#12345e);
}

body.dark.convert-page .block:nth-child(3){
  background:linear-gradient(135deg,#198754,#0f5132);
}

body.dark.convert-page .block:nth-child(4){
  background:linear-gradient(135deg,#8b2f5d,#551a38);
}

body.dark.convert-page .block:nth-child(5){
  background:linear-gradient(135deg,#6f42c1,#432874);
}

body.dark.convert-page .block:nth-child(6){
  background:linear-gradient(135deg,#b02a37,#66151d);
}

body.dark.convert-page .block:nth-child(7){
  background:linear-gradient(135deg,#14b8a6,#115e59);
}

body.dark.convert-page .block:nth-child(8){
  background:linear-gradient(135deg,#f97316,#9a3412);
}


/* MODE CLAIR */
body.light {
  background: #dde3ea;
  color: #111;
}

body.light .block {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

body.light .block:nth-child(1) { background: #fefce8; } /* jaune très léger */
body.light .block:nth-child(2) { background: #f0f9ff; } /* bleu très léger */
body.light .block:nth-child(3) { background: #f0fdf4; } /* vert très léger */
body.light .block:nth-child(4) { background: #fdf2f8; } /* rose très léger */
body.light .block:nth-child(5) { background: #f5f3ff; } /* violet très léger */
body.light .block:nth-child(6) { background: #fef2f2; } /* rouge très léger */
body.light .block:nth-child(7){
  background:#ccfbf1;
}

body.light .block:nth-child(8){
  background:#fed7aa;
}


#guideContent a,

.forecast-grid-2 a{

  color: inherit;

  text-decoration: none;

  font-weight: 500;

}

#guideContent a:hover,
.forecast-grid-2 a:hover{

  opacity: 0.8;
  cursor:pointer;

}

/* =========================
   GUIDE UTILISATEUR
========================= */

.userguide .block-title{

  display:inline-block;

  padding:10px 20px;

  margin-bottom:18px;

  border-radius:999px;

  background:#A5260A;

  color:white;

  font-size:16px;

  font-weight:700;
}

body.light.userguide .block-title{

  background:#E1CE9A;

  color:black;

  box-shadow:
    0 2px 8px rgba(0,0,0,0.12);
}

.userguide a[href="#top"]{

  display:inline-block;

  padding:8px 16px;

  border-radius:999px;

  background:#A5260A;

  color:white !important;

  text-decoration:none;

  font-weight:700;
}

body.light.userguide a[href="#top"]{

  background:#E1CE9A;

  color:black !important;

  box-shadow:

    0 2px 8px rgba(0,0,0,0.12);

}

body.light .timeline-card.timeline-go{
    box-shadow:0 0 14px #ef4444; !important;
}

/* =========================
   LIENS GLOBAUX
========================= */

a{
    text-decoration:none;
    transition:opacity .15s ease;
}

body.dark a{
    color:#fff;
}

body.light a{
    color:#111;
}

a:hover{
    opacity:.8;
}

a:visited{
    color:inherit;
}

a:active{
    color:inherit;
}

body.dark #quickStatus{
    background:#1e293b;
    color:#fff;

    border-radius:22px;
    box-shadow:0 10px 25px rgba(0,0,0,.30);
}

.title-icon{
    width:40px;
    height:40px;
    vertical-align:-6px;
    margin-right:8px;
}