/* =========================================================
   Web-Studios Timeline v1.3.0
   ========================================================= */

/* --- Reset boîte ---------------------------------------- */
.wst-timeline,
.wst-timeline * { box-sizing: border-box; }

/* --- Wrapper global ------------------------------------- */
.wst-timeline {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 0 50px;
	/* Variables CSS avec valeurs de fallback */
	--wst-spine-x:          50%;
	--wst-node-size:        24px;
	--wst-node-top:         6px;
	--wst-connector-width:  60px;
	--wst-connector-height: 2px;
}

/* =========================================================
   LIGNE VERTICALE (SPINE)
   ========================================================= */
.wst-spine {
	position: absolute;
	top: 0;
	bottom: 14px;
	left: var(--wst-spine-x, 50%);
	width: 2px;
	background-color: #cccccc;
	transform: translateX(-50%);
}

/* --- Flèche BAS (extrémité principale) ------------------ */
.wst-spine-arrow {
	position: absolute;
	bottom: 8px;
	left: var(--wst-spine-x, 50%);
	width: 0;
	height: 0;
	border-left:  7px solid transparent;
	border-right: 7px solid transparent;
	border-top:   12px solid #cccccc;
	transform: translateX(-50%);
}

/* --- Décoration AUTRE EXTRÉMITÉ de la ligne ------------- */
/* (opposée à la flèche principale = en haut par défaut)    */
.wst-spine-end-decoration {
	position: absolute;
	top: 0;
	left: var(--wst-spine-x, 50%);
	transform: translateX(-50%);
	z-index: 2;
}

/* Rond à l'autre extrémité */
.wst-timeline.wst-end-deco-circle .wst-spine-end-decoration {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #cccccc;
	top: -7px;
}

/* Flèche à l'autre extrémité (pointant vers le haut) */
.wst-timeline.wst-end-deco-arrow .wst-spine-end-decoration {
	width: 0;
	height: 0;
	border-left:   7px solid transparent;
	border-right:  7px solid transparent;
	border-bottom: 12px solid #cccccc;
	top: -12px;
	background: none;
}

/* =========================================================
   LISTE DES ÉTAPES
   ========================================================= */
.wst-items {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

/* =========================================================
   ÉTAPE — structure commune
   ========================================================= */
.wst-item {
	position: relative;
	width: 50%;
	--wst-item-color: #4ecdc4;
}

/* Côté droit */
.wst-item.wst-side-right {
	margin-left: 50%;
	padding-left: calc(var(--wst-connector-width, 60px) + var(--wst-node-size, 24px) * 0.5 + 4px);
	text-align: left;
}

/* Côté gauche */
.wst-item.wst-side-left {
	margin-right: 50%;
	padding-right: calc(var(--wst-connector-width, 60px) + var(--wst-node-size, 24px) * 0.5 + 4px);
	text-align: left;
	display: flex;
	justify-content: flex-end;
}

.wst-item.wst-side-left .wst-item-content {
	width: 100%;
}

/* =========================================================
   NODE (cercle — centré sur le connecteur horizontal)
   top = center du connecteur - demi-hauteur du node
   ========================================================= */
.wst-item-node {
	position: absolute;
	top: calc(
		var(--wst-node-top, 6px)
		+ var(--wst-node-size, 24px) * 0.5
		- var(--wst-connector-height, 2px) * 0.5
		- var(--wst-node-size, 24px) * 0.5
	);
	width:  var(--wst-node-size, 24px);
	height: var(--wst-node-size, 24px);
	border-radius: 50%;
	border: 3px solid var(--wst-item-color);
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

/* Côté droit : node au bord gauche du padding (côté spine) */
.wst-item.wst-side-right .wst-item-node {
	left: 0;
	transform: translateX(-50%);
}

/* Côté gauche : node au bord droit du padding (côté spine) */
.wst-item.wst-side-left .wst-item-node {
	right: 0;
	transform: translateX(50%);
}

.wst-item-node-dot {
	width:  10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--wst-item-color);
}

/* =========================================================
   CONNECTEUR HORIZONTAL
   ========================================================= */
.wst-item-connector {
	position: absolute;
	top: calc(
		var(--wst-node-top, 6px)
		+ var(--wst-node-size, 24px) * 0.5
		- var(--wst-connector-height, 2px) * 0.5
	);
	width:  var(--wst-connector-width, 60px);
	height: var(--wst-connector-height, 2px);
	background-color: var(--wst-item-line-color, var(--wst-item-color));
	z-index: 2;
}

.wst-timeline.wst-connector-color-custom .wst-item-connector {
	background-color: var(--wst-connector-custom-color, #999999);
}

.wst-item.wst-side-right .wst-item-connector { left:  0; }
.wst-item.wst-side-left  .wst-item-connector { right: 0; }

/* =========================================================
   CONTENU
   ========================================================= */
.wst-item-content {
	position: relative;
	z-index: 2;
}

/* =========================================================
   LIGNE ICÔNE + NUMÉRO + TITRE (topline)
   Le titre est maintenant DANS la topline, aligné avec l'icône
   ========================================================= */
.wst-item-topline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	flex-direction: row;
	flex-wrap: wrap;
}

/* icône à droite du numéro */
.wst-timeline.wst-icon-pos-icon_right .wst-item-topline {
	flex-direction: row-reverse;
}

/* icône au-dessus — gauche */
.wst-timeline.wst-icon-pos-icon_top .wst-item-topline {
	flex-direction: column;
	align-items: flex-start;
}

/* icône au-dessus — centré */
.wst-timeline.wst-icon-pos-icon_top_center .wst-item-topline {
	flex-direction: column;
	align-items: center;
}

/* icône au-dessus — droite */
.wst-timeline.wst-icon-pos-icon_top_right .wst-item-topline {
	flex-direction: column;
	align-items: flex-end;
}

/* icône en-dessous — gauche */
.wst-timeline.wst-icon-pos-icon_bottom .wst-item-topline {
	flex-direction: column-reverse;
	align-items: flex-start;
}

/* icône en-dessous — centré */
.wst-timeline.wst-icon-pos-icon_bottom_center .wst-item-topline {
	flex-direction: column-reverse;
	align-items: center;
}

/* icône en-dessous — droite */
.wst-timeline.wst-icon-pos-icon_bottom_right .wst-item-topline {
	flex-direction: column-reverse;
	align-items: flex-end;
}

/* Icône */
.wst-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wst-item-color);
	line-height: 0;
	flex-shrink: 0;
}

.wst-item-icon svg {
	width:  32px;
	height: 32px;
	fill: currentColor;
}

.wst-item-icon i {
	font-size: 32px;
	color: var(--wst-item-color);
}

/* Numéro */
.wst-item-number {
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: var(--wst-item-color);
}

/* =========================================================
   IMAGE DU BLOC
   ========================================================= */
.wst-block-image {
	display: block;
	width: 100%;
	margin-bottom: 12px;
}

.wst-block-image img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
}

/* =========================================================
   TITRE
   ========================================================= */
.wst-item-title {
	display: inline-block;
	background-color: var(--wst-item-color);
	color: #ffffff;
	padding: 8px 16px;
	border-radius: 4px;
	margin-top: 0;
	margin-bottom: 0;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
}

/* Fond coloré désactivé */
.wst-timeline:not(.wst-title-bg-yes) .wst-item-title {
	background-color: transparent;
	padding-left: 0;
	color: var(--wst-item-color);
}

/* Fond coloré activé : couleur par étape */
.wst-timeline.wst-title-bg-yes .wst-item-title {
	background-color: var(--wst-item-title-bg, var(--wst-item-color));
}

/* =========================================================
   DESCRIPTION
   ========================================================= */
.wst-item-description {
	font-size: 14px;
	line-height: 1.6;
	color: #555555;
	margin-top: 8px;
}

.wst-item-description p    { margin: 0 0 0.6em; }
.wst-item-description ul,
.wst-item-description ol   { margin: 0 0 0.6em; padding-left: 1.4em; }
.wst-item-description a    { color: var(--wst-item-color); }
.wst-item-description strong { font-weight: 700; }
.wst-item-description em   { font-style: italic; }

/* =========================================================
   DERNIER ITEM — CENTRÉ SOUS LA FLÈCHE (desktop)
   ========================================================= */
.wst-timeline.wst-last-below .wst-item.wst-item-last {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
}

.wst-timeline.wst-last-below .wst-item.wst-item-last .wst-item-node,
.wst-timeline.wst-last-below .wst-item.wst-item-last .wst-item-connector {
	display: none;
}

.wst-timeline.wst-last-below .wst-item.wst-item-last .wst-item-content {
	width: auto;
	max-width: 50%;
	display: block;
	text-align: center;
}

.wst-timeline.wst-last-below .wst-item.wst-item-last .wst-item-topline {
	justify-content: center;
}

.wst-timeline.wst-last-below .wst-item.wst-item-last .wst-item-title {
	display: block;
	text-align: center;
	white-space: normal;
}

/* =========================================================
   ANIMATION AU SCROLL
   ========================================================= */
.wst-timeline.wst-animate-yes .wst-item {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.wst-timeline.wst-animate-yes .wst-item.wst-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================
   RESPONSIVE ≤ 880px  (breakpoint mobile)
   ========================================================= */
@media (max-width: 880px) {
	.wst-timeline {
		padding-left: 8px;
		--wst-spine-x: 20px;
	}

	.wst-spine,
	.wst-spine-arrow,
	.wst-spine-end-decoration {
		left: var(--wst-spine-x, 20px);
	}

	.wst-items { gap: 40px; }

	/* Tous les items passent à droite de la spine */
	.wst-item,
	.wst-item.wst-side-right,
	.wst-item.wst-side-left {
		width:         100%;
		margin-left:   0;
		margin-right:  0;
		padding-left:  calc(
			var(--wst-spine-x, 20px)
			+ var(--wst-node-size, 24px) * 0.5
			+ var(--wst-connector-width, 40px)
			+ 4px
		);
		padding-right: 0;
		text-align:    left;
		display:       block;
	}

	.wst-item.wst-side-left .wst-item-content { width: auto; }

	/* Node et connecteur : tous du côté gauche (spine) */
	.wst-item.wst-side-right .wst-item-node,
	.wst-item.wst-side-left  .wst-item-node {
		left:      var(--wst-spine-x, 20px);
		right:     auto;
		transform: translateX(-50%);
	}

	.wst-item.wst-side-right .wst-item-connector,
	.wst-item.wst-side-left  .wst-item-connector {
		left:  calc(var(--wst-spine-x, 20px) + var(--wst-node-size, 24px) * 0.5);
		right: auto;
		width: var(--wst-connector-width, 40px);
	}

	.wst-item-topline,
	.wst-item.wst-side-left .wst-item-topline {
		justify-content: flex-start;
	}

	.wst-item-number { font-size: 24px; }

	/* -------------------------------------------------------
	   DERNIER ITEM MOBILE — OPTION : à droite (défaut mobile)
	   ------------------------------------------------------- */
	.wst-timeline.wst-last-below .wst-item.wst-item-last {
		/* Sur mobile : le dernier item se comporte comme les autres
		   (à droite de la spine), avec node + connecteur cachés */
		width:         100%;
		margin-left:   0;
		margin-right:  0;
		padding-left:  calc(
			var(--wst-spine-x, 20px)
			+ var(--wst-node-size, 24px) * 0.5
			+ var(--wst-connector-width, 40px)
			+ 4px
		);
		padding-right: 0;
		display:       block;
		flex-direction: unset;
		align-items:   unset;
		text-align:    left;
		margin-top:    20px;
	}

	.wst-timeline.wst-last-below .wst-item.wst-item-last .wst-item-content {
		max-width: 100%;
		text-align: left;
	}

	.wst-timeline.wst-last-below .wst-item.wst-item-last .wst-item-topline {
		justify-content: flex-start;
	}

	.wst-timeline.wst-last-below .wst-item.wst-item-last .wst-item-title {
		text-align: left;
		white-space: nowrap;
	}

	/* Option : garder le centrage en bas sur mobile aussi */
	.wst-timeline.wst-last-below.wst-last-mobile-center .wst-item.wst-item-last {
		padding-left: 0;
		padding-right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.wst-timeline.wst-last-below.wst-last-mobile-center .wst-item.wst-item-last .wst-item-content {
		max-width: 80%;
		text-align: center;
	}

	.wst-timeline.wst-last-below.wst-last-mobile-center .wst-item.wst-item-last .wst-item-topline {
		justify-content: center;
	}

	.wst-timeline.wst-last-below.wst-last-mobile-center .wst-item.wst-item-last .wst-item-title {
		text-align: center;
		white-space: normal;
	}
}