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 */

.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/home/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 */

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

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

    /* BLOC 2 */

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

                .p2b201{width: 25vw;
                        height: 55vh;
                        overflow: hidden;}

                    .p2b21{background-image: url('../images/home/image2.jpg');
                            width: 100%;
                            height: 100%;
                            background-size: cover;
                            background-position: center;}
                    
                            .p2b211{position: absolute;
                                    margin-top: 2vh;
                                    margin-left: 1vw;}

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

                .p2b202{width: 25vw;
                        height: 55vh;
                        overflow: hidden;}

                    .p2b22{background-image: url('../images/home/image3.jpg');
                            width: 100%;
                            height: 100%;
                            background-size: cover;
                            background-position: center;}
                    
                            .p2b221{position: absolute;
                                    margin-top: 2vh;
                                    margin-left: 1vw;}

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


                .p2b203{width: 25vw;
                        height: 55vh;
                        overflow: hidden;}

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

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

/* Responsive PARTIE 2 */
@media (max-width: 955px) {
    .part2 h2{font-size: 8vw;
        line-height:10vw;
        margin-bottom: 2vw;}
    .p2b2{flex-direction: column; gap: 2vh;}
    .p2b201, .p2b202{width:95vw;}	
    .p2b211 h3, .p2b221 h3{font-size: 7vw; line-height: 8vw; margin-bottom: 2vw;}
    .p2b211 p, .p2b221 p{font-size: 5vw;line-height: 6vw; margin-bottom: 2vw;}}



 /* PARTIE 3 */
 
 .part3{display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
        padding: 50px 20px 120px 20px}

/* BLOC 2 */

.content3{margin: 5vh 10vw 3vh 10vw;}

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

.content3 p{color: darkgray;}		

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

/* Responsive PARTIE 3 */
@media (max-width: 955px){	
    .part3{gap: 5vw}
    .content8 h3{font-size: 4vw;
        line-height:4.5vw;}
	.ensavoirplus{font-size: 2.5vw;
			line-height:3.5vw;}}
    
 



 /* PARTIE 4 */

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

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

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




 /* PARTIE 5 */

.part5{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;}

    .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;}

    /* BLOC 2 */

    .p5b2 p{display: inline;
            color: darkgray;
            font-weight: 200;
            font-size: 30px;
            line-height: 45px}
    .p5b2 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 5 */
@media (max-width: 955px) {
    .part5{flex-direction: column;}
    .part5 img{width: 100%;}
    .content5{max-width: 100%;
                gap: 5vw;}
    .p5b2 h3{font-size: 4vw;
        line-height:5vw;}
    .p5b2 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 6 */

 .part6{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}

.part6 img{width: 40vw;}

/* CONTENT */

    .content6{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 6 */
@media (max-width: 955px) {
    .part6{flex-direction: column-reverse;}
    .part6 img{width: 100%;}
    .content6{max-width: 100%;
            gap: 5vw;}
}



 /* PARTIE 7 */

 .part7{background-image: url('../images/home/image8.jpg');
    width: 100%;
    height: 100vh;
    background-size: cover;}

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

		.esp{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;
            margin-top: 12vh;}


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


 /* PARTIE 8 */

 .part8{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}

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

    .content8{width: 45vw;}

/* Responsive PARTIE 8 */
@media (max-width: 955px) {
.part8{padding: 8vh 2vw;}
.content8, .part8 a{width: 90vw;}
.part8 h2{font-size: 8vw;
    line-height:10vw;
    margin-bottom: 2vw;}
.part8 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 }

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

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