@font-face {
  font-family: "AkrobatLight";
  src: url("/fonts/Akrobat-Light.otf");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "AkrobatRegular";
  src: url("/fonts/Akrobat-Regular.otf") format('opentype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "AkrobatMedium";
  src: url('/fonts/Akrobat-SemiBold.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "AkrobatBold";
  src: url("/fonts/Akrobat-Bold.otf");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "GravitasOne";
  src: url("/fonts/GravitasOne.eot");
  src: url("/fonts/GravitasOne.eot") format("embedded-opentype"),
    url("/fonts/GravitasOne.woff2") format("woff2"),
    url("/fonts/GravitasOne.woff") format("woff"),
    url("/fonts/GravitasOne.ttf") format("truetype"),
    url("/fonts/GravitasOne.svg#GravitasOne") format("svg");
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Akrobatblack";
  src: url("/fonts/Akrobat-Black.otf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Css Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  color: #fefefe;
  padding: 0;
  margin: 0;
  font-size: 13px;
  font-family: "AkrobatRegular", sans-serif;
  font-weight: 400;
  background: #253539;
  padding-top: 64.2px;
}
ul,
ol {
  list-style: none;
}
img,
fieldset {
  border: none;
}
a {
  text-decoration: none;
  color: #50af47;
}
a:hover {
  text-decoration: none;
}
.skip {
  position: absolute;
  left: -9999px;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
figure {
  margin: 0;
  padding: 0;
}
.clear {
  clear: both;
  height: 0;
  width: 100%;
  overflow: hidden;
}
embed,
iframe,
object,
video {
  max-width: 100%;
}
input,
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.submit-btn input[type="submit"],
a {
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

/*----------------------*/
/*     Page structure   */
/*----------------------*/
#wrapper {
  overflow: hidden;
}
.container {
  max-width: 100%;
}
.center-content {
  max-width: 1109px;
  margin: 0 auto;
}

/*----------------------*/
/*     Default texts    */
/*----------------------*/
h1 {
  color: #fefefe;
  font-size: 70px;
  padding: 0 0 15px 0;
  line-height: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: "AkrobatBold";
  font-weight: normal;
}
h2 {
  color: #fefefe;
  font-size: 35px;
  padding: 0 0 15px 0px;
  line-height: normal;
  letter-spacing: 2px;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
label,
p {
  color: #fefefe;
  font-size: 20px;
  font-family: "AkrobatRegular", sans-serif;
  font-weight: 400;
  align-items: center;
  padding: 0;
}
.span-price span {
  color: #fefefe;
  font-size: 70px;
  padding: 0 0 15px 0;
  line-height: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: "AkrobatBold";
  font-weight: normal;
}

.span-price {
  display: inline-block;
}

/* ORIGINAL price (smaller, crossed out, above) */
.span-price .span-price-original {
  display: block;
  color: #bbbbbb;
  font-size: 20px;
  text-decoration: line-through;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  margin-bottom: 4px;
}

/* CURRENT (discounted) price – same style as original big price */
.span-price .span-price-current {
  /* override from base rule if needed (same look) */
}

/* Optional: smaller on mobile */
@media (max-width: 768px) {
  .span-price span {
    font-size: 48px;
  }

  .span-price .span-price-original {
    font-size: 16px;
  }
}


/*----------------------*/
/*  header              */
/*----------------------*/
.header-container {
  background: #253539;
  padding: 0 45px;
  position: fixed;
  width: 100%;
  z-index: 5;
  top: 0px;
}
#header {
  padding: 0;
  position: relative;
  height: 76px;
}
.logo {
  float: left;
  max-width: 159px;
  position: fixed;
  top: 8px;
  left: 45px;
  z-index: 2;
}
.logo img {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

/*----------------------*/
/*  Menu                */
/*----------------------*/
.right-header {
  width: 100%;
  height: 45px;
  float: right;
  padding: 26px 0 0 0;
  background: #253539;
  position: fixed;
  right: 0px;
  padding-right: 45px;
}
.mainnav {
  float: right;
}
.mainnav ul {
  float: right;
}
.mainnav ul li {
  float: left;
  color: #fff;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 0 21px 0;
  margin: 0 6px 0 7px;
  cursor: pointer;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.mainnav ul li:last-child {
  margin-right: 0;
  margin-left: 28px;
}
.mainnav ul li:first-child {
  margin-left: 0;
}
.mainnav ul li a {
  color: #fff;
  display: block;
  position: relative;
  overflow: hidden;
}

.mainnav ul li:hover > span {
  color: #50af47;
}

.mainnav ul li.current-menu-item > a,
.mainnav ul li:hover > a,
.mainnav ul li a:hover {
  color: #50af47;
}

.mainnav ul li.menu-border span {
  border-bottom: 2px solid #253539;
}
.mainnav ul li.menu-border:hover > span {
  border-bottom: 2px solid #fff;
}

.mainnav ul li.menu-border a {
  border-bottom: 2px solid #253539;
}
.mainnav ul li.menu-border:hover > a {
  border-bottom: 2px solid #fff;
}

.mainnav ul li.active {
  color: #50af47;
}

.mainnav ul li.active a {
  color: #50af47;
}

.mainnav ul li.item-number {
  color: #50af47;
  position: relative;
  padding: 0 0 0 16px;
}
.mainnav ul .item-number a {
  color: #50af47;
  font-family: "AkrobatMedium";
  font-weight: normal;
  display: block;
}
.mainnav ul li ul {
  background: #253539;
  position: absolute;
  width: 100%;
  z-index: 1000;
  top: 100%;
  left: -15px;
  padding: 0px 0 21px 24.5%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mainnav ul li ul:before {
  content: "";
  background: #253539;
  width: 3000px;
  height: 100%;
  position: absolute;
  left: -2980px;
  top: 0;
  z-index: 1;
}
.mainnav ul li ul:after {
  content: "";
  background: #253539;
  width: 3000px;
  height: 100%;
  position: absolute;
  right: -2980px;
  top: 0;
  z-index: 1;
}
.mainnav ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.mainnav ul li ul li:last-child {
  margin-left: 0;
}
.mainnav ul li ul ul {
  position: absolute;
  z-index: 10;
  top: 20px !important;
  width: 170px;
  padding: 10px 3px 0 0;
}
.mainnav ul ul li:hover > ul {
  top: -10px !important;
}
.mainnav ul li li:first-child,
.mainnav ul li ul li {
  padding: 5px 0 3px 0;
  margin: 0;
  font-size: 13.5px;
  text-transform: none;
  position: relative;
  z-index: 15;
  border-bottom: 2px solid #fff;
}
.mainnav ul li:hover > ul {
  visibility: visible;
  opacity: 1;
}
.mainnav ul li ul li:first-child a,
.mainnav ul li ul li a {
  font-size: 14px;
  padding: 0 10px 0 15px;
  font-weight: 400;
  display: block;
  text-align: left;
}
.mainnav ul li ul ul {
  top: -10px;
  left: 100%;
}
.slicknav_menu {
  display: none;
}
#menu-holder {
  margin: 0 -15px;
}

/*----------------------*/
/*  titles              */
/*----------------------*/
.page-title-container {
  padding: 30px 45px 50px 45px;
}
.page-title-container h1 {
  color: #fff;
  font-size: 53px;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "AkrobatBold";
  font-weight: normal;
}

.page-title-container h2 {
  font-family: "AkrobatMedium";
  font-weight: normal;
  font-size: 35px;
  padding: 0 0 15px 0px;
  line-height: normal;
  letter-spacing: 2px;
}

.page-title-container p {
  font-size: 20px;
}


/*----------------------*/
/*  full-container      */
/*----------------------*/
.full-width-container {
  position: relative;
}
.full-width-video-container {
  position: relative;
  padding-top: 56.25%; /* pour un ratio de 16:9 */
  margin-left: 45px;
  margin-right: 45px;
}
.full-width-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.full-item {
  position: relative;
}
.full-item img {
  width: 100%;
  height: auto;
  display: block;
}
.full-slider {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.full-slider-con {
  background: rgba(0, 0, 0, 0.55);
  width: 100%;
  padding: 25px 0 15px 0;
}
.full-slider-con-info {
  width: 100%;
  max-width: 1054px;
  margin: 0 auto;
  padding: 0 60px;
}
.full-slider-con h1 {
  color: #fefefe;
  font-size: 45px;
  line-height: normal;
  padding-bottom: 20px;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.full-slider-con h2 {
  color: #fefefe;
  font-size: 45px;
  line-height: normal;
  padding-bottom: 20px;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.full-slider-con h2 a {
  color: #fefefe;
  text-decoration: none;
}
.full-slider-con p {
  color: #fefefe;
  font-size: 20px;
  line-height: 21px;
  padding-bottom: 10px;
  text-transform: uppercase;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.full-slider-con p a {
  color: #fefefe;
  text-decoration: none;
}

/*----------------------*/
/*  column-container    */
/*----------------------*/
.column-container {
  margin: 11px 45px 0 45px;
}
.column-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.column {
  width: 25%;
  position: relative;
}

.column a {
  display: block;
}
.column img {
  width: 100%;
  height: auto;
  display: block;
}
.column-con-area {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
}
.column-con {
  width: 100%;
  text-align: center;
  padding: 20px;
}
.column-con h2 {
  color: #fff;
  font-size: 35px;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "AkrobatBold";
  font-weight: normal;
  position: relative;
  z-index: 1;
}
.column-con-title-shadow h2 {
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
}
.column-con-title-shadow p {
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  padding-bottom: 7px;
}
.center-column {
  margin: 0 1%;
}

.yellowfilter:hover .column-con-area {
  transform: scale(1.05);
  transition: transform 0.2s;
}

.yellowfilter a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #50af47;
  z-index: 1;
}
.yellowfilter img {
  -webkit-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='gray'><feColorMatrix in='SourceGraphic' type='saturate' values='0' /></filter></svg>#gray");
  filter: grayscale(100%);
}
.box-number-1 a:before {
  display: none;
}
.box-number-3 a:before {
  display: none;
}
.four-column-container {
  height: 200px;
}

/*----------------------*/
/*  six-column-container*/
/*----------------------*/
.six-column-container {
  margin: 0 45px;
}
.six-column-container .column-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  height: 480px;
}
.six-column-container .column {
  background: #253539;
  width: 33.33%;
  height: 50%;
}
.six-column-container .column:nth-child(even) {
  background: #50af47;
}

.six-column-container .column:hover .svs-content {
  transform: translate(-50%, -50%) scale(1.05);
  transition: transform 0.2s;
}

.svs-content {
  width: 86%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.svs-content h2 {
  color: #fff;
  font-size: 35px;
  line-height: 43px;
  padding-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.svs-content h2 a {
  color: #fff;
  font-size: 35px;
  line-height: 43px;
  padding-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.svs-content p {
  color: #fefefe;
  font-size: 17px;
  line-height: 16px;
  padding-bottom: 15px;
  text-transform: uppercase;
}
.svs-content p a {
  color: #fefefe;
  text-decoration: none;
}
.six-column-container .column:nth-child(even) .svs-content p {
  color: #253539;
}
.six-column-container .column:nth-child(even) .svs-content p a {
  color: #253539;
  text-decoration: none;
}

/*----------------------*/
/*  selection-container */
/*----------------------*/
.selection-container {
  margin: 11px 45px;
}
.selection-content {
  background: #ffffff;
}
.selection-container h2 {
  color: #253539;
  font-size: 35px;
  padding: 10px 0 23px 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.selection-container .owl-carousel .owl-item img {
  display: block;
  width: inherit;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
}
.cycle-img {
  border-bottom: 3px solid #253539;
  padding-bottom: 5px;
  margin-bottom: 7px;
  text-align: center;
}
.cycle-img a {
  display: inline-block;
}
.cycle-con-area {
  overflow: hidden;
  padding-bottom: 10px;
}
.cycle-con-lft {
  float: left;
  padding-top: 3px;
}
.cycle-con-lft h3 {
  color: #253539;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.cycle-con-lft a {
  color: #253539;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.cycle-con-area small {
  float: right;
  color: #253539;
  font-size: 15px;
  display: block;
  text-align: right;
  letter-spacing: 1px;
  font-family: "AkrobatLight";
}
.owl-item.active:not(.center) .cycle-con-lft {
  padding-left: 10px;
}
.owl-item.active.center + .active .cycle-con-lft {
  padding-left: 0;
}
.owl-item.active.center + .active .cycle-con-area small {
  padding-right: 10px;
}

/*----------------------*/
/*  videos section      */
/*----------------------*/
.videos-container {
  margin: 0 45px;
}
.videos-info {
  background: #253539;
}
.videos-info h3 {
  font-size: 35px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 9px 0 0px 9px;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.videos-title {
  overflow: hidden;
  padding-top: 32px;
}
.videos-title h2 {
  float: left;
  font-size: 35px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.videos-title a {
  float: right;
  font-size: 20px;
  color: #fff;
  letter-spacing: 2px;
  margin-top: 15px;
  display: inline-block;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 9px;
}
.videos-title a:before {
  content: "";
  background: #fff;
  width: 348px;
  height: 3px;
  position: absolute;
  left: -72px;
  bottom: 0;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  width: 100%;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*----------------------*/
/*  marques-container   */
/*----------------------*/
.marques-container {
  padding: 0 45px;
  overflow: hidden;
}
.marques-area {
  background: #253539;
  padding: 15px 0 15px 0;
  overflow: hidden;
}
.marques-info {
}
/*----------------------*/
/*  footer-container    */
/*----------------------*/
.footer-container {
  background: #50af47;
  padding: 21px 0 20px 0;
}
.footer-menu ul {
  text-align: center;
}
.footer-menu ul li {
  display: inline-block;
  color: #253539;
  font-size: 17px;
  padding: 0 13px 5px 13px;
  text-transform: uppercase;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.footer-menu ul li a {
  color: #253539;
}
.footer-menu ul li a:hover {
  color: #6a6565;
}
.footer-social {
  margin-top: 20px;
}
.footer-social ul {
  text-align: center;
}
.footer-social ul li {
  width: 30px;
  display: inline-block;
  margin: 0 6px;
}
.footer-social ul li a {
  background: #253539;
  width: 30px;
  height: 30px;
  display: block;
  text-align: center;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-size: 15px;
}
.footer-social ul li a:hover {
  background: #000;
}
.fa-google-plus,
.fa-twitter,
.fa-facebook,
.fa-youtube,
.fa-instagram {
  line-height: 30px;
  display: block;
}

.footer-social {
  display: flex;
  flex-wrap: wrap; /* Allows columns to stack on small screens */
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px; /* Adds space between columns */
  padding: 45px;
}

.footer-column {
  flex: 1; /* Ensures equal width */
  min-width: 300px; /* Columns will stack if screen width is smaller */
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-column:last-child {
  flex: 2; /* Gives more space to the right column */
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px; /* Space between icons */
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-icons li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: #253539; /* Icon background */
  color: white;
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.social-icons li a:hover {
  background-color: #50af47; /* Hover color */
}

.footer-image {
  max-width: 100%; /* Ensures image responsiveness */
  height: auto;
  width: 555px; /* Fixed width for the image */
}

.social-icons .fa-social {
  line-height: 1; /* Reset line-height */
  vertical-align: middle; /* Center within the line */
  display: inline-flex; /* Ensures perfect alignment */
  justify-content: center;
  align-items: center;
  position: relative;
  top: 3px; /* Moves icons 3 pixels downward */
}


/*----------------------*/
/*  catalog page        */
/*----------------------*/
.breadcrumb-container {
  padding: 11px 45px 12px 41px;
}
.breadcrumb,
.breadcrumb span {
  color: #fff;
  font-size: 15px;
  font-family: "Akrobatblack";
  padding: 0 4px 0 4px;
  letter-spacing: 2px;
}
.breadcrumb span:first-child {
  padding-left: 0;
}
.breadcrumb span span {
  color: #fff;
  padding: 0;
  font-family: "AkrobatMedium";
}
.breadcrumb span a span {
  color: #fff;
  padding: 0;
  font-family: "AkrobatBold";
}
.banner-container {
  padding: 0 45px;
}
.banner-container img {
  width: 100%;
  height: 100%;
  display: block;
}
.full-width-container,
.catalog-container,
.main-content-container {
  padding: 19px 45px 0 45px;
}
.catalog-area {
  overflow: hidden;
}
.catalog-sidebar {
  background-color: #253539;
  width: 273px;
  float: left;
  display:block;
}
.catalog-pod-area {
  padding-left: 273px;
}
.catalog-pod-area h2 {
  font-size: 45px;
}
.catalog-pod-area h2 small {
  font-size: 35px;
}
.catalog-pod-area h3 {
  padding-left: 6px;
  padding-bottom: 5px;
  font-size: 20px;
}
.catalog-container h2,
.main-content-container h1 {
  color: #fefefe;
  font-size: 70px;
  padding: 0 0 15px 0;
  line-height: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.main-content-container h2 {
  color: #fefefe;
  font-size: 35px;
  padding: 0 0 15px 0px;
  line-height: normal;
  letter-spacing: 2px;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.main-content-container p {
  padding: 0 0 15px 0;
  font-size: 20px;
}
.main-content-container h3 {
  padding: 0 0 15px 0;
  font-size: 25px;
}
.main-content-container ul {
    list-style-type: disc; /* Ensures that the bullet points are discs */
    padding-left: 20px; /* Proper padding to align the list nicely */
}
.main-content-container li {
  font-size: 20px;
  margin-bottom: 5px; /* Adds a little space between items */
}
.sidebar-con li a:hover,
.sidebar-con li .active {
  background: #42873c;
  color: #fff;
}
.sidebar-con h3 {
  color: #253539;
  font-size: 15px;
  padding: 19px 15px 15px 21px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 3px solid #253539;
  font-family: "Akrobatblack";
  font-weight: normal;
}
.sidebar-con h3 a {
  color: #253539;
  font-size: 15px;
  padding: 19px 15px 15px 21px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 3px solid #253539;
  font-family: "Akrobatblack";
  font-weight: normal;
}
.sidebar-con.active h3 {
  background: #50af47;
  color: #fff;
  border-top: 3px solid #253539;
}
.sidebar-con.active h3 a {
  background: #50af47;
  color: #fff;
  border-top: 3px solid #253539;
}
.sidebar-con ul li {
  color: white;
  font-size: 15px;
  text-transform: uppercase;
  font-family: "AkrobatMedium";
  margin-bottom: 15px;
}
.sidebar-con ul li a {
  padding: 0 17px 0 20px;
}
.sidebar-con .inner a {
  padding-left: 37px;
}
.sidebar-con ul li a {
  /*background: url(/images/bgr-li-arrow.png) no-repeat right 20px;*/
  color: #253539;
  padding: 16px 0px 15px 14px;
  letter-spacing: 1px;
  /*margin: 0 20px;*/
  border-top: 3px solid #253539;
  display: block;
  position: relative;
  z-index: 2;
}
.drop_down_menu {
  position: relative;
}
/**.drop_down_menu:before {
  background-image: url(/images/bgr-li-arrow.png);
  content: "";
  width: 18px;
  height: 12px;
  display: inline-block;
  position: absolute;
  background-repeat: no-repeat;
  right: 23px;
  top: 17px;
  z-index: 1;
}**/
.sidebar-con ul li ul li p {
  letter-spacing: 1px;
  color: #253539;
  font-size: 15px;
  padding-bottom: 20px;
}
.sidebar-con ul li:first-child a {
  border-top: none;
}
.sidebar-con ul li ul {
  margin-top: 8px;
}
.sidebar-con ul li ul li {
  padding: 0;
  font-size: 14px;
  margin-bottom: 0;
}
.sidebar-con ul li ul li a {
  background: none;
  padding: 15px 10px;
  margin: 0;
  border-top: 3px solid #253539 !important;
}
.sidebar-con ul li ul li ul li a {
  padding-left: 71px !important;
}
.sidebar-con ul li ul li:first-child a {
  border-top: none;
}
.sidebar-con:nth-child(2) ul li:last-child a {
  border-bottom: 3px solid #253539;
}
.categorie {
  margin-bottom: 8px;
}

.product-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.product-col {
  width: 33.33%;
  padding: 0 0 7px 6px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.product-info {
  width: 100%;
  background: #fff;
  padding: 0px 9px;
  position: relative;
}
.slick-track.catalog-product-picture-image {
  display: flex;
  align-items: flex-end;
  min-height: 250px;
}
.product-img {
  margin-bottom: 0px;
}
.product-img img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0;
  margin: auto;
}
.product-img-ba img {
  padding: 10px 0px;
}
.product-con-area {
  position: relative;
  padding-bottom: 0px;
}
.product-con-area small {
  width: auto;
  letter-spacing: 2px;
  float: right;
  color: #253539;
  font-size: 15px;
  font-family: "AkrobatLight";
}
.product-con-area h3 {
  width: 100%;
  color: #253539;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 18px;
  padding-bottom: 1px;
  text-transform: uppercase;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.product-con-area p {
  color: #253539;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 18px;
  text-transform: uppercase;
}
.les-btn {
  width: auto;
  display: block;
  position: absolute;
  left: 9px;
  bottom: 7px;
  color: #253539;
  font-size: 14px;
  letter-spacing: 2px;
  font-family: "AkrobatBold";
}

.product-con-area {
  margin-top: 13px;
}
.product-con-area small {
  float: none;
  padding-left: 6px;
}

/*.details-button {
  margin: 0 auto;
  width: 161px;
  height: 32px;
  position: relative;
  top: 10px;
  display: none;
  color: white;
  font-size: 12px;
  text-align: center;
  padding-top: 9px;
  letter-spacing: 2px;
  font-family: "AkrobatMedium";
  background: #b5bdd2 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
}**/

.cadre-list {
  display: flex;
}
.cadre-list img {
  width: 15%;
  margin: 5px;
}
.cadre:hover {
  cursor: pointer;
  transform: scale(1.1);
  transition: all 0.5s;
}

.sidebar-list {
  color: white;
}

.sidebar-list input {
  -webkit-appearance: checkbox;
}

.catalogue-body .breadcrumb,
.catalogue-body .breadcrumb span {
  color: white;
}

.price-selector,
.size-selector {
  margin-top: 15px;
  margin-left: 25px;
}

.price-selector input,
.size-selector input {
  width: 80%;
}

#slider-range-price {
  width: 80%;
}

.filter-result {
  display: flex;
  justify-content: space-between;
  direction: rtl;
  color: white;
  text-align: right;
  margin: 0 12px 10px 6px;
}

.filter-result span {
  font-weight: bold;
}

.filter-result p {
  direction: ltr;
  font-size: 100%;
}

#reset-filters:hover {
  cursor: pointer;
}

.checked-filters {
  display: none;
  margin: 10px 22px;
  font-family: "AkrobatLight";
}

.no-result {
  color: white;
}

#display-filters {
  background: none;
  border: 1px solid white;
  color: white;
  margin: 0 0 10px 6px;
  display: none;
}
#display-filters:hover {
  background-color: #50af47;
  cursor: pointer;
}
/*----------------------*/
/*  product page        */
/*----------------------*/
.bulls-tirone-container {
  border-bottom: 2px solid white;
}

.bulls-tirone-content h1,
.centered-div h1 {
  color: white;
  font-size: 35px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 18px 10px 14px 0px;
  font-family: "AkrobatBold";
  font-weight: normal;
  margin-bottom: 20px;
}
.bulls-tirone-title-smaller {
  font-size: 60%;
}
.bulls-tirone-row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.bulls-tirone-lft {
  width: 67.02%;
  background-color: #fff;
}
.bulls-tirone-lft .div-title {
  margin: 20px 50px;
  display: flex;
  justify-content: space-between;
}
.bulls-tirone-lft .div-title,
.bulls-tirone-lft .div-title h1 {
  color: #253539;
  margin-bottom: 0;
}
.bulls-tirone-lft .div-title table td,
.bulls-tirone-lft .div-title table th {
  font-size: 25px;
}
.bulls-tirone-lft .div-title img {
  height: 130px;
}
.bulls-tirone-rgt {
  width: 32.97%;
  border-left: 2px solid #253539;
  background-color: #253539;
}
.bulls-img {
  padding: 87px 15px 46px 15px;
}
.bulls-img img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.bulls-con {
  padding: 35px 22px 30px 22px;
}
.bulls-con p {
  color: #253539;
  font-size: 15px;
  line-height: 18px;
  padding-bottom: 15px;
  font-weight: 300;
}

.bulls-con h1 {
  margin-bottom: 0;
  padding-bottom: 10px;
}
.bulls-con h3,
.bulls-con tr {
  color: white;
  letter-spacing: 1px;
  font-family: "AkrobatMedium";
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 0px;
  height: 30px;
}

.bulls-con tr select {
  font-size: 15px;
  border: none;
  font-family: "AkrobatMedium";
}
.bulls-con th {
  text-align: left;
  width: 50%;
}
.bulls-con tr:not(.batteries-list) td {
  padding-left: 4px;
}
.bulls-con-description p {
  color: white;
}
#batteries-list,
#size-list {
  background-color: #253539;
  color: white;
  margin-top: 10px;
  border: 0.5px solid white;
}
.select-options {
  border-top: 2px solid #253539;
  margin-bottom: 29px;
}

.geometrie-container {
  padding: 0 45px;
}
.geometrie-content {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.geometrie-lft {
  width: 49.6%;
  background-color: #fff;
}
.geometrie-rgt {
  background: #253539;
  width: 50.4%;
}
.gme-con {
  padding: 0 10px 10px 12px;
}
.gme-con h2 {
  color: #253539;
  font-size: 25px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 18px 10px 14px 10px;
  font-family: "AkrobatMedium";
  font-weight: normal;
}

.gme-img {
  width: 100%;
}
.gme-img img {
  width: 90%;
  height: auto;
  display: block;
  margin-right: 30px;
}
.taille-table {
  padding: 67px 0 20px 0;
}
.taille-row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.taille-col {
  padding: 8px 8px 8px 8px;
  width: 10%;
  border: 1px solid #253539;
  text-align: center;
}
.taille-col h4 {
  color: #253539;
  font-size: 15px;
  letter-spacing: 2px;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.taille-col p {
  color: #253539;
  font-size: 15px;
  font-family: "AkrobatRegular";
}
.techniq-con h2 {
  color: #fff;
  font-size: 25px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 10px 17px 16px;
  font-family: "AkrobatMedium";
  font-weight: normal;
  margin: 2% 4%;
}
.tech-table {
  padding-right: 6px;
}
.tech-row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 770px;
  width: 770px;
  border-bottom: 1px solid #253539;
}
.tech-row:nth-child(even) {
  background: #50af47;
}
.tech-col {
  padding: 15px 0 11px 18px;
}
.tech-col:nth-child(1) {
  width: 50.13%;
}
.tech-col:nth-child(2) {
  width: 44.87%;
}
.tech-col p {
  color: #fff;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: "AkrobatMedium";
}
.hidden-tech {
  display: none;
}
.div-button-tech {
  margin-top: 20px;
  text-align: center;
}
#btn-tech {
  background-color: #253539;
  font-size: 18px;
  border: 1px solid white;
  font-family: "AkrobatMedium";
  color: white;
}
#btn-tech:hover {
  background-color: #50af47;
  cursor: pointer;
}

.tem-container {
  padding: 0 45px;
}
.tem-content-info {
  background: #eaeaea;
  padding: 18px 22px 18px 22px;
  border-top: 2px solid #253539;
}
.tem-content-info.bike {
  background: #fff;
  color: #253539;
  font-size: 18px;
}
.tem-content.entry-content a {
  color: #253539;
  font-size: 15px;
  line-height: normal;
  display: inline-block;
  text-align: right;
  font-family: "AkrobatMedium";
  padding-bottom: 37px;
}
.videos-homepage-area h2 {
  color: #253539;
  font-size: 25px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 20px 0 14px 0;
  font-family: "GravitasOne";
  font-weight: normal;
}
.info-box {
  color: white;
  margin-top: 18px;
}
.info-box p {
  color: white;
}

.info-box.coloris ul li {
  width: auto;
  padding: 3px 10px;
}

.info-box.coloris ul li:hover {
  background-color: #50af47;
  color: white;
  cursor: pointer;
}
.info-box.coloris ul li.disabled:hover {
  background: transparent;
  cursor: default;
  color: grey;
}

.info-box h4 {
  font-size: 15px;
}

.info-box ul {
  display: flex;
  margin-top: 8px;
}
.info-box ul li {
  width: 65px;
  height: 22px;
  border: 0.5px solid white;
  padding: 3px 10px 0;
  margin-right: 4px;
  background-color: #253539;
}
.info-box .geometry-list {
  flex-direction: column;
  display: none;
}
.info-box .geometry-list li {
  margin-top: 4px;
}
.info-box .geometry-list li:hover {
  margin-top: 4px;
  color: white;
}
.info-box.geometry {
  display: flex;
}

.postal-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap; /* permet le passage en colonne sur petit écran */
}

.postal-form label {
  margin: 0;
}

.postal-form input {
  padding: 0.4rem;
}

.postal-form .btn {
  padding: 0.4rem 0.8rem;
}

.availability-box {
  color: white;
  margin-top: 18px;
}

.availability-box h4 {
  font-size: 15px;
  margin-bottom: 10px;
}

.availability-box p {
  color: white;
}

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

.availability-box ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid white;
  margin-bottom: 5px;
  background-color: #253539;
}

.availability-box ul li:hover {
  background-color: #50af47;
  color: white;
  cursor: pointer;
}

.availability-box ul li .shop-link {
  text-decoration: none;
  color: white;
  font-size: 14px;
}

.availability-box ul li .shop-link:hover {
  text-decoration: underline;
  color: white;
}

.availability-box .postal-form {
  margin-bottom: 15px;
}

.availability-box .postal-form label {
  font-size: 15px;   /* même taille que le texte normal */
  font-weight: 600; /* garde le gras comme avant */
}

/* Bouton "Mettre à jour" avec le même look que les items de #shop-list */
.availability-box .postal-form .btn-shop {
  background-color: #253539;
  color: white;
  border: 1px solid white;
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: "AkrobatMedium";
  cursor: pointer;
  border-radius: 0;            /* les <li> n'ont pas d'arrondis visibles */
  line-height: 1;              /* évite la sur‑hauteur */
}
.availability-box .postal-form .btn-shop:hover {
  background-color: #50af47;   /* même hover que les <li> */
  color: white;
}

.choose-shop-btn {
  background-color: #50af47;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 12px;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.choose-shop-btn:hover {
  background-color: #42873c;
}

.view-all-shops {
  display: block;
  margin-top: 15px;
  text-align: left;
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: underline;
}

.view-all-shops:hover {
  color: #50af47;
  text-decoration: underline;
}


.owl-item {
  width: 788px;
}

.centered-div {
  color: black;
  margin: 55px auto;
  max-width: 770px;
}

.centered-div h1 {
  text-align: center;
}

.centered-div > p {
  font: normal normal normal 15px/19px AkrobatRegular;
  letter-spacing: 0px;
  color: #253539;
  line-height: 22px;
  text-align: justify;
}

.overlay-logo {
  width: 15%;
}

/*---------------------------*/
/*  entry-content            */
/*---------------------------*/
.entry-content {
  width: 100%;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: #253539;
  line-height: normal;
  padding-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: "Akrobatmedium";
  font-weight: normal;
}
.entry-content h1 {
  color: #253539;
  font-size: 30px;
  letter-spacing: 2px;
  padding: 18px 10px 29px 0;
  font-family: "Akrobatblack";
  font-weight: normal;
}
.entry-content h2 {
  font-size: 25px;
  padding-bottom: 15px;
}
.entry-content h3 {
  font-size: 14px;
}
.entry-content h4 {
  font-size: 16px;
}
.entry-content h5 {
  font-size: 12px;
}
.entry-content h6 {
  font-size: 11px;
}
.entry-content p {
  color: #253539;
  font-size: 18px;
  line-height: 18px;
  padding-bottom: 10px;
  font-family: "AkrobatRegular";
}
.entry-content p a {
  color: #253539;
}
.entry-content a {
  color: #253539;
}
.entry-content ul {
  padding: 0 0 15px 0px;
}
.entry-content ul li {
  padding: 0 0 8px 0px;
  list-style-type: none;
  font-size: 15px;
  color: #253539;
  font-family: "AkrobatRegular";
}
.entry-content ul li a {
  color: #253539;
}
.entry-content ol {
  list-style-type: decimal;
  padding: 0 0 15px 15px;
}
.entry-content ol li {
  list-style-type: decimal;
  padding: 0 0 8px 10px;
  font-size: 15px;
  color: #253539;
  font-family: "AkrobatRegular";
}
.entry-content ol li a {
  color: #253539;
}
.entry-content blockquote {
  color: #253539;
  font-size: 15px;
  padding: 10px 0;
  border-top: 1px solid #253539;
  border-bottom: 1px solid #253539;
  font-family: "AkrobatRegular";
}
.entry-content blockquote p {
  padding-bottom: 0;
}

/*----------------------*/
/*  product-slider      */
/*----------------------*/
.product-slider {
  max-width: 98%;
  margin: 0px auto;
}
.product-slider .item img {
  max-width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}
.news-catalog-container {
  padding-top: 9px;
  padding-bottom: 75px;
}
.news-catalog-container .sidebar-con h3 {
  padding-right: 17px;
}
.news-catalog-container .sidebar-con h3 small {
  background: url(/images/bgr-li-arrow.png) no-repeat right 0;
  display: block;
}
.news-ctl-area {
  padding: 3px 24px 0 21px;
}
.news-ctl-row {
  padding-bottom: 40px;
}
.news-ctl-row h3 {
  color: #fff;
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding-bottom: 2px;
  font-family: "GravitasOne";
  font-weight: normal;
}
.news-ctl-row p {
  color: #fff;
  font-size: 14px;
  line-height: 17px;
  padding-bottom: 18px;
  letter-spacing: 1.5px;
  font-family: "AkrobatMedium";
}
.news-ctl-row small {
  display: block;
  text-align: right;
}
.news-ctl-row .news-ctl-row-description {
  text-align: left;
  color: #fff;
}
.news-ctl-row-description span {
  display: flex;
  height: 182px;
  align-items: center;
}
.news-ctl-row a {
  color: #f2eb3c;
  font-size: 14px;
  line-height: normal;
  display: inline-block;
  text-align: right;
  font-family: "AkrobatMedium";
}
img.alignleft {
  max-width: 100%;
  height: auto;
  display: block;
}
.alignleft {
  float: left;
}
.alignleft {
  margin: 3px 15px 10px 0px;
  display: inline;
}
.news-ctl-row p small {
  background: #253539;
  width: 83px;
  height: 2px;
  display: none;
  margin-bottom: 11px;
}
/*----------------------*/
/*  contact             */
/*----------------------*/
.contact-container {
  padding: 0 45px;
}
.contact-content {
  background: #eaeaea;
  padding: 9px 20px 100px 20px;
}
.contact-content h3 {
  color: #253539;
  font-size: 15px;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 27px;
  font-family: "Akrobatblack";
  font-weight: normal;
}
.contact-content p {
  color: #253539;
}
/*.contact-form-area {
  max-width: 850px;
	padding-left: 30px;
}*/
.contact-form {
  overflow: hidden;
}
.contact-form h2 {
  font-size: 20px;
  color: #253539;
  letter-spacing: 2px;
  font-weight: normal;
  font-family: "AkrobatMedium";
  text-transform: uppercase;
  border-bottom: 2px solid #253539 !important;
}
.contact-form-intro {
  width: 100%;
  padding: 0 13px 15px 13px;
}
.contact-form-outro {
  width: 100%;
  padding: 0 13px 15px 13px;
}
.radio-box-info {
  width: 50%;
  float: left;
  padding: 0 13px 5px 13px;
}
.radio-box-info:nth-child(2) {
  text-align: right;
}
.radiobox input[type="radio"] {
  display: none;
}
.radiobox input[type="radio"] + label {
  color: #253539;
  font-family: "AkrobatMedium";
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
}
.radiobox input[type="radio"] + label span {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #253539;
  margin: -4px 10px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  border-radius: 50%;
}
.radiobox input[type="radio"]:checked + label span {
  background: url(/images/bgr-radio.png) no-repeat center center;
}
.checkbox-area {
  padding: 0 0 10px 4px;
}
.checkbox {
  display: inline-block;
  margin: 0 9px 4px 9px;
}
.checkbox-area input[type="checkbox"] + label {
  display: inline-block;
  padding: 4px 0 0 21px;
  color: #253539;
  line-height: 19px;
  font-size: 15px;
  position: relative;
  letter-spacing: 0.5px;
  font-family: "AkrobatMedium";
  text-transform: uppercase;
  cursor: pointer;
}
.checkbox-area input[type="checkbox"] {
  display: none;
}
.checkbox-area input[type="checkbox"] input[type="checkbox"] + label:before {
  font-family: "FontAwesome";
  display: inline-block;
}
.checkbox-area input[type="checkbox"] + label:before {
  content: " ";
  background: url(/images/bgr-check-mo.png) no-repeat;
  background-position: 0 0;
  width: 16px;
  height: 19px;
  display: block;
  position: absolute;
  left: 0px;
  top: 3px;
}
.checkbox-area input[type="checkbox"]:checked + label:before {
  background-position: 0 -19px;
}
.veloland-city {
  padding: 0 13px 9px 13px;
}
.text-field-area {
  overflow: hidden;
}
.text-field-lft {
  width: 50%;
  float: left;
}
.text-field {
  padding: 0 13px 9px 13px;
}
.text-field input[placeholder],
.text-field [placeholder],
.text-field [placeholder] {
  color: #aaa;
}
.text-field textarea::-webkit-input-placeholder,
.text-field ::-webkit-input-placeholder {
  color: #aaa;
  opacity: 1;
}
.text-field textarea:-moz-placeholder,
.text-field :-moz-placeholder {
  color: #aaa;
  opacity: 1;
}
.text-field textarea::-moz-placeholder,
.text-field ::-moz-placeholder {
  color: #aaa;
  opacity: 1;
}
.text-field textarea:-ms-input-placeholder,
.text-field :-ms-input-placeholder {
  color: #aaa;
  opacity: 1;
}
.text-field label {
  color: #aaa;
  font-size: 15px;
  letter-spacing: 0.3px;
  font-weight: 600;
}
.text-field textarea,
.text-field input[type="text"],
.text-field input[type="password"],
.text-field input[type="email"] {
  background: #fff;
  width: 100%;
  height: 33px;
  color: #aaa;
  font-size: 15px;
  padding: 0 20px;
  letter-spacing: 0.3px;
  /*text-transform: uppercase;*/
  outline: none;
  border: 1px solid #253539;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "AkrobatMedium";
}
.text-field textarea {
  height: 159px;
  padding-top: 6px;
}
.validation-error-label {
  color: red;
}
.submit-btn-area {
  overflow: hidden;
  padding: 14px 13px 0 0;
}
.submit-btn {
  width: 194px;
  float: right;
}
.submit-btn input[type="submit"] {
  background: #253539;
  width: 100%;
  height: 33px;
  color: #50af47;
  font-size: 15px;
  padding: 0 10px;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "AkrobatMedium";
}
.submit-btn input[type="submit"]:hover {
  background: #4d4a4a;
}

/*----------------------*/
/*  shop                */
/*----------------------*/

.shop-container {
  padding: 19px 45px 45px 45px;
  overflow: hidden;
  height: auto;
}
.shop-sidebar {
  width: 273px;
  float: left;
}
.shop-zip-code-field input[type="text"] {
  background: #fff;
  width: 95%;
  height: 33px;
  color: #aaa;
  font-size: 15px;
  padding: 0 20px;
  letter-spacing: 0.3px;
  /*text-transform: uppercase;*/
  outline: none;
  border: 1px solid #253539;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "AkrobatMedium";
}
.map_update-submit {
  background: #4d4a4a;
  width: 130px;
  height: 33px;
  color: #50af47;
  font-size: 12px;
  margin-top: 10px;
  padding: 0 10px;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "AkrobatMedium";
}
.map_update-submit:hover {
  background: #4d4a4a;
}
.shop-shop-autocomplete-list {
  margin-top: 15px;
}
.shop-shop-autocomplete-list a {
  text-decoration: none;
  color: #50af47;
}
.shop-shop-details-bloc {
  margin-top: 30px;
}
.shop-shop-details-bloc a {
  text-decoration: none;
  color: #ffffff;
}
.shop-shop-details-address a {
  text-decoration: none;
  color: #ffffff;
}
.shop-shop-details-address {
  padding-top: 10px;
}
.shop-shop-details-opening-hours {
  padding-top: 10px;
}
.shop-shop-details-opening-hours p {
  font-size: 100%;
}
.shop-shop-details-open-btn {
  padding-top: 20px;
}
.shop-shop-details-open-btn a {
  display: block;
  background: #4d4a4a;
  width: 130px;
  height: 33px;
  line-height: 33px;
  color: #50af47;
  font-size: 12px;
  margin-top: 10px;
  padding: 0 10px;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "AkrobatMedium";
}

.shop-map-area {
  padding-left: 273px;
}

.shop-page-description p {
  color: #fff;
  font-size: 20px;
  padding: 0px 0 14px 0;
  font-weight: 300;
  letter-spacing: .02em;
}
.shop-page-description h4 {
  font-size: 20px;
  padding: 0px 0 14px 0;
}

.shop-page-description ul {
  list-style-type: disc; /* Ensures that the bullet points are discs */
  padding-left: 20px; /* Proper padding to align the list nicely */
}
.shop-page-description li {
font-size: 20px;
margin-bottom: 5px; /* Adds a little space between items */
}

/*----------------------*/
/*  shop carousel       */
/*----------------------*/
.shop-carousel-container {
  width: 100%; /* Full width of the parent block */
  height: 100%; /* Full height of the parent block */
  overflow: hidden;
  position: relative; /* Needed for absolute positioning of arrows */
}

.shop-carousel-inner {
  width: 300%; /* Adjust based on the number of items, e.g., 3 items = 300% */
  display: flex;
}

.shop-carousel-item {
  position: relative;
  width: 33.3333%; /* Adjust based on the number of items, e.g., 3 items = 33.3333% */
  flex: 0 0 auto;
}

.shop-carousel-credit {
  position: absolute;
  bottom: 0; /* Aligns the text at the bottom of the container */
  left: 0; /* Aligns the text to the left of the container */
  color: white; /* Adjust text color as needed */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
  padding: 5px; /* Add some padding around the text */
  font-size: 12px; /* Adjust font size as needed */
  letter-spacing: .1em;
}



.shop-header-container {
  padding: 0 45px;
}
.shop-header-content {
  background: #eaeaea;
}
.shop-header-content h1 {
  color: #fff;
  font-size: 60px;
  letter-spacing: 3px;
  padding: 18px 0 14px 0;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.shop-title {
  background: #253539;
}
.shop-header-title-smaller {
  font-size: 60%;
}
.shop-header-row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border-top: 2px solid #253539;
  border-bottom: 2px solid #253539;
}
.shop-header-lft {
  width: 65.4%;
  display: inline-block;
}
.shop-header-rgt {
  width: 32.97%;
  border-left: 2px solid #253539;
}
.shop-header-rgt-content {
  padding: 30px 22px 30px 22px;
}
.shop-header-rgt-content p {
  color: #253539;
  font-size: 18px;
  padding-bottom: 15px;
  font-weight: 300;
}
.shop-header-rgt-content h2 {
  color: #253539;
  font-size: 30px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 15px;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.shop-header-rgt-content h3 {
  color: #253539;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "AkrobatBold";
  font-weight: normal;
  margin-bottom: 10px;
}

.shop-details-container {
  padding: 0 45px;
}
.shop-details-content {
  background: #eaeaea;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border-top: 2px solid #253539;
}
.shop-details-lft {
  width: 34.59%;
}
.shop-details-lft-container {
  padding: 0 10px 10px 12px;
}
.shop-details-lft-container h2 {
  color: #253539;
  font-size: 30px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 18px 10px 14px 10px;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.shop-details-lft-table {
  padding: 16px 0 20px 0;
}
.shop-details-lft-row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.icon {
  margin: 0 3px 3px 0;
}
.shop-details-rgt {
  background: #eaeaea;
  width: 65.4%;
  border-left: 2px solid #253539;
}
.shop-details-map h2 {
  color: #253539;
  font-size: 30px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 16px 10px 17px 16px;
  font-family: "AkrobatMedium";
  font-weight: normal;
}

/*----------------------*/
/*  services            */
/*----------------------*/
.services-wrapper {
  overflow: hidden;
}

.services-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.services-col {
  width: 25%;
  padding: 0 0 7px 6px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.service-bloc {
  width: 100%;
  height: 100%;
  background: #eaeaea;
  padding: 10px 9px 30px 9px;
  position: relative;
  display: table;
}
.service-top {
  margin-bottom: 18px;
  display: table;
}
.service-img {
  display: table-cell;
}
.service-img img {
  width: 80px;
  max-width: 80px;
  height: auto;
  margin: 0 0;
  float: left;
}
.service-title {
  padding: 0;
  display: table-cell;
  vertical-align: top;
}
.service-title h2 a {
  color: #253539;
  font-size: 25px;
  line-height: normal;
  display: inline-block;
  vertical-align: text-top;
  text-align: left;
  font-family: "AkrobatMedium";
}
.service-description-area {
  display: block;
  padding-bottom: 26px;
}
.service-description-area small {
  width: auto;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  letter-spacing: 2px;
  color: #253539;
  font-size: 15px;
  font-family: "AkrobatLight";
}
.service-description-area h3 {
  max-width: 190px;
  color: #253539;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 18px;
  padding-bottom: 1px;
  text-transform: uppercase;
  font-family: "AkrobatBold";
  font-weight: normal;
}
.service-description-area p {
  color: #253539;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 18px;
  text-transform: uppercase;
}

.service-details-intro-wrapper {
  padding: 0 0 7px 6px;
}
.service-details-intro {
  background: #eaeaea;
  min-height: 220px;
}
.service-details-intro h1 {
  padding: 18px 10px 14px 23px;
}
.service-details-intro p {
  padding-right: 14px;
}
.service-details-intro h1,
.service-details-intro h2,
.service-details-intro p {
  color: #253539;
}
.service-details-intro img {
  padding: 18px 10px 14px 23px;
}
.service-shop-list-wrapper {
  overflow: hidden;
}
.service-shop-list-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.service-shop-list-col {
  width: 33.33%;
  padding: 0 0 7px 6px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.service-shop-list-shop-bloc {
  width: 100%;
  height: 100%;
  background: #eaeaea;
  padding: 10px 9px 30px 9px;
  position: relative;
  display: table;
}
.service-shop-list-shop-bloc h2 {
  padding-top: 5px;
  color: #253539;
  font-size: 14px;
  font-family: "AkrobatMedium";
}
.service-shop-list-shop-bloc p {
  font-family: "AkrobatLight";
  color: #253539;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 18px;
}
.service-shop-list-shop-bloc p a {
  color: #253539;
  font-size: 14px;
  line-height: normal;
  font-family: "AkrobatMedium";
}

/*----------------------*/
/*  videos              */
/*----------------------*/
.videos-wrapper {
  overflow: hidden;
}
.videos-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.videos-col {
  width: 33.33%;
  padding: 0 0 7px 6px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.video-bloc {
  width: 100%;
  height: 100%;
  background: #fefefe;
  padding: 10px 9px 30px 9px;
  position: relative;
  display: table;
}
.video-bloc h2 {
  padding-top: 5px;
  color: #253539;
  font-size: 14px;
  font-family: "AkrobatMedium";
}
.video-bloc p {
  font-family: "AkrobatLight";
  color: #253539;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 18px;
  text-transform: uppercase;
}

/*----------------------*/
/*  events              */
/*----------------------*/
.events-intro-wrapper {
  padding: 0 0 7px 6px;
}
.events-intro {
  background: #eaeaea;
}
.events-intro h1 {
  padding: 18px 10px 14px 23px;
}
.events-intro p {
  padding-right: 14px;
}
.events-intro h1,
.events-intro h2,
.events-intro p {
  color: #253539;
}
.events-wrapper {
  overflow: hidden;
}
.events-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.events-col {
  width: 32.33%;
  float: left;
  margin-left: 1%;
  overflow: hidden;
  position: relative;
}
.events-col-img {
  width: 100%;
  margin-bottom: 15px;
}
.event-bloc {
  position: absolute;
  bottom: 20%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  height: 35%;
}
.event-bloc h2 {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 20px;
  color: #50af47;
  font-size: 25px;
  line-height: normal;
  font-family: "AkrobatBold";
  font-weight: normal;
  position: relative;
}
.event-bloc h2 a {
  text-decoration: none;
  color: #fff;
}
.event-bloc h3 {
  padding: 0 0 5px 20px;
  color: #50af47;
  font-size: 15px;
  line-height: normal;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.event-bloc h3 a {
  text-decoration: none;
  color: #fff;
}
.event-bloc p {
  margin: 0 0 15px 20px;
  text-decoration: none;
  color: #50af47;
}
.event-bloc p a {
  text-decoration: none;
  color: #50af47;
}
.events-details-btn {
  padding: 0 0 15px 20px;
}
.events-details-btn a {
  display: block;
  background: #4d4a4a;
  width: 130px;
  height: 33px;
  line-height: 33px;
  color: #50af47;
  font-size: 12px;
  margin-top: 10px;
  padding: 0 10px;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "AkrobatMedium";
}

.event-details-wrapper {
  overflow: hidden;
  padding: 0 0 7px 0;
}
.event-details-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #eaeaea;
  padding-top: 10px;
}
.event-details-area h3 {
  padding-top: 10px;
  padding-bottom: 5px;
  color: #253539;
  font-size: 15px;
  line-height: normal;
  font-family: "AkrobatMedium";
  font-weight: normal;
  text-transform: uppercase;
  font-size: 25px;
}
.event-details-area h2 {
  color: #253539;
  padding-left: 20px;
}
.event-details-area h3,
.event-details-area p {
  color: #253539;
}
.event-details-title {
  width: 100%;
}
.event-details-intro {
  width: 100%;
  padding: 0 20px 15px 20px;
}
.event-details-intro h2 {
  padding-left: 0px;
}
.event-details-intro img {
  float: left;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}
.event-details-intro p {
  color: #253539;
  font-family: "AkrobatRegular", sans-serif;
  font-weight: 400;
  align-items: center;
  padding: 0;
}
.event-details-intro ul {
  padding-left: 20px; /* Ajout d'un retrait pour une meilleure structure */
  margin-top: 10px;
  margin-bottom: 10px;
}
.event-details-intro li {
  color: #253539;
  font-family: "AkrobatRegular", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 5px; /* Espacement entre les éléments */
  list-style-type: disc; /* Utilisation des puces classiques */
}
.event-details-picture {
  float: right;
  width: 40%;
}
.event-details-list {
  width:100%;
  padding-left:20px;
}
.event-details-list ul {
  list-style-type:disc;
  padding-left: 20px;
  color:black;
}
.event-videos-area {
  padding: 0 20px 15px 20px;
  width: 100%;
  height: auto;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 0px;
  padding: 20px;
}

.brand-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* This pushes the content to both ends */
  align-items: center;
  background: #eaeaea;
  border: 1px solid #e0e0e0;
  border-bottom: none;
  border-right: none;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and box-shadow */
}

.brand-product-card:hover {
  transform: scale(1.03); /* Slightly scale up the card */
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Increased shadow for lifted effect */
}

.brand-product-grid > .family-product-card:nth-child(odd) {
  border-right: 1px solid #e0e0e0;
}

.brand-product-grid > .family-product-card:nth-child(odd) {
  border-right: 1px solid #e0e0e0;
}

.brand-product-grid > .family-product-card:nth-last-child(-n+2) {
  border-bottom: 1px solid #e0e0e0;
}

/* Image styling */
.brand-product-card img {
  max-width: 100%;
  width: 100%;
  display: block;
  margin-top: auto; /* This pushes the image to the bottom of the flex container */
  padding: 10px; /* This adds space around the image; adjust the value as needed */
  box-sizing: border-box; /* This ensures the padding is included in the total width and height */
}

/* Title and description container */
.brand-product-info {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* Assurez-vous que la div prend toute la largeur de l'image */
  padding: 0;
  background: rgba(0, 0, 0, 0.5); /* Noir semi-transparent */
  margin: 0; /* Annuler les marges par défaut */
}

.brand-product-info h2 {
  margin: 0;
  padding: 0;
}


.brand-product-info h3 {
  color: #fff;
  padding: 10px 0;
}

/* Product title */
.brand-product-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

/* Product description */
.brand-product-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

/* Price styling */
.brand-product-price {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 15px;
}

.family-title {
  width: 100%;
}

.family-title h3 {
  font-size: 23px;
  padding: 15px 0 0 20px;
}

.family-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0px;
  padding: 20px;
}

.family-product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* This pushes the content to both ends */
  align-items: center;
  background: #eaeaea;
  border: 1px solid #e0e0e0;
  border-bottom: none;
  border-right: none;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and box-shadow */
}

.family-product-card:hover {
  transform: scale(1.03); /* Slightly scale up the card */
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Increased shadow for lifted effect */
}

.family-product-grid > .family-product-card:nth-child(odd) {
  border-right: 1px solid #e0e0e0;
}

.family-product-grid > .family-product-card:nth-child(odd) {
  border-right: 1px solid #e0e0e0;
}

.family-product-grid > .family-product-card:nth-last-child(-n+2) {
  border-bottom: 1px solid #e0e0e0;
}

/* Image styling */
.family-product-card img {
  max-width: 100%;
  display: block;
  margin-top: auto; /* This pushes the image to the bottom of the flex container */
  padding: 10px; /* This adds space around the image; adjust the value as needed */
  box-sizing: border-box; /* This ensures the padding is included in the total width and height */
}

/* Title and description container */
.family-product-info {
  padding: 15px;
  text-align: center;
}

.family-product-info h2 {
  margin: 0;
  padding: 0;
}

/* Product title */
.family-product-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
  padding: 0;
}

/* Product description */
.family-product-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

/* Price styling */
.family-product-price {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 15px;
}

/*----------------------*/
/*  conseils            */
/*----------------------*/
.standard-page-details-wrapper {
  overflow: hidden;
  padding: 0 0 7px 6px;
}
.conseil-details-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #eaeaea;
  padding-top: 10px;
}
.conseil-details-area h3 {
  padding-top: 10px;
  padding-bottom: 5px;
  color: #253539;
  font-size: 15px;
  line-height: normal;
  font-family: "AkrobatMedium";
  font-weight: normal;
  text-transform: uppercase;
}
.conseil-details-area h2,
.conseil-details-area h3,
.conseil-details-area p {
  color: #253539;
}

.conseil-details-intro {
  padding: 0 20px 15px 20px;
  width: 100%;
}
.conseil-details-intro h2 {
  padding-left: 0px;
}
.conseil-details-intro img {
  float: right;
  padding-right: 10px;
}
.conseil-details-intro p,
.conseil-details-intro ol {
  color: #253539;
  font-family: "AkrobatRegular", sans-serif;
  font-weight: 400;
  align-items: center;
  padding: 0;
}

/*----------------------*/
/*  generic classes     */
/*----------------------*/
.white-background-wrapper {
  background: #fff;
}
.white-background-wrapper h1 {
  color: #253539;
}
.three-columns-wrapper {
  overflow: hidden;
}
.three-columns-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.three-columns-col {
  width: 33%;
  padding: 0 0.5% 7px 0.5%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.three-columns-middle-bloc {
  margin: 0 0.5%;
}
.three-columns-bloc {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 10px 9px 30px 9px;
  position: relative;
  display: table;
}
.three-columns-bloc.grey {
  background-color: #eaeaea;
}

.three-columns-bloc h2 {
  padding-top: 5px;
  color: #253539;
  font-size: 25px;
  line-height: normal;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.three-columns-bloc h3 {
  padding: 5px;
  color: #253539;
  line-height: normal;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.three-columns-bloc p {
  text-decoration: none;
  color: #253539;
}
.three-columns-bloc-content {
  padding: 0 0 15px 20px;
}
.three-columns-bloc-content img {
  float: left;
  padding-right: 10px;
}
.three-columns-bloc-content p a {
  text-decoration: none;
  color: #253539;
}
/*vertical menu begin*/
.menu-border {
  position: relative;
}
.mainnav ul li ul {
  width: 300px;
  left: -31px;
}
.mainnav .menu-border ul li {
  float: none;
  display: block;
}
/*vertical menu end*/
.shop-slider .owl-carousel .owl-item img {
  margin: auto;
  width: auto;
}
.homepage-video {
  width: 33%;
  display: inline-block;
  vertical-align: top;
  margin: 0;
}
.homepage-video:first-child {
  float: left;
  margin-right: 0.5%;
}
.homepage-video:last-child {
  float: right;
  margin-left: 0.5%;
}

.cropper-submit-btn {
  background: #253539;
  width: 100%;
  height: 33px;
  color: #50af47;
  font-size: 15px;
  line-height: 33px;
  padding: 6px 10px;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "AkrobatMedium";
}

.datepicker {
  background-color: #253539;
  color: #fff;
}

.slick-list {
  width: 100%;
}
/*** CHECBOXES ***/

/* Customize the label (the container) */
.cbox-container {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 14px;
  font-size: AkrobatRegular;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.cbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  width: 10px;
  background-color: white;
  border: 1px solid black;
  margin: 3px;
}

/* On mouse-over, add a grey background color */
.cbox-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cbox-container input:checked ~ .checkmark {
  background-color: #50af47;
}

/* Style the checkmark/indicator */
.cbox-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*** PRICE SELECTOR ***/

.ui-widget-header {
  background: #50af47 !important;
}
.ui-state-active {
  background: #50af47 !important;
}

/*** LOADER ***/

.loader {
  margin: 20px auto;
  border: 16px solid #dddddd; /*f3f3f3*/
  border-radius: 50%;
  border-top: 16px solid #50af47;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  text-align: center;
}

.loading {
  background: transparent url("/images/loading.gif") center/20% no-repeat;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.disabled-filter {
  pointer-events: none;
  color: rgb(120, 120, 120) !important;
}

.disabled-filter .checkmark {
  border-color: rgb(120, 120, 120);
  background-color: rgb(180, 180, 180);
}

.zoom img {
  position: relative;
  z-index: 5;
}

/* .loupe {
  width: 200px;
  height: 200px;
  border: solid 10px #50af47;
  border-radius: 150px;
  position: absolute;
  top: 0px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.loupe:hover {
  cursor: none;
}
 */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background: linear-gradient(to right, #555, black);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -97px;
  right: 111%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.veloland-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 10px auto;
  padding: 15px;
  background: #ffffff;
  color: #008000;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  border: 2px solid #008000;
  border-radius: 5px;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.veloland-btn:hover {
  background: #008000;
  color: #fff;
  border-color: #008000;
}

/*----------------------*/
/*  Catalog classes     */
/*----------------------*/
.size-list .cadre {
  margin-right: 10px;
}
.size-list a {
  color: inherit;
  transition: none;
}
.size.disabled,
.size.selected.disabled {
  color: grey;
  background-color: transparent !important;
}
.size.disabled:hover {
  background-color: transparent;
  cursor: default;
  color: grey;
}

.catalogue-body.details {
  background-color: #253539;
}
.catalogue-body.details .fa-brands {
  position: relative;
}

.catalogue-body .bulls-con h1,
.catalogue-body .centered-div h1,
.catalogue-body .centered-div p,
.catalogue-body .temoignage {
  color: white;
}

.temoignages {
  margin-bottom: 60px;
}

.temoignage {
  border: 1px solid #253539;
  display: flex;
  width: 85%;
  margin-bottom: 20px;
  background-color: white;
  position: relative;
}
.temoignage.revert {
  flex-direction: row-reverse;
  text-align: right;
  margin-left: 15%;
}

.temoignage-content {
  padding: 10px 20px;
  font-size: 16px;
  width: 70%;
  background-color: #fefefe;
}
.temoignage-content h3 {
  font-size: 18px;
  padding-bottom: 20px;
}
.temoignage-content p {
  padding-bottom: 30px;
}
.temoignage img {
  width: 100%;
}
.temoignage-img {
  width: 30%;
  max-width: 400px;
}
.temoignage .author {
  position: absolute;
  bottom: 0px;
}

.table-info {
  color: white;
}

#catalog-anchor {
  position: relative;
  left: 50px;
  top: 20px;
}
#justified-gallery {
  width: 100%;
  text-align: center;
  padding: 20px 45px;
  border-bottom: 2px solid white;
  height: auto !important;
}

#justified-gallery img {
  display: inherit;
}

.avantages {
  display: flex;
  margin-top: 30px;
}
.avantages p {
  margin-top: 5px;
  font-size: 18px;
  color: #253539;
}
.avantages i {
  color: #50af47;
  font-size: 40px;
}
.avantage {
  text-align: center;
  width: 33.33%;
  padding: 0 10px;
}
li.selected {
  background-color: #50af47 !important;
  color: white;
}

.brand-title-small {
  margin-top : 30px;
}
.brand-title-small h1 {
  font-size: 40px;
}
.brand-column {
  width: 32%;
}
.brand-column-small {
  margin: 0 20px 30px 0;
  width: 12%;
}

/*-------------------------------------*/
/*  Styles for news pages              */
/*-------------------------------------*/
.actus-intro-wrapper {
  padding: 0 0 7px 6px;
}
.actus-intro {
  background: #eaeaea;
}
.actus-intro h1 {
  padding: 18px 10px 14px 23px;
}
.actus-intro p {
  padding-right: 14px;
}
.actus-intro h1,
.actus-intro h2,
.actus-intro p {
  color: #253539;
}
.actus-wrapper {
  overflow: hidden;
}
.actus-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.actus-col {
  width: 32.33%;
  float: left;
  margin-left: 1%;
  overflow: hidden;
  position: relative;
}
.actus-col-img {
  width: 100%;
  margin-bottom: 15px;
}
.actu-bloc {
  position: absolute;
  bottom: 20%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
}
.actu-bloc h2 {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 20px;
  color: #50af47;
  font-size: 25px;
  line-height: normal;
  font-family: "AkrobatBold";
  font-weight: normal;
  position: relative;
}
.actu-bloc h2 a {
  text-decoration: none;
  color: #fff;
}
.actu-bloc h3 {
  padding: 0 0 5px 20px;
  color: #50af47;
  font-size: 15px;
  line-height: normal;
  font-family: "AkrobatMedium";
  font-weight: normal;
}
.actu-bloc h3 a {
  text-decoration: none;
  color: #fff;
}
.actu-bloc p {
  margin: 0 0 15px 20px;
  text-decoration: none;
  color: #50af47;
}
.actu-bloc p a {
  text-decoration: none;
  color: #50af47;
}
.actus-details-btn {
  padding: 0 0 15px 20px;
}
.actus-details-btn a {
  display: block;
  background: #4d4a4a;
  width: 130px;
  height: 33px;
  line-height: 33px;
  color: #50af47;
  font-size: 12px;
  margin-top: 10px;
  padding: 0 10px;
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-family: "AkrobatMedium";
}

.actu-details-wrapper {
  overflow: hidden;
  padding: 0 0 7px 6px;
}
.actu-details-area {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #eaeaea;
  padding-top: 10px;
}
.actu-details-area h3 {
  padding-top: 10px;
  padding-bottom: 5px;
  color: #253539;
  font-size: 15px;
  line-height: normal;
  font-family: "AkrobatMedium";
  font-weight: normal;
  text-transform: uppercase;
  font-size: 25px;
}
.actu-details-area h2 {
  color: #253539;
  padding-left: 20px;
}
.actu-details-area h3,
.actu-details-area p {
  color: #253539;
}
.actu-details-title {
  width: 100%;
}
.actu-details-intro {
  width: 100%;
  padding: 0 20px 15px 20px;
}
.actu-details-intro h2 {
  padding-left: 0px;
}
.actu-details-intro img {
  float: left;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}
.actu-details-intro p {
  color: #253539;
  font-family: "AkrobatRegular", sans-serif;
  font-weight: 400;
  align-items: center;
  padding: 0;
}
.actu-details-picture {
  float: right;
  width: 40%;
}
.actu-videos-area {
  padding: 0 20px 15px 20px;
  width: 100%;
  height: auto;
}


/*-------------------------------------*/
/*  Styles for configurator            */
/*-------------------------------------*/

/* Container principal de l'écran d'accueil */
.configurator-home-container {
  /* Ici, tu peux décider de la hauteur : plein écran, ou juste un grand bloc */
  min-height: calc(100vh - 64px); /* Ex : occupe la hauteur visible, moins la barre header */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #253539; /* Cohérent avec l'identité du site */
  color: #fff; /* Pour que le texte ressorte */
  text-align: center;
  position: relative;
  padding: 20px; /* Marge intérieure */
}

/* Contenu interne (pour centrer verticalement si besoin) */
.configurator-home-content {
  max-width: 1200px; /* Largeur max, selon ton design */
  margin: 0 auto;
  width: 100%;
}

/* Titre principal */
.configurator-home-content h1 {
  font-size: 2rem;
  margin-bottom: 2rem;
  font-family: "AkrobatBold", sans-serif; /* Ajuste selon ta police */
  letter-spacing: 1px;
}

/* Wrapper pour les 3 profils */
.configurator-profiles {
  display: flex;
  gap: 2rem;         /* Espace horizontal entre les blocs */
  flex-wrap: wrap;   /* Pour que les blocs passent à la ligne en mobile */
  justify-content: center;
}

/* Bloc commun à chaque profil */
.profile-box {
  background-color: #50af47;       /* Couleur d’arrière-plan (vert Veloland) */
  border: 2px solid #fff;         /* Liseré blanc pour le contraste */
  border-radius: 8px;
  padding: 1rem;
  width: 250px;                   /* Largeur fixe indicative */
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  display: flex;
  flex-direction: column;         /* Permet de placer le bouton en bas */
  align-items: center;
  justify-content: space-between;
}

/* Au survol, on ajoute un léger effet */
.profile-box:hover {
  background-color: #42873c;
  transform: scale(1.03);
}

/* Images */
.profile-box img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Titres de chaque bloc */
.profile-box h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  font-family: "AkrobatBold", sans-serif;
  letter-spacing: 0.5px;
  color: #fff;
}

/* Paragraphe descriptif */
.profile-box p {
  font-size: 0.9rem;
  font-family: "AkrobatRegular", sans-serif;
  margin-bottom: 1rem;
  color: #fff;
}

/* Bouton “Commencer” */
.profile-box button {
  background-color: #fff;
  color: #253539;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-family: "AkrobatMedium", sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin-top: auto; /* Pour “pousser” le bouton en bas du bloc si besoin */
}

/* Hover du bouton */
.profile-box button:hover {
  background-color: #253539;
  color: #fff;
}

/*-------------------------------------*/
/*  Styles for configurator step 2     */
/*-------------------------------------*/
.configurator-step2-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
}

.configurator-step2-choices {
  flex: 1 1 45%;
  background: #f8f8f8;
  padding: 1rem;
  border-radius: 8px;
}

.configurator-step2-choices h2 {
  color: #000;
}

.configurator-step2-video p {
  color: #000;
}

.configurator-step2-postal label {
  color: #000;
}

.configurator-step2-results {
  flex: 1 1 50%;
  background: #fff;
  padding: 1rem;
  border-radius: 8px;
  min-height: 300px;
}

.configurator-step2-results h2 {
  color: #000;
}

.configurator-step2-results h2.bikeresults {
  display: none;
}

.configurator-step2-results .catalogresults {
  display: none;
}

.configurator-step2-results h3.catalogresults {
  font-size: 25px;
  margin-bottom: 1rem;
}

.configurator-step2-results h3.catalogresults a{
  text-decoration: underline;
  color:#000;
  font-weight: normal;
}

.configurator-step2-results h3.catalogresults a:hover{
  color: #50af47;
  font-size: 27px;
  font-weight: bold;
}

.configurator-step2-choice-group {
  margin-bottom: 2rem;
}

.configurator-step2-choice-cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap; /* ✅ empêche les cartes de passer à la ligne */
}

.configurator-step2-choice-card {
  position: relative;
  width: 50%; /* ✅ chaque carte prend la moitié de l’espace */
  background-color: #50af47;
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

.configurator-step2-checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

.configurator-step2-choice-card.active .configurator-step2-checkmark {
  opacity: 1;
  animation: checkWheelIn 0.6s ease-out forwards;
}

@keyframes checkSlideIn {
  0% {
    transform: translate(-150%, -50%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes checkWheelIn {
  0% {
    transform: translate(-150%, -50%) rotate(-720deg);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
}

.configurator-step2-choice-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.configurator-step2-choice-card:hover,
.configurator-step2-choice-card.active {
  background-color: #42873c;
}

.configurator-step2-postal-suggestions {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  z-index: 99;
}

.configurator-step2-postal-suggestions div {
  padding: 8px;
  cursor: pointer;
}

.configurator-step2-postal-suggestions div:hover {
  background-color: #eee;
}

.configurator-step2-bike-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.configurator-step2-bike-card {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 6px;
}

.configurator-step2-bike-card h3 {
  color: #000;
}

.configurator-step2-bike-card p {
  color: #000;
}

.configurator-step2-video {
  margin-top: 2rem;
}

.configurator-step2-postal {
  margin-top: 1.5rem;
}

#postal-code {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#btn-find-store {
  padding: 0.75rem 1.5rem;
  background-color: #50af47;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

#btn-find-store:hover {
  background-color: #42873c;
}

.configurator-step2-stores li {
  list-style: none;
  color:#000;
}


/*-------------------------------------*/
/*  Styles for promo bloc on homepage  */
/*-------------------------------------*/
.homepage-promo-bloc {
  position: relative;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  overflow: hidden;
}

.homepage-promo-bloc img {
  width: 100%;
  height: auto;
  display: block;
}

.homepage-overlay-text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: left;
  max-width: 50%;
}

.homepage-overlay-text h1 {
  display: inline-block;
  padding: 0px 20px 5px 20px;
  background: #aaaaaa;
}

.homepage-overlay-text .homepage-highlight {
  position: absolute;
  top: 90px;
  right: -5%;
  padding: 5px 30px 5px 20px;
  font-size: 4rem;
  display: inline-block;
  background: #50af47;
  font-style: italic;;
}

.homepage-discount-container {
  display: flex;
  align-items: center;
  gap: 10px; /* Espacement entre "JUSQU'À" et "-50%" */
  justify-content: flex-end;
  margin-top: 90px; /* Décale le bloc vers le bas */
  width: 100%;
}

.homepage-discount-container span {
  display: inline-block;
}

.homepage-discount-label {
  font-size: 3rem;
  font-weight: bold;
}

.homepage-discount {
  font-size: 4rem;
  font-style: italic;
  background: #50af47;
  color: white;
  padding: 5px 25px 5px 15px;
}

.homepage-promo-other-text {
  color: white;
  font-size: 1.5rem;
}

.homepage-subtext {
  font-size: 2rem;
  font-weight: bold;
  font-style: italic;
}

.homepage-conditions {
  position: absolute;
  bottom: 30%; /* Ajuste la distance par rapport au bas */
  right: 20px; /* Ajuste la distance par rapport à la droite */
  font-size: 1.5rem; /* Ajuste la taille du texte */
  color: white; /* S'assure qu'il reste bien visible */
  font-weight: bold;
  font-style: italic;
}

/*-------------------------------------*/
/*  Styles for promo page              */
/*-------------------------------------*/

/* Promo Home Container */
.promo-home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Promo Home Content */
.promo-home-content {
  width: 100%;
  background: #fefefe;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

.promo-home-content .veloland-btn {
  font-size: 24px;
}

.promo-header {
  background: url('/images/header-bg.jpg') no-repeat center center;
  background-size: cover;
  padding: 40px;
  color: black;
}

.promo-header h1 {
  color: black;
}

.promo-header h2 {
  color: black;
}

.promo-header p {
  color: black;
}

.promo-store {
  margin: 20px 0;
}

.promo-store p {
  color: black;
}

.promo-store h2 {
  color: #0055A4;
}

.promo-bikes {
  margin: 30px 0;
}

.promo-bikes h2 {
  color: black;
}

.promo-bikes p {
  color: #0055A4;
}

.bikes-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.promo-bike {
  width: 45%; /* Augmente la taille des cartes pour mieux occuper l'espace */
  min-width: 280px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.promo-bike a {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 20px;
}

.promo-bike:hover {
  transform: scale(0.95);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.promo-bike img {
  display: block;
  margin: 0 auto;
  width: 100%;
  border-radius: 5px;
}

.promo-bike-name {
  color: black;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0;
}

.promo-bike-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.bike-price {
  font-size: 22px;
  font-weight: bold;
  color: green;
  margin-top: 10px;
}

.old-price {
  position: relative;
  color: red;
  font-size: 20px;
  margin-right: 10px;
}

.old-price::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: red;
  transform: rotate(-10deg);
}

.new-price {
  font-size: 28px;
  font-weight: bold;
  color: green;
}

.promo-extra {
  margin: 20px 0;
}

.promo-list {
  background: white;
  color: black;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  margin: 30px 0;
  font-size: 18px;
}

.promo-list p {
  color: black;
  margin: 10px 0;
  font-size: 20px;
  font-weight: bold;
}

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

.promo-list ul li {
  font-size: 18px;
  margin: 5px 0;
  padding-left: 10px;
  text-align: center;
}

.btn-large {
  font-size: 1.2em;
  padding: 15px 25px;
}

.promo-footer {
  margin-top: 30px;
  font-size: 1.1em;
}

.promo-footer p {
  color: black;
}

.promo-link a {
  color: #0055A4; /* Bleu Veloland */
  font-size: 18px;
  font-weight: bold;
  text-decoration: underline;
  display: block;
  text-align: center;
  margin-top: 10px;
  transition: color 0.3s ease-in-out;
}

.promo-link a:hover {
  color: #003366; /* Bleu plus foncé au survol */
  text-decoration: none;
}


/* Lightbox styles */
.lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.lightbox.is-open {
    display: flex;
}

.lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    margin: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__image {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    border-radius: 4px;
    background: #000;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.8rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__close {
    top: -50px;
    right: 0;
}

.lightbox__prev {
    left: -50px;
}

.lightbox__next {
    right: -50px;
}

@media (max-width: 768px) {
    .lightbox__prev {
        left: 10px;
    }
    .lightbox__next {
        right: 10px;
    }
    .lightbox__close {
        top: 10px;
        right: 10px;
    }
}

/* Prevent body scroll when lightbox is open */
body.has-lightbox-open {
    overflow: hidden;
}

/*-------------------------------------*/
/*  Styles for occasions pages         */
/*-------------------------------------*/
.occasions-container {
  padding: 0 45px;
  padding-bottom: 15px;
  overflow: hidden;
}

.occasions-content h1 {
  color: white;
  font-size: 35px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 18px 10px 14px 0px;
  font-family: "AkrobatBold";
  font-weight: normal;
  margin-bottom: 20px;
}
.occasions-title-smaller {
  font-size: 60%;
}
.occasions-row {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.occasions-lft {
  width: 67.02%;
  background-color: #fff;
}
.occasions-lft .div-title {
  margin: 20px 50px;
  display: flex;
  justify-content: space-between;
}
.occasions-lft .div-title,
.occasions-lft .div-title h1 {
  color: #253539;
  margin-bottom: 0;
}
.occasions-lft .div-title table td,
.occasions-lft .div-title table th {
  font-size: 25px;
}
.occasions-lft .div-title img {
  height: 130px;
}
.occasions-rgt {
  width: 32.97%;
  border-left: 2px solid #253539;
  background-color: #253539;
}

@media screen and (max-width: 980px) {
  .occasions-lft,
  .occasions-rgt {
    width: 100%;
    border: none;
  }
  .occasions-rgt {
    margin-top: 20px;
  }
}

/* Occasions gallery layout */
.occasions-product-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.occasions-product-main {
    text-align: center;
}

.occasions-product-main img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.occasions-product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center; /* center thumbnails horizontally */
}

.occasions-product-thumb {
    display: block;
    flex: 0 0 calc(15% - 0.5rem); /* 6 per row on desktop */
    cursor: pointer;
}

.occasions-product-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border: 1px solid #eee;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.occasions-product-thumb.is-active img {
    border-color: #50AF47;
    box-shadow: 0 0 0 2px rgba(80,167,71,0.3);
}

.occasions-product-thumb:hover img {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .occasions-product-thumb {
        flex: 0 0 calc(33.333% - 0.5rem); /* 3 per row on mobile */
    }
}