diff --git a/Bootstrap_new/css/style-portail.css b/Bootstrap_new/css/style-portail.css
index d66ad768..7741ba11 100644
--- a/Bootstrap_new/css/style-portail.css
+++ b/Bootstrap_new/css/style-portail.css
@@ -4,6 +4,12 @@
 
 /* ---------- Variables ---------- */
 :root {
+  /* Brand Colors — Charcoal / Gris neutre (zéro vert) */
+  --color-primary:       #212E53; /*#2e3440;*/   /* charcoal foncé */
+  --color-primary-light: #4c566a;   /* slate moyen   */
+  --color-primary-dark:  #1a1d24;   /* quasi-noir     */
+  --color-primary-ghost: rgba(33, 46, 83, 0.05); /* Ajusté sur le Charcoal */
+
   --brand:        #0088cf;
   --brand-dark:   #006ba3;
   --brand-light:  #e6f4fb;
@@ -177,7 +183,7 @@ a { text-decoration: none; }
 .portail-title {
   font-size: 1.35rem;
   font-weight: 700;
-  color: var(--brand);
+  color: var(--color-primary);
   letter-spacing: .4px;
   margin-bottom: 6px;
   text-align: center;
@@ -308,9 +314,9 @@ a { text-decoration: none; }
 .btn-login {
   width: 100%;
   height: 46px;
-  background: var(--brand);
+  background: var(--color-primary);
   color: var(--white);
-  border: 2px solid var(--brand);
+  border: 2px solid var(--color-primary);
   border-radius: var(--border-r);
   font-size: 1rem;
   font-weight: 700;
@@ -327,7 +333,7 @@ a { text-decoration: none; }
 
 .btn-login:hover {
   background: var(--white);
-  color: var(--brand);
+  color: var(--color-primary);
   box-shadow: none;
 }