/* ============================================================
   LA MAQUETTE (accueil en chemin v2, 2026-09-06)
   Des objets poses sur la table, vus de face : face papier, tranche,
   ombre douce. Aucun texte dans les dessins (la prose porte les mots) ;
   le seul texte SVG est le compte de la carte.
   Graphes en trois encres (decision Hugues, planche 2 du 6 septembre) :
   bleu, sauge, bleu pale ; l'ambre reste le seul signal. Le carre de metier,
   lui, est en noir et blanc depuis le 8 septembre (planche 9, variante V1).
   ============================================================ */
/* Le carre de metier parait en trois lieux : les jetons de l'ecran des criteres,
   les marqueurs P3 du zoom, l'icone de la fiche. Une seule palette pour les trois,
   sinon le meme objet dirait deux choses a deux ecrans d'ecart (decision Hugues du
   8 septembre 2026, planche 9 V1 : « je les prefere en noir et blanc, un creme comme
   le fond du site »). Face creme, le fond meme du site ; tranche #cfd2d8 ; pictogramme
   encre. Teinte, le carre s'inverse : face encre, pictogramme en reserve creme. Le bleu
   et le bleu pale (--dessin-d1, --dessin-d3) ne servent plus qu'aux graphes. */
:root { --dessin-grille:#cfd2d8; --dessin-barre:#dcdee3; --dessin-tranche:#cfd2d8; --dessin-d1:#2b4a7a; --dessin-d2:#5f8068; --dessin-d3:#d6dde9;
        --dessin-jeton-face:var(--bg); --dessin-jeton-picto:var(--ink); --dessin-jeton-face-teinte:var(--ink); --dessin-jeton-picto-teinte:var(--bg); }

/* ---------- Le vocabulaire des objets ---------- */
.c-feuille, .c-fiche { display:block; }
.c-feuille > svg, .c-fiche > svg { display:block; width:100%; height:auto; overflow:visible; }
.ombre { fill:var(--ink); opacity:.10; filter:url(#flou); }
.tranche { fill:var(--dessin-tranche); }
.face { fill:var(--paper); stroke:var(--dessin-tranche); stroke-width:1; }
.titre { fill:var(--ink); }
.barre { fill:var(--dessin-barre); }
.d1 { fill:var(--dessin-d1); }
.d2 { fill:var(--dessin-d2); }
.d3 { fill:var(--dessin-d3); stroke:var(--dessin-d1); stroke-width:1; }
.axe { stroke:var(--ink); stroke-width:1; }
/* Les liens et la cote se tracent : dasharray 1 sur un pathLength de 1 ; sans
   decalage (l'etat de base), le trait est entier. Le decalage initial ne vit
   que sous @supports, dans accueil-chemin.css. */
.lien { fill:none; stroke:var(--dessin-d2); stroke-width:1.4; stroke-dasharray:1; }
.cote { fill:none; stroke:var(--ink); stroke-width:1; stroke-dasharray:1; }
.ambre { fill:var(--accent); }
.lecteur { fill:var(--accent); opacity:.28; }
/* Le socle de l'icone de la fiche : la version TEINTEE du carre de metier, seule lisible
   sur la feuille blanche (une face creme y disparaitrait, et le socle n'a pas de tranche
   pour l'en detacher : mesure faite sur la planche 9). Son pictogramme passe donc en
   reserve creme ; ailleurs (les jetons), le pictogramme est d'encre. */
.socle { fill:var(--dessin-jeton-face-teinte); }
.picto { fill:none; stroke:var(--dessin-jeton-picto); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.socle + .picto { stroke:var(--dessin-jeton-picto-teinte); }

/* ---------- La carte : grille, societes, cercle, cible, marqueurs P3 ---------- */
.c-carte svg { width:100%; height:100%; overflow:visible; display:block; }
#grille circle { fill:var(--dessin-grille); }
.soc { fill:var(--ink); transform-box:fill-box; transform-origin:center; }
#compte { font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; fill:var(--ink); }
/* Pas de vector-effect ici : le trace se dessine par stroke-dasharray, et le
   tirete doit se mesurer dans le repere du viewBox comme --circ. */
#cercle { fill:none; stroke:var(--ink); stroke-width:1; }
#cible-anneau { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; }
/* Le marqueur de metier (P3, le carre du zoom) : face creme sans filet, tranche dessous,
   pictogramme encre. Positionne par x/y, jamais par transform. Au zoom, aucun marqueur
   n'est teinte : l'anneau d'ambre suffit a designer la cible. Le pictogramme est pose par
   un <use> ; sa couleur se donne au `.pict` du symbole, dans les defs de la page (un
   selecteur de classe n'entre pas toujours dans l'arbre d'ombre d'un <use>). */
.logo { transform-box:fill-box; transform-origin:center; }
.logo .face { fill:var(--dessin-jeton-face); stroke:none; }
.logo .tranche { fill:var(--dessin-tranche); }
.pict { fill:none; stroke:var(--dessin-jeton-picto); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
/* Le jeton de metier : le meme carre P3, en marge de la carte a l'ecran des criteres.
   Face creme sans filet, tranche dessous, pictogramme encre ; teinte, le carre s'inverse
   (face encre, pictogramme en reserve creme). La teinte des rangs 0 et 3 est portee par
   l'animation, pas par une regle de repos : une valeur de repos deviendrait l'etat de
   depart du geste et il ne se verrait plus. La mise en place et les gestes vivent dans
   accueil-chemin.css, avec la legende dont il occupe la place. */
.c-jetons svg { display:block; width:100%; height:auto; overflow:visible; }
.jeton { transform-box:fill-box; transform-origin:center; }
.jeton .face { fill:var(--dessin-jeton-face); stroke:none; }
/* Le compte est du texte SVG : 13 unites de viewBox valent 13 px quand la carte fait
   600 px. Sous 1200 px de large la scene est partagee en deux (carte 418 a 580 px) et
   sur un ecran de moins de 770 px de haut le plafond 78vh la ramene sous 600 : le compte
   se masque plutot que de passer sous le plancher de 13 px (revue du 2026-09-07). */
@media (max-width:1200px), (max-height:770px) { #compte { display:none; } }

/* ---------- La fiche : posee sur la carte, en absolu (la liasse a sa propre scene) ---------- */
.c-fiche { position:absolute; right:-8px; top:50%; width:300px; transform:translateY(-50%); }
@media (max-width:1000px) {
  /* Sur telephone, l'ombre est plate. `filter:url(#flou)` est un flou gaussien SVG pose
     sous chaque objet qui se pose, s'eventaille ou entre par la droite : cinq flous a
     refaire a chaque image du geste, sur le processeur graphique d'un telephone. C'est
     l'un des couts que le test de Hugues du 07-09 a fait remonter (« le scroll vers le bas
     n'est pas hyper fluide »). L'opacite de 10 % reste : l'objet garde son assise, il perd
     le degrade de son bord. Au bureau le flou ne coute rien et il reste. */
  .ombre { filter:none; }
}