<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neoptical - Votre opticien de confiance à Paris. Découvrez nos collections de lunettes, profitez de notre expérience VR unique et de nos services professionnels.">
    <meta name="keywords" content="opticien, lunettes, Paris, VR, verres progressifs, lentilles de contact">
    <meta name="theme-color" content="#ffffff">
    <title>Neoptical | Votre vision, notre passion - Opticien à Paris</title>
    
    <!-- Preload des ressources critiques -->
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    <link rel="preload" href="styles.css" as="style">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- CSS principal -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Skip to main content -->
    <a href="#main-content" class="skip-link">Aller au contenu principal</a>

    <!-- Header -->
    <header class="site-header">
        <nav class="main-nav">
            <!-- Logo -->
            <div class="logo">
                <a href="index.html">
                    <i class="fas fa-glasses"></i>
                    <h1>Neoptical</h1>
                </a>
            </div>
    
            <!-- Menu Burger -->
            <button class="menu-toggle" aria-label="Menu principal" aria-expanded="false">
                <span></span>
                <span></span>
                <span></span>
            </button>
    
            <!-- Navigation Links -->
            <ul class="nav-links">
                <li><a href="index.html" class="active">
                    <i class="fas fa-home"></i>Accueil
                </a></li>
                <li><a href="#collections">
                    <i class="fas fa-glasses"></i>Collections
                </a></li>
                <li><a href="#experience-vr">
                    <i class="fas fa-vr-cardboard"></i>Expérience VR
                </a></li>
                <li><a href="#services">
                    <i class="fas fa-concierge-bell"></i>Services
                </a></li>
                <li><a href="#contact" class="cta-nav">
                    <i class="fas fa-calendar-alt"></i>Prendre RDV
                </a></li>
            </ul>
    
            <!-- Overlay pour mobile -->
            <div class="nav-overlay"></div>
        </nav>
    </header>

    <main id="main-content" role="main">
        <!-- Hero Section -->
        <section class="hero" aria-labelledby="hero-title">
            <div class="hero-content container">
                <h1 id="hero-title">Site web en cours de création</h1>
                <h1 id="hero-title">Votre vision mérite le meilleur</h1>
                <p class="hero-subtitle">Découvrez notre sélection exclusive de lunettes</p>
                <div class="hero-buttons">
                    <a href="#contact" class="btn btn-primary">
                        <i class="fas fa-calendar-check" aria-hidden="true"></i> Prendre rendez-vous
                    </a>
                    <a href="#collections" class="btn btn-secondary">
                        <i class="fas fa-glasses" aria-hidden="true"></i> Nos collections
                    </a>
                </div>
            </div>
        </section>

        <!-- Brands Section -->
        <section class="brands" aria-label="Nos marques partenaires">
            <div class="container">
                <h2 class="section-title visually-hidden">Nos marques partenaires</h2>
                <div class="brands-slider">
                    <div class="brands-track">
                        <div class="brand-item">
                            <img src="/api/placeholder/150/50" alt="Ray-Ban" loading="lazy">
                        </div>
                        <div class="brand-item">
                            <img src="/api/placeholder/150/50" alt="Oakley" loading="lazy">
                        </div>
                        <div class="brand-item">
                            <img src="/api/placeholder/150/50" alt="Gucci" loading="lazy">
                        </div>
                        <div class="brand-item">
                            <img src="/api/placeholder/150/50" alt="Prada" loading="lazy">
                        </div>
                        <div class="brand-item">
                            <img src="/api/placeholder/150/50" alt="Dior" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Collections -->
        <section class="collections" id="collections">
            <div class="container">
                <h2 class="section-title">
                    <i class="fas fa-store" aria-hidden="true"></i> 
                    Nos Collections
                </h2>
                <div class="collections-grid">
                    <article class="collection-card">
                        <div class="card-content">
                            <i class="fas fa-glasses" aria-hidden="true"></i>
                            <h3>Lunettes de Vue</h3>
                            <p>Des montures élégantes adaptées à tous les visages</p>
                            <a href="#" class="btn">
                                Découvrir <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </article>
        
                    <article class="collection-card">
                        <div class="card-content">
                            <i class="fas fa-sun" aria-hidden="true"></i>
                            <h3>Lunettes de Soleil</h3>
                            <p>Protection UV optimale et style affirmé</p>
                            <a href="#" class="btn">
                                Découvrir <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </article>
        
                    <article class="collection-card">
                        <div class="card-content">
                            <i class="fas fa-eye" aria-hidden="true"></i>
                            <h3>Lentilles de Contact</h3>
                            <p>Large gamme de lentilles adaptées à vos besoins</p>
                            <a href="#" class="btn">
                                Découvrir <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- VR Experience -->
        <section id="experience-vr" class="vr-experience">
            <div class="container">
                <div class="vr-content">
                    <div class="vr-text">
                        <h2>
                            <i class="fas fa-vr-cardboard"></i>
                            Découvrez vos Verres Progressifs en Réalité Virtuelle
                        </h2>
                        <p>Plongez dans une expérience immersive unique et testez vos futurs verres progressifs en réalité virtuelle.</p>
                        
                        <div class="vr-features">
                            <div class="vr-feature">
                                <i class="fas fa-vr-cardboard"></i>
                                <h3>Simulation Réaliste</h3>
                                <p>Testez vos verres dans des conditions réelles du quotidien</p>
                            </div>
                            
                            <div class="vr-feature">
                                <i class="fas fa-sliders-h"></i>
                                <h3>Adaptation Personnalisée</h3>
                                <p>Ajustement précis selon votre correction visuelle</p>
                            </div>
                            
                            <div class="vr-feature">
                                <i class="fas fa-check-circle"></i>
                                <h3>Choix Éclairé</h3>
                                <p>Comparez différentes options pour un confort optimal</p>
                            </div>
                        </div>
        
                        <div class="vr-cta">
                            <a href="#contact" class="btn">
                                <i class="fas fa-play-circle"></i>
                                Réserver votre essai en Réalité Virtuelle
                            </a>
                        </div>
                    </div>
        
                    <div class="vr-media">
                        <img src="/api/placeholder/500/300" alt="Démonstration de l'expérience VR" loading="lazy">
                    </div>
                </div>
            </div>
        </section>

        <!-- Services -->
        <section class="services" id="services">
            <div class="container">
                <div class="services-header">
                    <h2>
                        <i class="fas fa-concierge-bell"></i>
                        Nos Services
                    </h2>
                    <p>Découvrez notre gamme complète de services professionnels pour prendre soin de votre vision</p>
                </div>
        
                <div class="services-grid">
                    <!-- Examen de Vue -->
                    <article class="service-card">
                        <div class="icon-wrapper">
                            <i class="fas fa-eye-dropper"></i>
                        </div>
                        <h3>Examen de Vue</h3>
                        <p>Un bilan visuel complet réalisé par nos experts qualifiés</p>
                        
                        <div class="service-features">
                            <ul class="feature-list">
                                <li><i class="fas fa-check-circle"></i>Test de vision complet</li>
                                <li><i class="fas fa-check-circle"></i>Dépistage des pathologies</li>
                                <li><i class="fas fa-check-circle"></i>Conseils personnalisés</li>
                            </ul>
                        </div>
                        
                        <a href="#" class="service-link">
                            En savoir plus <i class="fas fa-arrow-right"></i>
                        </a>
                    </article>
        
                    <!-- Conseil Personnalisé -->
                    <article class="service-card">
                        <div class="icon-wrapper">
                            <i class="fas fa-comments"></i>
                        </div>
                        <h3>Conseil Personnalisé</h3>
                        <p>Un accompagnement sur-mesure pour trouver vos lunettes idéales</p>
                        
                        <div class="service-features">
                            <ul class="feature-list">
                                <li><i class="fas fa-check-circle"></i>Analyse morphologique</li>
                                <li><i class="fas fa-check-circle"></i>Choix des verres adaptés</li>
                                <li><i class="fas fa-check-circle"></i>Essayage virtuel</li>
                            </ul>
                        </div>
                        
                        <a href="#" class="service-link">
                            En savoir plus <i class="fas fa-arrow-right"></i>
                        </a>
                    </article>
        
                    <!-- Lentilles -->
                    <article class="service-card">
                        <div class="icon-wrapper">
                            <i class="fas fa-eye"></i>
                        </div>
                        <h3>Lentilles de Contact</h3>
                        <p>Adaptation et suivi pour un confort optimal au quotidien</p>
                        
                        <div class="service-features">
                            <ul class="feature-list">
                                <li><i class="fas fa-check-circle"></i>Test d'adaptation</li>
                                <li><i class="fas fa-check-circle"></i>Formation à la manipulation</li>
                                <li><i class="fas fa-check-circle"></i>Suivi régulier</li>
                            </ul>
                        </div>
                        
                        <a href="#" class="service-link">
                            En savoir plus <i class="fas fa-arrow-right"></i>
                        </a>
                    </article>
        
                    <!-- Entretien -->
                    <article class="service-card">
                        <div class="icon-wrapper">
                            <i class="fas fa-tools"></i>
                        </div>
                        <h3>Entretien & Ajustement</h3>
                        <p>Service gratuit pour optimiser le confort de vos lunettes</p>
                        
                        <div class="service-features">
                            <ul class="feature-list">
                                <li><i class="fas fa-check-circle"></i>Ajustement précis</li>
                                <li><i class="fas fa-check-circle"></i>Nettoyage professionnel</li>
                                <li><i class="fas fa-check-circle"></i>Petites réparations</li>
                            </ul>
                        </div>
                        
                        <a href="#" class="service-link">
                            En savoir plus <i class="fas fa-arrow-right"></i>
                        </a>
                    </article>
                </div>
            </div>
        </section>

        <!-- Contact -->
        <section id="contact" class="contact">
            <div class="container">
                <div class="contact-header">
                    <h2>
                        <i class="fas fa-paper-plane"></i>
                        Contactez-nous
                    </h2>
                    <p>Nous sommes à votre écoute pour toutes vos questions</p>
                </div>
        
                <div class="contact-grid">
                    <!-- Informations de contact -->
                    <div class="contact-info">
                        <div class="info-card">
                            <div class="icon-wrapper">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="info-content">
                                <h3>Téléphone</h3>
                                <a href="tel:+33123456789">01 20 03 12 24</a>
                            </div>
                        </div>
        
                        <div class="info-card">
                            <div class="icon-wrapper">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="info-content">
                                <h3>Adresse</h3>
                                <p>2 Rue de l'Armorique<br>75015 Paris</p>
                            </div>
                        </div>
        
                        <div class="info-card">
                            <div class="icon-wrapper">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="info-content">
                                <h3>Horaires d'ouverture</h3>
                                <div class="opening-hours">
                                    <ul class="hours-list">
                                        <li>
                                            <span>Mardi - Samedi </span>
                                            <span> 9h - 19h</span>
                                        </li>
                                        <li>
                                            <span>Dimanche</span>
                                            <span>10h - 18h</span>
                                        </li>
                                        <li>
                                            <span>Lundi</span>
                                            <span>Fermé</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
        
                    <!-- Formulaire de contact -->
                    <form class="contact-form">
                        <div class="form-header">
                            <h3>Envoyez-nous un message</h3>
                            <p>Nous vous répondrons dans les plus brefs délais</p>
                        </div>
        
                        <div class="form-grid">
                            <div class="form-group">
                                <label for="name">Nom complet</label>
                                <input type="text" id="name" name="name" required>
                            </div>
        
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" id="email" name="email" required>
                            </div>
        
                            <div class="form-group">
                                <label for="phone">Téléphone</label>
                                <input type="tel" id="phone" name="phone">
                            </div>
        
                            <div class="form-group">
                                <label for="subject">Sujet</label>
                                <input type="text" id="subject" name="subject" required>
                            </div>
        
                            <div class="form-group full-width">
                                <label for="message">Message</label>
                                <textarea id="message" name="message" required></textarea>
                            </div>
        
                            <button type="submit" class="submit-btn">
                                <i class="fas fa-paper-plane"></i>
                                Envoyer le message
                            </button>
                        </div>
                    </form>
                </div>
        
                <!-- Carte Google Maps -->
                <div class="map-container">
                    <img src="/api/placeholder/1200/400" alt="Carte de localisation" loading="lazy">
                </div>
            </div>
        </section>

    <!-- Footer -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-grid">
                <!-- Branding -->
                <div class="footer-brand">
                    <a href="index.html" class="footer-logo">
                        <i class="fas fa-glasses"></i>
                        <h3>Neoptical</h3>
                    </a>
                    <p class="footer-description">
                        Votre vision mérite le meilleur. Découvrez notre expertise en optique et nos services personnalisés.
                    </p>
                    <div class="social-links">
                        <h4>Suivez-nous</h4>
                        <ul class="social-list">
                            <li>
                                <a href="https://www.instagram.com/neoptical75_/" 
                                   target="_blank" 
                                   rel="noopener noreferrer"
                                   aria-label="Suivez-nous sur Instagram">
                                    <i class="fab fa-instagram"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="footer-newsletter">
                        <h4>Newsletter</h4>
                        <form class="newsletter-form">
                            <input type="email" 
                                   class="newsletter-input" 
                                   placeholder="Votre email"
                                   aria-label="Adresse email pour la newsletter">
                            <button type="submit" class="newsletter-btn">
                                S'inscrire
                            </button>
                        </form>
                    </div>
                </div>
    
                <!-- Navigation -->
                <div class="footer-nav-section">
                    <h4>
                        <i class="fas fa-compass"></i>
                        Navigation
                    </h4>
                    <ul>
                        <li>
                            <a href="#collections">
                                <i class="fas fa-chevron-right"></i>
                                Collections
                            </a>
                        </li>
                        <li>
                            <a href="#experience-vr">
                                <i class="fas fa-chevron-right"></i>
                                Expérience Réalité Virtuelle
                            </a>
                        </li>
                        <li>
                            <a href="#services">
                                <i class="fas fa-chevron-right"></i>
                                Services
                            </a>
                        </li>
                        <li>
                            <a href="#contact">
                                <i class="fas fa-chevron-right"></i>
                                Contact
                            </a>
                        </li>
                    </ul>
                </div>
    
                <!-- Services -->
                <div class="footer-nav-section">
                    <h4>
                        <i class="fas fa-concierge-bell"></i>
                        Services
                    </h4>
                    <ul>
                        <li>
                            <a href="#services">
                                <i class="fas fa-chevron-right"></i>
                                Examen de vue
                            </a>
                        </li>
                        <li>
                            <a href="#services">
                                <i class="fas fa-chevron-right"></i>
                                Lentilles de contact
                            </a>
                        </li>
                        <li>
                            <a href="#services">
                                <i class="fas fa-chevron-right"></i>
                                Entretien
                            </a>
                        </li>
                    </ul>
                </div>
    
                <!-- Informations -->
                <div class="footer-nav-section">
                    <h4>
                        <i class="fas fa-info-circle"></i>
                        Informations
                    </h4>
                    <ul>
                        <li>
                            <a href="mentions-legales.html">
                                <i class="fas fa-chevron-right"></i>
                                Mentions légales
                            </a>
                        </li>
                        <li>
                            <a href="confidentialite.html">
                                <i class="fas fa-chevron-right"></i>
                                Confidentialité
                            </a>
                        </li>
                        <li>
                            <a href="cgv.html">
                                <i class="fas fa-chevron-right"></i>
                                CGV
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
    
            <!-- Footer Bottom -->
            <div class="footer-bottom">
                <div class="footer-bottom-content">
                    <p class="copyright">
                        &copy; 2024 Neoptical - Tous droits réservés
                    </p>
                    <div class="footer-bottom-links">
                        <a href="mentions-legales.html">Mentions légales</a>
                        <a href="confidentialite.html">Politique de confidentialité</a>
                        <a href="accessibility.html">Accessibilité</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Cookie Consent -->
<div class="cookie-consent" id="cookieConsent">
    <div class="cookie-header">
        <i class="fas fa-cookie-bite"></i>
        <h3>Gestion des cookies</h3>
    </div>

    <div class="cookie-content">
        <p>Nous utilisons des cookies pour améliorer votre expérience sur notre site. Vous pouvez personnaliser vos préférences ou accepter tous les cookies.</p>
    </div>

    <div class="cookie-preferences">
        <div class="cookie-option required">
            <input type="checkbox" id="essentialCookies" checked disabled>
            <label for="essentialCookies">Cookies essentiels (requis)</label>
        </div>
        <div class="cookie-option">
            <input type="checkbox" id="analyticsCookies">
            <label for="analyticsCookies">Cookies analytiques</label>
        </div>
        <div class="cookie-option">
            <input type="checkbox" id="marketingCookies">
            <label for="marketingCookies">Cookies marketing</label>
        </div>
    </div>

    <div class="cookie-buttons">
        <button class="cookie-btn cookie-btn-reject" id="rejectCookies">
            <i class="fas fa-times"></i>
            Tout refuser
        </button>
        <button class="cookie-btn cookie-btn-accept" id="acceptCookies">
            <i class="fas fa-check"></i>
            Tout accepter
        </button>
    </div>

    <div class="cookie-footer">
        <a href="politique-cookies.html">En savoir plus sur notre politique de cookies</a>
    </div>
</div>

    <!-- Back to top button -->
    <button id="back-to-top" class="back-to-top" aria-label="Retour en haut de la page" hidden>
        <i class="fas fa-chevron-up" aria-hidden="true"></i>
    </button>

    <!-- Scripts -->
    <script src="js/intersection-observer.js" defer></script>
    <script src="js/main.js" type="module"></script>
</body>
</html>