feat(logo): lockup navbar avec baseline

public/favicon.svg

@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
   <defs>
     <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#06B6D4"/>
+      <stop offset="0%" stop-color="#34D399"/>
-      <stop offset="100%" stop-color="#3B82F6"/>
+      <stop offset="100%" stop-color="#2563EB"/>
     </linearGradient>
   </defs>
   <rect width="32" height="32" rx="7" fill="url(#g)"/>

public/logo.svg

@@ -1,14 +1,17 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 48" role="img" aria-label="IA qu'à">
+<svg viewBox="0 0 500 220" role="img" aria-label="IA qu'à — L'IA pour les PME" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <linearGradient id="iaGrad" x1="0" y1="0" x2="1" y2="1">
+    <linearGradient id="logoAccentGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#06B6D4"/>
+      <stop offset="0%" stop-color="#34D399"/>
-      <stop offset="100%" stop-color="#3B82F6"/>
+      <stop offset="100%" stop-color="#2563EB"/>
     </linearGradient>
   </defs>
-  <text x="0" y="37" font-family="Inter, system-ui, -apple-system, sans-serif" font-size="38" letter-spacing="-0.5">
+  <g transform="translate(250, 110)">
-    <tspan fill="url(#iaGrad)" font-weight="800">IA</tspan>
+    <text x="-5" y="16" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="700" font-size="68" text-anchor="end" letter-spacing="0.01em">
-    <tspan fill="#334155" font-weight="700" dx="6">qu</tspan>
+      <tspan fill="url(#logoAccentGradient)">IA</tspan>
-    <tspan fill="url(#iaGrad)" font-weight="600">&#8217;</tspan>
-    <tspan fill="#334155" font-weight="700">à</tspan>
     </text>
+    <text x="5" y="16" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="300" font-size="66" text-anchor="start" fill="#334155" letter-spacing="-0.01em">
+      <tspan>qu</tspan><tspan fill="url(#logoAccentGradient)" dx="1">&#8217;</tspan><tspan dx="1">à</tspan>
+    </text>
+    <text x="127" y="56" font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif" font-weight="600" font-size="18" text-anchor="end" fill="url(#logoAccentGradient)" letter-spacing="3px" opacity="0.9">L'IA POUR LES PME</text>
+  </g>
 </svg>

src/components/BrandLogo.astro

@@ -1,44 +1,56 @@
 ---
 /**
- * BrandLogo — wordmark "IA qu'à" (color package §1, palette Classic Electric Teal).
+ * BrandLogo — lockup "IA qu'à" + baseline "L'IA POUR LES PME"
- * "IA" + apostrophe en dégradé cyan→bleu, "qu'à" en slate adaptatif (clair/sombre).
+ * (palette Mint & Ocean Blue, color package §1 ; preset "Pure Swiss Typography" de Paul).
- * Double sens assumé : "IA qu'à" ↔ "Y'a qu'à". Rendu en Inter (police du site).
+ * Space Grotesk : "IA" 700 + "qu'à" 300. "IA"/apostrophe/baseline en dégradé mint→ocean,
+ * "qu'à" en slate adaptatif clair/sombre. Double sens assumé : "IA qu'à" ↔ "Y'a qu'à".
  */
 interface Props {
   class?: string;
 }
-const { class: className = "h-7 w-auto" } = Astro.props;
+const { class: className = "h-10 w-auto" } = Astro.props;
-// id unique pour éviter les collisions de gradient si plusieurs instances
 const gid = "iaGrad-" + Math.random().toString(36).slice(2, 8);
 ---
 
 <svg
-  viewBox="0 0 196 48"
+  viewBox="0 0 188 62"
   role="img"
-  aria-label="IA qu'à"
+  aria-label="IA qu'à — L'IA pour les PME"
   class={className}
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>
     <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#06B6D4"></stop>
+      <stop offset="0%" stop-color="#34D399"></stop>
-      <stop offset="100%" stop-color="#3B82F6"></stop>
+      <stop offset="100%" stop-color="#2563EB"></stop>
     </linearGradient>
   </defs>
+
+  <!-- Wordmark -->
   <text
-    x="0"
+    x="2"
-    y="37"
+    y="38"
-    font-family="Inter, system-ui, -apple-system, sans-serif"
+    font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif"
     font-size="38"
-    letter-spacing="-0.5"
+    letter-spacing="-0.01em"
   >
-    <tspan fill={`url(#${gid})`} font-weight="800">IA</tspan>
+    <tspan fill={`url(#${gid})`} font-weight="700">IA</tspan>
-    <tspan
+    <tspan class="fill-slate-700 dark:fill-slate-100" font-weight="300" dx="6"
-      class="fill-slate-700 dark:fill-slate-100"
+      >qu</tspan
-      font-weight="700"
-      dx="6">qu</tspan
     >
-    <tspan fill={`url(#${gid})`} font-weight="600">&#8217;</tspan>
+    <tspan fill={`url(#${gid})`} font-weight="300">&#8217;</tspan>
-    <tspan class="fill-slate-700 dark:fill-slate-100" font-weight="700">à</tspan>
+    <tspan class="fill-slate-700 dark:fill-slate-100" font-weight="300">à</tspan>
   </text>
+
+  <!-- Baseline -->
+  <text
+    x="3"
+    y="55"
+    font-family="'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif"
+    font-size="9.2"
+    font-weight="600"
+    letter-spacing="1.6"
+    fill={`url(#${gid})`}
+    opacity="0.9">L'IA POUR LES PME</text
+  >
 </svg>

src/components/Navbar.astro

@@ -18,7 +18,7 @@ const links = [
 >
   <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
     <a href="/" class="no-underline shrink-0" aria-label="Accueil — IA qu'à">
-      <BrandLogo class="h-7 w-auto" />
+      <BrandLogo class="h-10 w-auto" />
     </a>
 
     <div class="flex items-center gap-6">

src/layouts/BaseLayout.astro

@@ -37,7 +37,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
       })();
     </script>
 
-    <meta name="theme-color" content="#06B6D4" />
+    <meta name="theme-color" content="#2563EB" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="sitemap" href="/sitemap-index.xml" />
 
@@ -64,7 +64,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,800;1,9..144,400&family=Inter:wght@400;500;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,800;1,9..144,400&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@300;500;700&display=swap"
       rel="stylesheet"
     />
   </head>

tailwind.config.mjs

@@ -5,12 +5,13 @@ export default {
   theme: {
     extend: {
       colors: {
-        // ─── Brand "Electric Teal" ───
+        // ─── Brand "Mint & Ocean Blue" (color package §1) ───
+        // NB : noms de tokens conservés ; valeurs = palette Mint & Ocean.
         brand: {
-          cyan: "#06B6D4", // accent primary
+          cyan: "#34D399", // mint — accent primary (accents, bordures, points, dark-text)
-          blue: "#3B82F6", // accent secondary
+          blue: "#2563EB", // ocean blue — accent secondary (fin de dégradé)
-          teal: "#22D3EE", // deep marine highlight
+          teal: "#6EE7B7", // mint clair — code inline sur fond sombre
-          deep: "#0891B2", // deep teal (hover / prestige)
+          deep: "#2563EB", // ocean blue — accent texte en mode clair (lisible sur blanc)
           indigo: "#4F46E5",
         },
         // ─── Canvas (Slate) ───
@@ -35,13 +36,13 @@ export default {
         body: ["Inter", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
       },
       backgroundImage: {
-        // 135° brand gradient (logo ligatures, CTAs, highlights)
+        // 135° brand gradient — Mint → Ocean Blue (logo, CTAs, highlights)
-        "brand-gradient": "linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%)",
+        "brand-gradient": "linear-gradient(135deg, #34D399 0%, #2563EB 100%)",
         "brand-gradient-soft":
-          "linear-gradient(135deg, rgba(6,182,212,0.12) 0%, rgba(59,130,246,0.12) 100%)",
+          "linear-gradient(135deg, rgba(52,211,153,0.12) 0%, rgba(37,99,235,0.12) 100%)",
       },
       boxShadow: {
-        glow: "0 8px 30px -8px rgba(6,182,212,0.35)",
+        glow: "0 8px 30px -8px rgba(52,211,153,0.35)",
       },
     },
   },