@charset "UTF-8";
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("polices/raleway-v17-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  src: local(""), url("polices/raleway-v17-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("polices/raleway-v17-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("polices/raleway-v17-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300;
  src: local(""), url("polices/rubik-v10-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("polices/rubik-v10-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 500;
  src: local(""), url("polices/rubik-v10-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("polices/rubik-v10-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: italic;
  font-weight: 300;
  src: local(""), url("polices/rubik-v10-latin-300italic.woff2") format("woff2");
}
@font-face {
  font-family: "Font Awesome 6 Solid";
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("polices/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: "Font Awesome 6 Regular";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("polices/fa-regular-400.woff2") format("woff2");
}
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("polices/fa-brands-400.woff2") format("woff2");
}
/*
 *   Bouton standard
 *   => $fontSize:          taille du libellé
 *   => $lineHeight:        line-height du libellé
 *   => $fontWeight:        graisse du libellé
 *   => $fontFamily:        police du libellé
 *   => $textTranform:      text-transform du libellé
 *   => $color:             couleur du libellé
 *   => $bgColor:           couleur de fond du bouton
 *   => $borderColor:       couleur du contour
 *   => $borderSize:        largeur du contour
 *   => $colorHover:        couleur du libellé au survol
 *   => $bgColorHover:      couleur de fond du bouton au survol
 *   => $borderColorHover:  couleur du contour au survol
 *   => $radius:            arrondi des angles
 *   => $paddingH:          padding haut/bas
 *   => $paddingV:          padding gauche/droite
 */
/*
 *   Alignement : Permet d'aligner en pourcentage un élément via absolute et tranform
 *   !! Attention !! Il faut que le bloc container soit en position relative ou absolute.
 *   => $x:  alignement sur l'axe x
 *   => $y:  alignement sur l'axe y
 */
/*
 *   Custom select :
 *   => $arrow:   nom du fichier image
 *   => $taille:  width du background en pixels permettant de calculer le padding-right
 */
/**
 * grid styles for container wich has a .grid(n,g) class
 * n = number of columns
 * g = gutter value
 * example : .grid-container { .grid(12, 10px);
 */
/*
 * Preserve unicode escape in default.css
 * Example with Fontawesome :
 * content: unicode('f060');
 */
html {
  font-size: 62.5%;
  box-sizing: border-box;
  height: 100%;
}

* {
  box-sizing: inherit;
}

body {
  font-size: 1.6rem;
  background-color: #fff;
  color: #444444;
  margin: 0;
  padding: 0;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  line-height: 2.7rem;
  height: 100%;
}

h1 {
  font-family: "Raleway", sans-serif;
  color: #000;
  font-size: 2.6rem;
  line-height: 3rem;
  margin: 3.6rem 0;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
h1::after {
  content: "";
  height: 0.5rem;
  width: 6rem;
  background-color: #fbba00;
  border-radius: 1rem;
  display: block;
  margin-top: 2rem;
}

h2 {
  font-family: "Raleway", sans-serif;
  color: #000;
  font-size: 2rem;
  line-height: 2.3rem;
  margin: 0 0 1rem;
  font-weight: 700;
}

h3 {
  font-family: "Raleway", sans-serif;
  color: #000;
  font-size: 1.8rem;
  line-height: 2rem;
  margin: 0 0 1rem;
  font-weight: 700;
}

img {
  max-width: 100%;
}
img.floatG {
  float: left;
  padding: 0 10px 10px 0;
}
img.floatD {
  float: right;
  padding: 0 0 10px 10px;
}
img.max50 {
  max-width: 48%;
  height: auto;
}

a {
  color: #444444;
  text-decoration: underline;
  font-weight: 700;
}
a:hover, a:focus, a:active {
  text-decoration: none;
}

p {
  margin: 0 0 3rem;
}

table {
  width: 100%;
  max-width: 100%;
}

#document {
  min-width: 320px;
  overflow: hidden;
}
@media screen and (min-width: 1170px) {
  #document {
    height: 100%;
  }
}

@media screen and (min-width: 1170px) {
  #page {
    position: fixed;
    top: 8.8rem;
    bottom: 0;
    left: 0;
    right: 0;
  }
  #page > .innerCenter {
    height: 100%;
  }
  #btnPanier {
    display: none;
  }
  #content {
    display: flex;
    height: 100%;
  }
  #contentMain {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  #contentMain.withPaddingTop {
    padding-top: 3.6rem;
  }
  .withAside #contentMain {
    padding-right: 5rem;
  }
  #contentAside {
    width: 30rem;
    flex-shrink: 0;
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }
}
@media screen and (max-width: 1169px) {
  #btnPanier {
    position: fixed;
    bottom: 5px;
    right: 5px;
  }
  #contentAside {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.alignleft {
  text-align: left !important;
}

.alignright {
  text-align: right !important;
}

.aligncenter {
  text-align: center !important;
}

.alert {
  color: red;
}

.nowrap {
  white-space: nowrap;
}

.innerCenter {
  max-width: 95%;
  margin: 0 auto;
}

.fond, .fondBlanc, .fondGris {
  padding-left: 200% !important;
  padding-right: 200% !important;
  margin-left: -200% !important;
  margin-right: -200% !important;
}

.fondGris {
  background-color: #e4e4e4;
}

.fondBlanc {
  background-color: #fff;
}

.btnJaune, .formulaire .submit,
.formulaire .btn-rechercher {
  font-size: 1.4rem;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  line-height: 1.8rem;
  text-transform: uppercase;
  color: #000 !important;
  background-color: #fbba00;
  border: 1px solid #fbba00;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none !important;
  transition: all 0.2s;
  cursor: pointer;
  letter-spacing: 1px;
}
.btnJaune:hover, .formulaire .submit:hover,
.formulaire .btn-rechercher:hover, .btnJaune:active, .formulaire .submit:active,
.formulaire .btn-rechercher:active, .btnJaune:focus, .formulaire .submit:focus,
.formulaire .btn-rechercher:focus {
  text-decoration: none;
  background-color: rgb(251.6, 196.35, 38.25);
  color: #000 !important;
  border-color: rgb(251.6, 196.35, 38.25);
}
.btnJaune:disabled, .formulaire .submit:disabled,
.formulaire .btn-rechercher:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btnBleu {
  font-size: 1.4rem;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  line-height: 1.8rem;
  text-transform: none;
  color: #fff !important;
  background-color: #0075ab;
  border: 1px solid #0075ab;
  padding: 1.5rem 1.5rem;
  border-radius: 0.5rem;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none !important;
  transition: all 0.2s;
  cursor: pointer;
  letter-spacing: 1px;
}
.btnBleu:hover, .btnBleu:active, .btnBleu:focus {
  text-decoration: none;
  background-color: rgb(38.25, 137.7, 183.6);
  color: #fff !important;
  border-color: rgb(38.25, 137.7, 183.6);
}
.btnBleu:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btnBleuMini {
  font-size: 1.4rem;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  line-height: 1.8rem;
  text-transform: uppercase;
  color: #fff !important;
  background-color: #0075ab;
  border: 2px solid #0075ab;
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none !important;
  transition: all 0.2s;
  cursor: pointer;
  letter-spacing: 1px;
}
.btnBleuMini:hover, .btnBleuMini:active, .btnBleuMini:focus {
  text-decoration: none;
  background-color: rgb(38.25, 137.7, 183.6);
  color: #fff !important;
  border-color: rgb(38.25, 137.7, 183.6);
}
.btnBleuMini:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btnBlancNoirMini, .ui-dialog.boutique .ui-button {
  font-size: 1.4rem;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  line-height: 1.8rem;
  text-transform: uppercase;
  color: #2b2b2b !important;
  background-color: #fff;
  border: 2px solid #0075ab;
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none !important;
  transition: all 0.2s;
  cursor: pointer;
  letter-spacing: 1px;
}
.btnBlancNoirMini:hover, .ui-dialog.boutique .ui-button:hover, .btnBlancNoirMini:active, .ui-dialog.boutique .ui-button:active, .btnBlancNoirMini:focus, .ui-dialog.boutique .ui-button:focus {
  text-decoration: none;
  background-color: #2b2b2b;
  color: #fff !important;
  border-color: #2b2b2b;
}
.btnBlancNoirMini:disabled, .ui-dialog.boutique .ui-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btnBlancBleuMini {
  font-size: 1.4rem;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  line-height: 1.8rem;
  text-transform: uppercase;
  color: #0075ab !important;
  background-color: #fff;
  border: 2px solid #0075ab;
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none !important;
  transition: all 0.2s;
  cursor: pointer;
  letter-spacing: 1px;
}
.btnBlancBleuMini:hover, .btnBlancBleuMini:active, .btnBlancBleuMini:focus {
  text-decoration: none;
  background-color: #0075ab;
  color: #fff !important;
  border-color: #0075ab;
}
.btnBlancBleuMini:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.picto::before {
  margin-right: 1rem;
}

.picto::before,
.onlyPicto::before {
  font-family: "Font Awesome 6 Solid", sans-serif;
  font-weight: 900;
  line-height: 1;
}
.picto.print::before,
.onlyPicto.print::before {
  content: "\f02f";
}
.picto.mail::before,
.onlyPicto.mail::before {
  content: "\40";
}
.picto.pdf::before,
.onlyPicto.pdf::before {
  content: "\f1c1";
}
.picto.cart::before,
.onlyPicto.cart::before {
  content: "\f07a";
}
.picto.facture::before,
.onlyPicto.facture::before {
  content: "\f570";
}
.picto.remise::before,
.onlyPicto.remise::before {
  content: "\f295";
}
.picto.supprimer::before,
.onlyPicto.supprimer::before {
  content: "\f1f8";
}
.picto.ajouter::before,
.onlyPicto.ajouter::before {
  content: "\f067";
}
.picto.retirer::before,
.onlyPicto.retirer::before {
  content: "\f068";
}
.picto.actualiser::before,
.onlyPicto.actualiser::before {
  content: "\f304";
}
.picto.fermer::before,
.onlyPicto.fermer::before {
  content: "\f00d";
}
.picto.retour::before,
.onlyPicto.retour::before {
  content: "\f359";
}

.msg {
  border: 1px solid #cccccc;
  padding: 2rem;
  margin: 0 0 5rem;
}

.strong {
  color: #0075ab;
}

.price {
  font-weight: 500;
}

#bandeauHaut {
  background-color: #fff;
  border-bottom: 2px solid #e4e4e4;
}
@media screen and (min-width: 1170px) {
  #bandeauHaut {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}
#bandeauHaut .nomSite {
  color: #000;
  font-size: 1.4rem;
  font-weight: 500;
  margin-left: 1rem;
}
@media screen and (max-width: 1169px) {
  #bandeauHaut .nomSite {
    display: none;
  }
}
#bandeauHaut .container {
  display: flex;
  align-items: center;
  line-height: 8.6rem;
}
#bandeauHaut .header-logo {
  margin-right: 3rem;
  display: flex;
  align-items: center;
}
#bandeauHaut .header-logo img {
  width: 6.7rem;
}
#bandeauHaut #header-actions {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  line-height: normal;
}
#bandeauHaut .user {
  font-family: "Raleway", sans-serif;
}
#bandeauHaut .search .formulaire {
  margin-bottom: 0;
  padding: 0.5rem;
  max-width: 210px;
}
#bandeauHaut .bonjour {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}
#bandeauHaut .bonjour span {
  color: #000;
  font-weight: 600;
}
@media screen and (max-width: 1169px) {
  #bandeauHaut .bonjour {
    display: none;
  }
}
#bandeauHaut .deconnexion {
  font-weight: 600;
  text-decoration: none;
  font-size: 1.4rem;
  display: block;
  text-align: right;
}
#bandeauHaut .deconnexion::after {
  font-family: "Font Awesome 6 Solid", sans-serif;
  font-weight: 900;
  line-height: 1;
  content: "\f061";
  color: #0075ab;
  display: inline-block;
  margin-left: 1rem;
}
#bandeauHaut .deconnexion:hover, #bandeauHaut .deconnexion:focus {
  text-decoration: underline;
}
@media screen and (max-width: 1169px) {
  #bandeauHaut .deconnexion span {
    display: none;
  }
}

.menu {
  flex-grow: 1;
  display: flex;
  justify-content: space-around;
}
.menu a {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
}
.menu a:hover, .menu a:focus, .menu a.selected {
  color: #0075ab;
}
.menu a::before {
  font-family: "Font Awesome 6 Solid", sans-serif;
  font-weight: 900;
  line-height: 1;
  font-size: 3rem;
  margin-right: 1rem;
  vertical-align: sub;
}
.menu a.orderList::before {
  content: "\f1da";
}
.menu a.orderNew::before {
  content: "\f055";
}
.menu a.orderCurrent::before {
  content: "\f291";
}
@media screen and (max-width: 1169px) {
  .menu a span {
    display: none;
  }
}

.ariane {
  list-style: none;
  display: flex;
  padding: 2rem 0;
  margin: 0 0 3.6rem;
  font-size: 1.8rem;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.ariane a {
  text-decoration: none;
  font-weight: 500;
}
.ariane a:hover, .ariane a:focus {
  text-decoration: underline;
}
.ariane li span {
  color: #0075ab;
  font-weight: 700;
  position: relative;
}
.ariane li span::after {
  content: "";
  height: 0.5rem;
  background-color: #0075ab;
  border-radius: 0.5rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2.2rem;
}
.ariane li:not(:first-child)::before {
  font-family: "Font Awesome 6 Solid", sans-serif;
  font-weight: 900;
  line-height: 1;
  content: "\f105";
  margin-right: 2rem;
}

.formulaire {
  margin-bottom: 2rem;
}
.formulaire.fondGris {
  padding-top: 3rem;
  padding-bottom: 1rem;
}
.formulaire fieldset {
  border: 0;
  margin-bottom: 2rem;
  padding: 0;
}
.formulaire fieldset p {
  margin: 0 0 2rem;
}
.formulaire legend {
  color: #000;
  font-weight: 500;
  font-size: 1.8rem;
  position: relative;
  padding: 0;
  margin-bottom: 2rem;
}
.formulaire legend::after {
  display: block;
  content: "";
  height: 0.5rem;
  background-color: #0075ab;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}
.formulaire label {
  font-family: "Raleway", sans-serif;
  font-size: 1.4rem;
  color: #000;
}
.formulaire label:not(.enLigne) {
  display: block;
}
.formulaire input[type=tel],
.formulaire input[type=url],
.formulaire input[type=date],
.formulaire input[type=file],
.formulaire input[type=text],
.formulaire input[type=email],
.formulaire input[type=number],
.formulaire input[type=search],
.formulaire input[type=password],
.formulaire textarea,
.formulaire select {
  font: inherit;
  height: 4rem;
  padding: 0.2rem 0.8rem;
  background-color: #fff;
  appearance: none;
  border: 1px solid #c4c4c4;
  box-sizing: border-box;
  vertical-align: middle;
  margin-bottom: 0.5rem;
}
.formulaire input[type=tel],
.formulaire input[type=url],
.formulaire input[type=file],
.formulaire input[type=text],
.formulaire input[type=email],
.formulaire input[type=search],
.formulaire input[type=password],
.formulaire textarea,
.formulaire select:not(.comparator) {
  width: 100%;
}
.formulaire input[type=number] {
  text-align: right;
  padding-right: 0;
}
.formulaire select {
  background-image: url("images/select_arrow.png");
  text-overflow: ellipsis;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 30px;
  box-sizing: border-box;
}
.formulaire select[size] {
  background-image: none;
  padding-right: 0;
  height: auto;
  vertical-align: top;
}
.formulaire select::-ms-expand {
  display: none;
}
.formulaire textarea {
  vertical-align: top;
  height: auto;
  line-height: normal;
}
.formulaire span.case {
  margin-right: 2rem;
}
.formulaire .suffixe-unite {
  position: relative;
}
.formulaire .suffixe-unite input {
  padding-right: 3rem;
}
.formulaire .suffixe-unite span {
  position: absolute;
  right: 1rem;
  top: -0.3rem;
  color: #444444;
}
.formulaire .js-password {
  margin-left: -25px;
  cursor: pointer;
  font-style: normal;
}
.formulaire .js-password::before {
  font-family: "Font Awesome 6 Solid", sans-serif;
  font-weight: 900;
  line-height: 1;
  content: "\f070";
}
.formulaire .js-password.show::before {
  content: "\f06e";
}

/* ===================================================================
 * LISTES
 * =================================================================*/
.grid3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -4rem;
}
.grid3 > * {
  flex: 0 0 auto;
  margin-left: 4rem;
  margin-bottom: 4rem;
}
@media (min-width: 1400px) {
  .grid3.produit > * {
    width: calc(100% / 3 - 4rem);
  }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .grid3.produit > * {
    width: calc(33.3333333333% - 4rem);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .grid3.produit > * {
    width: calc(50% - 4rem);
  }
}
@media (max-width: 767px) {
  .grid3.produit > * {
    width: calc(100% - 4rem);
  }
}
@media (min-width: 992px) {
  .grid3:not(.produit) > * {
    width: calc(100% / 3 - 4rem);
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .grid3:not(.produit) > * {
    width: calc(50% - 4rem);
  }
}
@media (max-width: 575px) {
  .grid3:not(.produit) > * {
    width: calc(100% - 4rem);
  }
}

.grid5 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -4rem;
}
.grid5 > * {
  flex: 0 0 auto;
  margin-left: 4rem;
  margin-bottom: 4rem;
}
@media (min-width: 1400px) {
  .grid5.produit > * {
    width: calc(100% / 5 - 4rem);
  }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .grid5.produit > * {
    width: calc(33.3333333333% - 4rem);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .grid5.produit > * {
    width: calc(50% - 4rem);
  }
}
@media (max-width: 767px) {
  .grid5.produit > * {
    width: calc(100% - 4rem);
  }
}
@media (min-width: 992px) {
  .grid5:not(.produit) > * {
    width: calc(100% / 5 - 4rem);
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .grid5:not(.produit) > * {
    width: calc(50% - 4rem);
  }
}
@media (max-width: 575px) {
  .grid5:not(.produit) > * {
    width: calc(100% - 4rem);
  }
}

.listCard .item {
  background-color: #fff;
  border-radius: 0.5rem;
  position: relative;
  transition: box-shadow 0.2s ease;
}
.listCard .item:hover, .listCard .item:focus {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
}
.listCard .header {
  background-color: #cccccc;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 2.5rem;
}
.listCard .content {
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 2.5rem;
}
.listCard a {
  text-decoration: none;
  color: #000;
}
.listCard a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.listCard .price {
  font-weight: 700;
}

.blocNavigation {
  display: flex;
  align-items: center;
  padding: 2rem 0;
}
@media screen and (max-width: 1169px) {
  .blocNavigation {
    flex-direction: column;
  }
}

.resultatNavigation {
  margin-right: 2rem;
}
.resultatNavigation p {
  margin: 0;
}

.regletteNavigation {
  text-align: center;
}
.regletteNavigation a,
.regletteNavigation strong {
  padding: 0.5rem;
  border-radius: 0.5rem;
  margin: 0.2rem;
  min-width: 3.5rem;
  display: inline-block;
  text-align: center;
}
.regletteNavigation a {
  background-color: #444444;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.regletteNavigation a:hover,
.regletteNavigation a:focus,
.regletteNavigation strong {
  background-color: #fbba00;
  color: #000;
}

.connexion body {
  background: #f5f5f5 no-repeat fixed 50% 50%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.connexion form {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 3%;
  margin: 8% 3rem;
}
.connexion form p {
  margin-bottom: 2rem;
}
.connexion form p input {
  margin-bottom: 0;
}
.connexion form p a {
  font-size: 1.4rem;
}
.connexion img {
  max-width: 15rem;
  margin-bottom: 1rem;
}

@media screen and (min-width: 1170px) {
  .contentScroll {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .order .contentScroll {
    flex-grow: 1;
    height: 20rem;
  }
}
.orderListe .contentScroll {
  margin-top: 3.6rem;
}

@media screen and (min-width: 1170px) {
  .orderListTab {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  .orderListTab .date {
    width: 18rem;
  }
  .orderListTab .reference {
    width: 20rem;
  }
  .orderListTab .somme {
    width: 15rem;
  }
  .orderListTab .actions {
    width: 30rem;
  }
}
@media screen and (max-width: 1169px) {
  .orderListTab .date,
  .orderListTab .reference {
    display: none;
  }
}
.orderListTab table {
  border-collapse: separate;
  border-spacing: 0;
}
.orderListTab table a {
  font-weight: 500;
}
.orderListTab table th,
.orderListTab table td {
  background-color: #fff;
}
@media screen and (max-width: 1169px) {
  .orderListTab table th,
  .orderListTab table td {
    padding: 1rem;
  }
}
@media screen and (min-width: 1170px) {
  .orderListTab table th,
  .orderListTab table td {
    padding: 2rem;
  }
}

@media screen and (max-width: 1169px) {
  .tabHead {
    display: none;
  }
}
.tabHead th {
  border-bottom: 2px solid #0075ab;
  font-weight: 500;
}

@media screen and (min-width: 1170px) {
  .tabBody {
    flex-grow: 1;
    overflow-y: auto;
    height: 20rem;
  }
}
.tabBody table {
  border-spacing: 0 10px;
}
.tabBody table td:first-child {
  border-radius: 0.5rem 0 0 0.5rem;
}
.tabBody table td:last-child {
  border-radius: 0 0.5rem 0.5rem 0;
}
.tabBody table .btnBleuMini {
  margin: 0.5rem;
}

.commandeVisuTable {
  width: auto;
}
.commandeVisuTable th {
  text-align: left;
  text-transform: uppercase;
  padding: 1rem 0;
}
.commandeVisuTable td {
  font-weight: 500;
  color: #2b2b2b;
  padding: 1rem 4rem;
}
.commandeVisuTable td a {
  color: #2b2b2b;
}

.containerSearch {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1169px) {
  .containerSearch {
    flex-direction: column;
  }
  .containerSearch tr {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}
@media screen and (min-width: 1170px) {
  .containerSearch .formulaire {
    margin: 0 0 0 5rem;
    flex-grow: 1;
  }
}

#categorie {
  display: flex;
  flex-direction: column;
  padding-bottom: 3.6rem;
  flex-grow: 1;
}

.categorie {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 0 -2rem;
}
.categorie li {
  flex: 0 0 auto;
  margin-left: 2rem;
  margin-bottom: 2rem;
}

.produit {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}
#categorie .categorie + .produit {
  border-top: 2px solid #cccccc;
  padding-top: 2rem;
}
.produit li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  text-align: center;
  position: relative;
  transition: box-shadow 0.2s ease;
}
.produit li:hover, .produit li:focus {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
}
.produit a {
  text-decoration: none;
  color: #2b2b2b;
  font-weight: 400;
  line-height: 2rem;
  display: block;
  margin-bottom: 1rem;
}
.produit a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.produit .price {
  font-weight: 700;
  color: #2b2b2b;
  font-size: 1.8rem;
}
.produit .visuel {
  margin: 2rem 0 0;
  padding-bottom: 1rem;
  border-bottom: 3px solid #f4f4f4;
}
.produit .itemInfo {
  height: 100%;
  padding: 1rem;
}

#panier {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background-color: #fff;
}
#panier h2 {
  text-align: center;
  margin: 0;
  padding: 1rem;
}
@media screen and (min-width: 1170px) {
  #panier h2 {
    display: none;
  }
}
#panier h3 {
  text-align: center;
  margin: 0;
  padding: 1rem;
}

.containerTablePanier {
  overflow-y: auto;
  border: 3px solid #e4e4e4;
  flex-grow: 1;
}

.tablePanier {
  font-size: 1.4rem;
  border-collapse: collapse;
}
.tablePanier.modifiable tr {
  cursor: pointer;
}
.tablePanier.modifiable tr:hover, .tablePanier.modifiable tr:focus {
  background-color: #e4e4e4;
}
.tablePanier.modifiable tr.selected {
  background-color: #fbba00;
}
.tablePanier td {
  padding: 1rem;
}
.tablePanier .number {
  font-weight: 700;
}
.tablePanier .libelle {
  line-height: 1.8rem;
}
.tablePanier .number,
.tablePanier .libelle {
  color: #2b2b2b;
  font-family: "Raleway", sans-serif;
}
.tablePanier .price {
  color: #000;
}

.detailAction {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
  border: 3px solid #e4e4e4;
  border-top-width: 1px;
}
.detailAction button {
  margin: 0 0.3rem;
  width: 4.3rem;
  height: 3.8rem;
}

.totalAction {
  border: 3px solid #e4e4e4;
  border-top-width: 7px;
  padding: 2rem;
}
@media screen and (min-width: 1170px) {
  .totalAction #btnPanierFermer {
    display: none;
  }
}

.total {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
}

.totalArticle {
  font-family: "Raleway", sans-serif;
}
.totalArticle .strong {
  margin-right: 1rem;
}

.paiement {
  display: flex;
  flex-wrap: wrap;
}
.paiement:not(.center) {
  justify-content: space-between;
}
.paiement.center {
  justify-content: center;
}
.paiement.center button,
.paiement.center a {
  margin: 0.5rem;
}

.listModePaiement {
  display: flex;
  justify-content: space-around;
  margin-bottom: 4rem;
}
.listModePaiement label {
  text-align: center;
}
.listModePaiement label:hover, .listModePaiement label:focus {
  cursor: pointer;
}
.listModePaiement label .visuel {
  padding: 3rem 1rem;
  border: 2px solid #e4e4e4;
  border-radius: 0.5rem;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 9.3rem;
  height: 9.3rem;
  margin: 0 auto 1rem;
}
.listModePaiement label .visuel::before {
  content: "";
  display: inline-block;
  background-color: #444444;
  transition: background-color 0.2s ease;
}
.listModePaiement label.typeT .visuel::before {
  width: 5rem;
  height: 5rem;
  mask-image: url("images/rgm_T.svg");
}
.listModePaiement label.typeC .visuel::before {
  width: 5rem;
  height: 2.8rem;
  mask-image: url("images/rgm_C.svg");
}
.listModePaiement label.typeE .visuel::before {
  width: 5rem;
  height: 5rem;
  mask-image: url("images/rgm_E.svg");
}
.listModePaiement label.typeP .visuel::before {
  width: 5rem;
  height: 5rem;
  mask-image: url("images/rgm_P.svg");
}
.listModePaiement label.typeV .visuel::before {
  width: 5rem;
  height: 5rem;
  mask-image: url("images/rgm_V.svg");
}
.listModePaiement [type=radio]:not(:checked),
.listModePaiement [type=radio]:checked {
  position: absolute;
  opacity: 0;
}
.listModePaiement [type=radio] + label .visuel {
  transition: background-color 0.2s ease;
}
.listModePaiement [type=radio]:checked + label .visuel {
  background-color: #fbba00;
  border-color: #fbba00;
}
.listModePaiement [type=radio]:checked + label .visuel::before {
  background-color: #000;
}

/**
 * Commande Visu
 */
.containerCommandeVisu {
  padding: 0 10%;
  margin-bottom: 2rem;
}

.ui-widget.ui-widget-content.boutique {
  border: 0;
}

.ui-dialog.boutique {
  border-radius: 0.5rem;
}
.ui-dialog.boutique .ui-dialog-titlebar {
  text-align: center;
  font-weight: 700;
  color: #000;
  background: none;
  border: 0;
  border-radius: 0;
  margin-bottom: 3rem;
  padding: 0;
  font-family: "Rubik", sans-serif;
}
.ui-dialog.boutique .ui-dialog-title {
  float: none;
  white-space: normal;
}
.ui-dialog.boutique .ui-dialog-titlebar-close {
  display: none;
}
.ui-dialog.boutique .ui-widget-overlay {
  background-color: rgba(0, 0, 0, 0.75);
}
@media screen and (max-width: 1169px) {
  .ui-dialog.boutique {
    padding: 2rem 1rem 1rem;
  }
  .ui-dialog.boutique p {
    margin-bottom: 1rem;
  }
  .ui-dialog.boutique .ui-dialog-content {
    padding: 0 2px;
  }
}
@media screen and (min-width: 1170px) {
  .ui-dialog.boutique {
    padding: 4rem 3rem 2rem;
  }
  .ui-dialog.boutique p {
    margin-bottom: 2rem;
  }
  .ui-dialog.boutique .ui-dialog-content {
    padding: 0 24%;
  }
}
.ui-dialog.boutique .ui-dialog-buttonpane {
  border: 0;
  padding: 0;
  margin: 0;
}
.ui-dialog.boutique .ui-button {
  background: none;
  text-transform: none;
}