/* ==========================================================================
   Carte des routes (composant x-public.route-map) : fond en points, routes courbes en
   pointillés, points lumineux. Même rendu partout ; couleurs de tf-palette.css.
   Le parent place la carte (position, largeur) ; la hauteur suit le cadrage (aspect-ratio).
   ========================================================================== */

.tf-map { position: relative; width: 100%; pointer-events: none; }
.tf-map--world { aspect-ratio: 1600 / 760; }
.tf-map--atlantic { aspect-ratio: 820 / 350; }
.tf-map__dots { position: absolute; inset: 0; background: url("../images/site/carte-monde-bleue.webp") no-repeat; }
.tf-map--world .tf-map__dots { background-size: 100% 100%; background-position: center; }
/* Cadrage Atlantique (x 80–900, y 120–470 de la carte) : 1600 / 820 = 195,12 % ; positions 80 / 780 et 120 / 410. */
.tf-map--atlantic .tf-map__dots { background-size: 195.12% auto; background-position: 10.26% 29.27%; }
.tf-map__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Routes : une seule épaisseur, un seul tiret, une seule animation lente pour tout le réseau */
/* Trait et tirets en pixels d’écran (non-scaling-stroke) : même épaisseur quelle que soit la taille de la carte. */
.tf-map__route { fill: none; stroke: var(--tf-blue-on-dark); stroke-width: 1.3; stroke-dasharray: 2 4; stroke-linecap: round; opacity: 0.8; vector-effect: non-scaling-stroke; }
.tf-map__route--light { stroke: var(--tf-blue-on-dark); opacity: 0.65; }
.tf-map__route--green { stroke: var(--tf-green); opacity: 0.7; }
.tf-map__lines .tf-map__route { animation: tf-map-flow 7s linear infinite; }
@keyframes tf-map-flow { to { stroke-dashoffset: -60; } }

/* Points */
.tf-map__hub { fill: #ffffff; stroke: var(--tf-blue-on-dark); stroke-width: 4; }
.tf-map__halo { fill: var(--tf-blue-on-dark); opacity: 0.22; }
.tf-map__halo--green { fill: var(--tf-green); }
.tf-map__dot { fill: var(--tf-blue-on-dark); }
.tf-map__dot--green { fill: var(--tf-green); }
.tf-map__pulse { fill: none; stroke: var(--tf-blue-on-dark); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: tf-map-pulse 3s ease-out infinite; }
.tf-map__pulse--green { stroke: var(--tf-green); }
.tf-map__pulse--late { animation-delay: 1.5s; }
@keyframes tf-map-pulse { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }

/* Noms (variante opérationnelle uniquement) */
.tf-map__label { fill: #ffffff; font: 700 22px var(--tf-font); letter-spacing: 0.04em; paint-order: stroke; stroke: var(--tf-navy); stroke-width: 6px; }
.tf-map--atlantic .tf-map__label { font-size: 17px; stroke-width: 5px; }

/* Ton clair (carte posée sur fond blanc) */
.tf-map--light .tf-map__route { stroke: var(--tf-blue); }
.tf-map--light .tf-map__route--green { stroke: var(--tf-green-dark); }
.tf-map--light .tf-map__hub { fill: var(--tf-blue); stroke: var(--tf-blue-soft); }
.tf-map--light .tf-map__dot, .tf-map--light .tf-map__dot--light { fill: var(--tf-blue); }
.tf-map--light .tf-map__dot--green { fill: var(--tf-green-dark); }
.tf-map--light .tf-map__label { fill: var(--tf-navy); stroke: #ffffff; }

/* Téléphone : réseau allégé (3 routes canadiennes, 4 vers l'Afrique), sans halos ni pulsations secondaires.
   Le trait est un peu plus épais pour rester lisible sur une carte réduite. */
@media (max-width: 767.98px) {
  .tf-map__minor, .tf-map__halo { display: none; }
  .tf-map__route { stroke-width: 1.6; }
  .tf-map__pulse--late { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tf-map__lines .tf-map__route, .tf-map__pulse { animation: none !important; }
}