/* ============================================================
   voyages.css — Carte du monde interactive (page /voyages/ seule)
   Extrait de site.css (audit v9 H8) : ~4 Ko evites sur les 11
   autres pages. Charge apres site.css ; depend de ses tokens.
   Dark mode : herite du remappage des primitives de site.css
   (--color-map-fill y est redefini).
   ============================================================ */
/* ===== VOYAGES MAP ===== */
      .map-kpi {
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--gray);
        margin-bottom: var(--space-5);
        display: flex;
        align-items: center;
        gap: var(--space-2-5);
      }
      .map-kpi strong { color: var(--black); font-size: var(--text-base); }
      .map-wrapper {
        border-radius: var(--radius-md);
        overflow: hidden;
        border: 4px solid transparent;
        background-image:
          linear-gradient(var(--color-map-fill), var(--color-map-fill)),
          linear-gradient(to right,
            var(--r-green) 16.6%, var(--r-yellow) 16.6% 33.2%,
            var(--r-orange) 33.2% 49.8%, var(--r-red) 49.8% 66.4%,
            var(--r-purple) 66.4% 83%, var(--r-blue) 83%
          );
        background-origin: border-box;
        background-clip: padding-box, border-box;
        position: relative;
        box-shadow: var(--shadow-panel);
      }
      #worldmap-container { display: block; line-height: 0; position: relative; }
      #worldmap-container img {
        display: block;
        width: 100%;
        height: auto;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
        user-select: none;
        -webkit-user-drag: none;
      }
      /* ===== Travel pins (pixel-art) ===== */
      .travel-pin-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
      .travel-pins-layer { position: absolute; inset: 0; pointer-events: none; line-height: 1; }
      .travel-pin {
        position: absolute;
        width: 10px;
        height: 17px;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: var(--cur-hand, pointer);
        pointer-events: auto;
        /* Ancrage exact : la pointe de la punaise est sur le point géographique */
        transform: translate(-50%, -100%);
        transform-origin: 50% 100%;
        filter: var(--shadow-retro-sm);
        transition: transform var(--duration-micro) var(--ease-retro-steps), filter var(--duration-micro) ease-out;
        -webkit-tap-highlight-color: transparent;
      }
      /* Zone tactile 24px min (WCAG 2.5.8) sans impact visuel */
      .travel-pin::after {
        content: "";
        position: absolute;
        inset: -8px; /* 10+16 = 26px >= 24px (WCAG 2.5.8) */
      }
      .travel-pin:hover,
      .travel-pin:focus-visible {
        transform: translate(-50%, -100%) translateY(-2px) scale(1.35);
        filter: var(--shadow-retro-md);
        z-index: var(--z-dropdown);
      }
      .travel-pin:hover { outline: none; }
      .travel-pin:focus-visible {
        outline: 2px solid var(--focus-outline);
        outline-offset: 3px;
        border-radius: var(--radius-sm);
      }
      .travel-pin svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
        shape-rendering: crispEdges;
      }
      /* Mobile : taille desktop conservée (9px cassait le minimum tactile) */
      #map-tooltip {
        position: fixed;
        background: var(--black);
        color: var(--cream);
        padding: var(--space-1-5) var(--space-3);
        border-radius: var(--radius-md);
        font-family: var(--font-body);
        font-size: var(--text-xs);
        font-weight: var(--fw-semi);
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--duration-instant);
        z-index: var(--z-toast);
        white-space: nowrap;
        box-shadow: var(--shadow-travel);
      }
      .map-countries-list {
        margin-top: var(--space-5);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
      }
      .country-chip {
        font-family: var(--font-body);
        font-size: var(--text-xs);
        background: var(--cream);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        padding: var(--space-1) var(--space-2-5);
        color: var(--charcoal);
        display: flex;
        align-items: center;
        gap: var(--space-1);
      }
      @media (max-width: 600px) {
        #voyages .section-header { margin-bottom: var(--space-7); }
        #voyages { padding: 52px max(20px, env(safe-area-inset-right)) 52px max(20px, env(safe-area-inset-left)) !important; } /* safe-area paysage notch (audit v13) */
      }