/**
 * Returns value from colors map
 */
/**
 * Turns pixels to rems
 * We typically set out HTML font size to 62.5% which helps us have a base-10 value to work with.
 * So the following mixin accepts a pixel value that is then turned into a corresponding rem value.
 */
/**
 * Function for converting a px based font-size to rem.
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {to-rem(12);}
 *
 */
/**
 * Returns value from colors map
 */
/**
 * Turns pixels to rems
 * We typically set out HTML font size to 62.5% which helps us have a base-10 value to work with.
 * So the following mixin accepts a pixel value that is then turned into a corresponding rem value.
 */
/**
 * Function for converting a px based font-size to rem.
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {to-rem(12);}
 *
 */
.paragraph--type--widget-en-tete-avantages {
  justify-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  /** Colors for bottom border and rounded corner of the widget **/
}
.paragraph--type--widget-en-tete-avantages .en-tete-avantages-container {
  padding: 0 1rem 5rem 0 !important;
  max-width: 132.4rem;
  margin: 0 auto;
}
@media only screen and (min-width: 960px) {
  .paragraph--type--widget-en-tete-avantages.bleu_vert .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.bleu_vert .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.bleu_vert .presentation-portail-container, .paragraph--type--widget-en-tete-avantages.violet_vert .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.violet_vert .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.violet_vert .presentation-portail-container {
    background-image: url("../images/global/liseret-vert.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 16.5rem;
  }
}
@media only screen and (min-width: 960px) and (max-width: 959px) {
  .paragraph--type--widget-en-tete-avantages.bleu_vert .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.bleu_vert .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.bleu_vert .presentation-portail-container, .paragraph--type--widget-en-tete-avantages.violet_vert .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.violet_vert .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.violet_vert .presentation-portail-container {
    background-size: 6.5rem;
  }
}
@media only screen and (min-width: 960px) {
  .paragraph--type--widget-en-tete-avantages.bleu_violet .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.bleu_violet .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.bleu_violet .presentation-portail-container {
    background-image: url("../images/global/liseret-violet.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 16.5rem;
  }
}
@media only screen and (min-width: 960px) and (max-width: 959px) {
  .paragraph--type--widget-en-tete-avantages.bleu_violet .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.bleu_violet .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.bleu_violet .presentation-portail-container {
    background-size: 6.5rem;
  }
}
@media only screen and (min-width: 960px) {
  .paragraph--type--widget-en-tete-avantages.vert_bleu .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.vert_bleu .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.vert_bleu .presentation-portail-container, .paragraph--type--widget-en-tete-avantages.orange_bleu .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.orange_bleu .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.orange_bleu .presentation-portail-container {
    background-image: url("../images/global/liseret-bleu.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 16.5rem;
  }
}
@media only screen and (min-width: 960px) and (max-width: 959px) {
  .paragraph--type--widget-en-tete-avantages.vert_bleu .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.vert_bleu .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.vert_bleu .presentation-portail-container, .paragraph--type--widget-en-tete-avantages.orange_bleu .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.orange_bleu .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.orange_bleu .presentation-portail-container {
    background-size: 6.5rem;
  }
}
@media only screen and (min-width: 960px) {
  .paragraph--type--widget-en-tete-avantages.vert_orange .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.vert_orange .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.vert_orange .presentation-portail-container, .paragraph--type--widget-en-tete-avantages.bleu_orange .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.bleu_orange .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.bleu_orange .presentation-portail-container {
    background-image: url("../images/global/liseret-orange.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 16.5rem;
  }
}
@media only screen and (min-width: 960px) and (max-width: 959px) {
  .paragraph--type--widget-en-tete-avantages.vert_orange .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.vert_orange .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.vert_orange .presentation-portail-container, .paragraph--type--widget-en-tete-avantages.bleu_orange .bandeau-image-titre-container, .paragraph--type--widget-en-tete-avantages.bleu_orange .en-tete-avantages-container, .paragraph--type--widget-en-tete-avantages.bleu_orange .presentation-portail-container {
    background-size: 6.5rem;
  }
}
.paragraph--type--widget-en-tete-avantages.bleu_vert::after, .paragraph--type--widget-en-tete-avantages.bleu_violet::after {
  background: #1DAED3;
}
.paragraph--type--widget-en-tete-avantages.violet_vert::after {
  background: #792976;
}
.paragraph--type--widget-en-tete-avantages.vert_bleu::after, .paragraph--type--widget-en-tete-avantages.vert_orange::after {
  background: #88B336;
}
.paragraph--type--widget-en-tete-avantages.orange_bleu::after {
  background: #FD5312;
}
.paragraph--type--widget-en-tete-avantages.bleu_orange::after {
  background: #4B80AC;
}
.paragraph--type--widget-en-tete-avantages.gray-background {
  background-color: #F0F0F0;
}
.paragraph--type--widget-en-tete-avantages .en-tete-avantages-title {
  font-size: 2.6rem;
  line-height: 1.15 !important;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-en-tete-avantages .en-tete-avantages-title {
    font-size: 2.2rem;
    line-height: 1.4 !important;
  }
}
.paragraph--type--widget-en-tete-avantages .advantages-header-widget {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 8rem;
  background: transparent;
  gap: 2rem;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-en-tete-avantages .advantages-header-widget {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-right: 0;
  }
}
.paragraph--type--widget-en-tete-avantages .advantages-header-widget .advantage-item {
  background: transparent;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 1.8rem;
  line-height: 1.4 !important;
  font-weight: 600;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-en-tete-avantages .advantages-header-widget .advantage-item {
    font-size: 1.6rem;
    line-height: 1.4 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
  }
}
.paragraph--type--widget-en-tete-avantages .advantages-header-widget .advantage-item .icon--check {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-image: url("../images/global/icon-check.png");
  background-repeat: no-repeat;
}
.paragraph--type--widget-en-tete-avantages .advantages-header-widget .advantage-item .advantage-text {
  background: transparent;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-en-tete-avantages .advantages-header-widget .advantage-item .advantage-text {
    max-width: 250px;
  }
}
.paragraph--type--widget-en-tete-avantages::after {
  content: " ";
  padding: 1.2rem;
  display: block;
  border-radius: 5px 0 5px 5px;
  margin-right: 16.5rem;
  max-width: 115.9rem;
  width: calc(100% - 16.5rem);
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-en-tete-avantages::after {
    display: none;
  }
}