/**
 * SOS Timeline ADAS — styles scopés (classes stables sos-tl-adas-*).
 *
 * Layout vertical (identique desktop / mobile) :
 *   - rond 40px numéroté à gauche, n° Outfit 20px/900
 *   - ligne de liaison verticale bleu marque #009FE6
 *   - carte lavande radius 12px, titre Outfit 20px/700 #0D1660, desc 14px #4A4A68
 *
 * La ligne verticale est positionnée en ABSOLU (reliée du bas d'un rond au rond
 * suivant). Volontairement PAS en flex-grow : ce dernier pouvait se réduire à 0
 * sur mobile → ligne invisible. En absolu, elle est garantie sur tous les écrans.
 *
 * Les couleurs de fond (rond, carte) sont aussi injectées par les contrôles
 * Elementor (défauts #0D1660 et #F0F1F8) ; les background-color ci-dessous sont
 * des filets de sécurité.
 */

.sos-tl-adas-wrapper {
	display: flex;
	flex-direction: column;
}

.sos-tl-adas-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 24px;
}

.sos-tl-adas-item:last-child {
	padding-bottom: 0;
}

.sos-tl-adas-marker {
	display: flex;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
}

.sos-tl-adas-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	/* Fallback : fond du rond garanti même sans le CSS généré par le contrôle
	   Elementor (qui reste prioritaire, sélecteur plus spécifique). */
	background-color: #0D1660;
	color: #FFFFFF;
	font-family: "Outfit", sans-serif;
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
	flex-shrink: 0;
}

/* Ligne verticale : du bas du rond jusqu'au rond de l'étape suivante.
   Positionnée en absolu par rapport à l'étape (.sos-tl-adas-item est en
   position:relative). Le PHP n'insère pas ce <span> sur la dernière étape. */
.sos-tl-adas-line {
	position: absolute;
	top: 40px;            /* juste sous le rond de 40px */
	bottom: 0;            /* jusqu'au bas de l'étape → rejoint le rond suivant */
	left: 20px;           /* centre de la colonne marqueur (40px) */
	width: 2px;
	margin-left: -1px;    /* recentre la ligne de 2px sur l'axe */
	background-color: #009FE6;
}

.sos-tl-adas-card {
	/* Fallback : fond de carte garanti même sans le CSS généré par le contrôle
	   Elementor « Couleur de fond de carte » (qui reste prioritaire). */
	background-color: #F0F1F8;
	border-radius: 12px;
	padding: 20px 24px;
	flex-grow: 1;
}

.sos-tl-adas-title {
	margin: 0 0 2px 0;
	padding: 0;
	font-family: "Outfit", sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #0D1660;
	line-height: 1.3;
}

.sos-tl-adas-desc {
	margin: 0;
	padding: 0;
	font-family: "Outfit", sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #4A4A68;
	line-height: 1.5;
}