/* ==========================================================================
   Visualisations SVG — public/css/components/viz.css
   Classes de présentation des SVG produits par public/js/shared/viz*.js. Aucun
   attribut `style` dans les SVG (CSP) : la couleur vient de ces classes, qui
   lisent les jetons (clair, sombre, impression). Réutilisable par l'exemple
   public (S4-02).
   ========================================================================== */

.f-wood { fill: var(--wood); } .f-fire { fill: var(--fire); } .f-earth { fill: var(--earth); } .f-metal { fill: var(--metal); } .f-water { fill: var(--water); }
.s-wood { stroke: var(--wood); } .s-fire { stroke: var(--fire); } .s-earth { stroke: var(--earth); } .s-metal { stroke: var(--metal); } .s-water { stroke: var(--water); }
/* Texte coloré d'un élément (≥ 4,5:1 sur papier) */
.fi-wood { fill: var(--wood-ink); } .fi-fire { fill: var(--fire-ink); } .fi-earth { fill: var(--earth-ink); } .fi-metal { fill: var(--metal-ink); } .fi-water { fill: var(--water-ink); }

.f-ink { fill: var(--ink); } .f-ink2 { fill: var(--ink-2); } .f-ink3 { fill: var(--ink-3); }
.f-acc { fill: var(--accent); } .f-paper { fill: var(--paper); } .f-surface { fill: var(--surface); }
.f-seal { fill: var(--seal); } .f-onseal { fill: var(--on-seal); } .f-none { fill: none; }
.s-acc { stroke: var(--accent); } .s-line { stroke: var(--line-strong); } .s-soft { stroke: var(--line); }
.s-ink3 { stroke: var(--ink-3); } .s-paper { stroke: var(--paper); } .s-surface { stroke: var(--surface); }
/* Chiffre posé sur un pigment plein : blanc en clair, nuit en sombre */
.on-el { fill: var(--on-pigment); }

.svg-serif { font-family: var(--font-display); font-variant-numeric: lining-nums; }
.svg-kr { font-family: var(--font-ko); }
.svg-sans { font-family: var(--font-ui); }

/* Un SVG de visualisation occupe la largeur de son conteneur. */
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Étiquette posée sur une courbe : un liseré de la couleur du fond la détache */
.halo { paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }