:root {
  font-size: 16px;
  --color-text: #E0848C;
  --color-bg: #CC323F;
  --color-link: #CC323F;
  --color-link-hover: #CC323F;
  --page-padding: 1rem;
  --color-highlight-start: #CC323F;
  --color-highlight-end: #CC323F;
  --color-highlight-end-alt: #CC323F;
}





.content__inner p {
  margin: 0;
  max-width: 900px;
  text-wrap: balance;
}

.hx {
  background: none;
  display: inline-block;
  position: relative;
  white-space: nowrap;
}





.hx-4 {
  --color-highlight-start: #CC323F; /* Couleur initiale */
  --color-highlight-end: #fff;   /* Couleur intermédiaire */
  --color-highlight-final: #CC323F; /* Couleur finale du dégradé */
	display: block;
	white-space: wrap;
  color: var(--color-highlight-start); /* Applique la couleur initiale */
  transition: color 1s ease; /* Transition douce */
}


.hx-flip {
  font-size: clamp(2rem,20vw,6rem);
  margin: 0;
  position: relative;
}


.hx-flip__inner,
.hx-flip__placeholder {
  font-weight: 500;
  background: none;
  color: #fff;
  display: inline-block;
}

.hx-flip__placeholder,
.hx__placeholder {
  opacity: 0;
	line-height: 73px; /* 117.742% */
	margin-top: -20px;
}

.hx-flip__inner {
  position: absolute;
  left: 0;
  top: 0;
	line-height: 73px; /* 117.742% */
		margin-top: -20px;

}



.hx-13 {
  position: relative;
  --select-width: 0%;
  --select-width-final: 103%;
  --color-highlight-start: var(--color-text);
}

.hx__select {
  position: absolute;
  width: var(--select-width);
  height: 100%;
  left: -1%;
  top: 10%;
  background: rgb(204 50 63 / 60%);
  mix-blend-mode: plus-lighter;
}

.hx__select::before,
.hx__select::after {
  content: '';
  position: absolute;
  top: -0.125em;
  left: -0.075em;
  width: 0.155em;
  height: calc(100% + 0.1275em);
  background: url(../img/select.svg) no-repeat 0 0;
  background-size: auto 100%;
}

.hx__select::after {
  transform: scaleY(-1);
  left: auto;
  right: -0.075em;
  top: auto;
  bottom: -0.125em;
}


.hx-5 {
  display: inline-flex;
  --after-scale: 1;
  --color-bg-highlight: #6a5ace;
}

.hx-5::after {
  content: '';
  left: -2.5%;
  top: 10%;
  bottom: -7.5%;
  position: absolute;
  z-index: -1;
  width: 105%;
  transform: scale3D(var(--after-scale),var(--after-scale),var(--after-scale));
  background: var(--color-bg-highlight);
  border-radius: 8px;
}