* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #f7f5f0;
    color: #30332f;
    font-family: "DM Sans", sans-serif;
    line-height: 1.7;
}

a {
    color: inherit;
    text-decoration: none;
}


/* HEADER */

.header {
    height: 84px;
    padding: 0 6vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #e5e1d8;

    background: #f7f5f0;

    position: sticky;
    top: 0;

    z-index: 100;
}


.logo {
    font-family: "Playfair Display", serif;
    font-size: 22px;
    line-height: 1;
}


.logo span {
    display: block;

    margin-top: 6px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: #73786f;
}


.navigation {
    display: flex;
    align-items: center;
    gap: 30px;

    font-size: 14px;
}


.navigation a:not(.nav-button) {
    color: #666b63;
}


.nav-button,
.primary-button {
    background: #697a69;

    color: white;

    padding: 13px 20px;

    border-radius: 3px;

    transition: .25s;
}


.nav-button:hover,
.primary-button:hover {
    background: #586958;
}


.menu-button {
    display: none;

    border: 0;

    background: none;

    font-size: 24px;

    cursor: pointer;
}


/* GENERAL */

.eyebrow,
.section-number {
    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .18em;

    color: #718070;

    font-weight: 600;
}


h1,
h2,
h3 {
    font-family: "Playfair Display", serif;

    font-weight: 500;

    line-height: 1.05;
}


h1 em,
h2 em {
    font-style: italic;

    color: #697a69;
}


/* HERO */

.hero {

    min-height: calc(100vh - 84px);

    padding: 7vw;

    display: grid;

    grid-template-columns: 1fr .85fr;

    gap: 7vw;

    align-items: center;

}


.hero h1 {

    font-size: clamp(58px, 7vw, 100px);

    margin: 25px 0;

    letter-spacing: -.03em;

}


.hero-text {

    max-width: 600px;

    font-size: 17px;

    color: #656a62;

    margin-bottom: 35px;
}


.primary-button {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    font-size: 14px;
}


.hero-photo {

    height: 650px;

    background: #e3e1d8;
}


.photo-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #969990;

    font-size: 11px;

    letter-spacing: .15em;
}


/* INTRODUCTION */

.introduction {

    padding: 10vw 12vw;

    display: grid;

    grid-template-columns: .35fr 1fr;

    gap: 6vw;

    background: #ebe9e1;

}


.introduction h2 {

    margin-top: 0;

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


.introduction p {

    max-width: 700px;

    color: #666b63;
}


/* CARDS */

.accompagnement {

    padding: 10vw 12vw;
}


.cards {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    margin-top: 55px;
}


.card {

    background: #eeece5;

    padding: 40px;

    min-height: 280px;
}


.card span {

    color: #778176;

    font-size: 11px;

    letter-spacing: .15em;
}


.card h3 {

    font-size: 32px;

    margin-top: 45px;

    margin-bottom: 15px;
}


.card p {

    font-size: 14px;

    color: #696e67;
}


/* SESSIONS */

.sessions {

    padding: 8vw 10vw;

    display: grid;

    grid-template-columns: .9fr 1fr;

    gap: 8vw;

    align-items: center;

    background: #e3e7df;
}


.session-photo {

    height: 560px;

    background: #d5d9d0;
}


.session-content h2 {

    font-size: clamp(50px, 5vw, 75px);

    margin: 25px 0 40px;
}


.details {

    border-top: 1px solid #c8cec5;

    margin-bottom: 35px;
}


.detail {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid #c8cec5;

    font-size: 14px;
}


.detail span {

    text-align: right;

    color: #666c63;
}


/* CABINET */

.cabinet {

    padding: 10vw 12vw;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7vw;

    align-items: center;
}


.cabinet h2 {

    font-size: clamp(48px, 5vw, 72px);

    margin: 25px 0;
}


.cabinet p {

    max-width: 600px;

    color: #666b63;
}


.address {

    margin-top: 30px;

    color: #30332f !important;
}


.map-placeholder {

    height: 400px;

    background: #e5e2d9;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #969990;

    font-size: 11px;

    letter-spacing: .15em;
}


/* BOOKING */

.booking {

    padding: 10vw 7vw;

    background: #697a69;

    color: white;

    text-align: center;
}


.booking .eyebrow {

    color: #dfe6dc;
}


.booking h2 {

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

    margin: 25px 0;
}


.booking h2 em {

    color: #e4ebe2;
}


.booking-content > p:not(.eyebrow):not(.booking-note) {

    max-width: 550px;

    margin: 0 auto 35px;

    color: #dce2da;
}


.booking-button {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding: 15px 23px;

    background: #f7f5f0;

    color: #465447;

    border-radius: 3px;

    font-size: 14px;
}


.booking-note {

    margin-top: 30px;

    font-size: 12px;

    color: #dce2da;
}


/* FOOTER */

footer {

    padding: 50px 7vw 30px;

    background: #292d29;

    color: #e8e7e0;

    display: grid;

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

    gap: 40px;

}


.footer-logo {

    font-family: "Playfair Display", serif;

    font-size: 21px;
}


.footer-logo span {

    display: block;

    margin-top: 5px;

    font-family: "DM Sans", sans-serif;

    font-size: 10px;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: #92988f;
}


.footer-links,
.footer-legal {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    align-content: flex-start;

    font-size: 12px;

    color: #c1c6bd;
}


.copyright {

    grid-column: 1 / -1;

    margin: 20px 0 0;

    font-size: 11px;

    color: #858c83;
}


/* MOBILE */

@media (max-width: 850px) {

    .header {
        padding: 0 5vw;
    }


    .navigation {
        display: none;
    }


    .menu-button {
        display: block;
    }


    .hero {

        grid-template-columns: 1fr;

        padding: 15vw 7vw;

    }


    .hero-photo {

        order: -1;

        height: 430px;

    }


    .hero h1 {

        font-size: 56px;

    }


    .introduction {

        grid-template-columns: 1fr;

        padding: 18vw 8vw;

    }


    .accompagnement {

        padding: 18vw 8vw;

    }


    .cards {

        grid-template-columns: 1fr;

    }


    .sessions {

        grid-template-columns: 1fr;

        padding: 15vw 8vw;

    }


    .session-photo {

        height: 400px;

    }


    .cabinet {

        grid-template-columns: 1fr;

        padding: 18vw 8vw;

    }


    .booking {

        padding: 18vw 8vw;

    }


    footer {

        grid-template-columns: 1fr;

        padding: 50px 8vw;

    }

}