@charset "utf-8";

body, html{margin:0;padding:0;}

@font-face {
  font-family: 'SFHelloRegular';
  src:
      url('https://media.ldlc.com/shop/apple/FONTS/SFHelloRegular.eot?#iefix') format('embedded-opentype'),
      url('https://media.ldlc.com/shop/apple/FONTS/SFHelloRegular.otf')  format('opentype'),
      url('https://media.ldlc.com/shop/apple/FONTS/SFHelloRegular.woff') format('woff'),
      url('https://media.ldlc.com/shop/apple/FONTS/SFHelloRegular.ttf')  format('truetype'),
      url('https://media.ldlc.com/shop/apple/FONTS/SFHelloRegular.svg#SFHelloRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*CORRECTIF CSS COMPARATEURS*/

.compare-template-preview-item-pricing{
	display: none!important;
}

#apple-shop .mentions{
	background: #F5F5F7;
	padding:20px 115px;
}

#apple-shop .mentions *{
	font-size:12px!important;
	color:#6e6e73!important;
	line-height: 16px!important;
	padding:0!important;
	margin:0!important;
}

/*----------GENERAL----------*/

body {
	background-color: #F5F5F7;
}

.main.landing {
	background-color: #F5F5F7;
}

.main.landing h1{
	text-transform: none!important;
}

.main.landing h2{
	text-transform: none!important;
}

#apple-shop {
	background-color: #F5F5F7;
	max-width: 1210px;
	margin: 0 auto;
	font-family: 'SFHelloRegular', sans-serif;
}

#apple-shop .cursor{
	cursor: default;
}

#apple-shop  span.orange {
	color: #f47920;
}

.footer-ge {
	box-sizing: border-box;
	max-width: 1210px !important;
	background-color: none;
	padding: 20px 0px;
	font-size: 12px;
	color: #b5b5b5;
	text-align: center;
	margin-top: 0px !important;
	line-height: 12px;
}

/*----------NAV----------*/

#apple-shop div.header {
	overflow: hidden;
	margin-top: 20px;
	margin-bottom: 20px;
}

#apple-shop div.header nav {
	background-color: #ffffff;
	overflow: hidden;
}

#apple-shop div.header a.logo {
	float: left;
	display: block;
	width: 80px;
	height: 80px;
}

#apple-shop div.header nav ul {
	overflow: hidden;
	margin-top: 26px;
	margin-left: 80px;
}

#apple-shop div.header nav ul li {
	float: left;
	list-style: none;
	font-size: 18px;
	margin-right: 90px;
	margin-top: 5px;
}

#apple-shop div.header nav ul li:first-child {
	margin-left: 65px;
}

#apple-shop div.header nav ul li:last-child {
	margin-right: 0px;
}

#apple-shop div.header nav ul li {
	color: #6f6f6f;

} 

#apple-shop div.header nav ul li a {
	text-decoration: none;
	color: #6f6f6f;
	transition: all 0.3s ease-out;
	display: block;
	position: relative;
} 

#apple-shop div.header nav ul li a::after {
	content: "";
	height: 1px;
	width: 0%;
	display: block;
	background-color: #6f6f6f;
	transition: all 0.3s ease-out;
}

#apple-shop div.header nav ul li:last-child {
	color: #F47A20;
	cursor: default;
}

#apple-shop div.header nav ul li:last-child .sous {
	width: 250px;
	margin-left: -42px;
}

#apple-shop div.header nav ul li a.active {
	color: #000000;
}


#apple-shop div.header nav ul li a:hover {
	color: #000000; 
}

#apple-shop div.header nav ul li a:hover::after {
	width: 100%;
	background-color: #000000;
}

#apple-shop div.header nav ul li a span {
	transform: rotate(90deg);
	display: inline-block;
}

#apple-shop div.header nav ul li span {
	transform: rotate(90deg);
	display: inline-block;
}

#apple-shop div.header nav ul li ul.sous a span {
	transform: rotate(0deg);
	display: inline;
}

#apple-shop div.header nav div.burger {
	display: none;
}

#apple-shop div.header nav div.close {
	display: none;
}


.sous{
    display: none;
    background-color: #ffffff;
    position: absolute;
    width: 240px;
    z-index: 1000;
    border: 1px solid #f0f0f0;

}

#apple-shop div.header nav ul li ul.sous {
	margin-left: 0;
    margin-top: 0;
}

nav > ul li .sous{ 
	padding: 0;
}

nav > ul li:hover .sous{
    display: block;
}

#apple-shop div.header nav ul li ul.sous li{
    float: none;
    width: 100%;
    text-align: left;
    margin-left: 0;
    margin-top: 0;

}


#apple-shop div.header nav ul li ul.sous a:hover::after{
	display: none;
}



.sous a{
    padding: 10px;
}
.sous a:hover{
    background-color: #f0f0f0;
}


/*----------BANNIERE----------*/

#apple-shop div.ban {
	margin: 0 0 20px 0;
}

#apple-shop div.ban-2 {
	margin: 20px 0 0px 0;
}

/*----------BLOC----------*/

#apple-shop div.bloc {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

#apple-shop div.bloc div {
	text-align: center;
	padding: 20px 0 20px 0;
	flex-basis: 49%;
	position: relative;
	background-color: #ffffff;
	margin-bottom: 2%;
}

#apple-shop div.bloc div img{
	width: 100%;
	display: block;
}

#apple-shop div.bloc div.ban-bloc {
	padding: 0;
}

#apple-shop div.bloc div.solo {
	flex-basis: 100%;
}

#apple-shop div.bloc div p:nth-child(1) {
	width: 100%;
	font-weight: bold;
	font-size: 35px;
	color: #000000;
	text-align: center;
	line-height: 30px;
	z-index: 1;
	line-height: normal;
	padding: 0 20px;
}

#apple-shop div.bloc div a:nth-child(2) {
	text-decoration: none;
    color: #11a8d4;
    transition: all 0.3s ease-out;
    display: inline-block;
    text-align: center;
    margin: 0 !important;
    padding: 10px 0 !important;
}

#apple-shop div.bloc div a:nth-child(2):after {
	content: "";
	display: block;
	position: relative;
	margin-top: -1px;
	height: 1px;
	width: 0%;
	background-color: #11a8d4;
	transition: all 0.3s ease-out;
} 

#apple-shop div.bloc div a:nth-child(2):hover:after {
	width: 100%;
}

#apple-shop div.bloc div a:nth-child(3) {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

#apple-shop div.bloc div a:nth-child(3) img{
	width: 100%;
}


#apple-shop div.bloc div p:nth-child(2)::after {
	content: "";
	display: block;
	width: 0px;
	height: 1px;
	background-color: #11a8d4;
	transition: all 0.3s ease-out;
}

#apple-shop div.bloc a:hover p:nth-child(2)::after {
	width: 88px;
} 

#apple-shop div.bloc a span {
	font-variant: small-caps;
}




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

#apple-shop div.bloc a {
	text-align: center;
	padding: 20px 0 20px 0;
	flex-basis: 49%;
	position: relative;
	background-color: #ffffff;
	margin-bottom: 2%;
}

#apple-shop div.bloc a img {
	display: block;
	width: 100%;
	height: 100%;
}



/*----------MUSIC----------*/

div.apple-content {
	width: 100%;
	background-color: #ffffff;
	padding: 80px 0;
}

div.apple-content div {
	max-width: 1210px;
	margin: 0 auto;
}


div.apple-content div:nth-child(1) {
	margin-bottom: 40px;
}

div.apple-content.fitness {
	padding-top:0!important;
}

div.apple-content.fitness div:nth-child(1) {
	background-color: #f5f5f7;
}

div.apple-content.music div:nth-child(2) {
	background: rgb(242,242,242);
	background: linear-gradient(0deg, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 100%);
}

div.apple-content.music div:nth-child(3) {
	background: url("IMAGES/background-degrade.jpg") top center no-repeat;
}

div.apple-content.music div:nth-child(4) {
	padding-top: 150px;
}

div.apple-content.music div:nth-child(3) img {
	padding-top: 100px;
	padding-bottom: 100px;
}

div.apple-content div img, div.apple-content div a {
	display: block;
}

div.apple-content div img:nth-child(2), div.apple-content a:nth-child(2) {
	display: none!important;
}

div.apple-content div.full-width {
	width: 100%;
	max-width: 100%;
}

div.apple-content div.full-width img {
	max-width: 1210px;
	margin: 0 auto;
	display: block;
}

@media screen and (max-width: 1210px) {
	div.apple-content div {
		width: 100%;
		max-width: 100%;
	}
	div.apple-content div img{
		width: 100%;
		max-width: 100%;
	}
}

@media screen and (max-width: 750px) {
	div.apple-content div img:nth-child(1), div.apple-content a:nth-child(1) {
		display: none;
	}

	div.tv-content div a {
		display: block !important;
	}

	div.tv-content div a img:nth-child(1){
		display: block !important;
	}

	div.apple-content div img:nth-child(2), div.apple-content a:nth-child(2) {
		display: block !important;
	}
	div.apple-content iframe{
		display: none;
	}
}

/*----------TV----------*/
 
 #apple-shop div.tv-content {
 	padding: 0 !important;
 }


/*----------LDLC APR----------*/
	
	div.apr {
		background-color: #000000;
		color: #ffffff;
		text-align: center;
		font-family: 'Montserrat', sans-serif;
		font-weight: 500;
		margin: 10px 0;
		font-size: 14px;
		line-height: 21px;
		position: relative;
	}

	div.apr div.reseau {
		position: absolute;
		padding: 5px 5px 0px 5px;
		background-color: rgba(255, 255, 255, 0.8);
		right: 0;
		top: 0;
	}

	div.apr div.reseau p {
		font-size: 14px;
		color: #282828;
		float: left;
		margin-top: 5px;
		margin-right: 10px;
	}

	div.apr div:nth-child(1) a:nth-child(2) {
		margin-right: 5px;
	}

	div.apr img:nth-child(2) {
		width: 100%;
	}

	div.apr img:nth-child(3) {
		width: 257px;
		height: 91px;
		margin: -50px auto 0 auto; 
		display: block;
	}

	div.apr div.picto {
		margin-top: 50px;
		background: url("IMAGES/blanc.jpg") repeat-x; 
		background-position: 0px 80px;
		overflow: hidden;
		padding: 0 20px;
	}

	div.apr div.picto div {
		float: left;
		width: 25%;
		text-align: center;
		color: #969696;
		font-size: 12px;

	}


	div.apr div.picto div p:nth-child(2) {
		color: #505050;
		font-size: 18px;
		font-weight: 600;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	div.apr div.intro-apr p:nth-child(1) {
		 color: #F47A20;
		 text-transform: uppercase;
		 font-weight: 500;
		 font-size: 21px;
		 margin: 10px auto 15px auto;
	}

	div.apr div.intro-apr p:nth-child(2) {
		max-width: 835px;
		margin:  auto;
		line-height: 21px;
		font-weight: 400;
		padding: 0 20px;

	}

	div.apr div.picto div img {
		width: 150px;
		height: 150px;
		margin: 0 auto;
	}

	div.apr div.picto div p {
		padding: 0 10px;
		font-size: 14px;
		font-weight: 300;
	}

	div.apr div.boutons {
		padding: 30px 0;
		background-color: #ffffff;
	}

	div.apr div.boutons a:last-child {
		margin-right: 0;
	}


	div.services {
		margin: 30px auto 60px;
		background-color: #ffffff;
		overflow: hidden;
        padding-bottom:30px;
	}

	div.services img {
		float: left;
		margin: 0 25px;
	}

	div.services div {
		padding-right: 20px;
	}

	div.services div p:nth-child(1){
		margin-top: 20px;
		color: #969696;
		font-size: 26px;
		font-weight: 600;
		text-transform: uppercase;
		margin-top: 40px;
		margin-bottom: 25px;
	}

	div.services div p:nth-child(2){
		color: #505050; 
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 20px;
	}

	div.services div ul {
		margin-bottom: 20px;
	}


	div.services div ul li  {
		font-size: 14px;
		color: #505050;
		line-height: 21px;
		list-style: disc;
	}

	div.services div p:last-child{
		color: #0A3782;

	
	}
/*----------FUSION----------*/

	div.fusion {
		padding-top: 100px;
		background-color: #000000;
		line-height: normal;
		padding-bottom: 85px;
	}

	div.fusion div.float {
		overflow: hidden;
		max-width: 746px;
		margin: 0 auto 100px auto;
	}

	div.fusion div.float img:nth-child(1) {
		float: left;
	}

	div.fusion div.float img:nth-child(3) {
		float: right;
	}

	div.fusion div.float p {
		position: relative;
		display: inline-block;
		margin: 60px 40px 0 40px;
	}

	div.fusion p {
		font-size: 20px;
		margin: 0 auto;
		max-width: 685px;
		text-align: center;
		color: #ffffff;
	}

	div.fusion p:nth-child(2) {
		font-size: 36px;
		font-weight: bolder;
		margin: 60px auto 60px auto;
	}

	div.fusion p:nth-child(3) {
		margin-bottom: 20px;
	}

	div.fusion a.button {
		display: block;
		background-color: #0096ca;
		margin: 50px auto 0 auto;
		width: 240px;
	}

	@media screen and (max-width: 800px) {
		div.fusion {
			padding: 40px 20px 50px 20px;
		}

		div.fusion div.float {
			max-width: 100%;
			margin-bottom: 40px;
		}

		div.fusion div.float p{
			width: 30%;
			font-size: 13px;
			text-align: center;
			margin: 12% 0 0 0;
		}

		div.fusion div.float img{
			width: 35%;
		}

		div.fusion p:nth-child(2) {
			font-size: 22px;
		}

		div.fusion p {
			font-size: 14px;
		}
	}


/*----------RESPONSIVE----------*/

@media screen and (max-width: 1210px) {

	#apple-shop {
		padding: 0 20px;
	}

}


@media screen and (max-width: 1180px) {

	#apple-shop div.header nav ul li {
		margin-right: 65px;
	}

}



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

	
	#apple-shop div.header nav {
		position: relative;
		height: 80px;
		overflow: hidden;
		transition: all 0.3s ease-out;
	}

	#apple-shop div.header nav ul {
		margin-left: 0px;
		width: 100%;
		overflow: visible;
	}

	#apple-shop div.header nav.open {
		height: 590px;
	} 

	#apple-shop div.header nav ul li {
		float: none;
		clear: both;
		text-align: center;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 15px;
	}

	#apple-shop div.header nav ul.sous {
		display: none;
	}

	#apple-shop div.header nav div.burger {
		display: block;
		width: 30px;
		height: 25px;
		float: right;
		margin-right: 20px;
		margin-top: 30px;
		cursor: pointer;
	}

	#apple-shop div.header nav ul li span {
		display: none;
	}

	#apple-shop div.header nav ul li:last-child ul li a:after {
		display: none;
   	}

   	#apple-shop div.header nav ul li:last-child ul li a {
   		text-align: center;
   		padding: 0px 0px;
   		font-style: italic;
   	}

	#apple-shop div.header nav ul li:last-child ul li a:hover {
		background-color: #ffffff;
	}

	#apple-shop div.header nav ul li:last-child ul li:first-child {
		margin-top: 10px;
		margin-bottom: 10px;
	}


	#apple-shop div.header nav ul li:last-child .sous {
		display: block;
		position: static;
		margin: 0 auto;
		border: none;
	}

	#apple-shop div.header nav ul li:last-child ul.sous li:first-child:before {
		display: none;
	}

	#apple-shop div.header nav div.close {
		width: 30px;
		height: 25px;
		float: right;
		margin-right: 20px;
		margin-top: 30px;
	}

	#apple-shop div.header nav ul li a span {
		display: none;
	}



	#apple-shop div.header nav ul li a::after {
	content: "";
    height: 1px;
    width: 30%;
    margin: 12px auto 12px auto;
    display: block;
    background-color: #6f6f6f;
	}

	#apple-shop div.header nav ul li a:hover::after {
		width: 30%;	
	}

	.burger-off {
		display: none !important;
	}

	.close-on {
		display: block !important;
	}


	#apple-shop div.header nav ul li a.active {
    	margin: 8px auto 8px auto;	
	}


}

@media screen and (max-width: 875px) {
	div.services img {
		margin-top: 20px;
	}

	div.services div {
		padding-bottom: 20px;
	}

	div.services div p:nth-child(1) {
		line-height: 28px;
		margin-top: 20px;
	}
}

@media screen and (max-width: 800px) {

	#apple-shop div.bloc div {
		flex-basis: 100%;
	}

	#apple-shop div.bloc a {
		flex-basis: 100%;
	}


}

@media screen and (max-width: 750px) {
	div.apr div.picto {
		background-color: #ffffff;
	}

	div.apr div.picto div {
	margin: 20px auto 10px auto;
	 width: 75%;
	 float: none;	
	}

	div.services img { 
		float: none;
		margin: 0 auto;
		max-width: 437px;
		display: block;
	}

	div.services div { 
		width: 100%;
		padding: 0 20px 20px 40px; 
	} 

	div.services div p:nth-child(1) {
		text-align: center;
	}

	div.services div p:last-child {
		text-align: center;
	}

}





@media screen and (max-width: 440px) {
	div.services img {
		max-width: 100%;
		width: 100%;
	}
}

@media screen and (max-width: 415px) {

	div.boutons {
		padding: 0 20px;
	}

	div.boutons a {
		margin-right: 0;
	}
}