/* ============================================================
   GTAdrenaline — radar GPS flottant (remplace l'ancienne boussole)
   ============================================================
   Feuille partagee par les 9 pages du site, dans les 3 langues.
   Une seule modification ici se repercute donc partout.

   Le comportement (clic et touche Entree ouvrent la carte) reste
   gere par le script deja present en bas de chaque page, via
   #compassWidget. Le nom de cet identifiant n'a pas change pour
   ne rien casser.

   GYROPHARE : la poursuite se declenche 4 secondes toutes les
   12 secondes, a environ 1,4 alternance par seconde. C'est
   volontairement sous la limite de 3 flashs/seconde recommandee
   pour l'epilepsie photosensible (WCAG 2.3.1), et tout s'arrete
   si le visiteur a demande a reduire les animations.
   ============================================================ */

.radar-fixed {
  position: fixed;
  bottom: 34px;
  right: 34px;
  z-index: 800;
  transition: opacity .45s ease, visibility 0s linear 0s;
}

/* ---------- IL SE RETIRE AU PIED DE PAGE ----------
   Un HUD de jeu disparait sur l'ecran de fin : ici c'est la meme chose.
   Des que le pied de page entre dans la fenetre, le radar s'efface.

   La raison immediate : il recouvrait un des deux personnages poses en
   bas de page. Mais la vraie raison est plus generale — c'est un
   element decoratif pose EN PERMANENCE par-dessus le contenu, et tout
   ce qu'il affiche est deja dit ailleurs : la barre de progression en
   haut compte la lecture comme ses etoiles, la teinte du site suit
   deja l'heure de Floride, et la carte a une entree dans la barre, une
   section sur l'accueil et un lien dans ce meme pied de page. Sa
   valeur est l'ambiance ; elle ne justifie pas de cacher quoi que ce
   soit. Arrive en bas, on a fini de lire : il n'a plus rien a dire.

   Le declenchement est dans radar-widget.js. */
.radar-fixed.est-au-pied {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}

.radar {
  position: relative;
  width: 206px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.radar:focus-visible {
  outline: 2px solid #23E6C0;
  outline-offset: 8px;
  border-radius: 14px;
}

/* ---------- l'ecran ---------- */
.radar__screen {
  position: relative;
  width: 206px;
  height: 146px;
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(180deg, #0c1230, #06091a);
  border: 1.5px solid rgba(35,230,192,0.4);
  box-shadow: 0 0 24px rgba(35,230,192,0.16), inset 0 0 30px rgba(0,0,0,0.78);
  /* incline comme un GPS de tableau de bord ; se redresse au survol */
  transform: perspective(520px) rotateX(36deg) scale(1.02);
  transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
  animation: radarWaveBorder 12s steps(1) infinite;
}
.radar:hover .radar__screen,
.radar:focus-visible .radar__screen {
  transform: perspective(520px) rotateX(4deg) scale(1.06);
}
.radar__map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- la fleche : toujours au centre, c'est le monde qui defile ---------- */
.radar__me {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 0;
  height: 0;
  margin: -11px 0 0 -9px;
  z-index: 5;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 19px solid #F7ECDD;
  filter: drop-shadow(0 0 8px rgba(247,236,221,0.95));
}
.radar__me::after {
  content: "";
  position: absolute;
  left: -11px;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,236,221,0.3), transparent 70%);
  animation: radarHalo 2.4s ease-out infinite;
}
@keyframes radarHalo {
  0%   { transform: scale(0.55); opacity: 0.95; }
  100% { transform: scale(2.8);  opacity: 0; }
}

/* ---------- surcouches ---------- */
.radar__label {
  position: absolute;
  top: 7px;
  left: 10px;
  z-index: 7;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: rgba(35,230,192,0.88);
}
.radar__turn {
  position: absolute;
  top: 6px;
  right: 9px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(6,9,26,0.85);
  border: 1px solid rgba(35,230,192,0.38);
  border-radius: 100px;
  padding: 0.24em 0.58em;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.53rem;
  color: #23E6C0;
}
.radar__turn svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ---------- niveau de recherche : il suit la lecture ----------
   Les six etoiles comptent la descente dans la page (voir la fin de
   radar-widget.js). Eteintes, elles restent visibles en creux : il faut
   comprendre qu il en reste a gagner, sinon monter d un cran ne veut
   rien dire. */
.radar__wanted {
  position: absolute;
  top: 26px;
  right: 11px;
  z-index: 7;
  display: flex;
  gap: 1px;
  opacity: 1;
}
.radar__wanted span {
  font-size: 0.58rem;
  line-height: 1;
  color: rgba(232,200,126,0.22);
  text-shadow: none;
  transition: color .45s ease, text-shadow .45s ease, transform .45s ease;
}
.radar__wanted span.est-allumee {
  color: #E8C87E;
  text-shadow: 0 0 7px rgba(232,200,126,0.95), 0 0 14px rgba(232,200,126,0.5);
}
/* Le sursaut ne joue que sur l etoile qui vient de s allumer : le
   rejouer sur les cinq autres a chaque cran ferait sapin de Noel. */
.radar__wanted span.vient-de-sallumer { animation: etoileGagnee .5s ease-out; }
@keyframes etoileGagnee {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.75); }
  100% { transform: scale(1);    }
}
/* Six sur six : le dossier est entierement lu. Une pulsation lente,
   pas un gyrophare — c est une recompense, pas une alarme. */
.radar__wanted.est-au-max span {
  animation: wantedMax 2.4s ease-in-out infinite;
}
@keyframes wantedMax {
  0%, 100% { text-shadow: 0 0 7px rgba(232,200,126,0.95), 0 0 14px rgba(232,200,126,0.5); }
  50%      { text-shadow: 0 0 11px rgba(255,61,127,0.95), 0 0 22px rgba(255,61,127,0.55); }
}

/* ---------- pied : heure de Miami, vitesse, distance ---------- */
.radar__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 10px;
}
.radar__clock {
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.63rem;
  color: #23E6C0;
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(35,230,192,0.55);
  white-space: nowrap;
}
.radar__dist {
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.63rem;
  color: #9A9DC4;
  white-space: nowrap;
}
.radar__bar { height: 4px; border-radius: 100px; background: rgba(247,236,221,0.1); overflow: hidden; flex: 1; }
.radar__bar i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, #FF3D7F, #FF8A3D);
  box-shadow: 0 0 10px rgba(255,61,127,0.6);
  animation: radarSpeed 4.5s ease-in-out infinite;
}
@keyframes radarSpeed {
  0%, 100% { width: 38%; }
  45%      { width: 86%; }
  70%      { width: 60%; }
}

/* ---------- gyrophare ---------- */
.radar__police { position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen; }
.radar__police::before,
.radar__police::after { content: ""; position: absolute; top: 0; bottom: 0; width: 52%; opacity: 0; }
.radar__police::before {
  left: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(255,45,85,0.44), transparent 58%);
  animation: radarWaveA 12s steps(1) infinite;
}
.radar__police::after {
  right: 0;
  background: radial-gradient(ellipse at 100% 50%, rgba(46,123,255,0.46), transparent 58%);
  animation: radarWaveB 12s steps(1) infinite;
}
@keyframes radarWaveA {
  0%, 66%   { opacity: 0; }
  67%, 69%  { opacity: 1; }  70%, 72%  { opacity: 0; }
  73%, 75%  { opacity: 1; }  76%, 78%  { opacity: 0; }
  79%, 81%  { opacity: 1; }  82%, 84%  { opacity: 0; }
  85%, 87%  { opacity: 1; }  88%, 100% { opacity: 0; }
}
@keyframes radarWaveB {
  0%, 69%   { opacity: 0; }
  70%, 72%  { opacity: 1; }  73%, 75%  { opacity: 0; }
  76%, 78%  { opacity: 1; }  79%, 81%  { opacity: 0; }
  82%, 84%  { opacity: 1; }  85%, 87%  { opacity: 0; }
  88%, 90%  { opacity: 1; }  91%, 100% { opacity: 0; }
}
@keyframes radarWaveBorder {
  0%, 66%   { border-color: rgba(35,230,192,0.4);  box-shadow: 0 0 24px rgba(35,230,192,0.16), inset 0 0 30px rgba(0,0,0,0.78); }
  67%, 72%  { border-color: rgba(255,45,85,0.95);  box-shadow: 0 0 30px rgba(255,45,85,0.5),   inset 0 0 30px rgba(0,0,0,0.78); }
  73%, 78%  { border-color: rgba(46,123,255,0.95); box-shadow: 0 0 30px rgba(46,123,255,0.5),  inset 0 0 30px rgba(0,0,0,0.78); }
  79%, 84%  { border-color: rgba(255,45,85,0.95);  box-shadow: 0 0 30px rgba(255,45,85,0.5),   inset 0 0 30px rgba(0,0,0,0.78); }
  85%, 90%  { border-color: rgba(46,123,255,0.95); box-shadow: 0 0 30px rgba(46,123,255,0.5),  inset 0 0 30px rgba(0,0,0,0.78); }
  91%, 100% { border-color: rgba(35,230,192,0.4);  box-shadow: 0 0 24px rgba(35,230,192,0.16), inset 0 0 30px rgba(0,0,0,0.78); }
}

/* halo au survol */
.radar::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 22px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(35,230,192,0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.radar:hover::after { opacity: 1; }

/* ---------- ecrans portables ----------
   Le contenu du site fait 1240 px de large. Pour que le radar tienne
   entierement a cote sans mordre dessus, il faudrait au moins
   1240 + 2x(206+34) = 1720 px de fenetre : autant dire jamais sur un
   portable. Il se pose donc sur la derniere colonne, et il masquait un
   paragraphe entier des fiches securite. On lui donne ici le gabarit
   compact, celui du mobile : il reste lisible et cliquable, mais couvre
   deux fois moins de surface. Au-dela de 1720 px, il retrouve sa taille
   pleine parce que la place existe vraiment. */
@media (max-width: 1719px) {
  .radar, .radar__screen { width: 158px; }
  .radar__screen { height: 112px; }
}

/* ---------- telephone : le radar devient une barre de HUD ----------
   MESURE, avant de decider : sur un ecran de 375 px, le radar flottant
   occupait 150 x 133 px, soit 40 % de la largeur, en position fixe. Il
   recouvrait du texte a cinq des sept hauteurs de page testees — et
   pas seulement du texte : le bouton « Explorer Leonida » du premier
   ecran et les liens « Vehicules » / « Armes » du pied de page, dont il
   volait les clics.

   Sur une colonne unique, un widget flottant ne PEUT pas eviter le
   contenu : il n'y a pas de marge ou se ranger. Donc il arrete de
   flotter. Il s'aplatit en une barre collee au bas de l'ecran, comme
   le bandeau d'etat d'un jeu — ce qu'il imite depuis le debut. Il garde
   ce qui raconte quelque chose (le nom de l'Etat, les six etoiles de
   recherche qui montent avec la lecture, l'heure de Miami) et laisse
   tomber ce qui ne tenait plus a cette taille : la carte en
   perspective, la barre de trajet, la distance.

   Et il s'efface des qu'on descend : voir radar-widget.js. On lit sans
   rien avoir sur les talons, et le moindre retour en arriere le
   ramene.

   Le pied de page recoit une reserve equivalente pour que sa derniere
   ligne ne finisse jamais sous la barre. */
@media (max-width: 640px) {
  .radar-fixed {
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .45s ease, visibility 0s linear 0s;
  }
  .radar-fixed.est-rangee {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .45s ease, visibility 0s linear .28s;
  }

  .radar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 1rem;
    background: rgba(6, 8, 20, 0.94);
    border-top: 1px solid rgba(247, 236, 221, 0.12);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  }
  .radar:focus-visible { outline-offset: -3px; border-radius: 0; }

  /* L'ecran de carte disparait : c'est lui qui coutait les 106 px de
     hauteur, et a cette taille il ne montrait plus rien de lisible. */
  .radar__screen {
    width: auto;
    height: auto;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    overflow: visible;
  }
  .radar:hover .radar__screen,
  .radar:focus-visible .radar__screen { transform: none; }

  .radar__map,
  .radar__me,
  .radar__turn,
  .radar__police,
  .radar__bar,
  .radar__dist { display: none; }

  /* Le nom et les etoiles etaient poses en absolu sur la carte ; ils
     reprennent leur place dans la ligne. */
  .radar__label,
  .radar__wanted {
    position: static;
    inset: auto;
    transform: none;
  }
  .radar__label { flex: none; }
  .radar__wanted { flex: 1; letter-spacing: 0.08em; }

  .radar__foot {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
  }
}

/* La derniere ligne du pied de page ne doit jamais finir sous la barre. */
@media (max-width: 640px) {
  .site-footer,
  .site-footer-mini { padding-bottom: 4.2rem; }
  /* Le bouton « retour en haut » et l'encart des nouveautes vivent dans
     le coin bas-gauche : on les remonte d'autant. */
  .to-top { bottom: 3.9rem; }
  .whatsnew { bottom: 4rem; }
}

/* ---------- respect des preferences systeme ---------- */
@media (prefers-reduced-motion: reduce) {
  .radar__screen,
  .radar__me::after,
  .radar__bar i,
  .radar__police::before,
  .radar__police::after,
  .radar__wanted,
  .radar__wanted span { animation: none !important; }
  .radar__screen { transition: none !important; }
}