:root {
		--primary-color: #cf0b5d;
		--primary-hover: #a8084a;
		--text-dark: #2f2e41;
		--text-light: #6c757d;
		--bg-light: #f8f9fa;
		--white: #ffffff;
		--card-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
		--input-border: #e9ecef;
}

* {
		box-sizing: border-box;
}

body {
		margin: 0;
		font-family: 'Lexend Deca', 'Segoe UI', Tahoma, sans-serif;
		background-color: var(--bg-light);
		color: var(--text-dark);
}

.page-wrapper {
		display: flex;
		justify-content: center;
		padding: 32px 20px 48px;
		min-height: calc(100vh - 150px);
}

.content-container {
		display: flex;
		flex-direction: row;
		max-width: 1200px;
		width: 100%;
		gap: 56px;
		align-items: flex-start;
}

.info-side {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 24px;
}

.info-header h1 {
		font-size: 34px;
		color: var(--text-dark);
		margin: 0 0 12px 0;
		font-weight: 700;
		letter-spacing: -0.3px;
}

.subtitle {
		font-size: 16px;
		color: var(--text-light);
		line-height: 1.6;
		margin: 0;
}

.info-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
}

.info-card {
		background: var(--white);
		padding: 18px;
		border-radius: 16px;
		box-shadow: var(--card-shadow);
		display: flex;
		align-items: center;
		gap: 14px;
		transition: transform 0.2s ease;
}

.info-card:hover {
		transform: translateY(-4px);
}

.icon-wrapper {
		width: 44px;
		height: 44px;
		background-color: rgba(207, 11, 93, 0.12);
		border-radius: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		color: var(--text-dark);
		font-size: 18px;
}

.info-text h3 {
		margin: 0 0 6px 0;
		font-size: 16px;
		color: var(--text-dark);
		font-weight: 700;
}

.info-text p {
		margin: 0;
		font-size: 14px;
		color: var(--text-light);
		line-height: 1.5;
}

.visual-block {
		background: linear-gradient(225deg, rgba(207, 11, 93, 0.18), #ffffff);
		border-radius: 18px;
		padding: 22px;
		box-shadow: var(--card-shadow);
}

.visual-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
}

.visual-text h3 {
		margin: 0 0 8px 0;
		font-size: 20px;
		color: var(--text-dark);
		font-weight: 700;
}

.visual-text p {
		margin: 0 0 14px 0;
		color: var(--text-light);
		line-height: 1.5;
}

.stats {
		display: flex;
		gap: 14px;
		flex-wrap: wrap;
}

.stat {
		background: var(--white);
		border-radius: 12px;
		padding: 12px 14px;
		box-shadow: var(--card-shadow);
		min-width: 120px;
}

.stat-number {
		display: block;
		font-size: 18px;
		font-weight: 700;
		color: var(--primary-color);
}

.stat-label {
		font-size: 13px;
		color: var(--text-light);
}

.visual-illustration img,
.visual-illustration svg {
		display: block;
		max-width: 100px;
		height: auto;
}

.form-side {
		flex: 1;
		max-width: 500px;
}

.contact-card {
		background: var(--white);
		border-radius: 22px;
		box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
		overflow: hidden;
		position: relative;
		border: 1px solid var(--input-border);
}

.card-header {
		background: var(--primary-color);
		padding: 26px 26px 34px 26px;
		color: var(--white);
		text-align: center;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
}

.header-icon {
		width: 46px;
		height: 46px;
		background: rgba(255, 255, 255, 0.18);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
}

.card-header h2 {
		margin: 0;
		font-size: 20px;
		font-weight: 600;
}

.card-body {
		padding: 26px;
		margin-top: -12px;
		background: var(--white);
		border-radius: 22px 22px 0 0;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 14px;
}

.input-group {
		display: flex;
		flex-direction: column;
		gap: 8px;
}

.input-group label {
		font-size: 14px;
		font-weight: 600;
		color: var(--text-dark);
}

.input-group input {
		width: 100%;
		padding: 14px 16px;
		border-radius: 12px;
		border: 1px solid var(--input-border);
		background: #fff;
		font-size: 15px;
		transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.input-group input:focus {
		outline: none;
		border-color: var(--primary-color);
		box-shadow: 0 0 0 4px rgba(207, 11, 93, 0.12);
}

.helper-text {
		margin: 2px 0 0;
		font-size: 13px;
		color: var(--text-light);
}

.hint-text {
		margin: 6px 0 0;
		font-size: 13px;
		color: var(--text-light);
		text-align: center;
}

button[type="button"] {
		width: 100%;
		background-color: var(--primary-color);
		color: var(--white);
		border: none;
		padding: 14px;
		border-radius: 12px;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
		transition: background-color 0.2s, transform 0.1s ease, box-shadow 0.2s ease;
		box-shadow: var(--card-shadow);
}

button[type="button"]:hover {
		background-color: var(--primary-hover);
		transform: translateY(-1px);
}

button[type="button"]:active {
		transform: translateY(0);
}

.partner-link {
		display: block;
		text-align: center;
		padding: 18px;
		background-color: #fdf2f6;
		color: var(--text-light);
		font-size: 14px;
		text-decoration: none;
		border-top: 1px solid #fceef3;
}

.partner-link span {
		color: var(--primary-color);
		font-weight: 700;
}

.partner-link:hover span {
		text-decoration: underline;
}

#lienPartenaire {
		text-decoration: none;
}

@media (max-width: 992px) {
		.content-container {
				flex-direction: column-reverse;
				gap: 42px;
		}

		.info-grid {
				grid-template-columns: 1fr;
		}

		.form-side {
				width: 100%;
				max-width: 100%;
		}

		.visual-content {
				flex-direction: column;
				align-items: flex-start;
		}

		.visual-illustration img,
		.visual-illustration svg {
				display: none;
		}
}

@media (max-width: 600px) {
		.page-wrapper {
				padding: 28px 16px 40px;
		}

		.info-header h1 {
				font-size: 28px;
		}

		.card-header {
				padding: 22px;
		}

		.card-body {
				padding: 22px 20px 20px;
		}

		.stats {
				flex-wrap: nowrap;
		}

		.stat {
				min-width: auto;
		}
}