/** TEMPLATE CUSTOM FONTS **/

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 20, 2012 06:04:25 AM America/New_York */

/* add your own custom fonts here */

@font-face {
  font-family: 'Titillium Web';
  src: url('../webfonts/Titillium_Web/TitilliumWeb-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../webfonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --black: #000;
  --white: #FFF;
  --brand-trout: #474A57;
  --primary-trout-50: #F7F8F8;
  --primary-trout-100: #EDEDF1;
  --primary-trout-200: #D8DADF;
  --primary-trout-300: #B6B9C3;
  --primary-trout-400: #8E93A2;
  --primary-polo-blue-50: #F3F8FB;
  --primary-polo-blue-100: #E5ECF4;
  --primary-polo-blue-200: #D1DFEC;
  --primary-polo-blue-300: #B1CADF;
  --primary-polo-blue-600: #5D7EB3;
  --primary-polo-blue-500i: #7A9CC6;
  --primary-polo-blue-800i: #475A86;
  --primary-polo-blue-900i: #283043;
  --primary-roman-100: #FDE3E3;
  --primary-roman-500i: #E84E50;
  --primary-roman-600: #D42E30;
  --primary-roman-700: #B22325;
  --secondary-tropical-blue-50: #F1F7FD;
  --secondary-tropical-blue-100: #DEECFB;
  --secondary-tropical-blue-500: #4D93E4;
  --secondary-tropical-blue-700: #2F63C6;
  --secondary-salomie-100: #FEEBCB;
  --secondary-salomie-500: #DD6B20;
  --secondary-salomie-600: #E78619;
  --secondary-salomie-700: #CC6413;
  --secondary-dark: #2E0101;
  --success-100: #E1F7E6;
  --success-500: #63C578;
  --success-700: #276E37;
  --feedback-success-100: #E1F7E6;
  --feedback-success-500: #3EA955;
  --feedback-success-800: #23582F;
  --error-300: #FDA29B;
  --error-500: #F04438;
  --gradient-pinky: radial-gradient(159.63% 150.92% at -0.1% 100%, #D65955 0%, #FC87A3 100%);
  --white-alpha-600: rgba(255, 255, 255, 0.48);
  --no-padding: 0;
  --padding-xs: 8px;
  --padding-sm: 11px;
  --padding-sm-double: calc(var(--padding-sm) *2);
  --padding-md: 16px;
  --padding-lg: 32px;
  --padding-xl: 56px;
  --no-gap: 0;
  --gap-xs: 4px;
  --gap-sm: 6px;
  --gap-md: 12px;
  --gap-lg: 24px;
  --gap-xl: 32px;
  --no-border: 0;
  --input-height: 48px;
  --line-height-sm: 21px;
  --line-height-md: 24px;
  --line-height-lg: 28px;
  --radius-lg: 18px;
  --radius-50: 999px;
}

/** BREAKPOINTS / RESPONSIVE **/

/*Breakpoint 1 : smartphone
De 360 (Résolution minimale mobile) à 767 pixels de large*/
@media screen and (max-width: 767px) {
  main {
    /*width: 360px;
    margin: auto;
    padding: 0 24px;*/
    max-width: 375px;
    margin: auto;
    padding: 0 var(--padding-md);
  }
}

/*Breakpoint 2 : Tablette Portrait – Ou PC avec navigateur fenêtré
De 768 à 999 pixels de large*/
@media screen and (min-width: 768px) and (max-width: 999px) {
  main {
    width: 700px;
    margin: auto;
  }
}

/*Breakpoint 3 : Tablette Paysage – PC Laptop (Surface, micro PC…) – Et tout PC avec navigateur fenêtré
De 1000 à 1279 pixels de large*/
@media screen and (min-width: 1000px) and (max-width: 1279px) {
  main {
    width: 960px;
    margin: auto;
  }
}

/*Breakpoint 4 : PC Full HD – Tablette grand format Paysage (iPad Pro 12′) – Et tout PC à plus haute définition avec navigateur fenêtré
De 1280 à 1599 pixels de large*/
@media screen and (min-width: 1280px) and (max-width: 1599px) {
  main {
    width: 1216px;
    margin: auto;
  }
}

/*Breakpoint 5 : PC 4K –  Et tout PC à plus haute définition avec navigateur fenêtré
Au delà de 1600 pix*/
@media screen and (min-width: 1600px) {
  main {
    width: 1360px;
    margin: auto;
  }
}

.uk-hidden, .uk-visible-small, .uk-hidden-empty:empty {
  display: none !important;
}
@media screen and (max-width: 999px) {
  .uk-hidden-small {
    display: none !important;
  }
  .uk-visible-small {
    display: flex !important;
  }
}

/** BASE TYPOGRPHY **/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
body, * {
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-height-md);
  color: var(--brand-trout);
  margin: 0;
  box-sizing: border-box;
  transition: 0.5s ease;
}
.large {
  font-size: 18px;
  line-height: var(--line-height-md);
}
.medium, .medium * {
  font-size: 16px !important;
  line-height: var(--line-height-md);
  font-family: "Open Sans" !important;
}
.small, .small * {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: var(--line-height-sm) !important;
}
.small.error {
  font-weight: 600;
}
.bold, .bold > * {
  color: var(--black);
  font-weight: 600 !important;
}
.grey {
  color: var(--primary-trout-400) !important;
}
.blue {
  color: var(--primary-polo-blue-500i) !important;
}
.red {
  color: var(--error-500) !important;
}

.display-row {
  display: flex;
  flex-direction: column;
}
.display-column {
  display: flex;
  flex-direction: row;
}
.display-left {
  align-items: flex-start;
  justify-content: flex-start;
}
.display-right {
  align-items: flex-end;
  justify-content: flex-end;
}
.display-block > * {
  display: block;
}
@media screen and (min-width: 768px) {
  .display-half {
    flex-wrap: wrap;
  }
  .display-half > * {
    width: 49%;
    /*flex: 1 0 0;*/
  }
  .display-three > * {
    width: 32%;
    /*flex: 1 0 0;*/
  }
}
@media screen and (max-width: 767px) {
  .display-half {
    flex-direction: column;
  }
  .display-half > * {
    width: 100%;
  }
  .display-three {
    flex-direction: column;
  }
  .display-three > * {
    width: 100%;
  }
}

div, button, a[type="button"] {
  display: flex; 
  align-items: center;
  flex-direction: row;
  justify-content: center;
  gap: var(--gap-md);
  position: relative;
}
div {
  width: 100%;
}
a {
  text-decoration: none;
  color: var(--primary-roman-500i);
  border-bottom: 1px solid var(--primary-roman-500i);
}
a:hover {
  color: var(--primary-roman-600);
  border-color: var(--primary-roman-600);
}
a:link { -webkit-tap-highlight-color: #b80000 } /* this sets the highlight color when links are tapped on Safari (browser) on iPhone */

button, a {
  cursor: pointer;
  padding: 0;
  background: transparent;
}
*:focus {
  outline: none;
}

strong {
  font-weight: 600;
}

ul {
  list-style-type: none;
  padding-left: initial;
}
ul li {
  position: relative;
  padding-left: var(--padding-md) !important;
  list-style: none;
}
ul li:before {
  position: absolute;
  display: block !important;
  content: "";
  top: 4px;
  left: 0;
  width: 6px;
  height: 16px;
  background-color: #e84e50;
  border-top-left-radius: 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 4px;
}

/* HEADERS */
h1, h2, h3, h4, h5, h6,
h1 > *, h2 > *, h3 > *, h4 > *, h5 > *, h6 > * {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 300;
  margin: 0;
}
h1, h1 > * { font-size: 72px; line-height: 80px; }
h2, h2 > * { font-size: 57px; line-height: 72px; }
h3, h3 > * { font-size: 46px; line-height: 56px; }
h4, h4 > * { font-size: 37px; line-height: 48px; }
h5, h5 > * { font-size: var(--line-height-lg); line-height: var(--padding-lg); }
h6, h6 > * { font-size: 22px; line-height: var(--line-height-lg); }
h6.title {
  /*font-size: 20px;
  line-height: var(--line-height-md);*/
  height: var(--padding-xl);
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--black);
}

@media screen and (max-width: 767px) {
  h1, h1 > * { font-size: 57px; line-height: 72px; }
  h2, h2 > * { font-size: 46px; line-height: 56px; }
  h3, h3 > * { font-size: 37px; line-height: 48px; }
  h4, h4 > * { font-size: var(--line-height-lg); line-height: var(--padding-lg); }
  h5, h5 > * { font-size: 22px; line-height: var(--line-height-lg); }
  /*h6, h6 > * { font-size: 37px; line-height: 48px; }*/
}

.subtitle-1, .subtitle-1 * {
  /* Subtitle/S1 */
  font-family: "Titillium Web" !important;
  color: var(--black) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: var(--line-height-md) !important;
}
@media screen and (max-width: 767px) {
  .subtitle-1, .subtitle-1 * {
    font-size: 16px !important;
    line-height: 20px !important;
  }
}

.field label, .subtitle-2 {
  /* Subtitle/S2 */
  font-family: "Titillium Web";
  color: var(--black);
  font-size: 18px;
  font-weight: 400;
  line-height: var(--line-height-md);
}

.field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--gap-sm);
}
.field input, .field select, .field textarea {
  display: flex;
  align-items: center;
  height: var(--input-height);
  padding: var(--padding-xs) var(--padding-sm);
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--primary-trout-100);
  background: var(--white);
  position: relative;
  color: var(--black);
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: 16px;
}
.field :focus {
  border-color: var(--primary-trout-300);
}
.field ::placeholder,  /* Modern browsers */
.field textarea:-moz-placeholder, /* Firefox 18- */
.field textarea::-moz-placeholder, /* Firefox 19+ */
.field textarea:-ms-input-placeholder, /* IE 10+ */
.field textarea::-webkit-input-placeholder, /* Webkit based */
{
  color: var(--primary-trout-400);
}
.field input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  padding: 0;
  min-width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--primary-polo-blue-200);
  align-self: center;
}
.field input[type="checkbox"]:not([disabled]) {
  cursor: pointer;
}
.field input[type="checkbox"][disabled] {
  background-color: var(--primary-polo-blue-100);
  border-color: var(--primary-polo-blue-100);
}
.field input[type="checkbox"]:checked {
  background-color: var(--secondary-tropical-blue-500);
  border-color: var(--secondary-tropical-blue-500);
}
.field input[type="checkbox"]:checked:after {
  content: url(/_resources/app/templates/images/white-tick.svg);
  display: block;
  position: absolute;
  line-height: 18px;
  top: -2px;
  left: 2px;
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}
.field input[type="date"]:before {
  content: url(/_resources/app/templates/images/calendar.svg);
  margin-right: 10px;
  margin-top: 6px;
}
.field.error input, .field.error select, .field.error textarea {
  border-color: var(--error-300);
}
.field:not(.error) .error {
  display: none;
}
.field.checkbox {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--gap-lg);
}
.field select {
  background-image: url(/_resources/app/templates/images/angle-down.svg);
  background-repeat: no-repeat;
  background-position: right 0.7em top 50%;
  cursor: pointer;
}
.field textarea {
  height: 124px;
  resize: none;
}
@media screen and (max-width: 767px) {
  .field.checkboxset .choices {
    flex-wrap: wrap;
    gap: var(--gap-xs);
  }
}
.field [disabled="true"] {
  background: var(--primary-trout-100);
  opacity: .6;
}

/** BUTTONS **/

/* default */
button, a[type="button"] {
  border: 0;
  gap: var(--gap-sm);
  cursor: pointer;
}
button, a[type="button"],
button > *, a[type="button"] > * {
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: var(--line-height-md);
}

/* size */
button[size="lg"], a[type="button"][size="lg"] {
  height: var(--input-height);
  padding: 0px var(--padding-sm);
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  border-radius: var(--radius-lg);
}
button[size="lg"]:has(> span), a[type="button"][size="lg"]:has(> span) {
  padding: 0px var(--line-height-md);
  border-radius: var(--radius-lg);
}
[size="md"] svg {
  width: 24px;
  height: 24px;
}
button[size="md"], a[type="button"][size="md"] {
  height: 44px;
  padding: 0px var(--padding-sm);
  border-radius: 16px;
}
button[size="md"]:has(> span), a[type="button"][size="md"]:has(> span) {
  padding: 0px var(--padding-md);
  border-radius: var(--radius-lg);
}
[size="md"] svg {
  width: 20px;
  height: 20px;
}
button[size="sm"], a[type="button"][size="sm"] {
  height: 32px;
  padding: 0px var(--padding-xs);
  border-radius: 14px;
}
button[size="sm"]:has(> span), a[type="button"][size="sm"]:has(> span) {
  padding: 0px var(--padding-sm);
  border-radius: var(--radius-lg);
}
[size="sm"] svg {
  width: 16px;
  height: 16px;
}
button[size="xs"], a[type="button"][size="xs"] { 
  height: 26px;
  padding: 0 4px;
  border-radius: 10px;
}
button[size="xs"]:has(> span), a[type="button"][size="xs"]:has(> span) {
  border-radius: var(--radius-lg);
}
[size="xs"] svg {
  width: 16px;
  height: 16px;
}
button[variant="tab"] {
  border-radius: var(--radius-50);
  padding: var(--padding-sm) var(--gap-lg);
}

/* primary style */
button[variant="primary"],
a[type="button"][variant="primary"] {
  background: var(--primary-polo-blue-500i);
  border: 1px solid var(--primary-polo-blue-500i);
}
button[variant="primary"] > *,
a[type="button"][variant="primary"] > * {
  color: var(--white);
  fill: var(--white);
}
button[variant="primary"]:hover,
a[type="button"][variant="primary"]:hover {
  background: var(--primary-polo-blue-600);
  border: 1px solid var(--primary-polo-blue-600);
}

/* secondary style */
button[variant="secondary"],
a[type="button"][variant="secondary"] {
  background: var(--primary-polo-blue-100);
  border: 1px solid var(--primary-polo-blue-100);
}
button[variant="secondary"] > *,
a[type="button"][variant="secondary"] > * {
  color: var(--primary-polo-blue-800i);
  fill: var(--primary-polo-blue-800i);
}
button[variant="secondary"]:hover,
a[type="button"][variant="secondary"]:hover {
  background: var(--primary-polo-blue-200);
  border: 1px solid var(--primary-polo-blue-200);
}

/* border style */
button[variant="border"],
a[type="button"][variant="border"] {
  background: var(--white);
  border: 1px solid var(--primary-polo-blue-500i);
}
button[variant="border"] > *,
a[type="button"][variant="border"] > * {
  color: var(--primary-polo-blue-800i);
  fill: var(--primary-polo-blue-800i);
}
button[variant="border"]:hover,
a[type="button"][variant="border"]:hover {
  background: var(--primary-polo-blue-50);
}

/* brand style */
button[variant="brand"],
a[type="button"][variant="brand"] {
  background: var(--primary-roman-500i);
  border: 1px solid var(--primary-roman-500i);
}
button[variant="brand"] > *,
a[type="button"][variant="brand"] > * {
  color: var(--white);
  fill: var(--white);
}
button[variant="brand"]:hover,
a[type="button"][variant="brand"]:hover {
  background: var(--primary-roman-600);
  border: 1px solid var(--primary-roman-600);
}
.dynamic {
  border-radius: 100px 24px !important;
  padding: 0px var(--gap-lg) !important;
}

/* link style */
button[variant="link"],
a[type="button"][variant="link"] {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0 !important;
  padding: 0;
}
a[type="button"][variant="link"] {
  border-bottom: 1px solid var(--primary-roman-500i);
}
button[variant="link"] > *,
a[type="button"][variant="link"] > * {
  color: var(--primary-roman-500i);
  fill: var(--primary-roman-500i);
}
button[variant="link"]:hover > *,
a[type="button"][variant="link"]:hover > * {
  color: var(--primary-roman-700);
  fill: var(--primary-roman-700);
}

/* success style */
button[variant="success"],
a[type="button"][variant="success"] {
  background: var(--feedback-success-500);
  border: 1px solid var(--feedback-success-500);
  cursor: initial;
  border-radius: var(--radius-50);
}
button[variant="success"] > *,
a[type="button"][variant="success"] > * {
  color: var(--white);
  fill: var(--white);
}
button[variant="success"]:hover,
a[type="button"][variant="success"]:hover {
  background: var(--feedback-success-500);
  border: 1px solid var(--feedback-success-500);
}

button[disabled], button[disabled]:hover {
  background: var(--primary-trout-400);
  border-color: var(--primary-trout-400);
  cursor: unset;
}
button[disabled] * {
  color: var(--white);
  fill: var(--white);
}

button[variant="tab"] {
  border: 1px solid var(--secondary-tropical-blue-100);
  background: transparent;
  border-radius: var(--radius-50);
}
button[variant="tab"] > * {
  color: var(--primary-trout-400);
}
button[variant="tab"].active {
  border-color: var(--primary-polo-blue-500i);
  background: var(--secondary-tropical-blue-50);
}
button[variant="tab"].active > * {
  color: var(--primary-polo-blue-800i);
}
button[variant="tab"]:hover {
  border-color: var(--primary-polo-blue-600);
  background: var(--secondary-tropical-blue-100);
}
button[variant="tab"]:hover > * {
  color: var(--primary-polo-blue-800i);
}
button[variant="tab"][disabled], button[variant="tab"][disabled] > * {
  border: none;
  background: none;
  color: lightgray;
  cursor: default;
}

button.file {
  border-radius: 10px;
}

button.cart {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px !important;
  height: 20px !important;
}
button.cart > span {
  font-size: 12px;
}
button.cart:has(> span:empty) {
  display: none;
}
.instalments {
  height: 80px;
}
.instalment:first-child > div:first-child {
  visibility: hidden;
}
.instalment-right {
  gap: var(--gap-xs);
  justify-content: flex-end;
  /*align-items: baseline;*/
}

.carousel {
  justify-content: flex-start;
}
.carousel.moved {
  padding-left: 15px;
}
.carousel-content {
  overflow-y: hidden;
  justify-content: flex-start;
  gap: var(--gap-lg);
  margin: -30px -15px;
  padding: 30px 15px;
  width: calc(100% + 15px);
}
@media screen and (max-width: 767px) {
  .carousel-content {
    gap: var(--gap-md);
  }
}
/* hide scrollbar */
.carousel-content {
  justify-content: flex-start;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel-content::-webkit-scrollbar {
  display: none;
}
.carousel > button {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 0;
}
.carousel > button.next {
  left: 100%;
}
/*.carousel > button[disabled] {
  display: none !important;
}*/

.tabs {
  align-items: flex-start;
  flex-direction: column;
  gap: var(--gap-xl);
}
.tabs-menu {
  justify-content: flex-start;
  overflow: scroll hidden;
  gap: var(--gap-xs);
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.tabs-menu::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}
.tabs-menu:has(> :only-child) {
  /*display: none;*/
}
.tabs-content {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--gap-lg);
  align-items: stretch;
}
.card {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  border-radius: 22px;
  border: 0;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0px 13px 25.3px 0px rgba(177, 202, 223, 0.20);
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  gap: var(--no-gap);
}
.card:hover {
  box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.2), 0 0px 5px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0px 13px 25.3px 0px rgba(82, 108, 163, 0.20);
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .card {
    width: 343px;
    margin: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 999px) {
  .card {
    width: 31%; /*3*/
  }
}
@media screen and (min-width: 1000px) and (max-width: 1279px) {
  .card {
    width: 23.12%; /*4*/
  }
}
@media screen and (min-width: 1280px) and (max-width: 1599px) {
  .card {
    width: 23.51%; /*4*/
  }
  .card-small {
    width: 22.75%; /*4*/
  }
  .carousel .card {
    width: 36.51%; /*3*/
  }
}
@media screen and (min-width: 1600px) {
  .card {
    width: 18.58%; /*5*/
  }
}
.product-image {
  width: 100%;
  height: 194px;
  border-radius: 22px;
  align-self: stretch;
  object-fit: cover;
}
.card > img {
  width: 100%;
  height: 165px;
  align-self: stretch;
  object-fit: cover;
}
.card .price {
  align-self: flex-end;
  height: var(--line-height-lg);
}
.card .content {
  padding: var(--padding-md);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
}
.card .subcontent {
  justify-content: space-between;
  align-self: stretch;
}
.card .infos {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--no-gap);
}
.card .infos .subtitle-2 {
  height: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
button.add-to-cart {
  width: 100%;
  margin-top: var(--padding-md);
}

sep.horizontal {
  width: 100%;
  height: 1px;
  background: var(--primary-trout-100);
}
sep.vertical {
  width: 1px;
  height: 66px;
  background: var(--primary-trout-100);
}

.section {
  padding-top: var(--padding-xl);
  margin-bottom: 64px;
  flex-direction: column;
}
.no-gap {
  gap: 0 !important;
}
.no-padding {
  padding: 0 !important;
}
.no-border {
  border: 0 !important;
}
.no-margin {
  margin: 0 !important;
}
.padding-sm {
  padding-top: 32px;
}

.promo {
  position: absolute;
  top: 27px;
  left: 0;
  height: 31px;
  padding: 5px 18px;
  border-radius: 0px 24px 97px 0px;
  background: var(--primary-roman-500i);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  width: unset;
}

.ticket {
  padding: 2px 8px 3px 6px;
  gap: var(--gap-xs);
  border-radius: var(--radius-lg);
  background: var(--gradient-pinky);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  width: unset;
}

.ShopPolygonMask {
  width: 58px;
  height: 58px;
  text-align: center;
  border-radius: var(--radius-50);
  overflow: hidden;
  box-shadow: 2px 4px 12px 0px rgba(122, 156, 198, 0.50);
}

.ShopHeader {
  padding: var(--padding-sm) 0;
  border-bottom: 1px solid var(--primary-trout-100);
  /*margin-bottom: var(--padding-md);*/
}

.ShopHero {
  gap: var(--gap-lg);
  align-items: stretch;
  flex-direction: row;
  padding-top: var(--padding-md);
}

.ShopImage {
  width: 100%;
  aspect-ratio: 1 / 1;
  mix-blend-mode: multiply;
}

.ShopHeaderLeft > a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--gap-md);
  height: 58px;
}

.ShopHeaderRight {
  gap: var(--gap-xs);
  justify-content: flex-end;
  align-items: baseline;
}

.ShopTitle {
  font-size: 22px;
  font-weight: 600;
  color: var(--secondary-dark);
  width: 220px;
  line-height: 28px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sub-hero {
  border-radius: var(--radius-lg);
  background: var(--primary-trout-50);
  gap: var(--gap-lg);
  padding: var(--padding-md) var(--padding-lg);
}
@media screen and (max-width: 767px) {
  .ShopTitle {
    width: 180px;
    font-size: 18px;
  }
  .ShopHero {
    flex-direction: column-reverse;
    gap: var(--gap-md);
  }
  .sub-hero {
    width: 100% !important;
  }
  .sub-hero:first-child {
    width: 100% !important;
    background: unset;
    padding: unset;
  }
}

#MobileMenu {
  padding: var(--padding-md) 0;
  flex-direction: column;
  position: static;
  background: white;
  z-index: 1;
  gap: var(--gap-md);
}
#MobileMenu > * {
  width: 100%;
  justify-content: flex-start;
}

div.alert {
  border-left: 4px solid var(--secondary-tropical-blue-500);
  background: var(--secondary-tropical-blue-100);
  padding: var(--padding-sm) var(--padding-md);
  align-items: flex-start;
}
div.alert > div {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xs);
}

#prefooter {
  background: radial-gradient(102.83% 73.46% at 50% 58.08%, #F9F9F9 36.5%, #E5ECF4 100%);
  padding: var(--padding-lg);
  gap: var(--gap-lg);
  /* to make div wider than parents */
  width: 100vw;
  left: calc(-50vw + 50%);
}

footer {
  display: flex;
  flex-direction: row;
  /*border-top: 1px solid #E3E8F1;*/
  justify-content: space-between;
  padding: var(--line-height-md) 0;
}
@media screen and (max-width: 767px) {
  footer {
    flex-direction: column;
    gap: 16px;
  }
}

.accordion {
  overflow: hidden;
}
.accordion.open {
  overflow: visible;
}
.accordion > :first-child {
  cursor: pointer;
}
.accordion.open > :first-child svg {
  transform: rotate(180deg);
}
.accordion > :last-child {
  max-height: 0; /* [JD-2024.08.14, c'est moche avec : 2vw;*/
  overflow: hidden;
}
.summary.accordion > :last-child {
  max-height: 2vw;
}
.accordion.open > :last-child {
  max-height: 1000vw;
}

[data-href] {
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .breadcrumb {
    border-bottom: 1px solid var(--primary-trout-100);
    margin-bottom: var(--padding-lg);
    padding-bottom: var(--padding-md);
    min-height: 66px;
    max-height: 66px;
    overflow: hidden;
  }
  .breadcrumb.open {
    max-height: 1000vw;
  }
  .breadcrumb.open #breadcrumb-toggle {
    transform: rotate(180deg);
  }
  .breadcrumb.open .breadcrumb-step:first-child {
    display: none;
  }
  .breadcrumb:not(.open) .breadcrumb-step:not(:first-child) {
    display: none;
  }
  .breadcrumb-step {
    background: white;
    padding: 0 5px;
  }
  .breadcrumb-step:nth-child(-n + 2) {
    cursor: pointer;
  }
}
#breadcrumb-toggle {
  position: absolute;
  top: 14px;
  right: 0;
  width: unset;
  cursor: pointer;
}
.breadcrumb-step svg {
  width: 16px;
  height: 16px;
}
.breadcrumb-step sep {
    height: 4px;
    border-radius: 26px;
    width: calc(100% - 48px);
    margin-top: 2px;
}
.breadcrumb-step:not(.breadcrumb-step-passed) .breadcrumb-step-number svg {
  display: none;
}
.breadcrumb-step-passed .breadcrumb-step-number strong {
  display: none;
}
.breadcrumb-step-passed .breadcrumb-step-number, .breadcrumb-step-passed sep {
  background-color: var(--feedback-success-500);
}
.breadcrumb-step-passed .breadcrumb-step-number *,
.breadcrumb-step-current .breadcrumb-step-number * {
  color: var(--white);
  fill: var(--white);
}
.breadcrumb-step-passed .breadcrumb-step-content {
  color: var(--feedback-success-500);
}
.breadcrumb-step-number {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-50);
  background: var(--primary-trout-100) content-box;
  border: solid 1px transparent;
  width: 50px;
  height: 50px;
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  cursor: pointer;
}
.breadcrumb-step-current .breadcrumb-step-number {
  background: var(--primary-roman-500i) content-box;
  border-color: var(--primary-roman-500i);
}
.breadcrumb-step-current .breadcrumb-step-content {
  color: var(--primary-roman-500i);
}

.stabilo {
  color: var(--feedback-success-800);
  padding: 0 4px 0;
  border-radius: 1em 0 1em 0;
  white-space: nowrap;
  background-image: linear-gradient(-100deg, rgba(0, 255, 20, 0.1), #E1F7E6 95%, rgba(0, 255, 20, 0.1));
}

/* Tooltip text */
.tips > * {
  visibility: hidden;
  width: 230px;
  padding: 2px;
  background-color: var(--primary-polo-blue-500i);
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 24px;
  cursor: initial;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tips:hover > * {
  visibility: visible;
}
.tips * {
  font-weight: 400 !important;
  line-height: 18px !important;
  color: #fff;
}