@charset "UTF-8";

:root {
    --mirande-ivory: #f7f3ec;
    --mirande-ink: #2f2926;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.access-map-section {
    position: relative;
    width: 100%;
    min-height: 560px;
    height: min(78vh, 820px);
    overflow: hidden;
    background: #d8cec2;
}

.access-map {
    width: 100%;
    height: 100%;
}

/* Positionnement de secours si Base Light ne conserve pas le CSS MapLibre. */
.access-map .maplibregl-canvas-container,
.access-map .maplibregl-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.access-map .maplibregl-marker {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    will-change: transform;
}

/* Le filtre ne touche que la carte : le marqueur HTML garde son #625046 exact. */
.access-map .maplibregl-canvas {
    filter: sepia(.32) saturate(.72) brightness(.9) contrast(1);
}

.access-map .maplibregl-ctrl-group {
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: 0 5px 22px rgba(47, 41, 38, .13);
}

.access-map .maplibregl-ctrl-group button {
    border-bottom: 1px solid rgba(98, 80, 70, .18);
    background-color: var(--mirande-ivory);
}

.access-map .maplibregl-ctrl-attrib {
    color: #6f625b;
    background: rgba(247, 243, 236, .82);
    font: 10px/1.4 Switzer, Arial, sans-serif;
}

.access-map .maplibregl-ctrl-attrib a {
    color: var(--color-dark-gold, #625046);
}

.mirande-marker {
    width: 42px;
    height: 54px;
    cursor: pointer;
    color: var(--color-dark-gold, #625046);
}

.access-map-controls {
    position: absolute;
    z-index: 2;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 22px rgba(47, 41, 38, .18);
}

.access-map-controls button {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 0;
    border-bottom: 1px solid rgba(98, 80, 70, .18);
    border-radius: 0;
    background: var(--mirande-ivory);
    color: var(--color-dark-gold, #625046);
    font: 300 25px/1 Switzer, Arial, sans-serif;
    cursor: pointer;
}

.access-map-controls button:last-child {
    border-bottom: 0;
}

.access-map-controls button:hover {
    background: #fff;
}

.access-map-controls button:focus-visible {
    outline: 2px solid var(--color-dark-gold, #625046);
    outline-offset: 2px;
}

.mirande-marker svg {
    display: block;
    filter: drop-shadow(0 5px 5px rgba(47, 41, 38, .25));
}

.access-map .maplibregl-popup-content {
    padding: 14px 18px;
    border-radius: 0;
    color: var(--mirande-ink);
    font: 13px/1.6 Switzer, Arial, sans-serif;
}

.access-card {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: clamp(24px, 7vw, 120px);
    width: min(390px, calc(100% - 48px));
    padding: clamp(30px, 4vw, 52px);
    transform: translateY(-50%);
    border: 1px solid rgba(98, 80, 70, .22);
    background: rgba(247, 243, 236, .94);
    box-shadow: 0 16px 50px rgba(47, 41, 38, .14);
    color: var(--mirande-ink);
}

.access-card__eyebrow {
    margin: 0 0 14px;
    color: var(--color-dark-gold, #625046);
    font: 600 10px/1.3 Switzer, Arial, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.access-card h1 {
    margin: 0 0 22px;
    color: var(--color-dark-gold, #625046);
    font: 400 clamp(40px, 5vw, 58px)/.8 Canela, Georgia, serif;
}

.access-card address {
    margin: 0 0 26px;
    font: normal 15px/1.5 Switzer, Arial, sans-serif;
}

.access-card a {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-dark-gold, #625046);
    color: var(--color-dark-gold, #625046);
    font: 600 10px/1.3 Switzer, Arial, sans-serif;
    letter-spacing: .13em;
    text-decoration: none;
    text-transform: uppercase;
}

.access-card a span {
    margin-left: 8px;
}

@media (max-width: 767.98px) {
    .access-map-section {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .access-map {
        height: 58vh;
        min-height: 430px;
    }

    .access-map-controls {
        top: 16px;
        right: 16px;
    }

    .access-card {
        position: relative;
        z-index: 1;
        top: auto;
        left: auto;
        width: 100%;
        padding: 34px 24px 38px;
        transform: none;
        border: 0;
        box-shadow: none;
    }
}