/* ==========================================================
   LE NAZAIRE — BARRE D'ACTIONS MOBILE
   ========================================================== */

.le-nazaire-mobile-actions {
        display: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

        /*
         * Le composant est fixe.
         * On réserve donc de l'espace en bas du footer
         * afin que les mentions légales restent accessibles.
         */
        body.le-nazaire-has-mobile-actions {
                padding-bottom: 0 !important;
        }


        .le-nazaire-footer__inner {
                padding-bottom:
                        calc(
                                72px
                                + env(safe-area-inset-bottom, 0px)
                        ) !important;
        }


        .le-nazaire-mobile-actions {
                display: block;

                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;

                z-index: 90;

                margin: 0;

                padding:
                        0
                        env(safe-area-inset-right, 0px)
                        env(safe-area-inset-bottom, 0px)
                        env(safe-area-inset-left, 0px);

                background: #F8F5EF;

                border-top: 0;

                box-shadow:
                        0 -4px 16px
                        rgba(
                                23,
                                37,
                                43,
                                0.09
                        );
        }


        .le-nazaire-mobile-actions,
        .le-nazaire-mobile-actions *,
        .le-nazaire-mobile-actions *::before,
        .le-nazaire-mobile-actions *::after {
                box-sizing: border-box;
        }


        .le-nazaire-mobile-actions__inner {
                display: grid;

                grid-template-columns:
                        minmax(0, 35fr)
                        minmax(0, 65fr);

                gap: 0;

                width: 100%;
                max-width: 680px;

                margin: 0 auto;
        }


        .le-nazaire-mobile-actions__link {
                display: inline-flex;
                align-items: center;
                justify-content: center;

                min-width: 0;
                min-height: 50px;

                margin: 0;
                padding: 10px 11px;

                font-size: 14.5px;
                font-weight: 700;
                line-height: 1.15;
                text-align: center;
                white-space: nowrap;

                text-decoration: none;

                transition:
                        color 0.15s ease,
                        background-color 0.15s ease,
                        border-color 0.15s ease;
        }


        /* ------------------------------------------------------
           ITINÉRAIRE
           ------------------------------------------------------ */

        .le-nazaire-mobile-actions__link--directions {
                gap: 6px;

                color:
                        var(
                                --nazaire-blue,
                                #055A79
                        );

                background: #FFFFFF;

                border:
                        1px solid
                        rgba(
                                5,
                                90,
                                121,
                                0.45
                        );

                border-right: 0;

                border-radius:
                        var(--nazaire-button-radius, 4px)
                        0
                        0
                        var(--nazaire-button-radius, 4px);
        }


        .le-nazaire-mobile-actions__link--directions:hover,
        .le-nazaire-mobile-actions__link--directions:focus-visible {
                color: #FFFFFF;

                background:
                        var(
                                --nazaire-blue,
                                #055A79
                        );

                border-color:
                        var(
                                --nazaire-blue,
                                #055A79
                        );
        }


        .le-nazaire-mobile-actions__icon {
                flex: 0 0 auto;

                width: 18px;
                height: 18px;

                fill: currentColor;
        }


        /* ------------------------------------------------------
           RÉSERVATION
           ------------------------------------------------------ */

        .le-nazaire-mobile-actions__link--booking {
                color: #FFFFFF;

                background:
                        var(
                                --nazaire-blue,
                                #055A79
                        );

                border:
                        1px solid
                        var(
                                --nazaire-blue,
                                #055A79
                        );

                border-radius:
                        0
                        var(--nazaire-button-radius, 4px)
                        var(--nazaire-button-radius, 4px)
                        0;
        }


        .le-nazaire-mobile-actions__link--booking:hover,
        .le-nazaire-mobile-actions__link--booking:focus-visible {
                color: #FFFFFF;

                background:
                        var(
                                --nazaire-terracotta,
                                #AB5A4F
                        );

                border-color:
                        var(
                                --nazaire-terracotta,
                                #AB5A4F
                        );
        }


        /*
         * Sécurité si l'itinéraire venait à manquer :
         * Réserver occupe toute la largeur avec ses quatre
         * coins correctement arrondis.
         */
        .le-nazaire-mobile-actions--booking-only
        .le-nazaire-mobile-actions__inner {
                grid-template-columns: 1fr;
        }


        .le-nazaire-mobile-actions--booking-only
        .le-nazaire-mobile-actions__link--booking {
                border-radius:
                        var(--nazaire-button-radius, 4px);
        }


        /* ------------------------------------------------------
           ACCESSIBILITÉ
           ------------------------------------------------------ */

        .le-nazaire-mobile-actions__link:focus-visible {
                outline:
                        3px solid
                        var(
                                --nazaire-terracotta,
                                #AB5A4F
                        );

                outline-offset: 2px;
        }
}


/* ==========================================================
   TRÈS PETITS ÉCRANS
   ========================================================== */

@media (max-width: 359px) {

        .le-nazaire-mobile-actions {
                padding-left: 6px;
                padding-right: 6px;
        }


        .le-nazaire-mobile-actions__link {
                padding-left: 7px;
                padding-right: 7px;

                font-size: 13.5px;
        }


        .le-nazaire-mobile-actions__icon {
                width: 17px;
                height: 17px;
        }
}


/* ==========================================================
   IMPRESSION
   ========================================================== */

@media print {

        .le-nazaire-mobile-actions {
                display: none !important;
        }


        body.le-nazaire-has-mobile-actions {
                padding-bottom: 0 !important;
        }
}

/* ==========================================================
   LE NAZAIRE — APPARITION DE LA BARRE MOBILE AU SCROLL
   ========================================================== */

@media (max-width: 768px) {

        /*
         * Sans JavaScript, la barre conserve son comportement
         * historique et reste visible.
         *
         * Dès que le JavaScript est actif, elle est masquée
         * en haut de page puis révélée au premier scroll.
         */
        .le-nazaire-mobile-actions.le-nazaire-mobile-actions--scroll-aware {
                opacity: 0;

                visibility: hidden;
                pointer-events: none;

                transform:
                        translateY(
                                calc(100% + 12px)
                        );

                transition:
                        opacity 0.18s ease,
                        transform 0.22s ease,
                        visibility 0s linear 0.22s;

                will-change:
                        opacity,
                        transform;
        }


        .le-nazaire-mobile-actions.le-nazaire-mobile-actions--scroll-aware.is-visible {
                opacity: 1;

                visibility: visible;
                pointer-events: auto;

                transform: translateY(0);

                transition-delay: 0s;
        }
}


/* Respect du réglage système de réduction des animations. */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

        .le-nazaire-mobile-actions.le-nazaire-mobile-actions--scroll-aware,
        .le-nazaire-mobile-actions.le-nazaire-mobile-actions--scroll-aware.is-visible {
                transition: none;
        }
}