@charset "utf-8";
/* CSS Document */

.landing h2, .landing h3, .landing ul, .landing li, .landing p{
	margin:0;
	padding:0;
}

.button{
	margin:10px!important;
}

.button span{
	font-size:16px!important;
}

#retrait .button span{
	color:#fff!important;
}

#ariane{
	max-width: 1500px;
	margin:20px auto 0;
	text-align:left;
	line-height: 20px;
	height:20px;
}

#ariane a{
	display: inline-block;
	line-height: 20px!important;
	height:20px;
	color:#505050;
}

#ariane a:hover{
	color:#0A3782
}

#ariane span.icon{
	display: inline-block;
	line-height: 20px;
	vertical-align: bottom;
}

#ariane span.icon:before{
	line-height: 20px;
}


@media screen and (max-width: 1023px){
	#ariane{
		display: none;
	}
}



/*------------------------------------------------*/
/*---------------LANDING PRINCIPALE---------------*/
/*------------------------------------------------*/

.landing{
	max-width:1500px;
	margin:0 auto;
	text-align: center;
}

.landing .top{
	width:100%;
	height:350px;
	background-image: url(https://media.ldlc.com/mkt/ldlc/fr/landing-services/header-services.jpg);
	background-position: center center;
	background-size:cover;
	margin:20px 0 30px;
	padding-top:100px;
}

.landing .top h1{
	text-shadow: 0 3px 6px rgba(0,0,0,0.3);
	color:#fff!important;
	margin:0 auto;
	font-weight: 600!important;
}

.landing .top p{
	font-size:16px;
	color:#fff;
	margin-top:30px;
	line-height: 30px;
}

.landing .top p span{
	padding:4px;
	background-color: #0096C8;
}

.landing .top p span:nth-of-type(1){
	background-color: #fff;
	color:#505050;
}

@media screen and (min-width: 1211px) {
	.landing .top h1{
		font-size:55px!important;
		line-height: 55px!important;
		width: 60%;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1500px){
	.landing .top h1{
		font-size:55px!important;
		line-height: 55px!important;
		width: 70%;
	}
}

@media screen and (min-width: 480px) and (max-width: 1023px){
    .landing h1{
		font-size:40px!important;
		line-height: 40px!important;
		width: 70%;
	}
	.landing .top p{
		margin-top:15px;
	}
}

@media screen and (max-width: 479px){
    .landing h1{
		font-size:30px!important;
		line-height: 30px!important;
	}
	.landing .top p{
		font-size:13px;
		margin-top:5px;
		line-height: 22px;
	}
	.landing .top p span{
		padding:2px;
		background-color: #0096C8;
	}
}

@media screen and (max-width: 374px){
	.landing .top p{
		display: none;
	}
	.landing .top{
		padding:20px 30px;
	}
}

@media screen and (max-width: 1500px){
    .landing #ariane{
		margin-left:10px!important;
	}
}

@media screen and (max-width: 1023px){
	.landing .top{
		height:auto;
		padding:30px 30px 40px;
	}
    .landing .top{
		margin:0 0 30px 0;
	}
}


/*----------SERVICES PRINCIPAUX----------*/

.landing ul#zone-services-1.servicesldlc li{
	width:100%;
	display: flex;
	flex-direction: row;
	overflow: hidden;
	margin-bottom:30px;
	background-color: #fff;
	box-sizing: border-box;
}

.landing ul#zone-services-1.servicesldlc li:nth-child(2n){
	flex-direction:row-reverse;
}

.landing ul#zone-services-1.servicesldlc li .cell{
	flex-basis: 50%;
	line-height: 0;
	overflow: hidden;
}
.landing ul#zone-services-1.servicesldlc li .cell:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;    
}
	
.landing ul#zone-services-1.servicesldlc li .cell:nth-child(2n){
	padding:0 8%;
	line-height:normal;
}

.landing ul#zone-services-1.servicesldlc li p{
	color:#969696;
	font-size:13px;
	line-height: 20px;
	margin:10px 0 10px 0;
}

.landing ul#zone-services-1.servicesldlc li p strong{
	color:#505050;
}

.landing ul#zone-services-1.servicesldlc li .picto{
	margin-top:15px;
}

.landing ul#zone-services-1.servicesldlc li h3{
	margin-top:5px;
}

.landing ul#zone-services-1.servicesldlc li .photo{
	min-width:100%;
	min-height:100%;
}

@media screen and (min-width: 1024px) and (max-width: 1500px) {
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.landing ul#zone-services-1.servicesldlc li .cell:nth-child(2n){
		padding:0 6%;
	}
}

@media screen and (max-width: 767px)  {
	.landing ul#zone-services-1.servicesldlc li{
		margin-bottom:20px;
	}
	.landing ul#zone-services-1.servicesldlc li .cell{
		flex-basis: 100%;
		padding-bottom:20px!important;
	}
	.landing ul#zone-services-1.servicesldlc li .cell:nth-child(2n-1){
		display: none;
	}
}

@media screen and (max-width: 480px)  {
	.landing ul#zone-services-1.servicesldlc li{
		margin-bottom:0;
		border-bottom:1px solid #ccc;
	}
}



/*----------SERVICES SECONDAIRES----------*/

.landing ul#zone-services-2.servicesldlc{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
	grid-auto-rows: minmax(100px, auto);
	margin-bottom:30px;
}

body[data-language="en"] .landing ul#zone-services-2.servicesldlc{
	grid-template-columns: repeat(2, 1fr);
}

.landing ul#zone-services-2.servicesldlc li{
	background-color: #fff;
	padding:10px 50px 20px;
}

.landing ul#zone-services-2.servicesldlc li p{
	color:#969696;
	font-size:13px;
	line-height: 20px;
	margin-bottom:20px;
	margin-top: 10px;
}

.landing ul#zone-services-2.servicesldlc li p strong{
	color:#505050;
}

.landing ul#zone-services-2.servicesldlc li a{
}

@media screen and (min-width: 1024px) and (max-width: 1500px) {
    .landing ul#zone-services-2.servicesldlc{
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 30px;
		grid-auto-rows: minmax(100px, auto);
		margin-bottom:30px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .landing ul#zone-services-2.servicesldlc{
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 20px;
		grid-auto-rows: minmax(100px, auto);
		margin-bottom:30px;
	}
}

@media screen and (max-width: 768px) {
    .landing ul#zone-services-2.servicesldlc{
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 20px;
		grid-auto-rows: minmax(100px, auto);
		margin-bottom:10px;
	}

	body[data-language="en"] .landing ul#zone-services-2.servicesldlc{
		grid-template-columns: repeat(1, 1fr);
	}
}

@media screen and (max-width: 480px)  {
	.landing ul#zone-services-2.servicesldlc li{
		border-bottom:1px solid #ccc;
	}
}



/*----------CONTACT----------*/

.landing #footer-aide h2{
	margin-top:50px;
	font-size:36px!important;
	line-height:36px!important;
	color:#505050!important;
	font-weight: 600;
	text-transform:none;
}

.landing #footer-aide p{
	margin-top:15px;
	color:#969696!important;
}

.landing #footer-aide ul{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
	grid-auto-rows: minmax(100px, auto);
	margin:20px 0 70px;
}

.landing #footer-aide ul p{
	color:#505050!important;
	font-weight: 600;
	margin-bottom:5px;
}


body[data-language="en"] .landing #footer-aide ul{
	grid-template-columns: repeat(3, 1fr);
	margin:20px 100px 70px;
}


@media screen and (max-width: 768px) {
	.landing #footer-aide{
		width:90%;
		margin:0 auto;
	}
	.landing #footer-aide ul{
		margin:20px auto 50px;
		grid-template-columns: repeat(2, 1fr);
	}
	body[data-language="en"] .landing #footer-aide ul{
		margin:20px auto 50px;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px) {
	.landing #footer-aide ul{
		grid-template-columns: repeat(1, 1fr);
	}
	body[data-language="en"] .landing #footer-aide ul{
		grid-template-columns: repeat(1, 1fr);
	}
	.landing #footer-aide h2{
		font-size:26px!important;
		line-height: 26px!important;
		margin-top:30px!important;
	}
}



/*------------------------------------------------*/
/*---------LANDINGS MONTAGE & GARANTIE------------*/
/*------------------------------------------------*/


.landing#montage, .landing#garantie{
	background-color: #fff;
}

.landing p#intro{
	margin:40px 8%;
	color: #969696;
}

.landing p#intro strong{
	color: #505050;
}


.landing#montage .top{
	background-image: url(https://media.ldlc.com/mkt/ldlc/fr/landing-services/header-montage.jpg);
}

.landing#garantie .top{
	background-image: url(https://media.ldlc.com/mkt/ldlc/fr/landing-services/header-garantiepixel.jpg);
}


/*----AVANTAGES----*/

.landing ul.avantages{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
	grid-auto-rows: minmax(100px, auto);
	margin:40px 30px;
}

.landing ul.avantages img{
	display: block;
	margin:0 auto 15px;
}

.landing ul.avantages strong{
	color:#505050;
	font-size:15px;
}

.landing ul.avantages p{
	color:#969696;
	font-size:13px;
	margin-top:5px;
}

.landing ul.avantages a{
	font-size:13px;
}

@media screen and (max-width: 1023px) {
	.landing ul.avantages{
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 50px;
		margin:40px 50px;
	}
	.landing p#intro{
		font-size:13px;
	}
}

@media screen and (max-width: 480px) {
	.landing ul.avantages{
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 30px;
	}
	.landing ul.avantages p{
		display: none;
	}
	.landing p#intro{
		display: none;
	}
}



/*------------------------------------------------*/
/*--------------TAG PRIX UNIQUEMENT---------------*/
/*------------------------------------------------*/
	
.listing-product>ul:first-child>li .pic {
    display: none!important;
}
.listing-product .ratingClient .link, .listing-product .ratingClient .link-open-modal, .listing-product .ratingClient a {
    display: none;
}
.listing-product>ul:first-child>li .pdt-info {
    display: none!important;
}
.listing-product .wrap-stock {
    display: none!important;
}
.listing-product .basket .button, .listing-product .basket .button--picto-seul-nobg {
    display: none!important;
}

.listing-product>ul:first-child>li .dsp-cell-right {
    justify-content: center;
}
.listing-product .basket .price .new-price:only-child, .listing-product .basket .price .price:only-child {
    padding: 10px 0 0 0;
}
.product-listing {
    margin: 0 !important;
}
.listing-product>ul:first-child {
    border-top: none;
}



/*----OFFRE MONTAGE----*/

.landing#montage ul.options{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 20px;
	grid-auto-rows: minmax(100px, auto);
	margin:0 20px 40px;
}

.landing#montage ul.options li {
    padding: 0!important;
    margin: 0 auto!important;
    width: 100%!important;
	background-color: #f8f7f7;
	text-align: center;
}
.landing#montage ul.options img {
    padding-top: 20px!important;
}

.landing#montage ul.options span {
    color: #0a3782;
}

.landing#montage ul.options li p:nth-of-type(1){
	text-transform: uppercase;
	margin-top:20px;
    margin-bottom: 5px;
}

.landing#montage ul.options li p:nth-of-type(2){
	font-size:35px;
	font-weight: 600;
	color: #0a3782;
	margin-top:15px;
	margin-bottom: 10px;
}

.landing#montage ul.options li p:nth-of-type(2) sup{
	font-size:20px;
	font-weight: 600;
	color: #0a3782;
}

.landing#montage ul.options li a{
	margin:25px auto 0;
}

@media screen and (min-width: 1024px) and (max-width: 1500px) {
	.landing#montage ul.options li{
		padding:20px 8px;
	}
	.landing#montage ul.options li p:nth-of-type(1){
		height:60px;
	}
}

@media screen and (max-width: 1023px) {
	.landing#montage ul.options{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 480px) {
	.landing#montage ul.options{
		grid-template-columns: repeat(1, 1fr);
	}
}


/*----OFFRE GARANTIE PIXEL----*/

.landing#garantie ul.options{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
	grid-auto-rows: minmax(100px, auto);
	margin:0 20px 40px;
}

.landing#garantie ul.options li{
	background-color: #f8f7f7;
	padding:25px 15px;
}

.landing#garantie ul.options li p:nth-of-type(1){
	text-transform: uppercase;
	margin-top:20px;
}

.landing#garantie ul.options li p:nth-of-type(2){
	margin-top:15px;
}

.landing#garantie ul.options li p:nth-of-type(3){
	font-size:35px;
	font-weight: 600;
	color: #0a3782;
	margin-bottom: 10px;
}

.landing#garantie ul.options li p:nth-of-type(3) sup{
	font-size:20px;
	font-weight: 600;
	color: #0a3782;
}

.landing#montage ul.options li a{
	margin:25px auto 0;
}

@media screen and (max-width: 480px) {
	.landing#garantie ul.options{
		grid-template-columns: repeat(1, 1fr);
	}
}


/*----PHOTO----*/

.landing div.photo {
	position: relative;
	width: 100%;
	margin-bottom: 50px;
	line-height: 0;
}
.landing div.photo img{
	width: 100%;
}

.landing div.photo:after  {
	background-color: #0096C8;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	font-size:15px;
	line-height: 20px;
	text-align: left;
	color:#fff;
	padding:10px 15px;
}

/*.landing#montage div.photo:after  {
	content: "Ici on monte votre PC en toute sécurité";
}*/

body[data-language="fr"] .landing#montage div.photo:after  {
	content: "Ici on monte votre PC en toute sécurité";
}

body[data-language="en"] .landing#montage div.photo:after  {
	content: "Here your PC is safely assembled";
}

.landing#garantie div.photo:after  {
	display: none;
}

@media screen and (max-width: 1500px) {
	.landing div.photo{
		margin-bottom: 0px;
	}

}

@media screen and (max-width: 480px) {
	.landing div.photo{
		display: none;
	}
	.landing .options{
		padding-bottom:20px;
		margin-bottom:0!important;
	}
}