/*
--------------------------------------
item
--------------------------------------
*/

.modale__container {
	padding: 2em;
}

/*
--------------------------------------
item
--------------------------------------
*/

.modale__content-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 2em;
}

/*Image */

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

.modale__container .modale__img-container img {
	max-width: 150px;
}

/*Surtitre*/

.modale__subhead {
	font-family: var(--e-global-typography-secondary-font-family);
	font-size: 14px;
	font-weight: 600;
	color: var(--e-global-color-secondary);
	text-align: center;
	letter-spacing: 2.8px;
	text-transform: uppercase;
}

/*Title*/

.modale__title-container {
	text-align: center;
	max-width: 85%;
	margin: auto;
}

.modale__title {
	font-family: var(--e-global-typography-primary-font-family);
	font-size: calc(22px + (32 - 22) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 400;
	color: #fff;
	text-align: center;
	line-height: calc(20px + (42 - 20) * ((100vw - 320px) / (1920 - 320)));
}

/*Btns*/

.modale__btns_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	row-gap: 10px;
	padding-top: 2em;
}

.modale-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 0;
	transition: all 0.35s ease-in-out;
}

/*First btn*/

.modale__btns_container .first-btn {
	background-color: var(--e-global-color-secondary);
	color: #fff;
	border: 1px solid var(--e-global-color-secondary);
	height: 45px;
	padding: 10px 48px;
}

.modale__btns_container .first-btn:focus,
.modale__btns_container .first-btn:hover {
	background-color: #fff;
	color: var(--e-global-color-secondary);
}

/*Second btn*/

.modale__btns_container .second-btn {
	font-weight: 600;
	color: #fff;
	text-align: center;
}

.modale__btns_container .second-btn:focus,
.modale__btns_container .second-btn:hover {
	color: var(--e-global-color-secondary);
}

.modale__btns_container .second-btn .second-btn__text {
	border-bottom: 1px solid #fff;
	transition: all 0.35s ease-in-out;
}

.modale__btns_container .second-btn:focus .second-btn__text,
.modale__btns_container .second-btn:hover .second-btn__text {
	border-bottom: 1px solid var(--e-global-color-secondary);
}