/* =========================================================================
   SWISS PRO MOVING — « Où nous allons » selon le lieu (28.09.2026)

   Ce que cette feuille AJOUTE à carte.css, et rien d'autre : le dessin des
   trois cartes (Suisse, France-Suisse, Europe), la zone et le point « Vous
   êtes ici », le trait d'exemple, le repère de frontière et les deux bouts
   d'un trajet tapé. Prototype : references/carte-lieu/prototype/.

   Tout ce qui existe déjà est RÉUTILISÉ, jamais recopié :
   - .carte-geneve (la figure en grille), .carte-plan, .carte-svg,
     .carte-legende, .carte-licence ;
   - .carte-direction pour « Vous êtes ici » (condensée noire, liseré) ;
   - .carte-lieu pour « Suisse », « Genève », « frontière » et les deux
     bouts tapés (pastille, liseré, cadrage data-align, est-a / est-b) ;
   - .lien-ab pour le trait (pointillé rouge, carte.css).

   Couleurs : jetons du site seulement. Le rouge (--marque) n'est qu'un
   filet ou une pastille : la zone du visiteur est au voile (--marque-voile),
   ce qui tient la règle du dixième. Aucune croix, nulle part. Le repère de
   frontière est un tiret NOIR, jamais rouge.

   Mouvement : le trait et le repère apparaissent (320 ms au plus, délai
   compris), rien ne se déplace ; sous « mouvement réduit », rien n'est animé
   et tout est à son état final dès la première image.
   ========================================================================= */

/* ----------------------------------------------------- 1. Plans et cadres */

/* Le rapport de la boîte est celui du cadre (viewBox) : avec
   preserveAspectRatio meet, le dessin remplit la boîte sans marge morte, et
   les pourcentages des étiquettes restent linéaires (même contrat que
   carte.css). Hauteur de 720 px au plus sur ordinateur, et 880 px de large
   au plus, la largeur du plan de Genève (carte.css) : taper une adresse ne
   fait plus sauter la carte d'une largeur à l'autre (DA 29.09, D7). La même
   borne sert au contrôle (largeursControle, section-carte.mjs). */
.carte-plan.cl-plan {
  aspect-ratio: var(--ratio);
  max-width: min(880px, calc(720px * var(--ratio-n)));
}

/* La carte de Suisse est rallongée en hauteur pour tenir au même rapport que
   F et E (cadreRepos, section-carte.mjs) : les bandes ajoutées au-dessus et
   au-dessous prennent la teinte des pays voisins, sans bande blanche. */
.cl-plan[data-carte="suisse"] { background: var(--surface-enfoncee); }

/* Un cadre resserré coupe la France ou la mer au bord : un filet d'un pixel
   dit que la coupe est voulue. Aucun rayon, aucune ombre (base.css §4). */
.cl-plan {
  outline: 1px solid var(--filet);
  outline-offset: -1px;
}

/* Un cadre resserré ne doit rien peindre hors de lui-même : carte.css met
   la carte de Genève en overflow visible pour ses rayons ; ici, non. */
.cl-svg { overflow: hidden; }

/* Le repère de Genève des SVG n'est jamais montré : Genève est nommée par
   une étiquette quand la phrase ou le trait en parle. */
.cl-svg .repere { display: none; }

/* ------------------------------------------------------ 2. Calques du dessin */

.cl-svg path {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.cl-svg .voisin,
.cl-svg .pays-fond,
.cl-svg .pays {
  fill: var(--surface-enfoncee);
  stroke: var(--fond);
  stroke-width: .8px;
}

.cl-svg .canton,
.cl-svg .departement,
.cl-svg .canton-leger {
  fill: var(--fond);
  stroke: var(--filet);
  stroke-width: .7px;
}

.cl-svg .canton-leger { stroke-width: .5px; }

/* La Suisse, sur la carte d'Europe : en blanc, cernée de noir. */
.cl-svg .pays.suisse {
  fill: var(--fond);
  stroke: var(--texte);
  stroke-width: 1.4px;
}

.cl-svg .lac { fill: var(--filet); stroke: none; }

/* Les bords des voisins, recouverts (BORDS_TERRE, section-carte.mjs). */
.cl-svg .cl-bord { fill: var(--surface-enfoncee); stroke: none; }

/* Le contour noir de la Suisse : le geste suisse de carte.css (.canton). */
.cl-svg .frontiere {
  fill: none;
  stroke: var(--texte);
  stroke-width: 1.6px;
}

/* La côte et les frontières de la France : un gris, pas le noir suisse. */
.cl-svg .frontiere-france {
  fill: none;
  stroke: var(--filet-fort);
  stroke-width: .9px;
}

/* ------------------------------------------- 3. La zone « Vous êtes ici » */

.cl-svg .est-visiteur { fill: var(--marque-voile); }

.cl-svg .cl-contour {
  fill: none;
  stroke: var(--marque);
  stroke-width: 2px;
}

/* « Vous êtes ici » est une .carte-direction (carte.css) : on ne fait que le
   retenir dans le cadre (Finistère, Corse, Islande, Chypre touchent le
   bord). 3,8 em = la demi-largeur du libellé + le liseré ; la même valeur
   sert au contrôle de section-carte.mjs (boiteRepere). */
.cl-ici {
  left: clamp(3.8em, var(--x), calc(100% - 3.8em));
  top: clamp(1em, var(--y), calc(100% - 1em));
}

/* Le point « Vous êtes ici (environ) » : la ville estimée par Cloudflare.
   Une pastille rouge cerclée de blanc, plus grande que celle d'une
   localité ; le libellé en condensée noire, comme « Vous êtes ici ». */
.carte-lieu.cl-ici-point {
  font-family: var(--police-titre);
  font-weight: var(--graisse-noire);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--texte);
}

.carte-lieu.cl-ici-point::before {
  width: 10px;
  height: 10px;
  background: var(--marque);
  box-shadow: 0 0 0 2px var(--fond);
}

/* Un micro-État (Liechtenstein, Monaco, Andorre, Malte) est plus petit qu'un
   pixel à ce cadre : un anneau l'entoure. */
.cl-anneau {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--marque);
  border-radius: var(--rayon-rond);
  box-shadow: 0 0 0 2px var(--fond);
}

/* « Suisse » et « frontière » : des noms, sans pastille. */
.cl-sans-point::before { content: none; }

.carte-lieu.cl-sans-point {
  color: var(--texte);
  letter-spacing: .08em;
}

/* Genève, d'où part le trait d'exemple : pastille noire, l'entreprise y est. */
.carte-lieu.cl-geneve { color: var(--texte); }
.carte-lieu.cl-geneve::before { background: var(--texte); }

/* ---------------------------------------------- 4. Le passage de la frontière */

/* Un tiret noir, cerclé de blanc, posé en travers du trait à l'endroit où
   il quitte (ou gagne) la Suisse. --angle est l'angle du trait sur l'écran :
   le tiret lui est perpendiculaire. Noir et non rouge : c'est la frontière
   qui est marquée, pas une destination. */
.cl-frontiere {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 16px;
  height: 4px;
  margin: -2px 0 0 -8px;
  background: var(--texte);
  box-shadow: 0 0 0 2px var(--fond);
  transform: rotate(calc(var(--angle, 0deg) + 90deg));
}

/* 12 px au moins sur toutes les cartes (DA 29.09, D7). */
.carte-lieu.cl-frontiere-nom {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--texte-secondaire);
}

/* DA 29.09, A2 (D13) : sur les cartes S, F, E et les trajets tapés, aucune
   étiquette ne porte de cartouche opaque ni le liseré épais de seize ombres
   (carte.css) : un halo fin de 2 px couleur du fond, en huit décalages durs
   à 2 px et quatre à 1 px, sans flou. Une étiquette peut chevaucher un
   contour : le halo le dégage sans y ouvrir un trou. La carte G garde le
   liseré de carte.css. La pastille d'un bout tapé passe de 5 à 8 px,
   cerclée de blanc : à 1440 px, elle se confondait avec le premier tiret
   du trait. */
.cl-plan .carte-lieu,
.cl-plan .carte-direction,
.cl-tapes .carte-lieu,
.cl-tapes .carte-lieu.est-a,
.cl-tapes .carte-lieu.est-b {
  background: none;
  padding: 0;
  text-shadow:
     2px 0    0 var(--fond), -2px 0    0 var(--fond),
     0    2px 0 var(--fond),  0   -2px 0 var(--fond),
     1.4px  1.4px 0 var(--fond), -1.4px  1.4px 0 var(--fond),
     1.4px -1.4px 0 var(--fond), -1.4px -1.4px 0 var(--fond),
     1px 0    0 var(--fond), -1px 0    0 var(--fond),
     0    1px 0 var(--fond),  0   -1px 0 var(--fond);
}

.cl-tapes .carte-lieu.est-a::before,
.cl-tapes .carte-lieu.est-b::before {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px var(--fond);
}

/* Le trait d'exemple du repos (F, E) : de Genève au visiteur. */
.cl-ligne-repos .lien-ab { stroke-width: 2px; }

/* ------------------------------------------------ 5. Un trajet tapé */

/* Le trajet tapé l'emporte sur ce que nous devinons : « Vous êtes ici », le
   point et le trait d'exemple disparaissent, et la zone du visiteur
   redevient une zone comme les autres. */
.cl-trajet-actif .cl-reperes,
.cl-trajet-actif .cl-contours,
.cl-trajet-actif .cl-ligne-repos { display: none; }

.cl-trajet-actif .est-visiteur { fill: var(--fond); }
.cl-trajet-actif .pays.est-visiteur,
.cl-trajet-actif .voisin.est-visiteur { fill: var(--surface-enfoncee); }

/* Les deux bouts : comme une commune allumée (carte.css .est-a / .est-b). */
.cl-svg .est-a,
.cl-svg .est-b,
.cl-trajet-actif .cl-svg .est-a,
.cl-trajet-actif .cl-svg .est-b { fill: var(--surface); }

.cl-svg .cl-contour-ab {
  fill: none;
  stroke: var(--marque);
  stroke-width: 1.6px;
}

/* ------------------------------------------------------ 6. Mouvement */

/* Le trait apparaît en 320 ms ; le repère de frontière le suit, 200 ms
   après 120 ms. Rien n'attend la fin : la légende et l'annonce sont déjà
   écrites. */
@keyframes cl-apparait {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cl-repere {
  from { opacity: 0; transform: rotate(calc(var(--angle, 0deg) + 90deg)) scaleX(.4); }
  to   { opacity: 1; transform: rotate(calc(var(--angle, 0deg) + 90deg)) scaleX(1); }
}

.cl-trajet .lien-ab { animation: cl-apparait var(--duree-moyenne) var(--entree) both; }
.cl-tapes .cl-frontiere { animation: cl-repere var(--duree-courte) var(--entree) var(--duree-instant) both; }

@media (prefers-reduced-motion: reduce) {
  .cl-trajet .lien-ab,
  .cl-tapes .cl-frontiere { animation: none; }
}

/* ------------------------------------------------ 6 bis. La légende */

/* Des lignes égales, pas de bout de phrase seul en dernière ligne : « le
   trajet. » tombait seul sous les cartes S et F à 1440 px et sous E à 390 px,
   « © les / contributeurs » se coupait (captures du 28.09). `pretty` ne
   suffisait pas : Chromium 148 ne déplace pas une fin de deux mots. `balance`
   agit jusqu'à six lignes, ce que la légende ne dépasse pas. Sans effet sur
   le texte ; un navigateur qui l'ignore coupe comme avant. */
.carte-geneve .carte-legende { text-wrap: balance; }

/* ------------------------------------------------------------- 7. À 375 px */

@media (max-width: 767px) {
  .carte-lieu.cl-ici-point { font-size: 13px; }
  /* 12 px (11 jusqu'au 29.09, 10 avant) : à 375 px, « frontière » en gris sur le gris des pays
     voisins devenait une trace (captures du 28.09). La boîte d'évitement de
     carte-lieu.mjs est calculée à la taille des noms (12-13 px) : elle couvre
     toujours ce libellé. */
  .carte-lieu.cl-frontiere-nom { font-size: 12px; }
}