/* Sentinelle Dark Web : en-tete + bandeau "en veille" dedies a cette
   page. Le bandeau reprend le gabarit de .veille-hero (tableau-de-
   bord.css -- carte encadree sur fond degrade de marque, logo a gauche,
   lisere, pied "en direct") avec ses propres classes pour ne jamais
   coupler les deux pages, et une couleur qui suit le vrai etat des
   adresses surveillees plutot que d'etre fixee au rouge (voir
   rendreScene() dans le HTML) : vert si tout va bien, orange pour une
   fuite, rouge seulement si un mot de passe est expose. */

/* L'en-tete occupe la meme colonne que le bandeau dessous (ses bords
   gauches s'alignent). */
.fuites-hero { flex: 1 1 100%; }

.fuites-hero__oeil {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-caption-size);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--action);
}

.fuites-veille {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Meme largeur que les trois autres bandeaux d'etat (voir
     --largeur-bandeau dans tableau-de-bord.css). `flex: 1 1 100%` : il est
     dans .zone__entete, une rangee flex -- sans lui, il ne prenait que la
     largeur de son contenu et n'atteignait jamais celle des autres. */
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: var(--largeur-bandeau);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-lg) auto var(--space-xxl);
  border-radius: var(--radius-xl);
  background: var(--brand-gradient-diag);
  box-shadow: 0 24px 50px -26px rgba(25,20,62,.5);
  transition: background var(--dur-base) var(--ease-standard);
}
/* Memes recettes de teinte que .veille-hero (meme sens du vert/orange/
   rouge sur les deux bandeaux de l'application), simplement rejouees ici
   sous des classes propres a cette page. */
.fuites-veille[data-etat="sur"] {
  background: radial-gradient(90% 180% at 8% 0%, rgba(18,135,111,.42) 0%, transparent 66%), var(--brand-gradient-diag);
}
.fuites-veille[data-etat="vigilance"] {
  background: radial-gradient(95% 190% at 8% 0%, rgba(176,112,11,.62) 0%, transparent 70%), var(--brand-gradient-diag);
}
.fuites-veille[data-etat="critique"] {
  background: radial-gradient(95% 190% at 8% 0%, rgba(210,38,79,.62) 0%, transparent 70%), var(--brand-gradient-diag);
}

.fuites-veille__haut { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); }

/* Le meme oeil que l'icone Dark Web de la barre laterale, anime : un
   balayage qui tourne en continu (sonar) et deux ondes qui s'estompent
   vers l'exterieur, delai NEGATIF pour paraitre deja en cours des la
   premiere image (meme mecanique que .immo-actif__onde). */
/* Deux cercles imbriques : .logo (80px, ne recadre pas) porte les points
   par adresse juste a l'exterieur du bord ; .disque (meme taille, lui
   recadre) porte le balayage et les ondes, qui doivent rester dans le
   cercle sous peine de deborder en carre. */
.fuites-veille__logo {
  position: relative;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  color: var(--on-dark);
}
.fuites-veille__disque {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 8px rgba(255,255,255,.14);
}
.fuites-veille__balayage {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, rgba(255,255,255,.4) 0deg, transparent 55deg, transparent 360deg);
  mix-blend-mode: screen;
  animation: fuitesBalayage 5s linear infinite;
}
@keyframes fuitesBalayage { to { transform: rotate(360deg); } }
.fuites-veille__onde {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55);
  opacity: .5;
  animation: fuitesVeilleOnde 3.4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * -1.4s);
}
@keyframes fuitesVeilleOnde {
  from { transform: scale(.7); opacity: .55; }
  to   { transform: scale(1.4); opacity: 0; }
}
.fuites-veille__icone { position: relative; z-index: 1; }

/* Un point par adresse reellement surveillee, repartis tout autour du
   disque (pas du meme cote) et ecartes au maximum les uns des autres --
   pas de contour blanc, sur demande expresse. En mouvement, coherent
   avec le balayage (meme duree que fuitesBalayage plus haut) : chaque
   point apparait puis s'efface une fois par tour, avec un animation-
   delay calcule en JS (rendreScene()) pour que l'apparition coincide
   avec le passage du balayage a son angle. A chaque tour
   (animationiteration), il reapparait a cote -- nouvel --angle/--rayon
   au hasard autour de sa base, pas exactement au meme endroit. Colore
   par .pastille--* (deja definie, tableau-de-bord.css). */
.fuites-veille__pastille {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  transform: rotate(var(--angle)) translate(0, calc(-1 * var(--rayon, 44px)));
  opacity: 0;
  animation: fuitesPointBlip 5s linear infinite;
}
/* Allumage net au passage du balayage, puis extinction progressive sur
   presque tout le tour (comme la persistance d'un ecran radar) plutot
   qu'un palier a pleine intensite suivi d'une coupure : sur demande
   expresse. Doit rester a 0 sur les derniers pourcents, c'est la que
   rendreScene() deplace le point (animationiteration). */
@keyframes fuitesPointBlip {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  20%  { opacity: .7; }
  40%  { opacity: .4; }
  60%  { opacity: .18; }
  80%  { opacity: .04; }
  92%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fuites-veille__pastille { animation: none; opacity: 1; }
}

.fuites-veille__titre {
  /* flex-basis:auto, pas une valeur en px : en colonne (mobile, voir plus
     bas), le flex-basis vise la HAUTEUR, pas la largeur -- un ancien
     "260px" ici forcait le titre a occuper 260px de haut, laissant un
     grand vide sous le texte (bug constate). */
  flex: 1 1 auto;
  min-width: 180px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--titre-bandeau-taille);
  font-weight: 700;
  line-height: var(--text-body-lh);
  text-wrap: balance;
  color: var(--on-dark);
}

.fuites-veille__separateur {
  height: 1px;
  background: rgba(255,255,255,.16);
  margin: var(--space-lg) 0 var(--space-md);
}
.fuites-veille__pied {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--text-caption-size);
  color: rgba(255,255,255,.78);
}
.fuites-veille__direct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 9px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--radius-pill);
  font-size: var(--text-fine-size);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.fuites-veille__soustitre { color: var(--on-dark); }
/* Point dans le pied « En direct » -- reste allume constamment, sur
   demande expresse. */
.fuites-veille__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ee0c4;
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fuites-veille { transition: none; }
  .fuites-veille__balayage,
  .fuites-veille__onde,
  .fuites-veille__point { animation: none; }
}

@media (max-width: 640px) {
  .fuites-veille__haut { flex-direction: column; text-align: center; }
  .fuites-veille__pied { flex-wrap: wrap; justify-content: center; }
}