{{#
	@name Footer
	@desc The site's footer rendered on each page.
#}}

<!-- /layout/_footer.antlers.html -->
<footer class="mb-6 sm:mb-8 full-width-container">
    <div class="flex flex-wrap items-center justify-between pt-4 border-t sm:border-none border-t-black gap-x-16 gap-y-3">
        {{ nav:footer }}
            {{ if depth === 1 }}
                {{ if children }}
                    <div class="flex flex-wrap gap-x-6 gap-y-3">
                        {{ children}}
                            <a href="{{ permalink }}" class="text-sm font-medium select-none motion-safe:transition focus:outline-none hover:line-through focus-visible:rounded focus-visible:ring-1 focus-visible:ring-black">{{ title }}</a>
                        {{ /children }}
                    </div>
                {{ /if }}
            {{ /if }}
        {{ /nav:footer}}
    </div>
</footer>
<style>
    .group:hover .group-hover\:line-through {
        text-decoration-line: underline;
    }
    .hover\:line-through:hover {
        text-decoration-line: underline;
    }
    @media (min-width: 1280px) {
        .xl\:text-7xl {
            font-size: 3.5rem;
        }
        .xl\:text-5xl {
            font-size: 2.5rem;
        }
    }

    /* Styles généraux pour le menu principal */
    .main-nav {
        list-style: none; /* Supprime les puces */
        padding: 0;
        margin: 0;
        /* Styles flexbox de votre code Antlers */
        display: flex;
        align-items: baseline;
        gap-x: 1.5rem; /* Equivalent de gap-x-6 (1.5rem = 24px) */
    }

    .main-nav > li {
        position: relative; /* Important pour positionner le sous-menu par rapport au parent */
        /* Assurez-vous que les éléments li ne sont pas "flex-grow" pour ne pas prendre toute la place */
    }

    .main-nav a {
        /* Vos styles d'ancres existants */
        text-decoration: none;
        white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
    }


    /* Styles pour les sous-menus */
    .sub-menu {
        list-style: none; /* Supprime les puces */
        padding: 0;
        margin: 0;
        position: absolute; /* Positionne le sous-menu par rapport au parent li */
        top: 100%; /* Place le sous-menu juste en dessous du parent */
        left: 0; /* Aligne le sous-menu avec le bord gauche du parent */
        background-color: #ffffff; /* Couleur de fond du sous-menu */
        border: 1px solid #e2e8f0; /* Bordure légère */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Ombre douce */
        min-width: 160px; /* Largeur minimale pour les sous-menus */
        z-index: 1000; /* Assure que le menu apparaît au-dessus des autres éléments */

        /* Masquer le sous-menu par défaut */
        display: none; /* Cache le menu complètement */
        opacity: 0;    /* Pour une transition plus douce */
        visibility: hidden; /* Cache aussi pour l'accessibilité */
        transition: opacity 0.3s ease, visibility 0.3s ease; /* Transition pour l'apparition */
    }

    /* Styles pour les éléments de sous-menu */
    .sub-menu li {
        padding: 8px 15px; /* Espacement interne des éléments du sous-menu */
        border-bottom: 1px solid #f0f0f0; /* Ligne de séparation */
    }

    .sub-menu li:last-child {
        border-bottom: none; /* Pas de bordure sur le dernier élément */
    }

    .sub-menu a {
        color: #333; /* Couleur du texte du sous-menu */
        display: block; /* Pour que le lien prenne toute la largeur de l'élément li */
        padding: 5px 0; /* Un peu de padding à l'intérieur du lien si besoin */
    }

    .sub-menu a:hover {
        color: #cb3e5e; /* Couleur au survol des liens du sous-menu */
        text-decoration: underline; /* Souligner au survol */
    }

    /* Afficher le sous-menu au survol de l'élément parent */
    .main-nav > li:hover > .sub-menu {
        display: block; /* Rend le menu visible */
        opacity: 1;    /* Rend le menu complètement opaque */
        visibility: visible; /* Rend le menu visible pour l'accessibilité */
    }

    /* Styles pour les sous-sous-menus (si vous avez plus de 2 niveaux) */
    .sub-menu .sub-sub-menu { /* Cibler les .sub-sub-menu à l'intérieur d'un .sub-menu */
        top: 0; /* Aligne le haut du sous-sous-menu avec le haut de son parent */
        left: 100%; /* Place le sous-sous-menu à droite de son parent */
        margin-left: 10px; /* Un petit espacement pour ne pas coller */
        /* Appliquez les mêmes propriétés de masquage/affichage au survol pour .sub-menu li:hover > .sub-sub-menu */
    }

    .sub-menu li:hover > .sub-sub-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }
</style>
<!-- End: /layout/_footer.antlers.html -->