/*
 * Carte de la marche
 * La Marche à Suivre
 */


.map-placeholder {
    position: relative;

    width: 100%;
    height: 560px;

    min-height: 560px;
    max-height: 560px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f7f3ea 0%,
            #efeade 100%
        );

    border: 1px solid rgba(108, 117, 94, 0.12);
    border-radius: 16px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 12px 30px rgba(72, 82, 61, 0.07);
}


/* ========================================
 * CHARGEMENT
 * ======================================== */

.march-map-loading {
    position: absolute;
    inset: 0;

    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 14px;

    background:
        linear-gradient(
            180deg,
            #f7f3ea 0%,
            #efeade 100%
        );

    color: #68705f;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


.march-map-spinner {
    width: 36px;
    height: 36px;

    border:
        3px solid rgba(87, 116, 91, 0.16);

    border-top-color:
        #57745b;

    border-radius: 50%;

    animation:
        march-map-spin 0.8s linear infinite;
}


@keyframes march-map-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ========================================
 * IMAGE DE SECOURS
 * ======================================== */

.march-map-fallback {
    position: absolute;
    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    display: none;

    object-fit: contain;

    background:
        linear-gradient(
            180deg,
            #f7f3ea 0%,
            #efeade 100%
        );
}


/* ========================================
 * CARTE INTERACTIVE
 * ======================================== */

.march-map {
    position: absolute;
    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    min-height: 0;
    max-height: 100%;

    overflow: hidden;

    background: transparent;

    opacity: 0;

    transition:
        opacity 0.22s ease;
}


.march-map.maplibregl-map {
    width: 100%;
    height: 100%;
}


.march-map .maplibregl-canvas-container {
    width: 100%;
    height: 100%;
}


.march-map .maplibregl-canvas {
    display: block;

    outline: none;
}


/* ========================================
 * ÉTAT : CARTE PRÊTE
 * ======================================== */

.map-placeholder.is-map-ready .march-map {
    opacity: 1;
}


.map-placeholder.is-map-ready .march-map-loading {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* ========================================
 * ÉTAT : ÉCHEC CARTE
 * ======================================== */

.map-placeholder.is-map-failed .march-map {
    display: none;
}


.map-placeholder.is-map-failed .march-map-loading {
    display: none;
}


.map-placeholder.is-map-failed .march-map-fallback {
    display: block;
}


/*
 * Contrôles de zoom
 */

.march-map .maplibregl-ctrl-top-right {
    top: 16px;
    right: 16px;
}


.march-map .maplibregl-ctrl-group {
    overflow: hidden;

    border:
        1px solid rgba(91, 103, 79, 0.12);

    border-radius: 14px;

    box-shadow:
        0 10px 20px rgba(54, 63, 47, 0.10);
}


.march-map .maplibregl-ctrl-group button {
    background-color:
        rgba(255, 251, 245, 0.96);

    color:
        #51614c;
}


.march-map .maplibregl-ctrl-group button:hover {
    background-color:
        rgba(247, 242, 234, 1);
}


/*
 * Légende
 */

.march-map-legend {
    position: absolute;

    z-index: 20;

    left: 20px;
    bottom: 20px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px 22px;

    padding: 14px 17px;

    background:
        rgba(255, 250, 242, 0.93);

    border:
        1px solid rgba(111, 118, 94, 0.14);

    border-radius: 15px;

    box-shadow:
        0 12px 24px rgba(56, 67, 47, 0.10);

    backdrop-filter: blur(8px);

    color:
        #4e5d49;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}


/*
 * Pendant le chargement,
 * on cache la légende pour garder
 * un écran propre.
 */

.map-placeholder:not(.is-map-ready):not(.is-map-failed)
.march-map-legend {
    opacity: 0;
    visibility: hidden;
}


/*
 * La légende revient avec la carte
 * ou avec l'image fallback.
 */

.map-placeholder.is-map-ready
.march-map-legend,
.map-placeholder.is-map-failed
.march-map-legend {
    opacity: 1;
    visibility: visible;
}


.march-map-legend-item {
    display: flex;
    align-items: center;

    gap: 9px;
}


.march-map-legend-color {
    display: block;

    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    border-radius: 4px;

    box-shadow:
        inset 0 0 0 1px rgba(83, 94, 74, 0.12);
}


.march-map-legend-color--planned {
    background: #bdd7b6;
}


.march-map-legend-color--not-planned {
    background: #e8e1d6;
}


/*
 * Popup
 */

.march-map-popup {
    display: flex;
    flex-direction: column;

    gap: 5px;

    min-width: 150px;

    color:
        #4a5948;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.35;
}


.march-map-popup-kicker {
    color:
        #6e7967;

    font-size: 12px;
    font-weight: 700;
}


.march-map-popup strong {
    font-size: 14px;

    color:
        #354634;
}


.maplibregl-popup-content {
    padding: 12px 14px;

    border-radius: 12px;

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

    box-shadow:
        0 10px 24px rgba(56, 67, 47, 0.14);
}


.maplibregl-popup-tip {
    border-top-color:
        rgba(255, 250, 244, 0.98);
}


/*
 * Attribution
 */

.maplibregl-ctrl-bottom-right {
    right: 10px;
    bottom: 8px;
}


.maplibregl-ctrl-attrib {
    font-size: 10px;

    background:
        rgba(255, 250, 242, 0.88);

    border-radius: 999px;

    padding: 2px 8px;

    color:
        #66705f;
}


/*
 * Mobile
 */

@media (max-width: 760px) {

    .map-placeholder {
        height: 420px;

        min-height: 420px;
        max-height: 420px;

        border-radius: 12px;
    }


    .march-map-loading {
        gap: 12px;

        font-size: 13px;
    }


    .march-map-spinner {
        width: 32px;
        height: 32px;
    }


    .march-map-legend {
        left: 10px;
        right: 10px;
        bottom: 10px;

        gap: 8px 14px;

        padding: 10px 12px;

        font-size: 11px;

        border-radius: 12px;
    }


    .march-map .maplibregl-ctrl-top-right {
        top: 10px;
        right: 10px;
    }
}


/*
 * Grand écran
 */

@media (min-width: 1200px) {

    .map-placeholder {
        height: 680px;

        min-height: 680px;
        max-height: 680px;
    }
}