/* ==========================================================
   VORIK MOBILE SEARCH SHEET
   Composant réutilisable
   ========================================================== */

:root {
    --vorik-mobile-nav-height:
        calc(66px + env(safe-area-inset-bottom));

    --vorik-mobile-search-top-height: 72px;
}

/*
 * Les composants mobiles restent absents du desktop.
 */

.vorik-mobile-search-topbar,
.vorik-mobile-bottom-nav,
.vorik-search-sheet,
.vorik-search-sheet-backdrop {
    display: none;
}

@media (max-width: 768px) {

    /*
     * Le header public et les anciens Hero sont retirés
     * uniquement sur le catalogue mobile.
     */

    body.vorik-catalog-body
    .vorik-catalog-header,

    body.vorik-catalog-body
    .vorik-premium-hero,

    body.vorik-catalog-body
    .vorik-catalog-hero {
        display: none !important;
    }

    html.vorik-search-sheet-open,
    html.vorik-search-sheet-open body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.vorik-catalog-body {
        padding-top:
            var(--vorik-mobile-search-top-height);

        padding-bottom:
            calc(
                var(--vorik-mobile-nav-height)
                + 14px
            );

        background: #f7f9fc;
    }

    /*
     * Barre supérieure compacte.
     */

    .vorik-mobile-search-topbar {
        position: fixed;
        z-index: 600;
        top: 0;
        right: 0;
        left: 0;

        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: center;
        gap: 9px;

        min-height:
            var(--vorik-mobile-search-top-height);

        padding:
            calc(10px + env(safe-area-inset-top))
            14px
            10px;

        background:
            rgba(255, 255, 255, 0.96);

        border-bottom:
            1px solid rgba(16, 43, 85, 0.08);

        box-shadow:
            0 5px 18px rgba(16, 43, 85, 0.07);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .vorik-mobile-search-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;
        padding: 0;

        color: #102b55;
        text-decoration: none;

        border:
            1px solid rgba(16, 43, 85, 0.10);

        border-radius: 50%;

        background: #ffffff;

        box-shadow:
            0 5px 14px rgba(16, 43, 85, 0.08);
    }

    .vorik-mobile-search-back svg {
        width: 20px;
        height: 20px;
    }

    .vorik-mobile-search-trigger {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;

        width: 100%;
        min-width: 0;
        min-height: 48px;

        padding: 4px 13px 4px 5px;

        color: #10233f;
        text-align: left;

        border:
            1px solid rgba(16, 43, 85, 0.10);

        border-radius: 999px;

        background: #ffffff;

        box-shadow:
            0 7px 22px rgba(16, 43, 85, 0.10);

        cursor: pointer;
    }

    .vorik-mobile-search-trigger-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 36px;
        height: 36px;

        color: #102b55;

        border-radius: 50%;

        background: #ffd522;
    }

    .vorik-mobile-search-trigger-icon svg {
        width: 18px;
        height: 18px;
    }

    .vorik-mobile-search-trigger-copy {
        display: block;
        min-width: 0;
        padding-left: 5px;
    }

    .vorik-mobile-search-trigger-title {
        display: block;

        overflow: hidden;

        color: #13233f;
        font-size: 13px;
        font-weight: 850;
        line-height: 1.3;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vorik-mobile-search-trigger-summary {
        display: block;

        overflow: hidden;

        margin-top: 1px;

        color: #738198;
        font-size: 10px;
        font-weight: 650;
        line-height: 1.25;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Le catalogue remonte immédiatement sous la topbar.
     */

    body.vorik-catalog-body
    .vorik-catalog {
        padding-top: 7px;
    }

    body.vorik-catalog-body
    .vorik-catalog-toolbar {
        margin-top: 0;
        padding-top: 7px;
    }

    /*
     * Fond obscurci.
     */

    .vorik-search-sheet-backdrop {
        position: fixed;
        z-index: 900;
        inset: 0;

        display: block;

        opacity: 0;
        visibility: hidden;

        background:
            rgba(7, 20, 39, 0.48);

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);

        transition:
            opacity 220ms ease,
            visibility 220ms ease;
    }

    .vorik-search-sheet-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }

    /*
     * Bottom Sheet.
     */

    .vorik-search-sheet {
        position: fixed;
        z-index: 910;
        right: 0;
        bottom: 0;
        left: 0;

        display: flex;
        flex-direction: column;

        max-height:
            min(
                88dvh,
                calc(
                    100dvh
                    - env(safe-area-inset-top)
                    - 10px
                )
            );

        color: #10233f;

        border-radius: 26px 26px 0 0;

        background: #ffffff;

        box-shadow:
            0 -24px 60px rgba(7, 28, 59, 0.24);

        transform: translateY(105%);

        transition:
            transform
            340ms
            cubic-bezier(0.2, 0.82, 0.25, 1);

        touch-action: none;
        will-change: transform;
    }

    .vorik-search-sheet.is-open {
        transform: translateY(0);
    }

    .vorik-search-sheet.is-dragging {
        transition: none;
    }

    .vorik-search-sheet-handle-area {
        flex: 0 0 auto;

        padding: 9px 0 7px;

        cursor: grab;
        touch-action: none;
    }

    .vorik-search-sheet-handle {
        display: block;

        width: 42px;
        height: 5px;
        margin-inline: auto;

        border-radius: 999px;

        background: #cbd3df;
    }

    .vorik-search-sheet-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 42px;
        align-items: center;
        gap: 10px;

        padding: 5px 18px 15px;

        border-bottom: 1px solid #edf0f5;
    }

    .vorik-search-sheet-title {
        margin: 0;

        color: #102b55;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: -0.025em;
    }

    .vorik-search-sheet-subtitle {
        margin: 3px 0 0;

        color: #748198;
        font-size: 12px;
        font-weight: 600;
    }

    .vorik-search-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;
        padding: 0;

        color: #102b55;

        border: 1px solid #e5eaf1;
        border-radius: 50%;

        background: #f7f9fc;

        cursor: pointer;
    }

    .vorik-search-sheet-close svg {
        width: 20px;
        height: 20px;
    }

    .vorik-search-sheet-scroll {
        flex: 1 1 auto;

        padding: 16px 18px 10px;

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .vorik-search-sheet-section {
        margin-bottom: 17px;
    }

    .vorik-search-sheet-label {
        display: block;

        margin: 0 0 7px;

        color: #42516a;
        font-size: 11px;
        font-weight: 850;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

    .vorik-search-sheet-control {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: center;
        gap: 9px;

        min-height: 52px;
        padding: 0 13px;

        border: 1px solid #dde4ed;
        border-radius: 14px;

        background: #ffffff;

        transition:
            border-color 160ms ease,
            box-shadow 160ms ease;
    }

    .vorik-search-sheet-control:focus-within {
        border-color: #205294;

        box-shadow:
            0 0 0 3px rgba(32, 82, 148, 0.10);
    }

    .vorik-search-sheet-control-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        color: #205294;
    }

    .vorik-search-sheet-control-icon svg {
        width: 18px;
        height: 18px;
    }

    .vorik-search-sheet-control input,
    .vorik-search-sheet-control select {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        padding: 0;

        color: #10233f;
        font: inherit;
        font-size: 14px;
        font-weight: 720;

        border: 0;
        outline: 0;

        background: transparent;
    }

    .vorik-search-sheet-control input::placeholder {
        color: #8995a7;
    }

    .vorik-search-sheet-date-grid {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 9px;
    }

    .vorik-search-sheet-date-grid
    .vorik-search-sheet-control {
        grid-template-columns: 20px minmax(0, 1fr);
        padding-inline: 10px;
    }

    .vorik-search-sheet-date-grid input {
        font-size: 12px;
    }

    /*
     * Segmented controls.
     */

    .vorik-search-sheet-options {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .vorik-search-sheet-option {
        position: relative;
        display: block;
    }

    .vorik-search-sheet-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .vorik-search-sheet-option span {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 46px;
        padding: 8px 10px;

        color: #637188;
        font-size: 12px;
        font-weight: 800;
        text-align: center;

        border: 1px solid #dde4ed;
        border-radius: 13px;

        background: #ffffff;

        cursor: pointer;

        transition:
            color 160ms ease,
            border-color 160ms ease,
            background 160ms ease,
            box-shadow 160ms ease;
    }

    .vorik-search-sheet-option
    input:checked + span {
        color: #102b55;

        border-color: #ffd522;

        background: #fff8d5;

        box-shadow:
            inset 0 0 0 1px #ffd522;
    }

    .vorik-search-sheet-option
    input:focus-visible + span {
        outline: 3px solid rgba(32, 82, 148, 0.18);
        outline-offset: 2px;
    }

    /*
     * Pied du Bottom Sheet.
     */

    .vorik-search-sheet-footer {
        flex: 0 0 auto;

        padding:
            11px
            18px
            calc(12px + env(safe-area-inset-bottom));

        border-top: 1px solid #edf0f5;

        background:
            rgba(255, 255, 255, 0.97);

        box-shadow:
            0 -8px 22px rgba(16, 43, 85, 0.05);
    }

    .vorik-search-sheet-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;

        width: 100%;
        min-height: 52px;
        padding: 10px 18px;

        color: #102b55;
        font: inherit;
        font-size: 14px;
        font-weight: 900;

        border: 0;
        border-radius: 15px;

        background: #ffd522;

        box-shadow:
            0 10px 24px rgba(255, 213, 34, 0.27);

        cursor: pointer;
    }

    .vorik-search-sheet-submit svg {
        width: 18px;
        height: 18px;
    }

    /*
     * Navigation inférieure mobile.
     */

    .vorik-mobile-bottom-nav {
        position: fixed;
        z-index: 580;
        right: 0;
        bottom: 0;
        left: 0;

        display: grid;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        min-height:
            var(--vorik-mobile-nav-height);

        padding:
            7px
            8px
            calc(7px + env(safe-area-inset-bottom));

        border-top:
            1px solid rgba(16, 43, 85, 0.09);

        background:
            rgba(255, 255, 255, 0.97);

        box-shadow:
            0 -8px 25px rgba(16, 43, 85, 0.08);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .vorik-mobile-bottom-nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

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

        color: #738198;
        font-size: 9px;
        font-weight: 750;
        text-align: center;
        text-decoration: none;

        border-radius: 12px;
    }

    .vorik-mobile-bottom-nav-link svg {
        width: 20px;
        height: 20px;
    }

    .vorik-mobile-bottom-nav-link.is-active {
        color: #102b55;
    }

    .vorik-mobile-bottom-nav-link.is-active svg {
        color: #e0b700;
    }

    /*
     * Évite que les contrôles flottants du catalogue
     * passent sous la navigation.
     */

    body.vorik-catalog-body
    .vorik-load-more-sentinel {
        margin-bottom: 24px;
    }
}

@media (max-width: 360px) {

    .vorik-mobile-search-topbar {
        grid-template-columns: 40px minmax(0, 1fr);
        padding-inline: 9px;
    }

    .vorik-mobile-search-trigger-title {
        font-size: 12px;
    }

    .vorik-search-sheet-scroll {
        padding-inline: 14px;
    }

    .vorik-search-sheet-footer {
        padding-inline: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .vorik-search-sheet,
    .vorik-search-sheet-backdrop {
        transition: none;
    }
}

/* VORIK FULLSCREEN SEARCH SHEET START */

@media (max-width: 768px) {

    /*
     * Hauteur réellement visible.
     * La valeur est mise à jour en JavaScript avec
     * window.visualViewport lorsque le clavier s’ouvre.
     */

    :root {
        --vorik-search-viewport-height: 100dvh;
        --vorik-search-keyboard-offset: 0px;
    }

    /*
     * Le panneau couvre tout l’écran mobile.
     */

    .vorik-search-sheet {
        position: fixed !important;
        z-index: 2000 !important;

        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;

        width: 100vw !important;

        height:
            var(
                --vorik-search-viewport-height,
                100dvh
            ) !important;

        min-height:
            var(
                --vorik-search-viewport-height,
                100dvh
            ) !important;

        max-height:
            var(
                --vorik-search-viewport-height,
                100dvh
            ) !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: #ffffff !important;

        box-shadow:
            0 -20px 60px rgba(7, 28, 59, 0.24);

        transform: translateY(105%) !important;

        transition:
            transform
            330ms
            cubic-bezier(0.2, 0.82, 0.25, 1);

        touch-action: none;

        overscroll-behavior: contain;

        will-change:
            transform,
            height;
    }

    .vorik-search-sheet.is-open {
        transform: translateY(0) !important;
    }

    .vorik-search-sheet.is-dragging {
        transition: none !important;
    }

    /*
     * Fond derrière le panneau.
     * Il reste présent pour les animations et la fermeture.
     */

    .vorik-search-sheet-backdrop {
        z-index: 1990 !important;
    }

    /*
     * Barre supérieure stable.
     */

    .vorik-search-sheet-handle-area {
        position: relative;

        flex: 0 0 auto;

        min-height: 24px;
        padding: 9px 0 7px;

        background: #ffffff;

        cursor: grab;

        touch-action: none;
    }

    .vorik-search-sheet-handle {
        width: 44px;
        height: 5px;

        background: #c7d0dc;
    }

    .vorik-search-sheet-header {
        position: relative;
        z-index: 5;

        flex: 0 0 auto;

        min-height: 70px;

        padding:
            6px
            18px
            14px;

        background:
            rgba(255, 255, 255, 0.98);

        border-bottom:
            1px solid #e9edf3;

        box-shadow:
            0 6px 18px rgba(16, 43, 85, 0.04);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .vorik-search-sheet-title {
        font-size: 20px;
        line-height: 1.15;
    }

    .vorik-search-sheet-subtitle {
        margin-top: 3px;
    }

    /*
     * Le formulaire prend tout l’espace restant.
     */

    .vorik-search-sheet
    > form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;

        min-height: 0;

        overflow: hidden;
    }

    /*
     * Partie centrale défilable.
     */

    .vorik-search-sheet-scroll {
        flex: 1 1 auto;

        min-height: 0;

        padding:
            18px
            18px
            28px;

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior-y: contain;

        scroll-behavior: smooth;
        scroll-padding-top: 18px;
        scroll-padding-bottom: 150px;

        touch-action: pan-y;

        -webkit-overflow-scrolling: touch;
    }

    /*
     * Plus d’espace entre les blocs pour faciliter
     * la saisie tactile.
     */

    .vorik-search-sheet-section {
        margin-bottom: 22px;
    }

    .vorik-search-sheet-control {
        min-height: 56px;

        border-radius: 16px;
    }

    .vorik-search-sheet-control input,
    .vorik-search-sheet-control select {
        min-height: 52px;

        font-size: 16px;
    }

    /*
     * font-size:16px empêche Safari iOS de zoomer
     * automatiquement lorsqu’un champ reçoit le focus.
     */

    .vorik-search-sheet-control
    input[type="date"] {
        font-size: 15px;
    }

    .vorik-search-sheet-date-grid {
        gap: 10px;
    }

    .vorik-search-sheet-option span {
        min-height: 50px;

        border-radius: 15px;
    }

    /*
     * Le bouton reste visible en bas de l’écran,
     * même quand le contenu central défile.
     */

    .vorik-search-sheet-footer {
        position: relative;
        z-index: 8;

        flex: 0 0 auto;

        padding:
            11px
            18px
            calc(
                12px
                + env(safe-area-inset-bottom)
            );

        border-top:
            1px solid #e9edf3;

        background:
            rgba(255, 255, 255, 0.98);

        box-shadow:
            0 -10px 26px rgba(16, 43, 85, 0.07);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .vorik-search-sheet-submit {
        min-height: 54px;

        border-radius: 16px;
    }

    /*
     * Lorsque le clavier est ouvert, le footer reste dans
     * la hauteur réellement disponible du visualViewport.
     */

    .vorik-search-sheet.is-keyboard-open
    .vorik-search-sheet-scroll {
        padding-bottom: 90px;
        scroll-padding-bottom: 130px;
    }

    /*
     * Le footer de navigation générale et la topbar
     * disparaissent pendant la recherche fullscreen.
     */

    html.vorik-search-sheet-open
    .vorik-mobile-search-topbar,

    html.vorik-search-sheet-open
    .vorik-mobile-bottom-nav,

    html.vorik-search-sheet-open
    .vorik-mobile-map-close {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /*
     * Pas de scroll de la page située derrière.
     */

    html.vorik-search-sheet-open,
    html.vorik-search-sheet-open body {
        position: fixed;

        width: 100%;
        height: 100%;

        overflow: hidden !important;

        overscroll-behavior: none;
    }
}

@media (max-width: 380px) {

    .vorik-search-sheet-scroll {
        padding-inline: 14px;
    }

    .vorik-search-sheet-header,
    .vorik-search-sheet-footer {
        padding-inline: 14px;
    }

    .vorik-search-sheet-date-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .vorik-search-sheet {
        transition: none !important;
    }

    .vorik-search-sheet-scroll {
        scroll-behavior: auto;
    }
}

/* VORIK FULLSCREEN SEARCH SHEET END */