@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;0,900;1,200&display=swap");
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: auto;
  font-family: 'Nunito', sans-serif;
  background-color: white; }

/********* container *********/
.container {
  flex: 1;
  height: 100%;
  background-color: white; }
  .container__title {
    font-family: 'Poppins', sans-serif;
    color: #2C3A47;
    font-size: 32px;
    font-weight: lighter;
    text-align: center;
    margin-top: 0;
    margin-bottom: 64px; }
  .container .continue {
    color: #2C3A47;
    font-size: 14px; }

/********* wrapper large and medium *********/
.wrapper-small {
  width: 95%;
  max-width: 500px;
  margin: auto;
  border: solid 1px #dddddd;
  border-radius: 4px; }
.wrapper-large {
  width: 98%;
  max-width: 900px;
  margin: auto; }
  .wrapper-large p,
  .wrapper-large a {
    font-weight: lighter;
    font-size: 14px; }
  .wrapper-large a {
    color: #2C3A47; }
    .wrapper-large a:hover {
      color: black; }

.wrapper-large > div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center; }
  .wrapper-large > div a {
    padding-bottom: 16px; }

/********* header *********/
.header {
  background-color: white;
  color: #2C3A47;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px; }
  .header__title {
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center; }
    .header__title > a {
      text-decoration: none;
      color: #2C3A47; }
  .header .image {
    width: 42px;
    padding: 16px 0 8px  16px; }
  .header img {
    width: 100%; }
  .header .text {
    font-size: 20px;
    letter-spacing: 4px;
    margin: 0;
    padding: 8px; }

.shopping .fas {
  color: #2C3A47;
  font-size: 26px;
  position: relative; }
.shopping #display {
  position: absolute;
  top: 26px;
  right: 5px;
  width: 30px;
  text-align: center; }
.shopping .displayNumber {
  font-size: 12px;
  font-weight: bolder;
  color: white; }

/********* loader *********/
.loader {
  border: solid 2px #d6c7e4;
  border-right-color: #5b59ce;
  border-radius: 50px;
  background-color: white;
  width: 80px;
  height: 80px;
  margin: auto;
  text-align: center;
  margin-top: 25vh;
  animation: loader-rotate 800ms ease-in infinite; }

.hidden {
  display: none; }

@keyframes loader-rotate {
  from {
    transform: rotate(0deg);
    box-shadow: 0px 0px 0px grey; }
  75% {
    box-shadow: 0px 0px 5px grey; }
  to {
    transform: rotate(360deg);
    box-shadow: 0px 0px 0px grey; } }
/********* Produc box *********/
.product__list {
  background-color: white; }
  .product__list > a {
    text-decoration: none; }
  .product__list:hover {
    box-shadow: 0px 0px 2px #2C3A47; }
.product__single {
  margin: 32px; }
  @media screen and (min-width: 600px) {
    .product__single {
      display: flex; } }
.product__image-small {
  padding: 16px;
  text-align: center; }
  .product__image-small > img {
    width: 168px;
    height: 120px; }
.product__image-big {
  min-width: 210px;
  max-width: 60%;
  margin: auto;
  padding: 0; }
  .product__image-big > img {
    width: 100%;
    height: auto; }

.items {
  background-color: #f7f7f7;
  width: 80vw;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 4px; }
  @media screen and (max-width: 425px) {
    .items {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

/********* mise en page descriptions produits "infos" *********/
.product__infos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 16px;
  color: #2C3A47; }
.product__infos-details {
  padding: 8px;
  color: #2C3A47; }

/********* mise en page couleurs et quantités *********/
.optionsBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  width: 150px; }

.productName {
  color: #2C3A47;
  letter-spacing: 0.1em;
  font-size: 20px;
  font-weight: 900; }

.productPrice,
.productDescription,
.productQuantity,
.productOptions {
  font-weight: lighter;
  font-size: 14px; }

.productDescription {
  padding-bottom: 16px; }

.addSubButtons button {
  width: 24px;
  padding: 0; }

.addSubButtons,
.productPrice,
.productOptions {
  margin: 2px 0; }

.button {
  width: 150px;
  padding: 10px;
  border-radius: 5px;
  background-color: #5b59ce;
  color: white;
  border: solid 1px #5b59ce;
  font-weight: bold;
  font-size: 12px; }
  .button:hover {
    color: #5b59ce;
    background-color: white;
    border: solid 1px #dddddd;
    border-radius: 4px; }

/*********** Basket Page ***********/
@media (min-width: 694px) {
  .basket-box {
    display: grid;
    grid-template-columns: 1fr 1fr; } }

.basket {
  padding: 16px; }

.resume {
  margin: 8px;
  font-weight: lighter;
  font-size: 14px;
  display: flex; }
  .resume .fas {
    padding-left: 16px; }
    .resume .fas:hover {
      color: red;
      cursor: pointer; }

.resumeList {
  width: 100%;
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-between; }
  .resumeList .list-name {
    width: 33%;
    text-align: start; }
    .resumeList .list-name a {
      font-size: 13px;
      color: black; }
      .resumeList .list-name a:hover {
        text-decoration: underline; }
  .resumeList .list-info {
    width: 33%;
    font-size: 13px;
    text-align: center;
    color: #2C3A47; }
  .resumeList .list-price {
    font-size: 13px;
    width: 33%;
    text-align: end;
    color: #2C3A47; }

#totalResume {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px;
  font-weight: lighter;
  font-size: 14px;
  border-top: solid #1f1f1f 1px; }
  #totalResume p:first-child {
    text-decoration: underline; }
    #totalResume p:first-child:hover {
      color: red;
      cursor: pointer; }

.displayNone {
  display: none; }

/********* Form *********/
.form {
  width: 92%;
  max-width: 300px;
  margin: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  border: solid 1px #dddddd;
  border-radius: 4px; }
  .form div {
    width: 90%;
    margin: auto;
    padding: 8px;
    display: flex;
    flex-direction: column; }
    .form div input,
    .form div textarea {
      width: 100%;
      background-color: white;
      border: solid 1px #dddddd;
      border-radius: 4px; }
  .form > input {
    width: 55%;
    margin: 12Px auto;
    width: 150px;
    padding: 10px;
    color: #1f1f1f;
    border: solid 1px #dddddd;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px; }
    .form > input:hover {
      color: white;
      background-color: #5b59ce;
      border: solid 1px #5b59ce; }

.displayValidation::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  color: green; }

.displayNoValidation::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  color: red; }

/******** Confirmation Page *******/
#validate {
  font-weight: lighter;
  font-size: 14px;
  border: solid 1px #dddddd;
  border-radius: 4px;
  width: 70%;
  margin: auto;
  padding: 16px; }

/********* footer *********/
.footer {
  background-color: #1f1f1f;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  margin-top: 30px; }
  @media screen and (max-width: 424px) {
    .footer {
      flex-direction: column; } }

.fab {
  color: white;
  font-size: 24px;
  margin: 0px 0px 0px 24px; }
  @media screen and (max-width: 424px) {
    .fab {
      margin: 10px; } }

/*# sourceMappingURL=style.css.map */