Detail order

<div x-data class="fixed right-0 z-40 inset-y-0 lg:inset-y-0 max-w-full">
    <div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'returnProduct')?.open" class="fixed inset-0 w-full h-full bg-black/40"></div>
    <div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="relative bg-white overflow-hidden h-full lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'returnProduct')?.open" @click.outside="$store.asideBlocs.closeAside('returnProduct')">
        <div class="font-medium h4 flex justify-between items-center mb-4">
            <span></span>
            <button type="button" @click="$store.asideBlocs.closeAside('returnProduct')" aria-label="Label text" class=" btn  btn-neutral  btn-outline  btn-size-sm btn-only-icon">
                <svg class=" 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="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg>

            </button>
        </div>
        <div class="overflow-auto flex-1">
            <section class="flex flex-col gap-8">
                <h2 class="h4">Effectuer un retour</h2>
                <div class="flex flex-col gap-2">
                    <p class="text-body-lg font-bold">Vous souhaitez effectuer un retour hors délai ?</p>
                    <div class="flex flex-col gap-5 text-body-base">
                        <p>Le retour de ces produits n’est plus disponible car le le délai de 3 jours est dépassé.</p>
                        <p>En cas de besoin, nous vous invitons à contacter le service client :</p>
                        <a class="text-click-base underline" href="tel:08O9 545 900">08O9 545 900</a>
                    </div>
                </div>

                <div>
                    <a href="#" type="button" class="ms-1 justify-center w-fit  btn  btn-dark  btn-outline  btn-size-sm">
                        J’ai compris

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

        </div>
    </div>
</div>
<div class="flex flex-col justify-center gap-y-8">
    <div class="flex flex-col gap-6">
        <div class="flex flex-col gap-2">
            <div class="flex items-center gap-3">
                <h1 class="h4">Commande N°12000000127</h1>
                <span class="badge badge-corpo">
                    Livré
                </span>
            </div>

            <p class="text-body-sm">
                Date de commande : 07/04/2025
            </p>

            <div class="flex flex-wrap gap-2">
                <button class="btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">Recommander</button>
                <button x-data x-init="$store.asideBlocs.addAside('returnProduct')" @click="$store.asideBlocs.toggleAside('returnProduct')" class="btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">Effectuer un retour
                </button>
                <a href="#" class="btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">Télécharger la
                    facture</a>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
            <div class="flex flex-col flex-1 gap-y-2 ">
                <h3 class="text-brand-700 font-bold text-body-base">Adresse de facturation</h3>
                <div class="text-primary text-body-sm">
                    <address class="not-italic">
                        <span class="font-bold">Marie-Noëlle Vincent</span><br>
                        2 rue du Conseil des Quinze<br>
                        Strasbourg, 67000<br>
                        France<br>
                        T: <a href="tel:0123456789">0123456789</a>
                    </address>
                </div>
            </div>

            <div class="flex flex-col flex-1 gap-y-2 ">
                <h3 class="text-brand-700 font-bold text-body-base">Adresse de livraison</h3>
                <div class="text-primary text-body-sm">
                    <address class="not-italic">
                        <span class="font-bold">Marie-Noëlle Vincent</span><br>
                        2 rue du Conseil des Quinze<br>
                        Strasbourg, 67000<br>
                        France<br>
                        T: <a href="tel:0123456789">0123456789</a>
                    </address>
                </div>
            </div>

            <div class="flex flex-col flex-1 gap-y-2">
                <h3 class="text-body-base text-brand-700 font-bold">Mode de livraison</h3>
                <div class="text-body-sm text-primary">
                    <p>Collisimo</p>
                    <button class="btn btn-outline btn-size-sm btn-dark whitespace-nowrap !py-1 !px-2">Suivre la
                        commande
                    </button>
                </div>
            </div>

            <div class="flex flex-col flex-1 gap-y-2">
                <h3 class="text-body-base text-brand-700 font-bold">Mode de paiement</h3>
                <div class="text-body-sm text-primary">
                    <p>MasterCard</p>
                </div>
            </div>
        </div>

        <div>
            <h2 class="h6 text-black/72 min-h-10 border-b-4 border-brand-500">Détail de votre commande</h2>

            <table class="w-full text-body-sm">
                <thead>
                    <tr class="font-bold min-h-14 border-b border-brand-500">
                        <th class="p-2 text-start md:w-1/2 2xl:w-1/4">Produit</th>
                        <th class="p-2 text-end w-1/4 hidden md:table-cell">Prix</th>
                        <th class="p-2 text-center w-auto hidden md:table-cell">Qté</th>
                        <th class="p-2 text-end w-1">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
                        <td class="p-2 text-start">
                            <div class="flex items-center gap-3">
                                <div class="flex-shrink-0 overflow-hidden">
                                    <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
                                </div>
                                <div class="text-body-sm">
                                    <h4 class="font-bold">La mousse nettoyante</h4>
                                    <p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
                                </div>
                            </div>
                        </td>
                        <td class="p-2 text-end hidden md:table-cell">
                            <div class="text-body-xs">
                                <div class="font-bold ">13,41€</div>
                                <div class="text-black/64 line-through">14,90€</div>
                            </div>
                        </td>
                        <td class="p-2 text-center hidden md:table-cell">
                            <span class="text-body-xs">1</span>
                        </td>
                        <td class="p-2 text-end">
                            <span class="text-body-xs font-bold whitespace-nowrap">13,41 €</span>
                        </td>
                    </tr>
                    <tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
                        <td class="p-2 text-start">
                            <div class="flex items-center gap-3">
                                <div class="flex-shrink-0 overflow-hidden">
                                    <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
                                </div>
                                <div class="text-body-sm">
                                    <h4 class="font-bold">La mousse nettoyante</h4>
                                    <p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
                                </div>
                            </div>
                        </td>
                        <td class="p-2 text-end hidden md:table-cell">
                            <div class="text-body-xs">
                                <div class="font-bold ">13,41€</div>
                            </div>
                        </td>
                        <td class="p-2 text-center hidden md:table-cell">
                            <span class="text-body-xs">1</span>
                        </td>
                        <td class="p-2 text-end">
                            <span class="text-body-xs font-bold whitespace-nowrap">13,41 €</span>
                        </td>
                    </tr>
                    <tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
                        <td class="p-2 text-start">
                            <div class="flex items-center gap-3">
                                <div class="flex-shrink-0 overflow-hidden">
                                    <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
                                </div>
                                <div class="text-body-sm">
                                    <h4 class="font-bold">La mousse nettoyante</h4>
                                    <p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
                                </div>
                            </div>
                        </td>
                        <td class="p-2 text-end hidden md:table-cell">
                            <div class="text-body-xs">
                                <div class="font-bold ">13,41€</div>
                            </div>
                        </td>
                        <td class="p-2 text-center hidden md:table-cell">
                            <span class="text-body-xs">1</span>
                        </td>
                        <td class="p-2 text-end">
                            <span class="text-body-xs font-bold whitespace-nowrap">13,41 €</span>
                        </td>
                    </tr>
                    <tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50">
                        <td class="p-2 text-start">
                            <div class="flex items-center gap-3">
                                <div class="flex-shrink-0 overflow-hidden">
                                    <img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
                                </div>
                                <div class="text-body-sm">
                                    <h4 class="font-bold">La mousse nettoyante</h4>
                                    <p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
                                </div>
                            </div>
                        </td>
                        <td class="p-2 text-end hidden md:table-cell">
                            <div class="text-body-xs">
                                <div class="font-bold ">13,41€</div>
                            </div>
                        </td>
                        <td class="p-2 text-center hidden md:table-cell">
                            <span class="text-body-xs">1</span>
                        </td>
                        <td class="p-2 text-end">
                            <span class="text-body-xs font-bold whitespace-nowrap">13,41 €</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="grid grid-cols-4 sm:grid-cols-9 gap-x-6 lg:gap-x-8 xl:gap-x-6 2xl:gap-x-8 3xl:gap-x-10">
                <div class="col-span-5"></div>
                <div class="col-span-4 pl-2 pr-4 pt-1 pb-2 border-y-2 border-black">
                    <div class="w-full inline-flex gap-2 text-body-sm">
                        <div class="flex-1">
                            Sous-total
                        </div>
                        <div class="text-right">
                            74,11€
                        </div>
                    </div>

                    <div class="w-full inline-flex gap-2 text-body-sm">
                        <div class="flex-1 inline-flex flex-col">
                            <div>
                                Frais de livraison
                            </div>
                            <div class="md:hidden text-black/56 text-body-xs">
                                Livraison gratuite à partir de 50€ d’achat
                            </div>
                        </div>
                        <div class="text-right">
                            0,00€
                        </div>
                    </div>

                    <div class="w-full inline-flex gap-2 text-body-sm">
                        <div class="flex-1 inline-flex flex-col">
                            <div>
                                Code promo
                            </div>
                            <div class="text-black/56 text-body-xs">
                                Riche
                            </div>
                        </div>
                        <div class="text-right">
                            Offert
                        </div>
                    </div>

                    <div class="w-full inline-flex gap-2 text-body-sm font-bold">
                        <div class="flex-1 inline-flex flex-col">
                            <div class="uppercase">
                                total
                            </div>
                            <div class="md:hidden text-black/56 text-body-xs font-normal">
                                Taxes de 00,00 € incluses
                            </div>
                        </div>
                        <div class="text-right">
                            74,11€
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="flex justify-between items-center">
        <button type="button" class=" btn  btn-dark  btn-simple  btn-size-sm btn-icons">
            <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M10.5 13L5.5 8L10.5 3" stroke="currentColor" stroke-width="1.5" fill="none" />

            </svg> Retour

        </button>

    </div>
</div>