:root {
    --side-panel-easing: linear(0, 0.002 0.4%, 0.01 0.8%, 0.021 1.2%, 0.037 1.6%, 0.056 2%, 0.085 2.5%, 0.119 3%, 0.157 3.5%, 0.226 4.3%, 0.321 5.3%, 0.666 8.6%, 0.805 10%, 0.93 11.4%, 0.986 12.1%, 1.036 12.8%, 1.082 13.5%, 1.122 14.2%, 1.152 14.8%, 1.181 15.5%, 1.206 16.2%, 1.225 16.9%, 1.239 17.6%, 1.248 18.3%, 1.254 19.2%, 1.252 20.1%, 1.245 21%, 1.232 22%, 1.213 23%, 1.189 24.1%, 1.059 29.1%, 1.028 30.4%, 1.001 31.7%, 0.976 33.2%, 0.958 34.6%, 0.945 36.1%, 0.938 37.6%, 0.936 39.5%, 0.941 41.5%, 0.952 43.6%, 0.985 48.5%, 0.999 51%, 1.01 53.8%, 1.015 56.6%, 1.016 58.6%, 1.015 60.9%, 1.001 70.3%, 0.996 75.6%, 0.996 80.3%, 1.001 92.7%, 1);
}

//noinspection CssInvalidFunction
.scroll-watcher {
    height: .5rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--orange-50);
    scale: 0 1;
    animation: scroll-watcher linear;
    animation-timeline: scroll();
    transform-origin: left;
}

@keyframes scroll-watcher {
    to {
        scale: 1 1;
    }
}

h2 {
    background-color: var(--orange-50);
    border-radius: .25rem;
    /*color: var(--orange-90);*/
    padding: .5rem 1rem;
}

.series-index {
    margin-block-start: 4rem;

    h2 {
        align-items: center;
        display: flex;
        margin-block-start: 2rem;

        &:first-of-type {
            margin-block-start: 0;
        }

        &:has(button) {
            display: flex;
            gap: 1rem;

            button {
                background-color: var(--orange-30);
                border-radius: .375rem;
                border: 2px solid var(--orange-60);
                color: var(--orange-90);
                cursor: pointer;
                margin-inline-start: auto;
                padding: .25rem .5rem;

                &:hover {
                    background-color: var(--orange-40);
                    border: 2px solid var(--orange-70);
                }
            }
        }
    }

    .new-line {
        height: .5rem;
        width: 100%;
    }

    .episode-arrow {
        align-items: center;
        background-color: var(--orange-50);
        border-radius: 50%;
        color: var(--ardoise-10);
        display: flex;
        height: 3rem;
        font-size: 2.5rem;
        justify-content: center;
        margin-block-start: 8rem;
        margin-inline: -1.625rem;
        width: 3rem;
        z-index: 2;
    }

    .calendar {
        align-items: center;
        background-color: var(--green-70);
        border-radius: .25rem;
        color: var(--orange-50);
        display: flex;
        flex-direction: column;
        height: 18rem;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 10rem;

        .count {
            color: var(--orange-60);
            font-size: 18rem;
            font-weight: 600;
            left: 50%;
            opacity: .25;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);

            sup {
                font-size: 1rem !important;
            }
        }

        .day-of-mouth {
            font-size: 8rem;
            line-height: 1.1em;
            z-index: 1;

            sup {
                font-size: .6em;
            }
        }

        .day-of-week {
            color: var(--ardoise-10);
            font-size: 2rem;
            line-height: 1.1em;
            z-index: 1;

            sup {
                font-size: .6em;
            }
        }

        .month {
            color: var(--ardoise-10);
            font-size: 1.5rem;
            line-height: 1.1em;
            z-index: 1;
        }

        .banner-mask {
            border-radius: .25rem;
            height: 8rem;
            left: 2rem;
            overflow: hidden;
            position: absolute;
            right: 0;
            top: 0;

            .banner {
                background-color: var(--up-to-date-series);
                color: var(--green-10);
                font-size: 1.25rem;
                font-weight: 600;
                padding: .25rem;
                position: absolute;
                right: -2.25rem;
                top: 1.75rem;
                transform: rotate(45deg) translate(0px, -1px);
                width: 10rem;
                z-index: 1;

                &.premiere {
                    background-color: var(--orange-50);
                    color: var(--orange-90);
                }

                /*&.ended {
                    background-color: var(--that-s-all-folks);
                    color: var(--green-10);
                }*/
            }
        }
    }
}

.series-to-start, .series-by-country {
    margin-block-start: 4rem;

    header {
        align-items: center;
        background-color: var(--orange-50);
        border-radius: .25rem;
        color: var(--orange-90);
        display: flex;
        gap: 1rem;
        /*margin-block-start: 3rem;*/
        padding: .5rem 1rem;

        .infos {
            flex: 0 0 fit-content;
        }

        label {
            align-items: center;
            display: flex;
            gap: 1rem;
            justify-content: flex-start;
            /*margin-inline-start: auto;*/

            input[type="search"] {
                background-color: var(--orange-30);
                border: 1px solid var(--orange-70);
                border-radius: 25rem;
                color: var(--orange-90);
                font-size: 1rem;
                height: 2rem;
                padding: 0 .5rem;
                width: 20rem;

                &::placeholder {
                    color: var(--orange-70);
                }

                &:focus {
                    border-color: var(--green-50);
                    outline: none;
                }
            }

            select {
                background-color: var(--orange-30);
                border: 1px solid var(--orange-70);
                border-radius: .5rem;
                color: var(--orange-90);
                font-size: 1rem;
                height: 2rem;
                padding: 0 .5rem;
                width: 15rem;

                &:focus {
                    border-color: var(--green-50);
                    outline: none;
                }
            }
        }

        label:has(select)::after {
            border-bottom: 6px solid var(--ardoise-20);
            border-left: 6px solid transparent;
            border-right: 6px solid var(--ardoise-20);
            border-top: 6px solid transparent;
            content: "";
            display: block;
            height: 6px;
            position: absolute;
            right: 0.75rem;
            top: 20%;
            transform: rotate(45deg);
            width: 6px;
            z-index: 2;
        }

        .radio-group {
            align-items: center;
            display: flex;
            justify-content: flex-start;
            flex: 0 0 fit-content;

            span {
                color: var(--orange-90);
                font-size: 1rem;
                font-weight: 300;
                margin-inline-end: .5rem;
            }

            input[type="radio"] {
                display: none;
            }

            label {
                background-color: var(--orange-30);
                color: var(--orange-90);
                font-size: 1rem;
                font-weight: 300;
                padding-block: .25rem;

                &:has(input[type="radio"]:checked) {
                    background-color: var(--green-50);
                    color: var(--green-10);
                }

                &:first-of-type {
                    border-radius: 5rem 0 0 5rem;
                    padding-inline: 1rem .25rem;
                }

                &:last-of-type {
                    border-radius: 0 5rem 5rem 0;
                    padding-inline: .25rem 1rem;
                }

                svg {
                    height: 1.5rem;
                    width: 1.5rem;
                }
            }
        }

        /*.legends {
            background-color: var(--ardoise-90);
            border-radius: .5rem;
            display: flex;
            gap: .25rem;
            padding: .25rem;

            .legend {
                align-items: center;
                border-radius: .25rem;
                display: flex;
                font-size: 1.25rem;
                justify-content: center;
                padding-block: .25rem;
                padding-inline: 1rem;

                &.to-start {
                    background-color: var(--orange-60);
                }

                &.up-to-date {
                    background-color: var(--green-50);
                }

                &.in-progress {
                    background-color: hsla(from var(--ardoise-30) h s l / .5);
                }

                svg {
                    height: 1rem;
                    width: 1rem;
                }
            }
        }*/
    }

    .series-group {
        .wrapper {
            .content {
                &.center {
                    width: round(down, 100%, 15.25rem);
                }

                .card {
                    border-radius: .5rem;
                    height: 27rem;
                    transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out;
                    width: 15rem;

                    a {
                        .poster {
                            border-radius: .5rem .5rem 0 0;
                            height: 22.5rem;
                            position: relative;
                            width: 15rem;

                            img {
                                border-radius: .5rem .5rem 0 0;
                                height: 22.5rem;
                                width: 15rem;
                            }

                            .watch-links {
                                align-items: flex-end;
                                display: flex;
                                flex-direction: column;
                                gap: .5rem;
                                position: absolute;
                                right: 1rem;
                                top: 1rem;

                                .provider {
                                    background-color: var(--orange-20);
                                    border-radius: .25rem;
                                    height: 3rem;
                                    width: 3rem;

                                    img {
                                        border-radius: .25rem;
                                        height: 3rem;
                                        object-fit: cover;
                                        width: 3rem;
                                    }
                                }

                                .provider-name {
                                    background-color: var(--orange-50);
                                    border-radius: .25rem;
                                    color: var(--ardoise-10);
                                    font-size: 1rem;
                                    font-weight: 300;
                                    padding: .25rem .5rem;
                                    text-align: center;
                                    text-wrap: balance;
                                }
                            }

                            .average-vote-index {
                                background-color: var(--green-50);
                                border-radius: .25rem;
                                color: var(--ardoise-10);
                                font-size: 2rem;
                                font-weight: 300;
                                line-height: 1.1em;
                                padding: .5rem 1rem;
                                position: absolute;
                                left: .25rem;
                                top: .25rem;
                            }

                            .average-vote {
                                background-color: var(--orange-50);
                                border-radius: .25rem;
                                color: var(--ardoise-10);
                                font-size: 2rem;
                                font-weight: 300;
                                line-height: 1.1em;
                                padding: .5rem 1rem;
                                position: absolute;
                                right: .25rem;
                                top: .25rem;
                            }

                            .series-infos {
                                bottom: 0;
                                flex-direction: column;
                                gap: .25rem;
                                justify-content: center;
                                left: 0;
                                right: 0;

                                .dates {
                                    background-color: hsla(from var(--ardoise-80) h s l / .9);
                                    display: flex;
                                    justify-content: center;
                                    width: 100%;
                                }

                                .air-date, .add-date {
                                    align-items: center;
                                    background-color: hsla(from var(--ardoise-80) h s l / .9);
                                    border-radius: .25rem;
                                    color: var(--ardoise-10);
                                    display: flex;
                                    flex: 0 0 fit-content;
                                    gap: .25rem;
                                    padding: .25rem .5rem;
                                    font-size: 1rem;
                                    font-weight: 300;
                                    text-align: center;
                                    text-wrap: balance;
                                    width: fit-content;
                                }
                            }
                        }

                        .name {
                            background-color: hsla(from var(--ardoise-30) h s l / .5);
                            border-radius: 0 0 .5rem .5rem;
                            font-size: 1.25rem;
                            font-weight: 300;
                            line-height: 1.1em;
                            overflow-y: auto;
                            padding-inline: .5rem;
                            text-align: center;
                            text-wrap: balance;
                            width: 15rem;
                        }
                    }

                    &:has(.name.by-country) {
                        height: 27.5rem;
                    }
                }
            }
        }
    }
}

.series-by-country {
    .series-group {
        .wrapper {
            .content {
                .card {
                    a {
                        .poster {
                            .status {
                                bottom: -0.75rem;
                            }

                            .up-to-date-mask, .status, .progress {
                                opacity: 0;
                                transition: opacity 0.3s ease-in-out;
                            }
                        }

                        .name {
                            &.by-country {
                                flex-direction: column;
                                font-size: 1rem;
                                gap: .25rem;
                                height: 5rem;

                                span {
                                    background-color: hsla(from var(--ardoise-80) h s l / .9);
                                    border-radius: .25rem;
                                    color: var(--orange-50);
                                    padding: .25rem .5rem;
                                }
                            }

                            &.to-start {
                                background-color: var(--orange-60);
                            }

                            &.up-to-date {
                                background-color: var(--green-50);
                            }
                        }
                    }

                    &:hover {
                        a {
                            .poster {
                                .up-to-date-mask, .status, .progress {
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.all-my-series,
.series-index,
.series-to-start,
.series-by-country {
    .series-search-block {
        display: flex;
        font-size: 2rem;
        justify-content: center;
        margin-block: 2rem;
        position: relative;
        width: 100%;

        label {
            align-items: center;
            display: flex;
            gap: .5rem;
            min-width: 25rem;
            width: 50%;

            input {
                appearance: none;
                background-color: var(--orange-30);
                border: none;
                border-radius: 2rem;
                color: var(--orange-90);
                font-size: 2rem;
                font-weight: 300;
                line-height: 1.25em;
                padding: .25rem 1rem;
                width: 100%;
            }
        }

        .search-results {
            min-width: 25rem;
            width: 50%;
            left: 50%;
            translate: -50% 2rem;
        }
    }
}

.series-show {
    container: series-show / inline-size;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: 4rem;
    width: 100%;

    h3 {
        align-items: center;
        display: flex;
        font-size: 1.5rem;
        font-weight: 100;
        gap: 1rem;
        line-height: 1.25em;
        margin-block: 1rem .5rem;

        span {
            margin-inline-start: auto;
        }
    }

    .header {
        align-items: stretch;
        display: flex;
        gap: 1rem;
        justify-content: flex-start;
        position: relative;

        &:has(.poster) {
            height: 50vh;
        }

        .backdrop {
            height: calc(100% + 10rem);
            inset: -5rem;
            mask-image: linear-gradient(to bottom, #000 90%, #ffffff00 100%);
            position: absolute;
            width: calc(100% + 10rem);
            z-index: -1;

            img {
                border-radius: .5rem;
                height: 100%;
                object-fit: cover;
                width: 100%;
            }
        }

        .poster {
            align-items: center;
            aspect-ratio: 78 / 117;
            background-color: var(--ardoise-80);
            border-radius: .5rem;
            color: var(--ardoise-10);
            display: flex;
            flex-shrink: 0;
            height: 5rem;
            justify-content: center;
            position: relative;
            transition: height 0.3s ease-in-out;
            width: auto;

            &:hover {
                height: 100%;

                .go-to-map {
                    opacity: 1;
                }

                .debug {
                    display: block;
                }

                div.text {
                    font-size: 2vw; /* No poster */
                    display: block;
                }

                div.icon {
                    svg {
                        height: 0;
                        width: 0;
                    }
                }
            }

            img {
                border-radius: .5rem;
                height: 100%;
                object-fit: cover;
                width: 100%;
            }

            div.text {
                font-size: 0; /* No poster */
                display: none;
                transition: font-size 0.3s ease-in-out;
            }

            div.icon {
                svg {
                    height: 2rem;
                    transition: height 0.3s ease-in-out;
                    width: 2rem;
                }
            }

            .progress {
                background-color: var(--orange-20);
                border: .125rem solid var(--orange-50);
                border-radius: 999px;
                bottom: 1rem;
                color: transparent;
                height: 1rem;
                left: 1rem;
                position: absolute;
                right: 1rem;
                width: calc(100% - 2rem);

                &.full {
                    background-color: var(--green-80);
                    border-color: var(--green-70);
                    transition: background-color 2s ease-out, border-color 2s ease-out;

                    .progress-bar {
                        background-color: var(--green-40);
                        transition: background-color 2s ease-out;
                    }
                }

                .progress-bar {
                    background-color: var(--orange-50);
                    border-radius: 999px;
                    height: 100%;
                    width: 0;

                    &.set {
                        transition: width 2s ease-out;
                    }
                }
            }

            .go-to-map {
                left: 50%;
                opacity: 0;
                position: absolute;
                top: 80%;
                transform: translate(-50%, 80%);
                transition: opacity 0.3s ease-in-out;

                a {
                    background-color: var(--orange-50);
                    border-radius: .25rem;
                    color: var(--ardoise-10);
                    font-size: 2rem;
                    font-weight: 300;
                    padding: .5rem 1rem;
                    text-decoration: none;
                    text-wrap: nowrap;
                }
            }

            .debug {
                display: none;
                font-size: 2rem;
                font-weight: 300;
                left: 2rem;
                line-height: 1.25em;
                position: absolute;
                top: 2rem;
                width: fit-content;
            }
        }

        .infos {
            /*height: calc(40vw * calc(117 / 78));*/
            align-items: flex-end;
            display: flex;
            flex-grow: 1;
            height: 100%;
            position: relative;
            /*width: calc(60vw - 3rem);*/

            .infos-content {
                align-items: flex-start;
                //background-color: hsla(from var(--grey-50) h s l / .1);
                background: linear-gradient(to bottom, hsla(from var(--ardoise-90) h s l / 0) 0%, hsla(from var(--ardoise-90) h s l / 0) 100%);
                color: var(--ardoise-10);
                border-radius: .5rem;
                display: flex;
                flex-direction: column;
                gap: clamp(.5rem, 1vw, 2rem);
                max-height: 100%;
                justify-content: flex-start;
                overflow-y: auto;
                padding: 1rem;
                position: relative;
                transition: all 0.3s ease-in-out;
                width: 100%;

                &:hover {
                    backdrop-filter: blur(80px);
                    background: linear-gradient(to bottom, hsla(from var(--ardoise-90) h s l / .05) 0%, hsla(from var(--ardoise-90) h s l / .75) 100%);
                    //background-color: hsla(from var(--ardoise-90) h s l / .75);
                }

                .name {
                    align-items: flex-start;
                    display: flex;
                    margin-block: auto 0;
                    position: relative;
                    width: 100%;

                    h1 {
                        font-size: clamp(1rem, 5vw, 4rem);
                        font-weight: 100;
                        line-height: clamp(1.25rem, 6.25vw, 5rem);
                        margin-block: 0;
                        text-align: left;

                        .localization-span, .from-schedule {
                            font-weight: 300;
                        }
                    }
                }

                .series-overview {
                    align-items: center;
                    display: flex;
                    font-size: clamp(1rem, 1.5vw, 2rem);
                    font-weight: 300;
                    gap: .5rem;
                    justify-content: flex-start;
                    line-height: clamp(1.25rem, 1.875vw, 2.5rem);
                }

                .overviews {
                    display: flex;
                    flex-direction: column;
                    gap: .5rem;
                    justify-content: center;
                    width: 100%;

                    &.localized, &.additional {
                        &:not(:has(.content)) {
                            display: none;
                        }
                    }

                    .localized-h4, .additional-h4 {
                        /*color: var(--orange-70);*/
                        font-size: clamp(1.25rem, 1.875vw, 2.5rem);
                        font-weight: 300;
                        padding-block: .25rem;
                        padding-inline: .5rem;

                        &.hide {
                            display: none;
                        }
                    }

                    .overview {
                        align-items: center;
                        display: flex;
                        font-size: clamp(1rem, 1.5vw, 2rem);
                        gap: .5rem;
                        line-height: clamp(1.25rem, 1.875vw, 2.5rem);
                        justify-content: flex-start;
                        width: 100%;

                        &.localized, &.additional {
                            /*color: var(--orange-90);*/
                            font-weight: 100;
                            letter-spacing: .05rem;
                            position: relative;

                            .content {
                                border-radius: .5rem;
                                margin-block-end: unset;
                                padding: .5rem;
                            }

                            &:hover {
                                .tools {
                                    opacity: 1;
                                }
                            }

                            .tools {
                                background-color: hsla(from var(--ardoise-90) h s l / .5);
                                border-radius: .25rem;
                                display: flex;
                                gap: .5rem;
                                margin-inline-start: auto;
                                opacity: 0;
                                padding: .5rem;
                                position: absolute;
                                right: -1rem;
                                top: 1rem;
                                transition: opacity 0.3s ease-in-out;

                                .source, .locale, .edit {
                                    background-color: var(--orange-50);
                                }

                                .delete {
                                    background-color: var(--remove-this-series);
                                }

                                .edit, .delete {
                                    cursor: pointer;
                                }

                                .source, .locale, .edit, .delete {
                                    align-items: center;
                                    border-radius: .25rem;
                                    /*color: var(--orange-90);*/
                                    display: flex;
                                    font-size: 1rem;
                                    font-weight: 300;
                                    height: 1.75rem;
                                    justify-content: center;
                                    width: 1.75rem;

                                    img {
                                        border-radius: .25rem;
                                        height: 1.75rem;
                                        object-fit: cover;
                                        width: 1.75rem;
                                    }
                                }
                            }
                        }
                    }
                }

                .no-air-date {
                    background-color: var(--orange-50);
                    border-radius: .25rem;
                    color: var(--ardoise-10);
                    font-size: 2rem;
                    font-weight: 300;
                    margin-block: auto;
                    margin-inline: auto;
                    padding-block: 1.25rem;
                    padding-inline: 2.5rem;
                }
            }
        }

        .progress {
            background-color: var(--orange-20);
            border: .125rem solid var(--orange-50);
            border-radius: 999px;
            bottom: 1rem;
            color: transparent;
            height: 1rem;
            left: 1rem;
            position: absolute;
            /*right: 1rem;*/
            width: min(15rem, 50%); /*calc(100% - 2rem);*/

            &.full {
                background-color: var(--green-80);
                border-color: var(--green-70);
                transition: background-color 2s ease-out, border-color 2s ease-out;

                .progress-bar {
                    background-color: var(--green-40);
                    transition: background-color 2s ease-out;
                }
            }

            .progress-bar {
                background-color: var(--orange-50);
                border-radius: 999px;
                height: 100%;
                width: 0;

                &.set {
                    transition: width 2s ease-out;
                }
            }
        }

        .updates {
            display: flex;
            overflow-x: auto;
            width: 100%;

            .wrapper {
                align-items: center;
                display: flex;
                flex-shrink: 0;
                gap: .5rem;
                justify-content: flex-start;
                padding-block-end: .5rem;

                .update {
                    background-color: var(--orange-50);
                    border-radius: .25rem;
                    color: var(--ardoise-10);
                    flex-shrink: 0;
                    font-size: 1rem;
                    font-weight: 300;
                    padding-block: .25rem;
                    padding-inline: .75rem;
                }
            }
        }

        .series-back {
            display: none;
            position: absolute;
            right: 2rem;
            top: 7rem;

            a {
                align-items: center;
                display: flex;
                flex-direction: column;
                gap: 0.25rem;
                justify-content: center;

                .poster-back {
                    align-items: center;
                    background-color: var(--ardoise-80);
                    border-radius: .25rem;
                    color: var(--ardoise-10);
                    display: flex;
                    height: 9rem;
                    justify-content: center;
                    width: 6rem;

                    img {
                        border-radius: .25rem;
                        height: 9rem;
                        object-fit: cover;
                        width: 6rem;
                    }
                }

                .series-back-link {
                    align-items: center;
                    background-color: hsla(from var(--ardoise-70) h s l / .75);
                    border-radius: .25rem;
                    color: var(--ardoise-10);
                    display: flex;
                    font-size: 1rem;
                    font-weight: 300;
                    gap: .25rem;
                    justify-content: center;
                    line-height: 1rem;
                    padding-block: .25rem;
                    padding-inline: .5rem;
                }
            }
        }

        &:hover .series-back {
            display: flex;
        }

        .backdrops, .logos, .posters, .series {
            align-items: center;
            display: flex;
            gap: .5rem;
            height: 9rem;
            justify-content: flex-start;
            overflow-x: hidden;
            padding-block-end: .5rem;

            .wrapper {
                align-items: center;
                display: flex;
                gap: .5rem;
                height: 7.25rem;
                justify-content: flex-start;
                overflow-x: auto;
                margin-inline: auto;
                padding-inline: 1rem;

                &:hover {
                    overflow-x: auto;
                }
            }

            img {
                border-radius: .25rem;
                height: 7rem;
                object-fit: contain;

                &.pointer {
                    cursor: pointer;
                }
            }
        }

        .backdrops {
            position: relative;
            width: calc(60vw - 3rem);

            .other-backdrop {
                aspect-ratio: 16/9;
                border-radius: .25rem;
                height: 7rem;
            }

            .add-backdrop {
                cursor: pointer;
                display: none;
                position: absolute;
                right: 1rem;
                top: 1rem;
            }

            .add-all-backdrops {
                cursor: pointer;
                display: none;
                position: absolute;
                right: 1rem;
                top: 3.5rem;
            }

            &:hover {
                .add-backdrop, .add-all-backdrops {
                    display: block;
                }
            }
        }

        .logos {
            width: 100%;

            .wrapper {
                height: unset;
            }

            .other-logo {
                /*background-color: hsla(from var(--ardoise-90) h s l / .2);
                border-radius: .25rem;*/
                height: 7rem;
                padding: .5rem;
                width: auto;
            }
        }

        .posters {
            width: 40vw;

            .other-poster {
                aspect-ratio: 78/117;
                border-radius: .25rem;
                height: 7rem;
            }
        }

        .series {
            height: 4rem;
            justify-content: space-around;
            width: 100%;

            .previous-series, .next-series {
                align-items: center;
                border-radius: 5rem;
                color: var(--ardoise-10);
                cursor: pointer;
                display: flex;
                flex: 1;
                font-size: 1.25rem;
                font-weight: 300;
                gap: .5rem;
                justify-content: flex-start;
                height: 3rem;
                line-height: 1.25em;
                overflow-x: auto;
                padding-inline: 1rem;
                text-wrap: nowrap;
                text-overflow: ellipsis;

                &:last-child {
                    justify-content: flex-end;
                    text-align: right;
                }

                &:hover {
                    background-color: var(--orange-50);
                }

                img {
                    border-radius: .25rem;
                    display: none;
                    height: 3rem;
                    object-fit: cover;
                    width: 3rem;
                }

                svg {
                    height: 1.5rem;
                    width: 1.5rem;
                }
            }
        }
    }

    .videos {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: .5rem 1rem;
        width: 100%;

        .video-tools {
            align-items: center;
            display: flex;
            gap: .5rem;
            justify-content: flex-end;

            h2 {
                background-color: transparent;
                margin-inline-end: auto;
                padding: 0;
            }

            .video-tool {
                align-items: center;
                background-color: var(--orange-50);
                border-radius: 50%;
                color: var(--ardoise-10);
                cursor: pointer;
                display: flex;
                flex-shrink: 0;
                height: 2rem;
                justify-content: center;
                width: 2rem;

                /*&:last-of-type {
                    margin-inline-end: 1rem;
                }*/
            }
        }

        .video-list {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            height: auto;
            overflow-y: clip;
            transition: height 30ms ease-in-out;
            width: 100%;

            &.folded {
                height: 0;
            }

            .video {
                aspect-ratio: 16/9;
                /*mask: linear-gradient(transparent 6%, hsla(0, 100%, 100%, 1) 10%, hsla(0, 100%, 100%, 1) 90%, transparent 92%);
                margin-block: -3rem;
                position: relative;*/
                width: 100%;

                iframe {
                    border-radius: .5rem;
                    border: none;
                    height: 100%;
                    width: 100%;
                }

                .border-top {
                    background-color: var(--orange-50);
                    border-radius: .5rem .5rem 0 0;
                    height: 1rem;
                    position: absolute;
                    top: 0;
                    width: 100%;
                }

                .border-bottom {
                    background-color: var(--orange-50);
                    border-radius: 0 0 .5rem .5rem;
                    height: 1rem;
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                }
            }
        }
    }

    .schedules {
        align-items: stretch;
        /*background-color: hsla(from var(--ardoise-90) h s l / .2);
        border-radius: .5rem;*/
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        font-weight: 300;
        gap: .25rem;
        justify-content: center;
        padding: .5rem 1rem;

        h2 {
            background-color: transparent;
            display: flex;
            padding: 0;

            .new-schedule {
                align-items: center;
                background-color: var(--orange-50);
                border-radius: 50%;
                color: var(--ardoise-10);
                cursor: pointer;
                display: flex;
                height: 2rem;
                justify-content: center;
                margin-inline-start: auto;
                width: 2rem;
            }
        }

        .episode, .next-episode {
            align-items: center;
            background-color: hsla(from var(--ardoise-90) h s l / .2);
            border-radius: .5rem;
            box-shadow: 0 0 1rem #0000003f;
            color: var(--ardoise-10);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            gap: .5rem;
            justify-content: center;
            padding: 1rem;
            position: relative;
            width: 12rem;
            z-index: 1;

            &.user {
                background-color: var(--orange-50);
                color: var(--orange-90);
            }

            &.user.last-of-group {
                background-color: var(--orange-40);
                color: var(--orange-80);
            }

            &.last-of-group {
                margin-inline-start: -9rem;
                transition: transform 0.3s linear;
                z-index: unset;

                &:hover {
                    transform: rotate(5deg);
                    z-index: 1;
                }
            }

            &.tv {
                background-color: var(--green-50);
                color: var(--green-10);
            }

            &.tv.last-of-group {
                background-color: var(--green-60);
                color: var(--green-20);
            }

            .override, .type {
                align-items: center;
                border: 2px solid var(--ardoise-10);
                border-radius: 50%;
                color: var(--ardoise-10);
                display: flex;
                height: 2rem;
                justify-content: center;
                position: absolute;
                top: .5rem;
                width: 2rem;
            }

            .override {
                left: .5rem;
            }

            .type {
                right: .5rem;
            }
        }

        .episode {
            .episode-number {
                font-size: 3rem;
                font-weight: 100;
                line-height: 1.25em;
            }

            .episode-info {
                background-color: var(--orange-20-alpha-25);
                border-radius: .25rem;
                max-width: 8rem;
                padding: .25rem;
            }

            .episode-info, .episode-name, .episode-air-date {
                font-size: 1.25rem;
                font-weight: 300;
                line-height: 1.25em;
                text-align: center;
                text-wrap: balance;
            }
        }

        .next-episode {
            background-color: var(--green-70);
            cursor: pointer;

            .details {
                display: flex;
                gap: .5rem;
            }

            .season {
                font-size: 1.25rem;
                margin-block-start: 1.5rem;
                text-align: center;
                text-wrap: balance;
                width: 100%;
            }

            .country, .local-air, .remaining {
                align-items: center;
                border-radius: .25rem;
                color: var(--ardoise-10);
                display: flex;
                line-height: 1.1em;
                text-align: center;
                text-wrap: balance;
            }

            .country {
                font-size: 3rem;
            }

            .provider {
                height: 3rem;
                width: 3rem;

                img {
                    border-radius: .25rem;
                    height: 3rem;
                    object-fit: cover;
                    width: 3rem;
                }
            }

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

                span {
                    line-height: 1.25em;
                    text-align: center;
                    text-wrap: balance;
                }
            }
        }

        .wrapper {
            display: flex;
            max-width: 100%;
            overflow-x: auto;

            .schedule-block {
                display: flex;
                flex-direction: column;
                gap: .5rem;
                margin-inline: auto;

                .schedule {
                    align-items: stretch;
                    /*background-color: hsla(from var(--ardoise-90) h s l / .2);*/
                    border-bottom: .5rem solid var(--orange-50);
                    border-radius: .5rem;
                    color: var(--ardoise-10);
                    display: flex;
                    flex-shrink: 0;
                    gap: .5rem;
                    justify-content: center;
                    padding: .5rem 1rem;
                }

                &:has(.alternate-schedule) {
                    width: 100%;

                    h3 {
                        margin-block: 0;
                        padding-inline: 1rem;
                    }
                }
            }

            &:has(.alternate-schedule) {
                overflow-x: hidden;
            }

            .alternate-schedule {
                display: flex;
                gap: .5rem;
                max-width: 100%;
                overflow-x: auto;
                margin-inline: auto;
                padding-block-end: .5rem;
                scroll-snap-type: x mandatory;

                .air-day {
                    align-items: center;
                    border: 2px solid var(--orange-50);
                    border-radius: .625rem;
                    display: flex;
                    flex-direction: column;
                    flex-shrink: 0;
                    scroll-snap-align: start;
                    width: 6rem;

                    &.watched {
                        .air-day-date {
                            background-color: var(--green-20);
                            color: var(--green-90);
                        }
                    }

                    &.future {
                        opacity: .5;
                    }

                    .air-day-episode {
                        align-items: center;
                        background-color: var(--orange-50);
                        border-radius: .5rem .5rem 0 0;
                        color: var(--ardoise-10);
                        display: flex;
                        font-size: 1.5rem;
                        font-weight: 300;
                        justify-content: center;
                        line-height: 1.1em;
                        padding-block: .5rem;
                        width: 100%;
                    }

                    .air-day-date {
                        align-items: center;
                        background-color: var(--orange-90);
                        border-radius: 0 0 .5rem .5rem;
                        color: var(--orange-10);
                        display: flex;
                        flex-direction: column;
                        font-size: 2rem;
                        width: 100%;

                        .day {
                            color: var(--orange-50);
                            font-size: 2rem;
                            line-height: 1em;
                        }

                        .day-of-week, .month, .year {
                            font-size: .875rem;
                            line-height: 1.25em;
                        }
                    }
                }
            }
        }

        .schedule-form {
            background-color: hsla(from var(--orange-40) h s l / .5);
            border: 4px dashed var(--orange-50);
            border-radius: .5rem;
            display: none;
            padding: 1rem;

            .form-field {
                align-items: center;
                display: flex;
                flex-wrap: wrap;
                gap: 2rem;
                justify-content: center;

                .group {
                    background-color: var(--orange-20-alpha-25);
                    border-radius: .25rem;
                    padding: .5rem;

                    &.full {
                        width: 100%;
                    }

                    .scheduled-day {
                        align-items: center;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        width: 12rem;
                    }
                }

                > div {
                    align-items: flex-start;
                    display: flex;
                    flex-direction: column;
                    gap: .5rem;

                    .date-time {
                        display: flex;
                        gap: .5rem;

                        label:has(input[type=checkbox]) {
                            padding-inline: 0;

                            .big-switch {
                                transform: scale(1.25);
                                margin-inline-end: .5rem;
                            }
                        }
                    }

                    h4 {
                        line-height: 1.75rem /* hauteur des label:has(input[type=checkbox]) */
                    }

                    label {
                        align-items: center;
                        border-bottom: 2px solid transparent;
                        display: flex;
                        gap: .5rem;
                        margin-inline-start: 0;

                        &:hover, &.active {
                            border-bottom: 2px solid var(--orange-50);
                        }
                    }

                    label:has(select)::after {
                        top: 20%;
                    }

                    label:has(input[type=checkbox]) {
                        /*background-color: var(--orange-30);*/
                        border-radius: .25rem;
                        /*border: 2px solid var(--orange-50);*/
                        cursor: pointer;
                        justify-content: center;
                        padding-inline: .5rem;

                        /*input[type=checkbox] {
                            display: none;
                        }*/
                    }

                    label:has(input[type=checkbox]:checked) {
                        /*background-color: var(--green-60);*/
                        /*border: 2px solid var(--green-30);*/
                    }

                    input[type=number] {
                        background-color: var(--orange-20);
                        border: 2px solid var(--orange-50);
                        border-radius: .25rem;
                        color: var(--orange-90);
                        padding-inline: .5rem;
                        width: 4rem;
                    }

                    input[type=time], input[type=date] {
                        background-color: var(--orange-20);
                        border: 2px solid var(--orange-50);
                        border-radius: .25rem;
                        color: var(--orange-90);
                        padding-inline: .5rem;
                    }

                    button {
                        background-color: var(--orange-30);
                        border-radius: .375rem;
                        border: 2px solid var(--orange-60);
                        color: var(--orange-90);
                        cursor: pointer;
                        margin-inline-start: auto;
                        padding: .25rem .5rem;

                        &:hover {
                            background-color: var(--orange-40);
                            border: 2px solid var(--orange-70);
                        }
                    }
                }
            }
        }
    }

    .season-changes {
        background-color: hsla(from var(--ardoise-90) h s l / .2);
        border-radius: .5rem;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: 1rem;

        .changes {
            display: flex;
            flex-direction: column;
            gap: .25rem;

            .change {
                .key {
                    align-items: center;
                    background-color: var(--green-50);
                    border-radius: .25rem;
                    cursor: pointer;
                    display: flex;
                    padding: .25rem .5rem;

                    .toggler {
                        margin-inline-end: .25rem;
                        margin-inline-start: auto;

                        svg {
                            height: 1.5rem;
                            transition: transform 0.3s ease-in-out;
                            width: 1.5rem;
                        }
                    }
                }

                &:not(:has(.items.folded)) {
                    .key {
                        .toggler {
                            svg {
                                transform: rotate(180deg);
                            }
                        }
                    }
                }

                .items {
                    display: flex;
                    flex-direction: column;
                    gap: .5rem;
                    overflow: hidden;
                    transition: height 1s ease-in-out;

                    &.folded {
                        height: 0;
                    }

                    .item {
                        border-radius: .25rem;
                        display: flex;
                        flex-direction: column;
                        gap: .25rem;
                        padding: 1rem;

                        &:nth-child(odd) {
                            background-color: hsla(from var(--ardoise-80) h s l / .5);
                        }

                        &:nth-child(2n) {
                            background-color: hsla(from var(--ardoise-90) h s l / .2);
                        }

                        .item-data {
                        }

                        .sub-item, .item-iterable {
                            align-items: center;
                            display: flex;
                            gap: 1rem;

                            svg {
                                flex-shrink: 0;
                            }
                        }
                    }

                    .value {
                    }
                }
            }
        }
    }

    .externals {
        /*background-color: hsla(from var(--ardoise-90) h s l / .2);
        border-radius: .5rem;*/
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding: .5rem 1rem;

        h2 {
            align-items: center;
            background-color: transparent;
            display: flex;
            gap: .5rem;
            padding: 0;

            label {
                align-items: center;
                display: flex;
                gap: .5rem;
            }
        }

        .wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            margin-inline: auto;
            width: round(down, 100%, 11rem);

            .external {
                background-color: hsla(from var(--orange-40) h s l / .5);
                border: 2px solid var(--orange-50);
                border-radius: .375rem;
                color: var(--orange-90);
                height: 3rem;
                font-size: 1.75rem;
                font-weight: 300;
                overflow: hidden;
                padding-inline: 1rem;
                text-align: center;
                text-wrap: nowrap;
                width: 10rem;

                &:hover {
                    background-color: var(--orange-50);
                }

                a {
                    align-items: center;
                    display: flex;
                    height: 100%;
                    justify-content: center;
                    width: 100%;

                    img {
                        border-radius: .25rem;
                        height: 2.5rem;
                        object-fit: contain;
                        width: 10rem;
                    }
                }
            }
        }
    }

    .user-actions:not(:has(h2)) {
        background-color: hsla(from var(--ardoise-90) h s l / 0.25);
        border-radius: 5rem;
        padding: .5rem;
        width: fit-content;

        h2 {
            padding: 0;
        }
    }

    .content {
        display: flex;
        gap: 1rem;
        margin-block-end: 1rem;
        width: 100%;

        &.column {
            flex-direction: column;
        }

        .content-seasons {
            flex-shrink: 0;
            /*width: 70%;*/

            .all-seasons {
                display: flex;
                font-size: 1.5rem;
                font-weight: 100;
                gap: 1rem;
                line-height: 1.25em;
                margin-block: 1rem .5rem;
                padding-inline-start: .5rem;
                width: 100%;

                .season-order {
                    align-items: center;
                    background-color: hsla(from var(--ardoise-80) h s l / .5);
                    border-radius: .25rem;
                    color: var(--ardoise-10);
                    cursor: pointer;
                    display: flex;
                    font-size: .875rem;
                    font-weight: 100;
                    justify-content: center;
                    width: 2.5rem;
                }
            }
        }

        .content-infos {
            /*background-color: hsla(from var(--ardoise-90) h s l / .2);
            border-radius: .5rem;*/
            padding: .5rem 1rem;
            position: relative;

            h2 {
                background-color: transparent;
                padding: 0;
                position: sticky;
                left: 0;
            }

            .watch {
                display: flex;
                flex-direction: column;
                gap: .5rem;
            }

            .providers {
                display: flex;
                gap: .5rem;
                overflow-x: auto;

                h2 {
                    width: 8rem;
                    flex-shrink: 0;
                }

                .wrapper {
                    display: flex;
                    flex-wrap: nowrap;
                    gap: 1rem;
                    /*margin-inline: auto;*/
                    width: fit-content;

                    .provider {
                        align-items: center;
                        display: flex;
                        flex-shrink: 0;
                        gap: .5rem;
                        justify-content: center;
                        height: 3rem;

                        img {
                            border-radius: .25rem;
                            height: 100%;
                            width: 3rem;
                        }

                    }
                }
            }

            .facts {
                align-items: center;
                display: flex;
                flex-wrap: wrap;
                gap: .5rem;
                justify-content: center;

                &.hidden {
                    display: none;
                }

                .fact {
                    align-items: center;
                    background-color: hsla(from var(--ardoise-90) h s l / .2);
                    border-radius: .25rem;
                    /*color: var(--ardoise-10);*/
                    display: flex;
                    gap: .5rem;
                    justify-content: center;
                    padding: .5rem;

                    &.status-rumored, &.status-planned {
                        background-color: var(--add-this);
                    }

                    &.status-in-production, &.status-pilot {
                        background-color: var(--add-this);
                    }

                    &.status-canceled {
                        background-color: var(--red-50);
                    }

                    &.status-returning {
                        background-color: cadetblue;
                    }

                    &.watched {
                        background-color: var(--green-50);
                    }

                    .fact-label {
                        font-size: 1rem;
                        font-weight: 300;
                    }

                    .fact-content {
                        align-items: center;
                        display: flex;
                        font-size: 1rem;
                        font-weight: 300;
                        gap: .25rem;

                        span {
                            font-size: 2rem;
                        }
                    }

                    .networks {
                        display: flex;
                        flex-wrap: wrap;
                        gap: .25rem;
                        justify-content: center;

                        .network-detail {
                            position: relative;

                            &:hover .link {
                                opacity: 1;
                            }

                            .frame {
                                align-items: center;
                                background-color: var(--ardoise-10);
                                border-radius: .25rem;
                                display: flex;
                                padding: .5rem;

                                &:hover {
                                    background-color: var(--ardoise-50);
                                }

                                img {
                                    height: 3rem;
                                    width: auto;
                                }
                            }

                            .link {
                                align-items: center;
                                background-color: var(--orange-50);
                                border-radius: 50%;
                                display: flex;
                                height: 2rem;
                                justify-content: center;
                                opacity: 0;
                                position: absolute;
                                right: 0;
                                top: 0;
                                transition: opacity 0.3s ease-in-out;
                                width: 2rem;

                                svg {
                                    height: 1.25rem;
                                    width: 1.25rem;
                                }
                            }
                        }

                    }
                }

                .keywords {
                    display: flex;
                    flex-wrap: wrap;
                    gap: .5rem;
                    justify-content: center;
                    margin-inline: auto;
                    width: 100%;

                    .keyword {
                        align-items: center;
                        background-color: var(--green-50);
                        border-radius: .25rem;
                        color: var(--orange-90);
                        display: flex;
                        font-size: 1rem;
                        font-weight: 300;
                        gap: .25rem;
                        justify-content: center;
                        padding: .125rem .375rem;
                        position: relative;

                        &.missing {
                            background-color: var(--orange-50);
                            cursor: pointer;

                            &:hover {
                                background-color: var(--orange-60);
                            }
                        }
                    }
                }
            }

            .toggle-visibility {
                align-items: center;
                background-color: var(--orange-50);
                border-radius: 50%;
                color: var(--ardoise-10);
                cursor: pointer;
                display: flex;
                height: 2rem;
                justify-content: center;
                position: absolute;
                right: 1rem;
                top: .5rem;
                width: 2rem;

                /*.hidden {
                    display: none;
                }*/
            }
        }

        .lists {
            margin-block-start: 1rem;

            ul {
                display: flex;
                flex-direction: column;
                gap: .25rem;
                padding-inline-start: 2rem;

                li {
                    background-color: hsla(from var(--ardoise-90) h s l / .5);
                    border-radius: .25rem;
                    list-style: none;
                    padding-block: .25rem;
                    padding-inline: 1rem;
                    text-align: left;
                    transition: background-color 0.15s linear;

                    span {
                        color: var(--orange-50);
                    }

                    &:hover {
                        background-color: hsla(from var(--ardoise-70) h s l / .5);
                    }
                }
            }
        }

        .series-search-result {
            width: 100%;

            .header {
                .results {
                    display: flex;
                    gap: .5rem;
                }

                .pages {
                    display: flex;
                    flex-wrap: wrap;
                    gap: .5rem;
                    justify-content: center;
                    overflow-x: unset;
                    width: 100%;

                    .page {
                        background-color: var(--ardoise-60);
                        border: 2px solid var(--orange-10);
                        border-radius: .25rem;
                        color: var(--ardoise-10);
                        height: 2rem;
                        transition: all 0.2s linear;
                        width: 2rem;

                        &:hover {
                            border: 2px solid var(--orange-50);
                            transform: scale(1.5);
                            z-index: 3;
                        }

                        &:has(+ *:hover),
                        &:hover + * {
                            border: 2px solid hsla(from var(--orange-50) h s l / .5);
                            transform: scale(1.30);
                            z-index: 2;
                        }

                        &:has(+ * + *:hover),
                        &:hover + * + * {
                            transform: scale(1.10);
                            z-index: 1;
                        }

                        &.active {
                            background-color: var(--green-50);
                        }

                        a {
                            align-items: center;
                            display: flex;
                            height: 100%;
                            justify-content: center;
                            width: 100%;
                        }
                    }
                }
            }

            .wrapper {
                flex-wrap: wrap;
                margin-inline: auto;
                width: round(down, 100%, 20.rem);

                .content {
                    flex-wrap: wrap;
                    width: round(down, 100%, 20.25rem);

                    .card {
                        height: 36rem;
                        width: 20rem;

                        a {
                            .poster {
                                height: 30rem;
                                width: 20rem;

                                img {
                                    height: 100%;
                                    width: 100%;
                                }
                            }

                            .name {
                                height: 6rem;
                                padding-block: .5rem;
                                padding-inline: 1rem;
                                width: 100%;

                                &.added {
                                    background-color: var(--orange-50);
                                    border-radius: 0 0 .25rem .25rem;
                                    color: var(--ardoise-90);
                                    font-weight: 500;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (width > 1200px) and (orientation: portrait) {
    .series-show {
        .header:has(.poster) {
            height: 50vh;
        }
    }
}

@media (width > 1200px) and (orientation: landscape) {
    .series-show {
        .header:has(.poster) {
            height: 60vh;
        }
    }
}

@media (width <= 1200px) and (orientation: portrait) {
    .series-show {
        .header:has(.poster) {
            height: 80vh;
        }
    }
}

@media (width <= 1200px) and (orientation: landscape) {
    .series-show {
        .header:has(.poster) {
            height: 70vh;
        }
    }
}

.keyword-translation-form.series {
    display: flex;
    left: unset;
    min-width: 20rem;
    position: fixed;
    right: 0;
    top: 8rem;
    transform: translateX(100%);
    transition: transform 1s var(--side-panel-easing), opacity 0.3s ease-in-out;
    width: 30rem;
    z-index: 100;

    &.active {
        transform: translateX(0);
    }

    label:has(select)::after {
        top: 20%;
    }

    input[type=text] {
        background-color: var(--orange-20);
        border: 2px solid var(--orange-50);
        border-radius: .25rem;
        color: var(--orange-90);
        flex-grow: 1;
        padding-inline: .5rem;
    }
}

#series-season.series-show {
    .user-actions:has(+ .quick-episodes) {
        justify-content: center;

        .watch-links {
            margin-inline-end: unset;
        }
    }

    .wrapper {
        justify-content: flex-start;

        .watch-links {
            background-color: var(--orange-50);
            border-radius: 5rem;
            color: hsl(0, 0%, 100%);
            gap: .125rem;
            padding-block: .125rem;
            padding-inline: .75rem .125rem;

            .label {
                font-weight: 600;
            }
        }
    }

    .header {
        gap: 0;

        .poster {
            bottom: 2rem;
            height: calc(5rem * calc(117 / 78));
            position: absolute;
            right: 2rem;
            transition: all 0.5s ease-in-out;
            width: 5rem;
            z-index: 2;

            &:hover {
                height: calc(40vw * calc(117 / 78));
                width: 40vw;
            }

            a {
                height: 100%;
                width: 100%;
            }
        }

        .infos {
            width: 100%;

            .infos-content {
                padding-block-end: 3rem;
                padding-inline: 1rem;
                transition: all 0.5s ease-in-out;
                width: 100%;

                h1 {
                    font-size: clamp(2rem, 5vw, 6rem);
                    font-weight: 300;
                    line-height: 1.1em;
                }

                .season-name {
                    font-size: clamp(1.5rem, 5vw, 4rem);
                    font-weight: 100;
                    line-height: clamp(1.25rem, 6.25vw, 5rem);
                }
            }

            .backdrop {
                height: calc(100% + 10rem);
                inset: -5rem;
                mask-image: linear-gradient(to bottom, #000 90%, #ffffff00 100%);
                mask-size: cover;
                opacity: .75;
                width: calc(100% + 10rem);
            }
        }
    }
}

.add-backdrop-dialog,
.add-all-backdrops-dialog,
.add-video-dialog {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: var(--orange-30-alpha-75);
    border-color: var(--orange-50);
    border-radius: .5rem;
    gap: 1rem;
    padding: 1rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 500;
}

.add-all-backdrops-dialog, .old-series-added-panel {
    .dialog-header {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-block-end: 1rem;
        width: 100%;

        h2 {
            font-size: 1.5rem;
            font-weight: 300;
            line-height: 1.25em;
            margin-block: 0;
            width: 100%;
        }

        h3 {
            margin-block: 0;

            svg {
                height: 1.5rem;
                width: 1.5rem;
            }
        }

        button {
            background-color: var(--orange-50);
            border: 2px solid var(--orange-80);
            border-radius: .25rem;
            color: var(--ardoise-10);
            cursor: pointer;
            font-weight: 300;
            padding: .25rem .5rem;

            &:hover {
                background-color: var(--orange-40);
                border: 2px solid var(--orange-60);
            }
        }

        .progress-bar {
            align-items: center;
            background-color: hsla(from var(--ardoise-90) h s l / .2);
            border-radius: .25rem;
            display: none;
            gap: .5rem;
            height: 2.5rem;
            justify-content: flex-start;
            padding-inline: .5rem;
            position: relative;
            width: 100%;

            &:has(.progress) {
                display: flex;
            }

            .progress {
                background-color: var(--orange-50);
                border-radius: .25rem;
                height: 2rem;
                width: 0;
                transition: width 0.3s ease-in-out;
            }

            span {
                color: var(--orange-90);
                font-size: 1rem;
                font-weight: 300;
                position: absolute;
                right: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    .dialog-body {
        max-height: 50vh;
        overflow-y: auto;

        .all-images {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            justify-content: center;
            padding: 1rem;

            .backdrop-item {
                aspect-ratio: 16/9;
                border-radius: .25rem;
                height: 7rem;
            }

            .poster-item {
                aspect-ratio: 78/117;
                border-radius: .25rem;
                height: 7rem;
            }

            .backdrop-item, .poster-item {
                img {
                    border-radius: .25rem;
                    height: 100%;
                    object-fit: cover;
                    width: 100%;
                }
            }
        }

        .message {
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.25em;
            padding-inline: 1rem;
        }
    }
}

.old-series-added-panel {
    background-color: hsla(from var(--ardoise-80) h s l / .9) !important;
    width: 36rem !important;

    .dialog-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-inline: 2rem;

        .dialog-header {
            margin-block: 0;
        }

        .dialog-body {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .message {
                font-size: 1.25rem;
                text-wrap: balance;
            }
        }

        .dialog-footer {
            display: flex;
            gap: 1rem;
            justify-content: flex-end;

            button {
                background-color: var(--orange-50);
                border: 2px solid var(--orange-80);
                border-radius: .25rem;
                color: var(--ardoise-10);
                cursor: pointer;
                font-weight: 300;
                padding: .25rem 1rem;

                &:hover {
                    background-color: var(--orange-40);
                    border: 2px solid var(--orange-60);
                }
            }
        }
    }
}

.add-backdrop-dialog {
    .dropzone-container {
        border: 2px dashed var(--orange-50);
        /*padding: 2rem 1rem;*/
        border-radius: .5rem;

        .dropzone-preview-image {
            aspect-ratio: 16/9;
            border-radius: .25rem;
            border: 2px solid var(--orange-50);
            height: 9rem;
            max-width: unset;
            min-width: unset;
        }
    }

    .dropzone-placeholder {
        color: var(--orange-90);
        font-weight: 300;
    }

    input {
        background-color: var(--orange-20);
        border: 2px solid var(--orange-50);
        border-radius: .25rem;
        color: var(--orange-90);
        padding-inline: .5rem;
    }

    button {
        border-radius: .25rem;
        cursor: pointer;
        font-weight: 300;
        padding: .25rem .5rem;
    }

    button[name=cancel] {
        background-color: var(--ardoise-50);
        border: 2px solid var(--ardoise-20);
        color: var(--ardoise-10);
        margin-inline-start: auto;

        &:hover {
            background-color: var(--ardoise-40);
            border: 2px solid var(--ardoise-60);
        }
    }


    button[type=submit] {
        background-color: var(--orange-50);
        border: 2px solid var(--orange-80);
        color: var(--orange-90);

        &:hover {
            background-color: var(--orange-40);
            border: 2px solid var(--orange-60);
        }
    }
}

.add-video-dialog {
    .form-row {
        justify-content: flex-end;

        button {
            border-radius: .25rem;
            cursor: pointer;
            font-weight: 300;
            padding: .25rem .5rem;
        }
    }
}

.seasons {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;

    &.reverse {
        flex-direction: column-reverse;
    }

    .season {
        align-items: flex-start;
        border: 2px solid transparent;
        border-radius: .5rem;
        display: flex;
        height: 15rem;
        justify-content: flex-start;
        transition: border-color 0.3s ease-in-out;
        width: 100%;

        &:hover {
            border: 2px solid var(--orange-50);

            .infos {
                .user-votes, .last-episode, .next-episode {
                    .show-tab {
                        opacity: 1;
                    }
                }
            }
        }

        .poster {
            align-items: center;
            background-color: hsla(from var(--ardoise-90) h s l / .2);
            border-radius: .5rem 0 0 .5rem;
            color: var(--green-10);
            display: flex;
            flex-shrink: 0;
            height: 100%;
            justify-content: center;
            position: relative;
            transition: width 0.3s ease-in-out;
            width: 10rem;

            img {
                border-radius: .5rem 0 0 .5rem;
                height: 100%;
                object-fit: cover;
                width: 100%;
            }

            .number {
                align-items: center;
                background-color: var(--orange-50);
                border-radius: .25rem;
                bottom: .5rem;
                color: var(--ardoise-10);
                display: flex;
                font-size: 1.5rem;
                font-weight: 500;
                height: 2rem;
                justify-content: center;
                position: absolute;
                right: .5rem;
                transition: font-size 0.3s ease-in-out, height 0.3s ease-in-out, width 0.3s ease-in-out;
                width: 2rem;

                &.complete {
                    background-color: var(--user-episode-actions);
                }
            }

            /*.finale {
                align-items: center;
                background-color: var(--orange-50);
                border-radius: .25rem;
                color: var(--ardoise-10);
                display: flex;
                font-size: 1.5rem;
                font-weight: 500;
                justify-content: center;
                left: .5rem;
                max-width: calc(100% - 1rem);
                padding-block: .25rem;
                padding-inline: .5rem;
                position: absolute;
                text-align: center;
                top: .5rem;

                &.watched {
                    background-color: var(--user-episode-actions);
                }
            }*/
        }

        .infos {
            background-color: hsla(from var(--ardoise-90) h s l / .2);
            border-radius: 0 .5rem .5rem 0;
            color: var(--ardoise-10);
            display: flex;
            flex-direction: column;
            gap: .5rem;
            height: 14.75rem;
            justify-content: flex-start;
            overflow-x: hidden;
            overflow-y: auto;
            padding-block: 1rem;
            padding-inline: 1rem;
            position: relative;
            width: 100%;

            .season__overview {
                font-size: 1rem;
                font-weight: 300;
                line-height: 1.25em;
            }

            .season__air-date, .season__episodes, .season__runtime {
                font-size: 1rem;
                font-weight: 300;
            }

            .season__episodes {
                display: flex;
                gap: 1rem;

                .watched {
                    display: flex;
                    gap: .5rem;
                }
            }

            .user-votes {
                background-color: var(--orange-30-alpha-75);
                border-radius: .5rem 0 0 .5rem;
                max-width: calc(100% - 4rem);
                padding: .25rem 1rem;
                position: absolute;
                right: 0;
                transform: translateX(100%);
                transition: transform 300ms ease-in-out;

                .show-tab {
                    top: 0;
                }

                &.show {
                    transform: translateX(0);

                    .show-tab {
                        background-color: var(--orange-50);
                    }

                    .vote-graph {
                        .episode-votes {
                            backdrop-filter: blur(8px);
                            background: linear-gradient(to right, hsl(from var(--green-50) h s 40%) 0%, hsl(from var(--green-50) h s 50%) 100%) padding-box,
                            linear-gradient(to right, hsl(from var(--green-50) h s 80% / .75) 0%, hsl(from var(--green-50) h s 20% / .75) 100%) border-box;
                            border: 4px solid transparent;
                            border-radius: 2rem 0 0 2rem;
                        }
                    }
                }

                .vote-graph {
                    .episode-votes {
                        height: 10rem;
                        transition: all 0.3s ease-in-out;

                        .episode-vote {
                            .vote {
                                .dashed-vote {
                                    height: 5rem;
                                }
                            }
                        }
                    }
                }
            }

            .user-votes {
                .show-tab {
                    align-items: center;
                    background-color: hsla(from var(--ardoise-90) h s l / .2);
                    border-radius: .25rem;
                    color: var(--ardoise-10);
                    cursor: pointer;
                    display: flex;
                    height: 2rem;
                    justify-content: center;
                    left: -3rem;
                    opacity: 0;
                    padding-inline: .5rem;
                    position: absolute;
                    transition: background-color 0.3s linear, opacity 0.3s linear, transform 0.3s ease-in-out;
                    width: 2rem;

                    &:hover {
                        background-color: var(--orange-50);
                        transform: scale(1.25);
                    }
                }
            }
        }
    }
}

.season-stuff {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;

    h2 {
        background-color: transparent;
        padding-inline: 1rem;
        width: 100%;
    }

    .user-actions {
        border-radius: 5rem;
        flex-direction: row;
        padding: .5rem;

        .size-item {
            align-items: center;
            background-color: hsla(from var(--ardoise-90) h s l / .2);
            border-radius: .25rem;
            color: var(--ardoise-10);
            display: flex;
            height: 2rem;
            justify-content: center;
            padding: .5rem;
            transition: background-color 0.3s linear;
            width: 2rem;

            &.active {
                background-color: var(--user-episode-actions);
            }

            &:hover {
                background-color: var(--orange-50);
            }
        }

        .ar-item {
            align-items: center;
            background-color: hsla(from var(--ardoise-90) h s l / .2);
            border-radius: .25rem;
            color: var(--ardoise-10);
            display: flex;
            height: 2rem;
            justify-content: center;
            padding: .5rem;
            transition: background-color 0.3s linear;
            width: 2rem;

            &.active {
                background-color: var(--user-episode-actions);
            }

            &:hover {
                background-color: var(--orange-50);
            }
        }

        .edit-episode-infos {
            align-items: center;
            background-color: hsla(from var(--ardoise-90) h s l / .2);
            border-radius: .25rem;
            color: var(--ardoise-10);
            cursor: pointer;
            display: flex;
            height: 2rem;
            justify-content: center;
            padding: .5rem;
            transition: background-color 0.3s linear;
            width: 2rem;

            &:hover {
                background-color: var(--orange-50);
            }
        }

        svg {
            transform: scale(1.75);
        }
    }

    .quick-episodes {
        align-items: center;
        background-color: hsla(from var(--ardoise-90) h s l / 0.25);
        border-radius: 1.25rem;
        display: flex;
        flex-wrap: wrap;
        /*gap: .25rem;*/
        height: 3.5rem;
        justify-content: center;
        overflow-x: auto;
        padding: .5rem;

        &:not(:has(.top-left)) {
            border-radius: 5rem;
        }

        .quick-episode {
            align-items: center;
            background-color: hsla(from var(--ardoise-80) h s l / .5);
            border: 2px solid hsla(from var(--ardoise-30) h s l / .5);
            border-radius: .25rem;
            color: var(--ardoise-10);
            cursor: pointer;
            display: flex;
            height: 2rem;
            justify-content: center;
            margin-inline: .125rem;
            transition: all 0.3s linear;
            width: 2rem;
            will-change: border, transform, z-index;

            &.watched {
                background-color: var(--user-episode-actions);
            }

            &:hover {
                border: 2px solid var(--orange-50);
                /*border-radius: 5rem;*/
                transform: scale(1.75);
                z-index: 3;
            }

            &:has(+ .quick-episode:hover),
            &:hover + .quick-episode {
                border: 2px solid hsla(from var(--orange-50) h s l / .5);
                /*border-radius: 1rem;*/
                transform: scale(1.5);
                z-index: 2;
            }

            &:has(+ .quick-episode + .quick-episode:hover),
            &:hover + .quick-episode + .quick-episode {
                /*border-radius: .5rem;*/
                transform: scale(1.20);
                z-index: 1;
            }
        }

        .quick-episode:not(.watched) {
            cursor: not-allowed;
            opacity: 0.25;
        }

        .quick-episode:first-child,
        .quick-episode.watched + * {
            cursor: pointer;
            opacity: 1;
        }

        .future-episode {
            align-items: center;
            background-color: hsla(from var(--ardoise-40) h s l / .5);
            border: 2px dashed hsla(from var(--ardoise-30) h s l / .5);
            border-radius: .25rem;
            color: var(--ardoise-30);
            display: flex;
            gap: .5rem;
            height: 2rem;
            justify-content: center;
            margin-inline: .125rem;
            padding: .25rem;
            width: 2rem;
        }

        .quick-episode, .future-episode {
            &.first {
                border-bottom-left-radius: .75rem;
                border-top-left-radius: .75rem;
            }

            &.last {
                border-bottom-right-radius: .75rem;
                border-top-right-radius: .75rem;
            }

            &.bottom-left {
                border-bottom-left-radius: .75rem;
                border-top-left-radius: .25rem;
            }

            &.bottom-right {
                border-bottom-right-radius: .75rem;
                border-top-right-radius: .25rem;
            }

            &.top-left {
                border-top-left-radius: .75rem;
                border-bottom-left-radius: .25rem;
            }

            &.top-right {
                border-top-right-radius: .75rem;
                border-bottom-right-radius: .25rem;
            }
        }

        .quick-episodes-break {
            height: 0;
            width: 100%;
        }
    }

    .user-actions, .quick-episodes {
        > div {
            &:first-child {
                border-bottom-left-radius: 5rem;
                border-top-left-radius: 5rem;
            }

            &:last-child {
                border-bottom-right-radius: 5rem;
                border-top-right-radius: 5rem;
            }
        }
    }
}

#series-season {
    .header {
        .infos {
            .infos-content {
                .season-overview {
                    max-width: 64rem;

                    .header {
                        background-color: transparent;
                        font-size: 1.5rem;
                        font-weight: 300;
                        line-height: 1.25em;
                        padding: .25rem 1rem;
                    }

                    .body {
                        border-radius: .5rem;
                        display: flex;
                        flex-direction: column;
                        font-size: 1.25rem;
                        font-weight: 300;
                        gap: 1rem;
                        line-height: 1.25em;
                        margin: .25rem 3rem;
                        text-wrap: pretty;

                        .content {
                            border-radius: .5rem;
                            margin-block-end: unset;
                            padding: .5rem;
                            position: relative;

                            &:hover {
                                .tools {
                                    opacity: 1;
                                }
                            }

                            .tools {
                                background-color: hsla(from var(--ardoise-90) h s l / .5);
                                border-radius: 5rem;
                                display: flex;
                                flex-direction: column;
                                gap: .125rem;
                                margin-inline-start: auto;
                                opacity: 0;
                                padding: .5rem;
                                position: absolute;
                                right: -1rem;
                                top: 1rem;
                                transition: opacity 0.3s ease-in-out;

                                .source, .locale {
                                    align-items: center;
                                    background-color: var(--orange-50);
                                    border-radius: .25rem;
                                    color: var(--orange-90);
                                    display: flex;
                                    font-size: 1rem;
                                    font-weight: 300;
                                    height: 2.75rem;
                                    justify-content: center;
                                    width: 2.75rem;

                                    img {
                                        border-radius: .25rem;
                                        height: 2.75rem;
                                        object-fit: cover;
                                        width: 2.75rem;
                                    }

                                    &:first-child {
                                        border-top-left-radius: 5rem;
                                        border-top-right-radius: 5rem;

                                        img {
                                            border-top-left-radius: 5rem;
                                            border-top-right-radius: 5rem;
                                        }
                                    }

                                    &:last-child {
                                        border-bottom-left-radius: 5rem;
                                        border-bottom-right-radius: 5rem;

                                        img {
                                            border-bottom-left-radius: 5rem;
                                            border-bottom-right-radius: 5rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .externals {
        background-color: unset;

        h2 {
            padding: 0 1rem;
        }
    }

    .user-actions {
        .watch-links {
            .label {
                font-size: 1rem;
            }

            > :last-child {
                padding-inline-end: 0;
            }

            .watch-link {
                &:last-child {
                    border-bottom-right-radius: 5rem;
                    border-top-right-radius: 5rem;

                    img {
                        border-bottom-right-radius: 5rem;
                        border-top-right-radius: 5rem;
                        height: 2rem;
                        width: 2rem;
                    }
                }

                .watch-link-tools {
                    background-color: hsla(from var(--ardoise-90) h s l / .8);
                    top: 2rem;

                    .watch-link-name {
                        padding-inline-end: 1rem;
                    }
                }
            }
        }
    }

    .cast-and-name, .crew-and-name {
        display: flex;
        gap: 1rem;

        .series-name {
            align-items: flex-end;
            background-color: hsl(from var(--green-50) h s l / .5);
            border-radius: .5rem;
            display: flex;
            flex-direction: column;
            font-size: clamp(1rem, 4vw, 4rem);
            font-weight: 300;
            gap: .5rem;
            justify-content: center;
            line-height: 1.25em;
            margin-block: auto;
            padding-inline: 1rem;
            position: relative;
            text-align: right;
            text-wrap: pretty;
            max-width: 50%;

            span {
                /*background-color: hsla(from var(--ardoise-90) h s l / .2);*/
                /*border-radius: .5rem;*/
                /*padding-inline: .5rem;*/
            }

            .localization-span {
                color: var(--orange-70);
            }

            .cast {
                max-width: 100%;
                width: fit-content;
            }
        }
    }
}

.episodes {
    --episode-height: 15rem;
    --episode-aspect-ratio: 16/9;

    container: episodes / inline-size;

    .episode-wrapper {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        width: 100%;

        .episode {
            align-items: flex-start;
            display: flex;
            gap: .5rem;
            height: var(--episode-height);
            justify-content: flex-start;
            padding-inline: 1rem;
            width: 100%;

            &:hover {
                .still, .infos, .user-episode {
                    border-color: var(--orange-50);
                }

                &:not(:has(form)):hover {
                    .edit {
                        opacity: 1;
                    }
                }

                .user-episode {
                    gap: .5rem;
                    justify-content: flex-start;
                    width: 3.25rem;
                }

                .add-this-episode, .remove-this-episode,
                .select-provider, .select-device, .select-vote,
                .back-to-top, .back-to-series {
                    height: 2rem;
                    opacity: 1;
                    overflow: visible;
                    width: 2rem;

                    svg {
                        height: 1.25rem;
                        width: 1.25rem;
                    }
                }

                .select-provider, .select-vote {
                    display: flex;
                    font-size: 1.25rem;
                    margin-block: unset;
                }
            }

            .still {
                align-items: center;
                aspect-ratio: var(--episode-aspect-ratio);
                background-color: hsla(from var(--ardoise-90) h s l / 0.1);
                border: 2px solid transparent;
                border-radius: .5rem;
                color: var(--green-10);
                display: flex;
                flex-shrink: 0;
                height: 100%;
                justify-content: center;
                max-width: 57%;
                position: relative;
                transition: width 0.3s ease-in-out;

                &:has(img) {
                    background-color: black;
                }

                img {
                    border-radius: .375rem;
                    height: 100%;
                    object-fit: contain;
                    width: 100%;
                }

                &:hover {
                    .custom-stills {
                        background-color: hsla(from var(--orange-40) h s l / .2);
                        border-color: var(--orange-50);
                        opacity: 1;
                    }

                    .custom-stills-text {
                        display: flex;
                    }
                }

                .custom-stills {
                    border-radius: .5rem;
                    border: 2px dashed transparent;
                    bottom: .5rem;
                    display: flex;
                    gap: .5rem;
                    justify-content: flex-start;
                    left: .5rem;
                    min-height: 4rem;
                    opacity: 0;
                    overflow-x: auto;
                    padding: .5rem;
                    position: absolute;
                    right: .5rem;
                    transition: opacity 0.3s ease-in-out;

                    &.active {
                        background-color: hsla(from var(--green-40) h s l / .5);
                        border-color: var(--green-30);
                    }

                    .custom-still {
                        aspect-ratio: 16/9;
                        border-radius: .25rem;
                        border: 2px solid var(--orange-50);
                        height: 4rem;

                        img {
                            border-radius: .125rem;
                            height: 100%;
                            object-fit: cover;
                            width: 100%;
                        }
                    }
                }

                .custom-stills-text {
                    align-items: center;
                    background-color: var(--orange-10);
                    border-radius: .5rem;
                    bottom: 5.75rem;
                    color: var(--orange-60);
                    display: none;
                    font-size: 1.5rem;
                    font-weight: 900;
                    gap: .5rem;
                    justify-content: center;
                    overflow-x: auto;
                    padding: .25rem 1rem;
                    position: absolute;

                    &.active {
                        color: var(--green-30);
                    }
                }

                .number {
                    align-items: center;
                    background-color: var(--orange-50);
                    border-radius: .25rem;
                    bottom: .5rem;
                    color: var(--ardoise-10);
                    display: flex;
                    font-size: 1.5rem;
                    font-weight: 500;
                    height: 2rem;
                    justify-content: center;
                    min-width: 2rem;
                    padding-inline: .75rem;
                    position: absolute;
                    right: .5rem;
                    transition: font-size 0.3s ease-in-out, height 0.3s ease-in-out, width 0.3s ease-in-out;

                    &.watched {
                        background-color: var(--user-episode-actions);
                    }

                    > span {
                        display: none;
                        font-size: 1rem;
                        margin-block-start: .25rem;
                    }
                }

                .finale {
                    align-items: center;
                    background-color: var(--orange-50);
                    border-radius: .25rem;
                    color: var(--ardoise-10);
                    display: flex;
                    font-size: 1.5rem;
                    font-weight: 500;
                    justify-content: center;
                    left: .5rem;
                    max-width: calc(100% - 1rem);
                    padding-block: .25rem;
                    padding-inline: .5rem;
                    position: absolute;
                    text-align: center;

                    &.season-finale {
                        top: .5rem;
                    }

                    &.series-finale {
                        top: 3.5rem;
                    }

                    &.watched {
                        background-color: var(--user-episode-actions);
                    }
                }
            }

            .infos {
                background-color: hsla(from var(--ardoise-90) h s l / 0.1);
                border: 2px solid transparent;
                border-radius: .5rem;
                color: var(--ardoise-10);
                display: flex;
                flex-direction: column;
                gap: .5rem;
                height: var(--episode-height);
                justify-content: flex-start;
                overflow-y: auto;
                padding-block: 1rem;
                padding-inline: 1rem;
                position: relative;
                scroll-behavior: smooth;
                transition: width .3s ease-in-out;
                width: 100%;

                .episode-name {
                    align-items: center;
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 2rem;
                    gap: 1rem;
                    justify-content: flex-start;
                    line-height: 1.1em;
                    position: relative;

                    .name {
                        flex-shrink: 0;
                        font-weight: 100;
                    }

                    .substitute {
                        background-color: var(--orange-40);
                        border-radius: 0.25rem;
                        font-weight: 300;
                        padding-block: 0.25rem;
                        padding-inline: 1rem;
                        text-wrap: balance;

                        &.watched {
                            background-color: var(--user-episode-actions);
                        }
                    }

                    .edit {
                        align-items: center;
                        background-color: var(--orange-50);
                        border: 2px solid var(--orange-90);
                        border-radius: 50%;
                        color: var(--orange-90);
                        cursor: pointer;
                        display: flex;
                        flex-shrink: 0;
                        font-size: 1rem;
                        height: 2rem;
                        justify-content: center;
                        opacity: 0;
                        margin-inline-start: auto;
                        position: absolute;
                        right: 0;
                        top: 0;
                        transition: opacity 0.3s ease-in-out;
                        width: 2rem;
                    }

                    /*&:not(:has(form)):hover {
                        .edit {
                            display: flex;
                        }
                    }*/
                }

                .episode-name, .episode-overview {
                    form {
                        display: flex;
                        gap: .5rem;
                        position: absolute;
                        right: 4rem;
                        top: 0;
                        width: calc(100% - 4rem);
                        z-index: 1;

                        input {
                            background-color: var(--ardoise-80);
                            border: 2px solid var(--orange-50);
                            border-radius: .25rem;
                            color: var(--ardoise-10);
                            flex-grow: 1;
                            font-size: 1rem;
                            font-weight: 100;
                            height: 2rem;
                            padding-inline: .5rem;
                        }

                        textarea {
                            background-color: var(--ardoise-80);
                            border: 2px solid var(--orange-50);
                            border-radius: .25rem;
                            color: var(--ardoise-10);
                            flex-grow: 1;
                            font-size: 1rem;
                            font-weight: 100;
                            padding-inline: .5rem;
                        }

                        button {
                            align-items: center;
                            background-color: var(--orange-50);
                            border: 2px solid var(--orange-90);
                            border-radius: .25rem;
                            color: var(--orange-90);
                            cursor: pointer;
                            display: flex;
                            font-size: 1rem;
                            font-weight: 300;
                            height: 2rem;
                            justify-content: center;
                            padding-inline: .5rem;
                        }
                    }
                }

                .episode-overview {
                    background-color: hsla(from var(--ardoise-90) h s l / 0.325);
                    border-radius: .25rem;
                    padding: .5rem;
                    position: relative;

                    .overview {
                        border-left: 2px solid var(--orange-50);
                        font-size: 1rem;
                        font-weight: 300;
                        padding-inline-start: .5rem;

                        &.additional {
                            border-left: 2px solid var(--green-50);
                            padding-inline-start: 1rem;
                        }

                        /*&.us {
                            border-left: 2px solid var(--green-50);
                            position: relative;

                            &:hover .translate {
                                display: flex;
                            }

                            .translate {
                                align-items: center;
                                background-color: var(--green-50);
                                border-radius: .25rem;
                                color: var(--green-90);
                                cursor: pointer;
                                display: none;
                                font-size: 1.25rem;
                                font-weight: 300;
                                height: 2rem;
                                justify-content: center;
                                position: absolute;
                                right: 0;
                                top: 0;
                                width: 2rem;
                            }

                            svg {
                                cursor: pointer;
                            }
                        }*/
                    }

                    .edit {
                        align-items: center;
                        background-color: var(--orange-50);
                        border: 2px solid var(--orange-90);
                        border-radius: 50%;
                        color: var(--orange-90);
                        cursor: pointer;
                        display: flex;
                        flex-shrink: 0;
                        font-size: 1rem;
                        height: 2rem;
                        justify-content: center;
                        margin-inline-start: auto;
                        opacity: 0;
                        position: absolute;
                        right: -.5rem;
                        top: -.5rem;
                        transition: opacity 0.3s ease-in-out;
                        width: 2rem;
                    }

                    /*&:not(:has(form)):hover {
                        .edit {
                            display: flex;
                        }
                    }*/
                }

                .episode-stats {
                    display: flex;
                    gap: 1rem;

                    .runtime, .vote-average {

                    }
                }

                .air-date {
                    align-items: center;
                    display: flex;
                    flex-wrap: wrap;
                    gap: .125rem 1rem;

                    .airing {
                        align-items: center;
                        background-color: hsla(from var(--ardoise-80) h s l / .5);
                        border-radius: 5rem;
                        color: var(--ardoise-10);
                        display: flex;
                        font-size: 1rem;
                        font-weight: 500;
                        gap: .5rem;
                        padding-block: .25rem;
                        padding-inline: .5rem;
                    }

                    .watch-at-list {
                        display: flex;
                        flex-wrap: wrap;
                        gap: .5rem;
                        justify-content: flex-start;
                        padding-inline: 1rem;

                        .watched-at {
                            align-items: center;
                            background-color: cadetblue;
                            border-radius: 5rem;
                            cursor: grab;
                            display: flex;
                            flex-wrap: nowrap;
                            gap: .5rem;
                            padding: .25rem 1rem;

                            &.editing {
                                background-color: var(--orange-50);
                                cursor: pointer;
                            }
                        }
                    }

                    .watched-at-modify {
                        background-color: var(--orange-50);
                        border-radius: .25rem;
                        color: var(--ardoise-10);
                        cursor: pointer;
                        display: flex;
                        font-size: 1rem;
                        font-weight: 300;
                        gap: .5rem;
                        justify-content: center;
                        padding: .25rem;

                        input[type="datetime-local"] {
                            background-color: var(--orange-20);
                            border: 2px solid var(--orange-50);
                            border-radius: .25rem;
                            color: var(--orange-90);
                            font-size: 1rem;
                            padding-inline: .5rem;
                        }

                        button {
                            background-color: var(--orange-30);
                            border-radius: .375rem;
                            border: 2px solid var(--orange-60);
                            color: var(--orange-90);
                            cursor: pointer;
                            padding: .25rem .5rem;

                            &:hover {
                                background-color: var(--orange-40);
                                border: 2px solid var(--orange-70);
                            }
                        }
                    }
                }

                .air-date, .episodes, .runtime {
                    font-size: 1rem;
                    font-weight: 300;
                }

                .episodes {
                    display: flex;
                    gap: 1rem;

                    .watched {
                        display: flex;
                        gap: .5rem;
                    }
                }

                .guest-stars {
                    display: flex;
                    flex-shrink: 0;
                    height: 16rem;
                    overflow-x: auto;

                    .wrapper {
                        height: 100%;
                        padding-inline: 1rem;

                        .people {
                            height: 100%;

                            a {
                                display: flex;
                                gap: .5rem;
                                height: 100%;

                                .photo {
                                    height: 100%;

                                    img {
                                        border-radius: .25rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .episode:not(:has(.number.watched)) {
            display: none;
        }
    }

    .episode:has(.number.watched) + .episode:not(:has(.number.watched)),
    .episode:last-of-type {
        display: flex;

        .still {
            .number {
                > span {
                    display: inline-block;
                }
            }
        }
    }

    .episode:first-child {
        display: flex !important;
    }
}

.user-episode {
    align-items: center;
    background-color: hsla(from var(--ardoise-90) h s l / .2);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    font-size: 1.25rem;
    font-weight: 400;
    gap: 1%;
    height: var(--episode-height);
    justify-content: center;
    padding: 0.5rem;
    transition: gap .3s ease-in-out, width .3s ease-in-out;
    width: 4.25rem;

    .add-this-episode, .remove-this-episode,
    .select-provider, .select-device, .select-vote,
    .back-to-top, .back-to-series {
        align-items: center;
        border-radius: .25rem;
        color: var(--ardoise-10);
        cursor: pointer;
        display: flex;
        font-weight: 500;
        justify-content: center;
        line-height: 1em;
        overflow: hidden;
        transition: height .3s ease-in-out, width 0.3s ease-in-out;
    }

    .back-to-top, .back-to-series {
        height: 0;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        width: 0;
    }

    .add-this-episode, .remove-this-episode,
    .select-provider, .select-device, .select-vote {
        font-size: 2rem;
        /*margin-block: auto;*/
        height: 100%;
        transition: font-size 0.3s ease-in-out;
        width: 3rem;

        svg {
            height: 2rem;
            width: 2rem;
        }
    }

    .select-provider, .select-vote {
        &:has(svg) {
            display: none;
        }
    }

    .add-this-episode, .back-to-top, .back-to-series {
        background-color: var(--add-this-episode);
    }

    .remove-this-episode,
    .select-provider, .select-device, .select-vote {
        background-color: var(--user-episode-actions);
    }

    .select-vote {
        input[id^="vote-"] {
            width: 3rem;
        }
    }

    .select-provider, .select-device, .select-vote {
        position: relative;

        img {
            border-radius: .25rem;
            height: 2rem;
            object-fit: cover;
            width: 2rem;
        }

        .list {
            background-color: var(--user-episode-list);
            border: 2px solid var(--user-episode-actions);
            border-radius: .25rem;
            display: flex;
            gap: .25rem;
            overflow-x: auto;
            padding: .25rem;
            position: absolute;
            right: 2rem;
            z-index: 2;

            .item {
                align-items: center;
                display: flex;
                flex-shrink: 0;
                height: 2rem;
                justify-content: center;
                width: 2rem;

                img {
                    height: 2rem;
                    object-fit: cover;
                    width: 2rem;
                }

                &:hover {
                    background-color: var(--orange-50);
                }
            }

            .separator {
                background-color: var(--orange-50);
                flex-shrink: 0;
                height: 2rem;
                margin-inline: 3px;
                width: 2px;
            }

            button {
                align-items: center;
                background-color: var(--orange-50);
                border-radius: .25rem;
                border: none;
                color: var(--ardoise-10);
                cursor: pointer;
                display: flex;
                flex-shrink: 0;
                height: 2rem;
                justify-content: center;
                width: 2rem;
            }
        }
    }

    .select-provider, .select-vote {
        .list {
            max-width: 25.25rem;
        }
    }

    .select-device {
        .list {
            max-width: 14rem;
        }
    }
}

.vote-graph {
    display: flex;
    flex-flow: row-reverse;
    gap: 1rem;
    margin-inline: auto;
    max-width: 100%;
    width: fit-content;

    &.dark {
        .episode-votes {
            .episode-vote {
                .vote {
                    .user-vote, .dashed-vote {
                        color: var(--green-80);
                    }

                    .user-vote {
                        background-color: hsla(from var(--green-60), h s l / .4);
                        border: 2px solid var(--green-80);
                    }

                    .dashed-vote {
                        background-color: hsla(from var(--green-60), h s l / .1);
                        border: 1px dashed var(--green-70);
                    }
                }

                .episode-number {
                    color: hsl(from var(--green-50) h s 20%);
                    font-weight: 500;
                }
            }
        }
    }

    .episode-votes {
        align-items: flex-end;
        /*background-color: hsla(from var(--ardoise-90) h s l / .2);*/
        border-radius: .25rem;
        display: flex;
        gap: 1rem;
        height: 14rem;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 1rem;
        width: 100%;

        .episode-vote {
            align-items: center;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            gap: .5rem;

            .vote {
                background-color: hsla(from var(--orange-50) h s l / .2);
                border-color: hsla(from var(--orange-50) h s l / .4);
                border-radius: .25rem;
                border-style: solid;
                border-width: 2px;
                max-width: 4rem;
                position: relative;
                width: 100%;

                .user-vote, .dashed-vote {
                    align-items: flex-end;
                    border-radius: .25rem;
                    bottom: -2px;
                    color: var(--green-20);
                    display: flex;
                    font-size: 1.25rem;
                    font-weight: 500;
                    justify-content: center;
                    left: 5%;
                    padding-block-end: 1rem;
                    position: absolute;
                    transition: height 0.3s ease-in-out;
                    width: 90%;
                    z-index: 1;
                }

                .user-vote {
                    background-color: hsla(from var(--green-40), h s l / .4);
                    border: 2px solid var(--green-20);
                }

                .dashed-vote {
                    background-color: hsla(from var(--green-40), h s l / .1);
                    border: 1px dashed var(--green-30);
                    height: 10rem;
                }
            }
        }
    }

    .vote-average {
        background-color: hsla(from var(--green-80) h s l / .5);
        border: 2px solid var(--green-20);
        border-radius: .5rem;
        flex-shrink: 0;
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.25em;
        margin-block: auto;
        padding: 2rem;
        text-align: center;
        text-wrap: nowrap;
    }

}

.what-to-watch-next {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .next-button {
        align-items: center;
        background-color: hsla(from var(--green-50) h s l / .75);
        border-radius: 25rem;
        color: var(--ardoise-10);
        cursor: pointer;
        display: flex;
        font-size: 2.5rem;
        font-weight: 300;
        height: 4.5rem;
        justify-content: center;
        margin-inline: auto;
        padding-inline: 3rem;
        text-align: center;
        text-wrap: balance;
        width: fit-content;

        &.disabled {
            background-color: hsla(from var(--ardoise-50) h s l / .5);
            color: hsla(from var(--ardoise-10) h s l / .5);
            cursor: not-allowed;
        }

        &:hover {
            background-color: var(--green-50);
        }
    }

    .series-to-watch {
        background-color: hsla(from var(--ardoise-90) h s l / .2);
        border-radius: .5rem;
        padding: 1rem;
        width: 100%;

        .wrapper {
            display: flex;
            gap: 1rem;
            overflow-x: auto;
            width: 100%;

            .card {
                height: 27rem;
                width: 15rem;

                a {
                    .poster, .name {
                        align-items: center;
                        background-color: hsla(from var(--ardoise-70) h s l / .5);
                        display: flex;
                        justify-content: center;
                        width: 15rem;
                    }

                    .poster {
                        border-radius: .5rem .5rem 0 0;
                        height: 22rem;
                        position: relative;

                        img {
                            border-radius: .5rem .5rem 0 0;
                            height: 22rem;
                            object-fit: cover;
                            width: 15rem;
                        }

                        .series-infos {
                            /*border: 1px dashed var(--orange-50);*/
                            bottom: 1rem;
                            display: flex;
                            flex-direction: column;
                            gap: .25rem;
                            left: 0;
                            padding-inline: .5rem;
                            position: absolute;
                            right: 0;

                            .air-date {
                                background-color: var(--orange-10);
                                border-radius: .25rem;
                                color: var(--orange-90);
                                font-size: 1rem;
                                font-weight: 100;
                                margin-inline-start: auto;
                                padding: .25rem;
                            }

                            .date-added {
                                background-color: var(--orange-40);
                                border-radius: .25rem;
                                color: var(--orange-90);
                                font-size: 1rem;
                                font-weight: 100;
                                margin-inline-start: auto;
                                padding: .25rem;
                            }

                            .episode-number {
                                background-color: var(--orange-10);
                                border-radius: .25rem;
                                color: var(--orange-90);
                                font-size: 2rem;
                                font-weight: 100;
                                margin-inline-start: auto;
                                padding: .5rem;
                            }
                        }

                        .progress {
                            background-color: var(--orange-10);
                            border: 2px solid var(--orange-40);
                            bottom: 0;
                            height: .75rem;
                            left: 0;
                            position: absolute;
                            right: 0;

                            .progress-bar {
                                background-color: var(--orange-50);
                                height: 100%;
                                transition: width 0.3s ease-in-out;
                                width: 0;
                            }
                        }
                    }

                    .name {
                        border-radius: 0 0 .5rem .5rem;
                        flex-direction: column;
                        height: 5rem;
                        text-align: center;
                    }
                }
            }
        }
    }
}

.get-filming-locations {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .get-filming-locations-button {
        align-items: center;
        background-color: var(--orange-50);
        border-radius: 25rem;
        color: var(--ardoise-10);
        cursor: pointer;
        display: flex;
        font-size: 2.5rem;
        font-weight: 300;
        height: 4.5rem;
        justify-content: center;
        margin-inline: auto;
        padding-inline: 3rem;
        text-align: center;
        text-wrap: balance;
        width: fit-content;

        &.disabled {
            background-color: hsla(from var(--ardoise-80) h s l / .5);
            color: hsla(from var(--ardoise-10) h s l / .5);
            cursor: not-allowed;
        }

        &:hover {
            background-color: var(--orange-40);
        }
    }
}

#review-dialog {
    border: 2px solid var(--orange-50);
    border-radius: .5rem;
    margin-block: auto;
    margin-inline: auto;
    width: 16rem;

    .content {
        background-color: hsla(from var(--ardoise-80) h s l / .5);
        color: var(--ardoise-10);
        padding: 1rem 2rem;

        form {
            display: flex;
            gap: 1rem;

            button {
                appearance: none;
                background-color: var(--orange-50);
                border-radius: .25rem;
                color: var(--ardoise-10);
                font-size: 1.25rem;
                font-weight: 300;
                padding-block: .25rem;
                padding-inline: 1rem;
            }
        }
    }
}

#review-dialog::backdrop {
    background-color: #1f1f1fcf;
}

#select-provider-dialog {
    border: 2px solid var(--orange-50);
    border-radius: .5rem;
    margin-block: auto;
    margin-inline: auto;
    width: 16rem;

    .content {
        background-color: hsla(from var(--ardoise-80) h s l / .5);
        color: var(--ardoise-10);
        display: flex;
        gap: 1rem;
        padding: 1rem 2rem;

        form {
            display: flex;
            gap: 1rem;

            button {
                appearance: none;
                background-color: var(--orange-50);
                border-radius: .25rem;
                color: var(--ardoise-10);
                font-size: 1.25rem;
                font-weight: 300;
                padding-block: .25rem;
                padding-inline: 1rem;
            }
        }
    }
}

#select-provider-dialog::backdrop {
    background-color: #1f1f1fcf;
}

.cast, .crew, .guest-stars {
    overflow-x: auto;
    width: 100%;

    .wrapper {
        display: flex;
        gap: .5rem;
        flex-shrink: 0;
        justify-content: flex-start;
        padding-inline: 1rem;

        .people {
            display: flex;
            flex-direction: column;
            height: 30rem;
            position: relative;
            width: 15rem;

            &.small {
                height: 20rem;
                width: 12rem;
            }

            .photo, .profile {
                align-items: center;
                background-color: var(--green-70);
                border-radius: .25rem;
                color: var(--ardoise-10);
                display: flex;
                flex-direction: column;
                gap: 1rem;
                height: 75%;
                justify-content: center;
                text-align: center;
                width: 100%;

                img {
                    border-radius: .25rem .25rem 0 0;
                    height: 100%;
                    object-fit: cover;
                    width: 100%;
                }

                > div {
                    font-size: 1rem;
                    font-weight: 100;
                    line-height: 1.1rem;

                    &:first-child {
                        font-weight: 300;
                    }
                }
            }

            .infos {
                align-items: center;
                background-color: hsla(from var(--ardoise-90) h s l / .5);
                border-radius: 0 0 .25rem .25rem;
                display: flex;
                flex-direction: column;
                font-size: 1rem;
                justify-content: center;
                line-height: 1.25rem;
                height: 25%;
                overflow: hidden;
                width: 100%;

                .name, .preferred-name {
                    font-weight: 300;
                }

                .preferred-name {
                    color: var(--orange-80);
                }

                &:has(.preferred-name) {
                    .name {
                        color: var(--orange-90);
                    }
                }

                div {
                    text-align: center;
                }
            }

            .google {
                bottom: 1rem;
                color: var(--orange-50);
                position: absolute;
                right: 1rem;
            }
        }
    }
}

.crew {
    .wrapper:has(.job) {
        justify-content: stretch;

        .people:has(.job) {
            /*height: 100%;*/

            .infos {
                gap: .25rem;
                height: unset;
                min-height: 25%;
                overflow: unset;
                padding: .25rem;

                .jobs {
                    display: flex;
                    gap: .25rem;
                    overflow-x: auto;
                    max-width: 100%;
                    padding-block: .25rem;

                    .job {
                        background-color: var(--green-70);
                        border-radius: .25rem;
                        flex-shrink: 0;
                        padding: .125rem .5rem;
                        text-wrap: nowrap;
                    }
                }
            }
        }
    }
}

.all-my-series {
    margin-block-start: 4rem;

    main {
        .wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: flex-start;
            margin-block: 1rem;
            margin-inline: auto;
            width: round(down, 100%, 16rem); /* 16rem = 1 card + gap */

            .card {
                height: 27rem;
                width: 15rem;

                a {
                    .poster, .name {
                        align-items: center;
                        background-color: hsla(from var(--ardoise-70) h s l / .5);
                        display: flex;
                        justify-content: center;
                        width: 15rem;
                    }

                    .poster {
                        border-radius: .5rem .5rem 0 0;
                        height: 22rem;
                        position: relative;

                        img {
                            border-radius: .5rem .5rem 0 0;
                            height: 22rem;
                            object-fit: cover;
                            width: 15rem;
                        }

                        .series-infos {
                            /*border: 1px dashed var(--orange-50);*/
                            bottom: 1rem;
                            display: flex;
                            flex-direction: column;
                            gap: .25rem;
                            left: 0;
                            padding-inline: .5rem;
                            position: absolute;
                            right: 0;

                            .air-date {
                                background-color: var(--orange-10);
                                border-radius: .25rem;
                                color: var(--orange-90);
                                font-size: 1rem;
                                font-weight: 100;
                                margin-inline-start: auto;
                                padding: .25rem;
                            }

                            .date-added {
                                background-color: var(--orange-40);
                                border-radius: .25rem;
                                color: var(--orange-90);
                                font-size: 1rem;
                                font-weight: 100;
                                margin-inline-start: auto;
                                padding: .25rem;
                            }

                            .episode-number {
                                background-color: var(--orange-10);
                                border-radius: .25rem;
                                color: var(--orange-90);
                                font-size: 2rem;
                                font-weight: 100;
                                margin-inline-start: auto;
                                padding: .5rem;
                            }
                        }

                        .progress {
                            background-color: var(--orange-10);
                            border: 2px solid var(--orange-40);
                            bottom: 0;
                            height: .75rem;
                            left: 0;
                            position: absolute;
                            right: 0;

                            .progress-bar {
                                background-color: var(--orange-50);
                                height: 100%;
                                transition: width 0.3s ease-in-out;
                                width: 0;
                            }
                        }
                    }

                    .name {
                        border-radius: 0 0 .5rem .5rem;
                        flex-direction: column;
                        height: 5rem;
                        text-align: center;
                    }
                }
            }
        }
    }
}

@container series-show (width < 1024px) {

    .user-actions {
        padding-inline: 1rem;

        .watch-links {
            .label {
                display: none;
            }

            .watch-link {
                span {
                    display: none;
                }

                img {
                    height: 3rem;
                    width: 3rem;
                }
            }
        }

        .rating {
            .rating-stars {
                .star {
                    padding-inline: .25rem;
                }
            }
        }

        .actions {
            .action {
                height: 3rem;
                width: 3rem;
            }
        }
    }

    .header {
        .backdrops {
            width: 100% !important;
        }
    }

    .infos {
        width: 100% !important;
    }

    .posters {
        width: 100% !important;
    }

    > .content {
        flex-direction: column;

        .right {
            order: 1;
        }

        .left {
            order: 2;
            width: 100cqi !important;

            .seasons {
                .season {
                    height: 15rem;

                    .poster {
                        height: 15rem;
                    }

                    .infos {
                        .name {
                            font-size: 1.5rem;
                        }

                        .overview {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

@media (width <= 64rem) {
    .series-show {
        .header, .schedules {
            padding: 0;
        }

        .content:has(.left) {
            flex-direction: column;

            .left {
                width: 100%;

                .seasons {
                    .season {
                        padding-inline: 0;
                    }
                }
            }

            h3 {
                padding-inline-start: 1rem;
            }

            .providers {
                padding-inline: 0.75rem;
            }

            .seasons-episodes {
                .season-episode {
                    align-items: center;
                    flex-direction: column;
                    height: unset;
                    position: relative;

                    .poster, .still {
                        aspect-ratio: 16/9;
                        width: 100%;

                        .number {
                            bottom: -2rem;
                            left: .5rem;
                            right: unset;
                            height: 20vw;
                            width: 20vw;
                            font-size: 15vw;
                            z-index: 1;
                        }
                    }

                    .infos {
                        height: unset;
                        padding-block-start: 2rem;
                    }

                    .user-episode {
                        position: absolute;
                        right: 4vw;
                        top: 5vw;
                    }
                }
            }

            .cast, .crew {
                .wrapper {
                    padding-inline: 0;
                }
            }
        }
    }

    .add-this {
        bottom: 0;
        border-radius: 0 0 1rem 1rem;
        left: 0;
        right: 0;
    }

    .all-my-series {
        main {
            .wrapper {
                .card {
                    height: unset;
                    width: 100%;

                    a {
                        .poster, .name {
                            width: 100%;
                        }

                        .poster {
                            height: unset;

                            img {
                                aspect-ratio: 78 / 117;
                                height: auto;
                                width: 100%;
                            }

                            .series-infos {
                                .air-date {
                                    font-size: 2rem;
                                }

                                .episode-number {
                                    font-size: 3rem;
                                }
                            }
                        }

                        .name {
                            font-size: 1.5rem;
                        }
                    }
                }
            }
        }
    }

    .season-stuff {
        .sizes {
            display: none;
        }
    }

    .episodes {
        .episode-wrapper {
            gap: 1.5rem;

            .episode {
                flex-wrap: wrap;
                height: unset;
                padding-inline: 0;

                .still {
                    border: 2px solid hsla(from var(--orange-40) h s l / .5);
                    max-width: unset;
                    width: 100%;

                    img {
                        height: calc(100% - 4px);
                    }
                }

                .infos {
                    border: 2px solid hsla(from var(--orange-40) h s l / .5);
                    width: calc(100% - 4.75rem) !important;
                }

                .user-episode {
                    border: 2px solid hsla(from var(--orange-40) h s l / .5);
                }

                &:hover {
                    .infos {
                        width: calc(100% - 3.75rem) !important;
                    }
                }
            }
        }
    }
}

@media (width <= 52rem) {
    .series-show {
        margin-block-start: 2rem;
    }

    .what-to-watch-next {
        .next-button {
            font-size: 1.5rem;
        }
    }

    .get-filming-locations {
        .get-filming-locations-button {
            font-size: 1.5rem;
        }
    }

    .add-this {
        bottom: 0;
        border-radius: 0 0 1rem 1rem;
        left: 0;
        right: 0;
    }
}

@media (min-width: 1024px) {
    .episodes {
        .episode-wrapper {
            .episode {
                .still {
                    .number {
                        font-size: 3rem;
                        height: 4rem;
                        min-width: 4rem;

                        > span {
                            font-size: 2rem;
                            margin-block-start: .75rem;
                        }
                    }
                }
            }
        }
    }
}

.series-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-block-end: 1rem;
    margin-block-start: 4rem;
    min-height: calc(100dvh - 8rem);
    width: 100%;

    .form {
        gap: 0;
        margin-block-end: unset;
        margin-block-start: unset;
        min-width: 32rem;
        width: unset;

        .form-col:first-child {
            max-width: 33% !important;
            width: 33%;

            h1 {
                margin-block: 0;
            }

            .hide-search {
                cursor: pointer;
                height: 1rem;
                position: absolute;
                right: .5rem;
                top: .5rem;
                width: 1rem;

                svg {
                    height: 1rem;
                    width: 1rem;
                }
            }

            .magnify {
                display: none;
            }

            .sticky {
                background-color: var(--orange-20);
                border-radius: .5rem;
                display: flex;
                flex-direction: column;
                gap: .25rem;
                padding: 1rem;
                position: sticky;
                top: 0;
                z-index: 1;
            }

            &.folded {
                border-radius: 50%;
                height: 3rem;
                overflow: hidden;
                padding: 0;
                position: absolute;
                top: 5rem;
                width: 3rem;

                h1, .hide-search, .form-row {
                    display: none;
                }

                .sticky {
                    background-color: transparent;
                    border-radius: 50%;
                    padding: 0;
                }

                .magnify {
                    align-items: center;
                    background-color: var(--orange-50);
                    border-radius: 50%;
                    color: var(--orange-90);
                    cursor: pointer;
                    display: flex;
                    height: 3rem;
                    justify-content: center;
                    width: 3rem;

                    &:hover {
                        background-color: var(--orange-40);
                        color: var(--ardoise-10);
                    }

                    svg {
                        height: 2rem;
                        width: 2rem;
                    }
                }
            }
        }

        .form-row.center {
            align-items: center;
            flex-wrap: wrap;
            margin-inline: auto;
        }

        .form-row.dismissed {
            .form-field {
                display: none;
            }
        }

        .form-row-name {
            align-items: center;
            border-bottom: 2px solid var(--orange-30-alpha-75);
            display: flex;

            .toggler {
                align-items: center;
                border-radius: .25rem;
                display: flex;
                height: 1.5rem;
                justify-content: center;
                margin-inline-start: auto;
                position: relative;
                width: 1.5rem;

                &:hover {
                    background-color: var(--orange-50);
                    color: var(--orange-90);

                    .toggler-menu {
                        display: flex;
                    }
                }

                .toggler-menu {
                    background-color: var(--orange-30);
                    border-radius: .25rem;
                    color: var(--orange-70);
                    display: none;
                    flex-direction: column;
                    overflow: hidden;
                    position: absolute;
                    right: 0;
                    top: 1.5rem;
                    z-index: 1;

                    .toggler-menu-item {
                        padding-inline: .5rem;

                        &:hover {
                            background-color: var(--orange-50);
                            color: var(--orange-90);
                        }
                    }
                }
            }
        }
    }

    .series-search-result {
        align-items: center;
        color: var(--ardoise-10);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        font-weight: 300;
        justify-content: flex-start;
        text-align: center;

        .header, .footer {
            align-items: center;
            display: flex;
            gap: 1rem;
            justify-content: center;
            padding-block: 0;
            padding-inline: 0;
            width: 100%;

            .results {
                background-color: var(--ardoise-80);
                border-radius: .25rem;
                color: var(--ardoise-10);
                display: flex;
                flex-wrap: wrap;
                font-size: 1.125rem;
                font-weight: 100;
                gap: 1rem;
                line-height: 1.25rem;
                padding: 1rem;
            }

            .pages {
                align-items: center;
                display: flex;
                gap: .25rem;
                justify-content: flex-start;
                overflow-x: auto;
                scroll-snap-type: x mandatory;

                div.btn, button {
                    appearance: none;
                    background-color: var(--ardoise-60);
                    border: 1px solid var(--ardoise-50);
                    border-radius: .25em;
                    color: var(--ardoise-10);
                    font-size: 1rem;
                    font-weight: 300;
                    padding-block: .125rem;
                    padding-inline: 1rem;
                    scroll-snap-align: start;
                }

                button {
                    background-color: var(--orange-40);
                    color: var(--orange-90);
                    cursor: pointer;
                }
            }
        }

        .wrapper {
            display: flex;
            flex-shrink: 0;
            flex-wrap: wrap;
            gap: .25rem;
            justify-content: flex-start;
            margin-inline: auto;
            /*max-width: 61rem;*/
            /* 61rem = 5 cards + gap */
            padding-block: 1rem;
            width: round(down, 100%, 12.25rem);

            .card {
                align-items: flex-start;
                background-color: var(--ardoise-90);
                border-radius: .25rem;
                color: var(--ardoise-10);
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 12rem;

                .poster {
                    align-items: center;
                    background-color: var(--ardoise-80);
                    border-radius: .25rem .25rem 0 0;
                    color: var(--ardoise-10);
                    display: flex;
                    height: 18rem;
                    justify-content: center;
                    position: relative;
                    width: 12rem;

                    img {
                        border-radius: .25rem .25rem 0 0;
                        height: 18rem;
                        object-fit: cover;
                        width: 12rem;
                    }
                }

                .name {
                    align-items: center;
                    display: flex;
                    font-weight: 100;
                    height: 3rem;
                    justify-content: center;
                    line-height: 1rem;
                    width: 12rem;

                    &.added {
                        background-color: var(--orange-40);
                        border-radius: 0 0 .25rem .25rem;
                        color: var(--orange-90);
                        font-weight: 300;
                    }
                }
            }
        }
    }
}

.content {
    &:has(.series-map) {
        flex-direction: column;
    }
}

#series-map-title {
    align-items: center;
    display: flex;
    font-size: 1.5rem;
    font-weight: 100;
    gap: .5rem;
    line-height: 1.25em;
    margin-block: 1rem .5rem;

    .add-location-button {
        align-items: center;
        background-color: var(--orange-50);
        border-radius: .25rem;
        color: var(--orange-90);
        cursor: pointer;
        display: flex;
        font-size: 1rem;
        font-weight: 300;
        height: 2rem;
        justify-content: center;
        width: 2rem;
    }

    .toggle-cooperative-gestures {
        align-items: center;
        background-color: var(--orange-50);
        border-radius: .25rem;
        color: var(--orange-90);
        cursor: pointer;
        display: flex;
        font-size: 1rem;
        font-weight: 300;
        gap: .25rem;
        height: 2rem;
        justify-content: center;
        margin-inline-start: auto;
        width: 4rem;

        &.active {
            background-color: var(--green-50);
            color: var(--green-10);
        }
    }
}

.series-map {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;

    &:has(h1) {
        margin-block-start: 4rem;
    }

    .series-map-header {
        align-items: center;
        background-color: var(--orange-40);
        border-radius: .25rem;
        color: var(--ardoise-10);
        display: flex;
        margin-block-end: 1rem;
        padding-block: .25rem;
        padding-inline: 1rem;

        h1 {
            font-size: 1.5rem;
            font-weight: 300;
        }

        .numbers {
            align-items: center;
            display: flex;
            gap: 1rem;
            font-size: 1.5rem;
            margin-inline-start: auto;

            > div {
                align-items: center;
                display: flex;
                gap: .5rem;
            }
        }
    }

    .map-controller {
        --map-height-all: 60vh;

        border: 2px solid var(--ardoise-50);
        border-radius: .5rem;
        height: 50vh;
        overflow: hidden;

        &.all {
            height: var(--map-height-all);
        }

        .leaflet-popup-content-wrapper {
            background-color: hsla(from var(--orange-40) h s l / .5);
            overflow: hidden;

            .leaflet-popup-content {
                margin: 0;
                width: 24rem;

                .leaflet-popup-content-title {
                    background-color: var(--orange-50);
                    border-radius: .25rem .25rem 0 0;
                    color: var(--ardoise-10);
                    font-size: 1.5rem;
                    font-weight: 300;
                    padding-block: .25rem;
                    padding-inline: 1rem;
                    text-align: center;
                }

                .leaflet-popup-content-description {
                    background-color: hsla(from var(--ardoise-90) h s l / .5);
                    border-radius: 0 0 .25rem .25rem;
                    color: var(--ardoise-10);
                    font-size: 1rem;
                    font-weight: 100;
                    padding-block: .5rem;
                    padding-inline: 1rem;
                    text-align: center;
                    text-wrap: balance;
                }

                .leaflet-popup-content-image {
                    img {
                        border-radius: 0 0 .25rem .25rem;
                        height: 12rem;
                        object-fit: cover;
                        width: 24rem;
                    }
                }
            }
        }

        .mapboxgl-popup-content {
            border-radius: 8px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            padding: unset;
            width: 20rem;

            .leaflet-popup-content-title {
                background: var(--orange-40);
                font-size: 1.25rem;
                font-weight: 300;
                line-height: 1.25em;
                padding: .5rem;

                &.poi {
                    background-color: var(--green-50);
                }
            }

            .leaflet-popup-content-description {
                background-color: var(--orange-30);
                font-size: 1rem;
                font-weight: 300;
                padding: .5rem;

                &.poi {
                    background-color: var(--green-70);
                }

                .location {
                    background-color: hsla(from var(--orange-40) h s l / .5);
                    margin-block-end: .5rem;
                    padding-block: .25rem;
                }
            }

            .leaflet-popup-content-image {
                img {
                    border-radius: 0 0 .5rem .5rem;
                    height: 12rem;
                    object-fit: cover;
                    width: 24rem;
                }
            }

            .mapboxgl-popup-close-button {
                right: .5rem;
            }
        }

        .height-handle {
            background-color: var(--orange-50);
            border-radius: .25rem;
            bottom: 0;
            cursor: grab;
            height: 2rem;
            left: 50%;
            opacity: 0;
            position: absolute;
            transform: translate(-50%, 50%);
            transition: opacity 0.3s ease-in-out;
            width: 4rem;
            z-index: 1000;

            &:hover {
                opacity: 1;
            }
        }
    }

    .temp-locations {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .locations {
        display: flex;
        overflow-x: auto;

        ul {
            display: flex;
            gap: .5rem;
            margin-inline: auto;

            li {
                background-color: hsla(from var(--ardoise-90) h s l / .5);
                border-radius: .375rem;
                display: flex;
                flex-direction: column;

                .image {
                    aspect-ratio: 16/9;
                    position: relative;
                    width: 15rem;

                    &.db {
                        border: 2px solid var(--orange-50);
                        border-radius: .375rem .375rem 0 0;
                    }

                    img {
                        aspect-ratio: 16 / 9;
                        border-radius: .25rem .25rem 0 0;
                        height: 100%;
                        object-fit: cover;
                        width: 100%;

                        &.pointer {
                            cursor: pointer;
                        }
                    }

                    .count {
                        align-items: center;
                        background-color: var(--orange-50);
                        border-radius: 50%;
                        color: var(--ardoise-10);
                        display: flex;
                        font-size: 1.25rem;
                        font-weight: 600;
                        height: 2rem;
                        justify-content: center;
                        position: absolute;
                        right: .5rem;
                        top: .5rem;
                        width: 2rem;
                    }

                    .episode {
                        align-items: center;
                        background-color: var(--green-60);
                        border-radius: .25rem;
                        bottom: .5rem;
                        color: var(--ardoise-10);
                        display: flex;
                        font-size: 1.25rem;
                        font-weight: 600;
                        height: 2rem;
                        justify-content: center;
                        padding-inline: .5rem;
                        position: absolute;
                        right: .5rem;
                    }

                    .arrow, .edit {
                        align-items: center;
                        background-color: hsla(from var(--ardoise-80) h s l / .5);
                        border-radius: 50%;
                        color: var(--ardoise-10);
                        cursor: pointer;
                        display: flex;
                        font-size: 1.25rem;
                        font-weight: 600;
                        height: 2rem;
                        justify-content: center;
                        opacity: 0;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        transition: opacity 0.3s ease-in-out;
                        width: 2rem;

                        &.left {
                            left: .5rem;
                        }

                        &.right {
                            right: .5rem;
                        }
                    }

                    .edit {
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }

                    &:hover {
                        .arrow, .edit {
                            opacity: 1;
                        }
                    }

                    .list {
                        display: none;
                    }
                }

                .location {
                    align-items: center;
                    cursor: grab;
                    display: flex;
                    height: 100%;
                    justify-content: center;
                    line-height: 1.25em;
                    padding-block: .25rem;
                    padding-inline: .5rem;
                    text-align: center;
                    text-wrap: balance;
                    width: 15rem;

                    &.poi {
                        flex-direction: column;
                    }
                }
            }
        }
    }
}

.series-map-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;

    &.center {
        margin-inline: auto;
        width: 100%;
    }

    .map-tools {
        display: flex;
        gap: 1rem;
        /*margin-block: 2rem;*/
        position: relative;
        width: 100%;

        h2 {
            display: flex;
            gap: 1rem;
        }

        .help {
            align-items: center;
            background-color: var(--orange-40);
            border-radius: 50%;
            color: var(--ardoise-10);
            cursor: pointer;
            display: flex;
            flex-shrink: 0;
            font-size: 1.25rem;
            font-weight: 300;
            height: 2rem;
            justify-content: center;
            margin-inline-start: auto;
            width: 2rem;

            &:hover + .keyboard-help {
                display: flex;
            }
        }

        .keyboard-help {
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            background-color: hsla(from var(--ardoise-80) h s l / .5);
            border-radius: .5rem;
            bottom: 8rem;
            color: var(--ardoise-10);
            display: none;
            flex-direction: column;
            gap: .5rem;
            padding: 1rem;
            position: absolute;
            right: 0;

            div {
                align-items: center;
                display: flex;
                gap: .5rem;
            }
        }

        .options {
            flex-shrink: 0;
            margin-inline: auto;
            max-width: calc(100% - 5rem);

            form {
                .form-row {
                    display: flex;
                    gap: 1rem;

                    .pages {
                        align-items: center;
                        display: flex;
                        flex-grow: 1;
                        gap: .25rem;
                        justify-content: flex-start;
                        overflow-x: auto;
                        scroll-snap-type: x mandatory;

                        .page {
                            appearance: none;
                            background-color: var(--ardoise-60);
                            border: 1px solid var(--ardoise-50);
                            border-radius: .25em;
                            color: var(--ardoise-10);
                            font-size: 1rem;
                            font-weight: 300;
                            padding-block: .125rem;
                            padding-inline: 1rem;
                            scroll-snap-align: start;

                            &.active {
                                background-color: var(--orange-40);
                                color: var(--orange-90);
                            }
                        }
                    }

                    label {
                        flex-shrink: 0;
                        gap: .5rem;

                        &::after {
                            top: 30%;
                        }
                    }
                }
            }
        }
    }

    h2:has(select) {
        select {
            background-color: var(--ardoise-80);
            border: 2px solid var(--orange-50);
            border-radius: .25rem;
            font-size: 1.25rem;
            line-height: 1.25em;
            padding-inline: .5rem 2rem;
        }

        label::after {
            border-bottom: 6px solid var(--ardoise-20);
            border-left: 6px solid transparent;
            border-right: 6px solid var(--ardoise-20);
            border-top: 6px solid transparent;
            top: 20%;
        }
    }

    .all-series-locations {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-inline: auto;
        margin-block-end: 1rem;
        width: round(down, 100%, 20.25rem);

        .series-locations {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .series-location-header {
                background-color: var(--orange-40);
                border-radius: .25rem;
                color: var(--ardoise-10);
                display: flex;
                font-size: 1.25rem;
                font-weight: 300;
                margin-block-start: 1rem;
                padding: .25rem 1rem;
                width: 100%;

                a {
                    align-items: center;
                    display: flex;
                    height: 100%;
                    flex-grow: 1;
                }

                .zoom-to {
                    align-items: center;
                    display: flex;
                    gap: 1rem;
                    margin-inline-start: auto;
                    text-wrap: nowrap;

                    .buttons {
                        display: flex;

                        .to-country, .to-markers {
                            background-color: var(--orange-30);
                            color: var(--ardoise-10);
                            cursor: pointer;
                            padding: .25rem 1rem;

                            &.active {
                                background-color: var(--green-60);
                            }
                        }

                        .to-country {
                            border-radius: 5rem 0 0 5rem;
                        }

                        .to-markers {
                            border-radius: 0 5rem 5rem 0;
                        }
                    }
                }
            }

            .series-location-content {
                display: flex;
                flex-wrap: wrap;
                gap: .25rem;

                .series-location-date {
                    background-color: var(--orange-50);
                    border-radius: .25rem;
                    font-size: 1.5rem;
                    font-weight: 300;
                    line-height: 1.1em;
                    margin-block: 1rem .5rem;
                    padding: .5rem 1rem;
                    width: 100%;
                }

                .series-location {
                    background-color: var(--orange-20-alpha-25);
                    border-radius: .75rem;
                    border: 4px solid var(--orange-20);
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    justify-content: flex-start;
                    width: 20rem;

                    .series-location-image {
                        position: relative;

                        img {
                            aspect-ratio: 16/9;
                            border-radius: .5rem;
                            object-fit: cover;
                            width: 100%;
                        }

                        .image-count {
                            align-items: center;
                            background-color: var(--orange-50);
                            border-radius: 50%;
                            color: var(--ardoise-10);
                            display: flex;
                            font-size: 1.25rem;
                            font-weight: 300;
                            height: 2rem;
                            justify-content: center;
                            padding: .25rem;
                            position: absolute;
                            right: .5rem;
                            top: .5rem;
                            width: 2rem;
                        }

                        .episode {
                            align-items: center;
                            background-color: var(--green-60);
                            border-radius: .25rem;
                            bottom: .5rem;
                            color: var(--ardoise-10);
                            display: flex;
                            font-size: 1.25rem;
                            font-weight: 300;
                            height: 2rem;
                            justify-content: center;
                            padding-inline: .5rem;
                            position: absolute;
                            right: .5rem;
                        }

                        .image-list {
                            display: none;
                        }
                    }

                    .series-location-title {
                        align-items: center;
                        display: flex;
                        justify-content: space-between;

                        .text {
                            font-size: 1.25rem;
                            font-weight: 300;
                            line-height: 1.25em;
                            padding-inline: .5rem;
                            text-wrap: balance;
                        }

                        .show-location {
                            display: flex;
                            flex-shrink: 0;
                            gap: .5rem;

                            a, .target-map {
                                align-items: center;
                                background-color: var(--orange-50);
                                border-radius: .25rem;
                                color: var(--ardoise-10);
                                display: flex;
                                font-size: 1rem;
                                font-weight: 300;
                                height: 3rem;
                                justify-content: center;
                                width: 3rem;
                            }

                            .target-map {
                                cursor: pointer;
                            }
                        }
                    }

                    .series-location-location {
                        font-size: 1rem;
                        font-weight: 100;
                        padding-inline: .5rem;
                        text-wrap: balance;
                    }

                    .series-location-description {
                        font-size: 1rem;
                        font-weight: 100;
                        line-height: 1.25em;
                        margin-block-end: .5rem;
                        max-height: 5rem;
                        overflow-y: auto;
                        padding-inline: .5rem;
                        text-wrap: balance;
                    }
                }
            }
        }
    }
}

.leaflet-popup-content {
    font-size: 1rem !important;
    font-weight: 300 !important;
}

dialog {
    background-color: hsla(from var(--ardoise-80) h s l / .9);
    border-radius: .5rem;
    inset: 0;
    margin-block: auto;
    margin-inline: auto;
    padding: 1rem;
    position: absolute;
    width: 80%;
    z-index: 2;
}

.side-panel {
    --border-width: 3px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(16px);
    background: hsl(from var(--green-80) h s l / 0.45);
    border-radius: 2rem 0 0 2rem;
    max-height: calc(100vh - 18rem);
    opacity: 0;
    position: fixed;
    right: 0;
    top: 14rem;
    transform: translateX(100%);
    transition: transform 1s var(--side-panel-easing), opacity 0.3s ease-in-out;
    width: 80%;
    z-index: 10;

    /* background:
             radial-gradient(circle at 50% 250%, var(--green-80), var(--green-70)) padding-box,
             linear-gradient(90deg, var(--orange-50), var(--orange-30)) border-box;
     border: transparent 8px solid;*/
    border-right-width: 0;

    &::before {
        background: linear-gradient(90deg, var(--orange-50), var(--orange-30)) border-box;
        border: var(--border-width) solid transparent;
        border-right-width: 0;
        border-radius: inherit;
        content: "";
        inset: 0;
        mask: linear-gradient(black) border-box,
        linear-gradient(black) padding-box;
        mask-composite: subtract;
        position: absolute;
        z-index: -1;
    }

    &.open {
        opacity: 1;
        transform: translateX(0);
    }

    .frame {
        max-height: calc(100vh - 16rem);
        overflow-y: auto;
        padding: 2rem;
        scroll-behavior: smooth;

        .scroll-down-to-submit {
            bottom: 0;
            display: none;
            justify-content: center;
            padding-block: 1rem;
            position: absolute;
            width: 100%;

            button {
                background-color: cadetblue;
                border-radius: .25rem;
                border: none;
                color: var(--ardoise-10);
                cursor: pointer;
                font-size: 1.25rem;
                font-weight: 300;
                padding-block: .25rem;
                padding-inline: 1rem;
            }
        }
    }
}

dialog, .side-panel {
    form {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .error {
            background-color: var(--error);
            border-radius: .25rem;
            font-size: .75rem;
            font-weight: 100;
            margin-block-start: .25rem;
            padding-inline: 1rem;
            width: fit-content;
        }

        .form-row {
            display: flex;
            gap: 1rem;
        }

        .form-column {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            gap: 1rem;
            width: 100%;
        }

        .form-field {
            display: flex;
            flex-direction: column;
            gap: .25rem;
            width: 100%;

            &.dashed {
                border: 2px dashed var(--green-40);
                border-radius: .5rem;
                padding: .25rem;
            }

            &.flex-1 {
                flex: 1;
            }

            &.flex-2 {
                flex: 2;
            }

            /*&:has(+ .form-field) {
                width: 50%;
            }*/

            &:has(button) {
                justify-content: flex-end;
            }

            label {
                align-items: initial;
                display: flex;
                flex-direction: column;
                font-size: 1rem;
                font-weight: 300;
                gap: 0;
                width: 100%;

                input[type="text"],
                input[type="number"],
                input[type="url"] {
                    padding-block: .25rem;
                }

                select {
                    border: 2px solid var(--orange-50);
                }

                &:has(input[type="file"]) {
                    background-color: var(--ardoise-80);
                    border: 2px dashed var(--orange-50);
                    border-radius: .5rem;
                    color: var(--ardoise-10);
                    cursor: pointer;
                    padding: .5rem 1rem;
                    position: relative;

                    input[type="file"] {
                        inset: 0;
                        opacity: 0;
                        position: absolute;
                    }
                }
            }

            .preview-image-files {
                max-height: 30rem;
                overflow-y: auto;
            }

            .preview-image-file,
            .preview-image-files {
                ol {
                    display: flex;
                    flex-direction: column;
                    gap: .5rem;
                    list-style-type: none;
                    padding-inline: 0;
                    width: 100%;

                    li {
                        align-items: center;
                        background-color: var(--ardoise-80);
                        border-radius: .25rem;
                        display: flex;
                        gap: .25rem;
                        padding-inline-start: 1rem;
                        width: 100%;

                        > div {
                            align-items: center;
                            display: flex;
                            overflow-x: auto;
                            text-wrap: balance;
                            width: calc(100% - 10rem);

                            &:has(span.error) {
                                align-items: flex-start;
                                flex-direction: column;
                                padding-block: .5rem;
                                width: 100%;
                            }
                        }

                        img {
                            aspect-ratio: 16/9;
                            border-radius: 0 .25rem .25rem 0;
                            object-fit: cover;
                            width: 10rem;
                        }
                    }
                }
            }

            input, textarea {
                /*background-color: var(--ardoise-80);*/
                background: hsl(from var(--green-80) h s l / 0.45);
                border: 2px solid var(--orange-50);
                border-radius: .25rem;
                color: var(--ardoise-10);
                font-size: 1rem;
                font-weight: 100;
                padding-inline: .5rem;
            }

            textarea {
                background: hsl(from var(--green-80) h s l / 0.45);
                resize: vertical;
            }

            input[type="url"].dragover {
                border-color: var(--green-50);
                cursor: copy;
                outline: 2px dashed var(--green-50);
            }

            /*input[type=file]::file-selector-button {
                background-color: var(--ardoise-80);
                border: 2px dashed var(--orange-50);
                border-radius: .25rem;
                color: var(--ardoise-10);
                cursor: pointer;
                padding: .25rem .5rem;
            }*/
        }

        .submit-row {
            gap: 1rem;
            justify-content: flex-end;

            button {
                background-color: var(--orange-30);
                /*border: 2px solid var(--orange-90);*/
                border-radius: .25rem;
                color: var(--orange-90);
                cursor: pointer;
                font-size: 1.25rem;
                line-height: 1.1em;
                padding-block: .5rem;
                padding-inline: 1.5rem;

                &:hover {
                    background-color: var(--orange-50);
                    color: var(--ardoise-10);
                }
            }
        }
    }
}

.add-location-dialog {
    .form-row {
        flex-grow: 1;
    }

    .form-column {
        background-color: hsla(from var(--ardoise-80) h s l / .5);
        border-radius: .5rem;
        padding: 1rem;

        .blob-preview {
            display: none;
        }
    }

    .location-images {
        display: flex;
        gap: .5rem;
        width: 100%;

        .still, .additional-images {
            display: flex;
            flex-direction: column;
        }

        .additional-images {
            width: calc(100% - 17rem);

            .wrapper {
                display: flex;
                gap: .5rem;
                overflow-x: auto;
                width: 100%;
            }
        }

        .image {
            flex-shrink: 0;
            width: 16rem;

            img {
                border-radius: .25rem;
                height: 9rem;
                object-fit: cover;
                width: 16rem;
            }
        }
    }
}

@media (max-width: 920px) {
    .add-location-dialog {
        .form-row {
            flex-wrap: wrap;
        }
    }
}

.edit-episode-infos-dialog {
    .form-row {
        background-color: hsla(from var(--ardoise-80) h s l / .5);
        border-radius: .5rem;
        padding: 1rem;

        &:has(.episode-number) {
            position: relative;
        }

        .episode-number {
            align-items: center;
            aspect-ratio: 1;
            background-color: var(--orange-50);
            border-radius: .25rem;
            display: flex;
            font-size: 2rem;
            justify-content: center;
            line-height: 2rem;
            padding-inline: .5rem;
            position: absolute;
        }

        .form-field:has(.still) {
            align-items: center;
            justify-content: center;
            width: 12rem;

            .still {
                align-items: center;
                aspect-ratio: 16/9;
                background-color: var(--green-50);
                border-radius: .25rem;
                display: flex;
                flex-direction: column;
                gap: .5rem;
                justify-content: center;
                width: 10rem;

                img {
                    aspect-ratio: 16/9;
                    border-radius: .25rem;
                    object-fit: cover;
                    width: 100%;
                }

                &.paste {
                    background-color: var(--orange-50);
                }
            }
        }
    }
}

dialog::backdrop {
    background-color: #1f1f1fcf;
}