feat: use the branded logo in nav/footer, update favicon

Replaces the plain text wordmark with the client-provided logo: a
compact icon+wordmark lockup in the nav, and the full crown/wordmark/
tagline mark (recolored for the dark footer) in the footer. Background
made transparent by color-keying the flat cream backdrop out of the
source artwork.

Claude-Session: https://claude.ai/code/session_01NhxA4npAXAxmCDEJt6kxSH

src/components/Footer.module.css

@@ -24,17 +24,10 @@
   gap: var(--space-xl);
 }
 
-.wordmark {
+.logo {
-  font-family: var(--font-script);
+  width: 100%;
-  font-size: 1.7rem;
+  max-width: 220px;
-  margin: 0 0 0.35rem;
+  height: auto;
-}
-
-.tagline {
-  font-size: 0.75rem;
-  letter-spacing: 1px;
-  color: rgba(247, 243, 236, 0.6);
-  margin: 0;
 }
 
 .columnTitle {

src/components/Footer.tsx

@@ -22,8 +22,7 @@ function Footer() {
     <footer className={styles.footer}>
       <div className={styles.inner}>
         <div className={styles.brand}>
-          <p className={styles.wordmark}>Braids by Mira</p>
+          <img src="/logo-light.png" alt="Braids by Mira — Vos cheveux, votre couronne" className={styles.logo} />
-          <p className={styles.tagline}>Vos cheveux, votre couronne</p>
         </div>
 
         <div className={styles.column}>

src/components/Nav.module.css

@@ -19,6 +19,26 @@
   box-shadow: 0 2px 12px rgba(58, 51, 46, 0.08);
 }
 
+.brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  text-decoration: none;
+  color: var(--color-charcoal);
+}
+
+.brand span {
+  font-family: var(--font-script);
+  font-size: 1.4rem;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.logo {
+  height: 2.25rem;
+  width: auto;
+}
+
 .links {
   display: flex;
   gap: var(--space-lg);

src/components/Nav.tsx

@@ -13,7 +13,10 @@ function Nav() {
 
   return (
     <nav className={`${styles.nav} ${condensed ? styles.condensed : ''}`}>
-      <span>Braids by Mira</span>
+      <Link to="/" className={styles.brand}>
+        <img src="/logo-icon.png" alt="" className={styles.logo} />
+        <span>Braids by Mira</span>
+      </Link>
       <ul className={styles.links}>
         <li><Link to="/">Accueil</Link></li>
         <li><Link to="/shop">Boutique</Link></li>