*,
*::after,
*::before {
  box-sizing: border-box;
}

/* CARD=========================================================== */

body {
  background-color: #FFF1DD;
  margin: 0;
  padding: 0;
 
  font-family: Lato, sans-serif;
  font-weight: normal;
  font-style: normal;
 font-display: swap;
}

h2 {
  font-size: 2rem;
  font-family: 'Caprasimo', serif;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* NAVIGUATION       =========================== */

nav {
  display: flex;
  width: 100%;
  /* justify-content: space-between; */
  align-items: center;
  gap: 30px;
  padding: 20px;
  background-color: #FF7979;
}

nav a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 18px;
  font-family: 'Caprasimo', serif;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.line {
width: 30px;
border-bottom: 1px solid #ffffff;
rotate: 90deg;
}

/* CARD========================================= */

.card-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 80%;
  /* justify-content: space-between; */
  margin-inline: auto;
  gap: 30px;

}

.card-dernier-ajout {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  width: 250px;
  /* padding: 20px; */
  border-radius: 15px;
  background-color: #f5f5f5;
  color: black;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.card-dernier-ajout:hover {
  transform: scale(1.05);
}

.card-link {
  text-decoration: none;
}

.card{
  /* text-decoration: none; */
  display: flex;
  flex-direction: column;
  width: 250px;
  /* padding: 20px; */
  border-radius: 15px;
  background-color: #f5f5f5;
  color: black;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}




.card:hover {
  transform: scale(1.05);
}

.text-card-container {
  padding: 0 15px 15px 15px;
  margin: 0 15px 15px 15px;
}

.card-img {
  width: 100%;
  height: 250px;
  border-radius: 20px 20px 0 0;
  object-fit: cover;
}

.text-card-container span {
  width: fit-content;
  height: 25px;
  border-radius: 15px;
  margin: 0;
  border-color: #ffa4a4;
  background-color: #ffa4a4;

}
/* FILTRE=========================================================== */

/* .filter-container {
  display: flex;
  flex-direction: column;
  width: 75%;
  margin-bottom: 30px;
  left: 0;
} */

.category-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 50%;
  margin-bottom: 20px;
}

.origin-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 50%;
  margin-bottom: 20px;
}

.origin-filter div, .category-filter div {
  width: fit-content;
  font-size: 1.125rem;
 

}


/* .origin-filter span {
  flex:1;
} */

.haut-recherche-plat {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin-inline: auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

/* .haut-recherche-plat h2 {
  font-size: 2.25rem;
  font-family: 'Caprasimo', serif;
  font-weight: normal;
  font-style: normal;
} */

.js-select, .js-select-2{
  width: fit-content;
  padding: 10px;
  border-radius: 20px;
  box-shadow: 4px 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  font-size: 1.125rem;
  font-family: 'Lato', serif;
  font-weight: normal;
  font-style: normal;

}




/* //bannière==================================== */

.banniere {
  display: flex;
  width: 90%;
  height: 400px;
  background-color: #FAD381;
  /* background-image: url();
  background-size: cover;
  background-position: center; */
  margin-inline: auto;
  margin-bottom: 30px;
justify-content: center;
align-items: center;
}

/* DERNIER AJOUT=========================================== */


.dernier-ajout {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-inline: auto;
  gap: 20px;
  justify-content: center;
  align-items: center;
}