@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


html.block-viewport {
    overflow: hidden !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  

 
  .body {
    position: relative;
    font-family: 'Poppins', sans-serif;
}

/*------------------------------------------ NAV  ------------------------------------------ */

   
  .content-nav{
    height: 75px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
  }
  
  nav {
    background: transparent;
    z-index: 2000;
  }
  
  nav .content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
  }
  
  nav .content .logo {
    padding: 10px 0px;
  }

  nav .content .logo img {
    height: 75px;
  }
  
    @media (min-width: 992px){
      nav .content .logo {
    width: auto;
    order: 1;
      }  
    }
  
  nav .content ul.menu {
    padding: 0px;
    margin: 0px;
    list-style: none;
    align-items: stretch;
    justify-content: flex-end;
    width: 100%;
    display: none;
    order: 4;
  }
  
    @media (min-width: 992px){
        nav .content ul.menu {
        display: flex;
        align-items: center;
        order: 2;
      }
    }
  
  nav .content ul.menu > li {
    display: flex;
    align-items: center;
    position: relative;
  }
  
  nav .content ul.menu li {
    list-style: none;
  }
  
  nav .content ul.menu > li > a {
    padding: 0px 10px;
    font-size: 0.85rem;
    line-height: 0.85rem;
    font-weight: 500;
    color: var(--white);
    display: flex;
    align-items: center;
    transition: all 350ms ease-in-out;
    text-decoration: none;

  }

  
  
  nav .content ul.menu li:last-child {
          border: 2px solid var(--white);
          margin: 0px 10px;
          height: 40px;
          padding: 0px 25px !important;
          
      }
    

  nav .content ul.menu li:last-child a {
          color: var(--white);

      }

    /*------------------------------------------ NAV BURGER ------------------------------------------ */
  
  .nav-burger {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: calc(var(--spacer) / 1.5);
    order: 5;
  }
  
    @media (min-width: 992px){
      .nav-burger {
        display: none;
      }  
    }
  
  .nav-burger .burger {
    width: 26px;
    height: 26px;
    position: relative;
    margin: 0 auto;
    transform: rotate(0deg);
    transition: all 350ms ease-in-out;
    cursor: pointer;
  }

  .nav-burger .burger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--white);
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: var(--transition);
  }
  
  .nav-burger .burger span:nth-child(1) {
    top: 7px;
    transform-origin: left center;
  }
  
  
  .nav-burger .burger span:nth-child(2) {
    top: 14px;
    transform-origin: left center;
  }

  /*
  .nav-burger .burger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 2px;
    left: 4px;
  }

  .nav-burger .burger.active span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  .nav-burger .burger.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
  }
  */

  /*------------------------------------------ NAV RESPONSIVE ------------------------------------------ */
  
  .nav-responsive {
    position: fixed;
    top: 0px;
    right: -100px;
    width: calc(100% - 80px);
    height: 100%;
    background: var(--white);
    z-index: 9000;
    visibility: hidden;
    opacity: 0;
    transition: all 350ms ease-in-out;
    box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.016), 0 8.7px 6.9px rgba(0, 0, 0, 0.022), 0 17.7px 14.2px rgba(0, 0, 0, 0.028), 0 36.5px 29.2px rgba(0, 0, 0, 0.034), 0 100px 80px rgba(0, 0, 0, 0.05);
  }
  
    @media (min-width: 576px){
      .nav-responsive {
        width: 70%;
      }
    }

    .nav-responsive.active {
        right: 0px;
        visibility: visible;
        opacity: 1;
        width: 100%;
      }

  
  .nav-responsive .content {
    padding: var(--spacer) var(--spacer) calc(var(--spacer) * 4) var(--spacer);
    height: 100vh;
    overflow-y: auto;
    background-color: var(--black);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .nav-responsive .content .header__nav{
    display: flex;
    justify-content: space-between;
  }
  
  .nav-responsive .content .header__nav .logo {
    display: inherit;
    text-align: center;
  }

  .nav-responsive .content .header__nav .logo img {
    height: 50px;
  }

  @media (min-width: 576px){
    .nav-responsive .content .header__nav .logo img {
        height: 80px;
    }
  }

  .nav-responsive .content .header__nav .nav-burger .burger {
    width: 26px;
    height: 26px;
    position: relative;
    margin: 0 auto;
    transform: rotate(0deg);
    transition: all 350ms ease-in-out;
    cursor: pointer;
  }

  .nav-responsive .content .header__nav .nav-burger .burger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--white);
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: var(--transition);
  }
  
  .nav-responsive .content .header__nav .nav-burger .burger span:nth-child(1) {
    top: 7px;
    transform-origin: left center;
  }
  
  
  .nav-responsive .content .header__nav .nav-burger .burger span:nth-child(2) {
    top: 14px;
    transform-origin: left center;
  }

  .nav-responsive .content .header__nav  .nav-burger .burger.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 2px;
    left: 4px;
  }

  .nav-responsive .content .header__nav  .nav-burger .burger.active span:nth-child(2) {
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
  }


  
  .nav-responsive .content ul.menu {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }
  
  .nav-responsive .content ul.menu li {
    margin-bottom: calc(var(--spacer) / 2);
  }

  @media (min-width: 576px){
    .nav-responsive .content ul.menu li {
        font-size: 40px;
      }
  }


  .nav-responsive .content ul.menu li a{
    text-decoration: none;
    color: var(--white);
  }

  .nav-responsive .content .action .rs{
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .nav-responsive .content .action .rs div{
    margin-right: 10px;
  }


/*------------------------------------------ SECTION ACCUEIL ------------------------------------------ */
.section__accueil{
    position: relative;
   }

 .section__accueil .background__container{
    height: 100vh;
    width: 100%;
    position: relative;
    background-color: var(--black);
   }



 .section__accueil .background__container img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    transition: transform 25s;
   }

  .section__accueil .background__container  .swiper {
    width: 100%;
    height: 100%;
  }

  .section__accueil .background__container .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--black);
  }

  .section__accueil .background__container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .section__accueil .background__container .swiper-slide .zoom-on-load{
    transform: scale(1);
  }


.section__accueil .content__container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
   }

.section__accueil .content__container .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 90px;
    height: 100%;
    color: var(--var(--white));
   }


  .section__accueil .content__container .content .title{
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 4rem;
  }

  @media (min-width: 576px){
    .section__accueil .content__container .content .title{
        margin-bottom: 5rem;
    }
  }

  .section__accueil .content__container .content .title span{
    color: var(--white);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    position: relative;
    
  }

  @media (min-width: 576px){
    .section__accueil .content__container .content .title span{
        font-size: 20px;
    }
  }

  .section__accueil .content__container .content .title span::before{
    position: absolute;
    top: 50%;
    left:-95px;
    transform: translateY(-50%);
    display: block;
    width: 70px;
    height: 2px;
    background: currentColor;
    content: "";
  }




  .section__accueil .content__container .content .title span::after{
    position: absolute;
    top: 50%;
    right: -95px;
    transform: translateY(-50%);
    display: block;
    width: 70px;
    height: 2px;
    background: currentColor;
    content: "";

  }


  .section__accueil .content__container .content .texte h2{
    color: var(--white);
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 700;
    font-size: 20px;

  }

  @media (min-width: 576px){
    .section__accueil .content__container .content .texte h2{
        font-size: 40px;
    }
  }

  @media (min-width: 1200px){
    .section__accueil .content__container .content .texte h2{
        font-size: 60px;
    }
  }

  .section__accueil .content__container .content .texte p{
    color: var(--white);
    text-align: center;
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 5rem;
    font-weight: 700;
  }

  @media (min-width: 576px){
    .section__accueil .content__container .content .texte p{
        font-size: 22px;
        margin-bottom: 8rem;
    }
  }

  .section__accueil .content__container .content .button{
    background-color: var(--primary);
  }

  .section__accueil .content__container .content .button a {
    color: var(--white);
    text-decoration: none;
    
  }

  /*------------------------------------------ SECTION PRESENTATION ------------------------------------------ */

  .section__presentation{
    background-color: var(--background);
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
  }

  .section__presentation::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15%;
    background-color: var(--white);

  }

  @media (min-width: 576px){
    .section__presentation::after{
      height: 30%;
    }
  }

  @media (min-width: 576px){
    .section__presentation{
      padding-top: 7rem;
      padding-bottom: 7rem;
    }
  }

  @media (min-width: 1200px){
    .section__presentation{
      padding-top: 2rem;
      padding-bottom: 5rem;
    }
  }

  .section__presentation .grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-row-gap: 10px;  
  }

  @media (min-width: 576px){
   .section__presentation .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) .2fr .5fr 1fr;
    grid-template-rows: 1fr .5fr;
    grid-column-gap: 0px;
    grid-row-gap: 10px;  
    }
    .grid__item__1 { grid-area:  1 / 1 / 2 / 3;}
    .grid__item__2 { grid-area:  2 / 1 / 3 / 3;}
    .grid__item__3 { grid-area:  1 / 4 / 3 / 6;} 

  }


  @media (min-width: 576px){
    .section__presentation .grid  .grid__item__1{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
    
    .section__presentation .grid .grid__item__1 .title__deco h3{
      color: var(--primary);
      position: relative;
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
    } 

    .section__presentation .grid .grid__item__1 .title__deco h3::after{
      position: absolute;
      top: 50%;
      left: 256px;
      width: 70px;
      height: 2px;
      transform: translateY(-50%);
      background: currentColor;
      content: "";
    }

    .section__presentation .grid .grid__item__1 .title h2{
      font-size: 50px;
      font-weight: 700;
      margin-bottom: 2rem;
    }

    .section__presentation .grid .grid__item__1 .content{
      margin-bottom: 2rem;
    }

    .section__presentation .grid .grid__item__1 .action a {
      background-color: var(--primary);
      padding-right: 2rem;
      padding-left: 2rem;
      color: var(--white);
    }

    .section__presentation .grid .grid__item__2 {
      z-index: 20;
    }


    .section__presentation .grid .grid__item__2 img{
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

    .section__presentation .grid .grid__item__3{
      height: 100%;
      display: flex;
      align-items: end;
      z-index: 20;
    }

    .section__presentation .grid .grid__item__3 img{
      width: 100%;
      height: 100%;
     object-fit: cover;
    }

    @media (min-width: 576px){
      .section__presentation .grid .grid__item__3 img{
        height: 75%;
      }
    }

  /*------------------------------------------ SECTION ACCUEIL MENU ------------------------------------------ */
  .section__accueil__menu{
    padding: 5rem 2rem 5rem 2rem;
    
  }

  .section__accueil__menu .menu{
    margin-bottom: 5rem;
  }

  .section__accueil__menu .menu .title__deco h3{
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1rem;
  }

  .section__accueil__menu .menu .title h2{
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2rem;
  }

  @media (min-width: 576px){
    .section__accueil__menu .menu .content{
      padding: 0 1rem 0 1rem;
    }
  }

  .section__accueil__menu .menu .content ul{
    list-style: none;
    padding-left: 0 !important;
  }

  .section__accueil__menu .menu .content ul li{
    margin-bottom: 2rem;
  }

  .section__accueil__menu .menu .content ul .meal__container .meal{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  

  .section__accueil__menu .menu .content ul .meal__container .meal .meal__title{
    font-size: 15px;
    font-weight: 700;
  }

  .section__accueil__menu .menu .content ul .meal__container .meal .meal__title p{
    margin-bottom: 0;
  }

  .section__accueil__menu .menu .content ul .meal__container .food{
    font-size: 12px;
    font-weight: 700;
    color: lightgray;
  }

  .section__accueil__menu .action{
    display: flex;
    justify-content: center;
  }

  .section__accueil__menu .action a{
    background-color: var(--primary);
    padding: 1rem 2rem 1rem 2rem;
    color: var(--white);
  }


  /*------------------------------------------ SECTION RECOMMANDATION ------------------------------------------ */


  .section__recommandation .grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    } 

    .grid__item__big{
      grid-column: span 1;
      grid-row: span 1;
    }

    .grid__item__medium{
      grid-column: span 1;
      grid-row: span 1;
    }

    .grid__item__small{
      grid-column: span 1;
      grid-row: span 1;
    }


  @media (min-width: 578px){
  .section__recommandation .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .grid__item__big{
      grid-column: span 1;
      grid-row: span 2;
    }

    .grid__item__medium{
      grid-column: span 1;
      grid-row: span 2;
    }

    .grid__item__small{
      grid-column: span 1;
      grid-row: span 1;
    }
  }

  @media (min-width: 1200px){

  .section__recommandation .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }

    .grid__item__big{
      grid-column: span 2;
      grid-row: span 2;
    }

    .grid__item__medium{
      grid-column: span 1;
      grid-row: span 2;
    }

    .grid__item__small{
      grid-column: span 1;
      grid-row: span 1;
    }

  }

  .section__recommandation .grid .grid__item__big, .section__recommandation .grid .grid__item__medium {
    position: relative;
  }

  .section__recommandation .grid .background__container{
    height: 100%;
  }

  .section__recommandation .grid .background__container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .section__recommandation .grid .content__container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
  }

  .section__recommandation .grid .grid__item__big .content__container .content{
    height: 100%;
    width: 100;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    padding: 1rem;

  }

  .section__recommandation .grid .grid__item__big .content__container .content h3{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    color: var(--white)
  }

  .section__recommandation .grid .grid__item__big .content__container .content h2{
    text-transform: uppercase;
    font-weight: 700;
    color: var(--white)
  }

  @media (min-width: 578px){
    .section__recommandation .grid .grid__item__big .content__container .content h2{
     font-size: 25px;
    }
  }

  .section__recommandation .grid .grid__item__big .content__container .content .action{
    display: flex;
    justify-content: start;
  }

  .section__recommandation .grid .grid__item__big .content__container .content .action a{
    color: var(--white);
    padding-left: 0 !important;
    text-decoration: none;
    position: relative;
  }

  .section__recommandation .grid .grid__item__big .content__container .content .action a::before{
    position: absolute;
    bottom: -2px;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--primary);
    content: "";
    transition: transform 0.2s ease;
    transform-origin: 100% 0;
    transform: scaleX(1);
  }

  .section__recommandation .grid .grid__item__big .content__container .content .action a:hover:before{
    transform: scaleX(0);
  }



  .section__recommandation .grid .grid__item__small .content{
    background: var(--black);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    color: var(--white);
  }

  .section__recommandation .grid .grid__item__small .content h3{
    text-align: center;
    color: var(--primary);
    font-size: 15px;
  }

  .section__recommandation .grid .grid__item__small .content h2{
    text-align: center;
  }

  @media (min-width: 578px){
    .section__recommandation .grid .grid__item__small .content h2{
     font-size: 25px;
    }
  }

  .section__recommandation .grid .grid__item__small .content .action{
    display: flex;
    justify-content: center;
    
  }

  .section__recommandation .grid .grid__item__small .content .action a{
    color: var(--white);
    text-decoration: none;
    position: relative;
  }

  .section__recommandation .grid .grid__item__small .content .action a::before{
    position: absolute;
    bottom: -2px;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--primary);
    content: "";
    transition: transform 0.2s ease;
    transform-origin: 100% 0;
    transform: scaleX(1);
  }

  .section__recommandation .grid .grid__item__small .content .action a:hover:before{
    transform: scaleX(0);
  }

  .section__recommandation .grid .grid__item__medium .content__container .content{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    padding: 1rem;

  }

  .section__recommandation .grid .grid__item__medium .content__container .content h3{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    color: var(--white)
  }

  .section__recommandation .grid .grid__item__medium .content__container .content h2{
    text-transform: uppercase;
    font-weight: 700;
    color: var(--white);
    text-align: end;
  }

  @media (min-width: 578px){
    .section__recommandation .grid .grid__item__medium .content__container .content h2{
     font-size: 25px;
    }
  }

  .section__recommandation .grid .grid__item__medium .content__container .content .action{
    display: flex;
    justify-content: start;
  }

  .section__recommandation .grid .grid__item__medium .content__container .content .action a{
    color: var(--white);
    padding-left: 0 !important;
    text-decoration: none;
    position: relative;
  }

  .section__recommandation .grid .grid__item__medium .content__container .content .action a::before{
    position: absolute;
    bottom: -2px;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--primary);
    content: "";
    transition: transform 0.2s ease;
    transform-origin: 100% 0;
    transform: scaleX(1);
  }

  .section__recommandation .grid .grid__item__medium .content__container .content .action a:hover:before{
    transform: scaleX(0);
  }


  /*------------------------------------------ SECTION QUALITÉ ------------------------------------------ */

  .section__qualite{
    padding: 8rem 0 4rem 0;
  }

  .section__qualite .image__container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: 2rem;
  }

  @media (min-width: 578px){
    .section__qualite .image__container{
      position: relative;
    }

    .section__qualite .image__container .img__1{
     margin-top: 4rem;
     margin-left: 4rem;
     margin-bottom: 4rem;
    }

    .section__qualite .image__container .img__2{
      position: absolute;
      top: 0;
      right: 10%;
      height: 555px;
    }


    .section__qualite .image__container img {
      width: auto;
      height: auto;
      object-fit: none;
      margin-bottom: 2rem;
    }
  }

  @media (min-width: 1200px){
    .section__qualite .image__container .img__1{
      margin-top: 6rem;
      margin-left: 0;
      margin-bottom: 4rem;
     }

     .section__qualite .image__container .img__2{
      position: absolute;
      top: 0;
      right: 0%;
      height: 555px;
    }
  }


  .section__qualite .content__container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:start;
    height: 100%;
  }

  .section__qualite .content__container .title__deco h3{
    color: var(--primary);
    position: relative;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
  } 

  .section__qualite .content__container .title__deco h3::after{
    position: absolute;
    top: 50%;
    right: -90px;
    width: 70px;
    height: 2px;
    transform: translateY(-50%);
    background: currentColor;
    content: "";
  }

  .section__qualite .content__container .title h2{
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 2rem;
  }

  .section__qualite .content__container .content{
    margin-bottom: 2rem;
  }

  .section__qualite .content__container .action a {
    background-color: var(--primary);
    padding-right: 2rem;
    padding-left: 2rem;
    color: var(--white);
  }

   /*------------------------------------------ SECTION RESTAURANT ------------------------------------------ */

    .section__restaurant{
      padding: 2rem 0 2rem 0;
    }

    @media (min-width: 1200px){
      .section__restaurant{
        padding: 2rem 0 6rem 0;
      }
    }

    .section__restaurant .image__container {
      display: flex;
      align-items: center;
    }

    .section__restaurant .image__container .img__1{
      width: 50%;
      margin-right: 1rem;
    }

    .section__restaurant .image__container .img__2{
      width: 50%;
    }



    .section__restaurant .content__container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items:start;
      height: 100%;
      padding-top: 2rem;
    }

    @media (min-width: 1200px){
      .section__restaurant .content__container{
        align-items:end;
        
      }
    }
  
    .section__restaurant .content__container .title__deco h3{
      color: var(--primary);
      position: relative;
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
    } 
  
    .section__restaurant .content__container .title__deco h3::after{
      position: absolute;
      top: 50%;
      right: -90px;
      width: 70px;
      height: 2px;
      transform: translateY(-50%);
      background: currentColor;
      content: "";
    }

    @media (min-width: 1200px){
      .section__restaurant .content__container .title__deco h3::after{
        top: 50%;
        left:-90px;
        
      }
    }
  
    .section__restaurant .content__container .title h2{
      font-size: 50px;
      font-weight: 700;
      margin-bottom: 2rem;
      text-align: start;
    }

    @media (min-width: 1200px){
      .section__restaurant .content__container .title h2{
        text-align: end;
        
      }
    }
  
    .section__restaurant .content__container .content{
      margin-bottom: 2rem;
      display: flex;
      flex-direction: column;
    }

    

    @media (min-width: 1200px){
      .section__restaurant .content__container .content{
       align-items: end;
      }
    }

    .section__restaurant .content__container .content p{
      text-align: start;
    }

    @media (min-width: 1200px){
      .section__restaurant .content__container .content p{
        text-align: end;
      }
    }

    .section__restaurant .content__container .content a{
      color: var(--black);
      text-decoration: none;
     }
  
    .section__restaurant .content__container .action a {
      background-color: var(--primary);
      padding-right: 2rem;
      padding-left: 2rem;
      color: var(--white);
    }

    /*------------------------------------------ TPL STORY ------------------------------------------ */


    /*------------------------------------------ SECTION__ACCUEIL ------------------------------------------ */
    .tpl__story .section__accueil{
      position: relative;
    }

    .tpl__story .section__accueil .background__container{
      height: 100vh;
      width: 100%;
      position: relative;
      z-index: 1;
    }

    @media (min-width: 578px){
      .tpl__story .section__accueil .background__container{
        height: 70vh;
        
      }
    }

    .tpl__story .section__accueil .background__container img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .tpl__story .section__accueil .background__container::after{
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
    }
    .tpl__story .section__accueil .background__container .background__overlay{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4));
    }


   .tpl__story .section__accueil .content__container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
   }

   .tpl__story .section__accueil .content__container .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--white);
   }

   .tpl__story .section__accueil .content__container .content h1{
    text-transform: uppercase;
    font-size: 25px;
   }

   @media (min-width: 578px){
    .tpl__story .section__accueil .content__container .content h1{
      font-size: 50px;
     }
  }

   /*------------------------------------------ SECTION__QUALITE------------------------------------------ */
    .tpl__story .section__qualite .secret{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-bottom: 8rem;
    }

    .tpl__story .section__qualite .secret h2{
      color: var(--primary);
      font-size: 18px;
      text-transform: uppercase;
      font-weight: 700;
    }

    .tpl__story .section__qualite .secret h6{
      line-height: 1.2em;
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
    }

    @media (min-width: 578px){
      .tpl__story .section__qualite .secret h6{
        font-size: 2.5rem;
      }
    }


    /*------------------------------------------ SECTION__GRID------------------------------------------ */

    .tpl__story .section__grid{
      padding-bottom: 8rem;
    }

    .tpl__story .section__grid .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 7rem);
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      } 

      .tpl__story .section__grid .grid .grid__item__big{
        grid-column: span 1;
        grid-row: span 1; 
      }

      .tpl__story .section__grid .grid .grid__item__big img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .tpl__story .section__grid .grid .grid__item__small{
        grid-column: span 1;
        grid-row: span 1; 
      }

      .tpl__story .section__grid .grid .grid__item__small img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      @media (min-width: 578px){
        .tpl__story .section__grid .grid {
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(2, 15rem);
          } 
      }

      @media (min-width: 1200px){
        .tpl__story .section__grid .grid {
          grid-template-columns: repeat(6, 1fr);
          grid-template-rows: repeat(2, 15rem);
          } 

          .tpl__story .section__grid .grid .grid__item__big{
            grid-column: span 2;
            grid-row: span 2; 
          }

          .tpl__story .section__grid .grid .grid__item__small{
            grid-column: span 1;
            grid-row: span 1; 
          }
      }




 /*------------------------------------------ TPL CONTACT ------------------------------------------ */


    /*------------------------------------------ SECTION__CONTACT__ACCUEIL ------------------------------------------ */


      .tpl__contact .section__contact__accueil{
        position: relative;
      }
  
      .tpl__contact .section__contact__accueil .background__container{
        height: 100vh;
        width: 100%;
        position: relative;
        z-index: 1;
      }
  
      @media (min-width: 578px){
        .tpl__contact .section__contact__accueil .background__container{
          height: 70vh;
          
        }
      }
  
      .tpl__contact .section__contact__accueil .background__container img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  
      .tpl__contact .section__contact__accueil .background__container::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
      }
      .tpl__contact .section__contact__accueil .background__container .background__overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4));
      }
  
  
     .tpl__contact .section__contact__accueil .content__container{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      z-index: 2;
     }
  
     .tpl__contact .section__contact__accueil .content__container .content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: var(--white);
     }

     .tpl__contact .section__contact__accueil .content__container .content h1{
      text-transform: uppercase;
      font-size: 25px;
     }
  
     @media (min-width: 578px){
      .tpl__contact .section__contact__accueil .content__container .content h1{
        font-size: 50px;
       }
    }

    /*------------------------------------------ SECTION__LOCALISATION------------------------------------------ */

    .tpl__contact .section__localisation{
      padding: 4rem 0 4rem 0;
    }

    .tpl__contact .section__localisation .content__container{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-bottom: 3rem;
    }

    .tpl__contact .section__localisation .content__container .title__deco h3{
      color: var(--primary);
      position: relative;
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .tpl__contact .section__localisation .content__container .title__deco h3::after{
      position: absolute;
      top: 50%;
      left: 180px;
      width: 70px;
      height: 2px;
      transform: translateY(-50%);
      background: currentColor;
      content: "";
    }

    .tpl__contact .section__localisation .content__container .title h2{
      font-size: 50px;
      font-weight: 700;
      margin-bottom: 2rem;
    }

    .tpl__contact .section__localisation .content__container .information{
      padding-top: 3rem;
    }

    .tpl__contact .section__localisation .content__container .information div{
      display: flex;
    }

    .tpl__contact .section__localisation .content__container .information div svg{
      margin-right: 1rem;
    }

    .tpl__contact .section__localisation .image__container img{
      width: 100%;
    }

    .tpl__contact .section__localisation .vertical__divider{
      position: relative;
      height: 100%;
    }

    .tpl__contact .section__localisation .vertical__divider .icon__start{
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 3;
      width: 33px;
      color: #c8c4c5;
    }

    .tpl__contact .section__localisation .vertical__divider .line::before{
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      display: block;
      background: #c8c4c5;
      content: "";
      width: 1px;
      height: 100%; 
      z-index: 1;
    }

    .tpl__contact .section__localisation .vertical__divider .line::after{
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      display: block;
      background: #c8c4c5;
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }


    .tpl__contact .section__localisation .vertical__divider .icon__end{
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) rotate(180deg);
      z-index: 3;
      width: 33px;
      color: #c8c4c5;
    }




    /*------------------------------------------ SECTION__CONTACT__FORM------------------------------------------ */
    .tpl__contact .section__contact__form{
      padding: 8rem 0 8rem 0;
    }

    .tpl__contact .section__contact__form .content__container {
      padding-bottom: 3rem;
    }

    .tpl__contact .section__contact__form .content__container .title__information h3{
      color: var(--primary);
      position: relative;
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .tpl__contact .section__contact__form .content__container .title__information h3::after{
      position: absolute;
      top: 50%;
      left: 195px;
      width: 70px;
      height: 2px;
      transform: translateY(-50%);
      background: currentColor;
      content: "";
    }

    .tpl__contact .section__contact__form .content__container .title__information h2{
      font-size: 50px;
      font-weight: 700;
      margin-bottom: 2rem;
    }

    .tpl__contact .section__contact__form .content__container .horaire{
      padding-top: 3rem;
    }

    .tpl__contact .section__contact__form .content__container .horaire h5{
      padding-bottom: 1rem;
    }

    /*---- FORMULAIRE ----*/

  
    .tpl__contact .section__contact__form  .form .container-xxl .form__container .wpcf7 .wpcf7-form label{
      font-weight: 700;
    }

    .tpl__contact .section__contact__form .form .container-xxl .form__container .wpcf7 .wpcf7-form label span input{
      border-top: none !important;
      border-left: none !important;
      border-right: none !important;
      width: 100%;
    }

    .tpl__contact .section__contact__form .form .form__container .wpcf7 .wpcf7-form label span textarea{
      border-top: none !important;
      border-left: none !important;
      border-right: none !important;
      width: 100%;
    }

    @media (min-width: 576px){
      .tpl__contact .section__contact__form .form .form__container .wpcf7 .wpcf7-form label span textarea{
        height: 117px;
      }
    }


    @media (min-width: 576px){
      .tpl__contact .section__contact__form  .form .form__container .wpcf7 .wpcf7-form .e-mail ,.tpl__contact .section__contact__form  .form .form__container .wpcf7 .wpcf7-form .sujet {
      padding-top: 2rem;
      }
    }

    .tpl__contact .section__contact__form .form .form__container .wpcf7 .wpcf7-form .message{
      margin-bottom: 2rem;
    }

    @media (min-width: 576px){
      .tpl__contact .section__contact__form  .form .form__container .wpcf7 .wpcf7-form .message{
        padding-top: 2rem;
        
      }
    }

    .tpl__contact .section__contact__form  .form .form__container .wpcf7 .wpcf7-form .message label{
      width: 100%;
    }

    .tpl__contact .section__contact__form  .form .form__container.wpcf7 .wpcf7-form .message label span textarea{
      width: 100%;
    }

    .tpl__contact .section__contact__form  .form .form__container.wpcf7 .wpcf7-form .submit{
      margin-bottom: 2rem;
    }

    @media (min-width: 1200px){
      .tpl__contact .section__contact__form  .form .form__container .wpcf7 .wpcf7-form .submit{
        margin-bottom: 0rem;
      }
    }

    .tpl__contact .section__contact__form  .form .form__container .wpcf7 .wpcf7-form .submit button{
      border: none;
      background: white;
      text-transform: uppercase;
      display: flex;
      align-items: center;
    }

    .tpl__contact .section__contact__form  .form .form__container .wpcf7 .wpcf7-form .submit button span{
      margin-right: 1rem;
      margin-top: 3px;
      color: #000000 !important;
    }

    .tpl__contact .section__contact__form  .form .form__container .wpcf7 .wpcf7-form .submit .wpcf7-spinner{
      display: none;
    }

  /*------------------------------------------ FOOTER------------------------------------------ */
  footer{
    background: var(--black);
    padding: 4rem 0 4rem 0;
    color: var(--white);
  }

  footer .contact__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
  }

  footer .contact__container .title__deco h3{
    color: var(--primary);
    position: relative;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
  } 

  footer .contact__container .title__deco h3::after{
    position: absolute;
    top: 50%;
    left: 195px;
    width: 70px;
    height: 2px;
    transform: translateY(-50%);
    background: currentColor;
    content: "";
  }

  footer .contact__container .action a {
    background-color: var(--primary);
    padding-right: 2rem;
    padding-left: 2rem;
    color: var(--white);
  }

  footer .information__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
  }

  footer .information__container .title__deco h3{
    color: var(--primary);
    position: relative;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
  } 

  footer .information__container .title__deco h3::after{
    position: absolute;
    top: 50%;
    left: 140px;
    width: 70px;
    height: 2px;
    transform: translateY(-50%);
    background: currentColor;
    content: "";
  }

  footer .information__container .adresse,footer .information__container .telephone,footer .information__container .email {
    margin-left: 2rem;
    display: flex;
  }

  footer .information__container div svg{
    margin-right: 1rem;
  }

  footer .information__container .email a{
    color: var(--white);
  }