* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #fffae9;
    font-family: "Ingra", sans-serif;
    color: #041725;
    overflow-x: hidden;

    header {
        height: 78px;
    }

    main {
        width: auto;
        padding: 0 3rem;
        min-height: calc(100dvh - 78px);
        margin: 0 auto;
    }

    h1 {
        font-weight: bold;
        font-size: 60px;
        line-height: 70px;
        color: #041725;
    }

    p {
        color: #041725;
        font-size: 25px;
        text-align: left;
    }

    h2 {
        color: #041725;
        font-size: 40px;
    }

    .italique {
        font-style: italic;
    }

    .shantell {
        font-family: "shantell-sans-informalbouncy", sans-serif;
        color: #246fa8;
    }
}

/* Barre de Navigation  */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    padding: 0.25rem 3rem 0.25rem 3rem;
    background-color: #fffae9;
    z-index: 1000;

    .nav-links {
        font-size: 1, 5rem;
        display: flex;
        align-items: center;
        gap: 25px;
        font-weight: bold;

        a {
            color: #041725;

            &:hover {
                color: #246fa8;
            }
        }

        .btn-contact {
            background-color: #246fa8;
            border: #246fa8 solid 4px;
            border-radius: 2rem;
            padding: 0.75rem;
            color: #fffae9;
            transition: background-color 0.25s ease-in-out,
                border-color 0.25s ease-in-out;

            &:hover {
                background-color: #ff6633;
                border-color: #ff6633;
                color: #fffae9;
            }

            &:active {
                transform: scale(0.9);
            }
        }
    }

    .logo {
        align-items: center;
        display: flex;

        img {
            width: 4rem;
        }
    }
}

/* Fin de la barre de Navigation  */

/* Page d'accueil */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;

    p {
        max-width: 50rem;
        margin-top: 2rem;
    }

    .btn {
        display: flex;
        align-items: start;
        flex-direction: row;
        margin-top: 2rem;
        gap: 1rem;

        .btn-contact {
            font-size: 16px;
            font-weight: bold;
            background-color: #246fa8;
            border-radius: 3rem;
            border: #246fa8 solid 4px;
            color: #fffae9;
            cursor: pointer;
            padding: 0.75rem;
            text-align: center;
            transition: background-color 0.25s ease-in-out,
                border-color 0.25s ease-in-out;

            &:hover {
                background-color: #ff6633;
                border-color: #ff6633;
            }

            &:active {
                transform: scale(0.9);
                border-color: #ff6633;
            }
        }

        .btn-CV {
            font-size: 16px;
            font-weight: bold;
            background-color: transparent;
            border-radius: 2rem;
            border: #246fa8 solid 4px;
            color: #246fa8;
            cursor: pointer;
            padding: 0.75rem;
            text-align: center;
            transition: background-color 0.25s ease-in-out,
                border-color 0.25s ease-in-out;

            &:hover {
                background-color: #041725;
                border-color: #041725;
                color: #fffae9;
            }

            &:active {
                transform: scale(0.9);
                background-color: #041725;
                border-color: #041725;
            }
        }
    }

    .right {
        spline-viewer {
            width: 50rem;
            height: 50rem;

            iframe #logo {
                display: none !important;
                position: absolute;
            }
        }
    }
}

/* Fin de la page d'accueil */

/* Page des projets */
.work-section {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    .titre-projet {
        padding: 4rem 0;
    }

    img {
        align-items: center;
        width: 25rem;
    }

    p {
        margin-top: 1.5rem;
    }

    .categorie {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        gap: 4rem;
        width: 100%;

        img {
            width: 100%;
        }

        .work-items-motion-section {
            max-width: 30rem;
            padding: 1rem;
            border: #246fa8 solid 4px;
            border-radius: 2rem;
            transition: transform 0.3s ease-in-out;

            &:hover {
                transform: scale(1.1);

                h1 {
                    color: #246fa8;
                }
            }
        }

        .work-items-print-section {
            max-width: 30rem;
            padding: 1rem;
            border: #246fa8 solid 4px;
            border-radius: 2rem;
            color: #041725;
            transition: transform 0.3s ease-in-out;

            &:hover {
                transform: scale(1.1);

                h1 {
                    color: #246fa8;
                }
            }
        }

        .work-items-web-section {
            max-width: 30rem;
            padding: 1rem;
            border: #246fa8 solid 4px;
            border-radius: 2rem;
            color: #041725;
            transition: transform 0.3s ease-in-out;

            &:hover {
                transform: scale(1.1);

                h1 {
                    color: #246fa8;
                }
            }
        }
    }
}

/* Fin de la page des projets */

/* Page présentation */
.about-section {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 4rem;

    .about-me {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 6rem;

        img {
            max-width: 20rem;
            border-radius: 500px;
        }

        .droite {
            max-width: 40rem;
            display: flex;
            flex-direction: column;
            justify-content: center;

            p {
                max-width: 50rem;
                margin-top: 2rem;
            }
        }
    }

    .btn-back {
        display: flex;
        justify-content: flex-end;
        width: 100%;

        img {
            width: 40px;
            height: auto;
            transition: transform 0.3s ease-in-out;

            &:hover {
                transform: scale(1.1);
            }
        }
    }
}

/* Fin de la page de présentation */

/* Page MOTION */
.motion-page {
    display: flex;
    flex-direction: column;
    /* margin-top: 2rem; */
    min-height: 100dvh;

    p {
        margin-top: 2rem;
    }

    .projet {
        height: 100%;
        display: flex;
        justify-content: center;
        gap: 4rem;
        flex-direction: row;
        align-items: center;
        margin-top: 8rem;

        .projet-motion {
            max-width: 30rem;
            padding: 1rem;
            border: #246fa8 solid 4px;
            border-radius: 8%;
            color: #041725;
            transition: transform 0.3s ease-in-out;

            h2 {
                margin-top: 1rem;
            }

            p {
                margin-top: 1rem;
                max-width: 25rem;
            }

            img {
                width: 100%;
                border-radius: 8%;
            }

            &:hover {
                transform: scale(1.1);

                h2 {
                    color: #246fa8;
                }
            }
        }
    }
}

/* Fin de la page MOTION */

/* Page PRINT */
.print-page {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    min-height: 100dvh;

    p {
        margin-top: 2rem;
    }

    .projet {
        height: 100%;
        display: flex;
        justify-content: center;
        gap: 4rem;
        flex-direction: row;
        align-items: center;
        margin-top: 8rem;

        h2 {
            margin-top: 1rem;
        }

        p {
            margin-top: 1rem;
            max-width: 25rem;
        }

        .projet-print {
            max-width: 30rem;
            padding: 1.5rem;
            border: #246fa8 solid 4px;
            border-radius: 8%;
            color: #041725;
            transition: transform 0.3s ease-in-out;

            img {
                width: 100%;
                border-radius: 8%;
            }

            &:hover {
                transform: scale(1.1);

                h2 {
                    color: #246fa8;
                }
            }
        }
    }
}

/* Fin de la page PRINT */

/* Page WEB */
.web-page {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    min-height: 100dvh;
    width: 100%;

    p {
        margin-top: 2rem;
    }

    .projet {
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 6rem;
        align-items: center;
        margin-top: 8rem;

        h2 {
            margin-top: 1rem;
        }

        p {
            margin-top: 1rem;
            max-width: 25rem;
        }

        .projet-web {
            max-width: 30rem;
            padding: 1.5rem;
            border: #246fa8 solid 4px;
            border-radius: 8%;
            color: #041725;
            transition: transform 0.3s ease-in-out;

            img {
                width: 100%;
                border-radius: 8%;
            }

            &:hover {
                transform: scale(1.1);

                h2 {
                    color: #246fa8;
                }
            }
        }
    }
}

/* Fin de la page WEB */

/* Pied de page */
footer {
    padding: 1rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    a {
        transition: transform 0.3s ease-in-out;

        img {
            width: 40px;
            height: auto;
        }

        &:hover {
            transform: scale(1.1);
        }
    }
}

/* Fin du pied de page */

/*  Responsive MOBILE */
@media only screen and (max-width: 768px) {
    body {
        main {
            padding: 0 1.5rem;
        }

        h1 {
            font-size: 2rem;
            line-height: 2.5rem;
        }

        p {
            font-size: 1rem;
        }
    }

    .navbar {
        width: 100%;
        gap: 0.25rem;
        padding: 0.25rem 1rem;

        .logo {
            img {
                width: 3rem;
            }
        }

        .nav-links {
            flex-direction: row;
            align-items: center;
            gap: 1rem;
        }
    }

    .hero-section {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        min-height: 70vh;
        padding: 2rem 0;
    }

    .hero-section .right spline-viewer {
        max-height: 20rem;
        max-width: 20rem;
    }

    .work-section {
        min-height: 70vh;
        flex-direction: column;
        align-items: center;
        padding: 2rem 0;
        gap: 1rem;

        .titre-projet {
            padding: 2rem 0;
        }

        .categorie {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        &:hover {
            color: #246fa8;
        }

        img {
            width: 95%;
        }
    }

    .about-section {
        min-height: 70vh;
        flex-direction: column;
        align-items: center;
        padding: 2rem 0;

        .about-me img {
            width: 80%;
        }
    }

    .about-section .about-me {
        flex-direction: column;
        gap: 2rem;
    }

    .droite {
        flex-direction: column;
        justify-content: center;

        h1 {
            align-items: flex-start;
        }
    }

    .motion-page {
        min-height: 70vh;
        padding: 2rem;

        .projet {
            flex-direction: column;
            margin: 3rem 0;
            gap: 2rem;

            img {
                width: 90%;
            }

            a {
                font-size: 1rem;
            }

            &:hover {
                color: inherit;
                transform: none;
            }
        }
    }

    .print-page {
        min-height: 70vh;
        padding: 2rem;

        .projet {
            flex-direction: column;
            margin: 3rem 0;
            gap: 2rem;

            img {
                width: 90%;
            }

            a {
                font-size: 1rem;
            }

            &:hover {
                color: inherit;
                transform: none;
            }
        }
    }

    .web-page {
        min-height: 70vh;
        padding: 2rem;

        .projet {
            flex-direction: column;
            margin: 3rem 0;
            gap: 2rem;

            img {
                width: 90%;
            }

            a {
                font-size: 1rem;
            }

            &:hover {
                color: inherit;
                transform: none;
            }
        }
    }
}

/* Fin du responsive MOBILE */