site v11 — Hero SVG côtier (poissons, bulles, wifi, algues) + suppression strong/bold

src/components/Ambition.astro

@@ -17,7 +17,7 @@
       </h2>
       <p class="lead mt-6">
         Rendre accessibles des données multi-paramètres, géolocalisées et horodatées,
-        sur des <strong class="text-foam-50">zones entières</strong> plutôt que des points
+        sur des zones entières plutôt que des points
         isolés. À terme, sur l'ensemble des zones côtières et fluviales de France, voire
         d'Europe.
       </p>
@@ -39,8 +39,8 @@
           Les politiques publiques de préservation, la conformité réglementaire et la
           recherche ont toutes le même angle mort : la plupart des données disponibles
           sont <em>ponctuelles</em> : quelques stations de référence, des campagnes
-          dispersées. NowYouSea vise la <strong class="text-foam-50">couverture
+          dispersées. NowYouSea vise la couverture
-          continue</strong> de zones entières, pas seulement la mesure ponctuelle.
+          continue de zones entières, pas seulement la mesure ponctuelle.
         </p>
       </div>
 
@@ -57,10 +57,10 @@
         <p class="mt-4 text-sm leading-relaxed text-foam-100/80">
           La solution s'appuie sur des systèmes embarqués légers, à très faible
           consommation et autonomes en énergie. Cela permet de s'affranchir de toute
-          contrainte de raccordement, de <strong class="text-foam-50">déployer
+          contrainte de raccordement, de déployer
-          rapidement</strong> sur n'importe quelle zone, et de maintenir un coût
+          rapidement sur n'importe quelle zone, et de maintenir un coût
           unitaire suffisamment bas pour rendre la couverture à grande échelle
-          <strong class="text-foam-50">réaliste</strong>.
+          réaliste.
         </p>
       </div>
     </div>

src/components/Configurateur.astro

@@ -28,7 +28,7 @@ const cats = Array.from(new Set(sensors.map((s) => s.cat)));
         Chaque site a ses enjeux. Cochez les grandeurs que vous voulez mesurer, ajustez
         l'énergie et l'ancrage, et envoyez-nous votre configuration. Nous revenons vers
         vous avec une proposition adaptée. Chaque rocher déployé rejoint automatiquement
-        le réseau <strong class="text-foam-50">mesher</strong> NowYouSea, qui couvre le
+        le réseau mesher NowYouSea, qui couvre le
         littoral au fur et à mesure.
       </p>
     </div>

src/components/Hero.astro

@@ -148,23 +148,83 @@
               <circle cx="250" cy="90" r="3" fill="#38bdf8"/>
             </g>
 
+            <!-- Wifi / transmission arcs above antenna -->
+            <g stroke="#38bdf8" fill="none" stroke-linecap="round" opacity="0.7">
+              <path d="M242 84 q 8 -10 16 0" stroke-width="1.4"/>
+              <path d="M237 77 q 13 -17 26 0" stroke-width="1.1" opacity="0.55"/>
+              <path d="M232 70 q 18 -22 36 0" stroke-width="0.9" opacity="0.3"/>
+            </g>
+
+            <!-- Data packet dots traveling up from antenna -->
+            <circle cx="250" cy="74" r="2" fill="#06b6d4" opacity="0.6" class="nys-data-dot" style="animation: nys-float 2.8s ease-in-out infinite; animation-delay: 0s;"/>
+            <circle cx="252" cy="62" r="1.5" fill="#38bdf8" opacity="0.45" style="animation: nys-float 2.8s ease-in-out infinite; animation-delay: 0.9s;"/>
+
             <!-- Waterline -->
             <path d="M20 160 Q 100 145 200 160 T 380 160" stroke="url(#waterline)" stroke-width="1.3" fill="none" opacity="0.9"/>
             <path d="M20 170 Q 110 158 210 172 T 380 170" stroke="#0ea5e9" stroke-width="0.8" fill="none" opacity="0.4"/>
 
-            <!-- Sound ripples coming from rock -->
+            <!-- Sound ripples from hydrophone -->
             <g stroke="#38bdf8" fill="none" opacity="0.55">
               <circle cx="215" cy="225" r="46" stroke-dasharray="2 3"/>
               <circle cx="215" cy="225" r="70" stroke-dasharray="2 5" opacity="0.35"/>
+              <circle cx="215" cy="225" r="95" stroke-dasharray="1.5 6" opacity="0.18"/>
             </g>
 
+            <!-- Fish 1 — petit, gauche, profondeur moyenne -->
+            <g transform="translate(118 268)" fill="#1a3f5c" opacity="0.65" style="animation: nys-swim 6s ease-in-out infinite;">
+              <ellipse rx="14" ry="5.5"/>
+              <path d="M-14 0 l-9 -5 l1 10 z"/>
+              <ellipse cx="7" cy="-1.5" rx="2" ry="1.5" fill="#0a1a2f"/>
+              <circle cx="8" cy="-1.5" r="0.8" fill="#38bdf8" opacity="0.7"/>
+            </g>
+
+            <!-- Fish 2 — plus petit, droite, plus profond -->
+            <g transform="translate(308 295) scale(-1 1)" fill="#143558" opacity="0.55" style="animation: nys-swim 8s ease-in-out infinite; animation-delay: 2s;">
+              <ellipse rx="11" ry="4.5"/>
+              <path d="M-11 0 l-7 -4 l0.5 8 z"/>
+              <circle cx="6" cy="-1" r="0.7" fill="#38bdf8" opacity="0.6"/>
+            </g>
+
+            <!-- Fish 3 — minuscule, fond -->
+            <g transform="translate(175 335)" fill="#0f2742" opacity="0.5" style="animation: nys-swim 7s ease-in-out infinite; animation-delay: 3.5s;">
+              <ellipse rx="8" ry="3.2"/>
+              <path d="M-8 0 l-5 -3 l0.5 6 z"/>
+            </g>
+
+            <!-- Bulles de qualité d'eau montant du fond -->
+            <circle cx="140" cy="310" r="2.5" fill="none" stroke="#0ea5e9" stroke-width="0.8" opacity="0.4" style="animation: nys-bubble 4s ease-in infinite; animation-delay: 0.5s;"/>
+            <circle cx="280" cy="320" r="2" fill="none" stroke="#38bdf8" stroke-width="0.7" opacity="0.3" style="animation: nys-bubble 5s ease-in infinite; animation-delay: 1.8s;"/>
+            <circle cx="160" cy="340" r="1.5" fill="none" stroke="#0ea5e9" stroke-width="0.6" opacity="0.25" style="animation: nys-bubble 3.5s ease-in infinite; animation-delay: 3s;"/>
+
             <!-- Seabed hints -->
             <g fill="#0a1a2f" opacity="0.9">
               <ellipse cx="120" cy="348" rx="30" ry="6"/>
               <ellipse cx="220" cy="360" rx="70" ry="7"/>
               <ellipse cx="320" cy="352" rx="35" ry="5"/>
             </g>
+
+            <!-- Algue simple sur le fond -->
+            <path d="M340 348 q 4 -12 0 -22 q 5 -10 2 -20" stroke="#1a4570" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.5"/>
+            <path d="M95 348 q -3 -10 1 -18 q -4 -8 0 -16" stroke="#143558" stroke-width="1.2" fill="none" stroke-linecap="round" opacity="0.4"/>
           </svg>
+
+          <style>
+            @keyframes nys-swim {
+              0%, 100% { transform: translateX(0) translateY(0); }
+              40%       { transform: translateX(6px) translateY(-3px); }
+              70%       { transform: translateX(-4px) translateY(2px); }
+            }
+            @keyframes nys-float {
+              0%   { opacity: 0.6; transform: translateY(0); }
+              50%  { opacity: 0.2; transform: translateY(-12px); }
+              100% { opacity: 0; transform: translateY(-22px); }
+            }
+            @keyframes nys-bubble {
+              0%   { opacity: 0.4; transform: translateY(0) scale(1); }
+              80%  { opacity: 0.1; transform: translateY(-60px) scale(1.4); }
+              100% { opacity: 0; transform: translateY(-70px) scale(1.5); }
+            }
+          </style>
         </div>
       </div>
     </div>