/* RESPONSIVE CSS */

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

	body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, blockquote{font-size:18px;}

	*::-webkit-input-placeholder {font-size: 14px;}
	*:-moz-placeholder {font-size: 14px;}
	*::-moz-placeholder {font-size: 14px;}
	*:-ms-input-placeholder {font-size: 14px;}


	/* bouton */
	.btn {
		height: 48px;
		padding: 0 24px;
		border-radius: 48px;
		font-size: 20px;
	}

	.btn:after {
		width: 14px;
		height: 14px;
		margin-left: 34px;
	}


	/* textes */
	.categorie {
		font-size: 18px;
		letter-spacing: 4.5px;
	}

	.tt-h2 {
		font-size: 43px;
		letter-spacing: -1px;
	}



	/* -------------- header -------------- */
	#header {
		height: 80px;
	}


		/* logo */
		#header .logo {
			position: relative;
		    width: 77px;
		    margin-top: 10px;
		    z-index: 1;
		}


		/* nav */
		.nav ul {
			margin-bottom: 8px;
		}

			.nav ul li {
				margin-left: 32px;
				font-size: 18px;
				line-height: 23px;
			}



	/* -------------- middle -------------- */
	/* section header */

		/* texte */
		.section-header .txt-header {
			padding-top: 64px;
		}

			.section-header .tt-h1, 
			.section-header .tt-h1 div {
				font-size: 62px;
				letter-spacing: -1px;
			}

				.section-header .tt-h1 .bot {
					margin-top: -5px;
				}

				.scrolling-words-box {
					height: 75px;
				}

					.scrolling-words-box ul li {
						height: 75px;
						padding-bottom: 12px;
						font-size: 62px;
					}

			.section-header .intro {
				margin-top: 16px;
				padding-right: 20%;
				font-size: 18px;
			}

			.section-header .bouton {
				margin-top: 46px;
			}


	/* article */
	.article .tt-h2 {
		margin-top: 20px;
	}

	.article .paragraphe {
		margin-top: 15px;
	}


	/* section technology */

		/* sticker */
		.art-techno .sticker {
			top: 152px;
			right: 25px;
			width: 190px;
			height: 190px;
			border-width: 10px;
			border-radius: 190px;
			font-size: 12px;
		}

			.art-techno .sticker .line-top {
				font-size: 11px;
			}

			.art-techno .sticker strong {
				font-size: 59px;
				letter-spacing: -3.5px;
			}

				.art-techno .sticker strong sup {
					font-size: 31px;
					letter-spacing: -0.5px;
				}


		/* contenu */
		.art-techno .texte {
			margin-top: 132px;
		}


		/* slider logos */
		.art-techno .slider-logos {
			width: 80%;
			margin-left: auto;
			margin-right: auto;
			padding-left: 20px;
		}

			.art-techno .slider-logos .logo-item {
				padding: 0 40px;
			}

			.art-techno .slider-logos .img-slider {
				height: 80px;
			}


		/* encarts */
		.art-techno .boxes {
			margin: 10px -15px 0;
			padding-bottom: 67px;
		}

			.art-techno .boxes .box-item {
				width: 184px;
				height: 109px;
				margin: 30px 15px 0;
				padding: 13px 6px 0;
				font-size: 18px;
			}

			.art-techno .boxes .box-item:before {
				width: 53px;
				height: 21px;
				margin-bottom: 18px;
			}


	/* section temoignage */
	.art-temoin .texte .quote {
		padding-bottom: 40px;
		font-size: 43px;
		letter-spacing: -1px;
	}

	.art-temoin .texte .quote:before {
		width: 63px;
		height: 51px;
		margin-bottom: 40px;
	}

	.art-temoin .texte .auteur {
		font-size: 19px;
	}

	.art-temoin .texte .role {
		font-size: 15px;
	}


	/* section innovative */
	.art-innov .visuel {
		margin-right: 100px;
	}

	.art-innov .texte {
		padding: 109px 0 126px;
	}


		/* encarts */
		.art-innov .boxes {
			margin-top: 24px;
		}

			.art-innov .boxes .box-item {
				width: 158px;
				height: 82px;
				margin: 16px 12px 0 0;
				padding: 10px 6px 0;
			}

				.art-innov .boxes .img-icon {
					height: 21px;
				}

				.art-innov .boxes .intitule {
					padding-top: 8px;
					font-size: 12px;
				}

				.art-innov .boxes .note {
					padding-top: 8px;
					font-size: 9px;
				}


	/* section royalties */
	.art-royalties .wrapper {
		padding-top: 122px;
		padding-bottom: 122px;
	}

		.art-royalties .list-rub {
			margin-top: 18px;
		}

			.art-royalties .list-rub li + li {
				margin-left: 24px;
			}


		/* slider rubriques */
		.art-royalties .slider-rubq .inner {
			width: 303px;
			border-radius: 21px;
		}

			.art-royalties .slider-rubq .bg-rub {
				width: 303px;
				height: 342px;
			}

			.art-royalties .slider-rubq .txt-over {
				width: 240px;
				padding-top: 21px;
			}

				.art-royalties .slider-rubq .tt-rub {
					height: 58px;
					margin-bottom: 14px;
					font-size: 26px;
					letter-spacing: -0.5px;
				}


	/* section next steps */
	.art-next {
		padding: 91px 0 133px;
	}


		/* steps */
		.art-next .steps {
			margin-top: 36px;
		}

			.art-next .steps .step-item {
				width: 256px;
				margin: 0 31px;
				font-size: 19px;
			}

			.art-next .steps .step-item:before {
				width: 34px;
				height: 33px;
				margin-bottom: 9px;
			}


		/* bouton */
		.art-next .bouton {
			margin-top: 64px;
		}



	/* -------------- footer -------------- */
	#footer {
		padding: 62px 0;
	}

		
		/* bloc logo */
		#footer .ft-left .logo {
			width: 129px;
		}

		#footer .ft-left .accroche {
			margin-top: 16px;
			font-size: 14px;
		}

		#footer .ft-left .address {
			margin-top: 13px;
			font-size: 12px;
		}


		/* bloc contact */
		#footer .contact .tt-ft {
			font-size: 28px;
			letter-spacing: -0.5px;
		}

			
			/* newsletter */
			#footer .contact .email {
				margin-top: 16px;
			}

				#footer .contact .news form {
					height: 38px;
					margin-top: 16px;
					padding: 0 4px;
					border-radius: 38px;
				}

					#footer .contact .input-news, 
					#footer .contact input[type=text], 
					#footer .contact .btn-news, 
					#footer .contact button {
						height: 30px;
						padding: 0 20px;
						border-radius: 30px;
						font-size: 14px;
					}


			/* network */
			#footer .contact .network {
				margin-top: 16px;
			}

				#footer .contact .list-btn {
					margin-top: 10px;
				}

					#footer .contact .list-btn li + li {
						margin-left: 10px;
					}

						#footer .contact .list-btn .btn-ico {
							width: 26px;
							height: 26px;
							border-radius: 26px;
						}
	
}


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

	/* -------------- header -------------- */

	/* nav */
	.menu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: var(--colorBlack);
		display: none;
	}

		.nav {
			display: flex;
		    align-items: center;
		    justify-content: center;
		    height: 50%;
		}

			.nav ul {
				flex-direction: column;
				margin: 0;
			}

				.nav ul li {
					margin-left: 0;
					font-size: 27px;
					text-align: center;
					line-height: 33px;
				}

				.nav ul li + li {
					margin-top: 30px;
				}

				.nav ul .nav-desk {
					display: none;
				}


	/* burger */
	.burger {
		position: absolute;
		right: 30px;
		top: 25px;
		width: 30px;
		height: 22px;
		display: block;
		transform: rotate(0deg);
		transition: .5s ease-in-out;
		cursor: pointer;
		z-index: 10;
	}

		.burger span {
			position: absolute;
			left: 0;
			width: 100%;
			height: 3px;
			background: #fff;
			border-radius: 2px;
			opacity: 1;
			display: block;
			transform: rotate(0deg);
			transition: .25s ease-in-out;
		}

		.burger span:nth-child(1) {
			top: 0px;
		}

		.burger span:nth-child(2),.burger span:nth-child(3) {
			top: 9px;
		}

		.burger span:nth-child(4) {
			top: 18px;
		}

		.menuOpen .burger span:nth-child(1) {
			top: 9px;
			left: 50%;
			width: 0%;
		}

		.menuOpen .burger span:nth-child(2) {
			transform: rotate(45deg);
		}

		.menuOpen .burger span:nth-child(3) {
			transform: rotate(-45deg);
		}

		.menuOpen .burger span:nth-child(4) {
			top: 9px;
			left: 50%;
			width: 0%;
		}

		.menuOpen  {
			overflow: hidden;
		}

}


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

	/* -------------- middle -------------- */

	/* section technology */
		/* sticker */
		.art-techno .sticker {
			position: relative;
			top: auto;
			right: auto;
			margin: 10px auto 0;
		}


		/* contenu */
		.art-techno .texte .paragraphe {
			margin-top: 18px;
		}


	/* section royalties */
	.art-royalties .wrapper {
		flex-direction: column;
	}

		.art-royalties .texte {
			flex: 0 0 100%;
			width: 100%;
		}


		/* slider rubriques */
		.art-royalties .slider-rubq {
			width: 75vw;
			margin: 32px 0 0 25vw;
		}


	/* section next steps */
		/* steps */
		.art-next .steps {
			flex-direction: column;
		}

			.art-next .steps .step-item {
				margin: 22px 0 0;
			}
}


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

	.hide-desk{display:block;}
	.hide-mob{display:none;}


	/* textes */
	.categorie {
		font-size: 17px;
		letter-spacing: 3.5px;
	}

	.tt-h2 {
		font-size: 35px;
		letter-spacing: -0.5px;
	}



	/* -------------- header -------------- */
	#header {
		height: 70px;
	}


		/* logo */
		#header .logo {
			width: 65px;
			margin: 12px 0 0;
		}


		/* nav */
		


	/* -------------- middle -------------- */
	/* section header */

		/* texte */
		.section-header .txt-header {
			width: 100%;
			padding-top: 18vh;
		}

			.section-header .tt-h1, 
			.section-header .tt-h1 div {
				font-size: 42px;
			}

			.section-header .tt-h1 {
				width: calc(100% + 15px);
			}

				.section-header .tt-h1 .bot {
					margin-top: 0;
				}

				.scrolling-words-box {
					height: 50px;
				}

					.scrolling-words-box ul li {
						height: 50px;
						padding-bottom: 8px;
						font-size: 42px;
					}

			.section-header .intro {
				margin-top: 10px;
				padding-right: 0;
				font-size: 18px;
			}

			.section-header .bouton {
				margin-top: 35px;
			}


	/* article */
	.article .tt-h2 {
		margin-top: 12px;
	}

	.article .paragraphe {
		margin-top: 8px;
	}


	/* section equity */
	.art-equity {
		padding-bottom: 58px;
	}

		.art-equity .wrapper {
			flex-direction: column;
		}

			.art-equity .visuel {
				width: 47%;
				margin-left: 0;
			}

			.art-equity .texte {
				width: 100%;
				margin-left: 0;
			}


	/* section technology */
	.art-techno {
		background-size: auto 80%;
	}


		/* sticker */
		.art-techno .sticker {
			width: 125px;
			height: 125px;
			border-width: 7px;
			border-radius: 125px;
			font-size: 8px;
		}

			.art-techno .sticker .line-top {
				font-size: 7px;
			}

			.art-techno .sticker strong {
				font-size: 38px;
				letter-spacing: -2px;
			}

				.art-techno .sticker strong sup {
					margin-left: 2px;
					font-size: 21px;
				}


		/* contenu */
		.art-techno .texte {
			width: 100%;
			margin-top: 65px;
		}

			.art-techno .texte header {
				width: 85%;
				margin: 0 auto;
			}


		/* slider logos */
		.art-techno .slider-logos {
			width: 100%;
			margin-top: 10px;
			padding-left: 0;
		}

			.art-techno .slider-logos .logo-item {
				padding: 0 24px;
			}

			.art-techno .slider-logos .img-slider {
				height: 56px;
			}


		/* encarts */
		.art-techno .boxes {
			margin-top: 0;
		}

			.art-techno .boxes .box-item {
				width: 149px;
				height: 88px;
				padding: 10px 10px 0;
				font-size: 14px;
			}

			.art-techno .boxes .box-item:before {
				width: 43px;
				height: 17px;
				margin-bottom: 14px;
			}


	/* section data */
	.art-data .wrapper {
		flex-direction: column;
		padding-top: 82px;
	}

		.art-data .texte {
			width: 100%;
			z-index: 10;
		}

			.art-data .texte .paragraphe {
				padding-right: 20%;
			}

		.art-data .visuel {
			width: 120%;
			max-width: 600px;
			margin: -40px 0 -60px;
		}


	/* section temoignage */
	.art-temoin {
		height: 353px;
	}


		/* texte */
		.art-temoin .texte .quote {
			padding-bottom: 25px;
			font-size: 26px;
			letter-spacing: -0.5px;
		}

		.art-temoin .texte .quote:before {
			width: 29px;
			height: 24px;
			margin-bottom: 25px;
		}

		.art-temoin .texte .auteur {
			font-size: 15px;
		}

		.art-temoin .texte .role {
			font-size: 12px;
		}


	/* section innovative */
	.art-innov .wrapper {
		flex-direction: column;
	}

		.art-innov .visuel {
			width: 75.9%;
			max-width: 258px;
			margin: -24px 0 0;
		}

		.art-innov .texte {
			width: 100%;
			padding: 27px 0 70px;
		}


			/* encarts */
			.art-innov .boxes {
				justify-content: center;
				margin: 8px -9px 0;
			}

				.art-innov .boxes .box-item {
					width: 160px;
					height: 120px;
					margin: 19px 9px 0;
				}

					.art-innov .boxes .inner-txt {
						display: flex;
						flex-direction: column;
						justify-content: center;
						height: 88px;
					}

					.art-innov .boxes .intitule {
						padding-top: 0;
						font-size: 15px;
					}

					.art-innov .boxes .note {
						padding-top: 5px;
						font-size: 13px;
					}


	/* section royalties */
	.art-royalties {
		background-size: auto 50%;
	}

		.art-royalties .wrapper {
			padding-top: 98px;
			padding-bottom: 50px;
		}

			.art-royalties .list-rub {
				margin-top: 14px;
			}

				.art-royalties .list-rub li, 
				.art-royalties .paragraphe {
					font-size: 15px;
				}

				.art-royalties .list-rub li + li {
					margin-left: 22px;
				}


	/* section next steps */
	.art-next {
		padding: 58px 0;
	}


		/* contenu */
		.art-next .texte {
			width: 100%;
		}


		/* steps */
		.art-next .steps {
			margin-top: 0;
		}

			.art-next .steps .step-item {
				width: 220px;
				font-size: 16px;
			}

			.art-next .steps .step-item:before {
				width: 23px;
				height: 22px;
				margin-bottom: 7px;
			}


			/* bouton */
			.art-next .bouton {
				margin-top: 40px;
			}



	/* -------------- footer -------------- */
	#footer {
		padding: 50px 0;
	}

		#footer .wrapper {
			flex-direction: column;
		}


			/* bloc logo */
			#footer .ft-left {
				order: 1;
			    display: flex;
			    flex-direction: column;
			    align-items: center;
				width: 100%;
				margin-top: 55px;
			    text-align: center;
			}

				#footer .ft-left .logo {
					width: 154px;
				}

				#footer .ft-left .accroche {
					margin-top: 10px;
					font-size: 16px;
				}

				#footer .ft-left .address {
					margin-top: 10px;
					font-size: 12px;
				}


			/* bloc contact */
			#footer .contact {
				order: 0;
				flex-direction: column;
				width: 100%;
				text-align: center;
			}


				/* newsletter */
				#footer .contact .email {
					width: 100%;
					max-width: 500px;
					margin: 10px auto 0;
				}

					#footer .contact .paragraphe {
						padding: 0 10%;
					}

					#footer .contact .news form {
						flex-direction: column;
						max-width: 345px;
						height: auto;
						margin: 12px auto 0;
						padding: 0;
						background-color: transparent;
						border: none;
					}

						#footer .contact .input-news, 
						#footer .contact input[type=text] {
							flex: auto;
							width: 100%;
							height: 34px;
							background-color: var(--colorWhite);
							border: 1px solid var(--colorBorder);
							border-radius: 34px;
							font-size: 16px;
						}

						#footer .contact .btn-news, 
						#footer .contact button {
							height: 27px;
							margin-top: 10px;
							border-radius: 27px;
						}


				/* network */
				#footer .contact .network {
					display: flex;
				    flex-direction: column;
				    align-items: center;
					width: 100%;
					margin-top: 55px;
				}

					#footer .contact .list-btn li + li {
						margin-left: 25px;
					}

						#footer .contact .list-btn .btn-ico {
							width: 62px;
							height: 62px;
							border-radius: 62px;
						}
						
}


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

	/* -------------- middle -------------- */
	/* section royalties */

		/* slider rubriques */
		.art-royalties .slider-rubq {
			width: 80vw;
			margin-left: 20vw;
		}

			.art-royalties .slider-rubq .inner {
				width: 198px;
				border-radius: 14px;
			}

				.art-royalties .slider-rubq .bg-rub {
					width: 198px;
					height: 224px;
				}

				.art-royalties .slider-rubq .txt-over {
					width: 160px;
					padding-top: 12px;
				}

					.art-royalties .slider-rubq .tt-rub {
						height: 42px;
						margin-bottom: 8px;
						font-size: 17px;
				}


	/* modal formulaire */
	.content-modal {
		padding: 32px 5%;
	}


		/* formulaire */

			/* checkbox */
			.type-options {
				flex-wrap: wrap;
				justify-content: flex-start;
				margin-bottom: 5px;
			}

			.form-check {
				margin: 0 15px 15px 0;
			}
}


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

	/* -------------- middle -------------- */
	/* section royalties */

		/* slider rubriques */
		.art-royalties .slider-rubq .slick-list {
			padding: 0 20% 0 0;
		}
}