{{--
    Bandeau de consentement aux cookies (recommandations CNIL) :
    refuser aussi simplement qu'accepter, choix par finalité, consentement conservé 6 mois,
    retrait possible à tout moment via « Gérer les cookies » en pied de page.
--}}
<div data-cookie-banner hidden role="region" aria-label="Gestion des cookies"
    class="fixed inset-x-0 bottom-0 z-[70] border-t border-ivoire/10 bg-encre text-ivoire shadow-[0_-24px_60px_-30px_rgb(21_17_15/0.6)]">
    <div class="mx-auto flex max-w-[1440px] flex-col gap-6 px-5 py-6 sm:px-10 lg:flex-row lg:items-center lg:justify-between lg:gap-12 lg:px-14 lg:py-7">
        <div class="max-w-3xl">
            <p class="kicker text-laiton">Vos préférences</p>
            <p class="mt-3 text-sm leading-relaxed text-ivoire/80">
                Nous utilisons des cookies indispensables au fonctionnement du site (panier, connexion, sécurité).
                Avec votre accord, nous affichons aussi des contenus de services tiers, comme la carte Google Maps, qui peuvent déposer leurs propres cookies.
                <a href="{{ url('politique-de-confidentialite') }}" class="text-ivoire underline underline-offset-4 hover:text-laiton">En savoir plus</a>
            </p>
        </div>
        <div class="flex shrink-0 flex-wrap items-center gap-3">
            <button type="button" data-cookie-customize class="kicker px-3 py-4 text-ivoire/70 underline-offset-4 transition-colors hover:text-ivoire hover:underline">Personnaliser</button>
            <button type="button" data-cookie-reject class="bouton bouton-clair min-w-40">Tout refuser</button>
            <button type="button" data-cookie-accept class="bouton min-w-40 border-ivoire bg-ivoire text-encre hover:border-laiton hover:bg-laiton">Tout accepter</button>
        </div>
    </div>
</div>

<dialog data-cookie-dialog aria-labelledby="cookie-dialog-title"
    class="m-auto w-[min(640px,calc(100%-2rem))] max-h-[calc(100%-2rem)] overflow-y-auto bg-ivoire p-0 text-encre backdrop:bg-encre/70 backdrop:backdrop-blur-sm">
    <form method="dialog" class="p-8 sm:p-12">
        <div class="flex items-start justify-between gap-6">
            <div>
                <p class="kicker text-rouge">Cookies</p>
                <h2 id="cookie-dialog-title" class="mt-3 font-serif text-3xl leading-tight">Gérer mes préférences</h2>
            </div>
            <button type="button" data-cookie-close aria-label="Fermer" class="text-2xl leading-none text-gris hover:text-encre">×</button>
        </div>
        <p class="mt-6 text-sm leading-relaxed text-gris">Choisissez les cookies que vous acceptez. Vous pouvez modifier votre choix à tout moment depuis le lien « Gérer les cookies » en bas de chaque page.</p>

        <ul class="mt-8 divide-y divide-filet border-y border-filet">
            <li class="flex items-start justify-between gap-6 py-6">
                <div>
                    <p class="font-serif text-xl">Cookies nécessaires</p>
                    <p class="mt-2 text-sm leading-relaxed text-gris">Indispensables au site : session, panier, connexion à votre compte, sécurité des formulaires et mémorisation de vos choix. Ils ne peuvent pas être désactivés.</p>
                </div>
                <span class="kicker mt-1 shrink-0 text-[0.6rem] text-gris">Toujours actifs</span>
            </li>
            <li class="flex items-start justify-between gap-6 py-6">
                <div>
                    <label for="cookie-external" class="font-serif text-xl">Contenus externes</label>
                    <p class="mt-2 text-sm leading-relaxed text-gris">Carte Google Maps du plan d'accès. Google peut déposer des cookies et collecter des données de navigation lorsque la carte est affichée.</p>
                </div>
                <span class="relative mt-1 inline-flex shrink-0">
                    <input id="cookie-external" type="checkbox" data-cookie-category="external" class="peer sr-only">
                    <span aria-hidden="true" class="h-6 w-11 rounded-full bg-filet transition-colors peer-checked:bg-rouge peer-focus-visible:outline peer-focus-visible:outline-laiton"></span>
                    <span aria-hidden="true" class="absolute top-1 left-1 size-4 rounded-full bg-ivoire transition-transform peer-checked:translate-x-5"></span>
                </span>
            </li>
        </ul>

        <div class="mt-10 flex flex-wrap items-center justify-end gap-3">
            <button type="button" data-cookie-reject class="bouton bouton-contour">Tout refuser</button>
            <button type="button" data-cookie-save class="bouton bouton-plein">Enregistrer mes choix</button>
        </div>
    </form>
</dialog>