/*
 * Page Association — chronologie et adhésion.
 *
 * Les cadres biseautés proviennent de borders.css : seules la mise en page et
 * la ligne de temps sont définies ici.
 */

/* --- Chronologie --- */

.association-timeline {
	position: relative;
	display: grid;
	gap: clamp(14px, 1.8vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La ligne verticale relie les jalons, derrière les pastilles. */
.association-timeline::before {
	position: absolute;
	z-index: 0;
	top: 14px;
	bottom: 14px;
	left: 23px;
	width: 1px;
	content: "";
	background: linear-gradient(180deg, transparent, rgba(123, 77, 255, .55) 8%, rgba(187, 44, 224, .5) 92%, transparent);
}

.association-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: start;
	gap: clamp(14px, 1.6vw, 22px);
	margin: 0;
}

.association-timeline__marker {
	position: relative;
	z-index: 1;
	display: grid;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(151, 105, 245, .42);
	border-radius: 50%;
	color: #c9b8f3;
	background: radial-gradient(circle at 50% 35%, rgba(123, 77, 255, .3), rgba(8, 10, 34, .98) 70%), #080a22;
	box-shadow: 0 0 18px rgba(123, 77, 255, .16);
	place-items: center;
}

.association-timeline__marker .icon {
	width: 21px;
	height: 21px;
}

.association-timeline__card {
	--az-cut: 9px;
	padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
}

.association-timeline__year {
	margin: 0 0 4px;
	color: var(--az-orange);
	font-family: var(--az-font-display);
	font-size: 1.15rem;
	letter-spacing: .06em;
}

.association-timeline__card h3 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	font-weight: 600;
	line-height: 1.25;
}

.association-timeline__points {
	display: grid;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.association-timeline__points li {
	position: relative;
	margin: 0;
	padding-left: 20px;
	color: #b9bdd0;
	font-size: .82rem;
	line-height: 1.55;
}

.association-timeline__points li::before {
	position: absolute;
	top: 0;
	left: 0;
	color: rgba(168, 128, 240, .9);
	content: "→";
}

/* --- Adhésion gratuite --- */

.association-membership {
	--az-cut: 13px;
	--az-border-start: rgba(123, 77, 255, .72);
	--az-border-end: rgba(187, 44, 224, .66);
	--az-frame-fill:
		radial-gradient(circle at 88% 30%, rgba(169, 116, 238, .14), transparent 32%),
		linear-gradient(125deg, rgba(16, 14, 38, .99), rgba(9, 9, 28, .99));
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(26px, 4vw, 56px);
	padding: clamp(26px, 3.2vw, 44px);
}

.association-membership__copy {
	position: relative;
	z-index: 1;
}

.association-membership h2 {
	margin: 6px 0 12px;
	font-size: clamp(1.75rem, 3vw, 2.9rem);
	font-weight: 600;
	line-height: 1.08;
}

.association-membership__copy p {
	max-width: 640px;
	margin: 0;
	color: #c3c6d6;
	font-size: clamp(.86rem, 1vw, .96rem);
	line-height: 1.6;
}

.association-membership__points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.association-membership__points li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 7px 12px;
	border: 1px solid rgba(170, 128, 235, .22);
	border-radius: 999px;
	color: #d9d5e5;
	background: rgba(164, 119, 229, .05);
	font-size: .68rem;
	font-weight: 600;
}

.association-membership__points .icon {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	color: #7ce0b4;
}

/* Le montant est décoratif : le titre porte déjà l'information. */
.association-membership__amount {
	position: relative;
	z-index: 1;
	margin: 0;
	color: transparent;
	background: linear-gradient(135deg, #ff9c00, #f23432 46%, #e31693);
	background-clip: text;
	font-family: var(--az-font-display);
	font-size: clamp(3.6rem, 8vw, 7rem);
	line-height: .9;
	white-space: nowrap;
	-webkit-background-clip: text;
}

@media (max-width: 780px) {
	.association-membership {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.association-membership__amount {
		order: -1;
	}

	.association-timeline::before {
		left: 18px;
	}

	.association-timeline__step {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 12px;
	}

	.association-timeline__marker {
		width: 38px;
		height: 38px;
	}

	.association-timeline__marker .icon {
		width: 17px;
		height: 17px;
	}
}