:root {

    --cream: #faf8f4;
    --paper: #fffdf9;

    --gold: #c49b4c;
    --gold-dark: #9a722e;

    --ink: #302c27;
    --text: #4a4a4a;

    --soft: #f3ede2;

    --green-soft: #dce4e0;

}



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

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {

    scroll-behavior: smooth;

    scroll-padding-top: 82px;

}


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

}


button,
a {

    -webkit-tap-highlight-color:
        transparent;

}


a {

    color: inherit;

}



/* =========================================================
   POPUP DISCORD
========================================================= */

.discord-overlay {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, .55);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

}


.discord-overlay.is-hidden {

    display: none;

}


.discord-popup {

    position: relative;

    width: min(100%, 450px);

    padding:
        40px
        30px
        30px;

    border-radius: 20px;

    background: white;

    text-align: center;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, .35);

    animation:
        discordPopupIn
        .35s
        ease;

}


@keyframes discordPopupIn {

    from {

        opacity: 0;

        transform:
            scale(.85)
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

    }

}


.discord-icon {

    width: 75px;

    height: 75px;

    margin:
        0 auto 20px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #5865f2;

    color: white;

    font-size: 35px;

}


.discord-popup h2 {

    margin:
        0 0 15px;

    color: #222;

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

    font-size: 30px;

}


.discord-popup p {

    margin:
        0 0 25px;

    color: #666;

    line-height: 1.6;

    font-size: 15px;

}


.discord-button {

    display: block;

    padding:
        14px
        20px;

    border-radius: 10px;

    background: #5865f2;

    color: white;

    font-weight: 700;

    text-decoration: none;

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

}


.discord-button:hover {

    background: #4752c4;

    transform:
        translateY(-2px);

}


.discord-close,
.discord-later {

    border: 0;

    background: transparent;

    cursor: pointer;

}


.discord-close {

    position: absolute;

    top: 10px;

    right: 15px;

    color: #888;

    font-size: 30px;

}


.discord-close:hover {

    color: #222;

}


.discord-later {

    margin-top: 15px;

    color: #777;

    font-size: 14px;

}



/* =========================================================
   HEADER
========================================================= */

.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, .04);

}



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

.logo {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    color: #171717;

    text-decoration: none;

}


.logo-titre {

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

    font-size: 21px;

    line-height: 1.05;

    letter-spacing: -.3px;

}


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

    transition:
        color .25s ease;

}


.link a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 18px;

    width: 0;

    height: 2px;

    background:
        var(--gold);

    transition:
        width .25s ease;

}


.link a:hover,
.link a.accueil {

    color:
        var(--gold-dark);

}


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

    width: 100%;

}



/* =========================================================
   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:
        var(--paper);

    font-size: 14px;

    text-decoration: none;

    transition:
        .25s ease;

}


.map i {

    color:
        #d5b36b;

}


.map:hover {

    background:
        var(--soft);

    color:
        var(--ink);

    border-color:
        #c9a45e;

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 18px
        rgba(80, 65, 40, .12);

}



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

.menu-toggle {

    display: none;

    width: 44px;

    height: 44px;

    margin-left: auto;

    border:
        1px solid #d8ccb9;

    border-radius: 50%;

    background:
        transparent;

    color:
        var(--ink);

    font-size: 18px;

    cursor: pointer;

}



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

main {

    padding-top: 78px;

}



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

.castle {

    position: relative;

    min-height:
        clamp(
            390px,
            55vw,
            650px
        );

    display: flex;

    align-items: center;

    overflow: hidden;

}


.chato {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 17, 13, .72),
            rgba(20, 17, 13, .25) 55%,
            rgba(20, 17, 13, .05)
        );

}


.txt {

    position: relative;

    z-index: 1;

    width:
        min(900px, 100%);

    margin:
        0 auto;

    padding:
        60px 45px;

    color: white;

    animation:
        heroText
        1s
        ease;

}


@keyframes heroText {

    from {

        opacity: 0;

        transform:
            translateX(-60px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


.txt h1 {

    margin: 0;

    color: white;

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

    font-size:
        clamp(
            44px,
            6vw,
            72px
        );

    line-height: .95;

    font-weight: 600;

}


.separator {

    width: 90px;

    height: 3px;

    margin:
        20px 0;

    background:
        #c59b2f;

}


.txt p {

    max-width: 700px;

    margin:
        0 0 28px;

    color: white;

    font-size:
        clamp(
            16px,
            1.8vw,
            20px
        );

    line-height: 1.5;

}


.explor {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 18px;

    border-radius: 40px;

    background:
        #c89b3c;

    color: white;

    font-weight: 600;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease;

}


.explor:hover {

    background:
        #a97f2e;

    transform:
        translateY(-2px);

}



/* =========================================================
   SECTION PATRIMOINE
========================================================= */

.box {

    min-height: 470px;

    display: grid;

    grid-template-columns:
        minmax(260px, .75fr)
        minmax(0, 1.7fr);

    align-items: center;

    gap: 35px;

    padding:
        65px
        max(30px, 5vw);

    background:
        #f3e8d5;

}


.para {

    max-width: 420px;

}


.eyebrow {

    margin:
        0 0 8px;

    color:
        #c89b3c;

    font-size: 15px;

    font-weight: 700;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;

}


.para h2,
.lettre h2 {

    margin:
        0 0 18px;

    color:
        #4a4a4a;

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

    font-size:
        clamp(
            38px,
            4vw,
            54px
        );

    line-height: .95;

}


.legende {

    margin:
        0 0 25px;

    color:
        #4a4a4a;

    font-size: 15px;

    line-height: 1.65;

}


.plus {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 22px;

    border-radius: 40px;

    background: black;

    color: white;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease;

}


.plus:hover {

    background:
        #c89b3c;

    transform:
        translateY(-2px);

}



/* =========================================================
   CARTES PATRIMOINE
========================================================= */

.patri {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 18px;

}


.patrimoine-card {

    position: relative;

    min-width: 0;

    min-height: 310px;

    padding-bottom: 48px;

    overflow: hidden;

    border-radius: 20px;

    background:
        #f3efea;

    text-align: center;

    box-shadow:
        0 8px 24px
        rgba(70, 55, 35, .08);

    animation:
        cardUp
        .7s
        ease
        both;

}


.patrimoine-card:nth-child(2) {
    animation-delay: .1s;
}

.patrimoine-card:nth-child(3) {
    animation-delay: .2s;
}

.patrimoine-card:nth-child(4) {
    animation-delay: .3s;
}


@keyframes cardUp {

    from {

        opacity: 0;

        transform:
            translateY(30px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.patrimoine-card > img {

    width: 100%;

    height: 135px;

    object-fit: cover;

}


.icon {

    position: absolute;

    top: 110px;

    left: 50%;

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #f3e8d5;

    color:
        #c59b2f;

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, .1);

}


.contenues {

    padding:
        24px 12px 0;

}


.contenues h3 {

    margin:
        0 0 8px;

    color:
        #222;

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

    font-size: 22px;

    font-weight: 600;

}


.contenues p {

    margin: 0;

    color:
        #555;

    font-size: 12px;

    line-height: 1.45;

}


.patrimoine-card > a {

    position: absolute;

    right: 12px;

    bottom: 14px;

    left: 12px;

    padding: 8px;

    border-radius: 30px;

    background:
        #302c27;

    color: white;

    font-size: 13px;

    text-decoration: none;

}



/* =========================================================
   INCONTOURNABLES
========================================================= */

.manquer {

    display: grid;

    grid-template-columns:
        minmax(190px, .35fr)
        1fr;

    align-items: center;

    gap: 30px;

    min-height: 330px;

    padding:
        55px
        max(25px, 4vw);

    background:
        var(--green-soft);

}


.lettre h2 {

    margin-bottom: 0;

    font-size:
        clamp(
            36px,
            4vw,
            50px
        );

}


.incon {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 18px;

}


.incontournable {

    position: relative;

    min-width: 0;

    height: 180px;

    overflow: hidden;

    border-radius: 10px;

    background:
        var(--cream);

    transition:
        transform .3s ease;

}


.incontournable:hover {

    transform:
        translateY(-5px);

}


.incontournable img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

}


.learn {

    position: absolute;

    right: 10px;

    bottom: 10px;

    left: 10px;

    padding:
        8px 10px;

    border-radius: 6px;

    background:
        rgba(
            250,
            248,
            244,
            .95
        );

}


.learn h3 {

    margin:
        0 0 2px;

    color:
        #514e4e;

    font-size: 13px;

    line-height: 1.2;

}


.learn p {

    margin: 0;

    color:
        #7f7e7e;

    font-size: 11px;

}



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

.footer {

    background:
        #f4efe6;

    color:
        #3f382f;

    border-top:
        1px solid #d6b46a;

}


.footer-container {

    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;

    padding:
        60px 30px 45px;

    display: grid;

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

    gap: 45px;

}


.footer-brand h2 {

    margin:
        0 0 15px;

    color:
        #302b25;

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

    font-size: 30px;

    font-weight: 500;

}


.footer-brand h2 span {

    color:
        #b9974f;

    font-style: italic;

}


.footer-brand p {

    max-width: 330px;

    margin: 0;

    color:
        #756b5e;

    line-height: 1.8;

    font-size: 15px;

}


.footer-column h3 {

    margin:
        0 0 18px;

    color:
        #a17e38;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform:
        uppercase;

}


.footer-column a {

    display: block;

    width: fit-content;

    margin-bottom: 11px;

    color:
        #62594e;

    font-size: 15px;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;

}


.footer-column a:hover {

    color:
        #b9974f;

    transform:
        translateX(4px);

}


.footer-bottom {

    width:
        min(
            1200px,
            100%
        );

    margin:
        0 auto;

    padding:
        20px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid #ddd2c0;

    color:
        #82786b;

    font-family:
        Arial,
        sans-serif;

    font-size: 13px;

}


.footer-bottom p {

    margin: 0;

}


.footer-bottom strong {

    color:
        #a17e38;

    font-weight: 600;

}


.legal-links {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

}


.legal-links a {

    color:
        #82786b;

    text-decoration: none;

}


.legal-links a:hover {

    color:
        #a17e38;

}



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

@media (max-width: 1050px) {


    .barre {

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

        padding:
            0 20px;

    }


    .link {

        gap: 20px;

    }


    .link a {

        font-size: 14px;

    }


    .map {

        padding:
            10px 14px;

    }


    .box {

        grid-template-columns: 1fr;

        padding-block:
            55px;

    }


    .para {

        max-width: 700px;

        margin:
            0 auto;

        text-align: center;

    }


    .patri {

        width:
            min(
                760px,
                100%
            );

        margin:
            0 auto;

    }


    .manquer {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .incon {

        width:
            min(
                800px,
                100%
            );

        margin:
            0 auto;

    }

}



/* =========================================================
   TABLETTE PETITE / MOBILE
========================================================= */

@media (max-width: 800px) {


    .barre {

        min-height: 72px;

        display: flex;

        padding:
            10px 18px;

    }


    .logo {

        flex: 1;

    }


    .menu-toggle {

        display: block;

        order: 2;

    }


    .carte {

        order: 3;

        margin-left: 10px;

    }


    .map {

        width: 42px;

        height: 42px;

        padding: 0;

        border-radius: 50%;

    }


    .map span {

        display: none;

    }


    /* MENU */

    .link {

        position: absolute;

        top: 100%;

        right: 0;

        left: 0;

        height: auto;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding:
            8px
            18px
            16px;

        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;

    }


    .link a::after {

        bottom: 7px;

    }


    main {

        padding-top: 72px;

    }



    /* HERO */

    .castle {

        min-height: 560px;

    }


    .hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(20,17,13,.72),
                rgba(20,17,13,.35)
            );

    }


    .txt {

        padding:
            40px 24px;

        margin: 0;

    }


    .txt h1 {

        font-size:
            clamp(
                42px,
                12vw,
                62px
            );

    }


    .txt p {

        font-size: 16px;

    }


    .desktop-only {

        display: none;

    }



    /* PATRIMOINE */

    .box {

        padding:
            50px 18px;

    }


    .patri {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 14px;

    }


    .patrimoine-card {

        min-height: 300px;

    }



    /* INCONTOURNABLES */

    .manquer {

        padding:
            50px 18px;

    }


    .incon {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 14px;

    }



    /* FOOTER */

    .footer-container {

        grid-template-columns:
            1fr 1fr;

        gap:
            35px 25px;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }


    .footer-bottom {

        flex-direction:
            column;

        text-align:
            center;

    }


    .legal-links {

        justify-content:
            center;

    }

}



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

@media (max-width: 550px) {


    .logo-titre {

        font-size: 18px;

    }


    .menu-toggle,
    .map {

        width: 40px;

        height: 40px;

    }



    /* POPUP */

    .discord-popup {

        padding:
            35px 20px 25px;

    }


    .discord-popup h2 {

        font-size: 24px;

    }



    /* HERO */

    .castle {

        min-height: 520px;

    }


    .txt {

        padding:
            35px 20px;

    }


    .txt h1 {

        font-size:
            clamp(
                40px,
                13vw,
                54px
            );

    }


    .txt p {

        line-height:
            1.45;

    }



    /* PATRIMOINE */

    .box {

        padding:
            45px 16px;

    }


    .para h2,
    .lettre h2 {

        font-size: 40px;

    }


    .patri {

        grid-template-columns: 1fr;

        max-width: 330px;

        margin:
            0 auto;

    }


    .patrimoine-card {

        min-height: 290px;

    }



    /* INCONTOURNABLES */

    .manquer {

        padding:
            45px 16px;

    }


    .incon {

        grid-template-columns: 1fr;

        width:
            min(
                330px,
                100%
            );

    }


    .incontournable {

        height: 190px;

    }



    /* FOOTER */

    .footer-container {

        grid-template-columns: 1fr;

        padding:
            45px 22px 30px;

    }


    .footer-brand {

        grid-column:
            auto;

    }


    .footer-bottom {

        padding:
            20px;

    }


    .legal-links {

        flex-direction:
            column;

        gap: 10px;

    }

}



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

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


    html {

        scroll-behavior:
            auto;

    }


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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}


:focus-visible {

    outline:
        3px solid #c49b4c;

    outline-offset:
        3px;

}