/*
--------------------------------------
Vars
--------------------------------------
*/

:root {
	--primary-color: #121624;
	--secondary-color: #363945;
}

/*
--------------------------------------
Modal trigger
--------------------------------------
*/

.modal-trigger {
	position: absolute;
	bottom: calc(10px + (70 - 10) * ((100vw - 320px) / (1920 - 320)));
	right: calc(15px + (70 - 15) * ((100vw - 320px) / (1920 - 320)));
	cursor: pointer;
}

/*
--------------------------------------
Container
--------------------------------------
*/

.modal {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s;
}

.modal--is-active {
	background-color: rgba(0, 0, 0, 0.5);
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.modal__inner {
	position: relative;
	background-color: var(--primary-color);
	border-radius: 6.5px;
	box-shadow: 0 3.6565px 27.4238px rgba(190, 220, 242, 0.30);
	width: calc(330px + (700 - 330) * ((100vw - 320px) / (1920 - 320)));
	max-width: calc(330px + (700 - 330) * ((100vw - 320px) / (1920 - 320)));
	margin: 1em;
	padding: calc(15px + (80 - 15) * ((100vw - 320px) / (1920 - 320)));
}

.modal__inner:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 3px;
	background: linear-gradient(90deg, #52D0E8 0%, #6C91FB 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box,
	linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/*
--------------------------------------
Close
--------------------------------------
*/

.modal__close {
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
}

/*
--------------------------------------
Content
--------------------------------------
*/

/*common*/

.modal__element {
	border-radius: 8px;
	border: 1px solid #545761;
	background: var(--secondary-color);
	padding: 1.15em calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.modal__element-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.18px;
}

/* logo bwa*/

.modal__logo-container {
	display: flex;
	justify-content: center;
}

/*description*/

.modal__description-container {
	display: flex;
	flex-direction: column;
	row-gap: 15px;
	padding: 1em 0;
}

.modal__description-item {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
}

/*
--------------------------------------
Items
--------------------------------------
*/

/*title*/

.modal__description-item-icon-title {
	display: flex;
	align-items: center;
	gap: 15px;
}

/*description*/

.modal__description-content {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.15px;
}

.modal__description-content p {
	margin: 0;
}

/*info*/

.modal__btn-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/*
--------------------------------------
Contact
--------------------------------------
*/

.modal__btn-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 15px;
}

/*title + description*/

.modal__btn-contact-title-description {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	row-gap: 10px;
}

/*description*/

.modal__btn-contact-description {
	opacity: 0.7;
}

/*btn*/

.modal__btn-container .btn-primary {
	height: 44px;
}

/*séparateur ou*/

.modal__separator {
	width: 90%;
	padding: .75em;
}

.modal__separator-text {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
	text-transform: uppercase;
}

.modal__separator-text:after,
.modal__separator-text:before {
	display: inline-block;
	flex: 1 0 0;
	width: 30%;
	min-width: 10px;
	height: 1px;
	content: '';
	background: #fff;
	opacity: 0.7;
}

.modal__separator-text:before {
	margin-right: 15px;
}

.modal__separator-text:after {
	margin-left: 15px;
}

/*tel + mail*/

.modal__btns-contact {
	display: flex;
	column-gap: 10px;
}
/*
--------------------------------------
Mautic form view
--------------------------------------
*/

.modal__view-default[hidden] {
	display: none;
}

.modal__form-view {
	display: flex;
	justify-content: center;
	align-items: stretch;
}

.modal__form-view[hidden] {
	display: none;
}

.modal__form-frame {
	width: 100%;
	min-height: 320px;
	height: min(70vh, 640px);
	overflow: auto;
}

.mauticform-label {
	color: #fff !important;
}

.modal__form-frame form {
	font-family: var(--primary-typo), sans-serif;
}

button.btn.btn-ghost.mauticform-button:hover,
button.btn.btn-ghost.mauticform-button:focus {
	color: #000;
}