body {
    margin: 0;
}

/* Styles de base pour le div météo */
/* .weather-box {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: row;
    align-items: flex-start; 
    justify-content: flex-end;  
    background-size: cover;
    color: white;
    font-size: 18px; 
    font-weight: bold;
    padding: 10px;  
    transition: background-color 0.3s, background-image 0.3s, opacity 0.5s ease-in-out;
    opacity: 1;  
} */

.weather-box {
    height: 50vh;
    background-size: cover;
    color: white;
    font-size: 18px; 
    font-weight: bold;
    padding: 10px;  
    animation: lancement 4s forwards ease-in-out;
    transition: background-color 0.3s, background-image 0.3s, opacity 0.5s ease-in-out;
    opacity: 1;  
}

.weather-box p {
    margin-top: 1.5em;
    max-width: 250px;
    position: absolute;
    top: 0;
    left: calc(100vw - 110px - 250px);
}

/* Réduire la taille de l'image */
.weather-box #weatherImage {
    position: absolute;
    top: 0;
    left: calc(100vw - 110px);
    width: 100px; /* Limite à 100px */
    height: auto; /* Maintenir les proportions */
    margin-bottom: 5px; /* Espacement entre l'image et le texte */
    margin-right: 1em;
}
.weather-box #loupe {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px; /* Limite à 100px */
    height: auto; /* Maintenir les proportions */
    cursor: pointer; /* Rend l'image cliquable */
}
/* Conteneur de la loupe et du champ textuel */
.search-container {
    position: absolute;
    top: 0;
    min-width: 250px;
    left: calc(100vw - 650px);
    display: flex;
    align-items: center;
    gap: 10px; /* Espacement entre la loupe et le champ */
    margin-top: 1.5em;
}

/* Champ textuel masqué au départ */
.search-container input.hidden {
    display: none;
}

/* Champ textuel visible */
.search-container input {
    width: 200px;
    height: 30px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: opacity 0.3s ease-in-out;
}


.hidden {
    opacity: 0; /* Cacher l'élément lors du changement */
}

/* Styles spécifiques pour chaque type de météo */
.ensoleille {
    background: linear-gradient(#2baeff, #b7e2fc); /* Bleu ciel */
}

.nuageux {
    background: linear-gradient(#89b4cf, #d2d2d2); /* Gris clair */
}

.pluie {
    background: linear-gradient(#89b4cf, #d2d2d2); /* Gris */
}

.orage {
    background: linear-gradient(#536069, #a6a6a6); /* Gris foncé */
}




@keyframes lancement {
    0% {
        height: 100vh;
    }
    100% {
        height: 50vh;
    }
}