html,body{
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#ciel i{
    font-size: 5em;
}

body{
    background-color: rgb(88, 171, 176);
    color: white;
    position: relative;
}

#revenirArriere{
    visibility: hidden;
    position: absolute;
    top: 2em;
    left: 2em;
    cursor: pointer;
    color: white;
}

#revenirArriereFormulaire{
    font-size: 4em;
}


#formulaire {
    position: absolute;
    top: 20px; 
    right: 20px; 
    width: 200px; 
    background-color: green;
    padding: 10px; 
    border-radius: 10px; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
}

#formulaire form {
    display: flex;
    flex-direction: column; 
}

#formulaire label{
    display: flex;
    justify-content: space-between; 
    align-items: center;
    font-size: 0.9em; 
    margin-bottom: 10px;
}

#formulaire input[type="checkbox"]{
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#parametres{
    position: absolute;
    top: 2em;
    right: 2em;
    cursor: pointer;
}

#parametresFormulaire{
    font-size: 4em;
}

#chargement{
    cursor: pointer;
    font-size: 2em;
    color: white;
}

#infosPrincipales{
    visibility: hidden;
    text-align: center;
}

#WeatherCard{
    box-shadow: 0 0 .4rem .4rem rgba(0, 0, 0, 0.1);
    padding: 5%;
    margin: 5%;
    border-radius: 2em;
}

#WeatherCard:hover{
    border: solid;
    border-color: pink;
}

#codePostal{
    visibility: visible;
}

#erreurCodePostal{
    visibility: hidden;
    color: rgb(184, 24, 24);
    border: solid;
    display: block;
    margin: auto;
    border-color: rgb(145, 28, 28);
    border-radius: 10px;
    font-size: 1em;
    font-weight: bold;
    padding: 0.5em;
    width: 20em;
    margin-bottom: 2em;
}

#titre, #sous-titre, #codePostal, #indicationVille{
    display: flex;
    justify-content: center;
    align-items: center;
}

#sous-titre{
    margin-bottom: 3em;
    font-size: 1.5em;
}

#titre{
    text-shadow: 2px 7px 20px grey;
    margin-top: 15%;
    font-size: 4em;
    margin-bottom: 0.05em;    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
    text-align: center; 
}

#codePostal input, #indicationVille input{
    border-radius: 30px;
}


#codePostal{
    margin-bottom: 1em;
    margin-left: 2em ;

}

#indicationVille{
    margin-bottom: 15em;
    margin-right: 1em;
}

#ville{
    border-radius: 5em;
    width: 15em;
    height: 2.5em;
}

input{
    height: 3em;
    width: 15em;
    text-align: left;
    text-indent: 1em;
}

#codePostal button{
    border: none;
    background-color: transparent;
    margin-left: 1em;
}

#contenu{
    text-align: center;
    font-size: large;
    color: rgb(255, 255, 255);
    text-shadow: -0.06em 0.1em 0.5em black;
}

/* ------------------ CITY & DATE ------------------ */
.dateEnFonctionVille{
    text-align: center;
    margin: 1em;
}

h2{
    font-size:2.5em;
    text-shadow: -0.06em 0.1em 0.5em black;
    margin:0em;
    font-weight: lighter;
}

h3{
    margin:0em;
    font-weight: lighter;
}

/* ------------------ MAIN DATA ------------------ */
.donneesPrincipales{
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: -0.06em 0.1em 1em black;
}

.informationsTemperature{
    padding: 2em;
}

.temperature{
    font-size: 4em;
    margin: 0;
}

.ciel{
    font-size: 1.5em;
    text-align: center;
    margin: 0;
}

.infoImportantes{
    border-radius: 1em;
    padding: 0.8em;
    background-color:rgb(255, 255, 255, 0.15);;
}

.infoImportantesAuDessus{
    display: flex;
    text-align: center;
}

.infoImportantesEnDessous{
    display: flex;
    text-align: center;
}

#tempMax{
    font-size: 1.75em;
    margin: 0em;
}

#tempMin{
    font-size: 1.75em;
    margin: 0em;
}

#probaPluie{
    font-size: 1.75em;
    margin: 0em; 
}

#heureSol{
    font-size: 1.75em;
    margin: 0em;
}

#cupluie{
    font-size: 1.75em;
    margin: 0em;
}
#dirvent{
    font-size: 1.75em;
    margin: 0em;
}
#vemoy{
    font-size: 1.75em;
    margin: 0em;
}
#long{
    font-size: 1.75em;
    margin: 0em;
}
#lat{
    font-size: 1.75em;
    margin: 0em;
}

.valeurTexte{
    font-size: 0.75em;
    margin: 0;
}

.donnee {
    padding-inline: 1.5em;
    padding-block: 0.8em;
}

/* ------------------ SUP DATA ------------------ */
#donneesSupplementaires{
    border: 0.2em solid rgb(255, 255, 255, 0.35);
    border-radius: 1em;
    display: flex;
    justify-content: center;
    text-shadow: -0.06em 0.06em 1em black;
    box-sizing: border-box;
    padding: 1.5em;
    margin: 1.5em auto;
    max-width: 30em;
    visibility: hidden;
}

#cartographie, #pluvieux, #air{
    text-align: center;
}

/* ------------------ WEATHER PER DAY ------------------ */
#choixParJour{
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}


#combienDeJours{
    width: 4em;
    height: 2.5em;
    border: solid rgb(255, 255, 255, 0);
    border-radius: 0.5em;
    background-color: rgb(255, 255, 255, 0.5);
}

#selectionParJour{
    border: solid rgb(255, 255, 255, 0);
    border-radius: 1em;
    background-color: rgb(255, 255, 255, 0.15);
    max-width: 30em;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 0em;
    margin: 1.5em auto;
    max-width: 32em;
    margin-bottom: 5em;
    visibility: hidden;
}

.oneDay{
    padding: 0.5em;
    text-align: center;
    cursor: pointer;
}

.tempMinMax{
    font-size: 1em;
    margin: 0;
}

.dateParJour{
    font-size: 0.75em;
    margin: 0;
}

.imageParJour{
    margin: 0;
    font-size: 2.5em;
}

#temperatureActuelle{
    margin: 0;
    font-size: 2.5em;
}

/* ------------------ FOOTER ------------------ */
footer{
    background-color: rgb(255, 255, 255, 0.25);
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 1em;
    bottom: 0;
    width: 100%;
    margin-top: auto;
}

#WeatherCard {
    position: relative;
    width: auto;
    height: auto;
    overflow: hidden; /* Pour éviter le dépassement */
    max-width: 32em;
    margin-left: auto;
    margin-right: auto;
    margin-top: -5em;
    padding: 1em;
    box-sizing: border-box;
}

#pluieCanvas {
    position: absolute;
    z-index: -1; /* En arrière-plan */
    width: 100%;
    height: 100%;
}

/*---------------- MEDIA QUERY -------------------*/


@media screen and (max-width : 1440px) {
    #parametres{ 
        margin-right: 2em;
    }
    #revenirArriere{
        margin-left: 2em;
    }
}

@media screen and (max-width: 840px) {
    #parametres{
        margin-top: 10em;
        margin-right: 2em;
    }
    #revenirArriere{
        margin-top: 10em;
        margin-left: 2em;
    }
}


@media screen and (max-width: 810px) {
    #parametres{
        margin-top: 10em;
        margin-right: 2em;
    }
    #revenirArriere{
        margin-top: 10em;
        margin-left: 2em;
    }
}

@media screen and (max-width: 600px) {
    #WeatherCard{
        font-size: 0.8em;
    }
}

@media screen and (max-width: 500px) {
    #WeatherCard{
        font-size: 0.8em;
        margin-top: 0em;
    }
    #parametres{
        margin-top: 12em;
    }
    #revenirArriere{
        margin-top: 12em;
    }
}

@media screen and (max-width: 428px) {
    #parametres{
        margin-top: 12em;
    }
    #revenirArriere{
        margin-top: 12em;
    }
    #donneesSupplementaires{
        width: 25em ;
    }
    #formulaire{
        width: 130px;
    }
    #selectionParJour{
        width: 25em;
    }
    .imageParJour{
        font-size: 2em;
    }
    .oneDay{
        padding: 0.25em;
    }
    .dateParJour{
        font-size: 0.75em;
        margin: 0;
    }
    .imageParJour{
        margin: 0;
        font-size: 1.5em;
    }
    .tempMinMax{
        font-size: 0.9em;
        margin: 0;
    }
}

@media screen and (max-width: 414px) {
    #WeatherCard{
        max-width: 27em;
    }
    #selectionParJour{
        width: 25em;
    }
    .imageParJour{
        font-size: 2em;
    }
    .oneDay{
        padding: 0.25em;
    }
    .dateParJour{
        font-size: 0.75em;
        margin: 0;
    }
    .imageParJour{
        margin: 0;
        font-size: 1.5em;
    }
    .tempMinMax{
        font-size: 0.9em;
        margin: 0;
    }
    #cupluie{
        font-size: 1.5em;
        margin: 0em;
    }
    #dirvent{
        font-size: 1.5em;
        margin: 0em;
    }
    #vemoy{
        font-size: 1.5em;
        margin: 0em;
    }
    #long{
        font-size: 1.5em;
        margin: 0em;
    }
    #lat{
        font-size: 1.5em;
        margin: 0em;
    }
    
}
/*
@media screen and (max-width: 390px) {
    #parametres{
        margin-top: 12em;
    }
    #revenirArriere{
        margin-top: 12em;
    }
    #donneesSupplementaires{
        width: 22em ;
    }
    #formulaire{
        width: 130px;
    }
    #selectionParJour{
        width: 23em;
    }
    .imageParJour{
        font-size: 1.5em;
    }
    .oneDay{
        padding: 0.25em;
    }
    .dateParJour{
        font-size: 0.75em;
        margin: 0;
    }
    .imageParJour{
        margin: 0;
        font-size: 1.5em;
    }
    .tempMinMax{
        font-size: 0.9em;
        margin: 0;
    }
    #infosPrincipales{
        width: 23em;
    }
    #cupluie{
        font-size: 1.5em;
        margin: 0em;
    }
    #dirvent{
        font-size: 1.5em;
        margin: 0em;
    }
    #vemoy{
        font-size: 1.5em;
        margin: 0em;
    }
    #long{
        font-size: 1.5em;
        margin: 0em;
    }
    #lat{
        font-size: 1.5em;
        margin: 0em;
    }
}

@media screen and (max-width: 375px) {
    #parametres{
        margin-top: 13em;
    }
    #revenirArriere{
        margin-top: 13em;
    }
    #donneesSupplementaires{
        width: 22em ;
    }
    #formulaire{
        width: 130px;
    }
    #selectionParJour{
        width: 23em;
    }
    .imageParJour{
        font-size: 1.5em;
    }
    .oneDay{
        padding: 0.25em;
    }
    .dateParJour{
        font-size: 0.75em;
        margin: 0;
    }
    .imageParJour{
        margin: 0;
        font-size: 1.5em;
    }
    .tempMinMax{
        font-size: 0.9em;
        margin: 0;
    }
    #infosPrincipales{
        width: 22em;
    }
    #cupluie{
        font-size: 1.5em;
        margin: 0em;
    }
    #dirvent{
        font-size: 1.5em;
        margin: 0em;
    }
    #vemoy{
        font-size: 1.5em;
        margin: 0em;
    }
    #long{
        font-size: 1.5em;
        margin: 0em;
    }
    #lat{
        font-size: 1.5em;
        margin: 0em;
    }
}


@media screen and (max-width: 360px) {
    #parametres{
        margin-top: 13em;
    }
    #revenirArriere{
        margin-top: 13em;
    }
    #donneesSupplementaires{
        width: 21em ;
    }
    #formulaire{
        width: 130px;
    }
    #selectionParJour{
        width: 22em;
    }
    .imageParJour{
        font-size: 1.5em;
    }
    .oneDay{
        padding: 0.25em;
    }
    .dateParJour{
        font-size: 0.75em;
        margin: 0;
    }
    .imageParJour{
        margin: 0;
        font-size: 1.5em;
    }
    .tempMinMax{
        font-size: 0.9em;
        margin: 0;
    }
    #infosPrincipales{
        width: 21em;
    }
    #cupluie{
        font-size: 1.5em;
        margin: 0em;
    }
    #dirvent{
        font-size: 1.5em;
        margin: 0em;
    }
    #vemoy{
        font-size: 1.5em;
        margin: 0em;
    }
    #long{
        font-size: 1.5em;
        margin: 0em;
    }
    #lat{
        font-size: 1.5em;
        margin: 0em;
    }
}*/

@media screen and (max-width: 345px) {
    /*#parametres{
        margin-top: 12em;
    }
    #revenirArriere{
        margin-top: 12em;
    }*/
    #WeatherCard{
        max-width: 24em;
    }
    #donneesSupplementaires{
        width: 22em ;
    }/*
    #formulaire{
        width: 130px;
    }
    #selectionParJour{
        width: 19em;
    }
    .imageParJour{
        font-size: 1em;
    }
    .oneDay{
        padding: 0.25em;
    }
    .dateParJour{
        font-size: 0.6em;
        margin: 0;
    }
    .imageParJour{
        margin: 0;
        font-size: 1em;
    }
    .tempMinMax{
        font-size: 0.7em;
        margin: 0;
    }
    #infosPrincipales{
        width: 19em;
    }
    #cupluie{
        font-size: 1em;
        margin: 0em;
    }
    #dirvent{
        font-size: 1em;
        margin: 0em;
    }
    #vemoy{
        font-size: 1em;
        margin: 0em;
    }
    #long{
        font-size: 1em;
        margin: 0em;
    }
    #lat{
        font-size: 1em;
        margin: 0em;
    }
    #titre{
        font-size:3.5em;
    }*/
}
/*
@media screen and (max-width: 320px) {
    #WeatherCard{
        font-size: 0.7em;
        max-width: 100%;
    }
}

@media screen and (max-width: 320px) {
    #parametres{
        margin-top: 12em;
    }
    #revenirArriere{
        margin-top: 12em;
    }
    #donneesSupplementaires{
        width: 19em ;
    }
    #formulaire{
        width: 130px;
    }
    #selectionParJour{
        width: 19em;
    }
    .imageParJour{
        font-size: 1em;
    }
    .oneDay{
        padding: 0.25em;
    }
    .dateParJour{
        font-size: 0.6em;
        margin: 0;
    }
    .imageParJour{
        margin: 0;
        font-size: 1em;
    }
    .tempMinMax{
        font-size: 0.7em;
        margin: 0;
    }
    #infosPrincipales{
        width: 19em;
    }
    #cupluie{
        font-size: 1em;
        margin: 0em;
    }
    #dirvent{
        font-size: 1em;
        margin: 0em;
    }
    #vemoy{
        font-size: 1em;
        margin: 0em;
    }
    #long{
        font-size: 1em;
        margin: 0em;
    }
    #lat{
        font-size: 1em;
        margin: 0em;
    }
    #titre{
        font-size:3.5em;
    }
}

@media screen and (max-width: 300px) {
    #parametres{
        margin-top: 10em;
    }
    #revenirArriere{
        margin-top: 10em;
    }
    #donneesSupplementaires{
        width: 19em ;
    }
    #formulaire{
        width: 130px;
    }
    #selectionParJour{
        width: 18em;
    }
    .imageParJour{
        font-size: 1em;
    }
    .oneDay{
        padding: 0.25em;
    }
    .dateParJour{
        font-size: 0.6em;
        margin: 0;
    }
    .imageParJour{
        margin: 0;
        font-size: 1em;
    }
    .tempMinMax{
        font-size: 0.7em;
        margin: 0;
    }
    #infosPrincipales{
        width: 19em;
    }
    #cupluie{
        font-size: 1em;
        margin: 0em;
    }
    #dirvent{
        font-size: 1em;
        margin: 0em;
    }
    #vemoy{
        font-size: 1em;
        margin: 0em;
    }
    #long{
        font-size: 1em;
        margin: 0em;
    }
    #lat{
        font-size: 1em;
        margin: 0em;
    }
    #titre{
        font-size:3.5em;
    }
}*/