/**
 * 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-bandeau-titre-avec-intro {
  position: relative;
  /** Colors for bottom border and rounded corner of the widget **/
}
.paragraph--type--widget-bandeau-titre-avec-intro.bandeau-width-3-4 {
  width: 80.42%;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro.bandeau-width-3-4 {
    width: 100%;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro::after {
  content: " ";
  padding: 1.2rem;
  width: calc(100% - 16.5rem - 4rem);
  margin-left: 4rem;
  display: block;
  border-radius: 5px 0 5px 5px;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro::after {
    padding: 0.6rem;
    width: calc(100% - 6.5rem - 2rem);
    margin-left: 2rem;
    border-radius: 2px 0 2px 2px;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro.bleu_vert .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_vert .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_vert .presentation-portail-container, .paragraph--type--widget-bandeau-titre-avec-intro.violet_vert .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.violet_vert .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.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 (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro.bleu_vert .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_vert .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_vert .presentation-portail-container, .paragraph--type--widget-bandeau-titre-avec-intro.violet_vert .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.violet_vert .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.violet_vert .presentation-portail-container {
    background-size: 6.5rem;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro.bleu_violet .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_violet .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.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 (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro.bleu_violet .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_violet .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_violet .presentation-portail-container {
    background-size: 6.5rem;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro.vert_bleu .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.vert_bleu .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.vert_bleu .presentation-portail-container, .paragraph--type--widget-bandeau-titre-avec-intro.orange_bleu .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.orange_bleu .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.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 (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro.vert_bleu .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.vert_bleu .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.vert_bleu .presentation-portail-container, .paragraph--type--widget-bandeau-titre-avec-intro.orange_bleu .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.orange_bleu .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.orange_bleu .presentation-portail-container {
    background-size: 6.5rem;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro.vert_orange .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.vert_orange .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.vert_orange .presentation-portail-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_orange .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_orange .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.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 (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro.vert_orange .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.vert_orange .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.vert_orange .presentation-portail-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_orange .bandeau-image-titre-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_orange .en-tete-avantages-container, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_orange .presentation-portail-container {
    background-size: 6.5rem;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro.bleu_vert::after, .paragraph--type--widget-bandeau-titre-avec-intro.bleu_violet::after {
  background: #1DAED3;
}
.paragraph--type--widget-bandeau-titre-avec-intro.violet_vert::after {
  background: #792976;
}
.paragraph--type--widget-bandeau-titre-avec-intro.vert_bleu::after, .paragraph--type--widget-bandeau-titre-avec-intro.vert_orange::after {
  background: #88B336;
}
.paragraph--type--widget-bandeau-titre-avec-intro.orange_bleu::after {
  background: #FD5312;
}
.paragraph--type--widget-bandeau-titre-avec-intro.bleu_orange::after {
  background: #4B80AC;
}
.paragraph--type--widget-bandeau-titre-avec-intro::before {
  content: " ";
  background: white;
  height: calc(100% - 17.8rem);
  width: 2.4rem;
  display: block;
  position: absolute;
  right: 0;
  z-index: 5;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro::before {
    height: calc(100% - 7.3rem);
    width: 1.2rem;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container {
  padding: 5.5rem 8rem 5.5rem 4rem;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container {
    padding: 2.7rem 4.2rem 2.7rem 2rem;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container.gray-background {
  background-color: #F0F0F0;
  position: relative;
}
.paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container.gray-background::before {
  content: " ";
  background: white;
  height: 1.6rem;
  width: 1.6rem;
  display: block;
  position: absolute;
  right: 2.4rem;
  top: 0;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container.gray-background::before {
    right: 1.2rem;
    display: none;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container.gray-background::after {
  content: " ";
  background: #F0F0F0;
  height: 1.6rem;
  width: 1.6rem;
  display: block;
  position: absolute;
  right: 2.4rem;
  top: 0;
  border-radius: 0 1.6rem 0 0;
  z-index: 5;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container.gray-background::after {
    right: 1.2rem;
    display: none;
  }
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container .bandeau-title {
    font-size: 2.6rem;
  }
}
.paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container .bandeau-description {
  font-size: 2rem;
}
@media only screen and (max-width: 959px) {
  .paragraph--type--widget-bandeau-titre-avec-intro .bandeau-image-titre-container .bandeau-description {
    font-size: 1.8rem;
  }
}