/* ============================================================
   Compteur d'alarmes incendie — fire.armeldaveau.com
   ============================================================ */

:root {
  --bg: #08090c;
  --bg-2: #14161f;
  --ink: #f3f4f2;
  --ink-soft: #9aa0ab;
  --ink-faint: #626879;

  --red: #d8291c;
  --red-lit: #ff4033;
  --red-deep: #7d140d;
  --red-shadow: #4c0b06;

  --ivory: #f0ece0;
  --ivory-edge: #c7c1b0;

  --steel-1: #3a3d47;
  --steel-2: #22242c;
  --steel-3: #0f1014;

  --gold: #e6b800;

  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* , *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  height: 100dvh;
  color: var(--ink);
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(130% 90% at 50% -10%, #1b1f2c 0%, var(--bg-2) 40%, var(--bg) 100%);
  background-attachment: fixed;
  overflow: hidden;
}

/* Vignette qui assombrit les bords */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ------------------------------------------------- calques d'ambiance */

/* Halo rouge d'urgence qui « respire » derrière l'alarme */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(48% 42% at 50% 52%, rgba(216,41,28,.20), rgba(216,41,28,.05) 55%, transparent 72%);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* Bandes de danger jaunes/noires en haut et en bas */
.hazard {
  position: fixed;
  left: 0; right: 0;
  height: .42rem;
  z-index: 3;
  pointer-events: none;
  opacity: .22;
  background-image: repeating-linear-gradient(-45deg, var(--gold) 0 14px, #14140c 14px 28px);
  transition: opacity .3s ease;
}
.hazard--top { top: 0; }
.hazard--bottom { bottom: 0; }

/* Voile rouge du stroboscope */
.flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle at 50% 42%, rgba(255,48,36,.6), rgba(255,32,20,.18) 58%, transparent 80%);
  opacity: 0;
}
.flash.on { animation: siren 1.3s ease-out; }
@keyframes siren {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  22%  { opacity: .05; }
  38%  { opacity: .9; }
  55%  { opacity: .05; }
  70%  { opacity: .7; }
  100% { opacity: 0; }
}

/* ------------------------------------------------------- bascule langue */

.lang {
  position: fixed;
  top: calc(env(safe-area-inset-top) + .7rem);
  right: calc(env(safe-area-inset-right) + .8rem);
  z-index: 20;
  padding: .3rem .6rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--ink-faint);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.lang:hover { color: var(--ink); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.lang:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------- scène */

.stage {
  position: relative;
  z-index: 5;
  max-width: 34rem;
  height: 100dvh;
  margin: 0 auto;
  padding: clamp(.75rem, 2.5dvh, 1.75rem) 1.4rem calc(clamp(1.7rem, 4dvh, 2.6rem) + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "station" "tally";
  align-content: center;
  justify-items: center;
  gap: clamp(.5rem, 2dvh, 1.4rem);
  text-align: center;
}

.masthead      { grid-area: title; }
.station-wrap  { grid-area: station; }
.tally         { grid-area: tally; }

/* Paysage : l'alarme à gauche, le texte à droite, le tout centré */
@media (min-aspect-ratio: 1/1) and (min-width: 33rem) {
  .stage {
    max-width: min(58rem, 94vw);
    grid-template-columns: auto minmax(0, 22rem);
    grid-template-areas:
      "station title"
      "station tally";
    justify-content: center;
    justify-items: start;
    column-gap: clamp(1.5rem, 5vw, 3.5rem);
    row-gap: clamp(.4rem, 2dvh, 1rem);
    text-align: left;
  }
  .station-wrap { align-self: center; }
  .masthead     { align-self: end; }
  .tally        { align-self: start; justify-items: start; }
  .stats        { justify-content: flex-start; }
  .odometer     { justify-content: flex-start; }
}

/* --------------------------------------------------------------- titre */

.masthead { display: grid; gap: .5rem; }

.title {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.005em;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vh + 1rem, 2.6rem);
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 0%, #d7dae0 60%, #a9aeb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* ---------------------------------------------------- le pull station */

.station-wrap { display: grid; justify-items: center; }

.station {
  --w: min(15rem, 74vw, 36dvh);
  position: relative;
  width: var(--w);
  aspect-ratio: 5 / 7;
  padding: 8% 8% 6%;
  border: 0;
  cursor: pointer;
  border-radius: 18px;
  /* cadre métallique brossé */
  background:
    linear-gradient(145deg, var(--steel-1), var(--steel-3));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25),
    inset 0 -3px 8px rgba(0,0,0,.6),
    0 30px 50px -20px rgba(0,0,0,.9),
    0 4px 14px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .12s var(--ease-spring), box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* plaque rouge intérieure */
.station::before {
  content: "";
  position: absolute;
  inset: 5.5%;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ee4436 0%, var(--red) 32%, #c11f14 78%, var(--red-deep) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.35),
    inset 0 -8px 16px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(0,0,0,.15);
  z-index: 0;
}
/* reflet diagonal sur la plaque */
.station::after {
  content: "";
  position: absolute;
  inset: 5.5%;
  border-radius: 12px;
  background: linear-gradient(125deg, rgba(255,255,255,.22) 0%, transparent 38%);
  z-index: 1;
  pointer-events: none;
}

.station > * { position: relative; z-index: 2; }

.station:active { transform: translateY(2px) scale(.995); }
.station:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* vis aux quatre coins */
.station__bolt {
  position: absolute;
  z-index: 3;
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #c9c3b4 45%, #6d6858 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.5);
}
.station__bolt::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 60%; height: 2px; border-radius: 2px;
  background: rgba(0,0,0,.4);
}
.station__bolt--tl { top: .5rem; left: .5rem; }
.station__bolt--tr { top: .5rem; right: .5rem; }
.station__bolt--bl { bottom: .5rem; left: .5rem; }
.station__bolt--br { bottom: .5rem; right: .5rem; }

/* LED témoin : clignote doucement, se déchaîne en alarme */
.station__lamp {
  position: absolute;
  z-index: 3;
  top: 11%; right: 15%;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: #ff5a4d;
  box-shadow: 0 0 6px 1px rgba(255,64,51,.9), inset 0 0 0 1px rgba(0,0,0,.2);
  animation: pulse-lamp 2.6s ease-in-out infinite;
}
@keyframes pulse-lamp {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

.station__top {
  font-family: "Anton", "Barlow Condensed", sans-serif;
  font-size: clamp(1.5rem, 7vw, 2rem);
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 1px 0 var(--red-deep), 0 2px 4px rgba(0,0,0,.45);
  margin-bottom: 5%;
}

/* glissière sombre */
.channel {
  position: relative;
  width: 100%;
  flex: 1;
  border-radius: 9px;
  background: linear-gradient(180deg, #131418, #24262d);
  box-shadow:
    inset 0 3px 9px rgba(0,0,0,.75),
    inset 0 -2px 3px rgba(255,255,255,.05),
    0 1px 0 rgba(255,255,255,.18);
  overflow: hidden;
  padding: 5%;
}
.channel::before {
  content: "";
  position: absolute;
  inset: 8% 5% 5%;
  border-radius: 6px;
  background: repeating-linear-gradient(180deg, #17181d 0 7px, #202229 7px 14px);
  opacity: .85;
}

/* levier ivoire, un peu vitré */
.handle {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  height: 46%;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(180deg, #fdfbf5 0%, var(--ivory) 52%, #d8d2c0 100%);
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.5),
    0 1px 0 var(--ivory-edge);
  transition: transform .5s var(--ease-spring), box-shadow .3s ease;
  will-change: transform;
}
/* reflet qui balaie le levier */
.handle__sheen {
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg);
  animation: sweep 5.5s ease-in-out infinite;
}
@keyframes sweep {
  0%, 62%, 100% { left: -60%; }
  78%           { left: 130%; }
}

.handle__text {
  position: relative;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: clamp(.9rem, 4.2vw, 1.15rem);
  color: var(--red);
}
.handle__arrow {
  position: relative;
  font-size: .9rem;
  color: var(--red);
  line-height: .6;
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* état « tiré » */
.station.pulled .handle { transform: translateY(105%); }
.station.pulled .handle__arrow { animation: none; opacity: 0; }

.station__bottom {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: .1em;
  font-size: clamp(.6rem, 2.7vw, .72rem);
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  margin-top: 5%;
  line-height: 1.1;
}

/* --------------------------------------------------- compteur odomètre */

.tally { display: grid; justify-items: center; gap: .35rem; width: 100%; }

.odometer {
  display: inline-flex;
  gap: .02em;
  font-family: "Anton", "Barlow Condensed", sans-serif;
  font-size: clamp(3rem, 13dvh, 6.5rem);
  line-height: 1;
  color: var(--ink);
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.5));
  transition: filter .35s ease;
}
.odometer.lit { filter: drop-shadow(0 0 26px rgba(255,64,51,.75)); }
.odometer.lit .odo__d { color: #fff; }
.odometer.bump { animation: bump .5s var(--ease-spring); }
@keyframes bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* une colonne = une roue de chiffres */
.odo {
  position: relative;
  display: block;
  height: 1em;
  width: .64em;
  overflow: hidden;
  border-radius: .06em;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  box-shadow: inset 0 6px 10px -6px rgba(0,0,0,.85), inset 0 -6px 10px -6px rgba(0,0,0,.85);
}
.odo__strip {
  display: flex;
  flex-direction: column;
  transition: transform .62s var(--ease-out);
}
.odo__d {
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- stats */

.stats { display: flex; gap: 1.5rem; margin-top: clamp(.4rem, 1.4dvh, 1rem); }
.stat {
  display: grid;
  gap: .05rem;
  padding: clamp(.3rem, 1dvh, .5rem) 1.1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  min-width: 5.5rem;
}
.stat__num {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat__cap {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.last {
  margin: clamp(.5rem, 1.6dvh, 1rem) 0 0;
  font-size: .86rem;
  color: var(--ink-faint);
  min-height: 1.2em;
}

.undo {
  margin-top: .25rem;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: .84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: 6px;
}
.undo:hover { color: var(--ink-soft); }
.undo:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.credits {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(clamp(.6rem, 2dvh, 1.2rem) + env(safe-area-inset-bottom));
  z-index: 5;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--ink-faint);
}

/* -------------------------------------------------- état ALARME (body) */

body.alarm .ambient {
  animation: none;
  opacity: 1;
  background: radial-gradient(52% 46% at 50% 52%, rgba(255,48,36,.4), rgba(255,32,20,.12) 55%, transparent 74%);
}
body.alarm .hazard { opacity: .9; animation: hazard-roll .6s linear infinite; }
body.alarm .station__lamp { animation: strobe .16s steps(1) infinite; }
body.alarm .station-wrap { animation: shake .5s var(--ease-out); }

@keyframes hazard-roll { to { background-position: 39.6px 0; } }
@keyframes strobe { 0% { opacity: 1; } 50% { opacity: .1; } }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

.is-offline .station__lamp { background: var(--gold); box-shadow: 0 0 6px 1px rgba(230,184,0,.9); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
}