<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Klarité - Soins Naturels & Éclat</title>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #2C5F4A;
            --primary-light: #4A7C6F;
            --secondary: #D4A574;
            --accent: #F5E6D3;
            --cream: #FAF7F2;
            --white: #FFFFFF;
            --text-dark: #2C3E50;
            --text-light: #5D6D7E;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            color: var(--text-dark);
            background-color: var(--cream);
            line-height: 1.6;
        }

        h1, h2, h3, h4 {
            font-family: 'Cormorant Garamond', serif;
            font-weight: 400;
        }

        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(250, 247, 242, 0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 1rem 5%;
            box-shadow: 0 2px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: 'Cormorant Garamond', serif;
            font-size: 2.5rem;
            font-weight: 300;
            color: var(--primary);
            letter-spacing: 3px;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 3rem;
            list-style: none;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-dark);
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            transition: color 0.3s;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--primary);
            transition: width 0.3s;
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-icons {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .nav-icons svg {
            width: 24px;
            height: 24px;
            cursor: pointer;
            stroke: var(--text-dark);
            transition: stroke 0.3s;
        }

        .nav-icons svg:hover {
            stroke: var(--primary);
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(135deg, var(--cream) 0%, var(--accent) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            margin-top: 80px;
        }

        .hero-content {
            text-align: center;
            z-index: 2;
            padding: 2rem;
            max-width: 800px;
        }

        .hero h1 {
            font-size: 5rem;
            color: var(--primary);
            margin-bottom: 1rem;
            line-height: 1.1;
            opacity: 0;
            animation: fadeInUp 1s ease forwards;
        }

        .hero p {
            font-size: 1.3rem;
            color: var(--text-light);
            margin-bottom: 2rem;
            font-weight: 300;
            opacity: 0;
            animation: fadeInUp 1s ease 0.3s forwards;
        }

        .btn-primary {
            display: inline-block;
            padding: 1rem 3rem;
            background: var(--primary);
            color: var(--white);
            text-decoration: none;
            font-size: 0.9rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            border: 2px solid var(--primary);
            transition: all 0.4s ease;
            opacity: 0;
            animation: fadeInUp 1s ease 0.6s forwards;
        }

        .btn-primary:hover {
            background: transparent;
            color: var(--primary);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(44, 95, 74, 0.2);
        }

        .hero-image {
            position: absolute;
            right: -10%;
            top: 50%;
            transform: translateY(-50%);
            width: 50%;
            height: 80%;
            background: url('https://images.unsplash.com/photo-1556228578-0d85b1a4d571?w=800&auto=format&fit=crop') center/cover;
            border-radius: 200px 0 0 200px;
            opacity: 0.9;
        }

        /* Categories Section */
        .categories {
            padding: 8rem 5%;
            background: var(--white);
        }

        .section-title {
            text-align: center;
            margin-bottom: 4rem;
        }

        .section-title h2 {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }

        .section-title p {
            color: var(--text-light);
            font-size: 1.1rem;
        }

        .category-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3rem;
        }

        .category-card {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            group: true;
        }

        .category-image {
            height: 400px;
            background: var(--accent);
            position: relative;
            overflow: hidden;
        }

        .category-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .category-card:hover .category-image img {
            transform: scale(1.1);
        }

        .category-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(44, 95, 74, 0.9), transparent);
            padding: 3rem 2rem 2rem;
            color: var(--white);
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .category-card:hover .category-overlay {
            transform: translateY(0);
        }

        .category-overlay h3 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .category-overlay p {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        /* Products Section */
        .products {
            padding: 8rem 5%;
            background: var(--cream);
        }

        .product-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

        .product-card {
            background: var(--white);
            padding: 2rem;
            text-align: center;
            transition: all 0.4s ease;
            border: 1px solid transparent;
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            border-color: var(--secondary);
        }

        .product-image {
            width: 100%;
            height: 300px;
            background: var(--accent);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-card h4 {
            font-size: 1.3rem;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        .product-card .price {
            color: var(--secondary);
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        .btn-add {
            background: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 0.8rem 2rem;
            cursor: pointer;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.3s;
        }

        .btn-add:hover {
            background: var(--primary);
            color: var(--white);
        }

        /* Philosophy Section */
        .philosophy {
            padding: 8rem 5%;
            background: var(--primary);
            color: var(--white);
            text-align: center;
        }

        .philosophy h2 {
            font-size: 3rem;
            margin-bottom: 2rem;
        }

        .philosophy p {
            max-width: 800px;
            margin: 0 auto 3rem;
            font-size: 1.2rem;
            line-height: 1.8;
            opacity: 0.9;
        }

        .values {
            display: flex;
            justify-content: center;
            gap: 4rem;
            margin-top: 4rem;
            flex-wrap: wrap;
        }

        .value-item {
            text-align: center;
        }

        .value-icon {
            width: 80px;
            height: 80px;
            border: 2px solid var(--secondary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 2rem;
        }

        /* Footer */
        footer {
            background: var(--text-dark);
            color: var(--white);
            padding: 5rem 5% 2rem;
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 4rem;
            margin-bottom: 4rem;
        }

        .footer-section h4 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--secondary);
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin-bottom: 0.8rem;
        }

        .footer-section a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-section a:hover {
            color: var(--secondary);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.5);
        }

        /* Animations */
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
            from {
                opacity: 0;
                transform: translateY(30px);
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .hero h1 {
                font-size: 3rem;
            }
            
            .hero-image {
                display: none;
            }
            
            .category-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Dropdown Menu Styles */
        .dropdown {
            position: relative;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background: var(--white);
            min-width: 250px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            z-index: 1001;
            top: 100%;
            padding: 1rem 0;
            border-radius: 4px;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-content a {
            display: block;
            padding: 0.8rem 1.5rem;
            color: var(--text-dark);
            text-decoration: none;
            font-size: 0.85rem;
            transition: all 0.3s;
        }

        .dropdown-content a:hover {
            background: var(--cream);
            color: var(--primary);
            padding-left: 2rem;
        }

        .dropdown > a::after {
            content: '▼';
            font-size: 0.6rem;
            margin-left: 0.5rem;
        }
    </style>
</head>
<body>

    <!-- Navigation -->
    <nav>
        <div class="nav-container">
            <a href="#" class="logo">Klarité</a>
            
            <ul class="nav-links">
                <li class="dropdown">
                    <a href="#hydratation">Hydratation</a>
                    <div class="dropdown-content">
                        <a href="#">Lotion hydratante pour le corps</a>
                        <a href="#">Crème pour le visage</a>
                        <a href="#">Crème pour les mains</a>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#soin">Soin</a>
                    <div class="dropdown-content">
                        <a href="#">Sérum nourrissant visage</a>
                        <a href="#">Sérum éclaircissant visage</a>
                        <a href="#">Sérum Anti-tache</a>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#exfoliant">Exfoliant</a>
                    <div class="dropdown-content">
                        <a href="#">Gel nettoyant visage</a>
                        <a href="#">Eau micellaire</a>
                    </div>
                </li>
                <li class="dropdown">
                    <a href="#brume">Brume</a>
                    <div class="dropdown-content">
                        <a href="#">Joie chic – Brume corps et cheveux</a>
                        <a href="#">Charme - Brume corps et cheveux</a>
                        <a href="#">Nature - Brume corps et cheveux</a>
                        <a href="#">Printemps - Brume corps et cheveux</a>
                    </div>
                </li>
                <li><a href="#philosophie">Notre Philosophie</a></li>
            </ul>

            <div class="nav-icons">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.35-4.35"></path>
                </svg>
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </svg>
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                    <line x1="3" y1="6" x2="21" y2="6"></line>
                    <path d="M16 10a4 4 0 0 1-8 0"></path>
                </svg>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1>L'Éclat Naturel de Votre Peau</h1>
            <p>Découvrez notre collection de soins d'exception, formulés avec des ingrédients purs et naturels pour révéler votre beauté authentique.</p>
            <a href="#products" class="btn-primary">Découvrir la Collection</a>
        </div>
        <div class="hero-image"></div>
    </section>

    <!-- Categories Section -->
    <section class="categories" id="products">
        <div class="section-title">
            <h2>Nos Collections</h2>
            <p>Des soins sur mesure pour chaque besoin de votre peau</p>
        </div>
        
        <div class="category-grid">
            <div class="category-card">
                <div class="category-image">
                    <img src="https://images.unsplash.com/photo-1570194065650-d99fb4b38b15?w=600&auto=format&fit=crop" alt="Hydratation">
                </div>
                <div class="category-overlay">
                    <h3>Hydratation</h3>
                    <p>Lotion, Crèmes visage & mains</p>
                </div>
            </div>

            <div class="category-card">
                <div class="category-image">
                    <img src="https://images.unsplash.com/photo-1620916566398-39f1143ab7be?w=600&auto=format&fit=crop" alt="Soin">
                </div>
                <div class="category-overlay">
                    <h3>Soin</h3>
                    <p>Sérums nourrissants & éclaircissants</p>
                </div>
            </div>

            <div class="category-card">
                <div class="category-image">
                    <img src="https://images.unsplash.com/photo-1556228720-195a672e8a03?w=600&auto=format&fit=crop" alt="Exfoliant">
                </div>
                <div class="category-overlay">
                    <h3>Exfoliant</h3>
                    <p>Gels nettoyants & Eaux micellaires</p>
                </div>
            </div>

            <div class="category-card">
                <div class="category-image">
                    <img src="https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?w=600&auto=format&fit=crop" alt="Brume">
                </div>
                <div class="category-overlay">
                    <h3>Brume</h3>
                    <p>Parfums corps & cheveux</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Products -->
    <section class="products">
        <div class="section-title">
            <h2>Nos Best-Sellers</h2>
            <p>Les favoris de nos clientes</p>
        </div>

        <div class="product-grid">
            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?w=400&auto=format&fit=crop" alt="Sérum nourrissant">
                </div>
                <h4>Sérum Nourrissant Visage</h4>
                <p class="price">45,00 €</p>
                <button class="btn-add">Ajouter au panier</button>
            </div>

            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1611930022073-b7a4ba5fcccd?w=400&auto=format&fit=crop" alt="Crème hydratante">
                </div>
                <h4>Crème Hydratante Visage</h4>
                <p class="price">38,00 €</p>
                <button class="btn-add">Ajouter au panier</button>
            </div>

            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1601049541289-9b1b7bbbfe19?w=400&auto=format&fit=crop" alt="Brume Joie Chic">
                </div>
                <h4>Joie Chic - Brume</h4>
                <p class="price">32,00 €</p>
                <button class="btn-add">Ajouter au panier</button>
            </div>

            <div class="product-card">
                <div class="product-image">
                    <img src="https://images.unsplash.com/photo-1556228578-0d85b1a4d571?w=400&auto=format&fit=crop" alt="Eau micellaire">
                </div>
                <h4>Eau Micellaire Douceur</h4>
                <p class="price">24,00 €</p>
                <button class="btn-add">Ajouter au panier</button>
            </div>
        </div>
    </section>

    <!-- Philosophy Section -->
    <section class="philosophy" id="philosophie">
        <h2>Notre Philosophie</h2>
        <p>Chez Klarité, nous croyons en la puissance de la nature. Chaque produit est formulé avec des ingrédients d'origine naturelle, sélectionnés pour leur efficacité et leur douceur. Nous rejetons les parabènes, les sulfates et les silicones pour vous offrir une beauté authentique et respectueuse de votre peau.</p>
        
        <div class="values">
            <div class="value-item">
                <div class="value-icon">🌿</div>
                <h4>100% Naturel</h4>
            </div>
            <div class="value-item">
                <div class="value-icon">🐰</div>
                <h4>Sans Cruauté</h4>
            </div>
            <div class="value-item">
                <div class="value-icon">♻️</div>
                <h4>Éco-Responsable</h4>
            </div>
            <div class="value-item">
                <div class="value-icon">✨</div>
                <h4>Efficacité Prouvée</h4>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>Klarité</h4>
                <p style="color: rgba(255,255,255,0.7); line-height: 1.8;">
                    Soins naturels d'exception pour révéler l'éclat de votre peau. Formulé en France avec amour et respect.
                </p>
            </div>

            <div class="footer-section">
                <h4>Collections</h4>
                <ul>
                    <li><a href="#">Hydratation</a></li>
                    <li><a href="#">Soin</a></li>
                    <li><a href="#">Exfoliant</a></li>
                    <li><a href="#">Brume</a></li>
                </ul>
            </div>

            <div class="footer-section">
                <h4>Aide</h4>
                <ul>
                    <li><a href="#">Livraison & Retours</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Guide des soins</a></li>
                </ul>
            </div>

            <div class="footer-section">
                <h4>Contact</h4>
                <ul>
                    <li><a href="mailto:bonjour@klarite.com">bonjour@klarite.com</a></li>
                    <li><a href="tel:+33123456789">+33 1 23 45 67 89</a></li>
                    <li><a href="#">Paris, France</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <p>&copy; 2026 Klarité. Tous droits réservés. | <a href="#" style="color: rgba(255,255,255,0.5);">Mentions légales</a> | <a href="#" style="color: rgba(255,255,255,0.5);">Politique de confidentialité</a></p>
        </div>
    </footer>

</body>
</html>