﻿/* Carrousel catégories */
			
		.header-container-bg .hp-auto-01{		
			background-position: left center, right center;
		    background-repeat: no-repeat, no-repeat;
		}
		
		@media (max-width: 1920px){
			.header-container-bg .hp-auto-01{		
				background-size: contain;
			}
		}

		.header-container-bg .swiper-grid{		
			display: flex;
			grid-gap: 8px;
			width: fit-content;
			margin: auto;
			background-color: #F5F5F7;
			padding: 0 8px;
		}

		.header-container-bg .swiper-grid .swiper-slide{
			border-radius: 4px;
			background-color: #FFFFFF;
			width: 320px;
			height: auto;
		}	
		
		.header-container-bg .swiper-grid .swiper-slide .img-mobile-cat{
			display: none;
		}

		.header-container-bg .swiper-grid .swiper-slide div:nth-child(1){
			position: relative;
			overflow: hidden;
			border-radius: 4px 4px 0 0;
		}
		
		.header-container-bg .swiper-grid .swiper-slide div img{
			transition: all 0.3s;
		}
			
		.header-container-bg .swiper-grid .swiper-slide div:hover img{
			transform: scale(1.1);
		}
		
		.header-container-bg .swiper-grid .swiper-slide div:nth-child(2){
			padding: 24px 20px;
		}
			
		.header-container-bg .swiper-grid .swiper-slide a{
			cursor: pointer;
		}	
		
		.header-container-bg .swiper-grid .swiper-slide h2{		
			font-size: 14px;
			line-height: 20px;
			margin: 0 0 12px;
		}
			
		.header-container-bg .swiper-grid .swiper-slide p{		
			font-size: 14px;
			line-height: 20px;
			color: #707073;
		}	
		
		/* Border-radius workaround */
		
		.header-container-bg .swiper-grid::before{
		    content: "";
			position: absolute;
			top: 0;
			left: -30px;
			background-color: transparent;
			height: 100%;
			width: 25px;
			border-radius: 0 4px 4px 0;
			box-shadow: 4px 0px 0 2px #f5f5f7;
		}
		
		.header-container-bg .swiper-grid::after{
		    content: "";
			position: absolute;
			top: 0;
			right: -30px;
			background-color: transparent;
			height: 100%;
			width: 25px;
			border-radius: 4px 0 0 4px;
			box-shadow: -4px 0 0 2px #f5f5f7;
		}
			
		/* Custom arrows swiper */
			
		.header-container-bg .custom-next-container{
			position: absolute;
			top: 0;
			right: -10px;
			height: 280px;
			width: calc(var(--swiper-navigation-size)/ 44 * 27);
		}
			
		.header-container-bg .custom-prev-container{
			position: absolute;
			top: 0;
			left: -10px;
			height: 280px;
			width: calc(var(--swiper-navigation-size)/ 44 * 27);
		}
			
		.header-container-bg .swiper-button-prev{
			background-image: none !important;
			filter: unset !important;
			background: white;
			margin: 0;
			padding: 18px;
			width: fit-content;
			border-radius: 0 25px 25px 0;
			top: 50%;
		}
			
		.header-container-bg .swiper-button-next{
			background-image: none !important;
			filter: unset !important;
			background: white;
			margin: 0;
			padding: 18px;
			width: fit-content;
			border-radius: 25px 0 0 25px;
			top: 50%;
		}
			
		.header-container-bg .swiper-button-prev:hover,
		.header-container-bg .swiper-button-next:hover{
			background: #1840DD;
		}
			
		.header-container-bg .swiper-button-prev:hover svg path,
		.header-container-bg .swiper-button-next:hover svg path{
			fill: #FFFFFF;
		}
			
		.header-container-bg .swiper-button-prev:after, 
		.header-container-bg .swiper-button-next:after {
			content: '';
			font-size: unset;
		}	
			
		.header-container-bg .swiper-button-prev svg{
			transform: rotate(180deg);
		}
			
		.header-container-bg .swiper-button-next.swiper-button-disabled, 
		.header-container-bg .swiper-button-prev.swiper-button-disabled{
			opacity: 0;
		}
			
		.custom-prev-container, .custom-next-container{
			display: none;
		}
			
		
		
		@media (max-width: 992px){
			
			.header-container-bg .swiper-grid .swiper-slide{		
				width: 250px;
			}
			
			.header-container-bg .custom-next-container,
			.header-container-bg .custom-prev-container{
				height: 218.75px
			}
			
			.header-container-bg .swiper-grid .swiper-slide div:hover img{
				transform: unset;
			}
			
		}

		@media (max-width: 768px){
			.header-container-bg .swiper-grid .swiper-slide .img-desktop-cat{
				display: none;
			}
			
			.header-container-bg .swiper-grid .swiper-slide .img-mobile-cat{
				display: block;
			}
		}