/* ==========================================================================
   Elementor Vertical Timeline — styles frontend
   ========================================================================== */

.evt-timeline {
	position: relative;
	width: 100%;
}

.evt-timeline__items {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.evt-timeline__item {
	position: relative;
	display: flex;
	align-items: flex-start;
}

/* ---- Ligne verticale ---- */

/* top/bottom servent de repli tant que le JS n'a pas mesuré les points ;
   le JS recale ensuite précisément top/height sur le centre du 1er et
   dernier point pour que la ligne ne dépasse jamais le dernier point. */
.evt-timeline__line {
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: #FF6A00;
	z-index: 0;
}

/* Mode ALIGNÉ : ligne à gauche, tout le contenu à droite */
/* Le point n'a pas de marge/padding en mode aligné : son centre réel se
   trouve à dot_size/2 du bord gauche, pas au bord lui-même. */
.evt-timeline--aligned .evt-timeline__line {
	left: calc(var(--evt-dot-size, 20px) / 2);
	transform: translateX(-50%);
}

.evt-timeline--aligned .evt-timeline__item {
	padding-left: 0;
	margin-left: 0;
}

.evt-timeline--aligned .evt-timeline__dot {
	margin-left: 0;
}

/* Le point est positionné à l'origine de la ligne (translateX -50%) */
.evt-timeline--aligned .evt-timeline__dot {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

/* Mode ALTERNÉ : ligne au centre, items à gauche/droite */
.evt-timeline--alternating {
	display: flow-root;
}

.evt-timeline--alternating .evt-timeline__line {
	left: 50%;
	transform: translateX(-50%);
}

.evt-timeline--alternating .evt-timeline__item {
	width: 50%;
	position: relative;
}

.evt-timeline--alternating .evt-timeline__item--left {
	margin-left: 0;
	flex-direction: row-reverse;
	text-align: right;
}

.evt-timeline--alternating .evt-timeline__item--right {
	margin-left: 50%;
	flex-direction: row;
	text-align: left;
}

.evt-timeline--alternating .evt-timeline__item--left .evt-timeline__dot {
	margin-left: 20px;
}

.evt-timeline--alternating .evt-timeline__item--right .evt-timeline__dot {
	margin-right: 20px;
}

.evt-timeline--alternating .evt-timeline__item--left .evt-timeline__content {
	padding-inline-start: 0 !important;
	padding-inline-end: 20px;
}

/* ---- Point (dot) ---- */

.evt-timeline__dot {
	width: 20px;
	height: 20px;
	background-color: #FF6A00;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.evt-timeline--dot-square .evt-timeline__dot {
	border-radius: 4px;
}

.evt-timeline__dot i,
.evt-timeline__dot svg {
	font-size: 0.6em;
	color: #FFFFFF;
	width: 0.6em;
	height: 0.6em;
}

/* ---- Contenu texte ---- */

.evt-timeline__content {
	padding-inline-start: 30px;
	flex: 1 1 auto;
	min-width: 0;
}

.evt-timeline__title {
	color: #FF6A00;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px 0;
}

.evt-timeline__subtitle {
	color: #FFFFFF;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.evt-timeline__description {
	color: #E5E5E5;
	line-height: 1.5;
	margin: 8px 0 0 0;
}

/* ==========================================================================
   Animations au scroll
   ========================================================================== */

.evt-timeline--animated .evt-timeline__item {
	opacity: 0;
	will-change: opacity, transform;
}

.evt-timeline--animated .evt-timeline__item.evt-in-view {
	opacity: 1;
}

/* Fondu + montée */
.evt-anim-fade-up .evt-timeline__item {
	transform: translateY(40px);
	transition-property: opacity, transform;
}
.evt-anim-fade-up .evt-timeline__item.evt-in-view {
	transform: translateY(0);
}

/* Fondu simple */
.evt-anim-fade-in .evt-timeline__item {
	transition-property: opacity;
}

/* Zoom avant */
.evt-anim-zoom-in .evt-timeline__item {
	transform: scale(0.85);
	transition-property: opacity, transform;
}
.evt-anim-zoom-in .evt-timeline__item.evt-in-view {
	transform: scale(1);
}

/* Glissement latéral (sens selon le côté en mode alterné, sinon depuis la gauche) */
.evt-anim-slide-side .evt-timeline__item {
	transform: translateX(-40px);
	transition-property: opacity, transform;
}
.evt-anim-slide-side .evt-timeline__item--left {
	transform: translateX(40px);
}
.evt-anim-slide-side .evt-timeline__item.evt-in-view {
	transform: translateX(0);
}

/* Durée par défaut (surchargée en inline par le widget si nécessaire) */
.evt-timeline--animated .evt-timeline__item {
	transition-duration: 600ms;
	transition-timing-function: ease-out;
}

/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
	.evt-timeline--animated .evt-timeline__item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Responsive : on repasse toujours en mode "aligné empilé" sur mobile
   ========================================================================== */

@media (max-width: 767px) {
	.evt-timeline--alternating .evt-timeline__item,
	.evt-timeline--alternating .evt-timeline__item--left,
	.evt-timeline--alternating .evt-timeline__item--right {
		width: 100%;
		margin-left: 0 !important;
		flex-direction: row !important;
		text-align: left !important;
	}

	.evt-timeline--alternating .evt-timeline__item--left .evt-timeline__dot,
	.evt-timeline--alternating .evt-timeline__item--right .evt-timeline__dot {
		margin-left: 0;
		margin-right: 20px;
	}

	.evt-timeline--alternating .evt-timeline__item--left .evt-timeline__content {
		padding-inline-end: 0 !important;
		padding-inline-start: 20px !important;
	}

	.evt-timeline--alternating .evt-timeline__line {
		left: 10px;
		transform: none;
	}

	.evt-timeline--aligned .evt-timeline__line {
		left: calc(var(--evt-dot-size, 20px) / 2);
		transform: none;
	}
}