Etat Pur Design System

Faq Detail 

<section class="relative w-full h-full bg-brand-200">
    <div class="container items-center h-full w-full ">
        <div class="flex flex-col w-full items-center gap-y-6 adjusted-marg-y-sm">
            <h1 class="h2">Comment pouvons-nous vous aider ?</h1>
            <p class="h6-base">Trouvez des réponses sur tout ce qui concerne nos produits où l’achat sur notre site État pur.</p>
            <div class="flex w-full items-center justify-center">
                <div class="flex items-center bg-white border border-black/16 py-1 px-4 w-[32rem] ">
                    <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg> <input type="text" placeholder="Rechercher un code promo, ma livraison,..." class="border-none bg-transparent w-full focus:outline-none focus:ring-0" />
                </div>
                <a href="#" type="button" class="max-md:self-start md:justify-center  btn  btn-dark  btn-solid  btn-size-lg">
                    Rechercher

                </a>
            </div>

        </div>
    </div>
</section>
<div class="px-6 sm:px-12 lg:px-20 flex flex-col-reverse lg:flex-row w-full gap-x-20 adjusted-marg-y-md">
    <div class="w-full lg:w-1/5">

        <div class="relative w-full bg-white accordion-dark" aria-labelledby="dropdown-faq">
            <div class="pointer-events-none border-b-4 border-brand-500 pb-4">
                <button type="button" class="w-full flex justify-between items-center text-body-lg font-bold" id="dropdown-faq">

                    <span>Consulter tous les sujets</span>
                </button>
            </div>

            <div id="dropdown-content" class="flex flex-col py-4 gap-2">
                <a href="/faq/questions-frequentes" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold md:!text-brand-700 hover:md:text-neutral-900 hover:md:underline">
                    <span class="flex items-center gap-2">
                        <svg class="text-brand-700 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg> Questions les plus fréquentes
                    </span>
                </a>
                <a href="/faq/commande" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
                    <span class="flex items-center gap-2">
                        <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg> Ma commande
                    </span>
                </a>
                <a href="/faq/livraison" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
                    <span class="flex items-center gap-2">
                        <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg> Ma livraison
                    </span>
                </a>
                <a href="/faq/retours" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
                    <span class="flex items-center gap-2">
                        <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg> Mes retours
                    </span>
                </a>
                <a href="/faq/paiement" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
                    <span class="flex items-center gap-2">
                        <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg> Mon paiement
                    </span>
                </a>
                <a href="/faq/compte-etat-pur" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
                    <span class="flex items-center gap-2">
                        <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg> Mon compte Etat Pur
                    </span>
                </a>
                <a href="/faq/programme-fidelite" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
                    <span class="flex items-center gap-2">
                        <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg> Mon programme de fidélité
                    </span>
                </a>
                <a href="/faq/nous-contacter" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
                    <span class="flex items-center gap-2">
                        <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg> Nous contacter
                    </span>
                </a>
            </div>
        </div>
    </div>
    <div class="w-full lg:w-4/5 flex flex-col">
        <h1 class="h4 mb-12">Je n'ai pas reçu d'e-mail de confirmation, que dois-je faire ? </h1>
        <div class="flex flex-col gap-y-4">
            <span>Dans un premier temps, nous vous invitons à <strong>vérifier vos courriers indésirables</strong> parmi lesquels peut se trouver l'email de validation de commande.</span>
            <span>Si ce n'est pas le cas, nous vous conseillons dans un second temps de vérifier si un prélèvement bancaire a été effectué. Il est possible que le paiement n'ait pas abouti et que votre commande n'ait pas été validée.</span>
            <span>Si vous avez bien été prélevé, veuillez <a href="#" class="underline">contacter notre Service Client.</a></span>
        </div>

        <div class="bg-gray-100 mt-12 p-6 lg:w-max mb-12 lg:mb-0">
            <div class="flex items-center flex-col lg:flex-row gap-4">
                <h2 class="text-body-lg font-bold text-black">Cet article vous a-t-il été utile ?</h2>
                <div class="flex flex-col sm:flex-row items-center">
                    <div class="flex items-center">
                        <div class="flex items-center gap-1">
                            <button class="focus:outline-none">
                                <svg class="transition-colors duration-200 hover:fill-black shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="hover:black" />

                                </svg> </button>
                            <button class="focus:outline-none">
                                <svg class="transition-colors duration-200 hover:fill-black shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="hover:black" />

                                </svg> </button>
                            <button class="focus:outline-none">
                                <svg class="transition-colors duration-200 hover:fill-black shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="hover:black" />

                                </svg> </button>
                            <button class="focus:outline-none">
                                <svg class="transition-colors duration-200 hover:fill-black shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="hover:black" />

                                </svg> </button>
                            <button class="focus:outline-none">
                                <svg class="transition-colors duration-200 hover:fill-black shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="hover:black" />

                                </svg> </button>
                        </div>
                        <span class="ml-4 text-body-lg font-bold text-black">Note totale 4.5</span>
                        <span class="hidden sm:flex text-body-lg font-bold text-black px-3">|</span>
                    </div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <div class="flex gap-2">
                            <div class="border border-black rounded-full p-2 text-black hover:text-white hover:bg-gray-700 cursor-pointer">
                                <svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0801 3.23972H11.3334V1.11972C10.7266 1.05662 10.1168 1.02546 9.50674 1.02639C7.6934 1.02639 6.4534 2.13305 6.4534 4.15972V5.90639H4.40674V8.27972H6.4534V14.3597H8.90674V8.27972H10.9467L11.2534 5.90639H8.90674V4.39305C8.90674 3.69305 9.0934 3.23972 10.0801 3.23972Z" fill="currentColor" />

                                </svg>
                            </div>
                            <div class="border border-black rounded-full p-2 text-black hover:text-white hover:bg-gray-700 cursor-pointer">
                                <svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0801 3.23972H11.3334V1.11972C10.7266 1.05662 10.1168 1.02546 9.50674 1.02639C7.6934 1.02639 6.4534 2.13305 6.4534 4.15972V5.90639H4.40674V8.27972H6.4534V14.3597H8.90674V8.27972H10.9467L11.2534 5.90639H8.90674V4.39305C8.90674 3.69305 9.0934 3.23972 10.0801 3.23972Z" fill="currentColor" />

                                </svg>
                            </div>
                            <div class="border border-black rounded-full p-2 text-black hover:text-white hover:bg-gray-700 cursor-pointer">
                                <svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0801 3.23972H11.3334V1.11972C10.7266 1.05662 10.1168 1.02546 9.50674 1.02639C7.6934 1.02639 6.4534 2.13305 6.4534 4.15972V5.90639H4.40674V8.27972H6.4534V14.3597H8.90674V8.27972H10.9467L11.2534 5.90639H8.90674V4.39305C8.90674 3.69305 9.0934 3.23972 10.0801 3.23972Z" fill="currentColor" />

                                </svg>
                            </div>
                            <div class="border border-black rounded-full p-2 text-black hover:text-white hover:bg-gray-700 cursor-pointer">
                                <svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0801 3.23972H11.3334V1.11972C10.7266 1.05662 10.1168 1.02546 9.50674 1.02639C7.6934 1.02639 6.4534 2.13305 6.4534 4.15972V5.90639H4.40674V8.27972H6.4534V14.3597H8.90674V8.27972H10.9467L11.2534 5.90639H8.90674V4.39305C8.90674 3.69305 9.0934 3.23972 10.0801 3.23972Z" fill="currentColor" />

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

</div>

<div class="@container group h-full
    sm:container py-6">
    <div class="relative h-full
                grid-layout items-center                    ">

        <picture class="absolute inset-0 w-full h-full
                sm:col-start-2 sm:col-span-10                            ">
            <source srcset="/img/faq/banner-desktop.png" media="(min-width: 769px)" />
            <img src="/img/diagnostic/mobile-1.png" alt="Besoin d’aide supplémentaire ? Contactez-nous !" class="object-cover w-full h-full " loading="lazy" />
        </picture>

        <div class="absolute inset-0
            sm:col-start-2 sm:col-span-10                        bg-black/20 mix-blend-overlay        "></div>

        <section class="relative flex items-center min-h-62 md:min-h-[346px] 2xl:min-h-88 3xl:min-h-100 adjusted-marg-y-sm
            adjusted-marg-x-sm
            col-span-4 sm:col-start-2 sm:col-span-10            
            
            w-1/2        ">
            <article class="
                relative flex gap-3 w-full
                flex-col                                            ">

                <div class="flex flex-col gap-1.5
                                                        ">

                    <h2 class="h2 [&>span]:font-normal text-black h2">
                        Vous avez une question ?
                    </h2>

                    <p class="h6-base [&>span]:md:font-semibold [&>span]:md:uppercase text-black">
                        Vous n'avez pas trouvé réponse à vos questions dans notre FAQ, vous pouvez nous envoyer un message, pour tout complément d'information.
                    </p>

                </div>

                <div class="flex  items-center gap-4">
                    <a href="/contact" type="button" class="w-max  btn  btn-dark  btn-outline  btn-size-lg">
                        Nous contacter

                    </a>
                </div>
            </article>
        </section>
    </div>

</div>
<div class="my-12"></div>
<section class="adjusted-marg-y-md bg-brand-100">
    <div class="container grid-layout gap-y-6">
        <div class="col-span-4 sm:col-span-10 lg:col-start-2 lg:col-span-5 flex flex-col gap-2">
            <h3 class="h3">Recevez notre newsletter</h3>
            <p class="text-body-lg font-bold">Soyez les premiers à être informés sur les nouveautés produits, l’actualité d’État pur.</p>
        </div>
        <div class="col-span-4 sm:col-span-10 lg:col-end-12 lg:col-span-5 flex flex-col gap-2">
            <div class="flex gap-2 items-center">

                <div class="flex flex-col w-full gap-y-1">
                    <div class="input-wrapper flex flex-col relative w-full  floating-label">

                        <input type="email" name="email" id="email" class="form-input w-full peer
                required
                " placeholder="" required @input.debounce="onChange">

                        <div class="label-wrapper ">
                            <label for="email" class="flex flex-row items-center gap-2">

                                <span class="flex-grow">Email</span>

                                <div class="required text-error">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                        <path d="M8.48605 7.23022L8.81938 7.03777L11.8608 5.28179C12.0734 5.15906 12.3452 5.23189 12.468 5.44446C12.5907 5.65704 12.5179 5.92886 12.3053 6.05159L9.26383 7.80757L8.9305 8.00002L9.26383 8.19247L12.3053 9.94845C12.5179 10.0712 12.5907 10.343 12.468 10.5556C12.3452 10.7681 12.0734 10.841 11.8608 10.7183L8.81938 8.96226L8.48605 8.76981V9.15471V12.6667C8.48605 12.9121 8.28706 13.1111 8.0416 13.1111C7.79614 13.1111 7.59716 12.9121 7.59716 12.6667V9.15472V8.76982L7.26382 8.96227L4.22237 10.7183L4.32568 10.8972L4.22237 10.7183C4.0098 10.841 3.73798 10.7681 3.61525 10.5556C3.49252 10.343 3.56536 10.0712 3.77793 9.94845L6.81938 8.19247L7.15272 8.00002L6.81938 7.80757L3.77794 6.05159L3.66964 6.23916L3.77794 6.05159C3.56536 5.92886 3.49253 5.65704 3.61526 5.44446C3.73799 5.23189 4.0098 5.15906 4.22238 5.28179L7.26382 7.03776L7.59716 7.23021V6.84531V3.33335C7.59716 3.08789 7.79614 2.88891 8.0416 2.88891C8.28706 2.88891 8.48605 3.08789 8.48605 3.33335V6.84532V7.23022Z" fill="currentColor" stroke="currentColor" stroke-width="0.444444" />
                                    </svg>
                                </div>

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

                </div> <button type="button" class="shrink-0  btn  btn-dark  btn-solid  btn-size-lg">
                    Je m’incris

                </button>
            </div>
            <p class="text-body-xs text-black/72">
                NAOS France (Etat Pur) collecte les données personnelles ci-dessus afin de prendre en charge votre demande. Pour en savoir plus sur l’utilisation de vos données et sur vos droits, <a href="#" class="
         underline 
         link-xs
         link-dark-alt
        
        
    ">

                    cliquez-ici

                </a>
            </p>
        </div>
    </div>
</section>

<script type="text/javascript">
    (function() {
        (function(e, r) {
            var t = document.createElement("link");
            t.rel = "preconnect";
            t.as = "script";
            var n = document.createElement("link");
            n.rel = "dns-prefetch";
            n.as = "script";
            var i = document.createElement("script");
            i.id = "spcloader";
            i.type = "text/javascript";
            i["async"] = true;
            i.charset = "utf-8";
            var o = "https://sdk.privacy-center.org/" + e + "/loader.js?target_type=notice&target=" + r;
            if (window.didomiConfig && window.didomiConfig.user) {
                var a = window.didomiConfig.user;
                var c = a.country;
                var d = a.region;
                if (c) {
                    o = o + "&country=" + c;
                    if (d) {
                        o = o + "&region=" + d
                    }
                }
            }
            t.href = "https://sdk.privacy-center.org/";
            n.href = "https://sdk.privacy-center.org/";
            i.src = o;
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(t, s);
            s.parentNode.insertBefore(n, s);
            s.parentNode.insertBefore(i, s)
        })("7f735bc7-c176-4274-add0-c9e97af596f3", "9ir6W9HT")
    })();
</script>
 
{# src/components/organisms/feedback-block/feedback-block.twig #}

{% render "@hero--faq" %}

<div class="px-6 sm:px-12 lg:px-20 flex flex-col-reverse lg:flex-row w-full gap-x-20 adjusted-marg-y-md">
    <div class="w-full lg:w-1/5">
        {% render "@faq-menu" with {
            currentPage: _target.meta.currentPage is defined ? _target.meta.currentPage : "Questions les plus fréquentes"
        } %}
    </div>
    <div class="w-full lg:w-4/5 flex flex-col">
        <h1 class="h4 mb-12">Je n'ai pas reçu d'e-mail de confirmation, que dois-je faire ? </h1>
        <div class="flex flex-col gap-y-4">
            <span>Dans un premier temps, nous vous invitons à <strong>vérifier vos courriers indésirables</strong> parmi lesquels peut se trouver l'email de validation de commande.</span>
            <span>Si ce n'est pas le cas, nous vous conseillons dans un second temps de vérifier si un prélèvement bancaire a été effectué. Il est possible que le paiement n'ait pas abouti et que votre commande n'ait pas été validée.</span>
            <span>Si vous avez bien été prélevé, veuillez <a href="#" class="underline">contacter notre Service Client.</a></span>
        </div>

        <div class="bg-gray-100 mt-12 p-6 lg:w-max mb-12 lg:mb-0">
            <div class="flex items-center flex-col lg:flex-row gap-4">
                <h2 class="text-body-lg font-bold text-black">Cet article vous a-t-il été utile ?</h2>
                <div class="flex flex-col sm:flex-row items-center">
                    <div class="flex items-center">
                        <div class="flex items-center gap-1">
                            {% for i in 1..5 %}
                                <button class="focus:outline-none">
                                    {% render "@icons-heroicons--star-outline" with { size: '24', iconClass: 'transition-colors duration-200 hover:fill-black', fill: 'hover:black' } %}
                                </button>
                            {% endfor %}
                        </div>
                        <span class="ml-4 text-body-lg font-bold text-black">Note totale 4.5</span>
                        <span class="hidden sm:flex text-body-lg font-bold text-black px-3">|</span>
                    </div>
                    <div class="flex items-center mt-4 sm:mt-0">
                        <div class="flex gap-2">
                            {% for i in 1..4 %}
                                <div class="border border-black rounded-full p-2 text-black hover:text-white hover:bg-gray-700 cursor-pointer">
                                    {% render "@icons-social--facebook" with { size: '24' } %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{% render "@banner" with {
    layout: {
        isFullWidth: '10col',
        alignment: 'left',
        textSize: 'mid',
        portraitMode: false,
        hasNaosBorder: false
    },
    background: {
        type: 'image',
        desktop: '/img/faq/banner-desktop.png',
        mobile: '/img/diagnostic/mobile-1.png',
        alt: 'Besoin d’aide supplémentaire ? Contactez-nous !',
        overlay: 'bg-black/20'
    },
    content: {
        title: {
            text: 'Vous avez une question ?',
            class: 'text-black h2'
        },
        subtitle: {
            text: "Vous n'avez pas trouvé réponse à vos questions dans notre FAQ, vous pouvez nous envoyer un message, pour tout complément d'information.",
            class: 'text-black'
        },
        link: false,
    },
    cta: {
        primary: {
            label: 'Nous contacter',
            color: 'dark',
            type: 'outline',
            link: '/contact'
        }
    }
} %}
<div class="my-12"></div>
{% render "@newsletter" %}
 
{
  "faqBlocks": [
    {
      "mainTitle": "Questions les plus fréquentes",
      "icon": {
        "name": "heroicons--question-mark-circle-outline",
        "size": "30"
      },
      "accordions": [
        {
          "title": "Comment créer mon compte Etat Pur ?",
          "content": "Contenu à remplir...",
          "link": {
            "url": "/create-account",
            "text": "En savoir plus"
          }
        },
        {
          "title": "Proposez-vous des échantillons ?",
          "content": "Contenu à remplir...",
          "link": {
            "url": "/faq/frequentes/echantillons",
            "text": "En savoir plus"
          }
        },
        {
          "title": "Puis-je modifier ma commande une fois passée ?",
          "content": "Contenu à remplir...",
          "link": {
            "url": "/faq/frequentes/modifier-commande",
            "text": "En savoir plus"
          }
        },
        {
          "title": "Où trouver vos produits ?",
          "content": "Contenu à remplir...",
          "link": {
            "url": "/store-locator",
            "text": "En savoir plus"
          }
        },
        {
          "title": "Quels sont les moyens de paiement acceptés ?",
          "content": "Contenu à remplir...",
          "link": {
            "url": "/faq/paiement/moyens-paiement",
            "text": "En savoir plus"
          }
        },
        {
          "title": "Comment payer ma commande ?",
          "content": "Contenu à remplir...",
          "link": {
            "url": "/faq/paiement/payer-commande",
            "text": "En savoir plus"
          }
        },
        {
          "title": "La TVA est-elle comprise dans le prix ?",
          "content": "Contenu à remplir...",
          "link": {
            "url": "/faq/paiement/tva-prix",
            "text": "En savoir plus"
          }
        },
        {
          "title": "Mon paiement a été refusé, que dois-je faire ?",
          "content": "Contenu à remplir...",
          "link": {
            "url": "/payment-help",
            "text": "En savoir plus"
          }
        }
      ]
    }
  ]
}

No notes defined.