* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
  scroll-behavior: smooth;
}

p {
  font-weight: 300;
  color: #111;
}

header {
  position: fixed;
  top: 0%;
  left: 0%;
  padding: 20px 10px;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: center; /*pour aligner les element au centre de la session*/
  transition: 0.5s;
}

.logo {
  color: #fff;
  font-weight: bold;
  font-size: 2em; /*pour la taillef*/
  text-decoration: none;
}
.logo span {
  color: #fb911f; /*pour la couleur de titre Resto precisement pour le(R)*/
}

.navbar {
  display: flex; /*aligner les elements*/
  position: relative;
}

.navbar li {
  list-style: none; /*perdre le petit point de li*/
}
.navbar a {
  color: #fff;
  text-decoration: none;
  margin-left: 30px; /*pour crée des espace*/
  font-weight: 700px;
}
.btn-reserve {
  padding: 10px 20px;
  background: #fb911f; /*pour mettre la reservation en jaune */
  margin-top: -10px;
  text-transform: uppercase; /*pour mettre la phrase en majiscule*/
}

.btn-reserve:hover {
  background: #d87710;
  transition: ease-out;
}

header .navbar li a:hover {
  color: #fb911f;
  border-bottom: 2px solid #fb911f; /*pour les sous liens*/
}

.banniere {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(./images/pageheader-banner.jpg); /*pour mettre une image en arriére plan*/
  background-size: cover; /*pour que l'image ne c'est repete plus*/
}

.banniere .contenu {
  max-width: 70%;
  text-align: center; /*pour centrer le Menu et reservation*/
}

.banniere .contenu h2 {
  color: #fff;
  font-size: 3em;
  text-transform: capitalize; /*pour mettre dans chaque debut d'une phrase une majiscule*/
}

.contenu p:nth-child(2) {
  color: #fff;
  font-size: 1.2em;
}

.btn1 {
  /*pour mettre de button au niveau titre Menu*/
  font-size: 1em;
  color: #fff;
  background: #fb911f;
  padding: 10px 20px;
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: 0.5s;
  margin-left: 10px;
}

.btn2 {
  /*pour mettre de button au niveau de titre restaurant*/
  font-size: 1em;
  color: #fff;
  background: blue;
  padding: 10px 20px;
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: 0.5s;
  margin-left: 10px;
}

.btn1:hover {
  letter-spacing: 4px; /*effet survolant*/
}

section {
  padding: 100px;
}
.row {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.row .col50 {
  position: relative;
  width: 48%;
  justify-content: center;
  align-items: center;
}

.row .col50 h2 {
  margin-bottom: 20px;
}

.titre-texte {
  color: #000;
  font-size: 2em;
  font-weight: 300px;
  text-transform: capitalize;
}

.titre-texte span {
  /*changer la couleur de P sur notre paragraphe A propos de nous*/
  color: #fb911f;
  font-size: 1.5em;
  font-weight: 700;
}

.row .col50 img {
  height: 450px;
  width: 600px;
  position: relative;
}

.titre {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.menu {
  margin-top: -100px;
}

.menu .contenu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 40px;
}

.menu .contenu .box {
  /*pour l'alignement d'image*/
  width: 285px;
  margin: 20px;
  border: 20px solid #fff;
  box-shadow: 20px 15px 35px rgb(0, 0, 0, 0.8);
}

.menu .contenu .box .imbox {
  position: relative;
  width: 100%;
  height: 300px;
}

.menu .contenu .box .imbox img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.menu .contenu .box .text {
  text-align: center; /*pour centre le chose comme le texte sous l'image*/
  font-weight: 300px;
  color: #111;
}

.menu .contenu .box .text h3 {
  font-weight: 400; /*font-weight c'est pour la taille de la police*/
}

/*Section expert*/
.expert {
  margin-top: -200px; /*margin-top c'est pour rapprocher le titre Expert vers l'ancienne section*/
}

.expert .contenu {
  display: flex;
  flex-wrap: wrap;
  /*flex-direction: column;*/
  justify-content: center;
  margin-top: 40px;
}

.expert .contenu .box {
  width: 250px;
  margin: 15px;
}

.expert .contenu .box img {
  position: relative;
  width: 100%;
  height: 300px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.expert .contenu .box h3 {
  color: #111;
  font-weight: 400;
  text-align: center;
}

/*section temoignage*/

.temoignage {
  background-image: url(./images/bg2.jpg);
  background-size: cover; /*pour mettre la valeur de l'image*/
}

.temoignage .contenu {
  display: flex;
  margin-top: 40px;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
}

.temoignage .contenu .box {
  width: 250px;
  margin: 15px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 15px;
  padding: 40px;
}

.temoignage .contenu .imbox {
  width: 80px;
  height: 80px;
  border-radius: 50px;
  position: relative;
  margin-bottom: 20px;
  overflow: hidden; /*pour mettre les photo en cercle NB: voir sur le site*/
}

.temoignage .contenu .box img {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  justify-content: center;
  align-items: center;
}

.temoignage .contenu .box .text {
  text-align: center;
  color: #666;
  font-style: normal;
}

.temoignage .contenu .box .text h3 {
  color: #fb911f;
  margin-top: 20px;
  font-size: 1em;
  font-weight: 600;
}

.blanc .titre-texte {
  color: #fff;
}

/*Section contact */

.contact {
  background-image: url(./images/img-form.jpg); /*pour mettre une image en arriére plan*/
  background-size: cover; /*pour mettre la valeur d'image en elle même*/
  box-shadow: 2px 2px 12px rgba(0, 0, 0.8);
  width: 100%;
  background-image: unset;
  text-align: center;
}

.contactform {
  /*modification du formulaire pour le centré*/
  padding: 75px 50px;
  background: #fff;
  box-shadow: 5px 15px 50px rgba(0, 0, 0, 0.8);
  max-width: 400px;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
  margin-left: 30%;
}

.contactform .inputboite {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.contactform h3 {
  color: black;
  font-size: 1.2em;
  margin-bottom: 20px;
}

.contactform .inputboite input,
.contactform .inputboite input {
  width: 100%;
  border: 1px solid #555;
  padding: 10px;
  color: #111;
  outline: 16px;
  font-size: 16px;
  font-weight: 16px;
  resize: none;
}

.contactform .inputboite input[type="submit"] {
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  background: #fb911f;
  display: inline-block;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  outline: none;
  border: none;
  transition: 0.5s;
  max-width: 120px;
  align-items: center;
  justify-content: center;
}

.titre-text span {
  /*pour changer le C du contact c'est tranformer le C en Or 😅*/
  color: #fb911f;
  font-size: 1.5em;
  font-weight: 700;
}

.copyright {
  padding: 20px 40px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  background: rgba(228, 222, 222);
  text-align: center;
}

.copyright p:nth-child(1) {
  color: #333;
}

.copyright a {
  color: #fb911f;
  text-decoration: none;
  font-weight: 600;
  font-style: italic;
}