span.underline_shape {
  position: relative;
}

span.underline_shape::after {
  display: block;
  content:'';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;

  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;

  z-index: -1;
}

span.underline_shape--green::after {
  background-image: url(../images/shape/underline_shape--green.svg);
}
span.underline_shape--yellow::after {
  background-image: url(../images/shape/underline_shape--yellow.svg);
  left: -10px;
}

span.before_shape {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: flex-start;
  align-items: baseline;
}

span.before_shape::before {
  display: block;;
  content: '';
  width: 38px;
  height: 32px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

span.before_shape--orange::before {
  background-image: url(../images/icons/puce--orange.svg);
}
span.before_shape--green::before {
  background-image: url(../images/icons/puce--green.svg);
}
span.before_shape--yellow::before {
  background-image: url(../images/icons/puce--yellow.svg);
}

span.before_shape--xl .before_shape::before {
  width: 47.661px;
  height: 40px;
}

span.before_shape--xxl .before_shape::before {
  width: 57.194px;
  height: 48px;
}

p.size--xl {
  font-size : var(--content-size-l);
}