/* MAIN */

main {
  margin: 0 20%;
}

/* COMMANDE */

.commande {
  margin-top: 75px;
  margin-bottom: 75px;
}

.commande h1 {
  font-weight: 700;
  font-size: 39px;
  line-height: 42px;
  color: #1f1f23;
}

.commande_box {
  width: 100%;
  display: flex;
  gap: 34px;
  margin-top: 35px;
  justify-content: center;
  border-radius: 10px;
}
.commande_box--fullWidth .commande_box_formulaire {
  background: #f9f9f9;
  max-width: 100%;
  padding: 45px 55px 55px;
}
/* PARTIE FORMULAIRE */

.formulaire_errordiv {
  background-color: #ffe8e8;
  border: 1px solid #ff3b3b;
  color: #ff3b3b;
  border-radius: 10px;
  padding: 10px;
  margin-top: 15px;
}

.commande_box_formulaire {
  width: 100%;
  max-width: 684px;
  /*max-height: 1068px;*/
}
.commande_box_formulaire--login {
  padding: 45px 55px 45px;
}
.commande_box_formulaire_form form {
  display: flex;
  flex-direction: column;
  gap: 57px;
}

.commande_box_formulaire_form_infosLivraison {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.commande_box_formulaire_form_infosLivraison--login {
  gap: 20px;
}

.commande h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 150%;
  color: var(--color-main);
}

.commande_box_formulaire_form_infosLivraison h3 {
  margin-bottom: 16px !important;
}

.input-grp {
  width: 100%;
  display: flex;
  gap: 12px;
}
.input-grp--fieldAndSubmit {
  flex-wrap: wrap;
  gap: 50px;
}
.input-grp--fieldAndSubmit .form-floating {
  flex: 100%;
  display: flex;
  justify-content: center;
}
.input-grp--double .form-floating {
  width: 100%;
}
.input-grp--visa .form-floating {
  width: 120px;
}

.input-grp--double .form-floating #zip {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
}

.commande input:not([type="submit"]) {
  width: 100%;
  font-family: "Poppins";
  font-size: 14px !important;
  line-height: 150%;
  letter-spacing: -0.2px;
  color: #737373;
  padding: 0px 11px;
  height: 46px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  outline: none;
}
.commande label {
  font-family: "Poppins";
  font-size: 14px !important;
  color: #aaaaaa;
  width: 100%;
}

.commande input[type="radio"] {
  height: initial;
  width: initial;
}

.commande select {
  width: 100%;
  height: 46px;
  padding: 0 11px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.2px;
  color: #737373;
  outline: none;
}

.commande_box_formulaire_form_paiement p {
  font-size: 12px;
  line-height: 150%;
  letter-spacing: -0.2px;
  color: #1f1f23;
}

.commande_box_formulaire_form_paiement_box {
  margin-top: 30px;
  margin-bottom: 37px;
  padding: 0px;
  width: 100%;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
}

.commande_box_formulaire_form_paiement_box_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px;
  border-bottom: 1px solid #d9d9d9;
}

.radio-grp {
  display: flex;
  gap: 14px;
}

.radio-grp p {
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.2px;
  color: #333333;
  cursor: pointer;
}

.radio-grp img {
  cursor: pointer;
}

.commande_box_formulaire_form_paiement_box_body {
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid #d9d9d9;
}

.span-inputImg {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.span-inputImg svg {
  position: absolute;
  right: 30px;
}

.span-inputImg svg path {
  fill: var(--color-main);
}

.commande_box_formulaire_form_paiement_box_footer {
  padding: 17px;
}
.commande_box_formulaire_form_btn {
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  background: var(--color-main);
  border-radius: var(--radius-button);
  border: none;
  gap: 5px;
  float: right;
}

a.commande_box_formulaire_form_btn {
  text-decoration: none;
}

.commande_box_formulaire_form_btn span {
  font-weight: 400;
}

.commande_box_formulaire_form_btn:hover {
  background-color: transparent;
  color: var(--color-main);
  border: 1px solid var(--color-main);
}

/* PARTIE ACHAT */

.commande_box_panierAvis {
  display: flex;
  flex-direction: column;
  gap: 27px;
  position: relative;
}

.divider-bar {
  width: 100%;
  height: 1px;
  background: #d9d9d9;
}

.commande_box_infosAchat {
  padding: 25px;
  width: 441px;
  /*    max-height: 518px;*/
  background: #f9f9f9;
  border-radius: 10px;
  position: sticky;
  top: 20px;
}

.commande_box_infosAchat h3 {
  font-weight: 700;
  font-size: 20px;
  line-height: 150%;
  color: var(--color-main);
}

.commande_box_infosAchat_articles_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 35px;
  margin-bottom: 20px;
}

.commande_box_infosAchat_articles_box_article {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.commande_box_infosAchat_articles_box_article_infos {
  display: flex;
  align-items: center;
  gap: 14px;
}

.commande_box_infosAchat_articles_box_article_infos_img {
  position: relative;
}

.commande_box_infosAchat_articles_box_article_infos_img img {
  width: 64px;
  height: 64px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
}

.commande_box_infosAchat_articles_box_article_infos_number {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 21px;
  height: 21px;
  right: -5.5px;
  top: -9.5px;
  background: var(--color-main);
  border-radius: 12px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.2px;
  color: #ffffff;
}

.commande_box_infosAchat_articles_box_article_infos_name-number {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.commande_box_infosAchat_articles_box_article_infos_name-number_name {
  font-weight: 700;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.2px;
  color: #1f1f23;
}

.commande_box_infosAchat_articles_box_article_infos_name-number_number {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 10px;
  gap: 11px;
  width: 76.22px;
  border: 1px solid #dedede;
  border-radius: 44px;
}

.commande_box_infosAchat_articles_box_article_price {
  display: flex;
  align-items: center;
  gap: 19px;
}

.commande_box_infosAchat_articles_box_article_price p {
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.2px;
  color: var(--color-main);
}

.commande_box_infosAchat_total {
  margin-top: 20px;
}

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

.commande_box_infosAchat_total_group p {
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -0.2px;
}
.commande_box_infosAchat_total_group p:first-child {
  color: #1f1f23;
  flex: 30%;
}
.commande_box_infosAchat_total_group p:first-child span {
  color: #969696;
}
.commande_box_infosAchat_total_group p:last-child {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-main);
}

.commande_box_infosAchat_total_wrap {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 20px;
}

.commande_box_infosAchat_total_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.commande_box_infosAchat_total_footer p:first-child {
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.2px;
  color: #1f1f23;
}
.commande_box_infosAchat_total_footer p:last-child {
  font-weight: 700;
  font-size: 24px;
  line-height: 150%;
  letter-spacing: -0.2px;
  color: var(--color-main);
}

.commande_box_infosAchat_codePromo {
  display: flex;
  gap: 14px;
  margin: 20px 0;
}

.commande_box_infosAchat_codePromo_btn {
  font-size: 14px;
  line-height: 15px;
  letter-spacing: -0.2px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 17px;
  width: 100px;
  height: 46px;
  background: var(--color-main);
  border-radius: 5px;
  border: none;
}

.commande_box_infosAchat_codePromo_btn:hover {
  background-color: transparent;
  color: var(--color-main);
  border: 1px solid var(--color-main);
}

.commande_box_panierAvis_avisClients_cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.commande_box_panierAvis_avisClients_cards_card {
  display: flex;
  flex-direction: column;
  padding: 25px;
  gap: 8.04px;
  width: 100%;
  max-width: 441px;
  min-height: 209px;
  background: #ffffff;
  border: 1.33686px solid #e7eaec;
  border-radius: 10px;
}

.commande_box_panierAvis_avisClients_cards_card_head {
  display: flex;
  flex-direction: column;
  gap: 8.04px;
}

.commande_box_panierAvis_avisClients_cards_card_head h4 {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0.02em;
  color: #1f1f23;
}

.commande_box_panierAvis_avisClients_cards_card_head p {
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.02em;
  color: #1f1f23;
}

.commande_box_panierAvis_avisClients_cards_card_head p span {
  color: var(--color-main);
  text-decoration: underline;
}

.commande_box_panierAvis_avisClients_cards_card_client {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.commande_box_panierAvis_avisClients_cards_card_client_name-rating {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.commande_box_panierAvis_avisClients_cards_card_client_name-rating p {
  font-weight: 700;
  font-size: 14px;
  line-height: 23px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #868686;
}

/* .rating {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 15px 0;
} */

.rating-stars {
  display: flex;
  gap: 1.21px;
}

.rating-stars svg {
  width: 19.43px;
  height: 19.43px;
}

.rating-stars svg path {
  fill: #d9d9d9;
}

.rating-stars svg.active path {
  fill: var(--color-main);
}

.dots-slider {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 11px;
}

.dots-slider span {
  display: block;
  border-radius: 50%;
  width: 10.69px;
  height: 10.69px;
  background: rgba(50, 48, 46, 0.3);
}

.dots-slider span.active {
  background: var(--color-main);
}

/* SAV INFOS */

.savInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 70px;
  height: 163px;
  margin: 40px 0;
  background: #f9f9f9;
  border-radius: 15px;
}

.savInfo_Box {
  display: flex;
  align-items: center;
  gap: 25px;
}

.savInfo_Box_icon svg path {
  fill: #fff;
}
.savInfo_Box_icon svg circle {
  stroke: var(--color-main);
}

.savInfo_Box p {
  width: 180px;
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-main);
}

/* MOBILE */

@media (min-width: 225px) and (max-width: 767px) {
  main {
    margin: 0 5%;
  }

  .commande {
    width: 100%;
    margin-top: 0;
  }

  .commande h1 {
    font-size: 30px;
  }

  .commande_box {
    flex-direction: column-reverse;
    margin-top: 20px;
  }

  .commande_box input {
    font-size: 12px !important;
  }
  .commande_box select {
    font-size: 12px !important;
  }

  .commande_box_formulaire {
    padding: 25px 20px;
  }

  .commande_box_formulaire_form form {
    gap: 25px;
  }

  .radio-grp_cards-icons {
    display: flex;
    gap: 3px;
  }
  

  .commande_box_panierAvis {
    width: 100%;
  }

  .commande_box_infosAchat {
    width: 100%;
    padding: 25px 20px;
  }

  .commande_box_panierAvis_avisClients_cards {
    width: 100%;
    display: -webkit-inline-box;
    overflow-x: overlay;
  }
  .commande_box_panierAvis_avisClients_cards::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }

  .commande_box--fullWidth .commande_box_formulaire {
    padding: 25px 20px;
  }

  .savInfo {
    height: auto;
    flex-direction: column;
    align-items: inherit;
    gap: 20px;
    padding: 5%;
    margin: 25px 0;
  }

  .savInfo_Box {
    gap: 10px;
  }

  .savInfo_Box_icon svg {
    width: 70px;
    height: 70px;
  }

  .savInfo_Box p {
    font-size: 12px;
    width: 170px;
  }
}

/* TABLET */

@media (min-width: 768px) and (max-width: 1023px) {
  main {
    margin: 0 5%;
  }

  .commande {
    width: 100%;
  }

  .commande_box {
    flex-direction: column;
  }

  .commande_box_formulaire {
    max-width: initial;
  }

  .commande_box_panierAvis {
    width: 100%;
  }

  .commande_box_infosAchat {
    width: 100%;
  }

  .commande_box_panierAvis_avisClients {
    width: 100%;
  }

  .commande_box_panierAvis_avisClients_cards_card {
    width: 100%;
    max-width: 100%;
  }

  .savInfo {
    height: auto;
    flex-direction: column;
    align-items: inherit;
    gap: 20px;
    padding: 5%;
  }

  .savInfo_Box {
    gap: 10px;
  }

  .savInfo_Box_icon svg {
    width: 70px;
    height: 70px;
  }

  .savInfo_Box p {
    font-size: 12px;
    width: 170px;
  }
}

/* LAPTOP */

@media (min-width: 1024px) and (max-width: 1350px) {
  main {
    margin: 0 7.5%;
  }

  .commande {
    width: 100%;
  }

  .commande_box {
    gap: 20px;
  }

  .commande_box_formulaire {
    width: 60%;
  }
  .commande_box--login .commande_box_formulaire {
    width: 100%;
  }

  .commande_box_panierAvis {
    width: 40%;
  }

  .commande_box_infosAchat {
    max-width: 441px;
    width: 100%;
  }

  .savInfo {
    gap: 20px;
  }

  .savInfo_Box {
    gap: 10px;
  }

  .savInfo_Box_icon svg {
    width: 70px;
    height: 70px;
  }

  .savInfo_Box p {
    font-size: 12px;
    width: 170px;
  }
}

/* LAPTOP LARGE */

@media (min-width: 1351px) {
  main {
    margin: 0 10%;
  }
}

/* 4K DEVICE */

@media (min-width: 1900px) {
  main {
    margin: 0 20%;
  }
}
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-bottom: 2px !important;
}
@media (max-width: 576px) {
  .commande_box_formulaire_form_paiement #launch_payment {
    width: 100%;
  }
  .commande_box_formulaire_form_btn {
    width: 100%;
  }
}