:root {
    --color-primary: #9C5239;
    --color-secondary: #F0E5D6;
    --color-dark: #351c13;
    --color-blue: #155975;

    --font-title-pacifico: 'Pacifico', cursive;
    --font-title-cormorant: "Cormorant Garamond", serif;

    --font-title-playfair: 'Playfair Display', serif;
    --font-title-lobster: 'Lobster', cursive;
    --font-body: 'Open Sans', sans-serif;
}
/* Reset basique */
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

/* général */
h1, h2, h3 {
  /* font-family: var(--font-title-pacifico);
  font-family: var(--font-title-lobster); */
  font-family: var(--font-title-cormorant);
  font-weight: 100;
  line-height: 1.1;
}
h1{
  font-size: 4rem;
  margin-bottom: 1rem;
}
h2{
  font-size: 1.6rem;
  margin-bottom: 2.2rem;
  span{
    color: var(--color-dark);
    font-weight: 400;
    font-size: 2.6rem;
  }
}
h3{
  font-size: 1.6rem;
  margin-bottom: 1.2rem;

}

h2, h3 {
  color: var(--color-primary);
}

p, li {
  font-family: sans-serif;
  font-weight: 100;
  line-height: 1.4;
  letter-spacing: .02rem;
}
body{
  background-color: var(--color-secondary);
  color: var(--color-dark);
}

.button{
  transition: all 0.3s ease, visibility 0s;
  border-radius: 50px;
  text-decoration: none;
  padding: 12px 24px;
  color: white;
  width: fit-content;
}
.button:hover{
  scale: 1.05;
}
.primary{
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.secondary{
  background: white;
  border: 1px solid white;

}
.primary.ghost{
  color: var(--color-primary);
}
.ghost{
  background: transparent;
}

/* Navbar fixe */
nav {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  background: transparent;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  z-index: 1000;
  .logo{
    width: 80px;
    img{
      width: 100%;
    }
  }
}
nav a { color: #fff; text-decoration: none; margin-left: 1rem; }


/* Hero */
.hero {
  height: 72vh;
  background: linear-gradient(#2710011f), url(assets/heropic.webp) center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding-bottom: 10vh;
  text-shadow: 0 4px 4px #00000040;
  p {
    font-size: 1.1rem;
    margin-bottom: 3.8rem;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero .content{
  opacity: 0;
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.3s;
}


/* Sections */
section {
  padding-block: 120px;
}
.container{
  max-width: 1080px;
  padding-inline: 24px;
  margin: auto;
}

.content.centered {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.per72{
  max-width: 72%;
}

/* section2 */
.section2-img-wrapper{
  display: flex;
  justify-content: space-between;
  width: 100vw;
  padding-top: 14vh;
  .img-container{
    height: max-content;
  }
  .img-container:nth-child(1){
    aspect-ratio: 2 / 3;
    width: 200px;
    align-self: end;
    bottom: 43px;
  }
  .img-container:nth-child(2){
    aspect-ratio: 6.7 / 5;
    width: 675px;
  }
  .img-container:nth-child(3){
    aspect-ratio: 2 / 3;
    width: 200px;
    top: -7vh;
  }
}
.img-container {
  position: relative;
  aspect-ratio: 1;
  display: inline-block;
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(156, 82, 57, 0.19); /* marron semi-transparent comme ton gradient */
  pointer-events: none; /* permet de cliquer sur l'image si besoin */
}

/* section specialites */
#specialites{
  background-color: var(--color-primary);
  color: white;
  text-align: center;
  padding-block: 80px;
  .container{
    max-width: 1152px;
  }
  h2{
    font-weight: 400;
    font-size: 2.6rem;
    margin-bottom: 1rem;
  }
  h2, h3{
    color: white;
  }
  .card-container{
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    .card{
      padding-inline: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 32%;
      p{
        line-height: 1.4;
        font-size: .9rem;
      }
    }
    .card:nth-child(2){
      border-inline: white 1px solid;
    }
  }
}


/* horaires */
#horaires{
  position: relative;
  .card-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

#horaires .img-wrapper{
  position: absolute;
  z-index: -1;
  display: flex;
  justify-content: space-between;
  inset: 0;
  .img-container{
    height: max-content;
  }
  .img-container:nth-child(1){
    aspect-ratio: 2 / 3;
    width: 245px;
    align-self: end;
    bottom: 45px;
  }
  .img-container:nth-child(2){
    aspect-ratio: 2 / 3;
    width: 245px;
    top: 54px;
  }
}

/* contact */
#contact{
    position: relative;
    height: calc(63vh + 240px);
    display: flex;
    align-items: center;
  .img-container{
    position: absolute;
    top: 50%;
    right: 0;
    z-index: -1;
    transform: translateY(-50%);
    width: 66vw;
    height: 63vh;
  }
  *{
    color: white;
  }
  .content {
    background: var(--color-primary);
    width: 44vw;
    padding: 64px 120px;
    margin-left: 4vw;
  }
}

/* Footer */
footer {
    background: var(--color-dark);
    color: #fff;
    text-align: center;
    padding: 2rem;
}

/* Responsive */
@media(max-width:768px){
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; }
    .products, .delivery { flex-direction: column; align-items: center; }

    #specialites {
      .card-container {
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-top: 64px;
        & .card {
            width: unset;
        }
      }
    }
    #horaires{
      .content {
        background: #ede7dfed;
        padding: 34px 12px;
        box-shadow: 0 4px 15px #00000021;
      }
    }
    #contact {
    height: calc(40vh + 240px);
      .content {
          width: 93vw;
          padding: 28px 24px;
          margin: auto;
          box-shadow: 0 4px 15px #00000021;
            text-align: center;
      }
      .img-container{
        height: 52vh;
      }
    }
}