# Explore Togo — zoom au survol

Complément à `explore-togo-zoom-region.md`. Le cadrage, les transformations, la contre-échelle et les sorties ne changent pas. Seul le déclenchement change.

---

## 1. Deux états, deux comportements

**État A — vue pays.** Le survol d'une région l'éclaire et met à jour le panneau, comme aujourd'hui. Si le curseur reste sur la même région pendant 250 ms, le zoom se déclenche. Un clic avant la fin du délai zoome immédiatement, sans attendre.

**État B — vue région.** Le survol ne fait plus rien. Plus aucune région ne réagit au passage du curseur. On ne sort que par une action explicite, ou en quittant la zone.

Cette bascule est ce qui rend l'interaction utilisable. Sans elle, l'agrandissement modifie ce qui se trouve sous le curseur et provoque un battement entre les deux états.

---

## 2. Les quatre pièges, et leur parade

| Piège | Parade |
| --- | --- |
| Traverser la carte de haut en bas déclenche cinq zooms d'affilée | Délai d'intention de 250 ms, annulé dès que le curseur quitte la région |
| Une fois zoomé, le curseur survole la région agrandie et relance le cycle | En état B, le survol est neutralisé et les régions hors focus passent en `pointer-events: none` |
| Impossible d'atteindre le panneau sans traverser d'autres régions | Même parade : en état B rien ne réagit, le trajet vers le panneau est libre |
| Sur mobile il n'y a pas de survol | Détection de capacité — le survol ne pilote rien sur tactile, le tap reste le déclencheur |

---

## 3. Paramètres

```js
const DELAI_ENTREE = 250;  // survol continu avant zoom
const DELAI_SORTIE = 500;  // hors de la zone avant retour à la vue pays
```

250 ms est le seuil sous lequel un survol de passage devient un survol intentionnel. En dessous de 180 ms l'interaction part toute seule ; au-delà de 350 ms elle paraît molle.

La zone de sortie est **la scène et le panneau réunis**, pas la scène seule. Sinon un utilisateur qui déplace son curseur vers la liste des sites déclencherait un dézoom en cours de route.

---

## 4. Logique

```js
const survolActif = matchMedia('(hover: hover) and (pointer: fine)').matches;
let tEntree = null, tSortie = null, regionActive = null;

function surRegionEntree(e, el) {
  if (!survolActif || e.pointerType !== 'mouse' || regionActive) return;
  apercu(el);                                   // surbrillance + panneau, sans zoom
  clearTimeout(tEntree);
  tEntree = setTimeout(() => zoomer(el), DELAI_ENTREE);
}

function surRegionSortie() {
  clearTimeout(tEntree);
}

zone.addEventListener('pointerenter', () => clearTimeout(tSortie));
zone.addEventListener('pointerleave', () => {
  if (!regionActive) return;
  tSortie = setTimeout(devoomer, DELAI_SORTIE);
});
```

Dans `zoomer()` : renseigner `regionActive`, et ajouter `pointer-events: none` aux régions, marqueurs et grappes portant `is-hors-focus`.
Dans `devoomer()` : remettre `regionActive` à `null` et rétablir les `pointer-events`.

Utiliser `pointerenter` et `pointerleave`, pas `mouseover` et `mouseout` — ces derniers se propagent aux enfants et déclenchent des sorties parasites à chaque marqueur traversé.

Le test `e.pointerType !== 'mouse'` bloque l'émulation de survol que produisent certains navigateurs tactiles au premier tap.

---

## 5. Changer de région sans repasser par la vue pays

En état B, la minicarte devient la commande de navigation : survoler une région dessus l'éclaire, cliquer bascule le zoom directement sur elle. Cliquer en dehors des régions, sur le fond de la minicarte, ramène à la vue pays.

C'est ce qui évite l'aller-retour permanent entre vue pays et vue région quand on compare deux zones. Sur mobile, la minicarte ne sert qu'au retour — ses cinq zones font moins de 44 px de haut, elles ne conviennent pas au doigt.

---

## 6. Ce qui ne change pas

- **Clic.** Il reste le déclencheur principal et le seul sur tactile. Le survol s'ajoute, il ne remplace rien.
- **Clavier.** Le focus sur une région puis Entrée zoome. Aucun délai, aucun survol : un utilisateur au clavier ne survole jamais.
- **Sorties.** Minicarte, Échap, bouton du panneau, balayage vers le bas en mobile. La sortie automatique après 500 ms hors zone s'ajoute à ces quatre-là, elle ne les remplace pas.
- **Tour automatique.** Il se coupe définitivement au premier mouvement du curseur sur la scène, et non plus seulement au premier clic.
- **`prefers-reduced-motion`.** Le zoom reste, sans transition. Les délais restent inchangés.