/* 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-navigation{
    width:400px;
    height:80px;
    display:flex;
    justify-content: space-around;
    align-items: center;
}

.content-navigation a{
    color: #FFF;
    padding: 10px 20px;
    font-size: 16px;
    background: #38B6FF;
    text-transform: uppercase;
    border-radius: 3px;
    font-family: 'Montserrat-Medium';
    box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.02), 0px 2px 4px rgba(3, 7, 18, 0.03), 0px 4px 9px rgba(3, 7, 18, 0.05), 0px 6px 12px rgba(3, 7, 18, 0.06), 0px 10px 15px rgba(3, 7, 18, 0.08);
}

.content-navigation a:hover{text-decoration:none;}
*/

.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:1300px;
    display:flex;
    justify-content: space-around;
    position:relative;
    padding-bottom:50px;
}

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



/* SWIPER */

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

.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:1300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.container-center{
    display:none;
/*
    width:31%;
    height:1350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
*/
}

.container-right{
    width:46%;
    height:1300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}






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

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

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

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

.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: 28px;
    color: #4e061c;
    font-family: 'Parisian';
    margin: 0;
    padding: 0;
    text-transform: uppercase;
} 

.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;
}




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




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

.row-dish h3{
    font-family: 'TheForegen-Regular';
    font-size: 18px;
    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;
  }

 
  .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%;}
  
}