/*
 * Le CADRAN : jetons de couleur, plateau, cadre bois, disque de carte et les
 * calques qui s'y empilent.
 *
 * Partagé par `index.html` (l'atelier) et `demo.html`. Une seconde copie de
 * ces règles aurait donné deux cadrans qui se ressemblent — jusqu'au jour où
 * l'un change. L'empilement en z est la partie la plus fragile : le fond
 * passe SOUS les marqueurs, la grille de perçage AU-DESSUS du fond mais SOUS
 * les marqueurs, l'artwork au-dessus du voile de zone, les alertes au-dessus
 * de l'artwork. Chaque rang porte ici la raison qui l'a fixé.
 *
 * Le fond et la grille ne portent PAS leur rang ici : ce sont des panneaux
 * Leaflet, posés DANS `#map` par `installerPanneauDesFonds` et
 * `installerPanneauDeGrille` (`src/vue.js`), avec leur z-index à eux — 250 et
 * 550. `#map` est lui-même un contexte d'empilement (`z-index: 2` plus bas) :
 * un enfant ne s'en évade pas par son seul z-index, et un calque écrit ICI
 * avec un nombre entre 250 et 600 ne s'intercalerait PAS entre le fond et les
 * marqueurs — il se peindrait entièrement au-dessus ou entièrement en dessous
 * de `#map` tout entier. D'où deux familles de rang dans ce fichier : celle
 * des calques externes à `#map` (les nombres ci-dessous), et celle des
 * panneaux internes (dans `vue.js`, comparés aux panneaux Leaflet eux-mêmes —
 * tuiles 200, fond 250, grille 550, marqueurs 600).
 *
 * Ce qui reste propre à chaque page — panneaux, barres, onglets — vit dans sa
 * page.
 *
 * Ce fichier ne porte que les jetons du CADRAN — les couleurs du produit, pas
 * du site qui le vend. Les jetons d'HABILLAGE (`--papier`, `--carte`,
 * `--marine`, etc., encore lus par `body` ci-dessous) sont posés par
 * `habillage-atelier.css` ou `habillage-site.css`, chargé avant celui-ci :
 * même page, même style, deux jeux de valeurs possibles.
 */

:root{
  /* Plateau et retrait du disque cartographique, pour la face de 300 mm.
     `appliquerFace` (atelier.js) les recalcule dès que le diamètre change :
     ils grandissent avec le cadre bois, qui mesure 10 mm ABSOLUS et occupe
     donc d'autant plus de pixels que la face est petite. Ils vivent sur la
     racine parce que la COLONNE les lit elle aussi — sinon elle raboterait le
     plateau à sa propre largeur et la rose déborderait sur l'interface. */
  --inset:74px; --plateau:788px;

  --mer:#253A5C; --terre:#111C2D;
  /* Cadre bois clair — 10 mm sur la face de 300 mm, soit 21,33 px en 640 */
  --bois:#D7BC8E; --bois-clair:#E7D4B0; --bois-fonce:#B99A6B; --bois-chant:#8F7448;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Le quadrillage papier millimétré n'est plus posé ici : c'est un plan de
   travail d'ATELIER, pas une couleur du cadran — il vit maintenant dans
   `habillage-atelier.css`. Ce `body` ne pose que l'aplat, commun aux deux
   habillages via `--papier`. */
body{background:var(--papier);color:var(--encre);font-family:Montserrat,system-ui,sans-serif;
  font-size:13px;padding:16px}
.wrap{max-width:1580px;margin:0 auto}
svg.i{width:14px;height:14px;flex:0 0 14px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.i.big{width:16px;height:16px;flex:0 0 16px}

/* ---------- cadran ---------- */
/* Plateau et retrait du disque cartographique : posés ici pour la face de
   300 mm, puis recalculés par `appliquerFace` (atelier.js) dès que le diamètre
   change. Ils grandissent avec le cadre bois, qui mesure 10 mm ABSOLUS et
   occupe donc d'autant plus de pixels que la face est petite — sans quoi la
   rose des vents débordait sur l'interface. */
.stage{position:relative;width:var(--plateau);height:var(--plateau);max-width:100%;margin:0 auto}
/* Taille FIXE, dans le même repère que `#map` : `inset:0` la faisait suivre
   `.stage`, qui se rétrécit sous 740 px de fenêtre, alors que la carte garde
   ses 640 px à `left:50px`. Les deux se découplaient — 44,5 px de décalage
   mesurés à 698 px de large — et la rose cessait d'être concentrique. */
.rose{position:absolute;left:0;top:0;width:740px;height:740px;z-index:1;pointer-events:none}
/* Cadre bois : anneau de 10 mm de bois. Les pixels écrits ici sont ceux de
   la face de 300 mm ; `poserCadreBois` (atelier.js) les recalcule dès que le
   diamètre change, sans quoi un cadran de 160 mm se serait affiché cerclé de
   4,7 mm. Ils restent en dur pour que le cadre soit peint avant le premier
   trait de script. Le dégradé oblique suggère un débit de planche. */
.cadre{position:absolute;z-index:1;pointer-events:none;
  left:28.67px;top:28.67px;width:682.66px;height:682.66px;border-radius:50%;
  background:linear-gradient(118deg,var(--bois-clair) 0%,var(--bois) 34%,
    var(--bois-fonce) 58%,var(--bois) 78%,var(--bois-clair) 100%);
  box-shadow:0 18px 40px rgba(11,43,69,.26),
    inset 0 0 0 1px rgba(143,116,72,.55),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -2px 4px rgba(143,116,72,.35)}
#map{position:absolute;z-index:2;left:var(--inset);top:var(--inset);width:640px;height:640px;border-radius:50%;
  overflow:hidden;background:var(--mer);
  box-shadow:0 0 0 1.5px rgba(11,43,69,.55),0 0 0 3px rgba(143,116,72,.45)}
/* Le voile de la zone des mini-cadrans (`.zone-dials`, posé et retiré par
   `dessineZone`) — SEUL occupant de `#ov` depuis que la grille de perçage en
   est sortie pour vivre dans `#map` (voir l'en-tête de ce fichier). Le nom
   « overlay » est resté générique ; son rôle, lui, s'est resserré. */
.overlay{position:absolute;left:var(--inset);top:var(--inset);width:640px;height:640px;border-radius:50%;
  overflow:hidden;clip-path:circle(50% at 50% 50%);pointer-events:none;z-index:650}
/* Le fond cartographique, dessiné par l'atelier depuis les couches locales.
   Il vit DANS la carte, dans un panneau Leaflet dédié (voir `atelier.js`,
   « le panneau des fonds ») intercalé entre les tuiles et les marqueurs.
   Empilé au-dessus de `#map`, il couvrait les repères : ceux-ci sont des
   marqueurs Leaflet, enfermés dans `.leaflet-map-pane`, hors d'atteinte
   d'un z-index posé de l'extérieur.
   Pas de découpe ici : `#map` clippe déjà en disque, et une découpe portée
   par le canevas suivrait ses translations pendant un déplacement.
   Position et décalage sont posés par Leaflet — d'où `left/top` à zéro. */
.fond{position:absolute;left:0;top:0;width:640px;height:640px;pointer-events:none}
/* L'artwork des mini-cadrans : le dessin de production, posé sur la carte.
   AU-DESSUS du voile de zone (z 650), et non dessous : le voile en
   assombrissait sinon la moitié basse. Le voile est un repère de travail, le
   dessin est ce qui s'imprime — c'est lui qui doit se lire. */
.artwork{position:absolute;z-index:660;left:var(--inset);top:var(--inset);width:640px;height:640px;
  border-radius:50%;clip-path:circle(50% at 50% 50%);pointer-events:none}
.attente{position:absolute;z-index:700;left:var(--inset);top:var(--inset);width:640px;height:640px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(11,43,69,.72);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.4px;text-align:center;padding:0 60px;line-height:1.5;pointer-events:none}
.attente.err{background:rgba(224,123,94,.86)}
/* La grille de perçage : un repère de travail, pas ce qu'on compose — les
   flèches (marqueurs Leaflet, z 600) doivent rester lisibles PAR-DESSUS elle.
   Pas de z-index ici : comme `.fond` ci-dessus, elle vit DANS la carte, dans
   son propre panneau Leaflet (`installerPanneauDeGrille`, `src/vue.js`),
   entre le fond (250) et les marqueurs (600) — un rang qu'aucun z-index posé
   depuis l'extérieur de `#map` ne peut atteindre. Pas de découpe non plus :
   `dessineGrille` (atelier.js) s'arrête déjà avant le bord du disque, et une
   découpe posée ici suivrait les translations de la carte pendant un
   déplacement, comme pour `.fond`. */
.gridsvg{position:absolute;inset:0;width:640px;height:640px;pointer-events:none}
/* Les alertes passent AU-DESSUS de l'artwork (660) et de la zone (650) :
   un axe fautif tombe précisément dans la zone des mini-cadrans, donc son
   signal serait recouvert par le dessin même de ce qu'il dénonce. */
.alertes{position:absolute;z-index:670;left:var(--inset);top:var(--inset);width:640px;height:640px;
  border-radius:50%;clip-path:circle(50% at 50% 50%);pointer-events:none}
.zone-dials{position:absolute;pointer-events:none;background:rgba(3,16,28,.82);
  border:1px dashed rgba(255,255,255,.35)}
.hint{position:absolute;left:0;right:0;bottom:0;text-align:center;color:var(--sourd);font-size:11px}