body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    text-align: center;
    background-color: #94b4b4;
}
.textConstruction {
    font-size: 2em;
    margin: 0.5em 0;
}
.logoName {
    width: 60em;
    height: auto;
}
.sunPanelImg {
    display: block; /* Laissez display:block pour animer la visibilité */
    opacity: 0;
    width: 15em;
    position: absolute;
    top: -50px; /* Commence au-dessus de sa position finale */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 1s ease, top 1s ease;
}

.sunPanelImg.visible {
    opacity: 1;
    top: 5%;
}

/* Media Query pour les écrans de taille moyenne (tablette) */
@media (max-width: 768px) {
    .textConstruction {
        font-size: 1.75em; /* Légèrement plus petit sur les tablettes */
    }
}

/* Media Query pour les petits écrans (mobiles) */
@media (max-width: 600px) {
    .textConstruction {
        font-size: 1.5em; /* Encore plus petit pour les mobiles */
    }
    .logoName {
        width: 20em; /* Ajustez cette valeur pour les petits écrans */
    }
    .sunPanelImg{
        width: 10em;
    }
}

/* Media Query pour les très petits écrans */
@media (max-width: 480px) {
    .textConstruction {
        font-size: 1.25em; /* Plus petit pour s'adapter aux petits appareils */
    }
    .logoName {
        width: 20em; /* Encore plus petit pour les très petits appareils */
    }
    .sunPanelImg{
        width: 10em;
    }
    .sunPanelImg.visible {
        opacity: 1;
        top: 15%;
    }
}