/* Serviconfor – Étapes d'intervention
   Pastilles rondes reprenant le style du visuel Serviconfor.
   Taille des pastilles pilotée par --sce-taille : 150px sur smartphone,
   200px à partir de 1100px. Aucune interaction : uniquement l'animation. */

.sce {
	--sce-bleu: #1a9fe0;
	--sce-bleu-fonce: #0e7bb5;
	--sce-encre: #1f2a44;
	--sce-gris: #5b6472;
	--sce-fond-pastille: #ffffff;
	--sce-ombre: rgba(26, 159, 224, 0.28);

	/* Dimensions – valeurs smartphone */
	--sce-taille: 150px;
	--sce-numero: 52px;
	--sce-largeur-max: 1200px;

	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 2.5rem 0;
	box-sizing: border-box;
	color: var(--sce-encre);
	font-family: inherit;
}

/* Neutralise la largeur limitée héritée du widget Texte Elementor */
.elementor-widget-text-editor .sce,
.elementor-widget-container .sce {
	width: 100%;
	max-width: 100%;
}

.sce *,
.sce *::before,
.sce *::after {
	box-sizing: border-box;
}

.sce__titre {
	font-size: clamp(1.75rem, 4vw, 2.6rem);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-align: center;
	margin: 0 0 3rem;
	color: var(--sce-encre);
}

/* Liste ------------------------------------------------------------ */
.sce__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 3rem;
}

/* Étape */
.sce__etape {
	position: relative;
	display: grid;
	grid-template-columns: var(--sce-taille) 1fr;
	gap: 1.5rem;
	align-items: center;
}

/* Flèche vers le bas reliant les pastilles (vue verticale mobile) */
.sce__etape:not(:last-child)::before {
	content: "";
	position: absolute;
	left: calc(var(--sce-taille) / 2 - 20px);
	top: auto;
	bottom: -2.75rem;
	width: 40px;
	height: 40px;
	background: var(--sce-bleu);
	opacity: 1;

	-webkit-mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E");

	mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E");

	animation: sce-fleche-bas 6s ease-out infinite both;
	animation-delay: calc(var(--sce-i) * 1.2s + 0.8s);
}

/* Pastille ronde -------------------------------------------------- */
.sce__pastille {
	position: relative;
	width: var(--sce-taille);
	height: var(--sce-taille);
	min-width: var(--sce-taille);
	flex: 0 0 auto;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--sce-bleu);
}

/* Fond + ombre de la pastille déplacés sur ::before pour être animés
   indépendamment du numéro (qui apparaît avant). */
.sce__pastille::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--sce-fond-pastille);
	box-shadow: 0 0 30px -6px var(--sce-ombre);
	z-index: 0;
	animation: sce-apparition 6s ease-out infinite both;
	animation-delay: calc(var(--sce-i) * 1.2s + 0.4s);
}

/* Visuel : SVG inline ou image ------------------------------------ */
.sce__icone,
.sce__image {
	position: relative;
	z-index: 1;
	animation: sce-apparition 6s ease-out infinite both;
	animation-delay: calc(var(--sce-i) * 1.2s + 0.4s);
}

.sce__icone svg,
.sce__image {
	width: calc(var(--sce-taille) * 0.45);
	height: calc(var(--sce-taille) * 0.5);
	display: block;
}

.sce__image {
	object-fit: contain;
	max-width: 100%;
}

/* Camion légèrement plus grand pour compenser sa marge interne */
.sce__etape:nth-child(2) .sce__image {
	width: calc(var(--sce-taille) * 0.55);
	height: calc(var(--sce-taille) * 0.55);
}

/* La variante « hover » n'est plus utilisée : on n'affiche que l'image de base. */
.sce__image--hover {
	display: none;
}

.sce__numero {
	position: absolute;
	top: -2px;
	right: -2px;
	width: var(--sce-numero);
	height: var(--sce-numero);
	min-width: var(--sce-numero);
	padding: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	border-radius: 50%;
	background: var(--sce-bleu);
	color: #fff;

	font-size: 1.8rem;
	font-weight: 900;
	line-height: var(--sce-numero) !important;
	text-align: center;

	border: 4px solid #fff;
	z-index: 2;

	animation: sce-numero-bounce 6s ease-out infinite both;
	animation-delay: calc(var(--sce-i) * 1.2s);
}

/* Contenu --------------------------------------------------------- */
.sce__etape-titre {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--sce-bleu-fonce);
}

.sce__etape-desc {
	font-size: 1.02rem;
	line-height: 1.6;
	margin: 0;
	color: var(--sce-gris);
}

/* Petits écrans : gouttière réduite pour laisser respirer le texte -- */
@media (max-width: 400px) {
	.sce__etape {
		gap: 1rem;
	}
}

/* Desktop : 3 pastilles horizontales pleine largeur --------------- */
@media (min-width: 780px) {
	.sce {
		--sce-taille: 150px;
		--sce-numero: 56px;
	}

	.sce__liste {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(1rem, 4vw, 3rem);
		align-items: start;
		max-width: var(--sce-largeur-max);
		margin-inline: auto;
	}

	.sce__etape {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 1.5rem;
	}

	.sce__numero {
		font-size: 2.5rem;
		border-width: 5px;
		--sce-numero-y: 5px;
	}

	/* Flèche horizontale entre les pastilles */
	.sce__etape:not(:last-child)::before {
		content: "";
		position: absolute;
		left: auto;
		left: calc(100% + (clamp(1rem, 4vw, 3rem) - 56px) / 2);
		right: auto;
		top: calc(var(--sce-taille) / 2 - 24px);
		bottom: auto;
		width: 56px;
		height: 48px;
		background: var(--sce-bleu);
		opacity: 1;

		-webkit-mask: no-repeat center / contain
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

		mask: no-repeat center / contain
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");

		animation: sce-fleche-droite 6s ease-out infinite both;
		animation-delay: calc(var(--sce-i) * 1.2s + 0.8s);
	}

	.sce__contenu {
		max-width: 320px;
	}
}

/* Grand écran : pastilles pleine taille */
@media (min-width: 1100px) {
	.sce {
		--sce-taille: 200px;
		--sce-numero: 68px;
		--sce-largeur-max: 1360px;
	}

	.sce__etape:not(:last-child)::before {
		left: calc(100% + (clamp(1rem, 4vw, 3rem) - 72px) / 2);
		right: auto;
		top: calc(var(--sce-taille) / 2 - 31px);
		width: 72px;
		height: 62px;
	}
}

/* Animation ------------------------------------------------------- */
@keyframes sce-apparition {
	0%   { opacity: 0; }
	15%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes sce-numero-bounce {
	0%   { opacity: 0; transform: translateY(var(--sce-numero-y, 4px)) scale(0.3); }
	6%   { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(1.35); }
	10%  { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(0.9); }
	13%  { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(1.05); }
	15%  { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(1); }
	90%  { opacity: 1; transform: translateY(var(--sce-numero-y, 4px)) scale(1); }
	100% { opacity: 0; transform: translateY(var(--sce-numero-y, 4px)) scale(1); }
}

@keyframes sce-fleche-bas {
	0%   { opacity: 0; transform: translateY(-20px); }
	15%  { opacity: 1; transform: translateY(0); }
	90%  { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(0); }
}

@keyframes sce-fleche-droite {
	0%   { opacity: 0; transform: translateX(-20px); }
	15%  { opacity: 1; transform: translateX(0); }
	90%  { opacity: 1; transform: translateX(0); }
	100% { opacity: 0; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.sce__pastille::before,
	.sce__icone,
	.sce__image,
	.sce__numero,
	.sce__etape:not(:last-child)::before {
		animation: none;
		opacity: 1;
	}
}