:root
{
    --theme-transition: background-color 0.3s ease, color 0.3s ease;
}


html[data-theme]
{
    transition: var(--theme-transition);
}

html[data-theme] *
{
    transition: var(--theme-transition);
}

html body
{
    overflow-x: clip;

    svg
    {
        min-width: 1.5rem !important;
    }
}

h1,
h2,
h3
{
    font-family: "Quattrocento", serif;
    font-weight: 700;
    font-style: normal;
    border-bottom: 1px solid gray;
}

h4,
h5,
h6
{
    font-family: "Poppins", serif;
    font-weight: 800;
    font-style: normal;
}

p
{
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
}


article
{


    p
    {
        padding: 1rem;
    }
}

body>header,
body>main,
body>footer
{
    max-width: 100%;

}

body>header
{

    box-shadow: 0 2rem 2rem rgba(255, 255, 255, 0.233);

    img
    {
        height: 3rem;
        border-radius: 50%;
        filter: drop-shadow(0 0.5rem 1rem rgb(255, 255, 255));
    }

    .hub img
    {
        border-radius: 10%;
    }

    navbar-item:hover
    {
        box-shadow: 0 0 0.5rem rgb(255, 255, 255);
    }

    div.theme
    {
        margin-right: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        svg
        {
            min-width: 1rem
        }
    }


}

.grid
{
    padding: 1.5rem
}


body>footer
{


    box-shadow: 0 -2rem 2rem rgba(255, 255, 255, 0.233);
    max-height: 3rem;




    nav
    {
        width: 100%;

        ul
        {
            width: 100%;
            display: flex;
            justify-content: center;

            img
            {
                border-radius: 50%;
                filter: grayscale(1);
                max-height: 2rem;
                box-shadow: 0 0 0.5rem rgb(255, 255, 255);
                transition: all 0.3s ease-in-out !important;

                &:hover
                {
                    border-radius: 15%;
                    filter: grayscale(0);
                }
            }




        }
    }
}

html[data-theme="light"]
{
    body>header
    {
        box-shadow: 0 2rem 2rem rgb(0 0 0 / 34%)
    }

    body>footer
    {
        box-shadow: 0 -2rem 2rem rgb(0 0 0 / 34%)
    }
}

section.descriptif
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h3
    {
        text-align: center;
    }
}

div.overlay
{
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100vh;
    opacity: 0.65;
    background-image: url("../img/background-MNPsMa5.webp");
    background-size: cover;
    background-color: #000;
    pointer-events: none;
    mix-blend-mode: hard-light;
    box-sizing: border-box;


}

@keyframes shadowmoove
{
    0%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 0rem 0rem 30vw 3rem black inset;
    }

    5%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 2rem 2rem 30vw 3rem black inset;
    }

    10%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 4rem 4rem 30vw 3rem black inset;
    }

    15%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 5rem 5rem 30vw 3rem black inset;
    }

    20%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 4rem 4rem 30vw 3rem black inset;
    }

    25%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 2rem 2rem 30vw 3rem black inset;
    }

    30%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 0rem 0rem 30vw 3rem black inset;
    }

    35%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, -2rem -2rem 30vw 3rem black inset;
    }

    40%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, -4rem -4rem 30vw 3rem black inset;
    }

    45%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, -5rem -5rem 30vw 3rem black inset;
    }

    50%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, -4rem -4rem 30vw 3rem black inset;
    }

    55%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, -2rem -2rem 30vw 3rem black inset;
    }

    60%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 0rem 0rem 30vw 3rem black inset;
    }

    65%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 2rem 2rem 30vw 3rem black inset;
    }

    70%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 4rem 4rem 30vw 3rem black inset;
    }

    75%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 5rem 5rem 30vw 3rem black inset;
    }

    80%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 4rem 4rem 30vw 3rem black inset;
    }

    85%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 2rem 2rem 30vw 3rem black inset;
    }

    90%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 0rem 0rem 30vw 3rem black inset;
    }

    95%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, -2rem -2rem 30vw 3rem black inset;
    }

    100%
    {
        box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 0rem 0rem 30vw 3rem black inset;
    }
}


.lighter:not([aria-busy=true])
{
    animation: shadowmoove 1s infinite alternate ease-in-out;
    background-attachment: initial !important;
    animation-duration: 12s !important;
    animation-delay: 0s !important;
    animation-iteration-count: infinite !important;
}

/* Déplacer ces styles en dehors de la media query et les mettre au niveau racine */
.lighter
{
    animation: shadowmoove 1s infinite alternate ease-in-out;
    --lighter-size: max(150vw, 150vh);
    box-sizing: content-box;
    mix-blend-mode: hard-light;
    opacity: 0.45;
    box-shadow: 0 0 20vw 3rem black, 0 0 100vw 10rem black, 0 0 30vw 3rem black inset;
    position: fixed;
    border-radius: 50%;
    background-color: #ffffffd0;
    width: var(--lighter-size);
    height: var(--lighter-size);
    z-index: +1;
    transition: box-shadow 0.3sease-in-out, transform 0.1slinear !important;
    filter: blur(1rem);
}

.lighter.clicked
{
    width: 5vw;
    height: 5vw;
    transition: box-shadow 0.1sease-in-out !important;
    box-shadow: 0 0 200vw 30vw black, 0 0 100vw 20rem black, 0 0 100vw 80vw black inset;
}


label[data-tooltip]
{
    border-bottom: none;
}

section.hero
{
    ul li
    {
        list-style: none;
    }

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    div.hub div
    {

        min-height: 15rem;
        background-color: gray;
        background-size: auto 100%;
        background-position: center;
        transition: filter 0.2s ease-in-out, background-size 0.3s ease-in-out !important;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
        filter: grayscale(0.9) contrast(1.2);

        &:hover
        {
            background-size: auto 120%;
            filter: grayscale(0) contrast(1);
        }

        a
        {

            display: block;
            min-height: 100%;
            min-width: 100%;
            text-align: center;
            align-content: center;

        }



        &.foundry
        {
            background-image: url("../img/foundry-tOqnWQg.jpg");
        }

        &.github
        {
            background-image: url("../img/github-IS1kmYa.jpg");
        }

        &.nextcloud
        {
            background-image: url("../img/Nextcloud_Logo.svg-FxWx_Uv.png");
        }

        &.youtube
        {
            background-image: url("../img/logo-youtube-png-transparent-tyRMAeI.webp");
        }
    }
}


p
{
    text-indent: 2rem;
}

p::first-letter
{
    text-transform: uppercase;
}

p::first-line
{
    padding-left: 1rem !important;
}

section.lumiere
{
    padding-top: 1rem;

    .grid>div
    {
        background-color: none;
    }

    h3
    {
        text-transform: uppercase;
        text-align: center;
    }

    li
    {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1rem;

        img
        {
            height: 5rem;
            width: auto;
            transition: height 0.3s ease-in-out !important;
            justify-self: flex-start;


        }
    }
}

@keyframes flash
{
    0%
    {
        opacity: 0;
    }

    10%
    {
        opacity: 1;
    }

    90%
    {
        opacity: 1;
    }

    100%
    {
        opacity: 0;
    }
}

aside.flashes
{
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    top: 1rem;
    z-index: 2000;
    pointer-events: none;



    .flash-message
    {
        border: 1px solid gray;
        animation: flash 5s ease-in-out;
        transition: all 0.3s ease-in-out !important;
        animation-duration: 3s !important;
        animation-delay: 0s !important;
        animation-iteration-count: 3 !important;
        padding: 1rem 3rem;
        border-radius: 0.3rem;
        opacity: 0;

        &.success
        {
            background-color: rgba(0, 128, 0, 0.466);
        }

        &.error
        {
            background-color: rgba(255, 0, 0, 0.555);
        }

        &.warning
        {
            background-color: rgba(255, 166, 0, 0.514);
        }

        &.notice
        {
            background-color: rgba(0, 0, 255, 0.445);
        }
    }
}

.chart-container
{
    --canvas-width: 100%;
    --canvas-height: min(20rem, 50vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &>.canvas-container
    {
        height: var(--canvas-height);
        width: var(--canvas-width);
    }
}

div.theme label[data-tooltip]
{
    border-bottom: none;

}

.employeur-card
{
    position: relative;
    min-width: 100%;
    padding-right: 0;
    transition: all 0.3s ease-in-out !important;

    h2
    {
        cursor: pointer;

        svg
        {
            max-width: 1rem;
        }
    }

    div.image
    {
        transition: all 0.3s ease-in-out !important;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.3;
        pointer-events: none;
        filter: grayscale(0.5);
    }

    &:hover
    {
        padding-right: 50%;

        div.image
        {
            filter: grayscale(0);
            width: 50%;
            opacity: 1;
            left: 50%
        }
    }


}

section.presentation
{
    article
    {
        background: linear-gradient(to right, 0% rgba(50, 50, 50, 1), 10% rgba(50, 50, 50, 0));
    }
}