Faq Category

<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="faq-block mb-8 w-full lg:w-4/5">
        <div class="h6 flex items-center gap-2 border-b-4 border-brand-500 pb-3">
            <svg class="text-brand-500 shrink-0" width="30" height="30" 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
        </div>
        <div class="">

            <div x-data="{ expanded: false, highlightOnOpen: true }" class="border-b accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
                <div class="">
                    <button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full font-bold py-3 text-left" :aria-expanded="expanded" aria-controls="accordion-content-0">
                        <span class="flex flex-wrap gap-2  transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                            Comment créer mon compte Etat Pur ?
                        </span>
                        <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                            <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                            </svg> </span>
                    </button>
                </div>
                <div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="text-body-sm">
                    <div class="pt-2 pb-4">
                        <div class="pb-3">
                            Contenu à remplir...
                        </div>
                        <a href="/create-account" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>

            <div x-data="{ expanded: false, highlightOnOpen: true }" class="border-b accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
                <div class="">
                    <button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full font-bold py-3 text-left" :aria-expanded="expanded" aria-controls="accordion-content-0">
                        <span class="flex flex-wrap gap-2  transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                            Proposez-vous des échantillons ?
                        </span>
                        <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                            <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                            </svg> </span>
                    </button>
                </div>
                <div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="text-body-sm">
                    <div class="pt-2 pb-4">
                        <div class="pb-3">
                            Contenu à remplir...
                        </div>
                        <a href="/faq/frequentes/echantillons" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>

            <div x-data="{ expanded: false, highlightOnOpen: true }" class="border-b accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
                <div class="">
                    <button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full font-bold py-3 text-left" :aria-expanded="expanded" aria-controls="accordion-content-0">
                        <span class="flex flex-wrap gap-2  transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                            Puis-je modifier ma commande une fois passée ?
                        </span>
                        <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                            <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                            </svg> </span>
                    </button>
                </div>
                <div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="text-body-sm">
                    <div class="pt-2 pb-4">
                        <div class="pb-3">
                            Contenu à remplir...
                        </div>
                        <a href="/faq/frequentes/modifier-commande" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>

            <div x-data="{ expanded: false, highlightOnOpen: true }" class="border-b accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
                <div class="">
                    <button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full font-bold py-3 text-left" :aria-expanded="expanded" aria-controls="accordion-content-0">
                        <span class="flex flex-wrap gap-2  transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                            Où trouver vos produits ?
                        </span>
                        <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                            <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                            </svg> </span>
                    </button>
                </div>
                <div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="text-body-sm">
                    <div class="pt-2 pb-4">
                        <div class="pb-3">
                            Contenu à remplir...
                        </div>
                        <a href="/store-locator" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>

            <div x-data="{ expanded: false, highlightOnOpen: true }" class="border-b accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
                <div class="">
                    <button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full font-bold py-3 text-left" :aria-expanded="expanded" aria-controls="accordion-content-0">
                        <span class="flex flex-wrap gap-2  transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                            Quels sont les moyens de paiement acceptés ?
                        </span>
                        <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                            <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                            </svg> </span>
                    </button>
                </div>
                <div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="text-body-sm">
                    <div class="pt-2 pb-4">
                        <div class="pb-3">
                            Contenu à remplir...
                        </div>
                        <a href="/faq/paiement/moyens-paiement" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>

            <div x-data="{ expanded: false, highlightOnOpen: true }" class="border-b accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
                <div class="">
                    <button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full font-bold py-3 text-left" :aria-expanded="expanded" aria-controls="accordion-content-0">
                        <span class="flex flex-wrap gap-2  transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                            Comment payer ma commande ?
                        </span>
                        <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                            <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                            </svg> </span>
                    </button>
                </div>
                <div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="text-body-sm">
                    <div class="pt-2 pb-4">
                        <div class="pb-3">
                            Contenu à remplir...
                        </div>
                        <a href="/faq/paiement/payer-commande" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>

            <div x-data="{ expanded: false, highlightOnOpen: true }" class="border-b accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
                <div class="">
                    <button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full font-bold py-3 text-left" :aria-expanded="expanded" aria-controls="accordion-content-0">
                        <span class="flex flex-wrap gap-2  transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                            La TVA est-elle comprise dans le prix ?
                        </span>
                        <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                            <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                            </svg> </span>
                    </button>
                </div>
                <div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="text-body-sm">
                    <div class="pt-2 pb-4">
                        <div class="pb-3">
                            Contenu à remplir...
                        </div>
                        <a href="/faq/paiement/tva-prix" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>

            <div x-data="{ expanded: false, highlightOnOpen: true }" class="border-b accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
                <div class="">
                    <button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full font-bold py-3 text-left" :aria-expanded="expanded" aria-controls="accordion-content-0">
                        <span class="flex flex-wrap gap-2  transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
                            Mon paiement a été refusé, que dois-je faire ?
                        </span>
                        <span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
                            <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                            </svg> </span>
                    </button>
                </div>
                <div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="text-body-sm">
                    <div class="pt-2 pb-4">
                        <div class="pb-3">
                            Contenu à remplir...
                        </div>
                        <a href="/payment-help" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </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>