/*
 * LE STYLE DE LA CARTE PARTAGÉE — `DEV-57` / `PROJ-68`, 23/08/2026.
 *
 * ==========================================================================
 * ⚠ CE FICHIER EST UN DÉMÉNAGEMENT, PAS UN DESSIN NEUF
 *
 * Chaque valeur vient de `prf03_zone_marche_concurrence.html`, reprise **au
 * caractère près**. Rien n'a été ajusté, arrondi ni « amélioré » au
 * passage : l'écran doit rester identique après le branchement, sinon on
 * ne saurait plus si un écart vient du déménagement ou d'un défaut.
 *
 * ⚠ **IL NE TOUCHE PAS À `diamap.css`**, qui est la charte et appartient à
 * Mr UX. Ce fichier ne porte que la mécanique d'une carte — un conteneur,
 * une légende posée dessus, trois pastilles de marqueur.
 *
 * ==========================================================================
 * ⚠ IL S'APPUIE SUR LES JETONS DE LA CHARTE, IL N'EN INVENTE AUCUN
 *
 *     --trait --border   le trait des cadres
 *     --radius           l'arrondi
 *     --t-petite         la taille du petit texte
 *     --bleu --danger    les trois couleurs de marqueur
 *     --succes
 *
 * Si un jeton change chez Mr UX, la carte suit. C'est voulu : une valeur
 * en dur se serait décrochée au premier ajustement de la charte, **sans
 * que rien ne le signale**.
 */

.carte-diamap-cadre {
  /* ⚠ LE REPÈRE DE LA LÉGENDE. Elle est posée EN ABSOLU sur la carte :
     sans `relative` ici, elle se calerait sur la page entière et
     partirait dans un coin de l'écran. */
  position: relative;
}

.carte-diamap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--trait);
}

/* ══ LA LÉGENDE, POSÉE SUR LA CARTE ══════════════════════════════════
   Une légende déportée à côté oblige à faire des allers-retours du
   regard pour lire une couleur. */
.carte-diamap-legende {
  position: absolute;
  left: 10px;
  bottom: 22px;
  z-index: 5;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .4rem .55rem;
  box-shadow: 0 2px 8px rgba(16, 42, 67, .12);
  display: flex;
  flex-direction: column;
  gap: .12rem;
  max-width: 260px;
}

.carte-diamap-legende[hidden] { display: none; }
.carte-diamap-legende .t { font-weight: 600; }
.carte-diamap-legende .m { color: #7a8699; }
.carte-diamap-legende .l {
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.carte-diamap-legende .p {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}
/* `PROJ-126` — la légende filtre la carte d'un clic : la ligne active
   reste vive, les autres s'éteignent. (À ta relecture, Mr UX.) */
.carte-diamap-legende .l.cliquable { cursor: pointer; }
.carte-diamap-legende .l.eteinte { opacity: 0.35; }
.carte-diamap-legende .l.active .p { outline: 2px solid #1f3a5f; outline-offset: 1px; }

/* ══ L'ENCADRÉ DES POINTS ════════════════════════════════════════════
   ⚠ LA TAILLE VIENT DE LA GRILLE, SANS CALCUL — et c'est un test qui me
   l'a appris au train du 23/08.

   J'avais déménagé ici le `calc(var(--t-petite) * 0.8)` de PRF-03,
   demandé par Jean-Pascal le 21/08 (« la légende est trop grande de
   20 % »). `test_aucune_taille_de_texte_hors_de_la_grille` l'a refusé :
   un calcul autour d'un jeton fabrique une QUATRIÈME taille, cachée
   derrière une multiplication.

   ⚠ **LA RÈGLE NE LE VOYAIT PAS AVANT PARCE QU'ELLE NE REGARDE PAS
   `performance/`.** La valeur vivait donc hors charte depuis le 21/08,
   sans que rien ne le signale. Le déménagement l'a exposée — c'est le
   partage qui a rendu l'écart visible, pas le partage qui l'a créé.

   ⚠ **L'ÉCART RESTE, MAIS CHEZ CELUI QUI LE VEUT** : PRF-03 le repose
   dans son propre gabarit. Un réglage propre à UN écran n'a rien à faire
   dans un composant que deux écrans partagent — la fiche SD-04 a déjà
   choisi une autre taille de son côté. */
.carte-diamap-points {
  position: absolute;
  left: .8rem;
  bottom: .9rem;
  z-index: 2;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--trait);
  border-radius: 9px;
  padding: .45rem .6rem;
  font-size: var(--t-petite);
}

.carte-diamap-points span {
  display: inline-block;
  margin-right: .4rem;
  vertical-align: middle;
}

/* ══ LES TROIS MARQUEURS ═════════════════════════════════════════════
   ⚠ LE POINT DE VENTE EST NETTEMENT PLUS GROS que les autres, et c'est
   le sujet de la carte : le confondre avec un concurrent ferait lire la
   carte à l'envers. */
.pt-magasin {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--bleu);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(16, 42, 67, .4);
}

.pt-concurrent {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid #fff;
}

.pt-interet {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--succes);
  border: 2px solid #fff;
}