:root {
  --orange: #f7941d;
  --vert: #39b54a;
  --rouge: #c00000;
  --gris-fonce: #2d2d2d;
  --gris-clair: #f4f4f4;
  --bordure: #ddd;
}

* { box-sizing: border-box; }

/* Animation de chargement (modification 12, corrigée) : petit anneau lumineux orange,
   affiché juste à droite du message "Traitement en cours" déjà présent sur chaque
   écran (jamais à sa place), à peu près à la taille du texte. */
.ligne-traitement {
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}
.ligne-traitement.actif { display: flex; }
.ligne-traitement p { margin: 0; color: #777; }

.anneau-chargement-conteneur {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.anneau-chargement-conteneur svg {
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: anneau-rotation 1.6s linear infinite;
}

.anneau-fond {
  fill: none;
  stroke: rgba(0, 0, 0, 0.10);
  stroke-width: 10;
}

.anneau-arc {
  fill: none;
  stroke: var(--orange);
  stroke-width: 10;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px var(--orange)) drop-shadow(0 0 5px rgba(247, 148, 29, 0.75));
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  animation: anneau-dash 1.6s ease-in-out infinite;
}

/* Anneau indéterminé (jamais de pourcentage figé) : l'anneau entier tourne en continu
   pendant que le trait visible grandit puis se résorbe, en boucle sans fin — pour
   qu'un traitement long ne donne jamais l'impression d'un plantage. */
@keyframes anneau-rotation {
  100% { transform: rotate(360deg); }
}
@keyframes anneau-dash {
  0% { stroke-dashoffset: 326.7; }
  50% { stroke-dashoffset: 65; }
  100% { stroke-dashoffset: 326.7; }
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  margin: 0;
  background: var(--gris-clair);
  color: var(--gris-fonce);
}

header.topbar {
  position: relative;
  z-index: 3;
  background: white;
  border-bottom: 3px solid var(--orange);
  padding: 0.75rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header.topbar .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--gris-fonce);
}

header.topbar .brand .cie-orange { color: var(--orange); }
header.topbar .brand .cie-vert { color: var(--vert); }
header.topbar .brand .logo-brand { height: 34px; width: auto; }

nav a {
  margin-left: 1.2rem;
  text-decoration: none;
  color: var(--gris-fonce);
  font-weight: 500;
}

nav a:hover { color: var(--orange); }

main {
  max-width: 1200px;
  margin: 2rem auto;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

h1 { font-size: 1.5rem; margin-top: 0; }

.champ { margin-bottom: 1.2rem; }
.champ label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.champ input[type=text], .champ input[type=password], .champ input[type=file] {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.champ input[type=text]:hover, .champ input[type=password]:hover { border-color: var(--orange); }
.champ input[type=text]:focus, .champ input[type=password]:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.18);
}
.champ small { color: #777; }

.liste-fichiers {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: #555;
}
.liste-fichiers:empty { display: none; }

.champ-case .label-case {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}
.champ-case .label-case input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; }
.champ-case small { display: block; margin-top: 0.3rem; margin-left: 24px; }

.champ input[type=number] {
  width: 100%;
  max-width: 220px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.champ input[type=number]:hover { border-color: var(--orange); }
.champ input[type=number]:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.18);
}

.champ select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0.6rem 2.4rem 0.6rem 0.9rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background-color: white;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7941d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 16px;
  font-size: 1rem;
  font-family: inherit;
  color: #333;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.champ select:hover { border-color: var(--orange); }
.champ select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.18);
}

button, .bouton {
  background: var(--orange);
  color: white;
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
button:hover, .bouton:hover {
  background: #e0850f;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.16);
}
button:active, .bouton:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: transform 0.06s ease;
}
.bouton.secondaire { background: var(--vert); }
.bouton.secondaire:hover { background: #2f9a3c; }
.bouton.discret {
  background: white;
  color: var(--gris-fonce);
  border: 1px solid var(--bordure);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.bouton.discret:hover {
  background: var(--gris-clair);
  border-color: #ccc;
}

.erreur {
  background: #fdecea;
  color: var(--rouge);
  border: 1px solid #f5c6c6;
  padding: 0.7rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--bordure); }
th { font-size: 0.85rem; text-transform: uppercase; color: #777; }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.8rem; font-weight: 600; }
.badge.actif { background: #e6f7e9; color: var(--vert); }
.badge.inactif { background: #f0f0f0; color: #888; }

.badge-type { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 3px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.badge-type-rapport { background: #fdecdc; color: var(--orange); }
.badge-type-couverture { background: #e3f0fc; color: #1565c0; }
.badge-type-reseau { background: #e2f3e6; color: #2e7d32; }
.badge-type-zcd { background: #fdf3d9; color: #a17a00; }

.stat-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.stat-carte { background: var(--gris-clair); border-radius: 6px; padding: 1rem; text-align: center; }
.stat-carte .valeur { font-size: 1.7rem; font-weight: 700; }
.stat-carte.rejete .valeur { color: var(--rouge); }
.stat-carte.valide .valeur { color: var(--vert); }

.stat-carte.c-validee .valeur { color: var(--vert); }
.stat-carte.c-rejetee .valeur { color: var(--rouge); }
.stat-carte.c-sautee .valeur { color: #8e44ad; }
.stat-carte.c-corrigee .valeur { color: #0d9488; }
.stat-carte.c-non-validee .valeur { color: var(--orange); }
.stat-carte.c-totale .valeur { color: #1565c0; }

.portees-rejetees { font-size: 1.1rem; margin: 1.2rem 0; }

form.inline { display: inline; }

/* --- Page de connexion : diaporama de fond, accroche, carte --- */

body.login-page { min-height: 100vh; overflow-x: hidden; }

.login-page main {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bg-slideshow {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.bg-slideshow .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation-name: bgFade;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
}
/* animation-duration et animation-delay sont fixés en ligne par le serveur,
   en fonction du nombre réel d'images déposées dans static/background/ ;
   @keyframes bgFade (pourcentages) est aussi injecté en ligne pour la même raison. */

.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(20, 20, 20, 0.55);
}

.phrase-motivation {
  position: fixed;
  top: 5.5rem;
  right: 1.5rem;
  z-index: 4;
  pointer-events: none;
  max-width: 340px;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 300;
  color: #ffffff;
  line-height: 1.4;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.accroche {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 2;
  max-width: 320px;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 300;
  color: #d8d8d8;
  line-height: 1.4;
}

.carte-connexion {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}

.entete-connexion {
  text-align: center;
  margin-bottom: 1.5rem;
}

.entete-connexion .logo-connexion {
  height: 56px;
  width: auto;
}

.entete-connexion .sous-titre-connexion {
  margin-top: 0.4rem;
  font-weight: 700;
  color: var(--gris-fonce);
  font-size: 1rem;
}

.carte-connexion h1 { text-align: center; }

/* La page d'accueil gère sa propre mise en page pleine largeur (colonne de faits +
   cartes), comme la page de connexion — elle ne doit pas hériter de la carte blanche
   à 900px de <main> par défaut. Structure en colonne flex pour que la bande du bas
   (réassurance + copyright) reste toujours collée au bas de l'écran, au-dessus de
   l'image de fond qui ne doit jamais y apparaître. */
body.home-page { min-height: 100vh; display: flex; flex-direction: column; }

.home-page main {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* --- Barre "Retour à l'accueil" (pages secondaires) --- */

.barre-retour { margin: 1rem 0 0; padding: 0 1.5rem; }
.bouton-retour { font-size: 0.88rem; padding: 0.45rem 1.1rem; }

/* --- Pied de page (toutes les pages) --- */

footer.pied-page {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  color: #999;
  font-size: 0.8rem;
  padding: 2rem 1rem 1.5rem;
}

.pied-page-beta { margin-left: auto; }

@media (max-width: 560px) {
  footer.pied-page { flex-direction: column; gap: 0.3rem; }
  .pied-page-beta { margin-left: 0; }
}

/* Sur l'accueil, le pied de page prolonge la bande blanche opaque de la réassurance
   (voir .home-page .reassurance) — même fond, pas d'espace entre les deux. */
.home-page footer.pied-page {
  background: #fff;
  padding-top: 0.75rem;
}

/* --- Page d'accueil : bandeau de faits + cartes de navigation + réassurance --- */

.home-layout {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
  max-width: 1280px;
  margin: 0;
  padding: 1.5rem;
}

.sidebar-faits {
  flex: 0 0 30%;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 1.4rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

.sidebar-faits h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 1.2rem;
  color: var(--orange);
}

.faits-rotation {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 220px;
}

.fait-actuel {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
  transform: translateY(0);
}

.fait-actuel.fait-sortant { opacity: 0; transform: translateY(-8px); }
.fait-actuel.fait-entrant { opacity: 1; transform: translateY(0); }

.home-main { flex: 1; min-width: 0; }
.home-main h1 { margin-bottom: 0.2rem; }
.home-main .sous-texte { color: #777; margin-top: 0; }

/* Bloc "Bonjour ..." : doit rester parfaitement lisible quelle que soit la photo de
   fond derrière lui, d'où un fond dépoli plutôt qu'un simple texte sur l'image. */
.accueil-entete {
  display: inline-block;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 0.5rem;
}
.accueil-entete h1 { margin-bottom: 0.15rem; }
.accueil-entete .sous-texte { margin-bottom: 0; }

.cartes-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 1.5rem 0 2rem;
}

@media (max-width: 560px) {
  .cartes-nav { grid-template-columns: 1fr; }
}

.carte-nav {
  display: block;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 1.4rem 1.4rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.5s ease;
  opacity: 0;
  transform: translateY(24px);
}

.carte-nav.revele {
  opacity: 1;
  transform: translateY(0);
}

.carte-nav:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 12px 26px rgba(0,0,0,0.10), 0 4px 14px rgba(247,148,29,0.18);
  border-color: rgba(247,148,29,0.25);
}

/* Effet "entre et sort" : la carte s'enfonce nettement au clic (ombre interne),
   puis ressort au relâchement grâce à la transition définie ci-dessus. */
.carte-nav:active {
  transform: translateY(1px) scale(0.94);
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.18);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.carte-icone { font-size: 2.3rem; margin-bottom: 0.8rem; }
.carte-titre { font-weight: 700; font-size: 1.2rem; margin-bottom: 0.4rem; color: var(--orange); }
.carte-desc { font-size: 0.9rem; color: #777; line-height: 1.4; }

.reassurance {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 2.5rem;
  padding: 1.5rem;
  border-top: 1px solid var(--bordure);
}

/* Bande du bas de l'accueil : entièrement blanche et opaque (pas de transparence),
   pour qu'elle se détache nettement de l'image de fond qui ne doit jamais y
   apparaître — elle se prolonge directement dans le pied de page en dessous. */
.home-page .reassurance {
  background: #fff;
  border-top: none;
}

.reassurance-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: #555;
  font-weight: 600;
}

/* Voyant vert clignotant (façon "en ligne"), style ping : un point plein fixe
   surmonté d'un anneau qui s'étend et s'efface en boucle, fluide. */
.statut-point {
  position: relative;
  display: inline-flex;
  width: 9px;
  height: 9px;
}

.statut-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4ade80;
  opacity: 0.75;
  animation: statutPing 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.statut-dot {
  position: relative;
  display: inline-flex;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
}

@keyframes statutPing {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

@media (max-width: 720px) {
  .home-layout { flex-direction: column; }
  .sidebar-faits { flex: none; width: 100%; }
  .faits-defilement { height: 220px; }
}

/* --- Vérification de couverture --- */

.resultats-couverture { margin-top: 2rem; }
.resultats-couverture h3 { margin-top: 1.75rem; }
.liste-couverture { padding-left: 1.2rem; }
.liste-couverture li { margin-bottom: 0.5rem; line-height: 1.4; }
.ok-couverture { color: var(--vert); font-weight: 600; }
.avertissement-couverture {
  background: #fff6e6;
  color: #8a5a00;
  border: 1px solid #f3d9a4;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-size: 0.88rem;
}

#conteneur-carte {
  position: relative;
  margin-top: 1rem;
}

#carte-couverture {
  height: 600px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--bordure);
  z-index: 1;
}

/* Barre d'outils de la carte : empilée verticalement pour qu'aucun bouton ne puisse
   jamais en chevaucher un autre, quelle que soit la largeur de l'écran. */
.barre-outils-carte {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bouton-outil-carte {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background: white;
  color: var(--gris-fonce);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bouton-outil-carte:hover { background: var(--gris-clair); }
.bouton-outil-carte.actif { background: var(--orange); border-color: var(--orange); color: white; }

.mesure-total {
  position: absolute;
  top: 10px;
  right: 54px;
  z-index: 500;
  background: white;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris-fonce);
  box-shadow: 0 1px 6px rgba(0,0,0,0.25);
  white-space: nowrap;
}

/* Étiquette de longueur posée sur un tronçon mesuré : fond noir, texte blanc. */
.etiquette-mesure.leaflet-tooltip {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 2px 7px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
}
.etiquette-mesure.leaflet-tooltip::before { display: none !important; }

.etiquette-mesure-segment.leaflet-tooltip {
  font-size: 0.68rem;
  padding: 1px 5px;
  opacity: 0.92;
}

.bouton-carte-fermer {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2100;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: white;
  color: var(--gris-fonce);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.bouton-carte-fermer:hover { background: var(--gris-clair); }

#conteneur-carte.plein-ecran {
  position: fixed;
  inset: 0;
  z-index: 2000;
  margin: 0;
  background: white;
}
#conteneur-carte.plein-ecran #carte-couverture {
  height: 100%;
  border-radius: 0;
  border: none;
}
#conteneur-carte.plein-ecran .bouton-carte-fermer { display: block; }

body.carte-plein-ecran-active { overflow: hidden; }

.legende-carte {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #555;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 0.25rem;
}
.legende-item { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.legende-trait { display: inline-block; width: 22px; height: 5px; border-radius: 2px; }
.legende-trait.legende-vert { background: #2e7d32; }
.legende-trait.legende-rouge { background: #c00000; }
.legende-trait.legende-gris { background: #999999; }
.legende-trait.legende-fin { height: 2px; background: #333333; }
.legende-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.legende-pastille-rouge { background: #c00000; }
.legende-pastille-bleue { background: #1565c0; }

/* Cercles pulsants signalant les zones d'écart (modification 3) — même principe que le
   voyant "en ligne" de la page d'accueil, en plus grand pour bien repérer une zone. */
.pulse-marker { position: relative; width: 36px; height: 36px; }
.pulse-marker .pulse-ping {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  opacity: 0.55;
  animation: coveragePing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.pulse-marker .pulse-dot {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.pulse-marker.pulse-rouge .pulse-ping { background: #c00000; }
.pulse-marker.pulse-rouge .pulse-dot { background: #c00000; }
.pulse-marker.pulse-bleu .pulse-ping { background: #1565c0; }
.pulse-marker.pulse-bleu .pulse-dot { background: #1565c0; }

@keyframes coveragePing {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}