* {
    box-sizing: border-box;
}
.qs{
    font-family:Quicksand,medium 500;
} 
body{
    background:radial-gradient(rgb(172, 210, 234),rgb(150, 174, 200));
}
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('..Ffichiais/meteofond.jpg');
    opacity: 1; /* Ajuste la transparence ici */
    background-repeat: repeat;
    background-size: 450px;
    z-index: -1; /* Met l'image derrière le contenu */
    min-height:100%;
}
h1{
    text-align:center ;
    font-size:auto ;
}
p{
    font-size: 25px;
    text-align:center;
}

on{
    z-index:2;
    text-align:center;
}
.titre{
    height:30px;
}
.sp{
    /*border: 1px solid rgb(181, 218, 240) ;*/
    width:50%;
    display: block;
}
.sp.g{
    float:left;
}
.sp.d{
    float:right;

}
.sp p, .sp on {
    position: absolute; /* Positionnement absolu pour superposer le texte */
    top: 50%; /* Centrer verticalement */
    left: 50%; /* Centrer horizontalement */
    transform: translate(-50%, -50%); /* Ajuster pour centrer parfaitement */
    z-index: 2; /* S'assurer que le texte soit au-dessus des images */
    color: white; /* Couleur du texte, ajustez si nécessaire */
}
img{
    z-index:1;
    opacity:1;
    max-width: 100%;
    max-height: 100%;
    display:block;
}
.case {
    /*border: 10px solid rgb(96, 139, 163);*/
    background:radial-gradient(rgba(23, 71, 125, 0),rgba(119, 141, 188, 0.73)) ; /* Fond bleu foncé transparent */
    position: relative; /* Nécessaire pour le positionnement des éléments enfants */

}
#retour{
    width:100px;
    position: absolute; /* Positionnement absolu */
    top: 10px; /* Ajustez la position verticale */
    left: 10px; /* Ajustez la position horizontale */
    z-index: 3; /* Assurez-vous qu'il soit au-dessus des autres éléments */
}
#pression{
    float:left;

    width:100%;



}
#temperature{
    width:48%;
    float:right;



}
#igrometrie{
    float:left;

    width:48%;


}