@charset "UTF-8";

/* CREATE index :root FOR ELEMENTS BELOW ? */

/*-----------------------------------------
|                  BANNER                  |
 -----------------------------------------*/
 
#banner {
	position: relative;
	
	padding: 0 1.5em;
	
    background-image: url('../img/home/bg-female-yellow-car.webp');
    background-position: center right 20%;
    background-size: cover;
    
    color: white;
}
 
#banner .background-overlay {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
	
	background-color: var(--color-primary);
	opacity: 0.8;
}

#banner .banner-content {
	position: relative;
	
	min-height: 44.25rem;
	max-width: 82.5rem;
	margin: auto;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
}

#banner .banner-content .message {
	position: absolute;
	margin: 0;
	width: 100%;
	color: white;
	background-color: rgba(0, 0, 0, 0.4);
	
	border: none;
	box-shadow: 0 0 .5em .125rem var(--white);
}

#banner .banner-content .message.TOPPER {
	top: .6rem;
}

#banner .banner-content .message.FOOTER {
	bottom: .6rem;
}

#banner .title {
	width: 100%;
}

#banner .title span {
	font-weight: 700;
	color: var(--color-secondary);
}

#banner .title h2 {
	margin-block-start: 0;
	margin-block-end: 0;
	
	font-size: clamp(26px, 3vw, 45px);
	font-weight: 900;
}

#banner .content {
	width: 100%;
	
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#banner .content button,
#banner .content a {
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--default-font-size);
	font-weight: 700;
	
	background-color: var(--color-secondary);
	border-radius: 2rem;
	padding: .75em 1.5em;
	color: white;
}

#banner .content .text {
	width: 60%;
	text-align: right;
	
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 2rem;
}

#banner .content .text p {
	font-size: var(--increased-font-size);
	margin-block-start: 0;
	margin-block-end: 0;
}

#banner .content .text button {
	box-shadow: .6rem .6rem 1.25rem 0 rgba(255, 255, 255, 0.47);
}

#banner .content #fast-search {
	padding: 1.25em 2.5em;
	
	color: var(--color-primary);
	background-color: white;
	
	border-radius: .5rem;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
}

#banner .content #fast-search h3 {
	margin-block-start: 0;
	margin-block-end: 0;
	
	font-size: var(--larger-font-size);
	font-weight: 900;
	line-height: 1;
}

#banner .content #fast-search h3 span {
	color: var(--color-secondary);
}

#banner .content #fast-search button {
	margin-top: .6rem;
	width: 100%;
	cursor: pointer;
}

#banner .content #fast-search #no-js {
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
}

#banner .content #fast-search a:hover {
	filter: brightness(110%) contrast(110%);	
}

#banner .content #fast-search .icon-text {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: .3rem;
	
	text-align: center;
}

#banner .content #fast-search .icon {
	display: block;
	width: 3rem;
	height: 3rem;
	min-width: 3rem;
	min-height: 3rem;
	
	background-image: url('../img/icon-car-notebook.svg');
	background-size: contain; 
}

#banner .content #fast-search .selects {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

#banner .content #fast-search .selects .select {
	font-size: var(--reduced-font-size);
	
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: .6rem;
}

#banner .content #fast-search .selects .select select {
	width: 14rem;
	padding: 1em 1.25em;
	border: 1px solid #efefef;
}

#banner .banner-infos {
	width: 100%;
	text-align: right;
	font-size: var(--larger-font-size);
	line-height: 1;
}

#banner .banner-infos span {
	font-weight: 600;
	color: var(--color-secondary);
}

/*-----------------------------------------
|                CATEGORIES                |
 -----------------------------------------*/
 
#categories {
	max-width: 82.5rem;
	margin: auto;
	margin-bottom: 3.125rem;
	
	padding: 0 1.5em;
}

#categories h3 {
	text-decoration: underline;
	text-decoration-color: var(--color-secondary);
	text-decoration-thickness: .3rem;
	text-underline-offset: .5rem;
	
	font-size: var(--larger-font-size);
}

#categories .message {
	max-width: none;
	
	border: none;
	box-shadow: 0 0 .5em .125rem var(--black);
}

#categories .categories-display {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

#categories .categories-display .category {
	position: relative;
	
	width: 18.75rem;
	height: 18.75rem;
	
	display: flex;
	flex-direction: column;
	align-items: center; 
	justify-content: flex-end;
	
	background-repeat: no-repeat;
	background-size: contain;
	
	border-radius: .5rem;
	border: 1px solid var(--color-neutral-lighter);
}

#categories .categories-display .category.carrosserie {
	background-image: url('../img/categoryImages/pare-chocs.webp');
}

#categories .categories-display .category.leve-vitre {
	background-image: url('../img/categoryImages/leve-vitre.jpg');
}

#categories .categories-display .category.support-moteur {
	background-image: url('../img/categoryImages/support-moteur.png');
}

#categories .categories-display .category.climatisation {
	background-image: url('../img/categoryImages/radiateur.png');
}

#categories .categories-display .category span {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	
	background-color: var(--color-secondary);
	color: white;
	
	border-radius: 2rem;
	
    padding: .75em 1.5em;
    margin-bottom: 1.25rem;
	
}

#categories .categories-display .category a {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
}

/*-----------------------------------------
|           ILLUSTRATED BLOCKS             |
 -----------------------------------------*/

.home-illustrated-block {
	max-width: 82.5rem;
	margin: auto;
	margin-bottom: 3.125rem;

	padding: 0 1.5em;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	gap: 2rem;
}

.home-illustrated-block h3 {
 	font-size: var(--increased-font-size);
 	color: var(--color-secondary);
 	text-transform: uppercase;
	margin-top: 0;
}
 
.home-illustrated-block .mobile-title {
	display: none;
}

.home-illustrated-block .text {
	width: 50%;
	font-size: var(--increased-font-size);
	text-align: justify;
}

.home-illustrated-block .image {
	max-width: 50%;
	max-height: 25rem;
}

/*--------------------------------------------
|                PICKUP POINTS                |
 --------------------------------------------*/

#pickup-points .map {
	width: 50%;
	height: 25rem;
	align-self: stretch;
	
	background-image: url('../img/points-de-retrait.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/*--------------------------------------------
|                FRENCH PARTNER               |
 --------------------------------------------*/


#french-partner ul {
	margin-top: 0;
	padding-left: .7em;
}

#french-partner li {
	list-style-type: none;
	margin-top: .5em;
}

#french-partner li::before {
	content: "•";
	color: var(--color-secondary);
	display: inline-block;
	width: .7em;
	margin-left: -.7em;
}

/*--------------------------------------------
|                BLOG ARTICLES                |
 --------------------------------------------*/
 
.home #last-articles {
	justify-content: center;
}

.home .blog-articles .articles {
	all: unset;
	display: flex ;
	flex-direction: row ;
	flex-wrap: wrap ;
	gap: 1.25em ;
	justify-content: center;
	margin: 0 ;
}

.home .blog-articles h2 {
	font-size: var(--increased-font-size);
	color: var(--color-secondary);
	text-transform: uppercase;
	text-align: center;
}

.home #last-articles .blog-link {
	text-transform: uppercase;
	padding: .5em 1em;
    margin-top: 1.25rem ;
}

.home .blog-articles .article {
	max-width: 17.5rem ;
	height: 14rem ;
	max-height: unset !important;
}

.home .blog-articles .excerpt {
	height: calc(4 * 1.2em + .1em) ;
}

.home .blog-articles .excerpt::after {
	width: initial ;
	display: block ;
}

.home .article.n1 .title,
.home .article.n3 .title {
	color: var(--body-text-color) ;
}

.home .article.n2 .title,
.home .article.n4 .title {
	color: var(--color-secondary) ;
}

.home .article.n1 .link,
.home .article.n3 .link {
	background-color: var(--color-primary);
}

.home .article.n2 .link,
.home .article.n4 .link {
	background-color: var(--color-secondary) ;
}

/*-----------------------------------------
|              MEDIA QUERIES               |
 -----------------------------------------*/

@media only screen and (max-device-width: 1310px), screen and (max-width: 1310px) {
	
	#banner .banner-content .message.TOPPER,
	#banner .banner-content .message.FOOTER {
		left: 0;
		width: 50%;
	}
	
	#banner .content #fast-search .icon-text {
		flex-direction: column;
	}
	
}

@media only screen and (max-device-width: 910px), screen and (max-width: 910px) {
	
	#banner .banner-content .message.TOPPER {
		position: relative;
		top: 0;
		left: 0;
		width: 80%;
		margin-bottom: 1.25rem;
	}
	
	#banner .banner-content .message.FOOTER {
		position: relative;
		top: 0;
		left: 0;
		width: 80%;
		margin-top: 1.25rem;
	}
	
	#banner {
		padding: 1.5em 1.5em;
	}
	
	#banner .content {
		flex-direction: column;
		gap: 2rem; 
	}
	
	#banner .content .text {
		width: 80%;
		text-align: center;
	}
	
	#banner .content .text p {
		display: none;
	}
	
	.home-illustrated-block {
		flex-direction: column;
		gap: .6rem;
	}
	
	.home-illustrated-block .mobile-title {
		display: block;
	}
	
	.home-illustrated-block .title {
		display: none;
	}
	
	.home-illustrated-block .text {
		width: 100%;
		font-size: var(--default-font-size);
	}

	.home-illustrated-block .image {
		max-width: 100%;
		max-height: 60vh;
		
		order: 10;
	}
	
	.home-illustrated-block p {
		margin-top: 0;
	}
	
	.home-illustrated-block h3 {
		margin: 0;
	}

	#pickup-points .map {
		width: 100%;
		height: 25rem;
	}
}

@media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
	
	#banner .content #fast-search .selects .select select {
		width: 11rem;
	}
	
	#categories .categories-display .category {
		width: 12.5rem;
		height: 12.5rem;
	}
}