Faq Grid

<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="container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 adjusted-marg-t-md">
    <div class="faq-block mb-8">
        <div class="h6 flex items-center gap-2 border-b-4 border-brand-500 pb-4">
            <svg class="text-brand-500 shrink-0" width="24" height="24" 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>
    </div>
    <div class="faq-block mb-8">
        <div class="h6 flex items-center gap-2 border-b-4 border-brand-500 pb-4">
            <svg class="text-brand-500 shrink-0" width="24" height="24" 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
        </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 effectuer une 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/commande/effectuer-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' : ''">
                            Comment utiliser mon code promotionnel ?
                        </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="/promo-code-guide" 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' : ''">
                            Compte savoir si ma commande a bien été prise en compte ?
                        </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/commande/confirmation-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' : ''">
                            Je n’ai pas reçu d’e-mail de confirmation, 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="/faq/commande/email-confirmation" 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 suivre 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/commande/suivre-commande" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>
            <div class="text-right mt-4">
                <a href="/components/preview/faq-category" class="link-dark link-medium underline">
                    Voir toutes
                </a>
            </div>
        </div>
    </div>
    <div class="faq-block mb-8">
        <div class="h6 flex items-center gap-2 border-b-4 border-brand-500 pb-4">
            <svg class="text-brand-500 shrink-0" width="24" height="24" 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
        </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' : ''">
                            Quels sont les modes de livraison proposé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/livraison/modes-livraison" 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 bénéficier de la livraison gratuite ?
                        </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="/free-shipping" 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' : ''">
                            Est-ce que je peux me faire livrer à un autre endroit ?
                        </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/livraison/autre-endroit" 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' : ''">
                            Dans quels pays livrez-vous ?
                        </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/livraison/pays-livraison" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="faq-block mb-8">
        <div class="h6 flex items-center gap-2 border-b-4 border-brand-500 pb-4">
            <svg class="text-brand-500 shrink-0" width="24" height="24" 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
        </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' : ''">
                            Quel est le délai pour effectuer un retour ?
                        </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/retours/delai-retour" 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' : ''">
                            Quelles sont les conditions de retour ?
                        </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/retours/conditions-retour" 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 effectuer un retour ?
                        </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="/return-guide" 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' : ''">
                            Quelles sont les modalités de remboursement ?
                        </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/retours/modalites-remboursement" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="faq-block mb-8">
        <div class="h6 flex items-center gap-2 border-b-4 border-brand-500 pb-4">
            <svg class="text-brand-500 shrink-0" width="24" height="24" 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
        </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' : ''">
                            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 class="faq-block mb-8">
        <div class="h6 flex items-center gap-2 border-b-4 border-brand-500 pb-4">
            <svg class="text-brand-500 shrink-0" width="24" height="24" 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
        </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' : ''">
                            Qu’est-ce que le 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="/faq/compte/compte-etat-pur" 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 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' : ''">
                            Comment modifier mon adresse email ?
                        </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/compte/modifier-email" 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 modifier mon mot de passe ?
                        </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/compte/modifier-mot-de-passe" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="faq-block mb-8">
        <div class="h6 flex items-center gap-2 border-b-4 border-brand-500 pb-4">
            <svg class="text-brand-500 shrink-0" width="24" height="24" 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é
        </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 adhérer au programme de fidélité ?
                        </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="/loyalty-program" 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 avantages du programme de fidélité ?
                        </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/fidelite/avantages-fidelite" 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 consulter mon solde de points ?
                        </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/fidelite/solde-points" class="link-dark link-medium underline">
                            En savoir plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="faq-block mb-8">
        <div class="h6 flex items-center gap-2 border-b-4 border-brand-500 pb-4">
            <svg class="text-brand-500 shrink-0" width="24" height="24" 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
        </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' : ''">
                            J’ai une question concernant ma commande ou un produit, comment vous contacter ?
                        </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="/contact" 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' : ''">
                            Je suis un professionnel, comment vous contacter ?
                        </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="/pro-contact" 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>