/** Web banner **/
.web-banner {
	margin: 0px auto 0px auto;
	padding-top: 180px;
	padding-bottom: 80px;
}
.web-banner-content {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1200px;
}
/*******************************************************************/
/** Blocks groups **/
/** Group manage mediums blocks or small blocks groups **/
.is-web-banner-groupe-1 {
	height: 500px;
	width: 60%;
}
/** Groups manage only smalls blocks **/
.is-web-banner-groupe-2,
.is-web-banner-groupe-3 {
	width: 100%;
}
.is-web-banner-groupe-3 {
	margin-top: 30px;
}
/*******************************************************************/
/** Blocks positionnements  **/
.is-web-banner-block-1,
.is-web-banner-block-2,
.is-web-banner-block-3,
.is-web-banner-block-4,
.is-web-banner-block-5,
.is-web-banner-block-6,
.is-web-banner-block-7,
.is-web-banner-block-8 {
	cursor: pointer;
	box-shadow: var(--box-shadow);
	border-radius: var(--primary-border-radius);
	position: relative;
}
/** Large blocks **/
.is-web-banner-block-1,
.is-web-banner-block-2 {
	height: 500px;
	width: 40%;
}
.is-web-banner-block-1 {
	margin-right: 30px;
}
.is-web-banner-block-2 {
	margin-left: 30px;
}
.is-web-banner-50 {
	width: 50%;
}
.is-web-banner-block-2.is-web-banner-50 {
	margin-left: 0px;
}
.is-web-banner-100 {
    width: 100%;
    margin: 0px;
}
/** Medium blocks **/
.is-web-banner-block-3,
.is-web-banner-block-4 {
	width: 100%;
	height: 235px;
}
.is-web-banner-block-4 {
	margin-top: 30px;
}
/** Small blocks **/
.is-web-banner-block-5,
.is-web-banner-block-6,
.is-web-banner-block-7,
.is-web-banner-block-8 {
	cursor: pointer;
	box-shadow: var(--box-shadow);
	border-radius: var(--primary-border-radius);
	width: 50%;
	height: 235px;
}
.is-web-banner-block-5,
.is-web-banner-block-7 {
	margin-right: 15px;
}
.is-web-banner-block-6,
.is-web-banner-block-8 {
	margin-left: 15px;
}
/*******************************************************************/
/** Responsive **/
@media screen and (max-width: 1300px) {
	.web-banner-content {
		width: calc(100% - 100px);
	}
}
@media screen and (max-width: 980px) {
	.web-banner {
		padding-top: 150px;
	}
	.web-banner-content {
		display: block !important;
	}
	.is-web-banner-groupe-1 {
		width: 100%;
		margin-left: 0px;
		margin-top: 30px;
		height: auto;
	}
	.is-web-banner-block-1,
	.is-web-banner-block-2 {
		width: 100%;
		margin-right: 0px;
		margin-left: 0px;
	}
	.is-web-banner-block-2 {
		margin-top: 30px;
	}
}
@media screen and (max-width: 600px) {
	.is-web-banner-groupe-1,
	.is-web-banner-groupe-2,
	.is-web-banner-groupe-3 {
		margin-top: 15px;
	}
	.is-web-banner-groupe-2,
	.is-web-banner-groupe-3 {
		display: block !important;
	}
	.is-web-banner-block-2,
	.is-web-banner-block-4,
	.is-web-banner-block-5,
	.is-web-banner-block-6,
    .is-web-banner-block-7,
    .is-web-banner-block-8 {
		margin-top: 15px;
	}
	.is-web-banner-block-5,
	.is-web-banner-block-6,
    .is-web-banner-block-7,
    .is-web-banner-block-8 {
		width: 100%;
	}
	.is-web-banner-block-5,
    .is-web-banner-block-7 {
		margin-right: 0px;
	}
	.is-web-banner-block-6,
    .is-web-banner-block-8 {
		margin-left: 0px;
	}
}
@media screen and (max-height: 700px) {
	main:has(> #progressbar) .web-banner {
		padding-top: 240px;
	}
}
@media screen and (max-width: 530px) {
	main:has(> #progressbar) .web-banner {
		padding-top: 240px;
	}
}
@media screen and (max-width: 470px) {
	.web-banner {
		padding-top: 120px;
	}
	main:has(> #progressbar) .web-banner {
		padding-top: 240px;
	}
	.web-banner-content {
		width: 100%;
	}
	.is-web-banner-block-1,
	.is-web-banner-block-2,
	.is-web-banner-block-3,
	.is-web-banner-block-4,
	.is-web-banner-block-5,
	.is-web-banner-block-6,
    .is-web-banner-block-7,
    .is-web-banner-block-8 {
		border-radius: 0px;
	}
}




/*******************************************************************/
/** Block Bons Plans **/
.bons-plans {
    background: rgb(37, 9, 110);
    background: linear-gradient(-45deg, rgba(37, 9, 110, 1) 0%, rgba(96, 30, 235, 1) 50%, rgba(183, 129, 251, 1) 100%);
    padding: 20px;
}
.bons-plans img {
    width: 150px;
}

/*******************************************************************/
/** Block Produits **/
.operation_quaternaire {
    background-image: url(../img/webbanner/produits.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.operation_quaternaire h3 {
    color: var(--white);
    font-weight: 300;
    text-align: center;
}
.operation_quaternaire a.discover {
    font-family: var(--primary-font);
    display: block;
    width: 100%;
    text-align: center;
    margin-top: -20px;
    font-size: 0.875em;
    color: var(--white);
}
.operation_quaternaire .filtre_black {
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    padding: 50px;
    border-radius: var(--primary-border-radius);
}
@media screen and (max-width: 470px) {
    .operation_quaternaire .filtre_black {
        border-radius: 0px;
    }
}