*,
*::before,
*::after {
  box-sizing: border-box; /* Permets à ce que mon contenant ne soit jamais plus grand que mon contenu malgré l'ajout de padding ou de margin. Inclue les marges internes (paddings) et bordures dans mon calcul pour que nos éléments ne dépasse pas de son élément parent.*/
}
.active {
  color: #c89446;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Source Sans Pro", sans-serif;
  line-height: 1.625; /*26px calc(26:16)*/
  margin: 0;
  color: #6f6f6f;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

img {
  max-width: 100%; /*Pour ne pas avoir des images qui depasse*/
  height: auto; /*Par apport au dimensions de l'img*/
}
/* Mobile first */
.header {
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.92),
      rgba(54, 54, 54, 0.5) 39.24%,
      rgba(28, 28, 28, 0.4)
    ),
    url(https://images.unsplash.com/photo-1600961019265-1872b3938182?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80)
      center center / cover no-repeat;
  color: #fff;
  height: 100vh;
}

.topbar {
  padding: 18px 20px;
  font-size: 0.875rem;
  text-transform: uppercase;
  text-align: center;
}

.menu-item:hover {
  color: #c89446;
}

.logo {
  margin-bottom: 15px;
}

.menu-item {
  display: inline-block;
  margin: 0 15px;
}

.container-baseline {
  padding: 160px 0 70px 0;
  text-align: center;
  line-height: 1;
}

.baseline-welcome {
  font-family: "Tangerine", cursive;
  color: #c89446;
  display: block;
  font-size: 3rem;
}

.baseline-name {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 5px;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.baseline-slogan {
  font-size: 1rem;
  font-weight: 300;
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.menu-button {
  border: solid 1px #c89446;
  padding: 7px 10px;
  transition-property: color, background-color;
  margin-top: 5px;
}

.menu-button:hover {
  background: #c89446;
  color: #fff;
}
/* Fin de mon header mobile */
/* Début de mon header grand écrant */
@media only screen and (min-width: 750px) {
  html {
    font-size: 16px;
  }
  .header {
    height: 100vh;
  }
  .logo {
    margin-bottom: 0;
  }
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1150px;
    margin: 0 auto;
  }
  .menu-item {
    margin: 0 15px;
  }
  .content-baseline {
    padding: 200px 0 230px;
  }
  .baseline-slogan {
    font-size: 1.8rem;
  }
  .baseline-name {
    font-size: 2.7rem;
    letter-spacing: 12px;
    padding-bottom: 18px;
  }
  .baseline-welcome {
    font-size: 5.5rem;
  }
  .menu-button {
    margin-top: 0;
    margin-right: 0;
  }
  .sections-home {
    padding-top: 50px;
  }
}
/* Fin de mon header grand écrant */

/* Début de ma section home mobile */
.sections-home {
  padding-top: 30px;
}

.container-small {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 960px;
}

.container-large {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1150px;
}

.block {
  margin-bottom: 50px;
}

.title {
  font-size: 1.75rem; /*28px*/
  line-height: 1.1;
  letter-spacing: 2px;
  color: #000; /*car body nuance-black*/
  font-weight: bold;
  text-transform: uppercase;
  margin: 1rem 0 0 0;
}

.title span {
  font-family: "Pinyon Script", serif;
  color: #c89446;
  font-size: 2.5rem;
  display: block;
  text-transform: none;
}

.title::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: #c89446;
  margin-bottom: 0.5rem;
}

.more {
  color: #c89446;
}

.more a:hover {
  text-decoration: underline;
}

.more a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 9px;
  margin-left: 0.7em;
  background: url(img/arrow-right.svg) center center no-repeat;
  transition: transform 0.3s;
}

.more a:hover::after {
  transform: translateX(3px);
}

.block-img {
  max-width: 350px;
  margin: 0 auto;
  border: solid 1px #c89446;
}

.block-img img {
  display: block;
}

.block-img img {
  position: relative;
  z-index: 1;
}

.block-centered {
  text-align: center;
}

.block-centered .block-body {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.ingredients-menu {
  margin: 40px 0;
  font-weight: 600;
  color: #383838;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
}

.ingredients-menu a {
  display: inline-block;
  margin: 0 5px;
  position: relative;
}

.ingredients-menu a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  height: 1px;
  opacity: 0;
  background: #c89446;
  transition: 0.3s;
}

.ingredients-menu .active::after,
.ingredients-menu a:hover::after {
  bottom: 0;
  opacity: 1;
}

.menu-summary-item {
  position: relative;
  padding-left: 120px;
  margin-bottom: 30px;
}

.menu-summary-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
}

.menu-summary-title {
  font-size: 1.125rem;
  color: #383838;
  font-weight: bold;
  padding-bottom: 0.75rem;
  margin-bottom: 0;
}

.menu-summary p {
  margin: 0;
  padding-bottom: 1rem;
  font-size: 0.875rem;
}

.menu-summary-price {
  font-family: "Pinyon Script", serif;
  color: #c89446;
  font-size: 2.5rem;
  line-height: 1;
}
/* Fin container home mobile*/
.reservation {
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.92),
      rgba(54, 54, 54, 0.5) 39.24%,
      rgba(28, 28, 28, 0.4)
    ),
    url(https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)
      center center / cover no-repeat;
  color: rgba(255, 255, 255, 0.6);
  padding: 50px 0;
}

.reservation .title {
  color: #fff;
}

.reservation input,
.reservation select {
  padding: 0 0.5rem;
  width: 100%;
  margin-bottom: 15px;
  border: solid 1px #6f6f6f;
  background: transparent;
  text-transform: uppercase;
  height: 40px;
  font-size: 0.875rem;
  color: #fff;
  font-family: "Source Sans Pro", serif;
  transition: background-color 0.3s, border-color 0.3s;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
}

.reservation select {
  background: no-repeat right 0.5rem center url(img/select.svg);
}

.reservation input:focus,
.reservation select:focus {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #c89446;
}

.reservation .button {
  width: 100%;
}

.button {
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff;
  background: #c89446;
  border: none;
  border: solid 1px transparent;
  padding: 11px 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.3s;
}

.button:hover {
  border: solid 1px #c89446;
  background: transparent;
}

.reservation p {
  max-width: 625px;
  margin-left: auto;
  margin-right: auto;
}

.reservation .block-centered .block-body {
  max-width: 825px;
}

select option {
  color: #000;
}

.map {
  width: 100%;
  height: 460px;
}

.footer {
  background: #1c1c25 bottom right no-repeat;
  font-weight: 300;
  color: #fff;
  padding: 40px 0;
}

.footer-title {
  color: #c89446;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1.25em;
}

.footer-column {
  margin-bottom: 2rem;
}

@media only screen and (min-width: 760px) {
  /*Pour que les Ipad benef du grand écrant*/
  .header {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.3),
        rgba(54, 54, 54, 0.3) 39.24%,
        rgba(28, 28, 28, 0.3)
      ),
      url(https://images.unsplash.com/photo-1605213605677-861baf60c228?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80)
        center center / cover no-repeat;
    color: #fff;
    height: 100vh;
  }

  .block {
    margin-bottom: 100px;
  }

  .block-last {
    margin-bottom: 60px;
  }

  .block-left,
  .block-right {
    display: flex; /*Mets mes elems sur la même ligne*/
    justify-content: space-between;
    align-items: center;
  }

  .block-img {
    border: none; /*car grand ecrant*/
    position: relative; /*pour l'elem before*/
  }

  .block-left .block-body,
  .block-right .block-body {
    width: 445px;
    flex: none;
  }

  .block-img::before {
    content: "";
    display: block; /*afin qu'il prend les dimension de l'image*/
    border: solid 1px #c89446;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .block-right .block-img::before {
    left: auto;
    right: -30px;
  }

  .block-left .block-img {
    margin-left: 30px;
  }

  .block-right .block-img {
    margin-right: 30px;
  }

  .block-left .block-body {
    margin-left: 20px;
  }

  .block-right .block-body {
    margin-right: 20px;
    order: -1; /*place l'image à droite*/
  }

  .title {
    margin-bottom: 1.2rem;
  }

  .title::before {
    margin-bottom: 10px;
  }

  .more {
    display: block;
    margin-top: 1.3rem;
  }

  .container-sections-home {
    background: fixed top 95px right 0px url(img/oranges.jpg) no-repeat,
      fixed top 640px left 0px url(img/spices.jpg) no-repeat;
  }

  .ingredients-menu a {
    margin: 0 32px;
  }

  .menu-summary {
    position: relative; /*Pour rectangle*/
    padding: 85px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-summary-item {
    padding-left: 192px;
    margin-bottom: 110px;
    width: calc(50% - 40px);
  }

  .menu-summary .menu-summary-item:nth-child(even) {
    text-align: right;
    padding-left: 0;
    padding-right: 192px;
  }

  .menu-summary .menu-summary-item:nth-child(even) .menu-summary-img {
    left: auto;
    right: 0;
  }

  .menu-summary .menu-summary-item:nth-child(even) .menu-summary-price {
    margin-left: auto;
  }

  .menu-summary-img {
    width: 160px;
  }

  .menu-summary-title {
    margin-top: 0;
    line-height: 1.2;
    background: #fff; /*Pour passer au dessus du rectangle + padding-bot sur p*/
  }

  .menu-summary p {
    background: #fff; /*Pour passer au dessus du rectangle + padding-bot sur p*/
  }

  .menu-summary-price {
    padding-top: 4px;
    width: 85px;
    background: #fff; /*Pour passer au dessus du rectangle + padding-bot sur p*/
  }

  .menu-summary::before {
    content: "";
    position: absolute; /* + menu semary en relative*/
    display: block;
    top: 50%; /*Pour le mettre au millieu*/
    left: 50%;
    width: 420px;
    height: 420px;
    border: solid 1px #c89446;
    transform: translate(-50%, -260px) rotate(45deg);
  }

  .block-chief {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
  }

  .block-chief .block-img::before {
    display: none;
  }

  .block-chief .block-img {
    flex: none;
    width: 404px;
    order: 2;
  }
  /* Fin de ma section home pour grand écrant */
  .reservation {
    padding: 100px 0;
  }

  .reservation-form-row {
    margin: 64px 0;
    display: flex;
    justify-content: space-between;
  }

  .reservation-form-row input,
  .reservation-form-row select {
    width: calc(33.33% - 20px);
    margin-bottom: 0;
  }

  .reservation .button {
    width: calc(33.33% - 20px);
  }

  .footer {
    background-image: url(img/splash.png);
  }

  .footer-columns {
    display: flex;
    justify-content: space-between;
  }

  .footer-column {
    width: 290px;
    margin-right: 50px;
  }

  .footer-column:first-child {
    width: 450px;
  }

  .footer-column:last-child {
    margin-right: 0;
    flex: none;
  }

  .footer a {
    text-decoration: underline;
  }

  .footer a:hover {
    color: #c89446;
  }

  .footer ul {
    padding-left: 0;
    list-style: none;
  }

  .footer ul li::before {
    content: "- ";
  }

  .footer-credits {
    font-size: 0.93em;
  }

  .footer-credits span {
    font-weight: bold;
  }
  .moha {
    width: 800px;
    margin-left: 40px;
  }
}
.moha {
  width: 350px;
}
.active {
  color: #c89446;
}

/* ==========
Custom Scrollbar
========== */

::-webkit-scrollbar {
  /* permet de modifier le style de la barre de défilement associée à un élément. */
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: var(--white);
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
}
/* ==========
Variables
========== */
:root {
  /* A changer 'main color' */
  --main-color: #e02f6b;
  --white: #fff;
}