.webinclus_beobank,
.ijt-c {
	/*** VARIABLES ***/
	--primary-50: #EEE9F2;
	--primary-300: #8E6CAB;
    --primary-400: #794F9A;
    --primary-500: #572381;
	--primary-gradiant: radial-gradient(80.8% 100% at 56.25% 0%, #B462D1 0%, #7924A0 85%), #B280D2;
	--purple-opacity-70: rgba(87, 35, 129, .70);
	--purple-opacity-05: rgba(87, 35, 129, 0.05);
    --white: #FFF;
    --gray-100: #F3F2F5;
    --gray-200: #D6D6D6;
    --gray-300: #757575;
    --gray-500: #4C4E54;
    --gray-600: #414141;
	--red-500: #E2001A;
	--red-600: #CE0018;
	--red-gradiant: linear-gradient(180deg, #E93842 0%, #EC5466 100%);
	--box-shadow-lg: 0 12px 16px -4px rgba(20, 20, 20, 0.08), 0 4px 6px -2px rgba(20, 20, 20, 0.03);
    --roboto: "roboto-flex", "Roboto", Arial, Helvetica, sans-serif;
	/* --museo: "museosans500", "roboto-flex", "Roboto", Arial, Helvetica, sans-serif; */
	--museo: "museosans", "roboto-flex", "Roboto", Arial, Helvetica, sans-serif;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-50: 50%;
    --font-weight-300: 300;
    --font-weight-400: 400;
	--font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-size-base: 1rem;
    --font-size-xs: calc(var(--font-size-base) * .825);
    --font-size-sm: calc(var(--font-size-base) * .875);
    --font-size-lg: calc(var(--font-size-base) * 1.125);
    --font-size-xlg: calc(var(--font-size-base) * 1.25);
    --font-size-2: calc(var(--font-size-base) * 2);
    --svg-clock: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10 1H6v1.3h4V1ZM7.3 9.7h1.4v-4H7.3v4Zm5.4-4.4 1-1-1-1-1 1A6 6 0 0 0 2 9a6 6 0 1 0 10.7-3.7ZM8 13.7a4.7 4.7 0 1 1 0-9.4 4.7 4.7 0 0 1 0 9.4Z"/></svg>');
	--svg-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6.7a1 1 0 0 0 0 1.4l3.9 3.9L9 15.9a1 1 0 1 0 1.4 1.4l4.6-4.6a1 1 0 0 0 0-1.4l-4.6-4.6a1 1 0 0 0-1.4 0Z"/></svg>');
	color: var(--gray-500);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-300);
	line-height: 1.5;
	font-family: "roboto-flex", "Roboto", Arial, Helvetica, sans-serif !important;
	margin: 1rem 0 !important;
	box-sizing: border-box;
	* {
		box-sizing: border-box
	}
	.text-center {
		text-align: center
	}

	/*TYPOGRAPHY*/
	
	p,
	h2,
	h3,
	ul {
		margin: 0;
		padding: 0
	}
	h1 {
		font-size: var(--font-size-2);
		color: var(--primary-500);
		margin: 0 0
	}
	h2 {
		font-size: var(--font-size-xlg) !important
	}
	h3 {
		font-size: var(--font-size-lg) !important
	}
	h2,
	h3 {
		font-weight: var(--font-weight-400) !important;
		color: var(--primary-500) !important;
		padding: 0 !important;
		font-family: var(--museo) !important;
		line-height: 1
	}
	.text {
		ul {
			margin: 0 0 0 1rem;
			list-style: disc;
		}
	}
	/* FOR HTML LONG TEXT  PRIVACY ...*/
	.privacy {
		h2, h3, h4 {
        	margin: 1.5rem 0 1rem 0;
    	}
		p:not(:first-of-type) {
			margin-top: .75rem;
		}
	}

	/*DISPLAY*/
	.flex {
		display: flex
	}
	.flex-col {
		display: flex;
		flex-direction: column
	}
	.a-center {
		align-items: center
	}
	.j-between {
		justify-content: space-between
	}
	.j-center {
		justify-content: center
	}
	.gap-0_5 {
		gap: 8px
	}
	.gap-1 {
		gap: 16px
	}
	.gap-1_5 {
		gap: 24px
	}
	.gap-2 {
		gap: 32px
	}
	.sm {
		font-size: var(--font-size-sm);
	}
	.box-shadow-lg {
		box-shadow: var(--box-shadow-lg);
	}
	.border-100 {
		border: 1px solid var(--gray-100);
	}
	strong {
		font-weight: var(--font-weight-600) !important;
		font-family: var(--roboto)
	}
	.extend::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9;
	}
	.btn {
		display: inline-block;
		font-weight: 400;
		text-align: center;
		padding: 10px 24px;
		border: 1px solid var(--gray-100);
		background: var(--gray-100);
		border-radius: var(--radius-4);
		line-height: 1.5;
		cursor: pointer;
		text-decoration: none
	}
	.btn--red {
		color: var(--white);
		border: 1px solid var(--red-500);
		background: var(--red-500)
	}
	.btn--red:hover {
		color: var(--white);
		border: 1px solid var(--red-600);
		background: var(--red-600)
	}
	.btn--purple {
		color: var(--white);
		border: 1px solid var(--primary-500);
		background: var(--primary-500)
	}
	.btn--purple:hover {
		border: 1px solid var(--primary-500);
		background: var(--primary-400);
		color: var(--white)
	}
	.border-purple {
		border: 1px solid var(--primary-500)
	}
	.btn--ghost {
		color: var(--primary-500);
		border: 1px solid var(--primary-500);
		background: var(--white);
		&:hover {
			border: 1px solid var(--primary-500);
			background: var(--primary-50);
		}
	}

	/*BACKGROUNDS*/

	.bg--light-purple {
    background: var(--purple-opacity-05);
	}
	.color-purple {
		color: var(--primary-500)
	}
	.radius-4 {
		border-radius: var(--radius-4)
	}
	.radius-8 {
		border-radius: var(--radius-8)
	}
	.p-1 {
		padding: 1rem
	}
	.p-2 {
		padding: 2rem
	}
	.py-2 {
		padding: 2rem 0 2rem 0
	}
	
	&.my-0 {
		margin: 0 0 !important
	}
	&.my-1 {
		margin: 1rem 0 !important
	}
	&.my-2 {
		margin: 2rem 0 !important
	}
	.mb-1 {
		margin-bottom: 1rem !important;
	}
	.my-0 {
		margin: 0 0
	}
	.my-1 {
		margin: 1rem 0
	}
	.my-2 {
		margin: 2rem 0
	}
	.m-1 {
		margin: 1rem
	}
	.px-1 {
		padding-inline: 1rem
	}
	.px-2 {
		padding-inline: 2rem
	}
	.px-3 {
		padding-inline: 3rem
	}
	.mb-0_5 {
		margin-block-end: .5rem;
	}
	.mt-1 {
		margin-block-start: 1rem
	}
	.mt-2 {
		margin-block-start: 2rem
	}
	.mt-3 {
		margin-block-start: 3rem
	}
	/* NEGATIVE MARGIN FOR REDUCE SPACE BETWENN SECTIONS */
	.myn-sm {
		margin: -.5rem 0;
	}
	.myn-lg {
		margin: -1rem 0;
	}
	.mtn-sm {
		margin-top: -.5rem;
	}
	.mtn-lg {
		margin-top:  -1rem;
	}
	.mbn-sm {
		margin-bottom: -.5rem;
	}
	.mbn-lg {
		margin-bottom:  -1rem;
	}
	.myn-full {
		margin: -1rem 0;
	}
	.p-relative {
		position: relative;
	}
	.p-absolute {
		position: absolute;
	}
	&.side-by-side {
		&>div {
			@media (min-width: 801px) {
				flex-direction: row;
				gap: 2rem;
			}
		}
		section {
			@media (min-width: 801px) {
				width: 50%
			}
		}
		.flow__bubble {
			position: relative;
			&::after {
				content: "\002B";
				border-radius: 50%;
				background: var(--primary-gradiant);
				box-shadow: var(--box-shadow-lg);
				height: 3rem;
				width: 3rem;
				display: flex;
				justify-content: center;
				align-items: center;
				color: var(--white);
				font-size: 2rem;
				position: absolute;
				top: calc(100% - 1rem);
				left: calc(50% - 1.5rem);
				z-index: 1;
				@media (min-width: 801px) {
					top: 8.5rem;
					left: calc(100% - .5rem);
				}
			}
		}
	}
	.bullet {
		list-style: disc;
		padding-left: 32px
	}
	.purple-ring .steps__svg {
		background-color: var(--primary-400);
		svg {
			width: 30px;
			height: 30px
		}
	}
	.information__inner {
		border-left: 8px solid var(--primary-500)
	}
	.offre__usp {
		width: calc(100% - 30px)
	}
	.steps {
		h2 {
			font-size: var(--font-size-lg);
			color: var(--gray-600)
		}
		svg {
			width: 50px;
			height: 50px
		}
		&.svg-40px svg {
			width: 40px;
			height: 40px
		}
	}
	.steps__inner>ul {
		background: linear-gradient(180deg, var(--gray-100), var(--gray-100), var(--gray-100));
		background-position: 30px;
		background-repeat: repeat-y;
		background-size: 2px
	}
	.steps__svg {
		width: 60px;
		height: 60px;
		min-width: 60px;
		border-radius: var(--radius-50);
		background: var(--gray-100)
	}
	.imgtxt__inner {
		border-top: unset ;
		box-shadow: var(--box-shadow-lg);
		border-radius: var(--radius-8);

		@media (min-width: 801px) {
			border-top: 1px solid var(--gray-100);
			border-left: unset ;
		}
	}
	.imgtxt__content {
		padding: 8px 16px 24px;
		@media (min-width: 801px) {
			padding: 16px 0;
		}
	}
	.imgtxt__img {
		height: 110px;
		width: 100%;
		@media (min-width: 801px) {
			flex-direction: column;
			height: auto;
			max-width: 200px;
			align-self: stretch;
		}
	}
	.imgtxt img {
		width: 100%;
        object-fit: cover;
        object-position: center center;
		border-radius: var(--radius-8) var(--radius-8) 0 0 ;
		@media (min-width: 801px) {
			height: 100%;
			border-radius: var(--radius-8) 0 0 var(--radius-8);
		}
	}
	.header img {
		width: 100%;
		max-inline-size: 100%
	}
	.insert {
		position: relative;
		margin-top: 1rem;
		padding: 0 1.25rem;
		&::before {
			background: var(--purple-opacity-70);
			content: "";
			position: absolute;
			left: 0;
			width: .4375rem;
			height: 100%;
			border-radius: var(--radius-4)
		}
	}
	.flow {
		&>div {
			border-radius: var(--radius-8);
			border: 1px solid var(--gray-100);
			box-shadow: var(--box-shadow-lg);
			padding: 1.5rem 1rem;
		}
		h3 {
			font-family: var(--roboto) !important;
			font-size: var(--font-size-base) !important;
			font-weight: var(--font-weight-700) !important;
		}
		p {
			color: var(--gray-300);
			font-size: var(--font-size-sm);
		}
		.flow__description {
			color: var(--gray-500);
		}
		details {
			&[open] {
				summary {
					display: none;
				}
			}
		}
		summary {
			list-style: none;
			text-decoration: underline;
			cursor: pointer;
			color: var(--primary-500);
			font-weight: var(--font-weight-600);
			margin-top: -.5rem;
			font-size: var(--font-size-sm);
			&::-webkit-details-marker {
				display: none;
			}
		}
	}
	.flow__badge {
		min-width: 5rem;
		color: var(--primary-500);
		padding: .125rem .5rem;
		border-radius: 1.25rem;
		border: 1px solid var(--primary-500);
		gap: .25rem;
		font-size: .8125rem;
		font-weight: var(--font-weight-600);
		height: 1.375rem;
	}
	.flow__time {
		&::before {
			content: "";
			width: .875rem;
			height: .875rem;
			mask-image: var(--svg-clock);
			mask-repeat: no-repeat;
			background-color: var(--primary-500);
		}
	}
	.flow__step {
		top: 0;
		right: -.5rem;
		height: 1rem;
		width: 1rem;
		font-size: .625rem;
		font-weight: var(--font-weight-600);
		color: var(--white);
		background: var(--red-gradiant);
		border-radius: var(--radius-50);
	}

	/* Background manage by enum */
	.flow__svg--offers {
		box-shadow: inset 0 0 0 2px #EEE9F2;
		svg {
			fill: var(--primary-500);
		}
	}
	.flow__svg--numbers {
		background: var(--primary-gradiant);
		svg {
			fill: var(--white);
		}
	}

	.flow__svg {
		border-radius: var(--radius-50);
		height: 2.5rem;
		width: 2.5rem;
		min-height: 2.5rem;
		min-width: 2.5rem;

		&.bg-white {
			box-shadow: inset 0 0 0 2px #EEE9F2;
			background: none;
			svg {
				fill: var(--primary-500);
			}
		}
		&.bg-primary {
			background: var(--primary-gradiant);
			svg {
				fill: var(--white);
			}
		}
	}


	/* MESSAGE */
	.message {
		width: 100%;
		svg {
			width: 3rem;
			height: auto;
			fill: var(--primary-500)
		}
		a::after {
			content: "";
			width: 1.5rem;
			height: 1.5rem;
			display: block;
			mask-size: contain;
			background: var(--primary-500);
			mask-image: var(--svg-chevron-right);
		}
		&.no-link {
			svg {
				width: 2rem;
			}
			.message__title {
				font-size: var(--font-size-base);
				font-weight: var(--font-weight-300);
			}
		}
		@container message (min-width: 60ch) {
			.message__content {
				flex-direction: row;
				column-gap: 1rem;
			}
		}
	}
	.message__inner {
		border-radius: var(--radius-8);
		background-color: var(--primary-50);
		color: var(--primary-500);
		padding-inline: 1rem;
		margin-inline: clamp(0.0001rem, 5vw - 2rem, 2rem);
		container-type: inline-size;
		container-name: message;
		&:hover {
			background-color: var(--primary-300);
			transition: background-color .3s ease;
			color: var(--white);
			.message__text,
			.message__title {
				color: var(--white);
			}
			svg {
				fill: var(--white);
			}
			a::after {
				background: var(--white);
			}
		}
	}
	.message__content {
		padding: 1.25rem 1rem;
	}
	.message__title {
		font-size: var(--font-size-xlg);
		font-weight: var(--font-weight-500);
	}
	.message__text {
		color: var(--gray-500);
	}
	@media (min-width: 801px) {
		.flex-row-md {
			flex-direction: row
		}
		.a-start-md {
			align-items: start
		}
		.text-left-md {
			text-align: left
		}
	}
}

/* CLOCK BAR */
.clock {
	.clock__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: .625rem 0.5rem;
		border-radius: 8px;
		color: #FFF;
		font-size: 16px;
		font-style: normal;
		font-weight: 300;
		line-height: 150%;
		letter-spacing: 0.16px;
		border: 2px solid #A35DBB;
		background: linear-gradient(135deg, #8743BB 14.64%, #572381 85.36%);
		box-shadow: 0px 12px 16px -4px rgba(20, 20, 20, 0.08), 0px 4px 6px -2px rgba(20, 20, 20, 0.03);
	}
	.clock__time {
		text-align: center;
		font-size: 20px;
		font-style: normal;
		font-weight: 700;
		line-height: 120%;
		letter-spacing: 0.2px;
		border-left: 1px solid #FFF;
		padding-left: 1rem;
	}
}
/* OCR */
.ocr {
	&.container {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 1rem;
	}
	&.id {
		flex-basis: 0;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}
	ul {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	li {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 300;
		svg {
		min-width: 24px;
		}
	}
	@media (min-width: 881px) {
         .title--mobile {
            display: none;
         }
		 &.content {
    		padding: 2rem 0;
		}
	}
	@media screen and (max-width: 880px) {
		&.container {
			flex-direction: column;
		}
		&.id {
			flex-direction: row;
		}
		&.title--desktop {
            display: none;
         }
	}
}