/* Icônes BILOMAP — couleur par rôle, jamais dans le fichier SVG.
   🪤 Jamais de var() dans un attribut de présentation SVG : Safari iOS ne le
   résout pas, le tracé rend noir et le mode sombre meurt en silence.
   La couleur passe donc TOUJOURS par ces classes. */

.icone { width: 22px; height: 22px; display: block; flex: none; }
.icone--nav { width: 24px; height: 24px; }

/* Par défaut, le rôle neutre. */
.icone .fond  { fill: var(--color-icone-fond-neutre); }   /* pas surface-3 : trop pâle sur le fond de l’app */
.icone .trait { fill: var(--color-ink); }

/* Le corps canonique en second plan. Il a SON ton, plus foncé qu’un aplat
   ordinaire : sur le fond de l’app, --color-surface-3 était quasi invisible
   (critique de Justin, 10-08). Mesuré à quatre valeurs, retenu dans tokens —
   le corps se détache et la région marquée reste dominante. */
.icone .corps   { fill: var(--color-icone-corps); }
.icone .contour { fill: var(--color-icone-corps); }

/* Tracé au trait — méridiens, chemins. Un trait est un STROKE : c'est le seul
   endroit de la banque où la couleur ne passe pas par `fill`. Bouts ronds,
   jamais d'angle vif. */
.icone .ligne {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone--accent .fond { fill: var(--color-accent-soft); }
.icone--accent .contour { fill: var(--color-accent-soft); }
.icone--accent .trait { fill: var(--color-accent-encre); }
.icone--accent .ligne { stroke: var(--color-accent-encre); }
.icone--accent .bande { stroke: var(--color-accent-encre); }
.icone--tradition .fond { fill: var(--color-tradition-soft); }
.icone--tradition .contour { fill: var(--color-tradition-soft); }
.icone--tradition .trait { fill: var(--color-tradition-encre); }
.icone--tradition .ligne { stroke: var(--color-tradition-encre); }
.icone--tradition .bande { stroke: var(--color-tradition-encre); }
.icone--recherche .fond { fill: var(--color-recherche-soft); }
.icone--recherche .contour { fill: var(--color-recherche-soft); }
.icone--recherche .trait { fill: var(--color-recherche-encre); }
.icone--recherche .ligne { stroke: var(--color-recherche-encre); }
.icone--recherche .bande { stroke: var(--color-recherche-encre); }
.icone--securite .fond { fill: var(--color-securite-soft); }
.icone--securite .contour { fill: var(--color-securite-soft); }
.icone--securite .trait { fill: var(--color-securite-encre); }
.icone--securite .ligne { stroke: var(--color-securite-encre); }
.icone--securite .bande { stroke: var(--color-securite-encre); }
.icone--exercice .fond { fill: var(--color-exercice-soft); }
.icone--exercice .contour { fill: var(--color-exercice-soft); }
.icone--exercice .trait { fill: var(--color-exercice-encre); }
.icone--exercice .ligne { stroke: var(--color-exercice-encre); }
.icone--exercice .bande { stroke: var(--color-exercice-encre); }
.icone--chair .fond { fill: var(--color-icone-chair-soft); }
.icone--chair .contour { fill: var(--color-icone-chair-soft); }
.icone--chair .trait { fill: var(--color-icone-chair-encre); }
.icone--chair .ligne { stroke: var(--color-icone-chair-encre); }
.icone--chair .bande { stroke: var(--color-icone-chair-encre); }

/* En mode sombre, un pastel ne peut plus être une surface : il devient le
   marqueur. Les jetons de la charte portent déjà la bascule — rien à redéfinir
   ici tant que colors.css est chargé avant. */

/* ── LES BANDES DE DERMATOME ────────────────────────────────────────────
   « pas full : ça devrait être un bonhomme arc-en-ciel » (Justin, 10-08).
   Sept bandes, teintes régulièrement espacées, l'arc rouge-orangé évité —
   l'orange est interdit de marque, le rouge appartient à la Sécurité.
   ⚠️ Ce sont des couleurs de CARTE, pas de navigation : les deux systèmes
   sont séparés depuis la décision du 10-08. */
:root {
  /* Rôle CHAIR — la couleur du muscle dans toute l'anatomie illustrée.
     Ce sont des couleurs de CARTE, pas de navigation. */
  --color-chair-soft:  var(--color-icone-chair-soft);
  --color-chair:       var(--color-icone-chair);
  --color-chair-encre: var(--color-icone-chair-encre);
}

/* Bande large — un méridien tendino-musculaire est une BANDE, pas une ligne.
   C'est la seule différence avec `ligne`, et elle doit se voir. */
.icone .bande {
  fill: none; stroke: var(--color-ink); stroke-width: 34;
  stroke-linecap: round; stroke-linejoin: round;
}

.icone .b1 { fill: var(--color-icone-bande-1); }
.icone .b2 { fill: var(--color-icone-bande-2); }
.icone .b3 { fill: var(--color-icone-bande-3); }
.icone .b4 { fill: var(--color-icone-bande-4); }
.icone .b5 { fill: var(--color-icone-bande-5); }
.icone .b6 { fill: var(--color-icone-bande-6); }
.icone .b7 { fill: var(--color-icone-bande-7); }

/* Cible tactile : 48 px minimum, sans exception (charte §6). */
.icone-cible {
  min-width: 48px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
}