/*

*******************************************************
*                                                     *
* ***       ***       ***     *******      *******    *
*  ***     *****     ***    ***     ***  ***     ***  *
*   ***   *** ***   ***        ***         ***        *
*    *** ***   *** ***            ***         ***     *
*     *****     *****       ***     ***   ***    ***  *
*      ***       ***          *******       *******   *
*                                                     *
*******************************************************
    -  WEB STEPH SOLUTIONS BY STEPHANE LAGRACE  -
*******************************************************

*/


html{
	width: 100vw;
	overflow-x: hidden;
	scrollbar-color: #fceb25 rgba(26, 26, 26);
}

body{
	background-color: rgba(26, 26, 26);
}

a{
	text-decoration: none !important;
}

.menu{
	/*background-color: rgba(26, 26, 26, 0.669);*/
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
}

@keyframes print-effect {
  0% {
    mask-image: linear-gradient(to top, black 0%, transparent 0%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 0%);
	opacity: 0;
  }
   10% {
    mask-image: linear-gradient(to top, black 10%, transparent 10%);
    -webkit-mask-image: linear-gradient(to top, black 10%, transparent 10%);
	opacity: 0.1;
  }
     20% {
    mask-image: linear-gradient(to top, black 20%, transparent 20%);
    -webkit-mask-image: linear-gradient(to top, black 20%, transparent 20%);
	opacity: 0.15;
  }
     30% {
    mask-image: linear-gradient(to top, black 30%, transparent 30%);
    -webkit-mask-image: linear-gradient(to top, black 30%, transparent 30%);
	opacity: 0.2;
  }
    40% {
    mask-image: linear-gradient(to top, black 40%, transparent 40%);
    -webkit-mask-image: linear-gradient(to top, black 40%, transparent 40%);
	opacity: 0.25;
  }
     50% {
    mask-image: linear-gradient(to top, black 50%, transparent 50%);
    -webkit-mask-image: linear-gradient(to top, black 50%, transparent 50%);
	opacity: 0.3;
  }
     60% {
    mask-image: linear-gradient(to top, black 60%, transparent 60%);
    -webkit-mask-image: linear-gradient(to top, black 60%, transparent 60%);
	opacity: 0.35;
  }
     70% {
    mask-image: linear-gradient(to top, black 70%, transparent 70%);
    -webkit-mask-image: linear-gradient(to top, black 70%, transparent 70%);
	opacity: 0.5;
  }
     80% {
    mask-image: linear-gradient(to top, black 80%, transparent 80%);
    -webkit-mask-image: linear-gradient(to top, black 80%, transparent 80%);
	opacity: 0.6;
  }
     90% {
    mask-image: linear-gradient(to top, black 90%, transparent 90%);
    -webkit-mask-image: linear-gradient(to top, black 90%, transparent 90%);
	opacity: 0.7;
  }
    100% {
    mask-image: linear-gradient(to top, black 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 100%, transparent 100%);
	opacity: 1;
  }
    
}

@keyframes print-effect2{
    0% {
    mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
  }
   5% {
    mask-image: linear-gradient(to bottom, black 10%, transparent 10%);
    -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 10%);
	 
  }
     10% {
    mask-image: linear-gradient(to bottom, black 20%, transparent 20%);
    -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 20%);
	opacity: 1; 
  }
     15% {
    mask-image: linear-gradient(to bottom, black 30%, transparent 30%);
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 30%);

  }
    20% {
    mask-image: linear-gradient(to bottom, black 40%, transparent 40%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 40%);
	opacity: 1;
  }
     25% {
    mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
	
  }
     30% {
    mask-image: linear-gradient(to bottom, black 60%, transparent 60%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 60%);
	opacity: 1;
  }
     35% {
    mask-image: linear-gradient(to bottom, black 70%, transparent 70%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 70%);
 
  }
     40% {
    mask-image: linear-gradient(to bottom, black 80%, transparent 80%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 80%);
	
  }
     45% {
    mask-image: linear-gradient(to bottom, black 90%, transparent 90%);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 90%);
	
  }
    50% {
    mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
	opacity: 1;
  }

  100% {
	opacity: 1;
  }
}

.img-entete{
	width: 15%;
	margin-left: 42.5%;
	margin-top: 60px;
	margin-bottom: 40px;
	border-style: double;
	border-color: white;
	border-width: 5px;
	padding: 8px;
	border-radius: 10px;
	animation: print-effect 1.5s linear forwards;
}

h1{
	font-family: "Monoton", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	color: #fceb25;
	margin-top: 60px;
	word-spacing: 7px;
	letter-spacing: 1.5px;
}

.menu h2{
	font-family: "Monoton", sans-serif;
	/*font-weight: 400;*/
	font-style: normal;
	text-align: center;
	color: white;
	font-size: 20px;
	word-spacing: 7px;
	letter-spacing: 1.5px;
}

.btn-devis{
	font-family: "Monoton", sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
	position: absolute;
	bottom: 30px;
	right: 60px;
	border-style: double;
	border-width: 3px;
	background-color: rgba(26, 26, 26)
}

.menu1{
	background-color: rgba(26, 26, 26);
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 50px;
	filter: drop-shadow(10px 10px 4px #ac9400);
}

.menu1 a{
	color: #fceb25;
}

@keyframes print-text {
  0% {
    mask-image: linear-gradient(to right, black 0%, transparent 0%);
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 0%);
  }
      5% {
    mask-image: linear-gradient(to right, black 5%, transparent 5%);
    -webkit-mask-image: linear-gradient(to right, black 5%, transparent 5%);
  }
      10% {
    mask-image: linear-gradient(to right, black 10%, transparent 10%);
    -webkit-mask-image: linear-gradient(to right, black 10%, transparent 10%);
  }
      15% {
    mask-image: linear-gradient(to right, black 15%, transparent 15%);
    -webkit-mask-image: linear-gradient(to right, black 15%, transparent 15%);
  }
      20% {
    mask-image: linear-gradient(to right, black 20%, transparent 20%);
    -webkit-mask-image: linear-gradient(to right, black 20%, transparent 20%);
  }
      25% {
    mask-image: linear-gradient(to right, black 25%, transparent 25%);
    -webkit-mask-image: linear-gradient(to right, black 25%, transparent 25%);
  }
      30% {
    mask-image: linear-gradient(to right, black 30%, transparent 30%);
    -webkit-mask-image: linear-gradient(to right, black 30%, transparent 30%);
  }
      35% {
    mask-image: linear-gradient(to right, black 35%, transparent 35%);
    -webkit-mask-image: linear-gradient(to right, black 35%, transparent 35%);
  }
      40% {
    mask-image: linear-gradient(to right, black 40%, transparent 40%);
    -webkit-mask-image: linear-gradient(to right, black 40%, transparent 40%);
  }
      45% {
    mask-image: linear-gradient(to right, black 45%, transparent 45%);
    -webkit-mask-image: linear-gradient(to right, black 45%, transparent 45%);
  }
    50% {
    mask-image: linear-gradient(to right, black 50%, transparent 50%);
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
  }
      55% {
    mask-image: linear-gradient(to right, black 55%, transparent 55%);
    -webkit-mask-image: linear-gradient(to right, black 55%, transparent 55%);
  }
      60% {
    mask-image: linear-gradient(to right, black 60%, transparent 60%);
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 60%);
  }
      65% {
    mask-image: linear-gradient(to right, black 65%, transparent 65%);
    -webkit-mask-image: linear-gradient(to right, black 65%, transparent 65%);
  }
      70% {
    mask-image: linear-gradient(to right, black 70%, transparent 70%);
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 70%);
  }
      75% {
    mask-image: linear-gradient(to right, black 75%, transparent 75%);
    -webkit-mask-image: linear-gradient(to right, black 75%, transparent 75%);
  }
      80% {
    mask-image: linear-gradient(to right, black 80%, transparent 80%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 80%);
  }
      85% {
    mask-image: linear-gradient(to right, black 85%, transparent 85%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 85%);
  }
      90% {
    mask-image: linear-gradient(to right, black 90%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 90%);
  }
      95% {
    mask-image: linear-gradient(to right, black 95%, transparent 95%);
    -webkit-mask-image: linear-gradient(to right, black 95%, transparent 95%);
  }
      100% {
    mask-image: linear-gradient(to right, black 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 100%, transparent 100%);
  }
}

.h2prod{
	font-family: "Monoton", sans-serif;
	font-weight: 500;
	text-shadow: 1px 1px #ac9400;
	font-size: 50px;
	padding-top: 30px;
	padding-bottom: 30px;
	word-spacing: 10px;
	animation: print-effect2 3s linear;
	animation-timeline: view();
	animation-range: entry 20% cover 80%;
}

H2{
	text-align: center;
	margin-top: 20px;
	color: black;
}

.h2-enc{
	color: #fceb25;
	font-family: "Monoton", sans-serif;
	letter-spacing: 1px;
	font-size: 25px;
	padding-top: 5px;
	padding-bottom: 2px;
	border-style: double;
	border-color: #fceb25;
	border-width: 4px;
	border-radius: 3px;
	/*margin-left: 10px;
	margin-right: 10px;*/
	background-color: rgba(26, 26, 26);
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	filter: drop-shadow(10px 10px 4px black);
}

.h2-enc:hover{
	/*border-color: #F9E79F;*/
}

.encarts{
	margin-top: 100vh;
	/*background-color: rgba(26, 26, 26);*/
	background-color: #fceb25;

}

.your-class{
	width: 92vw;
	/*margin-left: 3vw;*/
	margin-left: auto;
	margin-right: auto;
}

.your-class div{
	
}

.slick-prev:before, .slick-next:before{
	color: black !important;
	font-size: 30px !important;
}


.div-slid img{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	filter: drop-shadow(10px 10px 4px black);
	padding-bottom: 30px;
}

.encs{
	 transition-duration: 0.5s;
}

.encs:hover{
	filter: saturate(2);
	color: orange !important;
}

.encs h2{
	 transition-duration: 0.5s;
}

.encs h2:hover{
	color: #F9E79F !important;
}

.enc4{
	width: 100%;
}

#carouselExampleFade{
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	z-index: -1;
	overflow: hidden;
}

.w-100{
	display: block;
	width: auto !important; 
	position: relative;
    left: 50%;
    transform: translateX(-50%);
	min-height: 100vh;
	min-width: 100vw;
}

.texte-services{
	margin-left: 50px;
	margin-right: 50px;
	padding-bottom: 60px;
	display: flex;
	align-items: center;
}

.texte-services h2{
	font-family: "Monoton", sans-serif;
	border-style: double;
	border-color: black;
	border-width: 5px;
	border-radius: 5px;
	padding: 8px;
}

.texte-accueil{
	margin-left: 30px;
	margin-right: 30px;
	text-align: justify;
	font-weight: 600;
}

.com{
	background-color: rgba(26, 26, 26);
	height: 550px;
	width: 100vw;
}

.div-com{
	width: 90vw;
	height: 500px;
	margin-left: 5vw;
	overflow: hidden;
	background-color: rgba(26, 26, 26);
}

.comm{
	 transition-duration: 1s;
}

.comm:hover{
	filter: saturate(2);
}

.img-com{
	width: 100%;
}

.div-h2-com{
	position: relative;
	width: 100vw;
	background-color: rgba(26, 26, 26);
	margin-top: -375px;
	z-index: 2;
}

.h2-com{
	font-family: "Monoton", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 40px;
	margin-bottom: 20px;
	letter-spacing: 3px;
}

/*========================= PARTIE DIFFERENTS SERVICES =====================*/

.techniques{
	padding-top: 50px;
	padding-left: 20px;
	padding-right: 20px;
}

.tech2{
	margin-top: 30px;
}

.techniques .h2-pages{
	color: #fceb25;
}

/*.techniques .pg{
	filter: drop-shadow(10px 10px 4px #ac9400);
}

.techniques .pd{
	filter: drop-shadow(-10px 10px 4px #ac9400);
}
*/

.tech-flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.img-tech{
	width: 30%;
	margin-bottom: 50px;
}

.row-tech{
	margin-bottom: 100px;
}
/*============================= PARTIE COMMENT CA MARCHE =========================*/
.ca-marche{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	padding-top: 100px;
}

.h2-ca-marche{
	font-family: "Monoton", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #fceb25;
	font-size: 40px;
	word-spacing: 10px;
	width: 40vw;
	border-style: double;
	border-color: #fceb25;
	border-width: 5px;
	border-radius: 5px;
	padding: 8px;
}

.p-ca-marche{
	color: #fceb25;
	width: 40vw;
	font-weight: 600;
	text-align: justify;
}


/*============================= PARTIE LIEN VERS PROTOURISME =====================*/

.protourisme{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	margin-top: 100px;
	background-color: #fceb25;
	padding-top: 30px;
	padding-bottom: 30px;
	box-shadow: inset 0px 5px 5px rgba(0,0,0,0.5);
}

.h2-services{
	font-family: "Monoton", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: black;
	font-size: 40px;
	word-spacing: 10px;
	width: 40vw;
	border-style: double;
	border-color: black;
	border-width: 5px;
	border-radius: 5px;
	padding: 8px;
}

.image-protourisme{
	width: 40vw;
	background-color: black;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	transition: transform .1s;
}

.p-services{
	color: white;
    text-align: center;	
	font-size: 35px;
	font-weight: 600;
}

.img-services{
	width: 80%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-style: double;
	border-width: 5px;
	border-color: black;
	border-radius: 5px;
	transition: transform .1s;
}

.image-protourisme:hover{
	transform: scale(1.025);
	box-shadow: 7px 7px 5px rgba(0,0,0,0.5);
}

/*=============== SPECIFIQUES PAGES SECONDAIRES ===================*/

.img-entete-pages{
	width: 10%;
	margin-left: 45%;
	margin-top: 60px;
	margin-bottom: 50px;
	border-style: double;
	border-color: white;
	border-width: 3px;
	padding: 5px;
	border-radius: 7px;
	animation: print-effect 1.5s linear forwards;
}

.h1-pages{
	font-size: 50px;
}

/* ================= MENU DES PAGES SECONDAIRES ===============*/

.menu-pages{
	color: white;
	text-align: center;
}

.menu-pages a{
	color: white;
}

.menu-pages a:hover{
	color: #fceb25;
	font-weight: 600;
}

.retour{
	position: absolute;
	bottom: 30px;
	left: 60px;
}

.contenu-pages{
	margin-top: 100vh;
}

.partie-jaune{
	margin-top: 100vh;
	background-color: #fceb25; 
	box-shadow: inset 0px 5px 5px rgba(0,0,0,0.5);
	border-bottom-style: double;
	border-bottom-color: #black;
	border-bottom-width: 5px;
}

.contenu-partie-jaune{
	padding-top: 50px;
	padding-bottom: 50px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
}

.contenu-partie-jaune img{
	width: 30%;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

.img-partie-jaune{
	width: 20%;
	border-style: double;
	border-color: white;
	border-width: 5px;
	border-radius: 7px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

.contenu-partie-jaune p{
	width: 60%;
	font-weight: 600;
	text-align: justify;
}

.img-pages{
	width: 100%;
	box-shadow: 5px 5px 1px 1px #fceb25; 
}

.txt-pages{
	display: flex;
	justify-content: center;
	align-items: center;
}

.h2-pages{
	font-family: "Monoton", sans-serif;
	word-spacing: 15px;
	padding-bottom: 15px;
	border-bottom-style: solid;
	border-bottom-color: #fceb25;
}

.txt-tech{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	color: #fceb25;
}

/*==================== CATALOGUE PRODUITS PUBLICITAIRES =======*/
.h2-pages2{
	font-family: "Monoton", sans-serif;
	word-spacing: 15px;
	color: #fceb25;
}

.catalogue{
	width: 100vw;
	height: 100vh;
	display: block;
	margin-left: -20px;

}

/*==================== CONTACT =========================*/

.img-entete-contact{
	width: 30%;
	margin-left: 35%;
}

.num-contact{
	font-family: "Monoton", sans-serif;
	letter-spacing: 1px;
	word-spacing: 3px;
	color: white;
}

.contact-form{
	margin-top: 50px;
	width: 90%;
	color: white;
	font-family: "Monoton", sans-serif;
	font-size: 15px;
	word-spacing: 3px;
	letter-spacing: 1px;
}

.check-form{
	font-size: 12px;
}

.contact-sm-txt{
	color: white;
	font-size: 12px;
}

.btn-contact{
	border-style: double;
	border-width: 3px;
}

.form-control{
	font-family: "Arial";
}

.p-message-recu{
	font-family: "Monoton", sans-serif;
	text-align: center;
	color: white;
	letter-spacing: 1px;
	word-spacing: 3px;
}

/*=================== FOOTER ==========================*/
.prefoot{
	margin-top: 100vh;
}

footer{
	border-top-style: double;
	border-top-color: #fceb25;
	border-top-width: 5px;
	padding-top: 30px;
}

.img-footer{
	width: 60%;
	margin-left: 20%;
	margin-bottom: 40px;
	border-style: double;
	border-color: white;
	border-width: 5px;
	padding: 8px;
	border-radius: 10px;
}

footer p{
	color: white;
	font-family: "Monoton", sans-serif;
	letter-spacing: 1px;
	word-spacing: 3px;
}

.lien-footer:hover{
	color: #fceb25;
}

.btn-footer{
	font-family: "Monoton", sans-serif;
	font-size: 15px;
	letter-spacing: 1px;
	border-style: double;
	border-width: 3px;
	background-color: rgba(26, 26, 26)
}

/*================== RESPONSIVITE ======================*/

.hr-resp{
	color: #fceb25;
	border-width: 3px;
}

@media (min-width: 990px){
	.hr-resp{
		display: none;
	}
}

@media (min-width: 1900px){
	/* PAGE 1 */
	.menu h2{
		font-size: 30px;
		margin-top: 50px;
	}
	
	.btn-devis, .btn-footer{
		font-size: 20px;
	}
	
	.menu1 a{
		font-size: 20px;
	}
	
	.texte-accueil, .p-ca-marche, .contenu-partie-jaune p{
		font-size: 22px;
	}
	
	footer p{
		font-size: 20px;
	}
	
	/* PAGES 2 */
	
	.img-entete-pages{
		margin-top: 120px;
	}
	
	.h1-pages{
		font-size: 70px;
	}
	
	.menu-pages{
		margin-top: 50px;
	}
	
	.menu-pages a{
		font-size: 20px;
	}
}

@media (max-width: 1610px){
	/* PAGE 1 */
	.menu h2{
		font-size: 25px;
		margin-top: 40px;
	}
	
	.texte-accueil, .p-ca-marche, .contenu-partie-jaune p{
		font-size: 18px;
	}
	
	/* PAGES 2 */
	.img-entete-pages{
		margin-top: 100px;
	}
	
	.menu-pages{
		margin-top: 40px;
	}
	
	.menu-pages a{
		font-size: 17px;
	}
}

@media (max-width: 1400px){
	h1{
		font-size: 30px;
	}
}

@media (max-width: 995px){
	.contenu-pages{
		margin-top: 105vh;
	}
	
	.contenu-pages .row{
		border-bottom-style: double;
		border-bottom-width: 5px;
		border-bottom-color: white;
		margin-bottom: 30px;
		padding-bottom: 20px;
	}
}

@media (max-width: 990px){
	.contact-form{
		position: absolute;
		top: 0;
		margin-top: 105vh;
		margin-left: 5%;
	}
	/* ===================== ON VIRE LA MARGE DU ROW QUAND CA PASSE A LA LIGNE ========*/
	.row {
    --bs-gutter-x: 0rem !important;
	}
	/*=================================================================================*/
}

@media (max-width: 850px){
	.img-entete{
		width: 20%;
		margin-left: 40%;
	}
	.img-entete-pages{
		width: 15%;
		margin-left: 42.5%;
	}
	.menu1{
		display: none;
	}
}

@media (max-width: 770px){
	footer p{
		text-align: center;
	}
	.btn-footer{
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
	
	.slick-prev:before, .slick-next:before{
		display: none;
	}
	
	.col-md-3, .col-lg-6{
		padding: 0 !important;
	}
	
	.row > *{
		padding-right: 0 !important;
	}
	
	.encarts, .menu, #carouselExampleFade{
		/*width: 104vw;*/
	}
}

@media (max-width: 550px){
	.img-entete{
		width: 30%;
		margin-left: 35%;
	}
		.img-entete-pages{
		width: 20%;
		margin-left: 40%;
	}
}

@media (max-width: 480px){
	/* PAGE 1 */
	.h2-com{
		font-size: 30px;
	}
	.h1-pages{
		font-size: 35px;
	}
	.btn-devis{
	position: absolute;
	bottom: 30px;
	margin-right: auto;
	margin-left: auto;
	}
	.retour{
	bottom: 90px;
	left: 0;
	width: 100vw;
	}
	.retour a{
		text-align: center;
	}
	.h2-enc{
		font-size: 17px;
	}
	.texte-accueil{
		margin-left: 0;
		margin-right: 0;
	}
	.texte-services{
		margin-left: 20px;
		margin-right: 30px;
	}
	.h2-ca-marche, .p-ca-marche, .h2-services, .image-protourisme{
		width: 90vw;
	}
	
	.p-ca-marche{
		margin-top: 30px;
	}
	
	.slick-next {
		right: 0px !important;
	}
	
	/* PAGES 2 */
	.img-entete-pages{
		width: 30%;
		margin-left: 35%;
		margin-top: 50px;
	}
	
	.h1-pages{
		margin-top: 10px;
	}
	
	.contenu-partie-jaune{
		width: 80vw;
	}

	.contenu-partie-jaune img{
		width: 100%;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	}

	.img-partie-jaune{
		width: 20%;
		border-style: double;
		border-color: white;
		border-width: 5px;
		border-radius: 7px;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	}

	.contenu-partie-jaune p{
		width: 100%;
		margin-top: 30px;
	}
	
	.img-tech {
		width: 100%;
	}

}

@media (max-width: 350px){
	.h1-page1{
		margin-top: 10px;
	}
	.menu h2{
		font-size: 20px;
	}
}

/*===================== MODIF DE BOOTSTRAP =================*/