update performance from lighthouse

package.json

@@ -31,6 +31,7 @@
     "concurrently": "^9.0.0",
     "dotenv": "^17.3.1",
     "fastify": "^5.3.2",
+    "gsap": "^3.14.2",
     "stripe": "^20.3.1",
     "tslib": "^2.8.1"
   },

pnpm-lock.yaml

@@ -63,6 +63,9 @@ importers:
       fastify:
         specifier: ^5.3.2
         version: 5.8.2
+      gsap:
+        specifier: ^3.14.2
+        version: 3.14.2
       stripe:
         specifier: ^20.3.1
         version: 20.4.1(@types/node@25.4.0)
@@ -2549,6 +2552,9 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
+  gsap@3.14.2:
+    resolution: {integrity: sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==}
+
   gud@1.0.0:
     resolution: {integrity: sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==}
 
@@ -6872,6 +6878,8 @@ snapshots:
 
   gopd@1.2.0: {}
 
+  gsap@3.14.2: {}
+
   gud@1.0.0: {}
 
   h3@1.15.6:

public/style.css

@@ -143,11 +143,11 @@ body {
     text-decoration: none;
 }
 .header-nav a:hover { text-decoration: underline; }
-.wip-tag { color: #999; font-size: 0.78rem; }
+.wip-tag { color: #555; font-size: 0.78rem; }
 
 /* ---- UTILS ---- */
-.label { font-size: 0.75rem; color: #888; letter-spacing: 0.04em; }
+.label { font-size: 0.75rem; color: #555; letter-spacing: 0.04em; }
-.mono-sm { font-size: 0.75rem; line-height: 1.9; color: #777; }
+.mono-sm { font-size: 0.75rem; line-height: 1.9; color: #555; }
 .red { color: var(--clr-red); font-weight: 700; }
 .blink { animation: blink 1.4s step-end infinite; color: var(--clr-red); }
 @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@@ -242,6 +242,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
 }
 /* Image : objet centré sur fond neutre, comme Gufram */
 .card-img-wrap {
+    position: relative;
     aspect-ratio: 1 / 1;
     overflow: hidden;
     display: flex;
@@ -276,7 +277,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
 }
 .card-index {
     font-size: 0.72rem;
-    color: #999;
+    color: #555;
     flex-shrink: 0;
 }
 .card-name {
@@ -361,7 +362,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
 
 .panel-index {
     font-size: 0.72rem;
-    color: #999;
+    color: #555;
     letter-spacing: 0.05em;
 }
 
@@ -387,7 +388,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
     align-items: baseline;
 }
 .meta-key {
-    color: #888;
+    color: #555;
     width: 7rem;
     flex-shrink: 0;
     font-size: 0.72rem;
@@ -424,14 +425,14 @@ hr { border: none; border-top: var(--border); margin: 0; }
 .accordion-body {
     font-size: 0.78rem;
     line-height: 2;
-    color: #444;
+    color: #333;
     padding-bottom: 1rem;
     white-space: pre-line;
 }
 
 .panel-footer {
     font-size: 0.75rem;
-    color: #888;
+    color: #555;
     padding-top: 0.5rem;
 }
 
@@ -449,7 +450,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
 }
 .checkout-edition {
     font-size: 0.72rem;
-    color: #888;
+    color: #555;
 }
 
 /* Bouton jaune parking rectangulaire — aucun border-radius */
@@ -495,7 +496,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
 .checkout-form-field label {
     font-size: 0.68rem;
     font-weight: 700;
-    color: #888;
+    color: #555;
     letter-spacing: 0.05em;
 }
 .checkout-form-field input {
@@ -515,7 +516,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
     padding: 0.9rem 1.1rem;
     font-size: 0.72rem;
     line-height: 1.8;
-    color: #777;
+    color: #555;
     border-bottom: var(--border);
 }
 .checkout-submit {
@@ -821,7 +822,7 @@ hr { border: none; border-top: var(--border); margin: 0; }
     border: 1px solid rgba(0,0,0,0.18);
     font-family: var(--font-mono);
     font-size: 0.65rem;
-    color: #999;
+    color: #555;
     padding: 0.2rem 0.55rem;
     cursor: none;
     transition: color 0.2s, border-color 0.2s;

src/layouts/Base.astro

@@ -57,12 +57,9 @@ const {
     <slot name="head" />
 
     <link rel="stylesheet" href="/style.css">
-
-    <!-- GSAP + ScrollTrigger (is:inline = pas de processing Vite/module) -->
-    <script is:inline src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
-    <script is:inline src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
 </head>
 <body>
     <slot />
+    <script>import '../scripts/main.js';</script>
 </body>
 </html>

src/pages/collection/[slug].astro

@@ -263,6 +263,4 @@ const schemaBreadcrumb = {
 
     <div class="cursor-dot"></div>
     <div class="cursor-outline"></div>
-
-    <script src="/main.js" is:inline></script>
 </Base>

src/pages/index.astro

@@ -230,6 +230,4 @@ const schemaOrg = {
 
     <div class="cursor-dot"></div>
     <div class="cursor-outline"></div>
-
-    <script src="/main.js" is:inline></script>
 </Base>

src/scripts/main.js

@@ -3,14 +3,17 @@
  * CAD/CAO-inspired interface · GSAP ScrollTrigger · Technical drawing overlays · Ambient sound
  */
 
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
 document.addEventListener('DOMContentLoaded', () => {
 
     // ---- CONFIG ----
     const isMobile = window.innerWidth <= 600;
     const isTouch = 'ontouchstart' in window;
 
-    gsap.registerPlugin(ScrollTrigger);
-
     // ---- HEADER HEIGHT → CSS VAR ----
     const setHeaderHeight = () => {
         const h = document.querySelector('.header')?.offsetHeight || 44;
@@ -146,7 +149,6 @@ document.addEventListener('DOMContentLoaded', () => {
     // ---- Collection header: construction line draw-in ----
     const collectionHeader = document.querySelector('.collection-header');
     if (collectionHeader) {
-        // Add a construction line element
         const line = document.createElement('div');
         line.className = 'cad-construction-line';
         collectionHeader.appendChild(line);
@@ -176,7 +178,6 @@ document.addEventListener('DOMContentLoaded', () => {
         // Create a CAD scan line per card
         const scanLine = document.createElement('div');
         scanLine.className = 'card-scanline';
-        imgWrap.style.position = 'relative';
         imgWrap.appendChild(scanLine);
 
         // Create corner marks per card