.hq-banner-notification {
  font-size: 16px;
  padding: 12px 16px;
  border-top: 4px solid transparent;
}
.hq-banner-notification p:last-child {
  margin-bottom: 0 !important;
}
.hq-banner-notification-titre {
  font-weight: 700;
}
.hq-banner-notification-text {
  font-size: 14px;
}
.hq-banner-notification-last-word {
  white-space: nowrap;
}
.hq-banner-notification-last-word svg {
  display: initial;
}
.hq-banner-notification-last-word .hq-icone-petite {
  width: 16px;
  height: 16px;
}
.hq-banner-notification .wrapper {
  max-width: 912px;
  margin-inline: auto;
}
.hq-banner-notification .hq-banner-notification-cta {
  text-decoration: underline;
}
.hq-banner-notification .hq-banner-notification-cta:hover {
  text-decoration: none;
}
.hq-banner-notification .has-icon {
  position: relative;
}
.hq-banner-notification .has-icon .hq-banner-notification-text {
  margin-left: 30px;
}
.hq-banner-notification .has-icon::before {
  content: "";
  width: 20px;
  aspect-ratio: 1/1;
  display: block;
  position: absolute;
  left: 0;
  top: 2px;
}
.hq-banner-notification-cta {
  color: #1224B8 !important;
}
.hq-banner-notification.success {
  border-color: #008524;
  background-color: #EAF7EC;
}
.hq-banner-notification.success .has-icon::before {
  background: url("/themes/banner/assets/images/succes.png") no-repeat;
}
.hq-banner-notification.avertissement {
  border-color: #EF5500;
  background-color: #FFFCF6;
}
.hq-banner-notification.avertissement .has-icon::before {
  background: url("/themes/banner/assets/images/avertissement.png") no-repeat;
}
.hq-banner-notification.erreur {
  border-color: #BB121A;
  background-color: #F8E7E8;
}
.hq-banner-notification.erreur .has-icon::before {
  background: url("/themes/banner/assets/images/erreur.png") no-repeat;
}
.hq-banner-notification.info {
  border-top: none;
  background-color: #EAEAEA;
}
.hq-banner-notification.info .has-icon::before {
  background: url("/themes/banner/assets/images/info.png") no-repeat;
}
.hq-banner-notification.info a {
  color: #104CCE;
}

@media only screen and (min-width: 1024px) {
  .hq-banner-notification-text {
    text-align: center;
  }
}