@import url("variables.css");

.ravioli-contact {
	padding-top: var(--wp--preset--spacing--7xl) !important;
	padding-bottom: var(--wp--preset--spacing--7xl);
	background-color: var(--wp--preset--color--blanc);
}

.ravioli-contact__title {
	margin: 0 0 var(--wp--preset--spacing--medium);
}

.ravioli-contact__intro {
	max-width: 100%;
	margin: 0 auto var(--wp--preset--spacing--2xs);
}

.ravioli-contact__row {
	align-items: flex-start !important;
	margin-top: var(--wp--preset--spacing--xl);
	gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--3xl);
}

.ravioli-contact__col--infos {
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
}

.ravioli-contact__col--infos > * + * {
	margin-top: var(--wp--preset--spacing--large);
}

/* Champs du formulaire Gravity Forms */
.ravioli-contact__col--form .gform_wrapper input[type="text"],
.ravioli-contact__col--form .gform_wrapper input[type="email"],
.ravioli-contact__col--form .gform_wrapper input[type="tel"],
.ravioli-contact__col--form .gform_wrapper textarea,
.ravioli-contact__col--form .gform_wrapper select {
	width: 100%;
	border: 1px solid var(--wp--preset--color--noir);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--large);
}

.ravioli-contact__box {
	padding: var(--wp--preset--spacing--3xl);
	border-radius: 16px;
}

.ravioli-contact__box-title {
	margin: 0 0 var(--wp--preset--spacing--medium);
	font-family: var(--wp--preset--font-family--sofia-pro);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ravioli-contact__phone {
	margin: 0 0 var(--wp--preset--spacing--medium);
}

.ravioli-contact__address {
	margin: 0;
	line-height: 1.6;
}

.ravioli-contact__box--tips {
	color: var(--wp--preset--color--noir);
}

.ravioli-contact__tips-intro {
	margin: 0 0 var(--wp--preset--spacing--large);
}

.ravioli-contact__tips-row {
	gap: var(--wp--preset--spacing--large);
}

.ravioli-contact__tip-title {
	margin: 0 0 var(--wp--preset--spacing--medium);
	font-family: var(--wp--preset--font-family--sofia-pro);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	min-height: 45px;
	display: flex;
	align-items: flex-end;
}

.ravioli-contact__tip-image {
	margin: 0 0 var(--wp--preset--spacing--medium);
}

.ravioli-contact__tip-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.ravioli-contact__tip-caption {
	margin: 0;
	opacity: 0.8;
}

.gform_heading .gform_title,
.gform_heading .gform_required_legend{
	display: none;
}
.gform_body input[type="text"],
.gform_body input[type="number"],
.gform_body input[type="email"],
.gform_body input[type="password"],
.gform_body select,
.gform_body textarea {
	width: 100% !important;
	box-sizing: border-box;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--noir);
}
.ravioli-contact__col--form .gform_wrapper select{
	padding-top: 0;
	padding-bottom: 0;
}
.gform_body .ginput_container_fileupload .gform_drop_area{
	border-radius: 16px;
	border: 1px dashed var(--wp--preset--color--rouge);
	background-color: var(--wp--preset--color--rouge-clair);
}
.gform_body .ginput_container_fileupload .gform_drop_area::before{
	display: none !important;
}
.gform_body .ginput_container_fileupload .gform_drop_area .gform_drop_instructions{
	color: var(--wp--preset--color--noir);
}
.gform_body .ginput_container_fileupload .gform_drop_area button.gform_button_select_files{
	border-radius: 999px !important;
	border: 1px solid var(--wp--preset--color--rouge) !important;
	background-color: var(--wp--preset--color--blanc) !important;
	color: var(--wp--preset--color--rouge) !important;
}
.gform_body .gform_fileupload_rules,
.gform_body .not-displayed label{
	color: var(--wp--preset--color--noir) !important;
	font-size: var(--wp--preset--font-size--xxs) !important;
}
.gform-theme--foundation .gform_fields{
	gap: var(--wp--preset--spacing--xl) !important;
}
.gform_body .not-displayed div{
	display: none;
}
.gform-footer input[type="submit"]{
	padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--xl) !important;
	font-family: var(--wp--preset--font-family--sofia-pro) !important;
	font-size: var(--wp--preset--font-size--base) !important;
	border-radius: 999px !important;
	background-color: var(--wp--preset--color--rouge) !important;
	color: var(--wp--preset--color--blanc) !important;
}

@media (max-width: 782px) {
	.ravioli-contact__row {
		gap: var(--wp--preset--spacing--3xl);
	}

	.ravioli-contact__tips-row {
		flex-wrap: wrap;
	}

	.ravioli-contact__tip div,
	.ravioli-contact__tip figure,
	.ravioli-contact__tip h4,
	.ravioli-contact__tip p{
		width: 100%;
	}
}