/************************************************
*************************************************
            NOS MENUS : FONTS + COLOURS
*************************************************
************************************************/

.legende, .unMenu {
  font-family: 'Roboto', sans-serif;
}

.student {
  color: #363C71;
}

.hot {
  color: #F33928;
}

.eco {
  color: #5FAA7A;
}

.gluten {
  color: #F2B441;
}

.unMenu h3 {
  background-color: #601818;
  text-transform: uppercase;
}

.prix {
  background-color: #AD1803;
}

.unMenu h3, .prix {
  color: #EF8E3A;
}

.unMenu p {
  font-style: italic;
}

.menus {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.legende, .lesIcones, .uneLegende {
  display: flex;
}

.legende {
  flex-flow: column wrap;
  align-items: center;
}

/************************************************
*************************************************
                 MOBILE VERSION
*************************************************
************************************************/
@media screen and (max-width: 500px) {

  .menus {
    margin: 4rem 0;
  }

  .menus > header {
    width: 300px;
  }

  .legende div:last-child {
    text-align: center;
  }

  .lesIcones {
    flex-flow: row wrap;
    justify-content: center;
  }

  .uneLegende {
    flex-flow: column nowrap;
    align-items: center;
    margin: 8px;
  }

  .uneLegende i:first-child {
    margin-right: -8px;
  }

  .uneLegende span {
    width: 80px;
    text-align: center;
  }

  .menus main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-top: 1rem;
  }

  .unMenu {
    width: 300px;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin: 1rem 0;
  }

  .unMenu header {
    width: 300px;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  }

  .unMenu h3 {
    width: 300px;
    height: auto;
    border-radius: 20px;
    padding: 8px 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 1.2rem;
  }

  .unMenu h3 i {
    margin-right: 5px;
  }

  .burger {
    font-size: 1rem;
  }

  .glu header span, .vege header span, .vega header span, .piment header span {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }

  .vega span i:first-child {
    margin-right: -8px;
  }

  .unMenu p {
    width: 300px;
    height: 40px;
  }

  .unMenu h3, .unMenu p {
    text-align: center;
  }

  .prix {
    width: 200px;
    height: auto;
    padding: 5px;
    text-align: center;
    font-weight: 700;
  }

  .tabPrix tr td {
    display: flex;
    align-items: center;
    height: 25px;
  }

  .tabPrix i {
    margin-left: 5px;
  }

}

/************************************************
*************************************************
                TABLETTE VERSION
*************************************************
************************************************/
@media screen
  and (min-width: 501px)
  and (max-width: 1000px) {

    .menus {
      margin: 4rem 0;
    }

    .uneLegende {
      flex-flow: column nowrap;
      align-items: center;
      margin: 1rem;
    }

    .uneLegende i:first-child {
      margin-right: -8px;
    }

    .uneLegende span {
      width: 80px;
      text-align: center;
    }

    .menus main {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      margin-top: 1rem;
    }

    .unMenu {
      width: 400px;
      height: auto;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      margin: 1rem;
    }

    .unMenu header {
      width: 400px;
      height: auto;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
    }

    .unMenu h3 {
      width: 300px;
      height: auto;
      border-radius: 20px;
      padding: 8px 0;
      display: flex;
      align-items: baseline;
      justify-content: center;
      font-size: 1.2rem;
    }

    .unMenu h3 i {
      margin-right: 5px;
    }

    .burger {
      font-size: 1rem;
    }

    .glu header span, .vege header span, .vega header span, .piment header span {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }

    .vega span i:first-child {
      margin-right: -8px;
    }

    .unMenu p {
      width: 300px;
      height: 40px;
    }

    .unMenu h3, .unMenu p {
      text-align: center;
    }

    .prix {
      width: 200px;
      height: auto;
      padding: 5px;
      text-align: center;
      font-weight: 700;
    }

    .tabPrix tr td {
      display: flex;
      align-items: center;
      height: 25px;
    }

    .tabPrix i {
      margin-left: 5px;
    }

}

/************************************************
*************************************************
                  LAPTOP S VERSION
*************************************************
************************************************/
@media screen
  and (min-width: 1001px)
  and (max-width: 1024px) {

    .menus {
      margin: 4rem 0;
    }

    .uneLegende {
      flex-flow: column nowrap;
      align-items: center;
      margin: 1rem;
    }

    .uneLegende i:first-child {
      margin-right: -8px;
    }

    .uneLegende span {
      width: 80px;
      text-align: center;
    }

    .menus main {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      margin-top: 1rem;
    }

    .unMenu {
      width: 400px;
      height: auto;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      margin: 1rem;
    }

    .unMenu header {
      width: 400px;
      height: auto;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
    }

    .unMenu h3 {
      width: 300px;
      height: auto;
      border-radius: 20px;
      padding: 8px 0;
      display: flex;
      align-items: baseline;
      justify-content: center;
      font-size: 1.2rem;
    }

    .unMenu h3 i {
      margin-right: 5px;
    }

    .burger {
      font-size: 1rem;
    }

    .glu header span, .vege header span, .vega header span, .piment header span {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }

    .vega span i:first-child {
      margin-right: -8px;
    }

    .unMenu p {
      width: 300px;
      height: 40px;
    }

    .unMenu h3, .unMenu p {
      text-align: center;
    }

    .prix {
      width: 200px;
      height: auto;
      padding: 5px;
      text-align: center;
      font-weight: 700;
    }

    .tabPrix tr td {
      display: flex;
      align-items: center;
      height: 25px;
    }

    .tabPrix i {
      margin-left: 5px;
    }
}

/************************************************
*************************************************
                  LAPTOP M VERSION
*************************************************
************************************************/
@media screen
  and (min-width: 1025px)
  and (max-width: 1440px) {

    .menus {
      margin: 4rem 0;
    }

    .uneLegende {
      flex-flow: column nowrap;
      align-items: center;
      margin: 1rem;
    }

    .uneLegende i:first-child {
      margin-right: -8px;
    }

    .uneLegende span {
      width: 80px;
      text-align: center;
    }

    .menus main {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      margin-top: 1rem;
    }

    .unMenu {
      width: 400px;
      height: auto;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      margin: 1rem;
    }

    .unMenu header {
      width: 400px;
      height: auto;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
    }

    .unMenu h3 {
      width: 300px;
      height: auto;
      border-radius: 20px;
      padding: 8px 0;
      display: flex;
      align-items: baseline;
      justify-content: center;
      font-size: 1.2rem;
    }

    .unMenu h3 i {
      margin-right: 5px;
    }

    .burger {
      font-size: 1rem;
    }

    .glu header span, .vege header span, .vega header span, .piment header span {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }

    .vega span i:first-child {
      margin-right: -8px;
    }

    .unMenu p {
      width: 300px;
      height: 40px;
    }

    .unMenu h3, .unMenu p {
      text-align: center;
    }

    .prix {
      width: 200px;
      height: auto;
      padding: 5px;
      text-align: center;
      font-weight: 700;
    }

    .tabPrix tr td {
      display: flex;
      align-items: center;
      height: 25px;
    }

    .tabPrix i {
      margin-left: 5px;
    }

}

/************************************************
*************************************************
                  LAPTOP L VERSION
*************************************************
************************************************/
@media screen
  and (min-width: 1441px)
  and (max-width: 1980px) {

    .menus {
      margin: 4rem 0;
    }

    .uneLegende {
      flex-flow: column nowrap;
      align-items: center;
      margin: 1rem;
    }

    .uneLegende i:first-child {
      margin-right: -8px;
    }

    .uneLegende span {
      width: 80px;
      text-align: center;
    }

    .menus main {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      margin-top: 1rem;
    }

    .unMenu {
      width: 400px;
      height: auto;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      margin: 1rem;
    }

    .unMenu header {
      width: 400px;
      height: auto;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
    }

    .unMenu h3 {
      width: 300px;
      height: auto;
      border-radius: 20px;
      padding: 8px 0;
      display: flex;
      align-items: baseline;
      justify-content: center;
      font-size: 1.2rem;
    }

    .unMenu h3 i {
      margin-right: 5px;
    }

    .burger {
      font-size: 1rem;
    }

    .glu header span, .vege header span, .vega header span, .piment header span {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
    }

    .vega span i:first-child {
      margin-right: -8px;
    }

    .unMenu p {
      width: 300px;
      height: 40px;
    }

    .unMenu h3, .unMenu p {
      text-align: center;
    }

    .prix {
      width: 200px;
      height: auto;
      padding: 5px;
      text-align: center;
      font-weight: 700;
    }

    .tabPrix tr td {
      display: flex;
      align-items: center;
      height: 25px;
    }

    .tabPrix i {
      margin-left: 5px;
    }

}