@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@700&display=swap');

body {
    margin: 0;
    background-color: rgb(239, 239, 239);
    background-image: url('../Images/DeepFieldWebb.jpg');
    background-size: cover;
    z-index: -1;

}

.grillePrincipale {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
            "Nav"
            "Corps";
    gap: 5px;
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    position: absolute;
}

.Nav {
    grid-area: Nav;
    column-span: all;
}

    .grilleCorps {
        grid-area: Corps;
        position: relative;


        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 2fr 1fr;
        grid-template-areas:
                "titre titre titre"
                "txtUniv Logo txtTraj"
                "Logos Logos Logos";
        gap: 5px;

    }

    .titre {
        grid-area: titre;
        column-span: all;

        text-align: center;
        text-transform: uppercase;
        font-family: "Crimson Text", serif;
        font-weight: bold;
        letter-spacing: 30px;

        font-size: 5em;
        color: transparent;
        background: linear-gradient(to right, #ffffff, rgba(230, 114, 101, 0.85));
        -webkit-background-clip: text;
        background-clip: text;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Ombre pour le texte */
        animation: fallIn 2s ease-out forwards;
        animation-fill-mode: both;
    }

    .titre::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 60px;
        width: 100%;
        height: 5px;
        border-radius: 10px;
        background: linear-gradient(to right, #ffffff, rgba(230, 114, 101, 0.85)); /* Dégradé pour la barre */
        opacity: 0;

        animation: barIn 1s ease-out forwards;
        animation-delay: 2s;
    }

    .txtUniv {
        display: flex;
        flex-direction: column;
        grid-area: txtUniv;
        margin: 100px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50px;
        padding: 10px;
    }

        .txtUniv h2 {
            color: transparent;
            background: linear-gradient(to right, rgba(176, 66, 182, 0.85), rgba(197, 177, 229, 0.85));
            -webkit-background-clip: text;
            background-clip: text;

            text-align: center;
            font-family: 'Crimson Text', serif;
            font-size: 3em;
            font-weight: bold;
            text-transform: uppercase;
        }

        .txtUniv p {
            color: #ffffff;

            text-align: center;
            font-size: 1.5em;
        }

    .Logo {
        grid-area: Logo;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

        .Logo img {
            max-width: 100%;
            height: auto;
        }

    .txtTraj {
        display: flex;
        flex-direction: column;
        grid-area: txtTraj;
        margin: 100px;

        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50px;
        padding: 10px;
    }

        .txtTraj h2 {
            color: transparent;
            background: linear-gradient(to right, rgba(153, 194, 175, 0.85), rgba(39, 121, 124, 0.85));
            -webkit-background-clip: text;
            background-clip: text;

            text-align: center;
            font-family: 'Crimson Text', serif;
            font-size: 3em;
            font-weight: bold;
            text-transform: uppercase;
        }

        .txtTraj p {
            color: #ffffff;

            text-align: center;
            font-size: 1.5em;
        }

    .Logos {
        grid-area: Logos;
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

        .Logos img {
            max-height: 100%;
            width: 25%;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50px;
            padding: 10px;
        }

        .Logos #version {
            color: #ffffff;

            text-align: center;
            font-size: 1.5em;
        }

#watermark {
    position: fixed;
    bottom: 10px;
    right: 25px;
    color: rgba(255, 255, 255, 0.5)
}

@keyframes fallIn {
    0% {
        transform: translateY(-10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes barIn {
    0% {
        transform: scaleX(0) translateX(-1%);
        opacity: 0;
    }
    100% {
        transform: scaleX(0.5) translateX(-1%);
        opacity: 1;
    }
}