/* localisateur.css : localisateur de position (e03 « Trouver une clinique » et carte de l'accueil e00)
   Module propre à une fonction (fusionné dans lessard.css à la fin). Comportement : js/localisateur.js.

   Racine : [data-localisateur="page"] (e03) ou [data-localisateur="panneau"] (accueil).

   Liste
     .clinique-ligne__droite      colonne de droite d'une ligne : distance au-dessus du statut
     .clinique-ligne__distance    « 12 km » (Poppins 600 14)
     button.clinique-ligne__nom   nom de la clinique quand la ligne sélectionne (e03) ; le focus entoure toute la ligne
     .loc-note                    note sous la liste (« Distances approximatives… »)
     .resultat-vide--compact      état « aucune clinique » dans le panneau de l'accueil
     button.resultat-vide__effacer  « Effacer la recherche » (bouton qui a l'allure d'un lien)
   Messages
     .loc-statut                  zone vivante sous « Me localiser » (aria-live) : .loc-info (chargement) ou .champ__succes
     .loc-info, .loc-rouet        « Localisation en cours… » et son rouet
     .lien-action.est-en-cours    bouton « Me localiser » pendant l'attente (en gris)
     .loc-effacer                 « Effacer ma position »
   Carte (image 2000 × 1111 ; la couche de repères se cale sur l'image, voir geometrie() dans le JS)
     .carte-vue__couche           e03 : image + tracé, la partie qui zoome 
     .section-carte__cadre / __couche   accueil : cadre qui rogne, puis couche qui zoome
     .loc-calque                  boîte des repères, de la taille de l'image ; --k = échelle (px d'écran par px d'image)
     .loc-epingle                 zone cliquable de 44 px mini sur une épingle de l'image (e03)
     .loc-anneau                  anneau de la clinique sélectionnée ; .loc-puce : son nom (épingle des 9 cliniques)
     .loc-moi, .loc-moi-etiquette votre position (ou la ville cherchée)
   (L'encart Québec–Chaudière-Appalaches et son tracé pointillé sont retirés : on choisit dans la liste.) */

[hidden].champ__effacer, .carte-zone__bas[hidden], .loc-anneau[hidden], .loc-puce[hidden], .loc-moi[hidden],
.loc-moi-etiquette[hidden] { display: none; }

/* --- Liste --- */
.clinique-ligne__droite { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.clinique-ligne__distance { font: 600 14px/20px var(--police-titre); color: var(--encre1); white-space: nowrap; }
button.clinique-ligne__nom { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
button.clinique-ligne__nom:focus-visible, a.clinique-ligne__nom:focus-visible { outline: 0; }
.clinique-ligne:has(.clinique-ligne__nom:focus-visible) { outline: 3px solid var(--accent-fonce); outline-offset: 2px; border-radius: var(--r-interne); }
.loc-note { margin-top: 4px; padding: 8px 4px 16px; font: 400 14px/1.5 var(--police-texte); color: var(--encre3); }
.resultat-vide--compact { margin-top: 12px; }
.resultat-vide--compact .resultat-vide__titre { margin-top: 0; font-size: 16px; }
button.resultat-vide__effacer { padding: 0; border: 0; background: none; color: var(--accent-fonce); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.resultat-vide__effacer:hover { color: var(--encre1); }

/* --- Messages --- */
.loc-statut:empty { display: none; }
.loc-statut { margin-top: 8px; }
.loc-statut .champ__succes strong { font-weight: 600; }
.loc-info { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ciel); color: var(--encre1); font: 500 14px/1.5 var(--police-texte); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair); }
.loc-rouet {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--accent-pale); border-top-color: var(--accent-fonce); animation: rouet .8s linear infinite;
}
.lien-action.est-en-cours { cursor: progress; color: var(--encre3); }
.loc-effacer { margin-top: 2px; }
.panneau-recherche .loc-statut { margin-top: 4px; }

/* --- Carte de e03 : la couche qui zoome --- */
.carte-vue__couche { position: absolute; inset: 0; overflow: hidden; transform-origin: 0 0; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.btn-rond[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }

/* --- Carte de l'accueil : cadre qui rogne, couche qui zoome --- */
.section-carte__cadre { position: absolute; inset: 0; overflow: hidden; }
.section-carte__couche { position: absolute; inset: 0; overflow: hidden; transform-origin: 0 0; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.section-carte__couche > .section-carte__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; order: 0; }

/* --- Repères posés sur l'image --- */
.loc-calque { position: absolute; pointer-events: none; --k: .6; }
.loc-epingle {
  position: absolute; width: max(44px, calc(var(--k) * 100px)); height: max(44px, calc(var(--k) * 100px)); translate: -50% -50%;
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto;
}
.loc-epingle:hover { box-shadow: 0 0 0 3px rgba(84, 181, 225, .35); }
.loc-anneau {
  /* Épingle de l'image : 86 px sur 2000. L'anneau l'entoure de près (3 px d'écart, 3 px de trait), sans halo blanc. */
  position: absolute; width: calc(var(--k) * 86px + 6px); height: calc(var(--k) * 86px + 6px); translate: -50% -50%; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-fonce), 0 8px 22px rgba(var(--ombre-c), .18);
  transition: left .35s cubic-bezier(.2, .7, .2, 1), top .35s cubic-bezier(.2, .7, .2, 1);
}
.loc-puce {
  position: absolute; translate: calc(-100% - var(--k) * 43px - 18px) -50%; padding: 4px 12px; border-radius: var(--r-pilule);
  background: #fff; color: var(--encre1); font: 600 13px/18px var(--police-texte); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--filet), var(--o-douce); --encre1: var(--marine); --encre2: var(--noir); --encre3: var(--marine); --accent-fonce: var(--marine); --accent-grand: var(--bleu-clair);
}
.loc-moi {
  position: absolute; z-index: 2; width: 18px; height: 18px; translate: -50% -50%; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(var(--ombre-c), .3);
}
.loc-moi::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(84, 181, 225, .55); animation: loc-pouls 2.2s ease-out infinite; }
.loc-moi-etiquette {
  position: absolute; z-index: 2; translate: -50% calc(-100% - 16px); padding: 4px 10px; border-radius: var(--r-pilule);
  background: var(--accent); color: var(--marine); font: 600 12px/16px var(--police-texte); white-space: nowrap; box-shadow: var(--o-douce);
}
.loc-moi-etiquette[data-cote="droite"] { translate: 16px -50%; }
.loc-moi-etiquette[data-cote="bas"] { translate: -50% 16px; }
.loc-moi-etiquette[data-cote="gauche"] { translate: calc(-100% - 16px) -50%; }
@keyframes loc-pouls { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

@media (max-width: 767px) {
  .section-carte__cadre { position: relative; inset: auto; height: 360px; order: 2; }
  .section-carte__couche > .section-carte__image { object-position: 62% center; }
  .loc-note { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-vue__couche, .section-carte__couche, .loc-anneau { transition: none; }
  .loc-moi::after { animation: none; }
  .loc-rouet { animation-duration: 2.4s; }
}