/* zzzz-radar.css — Finition Radar app (autour-de-moi) au plus près de la maquette 07-radar.
   Additif, charge en dernier (prime). Ne touche qu'aux classes existantes .ar-rd-* du bloc .ar-radar.
   Rollback : supprimer ce fichier → retour au rendu zz-radar-app.css. Gardien/Etincelles jamais cibles. */
@media (max-width:768px), (pointer:coarse) and (max-width:1366px), (display-mode:standalone) and (max-width:1366px){

  /* Disque radar : un peu plus grand + halo central navy/teal pour la profondeur de la maquette */
  html.apprefonte .ar-rd-scope{
    width:min(90vw,360px);
    background:radial-gradient(circle at 50% 44%, rgba(34,84,104,.30) 0%, rgba(14,34,52,.12) 46%, rgba(11,21,36,0) 72%);
  }

  /* Anneau extérieur (8 km) : liseré cyan + halo interne diffus */
  html.apprefonte .ar-rd-ring.r8{
    border-color:rgba(96,180,196,.34);
    box-shadow:inset 0 0 30px rgba(53,215,209,.09);
  }

  /* Balayage : plus lumineux + léger halo (animation/forme héritées de la base) */
  html.apprefonte .ar-rd-sweep{
    background:conic-gradient(from 0deg, rgba(53,215,209,.44), rgba(53,215,209,.12) 38deg, rgba(53,215,209,0) 66deg, transparent 360deg);
    filter:drop-shadow(0 0 8px rgba(53,215,209,.22));
  }

  /* Pins : corps ambré uniforme + halo chaud (maquette = tous les pins ambrés, l'icône donne la catégorie).
     !important car le fond est posé en style inline par PHP (couleur par catégorie). */
  html.apprefonte .ar-rd-pin-b{
    background:linear-gradient(180deg,#F7B24E,#EF9A2E) !important;
    box-shadow:0 0 15px rgba(242,160,59,.45), 0 4px 10px rgba(0,0,0,.5);
  }

  /* Centre « Vous êtes ici » : véhicule et libellé un cran plus grands / lisibles */
  html.apprefonte .ar-rd-center .veh{ font-size:38px; }
  html.apprefonte .ar-rd-center .lbl{ font-size:14px; margin-top:4px; text-shadow:0 1px 6px rgba(0,0,0,.6); }

}

/* ===========================================================================
   AJOUT 16/08 — Icônes BLANCHES nettes dans les pins (maquette 07 = tente / clé /
   goutte en trait blanc, pas d'émoji). CSS pur : on masque l'émoji et on peint une
   icône SVG via mask, pilotée par [data-cat] (déjà posé en PHP sur .ar-rd-pin /
   .ar-rd-item). Aucune modif PHP. Rollback = retirer ce bloc / le fichier.
   =========================================================================== */
@media (max-width:768px), (pointer:coarse) and (max-width:1366px), (display-mode:standalone) and (max-width:1366px){

  /* --- Pins du radar --- */
  html.apprefonte .ar-rd-pin-b span{ opacity:0 !important; }               /* émoji masqué, gabarit conservé */
  html.apprefonte .ar-rd-pin-b{ position:relative; }
  html.apprefonte .ar-rd-pin-b::after{
    content:''; position:absolute; left:50%; top:50%;
    width:21px; height:21px; transform:translate(-50%,-50%) rotate(45deg); /* contre-rotation du corps (-45deg) */
    background:#fff;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
  }
  html.apprefonte .ar-rd-pin[data-cat="aires"] .ar-rd-pin-b::after{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21 14 3'/%3E%3Cpath d='M20.5 21 10 3'/%3E%3Cpath d='M15.5 21 12 15l-3.5 6'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21 14 3'/%3E%3Cpath d='M20.5 21 10 3'/%3E%3Cpath d='M15.5 21 12 15l-3.5 6'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E");
  }
  html.apprefonte .ar-rd-pin[data-cat="eau"] .ar-rd-pin-b::after{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3c0 0 6 6.5 6 10.5a6 6 0 0 1-12 0C6 9.5 12 3 12 3z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3c0 0 6 6.5 6 10.5a6 6 0 0 1-12 0C6 9.5 12 3 12 3z'/%3E%3C/svg%3E");
  }
  html.apprefonte .ar-rd-pin[data-cat="services"] .ar-rd-pin-b::after{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2z'/%3E%3C/svg%3E");
  }

  /* --- Carrés d'icône de la liste de résultats (même jeu d'icônes, couleur par catégorie) --- */
  html.apprefonte .ar-rd-item-ic{ position:relative; color:transparent !important; }
  html.apprefonte .ar-rd-item-ic::after{
    content:''; position:absolute; inset:0; margin:auto; width:24px; height:24px;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
  }
  html.apprefonte .ar-rd-item[data-cat="aires"] .ar-rd-item-ic::after{
    background:#F2A03B;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21 14 3'/%3E%3Cpath d='M20.5 21 10 3'/%3E%3Cpath d='M15.5 21 12 15l-3.5 6'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 21 14 3'/%3E%3Cpath d='M20.5 21 10 3'/%3E%3Cpath d='M15.5 21 12 15l-3.5 6'/%3E%3Cpath d='M2 21h20'/%3E%3C/svg%3E");
  }
  html.apprefonte .ar-rd-item[data-cat="eau"] .ar-rd-item-ic::after{
    background:#3DA9FC;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3c0 0 6 6.5 6 10.5a6 6 0 0 1-12 0C6 9.5 12 3 12 3z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3c0 0 6 6.5 6 10.5a6 6 0 0 1-12 0C6 9.5 12 3 12 3z'/%3E%3C/svg%3E");
  }
  html.apprefonte .ar-rd-item[data-cat="services"] .ar-rd-item-ic::after{
    background:#F2A03B;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 0 5.4-5.4l-2.3 2.3-2-2z'/%3E%3C/svg%3E");
  }

}

/* ===========================================================================
   AJOUT 16/08 (demande Julien) — Radar « autour de moi » :
   1) DISQUE PLUS GRAND sur bureau (souris, >768px). L'app tactile ≤768px reste
      collée aux maquettes (min(90vw,360px) inchangé).
   2) Blocs d'actions legacy « Proximité » / « Communauté » (.am-grid) RETIRÉS
      sous le radar (le radar visuel + « Ouvrir la grande carte » suffisent).
   Additif, charge en dernier (prime). Rollback = supprimer ce bloc
   (ou restaurer zzzz-radar.css.bak_20260816_radar). Gardien/Étincelles jamais ciblés.
   =========================================================================== */
@media (min-width:769px) and (pointer:fine){
  html.apprefonte .ar-rd-scope{ width:min(96%,1040px); }   /* ~3x l'ancien 340px, borne au conteneur (pas de debordement) */
}
html.apprefonte body.page-autour .am-grid{ display:none !important; }

/* ===========================================================================
   AJOUT 17/08 (demande Julien) — SÉLECTEUR DE DISTANCE sur le radar app.
   Pastilles 1→8 km : choisit le rayon affiché. Le JS met à jour les anneaux,
   repositionne/filtre les pins et la liste, et le compteur de résultats.
   Additif, scopé .ar-rd-dist. Rollback = supprimer ce bloc + le bloc PHP/JS
   correspondant dans autour-de-moi.php. Gardien/Étincelles jamais ciblés.
   =========================================================================== */
html.apprefonte .ar-rd-dist{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:0 16px 14px;
}
html.apprefonte .ar-rd-dist-lbl{
  font:700 13px/1 'Inter',system-ui,sans-serif; color:#9BB1BF; margin-right:2px;
}
html.apprefonte .ar-rd-dist-b{
  flex:0 0 auto; padding:9px 15px; border-radius:12px; cursor:pointer;
  background:#0F2136; border:1px solid rgba(90,150,180,.20); color:#9BB1BF;
  font:700 14px/1 'Inter',system-ui,sans-serif; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
html.apprefonte .ar-rd-dist-b:hover{ border-color:rgba(53,215,209,.55); color:#cfeeec; }
html.apprefonte .ar-rd-dist-b.is-on{
  color:#06202a; background:linear-gradient(180deg,#48e0da,#35D7D1); border-color:#35D7D1;
  box-shadow:0 2px 10px rgba(53,215,209,.28);
}
/* Bureau souris (radar agrandi) : pastilles un peu plus grandes, centrées comme les chips. */
@media (min-width:769px) and (pointer:fine){
  html.apprefonte .ar-rd-dist{ padding:0 16px 18px; }
  html.apprefonte .ar-rd-dist-b{ padding:10px 18px; font-size:15px; }
}


/* ===========================================================================
   AJOUT 20/08 (demande Julien) — CADRE « console » autour du radar VIVANT.
   Image fournie par lui : assets/img/radar-cadre.webp. Son intérieur (anneaux,
   points, van, ligne Distance dessinés) a été effacé et rempli en #0B1524 — la
   couleur de fond des étiquettes km, donc aucune couture visible. Le radar réel
   se dessine DANS le cadre : points de la base, anneaux qui se ré-étiquettent
   avec « Distance », compteur de résultats. Rien d'autre n'est touché.
   Rollback = supprimer ce bloc + les 2 <div> du cadre dans autour-de-moi.php.
   =========================================================================== */
html.apprefonte .ar-rd-frame{
  position:relative;
  width:min(96vw,400px);
  aspect-ratio:1024/1030;              /* dimensions natives de l'image */
  margin:6px auto 12px;
  background:url("../../img/radar-cadre.webp") center/100% 100% no-repeat;
}
/* L'écran = la zone intérieure EXACTE du cadre (mesurée sur l'image). */
html.apprefonte .ar-rd-screen{
  position:absolute; left:7.32%; right:7.52%; top:8.54%; bottom:9.71%;
  display:grid; place-items:center;
  background:#0B1524; border-radius:3%; overflow:hidden;
}
/* Le disque tient dans l'écran, étiquette « 8 km » et pins du bord compris. */
html.apprefonte .ar-rd-frame .ar-rd-scope{ width:88%; margin:0; }
/* Bureau / fenêtre large : même cadre, en plus grand. */
@media (min-width:769px) and (pointer:fine){
  html.apprefonte .ar-rd-frame{ width:min(96%,1200px); }
}


/* ===========================================================================
   AJOUT 20/08 (demande Julien) — LES POINTEURS SONT ANIMÉS.
   Deux mouvements, en CSS pur (transform + opacity : rien à repeindre, donc
   pas de coût sur un téléphone) :
     · le pin FLOTTE doucement (monte/descend de 3 px, léger gonflement) ;
     · une ONDE part de sa pointe et se dissipe, comme un écho radar.
   Les pins sont décalés en 3 groupes pour qu'ils ne battent pas tous ensemble.
   ⚠️ La rotation -45° du pin doit être REPRISE dans chaque étape, sinon le pin
   se remet droit pendant l'animation (le transform de l'animation remplace tout).
   Respecte « réduire les animations » du téléphone. Additif : rollback = supprimer
   ce bloc, les pins redeviennent fixes.
   =========================================================================== */
@keyframes arRdPinBat{
  0%,100%{ transform:translateY(0) rotate(-45deg) scale(1); }
  50%    { transform:translateY(-3px) rotate(-45deg) scale(1.05); }
}
@keyframes arRdPinOnde{
  0%  { transform:scale(.45); opacity:.8; }
  60% { opacity:.22; }
  100%{ transform:scale(1.7); opacity:0; }
}
html.apprefonte .ar-rd-pin-b{
  animation:arRdPinBat 3.2s ease-in-out infinite;
  will-change:transform;
}
/* L'onde : ellipse posée sous la POINTE du pin (la pointe dépasse de ~8 px du carré
   de 38 px une fois tourné à 45°, d'où le -13 px). z-index:-1 = derrière le pin. */
html.apprefonte .ar-rd-pin::after{
  content:''; position:absolute; left:50%; bottom:-13px;
  width:28px; height:10px; margin-left:-14px;
  border-radius:50%;
  border:1.5px solid rgba(242,160,59,.85);
  box-shadow:0 0 10px rgba(242,160,59,.35);
  animation:arRdPinOnde 2.6s ease-out infinite;
  pointer-events:none; z-index:-1;
}
/* Décalages : 3 groupes, pour que ça respire au lieu de clignoter en choeur. */
html.apprefonte .ar-rd-pin:nth-of-type(3n+2) .ar-rd-pin-b{ animation-delay:-1.1s; }
html.apprefonte .ar-rd-pin:nth-of-type(3n)   .ar-rd-pin-b{ animation-delay:-2.2s; }
html.apprefonte .ar-rd-pin:nth-of-type(3n+2)::after{ animation-delay:-.85s; }
html.apprefonte .ar-rd-pin:nth-of-type(3n)::after{ animation-delay:-1.7s; }
/* Au survol : le flottement se fige (repère clair). Pas de transform ici : une animation,
   même en pause, prime sur la propriété transform — ce serait du code mort. */
html.apprefonte .ar-rd-pin:hover .ar-rd-pin-b{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  html.apprefonte .ar-rd-pin-b{ animation:none; }
  html.apprefonte .ar-rd-pin::after{ animation:none; opacity:.35; transform:scale(1); }
}