/* ================================================================ */
/* CENTRALE DE SURVEILLANCE - habillage militaire                    */
/* ================================================================ */

:root {
  --vert: #6fdc8c;
  --vert-clair: #a5e6a0;
  --orange: #f0b93a;
  --orange-clair: #f5c95c;
  --rouge: #ff7a6b;
  --rouge-clair: #ff9a8e;
  --calme: #4d5a38;
  --kaki: #6c6a3f;
  --texte: #e6e4cf;
  --texte-fort: #f1efdc;
  --discret: #c2c08f;
  --police-pochoir: "Saira Stencil One", "Arial Black", sans-serif;
  --police-mono: "JetBrains Mono", ui-monospace, monospace;
  --police-texte: Inter, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--texte);
  font-family: var(--police-texte);
  /* Le camouflage : des taches vert foncé, kaki et marron, répétées sur toute la page */
  background-color: #39421f;
  background-image:
    radial-gradient(ellipse 150px 70px at 14% 16%, #232b13 0 98%, transparent 100%),
    radial-gradient(ellipse 110px 120px at 46% 9%, #5b4527 0 98%, transparent 100%),
    radial-gradient(ellipse 170px 80px at 82% 22%, #6c6a3f 0 98%, transparent 100%),
    radial-gradient(ellipse 90px 140px at 30% 46%, #6c6a3f 0 98%, transparent 100%),
    radial-gradient(ellipse 190px 90px at 66% 52%, #232b13 0 98%, transparent 100%),
    radial-gradient(ellipse 120px 80px at 94% 64%, #5b4527 0 98%, transparent 100%),
    radial-gradient(ellipse 160px 100px at 10% 78%, #5b4527 0 98%, transparent 100%),
    radial-gradient(ellipse 130px 70px at 44% 88%, #232b13 0 98%, transparent 100%),
    radial-gradient(ellipse 150px 110px at 78% 92%, #6c6a3f 0 98%, transparent 100%);
  background-size: 760px 620px;
}

.centrale {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Un cadre : noir brillant, bordure kaki */
.cadre {
  background: linear-gradient(165deg, #2a2a2a 0%, #0b0b0b 22%, #000000 60%);
  border: 2px solid var(--kaki);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 18px rgb(0 0 0 / 0.55);
}

h1,
h2 {
  margin: 0;
  font-family: var(--police-pochoir);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--texte-fort);
}

h1 {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  letter-spacing: 0.04em;
}

h2 {
  font-size: clamp(1.1rem, 3.6vw, 1.4rem);
  letter-spacing: 0.06em;
}

p {
  margin: 0;
}

.mono {
  font-family: var(--police-mono);
  font-size: 0.875rem;
}

.petit {
  font-size: 0.78rem;
}

.discret {
  color: var(--discret);
}

.sur-titre {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--discret);
}

/* Les couleurs des nombres et des détails */
.nombre.vert,
.detail.vert {
  color: var(--vert-clair);
}
.nombre.rouge {
  color: var(--rouge-clair);
}
.nombre.orange,
.detail.orange {
  color: var(--orange-clair);
}

/* ------------------------------------------------------------------ */
/* Les témoins lumineux                                                */
/* ------------------------------------------------------------------ */

.temoin {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--calme);
}
.temoin.vert {
  background: var(--vert);
}
.temoin.orange {
  background: var(--orange);
}
.temoin.rouge {
  background: var(--rouge);
}
.temoin.vert.allume {
  box-shadow: 0 0 10px var(--vert);
}
.temoin.orange.allume {
  box-shadow: 0 0 10px var(--orange);
}
.temoin.rouge.allume {
  box-shadow: 0 0 10px var(--rouge);
}

.clignote {
  animation: clignote 1.1s ease-in-out infinite;
}

@keyframes clignote {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ------------------------------------------------------------------ */
/* L'en-tête                                                           */
/* ------------------------------------------------------------------ */

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}

.entete-titres {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.entete-titres p {
  font-size: 0.94rem;
  color: var(--discret);
}

.entete-etats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.pastille-scan {
  border: 1px solid #4f7a45;
  font-family: var(--police-mono);
  letter-spacing: 0.08em;
  color: var(--vert-clair);
}

.pastille-exemple {
  border: 1px dashed #a9a66b;
  color: #e9dc9a;
}

/* ------------------------------------------------------------------ */
/* La rangée du haut : le sonar à gauche, les compteurs et la cible   */
/* ------------------------------------------------------------------ */

.rangee-haute {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.sonar {
  flex: 1 1 380px;
  min-width: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.sonar-tete {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.colonne-droite {
  flex: 999 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* L'écran rond du sonar */
.ecran {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, #1d3317 0%, #0c1409 72%);
  border: 3px solid var(--kaki);
  box-shadow: 0 0 0 6px #232b13;
  overflow: hidden;
}

.anneau {
  position: absolute;
  border: 1px solid #2f4a26;
  border-radius: 50%;
}
.anneau-1 {
  inset: 16.6%;
}
.anneau-2 {
  inset: 33.3%;
}

.axe {
  position: absolute;
  background: #2f4a26;
}
.axe-vertical {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}
.axe-horizontal {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

/* Le rayon qui tourne : un dégradé en éventail, qui fait un tour en 4 secondes */
.rayon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgb(111 220 140 / 0) 0deg,
    rgb(111 220 140 / 0) 290deg,
    rgb(111 220 140 / 0.42) 359deg,
    rgb(190 245 200 / 0.95) 360deg
  );
  animation: balayage 4s linear infinite;
}

@keyframes balayage {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.centre {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--texte);
}

/* Un point = un site. Il s'allume quand le rayon passe, puis il pâlit. */
.point {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--calme);
  animation: echo 4s linear infinite;
}
.point.actif {
  width: 16px;
  height: 16px;
}
.point.vert {
  background: var(--vert);
  box-shadow: 0 0 12px var(--vert);
}
.point.orange {
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange);
}
.point.rouge {
  background: var(--rouge);
  box-shadow: 0 0 12px var(--rouge);
}

@keyframes echo {
  0%,
  6% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
  }
  60% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* L'onde qui s'élargit autour d'un point en alerte ou sélectionné */
.onde {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--calme);
  animation: onde 1.8s ease-out infinite;
}
.onde.vert {
  border-color: var(--vert);
}
.onde.orange {
  border-color: var(--orange);
}
.onde.rouge {
  border-color: var(--rouge);
}

@keyframes onde {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
}

.legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-size: 0.8rem;
  color: #d6d4b4;
}

.legende li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legende .temoin {
  width: 10px;
  height: 10px;
}

/* ------------------------------------------------------------------ */
/* Les trois compteurs                                                 */
/* ------------------------------------------------------------------ */

.compteurs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.compteur {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
}

.nombre {
  font-family: var(--police-mono);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* La cible sélectionnée et les lignes de témoins                      */
/* ------------------------------------------------------------------ */

.cible {
  flex: 1 1 auto;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cible-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.cible-tete .mono {
  overflow-wrap: anywhere;
}

.cible p.discret {
  font-size: 0.875rem;
}

.lignes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  background: #141414;
  border-left: 4px solid var(--kaki);
  border-radius: 4px;
}

.ligne-nom {
  flex: 1 1 auto;
  font-size: 0.94rem;
}

.aide {
  font-size: 0.8rem;
  color: #b4b28a;
}

/* ------------------------------------------------------------------ */
/* Le catalogue des sites                                              */
/* ------------------------------------------------------------------ */

.catalogue {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.catalogue-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  transition: border-color 0.2s ease;
}

.carte:hover {
  border-color: #a9a66b;
}

/* La partie de la carte qu'on touche pour sélectionner le site */
.carte-zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}

.carte-zone:focus-visible {
  outline: 2px solid var(--vert-clair);
  outline-offset: 3px;
}

/* Les deux boutons d'un site, côte à côte */
.liaison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
}

.bouton:focus-visible {
  outline: 2px solid var(--vert-clair);
  outline-offset: 3px;
}

/* Connexion : ouvre le site dans un nouvel onglet. Vert, comme le bouton « success » de Bootstrap. */
.bouton.connexion {
  background: #198754;
  border-color: #198754;
  color: #ffffff;
}

.bouton.connexion:hover {
  background: #157347;
  border-color: #146c43;
}

/* Déconnexion : referme l'onglet. Rouge, comme le bouton « danger » de Bootstrap.
   Pâli tant qu'aucun onglet n'est ouvert. */
.bouton.deconnexion {
  background: #dc3545;
  border-color: #dc3545;
  color: #ffffff;
}

.bouton.deconnexion:hover:not(:disabled) {
  background: #bb2d3b;
  border-color: #b02a37;
}

.bouton.deconnexion:disabled {
  opacity: 0.45;
  cursor: default;
}

.bouton.absent {
  grid-column: 1 / -1;
  background: none;
  border: 1px dashed var(--kaki);
  color: var(--discret);
  font-weight: 400;
  cursor: default;
}

.cible .liaison {
  max-width: 340px;
  margin-top: 0;
}

/* Texte lu par les lecteurs d'écran, invisible à l'écran */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le site sélectionné : bordure verte et reflet vert */
.carte.actif {
  border-color: var(--vert);
  background: linear-gradient(165deg, #24402a 0%, #0a140c 26%, #000000 64%);
}

.carte-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.carte-nom {
  font-family: var(--police-pochoir);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--texte-fort);
}

.adresse {
  overflow-wrap: anywhere;
  color: #b4b28a;
}

.carte-temoins {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.carte-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
}

/* ------------------------------------------------------------------ */
/* Les rappels de mises à jour                                         */
/* ------------------------------------------------------------------ */

.rappels {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rappel.orange {
  border-left-color: var(--orange);
}

.rappel.vert {
  border-left-color: var(--vert);
}

.rappel .ligne-nom {
  flex: 1 1 240px;
}

/* ------------------------------------------------------------------ */
/* Téléphone                                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 560px) {
  .centrale {
    padding: 14px 10px 40px;
    gap: 14px;
  }

  .entete,
  .sonar,
  .cible,
  .rappels {
    padding: 16px;
  }

  /* Les trois compteurs restent côte à côte, en plus serré */
  .compteurs {
    gap: 8px;
  }

  .compteur {
    padding: 10px;
    font-size: 0.72rem;
  }
}

/* Les personnes qui ont demandé moins d'animations : tout reste fixe */
@media (prefers-reduced-motion: reduce) {
  .rayon,
  .point,
  .onde,
  .clignote {
    animation: none;
  }
}