input{font-size: 16px;
	text-transform: uppercase;
	line-height:20px;
	margin-bottom: 8px;
	padding: 15px 20px}

body{background-image: url('../images/background1.jpg');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;}

*{box-sizing: border-box;}



/* HEADER */

header {background-color: black;
		display: flex;
		gap: 35px;
		align-items: center;
		color: white;
		padding-left: 40px;
		padding-right: 40px;}

  	header ul {display: flex;
			flex-direction: row;
			gap: 2px;
			justify-content: space-between;
			align-items: center;
			color: white;
			padding: 50px;
			list-style-type: none;}

  		header  ul a {color: white;
						text-decoration: none;
						display: flex;
						gap: 10px;
						margin-right: 0px;}

			.logo {margin-left: 50px;}
				.logo img{width: 145px;}

  			.groupe1 {display: flex;
						justify-content: space-between;
						align-items: center; /* Assure que tout est aligné verticalement */
						width: 100%; /* Utilisez toute la largeur disponible */
						padding: 20px; /* Ajoutez un padding horizontal si nécessaire */}
  				.header-nav ul {display: flex;
							gap: 10px;
							scroll-margin-left: 30px;
							padding: 50px;}
  
  				.nav-group ul {display: flex;
							gap: 20px;
							margin-left: 300px;}
  			
  				.menu-burger {cursor: pointer;
								display: flex; /* Utilisez flex pour aligner les barres du burger */
								flex-direction: column; /* Empile les barres verticalement */
								justify-content: space-around; /* Espacement entre les barres */
								padding: 10px; /* Espacement autour du menu burger */
								height: 40px; /* Hauteur totale du menu burger */}
  
  					.menu-burger span {display: block;
										width: 30px; /* Largeur des barres du menu burger */
										height: 3px; /* Hauteur des barres du menu burger */
										background-color: white;
										border-radius: 2px;}
  
	/* Responsive HEADER */
	@media (max-width: 1280px){
		.header-nav, .nav-group{display: none;}
		header{justify-content: space-between;
				gap: 10vw;
				padding: 5vw;}
		.logo{margin-left: 2vw;}
		.logo img{width: 20vw;}
		.menu-burger span{width: 30px; padding: 1px;}}


/* PARTIE 1 "starlink pour les résidences"*/

.part1{display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 22vh;
		justify-content: center;
		align-items: center;
		align-content: center;
		text-align: center;
			background-image: url('../images/residential/image1.jpg');
			width: 100%;
			height: 100vh;
			background-size: cover;}

	/* BLOC 1 */

		.content1 h3{text-transform: none;
			font-weight: 400;}

	/* BLOC 2 */

		.formul{display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 20px;
				justify-content: center;
				align-items: center;
				align-content: center;}

		input[type=email]{background: rgba(255, 255, 255, 0.212);
						color: #FFFFFF;
						text-align: left;
						border: 0.5px solid white;
						border-radius: 5px;
						width: 350px}

		input[type=submit]{background: white;
						color: black;
						font-weight: bold;
						text-align: center;
						border: 0.5px solid white;
						border-radius: 5px;
						width: 200px}

		.map{display: inline-block;
			text-decoration: none;
			text-transform: uppercase;
			color: white;
			font-size: 12px;
			font-weight: bold;
			background: transparent;
			padding: 18px 167px }

	/* Responsive PARTIE 1 */
	@media (max-width: 500px){
		.part1{height: 80vh;}}



/* PARTIE 2 "regardez des films en streaming..."*/

.part2{display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 50px;
		justify-content: center;
		align-items: center;
		align-content: center;
		text-align: center;
			padding: 50px 20px 120px 20px}

	/* BLOC 2 */

		.p2b2{display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			gap: 35px;
			justify-content: center;
			align-items: center;
			align-content: center;
			text-align: center;
				border:0.5px solid darkgray;
				border-radius: 5px;
				padding:35px 90px}

		.p2b22 h2{display: inline;}

		.p2b22 h3{display: inline;
				font-weight: 400;
				color: darkgray;
				font-size: 25px;
				line-height: 21px}

	/* BLOC 3 */

		.p2b3{display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 10px;
			justify-content: center;
			align-items: center;
			align-content: center;}

		.forfaits{font-size: 14px;
				line-height:18px;
				text-decoration: none;
				text-transform: uppercase;
				font-weight: bold;
				color: #FFFFFF;
				padding: 10px 15px;
				border:0.5px solid white;
				border-radius: 5px}

		.commander{font-size: 14px;
				line-height:18px;
				text-decoration: none;
				text-transform: uppercase;
				font-weight: bold;
				color: black;
				background: #FFFFFF;
				padding: 10px 15px;
				border:0.5px solid white;
				border-radius: 5px }				

	/* Responsive PARTIE 2 */
	@media (max-width: 955px){
		.part2{gap: 5vw}
		.p2b2{gap: 3vw;
				padding: 5vw 30vw;}
		.p2b22 h3{font-size: 4vw;
				line-height:5vw;}
		.p2b3{gap: 3vw;}
		.p2b3 a{font-size: 2.5vw;
				line-height: 3.5vw;}}


/* BANDE RESI */

.band{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
	align-content: center;
		background: #1C1C1C;
		padding: 2vh 9vw}

	.band h2{font-size: 30px;}

	.band2{display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: flex-end;
		align-items: center;
		align-content: center;}

		.band2a{color: #FFFFFF;
				font-size: 14px;
				line-height:18px;
				text-decoration: none;
				text-transform: uppercase;
				font-weight: bold;
				padding: 10px 15px 10px 0px}

	/* Responsive BANDE */
	@media (max-width: 955px){
	.band{flex-direction: column;
			justify-content: space-around;
			align-items: flex-start;
			align-content: flex-start;
			gap: 1vw}
	.band h2{font-size: 5vw;
		line-height:6vw;;}
	.band2{flex-direction: column;
			align-items: flex-start;
			align-content: flex-start;
			gap: 1vw;}
	.band2a{font-size: 2.5vw;
			line-height: 3.5vw;
			padding: 1vw 0vw;}}


/* PARTIE 3 "internet haut débit..."*/

.part3{background-image: url('../images/residential/image2.jpg');
		width: 100%;
		height: 100vh;
		background-size: cover;}

	.content3{margin: 12vh 10vw;
			max-width: 515px;
			position: absolute;}

	/* Responsive PARTIE 3 */
	@media (max-width: 500px){
		.part3{height: 80vh;}}



/* PARTIE 4 "conçu pour une installation autonome"*/

.part4{display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 5vw;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		margin: 10vh 10vw 20vh 10vw;}

	.part4 img{width: 40vw;}

	/* CONTENT */

	.content4{display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 5vh;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: center;
		max-width: 30vw;}

		/* BLOC 2 */

		.p4b2 p{display: inline;
				color: darkgray;
				font-weight: 200;
				font-size: 30px;
				line-height: 45px}
		.p4b2 h3{display: inline;
				line-height: 45px}


		/* BLOC 3 */

		.android{display: inline;
			text-decoration: none;
			text-transform: uppercase;
			color: white;
			font-size: 12px;
			font-weight: bold;
			background: transparent;
			padding: 30px 15px 15px 0px}

		.ios{display: inline;
			text-decoration: none;
			text-transform: uppercase;
			color: white;
			font-size: 12px;
			font-weight: bold;
			background: transparent;
			padding: 30px 15px 15px 0px}

	/* Responsive PARTIE 4 */
	@media (max-width: 955px) {
		.part4{flex-direction: column;}
		.part4 img{width: 100%;}
		.content4{max-width: 100%;
					gap: 5vw;}
		.p4b2 h3{font-size: 4vw;
			line-height:5vw;}
		.p4b2 p{font-size: 4vw;
			line-height:5vw;}
		.android{font-size: 2.5vw;
			line-height:3.5vw;}
		.ios{font-size: 2.5vw;
			line-height:3.5vw;}}



/* PARTIE 5 "données illimitées..."*/

.part5{display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 15vh;
		justify-content: space-between;
		align-items: center;
		align-content: center;
			padding: 10vh 10vw 20vh 10vw}

	.part5 img{width: 40vw;}

	/* CONTENT */

		.content5{display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 5vh;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: center;
			max-width: 30vw;}

	/* Responsive PARTIE 5 */
	@media (max-width: 955px) {
		.part5{flex-direction: column-reverse;}
		.part5 img{width: 100%;}
		.content5{max-width: 100%;
				gap: 5vw;}
	}



/* PARTIE 6 "résistant aux intempéries"*/

.part6{background-image: url('../images/residential/image5.jpg');
		width: 100%;
		height: 100vh;
		background-size: cover;}

.content6{position: absolute;
		right :0;
		margin: 12vh 10vw;
		max-width: 515px;}

	/* Responsive PARTIE 6 */
	@media (max-width: 500px){
		.part6{height: 80vh;}}



/* PARTIE 7 "contenu de la boîte"*/

.part7{background-image: url('../images/residential/image6.jpg');
		width: 100%;
		height: 100vh;
		background-size: cover;
		background-position: center;}

	/* BLOC 1 */

		.p7b1{display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap:15px;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;}
			
			.content7{margin: 12vh 10vw;
						max-width: 515px;}

				.specif{display: inline;
					text-decoration: none;
					text-transform: uppercase;
					color: white;
					font-size: 12px;
					font-weight: bold;
					background: transparent;}

	/* BLOC 2 */

		.p7b2{display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 4vw;
		justify-content: center;
		align-items: center;
		align-content: center;
			margin: 12vh 7vw;
			overflow: hidden;}
		
		.p7b2 p{font-size: 20px}
		.p7b2 img{height: 25vh;}

			.p7b21{display: flex;
					flex-direction: column;
					gap:2vw;
					justify-content: center;
					align-content: center;
					align-items: center;}

			.p7b22{display: flex;
					flex-direction: column;
					gap:2vw;
					justify-content: center;
					align-content: center;
					align-items: center;}

			.p7b23{display: flex;
					flex-direction: column;
					gap:2vw;
					justify-content: center;
					align-content: center;
					align-items: center;}

			.p7b24{display: flex;
					flex-direction: column;
					gap:2vw;
					justify-content: center;
					align-content: center;
					align-items: center;}

			.p7b25{display: flex;
					flex-direction: column;
					gap:2vw;
					justify-content: center;
					align-content: center;
					align-items: center;}

	/* Responsive PARTIE 7 */
	@media (max-width: 500px){
		.part7{height: 80vh;}}
	@media (max-width: 955px) {	
		.p7b1{gap: 2vw;}
		.content7{margin: 5vw 7vw;}
		.specif{font-size: 2.5vw;
			line-height:3.5vw;}
		.p7b2{margin: 5vw 7vw;}
		.p7b2 p{font-size: 2vw;
			line-height:2.5vw;}}			

	@media (max-width: 1445px) {	
		.p7b2{justify-content: flex-start;}}



/* PARTIE 8 "accessoires et supports"*/

	/* BLOC 1 */

	.content8{margin: 12vh 10vw 3vh 10vw;}

	.content8 h3{font-weight: 400; font-size: 23px; margin-bottom: 0}

	.content8 p{color: darkgray;}

	/* BLOC 2 */

		.p8b2{display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 1vw;
		justify-content: center;
		align-items: flex-start;
		align-content: center;
			margin: 12vh 10vw;
			overflow: hidden;}

		.p8b2 img{height: 25vh;}
		.p8b2 p{font-size: 20px;
				text-align: center;}

			.p8b21{display: flex;
					flex-direction: column;
					gap:25px;
					justify-content: center;
					align-content: center;
					align-items: center;}

			.p8b22{display: flex;
					flex-direction: column;
					gap:25px;
					justify-content: center;
					align-content: center;
					align-items: center;}

			.p8b23{display: flex;
					flex-direction: column;
					gap:25px;
					justify-content: center;
					align-content: center;
					align-items: center;
					flex-wrap: wrap;}

			.p8b24{display: flex;
					flex-direction: column;
					gap:25px;
					justify-content: center;
					align-content: center;
					align-items: center;}

			.p8b25{display: flex;
					flex-direction: column;
					gap:25px;
					justify-content: center;
					align-content: center;
					align-items: center;}

			.p8b26{display: flex;
					flex-direction: column;
					gap:25px;
					justify-content: center;
					align-content: center;
					align-items: center;}

	/* Responsive PARTIE 8 */
	@media (max-width: 955px) {	
		.content8 h3{font-size: 4vw;
			line-height:4.5vw;}			
		.p8b2{margin: 5vw 7vw;}
		.p8b2 p{font-size: 2vw;
				line-height:2.5vw;}}

	@media (max-width: 1445px) {	
		.p8b2{justify-content: flex-start;}}



/* PARTIE 9 "ce que nos clients en pensent"*/

	/* BLOC 1 */

	.content9{margin: 27vh 10vw 3vh 10vw;}

	.content9 h3{font-weight: 400; font-size: 23px; margin-bottom: 0}

	/* BLOC 2 */

		.p9b2{display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 5vw;
		justify-content: center;
		align-items: flex-start;
		align-content: flex-start;
			margin: 12vh 8vw;}

			.p9b2 h3{font-size: 28px;
				line-height: 34px;
				margin-bottom: 8px}	
			.p9b2 p{font-size: 16px;
				line-height:20px;}

			.p9b21{display: flex;
					flex-direction: column;
					gap: 1vw;
					justify-content: flex-start;
					align-content: center;
					align-items: flex-start;
					border-left:0.05px solid #FFFFFF;
					padding: 0vh 0vw 0vh 3vw;
					width: 24vw;}
			.p9b22{display: flex;
					flex-direction: column;
					gap:1vw;
					justify-content: flex-start;
					align-content: flex-start;
					align-items: flex-start;
					border-left:0.05px solid #FFFFFF;
					padding: 0vh 0vw 0vh 3vw;
					width: 24vw;}
			.p9b23{display: flex;
					flex-direction: column;
					gap:1vw;
					justify-content: flex-start;
					align-content: center;
					align-items: flex-start;
					border-left:0.05px solid #FFFFFF;
					padding: 0vh 0vw 0vh 3vw;
					width: 24vw;}

	/* Responsive PARTIE 9 */
	@media (max-width: 1200px) {	
		.content9 h3{font-size: 4vw;
					line-height:4.5vw;}
		.p9b2{flex-direction: column; 
				gap: 3vw;
				margin: 2vw 8vw;}
		.p9b2 h3{font-size: 3vw;
				line-height: 4vw;
					margin-bottom: 5px}	
		.p9b2 p{font-size: 2.5vw;
				line-height:3vw;}
		.p9b21, .p9b22, .p9b23{width: 100%;
								gap: .5vw;
								border-left: none;}}



/* PARTIE 10 "voir les autres forfaits starlink"*/

	.part10{display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 5vh;
		justify-content: center;
		align-items: center;
		align-content: center;
		padding: 13vh 10vw}

		.part10 h2{font-size: 45px;}

		/* BLOC 2 */

			.p10b2{display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 1vw;
				justify-content: flex-start;
				align-items: flex-start;
				align-content: center;}

					.p10b201{width: 38vw;
							height: 54vh;
							overflow: hidden;}

						.p10b21{background-image: url('../images/residential/image17.jpg');
								width: 100%;
								height: 100%;
								background-size: cover;
								background-position: center;}
						
								.p10b211{position: absolute;
										margin-top: 2vh;
										margin-left: 1vw;}

									.p10b211 h3{font-size: 35px; margin-bottom: 0px;}
									.p10b211 p{font-size: 22px;}
							
						/* Effet zoom hover image */
						.p10b201:hover .p10b21,
						.p10b201:focus .p10b21{transform: scale(1.05);
												transition: all .7s;}


					.p10b202{width: 38vw;
							height: 54vh;
							overflow: hidden;}

						.p10b22{background-image: url('../images/residential/image18.jpg');
								width: 100%;
								height: 100%;
								background-size: cover;
								background-position: center;}	
								
								.p10b221{position: absolute;
									margin-top: 2vh;
									margin-left: 1vw;}
									
									.p10b221 h3{font-size: 35px; margin-bottom: 0px;}
									.p10b221 p{font-size: 22px;}

						/* Effet zoom hover image */
						.p10b202:hover .p10b22,
						.p10b202:focus .p10b22{transform: scale(1.05);
												transition: all .7s;}

	/* Responsive PARTIE 10 */
	@media (max-width: 955px) {
		.part10 h2{font-size: 8vw;
			line-height:10vw;
			margin-bottom: 2vw;}
		.p10b2{flex-direction: column; gap: 2vh;}
		.p10b201, .p10b202{width:95vw;}	
		.p10b211 h3, .p10b221 h3{font-size: 7vw; line-height: 8vw; margin-bottom: 2vw;}
		.p10b211 p, .p10b221 p{font-size: 5vw;line-height: 6vw; margin-bottom: 2vw;}}



/* PARTIE 11 "essai de 30 jours"*/

	.part11{display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			gap: 50px;
			justify-content: center;
			align-items: center;
			align-content: center;
			text-align: center;
			padding: 14vh 10vw}

		.part11 h2{font-size: 45px;}
		.part11 p{font-size: 23px;
					line-height: 25px;}

			.content11{width: 45vw;}

	/* Responsive PARTIE 11 */
	@media (max-width: 955px) {
		.part11{padding: 8vh 2vw;}
		.content11, .part11 a{width: 90vw;}
		.part11 h2{font-size: 8vw;
			line-height:10vw;
			margin-bottom: 2vw;}
		.part11 p{p{font-size: 2.5vw;
			line-height:3.5vw;
			margin-bottom: 2vw;}}}



/* FOOTER*/

	.footer{display: flex;
			flex-direction: row-reverse;
			flex-wrap: wrap;
			gap: 1vw;
			justify-content: space-between;
			align-items: flex-start;
			align-content: flex-start;
				background-color: black;
				padding: 2vh 6vw;}

	.footer a{font-size: 13px;
				line-height: 16px;
				font-weight: bold;
				text-decoration: none;
				color: #FFFFFF;
				display: inline-block;}
	
	.footer p{font-size: 13px;
				line-height: 16px;}

		.fb1{display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 25px;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
				width: 45%;}
				
			.fb11 p{text-align: end;
					max-width: 15vw;}

				.footer-form{display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					gap: 15px;
					justify-content: flex-start;
					align-items: flex-start;
					align-content: flex-start;}

				.footer-form input[type=email]{background-color: transparent;
									border-radius: none !important;
									border: none;
									padding: 0%;
									color: white;
									text-align: left;
									width: 250px;
									height: 15px !important;
									font-size: 13px !important;
									text-transform: none;}

				.footer-form input[type=submit]{background-color: transparent;
									border-radius: none;
									border: none;
									padding: 0%;
									color: white;
									text-align: right;
									width: 100px;
									height: 15px !important;
									font-size: 13px !important;}

				.fb12 p{text-align: start;
						max-width: 20vw;}

		.fb2{display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			gap: 30px;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			width: 45%;}

			.fb21{display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 20px;
				justify-content: space-between;
				align-items: flex-start;
				align-content: flex-start;
				text-align: start;}

				.fb21 a{text-align: start;
						max-width: 150px}
		
			.fb22{display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 20px;
				justify-content: flex-start;
				align-items: center;
				align-content: center;}

	/* Responsive FOOTER */
	
		@media (max-width: 955px) {
			.footer {flex-direction: column;
					align-items: flex-start;
					gap: 5vh;}

			.fb1 {width: 100%;}

				.fb11 p{max-width: 100%;
						text-align: center;}

			.footer-form{text-align: center;}

				.fb12 p{max-width: 100%;
					text-align: center;}

			.fb2 {width: 100%;}

				.fb21 {flex-direction: column;
						max-width: 100%;
						text-align: start;}

					.fb21 a{max-width: 100%;
							text-align: center;}		
			
					.fb22 p{max-width: 100%;
							text-align: center;}}


	/* Responsive FORM ET AUTRES BOUTONS*/

	@media (max-width: 955px) {
		.formul{gap: 2vw}

		input[type=email]{width: 80vw}

		input[type=submit]{width: 80vw}

		.map{font-size: 2.5vw;
			padding: 1vw }
		
		.forfaits{font-size: 2.5vw;
				line-height: 3.5vw;
				padding: 1vw 2vw;}

		.commander{font-size: 2.5vw;
					line-height: 3.5vw;
					padding: 1vw 2vw}}