/* ********************** Sommaire ****************************
    - général
    - theme Marques
    - theme Solutions
    - theme Pages Légales
    - consentModule
**************************************************************** */
.ContentDetailComponent .content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
}
.ContentDetailComponent .content-wrap {
    display: flex;
    flex-direction: column;
    gap: 42px;
    flex: 1;
}
.ContentDetailComponent .detail_default .content {
    gap: 0;
    .mainContent {
        margin-top: -80px;
        background-color: var(--white);
        padding: 60px;
        z-index: 2;
        border-radius: 18px 18px 0 0;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1280px) {
    .ContentDetailComponent .detail_default .content {
        .mainContent {
            margin-top: -60px;
        }
    }
}
@media screen and (max-width: 1200px) {
    .ContentDetailComponent .detail_default .content {
        .mainContent {
            margin-top: 0;
        }
    }
}

.ContentDetailComponent .linkBtn1,
.ContentDetailComponent .linkBtn2 {
    font-weight: 600;
    color: var(--bleu-ebra);

    &::after {
        content: "arrow-right";
        font-family: 'icoEBA2' !important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: middle;
        display: inline-block;
        color: inherit;
    }
}

.ContentDetailComponent .Layout_details[data-section="actus"] .topContent::before {
    content: '';
    background: var(--gradient);
    height: 40vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    z-index: -1;
    opacity: 0.8;
}

.ContentDetailComponent .imageContent img {
    width: 100%;
}

.ContentDetailComponent .videoComponent {
    .content {
        position: relative;
    }

    iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

.richContentComponent {
    margin: 0;
        p {
            margin-bottom: 18px;
        }
}
.richContentComponent  {
    a {
        color: var(--bleu-ebra);
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
        &.linkBtn1 {
            position: relative;
            padding: 8px 12px;
            color: var(--white);
            border-radius: 8px;
            width: fit-content;
            /* background: linear-gradient(in oklch to right, var(--rouge-ebra), var(--bleu-ebra)); */
            background-color: var(--bleu-ebra);
            border: 1px solid var(--bleu-ebra);
            transition: all .2s 0s ease-out;
            cursor: pointer;
            display: inline-block;
            font-size: var(--f-s);
            margin: 18px 0;
            text-decoration: none;

            &:hover {
                background-color: transparent;
                color: var(--bleu-ebra);
                text-decoration: none;
            }
        }
        &.linkBtn2 {
            position: relative;
            padding: 8px 12px;
            color: var(--white);
            border-radius: 8px;
            width: fit-content;
            /* background: linear-gradient(in oklch to right, var(--rouge-ebra), var(--bleu-ebra)); */
            background-color: var(--rouge-ebra);
            border: 1px solid var(--rouge-ebra);
            transition: all .2s 0s ease-out;
            cursor: pointer;
            display: inline-block;
            font-size: var(--f-s);
            margin: 18px 0;
            text-decoration: none;

            &:hover {
                background-color: transparent;
                color: var(--rouge-ebra);
                text-decoration: none;

            }
        }
        &.linkBtn3 {
            margin-top: auto;
            background: none;
            color: var(--bleu-ebra);
            border: none;
            border-bottom: 1px solid var(--bleu-ebra);
            border-radius: 0;
            padding: 0;
            text-decoration: none;

            &:hover {
                border-color: transparent !important;
            }
        }
        &.linkBtn4 {
            margin-top: auto;
            background: none;
            color: var(--rouge-ebra);
            border: none;
            border-bottom: 1px solid var(--rouge-ebra);
            border-radius: 0;
            padding: 0;
            text-decoration: none;

            &:hover {
                border-color: transparent !important;
            }
        }
    }
}






/* gestion des images dans un component */
.textComponent {
    position: relative;
    overflow: hidden;
}

.textComponent.hasImg figure {
    width: 40%;
}

.textComponent.hasImg img {
    width: 100%;
}

.textComponent.hasImg figure.right {
    float: right;
    margin: 0 0 10px 20px;
}

.textComponent.hasImg figure.left {
    float: left;
    margin: 0 20px 10px 0;
}

/* gestion des nombres */
.ContentDetailComponent .listNombre {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-around;
    margin: 40px 0;
    background: var(--bleu-ebra);
    padding: 40px;

    > * {
        flex: 1;
    }
}

.ContentDetailComponent .nombre {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    padding: 10px 20px;
    width: fit-content;
    align-items: baseline;
    text-align: center;
    background: var(--background-transparent);
    font-size: 3.8rem;
    color: var(--bleu);
}

.ContentDetailComponent .nombre .valeur {
    font-weight: 900;
    font-size: 3.8rem;
    color: var(--bleu);
    font-size: 3rem;
}

.ContentDetailComponent .nombre .txt {
    text-align: center;
    width: 100%;
}



/* =============================================================================
    Theme default (article)
   ========================================================================== */
.detail_default {
    .hero {
        .mainImage,
        .imageContent {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;

            img {
                height: 100%;
                object-fit: cover;
                width: 100%;
            }
        }

        .publish {
            color: var(--color09);
            font-size: var(--f-xs);
        }
    }

    .richContentComponent {
        &.textComponent {
            padding: 18px 0;

            .text {

                ul {
                    display: flex;
                    flex-direction: column;

                    li {
                        display: flex;
                        align-items: flex-start;
                        gap: 16px;

                        a {
                            color: var(--bleu-ebra);
                            text-decoration: underline;
                            &:hover{
                                text-decoration: none;
                            }
                        }

                        &::before {
                            content: "line_start";
                            font-family: 'icoEBA2' !important;
                            speak: never;
                            font-style: normal;
                            font-weight: normal;
                            font-variant: normal;
                            text-transform: none;
                            line-height: 1.5;
                            font-size: 1.4rem;
                            vertical-align: middle;
                            display: inline-block;
                            color: var(--rouge-ebra);
                        }
                    }
                }
            }

            .note {
                font-size: var(--f-xs);
            }

            &:has(.rel) {
                background-color: var(--clear-blue);

                .text {
                    background-color: var(--white);
                    width: 80%;
                    margin: auto;
                    border-radius: 32px;
                    position: relative;
                    padding: 20px;
                }

                .rel {
                    font-weight: 400;
                    font-size: 2rem;
                    line-height: 1.4;
                    text-align: center;
                    z-index: 1;
                    position: relative;
                }
            }

            &:has(.citation) {
                .citation {
                    width: 60%;
                    margin: auto;

                    &::after,
                    &::before {
                        font-family: 'icoEBA2' !important;
                        speak: never;
                        font-style: normal;
                        font-weight: normal;
                        font-variant: normal;
                        text-transform: none;
                        line-height: 1;
                        vertical-align: middle;
                        display: inline-block;
                        color: var(--rouge-ebra);
                    }

                    &::after {
                        content: 'quote-close';
                        font-size: 5.4rem;
                        position: absolute;
                        z-index: 0;
                        line-height: 0;
                        right: 0;
                    }

                    &::before {
                        content: 'quote-open';
                        font-size: 8rem;
                        position: absolute;
                        z-index: 1;
                        line-height: 0;
                        left: 0;
                    }

                    .txt {
                        background-color: var(--white);
                        padding: 18px 36px;
                        position: relative;

                    }

                    .nom {
                        color: var(--rouge-ebra);
                        font-size: 1.4rem;
                        text-align: center;
                        margin-top: 8px;

                        &::before {
                            content: "line-long";
                            font-family: 'icoEBA2' !important;
                            speak: never;
                            font-style: normal;
                            font-weight: normal;
                            font-variant: normal;
                            font-size: 0.2rem;
                            text-transform: none;
                            line-height: 1;
                            vertical-align: middle;
                            display: inline-block;
                            margin-right: 8px;
                        }
                    }
                }
            }

            &:has(.question) {
                background-color: var(--white);

                .question {
                    color: var(--bleu-ebra);
                }

                .answer {
                    padding-left: 18px;
                    font-size: 1.4rem;

                    a {
                        font-size: 1.4rem;
                        text-decoration: underline;

                        &:hover {
                            text-decoration: none;
                        }

                        &::before {
                            content: "mail_fill";
                            font-family: 'icoEBA2' !important;
                            speak: never;
                            font-style: normal;
                            font-weight: normal;
                            font-variant: normal;
                            text-transform: none;
                            line-height: 1;
                            vertical-align: middle;
                            display: inline-block;
                            margin-right: 8px;
                            font-size: var(--f-s);
                        }
                    }
                }
            }
        }

        &.insetComponent {
            position: relative;

            .inset-wrap-elements {
                z-index: 1;
                position: relative;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 18px;
                padding: 18px 0;

                .wrap-content {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    /* &:has(.note) {
                            border-left: 4px solid var(--rouge-ebra);
                            padding-left: 16px;
                        } */
                }
            }

            figure {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;

                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                }
            }

            &.inset-right {
                .inset-wrap-elements {
                    &::after {
                        content: "";
                        display: block;
                    }
                }

                figure {
                    right: -50%;

                    img {
                        border-radius: 80px 0 0 80px;
                    }
                }
            }

            &.inset-left {
                .inset-wrap-elements {
                    &::before {
                        content: "";
                        display: block;
                    }
                }

                figure {
                    left: -50%;

                    img {
                        border-radius: 0 80px 80px 0;
                    }
                }

            }
        }

        &.pdfComponent {
            display: flex;
            align-items: center;
            position: relative;
            background-color: var(--color09);
            text-align: center;
            padding: 16px 0;
            margin-left: calc(50% - 50vw);
            margin-right: calc(50% - 50vw);
            > * {
                flex: 1;
            }
            
            .topPdf {
                color: var(--rouge-ebra);
            }
            .componentDescription {
                font-size: var(--f-l);
            }
            .btn {
                color: var(--white);
                text-decoration: none;
            }
        }

    }
}

.detail_default .content ul,
.detail_default .content ol {
    margin: 0 0 0 30px;
}

.detail_default .content ol {
    list-style-type: inherit;
}

.detail_default .content ol li {
    list-style-type: space-counter;
}

.detail_default .content li {
    line-height: 1.4;
    margin: 8px 0;
}

.detail_default .content ul li::before {
    content: '\e908';
    color: var(--rouge-ebra);
    font-family: 'icoEBA2';
    font-size: var(--f-xl);
    margin: 0 0 0 -20px;
    vertical-align: sub;
}
@media screen and (max-width: 800px) {
    .detail_default {
     .richContentComponent {
        &.textComponent {
            &:has(.citation) {
                .citation {
                    width: 100%;
                    .txt {
                        padding: 18px 0;
                    }
                }
            }
            .text {
                ul {
                    li {
                        display: inline-block;
                        &::before {
                            margin-right: 8px;
                        }
                    }
                }
            }
        }
    }
}
}
/* =============================================================================
    Theme Marques
   ========================================================================== */
.detail_Marque {
    position: relative;
    z-index: 1;
}

.detail_Marque .topContent {
    position: relative;
    z-index: 1;
}

.detail_Marque .topContent .wrapper_img {
    position: relative;
    height: 360px;
    overflow: hidden;
}

.detail_Marque .topContent .wrapper_img img {
    width: 100%;
    border-radius: 0;
}

.detail_Marque .detail-wrapper {
    display: flex;
    gap: 80px;
}

.detail_Marque .aside {
    position: relative;
    z-index: 2;
    background: var(--clear-blue);
    padding: 20px;
    width: 340px;

    .sticky {
        position: sticky;
        top: 90px;
        display: flex;
        flex-direction: column;
        gap: 42px;
        .link-site {
            margin-top: 24px;
        }
        .map-edit {
            width: 60%;
            margin: auto;
        }
    }
}

.detail_Marque .pdfComponent {
    background: var(--bleu-ebra);
    color: var(--white);
    margin: 5px 0;
    border-radius: 4px;
}

.detail_Marque .pdfComponent a {
    display: flex;
    padding: 8px 20px;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    color: var(--white);
    text-decoration: none;
}
 
.detail_Marque .pdfComponent:hover {
    background: none;
}

.detail_Marque .pdfComponent:hover a {
    text-decoration: none;
    color: var(--bleu-ebra);
}

.detail_Marque .pdfComponent .ico_EBA2 {
    padding: 0 10px 0 0;
}

.detail_Marque {
    .textComponent {
        .text {
            display: flex;
            flex-direction: column;
            gap: 8px;

        }

        ul:not(.listNombre) {
            display: flex;
            flex-direction: column;
            gap: 14px;

            li {
                position: relative;
                padding-left: 30px;

                &::before {
                    content: "line_start";
                    font-family: 'icoEBA2' !important;
                    speak: never;
                    font-style: normal;
                    font-weight: normal;
                    font-variant: normal;
                    text-transform: none;
                    line-height: 1.5;
                    font-size: var(--f-s);
                    vertical-align: middle;
                    display: inline-block;
                    color: var(--bleu-ebra);
                    margin-right: 16px;
                    position: absolute;
                    left: 0;
                }
            }
        }
    }
}

.listSolutions {
    background: var(--color02);
    padding: 40px 0;
}

.listSolutions .constrain {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.listSolutions .intro {
    min-width: 260px;
}

.listSolutions .solution {
    background: var(--white);
    padding: 20px;
    border-radius: 20px;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
}

.listSolutions .solution .desc {
    margin: 10px 0;
}

.detail_Marque {
    .detail-wrapper {
        .content-wrap {
            margin-top: 44px;
            margin-bottom: 44px;
            gap: 0;
        }
    }

    .topContent {
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient);
            opacity: 0.8;

        }

        .imageContent {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .wrapper {
            display: flex;
            align-items: flex-start;
            gap: 48px;
            position: absolute;
            bottom: 45px;
            left: 50%;
            transform: translateX(-50%);

            img {
                max-width: 200px;
                width: 100%;
                object-fit: contain;
            }

            .wrap-content {
                display: flex;
                flex-direction: column;
                gap: 16px;
                color: var(--white);

                .tag {
                    background-color: var(--rouge-ebra);
                    border-radius: calc(infinity * 1px);
                    padding: 4px 16px;
                    color: var(--white);
                    font-size: 1.4rem;
                    text-transform: uppercase;
                    width: fit-content;
                }

                .title {
                    color: inherit !important;
                }
            }
        }

    }

    .textComponent:has(.listNombre) {
        overflow: initial;

        .text>p {
            font-size: var(--f-l);
            font-weight: 700;
            margin: 0;

            &.note {
                font-size: var(--f-xxs);
                font-weight: 400;
            }
        }

        .listNombre {
            position: relative;
            background-color: transparent;
            justify-content: center;
            margin: 20px 0 8px;
            margin-right: -80px;

            &::before {
                content: "";
                z-index: -1;
                position: absolute;
                top: 0;
                right: 0;
                width: 200%;
                height: 100%;
                background: var(--gradient);
            }

            .nombre {
                background-color: var(--white);
                align-items: center;
                width: 100%;
                .valeur {
                    text-align: center;
                    margin: 0;
                    text-decoration: none !important;
                    letter-spacing: 0;
                    font-size: var(--f-3xl);
                    color: var(--bleu);
                    
                    strong {
                        letter-spacing: 4px;
                        font-weight: 700;
                        font-size: var(--f-chiffre-detail);
                        -webkit-text-stroke: 2px var(--bleu-ebra);
                        color: var(--bleu-ebra);
                    }
                }

                .txt {
                    color: var(--text-regular);
                    font-weight: 700;
                    margin: 0;
                    strong {
                        color: var(--bleu-ebra);
                    }
                }
            }
        }
    }

    .logo-marque {
        width: 175px;
    }

}
@media screen and (max-width: 1000px) {
    .detail_Marque {
        .title {
            padding: 0 16px;
        }
        .logo-marque {
            padding: 16px;
        }
        .detail-wrapper {
            flex-direction: column;
            .richContentComponent {
                padding: 0 16px;
                .listNombre {
                    padding: 40px 0;
                    margin-right: 0;
                    &::before {
                        right: -10px;
                    }
                }
            }
        }
        .aside {
            width: 100%;
        }
    }
}
@media screen and (max-width: 800px) {
    .detail_Marque {
        .detail-wrapper {
            .richContentComponent {
                .listNombre {
                    flex-direction: column;
                    .nombre {
                        width: 100%;
                    }
                }
            }
        }
    }

}

/* =============================================================================
    Theme Pages légales
   ========================================================================== */
.detail_PagesLegales {
    padding-top: 148px;

    .top-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        border-bottom: 1px dotted var(--bleu-ebra);
        margin-bottom: 24px;

        .infini {
            width: 100px;
        }

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

    .middle-content {
        display: flex;
        flex-direction: column;
        gap: 24px;

        ul {
            display: flex;
            flex-direction: column;
            gap: 8px;

            li {
                position: relative;
                padding-left: 8px;

                &::before {
                    content: ". ";
                    display: inline-block;
                    position: absolute;
                    left: 0;
                    font-weight: bold;
                    color: var(--rouge-ebra);
                }
            }
        }
    }
    .richContentComponent.textComponent {
        .text {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
    }
}


/* =============================================================================
    Realisation
============================================================================= */
.ContentDetailComponent .Layout_details[data-section="nos-realisations"] {
    padding: 0;

    .topContent {
        position: relative;
        display: flex;
        align-items: flex-end;

        &::before {
            content: '';
            background: var(--gradient);
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: block;
            z-index: -1;
            opacity: 0.8;
        }

        &.noImg::before {
            opacity: 1;
        }

        .mainImage {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            z-index: -2;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .wrapper {
            margin-bottom: 0;
            border-radius: 18px 18px 0 0;
            padding: 68px 48px 24px;

            .wrap-topTopContent {
                text-align: center;
                color: var(--white);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;

                .headline {
                    background-color: var(--rouge-ebra);
                    border-radius: calc(infinity * 1px);
                    padding: 4px 16px;
                    width: fit-content;
                    text-align: center;
                }

                h1 {
                    margin: 0;
                    color: var(--white);
                }
            }

            .wrap-bottomTopContent {
                margin-top: 24px;

                .accroche {
                    p {
                        color: var(--white);
                        font-size: var(--f-s);
                        text-align: center;
                    }
                }
            }
        }
    }

    .mainContent {
        position: relative;
        padding: 24px 0;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 128px;

        >* {
            padding: 24px 0;
        }

        .textComponent,
        .insetComponent {
            ul {
                display: flex;
                flex-direction: column;
                gap: 8px;

                li {
                    position: relative;
                    padding-left: 30px;

                    &::before {
                        content: "line_start";
                        font-family: 'icoEBA2' !important;
                        speak: never;
                        font-style: normal;
                        font-weight: normal;
                        font-variant: normal;
                        text-transform: none;
                        line-height: 1.5;
                        font-size: var(--f-s);
                        vertical-align: middle;
                        display: inline-block;
                        color: var(--bleu-ebra);
                        margin-right: 16px;
                        position: absolute;
                        left: 0;
                    }
                }
            }

            ol {
                list-style: auto;
                display: flex;
                flex-direction: column;
                gap: 8px;

                li {
                    &::marker {
                        color: var(--rouge-ebra)
                    }
                }
            }
        }

        .infoPartners {
            height: fit-content;
            min-width: 200px;

            .contibutor {
                .contributor-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: 32px;

                    img {
                        max-width: 189px;
                        height: fit-content;
                    }

                    .infoPartners-content {
                        .denomination {
                            color: var(--rouge-ebra);
                            font-size: var(--f-xs);
                        }

                        .entreprise {
                            font-weight: lighter;
                            color: var(--bleu);
                            font-size: var(--f-xl);
                            text-transform: uppercase;
                            line-height: 1;
                        }

                        .description {
                            margin: 16px 0;
                            font-size: var(--f-s);
                            line-height: 1.5;
                        }

                        .identity {
                            color: var(--bleu);
                            font-weight: 600;

                            p {
                                font-size: var(--f-xs);

                            }
                        }

                        .contact-link {
                            margin-top: 16px;
                            display: flex;
                            gap: 18px;

                            >*:hover {
                                color: var(--rouge-ebra);
                            }
                        }
                    }
                }
            }
        }

        .textComponent {
            h2 {
                font-weight: lighter;

            }

            .citation {
                .txt {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    font-size: var(--f-2xl);

                    &::before,
                    &::after {
                        font-family: 'icoEBA2' !important;
                        speak: never;
                        font-style: normal;
                        font-weight: normal;
                        font-variant: normal;
                        text-transform: none;
                        line-height: 1;
                        vertical-align: middle;
                        display: inline-block;
                        color: var(--bleu-ebra);
                    }

                    &::before {
                        content: 'quote-open';
                        margin-top: -10px;
                        font-size: var(--f-4xl);

                    }

                    &::after {
                        content: 'quote-close';
                        margin-bottom: -10px;
                        font-size: var(--f-2xl);
                    }
                }

                .nom {
                    text-align: center;
                    color: var(--bleu-ebra);
                    font-size: var(--f-s);
                        margin-top: 16px;

                    &::before {
                        content: "line-long";
                        font-family: 'icoEBA2' !important;
                        speak: never;
                        font-style: normal;
                        font-weight: normal;
                        font-variant: normal;
                        font-size: 0.2rem;
                        text-transform: none;
                        line-height: 1;
                        vertical-align: middle;
                        display: inline-block;
                        margin-right: 8px;
                    }
                }
            }

            .note {
                color: var(--rouge-ebra);
                text-transform: uppercase;
            }

            figure {
                aspect-ratio: 9/16;
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: contain;
                }

            }
        }

        .insetComponent {
            color: var(--bleu-ebra);
            padding: 24px;
            position: relative;

            .insetTitle {
                color: var(--rouge-ebra);
            }

            .insetContent {
                display: flex;
                align-items: center;
                gap: 16px;
                .note {
                    color: var(--rouge-ebra);
                }
                figure {
                    flex: 1;
                    aspect-ratio: 9/16;
                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: contain;
                    }
                }

                .inset-wrap-elements {
                    flex: 2;
                    height: fit-content;
                }
            }

            figure.right {
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 80%;
                    height: 100%;
                    z-index: -1;
                    background-color: var(--grey-light);

                }
            }

            figure.left {
                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 80%;
                    height: 100%;
                    z-index: -1;
                    background-color: var(--grey-light);
                }
            }

            .insetTitle {
                font-size: var(--f-m);
                font-weight: 600;
                margin-bottom: 24px;
            }
        }

        .textGaleryComponent {
            .content {
                gap: 8px;
            }

            .componentDescription {
                font-size: var(--f-s);
                color: var(--bleu);
            }
        }

        .aside {
            position: sticky;
            top: 90px;
            height: fit-content;
            min-width: 220px;
            display: flex;
            flex-direction: column;
            gap: 24px;

            >* {

                padding-left: 16px;
                padding-bottom: 16px;
                padding-top: 16px;
                border-radius: 0 18px 18px 0;
                background-color: var(--clear-blue);
                border-left: 4px solid var(--bleu-ebra);

                h2 {
                    font-size: var(--f-xl);
                }
            }

            .chiffres {
                display: flex;
                flex-direction: column;

                .nombre {
                    background: none;
                    padding: 0;
                    color: var(--bleu-ebra);
                    &:not(:last-child) {
                        margin-bottom: 18px;
                    }

                    .valeur {
                        color: inherit;
                        -webkit-text-stroke: 1px var(--bleu-ebra);
                    }

                    .txt {
                        color: inherit;
                        text-align: left;
                    }
                }
            }


        }

    }
}
@media screen and  (max-width: 1280px) {
    .ContentDetailComponent .Layout_details[data-section="nos-realisations"] {

        .mainContent {
            gap: 24px;
        }
    }
}
@media screen and (max-width: 1000px) {
    .ContentDetailComponent .Layout_details[data-section="nos-realisations"] {
        .mainContent {
            grid-template-columns: 1fr;
            padding-top: 0;
            .infoPartners {
                background-color: var(--grey-light);
                padding: 16px;
                order: 3;
            }
            .content-wrap {
                padding: 16px;
            }
            .aside {
                position: initial;
            }
        }
    }
    
}
@media screen and (max-width: 800px) {
    .ContentDetailComponent .Layout_details[data-section="nos-realisations"] {
        .mainContent {
            .content-wrap {
                .insetComponent.hasImg {
                    .insetContent {
                        flex-direction: column;
                    }
                }
            }
        }
    }
    
}

/* =============================================================================
    Story
   ========================================================================== */
.detail_story {
    margin-top: 100px;

    .topContent {
        margin-bottom: 42px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding-top: 20px;
        padding-bottom: 40px;
        position: relative;

        figure {
            width: 350px;
        }

        .accroche p {
            font-size: var(--f-l);
            color: var(--bleu-ebra);
            font-weight: 700;
            text-align: center;
        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 25%;
            height: 100%;
            background-color: var(--clear-blue);
            border-radius: 80px 0 0 80px;
            z-index: -1;
        }
    }

    .mainContent {
        >* {
            &:nth-child(even) {
                background-color: var(--grey);
            }

            &:nth-child(odd) {
                background-color: var(--clear-blue);
            }
        }

        .richContentComponent {
            min-height: 25rem;
            display: flex;
            justify-content: center;
            align-items: center;

            &.textComponent {
                padding: 18px 0;

                h2:not(.rel) {
                    margin: 0;
                    border-left: 4px solid var(--rouge-ebra);
                    padding-left: 12px;
                }

                .text {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    ul {
                        display: flex;
                        flex-direction: column;
                        gap: 8px;

                        li {
                            display: flex;
                            align-items: flex-start;
                            gap: 16px;

                            &::before {
                                content: "line_start";
                                font-family: 'icoEBA2' !important;
                                speak: never;
                                font-style: normal;
                                font-weight: normal;
                                font-variant: normal;
                                text-transform: none;
                                line-height: 1.5;
                                font-size: var(--f-s);
                                vertical-align: middle;
                                display: inline-block;
                                color: var(--rouge-ebra);
                            }
                        }
                    }
                }

                .note {
                    font-size: var(--f-xs);
                }

                &:has(.rel) {
                    background-color: var(--clear-blue);

                    .text {
                        background-color: var(--white);
                        width: 80%;
                        margin: auto;
                        border-radius: 32px;
                        position: relative;
                        padding: 20px;
                    }

                    .rel {
                        font-weight: 400;
                        font-size: var(--f-l);
                        line-height: 1.4;
                        text-align: center;
                        z-index: 1;
                        position: relative;
                    }
                }

                &:has(.citation) {
                    background-color: var(--white);

                    /* padding: 60px 0; */
                    .citation {
                        width: 60%;
                        margin: auto;

                        .txt {
                            background-color: var(--white);
                            padding: 18px 36px;
                            border-top: 4px solid var(--rouge-ebra);
                            border-bottom: 4px solid var(--rouge-ebra);
                            position: relative;

                            &::after,
                            &::before {
                                font-family: 'icoEBA2' !important;
                                speak: never;
                                font-style: normal;
                                font-weight: normal;
                                font-variant: normal;
                                text-transform: none;
                                line-height: 1;
                                vertical-align: middle;
                                display: inline-block;
                                color: var(--rouge-ebra);
                                display: none;
                            }

                            &::after {
                                content: 'quote-close';
                                font-size: var(--f-3xl);
                                position: absolute;
                                top: 100%;
                                z-index: 0;
                                line-height: 0;
                                right: 0;
                            }

                            &::before {
                                content: 'quote-open';
                                font-size: var(--f-4xl);
                                position: absolute;
                                bottom: 100%;
                                z-index: 0;
                                line-height: 0;
                                left: 0;
                            }
                        }

                        .nom {
                            color: var(--rouge-ebra);
                            font-size: var(--f-s);
                            text-align: center;
                            margin-top: 8px;

                            &::before {
                                content: "line-long";
                                font-family: 'icoEBA2' !important;
                                speak: never;
                                font-style: normal;
                                font-weight: normal;
                                font-variant: normal;
                                font-size: 0.2rem;
                                text-transform: none;
                                line-height: 1;
                                vertical-align: middle;
                                display: inline-block;
                                margin-right: 8px;
                            }
                        }
                    }
                }

                &:has(.question) {
                    background-color: var(--white);

                    .question {
                        color: var(--bleu-ebra);
                    }

                    .answer {
                        padding-left: 18px;
                        font-size: var(--f-s);

                        a {
                            font-size: var(--f-s);
                            text-decoration: underline;

                            &:hover {
                                text-decoration: none;
                            }

                            &::before {
                                content: "mail_fill";
                                font-family: 'icoEBA2' !important;
                                speak: never;
                                font-style: normal;
                                font-weight: normal;
                                font-variant: normal;
                                font-size: 0.2rem;
                                text-transform: none;
                                line-height: 1;
                                vertical-align: middle;
                                display: inline-block;
                                margin-right: 8px;
                                font-size: 1.4rem;
                            }
                        }
                    }
                }
            }

            &.insetComponent {
                position: relative;

                .inset-wrap-elements {
                    z-index: 1;
                    position: relative;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 18px;
                    padding: 18px 0;

                    .wrap-content {
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                        /* &:has(.note) {
                            border-left: 4px solid var(--rouge-ebra);
                            padding-left: 16px;
                        } */
                    }
                }

                figure {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }

                &.inset-right {
                    .inset-wrap-elements {
                        &::after {
                            content: "";
                            display: block;
                        }
                    }

                    figure {
                        right: -50%;

                        img {
                            border-radius: 80px 0 0 80px;
                        }
                    }
                }

                &.inset-left {
                    .inset-wrap-elements {
                        &::before {
                            content: "";
                            display: block;
                        }
                    }

                    figure {
                        left: -50%;

                        img {
                            border-radius: 0 80px 80px 0;
                        }
                    }

                }
            }

            &.pdfComponent {
                background-color: var(--rouge-ebra);
                color: var(--white);

                h2 {
                    color: inherit;
                }

                .wrapper {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 18px;

                    .wrap-content {
                        display: flex;
                        flex-direction: column;
                        padding-bottom: 18px;

                        a {
                            margin-top: auto;
                        }
                    }
                }
            }

        }
    }
}




/* =============================================================================
    Divers
    ========================================================================== */
.aside {

    .nos-solutions,
    .nos-marques,
    .nos-departements,
    .mediakits,
    .componentContent.chiffres {
        h2 {
            margin-bottom: 8px;
            font-weight: lighter;
        }
    }

    .mediakits {
        h2 {
            margin: 0 !important;
        }
        .sub-title {
            font-size: var(--f-m);
            margin-bottom: 8px;
        }
    }


    .nos-solutions,
    .nos-marques {
        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            li {
                height: fit-content;

                .tag {
                    background-color: var(--white);
                    color: var(--bleu-ebra);
                    font-size: 1.2rem;
                    border-radius: 50px;
                    padding: 4px 8px;
                    display: inline-block;

                    &:hover {
                        text-decoration: none;
                        background-color: var(--bleu);
                    }
                }
            }
        }
    }

}



/* =============================================================================
   DIDODMI
   ========================================================================== */

.consentModuleAnchor {
    position: relative;
    iframe {
        display: none;
    }
}

.consentModule,
.consentModuleFreeHtml {
    top: 0;
    display: none;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    margin: auto;
    padding: 30px;
    text-align: center;
    background-color: #4c4c4c;
    color: #fff;
    z-index: 1;
    overflow: auto;
}

@media only screen and (min-width: 768px) {

    .consentModule,
    .consentModuleFreeHtml {
        align-items: center;
    }
}

.consentModule .consentModule_text,
.consentModuleFreeHtml .consentModule_text {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.consentModule .consentModule_text .consentModule_secondaryText,
.consentModuleFreeHtml .consentModule_text .consentModule_secondaryText,
.consentModule_text a,
.consentModule_text a:visited {
    color: #BBBBBB !important;
}

.consentModule_text a {
    text-decoration: underline;
}

.consentModule_cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 16px;
}