/* ===========================================
   SALES MAP COMPONENT — library/sales_map.py (v2, 2026-10-20)
   Every sold work as one dot on a world map; selection by country.
   The land is /static/img/world-land-{light|dark}.svg (cached); only the
   countries with sales are in the page, as hoverable groups.
   Behaviour: /static/js/sales-map.js.
   =========================================== */

.salesmap {
  --sm-accent: #1a1a1a;
  --sm-ink: #1a1a1a;
  --sm-sub: #66665f;
  --sm-bg: #ffffff;
  margin: 2rem 0;
  font-family: inherit;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.salesmap--dark { --sm-ink: #f2f5fa; --sm-sub: #9fb0c8; --sm-bg: #0d1421; }
.salesmap--gold { --sm-accent: #e0912f; }
.salesmap--teal { --sm-accent: #1f9e8b; }
.salesmap--rose { --sm-accent: #d24f77; }
.salesmap--navy { --sm-accent: #1d3a6d; }

/* Chiffres de tête */
.salesmap-stats { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 1.2rem; text-align: center; }
.salesmap-stat { flex: 1 1 0; min-width: 90px; padding: 0 .6rem; position: relative; }
.salesmap-stat + .salesmap-stat::before { content: ""; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: var(--sm-sub); opacity: .28; }
.salesmap-stat-n { display: block; font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 300; line-height: 1; color: var(--sm-ink); }
.salesmap-stat-l { display: block; margin-top: .4rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-sub); }

/* Carte */
.salesmap-frame { position: relative; background: var(--sm-bg); }
.salesmap-svg { display: block; width: 100%; height: auto; max-height: 640px; }

/* Pays vendus : contour, lignes depuis Paris, points */
.salesmap-country { cursor: pointer; outline: none; }
.salesmap-country path { fill: var(--sm-accent); stroke: var(--sm-accent); stroke-opacity: .35; stroke-width: .4; transition: fill-opacity .2s ease, stroke-opacity .2s ease; }
.salesmap-dots { fill: var(--sm-accent); opacity: .85; transition: opacity .2s ease; }
.salesmap-arcs path { fill: none; stroke: var(--sm-accent); stroke-width: .45; stroke-linecap: round; stroke-opacity: .32;
  stroke-dasharray: 600; stroke-dashoffset: 600; animation: salesmap-fly 2.6s ease-out forwards; }
.salesmap-arcs path:nth-child(3n) { animation-delay: .35s; }
.salesmap-arcs path:nth-child(3n+1) { animation-delay: .7s; }
@keyframes salesmap-fly { to { stroke-dashoffset: 0; } }

/* Sélection d'un pays : il s'éclaire, les autres s'estompent */
.salesmap-sold:hover .salesmap-country:not(:hover) .salesmap-dots,
.salesmap-sold.has-focus .salesmap-country:not(.on) .salesmap-dots { opacity: .25; }
.salesmap-sold:hover .salesmap-country:not(:hover) .salesmap-arcs path,
.salesmap-sold.has-focus .salesmap-country:not(.on) .salesmap-arcs path { stroke-opacity: .08; }
.salesmap-country:hover > path, .salesmap-country:focus > path, .salesmap-country.on > path { fill-opacity: .55; stroke-opacity: 1; stroke-width: .8; }
.salesmap-country:hover .salesmap-dots, .salesmap-country:focus .salesmap-dots, .salesmap-country.on .salesmap-dots { opacity: 1; }
.salesmap-country:hover .salesmap-arcs path, .salesmap-country:focus .salesmap-arcs path, .salesmap-country.on .salesmap-arcs path { stroke-opacity: .9; stroke-width: .7; }

/* Ligne sous la carte et légende */
.salesmap-caption { margin: .6rem 0 0; font-size: 14px; color: var(--sm-ink); min-height: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.salesmap-legend { position: absolute; right: 10px; bottom: 8px; display: flex; align-items: center; gap: 6px; }
.salesmap-legend-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sm-accent); }
.salesmap-legend-txt { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-sub); }

@media (max-width: 600px) {
  .salesmap-stat-l { font-size: .6rem; letter-spacing: .06em; }
  .salesmap-legend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .salesmap-arcs path { animation: none; stroke-dashoffset: 0; }
  .salesmap-country path, .salesmap-dots { transition: none; }
}