/* =========================================================
   OISE & PATRIMOINE
   PAGE CARTE
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --cream: #faf8f4;

    --paper: #fffdf9;

    --beige: #f3e8d5;

    --beige-dark: #e5d7c1;

    --gold: #c49b4c;

    --gold-dark: #9a722e;

    --ink: #302c27;

    --text: #514b43;

    --green-soft: #dce4e0;

}



/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    min-width: 320px;

    background:
        var(--cream);

    color:
        var(--text);

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

    overflow-x: hidden;

}


img {

    max-width: 100%;

}


a {

    color: inherit;

}



/* =========================================================
   NAVBAR
========================================================= */

.barre {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    min-height: 78px;

    display: grid;

    grid-template-columns:
        minmax(180px, 260px)
        1fr
        minmax(180px, 260px);

    align-items: center;

    gap: 20px;

    padding:
        0 28px;

    background:
        rgba(
            255,
            253,
            249,
            .97
        );

    border-top:
        2px solid #d6b36a;

    border-bottom:
        1px solid #e8dfd0;

    box-shadow:
        0 2px 12px
        rgba(
            50,
            40,
            20,
            .05
        );

}



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

.logo {

    display: inline-flex;

    width: fit-content;

    color:
        #171717;

    text-decoration: none;

}


.logo-titre {

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

    font-size: 21px;

    line-height: 1.05;

}


.logo-titre strong {

    color:
        var(--gold);

    font-weight: 600;

}



/* =========================================================
   NAVIGATION
========================================================= */

.link {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(
            18px,
            3vw,
            42px
        );

}


.link a {

    position: relative;

    padding:
        29px
        0
        26px;

    color:
        #403c36;

    font-size: 15px;

    text-decoration: none;

    white-space: nowrap;

}


.link a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 18px;

    width: 0;

    height: 2px;

    background:
        var(--gold);

    transition:
        width .25s ease;

}


.link a:hover::after,
.link a.active::after {

    width: 100%;

}


.link a:hover,
.link a.active {

    color:
        var(--gold-dark);

}



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

.carte {

    display: flex;

    justify-content: flex-end;

}


.map {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        12px 19px;

    border:
        1px solid var(--ink);

    border-radius: 30px;

    background:
        var(--ink);

    color:
        white;

    font-size: 14px;

    text-decoration: none;

}


.map i {

    color:
        #d5b36b;

}



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

.menu-toggle {

    display: none;

    width: 44px;

    height: 44px;

    border:
        1px solid #d8ccb9;

    border-radius: 50%;

    background:
        transparent;

    color:
        var(--ink);

    font-size: 18px;

    cursor: pointer;

}



/* =========================================================
   CONTENU
========================================================= */

main {

    padding-top: 78px;

}



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

.map-intro {

    position: relative;

    min-height:
        400px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        70px 25px;

    overflow: hidden;

    background:
        var(--beige);

}


.map-intro::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    top: -250px;

    right: -100px;

    border:
        1px solid
        rgba(
            180,
            145,
            75,
            .25
        );

    border-radius: 50%;

}


.map-intro::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    bottom: -180px;

    left: -100px;

    border:
        1px solid
        rgba(
            180,
            145,
            75,
            .25
        );

    border-radius: 50%;

}


.map-intro-content {

    position: relative;

    z-index: 1;

    width:
        min(
            900px,
            100%
        );

    text-align: center;

}


.eyebrow {

    margin:
        0 0 10px;

    color:
        var(--gold-dark);

    font-size: 14px;

    font-weight: 700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.map-intro h1 {

    margin:
        0;

    color:
        var(--ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            48px,
            7vw,
            76px
        );

    line-height:
        .92;

    font-weight:
        600;

}


.separator {

    width: 80px;

    height: 3px;

    margin:
        24px auto;

    background:
        var(--gold);

}


.intro-text {

    max-width:
        720px;

    margin:
        0 auto;

    color:
        #62594e;

    font-size:
        16px;

    line-height:
        1.7;

}



/* =========================================================
   ASTUCE
========================================================= */

.map-tip {

    width:
        fit-content;

    max-width:
        100%;

    margin:
        30px auto 0;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        13px 18px;

    border:
        1px solid
        rgba(
            150,
            115,
            50,
            .2
        );

    border-radius:
        50px;

    background:
        rgba(
            255,
            253,
            249,
            .65
        );

    color:
        #62594e;

    font-size:
        13px;

    text-align:
        left;

}


.tip-icon {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        var(--gold);

    color:
        white;

}



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

.map-section {

    padding:
        65px 25px 75px;

    background:
        var(--cream);

}


.map-container {

    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;

    overflow:
        hidden;

    border:
        1px solid
        #dfd3c0;

    border-radius:
        22px;

    background:
        var(--paper);

    box-shadow:
        0 15px 45px
        rgba(
            70,
            55,
            35,
            .10
        );

}



/* =========================================================
   EN-TÊTE DE LA CARTE
========================================================= */

.map-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        25px 30px;

    border-bottom:
        1px solid
        #e8dfd0;

}


.map-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--gold-dark);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;

}


.map-header h2 {

    margin:
        5px 0 0;

    color:
        var(--ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        34px;

    font-weight:
        600;

}


.map-decoration {

    width: 55px;

    height: 55px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--beige);

    color:
        var(--gold-dark);

    font-size:
        22px;

}



/* =========================================================
   GOOGLE MAPS
========================================================= */

.map-frame {

    position:
        relative;

    width: 100%;

    height:
        600px;

    background:
        #e9e3d9;

}


.map-frame iframe {

    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;

}



/* =========================================================
   BAS DE LA CARTE
========================================================= */

.map-footer {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        center;

    gap:
        30px;

    padding:
        18px 25px;

    border-top:
        1px solid
        #e8dfd0;

    background:
        #fbf8f2;

}


.map-info {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #746b60;

    font-size:
        13px;

}


.map-info i {

    color:
        var(--gold);

}



/* =========================================================
   SECTION DÉCOUVERTE
========================================================= */

.discover {

    padding:
        70px 25px;

    background:
        var(--green-soft);

    text-align:
        center;

}


.discover-content {

    width:
        min(
            750px,
            100%
        );

    margin:
        0 auto;

}


.discover h2 {

    margin:
        0 0 15px;

    color:
        var(--ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            38px,
            5vw,
            55px
        );

    line-height:
        .95;

}


.discover p:not(.eyebrow) {

    max-width:
        620px;

    margin:
        0 auto 25px;

    color:
        #625e58;

    line-height:
        1.6;

}


.discover-buttons {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.btn-primary,
.btn-secondary {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        13px 20px;

    border-radius:
        30px;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        .25s ease;

}


.btn-primary {

    background:
        var(--ink);

    color:
        white;

}


.btn-primary:hover {

    background:
        var(--gold-dark);

    transform:
        translateY(-2px);

}


.btn-secondary {

    border:
        1px solid
        var(--ink);

    color:
        var(--ink);

    background:
        transparent;

}


.btn-secondary:hover {

    background:
        var(--ink);

    color:
        white;

}



/* =========================================================
   FOOTER
========================================================= */

.footer {

    background:
        #f4efe6;

    color:
        #3f382f;

    border-top:
        1px solid
        #d6b46a;

}


.footer-container {

    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;

    padding:
        55px 30px 40px;

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:
        40px;

}


.footer-brand h2 {

    margin:
        0 0 14px;

    font-family:
        Georgia,
        serif;

    font-size:
        30px;

    font-weight:
        500;

}


.footer-brand h2 span {

    color:
        var(--gold);

}


.footer-brand p {

    max-width:
        330px;

    margin:
        0;

    color:
        #756b5e;

    line-height:
        1.7;

    font-size:
        14px;

}


.footer-column h3 {

    margin:
        0 0 16px;

    color:
        #a17e38;

    font-size:
        14px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

}


.footer-column a {

    display:
        block;

    width:
        fit-content;

    margin-bottom:
        10px;

    color:
        #62594e;

    font-size:
        14px;

    text-decoration:
        none;

}


.footer-column a:hover {

    color:
        var(--gold-dark);

}


.footer-bottom {

    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;

    padding:
        20px 30px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    border-top:
        1px solid
        #ddd2c0;

    color:
        #82786b;

    font-size:
        12px;

}


.footer-bottom p {

    margin: 0;

}


.legal-links {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

}


.legal-links a {

    color:
        #82786b;

    text-decoration:
        none;

}



/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1000px) {


    .barre {

        grid-template-columns:
            190px
            1fr
            170px;

        padding:
            0 20px;

    }


    .link {

        gap:
            20px;

    }


    .link a {

        font-size:
            14px;

    }


    .map-frame {

        height:
            520px;

    }


    .footer-container {

        grid-template-columns:
            1fr 1fr;

    }

}



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

@media (max-width: 800px) {


    .barre {

        min-height:
            72px;

        display:
            flex;

        align-items:
            center;

        padding:
            10px 18px;

    }


    .logo {

        flex: 1;

    }


    .menu-toggle {

        display:
            block;

        margin-left:
            auto;

        order:
            2;

    }


    .carte {

        order:
            3;

        margin-left:
            10px;

    }


    .map {

        width:
            42px;

        height:
            42px;

        padding:
            0;

        border-radius:
            50%;

    }


    .map span {

        display:
            none;

    }


    .link {

        position:
            absolute;

        top:
            100%;

        left:
            0;

        right:
            0;

        height:
            auto;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            8px 18px 15px;

        background:
            rgba(
                255,
                253,
                249,
                .99
            );

        border-bottom:
            1px solid
            #e8dfd0;

        box-shadow:
            0 10px 25px
            rgba(
                0,
                0,
                0,
                .08
            );

    }


    .link.is-open {

        display:
            flex;

    }


    .link a {

        padding:
            14px 4px;

        font-size:
            16px;

    }


    main {

        padding-top:
            72px;

    }



    /* INTRO */

    .map-intro {

        min-height:
            390px;

        padding:
            55px 20px;

    }


    .map-intro h1 {

        font-size:
            clamp(
                45px,
                12vw,
                65px
            );

    }


    .map-tip {

        border-radius:
            15px;

        text-align:
            left;

    }



    /* MAP */

    .map-section {

        padding:
            40px 15px 55px;

    }


    .map-header {

        padding:
            20px;

    }


    .map-header h2 {

        font-size:
            29px;

    }


    .map-decoration {

        width:
            45px;

        height:
            45px;

    }


    .map-frame {

        height:
            480px;

    }


    .map-footer {

        flex-direction:
            column;

        gap:
            10px;

        align-items:
            flex-start;

    }



    /* DISCOVER */

    .discover {

        padding:
            55px 20px;

    }



    /* FOOTER */

    .footer-container {

        grid-template-columns:
            1fr;

        padding:
            45px 22px 30px;

    }


    .footer-bottom {

        flex-direction:
            column;

        text-align:
            center;

        padding:
            20px;

    }


    .legal-links {

        justify-content:
            center;

    }

}



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

@media (max-width: 500px) {


    .logo-titre {

        font-size:
            18px;

    }


    .menu-toggle,
    .map {

        width:
            40px;

        height:
            40px;

    }


    .map-intro {

        min-height:
            430px;

    }


    .map-intro h1 {

        font-size:
            44px;

    }


    .intro-text {

        font-size:
            14px;

    }


    .map-tip {

        padding:
            11px;

        font-size:
            12px;

    }


    .map-frame {

        height:
            430px;

    }


    .map-header {

        align-items:
            flex-start;

    }


    .map-decoration {

        display:
            none;

    }


    .discover-buttons {

        flex-direction:
            column;

    }


    .btn-primary,
    .btn-secondary {

        width:
            100%;

    }

}



/* =========================================================
   ACCESSIBILITÉ
========================================================= */

:focus-visible {

    outline:
        3px solid
        var(--gold);

    outline-offset:
        3px;

}


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

    html {

        scroll-behavior:
            auto;

    }

}