/* Établir le contexte de positionnement pour la chronologie. */
.animated-timeline > div {
	position: relative;
}

.animated__item {
	visibility: hidden;
}

.animated__item.loaded {
	visibility: visible!important;
}

/* Première colonne - État initial */
.animated-timeline .animated__item--first {
	opacity: 0;
	transform: translateY(25px);
	transition: transform 0.5s, opacity 0.5s;
	transition-delay: 0.3s;
}

/* Dernière colonne - État initial */
.animated-timeline .animated__item--last {
	opacity: 0;
	transform: translateY(45px);
	transition: transform 0.7s, opacity 0.8s;
	transition-delay: 0.5s;
}

/* Première et dernière colonne - état chargé */
.animated-timeline .animated__item--first.loaded,
.animated-timeline .animated__item--last.loaded {
	opacity: 1;
	transform: translateY(0);
}

/**
 * Animation de ligne verticale
 * La ligne verticale est un pseudo-élément de la colonne du milieu.
 */

/* Établir le contexte de positionnement */
.animated-timeline .animated__item--line {
	position: relative;
	visibility: hidden;
}

/* Ligne verticale - État initial */
.animated-timeline .animated__item--line::before {
	background-color: inherit;
	content: "";
	display: block;
	height: 1px;
	inset: 0;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	transition: height 1.5s, opacity 0.1s;
	transition-delay: 0.1s;
	transition-origin: top;
	visibility: hidden;
	width: 100%;
	z-index: -1;
}

/* Ligne verticale - état chargé */
.animated-timeline .animated__item--line.loaded::before {
	height: 100%;
	opacity: 1;
	visibility: visible;
}

/* Colonne du milieu - Texte intérieur - État initial */
.animated-timeline .animated__item--line > p {
	opacity: 0;
	transition: opacity 0.5s;
	transition-delay: 1.15s;
	visibility: hidden;
}

/* Colonne du milieu - Texte intérieur - État chargé */
.animated-timeline:not(.animated-timeline--circles) .animated__item--line.loaded > p {
	opacity: 1;
	visibility: visible;
}

/**
 * Chronologie circulaire
 * La chronologie circulaire est une varaition de la chronologie 
 * par défaut qui est en forme de "t".
 */
.animated-timeline--circles .animated__item--line > p {
	opacity: 1;
	position: relative;
	visibility: hidden;
}

/* Creation des cercles */
.animated-timeline--circles .animated__item--line > p::after,
.animated-timeline--circles .animated__item--line > p::before {
	background-color: inherit;
	border-radius: 50%;
	content: "";
	display: block;
	height: 1rem;
	left: calc(50% - 0.5rem);
	opacity: 0;
	position: absolute;
	top: calc(50% - 0.5rem);
	transition: opacity 0.4s, transform 0.6s;
	visibility: hidden;
	width: 1rem;
}

/* couleur de fond du cercle - état initial */
.animated-timeline--circles .animated__item--line > p::after {
	background: none;
	box-shadow: 0 0 0 4px currentColor;
	transform: scale(0);
	transition-delay: 1.2s;
	z-index: 1;
}

/* couleur de fond du cercle - état chargé */
.animated-timeline--circles .animated__item--line.loaded > p::after {
	opacity: 0.4;
	transform: scale(1);
	visibility: visible;
}

/* Cercle de premier plan - état initial */
.animated-timeline--circles .animated__item--line > p::before {
	transition-delay: 1s;
	z-index: 2;
}

/* Cercle de premier plan - état chargé */
.animated-timeline--circles .animated__item--line.loaded > p::before {
	opacity: 1;
	visibility: visible;
}

/* minimiser tout mouvement non essentiel des appareils utilisateurs */
@media (prefers-reduced-motion: reduce) {
	.animated-timeline *,
	.animated-timeline *::after,
	.animated-timeline *::before {
		opacity: 1 !important;
		transition: none !important;
		visibility: visible !important;
	}
}

/*------ Régles Propre au thème Astra ------*/
.animated-timeline .wp-block-columns.is-not-stacked-on-mobile{
	flex-wrap: wrap!important;
}