.hdp {

    &.home {
        color: #fff;
        padding: 150px 0;
        position: relative;
        min-height: 800px;
        align-items: center;
        display: flex;
        background: var(--dark);

        @media (min-width: 992px) {
            border-radius: var(--border-radius);
            margin: 20px;
        }

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('../../img/bg_hdp_home.webp') no-repeat center center/cover;
            z-index: 1;
            border-radius: var(--border-radius);
        }
    }

    &.hdp--head {
        position: relative;

        .container {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 2;
            gap: 40px;
            flex-direction: column;

            @media (min-width: 1200px) {
                flex-direction: row;
            }

            .hdp__img {
                height: 100%;
                left: 0;
                -o-object-fit: cover;
                object-fit: cover;
                position: absolute;
                top: 0;
                width: 100%;
                z-index: 1;
            }

            .hdp__content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                position: relative;
                z-index: 2;
                height: fit-content;
                gap: 30px;
                text-align: left;

                @media (min-width: 1200px) {
                    max-width: 300px;
                }

                .section__btn {
                    margin: auto;
                }

                .cta {
                    margin: 0;
                }

                .hdp__title {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                }

                .hdp__intro {
                    max-width: 960px;
                    margin: 0 auto;
                    color: var(--dark-grey);

                    p {
                        margin: 0;
                    }
                }
            }

            .hdp__medias {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 24px;

                @media (min-width: 992px) {
                    flex-direction: row;
                }

                .teaser__item {
                    height: 340px;
                    background-repeat: no-repeat;
                    background-size: cover;
                    border-radius: var(--border-radius);
                    outline: 4px solid rgba(255, 255, 255, 0.24);
                    display: flex;
                    z-index: 1;
                    position: relative;
                    overflow: hidden;
                    transition: var(--transition);

                    @media (min-width: 992px) and (max-width: 1199px) {
                        width: 33%;
                    }

                    @media (min-width: 1200px) {
                        width: 230px;
                        height: 470px;
                    }

                    @media (min-width: 1400px) {
                        width: 260px;
                    }

                    @media (min-width: 992px) {
                        &:hover {
                            outline: 4px solid rgba(255, 255, 255, 0.48);

                            &:after {
                                opacity: 1;
                            }

                            .teaser__fixed {
                                transform: translateY(-10px) !important;
                                position: relative !important;
                                bottom: 0 !important;
                                margin: 0 !important;
                            }

                            .teaser__hover {
                                opacity: 1 !important;
                                pointer-events: all !important;
                                transform: translateY(0) !important;

                                * {
                                    pointer-events: all !important;
                                }

                                .bouton {
                                    background-color: var(--hover) !important;

                                    &:after {
                                        transform: translatex(3px) !important;
                                    }
                                }
                            }
                        }
                    }

                    &:after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: linear-gradient(180deg, rgba(0, 0, 231, 0.16) 0%, rgba(0, 0, 66, 0.96) 80%);
                        border-radius: var(--border-radius);
                        z-index: 2;
                        transition: var(--transition);

                        @media (min-width: 992px) {
                            opacity: 0.34;
                        }
                    }

                    .teaser__link {
                        padding: 24px;
                        z-index: 3;
                        position: relative;
                        overflow: hidden;
                        display: flex;
                        height: 100%;
                        width: 100%;

                        .teaser__text {
                            margin-top: auto;

                            * {
                                color: var(--white);
                            }

                            .teaser__fixed {
                                @media (min-width: 992px) {
                                    transition: transform 0.5s cubic-bezier(0.34, 2.56, 0.64, 1);
                                    transform: translateY(0);
                                    position: absolute;
                                    bottom: 20px;
                                    margin-right: 20px;
                                }

                                .teaser__category {
                                    border: 1px solid var(--white);
                                    padding: 12px 16px;
                                    border-radius: 50px;
                                    display: flex;
                                    gap: 5px;
                                    margin-bottom: 5px;
                                    width: fit-content;
                                    background: rgba(0,0,0,0.2);

                                    @media (min-width: 1400px) {
                                        width: max-content;
                                    }

                                    .category {
                                        font-size: 14px;
                                        line-height: 16px;
                                        font-weight: var(--medium);

                                        @media (min-width: 1400px) {
                                            white-space: nowrap;
                                        }
                                    }
                                }

                                .teaser__title {
                                    font-weight: var(--bold);
                                    margin-bottom: 10px;
                                }
                            }

                            .teaser__hover {
                                pointer-events: none;

                                @media (min-width: 992px) {
                                    opacity: 0;
                                    transition: transform 0.5s ease;
                                    transform: translateY(-20px);
                                }

                                * {
                                    pointer-events: none;
                                }

                                .teaser__excerpt {
                                    opacity: 0.66 !important;
                                }

                                .bouton {
                                    border: 0px !important;
                                    background-color: var(--peach);
                                    
                                    &:hover {
                                        border: 0px !important;
                                    }

                                    &:after {
                                        background-image: url('../../img/arrow_cta.svg') !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &.hdp--section {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 560px;
        display: flex;
        align-items: center;
        padding: 80px 0 20px 0;

        @media (min-width: 992px) {
            padding: 150px 0 20px 0;
        }

        &:not(.single) {
            background-image: url('../../img/bg_hdp.jpg');

            .container {
                .hdp__intro {
                    max-width: 960px;
                    margin: 0 auto;

                    .cta {
                        &:has(.bouton+.bouton, .bouton+.bouton--alt, .bouton--alt+.bouton, .bouton--alt+.bouton--alt) {
                            display: flex;
                            justify-content: center;
                            gap: 16px;
                        }
                    }
                }

                .hdp__elements_bas {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 16px;
                    margin-bottom: 32px;
                }
            }
        }

        &.single {
            background-image: url('../../img/bg_single.jpg');

            .container {
                h1 {
                    color: var(--light-blue);
                    margin: 20px auto 0 auto !important;
                }

                h2 {
                    color: var(--white);
                    font-size: 40px;
                    line-height: 46px;
                    font-weight: var(--extrabold);
                    font-style: italic;

                    @media (min-width: 992px) {
                        font-size: 52px;
                        line-height: 60px;
                    }
                }
            }
        }

        .container {
            color: var(--dark);
            position: relative;

            .hdp__content {
                text-align: center;

                h1 {
                    max-width: 800px;
                    margin: 10px auto;
                    color: var(--dark-blue);
                }

                .hdp__elements_surtitre {
                    display: flex;
                    justify-content: center;

                    .cta.surtitre {
                        &:has(img) {
                            width: 41px !important;
                            height: 41px !important;
                            padding: 0px 2px !important;

                            &:not(:first-child) {
                                margin-left: -10px;
                            }
                        }
                    }
                }
            }
        }
    }

    &:not(.home) {

        .hdp__title {
            h1 {
                span {
                    background: linear-gradient(to right,
                            rgba(255, 230, 109, 0.8) 50%,
                            transparent 50%);
                    background-size: 200% 40%;
                    background-position: calc(100% - var(--word-progress) * 2) 80%;
                    background-repeat: no-repeat;
                    animation: highlight 2s ease-out forwards;
                }
            }
        }
    }
}