/* 🌱 Base : styles mobiles en priorité */

#hero-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    height: var(--banner-height);
    width: 100%;
    text-align: center;
    padding: 0 30px;
    box-sizing: border-box;


    #profil-picture-box {
        position: relative;
        margin-top: 100px;
        margin-bottom: 90px;

        #dynamic-decoration {
            display: none;
        }

        #profil-picture {
            position: absolute;
            top: -130px;
            right: -100px;
            width: 200px;
            border-radius: 50%;
            z-index: 0;
        }

        .circle-deco1 {
            position: absolute;
            top: -130px;
            right: -100px;
            height: 200px;
            width: 200px;
            border-radius: 50%;
            z-index: 2;
        }

        .circle-deco1 {
            background: radial-gradient(transparent 0%,
                    transparent 66%,
                    var(--gold4) 66%,
                    var(--gold3) 67.8%,
                    var(--gold1) 68.2%,
                    var(--gold4) 70.6%);
        }
    }

    #title-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            margin-top: 20px;
            font-size: 1rem;
            font-weight: 300;
            letter-spacing: 2.8px;
            word-spacing: 4px;
            color: var(--font1);
            font-style: italic;
            line-height: 1.6;
        }
    }
}

/* 📱 Mobile large (481px et plus) */
@media (min-width: 481px) {}

/* 📲 Tablettes (768px et plus) */
@media (min-width: 768px) {}

/* 💻 Ordinateurs portables (1025px et plus) */
@media (min-width: 1025px) {

    #hero-banner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: calc(-1 * var(--nav-height));


        #profil-picture-box {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--banner-height);
            height: var(--banner-height);
            margin-top: 600px;
            margin-bottom: 0;

            .circle-deco1,
            .circle-deco2 {
                position: absolute;
                top: calc(-1 * var(--banner-height) / 2);
                right: calc(var(--banner-height) / 16);
                height: var(--banner-height);
                width: var(--banner-height);
                border-radius: 50%;
                z-index: 2;
            }

            .circle-deco1 {
                background: radial-gradient(transparent 0%,
                        transparent 68%,
                        var(--gold4) 68%,
                        var(--gold3) 68.8%,
                        var(--gold1) 69.2%,
                        var(--gold4) 70.6%);
            }

            .circle-deco2 {
                background: radial-gradient(transparent 0%,
                        transparent 62%,
                        var(--gold4) 62%,
                        var(--gold3) 62.8%,
                        var(--gold1) 63.2%,
                        var(--gold4) 64.6%,
                        transparent 64.8%,
                        transparent 100%);
            }

            #dynamic-decoration {
                display: inline-block;
                position: absolute;
                top: calc(-1 * var(--banner-height) / 2 - 50px);
                right: calc(var(--banner-height) / 16 - 50px);
                height: calc(var(--banner-height) + 100px);
                width: calc(var(--banner-height) + 100px);
                border-radius: 50%;
                z-index: 0;
                animation: rotating-decoration 120s infinite linear;
            }

            #profil-picture {
                top: calc(-1 * var(--banner-height) / 2);
                right: calc(var(--banner-height) / 16);
                height: var(--banner-height);
                width: var(--banner-height);
                border-radius: 50%;
                z-index: 0;
            }

            #circle-halo {
                position: absolute;
                top: calc(-1 * var(--banner-height) / 2);
                right: calc(var(--banner-height) / 16);
                height: var(--banner-height);
                width: var(--banner-height);
                border-radius: 50%;
                background: radial-gradient(transparent 0%, var(--background1) 80%);
                z-index: 1;
            }
        }

        #title-box {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: center;
            width: 60%;
            height: 100%;

            h1,
            h2,
            div {
                margin: 15px 0;
            }

            h1 {
                margin-left: 30px;
            }

            h2 {
                margin-left: 38px;
            }

            p {
                margin-left: 24px;
            }
        }
    }

    /* Annimation de l'id #dynamic-decoration */
    @keyframes rotating-decoration {
        0% {
            transform: rotate(0deg);
            opacity: 15%;
        }

        10% {
            opacity: 40%;
        }

        20% {
            opacity: 15%;
        }

        30% {
            opacity: 40%;
        }

        40% {
            opacity: 15%;
        }

        50% {
            opacity: 40%;
        }

        60% {
            opacity: 15%;
        }

        70% {
            opacity: 40%;
        }

        80% {
            opacity: 15%;
        }

        90% {
            opacity: 40%;
        }

        100% {
            transform: rotate(360deg);
            opacity: 15%;
        }
    }
}


/* 🖥 Grands écrans (1367px et plus) */
@media (min-width: 1367px) {}

/* 🖥📺 Ultra-large (1920px et plus) — optionnel */
@media (min-width: 1920px) {

    .circle-deco1,
    .circle-deco2 {
        position: absolute;
        top: -66px;
        right: 100px;
        height: 600px;
        width: 600px;
        border-radius: 50%;
        z-index: 2;
    }

    .circle-deco1 {
        background: radial-gradient(transparent 0%,
                transparent 68%,
                var(--gold4) 68%,
                var(--gold3) 68.8%,
                var(--gold1) 69.2%,
                var(--gold4) 70.6%);
    }

    .circle-deco2 {
        background: radial-gradient(transparent 0%,
                transparent 62%,
                var(--gold4) 62%,
                var(--gold3) 62.8%,
                var(--gold1) 63.2%,
                var(--gold4) 64.6%,
                transparent 64.8%,
                transparent 100%);
    }

    .circle-deco3 {
        position: absolute;
        top: -116px;
        right: 50px;
        height: 700px;
        width: 700px;
        border-radius: 50%;
        z-index: 2;
        background: rgba(255, 0, 0, 0.333);
    }

    #profil-picture {
        top: -66px;
        right: 100px;
        width: 600px;
        border-radius: 50%;
        z-index: 0;
    }

    #circle-halo {
        position: absolute;
        top: -66px;
        right: 100px;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(transparent 0%, var(--background1) 80%);
        z-index: 1;
    }

    #title-box {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        width: 60%;
        /* margin-left: 400px; */
        /* background: red; */
        height: 100%;
    }

    #title-box h1,
    #title-box h2,
    #title-box div {
        margin: 30px 0;
    }

    .circle-deco1,
    .circle-deco2 {
        position: absolute;
        top: -66px;
        right: 100px;
        height: 600px;
        width: 600px;
        border-radius: 50%;
    }

    .circle-deco1 {
        background: radial-gradient(transparent 0%,
                transparent 68%,
                var(--gold4) 68%,
                var(--gold3) 68.8%,
                var(--gold1) 69.2%,
                var(--gold4) 70.6%);
    }

    .circle-deco2 {
        background: radial-gradient(transparent 0%,
                transparent 62%,
                var(--gold4) 62%,
                var(--gold3) 62.8%,
                var(--gold1) 63.2%,
                var(--gold4) 64.6%,
                transparent 64.8%,
                transparent 100%);
    }

    /* #title-box{
        width: 60%;
        margin-left: 600px;
    } */

}