@import url(https://fonts.bunny.net/css?family=cormorant-garamond:400,500,600|inter:300,400,500,600);

:root{

    /* Colors */

    --background:#F7F4EE;
    --background-soft:#EFE7DB;

    --text:#2F312D;
    --text-light:#66665E;

    --accent:#CDAE82;
    --accent-dark:#B18E61;

    --charette:#536A7A;

    --border:#DDD2C2;

    /* Layout */

    --container:1280px;

    --radius:18px;

    --shadow:0 20px 50px rgba(0,0,0,.06);

}

html:focus-within {
    scroll-behavior: smooth;
}

h1,h2,h3{
    font-family:"Cormorant Garamond", serif;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    font-weight: 500;
}

h3 {
    font-weight: 600;
}

body{
    font-family:"Inter", sans-serif;
    font-size: 1.125rem;
    line-height:1.85;
    font-weight: 400;
    background-color: var(--background);
    color: var(--text);
}

.hero {

    position: relative;

    min-height: 100dvh;

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

    overflow: hidden;

}


.hero-image {

    position: absolute;

    inset: -5% 0;

    background:
        url("../images/hero.jpg")
        center / cover no-repeat;

    transform: translateY(0);

}

.hero-content {

    position: relative;
    z-index: 2;

    width: min(90%, 900px);

    text-align: center;

    color: white;

    padding: 3rem;

    transform: translateY(8%);

}

.hero-location {

    margin: 0 0 1rem;

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

    font-size: .9rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: .35em;

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

    text-shadow: 0 2px 8px rgba(0,0,0,.15);

}


.hero-title {

    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(4rem, 8vw, 7rem);

    font-weight: 500;

    line-height: .95;

    letter-spacing: -.02em;

    color: white;

    text-shadow:
        0 2px 10px rgba(0,0,0,.20),
        0 8px 30px rgba(0,0,0,.12);

}

@media (max-width: 1024px){

    .hero{
        min-height: 80dvh;
    }

}

@media (max-width: 768px){

    .hero{
         min-height:60svh;
    }

    .hero-content{
        transform: translateY(30%);
    }
    
    .hero-location {
        font-size: .8rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }
}



.intro {

    padding:140px 0;

    background:#F7F4EE;

}


.intro-grid {

    display:grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap:90px;

    align-items:center;

}


.intro-image img {

    width:100%;

    aspect-ratio:4 / 6;

    object-fit:cover;

}


.intro-content {

    max-width:600px;

}


.intro p.eyebrow {

    margin-bottom:24px;

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

    font-size:14px;

    font-weight:500;

    letter-spacing:.25em;

    text-transform:uppercase;

    color: var(--charette);

}


.intro h2 {

    margin-bottom:40px;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.5rem,4vw,3.8rem);

    font-weight:500;

    line-height:1.05;

}


.intro p {
    margin-bottom:24px;
    color: var(--text-light);
    text-align: justify;
}





@media (max-width:768px) {

    .intro {
        padding: 80px 0;
    }

     .intro-image {

        display:none;

    }


    .intro-grid {

        display:block;

    }

    .intro-content {
        text-align:center;
        max-width:100%;
        margin: 0 10px;
    }

    .intro .eyebrow {

        margin-bottom:20px;
        justify-content:center;
    }


    .intro h2 {

        font-size:2.7rem;

        line-height:1.05;

        margin-bottom:30px;

    }


    .intro p {

        font-size:1rem;

        line-height:1.8;

    }    

}

/* ==========================================================
   DETAILS
========================================================== */

.details {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content: center;
    gap:18px;
    margin-top:48px;
    padding-top:32px;
    white-space:nowrap;
}

.details--separator {
    border-top:1px solid var(--border);
}

.details--left{
    justify-content: flex-start;
}


.details__item {

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

    font-size:12px;

    font-weight:500;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--charette);

}

.details__item:not(:last-child)::after {

    content:"·";

    margin-left:18px;

    color:var(--accent);

}

@media (max-width:768px) {
    .details {

        margin-top:40px;

        padding-top:25px;

        flex-direction:column;

        align-items:center;

        gap:14px;
    }

    .details__item{

        text-align:center;

    }


    .details__item:not(:last-child)::after {

        display:none;

    }
}


/* ==========================================================
   CONTENT
========================================================== */

.content {
    max-width:720px;
    margin:0 auto;
    text-align:center;
}

.content--left {
    text-align:left;
}

.content__eyebrow {
    justify-content:center;
    margin-bottom:24px;
}

.content__title {
    margin:0 0 40px;
    font-family:"Cormorant Garamond", serif;
    font-size:clamp(2.8rem,4vw,4.2rem);
    font-weight:500;
    line-height:1.05;
    color:var(--text);
}


.content__text {
    margin:0 auto 24px;
    font-family:"Inter",sans-serif;
    font-size:1.05rem;
    line-height:1.8;
    color:var(--text-light);
}


@media(max-width:768px){

    .content_title {

        font-size:2.7rem;

    }

    .content{
        margin: 0 10px;
    }

}



/* ==========================================================
   PARK SECTION
   ========================================================== */

.park {

    padding:0 0 140px;

    background:var(--background-soft);

}


/* IMAGE */

.park-image {

    width:100%;

    margin-bottom:80px;

}


.park-image img {

    display:block;

    width:100%;

    aspect-ratio:16 / 8.5;

    object-fit:cover;

}



/* CONTENT */

.park-content {

    max-width:760px;

    margin:0 auto;

    text-align:center;
    
}


.park-content .eyebrow {

    justify-content:center;

    margin-bottom:24px;

}


/* TITRE */

.park h2 {

    margin:0 0 40px;

    font-family:"Cormorant Garamond", serif;

    font-size:clamp(2.8rem,4vw,4.2rem);

    font-weight:500;

    line-height:1.05;

    color:var(--text);

}



/* TEXTE */

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

    margin:0 auto 24px;

    max-width:650px;

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

    font-size:1.05rem;

    line-height:1.8;

    color:var(--text-light);

}



/* DETAILS */

.park-details {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:50px;

    padding-top:30px;

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

}


.park-details span {

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

    font-size:12px;

    font-weight:500;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--charette);

}


.park-details span:not(:last-child)::after {

    content:"·";

    margin-left:18px;

    color:var(--accent);

}


@media(max-width:768px){


    .park {

        padding:0 0 80px;

    }


    .park-image {

        margin-bottom:50px;

    }


    .park-image img {

        aspect-ratio:8 / 8.5;        

    }


    .park h2 {

        font-size:2.7rem;

    }

    .park-content{
        margin: 0 10px;
    }

    .park-details {

        flex-direction:column;

        gap:14px;

    }


    .park-details span:not(:last-child)::after {

        display:none;

    }

}



/* ==========================================================
   POOL SECTION
   ========================================================== */


.pool {

    padding:140px 0;

    background:var(--background);

}


/* HEADER */

.pool-header {

    max-width:780px;

    margin:0 auto 70px;

    text-align:center;

}


.pool h2 {

    margin:25px 0 35px;

    font-family:"Cormorant Garamond", serif;

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

    font-weight:500;

    line-height:1.05;

    color:var(--text);

    text-wrap:balance;

}


.pool-header p:not(.eyebrow) {

    margin:0 auto 22px;

    max-width:720px;

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

    font-size:1rem;

    line-height:1.85;

    color:var(--text-light);

}



/* IMAGE */

.pool-image {

    margin:0;

}


.pool-image img {

    display:block;

    width:100%;

    aspect-ratio:16 / 9;

    object-fit:cover;

}

/* ==========================================================
   POOL DETAILS
   ========================================================== */

.pool-details {

    display:flex;

    flex-wrap:nowrap;

    align-items:center;
    justify-content:center;

    gap:18px;

    margin-top:48px;    

    white-space:nowrap;

}


.pool-details span {

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

    font-size:12px;

    font-weight:500;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--charette);

}


.pool-details span:not(:last-child)::after {

    content:"·";

    margin-left:18px;

    color:var(--accent);

}

@media(max-width:768px) {


    .pool {

        padding:80px 0;

    }


    .pool-header {

        margin-bottom:45px;

    }


    .pool h2 {

        font-size:2.8rem;

    }


    .pool-image img {

        aspect-ratio:4 / 3;

    }


     .pool-details {

        margin-top:40px;

        padding-top:25px;

        flex-direction:column;

        align-items:center;

        gap:14px;
    }

    .pool-details span {

        text-align:center;

    }


    .pool-details span:not(:last-child)::after {

        display:none;

    }

}




.living {

    background:var(--background-soft);

    margin:0 auto;

    padding:140px 30px;

    text-align: center;

}


.living__intro {

    max-width:720px;

    margin:0 auto 70px;

}


.living__eyebrow {

    font-size:.75rem;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:#536A7A;

    margin-bottom:25px;

}


.living__title {

    font-family:"Cormorant Garamond", serif;

    font-size:4rem;

    line-height:1;

    font-weight:500;

    margin:0 0 35px;

}


.living__text {

    color:#66665E;

    line-height:1.8;

    margin-bottom:20px;

}


.living__hero {

    max-width:1200px;

    margin:0 auto 40px;

}


.living__hero img {

    display:block;

    width:100%;

    aspect-ratio:16 / 9;

    object-fit:cover;

}


.living__gallery {

    max-width:1200px;


    display:grid;

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

    gap:25px;

    margin:0 auto;
}


.living__gallery figure {

    margin:0;

}


.living__gallery img {

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    display:block;

}


.living__details {

    display:flex;

    flex-wrap:wrap;

    gap:0;

    max-width:1200px;
    
    margin:35px auto 0;

}


.living__details span {

    position:relative;

    padding-right:18px;

    margin-right:18px;

    font-size:.75rem;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:#536A7A;

}


.living__details span:not(:last-child)::after {

    content:"•";

    position:absolute;

    right:0;

    color:#CDAE82;

}



/* ==========================================================
   PRIVATE — ESPACES PRIVÉS
   ========================================================== */

.private {

    max-width:1200px;

    margin:0 auto;

    padding:140px 30px;

    text-align: center;
}


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

.private__intro {

    max-width:720px;

    margin-bottom:70px;

}


.private__eyebrow {

    margin:0 0 25px;

    font-size:.75rem;

    font-weight:500;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--charette);

}


.private__title {

    margin:0 0 35px;

    font-family:"Cormorant Garamond", serif;

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

    font-weight:500;

    line-height:1.02;

    color:var(--text);

}


.private__text {

    margin:0 0 20px;

    color:var(--text-light);

    font-size:1rem;

    line-height:1.8;

}


/* ==========================================================
   IMAGE PRINCIPALE
   ========================================================== */

.private__hero {

    margin:0 0 40px;

}


.private__hero img {

    display:block;

    width:100%;

    aspect-ratio:3 / 2;

    object-fit:cover;

}


/* ==========================================================
   GALERIE
   ========================================================== */

.private__gallery {

    display:grid;

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

    gap:25px;

}


.private__gallery figure {

    margin:0;

}


.private__gallery img {

    display:block;

    width:100%;

    aspect-ratio:3 / 2;

    object-fit:cover;

}


/* ==========================================================
   DÉTAILS
   ========================================================== */

.private__details {

    display:flex;

    flex-wrap:wrap;

    margin-top:35px;

}


.private__details span {

    position:relative;

    margin-right:18px;

    padding-right:18px;

    font-size:.75rem;

    font-weight:500;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:var(--charette);

}


.private__details span:not(:last-child)::after {

    content:"•";

    position:absolute;

    right:0;

    color:var(--accent);

}


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

@media (max-width:768px) {

    .private {

        padding:80px 24px;

    }


    .private__intro {

        max-width:100%;

        margin-bottom:45px;

        text-align:center;

    }


    .private__eyebrow {

        margin-bottom:18px;

    }


    .private__title {

        margin-bottom:28px;

        font-size:2.7rem;

    }


    .private__text {

        line-height:1.8;

    }


    .private__hero {

        margin-bottom:20px;

    }


    .private__gallery {

        grid-template-columns:1fr;

        gap:20px;

    }


    .private__gallery img {

        aspect-ratio:3 / 2;

    }


    .private__details {

        justify-content:center;

        margin-top:30px;

        text-align:center;

    }


    .private__details span {

        margin-right:12px;

        padding-right:12px;

        line-height:2;

    }

}


/* ==========================================================
   LUBERON
   ========================================================== */

.luberon {
    background: var(--background-soft);        
    padding: 140px 0;
}

.luberon > *{
    max-width: 1200px;
    margin: 0 auto;    
}

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

.luberon__intro {

    max-width: 760px;

    margin: 0 auto 70px;

    text-align: center;

}


.luberon__eyebrow {

    margin: 0 0 25px;

    font-size: .75rem;

    font-weight: 500;

    letter-spacing: .25em;

    text-transform: uppercase;

    color: var(--charette);

}


.luberon__title {

    margin: 0 0 35px;

    font-family: "Cormorant Garamond", serif;

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

    font-weight: 500;

    line-height: 1.02;

    color: var(--text);

}


.luberon__text {

    margin: 0 0 20px;

    color: var(--text-light);

    font-size: 1rem;

    line-height: 1.8;

}


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


.luberon__hero img {

    display: block;

    width: 100%;

    object-fit: cover;

}


/* ==========================================================
   DÉTAILS
   ========================================================== */

.luberon__details {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    margin-top: 35px;

}


.luberon__details span {

    position: relative;

    margin-right: 18px;

    padding-right: 18px;

    font-size: .75rem;

    font-weight: 500;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: var(--charette);

}


.luberon__details span:not(:last-child)::after {

    content: "•";

    position: absolute;

    right: 0;

    color: var(--accent);

}


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

@media (max-width: 768px) {

    .luberon {

        padding: 80px 24px;

    }


    .luberon__intro {

        max-width: 100%;

        margin-bottom: 45px;

    }


    .luberon__eyebrow {

        margin-bottom: 18px;

    }


    .luberon__title {

        margin-bottom: 28px;

        font-size: 2.7rem;

    }


    .luberon__text {

        line-height: 1.8;

    }


    .luberon__hero img {

        aspect-ratio: 3 / 2;

    }


    .luberon__details {

        margin-top: 28px;

        text-align: center;

    }


    .luberon__details span {

        margin-right: 12px;

        padding-right: 12px;

        line-height: 2;

    }

}



.contact {

    padding:160px 0;

    background:var(--background);

    text-align:center;

}


.contact .container {

    max-width:760px;

    margin:auto;

}


/* EYEBROW */
.contact .eyebrow {

    margin-bottom:30px;

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

    font-size:13px;

    font-weight:500;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:var(--charette);

}



/* TITLE */

.contact h2 {

    margin:0 0 40px;

    font-family:"Cormorant Garamond",serif;

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

    font-weight:500;

    line-height:1.05;

    color:var(--text);

}



/* TEXT */

.contact-text {

    max-width:560px;

    margin:0 auto 55px;

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

    font-size:1.05rem;

    line-height:1.8;

    color:var(--text-light);

}



/* COORDONNEES */

.contact-links {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    margin-bottom:55px;

}


.contact-links a {

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

    font-size:16px;

    letter-spacing:.04em;

    color:var(--charette);

    text-decoration:none;

}


.contact-links a:first-child {

    font-size:20px;

    font-weight:500;

}


.contact-links a:hover {

    color:var(--accent-dark);

}

.contact-links a:first-child::before {

    content:"";

    display:block;

    width:40px;

    height:1px;

    margin:0 auto 20px;

    background:var(--accent);

}



/* LOCATION */

.contact-location {

    font-family:"Cormorant Garamond",serif;

    font-size:1.6rem;

    color:var(--accent-dark);

    letter-spacing:.05em;

}





@media(max-width:768px) {


    .contact {

        padding:90px 0;

    }


    .contact h2 {

        font-size:2.7rem;

    }


    .contact-links {

        flex-direction:column;

        gap:20px;

    }


}