<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perles & Vibes | Créations Artisanal Pop & Fun en Suisse 🇨🇭</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <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=Fredoka:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        popPink: '#FF6B81',
                        popLilac: '#A78BFA',
                        popMint: '#34D399',
                        popYellow: '#FBBF24',
                        popDark: '#1F1926',
                        popBg: '#FFFDF9'
                    },
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                        display: ['"Fredoka"', 'cursive'],
                    },
                    animation: {
                        'float': 'float 4s ease-in-out infinite',
                        'float-delayed': 'float 4s ease-in-out 2s infinite',
                        'bounce-slow': 'bounce 3s infinite',
                        'spin-slow': 'spin 12s linear infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0px) rotate(0deg)' },
                            '50%': { transform: 'translateY(-12px) rotate(5deg)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .pop-card {
            background: #ffffff;
            border: 2px solid #1F1926;
            box-shadow: 5px 5px 0px #1F1926;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .pop-card:hover {
            transform: translate(-3px, -3px);
            box-shadow: 8px 8px 0px #1F1926;
        }
        .pop-btn {
            border: 2px solid #1F1926;
            box-shadow: 3px 3px 0px #1F1926;
            transition: all 0.15s ease;
        }
        .pop-btn:hover {
            transform: translate(-2px, -2px);
            box-shadow: 5px 5px 0px #1F1926;
        }
        .pop-btn:active {
            transform: translate(1px, 1px);
            box-shadow: 1px 1px 0px #1F1926;
        }
        .bg-dots {
            background-image: radial-gradient(#1f1926 0.75px, transparent 0.75px);
            background-size: 16px 16px;
            opacity: 0.08;
        }
    </style>
</head>
<body class="bg-popBg text-popDark font-sans antialiased selection:bg-popYellow selection:text-popDark">

    <header class="fixed top-3 left-0 right-0 z-50 px-4 sm:px-8">
        <div class="max-w-5xl mx-auto bg-white/90 backdrop-blur-md border-2 border-popDark rounded-full px-4 py-2.5 flex items-center justify-between shadow-[4px_4px_0px_#1F1926]">
            
            <!-- Logo -->
            <a href="#" class="flex items-center gap-2.5 font-display font-bold text-lg sm:text-xl tracking-wide group">
                <div class="w-9 h-9 rounded-full bg-popPink flex items-center justify-center text-white border border-popDark group-hover:rotate-12 transition-transform">
                    ✨
                </div>
                <span>Perles & Vibes <span class="text-xs bg-popYellow text-popDark px-2 py-0.5 rounded-full border border-popDark font-sans font-bold">🇨🇭 CH</span></span>
            </a>

            <!-- Quick Nav Badges -->
            <nav class="hidden md:flex items-center gap-4 text-xs font-bold uppercase tracking-wider">
                <a href="#univers" class="hover:text-popPink transition-colors">Les Univers</a>
                <a href="#studio" class="hover:text-popPink transition-colors">Studio Perso 🎨</a>
                <a href="#marches" class="hover:text-popPink transition-colors">Radar Marchés 📍</a>
            </nav>

            <!-- CTA -->
            <a href="#marches" class="pop-btn bg-popYellow text-popDark px-4 py-1.5 rounded-full text-xs font-bold uppercase flex items-center gap-1.5">
                <span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
                <span>Où nous trouver ?</span>
            </a>
        </div>
    </header>

    <section class="relative min-h-[90vh] pt-28 pb-12 flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 bg-dots pointer-events-none"></div>

        <!-- Floating bead decorations -->
        <div class="absolute top-24 left-6 sm:left-20 w-12 h-12 rounded-full bg-popLilac border-2 border-popDark flex items-center justify-center text-xl shadow-[3px_3px_0px_#1F1926] animate-float pointer-events-none">✏️</div>
        <div class="absolute bottom-16 right-6 sm:right-24 w-14 h-14 rounded-full bg-popPink border-2 border-popDark flex items-center justify-center text-2xl shadow-[3px_3px_0px_#1F1926] animate-float-delayed pointer-events-none">📱</div>
        <div class="absolute top-1/3 right-10 w-10 h-10 rounded-full bg-popMint border-2 border-popDark flex items-center justify-center text-lg shadow-[3px_3px_0px_#1F1926] animate-bounce-slow pointer-events-none">💎</div>

        <div class="max-w-4xl mx-auto px-4 text-center relative z-10 space-y-6">
            
            <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-popMint/30 border-2 border-popDark text-xs font-extrabold uppercase tracking-wider">
                <span class="text-sm">⚡</span> L'Atelier Perlé le plus Pop de Suisse
            </div>

            <h1 class="font-display text-4xl sm:text-6xl lg:text-7xl font-bold leading-none tracking-tight">
                Des Perles, du Style & <br>
                <span class="text-popPink underline decoration-popYellow decoration-wavy decoration-2">100% de Bonne Humeur !</span>
            </h1>

            <p class="text-base sm:text-lg text-gray-700 max-w-2xl mx-auto font-medium leading-relaxed">
                Des stylos perlés rechargeables, bijoux de téléphone, bracelets & accessoires façonnés à la main dans notre atelier suisse. À retrouver chaque week-end sur nos stands de marchés !
            </p>

            <!-- Buttons -->
            <div class="flex flex-wrap items-center justify-center gap-4 pt-2">
                <a href="#studio" class="pop-btn bg-popPink text-white px-7 py-3.5 rounded-2xl text-sm font-bold uppercase tracking-wider flex items-center gap-2">
                    <span>Tester le Studio Perso</span>
                    <i class="fa-solid fa-wand-magic-sparkles"></i>
                </a>
                <a href="#marches" class="pop-btn bg-white text-popDark px-7 py-3.5 rounded-2xl text-sm font-bold uppercase tracking-wider flex items-center gap-2">
                    <i class="fa-solid fa-map-pin text-popPink"></i>
                    <span>Voir l'Agenda Marchés</span>
                </a>
            </div>

            <!-- Quick Trust Badges -->
            <div class="pt-8 flex flex-wrap items-center justify-center gap-3 text-xs font-bold">
                <span class="px-3 py-1.5 rounded-xl bg-white border border-popDark/20 shadow-sm">🇨🇭 Fait main en Suisse</span>
                <span class="px-3 py-1.5 rounded-xl bg-white border border-popDark/20 shadow-sm">♻️ Stylos Rechargeables</span>
                <span class="px-3 py-1.5 rounded-xl bg-white border border-popDark/20 shadow-sm">🎨 Sur-Mesure Instantané</span>
            </div>

        </div>
    </section>

    <section id="studio" class="py-12 bg-popLilac/20 border-y-2 border-popDark relative">
        <div class="max-w-4xl mx-auto px-4">
            
            <div class="text-center space-y-2 mb-8">
                <span class="px-3 py-1 rounded-full bg-popYellow border border-popDark text-xs font-extrabold uppercase">
                    Interactif
                </span>
                <h2 class="font-display text-3xl sm:text-4xl font-bold">Compose Ton Flow en Perles ! 🎨</h2>
                <p class="text-xs sm:text-sm text-gray-600 font-medium">Tape un prénom ou un mot et regarde la magie opérer instantanément.</p>
            </div>

            <div class="pop-card rounded-3xl p-6 sm:p-8 space-y-6">
                
                <div class="grid sm:grid-cols-2 gap-4">
                    <!-- Input field -->
                    <div>
                        <label class="block text-xs font-extrabold uppercase tracking-wider mb-2">1. Ton mot ou prénom :</label>
                        <input type="text" id="bead-text" maxlength="9" value="LISA" oninput="renderBeads()" class="w-full bg-popBg border-2 border-popDark rounded-2xl px-4 py-3 font-display font-bold text-lg uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-popPink">
                    </div>

                    <!-- Type select -->
                    <div>
                        <label class="block text-xs font-extrabold uppercase tracking-wider mb-2">2. Type de création :</label>
                        <select id="bead-type" onchange="renderBeads()" class="w-full bg-popBg border-2 border-popDark rounded-2xl px-4 py-3 font-semibold text-sm focus:outline-none">
                            <option value="Stylo Perlé ✏️">Stylo Perlé Rechargeable ✏️</option>
                            <option value="Bijou de Téléphone 📱">Bijou de Téléphone 📱</option>
                            <option value="Bracelet Personnalisé 📿">Bracelet Personnalisé 📿</option>
                            <option value="Porte-Clés & Charm 🔑">Porte-Clés & Charm 🔑</option>
                        </select>
                    </div>
                </div>

                <!-- Color Vibe Selector -->
                <div>
                    <label class="block text-xs font-extrabold uppercase tracking-wider mb-2">3. Choi's ta Vibe de Couleurs :</label>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                        <button type="button" onclick="setVibe('pastel')" class="vibe-btn pop-btn p-2.5 rounded-xl bg-popBg flex items-center justify-center gap-2 text-xs font-bold active-vibe">
                            <span class="w-3 h-3 rounded-full bg-pink-300"></span> Pastel Sweet
                        </button>
                        <button type="button" onclick="setVibe('neon')" class="vibe-btn pop-btn p-2.5 rounded-xl bg-popBg flex items-center justify-center gap-2 text-xs font-bold">
                            <span class="w-3 h-3 rounded-full bg-emerald-400"></span> Y2K Neon
                        </button>
                        <button type="button" onclick="setVibe('chic')" class="vibe-btn pop-btn p-2.5 rounded-xl bg-popBg flex items-center justify-center gap-2 text-xs font-bold">
                            <span class="w-3 h-3 rounded-full bg-amber-400"></span> Gold Chic
                        </button>
                        <button type="button" onclick="setVibe('terracotta')" class="vibe-btn pop-btn p-2.5 rounded-xl bg-popBg flex items-center justify-center gap-2 text-xs font-bold">
                            <span class="w-3 h-3 rounded-full bg-amber-700"></span> Terrestre
                        </button>
                    </div>
                </div>

                <!-- Animated Display Output -->
                <div class="p-6 bg-popBg rounded-2xl border-2 border-dashed border-popDark/40 flex flex-col items-center justify-center min-h-[140px] space-y-4">
                    <span class="text-[10px] font-bold uppercase tracking-widest text-gray-500">Aperçu Visuel Animé</span>
                    
                    <div id="bead-chain" class="flex items-center justify-center gap-1.5 flex-wrap">
                        <!-- Dynamic bead elements rendered via JS -->
                    </div>

                    <p id="bead-summary" class="text-xs font-extrabold text-popDark text-center">
                        Stylo Perlé avec "LISA" (Vibe Pastel Sweet)
                    </p>
                </div>

                <!-- Send to atelier CTA -->
                <button onclick="orderViaWhatsApp()" class="w-full pop-btn bg-popMint text-popDark font-display font-bold py-3.5 rounded-2xl text-sm uppercase tracking-wider flex items-center justify-center gap-2">
                    <i class="fa-brands fa-whatsapp text-lg"></i>
                    <span>Envoyer ce modèle à l'Atelier sur WhatsApp</span>
                </button>

            </div>
        </div>
    </section>

    <section id="univers" class="py-16">
        <div class="max-w-5xl mx-auto px-4 space-y-10">
            
            <div class="text-center space-y-2 max-w-xl mx-auto">
                <span class="px-3 py-1 rounded-full bg-popPink text-white border border-popDark text-xs font-extrabold uppercase">
                    Savoir-Faire & Univers
                </span>
                <h2 class="font-display text-3xl sm:text-5xl font-bold">Nos Univers Créatifs</h2>
                <p class="text-xs sm:text-sm text-gray-600 font-medium">Chaque gamme est personnalisable directement sur nos stands de marchés ou sur commande spéciale.</p>
            </div>

            <div class="grid sm:grid-cols-2 gap-6">
                
                <!-- Category 1 -->
                <div class="pop-card rounded-3xl p-6 bg-popYellow/20 space-y-4 flex flex-col justify-between">
                    <div class="space-y-3">
                        <div class="w-12 h-12 rounded-2xl bg-popYellow border-2 border-popDark flex items-center justify-center text-2xl">
                            ✏️
                        </div>
                        <h3 class="font-display text-2xl font-bold">Stylos Perlés Rechargeables</h3>
                        <p class="text-xs text-gray-700 leading-relaxed font-semibold">
                            L'incontournable de notre stand ! Des stylos à bille rechargeables décorés de perles aux teintes coordonnées. Idéal pour offrir aux maîtres, maîtresses, collègues ou pour égayer votre bureau.
                        </p>
                    </div>
                    <div class="pt-2 flex items-center justify-between text-xs font-bold border-t border-popDark/10">
                        <span class="text-popPink">★ Best-Seller des marchés</span>
                        <span>Recharges fournies</span>
                    </div>
                </div>

                <!-- Category 2 -->
                <div class="pop-card rounded-3xl p-6 bg-popPink/10 space-y-4 flex flex-col justify-between">
                    <div class="space-y-3">
                        <div class="w-12 h-12 rounded-2xl bg-popPink border-2 border-popDark flex items-center justify-center text-2xl text-white">
                            📱
                        </div>
                        <h3 class="font-display text-2xl font-bold">Chaînes & Bijoux de Téléphone</h3>
                        <p class="text-xs text-gray-700 leading-relaxed font-semibold">
                            Sécurisez votre téléphone avec élégance. Cordelettes ultra-résistantes avec perles acryliques, bois ou silicone. S'accroche facilement à toutes les coques.
                        </p>
                    </div>
                    <div class="pt-2 flex items-center justify-between text-xs font-bold border-t border-popDark/10">
                        <span class="text-popPink">★ Fil renforcé</span>
                        <span>Attache universelle</span>
                    </div>
                </div>

                <!-- Category 3 -->
                <div class="pop-card rounded-3xl p-6 bg-popMint/20 space-y-4 flex flex-col justify-between">
                    <div class="space-y-3">
                        <div class="w-12 h-12 rounded-2xl bg-popMint border-2 border-popDark flex items-center justify-center text-2xl">
                            📿
                        </div>
                        <h3 class="font-display text-2xl font-bold">Bracelets & Parures Fait Main</h3>
                        <p class="text-xs text-gray-700 leading-relaxed font-semibold">
                            Bracelets ajustables composés de perles d'eau douce, d'hématite ou de perles fantaisie. Ajustement de la taille effectué directement sous vos yeux sur le marché !
                        </p>
                    </div>
                    <div class="pt-2 flex items-center justify-between text-xs font-bold border-t border-popDark/10">
                        <span class="text-popPink">★ Ajustement minute</span>
                        <span>Adultes & Enfants</span>
                    </div>
                </div>

                <!-- Category 4 -->
                <div class="pop-card rounded-3xl p-6 bg-popLilac/20 space-y-4 flex flex-col justify-between">
                    <div class="space-y-3">
                        <div class="w-12 h-12 rounded-2xl bg-popLilac border-2 border-popDark flex items-center justify-center text-2xl">
                            🔑
                        </div>
                        <h3 class="font-display text-2xl font-bold">Porte-Clés & Charms de Sac</h3>
                        <p class="text-xs text-gray-700 leading-relaxed font-semibold">
                            Mousquetons solides dorés ou argentés enrichis de pompons et perles coordonnées. Pour retrouver facilement vos clés ou personnaliser un sac à main.
                        </p>
                    </div>
                    <div class="pt-2 flex items-center justify-between text-xs font-bold border-t border-popDark/10">
                        <span class="text-popPink">★ Mousquetons renforcés</span>
                        <span>Cadeau mignon</span>
                    </div>
                </div>

            </div>

        </div>
    </section>

    <section id="marches" class="py-16 bg-popBg border-t-2 border-popDark">
        <div class="max-w-5xl mx-auto px-4 space-y-8">
            
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
                <div class="space-y-2">
                    <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-100 text-red-700 border border-red-300 text-xs font-extrabold uppercase">
                        <span class="w-2 h-2 rounded-full bg-red-600 animate-ping"></span> Radar Marchés Suisse 🇨🇭
                    </div>
                    <h2 class="font-display text-3xl sm:text-4xl font-bold">Où nous trouver ces prochains jours ?</h2>
                    <p class="text-xs sm:text-sm text-gray-600 font-medium">Venez composer vos articles sur place ou récupérer vos réservations !</p>
                </div>

                <!-- Canton filters -->
                <div class="flex flex-wrap gap-2 text-xs font-bold">
                    <button onclick="filterMarkets('all')" class="m-filter pop-btn px-3.5 py-1.5 rounded-full bg-popDark text-white">Tous</button>
                    <button onclick="filterMarkets('neuchatel')" class="m-filter pop-btn px-3.5 py-1.5 rounded-full bg-white text-popDark">Neuchâtel</button>
                    <button onclick="filterMarkets('vaud')" class="m-filter pop-btn px-3.5 py-1.5 rounded-full bg-white text-popDark">Vaud</button>
                    <button onclick="filterMarkets('geneve')" class="m-filter pop-btn px-3.5 py-1.5 rounded-full bg-white text-popDark">Genève</button>
                </div>
            </div>

            <!-- Market List -->
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4" id="markets-grid">
                
                <div class="m-card neuchatel pop-card rounded-2xl p-5 space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-[10px] font-extrabold uppercase bg-popLilac/30 px-2.5 py-0.5 rounded-full border border-popDark">Neuchâtel</span>
                        <span class="text-[10px] font-bold text-emerald-700 bg-emerald-100 px-2 py-0.5 rounded-md">Samedi Prochain</span>
                    </div>
                    <h3 class="font-display font-bold text-lg">Marché de La Chaux-de-Fonds</h3>
                    <div class="text-xs space-y-1 font-semibold text-gray-700">
                        <p>📍 Place Espacité</p>
                        <p>🗓️ Samedi 08h00 - 13h00</p>
                    </div>
                </div>

                <div class="m-card vaud pop-card rounded-2xl p-5 space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-[10px] font-extrabold uppercase bg-popPink/30 px-2.5 py-0.5 rounded-full border border-popDark">Vaud</span>
                        <span class="text-[10px] font-bold text-emerald-700 bg-emerald-100 px-2 py-0.5 rounded-md">Confirmé</span>
                    </div>
                    <h3 class="font-display font-bold text-lg">Marché de Vevey</h3>
                    <div class="text-xs space-y-1 font-semibold text-gray-700">
                        <p>📍 Grande Place, Vevey</p>
                        <p>🗓️ Mardi & Samedi matin</p>
                    </div>
                </div>

                <div class="m-card geneve pop-card rounded-2xl p-5 space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-[10px] font-extrabold uppercase bg-popYellow/40 px-2.5 py-0.5 rounded-full border border-popDark">Genève</span>
                        <span class="text-[10px] font-bold text-purple-700 bg-purple-100 px-2 py-0.5 rounded-md">Marché Artisanal</span>
                    </div>
                    <h3 class="font-display font-bold text-lg">Marché de Carouge</h3>
                    <div class="text-xs space-y-1 font-semibold text-gray-700">
                        <p>📍 Place du Marché, Carouge</p>
                        <p>🗓️ Dimanche 09h00 - 17h00</p>
                    </div>
                </div>

            </div>

            <!-- Pre-order Box Callout -->
            <div class="pop-card rounded-3xl p-6 bg-gradient-to-r from-popYellow/40 via-popPink/30 to-popLilac/40 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="space-y-1 text-center sm:text-left">
                    <h3 class="font-display font-bold text-xl">Tu veux qu'on te prépare un modèle pour le stand ?</h3>
                    <p class="text-xs font-semibold text-gray-700">Préviens-nous 24h avant et viens le récupérer sur notre marché !</p>
                </div>
                <a href="#contact" class="pop-btn bg-popDark text-white text-xs font-bold uppercase tracking-wider px-5 py-3 rounded-xl shrink-0">
                    Réserver sur le Stand &rarr;
                </a>
            </div>

        </div>
    </section>

    <section id="contact" class="py-16">
        <div class="max-w-3xl mx-auto px-4 space-y-8">
            
            <div class="text-center space-y-2">
                <span class="px-3 py-1 rounded-full bg-popMint border border-popDark text-xs font-extrabold uppercase">
                    Un Mot, Une Question ?
                </span>
                <h2 class="font-display text-3xl sm:text-4xl font-bold">Contacte l'Atelier 💌</h2>
                <p class="text-xs sm:text-sm text-gray-600 font-medium">Une question sur un marché ou une série personnalisée pour un événement ? Écris-nous !</p>
            </div>

            <div class="pop-card rounded-3xl p-6 sm:p-8 bg-white space-y-6">
                
                <form id="pop-contact-form" onsubmit="submitForm(event)" class="space-y-4">
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-extrabold uppercase mb-1">Ton Prénom / Nom *</label>
                            <input type="text" required placeholder="Ex: Sophie" class="w-full bg-popBg border-2 border-popDark rounded-xl px-4 py-2.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-popPink">
                        </div>
                        <div>
                            <label class="block text-xs font-extrabold uppercase mb-1">Ton E-mail ou Tél *</label>
                            <input type="text" required placeholder="sophie@example.ch" class="w-full bg-popBg border-2 border-popDark rounded-xl px-4 py-2.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-popPink">
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-extrabold uppercase mb-1">Ton Message *</label>
                        <textarea rows="3" required placeholder="Précise ici le produit souhaité, le prénom ou le marché où tu viens nous voir..." class="w-full bg-popBg border-2 border-popDark rounded-xl px-4 py-2.5 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-popPink"></textarea>
                    </div>

                    <button type="submit" class="w-full pop-btn bg-popPink text-white font-display font-bold py-3.5 rounded-xl text-sm uppercase tracking-wider">
                        Envoyer le message ✨
                    </button>

                    <div id="contact-success" class="hidden p-3 rounded-xl bg-popMint/40 border border-popDark text-xs font-bold text-center">
                        🎉 Merci ! Ton message est bien reçu. On te répond sous 24h !
                    </div>
                </form>

                <div class="pt-4 border-t-2 border-popDark/10 flex flex-wrap items-center justify-around gap-4 text-xs font-bold text-gray-700">
                    <a href="https://wa.me/41790000000" target="_blank" class="flex items-center gap-2 hover:text-popPink">
                        <i class="fa-brands fa-whatsapp text-lg text-emerald-600"></i> WhatsApp Direct
                    </a>
                    <a href="mailto:hello@perles-vibes.ch" class="flex items-center gap-2 hover:text-popPink">
                        <i class="fa-solid fa-envelope text-lg text-popPink"></i> hello@perles-vibes.ch
                    </a>
                    <span class="flex items-center gap-2">
                        📍 Suisse Romande
                    </span>
                </div>

            </div>

        </div>
    </section>

    <footer class="py-8 bg-popDark text-white border-t-2 border-popDark">
        <div class="max-w-5xl mx-auto px-4 text-center space-y-4">
            <div class="flex items-center justify-center gap-2 font-display font-bold text-xl">
                <span>Perles & Vibes</span> ✨
            </div>
            <p class="text-xs text-gray-400 font-medium">Créations artisanales en perles confectionnées avec amour en Suisse 🇨🇭</p>
            <p class="text-[10px] text-gray-500">&copy; 2026 Perles & Vibes. Tous droits réservés.</p>
        </div>
    </footer>

    <script>
        // Interactive Bead Studio Logic
        let currentVibe = 'pastel';
        
        const vibePalettes = {
            pastel: ['#FBCFE8', '#DDD6FE', '#BFDBFE', '#FDE68A', '#A7F3D0'],
            neon: ['#34D399', '#F43F5E', '#FBBF24', '#818CF8', '#22D3EE'],
            chic: ['#FBBF24', '#FFFFFF', '#78350F', '#FEF08A', '#D97706'],
            terracotta: ['#D97706', '#FDE68A', '#78716C', '#B45309', '#F59E0B']
        };

        function setVibe(vibeKey) {
            currentVibe = vibeKey;
            
            // Toggle active state on buttons
            document.querySelectorAll('.vibe-btn').forEach(btn => {
                btn.classList.remove('bg-popYellow');
                btn.classList.add('bg-popBg');
            });
            event.currentTarget.classList.remove('bg-popBg');
            event.currentTarget.classList.add('bg-popYellow');

            renderBeads();
        }

        function renderBeads() {
            const text = document.getElementById('bead-text').value.trim().toUpperCase() || 'LISA';
            const type = document.getElementById('bead-type').value;
            const container = document.getElementById('bead-chain');
            const summary = document.getElementById('bead-summary');

            container.innerHTML = '';
            const palette = vibePalettes[currentVibe];

            // Decorative start bead
            const startBead = document.createElement('div');
            startBead.className = 'w-7 h-7 rounded-full border-2 border-popDark shadow-[2px_2px_0px_#1F1926] flex items-center justify-center text-xs text-white font-bold animate-bounce-slow';
            startBead.style.backgroundColor = palette[0];
            startBead.innerHTML = '★';
            container.appendChild(startBead);

            // Letters
            text.split('').forEach((char, index) => {
                const letterBead = document.createElement('div');
                letterBead.className = 'w-9 h-9 rounded-xl bg-white border-2 border-popDark shadow-[2px_2px_0px_#1F1926] flex items-center justify-center font-display font-bold text-popDark text-base transform hover:scale-125 transition-transform cursor-pointer';
                letterBead.innerText = char;
                container.appendChild(letterBead);

                if (index < text.length - 1) {
                    const dot = document.createElement('div');
                    dot.className = 'w-5 h-5 rounded-full border-2 border-popDark shadow-[1px_1px_0px_#1F1926]';
                    dot.style.backgroundColor = palette[(index + 1) % palette.length];
                    container.appendChild(dot);
                }
            });

            // Decorative end bead
            const endBead = document.createElement('div');
            endBead.className = 'w-7 h-7 rounded-full border-2 border-popDark shadow-[2px_2px_0px_#1F1926] flex items-center justify-center text-xs text-white font-bold animate-bounce-slow';
            endBead.style.backgroundColor = palette[palette.length - 1];
            endBead.innerHTML = '♥';
            container.appendChild(endBead);

            summary.innerText = `${type} avec "${text}" (Vibe ${currentVibe.toUpperCase()})`;
        }

        function orderViaWhatsApp() {
            const text = document.getElementById('bead-text').value.trim().toUpperCase() || 'LISA';
            const type = document.getElementById('bead-type').value;
            const msg = `Bonjour ! J'aimerais commander un ${type} avec le prénom "${text}" en style ${currentVibe}. Est-ce possible ?`;
            window.open(`https://wa.me/41790000000?text=${encodeURIComponent(msg)}`, '_blank');
        }

        // Market Filter Logic
        function filterMarkets(canton) {
            const cards = document.querySelectorAll('.m-card');
            const btns = document.querySelectorAll('.m-filter');

            btns.forEach(b => {
                b.classList.remove('bg-popDark', 'text-white');
                b.classList.add('bg-white', 'text-popDark');
            });
            event.currentTarget.classList.remove('bg-white', 'text-popDark');
            event.currentTarget.classList.add('bg-popDark', 'text-white');

            cards.forEach(card => {
                if (canton === 'all' || card.classList.contains(canton)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // Form Submit simulation
        function submitForm(e) {
            e.preventDefault();
            const success = document.getElementById('contact-success');
            success.classList.remove('hidden');
            setTimeout(() => {
                success.classList.add('hidden');
                document.getElementById('pop-contact-form').reset();
            }, 4000);
        }

        // Initialize on load
        window.onload = function() {
            renderBeads();
        };
    </script>
</body>
</html>