mise en place des couleurs de police

styles/global.css

@@ -52,7 +52,6 @@ body > *, body > .container_main > * {
 		summary		->	aside.page_content
 		main		->	main
 			paths	->	.page.path
-			title	->	.page_title
 		asides		->	aside.relative_content
 	footer			->
 */

styles/style.css

@@ -1,5 +1,5 @@
 
-/*/////////////////////////////////////////////*/
+/*----------------------------------------------*/
 /*IMPORT CSS*/
 @import url(./reset.css);
 @import url(./global.css);
@@ -12,24 +12,44 @@
 
 
 
-/*/////////////////////////////////////////////*/
+/*----------------------------------------------*/
 /*GLOBAL VARIABLE*/
 :root {
 	/* color range */
-	--color-purple:			#ee1998;
-	--color-pink:			#ff7bca;
-	--color-green:			#8fce3c;
-	--color-yellow:			#e3e00a;
-	--color-blue:			#51cee4;
-	--color-water:			#0c9cb5;
+	--color-purple:			hsl(324, 86%,  52%); /* #ee1998 - rgb(238, 25,  152) */
+	--color-pink:			hsl(324, 100%, 74%); /* #ff7bca - rgb(255, 123, 202) */
+	--color-green:			hsl(86,  60%,  52%); /* #8fce3c - rgb(143, 206, 60 ) */
+	--color-yellow:			hsl(59,  92%,  46%); /* #e3e00a - rgb(227, 224, 10 ) */
+	--color-blue:			hsl(189, 73%,  61%); /* #51cee4 - rgb(81,  206, 228) */
+	--color-water:			hsl(189, 88%,  38%); /* #0c9cb5 - rgb(12,  156, 181) */
 
 	/* colors buttons */
 	--primary-hue:			12;
 	--color-button:			hsl(var(primary-hue), 1%, 1%);
+
+	/*TEXTE*/
+	/* fonts */
+	--font-titles:			'paradroid';
+	--font-texts:			'louisgeorge';
+	--font-fallback:		'cabrion';
+
+	/* colors texts */
+	/*text*/
+	--color-text:			hsl(0, 0%, 10%);
+	--color-text-light:		hsl(0, 0%, 25%);
+	--color-text-strong:	rgb(0, 0%, 5%);
+	/*links*/
+	--color-link:			rgb(120, 1, 1);
+	--color-link-hover:		rgb(120, 1, 1);
+	--color-link-visited:	rgb(120, 1, 1);
+	--color-link-active:	rgb(120, 1, 1);
+	/*titles*/
+	--color-title-1:		hsl(0, 0%, 10%);
+	--color-title-2:		hsl(0, 0%, 10%);
 }
 
 
-/*/////////////////////////////////////////////*/
+/*----------------------------------------------*/
 /*INITIAL SETTINGS*/
 html {
 	scroll-behavior: smooth;

styles/text.css

@@ -1,21 +1,5 @@
 
-:root {
-	/* colors texts */
-	--color-texts:			rgb(1, 1, 1);
-	--color-texts-special:	rgb(1, 1, 1);
-	--color-links:			rgb(120, 1, 1);
-	--color-links-hover:	rgb(120, 1, 1);
-	--color-links-visited:	rgb(120, 1, 1);
-	--color-links-active:	rgb(120, 1, 1);
-	--color-title-1:		rgb(120, 1, 1);
-
-	/* fonts */
-	--font-titles:			'paradroid';
-	--font-texts:			'louisgeorge';
-	--font-fallback:		'cabrion';
-}
-
-/*/////////////////////////////////////////////*/
+/*---------------------------------------------*/
 /*TEXTS*/
 /*fonts*/
 h1, h2, h3, h4, h5, h6 {
@@ -26,19 +10,19 @@ a, p, li {
 }
 /*colors*/
 a, a:link {
-	color: var(--color-links);
+	color: var(--color-link);
 }
 a:visited {
-	color: var(--color-links-visited);
+	color: var(--color-link-visited);
 }
 a:hover {
-	color: var(--color-links-hover);
+	color: var(--color-link-hover);
 }
 a:active {
-	color: var(--color-links-active);
+	color: var(--color-link-active);
 }
-p, var {
-	color: var(--color-texts);
+p, span {
+	color: var(--color-text);
 }
 /*sizes*/
 aside {
@@ -65,7 +49,7 @@ h3 {
 }
 small {
 	font-size: 0.8em;
-	line-height: 1.5em;
+	line-height: 1.2em;
 }
 /*specials settings*/
 body p, body p *, body h1, body h1 *, body h2, body h2 * {
@@ -83,9 +67,27 @@ i {
 b, em {
 	font-weight: 600;
 }
-p br, h1 br, h2 br {
-	margin: 0px;
+
+/*class*/
+/*quote*/
+.quote {
+	max-width: 450px;
+	margin-right: 0px;
+	margin-left: auto;
+	text-align: right;
 }
+.quote p {
+	color: var(--color-text-light);
+}
+.quote_credit {
+	font-size: 1.8em;
+	margin-top: var(--gap-unit);
+}
+.quote_credit p {
+	font-size: 0.8em;
+	line-height: 1em;
+}
+
 /*
 	<b>			- Bold text
 	<strong>	- Important text