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