/* Réglages généraux */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Roboto', Arial, sans-serif;
    background-color: #000;
    color: #FFF;
    transition: opacity 0.5s ease-in-out;
    overflow: hidden; 
}
body.night-mode { opacity: 0.6; }

/* Grille */
.dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
    padding: 20px;
    height: calc(100vh - 40px);
    position: relative;
    transition: top 0.5s linear, left 0.5s linear;
}

/* Animations d'entrée */
@keyframes slideUpFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Widgets */
.widget {
    background-color: #111;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    opacity: 0;
    animation: slideUpFadeIn 0.5s ease-out forwards;
}
.widget-content {
    transition: opacity 0.4s ease-in-out;
}

/* Délais d'animation */
#horloge-widget { animation-delay: 0.1s; }
#meteo-widget { animation-delay: 0.2s; }
#actus-widget { animation-delay: 0.3s; }

/* Horloge */
#horloge-widget { grid-column: 1 / span 2; text-align: center; }
#heure { font-size: 6rem; font-weight: bold; letter-spacing: 2px; }
#date { font-size: 1.8rem; opacity: 0.8; font-weight: 300; }

/* --- MÉTÉO (MISES À JOUR ICI) --- */
#meteo-widget {
    grid-row: 2;
    grid-column: 1;
    /* NOUVEAU: Requis pour contenir les animations */
    position: relative;
    overflow: hidden;
}
#meteo-contenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 20px;
    /* NOUVEAU: S'assure que le texte est DEVANT l'animation */
    position: relative;
    z-index: 2;
}
.meteo-icone {
    width: 100px;
    height: 100px;
    margin-bottom: -10px;
    /* NOUVEAU: S'assure que l'icône est aussi devant */
    position: relative;
    z-index: 2;
}
.meteo-temp {
    font-size: 4rem;
    font-weight: bold;
    margin: 10px 0;
    /* NOUVEAU: Transition pour le changement de couleur */
    transition: color 0.5s ease;
}
.meteo-desc {
    font-size: 1.5rem;
    opacity: 0.8;
    font-weight: 300;
}

/* Actualités */
#actus-widget { 
    grid-row: 2; 
    grid-column: 2; 
    /* NOUVEAU: Permet au widget de gérer le scroll de son contenu */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
h2 {
    margin-top: 0;
    font-size: 2.5rem;
    color: #FFF;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
}
h2 i {
    color: #4e8cff;
    margin-right: 15px;
    font-size: 2.2rem;
}
#actus-contenu ul { list-style-type: none; padding-left: 0; margin: 0; }
#actus-contenu li { margin-bottom: 20px; border-left: 3px solid #4e8cff; padding-left: 15px; }
.actus-source { display: block; font-size: 1rem; font-weight: bold; opacity: 0.7; margin-bottom: 5px; text-transform: uppercase; }
.actus-titre { display: block; font-size: 1.4rem; line-height: 1.4; font-weight: 300; }


/* --- NOUVEAU : Animations Météo --- */

/* Keyframes (l'animation en elle-même) */
@keyframes rotateSun {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes fallRain {
    0% { transform: translateY(-100px); }
    100% { transform: translateY(100vh); }
}
@keyframes driftClouds {
    from { transform: translateX(-150%); }
    to { transform: translateX(150%); }
}
@keyframes driftWind {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* L'élément qui porte l'animation (caché dans le widget) */
#meteo-widget::before,
#meteo-widget::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Derrière le contenu (z-index: 2) */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* --- Application des animations --- */

/* 1. SOLEIL (Code 800) */
#meteo-widget.is-clear::before {
    background: radial-gradient(circle, rgba(255,223,105,0.3) 0%, rgba(255,223,105,0) 70%);
    animation: rotateSun 60s linear infinite;
    opacity: 1;
}

/* 2. NUAGES (Codes 801-804) */
#meteo-widget.is-cloudy::before {
    background: 
        url("data:image/png;base64,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");
    background-repeat: repeat-x;
    background-size: 50% auto;
    animation: driftClouds 25s linear infinite;
    opacity: 0.15; /* Très subtil */
}

/* 3. PLUIE (Codes 5xx) */
#meteo-widget.is-rainy::before {
    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    background-size: 2px 100px;
    background-repeat: repeat-x;
    animation: fallRain 1s linear infinite;
    animation-delay: 0.2s; /* Pour un effet décalé */
    opacity: 0.2;
}

/* 4. VENT (Indépendant) */
/* ::after est utilisé pour le vent, pour qu'il puisse se superposer au soleil/pluie */
#meteo-widget.is-windy::after {
    background: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    background-size: 100px 1px;
    background-repeat: repeat-y;
    animation: driftWind 2s linear infinite;
    opacity: 0.5;
}

/* 5. NEIGE (Codes 6xx) */
#meteo-widget.is-snowy::before {
    background: radial-gradient(circle, white 0%, transparent 100%);
    background-size: 5px 5px;
    animation: fallRain 3s linear infinite;
    opacity: 0.4;
}

/* NOUVEAU: Style pour Min/Max */
.meteo-minmax {
    font-size: 1.2rem;
    opacity: 0.8;
    margin-top: 10px;
    font-weight: 300;
}
/* Style pour les icônes min/max */
.meteo-minmax i {
    color: #4e8cff;
    opacity: 0.8;
}


/* NOUVEAU: Conteneur pour les prévisions horaires */
#meteo-horaire-conteneur {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #333; /* Séparateur */
    display: flex;
    flex-wrap: nowrap; /* Empêche le retour à la ligne */
    overflow-x: auto; /* Permet le scroll horizontal */
    overflow-y: hidden; /* Cache la barre verticale */
    -webkit-overflow-scrolling: touch; /* Scroll fluide sur tactile */
}

/* NOUVEAU: Style pour chaque bloc horaire */
.heure-prevision {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 90px; /* Ne pas grandir, ne pas rétrécir, base de 90px */
    padding: 10px 5px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05); /* Léger fond */
    margin-right: 10px;
}

.heure-prevision:last-child {
    margin-right: 0;
}

.heure-prevision-temps {
    font-size: 1rem;
    font-weight: 700;
    opacity: 0.9;
}

.heure-prevision-icone {
    width: 50px;
    height: 50px;
    margin: 5px 0;
}

.heure-prevision-temp {
    font-size: 1.2rem;
    font-weight: 700;
}

/* NOUVEAU: Style pour la barre de scroll (pour un look + clean) */
#meteo-horaire-conteneur::-webkit-scrollbar {
    height: 6px;
}
#meteo-horaire-conteneur::-webkit-scrollbar-track {
    background: #111;
}
#meteo-horaire-conteneur::-webkit-scrollbar-thumb {
    background: #4e8cff;
    border-radius: 3px;
}

/* NOUVEAU: Style pour l'heure de mise à jour */
.last-updated {
    margin: -10px 0 15px 0; /* Positionné juste sous le titre */
    font-size: 0.9rem; /* Plus petit */
    font-weight: 300;
    color: #FFF;
    opacity: 0.6; /* Discret */
    text-align: left;
}