/* ============================================================
   SpiLi — L'Atelier
   Identité « Le Filet » · lot 3-5
   ------------------------------------------------------------
   La troisième porte : la planche annotée, zoom libre. Régime
   sombre — c'est une scène, elle sert à voir.

   Tout ce qui suit tient à une idée : le `viewBox` met la carte à
   l'échelle, y compris ce qui ne doit pas grossir. Un repère est
   un signe, pas un territoire ; un nom de département est du
   texte, pas un objet géographique. `--z`, publié par
   `js/atelier.js`, porte le facteur courant, et l'on divise par
   lui tout ce qui doit garder sa taille à l'écran.

   Sans script, `--z` vaut 1 par la valeur de repli ci-dessous, et
   la planche s'affiche entière, à sa taille d'origine.
   ============================================================ */

#view-atlas .carte-toile {
  --z: 1;
  touch-action: none; /* le glisser pilote la carte, pas le défilement */
  cursor: grab;
}
#view-atlas .carte.est-saisie .carte-toile { cursor: grabbing; }
#view-atlas .carte-toile:focus-visible {
  outline: 2px solid var(--spili-accent);
  outline-offset: -2px;
}

/* ---------- La contre-échelle ---------- */

/* Les rayons sont des propriétés géométriques CSS : une seule variable suffit
   à tenir deux cents signes à taille constante, sans qu'aucune boucle ne
   réécrive d'attribut pendant le zoom. */
/* Seize unités de rayon, soit trente-deux de diamètre : la cible tient les
   24 px de WCAG 2.5.8 même quand le panneau de détail est ouvert et que la
   carte tombe à 948 px de large. À quatorze, elle y retombait à 22,1 px.
   La densité que cela crée est réglée par la couronne du lot A-2, dont le
   rayon suit — jamais par un rétrécissement de la cible. */
#view-atlas .repere-cible { r: calc(16px / var(--z)); }
#view-atlas .repere--categorie .repere-marque { r: calc(6px / var(--z)); }
#view-atlas .repere--aire .repere-marque,
#view-atlas .repere--repere .repere-marque,
#view-atlas .repere--groupe .repere-marque { r: calc(4.5px / var(--z)); }

/* ---------- La couronne de dispersion (lot A-2) ----------
   Le décalage est écrit en unités de toile dans `--dx` / `--dy`, et divisé ici
   par le facteur de zoom : la couronne garde donc la même taille à l'écran, et
   la position affirmée reste celle du corpus quel que soit le grossissement.

   L'attache part de l'origine du groupe — le lieu réel — et se réduit par un
   `scale`, ce qui la fait exactement rejoindre la marque translatée. */
#view-atlas .repere--disperse .repere-decale {
  transform: translate(calc(var(--dx) * 1px / var(--z)), calc(var(--dy) * 1px / var(--z)));
}
#view-atlas .attache {
  transform: scale(calc(1 / var(--z)));
  vector-effect: non-scaling-stroke;
}

/* Les libellés gardent leur corps à l'écran, comme les signes : un nom de pays
   zoomé vingt-six fois couvrirait un continent. */
#view-atlas .topo {
  font-size: calc(var(--corps, 10px) / var(--z));
  stroke-width: calc(2.4px / var(--z));
}
#view-atlas .topo--masse { --corps: 11px; }
#view-atlas .topo--eau { --corps: 10.5px; }
#view-atlas .topo--pays { --corps: 10px; }

#view-atlas .repere-nombre {
  font-size: calc(11px / var(--z));
  transform: translateY(calc((1px - 1px / var(--z)) * 9));
}

/* Les traits gardent leur épaisseur : un littoral d'un pixel zoomé vingt-six
   fois deviendrait une bande de vingt-six. */
#view-atlas .carte-terres,
#view-atlas .carte-graticule,
#view-atlas .carte-maillage,
#view-atlas .repere circle {
  vector-effect: non-scaling-stroke;
}

/* ---------- Les outils ---------- */

.atelier-outils {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  margin-left: auto;
}

.atelier-outils button {
  font: inherit; font-size: 12px; line-height: 1;
  min-width: 30px; padding: 7px 10px;
  color: var(--spili-texte); background: transparent;
  border: 1px solid var(--spili-trait); border-radius: var(--spili-rayon);
  cursor: pointer;
  transition: border-color var(--spili-transition), color var(--spili-transition);
}
.atelier-outils button:hover:not(:disabled) { border-color: var(--spili-accent); color: var(--spili-accent); }
.atelier-outils button:focus-visible { outline: 2px solid var(--spili-accent); outline-offset: 2px; }
.atelier-outils button:disabled { color: var(--spili-texte-faible); cursor: default; }

.atelier-echelle {
  font-family: var(--spili-data); font-size: 11px;
  letter-spacing: 0.08em; color: var(--spili-texte-doux);
  min-width: 12ch;
}

.atelier-aide {
  font-family: var(--spili-data); font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--spili-texte-faible);
}
.atelier-aide kbd {
  font-family: var(--spili-data); font-size: 10.5px;
  padding: 1px 4px; border: 1px solid var(--spili-trait);
}

/* ---------- Ruptures ---------- */

/* Sous 860 px, l'aide clavier disparaît : il n'y a ni molette ni clavier sur
   un téléphone, et la place manque. Les boutons, eux, restent — ce sont eux qui
   rendent le zoom atteignable au doigt. */
/* Au-dessus de 860 px, la molette et le clavier sont là, le pincement non :
   l'aide tactile ne s'affiche pas. La règle est posée AVANT la rupture, sinon
   elle la neutraliserait — même spécificité, et la dernière l'emporte. */
.atelier-aide--tactile { display: none; }

@media (max-width: 860px) {
  /* L'aide clavier n'a pas de sens au doigt — mais le geste tactile, si :
     rien n'annonçait qu'on pouvait pincer, et un geste qu'on ne devine pas
     n'existe pas (lot A-5). L'aide change de contenu au lieu de disparaître. */
  .atelier-aide { display: none; }
  .atelier-aide--tactile { display: inline; }
  .atelier-outils { margin-left: 0; width: 100%; }
}

/* ---------- La contribution ---------- */

.atelier-contribution {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--spili-trait);
  font-size: 0.86rem; line-height: 1.55;
  color: var(--spili-texte-doux); max-width: 76ch;
}
.atelier-contribution a { color: var(--spili-accent); }
.atelier-contribution span { color: var(--spili-texte-faible); }