Charte graphique SchotzIAD : logo, favicon, palette de couleurs

Intègre l'identité visuelle officielle (planche fournie) :

- Assets ajoutés (frontend/src/assets/images/) : logo-icon, logo-carre,
  logo-horizontal (réservé aux PDF, non encore câblé), favicon.
- Favicon : src/favicon.ico régénéré depuis favicon.png (16/32/48, via Pillow)
  pour remplacer l'icône Angular par défaut ; PNG référencé en priorité dans
  index.html avec cache-busting (?v=) pour contourner le cache favicon des
  navigateurs Chromium (Chrome/Brave).
- Barre de navigation : logo-icon en tête (fond blanc localisé pour ressortir
  sur l'anthracite), couleurs de charte (fond anthracite, lien actif bleu IAD,
  survol orange).
- Pages d'authentification (login, register, forgot-password, reset-password) :
  logo carré centré au-dessus du formulaire, boutons en bleu IAD.
- Palette officielle en variables CSS globales (styles.scss) : --couleur-orange,
  --couleur-bleu, --couleur-anthracite, --couleur-gris-clair (+ déclinaisons
  de survol).
- Harmonisation des boutons d'action à fond bleu (texte) sur toute l'app :
  survol orange (véhicules, profil, barème, montants réglés, résumés mensuel/
  annuel, onboarding, formulaire de trajet, dialog de confirmation, carte).
  Exclusions volontaires : boutons rouges (suppression), boutons à icône,
  boutons secondaires à fond blanc, indicateurs d'état sélectionné/actif.

Specs : design.md complété (section Charte graphique : palette, convention de
survol, rôle de chaque asset).

.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

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>

frontend/src/app/app.component.scss

@@ -12,10 +12,30 @@
   align-items: center;
   gap: 0.25rem;
   padding: 0.5rem 1rem;
-  background: #1f2937;
+  background: var(--couleur-anthracite);
-  border-bottom: 1px solid #111827;
+  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;
     }
   }

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()) {

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;
 }
 

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>

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;
 }
 

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>

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;
 }
 

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) {

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;
 }
 

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 {

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);
     }
   }
 }

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);
     }
   }
 

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 {

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 {

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 {

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 {

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 {

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);
   }
 }
 

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 {

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;
 

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>

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