.bEtapesCycleVie {font-size: min(1.2vw, 1.6vh);min-height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.bEtapesCycleVie svg {width: 100%; height: auto;}
.bEtapesCycleVie__layout {display: grid;align-items: center;justify-items: center;margin: 6em 0;}
.bEtapesCycleVie__cHead {grid-row: 1 / -1;grid-column: 1 / -1;position: relative;text-align: center;aspect-ratio: 1 / 1;width: 20em;display: grid;align-content: center;gap: 1em;padding: 2.5em;}
.bEtapesCycleVie__cSteps {grid-row: 1 / -1;grid-column: 1 / -1;aspect-ratio: 1 / 1;width: 23em;}
.bEtapesCycleVie__cBulles {grid-row: 1 / -1;grid-column: 1 / -1;position: relative;aspect-ratio: 1 / 1;width: 40em;margin: 7em;}

.bEtapesCycleVie__title {color: var(--dark);font-size: 1.9em;text-transform: uppercase;line-height: 1.05;}
.bEtapesCycleVie__title span {display: block;font-size: 0.78em;}
.bEtapesCycleVie__subtitle {margin: 0;padding: 0;font-size: 1em;line-height: 1.25;}
.bEtapesCycleVie__subtitle span {display: block;margin-top: 0.3em;}
.bEtapesCycleVie__headStroke {position: absolute;z-index: 0;inset: 0;}
.bEtapesCycleVie__headStroke svg path {stroke:#d6d1c3; }
/* .bEtapesCycleVie__headStroke svg path {animation: draw 5s ease forwards;} */
.bEtapesCycleVie__bulle {position: absolute;top: 0;left: 50%;}
.bEtapesCycleVie__bulleStroke {position: absolute;z-index: 0;inset: -1em;}
.bEtapesCycleVie__bulleStroke svg path {stroke: var(--main); }
/* .bEtapesCycleVie__bulleStroke svg path {animation: draw 5s ease forwards;} */

	/* Position des bulles dans le cercle
	Formule pour calculer la position dans un rond
	left (x) = cos(angle) * 50 + 50
	top (y) = sin(angle) * 50 + 50

	Position dans un cercle, pour 8 ronds :
	Rond 1 - angle 270 (en haut)
	Rond 2 - angle 315
	Rond 3 - angle 0 (à droite)
	Rond 4 - angle 45
	Rond 5 - angle 90 (en bas)
	Rond 6 - angle 135
	Rond 7 - angle 180 (à gauche)
	Rond 8 - angle 225
	*/
	.bEtapesCycleVie__bulle--1 {left: 50%; top: 0%;}
	.bEtapesCycleVie__bulle--2 {left: 85.3553%; top: 14.6447%; }
	.bEtapesCycleVie__bulle--3 {left: 100%; top: 50%; }
	.bEtapesCycleVie__bulle--4 {left: 85.3553%; top: 85.3553%; }
	.bEtapesCycleVie__bulle--5 {left: 50%; top: 100%; }
	.bEtapesCycleVie__bulle--6 {left: 14.6447%; top: 85.3553%; }
	.bEtapesCycleVie__bulle--7 {left: 0%; top: 50%; }
	.bEtapesCycleVie__bulle--8 {left: 14.6447%; top: 14.6447%; }

	/*
	ALT :
	Line inverse (down).
	Text at bottom. */
	.bEtapesCycleVie__bulle--3 .iEtapeCycleVie__outside {bottom: auto;top: 30%;}
	.bEtapesCycleVie__bulle--3 .iEtapeCycleVie__outside svg {transform: scaleY(-1); }
	.bEtapesCycleVie__bulle--3 .iEtapeCycleVie__outsideText {order:2; }

	/*
	ALT :
	Line inverse (down).
	Text at bottom.
	Everything is on the left side. */
	.bEtapesCycleVie__bulle--8 .iEtapeCycleVie__outside {bottom: auto;top: 74%;left: auto;right: 82%;align-items: flex-end;}
	.bEtapesCycleVie__bulle--8 .iEtapeCycleVie__outside svg {transform: scaleY(-1) scaleX(-1); }
	.bEtapesCycleVie__bulle--8 .iEtapeCycleVie__outsideText {order:2;margin-left: 0;margin-right: -3.6em;}

/* L'emphase est sur la bulle du haut, le reste est pas mal caché */
@media screen and (max-width: 992px) {
	.bEtapesCycleVie {font-size: min(1.5vw, 1.5vh);height: 100vh;height: 100dvh;overflow: hidden;}
	.bEtapesCycleVie__layout {margin: 20vw 0;}
}


/* Bulle */
.iEtapeCycleVie {text-align: center;aspect-ratio: 1 / 1;font-family: 'Gotham Bold';width: 13em;transform: translate(-50%, -50%);}
.iEtapeCycleVie__ctn {position: relative;height: 100%;display: flex;flex-direction: column;gap: 0.1em;padding: 1.3em;}
.iEtapeCycleVie__ctn::before {position:absolute;z-index:-1;display:block;content:'';top:0;bottom:0;left:0;right:0;background: #fff;border: 0.35em solid var(--main);border-radius: 50%;}
.iEtapeCycleVie__etape {margin: 0;font-size: 1.15em;}
.iEtapeCycleVie__title {margin: 0;padding: 0.5em 0.5em;font-size: 1em;line-height: 1.2;text-transform: uppercase;text-wrap: balance;border: 0.1em solid var(--main);border-radius: 2.5em;min-height: 3.3em;display: flex;flex-direction: column;justify-content: center;}
.iEtapeCycleVie__note {display: block;font-size: 0.75em;font-family: 'Gotham Book';text-wrap: auto;}
.iEtapeCycleVie .iEtapeCycleVie__icon {padding: 0;margin: -25% 0 -30% 0;position: static;transform: none;z-index: 0;}

/* Text outside the circle */
.iEtapeCycleVie__outside {position: absolute;z-index: -2;text-align: left;bottom: 24%;left: 82%;display: flex;flex-direction: column;gap: 0.7em;}
.iEtapeCycleVie__outside .iEtapeCycleVie__outsideLine {width: 6em;padding: 0;margin: 0;position: static;transform: none;z-index:0;}
.iEtapeCycleVie__outsideLine svg path {stroke:var(--main); --strokeLength: 200;stroke-dasharray: var(--strokeLength);stroke-dashoffset: var(--strokeLength);}
/* .iEtapeCycleVie__outsideLine svg path {animation: draw 3s ease forwards;} */
.iEtapeCycleVie__outsideText {margin: 0 0 0 6.5em;font-family: 'Gotham Book';font-size: 0.8em;line-height: 1.15;width: 11em;}
.iEtapeCycleVie__outsideText ul {--paddingLeft: 0.8em;--bulletSize: 0.3em;margin: 0;list-style: none;}
.iEtapeCycleVie__outsideText ul li {list-style:none;padding-left: var(--paddingLeft);position: relative;}
.iEtapeCycleVie__outsideText ul li::before {backface-visibility: hidden;position: absolute;display: block;content: '';background-color: currentColor;width: var(--bulletSize);height: var(--bulletSize);top: 0.4em;left: 0;border-radius: 50%;}

	/*
	ALT :
	BG Beige. */
	.iEtapeCycleVie--beige .iEtapeCycleVie__ctn::before {background-color: #ebe8e1; }


/* Steps */
.iEtapesSteps {position: relative;display: grid;}
.iEtapesSteps__stroke {grid-row: 1 / -1;grid-column: 1 / -1;margin: -0.57em;}
.iEtapesSteps__stroke svg path {stroke:var(--main); --strokeLength: calc(100 * 3.1416);stroke-dasharray: var(--strokeLength);stroke-dashoffset:var(--strokeLength);}
/* .iEtapesSteps__stroke svg path {animation: stepThat 15s 2s ease forwards;} */
.iEtapesSteps__circles {grid-row: 1 / -1;grid-column: 1 / -1;}
.iEtapesSteps__circle {position: absolute;top: 0;left: 50%;transform: translate(-50%, -50%);background: #fff;font-size: 1.1em;width: 1em;height: 1em;border-radius: 50%;border: 0.07em solid var(--main);}
.iEtapesSteps__arrowWrapper {grid-row: 1 / -1;grid-column: 1 / -1; }
/* .iEtapesSteps__arrowWrapper {animation: moveArrow 3s 3s ease forwards;} */
.iEtapesSteps__arrow {font-size: 0.9em;width: 1em;height: 1em;background: transparent;position: absolute;top: 3%;left: 32.5%;border: 1em solid transparent;border-left-color: var(--main);transform: translate(-50%, -50%) rotate(-25deg) scaleY(0.6);}

	/*
	ALT :
	Positions.
	Voir la position des bulles pour l'explication sur le calcul de position. */
	.iEtapesSteps__circle--1 {left: 50%; top: 0%;}
	.iEtapesSteps__circle--2 {left: 85.3553%; top: 14.6447%; }
	.iEtapesSteps__circle--3 {left: 100%; top: 50%; }
	.iEtapesSteps__circle--4 {left: 85.3553%; top: 85.3553%; }
	.iEtapesSteps__circle--5 {left: 50%; top: 100%; }
	.iEtapesSteps__circle--6 {left: 14.6447%; top: 85.3553%; }
	.iEtapesSteps__circle--7 {left: 0%; top: 50%; }
	.iEtapesSteps__circle--8 {left: 14.6447%;top: 14.6447%; }

	.iEtapesSteps__circle--1 {background-color: var(--main);transform: translate(-50%, -50%) scale(1.7);}
	.iEtapesSteps__circle--8 {background-color: var(--main); }



/* Animate (test) */
/* .bEtapesCycleVie__cBulles {transition: all 1s; }
.iEtapeCycleVie__ctn {transition: transform 1s;} */

/* .bEtapesCycleVie__cBulles {transform: rotate(-45deg);}
.iEtapeCycleVie__ctn {transform: rotate(45deg);} */

/* .bEtapesCycleVie__cBulles {transform: rotate(-90deg); }
.iEtapeCycleVie__ctn {transform: rotate(90deg);}
.iEtapeCycleVie__outsideLine svg {animation: changeside 1s ease forwards;}
.iEtapeCycleVie__outsideLine svg path {animation: changesideLine 1s ease forwards;} */

@keyframes stepThat {
	0% {stroke-dashoffset:-314.16;}
	12.5% {stroke-dashoffset:-274.89;}
	25% {stroke-dashoffset:-235.62; }
	37.5% {stroke-dashoffset:-196.35; }
	50% {stroke-dashoffset:-157.08; }
	62.5% {stroke-dashoffset:-117.81; }
	75% {stroke-dashoffset:-78.54; }
	87.5% {stroke-dashoffset:-39.27; }
	100% {stroke-dashoffset:-39.27; }
	100% {stroke-dashoffset:0; }
}

@keyframes draw {
  to {stroke-dashoffset: 0; }
}

@keyframes changeside {
	0% {transform: scaleY(1); }
	30% {transform: scaleY(1); }
	31% {transform: scaleY(-1); }
	100% {transform: scaleY(-1); }
}
@keyframes changesideLine {
	0% {stroke-dashoffset: 0; }
	30% {stroke-dashoffset: -200; }
	31% {stroke-dashoffset: -200; }
	100% {stroke-dashoffset: 0; }
}

@keyframes moveArrow {
	0% {transform: rotate(-20deg);}
	100% {transform: rotate(0deg);}
	
}