.navbar {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;
        background: rgba(195, 175, 140, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

    transition: 0.3s ease;
}


/* ================================
   CONTENEUR
================================ */

.nav-container {

    width: min(1200px, 92%);

    height: 75px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* ================================
   LOGO
================================ */

.logo {

    color: white;

    text-decoration: none;

    font-family: Georgia, serif;

    font-size: 1.7rem;

    font-weight: bold;

    letter-spacing: 2px;
}

.logo span {

    margin-left: 5px;

    color: #d9a441;

    font-size: 1rem;
}


/* ================================
   LIENS
================================ */

.nav-links {

    display: flex;

    align-items: center;

    gap: 38px;
}


.nav-links a {

    position: relative;

    color: white;

    text-decoration: none;

    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size: 0.95rem;

    font-weight: 500;

    padding: 10px 0;

    transition:
        color 0.3s ease;
}


/* Ligne sous le lien */

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 2px;

    width: 0;
    height: 2px;

    background: #d9a441;

    transition:
        width 0.3s ease;
}


.nav-links a:hover {

    color: #d9a441;
}


.nav-links a:hover::after,
.nav-links a.active::after {

    width: 100%;
}


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

.menu-toggle {

    display: none;

    border: none;

    background: transparent;

    color: white;

    font-size: 1.8rem;

    cursor: pointer;
}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 750px) {

    .nav-links {

        position: absolute;

        top: 75px;
        left: 0;

        width: 100%;

        padding: 25px 0;

        display: none;

        flex-direction: column;

        gap: 10px;

        background:
            rgba(20, 45, 63, 0.95);

        backdrop-filter: blur(15px);
    }


    .nav-links.active {

        display: flex;
    }


    .nav-links a {

        width: 100%;

        text-align: center;

        padding: 14px;
    }


    .menu-toggle {

        display: block;
    }

}

.oise-map-section {

    padding: 100px 20px;

    background:
        linear-gradient(
            135deg,
            #f4f0e7 0%,
            #eef3ef 100%
        );

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #25313a;

}


.oise-map-container {

    width: min(1200px, 100%);

    margin: auto;

}


/* ==========================================================
   TITRE
========================================================== */

.oise-map-header {

    max-width: 750px;

    margin-bottom: 50px;

}


.oise-map-eyebrow {

    display: inline-block;

    margin-bottom: 12px;

    color: #c88a3d;

    font-size: .78rem;

    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;

}


.oise-map-header h2 {

    margin: 0 0 15px;

    color: #173f5f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.3rem, 5vw, 4rem);

    line-height: 1.1;

}


.oise-map-header p {

    margin: 0;

    color: #68747d;

    font-size: 1.05rem;

}


/* ==========================================================
   LAYOUT
========================================================== */

.oise-map-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap: 35px;

    align-items: center;

}


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

.oise-map-wrapper {

    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(143,175,127,.18),
            transparent 30%
        ),
        #ffffff;

    box-shadow:
        0 20px 60px rgba(18,38,52,.12);

    overflow: hidden;

}


.oise-map {

    width: 100%;

    max-width: 780px;

    height: auto;

    overflow: visible;

}


/* ==========================================================
   ARRONDISSEMENTS
========================================================== */

.arrondissement {

    stroke: #ffffff;

    stroke-width: 7;

    stroke-linejoin: round;

    cursor: pointer;

    transition:
        fill .25s ease,
        transform .25s ease,
        filter .25s ease;

}


/* Couleurs */

.arrondissement.beauvais {

    fill: #5c8f70;

}


.arrondissement.clermont {

    fill: #c58b45;

}


.arrondissement.compiegne {

    fill: #3f718f;

}


.arrondissement.senlis {

    fill: #8b6d59;

}


/* Survol */

.arrondissement:hover {

    filter:
        brightness(1.15)
        drop-shadow(
            0 8px 8px rgba(0,0,0,.2)
        );

}


/* Sélection */

.arrondissement.active {

    stroke: #173f5f;

    stroke-width: 10;

    filter:
        brightness(1.12)
        drop-shadow(
            0 10px 10px rgba(0,0,0,.25)
        );

}


/* ==========================================================
   RIVIÈRE
========================================================== */

.oise-river {

    fill: none;

    stroke: #73a9c4;

    stroke-width: 7;

    stroke-linecap: round;

    opacity: .75;

    pointer-events: none;

}


/* ==========================================================
   VILLES
========================================================== */

.city-marker {

    pointer-events: none;

}


.city-marker circle {

    fill: #ffffff;

    stroke: #173f5f;

    stroke-width: 4;

}


.city-marker text {

    fill: #173f5f;

    font-size: 15px;

    font-weight: 700;

    paint-order: stroke;

    stroke: white;

    stroke-width: 5px;

    stroke-linejoin: round;

}


/* ==========================================================
   TITRE CARTE
========================================================== */

.map-title {

    fill: #173f5f;

    font-family:
        Georgia,
        serif;

    font-size: 25px;

    font-weight: bold;

    opacity: .7;

}


/* ==========================================================
   INFOBULLE
========================================================== */

.oise-tooltip {

    position: absolute;

    z-index: 20;

    width: 240px;

    padding: 18px;

    border-radius: 14px;

    background:
        rgba(16,45,68,.96);

    color: white;

    box-shadow:
        0 15px 35px rgba(0,0,0,.2);

    pointer-events: none;

    opacity: 0;

    transform:
        translateY(10px);

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.oise-tooltip.visible {

    opacity: 1;

    transform:
        translateY(0);

}


.tooltip-role {

    margin-bottom: 4px;

    color: #d9a441;

    font-size: .72rem;

    font-weight: bold;

    letter-spacing: .08em;

    text-transform: uppercase;

}


.tooltip-name {

    margin-bottom: 6px;

    font-family:
        Georgia,
        serif;

    font-size: 1.45rem;

    font-weight: bold;

}


.tooltip-description {

    color: #d9e2e7;

    font-size: .88rem;

    line-height: 1.5;

}


/* ==========================================================
   PANNEAU
========================================================== */

.oise-info {

    min-height: 400px;

    padding: 35px;

    border-radius: 22px;

    background: #173f5f;

    color: white;

    box-shadow:
        0 20px 50px rgba(18,38,52,.15);

    transition:
        background .3s ease;

}


.info-icon {

    width: 60px;

    height: 60px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    border-radius: 15px;

    background: #d9a441;

    color: #173f5f;

    font-family:
        Georgia,
        serif;

    font-size: 1.5rem;

    font-weight: bold;

}


.info-label {

    display: block;

    margin-bottom: 5px;

    color: #aebfc9;

    font-size: .75rem;

    font-weight: bold;

    letter-spacing: .1em;

    text-transform: uppercase;

}


.oise-info h3 {

    margin: 0 0 15px;

    font-family:
        Georgia,
        serif;

    font-size: 2.4rem;

}


.oise-info p {

    color: #d6e0e5;

    line-height: 1.65;

}


.info-divider {

    height: 1px;

    margin: 25px 0;

    background:
        rgba(255,255,255,.15);

}


.info-row {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 12px 0;

    border-bottom:
        1px solid rgba(255,255,255,.1);

}


.info-row span {

    color: #b8c7ce;

}


.info-row strong {

    color: white;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 950px) {

    .oise-map-layout {

        grid-template-columns: 1fr;

    }

    .oise-info {

        min-height: auto;

    }

}


@media (max-width: 650px) {

    .oise-map-section {

        padding: 65px 15px;

    }

    .oise-map-wrapper {

        min-height: 430px;

        padding: 5px;

    }

    .oise-map {

        transform:
            scale(1.05);

    }

    .oise-tooltip {

        display: none;

    }

    .city-marker text {

        font-size: 12px;

    }

}