Météo

<div id="meteo-aop06" style="
    width: 260px;
    padding: 15px;
    border-radius: 12px;
    background: #f5f5f5;
    font-family: Arial, sans-serif;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    text-align: center;
">
    <!-- Logo AOP06 réduit -->
    <img src="https://www.aop06.fr/wp-content/uploads/2017/02/AOP-logo-hr.png"
         alt="AOP06"
         style="width: 90px; margin-bottom: 10px;">

    <h3 style="margin: 0; font-size: 18px;">Puget-Théniers</h3>
    <div id="meteo-desc" style="margin-top: 5px; font-size: 14px; color: #555;"></div>

    <div id="meteo-icone" style="margin-top: 10px;"></div>
    <div id="meteo-temp" style="font-size: 32px; margin-top: 10px; font-weight: bold;"></div>
    <div id="meteo-vent" style="margin-top: 8px; font-size: 14px; color: #333;"></div>
</div>

<script>
// Coordonnées Puget-Théniers (Open-Meteo)
const lat = 43.955;
const lon = 6.893;

fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,wind_speed_10m,weather_code`)
    .then(r => r.json())
    .then(d => {
        const w = d.current;

        // Codes météo Open-Meteo : textes simples
        const desc = {
            0: "Ciel clair",
            1: "Peu nuageux",
            2: "Partiellement nuageux",
            3: "Très nuageux",
            45: "Brouillard",
            48: "Givre / brouillard givrant",
            51: "Bruine légère",
            53: "Bruine",
            55: "Bruine forte",
            61: "Pluie faible",
            63: "Pluie",
            65: "Pluie forte",
            80: "Averses",
            95: "Orages",
        };

        document.getElementById("meteo-desc").innerHTML =
            desc[w.weather_code] || "Conditions inconnues";

        document.getElementById("meteo-temp").innerHTML =
            `${w.temperature_2m}°C`;

        document.getElementById("meteo-vent").innerHTML =
            `Vent : ${w.wind_speed_10m} km/h`;

        // Icônes simples (emoji) — 100% sans dépendances
        const icones = {
            0: "☀️",
            1: "🌤️",
            2: "⛅",
            3: "☁️",
            45: "🌫️",
            48: "🌫️",
            51: "🌦️",
            53: "🌦️",
            55: "🌧️",
            61: "🌧️",
            63: "🌧️",
            65: "🌧️",
            80: "🌧️",
            95: "⛈️"
        };

        document.getElementById("meteo-icone").innerHTML =
            `<div style="font-size:50px">${icones[w.weather_code] || "❓"}</div>`;
    });
</script>

<div id="meteo-aop06-forecast" style="
    width: 260px;
    padding: 15px;
    border-radius: 12px;
    background: #f5f5f5;
    font-family: Arial, sans-serif;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    text-align: center;
">
    <!-- Logo AOP06 SANS ombre -->
    <img src="https://www.aop06.fr/wp-content/uploads/2017/02/AOP-logo-hr.png"
         alt="AOP06"
         style="
            width: 90px;
            margin-bottom: 10px;
            box-shadow: none !important;
            filter: none !important;
            border: none !important;
    ">

    <h3 style="margin: 0; font-size: 18px;">Puget-Théniers</h3>

    <div id="meteo-desc-pt" style="margin-top: 5px; font-size: 14px; color: #555;"></div>
    <div id="meteo-icone-pt" style="margin-top: 10px;"></div>
    <div id="meteo-temp-pt" style="font-size: 32px; margin-top: 10px; font-weight: bold;"></div>
    <div id="meteo-vent-pt" style="margin-top: 8px; font-size: 14px; color: #333;"></div>

    <hr style="margin: 15px 0; border: none; border-top: 1px solid #ccc;">

    <div id="meteo-forecast-pt" style="font-size: 13px; color: #444;">
        Chargement des prévisions...
    </div>
</div>

<script>
(function () {
    // Coordonnées Puget-Théniers (Open-Meteo)
    const latPT = 43.955;
    const lonPT = 6.893;

    // Codes météo
    const descPT = {
        0: "Ciel clair", 1: "Peu nuageux", 2: "Partiellement nuageux", 3: "Très nuageux",
        45: "Brouillard", 48: "Brouillard givrant",
        51: "Bruine légère", 53: "Bruine", 55: "Bruine forte",
        61: "Pluie faible", 63: "Pluie", 65: "Pluie forte",
        80: "Averses", 95: "Orages"
    };

    const iconesPT = {
        0: "☀️", 1: "🌤️", 2: "⛅", 3: "☁️",
        45: "🌫️", 48: "🌫️",
        51: "🌦️", 53: "🌦️", 55: "🌧️",
        61: "🌧️", 63: "🌧️", 65: "🌧️",
        80: "🌧️", 95: "⛈️"
    };

    // API avec prévisions sur 7 jours
    fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latPT}&longitude=${lonPT}&current=temperature_2m,wind_speed_10m,weather_code&daily=weather_code,temperature_2m_min,temperature_2m_max&timezone=Europe/Paris`)
        .then(r => r.json())
        .then(d => {
            // --- METEO ACTUELLE ---
            const w = d.current;
            document.getElementById("meteo-desc-pt").innerHTML =
                descPT[w.weather_code] || "Conditions inconnues";
            document.getElementById("meteo-temp-pt").innerHTML =
                `${w.temperature_2m}°C`;
            document.getElementById("meteo-vent-pt").innerHTML =
                `Vent : ${w.wind_speed_10m} km/h`;
            document.getElementById("meteo-icone-pt").innerHTML =
                `<div style="font-size:50px">${iconesPT[w.weather_code] || "❓"}</div>`;

            // --- PREVISIONS 6 JOURS ---
            const fc = d.daily;
            let html = `<div style="display:flex; flex-direction:column; gap:6px;">`;

            for (let i = 1; i <= 6; i++) {
                const code = fc.weather_code[i];
                const icon = iconesPT[code] || "❓";

                const tmin = Math.round(fc.temperature_2m_min[i]);
                const tmax = Math.round(fc.temperature_2m_max[i]);

                // Jour court (lun, mar, mer…)
                const date = new Date(fc.time[i]);
                const j = date.toLocaleDateString("fr-FR", { weekday: "short" });

                html += `
                    <div style="display:flex; justify-content:space-between; align-items:center;">
                        <span style="width:50px; text-align:left;">${j}</span>
                        <span style="font-size:20px; width:35px;">${icon}</span>
                        <span style="width:60px; text-align:right;">
                            <strong>${tmax}°</strong> / <span style="color:#555">${tmin}°</span>
                        </span>
                    </div>
                `;
            }

            html += "</div>";
            document.getElementById("meteo-forecast-pt").innerHTML = html;
        });
})();
</script>