:root {
        --pressure-color-storm: #8e44ad;      /* Violet */
        --pressure-color-low: #3498db;        /* Bleu */
        --pressure-color-normal: #2ecc71;     /* Vert */
        --pressure-color-high: #fd7301;       /* Orange */
        --pressure-color-extreme: #e74c3c;    /* Rouge */
        --bg-color: #f4f7f6; 
        --text-color: #333; 
        --text-secondary-color: #555; 
        --card-bg-gradient-start: rgba(255, 255, 255, 0.7);
        --card-bg-gradient-end: rgba(255, 255, 255, 0.5);
        --card-border-color: rgba(200, 200, 200, 0.3);
        --card-hover-border-color: #3498db; 
        --card-shadow-color: rgba(0, 0, 0, 0.08);
        --input-bg-color: rgba(255, 255, 255, 0.5);
        --input-text-color: #2c3e50;
        --input-border-color: rgba(0, 0, 0, 0.1);
        --input-focus-border-color: #3498db; 
        --input-focus-shadow-color: rgba(52, 152, 219, 0.2);
        --detail-item-bg-color: rgba(255, 255, 255, 0.3);
        --detail-item-hover-bg-color: rgba(255, 255, 255, 0.5);
        --logo-gradient-start: #2980b9;
        --logo-gradient-end: #3498db;
        --subtitle-color: #7f8c8d;
        --link-color: #2980b9; 
        --link-hover-color: #1f6392;
        --button-bg-gradient-start: #e74c3c;
        --button-bg-gradient-end: #c0392b;
        --button-text-color: white;
        --button-hover-shadow: rgba(231, 76, 60, 0.4);
        --share-button-bg: #3498db; 
        --share-button-hover-bg: #2980b9;
        --toggle-bg: #bdc3c7;
        --toggle-active-bg: #2ecc71;
        --toggle-knob-bg: white;
        --error-message-bg: #e74c3c;
        --error-message-border: #c0392b;
        --error-message-text: white;
        --info-banner-bg: #f1c40f;
        --info-banner-text: #795548;
        --info-banner-border: #f39c12;
        --spinner-color: #3498db;

        --weather-icon-size: 200px; 
        --forecast-icon-size: 40px; 
        --hourly-icon-size: 30px; 


        --pollen-tres-faible: #a8e6cf;
        --pollen-faible: #27ae60;      
        --pollen-modere: #f39c12;   
        --pollen-eleve: #d35400;      
        --pollen-tres-eleve: #c0392b;
        --uv-extreme-color: #8e44ad;

        --icon-color-sun: #f1c40f;      
        --icon-color-moon: #ecf0f1;      
        --icon-color-cloud: #bdc3c7;      
        --icon-color-rain: #3498db;      
        --icon-color-snow: #ecf0f1;      
        --icon-color-thunderstorm: #7f8c8d;
        --icon-color-fog: #95a5a6;      
        
        --alert-color-red: #c0392b;
        --alert-color-orange: #ff6702;
        --alert-color-yellow: #f39c12;
        --alert-color-blue: #2980b9;
        --alert-color-green: #27ae60;
        --alert-color-violet: #8e44ad;
        --footer-bg-color: rgba(230, 230, 230, 0.5);
        --footer-text-color: #444;
        --footer-icon-color: #3498db;
        --footer-icon-hover-color: #2980b9;
        --humidity-color-very-low: #5dade2;  /* NOUVEAU: Bleu clair (Très sec) */
        --humidity-color-low: #2a85c2;      /* Bleu (Sec) */
        --humidity-color-normal: #2ecc71;    /* Vert (Confortable) */
        --humidity-color-high: #f39c12;      /* NOUVEAU: Orange (Humide) */
        --humidity-color-very-high: #e74c3c;  /* Rouge (Très humide) */
    }
    body.share-view-active .header,
body.share-view-active .search-section,
body.share-view-active #weatherContent,
body.share-view-active .minutely-forecast-section,
body.share-view-active .hourly-forecast-section,
body.share-view-active .forecast-section,
body.share-view-active .weather-character-section,
body.share-view-active .weather-watch-section,
body.share-view-active .charts-section,
body.share-view-active .features-section,
body.share-view-active .lightning-map-section,
body.share-view-active .site-footer,
body.share-view-active #pwaInstallBanner {
    display: none; /* On cache toutes les sections inutiles */
}

/* ... on veut que la section de la carte prenne tout l'écran */
body.share-view-active .map-section {
    position: fixed; /* Positionnée par rapport à la fenêtre du navigateur */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 100% de la hauteur de la vue */
    padding: 0;
    margin: 0;
    border-radius: 0; /* Pas de coins arrondis en plein écran */
    border: none;
}

/* Et on s'assure que la carte elle-même remplit ce nouvel espace */
body.share-view-active #weatherMap {
    height: 100%;
    border-radius: 0;
}
body.dark-mode .detail-block strong,
body.dark-mode .detail-block span {
    color: var(--text-color); /* On force TOUT le texte à utiliser la couleur claire du thème sombre */
    opacity: 1;              /* On s'assure qu'il n'y a pas de transparence non désirée */
}

/* Optionnel : On peut redonner une légère nuance aux labels pour les différencier des valeurs */
body.dark-mode .detail-block strong {
    opacity: 0.85;
}
body.dark-mode {
        --pressure-color-storm: #9f7aea;      /* Violet clair */
        --pressure-color-low: #63b3ed;        /* Bleu clair */
        --pressure-color-normal: #48bb78;     /* Vert clair */
        --pressure-color-high: #ecc94b;       /* Jaune/Orange clair */
        --pressure-color-extreme: #e53e3e;    /* Rouge clair */
         --bg-color: #2a333f; 
        --text-color: #e2e8f0; 
        --text-secondary-color: #a0aec0; 
        --card-bg-gradient-start: rgba(45, 55, 72, 0.9); 
        --card-bg-gradient-end: rgba(26, 32, 44, 0.85);
        --card-border-color: rgba(74, 85, 104, 0.5);
        --card-hover-border-color: #63b3ed; 
        --card-shadow-color: rgba(0, 0, 0, 0.25);
        --input-bg-color: rgba(45, 55, 72, 0.5);
        --input-text-color: #e2e8f0;
        --input-border-color: rgba(255, 255, 255, 0.1);
        --input-focus-border-color: #63b3ed; 
        --input-focus-shadow-color: rgba(99, 179, 237, 0.2);
        --detail-item-bg-color: rgba(45, 55, 72, 0.4);
        --detail-item-hover-bg-color: rgba(45, 55, 72, 0.6);
        --logo-gradient-start: #63b3ed;
        --logo-gradient-end: #90cdf4;
        --subtitle-color: #a0aec0;
        --link-color: #63b3ed;
        --link-hover-color: #90cdf4;
        --button-bg-gradient-start: #e74c3c;
        --button-bg-gradient-end: #c0392b;
        --button-text-color: white;
        --button-hover-shadow: rgba(231, 76, 60, 0.5);
        --share-button-bg: #63b3ed; 
        --share-button-hover-bg: #90cdf4;
        --toggle-bg: #4a5568;
        --toggle-active-bg: #48bb78;
        --toggle-knob-bg: #e2e8f0;
        --error-message-bg: #c53030;
        --error-message-border: #9b2c2c;
        --error-message-text: white;
        --info-banner-bg: #d69e2e;
        --info-banner-text: #2d3748;
        --info-banner-border: #b7791f;
        --spinner-color: #63b3ed;

        --pollen-tres-faible: #68d391;
        --pollen-faible: #48bb78;      
        --pollen-modere: #ecc94b;   
        --pollen-eleve: #ed8936;      
        --pollen-tres-eleve: #e53e3e;
        --uv-extreme-color: #9f7aea;

        --icon-color-sun: #f6e05e;      
        --icon-color-moon: #e2e8f0;      
        --icon-color-cloud: #a0aec0;      
        --icon-color-rain: #63b3ed;      
        --icon-color-snow: #e2e8f0;      
        --icon-color-thunderstorm: #a0aec0;
        --icon-color-fog: #718096;
        
        --alert-color-red: #e53e3e;
        --alert-color-orange: #ed8936;
        --alert-color-yellow: #ecc94b;
        --alert-color-blue: #63b3ed;
        --alert-color-green: #48bb78;
        --alert-color-violet: #8e44ad;

        --footer-bg-color: rgba(26, 32, 44, 0.6);
        --footer-text-color: #a0aec0;
        --footer-icon-color: #63b3ed;
        --footer-icon-hover-color: #90cdf4;

        --humidity-color-very-low: #5dade2;  /* NOUVEAU: Bleu clair (Très sec) */
        --humidity-color-low: #3498db;      /* Bleu (Sec) */
        --humidity-color-normal: #2ecc71;    /* Vert (Confortable) */
        --humidity-color-high: #f39c12;      /* NOUVEAU: Orange (Humide) */
        --humidity-color-very-high: #e74c3c;  /* Rouge (Très humide) */

    }

    body.dark-mode #dynamicWeatherBackground {
        filter: brightness(0.6) contrast(1.2); 
    }
    body.dark-mode .bg-clear-day { background: linear-gradient(to bottom, #2c3e50 0%, #1a2533 100%); }
    body.dark-mode .bg-cloudy { background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%); }
    
    body.dark-mode .floating-elements .cloud,
    body.dark-mode .floating-elements .cloud::before,
    body.dark-mode .floating-elements .cloud::after {
        background: rgba(74, 85, 104, 0.35); 
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }

    body.dark-mode .particles-container .particle {
        background: rgba(160, 174, 192, 0.6); 
    }
    body.dark-mode .particles-container .particle.star {
        background: #e2e8f0; box-shadow: 0 0 5px #e2e8f0, 0 0 10px #e2e8f0;
    }

    .weather-trend-indicator {
    max-width: 500px; /* Adaptez cette valeur selon le rétrécissement souhaité */
    margin-left: auto; /* Centre l'élément s'il est plus petit que son parent */
    margin-right: auto; /* Idem */
    background: var(--detail-item-bg-color);
    padding: 0.8rem;
    border-radius: 12px;
    margin-top: 1rem;
    border-left: 4px solid var(--link-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.weather-trend-indicator:hover {
    background: var(--detail-item-hover-bg-color);
    transform: translateX(3px);
}

.trend-icon {
        font-size: 1.5rem; /* Rendre l'icône de tendance plus petite */
        margin-right: 0.5rem; /* Ajouter un peu d'espace si le texte est aligné */
    }

.trend-icon.rising {
    color: #e74c3c; /* Rouge pour hausse */
}

.trend-icon.falling {
    color: #3498db; /* Bleu pour baisse */
}

.trend-icon.stable {
    color: #95a5a6; /* Gris pour stable */
}

@keyframes subtlePulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.trend-details {
        width: 100%; /* S'assurer que les détails prennent toute la largeur */
    }

.trend-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: var(--text-color);
}

.trend-description {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    line-height: 1.4;
}

.trend-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    justify-content: flex-start;
    flex-direction: column; /* FORCER LES VALEURS HORAIRES À S'EMPILER VERTICALEMENT */
    align-items: flex-start; /* Aligner les éléments empilés à gauche */
}

.trend-value {
        width: 100%; /* Chaque élément prend toute la largeur */
        text-align: left;
        font-size: 0.8rem; /* Réduire la taille de police des valeurs */
        white-space: nowrap; /* Empêcher le retour à la ligne DANS les valeurs */
    }

.trend-value i {
    font-size: 0.9em;
    opacity: 0.7;
}

.temp-delta {
        font-size: 1em; /* Garder la taille relative */
    }

.temp-delta.positive {
    color: #e74c3c;
}

.temp-delta.negative {
    color: #3498db;
}

.temp-delta.neutral {
    color: var(--text-secondary-color);
}

    /* Styles Généraux */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
        overflow-x: hidden; /* Cacher tout débordement horizontal */
        width: 100%;       /* Assurer que le corps prend 100% de la largeur du viewport */
        min-height: 100vh; /* (Optionnel) S'assurer qu'il prend au moins toute la hauteur de la vue */
    }
    html { scroll-behavior: smooth; }
    body { 
        font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
        min-height: 100vh; 
        color: var(--text-color); 
        background-color: var(--bg-color); 
        overflow-x: hidden; 
        display: flex; 
        flex-direction: column; 
        transition: color 0.4s ease, background-color 0.4s ease;
    }
    h1, h2, h3, .logo {
    font-family: 'Outfit', sans-serif; /* Outfit pour les titres */
}
    #dynamicWeatherBackground {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        z-index: -2; 
        transition: background 1s ease-in-out, filter 0.5s ease; 
        overflow: hidden; /* Assurez-vous que cette ligne est bien là */
}
    .bg-default-animated {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        animation: gradientShift 30s ease infinite;
    }
    @keyframes gradientShift {
        0%, 100% { background: linear-gradient(135deg, #5b6acf 0%, #6d3f91 33%, #a854a0 66%, #d87cd1 100%); }
        25% { background: linear-gradient(135deg, #4397dc 0%, #00c8d8 33%, #3a9fbf 66%, #5b6acf 100%); }
        50% { background: linear-gradient(135deg, #3bc06d 0%, #2fc5b7 33%, #36bfa9 66%, #4397dc 100%); }
        75% { background: linear-gradient(135deg, #e0628c 0%, #e8cb3a 33%, #e4b35a 66%, #3bc06d 100%); }
    }
    .bg-clear-day { background: linear-gradient(to bottom, #87CEEB 0%, #4682B4 100%); }
    
    .bg-clear-night { 
        background: linear-gradient(to bottom, #0f1a2e 0%, #203a5f 70%, #3a5a7e 100%); 
        position: relative;
    }
    #dynamicWeatherBackground.bg-clear-night::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Nouvelles couleurs et dégradés pour l'aurore */
    background:
        /* Rideau principal vert, plus intense */
        linear-gradient(to top, 
            transparent 5%, 
            rgba(0, 230, 100, 0.15) 25%, /* Vert émeraude clair, faible opacité */
            rgba(20, 180, 110, 0.35) 50%, /* Vert plus soutenu */
            rgba(80, 220, 150, 0.25) 75%, /* Autre nuance de vert */
            transparent 95%
        ),
        /* Reflets roses/violets, orientés différemment */
        linear-gradient(170deg, 
            transparent 15%, 
            rgba(190, 70, 230, 0.25) 45%, /* Violet */
            rgba(230, 90, 190, 0.2) 65%,  /* Rose/Magenta */
            transparent 85%
        ),
        /* Touches de bleu froid, autre angle */
        linear-gradient(30deg, 
            transparent 20%, 
            rgba(60, 150, 255, 0.15) 50%, /* Bleu clair */
            rgba(80, 120, 240, 0.25) 70%, /* Bleu plus profond */
            transparent 90%
        );
        -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
        mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
        animation: auroraShift 45s ease-in-out infinite alternate;
        opacity: 0;
        z-index: -1;
        transition: opacity 3s ease-in-out;
        will-change: transform, filter, opacity;
    }
    #dynamicWeatherBackground.bg-clear-night.aurora-visible::after {
        opacity: 0.8;
    }
    @keyframes auroraShift {
    0% {
        transform: translateY(5%) translateX(-15%) scale(1.0, 0.8) rotate(-3deg) skewY(-4deg);
        filter: hue-rotate(0deg) brightness(100%);
        opacity: 0.6; /* Opacité de départ pour la pulsation */
    }
    25% {
        transform: translateY(-10%) translateX(10%) scale(1.1, 1.3) rotate(4deg) skewY(3deg);
        filter: hue-rotate(45deg) brightness(130%);
        opacity: 0.9;
    }
    50% {
        transform: translateY(-2%) translateX(-10%) scale(1.25, 0.75) rotate(-6deg) skewY(-5deg);
        filter: hue-rotate(90deg) brightness(150%);
        opacity: 0.75;
    }
    75% {
        transform: translateY(-15%) translateX(5%) scale(1.1, 1.25) rotate(2deg) skewY(2deg);
        filter: hue-rotate(135deg) brightness(120%);
        opacity: 0.95;
    }
    100% {
        transform: translateY(5%) translateX(-15%) scale(1.0, 0.8) rotate(-3deg) skewY(-4deg);
        filter: hue-rotate(180deg) brightness(100%); /* La rotation de teinte continue pour varier les couleurs */
        opacity: 0.6;
    }
}

    .bg-cloudy { background: linear-gradient(135deg, #b0c4de 0%, #778899 100%); }
    .bg-rain { background: linear-gradient(to bottom, #708090 0%, #485461 100%); }
    .bg-thunderstorm { background: linear-gradient(to bottom, #2c3e50 0%, #17202a 100%); }
    .bg-snow { background: linear-gradient(to bottom, #e6e9f0 0%, #d0d3d8 100%); }
    
    .bg-fog {
        animation: animatedFog 25s ease-in-out infinite alternate;
    }
    @keyframes animatedFog {
        0% { background: linear-gradient(to bottom, rgba(189, 195, 199, 0.7) 0%, rgba(160, 170, 175, 0.8) 40%, rgba(149, 165, 166, 0.9) 70%, rgba(130, 140, 140, 1) 100%); }
        100% { background: linear-gradient(to bottom, rgba(195, 200, 205, 0.75) 0%, rgba(170, 180, 185, 0.85) 30%, rgba(155, 170, 170, 0.95) 60%, rgba(140, 150, 150, 1) 100%); }
    }
    body.dark-mode .bg-fog {
        animation: animatedDarkFog 25s ease-in-out infinite alternate;
    }
    @keyframes animatedDarkFog {
        0% { background: linear-gradient(to bottom, rgba(60, 70, 80, 0.6) 0%, rgba(45, 55, 65, 0.7) 40%, rgba(40, 50, 60, 0.8) 70%, rgba(30, 35, 40, 0.9) 100%); }
        100% { background: linear-gradient(to bottom, rgba(70, 80, 90, 0.65) 0%, rgba(55, 65, 75, 0.75) 30%, rgba(50, 60, 70, 0.85) 60%, rgba(35, 40, 45, 0.95) 100%); }
    }

    .weather-effect-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
    .raindrop { position: absolute; bottom: 100%; width: 1.5px; background-color: rgba(173, 216, 230, 0.7); animation: fall linear infinite; }
    .raindrop.heavy { width: 2px; background-color: rgba(173, 216, 230, 0.85); } 
    @keyframes fall { to { transform: translateY(100vh) rotate(var(--rain-angle, 0deg)); } }
    .snowflake { position: absolute; top: -10px; background-color: rgba(255, 255, 255, 0.85); border-radius: 50%; animation: snowfall linear infinite; }
    @keyframes snowfall { 
        0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
        10% { opacity: var(--snow-opacity, 0.8); }
        90% { opacity: var(--snow-opacity, 0.8); }
        100% { transform: translateY(100vh) translateX(var(--snow-drift-x, 50px)) rotate(720deg); opacity: 0; }
    }
    .lightning-flash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); opacity: 0; animation: flash 3s infinite steps(1, end); z-index: 0; }
    @keyframes flash { 5% { opacity: 1; } 6% { opacity: 0; } 7% { opacity: 0.6; } 8% { opacity: 0; } }
    
    .floating-elements { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; display: none; }
    .cloud {
        position: absolute;
        background: rgba(255, 255, 255, 0.25); 
        border-radius: 50px;
        opacity: 0.75;
        box-shadow: 0 0 20px rgba(255,255,255,0.1);
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    .cloud::before, .cloud::after {
        content: '';
        position: absolute;
        background: inherit; 
        border-radius: 50%;
    }
    .cloud1 { width: 150px; height: 50px; top: 15%; left: -150px; animation-name: float1; animation-duration: 75s; animation-delay: 0s; }
    .cloud1::before { width: 70px; height: 70px; top: -30px; left: 20px; }
    .cloud1::after { width: 90px; height: 60px; top: -20px; right: 15px; }
    .cloud2 { width: 100px; height: 35px; top: 55%; left: -100px; animation-name: float2; animation-duration: 90s; animation-delay: -35s; }
    .cloud2::before { width: 50px; height: 50px; top: -20px; left: 10px; }
    .cloud2::after { width: 60px; height: 40px; top: -15px; right: 10px; }
    .cloud3 { width: 180px; height: 60px; top: 30%; left: -180px; animation-name: float3; animation-duration: 65s; animation-delay: -60s; }
    .cloud3::before { width: 80px; height: 80px; top: -35px; left: 25px; }
    .cloud3::after { width: 100px; height: 70px; top: -25px; right: 20px; }
    .cloud4 {width: 120px; height: 40px;top: 75%; left: -120px; animation-name: float4; animation-duration: 85s; animation-delay: -10s; }
    .cloud4::before { width: 60px; height: 60px; top: -25px; left: 15px; }
    .cloud4::after { width: 80px; height: 50px; top: -20px; right: 10px; }

/* Style pour le 5ème nuage */
.cloud5 {
    width: 200px; height: 65px;
    top: 5%; left: -200px; /* Part très haut */
    animation-name: float5;
    animation-duration: 60s; /* Assez rapide */
    animation-delay: -50s;
}
.cloud5::before { width: 90px; height: 90px; top: -40px; left: 30px; }
.cloud5::after { width: 110px; height: 80px; top: -30px; right: 25px; }
    @keyframes float1 {
        0% { transform: translateX(0px) translateY(0px); }
        50% { transform: translateX(calc(50vw + 100px)) translateY(10px); } 
        100% { transform: translateX(calc(100vw + 200px)) translateY(0px); }
    }
    @keyframes float2 {
        0% { transform: translateX(0px) translateY(0px); }
        50% { transform: translateX(calc(50vw + 75px)) translateY(-8px); } 
        100% { transform: translateX(calc(100vw + 150px)) translateY(0px); }
    }
    @keyframes float3 {
        0% { transform: translateX(0px) translateY(0px); }
        50% { transform: translateX(calc(50vw + 120px)) translateY(12px); } 
        100% { transform: translateX(calc(100vw + 240px)) translateY(0px); }
    }
    @keyframes float4 {
    0% { transform: translateX(0px); }
    100% { transform: translateX(calc(100vw + 200px)); }
    }
    @keyframes float5 {
    0% { transform: translateX(0px); }
    100% { transform: translateX(calc(100vw + 250px)); }
    }

    .particles-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; display: none; }
    .particle { position: absolute; background: rgba(255, 255, 255, 0.6); border-radius: 50%; animation: drift 20s linear infinite; opacity: 0; }
    .particle.star { background: white; box-shadow: 0 0 5px white, 0 0 10px white; animation-name: twinkle-drift; }
    
    @keyframes drift {
        0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.8; }
        50% { opacity: 0.4; transform: translateY(-50vh) translateX(calc(var(--drift-x) * 0.7px)) scale(0.8); }
        100% { transform: translateY(-100vh) translateX(calc(var(--drift-x) * 1.5px)) scale(0.5); opacity: 0; }
    }
    @keyframes twinkle-drift {
        0% { transform: translateY(0) translateX(0) scale(var(--star-scale, 1)); opacity: 0; }
        15% { opacity: var(--star-opacity-high, 0.9); } 
        30% { opacity: var(--star-opacity-low, 0.3); }
        45% { opacity: var(--star-opacity-mid, 0.6); }
        60% { opacity: var(--star-opacity-high, 0.95); } 
        75% { opacity: var(--star-opacity-low, 0.2); }
        90% { opacity: var(--star-opacity-mid, 0.5); }
        100% { transform: translateY(-100vh) translateX(calc(var(--drift-x) * 1px)) scale(var(--star-scale, 1)); opacity: 0; }
    }
    @keyframes shimmer-effect {
    0% {
        background-position: -150% 0; /* Commence complètement à gauche, hors du cadre */
       }
    100% {
        background-position: 150% 0; /* Finit complètement à droite, hors du cadre */
        }
    }
    /* Conteneur principal */
    .container { 
        max-width: 1800px; 
        width: 90%; 
        margin: 2rem auto; 
        padding: 1rem; 
        position: relative; 
        z-index: 1; 
        flex-grow: 1; 
    }
    /* En-tête */
    .header { text-align: center; margin-bottom: 2.5rem; animation: slideDown 0.8s ease-out; }
    .logo { 
        font-size: 3rem; 
        font-weight: 700; 
        background: linear-gradient(45deg, var(--logo-gradient-start), var(--logo-gradient-end)); 
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent; 
        margin-bottom: 0.5rem; 
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); 
    }
    .subtitle { 
        font-size: 1.1rem; 
        opacity: 0.8; 
        font-weight: 400; 
        color: var(--text-secondary-color); 
    }
    @keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    
    /* Style de base des cartes */
    .search-section, 
    .weather-card-main, 
    .minutely-forecast-section, 
    .hourly-forecast-section,
     .forecast-section, 
     .weather-watch-section, 
     .charts-section, 
     .features-section,
     .weather-character-section, 
     .map-section { 
        position: relative;
        background: linear-gradient(145deg, var(--card-bg-gradient-start), var(--card-bg-gradient-end));
        backdrop-filter: blur(12px); 
        -webkit-backdrop-filter: blur(12px); 
        border-radius: 20px; 
        padding: 2rem; 
        margin-bottom: 2.5rem; 
        border: 1px solid var(--card-border-color); 
        box-shadow: 0 6px 24px var(--card-shadow-color); 
        transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }
    .search-section:hover, .weather-card-main:hover, .minutely-forecast-section:hover, .hourly-forecast-section:hover, .forecast-section:hover, .weather-watch-section:hover, .charts-section:hover, .features-section:hover, .weather-character-section:hover, .map-section:hover {
        transform: translateY(-3px); 
        box-shadow: 0 8px 28px rgba(0,0,0,0.12);
        border-color: var(--card-hover-border-color);
    }


    .search-section { animation: slideUp 1s ease-out 0.2s both; }
    .search-container { 
        display: flex; 
        gap: 1rem; 
        width: 100%;
    }
    .search-input { 
        flex: 1; padding: 0.9rem 1.2rem; 
        border: 1px solid var(--input-border-color); 
        border-radius: 12px; 
        background: var(--input-bg-color); 
        color: var(--input-text-color); 
        font-size: 1rem; font-weight: 400; 
        transition: all 0.3s ease; 
    }
    .search-input::placeholder { color: var(--input-placeholder-color); opacity: 0.7; }
    .search-input:focus { 
        outline: none; 
        border-color: var(--input-focus-border-color); 
        box-shadow: 0 0 0 3px var(--input-focus-shadow-color); 
    }
    .search-btn { 
        padding: 0.9rem 1.8rem; 
        background: linear-gradient(45deg, var(--button-bg-gradient-start), var(--button-bg-gradient-end)); 
        color: var(--button-text-color); 
        border: none; 
        border-radius: 12px; 
        font-size: 1rem; font-weight: 600; 
        cursor: pointer; 
        transition: all 0.3s ease; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .search-btn:hover { 
        transform: translateY(-2px); 
        box-shadow: 0 6px 15px var(--button-hover-shadow); 
    }
    .search-btn .fas { margin-right: 0.5rem;}

    @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    
    .api-key-info-banner { 
        background-color: var(--info-banner-bg); 
        color: var(--info-banner-text); 
        padding: 1rem 1.2rem; border-radius: 12px; margin-bottom: 1.5rem; 
        text-align: center; font-size: 0.9rem; 
        border: 1px solid var(--info-banner-border); 
        display: block; 
    }
    .api-key-info-banner a { color: var(--link-hover-color); font-weight: 600; text-decoration: underline; }
    
    .weather-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; animation: fadeIn 1s ease-out 0.4s both; }
    .city-name-container {
        display: flex;
        align-items: center;
        justify-content: center; 
        gap: 0.8rem; 
        margin-bottom: 1rem;
        flex-wrap: wrap; 
    }
    .city-name { font-size: 2rem; font-weight: 700; color: var(--text-color); margin: 0; flex-grow: 1; text-align: left;}

    .share-button { 
        background-color: var(--share-button-bg);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        display: inline-flex; 
        align-items: center;
        gap: 0.5rem;
    }
    .share-button:hover {
        background-color: var(--share-button-hover-bg);
        transform: translateY(-1px);
    }
    .share-button .fas, .share-button .far {
        margin-right: 0.3rem;
    }
    
    .current-weather-icon, .forecast-day-icon, .hourly-icon { 
        color: var(--text-color); 
        transition: color 0.3s ease; 
    }
    .current-weather-icon {
        font-size: var(--weather-icon-size);
        line-height: 1;
        margin: 1.2rem auto;
        display: block;
        text-align: center;
        animation: bounce 2.5s infinite;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
    }

    .donation-card {
    text-decoration: none; /* Enlève le soulignement du lien */
    color: var(--text-color); /* Utilise la couleur de texte de votre thème */
    }

    .main-weather-emoji {
    font-size: 130px; /* N'hésitez pas à ajuster cette taille */
    text-align: center;
    margin: 1.5rem auto;
    line-height: 1;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.15));
    animation: bounce 2.5s infinite; /* On réutilise votre animation existante */
    }
    .wind-marker-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    }

    .wind-marker-icon .arrow-svg {
    width: 40px;
    height: 40px;
    transition: transform 0.2s ease-out;
    }

    .wind-marker-icon .speed-label {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-top: -5px; /* Pour rapprocher le texte de la flèche */
    }
    .forecast-day-icon {
        font-size: var(--forecast-icon-size);
        line-height: 1;
        margin: 0.6rem auto 0.4rem; 
        display: block;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
    .hourly-icon-svg {
    width: 50px;
    height: 50px;
    margin: 0.5rem auto;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    }
    .daily-icon-svg {
    width: 65px;
    height: 65px;
    margin: 0.6rem auto;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.15));
    }
    .icon-color-sun { color: var(--icon-color-sun) !important; }
    .icon-color-moon { color: var(--icon-color-moon) !important; }
    .icon-color-cloud { color: var(--icon-color-cloud) !important; }
    .icon-color-rain { color: var(--icon-color-rain) !important; }
    .icon-color-snow { color: var(--icon-color-snow) !important; }
    .icon-color-thunderstorm { color: var(--icon-color-thunderstorm) !important; }
    .icon-color-fog { color: var(--icon-color-fog) !important; }
    @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
    
    .temperature { font-size: 4rem; font-weight: 700; margin-bottom: 0.5rem; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); color: var(--text-color); }
    .weather-desc { font-size: 1.25rem; margin-bottom: 1.5rem; opacity: 0.9; font-style: normal; font-weight: 400; text-transform: capitalize; color: var(--text-secondary-color); }
    .weather-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
    
    .aqi-uv-details .detail-item {
        flex: 1 1 100%; /* Prend toute la largeur */
        margin-bottom: 0;
        max-width: none;
        padding: 0.8rem;
        text-align: left; /* Aligne le texte à gauche à l'intérieur de chaque mini-carte */
        padding: 0.8rem;
    }
    .aqi-uv-details .detail-value {
        text-align: left; /* Aligner la valeur à gauche */
        font-size: 1.1rem; /* Assurez que la valeur reste lisible */
    }
    .aqi-uv-details .detail-label {
        justify-content: flex-start; /* Aligner les libellés à gauche avec l'icône */
        font-size: 0.8rem; /* Assurez que le label reste lisible */
    }
    .aqi-value.good { color: #2ecc71; }
    .aqi-value.fair { color: #f1c40f; }
    .aqi-value.moderate { color: #e67e22; }
    .aqi-value.poor { color: #e74c3c; }
    .aqi-value.very-poor { color: #9b59b6; } 

    .detail-item { background: var(--detail-item-bg-color); padding: 1rem; border-radius: 12px; text-align: center; transition: all 0.3s ease; }
    .detail-item:hover { background: var(--detail-item-hover-bg-color); transform: translateY(-2px) scale(1.02); }
    .detail-label { font-size: 0.9rem; opacity: 0.7; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 400; }
    .detail-label .fas, .detail-label .wi { font-size: 1em; opacity: 0.8; } 
    .detail-value { font-size: 1.25rem; font-weight: 600; color: var(--text-color); }
    .detail-value.small-text { font-size: 0.8rem; line-height: 1.3; } 
    .uv-pollen-card .card-body {
    padding-top: 0.5rem;
}

.card-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.section-title {
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    font-weight: 500;
}

.section-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    padding: 2px 6px;
    border-radius: 5px;
}

/* Classes de couleur pour les valeurs */
.value-color-low { background-color: rgba(46, 204, 113, 0.2); }
.value-color-moderate { background-color: rgba(241, 196, 15, 0.2); }
.value-color-high { background-color: rgba(230, 126, 34, 0.2); }
.value-color-very-high { background-color: rgba(231, 76, 60, 0.2); }
.value-color-extreme { background-color: rgba(142, 68, 173, 0.2); }

.card-section-divider {
    border: none;
    height: 1px;
    background-color: var(--card-border-color);
    margin: 0.5rem 0;
}

/* Style du dropdown pour les détails du pollen */
.pollen-details-dropdown {
    margin-top: 0.8rem;
}
.pollen-details-dropdown summary {
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary-color);
    list-style: none; /* Cache la flèche par défaut */
}
.pollen-details-dropdown summary::-webkit-details-marker { 
    display: none; /* Cache la flèche sur Chrome/Safari */
}
.pollen-details-dropdown summary::after {
    content: '▼'; /* Crée une flèche personnalisée */
    float: right;
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.pollen-details-dropdown[open] summary::after {
    transform: rotate(180deg);
}

#pollen-dropdown-content {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
}
.pollen-item {
    display: flex;
    justify-content: space-between;
}
    #aqiComponentsDetails {
        font-size: 0.65rem; /* Peut-être réduire encore un peu */
        line-height: 1.3;
        word-break: break-word; /* Très important pour les longues chaînes sans espace, comme la liste de composants */
        text-align: left; /* Assure que le texte débute bien à gauche dans le bloc */
        padding-left: 0rem; /* Un petit décalage si vous le centrez, ou 0 si aligné à gauche */
    }

    #pollenDetailsDropdown {
        margin-top: 0.8rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--card-border-color);
    }
    #pollenDetailsDropdown summary {
        cursor: pointer;
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--text-secondary-color);
        padding: 0.3rem 0;
        list-style: none; 
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #pollenDetailsDropdown summary::-webkit-details-marker { display: none; } 
    #pollenDetailsDropdown summary::marker { display: none; } 

    #pollenDetailsDropdown summary .arrow {
        display: inline-block;
        transition: transform 0.2s ease-in-out;
        font-size: 0.8em;
    }
    #pollenDetailsDropdown[open] summary .arrow {
        transform: rotate(180deg);
    }
    #pollenDetailsContainerInsideDropdown {
        padding-top: 0.5rem;
    }
    .pollen-detail-item {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
        padding: 0.2rem 0.4rem;
        border-radius: 6px;
    }
    .pollen-detail-item .pollen-type-name {
        font-weight: 500;
        margin-right: 0.5rem;
        opacity: 0.9;
    }
    .pollen-detail-item .pollen-level-text {
        font-weight: 400;
    }
    .pollen-value.tres-faible { color: var(--pollen-tres-faible); }
    .pollen-value.faible { color: var(--pollen-faible); }
    .pollen-value.modere { color: var(--pollen-modere); }
    .pollen-value.eleve { color: var(--pollen-eleve); }
    .pollen-value.tres-eleve { color: var(--pollen-tres-eleve); }

    .pollen-type-name { 
        font-size: 0.75em; 
        opacity: 0.7; 
        display: block; 
        margin-top: 0.25rem; 
        font-weight: 300;
        color: var(--text-secondary-color);
    }
    .forecast-title { font-size: 1.8rem; font-weight: 600; margin-bottom: 1.8rem; text-align: center; color: var(--text-color); }
    .forecast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.2rem; } 
    .forecast-day { background: var(--detail-item-bg-color); padding: 1rem 0.7rem; border-radius: 16px; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    .forecast-day:hover { background: var(--detail-item-hover-bg-color); transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
    .day-name { font-weight: 600; margin-bottom: 0.4rem; font-size: 1rem; color: var(--text-color); }
    .day-date { font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.5rem; font-weight: 300; }
    .day-temp { font-size: 1.15rem; font-weight: 600; color: var(--text-color); margin-bottom: 0.3rem; } 
    .day-temp-min { font-size: 0.85rem; opacity: 0.6; margin-left: 0.2rem; }
    .day-summary { 
        font-size: 0.8rem; 
        opacity: 0.8; 
        margin-top: 0.5rem; 
        margin-bottom: 0.5rem;
        line-height: 1.3;
        min-height: 2.6em; 
        max-height: 3.9em; 
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical;
    }
    .day-description { 
        font-size:0.75em; opacity:0.7; margin-top:0.5rem; text-transform: capitalize; font-weight: 300;
    }
    
    .day-extra-details {
        font-size: 0.75rem;
        opacity: 0.85; 
        margin-top: 0.6rem; 
        line-height: 1.4; 
        padding: 0 0.2rem; 
    }
    .day-extra-details div {
        display: flex;
        align-items: center;
        justify-content: flex-start; 
        gap: 0.3rem; 
        margin-bottom: 0.2rem; 
    }
    .day-extra-details .wi, .day-extra-details .fas { 
        font-size: 1em; 
        color: var(--link-color);
        width: 1.4em; 
        text-align: center;
        margin-right: 0.1rem;
    }
    .day-temp-periods { 
        font-size: 0.7rem;
        opacity: 0.7;
        margin-top: 0.4rem;
        line-height: 1.3;
    }
    .day-temp-periods span { margin: 0 3px; }


    body.dark-mode .day-extra-details .wi, body.dark-mode .day-extra-details .fas {
        color: var(--link-color); 
    }

    @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    
    .loading-message, .error-message { text-align: center; padding: 3rem; font-size: 1.1rem; background: var(--card-bg-gradient-start); border-radius: 16px; margin: 2rem 0; font-weight: 400; }
    .spinner { border: 4px solid rgba(0,0,0, 0.1); border-radius: 50%; border-top-color: var(--spinner-color); width: 40px; height: 40px; animation: spin 0.8s linear infinite; margin: 0 auto 1.5rem auto; }
    body.dark-mode .spinner { border-color: rgba(255,255,255,0.1); border-top-color: var(--spinner-color); }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    
    .error-message { background: var(--error-message-bg); border: 1px solid var(--error-message-border); color: var(--error-message-text); }
    .error-message .fas { margin-right: 0.6rem; font-size: 1.1em; }
    
    .weather-watch-section { animation: slideUp 1s ease-out 1s both; }
    .weather-watch-item { 
    background: var(--detail-item-bg-color); 
    padding: 1.2rem; 
    border-radius: 16px; 
    margin-bottom: 1rem; 
    border-left-width: 6px; /* Un peu plus épais pour la couleur */
    border-left-style: solid;
    border-left-color: var(--text-secondary-color); /* Couleur par défaut si aucune classe de niveau */
    transition: all 0.3s ease; 
    }
    .weather-watch-item:hover { 
    background: var(--detail-item-hover-bg-color); 
    transform: translateX(3px); 
    }
    
    /* Nouveaux styles pour les niveaux d'alerte */
.weather-watch-item.alert-level-info { /* Bleu - Information */
    border-left-color: var(--alert-color-blue);
    background: rgba(41, 128, 185, 0.07); /* Légère teinte de fond */
}
body.dark-mode .weather-watch-item.alert-level-info { background: rgba(99, 179, 237, 0.12); }
.weather-watch-item.alert-level-info .weather-watch-title .fas { color: var(--alert-color-blue); }

.weather-watch-item.alert-level-yellow { /* Jaune - Prudence */
    border-left-color: var(--alert-color-yellow);
    background: rgba(247, 202, 4, 0.185);
}
body.dark-mode .weather-watch-item.alert-level-yellow { background: rgba(253, 199, 4, 0.274); }
.weather-watch-item.alert-level-yellow .weather-watch-title .fas { color: var(--alert-color-yellow); }

.weather-watch-item.alert-level-orange { /* Orange - Vigilance importante */
    border-left-color: var(--alert-color-orange);
    background: rgba(252, 102, 2, 0.418);
}
body.dark-mode .weather-watch-item.alert-level-orange { background: rgba(237, 137, 54, 0.12); }
.weather-watch-item.alert-level-orange .weather-watch-title .fas { color: var(--alert-color-orange); }

.weather-watch-item.alert-level-red { /* Rouge - Alerte, danger */
    border-left-color: var(--alert-color-red); 
    background: rgba(192, 57, 43, 0.07);
}
body.dark-mode .weather-watch-item.alert-level-red { background: rgba(229, 62, 62, 0.12); }
.weather-watch-item.alert-level-red .weather-watch-title .fas { color: var(--alert-color-red); }

.weather-watch-item.alert-level-violet { /* Violet - Danger extrême/Urgence */
    border-left-color: var(--alert-color-violet);
    background: rgba(142, 68, 173, 0.07);
}
body.dark-mode .weather-watch-item.alert-level-violet { background: rgba(159, 122, 234, 0.12); }
.weather-watch-item.alert-level-violet .weather-watch-title .fas { color: var(--alert-color-violet); }

/* Style pour le message "pas de vigilance" */
.no-significant-weather { 
    text-align: center; 
    font-size: 1rem; 
    opacity: 0.8; 
    padding: 1.2rem; 
    border-left: 6px solid var(--alert-color-green); /* Bordure verte */
    background: rgba(39, 174, 96, 0.05); /* Légère teinte de fond verte */
}
body.dark-mode .no-significant-weather { background: rgba(72, 187, 120, 0.1); }
    .no-significant-weather .fas { margin-right: 0.5rem; color: var(--alert-color-green); }

    /* Styles pour la bannière globale en haut */
    .global-alert-banner.alert-level-green { background-color: rgba(39, 174, 96, 0.85); } /* Vert */
    .global-alert-banner.alert-level-blue { background-color: rgba(52, 152, 219, 0.85); } /* Bleu */
    .global-alert-banner.alert-level-yellow { background-color: rgba(241, 196, 15, 0.85); } /* Jaune */
    .global-alert-banner.alert-level-orange { background-color: rgba(255, 119, 0, 0.85); } /* Orange */
    .global-alert-banner.alert-level-red { background-color: rgba(231, 76, 60, 0.85); } /* Rouge */
    .global-alert-banner.alert-level-violet { background-color: rgba(142, 68, 173, 0.85); } /* Violet */
    .weather-watch-item.official-alert { 
        border-left-color: var(--alert-color-red); 
        background: rgba(231, 76, 60, 0.08);
    }
    body.dark-mode .weather-watch-item.official-alert { background: rgba(197, 48, 48, 0.15); }
    .weather-watch-item.official-alert:hover { background: rgba(231, 76, 60, 0.12); }
    body.dark-mode .weather-watch-item.official-alert:hover { background: rgba(197, 48, 48, 0.2); }
    .weather-watch-item.official-alert .weather-watch-title .fas { color: var(--alert-color-red); }

    .weather-watch-item.thunderstorm-alert { 
        border-left-color: var(--alert-color-orange); 
        background: rgba(255, 103, 2, 0.08);
    }
    body.dark-mode .weather-watch-item.thunderstorm-alert { background: rgba(237, 137, 54, 0.15); }
    .weather-watch-item.thunderstorm-alert:hover { background: rgba(211, 84, 0, 0.12); }
    body.dark-mode .weather-watch-item.thunderstorm-alert:hover { background: rgba(237, 137, 54, 0.2); }
    .weather-watch-item.thunderstorm-alert .weather-watch-title .fas { color: var(--alert-color-orange); }

    .weather-watch-item.wind-alert {
        border-left-color: var(--alert-color-blue);
        background: rgba(41, 128, 185, 0.08);
    }
    body.dark-mode .weather-watch-item.wind-alert { background: rgba(99, 179, 237, 0.15); }
    .weather-watch-item.wind-alert:hover { background: rgba(41, 128, 185, 0.12); }
    body.dark-mode .weather-watch-item.wind-alert:hover { background: rgba(99, 179, 237, 0.2); }
    .weather-watch-item.wind-alert .weather-watch-title .fas { color: var(--alert-color-blue); }
    
    .weather-watch-item.phenomenon .weather-watch-title .fas { color: var(--link-color); } 

    .weather-watch-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.6rem; }
    .weather-watch-title .fas { font-size: 1.2em; }
    .weather-watch-description { font-size: 0.9rem; line-height: 1.5; opacity: 0.85; }
    .weather-watch-description strong { font-weight: 600; color: var(--text-color); }
    .weather-watch-description .alert-details { font-size: 0.8rem; opacity: 0.7; margin-top: 0.5rem; }
    .no-significant-weather { text-align: center; font-size: 1rem; opacity: 0.8; padding: 1.2rem; }
    .no-significant-weather .fas { margin-right: 0.5rem; color: var(--alert-color-green); }
    body.dark-mode .no-significant-weather .fas { color: var(--alert-color-green); }
    
    .charts-section { animation: slideUp 1s ease-out 1.2s both; }
    .features-section { animation: slideUp 1s ease-out 1.4s both; }
    .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.8rem; margin-top: 1.5rem; }
    .chart-container { background: var(--detail-item-bg-color); padding: 1.5rem; border-radius: 16px; position: relative; overflow: hidden; transition: all 0.3s ease; }
    .chart-container:hover { background: var(--detail-item-hover-bg-color); }
    .chart-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 1.2rem; text-align: center; }
    .chart-canvas-container { 
        width: 100%; 
        height: 200px; 
        position: relative;
    }
    
    .humidity-chart { display: flex; align-items: center; justify-content: center; height: 100%; position: relative; }
    .humidity-circle { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(from 0deg at 50% 50%, var(--link-color) 0deg, var(--link-color) var(--humidity-angle, 0deg), rgba(255,255,255,0.05) var(--humidity-angle, 0deg), rgba(255,255,255,0.05) 360deg); display: flex; align-items: center; justify-content: center; position: relative; transition: background 0.5s ease-out; }
    body.dark-mode .humidity-circle { background: conic-gradient(from 0deg at 50% 50%, var(--link-color) 0deg, var(--link-color) var(--humidity-angle, 0deg), rgba(0,0,0,0.15) var(--humidity-angle, 0deg), rgba(0,0,0,0.15) 360deg); }
    .humidity-inner { width: 80px; height: 80px; background: var(--card-bg-gradient-start); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; }
    .humidity-value { font-size: 1.5rem; font-weight: 700; }
    .humidity-label { font-size: 0.8rem; opacity: 0.8; margin-top: 0.2rem; }
    
    .wind-chart { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; position: relative; }
    .wind-compass { width: 100px; height: 100px; border: 2px solid var(--card-border-color); border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
    .wind-arrow {
        width: 5px;
        height: 45px;
        background: linear-gradient(to top, var(--pollen-faible), #27ae60);
        position: absolute;
        left: 50%; 
        top: 50%;   
        transform-origin: 50% calc(100% - 8px); 
        border-radius: 2.5px 2.5px 0 0;
        transition: transform 0.5s ease-out;
    }
    body.dark-mode .wind-arrow { background: linear-gradient(to top, var(--pollen-faible), #38a169); }
    .wind-arrow::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: -8px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #27ae60; }
    body.dark-mode .wind-arrow::after { border-bottom-color: #38a169; }
    .wind-speed { font-size: 1.1rem; font-weight: 600; text-align: center; margin-top: 0; }
    
    .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; } 
    .feature-card { background: var(--detail-item-bg-color); padding: 1.5rem; border-radius: 16px; text-align: center; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; }
    .feature-card:hover { transform: translateY(-5px); background: var(--detail-item-hover-bg-color); box-shadow: 0 8px 20px var(--card-shadow-color); }
    .feature-card[role="button"]:focus {
        outline: 2px solid var(--input-focus-border-color); 
        outline-offset: 2px;
        box-shadow: 0 0 0 4px var(--input-focus-shadow-color); 
    }

    .site-footer {
    background-color: var(--footer-bg-color);
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    color: var(--footer-text-color);
    padding: 2rem 1rem;
    text-align: center;
    margin-top: 2.5rem; 
    border-top: 1px solid var(--card-border-color); 
    font-size: 0.9rem;
    transition: background-color 0.4s ease, color 0.4s ease;
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; 
}
.copyright-text {
    opacity: 0.8;
}

.donation-button {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background-color: #0070ba; /* Couleur bleue de PayPal */
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
    margin-bottom: 1rem; /* Espace en dessous */
}

.donation-button:hover {
    background-color: #005ea6;
}

.donation-button .fas {
    margin-right: 0.5rem;
}
.social-media-links {
    display: flex;
    gap: 1.5rem; 
}
.social-media-links a {
    color: var(--footer-icon-color);
    font-size: 1.5rem; 
    transition: color 0.3s ease, transform 0.3s ease;
}
.social-media-links a:hover {
    color: var(--footer-icon-hover-color);
    transform: scale(1.1); 
}

/* Styles responsives pour le pied de page */
@media (max-width: 768px) { 
    .site-footer { padding: 1.5rem 1rem; font-size: 0.85rem; }
    .social-media-links a { font-size: 1.3rem; }
}
@media (max-width: 480px) {
    /* C'est ici que vous devriez ajouter ou ajuster ce bloc */
    .weather-card-main {
        padding: 1rem; /* Padding encore plus réduit sur les très petits écrans */
        margin-bottom: 1rem; /* Espacement minimal */
    }

    .main-weather-emoji {
        font-size: 100px; /* Taille minimale pour l'emoji */
        margin: 0.5rem auto;
    }
    .temperature {
        font-size: 2.5rem; /* Taille minimale pour la température */
        margin-bottom: 0.1rem;
    }
    #feelsLikeTemp {
        font-size: 0.9rem; /* Taille minimale pour le "Ressenti" */
        margin-bottom: 0.3rem;
    }
    .weather-desc {
        font-size: 0.9rem; /* Taille minimale pour la description */
        margin-bottom: 0.5rem;
    }
    .weather-details {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Force peut-être 2 colonnes sur les plus petits */
        gap: 0.4rem;
    }
    .detail-item {
        padding: 0.6rem; /* Réduire le padding des petits blocs de détails */
        font-size: 0.8em; /* Réduire la taille de police générale des items */
        line-height: 1.2; /* Assurer une bonne lecture si le texte est petit */
    }
    .detail-label {
        font-size: 0.7rem; /* Réduire encore la taille du label */
        margin-bottom: 0.2rem;
        gap: 0.2rem;
    }
    .detail-value {
        font-size: 0.8rem;
    }
    .site-footer { padding: 1rem 0.8rem; font-size: 0.8rem; }
    .social-media-links { gap: 1rem; }
    .social-media-links a { font-size: 1.2rem; }
}

    .feature-icon { font-size: 2.2rem; margin-bottom: 0.8rem; animation: bounce 2s infinite 0.5s; color: var(--link-color); } 
    .feature-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.6rem; } 
    .feature-desc { opacity: 0.8; line-height: 1.4; font-weight: 300; font-size: 0.85rem; margin-bottom: 0.8rem;} 
    
    .unit-toggle-group { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
    .unit-toggle-group label { font-size: 0.8rem; opacity: 0.9;}

    .toggle-switch { display: inline-block; width: 50px; height: 26px; background: var(--toggle-bg); border-radius: 13px; position: relative; transition: all 0.3s ease; }
    .toggle-switch.small { width: 40px; height: 20px; border-radius: 10px;} 
    .toggle-switch.small::after { width: 16px; height: 16px; top: 2px; left: 2px;}
    .toggle-switch.small.active::after { transform: translateX(20px); }

    .toggle-switch.active { background: var(--toggle-active-bg); }
    .toggle-switch::after { content: ''; position: absolute; width: 22px; height: 22px; background: var(--toggle-knob-bg); border-radius: 50%; top: 2px; left: 2px; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
    .toggle-switch.active::after { transform: translateX(24px); }
    
    .global-alert-banner {
        position: fixed;
        top: 0; 
        left: 0;
        width: 100%;
        padding: 0.75rem 1rem;
        z-index: 10001; 
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        transition: background-color 0.3s ease, color 0.3s ease, opacity 0.5s ease, transform 0.5s ease;
        opacity: 0; 
        transform: translateY(-100%); 
        font-weight: 500; 
        font-size: 0.9rem;
        color: white; 
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .global-alert-banner.show {
        opacity: 1;
        transform: translateY(0);
    }
    .global-alert-banner.alert-green {
        background-color: rgba(46, 204, 113, 0.85); 
    }
    .global-alert-banner.alert-orange {
        background-color: rgba(255, 121, 4, 0.85); 
    }
    .global-alert-banner.alert-red {
        background-color: rgba(231, 76, 60, 0.85);     
    }   
    .global-alert-banner .alert-icon-placeholder { 
        margin-right: 0.75rem;
        font-size: 1.1em;
    }
    .global-alert-banner.blinking .alert-icon-placeholder {
        animation: blinkWarning 1.2s infinite alternate;
    }
    
    @keyframes blinkWarning {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.1); }
    }


    .custom-notification-banner {
        position: fixed;
        top: 60px; 
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--card-bg-color);
        color: var(--text-color);
        padding: 1rem 1.5rem;
        border-radius: 12px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        z-index: 10000;
        display: flex;
        align-items: center;
        gap: 1rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease, top 0.5s ease;
    }
    .custom-notification-banner.show {
        opacity: 1;
        visibility: visible;
        top: 70px; 
    }
    .custom-notification-banner .icon {
        font-size: 1.4rem;
    }
    .custom-notification-banner .close-btn {
        background: none;
        border: none;
        color: var(--text-color);
        font-size: 1.1rem;
        cursor: pointer;
        padding: 0.3rem;
        line-height: 1;
    }

    .weather-character-section {
    text-align: center;
    animation: fadeIn 1s ease-out 0.6s both;
}
#weatherCharacterContainer {
    width: 300px;
  height: 400px;
  /* On réduit la marge supérieure pour un meilleur agencement */
  margin: 2rem auto; 
  position: relative;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    padding: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#weatherCharacterContainer:hover {
    transform: scale(1.05);
}

.character-speech-bubble {
    position: absolute;
    top: 45%; /* Remonté un peu */
    left: 100%; /* Totalement à droite du conteneur du personnage */
    transform: translateY(-50%); /* Centré verticalement */
    margin-left: 20px; /* Espace pour ne pas coller le personnage */
    background: white;
    border: 2px solid #3498db;
    border-radius: 15px;
    padding: 10px 15px;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
    max-width: 220px;
    text-align: left; /* Texte aligné à gauche pour une meilleure lisibilité */
}

/* MODIFICATION: Flèche pointant vers la gauche */
.character-speech-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%; /* Positionné sur le bord GAUCHE de la bulle */
    transform: translateY(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: transparent white transparent transparent; /* Crée la flèche */
}

.character-speech-bubble.show {
    opacity: 1;
    /* top est maintenant géré par le positionnement vertical */
}

body.dark-mode .character-speech-bubble {
    background: var(--card-bg-gradient-start);
    color: var(--text-color);
    border-color: var(--link-color);
}

/* MODIFICATION: Couleur de la flèche en mode sombre */
body.dark-mode .character-speech-bubble::after {
    border-right-color: var(--card-bg-gradient-start);
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

#weatherCharacterContainer svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Styles améliorés pour la tête */
#character-head {
    fill: #FDBCB4;
    stroke: #CD853F;
    stroke-width: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Yeux expressifs avec clignement */
#character-eyes ellipse {
    fill: white;
    stroke: #333;
    stroke-width: 1;
}

#character-eyes circle {
    fill: #2c3e50;
    animation: eyeBlink 4s infinite ease-in-out;
}

@keyframes eyeBlink {
    0%, 95%, 100% { transform: scaleY(1); }
    97% { transform: scaleY(0.1); }
}

/* Expressions faciales améliorées */
#character-mouth-neutral, #character-mouth-happy, #character-mouth-sad {
    stroke: #8B4513;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

#character-mouth-happy {
    stroke: #e74c3c;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

#character-mouth-sad {
    stroke: #3498db;
}

/* Corps amélioré */
#character-torso {
    fill: #3498db;
    stroke: #2980b9;
    stroke-width: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Membres avec ombres */
#character-arm-left, #character-arm-right, #character-leg-left, #character-leg-right {
    stroke: #FDBCB4;
    stroke-width: 8;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/* Vêtements stylés avec animations */
.clothing, .accessory {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

#character-tshirt {
    fill: #e74c3c;
    stroke: #c0392b;
    stroke-width: 1.5;
}

#character-shorts {
    fill: #f39c12;
    stroke: #e67e22;
    stroke-width: 1.5;
}

#character-raincoat {
    fill: #f1c40f;
    stroke: #f39c12;
    stroke-width: 2;
    animation: raincoatSway 2s ease-in-out infinite alternate;
}

@keyframes raincoatSway {
    0% { transform: rotate(-1deg); }
    100% { transform: rotate(1deg); }
}

#character-wintercoat {
    fill: #2980b9;
    stroke: #1f4e79;
    stroke-width: 2;
}

#character-beanie {
    fill: #e74c3c;
    stroke: #c0392b;
    stroke-width: 2;
    animation: beanieWobble 3s ease-in-out infinite;
}

@keyframes beanieWobble {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

#character-scarf {
    fill: #e67e22;
    stroke: #d35400;
    stroke-width: 1.5;
    animation: scarfWave 2.5s ease-in-out infinite;
}

@keyframes scarfWave {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(3deg); }
}

#character-cap {
    fill: #3498db;
    stroke: #2980b9;
    stroke-width: 2;
}

#character-sunglasses {
    fill: #2c3e50;
    animation: sunglassesGlint 3s ease-in-out infinite;
}

@keyframes sunglassesGlint {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.7; }
}

/* Animation du parapluie améliorée */
#character-umbrella {
    animation: umbrellaFloat 3s ease-in-out infinite alternate;
    transform-origin: 45px 78px;
}

@keyframes umbrellaFloat {
    0% { 
        transform: translateX(15px) translateY(-25px) rotate(-3deg); 
    }
    100% { 
        transform: translateX(15px) translateY(-30px) rotate(3deg); 
    }
}


    .hourly-forecast-section {
        animation: slideUp 1s ease-out 0.4s both;
    }
    .hourly-forecast-scroll {
        display: flex;
        overflow-x: auto;
        padding-bottom: 1rem; 
        gap: 0.8rem; 
    }
    .hourly-item {
        flex: 0 0 110px; 
        background: var(--detail-item-bg-color);
        padding: 0.8rem 0.5rem; 
        border-radius: 12px;
        text-align: center;
        transition: all 0.3s ease;
        border: 1px solid transparent; 
    }
    .hourly-item:hover {
        background: var(--detail-item-hover-bg-color);
        transform: translateY(-3px);
        border-color: var(--card-hover-border-color);
    }
    .hourly-time {
        font-size: 0.85rem; 
        font-weight: 600;
        margin-bottom: 0.2rem;
    }
    .hourly-temp {
        font-size: 1.1rem; 
        font-weight: 600;
        margin: 0.1rem 0;
    }
    .hourly-feels-like, .hourly-pop, .hourly-dew-point, .hourly-wind-gust, .hourly-visibility { 
        font-size: 0.7rem;
        opacity: 0.7;
        margin-bottom: 0.1rem;
        line-height: 1.2;
    }
    .hourly-desc {
        font-size: 0.7rem;
        opacity: 0.7;
        text-transform: capitalize;
        line-height: 1.2; 
        margin-top: 0.2rem;
    }

    .map-section { 
        animation: slideUp 1s ease-out 1.6s both; 
    }
    #weatherMap {
        height: 800px; 
        border-radius: 15px;
        border: 1px solid var(--card-border-color);         
        background-color: var(--detail-item-bg-color); 
    }
    .map-controls {
        text-align: center;
        margin-top: 1.2rem; 
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem; 
        justify-content: center;
    }
    .map-layer-btn {
        padding: 0.7rem 1.4rem; 
        background: var(--detail-item-bg-color);
        color: var(--text-color);
        border: 1px solid var(--input-border-color);
        border-radius: 10px; 
        font-size: 0.9rem; 
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .map-layer-btn:hover {
        background: var(--link-hover-color); 
        color: white;
        border-color: var(--link-hover-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .map-layer-btn.active {
        background: var(--link-color);
        color: white;
        border-color: var(--link-color);
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset; 
    }
    body.dark-mode .map-layer-btn {
        background: var(--detail-item-bg-color);
        color: var(--text-color);
        border: 1px solid var(--input-border-color);
    }
    body.dark-mode .map-layer-btn:hover {
        background: var(--link-hover-color);
        color: var(--button-text-color); 
        border-color: var(--link-hover-color);
    }
    body.dark-mode .map-layer-btn.active {
        background: var(--link-color);
        color: var(--button-text-color);
        border-color: var(--link-color);
    }

    .minutely-forecast-section {
        animation: slideUp 1s ease-out 0.5s both; 
    }
    .minutely-forecast-content {
        text-align: center;
        font-size: 1rem;
        line-height: 1.6;
    }
    .minutely-forecast-content .precipitation-summary {
        font-weight: 600;
        margin-bottom: 1rem;
        font-size: 1.1rem;
    }
    .minutely-chart-wrapper { 
        position: relative;
        width: 100%;
        padding-bottom: 20px; 
    }
    .minutely-chart-container {
        width: 100%;
        height: 120px;
        background-color: rgba(0,0,0,0.05); 
        border-radius: 10px;
        padding: 10px 5px 0px 5px; 
        display: flex;
        align-items: flex-end; 
        justify-content: space-around; 
        gap: 1px; 
        overflow: hidden; 
    }
    body.dark-mode .minutely-chart-container {
        background-color: rgba(255,255,255,0.08);
    }
    .minutely-bar {
        flex-grow: 1; 
        background-color: var(--icon-color-rain); 
        border-radius: 3px 3px 0 0; 
        transition: height 0.3s ease-out;
        min-width: 2px; 
        position: relative; 
    }
    .minutely-time-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        color: var(--text-secondary-color);
        padding: 0 5px; 
        margin-top: 5px;
    }
    .minutely-time-labels span {
        flex: 1;
        text-align: center;
    }
    .minutely-time-labels span:first-child { text-align: left; }
    .minutely-time-labels span:last-child { text-align: right; }

    .no-precipitation-message {
        color: var(--text-secondary-color);
        font-style: italic;
    }
    .comfort-chart-section {
    background: var(--detail-item-bg-color);
    padding: 1.2rem;
    border-radius: 12px;
    margin: 1.5rem 0;
    border: 1px solid var(--card-border-color);
    transition: all 0.3s ease;
}

.comfort-chart-section:hover {
    background: var(--detail-item-hover-bg-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.comfort-chart-title {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-color);
    text-align: center;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.comfort-bars-container {
    display: flex;
    align-items: end;
    justify-content: space-between;
    height: 120px;
    gap: 2px;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
    padding-top: 0.5rem;
}

body.dark-mode .comfort-bars-container {
    background: rgba(255,255,255,0.05);
}

.comfort-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.comfort-bar-fill {
    width: 100%;
    border-radius: 3px 3px 0 0;
    margin-bottom: 2px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.comfort-bar-fill:hover {
    transform: scaleY(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.comfort-bar-time {
    font-size: 0.7rem;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    color: var(--text-secondary-color);
    margin-top: 2px;
}

.comfort-bar-temp {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

.comfort-bar-fill:hover .comfort-bar-temp {
    opacity: 1;
}

.comfort-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    opacity: 0.8;
    padding: 0 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.comfort-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.comfort-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Couleurs pour les niveaux de confort */
.comfort-extreme { background-color: #8e44ad; } /* Violet - Extrême */
.comfort-poor { background-color: #e74c3c; }    /* Rouge - Difficile */
.comfort-acceptable { background-color: #ff7700; } /* Orange - Acceptable */
.comfort-comfortable { background-color: #f3dd12; } /* Jaune - Agréable */
.comfort-very-comfortable { background-color: #0af115; } /* Vert clair - Très agréable */
.comfort-perfect { background-color: #27ae60; }  /* Vert foncé - Parfait */

/* Animation d'apparition */
.comfort-chart-section {
    opacity: 0;
    transform: translateY(20px);
    animation: comfortChartAppear 0.6s ease-out forwards;
}

@keyframes comfortChartAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .comfort-chart-section {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .comfort-bars-container {
        height: 90px;
        gap: 1px;
    }
    
    .comfort-chart-title {
        font-size: 1rem;
    }
    
    .comfort-legend {
        font-size: 0.65rem;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .comfort-bars-container {
        height: 80px;
    }
    
    .comfort-bar-time {
        font-size: 0.6rem;
    }
    
    .comfort-legend {
        font-size: 0.6rem;
    }
}


    @media (max-width: 768px) { 
        .global-alert-banner { padding: 0.6rem 1rem; font-size: 0.8rem; }
        .global-alert-banner .alert-icon-placeholder { font-size: 1em; }
        .custom-notification-banner { top: 55px; }
        .custom-notification-banner.show { top: 65px; }

        .container { padding: 1rem; width: 100%; margin-top: 1rem; }
        .logo { font-size: 2.5rem; } 
        .subtitle { font-size: 1rem; } 
        .search-container { flex-direction: column; gap: 0.8rem; } 
        .search-input, .search-btn { font-size: 0.9rem; padding: 0.8rem 1rem; } 
        .weather-grid { gap: 1.5rem; } 
        .city-name { font-size: 1.6rem; } 
        .temperature { font-size: 3rem; } 
        .weather-desc { font-size: 1.1rem; } 
        .forecast-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.8rem; } 
        .forecast-day { padding: 1rem 0.6rem; border-radius: 12px; } 
        .day-name { font-size: 0.9rem; } 
        .day-temp { font-size: 1.1rem; } 
        .charts-grid { grid-template-columns: 1fr; gap: 1.5rem; } 
        .features-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } 
        .search-section, .weather-card-main, .minutely-forecast-section, .hourly-forecast-section, .forecast-section, .alerts-section, .weather-watch-section, .charts-section, .features-section, .weather-character-section, .map-section { padding: 1.5rem; margin-bottom: 1.8rem; border-radius: 16px; } 
        .chart-canvas-container { height: 180px; }
        .aqi-uv-details {
        flex-direction: column; /* Force l'empilement vertical de AQI et UV sur les très petits écrans */
        gap: 0.8rem; /* Ajoute un espacement vertical entre les deux blocs empilés */
        /* Retirez les autres flex-related properties si elles sont en conflit, comme justify-content */
        padding-top: 0.8rem; /* Ajustez ce padding si le trait de séparation semble trop proche du haut */
    }
        .weather-details { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.8rem; } 
        #weatherCharacterContainer { width: 100px; height: 180px; }
        .hourly-item { flex-basis: 100px; } 
        #weatherMap { height: 350px; }
        .map-layer-btn { padding: 0.6rem 1rem; font-size: 0.8rem;}
        .minutely-forecast-section { padding: 1.2rem; }
        .minutely-forecast-content { font-size: 0.95rem; }
        .minutely-chart-container { height: 70px; }
    }
    @media (max-width: 480px) { 
        .global-alert-banner { padding: 0.5rem 0.8rem; font-size: 0.75rem; }
        .custom-notification-banner { top: 50px; }
        .custom-notification-banner.show { top: 60px; }
        .aqi-uv-details .detail-item .detail-label {
        justify-content: flex-start; /* Aligne l'icône et le label à gauche */
    }
        .aqi-uv-details .detail-item .detail-value {
        text-align: left; /* Aligne la valeur à gauche */
    }
        .container {
        padding: 0.5rem; /* Réduit le padding sur les bords pour laisser un peu d'espace */        
        width: 100%; /* S'assure qu'il prend toute la largeur */
        }
        .aqi-uv-details {
        display: flex; /* Assurez-vous que c'est bien flex */
        flex-direction: column; /* Force l'empilement vertical sur mobile */
        gap: 1rem; /* AJOUTEZ UN ESPACEMENT ENTRE LES ÉLÉMENTS EMPILÉS */
        /* padding-top: 0.8rem; ou ajustez si besoin pour le trait de séparation */
        }
        .logo { font-size: 2.2rem; } 
        .subtitle { font-size: 0.9rem; } 
        .city-name { font-size: 1.4rem; } 
        .temperature { font-size: 2rem; } 
        .forecast-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } 
        .day-name { font-size: 0.85rem; } 
        .day-temp { font-size: 1rem; } 
        .search-section, .weather-card-main, .minutely-forecast-section, .hourly-forecast-section, .forecast-section, .weather-watch-section, .charts-section, .features-section, .weather-character-section, .map-section { padding: 1.2rem; border-radius: 12px; }
        .detail-item { padding: 0.8rem; }
        .custom-notification-banner { width: 95%; padding: 0.8rem 1rem; }
        .weather-details { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } 
        #weatherCharacterContainer { width: 90px; height: 160px; }
        .hourly-item { flex-basis: 90px; } 
        .day-extra-details { font-size: 0.7rem; } 
        .day-extra-details .wi { font-size: 1em; }
        .features-grid { grid-template-columns: 1fr; } 
        #weatherMap { height: 300px; }
        .map-controls { flex-direction: column; }
        .map-layer-btn { width: 100%; }
        .minutely-forecast-section { padding: 1rem; }
        .minutely-forecast-content { font-size: 0.9rem; }
        .minutely-chart-container { height: 60px; }
    }
    .weather-advice-text {
    font-size: 0.9rem;
    color: var(--text-color); /* Utilise une couleur d'accentuation */
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    background-color: rgba(52, 152, 219, 0.08); /* Fond très léger basé sur la couleur du lien (mode clair) */
    border-left: 4px solid var(--text-secondary-color);
    border-radius: 0 8px 8px 0; /* Arrondi d'un côté */
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0; /* Caché par défaut, sera animé à l'apparition */
    transform: translateY(10px); /* Légèrement décalé pour l'animation */
    }

    body.dark-mode .weather-advice-text {
    background-color: rgba(99, 179, 237, 0.12); /* Fond léger pour le mode sombre */
    border-left-color: var(--text-secondary-color);
    color: var(--text-color);
    }

    .weather-advice-text.visible { /* Classe pour animer l'apparition */
    opacity: 1;
    transform: translateY(0);
    }

    .weather-advice-text .fas { /* Si vous ajoutez une icône FontAwesome avant le texte */
    margin-right: 0.5em;
    opacity: 0.9;
    }
    /* Indicateur de fraîcheur des données */
    .last-updated-timestamp {
    font-size: 0.8rem; /* Taille de police discrète */
    color: var(--text-secondary-color); /* Utilise votre variable de thème pour le texte secondaire */
    opacity: 0.85; /* Légère transparence */
    /* margin-top: -0.8rem; a été mis en style inline, vous pouvez le déplacer ici */
    /* margin-bottom: 0.5rem; a été mis en style inline, vous pouvez le déplacer ici */
    /* text-align: center; a été mis en style inline, vous pouvez le déplacer ici */
    transition: opacity 0.5s ease-in-out; /* Pour une apparition douce */
    }

    /* L'icône d'horloge (si vous utilisez celle de Font Awesome comme suggéré) */
    .last-updated-timestamp .fas.fa-clock {
    margin-right: 0.3em;
    }
    #pwaInstallBanner {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#pwaInstallBanner span {
    color: var(--text-color); /* Assure la lisibilité */
}

#pwaInstallButton {
    /* Les styles de .search-btn sont déjà appliqués, mais vous pouvez les surcharger ici si besoin */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
body.dark-mode #pwaInstallBanner {
    background-color: var(--card-bg-gradient-start, rgba(45, 55, 72, 0.85));
    color: var(--text-color, #e2e8f0);
    border-top: 1px solid var(--card-border-color, rgba(74, 85, 104, 0.7));
}
body.dark-mode #pwaInstallBanner span {
    color: var(--text-color);
}
body.dark-mode #pwaInstallButton {
     background: var(--button-bg-gradient-start, #e74c3c); /* Conserver un bouton d'action visible */
     color: var(--button-text-color, white);
}
body.dark-mode #pwaDismissButton {
    color: var(--text-secondary-color, #a0aec0);
}
/* Style par défaut pour les grands écrans (ordinateurs) */
.iframe-responsive-container {
    max-width: 1800px;
    margin: 20px auto;
    position: relative;
    /* NOTE: Votre valeur de 30% est conservée, mais elle est très peu haute. 
       Essayez 50% ou 60% ici si vous voulez une carte plus haute sur ordinateur aussi. */
    padding-bottom: 50%; 
    height: 0;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid var(--card-border-color);
}

/* Styles pour les tablettes (écrans jusqu'à 768px de large) */
@media (max-width: 768px) {
    .iframe-responsive-container {
        max-width: 90%; 
        padding-bottom: 85%; /* On la rend beaucoup plus haute pour les tablettes */
    }
}

/* Styles pour les téléphones (écrans jusqu'à 480px de large) */
@media (max-width: 480px) {
    .iframe-responsive-container {
        max-width: 95%; 
        padding-bottom: 100%; /* Ratio carré (1:1), idéal pour une vue verticale */
    }
}
.map-disclaimer {
    max-width: 800px; /* Pour que le texte ne soit pas trop étiré sur grand écran */
    margin: 0 auto 1.5rem auto; /* Centré, avec une marge en bas pour espacer de la carte */
    padding: 0.75rem 1rem;
    background-color: rgba(243, 202, 18, 0.08); /* Légère teinte jaune/info, basée sur vos variables */
    border-left: 4px solid var(--info-banner-border, #f39c12);
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary-color);
}
.map-update-info {
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
    color: var(--text-secondary-color);
    margin-bottom: 1rem; /* Espace avant la carte */
}

.map-disclaimer i {
    margin-right: 0.5rem;
    color: var(--info-banner-border, #f39c12);
}

/* Apparence en mode sombre */
body.dark-mode .map-disclaimer {
    background-color: rgba(214, 158, 46, 0.15);
    color: var(--text-secondary-color);
}.weather-card-main {
    transition: background 0.8s ease-in-out, border-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Temps clair / Ensoleillé */
.weather-card--sunny {
    /* On définit deux couches d'arrière-plan : le reflet par-dessus le fond coloré */
    background-image: 
        /* 1. Le reflet lumineux (un dégradé de blanc transparent) */
        linear-gradient(
            100deg, /* Angle du reflet */
            transparent 30%, 
            rgba(255, 255, 255, 0.4) 50%, 
            transparent 70%
        ),
        /* 2. Le fond jaune original */
        linear-gradient(145deg, rgba(255, 214, 10, 0.25), rgba(255, 165, 0, 0.1));

    /* On rend le fond beaucoup plus large que la carte elle-même */
    background-size: 300% 100%;
    background-repeat: no-repeat;
    
    /* On applique l'animation que nous avons créée */
    animation: shimmer-effect 6s infinite linear; /* Dure 6s, en boucle continue */
}

/* On s'assure que le mode sombre a aussi un reflet adapté */
body.dark-mode .weather-card--sunny {
    background-image:
        /* 1. Le reflet lumineux (un peu moins opaque en mode sombre) */
        linear-gradient(
            100deg,
            transparent 30%, 
            rgba(255, 255, 255, 0.2) 50%, 
            transparent 70%
        ),
        /* 2. Le fond original du mode sombre */
        linear-gradient(145deg, rgba(255, 204, 0, 0.15), rgba(45, 55, 72, 0.5));
}

/* Temps nuageux */
.weather-card--cloudy {
    background: linear-gradient(145deg, rgba(176, 196, 222, 0.25), rgba(119, 136, 153, 0.15));
}
body.dark-mode .weather-card--cloudy {
    background: linear-gradient(145deg, rgba(160, 174, 192, 0.15), rgba(45, 55, 72, 0.6));
}

/* Temps pluvieux / Bruine */
.weather-card--rainy {
    background: linear-gradient(145deg, rgba(100, 149, 237, 0.2), rgba(70, 130, 180, 0.15));
}
body.dark-mode .weather-card--rainy {
    background: linear-gradient(145deg, rgba(99, 179, 237, 0.15), rgba(26, 32, 44, 0.6));
}

/* Temps orageux */
.weather-card--stormy {
    background: linear-gradient(145deg, rgba(108, 92, 231, 0.2), rgba(72, 52, 212, 0.2));
}
body.dark-mode .weather-card--stormy {
    background: linear-gradient(145deg, rgba(88, 80, 141, 0.3), rgba(26, 32, 44, 0.7));
}

/* Temps neigeux */
.weather-card--snowy {
    background: linear-gradient(145deg, rgba(224, 255, 255, 0.24), rgba(175, 238, 238, 0.2));
}
body.dark-mode .weather-card--snowy {
    background: linear-gradient(145deg, rgba(160, 174, 192, 0.2), rgba(45, 55, 72, 0.5));
}

/* Temps brumeux */
.weather-card--foggy {
    background: linear-gradient(145deg, rgba(211, 211, 211, 0.3), rgba(192, 192, 192, 0.2));
}
body.dark-mode .weather-card--foggy {
    background: linear-gradient(145deg, rgba(113, 128, 150, 0.25), rgba(74, 85, 104, 0.6));
}
.clothing-advice {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    margin: 1.5rem auto 1rem auto;
    max-width: 90%;
    background-color: var(--detail-item-bg-color);
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    border: 1px solid var(--card-border-color);
    text-align: center;
}

.clothing-advice i {
    color: var(--link-color);
}

.map-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px; /* Ajoute un espace entre les deux groupes */
}
#weather-creator-tools {
    background-color: rgba(240, 240, 240, 0.9);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    border: 1px solid #ccc;
    backdrop-filter: blur(5px);
}
body.dark-mode #weather-creator-tools {
    background-color: rgba(45, 55, 72, 0.9);
    border-color: var(--card-border-color);
}
#weather-creator-tools h3 {
    margin-top: 0;
}
.tool-group {
    margin: 10px 0;
}
.tool-btn {
    font-size: 1.5rem;
    padding: 5px 10px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    background-color: var(--card-bg-color);
    color: var(--text-color);
}
.tool-btn.active {
    border-color: #007bff;
    background-color: #e0efff;
}
body.dark-mode .tool-btn.active {
    background-color: #2c5282;
}
#temp-input, #label-input {
    width: 100px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.tool-actions {
    margin-top: 15px;
}
#share-btn, #reset-btn {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    margin: 0 5px;
}
#share-btn {
    background-color: #1877F2; /* Bleu Facebook */
}
#reset-btn {
    background-color: #dc3545; /* Rouge */
}
.instructions {
    font-style: italic;
    color: #555;
}
body.dark-mode .instructions {
    color: #aaa;
}
.instructions small {
    font-style: normal;
    opacity: 0.8;
}

/* Style pour les icônes personnalisées sur la carte */
.weather-icon-marker {
    text-align: center;
    font-weight: bold;
    color: black;
}
.weather-icon-marker .symbol {
    font-size: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.weather-icon-marker .temp {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid #777;
}
.weather-icon-marker .label {
    background-color: rgba(0, 0, 0, 0.65);
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-top: 5px;
    white-space: nowrap;
}

/* Style pour les icônes personnalisées sur la carte */
.weather-icon-marker {
    text-align: center;
    font-weight: bold;
    color: black;
}
.weather-icon-marker .symbol {
    font-size: 2.5rem; /* Taille du ☀️ */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.weather-icon-marker .temp {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid #777;
}
/* ================== STYLES POUR L'ARBRE SAISONNIER ================== */
#seasonal-tree-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px; /* Taille maximale de l'arbre */
    margin: 0 auto; /* Centrer le conteneur de l'arbre */
}

#seasonal-tree {
    width: 100%;
    height: auto;
}

#current-season-display {
    display: block; /* Pour qu'il passe à la ligne sous le titre */
    font-size: 1rem; /* Plus petit que le titre principal */
    font-weight: 500;
    color: var(--text-secondary-color);
    margin-top: 0.5rem;
    font-style: italic;
}

/* Cacher tous les calques optionnels par défaut */
#seasonal-tree .season-leaves, 
#seasonal-tree #feuilles-printemps,
#seasonal-tree #feuilles-ete,
#seasonal-tree #feuilles-automne,
#seasonal-tree .weather-effect {
    display: none;
    transition: all 0.5s ease;
}

/* Classe pour rendre un calque visible (sera ajoutée par JavaScript) */
#seasonal-tree .visible {
    display: block !important;
}

/* Animation pour le vent */
@keyframes tree-sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50% { transform: rotate(1.5deg); }
}

#seasonal-tree.windy {
    transform-origin: 50% 100%; /* L'arbre pivote depuis sa base */
    animation: tree-sway 4s ease-in-out infinite alternate;
}
@keyframes rain-fall {
    0% { transform: translateY(-20px); opacity: 1; }
    100% { transform: translateY(80px); opacity: 0; }
}
#pluie .raindrop {
    stroke: var(--icon-color-rain);
    stroke-width: 2;
    stroke-linecap: round;
    animation-name: rain-fall;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/* On décale les animations pour un effet plus naturel */
#pluie .raindrop:nth-child(1) { animation-duration: 0.8s; animation-delay: 0.1s; }
#pluie .raindrop:nth-child(2) { animation-duration: 0.7s; animation-delay: 0.5s; }
#pluie .raindrop:nth-child(3) { animation-duration: 0.9s; animation-delay: 0.2s; }
#pluie .raindrop:nth-child(4) { animation-duration: 0.75s; animation-delay: 0.8s; }
#pluie .raindrop:nth-child(5) { animation-duration: 0.85s; animation-delay: 0.4s; }

/* --- Effet d'Orage (Éclair) --- */
@keyframes lightning-flash {
    0%, 95%, 100% { opacity: 0; }
    96% { opacity: 0.6; }
    97% { opacity: 0.2; }
    98% { opacity: 0.8; }
    99% { opacity: 0; }
}
#orage-effect #eclair {
    /* L'animation dure 5 secondes mais ne flashe qu'à la toute fin */
    animation: lightning-flash 5s infinite;
}

/* --- Effet Ciel Couvert --- */
#seasonal-tree.overcast {
    filter: brightness(0.8) saturate(0.85);
    transition: filter 0.5s ease;
}

.minutely-chart-wrapper {
    display: flex;
    align-items: flex-end; /* Aligne les barres et l'échelle sur le bas */
    gap: 0.5rem; /* Petit espace entre l'échelle et le graphique */
    position: relative;
    width: 100%;
    padding-bottom: 20px; 
}

/* Style pour le conteneur des étiquettes de l'échelle (gauche) */
.minutely-yaxis-labels {
    height: 120px; /* Doit avoir la même hauteur que le graphique */
    display: flex;
    flex-direction: column; /* Pour empiler les textes verticalement */
    justify-content: space-between; /* Pour espacer "Forte", "Modérée", "Faible" */
    text-align: right;
    font-size: 0.7rem;
    color: var(--text-secondary-color);
    flex-shrink: 0; /* Empêche l'échelle de rétrécir */
    padding-bottom: 5px; /* Petit ajustement pour l'alignement visuel */
}

/* On retire le padding-bottom de l'ancien wrapper qui est maintenant sur le nouveau */
.minutely-chart-container {
    padding: 10px 5px 0px 5px;
}
.report-btn {
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--card-border-color);
    background-color: var(--detail-item-bg-color);
    color: var(--text-color);
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}
.report-btn:hover {
    transform: translateY(-2px);
    border-color: var(--link-color);
}
.report-marker { /* Pour s'assurer que l'icône sur la carte est cliquable */
    cursor: pointer;
}

        @media (display-mode: standalone) {
            .install-app-section {
                display: none !important;
            }
        }
        
        @media (display-mode: fullscreen) {
            .install-app-section {
                display: none !important;
            }
        }

/* On crée un style spécial pour les alertes de pluie à venir */
.weather-advice-text.warning {
    background-color: rgba(243, 156, 18, 0.1); /* Fond jaune/orangé très léger */
    border-left-color: var(--alert-color-yellow); /* Bordure jaune/orangé (variable de votre thème) */
    color: var(--text-color);
    font-weight: 500; /* On peut mettre le texte un peu plus en gras */
}

/* Le même en mode sombre pour une meilleure lisibilité */
body.dark-mode .weather-advice-text.warning {
    background-color: rgba(237, 137, 54, 0.15); 
    border-left-color: var(--alert-color-orange);
}  
.weather-advice-text.warning .fas {
    color: var(--alert-color-yellow);
    margin-right: 0.5em; /* On garde un bel espacement */
    text-shadow: 0 0 5px rgba(0,0,0,0.2); /* Petite ombre pour la lisibilité */
}

/* Style pour l'icône dans la bannière normale */
.weather-advice-text.info .fas {
    margin-right: 0.5em;
    opacity: 0.7; /* On la rend un peu plus discrète */
} 
     .main-weather-icon-container {
    width: 250px; /* Ajustez la taille selon vos préférences */
    height: 250px;
    margin: 1rem auto;
}

.main-weather-icon-container svg {
    width: 100%;
    height: 100%;
}

/* --- Maintenant, les couleurs ! --- */

/* La couleur de base pour les nuages */
.main-weather-icon-container svg .cloud {
    fill: #E0E0E0; /* Gris clair */
    stroke: #BDBDBD; /* Bordure un peu plus foncée */
}

/* La couleur pour le soleil */
.main-weather-icon-container svg .sun {
    fill: #FFC107; /* Jaune ambré */
    stroke: #FFA000;
}

/* La couleur pour la lune */
.main-weather-icon-container svg .moon {
    fill: #CFD8DC; /* Gris très clair */
    stroke: #90A4AE;
}

/* La couleur pour la pluie et la neige */
.main-weather-icon-container svg .rain,
.main-weather-icon-container svg .snow {
    fill: #4FC3F7; /* Bleu ciel */
    stroke: #03A9F4;
}

/* La couleur pour les éclairs */
.main-weather-icon-container svg .lightning {
    fill: #FFEB3B; /* Jaune vif */
}
.floating-elements.stormy-clouds .cloud,
.floating-elements.stormy-clouds .cloud::before,
.floating-elements.stormy-clouds .cloud::after {
    background: rgba(158, 158, 158, 0.45) !important; /* Gris plus sombre et menaçant */
    /* On utilise !important pour être sûr de surcharger le style de base */
}

/* En mode sombre, on les rend encore un peu plus denses */
body.dark-mode .floating-elements.stormy-clouds .cloud,
body.dark-mode .floating-elements.stormy-clouds .cloud::before,
body.dark-mode .floating-elements.stormy-clouds .cloud::after {
    background: rgba(80, 80, 80, 0.5) !important;
}

#sun-rays-effect-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    z-index: 0;
    display: none;
    pointer-events: none;
}
#sun-rays-effect-container.active::before,
#sun-rays-effect-container.active::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 220, 0.15) 0%, rgba(255, 255, 255, 0) 50%);
    transform-origin: center center;
}
#sun-rays-effect-container.active::before {
    animation: sun-ray-spin 40s linear infinite;
}
#sun-rays-effect-container.active::after {
    animation: sun-ray-spin 30s linear infinite reverse;
}
@keyframes sun-ray-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
 #cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #2c3e50;
            color: white;
            padding: 20px;
            z-index: 10000;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        #cookie-banner.show {
            transform: translateY(0);
        }
        
        .cookie-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .cookie-text {
            flex: 1;
            min-width: 300px;
        }
        
        .cookie-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .cookie-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: background 0.3s;
        }
        
        .btn-accept {
            background: #27ae60;
            color: white;
        }
        
        .btn-accept:hover {
            background: #229954;
        }
        
        .btn-decline {
            background: #e74c3c;
            color: white;
        }
        
        .btn-decline:hover {
            background: #c0392b;
        }
        
        .btn-customize {
            background: #3498db;
            color: white;
        }
        
        .btn-customize:hover {
            background: #2980b9;
        }
        
        /* Modal de personnalisation */
        #cookie-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            z-index: 10001;
            padding: 20px;
            overflow-y: auto;
        }
        
        .modal-content {
            background: white;
            max-width: 600px;
            margin: 50px auto;
            padding: 30px;
            border-radius: 10px;
            color: #333;
        }
        
        .cookie-category {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .cookie-category h3 {
            margin: 0 0 10px 0;
            color: #2c3e50;
        }
        
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
            float: right;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #27ae60;
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .required {
            opacity: 0.6;
            pointer-events: none;
        }
        
        @media (max-width: 768px) {
            .cookie-content {
                flex-direction: column;
                text-align: center;
            }
            
            .cookie-buttons {
                justify-content: center;
                width: 100%;
            }
            
            .modal-content {
                margin: 20px auto;
                padding: 20px;
            }
        }
        /* Styles pour le modal de connexion admin */
.admin-login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.admin-login-content {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.admin-login-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.admin-login-input {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.admin-login-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.admin-login-button {
    background: #27ae60;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    margin-right: 0.5rem;
    transition: background 0.3s ease;
}

.admin-login-button:hover {
    background: #229954;
}

.admin-cancel-button {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.admin-cancel-button:hover {
    background: #c0392b;
}

.admin-error-message {
    color: #e74c3c;
    margin-top: 1rem;
    font-weight: 500;
}

.admin-info {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Mode sombre pour le modal */
body.dark-mode .admin-login-content {
    background: #2c3e50;
    color: #ecf0f1;
}

body.dark-mode .admin-login-title {
    color: #ecf0f1;
}

body.dark-mode .admin-login-input {
    background: #34495e;
    border-color: #4a5568;
    color: #ecf0f1;
}

body.dark-mode .admin-login-input:focus {
    border-color: #3498db;
}
.main-display-container {
    background: linear-gradient(145deg, var(--card-bg-gradient-start), var(--card-bg-gradient-end)); /* <-- CORRECTION : On applique le même dégradé */
    border: 1px solid var(--card-border-color);
    border-radius: 20px;
    padding: 1.5rem; /* Réduction du padding pour mieux correspondre à l'image */
    margin-bottom: 2.5rem; /* Ajout d'une marge en bas comme les autres blocs */
    box-shadow: 0 6px 24px var(--card-shadow-color); /* <-- AJOUT : L'ombre portée */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.light-mode .main-display-container {
     background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
}


/* Section pour la grande température */
.large-temp-section {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--card-border-color);
}
.main-weather-icon-container {
    width: 250px;
    height: 250px;
    margin: 0 auto 1rem; /* Centre l'icône et ajoute un espace en dessous */
}
.main-temperature {
    font-size: 5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-color);
}
.main-feels-like, .main-description {
    font-size: 1rem;
    color: var(--text-secondary-color);
    margin: 0.25rem 0;
}
.main-description {
    text-transform: capitalize;
}

/* Grille pour la rangée de cartes de détails */
.details-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

/* Style de chaque petite carte */
.detail-card {
    background: var(--detail-item-bg-color);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
}
.card-header {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-body {
    margin-top: auto; /* Aligne le contenu vers le bas si la carte s'agrandit */
}
.card-value {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color);
}
.card-value.large {
    font-size: 1.2rem;
    line-height: 1.3;
}
.card-value.small {
    font-size: 1rem;
    margin-top: 0.5rem;
}
.card-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    min-height: 1.2em;
}

/* Jauges UV & Humidité */
.gauge-container {
    width: 100%;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin-top: 0.8rem;
}
.gauge-bar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.gauge-indicator {
    position: absolute;
    top: -3px;
    width: 14px;
    height: 14px;
    background-color: white;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.humidity-gauge {
    background-color: var(--link-color);
}
#humidity-indicator {
     border: 2px solid white;
     background-color: var(--link-color);
}

/* Boussole de vent simple */
.wind-compass-simple {
    position: relative;
    width: 60px;
    height: 60px;
    border: 1px solid var(--card-border-color);
    border-radius: 50%;
    margin: 0.5rem auto;
}
.wind-compass-simple span {
    position: absolute;
    font-size: 0.6rem;
    color: var(--text-secondary-color);
}
.wind-compass-simple .north { top: 2px; left: 50%; transform: translateX(-50%);}
.wind-compass-simple .south { bottom: 2px; left: 50%; transform: translateX(-50%);}
.wind-compass-simple .east { right: 2px; top: 50%; transform: translateY(-50%);}
.wind-compass-simple .west { left: 2px; top: 50%; transform: translateY(-50%);}

.wind-arrow-simple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 20px;
    background-color: var(--link-color);
    transform-origin: 50% 100%;
    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
    transform: translate(-50%, -100%) rotate(0deg); /* La rotation sera mise par JS */
    transition: transform 0.5s ease-out;
}

/* Jauge de pression en arc */
.pressure-gauge-arc-container {
    position: relative;
    width: 100%;
    height: 70px; /* Hauteur fixe pour le conteneur */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.pressure-gauge-arc-container svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.gauge-arc-track, .gauge-arc-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}
.gauge-arc-track {
    stroke: rgba(0, 0, 0, 0.2);
}
.gauge-arc-fill {
    stroke: var(--pressure-color, var(--link-color)); /* Utilise notre variable, avec une couleur par défaut */
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease-out, stroke 0.5s ease-out; /* On ajoute la transition de couleur */
}
.pressure-value-arc-text {
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-color);
    position: relative; /* Pour être au-dessus du SVG */
    padding-bottom: 5px; /* Pour remonter un peu le texte */
}
.city-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem; /* Espace avant le bloc température */
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--card-border-color);
}

.city-name {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
}

.sound-toggle-btn {
    background: var(--detail-item-bg-color);
    border: 1px solid var(--card-border-color);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sound-toggle-btn:hover {
    background: var(--detail-item-hover-bg-color);
    color: var(--link-color);
}
#refreshBtn .fa-sync-alt.rotating {
    animation: spin 0.7s linear;
}
.smart-alert-banner {
    background: linear-gradient(135deg, var(--card-bg-gradient-start), var(--card-bg-gradient-end));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--card-border-color);
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    margin-top: 0.8rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    animation: smartAlertSlideIn 0.5s ease-out;
}

.smart-alert-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.smart-alert-banner .alert-icon {
    margin-right: 0.5rem;
    font-size: 1.1em;
}

.smart-alert-banner .alert-text {
    color: var(--text-color);
}

/* Types d'alertes avec couleurs spécifiques */
.smart-alert-banner.rain-alert {
    border-left: 4px solid #3498db;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.05));
}

.smart-alert-banner.rain-alert .alert-icon {
    color: #3498db;
}

.smart-alert-banner.uv-alert {
    border-left: 4px solid #f39c12;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(243, 156, 18, 0.05));
}

.smart-alert-banner.uv-alert .alert-icon {
    color: #f39c12;
}

.smart-alert-banner.temp-alert {
    border-left: 4px solid #e74c3c;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(231, 76, 60, 0.05));
}

.smart-alert-banner.temp-alert .alert-icon {
    color: #e74c3c;
}

.smart-alert-banner.wind-alert {
    border-left: 4px solid #9b59b6;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(155, 89, 182, 0.05));
}

.smart-alert-banner.wind-alert .alert-icon {
    color: #9b59b6;
}

.smart-alert-banner.good-weather {
    border-left: 4px solid #27ae60;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(39, 174, 96, 0.05));
}

.smart-alert-banner.good-weather .alert-icon {
    color: #27ae60;
}

@keyframes smartAlertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .smart-alert-banner {
        font-size: 0.9rem;
        padding: 0.7rem 1rem;
        margin-top: 0.6rem;
    }
}

@media (max-width: 480px) {
    .smart-alert-banner {
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }
}
.sun-timeline-section {
    background: var(--detail-item-bg-color);
    padding: 1.2rem;
    border-radius: 12px;
    margin: 1.5rem 0;
    border: 1px solid var(--card-border-color);
    transition: all 0.3s ease;
}

.sun-timeline-section:hover {
    background: var(--detail-item-hover-bg-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.sun-timeline-title {
    margin: 0 0 1.2rem 0;
    font-size: 1.1rem;
    color: var(--text-color);
    text-align: center;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sun-timeline-container {
    position: relative;
    height: 80px;
    margin: 1rem 0;
}

.sun-timeline-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, #f39c12, #f1c40f, #e67e22);
    border-radius: 4px;
    transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
}

.sun-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #e74c3c, #f39c12, #f1c40f);
    border-radius: 4px;
    transition: width 1s ease-out;
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.6);
}

.sun-timeline-indicator {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: #f1c40f;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: left 1s ease-out;
    z-index: 2;
}

.sun-timeline-indicator::before {
    content: '☀️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
}

.sun-timeline-times {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.8rem;
    font-size: 0.9rem;
}

.sun-timeline-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.sun-timeline-time-icon {
    font-size: 1.2rem;
}

.sun-timeline-time-value {
    font-weight: 600;
    color: var(--text-color);
}

.sun-timeline-time-label {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
}

.sun-timeline-current {
    text-align: center;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--card-border-color);
}

.sun-timeline-current-time {
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    margin-bottom: 0.3rem;
}

.sun-timeline-status {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Mode nuit */
.sun-timeline-night .sun-timeline-track {
    background: linear-gradient(90deg, #2c3e50, #34495e, #2c3e50);
}

.sun-timeline-night .sun-timeline-progress {
    background: linear-gradient(90deg, #1a252f, #2c3e50, #34495e);
}

.sun-timeline-night .sun-timeline-indicator {
    background: #34495e;
}

.sun-timeline-night .sun-timeline-indicator::before {
    content: '🌙';
}

/* Responsive */
@media (max-width: 768px) {
    .sun-timeline-container {
        height: 70px;
    }
    
    .sun-timeline-times {
        font-size: 0.85rem;
    }
    
    .sun-timeline-time-icon {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .sun-timeline-section {
        padding: 1rem;
    }
    
    .sun-timeline-container {
        height: 60px;
    }
    
    .sun-timeline-indicator {
        width: 20px;
        height: 20px;
    }
    
    .sun-timeline-times {
        font-size: 0.8rem;
    }
}
.rain-radar-section {
    background: var(--detail-item-bg-color);
    padding: 1.2rem;
    border-radius: 12px;
    margin: 1.5rem 0;
    border: 1px solid var(--card-border-color);
    transition: all 0.3s ease;
}

.rain-radar-section:hover {
    background: var(--detail-item-hover-bg-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.rain-radar-title {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-color);
    text-align: center;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.rain-radar-container {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid var(--card-border-color);
}

body.dark-mode .rain-radar-container {
    background: #2c3e50;
}

.rain-radar-map {
    width: 100%;
    height: 100%;
}

.rain-radar-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    gap: 5px;
}

.rain-radar-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--card-border-color);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.rain-radar-btn:hover {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.rain-radar-btn.active {
    background: var(--link-color);
    color: white;
}

.rain-radar-legend {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    border: 1px solid var(--card-border-color);
}

.rain-radar-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 2px 0;
}

.rain-radar-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.rain-radar-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary-color);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .rain-radar-container {
        height: 250px;
    }
    
    .rain-radar-controls {
        top: 5px;
        right: 5px;
    }
    
    .rain-radar-btn {
        padding: 4px 6px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .rain-radar-section {
        padding: 1rem;
    }
    
    .rain-radar-container {
        height: 200px;
    }
    
    .rain-radar-legend {
        font-size: 0.65rem;
        padding: 6px;
    }
}
.modal-overlay {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10010;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.modal-overlay .modal-content {
    background: var(--card-bg-gradient-start);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--card-border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-color);
}
.modal-header .close-btn {
    font-size: 2rem;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    opacity: 0.7;
}
.trophy-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.trophy-item {
    background: var(--detail-item-bg-color);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}
.trophy-item.locked {
    filter: grayscale(100%);
    opacity: 0.5;
}
.trophy-item.unlocked {
    border: 1px solid #f1c40f;
}
.trophy-icon {
    font-size: 3rem;
}
.trophy-title {
    font-weight: 600;
    color: var(--text-color);
    margin: 0.5rem 0;
}
.trophy-desc {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}
.header {
    position: relative;
    /* On ajoute un peu de padding pour que le titre ne passe pas sous le bouton */
    padding-right: 60px; 
    padding-left: 60px;
}

.header-icon-btn {
    position: absolute;
    top: 50%;
    right: 1rem; /* Positionné à droite */
    transform: translateY(-50%); /* Centré verticalement */
    
    background: var(--detail-item-bg-color);
    color: #f1c40f; /* Couleur dorée pour le trophée */
    border: 1px solid var(--card-border-color);
    border-radius: 50%; /* Pour un bouton rond */
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    cursor: pointer;
    
    /* Pour bien centrer l'icône dans le cercle */
    display: flex;
    justify-content: center;
    align-items: center;
    
    transition: all 0.3s ease;
}

.header-icon-btn:hover {
    background: var(--detail-item-hover-bg-color);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Ajustement pour les petits écrans */
@media (max-width: 768px) {
    .header {
        padding-right: 50px;
        padding-left: 50px;
    }
    .header-icon-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        right: 0.5rem;
    }
}
.day-narrative-summary {
    font-size: 0.95rem;
    color: var(--text-secondary-color);
    margin: 1.5rem auto;
    padding: 1rem;
    max-width: 95%;
    border-left: 4px solid var(--link-color);
    background-color: rgba(52, 152, 219, 0.05);
    border-radius: 0 8px 8px 0;
    line-height: 1.6;
    text-align: left;
}

body.dark-mode .day-narrative-summary {
    background-color: rgba(99, 179, 237, 0.1);
}
.trophy-unlocked-content {
    text-align: center;
    position: relative; /* Nécessaire pour les confettis */
    overflow: hidden; /* Pour que les confettis ne dépassent pas */
}
.trophy-unlocked-icon {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 1rem;
    animation: trophy-bounce 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.trophy-unlocked-title {
    font-size: 1.8rem;
    color: var(--text-color);
    margin: 0;
}
.trophy-unlocked-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #f1c40f; /* Couleur dorée */
    margin: 0.5rem 0;
}
.trophy-unlocked-desc {
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    margin-top: 0.5rem;
}
@keyframes trophy-bounce {
  0%   { transform: scale(0.5); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Styles pour les confettis (le petit plus magique) */
.confetti-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: hidden;
}
.confetti {
    position: absolute;
    width: 8px;
    height: 16px;
    background: #f1c40f;
    top: -20px;
    opacity: 0;
    animation: confetti-fall 4s ease-out forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}
.community-section {
    padding: 3rem 2rem;
    margin-bottom: 2.5rem;
    border-radius: 20px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden; 
    border: 1px solid var(--card-border-color);
    box-shadow: 0 6px 24px var(--card-shadow-color);
    animation: slideUp 1s ease-out 1.5s both;
    /* --- AJOUT POUR LA TRANSITION DE DISPARITION --- */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0.8s;
}

/* --- NOUVELLE CLASSE POUR CACHER LE BLOC --- */
.community-section.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Petit effet de glissement vers le bas */
    pointer-events: none; /* Empêche les clics pendant/après la disparition */
}

.community-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://images.unsplash.com/photo-1561501900-3701fa6a0864?q=80&w=2070&auto=format&fit=crop'); 
    background-size: cover;
    background-position: center;
    z-index: 1;
    filter: brightness(0.6) blur(2px);
    transition: filter 0.4s ease;
}

.community-section:hover::before {
    filter: brightness(0.5) blur(0px) scale(1.05);
}

.community-content {
    position: relative; 
    z-index: 2;
}

.community-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}

.community-section p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.community-join-btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    background-color: #1877F2; 
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.community-join-btn:hover {
    background-color: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* Styles pour les écrans plus petits */
@media (max-width: 768px) {
    .community-section h2 {
        font-size: 1.6rem;
    }
    .community-section p {
        font-size: 1rem;
    }
    .community-join-btn {
        padding: 0.7rem 1.5rem;
        font-size: 1rem;
    }
}
#seasonalTreeSection {
    display: none;
    animation: slideUp 1s ease-out 1.3s both;
}
.wind-marker-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.wind-marker-icon .arrow-svg {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease-out;
    filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.4));
}

.wind-marker-icon .speed-label {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-top: -5px; /* Pour rapprocher le texte de la flèche */
}
.live-weather-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.live-weather-marker .symbol {
    font-size: 2.5rem; /* Taille de l'emoji */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.live-weather-marker .temp {
    background-color: rgba(0, 0, 0, 0.65);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 5px;
    border: 1px solid rgba(255,255,255,0.3);
}

.live-weather-marker .city-label {
    font-size: 0.8rem;
    font-weight: bold;
    color: #003366;
    text-shadow: 1px 1px 1px white;
    margin-top: 2px;
}
.aqi-details-container {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--card-border-color);
    font-size: 0.8rem;
}

.pollutant-item {
    display: grid;
    grid-template-columns: 60px 1fr 50px; /* Nom | Barre | Valeur */
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.pollutant-name {
    font-weight: 600;
    text-align: left;
}

.pollutant-bar-container {
    background-color: var(--detail-item-bg-color);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.pollutant-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.pollutant-value {
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

/* Couleurs pour les niveaux de pollution */
.pollutant-level-good { background-color: #2ecc71; } /* Vert */
.pollutant-level-fair { background-color: #f1c40f; } /* Jaune */
.pollutant-level-moderate { background-color: #e67e22; } /* Orange */
.pollutant-level-poor { background-color: #e74c3c; } /* Rouge */
.pollutant-level-very-poor { background-color: #9b59b6; } /* Violet */

.health-activities-section {
    background: linear-gradient(145deg, var(--card-bg-gradient-start), var(--card-bg-gradient-end));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    border: 1px solid var(--card-border-color);
    box-shadow: 0 6px 24px var(--card-shadow-color);
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.activity-card {
    background: var(--detail-item-bg-color);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-left: 5px solid grey; /* Couleur par défaut */
    transition: all 0.3s ease;
}

.activity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.activity-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.activity-header .icon {
    font-size: 1.8rem;
    width: 40px;
    text-align: center;
}

.activity-header .title {
    font-size: 1.1rem;
    font-weight: 600;
}

.activity-recommendation {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0.2rem 0;
}

.activity-reason {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
    line-height: 1.4;
}

/* Niveaux de recommandation */
.level-good {
    color: #2ecc71;
    border-left-color: #2ecc71;
}
.level-ok {
    color: #f39c12;
    border-left-color: #f39c12;
}
.level-bad {
    color: #e74c3c;
    border-left-color: #e74c3c;
}
.pollen-forecast-container {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border-color);
}

.pollen-forecast-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary-color);
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.pollen-chart-wrapper {
    position: relative;
    height: 180px;
    width: 100%;
}
.forecast-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--card-border-color);
}
.forecast-nav-date {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}
.forecast-nav-btn {
    background: var(--detail-item-bg-color);
    border: 1px solid var(--card-border-color);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}
.forecast-nav-btn:hover:not(:disabled) {
    background: var(--detail-item-hover-bg-color);
    color: var(--link-color);
}
.forecast-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.charts-layout-grid {
    display: grid;
    /* On crée 2 colonnes : la première prend un peu plus de place */
    grid-template-columns: 1.2fr 1fr;
    gap: 1.8rem; /* L'espacement que vous aviez déjà */
    align-items: flex-start;
}

/* Chaque colonne sera un conteneur flex vertical */
.charts-column {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

/* Pour les petits widgets, on crée une sous-grille */
.small-widgets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes égales */
    gap: 1.8rem;
}


/* --- RESPONSIVE : pour les écrans plus petits --- */

/* Pour les tablettes et grands téléphones */
@media (max-width: 1200px) {
    .charts-layout-grid {
        grid-template-columns: 1fr; /* On repasse à une seule colonne */
    }
}

/* Pour les petits téléphones */
@media (max-width: 600px) {
    .small-widgets-grid {
        grid-template-columns: 1fr; /* Les petits widgets passent aussi sur une seule colonne */
    }
}
.stats-section {
    background: linear-gradient(145deg, var(--card-bg-gradient-start), var(--card-bg-gradient-end));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    border: 1px solid var(--card-border-color);
    box-shadow: 0 6px 24px var(--card-shadow-color);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    color: var(--text-color);
}

.stats-table th, .stats-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--card-border-color);
}

.stats-table th {
    font-weight: 600;
    font-size: 1.1rem;
}

.stats-table td {
    font-size: 1rem;
}

.stats-table tr:last-child td {
    border-bottom: none;
}

.stats-table td.stat-value {
    font-weight: 700;
    text-align: right;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: var(--link-color);
}
.stats-table td:first-child {
    display: flex;
    align-items: center;
    gap: 12px; /* Ajustez l'espace si vous le souhaitez */
}
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    height: 40px;
    background-color: rgba(241, 196, 15, 0.9);
    margin-bottom: 2rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}
.ticker-wrap.alert-level-yellow { background-color: #f1c40f; }
.ticker-wrap.alert-level-orange { background-color: #e67e22; }
.ticker-wrap.alert-level-red { background-color: #e74c3c; }
.ticker-wrap.alert-level-violet { background-color: #8e44ad; }
.ticker-wrap.alert-level-blue { background-color: #3498db; }

/* Ajustement de la couleur du texte pour la lisibilité */
.ticker-wrap .ticker-item {
    color: #000; /* Couleur par défaut pour le jaune */
}

.ticker-wrap.alert-level-orange .ticker-item,
.ticker-wrap.alert-level-red .ticker-item,
.ticker-wrap.alert-level-violet .ticker-item,
.ticker-wrap.alert-level-blue .ticker-item {
    color: #ffffff; /* Texte en blanc pour les fonds foncés */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

body.dark-mode .ticker-wrap {
    background-color: rgba(214, 158, 46, 0.9);
}

.ticker-move {
    display: flex;
    white-space: nowrap; /* Très important */
    animation: ticker-loop 40s linear infinite; /* Durée par défaut */
}

@keyframes ticker-loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.ticker-wrap:hover .ticker-move {
    animation-play-state: paused;
}

/* Ces deux conteneurs sont nos deux blocs de texte identiques */
.ticker-content, .ticker-content-duplicate {
    display: flex;
    align-items: center;
}

.ticker-item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #000;
}
body.dark-mode .ticker-item {
    color: #1a202c;
}
.ticker-item i { margin-right: 0.75rem; 
}
#radar-timeline-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: var(--card-border-color);
    outline: none;
    opacity: 0.8;
    transition: opacity .2s;
    border-radius: 4px;
}

#radar-timeline-slider:hover {
    opacity: 1;
}

#radar-timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--link-color);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
}

#radar-timeline-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--link-color);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
}
#smart-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.smart-card {
    background: var(--detail-item-bg-color);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 5px solid var(--link-color);
    transition: all 0.3s ease;
}

.smart-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.smart-card .icon {
    font-size: 2rem;
    color: var(--link-color);
}

.smart-card .text .title {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--text-color);
}

.smart-card .text .description {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-secondary-color);
}
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
    padding: 1rem 0;
}
.detail-block {
    background: var(--detail-item-bg-color);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
}
.detail-block i {
    font-size: 1.5rem;
    color: var(--link-color);
    margin-bottom: 0.5rem;
}
.detail-block strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.detail-block span {
    font-size: 1.2rem;
    font-weight: 500;
}
#historical-context-content .icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}
#suggestions-box {
    display: none; /* Cachée par défaut */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg-gradient-start);
    border: 1px solid var(--card-border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.suggestion-item {
    padding: 12px 15px;
    cursor: pointer;
    color: var(--text-color);
    font-size: 0.95rem;
}

.suggestion-item:hover {
    background-color: var(--detail-item-hover-bg-color);
}
.forecast-title .fa-exclamation-triangle {
    animation: urgent-blink 1s infinite;
}

@keyframes urgent-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.search-section { animation: slideUp 0.8s ease-out 0.2s both; }
#weatherContent { animation: slideUp 0.8s ease-out 0.4s both; }
#smart-summary-section { animation: slideUp 0.8s ease-out 0.5s both; }
.hourly-forecast-section { animation: slideUp 0.8s ease-out 0.6s both; }
.forecast-section { animation: slideUp 0.8s ease-out 0.7s both; }
.charts-section { animation: slideUp 0.8s ease-out 0.8s both; }
.map-section { animation: slideUp 0.8s ease-out 0.9s both; }
.map-layer-description {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-secondary-color);
    font-style: italic;
    max-width: 650px;
    margin: -1.5rem auto 2rem auto; /* Marge négative pour le rapprocher du titre */
    line-height: 1.5;
}
#fishing-targets-list span {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.2s;
}
#fishing-targets-list span:hover {
    transform: scale(1.1);
}