/* ====================== CARD GROUPS début ======================= */
/* Avant / après */
/* Conteneur */
.silder-before-after-container {
    position: relative;
    border: 0;
    border-radius: 20px;
    height: 100%;
    max-height: 600px;
    margin: 0 auto 40px;
    width: 100%;
    max-width: 930px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
    .silder-before-after-container .img {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        height: 100%;
        width: 100%;
        background-size: /*900px 100%*/cover;
    }
	.silder-before-after-container .foreground-img {
	    width: 50%;
	}
	/* Curseur */
	.silder-before-after-container .slider {
	    position: absolute;
	    z-index: 2;
	    height: 100%;
	    margin: 0;
	    width: 100%;
	    background: rgba(242,242,242,.3);
	    -webkit-appearance: none;
	    appearance: none;
	    outline: none;
	    transition: all .2s;
	}
	.silder-before-after-container .slider:hover {
	    background: rgba(242,242,242, .1);
	}
	.silder-before-after-container .slider::-webkit-slider-thumb {
	      height: 600px;
	      width: 6px;
	      background: white;
	      -webkit-appearance: none;
	      appearance: none;
	      cursor: pointer;
	}
	.silder-before-after-container .slider::-moz-range-thumb {
	      height: 600px;
	      width: 6px;
	      background: white;
	      cursor: pointer;
	}
	/* Bouton */  
	.silder-before-after-container .slider-button {
	    position: absolute;
	    left: calc(50% - 18px);
	    top: calc(50% - 18px);
	    z-index: 3;
	    display: flex;
		align-items: center;
		justify-content: center;
	    border-radius: 50%;
	    height: 30px;
	    width: 30px;
	    background-color: white;
	    pointer-events: none;
	}
		.silder-before-after-container .slider-button:before,
		.silder-before-after-container .slider-button:after {
			content: '';
			padding: 3px;
			display: inline-block;
			border: solid #5D5D5D;
			border-width: 0 2px 2px 0;
		}
		.silder-before-after-container .slider-button:after {
			transform: rotate(-45deg);
		}

		.silder-before-after-container .slider-button:before {
			transform: rotate(135deg);
		}

/* Groupe de carte */
/* Étapes */
.projet_etapes .step {
    position: relative;
    border: 1px solid #e7e7e7;
    min-height: 86px;
    margin-bottom: 10px;
    padding: 1em 1em 1em 40%;
}
.projet_etapes .current {
    background-color: #e9ecf2;
    /*color: var(--white);*/
}
	.step .step-title {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    top: 0;
	    padding: 17px 0 15px 0;
	    width: calc(40% - 30px);
	    background-color: var(--main);
	    color: var(--white);
	    font-weight: bold;
	    text-align: center;
	    /*text-transform: uppercase;demande client 17/10/2022*/
	}
	.current .step-title {
	    background-color: var(--reda11y);
	}
		.step .step-title::before {
		    position: absolute;
		    right: -30px;
		    top: calc(50% - 25px);
		    content: '';
		    border-color: transparent transparent transparent var(--main);
		    border-style: solid;
		    border-width: 25px 15px;
		}
		.current .step-title::before {
			border-color: transparent transparent transparent var(--reda11y);
		}
	.step-text .step-text-bodytext {
		color: #717171;
		font-size: .875em;
	}
	.current .step-text-bodytext {
		color: #242424;
	}
		.step-text .step-text-bodytext *:last-child {
			margin-bottom: 0;
		}

/* Timeline */
.timeline .timeline-item-inner {
	border: 0;
}
	.timeline-item-image img {
		border-radius: 20px;
    height: 100%;
    width: 100%;
    object-fit: cover;
	}
	.timeline-item-caption .timeline-item-date {
		left: calc(100% + 15px);
		top: calc(50% - 10px);
		height: 20px;
		width: calc(100% - calc(1.5rem + 46px / 2));
		color: var(--dark);
		font-size: 1.125em;
		line-height: 1;
	}
	.timeline-item-caption .timeline-item-header-headline:last-child {
		margin-bottom: 0;
	}
	.timeline-item-caption .timeline-item-text p {
		font-size: 1em;
	}

/* Chiffres */
/* Bloc chiffres bleu */
.icongroup.frame-background-primary {
	gap: 30px;
  background-color: var(--main);
	border-radius: 12px;
	padding: 15px;
}
.container .frame-type-card_group:not(.frame-layout-embedded) .icongroup {
	margin: 0!important;
  /*padding-left: 0;
  padding-right: 0;*/
}
	.icongroup .icongroup-item {
		align-items: flex-start;
		margin: 0;
	}
		.icongroup-item .icongroup-item-icon {
			margin-right: 30px;
			min-width: 50px;
			color: var(--white);
		}
			.frame-background-primary .icongroup-item-icon .fa-light {
				font-size: 50px;
			}
		.icongroup-item-text {
	    border-left: 3px solid var(--white);
	    padding-left: 17px;
		}
		.icongroup-item:nth-child(4n + 1) .icongroup-item-text {
			border-color: var(--fourth);
		}
		.icongroup-item:nth-child(4n + 2) .icongroup-item-text {
			border-color: var(--thirdpale);
		}
		.icongroup-item:nth-child(4n + 3) .icongroup-item-text {
			border-color: var(--secondary);
		}
		.icongroup-item:nth-child(4n) .icongroup-item-text {
			border-color: var(--mainpale);
		}
			.icongroup-item-text .icongroup-item-text-header {
				margin-bottom: 0;
				color: var(--white);
				font-size: 3em;
			}
			.icongroup-item-text .icongroup-item-text-subheader {
				color: var(--white);
				font-size: 1em;
			}			
				/* Blocs chiffres dans colonne de droite ! */
				.icongroup.frame-background-primary .icongroup-item-text .icongroup-item-text-subheader p {
					margin-bottom: 0;
					color: var(--white);
				}
/* Bloc chiffres vide */
.container .frame-type-card_group:not(.frame-layout-embedded) .frame-background-white {
	padding: 45px 0;
}
	.icongroup.frame-background-white .icongroup-item {
		align-items: center;
		flex-direction: column;
	    margin: 0 0 20px;
	    padding: 0 15px;
	}
		.frame-background-white .icongroup-item .icongroup-item-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			height: 60px;
			margin: 0 0 20px;
			width: 60px;
			background-color: #f7f7f7;
			color: #717171;
			font-size: 24px;
		}
		.frame-background-white .icongroup-item .icongroup-item-text {
			text-align: center;
		}
			.frame-background-white .icongroup-item-text .icongroup-item-text-header {
				margin-bottom: 10px;
				color: #242424;
				font-size: 2.25em;
				text-align: center;
			}
			.frame-background-white .icongroup-item-text .icongroup-item-text-subheader {
				color: #717171;
				font-size: 1.125em;
			}
/* ====================== CARD GROUPS fin ======================= */