/* ------------------------------------------------- RESET CSS ---------- */

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}
body{

	font-family: 'Roboto', sans-serif;
	line-height: 1.5;
	background-attachment: fixed;
	background: linear-gradient(25deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	width: 100vw;
    height: 100vh;
    min-height: 100vh;

}


/* ---------------------------------------- ELEMENTS RECURENTS ---------- */

.MainTitle {
	font-size: 2em ;

}
h1{
	font-family: 'Bungee Shade', cursive;
	font-size: 4em;
	line-height: 1.3em;
}

h2{
font-family: 'Bungee Shade', cursive;
	font-size: 3.3em;
	font-weight: lighter;
}
h3{
	
	font-size: 16px;
	font-weight: lighter;
	margin-bottom: 20px;
}
/* ------------------------------------------- CORPS DE LA PAGE ---------- */
main {
	
	padding: 5%;
}

.HEART {
	
	
}
section {
	display: flex;
	flex-wrap: nowrap;
	margin: auto;
	background: inherit;
}
.picto{
	margin: 10px 15px 0px 0px;
	
}	

/* -------------------------------- RESPONSIVE DESIGN ------------------- */

/* 📱 Mobile : Éléments en colonne */
@media (max-width: 768px) {
	body{

	background: linear-gradient(25deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	 background-size: 900% 900%; /* 📱 Ajusté pour mobile */
	width: 100%;
    height: 100%;
    min-height: 100%;

}
	h1{
	font-family: 'Bungee Shade', cursive;
	font-size: 4em;
	line-height: 1.3em;
	width: 100%;
}

h2{
font-family: 'Bungee Shade', cursive;
	font-size: 3em;
	font-weight: lighter;
}
h3{
	
	font-size: 16px;
	font-weight: lighter;
	margin-bottom: 20px;
}
}

/* 💻 Tablettes et petits écrans */
@media (min-width: 769px) and (max-width: 1024px) {
	main {
	margin: 5% 0 0 5%;
	width: 100%;
}


}

/* 🖥️ Écrans larges */
@media (min-width: 1025px) {
	section {
		flex-wrap: nowrap;
	}

	.picto {
		width: 60px;
	}
}