* {
  /* si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. */
          box-sizing: border-box;
}

html,body{
	height:100vh;	
}

body{
	/* Supprime la marge entre le html et le body */
	margin : 0;
	font-family : 'Georgia',serif;
	font-size: 18px;
	font-size : 3vmin;	
	line-height : 1.5;
}
/* Par défaut les images prennent la largeur de leur conteneur. Evite que les images dépassent. */
img{
  /* Pour internet explorer, max-width ne fonctionne qu'en présence de width. */
  width : 100%;
  max-width: 100%;
  /* Evite que l'image soit étiré vers le bas sur internet explorer */
  flex-shrink: 0;
}

	/* Conteneur principal */
	.container{	
		display : flex;			
		flex-direction : column;
		min-height : 100vh;
	}
	/* Logo et menu */
	header{	
		position: fixed;
		top: 0;
		right: 0;
		left: 0;		
		height :15vh;
		z-index : 1;		
		display:flex;		
		padding : 10px;		
		box-shadow : 0px 0px 10px 5px rgba(53,85,106, 1);
		background-color : rgba(250, 250, 250, 1);
	}

	.menu_desktop a {
	  color: black;
	  padding: 2vh 1vw;
	  text-decoration: none;
	  font-weight:normal;	  
	}

	.menu_desktop a:hover { 		
		 background-color : rgba(213,43,30, 1);
		 color : white;
	}	
	
	#icone_menu{
		display : none;
	}

	.menu_mobile{
		display : none;
	}	

	.main{
		margin-top : 15vh;	
		flex-shrink: 0;	
		height:100%;		
	}
	.coeur{
		background-color: rgba(53,85,106, 0.1);
		border-radius: 5px;
		padding-bottom : 40px;
	}
	
	footer{		
		background-color : rgba(100, 100, 100, 1);
		color : white;	
		padding : 10px;			
	}
	footer a{
		color:white;
	}

	/* Lignes,Colonnes */
		.row{
			display: flex;
			flex-direction: row;
			padding-bottom : 20px;			
		}	

		.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{		
			display:flex;			
			justify-content : center;
			align-items: stretch;			
			flex-direction : column;
			padding : 10px;			
		}
		.col-05{flex : 4.16%;}
		.col-1{flex : 8.33%;}		
		.col-2{flex : 16.66%;}
		.col-3{flex : 25%;}
		.col-4{flex : 33.3%;}
		.col-5{flex : 41.66%;}
		.col-6{flex : 50%;}
		.col-7{flex : 58.33%;}
		.col-8{flex : 66.66%;}
		.col-9{flex : 75%;}
		.col-10{flex : 83.33%;}
		.col-11{flex : 91.66%;}
		.col-12{flex : 100%;}		
		
	/* textes */
		.justify{		
			text-align:justify;
			}
		
		.center{
			text-align : center;
		}
		
		a{
			color : rgba(53,85,106, 1);
			font-weight:bold;
		}
		
		@keyframes translation_h{
		0%{transform:translate(-600%);}		
		100%{transform:translate(0%);}
		}

		h1,h2{
			font-family: 'Roboto', sans-serif;
			text-align : center;			
		}
		
		h1{
		font-size:36px;
		font-size:6vmin;
		color :rgba(213,43,30,1);
		animation-name: translation_h;
		animation-duration: 1s;
		}
		h2{
		font-size:30px;
		font-size:5vmin;
		color : rgba(53,85,106,1);
		}
		h3{
		font-size:22px;
		font-size:3.6vmin;
		color : rgba(213,43,30,1);
		max-width:100%;
		}	

	/* Formulaires */
		form{
			display : flex;
			flex-direction : column;
			width : 100%;
		}
		button{	
			background-color : rgba(53,85,106,1);
			border : 0px solid rgba(0,0,0,1);
			box-shadow : 0px 0px 12px 6px rgba(150, 150, 150, 0.5);
			border-radius : 5px;			
			color : white;				
			padding: 16px 16px;							
			font-weight : bold;
			cursor : pointer;
			font-family : inherit;
			font-size :inherit;
		}
		button:hover { 		
		background-color : rgba(213,43,30, 1);
		border : 0px solid rgba(0,0,0,1);
		box-shadow : 0px 0px 0px 0px rgba(53,85,106, 0);
	}	

		input{
			background-color : rgba(245,245,255,1);		
			width:100%;
			padding: 12px 20px;
			margin: 8px 0px;
			border: 1px solid rgba(213,43,30,1);
			font-size : inherit;
		}

		textarea{
			background-color : rgba(245,245,255,1);
			width : 100%;
			height: 150px;
			padding: 12px 20px;
			margin: 8px 0px;
			border: 1px solid rgba(213,43,30,1);		
			font-size : inherit;
			resize : none;
		}
		
	/* Listes */
	li {
	list-style: none;
	padding : 10px;
	}
	li:before {
	content: " "; /* on affiche une chaîne de caractère */
	}
	
	@keyframes translation_v{
		0%{transform:translate(0%,-600%);}		
		100%{transform:translate(0%,0%)}
	}	
	.cartouches{
		background-color:white;
		align-items:center;
		justify-content:start;		
		text-align:center;	
		border : 1px solid rgba(53,85,106, 1);
		border-radius : 5px;		
	}

	.cartouches:hover{	
		box-shadow : 0px 0px 10px 10px rgba(53,85,106,0.5);
		background-color : rgba(53,85,106,1);
		color:white;
	}
	
	.cartouches:hover button{
		background-color : rgba(213,43,30, 1);
		border : 0px solid rgba(0,0,0, 1);
		box-shadow : 0px 0px 0px 0px rgba(53,85,106, 0);
	}
	
	.cartouches:hover h3{
		color : white;
	}
	
	.cartouches img{
		width: 30%;
	}
	
	.cartouches:hover img{	
		border-radius:5px;
	}
	
	
	.cartouches p{
		width:90%;
	}

	.cartouches button{
		/* Pour que les boutons soient au fond de la cartouche */
		margin-top: auto;
	}
	
	
	.services{
		animation : translation_v 2s linear;
		align-items:center;
		justify-content:start;
		text-align:center;		
	}
	
	.services img{
		width: 50%;
	}
	.services p{
		width:100%;
	}
	.services .titre{
		font-weight:bold;
		color:rgba(213,43,30,1);
	}
	
	#telephone{
		background-color: rgba(213,43,30,1);
		color : white;
		position:fixed;
		right:-205px;
		top:50vh;
		border-radius:20px;
		padding: 5px;
		text-align:center;		
		line-height :3vh;
	}
	.telephone2{
		width:120px;
	}
	.telephone3{
		width:200px;		
	}
	.telephone3 a{
		color : white;
	}
	#telephone:hover{
		right:5px;
		background-color: rgba(53,85,106,1);
		padding : 20px;
	}
	
	#slogan{
		font-style:italic;
		text-align : center;
	}
	
	.bande{
		background-color:rgba(53,85,106, 1);
		color : white;
	}
	.bande a,.bande h2,.bande h3{
		color:white;
	}
	
	.offre_site{
			display: flex;
			flex-direction: row;
			flex:1;			
		}

	.offre_site img{
		height : 10vh;
		width : 10vh;
	}
	
	.offre_site p img{
		height : 4vh;
		width : 4vh;
	}
	
	.offre_site p{
		height : 8vh;		
	}
	
	.detail{
		justify-content:center;
		align-items:center;
		text-align:center;
		background-color:white;
		border:1px solid black;
		border-radius:20px;
		box-shadow: 0px 0px 5px 5px rgba(150,150,150,1);
	}
	
	.detail:hover{
		background-color : rgba(53,85,106, 1);
		color : white;
	}
	
	#background-wrap {
    bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
	}
	
	@keyframes animateBubble {
    0% {
        margin-top: 500px;
    }
    100% {
        margin-top: -100%;
    }
	}

	@keyframes sideWays { 
		0% { 
			margin-left:0px;
		}
		100% { 
			margin-left:50px;
		}
	}
	
	.x1 {
   	animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;	
	left: -5%;
	top: 5%;	
	transform: scale(0.6);
	}

	.x2 {    
		animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;	
		left: 5%;
		top: 80%;	
		transform: scale(0.4);
	}
	
	.x3 {    
	animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;	
	left: 10%;
	top: 40%;	
	transform: scale(0.7);
	}

	.x4 {    
		animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;	
		left: 20%;
		top: 0;		
		transform: scale(0.3);
	}
	
	.x5 {    
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;	
	left: 30%;
	top: 50%;		
	transform: scale(0.5);
	}

	.x6 {    
		animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;	
		left: 50%;
		top: 0;	
		transform: scale(0.8);
	}

	.x7 {   
		animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;	
		left: 65%;
		top: 70%;	
		transform: scale(0.4);
	}

	.x8 {    
		animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;	
		left: 80%;
		top: 10%;		
		transform: scale(0.3);
	}

	.x9 {   
		animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;	
		left: 90%;
		top: 50%;	
		transform: scale(0.6);
	}

	.x10 {    
		animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;	
		left: 80%;
		top: 80%;	
		transform: scale(0.3);
	}
	
	.bubble{   
	border-radius: 50%;    
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(53,85,106, 1);	
    height: 200px;
	position: absolute;
	width: 200px;
	}

	.bubble:after {    
		background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);	
		border-radius: 50%;    
		box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);	
		content: "";
		height: 180px;
		left: 10px;
		position: absolute;
		width: 180px;
	}
	
	
	
		
	
	/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
		@media screen and (max-width: 700px) {
			
		 body{
			 font-size : 16px;			 
		 }
		 .row{   
			flex-direction: column;
		  }
		  header{
			  position: static;
			  height : 12vh;			  
		  }
		  .main{
			  margin-top:10vh;
		  }
		  .menu_desktop{
			  display : none;
		  }
		  #diapo{
			  display : none;
		  }
			#telephone{
				 display : none;
			}

			#icone_menu{
			display : block;
			position : absolute;
			top : 3vh;
			right: 5vh;
			}
			
		#menu_mobile{
			position : absolute;
			top : 0vh;
			right: 0vh;
		}
		 
		  #menu_mobile a{
			display : block;
			background-color : rgba(213,43,30,1);
			color : white;
			text-decoration : none;
			padding : 20px;			
		}
		
		h1{
			line-height :150%;
		}	
		
		
		
		
		}