Outiref

Code source de l'URL : http://www.festival-de-neoules.fr

<!DOCTYPE html>
<html lang="fr" dir="ltr">

<head>
    <!-- 📱 Métadonné basique 📱-->
    <meta charset="UTF-8">
    <meta name="description"
        content="Découvrez le Festival de Néoules dans le Var (83) : concerts, artistes internationaux, ambiance conviviale et programmation éclectique au cœur de la Provence. Infos, dates, billetterie, accès et animations.">
    <meta name="keywords"
        content="Festival de Néoules, festival Var, festival 83, festival musique Provence, concerts Var, événement culturel Var, musique live Néoules, festival été Sud France, programme festival Néoules, billetterie festival Néoules, artistes festival Néoules">
    <meta name="author" content="Festival de Néoules">
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 📱 Métadonné basique 📱-->

    <!-- Carte facebook -->
    <meta property="og:title" content="Festival de Néoules 83 – Musique &amp; Culture en Provence">
    <meta property="og:description"
        content="Un festival incontournable dans le Var : musique live, artistes variés, ambiance festive et nature en Provence. Rejoignez-nous à Néoules !">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.example.com/festival-neoules">
    <meta property="og:site_name" content="Festival de Néoules">
    <meta property="og:locale" content="fr_FR">
    <meta property="og:image" content="https://www.example.com/assets/images/festival-neoules-og.jpg">
    <meta property="og:image:alt" content="Affiche du Festival de Néoules - musique en Provence">
    <!-- Carte facebook -->

    <!-- ✖️ Carte X ✖️ -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@FestivalNeoules">
    <meta name="twitter:creator" content="@FestivalNeoules">
    <meta name="twitter:title" content="Festival de Néoules – Musique &amp; Festival dans le Var">
    <meta name="twitter:description"
        content="Vivez l’expérience du Festival de Néoules : concerts estivaux, artistes talentueux et ambiance provençale.">
    <meta name="twitter:image" content="https://www.example.com/assets/images/festival-neoules-twitter.jpg">
    <!-- ✖️ Carte X ✖️ -->

    <link rel="stylesheet" href="style.css">

    <link rel="shortcut icon" href="./asset/image/arbrelogo.webp" type="image/x-icon">

    <!-- 🎄 Code d'implémentation tailwind (Temporaire) 🎄 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 🎄 Code d'implémentation tailwind (Temporaire) 🎄 -->

    <!-- 🎄 Code d'implémentation FA (Temporaire) 🎄 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <!-- 🎄 Code d'implémentation FA (Temporaire) 🎄 -->


    <script src="https://unpkg.com/lenis@1.3.21/dist/lenis.min.js"></script>

    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />

    <!-- Api de map -->

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <!-- Api de map -->

    <title>Festival de néoules</title>

</head>



<body class="bg-zinc-100">

    <script>
        // Initialisation du scroll lenis
        // Initialize Lenis
        const lenis = new Lenis();

        // Use requestAnimationFrame to continuously update the scroll
        function raf(time) {
            lenis.raf(time * 0.5);
            requestAnimationFrame(raf);
        }

        requestAnimationFrame(raf);
    </script>


    <nav id="desktopNav" class="fixed top-[5%] left-1/2 -translate-x-1/2 -translate-y-1/2 pb-3 w-[90%] rounded-xl mt-5 min-[1355px]:flex hidden flex-wrap items-center bg-white/20 backdrop-blur-sm border border-white/35 drop-shadow z-[9999]">
        <img src="./asset/image/LogoAsso.png" alt="Logo du festival" class="w-20 mt-5 ml-5">
        <ul id="ulNav" class="flex flex-wrap gap-24 mt-3 text-white text-2xl poppins ml-12">
            <li><a href="./index.php">Accueil</a></li>
            <!-- <li><a href="./pages/billetterie.php">Billetterie</a></li> -->
            <li><a href="./pages/artistes.php" class="drop-shadow">Artistes</a></li>
            <li><a href="./pages/benevolat.php" class="drop-shadow">Bénévolat</a></li>
            <li><a href="./pages/galerie.php" class="drop-shadow">Galerie</a></li>
            <li><a href="./pages/contact.php" class="drop-shadow">Contact</a></li>
            <li><a href="./pages/contact.php" class="absolute right-12 top-6 rounded-xl rounded bg-purple-500/50 p-3 text-xl hover:scale-105 duration-300 transition ease-in-out"><i class="fa-solid fa-shop"></i> Billetterie</a></li>
        </ul>
    </nav>

    <nav id="mobileNav"
        class="fixed top-[0%] justify-center w-[100%] rounded-2xl rounded-t flex pb-3 justify-center sm:gap-24 max-xs:gap-0 min-[1355px]:hidden flex-wrap items-center bg-white/20 backdrop-blur-sm border border-white/35 drop-shadow z-[9999]">
        <img src="./asset/image/LogoAsso.png" alt="Logo du festival" class="w-24 ml-5">
        <h2 id="titleMenu" class="text-white poppins text-2xl">Festival de néoules</h2>
        <i id="openMenu" class="fa-solid fa-bars text-white text-xl mt-1 ml-4"></i>
        <ul id="ulMenu" class="flex text-shadow text-shadow-xl ml-12 hidden flex-col gap-12 text-white text-3xl poppins">
            <li><a href="./index.php">Accueil</a></li>
            <li><a href="./pages/artistes.php">Artistes</a></li>
            <li><a href="./pages/benevolat.php">Bénévolat</a></li>
            <li><a href="./pages/galerie.php">Galerie</a></li>
            <li><a href="./pages/contact.php">Contact</a></li>
        </ul>
    </nav>

    <main role="contentinfo">


        <div class="relative h-[70vh] w-full">
            <img src="https://i.postimg.cc/xTtVr3Td/Bg.png" alt="Bannière de la page" class="object-cover h-full w-full">

            <div class="absolute inset-0 flex flex-col items-center justify-center text-white text-center px-4">
                <h2 class="text-3xl mt-24 poppins md:text-5xl font-bold mb-4 drop-shadow-lg">Festival de néoules 2026</h2>
                <h2 class="text-3xl poppins md:text-5xl font-bold mb-4 drop-shadow-lg">Du 16 au 18 Juillet 2026</h2>
                <!--  <a href="./pages/billetterie.html" target="_blank"><button type="button"
                        class="billeterieBtn violet mt-24 text-white transition ease duration-300 shadow hover:shadow-[#7a4f9a] shadow-lg rounded px-7 py-3 md:text-lg transition">
                        <span class="text-3xl montserrat font-bold tracking-widest">Billetterie</span>
                    </button></a> -->
            </div>
        </div>

        <!-- Section pour le titre de la classe programme -->
        <div class="artisteSection flex-rows justify-center flex mt-12 mb-12">
            <div class="texte rounded-xl flex text-white relative text-2xl">
                <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[280px] h-[2px] w-32 rounded"></div>
                <i class="fa-solid fa-envelope-open bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent">Le programme</h2><i
                    class="fa-solid fa-envelope-open bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <div class="separator bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[280px] h-[2px] w-32 rounded"></div>
            </div>
        </div>
        <!-- Section pour le titre de la classe programme -->


        <div class="container-img w-96 absolute left-1/2 right-1/2 -translate-x-1/2 relative">

            <img src="./asset/image/program.jpg" alt="Image du programme du festival">

        </div>


        <!-- Section pour le titre de la classe artistes -->
        <div class="artisteSection flex-rows justify-center flex mt-12 mb-12">
            <div class="texte rounded-xl flex text-white relative text-2xl">
                <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[260px] h-[2px] w-32 rounded"></div>
                <i class="fa-solid fa-burst bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent">Les artistes</h2><i
                    class="fa-solid fa-burst bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <div class="separator bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[260px] h-[2px] w-32 rounded"></div>
            </div>
        </div>
        <!-- Section pour le titre de la classe artistes -->


        <!-- //================ 🐺 Carte de "statistique" des artistes top 3 🐺 ================\\ -->
        <div class="stats-card relative w-full">
            <div class="relative w-[90%] rounded-xl mt-5 overflow-hidden grid grid-cols-1 gap-12 xl:grid-cols-3 lg:grid-cols-2 lg:gap-6 md:grid-cols-2 md:gap-8 mx-auto">

                <div class="w-[90%] mx-auto xl:w-[90%] lg:w-[90%] md:w-[90%] flex justify-center">

                    <a href="./pages/InformationArtisteSniper.php">
                        <div class="relative w-full">

                            <img src="https://i.postimg.cc/mkSTxzTt/Sniper.webp"
                                class="w-full h-80 object-cover rounded-xl">

                            <h2 class="text-white absolute p-2 backdrop-blur-sm rounded-xl mt-5 uppercase drop-shadow left-1/2 -translate-x-1/2 top-1/2 text-center text-3xl poppins font-bold w-[70%] mx-auto">
                                Sniper                            </h2>

                            <div class="tag absolute bottom-4 pl-5 pr-5 p-1 font-bold right-[-30px] -translate-x-1/2 backdrop-blur-sm bg-gradient-to-r from-fuchsia-500/70 via-purple-600/70 to-violet-900/30 uppercase text-white montserrat text-xl rounded-xl">
                                <span>Rap</span>
                            </div>

                            <button type="button"
                                class="artisteDate absolute top-3 left-3 p-2 backdrop-blur-sm billeterieBtn bg-gradient-to-r from-fuchsia-500/70 via-purple-600/70 to-violet-900/30 w-[30%] text-white poppins rounded-xl">
                                <span>16 Juillet 2026</span>
                            </button>

                            <div
                                class="Information absolute bottom-3 left-3 p-2 backdrop-blur-sm billeterieBtn bg-gradient-to-r from-pink-500/60 via-purple-500/60 to-purple-800/60 w-[45%] font-extralight uppercase tracking-wider text-white poppins rounded-xl text-[10px] text-center">
                                <span>Cliquez sur la carte pour en savoir plus</span>
                            </div>
                    </a>
                </div>
            </div>
            <!-- //=========== 🎭 Artiste N°1 ================\\ -->



            <!-- //=========== 🎭 Artiste N°2 ================\\ -->
            <div class="w-[90%] mx-auto xl:w-[90%] lg:w-[90%] md:w-[90%] flex justify-center">

                <div class="relative w-full">
                    <a href="./pages/InformationArtisteToxicFrogs.php">
                        <img src="https://i.postimg.cc/4428P46L/toxic-Frog.webp"
                            class="w-full h-80 object-cover rounded-xl">

                        <h2 class="text-white absolute p-2 backdrop-blur-sm rounded-xl mt-5 uppercase drop-shadow left-1/2 -translate-x-1/2 top-1/2 text-center text-3xl poppins font-bold w-[70%] mx-auto">
                            Toxic Frogs                        </h2>

                        <div class="tag absolute bottom-4 pl-5 pr-5 p-1 font-bold right-[-30px] -translate-x-1/2 backdrop-blur-sm bg-gradient-to-r from-fuchsia-500/70 via-purple-600/70 to-violet-900/30 uppercase text-white montserrat text-xl rounded-xl">
                            <span>Celtic punk</span>
                        </div>

                        <button type="button"
                            class="artisteDate absolute top-3 left-3 p-2 backdrop-blur-sm billeterieBtn bg-gradient-to-r from-fuchsia-500/70 via-purple-600/70 to-violet-900/30 w-[30%] text-white poppins rounded-xl">
                            <span>16 Juillet 2026</span>
                        </button>

                        <div
                            class="Information absolute bottom-3 left-3 p-2 backdrop-blur-sm billeterieBtn bg-gradient-to-r from-pink-500/60 via-purple-500/60 to-purple-800/60 w-[45%] font-extralight uppercase tracking-wider text-white poppins rounded-xl text-[10px] text-center">
                            <span>Cliquez sur la carte pour en savoir plus</span>
                        </div>
                    </a>
                </div>
            </div>
            <!-- //=========== 🎭 Artiste N°2 ================\\ -->



            <!-- //=========== 🎭 Artiste N°3 ================\\ -->
            <div class="w-[90%] mx-auto xl:w-[90%] lg:w-[90%] md:w-[90%] flex justify-center">

                <div class="relative w-full">
                    <a href="./pages/InformationArtisteLidiop.php">
                        <img src="https://i.postimg.cc/bwZfgFSZ/Lidiop.webp"
                            class="w-full h-80 object-cover rounded-xl">

                        <h2 class="text-white absolute p-2 backdrop-blur-sm rounded-xl mt-5 uppercase drop-shadow left-1/2 -translate-x-1/2 top-1/2 text-center text-3xl poppins font-bold w-[70%] mx-auto">
                            Lidiop                        </h2>

                        <div class="tag absolute bottom-4 pl-5 pr-5 p-1 font-bold right-[-30px] -translate-x-1/2 backdrop-blur-sm bg-gradient-to-r from-fuchsia-500/70 via-purple-600/70 to-violet-900/30 uppercase text-white montserrat text-xl rounded-xl">
                            <span>Reggae</span>
                        </div>

                        <button type="button"
                            class="artisteDate absolute top-3 left-3 p-2 backdrop-blur-sm billeterieBtn bg-gradient-to-r from-fuchsia-500/70 via-purple-600/70 to-violet-900/30 w-[30%] text-white poppins rounded-xl">
                            <span>16 Juillet 2026</span>
                        </button>

                        <div
                            class="Information absolute bottom-3 left-3 p-2 backdrop-blur-sm billeterieBtn bg-gradient-to-r from-pink-500/60 via-purple-500/60 to-purple-800/60 w-[45%] font-extralight uppercase tracking-wider text-white poppins rounded-xl text-[10px] text-center">
                            <span>Cliquez sur la carte pour en savoir plus</span>
                        </div>
                    </a>
                </div>
            </div>
            <!-- //=========== 🎭 Artiste N°3 ================\\ -->

        </div>

        </div>
        <!-- //================ 🐺 Carte de "statistique" des artistes top 3 🐺 ================\\ -->




        <!-- //================ 😶 Informations du festival (Festival information) 😶 ================\\ -->

        <div class="Informations flex-rows justify-center flex mt-24">
            <div class="texte rounded-xl flex text-white relative text-2xl">
                <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[260px] h-[2px] w-32 rounded"></div>
                <i class="fa-solid fa-circle-info bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent">Informations</h2><i
                    class="fa-solid fa-circle-info bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <div class="separator bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[260px] h-[2px] w-32 rounded"></div>
            </div>
        </div>
        <!-- //================ 😶 Informations du festival (Festival information) 😶 ================\\ -->



        <!-- ============= 👨‍💻 Container et fond pour les information du festival 👨‍💻 ============= -->

        <div class="flex justify-self-center relative h-auto w-full">
            <div class="relative border-2 border-zinc-200 w-[100%] lg:w-[70%] rounded-xl mt-12 overflow-hidden flex mx-auto">
                <div class="imagecontainer relative w-full h-auto">
                    <!-- <img src="./asset/image/fondviolet.webp" alt="Fond de couleur violet"
                    class="absolute object-cover w-full h-auto rounded inset-0 z-0"> -->


                    <div class="InformationsSection flex-rows justify-center flex mt-5">
                        <div class="texte rounded-xl flex text-white relative text-2xl">
                            <!-- <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[200px] h-[2px] w-24 rounded"></div> -->
                            <i class="fa-solid fa-shield-halved bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                            <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent text-xl">Sécurité</h2><i
                                class="fa-solid fa-shield-halved bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                            <!-- <div class="separato Zr bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[200px] h-[2px] w-24 rounded"></div> -->
                        </div>
                    </div>
                    <!-- ============= 👨‍💻 Container et fond pour les information du festival 👨‍💻 ============= -->





                    <!-- =============😁 Bloc des consigne 😁 =============-->
                    <div
                        class="relative grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-6 w-11/12 max-w-6xl mx-auto justify-items-stretch">



                        <!-- =============😎 Consigne N°1 😎=============-->
                        <div
                            class="consigneDiv relative text-center lg:flex-row shadow shadow-purple-300 border border-zinc-200 w-full lg:max-w-xl p-4 flex-wrap shadow justify-center relative drop-shadow drop-shadow-lg flex mt-6 flex-col bg-[#ffff] z-10 rounded-xl">
                            <!-- Titre du bloc -->
                            <h2 class="text-2xl tracking-wider poppins font-bold"><i class="fa-solid fa-door-open bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pr-3"></i> Sortie définitive <i class="fa-solid fa-door-open bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pl-3"></i></h2>
                            <div class="separator relative bg-zinc-200 h-[2px] w-[50%] absolute top-2/2"></div>
                            <p class="text-lg montserrat font-regular">Pour des raisons de sécurité
                                la sortie est définitive.
                            </p>
                            <!-- Titre du bloc -->
                        </div>
                        <!-- =============😎 Consigne N°1 😎=============-->

                        <!-- =============😎 Consigne N°2 😎=============-->
                        <div
                            class="consigneDiv relative text-center lg:flex-row shadow shadow-purple-300 border border-zinc-200 w-full lg:max-w-xl p-4 flex-wrap justify-center relative drop-shadow drop-shadow-lg flex mt-6 flex-col bg-[#ffff] z-10 rounded-xl">
                            <!-- Titre du bloc -->
                            <h2 class="text-2xl tracking-wider poppins font-bold"><i class="fa-solid fa-helmet-safety bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pr-3"></i> Prévention des risques <i class="fa-solid fa-helmet-safety bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pl-3"></i></h2>
                            <div class="separator relative bg-zinc-200 h-[2px] w-[50%] absolute top-2/2"></div>
                            <p class="text-lg montserrat font-regular">Notre partenaire Albatros met à disposition
                                gratuite des protections auditives ainsi que des casques pour enfants.
                            </p>
                            <!-- Titre du bloc -->
                        </div>
                        <!-- =============😎 Consigne N°2 😎=============-->

                        <!-- =============😎 Consigne N°3 (Horizontale) 😎=============-->
                        <div
                            class="consigneDiv relative text-center shadow shadow-purple-300 drop-shadow drop-shadow-lg border border-zinc-200 w-full p-4 flex sm:-mx-1 shadow-black/40 bg-white rounded-xl p-6 flex flex-col justify-center">
                            <!-- Titre du bloc -->
                            <h2 class="text-2xl tracking-wider poppins font-bold"><i class="fa-solid fa-vest bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pr-3"></i> Vestiaire, consigne <i class="fa-solid fa-vest bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pl-3"></i></h2>
                            <div class="separator relative bg-zinc-200 h-[2px] w-[50%] left-1/2 -translate-x-1/2 mt-3 mb-3 absolute top-2/2"></div>
                            <p class="text-lg montserrat font-regular">Nous ne prenons pas en charge la gestion de vos
                                objets
                                personnels sur le site du festival en dehors du camping surveillé.

                        </div>
                        <!-- =============😎 Consigne N°3 😎=============-->

                    </div>




                    <!-- =================== ♿ Section accessibilité ♿ =================== -->

                    <div class="InformationsSection flex-rows justify-center flex mt-12">
                        <div class="texte rounded-xl flex text-white relative text-2xl">
                            <!-- <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[200px] h-[2px] w-24 rounded"></div> -->
                            <i class="fa-solid fa-shield-halved bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                            <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent text-xl">Accessibilité</h2><i
                                class="fa-solid fa-shield-halved bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                            <!-- <div class="separato Zr bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[200px] h-[2px] w-24 rounded"></div> -->
                        </div>
                    </div>


                    <!-- ==================== ♿ Bloc de consigne N°1 ♿ ====================-->
                    <div
                        class="relative grid grid-cols-1 sm:grid-cols-2 gap-6 w-11/12 max-w-6xl mx-auto justify-items-stretch">
                        <!-- ==================== ♿ Bloc de consigne N°1 ♿ ====================-->



                        <!-- ==================== ♿ Consigne N°1 ♿ ==================== -->
                        <div
                            class="consigneDiv relative text-center lg:flex-row shadow shadow-purple-300 border border-zinc-200 w-full lg:max-w-xl p-4 flex-wrap justify-center relative drop-shadow drop-shadow-lg flex mt-6 flex-col bg-[#ffff] z-10 rounded-xl">
                            <!-- Titre du bloc -->
                            <h2 class="text-2xl tracking-wider poppins font-bold"><i class="fa-solid fa-wheelchair bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pr-3"></i> Mobilité réduite <i class="fa-solid fa-wheelchair bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pl-3"></i></h2>
                            <div class="separator relative bg-zinc-200 h-[2px] w-[50%] absolute top-2/2"></div>
                            <p class="text-lg montserrat font-regular">Le site est accessible aux personnes à mobilité
                                réduite et comprend des sanitaires adaptés.
                            </p>
                            <!-- Titre du bloc -->
                        </div>
                        <!-- ==================== ♿ Consigne N°1 ♿ ==================== -->



                        <!-- ==================== ♿ Consigne N°2 ♿ ==================== -->
                        <div
                            class="consigneDiv relative text-center lg:flex-row shadow shadow-purple-300 border border-zinc-200 w-full lg:max-w-xl p-4 flex-wrap justify-center relative drop-shadow drop-shadow-lg flex mt-6 flex-col bg-[#ffff] z-10 rounded-xl">
                            <!-- Titre du bloc -->
                            <h2 class="text-2xl tracking-wider poppins font-bold"><i class="fa-solid fa-dog bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pr-3"></i> Nos amis à 4 pattes <i class="fa-solid fa-dog bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pl-3"></i></h2>
                            <div class="separator relative bg-zinc-200 h-[2px] w-[50%] absolute top-2/2"></div>
                            <p class="text-lg montserrat font-regular">Pour des raisons d'hygiène et de sécurité,
                                les chiens ne sont pas admis sur le site.
                            </p>
                            <!-- Titre du bloc -->
                        </div>
                        <!-- ==================== ♿ Consigne N°2 ♿ ==================== -->


                    </div>


                    <!-- ====================♿ Section Accèsibilité ♿==================== -->




                    <!-- ==================== 👓 Section Autre - Other section 👓 ==================== -->


                    <div class="InformationsSection flex-rows justify-center flex mt-12">
                        <div class="texte rounded-xl flex text-white relative text-2xl">
                            <!-- <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[200px] h-[2px] w-24 rounded"></div> -->
                            <i class="fa-solid fa-table bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                            <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent text-xl">Autre</h2><i
                                class="fa-solid fa-table bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                            <!-- <div class="separato Zr bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[200px] h-[2px] w-24 rounded"></div> -->
                        </div>
                    </div>

                    <!-- ============== 👓 Consigne 👓 =============== -->

                    <div
                        class="relative grid mb-12 grid-cols-1 sm:grid-cols-2 gap-6 w-11/12 max-w-6xl mx-auto justify-items-stretch">





                        <!-- ============== 👓 Consigne N°1 👓 =============== -->
                        <div
                            class="consigneDiv relative text-center lg:flex-row shadow shadow-purple-300 border border-zinc-200 w-full lg:max-w-xl p-4 flex-wrap justify-center relative drop-shadow drop-shadow-lg flex mt-6 flex-col bg-[#ffff] z-10 rounded-xl">
                            <!-- Titre du bloc -->
                            <h2 class="text-2xl tracking-wider poppins font-bold"><i class="fa-solid fa-money-bill bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pr-3"></i> Remboursement <i class="fa-solid fa-money-bill bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pl-3"></i></h2>
                            <div class="separator relative bg-zinc-200 h-[2px] w-[50%] absolute top-2/2"></div>
                            <p class="text-lg montserrat font-regular">Nous remboursons les
                                places en cas d'annulation des concerts.
                                Les places non utilisées par les festivaliers ne sont pas remboursées.
                            </p>
                            <!-- Titre du bloc -->
                        </div>
                        <!-- ============== 👓 Consigne N°1 👓 =============== -->


                        <!-- ============== 👓 Consigne N°2 👓 =============== -->
                        <div
                            class="consigneDiv relative text-center lg:flex-row shadow shadow-purple-300 border border-zinc-200 w-full lg:max-w-xl p-4 flex-wrap justify-center relative drop-shadow drop-shadow-lg flex mt-6 flex-col bg-[#ffff] z-10 rounded-xl">
                            <!-- Titre du bloc -->
                            <h2 class="text-2xl tracking-wider poppins font-bold"><i class="fa-solid fa-credit-card bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pr-3"></i> Terminal de paiement <i class="fa-solid fa-credit-card bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent pl-3"></i></h2>
                            <div class="separator relative bg-zinc-200 h-[2px] w-[50%] absolute top-2/2"></div>
                            <p class="text-lg montserrat font-regular">Des terminaux CB sont en place sur le site pour
                                régler vos achats de places ou vos consommations buvette.
                            </p>
                            <!-- Titre du bloc -->
                        </div>
                        <!-- ============== 👓 Consigne N°2 👓 =============== -->


                        <!-- ============== 👓 Consigne 👓 =============== -->

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

        <!-- ==================== 👓 Section Autre - Other section 👓 ==================== -->


        <!-- 🎆 Section des question frequentes 🎆 -->

        <!-- Section pour le titre de la classe ask question -->
        <div class="artisteSection flex-rows justify-center flex mt-12 mb-12">
            <div class="texte rounded-xl flex text-white relative text-2xl">
                <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[380px] h-[2px] w-32 rounded"></div>
                <i class="fa-solid fa-circle-question bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent">Questions fréquentes</h2><i
                    class="fa-solid fa-circle-question bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <div class="separator bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[380px] h-[2px] w-32 rounded"></div>
            </div>
        </div>
        <!-- Section pour le titre de la classe ask question -->


        <div
            class="flex-col flex relative h-auto w-[100%] lg:w-[70%] border-2 border-zinc-200 pt-12 rounded-xl justify-center items-center mx-auto mt-12">

            <!-- 🎁 Question A 🎁 -->
            <div id="downQuestionA" class="questionA cursor-pointer w-11/12 h-auto rounded-xl drop-shadow p-4 bg-white flex flex-row" tabindex="0">
                <h3 class="text-xl poppins font-regular tracking-wider">L'entrée est-elle gratuite pour les enfants ?</h3>
                <i class="fa-solid fa-arrow-down text-2xl ml-auto" id="downQuestionA"></i>
            </div>

            <div id="reponseA"
                class="hidden transition duration-300 ease-in-out relative flex rounded-b flex-col bg-gradient-to-r from-pink-300/20 via-purple-400/20 to-purple-700/20 w-10/12 p-3 poppins">
                <p>Oui, l'entrée est bien gratuite pour les enfants de moin de 10 ans</p>
            </div>
            <!-- 🎁 Question A 🎁 -->

            <!-- 🎋 Séparateur d'éléments 🎋 -->
            <div class="separator mb-12"></div>
            <!-- 🎋 Séparateur d'éléments 🎋 -->

            <!-- 🎁 Question B 🎁 -->

            <div id="downQuestionB" class="questionB cursor-pointer w-11/12 h-auto rounded-xl drop-shadow p-4 bg-white flex flex-row" tabindex="0">
                <h3 class="text-xl poppins font-regular tracking-wider">Ou acheter mon billet ?</h3>
                <i class="fa-solid fa-arrow-down text-2xl ml-auto" id="downQuestionB"></i>
            </div>
            <div id="reponseB" class="relative hidden flex rounded-b flex-col bg-gradient-to-r from-pink-300/20 via-purple-400/20 to-purple-700/20 w-10/12 p-3 montserrat">
                <p>Vous pouvez acheter votre billet <a class="text-blue-600 font-bold underline underline-2"
                        href="./pages/billetterie.html">ici</a> ou
                    directement depuis la
                    page Billetterie.</p>
            </div>

            <!-- 🎁 Question B 🎁 -->


            <!-- 🎋 Séparateur d'éléments 🎋 -->
            <div class="separator mb-12"></div>
            <!-- 🎋 Séparateur d'éléments 🎋 -->


            <!-- 🎁 Question C 🎁 -->

            <div id="downQuestionC" class="questionC cursor-pointer w-11/12 h-auto rounded-xl drop-shadow p-4 bg-white flex flex-row" tabindex="0">
                <h3 class="text-xl poppins font-regular tracking-wider">Les animaux sont-ils acceptés ?</h3>
                <i class="fa-solid fa-arrow-down text-2xl ml-auto"></i>
            </div>
            <div id="reponseC" class="hidden relative flex rounded-b flex-col bg-gradient-to-r from-pink-300/20 via-purple-400/20 to-purple-700/20 w-10/12 p-3 montserrat">
                <p>Non, malheureusement, nous ne pouvons pas les accepter.</p>
            </div>

            <!-- 🎁 Question C 🎁 -->

            <!-- 🎋 Séparateur d'éléments 🎋 -->
            <div class="separator mb-12"></div>
            <!-- 🎋 Séparateur d'éléments 🎋 -->

        </div>

        <!-- 🎆 Section des question frequentes 🎆 -->


        <!-- 🚗 Section pour le titre de la classe se rendre au festival 🚗 -->
        <div class="artisteSection flex-rows justify-center flex mt-12 mb-12">
            <div class="texte rounded-xl flex text-white relative text-2xl">
                <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[380px] h-[2px] w-32 rounded"></div>
                <i class="fa-solid fa-car bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent">Se rendre au festival</h2><i
                    class="fa-solid fa-car bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <div class="separator bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[380px] h-[2px] w-32 rounded"></div>
            </div>
        </div>
        <!-- 🚗 Section pour le titre de la classe se rendre au festival 🚗 -->



        <!-- 🧧 Section se rendre au festival 🧧 -->

        <div class="grid grid-cols-1 lg:grid-cols-2 mt-12 w-[100%] lg:w-[70%] border-2 border-zinc-200 mx-auto rounded-xl p-5 gap-5 items-stretch">

            <div class="flex max-sm:flex-wrap justify-center mx-auto space-x-4">


                <!-- 🎇 Premier bloc 🎇 -->
                <div
                    class="bg-white w-[100%] sm:w-[100%] max-sm:w-[100%] flex mx-auto mt-5 mb-5 rounded-xl shadow shadow-purple-300 drop-shadow drop-shadow-lg h-auto">

                    <div class="infoAdresse justify-center pt-2 pl-2 pr-2 w-5/5 mx-auto">
                        <div class="border-2 border-purple-300 text-xl p-4 rounded-xl mb-12 flex flex-row mx-auto">
                            <i class="fa-solid fa-earth-europe bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mr-auto"></i>
                            <h3 class="montserrat font-medium">Notre adresse</h3><i
                                class="fa-solid fa-earth-europe text-purple-300 ml-auto"></i>
                        </div>

                        <div class="adresse font-regular text-xl text-center poppins">
                            <h4 class="p-2">Bastide de châteauloin
                                quartier valette
                                83136 NÉOULES

                            </h4>
                            <a href="https://www.google.com/maps/place/Bastide+de+Ch%C3%A2teauloin/@43.3131741,6.0060295,18z/data=!4m6!3m5!1s0x12c914c36f899f03:0x260956ce31d4810b!8m2!3d43.3131352!4d6.0071333!16s%2Fg%2F1tg2gwkj?entry=ttu&g_ep=EgoyMDI2MDMzMS4wIKXMDSoASAFQAw%3D%3D" target="_blank" rel="noopener noreferrer"><button type="button" class="w-64 h-12 bg-gradient-to-l from-pink-300/40 via-purple-400/40 border-2 border-zinc-200 hover:scale-105 transition ease-in-out duration-300 to-purple-700/40 rounded-xl text-stone-700 mt-12 poppins text-2xl">Google maps</button></a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="map" class="w-[100%] h-80 rounded-xl mt-5"></div>

            <!-- 🎇 Premier bloc 🎇 -->


            <!-- 🎇 Deuxieme bloc 🎇 -->

            <!-- <div -->
            <!-- class="sm:w-1/2 max-sm:w-11/12 flex mx-auto mt-5 mb-5 rounded-sm shadow shadow-2xl shadow-black h-auto"> -->

            <!-- 🎨 API de Google map 🎨 -->

            <!-- <div id="map" class="pt-2 rounded pl-2 pr-full h-auto mx-auto"></div> -->

            <!-- 🎨 API de Google map 🎨 -->

            <!-- </div> -->
            <!-- 🎇 Deuxieme bloc 🎇 -->

        </div>

        <!-- 🧧 Section se rendre au festival 🧧 -->

        </div>

        <!-- 🚗 Section pour le titre de la classe où se garer 🚗 -->
        <div class="artisteSection flex-rows justify-center flex mt-12">
            <div class="texte rounded-xl flex text-white relative text-2xl">
                <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[280px] h-[2px] w-32 rounded"></div>
                <i class="fa-solid fa-square-parking bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent">Où se garer ?
                </h2><i
                    class="fa-solid fa-square-parking bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                <div class="separator bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[280px] h-[2px] w-32 rounded"></div>
            </div>
        </div>
        <!-- 🚗 Section pour le titre de la classe où se garer 🚗 -->

        <div class="flex flex-col mt-5">

            <div class="InformationsSection flex-rows justify-center flex mb-12">
                <div class="texte rounded-xl flex text-white relative text-2xl">
                    <!-- <div class="separator bg-gradient-to-r from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 right-[200px] h-[2px] w-24 rounded"></div> -->
                    <i class="fa-solid fa-square-parking bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                    <h2 class="p-2 darkcolor poppins font-bold bg-gradient-to-l from-black/60 to-black/70 bg-clip-text text-transparent bg-clip-text text-transparent text-xl">Informations des parkings</h2><i
                        class="fa-solid fa-square-parking bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 bg-clip-text text-transparent mt-1 p-2"></i>
                    <!-- <div class="separato Zr bg-gradient-to-l from-pink-300/60 via-purple-400/60 to-purple-700/60 absolute top-1/2 left-[200px] h-[2px] w-24 rounded"></div> -->
                </div>
            </div>

            <div class="border-2 border-zinc-200 relative w-auto rounded-xl flex mx-auto h-[500px]">
                <img src="./asset/image/infoPark.webp" class="absolute relative bottom-16" alt="Image d'information de parking">
            </div>

        </div>
    </main>

    <div class="footer mt-12 border border-t-3 border-stone-500">

        <footer>

            <div class="partner flex-rows justify-center flex mt-5">
                <div class="text-stone-700 border-2 border-zinc-200 backdrop-blur-sm text-shadow rounded flex flex-row text-2xl">
                    <h2 class="p-2 poppins font-medium">Nos partenaires</h2>
                </div>
            </div>


            <!-- 🧨 Carousel 🧨 -->
            <div class="overflow-hidden relative w-full">


                <!-- 🥽 Carousel start div 🥽 -->
                <div id="carousel" class="flex transition-transform duration-500">
                    <!-- 🥽 Carousel start div 🥽 -->




                    <!-- 🦺 Partenaire N°1 🦺 -->
                    <div class="flex-none mx-auto sm:mx-0 w-full sm:w-1/3 p-4">
                        <img src="./asset/image/Partenaire_3.webp" alt="Logo du partenaire" class="w-4/12 mx-auto">
                    </div>
                    <!-- 🦺 Partenaire N°1 🦺 -->



                    <!-- 🦺 Partenaire N°2 🦺 -->
                    <div class="flex-none mx-auto sm:mx-0 w-full sm:w-1/3 p-4">
                        <img src="./asset/image/Partenaire_2.webp" alt="Logo du partenaire" class="w-4/12 mx-auto">
                    </div>
                    <!-- 🦺 Partenaire N°2 🦺 -->



                    <!-- 🦺 Partenaire N°3 🦺 -->
                    <div class="flex-none mx-auto sm:mx-0 w-full sm:w-1/3 p-4">
                        <img src="./asset/image/Partenaire_1.webp" alt="Logo du partenaire" class="w-4/12 mx-auto">
                    </div>
                    <!-- 🦺 Partenaire N°3 🦺 -->



                    <!-- 🦺 Partenaire N°4 🦺 -->
                    <div class="flex-none mx-auto sm:mx-0 w-full sm:w-1/3 p-4">
                        <img src="./asset/image/Partenaire_5.webp" alt="Logo du partenaire" class="w-4/12 mx-auto">

                    </div>
                    <!-- 🦺 Partenaire N°4 🦺 -->



                    <!-- 🦺 Partenaire N°5 🦺 -->
                    <div class="flex-none mx-auto sm:mx-0 w-full sm:w-1/3 p-4">
                        <img src="./asset/image/Partenaire_IciProvenceAlpe.webp" alt="Logo du partenaire"
                            class="w-4/12 mx-auto">
                    </div>
                    <!-- 🦺 Partenaire N°5 🦺 -->



                    <!-- 🦺 Partenaire N°6 🦺 -->
                    <div class="flex-none mx-auto sm:mx-0 w-full sm:w-1/3 p-4">
                        <img src="./asset/image/Partenaire_LesPetitE.webp" alt="Logo du partenaire"
                            class="w-4/12 mx-auto">
                    </div>
                    <!-- 🦺 Partenaire N°6 🦺 -->

                    <!-- 🎍 Fin du carousel children 🎍 -->
                </div>
                <!-- 🎍 Fin du carousel children 🎍 -->

            </div>
            <!-- 🧨 Carousel 🧨 -->



            <div
                class="reseau flex flex-rows xs:ml-0 sm:ml-[120px] flex-wrap lg:ml-[120px] justify-center mt-5 mb-12 text-6xl rougepale gap-10">
                <a aria-label="Chaine Youtube" href="../pages/dev.html" target="_blank"><i class="fa-brands fa-youtube"></i></a>
                <a aria-label="Notre Instagram" href="../pages/dev.html" target="_blank"><i class="fa-brands fa-square-instagram"></i></a>
                <a aria-label="Notre Facebook" href="../pages/dev.html" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>

                <div class="aboutText flex text-lg text-stone-900 flex-col">

                    <a href="./pages/information.php" target="_blank">
                        <h4>Votre festival</h4>
                    </a>

                    <a href="./pages/information.php" target="_blank">
                        <h5>Information</h4>
                    </a>

                </div>
            </div>


        </footer>

    </div>



    <script>
        // ========================= 🎍 Configuration de l'api de map 🎍 ========================= \\

        // 🛎️ En construction 07/01/2026 🛎️

        let map = L.map('map').setView([43.31326928482498, 6.007580774847303], 16);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        // 🛎️ En construction 07/01/2026 🛎️

        // ========================= 🎍 Configuration de l'api de map 🎍 ========================= \\




        // =============== 🥽 Marqueur et localisation 🥽 =============== \\

        // 🛎️ En construction 07/01/2026 🛎️

        L.marker([43.31326928482498, 6.007580774847303]).addTo(map)
            .bindPopup('Bastide de Châteauloin, France')
            .openPopup();

        // En construction 07 / 01 / 2026🛎️

        // =============== 🥽 Marqueur et localisation 🥽 =============== \\
    </script>

    <script src="./pages/js/footer.js"></script>
    <script src="./pages/js/askQuestion.js"></script>
    <script src="./pages/js/navbar.js"></script>


    <script>
        let ReachEnd = false;
        let valueRgbInc = 255;

        const ulNav = document.getElementById("ulNav");
        const ulNavMobile = document.getElementById("ulMenu");
        const navbar = document.getElementById("desktopNav");
        const mobileNav = document.getElementById("mobileNav");
        const titleMenu = document.getElementById("titleMenu");

        window.addEventListener("scroll", function(e) {


            let screenScrollY = window.scrollY;
            let screenSize = window.innerWidth;

            let value = 255 - Math.min(screenScrollY, 255);

            let rgbaValue = `rgba(255, ${valueRgbInc}, 255,1)`
            ulNav.style.color = `rgb(${value}, ${value}, ${value})`;
            ulMenu.style.color = `rgb(${value}, ${value}, ${value})`;
            titleMenu.style.color = `rgb(${value}, ${value}, ${value})`


            if (ReachEnd == false) {
                valueRgbInc = screenScrollY / 2;
                console.log('Value de RGBA' + valueRgbInc);
            }

            if (valueRgbInc >= 255) {

                if (valueRgbInc >= 255) {
                    console.log('Valeur atteinte de 255');
                    ReachEnd = true;
                }

            };

            if (screenScrollY <= 400) {
                console.log('La valeur est en dessous de 300');
                ReachEnd = false;
            }
        });
    </script>

</body>

</html>