/* FONTS */

/* Parisian */

@font-face {
  font-family: 'Parisian'; 
  src: url('../fonts/Parisian/Parisian.ttf') format("truetype"); 
  /* Autres propriétés facultatives */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Parisian-Bold'; 
  src: url('../fonts/Parisian/Parisian Bold.ttf') format("truetype"); 
  /* Autres propriétés facultatives */
  font-weight: normal;
  font-style: normal;
}

/* The Foregen */
@font-face {
  font-family: 'TheForegen-Regular';
  src: url('../fonts/TheForegen/The Foregen Regular.otf') format("opentype");
  src: url('../fonts/TheForegen/The Foregen Regular.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
}

/* Montserrat */

@font-face {
  font-family: 'Montserrat-Regular'; 
  src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); 
  /* Autres propriétés facultatives */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat-Bold'; 
  src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); 
  /* Autres propriétés facultatives */
  font-weight: normal;
  font-style: normal;
}





body{
    margin:0;
    padding:0;
    box-sizing: border-box;
    background-image: url("../assets/bg-vin.jpg");
}

#root{
    width: 1080px;
    height: 1920px;
    margin:0 auto;
}

header{
    width:100%;
    height:120px;
    margin-bottom:50px;
}

header h1{display:none;}

.header-content{
    width:100%;
    height:120px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.content-icon{
    width:150px;
    height:100px;
    display:flex;
    justify-content: space-around;
    align-items: center;
}

.content-icon img{
  width:130px;
}


.content-logo{
    width:400px;
    height:100px;
    display:flex;
    justify-content: space-around;
    align-items: center;
}

.content-logo img{
  width:400px;
}



.content-flags{
    width:400px;
    height:80px;
    display:flex;
    justify-content: space-around;
    align-items: center;
}

.content-flags a{
    width:50px;
    height:30px;
}

.content-flags a img{
  width:50px;
  height:30px;
}


/* ================================== */

main{
    width:100%;
    height:1250px;
    display:flex;
    justify-content: space-around;
    position:relative;
}

footer{
    width:100%;
    height:500px;
    display:flex;
}

/* footer figure{
  width:540px;
  height:500px;
  display:flex;
  justify-content:center;
  align-items: center;
  margin:0;
  overflow:hidden;
}

footer figure img{
  width:100%;
  height:100%;
  object-fit: cover;
} */


/* SWIPER */

.swiper {
  width: 100%;
  height: 500px;
}

.swiper-slide {
  width: 50%; /* 50% pour chaque slide */
  padding: 0 0px; /* Espacement entre les slides */
  display: flex;
  justify-content: center;
  align-items: center;
  height:500px;
}

.swiper-slide img {
  width: 100%; /* Occuper toute la largeur du conteneur */
  height: 100%; /* Occuper toute la hauteur du conteneur */
  object-fit: cover; /* Recadrer l'image pour occuper toute la surface */
}





.container-left{
    width:46%;
    height:1200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-bottom:50px;
}


.container-right{
  width:46%;
  height:1200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-bottom:50px;
}



/* -------------------- */

.block-dishes{
    margin:0px 0px 10px;
}

.headline-block-dishes{
    width:100%;
    height:100px;
    display:flex;
    align-items:center;
    margin-bottom:30px;
}

.headline-block-dishes img{
    width:100px;
    height:100px;
    border-radius:5px;
    margin-right:40px;
}

.headline-block-dishes h2{
    font-size: 20px;
    color:#38B6FF;
    font-family: 'PlayfairDisplay-Bold';
    margin:0;padding:0;
    text-transform:uppercase;
}


 .block-dishes h2{
    font-size: 32px;
    color: #4e061c;
    font-family: 'Parisian';
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    line-height:38px;
} 

.block-dishes h3{
    font-family: 'PlayfairDisplay-Medium'; 
    font-size:14px;
    display:flex;
}

.block-dishes h3 .icon-image{
    width:20px;
    background-image:url("../assets/icon-image.svg");
    background-repeat:no-repeat;
    background-size:18px 18px;
    background-position:center center;
    margin-right:5px;
    padding-bottom:2px;
}



.block-dishes-informations{
    padding:20px 0px; 
    font-family: 'Parisian';
    font-size:21px;
    text-align:center;
    color: #4e061c;
    font-weight:700;
}




#block-informations-ouverture{
    width:100%;
    color:#FFF;
    background-color: #4e061c;
    font-family: 'TheForegen-Regular';
    padding: 8px 0px;
}

#block-informations-ouverture p{
  font-size:21px;
  line-height:28px;
  text-align:center;
  padding: 0px 10px;
}





.row-dish{
    width:100%;
    margin:0 auto;
    margin: 3px 0px;
    display:flex;
    font-family: 'Montserrat-Medium'; 
    padding:15px 0px;
  }

.low-row-dish{padding: 10px 0px;}

.row-dish h3{
    font-family: 'TheForegen-Regular';
    font-size: 24px;
    margin: 0;
    letter-spacing: 0.5px;
    font-weight:500;
}

.row-dish p{
  font-size: 12px;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat-Regular';
  padding-top: 2px;
}
  
  .row-dish img{
    width:80px;
    height:80px;
    border-radius:5px;
    margin-right:30px;
  }
  
  .content-dish{
    width: 100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
  }

  .text-dish{

  }

  .content-dish .price{
    font-size: 21px;
    min-width: 90px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: right;
    padding: 5px;
    color: #000;
    font-family: 'TheForegen-Regular';
  }
  
/* FORMULES ----------- */

#block-dishes-formule h2{
    display:flex;
    justify-content: space-between;
}


#formule-midi-plats{
    display:flex;
    justify-content: space-between;
}

#formule-midi-plats .plat{
  width:45%;
  text-align:center;
  color:#38B6FF;
}

#formule-midi-plats .plat h4{margin:0;padding:0;font-size:16px;padding-top:30px;}

#formule-midi-plats .plat p{margin:0;padding:0;font-size:16px;}



#block-dishes-formule-midi h2{
  display:flex;
  justify-content: space-between;
}

#block-dishes-formule-midi .plat{
  margin-bottom:5px;
}

#block-dishes-formule-midi h4{
  font-family: 'Montserrat-Bold';
    font-size: 13px;
    margin: 0;
}

#block-dishes-formule-midi p{
    font-size: 11px;
    margin: 0;
    padding: 0;
}



/* MODAL ------------- */

.modal {
  display: none; /* Par défaut, la modal est cachée */
  position: fixed; /* La modal est positionnée de façon fixe par rapport à la fenêtre du navigateur */
  z-index: 1; /* La modal doit être au-dessus de tout le reste */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Activer le défilement si nécessaire */
  background-color: rgba(0,0,0,0.4); /* Fond sombre semi-transparent */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Centrer verticalement et horizontalement */
    padding: 20px;
    width: 80%; /* Largeur de la modal */
    position:relative;
}

.modal-details{
    margin:40px 0px 20px;
    display:flex;
    justify-content: space-between;
}

.modal-info {
    width:80%;
}

.modal-info h2{
    font-size: 19px;
    font-family: 'Montserrat-Medium';
}

.modal-info p{

}

#modal-prix{
    width:20%;
    font-size: 19px;
    text-align: right;
}

/* Style pour le bouton de fermeture */
.close {
  width:60px;
  height:60px;
  top:-25px;
  right:-25px;
  position:absolute;
  background:#FFF;
  border-radius:10px;
  opacity:1;
  background-image:url("../assets/icon-close.svg");
  background-repeat:no-repeat;
  background-size:40px 40px;
  background-position:center center;
}

.close:hover,
.close:focus {
  cursor: pointer;
  opacity:1;
}


/* ============================================= */
/* ============================================= */
/* MEDIAQUERIES ================================ */
/* ============================================= */
/* ============================================= */


@media screen and (max-width: 1023px) {
  #root{
    width:100%;
    height: auto;
  }

  header{
    width:90%;
    margin:0 auto;
  }

  .content-logo{width:30%;}
  .content-logo img{width: 180px;}
  .content-navigation{width:40%;}
  .content-navigation a{padding: 7px 12px;font-size:14px;}
  .content-flags{width:20%;}

  main{
    width:80%;
    height:auto;
    margin:0 auto;
    flex-direction: column;
  }

  .container-left{
    width:100%;
    height:auto;
    margin-bottom:20px;
  }

  .box-container-left{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom:20px;
  }

 

  .swiper {
    width: 100%;
    height: 500px;
  }

  .swiper-slide {
    width: 50%; /* 50% pour chaque slide */
    padding: 0 5px; /* Espacement entre les slides */
    display: flex;
    justify-content: center;
    align-items: center;
    height:500px;
    background:pink;
  }

  .swiper-slide img {
    width: 100%; /* Occuper toute la largeur du conteneur */
    height: auto; /* Occuper toute la hauteur du conteneur */
    object-fit: cover; /* Recadrer l'image pour occuper toute la surface */
    background:red;
  }




  .container-block-dishes{
    width:50%;
    padding:10px;
  }

  .container-block-dishes .block-dishes{
    margin-bottom:0px;
  }


  #block-dishes-formule-midi h2{margin-top:20px;}

  .container-center{
    width:100%;
    height:auto;
    margin-bottom:20px;
  }

  .container-right{
    width:100%;
    height:auto;
    margin-bottom:20px;
  }

  .block-dishes{
    margin-bottom:30px;
  }



}


/*
@media (min-width: 768px) and (max-width: 900px) {

  .container-block-dishes{width:45%;}
  #slider-container-gif{width:300px;}
}*/