diff --git a/pages/register-page.html b/pages/register-page.html
index d67f858..8fc2db5 100644
--- a/pages/register-page.html
+++ b/pages/register-page.html
@@ -3,7 +3,7 @@
Title
-
+
diff --git a/styles/login-page.css b/styles/login-page.css
index 620e1f5..cb33ca2 100644
--- a/styles/login-page.css
+++ b/styles/login-page.css
@@ -1,9 +1,20 @@
+/*
+VAriables #776f73,#cccccc,#8f253c
+ */
+
+:root {
+ --couleur-1: #776f73;
+ --couleur-2: #cccccc;
+ --couleur-3: #8f253c;
+}
+
+
/* === STYLES GLOBAUX === */
body {
margin: 0;
font-family: 'Inter', 'Roboto', sans-serif;
- background: linear-gradient(135deg, #e8f1ff, #f8fbff);
- color: #1a1a1a;
+ background: linear-gradient(135deg, var(--couleur-1), var(--couleur-2));
+ color: var(--couleur-3);
display: flex;
align-items: center;
justify-content: center;
@@ -14,9 +25,9 @@ body {
.login-page {
width: 90%;
max-width: 1100px;
- background: #ffffff;
+ background: var(--couleur-2);
border-radius: 20px;
- box-shadow: 0 10px 30px rgba(0, 100, 255, 0.1);
+ box-shadow: 0 10px 30px var(--couleur-3);
display: flex;
flex-direction: column;
overflow: hidden;
@@ -27,10 +38,10 @@ body {
.login-page h1 {
text-align: center;
padding: 2rem 1rem;
- color: #1e3a8a;
+ color: var(--couleur-3);
font-size: 1.8rem;
- border-bottom: 1px solid #e2e8f0;
- background: #f8fafc;
+ border-bottom: 1px solid var(--couleur-2);
+ background: var(--couleur-2);
}
/* === MAIN CONTENT === */
@@ -57,13 +68,13 @@ body {
flex-direction: column;
justify-content: space-between;
text-align: center;
- box-shadow: inset 0 0 15px rgba(0, 60, 255, 0.05);
+ box-shadow: inset 0 0 15px var(--couleur-3);
}
.presentation-login .descrition {
font-size: 1rem;
line-height: 1.6;
- color: #334155;
+ color: var(--couleur-3);
margin-bottom: 2rem;
display: block;
}
@@ -74,12 +85,12 @@ body {
justify-content: center;
gap: 0.7rem;
font-weight: 600;
- color: #1e40af;
+ color: var(--couleur-3);
font-size: 1.1rem;
}
.presentation-login svg {
- stroke: #1d4ed8;
+ stroke: var(--couleur-3);
transition: transform 0.3s ease;
}
@@ -89,7 +100,7 @@ body {
/* === FORMULAIRE === */
.login-form {
- background: #f9fafb;
+ background: var(--couleur-2);
border-radius: 16px;
padding: 2rem 2.5rem;
display: flex;
@@ -99,7 +110,7 @@ body {
}
.login-form h3 {
- color: #1e3a8a;
+ color: var(--couleur-3);
text-align: center;
margin-bottom: 1.5rem;
font-size: 1.4rem;
@@ -125,8 +136,8 @@ input {
}
input:focus {
- border-color: #3b82f6;
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+ border-color: var(--couleur-3);
+ box-shadow: 0 0 0 3px var(--couleur-1);
}
/* === BOUTONS === */
@@ -141,13 +152,13 @@ button {
}
button[type="submit"] {
- background: #2563eb;
- color: white;
+ background: var(--couleur-3);
+ color: var(--couleur-1);
margin-top: 1rem;
}
button[type="submit"]:hover {
- background: #1e40af;
+ background: var(--couleur-3);
}
.google-btn {
@@ -155,14 +166,14 @@ button[type="submit"]:hover {
align-items: center;
justify-content: center;
gap: 0.8rem;
- background: white;
- color: #1f2937;
- border: 1px solid #d1d5db;
+ background: var(--couleur-2);
+ color: var(--couleur-1);
+ border: 1px solid var(--couleur-1);
margin-top: 1rem;
}
.google-btn:hover {
- background: #f3f4f6;
+ background: var(--couleur-2);
}
.google-icon {
diff --git a/styles/register-page.css b/styles/register-page.css
index 620e1f5..cb33ca2 100644
--- a/styles/register-page.css
+++ b/styles/register-page.css
@@ -1,9 +1,20 @@
+/*
+VAriables #776f73,#cccccc,#8f253c
+ */
+
+:root {
+ --couleur-1: #776f73;
+ --couleur-2: #cccccc;
+ --couleur-3: #8f253c;
+}
+
+
/* === STYLES GLOBAUX === */
body {
margin: 0;
font-family: 'Inter', 'Roboto', sans-serif;
- background: linear-gradient(135deg, #e8f1ff, #f8fbff);
- color: #1a1a1a;
+ background: linear-gradient(135deg, var(--couleur-1), var(--couleur-2));
+ color: var(--couleur-3);
display: flex;
align-items: center;
justify-content: center;
@@ -14,9 +25,9 @@ body {
.login-page {
width: 90%;
max-width: 1100px;
- background: #ffffff;
+ background: var(--couleur-2);
border-radius: 20px;
- box-shadow: 0 10px 30px rgba(0, 100, 255, 0.1);
+ box-shadow: 0 10px 30px var(--couleur-3);
display: flex;
flex-direction: column;
overflow: hidden;
@@ -27,10 +38,10 @@ body {
.login-page h1 {
text-align: center;
padding: 2rem 1rem;
- color: #1e3a8a;
+ color: var(--couleur-3);
font-size: 1.8rem;
- border-bottom: 1px solid #e2e8f0;
- background: #f8fafc;
+ border-bottom: 1px solid var(--couleur-2);
+ background: var(--couleur-2);
}
/* === MAIN CONTENT === */
@@ -57,13 +68,13 @@ body {
flex-direction: column;
justify-content: space-between;
text-align: center;
- box-shadow: inset 0 0 15px rgba(0, 60, 255, 0.05);
+ box-shadow: inset 0 0 15px var(--couleur-3);
}
.presentation-login .descrition {
font-size: 1rem;
line-height: 1.6;
- color: #334155;
+ color: var(--couleur-3);
margin-bottom: 2rem;
display: block;
}
@@ -74,12 +85,12 @@ body {
justify-content: center;
gap: 0.7rem;
font-weight: 600;
- color: #1e40af;
+ color: var(--couleur-3);
font-size: 1.1rem;
}
.presentation-login svg {
- stroke: #1d4ed8;
+ stroke: var(--couleur-3);
transition: transform 0.3s ease;
}
@@ -89,7 +100,7 @@ body {
/* === FORMULAIRE === */
.login-form {
- background: #f9fafb;
+ background: var(--couleur-2);
border-radius: 16px;
padding: 2rem 2.5rem;
display: flex;
@@ -99,7 +110,7 @@ body {
}
.login-form h3 {
- color: #1e3a8a;
+ color: var(--couleur-3);
text-align: center;
margin-bottom: 1.5rem;
font-size: 1.4rem;
@@ -125,8 +136,8 @@ input {
}
input:focus {
- border-color: #3b82f6;
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
+ border-color: var(--couleur-3);
+ box-shadow: 0 0 0 3px var(--couleur-1);
}
/* === BOUTONS === */
@@ -141,13 +152,13 @@ button {
}
button[type="submit"] {
- background: #2563eb;
- color: white;
+ background: var(--couleur-3);
+ color: var(--couleur-1);
margin-top: 1rem;
}
button[type="submit"]:hover {
- background: #1e40af;
+ background: var(--couleur-3);
}
.google-btn {
@@ -155,14 +166,14 @@ button[type="submit"]:hover {
align-items: center;
justify-content: center;
gap: 0.8rem;
- background: white;
- color: #1f2937;
- border: 1px solid #d1d5db;
+ background: var(--couleur-2);
+ color: var(--couleur-1);
+ border: 1px solid var(--couleur-1);
margin-top: 1rem;
}
.google-btn:hover {
- background: #f3f4f6;
+ background: var(--couleur-2);
}
.google-icon {