@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --void:#14120F;
  --panel:#1D1A15;
  --panel-2:#242018;
  --line:#3A342A;
  --ember:#E8590C;
  --ember-deep:#B23A0A;
  --maquis:#6B7A4F;
  --maquis-dark:#3E4A2E;
  --eau:#3FA9B5;
  --sable:#C9BFA8;
  --sable-dim:#8C8570;
  --alert:#D9403A;
  --ok:#7FA968;
  --ciel:#7FB3D5;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--void);color:var(--sable);font-family:'Archivo',sans-serif;height:100%;}
::selection{background:var(--ember);color:var(--void);}

h1,h2,h3,.display{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:0.04em;}
.mono{font-family:'JetBrains Mono',monospace;}

.shell{display:grid;grid-template-columns:1fr 380px;grid-template-rows:auto 1fr;height:100vh;}
@media (max-width:900px){.shell{grid-template-columns:1fr;grid-template-rows:auto 50vh 1fr;}}

header{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  background:linear-gradient(180deg,#1a1712,var(--void));
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:34px;height:34px;border-radius:3px;
  background:linear-gradient(135deg,var(--ember),var(--ember-deep));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 18px rgba(232,89,12,0.45);
  flex-shrink:0;
}
.brand-mark svg{width:19px;height:19px;}
.brand-text h1{font-size:19px;margin:0;color:var(--sable);letter-spacing:0.06em;}
.brand-text p{margin:0;font-size:10.5px;color:var(--sable-dim);letter-spacing:0.12em;text-transform:uppercase;}
.clock{font-size:12px;color:var(--sable-dim);text-align:right;}
.clock b{color:var(--ember);display:block;font-size:15px;letter-spacing:0.05em;}

.mapcol{position:relative;background:#0F0D0A;overflow:hidden;}
#map{position:absolute;inset:0;width:100%;height:100%;}

.map-overlay-top{
  position:absolute;top:14px;left:14px;right:14px;z-index:5;
  display:flex;justify-content:space-between;align-items:flex-start;
  pointer-events:none;
}
.pill{
  pointer-events:auto;
  background:rgba(20,18,15,0.9);border:1px solid var(--line);
  padding:8px 12px;border-radius:4px;font-size:11.5px;color:var(--sable-dim);
  backdrop-filter:blur(4px);
}
.pill b{color:var(--sable);font-weight:600;}

.timeline{
  position:absolute;bottom:16px;left:16px;right:16px;z-index:5;
  background:rgba(20,18,15,0.94);border:1px solid var(--line);border-radius:6px;
  padding:14px 18px;backdrop-filter:blur(6px);
}
.timeline-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.timeline-head span{font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sable-dim);}
.timeline-head b{font-family:'JetBrains Mono',monospace;color:var(--ember);font-size:15px;}
input[type=range]{
  -webkit-appearance:none;width:100%;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--maquis-dark),var(--ember));outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--sable);border:2px solid var(--ember-deep);cursor:pointer;margin-top:-6px;
}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--sable);border:2px solid var(--ember-deep);cursor:pointer;}
.timeline-marks{display:flex;justify-content:space-between;font-size:9.5px;color:var(--sable-dim);margin-top:4px;font-family:'JetBrains Mono',monospace;}

.quick-horizons{display:flex;gap:6px;margin-bottom:10px;}
.qh-btn{
  flex:1;padding:7px 4px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px;color:var(--sable-dim);font-size:10.5px;cursor:pointer;
  transition:all .15s;font-family:'Archivo',sans-serif;
}
.qh-btn:hover{border-color:var(--ember);color:var(--sable);}
.qh-btn.active{background:linear-gradient(180deg,var(--ember),var(--ember-deep));border-color:var(--ember-deep);color:#fff;}

.side{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:0 0 40px 0;}
.section{padding:18px 20px;border-bottom:1px solid var(--line);}
.section h2{font-size:13px;color:var(--ember);margin:0 0 12px 0;letter-spacing:0.1em;display:flex;align-items:center;gap:8px;}
.section h2::before{content:'';width:4px;height:4px;background:var(--ember);border-radius:50%;box-shadow:0 0 6px var(--ember);}
.field{margin-bottom:14px;}
.field:last-child{margin-bottom:0;}
.field label{display:flex;justify-content:space-between;font-size:11px;color:var(--sable-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;}
.field label b{color:var(--sable);font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:0;}

.dropzone{
  border:1.5px dashed var(--line);border-radius:5px;padding:16px;text-align:center;
  cursor:pointer;transition:border-color .15s, background .15s;font-size:11.5px;color:var(--sable-dim);
}
.dropzone:hover{border-color:var(--ember);background:rgba(232,89,12,0.05);}
.dropzone.has-img{border-style:solid;border-color:var(--maquis);padding:0;overflow:hidden;}
.dropzone img{width:100%;height:90px;object-fit:cover;display:block;}
.density-readout{margin-top:10px;display:flex;align-items:center;gap:10px;}
.density-bar{flex:1;height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden;border:1px solid var(--line);}
.density-fill{height:100%;background:linear-gradient(90deg,#8FA36B,#4A5A2E);width:0%;transition:width .4s;}
.density-val{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--sable);min-width:34px;text-align:right;}

.compass-wrap{display:flex;align-items:center;gap:16px;}
.compass{width:96px;height:96px;position:relative;flex-shrink:0;}
.compass svg{width:100%;height:100%;}
.compass-dot{fill:var(--ember);cursor:grab;}
.wind-stats{font-size:11px;color:var(--sable-dim);line-height:1.9;}
.wind-stats b{color:var(--sable);font-family:'JetBrains Mono',monospace;}

button.run{
  width:100%;padding:13px;margin-top:4px;
  background:linear-gradient(180deg,var(--ember),var(--ember-deep));
  border:none;border-radius:5px;color:#fff;font-family:'Oswald',sans-serif;
  font-size:14px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 4px 14px rgba(232,89,12,0.28);transition:transform .1s;
}
button.run:active{transform:scale(0.98);}
button.run:disabled{opacity:0.5;cursor:not-allowed;}

button.ghost{
  width:100%;padding:10px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:5px;color:var(--sable-dim);font-size:11.5px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
button.ghost:hover{border-color:var(--eau);color:var(--sable);}

.headfire-card{
  background:linear-gradient(135deg,rgba(232,89,12,0.14),rgba(178,58,10,0.05));
  border:1px solid var(--ember-deep);border-radius:6px;padding:14px;
}
.headfire-card .label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#F0A876;}
.headfire-card .value{font-family:'Oswald',sans-serif;font-size:22px;color:#fff;margin:3px 0 8px 0;}
.headfire-card .sub{font-size:11px;color:var(--sable-dim);line-height:1.6;}
.headfire-card .sub b{color:var(--sable);}

.tier-badge{
  margin-top:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
  padding:10px 12px;
}
.tier-name{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ember);}
.tier-note{font-size:10.5px;color:var(--sable-dim);line-height:1.5;margin-top:4px;}

.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}.res-card{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:10px 12px;}
.res-card .n{font-family:'Oswald',sans-serif;font-size:24px;color:var(--eau);line-height:1;}
.res-card.fire .n{color:var(--ember);}
.res-card .lbl{font-size:10px;color:var(--sable-dim);text-transform:uppercase;letter-spacing:0.06em;margin-top:4px;}

.disclaimer{
  font-size:10.5px;color:var(--sable-dim);line-height:1.6;
  background:var(--panel-2);border-left:2px solid var(--alert);padding:10px 12px;border-radius:0 4px 4px 0;
}
.disclaimer b{color:var(--alert);}

/* moyens & casernes */
.select, .textinput{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;
  color:var(--sable);padding:9px 10px;font-size:12.5px;font-family:'Archivo',sans-serif;
}
.select:focus, .textinput:focus{outline:none;border-color:var(--ember);}
textarea.textinput{resize:vertical;font-family:'Archivo',sans-serif;}
.ghost.armed{border-color:var(--ember);color:#fff;background:rgba(232,89,12,0.12);}

.resource-list{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.resource-item{
  display:flex;align-items:center;gap:8px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:5px;padding:8px 10px;
  transition:opacity .15s;
}
.resource-item.inactive{opacity:0.55;}
.resource-item .toggle{
  flex-shrink:0;width:15px;height:15px;accent-color:var(--ember);cursor:pointer;
}
.resource-item .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.resource-item .info{flex:1;min-width:0;}
.resource-item .name{font-size:11.5px;color:var(--sable);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.resource-item .type{font-size:10px;color:var(--sable-dim);text-transform:uppercase;letter-spacing:0.04em;}
.resource-item .auto-tag{
  font-size:8.5px;background:var(--eau);color:var(--void);padding:1px 5px;border-radius:3px;
  text-transform:uppercase;letter-spacing:0.04em;font-weight:700;margin-left:5px;
}
.resource-item .suggested-tag{
  font-size:8.5px;background:var(--ember);color:#fff;padding:1px 5px;border-radius:3px;
  text-transform:uppercase;letter-spacing:0.04em;font-weight:700;margin-left:5px;
}
.resource-item .qtyinput{
  width:42px;flex-shrink:0;background:var(--void);border:1px solid var(--line);border-radius:4px;
  color:var(--sable);font-size:11px;padding:4px 5px;text-align:center;font-family:'JetBrains Mono',monospace;
}
.resource-item .qtyinput:focus{outline:none;border-color:var(--ember);}
.resource-item .remove{
  background:none;border:none;color:var(--sable-dim);cursor:pointer;font-size:15px;
  padding:2px 4px;line-height:1;flex-shrink:0;
}
.resource-item .remove:hover{color:var(--alert);}
.resource-empty{font-size:11px;color:var(--sable-dim);text-align:center;padding:10px 0;font-style:italic;}
.hint-note{font-size:10px;color:var(--sable-dim);line-height:1.5;margin-top:9px;font-style:italic;}
.hint-note b{color:var(--sable);font-style:normal;}

/* itinéraires */
.routes-list{margin-top:12px;display:flex;flex-direction:column;gap:7px;}
.route-item{
  display:flex;align-items:center;gap:10px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:5px;padding:9px 10px;
}
.route-rank{
  width:20px;height:20px;border-radius:50%;background:var(--void);
  display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;color:var(--sable-dim);flex-shrink:0;border:1px solid var(--line);
}
.route-item:first-child .route-rank{background:var(--ember);color:#fff;border-color:var(--ember);}
.route-info{flex:1;min-width:0;}
.route-name{font-size:11.5px;color:var(--sable);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.route-meta{font-size:11px;color:var(--sable-dim);margin-top:2px;}
.eta-ok{color:var(--ok);font-family:'JetBrains Mono',monospace;}
.eta-bad{color:var(--alert);font-family:'JetBrains Mono',monospace;}
.route-fail{font-size:10.5px;color:var(--sable-dim);font-style:italic;}

/* masquer les contrôles Google Maps par défaut pour un look tactique épuré */
.gm-style-cc, a[href^="https://maps.google.com/maps"]{display:none !important;}

/* lisibilité du texte libre posé sur la carte (fond satellite variable) */
.map-text-label{
  text-shadow: -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 1px 1px 2px #000, 0 0 6px #000;
  white-space: nowrap;
}