🎨 Design: Direction visuelle inspirée d'unabyss.com

Refonte de la direction artistique en gardant Fraunces (serif) comme
signature éditoriale, mais en empruntant à unabyss.com : fond de nuit
presque neutre ("premium near-black" plutôt que bleu nuit saturé), accent
corail/orange brûlé en complément de l'or de Sirius, typographie plus
confiante (échelle et tracking resserrés sur les grands titres), rythme
d'espacement plus généreux entre sections.

Déboîte le contenu purement éditorial (cartes de fonctionnalités, cartes
de culture, conseils d'observation) qui n'a plus de bordure/fond — plus
fluide, plus proche de la sobriété d'unabyss. Les regroupements réellement
fonctionnels (calculateur, équipement, onglets, formules) gardent .card.

Ajoute une vitrine de badges (13 villes de la vague planétaire) sur la
page d'accueil — écho panafricain à la grille d'intégrations colorée
d'unabyss, sans rien copier de son contenu. Les données de villes sont
déplacées vers src/_data/waveCities.js (source unique pour les pages 11ty
et pour l'îlot SiriusGlobe).

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

src/_data/waveCities.js

@@ -0,0 +1,19 @@
+// Progression du lever héliaque à travers la diaspora africaine et caribéenne
+// (fin juin à mi-août), du plus oriental au plus occidental. Source unique,
+// consommée à la fois par les pages 11ty (aperçu statique) et par l'îlot
+// SiriusGlobe (carte Leaflet interactive) — voir src/islands/globe/world.js.
+export default [
+  { name: "La Réunion", lat: -21.1151, lon: 55.5364, date: "27 juin" },
+  { name: "Kinshasa", lat: -4.4419, lon: 15.2663, date: "16 juillet" },
+  { name: "Douala", lat: 4.0511, lon: 9.7679, date: "18 juillet" },
+  { name: "Yaoundé", lat: 3.848, lon: 11.5021, date: "19 juillet" },
+  { name: "Abidjan", lat: 5.36, lon: -4.0083, date: "20 juillet" },
+  { name: "Accra", lat: 5.6037, lon: -0.187, date: "21 juillet" },
+  { name: "Guadeloupe", lat: 16.265, lon: -61.551, date: "22 juillet" },
+  { name: "Martinique", lat: 14.6415, lon: -61.0242, date: "23 juillet" },
+  { name: "Dakar", lat: 14.7167, lon: -17.4677, date: "23 juillet" },
+  { name: "Cayenne", lat: 4.9346, lon: -52.3281, date: "24 juillet" },
+  { name: "Bamako", lat: 12.6392, lon: -8.0029, date: "25 juillet" },
+  { name: "Le Caire", lat: 30.0444, lon: 31.2357, date: "3 août" },
+  { name: "Paris", lat: 48.8566, lon: 2.3522, date: "15 août" },
+];

src/culture-savoirs.njk

@@ -20,17 +20,17 @@ eleventyComputed:
     </div>
 
     <div class="grid-auto">
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">🏺</div>
         <h3>{{ "culture_egypt_title" | t(locale) }}</h3>
         <p>{{ "culture_egypt_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">🌍</div>
         <h3>{{ "culture_dogon_title" | t(locale) }}</h3>
         <p>{{ "culture_dogon_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">⛵</div>
         <h3>{{ "culture_caribbean_title" | t(locale) }}</h3>
         <p>{{ "culture_caribbean_desc" | t(locale) }}</p>
@@ -98,15 +98,15 @@ eleventyComputed:
 
         <div class="tab-panel">
           <div class="grid-auto">
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_system_sigutolo_title" | t(locale) }}</h3>
               <p>{{ "dogon_system_sigutolo_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_system_potolo_title" | t(locale) }}</h3>
               <p>{{ "dogon_system_potolo_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_system_emmeya_title" | t(locale) }}</h3>
               <p>{{ "dogon_system_emmeya_desc" | t(locale) }}</p>
             </div>
@@ -136,19 +136,19 @@ eleventyComputed:
 
         <div class="tab-panel">
           <div class="grid-auto">
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_astronomy_geometry_title" | t(locale) }}</h3>
               <p>{{ "dogon_astronomy_geometry_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_astronomy_calendar_title" | t(locale) }}</h3>
               <p>{{ "dogon_astronomy_calendar_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_astronomy_planets_title" | t(locale) }}</h3>
               <p>{{ "dogon_astronomy_planets_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "dogon_astronomy_universe_title" | t(locale) }}</h3>
               <p>{{ "dogon_astronomy_universe_desc" | t(locale) }}</p>
             </div>

src/index.njk

@@ -54,18 +54,40 @@ eleventyComputed:
     </div>
 
     <div class="grid-auto" style="margin-top: var(--space-6)">
-      <div class="card feature-card">
+      <div class="feature-card">
         <h3>{{ "feature_brightest_title" | t(locale) }}</h3>
         <p>{{ "feature_brightest_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <h3>{{ "feature_rising_title" | t(locale) }}</h3>
         <p>{{ "feature_rising_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <h3>{{ "feature_heritage_title" | t(locale) }}</h3>
         <p>{{ "feature_heritage_desc" | t(locale) }}</p>
       </div>
     </div>
   </div>
 </section>
+
+<section class="section" style="background: var(--surface-sunk)">
+  <div class="container">
+    <div class="section-header center">
+      <h2>{{ "wave_showcase_title" | t(locale) }}</h2>
+      <p class="section-subtitle">{{ "wave_showcase_subtitle" | t(locale) }}</p>
+    </div>
+
+    <ul class="wave-badges">
+      {% for city in waveCities %}
+      <li class="wave-badge wave-badge-{{ loop.index0 % 3 }}">
+        <span class="wave-badge-name">{{ city.name }}</span>
+        <span class="wave-badge-date">{{ city.date }}</span>
+      </li>
+      {% endfor %}
+    </ul>
+
+    <p class="center" style="margin-top: var(--space-5)">
+      <a class="btn btn-outline" href="{{ '/observer/' | localeHref(locale) }}">{{ "wave_showcase_cta" | t(locale) }}</a>
+    </p>
+  </div>
+</section>

src/islands/globe/world.js

@@ -1,17 +1 @@
-// Progression du lever héliaque à travers la diaspora africaine et caribéenne
-// (fin juin à mi-août), du plus oriental au plus occidental.
-export const waveCities = [
-  { name: "La Réunion", lat: -21.1151, lon: 55.5364, date: "27 juin" },
-  { name: "Kinshasa", lat: -4.4419, lon: 15.2663, date: "16 juillet" },
-  { name: "Douala", lat: 4.0511, lon: 9.7679, date: "18 juillet" },
-  { name: "Yaoundé", lat: 3.848, lon: 11.5021, date: "19 juillet" },
-  { name: "Abidjan", lat: 5.36, lon: -4.0083, date: "20 juillet" },
-  { name: "Accra", lat: 5.6037, lon: -0.187, date: "21 juillet" },
-  { name: "Guadeloupe", lat: 16.265, lon: -61.551, date: "22 juillet" },
-  { name: "Martinique", lat: 14.6415, lon: -61.0242, date: "23 juillet" },
-  { name: "Dakar", lat: 14.7167, lon: -17.4677, date: "23 juillet" },
-  { name: "Cayenne", lat: 4.9346, lon: -52.3281, date: "24 juillet" },
-  { name: "Bamako", lat: 12.6392, lon: -8.0029, date: "25 juillet" },
-  { name: "Le Caire", lat: 30.0444, lon: 31.2357, date: "3 août" },
-  { name: "Paris", lat: 48.8566, lon: 2.3522, date: "15 août" },
-];
+export { default as waveCities } from "../../_data/waveCities.js";

src/observer.njk

@@ -139,22 +139,22 @@ eleventyComputed:
 
     <h2 class="center" style="margin-top: var(--space-7)">{{ "observer_tips_title" | t(locale) }}</h2>
     <div class="grid-auto" style="margin-top: var(--space-4)">
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">🌤️</div>
         <h3>{{ "observer_tip_weather_title" | t(locale) }}</h3>
         <p>{{ "observer_tip_weather_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">🌑</div>
         <h3>{{ "observer_tip_moon_title" | t(locale) }}</h3>
         <p>{{ "observer_tip_moon_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">📱</div>
         <h3>{{ "observer_tip_apps_title" | t(locale) }}</h3>
         <p>{{ "observer_tip_apps_desc" | t(locale) }}</p>
       </div>
-      <div class="card feature-card">
+      <div class="feature-card">
         <div style="font-size: var(--text-4)" aria-hidden="true">👥</div>
         <h3>{{ "observer_tip_group_title" | t(locale) }}</h3>
         <p>{{ "observer_tip_group_desc" | t(locale) }}</p>

src/sirius-science.njk

@@ -62,15 +62,15 @@ eleventyComputed:
 
         <div class="tab-panel">
           <div class="grid-auto">
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "science_factor_magnitude_title" | t(locale) }}</h3>
               <p>{{ "science_factor_magnitude_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "science_factor_latitude_title" | t(locale) }}</h3>
               <p>{{ "science_factor_latitude_desc" | t(locale) }}</p>
             </div>
-            <div class="card info-card">
+            <div class="info-card">
               <h3>{{ "science_factor_atmosphere_title" | t(locale) }}</h3>
               <p>{{ "science_factor_atmosphere_desc" | t(locale) }}</p>
             </div>

src/styles/app.css

@@ -16,3 +16,4 @@
 @import "./components/diagrams.css" layer(components);
 @import "./components/associations.css" layer(components);
 @import "./components/islands.css" layer(components);
+@import "./components/wave-badges.css" layer(components);

src/styles/base.css

@@ -37,13 +37,14 @@ body {
 h1, h2, h3, h4 {
   font-family: var(--font-display);
   line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
   text-wrap: balance;
 }
 
 h1 { font-size: var(--text-6); }
 h2 { font-size: var(--text-5); }
-h3 { font-size: var(--text-3); }
-h4 { font-size: var(--text-2); }
+h3 { font-size: var(--text-3); letter-spacing: -0.01em; }
+h4 { font-size: var(--text-2); letter-spacing: 0; }
 
 p {
   text-wrap: pretty;

src/styles/components/buttons.css

@@ -3,16 +3,23 @@
   align-items: center;
   justify-content: center;
   min-height: var(--tap-target);
-  padding-inline: var(--space-4);
+  padding-inline: var(--space-5);
   border-radius: var(--radius-pill);
   font-weight: 700;
   text-decoration: none;
+  box-shadow: var(--shadow-sm);
   transition: transform var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out),
     background var(--duration-fast) var(--ease-out);
 }
 
 .btn:hover {
   transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn:active {
+  transform: translateY(0);
 }
 
 .btn-primary {
@@ -20,8 +27,19 @@
   color: oklch(20% 0.03 265);
 }
 
+.btn-primary:hover {
+  background: var(--coral-surface);
+}
+
 .btn-outline {
   background: transparent;
   border: 2px solid var(--gold);
   color: var(--gold);
+  box-shadow: none;
+}
+
+.btn-outline:hover {
+  border-color: var(--coral);
+  color: var(--coral);
+  box-shadow: none;
 }

src/styles/components/cards.css

@@ -1,6 +1,10 @@
+/* Contenu éditorial : icône + titre + texte, fluide (pas de boîte) sauf
+   quand .card est explicitement combiné (regroupements fonctionnels comme
+   l'équipement d'observation). */
 .feature-card,
 .info-card {
   text-align: center;
+  padding-block: var(--space-2);
 }
 
 .feature-card h3,
@@ -9,9 +13,9 @@
   margin-bottom: var(--space-2);
 }
 
-.info-card.essential {
-  border-color: var(--gold);
-  background: light-dark(oklch(96% 0.04 85), oklch(24% 0.04 85));
+.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));
 }
 
 .info-card-header {

src/styles/components/hero.css

@@ -1,10 +1,10 @@
 .hero {
   position: relative;
   overflow: hidden;
-  padding-block: var(--space-7) var(--space-6);
+  padding-block: var(--space-8) var(--space-7);
   background: light-dark(
     linear-gradient(180deg, oklch(96% 0.02 85), oklch(92% 0.03 60)),
-    linear-gradient(180deg, oklch(14% 0.03 265), oklch(10% 0.02 265))
+    linear-gradient(180deg, oklch(9% 0.015 265), oklch(6% 0.01 265))
   );
 }
 

src/styles/components/wave-badges.css

@@ -0,0 +1,32 @@
+/* Vitrine dense de badges — écho panafricain à une grille d'intégrations :
+   sobre en soi (fond neutre), colorée par petites touches. */
+.wave-badges {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--space-2);
+  margin-top: var(--space-6);
+  list-style: none;
+}
+
+.wave-badge {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-pill);
+  background: var(--surface-raised);
+  font-size: var(--text-0);
+}
+
+.wave-badge-name {
+  font-weight: 700;
+}
+
+.wave-badge-date {
+  color: var(--ink-soft);
+}
+
+.wave-badge-0 .wave-badge-name { color: var(--gold); }
+.wave-badge-1 .wave-badge-name { color: var(--coral); }
+.wave-badge-2 .wave-badge-name { color: var(--caribbean-teal); }

src/styles/layouts.css

@@ -53,7 +53,7 @@
 }
 
 .section {
-  padding-block: var(--space-7);
+  padding-block: var(--space-8);
   container-type: inline-size;
 }
 
@@ -61,6 +61,12 @@
   margin-bottom: var(--space-6);
 }
 
+.hairline {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 0;
+}
+
 .section-eyebrow {
   display: inline-block;
   font-family: var(--font-body);
@@ -78,9 +84,11 @@
   margin-top: var(--space-2);
 }
 
+/* Réservé aux regroupements fonctionnels (calculateur, carte, onglets,
+   équipement) — le contenu purement éditorial reste fluide, sans boîte. */
 .card {
   background: var(--surface-raised);
-  border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: var(--space-4);
+  box-shadow: var(--shadow-sm);
 }

src/styles/tokens.css

@@ -2,17 +2,24 @@
   color-scheme: light dark;
 
   /* === Couleur — oklch, contraste d'abord (méthode modus-vivendi) ===
-     Deux thèmes conceptuellement liés au sujet : Aube (clair) / Nuit (sombre). */
-  --ink: light-dark(oklch(23% 0.03 265), oklch(95% 0.015 85));
-  --ink-soft: light-dark(oklch(38% 0.03 265), oklch(80% 0.02 85));
-  --surface: light-dark(oklch(96% 0.015 85), oklch(16% 0.03 265));
-  --surface-raised: light-dark(oklch(99% 0.008 85), oklch(21% 0.03 265));
-  --surface-sunk: light-dark(oklch(91% 0.02 85), oklch(12% 0.025 265));
-  --border: light-dark(oklch(85% 0.02 85), oklch(32% 0.035 265));
+     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é. */
+  --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));
+  --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));
+  --border: light-dark(oklch(85% 0.02 85), oklch(26% 0.02 265));
 
   /* 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);
+  /* 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. */
+  --coral: light-dark(oklch(50% 0.17 45), oklch(72% 0.17 45));
+  --coral-surface: oklch(70% 0.18 45);
   --kente-red: light-dark(oklch(46% 0.18 25), oklch(70% 0.19 25));
   --bogolan-green: light-dark(oklch(40% 0.09 145), oklch(68% 0.12 145));
   --caribbean-teal: light-dark(oklch(43% 0.09 195), oklch(74% 0.11 195));
@@ -27,22 +34,24 @@
   --text-1: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
   --text-2: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
   --text-3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
-  --text-4: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
-  --text-5: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);
-  --text-6: clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem);
+  --text-4: clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem);
+  --text-5: clamp(2.5rem, 1.8rem + 3vw, 4rem);
+  --text-6: clamp(3rem, 1.9rem + 5.5vw, 6.5rem);
 
-  --leading-tight: 1.15;
-  --leading-normal: 1.6;
+  --tracking-tight: -0.02em;
+  --leading-tight: 1.1;
+  --leading-normal: 1.65;
   --measure: 65ch;
 
-  /* === Espacement (échelle modulaire) === */
+  /* === Espacement (échelle modulaire) — rythme généreux === */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 1rem;
   --space-4: 1.5rem;
   --space-5: 2.5rem;
   --space-6: 4rem;
-  --space-7: 6rem;
+  --space-7: 7rem;
+  --space-8: 9rem;
 
   /* === Formes, ombres, mouvement === */
   --radius-sm: 0.5rem;
@@ -50,8 +59,8 @@
   --radius-lg: 1.5rem;
   --radius-pill: 999px;
 
-  --shadow-sm: 0 1px 3px light-dark(oklch(23% 0.03 265 / 12%), oklch(0% 0 0 / 30%));
-  --shadow-md: 0 8px 30px light-dark(oklch(23% 0.03 265 / 12%), oklch(0% 0 0 / 45%));
+  --shadow-sm: 0 1px 3px light-dark(oklch(23% 0.03 265 / 12%), oklch(0% 0 0 / 35%));
+  --shadow-md: 0 12px 40px light-dark(oklch(23% 0.03 265 / 14%), oklch(0% 0 0 / 55%));
 
   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --duration-fast: 200ms;