/* ===================================================================
   SDIS·TV — Portail national
   Palette
   --void        #0B0F0D  fond général
   --panel       #121712  surfaces
   --panel-2     #171D18  surfaces surélevées
   --line        #223027  grille / séparateurs
   --idle        #2E3A31  département inactif
   --idle-hover  #3E4C41  département survolé
   --beacon      #E4291B  accent unique — le seul poste actif
   --beacon-dim  #5C1610  halo / bordures rouge
   --text        #ECE8DD  texte principal
   --text-muted  #7C8A7E  texte secondaire
   --text-faint  #47534B  texte tertiaire
   =================================================================== */

@font-face{
  font-family:'Big Shoulders Stencil';
  src:url('fonts/big-shoulders-stencil-latin-700-normal.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Big Shoulders Stencil';
  src:url('fonts/big-shoulders-stencil-latin-800-normal.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('fonts/oswald-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('fonts/oswald-latin-500-normal.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('fonts/oswald-latin-600-normal.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Oswald';
  src:url('fonts/oswald-latin-700-normal.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{
  --void:#0B0F0D;
  --panel:#121712;
  --panel-2:#171D18;
  --line:#22302799;
  --idle:#2E3A31;
  --idle-hover:#4C5E51;
  --beacon:#E4291B;
  --beacon-soft:#E4291B55;
  --beacon-dim:#5C1610;
  --text:#ECE8DD;
  --text-muted:#8A978C;
  --text-faint:#4B5750;
}

*{box-sizing:border-box;}
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
html,body{height:100%;}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---- fond grille tactique ---- */
.grid-overlay{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:0.35;
  mask-image:radial-gradient(ellipse 80% 70% at 60% 40%, #000 40%, transparent 90%);
}

.corner-tick{
  position:fixed;
  z-index:1;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--text-faint);
  pointer-events:none;
}
.corner-tick.tl{top:14px; left:14px;}
.corner-tick.tr{top:14px; right:14px; text-align:right;}
.corner-tick.bl{bottom:14px; left:14px;}
.corner-tick.br{bottom:14px; right:14px; text-align:right;}

/* ---- en-tête ---- */
.topbar{
  position:relative;
  z-index:2;
  padding:38px clamp(20px,4vw,64px) 10px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  border-bottom:1px solid var(--line);
}
.brand-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.22em;
  color:var(--beacon);
  text-transform:uppercase;
  margin:0 0 6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.brand-eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--beacon);
  box-shadow:0 0 8px 1px var(--beacon-soft);
  animation:blink 2.6s ease-in-out infinite;
}
.brand-title{
  font-family:'Big Shoulders Stencil', sans-serif;
  font-weight:800;
  font-size:clamp(38px,6vw,64px);
  letter-spacing:0.03em;
  margin:0;
  line-height:0.9;
  color:var(--text);
}
.brand-title span{color:var(--beacon);}
.brand-sub{
  font-family:'Oswald', sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:0.03em;
  color:var(--text-muted);
  margin:8px 0 0;
  max-width:36ch;
}
.topbar-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--text-faint);
  text-align:right;
  line-height:1.6;
}
.topbar-meta b{color:var(--text-muted); font-weight:500;}

/* ---- disposition principale ---- */
.stage{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,420px);
  gap:0;
  align-items:stretch;
  min-height:calc(100vh - 150px);
}

.map-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px clamp(10px,3vw,40px);
  border-right:1px solid var(--line);
  overflow:hidden;
}

.map-wrap{
  position:relative;
  width:100%;
  max-width:720px;
}

.map-wrap svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}

/* départements */
.map-wrap path{
  fill:var(--idle);
  stroke:var(--void);
  stroke-width:0.6;
  transition:fill 0.25s ease, filter 0.25s ease;
  cursor:not-allowed;
}
.map-wrap path.is-active{
  fill:var(--beacon);
  cursor:pointer;
  filter:drop-shadow(0 0 6px var(--beacon-soft));
  animation:pulseDept 2.6s ease-in-out infinite;
}
.map-wrap path.is-active:hover,
.map-wrap path.is-active:focus-visible{
  fill:#FF4B3A;
  outline:none;
}
.map-wrap path.is-hoverable:hover{
  fill:var(--idle-hover);
}
.map-wrap path:focus-visible{
  outline:2px solid var(--beacon);
  outline-offset:1px;
}

/* balayage radar */
.scan-sweep{
  position:absolute;
  inset:-15%;
  border-radius:50%;
  pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, var(--beacon-soft) 8deg, transparent 22deg, transparent 360deg);
  animation:sweep 7s linear infinite;
  mix-blend-mode:screen;
  opacity:0.55;
}

.legend{
  display:flex;
  gap:22px;
  margin-top:22px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--text-muted);
  flex-wrap:wrap;
  justify-content:center;
}
.legend-item{display:flex; align-items:center; gap:8px;}
.legend-dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
.legend-dot.active{background:var(--beacon); box-shadow:0 0 6px var(--beacon-soft);}
.legend-dot.idle{background:var(--idle); border:1px solid var(--text-faint);}

/* ---- panneau latéral ---- */
.control-panel{
  padding:32px clamp(18px,3vw,36px);
  display:flex;
  flex-direction:column;
  gap:24px;
  background:linear-gradient(180deg, var(--panel), var(--void) 85%);
}

.panel-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0 0 10px;
}

.status-card{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-left:3px solid var(--beacon);
  padding:20px;
  transition:border-color 0.2s ease;
}
.status-card.is-inactive{border-left-color:var(--text-faint);}
.status-card .code{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--beacon);
  letter-spacing:0.1em;
}
.status-card.is-inactive .code{color:var(--text-faint);}
.status-card .name{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:22px;
  margin:4px 0 8px;
  letter-spacing:0.01em;
}
.status-card .desc{
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.55;
  margin:0 0 16px;
}
.btn-access{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--beacon);
  color:#1A0D02;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:0.03em;
  padding:11px 18px;
  border:none;
  text-decoration:none;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.15s ease;
}
.btn-access:hover{background:#FF4B3A;}
.btn-access:active{transform:translateY(1px);}
.btn-access:disabled{
  background:var(--idle);
  color:var(--text-faint);
  cursor:not-allowed;
}
.btn-access:focus-visible{outline:2px solid var(--text); outline-offset:2px;}

.status-tag{
  margin-top:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-faint);
}

.quick-access{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.quick-access select{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  font-size:13.5px;
  padding:11px 12px;
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:calc(100% - 18px) center, calc(100% - 13px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.quick-access select:focus-visible{outline:2px solid var(--beacon); outline-offset:1px;}
.quick-access option:disabled{color:var(--text-faint);}

.network-stats{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--text-muted);
  display:flex;
  justify-content:space-between;
}
.network-stats b{color:var(--beacon); font-weight:500;}

/* ---- pied de page ---- */
footer{
  position:relative;
  z-index:2;
  padding:16px clamp(20px,4vw,64px) 22px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--text-faint);
  border-top:1px solid var(--line);
}
footer a{color:var(--text-muted);}

/* ---- animations ---- */
@keyframes blink{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}
@keyframes pulseDept{
  0%,100%{filter:drop-shadow(0 0 3px var(--beacon-soft));}
  50%{filter:drop-shadow(0 0 11px var(--beacon-soft));}
}
@keyframes sweep{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* ---- responsive ---- */
@media (max-width: 900px){
  .stage{grid-template-columns:1fr;}
  .map-panel{border-right:none; border-bottom:1px solid var(--line);}
  .corner-tick{display:none;}
}
@media (max-width: 520px){
  .topbar{flex-direction:column;}
  .topbar-meta{text-align:left;}
}