/* ----------------------------------------------------------------------------
   CONTAINERS DE BANNIÈRES
   ---------------------------------------------------------------------------- */

* {
font-family: AvenirNextLTPro, sans-serif;
}
   
a {
	all: unset;
	cursor: pointer;
}

/* Wrapper principal */
.operation_banner_wrapper {
	width: 100%;
	background: rgb(97, 97, 243);
	display: flex;
	justify-content: center;
}

/* Container desktop */
.operation_banner_container_desktop {
	display: flex;
	align-items: center;
	background-color: rgb(97, 97, 243);
	padding: 15px 60px;
	opacity: 1;
	width: 100%;
	max-width: 1381px;
}


/* Container mobile */
.operation_banner_container_mobile {
	display: flex;
	flex-direction: column;
}

.popup_checkbox_container .popup_field_label {
	color: #000000 !important;
}
/* ----------------------------------------------------------------------------
   LAYOUT FLEXBOX - LEFT / CENTER / RIGHT
   ---------------------------------------------------------------------------- */

/* Container gauche */
.operation_left_container {
	display: flex;
	gap: 15px;
	align-items: center;
}

/* Container centre */
.operation_center_container {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
}

/* Code promo en évidence */
.operation_promo_code_highlight {
	font-weight: 700;
	text-decoration: underline;
}

/* Container droit */
.operation_right_container {
	display: flex;
	gap: 15px;
	align-items: center;
}

/* Container gauche avec nowrap */
.operation_left_container_nowrap {
	display: flex;
	gap: 15px;
	align-items: center;
	text-wrap: nowrap;
}

/* ----------------------------------------------------------------------------
   CONTAINER MOBILE INTERNE
   ---------------------------------------------------------------------------- */

.operation_banner_inner_container_mobile {
	display: flex;
	flex-direction: row;
	gap: 15px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

/* ----------------------------------------------------------------------------
   BANNIÈRES SUB HEADER
   ---------------------------------------------------------------------------- */

.operation_sub_header_desktop {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: start;
	max-width: 1010px;
}

.operation_sub_header_mobile {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 5px;
	max-width: 1010px;
	height: fit-content;
}

/* ----------------------------------------------------------------------------
   COMPOSANTS TEXTUELS
   ---------------------------------------------------------------------------- */

/* Texte aligné à gauche, pleine largeur */
.operation_text_fullwidth {
	text-align: left;
	width: 100%;
	align-self: flex-start;
}

/* Pastille avec fit-content */
.operation_pastille_fit {
	text-wrap: nowrap;
	width: fit-content;
}

/* ----------------------------------------------------------------------------
   MINI BANNERS
   ---------------------------------------------------------------------------- */

/* Container principal pour mini banner */
.operation_mini_banner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

/* ----------------------------------------------------------------------------
   PRIX BARRÉS - Containers flexbox statiques
   ---------------------------------------------------------------------------- */

/* Container pour les prix barrés (flex column par défaut) */
.operation_striked_price_container {
	display: flex;
	flex-direction: column;
	align-items: baseline;
}

/* Containers de texte pour les prix barrés - Individuals Rental */
.operations_text_container_rental_individuals {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px
}

.operations_text_price_ht_rental_individuals {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: Avenirnextltpro Demi, sans-serif;
}

.operations_span_mois_rental_individuals {
	display: inline;
}

.operations_span_ttc_rental_individuals {
	display: inline;
}

.operations_span_mois_striked_rental_individuals {
	display: inline;
}

.operations_span_ttc_striked_rental_individuals {
	display: inline;
}

.operations_sub_text_rental_individuals {
	display: flex;
	gap: 5px;

}

/* Classe utilitaire pour texte barré */
.operation_text_striked {
	text-decoration: line-through;
	text-decoration-color: #ffffff;
	font-family: Avenirnextltpro Demi, sans-serif;
}

/* Containers de texte pour les prix barrés - Individuals Purchase */
.operations_text_container_purchase_individuals {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px
}

.operations_text_price_ht_purchase_individuals {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: Avenirnextltpro Demi, sans-serif;
}

.operations_span_ttc_purchase_individuals {
	display: inline;
}

.operations_span_ttc_striked_purchase_individuals {
	display: inline;
}

.operations_sub_text_purchase_individuals {
	display: flex;
	gap: 5px;
}

/* Containers de texte pour les prix barrés - Small Business Rental */
.operations_text_container_rental_small_businesses {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 10px;
}

.operations_text_price_ht_rental_small_businesses {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.operations_span_mois_rental_small_businesses {
	display: inline;
}

.operations_span_ht_rental_small_businesses {
	display: inline;
	margin-left: 10px;
}

.operations_span_ttc_rental_small_businesses {
	display: inline;
}

.operations_span_mois_discounted_ttc_rental_small_businesses {
	display: inline;
}

.operations_span_ttc_discounted_rental_small_businesses {
	display: inline;
}

.operations_span_mois_striked_rental_small_businesses {
	display: inline;
}

.operations_span_ttc_striked_rental_small_businesses {
	display: inline;
}

.operations_span_ttc_purchase_small_businesses {
	display: inline;
}

.operations_span_ht_purchase_small_businesses {
	display: inline;
}

.operations_span_ttc_discounted_purchase_small_businesses {
	display: inline;
}

.operations_span_ttc_striked_purchase_small_businesses {
	display: inline;
}

.operations_sub_text_bold_rental_small_businesses {
	display: flex;
	gap: 5px;
}

.operations_sub_text_rental_small_businesses {
	display: flex;
	gap: 5px;
}

/* Containers de texte pour les prix barrés - Small Business Purchase */
.operations_text_container_purchase_small_businesses {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px
}

.operations_text_price_ht_purchase_small_businesses {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.operations_span_ttc_purchase_small_businesses {
	display: inline;
}

.operations_sub_text_bold_purchase_small_businesses {
	display: flex;
	gap: 5px;
	font-weight: bold;
}

.operations_sub_text_purchase_small_businesses {
	display: flex;
	gap: 5px;
}

/* ----------------------------------------------------------------------------
   UTILITAIRES D'AFFICHAGE
   ---------------------------------------------------------------------------- */

/* Masquer desktop */
.operation_hide_desktop {
	display: none;
}

/* Masquer mobile */
.operation_hide_mobile {
	display: none;
}

/* Afficher flex */
.operation_show_flex {
	display: flex;
}


/* ----------------------------------------------------------------------------
   RESPONSIVE - Media queries pour desktop/mobile
   ---------------------------------------------------------------------------- */

/* Desktop : afficher desktop, masquer mobile */
@media (min-width: 768px) {
	.operation_banner_webflow_header_desktop {
		display: flex !important;
	}

	.operation_banner_webflow_header_mobile {
		display: none !important;
	}
}

/* Mobile : masquer desktop, afficher mobile */
@media (max-width: 767px) {
	.operation_banner_webflow_header_desktop {
		display: none !important;
	}

	.operation_banner_webflow_header_mobile {
		display: flex !important;
	}
}

/* Sub-header responsive (breakpoint 1280px) */
@media (min-width: 1280px) {
	.operation_sub_header_desktop {
		display: flex !important;
	}

	.operation_sub_header_mobile {
		display: none !important;
	}
}

@media (max-width: 1279px) {
	.operation_sub_header_desktop {
		display: none !important;
	}

	.operation_sub_header_mobile {
		display: flex !important;
	}
}

/* ----------------------------------------------------------------------------
   POPUPS - Containers et formulaires
   ---------------------------------------------------------------------------- */

/* Container de champ de formulaire */
.popup_field_container {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Formulaire étape 1 */
.popup_form_step_1 {
	display: flex;
	gap: 10px;
	width: 100%;
	align-items: flex-start;
	flex-direction: column;
}

/* Formulaire étape 2 */
.popup_form_step_2 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Container d'input */
.popup_input_container {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Container de checkbox */
.popup_checkbox_container {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

/* Rows de formulaire */
.popup_form_row {
	display: flex;
	width: 100%;
	gap: 15px;
}

/* Overlay de popup */
.popup_operation_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Container de popup */
.popup_operation_container {
	display: flex;
	height: 525px;
}

/* Container de popup - responsive mobile */
@media screen and (max-width: 767px) {
	.popup_operation_container {
		height: auto;
		min-height: 400px;
		max-height: 90vh;
	}

	/* .popup_operation_left_side {
		height: 200xp;
	} */
}

/* Bouton de fermeture */
.popup_close_button {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border: none;
	background-color: transparent;
	font-size: 24px;
	cursor: pointer;
	color: #5f5e5e;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

/* Côté droit de la popup */
.popup_operation_right_side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}

/* Container étape 3 (succès) */
.popup_step_3_container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
	height: 100%;
	padding: 20px 0;
	text-align: left;
}




/* Overlay pour summary background */
.operation_summary_overlay {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	z-index: 1;
	position: relative;
}

.popup_operation_text .popup_text .popup_text_step_3.popup_step_3_text {
	text-align: left;
}

.popup_step_3_icon_title_container {
	display: flex;
	align-items: baseline;
	gap: 15px;
}

.popup_step_3_icon_title_container div {
	display: flex;

}


.popup_step_3_check_icon {
	background-color: #ffffff!important;
	;
}

.popup_operation_text_promo_code {
	color:#6A82FF;
	font-family: AvenirNextLTPro, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px;
}

/* Icône de check */
/* .popup_check_icon {
	width: 80px;
	height: 80px;
	background-color: #6161F3;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
} */

/* Symbole de check */
/* .popup_check_icon_symbol {
	color: #ffffff;
	font-size: 48px;
	font-weight: bold;
	line-height: 1;
} */

/* Texte étape 3 */

/* ----------------------------------------------------------------------------
   SUMMARY BACKGROUND - Styles pour les backgrounds de summary
   ---------------------------------------------------------------------------- */

/* Background pour summary.rental */
.summary.rental.operation_background_rental {
	background-color: #050546;
}

/* Media query pour tablet - Summary background */
@media (max-width: 1279px) {

	.summary.operation_background_tablet,
	.summary.purchase.operation_background_tablet,
	.summary.rental.operation_background_tablet {
		background-size: var(--operation-bg-size-tablet, cover);
		background-position: var(--operation-bg-position-tablet, center center);
		background-repeat: var(--operation-bg-repeat-tablet, no-repeat);
	}

	.summary.operation_background_tablet {
		background-image: var(--operation-bg-image-tablet);
	}

	.summary.purchase.operation_background_tablet {
		background-image: var(--operation-bg-image-tablet);
	}

	.summary.rental.operation_background_tablet {
		background-image: var(--operation-bg-image-tablet);
		background-color: #050546;
	}

	/* Background attachment si défini */
	.summary.operation_background_tablet.operation_bg_attachment_tablet {
		background-attachment: var(--operation-bg-attachment-tablet);
	}
}

/* ----------------------------------------------------------------------------
   HERO BACKGROUND - Styles pour les backgrounds de hero home
   ---------------------------------------------------------------------------- */

/* Media query pour desktop (>= 1920px) - Hero background */
/* Règle par défaut pour desktop - Hero background */
#home-hero-section.operation_hero_background_desktop {
	background-image: var(--operation-hero-image-desktop) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* Media query pour desktop (>= 1280px) - Hero background (surcharge pour s'assurer que ça fonctionne) */
@media screen and (min-width: 1280px) {
	#home-hero-section.operation_hero_background_desktop {
		background-image: var(--operation-hero-image-desktop) !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}
}

/* Media query pour tablet (<= 1279px) - Hero background */
@media (min-width: 992px) and (max-width: 1279px) {
	#home-hero-section.operation_hero_background_tablet {
		background-image: var(--operation-hero-image-tablet) !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}
}

/* Media query pour mobile (<= 767px) - Hero background */
@media (min-width: 479px) and (max-width: 991px) {
	#home-hero-section.operation_hero_background_mobile {
		background-image: var(--operation-hero-image-tablet) !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}
}

@media (max-width: 640px) {
	#home-hero-section.operation_hero_background_small-mobile {
		background-image: var(--operation-hero-image-small-mobile) !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}
}

/* ----------------------------------------------------------------------------
   POPUP MEDIA QUERIES - Styles responsive pour les popups
   ---------------------------------------------------------------------------- */

/* Media query pour mobile (<= 767px) - Popup container */
@media screen and (max-width: 767px) {
	.popup_operation_container {
		flex-direction: column !important;
	}

	.popup_operation_left_side {
		width: 100% !important;
		float: none !important;
	}

	.popup_operation_right_side {
		width: 100% !important;
		float: none !important;
		padding: var(--popup-right-side-padding-mobile, 30px 20px) !important;
	}

	.popup_operation_text_container h2 {
		font-size: 24px !important;
	}

	.popup_operation_text_container p {
		font-size: 14px !important;
	}

	.popup_operation_right_side form>.popup_form_row.popup_form_row_1 {
		flex-direction: row !important;
	}

	.popup_operation_right_side form>.popup_form_row.popup_form_row_1>div {
		flex: 1 1 calc(50% - 7.5px) !important;
		min-width: 0 !important;
	}

	.popup_operation_right_side form>.popup_form_row.popup_form_row_2 {
		flex-direction: row !important;
	}

	.popup_operation_right_side form>.popup_form_row.popup_form_row_2>div {
		flex: 1 1 calc(50% - 7.5px) !important;
		min-width: 0 !important;
	}

	.popup_operation_right_side form>.popup_input_container {
		flex-direction: column !important;
	}
}

/* Media query pour tablet (768px - 991px) - Popup right side padding */
@media screen and (max-width: 991px) and (min-width: 768px) {
	.popup_operation_right_side {
		padding: var(--popup-right-side-padding-tablet, 30px 30px) !important;
	}
}

.operation_center_container {
	margin: 0 40px;
}


.operation_banner_container_mobile {
	gap: 10px;
}