/* --- Carte de France muette : départements, régions, fleuves, villes, mers (france-map.js) --- */
:root {
  --fm-sea: #e0f2fe;
  --fm-sea-text: #0369a1;
  --fm-land: #f6f1e4;
  --fm-land-out: #ebe8e1;
  --fm-hover: #fde68a;
  --fm-border: #c4bba8;
  --fm-region-line: #6b6252;
  --fm-river: #2563eb;
  --fm-hl: #f59e0b;
  --fm-right: #22c55e;
  --fm-wrong: #ef4444;
  --fm-halo: rgba(255, 255, 255, 0.85);
}

[data-bs-theme="dark"] {
  --fm-sea: #0c2236;
  --fm-sea-text: #7dd3fc;
  --fm-land: #2b303b;
  --fm-land-out: #1e222a;
  --fm-hover: #715a1c;
  --fm-border: #4b5263;
  --fm-region-line: #a7adba;
  --fm-river: #60a5fa;
  --fm-hl: #d97706;
  --fm-right: #16a34a;
  --fm-wrong: #dc2626;
  --fm-halo: rgba(12, 34, 54, 0.85);
}

.fm-map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: var(--school-radius-md);
  background: var(--fm-sea);
  user-select: none;
}

/* Départements et contours de région (traits en pixels quel que soit le zoom) */
.fm-dept {
  fill: var(--fm-land);
  stroke: var(--fm-border);
  stroke-width: 0.6px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s ease;
}

.fm-dept.is-out {
  fill: var(--fm-land-out);
  pointer-events: none;
}

.fm-dept.is-right { fill: var(--fm-right); }
.fm-dept.is-wrong { fill: var(--fm-wrong); }
.fm-dept.is-hl { fill: var(--fm-hl); }

.fm-region-line {
  fill: none;
  stroke: var(--fm-region-line);
  stroke-width: 1.6px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Zones cliquables : survol et focus clavier */
.fm-map [data-pick] { cursor: pointer; }
.fm-map [data-pick]:focus { outline: none; }

.fm-dept.fm-pickable:hover,
.fm-dept.fm-pickable:focus-visible,
.fm-region-group.fm-pickable:hover .fm-dept:not(.is-out),
.fm-region-group.fm-pickable:focus-visible .fm-dept:not(.is-out) { fill: var(--fm-hover); }

.fm-dept.fm-pickable.is-hl:hover { fill: var(--fm-hl); }

.fm-dept.fm-pickable:focus-visible { stroke: var(--fm-hl); stroke-width: 2.5px; }

/* Fleuves : tracé fin, zone de clic large et transparente au-dessus */
.fm-river {
  fill: none;
  stroke: var(--fm-river);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.fm-river.is-hl,
.fm-river.is-right,
.fm-river.is-wrong { stroke-width: 4.5px; }

.fm-river.is-right { stroke: var(--fm-right); }
.fm-river.is-wrong { stroke: var(--fm-wrong); }
.fm-river.is-hl { stroke: var(--fm-hl); }

.fm-river:has(+ .fm-river-hit:hover),
.fm-river:has(+ .fm-river-hit:focus-visible) { stroke-width: 4.5px; }

.fm-river-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
}

/* Villes et mers : texte détouré pour rester lisible sur les terres comme sur la mer */
.fm-city { pointer-events: none; }

.fm-city circle {
  fill: var(--school-text);
  stroke: var(--fm-halo);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.fm-city text,
.fm-sea {
  paint-order: stroke fill;
  stroke: var(--fm-halo);
  stroke-width: 0.22em;
  stroke-linejoin: round;
}

.fm-city text {
  fill: var(--school-text);
  font-weight: 700;
}

.fm-sea {
  fill: var(--fm-sea-text);
  font-style: italic;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.fm-hint {
  text-align: center;
  font-weight: 600;
  color: var(--school-text-muted);
}

/* Fiche de l'explorateur */
.fm-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  font-size: 0.95rem;
}

.fm-facts dt { color: var(--school-text-muted); font-weight: 600; }
.fm-facts dd { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .fm-dept { transition: none; }
}