/* Variables CSS pour la maintenabilité */
:root {
	--primary-color: #3b82f6;
	--bg-secondary: #f9fafb;
	--shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--transition-fast: 0.3s;
	--transition-slow: 0.5s;
	--gap-large: 2rem;
	--gap-medium: 1.5rem;
	--gap-small: 1rem;
}

/* Styles de base */
.gradient-bg { background-color: var(--primary-color); }
.side-borders { background-color: var(--bg-secondary); }

/* Cartes de tarification */
.plan-card {
	display: flex;
	flex-direction: column;
	transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.plan-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-hover);
}

/* Contenu des cartes */
.plan-card > div {
	display: flex;
	flex-direction: column;
}

.plan-card ul {
	flex-grow: 0;
}

.plan-card a {
	margin-top: var(--gap-small);
}

/* Accordéon */
.expandable-features {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-fast) ease-out;
}

.expandable-features.expanded {
	max-height: 500px;
	transition: max-height var(--transition-slow) ease-in;
}

/* Grille responsive */
.plan-grid {
	display: grid;
	gap: var(--gap-large);
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Responsive */
@media (max-width: 768px) {
	.flex-mobile-col { flex-direction: column; }
	.nav-mobile {
		display: flex;
		justify-content: center;
		margin: var(--gap-small) 0;
	}
	.w-mobile-full { width: 100%; }
	.footer-columns {
		flex-direction: column;
		align-items: center;
	}
	.footer-column {
		margin-bottom: var(--gap-large);
		padding: 0;
	}
	
	.plan-grid {
		grid-template-columns: 1fr;
	}
	
	.plan-card {
		margin-bottom: var(--gap-medium);
	}
}

@media (min-width: 768px) {
	.plan-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.plan-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Styles spécifiques au formulaire */
.form-control:focus {
	box-shadow: 0 0 0 3px rgba(171, 223, 213, 1);
}