*{
	margin:0;
	padding:0;
}
html{
	font-family: 'arial';
	font-size: 16px;
}

	@font-face {/*On déclare une police pas standard, enregistrée dans le dossier du site*/
    font-family: 'lunaregular';
    src: url('./fonts/luna-webfont.woff2') format('woff2'),
         url('./fonts/luna-webfont.woff') format('woff'),
         url('./fonts/luna.ttf');
    font-weight: normal;
    font-style: normal;
}

h1{
	color: black;/*rgb (0,0,0) ou #000 : tout ça donne du noir*/
	font-size: 24px;/*La taille de la police */
	font-family: 'lunaregular';
}
h2{
	color: black;
	font-size: 20px;
	font-family: 'Goldman', cursive;
}
h3{
	color: black;
	font-size: 18px;
}
a{/*La couleur et l'espacement de tous les liens */
	color: white;
	text-decoration: none;
	padding: 20px;
	transition: ease 0.5s; /*Effet de transition sur tous les liens */
}
a:hover{/*La couleur de tous les liens quand on les survole */
	color: red;
}

nav{ /*Le menu du haut */
	background-color: rgba(0,0,0,0.5); 
	text-align: center;
	padding: 20px;
}
#hero{ /*La section de la page qui contient la photo*/
	background: url('./Images/ToscaBois.jpg'); 
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 2%;
}
#bandeau{ /*Le bandeau blanchi*/
	background-color: rgba(255,255,255,0.5);
	padding: 2%;
}
#contenu{/*Le contenu du bandeau blanc*/
	text-align: center;
	padding: 5%;
}
#contenu a{
	color: white;
	background-color: rgba(255,36,186,0.3);
	border: 1px solid #FF24BA;
	border-radius: 15px;
	padding: 20px;
	transition: ease 0.5s;
}
#contenu a:hover{
	color: white;
	background-color: rgba(255,36,186,0.8);
}
#contenu img{ /*On met un effet sur les images du DIV contenu*/
	transition: 2s;
}

#contenu img:hover{ /*On met des effets sur les images du DIV contenu lorsqu'on les survole*/
	transform: rotate(360deg) scale(1.5);
}

#apropos{
	display: flex;
}

#apropos_image{
	padding: 20px;
	flex: 1;
}

#apropos_image img{
	flex: 1;
	max-width: 100%; /*L'image prend au maximum la largeur de son contenant, soit 100% du tiers de la page*/
}

#apropos_texte{
	padding: 20px;
	flex: 2;
	text-align: justify;
}

#services{
	display: flex;
	background-color: #666;
	color: white;
	padding: 20px;
	text-align :center;
}
.services_item p{
	text-align: justify;
	padding: 20px;
}
@media screen and (max-width: 414px){
	#apropos{
		flex-direction:column;
	}/*On referme la déclaration #apropos*/
	#services{
		flex-direction:column;
	}/*On referme la déclaration #services*/
	nav a{
		display: block;
		padding: 10px;
	}/*On referme la déclaration nav*/


}/*On referme la media query*/