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).
2026-09-21 09:17:14 +02:00
parent 937609a83b
commit 91b59d4ce7
29 changed files with 185 additions and 41 deletions
@@ -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>
@@ -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;
    }
  }
@@ -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()) {
@@ -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;
 }

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

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

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

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

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

@@ -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 {
@@ -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;

@@ -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>
@@ -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