diff --git a/.kiro/specs/schotziad-km-tracker/design.md b/.kiro/specs/schotziad-km-tracker/design.md
index 6cf755a..a4919c4 100644
--- a/.kiro/specs/schotziad-km-tracker/design.md
+++ b/.kiro/specs/schotziad-km-tracker/design.md
@@ -46,6 +46,16 @@
 - **Génération PDF** : côté backend, bibliothèque QuestPDF
 - **Hébergement** : l'application est packagée et hébergée via **Docker Compose** — un conteneur `frontend` (Angular servi par nginx en interne) publié sur le port hôte **2202**, et un conteneur `backend` (ASP.NET Core API) non exposé à l'hôte. Le fichier SQLite est persisté via un **bind mount** (`./data:/data`) dans le conteneur backend, ce qui rend `data/trajets.db` directement accessible sur l'hôte (inspection et sauvegarde sans entrer dans le conteneur). La terminaison **HTTPS est assurée par un reverse-proxy Caddy externe** (sur une autre machine) qui relaie vers `IP_hôte:2202` ; le backend ne fait donc pas de redirection HTTPS lui-même
 
+### Charte graphique
+
+- **Palette officielle** (variables CSS globales dans `styles.scss`) : Orange `--couleur-orange: #F28C28`, Bleu IAD `--couleur-bleu: #0074B8` (couleur primaire), Gris anthracite `--couleur-anthracite: #343A40`, Gris clair `--couleur-gris-clair: #E7E9EA`, avec déclinaisons de survol `--couleur-bleu-fonce` et `--couleur-orange-fonce`.
+- **Convention d'interaction** : les boutons d'action à fond bleu (texte, ex. `.btn-principal`, `.btn-primaire`, `.btn-confirmer`) passent à l'orange au survol. Cette règle ne s'applique PAS aux boutons à fond différent (rouge pour la suppression, blanc pour les actions secondaires) ni aux boutons à icône. Les indicateurs d'état sélectionné/actif (lien de navigation actif, mois sélectionné, onglet actif) restent en bleu plein, sans changement de teinte au survol.
+- **Assets graphiques** (`frontend/src/assets/images/`) :
+  - `logo-icon.png` : icône seule, affichée en tête de la barre de navigation (fond blanc localisé pour ressortir sur la barre anthracite).
+  - `logo-carre.png` : logo avec texte vertical, centré au-dessus du formulaire sur les 4 pages d'authentification (connexion, inscription, mot de passe oublié, réinitialisation).
+  - `logo-horizontal.png` : logo avec texte horizontal, réservé à une utilisation future sur les documents PDF (non encore intégré).
+  - `favicon.png` : favicon référencé en priorité (`<link rel="icon" type="image/png">`) ; `src/favicon.ico` régénéré à partir de ce PNG (multi-résolutions 16/32/48) pour remplacer l'icône par défaut d'Angular CLI, avec un paramètre de cache-busting (`?v=`) à incrémenter en cas de remplacement futur du visuel.
+
 ---
 
 ## Architecture
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index abe28a4..36cba01 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,5 +1,9 @@
 <!-- Coquille applicative : barre de navigation globale + contenu routé. -->
 <nav class="nav-bar" aria-label="Navigation principale">
+  <a class="nav-bar__logo" routerLink="/consultation" aria-label="SchotzIAD — Accueil">
+    <img src="assets/images/logo-icon.png" alt="" width="32" height="32" />
+  </a>
+
   <a class="nav-bar__lien" routerLink="/consultation" routerLinkActive="nav-bar__lien--actif">
     Trajets
   </a>
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index e075593..21b75d7 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -12,10 +12,30 @@
   align-items: center;
   gap: 0.25rem;
   padding: 0.5rem 1rem;
-  background: #1f2937;
-  border-bottom: 1px solid #111827;
+  background: var(--couleur-anthracite);
+  border-bottom: 1px solid #23282d;
   z-index: 500;
 
+  // Logo SchotzIAD en tête de barre (icône seule) : accès rapide à la consultation.
+  // Fond blanc localisé pour faire ressortir le logo sur la barre anthracite.
+  &__logo {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem;
+    margin-right: 0.5rem;
+    background: #fff;
+    border-radius: 6px;
+
+    img {
+      display: block;
+      border-radius: 4px;
+    }
+
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+
   &__lien {
     padding: 0.5rem 0.9rem;
     border-radius: 6px;
@@ -26,12 +46,12 @@
     white-space: nowrap;
 
     &:hover {
-      background: #374151;
+      background: var(--couleur-orange);
       color: #fff;
     }
 
     &--actif {
-      background: #2b6cb0;
+      background: var(--couleur-bleu);
       color: #fff;
     }
   }
diff --git a/frontend/src/app/features/auth/forgot-password/forgot-password.component.html b/frontend/src/app/features/auth/forgot-password/forgot-password.component.html
index 9b1346f..c201151 100644
--- a/frontend/src/app/features/auth/forgot-password/forgot-password.component.html
+++ b/frontend/src/app/features/auth/forgot-password/forgot-password.component.html
@@ -1,4 +1,5 @@
 <section class="forgot-password">
+  <img class="login__logo" src="assets/images/logo-carre.png" alt="SchotzIAD — Mon activité, mon outil" width="180" height="145" />
   <h1>Mot de passe oublié</h1>
 
   @if (envoye()) {
diff --git a/frontend/src/app/features/auth/forgot-password/forgot-password.component.scss b/frontend/src/app/features/auth/forgot-password/forgot-password.component.scss
index b636315..2642768 100644
--- a/frontend/src/app/features/auth/forgot-password/forgot-password.component.scss
+++ b/frontend/src/app/features/auth/forgot-password/forgot-password.component.scss
@@ -4,9 +4,16 @@
   margin: 0 auto;
 }
 
+.login__logo {
+  display: block;
+  margin: 0 auto 1rem;
+}
+
 h1 {
   font-size: 1.4rem;
   margin-bottom: 1rem;
+  text-align: center;
+  color: var(--couleur-anthracite);
 }
 
 .intro {
@@ -56,12 +63,17 @@ h1 {
 
 .btn-principal {
   padding: 0.55rem 1.25rem;
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-bleu-fonce);
+    border-color: var(--couleur-bleu-fonce);
+  }
 }
 
 .btn-principal:disabled {
@@ -77,7 +89,7 @@ h1 {
 }
 
 .liens a {
-  color: #1565c0;
+  color: var(--couleur-bleu);
   text-decoration: none;
 }
 
diff --git a/frontend/src/app/features/auth/login/login.component.html b/frontend/src/app/features/auth/login/login.component.html
index 8cf34be..57e1705 100644
--- a/frontend/src/app/features/auth/login/login.component.html
+++ b/frontend/src/app/features/auth/login/login.component.html
@@ -1,4 +1,5 @@
 <section class="login">
+  <img class="login__logo" src="assets/images/logo-carre.png" alt="SchotzIAD — Mon activité, mon outil" width="180" height="145" />
   <h1>Connexion</h1>
 
   <form [formGroup]="form" (ngSubmit)="seConnecter()" novalidate>
diff --git a/frontend/src/app/features/auth/login/login.component.scss b/frontend/src/app/features/auth/login/login.component.scss
index e37df36..094fbb8 100644
--- a/frontend/src/app/features/auth/login/login.component.scss
+++ b/frontend/src/app/features/auth/login/login.component.scss
@@ -4,9 +4,16 @@
   margin: 0 auto;
 }
 
+.login__logo {
+  display: block;
+  margin: 0 auto 1rem;
+}
+
 h1 {
   font-size: 1.4rem;
   margin-bottom: 1rem;
+  text-align: center;
+  color: var(--couleur-anthracite);
 }
 
 .champ {
@@ -51,12 +58,17 @@ h1 {
 
 .btn-principal {
   padding: 0.55rem 1.25rem;
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-bleu-fonce);
+    border-color: var(--couleur-bleu-fonce);
+  }
 }
 
 .btn-principal:disabled {
@@ -72,7 +84,7 @@ h1 {
 }
 
 .liens a {
-  color: #1565c0;
+  color: var(--couleur-bleu);
   text-decoration: none;
 }
 
diff --git a/frontend/src/app/features/auth/register/register.component.html b/frontend/src/app/features/auth/register/register.component.html
index a3d2e09..376c5df 100644
--- a/frontend/src/app/features/auth/register/register.component.html
+++ b/frontend/src/app/features/auth/register/register.component.html
@@ -1,4 +1,5 @@
 <section class="login">
+  <img class="login__logo" src="assets/images/logo-carre.png" alt="SchotzIAD — Mon activité, mon outil" width="180" height="145" />
   <h1>Créer un compte</h1>
 
   <form [formGroup]="form" (ngSubmit)="sInscrire()" novalidate>
diff --git a/frontend/src/app/features/auth/register/register.component.scss b/frontend/src/app/features/auth/register/register.component.scss
index e37df36..094fbb8 100644
--- a/frontend/src/app/features/auth/register/register.component.scss
+++ b/frontend/src/app/features/auth/register/register.component.scss
@@ -4,9 +4,16 @@
   margin: 0 auto;
 }
 
+.login__logo {
+  display: block;
+  margin: 0 auto 1rem;
+}
+
 h1 {
   font-size: 1.4rem;
   margin-bottom: 1rem;
+  text-align: center;
+  color: var(--couleur-anthracite);
 }
 
 .champ {
@@ -51,12 +58,17 @@ h1 {
 
 .btn-principal {
   padding: 0.55rem 1.25rem;
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-bleu-fonce);
+    border-color: var(--couleur-bleu-fonce);
+  }
 }
 
 .btn-principal:disabled {
@@ -72,7 +84,7 @@ h1 {
 }
 
 .liens a {
-  color: #1565c0;
+  color: var(--couleur-bleu);
   text-decoration: none;
 }
 
diff --git a/frontend/src/app/features/auth/reset-password/reset-password.component.html b/frontend/src/app/features/auth/reset-password/reset-password.component.html
index fd5a41e..fe3c2f9 100644
--- a/frontend/src/app/features/auth/reset-password/reset-password.component.html
+++ b/frontend/src/app/features/auth/reset-password/reset-password.component.html
@@ -1,4 +1,5 @@
 <section class="reset-password">
+  <img class="login__logo" src="assets/images/logo-carre.png" alt="SchotzIAD — Mon activité, mon outil" width="180" height="145" />
   <h1>Réinitialiser le mot de passe</h1>
 
   @if (token() === null) {
diff --git a/frontend/src/app/features/auth/reset-password/reset-password.component.scss b/frontend/src/app/features/auth/reset-password/reset-password.component.scss
index 3209ded..4d0f53a 100644
--- a/frontend/src/app/features/auth/reset-password/reset-password.component.scss
+++ b/frontend/src/app/features/auth/reset-password/reset-password.component.scss
@@ -4,9 +4,16 @@
   margin: 0 auto;
 }
 
+.login__logo {
+  display: block;
+  margin: 0 auto 1rem;
+}
+
 h1 {
   font-size: 1.4rem;
   margin-bottom: 1rem;
+  text-align: center;
+  color: var(--couleur-anthracite);
 }
 
 .champ {
@@ -51,12 +58,17 @@ h1 {
 
 .btn-principal {
   padding: 0.55rem 1.25rem;
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-bleu-fonce);
+    border-color: var(--couleur-bleu-fonce);
+  }
 }
 
 .btn-principal:disabled {
@@ -72,7 +84,7 @@ h1 {
 }
 
 .liens a {
-  color: #1565c0;
+  color: var(--couleur-bleu);
   text-decoration: none;
 }
 
diff --git a/frontend/src/app/features/bareme/bareme.component.scss b/frontend/src/app/features/bareme/bareme.component.scss
index 133771b..dcc1ba3 100644
--- a/frontend/src/app/features/bareme/bareme.component.scss
+++ b/frontend/src/app/features/bareme/bareme.component.scss
@@ -57,12 +57,17 @@ h2 {
 
 .btn-principal {
   padding: 0.55rem 1.25rem;
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-orange);
+    border-color: var(--couleur-orange);
+  }
 }
 
 .btn-principal:disabled {
diff --git a/frontend/src/app/features/carte-trajets/carte-trajets.component.scss b/frontend/src/app/features/carte-trajets/carte-trajets.component.scss
index 29a95a7..d2c4d6e 100644
--- a/frontend/src/app/features/carte-trajets/carte-trajets.component.scss
+++ b/frontend/src/app/features/carte-trajets/carte-trajets.component.scss
@@ -62,12 +62,12 @@
     padding: 6px 16px;
     border: none;
     border-radius: 4px;
-    background: #1976d2;
+    background: var(--couleur-bleu);
     color: #fff;
     cursor: pointer;
 
     &:hover {
-      background: #1565c0;
+      background: var(--couleur-orange);
     }
   }
 }
diff --git a/frontend/src/app/features/consultation-jour/consultation-jour.component.scss b/frontend/src/app/features/consultation-jour/consultation-jour.component.scss
index 240e2bf..caf5806 100644
--- a/frontend/src/app/features/consultation-jour/consultation-jour.component.scss
+++ b/frontend/src/app/features/consultation-jour/consultation-jour.component.scss
@@ -101,14 +101,14 @@
     padding: 0.5rem 1rem;
     border: none;
     border-radius: 6px;
-    background: #1976d2;
+    background: var(--couleur-bleu);
     color: #fff;
     cursor: pointer;
     font-size: 0.9rem;
     white-space: nowrap;
 
     &:hover {
-      background: #135ba1;
+      background: var(--couleur-orange);
     }
   }
 
diff --git a/frontend/src/app/features/montants-regles/montants-regles.component.scss b/frontend/src/app/features/montants-regles/montants-regles.component.scss
index 3a3813c..1e96220 100644
--- a/frontend/src/app/features/montants-regles/montants-regles.component.scss
+++ b/frontend/src/app/features/montants-regles/montants-regles.component.scss
@@ -43,12 +43,17 @@ h1 {
 
 .btn-principal {
   padding: 0.55rem 1.25rem;
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-orange);
+    border-color: var(--couleur-orange);
+  }
 }
 
 .btn-principal:disabled {
diff --git a/frontend/src/app/features/onboarding/onboarding.component.scss b/frontend/src/app/features/onboarding/onboarding.component.scss
index 576bfdd..affc9e6 100644
--- a/frontend/src/app/features/onboarding/onboarding.component.scss
+++ b/frontend/src/app/features/onboarding/onboarding.component.scss
@@ -101,12 +101,17 @@
 
 .btn-principal {
   padding: 0.55rem 1.25rem;
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-orange);
+    border-color: var(--couleur-orange);
+  }
 }
 
 .btn-principal:disabled {
diff --git a/frontend/src/app/features/profil/profil.component.scss b/frontend/src/app/features/profil/profil.component.scss
index f0803ef..8323a41 100644
--- a/frontend/src/app/features/profil/profil.component.scss
+++ b/frontend/src/app/features/profil/profil.component.scss
@@ -79,12 +79,17 @@ h1 {
 
 .btn-principal {
   padding: 0.55rem 1.25rem;
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-orange);
+    border-color: var(--couleur-orange);
+  }
 }
 
 .btn-principal:disabled {
diff --git a/frontend/src/app/features/resume-annuel/resume-annuel.component.scss b/frontend/src/app/features/resume-annuel/resume-annuel.component.scss
index c39106d..e84970f 100644
--- a/frontend/src/app/features/resume-annuel/resume-annuel.component.scss
+++ b/frontend/src/app/features/resume-annuel/resume-annuel.component.scss
@@ -48,9 +48,14 @@ h1 {
 }
 
 .btn-principal {
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-orange);
+    border-color: var(--couleur-orange);
+  }
 }
 
 .btn-secondaire {
diff --git a/frontend/src/app/features/resume-mensuel/resume-mensuel.component.scss b/frontend/src/app/features/resume-mensuel/resume-mensuel.component.scss
index 8024a0f..d9585e1 100644
--- a/frontend/src/app/features/resume-mensuel/resume-mensuel.component.scss
+++ b/frontend/src/app/features/resume-mensuel/resume-mensuel.component.scss
@@ -49,9 +49,14 @@ h1 {
 }
 
 .btn-principal {
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-orange);
+    border-color: var(--couleur-orange);
+  }
 }
 
 .btn-secondaire {
diff --git a/frontend/src/app/features/trajet-form/trajet-form.component.scss b/frontend/src/app/features/trajet-form/trajet-form.component.scss
index 1900e78..240b31f 100644
--- a/frontend/src/app/features/trajet-form/trajet-form.component.scss
+++ b/frontend/src/app/features/trajet-form/trajet-form.component.scss
@@ -195,11 +195,11 @@
 
 .btn-primaire {
   border: none;
-  background: #2b6cb0;
+  background: var(--couleur-bleu);
   color: #fff;
 
   &:hover:not(:disabled) {
-    background: #245a94;
+    background: var(--couleur-orange);
   }
 }
 
diff --git a/frontend/src/app/features/vehicules/vehicules.component.scss b/frontend/src/app/features/vehicules/vehicules.component.scss
index 2379498..11a66fc 100644
--- a/frontend/src/app/features/vehicules/vehicules.component.scss
+++ b/frontend/src/app/features/vehicules/vehicules.component.scss
@@ -43,12 +43,17 @@ h2 {
 
 .btn-principal {
   padding: 0.55rem 1.25rem;
-  background: #1565c0;
+  background: var(--couleur-bleu);
   color: #fff;
-  border: 1px solid #1565c0;
+  border: 1px solid var(--couleur-bleu);
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.95rem;
+
+  &:hover:not(:disabled) {
+    background: var(--couleur-orange);
+    border-color: var(--couleur-orange);
+  }
 }
 
 .btn-principal:disabled {
diff --git a/frontend/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss b/frontend/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss
index 25c991a..0fbe494 100644
--- a/frontend/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss
+++ b/frontend/src/app/shared/components/confirm-dialog/confirm-dialog.component.scss
@@ -55,13 +55,14 @@
 
 .btn-confirmer {
   border: none;
-  background: #2b6cb0;
+  background: var(--couleur-bleu);
   color: #fff;
 
   &:hover {
-    background: #245a94;
+    background: var(--couleur-orange);
   }
 
+  // Variante suppression : reste en rouge (non couverte par la règle de survol orange).
   &--danger {
     background: #d13438;
 
diff --git a/frontend/src/assets/images/favicon.png b/frontend/src/assets/images/favicon.png
new file mode 100644
index 0000000..c8dfd7b
Binary files /dev/null and b/frontend/src/assets/images/favicon.png differ
diff --git a/frontend/src/assets/images/logo-carre.png b/frontend/src/assets/images/logo-carre.png
new file mode 100644
index 0000000..7127725
Binary files /dev/null and b/frontend/src/assets/images/logo-carre.png differ
diff --git a/frontend/src/assets/images/logo-horizontal.png b/frontend/src/assets/images/logo-horizontal.png
new file mode 100644
index 0000000..a10feea
Binary files /dev/null and b/frontend/src/assets/images/logo-horizontal.png differ
diff --git a/frontend/src/assets/images/logo-icon.png b/frontend/src/assets/images/logo-icon.png
new file mode 100644
index 0000000..ca9d8fe
Binary files /dev/null and b/frontend/src/assets/images/logo-icon.png differ
diff --git a/frontend/src/favicon.ico b/frontend/src/favicon.ico
index 57614f9..a21151f 100644
Binary files a/frontend/src/favicon.ico and b/frontend/src/favicon.ico differ
diff --git a/frontend/src/index.html b/frontend/src/index.html
index ad2a3d4..ae5825d 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -1,11 +1,18 @@
 <!doctype html>
-<html lang="en">
+<html lang="fr">
 <head>
   <meta charset="utf-8">
-  <title>SchotzIAD KM Tracker</title>
+  <title>SchotzIAD — Mon activité, mon outil</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <meta name="theme-color" content="#0074B8">
+  <!-- Favicon : PNG net (128×128) prioritaire, .ico en repli pour les vieux navigateurs. -->
+  <!-- Paramètre de version (?v=) pour forcer le navigateur à retélécharger le favicon
+       après un changement (Chrome/Brave mettent le favicon en cache par origine,
+       indépendamment du cache navigateur classique). Incrémenter si le favicon change. -->
+  <link rel="icon" type="image/png" href="assets/images/favicon.png?v=2">
+  <link rel="alternate icon" type="image/x-icon" href="favicon.ico?v=2">
+  <link rel="apple-touch-icon" href="assets/images/favicon.png?v=2">
 </head>
 <body>
   <app-root></app-root>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index ddd0e3a..3aedff3 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,3 +1,18 @@
+/* =====================================================================
+   Charte graphique SchotzIAD — palette de couleurs officielle.
+   Variables CSS globales réutilisables dans toute l'application.
+   ===================================================================== */
+:root {
+  --couleur-orange: #F28C28;         /* Orange SchotzIAD (accents, actions secondaires) */
+  --couleur-bleu: #0074B8;           /* Bleu IAD (couleur primaire : liens, boutons, en-têtes) */
+  --couleur-anthracite: #343A40;     /* Gris anthracite (texte, barre de navigation) */
+  --couleur-gris-clair: #E7E9EA;     /* Gris clair (fonds, bordures, séparateurs) */
+
+  /* Déclinaisons utilitaires (survol / états). */
+  --couleur-bleu-fonce: #005b90;
+  --couleur-orange-fonce: #d6761a;
+}
+
 /* You can add global styles to this file, and also import other style files */
 
 /* Reset global minimal : supprime la marge par défaut du body (sinon 100dvh + 8px