/* A voir avec Mathis */
#tools {
    --header-z-index: 5050;
    --font-extralight-weight: 200;

    --ai-moving-box-z-index: 5060;
    --ai-hidden-box-z-index: -5;
    --ai-transistion-delay: .2s;
    --ai-gap: 1.25rem;
    --ai-box-border-width: 1px;
    --ai-title-font-size: 1.17rem;
    --ai-category-font-size: 1rem;
    --ai-description-font-size: 1rem;
    --ai-zoom: 1.03;
    --ai-width: 20rem;
    --ai-image-heigth: 11.5rem;
}

/* A voir avec Mathis */
#tools.dark {
    --background-color: var(--secondary);
    --header-color: rgb(18 26 39 / 70%);
    --box-border-color: #1f364d;
    --box-background: #1f364d;
    --box-shadow: 0 0 var(--ai-gap) rgb(0 0 0 / 60%);
    --ai-box-border-color: #141819;
    --ai-box-background: #373955;
    --low-color: #919191;
    --medium-color: #aaaaaa;
    --hight-color: #e2e2e2;
    --selection-color: #7e94a9;
}

body#tools {
    padding-top: var(--headerH);
}

#tools header {
    overflow: initial;
    z-index: var(--header-z-index);
    position: fixed;
    top: 0;
    background-color: var(--header-color);
    backdrop-filter: blur(5px);
}

#tools .menu {
    height: 100vh;
}

@keyframes hideAiBox {
    0% {
        position: fixed;
        z-index: var(--ai-moving-box-z-index);
        bottom: 0;
        right: 0;
        opacity: 1;
        margin: var(--ai-gap);
    }

    99% {
        position: fixed;
        z-index: var(--ai-moving-box-z-index);
        bottom: 101vh;
        right: 101vw;
        opacity: 0;
        margin: 0;
    }

    100% {
        visibility: hidden;
        position: fixed;
        z-index: var(--ai-hidden-box-z-index);
        bottom: 101vh;
        right: 101vw;
        opacity: 0;
        margin: 0;
    }
}

@keyframes showAiBox {
    0% {
        opacity: 0;
        margin: 0;
    }

    100% {
        opacity: 1;
        margin: var(--ai-gap);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#tools .category-menu {
    position: relative;
    display: inline-block;
    margin: 0.25rem 3.75rem 0 0;
    text-transform: uppercase;
    font-weight: var(--font-extralight-weight);
}

#tools .category-menu #toogle-category-menu>svg {
    transform: translate(0, -0.15rem);
}

#tools .category-menu ul {
    position: absolute;
    top: 1.5rem;
    left: 0;
    width: 10rem;
    padding: var(--ai-gap) 0 var(--ai-gap) var(--ai-gap);
    border: var(--ai-box-border-width) solid var(--box-border-color);
    border-radius: calc(var(--ai-box-border-width) + var(--scrollbar-width)/2);
    background-color: var(--ai-box-background);
    box-shadow: var(--box-shadow);
    list-style: none;
}

#tools .category-menu li:not(:last-of-type) {
    margin-bottom: 1rem;
}

#tools .category-menu input[type=checkbox] {
    position: relative;
    cursor: pointer;
    margin-right: 1rem;
}

#tools .category-menu input[type=checkbox]+label {
    cursor: pointer;
    user-select: none;
}

#tools .category-menu input[type=checkbox]::before {
    content: "";
    display: block;
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: -.1rem;
    left: -.15rem;
    border: 1px solid var(--hight-color);
    border-radius: 35%;
    background-color: var(--ai-box-background);
    transition: box-shadow var(--ai-transistion-delay) ease-in;
}

#tools .category-menu input[type=checkbox]:hover::before {
    box-shadow: var(--box-shadow);
    background: var(--background-color);
}

#tools .category-menu input[type=checkbox]:checked::after {
    content: "";
    display: block;
    width: .6rem;
    height: 1rem;
    border: solid var(--hight-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    top: -.35rem;
    left: .35rem;
}

#tools .category-menu input[type=checkbox]::after {
    transition:
        width var(--ai-transistion-delay) ease-in,
        height var(--ai-transistion-delay) ease-in,
        top var(--ai-transistion-delay) ease-in,
        left var(--ai-transistion-delay) ease-in;
}

#tools .category-menu input[type=checkbox]:hover::after {
    width: .7rem;
    height: 1.1rem;
    top: -.5rem;
    left: .25rem;
}

#tools .ai-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin: calc(3.125rem - var(--ai-gap)) 0 5rem 0;
    gap: 0;
}

#tools .ai-box {
    margin: var(--ai-gap);
    display: block;
    width: var(--ai-width);
    max-width: 90vw;
    overflow: hidden;
    border: var(--ai-box-border-width) solid var(--ai-box-border-color);
    border-radius: var(--ai-gap);
    background-color: var(--ai-box-background);
    transition:
        transform var(--ai-transistion-delay) ease-in,
        box-shadow var(--ai-transistion-delay) ease-in,
        bottom calc(2 * var(--ai-transistion-delay)) ease-in,
        right calc(2 * var(--ai-transistion-delay)) ease-in,
        margin calc(2 * var(--ai-transistion-delay)) ease-in,
        opacity calc(2 * var(--ai-transistion-delay)) ease-in;
    animation: showAiBox 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

#tools .ai-box.masked {
    animation: hideAiBox 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

#tools .ai-box:hover {
    box-shadow: var(--box-shadow);
}

#tools .ai-box:hover:nth-child(even) {
    transform: scale(var(--ai-zoom)) rotate(-1deg);
}

#tools .ai-box:hover:nth-child(odd) {
    transform: scale(var(--ai-zoom)) rotate(1deg);
}

#tools .ai-box p {
    margin: 0 0 var(--ai-gap) 0;
    text-align: justify;
}

#tools .ai-image {
    height: var(--ai-image-heigth);
    background-color: var(--ai-box-background);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

#tools .ai-title {
    margin: var(--ai-gap) 0;
    padding: 0 var(--ai-gap);
    font-size: var(--ai-title-font-size);
}

#tools .ai-category {
    padding: 0 var(--ai-gap);
    text-transform: capitalize;
    font-size: var(--ai-category-font-size);
    font-weight: var(--font-extralight-weight);
    color: var(--primary);
}

#tools .ai-description {
    padding: 0 var(--ai-gap);
    font-size: var(--ai-description-font-size);
    font-weight: var(--font-extralight-weight);
}

/* -------------- Petits écrans -------------- */
@media all and (max-width:750px) {

    #tools header .menu-btn {
        margin-left: 1rem;
    }

    #tools .category-menu {
        margin-right: 1rem;
        margin-left: 1rem;
    }

    #tools .category-menu #toogle-category-menu>svg {
        display: none;
    }

    #tools .ai-box {
        box-shadow: var(--box-shadow);
    }

    #tools .ai-box:hover:nth-child(even),
    #tools .ai-box:hover:nth-child(odd) {
        transform: none;
    }
}

/* -------------- Fin Petits écrans -------------- */