
:root {

  	--clr-lien: hsl(17 50% 65%) ;
	
	--bg-header:hsl(43 75% 93%);		

/* =====================
	   GAMME CHAUDE (rose)
	===================== */
	--clr-titre-coeur: hsl(345 25% 40%);

	--clr-texte-coeur: hsl(345 15% 28%);

	--clr-lien-coeur: hsl(345 55% 60%);
	--clr-lien-hover-coeur: hsl(345 45% 45%);
	--clr-lien-actif-coeur: hsl(345 40% 40%);

	--clr-fond-coeur: hsl(345 45% 92%);
	--clr-fond-coeur-light: hsl(30 20% 96%);
	
	/* =====================
	   GAMME TERRE
	===================== */
	--clr-titre-terre: hsl(15 20% 38%);
	--clr-titre-terre: hsl(345 30% 40%); /* coeur */

	/* Texte brun rosé */
	--clr-texte-terre: hsl(345 22% 28%);

	--clr-lien-terre: hsl(15 55% 50%);
	--clr-lien-hover-terre: hsl(15 60% 40%);
	--clr-lien-terre: hsl(345 55% 60%);
	--clr-lien-hover-terre: hsl(345 45% 45%); /* coeur */
	--clr-lien-actif-terre: hsl(345 40% 40%); /* coeur */
	
	/* Fonds terre */
	--clr-fond-terre: hsl(15 58% 93%);
	

	
	/* =====================
	   GAMME LILAS
	===================== */

	--clr-titre-lilas: hsl(270 18% 40%);
	
	--clr-texte-lilas: hsl(270 14% 28%);

	--clr-lien-lilas: hsl(270 30% 60%);
	--clr-lien-hover-lilas: hsl(270 35% 45%);

	--clr-fond-lilas: hsl(270 30% 95%);
	--clr-fond-lilas: hsl(255 20% 95%); /* mineral */

	/* =====================
	   GAMME NATURE (vert)
	===================== */
	--clr-titre-nature: hsl(140 3% 35%);

	--clr-texte-nature: hsl(165 22% 26%);

	--clr-lien-nature: hsl(165 45% 40%);
	--clr-lien-hover-nature: hsl(165 50% 30%);

	--clr-fond-nature: hsl(140 2% 92%);

	/* =====================
	   GAMME MINÉRALE (ardoise)
	===================== */
	--clr-titre-mineral: hsl(255 18% 35%);
	--clr-soustitre-mineral: hsl(255 15% 45%);

	/* Gris ardoise légèrement violacé */
	--clr-texte-mineral: hsl(255 12% 27%);

	--clr-lien-mineral: hsl(255 30% 50%);
	--clr-lien-hover-mineral: hsl(255 35% 30%);

	/* Fonds pierre / brume */
	--clr-fond-mineral: hsl(255 20% 95%);
	
	/* =====================
	   GAMME SABLE
	===================== */
	--clr-titre-sable: hsl(40 35% 40%);

	/* Texte brun-gris chaud */
	--clr-texte-sable: hsl(40 20% 28%);

	--clr-lien-sable: hsl(38 45% 45%);
	--clr-lien-hover-sable: hsl(38 50% 35%);

	/* Fonds sable */
	--clr-fond-sable: hsl(43 75% 93%);

    
	
}

body {
	color: var(--clr-texte-lilas);
}

h1 , h2, h3, h4, h5, .h1, .h2, .h3, .h4, strong {
	color: var(--clr-titre-lilas);
}

a {
	color: var(--clr-lien-coeur);
}

a:hover {
	color: var(--clr-lien-hover-coeur);
	border-color: var(--clr-lien-hover-coeur);
}
i {
	opacity:0.8;
	color:  var(--clr-titre);
}


/*****************/
/* Sections      */
/*****************/

/* Chaud */
.section-coeur {
	background-color: var(--clr-fond-coeur);
	color: var(--clr-texte-coeur)
}
.section-coeur h2, .section-coeur h3, .section-coeur h4 {
	color: var(--clr-titre-coeur); 
}
.section-coeur a {
	color: var(--clr-lien-coeur);
	border-color: var(--clr-lien-coeur);
}
.section-coeur a:hover {
	color: var(--clr-lien-hover-coeur);
	border-color: var(--clr-lien-hover-coeur);
}

/* lilas */
.section-lilas {
	background-color: var(--clr-fond-lilas);
	color: var(--clr-texte-lilas)
}
.section-lilas h2, .section-lilas h3, .section-lilas h4 {
	color: var(--clr-titre-lilas); 
}
.section-lilas a {
	color: var(--clr-lien-lilas);
	border-color: var(--clr-lien-lilas);
}
.section-lilas a:hover {
	color: var(--clr-lien-hover-lilas);
	border-color: var(--clr-lien-hover-lilas);
}

/* mineral */
.section-mineral {
	background-color: var(--clr-fond-mineral);
	color: var(--clr-texte-mineral)
}
.section-mineral h2, .section-mineral h3, .section-mineral h4 {
	color: var(--clr-titre-mineral); 
}
.section-mineral a {
	color: var(--clr-lien-mineral);
	border-color: var(--clr-lien-mineral);
}
.section-mineral a:hover {
	color: var(--clr-lien-hover-mineral);
	border-color: var(--clr-lien-hover-mineral);
}

/* nature */
.section-nature {
	background-color: var(--clr-fond-nature);
	color: var(--clr-texte-nature)
}
.section-nature h2, .section-nature h3, .section-nature h4 {
	color: var(--clr-titre-nature); 
}
.section-nature a {
	color: var(--clr-lien-nature);
	border-color: var(--clr-lien-nature);
}
.section-nature a:hover {
	color: var(--clr-lien-hover-nature);
	border-color: var(--clr-lien-hover-nature);
}

/* sable */
.section-sable {
	background-color: var(--clr-fond-sable);
	color: var(--clr-texte-sable)
}
.section-sable h2, .section-sable h3, .section-sable h4 {
	color: var(--clr-titre-sable); 
}
.section-sable a {
	color: var(--clr-lien-sable);
	border-color: var(--clr-lien-sable);
}
.section-sable a:hover {
	color: var(--clr-lien-hover-sable);
	border-color: var(--clr-lien-hover-sable);
}

/* terre */
.section-terre {
	background-color: var(--clr-fond-terre);
	color: var(--clr-texte-terre)
}
.section-terre h2, .section-terre h3, .section-terre h4 {
	color: var(--clr-titre-terre); 
}
.section-terre a {
	color: var(--clr-lien-terre);
	border-color: var(--clr-lien-terre);
}
.section-terre a:hover {
	color: var(--clr-lien-hover-terre);
	border-color: var(--clr-lien-hover-terre);
}

@media (min-width: 768px) { 

	/* Chaud */
	.section-md-coeur {
		background-color: var(--clr-fond-coeur);
		color: var(--clr-texte-coeur)
	}
	.section-md-coeur h2, .section-md-coeur h3, .section-md-coeur h4 {
		color: var(--clr-titre-coeur); 
	}
	.section-md-coeur a {
		color: var(--clr-lien-coeur);
		border-color: var(--clr-lien-coeur);
	}
	.section-md-coeur a:hover {
		color: var(--clr-lien-hover-coeur);
		border-color: var(--clr-lien-hover-coeur);
	}

	/* lilas */
	.section-md-lilas {
		background-color: var(--clr-fond-lilas);
		color: var(--clr-texte-lilas)
	}
	.section-md-lilas h2, .section-md-lilas h3, .section-md-lilas h4 {
		color: var(--clr-titre-lilas); 
	}
	.section-md-lilas a {
		color: var(--clr-lien-lilas);
		border-color: var(--clr-lien-lilas);
	}
	.section-md-lilas a:hover {
		color: var(--clr-lien-hover-lilas);
		border-color: var(--clr-lien-hover-lilas);
	}

	/* mineral */
	.section-md-mineral {
		background-color: var(--clr-fond-mineral);
		color: var(--clr-texte-mineral)
	}
	.section-md-mineral h2, .section-md-mineral h3, .section-md-mineral h4 {
		color: var(--clr-titre-mineral); 
	}
	.section-md-mineral a {
		color: var(--clr-lien-mineral);
		border-color: var(--clr-lien-mineral);
	}
	.section-md-mineral a:hover {
		color: var(--clr-lien-hover-mineral);
		border-color: var(--clr-lien-hover-mineral);
	}

	/* nature */
	.section-md-nature {
		background-color: var(--clr-fond-nature);
		color: var(--clr-texte-nature)
	}
	.section-md-nature h2, .section-md-nature h3, .section-md-nature h4 {
		color: var(--clr-titre-nature); 
	}
	.section-md-nature a {
		color: var(--clr-lien-nature);
		border-color: var(--clr-lien-nature);
	}
	.section-md-nature a:hover {
		color: var(--clr-lien-hover-nature);
		border-color: var(--clr-lien-hover-nature);
	}

	/* sable */
	.section-md-sable {
		background-color: var(--clr-fond-sable);
		color: var(--clr-texte-sable)
	}
	.section-md-sable h2, .section-md-sable h3, .section-md-sable h4 {
		color: var(--clr-titre-sable); 
	}
	.section-md-sable a {
		color: var(--clr-lien-sable);
		border-color: var(--clr-lien-sable);
	}
	.section-md-sable a:hover {
		color: var(--clr-lien-hover-sable);
		border-color: var(--clr-lien-hover-sable);
	}

	/* terre */
	.section-md-terre {
		background-color: var(--clr-fond-terre);
		color: var(--clr-texte-terre)
	}
	.section-md-terre h2, .section-md-terre h3, .section-md-terre h4 {
		color: var(--clr-titre-terre); 
	}
	.section-md-terre a {
		color: var(--clr-lien-terre);
		border-color: var(--clr-lien-terre);
	}
	.section-md-terre a:hover {
		color: var(--clr-lien-hover-terre);
		border-color: var(--clr-lien-hover-terre);
	}


}