@charset "UTF-8";
/*saas & scss
Convention dev saas & Sccs haut fichier
$variable:;
Stocks =>Color,famille police
*/
/*Var-all:
*/
/*Color-all:
*/
/*rouge*/
/*violet-foncé*/
/*rose-clair*/
/*vert-clair*/
/*vert-sombre*/
/*gris-sombre*/
/*gris-clair*/
/*blanc*/
/*noir*/
/*font-family all:
*/
/*loader
*/
/*blanc*/
/*function-all
*/
/*saas & scss (end)
*/
/*Surcharge>>
*/
html,
body,
header,
main,
footer,
nav,
address,
section,
div,
article,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
span,
a,
i,
pre,
code {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
  padding: 0;
  margin: 0;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ol, ul {
  list-style: none;
}

/*Balises sémantiques>
minimum =>(header), (nav),(h1)(main),(section),(footer)=>True
*/
/*Polices>
Logo et titres : Shrikhand
Texte : Roboto
*/
/*Couleurs>
Primaire, Secondaire ,Tertiaire

violet-foncé:
#9356DC
rose-clair:
#FF79DA 
vert-clair:
#99E2D0
*/
/*(px) All fima Mobile
font-size=>  15.4,16,17,18,24,28,30;desktop 40
font-weight=>300,400,500,700,
line-height=>17.63, 18.75, 19.92, 21.09, 21.09, 26.24, 28.13, 
*/
/******Css Pricipal Mobile first+++***********/
/*
*-- {All-éléments-Dom  
	font-family: Roboto,sans-serif;
}
*/
p, h1, h2, h4 {
  font-family: Roboto, sans-serif;
}

/*Design System Config: 
*/
:root {
  /*Var-all*/
  /*Text configuration*/
  /*var-all font-size*/
  --size-15-4:1.375rem;
  --size-16:1rem;
  --size-17:1.063rem;
  --size-18:1.125rem;
  --size-24:1.5rem;
  --size-28:1.75rem;
  --size-30:1.875rem;
  --size-40:2.5rem;
  /*var font-weight*/
  --font-weight-300:300;
  --font-weight-400:400;
  --font-weight-500:500;
  --font-weight-700:700;
  /*var-all line-height*/
  --line-height-16-41:1.026rem;
  --line-height-17-63:1.102rem;
  --line-height-18-75:1.172rem;
  --line-height-19-92:1.245rem;
  --line-height-21-09:1.318rem;
  --line-height-26-24:1.64rem;
  --line-height-28-13:1.758rem;
  /*var-*/
  --h1-font-size:1.375rem;
  /*22px*/
  --h1-font-weight: 700;
  /* bold 700*/
  --h1-line-height: 1.614rem;
  /*25.83px*/
  --h2-font-size:1.125rem;
  /*18px*/
  --h2-font-weight: 700;
  /* bold 700*/
  --h2-line-height: 1.321rem;
  /*21.13px*/
  --h3-font-size:1.063rem;
  /*17px*/
  --h3-font-weight: 700;
  /* bold 700*/
  --h3-line-height: 1.248rem;
  /*19.96px*/
  --p-font-size:1rem;
  /*16px*/
  --p-font-weight: 400;
  /* normal 400*/
  --p-line-height: 1.174rem;
  /*18.78px*/
  --h4-font-size:0.875rem;
  /*14px*/
  --h4-font-weight: 400;
  /* normal 400*/
  --h4-line-height: 1.028rem;
  /*16.44px*/
}

/*Icone-All
*/
.fa-solid {
  /*Icone-color*/
  color: #353535;
  /*recherche*/
}

.fa-lg {
  /*Taille*/
  font-size: 1.25rem;
}

/*Color-All
*/
.color_scss {
  color: #ff0000;
}

.c1 {
  color: #fff;
}

.c2 {/*icone*/

color: #7e7e7e;
}



body {
  display: flex;
  justify-content: center;
}

.main-container {
  width: 100%;
}

/*font-all Add elem (x) Dom class=""
*/
/*Mobil Acceuil:
*/
.text-1 {
  font-size: var(--size-16);
  line-height: var(--line-height-18-75);
  font-weight: var(--font-weight-500);
}

.text-2 {
  /*<h1>*/
  font-size: var(--size-24);
  line-height: var(--line-height-28-13);
  font-weight: var(--font-weight-700);
}

.text-3 {
  /*bottom-clone*/
  font-size: var(--size-18);
  line-height: var(--line-height-21-09);
  font-weight: var(--font-weight-300);
}

.text-4 {
  /*bottom*/
  font-size: var(--size-18);
  line-height: var(--line-height-21-09);
  font-weight: var(--font-weight-300);
}

.text-5 {
  /*<h2>*/
  font-size: var(--size-24);
  line-height: var(--line-height-28-13);
  font-weight: var(--font-weight-700);
}

.text-6 {
  /**/
  font-size: var(--size-16);
  line-height: var(--line-height-18-75);
  font-weight: var(--font-weight-500);
}

.text-7 {
  /**/
  font-size: var(--size-24);
  line-height: var(--line-height-28-13);
  font-weight: var(--font-weight-700);
}

.text-8 {
  /**/
  font-size: var(--size-18);
  line-height: var(--line-height-21-09);
  font-weight: var(--font-weight-700);
}

.text-8-1 {
  /*new*/
  font-size: var(--size-14);
  line-height: var(--line-height-16-41);
  font-weight: var(--font-weight-500);
}

.text-9 {
  /**/
  font-size: var(--size-17);
  line-height: var(--line-height-19-92);
  font-weight: var(--font-weight-300);
}

/*footer*/
.text-10 {
  /*logo*/
  font-size: var(--size-18);
  line-height: var(--line-height-26-24);
  font-weight: var(--font-weight-400);
  font-family: "Shrikhand", serif;
}

.text-11 {
  /**/
  font-size: var(--size-16);
  line-height: var(--line-height-18-75);
  font-weight: var(--font-weight-500);
}

.text-12 {
  /**/
  font-size: var(--size-16);
  line-height: var(--line-height-18-75);
  font-weight: var(--font-weight-400);
}

/*Surcharge-All>>
*/
/*<header>-All 
*/
/*composant-loader
*/
.container-loader {
  height: 0px;
  width: 0px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: 0;
  animation: call_frame_1 0.5s;
  /*T*/
}

.corp-loader {
  width: 300px;
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  line-height: 200px;
  margin-top: -100px;
  margin-left: -150px;
  background-color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
}

/*Loader-elem-Dom
*/
.container-loader-nas {
  padding-top: 20px;
  box-sizing: border-box;
}

.loader-nas {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #FF79DA #FF79DA transparent transparent;
  box-sizing: border-box;
  animation: call_frame_2 1s linear infinite;
}

.loader-nas::after,
.loader-nas::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #9356DC #9356DC;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-sizing: border-box;
  animation: call_frame_3 0.5s linear infinite;
  transform-origin: center;
}

.loader-nas::before {
  width: 48px;
  height: 48px;
  border-color: #99E2D0 #99E2D0 transparent transparent;
  animation: call_frame_2 1.5s linear infinite;
}

/*Animat-All
*/
@keyframes call_frame_2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes call_frame_3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes call_frame_1 {
  0% {
    z-index: 999;
    height: 100%;
    width: 100%;
    opacity: 1;
    /*background-color: rgba(0,0,0,0.5);*/
    background-color: #fff;
  }
  100% {
    z-index: 999;
    height: 100%;
    width: 100%;
    opacity: 1;
    /*background-color: rgba(0,0,0,0.5);*/
    background-color: #fff;
  }
}
/*Composant-1
*/
.container-logo {
  /*flex*/
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
}

.logo {
  /*fima*/
  height: 44px;
  width: 162px;
}

/*<main>-All
*/
/*Composant-2
*/
.container-location {
  /*flex*/
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  background-color: #f3f3f3;
  margin-bottom: 20px;
}

.container-location-e1 {
  /*icon*/
  padding: 15px;
  box-sizing: border-box;
}

.container-location-e2 {
  /*text:Paris, Belleville*/
  padding-top: 15px;
  box-sizing: border-box;
}

/*Composant-3
*/
.container-text1 {
  /*flex(1)*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 20px;
}

.container-text1-e1 {
  /*flex()*/
  /*Media query (Desktop)*/
  /*text=>Réservez le menu qui vous convient*/
  width: 100%;
  text-align: center;
  /*========================>(Desktop)*/
  /*
  display: flex;
  flex-direction: row;
  justify-content: center ;
  */
}

.container-text2 {
  /*flex(1)*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 20px;
}

.container-text2-e1 {
  /*e-1 text=>Découvrez des restaurants d'exception,séléctionnés par nos soins*/
  width: 100%;
  text-align: center;
  /*========================>(Desktop)*/
  /*
  display: flex;
  flex-direction: row;
  justify-content: center ;
  */
}

.container-bt-1 {
  /*flex(1)*/
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.container-bt-1-e1 {
  /*e-1 (Bouton)=>Explorer nos restaurants*/
  /*Button-1*/
  cursor: pointer;
  font-weight: 500;
  font-size: 1.1rem;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 100px;
  background-color: #686868;
  background-image: linear-gradient(0deg, rgba(147, 86, 220, 0.9), rgba(255, 121, 218, 0.9));
}

.container-bt-1-e1:hover {
  border-radius: 100px;
  background-image: linear-gradient(0deg, #9356DC, #ff88de);
}

/*Composant-4
*/
.container-fonctionnement {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  box-sizing: border-box;
}

.container-fonctionnement-b {
  /*text=>fonctionnement*/
  margin-bottom: 20px;
}

.container-fonctionnement-c {
  /*flex() <li>*/
  /*media query=>desktop*/
  width: 100%;
  display: flex;
  flex-direction: column;
  /*Mobil*/
  /*flex-direction: row;/*Desktop*/
  /*justify-content:space-between;/*Desktop*/
}

.container-fonctionnement-c-e1 {
  /*flex()=>Contenu=> <li>*/
  height: 72.38px;
  /*width:30%;/*Desktop*/
  padding: 1.5rem;
  box-sizing: border-box;
  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.125);
  border-radius: 1.25rem;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;  
}
.container-fonctionnement-c-e1:hover{	
cursor: pointer;
}
.container-fonctionnement-c-e1:hover >.container-fonctionnement-c-e1-e2 .c2{
color:#9356DC;
}
.container-fonctionnement-c-e1-e1 {
  /*numbre 1 ronde*/
  height: 24px;
  /*fima*/
  width: 24px;
  /*fima*/
  margin-left: -37px;
  color: #fff;
  text-align: center;
  padding-top: 2px;
  border: 1px solid #9356dc;
  border-radius: 100px;
  box-sizing: border-box;
  background: #9356dc;
}

.container-fonctionnement-c-e1-e2 {
  /*icone*/
  margin-left: 15px;
  margin-right: 15px;
}

/*Composant-5 (Mobile=>first)
*/
.container-restaurants {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #F6F6F6;
  
}

.container-restaurants-b {
  margin-bottom: 20px;
}

.carts-restaurants-e1 {
  width: 100%;
  border-radius: 1.25rem;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 20px;
  
}

.cart-top {
  height: 190px;
  overflow: hidden;
}

.cart-img {/*update 11.12.2023*/
  object-fit:cover;
  height: 190px;
  width: 100%;
  position: relative;
  z-index: 0;

  
}

.container-cart-new {
  /*flex()*/
  /*true*/
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: -182px;
  z-index: 0;
}

.container-cart-flase {
  /*flase*/
  display: none;
}

.cart-new {
  /*text=>nouveaux*/
  position: absolute;
  right: 12px;
  margin-top: 0px;
  color: #1b6150;
  padding: 0.5rem;
  border-radius: 0.125rem;
  background-color: #99e2d0;
}

.cart-foot {
  /*flex*/
  display: flex;
  justify-content: space-between;
}

.cart-foot-e1 {
  /*droit*/
  padding: 20px;
}

.cart-foot-e2 {
  /*gauche*/
}

.container-cart-coeur {
  width: 22px;
  margin-top: 28px;
  margin-right: 15px;
}

/*icone-coeur*/
.cart-coeur {
  /*container-icone*/
  /*Mecanisme opacité css Nas +++*/
  height: 21px;
  width: 22px;
  position: absolute;
  right: unset;
  margin-top: unset;
  background-color: #fff;
  cursor: pointer;
}

.icon-coeur-1 {
  /*icone 1*/
  /*depart*/
  position: absolute;
  left: 0px;
  font-size: 21px;
  color: #000;
  opacity: 1;
}

.icon-coeur-2 {
  /*icone 1*/
  /*depart*/
  /*degradé*/
  /*z-index*/
  position: absolute;
  font-size: 21px;
  color: #000;
  background: -webkit-linear-gradient(#9356DC, #FF79DA);
  /*color fima onglet=>linear*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: 0.7s;
}

.icon-coeur-1:hover {
  opacity: 0;
}

.icon-coeur-2:hover {
  opacity: 1;
}

/*<footer>-All
*/
/*Composant-6
*/
.container-footer {
  /*G*/
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #353535;
}

.footer-e1 {
  /*container=>logo*/
  width: 100%;
}

.footer-e1-e1 {
  /*logo text*/
  width: 137.58px;
  height: 27px;
  color: #fff;
  margin-bottom: 20px;
}

.ul-footer-e2 {
  /*<ul>*/
}

.li-footer-e2 {
  /*<li>*/
  margin-bottom: 15px;
}

.footer-icon {
  /*icone*/
  color: #fff;
}

.footer-text-1 {
  /*text*/
  color: #fff;
}

.D {
  display: none;
}

/****** Media queries ***********/
/* Medium devices (Parametre=>Malek, less/equal than 768px) */
@media (min-width: 768px) {
  body {
    /*
    border:3px solid green;
    box-sizing:border-box;
    */
  }

  /*Composant-3 
  */
  .container-text1-e1 {
    /*flex()*/
    /*Media query (Desktop)*/
    /*text=>Réservez le menu qui vous convient*/
    width: 100%;
    text-align: unset;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .container-text2-e1 {
    /*e-1 text=>Découvrez des restaurants d'exception,séléctionnés par nos soins*/
    width: 100%;
    text-align: unset;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  /*Composant-4 
  */
  .container-fonctionnement {
    min-width: 768px;
    margin: auto;
  }

  .container-fonctionnement-c-e1 {
    /*flex()=>Contenu=> <li>*/
    width: 30%;
  }

  .container-fonctionnement-c {
    /*flex() <li>*/
    /*media query=>desktop*/
    flex-direction: row;
    justify-content: space-between;
  }

  /*Composant-5
  */
  .container-restaurants-a {
    width: 100%;
    background-color: #F6F6F6;
  }

  .container-restaurants {
    min-width: 768px;
    margin: auto;
  }

  .container-restaurants-e1-flex-1 {
    /*flex*/
    display: flex;
    justify-content: space-between;
  }

  .carts-restaurants-e1 {
    /*<li>=>*/
    width: 48%;
  }

  .container-restaurants-e1-flex-2 {
    /*flex*/
    display: flex;
    justify-content: space-between;
  }

  .cart-top {
    height: 190px;
    overflow: hidden;
  }

  .cart-img {/*update 11.12.2023*/
    height: 190px;
    width: 100%;
    position: relative;
    z-index: 10;
	object-fit: cover;
  }

  .container-cart-new {/*update 2.12.2023*/
    /*flex*/
    /*true*/
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: -182px;
    z-index: 100;
  }

  .container-cart-flase {
    /*flase*/
    display: none;
  }

  .cart-new {
    /*text=>nouveaux*/
    /*ok*/
    width: 80px;
    margin: unset;
    position: unset;
    right: unset;
    margin-right: 12px;
  }

  .cart-foot {
    /*flex*/
    display: flex;
    justify-content: space-between;
  }

  .cart-foot-e1 {
    /*droit*/
    padding: 20px;
  }

  .cart-foot-e2 {
    /*gauche*/
  }

  .container-cart-coeur {
    width: 22px;
    margin-top: 28px;
    margin-right: 15px;
  }

  .cart-coeur {
    /*container-icone*/
    /*Mecanisme opacité css Nas +++*/
    height: 21px;
    width: 22px;
    position: absolute;
    right: unset;
    margin-top: unset;
    background-color: #fff;
    cursor: pointer;
  }

  /*Composant-6
  */
  .container-footer {
    /*parent=>height:114px;*/
    padding: unset;
    height: 114px;
    /*fima*/
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #353535;
    display: flex;
    flex-direction: row-reverse;
  }

  .footer-e1 {
    /*container-logo*/
    /*ok*/
    height: 70px;
    width: 137.58px;
    padding-top: 32px;
    box-sizing: border-box;
  }

  .footer-e1-e1 {
    /*logo text*/
    /*ok*/
    margin: unset;
    height: 27px;
    width: 137.58px;
  }

  .ul-footer-e2 {
    /*container-logo*/
    /*parent-G=>height:114px;*/
    /*ok*/
    height: 70px;
    width: 700px;
    padding-top: 35px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
  }

  .li-footer-e2 {
    /*<li>-All*/
    margin-bottom: unset;
    margin-right: 10px;
  }

  .li-footer-e2-id_2 {
    /*<li>ID=>Unique*/
    margin-right: 40px;
  }
}
/* Medium devices (Desktop, less/equal than 1440px) */
@media (min-width: 1440px) {
  body {
    /*
    border:2px solid blue ;
    box-sizing:border-box;
    */
  }

  /*Composant-3
  */
  .container-text1-e1 {
    /*flex()*/
    /*Media query (Desktop)*/
    /*text=>Réservez le menu qui vous convient*/
    width: 100%;
    text-align: unset;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .container-text2-e1 {
    /*e-1 text=>Découvrez des restaurants d'exception,séléctionnés par nos soins*/
    width: 100%;
    text-align: unset;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  /*Composant-4
  */
  .container-fonctionnement {
    width: 1080px;
    /*fima*/
    margin: auto;
  }

  .container-fonctionnement-c-e1 {
    /*flex()=>Contenu=> <li>*/
    width: 30%;
    /*Desktop*/
  }

  .container-fonctionnement-c {
    /*flex() <li>*/
    /*media query=>desktop*/
    flex-direction: row;
    /*Desktop*/
    justify-content: space-between;
    /*Desktop*/
  }

  /*Composant-5
  */
  .container-restaurants-a {
    width: 100%;
    background-color: #F6F6F6;
  }

  .container-restaurants {
    width: 1080px;
    /*fima*/
    margin: auto;
  }

  .container-restaurants-e1-flex-1 {
    /*flex*/
    display: flex;
    justify-content: space-between;
  }

  .carts-restaurants-e1 {
    /*<li>=>4*/
    width: 490px;
    /*fima*/
  }

  .container-restaurants-e1-flex-2 {
    /*flex*/
    display: flex;
    justify-content: space-between;
  }

  /*Composant-6
  */
  .container-footer {
    /*parent=>height:114px;*/
    padding: unset;
    height: 114px;
    /*fima*/
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #353535;
    display: flex;
    flex-direction: row-reverse;
  }

  .footer-e1 {
    /*container-logo*/
    height: 70px;
    width: 137.58px;
    padding-top: 32px;
    box-sizing: border-box;
  }

  .footer-e1-e1 {
    /*logo text*/
    margin: unset;
    height: 27px;
    width: 137.58px;
  }

  .ul-footer-e2 {
    /*container-logo*/
    /*parent-G=>height:114px;*/
    height: 70px;
    width: 700px;
    padding-top: 35px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
  }

  .li-footer-e2 {
    /*<li>-All*/
    margin-bottom: unset;
    margin-right: 10px;
    box-sizing: border-box;
  }

  .li-footer-e2-id_2 {
    /*<li>ID=>Unique*/
    margin-right: 50px;
  }

  /*Text-All Add elem (x) class=""
  */
  .text-2 {
    /*<h1>*/
    font-size: var(--size-40);
    line-height: var(--line-height-28-13);
    font-weight: var(--font-weight-700);
  }

  .text-4 {
    /*bottom*/
    font-size: var(--size-16);
    line-height: var(--line-height-18-75);
    font-weight: var(--font-weight-500);
  }
}