/* =========================================================
   OISE & PATRIMOINE
   PAGE DÉCOUVRIR
========================================================= */


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

:root {

    --cream: #faf8f4;

    --paper: #fffdf9;

    --beige: #f3e8d5;

    --beige-dark: #e5d7c1;

    --gold: #c49b4c;

    --gold-dark: #9a722e;

    --gold-light: #dfc98e;

    --ink: #302c27;

    --text: #514b43;

    --green-soft: #dce4e0;

}



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

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

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    min-width: 320px;

    overflow-x: hidden;

    background:
        var(--cream);

    color:
        var(--text);

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

}


a {

    color: inherit;

}


button {

    font-family: inherit;

}


img {

    max-width: 100%;

}



/* =========================================================
   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);

}



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

.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;

    transition:
        .25s ease;

}


.map:hover {

    background:
        var(--gold-dark);

    border-color:
        var(--gold-dark);

}


.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;

}



/* =========================================================
   MAIN
========================================================= */

main {

    padding-top:
        78px;

}



/* =========================================================
   HERO
========================================================= */

.discover-hero {

    position:
        relative;

    min-height:
        520px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        80px 25px;

    overflow:
        hidden;

    background:
        var(--beige);

    text-align:
        center;

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            900px,
            100%
        );

}


.eyebrow {

    margin:
        0 0 12px;

    color:
        var(--gold-dark);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.discover-hero h1 {

    margin:
        0;

    color:
        var(--ink);

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

    font-size:
        clamp(
            52px,
            8vw,
            88px
        );

    line-height:
        .88;

    font-weight:
        600;

}


.discover-hero h1 span {

    color:
        var(--gold-dark);

    font-style:
        italic;

}


.separator {

    width:
        80px;

    height:
        3px;

    margin:
        28px auto;

    background:
        var(--gold);

}


.hero-text {

    max-width:
        700px;

    margin:
        0 auto 30px;

    color:
        #62594e;

    font-size:
        16px;

    line-height:
        1.75;

}



/* =========================================================
   DECORATIONS HERO
========================================================= */

.hero-decoration {

    position:
        absolute;

    border:
        1px solid
        rgba(
            166,
            128,
            55,
            .25
        );

    border-radius:
        50%;

}


.hero-decoration-one {

    width:
        550px;

    height:
        550px;

    right:
        -180px;

    top:
        -260px;

}


.hero-decoration-two {

    width:
        400px;

    height:
        400px;

    left:
        -180px;

    bottom:
        -230px;

}



/* =========================================================
   BOUTON DÉCOUVRIR
========================================================= */

.discover-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        15px 25px;

    border:
        0;

    border-radius:
        35px;

    background:
        var(--ink);

    color:
        white;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(
            50,
            40,
            25,
            .15
        );

    transition:
        .25s ease;

}


.discover-button i {

    color:
        var(--gold-light);

}


.discover-button:hover {

    transform:
        translateY(-3px);

    background:
        var(--gold-dark);

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

}



/* =========================================================
   FILTRES
========================================================= */

.filters-section {

    padding:
        32px 20px;

    background:
        var(--paper);

    border-bottom:
        1px solid
        #e7dece;

}


.filters-container {

    width:
        min(
            1000px,
            100%
        );

    margin:
        0 auto;

    text-align:
        center;

}


.filter-title {

    margin:
        0 0 15px;

    color:
        #756b5f;

    font-size:
        13px;

    font-weight:
        500;

}


.filters {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;

}


.filter {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 16px;

    border:
        1px solid
        #dcd1bf;

    border-radius:
        25px;

    background:
        transparent;

    color:
        #62594e;

    font-size:
        13px;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.filter:hover {

    border-color:
        var(--gold);

    color:
        var(--gold-dark);

}


.filter.active {

    border-color:
        var(--gold);

    background:
        var(--gold);

    color:
        white;

}


.filter.active i {

    color:
        white;

}



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

.card-section {

    position:
        relative;

    padding:
        75px 20px 80px;

    background:
        var(--cream);

}


.card-wrapper {

    position:
        relative;

    width:
        min(
            920px,
            100%
        );

    margin:
        0 auto;

}



/* =========================================================
   FLASHCARD
========================================================= */

.heritage-card {

    display:
        grid;

    grid-template-columns:
        48% 52%;

    min-height:
        530px;

    overflow:
        hidden;

    border:
        1px solid
        #ded2bf;

    border-radius:
        24px;

    background:
        var(--paper);

    box-shadow:
        0 20px 50px
        rgba(
            70,
            55,
            35,
            .12
        );

}


.heritage-card.card-change {

    animation:
        cardAppear .45s ease;

}


@keyframes cardAppear {

    0% {

        opacity:
            .25;

        transform:
            translateY(10px)
            scale(.985);

    }

    100% {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}



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

.card-image {

    position:
        relative;

    min-height:
        530px;

    overflow:
        hidden;

    background:
        #d8d0c2;

}


.card-image img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .6s ease;

}


.heritage-card:hover
.card-image img {

    transform:
        scale(1.035);

}


.image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(
                30,
                25,
                20,
                .48
            ),
            transparent 50%
        );

}



/* =========================================================
   CATEGORIE
========================================================= */

.card-category {

    position:
        absolute;

    top:
        22px;

    left:
        22px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 14px;

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

    border-radius:
        25px;

    background:
        rgba(
            40,
            35,
            28,
            .72
        );

    color:
        white;

    font-size:
        12px;

    font-weight:
        600;

    backdrop-filter:
        blur(5px);

}


.card-category i {

    color:
        var(--gold-light);

}



/* =========================================================
   NUMERO
========================================================= */

.card-number {

    position:
        absolute;

    right:
        22px;

    bottom:
        18px;

    color:
        rgba(
            255,
            255,
            255,
            .9
        );

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

    font-size:
        48px;

    font-weight:
        500;

}



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

.card-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        55px 48px;

}


.card-location {

    margin:
        0 0 8px;

    color:
        var(--gold-dark);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.card-content h2 {

    margin:
        0;

    color:
        var(--ink);

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

    font-size:
        clamp(
            42px,
            5vw,
            58px
        );

    line-height:
        .95;

    font-weight:
        600;

}


.small-separator {

    width:
        55px;

    height:
        2px;

    margin:
        23px 0;

    background:
        var(--gold);

}


.card-description {

    margin:
        0;

    color:
        #625b52;

    font-size:
        15px;

    line-height:
        1.75;

}


.card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        35px;

    padding-top:
        20px;

    border-top:
        1px solid
        #e6ded1;

}


.card-period {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #7a7165;

    font-size:
        12px;

}


.card-period i {

    color:
        var(--gold);

}


.card-arrow {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--beige);

    color:
        var(--gold-dark);

}



/* =========================================================
   BOUTON RANDOM FLOTTANT
========================================================= */

.next-button {

    position:
        absolute;

    right:
        -25px;

    top:
        50%;

    width:
        58px;

    height:
        58px;

    transform:
        translateY(-50%);

    display:
        grid;

    place-items:
        center;

    border:
        4px solid
        var(--cream);

    border-radius:
        50%;

    background:
        var(--gold);

    color:
        white;

    font-size:
        17px;

    cursor:
        pointer;

    box-shadow:
        0 7px 20px
        rgba(
            70,
            50,
            20,
            .2
        );

    transition:
        .25s ease;

}


.next-button:hover {

    transform:
        translateY(-50%)
        rotate(180deg);

    background:
        var(--gold-dark);

}



/* =========================================================
   AIDE
========================================================= */

.card-help {

    margin:
        25px 0 0;

    color:
        #8a8175;

    font-size:
        12px;

    text-align:
        center;

}


.card-help i {

    margin-right:
        5px;

    color:
        var(--gold);

}



/* =========================================================
   INTRO PATRIMOINE
========================================================= */

.heritage-intro {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        430px;

    padding:
        70px 25px;

    overflow:
        hidden;

    background:
        var(--green-soft);

}


.intro-decoration {

    position:
        absolute;

    left:
        8%;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        170px;

    height:
        170px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            60,
            75,
            65,
            .15
        );

    border-radius:
        50%;

    color:
        rgba(
            80,
            95,
            80,
            .35
        );

    font-size:
        45px;

}


.intro-content {

    width:
        min(
            700px,
            100%
        );

    text-align:
        center;

}


.intro-content h2 {

    margin:
        0 0 20px;

    color:
        var(--ink);

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

    font-size:
        clamp(
            40px,
            5vw,
            58px
        );

    line-height:
        .95;

}


.intro-content p:not(.eyebrow) {

    margin:
        0 auto 12px;

    color:
        #5e625c;

    line-height:
        1.7;

    font-size:
        15px;

}



/* =========================================================
   CTA
========================================================= */

.discover-cta {

    padding:
        80px 20px;

    background:
        var(--beige);

    text-align:
        center;

}


.cta-content {

    width:
        min(
            700px,
            100%
        );

    margin:
        0 auto;

}


.cta-content h2 {

    margin:
        0 0 15px;

    color:
        var(--ink);

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

    font-size:
        clamp(
            40px,
            5vw,
            58px
        );

    line-height:
        .95;

}


.cta-content p:not(.eyebrow) {

    margin:
        0 auto 25px;

    color:
        #62594e;

    line-height:
        1.6;

}


.cta-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        14px 23px;

    border-radius:
        30px;

    background:
        var(--ink);

    color:
        white;

    font-size:
        14px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        .25s ease;

}


.cta-button:hover {

    background:
        var(--gold-dark);

    transform:
        translateY(-2px);

}



/* =========================================================
   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;

    }


    .heritage-card {

        grid-template-columns:
            45% 55%;

    }


    .card-content {

        padding:
            40px 35px;

    }


    .next-button {

        right:
            -15px;

    }


    .intro-decoration {

        left:
            -70px;

    }


    .footer-container {

        grid-template-columns:
            1fr 1fr;

    }

}



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

@media (max-width: 800px) {


    /* NAVBAR */

    .barre {

        min-height:
            72px;

        display:
            flex;

        align-items:
            center;

        padding:
            10px 18px;

    }


    .logo {

        flex:
            1;

    }


    .menu-toggle {

        display:
            block;

        order:
            2;

        margin-left:
            auto;

    }


    .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;

    }



    /* HERO */

    .discover-hero {

        min-height:
            500px;

        padding:
            60px 20px;

    }


    .discover-hero h1 {

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

    }


    .hero-text {

        font-size:
            14px;

    }



    /* FILTERS */

    .filters-section {

        padding:
            25px 15px;

    }


    .filters {

        gap:
            7px;

    }


    .filter {

        padding:
            9px 12px;

        font-size:
            12px;

    }



    /* CARD */

    .card-section {

        padding:
            45px 15px 60px;

    }


    .heritage-card {

        display:
            block;

        min-height:
            auto;

    }


    .card-image {

        min-height:
            300px;

        height:
            300px;

    }


    .card-content {

        min-height:
            380px;

        padding:
            35px 25px;

    }


    .card-content h2 {

        font-size:
            44px;

    }


    .card-description {

        font-size:
            14px;

    }


    .next-button {

        right:
            15px;

        top:
            300px;

        transform:
            translateY(-50%);

    }


    .next-button:hover {

        transform:
            translateY(-50%)
            rotate(180deg);

    }



    /* INTRO */

    .heritage-intro {

        min-height:
            auto;

        padding:
            65px 20px;

    }


    .intro-decoration {

        display:
            none;

    }



    /* 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;

    }


    .discover-hero {

        min-height:
            530px;

    }


    .discover-button {

        width:
            100%;

        max-width:
            300px;

    }


    .filters {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }


    .filter {

        justify-content:
            center;

    }


    .filter:first-child {

        grid-column:
            1 / -1;

    }


    .card-image {

        height:
            260px;

        min-height:
            260px;

    }


    .card-content {

        min-height:
            400px;

        padding:
            30px 22px;

    }


    .card-content h2 {

        font-size:
            40px;

    }


    .next-button {

        top:
            260px;

    }


    .card-footer {

        margin-top:
            25px;

    }

}



/* =========================================================
   ACCESSIBILITE
========================================================= */

:focus-visible {

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

    outline-offset:
        3px;

}


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

    html {

        scroll-behavior:
            auto;

    }


    .heritage-card.card-change {

        animation:
            none;

    }

}