🎨 Design: Raffine les tokens (hiérarchie de texte, lavis dorés, lueurs)

Suite à l'analyse du vrai CSS d'unabyss.com (root tokens complets) : leur
système est bien plus granulaire que le nôtre (8 niveaux de texte, opacités
pré-mélangées en tokens, vocabulaire de lueur dorée à plusieurs usages).
Emprunt de la STRUCTURE, pas des valeurs :

- --ink-dim / --ink-ghost : deux niveaux de texte supplémentaires pour les
  métadonnées (coordonnées GPS) et le très discret, sans casser les 2
  niveaux existants (--ink / --ink-soft)
- --gold-wash-subtle / --gold-wash : fonds teintés or pré-mélangés,
  remplacent les oklch(...) ad hoc dispersés dans les composants
- --glow-soft / --glow-strong : vocabulaire de lueur distinct d'une ombre
  générique — douce sur le titre du hero et la date du prochain lever,
  forte sur l'onglet actif (Science, Dogon)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/islands/map/ObservationMap.svelte

@@ -30,7 +30,7 @@
       const marker = L.marker([site.lat, site.lon], { icon: markerIcon(false) }).addTo(map);
       const desc = site[`description_${locale}`] ?? site.description_fr;
       marker.bindPopup(
-        `<strong>${site.name}</strong><br>${desc}<br><small>${site.lat}°N, ${site.lon}°O — ${site.alt} m</small>`
+        `<strong>${site.name}</strong><br>${desc}<br><small style="color: var(--ink-dim)">${site.lat}°N, ${site.lon}°O — ${site.alt} m</small>`
       );
       marker.on("popupopen", () => marker.setIcon(markerIcon(true)));
       marker.on("popupclose", () => marker.setIcon(markerIcon(false)));

src/observer.njk

@@ -70,7 +70,7 @@ eleventyComputed:
         <li class="card">
           <h3>{{ site.name }}</h3>
           <p>{{ site["description_" + locale] or site.description_fr }}</p>
-          <p style="font-size: var(--text-0); color: var(--ink-soft)">{{ site.lat }}°N, {{ site.lon }}°O — {{ site.alt }} m</p>
+          <p style="font-size: var(--text-0); color: var(--ink-dim)">{{ site.lat }}°N, {{ site.lon }}°O — {{ site.alt }} m</p>
         </li>
         {% endfor %}
       </ul>

src/styles/components/cards.css

@@ -14,8 +14,8 @@
 }
 
 .card.info-card.essential {
-  box-shadow: 0 0 0 2px var(--gold), var(--shadow-sm);
-  background: light-dark(oklch(96% 0.04 85), oklch(20% 0.035 85));
+  box-shadow: 0 0 0 2px var(--gold), var(--glow-soft), var(--shadow-sm);
+  background: var(--gold-wash);
 }
 
 .info-card-header {

src/styles/components/hero.css

@@ -21,6 +21,7 @@
 
 .hero-title .accent {
   color: var(--gold);
+  text-shadow: var(--glow-soft);
 }
 
 .hero-subtitle {
@@ -46,6 +47,7 @@
   font-family: var(--font-display);
   font-size: var(--text-3);
   color: var(--gold);
+  text-shadow: var(--glow-soft);
 }
 
 .hero-cta {

src/styles/components/tabs.css

@@ -60,6 +60,7 @@
   background: var(--gold-surface);
   border-color: var(--gold-surface);
   color: oklch(20% 0.03 265);
+  box-shadow: var(--glow-strong);
 }
 
 @media (max-width: 47.99em) {

src/styles/tokens.css

@@ -5,8 +5,13 @@
      Deux thèmes conceptuellement liés au sujet : Aube (clair) / Nuit (sombre).
      Le noir de nuit est volontairement presque neutre (chroma minimal) —
      un "premium near-black" plutôt qu'un bleu nuit saturé. */
+  /* Hiérarchie de texte à 4 niveaux (inspirée de la granularité observée
+     chez unabyss.com — text/secondary/tertiary/muted...) : primaire, atténué,
+     discret (métadonnées : coordonnées GPS, légendes), fantôme (à peine là). */
   --ink: light-dark(oklch(23% 0.03 265), oklch(96% 0.01 85));
   --ink-soft: light-dark(oklch(38% 0.03 265), oklch(78% 0.015 85));
+  --ink-dim: light-dark(oklch(52% 0.02 265), oklch(60% 0.015 85));
+  --ink-ghost: light-dark(oklch(68% 0.015 265), oklch(42% 0.015 85));
   --surface: light-dark(oklch(96% 0.015 85), oklch(11% 0.012 265));
   --surface-raised: light-dark(oklch(99% 0.008 85), oklch(15% 0.015 265));
   --surface-sunk: light-dark(oklch(91% 0.02 85), oklch(8% 0.012 265));
@@ -15,6 +20,14 @@
   /* Or de Sirius : variante lisible (texte/liens) + variante décorative (glows) */
   --gold: light-dark(oklch(45% 0.15 75), oklch(82% 0.15 87));
   --gold-surface: oklch(80% 0.16 85);
+  /* Lavis dorés pré-mélangés : fonds/bordures teintés sans color-mix() ad hoc
+     dispersé dans chaque fichier — deux intensités suffisent à nos usages. */
+  --gold-wash-subtle: light-dark(oklch(94% 0.025 85), oklch(24% 0.03 85));
+  --gold-wash: light-dark(oklch(90% 0.05 85), oklch(28% 0.05 85));
+  /* Vocabulaire de lueur, distinct d'une ombre générique : douce pour un
+     texte/accent au repos, forte pour un état actif/sélectionné. */
+  --glow-soft: 0 0 20px light-dark(oklch(80% 0.15 87 / 20%), oklch(82% 0.15 87 / 30%));
+  --glow-strong: 0 0 30px light-dark(oklch(80% 0.15 87 / 35%), oklch(82% 0.15 87 / 55%));
   /* Corail (héritage Caraïbe du v1 du projet) : accent secondaire chaud,
      à côté de l'or plutôt qu'à sa place — inspiré du ton "burnt orange"
      d'unabyss.com. */