/* Styles spécifiques à la page contact */
.contact-section {
	padding: var(--spacing-16) 0;
	background-color: var(--bg-body);
}

.contact-container {
	display: flex;
	gap: var(--spacing-12);
	max-width: 1000px;
	margin: 0 auto;
}

.contact-info {
	flex: 1;
}

.contact-info h3 {
	margin-bottom: var(--spacing-4);
	color: var(--text-dark);
	font-size: var(--font-size-xl);
}

.contact-info p {
	margin-bottom: var(--spacing-6);
	color: var(--text-muted);
}

.contact-method {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	margin-bottom: var(--spacing-4);
	color: var(--text-dark);
}

.contact-method i {
	width: 40px;
	height: 40px;
	background-color: rgba(67, 97, 238, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	font-size: var(--font-size-lg);
}

.contact-form {
	flex: 2;
	background-color: var(--bg-card);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	padding: var(--spacing-8);
}

.form-group {
	margin-bottom: var(--spacing-4);
}

.form-group label {
	display: block;
	margin-bottom: var(--spacing-2);
	font-weight: var(--font-weight-medium);
	color: var(--text-dark);
}

.form-control {
	width: 100%;
	padding: var(--spacing-3);
	border: 1px solid var(--gray-300);
	border-radius: var(--border-radius);
	font-size: var(--font-size-base);
	transition: border-color var(--transition-fast);
}

.form-control:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
}

.form-control.is-invalid {
	border-color: var(--danger);
}

.invalid-feedback {
	color: var(--danger);
	font-size: var(--font-size-sm);
	margin-top: var(--spacing-1);
}

textarea.form-control {
	min-height: 150px;
	resize: vertical;
}

.form-check {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	margin-bottom: var(--spacing-2);
}

.form-check-input {
	width: 18px;
	height: 18px;
}

/* Styles du captcha sont définis dans tactacfact.css */

.alert {
	padding: var(--spacing-4);
	border-radius: var(--border-radius);
	margin-bottom: var(--spacing-4);
}

.alert-success {
	background-color: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	color: #065f46;
}

/* Support pour les petits écrans */
@media (max-width: 768px) {
	.contact-container {
		flex-direction: column;
	}
	
	.contact-info, .contact-form {
		width: 100%;
	}
}