/*==================GENERAL===========================*/


:root {
   font-size: 16px;
}

html,
body {
   height: 98vh;
}

@font-face {
    font-family: 'Inter';
    src: url('font/Inter_18pt-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
   font-family: 'Poppins';
   src: url(font/Poppins-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}
body {
   display: flex;
   flex-direction: column;
   /* font-family: ;*/
   line-height: 1.5;
   font-family: 'Inter',Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   background-color: #fdf7f2;
   color: #3E4751;
}

#main {
   flex-grow: 1;
}

.wrapper {
   width: 1200px;
   margin: auto;
}


/*==============================HEADER==============================
*/

#header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
   background-color: #FFF;
   box-shadow: 0 0 .1rem #000;
}

.logo {
   display: flex;
   align-items: center;
}

.logo img {
   height: 3rem;
   width: auto;
   padding-right: 2rem;
}

.site-title {
   padding-right: 2rem;
}

.nav-container {
   flex-grow: 1;
   display: flex;
   justify-content: flex-start;
}

.searchbar {
   display: flex;
   align-items: center;
   width: 100%;
   max-width: 400px;
   border-radius: 10px;
   background-color: white;
   padding: .1rem .2rem;
   box-shadow: 0 0 .1rem #000;
   border: 1px solid #ccc;

}

.searchbar input[type="search"] {
   flex-grow: 1;
   border: none;
   outline: none;
   background-color: transparent;
   font-size: 1rem;
   padding: 0.5rem;
}

.searchbar button {
   background: transparent;
   border: none;
   cursor: pointer;
   font-size: 1.2rem;
   color: #555;
}

.searchbar button:hover {
   color: #000;
   background-color: transparent;

}

.menu {
   list-style-type: none;
   padding: 0;
   display: flex;
   gap: 1rem;
}

.menu a {
   text-decoration: none;
}

.sucree {
   color: #D42816;
   text-decoration: none;
}

.salee {
   color: #637F43;
   text-decoration: none;
}

.menu a:not(.sucree):not(.salee) {
   color: #3E4751;
}

.menu a:hover,
.menu li.active a {
   text-decoration: underline;
}

/*=========================================================================
 CARTES=================================================================
 ==========================================================================*/

h1 {
   font-size: 32px;
}

h2 {
   font-size: 26px;
}

h3 {
   font-size: 20px;
}

.cartes {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   gap: 3rem;
}


.cartesucree {
   width: 20rem;
   box-sizing: border-box;
   background-color: #FCE4EC;
   padding: 1rem;
   border-radius: .8rem;
   cursor: pointer;
   box-shadow: 0 0 .2rem black;

   img {
      width: 100%;
   }

}

.cartesalee {
   width: 20rem;
   box-sizing: border-box;
   background-color: #EEF7E8;
   padding: 1rem;
   border-radius: .8rem;
   cursor: pointer;
   box-shadow: 0 0 .2rem black;

   img {
      width: 100%;
   }
}

.carte:hover {
   box-shadow: 0 0 .4rem black;
}

.carte-titre {
   margin-top: 0;
   text-align: center;
}



@media screen and (max-width: 1200px) {
   :root {
      font-size: 14px;
   }

   .wrapper {
      width: auto;
      margin: unset;
      padding: 0 2rem;
   }
}


@media screen and (max-width: 476px) {

   #header {
      flex-direction: column;
      align-items: center;

   }

   nav {
      align-self: stretch;
      display: flex;
      justify-content: space-between;
   }


}

@media print {
   #header {
      display: none;
   }
}

/*=======================================================================
FORMS
=========================================================================*/


.field {
   margin-top: 1.5rem;
   display: flex;
   flex-direction: column;
}

.form-info {
   width: 50%;
}

.form-message {
   width: 50%;
}

.form1 {
   display: flex;
   flex-direction: column;
   padding: 5px;
   
}
.chapoform{
   justify-content: right;
}


.input{
   padding: .2rem .1rem;
   border-radius: 1rem;
   border: unset;
   background: unset;
   box-shadow: 0 0 .1rem   #3E4751;

   
}











/*=====================================================================
FOOTER
=========================================================================*/

#footer{
   margin-top: 4rem;
  padding: 1rem;
  background-color: #FFF;
  box-shadow: 0 0 .1rem #000;

}

.nav-footer{
   display: flex;
   justify-content: space-between;
}
.legal{
   display: flex;
   gap: 1.2rem;
   padding: 0;
   list-style-type: none;

}


.logo-footer{
   display: flex;
   flex-direction: row-reverse;
}