# 001 — HistoMétéo MVP — Spécification Technique v6 > **Itération** : v6 — intègre le feedback Reviewer (`feedback-to-architect-001-v5.md`) + évolution du design system (`HistoMeteo--Design-System-Evolution.md`). --- ## 0) Contract - **Source of truth** : ce document (`001-histometeo-mvp.tech.v6.md`) - **Functional integrity** : aucun critère d'acceptation de `001-histometeo-mvp.md` ne peut être modifié, ignoré ou réinterprété. Le design system évolue vers la charte définie dans `HistoMeteo--Design-System-Evolution.md`. - **Scope** : fichiers et dossiers autorisés à créer/modifier : - `public/` — fichiers frontend (HTML, CSS, JS) et assets statiques (logo, favicon) - `tests/` — tests - Fichiers racine : `requirements.txt`, `README.md` - **Forbidden changes** : - `docs/` — aucune modification des specs existantes - `.github/` — aucune modification du workflow agent - `src/` — aucune modification du backend (aucune route, aucun service, aucune réponse API modifiée) - `Dockerfile`, `pyproject.toml` — pas de modification cette itération - **Invariants** (hérités de v5, tous préservés) : - INV-1 : Aucune donnée utilisateur n'est stockée — ni côté serveur, ni côté client (pas de base de données, pas de `localStorage`, pas de fichier) - INV-2 : Toutes les heures affichées sont en fuseau horaire `Europe/Paris` — aucun offset UTC hardcodé - INV-3 : La période maximale par requête est de 31 jours - INV-4 : Aucune clé API n'est requise - INV-5 : L'interface est intégralement en français **avec accents et diacritiques** — y compris le nom de l'application (`HistoMétéo`) - INV-6 : L'application est une page unique — pas de routeur multi-pages, l'URL reflète l'état de recherche via query parameters - INV-7 : Aucune injection HTML — tout contenu dynamique est inséré via `textContent`, `createElement` ou `replaceChildren()`, jamais via `innerHTML` - INV-8 : Le flux principal (recherche simple une commune) reste pleinement fonctionnel en l'absence d'activation du mode comparaison — aucune régression UX - **Done when** : - Les 11 critères d'acceptation originaux (AC1–AC11) restent vérifiables - Toutes les fonctionnalités v2–v5 restent opérationnelles (R1–R12, UX/SEO) - Les corrections C1 + C2 du feedback v5 sont appliquées (espaces insécables) - Les améliorations R15 (meta description dynamique) et R16 (aria-label boutons période) sont intégrées - Le design system est refondu : logo, palette, typographie, structure en cards, favicon - **Tous** les tests passent (aucun test SKIPPED, aucun DeprecationWarning projet) - L'application se lance via `uvicorn src.main:app` ou `docker compose up` --- ## 1) Objectif technique Refondre l'identité visuelle de l'application HistoMétéo en intégrant le nouveau logo officiel et en dérivant une palette de couleurs, une typographie et une structure en cartes cohérentes avec cette identité. En parallèle, corriger les déviations typographiques identifiées par le Reviewer v5 et intégrer deux améliorations recommandées (R15, R16). Le résultat : un site au design **moderne, clair, orienté données** — fidèle à l'identité du logo (bleu/vert météo, style flat) — sans aucune modification fonctionnelle ni backend. --- ## 2) Analyse du brief ### Besoins principaux | Besoin | Source | Complexité | Impact | | ------------------------------------------------------------------ | ------------- | ---------- | ------------------------ | | C1 — Espaces insécables avant `?` dans `renderSeoQuestion` | Feedback v5 | Trivial | Typographie française | | C2 — Espace insécable avant `:` dans `buildPeriodSummaryParagraph` | Feedback v5 | Trivial | Typographie française | | C3 — `README.md` dans le scope | Feedback v5 | Trivial | Conformité contractuelle | | R15 — Meta description dynamique | Feedback v5 | Faible | SEO | | R16 — `aria-label` sur boutons période | Feedback v5 | Trivial | Accessibilité | | Intégration du logo (header, favicon, footer) | Design System | Moyen | Identité visuelle | | Nouvelle palette de couleurs | Design System | Moyen | Cohérence visuelle | | Typographie Inter | Design System | Faible | Lisibilité | | Structure en cards | Design System | Moyen | Hiérarchie visuelle | | Palette graphiques Chart.js | Design System | Faible | Cohérence graphique | | Responsive adapté | Design System | Faible | Mobile | ### Contraintes - **Backend inchangé** : aucune route, aucun service, aucune réponse API modifiée. - **Pas de framework JS ajouté** — le projet reste en vanilla JS. - **Pas de nouvelle dépendance backend**. - **Le logo est fourni en PNG** — il sera livré en deux tailles (logo principal + favicon). Le fichier source est `public/assets/logo-histometeo.png`. Un favicon dérivé sera `public/assets/favicon.png` (32×32 ou 48×48). - **Pas de web font auto-hébergée** — Inter est chargée via Google Fonts CDN (léger, standard, fiable). - **La structure HTML existante est préservée** — les sections sont enrichies avec des classes de cards mais l'ordre et les IDs restent identiques. - **Les variables CSS existantes sont remplacées** — la palette change intégralement. Toute la charte graphique est pilotée par les variables CSS `:root`, donc le changement est centralisé. ### Risques | # | Risque | Mitigation | | --- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | | 1 | **Régression visuelle** — le changement de palette peut casser des contrastes ou des lisibilités | Ratio de contraste vérifié pour chaque combinaison texte/fond. Les couleurs UI sont choisies pour `WCAG AA` minimum. | | 2 | **Performance Google Fonts** — ajout d'une requête réseau bloquante | `` + `display=swap` pour fallback instantané. | | 3 | **Logo lourd en PNG** — impact sur le First Contentful Paint | Le logo sera optimisé (< 50 Ko). Lazy load non nécessaire car il est above the fold. | --- ## 3) Design minimal proposé ### 3.1 Architecture globale ``` Backend : AUCUNE modification Frontend (modifications) ├── public/index.html → Logo, favicon, Google Fonts, meta OG, structure cards ├── public/app.js → Corrections C1/C2, R15 meta description, R16 aria-label ├── public/style.css → Nouvelle palette, typographie, structure cards, ajustements ├── public/assets/ → NOUVEAU dossier │ ├── logo-histometeo.png → Logo principal │ └── favicon.png → Favicon dérivé du logo Racine ├── README.md → Documentation mise à jour (ajouté au scope via C3) ``` ### 3.2 Nouvelles variables CSS (remplacement complet de `:root`) L'ancienne palette (beige/teal) est remplacée par la palette dérivée du logo : ```css :root { /* Palette principale — dérivée du logo */ --blue-meteo: #2a7daf; --green-meteo: #6dbe45; --blue-light: #5cb4d6; /* Couleurs UI */ --bg: #f7f9fb; --panel: #ffffff; --text: #2a2a2a; --muted: #6b7280; --accent: #2a7daf; --accent-hover: #1e6490; --accent-soft: rgba(42, 125, 175, 0.08); --green: #6dbe45; --green-hover: #5aa838; --error: #dc2626; --border: #e5e7eb; /* Couleurs météo (icônes, graphiques) */ --weather-sun: #f59e0b; --weather-rain: #5cb4d6; --weather-cloud: #9ca3af; /* Graphiques Chart.js */ --chart-temp: #f97316; --chart-precip: #5cb4d6; --chart-wind: #9ca3af; /* Ombres */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Radius */ --radius: 10px; --radius-sm: 8px; } ``` ### 3.3 Typographie — Google Fonts Inter Ajout dans `` de `index.html` : ```html ``` Changement CSS : ```css body { font-family: "Inter", system-ui, -apple-system, sans-serif; } ``` Hiérarchie typographique : | Élément | Taille | Poids | | --------------------------- | ------------- | ----- | | H1 (titre principal) | 2rem (32px) | 600 | | H2 (sections) | 1.5rem (24px) | 600 | | H3 (sous-sections) | 1.15rem | 600 | | Texte normal | 1rem (16px) | 400 | | Texte secondaire (`.muted`) | 0.875rem | 400 | ### 3.4 Logo — Header Le header actuel (texte simple) est remplacé par un header avec logo : ```html

Retrouvez la météo passée, heure par heure, pour n'importe quelle commune de France.

``` > Le `

` textuel « HistoMétéo » est remplacé par le logo qui contient déjà le texte « HistoMétéo — Historique de la Météo ». Un `

` en `sr-only` est ajouté pour l'accessibilité SEO : ```html

HistoMétéo — Historique de la Météo en France

``` CSS du logo : ```css .logo-link { display: inline-block; text-decoration: none; } .logo { height: 80px; width: auto; max-width: 100%; } @media (max-width: 640px) { .logo { height: 56px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } ``` ### 3.5 Favicon Ajout dans `` : ```html ``` Le fichier `favicon.png` est une version réduite (48×48) de l'icône calendrier du logo (partie gauche uniquement, sans le texte). ### 3.6 Open Graph / Partages sociaux Ajout des meta tags dans `` : ```html ``` ### 3.7 Footer avec logo Le footer actuel est enrichi avec un petit logo : ```html ``` CSS footer : ```css .footer-logo { height: 40px; width: auto; margin-bottom: var(--space-sm); opacity: 0.7; } ``` ### 3.8 Structure en cards Chaque section de contenu (`.panel`) hérite du nouveau style card : ```css .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-lg); margin-bottom: var(--space-md); } ``` Pas de changement de classes HTML — `.panel` est déjà utilisé sur toutes les sections. Le changement est purement CSS. ### 3.9 Boutons **Bouton principal (Rechercher)** — passe au vert météo : ```css .btn-primary, button[type="submit"], #search-button { background: var(--green); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0.6rem 1.5rem; font-weight: 500; cursor: pointer; transition: background 0.15s; } .btn-primary:hover, #search-button:hover { background: var(--green-hover); } ``` **Boutons secondaires** — restent avec bordure, accent bleu : ```css .btn-secondary { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius-sm); padding: 0.5rem 1rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-secondary:hover { background: var(--accent); color: #fff; } ``` ### 3.10 Graphiques Chart.js — Palette mise à jour Dans `app.js`, les couleurs des datasets Chart.js doivent utiliser les nouvelles couleurs : | Dataset | Ancienne couleur | Nouvelle couleur | Variable CSS | | -------------- | ---------------- | ---------------------- | ---------------- | | Température | (variable) | `#F97316` (orange) | `--chart-temp` | | Précipitations | (variable) | `#5CB4D6` (bleu clair) | `--chart-precip` | | Vent | (variable) | `#9CA3AF` (gris) | `--chart-wind` | > Les couleurs sont codées en dur dans `app.js` (Chart.js n'utilise pas les CSS variables). Les remplacer par les nouvelles valeurs hexadécimales. ### 3.11 Espacement et rythme visuel Le spacing utilise un système basé sur `8px` : ```css /* Déjà défini dans :root via les variables --space-* */ /* Application principale */ body { padding-top: var(--space-lg); } .hero { padding: var(--space-xl) 0 var(--space-md); text-align: center; } .container { max-width: 1024px; margin: 0 auto; padding: 0 var(--space-md); display: grid; gap: var(--space-md); } ``` ### 3.12 Correction C1 — Espaces insécables avant `?` dans `renderSeoQuestion` 4 occurrences dans `app.js` à corriger dans la fonction `renderSeoQuestion` : ```js // Avant (mode single-day, sans commune2) `Quel temps faisait-il à ${commune1Name} le ${start} ?` // Après `Quel temps faisait-il à ${commune1Name} le ${start}\u00a0?` // Avant (mode single-day, avec commune2) `Quel temps faisait-il à ${commune1Name} et ${commune2Name} le ${start} ?` // Après `Quel temps faisait-il à ${commune1Name} et ${commune2Name} le ${start}\u00a0?` // Avant (mode range, sans commune2) `Quel temps faisait-il à ${commune1Name} du ${start} au ${end} ?` // Après `Quel temps faisait-il à ${commune1Name} du ${start} au ${end}\u00a0?` // Avant (mode range, avec commune2) `Quel temps faisait-il à ${commune1Name} et ${commune2Name} du ${start} au ${end} ?` // Après `Quel temps faisait-il à ${commune1Name} et ${commune2Name} du ${start} au ${end}\u00a0?`; ``` ### 3.13 Correction C2 — Espace insécable avant `:` dans `buildPeriodSummaryParagraph` 1 occurrence dans `app.js` : ```js // Avant `Cumul de pluie : ${precip} mm.` // Après `Cumul de pluie\u00a0: ${precip} mm.`; ``` ### 3.14 Amélioration R15 — Meta description dynamique Ajouter un `` dans le HTML avec un contenu par défaut : ```html ``` Dans `app.js`, mise à jour dynamique après affichage des résultats : ```js function updateMetaDescription(commune1Name, commune2Name, startDate, endDate) { const meta = document.querySelector('meta[name="description"]'); if (!meta) return; const fmt = (isoDate) => { const d = parseIsoDateAtMidnight(isoDate); return formatNaturalFrDate(d); }; const start = fmt(startDate); const end = fmt(endDate); let content; if (startDate === endDate) { content = commune2Name ? `Météo historique à ${commune1Name} et ${commune2Name} le ${start}. Température, pluie, vent, humidité heure par heure.` : `Météo historique à ${commune1Name} le ${start}. Température, pluie, vent, humidité heure par heure.`; } else { content = commune2Name ? `Météo historique à ${commune1Name} et ${commune2Name} du ${start} au ${end}. Température, pluie, vent, humidité heure par heure.` : `Météo historique à ${commune1Name} du ${start} au ${end}. Température, pluie, vent, humidité heure par heure.`; } meta.setAttribute("content", content); } ``` Appelée dans `renderSimpleResults` et `renderComparisonResults`, juste après `renderSeoQuestion`. Restauration du contenu par défaut dans `clearResults` : ```js function clearResults() { // ... masquer les sections existantes ... const meta = document.querySelector('meta[name="description"]'); if (meta) { meta.setAttribute( "content", "Retrouvez la météo passée, heure par heure, pour n'importe quelle commune de France. Température, pluie, vent, humidité — données historiques depuis 1940.", ); } } ``` ### 3.15 Amélioration R16 — `aria-label` sur boutons période Dans la fonction `renderPeriodLinks`, ajouter des `aria-label` descriptifs : ```js prevPeriodButton.setAttribute( "aria-label", canPrev ? `Voir la période du ${formatSummaryDate(fmt(prevStart))} au ${formatSummaryDate(fmt(prevEnd))}` : "Période précédente indisponible", ); nextPeriodButton.setAttribute( "aria-label", canNext ? `Voir la période du ${formatSummaryDate(fmt(nextStart))} au ${formatSummaryDate(fmt(nextEnd))}` : "Période suivante indisponible", ); ``` ### 3.16 Background page Le fond de page perd le gradient beige et adopte un fond neutre clair : ```css body { background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, sans-serif; margin: 0; padding-top: var(--space-lg); min-height: 100vh; } ``` > Le double radial-gradient existant est supprimé — le fond `#F7F9FB` est propre et suffisant. --- ## 4) Plan d'implémentation ### Étape 1 — Assets : Préparer logo et favicon **Fichiers** : `public/assets/logo-histometeo.png`, `public/assets/favicon.png` - Créer le dossier `public/assets/` - Placer le logo principal (`logo-histometeo.png`) — directement le fichier fourni, optimisé si > 100 Ko - Créer un favicon (`favicon.png`, 48×48) à partir de la partie icône (calendrier) du logo **Testable** : les fichiers sont accessibles via `http://localhost:8000/assets/logo-histometeo.png` et `http://localhost:8000/assets/favicon.png`. --- ### Étape 2 — HTML : Favicon, Google Fonts, meta OG, meta description, header, footer **Fichier** : `public/index.html` - Ajouter les `` pour Google Fonts Inter (preconnect + stylesheet) - Ajouter `` - Ajouter `` (contenu par défaut) - Ajouter les meta Open Graph (`og:title`, `og:description`, `og:image`, `og:type`) - Remplacer le contenu du `
` : logo cliquable `` + `` + `

` + sous-titre `

` - Mettre à jour le `