body{

margin:0;
background:#0d0d0d;
color:white;
font-family:Inter;

}

nav{

display:flex;
align-items:center;

padding:15px 40px;

position:fixed;
top:0;
left:0;

width:100%;

background:rgba(0,0,0,0.85);

backdrop-filter:blur(6px);

z-index:1000;

gap:465px;

}

nav ul{

display:flex;
list-style:none;
gap:50px;

}

nav a{

text-decoration:none;
color:white;

}

.logo{

font-family:Playfair Display;
font-size: 30px;

}

.hero {
  height: 80vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-slider img.slide {
  position: absolute;      /* superposition des images */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;              /* invisible par défaut */
  transition: opacity 1s ease-in-out;
}

.hero-slider img.slide.active {
  opacity: 0.6;            /* transparence souhaitée */
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.3);  /* sombre pour que le texte ressorte */
  z-index: 2;
}

.hero-text {
  position: relative;
  z-index: 3;             /* au-dessus des images et overlay */
  color: white;
  font-family: 'Times New Roman', Times, serif;
  font-size: 30px;
}

.buttons{

margin-top:40px;

}

.btn{

background:white;
color:black;
padding:12px 25px;
text-decoration:none;
margin-right:10px;

}

.btn-outline{

border:1px solid white;
padding:12px 25px;
text-decoration:none;
color:white;

}

section{

padding:100px 10%;

}

h2{

text-align:center;
margin-right: 250px;
margin-bottom:50px;
font-family:Playfair Display;

}

.gallery{

columns:4 200px;
column-gap:10px;

}

.gallery img{

width:80%;
margin-bottom:10px;

}

.about-container{

display:flex;
gap:50px;
align-items:center;

}

.about-container img{

width:200px;

}

footer{

text-align:center;
padding:20px;

background:black;

}

#lightbox{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.9);

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

z-index:999;

}

#lightbox.active{

display:flex;

}

#lightbox img{

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

}

section{

opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;

}

section.visible{

opacity:1;
transform:translateY(0);

}