.tx-udem-distinctions {

    .hidden {
        display: none;
    }

    .annee {
        border-radius: var(--border-radius-full);
        padding: var(--spacing-default);
        width: fit-content;
        font-size: var(--font-singleline-medium);
        font-weight: var(--font-weight-semi-bold);
        background-color: var(--marque-bleu-pale);
        color: var(--marque-marine);
        height: var(--layout-tag-height);
        display: flex;
        align-items: center;
        line-height: 1rem;
    }

    .image {
        display: flex;
        justify-content: center;
        margin-bottom: var(--spacing-large);

        img {
            border-radius: 50%;
            overflow: hidden;
            width: 152px;
            height: 152px;
        }
    }

    .nom-laureat {
        font-size: var(--font-size-h4);
        line-height: var(--font-line-height-h4);
        margin-top: 0;
        margin-bottom: var(--spacing-small);
        text-align: center;
    }

    .organisme-regroupement {
        font-size: var(--font-size-defaut);
        line-height: var(--font-line-height-defaut);
        opacity: 0.72;
        margin-bottom: var(--spacing-tiny);
    }

    .udemdistinctions-filters {
        margin-bottom: var(--spacing-huge);

        .filters-row,
        .results-row {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-medium);
            margin-bottom: var(--spacing-big);

            @media (min-width: 992px) {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                gap: var(--spacing-big);
            }
        }

        .jumpto-group,
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-medium);

            @media (min-width: 768px) {
                gap: var(--spacing-small);
                flex-direction: row;
                align-items: center;
            }
        }

        .results-row {
            .sortby-group {
                order: 1;
                margin-bottom: var(--spacing-medium);

                @media (min-width: 768px) {
                    gap: var(--spacing-small);
                }

                .lbl-trier-par {
                    margin-right: var(--spacing-small);
                    font-size: var(--font-singleline-medium);
                }

                .sortby-switch {
                    position: relative;
                    display: inline-flex;
                    border-radius: var(--border-radius-full);
                    border: 1px solid var(--colors-ui-bordure-secondaire);
                    padding: var(--spacing-micro);
                    height: var(--layout-button-medium-height);

                    /* Pilule glissante */

                    &::before {
                        content: '';
                        position: absolute;
                        top: var(--spacing-micro);
                        bottom: var(--spacing-micro);
                        left: var(--spacing-micro);
                        right: 50%;
                        background-color: var(--colors-ui-element-switch);
                        border-radius: var(--border-radius-full);
                        transition: left 0.25s ease, right 0.25s ease;
                        z-index: 0;
                    }

                    &:has(input[type="radio"]:nth-of-type(2):checked)::before {
                        left: 50%;
                        right: var(--spacing-micro);
                        transform: none;
                    }

                    input[type="radio"] {
                        position: absolute;
                        opacity: 0;
                        pointer-events: none;
                        width: 0;
                        height: 0;
                    }

                    label {
                        flex: 1;
                        min-width: 0;
                        box-sizing: border-box;
                        white-space: nowrap;
                        z-index: 1;
                        cursor: pointer;
                        font-size: var(--font-singleline-small);
                        line-height: var(--font-line-height-mini);
                        font-weight: var(--font-weight-normal);
                        color: var(--colors-ui-element-default);
                        transition: color 0.25s ease;
                        align-items: center;
                        display: flex;
                        justify-content: center;
                        padding: 0 var(--spacing-medium);
                    }

                    input[type="radio"]:checked + label {
                        color: var(--colors-ui-element-switch-inverse);
                    }

                    input[type="radio"]:focus-visible + label {
                        outline: 2px solid var(--colors-ui-element-hover);
                        outline-offset: 2px;
                    }
                }

                @media (prefers-reduced-motion: reduce) {
                    .sortby-switch::before {
                        transition: none;
                    }
                }
            }

            .num-results {
                order: 2;
            }

            @media (min-width: 992px) {
                .sortby-group,
                .num-results {
                    order: initial;
                }
            }
        }

        .num-results {
            font-size: var(--font-size-defaut);
            font-weight: var(--font-weight-semi-bold);
        }
    }

    .item-laureat, .item-groupe {
        margin-bottom: var(--spacing-big);
        background-color: var(--colors-ui-surface-secondaire);
        border-radius: var(--border-radius-medium);
        padding: var(--spacing-huge);

        .fonction {
            font-size: var(--font-size-defaut);
            line-height: var(--font-line-height-defaut);
            font-weight: var(--font-weight-semi-bold);
            margin-bottom: var(--spacing-small);
            text-align: center;
        }

        .unite {
            font-size: var(--font-size-defaut);
            line-height: var(--font-line-height-defaut);
            margin-bottom: var(--spacing-big);
            text-align: center;
            opacity: 0.7;
        }
    }

    .liens a span {
        display: inline-block;
        text-transform: lowercase;

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

    .item-prix {
        margin-bottom: var(--spacing-big);
        height: 100%;
        display: block;
        text-decoration: none;
        border-radius: var(--border-radius-medium);
        transition: box-shadow 0.2s ease;
        box-shadow: inset 0 0 0 1px var(--colors-ui-bordure-secondaire);
        padding: var(--spacing-huge);

        h2 {
            margin-top: 0;
            font-size: var(--font-size-h4);
            line-height: var(--font-line-height-h4);
            margin-bottom: var(--spacing-large);
        }

        a {
            display: block;
        }

        .description {
            font-size: var(--font-size-defaut);
            line-height: var(--font-line-height-defaut);
            margin-bottom: var(--spacing-large);
        }
    }

    .distinctions {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-big);

        @media (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 992px) {
            grid-template-columns: repeat(3, 1fr);
        }

        &.is-loading {
            pointer-events: none;
            min-height: 200px;
        }

        &.is-loading > .item-distinction {
            visibility: hidden;
        }

        /* Spinner / Loader AJAX */

        &.is-loading::after {
            content: '';
            position: absolute;
            top: 80px;
            left: 50%;
            width: 48px;
            height: 48px;
            margin: 0 0 0 -24px;
            border: 5px solid var(--udem-bleu-fonce);
            border-bottom-color: transparent;
            border-radius: 50%;
            animation: rotation 1s linear infinite;
            opacity: 1;
            z-index: 1;
        }

        .item-distinction {

            a {
                height: 100%;
                display: flex;
                text-decoration: none;
                border-radius: var(--border-radius-medium);
                transition: box-shadow 0.2s ease;
                box-shadow: inset 0 0 0 1px var(--colors-ui-bordure-secondaire);
                padding: var(--spacing-big);

                &:hover, &:focus-visible {
                    box-shadow: inset 0 0 0 3px var(--colors-ui-element-hover);
                    outline: none;

                    .pastille-chevron {
                        background-color: var(--colors-ui-surface-bleu);
                        box-shadow: none;

                        udem-icone {
                            color: white;
                        }
                    }
                }

                .pastille-chevron {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 28px;
                    height: 28px;
                    margin-top: 0;
                    border-radius: 50%;
                    box-shadow: inset 0 0 0 1px var(--colors-ui-bordure-defaut);
                    transition: background-color 0.2s ease;

                    @media screen and (min-width: 768px) {
                        width: 34px;
                        height: 34px;
                    }

                    udem-icone {
                        width: 14px;
                        height: 14px;
                        transition: color 0.2s ease;

                        @media screen and (min-width: 992px) {
                            width: 18px;
                            height: 18px;
                        }
                    }
                }

                .content {
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    .unite, .responsable-groupe, .prix-et-categorie {
                        font-size: var(--font-size-defaut);
                        line-height: var(--font-line-height-defaut);
                        margin-bottom: var(--spacing-small);
                        text-align: center;
                    }

                    .prix-et-categorie {
                        margin-bottom: var(--spacing-xlarge);
                    }

                    .unite {
                        opacity: 0.7;
                    }
                }

                .content-footer {
                    margin-top: auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }
    }

    .template-laureat-show, .template-distinction-show {
        display: flex;
        flex-direction: column;

        @media (min-width: 992px) {
            flex-direction: row;
            gap: 2rem;
            align-items: flex-start;

            .item-laureat, .item-groupe {
                flex: 0 0 33.333%;
            }

            .distinctions {
                flex: 1;
                display: block;
            }
        }

        .item-laureat, .item-groupe {

            padding-top: var(--spacing-huge);

            .image {
                justify-content: left;

                img {
                    width: 180px;
                    height: 180px;
                }
            }

            .nom-laureat {
                text-align: left;
                font-weight: var(--font-weight-semi-bold);
                margin-bottom: var(--spacing-micro);
            }

            .fonction {
                text-align: left;
                margin-bottom: var(--spacing-default);
            }

            .unite {
                text-align: left;
                margin-bottom: var(--spacing-big);
            }
        }
    }

    .template-prix-show {

        .pastille-laureats {
            margin-bottom: var(--spacing-large);
            border: 1px solid var(--colors-ui-element-switch);
            border-radius: var(--border-radius-full);
            padding: var(--spacing-default);
            width: fit-content;
            font-size: var(--font-singleline-medium);
            font-weight: var(--font-weight-semi-bold);
            color: var(--marque-marine);
            height: var(--layout-tag-height);
            display: flex;
            align-items: center;
            line-height: 1rem;
        }

        .item-prix {
            background-color: var(--colors-ui-surface-secondaire);
            padding: var(--spacing-huge);
            margin-bottom: var(--spacing-big);
            box-shadow: none;

            @media (min-width: 768px) {
                margin-bottom: var(--spacing-2xlarge);
            }

            .nom {
                font-size: var(--font-size-h4);
                line-height: var(--font-line-height-h4);
                color: var(--colors-ui-element-default);
                margin-bottom: var(--spacing-large);
            }

            .item-section-laureats {
                margin-bottom: var(--spacing-large);
            }
        }
    }

    .template-prix-list {
        .actions {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            gap: var(--spacing-large);

            @media (min-width: 768px) {
                gap: var(--spacing-small);
                flex-direction: row;
            }
        }
    }

    .template-distinction-list {
        .titre-liste-distinction {
            margin-bottom: var(--spacing-default);
            font-size: var(--font-size-h4);
        }

        .num-results {
            margin-bottom: var(--spacing-huge);
            font-weight: var(--font-weight-semi-bold);
        }

        .laureat-filter-desc {
            display: none;
        }

        &.has-filter {
            .recent {
                display: none;
            }

            .laureat-filter-desc {
                display: block;
            }
        }
    }
}