body {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
    height: 100vh;           /* Occupe toute la hauteur de la fenêtre */
    margin: 0;               /* Supprime les marges par défaut */
}

h1 {
    font-size: 6vw;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 520;
    text-align: center;
}

h2 {
    font-family: 'Times New Roman', Times, serif;
    font-style: normal;
    text-align: center;
    font-size: 2.2vw;
    padding-bottom: 5vw;
}


/* Animation agrandissement complexe */
@keyframes agrandir {
    0% {
        transform: scale(0.5) translateY(-50px) rotateZ(-720deg); /* Rotation rapide au début */
        opacity: 0;
    }
    30% {
        transform: scale(1.5) translateY(0px) rotateZ(0deg); /* Agrandissement avec arrêt de rotation */
        opacity: 0.5;
    }
    100% {
        transform: scale(1) translateY(0px); /* Final: État normal */
        opacity: 1;
    }
}



/* Application de l'animation à .journal */
.journal {
    animation: agrandir 4s ease-in-out forwards 4s;
    transform-origin: center; /* L'agrandissement partira du centre */
    position: relative; /* Position relative pour le ciblage des éléments voisins */
    opacity: 0; /* Initialement invisible */
    visibility: hidden; /* Masquer avant l'animation */
}

/* Lorsque l'animation commence, rendre visible */
.journal.show {
    visibility: visible;
}

/* Apparition au survol */
.sst {
    position: fixed;
    top: 5%;
    right: -22%;
    width: 20%;
    text-align: left;
    font-size: 1.35vw;
    line-height: 1.1;
    font-style: italic;
    display: none; /* Caché par défaut */
    z-index: 1000; /* Positionné au-dessus des autres éléments */
}

/* Affiche .sst lors du survol de .journal */
.journal:hover + .sst {
    display: block;
}

/* Lien et hover pour les boutons et liens */
a {
    text-decoration: none;
    color: rgb(175, 175, 175);
}

a:hover {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: 600;
    background-color: white;
}

/* Boutons de menu */
.bouton-acceuil {
    display: grid;
    padding: -2vw 0vw;
    align-items: center; /* Alignement vertical au centre */
    justify-items: center; /* Alignement horizontal au centre */
}

.image-acceuil {
    width: 60vw;
    justify-self: center; /* Centrer horizontalement l'image dans la colonne */
}


@keyframes opacite {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes opacite2 {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.9;
    }
}

/* Menu stylisé avec effet d'apparition */
.menuAcc {
    font-size: 1.7vw;
    color: rgb(175, 175, 175);
    cursor: pointer;
    opacity: 0; /* Commence invisible */
    animation: opacite 1s linear forwards 6s; /* Animation d'apparition avec délai */
}

.menuAcc:hover {
    color: black;
    font-style: italic;
}

.menuUn {
    position: absolute;
    top: 1vw;
    text-align: center;
    left: 47%;
}

.menuDeux {
    position: absolute;
    bottom: 1vw;
    text-align: center;
    left: 45vw;
}

.menuTrois {
    position: absolute;
    bottom: 50vh;
    text-align: center;
    left: 1vw;
}

.menuQuatre {
    position: absolute;
    bottom: 50vh;
    text-align: center;
    right: 1vw;
}

.attenteFond{
    opacity: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(235, 235, 235, 0.885);
    animation: opacite2 1s linear forwards 7s; /* Animation d'apparition avec délai */
}
.attente {
    opacity: 0; /* Commence invisible */
    animation: opacite2 1s linear forwards 7s; /* Animation d'apparition avec délai */
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg); /* Centre verticalement et horizontalement, inclinaison légère */
    color: white; /* Texte en blanc */
    background-color: black; /* Surlignage noir */
    padding: 10px; /* Ajouter de l'espace autour du texte */
    text-align: center; /* Centre le texte */
    font-size: 2em; /* Taille du texte ajustable */
}