<!doctype html>
<html lang="fr">
<head>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-T5QV29WC");
</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#1E6FAF" />
<title>Historique météo en France : données météo jour par jour | HistoMétéo</title>
<meta name="description" content="Accédez à la météo passée en France : températures, précipitations et climat pour chaque commune, jour par jour." />
<meta property="og:title" content="HistoMétéo — Historique de la Météo" />
<meta
property="og:description"
content="Retrouvez la météo passée, heure par heure, pour n'importe quelle commune de France."
/>
<meta property="og:image" content="/assets/logo-histometeo.png" />
<meta property="og:url" content="/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="HistoMétéo — Historique de la Météo" />
<meta
name="twitter:description"
content="Retrouvez la météo passée, heure par heure, pour n'importe quelle commune de France."
/>
<meta name="twitter:image" content="/assets/logo-histometeo.png" />
<meta name="x-fp-token" content="KB0qEI3zxYtgtpxy8Prqg1eCCMlTU26alimXWdKKqZ8.eyJleHAiOjE3NzU0Mjc1MzksImlhdCI6MTc3NTQyNjYzOSwic2NvcGUiOiJhcGkiLCJ2IjoxfQ" />
<link rel="canonical" href="/" />
<link rel="icon" type="image/x-icon" href="/assets/favicon_2.ico" />
<link rel="icon" type="image/png" href="/assets/favicon_2.png" />
<link rel="apple-touch-icon" href="/assets/favicon_2.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/style.css?v=dev" />
<script
src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"
integrity="sha384-T/4KgSWuZEPozpPz7rnnp/5lDSnpY1VPJCojf1S81uTHS1E38qgLfMgVsAeRCWc4"
crossorigin="anonymous"
></script>
</head>
<body data-env="prod" data-feature-heatmap="true">
<!-- Google Tag Manager (noscript) -->
<noscript
><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-T5QV29WC"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="hero">
<a href="/" class="logo-link" aria-label="Accueil HistoMétéo">
<img
src="/assets/logo-histometeo.png"
alt="HistoMétéo"
class="logo"
width="1291"
height="366"
/>
</a>
<p class="hero-subtitle">
Retrouvez la météo passée, heure par heure, pour n'importe quelle commune de
France.
</p>
</header>
<section
id="use-cases"
class="use-cases-section"
aria-label="Exemples d'utilisation"
>
<div class="use-cases-grid">
<a href="/meteo-naissance" class="use-case-card use-case-card-link">
<span class="use-case-icon" aria-hidden="true">📅</span>
<span class="use-case-text"
>Quel temps faisait-il le jour de votre naissance ?</span
>
</a>
<button type="button" class="use-case-card" data-usecase="event">
<span class="use-case-icon" aria-hidden="true">🎉</span>
<span class="use-case-text"
>Préparer un événement en fonction du climat habituel</span
>
</button>
<button type="button" class="use-case-card" data-usecase="race">
<span class="use-case-icon" aria-hidden="true">🏃</span>
<span class="use-case-text"
>Comparer la météo d'une course passée</span
>
</button>
</div>
</section>
<main class="container">
<section id="search" class="panel" aria-label="Recherche météo">
<div id="search-compact" class="search-compact hidden">
<div class="search-compact-info">
<span class="search-compact-icon" aria-hidden="true">🔎</span>
<div class="search-compact-details">
<strong class="search-compact-title">Recherche météo</strong>
<span id="search-compact-commune"></span>
<span id="search-compact-period"></span>
</div>
</div>
<button
type="button"
id="search-modify-btn"
class="btn-secondary"
aria-expanded="false"
aria-controls="search-form-body"
>
Modifier <span class="search-modify-long">la recherche</span>
</button>
</div>
<div id="search-form-body">
<h2>Consultez la météo passée d'une commune</h2>
<label for="commune-input">Commune</label>
<div class="autocomplete">
<input
id="commune-input"
type="text"
inputmode="search"
autocomplete="off"
placeholder="Ex : Paris, Lyon, Marseille…"
aria-autocomplete="list"
aria-expanded="false"
aria-controls="commune-list"
/>
<button
type="button"
id="commune-clear-btn"
class="input-clear-btn hidden"
aria-label="Effacer la commune"
>
×
</button>
<ul
id="commune-list"
class="suggestions hidden"
role="listbox"
></ul>
</div>
<p id="commune-message" class="field-message" aria-live="polite"></p>
<div id="quick-actions" class="quick-actions">
<button
type="button"
class="quick-action-btn"
data-quick-action="yesterday"
disabled
>
🌤️ Hier
</button>
<button
type="button"
class="quick-action-btn"
data-quick-action="1year"
disabled
>
📅 Il y a 1 an
</button>
<button
type="button"
class="quick-action-btn"
data-quick-action="custom"
>
🎯 Une date précise
</button>
</div>
<p class="search-inspiration" aria-label="Suggestions de recherche">
🔎 Essayez par exemple : Paris hier • Marseille été 2023 • Lyon hiver 1956
</p>
<div id="advanced-options" class="hidden">
<fieldset class="date-fieldset">
<legend>Période</legend>
<div
class="date-mode-toggle"
id="date-mode-toggle"
role="radiogroup"
aria-label="Mode de sélection de date"
>
<button
type="button"
class="date-mode-btn active"
data-mode="single"
aria-pressed="true"
>
Un jour
</button>
<button
type="button"
class="date-mode-btn"
data-mode="range"
aria-pressed="false"
>
Période
</button>
</div>
<p class="date-range-note">
Période disponible : du 01/01/1940 à hier.
</p>
<div class="date-grid">
<div>
<label for="date-start-text">Date de début</label>
<div class="date-input-wrapper">
<input
id="date-start-text"
type="text"
inputmode="numeric"
placeholder="JJ/MM/AAAA"
autocomplete="off"
aria-label="Date de début (format JJ/MM/AAAA)"
maxlength="10"
disabled
/>
<button
type="button"
class="btn-calendar"
aria-label="Ouvrir le calendrier de début"
disabled
>
<svg
width="20"
height="20"
viewbox="0 0 20 20"
fill="none"
aria-hidden="true"
>
<rect
x="2"
y="4"
width="16"
height="14"
rx="2"
stroke="currentColor"
stroke-width="1.5"
/>
<path
d="M2 8h16"
stroke="currentColor"
stroke-width="1.5"
/>
<path
d="M6 2v4M14 2v4"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
</button>
<input
id="date-start"
type="date"
class="sr-only"
tabindex="-1"
aria-hidden="true"
disabled
/>
</div>
</div>
<span id="date-arrow" class="date-arrow" aria-hidden="true"
>→</span
>
<div id="date-end-group">
<label for="date-end-text">Date de fin</label>
<div class="date-input-wrapper">
<input
id="date-end-text"
type="text"
inputmode="numeric"
placeholder="JJ/MM/AAAA"
autocomplete="off"
aria-label="Date de fin (format JJ/MM/AAAA)"
maxlength="10"
disabled
/>
<button
type="button"
class="btn-calendar"
aria-label="Ouvrir le calendrier de fin"
disabled
>
<svg
width="20"
height="20"
viewbox="0 0 20 20"
fill="none"
aria-hidden="true"
>
<rect
x="2"
y="4"
width="16"
height="14"
rx="2"
stroke="currentColor"
stroke-width="1.5"
/>
<path
d="M2 8h16"
stroke="currentColor"
stroke-width="1.5"
/>
<path
d="M6 2v4M14 2v4"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
/>
</svg>
</button>
<input
id="date-end"
type="date"
class="sr-only"
tabindex="-1"
aria-hidden="true"
disabled
/>
</div>
</div>
</div>
<p id="date-message" class="field-message" aria-live="polite"></p>
</fieldset>
<div class="preset-buttons" id="preset-buttons">
<button type="button" data-days="0" disabled>Hier</button>
<button type="button" data-days="3" disabled>
3 derniers jours
</button>
<button type="button" data-days="7" disabled>
7 derniers jours
</button>
<button type="button" data-days="15" disabled>
15 derniers jours
</button>
<button type="button" data-days="30" disabled>
30 derniers jours
</button>
<button type="button" data-years-ago="1" disabled>
Il y a 1 an
</button>
<button type="button" data-years-ago="5" disabled>
Il y a 5 ans
</button>
<button type="button" data-years-ago="10" disabled>
Il y a 10 ans
</button>
</div>
<div id="compare-toggle-area">
<button
type="button"
id="compare-button"
class="btn-secondary"
disabled
>
Comparer avec une autre ville
</button>
</div>
<div id="compare-fields" class="hidden">
<label for="commune2-input">Seconde commune</label>
<div class="autocomplete">
<input
id="commune2-input"
type="text"
inputmode="search"
autocomplete="off"
placeholder="Ex : Lyon"
aria-autocomplete="list"
aria-expanded="false"
aria-controls="commune2-list"
/>
<ul
id="commune2-list"
class="suggestions hidden"
role="listbox"
></ul>
</div>
<p
id="commune2-message"
class="field-message"
aria-live="polite"
></p>
<button type="button" id="cancel-compare" class="btn-cancel">
Annuler la comparaison
</button>
</div>
<button id="search-button" disabled>Voir la météo</button>
</div>
<div id="advanced-toggle-link" class="advanced-toggle">
<button
type="button"
id="advanced-toggle-btn"
aria-expanded="false"
aria-controls="advanced-options"
>
Mode avancé ▾
</button>
</div>
<p class="search-microcopy">
Accédez aux températures, précipitations et conditions heure par heure.
</p>
</div>
</section>
<section id="featured-towns" class="panel" data-ssr="true">
<h2>Villes populaires</h2>
<nav class="internal-links" aria-label="Villes populaires">
<a href="/ville/paris-75">Paris</a>
<a href="/ville/marseille-13">Marseille</a>
<a href="/ville/lyon-69">Lyon</a>
<a href="/ville/toulouse-31">Toulouse</a>
<a href="/ville/nice-06">Nice</a>
<a href="/ville/nantes-44">Nantes</a>
<a href="/ville/montpellier-34">Montpellier</a>
<a href="/ville/strasbourg-67">Strasbourg</a>
<a href="/ville/bordeaux-33">Bordeaux</a>
<a href="/ville/lille-59">Lille</a>
</nav>
</section>
<section id="featured-months" class="panel" data-ssr="true">
<h2>Historiques météo récents</h2>
<nav class="internal-links" aria-label="Historiques météo récents">
<a href="/meteo/paris-75/2026/03">Météo à Paris en mars 2026</a>
<a href="/meteo/marseille-13/2026/03">Météo à Marseille en mars 2026</a>
<a href="/meteo/lyon-69/2026/03">Météo à Lyon en mars 2026</a>
<a href="/meteo/paris-75/2026/02">Météo à Paris en février 2026</a>
<a href="/meteo/marseille-13/2026/02">Météo à Marseille en février 2026</a>
<a href="/meteo/lyon-69/2026/02">Météo à Lyon en février 2026</a>
<a href="/meteo/paris-75/2026/01">Météo à Paris en janvier 2026</a>
<a href="/meteo/marseille-13/2026/01">Météo à Marseille en janvier 2026</a>
<a href="/meteo/lyon-69/2026/01">Météo à Lyon en janvier 2026</a>
<a href="/meteo/paris-75/2025/12">Météo à Paris en décembre 2025</a>
<a href="/meteo/marseille-13/2025/12">Météo à Marseille en décembre 2025</a>
<a href="/meteo/lyon-69/2025/12">Météo à Lyon en décembre 2025</a>
</nav>
</section>
<section id="home-events" class="panel home-events-section" aria-label="Événements climatiques">
<h2>🌤️ Événements climatiques marquants</h2>
<p>
Découvrez les grands épisodes météo qui ont marqué l'histoire en France.
</p>
<div class="home-featured-events">
<a href="/evenement/hiver-1956" class="home-event-link">Hiver 1956 : la vague de froid historique en France</a>
<a href="/evenement/canicule-2003" class="home-event-link">Canicule 2003</a>
</div>
<a href="/evenements-climatiques-france" class="btn-secondary home-events-cta">
Voir tous les événements climatiques
</a>
</section>
<div
id="global-error"
class="error-state hidden"
role="alert"
aria-live="polite"
>
<p id="global-error-title" class="error-state-title"></p>
<p id="global-error-message" class="error-state-message"></p>
<div id="global-error-actions" class="error-state-actions"></div>
</div>
<div id="stale-banner" class="stale-banner hidden" role="status" aria-live="polite"></div>
<section id="weather-hero" class="weather-hero hidden" aria-live="polite">
<div class="weather-hero-content">
<span
id="weather-hero-icon"
class="weather-hero-icon"
aria-hidden="true"
></span>
<div class="weather-hero-info">
<p id="weather-hero-label" class="weather-hero-label"></p>
<div class="weather-hero-stats">
<span id="weather-hero-temp" class="weather-hero-stat"></span>
<span id="weather-hero-rain" class="weather-hero-stat"></span>
<span id="weather-hero-wind" class="weather-hero-stat"></span>
</div>
</div>
</div>
</section>
<section id="comparison-hero" class="panel hidden" aria-live="polite">
<div id="comparison-hero-body"></div>
</section>
<section id="comparison-score" class="panel hidden" aria-live="polite">
<h2>Score météo comparé</h2>
<div id="comparison-score-body"></div>
</section>
<section id="comparative-summary" class="panel hidden" aria-live="polite">
<h2>Résumé comparatif</h2>
<div id="comparative-summary-body"></div>
</section>
<section id="verdict" class="panel hidden" aria-live="polite">
<div id="verdict-body"></div>
</section>
<div id="city1-block" class="comparison-city-block panel hidden" aria-live="polite">
<div id="city1-summary-body"></div>
</div>
<div id="city2-block" class="comparison-city-block panel hidden" aria-live="polite">
<div id="city2-summary-body"></div>
</div>
<section id="page-hero" class="panel page-hero hidden"></section>
<h1 id="page-title" class="results-title" data-ssr="true">Historique météo en France : données passées par ville et par date</h1>
<section id="seo-intro" class="panel" aria-live="polite" data-ssr="true">
<p id="seo-intro-text" class="seo-intro-text" data-ssr="true">Consultez la météo passée en France pour n’importe quelle commune. Retrouvez les températures, les précipitations et les conditions météo jour par jour.
HistoMétéo permet d’explorer l’historique météo facilement, sur n’importe quelle période, afin de mieux comprendre le climat et les conditions passées.</p>
</section>
<section id="anomaly-cards" class="panel hidden" data-block-id="anomaly_cards">
<h2>Synthèse climatique</h2>
<div id="anomaly-cards-body"></div>
</section>
<section id="annual-summary" class="panel hidden" aria-live="polite">
<h2>Résumé de l'année (normales)</h2>
<div id="annual-summary-body" class="kpi-grid"></div>
</section>
<section
id="share-block"
class="panel share-block hidden"
aria-label="Partager cette page"
></section>
<section id="comparison-summary" class="panel hidden" aria-live="polite">
<h2>Comparaison</h2>
<div id="comparison-summary-body"></div>
</section>
<nav
id="results-nav"
class="results-nav hidden"
aria-label="Navigation résultats"
>
</nav>
<h2 id="seo-h2" class="seo-h2 hidden"></h2>
<section id="period-insights" class="panel hidden">
<h2>Analyse de la période</h2>
</section>
<section id="daily-summary" class="panel hidden" aria-live="polite">
<h2>Résumé par jour</h2>
<div class="table-legend" data-ssr="true">
🔥 Températures élevées mises en évidence · ❄️ Températures froides · 💧
Précipitations importantes · 💨 Rafales fortes
</div>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Date</th>
<th></th>
<th>Min</th>
<th>Max</th>
<th>Pluie</th>
<th>Neige</th>
<th>Humidité moy.</th>
<th>Vent moy.</th>
<th>Rafales max</th>
<th class="col-hourly"></th>
</tr>
</thead>
<tbody id="daily-summary-body"></tbody>
</table>
</div>
<div id="day-groups"></div>
</section>
<section id="climate-anomalies" class="panel hidden" data-block-id="climate_anomalies">
<h2>Anomalies climatiques</h2>
<div id="climate-anomalies-body"></div>
</section>
<section id="chart" class="panel hidden" aria-label="Graphique météo">
<h2>Évolution météo</h2>
<div class="charts-wrapper">
<div class="chart-block">
<h3>Température</h3>
<div class="chart-container">
<canvas
id="temp-chart"
aria-label="Graphique des températures"
></canvas>
</div>
</div>
<div class="chart-block">
<h3>Précipitations</h3>
<div class="chart-container">
<canvas
id="precip-chart"
aria-label="Graphique des précipitations"
></canvas>
</div>
</div>
</div>
</section>
<section id="climate-month" class="info-card hidden" aria-live="polite">
<h2 id="climate-month-title"></h2>
</section>
<div id="period-links" class="period-links hidden">
<button type="button" id="prev-period" class="btn-period-link" disabled>
← Période précédente
</button>
<button type="button" id="next-period" class="btn-period-link" disabled>
Période suivante →
</button>
</div>
<section id="annual-climate" class="panel hidden" aria-live="polite">
<h2>Climat habituel (normales de saison)</h2>
<div id="annual-climate-body"></div>
</section>
<section id="month-links" class="panel hidden" aria-live="polite">
<h2>Historique par mois</h2>
<div id="month-links-header" class="month-links-nav"></div>
<div id="month-links-body" class="month-links-grid"></div>
</section>
<section id="quick-periods" class="panel hidden" aria-live="polite">
<h2>Accès rapide</h2>
<div id="quick-periods-body"></div>
</section>
<section id="internal-links" class="panel hidden">
<nav
id="internal-links-body"
class="internal-links"
aria-label="Liens internes"
></nav>
</section>
<section id="nearby-communes" class="panel hidden" aria-live="polite">
<h2 id="nearby-communes-title">Communes proches</h2>
<nav
id="nearby-communes-body"
class="nearby-communes-list"
aria-label="Communes proches"
></nav>
</section>
<section id="commune-info" class="info-card hidden" aria-live="polite" data-block-id="commune_info">
<h2>Informations sur la commune</h2>
</section>
<section id="info" class="panel info">
<h2>Transparence des données</h2>
<p>
Les données présentées proviennent d'une reconstitution météorologique
par modèle numérique (réanalyse ERA5), et non de mesures directes
d'une station locale. La précision peut varier, en particulier pour
les phénomènes très localisés (orages, microclimats).
</p>
</section>
<div
id="hourly-modal"
class="modal-overlay hidden"
role="dialog"
aria-modal="true"
aria-labelledby="hourly-modal-title"
>
<div class="modal-content" tabindex="-1">
<div class="modal-header">
<h3 id="hourly-modal-title"></h3>
<button type="button" class="modal-close" aria-label="Fermer">×</button>
</div>
<div class="modal-body">
<div class="table-wrapper">
<table id="hourly-modal-table">
<thead>
<tr>
<th>Heure</th>
<th></th>
<th>Temp.</th>
<th>Pluie</th>
<th>Neige</th>
<th>Humidité</th>
<th>Vent</th>
<th>Rafales</th>
</tr>
</thead>
<tbody id="hourly-modal-body"></tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<footer>
<img
src="/assets/logo-histometeo.png"
alt=""
class="footer-logo"
aria-hidden="true"
width="1291"
height="366"
/>
<p>
Données :
<a href="https://geo.api.gouv.fr" target="_blank" rel="noopener"
>geo.api.gouv.fr</a
>
et
<a href="https://open-meteo.com" target="_blank" rel="noopener"
>Open-Meteo Historical Archive API</a
>.
</p>
<p class="footer-project-link">
<a href="/projet-histometeo">Le projet HistoMétéo</a>
</p>
<p class="footer-top10-link">
<a href="/top-10-meteo-france">Meilleures destinations météo</a>
</p>
<p class="footer-evolution-link">
<a href="/meteo/evolution-mois">Évolution météo en France par mois</a>
</p>
<p class="footer-records-link">
<a href="/meteo/records/france">Records météo en France métropolitaine</a>
</p>
</footer>
<!-- Legacy marker for compatibility tests: <script type="module" src="/app.js"></script> -->
<script type="module" src="/app.js?v=dev"></script>
</body>
</html>
