:root {
  --rose: #ef1a77;
  --main-text-color: #212529;
  --main-text-font: "Bricolage Grotesque";
  --main-pink-color: #ef1a78;
  --grey-100: #E1E4E7;
}

.reduction-amount {
  border-radius: 3px;
  border: 1px solid;
  color: #d63031;
  padding: 0 4px;
  font-size: .8rem;
}

/**
  Positionne le menu burger à côté de la barre de recherche "Que recherchez-vous ?"
  On a besoin de positionner en absolu car ces éléments ne sont pas parents - enfant au niveau du flux du document.
*/
#mamenu {
  i {
    font-size: 1.75rem;
  }
}

div.d-md-none.row.no-gutters {
  flex-wrap: nowrap;
  align-items: center;
  /*Espacement entre chacun des items.*/
  gap: 12px;
}

@media screen and (max-width: 767px) {
  #wishlistwrapper {
    align-items: flex-end;
  }
}

/**
* Fixe la taille de police des éléments H2 et H3 dans la fiche produit.
**/
div.product-description>h2,
div.product-description>h3 {
  font-size: 0.9rem;
  font-weight: 600;
}

/**
* Obfuscation : produit un effet au survol de la span pour donner l'impression qu'il s'agit d'un lien
*/
.cms-page-link:hover,
.custom-page-link:hover {
  color: var(--rose) !important;
}

/**
Ajuste la taille des images dans les blocs elementor.
*/
.elementor-widget-image .elementor-image img {
  width: 550px;
  height: 327px;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .elementor-widget-image .elementor-image img {
    width: 310px;
    height: 208px;
    object-fit: cover;
  }
}

/*
* Obfuscation.
* Les balises <a> obfusquées doivent se comporter de la même manière que les balises non obfusquées.
*/
a[role="link"] {
  /*color : var(--rose) !important;*/
  cursor: pointer;
}

#command-reference:invalid {
  background: pink;
}

span.number_max {
  font-weight: bold !important;
  opacity: 0.8;
}

div.modal-cart-header {
  display: flex;
  padding: 1rem;
}

div.modal-cart-header h1 {
  flex: 1;
  margin: 0;
  font-size: 1rem !important;
}

div.modal-cart-header button {
  padding: 0;
}

div.modal-cart-header button i {
  margin-right: 0 !important;
}

@media (max-width: 768px) {
  div.modal-cart-header h1 {
    margin: 0;
  }

  div.blockcart-modal>div.modal-dialog {
    position: fixed;
    top: 100%;
    max-height: 85%;
    transform: translate(0, -100%) !important;
    overflow-y: auto;
  }
}


/**
A migrer dans les fichiers scss
*/
#faq-services>div {
  width: 400px !important;
  height: 400px !important;
}

@media screen and (max-width: 768px) {
  #faq-services>div {
    margin: 1rem;
  }
}

.btn-primary:not(:focus),
.btn-primary:not(:hover) {
  background-color: rgb(5, 5, 5);
  border-color: rgb(5, 5, 5);
}


/********MODIFS PAGE PRODUIT 12-2024*********/
.product-reassurance-summary .adod_product_page_txt,
.product-reassurance-summary .product-satisfaction span:first-child,
.product-reassurance-summary .adod_title {
  font-family: var(--main-text-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--main-text-color);
}

.product-reassurance-summary .img_info {
  margin-left: 5px;
  vertical-align: bottom;
  cursor: pointer;
}

.product-reassurance-summary .product-satisfaction .product-satisfaction-bloc {
  align-items: flex-start !important;
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
}

.product-reassurance-summary img {
  align-self: unset !important;

}

.product-reassurance-summary .product-satisfaction-title {
  display: block;
}

#block-loved-features li {
  align-items: unset !important;
}

#block-loved-features li i {
  margin-top: 2px;
}


/***********PRODUCT description**************/

#showmore-product-description-summary {
  position: relative;
}

#product-description #showmore-product-description-summary:not(:has(.btn_voir_moins)) #product-description-summary {
  mask-image: linear-gradient(to bottom, black, 90%, transparent);
}

@media (max-width:1450px) {
  .product-reassurance-summary {
    display: flex !important;
  }
}

/* Module PPC */
#block_ppcmod {
    display:block;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
    background: #fff;
    padding:20px;
    margin-top:20px;
}

#ppc_title {
    font-size: 14px;
    display: inline-block;
    font-weight: 500;
    padding: 3px 0;
}

#ppc_title s {
  font-size: 18px;
}

#ppc_save {
    display: block;
    font-size:12px;
    font-weight: 700;
}

#ppc_info {
    margin-top:.625rem;
    display: block;
    font-size:10px;
    color:#999;
    font-style:italic;
}

#block_ppcmod_simple {
    display:inline;
    position:absolute;
    z-index:0;
} 

#block_ppcmod_simple a span{
    position:absolute;
    margin-top:20px;
    margin-left:-110px;
    color:#09c;
    background:white;
    padding:5px;
    border-radius:3px;
    box-shadow:0 0 2px rgba(0,0,0,.5);
    transform:scale(0) rotate(-40deg);
    transition:all .25s;
    opacity:0;
    min-width:200px;
    z-index:0;
}

#block_ppcmod_simple a:hover span, a:focus span{
    transform:scale(1) rotate(0);
	  opacity:1;
    z-index:0;
}

.product-prices {
  text-align: center;
}

.info-bubble-wrapper {
    position: relative;
    display: inline;
}

.info-bubble-content {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s linear;
    border-radius: 2px;
    border: 1px solid #e20f6a;
    z-index: 150;
    background: #ffe2f4;
    padding: 8px;
    max-width: 300px;
    width: max-content;
}

div.info-bubble-content a {
  text-decoration: underline !important;
}

.info-bubble-content.active {
    display: block;
    opacity: 0.9;
    visibility: visible;
}

.info-bubble {
    color: #EF1A78;
    vertical-align: middle;
}

/* Desktop */
@media screen and (min-width:768px) {
  .product-prices {
    text-align: unset;
  }

  .info-bubble-content {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(100%, -100%);
  }

  .info-bubble:hover {
      cursor: pointer;
  }
}

/*Bloc telephone indication legale*/
div.blocktel {
  background: lightblue;
  padding: 7px;
  font-size: 12px;
  margin: 9px 0;
  border-radius: 8px;
}