/*
--------------------------------------
Style global
--------------------------------------
*/

html,
body {
  height : 100%;
}

@-ms-viewport {
  width : device-width;
}

html {
  box-sizing                  : border-box;
  font-size                   : 16px;
  -ms-overflow-style          : scrollbar;
  -webkit-tap-highlight-color : transparent;
  font-family                 : sans-serif;
  -ms-text-size-adjust        : 100%;
  scroll-behavior             : smooth;
}

body {
  font-family             : var(--main-font);
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  line-height             : 1.25em;
  font-size               : 16px;
}

[tabindex="-1"]:focus {
  outline : none !important
}

p {
  margin-top    : 0;
  margin-bottom : 1rem;
  font-size     : .9375rem;
  color         : #000;
  font-weight   : 400;
}

abbr[data-original-title], abbr[title] {
  cursor        : help;
  border-bottom : 1px dotted #f1f1f1
}

address {
  font-style  : normal;
  line-height : inherit
}

address, dl, ol, ul {
  margin-bottom : 1rem
}

dl, ol, ul {
  margin-top : 0
}

ol ol, ol ul, ul ol, ul ul {
  margin-bottom : 0
}

ul {
  list-style : none;
  padding    : 0;
  margin     : 0;
}

dt {
  font-weight : 700
}

dd {
  margin-bottom : .5rem;
  margin-left   : 0
}

blockquote {
  margin : 0 0 1rem
}

a {
  color           : #2fb5d2;
  text-decoration : none;
  transition      : all 0.3s ease;
}

a:hover {
  color           : var(--link-color-on-hover);
  text-decoration : none;
}

a:focus {
  color           : #208094;
  text-decoration : underline;
  outline         : 5px auto -webkit-focus-ring-color;
  outline-offset  : -2px
}

a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color           : inherit;
  text-decoration : none
}

a:not([href]):not([tabindex]):focus {
  outline : none
}

.text-muted {
  color : #000 !important;
}

.btn-primary:disabled:hover {
  background-color : var(--second-red-color);
  color            : white;
}

figure {
  margin : 0 0 1rem
}

img {
  vertical-align : middle;
  max-width      : 100%;
  object-fit     : contain;
}

[role=button] {
  cursor : pointer
}

[role=button], a, area, button, input, label, select, summary, textarea {
  -ms-touch-action : manipulation;
  touch-action     : manipulation
}

table {
  border-collapse  : collapse;
  background-color : transparent
}

caption {
  padding-top    : .75rem;
  padding-bottom : .75rem;
  color          : #7a7a7a;
  caption-side   : bottom
}

caption, th {
  text-align : left
}

label {
  display       : inline-block;
  margin-bottom : .5rem
}

button:focus {
  outline : 1px dotted;
  outline : 5px auto -webkit-focus-ring-color
}

button, input, select, textarea {
  line-height : inherit
}

.btn.disabled, .btn.disabled:hover {
  background : var(--second-red-color);
}

input[type=checkbox]:disabled, input[type=radio]:disabled {
  cursor : not-allowed
}

input[type=date], input[type=datetime-local], input[type=month], input[type=time] {
  -webkit-appearance : listbox
}

textarea {
  resize : vertical
}

fieldset {
  min-width : 0;
  padding   : 0;
  margin    : 0;
  border    : 0
}

legend {
  display       : block;
  width         : 100%;
  padding       : 0;
  margin-bottom : .5rem;
  font-size     : 1.5rem;
  line-height   : inherit
}

input[type=search] {
  -webkit-appearance : none
}

output {
  display : inline-block
}

[hidden] {
  display : none !important
}

.clearfix:after {
  content : "";
  display : table;
  clear   : both
}

.sr-only {
  position : absolute;
  width    : 1px;
  height   : 1px;
  padding  : 0;
  margin   : -1px;
  overflow : hidden;
  clip     : rect(0, 0, 0, 0);
  border   : 0
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position : static;
  width    : auto;
  height   : auto;
  margin   : 0;
  overflow : visible;
  clip     : auto
}

.color, .custom-checkbox input[type=checkbox] + span.color {
  width           : 1.25rem;
  height          : 1.25rem;
  display         : inline-block;
  margin          : .3125rem;
  box-shadow      : 2px 2px 4px 0 rgba(0, 0, 0, .2);
  border          : 1px solid rgba(0, 0, 0, .05);
  cursor          : pointer;
  background-size : contain
}

.color.active, .color:hover, .custom-checkbox input[type=checkbox] + span.color.active, .custom-checkbox input[type=checkbox] + span.color:hover, .facet-label.active .custom-checkbox span.color, .facet-label:hover .custom-checkbox span.color {
  border : 2px solid #232323
}

.h1, .h2, .h3 {
  text-transform : uppercase;
  color          : #232323
}

.h1 {
  font-family : var(--third-font);
  font-size   : calc(16px + (22 - 16) * ((100vw - 320px) / (1920 - 320)));
  color       : #892512;
}

.h4 {
  font-weight : 700;
  color       : #232323
}

.label, label {
  color      : #232323;
  text-align : right;
  font-size  : .875rem
}

small.label, small.value {
  font-size : .8125rem
}

section#wrapper {
  background : white;
}

/*
--------------------------------------
Style général des slider slick
--------------------------------------
*/

.slick-slider {
  display : none !important;
}

.slick-slider.slick-initialized {
  display : flex !important;
}

.slick-slider .slick-arrow {
  cursor   : pointer;
  position : absolute;

  fill     : transparent;
  stroke   : #d3d3d3;
}

.slick-slider .slick-arrow.slick-prev {
  left : 0;
}

.slick-slider .slick-arrow.slick-next {
  right : 0;
}

.slick-slider .slick-list {
  min-width : 100%;
}

.slick-slider .slick-track {
  display : flex;
}

.slick-slider.slick-vertical .slick-track {
  display : block;
}

.slick-slider .slick-track .slick-slide {
  height : auto;
}

.slick-slider .slick-slide > div,
.slick-slide > div .product-miniature {
  height : 100%;
}

/*
--------------------------------------
Style général des buttons
--------------------------------------
*/
.btn-primary, .btn-secondary, .btn-tertiary {
  box-shadow  : 2px 2px 4px 0 rgba(0, 0, 0, .2);
  /*text-transform : uppercase;*/
  font-weight : 600;
  padding     : .5rem 1.25rem
}

.btn-primary .material-icons, .btn-secondary .material-icons, .btn-tertiary .material-icons {
  margin-right : .625rem
}

.btn-primary {
  background    : #892512;
  color         : var(--btn-primary-color);
  border        : 1px solid #892512;
  border-radius : 6px;
  transition    : all 0.3s;
}

.btn-primary:focus,
.btn-primary:hover {
  background : var(--btn-primary-bg-color--is-hover);
  color      : #892512;
}

.btn-tertiary {
  background-color : #f7f7f7;
  text-transform   : lowercase;
  color            : #7a7a7a;
  box-shadow       : .0625rem .0625rem .0625rem 0 rgba(0, 0, 0, .1);
  padding          : .25rem;
  margin           : .25rem 0;
  font-weight      : 400;
  font-size        : .875rem;
}

.btn-tertiary .material-icons {
  font-size : 1rem;
}

.btn-tertiary:hover {
  box-shadow : .0625rem .0625rem .0625rem 0 rgba(0, 0, 0, .2);
  border     : 1px solid rgba(35, 35, 35, .2);
}

.btn-continue {
  background    : #000;
  color         : var(--btn-primary-color);
  font-weight   : 600;
  border        : 1px solid #000;
  border-radius : 6px;
  transition    : all 0.3s;
}

.btn-continue:hover {
  background : var(--btn-primary-color);
  color      : #000;
}

.btn-unstyle {
  background-color : transparent;
  border           : none;
  padding          : 0;
  text-align       : inherit;
}

.btn-unstyle:focus {
  outline : 0;
}

.btn-unstyle:focus .expand-more {
  color : #2fb5d2;
}

/*
--------------------------------------
Style général carousel
--------------------------------------
*/
.carousel .direction {
  z-index : auto
}

.carousel .carousel-item {
  height : 100%
}

@media (min-width : 768px) {
  .carousel .carousel-item img {
    width : 100%;
  }
}

.carousel .carousel-item .caption {
  position  : absolute;
  color     : #fff;
  max-width : 340px
}

@media (min-width : 768px) {
  .carousel .carousel-item .caption {
    bottom : 28px;
    left   : 90px
  }
}

@media (max-width : 767px) {
  .carousel .carousel-item .caption {
    bottom : 5px;
    left   : 40px
  }
}

.carousel .carousel-item .caption .caption-description p {
  color : #fff
}

@media (max-width : 767px) {
  .carousel .carousel-item figure {
    margin : 0
  }
}

.carousel .carousel-control {
  opacity : 1
}

.carousel .carousel-control .icon-next:before, .carousel .carousel-control .icon-prev:before {
  content : ""
}

.carousel .carousel-control .icon-next i, .carousel .carousel-control .icon-prev i {
  font-size : 3.125rem;
  color     : #fff
}

.carousel .carousel-control .icon-next:hover i, .carousel .carousel-control .icon-prev:hover i {
  color : #2fb5d2
}

.carousel .carousel-control .icon-prev {
  left : 1rem
}

.carousel .carousel-control .icon-next {
  right : 2rem
}

.carousel .carousel-control.left, .carousel .carousel-control.right {
  background : none
}

/*
--------------------------------------
Style général des listes produits
--------------------------------------
*/
.products {
  display         : flex;
  flex-wrap       : wrap;
  justify-content : flex-start;
}

/*
--------------------------------------
Style général du breadcrumb
--------------------------------------
*/
.breadcrumb__wrapper {
  margin : 0;
}

.breadcrumb {
  border-radius : 0;
  padding       : 1rem 0;
  background    : transparent;
}

.breadcrumb[data-depth="1"] {
  display : none;
}

.breadcrumb ol {
  padding-left  : 0;
  margin-bottom : 0;
}

.breadcrumb li {
  display : inline;
}

.breadcrumb li:not(:last-child):after {
  content : "/";
  color   : #7a7a7a;
  margin  : .3125rem;
}

.breadcrumb li a {
  color           : #232323;
  text-decoration : none;
  transition      : all 0.3s;
}

.breadcrumb li a:hover {
  color : var(--link-color-on-hover);
}

/*
--------------------------------------
Style général des headers de pages
--------------------------------------
*/

.page-header h1,
.page-header h2 {
  margin         : 0;
  padding        : 1em 1.5em;
  text-align     : center;
  color          : var(--main-red-color);
  border-bottom  : 1px solid var(--main-red-color);
  background     : white;
  text-transform : uppercase;
  font-weight    : 600;
}

.page-header h1 {
  font-size : calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320)));
}

/*
--------------------------------------
Style général des forms
--------------------------------------
*/
.form-group {
  margin         : 0 0 1rem;
  display        : flex;
  flex-direction : column;
}

.form-group .form-control-label,
.form-group .form-control-label ~ * {
  text-align : left;
}

.form-group .form-control {
  width : 100%;
}

.form-control {
  font-size  : calc(13px + (13.5 - 13) * ((100vw - 320px) / (1920 - 320)));
  background : #FFF;
}

.form-control-select {
  background : #FFF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=") no-repeat scroll right .5rem center/1.25rem 1.25rem;
}

span.form-control-comment {
  display : none;
}

.form-control:focus {
  border-color : var(--main-red-color);
}

/*
--------------------------------------
Style général des accordéons
--------------------------------------
*/
.js-accordions__wrapper .accordion {
  border     : 1px solid #eee;
  box-shadow : 2px 2px 11px 0 rgba(0, 0, 0, 0.1);
}

.js-accordions__wrapper .accordion + .accordion {
  margin-top : 15px;
}

.js-accordions__wrapper .accordion .accordion__title {
  background      : white;
  color           : var(--primary-color);
  padding         : 15px;
  font-weight     : 700;
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  cursor          : pointer;
}

.js-accordions__wrapper .accordion .accordion__content {
  pointer-events : none;
  height         : 0;
  overflow       : hidden;
  transition     : all 0.3s ease-out;
}

.js-accordions__wrapper .accordion.is--active .accordion__content {
  pointer-events : all;
}

.js-accordions__wrapper .accordion .accordion__content .accordion__content__inner {
  padding : 20px;
}

/*
--------------------------------------
INPUT
--------------------------------------
*/

.input-group .input-group-btn > .btn[data-action=show-password] {
  background    : var(--main-red-color);
  padding       : .78rem 1rem;
  border-radius : 0 10px 10px 0;
}

input.form-control.js-child-focus.js-visible-password {
  border-right : none;
}

.form-group.row label {
  font-weight : 600;
}

/*
--------------------------------------
CUSTOM RADIO BTN
--------------------------------------
*/

.custom-radio input[type=radio]:checked + span {
  background-color : var(--main-red-color);
}

label.radio-inline {
  font-size   : calc(12px + (13 - 12) * ((100vw - 320px) / (1920 - 320)));
  font-weight : 400 !important;
}

label.radio-inline:first-of-type {
  margin-right : 1em;
}

label.required:after {
  content   : "*";
  color     : red;
  font-size : 20px;
}

/*
--------------------------------------
Style général des loaders
--------------------------------------
*/
.bwa__loader__wrapper {
  position        : relative;
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.bwa__loader__overlay {
  opacity        : 0;
  pointer-events : none;

  position       : absolute;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  width          : 100%;
  height         : 100%;
  background     : rgba(255, 255, 255, 0.5);
}

.bwa__loader__overlay.is--active {
  opacity        : 1;
  pointer-events : all;
}

.bwa__loader {
  opacity         : 0;
  pointer-events  : none;
  align-self      : center;
  justify-self    : center;
  position        : absolute;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : 64px;
  width           : 1em;
  height          : 1em;
}

.bwa__loader.is--active {
  opacity : 1;
}

.bwa__loader:after {
  content       : " ";
  display       : block;
  width         : 0.71875em;
  height        : 0.71875em;
  margin        : 1px;
  border-radius : 50%;
  border        : 5px solid var(--secondary-color);
  border-color  : var(--secondary-color) transparent var(--secondary-color) transparent;
  animation     : add-to-cart__loader--animation 1.2s linear infinite;
}

@keyframes add-to-cart__loader--animation {
  0% {
    transform : rotate(0deg);
  }
  100% {
    transform : rotate(360deg);
  }
}

/*
--------------------------------------
Style général des notifications
--------------------------------------
*/
#notifications li {
  text-align : center;
}

/*
--------------------------------------
fix taille mini d'une page à 100vh hors du checkout
--------------------------------------
*/

body:not(#checkout) main {
  min-height     : 100vh;
  display        : flex;
  flex-direction : column;
}

body:not(#checkout) #wrapper {
  flex           : 1 0 auto;
  display        : flex;
  flex-direction : column;
}

body:not(#checkout) #wrapper .wrapper__inner {
  flex : 1 0 auto;
}

/*
--------------------------------------
fix modal
--------------------------------------
*/
.modal-backdrop {
  display : none;
}

.modal {
  background : transparent;
  opacity    : 0;
  transition : all .3s;
}

.modal.in {
  opacity     : 1;
  background  : rgba(0, 0, 0, 0.75);
  display     : flex !important;
  align-items : center;
}

.modal-dialog {
  max-width : 1000px;
}

aside#thumbnails {
  display : none;
}

/*
--------------------------------------
MODULE CUSTOM FIELDS
--------------------------------------
*/

.toggler:hover {
  color : var(--main-red-color);
}

/*
--------------------------------------
back to top
--------------------------------------
*/

#category .wrapper__inner.default-container {
  position : relative;
}

#button {
  position         : absolute;
  visibility       : hidden;
  z-index          : 1;
  display          : flex;
  justify-content  : center;
  background-color : var(--main-red-color);
  text-align       : center;
  border-radius    : 4px;
  bottom           : 20px;
  right            : 0;
  left             : 0;
  transition       : background-color .3s,
  opacity .5s, visibility .5s;
  opacity          : 0;
  width            : 15%;
  margin           : auto;
  padding          : 1em 0.5em;
}

#button a {
  color : white;
}

#button a i {
  padding-left : 0.5em;
}

#button:hover {
  cursor           : pointer;
  background-color : var(--second-red-color);
}

#button:active {
  background-color : var(--second-red-color);
}

#button.is--shown {
  opacity    : 1;
  visibility : visible;
}


/*
--------------------------------------
NDK CUSTOM FIELDS
--------------------------------------
*/

#submitNdkcsfields {
  width  : fit-content;
  margin : 0;
}

.product-add-to-cart {
  width : 30%;
  /*display: none;*/
}

.non__customizable__products {
  width : 100%;
}

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

#ndkcsfields-block .product-add-to-cart {
  display : block;
}

.form-group.clearfix.box-info-product.submitContainer.product-actions {
  position       : relative;
  display        : flex;
  flex-direction : row;
  align-items    : center;
}

#additionnal_price {
  position    : absolute;
  bottom      : -20px;
  float       : none;
  width       : fit-content;
  font-size   : calc(11px + (12 - 11) * ((100vw - 320px) / (1920 - 320)));
  font-weight : 600;
}

#submitNdkcsfields {
  margin : 1em 1em 0 0;
}

/*ERROR ALERT*/

#alert__error {
  display : none;
}

.alert__error-content p {
  color       : red;
  font-weight : 600;
}

.field_notice p {
  font-weight : 500;
}

.ndkcsfields-block .toggler {
  transition : all 0.3s ease;
}

/*BTN - VOIR LA PERSONNALISATION*/

a.product__customization {
  background    : #000;
  color         : white !important;
  border        : 1px solid;
  padding       : 0.5em;
  border-radius : 6px;
}

a.product__customization:hover {
  background : white;
  color      : #000 !important;
}

.modal.customization-modal {
  background : rgba(0, 0, 0, 0.8);
}

.customization-modal .modal-dialog {
  width     : 45%;
  max-width : 45%;
  margin    : auto;
}

.customization-modal .modal-content {
  padding       : 1.5em;
  border        : none;
  border-radius : 10px;
}

.customization-modal .modal-content .modal-body .product-customization-line {
  display : flex;
}

.customization-modal .product-customization-line .label,
.customization-modal .product-customization-value.value {
  flex : 0 0 50%;
}

.customization-modal .modal-content .modal-body .product-customization-line .label {
  text-align : left;
}

.customization-modal .modal-header .close {
  margin-top    : -2px;
  position      : absolute;
  top           : -10px;
  right         : -10px;
  background    : black;
  opacity       : 1;
  border-radius : 50%;
  width         : 26px;
  height        : 26px;
  border        : 2px solid white;
}

.customization-modal .modal-header .close span {
  color : white;
}

/*
--------------------------------------
RGPD MODULE
--------------------------------------
*/

/*CONTAINERS*/

body.rgpd #wrapper {
  background      : url(../../img/bg/main_bg.png) no-repeat;
  background-size : cover;
}

body.rgpd .wrapper__inner {
  padding : 5em 0;
}

body.rgpd section#main {
  max-width   : 100%;
  padding-top : 2em;
}

body.rgpd section#content {
  background    : white;
  border-radius : 11px;
  box-shadow    : 0 0 15px rgba(0, 0, 0, .05);
}

body.rgpd section#content.default-container {
  max-width : 65%;
}

/*TITLE*/

body.rgpd .page-header h1 {
  display : none;
}

/*CONTENT*/

body.rgpd .psgdprinfo17 {
  background : white;
  padding    : 1em 0;
}

body.rgpd .psgdprinfo17 p {
  color : #000;
}

body.rgpd .psgdprinfo17 p a {
  color       : var(--main-red-color);
  font-weight : 600;
}

body.rgpd .psgdprinfo17 p a:hover {
  color : var(--second-red-color);
}

/*BTN*/

body.rgpd .btn__gdpr__wrapper {
  display        : flex;
  flex-direction : column;
}

body.rgpd #exportDataToPdf,
body.rgpd #exportDataToCsv {
  margin : auto;
}

body.rgpd #exportDataToPdf {
  margin-right : 1em;
}

body.rgpd #exportDataToCsv {
  margin-bottom : 0.5em;
}

/*BLOCK BOTTOM*/

body.rgpd .delete__data {
  margin-top  : 0;
  padding-top : 0;
}

body.rgpd .delete__data a {
  color : var(--main-red-color);
}

body.rgpd .delete__data a:hover {
  color : #000;
}

/*PAGE FOOTER*/

body.rgpd footer.page-footer {
  margin-top : 2em;
}

body.rgpd footer.page-footer .default-container {
  max-width : 65%;
}

body.rgpd .page-footer .account-link {
  width : inherit;
}

body.rgpd .page-footer a:first-of-type {
  margin-bottom : 1em;
}


/*
--------------------------------------
CAROUSEL PACK MODULE
--------------------------------------
*/

.carousels-pack-block {
  margin-top : 0;
}

.owl-item {
  margin-right : 0 !important;
}

.hi-carousels-images {
  border       : none;
  margin-right : 0;
}

/*
--------------------------------------
MODAL SUSPENSION COMMANDE
--------------------------------------
*/

#ModalPromo {
  color : white;
}

.modal-title {
  font-family : var(--third-font);
  text-align  : center;
  font-size   : calc(32px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));;
}

.modal-body {
  text-align : center;
}

#ModalPromo p {
  color      : white;
  font-size  : calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
  margin-top : 5px;
}

.modal-footer button {
  background-color : var(--main-red-color);
  font-size        : calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
  font-family      : var(--main-font);
  font-weight      : 600;
  color            : #F0FFFF;
  text-transform   : uppercase;
  border-radius    : 10px;
  padding          : 1em 1.5em;
  white-space      : nowrap;
  border-color     : #F0FFFF;
  opacity          : 1 !important;
}

.modal-footer button:hover {
  border-color : white;
  color        : white;
}


/*
--------------------------------------
MODAL PROMO
--------------------------------------
*/

#ModalCommande {
  color : white;
}

.modal-title {
  font-family : var(--third-font);
  text-align  : center;
  font-size   : calc(32px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));;
}

.modal-body {
  text-align : center;
}

#ModalCommande p {
  color      : white;
  font-size  : calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
  margin-top : 5px;
}

.modal-footer button {
  background-color : var(--main-red-color);
  font-size        : calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
  font-family      : var(--main-font);
  font-weight      : 600;
  color            : #F0FFFF;
  text-transform   : uppercase;
  border-radius    : 10px;
  padding          : 1em 1.5em;
  white-space      : nowrap;
  border-color     : #F0FFFF;
  opacity          : 1 !important;
}

.modal-footer button:hover {
  border-color : white;
  color        : white;
}

#CodePromo {
  font-size: calc(17px + (22 - 17) * ((100vw - 320px) / (1920 - 320)));
  color: #892512;
  font-weight: bold;
  opacity: 1;
}

.fa-asterisk{
  font-size: 8px;
  position: absolute;
}


/*
--------------------------------------
LOGO PAYEMENT OPTION
--------------------------------------
*/

.LogoPayement {
  float      : left;
  margin-top : -15px;
}