/* =============================================================================
   Labels
   ========================================================================== */
.tags {
    gap: 1.6rem;
}
.tag {
    display: inline-block;
    width: max-content;
    padding: 4px 1.2rem;
    color: var(--greyscale-900);
    border: 1px solid var(--secondary-400);
    border-radius: var(--radius-full);
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out,
        background 0.2s ease-in-out;
}
.tag:hover,
.tag:focus {
    color: var(--greyscale-900);
    border-color: var(--secondary-400);
    background: var(--secondary-200);
}
.tag:active {
    border-color: var(--secondary-400);
    background: var(--greyscale-000);
}
/* Variations */
.tag-m {
    padding: 4px 1.6rem;
}

.tag-lg {
    padding: 8px 1.6rem;
}
.tag-light {
    color: var(--greyscale-000);
    border-color: var(--greyscale-000);
}
.tag-light:hover,
.tag-light:focus,
.tag-light:active {
    color: var(--greyscale-900);
}
.tag.talent-hub:hover,
.tag.talent-hub:focus {
    border-color: var(--talent-hub);
    background: var(--talent-hub-light);
}
.tag.talent-hub:active {
    border-color: var(--talent-hub);
}

.tag.partenariats:hover,
.tag.partenariats:focus {
    border-color: var(--partenariats);
    background: var(--partenariats-light);
}
.tag.partenariats:active {
    border-color: var(--partenariats);
}

.tag.impacts-et-engagement:hover,
.tag.impacts-et-engagement:focus {
    border-color: var(--impacts-et-engagement);
    background: var(--impacts-et-engagement-light);
}

.tag.impacts-et-engagement:active {
    border-color: var(--impacts-et-engagement);
}

.tag.chroniques-innovantes:hover,
.tag.chroniques-innovantes:focus {
    border-color: var(--chroniques-innovantes);
    background: var(--chroniques-innovantes-light);
}

.tag.chroniques-innovantes:active {
    border-color: var(--chroniques-innovantes);
}

.tag.horizons-commerciaux:hover,
.tag.horizons-commerciaux:focus {
    border-color: var(--horizons-commerciaux);
    background: var(--horizons-commerciaux-light);
}

.tag.horizons-commerciaux:active {
    border-color: var(--horizons-commerciaux);
}

.tag.visionnaires-en-action:hover,
.tag.visionnaires-en-action:focus, .tag.strategie:hover, .tag.strategie:focus {
    border-color: var(--visionnaires-en-action);
    background: var(--visionnaires-en-action-light);
}

.tag.visionnaires-en-action:active, .tag.strategie:active {
    border-color: var(--visionnaires-en-action);
}
/* =============================================================================
   Links
   ========================================================================== */
.link {
    position: relative;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s ease-in-out;
}
.link .icon {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
.link:hover,
.link:focus,
.link:hover .icon {
    color: var(--primary-800);
}

.link:active {
    color: var(--primary-800);
}

/* =============================================================================
   Breadcrumb
   ========================================================================== */
.GFWK_breadcrumb {
    margin: var(--margin-24);
}
.GFWK_breadcrumb li:last-of-type span:not(.icon) {
    color: var(--greyscale-600);
    font-weight: bold;
}

@media screen and (max-width: 980px) {
    .GFWK_breadcrumb {
        margin: var(--margin-24-0);
    }
}

/* =============================================================================
   Quizz
   ========================================================================== */
.quiz-label {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--greyscale-000);
    color: var(--greyscale-900);
    border-radius: var(--radius-12);
    padding: 1.8rem 1.2rem;
    box-shadow: var(--shadow);
    border: 1px solid transparent;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out,
        border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    z-index: 1;
}

.quiz-label.disabled {
    cursor: not-allowed;
}
.quiz-label_lg {
    padding: 1.6rem 1.2rem;
}

.quiz-label:not(
        .quiz-label_success,
        .quiz-label_error,
        .quiz-label_selected,
        .quiz-label_other
    ):hover,
.quiz-label:not(
        .quiz-label_success,
        .quiz-label_error,
        .quiz-label_selected,
        .quiz-label_other
    ):focus {
    background: var(--primary-050);
    box-shadow: var(--shadow-hover);
}

.quiz-label:active {
    background: var(--primary-050);
    border-color: var(--primary-900);
}

.quiz-label_success {
    color: var(--success);
    background: var(--success-light);
    border-color: var(--success);
}

.quiz-label_error {
    color: var(--error);
    background: var(--error-light);
    border-color: var(--error);
}

.quiz-label_selected {
    border-color: var(--primary-200);
}

.quiz-item input {
    position: absolute;
    visibility: hidden;
    width: 0;
    opacity: 0;
}

.quiz-label .result {
    position: absolute;
    left: -1px;
    height: calc(100% + 2px);
    top: -1px;
    border-radius: var(--radius-12);
    z-index: -1;
}

.quiz-label_selected .result {
    background: var(--primary-200);
}

.quiz-label_other .result {
    background: var(--primary-050);
}

.quiz-label .icon {
    padding: 4px;
    margin-right: 8px;
    border-radius: var(--radius-full);
}

.quiz-label_selected .icon {
    color: var(--primary-200);
    background: var(--primary-800);
}

.quiz-label_success .icon {
    color: var(--success-light);
    background: var(--success);
}

.quiz-label_error .icon {
    color: var(--error-light);
    background: var(--error);
}

.quiz-label .percents {
    color: var(--greyscale-700);
    margin-left: auto;
}
/* =============================================================================
   Pagination
   ========================================================================== */
.pagination {
    margin: 4.8rem auto;
}

.pagination-list {
    gap: 8px;
    margin-top: 1.6rem;
}

.pagination-item {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    color: var(--primary-800);
    border-radius: var(--radius-full);
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

p.pagination-item {
    cursor: default;
}

.pagination-item:hover,
.pagination-item:focus {
    color: var(--primary-800);
    background: var(--primary-100);
}

.pagination-item:active {
    color: var(--greyscale-000);
    background: var(--primary-800);
}

.pagination-item_selected {
    color: var(--greyscale-000);
    background: var(--primary-800);
}
/* =============================================================================
   Breadcrumb
   ========================================================================== */
.GFWK_breadcrumb ol {
    gap: 1.6rem;
}

.GFWK_breadcrumb span.icon {
    margin-right: 1.6rem;
}

/* =============================================================================
   Cards
   ========================================================================== */
/* Common */
.card {
    display: grid;
    background: var(--greyscale-000);
    border-radius: var(--radius-12);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
    height: 100%;
    position: relative;
}

.card.onModal {
    position: initial;
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

.card:not(.chiffres):hover,
.card:not(.chiffres) {
    /*cursor: pointer;*/
}

.card_content {
    padding: var(--paddingCard);
}

.card .font-title, .segment h3.body-md {
    color: var(--primary-800);
}

.card figure {
    position: relative;
}

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

.card figure img.substitute {
    object-fit: contain;
}

.card.video.onRead figure {
    background: var(--greyscale-900);
}
.card.video figure::after {
    content: "";
    width: 64px;
    height: 64px;
    background: url(../images/Playbutton.png) no-repeat 50% 50% transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
.card.video.onRead.live figure::after {
    content: none;
}

.card_top {
    margin-bottom: 1.6rem;
}

.card_post .card_top figure,
.card_media .card_top figure {
    width: 4rem;
    height: 4rem;
    margin: 0 1.6rem 0 0;
    border: 1px solid var(--primary-800);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.card_post .card_top .font-title,
.card_media .card_top .font-title {
    flex: 1;
}
.card_top figcaption,
.card_top h3 {
    width: calc(100% - 5.6rem);
    font-weight: 700;
}
/* Card Actu */
.card_actu:not(.chiffres, .sondage, .quiz) {
    grid-template-rows: 185px 1fr;
    grid-template-columns: 1fr;
    cursor: pointer;
}

@media screen and (max-width: 980px) {
    .card_actu:not(.chiffres, .sondage, .quiz) {
        grid-template-rows: 135px 1fr;
    }
}

.card_actu figure {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.card .card_actu-action {
    position: absolute;
    top: 8px;
    right: 8px;
    gap: 1.2rem;
    z-index: 2;
}

.card .card_actu-action button,
.card .card_actu-action a {
    color: var(--greyscale-000);
    background: var(--primary-800);
    opacity: 0;
    visibility: invisible;
    transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out;
    z-index: 2;
}

.card:hover .card_actu-action button,
.card:hover .card_actu-action a {
    opacity: 1;
    visibility: visible;
}

.card_actu .card_actu-action button:hover,
.card .card_actu-action button:focus,
.card_actu .card_actu-action a:hover,
.card .card_actu-action a:focus {
    background: var(--primary-600);
    opacity: 1;
    visibility: visible;
}

.card_actu .tags,
.card_favorite .tags {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 1.2rem;
    color: var(--greyscale-700);
}

.card .card_content {
    display: flex;
    flex-direction: column;
}

.card_content a.goToDetail::after,
.card.goToModal .card_content::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
}

.card.video.onRead button.goBox, .card.video.onRead a.goBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.card_content a.tag {
    z-index: 2;
}

.card_actu h3,
.card_favorite h3 {
    margin: 8px 0;
}

.card_actu .card_actu-info,
.card_favorite .card_actu-info {
    color: var(--greyscale-700);
    margin-top: auto;
    padding-top: 8px;
}

.card_actu .card_actu-info .icon {
    margin-right: 4px;
    color: var(--primary-800);
}

@media screen and (max-width: 768px) {
    .card_favorite {
        grid-template-columns: 120px 1fr !important;
        grid-template-rows: initial !important;
    }
    .listBookmarked .column{padding: 1.6rem 0;}
    .card_favorite .body-sm{
        display: none;
    }

}
@media screen and (max-width: 480px) {
    .card_favorite {
        grid-template-columns: 1fr !important;
    }

}
/* Card Actu Home */
.article_home {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 320px);
}
.article_home .column {
    padding: 0;
}
.article_home .column:first-of-type {
    grid-area: 1 / 1 / 3 / 2;
}

.article_home .column:nth-of-type(2) {
    grid-area: 1 / 2 / 2 / 3;
}

.article_home .column:last-of-type:not(:nth-of-type(2)):not(:first-of-type) {
    grid-area: 2 / 2 / 3 / 3;
}

.article_home .card_actu {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    box-shadow: none;
    background: var(--primary-800);
}

.article_home .card_actu figure {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    z-index: 1;
}
.article_home .card_actu > div:not(.card_content, .card_actu-action) {
    position: relative;
    display: block;
    width:100%;
    height: inherit;
}
.article_home .card_actu > div:not(.card_content, .card_actu-action)::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90%;
    background: linear-gradient( to top,rgba(5, 0, 48, 0.70), rgba(0, 21, 126, 0.70), transparent);
    z-index: 1;
}
/*
@media screen and (max-width: 1025px) {
    .article_home .card_actu .decoration{display: none !important;}
}
*/
.article_home .card_actu .card_content {
    width: 100%;
    color: var(--greyscale-000);
    padding: 0 var(--paddingCard) var(--paddingCard) var(--paddingCard);
    z-index: 1;
    background: rgba(0, 27, 117, 0.62);
    position: absolute;
    bottom: 0;
}

    .article_home .card_actu .card_content::before {
        content: '';
        width: 100%;
        height: 120px;
        left: 0;
        right: 0;
        position: absolute;
        display: block;
        bottom: 100%;
        background: linear-gradient( 0deg,rgba(0, 27, 117, 0.62) 0%, rgba(0, 27, 117, 0) 100%);
    }

@media screen and (max-width: 1024px) {
    .article_home .card_actu:first-of-type,
    .article_home .card_actu:nth-of-type(2),
    .article_home .card_actu:last-of-type {
        grid-area: none;
    }

    .article_home {
        display: flex;
        margin: 2.4rem 0 0;
    }

    .article_home .card_actu {
        background: linear-gradient(180deg, #001b75 0%, #4d5c8f 122.08%);
    }

    .article_home .card_actu .card_content {
        height: 100%;
    }

    .article_home .card_actu {
        margin: 0;
        grid-template-rows: 170px 1fr;
        border-radius: var(--radius-12);
        box-shadow: var(--shadow);
    }

    .article_home .card_actu figure {
        position: relative;
    }

    .article_home .card_actu figure::before {
        content: none;
    }
}

.article_home .card_actu h3 {
    margin-top: 1.2rem;
}

.article_home .card_actu.card2 h3 {
    font-size: 2rem;
    line-height: 3rem;
    margin: 8px 0 0 0;
}


.article_home .card_actu .tags {
    flex-direction: row-reverse;
    align-items: center;
    color: var(--greyscale-000);
}

.article_home .card_actu .card_actu-info {
    padding-top: 1rem;
}

.article_home .card_actu .card_actu-info,
.article_home .card_actu .card_actu-info .icon {
    color: var(--greyscale-000);
}

/* Card favorite */
.card_favorite {
    grid-template-rows: 145px 1fr;
    grid-template-columns: 1fr;
}

/* Card Post */
.card_post {
    height: 100%;
}

.card_post .text {
    margin-bottom: 1.6rem;
}

.card_post figure {
    margin-top: auto;
    border-radius: var(--radius-8);
    border: 1px solid var(--greyscale-600);
    overflow: hidden;
}
.splide-comu .card_post .card_content > figure {
    height: 225px;
}
/* Card Media */
.card_media figure {
    width: 10rem;
    height: 10rem;
    margin-right: 1.6rem;
    border-radius: var(--radius-8);
    border: 1px solid var(--greyscale-600);
    overflow: hidden;
}

.card_media .text {
    width: calc(100% - 10rem - 1.6rem);
}
/* Card Chiffre */
.card_actu.chiffres {
    color: var(--greyscale-000);
    background: linear-gradient(180deg, var(--primary-800) 0%, #4d5c8f 122.08%);
}

.card_actu.chiffres .font-title {
    color: var(--greyscale-000);
}

.card_actu.chiffres .headline {
    margin: 8px 0 5.6rem;
}

/* Card Quiz */
/* Card Sondage */
.card_actu.sondage {
    color: var(--greyscale-000);
    background: linear-gradient(180deg, var(--primary-800) 0%, #4d5c8f 122.08%);
}

.card_actu.sondage .font-title {
    color: var(--greyscale-000);
    margin-bottom: 1.6rem;
}

.card_actu.sondage .headline {
    margin: 8px 0 5.6rem;
}

.GRDC_webPoll,
.voteContent {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card_actu.sondage .pollComponent {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card_actu.sondage .pollComponent ul {
    display: grid;
    gap: 8px;
}

.card_actu.sondage .pollComponent .pollFooter {
    margin-top: auto;
    padding-top: 2.2rem;
}

.card_actu.sondage .poll_result {
    margin-bottom: 1.2rem;
}
.card_actu.sondage .reponse {
    max-width: 85%;
}

/* Abonnement */
.card_abo {
    display: flex;
    align-items: center;
    padding: var(--padding-24);
    background: linear-gradient(to right, var(--gradient-1));
}
.card_abo figure {
    min-width: 4.8rem;
    height: 4.8rem;
    border-radius: var(--radius-full);
    border: 1px solid #5D616F;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .card_abo figure .icon {
        font-size: 2rem;
    }

.card_abo .card_content {    
    padding: 0;
    margin-left: 1.6rem;
}
.card_abo .card_content a {
    color: var(--primary-800);
}
.card_abo .card_content .text{
    margin-top: 8px;
}

.abo_list {
    gap: 2.4rem;
    margin-top: 2.4rem;
}
    .abo_list .abo_list-item {
        width: calc(50% - 1.2rem);
        background: var(--greyscale-000);
        border-radius: var(--radius-12);
        box-shadow: var(--shadow);
    }
@media screen and (max-width: 768px) {
    .abo_list .abo_list-item {
        width: 100%;
    }
}
.abo_list .card_abo {
    height: auto;
    box-shadow: none;
}
.abo_list .abo_list-item .btn {
    width: calc(100% - 4.8rem);
    margin: 1.6rem 2.4rem;
    justify-content: center;
}
/* =============================================================================
   Segments : card en ligne
   ========================================================================== */
.segment {
    display: flex;
    width: 100%;
    color: var(--primary-800);
    border: 1px solid var(--primary-100);
    border-radius: var(--radius-12);
    padding: var(--padding-8);
    margin: 0 0 2.4rem 0;
    transition: border .2s ease-in-out;
}

.segment:hover {
    border: 1px solid var(--primary-600);
}

.segment figure {
    margin: 0 1.6rem 0 0;
}
@media screen and (max-width: 768px) {
    .segment figure {
        width: 160px!important;
    }
}
@media screen and (max-width: 480px) {
    .segment {
        flex-direction: column;
    }
    .segment figure {
        width: 280px!important;
        margin: 0 auto;
    }
}
.segment img {
    border-radius: var(--radius-12);
}

.segment .corps {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.segment .tags {
    margin-bottom: 1.2rem;
}
.segment h2, .segment h3, .segment p {
    margin-bottom: 1.2rem;
}
@media screen and (max-width: 980px) {
    .ContentListGroupComponent #actualites {
        padding: 0;
    }
    .ContentListGroupComponent #actualites .grid .column {
        padding: 8px 0;
        width: 100% !important;
    }
    .ContentListGroupComponent #actualites article {
        display: flex;
        padding: 8px;
    }
    .ContentListGroupComponent #actualites article figure {
        flex-grow: 0.5;
        width: auto;
    }
    .ContentListGroupComponent #actualites article .card_content {
        flex-grow: 1;
        width: 100%;
        padding: 0;
        margin-left: 1.6rem;
    }
    .ContentListGroupComponent #actualites article .resume {
        display: none;
    }
}
/* =============================================================================
   $GRDC / NEWL : module & component
   ========================================================================== */
.NewsLetterSmartSubscriptionComponent .wrapper,
.NewsLetterSmartSubscriptionComponent #wrapper {
    z-index: unset;
}

.GRDC_newsletterSubscribe .toast {
    margin: 2.4rem 0;
}
.GRDC_newsletterSubscribe #div-newsletter-container {
    position: relative;
    gap: 2.4rem;
    margin-top: 2.4rem;
}

.GRDC_newsletterSubscribe .news {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(50% - 1.2rem);
    color: var(--primary-800);
    background: #fff;
    border: 1px solid #fff;
    padding: 1.6rem;
    border-radius: var(--radius-8);
    box-shadow: var(--shadow);
}
.GRDC_newsletterSubscribe .news.active {
    border: 1px solid var(--secondary-400);
}
.GRDC_newsletterSubscribe .news .pin {
    position: absolute;
    right: 1.6rem;
    top: 1.6rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    color: var(--success);
    background: var(--success-light);
    border: 1px solid var(--success);
    border-radius: var(--radius-full);
}
.GRDC_newsletterSubscribe .news h3 {
    margin-bottom: 8px;
    margin-right: 2.8rem;
}

.GRDC_newsletterSubscribe .news .action {    
    width: 100%;
    padding-top: 1.6rem;
    margin-top: auto;
}
.GRDC_newsletterSubscribe .news .action button {
    width: 100%;
    justify-content: center;
}
@media screen and (max-width: 768px) {
    .GRDC_newsletterSubscribe .news {
        width: 100%;
    }
}
/* =============================================================================
   Detail Component / default / podcast / serie
   ========================================================================== */
.detail {
    margin: 0 auto 6.4rem;
}

@media screen and (max-width: 980px) {
    .detail {
        padding: 0 !important;
    }
}

.ContentDetailComponent h1 {
    color: var(--primary-800);
    margin: 0 0 1.6rem 0 !important;
    order: 1;
}

.detail .heading {
    display: flex;
    flex-direction: column;
    padding: var(--paddingCard);
}

.ContentDetailComponent .mainImage {
    position: relative;
    order: 0;
}

.ContentDetailComponent .mainImage img {
    width: 100%;
    border-radius: var(--radius-12);
}

.ContentDetailComponent .heading .mainImage .caption {
    position: absolute;
    z-index: -1;
}

.ContentDetailComponent .heading .tags {
    margin: 1.6rem 0 2.4rem;
    order: 0;
}

.ContentDetailComponent .heading time {
    order: 3;
}
.ContentDetailComponent .heading .btn {
    order: 4;
}
.toolBox ul {
    gap: 3.2rem;
}
.toolBox button:focus {
    border: 2px solid #0060df;
    outline: 1px solid white;
}
.detail .content {
    margin: auto;
}

@media screen and (max-width: 980px) {
    .detail .content.column {
        padding: 0;
    }
}

.ContentDetailComponent .accroche {
    margin-bottom: 2.4rem;
}

/* Video */
.ContentDetailComponent video {
    aspect-ratio: 16/9;
}
/* Texte */
.ContentDetailComponent .textComponent p {
    margin-bottom: 8px;
}

.ContentDetailComponent .textComponent h2 {
    margin-bottom: 2.4rem;
}

.ContentDetailComponent .textComponent ul,
.ContentDetailComponent .insetComponent ul {
    list-style: disc inside;
}

.ContentDetailComponent .textComponent ol,
.ContentDetailComponent .insetComponent ol {
    list-style: decimal inside;
}

.ContentDetailComponent .textComponent li:not(:last-of-type),
.ContentDetailComponent .insetComponent li:not(:last-of-type) {
    margin-bottom: 2.4rem;
}

.ContentDetailComponent .textComponent .imageContent.left {
    float: left;
    margin: 0 20px 0 0;
    width: 40%;
}

.ContentDetailComponent .textComponent .imageContent.right {
    float: right;
    margin: 0 0 0 20px;
    width: 40%;
}

.ContentDetailComponent .textComponent .imageContent img {
    width: 100%;
    border-radius: var(--radius-12);
}

@media screen and (max-width: 980px) {
    .ContentDetailComponent .textComponent .imageContent.left,
    .ContentDetailComponent .textComponent .imageContent.right {
        float: none;
        margin: 20px 0;
        width: 100%;
    }
}

.ContentDetailComponent .caption {
    color: var(--primary-800);
}

/* video */
.ContentDetailComponent .videoComponent {
    overflow: hidden;
    margin: 0px 0 35px 0;
}

.videoContentExt {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.videoContentExt iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-12);
}

.ContentDetailComponent .videoBimm {
    line-height: 0;
}

.ContentDetailComponent .videoBimm video {
    border-radius: 12px 12px 0 0;
}

.ContentDetailComponent .transcription {
    background: var(--greyscale-050);
    border: 1px solid var(--greyscale-400);
    border-radius: 0 0 12px 12px;
    padding: 1.6rem;
}

    .ContentDetailComponent .transcription summary {
        cursor: pointer;
        text-underline-offset: 4px;
        transition: color 0.2s ease-in-out;
    }

        .ContentDetailComponent .transcription summary:hover {
            color: var(--secondary-500);
        }

/* galerie */
.galleryContent img {
    width: 100%;
    border-radius: var(--radius-12);
}

.galleryContent .splide__arrow {
    background: rgba(0, 0, 0, 0.7) !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid #fff;
}

.galleryContent .splide__arrow:hover {
    border: 1px solid #888;
}

.galleryContent .splide__arrow:hover .icon {
    color: #000;
}

.ContentDetailComponent .textComponent {
    overflow: hidden;
    margin: 0 0 1.6rem 0;
}

.ContentDetailComponent .pdfComponent {
    overflow: hidden;
    margin: 0 0 1.6rem 0;
    border-radius: var(--radius-12);
    /*
    border-width: 1px;
    border-style: solid;*/
    padding: 1.6rem;
}

/* Questions / Réponses*/
.ContentDetailComponent .textComponent .question {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2rem;
}
/* Citation */
.ContentDetailComponent .textComponent .citation {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 4.8rem;
    color: var(--primary-800);
    margin: 3.2rem 0;
}
/* Inset */
.ContentDetailComponent .insetComponent {
    padding: var(--padding-24);
    margin: var(--margin-32-0);
}
.ContentDetailComponent .insetComponent .insetTitle {
    margin-bottom: 1.2rem;
}
.ContentDetailComponent .insetComponent .content:has(figure) {
    display: flex;
    gap: 2.4rem;
}
.ContentDetailComponent .insetComponent .content:has(figure.right) {
    flex-direction: row-reverse;
}
.ContentDetailComponent .insetComponent figure {
    width: 280px;
}
.ContentDetailComponent .insetComponent .textComponent {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    margin-bottom: 0;
}
.ContentDetailComponent .insetComponent .insetSignature {
    color: var(--primary-800);
    margin: 1.2rem 0 0;
}
.ContentDetailComponent .insetComponent .insetSignature.right {
    text-align: right;
}
@media screen and (max-width: 980px) {
    .ContentDetailComponent .insetComponent .content:has(figure) {
        flex-direction: column;
    }
    .ContentDetailComponent .insetComponent .content:has(figure.right) {
        flex-direction: column-reverse;
    }
    .ContentDetailComponent .insetComponent figure {
        width: 100%;
    }
}
/* Image */
.ContentDetailComponent .imagesComponent {
    margin: var(--margin-32-0);
}

.ContentDetailComponent .toolBox {
    border-style: solid;
    border-width: 1px 0;
    border-color: var(--greyscale-200);
    min-height: 40px;
    margin: var(--margin-24-0);
    padding: var(--padding-8-16);
}

/* Vote */
.detail .pollComponent .listOption {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 2.4rem 0;
}

/* Appel à contribution */
.contributioncall h2 {
    margin-bottom: 2.4rem;
}

.contributioncall img {
    display: block;
    margin: 2.4rem auto;
}

.contributioncall .description,
.contributioncall form > p {
    margin-bottom: 1.2rem;
}

.contributioncall .btn {
    margin: 1.2rem 0;
}

/* Commentaires */
#zoneComment .font-title {
    margin-bottom: 8px;
}

#zoneComment .field {
    padding: 0;
}

#zoneComment .btn {
    margin: 8px 0 0 auto;
}

.comment {
    border-left: 1.5px solid var(--primary-500);
    padding: 0 0 0 2.4rem;
    margin: 0 0 1.6rem 0;
}

.comment .infoComment {
    margin: 1.6rem 0;
}

.comment .textComment {
    margin: 0 0 1.6rem 0;
}
/* Même sujet */
.ContentDetailComponent .GRDC_List_Model1 {
    padding: 2.4rem 0 4.8rem;
}

.ContentDetailComponent .GRDC_List_Model1 h2 {
    color: var(--primary-800);
}

.ContentDetailComponent .GRDC_List_Model1 .article_list {
    padding: 2.4rem 110px 0;
}


/* Série */
.listSerie{
    margin: 2.4rem 0 0 0;
}

    .listSerie .segment .corps{
        justify-content: normal
    }

    .listSerie .segment .tags {
        flex-wrap: wrap;
        margin-bottom: 1.2rem;
    }
.GRDC_serieList .segment .link {
    margin-top: 1.2rem;
}
/* =============================================================================
   Slider
   ========================================================================== */
.splide .splide__arrow {
    color: var(--primary-800);
    background: transparent;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.8rem;
    opacity: 1;
}

.splide .splide__arrow--prev {
    left: 1.8rem;
}

.splide .splide__arrow--next {
    right: 1.8rem;
}

.splide .splide__arrow:disabled {
    display: none;
}
.splide__pagination__page {
    width: 1.2rem !important;
    height: 1.2rem !important;
    margin: 4px !important;
}
.splide .splide__pagination__page {
    border: 1px solid var(--primary-800);
    background: transparent;
}

.splide .splide__pagination__page.is-active {
    background: var(--primary-800);
    transform: none;
}
.splide.is-focus-in .splide__arrow:focus {
    outline: 2px solid var(--greyscale-000) !important;
    outline-offset: 0 !important;
    border: 2px solid var(--primary-500);
}
.splide.is-focus-in .splide__pagination__page:focus {
    outline: 2px solid var(--primary-500) !important;
    outline-offset: 0 !important;
    border: 2px solid var(--greyscale-000);
}
.splide .splide__track {
    padding: 1.2rem;
}

@media screen and (max-width: 768px) {
    .splide .splide__track {
        width: calc(100% + 1.6rem);
        padding: 1.2rem;
    }
}

.splide figure {
    position: relative;
}

.splide figcaption {
    background: rgba(255, 255, 255, 0.86);
    padding: 8px;
    position: absolute;
    width: 100%;
    bottom: 0;
    border-radius: 0 0 12px 12px;
    text-align: center;
}
.splide__pagination {
    bottom: initial !important;
}
/* =============================================================================
   Profil
   ========================================================================== */
.profil-info {
    align-self: start;
    padding: 1.6rem;
}

.profil-info .font-title {
    margin: 2.4rem 0 8px;
}

.profil-info .btn {
    margin-top: 2.4rem;
}

.profil-details {
    padding: 1.6rem 2.4rem;
}
.profil-details h2.title {
    margin-bottom: 8px;
}
@media screen and (max-width: 1280px) {
    .listBookmarked .column {
        width: 50%!important;
    }
}
@media screen and (max-width: 1024px) {
    .profil-info, .profil-details {
        width: 100%!important;
    }
    .profil-info {
        order: 2;
        margin-top: 2.4rem;
    }
}
@media screen and (max-width: 768px) {
    .nav_niv1 li {
        width: 50%;
    }
    .listBookmarked .column {
        width: 100% !important;
    }
}
@media screen and (max-width: 480px) {
    .nav_niv1 li {
        width: 100%;
    }
}
/* Navigation */
.nav_model01 {
    margin-bottom: 4rem;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.nav_niv1 {
    border-bottom: 2px solid var(--greyscale-200);
}
.nav_niv1 li {    
    flex-grow: 1;
}
.nav_niv1 li:hover {
    background-color: var(--secondary-200);
}

.nav_niv1 li a {
    padding: 1.6rem 2.4rem;
    text-align: center;
    display: block;
}

.nav_niv1 li.selected {
    border-bottom: 2px solid var(--primary-800);
    margin: -2px;
}

/* =============================================================================
   Popup Media
   ========================================================================== */
.card.video video {
    width: 100%;
    height: 100%;
}

.boxMedia {
    display: none;
    position: fixed;
    max-width: 1024px;
    width: 95vw;
    min-height: 400px;
    background-color: transparent;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    cursor: auto;
    border: none;
    z-index: 20;
}

.boxMedia .videoBimm {
    line-height: 0;
    height: 415px;
}
.boxMedia .corps {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}
.boxMedia .corps > .flex {
  gap: 4rem;
}
.boxMedia .tags,
.boxMedia .tags a {
    color: #fff;
}

.boxMedia .tags {
    flex-direction: row;
    align-items: center;
}

.boxMedia .closeMedia {
    margin: 0 0 16px 0;
}

.boxMedia .closeMedia button {
    font-size: 14px;
    margin: 0 0 16px 0;
}

.boxMedia video {
    border-radius: 12px 12px 0 0;
}

.boxMedia .corps {
    background-color: var(--primary-800);
    color: var(--greyscale-000);
    border-radius: 0 0 12px 12px;
    padding: var(--padding-16);
}

.boxMedia .content {
    background-color: var(--primary-900);
    border-radius: var(--radius-12);
    padding: var(--padding-16);
    max-height: 125px;
    overflow-y: auto;
    scrollbar-color: white transparent;
    scrollbar-width: thin;
}
@media screen and (max-width: 1024px) {
    .boxMedia .videoBimm {
        height: 350px;
    }
    .boxMedia .corps > .flex {
        gap: 2.4rem;
    }
}
/* =============================================================================
   Podcast : component
   ========================================================================== */
#showPlayer {
    margin-top: 2.4rem;
}
.audio-player {
    position: fixed;
    bottom: 60px;
    left: 50%;
    display: none;
    background: var(--primary-800);
    border-radius: var(--radius-12);
    padding: var(--padding-16);
    box-shadow: var(--shadow);
    z-index: 10;
    transform: translateX(-50%);
}

#audio-player-container.active {
    display: flex;
}

.audio-player figure {
    margin: 0 20px 0 0;
}

.audio-player figure img {
    width: 200px;
    border-radius: 14px;
}

.contentAudio {
    color: #fff;
    width: calc(100% - 220px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contentAudio p {
    margin: 0 0 5px 0;
}
.contentAudio p.body-sm {
    order: -1;
}
.contentAudio p.body-lg {
    order: -1;
}
/* ------------ player ----------- */
.player-controls {
    display: flex;
    align-items: center;
}

.player-play-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.player-icon-pause,
.player-icon-play {
    display: flex;
    align-items: center;
}

.icon-container {
    fill: transparent;
    stroke: none;
}

.player-play-btn:hover,
.player-play-btn:hover .icon {
    color: var(--primary-800);
}

.player-timeline {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
}

.player-progress {
    display: flex;
    position: relative;
    height: 7px;
    background: transparent;
    border-radius: 25px;
    border: 1px solid #fff;
    margin: 0 5px;
    flex: 10;
    flex-basis: 100%;
    overflow: hidden;
}

.player-progress-filled {
    height: 6px;
    background: #4edbba;
    flex: 0;
    flex-basis: 0%;
    border-radius: 25px;
}

.player-time {
    font-size: 1.4rem;
    font-weight: 400;
}

#player-time-current {
    padding: 2px 10px 2px 0;
    margin-bottom: 0;
}

#player-time-duration {
    padding: 2px 20px 2px 10px;
    margin-bottom: 0;
}

.player-volume-container {
    width: 15%;
}

.player-volume {
    height: 28px;
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
    background: transparent;
}

.player-volume:focus {
    outline: none;
}

.player-volume::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    animate: 0.2s;
    background: #4edbba;
    border-radius: 10px;
}

.player-volume::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    border-radius: 100px;
    border: none;
    background: #4edbba;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -4px;
}

.player-volume:focus::-webkit-slider-runnable-track {
    background: #4edbba;
}

.player-volume::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    animate: 0.2s;
    background: #4edbba;
    border-radius: 10px;
}

.player-volume::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 100px;
    border: none;
    background: #4edbba;
    cursor: pointer;
    margin-top: -4px;
}

.player-volume::-ms-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    animate: 0.2s;
    background: #4edbba;
    border-radius: 10px;
}

.player-volume::-ms-fill-lower {
    background: #4edbba;
    border-radius: 10px;
}

.player-volume::-ms-fill-upper {
    background: #4edbba;
    border-radius: 10px;
}

.player-volume::-ms-thumb {
    margin-top: 1px;
    height: 15px;
    width: 15px;
    border-radius: 5px;
    border: none;
    background: #4edbba;
    cursor: pointer;
}

.player-volume:focus::-ms-fill-lower {
    background: #38bdf8;
}

.player-volume:focus::-ms-fill-upper {
    background: #38bdf8;
}

#closePlayer {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    color: #fff;
}
#closePlayer:focus {
    border: 2px solid #0060df;
    outline: 1px solid white;
}
#closePlayer .icon {
    color: #fff;
}

#closePlayer:hover,
#closePlayer:hover .icon {
    color: var(--secondary-400);
}

#closePlayer::after {
    background: #fff;
}

#closePlayer:hover::after {
    background: var(--secondary-400);
}

/* =============================================================================
   $Filter
   ========================================================================== */
h1 #entiteName span{/*text-transform: uppercase*/ }

.searchTitle h1 {
    margin-bottom: 1.6rem;
}
.searchTitle button {
    margin: 0 auto 4.8rem; 
}

.searchTitle .txtAboOK {
    display: none;
    max-width: 40%;
    margin: auto;
    box-shadow: var(--shadow);
}
#listSelectChoice {
    gap: 1.6rem;
}
#listSelectChoice .tag {
    border-color: var(--primary-800);
}

#btnClear {
    display: none;
}

    #btnClear.active {
        display: block;
    }
/* =============================================================================
   $UserSetting
   ========================================================================== */

form.userSetting .toast {
    margin: 2.4rem 0;
}
form.userSetting .field {
    border-bottom: 1px solid var(--greyscale-200);
    margin: 0 0 1.6rem 0;

}
form.userSetting button[type="submit"] {
    margin: auto;
}


/* =============================================================================
   $StaticPage
   ========================================================================== */
.StaticPage h2, .StaticPage .ei_titletext[aria-level="3"] {
    margin: 2.4rem 0;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 4rem;
    color: var(--primary-700) !important;
    position: relative;
    padding: 10px 0 0 26px !important;
}
    .StaticPage h2::before, .StaticPage .ei_titletext[aria-level="3"]::before {
        content: "";
        width: 4px;
        height: 40px;
        background-color: var(--primary-200);
        left: -2px;
        position: absolute;
    }

.StaticPage h3, .StaticPage .ei_titletext[aria-level="4"] {
    margin: 1.4rem 0 1rem 0 !important;
    color: var(--primary-600) !important;
}
.StaticPage h4 {
    margin: 0.8rem 0;
}

.StaticPage .content, .StaticPage .ei_gpblock_body {
    /*border: 1px solid var(--primary-200);
    border-radius: var(--radius-12);*/
    padding: 1.6rem;
    margin: 0 0 0 10px;
}

.StaticPage ul {
    margin: 0.8rem;
    line-height: 1.4;
}

.StaticPage ul li {
    list-style: disc;
}

.StaticPage p {
    margin: 0 0 1.6rem 2.4rem;
    line-height: 1.4;
}

.StaticPage a {
    text-decoration: underline;
}

.StaticPage table {
    font-size: 1.4rem;
    background-color: #fff;
    border-collapse: separate;
    border-spacing: 0 7px;
}
.StaticPage table caption {
    background: var(--primary-050);
    font-weight: 700;
    padding: 0.8rem;
}

.StaticPage table thead {
    background: var(--greyscale-100);
    font-weight: 500;
}

table thead td:first-child {
    border-left: 1px solid green;
}

table thead td:last-child {
    border-right: 1px solid green;
}

table td {
    height: 50px;
    vertical-align: middle;
    padding-left: 0.8rem;
    position: relative;
}

table td.c {
    text-align: center;
}
table td:after {
    content: "";
    width: 1px;
    position: absolute;
    right: 0;
    top: 8px;
    bottom: 8px;
    background-color: #eee;
}

table td:last-child:after {
    content: none;
}

table tbody td {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

table tbody td:first-child {
    border-left: 1px solid #eee;
}

table tbody td:last-child {
    border-right: 1px solid #eee;
}

table tbody tr:hover {
    background-color: #fafafa;
}


/* =============================================================================
   Flash
   ========================================================================== */
.linkbuttonblock:has(.flash-content:empty) {
    display: none;
}
.linkbuttonblock {
    background: var(--secondary-050);
    color: var(--primary-800);
}
.linkbuttonblock .container {
    padding-top: 2rem; 
    padding-bottom: 2rem; 
}
.linkbuttonblock h2 {
    gap: 8px;
    margin-right: 2.4rem
}

/* =============================================================================
   Pub AutoPromo
   ========================================================================== */
.listPromotionBlock {
    display: grid;
    place-items: center;
    background-attachment: scroll;
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 350px;
    background-color: var(--secondary-100);
}
.listPromotionBlock-content {
    position: relative;
    display: grid;
    place-items: center;
    gap: 1.2rem;
    color: var(--greyscale-000);
    z-index: 1;
}
.listPromotionBlock-content::before {
    content: "";
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background: rgba(0, 0, 0, 0.5);
    filter: blur(35px);
    z-index: -1;
}
.listPromotionBlock-content .flex {
    gap: 1.2rem;
}


/* =============================================================================
   plugin : lightBox chocolat
   ========================================================================== */
/* =============================================================================
   lightBox chocolat
   ========================================================================== */
.chocolat-zoomable.chocolat-zoomed {
    cursor: zoom-out;
}

.chocolat-open {
    overflow: hidden;
}

.chocolat-overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #000;
    display: none;
    opacity: 0.8;
}

.chocolat-wrapper {
    height: 100%;
    width: 100%;
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    z-index: 999;
    color: #fff;
}

.chocolat-zoomable .chocolat-img {
    cursor: zoom-in;
}

.chocolat-loader {
    height: 32px;
    width: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
    z-index: 1000;
    background: url(/files/fr/images/loader.gif);
    display: none !important;
}

.chocolat-content {
    position: fixed;
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
    z-index: 997;
    text-align: left;
}

    .chocolat-content .chocolat-img {
        position: absolute;
        width: 100%;
        height: 100%;
    }

.chocolat-image {
    cursor: zoom-in;
}

.chocolat-wrapper .chocolat-left {
    position: absolute;
    left: 0;
    width: 50px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
    background: url(/files/fr/images/left.png) 50% 50% no-repeat;
    z-index: 997;
    display: none;
}

.chocolat-wrapper .chocolat-right {
    position: absolute;
    right: 0;
    width: 50px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
    background: url(/files/fr/images/right.png) 50% 50% no-repeat;
    z-index: 997;
    display: none;
}

    .chocolat-wrapper .chocolat-right.active {
        display: block;
    }

.chocolat-wrapper .chocolat-left.active {
    display: block;
}

.chocolat-wrapper .chocolat-top {
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    line-height: 50px;
    height: 50px;
    overflow: hidden;
    z-index: 997;
    margin-bottom: 10px;
}

.chocolat-wrapper .chocolat-close {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    background: url(/files/fr/images/close.png) 50% 50% no-repeat;
}

.chocolat-wrapper .chocolat-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 40px;
    height: 40px;
    font-size: 12px;
    z-index: 997;
    padding-left: 15px;
    padding-right: 15px;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    margin-top: 10px;
}

.chocolat-wrapper .chocolat-set-title {
    display: inline-block;
    padding-right: 15px;
    line-height: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.chocolat-wrapper .chocolat-pagination {
    float: right;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
}

.chocolat-wrapper .chocolat-fullscreen {
    width: 16px;
    height: 40px;
    background: url(/files/fr/images/fullscreen.png) 50% 50% no-repeat;
    display: block;
    margin: auto;
    cursor: pointer;
    float: right;
}

.chocolat-wrapper .chocolat-description {
    display: inline;
    text-align: center
}

.chocolat-wrapper .chocolat-close:focus,
.chocolat-wrapper .chocolat-left:focus,
.chocolat-wrapper .chocolat-right:focus,
.chocolat-wrapper .chocolat-fullscreen:focus {
    border: 1px solid white;
}

/* no container mode*/
body.chocolat-open > .chocolat-overlay {
    z-index: 994;
}

body.chocolat-open > .chocolat-loader {
    z-index: 994;
}

body.chocolat-open > .chocolat-content {
    z-index: 997;
}

/* container mode*/
.chocolat-in-container .chocolat-wrapper,
.chocolat-in-container .chocolat-content,
.chocolat-in-container .chocolat-overlay {
    position: absolute;
}

.chocolat-in-container {
    position: relative;
}