/**
 * Page Contact - Styles personnalisés
 */

/* Import Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
	--contact-primary: #c8102e;
	--contact-text: #3a3a3a;
	--contact-text-light: #6a6a6a;
	--contact-bg: #ffffff;
	--contact-bg-alt: #FAF6F2;
	--contact-border: #D9D9D9;
}

/* ==========================================================================
   Page Contact
   ========================================================================== */
.rollergrill-contact-page {
	font-family: 'Poppins', sans-serif;
	color: var(--contact-text);
}

.contact-article {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Header Simple
   ========================================================================== */
.contact-header {
	padding: 2rem 2rem 1rem;
	background: var(--contact-bg);
}

.contact-title {
	font-size: 42px;
	font-weight: 400;
	color: #7a7a7a;
	margin: 0;
	letter-spacing: -0.5px;
}

/* ==========================================================================
   Contact Content
   ========================================================================== */
.contact-content {
	padding: 2rem 2rem 4rem;
	background: var(--contact-bg);
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* ==========================================================================
   Formulaire
   ========================================================================== */
.contact-form-column {
	background: var(--contact-bg);
}

/* Styles Contact Form 7 */
.wpcf7 form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.wpcf7 form > p {
	margin: 0;
}

.wpcf7 label {
	display: flex;
	flex-direction: column;
	font-weight: 400;
	color: var(--contact-text);
	font-size: 14px;
	margin-bottom: 0;
}

/* Cibler les <p> qui contiennent les champs */
/* Société = 3ème <p>, Pays = 4ème <p>, Message = 9ème <p>, Submit = 10ème <p> */
.wpcf7 form > p:nth-of-type(3),
.wpcf7 form > p:nth-of-type(4),
.wpcf7 form > p:nth-of-type(9),
.wpcf7 form > p:nth-of-type(10) {
	grid-column: 1 / -1 !important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1px solid #e5e5e5;
	border-radius: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	transition: border-color 0.3s ease;
	background: #f5f3f0;
	color: var(--contact-text);
	margin-top: 0.5rem;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	outline: none;
	border-color: #999;
	background: #f5f3f0;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
	color: #999;
}

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

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
	background: #555758;
	color: #ffffff;
	padding: 1rem 3rem;
	border: none;
	border-radius: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
	transition: background 0.3s ease;
	width: 100%;
	text-transform: capitalize;
	letter-spacing: 0;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
	background: #3a3a3a;
}

/* Messages d'erreur */
.wpcf7 .wpcf7-not-valid-tip {
	color: #dc3232;
	font-size: 13px;
	font-weight: 400;
	margin-top: 0.25rem;
}

/* Responsive : mobile 1 colonne */
@media (max-width: 768px) {
	.wpcf7 form {
		grid-template-columns: 1fr;
	}
	
	.wpcf7 form > p:nth-of-type(3),
	.wpcf7 form > p:nth-of-type(4),
	.wpcf7 form > p:nth-of-type(9),
	.wpcf7 form > p:nth-of-type(10) {
		grid-column: 1;
	}
}

/* Messages CF7 */
.wpcf7-response-output {
	border: 2px solid;
	padding: 1rem;
	border-radius: 0;
	margin: 1.5rem 0 0;
}

.wpcf7-mail-sent-ok {
	border-color: #46b450;
	background: #ecf7ed;
	color: #46b450;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
	border-color: #dc3232;
	background: #fef7f7;
	color: #dc3232;
}

/* ==========================================================================
   Colonne Droite : Map + Coordonnées
   ========================================================================== */
.contact-info-column {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Map Embed */
.contact-map-embed {
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
}

.contact-map-embed iframe {
	width: 100%;
	height: 250px;
	display: block;
}

/* Blocs d'informations */
.contact-info-block {
	background: var(--contact-bg);
	padding: 1.5rem;
	border: 1px solid var(--contact-border);
}

.contact-info-block__title {
	font-size: 18px;
	font-weight: 600;
	color: #555758;
	margin: 0 0 1.5rem;
	line-height: 1.4;
}

.contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
}

.contact-info-item:last-child {
	margin-bottom: 0;
}

.contact-info-item__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.2rem;
	filter: invert(18%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(96%) contrast(87%);
}

.contact-info-item p {
	font-size: 14px;
	line-height: 1.7;
	color: #7a7a7a;
	margin: 0;
}

.contact-info-item p strong {
	color: #555758;
	font-weight: 500;
}

.contact-info-item a {
	color: #7a7a7a;
	text-decoration: none;
	transition: color 0.3s ease;
}

.contact-info-item a:hover {
	color: var(--contact-primary);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.contact-layout {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	
	.contact-title {
		font-size: 32px;
	}
}

@media (max-width: 768px) {
	.contact-header {
		padding: 1.5rem 1rem 0.5rem;
	}
	
	.contact-title {
		font-size: 28px;
	}
	
	.contact-content {
		padding: 1.5rem 1rem 3rem;
	}
	
	.contact-layout {
		gap: 2rem;
	}
	
	.contact-map-embed iframe {
		height: 200px;
	}
}