:root{
--fond:#FDFCF8;
--texte:#55463C;
--police:"Avenir Next",Avenir,Inter,Helvetica,sans-serif;
}
body{
margin:0;
background:var(--fond);
color:var(--texte);
font-family:var(--police);
}
header{
height:8vh;
min-height:60px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 3rem;
}
.brand{font-size:1.6rem;}
nav a{
color:var(--texte);
text-decoration:none;
margin-left:1.2rem;
}
.hero{
height:80vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
.page-title{
    text-align:center;
    margin:60px 0;
}

.page-title h1{
    font-weight:300;
    font-size:48px;
}

.collection{
    max-width:1400px;
    margin:80px auto;
    padding:0 30px;
}

.collection h2{
    font-weight:300;
    color:#4D4037;
    margin-bottom:30px;
}

.gallery{
    column-count:4;
    column-gap:16px;
}

.gallery img{
    width:100%;
    margin-bottom:16px;
    display:block;
    break-inside:avoid;
    cursor:pointer;
    transition:opacity 0.3s;
}

.gallery img:hover{
    opacity:0.9;
}

@media (max-width:1200px){
    .gallery{
        column-count:3;
    }
}

@media (max-width:800px){
    .gallery{
        column-count:2;
    }
}

@media (max-width:500px){
    .gallery{
        column-count:1;
    }
}
.contact-page{
max-width:700px;
margin:80px auto;
padding:0 30px;
text-align;
}

.contact-page form{
display;
flex-direction;
max-width:600px;
margin:40px auto;
}

.contact-page label{
text-align;
margin-top:20px;
margin-bottom:8px;
}

.contact-page input,
.contact-page textarea{
padding:12px;
border:1px solid #ddd;
font-size:16px;
font-family;
}

.contact-page button{
margin-top:25px;
padding:14px;
border;
cursor;
background:#55463C;
color;
}
.brand a,
.brand a:visited,
.brand a:hover{
    color:var(--texte);
    text-decoration:none;
}
html{
    scroll-behavior:smooth;
}

.collection-nav{
    text-align:center;
    margin-top:20px;
}

.collection-nav a{
    color:var(--texte);
    text-decoration:none;
    margin:0 10px;
}

.collection-nav a:hover{
    opacity:0.7;
}
#lightbox{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(20,18,16,0.96);

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

    z-index:9999;
}

#lightbox-img{

    max-width:90%;
    max-height:90%;

    object-fit:contain;
}

#close{

    position:absolute;

    top:25px;
    right:35px;

    color:white;

    font-size:45px;

    cursor:pointer;
}

#prev,
#next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:white;

    font-size:60px;

    cursor:pointer;

    user-select:none;

    padding:20px;
}

#prev{
    left:20px;
}

#next{
    right:20px;
}
.hero a{
    color:var(--texte);
    text-decoration:none;
}

.hero a:hover{
    opacity:0,8;
}
@media (max-width:700px){

    header{
        flex-direction:column;
        height:auto;
        padding:20px;
    }

    .brand{
        margin-bottom:12px;
    }

    nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:8px 16px;
        max-width:340px;
    }

    nav a{
        margin:0;
    }

}

.content{
    max-width:1400px;
    margin:80px auto;
    padding:0 30px;
}

.content-hero{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding-top:80px;
padding-bottom:50px;
}

.content-hero h1{
    font-size:32px;
    font-weight:700;
}

.video-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
    gap:24px;
    max-width:1400px;
    margin:0 auto;
    padding:0 30px;
}

.video-item{
    aspect-ratio:16/9;
}

.video-item iframe{
    width:100%;
    height:100%;
    border:0;
    border-radius:4px;
}

.featured-video{
    max-width:1200px;
    margin:0 auto 80px auto;
    padding:0 30px;
}

.featured-video iframe{
    width:100%;
    aspect-ratio:16/9;
    border:0;
}

.featured-photo{
    max-width:1400px;
    margin:50px auto 80px auto;
    padding:0 30px;
}

.featured-photo img{
    width:100%;
    display:block;
    cursor:zoom-in;
}